diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index fc72b7063..2a495d78f 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -222,7 +222,7 @@ color: #F58667;
     font-size: 0.75rem;
     line-height: 1rem;
     color: #fff;
-    margin-left: -40px;
+    /* margin-left: -40px; */
     margin-top: 0.5rem;
   }
   .footer-section-second .columns > div {
@@ -276,4 +276,14 @@ color: #F58667;
   .footer-section-first .columns > div > div:last-child {
     margin-right: 20%;
   }
+  .footer-section-second .columns-2-cols ul li p:first-child{
+    padding-bottom: unset;
+  }
+  .footer-section-third .imgwithlink-wrapper .imgwithlink .image-href-mobile img{
+    height: 2.375rem;
+    width: 100%;
+  }
+  .footer-section-third {
+    flex-direction: column;
+  }
 }
diff --git a/blocks/keyfeatures/keyfeatures.css b/blocks/keyfeatures/keyfeatures.css
index e69de29bb..caebf01ea 100644
--- a/blocks/keyfeatures/keyfeatures.css
+++ b/blocks/keyfeatures/keyfeatures.css
@@ -0,0 +1,140 @@
+/* .section.home-loans-products-wrapper.grid-container{
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+} */
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation{
+    margin-top: 40px;
+ }
+ .section.home-loans-products-wrapper .default-content-wrapper #more-home-loan-products{
+    color: #000;
+    font-family: Nunito-Extrabold, sans-serif;
+    font-size: 32px;
+    font-weight: 800;
+    line-height: 40px;
+    padding-bottom: 8px;
+ }
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container{
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper {
+    position: relative;
+}
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link{
+    background: #fff9f2;
+    border-radius: 9pt 9pt 0 0;
+    display: flex;
+    gap: 24px;
+    justify-content: start;
+    padding: 1pc 24px 40px;
+    flex-direction: column-reverse;
+}
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures{
+    /* padding: 0 24px 16px; */
+}
+.homeloanteaser a:nth-child(2) img{
+    position: absolute;
+    top: 17px;
+    right: 24px;
+    height: 32px;
+    width: 32px;
+}
+
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link:hover{
+    text-decoration: none;
+}
+
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__content p{
+    color: #666;
+    font-family: Nunito-Regular, sans-serif;
+    font-size: 1pc;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__content p:nth-child(1) strong{
+    color: #000;
+    font-family: Nunito-Extrabold, sans-serif;
+    font-size: 18px;
+    font-weight: 800;
+    line-height: 28px;
+}
+.cmp-teaser__link .cmp-teaser__image img{
+    height: 12px;
+    width: 137px;
+}
+
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .cmp-teaser__link .cmp-teaser__image .cmp-image__image{
+    height: 12px;
+    width: 137px;
+}
+.homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info {
+    position: relative;
+    background-color: #fff4e7;
+    border-radius: 8px;
+    height: 100%;
+    position: relative;
+    z-index: 20;
+}
+.homeloanteaser .cmp-teaser .keyfeature-container{
+    border-top: 1px solid #eeebeb;
+}
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .plusicon,
+
+.section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container .keyfeatures-wrapper .keyfeatures .homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .minusicon{
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    top: 20px;
+    z-index: -1;
+    top: 20px;
+    right: 24px
+}
+.homeloanteaser .cmp-teaser .keyfeature-container .keyfeatures-info .heading{
+    color: #333;
+    cursor: pointer;
+    font-family: Nunito-Bold, sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    padding: 16px 24px;
+}
+
+.homeloanteaser .keyfeature-container .keyfeatures .feature{
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-top: 24px;
+}
+.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details{
+    padding-left: 16px;
+}
+
+.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details div p:first-child{
+    color: #666;
+    font-family: Nunito-Regular, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+}
+.homeloanteaser .keyfeature-container .keyfeatures .feature .feature-details div p:last-child strong{
+    color: #333;
+    font-family: Nunito-Bold, sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 26px;
+    padding-top: 4px;
+}
+.keyfeature-container .keyfeatures-info .keyfeatures{
+    padding: 0 24px 16px;
+}
+
+@media screen and (max-width: 767.99px) {
+    .section.home-loans-products-wrapper .wrappercreation-wrapper .wrappercreation .wrapper-creation-container{
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/blocks/keyfeatures/keyfeatures.js b/blocks/keyfeatures/keyfeatures.js
index 1c0b3e1ea..1f3418e6d 100644
--- a/blocks/keyfeatures/keyfeatures.js
+++ b/blocks/keyfeatures/keyfeatures.js
@@ -1,31 +1,36 @@
 export default function decorate(block) {
-    const props = [...block.children].map( row => row);
+    const props = [...block.children].map(row => row);
     const getHTML = generateFeatureHTML(props);
     const newDivFeature = document.createElement('div');
     newDivFeature.innerHTML = getHTML;
     block.innerHTML = '';
     block.append(newDivFeature);
+    try {
+        featureDropDownClick()
+    } catch (error) {
+        console.log(error)
+    }
 }
 
 function generateFeatureHTML(props) {
     let [
-        containerLink, 
-        cardDescription, 
-        leftSideImage, 
-        leftSideImageAlt, 
-        rightSideImage, 
+        containerLink,
+        cardDescription,
+        leftSideImage,
+        leftSideImageAlt,
+        rightSideImage,
         rightSideImageAlt,
         rightSideImageLink,
         keyFeatureTitle,
         keyFeatureImagePlus,
         keyFeatureImageMinus,
-        keyFeatureInnerImage1, 
+        keyFeatureInnerImage1,
         keyFeatureInnerText1,
-        keyFeatureInnerImage2, 
+        keyFeatureInnerImage2,
         keyFeatureInnerText2,
         keyFeatureInnerImage3,
         keyFeatureInnerText3,
-    ] 
+    ]
         = props;
 
     containerLink = containerLink.textContent.trim();
@@ -46,8 +51,8 @@ function generateFeatureHTML(props) {
     keyFeatureInnerImage2 = keyFeatureInnerImage2.querySelector('div > picture > img').src;
     keyFeatureInnerImage3 = keyFeatureInnerImage3.querySelector('div > picture > img').src;
 
-  // Generate HTML
-  const html = `<div class="homeloanteaser teaser">
+    // Generate HTML
+    const html = `<div class="homeloanteaser teaser">
     <div id="" class="cmp-teaser">
         <a class="cmp-teaser__link" href="${containerLink}">
             <div class="cmp-teaser__content">
@@ -57,8 +62,7 @@ function generateFeatureHTML(props) {
                 <div data-cmp-is="image"
                     data-cmp-filereference="${leftSideImage}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope=""
                     itemtype="">
-                    <img src=""
-                        loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="${leftSideImageAlt}" src="${leftSideImage}">
+                    <img loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="${leftSideImageAlt}" src="${leftSideImage}">
                 </div>
             </div>
         </a>
@@ -109,6 +113,36 @@ function generateFeatureHTML(props) {
     </div>
 </div>`
 
-return html;
+    return html;
 }
 
+
+function featureDropDownClick() {
+    var featureClick = document.querySelectorAll('.keyfeatures-info .heading')
+    featureClick.forEach(function (btn) {
+        btn.addEventListener('click', function (e) {
+            e.stopImmediatePropagation();
+            var wrapperContainer = this.closest('.wrapper-creation-container');
+            var keyfeaturesList = wrapperContainer.querySelectorAll('.keyfeatures-info .keyfeatures');
+            keyfeaturesList.forEach(function (keyfeatures) {
+                if (keyfeatures.style.display === 'none') {
+                    keyfeatures.style.display = 'block';
+                    document.querySelectorAll('.plusicon').forEach(function (icon) {
+                        icon.style.display = 'none';
+                    })
+                    document.querySelectorAll('.minusicon').forEach(function (icon) {
+                        icon.style.display = 'block';
+                    })
+                } else {
+                    keyfeatures.style.display = 'none';
+                    document.querySelectorAll('.plusicon').forEach(function (icon) {
+                        icon.style.display = 'block';
+                    })
+                    document.querySelectorAll('.minusicon').forEach(function (icon) {
+                        icon.style.display = 'none';
+                    })
+                }
+            });
+        })
+    })
+}
\ No newline at end of file
diff --git a/component-filters.json b/component-filters.json
index a89c1ce69..87ce9ae15 100644
--- a/component-filters.json
+++ b/component-filters.json
@@ -27,8 +27,19 @@
       "imgwithlink",
       "carousel",
       "teaser",
+      "tab-container",
       "tabs",
-      "accordion-group"
+      "detailed-teaser",
+      "accordion-group",
+      "teaserv2",
+      "code",
+      "contentfragment",
+      "experiencefragment",
+      "wrappercreation",
+      "container",
+      "mycontainer",
+      "keyfeatures",
+      "embed"
     ]
   },
   {
diff --git a/styles/styles.css b/styles/styles.css
index 8be8f05a7..f18661940 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -417,11 +417,11 @@ main img {
 
 
 /* common classes for banner background start */ 
-.teaser.block.bg--lilen>.background{
+.teaser.block.--lilen>.background{
   background-color: var(--lilen);
 }
 
-.teaser.block.bg--rosewhite>.background{
+.teaser.block.--rosewhite>.background{
   background-color: var(--rosewhite);
 }
 
@@ -430,7 +430,7 @@ main img {
   background-size: 100% 100%;
 }
 
-.teaser.block.bg----skyblue>.background {
+.teaser.block.--skyblue>.background {
   background-color: var(--skyblue);
 }
 /* common classes for banner background end */