diff --git a/index.html b/index.html
index 0c589ec..179f41f 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/App.jsx b/src/App.jsx
index 6c34533..8fc104d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,9 @@ import { useState } from 'react'
 import TopOrg from './components/TopOrganization'
 import Header from './components/Header'
 import Hero from './components/Hero'
+import CreateAccount from './components/autorization/CreateAccount'
+import Login  from './components/autorization/Login'
+import Footer from './components/footer/Footer'
 
 
 function App() {
@@ -9,9 +12,14 @@ function App() {
 
   return (
    <>
-     <Header/>
+   {/* <Login/> */}
+   <Footer/>
+   {/* <CreateAccount/> */}
+   
+  
+     {/* <Header/>
      <Hero/>
-     <TopOrg/>
+     <TopOrg/> */}
     </>
   )
 }
diff --git a/src/components/autorization/CreateAccount.jsx b/src/components/autorization/CreateAccount.jsx
new file mode 100644
index 0000000..355153f
--- /dev/null
+++ b/src/components/autorization/CreateAccount.jsx
@@ -0,0 +1,69 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+const ColorButton = styled(Button)(({ theme }) => ({
+  color: theme.palette.getContrastText('#272342'),
+  backgroundColor: '#272342',
+  '&:hover': {
+    backgroundColor: '#272342',
+  },
+}));
+
+const CreateAccount = () => {
+  return (
+    <div className="bg-body w-full h-[100vh] flex ">
+      <div className="hidden md:flex w-[40%]">
+        <p className="text-[2.2rem] text-white font-semibold mt-24 ml-12 ">Discover amezing <br />events. <br /> Sign up for personalized <br />recommendations <br /> today!</p>
+      </div>
+      <div className=" bg-white w-[100%] rounded-l-[2rem] md:w-[60%]">
+        <h1 className="text-3xl font-sens font-semibold text-center  mt-16">
+          Create Account
+        </h1>
+        <div  className="pt-10  flex md:justify-center  ">
+          <Box
+            component="form"
+            sx={{
+              width: 500,
+              maxWidth: '100%',
+            }}
+            noValidate
+            autoComplete="off"
+          >  
+            <div className="p-5">
+            <TextField fullWidth
+              id="outlined-password-input"
+              label="Full Name"
+              type="text"
+              autoComplete="current-password"
+            />
+            </div>
+            <div className="p-5">
+            <TextField fullWidth
+              id="outlined-password-input"
+              label="E-mail Address"
+              type="text"
+              autoComplete="current-password"
+            />
+            </div >
+            <div className="p-5">
+              <TextField fullWidth
+              id="outlined-password-input"
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+            />
+            </div>
+    
+          </Box>
+        </div>
+        <div className="flex justify-center"><ColorButton variant="contained"> <h2 className="px-10 sm:px-36  py-2">Create Account</h2> </ColorButton></div>
+        <p className="flex justify-center p-5" >Already have an account? <b><a href="">Log In</a></b></p>
+      </div>
+    </div>
+  );
+};
+
+export default CreateAccount;
diff --git a/src/components/autorization/Login.jsx b/src/components/autorization/Login.jsx
new file mode 100644
index 0000000..5ca28c8
--- /dev/null
+++ b/src/components/autorization/Login.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+const ColorButton = styled(Button)(({ theme }) => ({
+  color: theme.palette.getContrastText('#272342'),
+  backgroundColor: '#272342',
+  '&:hover': {
+    backgroundColor: '#272342',
+  },
+}));
+
+const Login = () => {
+  return (
+    <div className="bg-body w-full h-[100vh] flex ">
+      <div className="hidden md:flex w-[40%]">
+        <p className="text-[2.2rem] text-white font-semibold mt-24 ml-12 ">Welcome back! <br /> Login for personalized <br />recommendations <br /> today!</p>
+      </div>
+      <div className=" bg-white w-[100%] rounded-l-[2rem] md:w-[60%]">
+        <h1 className="text-3xl font-sens font-semibold text-center  mt-16">
+          Login
+        </h1>
+        <div  className="pt-10  flex md:justify-center  ">
+          <Box
+            component="form"
+            sx={{
+              width: 500,
+              maxWidth: '100%',
+            }}
+            noValidate
+            autoComplete="off"
+          >
+            <div className="p-5">
+            <TextField fullWidth
+              id="outlined-password-input"
+              label="E-mail Address"
+              type="text"
+              autoComplete="current-password"
+            />
+            </div >
+            <div className="p-5">
+              <TextField fullWidth
+              id="outlined-password-input"
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+            />
+            </div>
+    
+          </Box>
+        </div>
+        <div className="flex justify-center"><ColorButton variant="contained"> <h2 className="px-10 sm:px-36  py-2">Login</h2> </ColorButton></div>
+        <p className="flex justify-center p-5" >Don't have an account? <b><a href="">Sign up</a></b></p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 0000000..f5a6fa5
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+function Footer() {
+  return (
+    <div>
+      <div className='bg-body w-full h-[100vh] md:h-[50vh] bottom-0 text-white flex' >
+       <div className=' w-[100%] md:w-[50%] md:flex md:ml-16 justify-center font-thin'>
+         <div className=' p-10' >
+            <p className='text-xl font-semibold mb-6'>Company info</p>
+            <p>About Us</p>
+            <p>Contact Us</p>
+            <p>Careers</p>
+            <p>FAQs</p>
+            <p>Terms of Service</p>
+            <p>Privacy Policy</p>
+        </div>
+        <div  className=' p-10' >
+            <p className='text-xl font-semibold mb-6'>Help</p>
+            <p>Account Support</p>
+            <p>Event Ticketing</p>
+            <p>Listing Events</p>
+            <p>Ticketing Purches terms & Condition</p>
+        </div>
+        </div>
+        <div className='w-[100%] md:w-[50%] md:flex  justify-center font-thin'>
+         <div className=' p-10' >
+            <p className='text-xl font-semibold mb-6'>Categories</p>
+            <p>Concerts & Gigs</p>
+            <p>Festivals & LifeStyle</p>
+            <p>Business & Newtworking</p>
+            <p>Food & Drinks</p>
+            <p>Performing Arts</p>
+            <p>Sports & Outdoors</p>
+            <p>Exhibitions</p>
+        </div>
+        <div  className=' p-10' >
+            <p className='text-xl font-semibold mb-6'>Follow Us</p>
+            <p>Facebook</p>
+            <p>Instagram</p>
+            <p>Twitter</p>
+            <p>Youtube</p>
+        </div>
+        </div>
+      </div>
+      <div className='bg-body'>
+      <hr className='h-[0.1rem] bg-gray-900 w-3/4 flex justify-center ml-[10%]'/>
+      <p className='flex justify-center text-gray-300 p-4'>&copy;2024 Neighborly. All rights reserved. </p>
+      
+      </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/src/index.css b/src/index.css
index bd6213e..b5c61c9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 513995e..f0e2e00 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,12 +8,12 @@ export default {
     extend: {
       colors:{
         "navbar":'#002C3E',
-       "body":'#F6F6F6',
+       "body":'#272342',
         "button":"#230c69"
       //   "navbar":'',
       //  "body":'#F6F6F6',#002C3E
       //   "button":"#287094"
-      }
+      },
     },
   },
   plugins: [],
