diff --git a/src/components/islands/loading-component.jsx b/src/components/islands/loading-component.jsx
new file mode 100644
index 0000000..53620a0
--- /dev/null
+++ b/src/components/islands/loading-component.jsx
@@ -0,0 +1,26 @@
+
+
+export default function LoadingComponent() {
+
+
+  return (
+    <div className="space-y-3 ml-2 mt-4 md:mt-6 loading">
+      <h2 className="font-black bg-gray-300 rounded animate-pulse" style={{ height: "30px", width: "150px" }}>
+
+      </h2>
+
+      {/* List of recent searches or placeholders */}
+      <ol className="space-y-1.5 underline">
+        {[...Array(5)].map((_, i) => (
+          <li key={i}>
+            <div
+              className="placeholder-text bg-gray-300 rounded animate-pulse"
+              style={{ width: "100px", height: "24px" }}
+            ></div>
+          </li>
+        ))}
+
+      </ol>
+    </div>
+  );
+}
diff --git a/src/components/islands/recent-searches.jsx b/src/components/islands/recent-searches.jsx
index fcb4006..7a98c0e 100644
--- a/src/components/islands/recent-searches.jsx
+++ b/src/components/islands/recent-searches.jsx
@@ -1,32 +1,35 @@
-import { useEffect } from "react";
-import { useStore } from "@nanostores/react";
+import { useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
 import { $recentSearches } from "../../lib/stores/search.js";
 
-/**
- * Recent Searches Component - An Island that displays a user's last 5 searches
- * 
- * @todo implement a default list instead of `null` when no `$recentSearch` is found 
- * @todo implement loading component to avoid flickering UI
- */
 export default function RecentSearches() {
   const recentSearches = useStore($recentSearches);
-
+  
   useEffect(() => {
-    $recentSearches.set({...JSON.parse(localStorage.getItem("jargons.dev:recent_searches"))})
+    const savedSearches = JSON.parse(localStorage.getItem("jargons.dev:recent_searches"));
+    if (savedSearches) {
+      $recentSearches.set(savedSearches);
+    }
+  
+    const loader = document.querySelector(".loading");
+    if (loader) loader.remove();
+
   }, []);
 
+
+
   return Object.values(recentSearches).length ? (
     <div className="space-y-3 ml-2 mt-4 md:mt-6">
-			<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
-			<ol className="space-y-1.5 underline">
+      <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+      <ol className="space-y-1.5 underline">
         {Object.values(recentSearches).slice(0, 5).map((item, i) => (
           <li key={i}>
             <a href={item.url}>
-              { item.word }
+              {item.word}
             </a>
           </li>
         ))}
-			</ol>
-		</div>
+      </ol>
+    </div>
   ) : null;
-}
\ No newline at end of file
+}
diff --git a/src/components/recent-searches.astro b/src/components/recent-searches.astro
new file mode 100644
index 0000000..482d473
--- /dev/null
+++ b/src/components/recent-searches.astro
@@ -0,0 +1,7 @@
+---
+import RecentSearch from "./islands/recent-searches";
+import LoadingComponent from "./islands/loading-component";
+---
+
+<LoadingComponent />
+<RecentSearch client:load />
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 89ec8ba..e37f29d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,37 +2,39 @@
 import { getCollection } from "astro:content";
 import BaseLayout from "../layouts/base.astro";
 import Search from "../components/islands/search.jsx";
-import RecentSearches from "../components/islands/recent-searches.jsx";
-
+import RecentSearches from "../components/recent-searches.astro";
 const dictionary = await getCollection("dictionary");
 ---
 
-<BaseLayout 
-	pageTitle="Jargons.dev"
-	subtitle="Simplified Meaning & Definition to Technical Terms"
+<BaseLayout
+  pageTitle="Jargons.dev"
+  subtitle="Simplified Meaning & Definition to Technical Terms"
 >
-	<main class="flex flex-col max-w-screen-lg p-5 justify-center mx-auto min-h-screen">
-		<!-- Title -->
-		<div class="mb-4 md:mb-6">
-			<h1 class="relative text-5xl md:text-7xl lg:text-8xl font-black w-fit">
-				<a href="/" class="absolute font-normal text-[0.6rem] md:text-xs right-0 md:top-1.5 lg:top-3">
-					jargons.dev
-				</a>
-				Dictionary
-			</h1>
-		</div>
-		
-		<!-- Search -->
-		<Search triggerSize="md" dictionary={dictionary} client:load />
+  <main
+    class="flex flex-col max-w-screen-lg p-5 justify-center mx-auto min-h-screen"
+  >
+    <!-- Title -->
+    <div class="mb-4 md:mb-6">
+      <h1 class="relative text-5xl md:text-7xl lg:text-8xl font-black w-fit">
+        <a
+          href="/"
+          class="absolute font-normal text-[0.6rem] md:text-xs right-0 md:top-1.5 lg:top-3"
+        >
+          jargons.dev
+        </a>
+        Dictionary
+      </h1>
+    </div>
+
+    <!-- Search -->
+    <Search triggerSize="md" dictionary={dictionary} client:load />
 
-		<!-- Browse words -->
-		<div class="ml-2 mt-4 md:mt-6" id="whirl-browse-words">
-      <a href="/browse">
-        Browse Words
-      </a>
+    <!-- Browse words -->
+    <div class="ml-2 mt-4 md:mt-6" id="whirl-browse-words">
+      <a href="/browse"> Browse Words </a>
     </div>
 
-		<!-- Recent Word Look Up -->
-		<RecentSearches client:load />
-	</main>
+    <!-- Recent Word Look Up -->
+    <RecentSearches />
+  </main>
 </BaseLayout>