diff --git a/Components/Card.js b/Components/Card.js
index c928baf..5c421a0 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -32,7 +32,7 @@
                         <h1 className={Styles.title}>{this.props.title}</h1>
                     </div>
                     <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
-                    <div className={Styles.buttonLayout}>
+                    <div className={Styles.buttonLayout} onClick={this.showMessage}>
                         {
                             this.props.buttons ? this.props.buttons.map((button, i) => {
                                 return <a
@@ -85,14 +85,7 @@
                     react.Children.toArray(this.props.children).map((item, index) => {
                         item = <Card
                             shown={this.state.childrenShown[index]}
-                            title={item.props.title}
-                            subtext={item.props.subtext}
-                            wave={item.props.wave}
-                            gradient={item.props.gradient}
-                            icon={item.props.icon}
-                            buttons={item.props.buttons}
-                            buttonText={item.props.buttonText}
-                            url={item.props.url}
+                            {...item.props}
                         />
                         return <div className={Styles.item} key={index}>{item}</div>
                     })
diff --git a/Components/Header.js b/Components/Header.js
index f5e7bb7..da6ec92 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import Styles from '../styles/Components/header.module.css';
+import NavStyles from '../styles/Components/navbar.module.css';
 import Head from 'next/head';
 import { useColorMode } from "theme-ui";
 import { useReward } from "react-rewards";
@@ -29,12 +30,44 @@
         colors: ["#E5AB71"]
     });
 
+    function showSubBarWithUrl(url) {
+        const screenWidth = window.innerWidth;
+        let amount = screenWidth - 50;
+        amount = Math.floor(amount / 42) - 1;
+        props.showSubBar(
+            <div className={NavStyles.container}>
+                {
+                    Array.from(Array(amount)).map((i, index) => {
+                        return (
+                            <a className={NavStyles.icon} key={index}><img alt="Clicks" className={NavStyles.icon} src={
+                                url[Math.floor(Math.random() * url.length)]
+                            } /></a>
+                        )
+                    })
+                }
+            </div>,
+            5
+        );
+    }
+
     function confetti() {
         if (!isAnimating && !isDisappointmentAnimating && props.index) {
             setClickTotal(clickTotal + 1);
             if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
+                showSubBarWithUrl([
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f614.svg",
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f61e.svg",
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f613.svg",
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f625.svg",
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f623.svg",
+                ]);
                 disappointment();
             } else {
+                showSubBarWithUrl([
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f389.svg",
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f388.svg",
+                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f973.svg",
+                ]);
                 reward();
             }
         }
@@ -75,7 +108,7 @@
                 <div className={Styles.titleContainer}>
                     <div onClick={confetti}>
                         {
-                            props.customImage?
+                            props.customImage ?
                             <img height="64px" width="64px" alt={props.name} className={Styles.headerImage} style={{borderRadius: props.roundImage ? "100vw" : "0"}} src={props.customImage} />
                             : <></>
                         }
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 7ab5e79..6ea02c9 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -15,51 +15,12 @@
 class NavBar extends Component {
     constructor(props) {
         super(props);
-        this.showSubBar = this.showSubBar.bind(this);
-        this.hideSubBar = this.hideSubBar.bind(this);
-        this.showMessage = this.showMessage.bind(this);
-        this.state = {
-            subBar: false,
-            element: <></>
-        }
-        this.displayName = "NavBar";
-    }
-
-    showSubBar(element, timeout) {
-        this.setState({
-            subBar: true,
-            element: element
-        })
-        if (timeout) {
-            setTimeout(() => {
-                this.setState({
-                    subBar: false,
-                    element: element
-                })
-                setTimeout(() => {
-                    this.setState({
-                        subBar: false,
-                        element: <></>
-                    })
-                }, 0.31 * 1000)
-            }, timeout * 1000)
-        }
-    }
-
-    hideSubBar() {
-        this.setState({
-            subBar: false
-        })
-    }
-
-    showMessage(text) {
-        this.showSubBar(<p className={Styles.message}>{text}</p>, 5)
     }
 
     render() {
         return (
             <div className={Styles.cutoffContainer}>
-                <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>
+                <div className={Styles.container + " " + (this.props.subBar ? Styles.slideUp : null)}>
                     <a href="#skipNav" className={Styles.skipNav}>Skip navigation</a>
                     <a className={Styles.icon} href="/"><img alt="Clicks" className={Styles.icon} src="https://assets.clicks.codes/web/logos/clicks.svg" /></a>
                     <Divider />
@@ -70,10 +31,8 @@
                     <a className={Styles.icon} href="/hooky"><img alt="Hooky" className={Styles.icon} src="https://assets.clicks.codes/bots/hooky/circle.svg" /></a>
                     <Divider />
                     <ThemeChangeButton/>
-                    <Divider />
-                    <a className={Styles.icon} onClick={() => {this.showMessage("You're mum")}}>More</a>
                 </div>
-                <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>{this.state.element}</div>
+                <div className={Styles.container + " " + (this.props.subBar ? Styles.slideUp : null)}>{this.props.element}</div>
             </div>
         )
     }
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 86b112b..2e0b7b7 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -18,7 +18,7 @@
                 e.preventDefault();
                 setColorMode(colorMode === 'light' ? 'dark' : 'light');
             }} href="#">
-                <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/light-white.svg"} />
+                <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/light.svg"} />
                 <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/dark.svg"} />
             </a>
         </>
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"
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index 6d6b338..b16974a 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -138,3 +138,10 @@
     margin-inline: 5px;
     padding: 0;
 }
+
+.leftArrow {
+    transform: rotate(90deg);
+}
+.rightArrow {
+    transform: rotate(270deg);
+}
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 7ca3c5f..121d382 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -32,7 +32,8 @@
     height: 100%;
     width: 3px;
     border-radius: 100vh;
-    background-color: #424242;
+    background-color: var(--theme-ui-colors-borderHint);
+    transition: 0.3s ease-in-out;
 }
 
 .skipNav {
@@ -69,6 +70,6 @@
 .message {
     font-size: 1.2rem;
     padding-left: 10px;
-    color: white;
+    color: var(--theme-ui-colors-text);
     transition: color 0.3s ease-in-out;
-}
\ No newline at end of file
+}
diff --git a/styles/globals.module.css b/styles/globals.module.css
index 1761aeb..944f797 100644
--- a/styles/globals.module.css
+++ b/styles/globals.module.css
@@ -5,7 +5,8 @@
     height: calc(100vh - 42px);
     width: 100%;
     border-radius: 25px;
-    box-shadow: 0 0 0 100px black;
+    box-shadow: 0 0 0 100px var(--theme-ui-colors-borders);
+    transition: 0.3s ease-in-out;
     pointer-events: none;
     background: transparent;
 }