diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
deleted file mode 100644
index 3a9fa98..0000000
--- a/src/components/LoginForm.js
+++ /dev/null
@@ -1,323 +0,0 @@
-import React, { useState } from 'react';
-import {
-  TextField,
-  Button,
-  Typography,
-  Stack,
-  Box,
-  IconButton,
-  InputAdornment
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
-import { VisibilityOutlined } from '@mui/icons-material';
-
-const LoginForm = () => {
-  const theme = useTheme();
-  const [showPassword, setShowPassword] = useState(false);
-
-  const handleTogglePassword = () => {
-    setShowPassword((prev) => !prev);
-  };
-
-  return (
-    <Box
-      flex={1}
-      paddingTop={4}
-      paddingBottom={4}
-      paddingLeft={2}
-      paddingRight={2}
-      sx={{
-        backgroundColor: '#FFFFFF',
-        minHeight: '10vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'sticky',
-
-
-      }}
-    >
-      <Box
-        sx={{
-          width: {
-            xs: '120%',
-            sm: '100%',
-            md: '120%',
-            lg: '120%'
-          },
-          maxWidth: '600px'
-        }}
-      >
-        <Stack spacing={2}>
-
-          {/* Logo */}
-          <Box>
-            <img
-              src="/image.png"
-              alt="logo"
-              style={{
-                width: '4vw',
-                maxWidth: '80px',
-                height: 'auto',
-                objectFit: 'contain'
-              }}
-            />
-          </Box>
-
-          <Typography
-            variant="h4"
-            fontWeight={700}
-            sx={{
-              fontSize: {
-                xs: '1.8rem',
-                sm: '2rem',
-                md: '2.2rem'
-              }
-            }}
-          >
-            Login
-          </Typography>
-
-          <Typography
-            variant="body2"
-            color="text.secondary"
-            fontWeight={500}
-            sx={{ pb: 1 }}
-          >
-            Enter your username and password to access your account securely. Welcome back to our service!
-          </Typography>
-
-          {/* Email Input */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            <Typography
-              variant="body2"
-              color="black"
-              sx={{
-                fontWeight: '500',
-                fontSize: '16px'
-              }}
-            >
-              Email
-            </Typography>
-            <TextField
-              placeholder="Enter your email"
-              type="email"
-              variant="outlined"
-              fullWidth
-              sx={{
-                '& input': {
-                  fontWeight: 500,
-                  fontSize: '15px'
-                },
-                '& input::placeholder': {
-                  color: '#969BA7'
-                },
-                '& .MuiOutlinedInput-root': {
-                  borderRadius: '10px',
-                  transition: '0.3s'
-                },
-                '& .MuiOutlinedInput-root.Mui-focused': {
-                  borderColor: '#3f51b5',
-                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
-                }
-              }}
-            />
-          </Box>
-
-          {/* Password Input */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            <Typography
-              variant="body2"
-              color="black"
-              sx={{
-                fontWeight: '500',
-                fontSize: '16px'
-              }}
-            >
-              Password
-            </Typography>
-            <TextField
-              type={showPassword ? 'text' : 'password'}
-              placeholder="Enter your password"
-              fullWidth
-              variant="outlined"
-              autoComplete="new-password"
-              sx={{
-                '& input': {
-                  fontWeight: 500,
-                  fontSize: '15px'
-                },
-                '& input::placeholder': {
-                  color: '#969BA7'
-                },
-                '& .MuiOutlinedInput-root': {
-                  borderRadius: '10px',
-                  transition: '0.3s'
-                },
-                '& .MuiOutlinedInput-root.Mui-focused': {
-                  borderColor: '#3f51b5',
-                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
-                }
-              }}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton onClick={handleTogglePassword} edge="end">
-                      {showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
-                    </IconButton>
-                  </InputAdornment>
-                )
-              }}
-            />
-          </Box>
-
-          {/* Login Button */}
-          <Box sx={{ pt: 2 }}>
-            <Button
-              variant="contained"
-              fullWidth
-              sx={{
-                fontWeight: 600,
-                fontSize: {
-                  xs: '14px',
-                  sm: '16px'
-                },
-                height: {
-                  xs: '45px',
-                  sm: '52px'
-                },
-                borderRadius: '50px',
-                textTransform: 'none',
-                backgroundColor: '#FF914D',
-                '&:hover': {
-                  backgroundColor: '#e57f3f'
-                }
-              }}
-            >
-              Log in
-            </Button>
-          </Box>
-
-          {/* Divider */}
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
-            <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
-            <Typography
-              variant="body1"
-              sx={{
-                fontWeight: 500,
-                fontSize: '16px',
-                color: 'black'
-              }}
-            >
-              Or
-            </Typography>
-            <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
-          </Box>
-
-          {/* Google Button */}
-          <Button
-            variant="outlined"
-            fullWidth
-            sx={{
-              fontWeight: 500,
-              fontSize: '16px',
-              borderRadius: '50px',
-              height: '50px',
-              textTransform: 'none',
-              gap: 1,
-              borderColor: '#E6E6E6',
-              color: 'black',
-              '&:hover': {
-                borderColor: 'black',
-                backgroundColor: 'transparent'
-              }
-            }}
-          >
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <img
-                src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
-                alt="Google"
-                style={{ width: 25, height: 25 }}
-              />
-            </Box>
-            Login with Google
-          </Button>
-
-          {/* Facebook Button */}
-          <Button
-            variant="outlined"
-            fullWidth
-            sx={{
-              fontWeight: 500,
-              fontSize: '16px',
-              borderRadius: '50px',
-              height: '50px',
-              textTransform: 'none',
-              gap: 1,
-              borderColor: '#E6E6E6',
-              color: 'black',
-              '&:hover': {
-                borderColor: 'black',
-                backgroundColor: 'transparent'
-              }
-            }}
-          >
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <img
-                src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png"
-                alt="Facebook"
-                style={{ width: 25, height: 25 }}
-              />
-            </Box>
-            Login with Facebook
-          </Button>
-
-          {/* Register Link */}
-          <Typography
-            variant="body2"
-            sx={{
-              fontSize: '16px',
-              textAlign: 'center',
-              color: '#969BA7',
-              pt: 3
-            }}
-          >
-            Don’t have an account?{' '}
-            <a
-              href="#"
-              style={{
-                color: '#2261FF',
-                textDecoration: 'none'
-              }}
-            >
-              Register
-            </a>
-          </Typography>
-
-          {/* Terms */}
-          <Typography
-            variant="caption"
-            sx={{
-              fontSize: '14px',
-              textAlign: 'center',
-              color: '#969BA7',
-              pt: 5
-            }}
-          >
-            By logging in, I agree to the{' '}
-            <a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
-              Terms of Service
-            </a>{' '}
-            and{' '}
-            <a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
-              Privacy Policy
-            </a>.
-          </Typography>
-        </Stack>
-      </Box>
-    </Box>
-  );
-};
-
-export default LoginForm;
diff --git a/src/components/SidePanel.js b/src/components/SidePanel.js
deleted file mode 100644
index 7d00257..0000000
--- a/src/components/SidePanel.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-
-import {
-    Button,
-    Typography,
-    Stack,
-    Box
-} from '@mui/material';
-
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';  // استيراد أيقونة السهم
-
-const SidePanel = ({ setMode, mode }) => {
-    const [currentSlide, setCurrentSlide] = useState(0);
-
-    const slides = [
-        {
-            image: '/images/waitress3.png',
-            title: "Welcome to our cutting-edge postal application,",
-            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
-        },
-        {
-            image: '/images/waitress3.png',
-            title: "Second Slide Title",
-            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
-        },
-        {
-            image: '/images/waitress3.png',
-            title: "Third Slide Title",
-            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
-        },
-        {
-            image: '/images/waitress3.png',
-            title: "Fourth Slide Title",
-            description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
-        }
-    ];
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setCurrentSlide((prev) => (prev + 1) % slides.length);
-        }, 5000);
-        return () => clearInterval(interval);
-    }, [slides.length]);
-
-    return (
-        <Box
-            flex={1}
-            padding={2}
-            sx={{
-                display: { xs: "none", sm: "block" },
-                position: 'sticky',
-                height: 'calc(102vh - 40px)', // لضمان ملاءمته للشاشة
-            }}
-        >
-
-            <Stack spacing={2} sx={{ width: '100%', height: '100%' }}>
-                <Box
-                    sx={{
-                        width: '100%',
-                        height: '100vh',
-                        position: 'relative',
-                        overflow: 'hidden',
-                        borderRadius: '20px',
-
-                    }}
-                >
-                    {/* الصورة الحالية */}
-                    <img
-                        src={slides[currentSlide].image}
-                        alt={`Slide ${currentSlide + 1}`}
-                        style={{
-                            width: '100%',
-                            height: '100%',
-                            objectFit: 'cover',
-                            display: 'block'
-                        }}
-                    />
-
-                    {/* مربع النص في الأسفل */}
-                    <Box
-                        sx={{
-                            position: 'absolute',
-                            bottom: 0,
-                            left: 0,
-                            width: '100%',
-                            height: {
-                                md: '37vh',  // الافتراضي للشاشات الصغيرة
-                                // xs: '5vh',
-                                sm: '42vh',// عندما تكون الشاشة متوسطة أو أكبر
-                                lg: '31vh',   // من 1200px إلى أقل من 1536px
-                             
-                            },
-
-                            bgcolor: 'rgba(0, 0, 0, 0.2)',
-                            color: 'white',
-                            borderBottomLeftRadius: '20px',
-                            borderBottomRightRadius: '20px',
-                            p: 3,
-                            boxSizing: 'border-box',
-                            boxShadow: '0px -40px 20px rgba(0, 0, 0, 0.2)',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            justifyContent: 'flex-start',
-                            alignItems: 'flex-start',
-                        }}
-                    >
-                        <Button
-                            variant="contained"
-                            size="small"
-                            onClick={() => window.open('https://www.google.com', '_blank')}
-                            sx={{
-
-                                mb: 1,
-                                bgcolor: 'rgba(255, 255, 255, 0.24)',
-                                color: 'white',
-                                textTransform: 'none',
-                                borderRadius: '12px',  // زاوية منحنية
-                                display: 'flex', // لتوزيع الأيقونة والنص بشكل أفقي
-                                alignItems: 'center',  // لضبط الأيقونة والنص في المنتصف
-                                padding: '6px 20px',  // يمكن تعديل المسافة حول النص والأيقونة
-                                borderRadius: '50px',
-                                fontSize: '16px',
-                                fontWeight: 500,
-                                marginBottom: '20px'
-                            }}
-
-                        >
-                            Plus
-                            {/* إضافة أيقونة السهم مع تعديل زاوية الدوران */}
-                            <ArrowForwardIcon sx={{ ml: 1, transform: 'rotate(-45deg)' }} /> {/* تعديل زاوية السهم */}
-                        </Button>
-
-                        <Typography
-                            sx={{
-                                wordBreak: 'break-word',
-                                fontSize: '120%',
-                                fontWeight: 400,
-                            }}
-                        >
-                            {slides[currentSlide].description}
-                        </Typography>
-                    </Box>
-
-                    {/* مؤشرات الشرائح */}
-                    <Box
-                        sx={{
-                            position: 'absolute',
-                            bottom: '1vh',  // جعل المؤشرات تحت النص
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            display: 'flex',
-                            gap: 1,
-                            width: '100%',
-                            justifyContent: 'center', // تأكد من أن المؤشرات تأخذ عرض الصورة بالكامل
-                        }}
-                    >
-                        {slides.map((_, index) => (
-                            <Box
-                                key={index}
-                                sx={{
-                                    width: '20%',
-                                    height: 5,
-                                    bgcolor: index === currentSlide ? 'white' : 'rgba(255, 255, 255, 0.5)',
-                                    borderRadius: 2,
-                                    cursor: 'pointer',
-                                    transition: 'background-color 0.3s',
-                                }}
-                                onClick={() => setCurrentSlide(index)}
-                            />
-                        ))}
-                    </Box>
-                </Box>
-            </Stack>
-            <Box position="fixed">
-
-            </Box>
-        </Box>
-    )
-}
-
-export default SidePanel;
\ No newline at end of file