diff --git a/content-editable/index.html b/content-editable/index.html
index f4563d0..e0c9758 100644
--- a/content-editable/index.html
+++ b/content-editable/index.html
@@ -12,6 +12,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+            <img src="../home.svg" alt="home" />
+        </a>
         <h2> Shoppping List(Content Editable) </h2>
         <ul class="content-editable" contenteditable="true">
             <li> 1. Milk </li>
diff --git a/data-attribute/index.html b/data-attribute/index.html
index b39d143..6418d88 100644
--- a/data-attribute/index.html
+++ b/data-attribute/index.html
@@ -21,6 +21,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+            <img src="../home.svg" alt="home" />
+        </a>
         <h2> Know data attribute </h2>
         <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> I have a hidden secret!
         </div>
diff --git a/datalist/index.html b/datalist/index.html
index 27c0e27..1dd5d64 100644
--- a/datalist/index.html
+++ b/datalist/index.html
@@ -12,6 +12,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+          <img src="../home.svg" alt="home" />
+        </a>
         <h1>Datalist Tag</h1>
         <form action="" method="get">
             <label for="fruit">Choose your fruit from the list:</label>
diff --git a/details/index.html b/details/index.html
index 70c80c1..e0b5ca2 100644
--- a/details/index.html
+++ b/details/index.html
@@ -12,6 +12,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+            <img src="../home.svg" alt="home" />
+        </a>
         <h1>Details Tag</h1>
         <details>
             <summary>Click Here to get the user details</summary>
diff --git a/home.svg b/home.svg
new file mode 100644
index 0000000..538859d
--- /dev/null
+++ b/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
\ No newline at end of file
diff --git a/inputs/index.html b/inputs/index.html
index 4c59473..a0263fd 100644
--- a/inputs/index.html
+++ b/inputs/index.html
@@ -19,6 +19,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+            <img src="../home.svg" alt="home" />
+        </a>
         <h1>All about Inputs</h1>
 
         <h2>Color picker</h2>
diff --git a/main.css b/main.css
index b33685d..1feb93e 100644
--- a/main.css
+++ b/main.css
@@ -24,6 +24,14 @@ li {
     list-style: none;
 }
 
+.home {
+  text-decoration: none;
+}
+
+.home span {
+  font-size: 25px;;
+}
+
 .box {
   border: 1px dotted;
   border-radius: 5px;
diff --git a/map/index.html b/map/index.html
index 77ce9c1..2081c81 100644
--- a/map/index.html
+++ b/map/index.html
@@ -12,6 +12,9 @@
 
     <body>
         <div class="demo">
+            <a href="../index.html" class="home">
+                <img src="../home.svg" alt="home" />
+            </a>
             <h2> Map - Image map </h2>
             <div>
                 <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
diff --git a/mark/index.html b/mark/index.html
index 893454b..e7e74d4 100644
--- a/mark/index.html
+++ b/mark/index.html
@@ -12,6 +12,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+            <img src="../home.svg" alt="home" />
+        </a>
         <h1>Mark something to Highlight</h1>
         <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with a HTML tag? </p>
     </div>
diff --git a/meter/index.html b/meter/index.html
index ec581ff..49630ff 100644
--- a/meter/index.html
+++ b/meter/index.html
@@ -12,6 +12,9 @@
 
     <body>
         <div class="demo">
+            <a href="../index.html" class="home">
+                <img src="../home.svg" alt="home" />
+            </a>
             <h2> Meter </h2>
             <label for="disk_c">Disk usage C:</label>
             <meter id="disk_c" value="8" min="0" max="10">2 out of 10</meter><br>
diff --git a/output/index.html b/output/index.html
index b6cbbe1..f2cac0e 100644
--- a/output/index.html
+++ b/output/index.html
@@ -12,6 +12,9 @@
 
     <body>
         <div class="demo">
+            <a href="../index.html" class="home">
+                <img src="../home.svg" alt="home" />
+            </a>
             <h2> Let's see the Output </h2>
             <form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
                 <input type="number" id="a" value="0">
diff --git a/range/index.html b/range/index.html
index 4d6eef6..5356445 100644
--- a/range/index.html
+++ b/range/index.html
@@ -21,6 +21,9 @@
 
 <body>
     <div class="demo">
+        <a href="../index.html" class="home">
+            <img src="../home.svg" alt="home" />
+        </a>
         <h1>Slider</h1>
         <form method="post">
             <input 
