diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index 42b2a9e..fd4edb5 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -36,6 +36,7 @@
 @import './sections/achievements';
 @import './sections/accomplishments';
 @import './sections/publications';
+@import './sections/footer';
 
 
 // components
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 8d3b253..e9d39f6 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -263,76 +263,6 @@ mark {
   color: #f9fafc;
 }
 
-/* --- FOOTER START --- */
-
-.footer {
-  color: #8392a5 !important;
-  background-color: #1c2d41;
-  position: relative;
-  z-index: 9999;
-}
-
-.footer h5 {
-  color: #c0ccda;
-}
-.footer a {
-  color: #8392a5;
-  transition: all 0.3s ease-out;
-}
-
-.footer a:hover {
-  margin-left: 5px;
-  transition: all 0.3s ease-out;
-}
-
-.footer ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-.footer li {
-  margin-top: 5px;
-}
-
-.footer hr {
-  background-color: #8392a5;
-}
-
-.footer p:first-child {
-  color: #c0ccda;
-}
-
-.footer input {
-  background-color: #c0ccda;
-}
-
-.footer input:focus {
-  background-color: #e5e9f2;
-}
-
-.footer #disclaimer {
-  color: #8392a5 !important;
-  text-align: justify;
-}
-.footer #disclaimer > strong {
-  color: #c0ccda !important;
-}
-
-.footer #theme {
-  color: #c0ccda;
-}
-
-.footer #theme img {
-  width: 32px;
-}
-
-.footer #hugo:hover {
-  margin-right: 5px;
-  transition: all 0.3s ease-out;
-}
-
-/* --- FOOTER END ---- */
-
 /* ============= Media Query Template ======= */
 @include media('<medium') {
 }
diff --git a/assets/styles/sections/footer.scss b/assets/styles/sections/footer.scss
new file mode 100644
index 0000000..52c643d
--- /dev/null
+++ b/assets/styles/sections/footer.scss
@@ -0,0 +1,63 @@
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+
+  h5 {
+    color: #c0ccda;
+  }
+
+  a {
+    color: #8392a5;
+    transition: all 0.3s ease-out;
+    &:hover {
+      margin-left: 5px;
+      transition: all 0.3s ease-out;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      margin-top: 5px;
+    }
+  }
+
+  hr {
+    background-color: #8392a5;
+  }
+
+  p:first-child {
+    color: #c0ccda;
+  }
+
+  input {
+    background-color: #c0ccda;
+    &:focus {
+      background-color: #e5e9f2;
+    }
+  }
+
+  #disclaimer {
+    color: #8392a5 !important;
+    text-align: justify;
+    & > strong {
+      color: #c0ccda !important;
+    }
+  }
+
+  #theme {
+    color: #c0ccda;
+    img {
+      width: 32px;
+    }
+  }
+
+  #hugo:hover {
+    margin-right: 5px;
+    transition: all 0.3s ease-out;
+  }
+}