diff --git a/themes/gokarna/layouts/_default/baseof.html b/themes/gokarna/layouts/_default/baseof.html
index 83ded07..d663ad3 100644
--- a/themes/gokarna/layouts/_default/baseof.html
+++ b/themes/gokarna/layouts/_default/baseof.html
@@ -5,7 +5,7 @@
         {{- partial "header.html" . -}}
         <main id="content">
         {{- block "main" . }}{{- end }}
-        {{- partial "footer.html" . -}}
         </main>
+        {{- partial "footer.html" . -}}
     </body>
 </html>
diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css
index 5f83cef..7e0eada 100644
--- a/themes/gokarna/static/css/main.css
+++ b/themes/gokarna/static/css/main.css
@@ -2,6 +2,12 @@ html {
   background: white;
   color: black;
   font-family: "Roboto", sans-serif;
+  min-height: 100%;
+  position: relative;
+}
+
+body {
+  margin-bottom: 170px;
 }
 
 /* HEADER */
@@ -41,6 +47,12 @@ html {
 .header .header-nav.small {
   margin-top: 0;
 }
+.header-nav a {
+  transition: color 0.15s ease-in-out;
+}
+.header-nav a:hover {
+  color: teal;
+}
 .header-nav .avatar {
   border: 0.5px solid white;
   border-radius: 18px;
@@ -83,7 +95,7 @@ html {
 .nav-links .nav-icons-divider {
   border-color: inherit;
   border-left: 1px solid;
-  margin-right: 4.5px;
+  margin: 0 10px;
 }
 .nav-links #dark-theme-toggle:hover {
   cursor: pointer;
@@ -97,11 +109,15 @@ html {
 
 /* FOOTER */
 .footer {
+  bottom: 0;
   border-top: 1px solid #eee;
   color: inherit;
-  margin-top: 50px;
+  left: 0;
+  overflow: hidden;
   padding: 40px 0;
+  position: absolute;
   text-align: center;
+  width: 100%;
 }
 
 .footer span {
@@ -123,6 +139,7 @@ html {
 /* ICONS */
 .feather {
   height: 20px;
+  margin: -3px auto;
   stroke-width: 1.75;
   width: 20px;
 }
@@ -171,7 +188,7 @@ code {
 /* SINGLE */
 #content {
   width: 810px;
-  margin: 180px auto 0;
+  margin: 120px auto 0;
 }
 .post .post-date {
   color: gray;