diff --git a/frontend/app/explore/page.tsx b/frontend/app/explore/page.tsx
index 3378f56b4..19659c9e9 100644
--- a/frontend/app/explore/page.tsx
+++ b/frontend/app/explore/page.tsx
@@ -5,15 +5,18 @@ import DocumentItem from "./DocumentItem";
 import { Document } from "./types";
 import Button from "../components/ui/Button";
 import Link from "next/link";
+import Spinner from "../components/ui/Spinner";
 
 export default function ExplorePage() {
   const [documents, setDocuments] = useState<Document[]>([]);
+  const [isPending, setIsPending] = useState(true);
 
   useEffect(() => {
     fetchDocuments();
   }, []);
 
   const fetchDocuments = async () => {
+    setIsPending(true);
     try {
       console.log(
         `Fetching documents from ${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`
@@ -26,6 +29,7 @@ export default function ExplorePage() {
       console.error("Error fetching documents", error);
       setDocuments([]);
     }
+    setIsPending(false);
   };
 
   return (
@@ -34,24 +38,28 @@ export default function ExplorePage() {
         <h1 className="text-3xl font-bold text-center">Explore Your Brain</h1>
         <h2 className="opacity-50">View what&rsquo;s in your second brain</h2>
       </div>
-      <div className="w-full max-w-xl flex flex-col gap-5">
-        {documents.length !== 0 ? (
-          documents.map((document, index) => (
-            <DocumentItem
-              key={index}
-              document={document}
-              setDocuments={setDocuments}
-            />
-          ))
-        ) : (
-          <div className="flex flex-col items-center justify-center mt-10 gap-1">
-            <p className="text-center">Oh No, Your Brain is empty.</p>
-            <Link href="/upload">
-              <Button>Upload Files</Button>
-            </Link>
-          </div>
-        )}
-      </div>
+      {isPending ? (
+        <Spinner />
+      ) : (
+        <div className="w-full max-w-xl flex flex-col gap-5">
+          {documents.length !== 0 ? (
+            documents.map((document, index) => (
+              <DocumentItem
+                key={index}
+                document={document}
+                setDocuments={setDocuments}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center mt-10 gap-1">
+              <p className="text-center">Oh No, Your Brain is empty.</p>
+              <Link href="/upload">
+                <Button>Upload Files</Button>
+              </Link>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }