diff --git a/MUI_MIGRATION.md b/MUI_MIGRATION.md
new file mode 100644
index 0000000..531928e
--- /dev/null
+++ b/MUI_MIGRATION.md
@@ -0,0 +1,92 @@
+# Material-UI Migration Summary
+
+This document outlines the migration of the Altarra app from Tailwind CSS to Material-UI (MUI).
+
+## Dependencies Added
+
+- `@mui/material@^5.14.20`
+- `@mui/icons-material@^5.14.20`
+- `@emotion/react@^11.11.1`
+- `@emotion/styled@^11.11.0`
+
+## Changes Made
+
+### 1. Theme Setup
+- Created `src/context/ThemeProvider.tsx` - Custom MUI theme with:
+  - Primary color: `#006600` (green)
+  - Secondary color: `#FF0000` (red)
+  - Custom typography and component overrides
+
+### 2. Layout
+- Updated `src/app/layout.tsx` to:
+  - Use `ThemeProvider` wrapper
+  - Remove Tailwind CSS import
+  - Use MUI `Box` for flex layouts
+
+### 3. Component Migration
+
+#### FormField.tsx
+- Replaced custom input with `TextField` component
+- Automatic error handling with `helperText` prop
+- Integrated label and validation styling
+
+#### SubmitButton.tsx
+- Replaced custom button with `Button` component
+- Used `startIcon` for loading spinner (`CircularProgress`)
+- Automatic disabled state styling
+
+#### StatusMessage.tsx
+- Replaced custom alerts with `Alert` component
+- Automatic severity-based styling (success, error, info)
+
+#### IdentityForm.tsx
+- Used `Box` component for form wrapper
+- Used `Typography` for headings
+- FormField components integrated
+
+#### RackHeightsForm.tsx
+- Replaced form inputs with FormField components
+- Used `Alert` for success message
+- Used `Button` for secondary actions
+- Replaced custom spinner with MUI `CircularProgress`
+
+#### HomePage.tsx
+- Used `Box`, `Paper`, `Typography`, and `Button` components
+- Language toggle buttons use variant-based styling
+- Logo and layout uses MUI's sx prop system
+
+#### LandingPage.tsx
+- Used `Paper` component for card styling
+- Used `Button` with link functionality
+- Replaced Lucide icon with `OpenInNewIcon` from `@mui/icons-material`
+
+#### Footer.tsx
+- Used `Box`, `Typography`, and `Container` components
+- Maintained styling with MUI theming
+
+#### Spinner.tsx
+- Replaced custom spinner with `CircularProgress` component
+
+## Styling Approach
+
+All components now use MUI's `sx` prop system, which provides:
+- Type-safe styling
+- Direct access to theme values
+- Responsive design support
+- Better performance
+
+## Migration Benefits
+
+1. **Consistency**: Unified design system across the app
+2. **Accessibility**: Better built-in a11y features
+3. **Theming**: Centralized theme management
+4. **Components**: Rich set of pre-built components
+5. **Developer Experience**: Better TypeScript support and IDE integration
+
+## Notes
+
+- Tailwind CSS configuration can be safely removed if no longer needed
+- The app maintains the same visual appearance and functionality
+- All forms and interactive elements work as before
+- Language switching is preserved
+- Responsive design is maintained through MUI's breakpoint system
diff --git a/package-lock.json b/package-lock.json
index e7f1655..fa81b80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "altarra",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.14.20",
+        "@mui/material": "^5.14.20",
         "lucide-react": "^0.562.0",
         "next": "14.1.0",
         "papaparse": "5.4.1",
@@ -41,6 +45,145 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
+      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.6.tgz",
+      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
+      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.6"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.6.tgz",
+      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.6",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -75,6 +218,154 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -227,7 +518,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -238,7 +528,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -248,20 +537,255 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz",
+      "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.18.0.tgz",
+      "integrity": "sha512-1s0vEZj5XFXDMmz3Arl/R7IncFqJ+WQ95LDp1roHWGDE2oCO3IS4/hmiOv1/8SD9r6B7tv9GLiqVZYHo+6PkTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz",
+      "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.18.0",
+        "@mui/system": "^5.18.0",
+        "@mui/types": "~7.2.15",
+        "@mui/utils": "^5.17.1",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
+      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
+      "license": "MIT"
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz",
+      "integrity": "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.17.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.18.0.tgz",
+      "integrity": "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.18.0.tgz",
+      "integrity": "sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.17.1",
+        "@mui/styled-engine": "^5.18.0",
+        "@mui/types": "~7.2.15",
+        "@mui/utils": "^5.17.1",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.24",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
+      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.17.1.tgz",
+      "integrity": "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "~7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
+      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -494,6 +1018,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -555,19 +1089,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.37",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
       "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
-      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -584,11 +1123,19 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.26.0.tgz",
       "integrity": "sha512-WFHp9YUJQ6CKshqoC37iOlHnQSmxNc795UhB26CyBBttrN9svdIrUjl/NjnNmfcwtncN0h/0PPAFWv9ovP8mLA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/parser": {
@@ -1374,6 +1921,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1528,7 +2090,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -1625,6 +2186,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1662,6 +2232,37 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1694,7 +2295,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -1762,7 +2362,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -1859,6 +2458,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1895,6 +2504,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -2086,7 +2704,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -2631,6 +3248,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2743,7 +3366,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3087,7 +3709,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3096,6 +3717,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3110,7 +3740,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -3185,6 +3814,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -3278,7 +3913,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -3682,6 +4316,18 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -3689,6 +4335,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3790,7 +4442,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -3915,7 +4566,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -4077,7 +4727,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4294,7 +4943,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -4303,6 +4951,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4337,7 +5003,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -4361,7 +5026,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4551,7 +5215,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -4657,9 +5320,24 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4731,7 +5409,6 @@
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
       "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.1",
@@ -4752,7 +5429,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -5090,6 +5766,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5384,6 +6069,12 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -5424,7 +6115,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
diff --git a/package.json b/package.json
index 56ae0fe..7f41610 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.20",
+    "@mui/icons-material": "^5.14.20",
     "lucide-react": "^0.562.0",
     "next": "14.1.0",
     "papaparse": "5.4.1",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c245e18..d549591 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,8 @@
-import './globals.css'
+
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import Footer from '@/components/Footer'
 import { LanguageProvider } from '@/context/LanguageContext'
-
-const inter = Inter({ subsets: ['latin'] })
+import { ThemeProvider } from '@/context/ThemeProvider'
 
 export const metadata: Metadata = {
   title: 'Altarra - Submissão de Alturas',
@@ -14,13 +12,15 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="pt-PT">
-      <body className={`${inter.className} flex flex-col min-h-screen bg-white text-gray-900`}>
-        <LanguageProvider>
-          <div className="flex flex-col min-h-screen">
-            <main className="flex-1">{children}</main>
-            <Footer />
-          </div>
-        </LanguageProvider>
+      <body>
+        <ThemeProvider>
+          <LanguageProvider>
+            <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+              <main style={{ flex: 1 }}>{children}</main>
+              <Footer />
+            </div>
+          </LanguageProvider>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 833dfb4..5987022 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,25 +1,30 @@
 "use client"
 
 import Link from 'next/link'
+import { Box, Typography, Container } from '@mui/material'
 
 export default function Footer() {
   return (
-    <footer className="mt-12 border-t border-gray-200 bg-white py-8">
-      <div className="mx-auto max-w-2xl px-4">
-        <p className="text-center text-sm font-medium text-gray-900">
+    <Box component="footer" sx={{ mt: 6, borderTop: '1px solid', borderTopColor: 'divider', py: 4 }}>
+      <Container maxWidth="sm">
+        <Typography align="center" variant="body2" sx={{ fontWeight: 500 }}>
           © 2026 APP — Associação Portuguesa de Powerlifting
-        </p>
-        <p className="mt-3 text-center text-xs text-gray-500">
+        </Typography>
+        <Typography align="center" variant="caption" sx={{ mt: 2, display: 'block', color: 'text.secondary' }}>
           feito por{' '}
-          <Link href="https://comfy.solutions" className="hover:underline">
-            comfy.solutions
+          <Link href="https://comfy.solutions" style={{ textDecoration: 'none', color: 'inherit' }}>
+            <Typography component="span" variant="caption" sx={{ '&:hover': { textDecoration: 'underline' } }}>
+              comfy.solutions
+            </Typography>
           </Link>
           {' '}•{' '}
-          <Link href="https://comfy.fillout.com/altarra-errors" className="hover:underline">
-            Erros? Informe-nos!
+          <Link href="https://comfy.fillout.com/altarra-errors" style={{ textDecoration: 'none', color: 'inherit' }}>
+            <Typography component="span" variant="caption" sx={{ '&:hover': { textDecoration: 'underline' } }}>
+              Erros? Informe-nos!
+            </Typography>
           </Link>
-        </p>
-      </div>
-    </footer>
+        </Typography>
+      </Container>
+    </Box>
   )
 }
diff --git a/src/components/FormField.tsx b/src/components/FormField.tsx
index 02f2f47..9db905f 100644
--- a/src/components/FormField.tsx
+++ b/src/components/FormField.tsx
@@ -1,7 +1,6 @@
 "use client"
 
-import { useId } from 'react'
-import { AlertCircle } from 'lucide-react'
+import { TextField, FormHelperText, Box } from '@mui/material'
 
 type Props = {
   label: string
@@ -30,37 +29,27 @@ export default function FormField({
   disabled,
   error
 }: Props) {
-  const id = useId()
   return (
-    <div className="mb-4">
-      <label htmlFor={id} className="mb-2 block text-sm font-semibold text-gray-900">
-        {label} {required ? <span className="text-[#FF0000]" aria-hidden>*</span> : null}
-      </label>
-      <input
-        id={id}
-        className={`w-full rounded-lg border-2 px-4 py-3 text-base outline-none transition-colors ${
-          error 
-            ? 'border-[#FF0000] bg-[#fff5f5] focus-visible:ring-2 focus-visible:ring-[#FF0000]/30' 
-            : 'border-gray-300 focus-visible:ring-2 focus-visible:ring-[#006600]/30'
-        }`}
+    <Box sx={{ mb: 2 }}>
+      <TextField
+        fullWidth
+        label={label}
         type={type}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
+        placeholder={type === 'date' ? undefined : placeholder}
         required={required}
-        min={min}
-        max={max}
-        step={step}
         disabled={disabled}
-        aria-invalid={!!error}
-        aria-describedby={error ? `${id}-error` : undefined}
+        error={!!error}
+        variant="outlined"
+        inputProps={{
+          min,
+          max,
+          step,
+        }}
+        InputLabelProps={type === 'date' ? { shrink: true } : undefined}
+        helperText={error}
       />
-      {error ? (
-        <div id={`${id}-error`} className="mt-2 flex items-center gap-2 text-sm text-[#991b1b] font-medium">
-          <AlertCircle className="h-4 w-4 flex-shrink-0" style={{ color: '#FF0000' }} />
-          {error}
-        </div>
-      ) : null}
-    </div>
+    </Box>
   )
 }
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index c53de07..afeccab 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import Image from 'next/image'
+import { Box, Container, Paper, Typography, Button, CircularProgress } from '@mui/material'
 import LandingPage from '@/components/LandingPage'
 import IdentityForm from '@/components/IdentityForm'
 import RackHeightsForm from '@/components/RackHeightsForm'
@@ -63,12 +64,19 @@ export default function HomePageContent() {
 
   if (authorized === null) {
     return (
-      <main className="grid min-h-screen place-items-center">
-        <div className="flex flex-col items-center gap-2 text-gray-600">
+      <Box
+        component="main"
+        sx={{
+          display: 'grid',
+          placeItems: 'center',
+          minHeight: '100vh',
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
           <Spinner />
-          <p>A carregar…</p>
-        </div>
-      </main>
+          <Typography color="textSecondary">A carregar…</Typography>
+        </Box>
+      </Box>
     )
   }
 
@@ -77,48 +85,46 @@ export default function HomePageContent() {
   }
 
   return (
-    <main className="mx-auto max-w-xl px-4 py-8">
-      <header className="mb-6 flex flex-col items-start gap-3">
-        <div className="flex items-center justify-between w-full">
-          <div className="flex items-center gap-3">
+    <Box component="main" sx={{ mx: 'auto', maxWidth: 'md', px: 2, py: 4 }}>
+      <Box sx={{ mb: 3, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', width: '100%', flexWrap: 'wrap', gap: 1.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
             <Image
               src="/branding/logo.png"
               alt="Logo"
               width={360}
               height={120}
-              className="h-auto w-72 object-contain"
+              style={{ height: 'auto', width: 288, objectFit: 'contain' }}
               priority
             />
-          </div>
-          <div className="flex gap-2">
-            <button
+          </Box>
+          <Box sx={{ display: 'flex', gap: 1, alignSelf: 'center' }}>
+            <Button
               onClick={() => setLanguage('pt')}
-              className={`px-3 py-2 rounded-lg font-medium transition-colors ${
-                language === 'pt'
-                  ? 'bg-[#006600] text-white'
-                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-              }`}
+              variant={language === 'pt' ? 'contained' : 'outlined'}
+              size="small"
             >
               PT
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={() => setLanguage('en')}
-              className={`px-3 py-2 rounded-lg font-medium transition-colors ${
-                language === 'en'
-                  ? 'bg-[#006600] text-white'
-                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-              }`}
+              variant={language === 'en' ? 'contained' : 'outlined'}
+              size="small"
             >
               EN
-            </button>
-          </div>
-        </div>
-        <div>
-          <h1 className="text-2xl font-semibold text-black">{competitionName}</h1>
-          <p className="text-gray-600">{language === 'pt' ? 'Submissão de Alturas' : 'Heights Submission'}</p>
-        </div>
-      </header>
-      <section className="rounded-lg border p-4 shadow-sm">
+            </Button>
+          </Box>
+        </Box>
+        <Box>
+          <Typography variant="h4" sx={{ fontWeight: 600 }}>
+            {competitionName}
+          </Typography>
+          <Typography color="textSecondary">
+            {language === 'pt' ? 'Submissão de Alturas' : 'Heights Submission'}
+          </Typography>
+        </Box>
+      </Box>
+      <Paper sx={{ p: 2 }}>
         {!memberNumber || !birthDate ? (
           <IdentityForm
             onVerified={({ name, birthDate, memberNumber }) => {
@@ -128,8 +134,10 @@ export default function HomePageContent() {
             }}
           />
         ) : (
-          <div>
-            <div className="mb-4 text-sm text-gray-700">{t('identified_as', language)} <span className="font-medium">{lifterName}</span></div>
+          <Box>
+            <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+              {t('identified_as', language)} <Typography component="span" sx={{ fontWeight: 600 }}>{lifterName}</Typography>
+            </Typography>
             <RackHeightsForm
               memberNumber={memberNumber}
               birthDate={birthDate}
@@ -140,9 +148,9 @@ export default function HomePageContent() {
                 setLifterName(null)
               }}
             />
-          </div>
+          </Box>
         )}
-      </section>
-    </main>
+      </Paper>
+    </Box>
   )
 }
diff --git a/src/components/IdentityForm.tsx b/src/components/IdentityForm.tsx
index a6d6f27..13c6194 100644
--- a/src/components/IdentityForm.tsx
+++ b/src/components/IdentityForm.tsx
@@ -1,9 +1,11 @@
 "use client"
 
 import { useRef, useState } from 'react'
+import { Box, Typography } from '@mui/material'
 import FormField from '@/components/FormField'
 import SubmitButton from '@/components/SubmitButton'
 import StatusMessage from '@/components/StatusMessage'
+import LoadingOverlay from '@/components/LoadingOverlay'
 import { isValidDateDDMMYYYY } from '@/utils/validation'
 import { useLanguage } from '@/context/LanguageContext'
 import { t, translations } from '@/utils/translations'
@@ -36,7 +38,14 @@ export default function IdentityForm({ onVerified }: Props) {
       setStatus({ type: 'error', msg: errorMessages.validation_error })
       return
     }
-    if (!isValidDateDDMMYYYY(birthDate)) {
+    
+    // Convert ISO date (YYYY-MM-DD) to DD/MM/YYYY format
+    const isISODate = birthDate.match(/^\d{4}-\d{2}-\d{2}$/)
+    const formattedDate = isISODate 
+      ? birthDate.split('-').reverse().join('/')
+      : birthDate
+    
+    if (!isValidDateDDMMYYYY(formattedDate)) {
       setStatus({ type: 'error', msg: errorMessages.date_format_error })
       return
     }
@@ -46,7 +55,7 @@ export default function IdentityForm({ onVerified }: Props) {
       const res = await fetch('/api/find-lifter', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, birthDate })
+        body: JSON.stringify({ name, birthDate: formattedDate })
       })
       if (!res.ok) {
         const data = await res.json().catch(() => ({}))
@@ -65,24 +74,29 @@ export default function IdentityForm({ onVerified }: Props) {
   }
 
   return (
-    <form onSubmit={onSubmit} aria-labelledby="identificacao">
-      <h2 id="identificacao" className="mb-4 text-lg font-semibold">{t('step_1_identification', language)}</h2>
-      <FormField
-        label={t('full_name', language)}
-        value={name}
-        onChange={setName}
-        placeholder={t('full_name_placeholder', language)}
-        required
-      />
-      <FormField
-        label={t('birth_date', language)}
-        value={birthDate}
-        onChange={setBirthDate}
-        placeholder={t('birth_date_placeholder', language)}
-        required
-      />
-      <SubmitButton loading={loading}>{t('search', language)}</SubmitButton>
-      <StatusMessage status={status.type === 'success' ? 'success' : status.type === 'error' ? 'error' : 'info'} message={status.msg} />
-    </form>
+    <>
+      <LoadingOverlay visible={loading} />
+      <Box component="form" onSubmit={onSubmit} aria-labelledby="identificacao">
+        <Typography id="identificacao" variant="h6" sx={{ mb: 2 }}>
+          {t('step_1_identification', language)}
+        </Typography>
+        <FormField
+          label={t('full_name', language)}
+          value={name}
+          onChange={setName}
+          placeholder={t('full_name_placeholder', language)}
+          required
+        />
+        <FormField
+          label={t('birth_date', language)}
+          type="date"
+          value={birthDate}
+          onChange={setBirthDate}
+          required
+        />
+        <SubmitButton disabled={loading}>{t('search', language)}</SubmitButton>
+        <StatusMessage status={status.type === 'success' ? 'success' : status.type === 'error' ? 'error' : 'info'} message={status.msg} />
+      </Box>
+    </>
   )
 }
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 1943f19..0cb4043 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -2,37 +2,103 @@
 
 import Link from 'next/link'
 import Image from 'next/image'
-import { ExternalLink } from 'lucide-react'
+import { Box, Paper, Typography, Button, Container } from '@mui/material'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { useLanguage } from '@/context/LanguageContext'
 import { t } from '@/utils/translations'
 
 export default function LandingPage() {
-  const { language } = useLanguage()
+  const { language, setLanguage } = useLanguage()
   return (
-    <main className="mx-auto max-w-xl px-4 py-10">
-      <header className="mb-8 flex flex-col items-center gap-3 text-center">
-        <Image
-          src="/branding/logo.png"
-          alt="Logo"
-          width={360}
-          height={120}
-          className="h-auto w-72 object-contain"
-          priority
-        />
-      </header>
-      <section className="rounded-lg border-l-4 border-[#006600] bg-[#f0fdf4] p-8 shadow-md">
-        <h2 className="mb-3 text-2xl font-bold text-[#004d00]">{t('welcome_title', language)}</h2>
-        <p className="mb-8 text-gray-700 leading-relaxed">
-          {t('welcome_text', language)}
-        </p>
-        <Link
-          href="https://powerlifting.pt"
-          className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#006600] px-6 py-3 font-semibold text-white shadow-sm hover:bg-[#004d00] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006600]"
+    <Box
+      component="main"
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        py: 4,
+      }}
+    >
+      <Container maxWidth="sm" sx={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 4, gap: 1 }}>
+          <Button
+            onClick={() => setLanguage('pt')}
+            variant={language === 'pt' ? 'contained' : 'outlined'}
+            size="small"
+          >
+            PT
+          </Button>
+          <Button
+            onClick={() => setLanguage('en')}
+            variant={language === 'en' ? 'contained' : 'outlined'}
+            size="small"
+          >
+            EN
+          </Button>
+        </Box>
+
+        <Box sx={{ textAlign: 'center', mb: 5 }}>
+          <Image
+            src="/branding/logo.png"
+            alt="Logo"
+            width={360}
+            height={120}
+            style={{ height: 'auto', width: 320, objectFit: 'contain' }}
+            priority
+          />
+        </Box>
+
+        <Paper
+          sx={{
+            p: { xs: 3, sm: 5 },
+            borderLeft: '6px solid',
+            borderLeftColor: 'primary.main',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+            backgroundColor: 'rgba(0, 102, 0, 0.02)',
+          }}
         >
-          {t('visit_website', language)}
-          <ExternalLink className="h-4 w-4" />
-        </Link>
-      </section>
-    </main>
+          <Typography
+            variant="h4"
+            sx={{
+              mb: 3,
+              fontWeight: 700,
+              color: 'primary.dark',
+              fontSize: { xs: '1.75rem', sm: '2.125rem' },
+            }}
+          >
+            {t('welcome_title', language)}
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{
+              mb: 4,
+              color: 'text.secondary',
+              lineHeight: 1.8,
+              fontSize: { xs: '0.95rem', sm: '1rem' },
+            }}
+          >
+            {t('welcome_text', language)}
+          </Typography>
+          <Button
+            component="a"
+            href="https://powerlifting.pt"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="contained"
+            color="primary"
+            size="large"
+            fullWidth
+            endIcon={<OpenInNewIcon />}
+            sx={{
+              py: 1.5,
+              fontSize: '1rem',
+              fontWeight: 600,
+            }}
+          >
+            {t('visit_website', language)}
+          </Button>
+        </Paper>
+      </Container>
+    </Box>
   )
 }
diff --git a/src/components/LoadingOverlay.tsx b/src/components/LoadingOverlay.tsx
new file mode 100644
index 0000000..2778e27
--- /dev/null
+++ b/src/components/LoadingOverlay.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { Box, CircularProgress } from '@mui/material'
+
+type Props = {
+  visible: boolean
+}
+
+export default function LoadingOverlay({ visible }: Props) {
+  if (!visible) return null
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 9999,
+      }}
+      aria-busy="true"
+    >
+      <CircularProgress size={60} />
+    </Box>
+  )
+}
diff --git a/src/components/RackHeightsForm.tsx b/src/components/RackHeightsForm.tsx
index bb5e8f6..f6915e3 100644
--- a/src/components/RackHeightsForm.tsx
+++ b/src/components/RackHeightsForm.tsx
@@ -1,10 +1,12 @@
 "use client"
 
-import { useEffect, useRef, useState, lazy, Suspense } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import dynamic from 'next/dynamic'
+import { Box, Typography, Alert, Button, TextField, MenuItem } from '@mui/material'
 import FormField from '@/components/FormField'
 import SubmitButton from '@/components/SubmitButton'
 import StatusMessage from '@/components/StatusMessage'
+import LoadingOverlay from '@/components/LoadingOverlay'
 import type { RackHeightsPayload } from '@/types/rackHeights'
 import { required } from '@/utils/validation'
 import { useLanguage } from '@/context/LanguageContext'
@@ -91,77 +93,89 @@ export default function RackHeightsForm({ memberNumber, birthDate, onSuccess }:
   }
 
   return (
-    <div aria-live="polite">
-      {submitted ? (
-        <div className="space-y-4">
-          <div className="rounded-lg border-l-4 border-[#006600] bg-[#f0fdf4] px-6 py-6 shadow-sm">
-            <div className="mb-4 flex justify-center">
-              <Checkmark size="xxLarge" color="#006600" />
-            </div>
-            <h2 className="text-center text-xl font-bold text-[#004d00]">{t('heights_submitted_title', language)}</h2>
-            <p className="mt-3 text-center text-[#1f5e2e]">{t('heights_submitted_text', language)}</p>
-          </div>
-          <button
-            type="button"
-            onClick={handleNewSubmission}
-            className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-[#006600] px-5 py-3 font-semibold text-white shadow-sm hover:bg-[#004d00] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006600]"
-          >
-            {t('submit_another', language)}
-          </button>
-        </div>
-      ) : (
-        <form onSubmit={onSubmit} aria-labelledby="alturas">
-          <h2 id="alturas" className="mb-4 text-lg font-semibold text-black">{t('step_2_heights', language)}</h2>
-          <div className="grid grid-cols-1 gap-3">
-            <div>
-              <label className="mb-2 block text-sm font-semibold text-gray-900">{t('squat_rack_height', language)} <span className="text-[#FF0000]" aria-hidden>*</span></label>
-              <input
-                ref={firstFieldRef}
+    <>
+      <LoadingOverlay visible={loading} />
+      <Box aria-live="polite">
+        {submitted ? (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Box
+              sx={{
+                py: 3,
+                px: 2,
+                borderRadius: 1,
+                textAlign: 'center',
+                bgcolor: '#f0fdf4',
+                borderLeft: '4px solid',
+                borderLeftColor: 'primary.main',
+              }}
+            >
+              <Box sx={{ mb: 2, display: 'flex', justifyContent: 'center' }}>
+                <Checkmark size="xxLarge" color="#006600" />
+              </Box>
+              <Typography variant="h6" sx={{ fontWeight: 600, mb: 1, color: 'primary.dark' }}>
+                {t('heights_submitted_title', language)}
+              </Typography>
+              <Typography variant="body2" sx={{ color: '#1f5e2e' }}>
+                {t('heights_submitted_text', language)}
+              </Typography>
+            </Box>
+            <Button
+              variant="contained"
+              color="primary"
+              fullWidth
+              onClick={handleNewSubmission}
+              sx={{ py: 1.5 }}
+            >
+              {t('submit_another', language)}
+            </Button>
+          </Box>
+        ) : (
+          <Box component="form" onSubmit={onSubmit} aria-labelledby="alturas">
+            <Typography id="alturas" variant="h6" sx={{ mb: 2 }}>
+              {t('step_2_heights', language)}
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+              <FormField
+                label={t('squat_rack_height', language)}
                 type="number"
-                inputMode="numeric"
-                min={1}
-                max={20}
                 value={squatRackHeight}
-                onChange={(e) => setSquatRackHeight(e.target.value)}
-                className="w-full rounded-lg border-2 border-gray-300 px-4 py-3 text-base outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#006600]/30"
-                required
-              />
-            </div>
-            <div>
-              <label className="mb-2 block text-sm font-semibold text-gray-900">{t('bench_rack_height', language)} <span className="text-[#FF0000]" aria-hidden>*</span></label>
-              <input
-                type="number"
-                inputMode="numeric"
+                onChange={(e) => setSquatRackHeight(e)}
                 min={1}
                 max={20}
-                value={benchRackHeight}
-                onChange={(e) => setBenchRackHeight(e.target.value)}
-                className="w-full rounded-lg border-2 border-gray-300 px-4 py-3 text-base outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#006600]/30"
                 required
               />
-            </div>
-            <div>
-              <label className="mb-2 block text-sm font-semibold text-gray-900">{t('bench_foot_blocks', language)} <span className="text-[#FF0000]" aria-hidden>*</span></label>
-              <select
-                value={benchRackFootBlocks}
-                onChange={(e) => setBenchRackFootBlocks(e.target.value as any)}
-                className="w-full rounded-lg border-2 border-gray-300 px-4 py-3 text-base outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#006600]/30"
+              <FormField
+                label={t('bench_rack_height', language)}
+                type="number"
+                value={benchRackHeight}
+                onChange={(e) => setBenchRackHeight(e)}
+                min={1}
+                max={20}
                 required
+              />
+              <TextField
+                fullWidth
+                select
+                label={t('bench_foot_blocks', language)}
+                value={benchRackFootBlocks}
+                onChange={(e) => setBenchRackFootBlocks(e.target.value as 'NONE' | '5cm' | '10cm' | '20cm' | '30cm')}
+                required
+                variant="outlined"
               >
-                <option value="NONE">{t('foot_blocks_none', language)}</option>
-                <option value="5cm">5cm</option>
-                <option value="10cm">10cm</option>
-                <option value="20cm">20cm</option>
-                <option value="30cm">30cm</option>
-              </select>
-            </div>
-          </div>
-          <div className="mt-4">
-            <SubmitButton loading={loading}>{t('submit_heights', language)}</SubmitButton>
-          </div>
-          <StatusMessage status={status.type === 'success' ? 'success' : status.type === 'error' ? 'error' : 'info'} message={status.msg} />
-        </form>
-      )}
-    </div>
+                <MenuItem value="NONE">{t('foot_blocks_none', language)}</MenuItem>
+                <MenuItem value="5cm">5cm</MenuItem>
+                <MenuItem value="10cm">10cm</MenuItem>
+                <MenuItem value="20cm">20cm</MenuItem>
+                <MenuItem value="30cm">30cm</MenuItem>
+              </TextField>
+            </Box>
+            <Box sx={{ mt: 2 }}>
+              <SubmitButton disabled={loading}>{t('submit_heights', language)}</SubmitButton>
+            </Box>
+            <StatusMessage status={status.type === 'success' ? 'success' : status.type === 'error' ? 'error' : 'info'} message={status.msg} />
+          </Box>
+        )}
+      </Box>
+    </>
   )
 }
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 26a971b..d9d8c59 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,7 +1,7 @@
 "use client"
 
+import { CircularProgress } from '@mui/material'
+
 export default function Spinner() {
-  return (
-    <div className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-brand-600 border-t-transparent" aria-hidden />
-  )
+  return <CircularProgress aria-hidden size={20} />
 }
diff --git a/src/components/StatusMessage.tsx b/src/components/StatusMessage.tsx
index 59381f8..6d18e81 100644
--- a/src/components/StatusMessage.tsx
+++ b/src/components/StatusMessage.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { CheckCircle2, AlertCircle, Info } from 'lucide-react'
+import { Alert, AlertTitle } from '@mui/material'
 
 type Props = {
   status: 'idle' | 'success' | 'error' | 'info'
@@ -9,36 +9,22 @@ type Props = {
 
 export default function StatusMessage({ status, message }: Props) {
   if (!message) return null
-  
-  const config = {
-    success: {
-      color: 'bg-[#f0fdf4] border-[#006600] text-[#004d00]',
-      icon: <CheckCircle2 className="h-5 w-5 flex-shrink-0" style={{ color: '#006600' }} />
-    },
-    error: {
-      color: 'bg-[#fef2f2] border-[#FF0000] text-[#991b1b]',
-      icon: <AlertCircle className="h-5 w-5 flex-shrink-0" style={{ color: '#FF0000' }} />
-    },
-    info: {
-      color: 'bg-[#f3f4f6] border-[#6b7280] text-[#374151]',
-      icon: <Info className="h-5 w-5 flex-shrink-0" style={{ color: '#6b7280' }} />
-    },
-    idle: {
-      color: 'bg-[#f3f4f6] border-[#6b7280] text-[#374151]',
-      icon: <Info className="h-5 w-5 flex-shrink-0" style={{ color: '#6b7280' }} />
-    }
+
+  const severityMap = {
+    success: 'success' as const,
+    error: 'error' as const,
+    info: 'info' as const,
+    idle: 'info' as const,
   }
 
-  const current = config[status]
-
   return (
-    <div
+    <Alert
+      severity={severityMap[status]}
+      sx={{ mt: 2 }}
       role="status"
       aria-live="polite"
-      className={`mt-4 flex items-center gap-3 rounded-lg border-l-4 px-4 py-3 text-sm font-medium ${current.color}`}
     >
-      {current.icon}
-      <span>{message}</span>
-    </div>
+      {message}
+    </Alert>
   )
 }
diff --git a/src/components/SubmitButton.tsx b/src/components/SubmitButton.tsx
index dd7b0ad..1d6b67e 100644
--- a/src/components/SubmitButton.tsx
+++ b/src/components/SubmitButton.tsx
@@ -1,6 +1,7 @@
 "use client"
 
-import { CheckCircle2 } from 'lucide-react'
+import { Button, CircularProgress, Box } from '@mui/material'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 
 type Props = {
   children: React.ReactNode
@@ -10,17 +11,21 @@ type Props = {
 
 export default function SubmitButton({ children, loading, disabled }: Props) {
   return (
-    <button
+    <Button
       type="submit"
-      className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-[#006600] px-5 py-3 font-semibold text-white shadow-sm hover:bg-[#004d00] transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+      fullWidth
+      variant="contained"
+      color="primary"
       disabled={disabled || loading}
+      sx={{
+        py: 1.5,
+        display: 'flex',
+        gap: 1,
+        alignItems: 'center',
+      }}
+      startIcon={loading ? <CircularProgress size={20} color="inherit" /> : <CheckCircleIcon />}
     >
-      {loading ? (
-        <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-r-transparent" aria-hidden />
-      ) : (
-        <CheckCircle2 className="h-5 w-5" />
-      )}
-      <span>{children}</span>
-    </button>
+      {children}
+    </Button>
   )
 }
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
new file mode 100644
index 0000000..093fc51
--- /dev/null
+++ b/src/context/ThemeProvider.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ReactNode } from 'react'
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#006600',
+      dark: '#004d00',
+      light: '#00cc00',
+    },
+    secondary: {
+      main: '#FF0000',
+    },
+    error: {
+      main: '#FF0000',
+    },
+    warning: {
+      main: '#FFA500',
+    },
+    success: {
+      main: '#006600',
+    },
+    background: {
+      default: '#ffffff',
+      paper: '#ffffff',
+    },
+    text: {
+      primary: '#1f2937',
+      secondary: '#6b7280',
+    },
+  },
+  typography: {
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+    ].join(','),
+    h1: {
+      fontSize: '2.5rem',
+      fontWeight: 600,
+    },
+    h2: {
+      fontSize: '1.875rem',
+      fontWeight: 600,
+    },
+    body1: {
+      fontSize: '1rem',
+      lineHeight: 1.6,
+    },
+    body2: {
+      fontSize: '0.875rem',
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 600,
+        },
+        contained: {
+          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+          '&:hover': {
+            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'outlined',
+      },
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            fontSize: '1rem',
+          },
+        },
+      },
+    },
+    MuiSelect: {
+      defaultProps: {
+        variant: 'outlined',
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+        },
+      },
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: '0.5rem',
+        },
+      },
+    },
+  },
+})
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <MuiThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </MuiThemeProvider>
+  )
+}