diff --git a/pages/_app.js b/pages/_app.js
index 2932bb7..59fdadb 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -23,6 +23,9 @@
         fadeGradient: "rgba(240, 240, 240, 1)",
         offset: "2.5px",
 
+        borders: "#FFFFFF",
+        borderHint: "#E4E4E4",
+
         modes: {
             dark: {
                 text: '#ffffff',
@@ -36,7 +39,10 @@
                 hint: '#242424',
                 panelColor: "rgba(255, 255, 255, 0.05)",
                 fadeGradient: "rgba(48, 48, 48, 1)",
-                offset: "-20px"
+                offset: "-20px",
+
+                borders: "#000000",
+                borderHint: "#424242",
             }
         }
     },
@@ -44,23 +50,49 @@
 
 
 function App({ Component, pageProps }) {
-  const ref = React.forwardRef(function Ref(props, ref) {
-    return <NavBar {...props} ref={ref} />
-  });
+    const [subBar, setSubBar] = React.useState(false);
+    const [currentElement, setElement] = React.useState(<></>);
 
-  const navbar = React.useRef(ref);
+    const showSubBar = (element, timeout) => {
+        setSubBar(true);
+        setElement(element);
+        if (timeout) {
+            setTimeout(() => {
+                setSubBar(false);
+                setTimeout(() => {
+                    setElement(<></>);
+                }, 0.31 * 1000)
+            }, timeout * 1000)
+        }
+    }
 
-  return <>
-    <ThemeProvider theme={theme}>
-      {navbar.current.render()}
-      <Component
-        {...pageProps}
-        navbar={navbar}
-        navRef={ref}
-      />
-      <div className={Styles.container} />
-    </ThemeProvider>
-  </>
+    const hideSubBar = () => {
+        setSubBar(false);
+    }
+
+    const showMessage = (text) => {
+        showSubBar(<p className={Styles.message}>{text}</p>, 5);
+    }
+
+    return <>
+        <ThemeProvider theme={theme}>
+        <NavBar
+            subBar={subBar}
+            setSubBar={setSubBar}
+            element={currentElement}
+            setElement={setElement}
+            showMessage={showMessage}
+            showSubBar={showSubBar}
+        />
+        <Component
+            {...pageProps}
+            showSubBar={showSubBar}
+            hideSubBar={hideSubBar}
+            showMessage={showMessage}
+        />
+        <div className={Styles.container} />
+        </ThemeProvider>
+    </>
 }
 
 export default App
diff --git a/pages/index.js b/pages/index.js
index 5e604f7..7495dff 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,7 +3,6 @@
 import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
 
 export default function Home(props) {
-  console.log(props)
   return (
     <>
       <Header
@@ -16,8 +15,8 @@
         buttons={[]}
         index={true}
         fullscreen={true}
+        showSubBar={props.showSubBar}
       />
-      <button onClick={() => props.navbar.showMessage("Welcome to Clicks! This is a test message. It will disappear in 5 seconds.")}>aaaAAAAa</button>
       <AutoLayout>
         <Panel halfSize={false}>
           <Title>Projects</Title>
@@ -33,6 +32,7 @@
               ]}
               buttonText={"FFFFFF"} gradient={["78ECF2", "71AFE5"]}
               url="/gps"
+              showMessage={props.showMessage}
             />
             <Card
               wave="rsm" title="RSM" subtext="Moderation Redefined"
@@ -43,6 +43,7 @@
               ]}
               buttonText={"FFFFFF"} gradient={["F27878", "D96B6B"]}
               url="/rsm"
+              showMessage={props.showMessage}
             />
             <Card
               wave="clicksforms" title="ClicksForms" subtext="Create custom forms for Discord"