diff --git a/lib/context/HubOneContext.tsx b/lib/context/HubOneContext.tsx
index 7f63a9e6..7fba03e9 100644
--- a/lib/context/HubOneContext.tsx
+++ b/lib/context/HubOneContext.tsx
@@ -8,6 +8,7 @@ export type Settings = {
   links: Link[];
   linkGroups: LinkGroup[];
   footerLinks: FooterLink[];
+  createModalOpened: boolean;
 };
 
 const defaultSettings: Settings = {
@@ -16,6 +17,7 @@ const defaultSettings: Settings = {
   links: [],
   linkGroups: [],
   footerLinks: [],
+  createModalOpened: false,
 };
 
 const HubOneContext = React.createContext({
@@ -25,6 +27,7 @@ const HubOneContext = React.createContext({
   setLinks: (link: Link[]) => {},
   setLinkGroups: (linkGroups: LinkGroup[]) => {},
   setFooterLinks: (footerLinks: FooterLink[]) => {},
+  setCreateModalOpened: (createModalOpened: boolean) => {},
 });
 
 export const useHubOneContext = () => useContext(HubOneContext);
@@ -64,6 +67,12 @@ export function HubOneContextProvider({
       footerLinks,
     }));
   };
+  const setCreateModalOpened = (createModalOpened: boolean) => {
+    setState((prevState) => ({
+      ...prevState,
+      createModalOpened,
+    }));
+  };
 
   const initState = {
     ...defaultSettings,
@@ -72,6 +81,7 @@ export function HubOneContextProvider({
     setLinks,
     setLinkGroups,
     setFooterLinks,
+    setCreateModalOpened,
   };
 
   const [state, setState] = useState(initState);
diff --git a/package.json b/package.json
index 4b6506d8..ee392d9f 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@mantine/next": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
     "@prisma/client": "^4.5.0",
+    "@tabler/icons-react": "^2.17.0",
     "@tanstack/react-query": "^4.12.0",
     "@tanstack/react-query-devtools": "^4.12.0",
     "axios": "^1.1.3",
@@ -32,8 +33,7 @@
     "prettier": "^2.6.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scroll": "^1.8.8",
-    "tabler-icons-react": "^1.55.0"
+    "react-scroll": "^1.8.8"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",
diff --git a/pages/[[...hubPaths]].tsx b/pages/[[...hubPaths]].tsx
index f151e290..98619bc7 100644
--- a/pages/[[...hubPaths]].tsx
+++ b/pages/[[...hubPaths]].tsx
@@ -5,16 +5,25 @@ import { useRouter } from "next/router";
 
 import { useHubOneContext } from "../lib/context/HubOneContext";
 import { getHubWithPath } from "../lib/requests/hub/getHub";
+import { getHubs } from "../lib/requests/hub/getHubs";
 import { useFetchByHubId } from "../lib/useQueries";
 import { Footer } from "../ui/components/Footer";
 import { HeaderBar } from "../ui/components/Header";
+import AddHubModal from "../ui/components/HubModals/CreateHubModal/CreateHubModal";
 import Hero from "../ui/sections/Hero";
+import HubMenu from "../ui/sections/HubMenu";
 import LinkSection from "../ui/sections/LinkSection";
 
 export default function Home() {
   const router = useRouter();
-  const { setHub, setLinks, setLinkGroups, setFooterLinks } =
-    useHubOneContext();
+  const {
+    setHub,
+    setLinks,
+    setLinkGroups,
+    setFooterLinks,
+    createModalOpened,
+    setCreateModalOpened,
+  } = useHubOneContext();
   // use `|| [""]` for root hub that has no set path by the router
   const hubPaths = (router.query.hubPaths as string[]) || [""];
   const {
@@ -24,8 +33,8 @@ export default function Home() {
   } = useQuery<Hub>(["hubs", hubPaths[0]], () => getHubWithPath(hubPaths[0]), {
     onSuccess: setHub,
   });
-  const hubId = Number(hub?.id);
 
+  const hubId = Number(hub?.id);
   const config = <T,>(onSuccess: (data: T) => void) => ({
     enabled: !!hubId,
     onSuccess,
@@ -34,6 +43,8 @@ export default function Home() {
   useFetchByHubId<LinkGroup>("linkgroups", hubId, config(setLinkGroups));
   useFetchByHubId<FooterLink>("footerlinks", hubId, config(setFooterLinks));
 
+  const { data: hubs } = useQuery(["hubs"], () => getHubs());
+
   if (isLoading) {
     return (
       <Center
@@ -81,7 +92,12 @@ export default function Home() {
       <HeaderBar />
       <Hero />
       <LinkSection />
+      {hubs && <HubMenu hubs={hubs} />}
       <Footer />
+      <AddHubModal
+        opened={createModalOpened}
+        setOpened={setCreateModalOpened}
+      />
     </>
   );
 }
diff --git a/pages/api/v1/hubs/index.ts b/pages/api/v1/hubs/index.ts
index e445c9fc..991f2b0d 100644
--- a/pages/api/v1/hubs/index.ts
+++ b/pages/api/v1/hubs/index.ts
@@ -5,7 +5,11 @@ import { prisma } from "../../../../lib/prisma";
 // GET
 export async function handleGET(res: NextApiResponse) {
   try {
-    const items = await prisma.hub.findMany();
+    const items = await prisma.hub.findMany({
+      orderBy: {
+        id: "asc",
+      },
+    });
     res.json(items);
   } catch (error) {
     res.status(500).json({ error });
diff --git a/pages/api/v1/linkgroups/index.ts b/pages/api/v1/linkgroups/index.ts
index dcce1869..b53ebd2d 100644
--- a/pages/api/v1/linkgroups/index.ts
+++ b/pages/api/v1/linkgroups/index.ts
@@ -7,7 +7,12 @@ async function handleGET(res: NextApiResponse, hubId: number) {
   try {
     let items;
     if (hubId && !Number.isNaN(hubId)) {
-      items = await prisma.linkGroup.findMany({ where: { hubId } });
+      items = await prisma.linkGroup.findMany({
+        where: { hubId },
+        orderBy: {
+          id: "asc",
+        },
+      });
     } else {
       items = await prisma.linkGroup.findMany();
     }
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index a05e05b9..6bae93fa 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -7,7 +7,12 @@ async function handleGET(res: NextApiResponse, hubId: number) {
   try {
     let items;
     if (hubId && !Number.isNaN(hubId)) {
-      items = await prisma.link.findMany({ where: { hubId } });
+      items = await prisma.link.findMany({
+        where: { hubId },
+        orderBy: {
+          id: "asc",
+        },
+      });
     } else {
       items = await prisma.link.findMany();
     }
diff --git a/ui/components/AddLinkCard.tsx b/ui/components/AddLinkCard.tsx
index 4929e845..0f0ce29f 100644
--- a/ui/components/AddLinkCard.tsx
+++ b/ui/components/AddLinkCard.tsx
@@ -1,7 +1,7 @@
 import { Card, createStyles, Stack, Text } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import { Plus } from "tabler-icons-react";
 
 import AddLinkModal from "./LinkModals";
 
@@ -48,7 +48,7 @@ function AddLinkCard({
           justify="center"
           sx={() => ({ height: "inherit" })}
         >
-          <Plus size={36} strokeWidth={2} color="black" />
+          <IconPlus size={36} strokeWidth={2} color="black" />
           <Text align="center">Add Link</Text>
         </Stack>
       </Card>
diff --git a/ui/components/AddLinkGroupCard.tsx b/ui/components/AddLinkGroupCard.tsx
index bd078bf8..08786739 100644
--- a/ui/components/AddLinkGroupCard.tsx
+++ b/ui/components/AddLinkGroupCard.tsx
@@ -1,7 +1,7 @@
 import { Card, createStyles, Group, Text } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import { Plus } from "tabler-icons-react";
 
 import AddLinkGroupModal from "./LinkGroupModals";
 
@@ -34,7 +34,7 @@ function AddLinkGroupCard({ hubId }: { hubId: number }) {
             height: "100%",
           })}
         >
-          <Plus size={36} strokeWidth={2} color="black" />
+          <IconPlus size={36} strokeWidth={2} color="black" />
           <Text align="center">Add Link Group</Text>
         </Group>
       </Card>
diff --git a/ui/components/Header.tsx b/ui/components/Header.tsx
index 8be90706..516f7e2d 100644
--- a/ui/components/Header.tsx
+++ b/ui/components/Header.tsx
@@ -2,6 +2,7 @@ import {
   ActionIcon,
   Burger,
   Button,
+  Center,
   Container,
   createStyles,
   Group,
@@ -9,19 +10,19 @@ import {
   Image,
   MediaQuery,
   Paper,
+  rem,
   Transition,
   useMantineTheme,
 } from "@mantine/core";
 import { useToggle } from "@mantine/hooks";
+import { IconPlus, IconSettings, IconX } from "@tabler/icons-react";
 import { useState } from "react";
 import { Link as ScrollLink } from "react-scroll";
-import { X, Settings, Plus } from "tabler-icons-react";
 
 import { useHubOneContext } from "../../lib/context/HubOneContext";
 
-import DefaultHubLogo from "./DefaultHubLogo";
-import EditHubModal from "./HubModals";
-import AddHubModal from "./HubModals/AddHubModal";
+import HubLogo from "./HubLogo";
+import EditHubModal from "./HubModals/EditHubModal";
 
 const HEADER_HEIGHT = 60;
 
@@ -72,31 +73,28 @@ const useStyles = createStyles((theme) => ({
 
 export function HeaderBar() {
   const { classes } = useStyles();
-  const { hub, linkGroups, footerLinks } = useHubOneContext();
+  const { hub, linkGroups, setCreateModalOpened } = useHubOneContext();
   const theme = useMantineTheme();
   const [opened, toggleOpened] = useToggle();
   const { editMode } = useHubOneContext();
   const [editModalOpened, setEditModalOpened] = useState(false);
-  const [addModalOpened, setAddModalOpened] = useState(false);
-  const items = linkGroups?.map((linkGroup) => {
-    return (
-      <ScrollLink
-        key={linkGroup.title}
-        to={linkGroup.title}
-        smooth="easeInOutQuint"
-        duration={1000}
+  const items = linkGroups?.map((linkGroup) => (
+    <ScrollLink
+      key={linkGroup.title}
+      to={linkGroup.title}
+      smooth="easeInOutQuint"
+      duration={1000}
+    >
+      <Button
+        variant="subtle"
+        onClick={() => {
+          toggleOpened(false);
+        }}
       >
-        <Button
-          variant="subtle"
-          onClick={() => {
-            toggleOpened(false);
-          }}
-        >
-          {linkGroup.title}
-        </Button>
-      </ScrollLink>
-    );
-  });
+        {linkGroup.title}
+      </Button>
+    </ScrollLink>
+  ));
 
   return (
     <Header
@@ -117,12 +115,10 @@ export function HeaderBar() {
           <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
             <Image src="/logo/hubone_logo_full.svg" width={126} />
           </MediaQuery>
-          <X size={20} strokeWidth={1} color="black" />
-          {hub.hubLogo ? (
-            <Image src={hub.hubLogo} height={28} width={28} />
-          ) : (
-            hub.hubName && <DefaultHubLogo {...hub} />
-          )}
+          <IconX size={20} strokeWidth={1} color="black" />
+          <Center h={rem(28)} w={rem(28)}>
+            <HubLogo hub={hub} />
+          </Center>
         </Group>
 
         <Group spacing={5} className={classes.links}>
@@ -139,20 +135,20 @@ export function HeaderBar() {
         {editMode ? (
           <Group ml="auto" mr="12px">
             <Button
-              leftIcon={<Plus />}
+              leftIcon={<IconPlus />}
               variant="outline"
               color="brand"
               sx={{ height: 30 }}
-              onClick={() => setAddModalOpened(true)}
+              onClick={() => setCreateModalOpened(true)}
             >
-              Create Sub Hub
+              Create New Hub
             </Button>
             <ActionIcon
               variant="light"
               color="brand"
               onClick={() => setEditModalOpened(true)}
             >
-              <Settings size={30} />
+              <IconSettings />
             </ActionIcon>
           </Group>
         ) : (
@@ -170,14 +166,8 @@ export function HeaderBar() {
           </ScrollLink>
         )}
       </Container>
-      <AddHubModal opened={addModalOpened} setOpened={setAddModalOpened} />
       {hub.id && (
-        <EditHubModal
-          opened={editModalOpened}
-          setOpened={setEditModalOpened}
-          footerLinks={footerLinks}
-          {...hub}
-        />
+        <EditHubModal opened={editModalOpened} setOpened={setEditModalOpened} />
       )}
     </Header>
   );
diff --git a/ui/components/DefaultHubLogo.tsx b/ui/components/HubLogo/DefaultHubLogo.tsx
similarity index 81%
rename from ui/components/DefaultHubLogo.tsx
rename to ui/components/HubLogo/DefaultHubLogo.tsx
index ff66e162..cbf0480d 100644
--- a/ui/components/DefaultHubLogo.tsx
+++ b/ui/components/HubLogo/DefaultHubLogo.tsx
@@ -1,16 +1,19 @@
 import { Box, Title } from "@mantine/core";
-import type { Hub } from "@prisma/client";
 
 export default function DefaultHubLogo({
-  hubName,
-  primaryColor,
-  secondaryColor,
-}: Hub) {
+  hubName = "X",
+  primaryColor = "#ff008c",
+  secondaryColor = "#0cd4f7",
+}: {
+  hubName: string;
+  primaryColor: string;
+  secondaryColor: string;
+}) {
   return (
     <Box
       sx={(theme) => ({
-        height: "32px",
         minWidth: "32px",
+        width: "100%",
         padding: "6px",
         borderRadius: theme.radius.md,
         backgroundImage: theme.fn.gradient({
@@ -26,6 +29,7 @@ export default function DefaultHubLogo({
         mozUserSelect: "none",
         msUserSelect: "none",
         userSelect: "none",
+        aspectRatio: "1/1",
       })}
     >
       <Title size={16}>{shorten(hubName)}</Title>
diff --git a/ui/components/HubLogo/HubLogo.tsx b/ui/components/HubLogo/HubLogo.tsx
new file mode 100644
index 00000000..1ff7c90e
--- /dev/null
+++ b/ui/components/HubLogo/HubLogo.tsx
@@ -0,0 +1,12 @@
+import { Image } from "@mantine/core";
+import type { Hub } from "@prisma/client";
+
+import DefaultHubLogo from "./DefaultHubLogo";
+
+export default function HubLogo({ hub }: { hub: Hub }) {
+  return hub.hubLogo ? (
+    <Image src={hub.hubLogo} />
+  ) : (
+    <DefaultHubLogo {...hub} />
+  );
+}
diff --git a/ui/components/HubLogo/index.ts b/ui/components/HubLogo/index.ts
new file mode 100644
index 00000000..feed7a5b
--- /dev/null
+++ b/ui/components/HubLogo/index.ts
@@ -0,0 +1,3 @@
+import HubLogo from "./HubLogo";
+
+export default HubLogo;
diff --git a/ui/components/HubModals/AddHubModal.tsx b/ui/components/HubModals/CreateHubModal/CreateHubModal.tsx
similarity index 78%
rename from ui/components/HubModals/AddHubModal.tsx
rename to ui/components/HubModals/CreateHubModal/CreateHubModal.tsx
index a65e09aa..514a92fc 100644
--- a/ui/components/HubModals/AddHubModal.tsx
+++ b/ui/components/HubModals/CreateHubModal/CreateHubModal.tsx
@@ -2,11 +2,10 @@ import { Modal } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import type { Hub } from "@prisma/client";
 
-import { usePost } from "../../../lib/useQueries";
+import { usePost } from "../../../../lib/useQueries";
+import HubFormFields from "../HubFormFields";
 
-import HubFormFields from "./HubFormFields";
-
-function EditHubModal({
+function CreateHubModal({
   opened,
   setOpened,
 }: {
@@ -32,7 +31,7 @@ function EditHubModal({
     <Modal
       opened={opened}
       onClose={() => setOpened(false)}
-      title="Create a new hub"
+      title="Create a New Hub"
     >
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <HubFormFields form={form} />
@@ -41,4 +40,4 @@ function EditHubModal({
   );
 }
 
-export default EditHubModal;
+export default CreateHubModal;
diff --git a/ui/components/HubModals/CreateHubModal/index.tsx b/ui/components/HubModals/CreateHubModal/index.tsx
new file mode 100644
index 00000000..45eeb606
--- /dev/null
+++ b/ui/components/HubModals/CreateHubModal/index.tsx
@@ -0,0 +1,3 @@
+import CreateHubModal from "./CreateHubModal";
+
+export default CreateHubModal;
diff --git a/ui/components/HubModals/EditHubModal.tsx b/ui/components/HubModals/EditHubModal/EditHubModal.tsx
similarity index 69%
rename from ui/components/HubModals/EditHubModal.tsx
rename to ui/components/HubModals/EditHubModal/EditHubModal.tsx
index 28737a03..a97b901f 100644
--- a/ui/components/HubModals/EditHubModal.tsx
+++ b/ui/components/HubModals/EditHubModal/EditHubModal.tsx
@@ -1,28 +1,25 @@
 import { Modal, Stack, Tabs } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import type { FooterLink, Hub } from "@prisma/client";
+import type { Hub } from "@prisma/client";
+import { useEffect } from "react";
 
-import { useUpdate } from "../../../lib/useQueries";
+import { useHubOneContext } from "../../../../lib/context/HubOneContext";
+import { useUpdate } from "../../../../lib/useQueries";
+import HubFormFields from "../HubFormFields";
 
 import FooterLinkAddCard from "./FooterLinkAddCard";
 import FooterLinkCard from "./FooterLinkCard";
-import HubFormFields from "./HubFormFields";
 
 function EditHubModal({
   opened,
   setOpened,
-  footerLinks,
-  id,
-  hubName,
-  hubLogo,
-  hubPath,
-  primaryColor,
-  secondaryColor,
 }: {
   opened: boolean;
   setOpened: (open: boolean) => void;
-  footerLinks: FooterLink[];
-} & Hub) {
+}) {
+  const { hub, footerLinks } = useHubOneContext();
+  const { id, hubName, hubLogo, hubPath, primaryColor, secondaryColor } = hub;
+
   const form = useForm<Hub>({
     initialValues: {
       id,
@@ -38,6 +35,9 @@ function EditHubModal({
     update(values);
     setOpened(false);
   };
+  useEffect(() => {
+    if (hubPath !== form.getInputProps("hubPath").value) form.setValues(hub);
+  }, [form, hub, hubPath]);
 
   return (
     <Modal
@@ -62,7 +62,10 @@ function EditHubModal({
             {footerLinks.map((footerLink) => (
               <FooterLinkCard
                 key={`footerlink_edit_${footerLink.id}`}
-                {...footerLink}
+                id={footerLink.id}
+                title={footerLink.title}
+                link={footerLink.link}
+                hubId={footerLink.hubId}
               />
             ))}
             <FooterLinkAddCard hubId={id as number} />
diff --git a/ui/components/HubModals/FooterLinkAddCard.tsx b/ui/components/HubModals/EditHubModal/FooterLinkAddCard.tsx
similarity index 86%
rename from ui/components/HubModals/FooterLinkAddCard.tsx
rename to ui/components/HubModals/EditHubModal/FooterLinkAddCard.tsx
index 44361a83..16b20e1b 100644
--- a/ui/components/HubModals/FooterLinkAddCard.tsx
+++ b/ui/components/HubModals/EditHubModal/FooterLinkAddCard.tsx
@@ -1,9 +1,9 @@
 import { Card, createStyles, Group, Text } from "@mantine/core";
 import type { FooterLink } from "@prisma/client";
+import { IconPlus } from "@tabler/icons-react";
 import { motion } from "framer-motion";
-import { Plus } from "tabler-icons-react";
 
-import { usePost } from "../../../lib/useQueries";
+import { usePost } from "../../../../lib/useQueries";
 
 function FooterLinkAddCard({ hubId }: { hubId: number }) {
   const { classes } = useStyles();
@@ -23,7 +23,7 @@ function FooterLinkAddCard({ hubId }: { hubId: number }) {
     >
       <Card className={classes.card} shadow="sm" p="lg" onClick={() => {}}>
         <Group my="auto" position="center">
-          <Plus size={24} strokeWidth={2} color="black" />
+          <IconPlus size={24} strokeWidth={2} color="black" />
           <Text align="center">Add Footer Link</Text>
         </Group>
       </Card>
diff --git a/ui/components/HubModals/FooterLinkCard.tsx b/ui/components/HubModals/EditHubModal/FooterLinkCard.tsx
similarity index 77%
rename from ui/components/HubModals/FooterLinkCard.tsx
rename to ui/components/HubModals/EditHubModal/FooterLinkCard.tsx
index 91f0e932..75d3867a 100644
--- a/ui/components/HubModals/FooterLinkCard.tsx
+++ b/ui/components/HubModals/EditHubModal/FooterLinkCard.tsx
@@ -7,13 +7,12 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
 import type { FooterLink } from "@prisma/client";
+import { IconTrash } from "@tabler/icons-react";
 import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
-import { Trash } from "tabler-icons-react";
+import { useState } from "react";
 
-import { useDelete, useUpdate } from "../../../lib/useQueries";
+import { useDelete, useUpdate } from "../../../../lib/useQueries";
 
 function FooterLinkCard({ id, title, link, hubId }: FooterLink) {
   const { classes } = useStyles();
@@ -21,11 +20,7 @@ function FooterLinkCard({ id, title, link, hubId }: FooterLink) {
   const deleteItem = useDelete("footerlinks");
   const updateItem = useUpdate<FooterLink>("footerlinks");
   const [state, setState] = useState({ title, link });
-  const [debouncedState] = useDebouncedValue(state, 50);
 
-  useEffect(() => {
-    updateItem({ id, hubId, ...debouncedState });
-  }, [debouncedState, hubId, id, updateItem]);
   return (
     <motion.div
       whileHover={{
@@ -44,7 +39,8 @@ function FooterLinkCard({ id, title, link, hubId }: FooterLink) {
           e.preventDefault();
           setIsEditing(true);
         }}
-        onMouseLeave={() => {
+        onBlur={() => {
+          updateItem({ id, hubId, ...state });
           setIsEditing(false);
         }}
       >
@@ -62,11 +58,6 @@ function FooterLinkCard({ id, title, link, hubId }: FooterLink) {
                 ) => {
                   e.stopPropagation();
                 }}
-                onKeyDown={(e) => {
-                  if (e.code === "Enter") {
-                    setIsEditing(false);
-                  }
-                }}
               />
               <TextInput
                 defaultValue={link}
@@ -79,12 +70,6 @@ function FooterLinkCard({ id, title, link, hubId }: FooterLink) {
                 ) => {
                   e.stopPropagation();
                 }}
-                // eslint-disable-next-line sonarjs/no-identical-functions
-                onKeyDown={(e) => {
-                  if (e.code === "Enter") {
-                    setIsEditing(false);
-                  }
-                }}
               />
             </Stack>
           ) : (
@@ -107,7 +92,7 @@ function FooterLinkCard({ id, title, link, hubId }: FooterLink) {
               deleteItem(id);
             }}
           >
-            <Trash strokeWidth={2} />
+            <IconTrash strokeWidth={2} />
           </ActionIcon>
         </Group>
       </Card>
diff --git a/ui/components/HubModals/index.ts b/ui/components/HubModals/EditHubModal/index.ts
similarity index 100%
rename from ui/components/HubModals/index.ts
rename to ui/components/HubModals/EditHubModal/index.ts
diff --git a/ui/components/LinkCard.tsx b/ui/components/LinkCard.tsx
index ce83ceb8..c44c469d 100644
--- a/ui/components/LinkCard.tsx
+++ b/ui/components/LinkCard.tsx
@@ -8,9 +8,9 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import type { Link } from "@prisma/client";
+import { IconEdit, IconLock } from "@tabler/icons-react";
 import { motion, useAnimationControls } from "framer-motion";
 import { useEffect, useState } from "react";
-import { Lock, Edit } from "tabler-icons-react";
 
 import { useHubOneContext } from "../../lib/context/HubOneContext";
 
@@ -67,7 +67,7 @@ export default function LinkCard({
         <Card.Section>
           <Group style={{ position: "relative", width: "100%" }}>
             {isInternal && (
-              <Lock
+              <IconLock
                 className={classes.icon}
                 size={16}
                 strokeWidth={2}
@@ -81,7 +81,7 @@ export default function LinkCard({
                 color="brand"
                 variant="light"
               >
-                <Edit strokeWidth={2} />
+                <IconEdit strokeWidth={2} />
               </ActionIcon>
             )}
             <Image
diff --git a/ui/components/LinkModals/EditLinkModal.tsx b/ui/components/LinkModals/EditLinkModal.tsx
index ed9d7183..2dd77647 100644
--- a/ui/components/LinkModals/EditLinkModal.tsx
+++ b/ui/components/LinkModals/EditLinkModal.tsx
@@ -1,7 +1,7 @@
 import { Button, Group, Modal } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import type { Link } from "@prisma/client";
-import { Trash } from "tabler-icons-react";
+import { IconTrash } from "@tabler/icons-react";
 
 import { useDelete, useUpdate } from "../../../lib/useQueries";
 
@@ -43,7 +43,7 @@ function EditLinkModal({
         <LinkFormFields form={form} />
         <Group position="center" mt="xl">
           <Button
-            leftIcon={<Trash />}
+            leftIcon={<IconTrash />}
             variant="outline"
             color="secondary"
             onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
diff --git a/ui/sections/HubMenu/HubMenu.tsx b/ui/sections/HubMenu/HubMenu.tsx
new file mode 100644
index 00000000..52416624
--- /dev/null
+++ b/ui/sections/HubMenu/HubMenu.tsx
@@ -0,0 +1,78 @@
+import {
+  Affix,
+  Center,
+  Menu,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+  rem,
+} from "@mantine/core";
+import type { Hub } from "@prisma/client";
+import { IconAppsFilled, IconPlus } from "@tabler/icons-react";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+import { useHubOneContext } from "../../../lib/context/HubOneContext";
+import HubLogo from "../../components/HubLogo";
+
+export default function HubMenu({ hubs }: { hubs: Hub[] }) {
+  const router = useRouter();
+  const [opened, setOpened] = useState(false);
+  const { setCreateModalOpened } = useHubOneContext();
+
+  return (
+    <Menu
+      opened={opened}
+      onChange={setOpened}
+      trigger="hover"
+      position="top-end"
+      shadow="md"
+      radius="md"
+    >
+      <Menu.Target>
+        <Affix position={{ bottom: rem(32), right: rem(32) }}>
+          <ThemeIcon radius="xl" size={rem(48)}>
+            <IconAppsFilled />
+          </ThemeIcon>
+        </Affix>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Title p="sm" order={3}>
+          Hub Menu
+        </Title>
+        <SimpleGrid p="sm" cols={3} spacing="sm">
+          {hubs.map((hub) => (
+            <Menu.Item
+              key={`hub_menu_item_${hub.id}`}
+              onClick={() => {
+                router.push(hub.hubPath);
+              }}
+            >
+              <Stack w={rem(64)} h={rem(148)} justify="flex-start">
+                <Center w="100%" h="50%">
+                  <HubLogo hub={hub} />
+                </Center>
+                <Text
+                  sx={{ wordWrap: "break-word", hyphens: "auto" }}
+                  align="center"
+                  lineClamp={3}
+                >
+                  {hub.hubName}
+                </Text>
+              </Stack>
+            </Menu.Item>
+          ))}
+        </SimpleGrid>
+        <Menu.Divider />
+        <Menu.Item
+          onClick={() => setCreateModalOpened(true)}
+          icon={<IconPlus size={14} />}
+        >
+          Create New Hub
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
diff --git a/ui/sections/HubMenu/index.tsx b/ui/sections/HubMenu/index.tsx
new file mode 100644
index 00000000..0e934907
--- /dev/null
+++ b/ui/sections/HubMenu/index.tsx
@@ -0,0 +1,3 @@
+import HubMenu from "./HubMenu";
+
+export default HubMenu;
diff --git a/ui/sections/LinkSection/AccordionControl.tsx b/ui/sections/LinkSection/AccordionControl.tsx
index 57f04924..399094dc 100644
--- a/ui/sections/LinkSection/AccordionControl.tsx
+++ b/ui/sections/LinkSection/AccordionControl.tsx
@@ -1,6 +1,6 @@
 import type { AccordionControlProps } from "@mantine/core";
 import { Accordion, ActionIcon, Box } from "@mantine/core";
-import { Trash } from "tabler-icons-react";
+import { IconTrash } from "@tabler/icons-react";
 
 import { useDelete } from "../../../lib/useQueries";
 
@@ -20,7 +20,7 @@ export default function AccordionControl({
           color="secondary"
           onClick={() => deleteItem(itemId)}
         >
-          <Trash strokeWidth={2} />
+          <IconTrash strokeWidth={2} />
         </ActionIcon>
       )}
     </Box>
diff --git a/yarn.lock b/yarn.lock
index b9e18201..40eb28e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1108,6 +1108,19 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tabler/icons-react@^2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-2.17.0.tgz#8d7b33958bdef17c2aadaa0899b87a259c9f5f01"
+  integrity sha512-kuEW+qNwRqcK5iMl7qTapzX2NiMOwPg4Az01d+IZ1DIMwaZ7iKPJaIor2ihKFLPYrT9D5BZHXB8R5mSkw0FETg==
+  dependencies:
+    "@tabler/icons" "2.17.0"
+    prop-types "^15.7.2"
+
+"@tabler/icons@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.17.0.tgz#3b5ac3d41576894d3e18cd8014ba8ce33f3634be"
+  integrity sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==
+
 "@tanstack/match-sorter-utils@^8.7.0":
   version "8.8.4"
   resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
@@ -6113,11 +6126,6 @@ tabbable@^6.0.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0"
   integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==
 
-tabler-icons-react@^1.55.0:
-  version "1.56.0"
-  resolved "https://registry.yarnpkg.com/tabler-icons-react/-/tabler-icons-react-1.56.0.tgz#d2a6cf9160f25b370c38c356fa6284c254e5113e"
-  integrity sha512-FOme3w6PJIWDpeXqQ4xjArQqdxzrr9xNy7PSSgWpRzOUQ71RyZ7jt6WThsfyLBz5os78TPJRA8f/0NLjnKcx9A==
-
 tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"