diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 5287f93..409a4a0 100644
--- a/app/Http/Controllers/PageController.php
+++ b/app/Http/Controllers/PageController.php
@@ -99,4 +99,9 @@ class PageController extends Controller
     {
         return view('pages.incomplete');
     }
+
+    public function styleguide()
+    {
+        return view('pages.styleguide');
+    }
 }
diff --git a/resources/views/pages/styleguide.blade.php b/resources/views/pages/styleguide.blade.php
new file mode 100644
index 0000000..d2d53b5
--- /dev/null
+++ b/resources/views/pages/styleguide.blade.php
@@ -0,0 +1,53 @@
+@extends('layouts.app')
+@section('title')
+    <title>StyleGuide - {{ env('APP_NAME') }}</title>
+@endsection
+
+@section('content')
+    <h1 id="usernameframe">StyleGuide</h1>
+    <p>This is a page explaining and showing how the CSS works for this site.</p>
+    <br>
+    <h4>Buttons</h4>
+    <p>Buttons.. Don't you like them? They're used for most things that you need to click that aren't links.</p>
+    <br>
+    <button class="greenbutton">.greenbutton</button>
+    <button class="bluebutton">.bluebutton</button>
+    <button class="redbutton">.redbutton</button>
+    <button class="greenbutton">.greenbutton</button>
+    <br>
+    <h4>Tabs</h4>
+    <p>These are used on pages that have sub-pages. These look similar to buttons, but they're not rounder.</p>
+    <br>
+    <a href="#" class="tab_selected">.tab_selected</a>
+    <a href="#" class="tab">.tab</a>
+    <br>
+    <h4>content_special<h4>
+    <p>A div that is used for organising contents using display: inline-flex.</p>
+    <br>
+    <div class="content_special">
+        <p>Hello i'm some text</p>
+        <img src="{{ asset('img/reviewpending.png') }}">
+        <p>AAAAAAAAAAAAAAAAAAA</p>
+    </div>
+    <br>
+    <h4>Feed, FeedContainer, FeedContainerBox, FeedContainerBoxImageContainer, FeedContainerBoxTextContainer, FeedContainerBox1Username, FeedContainerBox1Text, FeedContainerBox1Timestamp</h4>
+    <p>The boxes containing the content of My Feed.</p>
+    <div id="Feed">
+        <p>#Feed</p>
+        <div id="FeedContainer">
+            <p>#FeedContainer</p>
+            <div class="FeedContainerBox">
+                .FeedContainerBox
+                <div class="FeedContainerBoxImageContainer">
+                    <p>.FeedContainerBoxImageContainer</p>
+                </div> 
+                <div class="FeedContainerBoxTextContainer">
+                    <p>.FeedContainerBoxTextContainer</p>
+                    <p id="FeedContainerBox1Username">#FeedContainerBox1Username<p>
+                    <p id="FeedContainerBox1Text">#FeedContainerBox1Text<p>
+                    <p id="FeedContainerBox1Timestamp">#FeedContainerBox1Timestamp<p>
+                </div> 
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/routes/web.php b/routes/web.php
index edc359e..102a3d8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -41,6 +41,7 @@ Route::middleware(['auth'])->group(function () {
     Route::post('/my/settings/change', [App\Http\Controllers\SettingController::class, 'change_settings'])->name('change_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('/styleguide', [App\Http\Controllers\KeyController::class, 'styleguide'])->name('styleguide');
 
     // Incomplete Pages Placeholder -- Replace/Remove these when they are added
     Route::get('/incomplete', [App\Http\Controllers\PageController::class, 'incomplete'])->name('incomplete');