diff --git a/pages/index.jsx b/pages/index.jsx
index 16b9575..37f8543 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -7,13 +7,12 @@ export default function Home() {
     <div>
       <Head>
         <title>StackDemo</title>
-        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"/>
+        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-        <meta name="author" content="BrowserStack"/>
+        <meta name="author" content="BrowserStack" />
       </Head>
       <App />
-      <footer>
-      </footer>
+
     </div>
   )
 }
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 3440a51..749bb49 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -3,24 +3,40 @@ import "./style.scss";
 
 const Footer = () => {
   return (
-    <footer>
+    <div>
       <hr style={{ padding: "0", margin: "0" }} />
       <img className="m-auto h-56 " alt="flowchart main" style={{ minWidth: '860px', minHeight: '320px' }} src={require(`../../../public/static/FlowchartBstackdemo.png`)} />
-      <div className="mx-auto max-w-8xl px-6">
+      <div class="gradient-fail-bg example">Exclusive offers coming soon</div>
+
+      <div className="mx-auto max-w-8xl px-6 " style={{ justifyContent: 'space-between' }}>
+        <div class="footer-section-wrapper" id="custom-footer">
+          <div class="container">
+
+            <div class="footer-links">
+              <a href="/offers">Offers</a>
+              <br />
+              <a href="/contact">Contact Us</a>
+              <br />
+              <a href="/privacy">Privacy Policy</a>
+              <br />
+              <a href="/careers">Careers</a>
+            </div>
+            <ul>
+              <li>A single, simple list item.</li>
+            </ul>
+            <p>© 2026 BrowserStack Demo</p>
+          </div>
+          <span className="block absolute" style={{ right: "16px" }}>
+            Privacy Policy <a href="/">Read More</a>
+          </span>
+        </div>
         <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
           <div className=" relative" style={{ width: "40%" }}>
-            <span className="block absolute">
-              © 2020 BrowserStack. All rights reserved.
-            </span>
-            <span className="block absolute" style={{ right: "0%" }}>
-              Privacy Policy <a href="/">Read More</a>
-            </span>
           </div>
           <Newsletter />
         </div>
       </div>
-      <div class="gradient-fail-bg example">Exclusive offers coming soon</div>
-    </footer>
+    </div>
   );
 };
 
diff --git a/src/components/Footer/style.scss b/src/components/Footer/style.scss
index 399094f..a639e18 100644
--- a/src/components/Footer/style.scss
+++ b/src/components/Footer/style.scss
@@ -15,3 +15,6 @@
   position: relative;
 //   color: white;
 }
+#custom-footer{
+  padding: 16px;
+}
diff --git a/src/components/Newsletter/index.jsx b/src/components/Newsletter/index.jsx
index 56f6eb3..4e5cdc3 100644
--- a/src/components/Newsletter/index.jsx
+++ b/src/components/Newsletter/index.jsx
@@ -4,7 +4,6 @@ import './style.scss';
 const Newsletter = () => {
   return (
     <form>
-      <label htmlFor="newsletter-email">Subscribe to newsletter</label>
       <input
         id="newsletter-email"
         name="email-addr"
@@ -13,6 +12,7 @@ const Newsletter = () => {
         placeholder="Email"
         required
       />
+      <button type="submit" className="bg-blue-500 text-white p-2">Subscribe to Newsletter</button>
     </form>
   );
 };
diff --git a/src/components/Shelf/ShelfHeader/index.jsx b/src/components/Shelf/ShelfHeader/index.jsx
index 553b705..8762fda 100644
--- a/src/components/Shelf/ShelfHeader/index.jsx
+++ b/src/components/Shelf/ShelfHeader/index.jsx
@@ -6,13 +6,22 @@ import Clearfix from '../../Clearfix';
 
 const ShelfHeader = props => {
   return (
-    <div className="shelf-container-header" style={{marginRight: '50px'}}>
-      <small className="products-found">
-        <span>{props.productsLength} Product(s) found.</span>
-      </small>
-      <Sort />
-      <Clearfix />
-    </div>
+    <>
+      <div style={{
+        fontSize: '1.5em',
+        fontWeight: 'bold',
+        margin: '0.67em 0'
+      }}>
+        Products
+      </div >
+      <div className="shelf-container-header" style={{ marginRight: '50px' }}>
+        <small className="products-found">
+          <h3>{props.productsLength} Product(s) found.</h3>
+        </small>
+        <Sort />
+        <Clearfix />
+      </div>
+    </>
   );
 };
 
