diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 42b71f7..8c2de23 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -13,7 +13,7 @@
 {{ define "content" }}
 <div class="container p-0 read-area">
   <!--Hero Area-->
-  <div class="hero-area col-sm-12" style='background-image: url({{ partial "helpers/get-hero.html" . }});'>
+  <div class="hero-area col-sm-12" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
   </div>
 
   <!--Content Start-->
diff --git a/layouts/index.html b/layouts/index.html
index 507e1a8..a7f621c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -33,7 +33,11 @@
       {{ range sort .Site.Data.sections "section.weight" }}
         {{ if .section.enable }}
           <div class="container-fluid section-holder d-flex {{ $background }}">
-            {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+            {{ if .section.template }}
+              {{- partial .section.template . -}}
+            {{ else }}
+              {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+            {{ end }}
           </div>
           <!--- alter background color for next section --->
           {{ if eq $background "bg-white" }}
diff --git a/layouts/partials/about.html b/layouts/partials/about.html
index 2af5476..ccb3ab0 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@@ -1,8 +1,8 @@
-<div class="container anchor p-md-5" id="about">
+<div class="container anchor p-md-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
   <div class="row pt-sm-2 pt-md-4 align-self-center">
-    <!-- summery -->
+    <!-- summary -->
     <div class="col-md-6">
-      <h3 class="p-1">{{ site.Params.author.name }}</h3>
+    <h3 class="p-1">{{ site.Params.author.name }}</h3>
       {{ if .designation }}
       <h5 class="p-1">
         {{ .designation }}
diff --git a/layouts/partials/achievements.html b/layouts/partials/achievements.html
index 49b3ce9..1805631 100644
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/achievements.html
@@ -1,4 +1,4 @@
-<div class="container-fluid anchor pb-5" id="achievements">
+<div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
   <h1 class="text-center">{{ .section.name }}</h1>
   <div class="container">
     <div class="row" id="gallery">
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index 33af61a..6787e28 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -6,7 +6,7 @@
       </div>
       <div class="card-body">
         <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summery">{{ .Summary }}</p>
+        <p class="card-text post-summary">{{ .Summary }}</p>
       </div>
       <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html
index 997145c..7295f86 100644
--- a/layouts/partials/cards/recent-post.html
+++ b/layouts/partials/cards/recent-post.html
@@ -8,7 +8,7 @@
       </div>
       <div class="card-body">
         <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summery"> {{ .Summary }}</p>
+        <p class="card-text post-summary"> {{ .Summary }}</p>
       </div>
       <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html
index 1c24938..5c63d14 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@@ -1,23 +1,23 @@
-<div class="container-fluid anchor" id="experiences">
+<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
   <h1 class="text-center">{{ .section.name }}</h1>
 
   <div class="container timeline text-justify">
-    {{ $totalExperiences:= len .experiences }}
-    {{ range $index,$experience:= .experiences }}
-      {{ if eq (mod $index 2) 0 }}
-        <div class="row align-items-center  d-flex">
-          {{ partial "experiences/vertical-line.html" $index }}
-          {{ partial "experiences/experience-info.html" $experience }}
-        </div>
-      {{else}}
-        <div class="row align-items-center justify-content-end d-flex">
-          {{ partial "experiences/experience-info.html" $experience }}
-          {{ partial "experiences/vertical-line.html" $index }}
-        </div>
-      {{ end }}
-      {{ if lt $index (sub $totalExperiences 1) }}
-        {{ partial "experiences/horizontal-line.html" $index }}
-      {{ end }}
-    {{ end }}
+   {{ $totalExperiences:= len .experiences }}
+   {{ range $index,$experience:= .experiences }}
+     {{ if eq (mod $index 2) 0 }}
+       <div class="row align-items-center  d-flex">
+         {{ partial "experiences/vertical-line.html" $index }}
+         {{ partial "experiences/experience-info.html" $experience }}
+       </div>
+     {{else}}
+       <div class="row align-items-center justify-content-end d-flex">
+         {{ partial "experiences/experience-info.html" $experience }}
+         {{ partial "experiences/vertical-line.html" $index }}
+       </div>
+     {{ end }}
+     {{ if lt $index (sub $totalExperiences 1) }}
+       {{ partial "experiences/horizontal-line.html" $index }}
+     {{ end }}
+   {{ end }}
   </div>
 </div>
diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index d67eccd..d87a3fb 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -18,6 +18,7 @@
       <li>{{ . }}</li>
       {{ end }}
     </ul>
+    <!-- @todo this section should go to the first section, not necessarily about -->
     <a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
   </div>
 </div>
diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html
index 3d2bcd4..e8a9f35 100644
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@@ -1,4 +1,4 @@
-<div class="container-fluid anchor pb-5" id="projects">
+<div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
   <h1 class="text-center">{{ .section.name }}</h1>
   <div class="container ml-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html
index a69cc05..03142fc 100644
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/recent-posts.html
@@ -1,4 +1,4 @@
-<div class="container-fluid anchor pb-5" id="recent-posts">
+<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
   <h1 class="text-center">{{ .section.name }}</h1>
   <div class="container">
     <div class="row" id="recent-post-cards">
diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html
index 58b1f44..5fab89a 100644
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@@ -1,6 +1,5 @@
-<div class="container-fluid anchor pb-5" id="skills">
+<div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
   <h1 class="text-center">{{ .section.name }}</h1>
-
   <div class="container d-flex-block">
     <div class="row" id="primary-skills">
       {{ range .skills }}
diff --git a/static/assets/css/achievements.css b/static/assets/css/achievements.css
index aa75925..083ea74 100644
--- a/static/assets/css/achievements.css
+++ b/static/assets/css/achievements.css
@@ -1,4 +1,4 @@
-#achievements .container {
+.achievements-section .container {
   padding-top: 0.5rem;
 }
 
diff --git a/static/assets/css/list.css b/static/assets/css/list.css
index d598138..eba46fa 100644
--- a/static/assets/css/list.css
+++ b/static/assets/css/list.css
@@ -194,7 +194,7 @@ a.focused {
   margin-top: auto;
 }
 
-.post-summery {
+.post-summary {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
diff --git a/static/assets/css/projects.css b/static/assets/css/projects.css
index 1c6c1a2..b9ae172 100644
--- a/static/assets/css/projects.css
+++ b/static/assets/css/projects.css
@@ -1,10 +1,10 @@
-#projects .card .card-header {
+.projects-section .card .card-header {
   background-color: #f9fafc;
   padding: 0.7rem;
   padding-bottom: 0rem;
 }
 
-#projects .card .card-img-xs {
+.projects-section .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
@@ -15,11 +15,11 @@
   float: right;
 }
 
-#projects .card .card-body {
+.projects-section .card .card-body {
   padding: 0.7rem;
 }
 
-#projects .card .card-header .sub-title {
+.projects-section .card .card-header .sub-title {
   color: #8392a5;
   margin-top: 0.4rem;
 }
@@ -55,7 +55,7 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  #projects .btn {
+  .projects-section .btn {
     margin-top: 0.3125rem;
   }
 }
diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css
index d2f098a..ee969d0 100644
--- a/static/assets/css/recent-posts.css
+++ b/static/assets/css/recent-posts.css
@@ -1,23 +1,23 @@
-#recent-posts .container{
+.recent-posts-section .container{
   padding-top: 1rem;
 }
 
-#recent-posts .card .card-footer span {
+.recent-posts-section .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;
   padding-top: 5px;
 }
 
-#recent-posts .card .card-footer {
+.recent-posts-section .card .card-footer {
   background: #fff;
   margin-top: auto;
 }
 
-#recent-posts .post-card-link{
+.recent-posts-section .post-card-link{
   text-decoration: none;
 }
 
-.post-summery {
+.post-summary {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
diff --git a/static/assets/css/skills.css b/static/assets/css/skills.css
index a197c52..532d8ea 100644
--- a/static/assets/css/skills.css
+++ b/static/assets/css/skills.css
@@ -1,4 +1,4 @@
-#skills .card .card-head {
+.skills-section .card .card-head {
   background-color: #f9fafc;
   height: fit-content;
   padding: 0.7rem;
@@ -6,16 +6,16 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
-#skills .card .card-img-xs {
+.skills-section .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
-#skills .card {
+.skills-section .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-#skills .card .card-body {
+.skills-section .card .card-body {
   padding-top: 0.2rem;
   padding-left: 0.7rem;
 }
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 7e1a022..e3fcd43 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -250,10 +250,10 @@ img.right{
     padding-right: 5px;
   }
 
-  #skills,
-  #projects,
-  #recent-posts,
-  #achievements{
+  .skills-section,
+  .projects-section,
+  .recent-posts-section,
+  .achievements-section{
     padding-left: 0;
     padding-right: 0;
   }