diff --git a/react/css/package.json b/react/css/package.json
index 56a0c1bf09..7716e00298 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.36",
+  "version": "0.0.2-beta.37",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
diff --git a/react/css/src/digitv2/components/dividerV2.scss b/react/css/src/digitv2/components/dividerV2.scss
index 70ad783327..3b9f9fb3ec 100644
--- a/react/css/src/digitv2/components/dividerV2.scss
+++ b/react/css/src/digitv2/components/dividerV2.scss
@@ -1,6 +1,7 @@
 .digit-divider {
     border: theme(digitv2.divider.dividerS);
     width: 100%;
+    margin: theme(digitv2.spacers.spacer0);
 
     &.medium {
         border: theme(digitv2.divider.dividerM);
diff --git a/react/css/src/digitv2/components/filterCardV2.scss b/react/css/src/digitv2/components/filterCardV2.scss
new file mode 100644
index 0000000000..06e578b8e9
--- /dev/null
+++ b/react/css/src/digitv2/components/filterCardV2.scss
@@ -0,0 +1,417 @@
+.digit-filter-card-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(11, 12, 12, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  backdrop-filter: blur(0.125rem);
+  -webkit-backdrop-filter: blur(0.125rem);
+
+  .digit-filter-card-popup-wrapper {
+    @apply w-full h-auto flex-col fixed;
+    z-index: 10000;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    border-radius: theme(digitv2.spacers.spacer1);
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
+    display: flex;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    animation: scaleIn 300ms ease-in-out forwards;
+
+    @media (min-aspect-ratio: 3/4) {
+      max-height: 86%;
+      max-width: 51%;
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      max-height: 82%;
+      max-width: 74%;
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      max-height: 80%;
+      max-width: 91%;
+    }
+
+    .digit-radio-options-wrap {
+      margin-bottom: theme(digitv2.spacers.spacer0);
+    }
+  }
+}
+
+
+.digit-filter-card-popup-wrapper.closing {
+  animation: scaleOut 300ms ease-in-out forwards;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleOut {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
+
+
+.filter-card {
+  width: 100%;
+  height: auto;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  border-radius: theme(digitv2.spacers.spacer1);
+  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .digit-radio-options-wrap {
+    margin-bottom: theme(digitv2.spacers.spacer0);
+  }
+}
+
+.filter-card-horizontal {
+  display: grid;
+  flex-direction: column;
+}
+
+.filter-card-vertical {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 100%;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+  }
+}
+
+
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .title-container {
+    display: flex !important;
+    gap: 0.5rem;
+    align-items: center;
+
+    .close-icon {
+      cursor: pointer;
+      position: absolute;
+      top: theme(digitv2.spacers.spacer2);
+      right: theme(digitv2.spacers.spacer2);
+      width: theme(digitv2.spacers.spacer8);
+      height: theme(digitv2.spacers.spacer8);
+    }
+  }
+
+  &.with-shadow {
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+  }
+
+  &.with-shadow {
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer6);
+    padding-bottom: theme(digitv2.spacers.spacer0);
+
+    &.with-shadow {
+      padding-bottom: theme(digitv2.spacers.spacer6);
+    }
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer5);
+    padding-bottom: theme(digitv2.spacers.spacer0);
+
+    &.with-shadow {
+      padding-bottom: theme(digitv2.spacers.spacer5);
+    }
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    padding: theme(digitv2.spacers.spacer4);
+    padding-bottom: theme(digitv2.spacers.spacer0);
+
+    &.with-shadow {
+      padding-bottom: theme(digitv2.spacers.spacer4);
+    }
+  }
+}
+
+.filter-header .filter-title {
+  @extend .typography.caption-l;
+  color: theme(digitv2.lightTheme.primary-2);
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+
+  @media (min-aspect-ratio: 3/4) {
+    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-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    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-aspect-ratio: 9/16) {
+    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;
+  }
+}
+
+.content-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.content-item:last-child {
+  border-bottom: none;
+}
+
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1.5rem;
+  /*grid-column: span 3 ;*/
+
+  &.equal-buttons {
+    justify-content: flex-start;
+    width: 100%;
+
+    button {
+      flex: 1
+    }
+  }
+
+  &.vertical{
+    flex-direction: column !important;
+
+    button {
+      width: 100%;
+    }
+
+    &.equal-buttons {
+      justify-content: flex-start;
+      width: 100%;
+
+      button {
+        flex: unset;
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-aspect-ratio: 9/16){
+
+    flex-direction: column !important;
+
+    button {
+      width: 100%;
+    }
+
+    &.equal-buttons {
+      justify-content: flex-start;
+      width: 100%;
+
+      button {
+        flex: unset;
+        width: 100%;
+      }
+    }
+  }
+
+  &.with-shadow {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    @apply w-full;
+    padding: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    padding: theme(digitv2.spacers.spacer4);
+  }
+}
+
+.content-action-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+
+  @media (min-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer6);
+    padding: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer5);
+    gap: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    padding: theme(digitv2.spacers.spacer4);
+    gap: theme(digitv2.spacers.spacer4);
+  }
+
+  .content-container {
+    flex-direction: row;
+    padding: 0rem;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+
+
+    @media (max-aspect-ratio: 9/16) {
+      flex-direction: column;
+      .digit-label-field-pair{
+        width: 100%;
+      }
+    }
+
+    .digit-label-field-pair{
+      flex: 1;
+    }
+  }
+
+  .button-container {
+    padding: 0rem;
+    display: flex;
+    flex-direction: row;
+    flex:1;
+    align-items: center;
+    justify-content: flex-end;
+    grid-column: span 2 / -1;
+    justify-self: end;
+
+    @media (min-aspect-ratio: 3/4) {
+      button{
+        margin-top: 1.875rem;
+      }
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4){
+      button{
+        margin-top: 1.875rem;
+      }
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      button{
+        margin-top: 0rem;
+      }
+    }
+
+    &.equal-buttons {
+      justify-content: flex-end;
+      width: 100%;
+  
+      button {
+        flex: unset
+      }
+    }
+  
+  }
+}
+
+.content-container::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  height: 0rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.content-container::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.content-container::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}
+
+.content-action-wrapper::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+
+.content-action-wrapper::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.content-action-wrapper::-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/formCardV2.scss b/react/css/src/digitv2/components/formCardV2.scss
index 9f9f23961e..13bb2c6151 100644
--- a/react/css/src/digitv2/components/formCardV2.scss
+++ b/react/css/src/digitv2/components/formCardV2.scss
@@ -107,6 +107,20 @@
           }
         }
 
+        &.with-divider{
+          @media (min-width: 48rem) {
+            grid-column-gap: theme(digitv2.spacers.spacer12);
+          }
+      
+          @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            grid-column-gap: theme(digitv2.spacers.spacer10);
+          }
+      
+          @media (max-width: 30rem) {
+            grid-column-gap: theme(digitv2.spacers.spacer8);
+          }
+        }
+
         .digit-label-field-pair {
             margin-bottom: unset;
         }
@@ -178,25 +192,41 @@
 
       .vertical-formcard-divider{
         position: absolute;
+        height: 100%;
 
         @media (max-aspect-ratio: 9/16) {
             /* Media query for mobile */
             top: theme(digitv2.spacers.spacer4);
-            height: calc(100% - 2rem);
+            /*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);
+            /*height: calc(100% - 2.5rem);*/
         }
     
         @media (min-aspect-ratio: 3/4) {
             /* Media query for desktop */
             top: theme(digitv2.spacers.spacer6);
-            height: calc(100% - 3rem);
+            /*height: calc(100% - 3rem);*/
         }
         border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
         z-index: 1;
       }
+}
+
+
+.digit-form-card-content::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+.digit-form-card-content::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.digit-form-card-content::-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/labelFieldPairV2.scss b/react/css/src/digitv2/components/labelFieldPairV2.scss
index 73c3aef7e8..00bd0c84cb 100644
--- a/react/css/src/digitv2/components/labelFieldPairV2.scss
+++ b/react/css/src/digitv2/components/labelFieldPairV2.scss
@@ -19,9 +19,26 @@
      gap: theme(digitv2.spacers.spacer6);
    }
 
+   .digit-text-block-wrap {
+     margin-top: 0.565rem;
+   }
+
+   .digit-radio-options-wrap {
+     margin-top: 0.565rem;
+   }
+
    &.vertical {
      @apply flex-col items-start;
      gap: theme(digitv2.spacers.spacer2);
+
+     .digit-text-block-wrap {
+       margin-top: theme(digitv2.spacers.spacer0);
+     }
+
+     .digit-radio-options-wrap {
+       margin-top: theme(digitv2.spacers.spacer0);
+     }
+
    }
 
    & .label,
diff --git a/react/css/src/digitv2/components/popUpV2.scss b/react/css/src/digitv2/components/popUpV2.scss
index 5594455a62..68dd91566b 100644
--- a/react/css/src/digitv2/components/popUpV2.scss
+++ b/react/css/src/digitv2/components/popUpV2.scss
@@ -21,7 +21,9 @@
     display: flex;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    animation: scaleIn 300ms ease-in-out forwards;
   
     @media (min-width: 48rem) {
       max-height: 86%;
@@ -360,6 +362,10 @@
   }
 }
 
+.digit-popup-wrapper.closing{
+  animation: scaleOut 300ms ease-in-out forwards;
+}
+
 .digit-popup-children-wrap::-webkit-scrollbar {
   width: theme(digitv2.spacers.spacer2);
   background-color: theme(digitv2.lightTheme.generic-background);
@@ -373,4 +379,26 @@
 .digit-popup-children-wrap::-webkit-scrollbar-thumb {
   background-color: theme(digitv2.lightTheme.generic-divider);
   border-radius: 0.563rem;
-}
\ No newline at end of file
+}
+
+@keyframes popupscaleIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes popupscaleOut {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss
index fd3dc73511..bf22da68a3 100644
--- a/react/css/src/digitv2/components/radiobtnV2.scss
+++ b/react/css/src/digitv2/components/radiobtnV2.scss
@@ -12,6 +12,10 @@
     @apply block mb-md;
   }
 
+  &.vertical{
+    flex-direction: column
+  }
+
   .digit-radio-btn-wrap {
     @apply block float-left relative;
 
diff --git a/react/css/src/digitv2/components/slideOverMenuV2.scss b/react/css/src/digitv2/components/slideOverMenuV2.scss
index bcaeba5c17..bef178cee5 100644
--- a/react/css/src/digitv2/components/slideOverMenuV2.scss
+++ b/react/css/src/digitv2/components/slideOverMenuV2.scss
@@ -6,9 +6,8 @@
   z-index: 1000;
   overflow: hidden;
   border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
-  background: #FAFAFA;
+  background: theme(digitv2.lightTheme.paper-secondary);
   box-shadow: -0.125rem -0.25rem 0.356rem 0rem #00000026;
-
 }
 
 .digit-slider-container.left {
@@ -56,7 +55,7 @@
   border-radius: 50%;
   z-index: 1001;
   display: flex;
-  gap:theme(digitv2.spacers.spacer1);
+  gap: theme(digitv2.spacers.spacer1);
   align-items: center;
 
   .scroll-bar {
@@ -64,15 +63,16 @@
     width: theme(digitv2.spacers.spacer2);
     border-radius: 0.563rem;
     background-color: #D9D9D9;
-
   }
 
   .slider-handler-svg {
-    background: #FFFFFF;
+    background: theme(digitv2.lightTheme.paper-primary);
     box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
     width: theme(digitv2.spacers.spacer8);
-    height:theme(digitv2.spacers.spacer8);
-
+    height: 3.25rem;
+    display: flex !important;
+    align-items: center;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
   }
 
   &.dynamic {
@@ -105,6 +105,15 @@
   flex-shrink: 0;
   padding: theme(digitv2.spacers.spacer4);
   border-bottom: 0.063rem solid #d6d5d4;
+
+  .close-icon {
+    cursor: pointer;
+    position: absolute;
+    top: theme(digitv2.spacers.spacer2);
+    right: theme(digitv2.spacers.spacer2);
+    width: theme(digitv2.spacers.spacer8);
+    height: theme(digitv2.spacers.spacer8);
+  }
 }
 
 .slider-section {
@@ -166,6 +175,14 @@
     font-weight: theme(digitv2.fontWeight.regular);
     line-height: theme(digitv2.lineHeight.lineheight2);
   }
+
+  &.with-sections {
+    padding: theme(digitv2.spacers.spacer0);
+
+    .slider-section {
+      padding: theme(digitv2.spacers.spacer4);
+    }
+  }
 }
 
 
diff --git a/react/css/src/digitv2/components/stepperV2.scss b/react/css/src/digitv2/components/stepperV2.scss
index 665ebbaa50..05f432acf6 100644
--- a/react/css/src/digitv2/components/stepperV2.scss
+++ b/react/css/src/digitv2/components/stepperV2.scss
@@ -163,7 +163,7 @@
     &.vertical {
       top: calc(50% + (theme(digitv2.spacers.spacer2)));
       bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
-      left: -(theme(digitv2.spacers.spacer12));
+      left: -3.1rem;
       width: 0.125rem;
       height: auto;
       transform: rotate(90deg);
@@ -173,10 +173,20 @@
         border-color: theme(digitv2.lightTheme.primary-1);
       }
       @media (max-aspect-ratio: 9/16) {
-        left: -2.75rem;
+        left: -3.65rem;
+        min-width: 4.313rem;
+        max-width: 16.875rem;
+        top: 0.875rem;
       }
       @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
         left: -3.5rem;
+        min-width: 6.313rem;
+        max-width: 39.438rem;
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        min-width: 5.313rem;
+        max-width: 82.688rem;
       }
     }
   }
diff --git a/react/css/src/digitv2/components/timelineV2.scss b/react/css/src/digitv2/components/timelineV2.scss
index a4b1739abc..1d63c9ac38 100644
--- a/react/css/src/digitv2/components/timelineV2.scss
+++ b/react/css/src/digitv2/components/timelineV2.scss
@@ -128,6 +128,26 @@
 
 .timeline-additional-elements-column {
   @apply flex flex-col items-start;
+  @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);
+  }
   gap: theme(digitv2.spacers.spacer4);
 
   .timeline-individual-element {
diff --git a/react/css/src/digitv2/components/tooltipwrapperV2.scss b/react/css/src/digitv2/components/tooltipwrapperV2.scss
index 5a52470560..7d3d3dcf0f 100644
--- a/react/css/src/digitv2/components/tooltipwrapperV2.scss
+++ b/react/css/src/digitv2/components/tooltipwrapperV2.scss
@@ -3,7 +3,7 @@
   display: inline-block;
 }
 
-.tooltip-content{
+.tooltip-content {
   position: absolute;
   background-color: theme(digitv2.lightTheme.generic-inputborder);
   color: theme(digitv2.lightTheme.paper-primary);
@@ -16,7 +16,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  gap:0.625rem;
+  gap: 0.625rem;
   min-width: 4.125rem;
   max-width: 14.563rem;
 
@@ -37,8 +37,14 @@
     font-size: theme(digitv2.fontSize.body-s.desktop);
   }
 
+  &.light {
+    color: theme(digitv2.lightTheme.text-primary);
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+    box-shadow: 0rem 0.063rem 0.125rem 0rem #36363629;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+  }
 
-  .tooltip-header{
+  .tooltip-header {
     @extend .typography.heading-s;
     font-family: theme(digitv2.fontFamily.sans);
     font-style: theme(digitv2.fontStyle.normal);
@@ -59,12 +65,29 @@
       /* Media query for desktop */
       font-size: theme(digitv2.fontSize.heading-s.desktop);
     }
+
     color: theme(digitv2.lightTheme.paper-primary);
+
+    &.light {
+      color: theme(digitv2.lightTheme.text-primary);
+    }
   }
 
-  .tooltip-description{
+  .tooltip-data{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column
+  }
+
+  .tooltip-description {
     @extend .typography.body-xs;
     color: theme(digitv2.lightTheme.paper-primary);
+
+    &.light {
+      color: theme(digitv2.lightTheme.text-primary);
+    }
   }
 }
 
@@ -72,7 +95,7 @@
   top: theme(digitv2.spacers.spacer12);
   left: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-top-left-radius: theme(digitv2.spacers.spacer0);
   }
 
@@ -88,7 +111,7 @@
   top: theme(digitv2.spacers.spacer12);
   right: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-top-right-radius: 0px;
   }
 }
@@ -97,7 +120,7 @@
   bottom: theme(digitv2.spacers.spacer12);
   left: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-bottom-left-radius: theme(digitv2.spacers.spacer0);
   }
 }
@@ -113,7 +136,7 @@
   bottom: theme(digitv2.spacers.spacer12);
   right: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-bottom-right-radius: theme(digitv2.spacers.spacer0);
   }
 }
@@ -122,7 +145,7 @@
   right: calc(100% + theme(digitv2.spacers.spacer2));
   top: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-top-right-radius: theme(digitv2.spacers.spacer0);
   }
 }
@@ -137,7 +160,7 @@
   right: calc(100% + theme(digitv2.spacers.spacer2));
   bottom: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-bottom-right-radius: theme(digitv2.spacers.spacer0);
   }
 }
@@ -146,7 +169,7 @@
   left: calc(100% + theme(digitv2.spacers.spacer2));
   top: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-top-left-radius: theme(digitv2.spacers.spacer0);
   }
 }
@@ -161,23 +184,27 @@
   left: calc(100% + theme(digitv2.spacers.spacer2));
   bottom: 0;
 
-  &.with-arrow{
+  &.with-arrow {
     border-bottom-left-radius: theme(digitv2.spacers.spacer0);
   }
-} 
+}
 
 
-.tooltip-bottom-start.with-arrow:before{
+.tooltip-bottom-start.with-arrow:before {
   content: "";
   position: absolute;
   top: -0.5rem;
-  left:theme(digitv2.spacers.spacer1);
+  left: theme(digitv2.spacers.spacer1);
   transform: translateX(-50%);
   border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
-  border-right:theme(digitv2.spacers.spacer2) solid transparent;
+  border-right: theme(digitv2.spacers.spacer2) solid transparent;
+}
+
+.tooltip-bottom-start.with-arrow.light:before {
+  border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
 }
 
-.tooltip-bottom.with-arrow:before{
+.tooltip-bottom.with-arrow:before {
   content: "";
   position: absolute;
   top: -0.5rem;
@@ -188,19 +215,25 @@
   border-right: theme(digitv2.spacers.spacer1) solid transparent;
 }
 
+.tooltip-bottom.with-arrow.light:before {
+  border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
 
 .tooltip-bottom-end.with-arrow:before {
   content: "";
   position: absolute;
   top: -0.5rem;
-  left:calc(100% -0.25rem);
+  left: calc(100% -0.25rem);
   transform: translateX(-50%);
-  border-bottom:theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
+  border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
   border-left: theme(digitv2.spacers.spacer2) solid transparent;
 }
 
+.tooltip-bottom-end.with-arrow.light:before {
+  border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
 
-.tooltip-top-start.with-arrow:before{
+.tooltip-top-start.with-arrow:before {
   content: "";
   position: absolute;
   bottom: -0.5rem;
@@ -210,7 +243,11 @@
   border-right: theme(digitv2.spacers.spacer2) solid transparent;
 }
 
-.tooltip-top.with-arrow:before{
+.tooltip-top-start.with-arrow.light:before {
+  border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
+
+.tooltip-top.with-arrow:before {
   content: "";
   position: absolute;
   bottom: -0.5rem;
@@ -221,18 +258,25 @@
   border-right: theme(digitv2.spacers.spacer1) solid transparent;
 }
 
+.tooltip-top.with-arrow.light:before {
+  border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
+
 .tooltip-top-end.with-arrow:before {
   content: "";
   position: absolute;
   bottom: -0.5rem;
-  left:calc(100% -0.25rem);
+  left: calc(100% -0.25rem);
   transform: translateX(-50%);
   border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
   border-left: theme(digitv2.spacers.spacer2) solid transparent;
 }
 
+.tooltip-top-end.with-arrow.light:before {
+  border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
 
-.tooltip-left-start.with-arrow:before{
+.tooltip-left-start.with-arrow:before {
   content: "";
   position: absolute;
   top: theme(digitv2.spacers.spacer1);
@@ -242,6 +286,11 @@
   transform: translateY(-50%);
 }
 
+.tooltip-left-start.with-arrow.light:before {
+  border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+
+}
+
 .tooltip-left.with-arrow:before {
   content: "";
   position: absolute;
@@ -253,17 +302,26 @@
   transform: translateY(-50%);
 }
 
+.tooltip-left.with-arrow.light:before {
+  border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
+
 .tooltip-left-end.with-arrow:before {
   content: "";
   position: absolute;
-  top:calc(100% -0.25rem);
+  top: calc(100% -0.25rem);
   right: -0.45rem;
   border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
   border-top: theme(digitv2.spacers.spacer2) solid transparent;
   transform: translateY(-50%);
 }
 
-.tooltip-right-start.with-arrow:before{
+.tooltip-left-end.with-arrow.light:before {
+  border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+
+}
+
+.tooltip-right-start.with-arrow:before {
   content: "";
   position: absolute;
   top: theme(digitv2.spacers.spacer1);
@@ -273,7 +331,11 @@
   transform: translateY(-50%);
 }
 
-.tooltip-right.with-arrow:before{
+.tooltip-right-start.with-arrow.light:before {
+  border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
+
+.tooltip-right.with-arrow:before {
   content: "";
   position: absolute;
   top: 50%;
@@ -284,13 +346,20 @@
   transform: translateY(-50%);
 }
 
+.tooltip-right.with-arrow.light:before {
+  border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
+}
 
 .tooltip-right-end.with-arrow:before {
   content: "";
   position: absolute;
-  top:calc(100% -0.25rem);
+  top: calc(100% -0.25rem);
   left: -0.45rem;
   border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
   border-top: theme(digitv2.spacers.spacer2) solid transparent;
   transform: translateY(-50%);
+}
+
+.tooltip-right-end.with-arrow.light:before {
+  border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.paper-secondary);
 }
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/viewCardV2.scss b/react/css/src/digitv2/components/viewCardV2.scss
new file mode 100644
index 0000000000..172156a81c
--- /dev/null
+++ b/react/css/src/digitv2/components/viewCardV2.scss
@@ -0,0 +1,100 @@
+.digit-view-card {
+  .digit-view-card-header {
+    @extend .typography.heading-l;
+    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-l.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-l.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-l.desktop);
+    }
+
+    padding-bottom: theme(digitv2.spacers.spacer2);
+    color: theme(digitv2.lightTheme.text-primary);
+    line-height: normal;
+
+    @media (max-width: 30rem) {
+      padding-bottom: theme(digitv2.spacers.spacer1);
+    }
+  }
+
+  .digit-view-card-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.primary-2);
+    line-height: normal;
+  }
+
+  .view-card-field-pairs {
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer4);
+    position: relative;
+
+    &.two-column-layout {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: theme(digitv2.spacers.spacer4);
+
+      &.with-divider{
+        grid-column-gap:theme(digitv2.spacers.spacer8);
+      }
+    }
+
+    .vertical-viewcard-divider {
+      position: absolute;
+      height: 100%;
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+      z-index: 1;
+    }
+  }
+}
+
+.seperate-card-sections {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    gap: theme(digitv2.spacers.spacer4);
+  }
+
+}
\ No newline at end of file
diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
index 1ab3ed9c83..fbf7328c25 100644
--- a/react/css/src/digitv2/index.scss
+++ b/react/css/src/digitv2/index.scss
@@ -50,6 +50,8 @@
 @import url("./components/slideOverMenuV2.scss");
 @import url("./components/metricCardV2.scss");
 @import url("./components/formCardV2.scss");
+@import url("./components/filterCardV2.scss");
+@import url("./components/viewCardV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");
diff --git a/react/example/package.json b/react/example/package.json
index 3d49b906f1..e66ed78d59 100644
--- a/react/example/package.json
+++ b/react/example/package.json
@@ -10,14 +10,14 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.43",
+    "@egovernments/digit-ui-components": "0.0.2-beta.44",
     "@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",
     "@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-svg-components": "1.0.12",
     "http-proxy-middleware": "^1.0.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/react/example/public/index.html b/react/example/public/index.html
index fa8d0bd778..b6ae7921a9 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.36/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.37/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 eb8b002022..210529510b 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.43",
+    "@egovernments/digit-ui-components": "0.0.2-beta.44",
     "@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 469c865f16..90484c345b 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.43",
+    "@egovernments/digit-ui-components": "0.0.2-beta.44",
     "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 469601c249..a6b1e4664d 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.36",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.37",
     "@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.43",
+    "@egovernments/digit-ui-svg-components": "1.0.12",
+    "@egovernments/digit-ui-components": "0.0.2-beta.44",
     "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 6b43182f38..0ec7ad21d4 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.36/dist/index.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.37/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 aea863de33..a76146cea6 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.44] - 2024-10-07
+### New Changes
+- Added NestedTable, FilterCard and FormCards
+
 ## [0.0.2-beta.42] - 2024-09-23
 ### New Changes
 - Added Table Molecule 
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 7bbd4ca6fb..50dca2e627 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.43",
+  "version": "0.0.2-beta.44",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,9 +51,9 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components-css": "0.0.2-beta.36",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.37",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
-    "@egovernments/digit-ui-svg-components": "1.0.11",
+    "@egovernments/digit-ui-svg-components": "1.0.12",
     "@googlemaps/js-api-loader": "1.13.10",
     "autoprefixer": "^10.4.15",
     "postcss-flexbugs-fixes": "^5.0.2",
diff --git a/react/ui-components/public/index.html b/react/ui-components/public/index.html
index a89374948e..05fdd2a87e 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.36/dist/index.css"/>
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.37/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/Button.js b/react/ui-components/src/atoms/Button.js
index b4323b7d74..ae552da841 100644
--- a/react/ui-components/src/atoms/Button.js
+++ b/react/ui-components/src/atoms/Button.js
@@ -90,15 +90,16 @@ const Button = (props) => {
 
   const icon = IconRender();
 
-  const formattedLabel =
-    props?.variation === "link"
+  const formattedLabel = props?.label
+    ? props?.variation === "link"
       ? props?.label
       : StringManipulator(
           "CAPITALIZEFIRSTLETTER",
           StringManipulator("TRUNCATESTRING", props?.label, {
             maxLength: 64,
           })
-        );
+        )
+    : "";
 
   const handleActionButtonClick = (e) => {
     e.stopPropagation();
@@ -206,7 +207,7 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  label: "TEST",
+  label: "",
   variation: "primary",
   onClick: () => {},
   size: "large",
diff --git a/react/ui-components/src/atoms/InfoButton.js b/react/ui-components/src/atoms/InfoButton.js
index 1c01566f8f..4b518a2bd9 100644
--- a/react/ui-components/src/atoms/InfoButton.js
+++ b/react/ui-components/src/atoms/InfoButton.js
@@ -109,7 +109,7 @@ InfoButton.propTypes = {
 };
 
 InfoButton.defaultProps = {
-  label: "TEST",
+  label: "",
   onClick: () => {},
   infobuttontype:"info"
 };
diff --git a/react/ui-components/src/atoms/Menu.js b/react/ui-components/src/atoms/Menu.js
index 679c4fcc0a..eb8cc37f9f 100644
--- a/react/ui-components/src/atoms/Menu.js
+++ b/react/ui-components/src/atoms/Menu.js
@@ -16,7 +16,7 @@ const Menu = (props) => {
   };
 
   const searchFilteredOptions = props?.options.filter((option) =>
-    option[props?.optionsKey].toLowerCase().includes(searchTerm.toLowerCase())
+    option[props?.optionsKey]?.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   const onSelect = (val) => {
diff --git a/react/ui-components/src/atoms/MobileNumber.js b/react/ui-components/src/atoms/MobileNumber.js
index 257818cd87..c2f1a73fc1 100644
--- a/react/ui-components/src/atoms/MobileNumber.js
+++ b/react/ui-components/src/atoms/MobileNumber.js
@@ -17,11 +17,6 @@ const MobileNumber = (props) => {
   return (
     <React.Fragment>
       <div className={`digit-mobile-number-container ${props?.className ? props?.className : ""}`} style={props?.style}>
-        {!props.hideSpan ? (
-          <span style={props?.style} className="digit-citizenCard-input digit-citizenCard-input--front">
-            +91
-          </span>
-        ) : null}
         <div
           className={`digit-text-input-field ${user_type === "employee" ? "" : "digit-text-mobile-input-width"} ${props.className ? props.className : ""}`}
         >
@@ -47,6 +42,9 @@ const MobileNumber = (props) => {
             autoFocus={props.autoFocus}
             onBlur={props.onBlur}
             variant={props?.variant}
+            populators={
+              !props.hideSpan ? {prefix:"+91"} :{}
+            }
           />
         </div>
       </div>
diff --git a/react/ui-components/src/atoms/NestedTable.js b/react/ui-components/src/atoms/NestedTable.js
new file mode 100644
index 0000000000..5c7342e024
--- /dev/null
+++ b/react/ui-components/src/atoms/NestedTable.js
@@ -0,0 +1,98 @@
+import React from "react";
+import TableMain from "./TableMain";
+import TableHeader from "./TableHeader";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableRow from "./TableRow";
+import Card from "./Card";
+import { SVG } from "./SVG";
+
+const NestedTable = ({ nestedData, toggleRowExpansion, rowIndex }) => {
+  const lastNestedData = nestedData[nestedData.length - 1];
+
+  if (!lastNestedData || !lastNestedData.nestedData) {
+    return <p>No nested data available</p>;
+  }
+
+  const { headerData, rows, tableDetails } = lastNestedData.nestedData;
+
+  if (!rows || rows.length === 0 || !headerData || headerData.length === 0) {
+    return <p>No nested data available</p>;
+  }
+
+  const renderNestedTable = () => {
+    return (
+      <div className={`digit-table-container withBorder`}>
+        <TableMain>
+          <TableHeader>
+            <TableRow>
+              {headerData?.map((header, index) => (
+                <TableCell key={index} isHeader={true}>
+                  {header?.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows?.map((nestedRow, index) => (
+              <TableRow key={index}>
+                {nestedRow?.map((cell, cellIndex) => (
+                  <TableCell
+                    key={cellIndex}
+                    isHeader={false}
+                    isFooter={false}
+                    className={`scrollable-columns`}
+                    cellData={cell}
+                    columnType={headerData[cellIndex]?.type}
+                    accessor={
+                      headerData && headerData.length > 0
+                        ? headerData[cellIndex]?.accessor
+                        : null
+                    }
+                  />
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableMain>
+      </div>
+    );
+  };
+
+  return tableDetails?.tableTitle ||
+    tableDetails?.tableDescription ||
+    tableDetails?.addClose ? (
+    <Card className={"digit-table-card"}>
+      {(tableDetails?.tableDescription ||
+        tableDetails?.tableTitle ||
+        tableDetails?.addClose) && (
+        <div className="table-header-wrapper">
+          <div className="header-filter-wrapper">
+            {tableDetails?.tableTitle && (
+              <div className="table-header">{tableDetails?.tableTitle}</div>
+            )}
+            {tableDetails?.addClose && (
+              <SVG.Close
+                fill={"#363636"}
+                width={"2rem"}
+                height={"2rem"}
+                className={"table-filter-svg"}
+                onClick={() => toggleRowExpansion(rowIndex)}
+              />
+            )}
+          </div>
+          {tableDetails?.tableDescription && (
+            <div className="table-description">
+              {tableDetails?.tableDescription}
+            </div>
+          )}
+        </div>
+      )}
+      {renderNestedTable()}
+    </Card>
+  ) : (
+    renderNestedTable()
+  );
+};
+
+export default NestedTable;
diff --git a/react/ui-components/src/atoms/Panels.js b/react/ui-components/src/atoms/Panels.js
index bd5690b64f..4fbd63f87f 100644
--- a/react/ui-components/src/atoms/Panels.js
+++ b/react/ui-components/src/atoms/Panels.js
@@ -151,6 +151,7 @@ Panels.propTypes = {
   iconFill: PropTypes.string,
   style: PropTypes.object,
   multipleResponses: PropTypes.array,
+  showAsSvg:PropTypes.bool
 };
 
 Panels.defaultProps = {
diff --git a/react/ui-components/src/atoms/PopUp.js b/react/ui-components/src/atoms/PopUp.js
index 38b3fc0de5..7fe70bce59 100644
--- a/react/ui-components/src/atoms/PopUp.js
+++ b/react/ui-components/src/atoms/PopUp.js
@@ -4,13 +4,14 @@ import { SVG } from "./SVG";
 import StringManipulator from "./StringManipulator";
 import warningOutlineAnimation from "../constants/animations/warningOutline.json";
 import Animation from "./Animation";
-import { Colors} from "../constants/colors/colorconstants";
+import { Colors } from "../constants/colors/colorconstants";
 import { iconRender } from "../utils/iconRender";
 
 const PopUp = (props) => {
   const [isOverflowing, setIsOverflowing] = useState(false);
   const childrenWrapRef = useRef(null);
   const overlayRef = useRef(null);
+  const [isClosing, setIsClosing] = useState(false);
 
   const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 480);
 
@@ -108,9 +109,16 @@ const PopUp = (props) => {
       : sortedFooterButtons
     : allowedFooter;
 
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      props?.onClose();
+    }, 300);
+  };
+
   const handleKeyDown = (event) => {
     if (event.key === "Escape") {
-      props?.onClose();
+      handleClose();
     }
     if (event.key === "Enter") {
       const submitButton = props?.footerChildren?.find(
@@ -122,16 +130,23 @@ const PopUp = (props) => {
     }
   };
 
+  const handleOverlayClick = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      props?.onOverlayClick();
+    }, 300);
+  };
+
   return (
     <div
       className={`digit-popup-overlay ${props?.overlayClassName || ""}`}
-      onClick={() => props?.onOverlayClick()}
+      onClick={() => handleOverlayClick()}
       ref={overlayRef}
       onKeyDown={handleKeyDown}
       tabIndex={0}
     >
       <div
-        className={`digit-popup-wrapper ${
+        className={`digit-popup-wrapper ${isClosing ? 'closing' : ''} ${
           props?.className ? props?.className : ""
         } ${props?.type ? props?.type : ""}`}
         style={props?.style}
@@ -226,7 +241,7 @@ const PopUp = (props) => {
                 <span
                   className="digit-popup-close"
                   style={{ display: "flex" }}
-                  onClick={() => props?.onClose()}
+                  onClick={() => handleClose()}
                 >
                   <SVG.Close
                     fill={"#363636"}
@@ -259,7 +274,9 @@ const PopUp = (props) => {
             } ${isOverflowing ? "with-shadow" : ""}`}
           >
             <div
-              className={`digit-popup-footer-buttons ${props?.equalWidthButtons ? "equal-buttons" : ""}`}
+              className={`digit-popup-footer-buttons ${
+                props?.equalWidthButtons ? "equal-buttons" : ""
+              }`}
               style={{ ...props?.footerStyles }}
             >
               {finalFooterArray}
diff --git a/react/ui-components/src/atoms/RadioButtons.js b/react/ui-components/src/atoms/RadioButtons.js
index d166c43d37..c6535caa64 100644
--- a/react/ui-components/src/atoms/RadioButtons.js
+++ b/react/ui-components/src/atoms/RadioButtons.js
@@ -17,7 +17,7 @@ const RadioButtons = (props) => {
   );
 
   return (
-    <div style={props?.style} className={`digit-radio-options-wrap ${props?.additionalWrapperClass ? props?.additionalWrapperClass : ""}`}>
+    <div style={props?.style} className={`digit-radio-options-wrap ${props?.alignVertical ? "vertical" : ""} ${props?.additionalWrapperClass ? props?.additionalWrapperClass : ""}`}>
       {props?.options?.map((option, ind) => {
         if (props?.optionsKey && !props?.isDependent) {
           return (
diff --git a/react/ui-components/src/atoms/SlideOverMenu.js b/react/ui-components/src/atoms/SlideOverMenu.js
index 56faa2f0c9..68db44340f 100644
--- a/react/ui-components/src/atoms/SlideOverMenu.js
+++ b/react/ui-components/src/atoms/SlideOverMenu.js
@@ -12,7 +12,6 @@ const SlideOverMenu = ({
   children,
   header,
   footer,
-  onClose = false,
   bgActive = false,
   isOverlay = false,
   isDraggable = false,
@@ -21,6 +20,12 @@ const SlideOverMenu = ({
   sections = [],
   defaultOpenWidth,
   defaultClosedWidth,
+  addClose,
+  closedContents,
+  closedSections,
+  closedHeader,
+  closedFooter,
+  transitionDuration
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const sliderRef = useRef(null);
@@ -32,7 +37,7 @@ const SlideOverMenu = ({
 
   const toggleSlider = () => {
     if (type === "static") return;
-    if (onClose && isOpen) {
+    if (isOpen) {
       setIsOpen(false);
       setSliderWidth(defaultClosedWidth || 64);
       return;
@@ -43,6 +48,10 @@ const SlideOverMenu = ({
     }
   };
 
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
   const handleMouseDown = (e) => {
     if (isDraggable && type === "dynamic" && isOpen) {
       isDragging.current = true;
@@ -83,12 +92,17 @@ const SlideOverMenu = ({
       {!bgActive && <div className="slider-bg-active" />}
       <div
         ref={sliderRef}
-        className={`digit-slider-container ${position} ${
+        className={`digit-slider-container ${type} ${position} ${
           isOpen ? "open" : "closed"
         } ${className} ${isOverlay ? "overlay" : ""}`}
         style={{
           ...styles,
-          width: isOpen ? sliderWidth : defaultClosedWidth || 64,
+          transition: `width ${transitionDuration || 0.5}s`,
+          width: isOpen
+            ? sliderWidth
+            : type === "dynamic"
+            ? defaultClosedWidth || 64
+            : 0,
         }}
       >
         {type === "dynamic" && (
@@ -120,11 +134,48 @@ const SlideOverMenu = ({
             )}
           </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={`slider-content`}>
+          {header && isOpen && (
+            <div className="slider-header">
+              {addClose && isOpen && (
+                <div className="close-icon" onClick={handleClose}>
+                  <SVG.Close
+                    width={"1.5rem"}
+                    height={"1.5rem"}
+                    fill={iconColor}
+                  />
+                </div>
+              )}
+              {header}
+            </div>
+          )}
+          {
+            closedHeader && !isOpen && (
+              <div className="slider-header">
+              {closedHeader}
+            </div>
+            )
+          }
+          <div
+            className={`slider-body ${
+              sections && sections.length > 0 ? "with-sections" : ""
+            }`}
+          >
+            {isOpen
+              ? 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
+              : sections && sections?.length > 0
+              ? closedSections?.map((section, index) => (
                   <div className="section-divider-wrapper">
                     <div key={index} className="slider-section">
                       {section}
@@ -134,10 +185,11 @@ const SlideOverMenu = ({
                     )}
                   </div>
                 ))
-              : children}
+              : closedContents}
           </div>
 
-          {footer && <div className="slider-footer">{footer}</div>}
+          {footer && isOpen && <div className="slider-footer">{footer}</div>}
+          {closedFooter && !isOpen && <div className="slider-footer">{closedFooter}</div>}
         </div>
       </div>
     </>
diff --git a/react/ui-components/src/atoms/TableCell.js b/react/ui-components/src/atoms/TableCell.js
index 0f15b80ec8..3a208f907a 100644
--- a/react/ui-components/src/atoms/TableCell.js
+++ b/react/ui-components/src/atoms/TableCell.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import Switch from "./Switch";
 import CheckBox from "./CheckBox";
@@ -19,38 +19,49 @@ const TableCell = ({
   children,
   style,
   cellref,
-  accessor
+  accessor,
+  updateTableData,
+  tableData,
+  rowIndex,
+  cellIndex,
 }) => {
-
-
   const getValueFromAccessor = (cellData, accessor) => {
-    return accessor ? accessor.split('?.').reduce((acc, key) => (acc ? acc[key] : undefined), cellData) : cellData;
+    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;
+        return accessor ? getValueFromAccessor(cellData, accessor) : cellData;
       case "numeric":
-        return accessor ? getValueFromAccessor(cellData,accessor) : cellData;
+        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, {
+      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;
+                  }
+                )
+              )}
+            </div>
+          );
         }
+        return cellData;
+      }
       case "tag":
         return (
           <Tag
@@ -79,18 +90,28 @@ const TableCell = ({
             disable={cellData?.disable}
             className={cellData?.className}
             isCheckedInitially={cellData?.isCheckedInitially}
-            onToggle={cellData?.onToggle}
+            onToggle={(event) => {
+              updateTableData(rowIndex, cellIndex, event);
+              if (cellData?.onToggle) {
+                cellData.onToggle(event);
+              }
+            }}
           />
         );
       case "checkbox":
         return (
           <CheckBox
-            onChange={cellData?.onChange}
+            onChange={(event) => {
+              updateTableData(rowIndex, cellIndex, event?.target?.checked);
+              if (cellData?.onChange) {
+                cellData.onChange(event?.target?.checked);
+              }
+            }}
             label={cellData?.label}
             value={cellData?.value}
             disabled={cellData?.disabled}
             ref={cellData?.ref}
-            checked={cellData?.checked}
+            checked={tableData?.[rowIndex]?.values?.[cellIndex] || false}
             inputRef={cellData?.inputRef}
             pageType={cellData?.pageType}
             style={cellData?.style}
@@ -131,14 +152,44 @@ const TableCell = ({
           />
         );
       case "textinput":
-        return <TextInput {...cellData}></TextInput>;
+        return (
+          <TextInput
+            {...cellData}
+            onChange={(event) => {
+              updateTableData(rowIndex, cellIndex, event?.target?.value);
+              if (cellData?.onChange) {
+                cellData.onChange(event?.target?.value);
+              }
+            }}
+          ></TextInput>
+        );
       case "dropdown":
-        return <Dropdown {...cellData}></Dropdown>;
+        return (
+          <Dropdown
+            {...cellData}
+            select={(newValue) => {
+              updateTableData(rowIndex, cellIndex, newValue);
+              if (cellData?.select) {
+                cellData.select(newValue);
+              }
+            }}
+          ></Dropdown>
+        );
       case "multiselectdropdown":
-        return <MultiSelectDropdown {...cellData}></MultiSelectDropdown>;
+        return (
+          <MultiSelectDropdown
+            {...cellData}
+            onSelect={(newValue) => {
+              updateTableData(rowIndex, cellIndex, newValue);
+              if (cellData?.onSelect) {
+                cellData.onSelect(newValue);
+              }
+            }}
+          ></MultiSelectDropdown>
+        );
       case "custom":
       default:
-        return accessor ? getValueFromAccessor(cellData,accessor) : cellData;
+        return accessor ? getValueFromAccessor(cellData, accessor) : cellData;
     }
   };
 
diff --git a/react/ui-components/src/atoms/Tooltip.js b/react/ui-components/src/atoms/Tooltip.js
index 873e453afc..25adac2f1d 100644
--- a/react/ui-components/src/atoms/Tooltip.js
+++ b/react/ui-components/src/atoms/Tooltip.js
@@ -1,18 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const Tooltip = ({ tooltipRef, content, placement, arrow, style, className,header ,description}) => {
+const Tooltip = ({ tooltipRef, content, placement, arrow, style, className,header ,description,theme}) => {
   return (
     <div
       className={`tooltip-content tooltip-${placement} ${
         arrow ? "with-arrow" : ""
-      } ${className || ""}`}
+      } ${theme || ""} ${className || ""}`}
       style={style}
       ref={tooltipRef}
     >
-      {header && <div className={`tooltip-header`}>{header}</div>}
-      {content && <div className={`tooltip-data`}>{content}</div>}
-      {description && <div className={`tooltip-description`}>{description}</div>}
+      {header && <div className={`tooltip-header ${theme || ""}`}>{header}</div>}
+      {content && <div className={`tooltip-data ${theme || ""}`}>{content}</div>}
+      {description && <div className={`tooltip-description ${theme || ""}`}>{description}</div>}
     </div>
   );
 };
@@ -36,6 +36,7 @@ Tooltip.propTypes = {
     "right-start",
   ]),
   arrow: PropTypes.bool,
+  theme: PropTypes.string,
   style: PropTypes.object,
   className: PropTypes.string,
 };
@@ -43,6 +44,7 @@ Tooltip.propTypes = {
 Tooltip.defaultProps = {
   arrow: true,
   placement: "bottom",
+  theme:"dark"
 };
 
 export default Tooltip;
diff --git a/react/ui-components/src/atoms/index.js b/react/ui-components/src/atoms/index.js
index 804ddc1c00..2c4e5923a9 100644
--- a/react/ui-components/src/atoms/index.js
+++ b/react/ui-components/src/atoms/index.js
@@ -99,6 +99,7 @@ import TableFooter from "./TableFooter";
 import TableHeader from "./TableHeader";
 import TableRow from "./TableRow";
 import SlideOverMenu from "./SlideOverMenu";
+import NestedTable from "./NestedTable";
 
 export {
   ErrorBoundary,
@@ -201,5 +202,6 @@ export {
   TableFooter,
   TableBody,
   TableRow,
-  TableCell
+  TableCell,
+  NestedTable
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/RadioButtons.stories.js b/react/ui-components/src/atoms/stories/RadioButtons.stories.js
index ac4a10fc1e..5e3f5c1ffd 100644
--- a/react/ui-components/src/atoms/stories/RadioButtons.stories.js
+++ b/react/ui-components/src/atoms/stories/RadioButtons.stories.js
@@ -93,4 +93,13 @@ PreSelected.args = {
 };
 PreSelected.argTypes = {
   disabled: { control: { disable: true } },
+};
+
+export const AlignVertical = Template.bind({});
+AlignVertical.args = {
+  ...commonArgs,
+  populators:{
+    ...commonArgs.populators,
+    alignVertical:true
+  }
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js b/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js
index b35927c86f..16fbd4f746 100644
--- a/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js
+++ b/react/ui-components/src/atoms/stories/SlideOverMenu.stories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import SlideOverMenu from "../SlideOverMenu";
 import Button from "../Button";
+import { SVG } from "../SVG";
 
 export default {
   title: "Atoms/SlideOverMenu",
@@ -19,14 +20,17 @@ export default {
     footer: {
       control: "object",
     },
-    onClose: { control: "boolean" },
     bgActive: { control: "boolean" },
     isOverlay: { control: "boolean" },
-    hideArrowIcon: { control: "boolean" },
+    hideArrow: { control: "boolean" },
     hideScrollIcon: { control: "boolean" },
     isDraggable: { control: "boolean" },
     defaultClosedWidth: { control: "text" },
     defaultOpenWidth: { control: "text" },
+    addClose:{control:"boolean"},
+    closedContents:{control:"object"},
+    closedHeader:{control:"object"},
+    closedFooter:{control:"object"}
   },
 };
 
@@ -40,15 +44,19 @@ const commonArgs = {
   children: [],
   header: [],
   footer: [],
-  onClose: () => {},
   bgActive: true,
   isOverlay: false,
   isDraggable: false,
   hideScrollIcon: true,
   sections: [],
-  hideArrowIcon: false,
   defaultClosedWidth: "",
   defaultOpenWidth: "",
+  addClose:false,
+  closedContents:[],
+  closedSections:[],
+  closedHeader:[],
+  closedFooter:[],
+  hideArrow:false
 };
 
 const children = [
@@ -327,6 +335,179 @@ const children = [
   </div>,
 ];
 
+const closedSections = [
+  <div style={{ display: "flex", alignItems: "center" ,flexDirection:"column",gap:"4px"}}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R1
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R2
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R3
+    </div>
+  </div>,
+    <div style={{ display: "flex", alignItems: "center" ,flexDirection:"column",gap:"4px"}}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R1
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R2
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R3
+    </div>
+  </div>,
+    <div style={{ display: "flex", alignItems: "center" ,flexDirection:"column",gap:"4px"}}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R1
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R2
+    </div>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "10px",
+      }}
+      className="typography heading-s"
+    >
+      R3
+    </div>
+  </div>,
+];
+
+const closedContents = [
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "4px",
+      }}
+      className="typography heading-s"
+    >
+      R1
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "4px",
+      }}
+      className="typography heading-s"
+    >
+      R2
+    </div>
+  </div>,
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <div
+      style={{
+        border: "1px solid #d6d5d4",
+        borderTopLeftRadius: "2px",
+        borderBottomLeftRadius: "2px",
+        backgroundColor: "#eeeeee",
+        color: "#363636",
+        padding: "4px",
+      }}
+      className="typography heading-s"
+    >
+      R3
+    </div>
+  </div>
+];
 const sections = [
   [
     <div
@@ -656,6 +837,7 @@ const footer = [
     onClick={() => {
       console.log("clicked");
     }}
+    size={"medium"}
     style={{ width: "100%" }}
     label={"Customize Sandbox"}
     icon={"Edit"}
@@ -663,6 +845,31 @@ const footer = [
   />,
 ];
 
+const closedFooter = [
+<SVG.Edit></SVG.Edit>
+];
+
+const closedHeader = [
+  <div
+  style={{
+    border: "1px solid #d6d5d4",
+    borderTopLeftRadius: "2px",
+    borderBottomLeftRadius: "2px",
+    backgroundColor: "#eeeeee",
+    color: "#0B4B66",
+    width:"100%",
+    lineHeight:"normal",
+    height:"fit-content",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }}
+  className="typography heading-l"
+>
+  H
+</div>
+]
+
 export const StaticRight = Template.bind({});
 StaticRight.args = {
   ...commonArgs,
@@ -705,6 +912,31 @@ StaticRightWithSectionsAndWithoutBgActive.args = {
   bgActive: false,
 };
 
+export const StaticRightWithClose = Template.bind({});
+StaticRightWithClose.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  addClose:true,
+  closedContents:closedContents
+};
+
+export const StaticRightWithSectionsAndClose = Template.bind({});
+StaticRightWithSectionsAndClose.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  header: header,
+  footer: footer,
+  sections: sections,
+  closedSections:closedSections,
+  addClose:true,
+  closedHeader:closedHeader
+};
+
 export const StaticRightWithCustomWidth = Template.bind({});
 StaticRightWithCustomWidth.args = {
   ...commonArgs,
@@ -758,6 +990,32 @@ StaticLeftWithSectionsWithoutBgActive.args = {
   bgActive: false,
 };
 
+export const StaticLeftWithClose = Template.bind({});
+StaticLeftWithClose.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  addClose:true,
+  closedContents:closedContents,
+  closedHeader:closedHeader
+};
+
+export const StaticLeftWithSectionsAndClose = Template.bind({});
+StaticLeftWithSectionsAndClose.args = {
+  ...commonArgs,
+  type: "static",
+  position: "left",
+  header: header,
+  footer: footer,
+  sections: sections,
+  closedSections:closedSections,
+  addClose:true,
+  closedHeader:closedHeader
+};
+
 export const StaticLeftWithCustomWidth = Template.bind({});
 StaticLeftWithCustomWidth.args = {
   ...commonArgs,
@@ -777,6 +1035,9 @@ DynamicRight.args = {
   children: children,
   header: header,
   footer: footer,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicRightWithoutBgActive = Template.bind({});
@@ -788,6 +1049,9 @@ DynamicRightWithoutBgActive.args = {
   header: header,
   footer: footer,
   bgActive: false,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicRightWithSections = Template.bind({});
@@ -798,6 +1062,10 @@ DynamicRightWithSections.args = {
   header: header,
   footer: footer,
   sections: sections,
+  closedContents:closedContents,
+  closedSections:closedSections,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicRightWithSectionsAndWithoutBgActive = Template.bind({});
@@ -809,6 +1077,9 @@ DynamicRightWithSectionsAndWithoutBgActive.args = {
   footer: footer,
   sections: sections,
   bgActive: false,
+  closedSections:closedSections,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicRightWithDragging = Template.bind({});
@@ -820,6 +1091,37 @@ DynamicRightWithDragging.args = {
   header: header,
   footer: footer,
   isDraggable: true,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
+};
+
+export const DynamicRightWithClose = Template.bind({});
+DynamicRightWithClose.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  addClose:true,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
+};
+
+export const DynamicRightWithSectionsAndClose = Template.bind({});
+DynamicRightWithSectionsAndClose.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  header: header,
+  footer: footer,
+  sections: sections,
+  closedSections:closedSections,
+  addClose:true,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicRightWithCustomWidths = Template.bind({});
@@ -832,6 +1134,10 @@ DynamicRightWithCustomWidths.args = {
   footer: footer,
   defaultClosedWidth: 100,
   defaultOpenWidth: 600,
+  closedSections:closedSections,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicLeft = Template.bind({});
@@ -842,6 +1148,9 @@ DynamicLeft.args = {
   children: children,
   header: header,
   footer: footer,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicLeftWithoutBgActive = Template.bind({});
@@ -853,6 +1162,9 @@ DynamicLeftWithoutBgActive.args = {
   header: header,
   footer: footer,
   bgActive: false,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicLeftWithSections = Template.bind({});
@@ -863,6 +1175,10 @@ DynamicLeftWithSections.args = {
   header: header,
   footer: footer,
   sections: sections,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedSections:closedSections,
+  closedFooter:closedFooter
 };
 
 export const DynamicLeftWithSectionsAndWithoutBgACtive = Template.bind({});
@@ -874,6 +1190,9 @@ DynamicLeftWithSectionsAndWithoutBgACtive.args = {
   footer: footer,
   sections: sections,
   bgActive: false,
+  closedHeader:closedHeader,
+  closedSections:closedSections,
+  closedFooter:closedFooter
 };
 
 export const DynamicLeftWithDragging = Template.bind({});
@@ -885,6 +1204,36 @@ DynamicLeftWithDragging.args = {
   header: header,
   footer: footer,
   isDraggable: true,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
+};
+
+export const DynamicLeftWithClose = Template.bind({});
+DynamicLeftWithClose.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  children: children,
+  header: header,
+  footer: footer,
+  addClose:true,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
+};
+
+export const DynamicLeftWithSectionsAndClose = Template.bind({});
+DynamicLeftWithSectionsAndClose.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "left",
+  header: header,
+  footer: footer,
+  sections: sections,
+  addClose:true,
+  closedSections:closedSections,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
 
 export const DynamicLeftWithCustomWidths = Template.bind({});
@@ -897,4 +1246,6 @@ DynamicLeftWithCustomWidths.args = {
   footer: footer,
   defaultClosedWidth: 100,
   defaultOpenWidth: 600,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
 };
diff --git a/react/ui-components/src/atoms/stories/TextInput.stories.js b/react/ui-components/src/atoms/stories/TextInput.stories.js
index bef689408b..309a3b9bf0 100644
--- a/react/ui-components/src/atoms/stories/TextInput.stories.js
+++ b/react/ui-components/src/atoms/stories/TextInput.stories.js
@@ -18,6 +18,7 @@ export default {
           "search",
           "textarea",
           "number",
+          "mobileNumber"
         ],
       },
     },
diff --git a/react/ui-components/src/atoms/stories/Tooltip.stories.js b/react/ui-components/src/atoms/stories/Tooltip.stories.js
index 87326a95c7..26304a3ea9 100644
--- a/react/ui-components/src/atoms/stories/Tooltip.stories.js
+++ b/react/ui-components/src/atoms/stories/Tooltip.stories.js
@@ -29,7 +29,14 @@ export default {
     arrow: { control: "boolean" },
     style: { control: "object" },
     className: { control: "text" },
-    header:{control:"text"}
+    header: { control: "text" },
+    theme: {
+      control: "select",
+      options: [
+        "dark",
+        "light",
+      ],
+    },
   },
 };
 
@@ -52,28 +59,29 @@ const Template = (args) => (
   </div>
 );
 
-export const Basic = Template.bind({});
-Basic.args = {
+export const DarkThemeBasic = Template.bind({});
+DarkThemeBasic.args = {
   content: "Tooltip",
   arrow: false,
   placement: "bottom",
   style: {},
   className: "",
-  header:"",
-  description:""
+  header: "",
+  description: "",
 };
 
-export const MaxLabel = Template.bind({});
-MaxLabel.args = {
-  content: "Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+export const DarkThemeMaxLabel = Template.bind({});
+DarkThemeMaxLabel.args = {
+  content:
+    "Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
   arrow: false,
   placement: "bottom",
   style: {},
   className: "",
 };
 
-export const WithArrow = Template.bind({});
-WithArrow.args = {
+export const DarkThemeWithArrow = Template.bind({});
+DarkThemeWithArrow.args = {
   content: "Tooltip",
   arrow: true,
   placement: "bottom",
@@ -81,17 +89,18 @@ WithArrow.args = {
   className: "",
 };
 
-export const MaxLabelWithArrow = Template.bind({});
-MaxLabelWithArrow.args = {
-  content: "Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+export const DarkThemeMaxLabelWithArrow = Template.bind({});
+DarkThemeMaxLabelWithArrow.args = {
+  content:
+    "Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
   arrow: true,
   placement: "bottom",
   style: {},
   className: "",
 };
 
-export const CustomStyles = Template.bind({});
-CustomStyles.args = {
+export const DarkThemeCustomStyles = Template.bind({});
+DarkThemeCustomStyles.args = {
   content: "Tooltip",
   arrow: false,
   placement: "bottom",
@@ -104,50 +113,154 @@ CustomStyles.args = {
   className: "",
 };
 
-
-export const WithHeaderAndDescription = Template.bind({});
-WithHeaderAndDescription.args = {
+export const DarkThemeWithHeaderAndDescription = Template.bind({});
+DarkThemeWithHeaderAndDescription.args = {
   content: "Tooltip",
   arrow: false,
   placement: "bottom",
   style: {},
   className: "",
-  header:"Header",
-  description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt "
+  header: "Header",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
 };
 
 const getImageUrl = (imageKey) => {
   return IMAGES[imageKey];
 };
 
-const digitImg = getImageUrl("DIGIT_LIGHT");
-
-const htmlTooltip = (
-    <React.Fragment>
-      {"And here's some amazing content It's very engaging. Right?"}<hr></hr>
-      <img
-        alt="here is your logo"
-        src={digitImg}
-      ></img>
-    </React.Fragment>
-  );
-
-  export const HtmlTooltip = Template.bind({});
-  HtmlTooltip.args = {
-    content: htmlTooltip,
-    arrow: false,
-    placement: "bottom",
-    style: {},
-    className: "",
-    header:"Header",
-    description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt "
-  };
-  
-  export const HtmlTooltipWithArrow = Template.bind({});
-  HtmlTooltipWithArrow.args = {
-    content: htmlTooltip,
-    arrow: true,
-    placement: "bottom",
-    style: {},
-    className: "",
-  };
\ No newline at end of file
+const digitdarkthemeImg = getImageUrl("DIGIT_DARK");
+
+const htmlTooltipForDarktheme = (
+  <React.Fragment>
+    {"And here's some amazing content It's very engaging. Right?"}
+    <hr></hr>
+    <img alt="here is your logo" src={digitdarkthemeImg}></img>
+  </React.Fragment>
+);
+
+export const DarkThemeHtmlTooltip = Template.bind({});
+DarkThemeHtmlTooltip.args = {
+  content: htmlTooltipForDarktheme,
+  arrow: false,
+  placement: "bottom",
+  style: {},
+  className: "",
+  header: "Header",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+};
+
+export const DarkThemeHtmlTooltipWithArrow = Template.bind({});
+DarkThemeHtmlTooltipWithArrow.args = {
+  content: htmlTooltipForDarktheme,
+  arrow: true,
+  placement: "bottom",
+  style: {},
+  className: "",
+};
+
+export const LightThemeBasic = Template.bind({});
+LightThemeBasic.args = {
+  content: "Tooltip",
+  arrow: false,
+  placement: "bottom",
+  style: {},
+  className: "",
+  header: "",
+  description: "",
+  theme: "light",
+};
+
+export const LightThemeMaxLabel = Template.bind({});
+LightThemeMaxLabel.args = {
+  content:
+    "Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+  arrow: false,
+  placement: "bottom",
+  style: {},
+  className: "",
+  theme: "light",
+};
+
+export const LightThemeWithArrow = Template.bind({});
+LightThemeWithArrow.args = {
+  content: "Tooltip",
+  arrow: true,
+  placement: "bottom",
+  style: {},
+  className: "",
+  theme: "light",
+};
+
+export const LightThemeMaxLabelWithArrow = Template.bind({});
+LightThemeMaxLabelWithArrow.args = {
+  content:
+    "Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+  arrow: true,
+  placement: "bottom",
+  style: {},
+  className: "",
+  theme: "light",
+};
+
+export const LightThemeCustomStyles = Template.bind({});
+LightThemeCustomStyles.args = {
+  content: "Tooltip",
+  arrow: false,
+  placement: "bottom",
+  style: {
+    backgroundColor: "#FFFFFF",
+    border: "3px solid black",
+    width: "200px",
+    textAlign: "center",
+  },
+  className: "",
+  theme: "light",
+};
+
+export const LightThemeWithHeaderAndDescription = Template.bind({});
+LightThemeWithHeaderAndDescription.args = {
+  content: "Tooltip",
+  arrow: false,
+  placement: "bottom",
+  style: {},
+  className: "",
+  header: "Header",
+  theme: "light",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+};
+
+const digitlightthemeImg = getImageUrl("DIGIT_LIGHT");
+
+const htmlTooltipForLighttheme = (
+  <React.Fragment>
+    {"And here's some amazing content It's very engaging. Right?"}
+    <hr></hr>
+    <img alt="here is your logo" src={digitlightthemeImg}></img>
+  </React.Fragment>
+);
+
+export const LightThemeHtmlTooltip = Template.bind({});
+LightThemeHtmlTooltip.args = {
+  content: htmlTooltipForLighttheme,
+  arrow: false,
+  placement: "bottom",
+  style: {},
+  className: "",
+  header: "Header",
+  theme: "light",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ",
+};
+
+export const LightThemeHtmlTooltipWithArrow = Template.bind({});
+LightThemeHtmlTooltipWithArrow.args = {
+  content: htmlTooltipForLighttheme,
+  arrow: true,
+  placement: "bottom",
+  style: {},
+  className: "",
+  theme: "light",
+};
diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js
index 3098a46f2d..9a1a4f009b 100644
--- a/react/ui-components/src/index.js
+++ b/react/ui-components/src/index.js
@@ -98,7 +98,8 @@ import {
   TableFooter,
   TableBody,
   TableRow,
-  TableCell
+  TableCell,
+  NestedTable
 } from "./atoms";
 
 import { FieldComposer, FieldController, Fields, FormComposerV2, Modal, UploadFileComposer, FieldV1, InboxSearchComposer, ResultsTable } from "./hoc";
@@ -125,7 +126,9 @@ import {
   MenuCardWrapper,
   TableMolecule,
   MetricCard,
-  FormCard
+  FormCard,
+  FilterCard,
+  ViewCard
 } from "./molecules";
 
 // import { initCoreLibraries } from "@egovernments/digit-ui-libraries-core";
@@ -223,6 +226,8 @@ export {
   LandingPageCard,
   MetricCard,
   FormCard,
+  FilterCard,
+  ViewCard,
   TableMolecule,
   MenuCard,
   MenuCardWrapper,
@@ -267,5 +272,6 @@ export {
   TableFooter,
   TableBody,
   TableRow,
-  TableCell
+  TableCell,
+  NestedTable
 };
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/CustomDropdown.js b/react/ui-components/src/molecules/CustomDropdown.js
index 195e1cc3f7..7bfc0ce68e 100644
--- a/react/ui-components/src/molecules/CustomDropdown.js
+++ b/react/ui-components/src/molecules/CustomDropdown.js
@@ -50,6 +50,7 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyl
             errorStyle={errorStyle}
             additionalWrapperClass={additionalWrapperClass}
             innerStyles={config?.innerStyles}
+            alignVertical={config?.alignVertical}
           />
         );
       case "dropdown":
diff --git a/react/ui-components/src/molecules/FilterCard.js b/react/ui-components/src/molecules/FilterCard.js
new file mode 100644
index 0000000000..f0911bc01d
--- /dev/null
+++ b/react/ui-components/src/molecules/FilterCard.js
@@ -0,0 +1,247 @@
+import React, { useState, useEffect, useRef, Fragment } from "react";
+import { SVG } from "../atoms/SVG";
+import PropTypes from 'prop-types';
+import Button from "../atoms/Button";
+
+const FilterCard = ({
+  title,
+  titleIcon,
+  children,
+  primaryActionLabel,
+  secondaryActionLabel,
+  onPrimaryPressed,
+  onSecondaryPressed,
+  layoutType = "horizontal",
+  equalWidthButtons,
+  addClose,
+  onClose,
+  className,
+  style,
+  hideIcon,
+  isPopup = false,
+  onOverlayClick,
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const childrenWrapRef = useRef(null);
+  const [isClosing, setIsClosing] = useState(false);
+
+  const [isMobileView, setIsMobileView] = useState(
+    window.innerWidth / window.innerHeight <= 9 / 16
+  );
+
+  const checkOverflow = () => {
+    if (childrenWrapRef.current) {
+      const isOverflow =
+        childrenWrapRef.current.scrollHeight >
+        childrenWrapRef.current.clientHeight;
+      setIsOverflowing(isOverflow);
+    }
+  };
+
+  const onResize = () => {
+    if (window.innerWidth / window.innerHeight <= 9 / 16) {
+      if (!isMobileView) {
+        setIsMobileView(true);
+      }
+    } else {
+      if (isMobileView) {
+        setIsMobileView(false);
+      }
+    }
+    checkOverflow();
+  };
+
+  useEffect(() => {
+    const handleScroll = () => checkOverflow();
+    const childrenWrap = childrenWrapRef.current;
+
+    if (childrenWrap) {
+      childrenWrap.addEventListener("scroll", handleScroll);
+      checkOverflow();
+    }
+
+    return () => {
+      if (childrenWrap) {
+        childrenWrap.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [children]);
+
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+
+    checkOverflow();
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+    }, 300);
+  };
+
+  const handleOverlayClick = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onOverlayClick();
+    }, 300);
+  };
+
+  const renderButtons = () =>
+    isMobileView || layoutType === "vertical" ? (
+      <div
+        className={`button-container ${layoutType || ""} ${
+          equalWidthButtons ? "equal-buttons" : ""
+        } ${isOverflowing ? "with-shadow" : ""}`}
+      >
+        {primaryActionLabel && onPrimaryPressed && (
+          <Button label={primaryActionLabel} onClick={onPrimaryPressed} />
+        )}
+
+        {secondaryActionLabel && onSecondaryPressed && (
+          <Button
+            label={secondaryActionLabel}
+            onClick={onSecondaryPressed}
+            variation="teritiary"
+          />
+        )}
+      </div>
+    ) : (
+      <div
+        className={`button-container ${layoutType || ""} ${
+          equalWidthButtons ? "equal-buttons" : ""
+        }`}
+      >
+        {secondaryActionLabel && onSecondaryPressed && (
+          <Button
+            label={secondaryActionLabel}
+            onClick={onSecondaryPressed}
+            variation="teritiary"
+          />
+        )}
+        {primaryActionLabel && onPrimaryPressed && (
+          <Button label={primaryActionLabel} onClick={onPrimaryPressed} />
+        )}
+      </div>
+    );
+
+  const renderContent = () => (
+    <div
+      ref={childrenWrapRef}
+      className={`content-container ${isOverflowing ? "with-shadow" : ""}`}
+    >
+      {children}
+      {(secondaryActionLabel || primaryActionLabel) &&
+        layoutType === "horizontal" &&
+        ((isPopup && !isMobileView) || !isPopup) &&
+        renderButtons()}
+    </div>
+  );
+
+  const renderHeader = () => (
+    <div
+      className={`filter-header ${isOverflowing ? "with-shadow" : ""} ${
+        !secondaryActionLabel && !primaryActionLabel ? "without-footer" : ""
+      }`}
+    >
+      <div className="title-container">
+        {!hideIcon ? (
+          titleIcon ? (
+            titleIcon
+          ) : (
+            <SVG.FilterAlt
+              width={"32px"}
+              height={"32px"}
+              fill={"#C84C0E"}
+            ></SVG.FilterAlt>
+          )
+        ) : null}
+
+        {title && <div className="filter-title">{title}</div>}
+        {addClose && (
+          <div className="close-icon" onClick={handleClose}>
+            <SVG.Close width={"32px"} height={"32px"} fill={"#363636"} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  if (isPopup) {
+    return (
+      <div
+        className={`digit-filter-card-popup-overlay`}
+        tabIndex={0}
+        onClick={() => handleOverlayClick()}
+      >
+        <div
+          className={`digit-filter-card-popup-wrapper ${
+            layoutType === "horizontal"
+              ? "filter-card-horizontal"
+              : "filter-card-vertical"
+          } ${isClosing ? "closing" : ""} ${className ? className : ""}`}
+          style={style}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {(title || titleIcon || addClose) && renderHeader()}
+
+          {layoutType === "horizontal" && !isMobileView ? (
+            <div className="content-action-wrapper">{renderContent()}</div>
+          ) : (
+            <>
+              {renderContent()}
+              {(secondaryActionLabel || primaryActionLabel) && renderButtons()}
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (layoutType === "vertical") {
+    return (
+      <div
+        className={`filter-card filter-card-vertical ${className || ""}`}
+        style={style}
+      >
+        {(title || titleIcon || addClose) && renderHeader()}
+        {renderContent()}
+        {(secondaryActionLabel || primaryActionLabel) && renderButtons()}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={`filter-card filter-card-horizontal ${className || ""}`}
+      style={style}
+    >
+      {(title || titleIcon || addClose) && renderHeader()}
+      <div className="content-action-wrapper">{renderContent()}</div>
+    </div>
+  );
+};
+
+FilterCard.propTypes = {
+  title: PropTypes.string,
+  titleIcon: PropTypes.element,
+  children: PropTypes.node.isRequired,
+  primaryActionLabel: PropTypes.string,
+  secondaryActionLabel: PropTypes.string,
+  onPrimaryPressed: PropTypes.func,
+  onSecondaryPressed: PropTypes.func,
+  layoutType: PropTypes.oneOf(['horizontal', 'vertical']),
+  equalWidthButtons: PropTypes.bool,
+  addClose: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  hideIcon: PropTypes.bool,
+  isPopup: PropTypes.bool,
+  onOverlayClick: PropTypes.func,
+};
+
+export default FilterCard;
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/FormCard.js b/react/ui-components/src/molecules/FormCard.js
index 034c9c0a10..5e5575114f 100644
--- a/react/ui-components/src/molecules/FormCard.js
+++ b/react/ui-components/src/molecules/FormCard.js
@@ -1,7 +1,6 @@
-import React, { Children } from "react";
+import React, { Children ,useState,useEffect} from "react";
 import PropTypes from "prop-types";
 import { useLocation } from "react-router-dom";
-import { Card, StringManipulator, Divider, CustomSVG } from "../atoms";
 
 const FormCard = ({
   type,
@@ -15,6 +14,33 @@ const FormCard = ({
   footerData,
   ...props
 }) => {
+
+  const [isMobileView, setIsMobileView] = 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);
+      }
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      onResize();
+    });
+    return () => {
+      window.addEventListener("resize", () => {
+        onResize();
+      });
+    };
+  });
+
+
   // Parse the layout prop to determine rows and columns
   const [rows, columns] = layout
   ? layout.split("*").map(num => {
@@ -62,10 +88,10 @@ const FormCard = ({
           !footerData || footerData.length <= 0 || footerData === undefined
             ? "withoutFooter"
             : ""
-        }`}
-        style={gridStyles}
+        } ${withDivider ? "with-divider" : ""}`}
+        style={isMobileView ? {...style} : gridStyles}
       >
-        {childrenWithDividers}
+        {!isMobileView ? childrenWithDividers : children}
       </div>
       {footerData && (
         <div className={`digit-form-card-footer`}>
diff --git a/react/ui-components/src/molecules/LandingPageCard.js b/react/ui-components/src/molecules/LandingPageCard.js
index 85bdd4f90e..e3bfc4f46f 100644
--- a/react/ui-components/src/molecules/LandingPageCard.js
+++ b/react/ui-components/src/molecules/LandingPageCard.js
@@ -11,7 +11,7 @@ const LandingPageCard = ({
   metrics = [],
   links = [],
   className,
-  styles,
+  style,
   moduleAlignment,
   hideDivider,
   metricAlignment,
@@ -38,7 +38,7 @@ const LandingPageCard = ({
       className={`digit-landing-page-card ${
         moduleAlignment || ""
       } ${className}`}
-      style={styles}
+      style={style}
     >
       <div
         className={`icon-module-header ${moduleAlignment || ""} ${
@@ -173,7 +173,7 @@ LandingPageCard.propTypes = {
     })
   ),
   className: PropTypes.string,
-  styles: PropTypes.object,
+  style: PropTypes.object,
   hideDivider: PropTypes.bool,
   iconBg: PropTypes.bool,
   onMetricClick: PropTypes.func,
@@ -183,7 +183,7 @@ LandingPageCard.defaultProps = {
   metris: [],
   links: [],
   className: "",
-  styles: {},
+  style: {},
   moduleAlignment: "right",
   metricAlignment: "left",
   moduleName: "",
diff --git a/react/ui-components/src/molecules/LandingPageWrapper.js b/react/ui-components/src/molecules/LandingPageWrapper.js
index 40d7dac2c9..8e0b3a4dce 100644
--- a/react/ui-components/src/molecules/LandingPageWrapper.js
+++ b/react/ui-components/src/molecules/LandingPageWrapper.js
@@ -1,11 +1,12 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState ,useLayoutEffect} from "react";
 import PropTypes from "prop-types";
 
 const LandingPageWrapper = ({ children, className, styles }) => {
   const wrapperRef = useRef(null);
-  const [isMobileView, setIsMobileView] = React.useState(
+  const [isMobileView, setIsMobileView] = useState(
     window.innerWidth / window.innerHeight <= 9 / 16
   );
+
   const onResize = () => {
     if (window.innerWidth / window.innerHeight <= 9 / 16) {
       if (!isMobileView) {
@@ -17,57 +18,63 @@ const LandingPageWrapper = ({ children, className, styles }) => {
       }
     }
   };
-  React.useEffect(() => {
-    window.addEventListener("resize", () => {
-      onResize();
-    });
-    return () => {
-      window.addEventListener("resize", () => {
-        onResize();
-      });
-    };
-  });
-  const [maxWidth, setMaxWidth] = useState(0);
-  const [maxHeight, setMaxHeight] = useState(0);
 
-  useEffect(() => {
-    if (wrapperRef.current) {
-      // Getting all child card elements
-      const cardElements = Array.from(wrapperRef.current.children);
+  useLayoutEffect(() => {
+    const updateCardDimensions = () => {
+      const cards = Array.from(wrapperRef.current.children);
+      if (isMobileView) {
+        // In mobile view, set all cards to 100% width
+        cards.forEach(card => {
+          card.style.width = "100%";
+          card.style.height = "auto"; // Adjust height accordingly
+        });
+      } else {
+        let maxWidth = 0;
+        let maxHeight = 0;
+
+        // Calculating the maximum width and height
+        cards.forEach(card => {
+          const cardWidth = card.offsetWidth;
+          const cardHeight = card.offsetHeight;
+          if (cardWidth > maxWidth) {
+            maxWidth = cardWidth;
+          }
+          if (cardHeight > maxHeight) {
+            maxHeight = cardHeight;
+          }
+        });
 
-      // Calculating the maximum width of the cards
-      const maxCardWidth = Math.max(
-        ...cardElements.map((child) => child.getBoundingClientRect().width)
-      );
+        // Applying the maximum width and height for all cards
+        cards.forEach(card => {
+          card.style.width = `${maxWidth}px`;
+          card.style.height = `${maxHeight}px`;
+        });
+      }
+    };
 
-      // Calculating the maximum height of the cards
-      const maxCardHeight = Math.max(
-        ...cardElements.map((child) => child.getBoundingClientRect().height)
-      );
+    // Initial call to set card dimensions
+    updateCardDimensions();
 
-      // Setting the maximum width to the state
-      setMaxWidth(maxCardWidth);
+    // Set up resize and load listeners
+    window.addEventListener("resize", onResize);
+    window.addEventListener("resize", updateCardDimensions);
+    window.addEventListener("load", updateCardDimensions);
 
-      // Setting the maximum height to the state
-      setMaxHeight(maxCardHeight);
-    }
-  }, [children]); // Recalculating when children change
+    // Cleanup listeners on unmount
+    return () => {
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("resize", updateCardDimensions);
+      window.removeEventListener("load", updateCardDimensions);
+    };
+  }, [isMobileView, children]);
 
   return (
     <div
-      className={`digit-landing-page-wrapper ${className} ${isMobileView ? "mobile" : ""}`}
+      className={`digit-landing-page-wrapper ${className}`}
       style={styles}
       ref={wrapperRef}
     >
-      {React.Children.map(children, (child) =>
-        React.cloneElement(child, {
-          style: {
-            ...child.props.style,
-            width: !isMobileView ? `${maxWidth}px` : "100%",
-            height: `${maxHeight}px`,
-          },
-        })
-      )}
+      {children}
     </div>
   );
 };
diff --git a/react/ui-components/src/molecules/TableMolecule.js b/react/ui-components/src/molecules/TableMolecule.js
index e30c395d2a..984a527cca 100644
--- a/react/ui-components/src/molecules/TableMolecule.js
+++ b/react/ui-components/src/molecules/TableMolecule.js
@@ -19,6 +19,7 @@ import { SVG } from "../atoms";
 import { CustomSVG } from "../atoms";
 import { StringManipulator } from "../atoms";
 import Button from "../atoms/Button";
+import NestedTable from "../atoms/NestedTable";
 
 const TableMolecule = ({
   headerData,
@@ -69,6 +70,7 @@ const TableMolecule = ({
 }) => {
   const { t } = useTranslation();
   const [currentPage, setCurrentPage] = useState(1);
+  const [expandedRows, setExpandedRows] = useState([]);
   const [rowsPerPage, setRowsPerPage] = useState(
     pagination?.initialRowsPerPage
   );
@@ -83,6 +85,8 @@ const TableMolecule = ({
   );
   const [sortedColumnIndex, setSortedColumnIndex] = useState(null);
   const [sortedRows, setSortedRows] = useState([]);
+  const [tableData, setTableData] = useState([]);
+
 
   // Pagination Logic
   const indexOfLastRow = currentPage * rowsPerPage;
@@ -122,6 +126,31 @@ const TableMolecule = ({
     // Reset to first page when changing rows per page
   };
 
+  const toggleRowExpansion = (rowIndex) => {
+    setExpandedRows((prev) =>
+      prev.includes(rowIndex)
+        ? prev.filter((index) => index !== rowIndex)
+        : [...prev, rowIndex]
+    );
+  };
+
+  const updateTableData = (rowIndex, columnIndex, value) => {
+    setTableData((prevData) => {
+      const updatedData = [...prevData];
+      // Find the row by rowIndex
+      let row = updatedData.find(row => row.rowIndex === rowIndex);
+      if (!row) {
+        // If row doesn't exist, create a new row with this rowIndex
+        row = { rowIndex, values: {} };
+        updatedData.push(row);
+      }
+      // Update the column value in the row
+      row.values[columnIndex] = value;
+      return updatedData;
+    });
+  };
+  
+
   useEffect(() => {
     setSortedRows([...rows]);
   }, [rows]);
@@ -261,7 +290,11 @@ const TableMolecule = ({
                           ? false
                           : true
                       }
-                      isIntermediate={selectedRows && selectedRows?.length>0 && selectedRows.length !== rows?.length}
+                      isIntermediate={
+                        selectedRows &&
+                        selectedRows?.length > 0 &&
+                        selectedRows.length !== rows?.length
+                      }
                       mainClassName={"table-checkbox"}
                     />
                   </TableCell>
@@ -437,93 +470,146 @@ const TableMolecule = ({
             {/* 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)
+                <React.Fragment key={rowIndex}>
+                  <TableRow
+                    key={rowIndex}
+                    className={`${
+                      styles?.withAlternateBg ? "withAlternateBg" : ""
+                    } ${
+                      onRowClick || row?.[headerData?.length]?.nestedData
+                        ? "addHover"
+                        : ""
+                    } ${selectedRows?.includes(rowIndex) ? "selected" : ""}`}
+                    onClick={() => {
+                      if (row?.[headerData?.length]?.nestedData)
+                        toggleRowExpansion(rowIndex);
+                      if (onRowClick) onRowClick(row, rowIndex);
+                    }}
+                  >
+                    {selection?.addCheckbox && (
+                      <TableCell
+                        isHeader={false}
+                        className={`fixed-columns ${
+                          styles?.withRowDivider &&
+                          !expandedRows.includes(rowIndex)
+                            ? "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 &&
+                          !expandedRows.includes(rowIndex)
+                            ? "withRowDivider"
+                            : ""
+                        } ${
+                          styles?.withColumnDivider ? "withColumnDivider" : ""
+                        } ${onRowClick ? "addHover" : ""}`}
+                        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] = [];
                           }
-                          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}
+                        updateTableData={updateTableData}
+                        tableData={tableData}
+                        rowIndex={rowIndex}
+                        cellIndex={cellIndex}
+                      ></TableCell>
+                    ))}
+                    {row
+                      ?.slice(frozenColumns, headerData.length)
+                      ?.map((cell, cellIndex) => (
+                        <TableCell
+                          key={cellIndex + frozenColumns}
+                          isHeader={false}
+                          isFooter={false}
+                          className={`scrollable-columns  ${
+                            styles?.withRowDivider &&
+                            !expandedRows.includes(rowIndex)
+                              ? "withRowDivider"
+                              : ""
+                          } ${
+                            styles?.withColumnDivider ? "withColumnDivider" : ""
+                          }`}
+                          cellData={cell}
+                          columnType={
+                            headerData[cellIndex + frozenColumns]?.type
+                          }
+                          accessor={
+                            headerData && headerData.length > 0
+                              ? headerData[cellIndex + frozenColumns]?.accessor
+                              : null
+                          }
+                          updateTableData={updateTableData}
+                          tableData={tableData}
+                          rowIndex={rowIndex}
+                          cellIndex={cellIndex}
+                        ></TableCell>
+                      ))}
+                  </TableRow>
+                  {expandedRows.includes(rowIndex) && (
+                    <TableRow
+                      className={`${
+                        styles?.withAlternateBg ? "withAlternateBg" : ""
+                      } ${onRowClick ? "addHover" : ""} ${
+                        selectedRows?.includes(rowIndex) ? "selected" : ""
+                      } nestedRow`}
+                    >
+                      <TableCell
+                        className={`scrollable-columns  ${
+                          styles?.withRowDivider ? "withRowDivider" : ""
+                        } ${
+                          styles?.withColumnDivider ? "withColumnDivider" : ""
+                        }`}
+                        colSpan={headerData?.length}
+                        columnType={"custom"}
+                        cellData={
+                          <NestedTable
+                            nestedData={row}
+                            toggleRowExpansion={toggleRowExpansion}
+                            rowIndex={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>
+                      ></TableCell>
+                    </TableRow>
+                  )}
+                </React.Fragment>
               ))}
             </TableBody>
             {/* Dynamic Table Footer with Pagination */}
@@ -762,7 +848,7 @@ TableMolecule.defaultProps = {
     isStickyFooter: false,
     addStickyFooter: false,
   },
-  actions:[]
+  actions: [],
 };
 
 export default TableMolecule;
diff --git a/react/ui-components/src/molecules/ViewCard.js b/react/ui-components/src/molecules/ViewCard.js
new file mode 100644
index 0000000000..3c1ec3ad6f
--- /dev/null
+++ b/react/ui-components/src/molecules/ViewCard.js
@@ -0,0 +1,156 @@
+import React, { Fragment } from "react";
+import { Card } from "../atoms";
+import { ViewCardFieldPair } from "../atoms";
+import { Divider } from "../atoms";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+const ViewCard = ({
+  className,
+  style,
+  type,
+  sections,
+  withDivider,
+  layout,
+  withSectionDivider,
+  showSectionsAsMultipleCards,
+  asSeperateCards,
+}) => {
+  const isTwoColumnLayout = layout === 2;
+  const { t } = useTranslation();
+
+  const renderSectionHeader = (section) => {
+    if (section?.header || section?.subHeader) {
+      return (
+        <div>
+          {section?.header && (
+            <div className="digit-view-card-header">{section?.header}</div>
+          )}
+          {section?.subHeader && (
+            <div className="digit-view-card-subheader">
+              {section?.subHeader}
+            </div>
+          )}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const renderFieldPairs = (fieldPairs) => {
+    return fieldPairs?.map((pair, index) => (
+      <Fragment key={index}>
+        <ViewCardFieldPair
+          label={t(pair?.label)}
+          value={t(pair?.value)}
+          inline={pair?.inline}
+          className={pair?.className}
+          style={pair?.style}
+        />
+        {withDivider && layout === 1 && index < fieldPairs.length - 1 && (
+          <Divider />
+        )}
+        {withDivider && layout === 2 && (index + 1) % 2 !== 0 && (
+          <div
+            className="vertical-viewcard-divider"
+            style={{
+              left: `calc(100% / ${2} * ${(index % 2) + 1})`,
+            }}
+          />
+        )}
+      </Fragment>
+    ));
+  };
+
+  const renderSectionContent = (section, sectionIndex) => (
+    <Fragment key={sectionIndex}>
+      {renderSectionHeader(section)}
+      <div
+        className={`view-card-field-pairs ${
+          isTwoColumnLayout ? "two-column-layout" : ""
+        } ${withDivider ? "with-divider" : ""}`}
+      >
+        {section?.type === "DATA" && renderFieldPairs(section?.fieldPairs)}
+      </div>
+      {withSectionDivider && sectionIndex < sections.length - 1 && (
+        <Divider variant="medium" />
+      )}
+    </Fragment>
+  );
+
+  // When asSeperateCards is true, render each section inside its own Card
+  if (asSeperateCards) {
+    return (
+      <div className="seperate-card-sections">
+        {sections?.map((section, sectionIndex) => (
+          <Card key={sectionIndex} className={`digit-view-card`}>
+            {renderSectionHeader(section)}
+            <div
+              className={`view-card-field-pairs ${
+                isTwoColumnLayout ? "two-column-layout" : ""
+              }`}
+            >
+              {renderFieldPairs(section.fieldPairs)}
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+
+  if (showSectionsAsMultipleCards && !asSeperateCards) {
+    // When showSectionsAsMultipleCards is true, render each section inside its own Card
+    return (
+      <Card
+        className={`digit-view-card ${className || ""}`}
+        style={style}
+        type={type}
+      >
+        {sections?.map((section, sectionIndex) => (
+          <Card
+            key={sectionIndex}
+            className={`digit-view-card ${className || ""}`}
+            style={style}
+            type={section?.cardType || "primary"}
+          >
+            {renderSectionHeader(section)}
+            <div
+              className={`view-card-field-pairs ${
+                isTwoColumnLayout ? "two-column-layout" : ""
+              }`}
+            >
+              {renderFieldPairs(section?.fieldPairs)}
+            </div>
+          </Card>
+        ))}
+      </Card>
+    );
+  }
+  // When showSectionsAsMultipleCards is false, render sections inside a single Card
+  return (
+    <Card
+      className={`digit-view-card ${className || ""}`}
+      style={style}
+      type={type}
+    >
+      {sections?.map((section, sectionIndex) =>
+        renderSectionContent(section, sectionIndex)
+      )}
+    </Card>
+  );
+};
+
+ViewCard.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  type: PropTypes.string,
+  sections: PropTypes.array.isRequired, 
+  withDivider: PropTypes.bool,
+  layout: PropTypes.number, 
+  withSectionDivider: PropTypes.bool,
+  showSectionsAsMultipleCards: PropTypes.bool,
+  asSeperateCards: PropTypes.bool,
+};
+
+export default ViewCard;
diff --git a/react/ui-components/src/molecules/index.js b/react/ui-components/src/molecules/index.js
index 855c150801..fcaee3cb00 100644
--- a/react/ui-components/src/molecules/index.js
+++ b/react/ui-components/src/molecules/index.js
@@ -24,6 +24,8 @@ import MenuCardWrapper from "./MenuCardWrapper";
 import TableMolecule from "./TableMolecule";
 import MetricCard from "./MetricCard";
 import FormCard from "./FormCard";
+import FilterCard from "./FilterCard";
+import ViewCard from "./ViewCard";
 
 export {
   ApiDropdown,
@@ -51,5 +53,7 @@ export {
   MenuCardWrapper,
   TableMolecule,
   MetricCard,
-  FormCard
+  FormCard,
+  FilterCard,
+  ViewCard
 };
diff --git a/react/ui-components/src/molecules/stories/Example.stories.js b/react/ui-components/src/molecules/stories/Example.stories.js
new file mode 100644
index 0000000000..5348a48caf
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/Example.stories.js
@@ -0,0 +1,217 @@
+import React from "react";
+import { LabelFieldPair, TextBlock } from "../../atoms";
+import { Card } from "../../atoms";
+import { ViewCardFieldPair } from "../../atoms";
+import { Button } from "../../atoms";
+import { TextInput } from "../../atoms";
+
+export default {
+  title: "Molecules/Card/Example",
+  component: Card,
+  argTypes: {
+    className: {
+      control: "text",
+    },
+    style: {
+      control: { type: "object" },
+    },
+    children: {
+      control: "object",
+    },
+    type: { control: "select", options: ["primary", "secondary"] },
+    onClick: {
+      control: "function",
+    },
+    props: {
+      control: "object",
+    },
+  },
+};
+
+const Template = (args) => <Card {...args} />;
+
+const options = [
+  { code: "MALE", name: "MALE" },
+  { code: "FEMALE", name: "FEMALE" },
+  { code: "TRANSGENDER", name: "TRANSGENDER" },
+];
+
+export const ExampleCard = () => (
+  <Card
+    type={"primary"}
+    variant="viewcard"
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "64px",
+    }}
+  >
+    <Card
+      type={"primary"}
+      style={{
+        boxShadow: "none",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        padding: "0px",
+      }}
+    >
+      <TextBlock header="Heading" headerClasName=""></TextBlock>
+      <Card
+        type={"primary"}
+        style={{
+          boxShadow: "none",
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          padding: "0px",
+        }}
+      >
+        <TextBlock subHeader="Details" subHeaderClasName=""></TextBlock>
+        <ViewCardFieldPair
+          label={"Start Date"}
+          value={"12 August 2023"}
+          inline={true}
+        ></ViewCardFieldPair>
+        <ViewCardFieldPair
+          label={"Birthday"}
+          value={"12 August 2023"}
+          inline={false}
+        ></ViewCardFieldPair>
+      </Card>
+    </Card>
+    <Card
+      type={"primary"}
+      style={{
+        boxShadow: "none",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        padding: "0px",
+      }}
+    >
+      <TextBlock
+        subHeader="Add your start and end dates for cycles"
+        subHeaderClasName=""
+      ></TextBlock>
+      <Card type={"secondary"}>
+        <div
+          style={{
+            maxWidth: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "row",
+            gap: "8px",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              flexGrow: 1,
+            }}
+          >
+            <TextBlock body="Attribute" bodyClasName=""></TextBlock>
+            <TextInput type="text"></TextInput>
+          </div>
+          <div
+            style={{
+              flexGrow: 1,
+            }}
+          >
+            <TextBlock body="Operator" bodyClasName=""></TextBlock>
+            <TextInput type="text"></TextInput>
+          </div>
+          <div
+            style={{
+              flexGrow: 1,
+            }}
+          >
+            <TextBlock body="Value" bodyClasName=""></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>
+    </Card>
+    <Card
+      type={"primary"}
+      style={{
+        boxShadow: "none",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        padding: "0px",
+      }}
+    >
+      <TextBlock
+        subHeader="Add your start and end dates for cycles"
+        subHeaderClasName=""
+      ></TextBlock>
+      <LabelFieldPair
+        style={{
+          display: "flex",
+          gap: "24px",
+          alignItems: "center",
+          marginBottom: "0px",
+        }}
+      >
+        <TextBlock
+          body="Field 1"
+          bodyClasName=""
+          style={{ width: "100%" }}
+        ></TextBlock>
+        <TextInput type="text" placeholder={"Value"}></TextInput>
+      </LabelFieldPair>
+      <LabelFieldPair
+        style={{
+          display: "flex",
+          gap: "24px",
+          alignItems: "center",
+          marginBottom: "0px",
+        }}
+      >
+        <TextBlock
+          body="Field 2"
+          bodyClasName=""
+          style={{ width: "100%" }}
+        ></TextBlock>
+        <TextInput type="text" placeholder={"Value"}></TextInput>
+      </LabelFieldPair>
+      <LabelFieldPair
+        style={{
+          display: "flex",
+          gap: "24px",
+          alignItems: "center",
+          marginBottom: "0px",
+        }}
+      >
+        <TextBlock
+          body="Field 3"
+          bodyClasName=""
+          style={{ width: "100%" }}
+        ></TextBlock>
+        <TextInput type="text" placeholder={"Value"}></TextInput>
+      </LabelFieldPair>
+    </Card>
+  </Card>
+);
diff --git a/react/ui-components/src/molecules/stories/FilterCard.stories.js b/react/ui-components/src/molecules/stories/FilterCard.stories.js
new file mode 100644
index 0000000000..79523864a3
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/FilterCard.stories.js
@@ -0,0 +1,600 @@
+import React, { useState, useEffect } from "react";
+import FilterCard from "../FilterCard";
+import { LabelFieldPair } from "../../atoms";
+import { RadioButtons } from "../../atoms";
+import { TextBlock } from "../../atoms";
+import { TextInput } from "../../atoms";
+import { Dropdown } from "../../atoms";
+import { CheckBox } from "../../atoms";
+import { MultiSelectDropdown } from "../../atoms";
+import { Button } from "../../atoms";
+
+// Story metadata
+export default {
+  title: "Molecules/Card/FilterCard",
+  component: FilterCard,
+  argTypes: {
+    title: { control: "text" },
+    titleIcon: { control: "text" },
+    primaryActionLabel: { control: "text" },
+    secondaryActionLabel: { control: "text" },
+    layoutType: {
+      control: {
+        type: "select",
+        options: ["horizontal", "vertical"],
+      },
+    },
+    equalWidthButtons: { control: "boolean" },
+    addClose: { control: "boolean" },
+    className: { control: "text" },
+    style: { control: "object" },
+    hideIcon: { control: "boolean" },
+    isPopup: { control: "boolean" },
+    onClose: { action: "onChange" },
+    onOverlayClick: {
+      control: "function",
+    }
+  },
+};
+
+// Template for the story
+const Template = (args) => <FilterCard {...args} />;
+
+const genderOptions = [
+  { code: "M", name: "Male" },
+  { code: "F", name: "Female" },
+  { code: "O", name: "Others" },
+];
+
+const children = [
+  <LabelFieldPair vertical={true}>
+    <TextBlock body={"Name"}></TextBlock>
+    <TextInput type="text"></TextInput>
+  </LabelFieldPair>,
+  <LabelFieldPair vertical={true}>
+    <TextBlock body={"Value"}></TextBlock>
+    <TextInput type="text"></TextInput>
+  </LabelFieldPair>,
+  <LabelFieldPair vertical={true}>
+    <TextBlock body={"Gender"}></TextBlock>
+    <RadioButtons
+      alignVertical={true}
+      options={genderOptions}
+      optionsKey="name"
+      name="gender"
+      onSelect={(e) => {
+        console.log(e);
+      }}
+      style={{
+        width: "100%",
+      }}
+    />
+  </LabelFieldPair>,
+];
+
+const horizontalChildren = [
+  <LabelFieldPair vertical={true}>
+    <TextBlock body={"Name"}></TextBlock>
+    <TextInput type="text"></TextInput>
+  </LabelFieldPair>,
+  <LabelFieldPair vertical={true}>
+    <TextBlock body={"Value"}></TextBlock>
+    <TextInput type="text"></TextInput>
+  </LabelFieldPair>
+];
+
+export const VeritcalDefault = Template.bind({});
+VeritcalDefault.args = {
+  title: "Filter",
+  addClose: false,
+  children: children,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "vertical",
+  equalWidthButtons: true,
+  hideIcon: false,
+};
+
+export const VerticalWithClose = Template.bind({});
+VerticalWithClose.args = {
+  title: "Filter",
+  addClose: true,
+  children: children,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "vertical",
+  equalWidthButtons: true,
+  hideIcon: false,
+  onClose: (e) => {
+    console.log(e);
+  },
+};
+
+export const VerticalWithoutHeaderAndFooter = Template.bind({});
+VerticalWithoutHeaderAndFooter.args = {
+  addClose: false,
+  children: children,
+  layoutType: "vertical",
+  hideIcon: true,
+};
+
+export const VeritcalWithCustomStyles = Template.bind({});
+VeritcalWithCustomStyles.args = {
+  title: "Filter",
+  addClose: true,
+  children: children,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "vertical",
+  equalWidthButtons: true,
+  hideIcon: false,
+  style: {
+    width: "500px",
+    backgroundColor:"#fafafa",
+    border:"1px solid black"
+  },
+};
+
+export const VerticalWithCloseAsPopup = () => {
+  const [showPopup, setShowPopup] = useState(false);
+
+  const onClose = () => {
+    setShowPopup(false);
+  };
+
+  const onOverlayClick = () => {
+    setShowPopup(false);
+  };
+
+  const commonStyles = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    color: "#363636",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transform: "translate(-50%, -50%)",
+  };
+
+  return (
+    <>
+      <div style={commonStyles}>
+        {
+          <Button
+            label={"Show FilterCard"}
+            variation={"secondary"}
+            onClick={() => setShowPopup(true)}
+          />
+        }
+      </div>
+      {showPopup && (
+        <FilterCard
+          title={"Filter"}
+          addClose={true}
+          primaryActionLabel={"ApplyFilters"}
+          secondaryActionLabel={"Clear Filters"}
+          onPrimaryPressed={() => alert("Primary action clicked!")}
+          onSecondaryPressed={() => alert("Secondary action clicked!")}
+          layoutType={"vertical"}
+          equalWidthButtons={true}
+          hideIcon={false}
+          isPopup={true}
+          onClose={onClose}
+          onOverlayClick={onOverlayClick}
+        >
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Gender"}></TextBlock>
+            <RadioButtons
+              options={genderOptions}
+              optionsKey="name"
+              name="gender"
+              onSelect={(e) => {
+                console.log(e);
+              }}
+              style={{
+                width: "100%",
+              }}
+            />
+          </LabelFieldPair>
+        </FilterCard>
+      )}
+    </>
+  );
+};
+
+
+export const VerticalWithCloseAsPopupWithMoreChildren = () => {
+  const [showPopup, setShowPopup] = useState(false);
+
+  const onClose = () => {
+    setShowPopup(false);
+  };
+
+  const onOverlayClick = () => {
+    setShowPopup(false);
+  };
+
+  const commonStyles = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    color: "#363636",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transform: "translate(-50%, -50%)",
+  };
+
+  return (
+    <>
+      <div style={commonStyles}>
+        {
+          <Button
+            label={"Show FilterCard"}
+            variation={"secondary"}
+            onClick={() => setShowPopup(true)}
+          />
+        }
+      </div>
+      {showPopup && (
+        <FilterCard
+          title={"Filter"}
+          addClose={true}
+          primaryActionLabel={"ApplyFilters"}
+          secondaryActionLabel={"Clear Filters"}
+          onPrimaryPressed={() => alert("Primary action clicked!")}
+          onSecondaryPressed={() => alert("Secondary action clicked!")}
+          layoutType={"vertical"}
+          equalWidthButtons={true}
+          hideIcon={false}
+          isPopup={true}
+          onClose={onClose}
+          onOverlayClick={onOverlayClick}
+        >
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+        </FilterCard>
+      )}
+    </>
+  );
+};
+
+
+export const HorizontalDefault = Template.bind({});
+HorizontalDefault.args = {
+  title: "Filter",
+  addClose: false,
+  children: horizontalChildren,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "horizontal",
+  equalWidthButtons: false,
+  hideIcon: false,
+};
+
+export const HorizontalWithClose = Template.bind({});
+HorizontalWithClose.args = {
+  title: "Filter",
+  addClose: true,
+  children: horizontalChildren,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "horizontal",
+  equalWidthButtons: false,
+  hideIcon: false,
+};
+
+export const HorizontalWithoutHeader = Template.bind({});
+HorizontalWithoutHeader.args = {
+  children: horizontalChildren,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "horizontal",
+  equalWidthButtons: false,
+  hideIcon: true,
+};
+
+export const HorizontalWithCustomStyles = Template.bind({});
+HorizontalWithCustomStyles.args = {
+  title: "Filter",
+  addClose: true,
+  children: horizontalChildren,
+  primaryActionLabel: "ApplyFilters",
+  secondaryActionLabel: "Clear Filters",
+  onPrimaryPressed: () => alert("Primary action clicked!"),
+  onSecondaryPressed: () => alert("Secondary action clicked!"),
+  layoutType: "horizontal",
+  equalWidthButtons: false,
+  hideIcon: false,
+  style: {
+    width: "1000px",
+    backgroundColor:"#fafafa",
+    border:"1px solid black"
+  },
+};
+
+export const HorizontalWithCloseAsPopup = () => {
+  const [showPopup, setShowPopup] = useState(false);
+
+  const onClose = () => {
+    setShowPopup(false);
+  };
+
+  const onOverlayClick = () => {
+    setShowPopup(false);
+  };
+
+  const commonStyles = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    color: "#363636",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transform: "translate(-50%, -50%)",
+  };
+
+  return (
+    <>
+      <div style={commonStyles}>
+        {
+          <Button
+            label={"Show FilterCard"}
+            variation={"secondary"}
+            onClick={() => setShowPopup(true)}
+          />
+        }
+      </div>
+      {showPopup && (
+        <FilterCard
+          title={"Filter"}
+          addClose={true}
+          primaryActionLabel={"ApplyFilters"}
+          secondaryActionLabel={"Clear Filters"}
+          onPrimaryPressed={() => alert("Primary action clicked!")}
+          onSecondaryPressed={() => alert("Secondary action clicked!")}
+          layoutType={"horizontal"}
+          equalWidthButtons={true}
+          hideIcon={false}
+          isPopup={true}
+          onClose={onClose}
+          onOverlayClick={onOverlayClick}
+        >
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Gender"}></TextBlock>
+            <RadioButtons
+              options={genderOptions}
+              optionsKey="name"
+              name="gender"
+              onSelect={(e) => {
+                console.log(e);
+              }}
+              style={{
+                width: "100%",
+              }}
+            />
+          </LabelFieldPair>
+        </FilterCard>
+      )}
+    </>
+  );
+};
+
+
+export const HorizontalWithCloseAsPopupWithMoreChildren = () => {
+  const [showPopup, setShowPopup] = useState(false);
+
+  const onClose = () => {
+    setShowPopup(false);
+  };
+
+  const onOverlayClick = () => {
+    setShowPopup(false);
+  };
+
+  const commonStyles = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    color: "#363636",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transform: "translate(-50%, -50%)",
+  };
+
+  return (
+    <>
+      <div style={commonStyles}>
+        {
+          <Button
+            label={"Show FilterCard"}
+            variation={"secondary"}
+            onClick={() => setShowPopup(true)}
+          />
+        }
+      </div>
+      {showPopup && (
+        <FilterCard
+          title={"Filter"}
+          addClose={true}
+          primaryActionLabel={"ApplyFilters"}
+          secondaryActionLabel={"Clear Filters"}
+          onPrimaryPressed={() => alert("Primary action clicked!")}
+          onSecondaryPressed={() => alert("Secondary action clicked!")}
+          layoutType={"horizontal"}
+          equalWidthButtons={true}
+          hideIcon={false}
+          isPopup={true}
+          onClose={onClose}
+          onOverlayClick={onOverlayClick}
+        >
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name1"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value2"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name3"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value4"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name5"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value6"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name7"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value8"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name9"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value10"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name11"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value12"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name13"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value14"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name15"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value16"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name17"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value18"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Name19"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+          <LabelFieldPair vertical={true}>
+            <TextBlock body={"Value20"}></TextBlock>
+            <TextInput type="text"></TextInput>
+          </LabelFieldPair>
+        </FilterCard>
+      )}
+    </>
+  );
+};
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/stories/FormCard.stories.js b/react/ui-components/src/molecules/stories/FormCard.stories.js
index ff23ded653..cc0b43c9f1 100644
--- a/react/ui-components/src/molecules/stories/FormCard.stories.js
+++ b/react/ui-components/src/molecules/stories/FormCard.stories.js
@@ -14,7 +14,7 @@ import {
 import FormCard from "../FormCard";
 
 export default {
-  title: "Molecules/FormCard",
+  title: "Molecules/Card/FormCard",
   component: FormCard,
   argTypes: {
     className: {
@@ -27,7 +27,7 @@ export default {
       control: "object",
     },
     type: { control: "select", options: ["primary", "secondary"] },
-    layout:{control:"text"},
+    layout: { control: "text" },
     props: {
       control: "object",
     },
@@ -95,9 +95,7 @@ export const SimpleLayout = () => {
     width: isMobileView ? "100%" : "30%",
   };
 
-  const headerData = [
-    <TextBlock header={"Enter Details"}></TextBlock>
-  ]
+  const headerData = [<TextBlock header={"Enter Details"}></TextBlock>];
 
   const FooterChild1 = [
     <Button
@@ -112,13 +110,13 @@ export const SimpleLayout = () => {
 
   const FooterChild = [
     <Button
-    type={"button"}
-    size={"large"}
-    variation={"secondary"}
-    icon={""}
-    label="Cancel"
-    onClick={() => console.log("Clicked cancel")}
-  />,
+      type={"button"}
+      size={"large"}
+      variation={"secondary"}
+      icon={""}
+      label="Cancel"
+      onClick={() => console.log("Clicked cancel")}
+    />,
     <Button
       type={"submit"}
       size={"large"}
@@ -239,8 +237,7 @@ export const SimpleLayout = () => {
   );
 };
 
-
-export const WithLayout = () => {
+export const WithLayoutExample1 = () => {
   const [selectedGender, setSelectedGender] = useState(null);
   const [selectedGuardian, setSelectedGuardian] = useState(null);
   const [isSameAsPropertyAddress, setIsSameAsPropertyAddress] = useState(false);
@@ -297,18 +294,16 @@ export const WithLayout = () => {
     width: isMobileView ? "100%" : "30%",
   };
 
-  const headerData = [
-    <TextBlock header={"Enter Details"}></TextBlock>
-  ]
+  const headerData = [<TextBlock header={"Enter Details"}></TextBlock>];
   const FooterChild = [
     <Button
-    type={"button"}
-    size={"large"}
-    variation={"secondary"}
-    icon={""}
-    label="Cancel"
-    onClick={() => console.log("Clicked cancel")}
-  />,
+      type={"button"}
+      size={"large"}
+      variation={"secondary"}
+      icon={""}
+      label="Cancel"
+      onClick={() => console.log("Clicked cancel")}
+    />,
     <Button
       type={"submit"}
       size={"large"}
@@ -429,4 +424,187 @@ export const WithLayout = () => {
       ></CheckBox>
     </FormCard>
   );
-};
\ No newline at end of file
+};
+
+export const WithLayoutExample2 = () => {
+  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={"1*2"}
+      headerData={headerData}
+      footerData={FooterChild}
+      equalWidthButtons={true}
+      withDivider={false}
+    >
+      <Card type={"secondary"}>
+        <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={{
+              width: "100%",
+              justifyContent: "unset",
+              ...(isMobileView ? {} : { gap: "24px" }),
+            }}
+          />
+        </LabelFieldPair>
+        <LabelFieldPair>
+          <TextBlock style={textBlockStyle} body={"Mobile Number"}></TextBlock>
+          <TextInput
+            type="text"
+            populators={{
+              prefix: "+91",
+            }}
+          />
+        </LabelFieldPair>
+        <LabelFieldPair>
+          <TextBlock
+            style={textBlockStyle}
+            body={"Alternate Mobile number"}
+          ></TextBlock>
+          <TextInput
+            type="text"
+            populators={{
+              prefix: "+91",
+            }}
+          />
+        </LabelFieldPair>
+        <LabelFieldPair>
+          <TextBlock style={textBlockStyle} body={"Guardian"}></TextBlock>
+          <TextInput type="text"></TextInput>
+        </LabelFieldPair>
+      </Card>
+      <Card type={"secondary"}>
+        <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>
+        <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>
+      </Card>
+    </FormCard>
+  );
+};
diff --git a/react/ui-components/src/molecules/stories/LandingPageCard.stories.js b/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
index 0ae96062ab..b2ec6ba9d6 100644
--- a/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
+++ b/react/ui-components/src/molecules/stories/LandingPageCard.stories.js
@@ -10,7 +10,7 @@ export default {
     metrics: { control: "array" },
     links: { control: "array" },
     className: { control: "text" },
-    styles: { control: "object" },
+    style: { control: "object" },
     moduleAlignment: { control: "select", options: ["left", "right"] },
     metricAlignment: { control: "select", options: ["left", "centre"] },
     iconBg: { control: "boolean" },
@@ -69,7 +69,7 @@ const commonArgs = {
   ],
   className: "",
   metricAlignment: "left",
-  styles: {},
+  style: {},
   iconBg: false,
   onMetricClick: (metric, count) => {
     console.log(metric, count);
@@ -146,7 +146,7 @@ WithChildren.args = {
 export const WithCustomStyles = Template.bind({});
 WithCustomStyles.args = {
   ...commonArgs,
-  styles: {
+  style: {
     backgroundColor: "#fafafa",
     padding: "20px",
     borderRadius: "8px",
diff --git a/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js b/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
index cdf8736bf4..1052fa53f1 100644
--- a/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
+++ b/react/ui-components/src/molecules/stories/LandingPageWrapper.stories.js
@@ -9,11 +9,9 @@ export default {
 
 const Template = (args) => <LandingPageWrapper {...args} />;
 
-export const Example1 = Template.bind({});
-
-Example1.args = {
-  children: (
-    <>
+export const Example1 = () => {
+  return (
+    <LandingPageWrapper>
       <LandingPageCard
         icon="SupervisorAccount"
         moduleName="Dashboard"
@@ -43,15 +41,13 @@ Example1.args = {
           { label: "View Notifications", link: "#", icon: "Notifications" },
         ]}
       />
-    </>
-  ),
+    </LandingPageWrapper>
+  );
 };
 
-export const Example2 = Template.bind({});
-
-Example2.args = {
-  children: (
-    <>
+export const Example2 = () => {
+  return (
+    <LandingPageWrapper>
       <LandingPageCard
         icon="SupervisorAccount"
         moduleAlignment={"left"}
@@ -87,6 +83,6 @@ Example2.args = {
           { label: "View Notifications", link: "#", icon: "Notifications" },
         ]}
       />
-    </>
-  ),
-};
+    </LandingPageWrapper>
+  );
+};
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/stories/TableMolecule.stories.js b/react/ui-components/src/molecules/stories/TableMolecule.stories.js
index 21ac78f2cb..fd90ed50a8 100644
--- a/react/ui-components/src/molecules/stories/TableMolecule.stories.js
+++ b/react/ui-components/src/molecules/stories/TableMolecule.stories.js
@@ -1215,6 +1215,152 @@ const actions = [
   </div>,
 ];
 
+const rowsWithNestedTable = [
+  [
+    {
+      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,
+    },
+    {
+      nestedData:{
+        headerData:headerDataForCustomStyles,
+        rows:samplerows,
+        tableDetails:{
+          tableTitle: "Nested Table Title",
+          tableDescription: "Nested Table Description",
+          addClose:true
+        },
+      }
+    }
+  ],
+  [
+    {
+      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,
+    },
+    {
+      nestedData:{
+        headerData:headerDataForCustomStyles,
+        rows:samplerows,
+        tableDetails:{
+          tableTitle: "Nested Table Title",
+          tableDescription: "Nested Table Description",
+          addClose:true
+        },
+      }
+    }
+  ],
+]
+
+const singlerowWithNestedTable = [
+  [
+    {
+      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,
+    },
+    {
+      nestedData:{
+        headerData:headerDataForCustomStyles,
+        rows:samplerows
+      }
+    }
+  ],
+]
+
 const commonArgs = {
   headerData: [],
   rows: [],
@@ -1383,9 +1529,7 @@ WithHeaderDivider.args = {
     },
     showSelectedState: false,
   },
-  onRowClick: (row, index) => {
-    console.log(row, index, "this row is clicked");
-  },
+  onRowClick: undefined,
   footerProps: {
     footerContent: "Footer Content",
     hideFooter: false,
@@ -1616,9 +1760,7 @@ WithStickyHeader.args = {
     isStickyFooter: false,
     addStickyFooter: false,
   },
-  onRowClick: (row, index) => {
-    console.log(row, index, "this row is clicked");
-  },
+  onRowClick: undefined,
   frozenColumns: 0,
   isStickyHeader: true,
 };
@@ -2408,4 +2550,70 @@ WithAccessor.args = {
     showSelectedState: false,
   },
   onRowClick: undefined,
+};
+
+
+export const WithNestedTable = Template.bind({});
+WithNestedTable.args = {
+  ...commonArgs,
+  sorting: {
+    isTableSortable: false,
+  },
+  headerData: headerDataWithAccessors,
+  rows: rowsWithNestedTable,
+  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 WithOnlyOneRowNestedTable = Template.bind({});
+WithOnlyOneRowNestedTable.args = {
+  ...commonArgs,
+  sorting: {
+    isTableSortable: false,
+  },
+  headerData: headerDataWithAccessors,
+  rows: singlerowWithNestedTable,
+  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
diff --git a/react/ui-components/src/molecules/stories/ViewCard.stories.js b/react/ui-components/src/molecules/stories/ViewCard.stories.js
index 4c14511bef..525c89b78a 100644
--- a/react/ui-components/src/molecules/stories/ViewCard.stories.js
+++ b/react/ui-components/src/molecules/stories/ViewCard.stories.js
@@ -1,13 +1,9 @@
 import React from "react";
-import { LabelFieldPair, TextBlock } from "../../atoms";
-import { Card } from "../../atoms";
-import { ViewCardFieldPair } from "../../atoms";
-import { Button } from "../../atoms";
-import { TextInput } from "../../atoms";
+import ViewCard from "../ViewCard";
 
 export default {
   title: "Molecules/Card/ViewCard",
-  component: Card,
+  component: ViewCard,
   argTypes: {
     className: {
       control: "text",
@@ -15,203 +11,197 @@ export default {
     style: {
       control: { type: "object" },
     },
-    children: {
-      control: "object",
-    },
     type: { control: "select", options: ["primary", "secondary"] },
-    onClick: {
-      control: "function",
-    },
-    props: {
-      control: "object",
+    header:{control:"text"},
+    subHeader:{control:"text"},
+    sections:{
+      control:"array"
     },
+    withDivider:{control:"boolean"},
+    withSectionDivider:{control:"boolean"},
+    layout:{control:"number"},
+    showSectionsAsMultipleCards:{control:"boolean"},
+    asSeperateCards:{control:"boolean"}
+  },
+};
+
+const Template = (args) => <ViewCard {...args} />;
+
+const sections = [
+  {
+    type:"DATA",
+    header: "Personal Information",
+    subHeader: "Basic details",
+    fieldPairs: [
+      { label: "Name", value: "John Doe", inline: true },
+      { label: "Age", value: "28", inline: true },
+    ],
+    cardType:"primary"
+  },
+  {
+    type:"DATA",
+    header: "Contact Information",
+    subHeader: "How to reach me",
+    fieldPairs: [
+      { label: "Email", value: "john.doe@example.com", inline: true },
+      { label: "Phone", value: "+1 123-456-7890", inline: true },
+    ],
+    cardType:"primary"
+  },
+  {
+    type:"DATA",
+    header: "Address",
+    subHeader: "Where I live",
+    fieldPairs: [
+      { label: "Street", value: "123 Main St", inline: true },
+      { label: "City", value: "Los Angeles", inline: true },
+      { label: "State", value: "CA", inline: true },
+      { label: "Zip Code", value: "90001", inline: true },
+    ],
+    cardType:"primary"
+  },
+]
+
+const secondaryCardSections = [
+  {
+    header: "Personal Information",
+    subHeader: "Basic details",
+    fieldPairs: [
+      { label: "Name", value: "John Doe", inline: true },
+      { label: "Age", value: "28", inline: false },
+    ],
+    cardType:"secondary"
   },
+  {
+    header: "Contact Information",
+    subHeader: "How to reach me",
+    fieldPairs: [
+      { label: "Email", value: "john.doe@example.com", inline: true },
+      { label: "Phone", value: "+1 123-456-7890", inline: false },
+    ],
+    cardType:"secondary"
+  },
+  {
+    header: "Address",
+    subHeader: "Where I live",
+    fieldPairs: [
+      { label: "Street", value: "123 Main St", inline: true },
+      { label: "City", value: "Los Angeles", inline: false },
+      { label: "State", value: "CA", inline: true },
+      { label: "Zip Code", value: "90001", inline: false },
+    ],
+    cardType:"secondary"
+  },
+]
+
+const commonArgs = {
+  className: "",
+  style: {},
+  type:"primary",
+  header:"Heading",
+  subHeader:"Subheading",
+  withDivider: false,
+  layout:1,
+  sections:sections,
+  withSectionDivider:false,
+  showSectionsAsMultipleCards:false,
+  asSeperateCards:false
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  ...commonArgs,
 };
 
-const Template = (args) => <Card {...args} />;
-
-const options = [
-  { code: "MALE", name: "MALE" },
-  { code: "FEMALE", name: "FEMALE" },
-  { code: "TRANSGENDER", name: "TRANSGENDER" },
-];
-
-export const ExampleViewCard = () => (
-  <Card
-    type={"primary"}
-    variant="viewcard"
-    style={{
-      display: "flex",
-      flexDirection: "column",
-      gap: "64px",
-    }}
-  >
-    <Card
-      type={"primary"}
-      style={{
-        boxShadow: "none",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-        padding: "0px",
-      }}
-    >
-      <TextBlock header="Heading" headerClasName=""></TextBlock>
-      <Card
-        type={"primary"}
-        style={{
-          boxShadow: "none",
-          display: "flex",
-          flexDirection: "column",
-          gap: "16px",
-          padding: "0px",
-        }}
-      >
-        <TextBlock subHeader="Details" subHeaderClasName=""></TextBlock>
-        <ViewCardFieldPair
-          label={"Start Date"}
-          value={"12 August 2023"}
-          inline={true}
-        ></ViewCardFieldPair>
-        <ViewCardFieldPair
-          label={"Birthday"}
-          value={"12 August 2023"}
-          inline={false}
-        ></ViewCardFieldPair>
-      </Card>
-    </Card>
-    <Card
-      type={"primary"}
-      style={{
-        boxShadow: "none",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-        padding: "0px",
-      }}
-    >
-      <TextBlock
-        subHeader="Add your start and end dates for cycles"
-        subHeaderClasName=""
-      ></TextBlock>
-      <Card type={"secondary"}>
-        <div
-          style={{
-            maxWidth: "100%",
-            width: "100%",
-            display: "flex",
-            flexDirection: "row",
-            gap: "8px",
-            overflow: "hidden",
-          }}
-        >
-          <div
-            style={{
-              flexGrow: 1,
-            }}
-          >
-            <TextBlock body="Attribute" bodyClasName=""></TextBlock>
-            <TextInput type="text"></TextInput>
-          </div>
-          <div
-            style={{
-              flexGrow: 1,
-            }}
-          >
-            <TextBlock body="Operator" bodyClasName=""></TextBlock>
-            <TextInput type="text"></TextInput>
-          </div>
-          <div
-            style={{
-              flexGrow: 1,
-            }}
-          >
-            <TextBlock body="Value" bodyClasName=""></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>
-    </Card>
-    <Card
-      type={"primary"}
-      style={{
-        boxShadow: "none",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-        padding: "0px",
-      }}
-    >
-      <TextBlock
-        subHeader="Add your start and end dates for cycles"
-        subHeaderClasName=""
-      ></TextBlock>
-      <LabelFieldPair
-        style={{
-          display: "flex",
-          gap: "24px",
-          alignItems: "center",
-          marginBottom: "0px",
-        }}
-      >
-        <TextBlock
-          body="Field 1"
-          bodyClasName=""
-          style={{ width: "100%" }}
-        ></TextBlock>
-        <TextInput type="text" placeholder={"Value"}></TextInput>
-      </LabelFieldPair>
-      <LabelFieldPair
-        style={{
-          display: "flex",
-          gap: "24px",
-          alignItems: "center",
-          marginBottom: "0px",
-        }}
-      >
-        <TextBlock
-          body="Field 2"
-          bodyClasName=""
-          style={{ width: "100%" }}
-        ></TextBlock>
-        <TextInput type="text" placeholder={"Value"}></TextInput>
-      </LabelFieldPair>
-      <LabelFieldPair
-        style={{
-          display: "flex",
-          gap: "24px",
-          alignItems: "center",
-          marginBottom: "0px",
-        }}
-      >
-        <TextBlock
-          body="Field 3"
-          bodyClasName=""
-          style={{ width: "100%" }}
-        ></TextBlock>
-        <TextInput type="text" placeholder={"Value"}></TextInput>
-      </LabelFieldPair>
-    </Card>
-  </Card>
-);
+export const WithDivider = Template.bind({});
+WithDivider.args = {
+  ...commonArgs,
+  withDivider: true,
+};
+
+export const TwoColumnLayout = Template.bind({});
+TwoColumnLayout.args = {
+  ...commonArgs,
+  layout:2,
+};
+
+
+export const TwoColumnLayoutWithDivider = Template.bind({});
+TwoColumnLayoutWithDivider.args = {
+  ...commonArgs,
+  layout:2,
+  withDivider:true,
+};
+
+export const WithSectionDivider = Template.bind({});
+WithSectionDivider.args = {
+  ...commonArgs,
+  withSectionDivider:true
+};
+
+export const WithDividerAndSectionDivider = Template.bind({});
+WithDividerAndSectionDivider.args = {
+  ...commonArgs,
+  withSectionDivider:true,
+  withDivider:true
+};
+
+export const TwoColumnLayoutAndSectionDivider = Template.bind({});
+TwoColumnLayoutAndSectionDivider.args = {
+  ...commonArgs,
+  layout:2,
+  withSectionDivider:true
+};
+
+export const TwoColumnLayoutWithDividerAndSectionDivider = Template.bind({});
+TwoColumnLayoutWithDividerAndSectionDivider.args = {
+  ...commonArgs,
+  layout:2,
+  withDivider:true,
+  withSectionDivider:true
+};
+
+export const WithSeactionsAsCards = Template.bind({});
+WithSeactionsAsCards.args = {
+  ...commonArgs,
+  showSectionsAsMultipleCards:true,
+  withDivider:false,
+  withSectionDivider:false
+};
+
+export const WithSeactionsAsCardsAndTwoColumnLayout = Template.bind({});
+WithSeactionsAsCardsAndTwoColumnLayout.args = {
+  ...commonArgs,
+  layout:2,
+  showSectionsAsMultipleCards:true,
+  withDivider:false,
+  withSectionDivider:false,
+};
+
+export const WithSectionsAsCardsAndOuterCardSecondary = Template.bind({});
+WithSectionsAsCardsAndOuterCardSecondary.args = {
+  ...commonArgs,
+  showSectionsAsMultipleCards:true,
+  withDivider:false,
+  withSectionDivider:false,
+  type:"secondary"
+};
+
+export const WithSectionsAsCardsAndSectionCardsSecondary = Template.bind({});
+WithSectionsAsCardsAndSectionCardsSecondary.args = {
+  ...commonArgs,
+  showSectionsAsMultipleCards:true,
+  withDivider:false,
+  withSectionDivider:false,
+  sections:secondaryCardSections
+};
+
+
+export const asSeperateCards= Template.bind({});
+asSeperateCards.args = {
+  ...commonArgs,
+  showSectionsAsMultipleCards:true,
+  withDivider:false,
+  withSectionDivider:false,
+  asSeperateCards:true
+};
\ No newline at end of file