diff --git a/src/main/java/org/launchcode/controllers/SpaDayController.java b/src/main/java/org/launchcode/controllers/SpaDayController.java
index 207770d6..201f5e72 100644
--- a/src/main/java/org/launchcode/controllers/SpaDayController.java
+++ b/src/main/java/org/launchcode/controllers/SpaDayController.java
@@ -62,7 +62,11 @@ public String spaMenu(@RequestParam String name, @RequestParam String skintype,
                 appropriateFacials.add(facials.get(i));
             }
         }
-
+        model.addAttribute("name" , name);
+        model.addAttribute("skintype", skintype);
+        model.addAttribute("facials", facials);
+        model.addAttribute("appropriateFacials", appropriateFacials);
+        model.addAttribute("manipedi", manipedi);
         return "menu";
     }
 }
diff --git a/src/main/resources/static/styles.css b/src/main/resources/static/styles.css
index e37cc062..0b15276a 100644
--- a/src/main/resources/static/styles.css
+++ b/src/main/resources/static/styles.css
@@ -2,7 +2,7 @@ body {
     background-color: pink;
 }
 
-div {
+div:not(.grid):not(.cell) {
     margin: auto;
     width: 50%;
     padding: 10px;
@@ -23,4 +23,46 @@ table {
             width: 50%;
             padding: 10px;
             text-align: center;
-}
\ No newline at end of file
+}
+
+.container {
+display: grid;
+  place-items: center;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(6, 80px);
+  grid-template-rows: repeat(1, 80px);
+    position:absolute;
+       bottom:0;
+}
+
+.cell {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+div#\31 {
+  background: #D9BCF2;
+}
+div#\32 {
+  background: #AED8F2;
+}
+div#\33 {
+  background: #F2DEA2;
+}
+div#\34 {
+  background: #F2CDC4;
+}
+div#\35 {
+  background: #A9B5D9;
+}
+div#\36 {
+  background: #F2A477;
+}
+
+
+
+
diff --git a/src/main/resources/templates/menu.html b/src/main/resources/templates/menu.html
index b94b513f..5b4cd4a5 100644
--- a/src/main/resources/templates/menu.html
+++ b/src/main/resources/templates/menu.html
@@ -3,13 +3,48 @@
 <head>
     <meta charset="UTF-8" />
     <title>Spa Menu</title>
-    <link href="../static/css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet" />
+<!--    <link href="../static/css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet" />-->
+    <link href="../static/styles.css" th:href="@{/styles.css}" rel="stylesheet" />
 </head>
 <body>
 <h1>My Super Fancy Spa</h1>
 <div id = "clientProfile">
+    <h2>My Profile</h2>
+    <p th:text = "${name}"></p>
+    <p th:text = "${skintype}"></p>
+    <p th:text = "${manipedi}"></p>
 </div>
 <div id = "servicesMenu">
+    <h2>Menu of Available Services</h2>
+    <h3>Facial Treatments</h3>
+    <p>The facial treatments below are recommended by our aestheticians for your given skin type.</p>
+    <table>
+        <th:block th:each="facial : ${appropriateFacials}">
+            <tr>
+                <td th:text="${facial}">...</td>
+            </tr>
+        </th:block>
+    </table>
+    <div th:if = "${manipedi.equals('manicure')}">
+        <h2>Manicure</h2>
+        <h3 th:replace = "~{fragments :: manicureDescription}"></h3>
+    </div>
+    <div th:if = "${manipedi.equals('pedicure')}">
+        <h2>Pedicure</h2>
+        <h3 th:replace = "~{fragments :: pedicureDescription}"></h3>
+    </div>
 </div>
 </body>
+<footer>
+    <div class="container">
+        <div class="grid">
+            <div class="cell" id="1"></div>
+            <div class="cell" id="2"></div>
+            <div class="cell" id="3"></div>
+            <div class="cell" id="4"></div>
+            <div class="cell" id="5"></div>
+            <div class="cell" id="6"></div>
+        </div>
+    </div>
+</footer>
 </html>
\ No newline at end of file
