diff --git a/public/css/main.css b/public/css/main.css
index e805303..574ae15 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,28 +1,26 @@
 h1, h2, h3, h4, h5, h6 {
   font-family: "Comfortaa", serif;
-  text-align: center;
-}
+  text-align: center; }
 
 h1 {
   font-family: "Bangers", serif;
   font-size: 7em;
   color: darkred;
   display: inline;
-  margin: 0px 45%;
+  margin: 0px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   background: white;
   padding: 2px 17px 2px 8px;
-  border-radius: 15px;
-}
+  border-radius: 15px; }
 
 body {
   font-family: "Comfortaa", sans-serif;
   margin: 0px;
-  background-color: #f4f4f4;
-}
+  background-color: #f4f4f4; }
 
 .rules-body {
-  background-image: url(../../src/Go/views/grid.jpg);
-}
+  background-image: url(/images/grid.jpg); }
 
 .rules-title {
   font-family: "Bangers", serif;
@@ -33,85 +31,58 @@ body {
   line-height: 115px;
   padding: 10px;
   background-color: white;
-  margin-left: 35%;
-}
+  margin-left: 35%; }
 
 .content-wrapper {
   max-width: 750px;
-  margin: auto;
-}
+  margin: auto; }
 
 ul.rules-list {
   background-color: #f4f4f4;
   padding: 26px;
   border-radius: 15px;
-  margin: 0px 25px;
-}
+  margin: 0px 25px; }
 
 li.rule {
   padding: 3px;
-  font-size: 18px;
-}
+  font-size: 18px; }
 
 ul.game-instructions {
   display: flex;
-}
+  padding: 0px; }
 
 li#welcome {
   padding: 0px 10px 0px 5px;
   border-left: solid tomato;
   text-align: center;
-  list-style: none;
-}
+  list-style: none; }
+  li#welcome:last-child {
+    border-right: solid tomato; }
 
 div.top-bar {
-  background-image: url(../../src/Go/views/grid.jpg);
+  background-image: url(/images/grid.jpg);
   line-height: 135px;
-}
+  display: flex;
+  justify-content: center; }
 
 .board {
   background-color: tomato;
   padding: 20px;
   max-width: 500px;
   margin: auto;
-  border-radius: 10px;
-}
+  margin-top: 20px;
+  border-radius: 10px; }
 
 .black-player .board-cell:hover .overlay {
-  background-color: black;
-}
+  background-color: black; }
 
 .white-player .board-cell:hover .overlay {
-  background-color: white;
-}
+  background-color: white; }
 
 .board-cell {
   display: inline-block;
   position: relative;
-<<<<<<< HEAD
-  padding: 5.5555555556%;
-}
-.board-cell .overlay {
-  position: absolute;
-  box-sizing: border-box;
-  top: 10%;
-  left: 10%;
-  width: 80%;
-  height: 80%;
-  border-radius: 50%;
-  transition: background-color 0.25s;
-}
-.board-cell.small {
-  padding: 5.5555555556%;
-}
-.board-cell.medium {
-  padding: 3.8461538462%;
-}
-.board-cell.large {
-  padding: 2.6315789474%;
-}
-=======
-  padding: 5.5555555556%; }
+  padding: 5.55556%; }
   .board-cell .overlay {
     position: absolute;
     box-sizing: border-box;
@@ -122,30 +93,24 @@ div.top-bar {
     border-radius: 50%;
     transition: background-color .25s; }
   .board-cell.small {
-    padding: 5.5555555556%; }
+    padding: 5.55556%; }
   .board-cell.medium {
-    padding: 3.8461538462%; }
+    padding: 3.84615%; }
   .board-cell.large {
-    padding: 2.6315789474%; }
->>>>>>> 733c32748eb734f126d45e84e3609b04d4f1f023
+    padding: 2.63158%; }
 
 .black-cell .overlay {
-  background-color: black;
-}
+  background-color: black; }
 
 .white-cell .overlay {
-  background-color: white;
-}
+  background-color: white; }
 
 .split-wrapper {
   display: flex;
-  width: 100%;
-}
-@media screen and (max-width: 640px) {
-  .split-wrapper {
-    flex-direction: column;
-  }
-}
+  width: 100%; }
+  @media screen and (max-width: 640px) {
+    .split-wrapper {
+      flex-direction: column; } }
 
 .split-item {
   flex-grow: 1;
@@ -153,66 +118,53 @@ div.top-bar {
   border: solid tomato 1px;
   border-radius: 22px;
   background-color: white;
-  margin: 0px 10px;
-}
+  margin: 0px 10px; }
 
 .split-wrapper form {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 10px;
-}
-.split-wrapper form input {
-  margin-top: 20px;
-  padding: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  border: none;
-  outline: none;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form input[type=radio] {
-  opacity: 0;
-  width: 0px;
-  height: 0px;
-}
-.split-wrapper form input[type=radio]:checked ~ label {
-  color: tomato;
-  transition: color 0.25s;
-}
-.split-wrapper form input[type=submit] {
-  padding: 10px;
-  background-color: tomato;
-  color: white;
-}
-.split-wrapper form input[type=submit]:focus, .split-wrapper form input[type=submit]:hover {
-  background-color: inherit;
-  color: tomato;
-  transition: background-color 0.25s, color 0.25s scale 1.3;
-}
-.split-wrapper form input[type=text] {
-  background-color: inherit;
-  border-bottom: solid tomato;
-  border-width: 2px;
-  height: 3em;
-  box-sizing: border-box;
-  display: block;
-}
-.split-wrapper form input[type=text]:focus {
-  border-width: 3px;
-  transition: background-color 0.25s, border-width 0.25s;
-}
-.split-wrapper form .radio-parent {
-  display: flex;
-  margin-top: 20px;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form .radio-wrapper {
-  flex-grow: 1;
-  display: inline-block;
-  text-align: center;
-}
-
-/*# sourceMappingURL=public/css/main.css.map */
+  padding: 10px; }
+  .split-wrapper form input {
+    margin-top: 20px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: none;
+    outline: none;
+    width: 100%;
+    max-width: 300px; }
+  .split-wrapper form input[type="radio"] {
+    opacity: 0;
+    width: 0px;
+    height: 0px; }
+    .split-wrapper form input[type="radio"]:checked ~ label {
+      color: tomato;
+      transition: color .25s; }
+  .split-wrapper form input[type="submit"] {
+    padding: 10px;
+    background-color: tomato;
+    color: white; }
+    .split-wrapper form input[type="submit"]:focus, .split-wrapper form input[type="submit"]:hover {
+      background-color: inherit;
+      color: tomato;
+      transition: background-color .25s, color .25s; }
+  .split-wrapper form input[type="text"] {
+    background-color: inherit;
+    border-bottom: solid tomato;
+    border-width: 2px;
+    height: 3em;
+    box-sizing: border-box;
+    display: block; }
+    .split-wrapper form input[type="text"]:focus {
+      border-width: 3px;
+      transition: background-color .25s, border-width .25s; }
+  .split-wrapper form .radio-parent {
+    display: flex;
+    margin-top: 20px;
+    width: 100%;
+    max-width: 300px; }
+  .split-wrapper form .radio-wrapper {
+    flex-grow: 1;
+    display: inline-block;
+    text-align: center; }
diff --git a/public/css/style.css b/public/css/style.css
index 8b6346c..705d363 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -2,6 +2,7 @@ body {
     font-family: Roboto;
     background-image: url(/images/clouds.jpg);
     background-color: #F5F7FA;
+    background-size: cover;
     color: #2d2d2d;
 }
 
diff --git a/public/images/clouds.jpg b/public/images/clouds.jpg
index 17d7526..6a33787 100644
Binary files a/public/images/clouds.jpg and b/public/images/clouds.jpg differ
diff --git a/src/Go/views/go-example.jpg b/public/images/go-example.jpg
similarity index 100%
rename from src/Go/views/go-example.jpg
rename to public/images/go-example.jpg
diff --git a/src/Go/views/grid.jpg b/public/images/grid.jpg
similarity index 100%
rename from src/Go/views/grid.jpg
rename to public/images/grid.jpg
diff --git a/public/scss/css/main.css b/public/scss/css/main.css
deleted file mode 100644
index 7bfce3c..0000000
--- a/public/scss/css/main.css
+++ /dev/null
@@ -1,158 +0,0 @@
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Comfortaa", serif;
-  text-align: center;
-}
-
-h1 {
-  font-size: 5em;
-  margin: 0px;
-}
-
-body {
-  font-family: "Comfortaa", sans-serif;
-  margin: 0px;
-  background-color: #f4f4f4;
-}
-
-.content-wrapper {
-  max-width: 750px;
-  margin: auto;
-}
-
-li {
-  list-style: none;
-}
-
-ul.game-instructions {
-  display: flex;
-}
-
-div.top-bar {
-  background-image: url(../../src/Go/views/grid.jpg);
-  line-height: 135px;
-}
-
-.board {
-  background-color: tomato;
-  padding: 20px;
-  max-width: 500px;
-  margin: auto;
-  border-radius: 10px;
-}
-
-.black-player .board-cell:hover .overlay {
-  background-color: black;
-}
-
-.white-player .board-cell:hover .overlay {
-  background-color: white;
-}
-
-.board-cell {
-  display: inline-block;
-  position: relative;
-  padding: 5.5555555556%;
-}
-.board-cell .overlay {
-  position: absolute;
-  box-sizing: border-box;
-  top: 10%;
-  left: 10%;
-  width: 80%;
-  height: 80%;
-  border-radius: 50%;
-  transition: background-color 0.25s;
-}
-.board-cell.small {
-  padding: 5.5555555556%;
-}
-.board-cell.medium {
-  padding: 3.8461538462%;
-}
-.board-cell.large {
-  padding: 2.6315789474%;
-}
-
-.black-cell .overlay {
-  background-color: black;
-}
-
-.white-cell .overlay {
-  background-color: white;
-}
-
-.split-wrapper {
-  display: flex;
-  width: 100%;
-}
-@media screen and (max-width: 640px) {
-  .split-wrapper {
-    flex-direction: column;
-  }
-}
-
-.split-item {
-  flex-grow: 1;
-  box-sizing: border-box;
-}
-
-.split-wrapper form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 10px;
-}
-.split-wrapper form input {
-  margin-top: 20px;
-  padding: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  border: none;
-  outline: none;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form input[type=radio] {
-  opacity: 0;
-  width: 0px;
-  height: 0px;
-}
-.split-wrapper form input[type=radio]:checked ~ label {
-  color: tomato;
-  transition: color 0.25s;
-}
-.split-wrapper form input[type=submit] {
-  padding: 10px;
-  background-color: tomato;
-  color: white;
-}
-.split-wrapper form input[type=submit]:focus, .split-wrapper form input[type=submit]:hover {
-  background-color: inherit;
-  color: tomato;
-  transition: background-color 0.25s, color 0.25s;
-}
-.split-wrapper form input[type=text] {
-  background-color: inherit;
-  border-bottom: solid tomato;
-  border-width: 2px;
-  height: 3em;
-  box-sizing: border-box;
-  display: block;
-}
-.split-wrapper form input[type=text]:focus {
-  border-width: 3px;
-  transition: background-color 0.25s, border-width 0.25s;
-}
-.split-wrapper form .radio-parent {
-  display: flex;
-  margin-top: 20px;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form .radio-wrapper {
-  flex-grow: 1;
-  display: inline-block;
-  text-align: center;
-}
-
-/*# sourceMappingURL=css/main.css.map */
diff --git a/src/Go.cr b/src/Go.cr
index e9b3e89..88ab973 100644
--- a/src/Go.cr
+++ b/src/Go.cr
@@ -166,6 +166,10 @@ get "/about" do |env|
     render "src/Go/views/about.ecr"
 end
 
+get "/rules" do |env|
+    render "src/Go/views/rules.ecr"
+end
+
 get "/" do |env|
     render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
 end
diff --git a/src/Go/views/base.ecr b/src/Go/views/base.ecr
index 743ed69..2785c15 100644
--- a/src/Go/views/base.ecr
+++ b/src/Go/views/base.ecr
@@ -7,9 +7,7 @@
     </head>
     <body>
         <div class="content-wrapper">
-	   <div class="top-bar">
-               <h1 class="title>GO</h1>
-	    </div>
+	    <div class="top-bar"><h1 class="title">GO</h1></div>
             <%= content %>
         </div>
     </body>
diff --git a/src/Go/views/index.ecr b/src/Go/views/index.ecr
index d260610..6b94085 100644
--- a/src/Go/views/index.ecr
+++ b/src/Go/views/index.ecr
@@ -4,7 +4,7 @@
 	<li id="welcome">"Capture" dots of the opposite color by surrounding them.</li>
 	<li id="welcome">Create a game by filling out the fields below, giving the next player a password in "Their password."</li>
 	<li id="welcome">Join a game by entering the corresponding session name and password.</li>
-	<li id="welcome">Additional rules are found <a href="rules.html">here.</a></li>
+	<li id="welcome">Additional rules are found <a href="/rules">here.</a></li>
 </ul>
 <div class="split-wrapper">
 	<div class="split-item">
diff --git a/src/Go/views/rules.html b/src/Go/views/rules.ecr
similarity index 95%
rename from src/Go/views/rules.html
rename to src/Go/views/rules.ecr
index 38ebb14..bc59eba 100644
--- a/src/Go/views/rules.html
+++ b/src/Go/views/rules.ecr
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-            <link rel="stylesheet" href="../../../public/css/main.css"> </link>
+            <link rel="stylesheet" href="/css/main.css"> </link>
 	</head>
    <body class="rules-body">
 	   <h2 class="rules-title">Rules of Go</h2>
@@ -12,7 +12,7 @@
 		   <li class="rule">Points are also earned for the dots of that player’s color remaining on the board at the end of the game.</li>
 		   <li class="rule">The player with the most points at the end of the game is the winner.</li>
 		   <li class="rule">Dots are placed one at a time. Black plays first.</li>
-		   <img src=go-example.jpg>
+		   <img src="/images/go-example.jpg">
 		   <li class="rule">This diagram, (taken from <a href=https://www.britgo.org/intro/intro2.html>britgo</a>) shows the black player capturing a white stone at a (location a shows an example of a black “eye”). The black player has 15 points of territory - 10 in the bottom right corner and 5 at the top of the board. They also earn a point for capturing a white dot at location a, so their total is 16 points. The white player has 17 points - 11 along the left side and 6 in the top right corner. Therefore, the white player would win by 1 point.</li>
 		   <li class="rule">Each player has an endless amount of dots to place.</li>
 		   <li class="rule">A player can choose to pass on a turn. This usually occurs when the player cannot place any more dots, if they are able to place it in their own “eye” or the “eye” of the other player, causing it to be captured. The game ends if both players to pass their turn.</li>