diff --git a/app.py b/app.py
index 86413cc..759ef86 100644
--- a/app.py
+++ b/app.py
@@ -48,21 +48,14 @@ def allDecks(username):
 @app.route("/<username>/<deckTitle>")
 def displayDeck(username, deckTitle):
     if username == "guest":
+
         # get the list of cards for the deck
         currentDeck = db.decks.find_one({"title": deckTitle})
         cardList = currentDeck['cards']
-        # generate a random index to generate a random card
-        index = random.randint(0, len(cardList)-1)
-        question = cardList[index]
-        # remove card to avoid repetition
-        cardList.pop(index) 
-
-        return render_template('card.html', deckTitle=deckTitle, question=question, username=username)
-
-        if 'add-card' in request.form:
-            return redirect('/username/deckTitle/add')
-        elif 'edit' in request.form:
-            return redirect('/username/deckTitle/index/add')
+
+        # TODO: shuffle cards
+
+        return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList)
     return "temp"
 
 @app.route("/<username>/create", methods=["POST"])
diff --git a/static/css/style.css b/static/css/style.css
index 76cca7e..62bbb15 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -10,12 +10,28 @@ h1 {
   font-size: 115px;
 }
 
+h2 {
+  color: #fafafa;
+  text-align: center;
+  font-size: 55px;
+}
+
 h3 {
   color: #e1948d;
   text-align: center;
   font-size: 55px;
 }
 
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  border-radius: .5rem;
+  background: #7F5F59;
+  margin-bottom: 10%; 
+}
+
 .main-deck h3,
 .personal-deck h3 {
   color: #FAFAFA;
@@ -46,6 +62,7 @@ h3 {
   aspect-ratio: 8 / 5;
   padding: 10px;
   margin-bottom: 10%; 
+  border-radius: .5rem;
 }
 
 .main-deck {
@@ -106,7 +123,7 @@ h3 {
   border: 1px solid #fafafa;
   border-radius: 4px;
   box-sizing: border-box;
-  color: #FAFAFA;
+  color: #463835;
   font-size: 40px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }
diff --git a/templates/card.html b/templates/card.html
index ea2aa3b..2eb58df 100644
--- a/templates/card.html
+++ b/templates/card.html
@@ -1,14 +1,37 @@
 {% extends 'base.html' %}
 
 {% block container %}
-<h3> {{ deckTitle }}</h3>
-<div class="card">
-    <h3>{{ question }}</h3>
-</div>
 
-<form class="vertical-align" method="post">
-    <button class="button2" type="submit" name="add-card">Add Card</button>
-    <button class="button2" type="submit" name="edit">Edit</button>
-</form>
+    <div class="box">
+        <h2> {{ deckTitle }}</h2>
+    </div>
+    
+    <div class="card">
+        <h3 id="next-question"> START </h3>
+    </div>
+
+
+    <a href="{{ url_for('addCard', username='guest', deckTitle=deckTitle) }}" style="text-decoration:none">
+        <button class="button2" >Add Card</button>
+    </a>
+    <a href="{{ url_for('editCard', username='guest', deckTitle=deckTitle, cardIndex=cardIndex ) }}" style="text-decoration:none">
+        <button class="button2">Edit</button>
+    </a>
+
+    <script>
+        const nextQuestion = document.querySelector("#next-question");
+        var cardIndex = 0;
+
+        var questions = '{{ cardList }}'
+        questions = questions.replaceAll("&#39;","\"")
+        var cardList = Array.from(JSON.parse(questions))
+
+        nextQuestion.addEventListener("click", function() {
+            nextQuestion.textContent = cardList[cardIndex];
+            cardIndex += 1;
+            console.log(cardIndex)
+        });
+    </script>
+
+{% endblock %}
 
-{% endblock %}
\ No newline at end of file
diff --git a/templates/decks.html b/templates/decks.html
index a7732a3..5e8735f 100644
--- a/templates/decks.html
+++ b/templates/decks.html
@@ -2,16 +2,20 @@
 
 {% block container %}
 
-{% for deck in mainDecks %}
-<div class="main-deck">
-    <a href="{{ url_for('displayDeck', username='guest', deckTitle=deck.title )}}"><h3>{{ deck.title }}</h3></a>
-</div>
-{% endfor %}
+    {% for deck in mainDecks %}
+        <a href="{{ url_for('displayDeck', username='guest', deckTitle=deck.title )}}" style="text-decoration:none">
+            <button class="main-deck">
+                <h3>{{ deck.title }}</h3>
+            </button>
+        </a>
+    {% endfor %}
 
-{% for deck in personalDecks %}
-<div class="personal-deck">
-    <a href="{{ url_for('home') }}"><h3>{{ deck.title }}</h3></a>
-</div>
-{% endfor %}
+    {% for deck in personalDecks %}
+        <a href="{{ url_for('home') }}" style="text-decoration:none">
+            <button class="personal-deck">
+                <h3>{{ deck.title }}</h3>
+            </button>
+        </a>
+    {% endfor %}
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 0bc1657..f2130c9 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -3,7 +3,7 @@
 {% block container %}
 
 <div class="card">
-    <form class="vertical-align" action={{url_for('login')}} method="post">
+    <form class="vertical-align" action="{{url_for('login')}}" method="post">
         <input class="user-input" type="username" name="username" placeholder="Username" required>
         <input class="user-input" type="password" name="password" placeholder="Password" required>
         {% if invalid_login %}