diff --git a/.gitignore b/.gitignore
index bf8d8cd..94dd016 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 venv/
 __pycache__/
-db/
\ No newline at end of file
+db/
+staticfiles/
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 0be33c4..485ea36 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,7 +12,8 @@
             "args": [
                 "test",
             ],
-            "django": true
+            "django": true,
+            "preLaunchTask": "Migrate"
         },
         {
             "name": "Run Server",
@@ -23,7 +24,8 @@
                 "runserver",
                 "--noreload"
             ],
-            "django": true
+            "django": true,
+            "preLaunchTask": "Migrate"
         }
     ]
 }
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..1a2588e
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,24 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Collect Static",
+            "command": "venv/bin/python manage.py collectstatic --no-input",
+            "type": "shell",
+            "presentation": {
+                "reveal": "always"
+            },
+            "group": "build"
+        },
+        {
+            "dependsOn": "Collect Static",
+            "label": "Migrate",
+            "command": "venv/bin/python manage.py migrate",
+            "type": "shell",
+            "presentation": {
+                "reveal": "always"
+            },
+            "group": "build"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/ui/static/ui/achievement.css b/ui/static/ui/achievement.css
index 5536e9a..6007700 100644
--- a/ui/static/ui/achievement.css
+++ b/ui/static/ui/achievement.css
@@ -1,11 +1,11 @@
 .achievement {
-    width: 100%;
+    position: absolute;
     height: 100%;
-    text-align: center;
+    width: 100%;
+    display: flex;
     justify-content: center;
     align-items: center;
-    display: flex;
-    position: absolute;
+    z-index: -1;
 }
 
 .achievement-animate {
@@ -14,6 +14,12 @@
     animation-fill-mode: forwards;
 }
 
+.achievements-list {
+    height: 100%;
+    overflow: auto;
+    text-align: center;
+}
+
 .achievement-text {
     font-size: 4rem;
 }
diff --git a/ui/static/ui/button.css b/ui/static/ui/button.css
index 7d55d8b..6581a8f 100644
--- a/ui/static/ui/button.css
+++ b/ui/static/ui/button.css
@@ -1,18 +1,26 @@
 html, body { 
     height: 100%;
     width: 100%;
-    position: fixed;
-    overflow: hidden;
 }
 
 .section, .container {
     height: 100%;
 }
 
-.container {
+.columns {
+    width: 100%;
+    height: 100%;
+}
+
+.button-column {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     text-align: center;
+    height: 100%;
+}
+
+.button-container {
+    position: absolute;
 }
\ No newline at end of file
diff --git a/ui/static/ui/button.js b/ui/static/ui/button.js
index d0cbfcd..8fbd856 100644
--- a/ui/static/ui/button.js
+++ b/ui/static/ui/button.js
@@ -3,43 +3,20 @@ const button = document.getElementById("BUTTON");
 const count = document.getElementById("COUNT");
 const button_container = document.getElementById("button-container");
 const achievement = document.getElementById("achievement");
-
-const achievements = {
-    1: "Clicked!",
-    2: "Clicked Twice!",
-    4: "2^2",
-    8: "2^3",
-    16: "2^4",
-    32: "2^5",
-    64: "2^6",
-    69: "Nice",
-    100: "one hundred",
-    128: "2^7",
-    200: "two hundred",
-    250: "quarter thousand",
-    256: "2^8",
-    420: "Blaze it",
-    500: "half thousand",
-    512: "2^9",
-    1000: "one thousand",
-    1024: "2^10",
-    2048: "2048!",
-    2500: "Keep going!",
-    4096: "2^11",
-    5000: "halfway to ten thousand"
-}
+const achievement_list = document.getElementById("achievement-list")
 
 function add_achievement(text) {
-    achievement.querySelector(".achievement-text").innerText = text;
-    achievement.classList.remove("achievement-animate");
-    void achievement.offsetWidth;
-    achievement.classList.add("achievement-animate");
-}
+    if (text != undefined) {
+        achievement.querySelector(".achievement-text").innerText = text;
+        achievement.classList.remove("achievement-animate");
+        void achievement.offsetWidth;
+        achievement.classList.add("achievement-animate");
 
-function check_achievement(count) {
-    current_achievement = achievements[Number(count)]
-    if (current_achievement != undefined) {
-        add_achievement(current_achievement)
+        var elem = document.createElement("div");
+        elem.innerText = text;
+        achievement_list.appendChild(elem);
+
+        achievement_list.scrollTo(0, achievement_list.scrollHeight);
     }
 }
 
@@ -59,7 +36,7 @@ button.addEventListener("click", event => {
         })
         .then((data) => {
             count.innerText = data.pressed;
-            check_achievement(data.pressed);
+            add_achievement(data.achievement);
         }).finally(() => {
             button.disabled = false;
             button.classList.remove("is-loading");
diff --git a/ui/templates/ui/button.html b/ui/templates/ui/button.html
index 5254704..c6f15ff 100644
--- a/ui/templates/ui/button.html
+++ b/ui/templates/ui/button.html
@@ -14,21 +14,33 @@
 
 {% block body %}
 <section class="section">
-    <div id = "button-container" class="container">
-        <div id = "achievement" class="achievement">
+    <div class="columns">
+        <div class="column">
+        </div>
+        <div class="button-column column">
             <div>
-                <div class="achievement-text"></div>
+                <h1 class="title">
+                    The Button
+                </h1>
+                <button class="button is-primary" id="BUTTON">Press</button>
+            </div>
+            <div><br></div>
+            <div>
+                <h1 class="title" id="COUNT">{{ pressed }}</h1>
+            </div>
+            <div id="achievement" class="achievement">
+                <div>
+                    <div class="achievement-text"></div>
+                </div>
             </div>
         </div>
-        <div>
-            <h1 class="title">
-                The Button
-            </h1>
-            <button class="button is-primary" id="BUTTON">Press</button>
-        </div>
-        <div><br></div>
-        <div>
-            <h1 class="title" id="COUNT">{{ pressed }}</h1>
+        <div class="column achievment-column">
+            <div class="achievements-list" id="achievement-list">
+                <h1 class="title">Achievements</h1>
+                {% for key,value in achievement.items %}
+                <div>{{ value }}</div>
+                {% endfor %}
+            </div>
         </div>
     </div>
 </section>
diff --git a/ui/tests.py b/ui/tests.py
index c5c5eec..dd7dbb1 100644
--- a/ui/tests.py
+++ b/ui/tests.py
@@ -1,5 +1,5 @@
 from django.contrib.auth.models import AnonymousUser, User
-from django.test import RequestFactory, TestCase
+from django.test import RequestFactory, TestCase, Client
 
 from .views import button
 
@@ -11,23 +11,31 @@ class SimpleTest(TestCase):
             username='testuser', email='test@test.test', password='testpass')
 
     def test_button(self):
-        # Create an instance of a GET request.
-        request = self.factory.get('/snippets')
-        request.user = self.user
-        request.session = self.client.session
-        response = button(request)
+        # Test initial load
+        c = Client()
+        response = c.get('/button')
+        self.assertEqual(response.status_code, 301)
+        response = c.get('/button/')
         self.assertEqual(response.status_code, 200)
-        
-        request = self.factory.post(
-            '/button',
-            data={},
-            content_type='application/json'
-        )
-        request.session = self.client.session
-        response = button(request)
-        self.assertEqual(response.status_code, 200)
-        self.assertEqual(request.session.get('pressed'), 1)
+        self.assertEqual(response.context.get("achievement"), {})
 
-        response = button(request)
+        # Test first achievement
+        response = c.post('/button/', {})
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(request.session.get('pressed'), 2)
\ No newline at end of file
+        self.assertEqual(response.json().get("pressed"), 1)
+        self.assertEqual(response.json().get("achievement"), "Clicked!")
+        self.assertEqual(c.session.get('pressed'), 1)
+
+        # Test second achievement
+        response = c.post('/button/', {})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json().get("pressed"), 2)
+        self.assertEqual(response.json().get("achievement"), "Clicked Twice!")
+        self.assertEqual(c.session.get('pressed'), 2)
+
+        # Test no achievement
+        response = c.post('/button/', {})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json().get("pressed"), 3)
+        self.assertEqual(response.json().get("achievement"), None)
+        self.assertEqual(c.session.get('pressed'), 3)
\ No newline at end of file
diff --git a/ui/views.py b/ui/views.py
index aef4e1d..985ed0b 100644
--- a/ui/views.py
+++ b/ui/views.py
@@ -1,8 +1,61 @@
 from django.shortcuts import render
 from django.http import JsonResponse
 
+achievements = {
+    1: "Clicked!",
+    2: "Clicked Twice!",
+    4: "2^2",
+    8: "2^3",
+    16: "2^4",
+    24: "I'm that old",
+    32: "2^5",
+    64: "2^6",
+    69: "Nice",
+    100: "one hundred",
+    128: "2^7",
+    200: "two hundred",
+    250: "quarter thousand",
+    256: "2^8",
+    300: "three hundred",
+    400: "four hundred",
+    420: "Blaze it",
+    500: "half thousand",
+    512: "2^9",
+    600: "six hundred",
+    700: "seven hundred",
+    800: "eight hundred",
+    900: "nine hundred",
+    1000: "full thousand",
+    1024: "2^10",
+    1776: "America",
+    1914: "Some War here",
+    1938: "Some more war here",
+    1950: "Lots of war in here",
+    2000: "Computers die",
+    2008: "Houses die",
+    2019: "People die",
+    2048: "2048!",
+    2500: "Keep going!",
+    3000: "three thousand",
+    4000: "four thousand",
+    4096: "2^11",
+    5000: "halfway to ten thousand",
+    10001: "ten thousand one",
+    100000: "one hundred thousand",
+    1000000: "one million?",
+    10000000: "ten millions???",
+    100000000: "one hundo billion",
+    1000000000: "JK this is actually a billion though",
+    10000000000: "I'm not going to create another achievement",
+    100000000000: "one hundred billion",
+    1000000000000: "It's physically impossible to click this high"
+}
+
+
 def button(request):
     PRESSED = 'pressed'
+    ACHIEVE = 'achievement'
+
     try:
         request.session[PRESSED]
     except KeyError:
@@ -10,5 +63,14 @@ def button(request):
 
     if request.method == "POST":
         request.session[PRESSED] += 1
-        return JsonResponse({PRESSED: request.session[PRESSED]})
-    return render(request, "ui/button.html", {PRESSED: request.session[PRESSED]})
\ No newline at end of file
+        response = {
+            PRESSED: request.session[PRESSED],
+            ACHIEVE: achievements.get(request.session[PRESSED])
+        }
+        return JsonResponse(response)
+
+    pressed = request.session[PRESSED]
+    response = {PRESSED: pressed}
+    achieved = {k:v for k,v in achievements.items() if k <= pressed}
+    response.update({ACHIEVE: achieved})
+    return render(request, "ui/button.html", response)
\ No newline at end of file