From 0ab65f6f6edb7f6e5cf4985d917ddb34e8893d37 Mon Sep 17 00:00:00 2001
From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com>
Date: Fri, 13 Sep 2024 13:39:50 +0530
Subject: [PATCH] React component changes (#126)

* added tab component

* added search functionality for multiselectdropdown

* updated landingpagecard

* added hover state for menucard

* updated stepper

* updated preselected label color for radio btns

* added stories for color and spacers

* updated sidebar

* enhancements

* uodated versions

* review changes

* added long text stories

* default value for allowMultipleOpen

* updated versions

* updated tab styles

* updated animation name

* added review changes

* updated version
---
 react/css/CHANGELOG.md                        |   5 +
 react/css/package.json                        |   2 +-
 .../src/digitv2/components/bottomSheetV2.scss |   8 ++
 .../css/src/digitv2/components/buttonsV2.scss |   3 +-
 react/css/src/digitv2/components/chipV2.scss  |  19 +++
 .../css/src/digitv2/components/dividerV2.scss |   1 +
 .../digitv2/components/landingpagecardV2.scss |   9 +-
 .../src/digitv2/components/menuCardV2.scss    |   5 +
 .../components/multiSelectDropdownV2.scss     |  59 +++++++-
 .../src/digitv2/components/radiobtnV2.scss    |   4 +-
 .../digitv2/components/selectDropdownV2.scss  |   4 +-
 .../digitv2/components/selectionCardV2.scss   |   1 +
 .../css/src/digitv2/components/stepperV2.scss |  40 +++++-
 react/css/src/digitv2/components/tabV2.scss   | 107 ++++++++++++++
 react/css/src/digitv2/index.scss              |  62 ++++++++
 react/css/src/digitv2/typography.scss         |  33 +++--
 react/example/package.json                    |   2 +-
 react/example/public/index.html               |   2 +-
 react/modules/core/package.json               |   2 +-
 react/modules/sample/package.json             |   2 +-
 react/package.json                            |   4 +-
 react/ui-components/CHANGELOG.md              |   4 +-
 react/ui-components/package.json              |   4 +-
 react/ui-components/public/index.html         |   2 +-
 react/ui-components/src/atoms/Accordion.js    |   2 +-
 react/ui-components/src/atoms/BackLink.js     |   5 +-
 react/ui-components/src/atoms/Dropdown.js     |   4 +-
 .../ui-components/src/atoms/MobileSidebar.js  |   6 +-
 .../src/atoms/MultiSelectDropdown.js          |  50 +++++--
 react/ui-components/src/atoms/RadioButtons.js |  16 ++-
 react/ui-components/src/atoms/Stepper.js      |  24 +++-
 react/ui-components/src/atoms/Tab.js          | 125 ++++++++++++++++
 react/ui-components/src/atoms/Toggle.js       |  12 +-
 react/ui-components/src/atoms/Tooltip.js      |   6 +-
 react/ui-components/src/atoms/index.js        |   2 +
 .../src/atoms/stories/BackLink.stories.js     |   6 +-
 .../src/atoms/stories/ColorLibrary.stories.js |  85 +++++++++++
 .../src/atoms/stories/Dropdown.stories.js     |   3 +-
 .../src/atoms/stories/Hamburger.stories.js    |  18 +--
 .../src/atoms/stories/RadioButtons.stories.js |   2 +-
 .../src/atoms/stories/Spacers.stories.js      |  45 ++++++
 .../src/atoms/stories/Stepper.stories.js      |  21 ++-
 .../src/atoms/stories/Tab.stories.js          | 135 ++++++++++++++++++
 react/ui-components/src/hoc/FieldV1.js        |   1 +
 react/ui-components/src/index.js              |   2 +
 .../src/molecules/LandingPageCard.js          |   5 +-
 react/ui-components/src/molecules/MenuCard.js |  14 +-
 .../stories/LandingPageCard.stories.js        |  16 ++-
 .../stories/LandingPageWrapper.stories.js     |   2 +-
 .../src/molecules/stories/MenuCard.stories.js |  38 ++---
 50 files changed, 913 insertions(+), 116 deletions(-)
 create mode 100644 react/css/src/digitv2/components/tabV2.scss
 create mode 100644 react/ui-components/src/atoms/Tab.js
 create mode 100644 react/ui-components/src/atoms/stories/ColorLibrary.stories.js
 create mode 100644 react/ui-components/src/atoms/stories/Spacers.stories.js
 create mode 100644 react/ui-components/src/atoms/stories/Tab.stories.js

diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
index ece4b1e907..25712e7615 100644
--- a/react/css/CHANGELOG.md
+++ b/react/css/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+
+## [0.0.2-beta.33] - 2024-09-13
+### Changed
+- Added Tab Styles and other changes
+
 ## [0.0.2-beta.30] - 2024-09-12
 ### fixes 
 - Css version fix 
diff --git a/react/css/package.json b/react/css/package.json
index be83deda58..79fa79cc31 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.32",
+  "version": "0.0.2-beta.33",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
diff --git a/react/css/src/digitv2/components/bottomSheetV2.scss b/react/css/src/digitv2/components/bottomSheetV2.scss
index 347fdab7e0..e460ddf2d7 100644
--- a/react/css/src/digitv2/components/bottomSheetV2.scss
+++ b/react/css/src/digitv2/components/bottomSheetV2.scss
@@ -52,6 +52,14 @@
     margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
 }
 
+.digit-bottom-sheet-header{
+    &.full {
+        .digit-bottom-sheet-handle-indicator{
+            display: none;
+        }
+    }
+}
+
 .digit-bottom-sheet-content {
     padding: theme(digitv2.spacers.spacer4);
     overflow-y: scroll;
diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss
index 858b1da26a..8872c8759a 100644
--- a/react/css/src/digitv2/components/buttonsV2.scss
+++ b/react/css/src/digitv2/components/buttonsV2.scss
@@ -4,8 +4,7 @@
   @apply flex max-w-full items-center;
   gap: theme(digitv2.spacers.spacer2);
 
-  &.small,
-  &.medium {
+  &.small{
     gap: theme(digitv2.spacers.spacer1);
   }
 
diff --git a/react/css/src/digitv2/components/chipV2.scss b/react/css/src/digitv2/components/chipV2.scss
index 2f96fd9b31..0e26818f56 100644
--- a/react/css/src/digitv2/components/chipV2.scss
+++ b/react/css/src/digitv2/components/chipV2.scss
@@ -49,6 +49,25 @@
     .digit-text {
       @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
+      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);
+      }
       max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
       width: calc(100% - (theme(digitv2.spacers.spacer7)));
       text-overflow: clip;
diff --git a/react/css/src/digitv2/components/dividerV2.scss b/react/css/src/digitv2/components/dividerV2.scss
index 95e8887376..70ad783327 100644
--- a/react/css/src/digitv2/components/dividerV2.scss
+++ b/react/css/src/digitv2/components/dividerV2.scss
@@ -1,5 +1,6 @@
 .digit-divider {
     border: theme(digitv2.divider.dividerS);
+    width: 100%;
 
     &.medium {
         border: theme(digitv2.divider.dividerM);
diff --git a/react/css/src/digitv2/components/landingpagecardV2.scss b/react/css/src/digitv2/components/landingpagecardV2.scss
index db4a4ea250..8c87102073 100644
--- a/react/css/src/digitv2/components/landingpagecardV2.scss
+++ b/react/css/src/digitv2/components/landingpagecardV2.scss
@@ -31,10 +31,17 @@
             align-items: center;
 
             &.iconBg {
-                background-color: theme(digitv2.lightTheme.primary-1);
+                background-color: theme(digitv2.lightTheme.primary-1);  
+                border-radius: 0.125rem;
             }
         }
 
+        &.right{
+            &.iconBg {
+            gap:theme(digitv2.spacers.spacer4);
+        }
+    }
+
         svg {
             flex-shrink: 0;
         }
diff --git a/react/css/src/digitv2/components/menuCardV2.scss b/react/css/src/digitv2/components/menuCardV2.scss
index 83ba20586b..78de76da04 100644
--- a/react/css/src/digitv2/components/menuCardV2.scss
+++ b/react/css/src/digitv2/components/menuCardV2.scss
@@ -6,6 +6,11 @@
     justify-content: flex-start;
     cursor: pointer;
 
+    &.clickable:hover{
+        border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+        box-shadow: 0.063rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00000029;
+    }
+
     .icon-menu-header {
 
         display: flex !important;
diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
index 7307a86731..d7cd0da0a7 100644
--- a/react/css/src/digitv2/components/multiSelectDropdownV2.scss
+++ b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -38,6 +38,23 @@
       }
     }
   }
+
+  .digit-multiselectdropdown-master-active{
+    &.serachable{
+      input[type="text"]{
+        opacity: 1;
+        width: calc(100%-24px);
+      }
+
+      .digit-multiselectdropdown-label {
+        svg {
+          z-index: 1;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
   .digit-multiselectdropdown-master {
     &.disabled {
       pointer-events: none !important;
@@ -153,7 +170,7 @@
         }
       }
     }
-    &.nestedmultiselect {
+    &.nestedmultiselect:not(.unsuccessfulresults){
       position: relative;
       &:not(.selectAll)::before {
         content: "";
@@ -334,6 +351,33 @@
         color: theme(digitv2.lightTheme.primary-1);
       }
     }
+    &.unsuccessfulresults {
+      background-color: theme(digitv2.lightTheme.paper-secondary);
+      pointer-events: none;
+      span {
+        @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-disabled);
+      }
+    }
   }
   .digit-cursorPointer {
     @apply cursor-pointer;
@@ -343,11 +387,14 @@
     .digit-multiselectdropdown-label {
       p {
         white-space: pre;
-        margin: auto;
-        margin-left: theme(digitv2.spacers.spacer0);
-        padding-left: 1%;
-        font-size: theme(digitv2.spacers.spacer4);
-        line-height: theme(digitv2.spacers.spacer6);
+          margin: auto;
+          margin-left: theme(digitv2.spacers.spacer0);
+          padding-left: 1%;
+          font-size: theme(digitv2.spacers.spacer4);
+          line-height: theme(digitv2.spacers.spacer6);
+          font-family: theme(digitv2.fontFamily.sans);
+          font-weight: theme(digitv2.fontWeight.regular);
+          text-align: left;
       }
     }
   }
diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss
index 195311d149..fd3dc73511 100644
--- a/react/css/src/digitv2/components/radiobtnV2.scss
+++ b/react/css/src/digitv2/components/radiobtnV2.scss
@@ -51,8 +51,7 @@
       pointer-events: none !important;
     }
 
-    &.disabled,
-    &.preselected {
+    &:not(.preselected):not(.has-preselected).disabled{
       label {
         color: theme(digitv2.lightTheme.text-disabled);
       }
@@ -80,6 +79,7 @@
     font-style: theme(digitv2.fontStyle.normal);
     font-weight: theme(digitv2.fontWeight.regular);
     line-height: theme(digitv2.lineHeight.lineheight2);
+    margin-top: 0.065rem;
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
diff --git a/react/css/src/digitv2/components/selectDropdownV2.scss b/react/css/src/digitv2/components/selectDropdownV2.scss
index fd8df33ff6..96e141c60d 100644
--- a/react/css/src/digitv2/components/selectDropdownV2.scss
+++ b/react/css/src/digitv2/components/selectDropdownV2.scss
@@ -49,7 +49,7 @@
     }
   }
   .digit-dropdown-select-active {
-    @apply relative block w-full h-10;
+    @apply relative block w-full h-10 bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
     input[type="text"] {
       @extend .typography.body-l;
@@ -189,7 +189,7 @@
   &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
     background: theme(digitv2.lightTheme.paper-secondary);
   }
-  &.nesteddropdown {
+  &:not(.unsuccessfulresults).nesteddropdown {
     position: relative;
     height: 2.4375rem;
     &::before {
diff --git a/react/css/src/digitv2/components/selectionCardV2.scss b/react/css/src/digitv2/components/selectionCardV2.scss
index 79d3f4f8f1..c2c90cefc4 100644
--- a/react/css/src/digitv2/components/selectionCardV2.scss
+++ b/react/css/src/digitv2/components/selectionCardV2.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    gap:theme(digitv2.spacers.spacer1);
   }
   
   .selection-card {
diff --git a/react/css/src/digitv2/components/stepperV2.scss b/react/css/src/digitv2/components/stepperV2.scss
index 2f9b01317a..ee28328436 100644
--- a/react/css/src/digitv2/components/stepperV2.scss
+++ b/react/css/src/digitv2/components/stepperV2.scss
@@ -10,6 +10,18 @@
     @apply relative flex-1;
     min-height: 4rem;
     z-index: 1;
+
+    @media (max-aspect-ratio: 9/16) {
+      min-width: 3.75rem;
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 5rem;
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      min-width: 6.25rem;
+    }
   }
 
   .digit-stepper-content {
@@ -98,18 +110,30 @@
     height: 0.125rem;
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 6.313rem;
       max-width: 39.438rem;
     }
 
     @media (max-aspect-ratio: 9/16) {
+      min-width: 4.313rem;
       max-width: 16.875rem;
       top: 0.875rem;
     }
 
     @media (min-aspect-ratio: 3/4) {
+      min-width: 5.313rem;
       max-width: 82.688rem;
     }
 
+    &.lastbutone{
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        min-width: unset;
+      }
+  
+      @media (max-aspect-ratio: 9/16) {
+        min-width: unset;
+      }
+    }
     &.active {
       background-color: theme(digitv2.lightTheme.primary-1);
       border-color: theme(digitv2.lightTheme.primary-1);
@@ -129,6 +153,12 @@
         background-color: transparent;
         border-color: theme(digitv2.lightTheme.primary-1);
       }
+      @media (max-aspect-ratio: 9/16) {
+        left: -2.75rem;
+      }
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        left: -3.5rem;
+      }
     }
   }
 
@@ -148,8 +178,8 @@
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width: theme(digitv2.spacers.spacer2);
-  height: theme(digitv2.spacers.spacer2);
+  width: theme(digitv2.spacers.spacer0);
+  height: theme(digitv2.spacers.spacer0);
   background-color: theme(digitv2.lightTheme.generic-background);
 }
 
@@ -161,4 +191,10 @@
 .digit-stepper-container::-webkit-scrollbar-thumb {
   background-color: theme(digitv2.lightTheme.generic-divider);
   border-radius: 0.563rem;
+}
+
+.stepper-vertical-divider{
+  position: absolute;
+  left: theme(digitv2.spacers.spacer10);
+  margin: theme(digitv2.spacers.spacer0);
 }
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/tabV2.scss b/react/css/src/digitv2/components/tabV2.scss
new file mode 100644
index 0000000000..4404f868b7
--- /dev/null
+++ b/react/css/src/digitv2/components/tabV2.scss
@@ -0,0 +1,107 @@
+.digit-tab {
+    display: flex;
+    height: fit-content;
+    overflow: auto;
+    align-items: flex-end;
+
+    .digit-tab-list {
+
+        height: 3.75rem;
+
+        .digit-tab-item {
+            display: flex;
+            width: 100%;
+            min-height: 3.75rem;
+            padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
+            height: 3.75rem;
+            align-items: center;
+            justify-content: center;
+            background-color: theme(digitv2.lightTheme.paper-secondary);
+            border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+            border-radius: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+            cursor: pointer;
+            gap: theme(digitv2.spacers.spacer1);
+
+            .digit-tab-icon {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    flex-shrink: 0;
+                }
+            }
+
+
+            justify-content: center;
+
+
+            .digit-tab-label {
+                @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-secondary);
+                white-space: noWrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: normal;
+            }
+        }
+
+        &.active {
+            height: 4rem;
+
+            .digit-tab-item {
+                border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+                border-bottom: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
+                background-color: theme(digitv2.lightTheme.paper-primary);
+                height: 4rem;
+                min-height: 4rem;
+
+                .digit-tab-label {
+                    @extend .typography.heading-s;
+                    color: theme(digitv2.lightTheme.primary-1);
+                    white-space: noWrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    line-height: normal;
+                }
+            }
+        }
+    }
+}
+
+.digit-tab::-webkit-scrollbar {
+    height: 0.375rem;
+    background-color: transparent;
+}
+
+.digit-tab::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.digit--tab::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
\ No newline at end of file
diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
index 827018cf95..408ff76f64 100644
--- a/react/css/src/digitv2/index.scss
+++ b/react/css/src/digitv2/index.scss
@@ -38,6 +38,7 @@
 @import url("./components/actionbarV2.scss");
 @import url("./components/headerdropdownV2.scss");
 @import url("./components/topbarV2.scss");
+@import url("./components/tabV2.scss");
 @import url("./components/sidebarV2.scss");
 @import url("./components/mobilesidebarV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
@@ -177,4 +178,65 @@
   &-item-5 {
     color: theme(digitv2.chart.chart-5);
   }
+}
+
+.color-constants-story{
+
+  &.primary-1{
+    background-color: theme(digitv2.lightTheme.primary-1);
+  }
+  &.primary-bg{
+    background-color: theme(digitv2.lightTheme.primary-bg);
+  }
+  &.primary-2{
+    background-color: theme(digitv2.lightTheme.primary-2);
+  }
+  &.text-primary{
+    background-color: theme(digitv2.lightTheme.text-primary);
+  }
+  &.text-secondary{
+    background-color: theme(digitv2.lightTheme.text-secondary);
+  }
+  &.text-disabled{
+    background-color: theme(digitv2.lightTheme.text-disabled);
+  }
+  &.alert-error{
+    background-color: theme(digitv2.lightTheme.alert-error);
+  }
+  &.alert-errorbg{
+    background-color: theme(digitv2.lightTheme.alert-errorbg);
+  }
+  &.alert-success{
+    background-color: theme(digitv2.lightTheme.alert-success);
+  }
+  &.alert-successbg{
+    background-color: theme(digitv2.lightTheme.alert-successbg);
+  }
+  &.alert-info{
+    background-color: theme(digitv2.lightTheme.alert-info);
+  }
+  &.alert-infobg{
+    background-color: theme(digitv2.lightTheme.alert-infobg);
+  }
+  &.alert-warning{
+    background-color: theme(digitv2.lightTheme.alert-warning);
+  }
+  &.alert-warningbg{
+    background-color: theme(digitv2.lightTheme.alert-warning-bg);
+  }
+  &.generic-background{
+    background-color: theme(digitv2.lightTheme.generic-background);
+  }
+  &.generic-divider{
+    background-color: theme(digitv2.lightTheme.generic-divider);
+  }
+  &.generic-inputborder{
+    background-color: theme(digitv2.lightTheme.generic-inputborder);
+  }
+  &.paper-primary{
+    background-color: theme(digitv2.lightTheme.paper-primary);
+  }
+  &.paper-secondary{
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+  }
 }
\ No newline at end of file
diff --git a/react/css/src/digitv2/typography.scss b/react/css/src/digitv2/typography.scss
index 47a22e4af5..e0b628274b 100644
--- a/react/css/src/digitv2/typography.scss
+++ b/react/css/src/digitv2/typography.scss
@@ -443,46 +443,61 @@
   }
 
   &.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);
+      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 (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
       font-size: theme(digitv2.fontSize.body-s.tablet);
+      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 (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
       font-size: theme(digitv2.fontSize.body-s.desktop);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
   }
 
   &.body-xs {
-    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);
+      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 (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
       font-size: theme(digitv2.fontSize.body-xs.tablet);
+      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 (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
       font-size: theme(digitv2.fontSize.body-xs.desktop);
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
     }
   }
 
diff --git a/react/example/package.json b/react/example/package.json
index f8c4f2c0ad..ca1ab3dd67 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.38",
+    "@egovernments/digit-ui-components": "0.0.2-beta.39",
     "@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 a53b277d30..e14498a21b 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.30/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.33/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 06fa02a71b..0a09fd5f34 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.38",
+    "@egovernments/digit-ui-components": "0.0.2-beta.39",
     "@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 5b4f41707b..54fb60611e 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.37",
+    "@egovernments/digit-ui-components": "0.0.2-beta.39",
     "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 dceddb52b9..1673b10bde 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.32",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.33",
     "@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.38",
+    "@egovernments/digit-ui-components": "0.0.2-beta.39",
     "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 b976d8e099..e72dc07154 100644
--- a/react/ui-components/CHANGELOG.md
+++ b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,9 @@ 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.39] - 2024-09-12
+### New Changes
+- Added Tab Component and other changes
 
 ## [0.0.2-beta.38] - 2024-09-12
 ### fixes
@@ -13,7 +16,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### New Changes
 - Css version fix 
 
-
 ## [0.0.2-beta.36] - 2024-09-06
 ### New Changes
 - Updated SelectionCard Component 
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 840d6b0bae..6753b42d90 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.38",
+  "version": "0.0.2-beta.39",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components-css": "0.0.2-beta.32",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.33",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.11",
     "@googlemaps/js-api-loader": "1.13.10",
diff --git a/react/ui-components/public/index.html b/react/ui-components/public/index.html
index c5b8d524ff..dd0db768fd 100644
--- a/react/ui-components/public/index.html
+++ b/react/ui-components/public/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.30/dist/index.css"/>
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.33/dist/index.css"/>
   <link rel="icon" href="https://egov-dev-assets.s3.ap-south-1.amazonaws.com/browser-icon.png" />
   <style>
     .custom-class path {
diff --git a/react/ui-components/src/atoms/Accordion.js b/react/ui-components/src/atoms/Accordion.js
index 52921b7792..6f08545547 100644
--- a/react/ui-components/src/atoms/Accordion.js
+++ b/react/ui-components/src/atoms/Accordion.js
@@ -124,7 +124,7 @@ Accordion.defaultProps = {
 
 const AccordionWrapper = ({
   children,
-  allowMultipleOpen,
+  allowMultipleOpen = true,
   addDivider,
   className,
   styles,
diff --git a/react/ui-components/src/atoms/BackLink.js b/react/ui-components/src/atoms/BackLink.js
index 252058b3d0..406974e387 100644
--- a/react/ui-components/src/atoms/BackLink.js
+++ b/react/ui-components/src/atoms/BackLink.js
@@ -12,7 +12,8 @@ const BackLink = ({
   hideIcon,
   hideLabel,
   disabled,
-  iconFill
+  iconFill,
+  label
 }) => {
   const { t } = useTranslation();
 
@@ -71,7 +72,7 @@ const BackLink = ({
       {!hideIcon && <div className={`digit-back-link-icon`}>{icon}</div>}
       {!hideLabel && (
         <div className={`digit-back-link-label`}>
-          {t("CS_COMMON_BACK")}
+          {label || t("CS_COMMON_BACK")}
         </div>
       )}
     </div>
diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
index c1e37320d7..11be0aff7b 100644
--- a/react/ui-components/src/atoms/Dropdown.js
+++ b/react/ui-components/src/atoms/Dropdown.js
@@ -223,7 +223,7 @@ const Dropdown = (props) => {
     (props.option &&
       props.option?.filter(
         (option) =>
-          t(option[props.optionKey])
+          t(option[props?.optionKey])
             ?.toUpperCase()
             ?.indexOf(filterVal?.toUpperCase()) > -1
       )) ||
@@ -592,7 +592,7 @@ const Dropdown = (props) => {
                   key={"-1"}
                   onClick={() => {}}
                 >
-                  {<span> {"NO RESULTS FOUND"}</span>}
+                  {<span> {t("NO_RESULTS_FOUND")}</span>}
                 </div>
               )}
           </div>
diff --git a/react/ui-components/src/atoms/MobileSidebar.js b/react/ui-components/src/atoms/MobileSidebar.js
index a2e03e20eb..12c53563e8 100644
--- a/react/ui-components/src/atoms/MobileSidebar.js
+++ b/react/ui-components/src/atoms/MobileSidebar.js
@@ -23,6 +23,7 @@ const MobileSidebar = ({
   onSelect,
   onLogout,
   reopenOnLogout,
+  closeOnClickOutside
 }) => {
   const { t } = useTranslation();
   const [searchTerms, setSearchTerms] = useState({});
@@ -35,6 +36,9 @@ const MobileSidebar = ({
   const iconSize = Spacers.spacer6;
 
     useEffect(() => {
+
+      if (!closeOnClickOutside) return; 
+
       const handleClickOutside = (event) => {
         if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
           setShowHamburger(false);
@@ -46,7 +50,7 @@ const MobileSidebar = ({
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, []);
+    }, [closeOnClickOutside]);
 
   const handleItemClick = (item, index, parentIndex) => {
     setSelectedItem({ item: item, index: index, parentIndex: parentIndex });
diff --git a/react/ui-components/src/atoms/MultiSelectDropdown.js b/react/ui-components/src/atoms/MultiSelectDropdown.js
index 402435d32e..a858275604 100644
--- a/react/ui-components/src/atoms/MultiSelectDropdown.js
+++ b/react/ui-components/src/atoms/MultiSelectDropdown.js
@@ -28,6 +28,7 @@ const MultiSelectDropdown = ({
   selectAllLabel = "",
   categorySelectAllLabel = "",
   restrictSelection = false,
+  isSearchable=false
 }) => {
   const [active, setActive] = useState(false);
   const [searchQuery, setSearchQuery] = useState();
@@ -162,6 +163,10 @@ const MultiSelectDropdown = ({
         )
       : options;
 
+  useEffect(() => {
+    setOptionIndex(0);
+  }, [searchQuery]);
+
   function onSearch(e) {
     setSearchQuery(e.target.value);
   }
@@ -337,8 +342,9 @@ const MultiSelectDropdown = ({
   };
 
   const selectOptionThroughKeys = (e, option) => {
+    if (!option) return;
     let checked = alreadyQueuedSelectedState.find(
-      (selectedOption) => selectedOption.code === option.code
+      (selectedOption) => selectedOption?.code === option?.code
     )
       ? true
       : false;
@@ -353,12 +359,23 @@ const MultiSelectDropdown = ({
         payload: [null, option],
       });
     }
+
+    onSelect(
+      alreadyQueuedSelectedState?.map((e) => e.propsData),
+      getCategorySelectAllState(),
+      props
+    );
   };
 
   /* Custom function to scroll and select in the dropdowns while using key up and down */
   const keyChange = (e) => {
     const optionToScroll =
       variant === "nestedmultiselect" ? flattenedOptions : filteredOptions;
+
+      if (optionToScroll.length === 0) {
+        return; // No options to navigate
+      }
+
     if (e.key == "ArrowDown") {
       setOptionIndex((state) =>
         state + 1 == optionToScroll.length ? 0 : state + 1
@@ -390,6 +407,9 @@ const MultiSelectDropdown = ({
       }
       e.preventDefault();
     } else if (e.key == "Enter") {
+      if(variant === "nestedmultiselect" && optionToScroll[optionIndex]?.options){
+        return ;
+      }
       selectOptionThroughKeys(e, optionToScroll[optionIndex]);
     }
   };
@@ -408,7 +428,7 @@ const MultiSelectDropdown = ({
         )
       : options;
 
-  const parentOptionsWithChildren = filteredOptions.filter(
+  const parentOptionsWithChildren = filteredOptions?.filter(
     (option) => option.options && option.options.length > 0
   );
 
@@ -547,8 +567,18 @@ const MultiSelectDropdown = ({
     const optionsToRender =
       variant === "nestedmultiselect" ? flattenedOptions : filteredOptions;
 
-    if (!optionsToRender) {
-      return null;
+    if (!optionsToRender || optionsToRender?.length === 0) {
+      return (
+        <div
+          className={`digit-multiselectdropodwn-menuitem ${
+            variant ? variant : ""
+          } unsuccessfulresults`}
+          key={"-1"}
+          onClick={() => {}}
+        >
+          {<span> {t("NO_RESULTS_FOUND")}</span>}
+        </div>
+      );
     }
 
     return (
@@ -611,11 +641,11 @@ const MultiSelectDropdown = ({
         <div
           className={`digit-multiselectdropdown-master${
             active ? `-active` : ``
-          } ${disabled ? "disabled" : ""}  ${variant ? variant : ""}`}
+          } ${disabled ? "disabled" : ""}  ${variant ? variant : ""} ${isSearchable ? "serachable" : ""}`}
         >
           <input
             className="digit-cursorPointer"
-            style={{ opacity: 0 }}
+            style={{}}
             type="text"
             onKeyDown={keyChange}
             onFocus={() => setActive(true)}
@@ -638,7 +668,7 @@ const MultiSelectDropdown = ({
                   : defaultLabel}
               </p>
             )}
-            <SVG.ArrowDropDown fill={disabled ? dividerColor : inputBorderColor} />
+            <SVG.ArrowDropDown onClick={() => setActive(true)} fill={disabled ? dividerColor : inputBorderColor} />
           </div>
         </div>
         {active ? (
@@ -666,14 +696,14 @@ const MultiSelectDropdown = ({
           {alreadyQueuedSelectedState.length > 0 &&
             alreadyQueuedSelectedState.map((value, index) => {
               if (!value.propsData[1]?.options) {
-                const translatedText = t(value.code);
+                const translatedText = t(value?.code);
                 const replacedText = replaceDotWithColon(translatedText);
                 return (
                   <Chip
                     key={index}
                     text={
-                      replacedText.length > 64
-                        ? `${replacedText.slice(0, 64)}...`
+                      replacedText?.length > 64
+                        ? `${replacedText?.slice(0, 64)}...`
                         : replacedText
                     }
                     onClick={
diff --git a/react/ui-components/src/atoms/RadioButtons.js b/react/ui-components/src/atoms/RadioButtons.js
index 036871ee09..0c54795d92 100644
--- a/react/ui-components/src/atoms/RadioButtons.js
+++ b/react/ui-components/src/atoms/RadioButtons.js
@@ -12,13 +12,17 @@ const RadioButtons = (props) => {
     props.onSelect(value);
   }
 
+  const isAnyPreselected = props.options.some(
+    (option) => props.value === option.code && props.disabled
+  );
+
   return (
     <div style={props?.style} className={`digit-radio-options-wrap ${props?.additionalWrapperClass ? props?.additionalWrapperClass : ""}`}>
       {props?.options?.map((option, ind) => {
         if (props?.optionsKey && !props?.isDependent) {
           return (
-            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""}`} key={ind}>
-              <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""}`}>
+            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`} key={ind}>
+              <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`}>
                 <input
                   className="digit-radio-btn"
                   type="radio"
@@ -41,8 +45,8 @@ const RadioButtons = (props) => {
           );
         } else if (props?.optionsKey && props?.isDependent) {
           return (
-            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""}`} key={ind}>
-              <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""}`}>
+            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`} key={ind}>
+              <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`}>
                 <input
                   className="digit-radio-btn"
                   type="radio"
@@ -66,8 +70,8 @@ const RadioButtons = (props) => {
           );
         } else {
           return (
-            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""}`} key={ind}>
-              <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""}`}>
+            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`} key={ind}>
+              <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`}>
                 <input
                   className="digit-radio-btn"
                   type="radio"
diff --git a/react/ui-components/src/atoms/Stepper.js b/react/ui-components/src/atoms/Stepper.js
index d469f35b1b..c75bde5ddf 100644
--- a/react/ui-components/src/atoms/Stepper.js
+++ b/react/ui-components/src/atoms/Stepper.js
@@ -1,9 +1,10 @@
-import React,{useState,useEffect} from "react";
+import React,{useState,useEffect,useRef} from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { SVG } from "./SVG";
 import StringManipulator from "./StringManipulator";
 import { Colors} from "../constants/colors/colorconstants";
+import Divider from "./Divider";
 
 const Stepper = ({
   currentStep = 1,
@@ -14,9 +15,11 @@ const Stepper = ({
   style,
   props,
   className,
-  activeSteps
+  activeSteps,
+  hideDivider
 }) => {
   const { t } = useTranslation();
+  const stepRefs = useRef([]);
 
   const [isMobileView, setIsMobileView] = useState(
     (window.innerWidth / window.innerHeight <= 9/16)
@@ -43,6 +46,17 @@ const Stepper = ({
     };
   });
 
+  useEffect(() => {
+    // Scroll the current step into view when currentStep changes
+    if (stepRefs.current[currentStep]) {
+      stepRefs.current[currentStep].scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+    }
+  }, [currentStep]);
+
   useEffect(() => {
     // This useEffect will trigger a re-render when number of activeSteps changes
   }, [activeSteps]);
@@ -69,6 +83,7 @@ const Stepper = ({
     >
       {actions.map((action, index, arr) => (
         <div
+          ref={(el) => (stepRefs.current[index] = el)}
           className={`digit-stepper-checkpoint ${direction ? direction : ""}`}
           style={{ cursor: "pointer" }}
           key={index}
@@ -110,9 +125,12 @@ const Stepper = ({
             <span
               className={`stepper-connect ${
                 ((index < currentStep - 1) || (index < activeSteps && index < activeSteps - 1 ) ) && "active"
-              } ${direction ? direction : ""}`}
+              } ${direction ? direction : ""} ${(index === arr.length-2 && direction !=="vertical") ? "lastbutone" : ""}`}
             ></span>
           )}
+          {index < arr.length - 1 && direction === "vertical" && !hideDivider &&  (
+            <Divider className="stepper-vertical-divider"></Divider>
+          )}
         </div>
       ))}
     </div>
diff --git a/react/ui-components/src/atoms/Tab.js b/react/ui-components/src/atoms/Tab.js
new file mode 100644
index 0000000000..53ba350a0b
--- /dev/null
+++ b/react/ui-components/src/atoms/Tab.js
@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import StringManipulator from "./StringManipulator";
+import { iconRender } from "../utils/iconRender";
+import { Colors } from "../constants/colors/colorconstants";
+import { Spacers } from "../constants/spacers/spacers";
+
+const Tab = ({
+  configNavItems,
+  configItemKey,
+  activeLink,
+  setActiveLink,
+  showNav = false,
+  children,
+  style = {},
+  className = "",
+  navClassName = "",
+  navStyles = {},
+  itemStyle = {},
+  onTabClick,
+}) => {
+  const { t } = useTranslation();
+  const primaryColor = Colors.lightTheme.primary[1];
+  const secondaryColor = Colors.lightTheme.text.secondary;
+  const iconSize = Spacers.spacer6;
+
+  const itemRefs = useRef([]);
+  const [maxWidth, setMaxWidth] = useState(0);
+
+  const setActive = (item) => {
+    setActiveLink(item?.[configItemKey]);
+    onTabClick && onTabClick(item);
+  };
+
+  useEffect(() => {
+    // Calculate the maximum width of all tab items
+    const widths = itemRefs.current.map(
+      (ref) => ref?.getBoundingClientRect().width || 0
+    );
+    const maxItemWidth = Math.max(...widths);
+    setMaxWidth(maxItemWidth);
+  }, [configNavItems]);
+
+  return (
+    <div className={navClassName} style={navStyles}>
+      {showNav && (
+        <div className={`digit-tab ${className}`} style={style}>
+          {configNavItems?.map((item, index) => (
+            <div
+              className={`digit-tab-list ${
+                activeLink === item?.[configItemKey] ? "active" : ""
+              }`}
+              key={index}
+              onClick={() => setActive(item)}
+            >
+              <span
+                ref={(el) => (itemRefs.current[index] = el)}
+                className="digit-tab-item"
+                style={
+                  maxWidth
+                    ? {
+                        ...itemStyle,
+                        width: `${maxWidth}px`,
+                      }
+                    : { ...itemStyle }
+                }
+              >
+                {item?.icon && (
+                  <div className="digit-tab-icon">
+                    {iconRender(
+                      item?.icon,
+                      activeLink === item?.[configItemKey]
+                        ? primaryColor
+                        : secondaryColor,
+                      iconSize,
+                      iconSize,
+                      ``
+                    )}
+                  </div>
+                )}
+                <div className="digit-tab-label">
+                  {StringManipulator(
+                    "CAPITALIZEFIRSTLETTER",
+                    t(item?.[configItemKey])
+                  )}
+                </div>
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+Tab.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      code: PropTypes.string,
+      icon: PropTypes.string,
+    })
+  ).isRequired,
+  configItemKey: PropTypes.string,
+  style: PropTypes.object,
+  navStyles: PropTypes.object,
+  itemStyle: PropTypes.object,
+  showNav: PropTypes.bool,
+  className: PropTypes.string,
+  navClassName: PropTypes.string,
+  activeLink: PropTypes.string,
+};
+
+Tab.defaultProps = {
+  showNav: false,
+  style: {},
+  className: "",
+  navClassName: "",
+  navStyles: {},
+  itemStyle: {},
+};
+
+export default Tab;
diff --git a/react/ui-components/src/atoms/Toggle.js b/react/ui-components/src/atoms/Toggle.js
index 6ab0d9b0a0..3513bdc533 100644
--- a/react/ui-components/src/atoms/Toggle.js
+++ b/react/ui-components/src/atoms/Toggle.js
@@ -22,7 +22,7 @@ const Toggle = (props) => {
   const finalWidth = maxWidth < 40 ? "40" : maxWidth;
 
   function toggleOption(option) {
-    props.onSelect(option);
+    props?.onSelect(option);
   }
   return (
     <div
@@ -51,10 +51,10 @@ const Toggle = (props) => {
             <input
               className="digit-toggle-input"
               type="radio"
-              name={props.name}
-              value={option.code}
-              checked={selected === option.code}
-              onChange={() => toggleOption(option.code)}
+              name={props?.name}
+              value={option?.code}
+              checked={selected === option?.code}
+              onChange={() => toggleOption(option?.code)}
               disabled={props?.disabled}
               ref={props.inputRef}
             />
@@ -62,7 +62,7 @@ const Toggle = (props) => {
               {t(
                 StringManipulator(
                   "CAPITALIZEFIRSTLETTER",
-                  option[props.optionsKey]
+                  option[props?.optionsKey]
                 )
               )}
             </span>
diff --git a/react/ui-components/src/atoms/Tooltip.js b/react/ui-components/src/atoms/Tooltip.js
index 7e44279e8a..873e453afc 100644
--- a/react/ui-components/src/atoms/Tooltip.js
+++ b/react/ui-components/src/atoms/Tooltip.js
@@ -10,9 +10,9 @@ const Tooltip = ({ tooltipRef, content, placement, arrow, style, className,heade
       style={style}
       ref={tooltipRef}
     >
-      <div className={`tooltip-header`}>{header}</div>
-      <div className={`tooltip-data`}>{content}</div>
-      <div className={`tooltip-description`}>{description}</div>
+      {header && <div className={`tooltip-header`}>{header}</div>}
+      {content && <div className={`tooltip-data`}>{content}</div>}
+      {description && <div className={`tooltip-description`}>{description}</div>}
     </div>
   );
 };
diff --git a/react/ui-components/src/atoms/index.js b/react/ui-components/src/atoms/index.js
index 1a2a933957..abf3dc0517 100644
--- a/react/ui-components/src/atoms/index.js
+++ b/react/ui-components/src/atoms/index.js
@@ -30,6 +30,7 @@ import Footer from "./Footer";
 import Header from "./Header";
 import HeaderBar from "./HeaderBar";
 import HorizontalNav from "./HorizontalNav";
+import Tab from "./Tab";
 import InfoCard from "./InfoCard";
 import InputTextAmount from "./InputTextAmount";
 import KeyNote from "./KeyNote";
@@ -132,6 +133,7 @@ export {
   Header,
   HeaderBar,
   HorizontalNav,
+  Tab,
   InfoCard,
   InputTextAmount,
   KeyNote,
diff --git a/react/ui-components/src/atoms/stories/BackLink.stories.js b/react/ui-components/src/atoms/stories/BackLink.stories.js
index e7b07a6957..e46bef97ca 100644
--- a/react/ui-components/src/atoms/stories/BackLink.stories.js
+++ b/react/ui-components/src/atoms/stories/BackLink.stories.js
@@ -30,6 +30,9 @@ export default {
     iconFill: {
       control: "text",
     },
+    label:{
+      control:"text"
+    }
   },
 };
 
@@ -43,7 +46,8 @@ const commonArgs = {
   variant: "",
   hideIcon:false,
   hideLabel:false,
-  iconFill:""
+  iconFill:"",
+  label:"Back"
 };
 
 export const Primary = Template.bind({});
diff --git a/react/ui-components/src/atoms/stories/ColorLibrary.stories.js b/react/ui-components/src/atoms/stories/ColorLibrary.stories.js
new file mode 100644
index 0000000000..f5b7934d27
--- /dev/null
+++ b/react/ui-components/src/atoms/stories/ColorLibrary.stories.js
@@ -0,0 +1,85 @@
+import React from "react";
+import { Colors } from "../../constants/colors/colorconstants";
+
+export default {
+  title: "ColorLibrary",
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+        options: [
+            "primary-1",
+            "primary-bg",
+            "primary-2",
+            "text-primary",
+            "text-secondary",
+            "text-disabled",
+            "alert-error",
+            "alert-errorbg",
+            "alert-success",
+            "alert-successbg",
+            "alert-warning",
+            "alert-warning-bg",
+            "alert-info",
+            "alert-infobg",
+            "generic-background",
+            "generic-divider",
+            "generic-inputborder",
+            "paper-primary",
+            "paper-secondary",
+        ],
+      },
+    },
+  },
+};
+
+const hexCodes = {
+  "primary-1": "#C84C0E",
+  "primary-bg": "#FBEEE8",
+  "primary-2": "#0B4B66",
+  "text-primary": "#363636",
+  "text-secondary": "#787878",
+  "text-disabled": "#C5C5C5",
+  "alert-error": "#B91900",
+  "alert-errorbg": "#FFF5F4",
+  "alert-success": "#00703C",
+  "alert-successbg": "#F1FFF8",
+  "alert-warning": "#9E5F00",
+  "alert-warning-bg": "#FFF9F0",
+  "alert-info": "#0057BD",
+  "alert-infobg": "#DEEFFF",
+  "generic-background": "#EEEEEE",
+  "generic-divider": "#D6D5D4",
+  "generic-inputborder": "#505A5F",
+  "paper-primary": "#FFFFFF",
+  "paper-secondary": "#FAFAFA",
+}
+
+
+const Template = (args) => {
+  return (
+    <div>
+      <div style={{...args?.style,top:"25%",border:"none"}} className={`typography body-l`}>{`${args?.color} : ${hexCodes[args?.color]}`}</div>
+      <button className={`color-constants-story ${args?.color}`} style={args?.style}></button>
+    </div>
+  );
+};
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
+  width:"50%",
+  height:"25%",
+  border:"1px solid #363636"
+};
+
+export const Playground = Template.bind({});
+Playground.args = {
+  color: "primary-1",
+  style: style
+};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Dropdown.stories.js b/react/ui-components/src/atoms/stories/Dropdown.stories.js
index 5e09aefbb0..46c9efc327 100644
--- a/react/ui-components/src/atoms/stories/Dropdown.stories.js
+++ b/react/ui-components/src/atoms/stories/Dropdown.stories.js
@@ -15,6 +15,7 @@ export default {
     value: { control: "text" },
     errorStyle: { control: "object" },
     disabled: { control: "boolean" },
+    isSearchable: { control: "boolean" },
     additionalWrapperClass: { control: "text" },
     props: { control: "object" },
     type: { control: "select", options: ["dropdown", "multiselectdropdown"] },
@@ -235,7 +236,7 @@ const commonArgs = {
     addSelectAllCheck:false,
     addCategorySelectAllCheck:false,
     selectAllLabel: "",
-    categorySelectAllLabel:""
+    categorySelectAllLabel:"",
   },
   error: "",
   inputRef: null,
diff --git a/react/ui-components/src/atoms/stories/Hamburger.stories.js b/react/ui-components/src/atoms/stories/Hamburger.stories.js
index 10153a9108..0fbd1e7d11 100644
--- a/react/ui-components/src/atoms/stories/Hamburger.stories.js
+++ b/react/ui-components/src/atoms/stories/Hamburger.stories.js
@@ -18,7 +18,8 @@ export default {
     profile:{control:"text"},
     onSelect:{ action: "onChange" },
     onLogout:{action:"onChange"},
-    reopenOnLogout:{control:"boolean"}
+    reopenOnLogout:{control:"boolean"},
+    closeOnClickOutside:{control:"boolean"}
   },
 };
 
@@ -188,7 +189,8 @@ const commonArgs = {
   usermanuals:[],
   onSelect:onSelect,
   onLogout:onLogout,
-  reopenOnLogout:false
+  reopenOnLogout:false,
+  closeOnClickOutside:false
 };
 
 export const LightTheme = Template.bind({});
@@ -206,12 +208,12 @@ LightThemeWithProfile.args = {
   profile:"https://cdn1.iconfinder.com/data/icons/website-internet/48/website_-_male_user-512.png"
 };
 
-export const LightThemeWithoutSearch = Template.bind({});
-LightThemeWithoutSearch.args = {
+export const LightThemeWithCloseOnClickOutside = Template.bind({});
+LightThemeWithCloseOnClickOutside.args = {
   ...commonArgs,
   theme: "light",
   items: lightThemeItems,
-  isSearchable:false
+  closeOnClickOutside:true
 };
 
 export const LightThemeWithoutUserManuals = Template.bind({});
@@ -245,12 +247,12 @@ DarkThemeWithProfile.args = {
   profile:"https://cdn1.iconfinder.com/data/icons/website-internet/48/website_-_male_user-512.png"
 };
 
-export const DarkThemeWithoutSearch = Template.bind({});
-DarkThemeWithoutSearch.args = {
+export const DarkThemeWithCloseOnClickOutside = Template.bind({});
+DarkThemeWithCloseOnClickOutside.args = {
   ...commonArgs,
   theme: "dark",
   items: darkThemeItems,
-  isSearchable:false
+  closeOnClickOutside:true
 };
 
 export const DarkThemeWithoutUsermanuals = Template.bind({});
diff --git a/react/ui-components/src/atoms/stories/RadioButtons.stories.js b/react/ui-components/src/atoms/stories/RadioButtons.stories.js
index 1aaf1e6b24..ac4a10fc1e 100644
--- a/react/ui-components/src/atoms/stories/RadioButtons.stories.js
+++ b/react/ui-components/src/atoms/stories/RadioButtons.stories.js
@@ -56,7 +56,7 @@ const commonArgs = {
     options: gendersOptions,
   },
   inputRef: null,
-  label: "Enter Gender",
+  label: "Select Gender",
   errorStyle: null,
   disabled: false,
   type: "radio",
diff --git a/react/ui-components/src/atoms/stories/Spacers.stories.js b/react/ui-components/src/atoms/stories/Spacers.stories.js
new file mode 100644
index 0000000000..499820f0a7
--- /dev/null
+++ b/react/ui-components/src/atoms/stories/Spacers.stories.js
@@ -0,0 +1,45 @@
+import React from "react";
+import { Spacers } from "../../constants/spacers/spacers";
+
+export default {
+  title: "Spacers",
+  argTypes: {
+    spacer: {
+      control: {
+        type: "select",
+        options: [
+          "spacer0",
+          "spacer1",
+          "spacer2",
+          "spacer3",
+          "spacer4",
+          "spacer5",
+          "spacer6",
+          "spacer7",
+          "spacer8",
+          "spacer9",
+          "spacer10",
+          "spacer11",
+          "spacer12",
+        ],
+      },
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height:Spacers?.[args?.spacer],
+        background:"#d6d5d4"
+      }}
+    ></div>
+  );
+};
+
+export const Playground = Template.bind({});
+Playground.args = {
+  spacer: "spacer1",
+};
diff --git a/react/ui-components/src/atoms/stories/Stepper.stories.js b/react/ui-components/src/atoms/stories/Stepper.stories.js
index e2c377b32d..7e5c0bf981 100644
--- a/react/ui-components/src/atoms/stories/Stepper.stories.js
+++ b/react/ui-components/src/atoms/stories/Stepper.stories.js
@@ -23,6 +23,7 @@ export default {
     style: { control: "object" },
     props: { control: "object" },
     activeSteps: { action: "number" },
+    hideDivider:{control:"boolean"}
   },
 };
 
@@ -57,7 +58,8 @@ const commonArgs = {
   props: {
     labelStyles: {},
   },
-  activeSteps:""
+  activeSteps:"",
+  hideDivider:false
 };
 
 //Default stepper
@@ -66,9 +68,24 @@ Default.args = {
   ...commonArgs,
 };
 
-//Default stepper
+//With Active Steps stepper
 export const WithIsActive = Template.bind({});
 WithIsActive.args = {
   ...commonArgs,
   activeSteps:3
 };
+
+//Vertical stepper
+export const VerticalStepperWithDivider = Template.bind({});
+VerticalStepperWithDivider.args = {
+  ...commonArgs,
+  direction:"vertical"
+};
+
+//Vertical stepper
+export const VerticalStepperWithoutDivider = Template.bind({});
+VerticalStepperWithoutDivider.args = {
+  ...commonArgs,
+  direction:"vertical",
+  hideDivider:true
+};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Tab.stories.js b/react/ui-components/src/atoms/stories/Tab.stories.js
new file mode 100644
index 0000000000..b569807c26
--- /dev/null
+++ b/react/ui-components/src/atoms/stories/Tab.stories.js
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import Tab from "../Tab";
+
+export default {
+  title: "Atoms/Tab",
+  component: Tab,
+  argTypes: {
+    configNavItems: { control: "object" },
+    activeLink: { control: "text" },
+    configItemKey: { control: "text" },
+    setActiveLink: { action: "setActiveLink" },
+    showNav: { control: "boolean" },
+    style: { control: "object" },
+    className: { control: "text" },
+    inFormComposer: { control: "boolean" },
+    navClassName: { control: "text" },
+    navStyles: { control: "object" },
+    itemStyle:{control:"object"},
+    onTabClick: { action: "onChange" },
+  },
+};
+
+const Template = (args) => {
+  const [activeLink, setActiveLink] = useState(args.activeLink);
+
+  return (
+    <Tab
+      {...args}
+      activeLink={activeLink}
+      setActiveLink={setActiveLink}
+    />
+  );
+};
+
+// Default Tab
+export const Default = Template.bind({});
+Default.args = {
+  configNavItems: [
+    { name: "Tab 1", code: "Tab 1" },
+    { name: "Tab 2", code: "Tab 2" },
+    { name: "Tab 3", code: "Tab 3" },
+    { name: "Tab 4", code: "Tab 4" },
+  ],
+  activeLink: "Tab 2",
+  showNav: true,
+  style: {},
+  className: "",
+  navClassName: "",
+  configItemKey:"code",
+  navStyles: {},
+  onTagClick:(item)=>{console.log(item)},
+  itemStyle:{}
+};
+
+export const WithConfigItemKey = Template.bind({});
+WithConfigItemKey.args = {
+  configNavItems: [
+    { name: "Tab one", code: "1" },
+    { name: "Tab two", code: "2" },
+    { name: "Tab three", code: "3" },
+    { name: "Tab four", code: "4" },
+  ],
+  activeLink: "Tab one",
+  showNav: true,
+  style: {},
+  className: "",
+  navClassName: "",
+  configItemKey:"name",
+  navStyles: {},
+  itemStyle:{}
+};
+
+export const DifferentLabels = Template.bind({});
+DifferentLabels.args = {
+  configNavItems: [
+    { name: "home", code: "H" },
+    { name: "about", code: "About" },
+    { name: "services", code: "Ss" },
+    { name: "contact", code: "Con" },
+  ],
+  activeLink: "H",
+  showNav: true,
+  style: {},
+  className: "",
+  navClassName: "",
+  configItemKey:"code",
+  navStyles: {},
+  itemStyle:{}
+};
+
+// Tab with custom styles
+export const CustomStyledNav = Template.bind({});
+CustomStyledNav.args = {
+  ...Default.args,
+  style: { backgroundColor: "#FFFFFF" },
+  itemStyle:{backgroundColor:"#FAFAFA",border:"1px solid black"},
+
+};
+
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  configNavItems: [
+    { name: "Tab 1", code: "Tab 1" ,icon:"Home"},
+    { name: "Tab 2", code: "Tab 2" ,icon:"MyLocation"},
+    { name: "Tab 3", code: "Tab 3" ,icon:"Article"},
+    { name: "Tab 4", code: "Tab 4" ,icon:"AccountCircle"},
+  ],
+  activeLink: "Tab 2",
+  showNav: true,
+  style: {},
+  className: "",
+  navClassName: "",
+  configItemKey:"code",
+  navStyles: {},
+  itemStyle:{}
+};
+
+export const WithLargeLabel = Template.bind({});
+WithLargeLabel.args = {
+  configNavItems: [
+    { name: "Tab 1", code: "Tab with the large label given as the name" },
+    { name: "Tab 2", code: "Tab 2" },
+    { name: "Tab 3", code: "Tab 3" },
+    { name: "Tab 4", code: "Tab 4" },
+  ],
+  activeLink: "Tab 2",
+  showNav: true,
+  style: {},
+  className: "",
+  navClassName: "",
+  configItemKey:"code",
+  navStyles: {},
+  itemStyle:{}
+};
\ No newline at end of file
diff --git a/react/ui-components/src/hoc/FieldV1.js b/react/ui-components/src/hoc/FieldV1.js
index 40ee545284..03a9bc5426 100644
--- a/react/ui-components/src/hoc/FieldV1.js
+++ b/react/ui-components/src/hoc/FieldV1.js
@@ -247,6 +247,7 @@ const FieldV1 = ({
               selectAllLabel={populators?.selectAllLabel}
               categorySelectAllLabel={populators?.categorySelectAllLabel}
               restrictSelection={populators?.restrictSelection}
+              isSearchable={populators?.isSearchable}
             />
           </div>
         );
diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js
index c232dbf935..83cda13190 100644
--- a/react/ui-components/src/index.js
+++ b/react/ui-components/src/index.js
@@ -36,6 +36,7 @@ import {
   Header,
   HeaderBar,
   HorizontalNav,
+  Tab,
   InfoCard,
   PageBasedInput,
   InputTextAmount,
@@ -165,6 +166,7 @@ export {
   Header,
   HeaderBar,
   HorizontalNav,
+  Tab,
   InfoCard,
   InputTextAmount,
   SearchField,
diff --git a/react/ui-components/src/molecules/LandingPageCard.js b/react/ui-components/src/molecules/LandingPageCard.js
index 336d45196f..da9f63cc41 100644
--- a/react/ui-components/src/molecules/LandingPageCard.js
+++ b/react/ui-components/src/molecules/LandingPageCard.js
@@ -16,6 +16,7 @@ const LandingPageCard = ({
   hideDivider,
   metricAlignment,
   iconBg,
+  buttonSize,
   onMetricClick,
 }) => {
   const history = useHistory();
@@ -35,7 +36,7 @@ const LandingPageCard = ({
       className={`digit-landing-page-card ${moduleAlignment || ""} ${className}`}
       style={styles}
     >
-      <div className={`icon-module-header ${moduleAlignment || ""}`}>
+      <div className={`icon-module-header ${moduleAlignment || ""} ${icon && iconBg ? "iconBg" : ""}`}>
         {icon && moduleAlignment === "right" && (
           <div
             className={`digit-landingpagecard-icon ${iconBg ? "iconBg" : ""}`}
@@ -115,7 +116,7 @@ const LandingPageCard = ({
           label={label}
           icon={icon}
           type="button"
-          size={"medium"}
+          size={buttonSize || "medium"}
           onClick={() => handleLinkClick({ link, label, icon })}
           style={{ padding: "0px" }}
         />
diff --git a/react/ui-components/src/molecules/MenuCard.js b/react/ui-components/src/molecules/MenuCard.js
index 116b4beec5..3160c7a449 100644
--- a/react/ui-components/src/molecules/MenuCard.js
+++ b/react/ui-components/src/molecules/MenuCard.js
@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { Card, StringManipulator } from "../atoms";
 import { iconRender } from "../utils/iconRender";
 import { Colors } from "../constants/colors/colorconstants";
+import { Spacers } from "../constants/spacers/spacers";
+import { useTranslation } from "react-i18next";
 
 const MenuCard = ({
   icon,
@@ -12,11 +14,13 @@ const MenuCard = ({
   description,
   onClick,
 }) => {
+  const { t } = useTranslation();
   const primaryIconColor = Colors.lightTheme.primary[1];
+  const iconSize = Spacers.spacer8;
 
   return (
     <Card
-      className={`digit-menu-card ${className}`}
+      className={`digit-menu-card ${className} ${onClick ? "clickable" : ""}`}
       style={styles}
       onClick={onClick}
     >
@@ -26,8 +30,8 @@ const MenuCard = ({
             {iconRender(
               icon,
               primaryIconColor,
-              "40px",
-              "40px",
+              iconSize,
+              iconSize,
               `digit-menucard-icon`
             )}
           </div>
@@ -36,7 +40,7 @@ const MenuCard = ({
           <div className="digit-menuacard-menuName">
             {StringManipulator(
               "TOSENTENCECASE",
-              StringManipulator("TRUNCATESTRING", menuName, {
+              StringManipulator("TRUNCATESTRING", t(menuName), {
                 maxLength: 64,
               })
             )}
@@ -47,7 +51,7 @@ const MenuCard = ({
         <div className="digit-menucard-description">
           {StringManipulator(
             "TOSENTENCECASE",
-            StringManipulator("TRUNCATESTRING", description, {
+            StringManipulator("TRUNCATESTRING", t(description), {
               maxLength: 256,
             })
           )}
diff --git a/react/ui-components/src/molecules/stories/LandingPageCard.stories.js b/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
index c3df87b127..8398eaf25b 100644
--- a/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
+++ b/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
@@ -15,6 +15,7 @@ export default {
     metricAlignment: { control: "select", options: ["left", "centre"] },
     iconBg: { control: "boolean" },
     onMetricClick: { control: "action" },
+    buttonSize:{ control: "select", options: ["large","medium", "small"] },
   },
 };
 
@@ -25,6 +26,7 @@ const commonArgs = {
   variation: "one",
   moduleName: "Dashboards",
   moduleAlignment: "right",
+  buttonSize:"medium",
   metrics: [
     {
       count: 40,
@@ -44,7 +46,7 @@ const commonArgs = {
       label: "Create User",
       link:
         "https://unified-dev.digit.org/storybook/?path=/story/atoms-backlink--primary",
-      icon: "Add",
+      icon: "Person",
     },
     {
       label: "Edit User",
@@ -141,12 +143,12 @@ WithoutLinks.args = {
   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 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 = {
diff --git a/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js b/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
index b6ed4963a4..cdf8736bf4 100644
--- a/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
+++ b/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
@@ -31,7 +31,7 @@ Example1.args = {
           { count: 50, label: "New Registrations", link: "#" },
         ]}
         links={[
-          { label: "Add User", link: "#", icon: "Add" },
+          { label: "Add User", link: "#", icon: "Person" },
           { label: "Edit User", link: "#", icon: "Edit" },
         ]}
       />
diff --git a/react/ui-components/src/molecules/stories/MenuCard.stories.js b/react/ui-components/src/molecules/stories/MenuCard.stories.js
index 0bcf92f4e5..a796986020 100644
--- a/react/ui-components/src/molecules/stories/MenuCard.stories.js
+++ b/react/ui-components/src/molecules/stories/MenuCard.stories.js
@@ -38,27 +38,27 @@ WithoutDescription.args = {
 };
 
 // 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: {},
-// };
+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: {},
-// };
+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({});