diff --git a/exampleSite/data/skillSection.yml b/exampleSite/data/skillSection.yml
index 0e82a42..8c1a50d 100644
--- a/exampleSite/data/skillSection.yml
+++ b/exampleSite/data/skillSection.yml
@@ -3,6 +3,7 @@ enable: true
 topTitle: My Skills
 title: Why hire me for your next project?
 subtitle: My goal is to build a strong supportive professional network among all freelancers and startups in order to improve their performance.
+image: images/skill/skill_image.jpg
 
 skill:
   - title: HTML
diff --git a/layouts/partials/skillSection.html b/layouts/partials/skillSection.html
index 6781d33..f68e873 100644
--- a/layouts/partials/skillSection.html
+++ b/layouts/partials/skillSection.html
@@ -1,62 +1,62 @@
 {{ with .Site.Data.skillSection }}
-    {{ if .enable }}
-        <section class="section skill">
-            <div class="skill__background_shape">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 600 600">
-                    <defs>
-                    <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
-                        <stop offset="0" stop-color="#f1f6f9"/>
-                        <stop offset="1" stop-color="#f1f6f9" stop-opacity="0"/>
-                    </linearGradient>
-                    </defs>
-                    <g data-name="blob-shape (3)">
-                        <path class="blob" fill="url(#d)" d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z"/>
-                    </g>
-                </svg>
-            </div>
-            <div class="skill__background_pattern">
-                <img src="images/service/background-pattern.svg" alt="background-shape">
-            </div>
-            <div class="container">
-                <div class="row align-items-center">
-                    <div class="col-lg-6">
-                        <div class="skill__thumb">
-                            <div class="skill__thumb_pattern">
-                                <img src="images/hero/figure-svg.svg" alt="figure-svg">
-                            </div>
-                            <div class="skill__thumb_image">
-                                <img src="images/skill/skill_image.jpg" alt="skill-img"
-                                    style='
+{{ if .enable }}
+<section class="section skill">
+    <div class="skill__background_shape">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
+            <defs>
+                <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stop-color="#f1f6f9" />
+                    <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
+                </linearGradient>
+            </defs>
+            <g data-name="blob-shape (3)">
+                <path class="blob" fill="url(#d)"
+                    d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
+            </g>
+        </svg>
+    </div>
+    <div class="skill__background_pattern">
+        <img src="images/service/background-pattern.svg" alt="background-shape">
+    </div>
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-6">
+                <div class="skill__thumb">
+                    <div class="skill__thumb_pattern">
+                        <img src="images/hero/figure-svg.svg" alt="figure-svg">
+                    </div>
+                    <div class="skill__thumb_image">
+                        <img src="{{ .image | absURL }}" alt="skill-img" style='
                                         -webkit-mask: url({{"images/skill/skill-mask-svg.svg" | absURL}});
                                         -webkit-mask-repeat: no-repeat;
                                         -webkit-mask-size: contain;
                                         -webkit-mask-position: center center;
-                                    '
-                                >
-                            </div>
-                        </div>
+                                    '>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="skill__progress">
+                    <div class="skill__progress_heading">
+                        <span>{{ .topTitle }}</span>
+                        <h1> {{ .title }} </h1>
+                        <p> {{ .subtitle }} </p>
                     </div>
-                    <div class="col-lg-6">
-                        <div class="skill__progress">
-                            <div class="skill__progress_heading">
-                                <span>{{ .topTitle }}</span>
-                                <h1> {{ .title }} </h1>
-                                <p> {{ .subtitle }} </p>
-                            </div>
-                            {{ $section := .skill }}
-                            {{ range $section }}
-                                <div class="skill__progress_item">
-                                    <h6> {{ .title }} </h6>
-                                    <div class="progress-value"><span>{{ .percent }}</span>%</div>
-                                    <div class="progress">
-                                    <div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0" aria-valuemax="{{ .percent }}"></div>
-                                    </div>
-                                </div>
-                            {{ end }}
+                    {{ $section := .skill }}
+                    {{ range $section }}
+                    <div class="skill__progress_item">
+                        <h6> {{ .title }} </h6>
+                        <div class="progress-value"><span>{{ .percent }}</span>%</div>
+                        <div class="progress">
+                            <div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0"
+                                aria-valuemax="{{ .percent }}"></div>
                         </div>
                     </div>
+                    {{ end }}
                 </div>
             </div>
-        </section>
-    {{ end }}
+        </div>
+    </div>
+</section>
+{{ end }}
 {{ end }}
\ No newline at end of file