diff --git a/package-lock.json b/package-lock.json
index 1d031c4..0caec45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.3.0",
-        "typewriter-effect": "^2.21.0"
+        "typewriter-effect": "^2.21.0",
+        "usehooks-ts": "^3.1.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -3019,6 +3020,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4472,6 +4478,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index e519d7e..be0c4ea 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "typewriter-effect": "^2.21.0"
+    "typewriter-effect": "^2.21.0",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/public/gitCat.png b/public/gitCat.png
new file mode 100644
index 0000000..74a8309
Binary files /dev/null and b/public/gitCat.png differ
diff --git a/src/app/components/buffer/buffer.module.css b/src/app/components/buffer/buffer.module.css
index 0ee526f..f72659e 100644
--- a/src/app/components/buffer/buffer.module.css
+++ b/src/app/components/buffer/buffer.module.css
@@ -1,9 +1,18 @@
-.bufferContainer {
+.bufferLaptop {
   height: 20px;
   display: flex;
   flex-direction: row;
 }
 
-.button {
-  background: white;
+.bufferMobile{
+    height: 40px;
+    background: #11151C;
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    padding: 5px;
+}
+.github{
+    color:white;
+    cursor: pointer;
 }
diff --git a/src/app/components/buffer/buffer.tsx b/src/app/components/buffer/buffer.tsx
index c19dc49..48039a5 100644
--- a/src/app/components/buffer/buffer.tsx
+++ b/src/app/components/buffer/buffer.tsx
@@ -1,7 +1,18 @@
 "use client";
 import styles from "./buffer.module.css";
+import { useMediaQuery } from "usehooks-ts"
+import gitImage from "../../../../public/gitCat.png"
+import Image from "next/image"
 
 function Buffer() {
-  return <div className={styles.bufferContainer}></div>;
+  const isDesctop = useMediaQuery('(min-width: 640px)',{
+      initializeWithValue:false
+  })
+  if (isDesctop) return <div className={styles.bufferLaptop}>Buffer line</div>;
+  return (<div className={styles.bufferMobile}>
+            <a href="https://github.com/RamdaniRamdane" target="_blank">
+                <Image src={gitImage} alt="rey" width={30} height={30}  />
+            </a> 
+          </div>)
 }
 export default Buffer;
diff --git a/src/app/components/linecounter/linecouter.tsx b/src/app/components/linecounter/linecouter.tsx
index 9707a5b..9a96e7c 100644
--- a/src/app/components/linecounter/linecouter.tsx
+++ b/src/app/components/linecounter/linecouter.tsx
@@ -1,24 +1,25 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import styles from "./linecouter.module.css";
+import { useWindowSize } from "usehooks-ts";
 
 export default function LineCounter() {
-  const [height, setHeight] = useState(0);
-  const [nums, setNums] = useState(Array.from(Array(60).keys(), (n) => n + 1));
 
-  const handleNums = () => {
-    setHeight(window.innerHeight);
+  const [nums, setNums] = useState([1]);
+  const { height = 0 } = useWindowSize()
+  
+  const handleNums = useCallback(() => {
     let nbLines = (height - 15) / 14;
     let arr = [];
     for (let i = 1; i <= Math.ceil(nbLines); i++) {
       arr.push(i);
     }
     setNums(arr);
-  };
-  useEffect(() => {
-    window.addEventListener("resize", handleNums);
-    return () => window.removeEventListener("resize", handleNums);
-  });
+  },[setNums , height])
+
+  useEffect(()=>{
+      handleNums()
+  },[handleNums])
 
   return (
     <>
diff --git a/src/app/components/navbar/navbar.module.css b/src/app/components/navbar/navbar.module.css
index 845982f..c5538ef 100644
--- a/src/app/components/navbar/navbar.module.css
+++ b/src/app/components/navbar/navbar.module.css
@@ -4,31 +4,23 @@
   flex-direction: row;
 }
 
-.buttonMove,
 .button {
   color: white;
-  background: #ffaa3350;
-  height: 20px;
+  height: 40px;
   position: absolute;
-  top: 0;
-  left: 200px;
+  top: 5;
+  left: 5;
   cursor: pointer;
-}
-.button {
-  top: 0;
-  left: 0;
+  margin: 5px;
+  z-index: 1;
 }
 
-.buttonMove:hover,
-.button:hover {
-  background: #ffaa3370;
-}
 
-.leftSide {
+.leftSide , .leftSidePhone  {
   background: #080c1299;
   backdrop-filter: blur(8px);
   height: 100vh;
-  width: 200px;
+  width: 250px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -46,7 +38,8 @@
   width: 100%;
   padding: 0;
   display: flex;
-  text-align: start;
+  flex-direction: row ;
+  justify-content:space-between ;
 }
 
 .logo {
@@ -64,11 +57,15 @@
     "Open Sans",
     "Helvetica Neue",
     sans-serif;
-  font-size: 1.8rem;
-  margin-left: 3px;
-  font-weight: 200;
+  font-size: 1.9rem;
+  font-weight: 900;
   color: #eeeeee;
-  margin-bottom: 10px;
+}
+.closebtn{
+    color:white ;
+    font-weight: 200;
+    font-size: 1.8rem;
+    cursor: pointer;
 }
 
 .folderName {
@@ -87,17 +84,19 @@
     "Helvetica Neue",
     sans-serif;
   color: #ffaa33;
-  font-weight: 500;
+  font-weight: 600;
   padding: 5px 0px 0px 20px;
+  font-size: 1.5rem;
 }
 
 .pwdName {
   color: #ff8f40;
-  font-size: 0.9rem;
+  font-size: 1rem;
   font-weight: 300;
   font-style: italic;
   margin-bottom: 5px;
   transition: 0.3s;
+  margin : 5px 0
 }
 
 .pwdName:hover {
@@ -109,6 +108,7 @@
   margin-left: 30px;
   border-left: solid 1px #9993;
   color: #666;
+  font-size: 1.2rem;
 }
 
 .fileName:hover {
@@ -122,4 +122,10 @@
   background: #191e2a90;
   color: #eee;
   transition: 0.3s;
+  font-size: 1.2rem;
+}
+
+.leftSidePhone{
+  width: 300px;
+  box-shadow: 0 0 200px 0px #000;
 }
diff --git a/src/app/components/navbar/navbar.tsx b/src/app/components/navbar/navbar.tsx
index c9f95bd..9b7bc5c 100644
--- a/src/app/components/navbar/navbar.tsx
+++ b/src/app/components/navbar/navbar.tsx
@@ -7,29 +7,48 @@ import React from "react";
 import { usePathname } from "next/navigation";
 import hamburger from "../../../../public/ham.svg";
 import Image from "next/image";
+import { useMediaQuery } from 'usehooks-ts'
 
 function NavBar() {
-  const [indicatorLeftSide, setIndicatorLeftSide] = useState(-1);
+  const isDesctop = useMediaQuery('(min-width: 640px)' , {
+      initializeWithValue:false 
+  })
+
+
+  const [indicatorLeftSide, setIndicatorLeftSide] = useState( -1 ); 
   const [indicatorAbout, setIndicatorAbout] = useState(1);
   const [indicatorProjects, setIndicatorProjects] = useState(1);
   const [indicatorContact, setIndicatorContact] = useState(1);
   const [indicatorHobies, setIndicatorHobies] = useState(1);
   const route = usePathname();
   const pathname = route;
+
+
+
+  const handleLeftSideDisplay= useCallback(()=> {
+    if(!isDesctop) setIndicatorLeftSide((a) => a * -1);
+  },[isDesctop])
+
+
+
   const handleKeyPress = useCallback((event: KeyboardEvent) => {
     event.key == "t" && handleLeftSideDisplay();
-  }, []);
+  }, [handleLeftSideDisplay]);
 
-  useEffect(() => {
+
+  useEffect(() =>{
     document.addEventListener("keydown", handleKeyPress);
     return () => {
       document.removeEventListener("keydown", handleKeyPress);
     };
   }, [handleKeyPress]);
 
-  function handleLeftSideDisplay() {
-    setIndicatorLeftSide((a) => a * -1);
-  }
+
+
+  useEffect(() => {
+    setIndicatorLeftSide(isDesctop ? 1 : -1);
+  }, [isDesctop]);
+
   function handleAboutClick() {
     setIndicatorAbout((a) => a * -1);
   }
@@ -78,27 +97,28 @@ function NavBar() {
   ];
   return (
     <div className={styles.container}>
-      {indicatorLeftSide > 0 && (
-        <div className={styles.leftSide}>
+      {  indicatorLeftSide > 0  && (
+        <div className={isDesctop ? styles.leftSide : styles.leftSidePhone}>
           <div className={styles.logoContainer}>
-            <h1 className={styles.logo}>REY</h1>
+            <Link href="/" className={styles.logo}>REY</Link>
+            { !isDesctop && (<h1  className={styles.closebtn} onClick = {handleLeftSideDisplay}> x </h1>) }
           </div>
           <ul className={styles.links}>
             <li className={styles.pwdName}>~/personal/portfolio{pathname}</li>
 
             {Folders.map((folder, index) => (
               <div key={index}>
-                <li
+                <a 
                   className={styles.folderName}
                   onClick={() => handleClick(folder.name)}
                 >
                   <BiSolidFolder /> {folder.name}
-                </li>
+                </a>
                 {folder.indicator > 0 && (
                   <>
                     {folder.files.map((file, subindex) => (
                       <div key={subindex}>
-                        <Link href={file.path}>
+                        <Link href={file.path} onClick={handleLeftSideDisplay}>
                           <li
                             className={
                               pathname === file.path
@@ -118,12 +138,11 @@ function NavBar() {
           </ul>
         </div>
       )}
-      <div
-        className={indicatorLeftSide > 0 ? styles.buttonMove : styles.button}
-        onClick={handleLeftSideDisplay}
-      >
-        <Image src={hamburger} alt="tree" width={20} height={20} />
+      { !isDesctop && indicatorLeftSide < 0 && (
+      <div className={styles.button} onClick={handleLeftSideDisplay}>
+        <Image src={hamburger} alt="ham" width={30} height={30} />
       </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e2a7c1a..cbd8c4c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,16 +21,6 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div className={styles.wrapper}>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
         <main className={styles.container}>
           <div className={styles.leftSide}>
             <NavBar />
diff --git a/src/app/page.module.css b/src/app/page.module.css
index a9baf9b..e4af4cf 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -4,103 +4,6 @@
   border-radius: 10px;
   height: calc(100vh - 20px);
 }
-/*
-
-.wrapper {
-  position: fixed;
-  z-index: -1;
-}
-.wrapper span {
-  position: fixed;
-  bottom: -180px;
-  height: 50px;
-  width: 50px;
-  z-index: -1;
-  background-color: #18191f;
-  box-shadow:
-    0 0 50px #0072ff,
-    0 0 100px #0072ff,
-    0 0 150px #0072ff,
-    0 0 200px #0072ff;
-  animation: animate 10s linear infinite;
-}
-.wrapper span:nth-child(1) {
-  left: 60px;
-  animation-delay: 0.6s;
-}
-.wrapper span:nth-child(2) {
-  left: 10%;
-  animation-delay: 3s;
-  width: 60px;
-  height: 60px;
-}
-.wrapper span:nth-child(3) {
-  left: 20%;
-  animation-delay: 2s;
-}
-.wrapper span:nth-child(4) {
-  left: 30%;
-  animation-delay: 5s;
-  width: 80px;
-  height: 80px;
-}
-.wrapper span:nth-child(5) {
-  left: 40%;
-  animation-delay: 1s;
-}
-.wrapper span:nth-child(6) {
-  left: 50%;
-  animation-delay: 7s;
-}
-.wrapper span:nth-child(7) {
-  left: 60%;
-  animation-delay: 6s;
-  width: 100px;
-  height: 100px;
-}
-.wrapper span:nth-child(8) {
-  left: 70%;
-  animation-delay: 8s;
-}
-.wrapper span:nth-child(9) {
-  left: 80%;
-  animation-delay: 6s;
-  width: 90px;
-  height: 90px;
-}
-.wrapper span:nth-child(10) {
-  left: 90%;
-  animation-delay: 4s;
-}
-.banner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-.content h2 b {
-  -webkit-text-fill-color: transparent;
-  -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: #fff;
-  font-family: montserrat;
-  font-size: 80px;
-  text-transform: uppercase;
-  letter-spacing: 12px;
-}
-@keyframes animate {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  80% {
-    opacity: 0.7;
-  }
-  100% {
-    transform: translateY(-800px) rotate(360deg);
-    opacity: 0;
-  }
-}
-*/
 
 .leftSide {
   width: inherit;
@@ -111,6 +14,7 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
+  color: white;
 }
 
 .vp {
@@ -158,3 +62,10 @@
   padding: 10px;
   text-align: left;
 }
+
+
+@media only screen and (max-width: 640px){
+    .card{
+        width: 300px;
+    }
+}