diff --git a/12-order-summary-component-thymeleaf/src/input.css b/12-order-summary-component-thymeleaf/src/input.css
index 55cc701..0a077a8 100644
--- a/12-order-summary-component-thymeleaf/src/input.css
+++ b/12-order-summary-component-thymeleaf/src/input.css
@@ -5,3 +5,7 @@
 html {
     font-size: 16px;
 }
+
+/* div, p, button { */
+/*     outline: 1px solid red; */
+/* } */
diff --git a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
index a618370..b636ae9 100644
--- a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
@@ -1,39 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- displays site properly based on user's device -->
 
-  <link rel="icon" type="image/png" sizes="32x32" href="./public/images/favicon-32x32.png">
-  <link href="/dist/output.css" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./public/images/favicon-32x32.png"
+    />
+    <link href="/dist/output.css" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap"
+      rel="stylesheet"
+    />
 
-  <title>Frontend Mentor | Order summary card</title>
+    <title>Frontend Mentor | Order summary card</title>
 
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
-</head>
-<body>
+    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
+    <style>
+      .attribution {
+        font-size: 11px;
+        text-align: center;
+      }
+      .attribution a {
+        color: hsl(228, 45%, 44%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- too bad that images in TailwindCSS classes are referenced from output.css -->
+    <div
+      class="bg-[url('../public/images/pattern-background-mobile.svg')] fixed h-screen w-screen bg-no-repeat bg-contain md:bg-[url('../public/images/pattern-background-desktop.svg')]"
+    ></div>
+    <!-- main container -->
+    <div class="bg-pale-blue w-screen h-screen grid place-content-center">
+      <div
+        class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px]"
+      >
+        <img src="public/images/illustration-hero.svg" class="rounded-t-xl w-full" />
+        <h1 class="text-xl font-extrabold my-7">Order Summary</h1>
 
-  Order Summary
+        <p class="text-center text-desaturated-blue px-8 mb-5">
+          You can now listen to millions of songs, audiobooks, and podcasts on
+          any device anywhere you like!
+        </p>
 
-  You can now listen to millions of songs, audiobooks, and podcasts on any 
-  device anywhere you like!
+        <div
+          class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row"
+        >
+          <img src="public/images/icon-music.svg">
+          <div class="flex flex-col grow pl-3 justify-center">
+            <p class="font-bold text-sm text-dark-blue">Annual Plan</p>
+            <p class="text-desaturated-blue text-sm">$59.99/year</p>
+          </div>
+          <button
+            class="underline text-xs text-bright-blue font-bold"
+          >Change</button>
+        </div>
 
-  Annual Plan
-  $59.99/year
+        <button
+          class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)]"
+        >Proceed to Payment</button>
+        <button class="text-desaturated-blue font-bold">Cancel Order</button>
+      </div>
+    </div>
 
-  Change
-
-  Proceed to Payment
-  Cancel Order
-  
-  <div class="attribution">
-    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
-  </div>
-</body>
+    <div class="attribution fixed bottom-0 inset-x-0">
+      Challenge by
+      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
+        >Frontend Mentor</a
+      >. Coded by <a href="#">Your Name Here</a>.
+    </div>
+  </body>
 </html>
diff --git a/12-order-summary-component-thymeleaf/tailwind.config.js b/12-order-summary-component-thymeleaf/tailwind.config.js
index 80cf5cc..31d01a6 100644
--- a/12-order-summary-component-thymeleaf/tailwind.config.js
+++ b/12-order-summary-component-thymeleaf/tailwind.config.js
@@ -14,9 +14,7 @@ module.exports = {
         'sans': ['Red Hat Display', 'sans-serif'], // This will set Roboto as the default sans font
       },
       fontWeight: {
-        'thin': 100,
-        'normal': 400,
-        'semibold': 600,
+        'normal': 500,
         'bold': 700,
         'extrabold': 900,
       }
diff --git a/flake.nix b/flake.nix
index a1c413d..a886be6 100644
--- a/flake.nix
+++ b/flake.nix
@@ -22,6 +22,7 @@
             pkgs.sbt
             pkgs.scalafmt
             pkgs.nodePackages.tailwindcss
+            pkgs.nodePackages.prettier
             pkgs.jdk
           ];
         };
