diff --git a/public/css/2018.css b/public/css/2018.css
index 17e02a7..0b3fd27 100644
--- a/public/css/2018.css
+++ b/public/css/2018.css
@@ -10,6 +10,27 @@
 	}
 }
 
+@media (min-width: 1688px) {
+	#smallnav_open {
+		display: none;
+	}
+	.smallnav {
+		display: block !important;
+	}
+	#logo_full img, #logo_full {
+		max-width: 200px;
+		width: 120px;
+	}
+	.navbarbuttoncontainer  {
+		padding-left: 50px;
+	}
+	.content, iframe {
+		padding-left: 180px;
+		width: calc(100% - 250px);
+		padding-right: 10px;
+	}
+}
+
 html {
 	background: none;
 }
@@ -180,29 +201,30 @@ body {
 	padding: 0;
 	top: 0;
 	position: fixed;
-    right: 0;
-    left: 0;
-    z-index: 1030;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
+	align-items: center;
+	right: 0;
+	left: 0;
+	z-index: 1030;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
 }
 
 .smallnav {
 	-webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    -ms-transform: none;
-    position: fixed;
+	transform: translateZ(0);
+	-ms-transform: none;
+	position: fixed;
 	background: #fff;
-    box-shadow: 0 0 3px rgb(25 25 25 / 30%);
-    width: 0;
+	box-shadow: 0 0 3px rgb(25 25 25 / 30%);
+	width: 175px;
+	display: block;
+	visibility: visible;
 	height: calc(100% - 40px);
-    font-size: 16px;
-    left: 0;
-    overflow: hidden;
-    top: 82px;
-    z-index: 1001;
-    display: none;
-    visibility: hidden;
+	font-size: 16px;
+	left: 0;
+	overflow: hidden;
+	top: 82px;
+	z-index: 1001;
 	padding: 0;
 }
 .smallnavbarbuttoncontainer {
@@ -257,28 +279,39 @@ body {
     box-shadow: 0 1px 4px 0 rgb(25 25 25 / 30%);
 }
 
-#logo_small, #logo_full {
+#logo_small, #logo_full, #smallnav_open {
 	max-width: 76px;
-    width: auto;
-    margin: 0 12px;
-    padding: 0;
-    float: left;
+	width: auto;
+	margin: 0 12px;
+	padding: 0;
 }
-#logo_small img {
+#logo_small img, #smallnav_open img {
 	padding: 5px 0;
+	padding-top: 7px;
 	width: 30px;
 	height: 30px;
 }
 #logo_full img {
 	padding: 5px 0;
+	padding-top: 10px;
 	max-width: 120px;
 	height: 30px;
 }
+#smallnav_open {
+	background-image: url("https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg");
+	background-position: 0 0px;
+	background-repeat: no-repeat;
+	background-size: auto auto;
+	width: 30px;
+	margin: 0px;
+	margin-top: 1px;
+	margin-left: 10px;
+	height: 30px;
+}
+
 
 .navbarbuttoncontainer {
-	width: 25%;
 	display: flex;
-	padding: 0;
 }
 .navbarbutton {
 	color: #fff;
@@ -325,6 +358,10 @@ body {
     font-weight: 300;
 }
 
+.invisible_navbar {
+	display: none;
+}
+
 #footer_signup {
 	/*Remove this for now as i don't know a fix for the broken footer.*/
 	/*Tersis, if you're seeing this, find a way to get the signup footer to work properly*/
@@ -499,18 +536,3 @@ iframe {
 		top: 0px;
 	}
 }
-@media (min-width: 1688px) {
-	.smallnav {
-		width: 175px;
-		display: block;
-		visibility: visible;
-	}
-	#logo_full {
-		max-width: 200px;
-	}
-	.content, iframe {
-		padding-left: 180px;
-		width: calc(100% - 250px);
-		padding-right: 10px;
-	}
-}
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 3f3ecba..ce4da1e 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -17,36 +17,50 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
     @auth
-        @switch (Auth::user()->settings->theme)
-            @case(5)
-                <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-                <link href="{{ asset('css/appdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
-                <link href="{{ asset('css/classicappdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
-            @break
-            @case(4)
-                <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-                <link href="{{ asset('css/classicapp.css?id=' . Str::random(8)) }}" rel="stylesheet">
-            @break
-            @case(3)
-            <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-            <link href="{{ asset('css/appdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
-            @break
-            @case(2)
-                <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-                <link href="{{ asset('css/2018.css?id=' . Str::random(8)) }}" rel="stylesheet">
-            @break
+    @switch (Auth::user()->settings->theme)
+    @case(5)
+    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    <link href="{{ asset('css/appdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    <link href="{{ asset('css/classicappdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    @break
+    @case(4)
+    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    <link href="{{ asset('css/classicapp.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    @break
+    @case(3)
+    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    <link href="{{ asset('css/appdark.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    @break
+    @case(2)
+    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    <link href="{{ asset('css/2018.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    @break
 
-            @default
-                <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
-        @endswitch
+    @default
+    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    @endswitch
     @else
-        <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
+    <link href="{{ asset('css/app.css?id=' . Str::random(8)) }}" rel="stylesheet">
     @endauth
     @yield('extras')
 </head>
 
 <body>
     <div class="navbar">
+        @auth
+        @switch (Auth::user()->settings->theme)
+        @case(2)
+        <a id="smallnav_open" href="#"></a>
+        <script>
+        function third() {
+            document.querySelector('.smallnav').classList.toggle('invisible_navbar');
+               }
+        document.querySelector('#smallnav_open').addEventListener('click', third);
+        </script>
+        @break
+        @default
+        @endswitch
+        @endauth
         <a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
                 width="200" height="40" /></a>
         <a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
@@ -55,46 +69,50 @@
             <a class="navbarbutton" id="smallbtn5" href="{{ route('incomplete') }}">Games</a>
             <a class="navbarbutton" id="smallbtn4" href="{{ route('catalog') }}">Catalog</a>
             <a class="navbarbutton" id="smallbtn0" href="{{ route('incomplete') }}">Build</a>
-            <a class="navbarbutton" id="smallbtn2"
-                href="@guest {{ route('login') }}
+            <a class="navbarbutton" id="smallbtn2" href="@guest {{ route('login') }}
 @else
 {{ route('profile', Auth::id()) }} @endguest">Profile</a>
             <a class="navbarbutton" id="smallbtn3" href="{{ route('settings') }}">Settings</a>
         </div>
         @guest
-            <div id="navbarlogincontainer">
-                <p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Log In</a></p>
-            </div>
+        <div id="navbarlogincontainer">
+            <p><a href="{{ route('register') }}">Sign Up</a> or <a href="{{ route('login') }}">Log In</a></p>
+        </div>
         @else
-        <div class="arkotcontainer"><img class="arkoticon_navbar" src="{{ asset('img/arkot.png') }}"><p> {{ Auth::user()->morbux }}</p></div>
-            <div id="navbarsignedincontainer">
-                <p class="nonbolded" id="navbarusername"><a href="@guest {{ route('login') }} @else {{ route('profile', Auth::id()) }} @endguest">{{ Auth::user()->name }}</a> | <a href="{{ route('logout') }}"
-                        onclick="event.preventDefault();
+        <div class="arkotcontainer"><img class="arkoticon_navbar" src="{{ asset('img/arkot.png') }}">
+            <p> {{ Auth::user()->morbux }}</p>
+        </div>
+        <div id="navbarsignedincontainer">
+            <p class="nonbolded" id="navbarusername"><a
+                    href="@guest {{ route('login') }} @else {{ route('profile', Auth::id()) }} @endguest">{{ Auth::user()->name }}</a>
+                | <a href="{{ route('logout') }}" onclick="event.preventDefault();
                     document.getElementById('logout-form').submit();">Log
-                        out...</a></p>
-            </div>
+                    out...</a></p>
+        </div>
 
-            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none">
-                @csrf
-            </form>
+        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none">
+            @csrf
+        </form>
         @endguest
     </div>
     <div class="smallnav">
         <div class="smallnavbarbuttoncontainer">
-            <a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() && count(Auth::user()->getFriendRequests()))
-                    <span class="warningtext">({{ count(Auth::user()->getFriendRequests()) }})</span>
+            <a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() &&
+                count(Auth::user()->getFriendRequests()))
+                <span class="warningtext">({{ count(Auth::user()->getFriendRequests()) }})</span>
                 @endif
             </a>
             <a class="smallnavbarbutton" href="{{ route('incomplete') }}">Avatar</a>
             <a class="smallnavbarbutton" href="{{ route('users') }}">Users</a>
-            <a class="smallnavbarbutton" href="{{ route('inbox') }}">Messages @if (!Auth::guest() && App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count())
-                    <span
-                        class="warningtext">({{ App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count() }})</span>
+            <a class="smallnavbarbutton" href="{{ route('inbox') }}">Messages @if (!Auth::guest() &&
+                App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count())
+                <span
+                    class="warningtext">({{ App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count() }})</span>
                 @endif
             </a>
             <a class="smallnavbarbutton" href="{{ route('blog') }}">Blog</a>
             @if (!Auth::guest() && Auth::user()->isAdmin())
-                <a class="smallnavbarbutton" href="{{ route('admin_index') }}">Admin</a>
+            <a class="smallnavbarbutton" href="{{ route('admin_index') }}">Admin</a>
             @endif
         </div>
     </div>
@@ -114,4 +132,4 @@
     </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file