diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss
index 96159b0..6cab2f6 100644
--- a/assets/scss/colors.scss
+++ b/assets/scss/colors.scss
@@ -2,17 +2,13 @@ $light-bg: #ddcf99;
 $light-bg-alt: #4e5463;
 $light-fg: #202020;
 $light-ln: #4e5463;
-$light-active: #f1866c;
-$light-h1: blue;
 
 $dark-bg: #4b3d44;
 $dark-bg-alt: #bd97a9;
 $dark-fg: #e6d0c4;
 $dark-ln: #bd97a9;
-$dark-active: #4b4361;
-$dark-h1: red;
 
-$transition-time: 1.5s;
+$transition-time: 1s;
 
 body {
   &.light {
@@ -34,12 +30,17 @@ a {
   transition: $transition-time;
 }
 
-a.footer-nav-item.active {
+a.footer-nav-item.active,
+a.footer-nav-item:hover{
   &.light {
-    color: $light-active;
+    color: $light-bg-alt;
+    background-color: $light-bg;
+    border-color: $light-bg;
   }
-  color: $dark-active;
-  transition: $transition-time;
+  color: $dark-bg-alt;
+  background-color: $dark-bg;
+  border-color: $dark-bg;
+  transition: 0.24s;
 }
 
 footer {
@@ -64,26 +65,44 @@ footer a {
 
 .togglelabel {
   &.light {
-    background-color: $light-bg;
+    background-color: $light-bg-alt;
+    border-color: $light-bg;
   }
-  background-color: $dark-bg;
+  background-color: $dark-bg-alt;
+  border-color: $dark-bg;
   transition: $transition-time;
 }
 
 .togglelabel.light::after {
-  background-color: $light-fg;
-  color: $light-bg;
-}
-
-.togglelabel::after {
-  background-color: $dark-fg;
-  color: $dark-bg;
+  background-color: $light-bg;
+  color: $light-bg-alt;
   transition: $transition-time;
 }
 
-#title{
-  &.light{
-    color: $light-h1;
-  }
-  color: $dark-h1;
+.togglelabel::after {
+  background-color: $dark-bg;
+  color: $dark-bg-alt;
+  transition: $transition-time;
+}
+
+
+body.light #title {
+  color: $light-bg;
+  background-color: $light-bg-alt;
+  transition: $transition-time;
+}
+
+body #title{
+  color: $dark-bg;
+  background-color: $dark-bg-alt;
+  transition: $transition-time;
+}
+
+article {
+  &.light {
+    background-color: $light-bg;
+    border-color: $light-bg-alt;
+  }
+  background-color: $dark-bg;
+  border-color: $dark-bg-alt;
 }
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index bf71ac9..55ffdb2 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -1,3 +1,5 @@
+$footer-height: 42pt;
+
 html,
 body {
   height: 100%;
@@ -5,7 +7,7 @@ body {
 }
 
 footer {
-  height: 42pt;
+  height: $footer-height;
   position: sticky;
   display: flex;
   align-items: center;
@@ -14,8 +16,9 @@ footer {
 }
 
 #content {
-  min-height: calc(100% - 42pt);
+  min-height: calc(100% - 42pt * 3);
   right: auto;
+  padding: 42pt;
 }
 
 #footer-left {
@@ -64,5 +67,13 @@ footer {
   margin-left: 8pt;
   margin-top: auto;
   margin-bottom: auto;
+  justify-content: center;
+  align-items: center;
 }
 
+
+article {
+  margin-top: 42pt;
+  margin-inline: auto;
+  padding: 4em;
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 9286f8e..0950907 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -2,6 +2,10 @@ $radius: 24pt;
 $toggle-width: 42pt;
 $toggle-height: 24pt;
 
+* {
+    border-width: 2pt;
+     }
+
 input[type="checkbox"]{
     cursor: pointer;
 }
@@ -16,29 +20,53 @@ input[type="checkbox"]{
     height: 24pt;
     border-radius: $radius;
     cursor: pointer;
+    align-items: center;
+    display: flex;
 }
 
 .togglelabel::after{
-    left: calc(100% - 66pt);
+    left: calc(100% - 67pt);
     content: "";
     position: absolute;
-    height: $toggle-height;
-    width: $toggle-height;
+    height: 20pt;
+    width: 20pt;
+    border-width: 1pt;
     border-radius: 100pt;
     transition: 0.3s;
     display: inline-block;
     vertical-align: middle;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    content: "滛";
+    border-style: solid;
+
 }
 
 input:checked + label:after{
-    left: calc(100% - 48pt);
+    left: calc(100% - 49pt);
 }
 
-.togglelabel::after{
-    content: "滛";
-}
 
 input:checked + label::after{
     content: "";
 }
+
+.footer-nav-item{
+    border-radius: 100%;
+    height: 1em;
+    width: 1em;
+    justify-content: center;
+    align-items: center;
+    border-style: solid;
+}
+
+article {
+    border-style: solid;
+    border-radius: $radius;
+}
+
+.togglelabel{
+    border: solid;
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 613ed9c..3ea86bc 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,8 +1,16 @@
 {{ define "main" }}
 <section id="main">
   <h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1>
+    <div>
+        {{ with .PrevInSection }}
+          <a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>
+        {{ end }}
+        {{ with .NextInSection }}
+          <a class="next colorswitch" href="{{.Permalink}}">next: {{.Title}}</a>
+        {{ end }}
+    </div>
   <div>
-        <article id="content">
+        <article id="content" class="colorswitch">
            {{ .Content }}
         </article>
   </div>
@@ -26,13 +34,5 @@
     </ul>
     {{ end }}
     </div>
-    <div>
-        {{ with .PrevInSection }}
-          <a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>
-        {{ end }}
-        {{ with .NextInSection }}
-          <a class="next colorswitch" href="{{.Permalink}}">next: {{.Title}}</a>
-        {{ end }}
-    </div>
 </aside>
 {{ end }}