diff --git a/src/Home & Kitchen/footer_.css b/src/Home & Kitchen/footer_.css
new file mode 100644
index 00000000..4f17f7b4
--- /dev/null
+++ b/src/Home & Kitchen/footer_.css	
@@ -0,0 +1,459 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+._1ZMrY_ {
+    display: grid;
+    grid-template-columns: repeat(6,1fr);
+    padding: 40px 60px 0;
+    -webkit-column-gap: 20px;
+    column-gap: 20px
+}
+
+._3I5N7v {
+    color: #878787;
+    font-size: 12px;
+    margin-bottom: 12px
+}
+
+._2l3nc- {
+    margin-right: 16px
+}
+
+._1UkyFI {
+    margin-bottom: 16px
+}
+
+._31kgzK {
+    display: flex;
+    align-items: center
+}
+
+._1oQ-r6 {
+    cursor: text;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.MkhHNl {
+    font-size: 12px;
+    white-space: nowrap
+}
+
+.MkhHNl.btl4ck {
+    border-left: 1px solid #454d5e;
+    padding-left: 32px
+}
+
+.MkhHNl p {
+    white-space: nowrap;
+    color: #fff;
+    font-size: 12px;
+    line-height: 18px
+}
+
+.MkhHNl a {
+    color: #2874f0
+}
+
+.HlWMPX {
+    font-family: inter_semi_bold,fallback-inter_semi_bold,Arial,sans-serif;
+    font-size: 12px;
+    color: #fff;
+    display: block;
+    line-height: 18px;
+    text-decoration: none;
+}
+
+.HlWMPX:hover {
+    text-decoration: underline
+}
+
+.c4gehN {
+    display: flex;
+    align-items: center
+}
+
+.c4gehN a {
+    margin-left: 8px;
+    font-size: 12px;
+    line-height: 18px
+}
+
+.c4gehN a,.pCGSTE {
+    color: #fff
+}
+
+.KSr9-T {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    width: 90%
+}
+
+.KSr9-T ._2KSh8A {
+    color: hsla(0,0%,100%,.6);
+    line-height: 30px
+}
+
+.KSr9-T ._2KSh8A span {
+    color: hsla(0,0%,100%,.6)!important
+}
+
+.KSr9-T ._2KSh8A ._4VlZa2 {
+    padding: 0 5px;
+    border-right: 1px solid #878787
+}
+
+.KSr9-T ._2KSh8A ._4VlZa2:last-child {
+    border-right: none
+}
+
+.KSr9-T ._2KSh8A ._3IcjOc {
+    color: #2874f0
+}
+
+.KSr9-T ._2KSh8A ._2QNIBI {
+    font-family: inter_semi_bold,fallback-inter_semi_bold,Arial,sans-serif
+}
+
+._1HSe4t {
+    border-top: 1px solid #454d5e;
+    padding: 25px 0;
+    margin-top: 40px;
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center
+}
+
+@media (min-width: 768px) and (max-width:1191px) {
+    ._1ZMrY_ {
+        grid-template-columns:repeat(3,1fr);
+        padding: 40px 20px 0;
+        grid-column-gap: 20px;
+        -webkit-column-gap: 12px;
+        column-gap: 12px
+    }
+
+    ._1ZMrY_>:nth-child(n+4):nth-child(-n+6) {
+        margin-top: 20px
+    }
+
+    .MkhHNl {
+        padding: 0
+    }
+
+    .MkhHNl.btl4ck {
+        border: none;
+        padding-left: 0
+    }
+}
+
+@media (min-width: 768px) and (max-width:900px) {
+    ._1HSe4t,.c4gehN a {
+        font-size:8px
+    }
+
+    .c4gehN a {
+        margin-left: 4px
+    }
+}
+
+@media (max-width: 767px) {
+    ._1ZMrY_ {
+        grid-template-columns:repeat(1,1fr);
+        padding: 40px 20px 0;
+        -webkit-column-gap: 20px;
+        column-gap: 20px
+    }
+
+    ._1ZMrY_>div:not(:first-child) {
+        margin: 12px 0 0
+    }
+
+    .MkhHNl {
+        padding: 0
+    }
+
+    .MkhHNl.btl4ck {
+        border: none;
+        padding-left: 0
+    }
+
+    ._1HSe4t {
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        padding: 0 20px;
+        margin-top: 10px
+    }
+
+    ._1HSe4t * {
+        margin: 8px 0
+    }
+}
+
+.jF78FJ {
+    padding: 30px;
+    color: #878787;
+    background-color: #f5f5f5
+}
+
+.jF78FJ ._1o2Zk0 {
+    line-height: 16px;
+    font-size: 12px
+}
+
+.jF78FJ ._1o2Zk0 h1 {
+    font-size: 16px;
+    margin-bottom: 10px
+}
+
+.jF78FJ ._1o2Zk0 h2,.jF78FJ ._1o2Zk0 h3,.jF78FJ ._1o2Zk0 h4 {
+    font-size: 14px;
+    margin-bottom: 10px
+}
+
+.jF78FJ ._1o2Zk0 a {
+    color: #2874f0
+}
+
+.jF78FJ ._1o2Zk0 table {
+    width: 50%;
+    border-collapse: collapse;
+    margin: 10px 0
+}
+
+.jF78FJ ._1o2Zk0 td,.jF78FJ ._1o2Zk0 th {
+    border: 1px solid #878787;
+    padding-left: 5px
+}
+
+.jF78FJ ._1o2Zk0 li,.jF78FJ ._1o2Zk0 ol,.jF78FJ ._1o2Zk0 ul {
+    list-style: decimal inside
+}
+
+.TKplD7 {
+    background: #212121;
+    border-top: 1px solid #f5f5f5;
+    margin-top: 25px
+}
+
+.-qLUdm {
+    width: 100%
+}
+
+._1UgUYI {
+    display: none;
+    position: absolute;
+    box-shadow: 0 8px 8px 1px rgba(0,0,0,.3);
+    border-radius: 8px;
+    background-color: #fff;
+    z-index: 100;
+    font-family: inter_regular,fallback-inter_regular,Arial,sans-serif;
+    overflow: hidden;
+    line-height: 20px
+}
+
+._1UgUYI ._16rZTH {
+    min-width: 240px
+}
+
+._1UgUYI ._16rZTH object {
+    display: flex;
+    flex-direction: column
+}
+
+._1UgUYI ._16rZTH object ._1BJVlg {
+    display: flex;
+    width: 100%;
+    padding: 12px 16px;
+    background-color: #fff;
+    justify-content: space-between
+}
+
+._1UgUYI ._16rZTH object ._1BJVlg ._3Pzn-c {
+    display: none;
+    content: "";
+    position: relative;
+    height: 6px;
+    width: 6px;
+    border-color: #111112;
+    border-style: solid;
+    border-width: 0 1px 1px 0;
+    transform-origin: 50% 50%;
+    transform: translateY(75%) rotate(-45deg)
+}
+
+._1UgUYI ._16rZTH object ._1BJVlg:hover,._1UgUYI ._16rZTH object ._11MZbx {
+    background-color: #f0f5ff;
+    font-family: inter_semi_bold,fallback-inter_semi_bold,Arial,sans-serif
+}
+
+._1UgUYI ._16rZTH object ._1BJVlg:hover ._3Pzn-c,._1UgUYI ._16rZTH object ._11MZbx ._3Pzn-c {
+    display: inline-block
+}
+
+._1UgUYI ._31z7R_ {
+    min-height: 100%;
+    min-width: 240px;
+    box-shadow: 0 8px 8px 1px rgba(0,0,0,.3)
+}
+
+._1UgUYI ._31z7R_ object {
+    display: flex;
+    flex-direction: column
+}
+
+._1UgUYI ._31z7R_ object .uAl2uE {
+    font-size: 12px;
+    line-height: 18px;
+    font-family: inter_semi_bold,fallback-inter_semi_bold,Arial,sans-serif;
+    padding: 8px 16px
+}
+
+._1UgUYI ._31z7R_ object ._3490ry {
+    line-height: 20px;
+    padding: 12px 16px
+}
+
+._1UgUYI ._31z7R_ object ._3490ry:hover {
+    font-family: inter_semi_bold,fallback-inter_semi_bold,Arial,sans-serif
+}
+
+@media (min-width: 768px) {
+    ._2eN8ye {
+        display:flex
+    }
+
+    ._1wE2Px {
+        z-index: 100;
+        position: absolute
+    }
+
+    ._23axDd {
+        background-color: transparent;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        z-index: 99;
+        top: 0;
+        left: 0
+    }
+}
+
+button {
+    border: 0;
+    outline: 0;
+    background-color: transparent
+}
+
+._3sdu8W {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    z-index: 10000;
+    min-height: 40px;
+    color: #111112;
+    background-color: #fff
+}
+
+@media (max-width: 1192px) {
+    ._3sdu8W {
+        overflow-x:scroll;
+        justify-content: normal
+    }
+}
+
+._3sdu8W.emupdz {
+    background: #fff;
+    min-height: 126px
+}
+
+._3sdu8W._1XD520 {
+    background: #fff
+}
+
+._1ch8e_ {
+    min-width: 90px;
+    padding: 16px;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    box-sizing: content-box
+}
+
+._1ch8e_ div>.YBLJE4 {
+    text-align: center
+}
+
+._1ch8e_ div>.YBLJE4 ._3ETuFY {
+    margin-bottom: 4px
+}
+
+@media (min-width: 1192px) {
+    ._1ch8e_ div>.YBLJE4 ._3ETuFY {
+        margin-bottom:12px
+    }
+}
+
+._1ch8e_ div>.YBLJE4 ._1XjE3T {
+    font-family: inter_semi_bold,fallback-inter_semi_bold,Arial,sans-serif;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+._1ch8e_ div>.YBLJE4 ._1XjE3T ._27h2j1 {
+    margin-left: 8px
+}
+
+._1ch8e_ div>.YBLJE4 ._1XjE3T ._27h2j1:before {
+    content: "";
+    display: inline-block;
+    position: relative;
+    height: 6px;
+    width: 6px;
+    border-color: #111112;
+    border-style: solid;
+    border-width: 0 2px 2px 0;
+    transform: scale(1) translateY(-50%) rotate(45deg);
+    transform-origin: 50% 50%;
+    transition: transform .3s
+}
+
+@media (max-width: 767px) {
+    ._1ch8e_ div>.YBLJE4 ._1XjE3T {
+        font-family:inter_regular,fallback-inter_regular,Arial,sans-serif;
+        font-size: 12px;
+        line-height: 16px
+    }
+}
+
+@media (max-width: 767px) {
+    ._1ch8e_ {
+        min-width:90px;
+        padding: 12px 12px 8px
+    }
+
+    ._1ch8e_ div>.YBLJE4 ._1XjE3T ._27h2j1,._1ch8e_ div>.YBLJE4 ._1XjE3T ._27h2j1:before {
+        display: none
+    }
+}
+
+._1mZ8pZ div>.YBLJE4 ._1XjE3T {
+    color: #2874f0
+}
+
+._1mZ8pZ div>.YBLJE4 ._1XjE3T ._27h2j1:before {
+    transform-origin: 50% 50%;
+    transform: scale(1) translateY(0) rotate(-135deg);
+    border-color: #2874f0
+}
+
+._1ch8e_:first-child,._1ch8e_:last-child {
+    padding-left: 24px
+}
diff --git a/src/Home & Kitchen/index.html b/src/Home & Kitchen/index.html
index ca325309..3370cc74 100644
--- a/src/Home & Kitchen/index.html	
+++ b/src/Home & Kitchen/index.html	
@@ -4,27 +4,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Flipkart</title>
+    <title id="pageTitle">Flipkart</title>
+    <link rel="shortcut icon" href="../../img/flipkart_lite.png" type="image/x-icon">
+    <link rel="stylesheet" href="../../css/bootstrap.min.css">
 </head>
 
 <body>
-    <header id="header" class="text-center text-secondary fs-4"></header>
-    <h1 style="text-align: center;">Comming Soon</h1>
+    <header id="header" style="height: 60px; background: #2604a1;;"></header>
+    <div id="component" class="row m-1"></div>
     <footer id="footer" style="background-color: #203a61 !important"></footer>
-    <script>
-        document.addEventListener("DOMContentLoaded", () => {
-            [
-                { id: "footer", url: "../../components/footer.html" },
-                { id: "header", url: "../../components/header.html" },
-            ].forEach(({ id, url }) =>
-                fetch(url)
-                    .then((res) => res.text())
-                    .then((data) => (document.getElementById(id).innerHTML = data))
-                    .catch((err) => console.error(`Error loading ${url}:`, err))
-            );
-        });
-
-    </script>
+    <script src="thisComponet.js"></script>
+    <script src="../../js/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/Home & Kitchen/thisComponet.js b/src/Home & Kitchen/thisComponet.js
new file mode 100644
index 00000000..fd27843c
--- /dev/null
+++ b/src/Home & Kitchen/thisComponet.js	
@@ -0,0 +1,66 @@
+document.addEventListener("DOMContentLoaded", () => {
+    [
+        { id: "footer", url: "../../components/footer.html" },
+        { id: "header", url: "../../components/header.html" },
+    ].forEach(({ id, url }) =>
+        fetch(url)
+            .then((res) => res.text())
+            .then((data) => (document.getElementById(id).innerHTML = data))
+            .catch((err) => console.error(`Error loading ${url}:`, err))
+    );
+});
+// end header and footer 
+
+// javascript for title
+let path = window.location.pathname;
+let firstSlashIndex = path.indexOf('/');
+let secondSlashIndex = path.indexOf('/', firstSlashIndex + 1);
+let fileName = path.substring(secondSlashIndex + 1);
+let [a,b] =fileName.split('/');
+document.getElementById('pageTitle').textContent = a;
+
+// javascript for products
+// Function to create a product card
+function createelectronicsProductCard(product) {
+    const discont=(Math.floor(product.rating*(parseInt((product.price.toString()).slice(0,2)))/10))
+    const afterDiscontPrice=Math.round((100-discont)*product.price/100)
+  
+    function formatIndianRupee(number) {
+      const parts = number.toString().split(".");
+      const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      const formattedNumber = parts.length > 1 ? integerPart + "." + parts[1] : integerPart;
+      return formattedNumber;
+    }
+    
+    return `
+    <style>
+    .products div{font-size:14px}.products img:hover{transform:scale(1.1)}.products{font-size:medium;display:flex;flex-direction:column;align-items:center}.rating{background-color:green;width:fit-content;padding:0 16px;border-radius:5px;color:#fff}.products .product_Img{height:150px}.products img{padding:1px;width:100%;height:100%;object-fit:contain}
+    </style>
+      <a class="btn col-lg-2 col-md-3 col-sm-4 col-6 p-2" href="../../addtokart/?query=${product.name}">
+          <div class="products">
+              <div class="text-center product_Img img-fluid">
+                  <img src="https://raw.githubusercontent.com/csathnere/APIs/main/json-ec/product-img/${product.productImg}" alt="${product.id}">
+              </div>
+              <div class="text-center card-title pt-1">${product.name.slice(0, 20)} ${product.name.length > 20 ? "<b>...</b>":""}</div>
+              <div class="text-center mb-1 rating">${product.rating} &nbsp<i class="bi bi-star-fill"></i></div>
+              <div class="text-center"><strong>₹${formatIndianRupee(afterDiscontPrice)}</strong> <del style="color:#878787">₹${formatIndianRupee(product.price)}</del> <span style="color:#388e3c"> ${discont}% off </span></div>
+          </div>
+      </a>
+  `;
+    }
+  
+  
+  function electronicsFetch(g) {
+    const electronicsList = document.getElementById('component');
+    electronicsList.innerHTML = g.map(product => createelectronicsProductCard(product)).join('');
+  }
+  
+  
+  // Fetch data from the JSON file and electronics for each brand
+  fetch('https://raw.githubusercontent.com/csathnere/APIs/main/json-ec/product.json')
+    .then(response => response.json())
+    .then(data => {
+      const g = data.filter(product => product.category.toLowerCase().includes('home'));
+      electronicsFetch(g);
+      })
+      .catch(error => console.error('Error fetching data:', error));
\ No newline at end of file