diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
index f8e65b5180..2ed8bd245a 100644
--- a/react/css/CHANGELOG.md
+++ b/react/css/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.30] - 2024-09-06
+### Changed
+- Added LandingPageCard,MenuCard styles
+
 ## [0.0.2-beta.29] - 2024-09-05
 ### Changed
 - Added Accordion animation styles
diff --git a/react/css/package.json b/react/css/package.json
index 875eb689f7..81b9b4ed52 100644
--- a/react/css/package.json
+++ b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.29",
+  "version": "0.0.2-beta.30",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
diff --git a/react/css/src/digitv2/components/headerdropdownV2.scss b/react/css/src/digitv2/components/headerdropdownV2.scss
index ff275d6e09..a8759ec288 100644
--- a/react/css/src/digitv2/components/headerdropdownV2.scss
+++ b/react/css/src/digitv2/components/headerdropdownV2.scss
@@ -71,11 +71,15 @@
     box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
     max-height: 80%;
     background-color: theme(digitv2.lightTheme.paper-primary);
-    margin-top: theme(digitv2.spacers.spacer5);
+    margin-top: theme(digitv2.spacers.spacer6);
     position: fixed;
     min-width: 14rem;
     max-width: 25rem;
     @apply z-30 overflow-y-auto overflow-x-hidden;
+
+    &.underProfile{
+      margin-top: theme(digitv2.spacers.spacer5);
+    }
   }
   
   .header-dropdown-search-container {
diff --git a/react/css/src/digitv2/components/landingpagecardV2.scss b/react/css/src/digitv2/components/landingpagecardV2.scss
new file mode 100644
index 0000000000..db4a4ea250
--- /dev/null
+++ b/react/css/src/digitv2/components/landingpagecardV2.scss
@@ -0,0 +1,144 @@
+.digit-landing-page-card {
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    box-shadow: theme(digitv2.spacers.spacer0) 1px 2px theme(digitv2.spacers.spacer0) #00000029;
+    max-width: 30%;
+    min-width: 15%;
+    gap: theme(digitv2.spacers.spacer4);
+    border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        max-width: 90%
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        max-width: 60%;
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        max-width: 30%;
+    }
+
+    .icon-module-header {
+        display: flex !important;
+        align-items: center !important;
+        gap: theme(digitv2.spacers.spacer2);
+
+        .digit-landingpagecard-icon {
+            display: flex;
+            align-items: center;
+
+            &.iconBg {
+                background-color: theme(digitv2.lightTheme.primary-1);
+            }
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+
+        .ladingcard-moduleName {
+            @extend .typography.heading-m;
+            color: theme(digitv2.lightTheme.primary-2);
+            overflow: hidden;
+            word-wrap: break-word;
+            word-break: break-word;
+            line-height: normal;
+        }
+
+        &.left {
+            justify-content: space-between;
+        }
+    }
+
+    .metric-container {
+        display: flex !important;
+        align-items: flex-start;
+        justify-content: space-evenly;
+
+
+        &.left {
+            justify-content: unset;
+            /*gap: 7.5rem;*/
+        }
+
+        .metric-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            cursor: pointer;
+            flex: 1;
+
+            &.left {
+                align-items: flex-start;
+            }
+
+            .metric-count {
+                @extend .typography.heading-m;
+                color: theme(digitv2.lightTheme.text-primary);
+            }
+
+            .metric-label {
+                @extend .typography.body-xs;
+                overflow: hidden;
+                word-wrap: break-word;
+                word-break: break-word;
+                line-height: normal;
+                color: theme(digitv2.lightTheme.generic-inputborder);
+                font-family: theme(digitv2.fontFamily.sans);
+                font-style: theme(digitv2.fontStyle.normal);
+                font-weight: theme(digitv2.fontWeight.regular);
+                line-height: theme(digitv2.lineHeight.lineheight2);
+
+                @media (max-aspect-ratio: 9/16) {
+                    /* Media query for mobile */
+                    font-size: theme(digitv2.fontSize.body-xs.mobile);
+                }
+
+                @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                    /* Media query for tablets */
+                    font-size: theme(digitv2.fontSize.body-xs.tablet);
+                }
+
+                @media (min-aspect-ratio: 3/4) {
+                    /* Media query for desktop */
+                    font-size: theme(digitv2.fontSize.body-xs.desktop);
+                }
+            }
+        }
+    }
+
+    .digit-button-teritiary {
+        justify-content: flex-start;
+    }
+
+}
+
+.digit-landingpage-divider {
+    width: 100%;
+    margin: theme(digitv2.spacers.spacer0);
+}
+
+.digit-landing-page-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        flex-direction: column;
+        gap: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        gap: theme(digitv2.spacers.spacer6);
+    }
+}
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/menuCardV2.scss b/react/css/src/digitv2/components/menuCardV2.scss
new file mode 100644
index 0000000000..83ba20586b
--- /dev/null
+++ b/react/css/src/digitv2/components/menuCardV2.scss
@@ -0,0 +1,92 @@
+.digit-menu-card {
+
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer3);
+    justify-content: flex-start;
+    cursor: pointer;
+
+    .icon-menu-header {
+
+        display: flex !important;
+        align-items: center;
+        gap: theme(digitv2.spacers.spacer2);
+
+        .digit-menucard-icon {
+
+            @media (max-aspect-ratio: 9/16) {
+                /* Media query for mobile */
+                width: theme(digitv2.spacers.spacer6);
+                height: theme(digitv2.spacers.spacer6);
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                /* Media query for tablets */
+                width: theme(digitv2.spacers.spacer8);
+                height: theme(digitv2.spacers.spacer8);
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+                /* Media query for desktop */
+                width: theme(digitv2.spacers.spacer10);
+                height: theme(digitv2.spacers.spacer10);
+            }
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+
+        .digit-menuacard-menuName {
+            @extend .typography.heading-m;
+            line-height: normal;
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+    .digit-menucard-description {
+        @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
+
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+}
+
+.digit-menu-card-wrapper{
+    display: flex !important;
+    flex-direction: column;
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        gap: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        gap: theme(digitv2.spacers.spacer6);
+    }
+
+}
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/mobilesidebarV2.scss b/react/css/src/digitv2/components/mobilesidebarV2.scss
index 2dbb95a42d..40a242c136 100644
--- a/react/css/src/digitv2/components/mobilesidebarV2.scss
+++ b/react/css/src/digitv2/components/mobilesidebarV2.scss
@@ -219,6 +219,7 @@
 .digit-msb-no-results{
   @extend .typography.body-s;
   display: flex;
+  text-align: center;
   flex-direction: column;
   height: theme(digitv2.spacers.spacer12);
   padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer6);
diff --git a/react/css/src/digitv2/components/sidebarV2.scss b/react/css/src/digitv2/components/sidebarV2.scss
index 4edeaa1f7d..81800f2c98 100644
--- a/react/css/src/digitv2/components/sidebarV2.scss
+++ b/react/css/src/digitv2/components/sidebarV2.scss
@@ -11,6 +11,8 @@
     padding-top: 1.563rem;
     padding-left: theme(digitv2.spacers.spacer3);
     padding-right: theme(digitv2.spacers.spacer3);
+    transition: width 0.5s ease;
+    z-index: 10000;
 
     &.hovered {
         width: auto;
diff --git a/react/css/src/digitv2/components/topbarV2.scss b/react/css/src/digitv2/components/topbarV2.scss
index 46f828dd05..1f46324db8 100644
--- a/react/css/src/digitv2/components/topbarV2.scss
+++ b/react/css/src/digitv2/components/topbarV2.scss
@@ -195,7 +195,7 @@
     z-index: 9999999;
     display: flex;
     background-color: theme(digitv2.lightTheme.paper-primary);
-    height: 4rem;
+    height: 4.5rem;
     padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer10);
   
     .margin-top-10 {
diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
index d37e329465..827018cf95 100644
--- a/react/css/src/digitv2/index.scss
+++ b/react/css/src/digitv2/index.scss
@@ -42,6 +42,8 @@
 @import url("./components/mobilesidebarV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
 @import url("./components/tagV2.scss");
+@import url("./components/landingpagecardV2.scss");
+@import url("./components/menuCardV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");
diff --git a/react/example/package.json b/react/example/package.json
index 8c43bc98c2..727586c65a 100644
--- a/react/example/package.json
+++ b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
diff --git a/react/example/public/index.html b/react/example/public/index.html
index 8c3e537328..a53b277d30 100644
--- a/react/example/public/index.html
+++ b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.29/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.30/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
diff --git a/react/modules/core/package.json b/react/modules/core/package.json
index 6663873247..296dc3a160 100644
--- a/react/modules/core/package.json
+++ b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
index d3c4b412e2..6ed1c73385 100644
--- a/react/modules/sample/package.json
+++ b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",
diff --git a/react/package.json b/react/package.json
index b4b8cf8d1e..bea2aedaee 100644
--- a/react/package.json
+++ b/react/package.json
@@ -79,13 +79,13 @@
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
-    "@egovernments/digit-ui-components-css":"0.0.2-beta.29",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.30",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
     "@egovernments/digit-ui-module-project": "0.3.4",
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.11",
-    "@egovernments/digit-ui-components": "0.0.2-beta.34",
+    "@egovernments/digit-ui-components": "0.0.2-beta.35",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",
diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
index b60a9d3163..18ed072fb9 100644
--- a/react/ui-components/CHANGELOG.md
+++ b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.2-beta.35] - 2024-09-06
+### New Changes
+- Added LandingPageCard,MenuCard Molecules
+
 ## [0.0.2-beta.34] - 2024-09-05
 ### New Changes
 - Updated Accordion with animation
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index e7cf6318cd..f5895fd66c 100644
--- a/react/ui-components/package.json
+++ b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.34",
+  "version": "0.0.2-beta.35",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
index c677fa560f..c1e37320d7 100644
--- a/react/ui-components/src/atoms/Dropdown.js
+++ b/react/ui-components/src/atoms/Dropdown.js
@@ -555,6 +555,7 @@ const Dropdown = (props) => {
             onSelect={onSelect}
             showBottom={props?.showBottom}
             style={props?.menuStyles}
+            className={props?.profilePic ? "underProfile" : ""}
           />
         </div>
       )}
diff --git a/react/ui-components/src/atoms/Menu.js b/react/ui-components/src/atoms/Menu.js
index a2d41f1acb..679c4fcc0a 100644
--- a/react/ui-components/src/atoms/Menu.js
+++ b/react/ui-components/src/atoms/Menu.js
@@ -48,7 +48,7 @@ const Menu = (props) => {
     <div
       className={`header-dropdown-menu ${
         props?.footerdropdown ? "footer-dropdown" : ""
-      } ${props?.showBottom ? "showBottom" : ""}`}
+      } ${props?.showBottom ? "showBottom" : ""} ${props?.className || ""}`}
       ref={props?.ref}
       style={props?.style}
     >
diff --git a/react/ui-components/src/atoms/MobileSidebar.js b/react/ui-components/src/atoms/MobileSidebar.js
index 544c575fd5..a2e03e20eb 100644
--- a/react/ui-components/src/atoms/MobileSidebar.js
+++ b/react/ui-components/src/atoms/MobileSidebar.js
@@ -16,7 +16,6 @@ const MobileSidebar = ({
   theme,
   className,
   styles,
-  isSearchable,
   hideUserManuals,
   userManualLabel,
   profile,
@@ -72,9 +71,9 @@ const MobileSidebar = ({
       if (item?.label?.toLowerCase().includes(searchTerm.toLowerCase())) {
         return true;
       }
-      if (item.children) {
-        item.children = filterItems(item.children, searchTerm);
-        return item.children.length > 0;
+      if (item?.children) {
+        item.children = filterItems(item?.children, searchTerm);
+        return item?.children.length > 0;
       }
       return false;
     });
@@ -98,7 +97,7 @@ const MobileSidebar = ({
   );
 
   const handleArrowClick = (item, index, parentIndex) => {
-    if (item.children) {
+    if (item?.children) {
       setExpandedItems((prev) => ({
         ...prev,
         [index]: !prev[index],
@@ -153,9 +152,9 @@ const MobileSidebar = ({
               onClick={() => handleArrowClick(item, currentIndex, parentIndex)}
               tabIndex={0}
             >
-              {item.icon && Icon(item.icon,"digit-msb-icon")}
+              {item?.icon && Icon(item?.icon,"digit-msb-icon")}
               {<span className="digit-msb-item-label">{item?.label}</span>}
-              {item.children && (
+              {item?.children && (
                 <span className="digit-msb-expand-icon">
                   {isExpanded ? (
                     <SVG.ArrowDropDown
@@ -179,13 +178,13 @@ const MobileSidebar = ({
               )}
             </div>
           </div>
-          {item.children && isExpanded && (
+          {item?.children && isExpanded && (
             <div className="digit-msb-sidebar-children expanded">
-              {isSearchable && renderSearch(currentIndex)}
-              {filterItems(item.children, searchTerms[currentIndex] || "")
+              {item?.isSearchable && renderSearch(currentIndex)}
+              {filterItems(item?.children, searchTerms[currentIndex] || "")
                 .length > 0 ? (
                 renderChildItems(
-                  filterItems(item.children, searchTerms[currentIndex] || ""),
+                  filterItems(item?.children, searchTerms[currentIndex] || ""),
                   currentIndex,
                   false
                 )
@@ -202,7 +201,7 @@ const MobileSidebar = ({
     items?.map((item, index) => {
       const currentIndex = parentIndex >= 0 ? `${parentIndex}-${index}` : index;
       const isExpanded = expandedItems[currentIndex];
-      const icon = item.icon ? Icon(item.icon,"digit-icon-msb") : null;
+      const icon = item?.icon ? Icon(item?.icon,"digit-icon-msb") : null;
       return (
         <>
           <div className={"digit-item-child-wrapper-msb"} key={currentIndex}>
@@ -218,13 +217,13 @@ const MobileSidebar = ({
               {
                 <span
                   className={`digit-item-label-msb ${
-                    (!item.icon || !icon) ? "withoutIcon" : ""
+                    (!item?.icon || !icon) ? "withoutIcon" : ""
                   }`}
                 >
                   {item?.label}
                 </span>
               }
-              {item.children && (
+              {item?.children && (
                 <span
                   className={`digit-expand-icon-msb ${"child-level"}`}
                   onClick={(e) => {
@@ -258,9 +257,9 @@ const MobileSidebar = ({
             className={`digit-inner-level-child ${theme || ""}`}
             key={currentIndex}
           >
-            {item.children && isExpanded && (
+            {item?.children && isExpanded && (
               <div className="digit-sidebar-children-msb">
-                {renderChildItems(item.children, currentIndex)}
+                {renderChildItems(item?.children, currentIndex)}
               </div>
             )}
           </div>
diff --git a/react/ui-components/src/atoms/Sidebar.js b/react/ui-components/src/atoms/Sidebar.js
index e39a078d86..08548d6095 100644
--- a/react/ui-components/src/atoms/Sidebar.js
+++ b/react/ui-components/src/atoms/Sidebar.js
@@ -245,7 +245,7 @@ const Sidebar = ({
             : !hovered && collapsedWidth
             ? collapsedWidth
             : undefined,
-        transition: `width ${transitionDuration}s`,
+        transition: `width ${transitionDuration || 0.5}s`,
         ...styles,
       }}
       onMouseEnter={() => setHovered(true)}
@@ -260,7 +260,7 @@ const Sidebar = ({
         {filteredItems.length > 0 ? (
           renderItems(filteredItems)
         ) : (
-          <div className="digit-msb-no-results">{t("No Results Found")}</div>
+          hovered && <div className="digit-msb-no-results">{t("No Results Found")}</div>
         )}
       </div>
       {hovered && !hideAccessbilityTools && (
diff --git a/react/ui-components/src/atoms/stories/Hamburger.stories.js b/react/ui-components/src/atoms/stories/Hamburger.stories.js
index c636e09f20..10153a9108 100644
--- a/react/ui-components/src/atoms/stories/Hamburger.stories.js
+++ b/react/ui-components/src/atoms/stories/Hamburger.stories.js
@@ -31,6 +31,7 @@ const Template = (args) => (
 const darkThemeItems = [
   {
     label: "City",
+    isSearchable:false,
     icon:"Home",
     children: [
       {
@@ -47,6 +48,7 @@ const darkThemeItems = [
   },
   {
     label: "Language",
+    isSearchable:false,
     children: [
       {
         path: "/",
@@ -62,6 +64,7 @@ const darkThemeItems = [
   },
   {
     label: "SideNav",
+    isSearchable:true,
     children: [
       {
         path: "/",
@@ -93,6 +96,7 @@ const lightThemeItems = [
   {
     label: "City",
     icon:"Home",
+    isSearchable:false,
     children: [
       {
         path: "/",
@@ -108,6 +112,7 @@ const lightThemeItems = [
   },
   {
     label: "Language",
+    isSearchable:false,
     children: [
       {
         path: "/",
@@ -123,6 +128,7 @@ const lightThemeItems = [
   },
   {
     label: "SideNav",
+    isSearchable:true,
     children: [
       {
         path: "/",
diff --git a/react/ui-components/src/atoms/stories/SideBar.stories.js b/react/ui-components/src/atoms/stories/SideBar.stories.js
index 4ea00295bb..566886d306 100644
--- a/react/ui-components/src/atoms/stories/SideBar.stories.js
+++ b/react/ui-components/src/atoms/stories/SideBar.stories.js
@@ -313,7 +313,7 @@ const onBottomItemClick =(e) => {
 
 const commonArgs = {
   items: darkThemeitems,
-  transitionDuration: 0.3,
+  transitionDuration: 0.5,
   theme: "dark",
   onSelect:onSelect,
   onBottomItemClick:onBottomItemClick
diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js
index b5b8fde666..c232dbf935 100644
--- a/react/ui-components/src/index.js
+++ b/react/ui-components/src/index.js
@@ -110,7 +110,11 @@ import {
   TextInputCard,
   PanelCard,
   TooltipWrapper,
-  TimelineMolecule
+  TimelineMolecule,
+  LandingPageCard,
+  MenuCard,
+  LandingPageWrapper,
+  MenuCardWrapper
 } from "./molecules";
 
 // import { initCoreLibraries } from "@egovernments/digit-ui-libraries-core";
@@ -203,6 +207,10 @@ export {
   MultiUploadWrapper,
   SearchAction,
   SearchForm,
+  LandingPageCard,
+  MenuCard,
+  MenuCardWrapper,
+  LandingPageWrapper,
   SearchOnRadioButtons,
   TextInputCard,
   PanelCard,
diff --git a/react/ui-components/src/molecules/LandingPageCard.js b/react/ui-components/src/molecules/LandingPageCard.js
new file mode 100644
index 0000000000..336d45196f
--- /dev/null
+++ b/react/ui-components/src/molecules/LandingPageCard.js
@@ -0,0 +1,167 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { Card, Divider, Button, StringManipulator } from "../atoms";
+import { iconRender } from "../utils/iconRender";
+import { Colors } from "../constants/colors/colorconstants";
+
+const LandingPageCard = ({
+  icon,
+  moduleName,
+  metrics = [],
+  links = [],
+  className,
+  styles,
+  moduleAlignment,
+  hideDivider,
+  metricAlignment,
+  iconBg,
+  onMetricClick,
+}) => {
+  const history = useHistory();
+
+  const handleMetricClick = (link, count) => {
+    onMetricClick && onMetricClick(link, count);
+  };
+
+  const handleLinkClick = ({ link, label, icon }) => {
+    history?.push(link);
+  };
+  const primaryIconColor = Colors.lightTheme.primary[1];
+  const secondaryIconColor = Colors.lightTheme.paper.primary;
+
+  return (
+    <Card
+      className={`digit-landing-page-card ${moduleAlignment || ""} ${className}`}
+      style={styles}
+    >
+      <div className={`icon-module-header ${moduleAlignment || ""}`}>
+        {icon && moduleAlignment === "right" && (
+          <div
+            className={`digit-landingpagecard-icon ${iconBg ? "iconBg" : ""}`}
+          >
+            {iconRender(
+              icon,
+              iconBg ? secondaryIconColor : primaryIconColor,
+              "56px",
+              "56px",
+              `digit-landingpagecard-icon ${iconBg ? "iconBg" : ""}`
+            )}
+          </div>
+        )}
+        {moduleName && (
+          <div className="ladingcard-moduleName">
+            {StringManipulator(
+              "TOSENTENCECASE",
+              StringManipulator("TRUNCATESTRING", moduleName, {
+                maxLength: 64,
+              })
+            )}
+          </div>
+        )}
+        {icon && moduleAlignment === "left" && (
+          <div
+            className={`digit-landingpagecard-icon ${iconBg ? "iconBg" : ""}`}
+          >
+            {iconRender(
+              icon,
+              iconBg ? secondaryIconColor : primaryIconColor,
+              "56px",
+              "56px",
+              `digit-landingpagecard-icon ${iconBg ? "iconBg" : ""}`
+            )}
+          </div>
+        )}
+      </div>
+      {!hideDivider && (
+        <Divider className="digit-landingpage-divider" variant={"small"} />
+      )}
+      {metrics && metrics.length > 0 && (
+        <div className={`metric-container ${metricAlignment || ""}`}>
+          {metrics.map((metric, index) => (
+            <div
+              key={index}
+              className={`metric-item ${metricAlignment || ""}`}
+              onClick={() => handleMetricClick(metric?.link, metric?.count)}
+            >
+              {metric?.count && (
+                <div className="metric-count">{metric?.count}</div>
+              )}
+              {metric?.label && (
+                <div className="metric-label">
+                  {" "}
+                  {StringManipulator(
+                    "TOSENTENCECASE",
+                    StringManipulator("TRUNCATESTRING", metric?.label, {
+                      maxLength: 64,
+                    })
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {!hideDivider &&
+        metrics &&
+        metrics.length > 0 &&
+        links &&
+        links.length > 0 && (
+          <Divider className="digit-landingpage-divider" variant={"small"} />
+        )}
+      {links.map(({ label, link, icon }, index) => (
+        <Button
+          variation="teritiary"
+          label={label}
+          icon={icon}
+          type="button"
+          size={"medium"}
+          onClick={() => handleLinkClick({ link, label, icon })}
+          style={{ padding: "0px" }}
+        />
+      ))}
+    </Card>
+  );
+};
+
+LandingPageCard.propTypes = {
+  icon: PropTypes.node.isRequired,
+  moduleName: PropTypes.string.isRequired,
+  moduleAlignment: PropTypes.string,
+  metrics: PropTypes.arrayOf(
+    PropTypes.shape({
+      count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      label: PropTypes.string,
+      link: PropTypes.string,
+    })
+  ),
+  metricAlignment: PropTypes.string,
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      label: PropTypes.string,
+      link: PropTypes.string,
+    })
+  ),
+  className: PropTypes.string,
+  styles: PropTypes.object,
+  hideDivider: PropTypes.bool,
+  iconBg: PropTypes.bool,
+  onMetricClick: PropTypes.func,
+};
+
+LandingPageCard.defaultProps = {
+  metris: [],
+  links: [],
+  className: "",
+  styles: {},
+  moduleAlignment: "right",
+  metricAlignment: "left",
+  moduleName: "",
+  icon: "",
+  iconBg: false,
+  hideDivider: false,
+  onMetricClick: () => {},
+};
+
+export default LandingPageCard;
diff --git a/react/ui-components/src/molecules/LandingPageWrapper.js b/react/ui-components/src/molecules/LandingPageWrapper.js
new file mode 100644
index 0000000000..a29fd53f9e
--- /dev/null
+++ b/react/ui-components/src/molecules/LandingPageWrapper.js
@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+const LandingPageWrapper = ({ children, className, styles }) => {
+  const wrapperRef = useRef(null);
+  const [maxWidth, setMaxWidth] = useState(0);
+  const [maxHeight, setMaxHeight] = useState(0);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      // Get all child card elements
+      const cardElements = Array.from(wrapperRef.current.children);
+
+      // Calculate the maximum width of the cards
+      const maxCardWidth = Math.max(
+        ...cardElements.map((child) => child.getBoundingClientRect().width)
+      );
+
+      // Calculate the maximum height of the cards
+      const maxCardHeight = Math.max(
+        ...cardElements.map((child) => child.getBoundingClientRect().height)
+      );
+
+      // Set the maximum width to the state
+      setMaxWidth(maxCardWidth);
+
+      // Set the maximum height to the state
+      setMaxHeight(maxCardHeight);
+    }
+  }, [children]); // Recalculate when children change
+
+  return (
+    <div
+      className={`digit-landing-page-wrapper ${className}`}
+      style={styles}
+      ref={wrapperRef}
+    >
+      {React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+          style: {
+            ...child.props.style,
+            width: `${maxWidth}px`,
+            height: `${maxHeight}px`,
+          },
+        })
+      )}
+    </div>
+  );
+};
+
+LandingPageWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  styles: PropTypes.object,
+};
+
+LandingPageWrapper.defaultProps = {
+  className: "",
+  styles: {},
+};
+
+export default LandingPageWrapper;
diff --git a/react/ui-components/src/molecules/MenuCard.js b/react/ui-components/src/molecules/MenuCard.js
new file mode 100644
index 0000000000..116b4beec5
--- /dev/null
+++ b/react/ui-components/src/molecules/MenuCard.js
@@ -0,0 +1,78 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Card, StringManipulator } from "../atoms";
+import { iconRender } from "../utils/iconRender";
+import { Colors } from "../constants/colors/colorconstants";
+
+const MenuCard = ({
+  icon,
+  menuName,
+  className,
+  styles,
+  description,
+  onClick,
+}) => {
+  const primaryIconColor = Colors.lightTheme.primary[1];
+
+  return (
+    <Card
+      className={`digit-menu-card ${className}`}
+      style={styles}
+      onClick={onClick}
+    >
+      <div className={`icon-menu-header`}>
+        {icon && (
+          <div className={`digit-menucard-icon`}>
+            {iconRender(
+              icon,
+              primaryIconColor,
+              "40px",
+              "40px",
+              `digit-menucard-icon`
+            )}
+          </div>
+        )}
+        {menuName && (
+          <div className="digit-menuacard-menuName">
+            {StringManipulator(
+              "TOSENTENCECASE",
+              StringManipulator("TRUNCATESTRING", menuName, {
+                maxLength: 64,
+              })
+            )}
+          </div>
+        )}
+      </div>
+      {description && (
+        <div className="digit-menucard-description">
+          {StringManipulator(
+            "TOSENTENCECASE",
+            StringManipulator("TRUNCATESTRING", description, {
+              maxLength: 256,
+            })
+          )}
+        </div>
+      )}
+    </Card>
+  );
+};
+
+MenuCard.propTypes = {
+  icon: PropTypes.node.isRequired,
+  menuName: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  className: PropTypes.string,
+  styles: PropTypes.object,
+  onClick: PropTypes.func,
+};
+
+MenuCard.defaultProps = {
+  className: "",
+  styles: {},
+  menuName: "",
+  description: "",
+  icon: "",
+  onClick: () => {},
+};
+
+export default MenuCard;
diff --git a/react/ui-components/src/molecules/MenuCardWrapper.js b/react/ui-components/src/molecules/MenuCardWrapper.js
new file mode 100644
index 0000000000..f95d4cbe0e
--- /dev/null
+++ b/react/ui-components/src/molecules/MenuCardWrapper.js
@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const MenuCardWrapper = ({ children, className, styles }) => {
+  return (
+    <div className={`digit-menu-card-wrapper ${className}`} style={styles}>
+      {children}
+    </div>
+  );
+};
+
+MenuCardWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  styles: PropTypes.object,
+};
+
+MenuCardWrapper.defaultProps = {
+  className: "",
+  styles: {
+  },
+};
+
+export default MenuCardWrapper;
diff --git a/react/ui-components/src/molecules/index.js b/react/ui-components/src/molecules/index.js
index 7264092ecb..f36084a567 100644
--- a/react/ui-components/src/molecules/index.js
+++ b/react/ui-components/src/molecules/index.js
@@ -17,6 +17,10 @@ import WorkflowStatusFilter from "./WorkflowStatusFilter";
 import PanelCard from "./PanelCard";
 import TimelineMolecule from "./TimelineMolecule";
 import TooltipWrapper from "./TooltipWrapper";
+import LandingPageCard from "./LandingPageCard";
+import LandingPageWrapper from "./LandingPageWrapper";
+import MenuCard from "./MenuCard";
+import MenuCardWrapper from "./MenuCardWrapper";
 
 export {
   ApiDropdown,
@@ -37,5 +41,9 @@ export {
   WorkflowStatusFilter,
   PanelCard,
   TimelineMolecule,
-  TooltipWrapper
+  TooltipWrapper,
+  LandingPageCard,
+  MenuCard,
+  LandingPageWrapper,
+  MenuCardWrapper
 };
diff --git a/react/ui-components/src/molecules/stories/LandingPageCard.stories.js b/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
new file mode 100644
index 0000000000..c3df87b127
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
@@ -0,0 +1,160 @@
+import React from "react";
+import LandingPageCard from "../../molecules/LandingPageCard";
+
+export default {
+  title: "Molecules/LandingPageCard",
+  component: LandingPageCard,
+  argTypes: {
+    icon: { control: "object" },
+    moduleName: { control: "text" },
+    metrics: { control: "array" },
+    links: { control: "array" },
+    className: { control: "text" },
+    styles: { control: "object" },
+    moduleAlignment: { control: "select", options: ["left", "right"] },
+    metricAlignment: { control: "select", options: ["left", "centre"] },
+    iconBg: { control: "boolean" },
+    onMetricClick: { control: "action" },
+  },
+};
+
+const Template = (args) => <LandingPageCard {...args} />;
+
+const commonArgs = {
+  icon: "SupervisorAccount",
+  variation: "one",
+  moduleName: "Dashboards",
+  moduleAlignment: "right",
+  metrics: [
+    {
+      count: 40,
+      label: "Lorem Ipsum",
+      link:
+        "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+    },
+    {
+      count: 40,
+      label: "Lorem Ipsum",
+      link:
+        "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+    },
+  ],
+  links: [
+    {
+      label: "Create User",
+      link:
+        "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+      icon: "Add",
+    },
+    {
+      label: "Edit User",
+      link:
+        "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+      icon: "Edit",
+    },
+    {
+      label: "View User",
+      link:
+        "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+      icon: "Preview",
+    },
+    {
+      label: "Delete User",
+      link:
+        "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+      icon: "Delete",
+    },
+  ],
+  className: "",
+  metricAlignment: "left",
+  styles: {},
+  iconBg: false,
+  onMetricClick: (metric, count) => {
+    console.log(metric, count);
+  },
+};
+
+const longmetriclabel = [
+  {
+    count: 40,
+    label: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    link:
+      "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+  },
+  {
+    count: 40,
+    label: "Lorem Ipsum",
+    link:
+      "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
+  },
+]
+export const RightModuleAlignment = Template.bind({});
+RightModuleAlignment.args = {
+  ...commonArgs,
+};
+
+export const RightModuleAlignmentWithIconBg = Template.bind({});
+RightModuleAlignmentWithIconBg.args = {
+  ...commonArgs,
+  iconBg: true,
+};
+
+export const LeftModuleAlignment = Template.bind({});
+LeftModuleAlignment.args = {
+  ...commonArgs,
+  moduleAlignment: "left",
+};
+
+export const LeftModuleAlignmentWithIconBg = Template.bind({});
+LeftModuleAlignmentWithIconBg.args = {
+  ...commonArgs,
+  moduleAlignment: "left",
+  iconBg: true,
+};
+
+export const LeftMetricAlignment = Template.bind({});
+LeftMetricAlignment.args = {
+  ...commonArgs,
+};
+
+export const CentreMetricAlignment = Template.bind({});
+CentreMetricAlignment.args = {
+  ...commonArgs,
+  metricAlignment: "centre",
+};
+
+export const WithoutIcon = Template.bind({});
+WithoutIcon.args = {
+  ...commonArgs,
+  icon:""
+};
+
+export const WithoutMetrics = Template.bind({});
+WithoutMetrics.args = {
+  ...commonArgs,
+  metrics: [],
+};
+
+export const WithoutLinks = Template.bind({});
+WithoutLinks.args = {
+  ...commonArgs,
+  links: [],
+};
+
+// export const LongText = Template.bind({});
+// LongText.args = {
+//   ...commonArgs,
+//   moduleName:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+//   metrics:longmetriclabel
+// };
+
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+  ...commonArgs,
+  styles: {
+    backgroundColor: "#fafafa",
+    padding: "20px",
+    borderRadius: "8px",
+    border: "2px solid black",
+  },
+};
diff --git a/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js b/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
new file mode 100644
index 0000000000..b6ed4963a4
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
@@ -0,0 +1,92 @@
+import React, { Fragment } from "react";
+import LandingPageCard from "../LandingPageCard";
+import LandingPageWrapper from "../LandingPageWrapper";
+
+export default {
+  title: "MoleculeGroup/LandingPageWrapper",
+  component: LandingPageWrapper,
+};
+
+const Template = (args) => <LandingPageWrapper {...args} />;
+
+export const Example1 = Template.bind({});
+
+Example1.args = {
+  children: (
+    <>
+      <LandingPageCard
+        icon="SupervisorAccount"
+        moduleName="Dashboard"
+        metrics={[
+          { count: 10, label: "Active Users", link: "#" },
+          { count: 20, label: "New Users", link: "#" },
+        ]}
+        links={[{ label: "View Dashboard", link: "#", icon: "Dashboard" }]}
+      />
+      <LandingPageCard
+        icon="Person"
+        moduleName="User Management"
+        metrics={[
+          { count: 100, label: "Total Users", link: "#" },
+          { count: 50, label: "New Registrations", link: "#" },
+        ]}
+        links={[
+          { label: "Add User", link: "#", icon: "Add" },
+          { label: "Edit User", link: "#", icon: "Edit" },
+        ]}
+      />
+      <LandingPageCard
+        icon="Notifications"
+        moduleName="Notifications"
+        metrics={[{ count: 5, label: "New Notifications", link: "#" }]}
+        links={[
+          { label: "View Notifications", link: "#", icon: "Notifications" },
+        ]}
+      />
+    </>
+  ),
+};
+
+export const Example2 = Template.bind({});
+
+Example2.args = {
+  children: (
+    <>
+      <LandingPageCard
+        icon="SupervisorAccount"
+        moduleAlignment={"left"}
+        iconBg={true}
+        moduleName="Dashboard"
+        metrics={[
+          { count: 10, label: "Active Users", link: "#" },
+          { count: 20, label: "New Users", link: "#" },
+        ]}
+        links={[{ label: "View Dashboard", link: "#", icon: "Dashboard" }]}
+      />
+      <LandingPageCard
+        icon="Person"
+        moduleAlignment={"left"}
+        iconBg={true}
+        moduleName="User Management"
+        metrics={[
+          { count: 100, label: "Total Users", link: "#" },
+          { count: 50, label: "New Registrations", link: "#" },
+        ]}
+        links={[
+          { label: "Add User", link: "#", icon: "Add" },
+          { label: "Edit User", link: "#", icon: "Edit" },
+        ]}
+      />
+      <LandingPageCard
+        moduleAlignment={"left"}
+        iconBg={true}
+        icon="Notifications"
+        moduleName="Notifications"
+        metrics={[{ count: 5, label: "New Notifications", link: "#" }]}
+        links={[
+          { label: "View Notifications", link: "#", icon: "Notifications" },
+        ]}
+      />
+    </>
+  ),
+};
diff --git a/react/ui-components/src/molecules/stories/MenuCard.stories.js b/react/ui-components/src/molecules/stories/MenuCard.stories.js
new file mode 100644
index 0000000000..0bcf92f4e5
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/MenuCard.stories.js
@@ -0,0 +1,77 @@
+import React from "react";
+import MenuCard from "../MenuCard";
+
+export default {
+  title: "Molecules/MenuCard",
+  component: MenuCard,
+  argTypes: {
+    icon: { control: "text" },
+    menuName: { control: "text" },
+    description: { control: "text" },
+    className: { control: "text" },
+    styles: { control: "object" },
+    onClick: { action: "clicked" },
+  },
+};
+
+const Template = (args) => <MenuCard {...args} />;
+
+// Default story for MenuCard
+export const Default = Template.bind({});
+Default.args = {
+  icon: "Article",
+  menuName: "Menu",
+  description:
+    "Use this checklist to supervise the team formation for Registration & Distribution",
+  className: "",
+  styles: {},
+  onClick:(e)=>{console.log(e)}
+};
+
+// MenuCard without description
+export const WithoutDescription = Template.bind({});
+WithoutDescription.args = {
+  icon: "Article",
+  menuName: "Menu",
+  className: "",
+  styles: {},
+};
+
+// Default story for MenuCard
+// export const WithLongMenuName = Template.bind({});
+// WithLongMenuName.args = {
+//   icon: "Article",
+//   menuName:
+//     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+//   description:
+//     "Use this checklist to supervise the team formation for Registration & Distribution",
+//   className: "",
+//   styles: {},
+// };
+
+// MenuCard with a longer description
+// export const WithLongDescription = Template.bind({});
+// WithLongDescription.args = {
+//   icon: "Article",
+//   menuName: "Menu",
+//   description:
+//     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+//   className: "profile-class",
+//   styles: {},
+// };
+
+// MenuCard with custom styles
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  icon: "Article",
+  menuName: "Menu",
+  description:
+    "Use this checklist to supervise the team formation for Registration & Distribution",
+  className: "",
+  styles: {
+    backgroundColor: "#f9f9f9",
+    padding: "30px",
+    borderRadius: "12px",
+    border: "2px solid #333",
+  },
+};
diff --git a/react/ui-components/src/molecules/stories/MenuCardWrapper.stories.js b/react/ui-components/src/molecules/stories/MenuCardWrapper.stories.js
new file mode 100644
index 0000000000..52c4ada831
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/MenuCardWrapper.stories.js
@@ -0,0 +1,96 @@
+import React,{Fragment} from "react";
+import MenuCardWrapper from "../MenuCardWrapper";
+import MenuCard from "../MenuCard";
+
+export default {
+  title: "MoleculeGroup/MenuCardWrapper",
+  component: MenuCardWrapper,
+};
+
+const Template = (args) => <MenuCardWrapper {...args} />;
+
+// Default story showing a group of MenuCards
+export const GroupOfMenuCards = Template.bind({});
+GroupOfMenuCards.args = {
+  children: (
+    <>
+      <MenuCard
+        icon={"Article"}
+        menuName={"Menu"}
+        description={
+          "Use this checklist to supervise the team formation for Registration & Distribution"
+        }
+        className={""}
+        styles={{}}
+        onClick={(e) => {
+          console.log(e);
+        }}
+      />
+      <MenuCard
+        icon={"Article"}
+        menuName={"Menu"}
+        description={
+          "Use this checklist to supervise the team formation for Registration & Distribution"
+        }
+        className={""}
+        styles={{}}
+        onClick={(e) => {
+          console.log(e);
+        }}
+      />
+      <MenuCard
+        icon={"Article"}
+        menuName={"Menu"}
+        description={
+          "Use this checklist to supervise the team formation for Registration & Distribution"
+        }
+        className={""}
+        styles={{}}
+        onClick={(e) => {
+          console.log(e);
+        }}
+      />
+    </>
+  ),
+};
+
+// MenuCardWrapper with custom styles
+export const CustomStyledWrapper = Template.bind({});
+CustomStyledWrapper.args = {
+  className: "",
+  styles: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "32px",
+    padding: "16px",
+    backgroundColor: "#f4f4f4",
+  },
+  children: (
+    <>
+      <MenuCard
+        icon={"Article"}
+        menuName={"Menu"}
+        description={
+          "Use this checklist to supervise the team formation for Registration & Distribution"
+        }
+        className={""}
+        styles={{}}
+        onClick={(e) => {
+          console.log(e);
+        }}
+      />
+      <MenuCard
+        icon={"Article"}
+        menuName={"Menu"}
+        description={
+          "Use this checklist to supervise the team formation for Registration & Distribution"
+        }
+        className={""}
+        styles={{}}
+        onClick={(e) => {
+          console.log(e);
+        }}
+      />
+    </>
+  ),
+};