diff --git a/css/fancy-robot.css b/css/fancy-robot.css
index 83555f1..6c3c727 100644
--- a/css/fancy-robot.css
+++ b/css/fancy-robot.css
@@ -1,38 +1,140 @@
 .robot-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 500px;
+  height: 500px;
+  border: 5px solid;
+  margin: 120px auto;
+  background-color: whitesmoke;
 }
 
 .robot-face-shape {
+  position: relative;
+  height: 250px;
+  width: 150px;
+  top: 0px;
+  margin: 0 auto;
+  border: 2px solid #2f10a2;
+  border-radius: 75px;
+  background: linear-gradient(135deg, #6b6b6b, #3a3a3a);
 }
 
 .robot-eye-left {
+  position: relative;
+  width: 3rem;
+  height: 50px;
+  top: 50px;
+  left: 80px;
+  border: solid 1px;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, #aaa, #ebf8e1, #f3e);
 }
 
 .robot-eye-right {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 10px;
+  border: solid 1px black;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, #aaa, #ebf8e1, #f3e);
 }
 
 .robot-ear-left {
+  position: absolute;
+  width: 75px;
+  height: 70px;
+  border: solid 1px green;
+  background: radial-gradient(
+    circle at 100%,
+    #aaa 25%,
+    #6b6b6b 50%,
+    #3a3a3a 75%
+  );
+  top: 60px;
+  left: 95px;
 }
 
 .robot-ear-right {
+  position: absolute;
+  width: 140px;
+  height: 70px;
+  border: solid 1px firebrick;
+  background: radial-gradient(circle at 0%, #aaa 25%, #6b6b6b 50%, #3a3a3a 75%);
+  top: 60px;
+  right: 30px;
 }
 
 .robot-nose {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  background: url(https://picsum.photos/200/300);
+  background-size: cover;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%) rotate(-45deg);
 }
 
 .robot-teeth {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-top: 30px solid white;
+  top: 40px;
+  left: 30%;
 }
 
 .robot-tooth {
+  position: relative;
+  margin: 0 auto;
+  width: 10px;
+  height: 1px;
+  border: 1px solid black;
+  background-color: white;
+  bottom: 30px;
 }
 
 .robot-hair-style {
+  position: absolute;
+  height: 15px;
+  width: 75px;
+  border-left: 50px solid semi-transparent;
+  border-right: 50px solid semi-transparent;
+  border-top: 5px solid #2f10a2;
+  border: 2px solid #2f10a2;
+  background-color: #3a3a3a;
+  top: 20px;
+  left: 57%;
+  transform: rotate(35deg);
 }
 
 .robot-hair-one {
+  position: absolute;
+  height: 13px;
+  width: 13px;
+  border: 2px solid rgb(20, 90, 180);
+  top: 0px;
 }
 
 .robot-hair-two {
+  position: absolute;
+  height: 12px;
+  width: 24px;
+  border: 2px solid rgba(222, 30, 187, 0.5);
+  top: 0;
+  left: 20px;
 }
 
 .robot-hair-three {
+  position: absolute;
+  height: 14px;
+  width: 23px;
+  border: 2px solid rgba(30, 187, 83, 0.5);
+  top: 0px;
+  left: 50px;
 }
diff --git a/css/legal-page.css b/css/legal-page.css
index a563c2a..0546a70 100644
--- a/css/legal-page.css
+++ b/css/legal-page.css
@@ -1,17 +1,32 @@
 .legal-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-color: #e2e2e2;
-  padding: 30px;
+  padding: 40px;
   margin-top: 60px;
   width: 100%;
+  z-index: 1;
 }
 
 .legal-header h1 {
+  position: fixed;
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
 }
 
 main {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding: 30px 0;
+  width: 100%;
+  background-color: #3b3d4e;
+  margin-top: 100px;
 }
 
 section {
@@ -19,17 +34,21 @@ section {
   gap: 30px;
   position: relative;
   border-bottom: 1px solid grey;
-  padding: 30px;
+  padding: 50px;
   max-width: 900px;
   margin: 0 auto;
   color: white;
 }
 
 .section-label {
+  position: sticky;
+  top: 150px;
+  align-self: flex-start;
   width: 100%;
   background-color: #2b2d3b;
   height: max-content;
   padding: 10px 16px;
+  margin-top: 30px;
 }
 
 .document-content {
@@ -37,6 +56,7 @@ section {
   flex-direction: column;
   gap: 30px;
   max-width: 600px;
+  margin: auto;
 }
 
 .document-content p {
@@ -53,8 +73,12 @@ section {
 }
 
 footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
   display: flex;
   align-items: center;
+  gap: 30px;
   width: 100%;
   background-color: #e2e2e2;
   padding: 0 30px;
diff --git a/css/styles.css b/css/styles.css
index cd905c3..6630d22 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -73,7 +73,7 @@ header.exercise-header {
 }
 
 .top-nav .back-button a:before {
-  content: '\2190';
+  content: "\2190";
 }
 
 .top-nav .back-button a:hover {