diff --git a/src/Modal.svelte b/src/Modal.svelte
new file mode 100644
index 0000000..560d265
--- /dev/null
+++ b/src/Modal.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	export let showModal: boolean;
+
+	let dialog: HTMLDialogElement;
+
+	$: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div on:click|stopPropagation>
+		<slot name="header" />
+		<hr />
+		<slot />
+		<hr />
+		<!-- svelte-ignore a11y-autofocus -->
+		<button autofocus on:click={() => dialog.close()}>Close</button>
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		max-width: 70%;
+		border-radius: 0.2em;
+		border: none;
+		padding: 0em 2em 2em 2em;
+        border-left: 2em;
+        border-right: 2em;
+        background: var(--bg);
+        color: var(--fg);
+        box-shadow: .5em .5em .5em var(--red);
+	}
+	dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+	}
+	dialog > div {
+		padding: 1em;
+	}
+	dialog[open] {
+		animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.5s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	button {
+		display: block;
+	}
+</style>
diff --git a/src/app.html b/src/app.html
index 2d8fbbd..7b372dc 100644
--- a/src/app.html
+++ b/src/app.html
@@ -30,6 +30,14 @@
 				margin: 2rem;
 			}
 
+			h1, h2, h3 {
+				color: var(--red);
+			}
+
+			hr {
+				border: .2em solid var(--bg-grad);
+  				border-radius: 5em;
+			}
 			
 			*::-webkit-scrollbar,
 			*::-webkit-scrollbar-thumb {
diff --git a/src/main.svelte b/src/main.svelte
index 5ae1c32..a0fa5f3 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -2,6 +2,11 @@
     import { getJson } from "$lib/data";
 	import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
+
+    import Modal from './Modal.svelte';
+
+	let showModal: boolean = false;
+    let activeModal: any = null;
 </script>
 
 <style>
@@ -46,10 +51,19 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        color: var(--red);
-        /*text-decoration: underline 5px solid var(--bg-grad);*/
-        border-bottom: 5px solid var(--bg-grad);
-        margin-bottom: 1em;
+        margin-bottom: 0em;
+    }
+
+    .card-header h1 {
+        font-size: 2em;
+    }
+
+    .card-header h2 {
+        font-size: 1.5em;
+    }
+
+    .card-header h3 {
+        font-size: 1.5em;
     }
 
     .card-header .logo {
@@ -62,7 +76,7 @@
     .skills-container {
         max-width: 90%;
         padding: 0em 2em;
-        margin: 0em auto;
+        margin: em auto;
     }
 
     .cards {
@@ -80,7 +94,8 @@
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        flex: 0 0 20%;
+        flex: 2 1 20%;
+        min-width: 10em;
         padding: .5em 2.5em 2em 2.5em;
         background: var(--bg-grad);
         border-radius: .5em;
@@ -92,12 +107,13 @@
     }
 
     .card .card-content {
-        margin: 1em 0;
+        margin: 2em 0em;
         max-width: 85%;
     }
 
-    .card .card-footer {
+    .card-footer {
         display: flex;
+        gap: 1.5em;
         justify-content: space-between;
         margin-top: auto;
     }
@@ -116,7 +132,7 @@
             <h1>{info.name}</h1>
             <h3 class="not-required">{info.job_title}</h3>
         </div>
-
+        <hr />
         <div class="flex-container">
             <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
             <p class="about">{@html info.about}</p>
@@ -126,12 +142,15 @@
     <div class="skills-container">
         <ul class="cards">
             {#each info.skills as skill}
-                <li class="card">
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                <li on:click={() => {showModal = true; activeModal = skill}} class="card">
                     <div>
                         <div class="card-header">
                             <h2>{skill.skill}</h2>
                             <i class="{skill.logo} logo"></i>
                         </div>
+                        <hr />
                         <div class="card-content">
                             <p class="not-required">{skill.about}</p>
                         </div>
@@ -151,4 +170,22 @@
         </div>
     </div>
     <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
-{/await}
\ No newline at end of file
+{/await}
+
+{#if activeModal != null}
+    <Modal bind:showModal>
+        <h2 slot="header" class="card-header">
+            {activeModal.skill}
+            <i class="{activeModal.logo} logo"></i>
+        </h2>
+
+        <p>
+            {activeModal.about}
+        </p>
+
+        <div class="card-footer">
+            <a href="{activeModal.link}">Learn More</a>
+            <a href="/repos">Repos</a>
+        </div>
+    </Modal>
+{/if}
\ No newline at end of file
diff --git a/static/json/me.json b/static/json/me.json
index 33e44f9..091a952 100644
--- a/static/json/me.json
+++ b/static/json/me.json
@@ -6,17 +6,20 @@
     {
       "skill": "Rust",
       "logo": "devicon-rust-plain",
-      "about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate"
+      "link": "https://rust-lang.org",
+      "about": "Rust is a remarkable programming language that combines the best of both high-level and low-level programming. It prioritizes safety and efficiency through strict memory management and concurrent programming features, all while maintaining clean and readable code. The active Rust community makes it a valuable choice for building reliable software."
     },
     {
       "skill": "Svelte",
       "logo": "devicon-svelte-plain",
-      "about": "Lorem ipsum dolor sit alore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate"
+      "link": "https://svelte.dev",
+      "about": "Svelte is an impressive web framework that stands out in the world of front-end development. It's known for its unique approach, compiling components to highly optimized vanilla JavaScript, resulting in blazing-fast web applications. Svelte's simplicity and declarative syntax make it easy to learn and use, and it encourages efficient, maintainable code. "
     },
     {
       "skill": "Git",
       "logo": "devicon-git-plain",
-      "about": "Lorem ipsum doerit in voluptate"
+      "link": "https://git-scm.com",
+      "about": "Git, a fundamental tool in version control, streamlines collaboration and code management. Its simplicity and robustness empower developers to track changes, collaborate seamlessly, and maintain code efficiently. With Git, managing and tracking code changes becomes a breeze, making it an essential tool for software development."
     }
   ],
   "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at Thales UK 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>."