diff --git a/src/lib/style.css b/src/lib/style.css
index 4ea4d9f..11841a4 100644
--- a/src/lib/style.css
+++ b/src/lib/style.css
@@ -10,29 +10,26 @@ html {
 	scroll-behavior: smooth;
 }
 
-
-
-
-
 #backdesk {
-   height: 100%;
-   object-fit: fill;
-   overflow: hidden;  
-   animation: rainbow 20s steps(120) infinite;
+	height: 100%;
+	object-fit: fill;
+	overflow: hidden;
+	animation: rainbow 20s steps(120) infinite;
 }
 #backmob {
-    display:none;
+	display: none;
 }
 
 @keyframes rainbow {
-        from { filter:hue-rotate(10deg); }
-          to { filter:hue-rotate(360deg); }
-        }
-
+	from {
+		filter: hue-rotate(10deg);
+	}
+	to {
+		filter: hue-rotate(360deg);
+	}
+}
 
 .bio-and-projects {
-	text-align: center;
-	position: fixed;
 	left: 5px;
 	width: 100%;
 }
@@ -43,7 +40,7 @@ html {
 }
 
 .bg {
-    background-image: url(/Images/BG_FHD_darker_mb.png);
+	background-image: url(/Images/BG_FHD_darker_mb.png);
 }
 
 body {
@@ -93,7 +90,6 @@ body {
 	width: 125px;
 }
 
-
 .middle {
 	text-align: center;
 	top: 50%;
@@ -104,14 +100,6 @@ a {
 	text-decoration: none;
 }
 
-
-
-
-
-
-
-
-
 .middle-bottom {
 	height: 200px;
 	width: 400px;
@@ -131,9 +119,6 @@ img {
 	text-align: center;
 }
 
-
-
-
 @media (prefers-color-scheme: dark) {
 	html {
 		--primary: #151515;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9ce69a0..e5fb919 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,25 +14,25 @@
               <p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>                                                                    
           </div>
         <hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black dark:border-white w-100%"/>
-          <div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} class="flex md:flex-col flex-row px-3 md:px-0" >
+          <div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0" >
               <a href="{data.github}{data.gh}">
-                <div class="flex flex-row py-1">
-                  <div class="i-carbon-logo-github text-black dark:text-white px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden dark:text-white text-black md:pl-2">GitHub</p>
+                <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
+                  <div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">GitHub</p>
                 </div>
               </a>
               <a href="{data.matrix}{data.mtx}">
-                <div class="flex flex-row py-1">
-                  <div class="i-tabler-brand-matrix md:pl-3 text-black dark:text-white px-2 my-auto md:px-0 text-3xl"></div><p class="text-2xl md:block hidden dark:text-white text-black md:pl-2">Matrix</p>
+                <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
+                  <div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">Matrix</p>
                 </div>
               </a>
               <a href="mailto:{data.mail}">
-                <div class="flex flex-row py-1">
-                  <div class="i-mdi-at md:pl-3 text-black dark:text-white px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden text-black dark:text-white md:pl-2">Mail</p>
+                <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
+                  <div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden pl-2">Mail</p>
                 </div>
               </a>
               <a href="/donate">
-                <div class="flex flex-row py-1">
-                  <div class="i-ph-currency-circle-dollar-bold md:pl-3 text-black px-2 md:px-0 dark:text-white my-auto text-3xl"></div><p class="text-2xl md:block hidden text-black dark:text-white md:pl-2">Donate</p>
+                <div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
+                  <div class="i-ph-currency-circle-dollar-bold md:pl-3 px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">Donate</p>
                 </div>
               </a>
           </div>
@@ -45,20 +45,20 @@
        class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block"        
        ></div>
        <!-- Secondary content (right) -->
-        <div class="flex md:flex-col flex-row px-5 md:px-0">
+        <div class="flex md:flex-col flex-row gap-2 md:gap-0 mx-5 md:mx-0">
             <div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}}
                  out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}}
-                 class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
-                <a href="/about"><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
+                 class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
+                <a href="/about" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
             </div>
             <div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
                  out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}}
-                 class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> 
-                <a href="/projects"><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a> 
+                 class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> 
+                <a href="/projects" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a> 
             </div>
             <div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}}
                 out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}}
-                 class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> 
+                 class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> 
                 <a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2></div></a>
             </div>
         </div>
diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
index 054dd8f..845e4a0 100644
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -3,27 +3,24 @@
   import { quintOut } from 'svelte/easing'; 
 </script>                                   
                                             
-<body class="dark:bg-black bg-gray-300 font-sans" id="content">
   <div class="text-center">
     <div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen "> 
-    <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} > 
-    <h1 class="text-black dark:text-white text-4xl">Donate</h1>
-    <p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
-    </div>
+      <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} > 
+        <h1 class="text-black dark:text-white text-4xl">Donate</h1>
+        <p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
+      </div>
       <hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black dark:border-white w-1/6"/>
       <div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} >
       <a href="https://github.com/sponsors/midou36o">
-        <div class="flex flex-row pt-5">
-          <div class="i-carbon-logo-github dark:text-white text-black text-2xl"></div><p class="text-1xl text-black dark:text-white pl-2">GitHub Sponsors</p>
+        <div class="flex flex-row mt-5 md:dark:hover:bg-white p-1 md:dark:hover:text-black md:hover:bg-gray-400 rounded">
+          <div class="i-carbon-logo-github my-auto text-3xl"></div><p class="text-2xl pl-2">GitHub Sponsors</p>
         </div>  
       </a> 
        <a href="/donate/monero">
-        <div class="flex flex-row">
-          <div class="i-tabler-coin-monero pl-3 text-black dark:text-white text-2xl"></div><p class="text-1xl text-black dark:text-white pl-2">Monero</p>
+        <div class="flex flex-row md:dark:hover:bg-white p-1 md:dark:hover:text-black md:hover:bg-gray-400 rounded">
+          <div class="i-tabler-coin-monero pl-3 my-auto text-3xl"></div><p class="text-2xl pl-2">Monero</p>
         </div>  
       </a> 
       </div>
    </div> 
   </div>
-
-</body>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 1c39b2a..485a485 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,18 +1,20 @@
 <script>
     import proj from '$lib/project.json'; 
 </script>
-<div class="mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 gap-3 mx-4 grid-cols-1">
+<div class="min-h-screen justify-center gap-1 flex flex-col place-items-center">
     {#each proj as { name, date, desc, url, image, imdes }}
-        <div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">
-            <div class="md:flex"> 
-                <div class="md:shrink-0">
-                    <img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-50 md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}">
-                </div>
-                <div class="pb-20 pt-5 px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-50">
-                    <div><h3 class="text-3xl dark:text-white text-black text-center">{name}</h3></div>
-                    <div class="text-sm dark:text-white text-black text-center">{date}</div>                    
-                    <div><p class="dark:text-white text-black text-sm">{desc}</p></div>
-                    <div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Check it out</a></div>
+        <div class="flex flex-col bg-gray-800">
+            <div class="my-auto"> 
+                <div class="flex flex-row">
+                    <div class="flex flex-col">
+                   <h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
+                    <p class="text-sm dark:text-white text-black text-center">{date}</p>                    
+                    <p class="dark:text-white text-black text-sm">{desc}</p>
+                    </div>                
+                    <div class="h-10% w-50 overflow-hidden"> 
+                        <img class="transition -py-20 duration-400 static top-0 opacity-75 object-contain hover:scale-120" src="{image}" alt="{imdes}">  
+                        <div class="h-30 top-0 static bg-gradient-to-l from-gray-800"/>  
+                    </div>
                 </div>
             </div> 
         </div>