diff --git a/app/Http/View/Composers/UserMenuComposer.php b/app/Http/View/Composers/UserMenuComposer.php
index f3d17bec..ef04f735 100644
--- a/app/Http/View/Composers/UserMenuComposer.php
+++ b/app/Http/View/Composers/UserMenuComposer.php
@@ -23,7 +23,7 @@ class UserMenuComposer
     public function compose(View $view)
     {
         $user = auth()->user();
-        $avatarUrl = route('avatar.user', ['uid' => $user->uid, 'size' => 25]);
+        $avatarUrl = route('avatar.user', ['uid' => $user->uid, 'size' => 36]);
         $avatar = $this->filter->apply('user_avatar', $avatarUrl, [$user]);
         $cli = $this->request->is('admin', 'admin/*');
 
diff --git a/resources/assets/src/styles/avatar.scss b/resources/assets/src/styles/avatar.scss
new file mode 100644
index 00000000..a51556b8
--- /dev/null
+++ b/resources/assets/src/styles/avatar.scss
@@ -0,0 +1,8 @@
+.bs-avatar {
+  width: 2.1rem;
+  height: 2.1rem;
+  margin-top: -8px;
+  image-rendering: pixelated;
+  border-radius: 2px;
+  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
+}
diff --git a/resources/assets/src/styles/common.scss b/resources/assets/src/styles/common.scss
new file mode 100644
index 00000000..5440d071
--- /dev/null
+++ b/resources/assets/src/styles/common.scss
@@ -0,0 +1 @@
+@import './avatar';
diff --git a/resources/views/shared/user-menu.twig b/resources/views/shared/user-menu.twig
index 952425b8..6956ff7d 100644
--- a/resources/views/shared/user-menu.twig
+++ b/resources/views/shared/user-menu.twig
@@ -1,6 +1,6 @@
 <li class="nav-item dropdown user-menu">
   <a href="#" class="nav-link" data-toggle="dropdown">
-    <img src="{{ avatar }}" class="user-image img-circle elevation-2" alt="User Image">
+    <img src="{{ avatar }}" class="bs-avatar mr-1" alt="User Image">
     <span class="d-none d-md-inline d-sm-block" data-mark="nickname">
       {{ user.nickname ?? user.email }}
     </span>
diff --git a/tests/HttpTest/ViewTest/ComposersTest/UserMenuComposerTest.php b/tests/HttpTest/ViewTest/ComposersTest/UserMenuComposerTest.php
index a5033182..a3d686c5 100644
--- a/tests/HttpTest/ViewTest/ComposersTest/UserMenuComposerTest.php
+++ b/tests/HttpTest/ViewTest/ComposersTest/UserMenuComposerTest.php
@@ -11,12 +11,12 @@ class UserMenuComposerTest extends TestCase
         $user = factory(User::class)->create();
         $this->actingAs($user)
             ->get('/')
-            ->assertSee(url('/avatar/user/'.$user->uid.'?size=25'));
+            ->assertSee(url('/avatar/user/'.$user->uid.'?size=36'));
         $this->actingAs($user)
             ->get('/skinlib')
-            ->assertSee(url('/avatar/user/'.$user->uid.'?size=25'));
+            ->assertSee(url('/avatar/user/'.$user->uid.'?size=36'));
         $this->actingAs($user)
             ->get('/user')
-            ->assertSee(url('/avatar/user/'.$user->uid.'?size=25'));
+            ->assertSee(url('/avatar/user/'.$user->uid.'?size=36'));
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index d57df4b3..384920a5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,7 @@ const config = {
       '@/styles/admin-lte.scss',
       '@fortawesome/fontawesome-free/css/all.min.css',
       '@/styles/common.styl',
+      '@/styles/common.scss',
     ],
     spectre: [
       'spectre.css/dist/spectre.min.css',