diff --git a/17-results-summary-component-go/public/out.css b/17-results-summary-component-go/public/out.css
index 35a23b0..07567d6 100644
--- a/17-results-summary-component-go/public/out.css
+++ b/17-results-summary-component-go/public/out.css
@@ -556,6 +556,14 @@ video {
   height: 8rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -564,6 +572,10 @@ video {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -754,3 +766,82 @@ html {
 
   font-style: normal;
 }
+
+@media (min-width: 768px) {
+  .md\:h-44 {
+    height: 11rem;
+  }
+
+  .md\:h-\[500px\] {
+    height: 500px;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-44 {
+    width: 11rem;
+  }
+
+  .md\:w-\[715px\] {
+    width: 715px;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:justify-around {
+    justify-content: space-around;
+  }
+
+  .md\:rounded-3xl {
+    border-radius: 1.5rem;
+  }
+
+  .md\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .md\:pt-2 {
+    padding-top: 0.5rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .md\:shadow-light-lavender\/50 {
+    --tw-shadow-color: hsl(241 100% 89% / 0.5);
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+}
diff --git a/17-results-summary-component-go/templates/summary-component.gohtml b/17-results-summary-component-go/templates/summary-component.gohtml
index 1c23cd2..f43bf08 100644
--- a/17-results-summary-component-go/templates/summary-component.gohtml
+++ b/17-results-summary-component-go/templates/summary-component.gohtml
@@ -32,49 +32,62 @@
     </style>
   </head>
   <body>
-    <main>
-      <section
-        class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl from-light-royal-blue to-light-slate-blue"
+    <main class="grid place-items-center w-screen h-screen">
+      <article
+        class="flex flex-col w-full h-full md:flex-row md:bg-white md:rounded-3xl md:shadow-2xl md:shadow-light-lavender/50 md:w-[715px] md:h-[500px]"
       >
-        <h1 class="font-bold text-pale-blue">Your Result</h1>
-        <div
-          class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full from-violet-blue/60 to-persian-blue/75"
+        <section
+          id="results-pane"
+          class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl md:justify-around md:w-1/2 md:rounded-3xl from-light-royal-blue to-light-slate-blue"
         >
-          <span class="text-5xl font-extrabold">76</span>
-          <span class="text-pale-blue"> of 100 </span>
-        </div>
-        <div class="flex flex-col gap-y-3 items-center">
-          <h2 class="text-xl font-bold">Great</h2>
-          <p class="text-sm text-center text-pale-blue">
-            You scored higher than 65% of the people who have taken these tests.
-          </p>
-        </div>
-      </section>
-
-      <section class="flex flex-col gap-y-4 p-7">
-        <h2 class="font-bold">Summary</h2>
-        <dl class="flex flex-col gap-y-4">
-          {{ range . }}
+          <h1 class="font-bold md:pt-2 md:text-xl text-pale-blue">
+            Your Result
+          </h1>
           <div
-            class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
-            style="--summary-item-color-var: {{ .ColorHsl }}"
-            >
-            <img src="{{ .IconPath }}" alt="" class="pr-2" />
-            <dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
-            <dd class="flex flex-row">
-              <strong class="pr-2" >{{ .Score }}</strong>
-              <span class="text-dark-gray-blue">/ 100</span>
-            </dd>
+            class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full md:w-44 md:h-44 from-violet-blue/60 to-persian-blue/75"
+          >
+            <span class="text-5xl font-extrabold md:text-6xl">76</span>
+            <span class="text-pale-blue"> of 100 </span>
           </div>
-          {{ end }}
-        </dl>
-        <a
-          href="/"flex flex-row
-          class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
+          <div class="flex flex-col gap-y-3 items-center">
+            <h2 class="text-xl font-bold md:text-2xl">Great</h2>
+            <p class="text-sm text-center md:text-base text-pale-blue">
+              You scored higher than 65% of the people who have taken these
+              tests.
+            </p>
+          </div>
+        </section>
+
+        <section
+          id="summary-pane"
+          class="flex flex-col gap-y-4 p-7 md:justify-around md:px-8 md:w-1/2"
         >
-          Continue
-        </a>
-      </section>
+          <h2 class="font-bold md:text-xl">Summary</h2>
+          <dl class="flex flex-col gap-y-4">
+            {{ range . }}
+            <div
+              class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
+              style="--summary-item-color-var: {{ .ColorHsl }}"
+            >
+              <img src="{{ .IconPath }}" alt="" class="pr-2" />
+              <dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
+              <dd class="flex flex-row">
+                <strong class="pr-2">{{ .Score }}</strong>
+                <span class="text-dark-gray-blue">/ 100</span>
+              </dd>
+            </div>
+            {{ end }}
+          </dl>
+          <a
+            href="/"
+            flex
+            flex-row
+            class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
+          >
+            Continue
+          </a>
+        </section>
+      </article>
     </main>
     <footer class="fixed inset-x-0 bottom-1 attribution">
       Challenge by
