diff --git a/css/main.css b/css/main.css
index ea2369d..e8f8a99 100644
--- a/css/main.css
+++ b/css/main.css
@@ -17,6 +17,16 @@ body {
   background-image: url(../images/wood.png);
 }
 
+footer {
+  height: 60px;
+  width: 100%;
+  bottom: 0px;
+  right: 0px;
+  position: absolute;
+  background-color: #2f6564;
+  z-index: 10;
+}
+
 h1, logo span {
   font-family: "Langar", sans-serif;
   position: absolute;
@@ -31,6 +41,7 @@ h1, logo span {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
+  text-shadow: 0px 2px rgba(0, 0, 0, 0.5);
 }
 
 logo span {
@@ -44,10 +55,10 @@ h1 span {
 }
 
 article {
-  border: 4px solid #285a71;
+  border: 4px solid #498584;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3);
   position: absolute;
   padding: 4px 0px;
   min-width: 500px;
@@ -67,7 +78,7 @@ article.ontop {
   z-index: 120;
 }
 article.expanded {
-  border-color: #00AEC1;
+  border-color: black;
   z-index: 120 !important;
 }
 
@@ -102,11 +113,11 @@ logo {
   left: 140px;
   background-size: 680px 400px;
   z-index: 50;
-  border: 4px solid #285a71;
+  border: 4px solid #498584;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
-  border-color: #00AEC1;
+  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3);
+  border-color: black;
   transition: all 0.3s ease-in-out;
   position: absolute;
   background-position: calc(50% - 30px) 50%;
@@ -123,7 +134,7 @@ logo.sidebar {
   left: 30px;
   top: 30px;
   z-index: 10;
-  border-color: #285a71;
+  border-color: #498584;
 }
 
 /*# sourceMappingURL=main.css.map */
diff --git a/images/wood.png b/images/wood.png
index 31cad4b..dcea5be 100644
Binary files a/images/wood.png and b/images/wood.png differ
diff --git a/index.html b/index.html
index 02d9d41..ef23fd2 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,7 @@
           <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
         </div>
       </article>
+      <footer></footer>
     <script src="js/main.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
   </body>
diff --git a/sass/main.scss b/sass/main.scss
index cca29b6..680fc56 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,15 +1,16 @@
 $font-stack: Helvetica, sans-serif;
 $primary-color: #333;
 $background-color: #222;
-$window-chrome: #285a71;
-$window-chrome-active: #00AEC1;
+$window-chrome: #498584;
+$footer-chrome: #2f6564;
+$window-chrome-active: black;
 $window-text: white;
 
 @mixin window-chrome {
   border: 4px solid $window-chrome;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
+  box-shadow: 0px 4px 0px rgba(0,0,0,0.3);
 }
 
 [x-cloak] {
@@ -31,6 +32,16 @@ body {
   background-image: url(../images/wood.png);
 }
 
+footer {
+  height: 60px;
+  width: 100%;
+  bottom: 0px;
+  right: 0px;
+  position: absolute;
+  background-color: $footer-chrome;
+  z-index: 10;
+}
+
 h1, logo span {
   font-family: 'Langar', sans-serif;
   position: absolute;
@@ -45,6 +56,7 @@ h1, logo span {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
+  text-shadow: 0px 2px rgba(0,0,0,0.5);
 }
 logo span {
   margin-top: 2px;
@@ -131,7 +143,7 @@ logo {
   }
   z-index: 50;
   @include window-chrome();
-  border-color: $window-chrome-active;
+  border-color: black;
   transition: all 0.3s ease-in-out;
   position: absolute;
   background-position: calc( 50% - 30px ) 50%;