diff --git a/src/components/Navbars/DefaultNavbar/index.tsx b/src/components/Navbars/DefaultNavbar/index.tsx
index e44300d8..7fdb1b59 100644
--- a/src/components/Navbars/DefaultNavbar/index.tsx
+++ b/src/components/Navbars/DefaultNavbar/index.tsx
@@ -326,13 +326,19 @@ function DefaultNavbar({
     >
       { ({ TransitionProps }) => (
         <Grow { ...TransitionProps }>
-          <MKBox borderRadius="lg">
+          <MKBox borderRadius="lg" bgcolor="white">
             <MKTypography variant="h1" color="white">
               <Icon ref={ setArrowRef } sx={ { mt: -3 } }>
                 arrow_drop_up
               </Icon>
             </MKTypography>
-            <MKBox shadow="lg" borderRadius="lg" p={ 2 } mt={ 2 }>
+            <MKBox
+              shadow="lg"
+              borderRadius="lg"
+              p={ 2 }
+              mt={ 2 }
+              sx={ { backgroundColor: "#fff" } }
+            >
               { renderRoutes }
             </MKBox>
           </MKBox>
diff --git a/src/routes.tsx b/src/routes.tsx
index 764c2f39..d859d061 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -9,6 +9,21 @@ import ProjectOfInterest from "./pages/ProjectOfInterest";
 import { AddModerator } from "@mui/icons-material";
 
 const routes = [
+  {
+    name: "Demo",
+    key: "Demo",
+    icon: <Icon>play_circle</Icon>,
+    collapse: [
+      {
+        name: "ART",
+        href: "https://art.o31e.com/"
+      },
+      {
+        name: "Promtptfoo",
+        href: "https://promptfoo.o31e.com/"
+      },
+    ],
+  },
   {
     name: "Projects Of Interest",
     key: "Project-of-Interest",