diff --git a/resources/css/app.css b/resources/css/app.css
index 3a1fc1f8f..718e0d985 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -89,6 +89,10 @@ nav ul.subnav li {
     @apply pl-4;
 }
 
+nav ul.subnav li a i {
+    @apply mr-2;
+}
+
 nav ul li:last-child {
     @apply pb-0;
 }
@@ -153,6 +157,11 @@ div.thread-card:nth-last-child(2) {
         padding: 1.675rem 0;
     }
 
+    nav ul.nav>li a {
+        @apply flex items-center;
+        height: 30px;
+    }
+
     nav ul.nav>li:first-child {
         @apply ml-0;
     }
@@ -166,6 +175,10 @@ div.thread-card:nth-last-child(2) {
         top: 100%;
     }
 
+    nav ul.subnav.subnav-right {
+        @apply left-auto right-0;
+    }
+
     nav ul.subnav.active {
         @apply block;
     }
@@ -174,6 +187,14 @@ div.thread-card:nth-last-child(2) {
         @apply border-b p-2;
     }
 
+    nav ul.subnav li.divider {
+        @apply block p-0 border-2;
+    }
+
+    nav ul.subnav li.active {
+        @apply border-b p-2 border-gray-300;
+    }
+
     nav ul.subnav li:last-child {
         @apply border-none;
     }
diff --git a/resources/views/layouts/_nav.blade.php b/resources/views/layouts/_nav.blade.php
index db9ef4a37..8f7e88777 100644
--- a/resources/views/layouts/_nav.blade.php
+++ b/resources/views/layouts/_nav.blade.php
@@ -50,11 +50,11 @@
                     <li class="{{ active('login') }}"><a href="{{ route('login') }}">Login</a></li>
                     <li class="{{ active('register') }}"><a href="{{ route('register') }}">Register</a></li>
                 @else
-                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                            <img class="img-circle" src="{{ Auth::user()->gravatarUrl(60) }}" width="30"> <span class="caret"></span>
+                    <li class="relative">
+                        <a href="#" class="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                            <img class="rounded-full" src="{{ Auth::user()->gravatarUrl(60) }}" style="width:30px;"> <span class="caret"></span>
                         </a>
-                        <ul class="dropdown-menu">
+                        <ul class="subnav subnav-right">
                             <li>
                                 <span>
                                     <strong>{{ Auth::user()->name() }}</strong><br>
@@ -62,17 +62,17 @@
                                 </span>
                             </li>
                             <li role="separator" class="divider"></li>
-                            <li class="{{ active('profile') }}"><a href="{{ route('profile', Auth::user()->username()) }}"><i class="fa fa-user-circle-o dropdown-icon" aria-hidden="true"></i>Profile</a></li>
-                            <li class="{{ active('dashboard') }}"><a href="{{ route('dashboard') }}"><i class="fa fa-home dropdown-icon" aria-hidden="true"></i>Dashboard</a></li>
-                            <li class="{{ active('settings.*') }}"><a href="{{ route('settings.profile') }}"> <i class="fa fa-cog dropdown-icon" aria-hidden="true"></i>Settings</a></li>
+                            <li class="{{ active('profile') }}"><a href="{{ route('profile', Auth::user()->username()) }}"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Profile</a></li>
+                            <li class="{{ active('dashboard') }}"><a href="{{ route('dashboard') }}"><i class="fa fa-home" aria-hidden="true"></i> Dashboard</a></li>
+                            <li class="{{ active('settings.*') }}"><a href="{{ route('settings.profile') }}"> <i class="fa fa-cog" aria-hidden="true"></i> Settings</a></li>
 
                             @can(App\Policies\UserPolicy::ADMIN, App\User::class)
                                 <li role="separator" class="divider"></li>
-                                <li class="{{ active('admin*') }}"><a href="{{ route('admin') }}"><i class="fa fa-shield dropdown-icon" aria-hidden="true"></i>Admin</a></li>
+                                <li class="{{ active('admin*') }}"><a href="{{ route('admin') }}"><i class="fa fa-shield" aria-hidden="true"></i> Admin</a></li>
                             @endcan
 
                             <li role="separator" class="divider"></li>
-                            <li><a href="{{ route('logout') }}"><i class="fa fa-sign-out dropdown-icon" aria-hidden="true"></i>Logout</a></li>
+                            <li><a href="{{ route('logout') }}"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a></li>
                         </ul>
                     </li>
                 @endif