diff --git a/src/lib/project.json b/src/lib/project.json
index e3ef10b..7adc135 100644
--- a/src/lib/project.json
+++ b/src/lib/project.json
@@ -4,7 +4,7 @@
 		"date": "Sometime in 2022",
 		"desc": "Open source development and hosted services.",
 		"url": "https://projectsegfau.lt",
-		"image": "https://github.com/ProjectSegfault/Logo/raw/main/png/logo_semi_transparent.png",
+		"image": "https://github.com/ProjectSegfault/Logo/raw/main/BGs/SVG/bg_shadow_dark_next.svg",
 		"imdes": ""
 	},
 	{
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e5fb919..aedc312 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,32 +7,32 @@
 <body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content"> 
 <div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen">
     <!-- Primary content (left) --> 
-    <div in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} class="text-center">                                                                                                                  
-      <div class="md:text-right justify-center flex flex-col items-center m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen">                                          
-          <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} >  
+    <div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} class="text-center">                                                                                                                  
+      <div class="md:text-right justify-center flex flex-col items-center md:items-end m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen">                                          
+          <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} >  
               <h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
               <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 right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0" >
+        <hr in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, 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 right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end" >
               <a href="{data.github}{data.gh}">
                 <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>
+                  <p class="text-2xl md:block hidden md:pr-2">GitHub</p><div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"/>
                 </div>
               </a>
               <a href="{data.matrix}{data.mtx}">
                 <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>
+                  <p class="text-2xl md:block hidden md:pr-2">Matrix</p><div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"/>
                 </div>
               </a>
               <a href="mailto:{data.mail}">
                 <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>
+                  <p class="text-2xl md:block hidden md:pr-2">Mail</p><div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"/>
                 </div>
               </a>
               <a href="/donate">
                 <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>
+                  <p class="text-2xl md:block hidden md:pr-2">Donate</p><div class="i-ph-currency-circle-dollar-bold md:pl-1 mr-1 px-2 md:px-0 my-auto text-3xl"/>
                 </div>
               </a>
           </div>
@@ -41,7 +41,7 @@
            <!-- vertical line -->
        <div                                                                            
        in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
-       out:fly={{ duration: 300, y: 0, easing: quintOut}}
+       out:fly={{ duration: 100, y: 0, easing: quintOut}}
        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) -->
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 2cefc93..00a2b9b 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -6,7 +6,6 @@
     let yr = dayjs('2004-07-15').fromNow(true);
     import { fly } from 'svelte/transition';  
     import { quintOut } from 'svelte/easing'; 
-                                            
 </script>
 
 <body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content"> 
@@ -14,8 +13,6 @@
       <!-- Primary content (Left) -->
          <div class="text-center">
           <div
-            
-            
           class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
           <div
          in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}  
@@ -23,7 +20,7 @@
           class="flex flex-col">
           <div class="flex flex-col md:flex-row">
              <div 
-              class="i-gridicons-info place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+              class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
               ></div>
              <h1 
               class="text-black dark:text-white text-4xl md:pr-2"
@@ -32,7 +29,7 @@
                <p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
                <a href="/">
                <div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
-               <div class="i-ep-back text-4xl md:text-2xl mr-0 md:mr-1"></div>
+               <div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
                <p class="md:block hidden"> Go back? </p>
                </div>
                </a>
@@ -60,7 +57,7 @@
                        </p>
                    </div>
                </div>
-         </div>
+             </div>
         </div> 
     </div>
 </body>
diff --git a/src/routes/donate/monero/+page.svelte b/src/routes/donate/monero/+page.svelte
index 03da1ea..415fd6f 100644
--- a/src/routes/donate/monero/+page.svelte
+++ b/src/routes/donate/monero/+page.svelte
@@ -7,17 +7,27 @@
   <!-- Primary content -->
   <div class="text-center">
    <div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
-      <div 
+      <div>
+       <div class="flex flex-col md:flex-row">
+       <div 
        in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
        out:fly={{ duration: 300, y: -50, easing: quintOut}}
-       class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl"
-       ></div>
+       class="i-tabler-coin-monero dark:text-white mx-auto md:mx-0 pl-0 md:pl-3 text-black text-5xl"
+       />
       <h1 
        in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
        out:fly={{ duration: 300, y: -50, easing: quintOut}}
        class="text-black dark:text-white text-4xl md:pr-2"
        >Monero</h1>
+      </div>
         <p class="md:hidden block text-gray-500"> I fucking hate css </p>
+        <a href="/">                                                                                               
+        <div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%"> 
+        <div class="i-material-symbols-home-outline-rounded text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>                                    
+        <p class="md:block hidden"> Go home? </p>
+        </div>                                                                                                     
+        </a>
+       </div>
         <!-- Vertical line -->
       <div
        in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
@@ -31,9 +41,9 @@
        class="flex flex-col md:px-2 text-center md:text-left"
        >
         <h1 class="text-3xl pb-3">QR code:</h1>
-        <img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-10 md:h-1.5/4 w-80% text-center items-center h-auto"/>
+        <img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-auto md:h-1.5/4 w-80% text-center items-center h-auto"/>
         <h1 class="underline-offset-auto hover:underline text-3xl"><a href="monero:44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe"> Monero wallet:</a></h1>
-        <p><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
+        <p class="mx-2 md:mx-0 bg-black dark:bg-white dark:text-black text-white p-1 rounded-md "><code class="break-all ">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
       </div>
   </div>
 </body>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 485a485..60ebeff 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,22 +1,76 @@
 <script>
     import proj from '$lib/project.json'; 
+    import { fly } from 'svelte/transition';   
+    import { quintOut } from 'svelte/easing';  
 </script>
-<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="flex flex-col bg-gray-800">
+
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">  
+<div class="min-h-screen">
+      <!-- Primary content (Left) -->
+         <div class="text-center">
+          <div
+          class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
+          <div
+         in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}  
+         out:fly={{ duration: 300, y: -50, easing: quintOut}}              
+          class="flex flex-col">
+          <div class="flex flex-col md:flex-row">
+             <div 
+              class="i-octicon-project-16 place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+              ></div>
+             <h1 
+              class="text-black dark:text-white text-4xl md:pl-2 md:pr-2"
+              >Projects</h1>
+              </div>
+               <p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
+               <a href="/">
+               <div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
+               <div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
+               <p class="md:block hidden"> Go back? </p>
+               </div>
+               </a>
+               </div>
+
+                
+        
+                    <!-- Vertical line -->
+             <div
+              in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
+              out:fly={{ duration: 300, y: 0, easing: quintOut}}
+              class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
+              ></div>
+ 
+
+<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
+    <div class="overflow-y-auto">
+    {#each proj as { name, date, desc, url, image, imdes }, i}
+        <a href="{url}">
+        <!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->  
+        <div
+        in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut}} 
+        out:fly={{ duration: 300 , y: 50, easing: quintOut}}            
+        class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100">
             <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 class="flex flex-row place-content-between">
+                    <div class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start">
+                        <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 class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden" style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"> 
+                        <img class="transition duration-600  top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120" src="{image}" alt="{imdes}">  
                     </div>
                 </div>
-            </div> 
+            </div>
         </div>
+        </a>
+        <hr
+        in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut}}  
+        out:fly={{ duration: 300 , y: 50, easing: quintOut}}                 
+        class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"/>
     {/each}    
+    </div>
 </div>
+</div>
+</div>  
+        </body>
