From 31e652269bf9feba812459815a0b7395ac1c98ee Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Fri, 30 May 2025 19:57:49 +0300
Subject: [PATCH 01/18] Design App For Modern Style

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/App.css                | 142 ++++++++++++----
 nextstep-frontend/src/App.tsx                | 101 ++++++++---
 nextstep-frontend/src/components/Footer.tsx  |  83 +++++++++-
 nextstep-frontend/src/components/Layout.tsx  |  45 ++++-
 nextstep-frontend/src/components/LeftBar.tsx | 166 +++++++++++++------
 5 files changed, 417 insertions(+), 120 deletions(-)

diff --git a/nextstep-frontend/src/App.css b/nextstep-frontend/src/App.css
index bc1ef16..6e74376 100644
--- a/nextstep-frontend/src/App.css
+++ b/nextstep-frontend/src/App.css
@@ -1,23 +1,28 @@
 :root {
-  --color-1: #1877f2;
-  --color-2: #f0f2f5;
-  --color-3: #606770;
-  --color-4: #ccd0d5;
-  --color-5: #165dbb;
-  --color-6: #052652;
-  --color-shadow-1: rgba(0, 0, 0, 0.1);
+  --color-primary: #2D3436;
+  --color-secondary: #0984E3;
+  --color-accent: #00B894;
+  --color-background: #FFFFFF;
+  --color-surface: #F8F9FA;
+  --color-text: #2D3436;
+  --color-text-secondary: #636E72;
+  --color-border: #DFE6E9;
+  --color-shadow: rgba(0, 0, 0, 0.08);
+  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --transition-standard: all 0.3s ease;
+  --border-radius: 12px;
+  --spacing-unit: 8px;
 }
 
 #root {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 100vh;
+  min-height: 100vh;
   width: 100%;
   margin: 0 auto;
-  text-align: center;
-  background-color: #f9f9f9;
+  font-family: var(--font-primary);
+  background-color: var(--color-background);
+  color: var(--color-text);
 }
 
 .logo {
@@ -48,37 +53,114 @@
   }
 }
 
+/* Modern Card Styles */
 .card {
-  padding: 2em;
+  background: var(--color-background);
+  border-radius: var(--border-radius);
+  box-shadow: 0 4px 6px var(--color-shadow);
+  transition: var(--transition-standard);
+  border: 1px solid var(--color-border);
 }
 
-.read-the-docs {
-  color: #888;
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 12px var(--color-shadow);
+}
+
+/* Modern Button Styles */
+.button {
+  background: var(--color-secondary);
+  color: white;
+  border: none;
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
+  border-radius: var(--border-radius);
+  font-weight: 500;
+  transition: var(--transition-standard);
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+/* Modern Input Styles */
+.input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: calc(var(--spacing-unit) * 1.5);
+  transition: var(--transition-standard);
+  background: var(--color-surface);
+}
+
+.input:focus {
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 2px rgba(9, 132, 227, 0.1);
+  outline: none;
 }
 
+/* Layout Components */
+.layout {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: calc(var(--spacing-unit) * 3);
+}
+
+/* Navigation */
+.nav {
+  background: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  padding: calc(var(--spacing-unit) * 2);
+}
+
+/* Job Card Modernization */
 .job-card {
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    height: 200px; /* Fixed height for all cards */
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; /* Align content and button */
-    overflow-y: auto; /* Enable vertical scrolling for overflow */
+  padding: calc(var(--spacing-unit) * 3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background: var(--color-background);
+  transition: var(--transition-standard);
+  height: auto;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 2);
+}
+
+.job-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 12px var(--color-shadow);
 }
 
 .job-card img {
-    display: inline-block;
-    margin: 0;
-    max-width: 20px;
-    height: 20px;
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
 }
 
 .job-card .company-name {
-    font-weight: bold; /* Make company name bold */
+  font-weight: 600;
+  color: var(--color-text);
+  font-size: 1.1em;
 }
 
 .job-card .location {
-    margin-top: 8px; /* Add separation between company name and location */
-    display: block; /* Ensure it appears on a new line */
+  color: var(--color-text-secondary);
+  font-size: 0.9em;
+  margin-top: calc(var(--spacing-unit));
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .layout {
+    padding: calc(var(--spacing-unit) * 2);
+  }
+  
+  .job-card {
+    padding: calc(var(--spacing-unit) * 2);
+  }
+}
+
+.read-the-docs {
+  color: #888;
 }
diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx
index 90eaef4..fa679bc 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -15,32 +15,87 @@ import LeftBar from './components/LeftBar';
 import Layout from './components/Layout';
 import MainDashboard from './pages/MainDashboard';
 import Quiz from './pages/Quiz';
-import { Box } from '@mui/material';
+import { Box, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#0984E3',
+    },
+    secondary: {
+      main: '#00B894',
+    },
+    background: {
+      default: '#FFFFFF',
+      paper: '#F8F9FA',
+    },
+  },
+  typography: {
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  shape: {
+    borderRadius: 12,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 500,
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            transform: 'translateY(-2px)',
+            boxShadow: '0 8px 12px rgba(0, 0, 0, 0.08)',
+          },
+        },
+      },
+    },
+  },
+});
 
 const App: React.FC = () => {
   return (
-    <>
-    <Box height="90vh" display='flex' width="100%">
-      <Router>
-        <LeftBar /> 
-        <Routes>
-          <Route path="/" element={<Layout className="login"><Login /></Layout>} />
-          <Route path="/login" element={<Layout className="login"><Login /></Layout>} /> 
-          <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
-          <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
-          <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
-          <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
-          <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
-          <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
-          <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
-          <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
-          <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Routes>
-      </Router>
-    </Box>
-    <Footer/>
-    </>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
+        <Router>
+          <LeftBar />
+          <Box
+            component="main"
+            sx={{
+              flexGrow: 1,
+              p: 3,
+              width: { sm: `calc(100% - 240px)` },
+              ml: { sm: '240px' },
+              transition: 'margin 0.3s ease',
+            }}
+          >
+            <Routes>
+              <Route path="/" element={<Layout className="login"><Login /></Layout>} />
+              <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
+              <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
+              <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
+              <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
+              <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
+              <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
+              <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
+              <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
+              <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
+              <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </Routes>
+          </Box>
+        </Router>
+      </Box>
+      <Footer />
+    </ThemeProvider>
   );
 };
 
diff --git a/nextstep-frontend/src/components/Footer.tsx b/nextstep-frontend/src/components/Footer.tsx
index 22027ee..01b825a 100644
--- a/nextstep-frontend/src/components/Footer.tsx
+++ b/nextstep-frontend/src/components/Footer.tsx
@@ -1,11 +1,86 @@
 import React from 'react';
-import './Footer.css';
+import { Box, Container, Typography, Link, Stack } from '@mui/material';
+import { GitHub, LinkedIn, Twitter } from '@mui/icons-material';
 
 const Footer: React.FC = () => {
   return (
-    <div className="footer">
-      © 2025 Next Step. All rights reserved.
-    </div>
+    <Box
+      component="footer"
+      sx={{
+        py: 3,
+        px: 2,
+        mt: 'auto',
+        backgroundColor: 'background.paper',
+        borderTop: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      <Container maxWidth="lg">
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={{ xs: 2, sm: 4 }}
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ fontWeight: 500 }}
+          >
+            © {new Date().getFullYear()} Next Step. All rights reserved.
+          </Typography>
+          
+          <Stack
+            direction="row"
+            spacing={2}
+            alignItems="center"
+          >
+            <Link
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+              sx={{
+                '&:hover': {
+                  color: 'primary.main',
+                },
+                transition: 'color 0.2s ease',
+              }}
+            >
+              <GitHub />
+            </Link>
+            <Link
+              href="https://linkedin.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+              sx={{
+                '&:hover': {
+                  color: 'primary.main',
+                },
+                transition: 'color 0.2s ease',
+              }}
+            >
+              <LinkedIn />
+            </Link>
+            <Link
+              href="https://twitter.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+              sx={{
+                '&:hover': {
+                  color: 'primary.main',
+                },
+                transition: 'color 0.2s ease',
+              }}
+            >
+              <Twitter />
+            </Link>
+          </Stack>
+        </Stack>
+      </Container>
+    </Box>
   );
 };
 
diff --git a/nextstep-frontend/src/components/Layout.tsx b/nextstep-frontend/src/components/Layout.tsx
index 74d2e6f..d30ed8a 100644
--- a/nextstep-frontend/src/components/Layout.tsx
+++ b/nextstep-frontend/src/components/Layout.tsx
@@ -1,22 +1,51 @@
-import { Container } from '@mui/material';
+import { Container, Box } from '@mui/material';
 import React from 'react';
 import './Layout.css';
 
+interface LayoutProps {
+  className?: string;
+  children: React.ReactNode;
+}
 
-const Layout: React.FC<{ className?: string; children: React.ReactNode }> = ({
+const Layout: React.FC<LayoutProps> = ({
   className = '',
   children
 }) => {
   return (
-    <Container className={["layout-container", className].join(' ')} component="main"
+    <Box
       sx={{
-        "&.MuiContainer-root": {
-          maxWidth: 'none'
-        }
+        width: '100%',
+        minHeight: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'all 0.3s ease',
       }}
     >
-      { children }
-    </Container>
+      <Container
+        maxWidth={false}
+        className={className}
+        sx={{
+          flex: 1,
+          py: 4,
+          px: { xs: 2, sm: 3, md: 4 },
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 3,
+          '&.login, &.register': {
+            maxWidth: 'sm',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: 'calc(100vh - 64px)',
+          },
+          '&.feed, &.profile, &.chat, &.resume, &.main-dashboard, &.quiz': {
+            maxWidth: 'lg',
+          },
+        }}
+      >
+        {children}
+      </Container>
+    </Box>
   );
 };
 
diff --git a/nextstep-frontend/src/components/LeftBar.tsx b/nextstep-frontend/src/components/LeftBar.tsx
index b5f7f1a..a930afb 100644
--- a/nextstep-frontend/src/components/LeftBar.tsx
+++ b/nextstep-frontend/src/components/LeftBar.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Box, Drawer, List, ListItem, ListItemIcon, ListItemText, IconButton } from '@mui/material';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Box, Drawer, List, ListItem, ListItemIcon, ListItemText, IconButton, Tooltip, Divider } from '@mui/material';
 import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz, Menu, ChevronLeft } from '@mui/icons-material';
 import { getUserAuth, removeUserAuth } from "../handlers/userAuth.ts";
 import api from "../serverApi.ts";
@@ -9,10 +9,10 @@ import logo from '../../assets/NextStep.png';
 const LeftBar: React.FC = () => {
   const userAuthRef = useRef(getUserAuth());
   const navigate = useNavigate();
+  const location = useLocation();
   const [collapsed, setCollapsed] = useState(false);
 
   useEffect(() => {
-    // Automatically collapse the sidebar if the user is disconnected
     if (!userAuthRef.current) {
       setCollapsed(true);
     }
@@ -32,19 +32,29 @@ const LeftBar: React.FC = () => {
     setCollapsed(!collapsed);
   };
 
+  const menuItems = [
+    { path: '/main-dashboard', icon: <Home />, text: 'Home' },
+    { path: '/resume', icon: <DocumentScannerTwoTone />, text: 'Resume' },
+    { path: '/quiz', icon: <Quiz />, text: 'Quiz' },
+    { path: '/feed', icon: <Feed />, text: 'Feed' },
+    { path: '/chat', icon: <Message />, text: 'Chat' },
+    { path: '/profile', icon: <Person />, text: 'Profile' },
+  ];
+
   return (
     <Drawer
       variant="permanent"
       sx={{
-        width: collapsed ? 60 : 180,
+        width: collapsed ? 72 : 240,
         flexShrink: 0,
         [`& .MuiDrawer-paper`]: {
-          width: collapsed ? 60 : 180,
+          width: collapsed ? 72 : 240,
           boxSizing: 'border-box',
-          backgroundColor: '#233752',
-          color: 'white',
+          backgroundColor: 'background.paper',
+          borderRight: '1px solid',
+          borderColor: 'divider',
+          transition: 'width 0.3s ease',
           overflowX: 'hidden',
-          transition: 'width 0.3s',
         },
       }}
     >
@@ -53,7 +63,8 @@ const LeftBar: React.FC = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: collapsed ? 'center' : 'space-between',
-          padding: '8px',
+          p: 2,
+          minHeight: 64,
         }}
       >
         {!collapsed && (
@@ -61,56 +72,101 @@ const LeftBar: React.FC = () => {
             component="img"
             src={logo}
             alt="Logo"
-            sx={{ height: 120, width: 150 }}
+            sx={{ 
+              height: 40,
+              width: 'auto',
+              transition: 'all 0.3s ease',
+            }}
           />
         )}
-        <IconButton onClick={toggleCollapse} sx={{ color: 'white' }}>
-          {collapsed ? <Menu /> : <ChevronLeft fontSize="large" />}
+        <IconButton 
+          onClick={toggleCollapse} 
+          sx={{ 
+            color: 'text.secondary',
+            '&:hover': {
+              backgroundColor: 'action.hover',
+            },
+          }}
+        >
+          {collapsed ? <Menu /> : <ChevronLeft />}
         </IconButton>
       </Box>
-      <List>
-        <ListItem button onClick={() => navigate('/main-dashboard')} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <Home sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Home" />}
-        </ListItem>
-        <ListItem button onClick={() => navigate('/resume')} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <DocumentScannerTwoTone sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Resume" />}
-        </ListItem>
-        <ListItem button onClick={() => navigate('/quiz')} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <Quiz sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Quiz" />}
-        </ListItem>
-        <ListItem button onClick={() => navigate('/feed')} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <Feed sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Feed" />}
-        </ListItem>
-        <ListItem button onClick={() => navigate('/chat')} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <Message sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Chat" />}
-        </ListItem>
-        <ListItem button onClick={() => navigate('/profile')} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <Person sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Profile" />}
-        </ListItem>
-        <ListItem button onClick={handleLogout} sx={{ cursor: 'pointer' }}>
-          <ListItemIcon>
-            <Logout sx={{ color: 'white' }} />
-          </ListItemIcon>
-          {!collapsed && <ListItemText primary="Logout" />}
-        </ListItem>
+      <Divider />
+      <List sx={{ px: 1 }}>
+        {menuItems.map((item) => (
+          <Tooltip 
+            key={item.path} 
+            title={collapsed ? item.text : ''} 
+            placement="right"
+          >
+            <ListItem
+              button
+              onClick={() => navigate(item.path)}
+              sx={{
+                borderRadius: 2,
+                mb: 0.5,
+                backgroundColor: location.pathname === item.path ? 'action.selected' : 'transparent',
+                '&:hover': {
+                  backgroundColor: 'action.hover',
+                },
+                transition: 'all 0.2s ease',
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: collapsed ? 'auto' : 40,
+                  color: location.pathname === item.path ? 'primary.main' : 'text.secondary',
+                }}
+              >
+                {item.icon}
+              </ListItemIcon>
+              {!collapsed && (
+                <ListItemText 
+                  primary={item.text}
+                  primaryTypographyProps={{
+                    color: location.pathname === item.path ? 'primary.main' : 'text.primary',
+                    fontWeight: location.pathname === item.path ? 600 : 400,
+                  }}
+                />
+              )}
+            </ListItem>
+          </Tooltip>
+        ))}
+      </List>
+      <Box sx={{ flexGrow: 1 }} />
+      <Divider />
+      <List sx={{ px: 1 }}>
+        <Tooltip title={collapsed ? 'Logout' : ''} placement="right">
+          <ListItem
+            button
+            onClick={handleLogout}
+            sx={{
+              borderRadius: 2,
+              mb: 0.5,
+              '&:hover': {
+                backgroundColor: 'action.hover',
+              },
+              transition: 'all 0.2s ease',
+            }}
+          >
+            <ListItemIcon
+              sx={{
+                minWidth: collapsed ? 'auto' : 40,
+                color: 'text.secondary',
+              }}
+            >
+              <Logout />
+            </ListItemIcon>
+            {!collapsed && (
+              <ListItemText 
+                primary="Logout"
+                primaryTypographyProps={{
+                  color: 'text.primary',
+                }}
+              />
+            )}
+          </ListItem>
+        </Tooltip>
       </List>
     </Drawer>
   );

From 0cefe620594588e2ab8df542ff980ed835325a5f Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Fri, 30 May 2025 20:02:41 +0300
Subject: [PATCH 02/18] Add Landing Page

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 .../public/assets/landing-hero.svg            |  50 ++++
 nextstep-frontend/src/App.tsx                 |  73 +++---
 nextstep-frontend/src/pages/Landing.tsx       | 225 ++++++++++++++++++
 3 files changed, 317 insertions(+), 31 deletions(-)
 create mode 100644 nextstep-frontend/public/assets/landing-hero.svg
 create mode 100644 nextstep-frontend/src/pages/Landing.tsx

diff --git a/nextstep-frontend/public/assets/landing-hero.svg b/nextstep-frontend/public/assets/landing-hero.svg
new file mode 100644
index 0000000..f6e1a9a
--- /dev/null
+++ b/nextstep-frontend/public/assets/landing-hero.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="600px" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <!-- Background Elements -->
+        <circle fill="#FFFFFF" opacity="0.1" cx="400" cy="300" r="250"/>
+        <circle fill="#FFFFFF" opacity="0.05" cx="400" cy="300" r="200"/>
+        
+        <!-- Career Path -->
+        <path d="M200,450 C300,350 500,250 600,150" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
+        
+        <!-- Person Silhouette -->
+        <g transform="translate(400, 300)">
+            <!-- Head -->
+            <circle fill="#FFFFFF" cx="0" cy="-80" r="30"/>
+            
+            <!-- Body -->
+            <path d="M0,-50 L0,50" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+            
+            <!-- Arms -->
+            <path d="M0,-30 L-40,0" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+            <path d="M0,-30 L40,0" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+            
+            <!-- Legs -->
+            <path d="M0,50 L-30,100" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+            <path d="M0,50 L30,100" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
+        </g>
+        
+        <!-- Career Icons -->
+        <g transform="translate(200, 450)">
+            <circle fill="#FFFFFF" opacity="0.2" cx="0" cy="0" r="20"/>
+            <path d="M-10,0 L10,0 M0,-10 L0,10" stroke="#FFFFFF" stroke-width="2"/>
+        </g>
+        
+        <g transform="translate(400, 350)">
+            <circle fill="#FFFFFF" opacity="0.2" cx="0" cy="0" r="20"/>
+            <path d="M-8,-8 L8,8 M-8,8 L8,-8" stroke="#FFFFFF" stroke-width="2"/>
+        </g>
+        
+        <g transform="translate(600, 250)">
+            <circle fill="#FFFFFF" opacity="0.2" cx="0" cy="0" r="20"/>
+            <path d="M-10,0 L10,0" stroke="#FFFFFF" stroke-width="2"/>
+        </g>
+        
+        <!-- Decorative Elements -->
+        <circle fill="#FFFFFF" opacity="0.1" cx="150" cy="150" r="10"/>
+        <circle fill="#FFFFFF" opacity="0.1" cx="650" cy="450" r="15"/>
+        <circle fill="#FFFFFF" opacity="0.1" cx="500" cy="100" r="8"/>
+        <circle fill="#FFFFFF" opacity="0.1" cx="200" cy="500" r="12"/>
+    </g>
+</svg> 
\ No newline at end of file
diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx
index fa679bc..7995990 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -15,6 +15,7 @@ import LeftBar from './components/LeftBar';
 import Layout from './components/Layout';
 import MainDashboard from './pages/MainDashboard';
 import Quiz from './pages/Quiz';
+import Landing from './pages/Landing';
 import { Box, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 
 const theme = createTheme({
@@ -64,37 +65,47 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
-        <Router>
-          <LeftBar />
-          <Box
-            component="main"
-            sx={{
-              flexGrow: 1,
-              p: 3,
-              width: { sm: `calc(100% - 240px)` },
-              ml: { sm: '240px' },
-              transition: 'margin 0.3s ease',
-            }}
-          >
-            <Routes>
-              <Route path="/" element={<Layout className="login"><Login /></Layout>} />
-              <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
-              <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
-              <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
-              <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
-              <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
-              <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
-              <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
-              <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
-              <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
-              <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
-              <Route path="*" element={<Navigate to="/" />} />
-            </Routes>
-          </Box>
-        </Router>
-      </Box>
-      <Footer />
+      <Router>
+        <Routes>
+          {/* Public Routes */}
+          <Route path="/" element={<Landing />} />
+          <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
+          <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
+          
+          {/* Protected Routes */}
+          <Route
+            path="/*"
+            element={
+              <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
+                <LeftBar />
+                <Box
+                  component="main"
+                  sx={{
+                    flexGrow: 1,
+                    p: 3,
+                    width: { sm: `calc(100% - 240px)` },
+                    ml: { sm: '240px' },
+                    transition: 'margin 0.3s ease',
+                  }}
+                >
+                  <Routes>
+                    <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
+                    <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
+                    <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
+                    <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
+                    <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
+                    <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
+                    <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
+                    <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
+                    <Route path="*" element={<Navigate to="/" />} />
+                  </Routes>
+                </Box>
+              </Box>
+            }
+          />
+        </Routes>
+        <Footer />
+      </Router>
     </ThemeProvider>
   );
 };
diff --git a/nextstep-frontend/src/pages/Landing.tsx b/nextstep-frontend/src/pages/Landing.tsx
new file mode 100644
index 0000000..27286ec
--- /dev/null
+++ b/nextstep-frontend/src/pages/Landing.tsx
@@ -0,0 +1,225 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  Typography,
+  Card,
+  CardContent,
+  Stack,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
+import {
+  School,
+  Work,
+  Psychology,
+  Chat,
+  ArrowForward,
+} from '@mui/icons-material';
+
+const Landing: React.FC = () => {
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const features = [
+    {
+      icon: <School sx={{ fontSize: 40, color: 'primary.main' }} />,
+      title: 'Career Guidance',
+      description: 'Get personalized career recommendations based on your skills and interests.',
+    },
+    {
+      icon: <Work sx={{ fontSize: 40, color: 'primary.main' }} />,
+      title: 'Job Matching',
+      description: 'Find the perfect job opportunities that match your profile and aspirations.',
+    },
+    {
+      icon: <Psychology sx={{ fontSize: 40, color: 'primary.main' }} />,
+      title: 'Skill Assessment',
+      description: 'Take quizzes to evaluate your skills and identify areas for improvement.',
+    },
+    {
+      icon: <Chat sx={{ fontSize: 40, color: 'primary.main' }} />,
+      title: 'Community Support',
+      description: 'Connect with peers and mentors to share experiences and get advice.',
+    },
+  ];
+
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      {/* Hero Section */}
+      <Box
+        sx={{
+          pt: { xs: 8, md: 12 },
+          pb: { xs: 8, md: 12 },
+          background: `linear-gradient(45deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
+          color: 'white',
+        }}
+      >
+        <Container maxWidth="lg">
+          <Grid container spacing={4} alignItems="center">
+            <Grid item xs={12} md={6}>
+              <Typography
+                variant="h1"
+                sx={{
+                  fontSize: { xs: '2.5rem', md: '3.5rem' },
+                  fontWeight: 700,
+                  mb: 2,
+                }}
+              >
+                Take Your Next Step Towards Success
+              </Typography>
+              <Typography
+                variant="h5"
+                sx={{ mb: 4, opacity: 0.9 }}
+              >
+                Your personalized career development platform that helps you navigate your professional journey with confidence.
+              </Typography>
+              <Stack
+                direction={{ xs: 'column', sm: 'row' }}
+                spacing={2}
+              >
+                <Button
+                  variant="contained"
+                  size="large"
+                  onClick={() => navigate('/register')}
+                  sx={{
+                    bgcolor: 'white',
+                    color: 'primary.main',
+                    '&:hover': {
+                      bgcolor: 'grey.100',
+                    },
+                  }}
+                >
+                  Get Started
+                </Button>
+                <Button
+                  variant="outlined"
+                  size="large"
+                  onClick={() => navigate('/login')}
+                  sx={{
+                    borderColor: 'white',
+                    color: 'white',
+                    '&:hover': {
+                      borderColor: 'white',
+                      bgcolor: 'rgba(255, 255, 255, 0.1)',
+                    },
+                  }}
+                >
+                  Sign In
+                </Button>
+              </Stack>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box
+                component="img"
+                src="/assets/landing-hero.svg"
+                alt="Career Development"
+                sx={{
+                  width: '100%',
+                  maxWidth: 500,
+                  height: 'auto',
+                  display: { xs: 'none', md: 'block' },
+                }}
+              />
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+
+      {/* Features Section */}
+      <Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
+        <Typography
+          variant="h2"
+          align="center"
+          sx={{ mb: 6, fontWeight: 700 }}
+        >
+          Why Choose Next Step?
+        </Typography>
+        <Grid container spacing={4}>
+          {features.map((feature, index) => (
+            <Grid item xs={12} sm={6} md={3} key={index}>
+              <Card
+                sx={{
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  transition: 'transform 0.2s ease-in-out',
+                  '&:hover': {
+                    transform: 'translateY(-8px)',
+                  },
+                }}
+              >
+                <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
+                  <Box sx={{ mb: 2 }}>{feature.icon}</Box>
+                  <Typography
+                    variant="h5"
+                    component="h3"
+                    sx={{ mb: 2, fontWeight: 600 }}
+                  >
+                    {feature.title}
+                  </Typography>
+                  <Typography color="text.secondary">
+                    {feature.description}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+
+      {/* CTA Section */}
+      <Box
+        sx={{
+          py: { xs: 8, md: 12 },
+          bgcolor: 'grey.50',
+        }}
+      >
+        <Container maxWidth="md">
+          <Box
+            sx={{
+              textAlign: 'center',
+              p: { xs: 3, md: 6 },
+              borderRadius: 4,
+              bgcolor: 'background.paper',
+              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+            }}
+          >
+            <Typography
+              variant="h3"
+              sx={{ mb: 3, fontWeight: 700 }}
+            >
+              Ready to Start Your Journey?
+            </Typography>
+            <Typography
+              variant="h6"
+              color="text.secondary"
+              sx={{ mb: 4 }}
+            >
+              Join thousands of professionals who have already taken their next step towards success.
+            </Typography>
+            <Button
+              variant="contained"
+              size="large"
+              onClick={() => navigate('/register')}
+              endIcon={<ArrowForward />}
+              sx={{
+                px: 4,
+                py: 1.5,
+                fontSize: '1.1rem',
+              }}
+            >
+              Get Started Now
+            </Button>
+          </Box>
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default Landing; 
\ No newline at end of file

From 44731e9a05ac37bd078455f0f3257dbf567e6644 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Fri, 30 May 2025 20:09:09 +0300
Subject: [PATCH 03/18] Fix Chat Blank White Screen

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 .../src/components/DividedList.tsx            | 101 ++++---
 nextstep-frontend/src/pages/Chat.tsx          | 255 +++++++++++++-----
 2 files changed, 251 insertions(+), 105 deletions(-)

diff --git a/nextstep-frontend/src/components/DividedList.tsx b/nextstep-frontend/src/components/DividedList.tsx
index 75d9a74..c97ba73 100644
--- a/nextstep-frontend/src/components/DividedList.tsx
+++ b/nextstep-frontend/src/components/DividedList.tsx
@@ -1,46 +1,83 @@
 import { useState } from 'react';
-import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
-import List from '@mui/joy/List';
-import ListDivider from '@mui/joy/ListDivider';
-import ListItem from '@mui/joy/ListItem';
-import ListItemDecorator from '@mui/joy/ListItemDecorator';
-import Typography from '@mui/joy/Typography';
+import {
+  Avatar,
+  Box,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Divider,
+  ListItemButton,
+} from '@mui/material';
 
-const DividedList: React.FC<any> = ({ onlineUsers, onUserClick }) => {
+interface User {
+  id: string;
+  email: string;
+}
+
+interface DividedListProps {
+  onlineUsers: User[];
+  onUserClick: (user: User) => void;
+  disabled?: boolean;
+}
+
+const DividedList: React.FC<DividedListProps> = ({ onlineUsers, onUserClick, disabled = false }) => {
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
 
-  const handleUserClick = (user: any) => {
+  const handleUserClick = (user: User) => {
+    if (disabled) return;
     setSelectedUserId(user.id);
     onUserClick(user);
   };
 
   return (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 4 }}>
-      <div>
-        <List variant="outlined" sx={{ minWidth: 240, borderRadius: 'sm' }}>
-          {onlineUsers.map((user: any, index: number) => (
-            <div key={user.id} id={user.id} onClick={() => handleUserClick(user)}>
-              {index !== 0 && <ListDivider />}
-              <ListItem
-                sx={{
-                  cursor: 'pointer',
-                  backgroundColor: user.id === selectedUserId ? 'var(--color-1)' : 'transparent',
-                  color: user.id === selectedUserId ? 'white' : 'inherit',
-                  borderRadius: '5px',
-                  transition: 'background 0.1s ease-in-out',
-                  '&:hover': { backgroundColor: 'var(--color-4)' },
+      <List
+        sx={{
+          width: '100%',
+          maxWidth: 360,
+          bgcolor: 'background.paper',
+          borderRadius: 1,
+          boxShadow: 1,
+        }}
+      >
+        {onlineUsers.map((user, index) => (
+          <div key={user.id}>
+            {index !== 0 && <Divider />}
+            <ListItemButton
+              onClick={() => handleUserClick(user)}
+              disabled={disabled}
+              sx={{
+                py: 1,
+                px: 2,
+                backgroundColor: user.id === selectedUserId ? 'primary.main' : 'transparent',
+                color: user.id === selectedUserId ? 'primary.contrastText' : 'text.primary',
+                '&:hover': {
+                  backgroundColor: user.id === selectedUserId ? 'primary.dark' : 'action.hover',
+                },
+                '&.Mui-disabled': {
+                  opacity: 0.5,
+                },
+              }}
+            >
+              <ListItemAvatar>
+                <Avatar
+                  alt={user.email}
+                  src="/static/images/avatar/1.jpg"
+                  sx={{ width: 32, height: 32 }}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={user.email}
+                primaryTypographyProps={{
+                  fontSize: '0.875rem',
+                  fontWeight: user.id === selectedUserId ? 600 : 400,
                 }}
-              >
-                <ListItemDecorator>
-                  <Avatar size="sm" src="/static/images/avatar/1.jpg" />
-                </ListItemDecorator>
-                <Typography>{user.email}</Typography>
-              </ListItem>
-            </div>
-          ))}
-        </List>
-      </div>
+              />
+            </ListItemButton>
+          </div>
+        ))}
+      </List>
     </Box>
   );
 };
diff --git a/nextstep-frontend/src/pages/Chat.tsx b/nextstep-frontend/src/pages/Chat.tsx
index b40cc51..872ca5a 100644
--- a/nextstep-frontend/src/pages/Chat.tsx
+++ b/nextstep-frontend/src/pages/Chat.tsx
@@ -1,120 +1,229 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import './Chat.css';
 import { config } from '../config';
-import { io } from "socket.io-client";
+import { io, Socket } from "socket.io-client";
 import { LoginResponse } from '../models/LoginResponse';
 import DividedList from '../components/DividedList';
 import { Room } from '../models/Room';
 import axios from 'axios';
-import { Box } from '@mui/material';
+import { Box, CircularProgress, Alert, Snackbar } from '@mui/material';
 
 const Chat: React.FC = () => {
   const [messageContent, setMessageContent] = useState('');
   const [room, setRoom] = useState<Room>({ _id: null, messages: [] });
-  const [onlineUsers, setOnlineUsers] = useState([] as LoginResponse[]);
-  const usersMetadataCacheRef = useRef(new Set<any>());
-  const socketRef = useRef(null as any);
-  const userAuthRef = useRef(JSON.parse(localStorage.getItem(config.localStorageKeys.userAuth) as string) as LoginResponse);
+  const [onlineUsers, setOnlineUsers] = useState<LoginResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+
+  const usersMetadataCacheRef = useRef(new Set<LoginResponse>());
+  const socketRef = useRef<Socket | null>(null);
+  const userAuthRef = useRef<LoginResponse | null>(null);
   const messagesEndRef = useRef<HTMLDivElement | null>(null);
-  
-  const connectHandler = () => {
-    socketRef.current = io(config.app.backend_url(), {
-      extraHeaders: {
-        authorization: `Bearer ${userAuthRef.current.accessToken}`
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Initialize user auth
+  useEffect(() => {
+    try {
+      const storedAuth = localStorage.getItem(config.localStorageKeys.userAuth);
+      if (!storedAuth) {
+        throw new Error('No authentication found');
+      }
+      userAuthRef.current = JSON.parse(storedAuth) as LoginResponse;
+    } catch (err) {
+      setError('Authentication error. Please log in again.');
+      setIsLoading(false);
+    }
+  }, []);
+
+  const connectHandler = useCallback(() => {
+    if (!userAuthRef.current) {
+      setError('Authentication error. Please log in again.');
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      // Cleanup existing socket if any
+      if (socketRef.current) {
+        socketRef.current.disconnect();
       }
-    });
-    
-    socketRef.current.on(config.socketMethods.messageFromServer, ({ roomId, message } : any) => {
-      setRoom(prevRoom => {
-        if (prevRoom && prevRoom._id === roomId) {
-          return { ...prevRoom, messages: [...prevRoom.messages, message] };
-        }
-        return prevRoom;
+
+      // Create new socket connection
+      socketRef.current = io(config.app.backend_url(), {
+        extraHeaders: {
+          authorization: `Bearer ${userAuthRef.current.accessToken}`
+        },
+        reconnection: true,
+        reconnectionAttempts: 5,
+        reconnectionDelay: 1000,
+        timeout: 10000,
       });
-    });
 
-    socketRef.current.on(config.socketMethods.onlineUsers, (receivedOnlineUsers: LoginResponse[]) => {
-      setOnlineUsers(receivedOnlineUsers);
-      receivedOnlineUsers.forEach(user => {
-        usersMetadataCacheRef.current.add(user);
+      // Connection event handlers
+      socketRef.current.on('connect', () => {
+        setIsConnected(true);
+        setError(null);
+        setIsLoading(false);
+      });
+
+      socketRef.current.on('connect_error', (err) => {
+        setError('Connection error. Please try again.');
+        setIsConnected(false);
+        setIsLoading(false);
+      });
+
+      socketRef.current.on('disconnect', () => {
+        setIsConnected(false);
+        setError('Disconnected from server. Attempting to reconnect...');
+      });
+
+      // Message handlers
+      socketRef.current.on(config.socketMethods.messageFromServer, ({ roomId, message }: any) => {
+        setRoom(prevRoom => {
+          if (prevRoom && prevRoom._id === roomId) {
+            return { ...prevRoom, messages: [...prevRoom.messages, message] };
+          }
+          return prevRoom;
+        });
+      });
+
+      socketRef.current.on(config.socketMethods.onlineUsers, (receivedOnlineUsers: LoginResponse[]) => {
+        setOnlineUsers(receivedOnlineUsers);
+        receivedOnlineUsers.forEach(user => {
+          usersMetadataCacheRef.current.add(user);
+        });
       });
-    });
-  };
 
+    } catch (err) {
+      setError('Failed to connect to chat server');
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initial connection
   useEffect(() => {
-    connectHandler();
+    if (userAuthRef.current) {
+      connectHandler();
+    }
+
     return () => {
-      socketRef.current.disconnect();
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
     };
-  }, []);
+  }, [connectHandler]);
 
   const sendMessageHandler = () => {
-    if (room._id) {
-      socketRef.current.emit(config.socketMethods.messageFromClient, { roomId: room._id, messageContent: messageContent });
+    if (!isConnected || !room._id || !messageContent.trim()) return;
+
+    try {
+      socketRef.current?.emit(config.socketMethods.messageFromClient, {
+        roomId: room._id,
+        messageContent: messageContent.trim()
+      });
       setMessageContent('');
+    } catch (err) {
+      setError('Failed to send message');
     }
   };
 
-  const onUserClick = (user : any) => {
-    axios.get<Room>(`${config.app.backend_url()}/room/user/${user.id}`, {
-      headers: { Authorization: `Bearer ${userAuthRef.current.accessToken}` }
-    })
-    .then((response) => {
+  const onUserClick = async (user: LoginResponse) => {
+    if (!userAuthRef.current) return;
+
+    try {
+      setIsLoading(true);
+      const response = await axios.get<Room>(`${config.app.backend_url()}/room/user/${user.id}`, {
+        headers: { Authorization: `Bearer ${userAuthRef.current.accessToken}` }
+      });
+      
       setRoom(response.data);
-      socketRef.current.emit(`${config.socketMethods.enterRoom}`, response.data._id);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
+      socketRef.current?.emit(config.socketMethods.enterRoom, response.data._id);
+    } catch (err) {
+      setError('Failed to load chat room');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  // Scroll to the bottom of the chat messages
-  const scrollToBottom = () => {
+  // Scroll to bottom when messages change
+  useEffect(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
     }
-  };
+  }, [room.messages]);
 
-  useEffect(() => {
-    scrollToBottom();
-  }, [room.messages]); // Scroll whenever messages change
+  if (isLoading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
 
   return (
     <Box sx={{ maxWidth: 800, mx: 'auto', p: 3 }}>
+      <Snackbar
+        open={!!error}
+        autoHideDuration={6000}
+        onClose={() => setError(null)}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert severity="error" onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      </Snackbar>
+
       <div className="chat-container">
         <div className="message-input">
-            <input
-                type="text"
-                onChange={(e) => setMessageContent(e.target.value)}
-                value={messageContent}
-                placeholder="Type your message..."
-            />
-            <button onClick={() => sendMessageHandler()}>Send</button>
+          <input
+            type="text"
+            onChange={(e) => setMessageContent(e.target.value)}
+            value={messageContent}
+            placeholder="Type your message..."
+            disabled={!isConnected}
+          />
+          <button 
+            onClick={sendMessageHandler}
+            disabled={!isConnected || !messageContent.trim()}
+          >
+            Send
+          </button>
         </div>
 
         <div className="chat-messages">
-            {room.messages.length === 0 ? (
-                <div className="no-messages">
-                    <p>No messages yet. Start the conversation!</p>
+          {room.messages.length === 0 ? (
+            <div className="no-messages">
+              <p>No messages yet. Start the conversation!</p>
+            </div>
+          ) : (
+            room.messages.map((m: any, index: number) => (
+              <div key={index} className="message">
+                <div className="message-header">
+                  <span className="message-user">
+                    {Array.from(usersMetadataCacheRef.current).find(u => u.id === m?.userId)?.email}
+                  </span>
+                  <span className="message-time">
+                    {new Date(m?.createdAt).toLocaleTimeString()}
+                  </span>
                 </div>
-            ) : (
-                room.messages.map((m: any, index: any) => (
-                    <div key={index} className="message">
-                        <div className="message-header">
-                            <span className="message-user">{Array.from(usersMetadataCacheRef.current).find(u => u.id == m?.userId)?.email}</span>
-                            <span className="message-time">{new Date(m?.createdAt).toLocaleTimeString()}</span>
-                        </div>
-                        <div className="message-content">{m?.content}</div>
-                    </div>
-                ))
-            )}
-            {/* This div will be used to scroll to the bottom */}
-            <div ref={messagesEndRef} />
+                <div className="message-content">{m?.content}</div>
+              </div>
+            ))
+          )}
+          <div ref={messagesEndRef} />
         </div>
 
         <div className="online-users">
-            <h3>Online Users:</h3>
-            <DividedList onlineUsers={onlineUsers} onUserClick={onUserClick} />
+          <h3>Online Users:</h3>
+          <DividedList 
+            onlineUsers={onlineUsers} 
+            onUserClick={onUserClick}
+            disabled={!isConnected}
+          />
         </div>
       </div>
     </Box>

From 1a6d6770c08c811a6da61a092ee3bd93d8992bd9 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Fri, 30 May 2025 22:51:36 +0300
Subject: [PATCH 04/18] Add Dark Theme And Enhance Chat And Footer

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/App.tsx                 | 140 ++++----
 .../src/components/DividedList.tsx            |  24 +-
 nextstep-frontend/src/components/Footer.tsx   | 157 +++++----
 nextstep-frontend/src/components/Layout.tsx   |   6 +-
 nextstep-frontend/src/components/LeftBar.tsx  | 265 +++++++++------
 .../src/contexts/ThemeContext.tsx             |  38 +++
 nextstep-frontend/src/index.css               | 107 ++++---
 nextstep-frontend/src/main.tsx                |  11 +-
 nextstep-frontend/src/pages/Chat.css          |  90 ++++--
 nextstep-frontend/src/pages/Chat.tsx          | 303 +++++++++++++++---
 nextstep-frontend/src/pages/Landing.tsx       | 257 ++++++++++++---
 nextstep-frontend/src/pages/Login.tsx         |  29 +-
 nextstep-frontend/src/pages/Quiz.tsx          |   4 +-
 nextstep-frontend/src/pages/Register.tsx      |  27 +-
 nextstep-frontend/src/theme.ts                | 162 ++++++++++
 15 files changed, 1195 insertions(+), 425 deletions(-)
 create mode 100644 nextstep-frontend/src/contexts/ThemeContext.tsx
 create mode 100644 nextstep-frontend/src/theme.ts

diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx
index 7995990..087a83e 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -16,95 +16,67 @@ import Layout from './components/Layout';
 import MainDashboard from './pages/MainDashboard';
 import Quiz from './pages/Quiz';
 import Landing from './pages/Landing';
-import { Box, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#0984E3',
-    },
-    secondary: {
-      main: '#00B894',
-    },
-    background: {
-      default: '#FFFFFF',
-      paper: '#F8F9FA',
-    },
-  },
-  typography: {
-    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  },
-  shape: {
-    borderRadius: 12,
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: 'none',
-          fontWeight: 500,
-        },
-      },
-    },
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.08)',
-          transition: 'all 0.3s ease',
-          '&:hover': {
-            transform: 'translateY(-2px)',
-            boxShadow: '0 8px 12px rgba(0, 0, 0, 0.08)',
-          },
-        },
-      },
-    },
-  },
-});
+import { Box, CssBaseline } from '@mui/material';
+import { ThemeProvider } from './contexts/ThemeContext';
 
 const App: React.FC = () => {
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider>
       <CssBaseline />
       <Router>
-        <Routes>
-          {/* Public Routes */}
-          <Route path="/" element={<Landing />} />
-          <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
-          <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
-          
-          {/* Protected Routes */}
-          <Route
-            path="/*"
-            element={
-              <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
-                <LeftBar />
-                <Box
-                  component="main"
-                  sx={{
-                    flexGrow: 1,
-                    p: 3,
-                    width: { sm: `calc(100% - 240px)` },
-                    ml: { sm: '240px' },
-                    transition: 'margin 0.3s ease',
-                  }}
-                >
-                  <Routes>
-                    <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
-                    <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
-                    <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
-                    <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
-                    <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
-                    <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
-                    <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
-                    <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
-                    <Route path="*" element={<Navigate to="/" />} />
-                  </Routes>
-                </Box>
-              </Box>
-            }
-          />
-        </Routes>
-        <Footer />
+        <Box sx={{ 
+          display: 'flex', 
+          flexDirection: 'column', 
+          minHeight: '100vh',
+          bgcolor: 'background.default',
+        }}>
+          <Box sx={{ 
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
+            <Routes>
+              {/* Public Routes */}
+              <Route path="/" element={<Landing />} />
+              <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
+              <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
+              
+              {/* Protected Routes */}
+              <Route
+                path="/*"
+                element={
+                  <Box sx={{ display: 'flex', flex: 1 }}>
+                    <LeftBar />
+                    <Box
+                      component="main"
+                      sx={{
+                        flexGrow: 1,
+                        p: 3,
+                        width: '100%',
+                        maxWidth: '1200px',
+                        mx: 'auto',
+                        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                      }}
+                    >
+                      <Routes>
+                        <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
+                        <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
+                        <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
+                        <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
+                        <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
+                        <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
+                        <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
+                        <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
+                        <Route path="*" element={<Navigate to="/" />} />
+                      </Routes>
+                    </Box>
+                  </Box>
+                }
+              />
+            </Routes>
+          </Box>
+          <Footer />
+        </Box>
       </Router>
     </ThemeProvider>
   );
diff --git a/nextstep-frontend/src/components/DividedList.tsx b/nextstep-frontend/src/components/DividedList.tsx
index c97ba73..ab16120 100644
--- a/nextstep-frontend/src/components/DividedList.tsx
+++ b/nextstep-frontend/src/components/DividedList.tsx
@@ -37,8 +37,12 @@ const DividedList: React.FC<DividedListProps> = ({ onlineUsers, onUserClick, dis
           width: '100%',
           maxWidth: 360,
           bgcolor: 'background.paper',
-          borderRadius: 1,
-          boxShadow: 1,
+          borderRadius: 2,
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+          },
         }}
       >
         {onlineUsers.map((user, index) => (
@@ -48,12 +52,14 @@ const DividedList: React.FC<DividedListProps> = ({ onlineUsers, onUserClick, dis
               onClick={() => handleUserClick(user)}
               disabled={disabled}
               sx={{
-                py: 1,
+                py: 1.5,
                 px: 2,
                 backgroundColor: user.id === selectedUserId ? 'primary.main' : 'transparent',
                 color: user.id === selectedUserId ? 'primary.contrastText' : 'text.primary',
+                transition: 'all 0.3s ease',
                 '&:hover': {
                   backgroundColor: user.id === selectedUserId ? 'primary.dark' : 'action.hover',
+                  transform: 'translateX(4px)',
                 },
                 '&.Mui-disabled': {
                   opacity: 0.5,
@@ -64,7 +70,14 @@ const DividedList: React.FC<DividedListProps> = ({ onlineUsers, onUserClick, dis
                 <Avatar
                   alt={user.email}
                   src="/static/images/avatar/1.jpg"
-                  sx={{ width: 32, height: 32 }}
+                  sx={{ 
+                    width: 36, 
+                    height: 36,
+                    transition: 'all 0.3s ease',
+                    '&:hover': {
+                      transform: 'scale(1.1)',
+                    },
+                  }}
                 />
               </ListItemAvatar>
               <ListItemText
@@ -73,6 +86,9 @@ const DividedList: React.FC<DividedListProps> = ({ onlineUsers, onUserClick, dis
                   fontSize: '0.875rem',
                   fontWeight: user.id === selectedUserId ? 600 : 400,
                 }}
+                sx={{
+                  transition: 'all 0.3s ease',
+                }}
               />
             </ListItemButton>
           </div>
diff --git a/nextstep-frontend/src/components/Footer.tsx b/nextstep-frontend/src/components/Footer.tsx
index 01b825a..5fb4ac1 100644
--- a/nextstep-frontend/src/components/Footer.tsx
+++ b/nextstep-frontend/src/components/Footer.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import { Box, Container, Typography, Link, Stack } from '@mui/material';
-import { GitHub, LinkedIn, Twitter } from '@mui/icons-material';
+import { Box, Container, Typography, Link, useTheme, useMediaQuery } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
 
 const Footer: React.FC = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
   return (
     <Box
       component="footer"
@@ -10,75 +13,109 @@ const Footer: React.FC = () => {
         py: 3,
         px: 2,
         mt: 'auto',
-        backgroundColor: 'background.paper',
+        backgroundColor: theme.palette.mode === 'dark' ? 'background.paper' : 'background.default',
         borderTop: '1px solid',
         borderColor: 'divider',
+        width: '100%',
       }}
     >
       <Container maxWidth="lg">
-        <Stack
-          direction={{ xs: 'column', sm: 'row' }}
-          spacing={{ xs: 2, sm: 4 }}
-          justifyContent="space-between"
-          alignItems="center"
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            justifyContent: 'space-between',
+            alignItems: isMobile ? 'center' : 'flex-start',
+            gap: 2,
+          }}
         >
-          <Typography
-            variant="body2"
-            color="text.secondary"
-            sx={{ fontWeight: 500 }}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: isMobile ? 'center' : 'flex-start',
+              gap: 1,
+            }}
+          >
+            <Typography variant="h6" color="text.primary" sx={{ fontWeight: 600 }}>
+              NextStep
+            </Typography>
+            <Typography variant="body2" color="text.secondary" align={isMobile ? 'center' : 'left'}>
+              Empowering your career journey
+            </Typography>
+          </Box>
+
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: isMobile ? 'column' : 'row',
+              gap: isMobile ? 2 : 4,
+              alignItems: isMobile ? 'center' : 'flex-start',
+            }}
           >
-            © {new Date().getFullYear()} Next Step. All rights reserved.
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Typography variant="subtitle2" color="text.primary" sx={{ fontWeight: 600 }}>
+                Quick Links
+              </Typography>
+              <Link component={RouterLink} to="/feed" color="text.secondary" underline="hover">
+                Feed
+              </Link>
+              <Link component={RouterLink} to="/profile" color="text.secondary" underline="hover">
+                Profile
+              </Link>
+              <Link component={RouterLink} to="/chat" color="text.secondary" underline="hover">
+                Chat
+              </Link>
+            </Box>
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Typography variant="subtitle2" color="text.primary" sx={{ fontWeight: 600 }}>
+                Resources
+              </Typography>
+              <Link component={RouterLink} to="/resume" color="text.secondary" underline="hover">
+                Resume Builder
+              </Link>
+              <Link component={RouterLink} to="/quiz" color="text.secondary" underline="hover">
+                Career Quiz
+              </Link>
+              <Link component={RouterLink} to="/main-dashboard" color="text.secondary" underline="hover">
+                Dashboard
+              </Link>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            mt: 3,
+            pt: 2,
+            borderTop: '1px solid',
+            borderColor: 'divider',
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          <Typography variant="body2" color="text.secondary" align={isMobile ? 'center' : 'left'}>
+            © {new Date().getFullYear()} NextStep. All rights reserved.
           </Typography>
-          
-          <Stack
-            direction="row"
-            spacing={2}
-            alignItems="center"
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 2,
+              justifyContent: isMobile ? 'center' : 'flex-end',
+            }}
           >
-            <Link
-              href="https://github.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              color="text.secondary"
-              sx={{
-                '&:hover': {
-                  color: 'primary.main',
-                },
-                transition: 'color 0.2s ease',
-              }}
-            >
-              <GitHub />
-            </Link>
-            <Link
-              href="https://linkedin.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              color="text.secondary"
-              sx={{
-                '&:hover': {
-                  color: 'primary.main',
-                },
-                transition: 'color 0.2s ease',
-              }}
-            >
-              <LinkedIn />
+            <Link href="/terms" color="text.secondary" underline="hover">
+              Terms
             </Link>
-            <Link
-              href="https://twitter.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              color="text.secondary"
-              sx={{
-                '&:hover': {
-                  color: 'primary.main',
-                },
-                transition: 'color 0.2s ease',
-              }}
-            >
-              <Twitter />
+            <Link href="/privacy" color="text.secondary" underline="hover">
+              Privacy
             </Link>
-          </Stack>
-        </Stack>
+          </Box>
+        </Box>
       </Container>
     </Box>
   );
diff --git a/nextstep-frontend/src/components/Layout.tsx b/nextstep-frontend/src/components/Layout.tsx
index d30ed8a..f421607 100644
--- a/nextstep-frontend/src/components/Layout.tsx
+++ b/nextstep-frontend/src/components/Layout.tsx
@@ -13,12 +13,12 @@ const Layout: React.FC<LayoutProps> = ({
 }) => {
   return (
     <Box
+      component="main"
       sx={{
-        width: '100%',
-        minHeight: '100%',
         display: 'flex',
         flexDirection: 'column',
-        transition: 'all 0.3s ease',
+        minHeight: '100vh',
+        width: '100%',
       }}
     >
       <Container
diff --git a/nextstep-frontend/src/components/LeftBar.tsx b/nextstep-frontend/src/components/LeftBar.tsx
index a930afb..0bebfc4 100644
--- a/nextstep-frontend/src/components/LeftBar.tsx
+++ b/nextstep-frontend/src/components/LeftBar.tsx
@@ -1,170 +1,233 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Box, Drawer, List, ListItem, ListItemIcon, ListItemText, IconButton, Tooltip, Divider } from '@mui/material';
-import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz, Menu, ChevronLeft } from '@mui/icons-material';
+import { Box, Drawer, List, ListItem, ListItemIcon, ListItemText, IconButton, Tooltip, Divider, useTheme as useMuiTheme, ListItemButton } from '@mui/material';
+import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz, Menu, ChevronLeft, LightMode, DarkMode } from '@mui/icons-material';
 import { getUserAuth, removeUserAuth } from "../handlers/userAuth.ts";
 import api from "../serverApi.ts";
 import logo from '../../assets/NextStep.png';
+import { useTheme } from '../contexts/ThemeContext';
 
 const LeftBar: React.FC = () => {
-  const userAuthRef = useRef(getUserAuth());
   const navigate = useNavigate();
   const location = useLocation();
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
+  const { isDarkMode, toggleTheme } = useTheme();
+  const muiTheme = useMuiTheme();
 
   useEffect(() => {
-    if (!userAuthRef.current) {
-      setCollapsed(true);
-    }
-  }, [userAuthRef.current]);
+    const handleResize = () => {
+      if (window.innerWidth < 600) {
+        setCollapsed(true);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   const handleLogout = async () => {
-    if (userAuthRef.current) {
-      await api.post(`/auth/logout`, {
-        refreshToken: userAuthRef.current.refreshToken,
-      });
+    try {
+      const userAuth = getUserAuth();
+      if (userAuth) {
+        await api.post('/auth/logout', {}, {
+          headers: { Authorization: `Bearer ${userAuth.accessToken}` }
+        });
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
       removeUserAuth();
+      navigate('/login');
     }
-    navigate('/logout');
-  };
-
-  const toggleCollapse = () => {
-    setCollapsed(!collapsed);
   };
 
   const menuItems = [
-    { path: '/main-dashboard', icon: <Home />, text: 'Home' },
-    { path: '/resume', icon: <DocumentScannerTwoTone />, text: 'Resume' },
-    { path: '/quiz', icon: <Quiz />, text: 'Quiz' },
-    { path: '/feed', icon: <Feed />, text: 'Feed' },
-    { path: '/chat', icon: <Message />, text: 'Chat' },
-    { path: '/profile', icon: <Person />, text: 'Profile' },
+    { text: 'Dashboard', icon: <Home />, path: '/main-dashboard' },
+    { text: 'Feed', icon: <Feed />, path: '/feed' },
+    { text: 'Profile', icon: <Person />, path: '/profile' },
+    { text: 'Chat', icon: <Message />, path: '/chat' },
+    { text: 'Resume', icon: <DocumentScannerTwoTone />, path: '/resume' },
+    { text: 'Quiz', icon: <Quiz />, path: '/quiz' },
   ];
 
   return (
     <Drawer
       variant="permanent"
       sx={{
-        width: collapsed ? 72 : 240,
+        width: collapsed ? 64 : 240,
         flexShrink: 0,
-        [`& .MuiDrawer-paper`]: {
-          width: collapsed ? 72 : 240,
+        position: 'fixed',
+        '& .MuiDrawer-paper': {
+          width: collapsed ? 64 : 240,
           boxSizing: 'border-box',
-          backgroundColor: 'background.paper',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          bgcolor: 'background.paper',
           borderRight: '1px solid',
           borderColor: 'divider',
-          transition: 'width 0.3s ease',
           overflowX: 'hidden',
+          '&:hover': {
+            width: 240,
+            boxShadow: '4px 0 20px rgba(0, 0, 0, 0.1)',
+            '& .logo-text': {
+              opacity: 1,
+              transform: 'translateX(0)',
+            },
+            '& .menu-text': {
+              opacity: 1,
+              transform: 'translateX(0)',
+            },
+          },
         },
       }}
     >
-      <Box
-        sx={{
-          display: 'flex',
+      <Box 
+        sx={{ 
+          p: 2, 
+          display: 'flex', 
+          justifyContent: 'center', 
           alignItems: 'center',
-          justifyContent: collapsed ? 'center' : 'space-between',
-          p: 2,
-          minHeight: 64,
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         }}
       >
-        {!collapsed && (
-          <Box
-            component="img"
-            src={logo}
-            alt="Logo"
-            sx={{ 
-              height: 40,
-              width: 'auto',
-              transition: 'all 0.3s ease',
-            }}
-          />
-        )}
-        <IconButton 
-          onClick={toggleCollapse} 
+        <Box
+          component="img"
+          src={logo}
+          alt="NextStep"
+          className="logo-text"
           sx={{ 
-            color: 'text.secondary',
-            '&:hover': {
-              backgroundColor: 'action.hover',
-            },
+            height: 40, 
+            cursor: 'pointer',
+            opacity: 1,
+            transform: collapsed ? 'scale(0.8)' : 'scale(1)',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
           }}
-        >
-          {collapsed ? <Menu /> : <ChevronLeft />}
-        </IconButton>
+          onClick={() => navigate('/')}
+        />
       </Box>
       <Divider />
-      <List sx={{ px: 1 }}>
+      <List>
         {menuItems.map((item) => (
-          <Tooltip 
-            key={item.path} 
-            title={collapsed ? item.text : ''} 
-            placement="right"
-          >
-            <ListItem
-              button
+          <ListItem key={item.text} disablePadding>
+            <ListItemButton
+              selected={location.pathname === item.path}
               onClick={() => navigate(item.path)}
               sx={{
-                borderRadius: 2,
-                mb: 0.5,
-                backgroundColor: location.pathname === item.path ? 'action.selected' : 'transparent',
+                minHeight: 48,
+                justifyContent: collapsed ? 'center' : 'initial',
+                px: 2.5,
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                '&.Mui-selected': {
+                  bgcolor: 'primary.main',
+                  color: 'primary.contrastText',
+                  '&:hover': {
+                    bgcolor: 'primary.dark',
+                  },
+                  '& .MuiListItemIcon-root': {
+                    color: 'inherit',
+                  },
+                },
                 '&:hover': {
-                  backgroundColor: 'action.hover',
+                  bgcolor: 'action.hover',
+                  transform: 'translateX(4px)',
                 },
-                transition: 'all 0.2s ease',
               }}
             >
               <ListItemIcon
                 sx={{
                   minWidth: collapsed ? 'auto' : 40,
-                  color: location.pathname === item.path ? 'primary.main' : 'text.secondary',
+                  mr: collapsed ? 0 : 2,
+                  color: location.pathname === item.path ? 'inherit' : 'text.secondary',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                 }}
               >
                 {item.icon}
               </ListItemIcon>
-              {!collapsed && (
-                <ListItemText 
-                  primary={item.text}
-                  primaryTypographyProps={{
-                    color: location.pathname === item.path ? 'primary.main' : 'text.primary',
-                    fontWeight: location.pathname === item.path ? 600 : 400,
-                  }}
-                />
-              )}
-            </ListItem>
-          </Tooltip>
+              <ListItemText 
+                primary={item.text}
+                className="menu-text"
+                sx={{
+                  opacity: collapsed ? 0 : 1,
+                  transform: collapsed ? 'translateX(-20px)' : 'translateX(0)',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                  ml: 1,
+                }}
+              />
+            </ListItemButton>
+          </ListItem>
         ))}
       </List>
       <Box sx={{ flexGrow: 1 }} />
       <Divider />
       <List sx={{ px: 1 }}>
+        <Tooltip title={collapsed ? 'Theme' : ''} placement="right">
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={toggleTheme}
+              sx={{
+                borderRadius: 2,
+                mb: 0.5,
+                '&:hover': {
+                  backgroundColor: 'action.hover',
+                },
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: collapsed ? 'auto' : 40,
+                  mr: collapsed ? 0 : 2,
+                  color: 'text.secondary',
+                }}
+              >
+                {isDarkMode ? <LightMode /> : <DarkMode />}
+              </ListItemIcon>
+              <ListItemText 
+                primary={isDarkMode ? 'Light Mode' : 'Dark Mode'}
+                className="menu-text"
+                sx={{
+                  opacity: collapsed ? 0 : 1,
+                  transform: collapsed ? 'translateX(-20px)' : 'translateX(0)',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                  ml: 1,
+                }}
+              />
+            </ListItemButton>
+          </ListItem>
+        </Tooltip>
         <Tooltip title={collapsed ? 'Logout' : ''} placement="right">
-          <ListItem
-            button
-            onClick={handleLogout}
-            sx={{
-              borderRadius: 2,
-              mb: 0.5,
-              '&:hover': {
-                backgroundColor: 'action.hover',
-              },
-              transition: 'all 0.2s ease',
-            }}
-          >
-            <ListItemIcon
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={handleLogout}
               sx={{
-                minWidth: collapsed ? 'auto' : 40,
-                color: 'text.secondary',
+                borderRadius: 2,
+                mb: 0.5,
+                '&:hover': {
+                  backgroundColor: 'action.hover',
+                },
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
               }}
             >
-              <Logout />
-            </ListItemIcon>
-            {!collapsed && (
+              <ListItemIcon
+                sx={{
+                  minWidth: collapsed ? 'auto' : 40,
+                  mr: collapsed ? 0 : 2,
+                  color: 'text.secondary',
+                }}
+              >
+                <Logout />
+              </ListItemIcon>
               <ListItemText 
                 primary="Logout"
-                primaryTypographyProps={{
-                  color: 'text.primary',
+                className="menu-text"
+                sx={{
+                  opacity: collapsed ? 0 : 1,
+                  transform: collapsed ? 'translateX(-20px)' : 'translateX(0)',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                  ml: 1,
                 }}
               />
-            )}
+            </ListItemButton>
           </ListItem>
         </Tooltip>
       </List>
diff --git a/nextstep-frontend/src/contexts/ThemeContext.tsx b/nextstep-frontend/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..b77c12c
--- /dev/null
+++ b/nextstep-frontend/src/contexts/ThemeContext.tsx
@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material';
+import { lightTheme, darkTheme } from '../theme';
+
+type ThemeContextType = {
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextType>({
+  isDarkMode: false,
+  toggleTheme: () => {},
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme === 'dark';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+
+  const toggleTheme = () => {
+    setIsDarkMode((prev) => !prev);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      <MuiThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+        {children}
+      </MuiThemeProvider>
+    </ThemeContext.Provider>
+  );
+}; 
\ No newline at end of file
diff --git a/nextstep-frontend/src/index.css b/nextstep-frontend/src/index.css
index 2514a69..4b6a8f6 100644
--- a/nextstep-frontend/src/index.css
+++ b/nextstep-frontend/src/index.css
@@ -353,70 +353,87 @@ template {
 /* ------------------------------------ Normalize.css End --------------------------------- */
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  --color-1: #0984E3;
+  --color-2: #00B894;
+  --color-3: #74B9FF;
+  --color-4: #55EFC4;
+  --color-5: #2D3436;
+  --color-6: #636E72;
+  --color-7: #FFFFFF;
+  --color-8: #F8F9FA;
+  --color-9: #1E1E1E;
+  --color-10: #2D2D2D;
+  --color-11: #B2BEC3;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
+html, body {
+  height: 100%;
+  width: 100%;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+#root {
+  height: 100%;
+  width: 100%;
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+  overflow-x: hidden;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+a {
+  text-decoration: none;
+  color: inherit;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
-  transition: border-color 0.25s;
+  border: none;
+  outline: none;
+  background: none;
+  font-family: inherit;
 }
-button:hover {
-  border-color: #646cff;
+
+input, textarea {
+  font-family: inherit;
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Dark Mode Scrollbar */
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    background: #555;
   }
-  button {
-    background-color: #f9f9f9;
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #777;
   }
 }
diff --git a/nextstep-frontend/src/main.tsx b/nextstep-frontend/src/main.tsx
index 21939d7..2339d59 100644
--- a/nextstep-frontend/src/main.tsx
+++ b/nextstep-frontend/src/main.tsx
@@ -1,11 +1,10 @@
+import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import CssBaseline from '@mui/material/CssBaseline';
+import './index.css';
 
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
-  <>
-    <CssBaseline />
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
     <App />
-  </>
+  </React.StrictMode>
 );
diff --git a/nextstep-frontend/src/pages/Chat.css b/nextstep-frontend/src/pages/Chat.css
index 977cb5d..76144dd 100644
--- a/nextstep-frontend/src/pages/Chat.css
+++ b/nextstep-frontend/src/pages/Chat.css
@@ -2,8 +2,8 @@
     display: flex;
     flex-direction: column;
     padding: 20px;
-    background-color: #f9f9f9;
-    border: 1px solid #ccc;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border);
     border-radius: 8px;
 }
 
@@ -11,64 +11,86 @@
     overflow-y: auto;
 }
 
-.message-input {
-    display: flex;
-    margin-bottom: 10px;
-}
-
-.message-input input {
-    flex: 1;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    margin-right: 10px;
-}
-
-.message-input button {
-    padding: 10px 15px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.message-input button:hover {
-    background-color: #0056b3;
-}
-
 .chat-messages {
     flex: 1;
     overflow-y: auto;
     margin-bottom: 10px;
     padding: 10px;
-    background-color: #fff;
-    border: 1px solid #ccc;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
     border-radius: 4px;
-    max-height: 400px; /* Adjust height as needed */
+    max-height: 400px;
 }
 
 .message {
     margin-bottom: 10px;
+    padding: 8px;
+    border-radius: 4px;
+    background-color: var(--color-background);
 }
 
 .message-header {
     display: flex;
     justify-content: space-between;
     font-weight: bold;
+    color: var(--color-text);
 }
 
 .message-user {
-    color: #007bff; /* User name color */
+    color: var(--color-primary);
 }
 
 .message-time {
     font-size: 0.8em;
-    color: #888;
+    color: var(--color-text-secondary);
 }
 
 .message-content {
-    margin-top: 5px; /* Space between header and content */
+    margin-top: 5px;
+    color: var(--color-text);
+}
+
+.no-messages {
+    text-align: center;
+    color: var(--color-text-secondary);
+    padding: 20px;
+}
+
+/* Dark mode specific styles */
+@media (prefers-color-scheme: dark) {
+    .chat-container {
+        background-color: var(--color-9);
+        border-color: var(--color-10);
+    }
+
+    .chat-messages {
+        background-color: var(--color-10);
+        border-color: var(--color-10);
+    }
+
+    .message {
+        background-color: var(--color-9);
+    }
+
+    .message-header {
+        color: var(--color-7);
+    }
+
+    .message-user {
+        color: var(--color-3);
+    }
+
+    .message-time {
+        color: var(--color-11);
+    }
+
+    .message-content {
+        color: var(--color-7);
+    }
+
+    .no-messages {
+        color: var(--color-11);
+    }
 }
 
 .online-users {
diff --git a/nextstep-frontend/src/pages/Chat.tsx b/nextstep-frontend/src/pages/Chat.tsx
index 872ca5a..1bf664b 100644
--- a/nextstep-frontend/src/pages/Chat.tsx
+++ b/nextstep-frontend/src/pages/Chat.tsx
@@ -3,10 +3,22 @@ import './Chat.css';
 import { config } from '../config';
 import { io, Socket } from "socket.io-client";
 import { LoginResponse } from '../models/LoginResponse';
-import DividedList from '../components/DividedList';
 import { Room } from '../models/Room';
 import axios from 'axios';
-import { Box, CircularProgress, Alert, Snackbar } from '@mui/material';
+import { 
+  Box, 
+  CircularProgress, 
+  Alert, 
+  Snackbar, 
+  TextField, 
+  Button, 
+  Typography,
+  useTheme,
+  Paper,
+  Divider
+} from '@mui/material';
+import { Send as SendIcon } from '@mui/icons-material';
+import DividedList from '../components/DividedList';
 
 const Chat: React.FC = () => {
   const [messageContent, setMessageContent] = useState('');
@@ -15,6 +27,7 @@ const Chat: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const theme = useTheme();
 
   const usersMetadataCacheRef = useRef(new Set<LoginResponse>());
   const socketRef = useRef<Socket | null>(null);
@@ -44,12 +57,10 @@ const Chat: React.FC = () => {
     }
 
     try {
-      // Cleanup existing socket if any
       if (socketRef.current) {
         socketRef.current.disconnect();
       }
 
-      // Create new socket connection
       socketRef.current = io(config.app.backend_url(), {
         extraHeaders: {
           authorization: `Bearer ${userAuthRef.current.accessToken}`
@@ -60,7 +71,6 @@ const Chat: React.FC = () => {
         timeout: 10000,
       });
 
-      // Connection event handlers
       socketRef.current.on('connect', () => {
         setIsConnected(true);
         setError(null);
@@ -78,7 +88,6 @@ const Chat: React.FC = () => {
         setError('Disconnected from server. Attempting to reconnect...');
       });
 
-      // Message handlers
       socketRef.current.on(config.socketMethods.messageFromServer, ({ roomId, message }: any) => {
         setRoom(prevRoom => {
           if (prevRoom && prevRoom._id === roomId) {
@@ -101,7 +110,6 @@ const Chat: React.FC = () => {
     }
   }, []);
 
-  // Initial connection
   useEffect(() => {
     if (userAuthRef.current) {
       connectHandler();
@@ -149,7 +157,6 @@ const Chat: React.FC = () => {
     }
   };
 
-  // Scroll to bottom when messages change
   useEffect(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -165,7 +172,13 @@ const Chat: React.FC = () => {
   }
 
   return (
-    <Box sx={{ maxWidth: 800, mx: 'auto', p: 3 }}>
+    <Box sx={{ 
+      maxWidth: '100%', 
+      mx: 'auto', 
+      p: 3,
+      display: 'flex',
+      gap: 3,
+    }}>
       <Snackbar
         open={!!error}
         autoHideDuration={6000}
@@ -177,55 +190,263 @@ const Chat: React.FC = () => {
         </Alert>
       </Snackbar>
 
-      <div className="chat-container">
-        <div className="message-input">
-          <input
-            type="text"
-            onChange={(e) => setMessageContent(e.target.value)}
-            value={messageContent}
+      <Paper 
+        elevation={3}
+        sx={{
+          p: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          bgcolor: 'background.paper',
+          borderRadius: 3,
+          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            boxShadow: '0 12px 48px rgba(0, 0, 0, 0.12)',
+          },
+          flex: 1,
+          maxWidth: '1200px',
+        }}
+      >
+        <Box className="message-input" sx={{ 
+          display: 'flex', 
+          gap: 2,
+          bgcolor: 'background.default',
+          p: 2,
+          borderRadius: 2,
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+        }}>
+          <TextField
+            fullWidth
+            variant="outlined"
             placeholder="Type your message..."
+            value={messageContent}
+            onChange={(e) => setMessageContent(e.target.value)}
             disabled={!isConnected}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessageHandler();
+              }
+            }}
+            sx={{
+              '& .MuiOutlinedInput-root': {
+                bgcolor: 'background.paper',
+                borderRadius: 2,
+                transition: 'all 0.3s ease',
+                '& fieldset': {
+                  borderColor: 'divider',
+                },
+                '&:hover fieldset': {
+                  borderColor: 'primary.main',
+                },
+                '&.Mui-focused fieldset': {
+                  borderColor: 'primary.main',
+                  borderWidth: '1px',
+                },
+                '& input': {
+                  color: 'text.primary',
+                  '&::placeholder': {
+                    color: 'text.secondary',
+                    opacity: 0.7,
+                  },
+                },
+              },
+            }}
           />
-          <button 
+          <Button
+            variant="contained"
+            color="primary"
             onClick={sendMessageHandler}
             disabled={!isConnected || !messageContent.trim()}
+            endIcon={<SendIcon />}
+            sx={{ 
+              borderRadius: 2,
+              px: 3,
+              minWidth: '100px',
+              transition: 'all 0.3s ease',
+              '&:hover': {
+                transform: 'translateY(-2px)',
+                boxShadow: '0 4px 12px rgba(9, 132, 227, 0.2)',
+              },
+              '&.Mui-disabled': {
+                bgcolor: 'action.disabledBackground',
+                color: 'action.disabled',
+              },
+            }}
           >
             Send
-          </button>
-        </div>
+          </Button>
+        </Box>
 
-        <div className="chat-messages">
+        <Paper
+          className="chat-messages"
+          elevation={0}
+          sx={{
+            bgcolor: 'background.default',
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 2,
+            p: 2,
+            maxHeight: '60vh',
+            overflowY: 'auto',
+            '&::-webkit-scrollbar': {
+              width: '8px',
+            },
+            '&::-webkit-scrollbar-track': {
+              background: 'transparent',
+            },
+            '&::-webkit-scrollbar-thumb': {
+              background: 'rgba(0, 0, 0, 0.1)',
+              borderRadius: '4px',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+              background: 'rgba(0, 0, 0, 0.2)',
+            },
+          }}
+        >
           {room.messages.length === 0 ? (
-            <div className="no-messages">
-              <p>No messages yet. Start the conversation!</p>
-            </div>
+            <Box className="no-messages" sx={{ py: 4 }}>
+              <Typography variant="body1" color="text.secondary" sx={{ opacity: 0.7 }}>
+                No messages yet. Start the conversation!
+              </Typography>
+            </Box>
           ) : (
             room.messages.map((m: any, index: number) => (
-              <div key={index} className="message">
-                <div className="message-header">
-                  <span className="message-user">
+              <Box 
+                key={index} 
+                className="message"
+                sx={{
+                  mb: 2,
+                  p: 2,
+                  borderRadius: 2,
+                  maxWidth: '80%',
+                  ml: m?.userId === userAuthRef.current?.id ? 'auto' : 0,
+                  mr: m?.userId === userAuthRef.current?.id ? 0 : 'auto',
+                  bgcolor: m?.userId === userAuthRef.current?.id ? 'primary.main' : 'background.paper',
+                  color: m?.userId === userAuthRef.current?.id ? 'primary.contrastText' : 'text.primary',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+                  transition: 'all 0.3s ease',
+                  '&:hover': {
+                    transform: 'translateY(-2px)',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+                  },
+                }}
+              >
+                <Box className="message-header" sx={{ mb: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <Typography
+                    variant="subtitle2"
+                    sx={{
+                      color: m?.userId === userAuthRef.current?.id ? 'inherit' : 'primary.main',
+                      fontWeight: 600,
+                    }}
+                    className="message-user"
+                  >
                     {Array.from(usersMetadataCacheRef.current).find(u => u.id === m?.userId)?.email}
-                  </span>
-                  <span className="message-time">
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: m?.userId === userAuthRef.current?.id ? 'inherit' : 'text.secondary',
+                      opacity: 0.8,
+                    }}
+                    className="message-time"
+                  >
                     {new Date(m?.createdAt).toLocaleTimeString()}
-                  </span>
-                </div>
-                <div className="message-content">{m?.content}</div>
-              </div>
+                  </Typography>
+                </Box>
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color: 'inherit',
+                    lineHeight: 1.5,
+                  }}
+                  className="message-content"
+                >
+                  {m?.content}
+                </Typography>
+              </Box>
             ))
           )}
           <div ref={messagesEndRef} />
-        </div>
+        </Paper>
+      </Paper>
 
-        <div className="online-users">
-          <h3>Online Users:</h3>
-          <DividedList 
-            onlineUsers={onlineUsers} 
-            onUserClick={onUserClick}
-            disabled={!isConnected}
-          />
-        </div>
-      </div>
+      <Paper
+        elevation={3}
+        sx={{
+          width: 300,
+          p: 2,
+          bgcolor: 'background.paper',
+          borderRadius: 3,
+          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            boxShadow: '0 12px 48px rgba(0, 0, 0, 0.12)',
+          },
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          height: 'fit-content',
+          position: 'sticky',
+          top: 24,
+        }}
+      >
+        <Box sx={{ 
+          display: 'flex', 
+          alignItems: 'center', 
+          gap: 1,
+          pb: 1,
+          borderBottom: 1,
+          borderColor: 'divider',
+        }}>
+          <Typography 
+            variant="h6" 
+            color="text.primary" 
+            sx={{ 
+              fontWeight: 600,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+            }}
+          >
+            Online Users
+          </Typography>
+          <Box sx={{ 
+            ml: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            color: 'success.main',
+            fontSize: '0.875rem',
+          }}>
+            <Box sx={{ 
+              width: 8, 
+              height: 8, 
+              borderRadius: '50%', 
+              bgcolor: 'success.main',
+              animation: 'pulse 2s infinite',
+              '@keyframes pulse': {
+                '0%': {
+                  boxShadow: '0 0 0 0 rgba(0, 200, 83, 0.4)',
+                },
+                '70%': {
+                  boxShadow: '0 0 0 6px rgba(0, 200, 83, 0)',
+                },
+                '100%': {
+                  boxShadow: '0 0 0 0 rgba(0, 200, 83, 0)',
+                },
+              },
+            }} />
+            {onlineUsers.length} online
+          </Box>
+        </Box>
+        <DividedList 
+          onlineUsers={onlineUsers} 
+          onUserClick={onUserClick}
+          disabled={!isConnected}
+        />
+      </Paper>
     </Box>
   );
 };
diff --git a/nextstep-frontend/src/pages/Landing.tsx b/nextstep-frontend/src/pages/Landing.tsx
index 27286ec..55b2dc5 100644
--- a/nextstep-frontend/src/pages/Landing.tsx
+++ b/nextstep-frontend/src/pages/Landing.tsx
@@ -11,6 +11,8 @@ import {
   Stack,
   useTheme,
   useMediaQuery,
+  Paper,
+  IconButton,
 } from '@mui/material';
 import {
   School,
@@ -18,11 +20,15 @@ import {
   Psychology,
   Chat,
   ArrowForward,
+  LightMode,
+  DarkMode,
 } from '@mui/icons-material';
+import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Landing: React.FC = () => {
   const navigate = useNavigate();
   const theme = useTheme();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const features = [
@@ -49,16 +55,57 @@ const Landing: React.FC = () => {
   ];
 
   return (
-    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+    <>
       {/* Hero Section */}
       <Box
         sx={{
           pt: { xs: 8, md: 12 },
           pb: { xs: 8, md: 12 },
-          background: `linear-gradient(45deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
+          background: 'linear-gradient(45deg, #0984E3 0%, #00B894 100%)',
           color: 'white',
+          position: 'relative',
+          overflow: 'hidden',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%)',
+            animation: 'pulse 8s ease-in-out infinite',
+          },
+          '@keyframes pulse': {
+            '0%': {
+              transform: 'scale(1)',
+              opacity: 0.5,
+            },
+            '50%': {
+              transform: 'scale(1.5)',
+              opacity: 0.2,
+            },
+            '100%': {
+              transform: 'scale(1)',
+              opacity: 0.5,
+            },
+          },
         }}
       >
+        <IconButton
+          onClick={toggleTheme}
+          sx={{
+            position: 'absolute',
+            top: 16,
+            right: 16,
+            color: 'white',
+            '&:hover': {
+              bgcolor: 'rgba(255, 255, 255, 0.1)',
+              transform: 'scale(1.1)',
+            },
+          }}
+        >
+          {isDarkMode ? <LightMode /> : <DarkMode />}
+        </IconButton>
         <Container maxWidth="lg">
           <Grid container spacing={4} alignItems="center">
             <Grid item xs={12} md={6}>
@@ -66,21 +113,39 @@ const Landing: React.FC = () => {
                 variant="h1"
                 sx={{
                   fontSize: { xs: '2.5rem', md: '3.5rem' },
-                  fontWeight: 700,
+                  fontWeight: 800,
                   mb: 2,
+                  animation: 'fadeInUp 0.8s ease-out',
+                  '@keyframes fadeInUp': {
+                    '0%': {
+                      opacity: 0,
+                      transform: 'translateY(20px)',
+                    },
+                    '100%': {
+                      opacity: 1,
+                      transform: 'translateY(0)',
+                    },
+                  },
                 }}
               >
                 Take Your Next Step Towards Success
               </Typography>
               <Typography
                 variant="h5"
-                sx={{ mb: 4, opacity: 0.9 }}
+                sx={{
+                  mb: 4,
+                  opacity: 0.9,
+                  animation: 'fadeInUp 0.8s ease-out 0.2s both',
+                }}
               >
                 Your personalized career development platform that helps you navigate your professional journey with confidence.
               </Typography>
               <Stack
                 direction={{ xs: 'column', sm: 'row' }}
                 spacing={2}
+                sx={{
+                  animation: 'fadeInUp 0.8s ease-out 0.4s both',
+                }}
               >
                 <Button
                   variant="contained"
@@ -91,6 +156,7 @@ const Landing: React.FC = () => {
                     color: 'primary.main',
                     '&:hover': {
                       bgcolor: 'grey.100',
+                      transform: 'translateY(-2px)',
                     },
                   }}
                 >
@@ -106,6 +172,7 @@ const Landing: React.FC = () => {
                     '&:hover': {
                       borderColor: 'white',
                       bgcolor: 'rgba(255, 255, 255, 0.1)',
+                      transform: 'translateY(-2px)',
                     },
                   }}
                 >
@@ -123,6 +190,18 @@ const Landing: React.FC = () => {
                   maxWidth: 500,
                   height: 'auto',
                   display: { xs: 'none', md: 'block' },
+                  animation: 'float 6s ease-in-out infinite',
+                  '@keyframes float': {
+                    '0%': {
+                      transform: 'translateY(0px)',
+                    },
+                    '50%': {
+                      transform: 'translateY(-20px)',
+                    },
+                    '100%': {
+                      transform: 'translateY(0px)',
+                    },
+                  },
                 }}
               />
             </Grid>
@@ -135,38 +214,67 @@ const Landing: React.FC = () => {
         <Typography
           variant="h2"
           align="center"
-          sx={{ mb: 6, fontWeight: 700 }}
+          sx={{
+            mb: 6,
+            fontWeight: 800,
+            color: 'text.primary',
+            animation: 'fadeInUp 0.8s ease-out',
+          }}
         >
           Why Choose Next Step?
         </Typography>
         <Grid container spacing={4}>
           {features.map((feature, index) => (
             <Grid item xs={12} sm={6} md={3} key={index}>
-              <Card
+              <Paper
+                elevation={2}
                 sx={{
+                  p: 3,
                   height: '100%',
                   display: 'flex',
                   flexDirection: 'column',
-                  transition: 'transform 0.2s ease-in-out',
+                  alignItems: 'center',
+                  textAlign: 'center',
+                  bgcolor: 'background.paper',
+                  animation: `fadeInUp 0.8s ease-out ${index * 0.2}s both`,
                   '&:hover': {
                     transform: 'translateY(-8px)',
+                    boxShadow: '0 12px 40px rgba(0, 0, 0, 0.12)',
+                    '& .feature-icon': {
+                      transform: 'scale(1.1) rotate(5deg)',
+                    },
                   },
                 }}
               >
-                <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
-                  <Box sx={{ mb: 2 }}>{feature.icon}</Box>
-                  <Typography
-                    variant="h5"
-                    component="h3"
-                    sx={{ mb: 2, fontWeight: 600 }}
-                  >
-                    {feature.title}
-                  </Typography>
-                  <Typography color="text.secondary">
-                    {feature.description}
-                  </Typography>
-                </CardContent>
-              </Card>
+                <Box
+                  className="feature-icon"
+                  sx={{
+                    mb: 2,
+                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                  }}
+                >
+                  {feature.icon}
+                </Box>
+                <Typography
+                  variant="h6"
+                  component="h3"
+                  sx={{
+                    mb: 1,
+                    fontWeight: 600,
+                    color: 'text.primary',
+                  }}
+                >
+                  {feature.title}
+                </Typography>
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color: 'text.secondary',
+                  }}
+                >
+                  {feature.description}
+                </Typography>
+              </Paper>
             </Grid>
           ))}
         </Grid>
@@ -175,42 +283,115 @@ const Landing: React.FC = () => {
       {/* CTA Section */}
       <Box
         sx={{
-          py: { xs: 8, md: 12 },
-          bgcolor: 'grey.50',
+          py: { xs: 12, md: 16 },
+          position: 'relative',
+          overflow: 'hidden',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: theme.palette.mode === 'dark' 
+              ? 'linear-gradient(135deg, rgba(116, 185, 255, 0.1) 0%, rgba(85, 239, 196, 0.1) 100%)'
+              : 'linear-gradient(135deg, rgba(9, 132, 227, 0.1) 0%, rgba(0, 184, 148, 0.1) 100%)',
+            zIndex: 0,
+            animation: 'gradientShift 15s ease infinite',
+            '@keyframes gradientShift': {
+              '0%': {
+                backgroundPosition: '0% 50%',
+              },
+              '50%': {
+                backgroundPosition: '100% 50%',
+              },
+              '100%': {
+                backgroundPosition: '0% 50%',
+              },
+            },
+          },
         }}
       >
-        <Container maxWidth="md">
+        <Container maxWidth="md" sx={{ position: 'relative', zIndex: 1 }}>
           <Box
             sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
               textAlign: 'center',
-              p: { xs: 3, md: 6 },
-              borderRadius: 4,
-              bgcolor: 'background.paper',
-              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+              gap: 4,
+              animation: 'fadeInUp 0.8s ease-out',
             }}
           >
             <Typography
-              variant="h3"
-              sx={{ mb: 3, fontWeight: 700 }}
+              variant="h2"
+              component="h1"
+              sx={{
+                fontWeight: 800,
+                color: 'text.primary',
+                fontSize: { xs: '2.5rem', md: '3.5rem' },
+                lineHeight: 1.2,
+                mb: 2,
+                background: theme.palette.mode === 'dark'
+                  ? 'linear-gradient(135deg, #74B9FF 0%, #55EFC4 100%)'
+                  : 'linear-gradient(135deg, #0984E3 0%, #00B894 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                animation: 'gradientText 8s ease infinite',
+                '@keyframes gradientText': {
+                  '0%': {
+                    backgroundPosition: '0% 50%',
+                  },
+                  '50%': {
+                    backgroundPosition: '100% 50%',
+                  },
+                  '100%': {
+                    backgroundPosition: '0% 50%',
+                  },
+                },
+              }}
             >
               Ready to Start Your Journey?
             </Typography>
             <Typography
-              variant="h6"
-              color="text.secondary"
-              sx={{ mb: 4 }}
+              variant="h5"
+              sx={{
+                color: 'text.secondary',
+                maxWidth: '600px',
+                mb: 4,
+                fontWeight: 400,
+                animation: 'fadeInUp 0.8s ease-out 0.2s both',
+              }}
             >
               Join thousands of professionals who have already taken their next step towards success.
             </Typography>
             <Button
               variant="contained"
               size="large"
-              onClick={() => navigate('/register')}
               endIcon={<ArrowForward />}
+              onClick={() => navigate('/register')}
               sx={{
-                px: 4,
-                py: 1.5,
-                fontSize: '1.1rem',
+                px: 6,
+                py: 2,
+                fontSize: '1.2rem',
+                fontWeight: 600,
+                borderRadius: '50px',
+                boxShadow: theme.palette.mode === 'dark'
+                  ? '0 4px 20px rgba(116, 185, 255, 0.3)'
+                  : '0 4px 20px rgba(9, 132, 227, 0.3)',
+                animation: 'fadeInUp 0.8s ease-out 0.4s both',
+                '&:hover': {
+                  transform: 'translateY(-2px)',
+                  boxShadow: theme.palette.mode === 'dark'
+                    ? '0 6px 25px rgba(116, 185, 255, 0.4)'
+                    : '0 6px 25px rgba(9, 132, 227, 0.4)',
+                  '& .MuiButton-endIcon': {
+                    transform: 'translateX(4px)',
+                  },
+                },
+                '& .MuiButton-endIcon': {
+                  transition: 'transform 0.3s ease',
+                },
               }}
             >
               Get Started Now
@@ -218,7 +399,7 @@ const Landing: React.FC = () => {
           </Box>
         </Container>
       </Box>
-    </Box>
+    </>
   );
 };
 
diff --git a/nextstep-frontend/src/pages/Login.tsx b/nextstep-frontend/src/pages/Login.tsx
index 741691f..e88feea 100644
--- a/nextstep-frontend/src/pages/Login.tsx
+++ b/nextstep-frontend/src/pages/Login.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, TextField, Button, Typography, Box, Paper, Link, Alert } from '@mui/material';
+import { Container, TextField, Button, Typography, Box, Paper, Link, Alert, IconButton } from '@mui/material';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import './Login.css';
 import { config } from '../config';
@@ -8,14 +8,15 @@ import { LoginResponse } from '../models/LoginResponse';
 import {setUserAuth} from "../handlers/userAuth.ts";
 import { signInWithPopup } from "firebase/auth";
 import { auth, googleProvider } from "../firebase";
-
-
+import { LightMode, DarkMode } from '@mui/icons-material';
+import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Login: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const navigate = useNavigate();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
 
    // Google Login
    const handleGoogleLogin = async () => {
@@ -67,7 +68,27 @@ const Login: React.FC = () => {
   return (
     <div className="login-container">
       <Container component="main" maxWidth="xs">
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+        <Box
+          sx={{
+            position: 'relative',
+            mt: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <IconButton
+            onClick={toggleTheme}
+            sx={{
+              position: 'absolute',
+              top: -40,
+              right: 0,
+              color: 'text.primary',
+            }}
+          >
+            {isDarkMode ? <LightMode /> : <DarkMode />}
+          </IconButton>
+
           <Typography component="h1" variant="h3" gutterBottom>
             Next Step
           </Typography>
diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 6847b32..ea55972 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -248,9 +248,7 @@ const Quiz: React.FC = () => {
 
       {/* Subject Input */}
       {!quiz && (
-        <Box sx={{ mb: 4, p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
-          <Typography variant="h6" gutterBottom>
-          </Typography>
+        <Box sx={{ mb: 4 }}>
           <TextField
             fullWidth
             label="Quiz Subject"
diff --git a/nextstep-frontend/src/pages/Register.tsx b/nextstep-frontend/src/pages/Register.tsx
index 7ac8cf0..1ce577b 100644
--- a/nextstep-frontend/src/pages/Register.tsx
+++ b/nextstep-frontend/src/pages/Register.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, TextField, Button, Typography, Box, Paper, Link, Alert } from '@mui/material';
+import { Container, TextField, Button, Typography, Box, Paper, Link, Alert, IconButton } from '@mui/material';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { config } from '../config';
+import { LightMode, DarkMode } from '@mui/icons-material';
+import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Register: React.FC = () => {
   const [username, setUsername] = useState('');
@@ -11,6 +13,7 @@ const Register: React.FC = () => {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -40,7 +43,27 @@ const Register: React.FC = () => {
   return (
     <div className="body">
       <Container component="main" maxWidth="xs">
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box
+          sx={{
+            position: 'relative',
+            mt: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <IconButton
+            onClick={toggleTheme}
+            sx={{
+              position: 'absolute',
+              top: -40,
+              right: 0,
+              color: 'text.primary',
+            }}
+          >
+            {isDarkMode ? <LightMode /> : <DarkMode />}
+          </IconButton>
+
           <Typography component="h1" variant="h3" gutterBottom>
             Next Step
           </Typography>
diff --git a/nextstep-frontend/src/theme.ts b/nextstep-frontend/src/theme.ts
new file mode 100644
index 0000000..9a5807e
--- /dev/null
+++ b/nextstep-frontend/src/theme.ts
@@ -0,0 +1,162 @@
+import { createTheme, ThemeOptions } from '@mui/material';
+
+// Common theme settings
+const commonSettings: ThemeOptions = {
+  typography: {
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    h1: {
+      fontWeight: 800,
+      letterSpacing: '-0.02em',
+    },
+    h2: {
+      fontWeight: 800,
+      letterSpacing: '-0.02em',
+    },
+    h3: {
+      fontWeight: 700,
+      letterSpacing: '-0.01em',
+    },
+    h4: {
+      fontWeight: 600,
+      letterSpacing: '-0.01em',
+    },
+    h5: {
+      fontWeight: 600,
+    },
+    h6: {
+      fontWeight: 600,
+    },
+  },
+  shape: {
+    borderRadius: 16,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 600,
+          borderRadius: '50px',
+          padding: '10px 24px',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          '&:hover': {
+            transform: 'translateY(-2px)',
+          },
+        },
+        contained: {
+          boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
+          '&:hover': {
+            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          '&:hover': {
+            transform: 'translateY(-4px)',
+            boxShadow: '0 8px 30px rgba(0, 0, 0, 0.12)',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          '&:hover': {
+            transform: 'scale(1.1)',
+          },
+        },
+      },
+    },
+  },
+};
+
+// Light theme
+export const lightTheme = createTheme({
+  ...commonSettings,
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#0984E3',
+      light: '#74B9FF',
+      dark: '#0652DD',
+    },
+    secondary: {
+      main: '#00B894',
+      light: '#55EFC4',
+      dark: '#00A884',
+    },
+    background: {
+      default: '#FFFFFF',
+      paper: '#F8F9FA',
+    },
+    text: {
+      primary: '#2D3436',
+      secondary: '#636E72',
+    },
+  },
+});
+
+// Dark theme
+export const darkTheme = createTheme({
+  ...commonSettings,
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#74B9FF',
+      light: '#A3D4FF',
+      dark: '#0984E3',
+    },
+    secondary: {
+      main: '#55EFC4',
+      light: '#7FFFD4',
+      dark: '#00B894',
+    },
+    background: {
+      default: '#1A1A1A',
+      paper: '#2D2D2D',
+    },
+    text: {
+      primary: '#FFFFFF',
+      secondary: '#B2BEC3',
+    },
+  },
+  components: {
+    ...commonSettings.components,
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
+          '&:hover': {
+            transform: 'translateY(-4px)',
+            boxShadow: '0 8px 30px rgba(0, 0, 0, 0.3)',
+          },
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        contained: {
+          boxShadow: '0 4px 14px rgba(0, 0, 0, 0.2)',
+          '&:hover': {
+            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.3)',
+          },
+        },
+      },
+    },
+  },
+}); 
\ No newline at end of file

From af208795636115919b31fe0c81cc115636ebdf8a Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 12:18:14 +0300
Subject: [PATCH 05/18] Improve Look Of Login And Register Pages

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/package.json                |   1 +
 nextstep-frontend/src/App.tsx                 | 111 +++----
 nextstep-frontend/src/components/Layout.tsx   |   8 +-
 .../src/contexts/AuthContext.tsx              |  60 ++++
 nextstep-frontend/src/models/User.ts          |   6 +
 nextstep-frontend/src/pages/Login.tsx         | 265 ++++++++++------
 nextstep-frontend/src/pages/Register.tsx      | 288 ++++++++++++------
 7 files changed, 498 insertions(+), 241 deletions(-)
 create mode 100644 nextstep-frontend/src/contexts/AuthContext.tsx
 create mode 100644 nextstep-frontend/src/models/User.ts

diff --git a/nextstep-frontend/package.json b/nextstep-frontend/package.json
index 603e350..9cad348 100644
--- a/nextstep-frontend/package.json
+++ b/nextstep-frontend/package.json
@@ -22,6 +22,7 @@
     "dotenv": "^16.4.7",
     "firebase": "^11.4.0",
     "font-awesome": "^4.7.0",
+    "framer-motion": "^12.15.0",
     "lucide-react": "^0.479.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx
index 087a83e..7719277 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -18,67 +18,70 @@ import Quiz from './pages/Quiz';
 import Landing from './pages/Landing';
 import { Box, CssBaseline } from '@mui/material';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { AuthProvider } from './contexts/AuthContext';
 
 const App: React.FC = () => {
   return (
-    <ThemeProvider>
-      <CssBaseline />
-      <Router>
-        <Box sx={{ 
-          display: 'flex', 
-          flexDirection: 'column', 
-          minHeight: '100vh',
-          bgcolor: 'background.default',
-        }}>
+    <AuthProvider>
+      <ThemeProvider>
+        <CssBaseline />
+        <Router>
           <Box sx={{ 
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
+            display: 'flex', 
+            flexDirection: 'column', 
+            minHeight: '100vh',
+            bgcolor: 'background.default',
           }}>
-            <Routes>
-              {/* Public Routes */}
-              <Route path="/" element={<Landing />} />
-              <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
-              <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
-              
-              {/* Protected Routes */}
-              <Route
-                path="/*"
-                element={
-                  <Box sx={{ display: 'flex', flex: 1 }}>
-                    <LeftBar />
-                    <Box
-                      component="main"
-                      sx={{
-                        flexGrow: 1,
-                        p: 3,
-                        width: '100%',
-                        maxWidth: '1200px',
-                        mx: 'auto',
-                        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                      }}
-                    >
-                      <Routes>
-                        <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
-                        <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
-                        <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
-                        <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
-                        <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
-                        <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
-                        <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
-                        <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
-                        <Route path="*" element={<Navigate to="/" />} />
-                      </Routes>
+            <Box sx={{ 
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+            }}>
+              <Routes>
+                {/* Public Routes */}
+                <Route path="/" element={<Landing />} />
+                <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
+                <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
+                
+                {/* Protected Routes */}
+                <Route
+                  path="/*"
+                  element={
+                    <Box sx={{ display: 'flex', flex: 1 }}>
+                      <LeftBar />
+                      <Box
+                        component="main"
+                        sx={{
+                          flexGrow: 1,
+                          p: 3,
+                          width: '100%',
+                          maxWidth: '1200px',
+                          mx: 'auto',
+                          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                        }}
+                      >
+                        <Routes>
+                          <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
+                          <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
+                          <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
+                          <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
+                          <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
+                          <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
+                          <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
+                          <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
+                          <Route path="*" element={<Navigate to="/" />} />
+                        </Routes>
+                      </Box>
                     </Box>
-                  </Box>
-                }
-              />
-            </Routes>
+                  }
+                />
+              </Routes>
+            </Box>
+            <Footer />
           </Box>
-          <Footer />
-        </Box>
-      </Router>
-    </ThemeProvider>
+        </Router>
+      </ThemeProvider>
+    </AuthProvider>
   );
 };
 
diff --git a/nextstep-frontend/src/components/Layout.tsx b/nextstep-frontend/src/components/Layout.tsx
index f421607..3f8dffe 100644
--- a/nextstep-frontend/src/components/Layout.tsx
+++ b/nextstep-frontend/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import { Container, Box } from '@mui/material';
+import { Container, Box, useTheme } from '@mui/material';
 import React from 'react';
 import './Layout.css';
 
@@ -11,6 +11,8 @@ const Layout: React.FC<LayoutProps> = ({
   className = '',
   children
 }) => {
+  const theme = useTheme();
+
   return (
     <Box
       component="main"
@@ -19,6 +21,9 @@ const Layout: React.FC<LayoutProps> = ({
         flexDirection: 'column',
         minHeight: '100vh',
         width: '100%',
+        background: theme.palette.mode === 'dark' 
+          ? 'linear-gradient(45deg, #1A1A1A 0%, #2D2D2D 100%)'
+          : 'linear-gradient(45deg, #F8F9FA 0%, #FFFFFF 100%)',
       }}
     >
       <Container
@@ -32,7 +37,6 @@ const Layout: React.FC<LayoutProps> = ({
           flexDirection: 'column',
           gap: 3,
           '&.login, &.register': {
-            maxWidth: 'sm',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
diff --git a/nextstep-frontend/src/contexts/AuthContext.tsx b/nextstep-frontend/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..4efb044
--- /dev/null
+++ b/nextstep-frontend/src/contexts/AuthContext.tsx
@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { User } from '../models/User';
+import { getAuth, onAuthStateChanged } from 'firebase/auth';
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  loading: true,
+  error: null,
+});
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const auth = getAuth();
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
+      if (firebaseUser) {
+        // Convert Firebase user to your User type
+        const user: User = {
+          id: firebaseUser.uid,
+          email: firebaseUser.email || '',
+          displayName: firebaseUser.displayName || '',
+          photoURL: firebaseUser.photoURL || '',
+        };
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+      setLoading(false);
+    });
+
+    return () => unsubscribe();
+  }, [auth]);
+
+  const value = {
+    user,
+    loading,
+    error,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthContext; 
\ No newline at end of file
diff --git a/nextstep-frontend/src/models/User.ts b/nextstep-frontend/src/models/User.ts
new file mode 100644
index 0000000..1c6f99a
--- /dev/null
+++ b/nextstep-frontend/src/models/User.ts
@@ -0,0 +1,6 @@
+export interface User {
+  id: string;
+  email: string;
+  displayName: string;
+  photoURL: string;
+} 
\ No newline at end of file
diff --git a/nextstep-frontend/src/pages/Login.tsx b/nextstep-frontend/src/pages/Login.tsx
index e88feea..b6a4203 100644
--- a/nextstep-frontend/src/pages/Login.tsx
+++ b/nextstep-frontend/src/pages/Login.tsx
@@ -1,38 +1,51 @@
 import React, { useState } from 'react';
+import { useNavigate, Link as RouterLink } from 'react-router-dom';
+import {
+  Box,
+  Container,
+  Typography,
+  TextField,
+  Button,
+  Link,
+  Paper,
+  InputAdornment,
+  IconButton,
+  useTheme,
+  useMediaQuery,
+  Divider,
+  Alert,
+} from '@mui/material';
+import { motion } from 'framer-motion';
+import { Visibility, VisibilityOff, Google } from '@mui/icons-material';
 import axios from 'axios';
-import { Container, TextField, Button, Typography, Box, Paper, Link, Alert, IconButton } from '@mui/material';
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
-import './Login.css';
 import { config } from '../config';
 import { LoginResponse } from '../models/LoginResponse';
-import {setUserAuth} from "../handlers/userAuth.ts";
+import { setUserAuth } from "../handlers/userAuth";
 import { signInWithPopup } from "firebase/auth";
 import { auth, googleProvider } from "../firebase";
-import { LightMode, DarkMode } from '@mui/icons-material';
-import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Login: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
   const navigate = useNavigate();
-  const { isDarkMode, toggleTheme } = useCustomTheme();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-   // Google Login
-   const handleGoogleLogin = async () => {
+  // Google Login
+  const handleGoogleLogin = async () => {
     try {
       const result = await signInWithPopup(auth, googleProvider);
       const user = result.user;
-      const idToken = await user.getIdToken(); // Get Firebase ID Token
+      const idToken = await user.getIdToken();
 
-      // Send the token to the backend for authentication
       const res = await axios.post<LoginResponse>(`${config.app.backend_url()}/auth/social`, {
         idToken,
         authProvider: "google",
       });
 
       setUserAuth(res.data);
-
       navigate("/main-dashboard");
     } catch (error) {
       console.error("Google login failed:", error);
@@ -42,20 +55,15 @@ const Login: React.FC = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-
     try {
       const response = await axios.post<LoginResponse>(`${config.app.backend_url()}/auth/login`, {
         email,
         password,
       });
 
-      // Handle successful login, e.g., save tokens, redirect, etc.
-      setUserAuth(response.data)
-
-      navigate('/main-dashboard'); // Redirect to dashboard or another page after login
-
+      setUserAuth(response.data);
+      navigate('/main-dashboard');
     } catch (error) {
-      // Handle login error
       const err = error as any;
       if (err.response && err.response.data) {
         setError(err.response.data.message);
@@ -66,90 +74,165 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="login-container">
-      <Container component="main" maxWidth="xs">
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 4,
+      }}
+    >
+      <Container maxWidth={false} sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
         <Box
           sx={{
-            position: 'relative',
-            mt: 8,
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: 4,
             alignItems: 'center',
+            maxWidth: '1800px',
+            mx: 'auto',
           }}
         >
-          <IconButton
-            onClick={toggleTheme}
-            sx={{
-              position: 'absolute',
-              top: -40,
-              right: 0,
-              color: 'text.primary',
-            }}
+          {/* Left side - Welcome message */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ flex: 1 }}
           >
-            {isDarkMode ? <LightMode /> : <DarkMode />}
-          </IconButton>
-
-          <Typography component="h1" variant="h3" gutterBottom>
-            Next Step
-          </Typography>
-          <Paper elevation={3} sx={{ padding: 4, width: '100%' }}>
-            <Typography component="h1" variant="h5" align="center">
-              Login
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 800,
+                mb: 2,
+                background: 'linear-gradient(45deg, #0984E3, #00B894)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                color: 'transparent',
+              }}
+            >
+              Welcome Back!
             </Typography>
-            {error && <Alert severity="error">{error}</Alert>}
-            <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                id="email"
-                label="Email Address"
-                name="email"
-                autoComplete="email"
-                autoFocus
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                name="password"
-                label="Password"
-                type="password"
-                id="password"
-                autoComplete="current-password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                color="primary"
-                sx={{ mt: 3, mb: 2 }}
-              >
-                Login
-              </Button>
-              <Typography variant="body2" align="center">
-                Don't have an account?{' '}
-                <Link component={RouterLink} to="/register">
-                  Register
-                </Link>
+            <Typography
+              variant="h5"
+              color="text.secondary"
+              sx={{ mb: 3, fontWeight: 500 }}
+            >
+              Sign in to continue your career journey
+            </Typography>
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                • Access personalized career insights
+              </Typography>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                • Connect with industry professionals
+              </Typography>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                • Track your career progress
               </Typography>
             </Box>
-            <Box sx={{ mt: 2, textAlign: "center" }}>
-              <Button variant="contained" color="error" fullWidth sx={{ mb: 1 }} onClick={handleGoogleLogin}>
-                Login with Google
-              </Button>
-            </Box>
-          </Paper>
+          </motion.div>
+
+          {/* Right side - Login form */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ flex: 2 }}
+          >
+            <Paper
+              elevation={3}
+              sx={{
+                p: 4,
+                borderRadius: 4,
+                background: theme.palette.mode === 'dark' 
+                  ? 'rgba(45, 45, 45, 0.8)'
+                  : 'rgba(255, 255, 255, 0.9)',
+                backdropFilter: 'blur(10px)',
+                width: '100%',
+                maxWidth: '1000px',
+                mx: 'auto',
+              }}
+            >
+              <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+                Sign In
+              </Typography>
+
+              {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
+
+              <Box sx={{ mb: 3 }}>
+                <Button
+                  fullWidth
+                  variant="outlined"
+                  startIcon={<Google />}
+                  onClick={handleGoogleLogin}
+                  sx={{ mb: 2, py: 1.5 }}
+                >
+                  Continue with Google
+                </Button>
+              </Box>
+
+              <Divider sx={{ my: 3 }}>
+                <Typography variant="body2" color="text.secondary">
+                  or continue with email
+                </Typography>
+              </Divider>
+
+              <form onSubmit={handleSubmit}>
+                <TextField
+                  fullWidth
+                  label="Email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  sx={{ mb: 2 }}
+                />
+                <TextField
+                  fullWidth
+                  label="Password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          onClick={() => setShowPassword(!showPassword)}
+                          edge="end"
+                        >
+                          {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                  sx={{ mb: 3 }}
+                />
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  size="large"
+                  sx={{ mb: 2, py: 1.5 }}
+                >
+                  Sign In
+                </Button>
+                <Box sx={{ textAlign: 'center' }}>
+                  <Typography variant="body2" color="text.secondary">
+                    Don't have an account?{' '}
+                    <Link component={RouterLink} to="/register" color="primary">
+                      Sign up
+                    </Link>
+                  </Typography>
+                </Box>
+              </form>
+            </Paper>
+          </motion.div>
         </Box>
       </Container>
-    </div>
+    </Box>
   );
 };
 
diff --git a/nextstep-frontend/src/pages/Register.tsx b/nextstep-frontend/src/pages/Register.tsx
index 1ce577b..3585bfe 100644
--- a/nextstep-frontend/src/pages/Register.tsx
+++ b/nextstep-frontend/src/pages/Register.tsx
@@ -1,36 +1,64 @@
 import React, { useState } from 'react';
+import { useNavigate, Link as RouterLink } from 'react-router-dom';
+import {
+  Box,
+  Container,
+  Typography,
+  TextField,
+  Button,
+  Link,
+  Paper,
+  InputAdornment,
+  IconButton,
+  useTheme,
+  useMediaQuery,
+  Grid,
+  Alert,
+} from '@mui/material';
+import { motion } from 'framer-motion';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import axios from 'axios';
-import { Container, TextField, Button, Typography, Box, Paper, Link, Alert, IconButton } from '@mui/material';
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { config } from '../config';
-import { LightMode, DarkMode } from '@mui/icons-material';
-import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Register: React.FC = () => {
-  const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
-  const { isDarkMode, toggleTheme } = useCustomTheme();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
     try {
       const response = await axios.post(`${config.app.backend_url()}/auth/register`, {
-        username,
-        email,
-        password,
+        username: formData.username,
+        email: formData.email,
+        password: formData.password,
       });
-      // Handle successful registration
-      console.log(response.data);
+      
       setSuccess(true);
       setTimeout(() => {
-        navigate('/login'); // Redirect to login page after registration
+        navigate('/login');
       }, 4000);
     } catch (error) {
-      // Handle registration error
       const err = error as any;
       if (err.response && err.response.data) {
         setError(err.response.data.message);
@@ -41,97 +69,169 @@ const Register: React.FC = () => {
   };
 
   return (
-    <div className="body">
-      <Container component="main" maxWidth="xs">
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 4,
+      }}
+    >
+      <Container maxWidth={false} sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
         <Box
           sx={{
-            position: 'relative',
-            mt: 8,
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: 4,
             alignItems: 'center',
+            maxWidth: '1800px',
+            mx: 'auto',
           }}
         >
-          <IconButton
-            onClick={toggleTheme}
-            sx={{
-              position: 'absolute',
-              top: -40,
-              right: 0,
-              color: 'text.primary',
-            }}
+          {/* Left side - Welcome message */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ flex: 1 }}
           >
-            {isDarkMode ? <LightMode /> : <DarkMode />}
-          </IconButton>
-
-          <Typography component="h1" variant="h3" gutterBottom>
-            Next Step
-          </Typography>
-          <Paper elevation={3} sx={{ padding: 4, width: '100%' }}>
-            <Typography component="h1" variant="h5" align="center">
-              Register
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 800,
+                mb: 2,
+                background: 'linear-gradient(45deg, #0984E3, #00B894)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                color: 'transparent',
+              }}
+            >
+              Join NextStep
+            </Typography>
+            <Typography
+              variant="h5"
+              color="text.secondary"
+              sx={{ mb: 3, fontWeight: 500 }}
+            >
+              Start your career journey today
             </Typography>
-            {error != '' && <Alert severity="error">{error}</Alert>}
-            {success && <Alert severity="success" sx={{ width: '100%', mb: 2 }}>Registration successful! Redirecting to login...</Alert>}
-            <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                id="username"
-                label="Username"
-                name="username"
-                autoComplete="username"
-                autoFocus
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                id="email"
-                label="Email Address"
-                name="email"
-                autoComplete="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                name="password"
-                label="Password"
-                type="password"
-                id="password"
-                autoComplete="current-password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                color="primary"
-                sx={{ mt: 3, mb: 2 }}
-              >
-                Register
-              </Button>
-              <Typography variant="body2" align="center">
-                Already have an account?{' '}
-                <Link component={RouterLink} to="/login">
-                  Login
-                </Link>
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                • Create your professional profile
+              </Typography>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                • Get personalized career recommendations
+              </Typography>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                • Connect with mentors and peers
               </Typography>
             </Box>
-          </Paper>
+          </motion.div>
+
+          {/* Right side - Registration form */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ flex: 2 }}
+          >
+            <Paper
+              elevation={3}
+              sx={{
+                p: 4,
+                borderRadius: 4,
+                background: theme.palette.mode === 'dark' 
+                  ? 'rgba(45, 45, 45, 0.8)'
+                  : 'rgba(255, 255, 255, 0.9)',
+                backdropFilter: 'blur(10px)',
+                width: '100%',
+                maxWidth: '1000px',
+                mx: 'auto',
+              }}
+            >
+              <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+                Create Account
+              </Typography>
+
+              {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
+              {success && <Alert severity="success" sx={{ mb: 3 }}>Registration successful! Redirecting to login...</Alert>}
+
+              <form onSubmit={handleSubmit}>
+                <TextField
+                  fullWidth
+                  label="Username"
+                  name="username"
+                  value={formData.username}
+                  onChange={handleChange}
+                  required
+                  sx={{ mb: 2 }}
+                />
+                <TextField
+                  fullWidth
+                  label="Email"
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  sx={{ mb: 2 }}
+                />
+                <TextField
+                  fullWidth
+                  label="Password"
+                  type={showPassword ? 'text' : 'password'}
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  required
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          onClick={() => setShowPassword(!showPassword)}
+                          edge="end"
+                        >
+                          {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                  sx={{ mb: 2 }}
+                />
+                <TextField
+                  fullWidth
+                  label="Confirm Password"
+                  type={showPassword ? 'text' : 'password'}
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  required
+                  sx={{ mb: 3 }}
+                />
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  size="large"
+                  sx={{ mb: 2, py: 1.5 }}
+                >
+                  Create Account
+                </Button>
+                <Box sx={{ textAlign: 'center' }}>
+                  <Typography variant="body2" color="text.secondary">
+                    Already have an account?{' '}
+                    <Link component={RouterLink} to="/login" color="primary">
+                      Sign in
+                    </Link>
+                  </Typography>
+                </Box>
+              </form>
+            </Paper>
+          </motion.div>
         </Box>
       </Container>
-    </div>
+    </Box>
   );
 };
 

From ec8a9d9b55cf6f56977d407ea30b45b7a444ba27 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 13:10:38 +0300
Subject: [PATCH 06/18] Fix PostDetails White Blank Page

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/components/Layout.tsx |  31 ++-
 nextstep-frontend/src/index.css             |  23 ++-
 nextstep-frontend/src/pages/Login.tsx       | 162 +++++++++++++---
 nextstep-frontend/src/pages/PostDetails.tsx | 199 ++++++++++++--------
 nextstep-frontend/src/pages/Register.tsx    | 180 +++++++++++++++---
 5 files changed, 461 insertions(+), 134 deletions(-)

diff --git a/nextstep-frontend/src/components/Layout.tsx b/nextstep-frontend/src/components/Layout.tsx
index 3f8dffe..a3948b3 100644
--- a/nextstep-frontend/src/components/Layout.tsx
+++ b/nextstep-frontend/src/components/Layout.tsx
@@ -21,9 +21,31 @@ const Layout: React.FC<LayoutProps> = ({
         flexDirection: 'column',
         minHeight: '100vh',
         width: '100%',
-        background: theme.palette.mode === 'dark' 
-          ? 'linear-gradient(45deg, #1A1A1A 0%, #2D2D2D 100%)'
-          : 'linear-gradient(45deg, #F8F9FA 0%, #FFFFFF 100%)',
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: theme.palette.background.default,
+        '&::before': {
+          content: '""',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: theme.palette.background.default,
+          zIndex: -2,
+        },
+        '&::after': {
+          content: '""',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: theme.palette.mode === 'dark'
+            ? 'radial-gradient(circle at 50% 50%, rgba(45, 45, 45, 0.1) 0%, rgba(26, 26, 26, 0.2) 100%)'
+            : 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(248, 249, 250, 0.2) 100%)',
+          zIndex: -1,
+        },
       }}
     >
       <Container
@@ -36,6 +58,9 @@ const Layout: React.FC<LayoutProps> = ({
           display: 'flex',
           flexDirection: 'column',
           gap: 3,
+          position: 'relative',
+          minHeight: 'calc(100vh - 64px)',
+          backgroundColor: 'transparent',
           '&.login, &.register': {
             display: 'flex',
             alignItems: 'center',
diff --git a/nextstep-frontend/src/index.css b/nextstep-frontend/src/index.css
index 4b6a8f6..a0bc1f8 100644
--- a/nextstep-frontend/src/index.css
+++ b/nextstep-frontend/src/index.css
@@ -24,6 +24,10 @@
 
 body {
   margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
 }
 
 /**
@@ -372,19 +376,28 @@ template {
   box-sizing: border-box;
 }
 
-html, body {
+html, body, #root {
   height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #F8F9FA;
+}
+
+body {
+  min-height: 100vh;
   width: 100%;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 #root {
-  height: 100%;
+  min-height: 100vh;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
+/* Remove all other background-related styles */
+
 body {
   margin: 0;
   padding: 0;
diff --git a/nextstep-frontend/src/pages/Login.tsx b/nextstep-frontend/src/pages/Login.tsx
index b6a4203..5aa836f 100644
--- a/nextstep-frontend/src/pages/Login.tsx
+++ b/nextstep-frontend/src/pages/Login.tsx
@@ -81,6 +81,7 @@ const Login: React.FC = () => {
         alignItems: 'center',
         justifyContent: 'center',
         py: 4,
+        position: 'relative',
       }}
     >
       <Container maxWidth={false} sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
@@ -106,31 +107,53 @@ const Login: React.FC = () => {
               sx={{
                 fontWeight: 800,
                 mb: 2,
-                background: 'linear-gradient(45deg, #0984E3, #00B894)',
+                background: theme.palette.mode === 'dark'
+                  ? 'linear-gradient(45deg, #64B5F6, #4DD0E1)'
+                  : 'linear-gradient(45deg, #0984E3, #00B894)',
                 backgroundClip: 'text',
                 WebkitBackgroundClip: 'text',
                 color: 'transparent',
+                textShadow: theme.palette.mode === 'dark'
+                  ? '0 0 20px rgba(100, 181, 246, 0.2)'
+                  : '0 0 20px rgba(9, 132, 227, 0.2)',
               }}
             >
               Welcome Back!
             </Typography>
             <Typography
               variant="h5"
-              color="text.secondary"
-              sx={{ mb: 3, fontWeight: 500 }}
+              sx={{ 
+                mb: 3, 
+                fontWeight: 500,
+                color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'text.secondary'
+              }}
             >
               Sign in to continue your career journey
             </Typography>
             <Box sx={{ display: { xs: 'none', md: 'block' } }}>
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                • Access personalized career insights
-              </Typography>
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                • Connect with industry professionals
-              </Typography>
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                • Track your career progress
-              </Typography>
+              {[
+                'Access personalized career insights',
+                'Connect with industry professionals',
+                'Track your career progress'
+              ].map((text, index) => (
+                <Typography
+                  key={index}
+                  variant="body1"
+                  sx={{
+                    mb: 2,
+                    color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.8)' : 'text.secondary',
+                    display: 'flex',
+                    alignItems: 'center',
+                    '&::before': {
+                      content: '"•"',
+                      mr: 1,
+                      color: theme.palette.mode === 'dark' ? '#64B5F6' : '#0984E3',
+                    }
+                  }}
+                >
+                  {text}
+                </Typography>
+              ))}
             </Box>
           </motion.div>
 
@@ -153,13 +176,35 @@ const Login: React.FC = () => {
                 width: '100%',
                 maxWidth: '1000px',
                 mx: 'auto',
+                border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
+                boxShadow: theme.palette.mode === 'dark'
+                  ? '0 8px 32px rgba(0, 0, 0, 0.3)'
+                  : '0 8px 32px rgba(0, 0, 0, 0.1)',
               }}
             >
-              <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+              <Typography 
+                variant="h4" 
+                sx={{ 
+                  mb: 3, 
+                  fontWeight: 600,
+                  color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'text.primary'
+                }}
+              >
                 Sign In
               </Typography>
 
-              {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
+              {error && (
+                <Alert 
+                  severity="error" 
+                  sx={{ 
+                    mb: 3,
+                    background: theme.palette.mode === 'dark' ? 'rgba(211, 47, 47, 0.1)' : undefined,
+                    border: theme.palette.mode === 'dark' ? '1px solid rgba(211, 47, 47, 0.3)' : undefined,
+                  }}
+                >
+                  {error}
+                </Alert>
+              )}
 
               <Box sx={{ mb: 3 }}>
                 <Button
@@ -167,14 +212,33 @@ const Login: React.FC = () => {
                   variant="outlined"
                   startIcon={<Google />}
                   onClick={handleGoogleLogin}
-                  sx={{ mb: 2, py: 1.5 }}
+                  sx={{ 
+                    mb: 2, 
+                    py: 1.5,
+                    borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                    color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : undefined,
+                    '&:hover': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : undefined,
+                    }
+                  }}
                 >
                   Continue with Google
                 </Button>
               </Box>
 
-              <Divider sx={{ my: 3 }}>
-                <Typography variant="body2" color="text.secondary">
+              <Divider sx={{ 
+                my: 3,
+                '&::before, &::after': {
+                  borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : undefined,
+                }
+              }}>
+                <Typography 
+                  variant="body2" 
+                  sx={{ 
+                    color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'text.secondary'
+                  }}
+                >
                   or continue with email
                 </Typography>
               </Divider>
@@ -187,7 +251,20 @@ const Login: React.FC = () => {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
-                  sx={{ mb: 2 }}
+                  sx={{ 
+                    mb: 2,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                      },
+                      '&:hover fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      },
+                    },
+                    '& .MuiInputLabel-root': {
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                    },
+                  }}
                 />
                 <TextField
                   fullWidth
@@ -202,27 +279,68 @@ const Login: React.FC = () => {
                         <IconButton
                           onClick={() => setShowPassword(!showPassword)}
                           edge="end"
+                          sx={{
+                            color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                          }}
                         >
                           {showPassword ? <VisibilityOff /> : <Visibility />}
                         </IconButton>
                       </InputAdornment>
                     ),
                   }}
-                  sx={{ mb: 3 }}
+                  sx={{ 
+                    mb: 3,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                      },
+                      '&:hover fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      },
+                    },
+                    '& .MuiInputLabel-root': {
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                    },
+                  }}
                 />
                 <Button
                   type="submit"
                   fullWidth
                   variant="contained"
                   size="large"
-                  sx={{ mb: 2, py: 1.5 }}
+                  sx={{ 
+                    mb: 2, 
+                    py: 1.5,
+                    background: theme.palette.mode === 'dark'
+                      ? 'linear-gradient(45deg, #64B5F6, #4DD0E1)'
+                      : 'linear-gradient(45deg, #0984E3, #00B894)',
+                    '&:hover': {
+                      background: theme.palette.mode === 'dark'
+                        ? 'linear-gradient(45deg, #42A5F5, #26C6DA)'
+                        : 'linear-gradient(45deg, #0873C4, #00A884)',
+                    }
+                  }}
                 >
                   Sign In
                 </Button>
                 <Box sx={{ textAlign: 'center' }}>
-                  <Typography variant="body2" color="text.secondary">
+                  <Typography 
+                    variant="body2" 
+                    sx={{ 
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'text.secondary'
+                    }}
+                  >
                     Don't have an account?{' '}
-                    <Link component={RouterLink} to="/register" color="primary">
+                    <Link 
+                      component={RouterLink} 
+                      to="/register" 
+                      sx={{ 
+                        color: theme.palette.mode === 'dark' ? '#64B5F6' : 'primary.main',
+                        '&:hover': {
+                          color: theme.palette.mode === 'dark' ? '#42A5F5' : 'primary.dark',
+                        }
+                      }}
+                    >
                       Sign up
                     </Link>
                   </Typography>
diff --git a/nextstep-frontend/src/pages/PostDetails.tsx b/nextstep-frontend/src/pages/PostDetails.tsx
index 9271dbf..02404b9 100644
--- a/nextstep-frontend/src/pages/PostDetails.tsx
+++ b/nextstep-frontend/src/pages/PostDetails.tsx
@@ -37,6 +37,13 @@ const PostDetails: React.FC = () => {
       if (!imageFilename) {
         return defaultProfileImage;
       }
+      
+      // If it's a Google profile image URL, return it directly
+      if (imageFilename.startsWith('https://')) {
+        return imageFilename;
+      }
+      
+      // Otherwise, fetch from our backend
       const response = await api.get(`/resource/image/${imageFilename}`, {
         responseType: 'blob',
       });
@@ -248,53 +255,67 @@ const PostDetails: React.FC = () => {
                     onChange={(e) => setEditedTitle(e.target.value)}
                     sx={{ mb: 2 }}
                   />
-                  <FroalaEditor
-                    tag="textarea"
-                    model={editedContent}
-                    onModelChange={setEditedContent}
-                    config={{
-                      placeholderText: "Edit your content here...",
-                      charCounterCount: false,
-                      toolbarButtons: [
-                        "bold",
-                        "italic",
-                        "underline",
-                        "insertImage",
-                        "insertLink",
-                        "paragraphFormat",
-                      ],
-                      imageUploadRemoteUrls: true,
-                      imageAllowedTypes: ["jpeg", "jpg", "png", "gif"],
-                      events: {
-                        "image.beforeUpload": async function (fileList: File[]) {
-                          const editor = this as any;
-                          const firstFile = fileList[0];
+                  {editedContent !== null && (
+                    <FroalaEditor
+                      tag="textarea"
+                      model={editedContent}
+                      onModelChange={setEditedContent}
+                      config={{
+                        placeholderText: "Edit your content here...",
+                        charCounterCount: false,
+                        toolbarButtons: [
+                          "bold",
+                          "italic",
+                          "underline",
+                          "insertImage",
+                          "insertLink",
+                          "paragraphFormat",
+                        ],
+                        imageUploadRemoteUrls: true,
+                        imageAllowedTypes: ["jpeg", "jpg", "png", "gif"],
+                        events: {
+                          "initialized": function() {
+                            const editor = this as any;
+                            if (editor && editor.html) {
+                              editor.html.set(editedContent || '');
+                            }
+                          },
+                          "contentChanged": function() {
+                            const editor = this as any;
+                            if (editor && editor.html) {
+                              setEditedContent(editor.html.get());
+                            }
+                          },
+                          "image.beforeUpload": async function (fileList: File[]) {
+                            const editor = this as any;
+                            const firstFile = fileList[0];
 
-                          if (firstFile) {
-                            const formData = new FormData();
-                            formData.append("file", firstFile);
+                            if (firstFile) {
+                              const formData = new FormData();
+                              formData.append("file", firstFile);
 
-                            try {
-                              const response = await api.post(`/resource/image`, formData, {
-                                headers: {
-                                  "Content-Type": "multipart/form-data",
-                                  Authorization: `Bearer ${auth.accessToken}`,
-                                },
-                              });
+                              try {
+                                const response = await api.post(`/resource/image`, formData, {
+                                  headers: {
+                                    "Content-Type": "multipart/form-data",
+                                    Authorization: `Bearer ${auth.accessToken}`,
+                                  },
+                                });
 
-                              const imageUrl = `${config.app.backend_url()}/resources/images/${response.data}`;
-                              editor.image.insert(imageUrl, null, null, editor.image.get());
-                            } catch (error) {
-                              console.error("Error uploading image:", error);
+                                const imageUrl = `${config.app.backend_url()}/resources/images/${response.data}`;
+                                editor.image.insert(imageUrl, null, null, editor.image.get());
+                              } catch (error) {
+                                console.error("Error uploading image:", error);
+                              }
                             }
-                          }
 
-                          return false; // Prevent Froala's default upload mechanism
+                            return false; // Prevent Froala's default upload mechanism
+                          }
                         },
-                      },
-                      pluginsEnabled: ["image", "link", "paragraphFormat"],
-                    }}
-                  />
+                        pluginsEnabled: ["image", "link", "paragraphFormat"],
+                      }}
+                    />
+                  )}
                 </>
               ) : (
                 <>
@@ -353,53 +374,67 @@ const PostDetails: React.FC = () => {
                     </Box>
                   ))}
                 </Box>
-                <FroalaEditor
-                  tag="textarea"
-                  model={newComment}
-                  onModelChange={setNewComment}
-                  config={{
-                    placeholderText: "Write a comment...",
-                    charCounterCount: false,
-                    toolbarButtons: [
-                      "bold",
-                      "italic",
-                      "underline",
-                      "insertImage",
-                      "insertLink",
-                      "paragraphFormat",
-                    ],
-                    imageUploadRemoteUrls: true,
-                    imageAllowedTypes: ["jpeg", "jpg", "png", "gif"],
-                    events: {
-                      "image.beforeUpload": async function (fileList: File[]) {
-                        const editor = this as any;
-                        const firstFile = fileList[0];
+                {commentsOpen && (
+                  <FroalaEditor
+                    tag="textarea"
+                    model={newComment}
+                    onModelChange={setNewComment}
+                    config={{
+                      placeholderText: "Write a comment...",
+                      charCounterCount: false,
+                      toolbarButtons: [
+                        "bold",
+                        "italic",
+                        "underline",
+                        "insertImage",
+                        "insertLink",
+                        "paragraphFormat",
+                      ],
+                      imageUploadRemoteUrls: true,
+                      imageAllowedTypes: ["jpeg", "jpg", "png", "gif"],
+                      events: {
+                        "initialized": function() {
+                          const editor = this as any;
+                          if (editor && editor.html) {
+                            editor.html.set(newComment || '');
+                          }
+                        },
+                        "contentChanged": function() {
+                          const editor = this as any;
+                          if (editor && editor.html) {
+                            setNewComment(editor.html.get());
+                          }
+                        },
+                        "image.beforeUpload": async function (fileList: File[]) {
+                          const editor = this as any;
+                          const firstFile = fileList[0];
 
-                        if (firstFile) {
-                          const formData = new FormData();
-                          formData.append("file", firstFile);
+                          if (firstFile) {
+                            const formData = new FormData();
+                            formData.append("file", firstFile);
 
-                          try {
-                            const response = await api.post(`/resource/image`, formData, {
-                              headers: {
-                                "Content-Type": "multipart/form-data",
-                                Authorization: `Bearer ${auth.accessToken}`,
-                              },
-                            });
+                            try {
+                              const response = await api.post(`/resource/image`, formData, {
+                                headers: {
+                                  "Content-Type": "multipart/form-data",
+                                  Authorization: `Bearer ${auth.accessToken}`,
+                                },
+                              });
 
-                            const imageUrl = `${config.app.backend_url()}/resources/images/${response.data}`;
-                            editor.image.insert(imageUrl, null, null, editor.image.get());
-                          } catch (error) {
-                            console.error("Error uploading image:", error);
+                              const imageUrl = `${config.app.backend_url()}/resources/images/${response.data}`;
+                              editor.image.insert(imageUrl, null, null, editor.image.get());
+                            } catch (error) {
+                              console.error("Error uploading image:", error);
+                            }
                           }
-                        }
 
-                        return false; // Prevent Froala's default upload mechanism
+                          return false; // Prevent Froala's default upload mechanism
+                        }
                       },
-                    },
-                    pluginsEnabled: ["image", "link", "paragraphFormat"],
-                  }}
-                />
+                      pluginsEnabled: ["image", "link", "paragraphFormat"]
+                    }}
+                  />
+                )}
                 <Button variant="contained" color="primary" onClick={handleAddComment} sx={{ mt: 2 }}>
                   Add Comment
                 </Button>
diff --git a/nextstep-frontend/src/pages/Register.tsx b/nextstep-frontend/src/pages/Register.tsx
index 3585bfe..ac346a6 100644
--- a/nextstep-frontend/src/pages/Register.tsx
+++ b/nextstep-frontend/src/pages/Register.tsx
@@ -76,6 +76,7 @@ const Register: React.FC = () => {
         alignItems: 'center',
         justifyContent: 'center',
         py: 4,
+        position: 'relative',
       }}
     >
       <Container maxWidth={false} sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
@@ -101,31 +102,53 @@ const Register: React.FC = () => {
               sx={{
                 fontWeight: 800,
                 mb: 2,
-                background: 'linear-gradient(45deg, #0984E3, #00B894)',
+                background: theme.palette.mode === 'dark'
+                  ? 'linear-gradient(45deg, #64B5F6, #4DD0E1)'
+                  : 'linear-gradient(45deg, #0984E3, #00B894)',
                 backgroundClip: 'text',
                 WebkitBackgroundClip: 'text',
                 color: 'transparent',
+                textShadow: theme.palette.mode === 'dark'
+                  ? '0 0 20px rgba(100, 181, 246, 0.2)'
+                  : '0 0 20px rgba(9, 132, 227, 0.2)',
               }}
             >
               Join NextStep
             </Typography>
             <Typography
               variant="h5"
-              color="text.secondary"
-              sx={{ mb: 3, fontWeight: 500 }}
+              sx={{ 
+                mb: 3, 
+                fontWeight: 500,
+                color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'text.secondary'
+              }}
             >
               Start your career journey today
             </Typography>
             <Box sx={{ display: { xs: 'none', md: 'block' } }}>
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                • Create your professional profile
-              </Typography>
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                • Get personalized career recommendations
-              </Typography>
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-                • Connect with mentors and peers
-              </Typography>
+              {[
+                'Create your professional profile',
+                'Get personalized career recommendations',
+                'Connect with mentors and peers'
+              ].map((text, index) => (
+                <Typography
+                  key={index}
+                  variant="body1"
+                  sx={{
+                    mb: 2,
+                    color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.8)' : 'text.secondary',
+                    display: 'flex',
+                    alignItems: 'center',
+                    '&::before': {
+                      content: '"•"',
+                      mr: 1,
+                      color: theme.palette.mode === 'dark' ? '#64B5F6' : '#0984E3',
+                    }
+                  }}
+                >
+                  {text}
+                </Typography>
+              ))}
             </Box>
           </motion.div>
 
@@ -148,14 +171,47 @@ const Register: React.FC = () => {
                 width: '100%',
                 maxWidth: '1000px',
                 mx: 'auto',
+                border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
+                boxShadow: theme.palette.mode === 'dark'
+                  ? '0 8px 32px rgba(0, 0, 0, 0.3)'
+                  : '0 8px 32px rgba(0, 0, 0, 0.1)',
               }}
             >
-              <Typography variant="h4" sx={{ mb: 3, fontWeight: 600 }}>
+              <Typography 
+                variant="h4" 
+                sx={{ 
+                  mb: 3, 
+                  fontWeight: 600,
+                  color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'text.primary'
+                }}
+              >
                 Create Account
               </Typography>
 
-              {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
-              {success && <Alert severity="success" sx={{ mb: 3 }}>Registration successful! Redirecting to login...</Alert>}
+              {error && (
+                <Alert 
+                  severity="error" 
+                  sx={{ 
+                    mb: 3,
+                    background: theme.palette.mode === 'dark' ? 'rgba(211, 47, 47, 0.1)' : undefined,
+                    border: theme.palette.mode === 'dark' ? '1px solid rgba(211, 47, 47, 0.3)' : undefined,
+                  }}
+                >
+                  {error}
+                </Alert>
+              )}
+              {success && (
+                <Alert 
+                  severity="success" 
+                  sx={{ 
+                    mb: 3,
+                    background: theme.palette.mode === 'dark' ? 'rgba(46, 125, 50, 0.1)' : undefined,
+                    border: theme.palette.mode === 'dark' ? '1px solid rgba(46, 125, 50, 0.3)' : undefined,
+                  }}
+                >
+                  Registration successful! Redirecting to login...
+                </Alert>
+              )}
 
               <form onSubmit={handleSubmit}>
                 <TextField
@@ -165,7 +221,20 @@ const Register: React.FC = () => {
                   value={formData.username}
                   onChange={handleChange}
                   required
-                  sx={{ mb: 2 }}
+                  sx={{ 
+                    mb: 2,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                      },
+                      '&:hover fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      },
+                    },
+                    '& .MuiInputLabel-root': {
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                    },
+                  }}
                 />
                 <TextField
                   fullWidth
@@ -175,7 +244,20 @@ const Register: React.FC = () => {
                   value={formData.email}
                   onChange={handleChange}
                   required
-                  sx={{ mb: 2 }}
+                  sx={{ 
+                    mb: 2,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                      },
+                      '&:hover fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      },
+                    },
+                    '& .MuiInputLabel-root': {
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                    },
+                  }}
                 />
                 <TextField
                   fullWidth
@@ -191,13 +273,29 @@ const Register: React.FC = () => {
                         <IconButton
                           onClick={() => setShowPassword(!showPassword)}
                           edge="end"
+                          sx={{
+                            color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                          }}
                         >
                           {showPassword ? <VisibilityOff /> : <Visibility />}
                         </IconButton>
                       </InputAdornment>
                     ),
                   }}
-                  sx={{ mb: 2 }}
+                  sx={{ 
+                    mb: 2,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                      },
+                      '&:hover fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      },
+                    },
+                    '& .MuiInputLabel-root': {
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                    },
+                  }}
                 />
                 <TextField
                   fullWidth
@@ -207,21 +305,59 @@ const Register: React.FC = () => {
                   value={formData.confirmPassword}
                   onChange={handleChange}
                   required
-                  sx={{ mb: 3 }}
+                  sx={{ 
+                    mb: 3,
+                    '& .MuiOutlinedInput-root': {
+                      '& fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
+                      },
+                      '&:hover fieldset': {
+                        borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
+                      },
+                    },
+                    '& .MuiInputLabel-root': {
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                    },
+                  }}
                 />
                 <Button
                   type="submit"
                   fullWidth
                   variant="contained"
                   size="large"
-                  sx={{ mb: 2, py: 1.5 }}
+                  sx={{ 
+                    mb: 2, 
+                    py: 1.5,
+                    background: theme.palette.mode === 'dark'
+                      ? 'linear-gradient(45deg, #64B5F6, #4DD0E1)'
+                      : 'linear-gradient(45deg, #0984E3, #00B894)',
+                    '&:hover': {
+                      background: theme.palette.mode === 'dark'
+                        ? 'linear-gradient(45deg, #42A5F5, #26C6DA)'
+                        : 'linear-gradient(45deg, #0873C4, #00A884)',
+                    }
+                  }}
                 >
                   Create Account
                 </Button>
                 <Box sx={{ textAlign: 'center' }}>
-                  <Typography variant="body2" color="text.secondary">
+                  <Typography 
+                    variant="body2" 
+                    sx={{ 
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'text.secondary'
+                    }}
+                  >
                     Already have an account?{' '}
-                    <Link component={RouterLink} to="/login" color="primary">
+                    <Link 
+                      component={RouterLink} 
+                      to="/login" 
+                      sx={{ 
+                        color: theme.palette.mode === 'dark' ? '#64B5F6' : 'primary.main',
+                        '&:hover': {
+                          color: theme.palette.mode === 'dark' ? '#42A5F5' : 'primary.dark',
+                        }
+                      }}
+                    >
                       Sign in
                     </Link>
                   </Typography>

From 14e6c6059eefbac5c0de8b6771673129c667c3a7 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 13:21:35 +0300
Subject: [PATCH 07/18] Fix Titles And Buttons Style On DarkMode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Landing.tsx | 21 +++-----
 nextstep-frontend/src/theme.ts          | 68 +++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/nextstep-frontend/src/pages/Landing.tsx b/nextstep-frontend/src/pages/Landing.tsx
index 55b2dc5..58fdd48 100644
--- a/nextstep-frontend/src/pages/Landing.tsx
+++ b/nextstep-frontend/src/pages/Landing.tsx
@@ -286,6 +286,9 @@ const Landing: React.FC = () => {
           py: { xs: 12, md: 16 },
           position: 'relative',
           overflow: 'hidden',
+          background: theme.palette.mode === 'dark' 
+            ? 'linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%)'
+            : 'linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%)',
           '&::before': {
             content: '""',
             position: 'absolute',
@@ -294,21 +297,9 @@ const Landing: React.FC = () => {
             right: 0,
             bottom: 0,
             background: theme.palette.mode === 'dark' 
-              ? 'linear-gradient(135deg, rgba(116, 185, 255, 0.1) 0%, rgba(85, 239, 196, 0.1) 100%)'
+              ? 'linear-gradient(135deg, rgba(116, 185, 255, 0.15) 0%, rgba(85, 239, 196, 0.15) 100%)'
               : 'linear-gradient(135deg, rgba(9, 132, 227, 0.1) 0%, rgba(0, 184, 148, 0.1) 100%)',
             zIndex: 0,
-            animation: 'gradientShift 15s ease infinite',
-            '@keyframes gradientShift': {
-              '0%': {
-                backgroundPosition: '0% 50%',
-              },
-              '50%': {
-                backgroundPosition: '100% 50%',
-              },
-              '100%': {
-                backgroundPosition: '0% 50%',
-              },
-            },
           },
         }}
       >
@@ -328,7 +319,6 @@ const Landing: React.FC = () => {
               component="h1"
               sx={{
                 fontWeight: 800,
-                color: 'text.primary',
                 fontSize: { xs: '2.5rem', md: '3.5rem' },
                 lineHeight: 1.2,
                 mb: 2,
@@ -356,11 +346,12 @@ const Landing: React.FC = () => {
             <Typography
               variant="h5"
               sx={{
-                color: 'text.secondary',
                 maxWidth: '600px',
                 mb: 4,
                 fontWeight: 400,
                 animation: 'fadeInUp 0.8s ease-out 0.2s both',
+                color: theme.palette.mode === 'dark' ? '#E0E0E0' : '#2D3436',
+                opacity: 0.9,
               }}
             >
               Join thousands of professionals who have already taken their next step towards success.
diff --git a/nextstep-frontend/src/theme.ts b/nextstep-frontend/src/theme.ts
index 9a5807e..e9e1b18 100644
--- a/nextstep-frontend/src/theme.ts
+++ b/nextstep-frontend/src/theme.ts
@@ -132,11 +132,31 @@ export const darkTheme = createTheme({
     },
     text: {
       primary: '#FFFFFF',
-      secondary: '#B2BEC3',
+      secondary: '#E0E0E0',
     },
   },
   components: {
     ...commonSettings.components,
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 600,
+          borderRadius: '50px',
+          padding: '10px 24px',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          '&:hover': {
+            transform: 'translateY(-2px)',
+          },
+        },
+        contained: {
+          boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
+          '&:hover': {
+            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
+          },
+        },
+      },
+    },
     MuiCard: {
       styleOverrides: {
         root: {
@@ -148,15 +168,53 @@ export const darkTheme = createTheme({
         },
       },
     },
-    MuiButton: {
+    MuiTypography: {
       styleOverrides: {
-        contained: {
-          boxShadow: '0 4px 14px rgba(0, 0, 0, 0.2)',
+        root: {
+          color: '#FFFFFF',
+        },
+        body1: {
+          color: '#E0E0E0',
+        },
+        body2: {
+          color: '#E0E0E0',
+        },
+        h1: {
+          color: '#FFFFFF',
+        },
+        h2: {
+          color: '#FFFFFF',
+        },
+        h3: {
+          color: '#FFFFFF',
+        },
+        h4: {
+          color: '#FFFFFF',
+        },
+        h5: {
+          color: '#E0E0E0',
+        },
+        h6: {
+          color: '#E0E0E0',
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: '#FFFFFF',
           '&:hover': {
-            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.3)',
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
           },
         },
       },
     },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: 'rgba(255, 255, 255, 0.12)',
+        },
+      },
+    },
   },
 }); 
\ No newline at end of file

From 2fefd60c6951a196e4da795f0d9deb0c7c724b9e Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 13:48:23 +0300
Subject: [PATCH 08/18] Add Darkmode/Lightmode Theme Change Button To The
 Register And Login Pages

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Login.tsx    | 19 ++++++++++++++++++-
 nextstep-frontend/src/pages/Register.tsx | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/nextstep-frontend/src/pages/Login.tsx b/nextstep-frontend/src/pages/Login.tsx
index 5aa836f..ed6b79a 100644
--- a/nextstep-frontend/src/pages/Login.tsx
+++ b/nextstep-frontend/src/pages/Login.tsx
@@ -16,13 +16,14 @@ import {
   Alert,
 } from '@mui/material';
 import { motion } from 'framer-motion';
-import { Visibility, VisibilityOff, Google } from '@mui/icons-material';
+import { Visibility, VisibilityOff, Google, LightMode, DarkMode } from '@mui/icons-material';
 import axios from 'axios';
 import { config } from '../config';
 import { LoginResponse } from '../models/LoginResponse';
 import { setUserAuth } from "../handlers/userAuth";
 import { signInWithPopup } from "firebase/auth";
 import { auth, googleProvider } from "../firebase";
+import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Login: React.FC = () => {
   const [email, setEmail] = useState('');
@@ -31,6 +32,7 @@ const Login: React.FC = () => {
   const [error, setError] = useState('');
   const navigate = useNavigate();
   const theme = useTheme();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   // Google Login
@@ -84,6 +86,21 @@ const Login: React.FC = () => {
         position: 'relative',
       }}
     >
+      <IconButton
+        onClick={toggleTheme}
+        sx={{
+          position: 'fixed',
+          top: 16,
+          right: 16,
+          zIndex: 1000,
+          color: theme.palette.mode === 'dark' ? 'white' : 'text.primary',
+          '&:hover': {
+            transform: 'scale(1.1)',
+          },
+        }}
+      >
+        {isDarkMode ? <LightMode /> : <DarkMode />}
+      </IconButton>
       <Container maxWidth={false} sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
         <Box
           sx={{
diff --git a/nextstep-frontend/src/pages/Register.tsx b/nextstep-frontend/src/pages/Register.tsx
index ac346a6..bfbeaa9 100644
--- a/nextstep-frontend/src/pages/Register.tsx
+++ b/nextstep-frontend/src/pages/Register.tsx
@@ -16,9 +16,10 @@ import {
   Alert,
 } from '@mui/material';
 import { motion } from 'framer-motion';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { Visibility, VisibilityOff, LightMode, DarkMode } from '@mui/icons-material';
 import axios from 'axios';
 import { config } from '../config';
+import { useTheme as useCustomTheme } from '../contexts/ThemeContext';
 
 const Register: React.FC = () => {
   const [formData, setFormData] = useState({
@@ -32,6 +33,7 @@ const Register: React.FC = () => {
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
   const theme = useTheme();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -79,6 +81,21 @@ const Register: React.FC = () => {
         position: 'relative',
       }}
     >
+      <IconButton
+        onClick={toggleTheme}
+        sx={{
+          position: 'fixed',
+          top: 16,
+          right: 16,
+          zIndex: 1000,
+          color: theme.palette.mode === 'dark' ? 'white' : 'text.primary',
+          '&:hover': {
+            transform: 'scale(1.1)',
+          },
+        }}
+      >
+        {isDarkMode ? <LightMode /> : <DarkMode />}
+      </IconButton>
       <Container maxWidth={false} sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
         <Box
           sx={{

From a74b78970dfb70429204fd7faa2c4aa69d8f7ec2 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 13:53:26 +0300
Subject: [PATCH 09/18] Fix Continue with Google Button In DarkMode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Login.tsx | 41 +++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/nextstep-frontend/src/pages/Login.tsx b/nextstep-frontend/src/pages/Login.tsx
index ed6b79a..e9d1981 100644
--- a/nextstep-frontend/src/pages/Login.tsx
+++ b/nextstep-frontend/src/pages/Login.tsx
@@ -232,12 +232,43 @@ const Login: React.FC = () => {
                   sx={{ 
                     mb: 2, 
                     py: 1.5,
-                    borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.2)' : undefined,
-                    color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : undefined,
+                    position: 'relative',
+                    border: 'none',
+                    background: theme.palette.mode === 'dark' 
+                      ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))'
+                      : 'linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02))',
+                    '&::before': {
+                      content: '""',
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      borderRadius: 'inherit',
+                      padding: '1px',
+                      background: theme.palette.mode === 'dark'
+                        ? 'linear-gradient(45deg, #64B5F6, #4DD0E1)'
+                        : 'linear-gradient(45deg, #0984E3, #00B894)',
+                      WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                      WebkitMaskComposite: 'xor',
+                      maskComposite: 'exclude',
+                    },
+                    color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.87)',
                     '&:hover': {
-                      borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : undefined,
-                      background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : undefined,
-                    }
+                      background: theme.palette.mode === 'dark'
+                        ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1))'
+                        : 'linear-gradient(45deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04))',
+                      transform: 'translateY(-1px)',
+                      boxShadow: theme.palette.mode === 'dark'
+                        ? '0 4px 20px rgba(100, 181, 246, 0.2)'
+                        : '0 4px 20px rgba(9, 132, 227, 0.2)',
+                      '&::before': {
+                        background: theme.palette.mode === 'dark'
+                          ? 'linear-gradient(45deg, #42A5F5, #26C6DA)'
+                          : 'linear-gradient(45deg, #0873C4, #00A884)',
+                      }
+                    },
+                    transition: 'all 0.3s ease',
                   }}
                 >
                   Continue with Google

From 10f9d69539cacd8226f541d620decebd82af9130 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 13:58:06 +0300
Subject: [PATCH 10/18] Add NextStep Logo To Landing Page

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Landing.tsx | 126 +++++++++++++++++++++---
 1 file changed, 110 insertions(+), 16 deletions(-)

diff --git a/nextstep-frontend/src/pages/Landing.tsx b/nextstep-frontend/src/pages/Landing.tsx
index 58fdd48..cbc4ed2 100644
--- a/nextstep-frontend/src/pages/Landing.tsx
+++ b/nextstep-frontend/src/pages/Landing.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Box,
@@ -30,6 +30,76 @@ const Landing: React.FC = () => {
   const theme = useTheme();
   const { isDarkMode, toggleTheme } = useCustomTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const logoRef = useRef<HTMLImageElement>(null);
+  const [stepZones, setStepZones] = React.useState<{ x: number; y: number; width: number; height: number }[]>([]);
+
+  useEffect(() => {
+    const analyzeLogo = () => {
+      if (!logoRef.current) return;
+
+      const img = logoRef.current;
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      // Set canvas size to match image
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+
+      // Draw image to canvas
+      ctx.drawImage(img, 0, 0);
+
+      // Get image data
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const data = imageData.data;
+
+      // Find steps by analyzing pixel data
+      const steps: { x: number; y: number; width: number; height: number }[] = [];
+      let currentStep: { x: number; y: number; width: number; height: number } | null = null;
+
+      // Scan the image for non-transparent pixels
+      for (let y = 0; y < canvas.height; y++) {
+        for (let x = 0; x < canvas.width; x++) {
+          const idx = (y * canvas.width + x) * 4;
+          const alpha = data[idx + 3];
+
+          if (alpha > 0) {
+            if (!currentStep) {
+              currentStep = { x, y, width: 1, height: 1 };
+            } else {
+              currentStep.width = Math.max(currentStep.width, x - currentStep.x + 1);
+              currentStep.height = Math.max(currentStep.height, y - currentStep.y + 1);
+            }
+          } else if (currentStep) {
+            // If we find a gap, save the current step and start a new one
+            steps.push(currentStep);
+            currentStep = null;
+          }
+        }
+      }
+
+      // Convert coordinates to percentages
+      const percentageSteps = steps.map(step => ({
+        x: (step.x / canvas.width) * 100,
+        y: (step.y / canvas.height) * 100,
+        width: (step.width / canvas.width) * 100,
+        height: (step.height / canvas.height) * 100
+      }));
+
+      setStepZones(percentageSteps);
+    };
+
+    // Wait for image to load
+    if (logoRef.current?.complete) {
+      analyzeLogo();
+    } else {
+      logoRef.current?.addEventListener('load', analyzeLogo);
+    }
+
+    return () => {
+      logoRef.current?.removeEventListener('load', analyzeLogo);
+    };
+  }, []);
 
   const features = [
     {
@@ -182,28 +252,52 @@ const Landing: React.FC = () => {
             </Grid>
             <Grid item xs={12} md={6}>
               <Box
-                component="img"
-                src="/assets/landing-hero.svg"
-                alt="Career Development"
                 sx={{
+                  position: 'relative',
                   width: '100%',
-                  maxWidth: 500,
+                  maxWidth: 400,
                   height: 'auto',
                   display: { xs: 'none', md: 'block' },
-                  animation: 'float 6s ease-in-out infinite',
-                  '@keyframes float': {
-                    '0%': {
-                      transform: 'translateY(0px)',
+                }}
+              >
+                <Box
+                  component="img"
+                  src="/NextStepLogo.png"
+                  alt="NextStep Logo"
+                  sx={{
+                    width: '100%',
+                    height: 'auto',
+                    animation: 'float 6s ease-in-out infinite, glow 3s ease-in-out infinite',
+                    filter: 'drop-shadow(0 0 20px rgba(255, 255, 255, 0.3))',
+                    '@keyframes float': {
+                      '0%': {
+                        transform: 'translateY(0px) rotate(0deg)',
+                      },
+                      '50%': {
+                        transform: 'translateY(-20px) rotate(2deg)',
+                      },
+                      '100%': {
+                        transform: 'translateY(0px) rotate(0deg)',
+                      },
                     },
-                    '50%': {
-                      transform: 'translateY(-20px)',
+                    '@keyframes glow': {
+                      '0%': {
+                        filter: 'drop-shadow(0 0 20px rgba(255, 255, 255, 0.3))',
+                      },
+                      '50%': {
+                        filter: 'drop-shadow(0 0 30px rgba(255, 255, 255, 0.5))',
+                      },
+                      '100%': {
+                        filter: 'drop-shadow(0 0 20px rgba(255, 255, 255, 0.3))',
+                      },
                     },
-                    '100%': {
-                      transform: 'translateY(0px)',
+                    '&:hover': {
+                      filter: 'drop-shadow(0 0 40px rgba(255, 255, 255, 0.6))',
+                      transition: 'all 0.3s ease',
                     },
-                  },
-                }}
-              />
+                  }}
+                />
+              </Box>
             </Grid>
           </Grid>
         </Container>

From 92fdfb6033c2d6fa734deb23a91b138876ca1a6d Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 14:37:13 +0300
Subject: [PATCH 11/18] Fix Score Your Resume Input In Dark Mode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Resume.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/nextstep-frontend/src/pages/Resume.tsx b/nextstep-frontend/src/pages/Resume.tsx
index 249c471..7ac310a 100644
--- a/nextstep-frontend/src/pages/Resume.tsx
+++ b/nextstep-frontend/src/pages/Resume.tsx
@@ -420,7 +420,12 @@ const Resume: React.FC = () => {
                 label="Job Description"
                 value={jobDescription}
                 onChange={(e) => setJobDescription(e.target.value)}
-                sx={{ mb: 2, backgroundColor: 'white' }}
+                sx={{ 
+                  mb: 2,
+                  '& .MuiOutlinedInput-root': {
+                    backgroundColor: 'background.paper'
+                  }
+                }}
               />
 
               <input

From d89b66c20261387c0db4b6b4d9fa458a738d4f52 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 14:46:22 +0300
Subject: [PATCH 12/18] Colorize Buttons In Dark Mode To Blue Like In Light
 Mode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/theme.ts | 59 ++++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/nextstep-frontend/src/theme.ts b/nextstep-frontend/src/theme.ts
index e9e1b18..d23a2ef 100644
--- a/nextstep-frontend/src/theme.ts
+++ b/nextstep-frontend/src/theme.ts
@@ -117,14 +117,14 @@ export const darkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#74B9FF',
-      light: '#A3D4FF',
-      dark: '#0984E3',
+      main: '#0984E3',
+      light: '#74B9FF',
+      dark: '#0652DD',
     },
     secondary: {
-      main: '#55EFC4',
-      light: '#7FFFD4',
-      dark: '#00B894',
+      main: '#00B894',
+      light: '#55EFC4',
+      dark: '#00A884',
     },
     background: {
       default: '#1A1A1A',
@@ -150,9 +150,15 @@ export const darkTheme = createTheme({
           },
         },
         contained: {
-          boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
+          boxShadow: '0 4px 14px rgba(0, 0, 0, 0.2)',
           '&:hover': {
-            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
+            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.25)',
+          },
+        },
+        outlined: {
+          borderColor: 'rgba(255, 255, 255, 0.23)',
+          '&:hover': {
+            borderColor: 'rgba(255, 255, 255, 0.5)',
           },
         },
       },
@@ -202,10 +208,29 @@ export const darkTheme = createTheme({
     MuiIconButton: {
       styleOverrides: {
         root: {
-          color: '#FFFFFF',
+          color: 'inherit',
           '&:hover': {
             backgroundColor: 'rgba(255, 255, 255, 0.1)',
           },
+          '&.Mui-selected': {
+            backgroundColor: 'rgba(9, 132, 227, 0.2)',
+            color: '#0984E3',
+            '&:hover': {
+              backgroundColor: 'rgba(9, 132, 227, 0.3)',
+            },
+          },
+          '&.MuiIconButton-colorPrimary': {
+            color: '#0984E3',
+            '&:hover': {
+              backgroundColor: 'rgba(9, 132, 227, 0.1)',
+            },
+          },
+          '&.MuiIconButton-colorDefault': {
+            color: 'rgba(255, 255, 255, 0.7)',
+            '&:hover': {
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            },
+          },
         },
       },
     },
@@ -216,5 +241,21 @@ export const darkTheme = createTheme({
         },
       },
     },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            backgroundColor: 'rgba(9, 132, 227, 0.2)',
+            color: '#0984E3',
+            '&:hover': {
+              backgroundColor: 'rgba(9, 132, 227, 0.3)',
+            },
+            '& .MuiListItemIcon-root': {
+              color: '#0984E3',
+            },
+          },
+        },
+      },
+    },
   },
 }); 
\ No newline at end of file

From 88150d49f6a5bed2f3c1243e83b20efe6fdfd25a Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 14:52:42 +0300
Subject: [PATCH 13/18] Fix Generated Quiz Content Background Color For Dark
 Mode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index ea55972..2263ccf 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -285,7 +285,7 @@ const Quiz: React.FC = () => {
           </Typography>
 
           {/* --- Enhanced Display of Quiz Metadata --- */}
-          <Paper elevation={2} sx={{ p: 3, mb: 4, bgcolor: '#f5f5f5', borderRadius: 2 }}>
+          <Paper elevation={2} sx={{ p: 3, mb: 4, bgcolor: 'background.default', borderRadius: 2 }}>
             <Grid container spacing={2}>
               {quiz.title && (
                 <Grid item xs={12}>
@@ -386,7 +386,7 @@ const Quiz: React.FC = () => {
             Your answers may get better grades for broad, in-depth explanations. You can answer in any language you want!
           </Typography>
           {quiz.questions.map((q, index) => (
-            <Paper key={index} sx={{ p: 2, mb: 3, border: '1px solid #e0e0e0' }}>
+            <Paper key={index} sx={{ p: 2, mb: 3, border: '1px solid', borderColor: 'divider' }}>
               <Box display="flex" justifyContent="space-between" alignItems="flex-start" mb={1}>
                 {/* Circled Numbering (Option 2) */}
                 <Avatar
@@ -460,7 +460,7 @@ const Quiz: React.FC = () => {
               )}
               {/* Correct answer display is now independent of quizSubmitted for showing */}
               {showAnswer[index] && q.correctAnswer && (
-                <Box sx={{ mt: 2, p: 1.5, bgcolor: '#f0f0f0', borderRadius: 1 }}>
+                <Box sx={{ mt: 2, p: 1.5, bgcolor: 'background.paper', borderRadius: 1 }}>
                   <Typography variant="subtitle2">Correct Answer:</Typography>
                   <Typography variant="body2">{q.correctAnswer}</Typography>
                 </Box>
@@ -482,7 +482,7 @@ const Quiz: React.FC = () => {
           )}
 
           {quizSubmitted && quiz.finalGrade !== undefined && (
-            <Box sx={{ mt: 4, p: 3, bgcolor: '#e8f5e9', borderRadius: 2, boxShadow: 2, textAlign: 'center' }}>
+            <Box sx={{ mt: 4, p: 3, bgcolor: 'success.light', borderRadius: 2, boxShadow: 2, textAlign: 'center' }}>
               <Typography variant="h5" gutterBottom>
                 Final Quiz Grade:
               </Typography>

From 84f36d9a7d6f6af16184d55c7108c95f1dca4d08 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 14:54:19 +0300
Subject: [PATCH 14/18] Fix Final Quiz Grade Background Color Across Themes

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 2263ccf..d9d97cd 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -482,7 +482,16 @@ const Quiz: React.FC = () => {
           )}
 
           {quizSubmitted && quiz.finalGrade !== undefined && (
-            <Box sx={{ mt: 4, p: 3, bgcolor: 'success.light', borderRadius: 2, boxShadow: 2, textAlign: 'center' }}>
+            <Box sx={{ 
+              mt: 4, 
+              p: 3, 
+              bgcolor: theme => theme.palette.mode === 'light' ? '#e8f5e9' : 'rgba(46, 125, 50, 0.15)', 
+              borderRadius: 2, 
+              boxShadow: 2, 
+              textAlign: 'center',
+              border: '1px solid',
+              borderColor: theme => theme.palette.mode === 'light' ? 'rgba(46, 125, 50, 0.2)' : 'rgba(46, 125, 50, 0.3)'
+            }}>
               <Typography variant="h5" gutterBottom>
                 Final Quiz Grade:
               </Typography>

From be87620751194f541535c00db6109e981d43e14a Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 14:55:55 +0300
Subject: [PATCH 15/18] Add Space Above The Grades To Prevent Clashes With The
 Above Text

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 62 +++++++++++++++++++---------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index d9d97cd..c602e5b 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -432,18 +432,29 @@ const Quiz: React.FC = () => {
               {quizSubmitted && (
                 <>
                   <Box sx={{ mt: 2 }}>
-                    <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+                    <Typography variant="subtitle2" sx={{ mb: 4 }}>
                       Your Grade:
                     </Typography>
-                    <Slider
-                      value={q.grade || 0}
-                      aria-label="Question grade"
-                      valueLabelDisplay="on"
-                      min={0}
-                      max={100}
-                      sx={{ width: '90%', mx: 'auto' }}
-                      disabled
-                    />
+                    <Box sx={{ px: 2, py: 1 }}>
+                      <Slider
+                        value={q.grade || 0}
+                        aria-label="Question grade"
+                        valueLabelDisplay="on"
+                        min={0}
+                        max={100}
+                        sx={{ 
+                          width: '100%',
+                          '& .MuiSlider-thumb': {
+                            height: 24,
+                            width: 24,
+                          },
+                          '& .MuiSlider-valueLabel': {
+                            top: -6,
+                          }
+                        }}
+                        disabled
+                      />
+                    </Box>
                   </Box>
                   <Box sx={{ mt: 2 }}>
                     <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
@@ -492,18 +503,29 @@ const Quiz: React.FC = () => {
               border: '1px solid',
               borderColor: theme => theme.palette.mode === 'light' ? 'rgba(46, 125, 50, 0.2)' : 'rgba(46, 125, 50, 0.3)'
             }}>
-              <Typography variant="h5" gutterBottom>
+              <Typography variant="h5" gutterBottom sx={{ mb: 4 }}>
                 Final Quiz Grade:
               </Typography>
-              <Slider
-                value={quiz.finalGrade || 0}
-                aria-label="Final quiz grade"
-                valueLabelDisplay="on"
-                min={0}
-                max={100}
-                sx={{ width: '80%', mx: 'auto', mb: 2 }}
-                disabled
-              />
+              <Box sx={{ px: 2, py: 1, mb: 2 }}>
+                <Slider
+                  value={quiz.finalGrade || 0}
+                  aria-label="Final quiz grade"
+                  valueLabelDisplay="on"
+                  min={0}
+                  max={100}
+                  sx={{ 
+                    width: '100%',
+                    '& .MuiSlider-thumb': {
+                      height: 24,
+                      width: 24,
+                    },
+                    '& .MuiSlider-valueLabel': {
+                      top: -6,
+                    }
+                  }}
+                  disabled
+                />
+              </Box>
               <Typography variant="h6" sx={{ mt: 2 }}>
                 Overall Tip:
               </Typography>

From 80f1036f2219654581a36089b1459bce019f0dd7 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 15:02:18 +0300
Subject: [PATCH 16/18] Colorize Correct Answer In White In Light Mode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index c602e5b..401d739 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -471,7 +471,14 @@ const Quiz: React.FC = () => {
               )}
               {/* Correct answer display is now independent of quizSubmitted for showing */}
               {showAnswer[index] && q.correctAnswer && (
-                <Box sx={{ mt: 2, p: 1.5, bgcolor: 'background.paper', borderRadius: 1 }}>
+                <Box sx={{ 
+                  mt: 2, 
+                  p: 1.5, 
+                  bgcolor: theme => theme.palette.mode === 'light' ? '#FFFFFF' : 'background.paper',
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'divider'
+                }}>
                   <Typography variant="subtitle2">Correct Answer:</Typography>
                   <Typography variant="body2">{q.correctAnswer}</Typography>
                 </Box>

From 72b591299a30460cf4fd4c956e56a29c0fbb3e7c Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 15:18:00 +0300
Subject: [PATCH 17/18] Imporve The Score Gauge Of The Resume Page And Increase
 The Width Of The Markdown Feedback Text

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 .../src/components/ScoreGauge.tsx             | 185 +++++++++++++-----
 nextstep-frontend/src/pages/Resume.tsx        |  36 +++-
 2 files changed, 170 insertions(+), 51 deletions(-)

diff --git a/nextstep-frontend/src/components/ScoreGauge.tsx b/nextstep-frontend/src/components/ScoreGauge.tsx
index 0193bd9..1f49227 100644
--- a/nextstep-frontend/src/components/ScoreGauge.tsx
+++ b/nextstep-frontend/src/components/ScoreGauge.tsx
@@ -1,57 +1,150 @@
-import * as React from 'react';
-import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
-import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { motion } from 'framer-motion';
 
 interface ScoreGaugeProps {
   score: number;
-  width?: number;
-  height?: number;
 }
 
-const ScoreGauge: React.FC<ScoreGaugeProps> = ({ score, width = 200, height = 200 }) => {
-  const getGradientColor = (value: number) => {
-    // Clamp value between 0 and 100
-    value = Math.max(0, Math.min(100, value));
-  
-    let r, g, b;
-  
-    if (value <= 50) {
-      // Red (255, 0, 0) to Yellow (255, 215, 0)
-      const ratio = value / 50;
-      r = 255;
-      g = Math.round(215 * ratio);
-      b = 0;
-    } else {
-      // Yellow (255, 215, 0) to Green (82, 178, 2)
-      const ratio = (value - 50) / 50;
-      r = Math.round(255 + (82 - 255) * ratio);  // Decrease red
-      g = Math.round(215 + (178 - 215) * ratio); // Shift green
-      b = Math.round(0 + (2 - 0) * ratio);       // Increase blue a little
-    }
-  
-    return `rgb(${r}, ${g}, ${b})`;
+const ScoreGauge: React.FC<ScoreGaugeProps> = ({ score }) => {
+  const theme = useTheme();
+  const [displayScore, setDisplayScore] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDisplayScore(score);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [score]);
+
+  const getColor = (score: number) => {
+    // Red -> Orange -> Yellow -> Green color progression
+    if (score >= 90) return '#4caf50'; // Green
+    if (score >= 75) return '#8bc34a'; // Light green
+    if (score >= 60) return '#ffeb3b'; // Yellow
+    if (score >= 45) return '#ff9800'; // Orange
+    if (score >= 30) return '#ff5722'; // Deep orange
+    return '#f44336'; // Red
   };
 
+  const circumference = 2 * Math.PI * 90; // radius = 90
+  const strokeDashoffset = circumference - (score / 100) * circumference;
+
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-      <Gauge
-        width={width}
-        height={height}
-        value={score}
-        cornerRadius="50%"
-        sx={(theme) => ({
-          [`& .${gaugeClasses.valueText}`]: {
-            fontSize: 30,
-            fontWeight: 'bold',
-          },
-          [`& .${gaugeClasses.valueArc}`]: {
-            fill: getGradientColor(score),
-            transition: 'fill 1s ease-in-out',
-          },
-          [`& .${gaugeClasses.referenceArc}`]: {
-            fill: theme.palette.text.disabled,
-          },
-        })}
+    <Box sx={{ 
+      position: 'relative', 
+      width: 300, 
+      height: 300,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}>
+      <motion.div
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.5 }}
+        style={{ position: 'relative' }}
+      >
+        <svg width="300" height="300" viewBox="0 0 300 300">
+          {/* Background circle */}
+          <circle
+            cx="150"
+            cy="150"
+            r="90"
+            fill="none"
+            stroke={theme.palette.grey[200]}
+            strokeWidth="20"
+          />
+          {/* Progress circle */}
+          <motion.circle
+            cx="150"
+            cy="150"
+            r="90"
+            fill="none"
+            stroke={getColor(score)}
+            strokeWidth="20"
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            initial={{ strokeDashoffset: circumference }}
+            animate={{ strokeDashoffset }}
+            transition={{ duration: 1.5, ease: "easeOut" }}
+            style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}
+          />
+        </svg>
+      </motion.div>
+      
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          textAlign: 'center',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '4px'
+        }}
+      >
+        <motion.div
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.5, duration: 0.5 }}
+        >
+          <Typography
+            variant="h2"
+            component="div"
+            sx={{
+              fontWeight: 'bold',
+              color: getColor(score),
+              fontSize: '3.5rem',
+              lineHeight: 1,
+              textAlign: 'center',
+              margin: 0,
+              padding: 0,
+            }}
+          >
+            {displayScore}
+          </Typography>
+        </motion.div>
+        <motion.div
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.6, duration: 0.5 }}
+        >
+          <Typography
+            variant="subtitle1"
+            sx={{
+              color: theme.palette.text.secondary,
+              fontWeight: 500,
+              lineHeight: 1,
+              textAlign: 'center',
+              margin: 0,
+              padding: 0,
+            }}
+          >
+            Resume Score
+          </Typography>
+        </motion.div>
+      </Box>
+
+      {/* Decorative elements */}
+      <motion.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ delay: 0.8, duration: 0.3 }}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderRadius: '50%',
+          boxShadow: `0 0 30px ${getColor(score)}40`,
+          pointerEvents: 'none',
+        }}
       />
     </Box>
   );
diff --git a/nextstep-frontend/src/pages/Resume.tsx b/nextstep-frontend/src/pages/Resume.tsx
index 7ac310a..a4d4087 100644
--- a/nextstep-frontend/src/pages/Resume.tsx
+++ b/nextstep-frontend/src/pages/Resume.tsx
@@ -37,15 +37,16 @@ const UploadBox = styled(Box)(({ theme }) => ({
 const FeedbackContainer = styled(Box)(({ theme }) => ({
   maxHeight: '60vh',
   overflowY: 'auto',
-  padding: theme.spacing(2),
+  padding: theme.spacing(4),
   backgroundColor: theme.palette.background.paper,
   borderRadius: theme.shape.borderRadius,
   textAlign: 'left',
   '& pre': {
     backgroundColor: theme.palette.grey[100],
-    padding: theme.spacing(1),
+    padding: theme.spacing(2),
     borderRadius: theme.shape.borderRadius,
     overflowX: 'auto',
+    margin: theme.spacing(2, 0),
   },
   '& table': {
     borderCollapse: 'collapse',
@@ -54,7 +55,7 @@ const FeedbackContainer = styled(Box)(({ theme }) => ({
   },
   '& th, & td': {
     border: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(1),
+    padding: theme.spacing(1.5),
     textAlign: 'left',
   },
   '& th': {
@@ -62,9 +63,27 @@ const FeedbackContainer = styled(Box)(({ theme }) => ({
   },
   '& h1, & h2, & h3, & h4, & h5, & h6': {
     textAlign: 'left',
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
   },
   '& p': {
     textAlign: 'left',
+    marginBottom: theme.spacing(2),
+    lineHeight: 1.6,
+  },
+  '& ul, & ol': {
+    marginLeft: theme.spacing(4),
+    marginBottom: theme.spacing(2),
+  },
+  '& li': {
+    marginBottom: theme.spacing(1),
+  },
+  '& blockquote': {
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    margin: theme.spacing(2, 0),
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.grey[50],
+    borderRadius: theme.shape.borderRadius,
   },
 }));
 
@@ -463,7 +482,7 @@ const Resume: React.FC = () => {
             {loading && <CircularProgress />}
 
             {feedback && (
-              <Box sx={{ mb: 3 }}>
+              <Box sx={{ mb: 3, width: '100%' }}>
                 <Typography variant="h6" gutterBottom>
                   Analysis Feedback:
                 </Typography>
@@ -477,7 +496,14 @@ const Resume: React.FC = () => {
             )}
 
             {score !== null && (
-              <Box sx={{ mb: 3 }}>
+              <Box sx={{ 
+                mb: 3,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: '200px',
+                width: '100%'
+              }}>
                 <ScoreGauge score={score} />
               </Box>
             )}

From 66cae27e28829ea16e0014f0567f4ded5c2b9329 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 31 May 2025 15:22:47 +0300
Subject: [PATCH 18/18] Color Connect Buttons And Upload CV Button Better For
 Dark Mode

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/MainDashboard.tsx | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/nextstep-frontend/src/pages/MainDashboard.tsx b/nextstep-frontend/src/pages/MainDashboard.tsx
index 93e390a..71ce203 100644
--- a/nextstep-frontend/src/pages/MainDashboard.tsx
+++ b/nextstep-frontend/src/pages/MainDashboard.tsx
@@ -205,7 +205,17 @@ const MainDashboard: React.FC = () => {
                 />
                 <Tooltip title="Upload CV" arrow placement="left">
                 <label htmlFor="upload-resume">
-                  <IconButton component="span" sx={{ p: 0 }}>
+                  <IconButton 
+                    component="span" 
+                    sx={{ 
+                      p: 0,
+                      color: 'primary.main',
+                      '&:hover': {
+                        color: 'primary.dark',
+                        backgroundColor: 'rgba(25, 118, 210, 0.08)'
+                      }
+                    }}
+                  >
                     <DocumentScannerTwoTone />
                   </IconButton>
                 </label>
@@ -376,16 +386,41 @@ const MainDashboard: React.FC = () => {
               </Box>
             ) : (
               <Stack spacing={2}>
-                <Button variant="contained" startIcon={<LinkedIn />} fullWidth>
+                <Button 
+                  variant="contained" 
+                  startIcon={<LinkedIn />} 
+                  fullWidth
+                  sx={{
+                    backgroundColor: '#0077B5',
+                    '&:hover': {
+                      backgroundColor: '#005582',
+                    },
+                    transition: 'all 0.3s ease',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                    '&:active': {
+                      transform: 'scale(0.98)',
+                    }
+                  }}
+                >
                   Connect LinkedIn
                 </Button>
                 <Button
                   variant="contained"
-                  color="secondary"
                   startIcon={<GitHub />}
                   fullWidth
                   onClick={() => setShowAuthOptions(true)}
-                  sx={{backgroundColor: 'darkslategrey'}}
+                  sx={{
+                    backgroundColor: '#1a1a1a',
+                    color: '#ffffff',
+                    '&:hover': {
+                      backgroundColor: '#000000',
+                    },
+                    transition: 'all 0.3s ease',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                    '&:active': {
+                      transform: 'scale(0.98)',
+                    }
+                  }}
                 >
                   Connect GitHub
                 </Button>