diff --git a/web/src/lib/Question.ts b/web/src/lib/Question.ts
new file mode 100644
index 0000000..a696cf7
--- /dev/null
+++ b/web/src/lib/Question.ts
@@ -0,0 +1,10 @@
+export default class Question {
+  public description: string;
+  public choices: Choice[];
+  public concepts: string[];
+};
+
+export class Choice {
+  public text: string;
+  public correct: boolean;
+};
diff --git a/web/src/lib/QuizBox.svelte b/web/src/lib/QuizBox.svelte
index 1f75ebb..10d8c98 100644
--- a/web/src/lib/QuizBox.svelte
+++ b/web/src/lib/QuizBox.svelte
@@ -1,16 +1,45 @@
 <script lang="ts">
+  import type Question from "$lib/Question";
+
+  export let question: Question = {
+    description: `
+      what is 1 + 1?
+    `,
+    concepts: [ "addition" ],
+    choices: [
+      { text: "1", correct: false },
+      { text: "2", correct: true },
+      { text: "3", correct: false },
+    ],
+  };
+
   let state = "ask";
+  let wasCorrect = false;
+
+  let choose = (index: number) => {
+    state = "answer";
+    wasCorrect = question.choices[index].correct;
+  };
 </script>
 
 <div class="quiz-box">
   {#if state == "ask" }
     <small>Q:</small>
-    <p>what is 1 + 1?</p>
+    <p>{ question.description }</p>
     <ul>
+      {#each question.choices as choice, index }
+        <li>
+          <button on:click={() => choose(index)}>{ choice.text }</button>
+        </li>
+      {/each}
     </ul>
   {:else}
     <small>A:</small>
-    <p>you Got it!</p>
+    {#if wasCorrect }
+      <p>you Got it!</p>
+    {:else}
+      <p>you Failed</p>
+    {/if}
   {/if}
 </div>
 
diff --git a/web/src/routes/__layout.svelte b/web/src/routes/__layout.svelte
index 953065c..d4f8c7f 100644
--- a/web/src/routes/__layout.svelte
+++ b/web/src/routes/__layout.svelte
@@ -1,15 +1,40 @@
-<div id="app">
+<div id="app" class="container">
   <header class="header">
     <div class="brand"><a href="/">Edu</a></div>
     <nav class="header-nav">
-      <ul class="list">
+      <ul class="list list-reset">
         <li><a href="/">Home</a></li>
+        <li><a href="/learn">Learn</a></li>
+        <li><a href="/browse">Browse</a></li>
         <li><a href="/login">Login</a></li>
       </ul>
     </nav>
   </header>
 
   <slot></slot>
+
+  <footer class="footer">
+    <div class="footer-blocks">
+      <div class="footer-block">
+        <div class="footer-block-title">For Students</div>
+        <ul class="list-reset">
+          <li><a href="/about">Edu</a></li>
+          <li><a href="/about">Edu</a></li>
+          <li><a href="/about">Edu</a></li>
+          <li><a href="/about">Edu</a></li>
+        </ul>
+      </div>
+      <div class="footer-block">
+        <div class="footer-block-title">About Us</div>
+        <ul class="list-reset">
+          <li><a href="/about">About Me</a></li>
+          <li><a href="/about">About Me</a></li>
+          <li><a href="/about">About Me</a></li>
+          <li><a href="/about">About Me</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
 </div>
 
 <style lang="scss" scoped>
@@ -17,6 +42,34 @@
   font-family: sans-serif;
 }
 
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 768px) {
+  .container {
+    width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .container {
+    width: 1170px;
+  }
+}
+
+.list-reset {
+  list-style: none;
+  padding: 0;
+  justify-content: flex-end;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -37,10 +90,6 @@
       white-space: nowrap;
       margin-bottom: 0;
 
-      list-style: none;
-      padding: 0;
-      justify-content: flex-end;
-
       li {
         margin: 0;
         box-sizing: inherit;
@@ -55,4 +104,32 @@
     }
   }
 }
+
+.footer {
+  .footer-blocks {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -24px;
+    margin-left: -24px;
+    margin-top: -12px;
+
+    .footer-block {
+      flex-grow: 1;
+      flex-basis: 160px;
+      box-sizing: content-box;
+      padding: 12px 24px;
+
+      .footer-block-title {
+        text-transform: uppercase;
+        font-weight: bold;
+        line-height: 22px;
+      }
+
+      a {
+        color: lighten(black, 20%);
+        text-decoration: none;
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/routes/index.svelte b/web/src/routes/index.svelte
index 7b1f552..2fbada6 100644
--- a/web/src/routes/index.svelte
+++ b/web/src/routes/index.svelte
@@ -5,3 +5,7 @@
 <h1>Learn by mastery</h1>
 
 <QuizBox />
+
+<p>
+yadda yadda yadda what's unique about this mastery based learning appraoch
+</p>