diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
index ca5d6ff838..5a64f5a202 100644
--- a/react/css/CHANGELOG.md
+++ b/react/css/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.36] - 2024-09-23
+### Changed
+- Added Table css
+
 ## [0.0.2-beta.35] - 2024-09-19
 ### Changed
 - Added OTPInput css
diff --git a/react/css/package.json b/react/css/package.json
index 1903c6f465..56a0c1bf09 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.35",
+  "version": "0.0.2-beta.36",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
diff --git a/react/css/src/digitv2/components/accordionV2.scss b/react/css/src/digitv2/components/accordionV2.scss
index 56eafc57d1..00f096f2b1 100644
--- a/react/css/src/digitv2/components/accordionV2.scss
+++ b/react/css/src/digitv2/components/accordionV2.scss
@@ -26,6 +26,25 @@
 
 .digit-accordion-number {
     @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-primary);
     min-width: theme(digitv2.spacers.spacer6);
     height: theme(digitv2.spacers.spacer6);
@@ -36,6 +55,25 @@
 
 .digit-accordion-header-title {
     @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-primary);
     margin-top: 0.18rem;
     flex-grow: 1;
diff --git a/react/css/src/digitv2/components/checkboxV2.scss b/react/css/src/digitv2/components/checkboxV2.scss
index 0a5a3095ba..3f5ab2e8a5 100644
--- a/react/css/src/digitv2/components/checkboxV2.scss
+++ b/react/css/src/digitv2/components/checkboxV2.scss
@@ -26,14 +26,18 @@
       @apply opacity-0;
     }
 
-    svg{
+    svg {
       flex-shrink: 0;
     }
 
     &:hover {
-      @apply border-2 ;
+      @apply border-2;
       border-color: theme(digitv2.lightTheme.primary-1);
     }
+
+    &.intermediate {
+      border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+    }
   }
 
   .digit-custom-checkbox-emp {
@@ -45,6 +49,10 @@
     border-color: theme(digitv2.lightTheme.primary-1);
   }
 
+  input:hover~.digit-custom-checkbox.intermediate{
+    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
   input:checked~.digit-custom-checkbox {
     border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
   }
@@ -60,6 +68,13 @@
     height: theme(digitv2.spacers.spacer4);
   }
 
+  .intermediate-square {
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.spacers.spacer4);
+    background-color: theme(digitv2.lightTheme.primary-1);
+    display: block;
+  }
+
   .label {
     @extend .typography.body-s;
     font-family: theme(digitv2.fontFamily.sans);
@@ -81,6 +96,7 @@
       /* Media query for desktop */
       font-size: theme(digitv2.fontSize.body-s.desktop);
     }
+
     @apply text-left;
     word-break: break-word;
     letter-spacing: theme(digitv2.spacers.spacer0);
@@ -97,5 +113,16 @@
     input:checked~.digit-custom-checkbox {
       border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
     }
+
+    .digit-custom-checkbox.intermediate{
+      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+    }
+
+    .intermediate-square {
+      width: theme(digitv2.spacers.spacer4);
+      height: theme(digitv2.spacers.spacer4);
+      background-color: theme(digitv2.lightTheme.text-disabled);
+      display: block;
+    }
   }
 }
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/formCardV2.scss b/react/css/src/digitv2/components/formCardV2.scss
new file mode 100644
index 0000000000..9f9f23961e
--- /dev/null
+++ b/react/css/src/digitv2/components/formCardV2.scss
@@ -0,0 +1,202 @@
+.digit-form-card{
+    width: 100%;
+    max-width: 100%;
+    height: fit-content;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    display: flex;
+    flex-direction: column;
+
+    .digit-form-card-header {
+        @apply flex-col;
+        display: flex !important;
+        gap: theme(digitv2.spacers.spacer4);
+    
+        &.with-shadow {
+          box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+        }
+    
+        @media (min-width: 48rem) {
+          padding: theme(digitv2.spacers.spacer6);
+          padding-bottom: theme(digitv2.spacers.spacer0);
+    
+          &.with-shadow {
+            padding-bottom: theme(digitv2.spacers.spacer6);
+          }
+        }
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+          padding: theme(digitv2.spacers.spacer5);
+          padding-bottom: theme(digitv2.spacers.spacer0);
+    
+          &.with-shadow {
+            padding-bottom: theme(digitv2.spacers.spacer5);
+          }
+        }
+    
+        @media (max-width: 30rem) {
+          padding: theme(digitv2.spacers.spacer4);
+          padding-bottom: theme(digitv2.spacers.spacer0);
+    
+          &.with-shadow {
+            padding-bottom: theme(digitv2.spacers.spacer4);
+          }
+        }
+    
+      }
+    
+      .digit-form-card-content {
+        @extend .typography.body-s;
+        position: relative;
+        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);
+        }
+        @apply overflow-hidden overflow-y-auto flex-col;
+        display: flex;
+        flex: 1;
+        color: theme(digitv2.lightTheme.text-primary);
+    
+        &.inline {
+          flex-direction: row;
+        }
+    
+        @media (min-width: 48rem) {
+          gap: theme(digitv2.spacers.spacer6);
+          padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
+    
+          &.with-shadow,
+          &.without-footer{
+            padding: theme(digitv2.spacers.spacer6);
+          }
+    
+        }
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+          gap: theme(digitv2.spacers.spacer5);
+          padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
+        
+          &.with-shadow,
+          &.without-footer{
+            padding: theme(digitv2.spacers.spacer5);
+          }
+        
+        }
+    
+        @media (max-width: 30rem) {
+          gap: theme(digitv2.spacers.spacer4);
+          padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
+        
+          &.with-shadow,
+          &.without-footer{
+            padding: theme(digitv2.spacers.spacer4);
+          }
+        }
+
+        .digit-label-field-pair {
+            margin-bottom: unset;
+        }
+    
+        .digit-radio-options-wrap {
+            margin-bottom: unset;
+        }
+      }
+    
+      .digit-form-card-footer {
+        @apply flex-wrap;
+        display: flex;
+        gap: theme(digitv2.spacers.spacer4);
+    
+        &.with-shadow {
+          box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+        }
+    
+        @media (min-width: 48rem) {
+          padding: theme(digitv2.spacers.spacer6);
+        }
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+          @apply w-full;
+          padding: theme(digitv2.spacers.spacer5);
+        }
+    
+        @media (max-width: 30rem) {
+          @apply flex-col;
+          padding: theme(digitv2.spacers.spacer4);
+        }
+
+
+        .digit-form-card-buttons {
+          margin-left: auto;
+          display: flex;
+          gap: theme(digitv2.spacers.spacer4);
+          @apply max-w-full flex-wrap;
+      
+          @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            @apply w-full;
+      
+            button {
+              flex: 1;
+            }
+          }
+      
+          @media (max-width: 30rem) {
+            @apply flex-col;
+            margin: theme(digitv2.spacers.spacer0);
+      
+            button {
+              width: 100%;
+            }
+          }
+    
+          &.equal-buttons{
+            width: 100%;
+    
+            @media (min-width: 30.063rem) {
+    
+              button {
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+
+      .vertical-formcard-divider{
+        position: absolute;
+
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            top: theme(digitv2.spacers.spacer4);
+            height: calc(100% - 2rem);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            top: theme(digitv2.spacers.spacer5);
+            height: calc(100% - 2.5rem);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            top: theme(digitv2.spacers.spacer6);
+            height: calc(100% - 3rem);
+        }
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+        z-index: 1;
+      }
+}
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/landingpagecardV2.scss b/react/css/src/digitv2/components/landingpagecardV2.scss
index aef6f7f988..728df1d158 100644
--- a/react/css/src/digitv2/components/landingpagecardV2.scss
+++ b/react/css/src/digitv2/components/landingpagecardV2.scss
@@ -1,4 +1,5 @@
 .digit-landing-page-card {
+    width: fit-content;
     background-color: theme(digitv2.lightTheme.paper-primary);
     box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
     min-width: 15%;
@@ -68,6 +69,25 @@
 
         .ladingcard-moduleName {
             @extend .typography.heading-m;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
             color: theme(digitv2.lightTheme.primary-2);
             overflow: hidden;
             word-wrap: break-word;
@@ -109,6 +129,25 @@
 
             .metric-count {
                 @extend .typography.heading-m;
+                font-family: theme(digitv2.fontFamily.sans);
+                font-style: theme(digitv2.fontStyle.normal);
+                font-weight: theme(digitv2.fontWeight.bold);
+                line-height: theme(digitv2.lineHeight.lineheight1);
+            
+                @media (max-aspect-ratio: 9/16) {
+                  /* Media query for mobile */
+                  font-size: theme(digitv2.fontSize.heading-m.mobile);
+                }
+            
+                @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                  /* Media query for tablets */
+                  font-size: theme(digitv2.fontSize.heading-m.tablet);
+                }
+            
+                @media (min-aspect-ratio: 3/4) {
+                  /* Media query for desktop */
+                  font-size: theme(digitv2.fontSize.heading-m.desktop);
+                }
                 color: theme(digitv2.lightTheme.text-primary);
             }
 
@@ -149,6 +188,11 @@
         justify-content: flex-start;
     }
 
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        width: 100%;
+    }
+
 }
 
 .digit-landingpage-divider {
diff --git a/react/css/src/digitv2/components/menuCardV2.scss b/react/css/src/digitv2/components/menuCardV2.scss
index 78de76da04..80b8357b67 100644
--- a/react/css/src/digitv2/components/menuCardV2.scss
+++ b/react/css/src/digitv2/components/menuCardV2.scss
@@ -44,6 +44,25 @@
 
         .digit-menuacard-menuName {
             @extend .typography.heading-m;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
             line-height: normal;
             color: theme(digitv2.lightTheme.primary-2);
         }
diff --git a/react/css/src/digitv2/components/metricCardV2.scss b/react/css/src/digitv2/components/metricCardV2.scss
new file mode 100644
index 0000000000..2e8ce147f1
--- /dev/null
+++ b/react/css/src/digitv2/components/metricCardV2.scss
@@ -0,0 +1,151 @@
+.digit-metric-card {
+    position: relative;
+    @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);
+    }
+
+    .metric-divider{
+        margin: theme(digitv2.spacers.spacer0);
+    }
+
+    .vertical-metric-divider{
+        position: absolute;
+
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            top: theme(digitv2.spacers.spacer4);
+            height: calc(100% - 2rem);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            top: theme(digitv2.spacers.spacer5);
+            height: calc(100% - 2.5rem);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            top: theme(digitv2.spacers.spacer6);
+            height: calc(100% - 3rem);
+        }
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+        z-index: 1;
+    }
+}
+
+.metric-item {
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer1);
+    padding: theme(digitv2.spacers.spacer4);
+
+    .metric-value {
+        @extend .typography.heading-l;
+        color: theme(digitv2.lightTheme.primary-2);
+        line-height: normal;
+    }
+
+    .metric-description {
+        @extend .typography.body-s;
+        text-align: center;
+        color: theme(digitv2.lightTheme.text-primary);
+
+        @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);
+        }
+    }
+
+    .metric-status {
+        @extend .typography.body-xs;
+        display: flex;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        gap: theme(digitv2.spacers.spacer1);
+
+        @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);
+        }
+
+
+        svg {
+            flex-shrink: 0;
+            width: theme(digitv2.spacers.spacer4);
+            height: theme(digitv2.spacers.spacer4);
+        }
+
+        color: theme(digitv2.lightTheme.primary-1);
+
+        &.Increased {
+            color: theme(digitv2.lightTheme.alert-success);
+        }
+
+        &.Decreased {
+            color: theme(digitv2.lightTheme.alert-error);
+        }
+
+        &.Nochange {
+            color: theme(digitv2.lightTheme.alert-info);
+        }
+    }
+}
\ 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 40a242c136..91290c2bda 100644
--- a/react/css/src/digitv2/components/mobilesidebarV2.scss
+++ b/react/css/src/digitv2/components/mobilesidebarV2.scss
@@ -207,7 +207,7 @@
   transition: height 0.3s ease;
 
   .digit-inner-level-child {
-    margin-left: 3.5rem;
+    margin-left: 2.25rem;
     border-left: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 
     &.dark {
@@ -414,7 +414,7 @@
   margin-right: theme(digitv2.spacers.spacer3);
   width: theme(digitv2.spacers.spacer6);
   height: theme(digitv2.spacers.spacer6);
-  margin-left: theme(digitv2.spacers.spacer7);
+  margin-left: theme(digitv2.spacers.spacer6);
 }
 
 .digit-item-label-msb {
diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
index d7cd0da0a7..21f74f0721 100644
--- a/react/css/src/digitv2/components/multiSelectDropdownV2.scss
+++ b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -27,6 +27,7 @@
       @extend .typography.body-l;
       @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
       letter-spacing: theme(digitv2.spacers.spacer0);
+      padding-left: 1%;
       &:focus {
         @apply outline-none;
       }
@@ -100,6 +101,25 @@
   }
   .digit-category-name {
     @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-primary);
   }
   .digit-category-selectAll {
@@ -201,6 +221,25 @@
       border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
       p {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
       }
       .digit-label {
@@ -244,6 +283,25 @@
       background: theme(digitv2.lightTheme.primary-1);
       p {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
       }
       .digit-label {
@@ -327,6 +385,25 @@
         .option-des-container {
           p {
             @extend .typography.heading-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-s.desktop);
+            }
           }
         }
         .digit-multiselectdropodwn-custom-checkbox {
@@ -386,14 +463,10 @@
   .digit-multiselectdropdown-master-active {
     .digit-multiselectdropdown-label {
       p {
+        @extend .typography.body-l;
         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);
-          font-family: theme(digitv2.fontFamily.sans);
-          font-weight: theme(digitv2.fontWeight.regular);
           text-align: left;
       }
     }
diff --git a/react/css/src/digitv2/components/otpInputV2.scss b/react/css/src/digitv2/components/otpInputV2.scss
index 4e3dfa5400..cbca1de24a 100644
--- a/react/css/src/digitv2/components/otpInputV2.scss
+++ b/react/css/src/digitv2/components/otpInputV2.scss
@@ -1,5 +1,5 @@
 .digit-label-otp-wrapper {
-  display: flex;
+  display: flex !important;
   align-items: center;
   flex-direction: column;
   gap: theme(digitv2.spacers.spacer4);
@@ -16,9 +16,9 @@
   }
 
   .otp-input-container {
-    display: flex;
     justify-content: center;
     gap: theme(digitv2.spacers.spacer3);
+    display: flex !important;
   }
 
 
@@ -27,7 +27,7 @@
     align-items: center;
     justify-content: center;
     gap:theme(digitv2.spacers.spacer2);
-    flex-direction: column;
+    flex-direction: column !important;
 
     .digit-error-icon-message-wrap {
       width: fit-content;
diff --git a/react/css/src/digitv2/components/panelV2.scss b/react/css/src/digitv2/components/panelV2.scss
index 73fb113110..7f15e63082 100644
--- a/react/css/src/digitv2/components/panelV2.scss
+++ b/react/css/src/digitv2/components/panelV2.scss
@@ -107,6 +107,25 @@
 
     .digit-panel-response {
       @extend .typography.heading-m;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.bold);
+      line-height: theme(digitv2.lineHeight.lineheight1);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.heading-m.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.heading-m.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.heading-m.desktop);
+      }
       color: theme(digitv2.lightTheme.paper-primary);
       line-height: normal;
     }
diff --git a/react/css/src/digitv2/components/popUpV2.scss b/react/css/src/digitv2/components/popUpV2.scss
index 97c6dda120..5594455a62 100644
--- a/react/css/src/digitv2/components/popUpV2.scss
+++ b/react/css/src/digitv2/components/popUpV2.scss
@@ -167,24 +167,31 @@
 
       .digit-popup-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);
+          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);
         }
         color: theme(digitv2.lightTheme.text-primary);
       }
diff --git a/react/css/src/digitv2/components/selectDropdownV2.scss b/react/css/src/digitv2/components/selectDropdownV2.scss
index 96e141c60d..6a2117f46f 100644
--- a/react/css/src/digitv2/components/selectDropdownV2.scss
+++ b/react/css/src/digitv2/components/selectDropdownV2.scss
@@ -56,7 +56,6 @@
       @apply absolute z-10 h-full outline-none;
       width:calc(100%- (theme(digitv2.spacers.spacer7)));
       background-color: transparent;
-      font-size: theme(digitv2.spacers.spacer4);
       padding-top: theme(digitv2.spacers.spacer2);
       padding-bottom: theme(digitv2.spacers.spacer2);
       padding-left: theme(digitv2.spacers.spacer3);
@@ -126,6 +125,25 @@
   @apply flex items-center overflow-hidden whitespace-no-wrap;
   color: theme(digitv2.lightTheme.text-primary);
   gap: theme(digitv2.spacers.spacer1);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  font-weight: theme(digitv2.fontWeight.bold);
+  line-height: theme(digitv2.lineHeight.lineheight1);
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    font-size: theme(digitv2.fontSize.heading-s.mobile);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    font-size: theme(digitv2.fontSize.heading-s.tablet);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    font-size: theme(digitv2.fontSize.heading-s.desktop);
+  }
 }
 .digit-dropdown-item {
   @apply flex flex-row;
@@ -224,6 +242,25 @@
     .option-des-container {
       .main-option {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
       }
     }
   }
@@ -241,6 +278,25 @@
       .option-des-container {
         .main-option {
           @extend .typography.heading-s;
+          font-family: theme(digitv2.fontFamily.sans);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.bold);
+          line-height: theme(digitv2.lineHeight.lineheight1);
+      
+          @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            font-size: theme(digitv2.fontSize.heading-s.mobile);
+          }
+      
+          @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            font-size: theme(digitv2.fontSize.heading-s.tablet);
+          }
+      
+          @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            font-size: theme(digitv2.fontSize.heading-s.desktop);
+          }
           color: theme(digitv2.lightTheme.paper-primary);
         }
       }
@@ -260,6 +316,25 @@
       .option-des-container {
         .main-option {
           @extend .typography.heading-s;
+          font-family: theme(digitv2.fontFamily.sans);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.bold);
+          line-height: theme(digitv2.lineHeight.lineheight1);
+      
+          @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            font-size: theme(digitv2.fontSize.heading-s.mobile);
+          }
+      
+          @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            font-size: theme(digitv2.fontSize.heading-s.tablet);
+          }
+      
+          @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            font-size: theme(digitv2.fontSize.heading-s.desktop);
+          }
           color: theme(digitv2.lightTheme.paper-primary);
         }
       }
@@ -294,6 +369,7 @@
   }
 }
 .digit-dropdown-employee-select-wrap--elipses {
+  @extend .typography.body-l;
   @apply overflow-hidden whitespace-no-wrap;
   width:calc(100%- (theme(digitv2.spacers.spacer7)));
   text-overflow: ellipsis;
diff --git a/react/css/src/digitv2/components/sidebarV2.scss b/react/css/src/digitv2/components/sidebarV2.scss
index 81800f2c98..94fc0f4460 100644
--- a/react/css/src/digitv2/components/sidebarV2.scss
+++ b/react/css/src/digitv2/components/sidebarV2.scss
@@ -236,6 +236,25 @@
 
     .item-label {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
     }
 }
diff --git a/react/css/src/digitv2/components/slideOverMenuV2.scss b/react/css/src/digitv2/components/slideOverMenuV2.scss
new file mode 100644
index 0000000000..bcaeba5c17
--- /dev/null
+++ b/react/css/src/digitv2/components/slideOverMenuV2.scss
@@ -0,0 +1,185 @@
+.digit-slider-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  transition: transform 0.3s ease;
+  z-index: 1000;
+  overflow: hidden;
+  border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+  background: #FAFAFA;
+  box-shadow: -0.125rem -0.25rem 0.356rem 0rem #00000026;
+
+}
+
+.digit-slider-container.left {
+  left: 0;
+  transform: translateX(-100%);
+  width: 18.75rem;
+}
+
+.digit-slider-container.right {
+  right: 0;
+  transform: translateX(100%);
+  width: 18.75rem;
+}
+
+.digit-slider-container.open.left,
+.digit-slider-container.open.right {
+  transform: translateX(0);
+}
+
+.digit-slider-container.closed {
+  width: 4rem;
+}
+
+.digit-slider-container.closed.left {
+  transform: translateX(0);
+}
+
+.digit-slider-container.closed.right {
+  transform: translateX(0);
+}
+
+
+.section-divider-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: theme(digitv2.spacers.spacer4);
+}
+
+.slider-handler {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  padding-left: theme(digitv2.spacers.spacer1);
+  border-radius: 50%;
+  z-index: 1001;
+  display: flex;
+  gap:theme(digitv2.spacers.spacer1);
+  align-items: center;
+
+  .scroll-bar {
+    height: 11.25rem;
+    width: theme(digitv2.spacers.spacer2);
+    border-radius: 0.563rem;
+    background-color: #D9D9D9;
+
+  }
+
+  .slider-handler-svg {
+    background: #FFFFFF;
+    box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+    width: theme(digitv2.spacers.spacer8);
+    height:theme(digitv2.spacers.spacer8);
+
+  }
+
+  &.dynamic {
+    &.left {
+      right: 0;
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.slider-bg-active {
+  position: fixed;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(0.125rem);
+  -webkit-backdrop-filter: blur(0.125rem);
+  right: 0;
+  bottom: 0;
+  background: rgba(11, 12, 12, 0.7);
+  z-index: 999;
+}
+
+.slider-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.slider-header {
+  flex-shrink: 0;
+  padding: theme(digitv2.spacers.spacer4);
+  border-bottom: 0.063rem solid #d6d5d4;
+}
+
+.slider-section {
+  display: flex;
+  flex-direction: column;
+  gap: theme(digitv2.spacers.spacer2);
+  flex-grow: 1;
+
+}
+
+.section-divider {
+  border-top: 0.063rem solid #d6d5d4;
+}
+
+.slider-footer {
+  bottom: 0;
+  width: 100%;
+  z-index: 5;
+  padding: theme(digitv2.spacers.spacer4);
+  border-top: 0.063rem solid #d6d5d4;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.slider-body {
+  display: flex;
+  flex-grow: 1;
+  padding: theme(digitv2.spacers.spacer4);
+  gap: theme(digitv2.spacers.spacer4);
+  @extend .typography.body-s;
+  flex-direction: column;
+  color: theme(digitv2.lightTheme.text-primary);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  @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);
+  }
+}
+
+
+.slider-body::-webkit-scrollbar {
+  width: 0.375rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.slider-body::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.slider-body::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/stepperV2.scss b/react/css/src/digitv2/components/stepperV2.scss
index ee28328436..665ebbaa50 100644
--- a/react/css/src/digitv2/components/stepperV2.scss
+++ b/react/css/src/digitv2/components/stepperV2.scss
@@ -65,6 +65,25 @@
 
       &.current {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
@@ -110,18 +129,18 @@
     height: 0.125rem;
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-      min-width: 6.313rem;
+      /*min-width: 6.313rem;*/
       max-width: 39.438rem;
     }
 
     @media (max-aspect-ratio: 9/16) {
-      min-width: 4.313rem;
+      /*min-width: 4.313rem;*/
       max-width: 16.875rem;
       top: 0.875rem;
     }
 
     @media (min-aspect-ratio: 3/4) {
-      min-width: 5.313rem;
+      /*min-width: 5.313rem;*/
       max-width: 82.688rem;
     }
 
@@ -170,6 +189,25 @@
     .stepper-label {
       &.completed {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
diff --git a/react/css/src/digitv2/components/tabV2.scss b/react/css/src/digitv2/components/tabV2.scss
index 4404f868b7..47d16d3fbb 100644
--- a/react/css/src/digitv2/components/tabV2.scss
+++ b/react/css/src/digitv2/components/tabV2.scss
@@ -80,6 +80,25 @@
 
                 .digit-tab-label {
                     @extend .typography.heading-s;
+                    font-family: theme(digitv2.fontFamily.sans);
+                    font-style: theme(digitv2.fontStyle.normal);
+                    font-weight: theme(digitv2.fontWeight.bold);
+                    line-height: theme(digitv2.lineHeight.lineheight1);
+                
+                    @media (max-aspect-ratio: 9/16) {
+                      /* Media query for mobile */
+                      font-size: theme(digitv2.fontSize.heading-s.mobile);
+                    }
+                
+                    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                      /* Media query for tablets */
+                      font-size: theme(digitv2.fontSize.heading-s.tablet);
+                    }
+                
+                    @media (min-aspect-ratio: 3/4) {
+                      /* Media query for desktop */
+                      font-size: theme(digitv2.fontSize.heading-s.desktop);
+                    }
                     color: theme(digitv2.lightTheme.primary-1);
                     white-space: noWrap;
                     overflow: hidden;
diff --git a/react/css/src/digitv2/components/tableV2.scss b/react/css/src/digitv2/components/tableV2.scss
new file mode 100644
index 0000000000..fdb11f2633
--- /dev/null
+++ b/react/css/src/digitv2/components/tableV2.scss
@@ -0,0 +1,697 @@
+.digit-table-footer-wrapper{
+    display: flex;
+    flex-direction: column;
+}
+
+.digit-table-container {
+    overflow: auto;
+    width: 100%;
+    position: relative;
+    max-height: 100vh;
+    max-width: 100%;
+
+    &.withBorder {
+        border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    .digit-cursorPointer {
+        width: 100%;
+    }
+}
+
+.fixed-columns {
+    position: sticky;
+    overflow: hidden;
+    left: 0;
+    z-index: 2;
+    position: -webkit-sticky;
+    position: sticky;
+}
+
+.scrollable-columns {
+    flex: 1;
+    /*overflow-x: auto;*/
+    white-space: normal;
+    z-index: 1;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    overflow-x: auto;
+}
+
+th {
+    @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+    color: theme(digitv2.lightTheme.primary-2);
+    background-color: theme(digitv2.lightTheme.generic-background);
+    padding: theme(digitv2.spacers.spacer4);
+    min-width: 9.375rem;    
+    word-wrap: break-word;
+    white-space: normal;
+    text-align: left;
+    width: fit-content;
+
+    &.withBorder {
+        border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.withColumnDivider {
+        border-right: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.scrollable-columns.withHeaderDivider {
+        position: relative;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: theme(digitv2.spacers.spacer4);
+            right: 0;
+            bottom: theme(digitv2.spacers.spacer4);
+            width: 0.063rem;
+            background-color: theme(digitv2.lightTheme.text-secondary);
+        }
+    }
+}
+
+thead th.withHeaderDivider:last-child::after {
+    display: none;
+}
+
+.sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.hasDes{
+    th{
+        vertical-align: top;
+    }
+}
+td {
+    padding: theme(digitv2.spacers.spacer4);
+    word-wrap: break-word;
+    white-space: normal;
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+    text-align: left;
+    vertical-align: top;
+    width: fit-content;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+
+    &.numeric,
+    &.serialno{
+        text-align: right;
+    }
+
+    @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);
+    }
+
+    &.withRowDivider {
+        border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.withColumnDivider {
+        border-right: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.text,
+    &.textinput,
+    &.description,
+    &.multiselectdropdown,
+    &.dropdown,
+    &.custom,
+    &.checkbox,
+    &.tag,
+    &.switch{
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            min-width: 9.375rem
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            min-width: 12.5rem;
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            min-width: 12.5rem;
+        }
+    }
+    &.serialno,
+    &.numeric {
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            min-width: theme(digitv2.spacers.spacer10);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            min-width: theme(digitv2.spacers.spacer10);;
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            min-width: theme(digitv2.spacers.spacer10);;
+        }
+    }
+    &.button {
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            min-width: 9.375rem
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            min-width: 9.375rem;
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            min-width: 9.375rem;
+        }
+    }
+}
+
+tbody tr:last-child {
+    td {
+        border-bottom: none;
+    }
+}
+
+tbody tr:nth-child(even).withAlternateBg td{
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+}
+
+tbody tr.addHover{
+    cursor: pointer;
+}
+
+tbody tr.selected{
+    td{
+        background-color: theme(digitv2.lightTheme.primary-bg) !important;
+    }
+
+    td:first-child::before{
+        content: '';
+        position: absolute;
+        top: 0.062rem;
+        left: 0;
+        bottom: 0.063rem;
+        width: theme(digitv2.spacers.spacer1);
+        background: theme(digitv2.lightTheme.primary-1);
+        border-top-right-radius: theme(digitv2.spacers.spacer1);
+        border-bottom-right-radius: theme(digitv2.spacers.spacer1);
+    }
+}
+
+tbody tr.addHover:hover td{
+    background-color: theme(digitv2.lightTheme.primary-bg) !important;
+}
+
+
+tfoot td {
+    @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+    color: theme(digitv2.lightTheme.text-primary);
+    background-color: theme(digitv2.lightTheme.generic-background);
+    padding: theme(digitv2.spacers.spacer4);
+    text-align: center;
+    width: 100%;
+
+    &.withBorder {
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+        border-top:none;
+    }
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer-pagination-container {
+    display: flex;
+    align-items: center;
+    gap: theme(digitv2.spacers.spacer2);
+    margin-left: auto;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: theme(digitv2.spacers.spacer2);
+}
+
+.pagination-dropdown{
+    padding: theme(digitv2.spacers.spacer1);
+    outline: none;
+    min-width: 4rem;
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    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);
+    }
+
+    option{
+        width: 100%;
+        text-align: center;
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-primary);
+        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);
+        }
+    }
+}
+
+
+.pagination button {
+    border: 0.063 solid theme(digitv2.lightTheme.generic-divider);
+    cursor: pointer;
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+}
+
+.pagination button:disabled {
+    cursor: not-allowed;
+}
+
+.pagination span {
+    font-weight: normal;
+    margin: 0 10px;
+}
+
+tr th:last-child {
+    &.withColumnDivider {
+        border-right: none;
+    }
+}
+
+tr td:last-child {
+    &.withColumnDivider {
+        border-right: none;
+    }
+}
+
+.sticky-footer-content {
+    position: sticky;
+    display: flex;
+    z-index: 10;
+
+    &.scrollable{
+        overflow-x: auto;
+    }
+
+    td {
+        text-align: right;
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+        color: theme(digitv2.lightTheme.primary-2);
+        overflow-x: auto;
+    }
+}
+
+.sort-icon{
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.spacers.spacer4);
+    cursor: pointer;
+}
+.footer-pagination-content{
+    display: flex;
+}
+
+.digit-table-footer{
+    max-width: 100%;
+    overflow-x: hidden !important;
+    width: 100%;
+    flex: 1;
+}
+.sticky-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+}
+
+.digit-table-card {
+
+    .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader.table-header {
+        color: theme(digitv2.lightTheme.text-primary)
+    }
+}
+
+.selected-state {
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+    text-align: left;
+    vertical-align: top;
+
+    @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);
+    }
+}
+
+.header-des-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .column-header{
+        @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap:theme(digitv2.spacers.spacer1);
+    }
+
+    .column-description {
+        color: theme(digitv2.lightTheme.text-secondary);
+        white-space: nowrap;
+        @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);
+        }
+    }
+}
+
+.table-header-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer2);
+
+    .header-filter-wrapper{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        svg{
+            flex-shrink: 0;
+            margin-left:auto;
+            cursor: pointer;
+        }
+
+        .table-header {
+            @extend .typography.heading-m;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
+            color: theme(digitv2.lightTheme.text-primary);
+            line-height: normal;
+        }
+
+
+    }
+
+    .table-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.generic-inputborder);
+    }
+}
+
+.sticker-footer-td::-webkit-scrollbar {
+    height: 0.5rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.sticker-footer-td::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+}
+
+.sticker-footer-td::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar {
+    height: 0.5rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-table-container::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar:vertical {
+    width: 0rem;
+    background-color: transparent;
+}
+
+.digit-table-container::-webkit-scrollbar-track:vertical {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar-thumb:vertical {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.table-checkbox {
+    margin: theme(digitv2.spacers.spacer0);
+
+    input {
+        margin: theme(digitv2.spacers.spacer0);
+    }
+
+    p {
+        margin: theme(digitv2.spacers.spacer0);
+    }
+}
+
+
+.selection-state-wrapper{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: theme(digitv2.spacers.spacer2);
+
+    .svg-state-wrapper{
+    
+        display: flex;
+        align-items: center;
+        gap: theme(digitv2.spacers.spacer2);
+
+        svg{
+            flex-shrink: 0
+        }
+
+        .selected-state{
+            @extend .typography.heading-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-s.desktop);
+            }
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+
+}
+
+.digit-table-container{
+    .digit-table-footer {
+        position: sticky; 
+        bottom: 0; 
+        width: 100%;
+        z-index: 10;
+      }
+}
diff --git a/react/css/src/digitv2/components/textblockV2.scss b/react/css/src/digitv2/components/textblockV2.scss
index a8aacec288..383f1524fa 100644
--- a/react/css/src/digitv2/components/textblockV2.scss
+++ b/react/css/src/digitv2/components/textblockV2.scss
@@ -35,6 +35,25 @@
 
         .digit-text-block-subheader {
             @extend .typography.heading-m;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
             color: theme(digitv2.lightTheme.text-secondary);
             line-height: normal;
         }
diff --git a/react/css/src/digitv2/components/timelineV2.scss b/react/css/src/digitv2/components/timelineV2.scss
index 42c3e9ad50..a4b1739abc 100644
--- a/react/css/src/digitv2/components/timelineV2.scss
+++ b/react/css/src/digitv2/components/timelineV2.scss
@@ -56,6 +56,25 @@
 
 .timeline-label {
   @extend .typography.heading-s;
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  font-weight: theme(digitv2.fontWeight.bold);
+  line-height: theme(digitv2.lineHeight.lineheight1);
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    font-size: theme(digitv2.fontSize.heading-s.mobile);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    font-size: theme(digitv2.fontSize.heading-s.tablet);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    font-size: theme(digitv2.fontSize.heading-s.desktop);
+  }
   @apply whitespace-normal h-auto text-left;
   color: theme(digitv2.lightTheme.text-primary);
   word-break: break-word;
diff --git a/react/css/src/digitv2/components/toggleV2.scss b/react/css/src/digitv2/components/toggleV2.scss
index b625779123..fa3b0af960 100644
--- a/react/css/src/digitv2/components/toggleV2.scss
+++ b/react/css/src/digitv2/components/toggleV2.scss
@@ -46,6 +46,25 @@
 
   input:checked+.digit-toggle-label {
     @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
     background-color: theme(digitv2.lightTheme.primary-1);
     color: theme(digitv2.lightTheme.paper-primary) !important;
   }
@@ -57,6 +76,25 @@
 
     .digit-toggle-label {
       @extend .typography.heading-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.bold);
+      line-height: theme(digitv2.lineHeight.lineheight1);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.heading-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.heading-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.heading-s.desktop);
+      }
       color: theme(digitv2.lightTheme.paper-primary);
     }
   }
diff --git a/react/css/src/digitv2/components/tooltipwrapperV2.scss b/react/css/src/digitv2/components/tooltipwrapperV2.scss
index cabbae238c..5a52470560 100644
--- a/react/css/src/digitv2/components/tooltipwrapperV2.scss
+++ b/react/css/src/digitv2/components/tooltipwrapperV2.scss
@@ -40,6 +40,25 @@
 
   .tooltip-header{
     @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
     color: theme(digitv2.lightTheme.paper-primary);
   }
 
diff --git a/react/css/src/digitv2/components/topbarV2.scss b/react/css/src/digitv2/components/topbarV2.scss
index 1f46324db8..0ef705372b 100644
--- a/react/css/src/digitv2/components/topbarV2.scss
+++ b/react/css/src/digitv2/components/topbarV2.scss
@@ -277,6 +277,25 @@
   
       .digit-topbar-ulb {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         @apply whitespace-no-wrap overflow-hidden;
         color: theme(digitv2.lightTheme.text-primary);
         text-overflow: ellipsis;
diff --git a/react/css/src/digitv2/components/treeSelectV2.scss b/react/css/src/digitv2/components/treeSelectV2.scss
index eb1b0aa06f..bfe4f0f012 100644
--- a/react/css/src/digitv2/components/treeSelectV2.scss
+++ b/react/css/src/digitv2/components/treeSelectV2.scss
@@ -26,6 +26,25 @@
     &.expanded {
         .digit-option-label {
             @extend .typography.heading-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-s.desktop);
+            }
             color: theme(digitv2.lightTheme.text-primary);
             /*font-size: 1rem;
             font-weight: theme(digitv2.fontWeight.bold);
@@ -111,6 +130,25 @@
         }
         .digit-option-label {
             @extend .typography.heading-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-s.desktop);
+            }
             color: theme(digitv2.lightTheme.paper-primary);
         }
     }
diff --git a/react/css/src/digitv2/components/uploaderV2.scss b/react/css/src/digitv2/components/uploaderV2.scss
index bc39ca3f42..860317de20 100644
--- a/react/css/src/digitv2/components/uploaderV2.scss
+++ b/react/css/src/digitv2/components/uploaderV2.scss
@@ -72,6 +72,10 @@
     gap:theme(digitv2.spacers.spacer1);
   }
 
+  &.inline{
+    flex-direction: row;
+  }
+  
   .digit-upload-label {
     @extend .typography.label;
     @apply text-left;
@@ -428,6 +432,25 @@
 
       .uploaded-file-details {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         color: theme(digitv2.lightTheme.text-secondary);
       }
 
@@ -596,6 +619,25 @@
 
   .capture-heading {
     @extend .typography.heading-m;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-m.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-m.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
     @apply items-center;
     color: #000000;
     display: flex;
@@ -630,4 +672,27 @@
   to {
     transform: translateY(0);
   }
-}
\ No newline at end of file
+}
+
+
+.digit-upload-file-composer-wrapper{
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+   gap:theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-width: 30rem) {
+    gap:theme(digitv2.spacers.spacer4);
+  }
+
+  @media (min-width: 48rem) {
+    gap:theme(digitv2.spacers.spacer6);
+  }
+
+  .upload-filecomposer-header{
+    color: theme(digitv2.lightTheme.text-primary) !important;
+  }
+
+}
diff --git a/react/css/src/digitv2/components/viewCardFieldPairV2.scss b/react/css/src/digitv2/components/viewCardFieldPairV2.scss
index 96daef137c..2bb7e025f8 100644
--- a/react/css/src/digitv2/components/viewCardFieldPairV2.scss
+++ b/react/css/src/digitv2/components/viewCardFieldPairV2.scss
@@ -7,6 +7,25 @@
 
     .digit-viewcard-label{
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         @apply whitespace-pre-wrap break-words w-full;
         word-break: break-word;
         color: theme(digitv2.lightTheme.text-primary);
diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
index 43dda570db..1ab3ed9c83 100644
--- a/react/css/src/digitv2/index.scss
+++ b/react/css/src/digitv2/index.scss
@@ -46,6 +46,10 @@
 @import url("./components/landingpagecardV2.scss");
 @import url("./components/menuCardV2.scss");
 @import url("./components/otpInputV2.scss");
+@import url("./components/tableV2.scss");
+@import url("./components/slideOverMenuV2.scss");
+@import url("./components/metricCardV2.scss");
+@import url("./components/formCardV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");
diff --git a/react/example/package.json b/react/example/package.json
index bbb3563ce9..648ba01ca6 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.41",
+    "@egovernments/digit-ui-components": "0.0.2-beta.42",
     "@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 8398a371db..fa8d0bd778 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.35/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.36/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 ccff020c9f..2e18d205b1 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.41",
+    "@egovernments/digit-ui-components": "0.0.2-beta.42",
     "@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 ae54ccfcd1..62923da3bc 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.41",
+    "@egovernments/digit-ui-components": "0.0.2-beta.42",
     "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 51c3d4bd1f..b10e0e459e 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.35",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.36",
     "@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.41",
+    "@egovernments/digit-ui-components": "0.0.2-beta.42",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",
diff --git a/react/ui-components/.storybook/preview-head.html b/react/ui-components/.storybook/preview-head.html
index e32e63f2e1..6b43182f38 100644
--- a/react/ui-components/.storybook/preview-head.html
+++ b/react/ui-components/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <head>
     <!-- .storybook/preview-head.html -->
-    <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.35/dist/index.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.36/dist/index.css"/>
     <!-- Pull in static files served from your Static directory or the internet -->
     <!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
     <link rel="preload" href="/fonts/my-font.woff2" />
diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
index 111cd8830d..aea863de33 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.42] - 2024-09-23
+### New Changes
+- Added Table Molecule 
+
 ## [0.0.2-beta.41] - 2024-09-19
 ### New Changes
 - Added OTPInput 
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 3ee8c26eca..3b3b169571 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.41",
+  "version": "0.0.2-beta.42",
   "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.35",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.36",
     "@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 210dbd81fa..a89374948e 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.35/dist/index.css"/>
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.36/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 6f08545547..d13fecc7f4 100644
--- a/react/ui-components/src/atoms/Accordion.js
+++ b/react/ui-components/src/atoms/Accordion.js
@@ -5,6 +5,7 @@ import { Colors } from "../constants/colors/colorconstants";
 import { iconRender } from "../utils/iconRender";
 import { Spacers } from "../constants/spacers/spacers";
 import Divider from "./Divider";
+import StringManipulator from "./StringManipulator";
 
 const Accordion = ({
   title,
@@ -27,7 +28,7 @@ const Accordion = ({
   const [isOpen, setIsOpen] = useState(isOpenInitially);
 
   const iconColor = Colors.lightTheme.text.primary;
-  const toggleiconSize = Spacers.spacer8;
+  const toggleiconSize = Spacers.spacer6;
   const iconSize = Spacers.spacer6;
 
   const toggleAccordion = () => {
@@ -47,7 +48,7 @@ const Accordion = ({
         !hideCardBorder ? "border" : ""
       } ${!hideBorderRadius ? "borderRadius" : ""} ${
         !hideCardBg ? "cardBg" : ""
-      } ${!hideDivider && isOpen ? "divider" : ""} ${
+      } ${!hideDivider && isOpen ? "withDivider" : ""} ${
         hideDivider && isOpen ? "no-divider" : ""
       }`}
       style={customStyles}
@@ -70,17 +71,17 @@ const Accordion = ({
             {"."}
           </div>
         )}
-        <div className="digit-accordion-header-title">{title}</div>
+        <div className="digit-accordion-header-title">{StringManipulator("TOSENTENCECASE", title)}</div>
         <div
           className={`digit-accordion-toggle ${
             isOpen ? "animate-open" : "animate-close"
           }`}
         >
-          <SVG.ChevronLeft
+          <SVG.ArrowBackIos
             fill={iconColor}
             width={toggleiconSize}
             height={toggleiconSize}
-          ></SVG.ChevronLeft>
+          ></SVG.ArrowBackIos>
         </div>
       </div>
       <div className={`digit-accordion-content ${isOpen ? "open" : ""}`}>
@@ -92,7 +93,6 @@ const Accordion = ({
 
 Accordion.propTypes = {
   title: PropTypes.string.isRequired,
-  content: PropTypes.node.isRequired,
   icon: PropTypes.string,
   iconFill: PropTypes.string,
   iconWidth: PropTypes.string,
@@ -173,7 +173,7 @@ AccordionWrapper.propTypes = {
 };
 
 AccordionWrapper.defaultProps = {
-  allowMultipleOpen: false,
+  allowMultipleOpen: true,
   addDivider: true,
   customClassName: "",
   customStyles: {},
diff --git a/react/ui-components/src/atoms/BreadCrumb.js b/react/ui-components/src/atoms/BreadCrumb.js
index fb8288e705..edf9a6bb25 100644
--- a/react/ui-components/src/atoms/BreadCrumb.js
+++ b/react/ui-components/src/atoms/BreadCrumb.js
@@ -20,7 +20,8 @@ const BreadCrumb = (props) => {
   }, [props.crumbs, props.maxItems, expanded,props.itemsBeforeCollapse,props.itemsAfterCollapse,props?.expandText]);
 
   function isLast(index) {
-    return index === crumbsToDisplay.length - 1;
+    let validcrumb = props.crumbs?.filter((ob) => ob?.show === true)
+    return validcrumb?.findIndex((ob) => ob?.path === props?.crumbs?.[index]?.path) === validcrumb?.length - 1;
   }
 
   const handleCrumbClick = () => {
diff --git a/react/ui-components/src/atoms/CheckBox.js b/react/ui-components/src/atoms/CheckBox.js
index edead54e8a..d97e28d611 100644
--- a/react/ui-components/src/atoms/CheckBox.js
+++ b/react/ui-components/src/atoms/CheckBox.js
@@ -20,6 +20,7 @@ const CheckBox = ({
   isLabelFirst,
   customLabelMarkup,
   hideLabel,
+  isIntermediate,
   ...props
 }) => {
   const { t } = useTranslation();
@@ -67,9 +68,13 @@ const CheckBox = ({
         <p
           className={`digit-custom-checkbox ${
             userType === "employee" ? "digit-custom-checkbox-emp" : ""
-          } ${props?.inputIconClassname} `}
+          } ${isIntermediate ? "intermediate" : ""} ${props?.inputIconClassname} `}
         >
-          <SVG.Check fill={props?.iconFill || (disabled ? diabledIconColor : iconColor)} />
+          {isIntermediate && !checked ? (
+            <span className={`intermediate-square ${disabled ? "squaredisabled" : ""}`} />
+          ) : (
+            <SVG.Check fill={props?.iconFill || (disabled ? diabledIconColor : iconColor)} />
+          )}
         </p>
       </div>
       {(!isLabelFirst && !hideLabel) ? (
@@ -106,7 +111,8 @@ CheckBox.propTypes = {
    */
   ref: PropTypes.func,
   userType: PropTypes.string,
-  hideLabel:PropTypes.bool
+  hideLabel:PropTypes.bool,
+  isIntermediate: PropTypes.bool,
 };
 
 CheckBox.defaultProps = {
@@ -118,6 +124,7 @@ CheckBox.defaultProps = {
   ref: "ww",
   // pageType: "EMPLOYEE",
   index: 0,
+  isIntermediate: false,
 };
 
 export default CheckBox;
diff --git a/react/ui-components/src/atoms/MobileSidebar.js b/react/ui-components/src/atoms/MobileSidebar.js
index 12c53563e8..d624005dc5 100644
--- a/react/ui-components/src/atoms/MobileSidebar.js
+++ b/react/ui-components/src/atoms/MobileSidebar.js
@@ -23,7 +23,8 @@ const MobileSidebar = ({
   onSelect,
   onLogout,
   reopenOnLogout,
-  closeOnClickOutside
+  closeOnClickOutside,
+  onOutsideClick
 }) => {
   const { t } = useTranslation();
   const [searchTerms, setSearchTerms] = useState({});
@@ -36,21 +37,26 @@ const MobileSidebar = ({
   const iconSize = Spacers.spacer6;
 
     useEffect(() => {
-
-      if (!closeOnClickOutside) return; 
-
+      if (!closeOnClickOutside && !onOutsideClick) return;
+    
       const handleClickOutside = (event) => {
         if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
-          setShowHamburger(false);
+          if (onOutsideClick) {
+            onOutsideClick(event);
+          }
+          if (closeOnClickOutside) {
+            setShowHamburger(false); 
+          }
         }
       };
-
+    
       document.addEventListener("mousedown", handleClickOutside);
-
+    
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, [closeOnClickOutside]);
+    }, [closeOnClickOutside, onOutsideClick]);
+    
 
   const handleItemClick = (item, index, parentIndex) => {
     setSelectedItem({ item: item, index: index, parentIndex: parentIndex });
diff --git a/react/ui-components/src/atoms/OTPInput.js b/react/ui-components/src/atoms/OTPInput.js
index bb22a5e721..44f987425c 100644
--- a/react/ui-components/src/atoms/OTPInput.js
+++ b/react/ui-components/src/atoms/OTPInput.js
@@ -117,7 +117,7 @@ const OTPInput = ({
     >
       <div className={`digit-otp-label`}>{label}</div>
       <div className={`otp-error-wrapper`}>
-      <div className="otp-input-container">
+      <div className="otp-input-container" style={{display:"flex"}}>
         {otp.map((data, index) => (
           <input
             key={index}
diff --git a/react/ui-components/src/atoms/SlideOverMenu.js b/react/ui-components/src/atoms/SlideOverMenu.js
new file mode 100644
index 0000000000..56faa2f0c9
--- /dev/null
+++ b/react/ui-components/src/atoms/SlideOverMenu.js
@@ -0,0 +1,166 @@
+import React, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import { Colors } from "../constants/colors/colorconstants";
+import { Spacers } from "../constants/spacers/spacers";
+
+const SlideOverMenu = ({
+  className = "",
+  styles = {},
+  type = "static",
+  position = "right",
+  children,
+  header,
+  footer,
+  onClose = false,
+  bgActive = false,
+  isOverlay = false,
+  isDraggable = false,
+  hideArrow,
+  hideScrollIcon,
+  sections = [],
+  defaultOpenWidth,
+  defaultClosedWidth,
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const sliderRef = useRef(null);
+  const [sliderWidth, setSliderWidth] = useState(defaultOpenWidth || 300);
+  const isDragging = useRef(false);
+
+  const iconColor = Colors.lightTheme.text.primary;
+  const iconSize = Spacers.spacer8;
+
+  const toggleSlider = () => {
+    if (type === "static") return;
+    if (onClose && isOpen) {
+      setIsOpen(false);
+      setSliderWidth(defaultClosedWidth || 64);
+      return;
+    }
+    setIsOpen((prevState) => !prevState);
+    if (!isOpen) {
+      setSliderWidth(defaultOpenWidth);
+    }
+  };
+
+  const handleMouseDown = (e) => {
+    if (isDraggable && type === "dynamic" && isOpen) {
+      isDragging.current = true;
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+  };
+
+  const handleMouseMove = (e) => {
+    if (isDragging.current && sliderRef.current && isOpen) {
+      const newWidth =
+        position === "right" ? window.innerWidth - e.clientX : e.clientX;
+      setSliderWidth(
+        newWidth > (defaultClosedWidth || 64)
+          ? newWidth
+          : defaultClosedWidth || 64
+      );
+    }
+  };
+
+  const handleMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+
+  useEffect(() => {}, [isOpen]);
+
+  return (
+    <>
+      {!bgActive && <div className="slider-bg-active" />}
+      <div
+        ref={sliderRef}
+        className={`digit-slider-container ${position} ${
+          isOpen ? "open" : "closed"
+        } ${className} ${isOverlay ? "overlay" : ""}`}
+        style={{
+          ...styles,
+          width: isOpen ? sliderWidth : defaultClosedWidth || 64,
+        }}
+      >
+        {type === "dynamic" && (
+          <div
+            className={`slider-handler ${type || ""} ${position || ""}`}
+            onClick={toggleSlider}
+            onMouseDown={handleMouseDown}
+            style={{ cursor: isDraggable && isOpen ? "ew-resize" : "pointer" }}
+          >
+            {!hideScrollIcon && <div className="scroll-bar"></div>}
+            {!hideArrow && (
+              <div className="slider-handler-svg">
+                <SVG.ChevronRight
+                  width={iconSize}
+                  height={iconSize}
+                  fill={iconColor}
+                  style={{
+                    transform: isOpen
+                      ? position === "left"
+                        ? "rotate(180deg)"
+                        : "rotate(0deg)"
+                      : position === "left"
+                      ? "rotate(0deg)"
+                      : "rotate(180deg)",
+                    transition: "transform 0.3s ease",
+                  }}
+                ></SVG.ChevronRight>
+              </div>
+            )}
+          </div>
+        )}
+        <div className="slider-content">
+          {header && <div className="slider-header">{header}</div>}
+          <div className="slider-body">
+            {sections && sections?.length > 0
+              ? sections?.map((section, index) => (
+                  <div className="section-divider-wrapper">
+                    <div key={index} className="slider-section">
+                      {section}
+                    </div>
+                    {index < sections.length - 1 && (
+                      <div className="section-divider"></div>
+                    )}
+                  </div>
+                ))
+              : children}
+          </div>
+
+          {footer && <div className="slider-footer">{footer}</div>}
+        </div>
+      </div>
+    </>
+  );
+};
+
+SlideOverMenu.propTypes = {
+  className: PropTypes.string,
+  styles: PropTypes.object,
+  type: PropTypes.oneOf(["static", "dynamic"]),
+  position: PropTypes.oneOf(["left", "right"]),
+  children: PropTypes.node,
+  header: PropTypes.node,
+  footer: PropTypes.node,
+  onClose: PropTypes.bool,
+  bgActive: PropTypes.bool,
+  isOverlay: PropTypes.bool,
+  isDraggable: PropTypes.bool,
+  sections: PropTypes.arrayOf(PropTypes.node),
+  hideArrow: PropTypes.bool,
+  hideScrollIcon: PropTypes.bool,
+  defaultOpenWidth: PropTypes.number,
+  defaultClosedWidth: PropTypes.number,
+};
+
+export default SlideOverMenu;
diff --git a/react/ui-components/src/atoms/TableBody.js b/react/ui-components/src/atoms/TableBody.js
new file mode 100644
index 0000000000..46627ed08f
--- /dev/null
+++ b/react/ui-components/src/atoms/TableBody.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableBody = ({ children,style,className }) => {
+  return (
+    <tbody className={className} style={style}>
+      {children}
+    </tbody>
+  );
+};
+
+TableBody.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
+};
+
+TableBody.defaultProps = {
+  className: "",
+  style: {},
+  children: []
+};
+
+export default TableBody;
diff --git a/react/ui-components/src/atoms/TableCell.js b/react/ui-components/src/atoms/TableCell.js
new file mode 100644
index 0000000000..0f15b80ec8
--- /dev/null
+++ b/react/ui-components/src/atoms/TableCell.js
@@ -0,0 +1,191 @@
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import Switch from "./Switch";
+import CheckBox from "./CheckBox";
+import StringManipulator from "./StringManipulator";
+import Tag from "./Tag";
+import Button from "./Button";
+import TextInput from "./TextInput";
+import Dropdown from "./Dropdown";
+import MultiSelectDropdown from "./MultiSelectDropdown";
+
+const TableCell = ({
+  isHeader,
+  isFooter,
+  colSpan,
+  className,
+  columnType,
+  cellData,
+  children,
+  style,
+  cellref,
+  accessor
+}) => {
+
+
+  const getValueFromAccessor = (cellData, accessor) => {
+    return accessor ? accessor.split('?.').reduce((acc, key) => (acc ? acc[key] : undefined), cellData) : cellData;
+  };
+
+  const renderTableCell = () => {
+    switch (columnType) {
+      case "serialno":
+        return accessor ? getValueFromAccessor(cellData,accessor) : cellData;
+      case "numeric":
+        return accessor ? getValueFromAccessor(cellData,accessor) : cellData;
+      case "text":
+      case "description":
+        {
+          const defaultmaxChars = columnType === "text" ? 64 : 256;
+          if (typeof(cellData) === "object"){
+            return (
+              <div>
+                {StringManipulator(
+                  "TOSENTENCECASE",
+                  StringManipulator("TRUNCATESTRING", accessor ? getValueFromAccessor(cellData,accessor) : cellData?.label, {
+                    maxLength: cellData?.maxLength || defaultmaxChars,
+                  })
+                )}
+              </div>
+            );
+          }
+          return cellData;
+        }
+      case "tag":
+        return (
+          <Tag
+            icon={cellData?.icon}
+            label={cellData?.label}
+            labelStyle={cellData?.labelStyle}
+            showIcon={cellData?.showIcon}
+            style={cellData?.style}
+            type={cellData?.type}
+            className={cellData?.className}
+            stroke={cellData?.stroke}
+            onClick={cellData?.onClick}
+            alignment={cellData?.alignment}
+            iconClassName={cellData?.iconClassName}
+            iconColor={cellData?.iconColor}
+          />
+        );
+      case "switch":
+        return (
+          <Switch
+            isLabelFirst={cellData?.isLabelFirst}
+            label={cellData?.label}
+            labelStyle={cellData?.labelStyle}
+            shapeOnOff={cellData?.shapeOnOff}
+            style={cellData?.style}
+            disable={cellData?.disable}
+            className={cellData?.className}
+            isCheckedInitially={cellData?.isCheckedInitially}
+            onToggle={cellData?.onToggle}
+          />
+        );
+      case "checkbox":
+        return (
+          <CheckBox
+            onChange={cellData?.onChange}
+            label={cellData?.label}
+            value={cellData?.value}
+            disabled={cellData?.disabled}
+            ref={cellData?.ref}
+            checked={cellData?.checked}
+            inputRef={cellData?.inputRef}
+            pageType={cellData?.pageType}
+            style={cellData?.style}
+            index={cellData?.index}
+            isLabelFirst={cellData?.isLabelFirst}
+            customLabelMarkup={cellData?.customLabelMarkup}
+            hideLabel={cellData?.hideLabel}
+            props={cellData?.props}
+            mainClassName={cellData?.mainClassName}
+          />
+        );
+      case "button":
+        return (
+          <Button
+            iconFill={cellData?.iconFill}
+            variation={cellData?.variation}
+            type={cellData?.type}
+            isDisabled={cellData?.isDisabled}
+            showBottom={cellData?.showBottom}
+            icon={cellData?.icon}
+            size={cellData?.size}
+            label={cellData?.label}
+            ref={cellData?.ref}
+            className={cellData?.className}
+            submit={cellData?.submit}
+            formId={cellData?.formId}
+            onClick={cellData?.onClick}
+            title={cellData?.title}
+            style={cellData?.style}
+            isSuffix={cellData?.isSuffix}
+            textStyles={cellData?.textStyles}
+            hideDefaultActionIcon={cellData?.hideDefaultActionIcon}
+            options={cellData?.options}
+            isSearchable={cellData?.isSearchable}
+            optionsKey={cellData?.optionsKey}
+            onSelect={cellData?.onOptionSelect}
+            menuStyles={cellData?.menuStyles}
+          />
+        );
+      case "textinput":
+        return <TextInput {...cellData}></TextInput>;
+      case "dropdown":
+        return <Dropdown {...cellData}></Dropdown>;
+      case "multiselectdropdown":
+        return <MultiSelectDropdown {...cellData}></MultiSelectDropdown>;
+      case "custom":
+      default:
+        return accessor ? getValueFromAccessor(cellData,accessor) : cellData;
+    }
+  };
+
+  if (isHeader) {
+    return (
+      <th ref={cellref} colSpan={colSpan} className={className} style={style}>
+        {children}
+      </th>
+    );
+  }
+
+  if (isFooter) {
+    return (
+      <td ref={cellref} colSpan={colSpan} className={className} style={style}>
+        {children}
+      </td>
+    );
+  }
+
+  return (
+    <td ref={cellref} colSpan={colSpan} className={`${className} ${columnType}`} style={style}>
+      {renderTableCell()}
+    </td>
+  );
+};
+
+
+TableCell.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node,
+  isHeader: PropTypes.bool,
+  isFooter: PropTypes.bool,
+  colSpan: PropTypes.number,
+  columnType: PropTypes.string,
+  accessor: PropTypes.string,
+  cellData: PropTypes.any,
+  cellref: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+};
+
+TableCell.defaultProps = {
+  className: "",
+  style: {},
+  children: []
+};
+
+export default TableCell;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/TableFooter.js b/react/ui-components/src/atoms/TableFooter.js
new file mode 100644
index 0000000000..8ae13bae64
--- /dev/null
+++ b/react/ui-components/src/atoms/TableFooter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableFooter = ({ children ,className,style}) => {
+  return (
+    <tfoot className={className} style={style}>
+      {children}
+    </tfoot>
+  );
+};
+
+TableFooter.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
+};
+
+TableFooter.defaultProps = {
+  className: "",
+  style: {},
+  children: []
+};
+
+export default TableFooter;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/TableHeader.js b/react/ui-components/src/atoms/TableHeader.js
new file mode 100644
index 0000000000..d21c84e307
--- /dev/null
+++ b/react/ui-components/src/atoms/TableHeader.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableHeader = ({ children,className,style }) => {
+  return (
+    <thead className={className} style={style}>
+      {children}
+    </thead>
+  );
+};
+
+TableHeader.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
+};
+
+TableHeader.defaultProps = {
+  className: "",
+  style: {},
+  children: []
+};
+
+export default TableHeader;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/TableMain.js b/react/ui-components/src/atoms/TableMain.js
new file mode 100644
index 0000000000..11ee30228f
--- /dev/null
+++ b/react/ui-components/src/atoms/TableMain.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableMain = ({ children,className,style}) => {
+  return (
+    <table className={className} style={style}>
+      {children}
+    </table>
+  );
+};
+
+TableMain.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
+};
+
+TableMain.defaultProps = {
+  className: "",
+  style: {},
+  children: []
+};
+export default TableMain;
diff --git a/react/ui-components/src/atoms/TableRow.js b/react/ui-components/src/atoms/TableRow.js
new file mode 100644
index 0000000000..c248977a64
--- /dev/null
+++ b/react/ui-components/src/atoms/TableRow.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableRow = ({ children ,className,onClick}) => {
+  return (
+    <tr className={className} onClick={onClick}>
+      {children}
+    </tr>
+  );
+};
+
+TableRow.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
+};
+
+TableRow.defaultProps = {
+  className: "",
+  style: {},
+  children: []
+};
+
+export default TableRow;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/Uploader.js b/react/ui-components/src/atoms/Uploader.js
index b7d6599f4f..31d4a4751d 100644
--- a/react/ui-components/src/atoms/Uploader.js
+++ b/react/ui-components/src/atoms/Uploader.js
@@ -489,7 +489,7 @@ const Uploader = (props) => {
 
   return (
     <Fragment>
-      <div className={`digit-uploader-wrap ${props?.iserror ? "error" : ""}`}>
+      <div className={`digit-uploader-wrap ${props?.inline ? "inline" : ""} ${props?.iserror ? "error" : ""}`}>
         {showLabel && <p className="digit-upload-label">{t(props?.label)}</p>}
         {renderVariant()}
         {props?.iserror && (
diff --git a/react/ui-components/src/atoms/index.js b/react/ui-components/src/atoms/index.js
index abf3dc0517..804ddc1c00 100644
--- a/react/ui-components/src/atoms/index.js
+++ b/react/ui-components/src/atoms/index.js
@@ -92,6 +92,13 @@ import Tooltip from "./Tooltip";
 import BottomSheet from "./BottomSheet";
 import Switch from "./Switch";
 import { CustomSVG } from "./CustomSVG";
+import TableMain from "./TableMain";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableFooter from "./TableFooter";
+import TableHeader from "./TableHeader";
+import TableRow from "./TableRow";
+import SlideOverMenu from "./SlideOverMenu";
 
 export {
   ErrorBoundary,
@@ -144,6 +151,7 @@ export {
   MultiSelectDropdown,
   NoResultsFound,
   OTPInput,
+  SlideOverMenu,
   Paragraph,
   PlusMinusInput,
   PopUp,
@@ -187,5 +195,11 @@ export {
   LinkLabel,
   RoundedLabel,
   //Icons
-  CustomSVG
-};
+  CustomSVG,
+  TableMain,
+  TableHeader,
+  TableFooter,
+  TableBody,
+  TableRow,
+  TableCell
+};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/BreadCrumb.stories.js b/react/ui-components/src/atoms/stories/BreadCrumb.stories.js
index bc2103eb3e..316597486e 100644
--- a/react/ui-components/src/atoms/stories/BreadCrumb.stories.js
+++ b/react/ui-components/src/atoms/stories/BreadCrumb.stories.js
@@ -28,9 +28,9 @@ export default {
     itemsBeforeCollapse: {
       control: { type: "number" },
     },
-    expandText:{
-        control:{type:"text"}
-    }
+    expandText: {
+      control: { type: "text" },
+    },
   },
 };
 
@@ -46,14 +46,17 @@ Default.args = {
     {
       content: "Home",
       show: true,
+      path: "/home",
     },
     {
       content: "Previous",
       show: true,
+      path: "/previous",
     },
     {
       content: "Current",
       show: true,
+      path: "/current",
     },
   ],
 };
@@ -62,19 +65,19 @@ export const WithIcons = Template.bind({});
 WithIcons.args = {
   crumbs: [
     {
-      path: "",
+      path: "/home",
       content: "Home",
       show: true,
       icon: <SVG.Home fill={"#C84C0E"} />,
     },
     {
-      path: "",
+      path: "/previous",
       content: "Previous",
       show: true,
       icon: <SVG.Person fill={"#C84C0E"} />,
     },
     {
-      path: "",
+      path: "/current",
       content: "Current",
       show: true,
       icon: <SVG.Edit fill={"#787878"} />,
@@ -88,14 +91,17 @@ WithCustomSeperator.args = {
     {
       content: "Home",
       show: true,
+      path: "/home",
     },
     {
       content: "Previous",
       show: true,
+      path: "/previous",
     },
     {
       content: "Current",
       show: true,
+      path: "/current",
     },
   ],
   customSeperator: <SVG.ArrowForward fill={"#C84C0E"} />,
@@ -107,22 +113,27 @@ CollapsedBreadCrumbs.args = {
     {
       content: "Home",
       show: true,
+      path: "/home",
     },
     {
       content: "Previous1",
       show: true,
+      path: "/previous1",
     },
     {
       content: "Previous2",
       show: true,
+      path: "/previous2",
     },
     {
       content: "Previous3",
       show: true,
+      path: "/previous3",
     },
     {
       content: "Current",
       show: true,
+      path: "/current",
     },
   ],
   maxItems: 3,
@@ -134,27 +145,32 @@ CollapsedBreadCrumbsWithCustomValues.args = {
     {
       content: "Home",
       show: true,
+      path: "/home",
     },
     {
       content: "Previous1",
       show: true,
+      path: "/previous1",
     },
     {
       content: "Previous2",
       show: true,
+      path: "/previous2",
     },
     {
       content: "Previous3",
       show: true,
+      path: "/previous3",
     },
     {
       content: "Current",
       show: true,
+      path: "/current",
     },
   ],
   maxItems: 3,
-  itemsBeforeCollapse:1,
-  itemsAfterCollapse:2
+  itemsBeforeCollapse: 1,
+  itemsAfterCollapse: 2,
 };
 
 export const CollapsedBreadCrumbsWithExpandText = Template.bind({});
@@ -163,24 +179,29 @@ CollapsedBreadCrumbsWithExpandText.args = {
     {
       content: "Home",
       show: true,
+      path: "/home",
     },
     {
       content: "Previous1",
       show: true,
+      path: "/previous1",
     },
     {
       content: "Previous2",
       show: true,
+      path: "/previous2",
     },
     {
       content: "Previous3",
       show: true,
+      path: "/previous3",
     },
     {
       content: "Current",
       show: true,
+      path: "/current",
     },
   ],
   maxItems: 3,
-  expandText:"{click here to expand}"
-};
\ No newline at end of file
+  expandText: "{click here to expand}",
+};
diff --git a/react/ui-components/src/atoms/stories/CheckBox.stories.js b/react/ui-components/src/atoms/stories/CheckBox.stories.js
index fbe9153af7..58a0a31f67 100644
--- a/react/ui-components/src/atoms/stories/CheckBox.stories.js
+++ b/react/ui-components/src/atoms/stories/CheckBox.stories.js
@@ -15,6 +15,7 @@ export default {
     props: { control: "object" },
     populators: { control: "object" },
     formData: { control: "object" },
+    isIntermediate:{control:"boolean"}
   },
 };
 
@@ -28,6 +29,7 @@ const commonArgs = {
     title: "Value",
     name: "checked",
     isLabelFirst:false,
+    isIntermediate:false
   },
   formData: {
     checked: true,
@@ -172,6 +174,51 @@ CheckedDisabled.args = {
   disabled: true,
 };
 
+//checkbox intermediate
+export const Intermediate = Template.bind({});
+Intermediate.args = {
+  ...commonArgs,
+  populators: {
+    ...commonArgs.populators,
+    title: "",
+    isIntermediate:true
+  },
+  formData: {
+    ...commonArgs.formData,
+    checked: false,
+  },
+};
+
+export const IntermediateLabelled = Template.bind({});
+IntermediateLabelled.args = {
+  ...commonArgs,
+  populators: {
+    ...commonArgs.populators,
+    title: "Value",
+    isIntermediate:true
+  },
+  formData: {
+    ...commonArgs.formData,
+    checked: false,
+  },
+};
+
+//checkbox intermediate
+export const IntermediateDisabled = Template.bind({});
+IntermediateDisabled.args = {
+  ...commonArgs,
+  populators: {
+    ...commonArgs.populators,
+    title: "Value",
+    isIntermediate:true
+  },
+  formData: {
+    ...commonArgs.formData,
+    checked: false,
+  },
+  disabled: true,
+};
+
 export const FunctionalCheckbox = () => {
   const [isChecked, setIsChecked] = React.useState(false);
 
diff --git a/react/ui-components/src/atoms/stories/Hamburger.stories.js b/react/ui-components/src/atoms/stories/Hamburger.stories.js
index 0fbd1e7d11..ce58eb7ad9 100644
--- a/react/ui-components/src/atoms/stories/Hamburger.stories.js
+++ b/react/ui-components/src/atoms/stories/Hamburger.stories.js
@@ -19,7 +19,8 @@ export default {
     onSelect:{ action: "onChange" },
     onLogout:{action:"onChange"},
     reopenOnLogout:{control:"boolean"},
-    closeOnClickOutside:{control:"boolean"}
+    closeOnClickOutside:{control:"boolean"},
+    onOutsideClick:{action:"onChange"}
   },
 };
 
@@ -140,6 +141,13 @@ const lightThemeItems = [
             path: "/",
             label: "InnerModule 1",
             icon: "Lock",
+            children:[
+              {
+                path: "/",
+                label: "SubChildModule 1",
+                icon: "Lock",
+              },
+            ]
           },
           {
             path: "/",
@@ -216,6 +224,15 @@ LightThemeWithCloseOnClickOutside.args = {
   closeOnClickOutside:true
 };
 
+export const LightThemeWithOnOutsideClickLogic = Template.bind({});
+LightThemeWithOnOutsideClickLogic.args = {
+  ...commonArgs,
+  theme: "light",
+  items: lightThemeItems,
+  closeOnClickOutside:false,
+  onOutsideClick:(e)=>{console.log(e)}
+};
+
 export const LightThemeWithoutUserManuals = Template.bind({});
 LightThemeWithoutUserManuals.args = {
   ...commonArgs,
@@ -255,6 +272,15 @@ DarkThemeWithCloseOnClickOutside.args = {
   closeOnClickOutside:true
 };
 
+export const DarkThemeWithOnOutsideClickLogic = Template.bind({});
+DarkThemeWithOnOutsideClickLogic.args = {
+  ...commonArgs,
+  theme: "dark",
+  items: darkThemeItems,
+  closeOnClickOutside:false,
+  onOutsideClick:(e)=>{console.log(e)}
+};
+
 export const DarkThemeWithoutUsermanuals = Template.bind({});
 DarkThemeWithoutUsermanuals.args = {
   ...commonArgs,
diff --git a/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js b/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js
new file mode 100644
index 0000000000..b35927c86f
--- /dev/null
+++ b/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js
@@ -0,0 +1,900 @@
+import React from "react";
+import SlideOverMenu from "../SlideOverMenu";
+import Button from "../Button";
+
+export default {
+  title: "Atoms/SlideOverMenu",
+  component: SlideOverMenu,
+  argTypes: {
+    className: { control: "text" },
+    styles: { control: "object" },
+    type: { control: "select", options: ["static", "dynamic"] },
+    position: { control: "select", options: ["left", "right"] },
+    children: {
+      control: "object",
+    },
+    header: {
+      control: "object",
+    },
+    footer: {
+      control: "object",
+    },
+    onClose: { control: "boolean" },
+    bgActive: { control: "boolean" },
+    isOverlay: { control: "boolean" },
+    hideArrowIcon: { control: "boolean" },
+    hideScrollIcon: { control: "boolean" },
+    isDraggable: { control: "boolean" },
+    defaultClosedWidth: { control: "text" },
+    defaultOpenWidth: { control: "text" },
+  },
+};
+
+const Template = (args) => <SlideOverMenu {...args} />;
+
+const commonArgs = {
+  className: "",
+  styles: {},
+  type: "dynamic",
+  position: "right",
+  children: [],
+  header: [],
+  footer: [],
+  onClose: () => {},
+  bgActive: true,
+  isOverlay: false,
+  isDraggable: false,
+  hideScrollIcon: true,
+  sections: [],
+  hideArrowIcon: false,
+  defaultClosedWidth: "",
+  defaultOpenWidth: "",
+};
+
+const children = [
+  <div>This is static content on the right!</div>,
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+    }}
+  >
+    <div className="typography heading-m" style={{ color: "#0B4B66" }}>
+      Roles
+    </div>
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      label={"Customize Roles"}
+      variation={"link"}
+      size={"medium"}
+    />
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role1
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Complaint
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role2
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Helpdesk
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role3
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Complaint Resolver
+    </div>
+  </div>,
+
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role4
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Complaint
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role5
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Helpdesk
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role6
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Complaint Resolver
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role7
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Complaint
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role8
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Helpdesk
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      Role9
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopRightRadius: "2px",
+        borderBottomRightRadius: "2px",
+        color: "#363636",
+        padding: "10px",
+        width: "100%",
+      }}
+      className="typography body-xs"
+    >
+      Complaint Resolver
+    </div>
+  </div>,
+];
+
+const sections = [
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
+        Roles1
+      </div>
+      <Button
+        onClick={() => {
+          console.log("clicked");
+        }}
+        label={"Customize Roles"}
+        variation={"link"}
+        size={"medium"}
+      />
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role1
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Complaint
+      </div>
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role2
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Helpdesk
+      </div>
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role3
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Complaint Resolver
+      </div>
+    </div>,
+  ],
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
+        Roles2
+      </div>
+      <Button
+        onClick={() => {
+          console.log("clicked");
+        }}
+        label={"Customize Roles"}
+        variation={"link"}
+        size={"medium"}
+      />
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role1
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Complaint
+      </div>
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role2
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Helpdesk
+      </div>
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role3
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Complaint Resolver
+      </div>
+    </div>,
+  ],
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
+        Roles3
+      </div>
+      <Button
+        onClick={() => {
+          console.log("clicked");
+        }}
+        label={"Customize Roles"}
+        variation={"link"}
+        size={"medium"}
+      />
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role1
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Complaint
+      </div>
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role2
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Helpdesk
+      </div>
+    </div>,
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopLeftRadius: "2px",
+          borderBottomLeftRadius: "2px",
+          backgroundColor: "#eeeeee",
+          color: "#363636",
+          padding: "10px",
+        }}
+        className="typography heading-s"
+      >
+        Role3
+      </div>
+      <div
+        style={{
+          border: "1px solid #d6d5d4",
+          borderTopRightRadius: "2px",
+          borderBottomRightRadius: "2px",
+          color: "#363636",
+          padding: "10px",
+          width: "100%",
+        }}
+        className="typography body-xs"
+      >
+        Complaint Resolver
+      </div>
+    </div>,
+  ],
+];
+
+const header = [
+  <div className="typography heading-l" style={{ color: "#0B4B66" }}>
+    Header
+  </div>,
+];
+
+const footer = [
+  <Button
+    onClick={() => {
+      console.log("clicked");
+    }}
+    style={{ width: "100%" }}
+    label={"Customize Sandbox"}
+    icon={"Edit"}
+    variation={"secondary"}
+  />,
+];
+
+export const StaticRight = Template.bind({});
+StaticRight.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+};
+
+export const StaticRightWithoutBgActive = Template.bind({});
+StaticRightWithoutBgActive.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  bgActive: false,
+};
+
+export const StaticRightWithSections = Template.bind({});
+StaticRightWithSections.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  header: header,
+  footer: footer,
+  sections: sections,
+};
+
+export const StaticRightWithSectionsAndWithoutBgActive = Template.bind({});
+StaticRightWithSectionsAndWithoutBgActive.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  header: header,
+  footer: footer,
+  sections: sections,
+  bgActive: false,
+};
+
+export const StaticRightWithCustomWidth = Template.bind({});
+StaticRightWithCustomWidth.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  defaultOpenWidth: 600,
+};
+
+export const StaticLeft = Template.bind({});
+StaticLeft.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+};
+
+export const StaticLeftWithoutBgActive = Template.bind({});
+StaticLeftWithoutBgActive.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  bgActive: false,
+};
+
+export const StaticLeftWithSections = Template.bind({});
+StaticLeftWithSections.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  header: header,
+  footer: footer,
+  sections: sections,
+};
+
+export const StaticLeftWithSectionsWithoutBgActive = Template.bind({});
+StaticLeftWithSectionsWithoutBgActive.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  header: header,
+  footer: footer,
+  sections: sections,
+  bgActive: false,
+};
+
+export const StaticLeftWithCustomWidth = Template.bind({});
+StaticLeftWithCustomWidth.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  defaultOpenWidth: 600,
+};
+
+export const DynamicRight = Template.bind({});
+DynamicRight.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+};
+
+export const DynamicRightWithoutBgActive = Template.bind({});
+DynamicRightWithoutBgActive.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  bgActive: false,
+};
+
+export const DynamicRightWithSections = Template.bind({});
+DynamicRightWithSections.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  header: header,
+  footer: footer,
+  sections: sections,
+};
+
+export const DynamicRightWithSectionsAndWithoutBgActive = Template.bind({});
+DynamicRightWithSectionsAndWithoutBgActive.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  header: header,
+  footer: footer,
+  sections: sections,
+  bgActive: false,
+};
+
+export const DynamicRightWithDragging = Template.bind({});
+DynamicRightWithDragging.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  isDraggable: true,
+};
+
+export const DynamicRightWithCustomWidths = Template.bind({});
+DynamicRightWithCustomWidths.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  defaultClosedWidth: 100,
+  defaultOpenWidth: 600,
+};
+
+export const DynamicLeft = Template.bind({});
+DynamicLeft.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+};
+
+export const DynamicLeftWithoutBgActive = Template.bind({});
+DynamicLeftWithoutBgActive.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  bgActive: false,
+};
+
+export const DynamicLeftWithSections = Template.bind({});
+DynamicLeftWithSections.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  header: header,
+  footer: footer,
+  sections: sections,
+};
+
+export const DynamicLeftWithSectionsAndWithoutBgACtive = Template.bind({});
+DynamicLeftWithSectionsAndWithoutBgACtive.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  header: header,
+  footer: footer,
+  sections: sections,
+  bgActive: false,
+};
+
+export const DynamicLeftWithDragging = Template.bind({});
+DynamicLeftWithDragging.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  isDraggable: true,
+};
+
+export const DynamicLeftWithCustomWidths = Template.bind({});
+DynamicLeftWithCustomWidths.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  defaultClosedWidth: 100,
+  defaultOpenWidth: 600,
+};
diff --git a/react/ui-components/src/hoc/FieldV1.js b/react/ui-components/src/hoc/FieldV1.js
index f2b143de7c..4c47268121 100644
--- a/react/ui-components/src/hoc/FieldV1.js
+++ b/react/ui-components/src/hoc/FieldV1.js
@@ -210,6 +210,7 @@ const FieldV1 = ({
               }}
               value={value}
               checked={formData?.[populators?.name]}
+              isIntermediate={populators?.isIntermediate}
               label={t(`${populators?.title}`)}
               styles={populators?.styles}
               style={populators?.labelStyles}
diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js
index 83cda13190..3098a46f2d 100644
--- a/react/ui-components/src/index.js
+++ b/react/ui-components/src/index.js
@@ -48,6 +48,7 @@ import {
   MultiSelectDropdown,
   NoResultsFound,
   OTPInput,
+  SlideOverMenu,
   Paragraph,
   PlusMinusInput,
   PopUp,
@@ -91,7 +92,13 @@ import {
   Menu,
   SelectionCard,
   Tag,
-  CustomSVG
+  CustomSVG,
+  TableMain,
+  TableHeader,
+  TableFooter,
+  TableBody,
+  TableRow,
+  TableCell
 } from "./atoms";
 
 import { FieldComposer, FieldController, Fields, FormComposerV2, Modal, UploadFileComposer, FieldV1, InboxSearchComposer, ResultsTable } from "./hoc";
@@ -115,7 +122,10 @@ import {
   LandingPageCard,
   MenuCard,
   LandingPageWrapper,
-  MenuCardWrapper
+  MenuCardWrapper,
+  TableMolecule,
+  MetricCard,
+  FormCard
 } from "./molecules";
 
 // import { initCoreLibraries } from "@egovernments/digit-ui-libraries-core";
@@ -178,6 +188,7 @@ export {
   MultiSelectDropdown,
   NoResultsFound,
   OTPInput,
+  SlideOverMenu,
   Paragraph,
   PlusMinusInput,
   PopUp,
@@ -210,6 +221,9 @@ export {
   SearchAction,
   SearchForm,
   LandingPageCard,
+  MetricCard,
+  FormCard,
+  TableMolecule,
   MenuCard,
   MenuCardWrapper,
   LandingPageWrapper,
@@ -247,5 +261,11 @@ export {
   RoundedLabel,
   //Icons
   CustomSVG,
-  ErrorBoundary
-};
+  ErrorBoundary,
+  TableMain,
+  TableHeader,
+  TableFooter,
+  TableBody,
+  TableRow,
+  TableCell
+};
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/FormCard.js b/react/ui-components/src/molecules/FormCard.js
new file mode 100644
index 0000000000..034c9c0a10
--- /dev/null
+++ b/react/ui-components/src/molecules/FormCard.js
@@ -0,0 +1,96 @@
+import React, { Children } from "react";
+import PropTypes from "prop-types";
+import { useLocation } from "react-router-dom";
+import { Card, StringManipulator, Divider, CustomSVG } from "../atoms";
+
+const FormCard = ({
+  type,
+  style = {},
+  children,
+  className,
+  layout,
+  headerData,
+  equalWidthButtons,
+  withDivider,
+  footerData,
+  ...props
+}) => {
+  // Parse the layout prop to determine rows and columns
+  const [rows, columns] = layout
+  ? layout.split("*").map(num => {
+      const parsed = Number(num);
+      return isNaN(parsed) || parsed <= 0 ? 1 : parsed;
+    })
+  : [1, 1];
+
+  // Create grid template strings dynamically
+  const gridTemplateColumns = `repeat(${columns}, 1fr)`;
+  const gridTemplateRows = `repeat(${rows}, 1fr)`;
+
+  // Inline styles for the grid layout
+  const gridStyles = {
+    display: "grid",
+    gridTemplateColumns,
+    gridTemplateRows,
+    ...style,
+  };
+
+    const childrenWithDividers = React.Children.map(children, (child, index) => {
+      const isEndOfRow = (index + 1) % columns === 0; 
+      return (
+        <React.Fragment key={index}>
+          {child}
+          {!isEndOfRow && withDivider && (
+            <div
+              className="vertical-formcard-divider"
+              style={{
+                left: `calc(100% / ${columns} * ${(index % columns) + 1})`,
+              }}
+            />
+          )}
+        </React.Fragment>
+      );
+    });
+
+  return (
+    <div className={`digit-form-card ${className || ""}`}>
+      {headerData && (
+        <div className={`digit-form-card-header`}>{headerData}</div>
+      )}
+      <div
+        className={`digit-form-card-content ${
+          !footerData || footerData.length <= 0 || footerData === undefined
+            ? "withoutFooter"
+            : ""
+        }`}
+        style={gridStyles}
+      >
+        {childrenWithDividers}
+      </div>
+      {footerData && (
+        <div className={`digit-form-card-footer`}>
+          <div
+            className={`digit-form-card-buttons ${
+              equalWidthButtons ? "equal-buttons" : ""
+            }`}
+          >
+            {footerData}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+FormCard.propTypes = {
+  type: PropTypes.string,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  layout: PropTypes.string,
+  headerData: PropTypes.node,
+  equalWidthButtons: PropTypes.bool,
+  withDivider: PropTypes.bool,
+  footerData: PropTypes.node,
+};
+export default FormCard;
diff --git a/react/ui-components/src/molecules/MetricCard.js b/react/ui-components/src/molecules/MetricCard.js
new file mode 100644
index 0000000000..8fa00c6704
--- /dev/null
+++ b/react/ui-components/src/molecules/MetricCard.js
@@ -0,0 +1,93 @@
+import React, { Fragment } from "react";
+import PropTypes from "prop-types";
+import { Card, Divider, CustomSVG } from "../atoms";
+import { Spacers } from "../constants/spacers/spacers";
+import { useTranslation } from "react-i18next";
+
+const MetricCard = ({ className, styles, layout, withDivider, metrics, withBottomDivider }) => {
+  const { t } = useTranslation();
+
+  // Parse the layout prop to determine rows and columns
+  const [rows, columns] = layout ? layout.split("*").map(Number) : [1, metrics.length];
+
+  // Create grid template strings dynamically
+  const gridTemplateColumns = `repeat(${columns}, 1fr)`;
+
+  // Inline styles for the grid layout
+  const gridStyles = {
+    display: "grid",
+    gridTemplateColumns,
+    gridRowGap: withBottomDivider ? Spacers.spacer4 : "0", 
+    ...styles,
+  };
+
+  return (
+    <Card className={`digit-metric-card ${className}`} style={gridStyles}>
+      {metrics?.map((metric, index) => {
+        const isEndOfRow = (index + 1) % columns === 0;
+        const isInLastRow = index >= (Math.ceil(metrics.length / columns) - 1) * columns;
+
+        return (
+          <Fragment key={index}>
+            <div className="metric-item">
+              {metric?.value && <div className="metric-value">{metric.value}</div>}
+              {metric?.description && <div className="metric-description">{t(metric.description)}</div>}
+
+              {metric?.statusmessage && (
+                <div className={`metric-status ${metric.status}`}>
+                  {metric.status === "Increased" ? (
+                    <CustomSVG.SortUp fill={"#00703c"} />
+                  ) : metric.status === "Decreased" ? (
+                    <CustomSVG.SortDown fill={"#b91900"} />
+                  ) : null}
+                  {t(metric.statusmessage)}
+                </div>
+              )}
+            </div>
+            {!isEndOfRow && withDivider && (
+              <div
+                className="vertical-metric-divider"
+                style={{
+                  left: `calc(100% / ${columns} * ${(index % columns) + 1})`,
+                }}
+              />
+            )}
+            {isEndOfRow && !isInLastRow && withBottomDivider && (
+              <div style={{ gridColumn: `1 / span ${columns}` }}>
+                <Divider variant="small" className="metric-divider" />
+              </div>
+            )}
+          </Fragment>
+        );
+      })}
+    </Card>
+  );
+};
+
+MetricCard.propTypes = {
+  metrics: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      status: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  withDivider: PropTypes.bool,
+  withBottomDivider: PropTypes.bool,
+  className: PropTypes.string,
+  styles: PropTypes.object,
+  layout: PropTypes.string,
+  statusmessage: PropTypes.string,
+};
+
+MetricCard.defaultProps = {
+  className: "",
+  styles: {},
+  metrics: [],
+  layout: "1*1",
+  withDivider: false,
+  withBottomDivider: false,
+};
+
+export default MetricCard;
+
diff --git a/react/ui-components/src/molecules/TableMolecule.js b/react/ui-components/src/molecules/TableMolecule.js
new file mode 100644
index 0000000000..e30c395d2a
--- /dev/null
+++ b/react/ui-components/src/molecules/TableMolecule.js
@@ -0,0 +1,768 @@
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  Fragment,
+} from "react";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+import TableMain from "../atoms/TableMain";
+import TableHeader from "../atoms/TableHeader";
+import TableFooter from "../atoms/TableFooter";
+import TableBody from "../atoms/TableBody";
+import TableCell from "../atoms/TableCell";
+import TableRow from "../atoms/TableRow";
+import CheckBox from "../atoms/CheckBox";
+import Card from "../atoms/Card";
+import { SVG } from "../atoms";
+import { CustomSVG } from "../atoms";
+import { StringManipulator } from "../atoms";
+import Button from "../atoms/Button";
+
+const TableMolecule = ({
+  headerData,
+  rows,
+  pagination = {
+    initialRowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 15, 20],
+  },
+  styles = {
+    withBorder: false,
+    withAlternateBg: false,
+    withHeaderDivider: true,
+    withColumnDivider: false,
+    withRowDivider: true,
+    extraStyles: {},
+  },
+  tableDetails = {
+    tableTitle: "",
+    tableDescription: "",
+  },
+  sorting = {
+    isTableSortable: true,
+    initialSortOrder: "ascending",
+  },
+  selection = {
+    addCheckbox: false,
+    checkboxLabel: "",
+    initialSelectedRows: [],
+    onSelectedRowsChange: () => {},
+    showSelectedState: false,
+  },
+  footerProps = {
+    scrollableStickyFooterContent: true,
+    footerContent: null,
+    hideFooter: false,
+    stickyFooterContent: null,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  className,
+  onFilter,
+  addFilter,
+  onRowClick,
+  frozenColumns = 0,
+  isStickyHeader = false,
+  actionButtonLabel,
+  actions,
+}) => {
+  const { t } = useTranslation();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(
+    pagination?.initialRowsPerPage
+  );
+  const [selectedRows, setSelectedRows] = useState(
+    selection?.initialSelectedRows
+  );
+  const frozenColumnsRefsForHeaders = useRef([]);
+  const frozenColumnsRefsForRows = useRef({});
+  const [selectedRowsDetails, setSelectedRowsDetails] = useState([]);
+  const [sortOrder, setSortOrder] = useState(
+    sorting?.initialSortOrder || "ascending"
+  );
+  const [sortedColumnIndex, setSortedColumnIndex] = useState(null);
+  const [sortedRows, setSortedRows] = useState([]);
+
+  // Pagination Logic
+  const indexOfLastRow = currentPage * rowsPerPage;
+  const indexOfFirstRow = indexOfLastRow - rowsPerPage;
+
+  // Handling Select All Rows
+  const allRowsSelected = selectedRows?.length === rows?.length;
+
+  const onSelectAllRows = () => {
+    if (allRowsSelected) {
+      setSelectedRows([]);
+    } else {
+      setSelectedRows(rows.map((_, index) => index));
+    }
+  };
+
+  // Handling Select Individual Row
+  const onSelectRow = (rowIndex) => {
+    setSelectedRows((prevSelected) =>
+      prevSelected?.includes(rowIndex)
+        ? prevSelected?.filter((i) => i !== rowIndex)
+        : [...prevSelected, rowIndex]
+    );
+  };
+
+  //Handling PageChange
+  const handlePageChange = (newPage) => {
+    if (newPage > 0 && newPage <= totalPages) {
+      setCurrentPage(newPage);
+    }
+  };
+
+  // Handling change in rows per page
+  const handleRowsPerPageChange = (event) => {
+    setRowsPerPage(Number(event?.target?.value));
+    setCurrentPage(1);
+    // Reset to first page when changing rows per page
+  };
+
+  useEffect(() => {
+    setSortedRows([...rows]);
+  }, [rows]);
+
+  useEffect(() => {
+    if (!sortOrder) return;
+    const sortRows = (columnIndex) => {
+      const newSortedRows = [...rows];
+      newSortedRows.sort((a, b) => {
+        const columnA = a[columnIndex];
+        const columnB = b[columnIndex];
+
+        // Sorting based on data type
+        if (typeof columnA === "number" && typeof columnB === "number") {
+          return sortOrder === "ascending"
+            ? columnA - columnB
+            : columnB - columnA;
+        } else if (typeof columnA === "object" && typeof columnB === "object") {
+          return sortOrder === "ascending"
+            ? columnA?.label?.localeCompare(columnB?.label)
+            : columnB?.label?.localeCompare(columnA?.label);
+        } else if (typeof columnA === "string" && typeof columnB === "string") {
+          return sortOrder === "ascending"
+            ? columnA.localeCompare(columnB)
+            : columnB.localeCompare(columnA);
+        }
+        return 0; // Default case if types don't match
+      });
+      setSortedRows(newSortedRows);
+    };
+
+    if (sortedColumnIndex !== null) {
+      sortRows(sortedColumnIndex);
+    } else {
+      const firstSortableColumnIndex = headerData?.findIndex((header) =>
+        ["serialno", "numeric", "description", "text"].includes(header.type)
+      );
+      if (firstSortableColumnIndex !== -1) {
+        sortRows(firstSortableColumnIndex);
+      }
+    }
+  }, [sortedColumnIndex, sortOrder, rows, headerData]);
+
+  const currentRows = sorting?.isTableSortable
+    ? sortedRows?.slice(indexOfFirstRow, indexOfLastRow)
+    : rows?.slice(indexOfFirstRow, indexOfLastRow);
+
+  const totalPages = Math.ceil(rows?.length / rowsPerPage);
+
+  const handleSort = (index) => {
+    if (sortedColumnIndex === index) {
+      setSortOrder(sortOrder === "ascending" ? "descending" : "ascending");
+    } else {
+      setSortedColumnIndex(index);
+      setSortOrder(sortOrder === "ascending" ? "descending" : "ascending");
+    }
+    setCurrentPage(1);
+  };
+
+  useLayoutEffect(() => {
+    let leftOffset = 0;
+    frozenColumnsRefsForHeaders.current.forEach((cell, index) => {
+      if (cell) {
+        requestAnimationFrame(() => {
+          cell.style.left = `${leftOffset}px`;
+          leftOffset += cell.offsetWidth;
+        });
+      }
+    });
+
+    Object.entries(frozenColumnsRefsForRows.current).forEach(
+      ([rowIndex, cells]) => {
+        let leftOffsetForBody = 0;
+        cells.forEach((cell, index) => {
+          if (cell) {
+            requestAnimationFrame(() => {
+              cell.style.left = `${leftOffsetForBody}px`;
+              leftOffsetForBody += cell.offsetWidth;
+            });
+          }
+        });
+      }
+    );
+  }, [headerData, frozenColumns, rowsPerPage, currentPage, rows]);
+
+  // Calling the callback whenever selectedRows changes
+  useEffect(() => {
+    const newselectedRowsDetails = selectedRows?.map((index) => rows[index]);
+    setSelectedRowsDetails(newselectedRowsDetails);
+  }, [selectedRows, rows]);
+
+  // Separating the fixed and scrollable headers
+  const fixedHeader = headerData?.slice(0, frozenColumns);
+  const scrollableHeader = headerData?.slice(frozenColumns);
+
+  const hasDescription = headerData?.some((header) => header.description);
+
+  const renderTable = () => {
+    return (
+      <div className={"digit-table-footer-wrapper"}>
+        <div
+          className={`digit-table-container ${
+            styles?.withBorder ? "withBorder" : ""
+          }`}
+        >
+          <TableMain
+            className={className}
+            style={styles?.extraStyles?.tableStyles}
+          >
+            {/* Dynamic Table Header */}
+            <TableHeader
+              className={`${isStickyHeader ? "sticky-header" : ""} ${
+                hasDescription ? "hasDes" : ""
+              }`}
+              style={styles?.extraStyles?.headerStyles}
+            >
+              <TableRow>
+                {selection?.addCheckbox && (
+                  <TableCell
+                    isHeader={true}
+                    className={`fixed-columns ${
+                      styles?.withBorder ? "withBorder" : ""
+                    } ${
+                      styles?.withColumnDivider && !styles?.withHeaderDivider
+                        ? "withColumnDivider"
+                        : ""
+                    } ${styles?.withHeaderDivider ? "withHeaderDivider" : ""}`}
+                    style={styles?.extraStyles?.headerStyles}
+                  >
+                    <CheckBox
+                      checked={allRowsSelected}
+                      onChange={onSelectAllRows}
+                      label={selection?.checkboxLabel}
+                      hideLabel={
+                        selection?.checkboxLabel &&
+                        selection?.checkboxLabel !== ""
+                          ? false
+                          : true
+                      }
+                      isIntermediate={selectedRows && selectedRows?.length>0 && selectedRows.length !== rows?.length}
+                      mainClassName={"table-checkbox"}
+                    />
+                  </TableCell>
+                )}
+                {fixedHeader?.map((header, index) => (
+                  <TableCell
+                    key={index}
+                    isHeader={true}
+                    className={`fixed-columns ${
+                      styles?.withBorder ? "withBorder" : ""
+                    } ${
+                      styles?.withColumnDivider && !styles?.withHeaderDivider
+                        ? "withColumnDivider"
+                        : ""
+                    } ${styles?.withHeaderDivider ? "withHeaderDivider" : ""}`}
+                    cellref={(el) => {
+                      frozenColumnsRefsForHeaders.current[index] = el;
+                    }}
+                    style={styles?.extraStyles?.headerStyles}
+                  >
+                    <div className="header-des-wrap">
+                      <div className="column-header">
+                        {StringManipulator(
+                          "TOSENTENCECASE",
+                          StringManipulator(
+                            "TRUNCATESTRING",
+                            t(header?.label),
+                            {
+                              maxLength: header?.maxLength || 64,
+                            }
+                          )
+                        )}
+                        {(header.type === "serialno" ||
+                          header.type === "numeric" ||
+                          header.type === "description" ||
+                          header.type === "text") &&
+                          sorting?.isTableSortable && (
+                            <span
+                              className="sort-icon"
+                              onClick={() => handleSort(index)}
+                            >
+                              {sortedColumnIndex === index ? (
+                                sortOrder === "ascending" ? (
+                                  <CustomSVG.SortDown
+                                    fill={"#363636"}
+                                    width={"16px"}
+                                    height={"16px"}
+                                  />
+                                ) : (
+                                  <CustomSVG.SortUp
+                                    fill={"#363636"}
+                                    width={"16px"}
+                                    height={"16px"}
+                                  />
+                                )
+                              ) : sortOrder === "ascending" ? (
+                                <CustomSVG.SortDown
+                                  fill={"#363636"}
+                                  width={"16px"}
+                                  height={"16px"}
+                                />
+                              ) : (
+                                <CustomSVG.SortUp
+                                  fill={"#363636"}
+                                  width={"16px"}
+                                  height={"16px"}
+                                />
+                              )}
+                            </span>
+                          )}
+                      </div>
+                      {header.description && (
+                        <div className="column-description">
+                          {StringManipulator(
+                            "TOSENTENCECASE",
+                            StringManipulator(
+                              "TRUNCATESTRING",
+                              t(header?.description),
+                              {
+                                maxLength: header?.maxLength || 64,
+                              }
+                            )
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </TableCell>
+                ))}
+                {scrollableHeader?.map((header, index) => (
+                  <TableCell
+                    key={index}
+                    isHeader={true}
+                    className={`scrollable-columns ${
+                      styles?.withBorder ? "withBorder" : ""
+                    } ${
+                      styles?.withColumnDivider && !styles?.withHeaderDivider
+                        ? "withColumnDivider"
+                        : ""
+                    } ${styles?.withHeaderDivider ? "withHeaderDivider" : ""}`}
+                    style={styles?.extraStyles?.headerStyles}
+                  >
+                    <div className="header-des-wrap">
+                      <div className="column-header">
+                        {StringManipulator(
+                          "TOSENTENCECASE",
+                          StringManipulator(
+                            "TRUNCATESTRING",
+                            t(header?.label),
+                            {
+                              maxLength: header?.maxLength || 64,
+                            }
+                          )
+                        )}
+                        {(header.type === "serialno" ||
+                          header.type === "numeric" ||
+                          header.type === "description" ||
+                          header.type === "text") &&
+                          sorting?.isTableSortable && (
+                            <span
+                              className="sort-icon"
+                              onClick={() => handleSort(index)}
+                            >
+                              {sortedColumnIndex === index ? (
+                                sortOrder === "ascending" ? (
+                                  <CustomSVG.SortDown
+                                    fill={"#363636"}
+                                    width={"16px"}
+                                    height={"16px"}
+                                  />
+                                ) : (
+                                  <CustomSVG.SortUp
+                                    fill={"#363636"}
+                                    width={"16px"}
+                                    height={"16px"}
+                                  />
+                                )
+                              ) : sortOrder === "ascending" ? (
+                                <CustomSVG.SortDown
+                                  fill={"#363636"}
+                                  width={"16px"}
+                                  height={"16px"}
+                                />
+                              ) : (
+                                <CustomSVG.SortUp
+                                  fill={"#363636"}
+                                  width={"16px"}
+                                  height={"16px"}
+                                />
+                              )}
+                            </span>
+                          )}
+                      </div>
+                      {header.description && (
+                        <div className="column-description">
+                          {StringManipulator(
+                            "TOSENTENCECASE",
+                            StringManipulator(
+                              "TRUNCATESTRING",
+                              t(header?.description),
+                              {
+                                maxLength: header?.maxLength || 64,
+                              }
+                            )
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHeader>
+
+            {/* Dynamic Table Body with Pagination */}
+            <TableBody style={styles?.extraStyles?.bodyStyles}>
+              {currentRows?.map((row, rowIndex) => (
+                <TableRow
+                  key={rowIndex}
+                  className={`${
+                    styles?.withAlternateBg ? "withAlternateBg" : ""
+                  } ${onRowClick ? "addHover" : ""} ${
+                    selectedRows?.includes(rowIndex) ? "selected" : ""
+                  }`}
+                  onClick={
+                    onRowClick ? () => onRowClick(row, rowIndex) : undefined
+                  }
+                >
+                  {selection?.addCheckbox && (
+                    <TableCell
+                      isHeader={false}
+                      className={`fixed-columns ${
+                        styles?.withRowDivider ? "withRowDivider" : ""
+                      } ${
+                        styles?.withColumnDivider ? "withColumnDivider" : ""
+                      }`}
+                      columnType={"custom"}
+                      cellData={
+                        <CheckBox
+                          checked={selectedRows.includes(
+                            rowIndex + indexOfFirstRow
+                          )}
+                          onChange={() =>
+                            onSelectRow(rowIndex + indexOfFirstRow)
+                          }
+                          hideLabel={true}
+                          mainClassName={"table-checkbox"}
+                        />
+                      }
+                      style={styles?.extraStyles?.bodyStyles}
+                    ></TableCell>
+                  )}
+                  {row?.slice(0, frozenColumns)?.map((cell, cellIndex) => (
+                    <TableCell
+                      key={cellIndex}
+                      isHeader={false}
+                      isFooter={false}
+                      className={`fixed-columns  ${
+                        styles?.withRowDivider ? "withRowDivider" : ""
+                      } ${
+                        styles?.withColumnDivider ? "withColumnDivider" : ""
+                      }`}
+                      cellData={cell}
+                      columnType={
+                        headerData && headerData.length > 0
+                          ? headerData[cellIndex]?.type
+                          : "custom"
+                      }
+                      accessor={
+                        headerData && headerData.length > 0
+                          ? headerData[cellIndex]?.accessor
+                          : null
+                      }
+                      cellref={(el) => {
+                        if (!frozenColumnsRefsForRows.current[rowIndex]) {
+                          frozenColumnsRefsForRows.current[rowIndex] = [];
+                        }
+                        frozenColumnsRefsForRows.current[rowIndex][
+                          cellIndex
+                        ] = el;
+                      }}
+                      style={styles?.extraStyles?.bodyStyles}
+                    ></TableCell>
+                  ))}
+                  {row?.slice(frozenColumns)?.map((cell, cellIndex) => (
+                    <TableCell
+                      key={cellIndex + frozenColumns}
+                      isHeader={false}
+                      isFooter={false}
+                      className={`scrollable-columns  ${
+                        styles?.withRowDivider ? "withRowDivider" : ""
+                      } ${
+                        styles?.withColumnDivider ? "withColumnDivider" : ""
+                      }`}
+                      cellData={cell}
+                      columnType={headerData[cellIndex + frozenColumns]?.type}
+                      accessor={
+                        headerData && headerData.length > 0
+                          ? headerData[cellIndex + frozenColumns]?.accessor
+                          : null
+                      }
+                    ></TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+            {/* Dynamic Table Footer with Pagination */}
+          </TableMain>
+        </div>
+        {!footerProps?.hideFooter && (
+          <TableFooter
+            className={`digit-table-footer ${
+              footerProps?.isStickyFooter ||
+              (footerProps?.addStickyFooter && footerProps?.stickyFooterContent)
+                ? "sticky-footer"
+                : ""
+            } `}
+          >
+            {footerProps?.addStickyFooter && footerProps?.stickyFooterContent && (
+              <TableRow
+                className={`sticky-footer-content ${
+                  footerProps?.scrollableStickyFooterContent ? "scrollable" : ""
+                }`}
+              >
+                <TableCell
+                  isHeader={false}
+                  isFooter={true}
+                  className={`sticker-footer-td ${
+                    styles?.withBorder ? "withBorder" : ""
+                  }`}
+                  style={styles?.extraStyles?.footerStyles}
+                >
+                  {footerProps?.stickyFooterContent}
+                </TableCell>
+              </TableRow>
+            )}
+            <TableRow className={"footer-pagination-content"}>
+              <TableCell
+                isHeader={false}
+                isFooter={true}
+                className={`${styles?.withBorder ? "withBorder" : ""}`}
+                style={styles?.extraStyles?.footerStyles}
+              >
+                <div className="footer-content">
+                  {footerProps?.footerContent}
+                  <div className={"footer-pagination-container"}>
+                    <div className="rows-per-page">
+                      <label htmlFor="rowsPerPage">
+                        {t("CS_COMMON_ROWS_PER_PAGE")}
+                        {":"}{" "}
+                      </label>
+                      <select
+                        className="pagination-dropdown"
+                        id="rowsPerPage"
+                        value={rowsPerPage}
+                        onChange={handleRowsPerPageChange}
+                      >
+                        {pagination?.rowsPerPageOptions.map((option) => (
+                          <option key={option} value={option}>
+                            {option}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div>
+                      <span>
+                        {indexOfFirstRow + 1}-
+                        {Math.min(indexOfLastRow, rows?.length)} of{" "}
+                        {rows?.length}
+                      </span>
+                    </div>
+                    <div className="pagination">
+                      <button
+                        onClick={() => handlePageChange(currentPage - 1)}
+                        disabled={currentPage === 1}
+                      >
+                        <SVG.ChevronLeft
+                          fill={currentPage === 1 ? "#C5C5C5" : "#363636"}
+                        ></SVG.ChevronLeft>
+                      </button>
+                      <button
+                        onClick={() => handlePageChange(currentPage + 1)}
+                        disabled={currentPage === totalPages}
+                      >
+                        <SVG.ChevronRight
+                          fill={
+                            currentPage === totalPages ? "#C5C5C5" : "#363636"
+                          }
+                        ></SVG.ChevronRight>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </TableCell>
+            </TableRow>
+          </TableFooter>
+        )}
+      </div>
+    );
+  };
+
+  // Table Card
+  return tableDetails?.tableTitle ||
+    tableDetails?.tableDescription ||
+    selection?.showSelectedState ||
+    addFilter ? (
+    <Card className={"digit-table-card"}>
+      {(tableDetails?.tableDescription ||
+        tableDetails?.tableTitle ||
+        addFilter) && (
+        <div className="table-header-wrapper">
+          <div className="header-filter-wrapper">
+            {tableDetails?.tableTitle && (
+              <div className="table-header">{tableDetails?.tableTitle}</div>
+            )}
+            {addFilter && (
+              <CustomSVG.FilterSvg
+                fill={"#363636"}
+                width={"2rem"}
+                height={"2rem"}
+                className={"table-filter-svg"}
+                onClick={onFilter}
+              />
+            )}
+          </div>
+          {tableDetails?.tableDescription && (
+            <div className="table-description">
+              {tableDetails?.tableDescription}
+            </div>
+          )}
+        </div>
+      )}
+      {selection?.showSelectedState && selectedRows.length > 0 && (
+        <div className="selection-state-wrapper">
+          <div className="svg-state-wrapper">
+            <SVG.DoneAll
+              width={"1.5rem"}
+              height={"1.5rem"}
+              fill={"#C84C0E"}
+            ></SVG.DoneAll>
+            <div className={"selected-state"}>{`${selectedRows.length} ${t(
+              "ROWS_SELECTED"
+            )}`}</div>
+          </div>
+          {actions && actions.length > 0 ? (
+            actions
+          ) : (
+            <Button
+              variation="secondary"
+              label={actionButtonLabel || t("TakeAction")}
+              type="button"
+              onClick={() =>
+                selection?.onSelectedRowsChange(selectedRowsDetails)
+              }
+              size={"large"}
+            />
+          )}
+        </div>
+      )}
+      {renderTable()}
+    </Card>
+  ) : (
+    renderTable()
+  );
+};
+
+TableMolecule.propTypes = {
+  headerData: PropTypes.array.isRequired,
+  rows: PropTypes.array.isRequired,
+  pagination: PropTypes.shape({
+    initialRowsPerPage: PropTypes.number,
+    rowsPerPageOptions: PropTypes.arrayOf(PropTypes.number),
+  }),
+  styles: PropTypes.shape({
+    withBorder: PropTypes.bool,
+    withAlternateBg: PropTypes.bool,
+    withHeaderDivider: PropTypes.bool,
+    withColumnDivider: PropTypes.bool,
+    withRowDivider: PropTypes.bool,
+    extraStyles: PropTypes.object,
+  }),
+  tableDetails: PropTypes.shape({
+    tableTitle: PropTypes.string,
+    tableDescription: PropTypes.string,
+  }),
+  sorting: PropTypes.shape({
+    isTableSortable: PropTypes.bool,
+    initialSortOrder: PropTypes.string,
+  }),
+  selection: PropTypes.shape({
+    addCheckbox: PropTypes.bool,
+    checkboxLabel: PropTypes.string,
+    initialSelectedRows: PropTypes.array,
+    onSelectedRowsChange: PropTypes.func,
+    showSelectedState: PropTypes.bool,
+  }),
+  footerProps: PropTypes.shape({
+    stickyFooterContent: PropTypes.node,
+    footerContent: PropTypes.node,
+    hideFooter: PropTypes.bool,
+    scrollableStickyFooterContent: PropTypes.bool,
+    isStickyFooter: PropTypes.bool,
+    addStickyFooter: PropTypes.bool,
+  }),
+};
+
+TableMolecule.defaultProps = {
+  pagination: {
+    initialRowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 15, 20],
+  },
+  styles: {
+    withBorder: false,
+    withAlternateBg: false,
+    withHeaderDivider: true,
+    withColumnDivider: false,
+    withRowDivider: true,
+    extraStyles: {},
+  },
+  tableDetails: {
+    tableTitle: "",
+    tableDescription: "",
+  },
+  sorting: {
+    isTableSortable: true,
+    initialSortOrder: "ascending",
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: "",
+    initialSelectedRows: [],
+    onSelectedRowsChange: () => {},
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: null,
+    hideFooter: false,
+    stickyFooterContent: null,
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  actions:[]
+};
+
+export default TableMolecule;
diff --git a/react/ui-components/src/molecules/index.js b/react/ui-components/src/molecules/index.js
index f36084a567..855c150801 100644
--- a/react/ui-components/src/molecules/index.js
+++ b/react/ui-components/src/molecules/index.js
@@ -21,6 +21,9 @@ import LandingPageCard from "./LandingPageCard";
 import LandingPageWrapper from "./LandingPageWrapper";
 import MenuCard from "./MenuCard";
 import MenuCardWrapper from "./MenuCardWrapper";
+import TableMolecule from "./TableMolecule";
+import MetricCard from "./MetricCard";
+import FormCard from "./FormCard";
 
 export {
   ApiDropdown,
@@ -45,5 +48,8 @@ export {
   LandingPageCard,
   MenuCard,
   LandingPageWrapper,
-  MenuCardWrapper
+  MenuCardWrapper,
+  TableMolecule,
+  MetricCard,
+  FormCard
 };
diff --git a/react/ui-components/src/molecules/stories/FormCard.stories.js b/react/ui-components/src/molecules/stories/FormCard.stories.js
index e1ed301932..ff23ded653 100644
--- a/react/ui-components/src/molecules/stories/FormCard.stories.js
+++ b/react/ui-components/src/molecules/stories/FormCard.stories.js
@@ -11,10 +11,11 @@ import {
   RadioButtons,
   TextBlock,
 } from "../../atoms";
+import FormCard from "../FormCard";
 
 export default {
-  title: "Molecules/Card/FormCard",
-  component: Card,
+  title: "Molecules/FormCard",
+  component: FormCard,
   argTypes: {
     className: {
       control: "text",
@@ -26,34 +27,18 @@ export default {
       control: "object",
     },
     type: { control: "select", options: ["primary", "secondary"] },
-    variant: {
-      control: "select",
-      options: [
-        "empty",
-        "form",
-        "viewcard",
-        "filter1",
-        "filter2",
-        "menu",
-        "kpi",
-        "action",
-        "search",
-      ],
-    },
-    onClick: {
-      control: "function",
-    },
+    layout:{control:"text"},
     props: {
       control: "object",
     },
   },
 };
 
-const Template = (args) => <Card {...args} />;
+const Template = (args) => <FormCard {...args} />;
 
 const tags = ["Dolo 650", "SPAQ  1", "SPAQ 2", "Elbendazol"];
 
-export const ExampleFormCard = () => {
+export const SimpleLayout = () => {
   const [selectedGender, setSelectedGender] = useState(null);
   const [selectedGuardian, setSelectedGuardian] = useState(null);
   const [isSameAsPropertyAddress, setIsSameAsPropertyAddress] = useState(false);
@@ -110,9 +95,48 @@ export const ExampleFormCard = () => {
     width: isMobileView ? "100%" : "30%",
   };
 
+  const headerData = [
+    <TextBlock header={"Enter Details"}></TextBlock>
+  ]
+
+  const FooterChild1 = [
+    <Button
+      type={"submit"}
+      size={"large"}
+      variation={"primary"}
+      icon={""}
+      label="Submit"
+      onClick={() => console.log("Clicked submit")}
+    />,
+  ];
+
+  const FooterChild = [
+    <Button
+    type={"button"}
+    size={"large"}
+    variation={"secondary"}
+    icon={""}
+    label="Cancel"
+    onClick={() => console.log("Clicked cancel")}
+  />,
+    <Button
+      type={"submit"}
+      size={"large"}
+      variation={"primary"}
+      icon={""}
+      label="Submit"
+      onClick={() => console.log("Clicked submit")}
+    />,
+  ];
+
   return (
-    <Card type={"primary"} variant={"form"}>
-      <TextBlock header={"Enter Details"}></TextBlock>
+    <FormCard
+      type={"primary"}
+      variant={"form"}
+      headerData={headerData}
+      footerData={FooterChild1}
+      equalWidthButtons={true}
+    >
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Name"}></TextBlock>
         <TextInput type="text"></TextInput>
@@ -125,10 +149,10 @@ export const ExampleFormCard = () => {
           name="gender"
           selectedOption={selectedGender}
           onSelect={handleGenderSelect}
-          style={{ 
-            width: "100%", 
-            justifyContent: "unset", 
-            ...(isMobileView ? {} : { gap: "24px" }) 
+          style={{
+            width: "100%",
+            justifyContent: "unset",
+            ...(isMobileView ? {} : { gap: "24px" }),
           }}
         />
       </LabelFieldPair>
@@ -157,30 +181,18 @@ export const ExampleFormCard = () => {
         <TextBlock style={textBlockStyle} body={"Guardian"}></TextBlock>
         <TextInput type="text"></TextInput>
       </LabelFieldPair>
-      <RadioButtons
-        options={guardianOptions}
-        selectedOption={selectedGuardian}
-        onSelect={handleGuardianSelect}
-        optionsKey="name"
-        name="guardian"
-        style={{ 
-          justifyContent: "unset", 
-          ...(isMobileView ? {} : { gap: "24px" }) 
-        }}
-      />
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Special Category"}></TextBlock>
-        <div style={{width:"100%"}}>
-        <Dropdown
-          option={[
-            { code: "1", name: "Below Poverty Line" },
-            { code: "2", name: "Above Poverty Line" },
-          ]}
-          optionKey={"name"}
-          selected={{ code: "1", name: "Below Poverty Line" }}
-        ></Dropdown>
+        <div style={{ width: "100%" }}>
+          <Dropdown
+            option={[
+              { code: "1", name: "Below Poverty Line" },
+              { code: "2", name: "Above Poverty Line" },
+            ]}
+            optionKey={"name"}
+            selected={{ code: "1", name: "Below Poverty Line" }}
+          ></Dropdown>
         </div>
-
       </LabelFieldPair>
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Document ID"}></TextBlock>
@@ -188,25 +200,25 @@ export const ExampleFormCard = () => {
       </LabelFieldPair>
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Document Type"}></TextBlock>
-        <div style={{width:"100%"}}>
-        <Dropdown
-          option={[
-            { code: "1", name: "BPL Certificate" },
-            { code: "2", name: "CertificateTwo" },
-          ]}
-          optionKey={"name"}
-          selected={{ code: "1", name: "BPL Certificate" }}
-        ></Dropdown>
+        <div style={{ width: "100%" }}>
+          <Dropdown
+            option={[
+              { code: "1", name: "BPL Certificate" },
+              { code: "2", name: "CertificateTwo" },
+            ]}
+            optionKey={"name"}
+            selected={{ code: "1", name: "BPL Certificate" }}
+          ></Dropdown>
         </div>
-
       </LabelFieldPair>
-      <Uploader
+      {/* <Uploader
         style={{ marginBottom: "24px" }}
         variant={"uploadFile"}
         multiple={false}
         label={"Choose Document"}
         showLabel={true}
-      ></Uploader>
+        inline={true}
+      ></Uploader> */}
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Email ID"}></TextBlock>
         <TextInput type="text"></TextInput>
@@ -223,137 +235,198 @@ export const ExampleFormCard = () => {
         checked={isSameAsPropertyAddress}
         onChange={handleCheckboxChange}
       ></CheckBox>
-    </Card>
+    </FormCard>
   );
 };
 
-export const SecondaryCardInsidePrimary = () => (
-  <Card type={"primary"} variant={"form"}>
-    <div
-      style={{
-        maxWidth: "100%",
-        width: "100%",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
+
+export const WithLayout = () => {
+  const [selectedGender, setSelectedGender] = useState(null);
+  const [selectedGuardian, setSelectedGuardian] = useState(null);
+  const [isSameAsPropertyAddress, setIsSameAsPropertyAddress] = useState(false);
+
+  const [isMobileView, setIsMobileView] = React.useState(
+    window.innerWidth / window.innerHeight <= 9 / 16
+  );
+  const onResize = () => {
+    if (window.innerWidth / window.innerHeight <= 9 / 16) {
+      if (!isMobileView) {
+        setIsMobileView(true);
+      }
+    } else {
+      if (isMobileView) {
+        setIsMobileView(false);
+      }
+    }
+  };
+  React.useEffect(() => {
+    window.addEventListener("resize", () => {
+      onResize();
+    });
+    return () => {
+      window.addEventListener("resize", () => {
+        onResize();
+      });
+    };
+  });
+
+  const genderOptions = [
+    { code: "M", name: "Male" },
+    { code: "F", name: "Female" },
+    { code: "O", name: "Others" },
+  ];
+
+  const guardianOptions = [
+    { code: "H", name: "Husband" },
+    { code: "F", name: "Father" },
+  ];
+
+  const handleGenderSelect = (option) => {
+    setSelectedGender(option.code);
+  };
+
+  const handleGuardianSelect = (option) => {
+    setSelectedGuardian(option.code);
+  };
+
+  const handleCheckboxChange = (event) => {
+    setIsSameAsPropertyAddress(event.target.checked);
+  };
+
+  const textBlockStyle = {
+    width: isMobileView ? "100%" : "30%",
+  };
+
+  const headerData = [
+    <TextBlock header={"Enter Details"}></TextBlock>
+  ]
+  const FooterChild = [
+    <Button
+    type={"button"}
+    size={"large"}
+    variation={"secondary"}
+    icon={""}
+    label="Cancel"
+    onClick={() => console.log("Clicked cancel")}
+  />,
+    <Button
+      type={"submit"}
+      size={"large"}
+      variation={"primary"}
+      icon={""}
+      label="Submit"
+      onClick={() => console.log("Clicked submit")}
+    />,
+  ];
+
+  return (
+    <FormCard
+      type={"primary"}
+      variant={"form"}
+      layout={"2*2"}
+      headerData={headerData}
+      footerData={FooterChild}
+      equalWidthButtons={true}
+      withDivider={true}
     >
-      <TextBlock header={"Delivery Condition 1"}></TextBlock>
-      <Button
-        label={"Delete Condition"}
-        variation={"teritiary"}
-        icon="Delete"
-      ></Button>
-    </div>
-    <Card type="secondary">
-      <div
-        style={{
-          maxWidth: "100%",
-          width: "100%",
-          display: "flex",
-          flexDirection: "row",
-          gap: "8px",
-          overflow: "hidden",
-        }}
-      >
-        <div
-          style={{
-            flexGrow: 1,
-          }}
-        >
-          <TextBlock body={"Attribute"}></TextBlock>
-          <TextInput type="text"></TextInput>
-        </div>
-        <div
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Name"}></TextBlock>
+        <TextInput type="text"></TextInput>
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Gender"}></TextBlock>
+        <RadioButtons
+          options={genderOptions}
+          optionsKey="name"
+          name="gender"
+          selectedOption={selectedGender}
+          onSelect={handleGenderSelect}
           style={{
-            flexGrow: 1,
+            width: "100%",
+            justifyContent: "unset",
+            ...(isMobileView ? {} : { gap: "24px" }),
           }}
-        >
-          <TextBlock body={"Operator"}></TextBlock>
-          <TextInput type="text"></TextInput>
-        </div>
-        <div
-          style={{
-            flexGrow: 1,
+        />
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Mobile Number"}></TextBlock>
+        <TextInput
+          type="text"
+          populators={{
+            prefix: "+91",
           }}
-        >
-          <TextBlock body={"Value"}></TextBlock>
-          <TextInput type="text"></TextInput>
-        </div>
-        <Button
-          label={"Delete Row"}
-          variation={"teritiary"}
-          icon="Delete"
-          style={{ flexShrink: 0 }}
-        ></Button>
-      </div>
-      <div
-        style={{
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <Button
-          label={"Add More Attributes"}
-          variation={"secondary"}
-          icon="AddNewFill"
-          style={{ width: "100%" }}
-        ></Button>
-      </div>
-    </Card>
-    <div style={{ display: "flex" }} className="digit-tag-container ">
-      {tags.map((tag, index) => (
-        <Chip
-          key={index}
-          text={tag}
-          onClick={() => {
-            console.log("tag clicked");
+        />
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock
+          style={textBlockStyle}
+          body={"Alternate Mobile number"}
+        ></TextBlock>
+        <TextInput
+          type="text"
+          populators={{
+            prefix: "+91",
           }}
         />
-      ))}
-    </div>
-    <Button
-      label={"Add Products To be Delivered"}
-      variation={"secondary"}
-      icon="AppRegistration"
-    ></Button>
-  </Card>
-);
-
-export const UploaderCard = () => (
-  <Card type={"primary"}>
-    <div
-      style={{
-        maxWidth: "100%",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <TextBlock header={"Upload Targets"}></TextBlock>
-      <Button
-        variation="secondary"
-        label={"Download Template"}
-        icon={"FileDownload"}
-      ></Button>
-    </div>
-    <div style={{ maxWidth: "100%", width: "100%" }}>
-      <TextBlock
-        body={
-          "Please populate the downloaded template with boundary data and upload the Excel sheet."
-        }
-      ></TextBlock>
-    </div>
-    <Uploader
-      variant={"uploadPopup"}
-      uploadedFiles={[]}
-      showDownloadButton={true}
-      showReUploadButton={true}
-      multiple={false}
-    ></Uploader>
-  </Card>
-);
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Guardian"}></TextBlock>
+        <TextInput type="text"></TextInput>
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Special Category"}></TextBlock>
+        <div style={{ width: "100%" }}>
+          <Dropdown
+            option={[
+              { code: "1", name: "Below Poverty Line" },
+              { code: "2", name: "Above Poverty Line" },
+            ]}
+            optionKey={"name"}
+            selected={{ code: "1", name: "Below Poverty Line" }}
+          ></Dropdown>
+        </div>
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Document ID"}></TextBlock>
+        <TextInput type="text"></TextInput>
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Document Type"}></TextBlock>
+        <div style={{ width: "100%" }}>
+          <Dropdown
+            option={[
+              { code: "1", name: "BPL Certificate" },
+              { code: "2", name: "CertificateTwo" },
+            ]}
+            optionKey={"name"}
+            selected={{ code: "1", name: "BPL Certificate" }}
+          ></Dropdown>
+        </div>
+      </LabelFieldPair>
+      {/* <Uploader
+        style={{ marginBottom: "24px" }}
+        variant={"uploadFile"}
+        multiple={false}
+        label={"Choose Document"}
+        showLabel={true}
+        inline={true}
+      ></Uploader> */}
+      <LabelFieldPair>
+        <TextBlock style={textBlockStyle} body={"Email ID"}></TextBlock>
+        <TextInput type="text"></TextInput>
+      </LabelFieldPair>
+      <LabelFieldPair>
+        <TextBlock
+          style={textBlockStyle}
+          body={"Correspondance Address"}
+        ></TextBlock>
+        <TextInput type="text"></TextInput>
+      </LabelFieldPair>
+      <CheckBox
+        label={"Same as Property Address"}
+        checked={isSameAsPropertyAddress}
+        onChange={handleCheckboxChange}
+      ></CheckBox>
+    </FormCard>
+  );
+};
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/stories/MetricCard.stories.js b/react/ui-components/src/molecules/stories/MetricCard.stories.js
new file mode 100644
index 0000000000..75f1cfef0a
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/MetricCard.stories.js
@@ -0,0 +1,111 @@
+import React from "react";
+import MetricCard from "../MetricCard";
+
+export default {
+  title: "Molecules/MetricCard",
+  component: MetricCard,
+  argTypes: {
+    metrics:{control:"array"},
+    layout:{control:"text"},
+    withDivider:{control:"boolean"},
+    className: { control: "text" },
+    styles: { control: "object" },
+    withBottomDivider:{control:"boolean"},
+  },
+};
+
+const Template = (args) => <MetricCard {...args} />;
+
+const commonArgs = {
+    metrics:[],
+    className:"",
+    styles:{},
+    withDivider:false,
+    withBottomDivider:false,
+}
+
+// Default story for MetricCard
+export const Default = Template.bind({});
+Default.args = {
+    ...commonArgs,
+    metrics:[
+        {"value":"3%","description":"Test Compilance","statusmessage":"10% than state average","status":"Decreased"},
+        {"value":"60%","description":"Quality Tests Passed","statusmessage":"80% than state average","status":"Increased"},
+        {"value":"90%","description":"description","statusmessage":"15% than state average","status":"Nochange"},
+        {"value":"26%","description":"description","statusmessage":"6% than state average","status":"Increased"},
+    ]
+};
+
+// Default story for MetricCard
+export const WithLayout = Template.bind({});
+WithLayout.args = {
+    ...commonArgs,
+    layout:"2*2",
+    metrics:[
+        {"value":"3%","description":"Test Compilance","statusmessage":"10% than state average","status":"Decreased"},
+        {"value":"60%","description":"Quality Tests Passed","statusmessage":"80% than state average","status":"Increased"},
+        {"value":"90%","description":"description","statusmessage":"15% than state average","status":"Nochange"},
+        {"value":"26%","description":"description","statusmessage":"6% than state average","status":"Increased"},
+    ]
+};
+
+// Default story for MetricCard
+export const WithDivider = Template.bind({});
+WithDivider.args = {
+    ...commonArgs,
+    layout:"2*2",
+    withDivider:true,
+    metrics:[
+        {"value":"3%","description":"Test Compilance","statusmessage":"10% than state average","status":"Decreased"},
+        {"value":"60%","description":"Quality Tests Passed","statusmessage":"80% than state average","status":"Increased"},
+        {"value":"90%","description":"description","statusmessage":"15% than state average","status":"Nochange"},
+        {"value":"26%","description":"description","statusmessage":"6% than state average","status":"Increased"},
+    ]
+};
+
+
+export const WithBottomDivider = Template.bind({});
+WithBottomDivider.args = {
+    ...commonArgs,
+    layout:"2*2",
+    withDivider:false,
+    withBottomDivider:true,
+    metrics:[
+        {"value":"3%","description":"Test Compilance","statusmessage":"10% than state average","status":"Decreased"},
+        {"value":"60%","description":"Quality Tests Passed","statusmessage":"80% than state average","status":"Increased"},
+        {"value":"90%","description":"description","statusmessage":"15% than state average","status":"Nochange"},
+        {"value":"26%","description":"description","statusmessage":"6% than state average","status":"Increased"},
+    ]
+};
+
+export const WithBothDividers = Template.bind({});
+WithBothDividers.args = {
+    ...commonArgs,
+    layout:"2*2",
+    withDivider:true,
+    withBottomDivider:true,
+    metrics:[
+        {"value":"3%","description":"Test Compilance","statusmessage":"10% than state average","status":"Decreased"},
+        {"value":"60%","description":"Quality Tests Passed","statusmessage":"80% than state average","status":"Increased"},
+        {"value":"90%","description":"description","statusmessage":"15% than state average","status":"Nochange"},
+        {"value":"26%","description":"description","statusmessage":"6% than state average","status":"Increased"},
+    ]
+};
+
+// MetricCard with custom styles
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  className: "",
+  layout:"2*2",
+  metrics:[
+      {"value":"3%","description":"Test Compilance","statusmessage":"10% than state average","status":"Decreased"},
+      {"value":"60%","description":"Quality Tests Passed","statusmessage":"80% than state average","status":"Increased"},
+      {"value":"90%","description":"description","statusmessage":"15% than state average","status":"Nochange"},
+      {"value":"26%","description":"description","statusmessage":"6% than state average","status":"Increased"},
+  ],
+  styles: {
+    backgroundColor: "#f9f9f9",
+    borderRadius: "12px",
+    border: "2px solid #333",
+  },
+};
diff --git a/react/ui-components/src/molecules/stories/TableMolecule.stories.js b/react/ui-components/src/molecules/stories/TableMolecule.stories.js
new file mode 100644
index 0000000000..21ac78f2cb
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/TableMolecule.stories.js
@@ -0,0 +1,2411 @@
+import React from "react";
+import TableMolecule from "../TableMolecule";
+import { Button } from "../../atoms";
+import { Chip } from "../../atoms";
+
+export default {
+  title: "Molecules/TableMolecule",
+  component: TableMolecule,
+  argTypes: {
+    headerData: { control: "array" },
+    rows: { control: "array" },
+    pagination: { control: "object" },
+    styles:{control:"object"},
+    tableDetails:{
+      control:"object"
+    },
+    sorting:{
+      control:"object"
+    },
+    selection:{
+      control:"object"
+    },
+    footerProps:{control:"object"},
+    frozenColumns: { control: "number" },
+    isStickyHeader: { control: "boolean" },
+    className:{control:"text"},
+    onFilter:{control:"onchange"},
+    addFilter:{control:"boolean"},
+    onRowClick: { control: "onchange" },
+    actionButtonLabel: { control: "text" },
+    actions: { control: "array" },
+  },
+};
+
+const Template = (args) => <TableMolecule {...args} />;
+
+const headerData = [
+  { label: "S.No", type: "serialno" },
+  { label: "Text", type: "text"},
+  { label: "Numeric", type: "numeric" },
+  { label: "Description", type: "description" },
+  { label: "Tag", type: "tag" },
+  { label: "Switch", type: "switch" },
+  { label: "Button", type: "button" },
+  { label: "Checkbox", type: "checkbox" },
+  { label: "TextInput", type: "textinput" },
+  { label: "Dropdown", type: "dropdown" },
+  { label: "Multiselectdropdown", type: "multiselectdropdown" },
+  { label: "Custom", type: "custom" },
+];
+
+const headerDataWithDescription = [
+  { label: "S.No", description: "Serialno column", type: "serialno" },
+  { label: "Text", description: "Text column", type: "text" },
+  { label: "Numeric", description: "Numeric column", type: "numeric" },
+  {
+    label: "Description",
+    description: "Description column",
+    type: "description",
+  },
+  { label: "Tag", description: "Tag column", type: "tag" },
+  { label: "Switch", description: "Switch column", type: "switch" },
+  { label: "Button", description: "Button column", type: "button" },
+  { label: "Checkbox", description: "Checkbox column", type: "checkbox" },
+  { label: "TextInput", description: "Textinput column", type: "textinput" },
+  { label: "Dropdown", description: "Dropdown column", type: "dropdown" },
+  {
+    label: "Multiselectdropdown",
+    description: "Multiselectdropdown column",
+    type: "multiselectdropdown",
+  },
+  { label: "Custom", description: "Custom component column", type: "custom" },
+];
+
+const options = [
+  { name: "English", code: "English1" },
+  { name: "Hindi", code: "Hindi2" },
+];
+
+const headerDataForCustomStyles = [
+  { label: "S.No", type: "serialno" },
+  { label: "Text", type: "text" },
+  { label: "Text", type: "text" },
+  { label: "Text", type: "text" },
+  { label: "Numeric", type: "numeric" },
+]
+const samplerows = [
+  [1, "Row1", "Description1", "Example1", 455666],
+  [2, "Row2", "Description2", "Example2", 4553232666],
+  [3, "Row3", "Description3", "Example3", 6666],
+  [4, "Row4", "Description4", "Example4", 32323],
+  [5, "Row5", "Description5", "Example5", 4556266],
+  [6, "Row6", "Description6", "Example6", 455333666],
+  [7, "Row7", "Description7", "Example7", 455666],
+  [8, "Row8", "Description8", "Example8", 343434],
+  [9, "Row9", "Description9", "Example9", 400],
+  [10, "Row10", "Description10", "Example10", 455666],
+];
+
+const headerDataWithAccessors = [
+  { label: "S.No", type: "serialno",accessor:"data?.sno"},
+  { label: "Text", type: "text",accessor:"data?.text"},
+  { label: "Numeric", type: "numeric",accessor:"data?.numeric"},
+  { label: "Description", type: "description",accessor:"data?.description"},
+];
+
+const rowsWithAccessor = [
+  [
+    {
+      data:{
+        sno:1
+      }
+    },
+    {
+      data:{
+        text:"Label"
+      },
+      label:
+        "BLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    {
+      data:{
+        numeric:20000
+      },
+    },
+    {
+      data:{
+        description:"description"
+      },
+      label:
+        "BLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+  ],
+  [
+    {
+      data:{
+        sno:2
+      }
+    },
+    {
+      data:{
+        text:"Label2"
+      },
+      label:
+        "BLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    {
+      data:{
+        numeric:20000
+      },
+    },
+    {
+      data:{
+        description:"description2"
+      },
+      label:
+        "BLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+  ],
+]
+const rows = [
+  [
+    1,
+    {
+      label:
+        "ALorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    10000,
+    {
+      label:
+        "ALorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag1",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "success",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch1",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button1",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox1",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link1"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    2,
+    {
+      label:
+        "BLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    20000,
+    {
+      label:
+        "BLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag2",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "monochrome",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch2",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button2",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox2",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link2"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    3,
+    {
+      label:
+        "CLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    30000,
+    {
+      label:
+        "CLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag3",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "error",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch3",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button3",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox3",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link3"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    4,
+    {
+      label:
+        "DLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    40000,
+    {
+      label:
+        "DLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag4",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "warning",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch4",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button4",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox4",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link4"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    5,
+    {
+      label:
+        "ELorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    50000,
+    {
+      label:
+        "ELorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag5",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "monochrome",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch5",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button5",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox5",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link5"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    6,
+    {
+      label:
+        "FLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    60000,
+    {
+      label:
+        "FLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag6",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "success",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch6",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button6",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link6"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    7,
+    {
+      label:
+        "GLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    70000,
+    {
+      label:
+        "GLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag7",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "success",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch7",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button7",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox7",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link7"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    8,
+    {
+      label:
+        "HLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    80000,
+    {
+      label:
+        "HLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag8",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "success",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch8",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button8",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox8",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link8"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    9,
+    {
+      label:
+        "ILorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    90000,
+    {
+      label:
+        "ILorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag9",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "error",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch9",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button9",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox9",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link9"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+  [
+    10,
+    {
+      label:
+        "JLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneanp",
+      maxLength: 64,
+    },
+    100000,
+    {
+      label:
+        "JLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quisppp",
+      maxLength: 256,
+    },
+    {
+      icon: "",
+      label: "Tag10",
+      labelStyle: {},
+      showIcon: false,
+      style: {},
+      type: "warning",
+      className: "",
+      stroke: true,
+      onClick: () => {},
+      alignment: "",
+      iconClassName: "",
+      iconColor: "",
+    },
+    {
+      isLabelFirst: false,
+      label: "Switch10",
+      labelStyle: {},
+      shapeOnOff: true,
+      style: {},
+      disable: false,
+      className: "",
+      isCheckedInitially: false,
+      onToggle: () => {},
+    },
+    {
+      variation: "primary",
+      type: "button",
+      isDisabled: false,
+      showBottom: true,
+      icon: "",
+      size: "medium",
+      label: "Button10",
+      onClick: () => {},
+      style: {},
+      isSuffix: false,
+      textStyles: {},
+      hideDefaultActionIcon: false,
+      options: [],
+      isSearchable: true,
+      optionsKey: "name",
+      onSelect: () => {},
+      menuStyles: {},
+    },
+    {
+      onChange: () => {},
+      label: "Checkbox10",
+      disabled: false,
+      checked: false,
+      style: {},
+      isLabelFirst: false,
+      hideLabel: false,
+      mainClassName: "table-checkbox",
+      props: {},
+    },
+    {
+      type: "text",
+    },
+    {
+      optionKey: "name",
+      option: options,
+      select: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    {
+      optionsKey: "name",
+      options: options,
+      onSelect: (option) => {
+        console.log(option, "selected");
+      },
+    },
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        justifyContent: "flex-start",
+      }}
+    >
+      <Button
+        label={"link10"}
+        variation={"link"}
+        size={"medium"}
+        style={{ padding: "0px", justifyContent: "flex-start" }}
+      />
+      <div className="typography body-s">{"Description"}</div>
+    </div>,
+  ],
+];
+
+const actions = [
+  <div
+    style={{
+      display: "flex",
+      gap: "8px",
+      alignItems: "center",
+      flexWrap: "wrap",
+    }}
+  >
+    <div className="digit-tag-container" style={{ margin: "0px" }}>
+      <Chip text={"Action1"} />
+      <Chip text={"Action2"} />
+    </div>
+    <Button
+      variation="primary"
+      label={"ButtonAction1"}
+      type="button"
+      onClick={() => console.log("clicked")}
+      size={"medium"}
+    />
+    <Button
+      variation="primary"
+      label={"ButtonAction2"}
+      type="button"
+      onClick={() => console.log("clicked")}
+      size={"medium"}
+    />
+  </div>,
+];
+
+const commonArgs = {
+  headerData: [],
+  rows: [],
+  styles:{
+    withBorder: false,
+    withAlternateBg: false,
+    withHeaderDivider: true,
+    withColumnDivider: false,
+    withRowDivider: true,
+    extraStyles: {},
+  },
+  pagination:{
+    initialRowsPerPage:5,
+    rowsPerPageOptions:[5,10,15,20]
+  },
+  tableDetails:{
+    tableTitle: "",
+    tableDescription: "",
+  },
+  sorting:{
+    isTableSortable:false,
+    initialSortOrder:""
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: () => {},
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: null,
+    hideFooter: false,
+    stickyFooterContent: null,
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+  onRowClick:()=>{},
+  actionButtonLabel: "",
+  actions:[],
+  className:"",
+  addFilter:false,
+  onFilter:()=>{},
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  ...commonArgs,
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick:undefined,
+};
+
+export const HeadersWithDescription = Template.bind({});
+HeadersWithDescription.args = {
+  ...commonArgs,
+  headerData: headerDataWithDescription,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick:undefined
+};
+
+export const WithBorder = Template.bind({});
+WithBorder.args = {
+  headerData: headerData,
+  rows: rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:false,
+    withRowDivider:false,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithHeaderDivider = Template.bind({});
+WithHeaderDivider.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:false,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick: (row, index) => {
+    console.log(row, index, "this row is clicked");
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithOnlyColumnDivider = Template.bind({});
+WithOnlyColumnDivider.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: true,
+    extraStyles: {},
+    withHeaderDivider:false,
+    withRowDivider:false,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithColumnDividerAndHeaderDivider = Template.bind({});
+WithColumnDividerAndHeaderDivider.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: true,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:false,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithRowDivider = Template.bind({});
+WithRowDivider.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:false,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithAlternateBg = Template.bind({});
+WithAlternateBg.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: true,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:false,
+    withRowDivider:false,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithAll = Template.bind({});
+WithAll.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    extraStyles: {},
+    withBorder:true,
+    withHeaderDivider: true,
+    withColumnDivider: true,
+    withRowDivider: true,
+    withAlternateBg:true
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithStickyHeader = Template.bind({});
+WithStickyHeader.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  onRowClick: (row, index) => {
+    console.log(row, index, "this row is clicked");
+  },
+  frozenColumns: 0,
+  isStickyHeader: true,
+};
+
+export const WithStickyFooter = Template.bind({});
+WithStickyFooter.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: true,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithStickyFooterAndHeader = Template.bind({});
+WithStickyFooterAndHeader.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: true,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: true,
+};
+
+export const WithFrozenColumns = Template.bind({});
+WithFrozenColumns.args = {
+  ...commonArgs,
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: true,
+    extraStyles: {},
+    withHeaderDivider:false,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick:undefined,
+  frozenColumns:2
+};
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  tableDetails:{
+    tableTitle: "Table Title",
+    tableDescription: "",
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithTableDescription = Template.bind({});
+WithTableDescription.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  tableDetails:{
+    tableTitle: "Table Title",
+    tableDescription: "Table Description",
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithAddCheckbox = Template.bind({});
+WithAddCheckbox.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: true,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithAddCheckboxAndSelectionState = Template.bind({});
+WithAddCheckboxAndSelectionState.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: true,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: true,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+  actionButtonLabel: "",
+};
+
+export const WithAddCheckboxAndSelectionStateAndInitialSelectedRows = Template.bind(
+  {}
+);
+WithAddCheckboxAndSelectionStateAndInitialSelectedRows.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: true,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [0,1],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: true,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+  actionButtonLabel: "",
+};
+
+export const WithAddCheckboxAndSelectionStateAndInitialSelectedRowsWithActions = Template.bind(
+  {}
+);
+WithAddCheckboxAndSelectionStateAndInitialSelectedRowsWithActions.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  tableDetails:{
+    tableTitle: "Table Title",
+    tableDescription: "Description",
+  },
+  selection: {
+    addCheckbox: true,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [0,1],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: true,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+  actionButtonLabel: "",
+};
+
+export const WithAddCheckboxAndSelectionStateAndCustomActions = Template.bind(
+  {}
+);
+WithAddCheckboxAndSelectionStateAndCustomActions.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  tableDetails:{
+    tableTitle: "Table Title",
+    tableDescription: "Description",
+  },
+  selection: {
+    addCheckbox: true,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: true,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+  actionButtonLabel: "",
+  actions:actions
+};
+
+export const WithoutFooter = Template.bind({});
+WithoutFooter.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: true,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithDefaultRowsPerPage = Template.bind({});
+WithDefaultRowsPerPage.args = {
+  headerData: headerData,
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  rows: rows,
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithCustomRowsPerPage = Template.bind({});
+WithCustomRowsPerPage.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: null,
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithCustomFooterContent = Template.bind({});
+WithCustomFooterContent.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: <div>{"Here you can add any content"}</div>,
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: true,
+    isStickyFooter: false,
+    addStickyFooter: false,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithStickyFooterContent = Template.bind({});
+WithStickyFooterContent.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: false,
+    isStickyFooter: true,
+    addStickyFooter: true,
+  },
+};
+
+
+export const WithScrollableStickyFooterContent = Template.bind({});
+WithScrollableStickyFooterContent.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: 
+    <tr> 
+    <td>GrandTotal</td>
+    <td >₹34,000.00</td>
+    <td>₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    <td >₹34,000.00</td>
+    </tr>,
+    scrollableStickyFooterContent: true,
+    isStickyFooter: true,
+    addStickyFooter: true,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithOnRowClick = Template.bind({});
+WithOnRowClick.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: false,
+    isStickyFooter: false,
+    addStickyFooter: true,
+  },
+  onRowClick: (row, index) => {
+    console.log(row, index, "this row is clicked");
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+export const WithFilter = Template.bind({});
+WithFilter.args = {
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  footerProps: {
+    footerContent: null,
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: false,
+    isStickyFooter: false,
+    addStickyFooter: true,
+  },
+  frozenColumns: 0,
+  isStickyHeader: false,
+  onFilter:(e)=>{console.log(e,"filter clicked")},
+  addFilter:true
+};
+
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+  headerData:headerDataForCustomStyles,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  styles:{
+    withAlternateBg: false,
+    withHeaderDivider:true,
+    withBorder:true,
+    withColumnDivider: false,
+    extraStyles:{
+      headerStyles:{
+        backgroundColor:"#0B4B66",
+        color:"#FFFFFF"
+      },
+      bodyStyles:{
+        backgroundColor:"#FFFFFF",
+        color:"#0B4B66"
+      },
+      footerStyles:{
+        color:"#363636"
+      }
+    },
+    withRowDivider:true,
+  },
+  onRowClick: (row, index) => {
+    console.log(row, index, "this row is clicked");
+  },
+  footerProps: {
+    footerContent: "Footer Content",
+    hideFooter: false,
+    stickyFooterContent: "Sticky Footer Content",
+    scrollableStickyFooterContent: false,
+    isStickyFooter: false,
+    addStickyFooter: true,
+  },
+  rows: samplerows,
+  frozenColumns: 0,
+  isStickyHeader: false,
+};
+
+
+export const WithAscendingAsInitialSortOrder = Template.bind({});
+WithAscendingAsInitialSortOrder.args = {
+  ...commonArgs,
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  sorting:{
+    initialSortOrder: "ascending",
+    isTableSortable:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick:undefined,
+};
+
+export const WithDescendingAsInitialSortOrder = Template.bind({});
+WithDescendingAsInitialSortOrder.args = {
+  ...commonArgs,
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  sorting:{
+    initialSortOrder: "descending",
+    isTableSortable:true,
+  },
+  onRowClick:undefined,
+};
+
+export const WithAccessor = Template.bind({});
+WithAccessor.args = {
+  ...commonArgs,
+  sorting: {
+    isTableSortable: false,
+  },
+  headerData: headerDataWithAccessors,
+  rows: rowsWithAccessor,
+  pagination: {
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  styles: {
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider: true,
+    withRowDivider: true,
+    withBorder: true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: "",
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick: undefined,
+};
\ No newline at end of file