diff --git a/frontend/code/public/images/pong.png b/frontend/code/public/images/pong.png
deleted file mode 100644
index 5adae95..0000000
Binary files a/frontend/code/public/images/pong.png and /dev/null differ
diff --git a/frontend/code/src/404/index.tsx b/frontend/code/src/404/index.tsx
deleted file mode 100644
index 17ccf57..0000000
--- a/frontend/code/src/404/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Font} from './assest/Font'
-export const Error = () =>
-{
-    return (
-        <div className=" flex flex-col bg-black h-screen z-0 w-screen relative">
-            <Font/>
-            <div className=" absolute flex z-10 items-center top-1/4 left-1/4  h-1/2 w-1/2 justify-center auth-container overflow-hidden bg-[url(./images/Error.gif)] bg-luxury bg-no-repeat bg-cover bg-center"></div>
-            <h1 className='absolute text-white text-3xl z-30 font-lexend top-[64%] left-[39%]'>Page Not Found</h1>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/frontend/code/src/Layout/index.tsx b/frontend/code/src/Layout/index.tsx
deleted file mode 100644
index 74daf5c..0000000
--- a/frontend/code/src/Layout/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Logo } from './Assets/Logo'
-import { Alert } from './Assets/Alert'
-import { Avatar } from './Assets/Avatar'
-import {BiSearch} from 'react-icons/bi'
-export const Layout =  () =>
-{
-    return (
-    <>
-        <div className='fixed h-screen bg-slate-50 '> 
-            <div className=' flex items-center content-around gap-x-8 sm:gap-x-6 justify-end pr-8  p-2 w-screen h-18 bg-base-200'> 
-                <Logo />
-                <div className='hidden sm:flex sm:items-center '>
-                    <input type="text" placeholder="Search" className=" absolute right-40 input w-72 mr-4 h-10 max-w-xs"/>
-                    <div className='relative left-0 top-0 w-12 '><BiSearch size="1.4em" /></div>
-                </div>
-                <Alert /> 
-                <Avatar />
-            </div>
-            <div className='sm:fixed hidden sm:block h-screen bg-base-200 min-w-full max-w-[9%] w-20  '></div>
-            <div className='absolute right-0 w-screen sm:w-[90vw] md:w-[91vw] xl:w-[94vw] h-screen z-10 bg-base-100 sm:rounded-tl-3xl'></div>
-        </div>
-    </>
-    )
-}
\ No newline at end of file
diff --git a/frontend/code/public/images/Error.gif b/frontend/code/src/components/404/assest/Error.gif
similarity index 100%
rename from frontend/code/public/images/Error.gif
rename to frontend/code/src/components/404/assest/Error.gif
diff --git a/frontend/code/src/404/assest/Font.tsx b/frontend/code/src/components/404/assest/Font.tsx
similarity index 100%
rename from frontend/code/src/404/assest/Font.tsx
rename to frontend/code/src/components/404/assest/Font.tsx
diff --git a/frontend/code/src/404/assest/font.svg b/frontend/code/src/components/404/assest/font.svg
similarity index 100%
rename from frontend/code/src/404/assest/font.svg
rename to frontend/code/src/components/404/assest/font.svg
diff --git a/frontend/code/src/components/404/index.tsx b/frontend/code/src/components/404/index.tsx
new file mode 100644
index 0000000..51100d3
--- /dev/null
+++ b/frontend/code/src/components/404/index.tsx
@@ -0,0 +1,11 @@
+import {Font} from './assest/Font'
+export const Error = () =>
+{
+    return (
+        <div className=" flex flex-col bg-black h-screen z-0 w-screen relative ">
+            <Font/>
+            <div className=" absolute flex z-10 items-center top-0 left-0 bg-contain h-screen w-screen max-w-full justify-center overflow-hidden bg-gif-error bg-no-repeat bg-center"></div>
+            <h1 className='relative flex items-center pt-44 sm:pt-56 justify-center text-white text-[3.5vw] z-30 h-full font-lexend '>Page Not Found</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/code/src/Layout/Assets/Alert.tsx b/frontend/code/src/components/Layout/Assets/Alert.tsx
similarity index 100%
rename from frontend/code/src/Layout/Assets/Alert.tsx
rename to frontend/code/src/components/Layout/Assets/Alert.tsx
diff --git a/frontend/code/src/Layout/Assets/Avatar.tsx b/frontend/code/src/components/Layout/Assets/Avatar.tsx
similarity index 100%
rename from frontend/code/src/Layout/Assets/Avatar.tsx
rename to frontend/code/src/components/Layout/Assets/Avatar.tsx
diff --git a/frontend/code/src/Layout/Assets/Dash.tsx b/frontend/code/src/components/Layout/Assets/Dash.tsx
similarity index 100%
rename from frontend/code/src/Layout/Assets/Dash.tsx
rename to frontend/code/src/components/Layout/Assets/Dash.tsx
diff --git a/frontend/code/src/Layout/Assets/Logo.tsx b/frontend/code/src/components/Layout/Assets/Logo.tsx
similarity index 100%
rename from frontend/code/src/Layout/Assets/Logo.tsx
rename to frontend/code/src/components/Layout/Assets/Logo.tsx
diff --git a/frontend/code/src/Layout/Assets/dash.svg b/frontend/code/src/components/Layout/Assets/dash.svg
similarity index 100%
rename from frontend/code/src/Layout/Assets/dash.svg
rename to frontend/code/src/components/Layout/Assets/dash.svg
diff --git a/frontend/code/src/Layout/Assets/logo.svg b/frontend/code/src/components/Layout/Assets/logo.svg
similarity index 100%
rename from frontend/code/src/Layout/Assets/logo.svg
rename to frontend/code/src/components/Layout/Assets/logo.svg
diff --git a/frontend/code/src/Layout/images/avatar.jpg b/frontend/code/src/components/Layout/images/avatar.jpg
similarity index 100%
rename from frontend/code/src/Layout/images/avatar.jpg
rename to frontend/code/src/components/Layout/images/avatar.jpg
diff --git a/frontend/code/src/components/Layout/index.tsx b/frontend/code/src/components/Layout/index.tsx
new file mode 100644
index 0000000..a662da4
--- /dev/null
+++ b/frontend/code/src/components/Layout/index.tsx
@@ -0,0 +1,39 @@
+import { Logo } from './Assets/Logo'
+import { Alert } from './Assets/Alert'
+import { Avatar } from './Assets/Avatar'
+import {BiSearch} from 'react-icons/bi'
+
+
+export const Layout =  () =>
+{
+    return (
+    <>
+        <div data-theme="mytheme" className='fixed h-screen bg-slate-50 '> 
+            <div className=' flex items-center content-around gap-x-8 sm:gap-x-6 justify-end pr-8  p-2 w-screen h-18 bg-base-200'> 
+                <Logo />
+                <div className='hidden sm:flex sm:items-center '>
+                    <input type="text" placeholder="Search" className=" absolute right-40 input w-72 mr-4 h-10 max-w-xs"/>
+                    <div className='relative left-0 top-0 w-12 '><BiSearch size="1.4em" /></div>
+                </div>
+                <Alert /> 
+                <Avatar />
+            </div>
+            
+            <div className='sm:fixed hidden sm:block h-screen bg-base-200 min-w-full max-w-[9%] w-20  '></div>
+            <div className=" sm:hidden btm-nav bg-base-200 hover:stroke-red-400">
+                <button className="text-primary ">
+                    <svg className="hover:stroke-red-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+                </button>
+                <button className="text-primary ">
+                    <svg className="hover:stroke-red-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                </button>
+                <button className="text-primary">
+                    <svg className="hover:stroke-red-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+                </button>
+            </div>
+            <div className='absolute h-[86%] sm:h-screen right-0 w-screen sm:w-[90vw] md:w-[91vw] xl:w-[94vw]  z-10 bg-base-100 sm:rounded-tl-3xl'></div>
+        
+        </div>
+    </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/code/src/Lobby/index.tsx b/frontend/code/src/components/Lobby/index.tsx
similarity index 61%
rename from frontend/code/src/Lobby/index.tsx
rename to frontend/code/src/components/Lobby/index.tsx
index 954d844..d55b0ef 100644
--- a/frontend/code/src/Lobby/index.tsx
+++ b/frontend/code/src/components/Lobby/index.tsx
@@ -2,7 +2,7 @@
 export const Lobby =  () =>
 {
     return (
-        <div data-theme="mytheme" className="flex h-screen bg-base-100">
+        <div  className="flex h-screen bg-base-100">
             <div className="h-12 w-12 "></div>
         </div>
     );
diff --git a/frontend/code/src/Auth/Assets/Button.tsx b/frontend/code/src/components/Login/Assets/Button.tsx
similarity index 100%
rename from frontend/code/src/Auth/Assets/Button.tsx
rename to frontend/code/src/components/Login/Assets/Button.tsx
diff --git a/frontend/code/public/images/bg.gif b/frontend/code/src/components/Login/Assets/bg.gif
similarity index 100%
rename from frontend/code/public/images/bg.gif
rename to frontend/code/src/components/Login/Assets/bg.gif
diff --git a/frontend/code/src/Auth/index.tsx b/frontend/code/src/components/Login/index.tsx
similarity index 78%
rename from frontend/code/src/Auth/index.tsx
rename to frontend/code/src/components/Login/index.tsx
index 98a0863..c7a915d 100644
--- a/frontend/code/src/Auth/index.tsx
+++ b/frontend/code/src/components/Login/index.tsx
@@ -1,12 +1,11 @@
 import {  Link } from "react-router-dom";
 import pingpong from '../images/pingpong.svg'
 import {Button} from './Assets/Button'
-
 export const Login =  () =>
 {
 
     return (
-      <div className="overflow-hidden  flex flex-col items-center justify-center h-screen bg-[url(./images/bg.gif)] bg-luxury bg-no-repeat bg-cover bg-center">
+      <div className={`overflow-hidden  flex flex-col items-center justify-center h-screen bg-login bg-luxury bg-no-repeat bg-cover bg-center`}>
       <div className="absolute h-full w-full bg-black opacity-40 z-10"></div>
       <div className="absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
           <div className=" flex flex-col justify-center">
diff --git a/frontend/code/src/Auth/main.tsx b/frontend/code/src/components/Login/main.tsx
similarity index 100%
rename from frontend/code/src/Auth/main.tsx
rename to frontend/code/src/components/Login/main.tsx
diff --git a/frontend/code/src/images/pingpong.svg b/frontend/code/src/components/images/pingpong.svg
similarity index 100%
rename from frontend/code/src/images/pingpong.svg
rename to frontend/code/src/components/images/pingpong.svg
diff --git a/frontend/code/public/images/vid.gif b/frontend/code/src/components/images/vid.gif
similarity index 100%
rename from frontend/code/public/images/vid.gif
rename to frontend/code/src/components/images/vid.gif
diff --git a/frontend/code/src/images/Error.gif b/frontend/code/src/images/Error.gif
deleted file mode 100644
index 5111727..0000000
Binary files a/frontend/code/src/images/Error.gif and /dev/null differ
diff --git a/frontend/code/src/images/bg.gif b/frontend/code/src/images/bg.gif
deleted file mode 100644
index ac7f770..0000000
Binary files a/frontend/code/src/images/bg.gif and /dev/null differ
diff --git a/frontend/code/src/images/vid.gif b/frontend/code/src/images/vid.gif
deleted file mode 100644
index d63cc0f..0000000
Binary files a/frontend/code/src/images/vid.gif and /dev/null differ
diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx
index 21fd1e9..acfe1c2 100644
--- a/frontend/code/src/index.tsx
+++ b/frontend/code/src/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import {Login} from './Auth'
-import {Main} from './Auth/main'
-import {Lobby} from './Lobby/index'
-import {Layout} from './Layout/index'
-import {Error} from './404/index'
+import {Login} from './components/Login'
+import {Main} from './components/Login/main'
+import {Lobby} from './components/Lobby/index'
+import {Layout} from './components/Layout/index'
+import {Error} from './components/404/index'
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js
index 529a8b5..c0a9fc9 100644
--- a/frontend/code/tailwind.config.js
+++ b/frontend/code/tailwind.config.js
@@ -10,6 +10,11 @@ module.exports = {
         poppins: ['Poppins', 'sans-serif'],
         lexend: ['Lexend Peta', 'sans-serif'],
       },
+      backgroundImage: {
+        'login': "url('./components/Login/Assets/bg.gif')",
+        'gif-error': "url('./components/404/assest/Error.gif')",
+      },
+
     },
   },