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/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.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..7719277 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -15,32 +15,73 @@ 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 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 (
-    <>
-    <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/>
-    </>
+    <AuthProvider>
+      <ThemeProvider>
+        <CssBaseline />
+        <Router>
+          <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>
+    </AuthProvider>
   );
 };
 
diff --git a/nextstep-frontend/src/components/DividedList.tsx b/nextstep-frontend/src/components/DividedList.tsx
index 75d9a74..ab16120 100644
--- a/nextstep-frontend/src/components/DividedList.tsx
+++ b/nextstep-frontend/src/components/DividedList.tsx
@@ -1,46 +1,99 @@
 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
+      <List
+        sx={{
+          width: '100%',
+          maxWidth: 360,
+          bgcolor: 'background.paper',
+          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) => (
+          <div key={user.id}>
+            {index !== 0 && <Divider />}
+            <ListItemButton
+              onClick={() => handleUserClick(user)}
+              disabled={disabled}
+              sx={{
+                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,
+                },
+              }}
+            >
+              <ListItemAvatar>
+                <Avatar
+                  alt={user.email}
+                  src="/static/images/avatar/1.jpg"
+                  sx={{ 
+                    width: 36, 
+                    height: 36,
+                    transition: 'all 0.3s ease',
+                    '&:hover': {
+                      transform: 'scale(1.1)',
+                    },
+                  }}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={user.email}
+                primaryTypographyProps={{
+                  fontSize: '0.875rem',
+                  fontWeight: user.id === selectedUserId ? 600 : 400,
+                }}
                 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)' },
+                  transition: 'all 0.3s ease',
                 }}
-              >
-                <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/components/Footer.tsx b/nextstep-frontend/src/components/Footer.tsx
index 22027ee..5fb4ac1 100644
--- a/nextstep-frontend/src/components/Footer.tsx
+++ b/nextstep-frontend/src/components/Footer.tsx
@@ -1,11 +1,123 @@
 import React from 'react';
-import './Footer.css';
+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 (
-    <div className="footer">
-      © 2025 Next Step. All rights reserved.
-    </div>
+    <Box
+      component="footer"
+      sx={{
+        py: 3,
+        px: 2,
+        mt: 'auto',
+        backgroundColor: theme.palette.mode === 'dark' ? 'background.paper' : 'background.default',
+        borderTop: '1px solid',
+        borderColor: 'divider',
+        width: '100%',
+      }}
+    >
+      <Container maxWidth="lg">
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            justifyContent: 'space-between',
+            alignItems: isMobile ? 'center' : 'flex-start',
+            gap: 2,
+          }}
+        >
+          <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',
+            }}
+          >
+            <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>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 2,
+              justifyContent: isMobile ? 'center' : 'flex-end',
+            }}
+          >
+            <Link href="/terms" color="text.secondary" underline="hover">
+              Terms
+            </Link>
+            <Link href="/privacy" color="text.secondary" underline="hover">
+              Privacy
+            </Link>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
   );
 };
 
diff --git a/nextstep-frontend/src/components/Layout.tsx b/nextstep-frontend/src/components/Layout.tsx
index 74d2e6f..a3948b3 100644
--- a/nextstep-frontend/src/components/Layout.tsx
+++ b/nextstep-frontend/src/components/Layout.tsx
@@ -1,22 +1,80 @@
-import { Container } from '@mui/material';
+import { Container, Box, useTheme } 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
 }) => {
+  const theme = useTheme();
+
   return (
-    <Container className={["layout-container", className].join(' ')} component="main"
+    <Box
+      component="main"
       sx={{
-        "&.MuiContainer-root": {
-          maxWidth: 'none'
-        }
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+        width: '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,
+        },
       }}
     >
-      { 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,
+          position: 'relative',
+          minHeight: 'calc(100vh - 64px)',
+          backgroundColor: 'transparent',
+          '&.login, &.register': {
+            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..0bebfc4 100644
--- a/nextstep-frontend/src/components/LeftBar.tsx
+++ b/nextstep-frontend/src/components/LeftBar.tsx
@@ -1,116 +1,235 @@
 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 { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz, Menu, ChevronLeft } from '@mui/icons-material';
+import { useNavigate, useLocation } from 'react-router-dom';
+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 [collapsed, setCollapsed] = useState(false);
+  const location = useLocation();
+  const [collapsed, setCollapsed] = useState(true);
+  const { isDarkMode, toggleTheme } = useTheme();
+  const muiTheme = useMuiTheme();
 
   useEffect(() => {
-    // Automatically collapse the sidebar if the user is disconnected
-    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 = [
+    { 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 ? 60 : 180,
+        width: collapsed ? 64 : 240,
         flexShrink: 0,
-        [`& .MuiDrawer-paper`]: {
-          width: collapsed ? 60 : 180,
+        position: 'fixed',
+        '& .MuiDrawer-paper': {
+          width: collapsed ? 64 : 240,
           boxSizing: 'border-box',
-          backgroundColor: '#233752',
-          color: 'white',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          bgcolor: 'background.paper',
+          borderRight: '1px solid',
+          borderColor: 'divider',
           overflowX: 'hidden',
-          transition: 'width 0.3s',
+          '&: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',
-          padding: '8px',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         }}
       >
-        {!collapsed && (
-          <Box
-            component="img"
-            src={logo}
-            alt="Logo"
-            sx={{ height: 120, width: 150 }}
-          />
-        )}
-        <IconButton onClick={toggleCollapse} sx={{ color: 'white' }}>
-          {collapsed ? <Menu /> : <ChevronLeft fontSize="large" />}
-        </IconButton>
+        <Box
+          component="img"
+          src={logo}
+          alt="NextStep"
+          className="logo-text"
+          sx={{ 
+            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)',
+          }}
+          onClick={() => navigate('/')}
+        />
       </Box>
+      <Divider />
       <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>
+        {menuItems.map((item) => (
+          <ListItem key={item.text} disablePadding>
+            <ListItemButton
+              selected={location.pathname === item.path}
+              onClick={() => navigate(item.path)}
+              sx={{
+                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': {
+                  bgcolor: 'action.hover',
+                  transform: 'translateX(4px)',
+                },
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: collapsed ? 'auto' : 40,
+                  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>
+              <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 disablePadding>
+            <ListItemButton
+              onClick={handleLogout}
+              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',
+                }}
+              >
+                <Logout />
+              </ListItemIcon>
+              <ListItemText 
+                primary="Logout"
+                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>
     </Drawer>
   );
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/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/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..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;
 }
 
 /**
@@ -353,70 +357,96 @@ 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;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+html, body, #root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #F8F9FA;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+body {
+  min-height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
 }
-a:hover {
-  color: #535bf2;
+
+#root {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
+/* Remove all other background-related styles */
+
 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;
+}
+
+input, textarea {
+  font-family: inherit;
 }
-button:hover {
-  border-color: #646cff;
+
+/* 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/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/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 b40cc51..1bf664b 100644
--- a/nextstep-frontend/src/pages/Chat.tsx
+++ b/nextstep-frontend/src/pages/Chat.tsx
@@ -1,122 +1,452 @@
-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, 
+  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('');
   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 theme = useTheme();
+
+  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 {
+      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;
+
+      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);
+      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...');
+      });
+
+      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);
+    }
+  }, []);
 
   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 = () => {
+  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 }}>
-      <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>
-        </div>
-
-        <div className="chat-messages">
-            {room.messages.length === 0 ? (
-                <div className="no-messages">
-                    <p>No messages yet. Start the conversation!</p>
-                </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>
-
-        <div className="online-users">
-            <h3>Online Users:</h3>
-            <DividedList onlineUsers={onlineUsers} onUserClick={onUserClick} />
-        </div>
-      </div>
+    <Box sx={{ 
+      maxWidth: '100%', 
+      mx: 'auto', 
+      p: 3,
+      display: 'flex',
+      gap: 3,
+    }}>
+      <Snackbar
+        open={!!error}
+        autoHideDuration={6000}
+        onClose={() => setError(null)}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert severity="error" onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      </Snackbar>
+
+      <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
+            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>
+        </Box>
+
+        <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 ? (
+            <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) => (
+              <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}
+                  </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()}
+                  </Typography>
+                </Box>
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color: 'inherit',
+                    lineHeight: 1.5,
+                  }}
+                  className="message-content"
+                >
+                  {m?.content}
+                </Typography>
+              </Box>
+            ))
+          )}
+          <div ref={messagesEndRef} />
+        </Paper>
+      </Paper>
+
+      <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
new file mode 100644
index 0000000..cbc4ed2
--- /dev/null
+++ b/nextstep-frontend/src/pages/Landing.tsx
@@ -0,0 +1,491 @@
+import React, { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  Typography,
+  Card,
+  CardContent,
+  Stack,
+  useTheme,
+  useMediaQuery,
+  Paper,
+  IconButton,
+} from '@mui/material';
+import {
+  School,
+  Work,
+  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 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 = [
+    {
+      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 (
+    <>
+      {/* Hero Section */}
+      <Box
+        sx={{
+          pt: { xs: 8, md: 12 },
+          pb: { xs: 8, md: 12 },
+          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}>
+              <Typography
+                variant="h1"
+                sx={{
+                  fontSize: { xs: '2.5rem', md: '3.5rem' },
+                  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,
+                  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"
+                  size="large"
+                  onClick={() => navigate('/register')}
+                  sx={{
+                    bgcolor: 'white',
+                    color: 'primary.main',
+                    '&:hover': {
+                      bgcolor: 'grey.100',
+                      transform: 'translateY(-2px)',
+                    },
+                  }}
+                >
+                  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)',
+                      transform: 'translateY(-2px)',
+                    },
+                  }}
+                >
+                  Sign In
+                </Button>
+              </Stack>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box
+                sx={{
+                  position: 'relative',
+                  width: '100%',
+                  maxWidth: 400,
+                  height: 'auto',
+                  display: { xs: 'none', md: 'block' },
+                }}
+              >
+                <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)',
+                      },
+                    },
+                    '@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))',
+                      },
+                    },
+                    '&:hover': {
+                      filter: 'drop-shadow(0 0 40px rgba(255, 255, 255, 0.6))',
+                      transition: 'all 0.3s ease',
+                    },
+                  }}
+                />
+              </Box>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+
+      {/* Features Section */}
+      <Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
+        <Typography
+          variant="h2"
+          align="center"
+          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}>
+              <Paper
+                elevation={2}
+                sx={{
+                  p: 3,
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  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)',
+                    },
+                  },
+                }}
+              >
+                <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>
+      </Container>
+
+      {/* CTA Section */}
+      <Box
+        sx={{
+          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',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: theme.palette.mode === 'dark' 
+              ? '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,
+          },
+        }}
+      >
+        <Container maxWidth="md" sx={{ position: 'relative', zIndex: 1 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
+              gap: 4,
+              animation: 'fadeInUp 0.8s ease-out',
+            }}
+          >
+            <Typography
+              variant="h2"
+              component="h1"
+              sx={{
+                fontWeight: 800,
+                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="h5"
+              sx={{
+                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.
+            </Typography>
+            <Button
+              variant="contained"
+              size="large"
+              endIcon={<ArrowForward />}
+              onClick={() => navigate('/register')}
+              sx={{
+                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
+            </Button>
+          </Box>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default Landing; 
\ No newline at end of file
diff --git a/nextstep-frontend/src/pages/Login.tsx b/nextstep-frontend/src/pages/Login.tsx
index 741691f..e9d1981 100644
--- a/nextstep-frontend/src/pages/Login.tsx
+++ b/nextstep-frontend/src/pages/Login.tsx
@@ -1,37 +1,53 @@
 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, LightMode, DarkMode } from '@mui/icons-material';
 import axios from 'axios';
-import { Container, TextField, Button, Typography, Box, Paper, Link, Alert } 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 { 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 theme = useTheme();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
+  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);
@@ -41,20 +57,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);
@@ -65,70 +76,329 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="login-container">
-      <Container component="main" maxWidth="xs">
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-          <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
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 4,
+        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={{
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: 4,
+            alignItems: 'center',
+            maxWidth: '1800px',
+            mx: 'auto',
+          }}
+        >
+          {/* Left side - Welcome message */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ flex: 1 }}
+          >
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 800,
+                mb: 2,
+                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"
+              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>
-            {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)}
-              />
+            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+              {[
+                '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>
 
-              <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 }}
+          {/* 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',
+                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,
+                  color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'text.primary'
+                }}
               >
-                Login
-              </Button>
-              <Typography variant="body2" align="center">
-                Don't have an account?{' '}
-                <Link component={RouterLink} to="/register">
-                  Register
-                </Link>
+                Sign In
               </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>
+
+              {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
+                  fullWidth
+                  variant="outlined"
+                  startIcon={<Google />}
+                  onClick={handleGoogleLogin}
+                  sx={{ 
+                    mb: 2, 
+                    py: 1.5,
+                    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': {
+                      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
+                </Button>
+              </Box>
+
+              <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>
+
+              <form onSubmit={handleSubmit}>
+                <TextField
+                  fullWidth
+                  label="Email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  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
+                  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"
+                          sx={{
+                            color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                          }}
+                        >
+                          {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                  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,
+                    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" 
+                    sx={{ 
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'text.secondary'
+                    }}
+                  >
+                    Don't have an account?{' '}
+                    <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>
+                </Box>
+              </form>
+            </Paper>
+          </motion.div>
         </Box>
       </Container>
-    </div>
+    </Box>
   );
 };
 
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>
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/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 6847b32..401d739 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"
@@ -287,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}>
@@ -388,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
@@ -434,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 }}>
@@ -462,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: '#f0f0f0', 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>
@@ -484,19 +500,39 @@ const Quiz: React.FC = () => {
           )}
 
           {quizSubmitted && quiz.finalGrade !== undefined && (
-            <Box sx={{ mt: 4, p: 3, bgcolor: '#e8f5e9', borderRadius: 2, boxShadow: 2, textAlign: 'center' }}>
-              <Typography variant="h5" gutterBottom>
+            <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 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>
diff --git a/nextstep-frontend/src/pages/Register.tsx b/nextstep-frontend/src/pages/Register.tsx
index 7ac8cf0..bfbeaa9 100644
--- a/nextstep-frontend/src/pages/Register.tsx
+++ b/nextstep-frontend/src/pages/Register.tsx
@@ -1,33 +1,66 @@
 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, LightMode, DarkMode } from '@mui/icons-material';
 import axios from 'axios';
-import { Container, TextField, Button, Typography, Box, Paper, Link, Alert } from '@mui/material';
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { config } from '../config';
+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 theme = useTheme();
+  const { isDarkMode, toggleTheme } = useCustomTheme();
+  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);
@@ -38,77 +71,320 @@ const Register: React.FC = () => {
   };
 
   return (
-    <div className="body">
-      <Container component="main" maxWidth="xs">
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <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
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 4,
+        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={{
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: 4,
+            alignItems: 'center',
+            maxWidth: '1800px',
+            mx: 'auto',
+          }}
+        >
+          {/* Left side - Welcome message */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5 }}
+            style={{ flex: 1 }}
+          >
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 800,
+                mb: 2,
+                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>
-            {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 }}
+            <Typography
+              variant="h5"
+              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' } }}>
+              {[
+                '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>
+
+          {/* 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',
+                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,
+                  color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'text.primary'
+                }}
               >
-                Register
-              </Button>
-              <Typography variant="body2" align="center">
-                Already have an account?{' '}
-                <Link component={RouterLink} to="/login">
-                  Login
-                </Link>
+                Create Account
               </Typography>
-            </Box>
-          </Paper>
+
+              {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
+                  fullWidth
+                  label="Username"
+                  name="username"
+                  value={formData.username}
+                  onChange={handleChange}
+                  required
+                  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
+                  label="Email"
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  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
+                  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"
+                          sx={{
+                            color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : undefined,
+                          }}
+                        >
+                          {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                  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
+                  label="Confirm Password"
+                  type={showPassword ? 'text' : 'password'}
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  required
+                  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,
+                    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" 
+                    sx={{ 
+                      color: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'text.secondary'
+                    }}
+                  >
+                    Already have an account?{' '}
+                    <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>
+                </Box>
+              </form>
+            </Paper>
+          </motion.div>
         </Box>
       </Container>
-    </div>
+    </Box>
   );
 };
 
diff --git a/nextstep-frontend/src/pages/Resume.tsx b/nextstep-frontend/src/pages/Resume.tsx
index 249c471..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,
   },
 }));
 
@@ -420,7 +439,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
@@ -458,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>
@@ -472,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>
             )}
diff --git a/nextstep-frontend/src/theme.ts b/nextstep-frontend/src/theme.ts
new file mode 100644
index 0000000..d23a2ef
--- /dev/null
+++ b/nextstep-frontend/src/theme.ts
@@ -0,0 +1,261 @@
+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: '#0984E3',
+      light: '#74B9FF',
+      dark: '#0652DD',
+    },
+    secondary: {
+      main: '#00B894',
+      light: '#55EFC4',
+      dark: '#00A884',
+    },
+    background: {
+      default: '#1A1A1A',
+      paper: '#2D2D2D',
+    },
+    text: {
+      primary: '#FFFFFF',
+      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.2)',
+          '&:hover': {
+            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)',
+          },
+        },
+      },
+    },
+    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)',
+          },
+        },
+      },
+    },
+    MuiTypography: {
+      styleOverrides: {
+        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: '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)',
+            },
+          },
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: 'rgba(255, 255, 255, 0.12)',
+        },
+      },
+    },
+    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