diff --git a/abi/bubble.svg b/abi/bubble.svg
new file mode 100644
index 0000000..8303edf
--- /dev/null
+++ b/abi/bubble.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <path d="M 81.7 21.7 L 18.2 21.7 C 12.9 21.7 8.6 26 8.6 31.3 L 8.6 69.4 C 8.6 74.7 12.9 79 18.2 79 L 24.9 79 L 30.8 86.9 C 31.2 87.4 32.5 88.9 34.5 88.9 C 35.4 88.9 36.8 88.5 38.1 86.8 L 44 79 L 81.7 79 C 87 79 91.3 74.7 91.3 69.4 L 91.3 31.4 C 91.3 26.1 87 21.7 81.7 21.7 Z M 87.6 69.5 C 87.6 72.8 84.9 75.4 81.7 75.4 L 43 75.4 C 42.4 75.4 41.9 75.7 41.5 76.1 L 35.1 84.7 C 34.7 85.2 34.5 85.3 34.5 85.3 C 34.4 85.3 34 85 33.8 84.7 L 27.4 76.1 C 27.1 75.6 26.5 75.4 25.9 75.4 L 18.3 75.4 C 15 75.4 12.4 72.7 12.4 69.5 L 12.4 31.4 C 12.4 28.1 15.1 25.5 18.3 25.5 L 81.8 25.5 C 85.1 25.5 87.7 28.2 87.7 31.4 L 87.7 69.5 L 87.6 69.5 Z"/>
+</svg>
\ No newline at end of file
diff --git a/abi/index.html b/abi/index.html
index ccad602..ad49834 100644
--- a/abi/index.html
+++ b/abi/index.html
@@ -14,6 +14,41 @@
         </script>
     </head>
     <body>
-        Abi!
+
+        <div id="screen-buttons" class="screen hide">
+
+            <button class="main-button" id="do-legs">Do Legs Workout</button>
+            <button class="main-button" id="do-arms">Do Arms Workout</button>
+            <button class="main-button" id="do-random">Do Random Workout</button>
+            <button class="main-button" id="view-log">View Workout Log</button>
+
+        </div>
+
+        <div id="screen-workout" class="screen hide">
+
+            <div id="clock">15:00</div>
+            <div id="comments"></div>
+
+            <div class="workout-canvas">
+                <img class="bubble" src="bubble.svg" />
+                <div class="bubble-text-container">
+                    <div id="bubble-text">Get ready...</div>
+                </div>
+                <div id="stick-figure"></div>
+            </div>
+            
+            <button id="cancel">Cancel</button>
+
+        </div>
+
+        <div id="screen-log" class="screen">
+
+            <div class="screen-heading">Workout Log</div>
+            <div id="log-details"></div>
+
+            <button id="back">Back</button>
+
+        </div>
+
     </body>
 </html>
diff --git a/abi/main.css b/abi/main.css
index df7f341..81decc2 100644
--- a/abi/main.css
+++ b/abi/main.css
@@ -1,3 +1,113 @@
 body {
-    font-size: 50px;
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
+}
+
+.screen {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+}
+
+#screen-workout {
+    justify-content: center;
+}
+
+.hide {
+    display: none;
+}
+
+button {
+    padding: 30px;
+    margin: 5px;
+}
+
+.main-button {
+    height: 100px;
+    width: 400px;
+    max-width: calc(100vw - 40px);
+}
+
+#view-log {
+    height: 50px;
+}
+
+#clock {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    border: 1px solid red;
+    color: black;
+    line-height: 50px;
+    padding: 0 20px;
+    border-radius: 5px;
+}
+
+#comments {
+    position: absolute;
+    top: 90px;
+    right: 20px;
+    max-width: 150px;
+}
+
+.workout-canvas {
+    position: relative;
+    align-self: center;
+    width: 300px;
+    height: 500px;
+    border-bottom: 1px solid black;
+    background: rgb(0 0 0/.05);
+}
+
+.bubble {
+    position: absolute;
+    top: -40px;
+    left: 60px;
+    width: 250px;
+    z-index: 1;
+}
+
+.bubble-text-container {
+    position: absolute;
+    top: 25px;
+    left: 90px;
+    width: 190px;
+    height: 124px;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#stick-figure {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+#cancel, #back {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+.screen-heading {
+    font-size: 30px;
+    margin: 20px 0 10px;
+}
+
+#stick-figure {
+    white-space: pre;
+    font-family: monospace;
+    font-size: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
 }
\ No newline at end of file
