diff --git a/.gitignore b/.gitignore
index ed4e1db4..f3a73b58 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /content
 /static/images
 .vscode
+.DS_Store
 
 ### Hugo ###
 # Generated files by hugo
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 2babb32a..3f295910 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -159,69 +159,70 @@ params:
         - "Express"
 
   # Experience
-  experience:
-    enable: true
-    # title: "Custom Name"
-    items:
-      - job: "Senior Software Developer"
-        company: "Facebook"
-        companyUrl: "https://example.com"
-        date: "Jan 2022 - present"
-        featuredLink:
-          enable: true
-          name: "View the project"
-          url: "https://example.com"
-        content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
-
-      - job: "Software Developer"
-        company: "Amazon"
-        companyUrl: "https://example.com"
-        date: "Sep 2020 - Dec 2021"
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        info:
-          enable: true
-          content: I worked as a software developer for more than one year in Amazon.
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "Junior Software Developer"
-        company: "Apple"
-        companyUrl: "https://example.com"
-        date: "Jan 2020 - Aug 2020"
-        info:
-          enable: false
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "UI/UX Designer"
-        company: "Netflix"
-        companyUrl: "https://example.com"
-        date: "June 2017 - Nov 2019"
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "Product Designer"
-        company: "Google"
-        companyUrl: "https://example.com"
-        date: "Feb 2016 - Mar 2017"
-        content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
+  experiences:
+    - key: "exp"
+      enable: true
+      # title: "Custom Name"
+      items:
+        - job: "Senior Software Developer"
+          company: "Facebook"
+          companyUrl: "https://example.com"
+          date: "Jan 2022 - present"
+          featuredLink:
+            enable: true
+            name: "View the project"
+            url: "https://example.com"
+          content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
+  
+        - job: "Software Developer"
+          company: "Amazon"
+          companyUrl: "https://example.com"
+          date: "Sep 2020 - Dec 2021"
+          featuredLink:
+            enable: true
+            url: "https://example.com"
+          info:
+            enable: true
+            content: I worked as a software developer for more than one year in Amazon.
+          content: |
+            I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+  
+            - Lead backend developer for a product.
+            - Created a frontend design for a product.
+  
+        - job: "Junior Software Developer"
+          company: "Apple"
+          companyUrl: "https://example.com"
+          date: "Jan 2020 - Aug 2020"
+          info:
+            enable: false
+          featuredLink:
+            enable: true
+            url: "https://example.com"
+          content: |
+            I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+  
+            - Lead backend developer for a product.
+            - Created a frontend design for a product.
+  
+        - job: "UI/UX Designer"
+          company: "Netflix"
+          companyUrl: "https://example.com"
+          date: "June 2017 - Nov 2019"
+          featuredLink:
+            enable: true
+            url: "https://example.com"
+          content: |
+            I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+  
+            - Lead backend developer for a product.
+            - Created a frontend design for a product.
+  
+        - job: "Product Designer"
+          company: "Google"
+          companyUrl: "https://example.com"
+          date: "Feb 2016 - Mar 2017"
+          content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
 
   # Education
   education:
diff --git a/layouts/index.html b/layouts/index.html
index 146fb5b6..ba53c506 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -14,7 +14,9 @@
 {{ define "main" }}
 {{- partial "sections/hero/index.html" . -}}
 {{- partial "sections/about.html" . -}}
-{{- partial "sections/experience.html" . -}}
+{{ range $index, $element := .Site.Params.experiences }}
+    {{- partial "sections/experience/experience.html" $element -}}
+{{ end }}
 {{- partial "sections/education.html" . -}}
 {{- partial "sections/projects.html" . -}}
 {{- partial "sections/achievements.html" . -}}
diff --git a/layouts/partials/sections/experience.html b/layouts/partials/sections/experience.html
deleted file mode 100644
index f9c2d13d..00000000
--- a/layouts/partials/sections/experience.html
+++ /dev/null
@@ -1,130 +0,0 @@
-{{ if .Site.Params.experience.enable | default false }}
-<section id="experience" class="py-5">
-    <div class="container">
-        <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience" }}</h3>
-        <div class="row justify-content-center">
-            <div class="col-sm-12 col-md-8 col-lg-8 py-5">
-                <div class="experience-container px-3 pt-2">
-                    <ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
-                        {{ range $index, $element := .Site.Params.experience.items }}
-                        {{ if (eq $index 0) }}
-                        <li class="nav-item px-1 bg-transparent" role="presentation">
-                            <div 
-                                class="nav-link active bg-transparent" 
-                                aria-selected="true" 
-                                role="tab" 
-                                data-bs-toggle="pill"
-                                id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                                data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                                aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}' 
-                            >
-                                {{ .company }}
-                            </div>
-                        </li>
-                        {{ else }}
-                        <li class="nav-item px-1 bg-transparent" role="presentation">
-                            <div 
-                                class="nav-link bg-transparent" 
-                                aria-selected="true" 
-                                role="tab" 
-                                data-bs-toggle="pill"
-                                id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                                data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}' 
-                                aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                            >
-                                {{ .company }}
-                            </div>
-                        </li>
-                        {{ end }}
-                        {{ end }}
-                    </ul>
-                    <div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="pills-tabContent">
-                        {{ range $index, $element := .Site.Params.experience.items }}
-                        {{ if (eq $index 0) }}
-                        <div 
-                            class="tab-pane fade show active bg-transparent" 
-                            role="tabpanel"
-                            id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                            aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                        >
-                            <div>
-                                <span class="h4">{{ .job }}</span>
-                                <small>-</small>
-                                <a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
-                                <div class="pb-1">
-                                    <small>{{ .date }}</small>
-                                    {{ if .info.enable | default true }}
-                                    <span class="p-2">
-                                        <span 
-                                            style="cursor: pointer;" 
-                                            data-bs-toggle="tooltip" 
-                                            data-bs-placement="top" 
-                                            data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " .company ) }}
-                                        >
-                                            <i class="fas fa-info-circle fa-xs"></i>
-                                        </span>
-                                    </span>
-                                    {{ end }}
-                                </div>
-
-                                {{ if .featuredLink.enable | default false }}
-                                <div class="py-2 featuredLink">
-                                    <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
-                                        {{ .featuredLink.name | default "Featured Link" }} 
-                                    </a>
-                                </div>
-                                {{ end }}
-                            </div>
-
-                            {{ .content | markdownify}}
-                        </div>
-                        {{ else }}
-                        <div 
-                            class="tab-pane fade bg-transparent" 
-                            role="tabpanel"
-                            id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                            aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                        >
-                            <div>
-                                <span class="h4">{{ .job }}</span>
-                                <small>-</small>
-                                <a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
-                                
-                                <div class="pb-1">
-                                    <small>{{ .date }}</small>
-                                    {{ if .info.enable | default true }}
-                                    <span class="p-2">
-                                        <span 
-                                            style="cursor: pointer;" 
-                                            data-bs-toggle="tooltip" 
-                                            data-bs-placement="top" 
-                                            data-bs-original-title={{ .info.content | default (print "Worked as a " .job " at " .company ) }}
-                                        > 
-                                            <i class="fas fa-info-circle fa-xs"></i>
-                                        </span>
-                                    </span>
-                                    {{ end }}
-                                </div>
-                                
-                                {{ if .featuredLink.enable | default false }}
-                                <div class="py-2 featuredLink">
-                                    <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
-                                        {{ .featuredLink.name | default "Featured Link" }} 
-                                    </a>
-                                </div>
-                                {{ end }}
-                            </div>
-
-                            <div class="pt-2">
-                                {{ .content | markdownify}}
-                            </div>
-                        </div>
-                        {{ end }}
-                        {{ end }}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-{{ end }}
diff --git a/layouts/partials/sections/experience/experience-tab-entry.html b/layouts/partials/sections/experience/experience-tab-entry.html
new file mode 100644
index 00000000..87a8f687
--- /dev/null
+++ b/layouts/partials/sections/experience/experience-tab-entry.html
@@ -0,0 +1,58 @@
+<!--
+params:
+    - index
+    - key
+    - info
+        - enable
+        - content
+    - company
+    - companyUrl
+    - date
+    - job
+    - featuredLink
+        - enable
+        - name
+    - content
+-->
+
+<div
+    class="tab-pane fade {{ if (eq .index 0) }} show active {{ end }} bg-transparent"
+    role="tabpanel"
+    id='{{.key}}-pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+    aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
+>
+    <div>
+        <span class="h4">{{ .job }}</span>
+        <small>-</small>
+        <a href="{{.key}}-{{ .companyUrl }}" target="_blank">{{ .company }}</a>
+        <div class="pb-1">
+            <small>{{ .date }}</small>
+            {{ if .info | default false}}
+                {{ if .info.enable | default true }}
+                <span class="p-2">
+                    <span
+                        style="cursor: pointer;"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " .company ) }}
+                    >
+                        <i class="fas fa-info-circle fa-xs"></i>
+                    </span>
+                </span>
+                {{ end }}
+            {{ end }}
+        </div>
+
+        {{ if .featuredLink | default false}}
+            {{ if .featuredLink.enable | default false }}
+            <div class="py-2 featuredLink">
+                <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
+                {{ .featuredLink.name | default "Featured Link" }}
+                </a>
+            </div>
+            {{ end }}
+        {{ end}}
+    </div>
+    
+    {{ .content | markdownify}}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/sections/experience/experience-tab.html b/layouts/partials/sections/experience/experience-tab.html
new file mode 100644
index 00000000..a65ca242
--- /dev/null
+++ b/layouts/partials/sections/experience/experience-tab.html
@@ -0,0 +1,21 @@
+<!--
+params:
+    - index
+    - key
+    - company
+    - date  
+-->
+
+<li class="nav-item px-1 bg-transparent" role="presentation">
+    <div
+            class="nav-link {{ if (eq .index 0) }}active{{ end }} bg-transparent"
+            aria-selected="true"
+            role="tab"
+            data-bs-toggle="pill"
+            id='{{.key}}-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
+            data-bs-target='#{{.key}}-pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+            aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+    >
+        {{ .company }}
+    </div>
+</li>
\ No newline at end of file
diff --git a/layouts/partials/sections/experience/experience.html b/layouts/partials/sections/experience/experience.html
new file mode 100644
index 00000000..c8ebb1d6
--- /dev/null
+++ b/layouts/partials/sections/experience/experience.html
@@ -0,0 +1,43 @@
+{{ if .enable | default false }}
+{{$key := .key}}
+<section class="experience py-5" id="{{ .key }}">
+    <div class="container">
+        <h3 class="text-center">{{ .title | default "Experience" }}</h3>
+        <div class="row justify-content-center">
+            <div class="col-sm-12 col-md-8 col-lg-8 py-5">
+                <div class="experience-container px-3 pt-2">
+                    <ul class="nav nav-pills mb-3 bg-transparent primary-font" id="{{ .key }}-pills-tab" role="tablist">
+                        {{ range $index, $element := .items }}
+                            {{ partial "sections/experience/experience-tab.html" 
+                                (dict 
+                                    "index" $index
+                                    "key" $key
+                                    "company" .company 
+                                    "date" .date
+                                )
+                            }}
+                        {{ end }}
+                    </ul>
+                    <div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="{{ .key }}-pills-tabContent">
+                        {{ range $index, $element := .items }}
+                            {{ partial "sections/experience/experience-tab-entry.html" 
+                                (dict 
+                                    "index" $index
+                                    "key" $key
+                                    "info" .info 
+                                    "company" .company 
+                                    "companyUrl" .companyUrl 
+                                    "date" .date 
+                                    "job" .job 
+                                    "featuredLink" .featuredLink
+                                    "content" .content
+                                )
+                            }}
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}
diff --git a/static/css/index.css b/static/css/index.css
index ef2b9156..513dd93e 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -264,39 +264,39 @@ header .navbar.animate {
 
 /* experience */
 
-#experience h3 {
+.experience h3 {
     color: var(--text-secondary-color) !important;
 }
 
-#experience * {
+.experience * {
     background-color: transparent !important;
 }
 
-#experience .tab-pane > * {
+.experience .tab-pane > * {
     opacity: 0.9;
 }
 
-#experience .tab-pane small {
+.experience .tab-pane small {
     opacity: 0.8;
 }
 
-#experience .tab-pane ul {
+.experience .tab-pane ul {
     padding-top: 1%;
     padding-bottom: 1%;
 }
 
-#experience .experience-container .tab-content > .tab-pane p {
+.experience .experience-container .tab-content > .tab-pane p {
     padding: 1% 0;
     margin: 0;
 }
 
-#experience .experience-container {
+.experience .experience-container {
     background-color: var(--secondary-color) !important;
     border-radius: .75rem;
     box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
 }
 
-#experience .nav-item .nav-link {
+.experience .nav-item .nav-link {
     color: var(--text-color) !important;
     border-bottom: 2px solid transparent; 
     border-radius: 0%;
@@ -304,29 +304,29 @@ header .navbar.animate {
     cursor: pointer;
 }
 
-#experience .nav-item .nav-link.active {
+.experience .nav-item .nav-link.active {
     color: var(--text-color) !important;
     border-bottom: 2px solid var(--primary-color); 
     opacity: 0.8;
 }
 
-#experience .nav-item .nav-link.active:hover { 
+.experience .nav-item .nav-link.active:hover { 
     transition: none !important;
 }
 
-#experience .nav-item .nav-link:hover {
+.experience .nav-item .nav-link:hover {
     border-bottom: 2px solid var(--primary-color);
     opacity: 0.8;
 }
 
-#experience a {
+.experience a {
     opacity: 0.9;
     display: inline-block;
     text-decoration: none;
     color: var(--primary-color) !important;
 }
 
-#experience a::after {
+.experience a::after {
     content: "";
     display: block;
     width: 0px;
@@ -337,30 +337,30 @@ header .navbar.animate {
     opacity: 0.5;
 }
 
-#experience a:hover::after, #experience a:focus::after, #experience a:active::after {
+.experience a:hover::after, .experience a:focus::after, .experience a:active::after {
     width: 100%;
 }
 
-#experience .experience-container .tab-content .tab-pane ul {
+.experience .experience-container .tab-content .tab-pane ul {
     overflow: hidden;
     list-style: none;
     margin-bottom: 0;
 }
 
-#experience .experience-container .tab-content .tab-pane ul li {
+.experience .experience-container .tab-content .tab-pane ul li {
     position: relative;
     margin-bottom: 10px;
     padding-left: 20px;
 }
 
-#experience .experience-container .tab-content .tab-pane ul li::before {
+.experience .experience-container .tab-content .tab-pane ul li::before {
     content: "▹";
     color: var(--primary-color);
     position: absolute;
     left: 0px;
 }
 
-#experience .experience-container .tab-content .tab-pane .featuredLink a::after {
+.experience .experience-container .tab-content .tab-pane .featuredLink a::after {
     display: block;
     width: auto;
     height: auto;
@@ -370,17 +370,17 @@ header .navbar.animate {
     opacity: 1;
 }
 
-#experience .experience-container .tab-content .tab-pane .featuredLink a.btn {
+.experience .experience-container .tab-content .tab-pane .featuredLink a.btn {
     border: 1px solid var(--primary-color);
     border-radius: .75rem;
     transition: none;
 }
 
-#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:focus {
+.experience .experience-container .tab-content .tab-pane .featuredLink a.btn:focus {
     box-shadow: none;
 }
 
-#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover {
+.experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover {
     color: var(--text-color) !important;
     opacity: 0.7;
 }