diff --git a/src/components/Contact.astro b/src/components/Contact.astro
index 1fd52e0..2cf1f83 100644
--- a/src/components/Contact.astro
+++ b/src/components/Contact.astro
@@ -15,7 +15,7 @@
         <a
             class="text-center flex flex-row justify-center items-center border-2 border-blue-300 text-blue-300 px-5 py-5 hover:bg-blue-300 hover:text-black transition-colors duration-500 ease-in-out rounded-xl"
             href="mailto:ryanpython932@gmail.com"
-            ><span class="text-2xl mr-2">&#9993;</span> Send me an email</a
+            ><span class="text-3xl mr-2">&#9993;</span> Send me an email</a
         >
     </div>
     <div
diff --git a/src/components/Education.astro b/src/components/Education.astro
index 7c3ae9b..7029846 100644
--- a/src/components/Education.astro
+++ b/src/components/Education.astro
@@ -6,8 +6,8 @@ import Line from "./NetworkLine.astro";
 <div id="Experience" class="h-fit py-20">
     <h1 class="text-5xl text-center">Education</h1>
     <div class="flex flex-col items-center pt-10">
-        <div class="w-[90%] md:w-[500px]">
-            <Card primaryColor="#FFF5E0" bgColor="#303030" scaleOnHover={false}>
+        <div class="w-[90%] md:w-[600px]">
+            <Card primaryColor="#EFB495" bgColor="#303030" scaleOnHover={false}>
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full mb-3">
                         <h2 class="font-bold text-xl">
@@ -27,7 +27,7 @@ import Line from "./NetworkLine.astro";
                 </div>
             </Card>
             <Line height="100px" />
-            <Card primaryColor="#FFF5E0" bgColor="#303030" scaleOnHover={false}>
+            <Card primaryColor="#FF8080" bgColor="#303030" scaleOnHover={false}>
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full mb-3">
                         <h2 class="font-bold text-xl">Cambridge IGCSE</h2><h3>
diff --git a/src/components/Projects.svelte b/src/components/Projects.svelte
index 1b49a68..90f6c40 100644
--- a/src/components/Projects.svelte
+++ b/src/components/Projects.svelte
@@ -300,13 +300,13 @@
                 </p>
             </div>
             <div
-                class="image-container w-full lg:w-1/2 aspect-video [perspective:200px] relative"
+                class="image-container w-full lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0"
             >
                 <!-- task bot -->
                 <div
                     class="task-widget absolute flex flex-col opacity-30
-                            w-[90%] h-[99%]
-                            top-1/2 left-1/2 [transform:translateX(-59%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
+                            w-full h-[99%]
+                            top-1/2 left-1/2 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
                 >
                     <div
                         class="w-full bg-black border-solid border-2 border-white
@@ -350,8 +350,8 @@
                 </div>
                 <div
                     class="task-widget absolute flex flex-col
-                            w-[90%] h-[99%]
-                            top-1/2 left-1/2 [transform:translateX(-60%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
+                            w-full h-[99%]
+                            top-1/2 left-1/2 [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
                 >
                     <div
                         class="w-full bg-black border-solid border-2 border-white
@@ -395,7 +395,7 @@
                 </div>
 
                 <div
-                    class="visit-div absolute w-[90%] h-full bg-[rgba(0,0,0,0.5)] opacity-0
+                    class="visit-div absolute w-full h-full bg-[rgba(0,0,0,0.5)] opacity-0
                     rounded-md
                     [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
                     border-2 border-solid border-white
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index d3cc00c..61fb6de 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -20,14 +20,14 @@ import Line from "../components/NetworkLine.astro";
                         web development, I delved into frameworks such as
                         Svelte, React and Astro.
                     </p>
-                    <div class="w-full flex flex-row flex-wrap justify-center">
+                    <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
                             class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             HTML
                         </div>
                         <div
-                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-700 rounded-full px-3 py-1 mr-1 my-1"
                         >
                             CSS
                         </div>
@@ -37,12 +37,12 @@ import Line from "../components/NetworkLine.astro";
                             Javascript
                         </div>
                         <div
-                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-400 text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             TypeScript
                         </div>
                         <div
-                            class="w-fit bg-purple-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-[#617CBE] rounded-full px-3 py-1 mr-1 my-1"
                         >
                             PHP
                         </div>
@@ -52,12 +52,12 @@ import Line from "../components/NetworkLine.astro";
                             Express
                         </div>
                         <div
-                            class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-orange-400 text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Svelte
                         </div>
                         <div
-                            class="w-fit bg-cyan-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-[#00D8FF] text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             React
                         </div>
@@ -72,12 +72,12 @@ import Line from "../components/NetworkLine.astro";
                             Qwik
                         </div>
                         <div
-                            class="w-fit bg-cyan-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-[#07B6D4] text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             TailwindCSS
                         </div>
                         <div
-                            class="w-fit bg-purple-700 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-[#8500C7] rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Vite
                         </div>
@@ -100,7 +100,7 @@ import Line from "../components/NetworkLine.astro";
                         as extracting, transforming and loading data, as well as
                         data visualisation.
                     </p>
-                    <div class="w-full flex flex-row flex-wrap justify-center">
+                    <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
                             class="w-fit bg-yellow-400 bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
                             text-black rounded-full px-3 py-1 mr-1 my-1"
@@ -113,7 +113,7 @@ import Line from "../components/NetworkLine.astro";
                             R
                         </div>
                         <div
-                            class="w-fit bg-green-600 bg-[linear-gradient(_90deg,_#CC0000_0%,_#CC0000_32%,_#00BB00_33%,_#00BB00_65%,_#0000DD_66%,_#0000DD_100%_)]
+                            class="w-fit bg-green-600 bg-[linear-gradient(_90deg,_#BB0000_0%,_#BB0000_32%,_#00AA00_33%,_#00AA00_65%,_#0000BB_66%,_#0000BB_100%_)]
                             text-white rounded-full px-3 py-1 mr-1 my-1"
                         >
                             OpenCV
@@ -129,12 +129,7 @@ import Line from "../components/NetworkLine.astro";
                             MySQL
                         </div>
                         <div
-                            class="w-fit bg-purple-600 rounded-full px-3 py-1 mr-1 my-1"
-                        >
-                            Machine Learning
-                        </div>
-                        <div
-                            class="w-fit bg-blue-600 text-white rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-blue-800 text-white rounded-full px-3 py-1 mr-1 my-1"
                         >
                             Pandas
                         </div>
@@ -144,7 +139,7 @@ import Line from "../components/NetworkLine.astro";
                             Selenium
                         </div>
                         <div
-                            class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
+                            class="w-fit bg-gray-200 text-black rounded-full px-3 py-1 mr-1 my-1"
                         >
                             BeautifulSoup4
                         </div>