diff --git a/frontend/public/assets/img/avatars/avatar-2.png b/frontend/public/assets/img/avatars/avatar-2.png
new file mode 100644
index 0000000..9eb3ec9
Binary files /dev/null and b/frontend/public/assets/img/avatars/avatar-2.png differ
diff --git a/frontend/public/assets/img/avatars/avatar-3.png b/frontend/public/assets/img/avatars/avatar-3.png
new file mode 100644
index 0000000..a0dbc96
Binary files /dev/null and b/frontend/public/assets/img/avatars/avatar-3.png differ
diff --git a/frontend/public/assets/img/avatars/avatar-4.png b/frontend/public/assets/img/avatars/avatar-4.png
new file mode 100644
index 0000000..de75ef6
Binary files /dev/null and b/frontend/public/assets/img/avatars/avatar-4.png differ
diff --git a/frontend/public/assets/img/avatars/avatar-5.png b/frontend/public/assets/img/avatars/avatar-5.png
new file mode 100644
index 0000000..40d595e
Binary files /dev/null and b/frontend/public/assets/img/avatars/avatar-5.png differ
diff --git a/frontend/public/assets/img/avatars/avatar-6.png b/frontend/public/assets/img/avatars/avatar-6.png
new file mode 100644
index 0000000..bc8577c
Binary files /dev/null and b/frontend/public/assets/img/avatars/avatar-6.png differ
diff --git a/frontend/public/assets/img/avatars/avatar.png b/frontend/public/assets/img/avatars/avatar.png
new file mode 100644
index 0000000..894246c
Binary files /dev/null and b/frontend/public/assets/img/avatars/avatar.png differ
diff --git a/frontend/public/assets/img/photos/unsplash-1.jpg b/frontend/public/assets/img/photos/unsplash-1.jpg
new file mode 100644
index 0000000..ccc3963
Binary files /dev/null and b/frontend/public/assets/img/photos/unsplash-1.jpg differ
diff --git a/frontend/public/assets/img/photos/unsplash-2.jpg b/frontend/public/assets/img/photos/unsplash-2.jpg
new file mode 100644
index 0000000..3a33349
Binary files /dev/null and b/frontend/public/assets/img/photos/unsplash-2.jpg differ
diff --git a/frontend/public/assets/img/photos/unsplash-3.jpg b/frontend/public/assets/img/photos/unsplash-3.jpg
new file mode 100644
index 0000000..bc287e5
Binary files /dev/null and b/frontend/public/assets/img/photos/unsplash-3.jpg differ
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 2231b2e..2680ed5 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -18,36 +18,7 @@
                     <ul class="navbar-nav navbar-align">
                         <Notifications :notifications="notifications"/>
                         <Messages :messages="messages"/>
-                        <li class="nav-item dropdown">
-                            <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
-                               data-toggle="dropdown">
-                                <i class="align-middle" data-feather="settings"></i>
-                                <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
-                            </a>
-
-                            <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#"
-                               data-toggle="dropdown">
-                                <!--<img src="/static/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
-                                     alt="Charles Hall"/>-->
-                                <span class="text-dark">
-                        <!--{{ request.user.username }}-->
-                    </span>
-                            </a>
-
-                            <div class="dropdown-menu dropdown-menu-right">
-                                <router-link to="/profile" class="dropdown-item">
-                                    <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
-                                    Profile
-                                </router-link>
-                                <router-link to="/settings" class="dropdown-item">
-                                    <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
-                                    Settings &
-                                    Privacy
-                                </router-link>
-                                <div class="dropdown-divider"></div>
-                                <a class="dropdown-item" href="#" @click="logout"> Log out</a>
-                            </div>
-                        </li>
+                        <UserDropdown/>
                     </ul>
                 </div>
             </nav>
@@ -64,12 +35,16 @@ import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import Notifications from "@/components/Notifications.vue";
 import Messages from "@/components/Messages.vue";
+import Footer from "@/components/Footer.vue";
+import Sidebar from "@/components/Sidebar.vue";
+import UserDropdown from "@/components/UserDropdown.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
-        Footer,
+        UserDropdown,
         Sidebar,
+        Footer,
         Messages,
         Notifications,
         ...BIcons
diff --git a/frontend/src/components/Messages.vue b/frontend/src/components/Messages.vue
index 99e880b..52be31e 100644
--- a/frontend/src/components/Messages.vue
+++ b/frontend/src/components/Messages.vue
@@ -16,8 +16,8 @@
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-5.png"
-                                 class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
+                            <img src="/assets/img/avatars/avatar-5.png"
+                                 class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">Vanessa Tucker</div>
@@ -31,8 +31,8 @@
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-2.png"
-                                 class="avatar img-fluid rounded-circle" alt="William Harris">-->
+                            <img src="/assets/img/avatars/avatar-2.png"
+                                 class="avatar img-fluid rounded-circle" alt="William Harris">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">William Harris</div>
@@ -46,8 +46,8 @@
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-4.png"
-                                 class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
+                            <img src="/assets/img/avatars/avatar-4.png"
+                                 class="avatar img-fluid rounded-circle" alt="Christina Mason">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">Christina Mason</div>
@@ -57,12 +57,11 @@
                         </div>
                     </div>
                 </a>
-                <!-- {% for messege in top_messages %}-->
                 <a href="#" class="list-group-item">
                     <div class="row g-0 align-items-center">
                         <div class="col-2">
-                            <!--<img src="/static/assets/img/avatars/avatar-3.png"
-                                 class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
+                            <img src="/assets/img/avatars/avatar-3.png"
+                                 class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
                         </div>
                         <div class="col-10 pl-2">
                             <div class="text-dark">Sharon Lessman</div>
@@ -74,7 +73,6 @@
                         </div>
                     </div>
                 </a>
-                <!--{% endfor %}-->
             </div>
             <div class="dropdown-menu-footer">
                 <a href="#" class="text-muted">Show all messages</a>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 92bfdc2..c3ea17c 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -12,6 +12,16 @@
         </a>
 
         <div class="dropdown-menu dropdown-menu-right" id="userDropdown">
+            <router-link to="/profile" class="dropdown-item">
+                <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
+                Profile
+            </router-link>
+            <router-link to="/settings" class="dropdown-item">
+                <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
+                Settings &
+                Privacy
+            </router-link>
+            <div class="dropdown-divider"></div>
             <a class="dropdown-item" href="#" @click="logout"> Log out</a>
         </div>
     </li>
diff --git a/frontend/src/views/Friends.vue b/frontend/src/views/Friends.vue
index 7d49453..6ad2b91 100644
--- a/frontend/src/views/Friends.vue
+++ b/frontend/src/views/Friends.vue
@@ -92,6 +92,10 @@
                                 </tbody>
                             </table>
                         </div>
+                        <div class="card">
+                            <button class="btn" @click="fetchFriends">Refresh</button>
+                            <router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 50ecade..3fec4eb 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -12,9 +12,9 @@
                                 <h5 class="card-title mb-0">Profile Details</h5>
                             </div>
                             <div class="card-body text-center">
-                                <!--<img src="/static/assets/img/avatars/avatar.png"
+                                <img src="/assets/img/avatars/avatar.png"
                                      alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128"
-                                     height="128"/>-->
+                                     height="128"/>
                                 <h5 class="card-title mb-0">
                                     {{ user.username }}
                                 </h5>
@@ -94,8 +94,8 @@
                             <div class="card-body h-100">
 
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-5.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Vanessa Tucker">-->
+                                    <img src="/assets/img/avatars/avatar-5.png" width="36" height="36"
+                                         class="rounded-circle mr-2" alt="Vanessa Tucker">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">5m ago</small>
                                         <strong>Vanessa Tucker</strong> started following <strong>Christina
@@ -107,8 +107,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Charles Hall">-->
+                                    <img src="/assets/img/avatars/avatar.png" width="36" height="36"
+                                          class="rounded-circle mr-2" alt="Charles Hall">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">30m ago</small>
                                         <strong>Charles Hall</strong> posted something on <strong>Christina
@@ -132,8 +132,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-4.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Christina Mason">-->
+                                    <img src="/assets/img/avatars/avatar-4.png" width="36" height="36"
+                                          class="rounded-circle mr-2" alt="Christina Mason">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1h ago</small>
                                         <strong>Christina Mason</strong> posted a new blog<br/>
@@ -144,8 +144,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-2.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="William Harris">-->
+                                    <img src="/assets/img/avatars/avatar-2.png" width="36" height="36"
+                                          class="rounded-circle mr-2" alt="William Harris">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">3h ago</small>
                                         <strong>William Harris</strong> posted two photos on <strong>Christina
@@ -154,12 +154,12 @@
 
                                         <div class="row g-0 mt-1">
                                             <div class="col-6 col-md-4 col-lg-4 col-xl-3">
-                                                <!--<img src="/static/assets/img/photos/unsplash-1.jpg"
-                                                     class="img-fluid pr-2" alt="Unsplash">-->
+                                                <img src="/assets/img/photos/unsplash-1.jpg"
+                                                     class="img-fluid pr-2" alt="Unsplash">
                                             </div>
                                             <div class="col-6 col-md-4 col-lg-4 col-xl-3">
-                                                <!--<img src="/static/assets/img/photos/unsplash-2.jpg"
-                                                     class="img-fluid pr-2" alt="Unsplash">-->
+                                                <img src="/assets/img/photos/unsplash-2.jpg"
+                                                      class="img-fluid pr-2" alt="Unsplash">
                                             </div>
                                         </div>
 
@@ -171,8 +171,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-2.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="William Harris">-->
+                                    <img src="/assets/img/avatars/avatar-2.png" width="36" height="36"
+                                          class="rounded-circle mr-2" alt="William Harris">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1d ago</small>
                                         <strong>William Harris</strong> started following <strong>Christina
@@ -181,8 +181,8 @@
 
                                         <div class="d-flex align-items-start mt-1">
                                             <a class="pr-3" href="#">
-                                                <!--<img src="/static/assets/img/avatars/avatar-4.png" width="36"
-                                                     height="36" class="rounded-circle mr-2" alt="Christina Mason">-->
+                                                <img src="/assets/img/avatars/avatar-4.png" width="36"
+                                                      height="36" class="rounded-circle mr-2" alt="Christina Mason">
                                             </a>
                                             <div class="flex-grow-1">
                                                 <div class="border text-sm text-muted p-2 mt-1">
@@ -196,8 +196,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar-4.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Christina Mason">-->
+                                    <img src="/assets/img/avatars/avatar-4.png" width="36" height="36"
+                                          class="rounded-circle mr-2" alt="Christina Mason">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1d ago</small>
                                         <strong>Christina Mason</strong> posted a new blog<br/>
@@ -207,8 +207,8 @@
 
                                 <hr/>
                                 <div class="d-flex align-items-start">
-                                    <!--<img src="/static/assets/img/avatars/avatar.png" width="36" height="36"
-                                         class="rounded-circle mr-2" alt="Charles Hall">-->
+                                    <img src="/assets/img/avatars/avatar.png" width="36" height="36"
+                                          class="rounded-circle mr-2" alt="Charles Hall">
                                     <div class="flex-grow-1">
                                         <small class="float-right text-navy">1d ago</small>
                                         <strong>Charles Hall</strong> started following <strong>Christina
@@ -223,7 +223,6 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </main>
     </BaseLayout>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index d143c7e..8784570 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -79,7 +79,7 @@
                                                 <div class="col-md-4">
                                                     <div class="text-center">
                                                         <img alt="Charles Hall"
-                                                             src="/static/assets/img/avatars/avatar.png"
+                                                             src="/assets/img/avatars/avatar.png"
                                                              class="rounded-circle img-responsive mt-2" width="128"
                                                              height="128"/>
                                                         <div class="mt-2">
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 53448c3..0ffb60b 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -27,7 +27,6 @@ export default defineConfig({
                 + ' img-src \'self\' data:; '
                 + ' connect-src * data:', // TODO: change * to https://* for production (probably in nginx config not here)
         },
-    },
         proxy: {
             '^/api/': {
                 target: "http://127.0.0.1:8000/",
@@ -43,6 +42,13 @@ export default defineConfig({
             },
             '^/static/': {
                 target: "http://127.0.0.1:8000/",
+            },
+            '^/wiki/': {
+                target: "http://127.0.0.1:8080/",
+                rewrite: (path) => path.replace(/^\/wiki/, ''),
+            },
+            '^/livereload/': {
+                target: "http://127.0.0.1:8080/",
             }
         },
     test: {