diff --git a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
index 2fbae3b5b7b7e1..11ad63729c2696 100644
--- a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
+++ b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
@@ -1,74 +1,98 @@
 .container {
+  position: relative;
   display: flex;
   flex-direction: column;
   background: #fafafa;
   font-family: "Manrope";
 }
+
 .case_study {
   display: flex;
   flex-direction: column;
   width: 80vw;
   margin: 5rem auto;
+  position: relative;
 
-  .case_study_heading {
-    text-align: center;
-    font-family: "Manrope";
+  .arrow {
+    position: absolute;
+    top: 45%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.3);
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 10;
+  }
 
-    div {
-      font-size: 3.5rem;
-      line-height: normal;
-    }
-    p {
-      font-size: 1.8rem;
-      margin-top: 10px;
-    }
+  .left_arrow {
+    left: -40px;
+  }
+
+  .right_arrow {
+    right: -40px;
   }
 
   .card_row {
     display: flex;
     gap: 1rem;
     margin-top: 30px;
+    overflow-x: auto;
+    white-space: nowrap;
+    scroll-behavior: smooth;
+    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
+    scrollbar-width: none; /* Hide scrollbar in Firefox */
+  }
 
-    .card {
-      position: relative;
-      width: 25%;
-      border-radius: 20px;
-      background: white;
-      padding: 5px;
-      padding-bottom: 15px;
+  .card_row::-webkit-scrollbar {
+    display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
+  }
 
-      img {
-        width: 100%;
-        height: 70%;
-        object-fit: cover;
-        border-radius: 15px;
-      }
-      .card_tag {
-        position: absolute;
-        right: 0.8rem;
-        top: 0.8rem;
-        background: #edf2ff;
-        color: rgb(58, 57, 57);
-        font-size: 10px;
-        padding: 0.3rem;
-        border-radius: 0.5rem;
+  .card {
+    flex: 0 0 auto;
+    width: 25%;
+    min-width: 300px;
+    border-radius: 20px;
+    background: white;
+    padding: 5px;
+    padding-bottom: 15px;
+
+    img {
+      width: 100%;
+      height: 70%;
+      object-fit: cover;
+      border-radius: 15px;
+    }
+
+    .card_tag {
+      position: absolute;
+      right: 0.8rem;
+      top: 0.8rem;
+      background: #edf2ff;
+      color: rgb(58, 57, 57);
+      font-size: 10px;
+      padding: 0.3rem;
+      border-radius: 0.5rem;
+    }
+
+    .card_heading_div {
+      padding: 0 10px 10px;
+
+      .card_heading {
+        font-size: 1.5rem;
+        font-weight: bold;
       }
-      .card_heading_div {
-        padding: 0 10px 10px;
-        .card_heading {
-          font-size: 1.5rem;
-          font-weight: bold;
-        }
-        .card_para {
-          font-size: 1rem;
-          margin-top: 5px;
-          line-height: normal;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+
+      .card_para {
+        font-size: 1rem;
+        margin-top: 5px;
+        line-height: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
@@ -94,8 +118,6 @@
 
 @media (max-width: 480px) {
   .case_study {
-    display: flex;
-    flex-direction: column;
     width: 100%;
     margin: 5rem auto;
 
@@ -110,6 +132,7 @@
         line-height: normal;
         font-weight: 500;
       }
+
       p {
         width: 65%;
         margin: auto;
@@ -120,51 +143,61 @@
     }
 
     .card_row {
-      display: flex;
-      flex-direction: column;
+      flex-direction: row;
       gap: 1rem;
-      margin-top: 30px;
+      overflow-x: scroll;
+      scroll-behavior: smooth;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+
+    .card_row::-webkit-scrollbar {
+      display: none;
+    }
 
-      .card {
-        position: relative;
+    .card {
+      min-width: 70%;
+      flex-shrink: 0;
+      border-radius: 20px;
+      background: white;
+      padding: 5px;
+      padding-bottom: 15px;
+
+      img {
         width: 100%;
-        border-radius: 20px;
-        background: white;
-        padding: 5px;
-        padding-bottom: 15px;
-
-        img {
-          width: 100%;
-          height: 70%;
-          object-fit: cover;
-          border-radius: 15px;
-        }
-        .card_tag {
-          position: absolute;
-          right: 0.8rem;
-          top: 0.8rem;
-          background: #edf2ff;
-          color: rgb(58, 57, 57);
-          font-size: 10px;
-          padding: 0.3rem;
-          border-radius: 0.5rem;
+        height: 70%;
+        object-fit: cover;
+        border-radius: 15px;
+      }
+
+      .card_tag {
+        position: absolute;
+        right: 0.8rem;
+        top: 0.8rem;
+        background: #edf2ff;
+        color: rgb(58, 57, 57);
+        font-size: 10px;
+        padding: 0.3rem;
+        border-radius: 0.5rem;
+      }
+
+      .card_heading_div {
+        padding: 0 10px 10px;
+
+        .card_heading {
+          font-size: 1.5rem;
+          font-weight: bold;
         }
-        .card_heading_div {
-          padding: 0 10px 10px;
-          .card_heading {
-            font-size: 1.5rem;
-            font-weight: bold;
-          }
-          .card_para {
-            font-size: 1rem;
-            margin-top: 5px;
-            line-height: normal;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
+
+        .card_para {
+          font-size: 1rem;
+          margin-top: 5px;
+          line-height: normal;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
     }
diff --git a/docs-website/src/pages/_components/CaseStudy/index.js b/docs-website/src/pages/_components/CaseStudy/index.js
index 018dd3b0b268bb..fcdf4a70821b70 100644
--- a/docs-website/src/pages/_components/CaseStudy/index.js
+++ b/docs-website/src/pages/_components/CaseStudy/index.js
@@ -1,22 +1,48 @@
-import React from "react";
+import React, { useRef } from "react";
 import styles from "./case-study.module.scss";
 
 const CaseStudy = () => {
+  const cardRowRef = useRef(null);
+
+  const handleScrollRight = () => {
+    const slider = cardRowRef.current;
+    slider.scrollBy({
+      left: 300,
+      behavior: "smooth",
+    });
+  };
+
+  const handleScrollLeft = () => {
+    const slider = cardRowRef.current;
+    slider.scrollBy({
+      left: -300,
+      behavior: "smooth",
+    });
+  };
+
   return (
     <div className={styles.container}>
-      {/* Section-1 */}
       <div className={styles.case_study}>
         <div className={styles.case_study_heading}>
           <div>See how Industry leaders use the Datahub</div>
           <p>Across finance, healthcare, e-commerce and more.</p>
         </div>
 
-        <div className={styles.card_row}>
+
+        <button
+          className={`${styles.arrow} ${styles.left_arrow}`}
+          onClick={handleScrollLeft}
+        >
+          ←
+        </button>
+
+        <div className={styles.card_row} ref={cardRowRef}>
+
           <div className={styles.card}>
             <span className={styles.card_tag}>ENTERTAINMENT</span>
             <img
               src="https://i0.wp.com/picjumbo.com/wp-content/uploads/logo-netflix-free-photo.jpg"
-              alt=""
+              alt="Netflix Case Study"
             />
             <div className={styles.card_heading_div}>
               <div className={styles.card_heading}>
@@ -28,6 +54,7 @@ const CaseStudy = () => {
               </div>
             </div>
           </div>
+
           <div className={styles.card}>
             <span className={styles.card_tag}>FINANCE</span>
             <img
@@ -44,6 +71,7 @@ const CaseStudy = () => {
               </div>
             </div>
           </div>
+
           <div className={styles.card}>
             <span className={styles.card_tag}>MEDICAL</span>
             <img
@@ -60,6 +88,7 @@ const CaseStudy = () => {
               </div>
             </div>
           </div>{" "}
+
           <div className={styles.card}>
             <span className={styles.card_tag}>MEDICAL</span>
             <img
@@ -76,6 +105,7 @@ const CaseStudy = () => {
               </div>
             </div>
           </div>
+
           <div className={styles.card}>
             <span className={styles.card_tag}>E-LEARNING</span>
             <img
@@ -92,8 +122,17 @@ const CaseStudy = () => {
               </div>
             </div>
           </div>
+
         </div>
 
+        {/* Right Arrow */}
+        <button
+          className={`${styles.arrow} ${styles.right_arrow}`}
+          onClick={handleScrollRight}
+        >
+          →
+        </button>
+
         <div className={styles.bottom_line}>
           See all adoption stories<span>→</span>
         </div>
diff --git a/docs-website/src/pages/_components/SocialMedia/index.js b/docs-website/src/pages/_components/SocialMedia/index.js
new file mode 100644
index 00000000000000..c3d602948b3448
--- /dev/null
+++ b/docs-website/src/pages/_components/SocialMedia/index.js
@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from "react";
+import styles from "./social-media.module.scss";
+import Test from "./Test";
+
+const SocialMedia = () => {
+  const secondCardRef = useRef(null);
+
+  useEffect(() => {
+    secondCardRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+  }, []);
+  return (
+    <div className={styles.container}>
+      <div className={styles.social_media}>
+        <div className={styles.sm_left}>
+          <div className={styles.sm_left_upper}>
+            <div className={styles.sm_left_upper_left}>
+              <div className={styles.sm_left_upper_leftcontent}>
+                Built <b>for</b> Data Practitioners,
+                <br /> <b>by</b> Data Practitioners
+              </div>
+            </div>
+            <div className={styles.sm_left_upper_right}>
+              <div className={styles.sm_left_upper_rightcontent}></div>
+            </div>
+          </div>
+          <div className={styles.sm_left_lower}>
+            <div className={styles.sm_left_lower_content}>
+              <div className={styles.sm_left_lower_content_text}>
+                Born at LinkedIn, driven by Acryl <br /> and 500+ community
+                contributors.
+              </div>
+              <div className={styles.sm_left_lower_content_media_list}>
+                <div className={styles.sm_left_lower_content_media_item}>
+                  <div className={styles.sm_left_lower_content_media_icon}>
+                    Y
+                  </div>
+                  <div className={styles.sm_left_lower_content_media_name}>
+                    Youtube<span>2.9k subscribers</span>
+                  </div>
+                </div>
+                <div className={styles.sm_left_lower_content_media_item}>
+                  <div className={styles.sm_left_lower_content_media_icon}>
+                    L
+                  </div>
+                  <div className={styles.sm_left_lower_content_media_name}>
+                    LikedIn<span>1.9k subscribers</span>
+                  </div>
+                </div>
+                <div className={styles.sm_left_lower_content_media_item}>
+                  <div className={styles.sm_left_lower_content_media_icon}>
+                    N
+                  </div>
+                  <div className={styles.sm_left_lower_content_media_name}>
+                    Newsletters<span>1.3k subscribers</span>
+                  </div>
+                </div>
+                <div className={styles.sm_left_lower_content_media_item}>
+                  <div className={styles.sm_left_lower_content_media_icon}>
+                    M
+                  </div>
+                  <div className={styles.sm_left_lower_content_media_name}>
+                    Medium<span>1k subscribers</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.sm_right}>
+          <div className={styles.sm_right_card_list}>
+            <div className={styles.sm_right_card}>Card-A</div>
+            <div className={styles.sm_right_card} ref={secondCardRef}>
+              Card-B
+            </div>
+            <div className={styles.sm_right_card}>Card-C</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SocialMedia;
diff --git a/docs-website/src/pages/_components/SocialMedia/social-media.module.scss b/docs-website/src/pages/_components/SocialMedia/social-media.module.scss
new file mode 100644
index 00000000000000..66bb89d6f5d79f
--- /dev/null
+++ b/docs-website/src/pages/_components/SocialMedia/social-media.module.scss
@@ -0,0 +1,159 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  width: 80vw;
+  margin: 5rem auto;
+}
+
+.social_media {
+  height: 500px;
+  border-radius: 2rem;
+  display: flex;
+  justify-content: space-between;
+
+  .sm_left {
+    width: 45%;
+    height: 100%;
+    border-radius: 2rem 0rem 0rem 2rem;
+    display: flex;
+    flex-direction: column;
+
+    //Left Upper
+    .sm_left_upper {
+      width: 100%;
+      height: 30%;
+      display: flex;
+      background: #a5aab8;
+
+      .sm_left_upper_left {
+        width: 80%;
+        background: #ffffff;
+        border-radius: 0 0 3rem 0;
+        padding-right: 1rem;
+        padding-bottom: 1rem;
+
+        .sm_left_upper_leftcontent {
+          height: 100%;
+          background: rgb(240, 239, 239);
+          border-radius: 1rem 2rem 2rem 2rem;
+          padding: 2rem 3rem 2rem 1.5rem;
+          font-size: 1.7rem;
+        }
+      }
+
+      .sm_left_upper_right {
+        width: 20%;
+        background: #ffffff;
+
+        .sm_left_upper_rightcontent {
+          border-radius: 2rem 0 0 0;
+          height: 100%;
+          background: #a5aab8;
+        }
+      }
+    }
+
+    //left Lower
+    .sm_left_lower {
+      width: 100%;
+      height: 70%;
+      background: #a5aab8;
+      border-radius: 2rem 0rem 0rem 2rem;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .sm_left_lower_content {
+        width: 80%;
+        height: 70%;
+        color: #ffffff;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .sm_left_lower_content_text {
+          font-size: 1.3rem;
+        }
+        .sm_left_lower_content_media_list {
+          height: 60%;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+
+          .sm_left_lower_content_media_item {
+            // background: #b38484;
+            border-radius: 0.7rem;
+            padding-left: 0.5rem;
+            width: 48%;
+            height: 45%;
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+
+            .sm_left_lower_content_media_icon {
+              width: 25%;
+              min-width: 25%;
+              height: 70%;
+              border-radius: 0.5rem;
+              background: #d2d3d4;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+
+            .sm_left_lower_content_media_name {
+              height: 75%;
+              padding: 0rem;
+              font-size: 1.5rem;
+              font-weight: 500;
+              display: flex;
+              flex-direction: column;
+              gap: 0;
+              line-height: normal;
+
+              span {
+                font-size: 0.8rem;
+                font-weight: 400;
+              }
+            }
+          }
+
+          .sm_left_lower_content_media_item:hover {
+            border: 1px solid #dddada;
+          }
+        }
+      }
+    }
+  }
+  .sm_right {
+    width: 55%;
+    height: 100%;
+    background: #a5aab8;
+    border-radius: 0rem 2rem 2rem 0rem;
+
+    .sm_right_card_list {
+      width: 50%;
+      margin: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+      overflow-y: auto;
+      scrollbar-width: none;
+      padding: 1rem 0rem;
+    }
+
+    .sm_right_card_list::-webkit-scrollbar {
+      display: none;
+    }
+
+    .sm_right_card {
+      background: #FFFFFF;
+      width: 80%;
+      min-height: 65%;
+      border-radius: 1rem;
+    }
+  }
+}
diff --git a/docs-website/src/pages/index.js b/docs-website/src/pages/index.js
index 1c8bc31076e0a8..809a36684bc8d8 100644
--- a/docs-website/src/pages/index.js
+++ b/docs-website/src/pages/index.js
@@ -16,6 +16,7 @@ import Ecosystem from "./_components/Ecosystem";
 import Community from "./_components/Community";
 import CaseStudy from "./_components/CaseStudy";
 import Trial from "./_components/Trial";
+import SocialMedia from "./_components/SocialMedia";
 
 const example_recipe = `
 source:
@@ -63,6 +64,7 @@ function Home() {
       {/* <Features /> */}
       <Ecosystem />
       <Community />
+      <SocialMedia />
       <CaseStudy />
       <Trial />
       {/* <Section>