diff --git a/assets/css/pretendo-progress.css b/assets/css/pretendo-progress.css
new file mode 100644
index 0000000..392e5fa
--- /dev/null
+++ b/assets/css/pretendo-progress.css
@@ -0,0 +1,44 @@
+section.bigCardWrapper.double {
+    display: flex;
+    flex-direction: row;
+    max-width: 80vw;
+    margin: auto;
+}
+section.bigCardWrapper.double > .bigCard {
+    flex: 1;
+    padding: 1em 6em;
+    margin: 0;
+}
+section.bigCardWrapper.double > .bigCard:first-child {
+    margin-right: 3em;
+}
+
+.listItem {
+    position: relative;
+}
+
+.listItem h2 {
+    font-size: 1rem;
+    color: #353535;
+    margin: 1em 0 0 0;
+}
+.listItem p {
+    margin: .2em 0 0 0;
+}
+
+.listItem.state1::before, .listItem.state2::before, .listItem.state3::before {
+    content: "";
+    position: absolute;
+    top: .2em;
+    left: -1.5em;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    background-color: #f57c7c; /* state 1: no support */
+}
+.listItem.state2::before {
+    background-color: #e6ae65; /* state 2: partial support/bugged */
+}
+.listItem.state3::before {
+    background-color: #58ef81; /* state 3: full support/working */
+}
\ No newline at end of file
diff --git a/views/progress.hbs b/views/progress.hbs
index 63019f7..9bf10ad 100644
--- a/views/progress.hbs
+++ b/views/progress.hbs
@@ -1,15 +1,44 @@
-<h1>progress summary</h1>
-<p>{{ summary }}</p>
-<br>
-<h2>game support</h2>
-{{#each games }}
-<strong>{{ this.title }}</strong>
-<p>{{ this.description }}</p>
-<p>state: {{ this.state }}</p>
-{{/each}}
-<br><br>
-<h2>backend support</h2>
-{{#each backends }}
-<strong>{{ this.title }}</strong>
-<p>{{ this.description }}</p>
-{{/each}}
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        {{> head-common }}
+        <!-- page specific -->
+        <link rel="stylesheet" href="/assets/css/pretendo-progress.css">
+    </head>
+    <body class="flex">
+        {{> nav-default }}
+        <div class="contentWrapper bgLinesSmall">
+            <div class="bgExtrude"></div>
+            <section class="bigCardWrapper">
+                <div class="bigCard">
+                    <p class="txt-highlight">Just to get it all together</p>
+				    <h1 class="txt-title">progress summary</h1>
+                    <p>{{ summary }}</p>
+                </div>
+            </section>
+            <section class="bigCardWrapper double">
+                <div class="bigCard">
+                    <p class="txt-highlight">The list you were looking for</p>
+				    <h1 class="txt-title">Game compatability</h1>
+                    {{#each games }}
+                    <div class="listItem state{{ this.state }}">
+                        <h2>{{ this.title }}</h2>
+                        <p>{{ this.description }}</p>
+                    </div>
+                    {{/each}}
+                </div>
+                <div class="bigCard">
+                    <p class="txt-highlight">The boring stuff for boring people</p>
+				    <h1 class="txt-title">Backend services</h1>
+                    {{#each backends }}
+                    <div class="listItem">
+                        <h2>{{ this.title }}</h2>
+                        <p>{{ this.description }}</p>
+                    </div>
+                    {{/each}}
+                </div>
+            </section>
+
+        {{> footer-default }}
+    </body>
+</html>
