From caac2bb49139ee28a40e94f4b2c93b45d03f7193 Mon Sep 17 00:00:00 2001
From: BJORN-VINTHER <g.bvinther@gmail.com>
Date: Sun, 3 May 2026 23:12:12 +0200
Subject: [PATCH 1/3] solve exercise 1

---
 .../exercises/exercise 1 - context/src/App.jsx  | 17 ++++++++++-------
 .../src/components/ArticleCard.jsx              |  7 +++++--
 .../src/components/Heading.jsx                  |  6 +++++-
 .../src/components/Navbar.jsx                   |  9 +++++++--
 .../src/components/Page.jsx                     |  6 +++---
 .../src/contexts/ThemeContext.jsx               |  5 +++++
 6 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 week4/exercises/exercise 1 - context/src/contexts/ThemeContext.jsx

diff --git a/week4/exercises/exercise 1 - context/src/App.jsx b/week4/exercises/exercise 1 - context/src/App.jsx
index 5e58467..9b53a4f 100644
--- a/week4/exercises/exercise 1 - context/src/App.jsx	
+++ b/week4/exercises/exercise 1 - context/src/App.jsx	
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Navbar from './components/Navbar.jsx';
 import Page from './components/Page.jsx';
+import { ThemeContext } from './contexts/ThemeContext.jsx';
 import './index.css';
 
 export default function App() {
@@ -11,12 +12,14 @@ export default function App() {
   }
 
   return (
-    <div
-      className="app"
-      style={{ background: isDark ? '#1a1a2e' : '#f0f2f5', color: isDark ? '#e0e0e0' : '#333333' }}
-    >
-      <Navbar isDark={isDark} onToggle={toggleTheme} />
-      <Page isDark={isDark} />
-    </div>
+    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+      <div
+        className="app"
+        style={{ background: isDark ? '#1a1a2e' : '#f0f2f5', color: isDark ? '#e0e0e0' : '#333333' }}
+      >
+        <Navbar />
+        <Page />
+      </div>
+    </ThemeContext.Provider>
   );
 }
diff --git a/week4/exercises/exercise 1 - context/src/components/ArticleCard.jsx b/week4/exercises/exercise 1 - context/src/components/ArticleCard.jsx
index cc090fa..9d9799d 100644
--- a/week4/exercises/exercise 1 - context/src/components/ArticleCard.jsx	
+++ b/week4/exercises/exercise 1 - context/src/components/ArticleCard.jsx	
@@ -1,6 +1,9 @@
+import { useContext } from 'react';
 import Heading from './Heading.jsx';
+import { ThemeContext } from '../contexts/ThemeContext.jsx';
 
-export default function ArticleCard({ article, isDark }) {
+export default function ArticleCard({ article }) {
+  const { isDark } = useContext(ThemeContext);
   const accent = isDark ? '#e94560' : '#4f46e5';
 
   return (
@@ -14,7 +17,7 @@ export default function ArticleCard({ article, isDark }) {
       }}
     >
       <div className="card__header">
-        <Heading level={3} isDark={isDark}>{article.title}</Heading>
+        <Heading level={3}>{article.title}</Heading>
         <span className="card__tag" style={{ background: accent }}>{article.tag}</span>
       </div>
       <p className="card__summary">{article.summary}</p>
diff --git a/week4/exercises/exercise 1 - context/src/components/Heading.jsx b/week4/exercises/exercise 1 - context/src/components/Heading.jsx
index 04de4e4..065df03 100644
--- a/week4/exercises/exercise 1 - context/src/components/Heading.jsx	
+++ b/week4/exercises/exercise 1 - context/src/components/Heading.jsx	
@@ -1,9 +1,13 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext.jsx';
+
 const colors = {
   light: { color: '#111111' },
   dark:  { color: '#ffffff' },
 };
 
-export default function Heading({ level = 2, isDark, children }) {
+export default function Heading({ level = 2, children }) {
+  const { isDark } = useContext(ThemeContext);
   const Tag = `h${level}`;
   return (
     <Tag style={isDark ? colors.dark : colors.light}>
diff --git a/week4/exercises/exercise 1 - context/src/components/Navbar.jsx b/week4/exercises/exercise 1 - context/src/components/Navbar.jsx
index 6fff7f4..6b0c3de 100644
--- a/week4/exercises/exercise 1 - context/src/components/Navbar.jsx	
+++ b/week4/exercises/exercise 1 - context/src/components/Navbar.jsx	
@@ -1,4 +1,9 @@
-export default function Navbar({ isDark, onToggle }) {
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext.jsx';
+
+export default function Navbar() {
+  const { isDark, toggleTheme } = useContext(ThemeContext);
+
   return (
     <nav
       className="navbar"
@@ -7,7 +12,7 @@ export default function Navbar({ isDark, onToggle }) {
       <span className="navbar__logo">📰 My Blog</span>
       <button
         className="navbar__toggle"
-        onClick={onToggle}
+        onClick={toggleTheme}
         style={{ background: isDark ? '#e94560' : '#4f46e5' }}
       >
         {isDark ? '☀️ Light mode' : '🌙 Dark mode'}
diff --git a/week4/exercises/exercise 1 - context/src/components/Page.jsx b/week4/exercises/exercise 1 - context/src/components/Page.jsx
index 854818c..60c2d11 100644
--- a/week4/exercises/exercise 1 - context/src/components/Page.jsx	
+++ b/week4/exercises/exercise 1 - context/src/components/Page.jsx	
@@ -31,13 +31,13 @@ const articles = [
   },
 ];
 
-export default function Page({ isDark }) {
+export default function Page() {
   return (
     <main className="page">
-      <Heading level={2} isDark={isDark}>Latest Articles</Heading>
+      <Heading level={2}>Latest Articles</Heading>
       <div className="page__grid">
         {articles.map(article => (
-          <ArticleCard key={article.id} article={article} isDark={isDark} />
+          <ArticleCard key={article.id} article={article} />
         ))}
       </div>
     </main>
diff --git a/week4/exercises/exercise 1 - context/src/contexts/ThemeContext.jsx b/week4/exercises/exercise 1 - context/src/contexts/ThemeContext.jsx
new file mode 100644
index 0000000..d2185ef
--- /dev/null
+++ b/week4/exercises/exercise 1 - context/src/contexts/ThemeContext.jsx	
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+// We provide the toggleTheme function that components can call to change the theme, but we don't implement it here. 
+// It is provided by the App
+export const ThemeContext = createContext({ isDark: false, toggleTheme: () => {} });
\ No newline at end of file

From bf73e0b93e528c90d380c8ea26516a7808f23b8f Mon Sep 17 00:00:00 2001
From: BJORN-VINTHER <g.bvinther@gmail.com>
Date: Sun, 3 May 2026 23:24:51 +0200
Subject: [PATCH 2/3] solve exercise 2

---
 .../exercise 2 - routing/src/App.jsx          | 26 ++++++++++++++++---
 .../src/components/Navbar.jsx                 | 24 +++++++++++++----
 .../exercise 2 - routing/src/main.jsx         |  5 +++-
 .../exercise 2 - routing/src/pages/About.jsx  | 20 +++++++++++---
 4 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/week4/exercises/exercise 2 - routing/src/App.jsx b/week4/exercises/exercise 2 - routing/src/App.jsx
index 412ad46..440ad6c 100644
--- a/week4/exercises/exercise 2 - routing/src/App.jsx	
+++ b/week4/exercises/exercise 2 - routing/src/App.jsx	
@@ -1,16 +1,36 @@
+import { Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar.jsx';
 import Home from './pages/Home.jsx';
 import About from './pages/About.jsx';
 import Contact from './pages/Contact.jsx';
+import Team from './pages/Team.jsx';
+import Mission from './pages/Mission.jsx';
 import './index.css';
 
+function NotFound() {
+  return (
+    <main className="page">
+      <h1 className="page__title">404 — Page not found</h1>
+      <p className="page__body">The page you're looking for doesn't exist.</p>
+    </main>
+  );
+}
+
 export default function App() {
   return (
     <div className="app">
+      {/* We keep the Navbar outside of the Routes component because we want it to be visible on all pages, regardless of the current route. */}
       <Navbar />
-      <Home />
-      <About />
-      <Contact />
+      {/* The Routes component is where we define all the routes for our application. So the component will render here. */}
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />}>
+          <Route path="team" element={<Team />} />
+          <Route path="mission" element={<Mission />} />
+        </Route>
+        <Route path="/contact" element={<Contact />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
     </div>
   );
 }
diff --git a/week4/exercises/exercise 2 - routing/src/components/Navbar.jsx b/week4/exercises/exercise 2 - routing/src/components/Navbar.jsx
index 0035b94..716c2d5 100644
--- a/week4/exercises/exercise 2 - routing/src/components/Navbar.jsx	
+++ b/week4/exercises/exercise 2 - routing/src/components/Navbar.jsx	
@@ -1,17 +1,31 @@
+import { NavLink } from 'react-router-dom';
+
 const links = [
-  { label: 'Home'    },
-  { label: 'About'   },
-  { label: 'Contact' },
+  { label: 'Home',    to: '/'        },
+  { label: 'About',   to: '/about'   },
+  { label: 'Contact', to: '/contact' },
 ];
 
+function navLinkClass({ isActive }) {
+  // isActive is a boolean from NavLink that tells us if the link is active.
+  // we use it to conditionally apply the 'active' class to the link, which will style it differently when it's active.
+  return isActive ? 'navbar__link active' : 'navbar__link';
+}
+
 export default function Navbar() {
   return (
     <nav className="navbar">
       <span className="navbar__logo">🌐 My Site</span>
       <ul className="navbar__links">
-        {links.map(({ label }) => (
+        {links.map(({ label, to }) => (
           <li key={label}>
-            <a href="#" className="navbar__link">{label}</a>
+            <NavLink
+              to={to}
+              end
+              className={navLinkClass}
+            >
+              {label}
+            </NavLink>
           </li>
         ))}
       </ul>
diff --git a/week4/exercises/exercise 2 - routing/src/main.jsx b/week4/exercises/exercise 2 - routing/src/main.jsx
index 3d9da8a..d06c160 100644
--- a/week4/exercises/exercise 2 - routing/src/main.jsx	
+++ b/week4/exercises/exercise 2 - routing/src/main.jsx	
@@ -1,9 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )
diff --git a/week4/exercises/exercise 2 - routing/src/pages/About.jsx b/week4/exercises/exercise 2 - routing/src/pages/About.jsx
index 608a4c2..fa8eae3 100644
--- a/week4/exercises/exercise 2 - routing/src/pages/About.jsx	
+++ b/week4/exercises/exercise 2 - routing/src/pages/About.jsx	
@@ -1,3 +1,11 @@
+import { NavLink, Outlet } from 'react-router-dom';
+
+function subNavClass({ isActive }) {
+  // isActive is a boolean from NavLink that tells us if the link is active.
+  // we use it to conditionally apply the 'active' class to the link, which will style it differently when it's active.
+  return isActive ? 'about__sublink active' : 'about__sublink';
+}
+
 export default function About() {
   return (
     <main className="page">
@@ -13,11 +21,17 @@ export default function About() {
       </ul>
 
       <nav className="about__subnav">
-        <a href="#" className="about__sublink">Our Team</a>
-        <a href="#" className="about__sublink">Our Mission</a>
+        <NavLink to="/about/team" className={subNavClass}>
+          Our Team
+        </NavLink>
+        <NavLink to="/about/mission" className={subNavClass}>
+          Our Mission
+        </NavLink>
       </nav>
 
-      {/* Render the active nested page here */}
+      {/* The Outlet is where the nested routes will be rendered. 
+      So when we navigate to /about/team, the Team component will be rendered here, and when we navigate to /about/mission, the Mission component will be rendered here. */}
+      <Outlet />
     </main>
   );
 }

From 156047f6ccb16bb9abae3f6a346a54e3340203a4 Mon Sep 17 00:00:00 2001
From: BJORN-VINTHER <g.bvinther@gmail.com>
Date: Mon, 4 May 2026 18:25:53 +0200
Subject: [PATCH 3/3] add exercise 3

---
 .../exercise 3 - ui library/package-lock.json | 790 +++++++++++++++++-
 .../exercise 3 - ui library/package.json      |   4 +
 .../exercise 3 - ui library/src/App.jsx       |  33 +-
 .../src/components/FeaturesSection.jsx        |  50 +-
 .../src/components/Footer.jsx                 |  74 +-
 .../src/components/Hero.jsx                   |  24 +-
 .../src/components/ProductSection.jsx         |  84 +-
 .../src/components/TestimonialsSection.jsx    |  56 +-
 8 files changed, 951 insertions(+), 164 deletions(-)

diff --git a/week4/exercises/exercise 3 - ui library/package-lock.json b/week4/exercises/exercise 3 - ui library/package-lock.json
index 2d8617e..9ac25c0 100644
--- a/week4/exercises/exercise 3 - ui library/package-lock.json	
+++ b/week4/exercises/exercise 3 - ui library/package-lock.json	
@@ -8,6 +8,10 @@
       "name": "ui-library-exercise",
       "version": "0.0.0",
       "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@mui/icons-material": "^9.0.0",
+        "@mui/material": "^9.0.0",
         "react": "^19.2.5",
         "react-dom": "^19.2.5"
       },
@@ -30,7 +34,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
       "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
@@ -86,7 +89,6 @@
       "version": "7.29.1",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
       "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -120,7 +122,6 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
       "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -130,7 +131,6 @@
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
       "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.28.6",
@@ -162,7 +162,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -172,7 +171,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -206,7 +204,6 @@
       "version": "7.29.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
       "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -218,11 +215,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "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==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
@@ -237,7 +242,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
       "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
@@ -256,7 +260,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -300,6 +303,158 @@
         "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/babel-plugin/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/@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",
+      "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",
+      "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",
@@ -498,7 +653,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",
@@ -520,7 +674,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"
@@ -530,20 +683,251 @@
       "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": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.0.0.tgz",
+      "integrity": "sha512-uwQNGkhv0lf7ufxw6QXev77BW6pWbW+7uxYjU5+rfp4lBkFtMEgJCsarTM3Tn+i0lGx6+Ol2u88JdGXr0GDskA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.0.tgz",
+      "integrity": "sha512-oDwyvI6LgjWRC9MBcSGvLkPud9S9ELgSBQFYxa1rYcZn6Br55dn22SyvsPDMsn0G8OndFk53iMT45W5mNqrogw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^9.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": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.0.tgz",
+      "integrity": "sha512-+VP/oQCDhDR87NQQgXnNBG8dwy6GNuQLnenS1pZvkbn2dKFSxRSRMybTpH9xUxXP+316mlYDy5CSbYtusnCWtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/core-downloads-tracker": "^9.0.0",
+        "@mui/system": "^9.0.0",
+        "@mui/types": "^9.0.0",
+        "@mui/utils": "^9.0.0",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.4",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^9.0.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
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.0.0.tgz",
+      "integrity": "sha512-JtuZoaiCqwD6vjgYu6Xp3T7DZkrxJlgtDz5yESzhI34fEX5hHMh2VJUbuL9UOg8xrfIFMrq6dcYoH/7Zi4G0RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/utils": "^9.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.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": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.0.0.tgz",
+      "integrity": "sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.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": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.0.0.tgz",
+      "integrity": "sha512-YnC5Zg6j04IxiLc/boAKs0464jfZlLFVa7mf5E8lF0XOtZVUvG6R6gJK50lgUYdaaLdyLfxF6xR7LaPuEpeT/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/private-theming": "^9.0.0",
+        "@mui/styled-engine": "^9.0.0",
+        "@mui/types": "^9.0.0",
+        "@mui/utils": "^9.0.0",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.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": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.0.tgz",
+      "integrity": "sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/types": "^9.0.0",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.4"
+      },
+      "engines": {
+        "node": ">=14.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/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -574,6 +958,16 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "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/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.18",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.18.tgz",
@@ -934,11 +1328,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -954,6 +1359,15 @@
         "@types/react": "^19.2.0"
       }
     },
+    "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/@vitejs/plugin-react": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
@@ -1020,6 +1434,21 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "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/babel-plugin-react-compiler": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
@@ -1100,6 +1529,15 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001791",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
@@ -1121,6 +1559,15 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "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/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1128,6 +1575,31 @@
       "dev": true,
       "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.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+      "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",
@@ -1147,14 +1619,12 @@
       "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/debug": {
       "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"
@@ -1185,6 +1655,16 @@
         "node": ">=8"
       }
     },
+    "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/electron-to-chromium": {
       "version": "1.5.349",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.349.tgz",
@@ -1192,6 +1672,24 @@
       "dev": true,
       "license": "ISC"
     },
+    "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-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -1206,7 +1704,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"
@@ -1449,6 +1946,12 @@
         "node": ">=16.0.0"
       }
     },
+    "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",
@@ -1502,6 +2005,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -1538,6 +2050,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -1555,6 +2079,21 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "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/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -1565,6 +2104,22 @@
         "node": ">= 4"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -1575,6 +2130,27 @@
         "node": ">=0.8.19"
       }
     },
+    "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-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1609,14 +2185,12 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -1632,6 +2206,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",
@@ -1956,6 +2536,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -1972,6 +2558,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2002,7 +2600,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/nanoid": {
@@ -2038,6 +2635,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2088,6 +2694,36 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parent-module": {
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "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",
@@ -2108,11 +2744,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -2167,6 +2817,23 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2198,6 +2865,58 @@
         "react": "^19.2.5"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz",
+      "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
+      "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/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.0.0-rc.18",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.18.tgz",
@@ -2280,6 +2999,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",
@@ -2290,6 +3018,24 @@
         "node": ">=0.10.0"
       }
     },
+    "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/supports-preserve-symlinks-flag": {
+      "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
diff --git a/week4/exercises/exercise 3 - ui library/package.json b/week4/exercises/exercise 3 - ui library/package.json
index 98d957f..f3df785 100644
--- a/week4/exercises/exercise 3 - ui library/package.json	
+++ b/week4/exercises/exercise 3 - ui library/package.json	
@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },
diff --git a/week4/exercises/exercise 3 - ui library/src/App.jsx b/week4/exercises/exercise 3 - ui library/src/App.jsx
index bbd8a83..1e148d8 100644
--- a/week4/exercises/exercise 3 - ui library/src/App.jsx	
+++ b/week4/exercises/exercise 3 - ui library/src/App.jsx	
@@ -1,3 +1,4 @@
+import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
 import ContactForm from './components/Hero.jsx';
 import ProductFilters from './components/ProductSection.jsx';
 import ProfileCard from './components/FeaturesSection.jsx';
@@ -5,18 +6,28 @@ import ReviewForm from './components/TestimonialsSection.jsx';
 import CartItems from './components/Footer.jsx';
 import './index.css';
 
+// Bonus: override MUI's default primary colour
+const theme = createTheme({
+  palette: {
+    primary: { main: '#6c63ff' },
+  },
+});
+
 export default function App() {
   return (
-    <div>
-      <header className="page-header">
-        <h1>Week 4 — MUI Component Exercises</h1>
-        <p>Install MUI and replace each set of HTML elements with the MUI equivalents listed in the comments.</p>
-      </header>
-      <ContactForm />
-      <ProductFilters />
-      <ProfileCard />
-      <ReviewForm />
-      {/* Bonus: <CartItems /> */}
-    </div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <div>
+        <header className="page-header">
+          <h1>Week 4 — MUI Component Exercises</h1>
+          <p>Install MUI and replace each set of HTML elements with the MUI equivalents listed in the comments.</p>
+        </header>
+        <ContactForm />
+        <ProductFilters />
+        <ProfileCard />
+        <ReviewForm />
+        <CartItems />
+      </div>
+    </ThemeProvider>
   );
 }
diff --git a/week4/exercises/exercise 3 - ui library/src/components/FeaturesSection.jsx b/week4/exercises/exercise 3 - ui library/src/components/FeaturesSection.jsx
index a1a6b3a..f715094 100644
--- a/week4/exercises/exercise 3 - ui library/src/components/FeaturesSection.jsx	
+++ b/week4/exercises/exercise 3 - ui library/src/components/FeaturesSection.jsx	
@@ -1,10 +1,14 @@
+import { Card, CardContent, Avatar, Chip, Tooltip, Box, Stack } from '@mui/material';
+
 // Exercise 3
-// TODO: Replace the profile UI with MUI components:
-// - the avatar div  → <Avatar>
-// - each tag span   → <Chip>
-// - wrap a Chip     → <Tooltip title="Click to filter">
-// - the outer div   → <Card> + <CardContent>
+// MUI components used:
+// - <Avatar>       replaces the avatar div
+// - <Chip>         replaces each tag <span>
+// - <Tooltip>      wraps the first Chip
+// - <Card> + <CardContent>  replace the outer profile div
 export default function ProfileCard() {
+  const tags = ['Sustainability', 'Minimalism', 'Plants', 'Ceramics'];
+
   return (
     <div className="exercise">
       <h2>Exercise 3 — Card, Avatar, Chip, Tooltip</h2>
@@ -14,21 +18,27 @@ export default function ProfileCard() {
       </p>
       <hr />
 
-      <div className="profile-card">
-        <div className="avatar">SV</div>
-        <div>
-          <h3 style={{ margin: '0 0 4px' }}>Sophie van der Berg</h3>
-          <p style={{ margin: '0 0 8px', color: '#666' }}>Interior designer · Amsterdam</p>
-          <p style={{ margin: '0 0 12px' }}>
-            Passionate about sustainable living and modern Scandinavian design.
-          </p>
-          <div className="tags">
-            {['Sustainability', 'Minimalism', 'Plants', 'Ceramics'].map(tag => (
-              <span key={tag} className="tag" title="Click to filter">{tag}</span>
-            ))}
-          </div>
-        </div>
-      </div>
+      <Card sx={{ maxWidth: 480 }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', gap: 2 }}>
+            <Avatar sx={{ width: 56, height: 56, bgcolor: 'primary.main' }}>SV</Avatar>
+            <Box>
+              <h3 style={{ margin: '0 0 4px' }}>Sophie van der Berg</h3>
+              <p style={{ margin: '0 0 8px', color: '#666' }}>Interior designer · Amsterdam</p>
+              <p style={{ margin: '0 0 12px' }}>
+                Passionate about sustainable living and modern Scandinavian design.
+              </p>
+              <Stack direction="row" spacing={1} flexWrap="wrap">
+                {tags.map((tag, i) =>
+                    <Tooltip key={tag} title="Click to filter">
+                      <Chip label={tag} color="primary" variant="outlined" />
+                    </Tooltip>
+                )}
+              </Stack>
+            </Box>
+          </Box>
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/week4/exercises/exercise 3 - ui library/src/components/Footer.jsx b/week4/exercises/exercise 3 - ui library/src/components/Footer.jsx
index 7727b04..08a6b1a 100644
--- a/week4/exercises/exercise 3 - ui library/src/components/Footer.jsx	
+++ b/week4/exercises/exercise 3 - ui library/src/components/Footer.jsx	
@@ -1,4 +1,12 @@
 import { useState } from 'react';
+import {
+  Table, TableHead, TableBody, TableRow, TableCell,
+  IconButton, Badge,
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 
 const initialCart = [
   { id: 1, emoji: '🪴', name: 'Ceramic Planter',  price: 34.00 },
@@ -38,40 +46,44 @@ export default function CartItems() {
       </p>
       <hr />
 
-      <p>🛒 <strong>{cart.length}</strong> item{cart.length !== 1 ? 's' : ''} in cart</p>
+      <Badge badgeContent={cart.length} color="primary" sx={{ mb: 2 }}>
+        <ShoppingCartIcon />
+      </Badge>
 
-      <table className="cart-table">
-        <thead>
-          <tr>
-            <th>Item</th>
-            <th>Price</th>
-            <th>Qty</th>
-            <th>Subtotal</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Item</TableCell>
+            <TableCell>Price</TableCell>
+            <TableCell>Qty</TableCell>
+            <TableCell>Subtotal</TableCell>
+            <TableCell />
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {cart.map(item => (
-            <tr key={item.id}>
-              <td>{item.emoji} {item.name}</td>
-              <td>€{item.price.toFixed(2)}</td>
-              <td>
-                <button onClick={() => updateQty(item.id, -1)}>−</button>
-                {' '}{item.qty}{' '}
-                <button onClick={() => updateQty(item.id, +1)}>+</button>
-              </td>
-              <td>€{(item.price * item.qty).toFixed(2)}</td>
-              <td><button onClick={() => remove(item.id)}>✕</button></td>
-            </tr>
+            <TableRow key={item.id}>
+              <TableCell>{item.emoji} {item.name}</TableCell>
+              <TableCell>€{item.price.toFixed(2)}</TableCell>
+              <TableCell>
+                <IconButton size="small" onClick={() => updateQty(item.id, -1)}><RemoveIcon fontSize="small" /></IconButton>
+                {item.qty}
+                <IconButton size="small" onClick={() => updateQty(item.id, +1)}><AddIcon fontSize="small" /></IconButton>
+              </TableCell>
+              <TableCell>€{(item.price * item.qty).toFixed(2)}</TableCell>
+              <TableCell>
+                <IconButton size="small" onClick={() => remove(item.id)}><DeleteIcon fontSize="small" /></IconButton>
+              </TableCell>
+            </TableRow>
           ))}
-        </tbody>
-        <tfoot>
-          <tr>
-            <td colSpan={3}><strong>Total</strong></td>
-            <td colSpan={2}><strong>€{total.toFixed(2)}</strong></td>
-          </tr>
-        </tfoot>
-      </table>
+        </TableBody>
+        <TableBody>
+          <TableRow>
+            <TableCell colSpan={3}><strong>Total</strong></TableCell>
+            <TableCell colSpan={2}><strong>€{total.toFixed(2)}</strong></TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
     </div>
   );
 }
diff --git a/week4/exercises/exercise 3 - ui library/src/components/Hero.jsx b/week4/exercises/exercise 3 - ui library/src/components/Hero.jsx
index 9dd1c00..3a61d13 100644
--- a/week4/exercises/exercise 3 - ui library/src/components/Hero.jsx	
+++ b/week4/exercises/exercise 3 - ui library/src/components/Hero.jsx	
@@ -1,7 +1,8 @@
 import { useState } from 'react';
+import { TextField, Button, Alert, Stack } from '@mui/material';
 
 // Exercise 1
-// TODO: Replace the form elements with MUI components:
+// MUI components used:
 // - <input>        → <TextField>
 // - <textarea>     → <TextField multiline>
 // - <button>       → <Button variant="contained">
@@ -19,23 +20,16 @@ export default function ContactForm() {
       <hr />
 
       {submitted && (
-        <div className="feedback-success">✅ Thanks! We’ll be in touch soon.</div>
+        <Alert severity="success" sx={{ mb: 2 }}>Thanks! We'll be in touch soon.</Alert>
       )}
 
       <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
-        <div className="field">
-          <label htmlFor="name">Name</label>
-          <input id="name" type="text" placeholder="Your name" />
-        </div>
-        <div className="field">
-          <label htmlFor="email">Email</label>
-          <input id="email" type="email" placeholder="you@example.com" />
-        </div>
-        <div className="field">
-          <label htmlFor="message">Message</label>
-          <textarea id="message" rows={4} placeholder="How can we help?" />
-        </div>
-        <button type="submit">Send message</button>
+        <Stack spacing={2}>
+          <TextField id="name" label="Name" placeholder="Your name" fullWidth />
+          <TextField id="email" label="Email" type="email" placeholder="you@example.com" fullWidth />
+          <TextField id="message" label="Message" placeholder="How can we help?" multiline rows={4} fullWidth />
+          <Button type="submit" variant="contained">Send message</Button>
+        </Stack>
       </form>
     </div>
   );
diff --git a/week4/exercises/exercise 3 - ui library/src/components/ProductSection.jsx b/week4/exercises/exercise 3 - ui library/src/components/ProductSection.jsx
index 3f5ade3..e0f392b 100644
--- a/week4/exercises/exercise 3 - ui library/src/components/ProductSection.jsx	
+++ b/week4/exercises/exercise 3 - ui library/src/components/ProductSection.jsx	
@@ -1,13 +1,20 @@
 import { useState } from 'react';
+import {
+  RadioGroup, FormControlLabel, Radio,
+  Checkbox,
+  Select, MenuItem, FormControl, InputLabel,
+  FormGroup, FormLabel, Stack,
+} from '@mui/material';
 
 // Exercise 2
-// TODO: Replace the filter controls with MUI components:
-// - radio inputs    → <RadioGroup> + <FormControlLabel> + <Radio>
-// - checkbox        → <Checkbox> + <FormControlLabel>
-// - <select>        → <Select> + <MenuItem> inside a <FormControl>
+// MUI components used:
+// - <RadioGroup> + <FormControlLabel> + <Radio>  replace radio inputs
+// - <Checkbox> + <FormControlLabel>             replaces the checkbox
+// - <Select> + <MenuItem> inside <FormControl>  replaces <select>
 export default function ProductFilters() {
   const [category, setCategory] = useState('all');
   const [inStock, setInStock] = useState(false);
+  const [sortBy, setSortBy] = useState('low-high');
 
   return (
     <div className="exercise">
@@ -18,45 +25,46 @@ export default function ProductFilters() {
       </p>
       <hr />
 
-      <div className="filters">
-        <fieldset>
-          <legend>Category</legend>
-          {['All', 'Plants', 'Candles', 'Vases', 'Baskets'].map(cat => (
-            <label key={cat} className="radio-label">
-              <input
-                type="radio"
-                name="category"
+      <Stack direction="row" spacing={4} flexWrap="wrap">
+        <FormControl>
+          <FormLabel>Category</FormLabel>
+          <RadioGroup value={category} onChange={e => setCategory(e.target.value)}>
+            {['All', 'Plants', 'Candles', 'Vases', 'Baskets'].map(cat => (
+              <FormControlLabel
+                key={cat}
                 value={cat.toLowerCase()}
-                checked={category === cat.toLowerCase()}
-                onChange={() => setCategory(cat.toLowerCase())}
+                control={<Radio />}
+                label={cat}
               />
-              {cat}
-            </label>
-          ))}
-        </fieldset>
+            ))}
+          </RadioGroup>
+        </FormControl>
 
-        <fieldset>
-          <legend>Availability</legend>
-          <label className="radio-label">
-            <input
-              type="checkbox"
-              checked={inStock}
-              onChange={e => setInStock(e.target.checked)}
+        <FormControl>
+          <FormLabel>Availability</FormLabel>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={inStock}
+                  onChange={e => setInStock(e.target.checked)}
+                />
+              }
+              label="In stock only"
             />
-            In stock only
-          </label>
-        </fieldset>
+          </FormGroup>
+        </FormControl>
 
-        <fieldset>
-          <legend>Sort by</legend>
-          <select>
-            <option>Price: low to high</option>
-            <option>Price: high to low</option>
-            <option>Newest</option>
-            <option>Best rated</option>
-          </select>
-        </fieldset>
-      </div>
+        <FormControl sx={{ minWidth: 180 }}>
+          <InputLabel>Sort by</InputLabel>
+          <Select value={sortBy} label="Sort by" onChange={e => setSortBy(e.target.value)}>
+            <MenuItem value="low-high">Price: low to high</MenuItem>
+            <MenuItem value="high-low">Price: high to low</MenuItem>
+            <MenuItem value="newest">Newest</MenuItem>
+            <MenuItem value="best-rated">Best rated</MenuItem>
+          </Select>
+        </FormControl>
+      </Stack>
     </div>
   );
 }
diff --git a/week4/exercises/exercise 3 - ui library/src/components/TestimonialsSection.jsx b/week4/exercises/exercise 3 - ui library/src/components/TestimonialsSection.jsx
index abe3298..7ff8b50 100644
--- a/week4/exercises/exercise 3 - ui library/src/components/TestimonialsSection.jsx	
+++ b/week4/exercises/exercise 3 - ui library/src/components/TestimonialsSection.jsx	
@@ -1,11 +1,12 @@
 import { useState } from 'react';
+import { Rating, TextField, Button, Snackbar, Alert, Stack, Typography } from '@mui/material';
 
 // Exercise 4
-// TODO: Replace the review form with MUI components:
-// - the star buttons → <Rating>
-// - <textarea>       → <TextField multiline rows={4}>
-// - <button>         → <Button variant="contained">
-// - success message  → <Snackbar> + <Alert>
+// MUI components used:
+// - <Rating>                   replaces the hand-built star buttons
+// - <TextField multiline>      replaces <textarea>
+// - <Button variant="contained"> replaces <button>
+// - <Snackbar> + <Alert>       replace the success div
 export default function ReviewForm() {
   const [rating, setRating] = useState(0);
   const [submitted, setSubmitted] = useState(false);
@@ -20,32 +21,33 @@ export default function ReviewForm() {
       <hr />
 
       <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
-        <div className="field">
-          <label>Your rating</label>
+        <Stack spacing={2}>
           <div>
-            {[1, 2, 3, 4, 5].map(n => (
-              <span
-                key={n}
-                onClick={() => setRating(n)}
-                style={{ cursor: 'pointer', fontSize: '1.6rem' }}
-              >
-                {n <= rating ? '★' : '☆'}
-              </span>
-            ))}
+            <Typography component="legend">Your rating</Typography>
+            <Rating value={rating} onChange={(_, newValue) => setRating(newValue)} />
           </div>
-        </div>
-        <div className="field">
-          <label htmlFor="review">Your review</label>
-          <textarea id="review" rows={4} placeholder="Share your experience..." />
-        </div>
-        <button type="submit">Submit review</button>
+          <TextField
+            id="review"
+            label="Your review"
+            placeholder="Share your experience..."
+            multiline
+            rows={4}
+            fullWidth
+          />
+          <Button type="submit" variant="contained">Submit review</Button>
+        </Stack>
       </form>
 
-      {submitted && (
-        <div className="feedback-success" style={{ marginTop: '12px' }}>
-          ✅ Review submitted! Thank you.
-        </div>
-      )}
+      <Snackbar
+        open={submitted}
+        autoHideDuration={4000}
+        onClose={() => setSubmitted(false)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert severity="success" onClose={() => setSubmitted(false)}>
+          Review submitted! Thank you.
+        </Alert>
+      </Snackbar>
     </div>
   );
 }