diff --git a/app/(home)/page.module.scss b/app/(home)/page.module.scss
index 4432fd9..1a8b097 100644
--- a/app/(home)/page.module.scss
+++ b/app/(home)/page.module.scss
@@ -27,6 +27,13 @@
 
 // Main styles
 .main {
+    height: 100vh;
+    width: 100vw;
+    background-image: url('/Extentedbackground.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    position: relative;
   height: 100vh;
   width: 100vw;
   background-image: url('/Extentedbackground.svg');
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
index af95215..a55af5a 100644
--- a/app/(home)/page.tsx
+++ b/app/(home)/page.tsx
@@ -32,11 +32,7 @@ export default function Home() {
     const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
     let frame = 0;
 
-<<<<<<< HEAD
-    const randomizeText = (txt: string) => {
-=======
     const randomizeText = (txt : string) => {
->>>>>>> 137a176ee44b0d9b680febdbf7eb8857586f21f4
       return txt
         .split("")
         .map(() => chars[Math.floor(Math.random() * chars.length)])
diff --git a/app/leaderboard/components/Positions.tsx b/app/leaderboard/components/Positions.tsx
deleted file mode 100644
index 7479993..0000000
--- a/app/leaderboard/components/Positions.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styles from './Positions.module.scss';
-import clsx from 'clsx';
-import Canvas from './Canvas';
-// import Matrix from './Matrix';
-
-export default function Positions() {
-
-    return (
-        <div className={styles.container}>
-            <div className={`${styles.leaderboardItem} , ${styles.second}`}>
-                    <div className={styles.canvas}>
-                        <Canvas />
-                    </div>
-                    <div className={styles.userInfo}>
-                        <h1 className={styles.position}>Second</h1>
-                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
-                        <h1 className={styles.username}>John Doe</h1>
-                        <h1 className={styles.score}>900</h1>
-                    </div>
-                </div>
-                <div className={`${styles.leaderboardItem} , ${styles.first}`}>
-                    {/* <div className={styles.canvas}>
-                        <Canvas />
-                    </div> */}
-                    <div className={styles.userInfo}>
-                        <h1 className={styles.position}>First</h1>
-                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
-                        <h1 className={styles.username}>John Doe</h1>
-                        <h1 className={styles.score}>900</h1>
-                    </div>
-                </div>
-                <div className={`${styles.leaderboardItem} , ${styles.third}`}>
-                <div className={styles.canvas}>
-                        <Canvas />
-                    </div>
-                    <div className={styles.userInfo}>
-                        <h1 className={styles.position}>Third</h1>
-                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
-                        <h1 className={styles.username}>John Doe</h1>
-                        <h1 className={styles.score}>900</h1>
-                    </div>
-                </div>
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index 56174b1..af943f7 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -6,7 +6,8 @@ import Navbar from "@/components/Navbar/navbar";
 import { FaGithub, FaInstagram, FaLinkedin, FaGoogle } from "react-icons/fa";
 import { FaSquareFacebook } from "react-icons/fa6";
 import { FloatingDock } from "@/components/floatingdock/floatingicons";
-import Positions from "./components/Positions";
+import Positions from "@/components/Positions/Positions";
+import Tiles from "@/components/projects/index";
 
 export default function Leaderboard(){
     const [loading, setLoading] = useState(true);
@@ -50,8 +51,9 @@ export default function Leaderboard(){
           ) : (
             <>
               <Navbar />
-              <div style={{display:"flex" , justifyContent : "center" , alignItems : "center" , height: "100%"}}>
+              <div style={{display:"flex" , flexDirection:"column" , justifyContent : "center" , alignItems : "center" , height: "100%"}}>
                 <Positions />
+                {/* <Tiles /> */}
               </div>
               
               <div className={styles.login}></div>
diff --git a/app/leaderboard/components/Canvas.module.scss b/components/Positions/Canvas.module.scss
similarity index 100%
rename from app/leaderboard/components/Canvas.module.scss
rename to components/Positions/Canvas.module.scss
diff --git a/app/leaderboard/components/Canvas.tsx b/components/Positions/Canvas.tsx
similarity index 95%
rename from app/leaderboard/components/Canvas.tsx
rename to components/Positions/Canvas.tsx
index 71bbb09..a1ee19a 100644
--- a/app/leaderboard/components/Canvas.tsx
+++ b/components/Positions/Canvas.tsx
@@ -63,7 +63,7 @@ const MatrixRainingLetters = (props : any ) => {
     return (
         <>
             <canvas key={keyName} className={thisClassName} ref={ref} 
-            style={{height:"100%", width:"100%"}}/>
+            style={{height:"100%", width:"100%" , position:"absolute" , borderRadius:"10px"}}/>
         </>
     );
 };
diff --git a/components/Positions/Card.tsx b/components/Positions/Card.tsx
new file mode 100644
index 0000000..b7e0a4f
--- /dev/null
+++ b/components/Positions/Card.tsx
@@ -0,0 +1,31 @@
+import Canvas from "./Canvas"
+import styles from "./Positions.module.scss"
+
+interface CardProps{
+    pos : any ;
+    username : string ;
+    avatar : string ;
+    score : string ;
+}
+
+const Card : React.FC<CardProps> = ({ pos , username , avatar , score })=>{
+    let color , height ;
+    if(pos=='first')
+
+    return (
+    <div className={`${styles.leaderboardItem}`}>
+        <div className={styles.canvasContainer}>
+            <Canvas />
+            <div className={`${styles.userInfo} , ${styles.pos}`} 
+            style={{}}>
+                <h1 className={styles.position}>{pos}</h1>
+                <img src={avatar} alt="Avatar" className={styles.avatar}/>
+                <h1 className={styles.username}>{username}</h1>
+                <h1 className={styles.score}>{score}</h1>
+            </div>
+        </div>
+    </div>
+    ) ;
+}
+
+export default Card ;
\ No newline at end of file
diff --git a/app/leaderboard/components/Positions.module.scss b/components/Positions/Positions.module.scss
similarity index 83%
rename from app/leaderboard/components/Positions.module.scss
rename to components/Positions/Positions.module.scss
index ab353dd..6ea9790 100644
--- a/app/leaderboard/components/Positions.module.scss
+++ b/components/Positions/Positions.module.scss
@@ -28,6 +28,9 @@
     height: 15rem;
     box-shadow: 0 0 20px #FFD700;
     border: 2px solid #FFD700;
+    background-color: rgba(255, 215, 0 , 0.2);
+    transition: all 0.3s ease-in-out;
+
 }
 
 .first:hover{
@@ -36,8 +39,11 @@
 
 .second{
     position: relative;
+    border-radius: 10px;
     box-shadow: 0 0 20px #C0C0C0;
     border: 2px solid #C0C0C0;
+    background-color: rgba(192, 192, 192 , 0.5) ;
+    transition: all 0.3s ease-in-out;
 }
 
 .second:hover{
@@ -47,6 +53,7 @@
 .third{
     position: relative;
     box-shadow: 0 0 20px #cd7f32;
+    background-color: rgba(228, 255, 180 , 0.5);
     border: 2px solid #cd7f32;
 }
 
@@ -55,15 +62,16 @@
 }
 
 
-.canvas{
+.canvasContainer{
     border-radius: 10px;
     position: absolute;
-    width: 100%;
-    height: 100%;
+    width: 30rem;
+    height: 12rem;
     z-index: 0;
 }
 
 .userInfo{
+    position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/components/Positions/Positions.tsx b/components/Positions/Positions.tsx
new file mode 100644
index 0000000..f3c261b
--- /dev/null
+++ b/components/Positions/Positions.tsx
@@ -0,0 +1,53 @@
+"use client" ;
+import { useState } from 'react';
+
+import styles from './Positions.module.scss';
+import clsx from 'clsx';
+import Canvas from './Canvas';
+// import Matrix from './Matrix';
+import Card from "./Card" ;
+
+export default function Positions() {
+    const [pos , setPos] = useState("first");
+    return (
+        <div className={styles.container}>
+            <div className={`${styles.leaderboardItem}`}>
+                    <div className={styles.canvasContainer}>
+                        <Canvas color="#c0c0c0"/>
+                        <div className={`${styles.userInfo} , ${styles.second}`}>
+                            <h1 className={styles.position}>Second</h1>
+                            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
+                            <h1 className={styles.username}>John Doe</h1>
+                            <h1 className={styles.score}>900</h1>
+                        </div>
+                    </div>
+                    
+            </div>
+            <Card pos={pos} username="Jane Doe" avatar="https://www.w3schools.com/howto/img_avatar.png" score="900" />
+                {/* <div className={`${styles.leaderboardItem} , ${styles.first}`}>
+                    <div className={styles.canvasContainer}>
+                        <Canvas />
+                        <div className={`${styles.userInfo} , ${styles.first}`}>
+                            <h1 className={styles.position}>First</h1>
+                            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
+                            <h1 className={styles.username}>John Doe</h1>
+                            <h1 className={styles.score}>900</h1>
+                        </div>
+                    </div>
+                </div> */}
+            <Card pos='first' username="John Doe" avatar="https://www.w3schools.com/howto/img_avatar.png" score="1000" />
+                <div className={`${styles.leaderboardItem} , ${styles.third}`}>
+                <div className={styles.canvas}>
+                        <Canvas color="#cd7f32"/>
+                    </div>
+                    <div className={styles.userInfo}>
+                        <h1 className={styles.position}>Third</h1>
+                        <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/>
+                        <h1 className={styles.username}>John Doe</h1>
+                        <h1 className={styles.score}>900</h1>
+                    </div>
+                </div>
+            {/* <Card pos='third' username="Jack Doe" avatar="https://www.w3schools.com/howto/img_avatar.png" score="800" /> */}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/projects/descriptions/index.tsx b/components/projects/descriptions/index.tsx
new file mode 100644
index 0000000..b64f826
--- /dev/null
+++ b/components/projects/descriptions/index.tsx
@@ -0,0 +1,30 @@
+"use client"
+import React from 'react'
+import styles from './style.module.scss';
+
+export default function index({data , selectedProject} : any) {
+
+    const crop = (string: string, maxLength: number) => {
+        return string.substring(0, maxLength);
+    }
+    
+    return (
+        <div className={styles.descriptions}>
+            {
+                data.map( (project: { title: any; description: any; } , i: number) => {
+                    const { title, description } = project;
+                    return (
+                    <div 
+                        key={i} 
+                        className={styles.description}
+                        style={{clipPath: selectedProject == i ? "inset(0 0 0)" : "inset(50% 0 50%"}}
+                    >
+                        <p>{crop(title, 9)}</p>
+                        <p>{description}</p>
+                    </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/projects/descriptions/style.module.scss b/components/projects/descriptions/style.module.scss
new file mode 100644
index 0000000..69a1b11
--- /dev/null
+++ b/components/projects/descriptions/style.module.scss
@@ -0,0 +1,36 @@
+.descriptions{
+    position: absolute;
+    top: 3px;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    pointer-events: none;
+    .description{
+        background-color: #2CFF05;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 10%;
+        padding-right: 10%;
+        clip-path: inset(50% 0 50%);
+        transition: clip-path .4s;
+        
+        p{
+            &:nth-of-type(1){
+                color: #010101;
+                text-transform: uppercase;
+                font-weight: 700;
+                font-size: 6vw;
+                line-height: 5.5vw;
+                margin: 0px;
+                position: relative;
+                z-index: 1;
+            }
+            &:nth-of-type(2){
+                width: 40%;
+                font-size: 1vw;
+                font-weight: 700;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/projects/index.tsx b/components/projects/index.tsx
new file mode 100644
index 0000000..5121bce
--- /dev/null
+++ b/components/projects/index.tsx
@@ -0,0 +1,48 @@
+'use client';
+import { useState } from 'react';
+import styles from './style.module.scss';
+import Titles from './titles';
+import Descriptions from './descriptions';
+
+const data = [
+    {
+        title: "Ford",
+        description: "Working on the Next-Generation HMI Experience without no driving experience.",
+        speed: 0.5
+    },
+    {
+        title: "UFC",
+        description: "Developed the Future of UFC Sports Ecosystem despite not being a sports fan.",
+        speed: 0.5
+    },
+    {
+        title: "Lincoln",
+        description: "Defined the visual concept and design language for the Lincoln Zephyr 2022 but never seen it in real life.",
+        speed: 0.67
+    },
+    {
+        title: "Royal Caribbean",
+        description: "I was just one person on a massive team that created an entire Royal Caribbean eco-system.",
+        speed: 0.8
+    },
+    {
+        title: "Sleepiq",
+        description: "Designed a 1M+ users product utilizing my best personal experience: sleeping.",
+        speed: 0.8
+    },
+    {
+        title: "NFL",
+        description: "Explored the Future of Fantasy Football while being in a country where football means a total different sport.",
+        speed: 0.8
+    }
+]
+
+export default function Projects() {
+    const [selectedProject, setSelectedProject] = useState(null)
+    return (
+        <div className={styles.container}>
+            <Titles data={data} setSelectedProject={setSelectedProject}/>
+            <Descriptions data={data} selectedProject={selectedProject}/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/projects/style.module.scss b/components/projects/style.module.scss
new file mode 100644
index 0000000..d0c9d01
--- /dev/null
+++ b/components/projects/style.module.scss
@@ -0,0 +1,5 @@
+.container{
+    // position: absolute;
+    z-index: 1;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/components/projects/titles/index.tsx b/components/projects/titles/index.tsx
new file mode 100644
index 0000000..c738444
--- /dev/null
+++ b/components/projects/titles/index.tsx
@@ -0,0 +1,47 @@
+"use client"
+import React, { useRef } from 'react'
+import styles from './style.module.scss';
+import { useScroll, motion, useTransform, useMotionTemplate } from 'framer-motion';
+
+export default function index({data , setSelectedProject}: any) {
+  return (
+    <div className={styles.titles}>
+        {
+            data.map( (project: any, i: number) => {
+                return <Title key={i} data={{...project, i}} setSelectedProject={setSelectedProject}/>
+            })
+        }
+    </div>
+  )
+}
+
+function Title({data, setSelectedProject}: any) {
+
+    const { title, speed, i } = data;
+    const container = useRef(null);
+
+    const { scrollYProgress } = useScroll({
+        target: container,
+        offset: ['start end', `${25 / speed}vw end`]
+    })
+
+    const clipProgress = useTransform(scrollYProgress, [0,1], [100, 0]);
+    const clip = useMotionTemplate`inset(0 ${clipProgress}% 0 0)`;
+    
+    return (
+        <div ref={container} className={styles.title}>
+            <div 
+                className={styles.wrapper}
+                onMouseOver={() => {setSelectedProject(i)}}
+                onMouseLeave={() => {setSelectedProject(null)}}
+            >
+                <motion.p style={{clipPath: clip}}>
+                    {title}
+                </motion.p>
+                <p>
+                    {title}
+                </p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/projects/titles/style.module.scss b/components/projects/titles/style.module.scss
new file mode 100644
index 0000000..5006a30
--- /dev/null
+++ b/components/projects/titles/style.module.scss
@@ -0,0 +1,40 @@
+.titles {
+    width: 100%;
+    border-top: 1px solid rgba(183, 171, 152, 0.25);
+
+    .title {
+        border-bottom: 1px solid rgba(183, 171, 152, 0.25);
+        cursor: default;
+        position: relative;
+        z-index: 2;
+
+        .wrapper {
+            display: inline-block;
+            //width: 100%;
+            padding-left: 10%;
+            position: relative;
+            z-index: 2;
+            //clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 99%, 12% 100%, 0 89%);
+        }
+
+        p {
+            display: inline-block;
+            color: #b7ab98;
+            text-transform: uppercase;
+            font-weight: 700;
+            font-size: 6vw;
+            line-height: 5.5vw;
+            margin: 0px;
+            position: relative;
+            z-index: 2;
+
+            &:nth-of-type(2) {
+                display: block;
+                position: absolute;
+                color: #1c1c1c;
+                top: 0;
+                z-index: 1;
+            }
+        }
+    }
+}