diff --git a/html/.home.html.kate-swp b/html/.home.html.kate-swp
deleted file mode 100644
index fae6f7e..0000000
Binary files a/html/.home.html.kate-swp and /dev/null differ
diff --git a/html/.home.html.swp b/html/.home.html.swp
deleted file mode 100644
index 9d297d1..0000000
Binary files a/html/.home.html.swp and /dev/null differ
diff --git a/html/home.html b/html/home.html
index a702568..57a5a23 100644
--- a/html/home.html
+++ b/html/home.html
@@ -7,7 +7,7 @@
 	<link rel="stylesheet"  href="../css/home.css">
 	<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 	
-<head>
+</head>
 
 <body>
 	<!--Header Bar -->
@@ -28,12 +28,12 @@
 			id="search_holder"
 			class="search_holder"
 		>
-			<label for"search_field">Search://</label>
+			<label for="search_field">Search://</label>
 			<input 
 			        id="search_field"
 				type="search" 
 				class="search_field"
-				placeholder=""
+				placeholder="Enter Card Name, Tag or Search Here..."
 			>
 		</form>
 		<div
@@ -60,25 +60,123 @@
 
 	</section>
 
+	<!-- PlaceHolder Card -->
+	<template>
+		<div class="card">
+			<div class="card_image"></div>
+			<div class="card_title"></div>
+			<div class="card_info_holder">
+				<div class="card_long"></div>
+				<div class="card_tag">
+			</div>
+			<div class="carousel_holder"></div>
+		</div>
+	</template>
 
 	<!--Body Area -->
-	<section id=#card_container>
-		<!-- PlaceHolder Card -->
-		<div class="card">
-			<div class="thumbnail"></div>
-			<h1>NixOS</h1>
-		</div>
-
-		<template>
-			<div class="card">
-				<div class="card_image"></div>
-				<div class="card_title"></div>
-				<div class="card_info_holder">
-					<div class="card_long"></div>
-					<div class="card_tag">
-				</div>
-			</div>
-		</template>
+	<section id="card_container">
 	</section>
 	
 </body>
+
+<script>
+
+// Grabs data from json
+async function fetchData() {
+    try {
+        const response = await fetch("../scripts/cards.json");
+        if (!response.ok) throw new Error("Network response was not ok");
+        return await response.json();
+    } catch (error) {
+        console.error("Fetching data failed:", error);
+        alert("Error fetching data. Please try again later.");
+    }
+}
+
+class Looper {
+    constructor() {
+        this.sentinal = false;
+        this.data = null;
+        console.log("Looper Online");
+        this.initialize();
+    }
+
+    async initialize() {
+        this.data = await fetchData();
+        console.log("Data loaded:", this.data);
+    }
+
+    async loop(inString) {
+        if (!this.data) {
+            console.log("Data is not loaded yet!");
+            return;
+        }
+
+        let debugDelay = 0;
+        while (this.sentinal) {
+            debugDelay++;
+            console.log("Waiting on previous search: " + debugDelay + "ms");
+        }
+        this.sentinal = true;
+
+        // Clear previous results
+        const resultsDiv = document.getElementById("card_container");
+        resultsDiv.innerHTML = "";
+
+        // Loop through the data and show matching items
+        let matchesFound = false;
+        for (let card of this.data.cards) {
+            let matches = false;
+
+            // Check if title contains inString
+            if (card.title.toLowerCase().includes(inString.toLowerCase())) {
+                matches = true;
+            }
+
+            // Check if any tag contains inString
+            if (card.tags && card.tags.some(tag => tag.toLowerCase().includes(inString.toLowerCase()))) {
+                matches = true;
+            }
+
+            // Check if text contains inString
+            if (card.text.toLowerCase().includes(inString.toLowerCase())) {
+                matches = true;
+            }
+
+            // If there's a match, display the card
+            if (matches) {
+                matchesFound = true;
+                const article = document.createElement("article");
+                article.innerHTML = `
+                    <div><h1>${card.title}</h1></div>
+                    <div><p>${card.text}</p></div>
+                    <div><ul>${card.tags.map(tag => `<li>${tag}</li>`).join('')}</ul></div>
+                `;
+                resultsDiv.appendChild(article);
+            }
+        }
+
+        if (!matchesFound) {
+            resultsDiv.innerHTML = "<p>No results found.</p>";
+        }
+
+        this.sentinal = false;
+    }
+}
+
+// Create a new Looper instance
+const loo = new Looper();
+
+
+// Event listener for the Enter key press in the input field
+document.getElementById("search_field").addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+	event.preventDefault();
+        const input = event.target.value;
+        console.log("Enter key pressed, input value: ", input);
+        loo.loop(input); // Call the loop function
+    }
+});
+
+</script>
+
diff --git a/img/default/Carousel.jpg b/img/default/Carousel.jpg
new file mode 100644
index 0000000..31453bb
Binary files /dev/null and b/img/default/Carousel.jpg differ
diff --git a/img/default/Thumbnail.jpg b/img/default/Thumbnail.jpg
new file mode 100644
index 0000000..5846c01
Binary files /dev/null and b/img/default/Thumbnail.jpg differ
diff --git a/scripts/cards.json b/scripts/cards.json
new file mode 100644
index 0000000..906bb57
--- /dev/null
+++ b/scripts/cards.json
@@ -0,0 +1,60 @@
+{
+  "cards": [
+    {
+      "title": "Education",
+      "thumbnail": "../img/t1_thumb",
+      "text": "I am a graduate of Slippery Rock Univeristy of Pennslyvania where I obtained my Bachelors in Computing: Computer Science. I expected to enjoy my AI and Machine Learning Classes, which I did, but my classes on multithreading and parallelization gave me some of my favorite tools. I've always had a relatively 'fast' computer but with multithreading I could finally use that speed.",
+      "tags": ["about","education","butler","SRU", "BC3","ls"],
+      "gallery": ["../img/t1_img1.png", "../img/t1_img2.png", "../img/t1_img3.png"]
+    },
+    {
+      "title": "Self Hosting",
+      "thumbnail": "../img/t2_thumb",
+      "text": "Lorem Ipsum dolar",
+      "tags": ["tag1", "tag2", "tag3", "about", "deployment","ls"],
+      "gallery": ["../img/t2_img1.png", "../img/t2_img2.png", "../img/t2_img3.png"]
+    },
+    {
+      "title": "Work History",
+      "thumbnail": "../img/t3_thumb",
+      "text": "Lorem Ipsum dolar",
+      "tags": ["tag1", "tag2", "tag3","about", "work","ls"],
+      "gallery": ["../img/t3_img1.png", "../img/t3_img2.png", "../img/t3_img3.png"]
+    },
+    {
+      "title": "FOSS",
+      "thumbnail": "../img/t4_thumb",
+      "text": "Lorem Ipsum dolar",
+      "tags": ["tag1", "tag2", "tag3", "about","ls"],
+      "gallery": ["../img/t4_img1.png", "../img/t4_img2.png", "../img/t4_img3.png"]
+    },
+    {
+      "title": "Where Am I",
+      "thumbnail": "../img/t1_thumb",
+      "text": "NixOS is a linux distribution focused around the Nix Package manager",
+      "tags": ["tag1", "tag2", "tag3", "about","ls"],
+      "gallery": ["../img/t1_img1.png", "../img/t1_img2.png", "../img/t1_img3.png"]
+    },
+    {
+      "title": "Vehicle Routing",
+      "thumbnail": "../img/t2_thumb",
+      "text": "Lorem Ipsum dolar",
+      "tags": ["Google", "API", "html","css","js","java","javascript","springboot","git","OOP","github", "deveolopement","ls"],
+      "gallery": ["../img/t2_img1.png", "../img/t2_img2.png", "../img/t2_img3.png"]
+    },
+    {
+      "title": "Automating A-Birch",
+      "thumbnail": "../img/t3_thumb",
+      "text": "Lorem Ipsum dolar",
+      "tags": ["tag1", "tag2", "tag3"],
+      "gallery": ["../img/t3_img1.png", "../img/t3_img2.png", "../img/t3_img3.png"]
+    },
+    {
+      "title": "t4",
+      "thumbnail": "../img/t4_thumb",
+      "text": "Lorem Ipsum dolar",
+      "tags": ["tag1", "tag2", "tag3", "about"],
+      "gallery": ["../img/t4_img1.png", "../img/t4_img2.png", "../img/t4_img3.png"]
+    }
+  ]
+}

No results found.