diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index 8dab057..9ba93b4 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -2691,17 +2691,62 @@ table img {
     .navbar-nav {
         display: grid !important;
         grid-template-rows: 1fr 1fr;
-        grid-template-columns: 0fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
         grid-gap: 0.25em;
     }
+}
 
-    .placeholder {
-        visibility: hidden;
+/* Navbar Rework */
+.navbar-nav-guests {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 0 5px 0;
+    margin-bottom: 0;
+    list-style: none;
+    margin: 0;
+    margin-right: 0px;
+    margin-left: 0px;
+    align-self: center;
+    margin-left: .5rem;
+    margin-right: .5rem;
+}
+
+.navbar-expand-lg .navbar-nav-guests {
+    flex-direction: row;
+}
+
+ul.navbar-nav-guests li.nav-item {
+    margin-right: .5rem;
+}
+
+.navbar-expand-lg .navbar-nav-guests .nav-link, .pagination > a, .pagination > span {
+    padding-right: .5rem;
+    padding-left: .5rem;
+}
+
+@media (max-width: 768px) {
+    ul.navbar-nav-guests {
+        display: grid !important;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: .25em;
+        margin: 0;
+        padding: 5px;
+    }
+    
+    ul.navbar-nav-guests li.nav-item {
+        margin-right: unset;
     }
 
-    a.nav-link span {
-        /* This is a dirty and temporary hack to hide long usernames on mobile devices when logged in */
-        max-width: 10ch;
-        overflow: auto;
+    .nav-link.user {
+        justify-content: left;
     }
+}
+
+.navigation-links-guest {
+    justify-content: center;
+    display: grid;
+    grid-template-columns: 1fr;
+    align-content: center;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index c56bab0..348ca61 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -1,83 +1,133 @@
-<nav class="navbar navbar-expand-lg">
-  <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
-  <div class="navigation-links">
-    <ul class="navbar-nav">
-      <li class="nav-item dropdown">
-        @if(session)
-        <a class="nav-link" href="#" content="{{ session.user }}" data-toggle="dropdown">
-          <img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar" /><span>{{ session.user }}</span>
-        </a>
-        <ul class="dropdown-menu">
-          <li><a href="/admin">adminpanel</a></li>
-          <li><a href="/user/{{ session.user.toLowerCase() }}/f0cks">my f0cks</a></li>
-          <li><a href="/user/{{ session.user.toLowerCase() }}/favs">my favs</a></li>
-          <li><a href="/settings">settings</a></li>
-          <li><a href="/search">search</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/ranking">Ranking</a></li>
-          <li><a href="/logout">logout</a></li>
-        </ul>
-        @else
-        <a class="nav-link" href="/about" data-toggle="dropdown">About</a>
-        <ul class="dropdown-menu">
-          <li><a href="/login">login</a></li>
-        </ul>
-        @endif
-      </li>
-      <li class="nav-item dropdown" id="themes">
-        <a class="nav-link ddcontent" href="#" content="{{ theme }}" data-toggle="dropdown">Themes</a>
-        <ul class="dropdown-menu">
-          @each(themes as t)
-          <li><a href="/theme/{{ t }}">{{ t }}</a></li>
-          @endeach
-        </ul>
-      </li>
-      <span class="placeholder">&nbsp;</span>
-      <li class="nav-item dropdown">
-        <a class="nav-link ddcontent" href="#"@if(tmp?.mime) content="{{ tmp?.mime }}" data-toggle="dropdown"@endif>Filter@if(!tmp?.mime)&nbsp;&#9660;@endif</a>
-        <ul class="dropdown-menu">
-          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endif">All</a></li>
-          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifaudio">Audio</a></li>
-          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifvideo">Video</a></li>
-          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifimage">Image</a></li>
-        </ul>
-      </li>
-      @if(session)
-      <li class="nav-item @if(session)dropdown@endif">
-        <a class="nav-link ddcontent" href="#"@if(typeof session.mode !== "undefined") content="{{ modes[session.mode] ?? 'sfw' }}" data-toggle="dropdown"@endif>Mode</a>
-        <ul class="dropdown-menu">
-          @for(let i = 0; i < modes.length; i++)
-          <li><a class="dropdown-item" href="/mode/{{ i }}">{{ modes[i] }}</a></li>
-          @endfor
-        </ul>
-      </li>
-      @endif
-      <li class="nav-item">
-        <a id="random" class="nav-link" href="/random">
-          <span class="nav-link-identifier">Random</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div class="collapse navbar-collapse show" id="navbarSupportedContent">
-    <div class="pagination-container-fluid">
-      <div class="pagination-wrapper">
-        @if(typeof pagination !== "undefined")
-        <nav class="pagination">
-          <a href="{{ link.main }}{{ link.path }}{{ pagination.start }}" class="page-item-1 btn start@if(!pagination.prev) disabled@endif">&laquo;</a>
-          <a href="{{ link.main }}{{ link.path }}{{ pagination.prev }}" class="page-item-2 btn prev@if(!pagination.prev) disabled@endif">&lsaquo;</a>
-          @each(pagination.cheat as i)
-            @if(i == pagination.page)
-              <span class="btn disabled">{{ i }}</span>
-            @else
-              <a href="{{ link.main }}{{ link.path }}{{ i }}" class="pagination-int-item btn">{{ i }}</a>
-            @endif
-          @endeach
-          <a href="{{ link.main }}{{ link.path }}{{ pagination.next }}" class="page-item-3 btn next@if(!pagination.next) disabled@endif">&rsaquo;</a>
-          <a href="{{ link.main }}{{ link.path }}{{ pagination.end }}" class="page-item-4 btn start@if(!pagination.next) disabled@endif">&raquo;</a>
-        </nav>
-        @endif
-      </div>
-    </div>
-  </div>
-</nav>
+@if(session)
+<nav class="navbar navbar-expand-lg">
+    <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
+    <div class="navigation-links">
+        <ul class="navbar-nav">
+            <li class="nav-item dropdown">
+                <a class="nav-link user" href="#" content="{{ session.user }}" data-toggle="dropdown">
+                      <img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar" /><span>{{ session.user }}</span>
+                </a>
+                <ul class="dropdown-menu">
+                    <li><a href="/admin">adminpanel</a></li>
+                    <li><a href="/user/{{ session.user.toLowerCase() }}/f0cks">my f0cks</a></li>
+                    <li><a href="/user/{{ session.user.toLowerCase() }}/favs">my favs</a></li>
+                    <li><a href="/settings">settings</a></li>
+                    <li><a href="/search">search</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/ranking">Ranking</a></li>
+                    <li><a href="/logout">logout</a></li>
+                </ul>
+            </li>
+            <li class="nav-item dropdown" id="themes">
+                <a class="nav-link ddcontent" href="#" content="{{ theme }}" data-toggle="dropdown">Themes</a>
+                <ul class="dropdown-menu">
+                  @each(themes as t)
+                  <li><a href="/theme/{{ t }}">{{ t }}</a></li>
+                  @endeach
+                </ul>
+            </li>
+            <li class="nav-item dropdown">
+                <a class="nav-link ddcontent" href="#"@if(tmp?.mime) content="{{ tmp?.mime }}" data-toggle="dropdown"@endif>Filter@if(!tmp?.mime)&nbsp;&#9660;@endif</a>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endif">All</a></li>
+                  <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifaudio">Audio</a></li>
+                  <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifvideo">Video</a></li>
+                  <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifimage">Image</a></li>
+                </ul>
+            </li>
+            <li class="nav-item @if(session)dropdown@endif">
+                <a class="nav-link ddcontent" href="#"@if(typeof session.mode !== "undefined") content="{{ modes[session.mode] ?? 'sfw' }}" data-toggle="dropdown"@endif>Mode</a>
+                <ul class="dropdown-menu">
+                  @for(let i = 0; i < modes.length; i++)
+                  <li><a class="dropdown-item" href="/mode/{{ i }}">{{ modes[i] }}</a></li>
+                  @endfor
+                </ul>
+            </li>
+            <li class="nav-item">
+                <a id="random" class="nav-link" href="/random">
+                  <span class="nav-link-identifier">Random</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="collapse navbar-collapse show" id="navbarSupportedContent">
+      <div class="pagination-container-fluid">
+        <div class="pagination-wrapper">
+          @if(typeof pagination !== "undefined")
+          <nav class="pagination">
+            <a href="{{ link.main }}{{ link.path }}{{ pagination.start }}" class="page-item-1 btn start@if(!pagination.prev) disabled@endif">&laquo;</a>
+            <a href="{{ link.main }}{{ link.path }}{{ pagination.prev }}" class="page-item-2 btn prev@if(!pagination.prev) disabled@endif">&lsaquo;</a>
+            @each(pagination.cheat as i)
+              @if(i == pagination.page)
+                <span class="btn disabled">{{ i }}</span>
+              @else
+                <a href="{{ link.main }}{{ link.path }}{{ i }}" class="pagination-int-item btn">{{ i }}</a>
+              @endif
+            @endeach
+            <a href="{{ link.main }}{{ link.path }}{{ pagination.next }}" class="page-item-3 btn next@if(!pagination.next) disabled@endif">&rsaquo;</a>
+            <a href="{{ link.main }}{{ link.path }}{{ pagination.end }}" class="page-item-4 btn start@if(!pagination.next) disabled@endif">&raquo;</a>
+          </nav>
+          @endif
+        </div>
+      </div>
+    </div>
+</nav>
+@else
+<nav class="navbar navbar-expand-lg">
+  <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
+
+  <div class="navigation-links-guest">
+    <ul class="navbar-nav-guests">
+      <li class="nav-item dropdown">
+        <a class="nav-link" href="/about" data-toggle="dropdown">About</a>
+        <ul class="dropdown-menu">
+          <li><a href="/login">login</a></li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown" id="themes">
+        <a class="nav-link ddcontent" href="#" content="{{ theme }}" data-toggle="dropdown">Themes</a>
+        <ul class="dropdown-menu">
+          @each(themes as t)
+          <li><a href="/theme/{{ t }}">{{ t }}</a></li>
+          @endeach
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link ddcontent" href="#"@if(tmp?.mime) content="{{ tmp?.mime }}" data-toggle="dropdown"@endif>Filter@if(!tmp?.mime)&nbsp;&#9660;@endif</a>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endif">All</a></li>
+          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifaudio">Audio</a></li>
+          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifvideo">Video</a></li>
+          <li><a class="dropdown-item" href="/@if(tmp?.user)user/{{ tmp?.user }}/@endifimage">Image</a></li>
+        </ul>
+      </li>
+      <li class="nav-item">
+        <a id="random" class="nav-link" href="/random">
+          <span class="nav-link-identifier">Random</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="collapse navbar-collapse show" id="navbarSupportedContent">
+    <div class="pagination-container-fluid">
+      <div class="pagination-wrapper">
+        @if(typeof pagination !== "undefined")
+        <nav class="pagination">
+          <a href="{{ link.main }}{{ link.path }}{{ pagination.start }}" class="page-item-1 btn start@if(!pagination.prev) disabled@endif">&laquo;</a>
+          <a href="{{ link.main }}{{ link.path }}{{ pagination.prev }}" class="page-item-2 btn prev@if(!pagination.prev) disabled@endif">&lsaquo;</a>
+          @each(pagination.cheat as i)
+            @if(i == pagination.page)
+              <span class="btn disabled">{{ i }}</span>
+            @else
+              <a href="{{ link.main }}{{ link.path }}{{ i }}" class="pagination-int-item btn">{{ i }}</a>
+            @endif
+          @endeach
+          <a href="{{ link.main }}{{ link.path }}{{ pagination.next }}" class="page-item-3 btn next@if(!pagination.next) disabled@endif">&rsaquo;</a>
+          <a href="{{ link.main }}{{ link.path }}{{ pagination.end }}" class="page-item-4 btn start@if(!pagination.next) disabled@endif">&raquo;</a>
+        </nav>
+        @endif
+      </div>
+    </div>
+  </div>
+</nav>
+@endif
\ No newline at end of file