diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 464d104..522c03a 100644
--- a/app/Http/Controllers/PageController.php
+++ b/app/Http/Controllers/PageController.php
@@ -51,9 +51,14 @@ class PageController extends Controller
 
         return view('pages.users')->with('users', $users);
     }
-
+    
     public function settings()
     {
         return view('misc.settings');
     }
+
+    public function friends()
+    {
+        return view('pages.friends');
+    }
 }
diff --git a/public/css/app.css b/public/css/app.css
index 138023a..77cf1fc 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,7 +1,15 @@
 @keyframes animatedbackground {
-  from {background-position-x: 0px; animation-timing-function: linear;}
-  to {background-position-x: 2000px; animation-timing-function: linear;}
+  from {
+    background-position-x: 0px;
+    animation-timing-function: linear;
+  }
+
+  to {
+    background-position-x: 2000px;
+    animation-timing-function: linear;
+  }
 }
+
 #alert {
   height: fit-content;
   margin: 0px;
@@ -13,21 +21,24 @@
   padding-left: 5px;
   width: 100%;
   text-align: center;
-background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
+  background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
 }
+
 .warningtext {
   color: red;
 }
+
 .popupcontainer {
   top: 0%;
   position: fixed;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   z-index: 100000000;
 }
+
 .popup {
-  color:#000000;
+  color: #000000;
   text-align: center;
   position: fixed;
   top: 50%;
@@ -40,9 +51,11 @@ background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
   width: max-content;
   border-radius: 3px;
   border: 1px solid #3D414A;
-  background: rgb(80, 80, 80); /* Fallback for IE 11*/
+  background: rgb(80, 80, 80);
+  /* Fallback for IE 11*/
   background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
 }
+
 .navbar {
   height: 40px;
   margin: 0px;
@@ -57,15 +70,21 @@ background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
   display: inline-flex;
   vertical-align: middle;
   width: 100%;
-  background: rgb(58, 83, 242); /* Fallback for IE 11*/
+  background: rgb(58, 83, 242);
+  /* Fallback for IE 11*/
   background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
 }
-.navbarbuttoncontainer, .smallnavbarbuttoncontainer, .navbarlogincontainer {
+
+.navbarbuttoncontainer,
+.smallnavbarbuttoncontainer,
+.navbarlogincontainer {
   padding-left: 5px;
   display: table-cell;
   vertical-align: middle;
 }
-#navbarlogincontainer, #navbarsignedincontainer {
+
+#navbarlogincontainer,
+#navbarsignedincontainer {
   position: relative;
   padding-right: 10px;
   margin-right: 3%;
@@ -73,52 +92,70 @@ background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
   float: inline-end;
   top: 11px;
 }
-#profilefriendscontainer p, #profilefriendscontainer a {
+
+#profilefriendscontainer p,
+#profilefriendscontainer a {
   display: inline;
 }
+
 #profiletopcontainer {
   margin-bottom: 30px;
   display: block;
   width: 100%;
 }
+
 .onlinestatus_website {
   color: #2260DD;
 }
+
 .onlinestatus_ingame {
   color: green;
 }
+
 .onlinestatus_offline {
   color: black;
 }
-#yes, #no {
+
+#yes,
+#no {
   width: 50%;
 }
+
 #FeedBox {
   width: 100%;
   height: 22px;
 }
+
 #FeedButton {
   width: 100%;
   height: 22px;
 }
-#logo_signup, #logo-signup p {
+
+#logo_signup,
+#logo-signup p {
   margin: auto;
   text-align: center;
   width: 200px;
 }
-#feed, #profileleftcontainer {
+
+#feed,
+#profileleftcontainer {
   text-align: center;
   padding-left: 5px;
   padding-right: 5px;
   width: 50%;
 }
-#gamesframe, #profilerightcontainer {
+
+#gamesframe,
+#profilerightcontainer {
   text-align: center;
   padding-left: 5px;
   padding-right: 5px;
   width: 50%;
 }
-.FeedContainerBox, .ProfileContainerBox {
+
+.FeedContainerBox,
+.ProfileContainerBox {
   border-radius: 1px;
   text-align: left;
   width: 100%;
@@ -128,20 +165,35 @@ background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
   border-width: 1px;
   margin-bottom: 5px;
 }
+.FriendsContainerBox {
+  border-radius: 1px;
+  text-align: left;
+  width: 100%;
+  min-width: max-content;
+  vertical-align: top;
+  display: inline-flex;
+  border: 1px solid #000000;
+  border-width: 1px;
+  margin-bottom: 5px;
+}
+
 #btncontainer {
   margin-left: 75%;
 }
+
 .navbarbutton {
   position: relative;
   top: 10px;
   text-align: center;
   font-size: 18px;
 }
+
 .smallnavbarbutton {
   position: relative;
   text-align: center;
   font-size: 15px;
 }
+
 .smallnav {
   height: 25px;
   margin: 0px;
@@ -160,13 +212,16 @@ background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
   text-align: left;
   background-color: black;
 }
-.invisible, #invisible {
+
+.invisible,
+#invisible {
   display: none !important;
 }
+
 html {
   margin: 0px;
   font-family: "Helvetica";
-  src: url('Helvetica.ttf') format('truetype'),;
+  src: url('Helvetica.ttf') format('truetype'), ;
   font-style: normal;
   background-color: rgb(49, 107, 223);
   color: white;
@@ -178,6 +233,7 @@ html {
   background-repeat: repeat-x;
   background-attachment: fixed;
 }
+
 body {
   margin-left: 0px;
   margin-right: 0px;
@@ -185,15 +241,18 @@ body {
   margin-bottom: 35px;
   padding-bottom: 0px;
 }
-.content_special, #content_special {
+
+.content_special,
+#content_special {
   display: inline-flex;
   width: 100%;
-  flex-wrap: nowrap;
   flex-direction: row;
+  align-items: flex-start;
+  flex-wrap: nowrap;
   align-content: center;
   justify-content: flex-start;
-  align-items: flex-start;
 }
+
 .content {
   color: black;
   max-width: 1000px;
@@ -202,11 +261,13 @@ body {
   padding-left: 5px;
   padding-right: 5px;
   min-height: 300px;
-  background: rgb(255,255,255); /* Fallback for IE 11*/
+  background: rgb(255, 255, 255);
+  /* Fallback for IE 11*/
   background-color: rgba(255, 255, 255, 0.8);
   padding-bottom: 5px;
   padding-top: 5px;
 }
+
 .content_signup {
   color: black;
   max-width: 500px;
@@ -214,17 +275,27 @@ body {
   margin-top: 30px;
   padding-left: 5px;
   padding-right: 5px;
-  background: rgb(255,255,255); /* Fallback for IE 11*/
+  background: rgb(255, 255, 255);
+  /* Fallback for IE 11*/
   background-color: rgba(255, 255, 255, 0.8);
   padding-bottom: 5px;
   padding-top: 5px;
 }
-.content_signup  input, .content_signup button {
+
+.content_signup input,
+.content_signup button {
   width: 90%;
 }
-.content p a, .content a, .content_signup p a, .content_signup a, .content_special p a, .content_special a {
+
+.content p a,
+.content a,
+.content_signup p a,
+.content_signup a,
+.content_special p a,
+.content_special a {
   color: black
 }
+
 #footer {
   text-align: center;
   max-width: 1000px;
@@ -233,66 +304,109 @@ body {
   padding-right: 5px;
   padding-bottom: 5px;
   padding-top: 5px;
-  background: rgb(172,172,172); /* Fallback for IE 11*/
+  background: rgb(172, 172, 172);
+  /* Fallback for IE 11*/
   background-color: rgba(172, 172, 172, 0.8);
   min-height: fit-content;
 }
+
+.tab {
+  background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
+  font-weight: 400;
+  text-align: center;
+  height: 20px;
+  border-radius: 1px;
+  border: 1px solid #3D414A;
+  font-family: "Helvetica";
+  padding-left: 5px;
+  padding-right: 5px;
+  color: #fff !important;
+}
+
+.tab_selected {
+  background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
+  font-weight: 400;
+  text-align: center;
+  height: 20px;
+  border-radius: 1px;
+  border: 1px solid #3D414A;
+  font-family: "Helvetica";
+  padding-left: 5px;
+  padding-right: 5px;
+  color: #fff !important;
+}
+
 button {
-font-weight: 400;
-text-align: center;
+  background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
+  font-weight: 400;
+  text-align: center;
+  height: 20px;
   border-radius: 3px;
-border: 1px solid #3D414A;
-font-family: "Helvetica";
-color: #fff;
+  border: 1px solid #3D414A;
+  font-family: "Helvetica";
+  color: #fff;
 }
+
 button.bluebutton {
-background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
+  background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
 }
+
 button:hover.bluebutton {
-background: linear-gradient(#7ca1ef 10%, #4a7de4 49%, #396fdb 50%, #3168d6 100%);
+  background: linear-gradient(#7ca1ef 10%, #4a7de4 49%, #396fdb 50%, #3168d6 100%);
   cursor: pointer;
 }
+
 button:disabled.bluebutton {
-background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
+  background: linear-gradient(#759CF0 10%, #3B72E1 49%, #2260DD 50%, #2362DE 100%);
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 button.greybutton {
-background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
+  background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
 }
+
 button:hover.greybutton {
-background: linear-gradient(#d1d8e6 10%, #b3b8c2 49%, #868a91 50%, #393b3e 100%);
+  background: linear-gradient(#d1d8e6 10%, #b3b8c2 49%, #868a91 50%, #393b3e 100%);
   cursor: pointer;
 }
+
 button:disabled.greybutton {
-background:  linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
+  background: linear-gradient(#cacbcc 10%, #99999a 49%, #747474 50%, #2d2d2d 100%);
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 button.redbutton {
-background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%);
+  background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%);
 }
+
 button:hover.redbutton {
-background: linear-gradient(#e56c6c 10%, #dd4e4e 49%, #d14343 50%, #da2e2e 100%);
+  background: linear-gradient(#e56c6c 10%, #dd4e4e 49%, #d14343 50%, #da2e2e 100%);
   cursor: pointer;
 }
+
 button:disabled.redbutton {
-background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%);
+  background: linear-gradient(#e65a5a 10%, #e13535 49%, #d92c2c 50%, #df1818 100%);
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 button.greenbutton {
-background: linear-gradient(#5acf77 10%, #3abc44 49%, #359c32 50%, #1a5c2e 100%);
+  background: linear-gradient(#5acf77 10%, #3abc44 49%, #359c32 50%, #1a5c2e 100%);
 }
+
 button:hover.greenbutton {
-background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%);
+  background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%);
   cursor: pointer;
 }
+
 button:disabled.greenbutton {
-background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%);
+  background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%);
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 #footer_signup {
   text-align: center;
   max-width: 500px;
@@ -301,43 +415,63 @@ background: linear-gradient(#75f094 10%, #39d746 49%, #21b71c 50%, #137a32 100%)
   padding-right: 5px;
   padding-bottom: 5px;
   padding-top: 5px;
-  background: rgb(172,172,172); /* Fallback for IE 11*/
+  background: rgb(172, 172, 172);
+  /* Fallback for IE 11*/
   background-color: rgba(172, 172, 172, 0.8);
   min-height: fit-content;
 }
-#footer p, #footer a, #footer_signup p, #footer_signup a {
+
+#footer p,
+#footer a,
+#footer_signup p,
+#footer_signup a {
   color: black;
 }
-p,h1,h2,h3,h4,h5,h6 {
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0px;
 }
-a, #navbarusername {
+
+a,
+#navbarusername {
   color: white;
   text-decoration: none;
   font-weight: bolder;
 }
+
 .nonbolded {
   font-weight: normal !important;
 }
+
 .logoutframe {
   color: black;
   max-width: fit-content;
   margin: auto;
   padding-left: 5px;
   padding-right: 5px;
-  background: rgb(255,255,255); /* Fallback for IE 11*/
+  background: rgb(255, 255, 255);
+  /* Fallback for IE 11*/
   background-color: rgba(255, 255, 255, 0.3);
   padding-bottom: 5px;
   padding-top: 5px;
 }
+
 .w-5 {
   display: none;
 }
+
 .flex {
   display: table;
   margin-right: auto;
   margin-left: auto;
 }
+
 .iphone-sidebar {
   position: fixed;
   color: black;
@@ -348,6 +482,7 @@ a, #navbarusername {
   padding-bottom: 5px;
   padding-top: 5px;
 }
+
 .iphone-content {
   position: relative;
   color: black;
@@ -358,6 +493,7 @@ a, #navbarusername {
   padding-bottom: 5px;
   padding-top: 5px;
 }
+
 #InviteTreeContainer {
   background-color: rgb(255, 255, 255);
 }
\ No newline at end of file
diff --git a/public/img/ARCHBLOXarched.png b/public/img/ARCHBLOXarched.png
new file mode 100644
index 0000000..a46d614
Binary files /dev/null and b/public/img/ARCHBLOXarched.png differ
diff --git a/public/js/main.js b/public/js/main.js
index 697d5c2..ece5e8d 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,6 +1,91 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;
\ No newline at end of file
+window.addEventListener('resize', function() {
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var navbarusername = document.getElementById("navbarusername")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 730) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 564    ) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 400) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
+    if (viewport_width < 360) {
+        navbarusername.className = "invisible";
+    } else {
+        navbarusername.className = "nonbolded";
+    }
+
+});
+window.onload = function() {
+    var logo_full = document.getElementById("logo_full")
+    var logo_small = document.getElementById("logo_small")
+    var smallbtn = document.getElementById("smallbtn1")
+    var smallbtn0 = document.getElementById("smallbtn0")
+    var smallbtn2 = document.getElementById("smallbtn2")
+    var smallbtn3 = document.getElementById("smallbtn3")
+    var smallbtn1 = document.getElementById("smallbtn4")
+    var smallbtn5 = document.getElementById("smallbtn5")
+    var navbarusername = document.getElementById("navbarusername")
+    var viewport_width = window.innerWidth;
+    if (viewport_width < 900) {
+        logo_full.className = "invisible";
+        logo_small.className = "";
+    } else {
+        logo_small.className = "invisible";
+        logo_full.className = "";
+    }
+    if (viewport_width < 730) {
+        smallbtn.className = "invisible";
+        smallbtn2.className = "invisible";
+        smallbtn3.className = "invisible";
+    } else {
+        smallbtn.className = "navbarbutton";
+        smallbtn2.className = "navbarbutton";
+        smallbtn3.className = "navbarbutton";
+    }
+    if (viewport_width < 564) {
+        smallbtn0.className = "invisible";
+        smallbtn1.className = "invisible";
+    } else {
+        smallbtn0.className = "navbarbutton";
+        smallbtn1.className = "navbarbutton";
+    }
+    if (viewport_width < 400) {
+        smallbtn5.className = "invisible";
+    } else {
+        smallbtn5.className = "navbarbutton";
+    }
+    if (viewport_width < 360) {
+        navbarusername.className = "invisible";
+    } else {
+        navbarusername.className = "nonbolded";
+    }
+}; 
\ No newline at end of file
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 468f230..56443c5 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -21,17 +21,17 @@
 </head>
 
 <body>
-    <ul></ul>
-    <ul></ul>
+    <br>
+    <br>
     <div id="logo_signup">
-        <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+        <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
                 width="200" height="40" /></a>
         <p id="morbin">We're Still Morbin'</p>
     </div>
     <div class="content_signup">
         <h1>Welcome back!</h1>
         <p>Don't have an account? <a href="{{ route('register') }}">Click here</a> to sign up.</p>
-        <ul></ul>
+        <br>
 
         <form method="POST" action="{{ route('login') }}">
             @csrf
@@ -49,7 +49,7 @@
                     <strong>{{ $message }}</strong>
                 </span>
             @enderror
-            <ul></ul>
+            <br>
             <input style="width:5%;margin-bottom:15px" type="checkbox" name="remember" id="remember"
                 {{ old('remember') ? 'checked' : '' }}>
 
@@ -58,7 +58,7 @@
             </label>
             <button type="submit" class="greenbutton">Log in!</button>
             @if (Route::has('password.request'))
-                <ul></ul>
+                <br>
                 <a class="btn btn-link" href="{{ route('password.request') }}"
                     style="text-align:center;display:block;width:90%">
                     {{ __('Forgot Your Password?') }}
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 087ceb0..aa8ff58 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -21,20 +21,20 @@
 </head>
 
 <body>
-    <ul></ul>
-    <ul></ul>
+    <br>
+    <br>
     <div id="logo_signup">
-        <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+        <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
             width="200" height="40" /></a>
         <p id="morbin">We're Still Morbin'</p>
     </div>
     <div class="content_signup">
         <h1>Welcome to ARCHBLOX!</h1>
         <p>Have an account already? <a href="{{ route('login') }}">Click here</a> to log in.</p>
-        <ul></ul>
+        <br>
         <p>Before entering anything, please read the <a href="{{ route('privacy') }}">Privacy Policy</a> and the <a
                 href="{{ route('tos') }}">Terms of Service</a>.</p>
-        <ul></ul>
+        <br>
         <form method="POST" action="{{ route('register') }}">
             @csrf
             <h3>Username</h3>
@@ -46,7 +46,7 @@
                     <strong>{{ $message }}</strong>
                 </div>
             @enderror
-            <ul></ul>
+            <br>
             <h3>E-Mail Address</h3>
             <input id="email" type="email" name="email" value="{{ old('email') }}" required
                 autocomplete="email">
@@ -63,7 +63,7 @@
                     <strong>{{ $message }}</strong>
                 </div>
             @enderror
-            <ul></ul>
+            <br>
             <h3>Date of Birth</h3>
             <input id="dob" type="date" name="dob" value="{{ old('dob') }}" required>
             @error('dob')
@@ -71,7 +71,7 @@
                     <strong>{{ $message }}</strong>
                 </div>
             @enderror
-            <ul></ul>
+            <br>
             <h3>Password</h3>
             <input id="password" type="password" name="password" required autocomplete="password">
             <p>Don't reuse passwords, and don't use a simple one!</p>
@@ -81,7 +81,7 @@
                     <strong>{{ $message }}</strong>
                 </div>
             @enderror
-            <ul></ul>
+            <br>
             <h3>Invite Key</h3>
             <input id="key" type="text" name="key" placeholder="Invite Key" value="{{ old('key') }}"
                 required>
@@ -92,7 +92,7 @@
             @enderror
             <p>An Invite Key is required to sign up. You can obtain one from a person that has played ARCHBLOX.</p>
             <p>Don't beg for keys.</p>
-            <ul></ul>
+            <br>
             <button class="greenbutton">Sign Up!</button>
     </div>
     <div id="footer_signup">
diff --git a/resources/views/errors/403.blade.php b/resources/views/errors/403.blade.php
index 967be7e..5672407 100644
--- a/resources/views/errors/403.blade.php
+++ b/resources/views/errors/403.blade.php
@@ -17,9 +17,9 @@
         <script src="{{ asset('js/403.js') }}"></script>
     </head>
     <body>
-        <ul></ul>
+        <br>
         <div id="logo_signup">
-            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
                 width="200" height="40" /></a>
             <p id="morbin">We're Still Morbin'</p>
         </div>
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index 4a3b7d8..9a01e53 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -16,9 +16,9 @@
         <link rel="stylesheet" href="{{ asset('css/app.css') }}">
     </head>
     <body>
-        <ul></ul>
+        <br>
         <div id="logo_signup">
-            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
                 width="200" height="40" /></a>
             <p id="morbin">We're Still Morbin'</p>
         </div>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index b63cfe8..1a6cfd5 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -5,14 +5,14 @@
 
 @section('content')
     <h1 id="usernameframe">Hello, {{ Auth::user()->name }}!</h1>
-    <ul></ul>
+    <br>
     <div class="content_special">
         <div id="feed">
             <h2>My Feed</h2>
-            <ul></ul>
+            <br>
             <input id="FeedBox" type="text" placeholder="Say something...">
             <button class="greybutton" id="FeedButton">Post it!</button>
-            <ul></ul>
+            <br>
             <div id="FeedContainer">
                 <div class="FeedContainerBox" id="FeedContainerBox1">
                     <div class="FeedContainerBoxImageContainer" id="FeedContainerBox1ImageContainer">
@@ -85,18 +85,18 @@
         </div>
         <div id="gamesframe">
             <h2>Friends (0)</h2>
-            <ul></ul>
+            <br>
             <div class="friendslist">
                 <p>You don't have any friends yet!</p>
             </div>
-            <ul></ul>
+            <br>
             <h2>Recently Played</h2>
-            <ul></ul>
+            <br>
             <div class="gamelist">
                 <p>You haven't played any games yet!</p>
             </div>
-            <ul></ul>
+            <br>
         </div>
     </div>
-    <ul></ul>
+    <br>
 @endsection
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 37dfb75..d8f2ada 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -21,24 +21,24 @@
 </head>
 
 <body>
-    <ul></ul>
+    <br>
     <div id="logo_signup">
-        <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+        <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
                 width="200" height="40" /></a>
         <p id="morbin">We're Still Morbin'</p>
     </div>
     <div class="content_signup">
         <h1>Welcome to ARCHBLOX!</h1>
         <p>ARCHBLOX is a Work-In-Progress revival.</p>
-        <ul></ul>
+        <br>
         <a href="{{ route('login') }}">Log In</a>
         <a href="{{ route('register') }}">Sign Up</a>
-        <ul></ul>
+        <br>
         <p id="ARCHBLOX" class="invisible">Want to check out the published site? <a href="https://archblox.com">Click
                 here!</a></p>
         <p id="discord">Also, <a href="https://discord.gg/nudzQ7hkWY">Join our Discord!</a></p>
-        <ul></ul>
-        <ul></ul>
+        <br>
+        <br>
         <h3>User Count</h3>
         <p>There are <strong>{{ App\Models\User::count() }}</strong> users registered</p>
     </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0f56e9b..450ef83 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -57,7 +57,7 @@
     </div>
     <div class="smallnav">
         <div class="smallnavbarbuttoncontainer">
-            <a class="smallnavbarbutton" href="#">Friends</a>
+            <a class="smallnavbarbutton" href="{{ route('friends') }}">Friends</a>
             <a class="smallnavbarbutton" href="#">Avatar</a>
             <a class="smallnavbarbutton" href="#">Transactions</a>
             <a class="smallnavbarbutton" href="{{ route('users') }}">Users</a>
@@ -68,6 +68,8 @@
     </div>
     @yield('alert')
 
+
+    @yield('popup_content')
     <div class="content">
         @yield('content')
     </div>
diff --git a/resources/views/misc/privacy.blade.php b/resources/views/misc/privacy.blade.php
index 9ef8703..e1f2d41 100644
--- a/resources/views/misc/privacy.blade.php
+++ b/resources/views/misc/privacy.blade.php
@@ -18,10 +18,10 @@
         <script src="{{ asset('js/main.js') }}"></script>
     </head>
     <body>
-        <ul></ul>
-        <ul></ul>
+        <br>
+        <br>
         <div id="logo_signup">
-            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
                 width="200" height="40" /></a>
             <p id="morbin">We're Still Morbin'</p>
         </div>
@@ -55,7 +55,7 @@
             <p>This Policy can change from time to time and is available on our website. You will be notified of this change.</p>
             <h2>Privacy Policy Complaints and Enquiries</h2>
             <p>If you have any queries or complaints about our Privacy Policy, please contact us on our Discord.</p>
-            <ul></ul>
+            <br>
         </div>
         <div id="footer_signup">
             <p>ARCHBLOX is not affiliated with Roblox Corp, Lego, Sony, SEGA, Microsoft, Nintendo and Morbius. It's Morbin time!</p>
diff --git a/resources/views/misc/settings.blade.php b/resources/views/misc/settings.blade.php
index defdf5e..563a666 100644
--- a/resources/views/misc/settings.blade.php
+++ b/resources/views/misc/settings.blade.php
@@ -1,36 +1,98 @@
 @extends('layouts.app')
 @section('title')
-    <title>Settings - {{ env('APP_NAME') }}</title>
+<title>Settings - {{ env('APP_NAME') }}</title>
+@endsection
+
+@section('popup_content')
+<div class="popupcontainer" id="invisible">
+    <div class="popup">
+        <h2>Test Dialog</h2>
+        <p class="warningtext">WARNING TEXT</p>
+        <p>DESCRIPTION OF THE SETTING YOU ARE ABOUT TO CHANGE</p>
+        <input type="text" placeholder="New Username Field">
+        <br>
+        <input type="password" placeholder="Old Password Field">
+        <input type="password" placeholder="New Password Field">
+        <input type="password" placeholder="Confirm New Password Field">
+        <br>
+        <input type="text" placeholder="Confirm Old E-Mail Field">
+        <input type="text" placeholder="New E-Mail Field">
+        <input type="text" placeholder="Confirm New E-Mail Field">
+        <br>
+        <input type="date">
+        <br>
+        <select name="Time Preference">
+            <option value="12hour">12 Hour</option>
+            <option value="24hour">24 Hour</option>
+        </select>
+        <br>
+        <select name="Date Preference">
+            <option value="DMY">DAY/MONTH/YEAR</option>
+            <option value="MDY">MONTH/DAY/YEAR</option>
+            <option value="YDM">YEAR/MONTH/DAY</option>
+        </select>
+        <br>
+        <button class="bluebutton">Confirm_Good</button>
+        <button class="redbutton">Cancel_Bad</button>
+        <button class="redbutton">Confirm_Bad</button>
+        <button class="bluebutton">Cancel_Good</button>
+    </div>
+</div>
 @endsection
 
 @section('content')
-    <h1>Settings</h1>
-    <div class="content_special" style="align-content: flex-end; align-items: flex-start;">
-        <div class="content_special" style="flex-wrap: wrap; flex-direction: column; width: 50%;">
-            <h3>Bio</h3>
-            <textarea style="resize: none; width: 100%; height: 75px;" placeholder="Hello!"></textarea>
-            <button class="bluebutton">Save</button>
-            <br>
-        </div>
-        <div class="content_special" style="flex-wrap: wrap; flex-direction: column; width: 50%; text-align: end;">
-            <p>Username: OnlyTwentyCharacters <button class="bluebutton">Edit</button></p>
-            <p>E-Mail: t****@ex********.com <button class="bluebutton">Edit</button></p>
-            <p>Date of Birth: 01/01/01 <button class="bluebutton">Edit</button></p>
-            <p>Password: ******** <button class="bluebutton">Edit</button></p>
-            <p>Date Display Preference: D/M/YY <button class="bluebutton">Edit</button></p>
-            <p>Time Display Preference: 12 Hour <button class="bluebutton">Edit</button></p>
-        </div>
+<h1>Settings</h1>
+<div class="content_special" style="align-content: flex-end; align-items: flex-start; width=100%;">
+    <div class="content_special" style="flex-wrap: wrap; flex-direction: column; width: 50%;">
+        <h3>Bio</h3>
+        <textarea style="resize: none; width: 100%; height: 75px;" placeholder="Hello!"></textarea>
+        <button class="bluebutton">Save</button>
+        <br>
     </div>
-    <div>
+    <div class="content_special"
+        style="flex-wrap: wrap; flex-direction: row-reverse; width: 50%; text-align: end; align-content: flex-end;">
+        <p style="width: 100%;">Username: OnlyTwentyCharacters <button class="bluebutton">Edit</button></p>
+        <p style="width: 100%;">E-Mail: t****@ex********.com <button class="bluebutton">Edit</button></p>
+        <p style="width: 100%;">Date of Birth: 01/01/01 <button class="bluebutton">Edit</button></p>
+        <p style="width: 100%;">Password: ******** <button class="bluebutton">Edit</button></p>
+        <p style="width: 100%;">Date Display Preference: D/M/YY <button class="bluebutton">Edit</button></p>
+        <p style="width: 100%;">Time Display Preference: 12 Hour <button class="bluebutton">Edit</button></p>
+    </div>
+</div>
+<div class="content_special" style="align-content: flex-end; align-items: flex-start;">
+    <div class="content_special"
+        style="flex-wrap: wrap; flex-direction: column; width: 50%; align-content: flex-start;">
         <h3>Invite Keys</h3>
         <p>You can only create 1 invite every week. <br>Manage your keys and key history below.</p>
-        <p><button class="bluebutton"><a href="{{ route('key_index') }}" style="font-weight:normal;color:#fff">Create Invite Key</a></button></p>
+        <p><button class="bluebutton"><a href="{{ route('key_index') }}" style="font-weight:normal;color:#fff">Create
+                    Invite Key</a></button></p>
     </div>
-    <br>
-    <div style="flex-wrap: wrap; flex-direction: column;">
-        <h3>DANGER ZONE - These are inactive for now</h3>
-        <p>These buttons can fully delete data. Use with caution!</p>
-        <p><button class="redbutton" disabled>Delete Account</button> <button class="redbutton" disabled>Delete All Places</button> <button
-                class="redbutton" disabled>Delete All Avatar Items</button></p>
+    <div class="content_special"
+        style="flex-wrap: wrap; flex-direction: column; width: 50%; text-align: end; align-content: center;">
+        <h3>Theme</h3>
+        <p>Selected Theme: SKEUOMORPHIC</p>
+        <div class="content_special" style="width: 100%; flex-wrap: nowrap;">
+            <div class="custom-select" style="width: 90%;">
+                <select name="Theme" style="width: 100%;">
+                    <option value="SKEUO">SKEUOMORPHIC</option>
+                    <option value="FLAT">FLAT</option>
+                    <option value="2013">2013</option>
+                    <option value="2007">2007</option>
+                </select>
+            </div>
+            <button style="width: max-content;" class="greenbutton">Save</button>
+        </div>
     </div>
-@endsection
+</div>
+<br>
+<div style="flex-wrap: wrap; flex-direction: column;">
+    <h3>DANGER ZONE</h3>
+    <p style="color: darkred;">These are inactive for now.<br>In order to delete your account, please ask one of the Developers.</p>
+    <p>These buttons can fully delete data. Use with caution!</p>
+    <p>
+        <button class="redbutton" disabled>Delete Account</button> 
+        <button class="redbutton" disabled>Delete All Places</button> 
+        <button class="redbutton" disabled>Delete All Avatar Items</button>
+    </p>
+</div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/misc/tos.blade.php b/resources/views/misc/tos.blade.php
index 7f98a82..97e58ff 100644
--- a/resources/views/misc/tos.blade.php
+++ b/resources/views/misc/tos.blade.php
@@ -18,17 +18,17 @@
         <script src="{{ asset('js/main.js') }}"></script>
     </head>
     <body>
-        <ul></ul>
-        <ul></ul>
+        <br>
+        <br>
         <div id="logo_signup">
-            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
+            <a href="{{ route('index') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/ARCHBLOXarched.png') }}"
                 width="200" height="40" /></a>
             <p id="morbin">We're Still Morbin'</p>
         </div>
         <div class="content_signup">
             <h1>Terms of Service</h1>
             <p>Welcome to ARCHBLOX! Before playing, you'll need to know the rules to make sure you know what you can and can't do here.</p>
-            <ul></ul>
+            <br>
             <h2>Our Rules</h2>
             <h5>At the end of every rule there is a "()" section containing what the punishment is for breaking that rule.</h5>
             <p>&#x2022; Swearing is fine, but please do not say any racial or homophobic slurs. (Ban for few days, Termination)</p>
@@ -41,10 +41,10 @@
             <p>&#x2022; Exploiting is NOT allowed, unless you are testing it in your own game. (Termination)</p>
             <p>&#x2022; Do not ban evade. (Termination)</p>
             <p>&#x2022; Don't spam. (Warning, Ban for few days)</p>
-            <ul></ul>
+            <br>
             <h2>Asset Moderation</h2>
             <p>If we believe that any of your assets is breaking the rules, we will remove or change that Asset as required, and then take action onto your ARCHBLOX account.</p>
-            <ul></ul>
+            <br>
         </div>
         <div id="footer_signup">
             <p>ARCHBLOX is not affiliated with Roblox Corp, Lego, Sony, SEGA, Microsoft, Nintendo and Morbius. It's Morbin time!</p>
diff --git a/resources/views/pages/friends.blade.php b/resources/views/pages/friends.blade.php
new file mode 100644
index 0000000..c61739b
--- /dev/null
+++ b/resources/views/pages/friends.blade.php
@@ -0,0 +1,61 @@
+@extends('layouts.app')
+@section('title')
+<title>Friends - {{ env('APP_NAME') }}</title>
+@endsection
+
+@section('content')
+<h1 id="usernameframe">Friends</h1>
+<a href="#" class="tab_selected">All Friends</a>
+<a href="#" class="tab">Pending Requests</a>
+<br>
+<br>
+<form method="GET" action="{{ route('users') }}">
+    <p><input type="text" id="q" name="q" placeholder="Enter a Username..." value="{{ request()->q }}">
+        <button class="greybutton" type="submit">Search</button>
+    </p>
+</form>
+<br>
+<div class="content_special" id="FriendsContainer" style="flex-wrap: wrap;">
+    <div class="FriendsContainerBox" id="FriendsContainerBox1">
+        <div id="FriendsContainerBox1ImageContainer">
+            <a href=""><img alt="Profile Image" src="{{ asset('img/reviewpending.png') }}" width="60px"
+                    height="100%"></a>
+        </div>
+        <div id="FriendsContainerBox1TextContainer">
+            <a href="" id="FeedContainerBox1Username">BallsGamer123</a>
+            <p>"I'm new to ARCHBLOX!"</p>
+            <strong id="onlinestatus" class="onlinestatus_website">Website</strong>
+            <br>
+            <button class="redbutton">Unfriend</button>
+        </div>
+    </div>
+    <div class="FriendsContainerBox" id="FriendsContainerBox1">
+        <div id="FriendsContainerBox1ImageContainer">
+            <a href=""><img alt="Profile Image" src="{{ asset('img/reviewpending.png') }}" width="60px"
+                    height="100%"></a>
+        </div>
+        <div id="FriendsContainerBox1TextContainer">
+            <a href="" id="FeedContainerBox1Username">BallsGamer123</a>
+            <p>"I'm new to ARCHBLOX!"</p>
+            <strong id="onlinestatus" class="onlinestatus_website">Website</strong>
+            <br>
+            <button class="redbutton">Unfriend</button>
+        </div>
+    </div>
+    <div class="FriendsContainerBox" id="FriendsContainerBox1">
+        <div id="FriendsContainerBox1ImageContainer">
+            <a href=""><img alt="Profile Image" src="{{ asset('img/reviewpending.png') }}" width="60px"
+                    height="100%"></a>
+        </div>
+        <div id="FriendsContainerBox1TextContainer">
+            <a href="" id="FeedContainerBox1Username">BallsGamer123</a>
+            <p>"I'm new to ARCHBLOX!"</p>
+            <strong id="onlinestatus" class="onlinestatus_website">Website</strong>
+            <br>
+            <button class="redbutton">Unfriend</button>
+        </div>
+    </div>
+</div>
+
+<br>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/profile.blade.php b/resources/views/pages/profile.blade.php
index e8ac89d..b6e8382 100644
--- a/resources/views/pages/profile.blade.php
+++ b/resources/views/pages/profile.blade.php
@@ -1,53 +1,81 @@
 @extends('layouts.app')
 @section('title')
-    <title>{{ $data['user']->name }} - {{ env('APP_NAME') }}</title>
+<title>{{ $data['user']->name }} - {{ env('APP_NAME') }}</title>
 @endsection
 
 @section('content')
-    <div id="profiletopcontainer">
-        <h1 id="usernameframe">{{ $data['user']->name }}</h1>
-        @if (Cache::has('is_online_' . $data['user']->id))
-             <strong id="onlinestatus" class="onlinestatus_website">Website</strong>
-        @else
-             <strong id="onlinestatus" class="onlinestatus_offline">Offline - Last Online {{ Carbon\Carbon::parse($data['user']->last_seen)->diffForHumans() }}</strong>
-        @endif
-    </div>
-    <div id="content_special">
-        <div id="profileleftcontainer">
-            <p id="status">"I'm new to ARCHBLOX!"</p>
-            <img alt="profile image" src="{{ asset('img/reviewpending.png') }}" width="75%">
-            <p id="bio">{{ $data['user']->blurb }}</p>
-            <ul></ul>
-            <div id="stats">
-                <h3>Joined: {{ $data['user']->created_at->format('d/m/Y') }}</h3>
-                <p>(day/month/year)</p>
-                <h3>Place Visits: 0</h3>
-            </div>
-            <ul></ul>
-            <h2>Role</h2>
-            <div style="white-space:nowrap">
-                @foreach ($data['badges'] as $badge)
-                    @foreach ($data['user']->badges as $user_badge)
-                        @if ($badge->id == $user_badge)
-                        <div style="width:120px;display:inline-block">
-                            <img src="/img/badges/{{ $badge->id }}.png" width="75px" height="75px" />
-                            <h3>{{ $badge->title }}</h3>
-                        </div>
-                        @endif
-                    @endforeach
-                @endforeach
-            </div>
-            <ul></ul>
-            <h2>Badges</h2>
-            <p>This user has not collected any badges yet!</p>
+<div id="profiletopcontainer">
+    <h1 id="usernameframe">{{ $data['user']->name }}</h1>
+    @if (Cache::has('is_online_' . $data['user']->id))
+    <strong id="onlinestatus" class="onlinestatus_website">Website</strong>
+    @else
+    <strong id="onlinestatus" class="onlinestatus_offline">Offline - Last Online
+        {{ Carbon\Carbon::parse($data['user']->last_seen)->diffForHumans() }}</strong>
+    @endif
+    <br>
+    <a href="#"><button class="bluebutton">Add Friend</button></a>
+    <a href="#"><button class="greybutton">Message</button></a>
+</div>
+<div class="content_special">
+    <div id="profileleftcontainer">
+        <p id="status">"I'm new to ARCHBLOX!"</p>
+        <img alt="profile image" src="{{ asset('img/reviewpending.png') }}" width="75%">
+        <p id="bio">{{ $data['user']->blurb }}</p>
+        <br>
+        <div id="stats">
+            <h3>Joined: {{ $data['user']->created_at->format('d/m/Y') }}</h3>
+            <h3>Place Visits: 0</h3>
         </div>
-        <div id="profilerightcontainer">
-            <h2>Games</h2>
-            <p>This user hasn't made any games yet!</p>
-            <ul></ul>
-            <h2>Friends</h2>
-            <p>This user hasn't made friends with anyone!</p>
+        <br>
+        <h2>Role</h2>
+        <div style="white-space:nowrap">
+            @foreach ($data['badges'] as $badge)
+            @foreach ($data['user']->badges as $user_badge)
+            @if ($badge->id == $user_badge)
+            <div style="width:120px;display:inline-block">
+                <img src="/img/badges/{{ $badge->id }}.png" width="75px" height="75px" />
+                <h3>{{ $badge->title }}</h3>
+            </div>
+            @endif
+            @endforeach
+            @endforeach
         </div>
-        <ul></ul>
+        <br>
+        <h2>Badges</h2>
+        <p>This user has not collected any badges yet!</p>
     </div>
-@endsection
+    <div id="profilerightcontainer">
+        <div class="content_special" style="justify-content: center;">
+            <h2>Games </h2>
+            <a href="#" style="margin-left: 5px"> <button class="bluebutton" style="margin-top: 5px">View
+                    All</button></a>
+        </div>
+        <p>This user hasn't made any games yet!</p>
+        <br>
+        <div class="content_special" style="justify-content: center;">
+            <h2>Friends (1337)</h2>
+            <a href="{{ route('friends') }}" style="margin-left: 5px"> <button class="bluebutton"
+                    style="margin-top: 5px">View All</button></a>
+        </div>
+        <div id="profilefriendcontainer" class="content_special" style="flex-wrap: wrap; justify-content: center; flex-direction: row;">
+            <div class="profilefriend">
+            <a href="#"><img alt="Profile Image" src="{{ asset('img/reviewpending.png') }}" width="20%" height="100%"></a>
+            <br>
+            <a href="#" id="FeedContainerBox1Username">BallsGamer123</a>
+            </div>
+            <div class="profilefriend">
+            <a href="#"><img alt="Profile Image" src="{{ asset('img/reviewpending.png') }}" width="20%" height="100%"></a>
+            <br>
+            <a href="#" id="FeedContainerBox1Username">BallsGamer123</a>
+            </div>
+            <div class="profilefriend">
+            <a href="#"><img alt="Profile Image" src="{{ asset('img/reviewpending.png') }}" width="20%" height="100%"></a>
+            <br>
+            <a href="#" id="FeedContainerBox1Username">BallsGamer123</a>
+            </div>  
+        </div>
+        <p>This user hasn't made friends with anyone!</p>
+    </div>
+</div>
+<br>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/users.blade.php b/resources/views/pages/users.blade.php
index 016a340..8ef715d 100644
--- a/resources/views/pages/users.blade.php
+++ b/resources/views/pages/users.blade.php
@@ -11,14 +11,12 @@
     @else
         <h1 id="usernameframe">Users</h1>
     @endif
-    <ul></ul>
-    <ul></ul>
     <form method="GET" action="{{ route('users') }}">
         <p><input type="text" id="q" name="q" placeholder="Enter a Username..." value="{{ request()->q }}">
             <button class="greybutton" type="submit">Search</button>
         </p>
     </form>
-    <ul></ul>
+    <br>
     <div id="SearchContainer">
         @foreach ($users as $user)
             <div class="ProfileContainerBox" id="ProfileContainerBox1">
@@ -38,6 +36,6 @@
             </div>
         @endforeach
     </div>
-    <ul></ul>
+    <br>
     {{ $users->appends($_GET)->links() }}
 @endsection
diff --git a/routes/web.php b/routes/web.php
index a0dcee7..04058bf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -30,6 +30,7 @@ Route::middleware(['auth'])->group(function () {
     Route::get('/my/settings', [App\Http\Controllers\PageController::class, 'settings'])->name('settings');
     Route::get('/my/invites', [App\Http\Controllers\KeyController::class, 'index'])->name('key_index');
     Route::post('/my/invites', [App\Http\Controllers\KeyController::class, 'create'])->name('key_create');
+    Route::get('/my/friends', [App\Http\Controllers\PageController::class, 'friends'])->name('friends');
 });
 
 // Admin only