diff --git a/images/shyam_tala.jpg b/images/shyam_tala.jpg
new file mode 100644
index 0000000..f04731a
Binary files /dev/null and b/images/shyam_tala.jpg differ
diff --git a/index.html b/index.html
index e80ce8d..cfd9bba 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
     <!-- circular range slider -->
     <link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css">
     <script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
-    
+
     <!-- general style sheet -->
     <link rel="stylesheet" href="./style.css">
 
@@ -27,15 +27,20 @@
 
     <div class="color_maker color_maker_close">
         <div class="gradient_card" id="gradient_card_edit">
-            <button id="close"><ion-icon name="close"></ion-icon></button>
-            <input type="text" class="circle-range-select" id="rangeSlider" data-single-value data-auto-init value="34" onchange="generateGradient()">
+            <button id="close">
+                <ion-icon name="close"></ion-icon>
+            </button>
+            <input type="text" class="circle-range-select" id="rangeSlider" data-single-value data-auto-init value="34"
+                onchange="generateGradient()">
             <div class="gradient_info">
                 <div class="colors" id="color_inputs">
-                    <button id="add_input_btn" onclick="addColorInputer()"><ion-icon name="add-outline"></ion-icon></button>
+                    <button id="add_input_btn" onclick="addColorInputer()">
+                        <ion-icon name="add-outline"></ion-icon>
+                    </button>
                     <input class="color colorinput" type="color" value="#6d28d9" id="c1" oninput="generateGradient()">
                     <input class="color colorinput" type="color" value="#db2777" id="c2" oninput="generateGradient()">
                 </div>
-                
+
                 <div class="title_with_copy_btn">
                     <button class="copy_to_clipboard" id="color_maker_copy_btn"
                         data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);">
@@ -81,13 +86,56 @@
 
     </div>
 
+    <footer>
+        <p class="text">Join my newsletter to hear about new projects, content and articles that I publish.</p>
+        <div class="subscription_form">
+            <input type="email" placeholder="Enter your email" name="email" id="email_input">
+            <button class="subscribe">
+                <ion-icon name="mail-outline"></ion-icon> Subscribe
+            </button>
+        </div>
+
+        <div class="contributor_desc">
+            <img src="./images/shyam_tala.jpg" class="profile" alt="">
+            <div class="desc">
+                <p class="title">Hey there, 👋</p>
+                <p class="detailed d1">I’m Shyam - a full-stack developer, blogger and the creator of this web app.</p>
+                <p class="detailed d2">I love all things related to front-end development and love connecting with
+                    individuals.</p>
+                <a href="https://shyamtala.netlify.app/">Learn more about me</a>
+            </div>
+        </div>
+
+        <div class="social_links">
+            <a href="#">
+                <ion-icon name="logo-twitter"></ion-icon>
+            </a>
+            <a href="#">
+                <ion-icon name="logo-instagram"></ion-icon>
+            </a>
+            <a href="#">
+                <ion-icon name="logo-github"></ion-icon>
+            </a>
+            <a href="#">
+                <ion-icon name="logo-linkedin"></ion-icon>
+            </a>
+        </div>
+
+        <p class="copyright">© <script>
+                let year = new Date().getFullYear();
+                document.write(year);
+            </script> Monogradient. All rights reserved.</p>
+    </footer>
+
 
     <!-- ion icon cdn script -->
     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 
     <!-- JQuery cdn -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
+        integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <!-- copy to clipboard -->
     <script src="dist/clipboard.min.js"></script>
diff --git a/style.css b/style.css
index b83eacd..04d90d3 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,7 @@
 }
 
 ::-webkit-scrollbar {
-    display: none;
+    /* display: none; */
 }
 
 /* code for toast msg */
@@ -382,4 +382,191 @@ main.hero_section {
         .gradient_info p {
             font-size: .9rem;
         }
+    }
+
+    footer
+    {
+        padding: 4rem 8%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: .5rem;
+        justify-content: center;
+        font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-size: 18px;
+        line-height: 28px;
+        color: #374151;
+    }
+
+    footer p.text
+    {
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 400;
+    }
+
+    .subscription_form
+    {
+        max-width: 650px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    footer input[type="email"]
+    {
+        padding: 10px;
+        border: 2px solid #D1D5DB;
+        font-size: .8rem;
+        width:100%;
+        border-radius: 5px;
+    }
+
+    footer input[type="email"]::placeholder
+    {
+        padding: 10px;
+        font-size: .8rem;
+    }
+
+    footer input[type="email"]:focus
+    {
+        border: 1px solid #7c3aed;
+        outline: none;
+    }
+
+    button.subscribe
+    {
+        padding: 12px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        background:linear-gradient(to right, #6d28d9, #db2777);
+        color: #ffffff;
+        font-size: .8rem;
+        font-weight: 600;
+        border-radius: 5px;
+        transition: all .5s;
+    }
+
+    button.subscribe:hover
+    {
+        background:linear-gradient(90deg,#fd746c, #ff9068);
+        transform: translateY(-10%);
+        box-shadow: 0px 3px 10px #c2c6cc;
+    }
+
+    button.subscribe ion-icon
+    {
+        font-size: 1.2rem;
+        --ionicon-stroke-width: 36px;
+    }
+
+    .contributor_desc
+    {
+        margin-top: 2rem;
+        max-width: 650px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 2rem;
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    .contributor_desc img.profile
+    {
+        width: 80px;
+        border-radius: 50%;
+    }
+
+    .desc .title
+    {
+        font-weight: 700;
+    }
+
+    .desc .detailed
+    {
+        font-weight: 400;
+        line-height: 20px;
+        color: #374151;
+    }
+
+    .desc a
+    {
+        display: inline-block;
+        margin-top: 5px;
+        font-size: 16px;
+        color: #be185d;
+        border-bottom: 2px solid;
+    }
+
+    .social_links
+    {
+        margin-top: 5rem;
+        display: flex;
+        gap: 1.8rem;
+        font-size: 1.3rem;
+    }
+
+    .social_links a
+    {
+        font-size: 1.3rem;
+        color:#9ca3af;
+        transition: all .4s;
+    }
+
+    .social_links a:hover
+    {
+        color:#737982;
+        transform: translateY(-20%);
+    }
+
+    p.copyright
+    {
+        margin-top: .5rem;
+        color: #9ca3af;
+        font-size: 1rem;
+        line-height: 1.2rem;
+        text-align: center;
+    }
+
+    @media screen and (max-width:510px){
+        footer
+        {
+            padding: 1rem 15px;
+        }
+
+        footer p.text
+        {
+            font-size: 16px;
+            line-height: 24px;
+            font-weight: 400;
+        }
+        
+        .subscription_form
+        {
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .subscription_form .subscribe
+        {
+            width: 100%;
+        }
+
+        .contributor_desc
+        {
+            /* flex-direction: column; */
+            gap: .6rem;
+        }
+
+        .desc .detailed.d2
+        {
+
+            display: none;
+        }
     }
\ No newline at end of file