diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte
index 4f6fe79..42f9ff6 100644
--- a/src/lib/components/Cards/Card.svelte
+++ b/src/lib/components/Cards/Card.svelte
@@ -1,31 +1,23 @@
 <script lang="ts">
-    export let headerLeft: string = "";
-    export let headerRight: string = "";
-    export let headerColour: string = "text-red-500";
-    export let footer: string = "";
-
     // Allows additional styling to be applied to the Card component's outer wrapping
     export let containerStyle: string = "";
 </script>
 
 <div class={containerStyle}>
     <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
-        <div class="{headerColour} flex flex-row justify-between items-center mb-4">
-            <p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
-            
-            {#if headerRight}
-                <p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
-            {/if}
+        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
+            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
+            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
         </div>
         <hr class="mb-4 border-1" />
         <div class="flex-1 flex flex-col justify-center p-5">
-            <slot />
+            <slot name="content"/>
+        </div>
+        
+        <hr class="my-4 border-1" />
+        <div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
+            <slot name="footerLeft"/>
+            <slot name="footerRight"/>
         </div>
-        {#if footer}
-            <hr class="my-4 border-1" />
-            <div class="mt-2 text-base opacity-90">
-                {@html footer}
-            </div>
-        {/if}
     </div>
 </div>
diff --git a/src/lib/components/FlexGallery.svelte b/src/lib/components/FlexGallery.svelte
deleted file mode 100644
index f9c5d65..0000000
--- a/src/lib/components/FlexGallery.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-</script>
-
-<!-- FlexGallery.svelte -->
-<div class="flex flex-wrap gap-10 w-full">
-    <slot />
-</div>
\ No newline at end of file
diff --git a/src/lib/components/GridGallery.svelte b/src/lib/components/GridGallery.svelte
new file mode 100644
index 0000000..801ff62
--- /dev/null
+++ b/src/lib/components/GridGallery.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<!-- GridGallery.svelte -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+    <slot />
+</div>
\ No newline at end of file
diff --git a/src/lib/components/Loading.svelte b/src/lib/components/Loading.svelte
index 17aa92f..4ccf026 100644
--- a/src/lib/components/Loading.svelte
+++ b/src/lib/components/Loading.svelte
@@ -21,21 +21,21 @@
         left: 0%;
         top: 0%;
         animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid var(--fg);
+        border-bottom: 3px solid gray;
     }
 
     .inner.two {
         right: 0%;
         top: 0%;
         animation: rotate-two 1s linear infinite;
-        border-right: 3px solid var(--fg);
+        border-right: 3px solid gray;
     }
 
     .inner.three {
         right: 0%;
         bottom: 0%;
         animation: rotate-three 1s linear infinite;
-        border-top: 3px solid var(--fg);
+        border-top: 3px solid gray;
     }
 
     @keyframes rotate-one {
diff --git a/src/lib/components/SkillProgress.svelte b/src/lib/components/SkillProgress.svelte
index a989a38..e72437d 100644
--- a/src/lib/components/SkillProgress.svelte
+++ b/src/lib/components/SkillProgress.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     export let value: number = 0; // 0 to 100
+    export let skillColour: string = 'bg-orange-400'; // Default color
 </script>
 
 <div class="w-full mt-3">
@@ -9,7 +10,7 @@
     </div>
     <div class="w-full bg-gray-800 rounded-full h-5">
         <div
-            class="bg-orange-400 h-5 rounded-full transition-all duration-500"
+            class="{skillColour} h-5 rounded-full transition-all duration-500"
             style="width: {value}%"
         ></div>
     </div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 1cb91ce..98143f2 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,9 +1,9 @@
 // place files you want to import through the `$lib` alias in this folder.
 import Card from '$lib/components/Cards/Card.svelte';
-import FlexGallery from './components/FlexGallery.svelte';
+import GridGallery from './components/GridGallery.svelte';
 import Loading from './components/Loading.svelte';
 import Section from './components/Section.svelte';
 import SkillProgress from './components/SkillProgress.svelte';
 import Timeline from './components/Timeline.svelte';
 
-export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline };
+export { Card, GridGallery, Loading, Section, SkillProgress, Timeline };
diff --git a/src/main.svelte b/src/main.svelte
index ee4569a..2ba3d0f 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -5,7 +5,7 @@
     import Loading from '$lib/components/Loading.svelte';
     import Section from '$lib/components/Section.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
-    import FlexGallery from "$lib/components/FlexGallery.svelte";
+    import GridGallery from "$lib/components/GridGallery.svelte";
     import SkillProgress from "$lib/components/SkillProgress.svelte";
     import Timeline from '$lib/components/Timeline.svelte';
 </script>
@@ -25,8 +25,10 @@
 
     <!-- Main Card -->
     <Section label="[Experience]">
-        <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
-            <div class="flex flex-row items-center gap-5">
+        <Card>
+            <h2 slot="headerLeft">{info.name}</h2>
+            <h2 slot="headerRight">{info.job_title}</h2>
+            <div slot="content" class="flex flex-row items-center gap-5">
                 <img
                     src={info.profile_photo}
                     alt="Avatar"
@@ -34,20 +36,24 @@
                 />
                 <p>{@html info.about}</p>
             </div>
+            <h3 slot="footerLeft">{@html info.location}</h3>
         </Card>
     </Section>
 
     <!-- SKills -->
     <Section label="[Skills]">
-        <FlexGallery>
+        <GridGallery>
             {#each info.skills as skill}
-                <Card headerLeft={skill.name} footer={skill.link} containerStyle="flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
-                    {skill.about}
-
-                    <SkillProgress value={skill.competency} />
+                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
+                    <h2 slot="headerLeft">{skill.name}</h2>
+                    <div slot="content">
+                        {skill.about}
+                        <SkillProgress skillColour={skill.colour} value={skill.competency} />
+                    </div>
+                    <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
                 </Card>
             {/each}
-        </FlexGallery>
+        </GridGallery>
     </Section>
 
     <Section label="[Experience]">
diff --git a/src/routes/repos/+page.svelte b/src/routes/repos/+page.svelte
index 9595167..5fbdd0b 100644
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-    import { loadRepos, repos } from '$lib/stores';    import { onMount } from 'svelte';
+    import { loadRepos, repos } from '$lib/stores';
     import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
+    import { toasts } from 'svelte-toasts';
 
-    import FlexGallery from '$lib/components/FlexGallery.svelte';
+    import GridGallery from '$lib/components/GridGallery.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
+    import Loading from '$lib/components/Loading.svelte';
 
     let repoImages: Record<string, string | null> = {};
 
@@ -18,29 +20,52 @@
             }
         })();
     }
-
-    onMount(loadRepos);
 </script>
 
-<FlexGallery>
-    {#each $repos as repo}
-        <Card
-            headerLeft={repo.name}
-            headerRight={repo.language}
-            footer={timeSince(repo.updated_at)}
-            containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
-        >
-            <div class="relative z-0">
-                {repo.description}
-            </div>
-            {#if repoImages[repo.name]}
-                <!-- svelte-ignore a11y_img_redundant_alt -->
-                <img
-                    src={repoImages[repo.name]}
-                    alt="repo image"
-                    class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
-                />
-            {/if}
-        </Card>
-    {/each}
-</FlexGallery>
+{#await loadRepos()}
+    <Loading />
+{:then _}
+    {#if $repos.length == 0}
+        {console.log('No Repos')}
+        <div style="display: none;">
+            {toasts.add({
+                title: 'Error',
+                description: 'Failed to load repositories',
+                duration: 5000,
+                type: 'error',
+                placement: 'bottom-center',
+                showProgress: true
+            })}
+        </div>
+    {/if}
+    <!-- Repositories loaded successfully -->
+    <GridGallery>
+        {#each $repos as repo}
+            <!-- <Loading /> -->
+            <Card
+                containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
+            >
+                <h2 slot="headerLeft">{repo.name}</h2>
+                <h2 slot="headerRight" class="text-sm text-gray-500">
+                    {repo.language}
+                </h2>
+                <div slot="content">
+                    <div class="relative z-0">
+                        {repo.description}
+                    </div>
+                    {#if repoImages[repo.name]}
+                        <!-- svelte-ignore a11y_img_redundant_alt -->
+                        <img
+                            src={repoImages[repo.name]}
+                            alt="repo image"
+                            class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
+                        />
+                    {/if}
+                </div>
+                <h3 slot="footerLeft">
+                    Last Updated: {timeSince(repo.updated_at)}
+                </h3>
+            </Card>
+        {/each}
+    </GridGallery>
+{/await}
diff --git a/static/json/me.json b/static/json/me.json
index 824f0e5..2e0b4c5 100644
--- a/static/json/me.json
+++ b/static/json/me.json
@@ -3,49 +3,57 @@
   "job_title": "Software Engineer",
   "location": "Crawley, Sussex <br /> UK",
   "profile_photo": "/profile.jpg",
+  "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at <a href='https://www.thalesgroup.com/en'>Thales UK</a> and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>.",
   "skills": [
     {
       "name": "Rust",
       "logo": "devicon-rust-plain",
+      "colour": "bg-orange-400",
       "link": "https://rust-lang.org",
-      "usage": "Rust is a memory-safe language with zero-cost abstractions, making it ideal for embedded systems. I used Rust to build a <a href='https://git.luke-else.co.uk/luke-else/esp32_gps_display'>GPS-based speedometer</a> for my car and a <a href='https://git.luke-else.co.uk/luke-else/subnet_calculator'>Subnet Calculator</a> for university studies.",
       "about": "Rust combines safety, efficiency, and clean code, making it a powerful choice for reliable software development.",
       "competency": 70
     },
     {
       "name": "C++",
       "logo": "devicon-cplusplus-plain",
+      "colour": "bg-blue-400",
       "link": "https://cplusplus.com/",
-      "usage": "Since joining Thales in 2022, I’ve worked on a distributed simulation system using C++, primarily with <a href='https://www.qt.io'>Qt</a> and <a href='https://github.com/ocornut/imgui'>ImGui</a> to develop customer-facing applications.",
       "about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications.",
       "competency": 80
     },
+    {
+      "name": "Tailwind CSS",
+      "logo": "devicon-tailwindcss-plain",
+      "colour": "bg-blue-800",
+      "link": "https://tailwindcss.com/",
+      "about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.",
+      "competency": 60
+    },
     {
       "name": "Git",
       "logo": "devicon-git-plain",
+      "colour": "bg-red-400",
       "link": "https://git-scm.com",
-      "usage": "I have extensive experience with Git, including advanced features like <a href='https://www.atlassian.com/git/tutorials/advanced-overview'>branching, merging and hooks</a>. I've also set up self-hosted <a href='https://git.luke-else.co.uk/luke-else/'>Git services</a> with CI/CD automation.",
       "about": "Git is an essential tool for version control, enabling efficient collaboration and streamlined code management.",
       "competency": 80
     },
     {
       "name": "Docker",
       "logo": "devicon-docker-plain",
+      "colour": "bg-blue-500",
       "link": "https://docker.com",
-      "usage": "I use Docker and Docker Compose for containerized deployments, including hosting <a href='https://git.luke-else.co.uk/luke-else/server'>home-lab services</a> such as this <a href='https://git.luke-else.co.uk/luke-else/luke-else.co.uk'>website</a> and remote Git repositories.",
       "about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.",
       "competency": 100
     },
     {
       "name": "Svelte",
       "logo": "devicon-svelte-plain",
+      "colour": "bg-orange-400",
       "link": "https://svelte.dev",
-      "usage": "I built <a href='https://git.luke-else.co.uk/luke-else/luke-else.co.uk'>this website</a> using Svelte and plan to explore <a href='https://github.com/tauri-apps/tauri'>Tauri</a> for building desktop apps.",
       "about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.",
-      "competency": 40
+      "competency": 55
     }
   ],
-  "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at <a href='https://www.thalesgroup.com/en'>Thales UK</a> and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>.",
   "timeline" : [
     {
       "duration" : "September 2022 - Present",