diff --git a/app/api/tags/root/route.ts b/app/api/tags/root/route.ts
new file mode 100644
index 0000000..01cf36d
--- /dev/null
+++ b/app/api/tags/root/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/app/lib/config/prisma";
+import { StatusCodes } from "http-status-codes";
+
+export async function GET(_request: Request) {
+  try {
+    // Get all root tags (with no parent)
+    const tags = await prisma.tag.findMany({
+      where: { parent: null },
+    });
+
+    return NextResponse.json(tags);
+  } catch (error) {
+    console.error("Error fetching root tags:", error);
+    return NextResponse.json(
+      { error: "Error fetching root tags" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+  }
+}
diff --git a/app/components/appLayout/topbar/index.tsx b/app/components/appLayout/topbar/index.tsx
index 4f17a27..da79e06 100644
--- a/app/components/appLayout/topbar/index.tsx
+++ b/app/components/appLayout/topbar/index.tsx
@@ -93,7 +93,12 @@ export default function Topbar(props: Props) {
     setTag(data.self);
   };
 
-  const onBreadcrumbNav = (id: number) => {
+  const onBreadcrumbNav = (id?: number) => {
+    if (id === undefined) {
+      router.push(`/explorer`);
+      return;
+    }
+
     updateSelectedTagId(id);
     router.push(`/explorer/${id}`);
   };
@@ -114,7 +119,7 @@ export default function Topbar(props: Props) {
             <Link
               underline="none"
               color="inherit"
-              onClick={() => onBreadcrumbNav(1)}
+              onClick={() => onBreadcrumbNav()}
             >
               Hie
             </Link>
@@ -124,7 +129,7 @@ export default function Topbar(props: Props) {
               <Link
                 underline="none"
                 color="inherit"
-                onClick={() => onBreadcrumbNav(1)}
+                onClick={() => onBreadcrumbNav()}
               >
                 <HomeIcon fontSize="small" />
               </Link>
diff --git a/app/explorer/page.tsx b/app/explorer/page.tsx
new file mode 100644
index 0000000..3c231d3
--- /dev/null
+++ b/app/explorer/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Breadcrumbs, Button, Link, Typography } from "@mui/material";
+import { Tag, TagRelationChain, SimpleTag } from "@/app/lib/types";
+import LocalOfferIcon from "@mui/icons-material/LocalOffer";
+import { useTagTreeState } from "@/app/store/tagTree";
+import { useRouter } from "next/navigation";
+
+export default function Page() {
+  const [rootTags, setRootTags] = useState<Tag[]>([]);
+  const { updateSelectedTagId } = useTagTreeState();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    updateTag();
+  }, []);
+
+  const updateTag = async () => {
+    const response = await fetch(`/api/tags/root`, {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    });
+
+    if (!response.ok) {
+      return;
+    }
+
+    const data: Tag[] = await response.json();
+    setRootTags(data);
+  };
+
+  const onChildClick = (id: number) => {
+    updateSelectedTagId(id);
+    router.push(`/explorer/${id}`);
+  };
+
+  return (
+    <div>
+      {rootTags.map((c, i) => (
+        <Button
+          key={i}
+          startIcon={<LocalOfferIcon />}
+          onClick={() => onChildClick(c.id)}
+        >
+          {c.name}
+        </Button>
+      ))}
+    </div>
+  );
+}