diff --git a/15-multi-step-form/src/main/resources/public/out.css b/15-multi-step-form/src/main/resources/public/out.css
index 5c5883f..c75317f 100644
--- a/15-multi-step-form/src/main/resources/public/out.css
+++ b/15-multi-step-form/src/main/resources/public/out.css
@@ -669,6 +669,16 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-magnolia {
+  --tw-bg-opacity: 1;
+  background-color: hsl(217 100% 97% / var(--tw-bg-opacity));
+}
+
+.bg-alabaster {
+  --tw-bg-opacity: 1;
+  background-color: hsl(231 100% 99% / var(--tw-bg-opacity));
+}
+
 .bg-sidebar-mobile {
   background-image: url("images/bg-sidebar-mobile.svg");
 }
@@ -677,6 +687,10 @@ video {
   background-repeat: no-repeat;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -692,6 +706,34 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -702,10 +744,19 @@ video {
   line-height: 1.25rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -715,6 +766,26 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-cool-gray {
+  --tw-text-opacity: 1;
+  color: hsl(231 11% 63% / var(--tw-text-opacity));
+}
+
+.text-marine-blue {
+  --tw-text-opacity: 1;
+  color: hsl(213 96% 18% / var(--tw-text-opacity));
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-xl {
+  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 html {
   font-size: 16px;
 }
@@ -763,6 +834,16 @@ html {
 
 /* } */
 
+.placeholder\:text-cool-gray::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: hsl(231 11% 63% / var(--tw-text-opacity));
+}
+
+.placeholder\:text-cool-gray::placeholder {
+  --tw-text-opacity: 1;
+  color: hsl(231 11% 63% / var(--tw-text-opacity));
+}
+
 @media (min-width: 768px) {
   .md\:row-span-2 {
     grid-row: span 2 / span 2;
diff --git a/15-multi-step-form/src/main/resources/templates/step1.html b/15-multi-step-form/src/main/resources/templates/step1.html
index 32cfc04..d963b31 100644
--- a/15-multi-step-form/src/main/resources/templates/step1.html
+++ b/15-multi-step-form/src/main/resources/templates/step1.html
@@ -26,7 +26,7 @@
       }
     </style>
   </head>
-  <body class="grid place-content-center h-screen bg-light-gray">
+  <body class="grid place-content-center h-screen bg-magnolia">
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -90,17 +90,38 @@
       </summary>
       <section
         id="multipage-form-container"
-        class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:mt-0"
+        class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:mt-0 drop-shadow-xl"
       >
         <!-- Step 1 start -->
-        <h1>Personal info</h1>
-        <p>Please provide your name, email address, and phone number.</p>
-        <label for="name">Name</label>
-        <input id="name" placeholder="e.g. Stephen King" />
-        <label for="email">Email Address</label>
-        <input id="email" placeholder="e.g. stephenking@lorem.com" />
-        <label for="phone">Phone Number</label>
-        <input id="phone" placeholder="e.g. +1 234 567 890 Next Step" />
+        <h1 class="text-2xl font-bold text-marine-blue">Personal info</h1>
+        <p class="py-3 text-cool-gray">
+          Please provide your name, email address, and phone number.
+        </p>
+        <label for="name" class="pt-3 text-sm text-marine-blue">Name</label>
+        <input
+          id="name"
+          type="text"
+          placeholder="e.g. Stephen King"
+          class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
+        />
+        <label for="email" class="pt-3 text-sm text-marine-blue"
+          >Email Address</label
+        >
+        <input
+          id="email"
+          type="email"
+          placeholder="e.g. stephenking@lorem.com"
+          class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
+        />
+        <label for="phone" class="pt-3 text-sm text-marine-blue"
+          >Phone Number</label
+        >
+        <input
+          id="phone"
+          type="tel"
+          placeholder="e.g. +1 234 567 890"
+          class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
+        />
 
         <!-- Step 1 end -->
       </section>
@@ -112,7 +133,7 @@
         <div class="grow"></div>
         <a
           href="step2.html"
-          class="grid place-content-center mr-3 w-24 h-10 text-white rounded bg-marine-blue"
+          class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded bg-marine-blue"
           >Next Step</a
         >
       </section>
