diff --git a/static/css/style.css b/static/css/style.css
index 62bbb15..59c6206 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -32,13 +32,23 @@ h3 {
   margin-bottom: 10%; 
 }
 
-.main-deck h3,
+.main-deck h3 {
+  color: #7F5F59;
+  text-align: center;
+  font-size: 55px;
+}
 .personal-deck h3 {
   color: #FAFAFA;
   text-align: center;
   font-size: 55px;
 }
 
+.add-deck h3 {
+  color: #FAFAFA;
+  text-align: center;
+  font-size: 150px; 
+}
+
 .card {
   display: flex;
   justify-content: center;
@@ -53,7 +63,8 @@ h3 {
 }
 
 .main-deck,
-.personal-deck {
+.personal-deck,
+.add-deck {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -70,7 +81,64 @@ h3 {
 }
 
 .personal-deck {
+  background: #e1948d;
+}
+
+.add-deck {
+  background: #7F5F59;
+
+}
+
+.add-deck-form {
+  position: fixed;
+  top: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  margin: auto;
+  width: 90%;
+  aspect-ratio: 8 / 5;
+  padding: 10px;
+  margin-bottom: 10%; 
+  border-radius: .5rem;
   background: #7F5F59;
+  text-align: center;
+}
+
+.add-deck-form input[type=submit] {
+  color: #63514F;
+  background: #D9D9D9;
+  text-align: center;
+  font-size: 55px; 
+  border-radius: .5rem;
+  padding: 40px;
+}
+
+.add-deck-form input[type=text] {
+  color: #63514F;
+  background: #D9D9D9;
+  text-align: center;
+  font-size: 55px; 
+  border-radius: .5rem;
+}
+
+.add-deck-form label {
+  color: #D9D9D9;
+  text-align: center;
+  font-size: 55px; 
+  border-radius: .5rem;
+}
+
+.add-deck-form p {
+  position: absolute;
+  top: .1rem;
+  left: 1rem;
+  color: #D9D9D9;
+  font-size: 55px; 
+  margin: 0;
 }
 
 .vertical-align {
diff --git a/templates/decks.html b/templates/decks.html
index 5e8735f..fa1fde5 100644
--- a/templates/decks.html
+++ b/templates/decks.html
@@ -17,5 +17,31 @@ <h3>{{ deck.title }}</h3>
             </button>
         </a>
     {% endfor %}
+    
+    <button class="add-deck">
+        <h3> + </h3>
+    </button>
+
+    <form action="/temp/create" method="post" class="add-deck-form" style="display: none">
+        <p>x</p>
+        <div>
+            <label for="title">Title: </label>
+            <input type="text" name="title" required>
+        </div>
+        <div>
+            <input type="submit" name="create" value="CREATE DECK" />
+        </div>
+    </form>
+
+    <script>
+        const addDeck = document.querySelector(".add-deck")
+        addDeck.addEventListener("click", function() {
+            document.querySelector(".add-deck-form").style.display="flex"
+        })
+        const exitAddDeck = document.querySelector(".add-deck-form p")
+        exitAddDeck.addEventListener("click", function() {
+            document.querySelector(".add-deck-form").style.display="none"
+        })
+    </script>
 
 {% endblock %}
\ No newline at end of file