diff --git a/14-rock-paper-scissors/src/main/resources/public/output.css b/14-rock-paper-scissors/src/main/resources/public/output.css
index dfbf035..01fb464 100644
--- a/14-rock-paper-scissors/src/main/resources/public/output.css
+++ b/14-rock-paper-scissors/src/main/resources/public/output.css
@@ -543,10 +543,6 @@ video {
   bottom: 0px;
 }
 
-.bottom-20 {
-  bottom: 5rem;
-}
-
 .left-1\/2 {
   left: 50%;
 }
@@ -575,6 +571,10 @@ video {
   display: flex;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-3\/4 {
   height: 75%;
 }
@@ -611,6 +611,14 @@ video {
   width: 75%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-\[375px\] {
+  width: 375px;
+}
+
 .w-\[80px\] {
   width: 80px;
 }
@@ -619,10 +627,6 @@ video {
   width: var(--diameter);
 }
 
-.w-full {
-  width: 100%;
-}
-
 .w-screen {
   width: 100vw;
 }
@@ -653,6 +657,10 @@ video {
   align-items: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .justify-around {
   justify-content: space-around;
 }
@@ -661,10 +669,18 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-\[3px\] {
   border-width: 3px;
 }
@@ -674,6 +690,11 @@ video {
   border-color: hsl(217 16% 45% / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -717,8 +738,8 @@ video {
   --tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position);
 }
 
-.bg-50\% {
-  background-size: 50%;
+.bg-60\% {
+  background-size: 60%;
 }
 
 .bg-center {
@@ -729,11 +750,21 @@ video {
   background-repeat: no-repeat;
 }
 
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -742,11 +773,21 @@ video {
   padding-top: 2rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -773,6 +814,10 @@ video {
   line-height: 1;
 }
 
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .text-score-text {
   --tw-text-opacity: 1;
   color: hsl(229 64% 46% / var(--tw-text-opacity));
diff --git a/14-rock-paper-scissors/src/main/resources/templates/index.html b/14-rock-paper-scissors/src/main/resources/templates/index.html
index a2ac971..03c8090 100644
--- a/14-rock-paper-scissors/src/main/resources/templates/index.html
+++ b/14-rock-paper-scissors/src/main/resources/templates/index.html
@@ -36,10 +36,10 @@
   </head>
   <body>
     <main
-      class="flex flex-col items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
+      class="flex flex-col justify-between items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
     >
       <section
-        id="controls"
+        id="heading"
         class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
       >
         <h1
@@ -57,7 +57,8 @@
       </section>
 
       <section
-        class="w-full bg-center bg-no-repeat bg-50% bg-triangle-pattern h-[375px] h-[375px] relative"
+        id="controls"
+        class=" bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative"
       >
         <div
           id="paper"
@@ -66,7 +67,7 @@
             --diameter: 8rem;
             --bg-dark: hsl(230, 89%, 62%);
             --bg-bright: hsl(230, 89%, 65%);
-            --top-offset: 7rem;
+            --top-offset: 6rem;
             --left-offset: 6rem;
           "
         >
@@ -86,7 +87,7 @@
             --diameter: 8rem;
             --bg-dark: hsl(39, 89%, 49%);
             --bg-bright: hsl(40, 84%, 53%);
-            --top-offset: 7rem;
+            --top-offset: 6rem;
             --left-offset: 17rem;
           "
         >
@@ -106,7 +107,7 @@
             --diameter: 8rem;
             --bg-dark: hsl(349, 71%, 52%);
             --bg-bright: hsl(349, 70%, 56%);
-            --top-offset: 16rem;
+            --top-offset: 15rem;
             --left-offset: 11.5rem;
           "
         >
@@ -120,6 +121,13 @@
         </div>
       </section>
 
+      <div class="py-12">
+        <button
+          class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
+        >
+          Rules
+        </button>
+      </div>
     </main>
     <footer class="fixed inset-x-0 bottom-0 attribution">
       Challenge by
diff --git a/14-rock-paper-scissors/tailwind.config.js b/14-rock-paper-scissors/tailwind.config.js
index a2796a8..d6ee1d6 100644
--- a/14-rock-paper-scissors/tailwind.config.js
+++ b/14-rock-paper-scissors/tailwind.config.js
@@ -8,8 +8,8 @@ module.exports = {
         'scissors-bright': 'hsl(40, 84%, 53%)',
         'paper-dark': 'hsl(230, 89%, 62%)',
         'paper-bright': 'hsl(230, 89%, 65%)',
-        'rock-from': 'hsl(349, 71%, 52%)',
-        'rock-to': 'hsl(349, 70%, 56%)',
+        'rock-dark': 'hsl(349, 71%, 52%)',
+        'rock-bright': 'hsl(349, 70%, 56%)',
         'cyan-from': 'hsl(189, 59%, 53%)',
         'cyan-to': 'hsl(189, 58%, 57%)',
         'dark-text': 'hsl(229, 25%, 31%)',
@@ -30,7 +30,7 @@ module.exports = {
         'triangle-pattern': "url('images/bg-triangle.svg')",
       },
       backgroundSize: {
-        '50%': '50%',
+        '60%': '60%',
       },
     },
   },
