diff --git a/package-lock.json b/package-lock.json
index 11086a5..b07c529 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "husky": "^8.0.3",
         "prettier": "^3.0.3",
         "sass": "^1.68.0",
-        "typescript": "^5.2.2"
+        "typescript": "^4.9.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -19605,15 +19605,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/package.json b/package.json
index 71f42c9..45b74bb 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,6 @@
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
     "sass": "^1.68.0",
-    "typescript": "^5.2.2"
+    "typescript": "^4.9.5"
   }
 }
diff --git a/src/app/assets/images/github.png b/src/app/assets/images/github.png
new file mode 100644
index 0000000..509e417
Binary files /dev/null and b/src/app/assets/images/github.png differ
diff --git a/src/app/assets/images/login2.png b/src/app/assets/images/login2.png
new file mode 100644
index 0000000..987f210
Binary files /dev/null and b/src/app/assets/images/login2.png differ
diff --git a/src/features/login/index.scss b/src/features/login/index.scss
new file mode 100644
index 0000000..a6dd6e2
--- /dev/null
+++ b/src/features/login/index.scss
@@ -0,0 +1,61 @@
+.login_wrapper {
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+    position: absolute;
+    z-index: -2;
+    top: -6vh;
+}
+
+.hero_content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    row-gap: 5vh;
+}
+
+.hero_content h1 {
+    color: rgba(255, 255, 255, 0.80);
+    font-family: Montserrat;
+    font-size: 59.815px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.hero_content h3 {
+    color: rgba(223, 223, 223, 0.80);
+    text-align: center;
+    font-family: Poppins;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.hero_content button {
+    display: flex;
+    width: 372px;
+    height: 81px;
+    padding: 20px 0px 20px 30px;
+    align-items: center;
+    gap: 20px;
+    flex-shrink: 0;
+    border-radius: 14px;
+    border: 0.8px solid var(--Button, #402AA4);
+    background: #402AA4;
+    color: #ADADFF;
+    font-family: Poppins;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+
+.hero_image img {
+    height: 105vh;
+}
\ No newline at end of file
diff --git a/src/features/login/index.tsx b/src/features/login/index.tsx
index 4a3279b..b1218e7 100644
--- a/src/features/login/index.tsx
+++ b/src/features/login/index.tsx
@@ -1,58 +1,51 @@
-
-
 import { useEffect } from 'react';
 import { CLIENT_ID } from '../../envConstants';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { login } from 'app/api/login';
 import { useQuery } from 'react-query';
-import {getUser } from 'app/api/user';
-
-
-
+import { getUser } from 'app/api/user';
+import heroImg from 'app/assets/images/login2.png';
+import github from 'app/assets/images/github.png';
+import './index.scss';
 const Login = () => {
-  const [searchParam, ] = useSearchParams();
+  const [searchParam] = useSearchParams();
   const navigate = useNavigate();
 
-   const token=localStorage.getItem('token')
-   const checklogin=async()=>{
-    if(token!=null){
-     try{
-      const userData= await getUser(token);
+  const token = localStorage.getItem('token');
+  const checklogin = async () => {
+    if (token != null) {
+      try {
+        const userData = await getUser(token);
 
-       navigate('/')
-     }catch(e){
-       navigate('/login')
-     }
-      
+        navigate('/');
+      } catch (e) {
+        navigate('/login');
+      }
     }
-   }
+  };
 
-  useEffect(()=>{
-         checklogin()
-  },[])
-  
-   
+  useEffect(() => {
+    checklogin();
+  }, []);
 
-  const loginFunc= async()=>{
-
-      if(searchParam.get('code')!==null){
-        console.log("hello")
-        const code:string= searchParam.get('code')!;
-        const loginData= await login(code);
-        const token= loginData.data.token
-        localStorage.setItem('token',token)
-        navigate("/")
-      }
-   
-  }
+  const loginFunc = async () => {
+    if (searchParam.get('code') !== null) {
+      console.log('hello');
+      const code: string = searchParam.get('code')!;
+      const loginData = await login(code);
+      const token = loginData.data.token;
+      localStorage.setItem('token', token);
+      navigate('/');
+    }
+  };
 
-  const {isError}=useQuery({
-    queryFn: ()=>loginFunc(),
-    queryKey:"loginData"
-  })
+  const { isError } = useQuery({
+    queryFn: () => loginFunc(),
+    queryKey: 'loginData',
+  });
 
-  if(isError){
-     navigate("/login")
+  if (isError) {
+    navigate('/login');
   }
 
   function loginWithGithub() {
@@ -62,8 +55,21 @@ const Login = () => {
   }
 
   return (
-    <div>
-      <button onClick={loginWithGithub}>Login Witth Github</button>
+    <div className='login_wrapper'>
+      <div className='hero_image'>
+        <img src={heroImg} alt='' />
+      </div>
+      <div className='hero_content'>
+        <h1>ACTIVITY LEADERBOARD</h1>
+        <h3>
+          Track your progress, healthy competition in organization others, and
+          unleash your GitHub potential"
+        </h3>
+
+        <button onClick={loginWithGithub}>
+          <img src={github} alt='' /> Login Witth Github
+        </button>
+      </div>
     </div>
   );
 };