From b1a9b0e73efeee830191a1c18e7bb7db738ea905 Mon Sep 17 00:00:00 2001
From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com>
Date: Thu, 26 Dec 2024 11:31:47 +0530
Subject: [PATCH] storybook audit fixes-1 (#163)

---
 react/css/package.json                        |    2 +-
 .../{infoCardV2.scss => alertCardV2.scss}     |    0
 .../{uploaderV2.scss => fileUploadV2.scss}    |   25 +-
 .../{actionbarV2.scss => footerV2.scss}       |    0
 ...ilesidebarV2.scss => mobilesidenavV2.scss} |    0
 .../components/multiSelectDropdownV2.scss     |    1 +
 .../src/digitv2/components/radiobtnV2.scss    |    4 +
 .../digitv2/components/selectDropdownV2.scss  |    6 +-
 ...lectionCardV2.scss => selectionTagV2.scss} |   35 +-
 ...{slideOverMenuV2.scss => sidePanelV2.scss} |   20 +
 .../{sidebarV2.scss => sidenavV2.scss}        |    0
 .../css/src/digitv2/components/topbarV2.scss  |    2 +-
 .../src/digitv2/components/treeSelectV2.scss  |    2 +-
 react/css/src/digitv2/index.scss              |   20 +-
 react/example/package.json                    |    2 +-
 react/example/public/index.html               |    2 +-
 react/modules/Project/package.json            |    2 +-
 .../CreateProject/CreateProjectResponse.js    |    6 +-
 .../pages/employee/ProjectDetails/index.js    |    6 +-
 react/modules/core/package.json               |    2 +-
 react/modules/sample/package.json             |    2 +-
 .../sample/src/pages/employee/Sample.js       |   14 +-
 .../components/ApplicationDetailsActionBar.js |   10 +-
 react/package.json                            |    4 +-
 .../.storybook/preview-head.html              |    2 +-
 react/ui-components/CHANGELOG.md              |   10 +
 react/ui-components/package.json              |    4 +-
 react/ui-components/public/index.html         |    2 +-
 react/ui-components/src/atoms/Accordion.js    |   15 +-
 react/ui-components/src/atoms/ActionBar.js    |   76 -
 .../src/atoms/{InfoCard.js => AlertCard.js}   |    8 +-
 react/ui-components/src/atoms/BreadCrumb.js   |    4 -
 react/ui-components/src/atoms/ButtonGroup.js  |   14 +-
 react/ui-components/src/atoms/CustomSVG.js    | 1322 +++++++++--------
 react/ui-components/src/atoms/Dropdown.js     |   29 +
 .../src/atoms/{Uploader.js => FileUpload.js}  |   44 +-
 react/ui-components/src/atoms/Footer.js       |   86 +-
 react/ui-components/src/atoms/HomeFooter.js   |   22 +
 .../src/atoms/LoaderComponent.js              |    8 +-
 .../{MobileSidebar.js => MobileSideNav.js}    |    6 +-
 react/ui-components/src/atoms/RadioButtons.js |    6 +-
 .../{SelectionCard.js => SelectionTag.js}     |   17 +-
 .../src/atoms/{Sidebar.js => SideNav.js}      |    8 +-
 .../atoms/{SlideOverMenu.js => SidePanel.js}  |    6 +-
 react/ui-components/src/atoms/Switch.js       |    5 +-
 react/ui-components/src/atoms/Tab.js          |    2 +-
 react/ui-components/src/atoms/Table.js        |    6 +-
 react/ui-components/src/atoms/UploadImage.js  |    3 +-
 .../atoms/{UploadPopup.js => UploadWidget.js} |   30 +-
 .../foundationstories/Iconography.stories.js  |   57 +
 react/ui-components/src/atoms/index.js        |   38 +-
 .../src/atoms/stories/Accordion.stories.js    |   98 +-
 .../src/atoms/stories/AlertCard.stories.js    |  170 +++
 .../src/atoms/stories/BackLink.stories.js     |   53 +-
 .../src/atoms/stories/BreadCrumb.stories.js   |  286 ++--
 .../src/atoms/stories/Checkbox.stories.js     |  100 ++
 .../src/atoms/stories/CheckboxDocs.stories.js |   30 -
 .../atoms/stories/CheckedCheckbox.stories.js  |  130 --
 .../src/atoms/stories/Chip.stories.js         |   49 +-
 .../src/atoms/stories/Dropdown.stories.js     |    2 +-
 .../src/atoms/stories/Dropdowndocs.stories.js |    2 +-
 .../stories/DynamicSideovermenu.stories.js    | 1094 --------------
 .../src/atoms/stories/ErrorMessage.stories.js |   87 --
 .../src/atoms/stories/ErrorPanel.stories.js   |   53 +-
 .../src/atoms/stories/Iconography.stories.js  |   53 -
 ...mage.stories.js => ImageUpload.stories.js} |   10 +-
 .../src/atoms/stories/InfoButton.stories.js   |   95 --
 .../src/atoms/stories/InfoCard.stories.js     |  207 ---
 .../stories/IntermediateCheckbox.stories.js   |  153 --
 .../atoms/stories/LabelFieldPair.stories.js   |   45 -
 .../src/atoms/stories/LinkButton.stories.js   |  147 +-
 .../src/atoms/stories/Loader.stories.js       |    6 +
 .../stories/MultiselectDropdown.stories.js    |    2 +-
 .../Multiselectdropdowndocs.stories.js        |    2 +-
 .../atoms/stories/PrimaryButton.stories.js    |  224 ++-
 .../src/atoms/stories/RadioButtons.stories.js |  146 +-
 .../atoms/stories/SecondaryButton.stories.js  |  153 +-
 ...ard.stories.js => SelectionTag.stories.js} |  149 +-
 .../stories/StaticSlideOverMenu.stories.js    | 1024 -------------
 .../src/atoms/stories/SuccessPanel.stories.js |   83 +-
 .../src/atoms/stories/Switch.stories.js       |  129 +-
 .../src/atoms/stories/Tab.stories.js          |  171 +--
 .../src/atoms/stories/Tag.stories.js          |  123 +-
 .../atoms/stories/TeritiaryButton.stories.js  |  153 +-
 .../src/atoms/stories/TextBlock.stories.js    |   43 +-
 .../src/atoms/stories/Toggle.stories.js       |    4 +-
 .../stories/UnCheckedCheckBox.stories.js      |  132 --
 .../src/atoms/stories/UploaderDocs.stories.js |   10 +-
 ...le.stories.js => UploaderField.stories.js} |   76 +-
 ...p.stories.js => UploaderWidget.stories.js} |   18 +-
 react/ui-components/src/hoc/FormComposerV2.js |    6 +-
 .../hoc/MobileView/MobileSearchComponent.js   |    6 +-
 react/ui-components/src/index.js              |   40 +-
 .../src/molecules/CustomDropdown.js           |    2 +
 .../src/molecules/DetailsCard.js              |    6 +-
 .../ui-components/src/molecules/PanelCard.js  |   35 +-
 ...er.stories.js => AccordionList.stories.js} |   39 +-
 .../stories/AlertPopup.stories.js             |   28 +-
 .../stories/BasicPopup.stories.js}            |   28 +-
 .../molecules/stories/ButtonGroup.stories.js  |  177 ++-
 .../stories/CardVariantPrimaryCard.stories.js |    4 +-
 .../CardVariantScondaryCard.stories.js        |    4 +-
 ...ar.stories.js => CustomSideNav.stories.js} |    8 +-
 ...ebar.stories.js => DarkSideNav.stories.js} |    8 +-
 .../stories/DarkThemeHamburger.stories.js     |    6 +-
 .../stories/DarkThemeHeader.stories.js        |   14 +-
 .../stories/DynamicSidePanel.stories.js       |  412 +++++
 ...l.stories.js => ErrorPanelCard.stories.js} |    8 +-
 .../src/molecules/stories/Footer.stories.js   |  102 +-
 .../src/molecules/stories/FormCard.stories.js |   14 +-
 .../stories/HamburgerDocs.stories.js          |    4 +-
 ...bar.stories.js => LightSideNav.stories.js} |    8 +-
 .../stories/LightThemeHamburger.stories.js    |    6 +-
 .../stories/LightThemeHeader.stories.js       |   14 +-
 .../stories/PopupDocs.stories.js              |    6 +-
 ...Docs.stories.js => SideNavDocs.stories.js} |    8 +-
 .../stories/SidePanelDocs.stories.js}         |   10 +-
 .../stories/StaticSidePanel.stories.js        |  220 +++
 .../stories/SuccessPanelCard.stories.js       |    4 +-
 119 files changed, 3377 insertions(+), 5359 deletions(-)
 rename react/css/src/digitv2/components/{infoCardV2.scss => alertCardV2.scss} (100%)
 rename react/css/src/digitv2/components/{uploaderV2.scss => fileUploadV2.scss} (96%)
 rename react/css/src/digitv2/components/{actionbarV2.scss => footerV2.scss} (100%)
 rename react/css/src/digitv2/components/{mobilesidebarV2.scss => mobilesidenavV2.scss} (100%)
 rename react/css/src/digitv2/components/{selectionCardV2.scss => selectionTagV2.scss} (67%)
 rename react/css/src/digitv2/components/{slideOverMenuV2.scss => sidePanelV2.scss} (87%)
 rename react/css/src/digitv2/components/{sidebarV2.scss => sidenavV2.scss} (100%)
 delete mode 100644 react/ui-components/src/atoms/ActionBar.js
 rename react/ui-components/src/atoms/{InfoCard.js => AlertCard.js} (91%)
 rename react/ui-components/src/atoms/{Uploader.js => FileUpload.js} (95%)
 create mode 100644 react/ui-components/src/atoms/HomeFooter.js
 rename react/ui-components/src/atoms/{MobileSidebar.js => MobileSideNav.js} (99%)
 rename react/ui-components/src/atoms/{SelectionCard.js => SelectionTag.js} (90%)
 rename react/ui-components/src/atoms/{Sidebar.js => SideNav.js} (99%)
 rename react/ui-components/src/atoms/{SlideOverMenu.js => SidePanel.js} (98%)
 rename react/ui-components/src/atoms/{UploadPopup.js => UploadWidget.js} (89%)
 create mode 100644 react/ui-components/src/atoms/foundationstories/Iconography.stories.js
 create mode 100644 react/ui-components/src/atoms/stories/AlertCard.stories.js
 create mode 100644 react/ui-components/src/atoms/stories/Checkbox.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/CheckboxDocs.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/CheckedCheckbox.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/DynamicSideovermenu.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/ErrorMessage.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/Iconography.stories.js
 rename react/ui-components/src/atoms/stories/{UploadImage.stories.js => ImageUpload.stories.js} (89%)
 delete mode 100644 react/ui-components/src/atoms/stories/InfoButton.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/InfoCard.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/IntermediateCheckbox.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/LabelFieldPair.stories.js
 rename react/ui-components/src/atoms/stories/{SelectionCard.stories.js => SelectionTag.stories.js} (50%)
 delete mode 100644 react/ui-components/src/atoms/stories/StaticSlideOverMenu.stories.js
 delete mode 100644 react/ui-components/src/atoms/stories/UnCheckedCheckBox.stories.js
 rename react/ui-components/src/atoms/stories/{UploadeFile.stories.js => UploaderField.stories.js} (60%)
 rename react/ui-components/src/atoms/stories/{UploadPopup.stories.js => UploaderWidget.stories.js} (87%)
 rename react/ui-components/src/molecules/stories/{AccordionWrapper.stories.js => AccordionList.stories.js} (69%)
 rename react/ui-components/src/{atoms => molecules}/stories/AlertPopup.stories.js (88%)
 rename react/ui-components/src/{atoms/stories/BasicPopUp.stories.js => molecules/stories/BasicPopup.stories.js} (90%)
 rename react/ui-components/src/molecules/stories/{CustomSidebar.stories.js => CustomSideNav.stories.js} (95%)
 rename react/ui-components/src/molecules/stories/{DarkSidebar.stories.js => DarkSideNav.stories.js} (95%)
 create mode 100644 react/ui-components/src/molecules/stories/DynamicSidePanel.stories.js
 rename react/ui-components/src/molecules/stories/{ErrorPanel.stories.js => ErrorPanelCard.stories.js} (98%)
 rename react/ui-components/src/molecules/stories/{LightSidebar.stories.js => LightSideNav.stories.js} (97%)
 rename react/ui-components/src/{atoms => molecules}/stories/PopupDocs.stories.js (94%)
 rename react/ui-components/src/molecules/stories/{SidebarDocs.stories.js => SideNavDocs.stories.js} (87%)
 rename react/ui-components/src/{atoms/stories/SlideOverMenuDocs.stories.js => molecules/stories/SidePanelDocs.stories.js} (86%)
 create mode 100644 react/ui-components/src/molecules/stories/StaticSidePanel.stories.js

diff --git a/react/css/package.json b/react/css/package.json
index e473f634b8e..1d50f9f77ac 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.43",
+  "version": "0.0.2-beta.44",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
diff --git a/react/css/src/digitv2/components/infoCardV2.scss b/react/css/src/digitv2/components/alertCardV2.scss
similarity index 100%
rename from react/css/src/digitv2/components/infoCardV2.scss
rename to react/css/src/digitv2/components/alertCardV2.scss
diff --git a/react/css/src/digitv2/components/uploaderV2.scss b/react/css/src/digitv2/components/fileUploadV2.scss
similarity index 96%
rename from react/css/src/digitv2/components/uploaderV2.scss
rename to react/css/src/digitv2/components/fileUploadV2.scss
index 860317de206..ad35035384b 100644
--- a/react/css/src/digitv2/components/uploaderV2.scss
+++ b/react/css/src/digitv2/components/fileUploadV2.scss
@@ -20,8 +20,14 @@
       gap: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
     }
 
+    .upload-options-svg-wrap{
+      width: theme(digitv2.spacers.spacer10);
+      height: theme(digitv2.spacers.spacer10);
+      cursor: pointer;
+    }
+
     .upload-options-label {
-      @extend .typography.label;
+      @extend .typography.button.large;
       @apply cursor-pointer;
       color: theme(digitv2.lightTheme.primary-1);
     }
@@ -108,7 +114,7 @@
     outline: none !important;
   }
 
-  .digit-uploader-content-uploadpopup {
+  .digit-uploader-content-uploadWidget {
     @apply flex flex-col w-full items-center justify-center max-w-full;
     gap: theme(digitv2.spacers.spacer4);
     border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -164,13 +170,20 @@
       }
     }
 
+    .drag-drop-link{
+      @extend .typography.link-S;
+      margin-left: theme(digitv2.spacers.spacer1);
+      color: theme(digitv2.lightTheme.primary-1);
+      cursor: pointer;
+    }
+
     &.error {
       border-style: dashed !important;
       border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
     }
   }
 
-  .digit-uploadpopup-label {
+  .digit-uploadWidget-label {
     @extend .typography.body-s;
     font-family: theme(digitv2.fontFamily.sans);
     font-style: theme(digitv2.fontStyle.normal);
@@ -471,7 +484,7 @@
       }
     }
 
-    .digit-uploadpopup-close-icon {
+    .digit-uploadWidget-close-icon {
       @apply absolute top-0 right-0 w-6 h-6 items-center cursor-pointer;
       background: theme(digitv2.lightTheme.generic-background);
       border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -488,7 +501,7 @@
     &.error {
       border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
 
-      .digit-uploadpopup-close-icon {
+      .digit-uploadWidget-close-icon {
         background: theme(digitv2.lightTheme.alert-error);
         border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         border-top: none;
@@ -505,7 +518,7 @@
         }
       }
 
-      .uploadpopup-error-card {
+      .uploadWidget-error-card {
         @apply w-full max-w-full;
         margin: theme(digitv2.spacers.spacer0);
       }
diff --git a/react/css/src/digitv2/components/actionbarV2.scss b/react/css/src/digitv2/components/footerV2.scss
similarity index 100%
rename from react/css/src/digitv2/components/actionbarV2.scss
rename to react/css/src/digitv2/components/footerV2.scss
diff --git a/react/css/src/digitv2/components/mobilesidebarV2.scss b/react/css/src/digitv2/components/mobilesidenavV2.scss
similarity index 100%
rename from react/css/src/digitv2/components/mobilesidebarV2.scss
rename to react/css/src/digitv2/components/mobilesidenavV2.scss
diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
index 7c82d4b127c..bcdf5a3970b 100644
--- a/react/css/src/digitv2/components/multiSelectDropdownV2.scss
+++ b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -463,6 +463,7 @@
         font-style: theme(digitv2.fontStyle.normal);
         font-weight: theme(digitv2.fontWeight.regular);
         line-height: theme(digitv2.lineHeight.lineheight2);
+        padding-left: theme(digitv2.spacers.spacer3);
     
         @media (max-aspect-ratio: 9/16) {
           /* Media query for mobile */
diff --git a/react/css/src/digitv2/components/radiobtnV2.scss b/react/css/src/digitv2/components/radiobtnV2.scss
index bf22da68a34..1d07c3758a3 100644
--- a/react/css/src/digitv2/components/radiobtnV2.scss
+++ b/react/css/src/digitv2/components/radiobtnV2.scss
@@ -61,6 +61,10 @@
       }
     }
 
+    &.label-first{
+      flex-direction: row-reverse;
+    }
+
   }
 
   .radio-option-container label:only-child {
diff --git a/react/css/src/digitv2/components/selectDropdownV2.scss b/react/css/src/digitv2/components/selectDropdownV2.scss
index 8b5097fea5a..ff2896b0d4f 100644
--- a/react/css/src/digitv2/components/selectDropdownV2.scss
+++ b/react/css/src/digitv2/components/selectDropdownV2.scss
@@ -199,7 +199,7 @@
 }
 .digit-dropdown-item {
   @apply flex flex-row;
-  padding: 0.625rem;
+  padding: theme(digitv2.spacers.spacer3);
   gap: 0.625rem;
   min-height: 2.438rem;
   color: theme(digitv2.lightTheme.text-primary) !important;
@@ -318,7 +318,7 @@
   }
   &.nestedtextdropdown {
     min-height: 4.75rem;
-    padding: theme(digitv2.spacers.spacer2) 0.635rem theme(digitv2.spacers.spacer2) 0.635rem;
+    padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
     color: theme(digitv2.lightTheme.text-secondary) !important;
     &:hover {
       border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
@@ -356,7 +356,7 @@
   }
   &.profiledropdown {
     min-height: theme(digitv2.spacers.spacer12);
-    padding: theme(digitv2.spacers.spacer2) 0.625rem;
+    padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
   }
   &.profilenestedtext {
     min-height: 4.75rem;
diff --git a/react/css/src/digitv2/components/selectionCardV2.scss b/react/css/src/digitv2/components/selectionTagV2.scss
similarity index 67%
rename from react/css/src/digitv2/components/selectionCardV2.scss
rename to react/css/src/digitv2/components/selectionTagV2.scss
index c2c90cefc4a..b71f8eab83c 100644
--- a/react/css/src/digitv2/components/selectionCardV2.scss
+++ b/react/css/src/digitv2/components/selectionTagV2.scss
@@ -19,6 +19,12 @@
       justify-content: center;
     }
 
+    &.hideContainer{
+      border: none;
+      background-color: transparent;
+      border-radius: theme(digitv2.spacers.spacer0);
+    }
+
   }
   
   .selection-card.error {
@@ -26,6 +32,7 @@
   }
   
   .option {
+    @extend .typography.body-s;
     display: flex;
     align-items: center;
     padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
@@ -40,30 +47,46 @@
     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-l.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-l.tablet);
+      font-size: theme(digitv2.fontSize.body-s.tablet);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
-      font-size: theme(digitv2.fontSize.body-l.desktop);
+      font-size: theme(digitv2.fontSize.body-s.desktop);
     }
   }
   
   .option.selected {
+    @extend .typography.heading-s;
     background-color: theme(digitv2.lightTheme.primary-1); 
     color: theme(digitv2.lightTheme.paper-primary);
     font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
   }
 
-  .option .selectioncard-option-label {
+  .option .selectiontag-option-label {
     width: 100%;
     display: flex;
     align-items: center;
@@ -71,7 +94,7 @@
   }
   
   
-  .option .selectioncardicon {
+  .option .selectiontagicon {
     flex-shrink: 0;
     display: flex;
     align-items: center;
diff --git a/react/css/src/digitv2/components/slideOverMenuV2.scss b/react/css/src/digitv2/components/sidePanelV2.scss
similarity index 87%
rename from react/css/src/digitv2/components/slideOverMenuV2.scss
rename to react/css/src/digitv2/components/sidePanelV2.scss
index bef178cee5b..748fede7ffa 100644
--- a/react/css/src/digitv2/components/slideOverMenuV2.scss
+++ b/react/css/src/digitv2/components/sidePanelV2.scss
@@ -102,8 +102,28 @@
 }
 
 .slider-header {
+  @extend .typography.heading-m;
   flex-shrink: 0;
   padding: theme(digitv2.spacers.spacer4);
+  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);
+  }
   border-bottom: 0.063rem solid #d6d5d4;
 
   .close-icon {
diff --git a/react/css/src/digitv2/components/sidebarV2.scss b/react/css/src/digitv2/components/sidenavV2.scss
similarity index 100%
rename from react/css/src/digitv2/components/sidebarV2.scss
rename to react/css/src/digitv2/components/sidenavV2.scss
diff --git a/react/css/src/digitv2/components/topbarV2.scss b/react/css/src/digitv2/components/topbarV2.scss
index 0ef705372ba..82f3487a0ee 100644
--- a/react/css/src/digitv2/components/topbarV2.scss
+++ b/react/css/src/digitv2/components/topbarV2.scss
@@ -221,7 +221,7 @@
     .digit-dropdown-item {
       display: flex;
       flex-direction: row;
-      padding: 0.625rem;
+      padding: theme(digitv2.spacers.spacer3);
       column-gap: 0.625rem;
       color: theme(colors.text.secondary);
   
diff --git a/react/css/src/digitv2/components/treeSelectV2.scss b/react/css/src/digitv2/components/treeSelectV2.scss
index bfe4f0f012d..7c89be6926f 100644
--- a/react/css/src/digitv2/components/treeSelectV2.scss
+++ b/react/css/src/digitv2/components/treeSelectV2.scss
@@ -18,7 +18,7 @@
     @apply relative cursor-pointer flex items-center;
     height: 2.4375rem;
     gap: theme(digitv2.spacers.spacer1);
-    padding: theme(digitv2.spacers.spacer4) 0.625rem;
+    padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer3);
     &:hover {
         background: theme(digitv2.lightTheme.primary-bg);
         border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
diff --git a/react/css/src/digitv2/index.scss b/react/css/src/digitv2/index.scss
index ba896270f02..8ec77ec1682 100644
--- a/react/css/src/digitv2/index.scss
+++ b/react/css/src/digitv2/index.scss
@@ -13,7 +13,7 @@
 @import url("./components/fieldV1.scss");
 @import url("./components/FormComposerV2.scss");
 @import url("./components/infobuttonV2.scss");
-@import url("./components/infoCardV2.scss"); 
+@import url("./components/alertCardV2.scss"); 
 @import url("./components/labelFieldPairV2.scss");
 @import url("./components/mobileNumberV2.scss");
 @import url("./components/multiSelectDropdownV2.scss");
@@ -25,7 +25,7 @@
 @import url("./components/selectDropdownV2.scss");
 @import url("./components/stepperV2.scss");
 @import url("./components/switchV2.scss");
-@import url("./components/selectionCardV2.scss");
+@import url("./components/selectionTagV2.scss");
 @import url("./components/textareaV2.scss");
 @import url("./components/textblockV2.scss");
 @import url("./components/textInputV2.scss");
@@ -33,21 +33,21 @@
 @import url("./components/toastV2.scss");
 @import url("./components/toggleV2.scss");
 @import url("./components/treeSelectV2.scss");
-@import url("./components/uploaderV2.scss");
+@import url("./components/fileUploadV2.scss");
 @import url("./components/viewCardFieldPairV2.scss");
-@import url("./components/actionbarV2.scss");
+@import url("./components/footerV2.scss");
 @import url("./components/headerdropdownV2.scss");
 @import url("./components/topbarV2.scss");
 @import url("./components/tabV2.scss");
-@import url("./components/sidebarV2.scss");
-@import url("./components/mobilesidebarV2.scss");
+@import url("./components/sidenavV2.scss");
+@import url("./components/mobilesidenavV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
 @import url("./components/tagV2.scss");
 @import url("./components/landingpagecardV2.scss");
 @import url("./components/menuCardV2.scss");
 @import url("./components/otpInputV2.scss");
 @import url("./components/tableV2.scss");
-@import url("./components/slideOverMenuV2.scss");
+@import url("./components/sidePanelV2.scss");
 @import url("./components/metricCardV2.scss");
 @import url("./components/formCardV2.scss");
 @import url("./components/filterCardV2.scss");
@@ -322,4 +322,10 @@
       line-height: theme(digitv2.lineHeight.lineheight2);
     }
   }
+}
+
+.sb-main-padded{
+  &.sb-show-main{
+    background-color: theme(digitv2.lightTheme.paper-primary);
+  }
 }
\ No newline at end of file
diff --git a/react/example/package.json b/react/example/package.json
index a34f84165b3..d703c12acd4 100644
--- a/react/example/package.json
+++ b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.59",
+    "@egovernments/digit-ui-components": "0.0.2-beta.60",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
diff --git a/react/example/public/index.html b/react/example/public/index.html
index a7350f1cebe..8820a0a94a2 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.43/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.44/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
index 02264eba829..0fd43bbdb86 100644
--- a/react/modules/Project/package.json
+++ b/react/modules/Project/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.59",
+        "@egovernments/digit-ui-components": "0.0.2-beta.60",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",
diff --git a/react/modules/Project/src/pages/employee/CreateProject/CreateProjectResponse.js b/react/modules/Project/src/pages/employee/CreateProject/CreateProjectResponse.js
index 0dcf37cb080..ad42d0455b4 100644
--- a/react/modules/Project/src/pages/employee/CreateProject/CreateProjectResponse.js
+++ b/react/modules/Project/src/pages/employee/CreateProject/CreateProjectResponse.js
@@ -6,7 +6,7 @@ import {
   LinkLabel,
   Card,
   SubmitBar,
-  ActionBar,
+  Footer,
   ArrowLeftWhite,
   AddFileFilled,
 } from "@egovernments/digit-ui-components";
@@ -82,11 +82,11 @@ const CreateProjectResponse = () => {
           </LinkLabel>
         )}
       </div>
-      <ActionBar>
+      <Footer>
         <Link to={`/${window.contextPath}/employee`}>
           <SubmitBar label={t("CORE_COMMON_GO_TO_HOME")} />
         </Link>
-      </ActionBar>
+      </Footer>
     </Card>
   );
 };
diff --git a/react/modules/Project/src/pages/employee/ProjectDetails/index.js b/react/modules/Project/src/pages/employee/ProjectDetails/index.js
index ac2d044ce7b..a514f2d953e 100644
--- a/react/modules/Project/src/pages/employee/ProjectDetails/index.js
+++ b/react/modules/Project/src/pages/employee/ProjectDetails/index.js
@@ -10,7 +10,7 @@ import {
   Card,
   Loader,
   SubmitBar,
-  ActionBar,
+  Footer,
   HorizontalNav,
   Toast,
 } from "@egovernments/digit-ui-components";
@@ -286,7 +286,7 @@ const ProjectDetails = () => {
         />
       </HorizontalNav>
       {!hideActionBar && (
-        <ActionBar>
+        <Footer>
           {showActions ? (
             <Menu
               localeKeyPrefix={`COMMON`}
@@ -301,7 +301,7 @@ const ProjectDetails = () => {
             label={t("WORKS_ACTIONS")}
             onSubmit={() => setShowActions(!showActions)}
           />
-        </ActionBar>
+        </Footer>
       )}
       {toast?.show && (
         <Toast
diff --git a/react/modules/core/package.json b/react/modules/core/package.json
index 64bfa59b6f5..bd4998f1158 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.59",
+    "@egovernments/digit-ui-components": "0.0.2-beta.60",
     "@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 67df9dd4057..a7d2e9d6e0c 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.59",
+    "@egovernments/digit-ui-components": "0.0.2-beta.60",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",
diff --git a/react/modules/sample/src/pages/employee/Sample.js b/react/modules/sample/src/pages/employee/Sample.js
index a1dc245e878..9870f2713f8 100644
--- a/react/modules/sample/src/pages/employee/Sample.js
+++ b/react/modules/sample/src/pages/employee/Sample.js
@@ -1,6 +1,6 @@
 import {
   FormComposerV2,
-  InfoCard,
+  AlertCard,
   Stepper,
   Button,
   Timeline,
@@ -913,7 +913,7 @@ const Create = () => {
         />
       </div>
       <div style={commonDivStyle}>
-        <InfoCard
+        <AlertCard
           populators={{
             name: "infocard",
           }}
@@ -923,7 +923,7 @@ const Create = () => {
           }
           label={"Info"}
         />
-        <InfoCard
+        <AlertCard
           populators={{
             name: "infocardsuccess",
           }}
@@ -933,7 +933,7 @@ const Create = () => {
           }
           label={"Success"}
         />
-        <InfoCard
+        <AlertCard
           populators={{
             name: "infocardwarning",
           }}
@@ -943,7 +943,7 @@ const Create = () => {
           }
           label={"Warning"}
         />
-        <InfoCard
+        <AlertCard
           populators={{
             name: "infocarderror",
           }}
@@ -954,7 +954,7 @@ const Create = () => {
           label={"Error"}
         />
 
-        <InfoCard
+        <AlertCard
           populators={{
             name: "infocardwithelements",
           }}
@@ -966,7 +966,7 @@ const Create = () => {
           additionalElements={additionalElementsforInfoCard}
         />
 
-        <InfoCard
+        <AlertCard
           populators={{
             name: "infocardwithelements",
           }}
diff --git a/react/modules/templates/ApplicationDetails/components/ApplicationDetailsActionBar.js b/react/modules/templates/ApplicationDetails/components/ApplicationDetailsActionBar.js
index 808acd9fbf8..30b40a3b772 100644
--- a/react/modules/templates/ApplicationDetails/components/ApplicationDetailsActionBar.js
+++ b/react/modules/templates/ApplicationDetails/components/ApplicationDetailsActionBar.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from "react";
 import { useTranslation } from "react-i18next";
 import { Menu } from "@egovernments/digit-ui-react-components";
-import { SubmitBar, ActionBar } from "@egovernments/digit-ui-components";
+import { SubmitBar, Footer } from "@egovernments/digit-ui-components";
 
 function ApplicationDetailsActionBar({ workflowDetails, displayMenu, onActionSelect, setDisplayMenu, businessService, forcedActionPrefix,ActionBarStyle={},MenuStyle={}, saveAttendanceState }) {
   const { t } = useTranslation();
@@ -48,7 +48,7 @@ function ApplicationDetailsActionBar({ workflowDetails, displayMenu, onActionSel
   return (
     <React.Fragment>
       {!workflowDetails?.isLoading && isMenuBotton && !isSingleButton && (
-        <ActionBar style={{...ActionBarStyle}}>
+        <Footer style={{...ActionBarStyle}}>
           {displayMenu && (workflowDetails?.data?.actionState?.nextActions || workflowDetails?.data?.nextActions) ? (
             <Menu
               localeKeyPrefix={forcedActionPrefix || `WORKS_${businessService?.toUpperCase()}`}
@@ -60,10 +60,10 @@ function ApplicationDetailsActionBar({ workflowDetails, displayMenu, onActionSel
             />
           ) : null}
           <SubmitBar ref={menuRef} label={t("WORKS_ACTIONS")} onSubmit={() => setDisplayMenu(!displayMenu)} />
-        </ActionBar>
+        </Footer>
       )}
       {!workflowDetails?.isLoading && !isMenuBotton && isSingleButton && (
-        <ActionBar style={{...ActionBarStyle}}>
+        <Footer style={{...ActionBarStyle}}>
           <button
               style={{ color: "#FFFFFF", fontSize: "18px" }}
               className={"submit-bar"}
@@ -72,7 +72,7 @@ function ApplicationDetailsActionBar({ workflowDetails, displayMenu, onActionSel
               onClick={(e) => { onActionSelect(actions?.[0] || {})}}>
               {t(`${forcedActionPrefix || `WF_EMPLOYEE_${businessService?.toUpperCase()}`}_${actions?.[0]?.action}`)}
             </button>
-        </ActionBar>
+        </Footer>
       )}
     </React.Fragment>
   );
diff --git a/react/package.json b/react/package.json
index d7eac559be7..c14810f4b36 100644
--- a/react/package.json
+++ b/react/package.json
@@ -81,13 +81,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.43",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.44",
     "@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.14",
-    "@egovernments/digit-ui-components": "0.0.2-beta.59",
+    "@egovernments/digit-ui-components": "0.0.2-beta.60",
     "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 163647117b2..2072efc9d0f 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.43/dist/index.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.44/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 5d3a1273d94..253c36dd2e8 100644
--- a/react/ui-components/CHANGELOG.md
+++ b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,16 @@ 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.60] - 2024-12-26
+### New Changes
+- SelectionCard Component is renamed as SelectionTag Component
+- AccordionWrapper Molecule is renamed as AccordionList
+- Sidebar Molecule is renamed as SideNav
+- MobileSideBar Molecule is renamed as MobileSideNav
+- SlideOverMenu Molecule is renamed as SidePanel
+- InfoCard Component is renamed as AlertCard
+- Uploader Component is renamed as FileUpload
+- ActionBar Component is renamed as Footer
 
 ## [0.0.2-beta.56] - 2024-11-16
 ### New Changes
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 92ba1460658..976a2377e9c 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.59",
+  "version": "0.0.2-beta.60",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -52,7 +52,7 @@
     "dist"
   ],
   "dependencies": {    
-    "@egovernments/digit-ui-components-css": "0.0.2-beta.43",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.44",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.14",
     "@googlemaps/js-api-loader": "1.13.10",
diff --git a/react/ui-components/public/index.html b/react/ui-components/public/index.html
index 9826e409c87..22b65cbdca7 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.43/dist/index.css"/>
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.44/dist/index.css"/>
   <link rel="icon" href="https://egov-dev-assets.s3.ap-south-1.amazonaws.com/browser-icon.png" />
   <style>
     .custom-class path {
diff --git a/react/ui-components/src/atoms/Accordion.js b/react/ui-components/src/atoms/Accordion.js
index ba9c6153b64..7b04e90f952 100644
--- a/react/ui-components/src/atoms/Accordion.js
+++ b/react/ui-components/src/atoms/Accordion.js
@@ -28,7 +28,8 @@ const Accordion = ({
 }) => {
   const [isOpen, setIsOpen] = useState(isOpenInitially);
 
-  const iconColor = Colors.lightTheme.text.primary;
+  const iconColor = Colors.lightTheme.primary[1];
+  const toggleIconColor = Colors.lightTheme.text.primary;
   const toggleiconSize = Spacers.spacer6;
   const iconSize = Spacers.spacer6;
 
@@ -81,7 +82,7 @@ const Accordion = ({
           }`}
         >
           <SVG.ArrowBackIos
-            fill={iconColor}
+            fill={toggleIconColor}
             width={toggleiconSize}
             height={toggleiconSize}
           ></SVG.ArrowBackIos>
@@ -125,7 +126,7 @@ Accordion.defaultProps = {
   isClosed: false,
 };
 
-const AccordionWrapper = ({
+const AccordionList = ({
   children,
   allowMultipleOpen = true,
   addDivider,
@@ -167,7 +168,7 @@ const AccordionWrapper = ({
   );
 };
 
-AccordionWrapper.propTypes = {
+AccordionList.propTypes = {
   children: PropTypes.node.isRequired,
   allowMultipleOpen: PropTypes.bool,
   addDivider: PropTypes.bool,
@@ -175,11 +176,11 @@ AccordionWrapper.propTypes = {
   customStyles: PropTypes.object,
 };
 
-AccordionWrapper.defaultProps = {
+AccordionList.defaultProps = {
   allowMultipleOpen: true,
-  addDivider: true,
+  addDivider: false,
   customClassName: "",
   customStyles: {},
 };
 
-export { AccordionWrapper, Accordion };
+export { AccordionList, Accordion };
diff --git a/react/ui-components/src/atoms/ActionBar.js b/react/ui-components/src/atoms/ActionBar.js
deleted file mode 100644
index d5575bbb031..00000000000
--- a/react/ui-components/src/atoms/ActionBar.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React,{useState,useEffect} from "react";
-import PropTypes from "prop-types";
-
-const ActionBar = (props) => {
-
-  const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 480);
-  const onResize = () => {
-    if (window.innerWidth <= 480) {
-      if (!isMobileView) {
-        setIsMobileView(true);
-      }
-    } else {
-      if (isMobileView) {
-        setIsMobileView(false);
-      }
-    }
-  };
-  useEffect(() => {
-    window.addEventListener("resize", () => {
-      onResize();
-    });
-    return () => {
-      window.removeEventListener("resize", () => {
-        onResize();
-      });
-    };
-  });
-
-  const hasActionFields = props?.actionFields?.length > 0;
-  const allowedActionFields = hasActionFields
-    ? props?.actionFields.slice(0, props?.maxActionFieldsAllowed || 5)
-    : [];
-  const sortedActionFields = [...allowedActionFields].sort((a, b) => {
-    const typeOrder = { primary: 3, secondary: 2, tertiary: 1 };
-    const getTypeOrder = (button) =>
-      typeOrder[(button.props.variation || "").toLowerCase()];
-    return getTypeOrder(a) - getTypeOrder(b);
-  });
-  const finalActionFields = props?.sortActionFields
-    ? isMobileView
-      ? sortedActionFields.reverse()
-      : sortedActionFields
-    : allowedActionFields;
-
-
-
-  return (
-    <div className={`digit-action-bar-wrap ${props?.className ? props?.className : ""}`} style={props?.style}>
-      {hasActionFields && (
-        <div
-          className={`digit-action-bar-fields ${
-            props?.setactionFieldsToRight ? "toRight" : ""
-          } ${
-            props?.setactionFieldsToLeft ? "toLeft" : ""
-          }`}
-        >
-          {finalActionFields.map((field, index) => (
-            <div className="action-bar-individual-action-field" key={index}>
-              {field}
-            </div>
-          ))}
-        </div>
-      )}
-      {props?.children}
-    </div>
-  );
-};
-
-ActionBar.propTypes = {
-  /** custom class of the svg icon */
-  className: PropTypes.string,
-  /** custom style of the svg icon */
-  style: PropTypes.object,
-};
-
-export default ActionBar;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/InfoCard.js b/react/ui-components/src/atoms/AlertCard.js
similarity index 91%
rename from react/ui-components/src/atoms/InfoCard.js
rename to react/ui-components/src/atoms/AlertCard.js
index 8161e882780..0866393e10a 100644
--- a/react/ui-components/src/atoms/InfoCard.js
+++ b/react/ui-components/src/atoms/AlertCard.js
@@ -4,7 +4,7 @@ import StringManipulator from "./StringManipulator";
 import PropTypes from "prop-types";
 import { Colors} from "../constants/colors/colorconstants";
 
-const InfoCard = ({ label, text, variant, style, textStyle, additionalElements, inline, className, headerWrapperClassName,headerClassName}) => {
+const AlertCard = ({ label, text, variant, style, textStyle, additionalElements, inline, className, headerWrapperClassName,headerClassName}) => {
 
   const warningIconColor = Colors.lightTheme.alert.warning;
   const errorIconColor = Colors.lightTheme.alert.error;
@@ -50,7 +50,7 @@ const InfoCard = ({ label, text, variant, style, textStyle, additionalElements,
   );
 };
 
-InfoCard.propTypes = {
+AlertCard.propTypes = {
   label: PropTypes.string.isRequired,
   text: PropTypes.string,
   variant: PropTypes.string,
@@ -60,7 +60,7 @@ InfoCard.propTypes = {
   inline: PropTypes.bool,
 };
 
-InfoCard.defaultProps = {
+AlertCard.defaultProps = {
   label: "",
   text: "",
   varinat: "",
@@ -70,4 +70,4 @@ InfoCard.defaultProps = {
   inline: false,
 };
 
-export default InfoCard;
+export default AlertCard;
diff --git a/react/ui-components/src/atoms/BreadCrumb.js b/react/ui-components/src/atoms/BreadCrumb.js
index 53ea2ddfe39..5e09ace66c1 100644
--- a/react/ui-components/src/atoms/BreadCrumb.js
+++ b/react/ui-components/src/atoms/BreadCrumb.js
@@ -119,8 +119,4 @@ BreadCrumb.propTypes = {
   expandText: PropTypes.string
 };
 
-BreadCrumb.defaultProps = {
-  successful: true,
-};
-
 export default BreadCrumb;
diff --git a/react/ui-components/src/atoms/ButtonGroup.js b/react/ui-components/src/atoms/ButtonGroup.js
index ce586403669..e798c41a343 100644
--- a/react/ui-components/src/atoms/ButtonGroup.js
+++ b/react/ui-components/src/atoms/ButtonGroup.js
@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import Button from "./Button";
 
-const ButtonGroup = ({ buttonsArray ,sortButtons}) => {
+const ButtonGroup = ({ buttonsArray ,sortButtons,equalButtons}) => {
   const [isMobileView, setIsMobileView] = React.useState(
     window.innerWidth <= 480
   );
@@ -28,11 +28,11 @@ const ButtonGroup = ({ buttonsArray ,sortButtons}) => {
     };
   });
 
-  const maxWidth = Math.max(
+  const maxWidth = equalButtons ? Math.max(
     ...buttonsArray.map((button) => button.props.label.length * 14.9)
-  );
+  ) : null;
 
-  const updatedButtonsArray = buttonsArray && buttonsArray.length > 1 ? buttonsArray.map((button) => {
+  const updatedButtonsArray = buttonsArray && buttonsArray.length > 1 && equalButtons ? buttonsArray.map((button) => {
     const buttonProps = {
       ...button.props,
       style: { ...(button.props.style || {}), width: `${maxWidth}px` },
@@ -65,8 +65,12 @@ const ButtonGroup = ({ buttonsArray ,sortButtons}) => {
 
 ButtonGroup.propTypes = {
   buttonsArray: PropTypes.arrayOf(PropTypes.element).isRequired,
-  sortButtons:PropTypes.bool
+  sortButtons:PropTypes.bool,
+  equalButtons:PropTypes.bool
 };
 
+ButtonGroup.defaultProps = {
+  equalButtons: true,
+}
 export default ButtonGroup;
 
diff --git a/react/ui-components/src/atoms/CustomSVG.js b/react/ui-components/src/atoms/CustomSVG.js
index 27788bc19e3..498853ed87b 100644
--- a/react/ui-components/src/atoms/CustomSVG.js
+++ b/react/ui-components/src/atoms/CustomSVG.js
@@ -1,9 +1,9 @@
 import React from "react";
 
-const CreateEstimateIcon = ({ className, style = {}, fill = "#F47738" }) => (
+const CreateEstimateIcon = ({ className, style = {}, fill = "#C84C0E",width = '18',height ='18' }) => (
   <svg
-    width="18"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 18 18"
     fill="none"
     className={className}
@@ -17,10 +17,10 @@ const CreateEstimateIcon = ({ className, style = {}, fill = "#F47738" }) => (
   </svg>
 );
 
-const GotoInboxIcon = ({ className, style = {}, fill = "#F47738" }) => (
+const GotoInboxIcon = ({ className, style = {}, fill = "#C84C0E",width="15",height="13" }) => (
   <svg
-    width="15"
-    height="13"
+    width={width}
+    height={height}
     viewBox="0 0 15 13"
     fill="none"
     className={className}
@@ -34,23 +34,24 @@ const GotoInboxIcon = ({ className, style = {}, fill = "#F47738" }) => (
   </svg>
 );
 
-const ArrowLeft = ({ className }) => (
+const ArrowLeft = ({ className,width="19",height="19",fill="black"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="black"
+    fill={fill}
     className={className}
-    width="19px"
+    width={width}
+    height={height}
   >
     <path d="M24 0v24H0V0h24z" fill="none" opacity=".87" />
     <path d="M14 7l-5 5 5 5V7z" />
   </svg>
 );
 
-const ArrowLeftWhite = ({ className, fill = "white", style = {} }) => (
+const ArrowLeftWhite = ({ className, fill = "white", style = {},width="16",height="16" }) => (
   <svg
-    width="16"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 16 16"
     className={className}
     fill="none"
@@ -63,10 +64,10 @@ const ArrowLeftWhite = ({ className, fill = "white", style = {} }) => (
     />
   </svg>
 );
-const PrivacyMaskIcon = ({ className, style = {} }) => (
+const PrivacyMaskIcon = ({ className, style = {} ,width="22",height="15",fill="#EEEEEE"}) => (
   <svg
-    width="22"
-    height="15"
+    width={width}
+    height={height}
     viewBox="0 0 22 15"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -75,151 +76,156 @@ const PrivacyMaskIcon = ({ className, style = {} }) => (
   >
     <path
       d="M11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 12.5C8.24 12.5 6 10.26 6 7.5C6 4.74 8.24 2.5 11 2.5C13.76 2.5 16 4.74 16 7.5C16 10.26 13.76 12.5 11 12.5ZM11 4.5C9.34 4.5 8 5.84 8 7.5C8 9.16 9.34 10.5 11 10.5C12.66 10.5 14 9.16 14 7.5C14 5.84 12.66 4.5 11 4.5Z"
-      fill="#EEEEEE"
+      fill={fill}
     />
   </svg>
 );
 
-const ArrowDown = ({ className, onClick, styles, disable }) => (
+const ArrowDown = ({ className, onClick, styles, disable,width="18",height="18",fill="black"}) => (
   <svg
     style={{ ...styles }}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill={disable ? "#9E9E9E" : "black"}
+    fill={disable ? "#9E9E9E" : fill}
     className={className}
     onClick={onClick}
-    width="18px"
-    height="18px"
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M7 10l5 5 5-5H7z" />
   </svg>
 );
 
-const ArrowBack = ({ className, onClick }) => (
+const ArrowBack = ({ className, onClick ,width="18",height="18",fill="black"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="black"
+    fill={fill}
     className={className}
     onClick={onClick}
-    width="18px"
-    height="18px"
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z" />
   </svg>
 );
 
-const ArrowForward = ({ className, onClick }) => (
+const ArrowForward = ({ className, onClick,width="18",height = "18",fill ="black" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="black"
+    fill={fill}
     className={className}
     onClick={onClick}
-    width="18px"
-    height="18px"
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z" />
   </svg>
 );
 
-const ArrowToFirst = ({ className, onClick }) => (
+const ArrowToFirst = ({ className, onClick,width="18",height="18",fill="#505A5F"}) => (
   <svg
-    width="18px"
-    height="18px"
+    width={width}
+    height={height}
     viewBox="0 0 13 12"
-    fill="black"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     className={className}
     onClick={onClick}
   >
     <path
       d="M12.41 10.59L7.82 6L12.41 1.41L11 0L5 6L11 12L12.41 10.59ZM0 0H2V12H0V0Z"
-      fill="#505a5f"
+      fill={fill}
     ></path>
   </svg>
 );
 
-const ArrowToLast = ({ className, onClick }) => (
+const ArrowToLast = ({ className, onClick,fill="#505A5F",width="18",height="18" }) => (
   <svg
-    width="18px"
-    height="18px"
+    width={width}
+    height={height}
     viewBox="0 0 13 12"
-    fill="black"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     className={className}
     onClick={onClick}
   >
     <path
       d="M0.589844 1.41L5.17984 6L0.589844 10.59L1.99984 12L7.99984 6L1.99984 0L0.589844 1.41ZM10.9998 0H12.9998V12H10.9998V0Z"
-      fill="#505a5f"
+      fill={fill}
     />
   </svg>
 );
 
-const DownloadPrefixIcon = ({ className, onClick }) => (
+const DownloadPrefixIcon = ({ className, onClick,width="24",height="24",fill="#C84C0E" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24"
+    height={height}
     viewBox="0 0 24 24"
-    width="24"
+    width={width}
+    fill={fill}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" />
   </svg>
 );
 
-const CameraSvg = ({ className }) => (
+const CameraSvg = ({ className, fill="black", width="46",height="42" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     enableBackground="new 0 0 24 24"
     className={className}
     viewBox="0 0 24 24"
-    fill="black"
-    width="46px"
-    height="42px"
+    fill={fill}
+    width={width}
+    height={height}
   >
     <rect fill="none" height="24" width="24" />
     <path d="M3,4V1h2v3h3v2H5v3H3V6H0V4H3z M6,10V7h3V4h7l1.83,2H21c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2V10H6z M13,19c2.76,0,5-2.24,5-5s-2.24-5-5-5s-5,2.24-5,5S10.24,19,13,19z M9.8,14c0,1.77,1.43,3.2,3.2,3.2s3.2-1.43,3.2-3.2 s-1.43-3.2-3.2-3.2S9.8,12.23,9.8,14z" />
   </svg>
 );
 
-const DeleteBtn = ({ className, onClick, fill }) => (
+const DeleteBtn = ({ className, onClick, fill="white",width="18",height="18" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="white"
+    fill={fill}
     className={className}
     onClick={onClick}
-    width="18px"
-    height="18px"
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0V0z" fill={fill} />
     <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
   </svg>
 );
 
-const SuccessSvg = ({ className }) => (
+const SuccessSvg = ({ className,fill="#00703C" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="#00703C"
+    fill={fill}
     className={className}
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" />
   </svg>
 );
 
-const ErrorSvg = ({ className }) => (
+const ErrorSvg = ({ className,fill="#D4351C" ,width="24",height="24" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="#d4351c"
+    fill={fill}
     className={className}
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <circle cx="12" cy="19" r="2" />
@@ -227,7 +233,7 @@ const ErrorSvg = ({ className }) => (
   </svg>
 );
 
-const StarFilled = ({ className, id, onClick, styles, percentage = 100 }) => (
+const StarFilled = ({ className, id, onClick, styles, percentage = 100,fill="#C84C0E" ,width="48",height="48" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     enableBackground="new 0 0 24 24"
@@ -235,15 +241,15 @@ const StarFilled = ({ className, id, onClick, styles, percentage = 100 }) => (
     style={styles}
     onClick={onClick}
     viewBox="0 0 24 24"
-    fill="#F47738"
-    width="48px"
-    height="48px"
+    fill={fill}
+    width={width}
+    height={height}
   >
     <linearGradient id={id} x1="0" x2="1" y1="0" y2="0">
-      <stop offset="0%" stopColor="#F47738" stopOpacity={1}></stop>
+      <stop offset="0%" stopColor={fill} stopOpacity={1}></stop>
       <stop
         offset={`${percentage}%`}
-        stopColor="#F47738"
+        stopColor={fill}
         stopOpacity={1}
       ></stop>
       <stop offset={`${percentage}%`} stopColor="white" stopOpacity={0}></stop>
@@ -256,22 +262,22 @@ const StarFilled = ({ className, id, onClick, styles, percentage = 100 }) => (
       <path
         d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z"
         fill={`url(#${id})`}
-        stroke="#F47738"
+        stroke={fill}
         strokeWidth={1}
       />
     </g>
   </svg>
 );
 
-const StarEmpty = ({ className, onClick, styles }) => (
+const StarEmpty = ({ className, onClick, styles,fill="#C84C0E" ,width="48",height="48" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="#F47738"
+    fill={fill}
     className={className}
     style={styles}
-    width="48px"
-    height="48px"
+    width={width}
+    height={height}
     onClick={onClick}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
@@ -282,112 +288,112 @@ const StarEmpty = ({ className, onClick, styles }) => (
   </svg>
 );
 
-const DownloadImgIcon = () => (
+const DownloadImgIcon = ({width="14",height="17",fill="#C84C0E"}) => (
   <svg
-    width="14"
-    height="17"
+    width={width}
+    height={height}
     viewBox="0 0 14 17"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M14 6H10V0H4V6H0L7 13L14 6ZM0 15V17H14V15H0Z" fill="#F47738" />
+    <path d="M14 6H10V0H4V6H0L7 13L14 6ZM0 15V17H14V15H0Z" fill={fill} />
   </svg>
 );
 
-const PrevIcon = () => (
+const PrevIcon = ({fill="#0B0C0C" ,width="8",height="12"}) => (
   <svg
-    width="8"
-    height="12"
+    width={width}
+    height={height}
     viewBox="0 0 8 12"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M1.99997 0L0.589966 1.41L5.16997 6L0.589966 10.59L1.99997 12L7.99997 6L1.99997 0Z"
-      fill="#0B0C0C"
+      fill={fill}
     />
   </svg>
 );
 
-const ViewsIcon = () => (
+const ViewsIcon = ({fill="#C84C0E" ,width="22",height="16"}) => (
   <svg
-    width="22"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 22 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M11 0.5C6 0.5 1.73 3.61 0 8C1.73 12.39 6 15.5 11 15.5C16 15.5 20.27 12.39 22 8C20.27 3.61 16 0.5 11 0.5ZM11 13C8.24 13 6 10.76 6 8C6 5.24 8.24 3 11 3C13.76 3 16 5.24 16 8C16 10.76 13.76 13 11 13ZM11 5C9.34 5 8 6.34 8 8C8 9.66 9.34 11 11 11C12.66 11 14 9.66 14 8C14 6.34 12.66 5 11 5Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const DocumentIcon = () => (
+const DocumentIcon = ({fill="#C84C0E" ,width="100",height="100"}) => (
   <svg
-    width="100"
-    height="100"
+    width={width}
+    height={height}
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM11 14H4V12H11V14ZM14 10H4V8H14V10ZM14 6H4V4H14V6Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const DocumentIconSolid = () => (
+const DocumentIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24px"
+    height={height}
     viewBox="0 0 24 24"
-    width="24px"
-    fill="#FFFFFF"
+    width={width}
+    fill={fill}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" />
   </svg>
 );
 
-const SurveyIconSolid = () => (
+const SurveyIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24px"
+    height={height}
     viewBox="0 0 24 24"
-    width="24px"
-    fill="#FFFFFF"
+    width={width}
+    fill={fill}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z" />
   </svg>
 );
 
-const PMBIcon = () => (
+const PMBIcon = ({fill="#C84C0E" ,width="32",height="16"}) => (
   <svg
-    width="32"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 32 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M16 9C18.1733 9 20.0933 9.52 21.6533 10.2C23.0933 10.84 24 12.28 24 13.84V16H8V13.8533C8 12.28 8.90667 10.84 10.3467 10.2133C11.9067 9.52 13.8267 9 16 9ZM5.33333 9.33333C6.8 9.33333 8 8.13333 8 6.66667C8 5.2 6.8 4 5.33333 4C3.86667 4 2.66667 5.2 2.66667 6.66667C2.66667 8.13333 3.86667 9.33333 5.33333 9.33333ZM6.84 10.8C6.34667 10.72 5.85333 10.6667 5.33333 10.6667C4.01333 10.6667 2.76 10.9467 1.62667 11.44C0.64 11.8667 0 12.8267 0 13.9067V16H6V13.8533C6 12.7467 6.30667 11.7067 6.84 10.8ZM26.6667 9.33333C28.1333 9.33333 29.3333 8.13333 29.3333 6.66667C29.3333 5.2 28.1333 4 26.6667 4C25.2 4 24 5.2 24 6.66667C24 8.13333 25.2 9.33333 26.6667 9.33333ZM32 13.9067C32 12.8267 31.36 11.8667 30.3733 11.44C29.24 10.9467 27.9867 10.6667 26.6667 10.6667C26.1467 10.6667 25.6533 10.72 25.16 10.8C25.6933 11.7067 26 12.7467 26 13.8533V16H32V13.9067ZM16 0C18.2133 0 20 1.78667 20 4C20 6.21333 18.2133 8 16 8C13.7867 8 12 6.21333 12 4C12 1.78667 13.7867 0 16 0Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const PMBIconSolid = () => (
+const PMBIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     enableBackground="new 0 0 24 24"
-    height="24px"
+    height={height}
     viewBox="0 0 24 24"
-    width="24px"
-    fill="#FFFFFF"
+    width={width}
+    fill={fill}
   >
     <g>
       <rect fill="none" height="24" width="24" />
@@ -400,41 +406,41 @@ const PMBIconSolid = () => (
   </svg>
 );
 
-const EventsIconSolid = () => (
+const EventsIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24px"
+    height={height}
     viewBox="0 0 24 24"
-    width="24px"
-    fill="#FFFFFF"
+    width={width}
+    fill={fill}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zm-2 5h-5v5h5v-5z" />
   </svg>
 );
 
-const DustbinIcon = () => (
+const DustbinIcon = ({fill="#C84C0E" ,width="14",height="18"}) => (
   <svg
-    width="14"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 14 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const ImageIcon = () => (
+const ImageIcon = ({fill="#000000" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24px"
+    height={height}
     viewBox="0 0 24 24"
-    width="24px"
-    fill="#000000"
+    width={width}
+    fill={fill}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" />
@@ -449,17 +455,17 @@ const ImageIcon = () => (
 // <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z" />
 // </svg>
 
-const DocumentSVG = () => (
+const DocumentSVG = ({fill="#505A5F" ,width="80",height="80"}) => (
   <svg
-    width="80"
-    height="80"
+    width={width}
+    height={height}
     viewBox="0 0 80 80"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M46.6667 6.6665H20C16.3334 6.6665 13.3667 9.6665 13.3667 13.3332L13.3334 66.6665C13.3334 70.3332 16.3 73.3332 19.9667 73.3332H60C63.6667 73.3332 66.6667 70.3332 66.6667 66.6665V26.6665L46.6667 6.6665ZM53.3334 59.9998H26.6667V53.3332H53.3334V59.9998ZM53.3334 46.6665H26.6667V39.9998H53.3334V46.6665ZM43.3334 29.9998V11.6665L61.6667 29.9998H43.3334Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
@@ -475,6 +481,7 @@ const PDFSvg = ({
     borderRadius: "4px",
   },
   viewBox = "0 0 80 80",
+  fill="#505A5F"
 }) => (
   <svg
     {...{ className, width, height, style, viewBox }}
@@ -483,19 +490,19 @@ const PDFSvg = ({
   >
     <path
       d="M46.6667 6.6665H20C16.3334 6.6665 13.3667 9.6665 13.3667 13.3332L13.3334 66.6665C13.3334 70.3332 16.3 73.3332 19.9667 73.3332H60C63.6667 73.3332 66.6667 70.3332 66.6667 66.6665V26.6665L46.6667 6.6665ZM53.3334 59.9998H26.6667V53.3332H53.3334V59.9998ZM53.3334 46.6665H26.6667V39.9998H53.3334V46.6665ZM43.3334 29.9998V11.6665L61.6667 29.9998H43.3334Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const SearchIconSvg = ({ className, onClick }) => (
+const SearchIconSvg = ({ className, onClick,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="#f47738"
+    fill={fill}
     className={className}
-    width="24px"
-    height="24px"
+    width={width}
+    height={height}
     onClick={onClick}
   >
     <path d="M0 0h24v24H0z" fill="none" />
@@ -503,37 +510,43 @@ const SearchIconSvg = ({ className, onClick }) => (
   </svg>
 );
 
-const CheckSvg = ({ className, style = {} }) => (
+const CheckSvg = ({ className, style = {},fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="#F47738"
+    fill={fill}
     className={className}
     style={style}
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
   </svg>
 );
 
-const RoundedCheck = ({ className }) => (
+const RoundedCheck = ({ className,fill="#FFFFFF" ,width="24",height="24" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="#FFFFFF"
+    fill={fill}
     className={className}
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z" />
   </svg>
 );
 
-const Calender = ({ className, onClick }) => (
+const Calender = ({ className, onClick,fill="black" ,width="24",height="24"  }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="black"
+    fill={fill}
     className={className}
+    width={width}
+    height={height}
     onClick={onClick}
   >
     <path d="M0 0h24v24H0z" fill="none" />
@@ -541,25 +554,27 @@ const Calender = ({ className, onClick }) => (
   </svg>
 );
 
-const Phone = ({ className, fillcolor, style }) => (
+const Phone = ({ className, fillcolor, style,fill="#C84C0E" ,width="24",height="24"  }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill={fillcolor ? fillcolor : "#f47738"}
+    fill={fill}
     viewBox="0 0 24 24"
     style={style ? style : {}}
     className={className}
+    width={width}
+    height={height}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
   </svg>
 );
 
-const FilterSvg = ({ className,fill,style ,width,height,onClick}) => (
+const FilterSvg = ({ className,style,onClick,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill={fill || "#f47738"}
-    width={width || "24"}
-    height={height || "24"}
+    fill={fill}
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     className={className}
     style={style}
@@ -569,10 +584,10 @@ const FilterSvg = ({ className,fill,style ,width,height,onClick}) => (
   </svg>
 );
 
-const SortSvg = ({ className }) => (
+const SortSvg = ({ className,fill="#505A5F" ,width="24",height="16"  }) => (
   <svg
-    width="24"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 24 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -580,28 +595,28 @@ const SortSvg = ({ className }) => (
   >
     <path
       d="M8 16H24V13.3333H8V16ZM0 0V2.66667H24V0H0ZM8 9.33333H24V6.66667H8V9.33333Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const Close = ({ className, style }) => (
+const Close = ({ className, style,fill="#9E9E9E" ,width="24",height="24"  }) => (
   <svg
     style={{ ...style }}
     focusable="false"
     viewBox="0 0 24 24"
     aria-hidden="true"
-    width="24"
-    height="24"
-    fill="#9E9E9E"
+    width={width}
+    height={height}
+    fill={fill}
     className={className}
   >
     <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
   </svg>
 );
 
-const Feedback = ({ className }) => (
-  <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true">
+const Feedback = ({ className,fill="#C84C0E" ,width="24",height="24"  }) => (
+  <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" width={width} height={height} fill={fill}>
     <path
       d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"
       className={className}
@@ -611,87 +626,89 @@ const Feedback = ({ className }) => (
 
 // Download Icon
 
-const GetApp = ({ className }) => (
+const GetApp = ({ className ,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
-    fill="#f47738"
+    fill={fill}
     className={className}
   >
     <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
   </svg>
 );
 
-const HamburgerIcon = ({ className, styles, color }) => (
+const HamburgerIcon = ({ className, styles ,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     style={{ ...styles }}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     focusable="false"
     viewBox="0 0 24 24"
     aria-hidden="true"
   >
-    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill={color}></path>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill={fill}></path>
   </svg>
 );
 
-export const HomeIcon = ({ className, styles }) => (
-  <svg className={className} viewBox="0 0 24 24" style={{ ...styles }}>
+export const HomeIcon = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+  <svg className={className} viewBox="0 0 24 24" style={{ ...styles }} fill={fill} width={width} height={height}>
     <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
   </svg>
 );
 
-export const LanguageIcon = ({ className, styles }) => (
-  <svg className={className} viewBox="0 0 24 24" style={{ ...styles }}>
+export const LanguageIcon = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+  <svg className={className} viewBox="0 0 24 24" style={{ ...styles }} width={width} height={height}>
     <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path>
   </svg>
 );
 
-export const LogoutIcon = ({ className, styles }) => (
-  <svg className={className} viewBox="0 0 24 24" style={{ ...styles }}>
+export const LogoutIcon = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+  <svg className={className} viewBox="0 0 24 24" style={{ ...styles }} width={width} height={height}>
     <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"></path>
   </svg>
 );
 
-const CalendarIcon = (props) => (
+const CalendarIcon = (props,fill="black" ,width="24",height="24") => (
   <svg
     {...props}
-    fill={props.isdisabled ? "#e3e3e3" : "Black"}
+    fill={props?.isdisabled ? "#e3e3e3" : fill}
     xmlns="http://www.w3.org/2000/svg"
-    height="24"
+    height={height}
     viewBox="0 0 24 24"
-    width="24"
+    width={width}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
   </svg>
 );
 
-const SortDown = (style,width,height,fill,onClick) => (
+const SortDown = (style,onClick,fill="#C84C0E" ,width="24",height="24") => (
   <svg
     style={{ display: "inline-block" ,...style }}
     xmlns="http://www.w3.org/2000/svg"
     enableBackground="new 0 0 24 24"
-    height={height || "24"}
+    height={height}
     viewBox="0 0 24 24"
-    width={width || "24"}
+    width={width}
     onClick={onClick}
+    fill={fill}
   >
     <rect fill="none" height="24" width="24" />
     <path d="M19,15l-1.41-1.41L13,18.17V2H11v16.17l-4.59-4.59L5,15l7,7L19,15z" />
   </svg>
 );
 
-const SortUp = (style,width,height,fill,onClick) => (
+const SortUp = (style,onClick,fill="#C84C0E" ,width="24",height="24") => (
   <svg
     style={{ display: "inline-block", ...style }}
     xmlns="http://www.w3.org/2000/svg"
     enableBackground="new 0 0 24 24"
-    height={height || "24"}
+    height={height}
     viewBox="0 0 24 24"
-    width={width || "24"}
+    width={width}
+    fill={fill}
     onClick={onClick}
   >
     <rect fill="none" height="24" width="24" />
@@ -699,10 +716,10 @@ const SortUp = (style,width,height,fill,onClick) => (
   </svg>
 );
 
-const ArrowRightInbox = ({ style }) => (
+const ArrowRightInbox = ({ style,fill="#C84C0E" ,width="20",height="14" }) => (
   <svg
-    width="20"
-    height="14"
+    width={width}
+    height={height}
     viewBox="0 0 20 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -710,33 +727,35 @@ const ArrowRightInbox = ({ style }) => (
   >
     <path
       d="M13 0L11.59 1.41L16.17 6H0V8H16.17L11.58 12.59L13 14L20 7L13 0Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const ShippingTruck = ({ className, styles }) => (
+const ShippingTruck = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     style={{ ...styles }}
     className={className}
     xmlns="http://www.w3.org/2000/svg"
-    height="24"
+    height={height}
     viewBox="0 0 24 24"
-    width="24"
+    width={width}
+    fill={fill}
   >
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
   </svg>
 );
 
-function CloseSvg({ onClick }) {
+function CloseSvg({ onClick,fill="#C84C0E" ,width="24",height="24" }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      height="24"
+      height={height}
       viewBox="0 0 24 24"
-      width="24"
+      width={width}
       onClick={onClick}
+      fill={fill}
     >
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
@@ -744,7 +763,7 @@ function CloseSvg({ onClick }) {
   );
 }
 
-const UpwardArrow = ({ color = "#00703C", rotate = 0, marginRight = 0 }) => (
+const UpwardArrow = ({ rotate = 0, marginRight = 0,fill="#00703C" ,width="11",height="16" }) => (
   <svg
     style={{
       display: "inline-block",
@@ -752,28 +771,28 @@ const UpwardArrow = ({ color = "#00703C", rotate = 0, marginRight = 0 }) => (
       transform: `rotate(${rotate}deg)`,
       marginRight: `${marginRight}px`,
     }}
-    width="11"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 11 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M0 5.6L1.10786 6.728L4.71429 3.064V16H6.28571V3.064L9.89214 6.736L11 5.6L5.5 0L0 5.6Z"
-      fill={color}
+      fill={fill}
     />
   </svg>
 );
 
-const DownwardArrow = (props) => (
-  <UpwardArrow {...props} color="#e54d42" rotate={180} />
+const DownwardArrow = (props,fill="#E54D42" ,width="24",height="24") => (
+  <UpwardArrow {...props} color={fill} rotate={180} width={width} height={height} />
 );
 
-const DownloadIcon = ({ styles, className, onClick, fill = "#505A5F" }) => (
+const DownloadIcon = ({ styles, className, onClick, fill = "#505A5F",width="19",height="24" }) => (
   <svg
     style={{ ...styles }}
-    width="19"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 19 24"
     fill={fill}
     xmlns="http://www.w3.org/2000/svg"
@@ -787,52 +806,52 @@ const DownloadIcon = ({ styles, className, onClick, fill = "#505A5F" }) => (
   </svg>
 );
 
-const GenericFileIcon = () => (
+const GenericFileIcon = ({fill="#505A5F" ,width="80",height="100"}) => (
   <svg
-    width="80"
-    height="100"
+    width={width}
+    height={height}
     viewBox="0 0 80 100"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M50 0H10C4.5 0 0.0500011 4.5 0.0500011 10L0 90C0 95.5 4.45 100 9.95 100H70C75.5 100 80 95.5 80 90V30L50 0ZM60 80H20V70H60V80ZM60 60H20V50H60V60ZM45 35V7.5L72.5 35H45Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const ExternalLinkIcon = () => (
+const ExternalLinkIcon = ({fill="#C84C0E" ,width="18",height="18"}) => (
   <svg
-    width="18"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M16 16H2V2H9V0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.1 18 18 17.1 18 16V9H16V16ZM11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0H11Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const PrimaryDownlaodIcon = () => (
+const PrimaryDownlaodIcon = ({fill="#C84C0E" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
-    fill="#f47738"
+    fill={fill}
   >
     <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
   </svg>
 );
 
-const Ellipsis = ({ className, onClick }) => (
+const Ellipsis = ({ className, onClick,fill="#B1B4B6" ,width="4",height="16" }) => (
   <svg
-    width="4"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 4 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -841,15 +860,15 @@ const Ellipsis = ({ className, onClick }) => (
   >
     <path
       d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-      fill="#B1B4B6"
+      fill={fill}
     />
   </svg>
 );
 
-const Poll = () => (
+const Poll = ({fill="#C84C0E" ,width="40",height="40"}) => (
   <svg
-    width="40"
-    height="40"
+    width={width}
+    height={height}
     viewBox="0 0 40 40"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -860,30 +879,30 @@ const Poll = () => (
     />
     <path
       d="M31.6667 5H8.33333C6.5 5 5 6.5 5 8.33333V31.6667C5 33.5 6.5 35 8.33333 35H31.6667C33.5 35 35 33.5 35 31.6667V8.33333C35 6.5 33.5 5 31.6667 5ZM15 28.3333H11.6667V16.6667H15V28.3333ZM21.6667 28.3333H18.3333V11.6667H21.6667V28.3333ZM28.3333 28.3333H25V21.6667H28.3333V28.3333Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const Details = () => (
+const Details = ({fill="#505A5F" ,width="21",height="16"}) => (
   <svg
-    width="22"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 22 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M11 0.5C6 0.5 1.73 3.61 0 8C1.73 12.39 6 15.5 11 15.5C16 15.5 20.27 12.39 22 8C20.27 3.61 16 0.5 11 0.5ZM11 13C8.24 13 6 10.76 6 8C6 5.24 8.24 3 11 3C13.76 3 16 5.24 16 8C16 10.76 13.76 13 11 13ZM11 5C9.34 5 8 6.34 8 8C8 9.66 9.34 11 11 11C12.66 11 14 9.66 14 8C14 6.34 12.66 5 11 5Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const FilterIcon = ({ onClick }) => (
+const FilterIcon = ({ onClick,fill="#505A5F" ,width="22",height="22" }) => (
   <svg
-    width="22"
-    height="22"
+    width={width}
+    height={height}
     viewBox="0 0 22 22"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -891,63 +910,63 @@ const FilterIcon = ({ onClick }) => (
   >
     <path
       d="M0.666904 2.48016C3.36024 5.9335 8.33357 12.3335 8.33357 12.3335V20.3335C8.33357 21.0668 8.93357 21.6668 9.6669 21.6668H12.3336C13.0669 21.6668 13.6669 21.0668 13.6669 20.3335V12.3335C13.6669 12.3335 18.6269 5.9335 21.3202 2.48016C22.0002 1.60016 21.3736 0.333496 20.2669 0.333496H1.72024C0.613571 0.333496 -0.0130959 1.60016 0.666904 2.48016Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const RefreshIcon = () => (
+const RefreshIcon = ({fill="#0B0C0C" ,width="16",height="22"}) => (
   <svg
-    width="16"
-    height="22"
+    width={width}
+    height={height}
     viewBox="0 0 16 22"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M8 5V8L12 4L8 0V3C3.58 3 0 6.58 0 11C0 12.57 0.46 14.03 1.24 15.26L2.7 13.8C2.25 12.97 2 12.01 2 11C2 7.69 4.69 5 8 5ZM14.76 6.74L13.3 8.2C13.74 9.04 14 9.99 14 11C14 14.31 11.31 17 8 17V14L4 18L8 22V19C12.42 19 16 15.42 16 11C16 9.43 15.54 7.97 14.76 6.74Z"
-      fill="#0B0C0C"
+      fill={fill}
     />
   </svg>
 );
 
-const RefreshSVG = () => (
+const RefreshSVG = ({fill="#505A5F" ,width="17",height="17"}) => (
   <svg
-    width="17"
-    height="17"
+    width={width}
+    height={height}
     viewBox="0 0 16 22"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M8 5V8L12 4L8 0V3C3.58 3 0 6.58 0 11C0 12.57 0.46 14.03 1.24 15.26L2.7 13.8C2.25 12.97 2 12.01 2 11C2 7.69 4.69 5 8 5ZM14.76 6.74L13.3 8.2C13.74 9.04 14 9.99 14 11C14 14.31 11.31 17 8 17V14L4 18L8 22V19C12.42 19 16 15.42 16 11C16 9.43 15.54 7.97 14.76 6.74Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const PrintIcon = () => (
+const PrintIcon = ({fill="#505A5F" ,width="20",height="18"}) => (
   <svg
-    width="20"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 20 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M17 5H3C1.34 5 0 6.34 0 8V14H4V18H16V14H20V8C20 6.34 18.66 5 17 5ZM14 16H6V11H14V16ZM17 9C16.45 9 16 8.55 16 8C16 7.45 16.45 7 17 7C17.55 7 18 7.45 18 8C18 8.55 17.55 9 17 9ZM16 0H4V4H16V0Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
-function PropertyHouse({ className, styles }) {
+function PropertyHouse({ className, styles,fill="#FFFFFF" ,width="24",height="24" }) {
   return (
     <svg
       className={className}
-      fill="#FFFFFF"
+      fill={fill}
       style={{ ...styles }}
-      width="24"
-      height="24"
+      width={width}
+      height={height}
       viewBox="0 0 40 40"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -957,12 +976,12 @@ function PropertyHouse({ className, styles }) {
   );
 }
 
-const InfoBannerIcon = ({ fill = "#3498DB", styles }) => {
+const InfoBannerIcon = ({ fill = "#3498DB", styles,width="20",height="20" }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={width}
+      height={height}
       viewBox="0 0 20 20"
       fill="none"
       style={styles}
@@ -974,12 +993,12 @@ const InfoBannerIcon = ({ fill = "#3498DB", styles }) => {
     </svg>
   );
 };
-const ShareIcon = ({ styles, className, fill = "#505A5F" }) => (
+const ShareIcon = ({ styles, className, fill = "#505A5F" ,width="18",height="20"}) => (
   <svg
     style={{ ...styles }}
     className={className}
-    width="18"
-    height="20"
+    width={width}
+    height={height}
     viewBox="0 0 18 20"
     fill={fill}
     xmlns="http://www.w3.org/2000/svg"
@@ -991,50 +1010,52 @@ const ShareIcon = ({ styles, className, fill = "#505A5F" }) => (
   </svg>
 );
 
-const RupeeIcon = ({ className }) => (
+const RupeeIcon = ({ className,fill="#C84C0E" ,width="48",height="48" }) => (
   <svg
-    width="48"
+    width={width}
     className={className}
-    height="48"
+    height={height}
     viewBox="0 0 48 48"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="48" height="48" rx="6" fill="#F47738" />
+    <rect width="48" height="48" rx="6" fill={fill} />
   </svg>
 );
 
-const ComplaintIcon = ({ className, styles }) => (
+const ComplaintIcon = ({ className, styles,fill="#FFFFFF" ,width="48",height="48" }) => (
   <svg
     style={{ ...styles }}
     className={className}
     viewBox="0 0 48 48"
-    fill="#ffffff"
+    width={width}
+    height={height}
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M42.6667 0.666748H5.33335C2.76669 0.666748 0.69002 2.76675 0.69002 5.33342L0.666687 47.3334L10 38.0001H42.6667C45.2334 38.0001 47.3334 35.9001 47.3334 33.3334V5.33342C47.3334 2.76675 45.2334 0.666748 42.6667 0.666748ZM26.3334 21.6667H21.6667V7.66675H26.3334V21.6667ZM26.3334 31.0001H21.6667V26.3334H26.3334V31.0001Z" />
   </svg>
 );
 
-const DropIcon = ({ className, styles }) => (
+const DropIcon = ({ className, styles,fill="#FFFFFF" ,width="28",height="34" }) => (
   <svg
-    width="28"
-    height="34"
+    width={width}
+    height={height}
     style={{ ...styles }}
     viewBox="0 0 28 34"
     className={className}
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M23.4333 10.3332L14 0.916504L4.56663 10.3332C1.96663 12.9332 0.666626 16.3998 0.666626 19.7332C0.666626 23.0665 1.96663 26.5832 4.56663 29.1832C7.16663 31.7832 10.5833 33.0998 14 33.0998C17.4166 33.0998 20.8333 31.7832 23.4333 29.1832C26.0333 26.5832 27.3333 23.0665 27.3333 19.7332C27.3333 16.3998 26.0333 12.9332 23.4333 10.3332ZM3.99996 20.3332C4.01663 16.9998 5.03329 14.8832 6.93329 12.9998L14 5.78317L21.0666 13.0832C22.9666 14.9498 23.9833 16.9998 24 20.3332H3.99996Z" />
   </svg>
 );
 
-const Person = (style) => (
+const Person = (style,fill="white" ,width="24",height="24") => (
   <svg
     style={{ display: "inline-block", fontSize: "16px", ...style }}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 40 40"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1045,48 +1066,48 @@ const Person = (style) => (
     />
     <path
       d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
 
-const WhatsappIcon = () => (
+const WhatsappIcon = ({fill="#C84C0E" ,width="24",height="24"}) => (
   <svg
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M0.0566406 24L1.74364 17.837C0.702641 16.033 0.155641 13.988 0.156641 11.891C0.159641 5.335 5.49464 0 12.0496 0C15.2306 0.001 18.2166 1.24 20.4626 3.488C22.7076 5.736 23.9436 8.724 23.9426 11.902C23.9396 18.459 18.6046 23.794 12.0496 23.794C10.0596 23.793 8.09864 23.294 6.36164 22.346L0.0566406 24ZM6.65364 20.193C8.32964 21.188 9.92964 21.784 12.0456 21.785C17.4936 21.785 21.9316 17.351 21.9346 11.9C21.9366 6.438 17.5196 2.01 12.0536 2.008C6.60164 2.008 2.16664 6.442 2.16464 11.892C2.16364 14.117 2.81564 15.783 3.91064 17.526L2.91164 21.174L6.65364 20.193ZM18.0406 14.729C17.9666 14.605 17.7686 14.531 17.4706 14.382C17.1736 14.233 15.7126 13.514 15.4396 13.415C15.1676 13.316 14.9696 13.266 14.7706 13.564C14.5726 13.861 14.0026 14.531 13.8296 14.729C13.6566 14.927 13.4826 14.952 13.1856 14.803C12.8886 14.654 11.9306 14.341 10.7956 13.328C9.91264 12.54 9.31564 11.567 9.14264 11.269C8.96964 10.972 9.12464 10.811 9.27264 10.663C9.40664 10.53 9.56964 10.316 9.71864 10.142C9.86964 9.97 9.91864 9.846 10.0186 9.647C10.1176 9.449 10.0686 9.275 9.99364 9.126C9.91864 8.978 9.32464 7.515 9.07764 6.92C8.83564 6.341 8.59064 6.419 8.40864 6.41L7.83864 6.4C7.64064 6.4 7.31864 6.474 7.04664 6.772C6.77464 7.07 6.00664 7.788 6.00664 9.251C6.00664 10.714 7.07164 12.127 7.21964 12.325C7.36864 12.523 9.31464 15.525 12.2956 16.812C13.0046 17.118 13.5586 17.301 13.9896 17.438C14.7016 17.664 15.3496 17.632 15.8616 17.556C16.4326 17.471 17.6196 16.837 17.8676 16.143C18.1156 15.448 18.1156 14.853 18.0406 14.729Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const EmailIcon = () => (
+const EmailIcon = ({fill="#C84C0E" ,width="20",height="16"}) => (
   <svg
-    width="20"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 20 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M18 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 4L10 9L2 4V2L10 7L18 2V4Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const CaseIcon = ({ className, styles }) => (
+const CaseIcon = ({ className, styles,fill="#FFFFFF" ,width="24",height="24" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    fill="#ffffff"
-    width="24"
-    height="24"
+    fill={fill}
+    width={width}
+    height={height}
     viewBox="0 0 34 32"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -1094,13 +1115,13 @@ const CaseIcon = ({ className, styles }) => (
   </svg>
 );
 
-const TLIcon = ({ className, styles }) => (
+const TLIcon = ({ className, styles,fill="#FFFFFF" ,width="24",height="24" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    fill="#ffffff"
-    width="24"
-    height="24"
+    fill={fill}
+    width={width}
+    height={height}
     viewBox="0 0 34 32"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -1108,57 +1129,57 @@ const TLIcon = ({ className, styles }) => (
   </svg>
 );
 
-const PersonIcon = ({ className, styles }) => (
+const PersonIcon = ({ className, styles,fill="#FFFFFF" ,width="24",height="24" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 38 24"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M25.6667 10.3333C28.4334 10.3333 30.65 8.1 30.65 5.33333C30.65 2.56666 28.4334 0.333328 25.6667 0.333328C22.9 0.333328 20.6667 2.56666 20.6667 5.33333C20.6667 8.1 22.9 10.3333 25.6667 10.3333ZM12.3334 10.3333C15.1 10.3333 17.3167 8.1 17.3167 5.33333C17.3167 2.56666 15.1 0.333328 12.3334 0.333328C9.56669 0.333328 7.33335 2.56666 7.33335 5.33333C7.33335 8.1 9.56669 10.3333 12.3334 10.3333ZM12.3334 13.6667C8.45002 13.6667 0.666687 15.6167 0.666687 19.5V23.6667H24V19.5C24 15.6167 16.2167 13.6667 12.3334 13.6667ZM25.6667 13.6667C25.1834 13.6667 24.6334 13.7 24.05 13.75C25.9834 15.15 27.3334 17.0333 27.3334 19.5V23.6667H37.3334V19.5C37.3334 15.6167 29.55 13.6667 25.6667 13.6667Z" />
   </svg>
 );
 
-const ReceiptIcon = () => (
+const ReceiptIcon = ({fill="white" ,width="24",height="24"}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24"
+    height={height}
     viewBox="0 0 24 24"
-    width="24"
+    width={width}
   >
     <path d="M0 0h24v24H0z" fill="none"></path>
     <path
       d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"
-      fill="white"
+      fill={fill}
     ></path>
   </svg>
 );
 
-const AnnouncementIcon = () => (
+const AnnouncementIcon = ({width="28",height="28",fill="#C84C0E"}) => (
   <svg
-    width="28"
-    height="28"
+    width={width}
+    height={height}
     viewBox="0 0 28 28"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M24.6665 0.666016H3.33317C1.8665 0.666016 0.679837 1.86602 0.679837 3.33268L0.666504 27.3327L5.99984 21.9993H24.6665C26.1332 21.9993 27.3332 20.7993 27.3332 19.3327V3.33268C27.3332 1.86602 26.1332 0.666016 24.6665 0.666016ZM15.3332 12.666H12.6665V4.66602H15.3332V12.666ZM15.3332 17.9993H12.6665V15.3327H15.3332V17.9993Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const PTIcon = ({ className, styles }) => (
+const PTIcon = ({ className, styles,fill="#FFFFFF" ,width="34",height="30" }) => (
   <svg
-    width="34"
-    height="30"
+    width={width}
+    height={height}
     style={{ ...styles }}
     viewBox="0 0 34 30"
-    fill="#ffffff"
+    fill={fill}
     className={className}
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -1166,14 +1187,14 @@ const PTIcon = ({ className, styles }) => (
   </svg>
 );
 
-const OBPSIcon = ({ className, styles }) => (
+const OBPSIcon = ({ className, styles,fill="#FFFFFF" ,width="34",height="30" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="34"
-    height="30"
+    width={width}
+    height={height}
     viewBox="0 0 34 30"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1184,10 +1205,10 @@ const OBPSIcon = ({ className, styles }) => (
   </svg>
 );
 
-const OBPSIconSolidBg = () => (
+const OBPSIconSolidBg = ({fill="white" ,width="34",height="30"}) => (
   <svg
-    width="34"
-    height="30"
+    width={width}
+    height={height}
     viewBox="0 0 34 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1196,162 +1217,162 @@ const OBPSIconSolidBg = () => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M30.333 0H3.66634C1.83301 0 0.333008 1.5 0.333008 3.33333V26.6667C0.333008 28.5 1.83301 30 3.66634 30H30.333C32.1663 30 33.6663 28.5 33.6663 26.6667V3.33333C33.6663 1.5 32.1663 0 30.333 0ZM13.6663 23.3333H5.33301V20H13.6663V23.3333ZM13.6663 16.6667H5.33301V13.3333H13.6663V16.6667ZM13.6663 10H5.33301V6.66667H13.6663V10ZM21.6997 20L16.9997 15.2667L19.3497 12.9167L21.6997 15.2833L26.983 10L29.3497 12.3667L21.6997 20Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
 
-const CitizenTruck = ({ className }) => (
+const CitizenTruck = ({ className,fill="#C84C0E" ,width="40",height="40" }) => (
   <svg
-    width="40"
-    height="40"
+    width={width}
+    height={height}
     viewBox="0 0 23 19"
     className={className}
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill={"#F47738"}
+      fill={fill}
       d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
     />
   </svg>
 );
 
-const FSMIcon = ({ className, styles }) => (
+const FSMIcon = ({ className, styles,fill="#FFFFFF" ,width="40",height="40" }) => (
   <svg
-    width="40"
-    height="40"
+    width={width}
+    height={height}
     viewBox="0 0 23 19"
     className={className}
     style={{ ...styles }}
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
   </svg>
 );
 
-const EDCRIcon = ({ className }) => (
+const EDCRIcon = ({ className,fill="#C84C0E" ,width="30",height="32" }) => (
   <svg
-    width="30"
-    height="32"
+    width={width}
+    height={height}
     viewBox="0 0 30 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M20 15.3333V5.33333L15 0.333334L10 5.33333V8.66667H0V32H30V15.3333H20ZM6.66667 28.6667H3.33333V25.3333H6.66667V28.6667ZM6.66667 22H3.33333V18.6667H6.66667V22ZM6.66667 15.3333H3.33333V12H6.66667V15.3333ZM16.6667 28.6667H13.3333V25.3333H16.6667V28.6667ZM16.6667 22H13.3333V18.6667H16.6667V22ZM16.6667 15.3333H13.3333V12H16.6667V15.3333ZM16.6667 8.66667H13.3333V5.33333H16.6667V8.66667ZM26.6667 28.6667H23.3333V25.3333H26.6667V28.6667ZM26.6667 22H23.3333V18.6667H26.6667V22Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const BPAIcon = ({ className }) => (
+const BPAIcon = ({ className,fill="#C84C0E" ,width="32",height="32" }) => (
   <svg
-    width="32"
-    height="32"
+    width={width}
+    height={height}
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M23.3333 29.0333H3.33333V8.66667H15V5.33334H3.33333C1.5 5.33334 0 6.83334 0 8.66667V28.6667C0 30.5 1.5 32 3.33333 32H23.3333C25.1667 32 26.6667 30.5 26.6667 28.6667V17H23.3333V29.0333Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M26.6667 0.333336H23.3333V5.33334H18.3333C18.35 5.35 18.3333 8.66667 18.3333 8.66667H23.3333V13.65C23.35 13.6667 26.6667 13.65 26.6667 13.65V8.66667H31.6667V5.33334H26.6667V0.333336Z"
-      fill="#F47738"
+      fill={fill}
     />
-    <path d="M20 12H6.66666V15.3333H20V12Z" fill="#F47738" />
-    <path d="M6.66666 17V20.3333H20V17H15H6.66666Z" fill="#F47738" />
-    <path d="M20 22H6.66666V25.3333H20V22Z" fill="#F47738" />
+    <path d="M20 12H6.66666V15.3333H20V12Z" fill={fill} />
+    <path d="M6.66666 17V20.3333H20V17H15H6.66666Z" fill={fill} />
+    <path d="M20 22H6.66666V25.3333H20V22Z" fill={fill} />
   </svg>
 );
 
-const BPAHomeIcon = ({ className, styles }) => (
+const BPAHomeIcon = ({ className, styles,fill="#FFFFFF" ,width="34",height="30" }) => (
   <svg
-    width="34"
-    height="30"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 34 30"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M30.3333 0H3.66659C1.83325 0 0.333252 1.5 0.333252 3.33333V26.6667C0.333252 28.5 1.83325 30 3.66659 30H30.3333C32.1666 30 33.6666 28.5 33.6666 26.6667V3.33333C33.6666 1.5 32.1666 0 30.3333 0ZM13.6666 23.3333H5.33325V20H13.6666V23.3333ZM13.6666 16.6667H5.33325V13.3333H13.6666V16.6667ZM13.6666 10H5.33325V6.66667H13.6666V10ZM21.6999 20L16.9999 15.2667L19.3499 12.9167L21.6999 15.2833L26.9833 10L29.3499 12.3667L21.6999 20Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
 
-const HelpIcon = () => (
+const HelpIcon = ({fill="#C84C0E" ,width="24",height="18"}) => (
   <svg
-    width="24"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 24 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M22 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H22C23.1 18 23.99 17.1 23.99 16L24 2C24 0.9 23.1 0 22 0ZM8 3C9.66 3 11 4.34 11 6C11 7.66 9.66 9 8 9C6.34 9 5 7.66 5 6C5 4.34 6.34 3 8 3ZM14 15H2V14C2 12 6 10.9 8 10.9C10 10.9 14 12 14 14V15ZM17.85 11H19.49L21 13L19.01 14.99C17.7 14.01 16.73 12.61 16.28 11C16.1 10.36 16 9.69 16 9C16 8.31 16.1 7.64 16.28 7C16.73 5.38 17.7 3.99 19.01 3.01L21 5L19.49 7H17.85C17.63 7.63 17.5 8.3 17.5 9C17.5 9.7 17.63 10.37 17.85 11Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
-const EventCalendar = () => {
+const EventCalendar = ({fill="#C84C0E" ,width="24",height="27"}) => {
   return (
     <svg
-      width="24"
-      height="27"
+      width={width}
+      height={height}
       viewBox="0 0 24 27"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M18.6667 15.0002H12V21.6668H18.6667V15.0002ZM17.3333 0.333496V3.00016H6.66667V0.333496H4V3.00016H2.66667C1.18667 3.00016 0.0133333 4.20016 0.0133333 5.66683L0 24.3335C0 25.8002 1.18667 27.0002 2.66667 27.0002H21.3333C22.8 27.0002 24 25.8002 24 24.3335V5.66683C24 4.20016 22.8 3.00016 21.3333 3.00016H20V0.333496H17.3333ZM21.3333 24.3335H2.66667V9.66683H21.3333V24.3335Z"
-        fill="#F47738"
+        fill={fill}
       />
     </svg>
   );
 };
 
-const NotificationBell = () => (
+const NotificationBell = ({fill="white" ,width="16",height="20"}) => (
   <svg
-    width="16"
-    height="20"
+    width={width}
+    height={height}
     viewBox="0 0 16 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M8 20C9.1 20 10 19.1 10 18H6C6 19.1 6.89 20 8 20ZM14 14V9C14 5.93 12.36 3.36 9.5 2.68V2C9.5 1.17 8.83 0.5 8 0.5C7.17 0.5 6.5 1.17 6.5 2V2.68C3.63 3.36 2 5.92 2 9V14L0 16V17H16V16L14 14Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
 
-const MapMarker = () => (
+const MapMarker = ({fill="#505A5F" ,width="10",height="14"}) => (
   <svg
-    width="10"
-    height="14"
+    width={width}
+    height={height}
     viewBox="0 0 10 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M5 0.333496C2.42 0.333496 0.333328 2.42016 0.333328 5.00016C0.333328 6.16016 0.666661 7.24683 1.27333 8.22683C1.90666 9.2535 2.73999 10.1335 3.37999 11.1602C3.69333 11.6602 3.91999 12.1268 4.15999 12.6668C4.33333 13.0335 4.47333 13.6668 5 13.6668C5.52666 13.6668 5.66666 13.0335 5.83333 12.6668C6.08 12.1268 6.29999 11.6602 6.61333 11.1602C7.25333 10.1402 8.08666 9.26016 8.72 8.22683C9.33333 7.24683 9.66666 6.16016 9.66666 5.00016C9.66666 2.42016 7.58 0.333496 5 0.333496ZM5 6.8335C4.07999 6.8335 3.33333 6.08683 3.33333 5.16683C3.33333 4.24683 4.07999 3.50016 5 3.50016C5.92 3.50016 6.66666 4.24683 6.66666 5.16683C6.66666 6.08683 5.92 6.8335 5 6.8335Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const Clock = () => (
+const Clock = ({fill="#505A5F" ,width="16",height="16"}) => (
   <svg
-    width="16"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1360,62 +1381,62 @@ const Clock = () => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M7.992 0C3.576 0 0 3.584 0 8C0 12.416 3.576 16 7.992 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 7.992 0ZM7.99994 14.4C4.46393 14.4 1.59993 11.536 1.59993 7.99999C1.59993 4.46399 4.46393 1.59999 7.99994 1.59999C11.5359 1.59999 14.3999 4.46399 14.3999 7.99999C14.3999 11.536 11.5359 14.4 7.99994 14.4ZM7.20003 4H8.40003V8.2L12 10.336L11.4 11.32L7.20003 8.8V4Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const TickMark = ({ fillColor = "white" }) => (
+const TickMark = ({ fill = "white",width="14",height="11" }) => (
   <svg
     style={{ display: "inline-block", margin: "auto" }}
-    width="14"
-    height="11"
+    width={width}
+    height={height}
     viewBox="0 0 14 11"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M4.75012 8.1275L1.62262 5L0.557617 6.0575L4.75012 10.25L13.7501 1.25L12.6926 0.192505L4.75012 8.1275Z"
-      fill={fillColor}
+      fill={fill}
     />
   </svg>
 );
 
-const EditIcon = ({ style }) => (
+const EditIcon = ({ style,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     style={style}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M9.126 5.125L11.063 3.188L14.81 6.935L12.873 8.873L9.126 5.125ZM17.71 2.63L15.37 0.289999C15.1826 0.103748 14.9292 -0.000793457 14.665 -0.000793457C14.4008 -0.000793457 14.1474 0.103748 13.96 0.289999L12.13 2.12L15.88 5.87L17.71 4C17.8844 3.81454 17.9815 3.56956 17.9815 3.315C17.9815 3.06044 17.8844 2.81546 17.71 2.63ZM5.63 8.63L0 14.25V18H3.75L9.38 12.38L12.873 8.873L9.126 5.125L5.63 8.63Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const SearchIcon = ({ className }) => (
+const SearchIcon = ({ className,fill="#505A5F" ,width="18",height="18" }) => (
   <svg
-    width="18"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const DeleteIcon = ({ style, fill }) => (
+const DeleteIcon = ({ style, fill,width="14",height="18" }) => (
   <svg
-    width="14"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 14 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1427,11 +1448,11 @@ const DeleteIcon = ({ style, fill }) => (
   </svg>
 );
 
-const CreateLoiIcon = ({ style, fill = "#F47738" }) => (
+const CreateLoiIcon = ({ style, fill = "#C84C0E",width="18",height="18" }) => (
   <svg
     style={style}
-    width="18"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -1443,12 +1464,12 @@ const CreateLoiIcon = ({ style, fill = "#F47738" }) => (
   </svg>
 );
 
-const WSICon = ({ className, styles }) => (
+const WSICon = ({ className, styles,fill="#FFFFFF" ,width="28",height="34" }) => (
   <svg
-    width="28"
-    height="34"
+    width={width}
+    height={height}
     viewBox="0 0 28 34"
-    fill="#ffffff"
+    fill={fill}
     style={{ ...styles }}
     className={className}
     xmlns="http://www.w3.org/2000/svg"
@@ -1457,80 +1478,85 @@ const WSICon = ({ className, styles }) => (
   </svg>
 );
 
-const ArrowVectorDown = ({ className, styles }) => (
+const ArrowVectorDown = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     style={{ ...styles }}
     className={className}
     viewBox="0 0 16 11"
     xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
   >
     <path
       d="M16 2.33331L14.12 0.453308L8 6.55997L1.88 0.453307L-8.21774e-08 2.33331L8 10.3333L16 2.33331Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const ArrowDirection = ({ className, styles }) => (
+const ArrowDirection = ({ className, styles,fill="#C84C0E" ,width="16",height="16" }) => (
   <svg
     style={{ ...styles }}
     className={className}
     viewBox="0 0 16 16"
+    width={width}
+    height={height}
     xmlns="http://www.w3.org/2000/svg"
+    fill={fill}
   >
     <path d="M8.0013 2.66669L7.0613 3.60669L10.7813 7.33335H2.66797V8.66669H10.7813L7.0613 12.3934L8.0013 13.3334L13.3346 8.00002L8.0013 2.66669Z" />
   </svg>
 );
 
-const CameraIcon = () => (
+const CameraIcon = ({fill="#C84C0E" ,width="40",height="40"}) => (
   <svg
-    width="40"
-    height="40"
+    width={width}
+    height={height}
     viewBox="0 0 40 40"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M15.0002 5L11.9502 8.33333H6.66683C4.8335 8.33333 3.3335 9.83333 3.3335 11.6667V31.6667C3.3335 33.5 4.8335 35 6.66683 35H33.3335C35.1668 35 36.6668 33.5 36.6668 31.6667V11.6667C36.6668 9.83333 35.1668 8.33333 33.3335 8.33333H28.0502L25.0002 5H15.0002ZM20.0002 30C15.4002 30 11.6668 26.2667 11.6668 21.6667C11.6668 17.0667 15.4002 13.3333 20.0002 13.3333C24.6002 13.3333 28.3335 17.0667 28.3335 21.6667C28.3335 26.2667 24.6002 30 20.0002 30Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M20.0002 28.3333L22.0835 23.75L26.6668 21.6667L22.0835 19.5833L20.0002 15L17.9168 19.5833L13.3335 21.6667L17.9168 23.75L20.0002 28.3333Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
-const RemoveIcon = () => (
+const RemoveIcon = ({fill="#C84C0E" ,width="24",height="30"}) => (
   <svg
-    width="24"
-    height="30"
+    width={width}
+    height={height}
     viewBox="0 0 24 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M2.00016 26.6667C2.00016 28.5 3.50016 30 5.3335 30H18.6668C20.5002 30 22.0002 28.5 22.0002 26.6667V6.66667H2.00016V26.6667ZM23.6668 1.66667H17.8335L16.1668 0H7.8335L6.16683 1.66667H0.333496V5H23.6668V1.66667Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const GalleryIcon = () => (
+const GalleryIcon = ({fill="#C84C0E" ,width="40",height="34"}) => (
   <svg
-    width="40"
-    height="34"
+    width={width}
+    height={height}
     viewBox="0 0 40 34"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M3.33333 7.00016H0V15.3335H0.0166667L0 30.3335C0 32.1668 1.5 33.6668 3.33333 33.6668H33.3333V30.3335H3.33333V7.00016ZM36.6667 3.66683H23.3333L20 0.333496H10C8.16667 0.333496 6.68333 1.8335 6.68333 3.66683L6.66667 23.6668C6.66667 25.5002 8.16667 27.0002 10 27.0002H36.6667C38.5 27.0002 40 25.5002 40 23.6668V7.00016C40 5.16683 38.5 3.66683 36.6667 3.66683ZM11.6667 22.0002L19.1667 12.0002L25 19.5168L29.1667 14.5002L35 22.0002H11.6667Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const EditPencilIcon = ({ className, width = 18, height = 18 }) => (
+const EditPencilIcon = ({ className, width = 18, height = 18 ,fill="#505A5F"}) => (
   <svg
     className={className}
     width={width}
@@ -1541,130 +1567,134 @@ const EditPencilIcon = ({ className, width = 18, height = 18 }) => (
   >
     <path
       d="M9.126 5.12482L11.063 3.18782L14.81 6.93482L12.873 8.87282L9.126 5.12482ZM17.71 2.62982L15.37 0.289816C15.1826 0.103565 14.9292 -0.000976562 14.665 -0.000976562C14.4008 -0.000976563 14.1474 0.103565 13.96 0.289816L12.13 2.11982L15.88 5.86982L17.71 3.99982C17.8844 3.81436 17.9815 3.56938 17.9815 3.31482C17.9815 3.06025 17.8844 2.81528 17.71 2.62982ZM5.63 8.62982L0 14.2498V17.9998H3.75L9.38 12.3798L12.873 8.87282L9.126 5.12482L5.63 8.62982Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
-const AddressBookIcon = ({ styles, className }) => (
+const AddressBookIcon = ({ styles, className,fill="#B1B4B6",width="20",height="24" }) => (
   <svg
     className={className}
     style={{ ...styles }}
     viewBox="0 0 20 24"
     fill="none"
+    width={width}
+    height={height}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M18 0H2V2H18V0ZM2 24H18V22H2V24ZM18 4H2C0.9 4 0 4.9 0 6V18C0 19.1 0.9 20 2 20H18C19.1 20 20 19.1 20 18V6C20 4.9 19.1 4 18 4ZM10 6.75C11.24 6.75 12.25 7.76 12.25 9C12.25 10.24 11.24 11.25 10 11.25C8.76 11.25 7.75 10.24 7.75 9C7.75 7.76 8.76 6.75 10 6.75ZM15 17H5V15.5C5 13.83 8.33 13 10 13C11.67 13 15 13.83 15 15.5V17Z"
-      fill="#B1B4B6"
+      fill={fill}
     />
   </svg>
 );
 
-const LocationIcon = ({ styles, className }) => (
+const LocationIcon = ({ styles, className ,fill="#B1B4B6",width="14",height="20"}) => (
   <svg
     className={className}
     style={{ ...styles }}
     viewBox="0 0 14 20"
     fill="none"
+    width={width}
+    height={height}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M7 0C3.13 0 0 3.13 0 7C0 8.74 0.5 10.37 1.41 11.84C2.36 13.38 3.61 14.7 4.57 16.24C5.04 16.99 5.38 17.69 5.74 18.5C6 19.05 6.21 20 7 20C7.79 20 8 19.05 8.25 18.5C8.62 17.69 8.95 16.99 9.42 16.24C10.38 14.71 11.63 13.39 12.58 11.84C13.5 10.37 14 8.74 14 7C14 3.13 10.87 0 7 0ZM7 9.75C5.62 9.75 4.5 8.63 4.5 7.25C4.5 5.87 5.62 4.75 7 4.75C8.38 4.75 9.5 5.87 9.5 7.25C9.5 8.63 8.38 9.75 7 9.75Z"
-      fill="#B1B4B6"
+      fill={fill}
     />
   </svg>
 );
-const CollectionsBookmarIcons = ({ styles, className }) => (
+const CollectionsBookmarIcons = ({ styles, className,fill="#FFFFFF" ,width="22",height="28" }) => (
   <svg
-    width="22"
-    height="28"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 22 28"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M18.9999 0.666992H2.99992C1.53325 0.666992 0.333252 1.86699 0.333252 3.33366V24.667C0.333252 26.1337 1.53325 27.3337 2.99992 27.3337H18.9999C20.4666 27.3337 21.6666 26.1337 21.6666 24.667V3.33366C21.6666 1.86699 20.4666 0.666992 18.9999 0.666992ZM2.99992 3.33366H9.66658V14.0003L6.33325 12.0003L2.99992 14.0003V3.33366Z" />
   </svg>
 );
 
-const FinanceChartIcon = ({ styles, className }) => (
+const FinanceChartIcon = ({ styles, className ,fill="#FFFFFF" ,width="30",height="30"}) => (
   <svg
-    width="30"
-    height="30"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 30 30"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M26.6667 0H3.33333C1.5 0 0 1.5 0 3.33333V26.6667C0 28.5 1.5 30 3.33333 30H26.6667C28.5 30 30 28.5 30 26.6667V3.33333C30 1.5 28.5 0 26.6667 0ZM10 23.3333H6.66667V11.6667H10V23.3333ZM16.6667 23.3333H13.3333V6.66667H16.6667V23.3333ZM23.3333 23.3333H20V16.6667H23.3333V23.3333Z" />
   </svg>
 );
 
-const CollectionIcon = ({ styles, className }) => (
+const CollectionIcon = ({ styles, className,fill="#FFFFFF" ,width="24",height="27" }) => (
   <svg
-    width="24"
-    height="27"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 24 27"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M21.3333 2.99967H15.76C15.2 1.45301 13.7333 0.333008 12 0.333008C10.2667 0.333008 8.8 1.45301 8.24 2.99967H2.66667C1.2 2.99967 0 4.19967 0 5.66634V24.333C0 25.7997 1.2 26.9997 2.66667 26.9997H21.3333C22.8 26.9997 24 25.7997 24 24.333V5.66634C24 4.19967 22.8 2.99967 21.3333 2.99967ZM12 2.99967C12.7333 2.99967 13.3333 3.59967 13.3333 4.33301C13.3333 5.06634 12.7333 5.66634 12 5.66634C11.2667 5.66634 10.6667 5.06634 10.6667 4.33301C10.6667 3.59967 11.2667 2.99967 12 2.99967ZM14.6667 21.6663H5.33333V18.9997H14.6667V21.6663ZM18.6667 16.333H5.33333V13.6663H18.6667V16.333ZM18.6667 10.9997H5.33333V8.33301H18.6667V10.9997Z" />
   </svg>
 );
 
-const BillsIcon = ({ styles, className }) => (
+const BillsIcon = ({ styles, className,fill="#FFFFFF", width="24",height="27" }) => (
   <svg
-    width="24"
-    height="27"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 24 27"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M21.3333 2.99967H15.76C15.2 1.45301 13.7333 0.333008 12 0.333008C10.2667 0.333008 8.8 1.45301 8.24 2.99967H2.66667C1.2 2.99967 0 4.19967 0 5.66634V24.333C0 25.7997 1.2 26.9997 2.66667 26.9997H21.3333C22.8 26.9997 24 25.7997 24 24.333V5.66634C24 4.19967 22.8 2.99967 21.3333 2.99967ZM12 2.99967C12.7333 2.99967 13.3333 3.59967 13.3333 4.33301C13.3333 5.06634 12.7333 5.66634 12 5.66634C11.2667 5.66634 10.6667 5.06634 10.6667 4.33301C10.6667 3.59967 11.2667 2.99967 12 2.99967ZM14.6667 21.6663H5.33333V18.9997H14.6667V21.6663ZM18.6667 16.333H5.33333V13.6663H18.6667V16.333ZM18.6667 10.9997H5.33333V8.33301H18.6667V10.9997Z" />
   </svg>
 );
 
-const MCollectIcon = ({ styles, className }) => (
+const MCollectIcon = ({ styles, className,fill="#FFFFFF" ,width="37",height="35" }) => (
   <svg
-    width="37"
-    height="35"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 37 35"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M34.375 28.75V30.625C34.375 32.6875 32.6875 34.375 30.625 34.375H4.375C2.29375 34.375 0.625 32.6875 0.625 30.625V4.375C0.625 2.3125 2.29375 0.625 4.375 0.625H30.625C32.6875 0.625 34.375 2.3125 34.375 4.375V6.25H17.5C15.4187 6.25 13.75 7.9375 13.75 10V25C13.75 27.0625 15.4187 28.75 17.5 28.75H34.375ZM17.5 25H36.25V10H17.5V25ZM25 20.3125C23.4438 20.3125 22.1875 19.0562 22.1875 17.5C22.1875 15.9438 23.4438 14.6875 25 14.6875C26.5562 14.6875 27.8125 15.9438 27.8125 17.5C27.8125 19.0562 26.5562 20.3125 25 20.3125Z" />
   </svg>
 );
 
-const PGRIcon = ({ styles, className }) => (
+const PGRIcon = ({ styles, className,fill="#FFFFFF" ,width="35",height="39" }) => (
   <svg
-    width="35"
-    height="39"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 35 39"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M31.168 0.75H3.83464C1.95547 0.75 0.435052 2.4375 0.435052 4.5L0.417969 38.25L7.2513 30.75H31.168C33.0471 30.75 34.5846 29.0625 34.5846 27V4.5C34.5846 2.4375 33.0471 0.75 31.168 0.75ZM19.2096 17.625H15.793V6.375H19.2096V17.625ZM19.2096 25.125H15.793V21.375H19.2096V25.125Z" />
   </svg>
 );
-const FirenocIcon = ({ styles, className }) => (
+const FirenocIcon = ({ styles, className,fill="#FFFFFF" ,width="35",height="39" }) => (
   <svg
-    width="35"
-    height="39"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 35 39"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1673,27 +1703,27 @@ const FirenocIcon = ({ styles, className }) => (
     ></path>
   </svg>
 );
-const BirthIcon = ({ styles, className }) => (
+const BirthIcon = ({ styles, className,fill="#FFFFFF" ,width="35",height="39" }) => (
   <svg
-    width="35"
-    height="39"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 35 39"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M20.7502 0.916016H3.25016C1.646 0.916016 0.333496 2.22852 0.333496 3.83268V27.166C0.333496 28.7702 1.646 30.0827 3.25016 30.0827H20.7502C22.3543 30.0827 23.6668 28.7702 23.6668 27.166V3.83268C23.6668 2.22852 22.3543 0.916016 20.7502 0.916016ZM3.25016 3.83268H10.5418V15.4994L6.896 13.3119L3.25016 15.4994V3.83268Z" />
   </svg>
 );
-const DeathIcon = ({ styles, className }) => (
+const DeathIcon = ({ styles, className,fill="#FFFFFF" ,width="35",height="39" }) => (
   <svg
-    width="35"
-    height="39"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 35 39"
-    fill="#ffffff"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -1703,162 +1733,162 @@ const DeathIcon = ({ styles, className }) => (
     />
   </svg>
 );
-const ErrorIcon = ({ className }) => (
+const ErrorIcon = ({ className,fill="#FFFFFF" ,width="20",height="20" }) => (
   <svg
-    width="20"
-    height="20"
+    width={width}
+    height={height}
     viewBox="0 0 20 20"
-    fill="#FFFFFF"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
     <path
       d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
-const DownloadBtnCommon = () => (
+const DownloadBtnCommon = ({fill="#C84C0E" ,width="112",height="32"}) => (
   <svg
-    width="112"
-    height="32"
+    width={width}
+    height={height}
     viewBox="0 0 112 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M25.3337 12H20.0003V4H12.0003V12H6.66699L16.0003 21.3333L25.3337 12ZM6.66699 24V26.6667H25.3337V24H6.66699Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M44.3984 21.5H42.0234L42.0391 20.2734H44.3984C45.2109 20.2734 45.888 20.1042 46.4297 19.7656C46.9714 19.4219 47.3776 18.9427 47.6484 18.3281C47.9245 17.7083 48.0625 16.9844 48.0625 16.1562V15.4609C48.0625 14.8099 47.9844 14.2318 47.8281 13.7266C47.6719 13.2161 47.4427 12.7865 47.1406 12.4375C46.8385 12.0833 46.4688 11.8151 46.0312 11.6328C45.599 11.4505 45.1016 11.3594 44.5391 11.3594H41.9766V10.125H44.5391C45.2839 10.125 45.9635 10.25 46.5781 10.5C47.1927 10.7448 47.7214 11.1016 48.1641 11.5703C48.612 12.0339 48.9557 12.5964 49.1953 13.2578C49.4349 13.9141 49.5547 14.6536 49.5547 15.4766V16.1562C49.5547 16.9792 49.4349 17.7214 49.1953 18.3828C48.9557 19.0391 48.6094 19.599 48.1562 20.0625C47.7083 20.526 47.1667 20.8828 46.5312 21.1328C45.901 21.3776 45.1901 21.5 44.3984 21.5ZM42.8281 10.125V21.5H41.3203V10.125H42.8281ZM51.2188 17.3672V17.1875C51.2188 16.5781 51.3073 16.013 51.4844 15.4922C51.6615 14.9661 51.9167 14.5104 52.25 14.125C52.5833 13.7344 52.987 13.4323 53.4609 13.2188C53.9349 13 54.4661 12.8906 55.0547 12.8906C55.6484 12.8906 56.1823 13 56.6562 13.2188C57.1354 13.4323 57.5417 13.7344 57.875 14.125C58.2135 14.5104 58.4714 14.9661 58.6484 15.4922C58.8255 16.013 58.9141 16.5781 58.9141 17.1875V17.3672C58.9141 17.9766 58.8255 18.5417 58.6484 19.0625C58.4714 19.5833 58.2135 20.0391 57.875 20.4297C57.5417 20.8151 57.138 21.1172 56.6641 21.3359C56.1953 21.5495 55.6641 21.6562 55.0703 21.6562C54.4766 21.6562 53.9427 21.5495 53.4688 21.3359C52.9948 21.1172 52.5885 20.8151 52.25 20.4297C51.9167 20.0391 51.6615 19.5833 51.4844 19.0625C51.3073 18.5417 51.2188 17.9766 51.2188 17.3672ZM52.6641 17.1875V17.3672C52.6641 17.7891 52.7135 18.1875 52.8125 18.5625C52.9115 18.9323 53.0599 19.2604 53.2578 19.5469C53.4609 19.8333 53.7135 20.0599 54.0156 20.2266C54.3177 20.388 54.6693 20.4688 55.0703 20.4688C55.4661 20.4688 55.8125 20.388 56.1094 20.2266C56.4115 20.0599 56.6615 19.8333 56.8594 19.5469C57.0573 19.2604 57.2057 18.9323 57.3047 18.5625C57.4089 18.1875 57.4609 17.7891 57.4609 17.3672V17.1875C57.4609 16.7708 57.4089 16.3776 57.3047 16.0078C57.2057 15.6328 57.0547 15.3021 56.8516 15.0156C56.6536 14.724 56.4036 14.4948 56.1016 14.3281C55.8047 14.1615 55.4557 14.0781 55.0547 14.0781C54.6589 14.0781 54.3099 14.1615 54.0078 14.3281C53.7109 14.4948 53.4609 14.724 53.2578 15.0156C53.0599 15.3021 52.9115 15.6328 52.8125 16.0078C52.7135 16.3776 52.6641 16.7708 52.6641 17.1875ZM62.8672 20L65.0391 13.0469H65.9922L65.8047 14.4297L63.5938 21.5H62.6641L62.8672 20ZM61.4062 13.0469L63.2578 20.0781L63.3906 21.5H62.4141L59.9609 13.0469H61.4062ZM68.0703 20.0234L69.8359 13.0469H71.2734L68.8203 21.5H67.8516L68.0703 20.0234ZM66.2031 13.0469L68.3281 19.8828L68.5703 21.5H67.6484L65.375 14.4141L65.1875 13.0469H66.2031ZM74.2031 14.8516V21.5H72.7578V13.0469H74.125L74.2031 14.8516ZM73.8594 16.9531L73.2578 16.9297C73.263 16.3516 73.349 15.8177 73.5156 15.3281C73.6823 14.8333 73.9167 14.4036 74.2188 14.0391C74.5208 13.6745 74.8802 13.3932 75.2969 13.1953C75.7188 12.9922 76.1849 12.8906 76.6953 12.8906C77.112 12.8906 77.487 12.9479 77.8203 13.0625C78.1536 13.1719 78.4375 13.349 78.6719 13.5938C78.9115 13.8385 79.0938 14.1562 79.2188 14.5469C79.3438 14.9323 79.4062 15.4036 79.4062 15.9609V21.5H77.9531V15.9453C77.9531 15.5026 77.888 15.1484 77.7578 14.8828C77.6276 14.612 77.4375 14.4167 77.1875 14.2969C76.9375 14.1719 76.6302 14.1094 76.2656 14.1094C75.9062 14.1094 75.5781 14.1849 75.2812 14.3359C74.9896 14.487 74.737 14.6953 74.5234 14.9609C74.3151 15.2266 74.151 15.5312 74.0312 15.875C73.9167 16.2135 73.8594 16.5729 73.8594 16.9531ZM83.1719 9.5V21.5H81.7188V9.5H83.1719ZM85.1094 17.3672V17.1875C85.1094 16.5781 85.1979 16.013 85.375 15.4922C85.5521 14.9661 85.8073 14.5104 86.1406 14.125C86.474 13.7344 86.8776 13.4323 87.3516 13.2188C87.8255 13 88.3568 12.8906 88.9453 12.8906C89.5391 12.8906 90.0729 13 90.5469 13.2188C91.026 13.4323 91.4323 13.7344 91.7656 14.125C92.1042 14.5104 92.362 14.9661 92.5391 15.4922C92.7161 16.013 92.8047 16.5781 92.8047 17.1875V17.3672C92.8047 17.9766 92.7161 18.5417 92.5391 19.0625C92.362 19.5833 92.1042 20.0391 91.7656 20.4297C91.4323 20.8151 91.0286 21.1172 90.5547 21.3359C90.0859 21.5495 89.5547 21.6562 88.9609 21.6562C88.3672 21.6562 87.8333 21.5495 87.3594 21.3359C86.8854 21.1172 86.4792 20.8151 86.1406 20.4297C85.8073 20.0391 85.5521 19.5833 85.375 19.0625C85.1979 18.5417 85.1094 17.9766 85.1094 17.3672ZM86.5547 17.1875V17.3672C86.5547 17.7891 86.6042 18.1875 86.7031 18.5625C86.8021 18.9323 86.9505 19.2604 87.1484 19.5469C87.3516 19.8333 87.6042 20.0599 87.9062 20.2266C88.2083 20.388 88.5599 20.4688 88.9609 20.4688C89.3568 20.4688 89.7031 20.388 90 20.2266C90.3021 20.0599 90.5521 19.8333 90.75 19.5469C90.9479 19.2604 91.0964 18.9323 91.1953 18.5625C91.2995 18.1875 91.3516 17.7891 91.3516 17.3672V17.1875C91.3516 16.7708 91.2995 16.3776 91.1953 16.0078C91.0964 15.6328 90.9453 15.3021 90.7422 15.0156C90.5443 14.724 90.2943 14.4948 89.9922 14.3281C89.6953 14.1615 89.3464 14.0781 88.9453 14.0781C88.5495 14.0781 88.2005 14.1615 87.8984 14.3281C87.6016 14.4948 87.3516 14.724 87.1484 15.0156C86.9505 15.3021 86.8021 15.6328 86.7031 16.0078C86.6042 16.3776 86.5547 16.7708 86.5547 17.1875ZM99.6016 20.0547V15.7031C99.6016 15.3698 99.5339 15.0807 99.3984 14.8359C99.2682 14.5859 99.0703 14.3932 98.8047 14.2578C98.5391 14.1224 98.2109 14.0547 97.8203 14.0547C97.4557 14.0547 97.1354 14.1172 96.8594 14.2422C96.5885 14.3672 96.375 14.5312 96.2188 14.7344C96.0677 14.9375 95.9922 15.1562 95.9922 15.3906H94.5469C94.5469 15.0885 94.625 14.7891 94.7812 14.4922C94.9375 14.1953 95.1615 13.9271 95.4531 13.6875C95.75 13.4427 96.1042 13.25 96.5156 13.1094C96.9323 12.9635 97.3958 12.8906 97.9062 12.8906C98.5208 12.8906 99.0625 12.9948 99.5312 13.2031C100.005 13.4115 100.375 13.7266 100.641 14.1484C100.911 14.5651 101.047 15.0885 101.047 15.7188V19.6562C101.047 19.9375 101.07 20.237 101.117 20.5547C101.169 20.8724 101.245 21.1458 101.344 21.375V21.5H99.8359C99.763 21.3333 99.7057 21.112 99.6641 20.8359C99.6224 20.5547 99.6016 20.2943 99.6016 20.0547ZM99.8516 16.375L99.8672 17.3906H98.4062C97.9948 17.3906 97.6276 17.4245 97.3047 17.4922C96.9818 17.5547 96.7109 17.651 96.4922 17.7812C96.2734 17.9115 96.1068 18.0755 95.9922 18.2734C95.8776 18.4661 95.8203 18.6927 95.8203 18.9531C95.8203 19.2188 95.8802 19.4609 96 19.6797C96.1198 19.8984 96.2995 20.0729 96.5391 20.2031C96.7839 20.3281 97.0833 20.3906 97.4375 20.3906C97.8802 20.3906 98.2708 20.2969 98.6094 20.1094C98.9479 19.9219 99.2161 19.6927 99.4141 19.4219C99.6172 19.151 99.7266 18.888 99.7422 18.6328L100.359 19.3281C100.323 19.5469 100.224 19.7891 100.062 20.0547C99.901 20.3203 99.6849 20.5755 99.4141 20.8203C99.1484 21.0599 98.8307 21.2604 98.4609 21.4219C98.0964 21.5781 97.6849 21.6562 97.2266 21.6562C96.6536 21.6562 96.151 21.5443 95.7188 21.3203C95.2917 21.0964 94.9583 20.7969 94.7188 20.4219C94.4844 20.0417 94.3672 19.6172 94.3672 19.1484C94.3672 18.6953 94.4557 18.2969 94.6328 17.9531C94.8099 17.6042 95.0651 17.3151 95.3984 17.0859C95.7318 16.8516 96.1328 16.6745 96.6016 16.5547C97.0703 16.4349 97.5938 16.375 98.1719 16.375H99.8516ZM108.648 19.8594V9.5H110.102V21.5H108.773L108.648 19.8594ZM102.961 17.3672V17.2031C102.961 16.5573 103.039 15.9714 103.195 15.4453C103.357 14.9141 103.583 14.4583 103.875 14.0781C104.172 13.6979 104.523 13.4062 104.93 13.2031C105.341 12.9948 105.799 12.8906 106.305 12.8906C106.836 12.8906 107.299 12.9844 107.695 13.1719C108.096 13.3542 108.435 13.6224 108.711 13.9766C108.992 14.3255 109.214 14.7474 109.375 15.2422C109.536 15.737 109.648 16.2969 109.711 16.9219V17.6406C109.654 18.2604 109.542 18.8177 109.375 19.3125C109.214 19.8073 108.992 20.2292 108.711 20.5781C108.435 20.9271 108.096 21.1953 107.695 21.3828C107.294 21.5651 106.826 21.6562 106.289 21.6562C105.794 21.6562 105.341 21.5495 104.93 21.3359C104.523 21.1224 104.172 20.8229 103.875 20.4375C103.583 20.0521 103.357 19.599 103.195 19.0781C103.039 18.5521 102.961 17.9818 102.961 17.3672ZM104.414 17.2031V17.3672C104.414 17.7891 104.456 18.1849 104.539 18.5547C104.628 18.9245 104.763 19.25 104.945 19.5312C105.128 19.8125 105.359 20.0339 105.641 20.1953C105.922 20.3516 106.258 20.4297 106.648 20.4297C107.128 20.4297 107.521 20.3281 107.828 20.125C108.141 19.9219 108.391 19.6536 108.578 19.3203C108.766 18.987 108.911 18.625 109.016 18.2344V16.3516C108.953 16.0651 108.862 15.7891 108.742 15.5234C108.628 15.2526 108.477 15.013 108.289 14.8047C108.107 14.5911 107.88 14.4219 107.609 14.2969C107.344 14.1719 107.029 14.1094 106.664 14.1094C106.268 14.1094 105.927 14.1927 105.641 14.3594C105.359 14.5208 105.128 14.7448 104.945 15.0312C104.763 15.3125 104.628 15.6406 104.539 16.0156C104.456 16.3854 104.414 16.7812 104.414 17.2031Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const PrintBtnCommon = () => (
+const PrintBtnCommon = ({fill="#505A5F" ,width="41",height="41"}) => (
   <svg
-    width="41"
-    height="41"
+    width={width}
+    height={height}
     viewBox="0 0 41 41"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M32.1663 13.8333H8.83301C6.06634 13.8333 3.83301 16.0667 3.83301 18.8333V28.8333H10.4997V35.5H30.4997V28.8333H37.1663V18.8333C37.1663 16.0667 34.933 13.8333 32.1663 13.8333ZM27.1663 32.1667H13.833V23.8333H27.1663V32.1667ZM32.1663 20.5C31.2497 20.5 30.4997 19.75 30.4997 18.8333C30.4997 17.9167 31.2497 17.1667 32.1663 17.1667C33.083 17.1667 33.833 17.9167 33.833 18.8333C33.833 19.75 33.083 20.5 32.1663 20.5ZM30.4997 5.5H10.4997V12.1667H30.4997V5.5Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const WhatsappIconGreen = ({ className, styles }) => (
+const WhatsappIconGreen = ({ className, styles ,fill="#25D366" ,width="24",height="24"}) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M0.0566406 24L1.74364 17.837C0.702641 16.033 0.155641 13.988 0.156641 11.891C0.159641 5.335 5.49464 0 12.0496 0C15.2306 0.001 18.2166 1.24 20.4626 3.488C22.7076 5.736 23.9436 8.724 23.9426 11.902C23.9396 18.459 18.6046 23.794 12.0496 23.794C10.0596 23.793 8.09864 23.294 6.36164 22.346L0.0566406 24ZM6.65364 20.193C8.32964 21.188 9.92964 21.784 12.0456 21.785C17.4936 21.785 21.9316 17.351 21.9346 11.9C21.9366 6.438 17.5196 2.01 12.0536 2.008C6.60164 2.008 2.16664 6.442 2.16464 11.892C2.16364 14.117 2.81564 15.783 3.91064 17.526L2.91164 21.174L6.65364 20.193ZM18.0406 14.729C17.9666 14.605 17.7686 14.531 17.4706 14.382C17.1736 14.233 15.7126 13.514 15.4396 13.415C15.1676 13.316 14.9696 13.266 14.7706 13.564C14.5726 13.861 14.0026 14.531 13.8296 14.729C13.6566 14.927 13.4826 14.952 13.1856 14.803C12.8886 14.654 11.9306 14.341 10.7956 13.328C9.91264 12.54 9.31564 11.567 9.14264 11.269C8.96964 10.972 9.12464 10.811 9.27264 10.663C9.40664 10.53 9.56964 10.316 9.71864 10.142C9.86964 9.97 9.91864 9.846 10.0186 9.647C10.1176 9.449 10.0686 9.275 9.99364 9.126C9.91864 8.978 9.32464 7.515 9.07764 6.92C8.83564 6.341 8.59064 6.419 8.40864 6.41L7.83864 6.4C7.64064 6.4 7.31864 6.474 7.04664 6.772C6.77464 7.07 6.00664 7.788 6.00664 9.251C6.00664 10.714 7.07164 12.127 7.21964 12.325C7.36864 12.523 9.31464 15.525 12.2956 16.812C13.0046 17.118 13.5586 17.301 13.9896 17.438C14.7016 17.664 15.3496 17.632 15.8616 17.556C16.4326 17.471 17.6196 16.837 17.8676 16.143C18.1156 15.448 18.1156 14.853 18.0406 14.729Z"
-      fill="#25D366"
+      fill={fill}
     />
   </svg>
 );
 
-const HelpLineIcon = ({ className, styles }) => (
+const HelpLineIcon = ({ className, styles,fill="#0B0C0C" ,width="24",height="18" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="24"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 24 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M22 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H22C23.1 18 23.99 17.1 23.99 16L24 2C24 0.9 23.1 0 22 0ZM8 3C9.66 3 11 4.34 11 6C11 7.66 9.66 9 8 9C6.34 9 5 7.66 5 6C5 4.34 6.34 3 8 3ZM14 15H2V14C2 12 6 10.9 8 10.9C10 10.9 14 12 14 14V15ZM17.85 11H19.49L21 13L19.01 14.99C17.7 14.01 16.73 12.61 16.28 11C16.1 10.36 16 9.69 16 9C16 8.31 16.1 7.64 16.28 7C16.73 5.38 17.7 3.99 19.01 3.01L21 5L19.49 7H17.85C17.63 7.63 17.5 8.3 17.5 9C17.5 9.7 17.63 10.37 17.85 11Z"
-      fill="#0B0C0C"
+      fill={fill}
     />
   </svg>
 );
 
-const ServiceCenterIcon = ({ className, styles }) => (
+const ServiceCenterIcon = ({ className, styles,fill="#0B0C0C" ,width="24",height="24" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M7 10H4V17H7V10Z" fill="#0B0C0C" />
-    <path d="M13.5 10H10.5V17H13.5V10Z" fill="#0B0C0C" />
-    <path d="M22 19H2V22H22V19Z" fill="#0B0C0C" />
-    <path d="M20 10H17V17H20V10Z" fill="#0B0C0C" />
-    <path d="M12 1L2 6V8H22V6L12 1Z" fill="#0B0C0C" />
+    <path d="M7 10H4V17H7V10Z" fill={fill} />
+    <path d="M13.5 10H10.5V17H13.5V10Z" fill={fill}/>
+    <path d="M22 19H2V22H22V19Z" fill={fill} />
+    <path d="M20 10H17V17H20V10Z" fill={fill} />
+    <path d="M12 1L2 6V8H22V6L12 1Z" fill={fill} />
   </svg>
 );
 
-const TimerIcon = ({ className, styles }) => (
+const TimerIcon = ({ className, styles ,fill="#C84C0E" ,width="20",height="20"}) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="20"
-    height="20"
+    width={width}
+    height={height}
     viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M13.0998 17.3701L14.0998 19.1101C13.1398 19.5501 12.0898 19.84 10.9998 19.9501V17.93C11.7398 17.84 12.4398 17.6501 13.0998 17.3701ZM2.0698 11H0.0498047C0.159805 12.1 0.449805 13.14 0.889805 14.1L2.6298 13.1C2.3498 12.44 2.1598 11.74 2.0698 11ZM13.0998 2.63005L14.0998 0.890049C13.1398 0.450049 12.0998 0.160049 10.9998 0.0500488V2.07005C11.7398 2.16005 12.4398 2.35005 13.0998 2.63005ZM17.9298 9.00005H19.9498C19.8398 7.90005 19.5498 6.86005 19.1098 5.90005L17.3698 6.90005C17.6498 7.56005 17.8398 8.26005 17.9298 9.00005ZM6.8998 17.3701L5.89981 19.1101C6.85981 19.5501 7.9098 19.84 8.9998 19.9501V17.93C8.2598 17.84 7.5598 17.6501 6.8998 17.3701ZM8.9998 2.07005V0.0500488C7.8998 0.160049 6.85981 0.450049 5.89981 0.890049L6.8998 2.63005C7.5598 2.35005 8.2598 2.16005 8.9998 2.07005ZM16.3598 5.17005L18.0998 4.16005C17.4698 3.29005 16.6998 2.52005 15.8298 1.89005L14.8198 3.63005C15.4098 4.08005 15.9198 4.59005 16.3598 5.17005ZM2.6298 6.90005L0.889805 5.90005C0.449805 6.86005 0.159805 7.90005 0.0498047 9.00005H2.0698C2.1598 8.26005 2.3498 7.56005 2.6298 6.90005ZM17.9298 11C17.8398 11.74 17.6498 12.44 17.3698 13.1L19.1098 14.1C19.5498 13.14 19.8398 12.09 19.9498 11H17.9298ZM14.8298 16.3601L15.8398 18.1C16.7098 17.4701 17.4798 16.7 18.1098 15.83L16.3698 14.82C15.9198 15.41 15.4098 15.9201 14.8298 16.3601ZM5.1698 3.64005L4.1698 1.89005C3.2898 2.53005 2.5298 3.29005 1.8998 4.17005L3.6398 5.18005C4.0798 4.59005 4.5898 4.08005 5.1698 3.64005ZM3.6398 14.83L1.8998 15.83C2.5298 16.7 3.2998 17.4701 4.1698 18.1L5.1798 16.3601C4.5898 15.9201 4.0798 15.41 3.6398 14.83ZM10.9998 5.00005H8.9998V10.41L13.2898 14.7L14.6998 13.29L10.9998 9.59005V5.00005Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const RupeeSymbol = ({ className, styles }) => (
+const RupeeSymbol = ({ className, styles,fill="#C84C0E" ,width="13",height="18" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="13"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 13 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M11.5781 3.26953H9.12891C9.48828 3.83203 9.72266 4.48438 9.83203 5.22656H12.1875L11.5664 7.54688H9.82031C9.64062 8.71094 9.17578 9.63672 8.42578 10.3242C7.67578 11.0117 6.59766 11.4922 5.19141 11.7656L10.3125 17.8359V18H6.43359L0.761719 11.3555L0.75 9.29297H3.52734C4.97266 9.29297 5.87891 8.71094 6.24609 7.54688H0.46875L1.07812 5.22656H6.17578C5.79297 4.28125 4.95312 3.80078 3.65625 3.78516H0.46875L1.16016 0.9375H12.1875L11.5781 3.26953Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const ValidityTimeIcon = ({ className, styles }) => (
+const ValidityTimeIcon = ({ className, styles,fill="#C84C0E" ,width="21",height="18" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width="21"
-    height="18"
+    width={width}
+    height={height}
     viewBox="0 0 21 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M12 0C7.03 0 3 4.03 3 9H0L3.89 12.89L3.96 13.03L8 9H5C5 5.13 8.13 2 12 2C15.87 2 19 5.13 19 9C19 12.87 15.87 16 12 16C10.07 16 8.32 15.21 7.06 13.94L5.64 15.36C7.27 16.99 9.51 18 12 18C16.97 18 21 13.97 21 9C21 4.03 16.97 0 12 0ZM11 5V10L15.28 12.54L16 11.33L12.5 9.25V5H11Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const AddIcon = ({ styles, className, fill = "white" }) => (
+const AddIcon = ({ styles, className, fill = "white" ,width="14",height="14"}) => (
   <svg
-    width="14"
-    height="14"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 14 14"
@@ -1891,7 +1921,7 @@ const UploadIcon = ({
     <g clip-path="url(#clip0_431_5084)">
       <path
         d="M24.0007 42.6667H40.0007V26.6667H50.6673L32.0007 8L13.334 26.6667H24.0007V42.6667ZM13.334 48H50.6673V53.3333H13.334V48Z"
-        fill="#B1B4B6"
+        fill={fill || "#B1B4B6"}
       />
     </g>
     <defs>
@@ -1905,7 +1935,7 @@ const UploadIcon = ({
 const DeleteIconv2 = ({
   styles,
   className,
-  fill = "#F47738",
+  fill = "#C84C0E",
   height = "24",
   width = "24",
 }) => (
@@ -1950,7 +1980,7 @@ const InfoIconOutline = ({
   >
     <path
       d="M8.7085 5.54171H10.2918V7.12504H8.7085V5.54171ZM8.7085 8.70837H10.2918V13.4584H8.7085V8.70837ZM9.50016 1.58337C5.13016 1.58337 1.5835 5.13004 1.5835 9.50004C1.5835 13.87 5.13016 17.4167 9.50016 17.4167C13.8702 17.4167 17.4168 13.87 17.4168 9.50004C17.4168 5.13004 13.8702 1.58337 9.50016 1.58337ZM9.50016 15.8334C6.00891 15.8334 3.16683 12.9913 3.16683 9.50004C3.16683 6.00879 6.00891 3.16671 9.50016 3.16671C12.9914 3.16671 15.8335 6.00879 15.8335 9.50004C15.8335 12.9913 12.9914 15.8334 9.50016 15.8334Z"
-      fill="#505A5F"
+      fill={fill || "#505A5F"}
     />
   </svg>
 );
@@ -1959,14 +1989,14 @@ const FileIcon = ({
   styles,
   className,
   fill = "white",
-  height = "64",
-  width = "64",
+  height = "24",
+  width = "24",
 }) => (
   <svg
     styles={styles}
     className={className}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 24 24"
     fill={fill}
     xmlns="http://www.w3.org/2000/svg"
@@ -1974,7 +2004,7 @@ const FileIcon = ({
     <g clip-path="url(#clip0_431_5092)">
       <path
         d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM16 18H8V16H16V18ZM16 14H8V12H16V14ZM13 9V3.5L18.5 9H13Z"
-        fill="#505A5F"
+        fill={fill || "#505A5F"}
       />
     </g>
     <defs>
@@ -1985,10 +2015,10 @@ const FileIcon = ({
   </svg>
 );
 
-const SubtractIcon = ({ styles, className, fill = "white" }) => (
+const SubtractIcon = ({ styles, className, fill = "white",width="12",height="14" }) => (
   <svg
-    width="12"
-    height="14"
+    width={width}
+    height={height}
     className={className}
     style={{ ...styles }}
     viewBox="0 0 12 14"
@@ -2002,86 +2032,86 @@ const SubtractIcon = ({ styles, className, fill = "white" }) => (
   </svg>
 );
 
-const AddNewIcon = ({ style }) => (
+const AddNewIcon = ({ style,fill="#C84C0E" ,width="24",height="24" }) => (
   <svg
     style={style}
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     viewBox="0 0 30 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M23.3333 14.5833C24.3542 14.5833 25.3312 14.7729 26.25 15.0938V8.75L17.5 0H2.91667C1.29792 0 0 1.29792 0 2.91667V23.3333C0 24.9521 1.3125 26.25 2.91667 26.25H15.0938C14.7729 25.3312 14.5833 24.3542 14.5833 23.3333C14.5833 18.5062 18.5062 14.5833 23.3333 14.5833ZM16.0417 2.1875L24.0625 10.2083H16.0417V2.1875ZM29.1667 21.875V24.7917H24.7917V29.1667H21.875V24.7917H17.5V21.875H21.875V17.5H24.7917V21.875H29.1667Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const ViewReportIcon = () => (
+const ViewReportIcon = ({fill="#C84C0E" ,width="30",height="30"}) => (
   <svg
-    width="30"
-    height="30"
+    width={width}
+    height={height}
     viewBox="0 0 30 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M26.6667 0H3.33333C1.5 0 0 1.5 0 3.33333V26.6667C0 28.5 1.5 30 3.33333 30H26.6667C28.5 30 30 28.5 30 26.6667V3.33333C30 1.5 28.5 0 26.6667 0ZM18.3333 23.3333H6.66667V20H18.3333V23.3333ZM23.3333 16.6667H6.66667V13.3333H23.3333V16.6667ZM23.3333 10H6.66667V6.66667H23.3333V10Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const InboxIcon = () => (
+const InboxIcon = ({fill="#C84C0E" ,width="30",height="30"}) => (
   <svg
-    width="30"
-    height="30"
+    width={width}
+    height={height}
     viewBox="0 0 30 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M26.6667 0H3.33333C1.5 0 0 1.5 0 3.33333V15C0 16.8333 1.5 18.3333 3.33333 18.3333H26.6667C28.5 18.3333 30 16.8333 30 15V3.33333C30 1.5 28.5 0 26.6667 0ZM26.6667 10H20C20 12.7 17.7 15 15 15C12.3 15 10 12.7 10 10H3.33333V3.33333H26.6667V10ZM20 21.6667H30V26.6667C30 28.5 28.5 30 26.6667 30H3.33333C1.5 30 0 28.5 0 26.6667V21.6667H10C10 24.4333 12.2333 26.6667 15 26.6667C17.7667 26.6667 20 24.4333 20 21.6667Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const ArrowCollapseUp = () => (
+const ArrowCollapseUp = ({fill="#0B0C0C",width="13",height="8"}) => (
   <svg
-    width="13"
-    height="8"
+    width={width}
+    height={height}
     viewBox="0 0 13 8"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M10.6369 7.3491L12.029 5.9214L5.9536 -0.00228767L0.0299208 6.07307L1.45763 7.46514L5.98937 2.82749L10.6369 7.3491Z"
-      fill="#0B0C0C"
+      fill={fill}
     />
   </svg>
 );
 
-const ArrowCollapseDown = () => (
+const ArrowCollapseDown = ({fill="#0B0C0C",width="12",height="8"}) => (
   <svg
-    width="12"
-    height="8"
+    width={width}
+    height={height}
     viewBox="0 0 12 8"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M1.41 0.59L-2.62268e-07 2L6 8L12 2L10.59 0.59L6 5.17L1.41 0.59Z"
-      fill="#0B0C0C"
+      fill={fill}
     />
   </svg>
 );
 
-const AddFilled = ({ style = {} }) => (
+const AddFilled = ({ style = {} ,width="15",height="15",fill="#C84C0E"}) => (
   <svg
-    width="15"
-    height="15"
+    width={width}
+    height={height}
     style={style}
     viewBox="0 0 15 15"
     fill="none"
@@ -2089,15 +2119,15 @@ const AddFilled = ({ style = {} }) => (
   >
     <path
       d="M12.8828 2.98323C10.1643 0.227501 5.7393 0.19747 2.98357 2.91604C0.227848 5.63461 0.197817 10.0596 2.91639 12.8153C5.63496 15.571 10.0599 15.6011 12.8157 12.8825C15.5714 10.1639 15.6014 5.73895 12.8828 2.98323ZM8.56866 12.1557L7.17286 12.1463L7.19698 8.59243L3.64314 8.56831L3.65261 7.17251L7.20645 7.19663L7.23057 3.6428L8.62637 3.65227L8.60225 7.20611L12.1561 7.23022L12.1466 8.62602L8.59278 8.6019L8.56866 12.1557Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const NoResultsFoundIcon = () => (
+const NoResultsFoundIcon = ({fill="#C84C0E",width="336",height="262"}) => (
   <svg
-    width="336"
-    height="262"
+    width={width}
+    height={height}
     viewBox="0 0 336 262"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -2106,12 +2136,12 @@ const NoResultsFoundIcon = () => (
       <path
         opacity="0.1"
         d="M117.863 256.926C150.233 256.926 176.474 251.972 176.474 245.862C176.474 239.751 150.233 234.797 117.863 234.797C85.4937 234.797 59.2529 239.751 59.2529 245.862C59.2529 251.972 85.4937 256.926 117.863 256.926Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M195.218 36.9475C173.677 36.2045 153.162 29.2725 133.572 21.6904C113.982 14.1083 94.5782 5.71033 73.5537 1.69374C60.031 -0.890006 44.5647 -1.25817 33.6713 5.95908C23.184 12.9243 19.7958 24.9143 17.9753 36.0486C16.604 44.4267 15.7986 53.246 19.5529 61.0901C22.1622 66.5362 26.7885 71.1133 29.9903 76.3306C41.1299 94.4798 33.2553 116.861 21.187 134.583C15.529 142.894 8.95573 150.835 4.58574 159.674C0.215751 168.513 -1.8045 178.676 2.01966 187.717C5.80721 196.672 14.8367 203.385 24.6185 208.112C44.4848 217.714 67.8857 220.46 90.7208 222.019C141.254 225.462 192.053 223.972 242.719 222.477C261.47 221.926 280.301 221.365 298.746 218.477C308.991 216.871 319.564 214.324 327.003 208.175C336.442 200.37 338.782 187.156 332.455 177.372C321.844 160.954 292.516 156.878 285.091 139.263C281.01 129.564 285.2 118.765 291.135 109.773C303.862 90.4798 325.193 73.5544 326.314 51.5047C327.086 36.3604 316.832 21.1929 300.976 14.0254C284.358 6.51298 261.31 7.45825 249.056 19.8927C236.425 32.6821 214.239 37.6075 195.218 36.9475Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M178.101 119.976L167.907 113.127L173.049 105.499L146.123 103.359L136.448 110.815L124.336 104.049L114.235 105.26L114.115 102.607C113.99 99.8403 113.711 97.0832 113.28 94.3478C113.323 93.5186 113.353 92.5667 113.35 91.5319C113.35 87.1704 112.757 81.3893 110.155 77.5352L110.754 72.1687L105.895 66.4473C106.675 64.8982 107.565 63.4064 108.557 61.983C108.724 61.7441 108.89 61.512 109.07 61.2864C115.377 60.832 120.353 55.6645 120.353 49.3461C120.353 49.0543 120.353 48.7624 120.319 48.4738C120.319 48.3577 120.296 48.2383 120.283 48.1223C120.898 48.4539 121.521 48.7856 122.143 49.1173C122.26 49.2831 122.393 49.449 122.539 49.6446L122.569 49.6811L122.756 49.91L122.815 49.9796C122.882 50.0592 122.952 50.1355 123.022 50.2151L123.068 50.2682C123.245 50.4639 123.431 50.6629 123.631 50.8586C123.655 50.8779 123.677 50.8989 123.697 50.9216L123.947 51.1538L124.017 51.2168C124.23 51.4058 124.456 51.5883 124.683 51.7607L124.756 51.8138L125.042 52.0095L125.135 52.0692C125.245 52.1355 125.358 52.2052 125.468 52.2682L125.508 52.2914C125.638 52.3611 125.771 52.4274 125.904 52.4904L125.971 52.517C126.084 52.5656 126.195 52.612 126.303 52.6563L126.407 52.6927C126.523 52.7325 126.636 52.769 126.756 52.8022L126.829 52.8221C126.976 52.8586 127.122 52.8884 127.272 52.9116H127.289C127.43 52.9344 127.572 52.9488 127.715 52.9548H127.811C127.939 52.9614 128.066 52.9614 128.194 52.9548H128.277C128.437 52.9456 128.596 52.9268 128.753 52.8984C129.498 52.8008 130.213 52.5452 130.85 52.1488C131.012 52.0407 131.156 51.9075 131.276 51.7541C131.941 50.8851 131.209 49.9332 131.209 49.9332C130.95 49.3163 129.266 48.8818 129.266 48.8818C129.266 48.8818 123.94 46.6662 123.94 44.9017C123.94 43.1372 122.609 33.983 108.867 31.8901C108.867 31.8901 99.927 31.3893 97.4142 36.1587L97.361 36.716C96.6221 37.177 96.0097 38.1024 95.2808 38.3743C94.9659 38.4417 94.6622 38.5534 94.3788 38.706V38.643C94.2947 38.7163 94.2257 38.8053 94.1758 38.905C94.0193 39.2155 93.9254 39.5535 93.8996 39.9C93.8246 40.3233 93.6771 40.7306 93.4636 41.104C93.404 41.2101 93.3373 41.3121 93.2639 41.4092L93.2073 41.4987C93.5937 41.5287 93.9817 41.4662 94.3389 41.3163C94.2826 41.7704 94.1709 42.2159 94.0061 42.643C94.2177 42.6498 94.4268 42.5959 94.6085 42.4877C94.7902 42.3795 94.9369 42.2216 95.0312 42.0327V42.0062L95.0745 41.9465C95.1582 41.7929 95.2272 41.6319 95.2808 41.4655L95.2442 41.5053C95.3108 41.2898 95.3707 41.0708 95.4439 40.8586C95.4774 40.739 95.5327 40.6266 95.607 40.5269C95.6958 40.4377 95.8044 40.3705 95.9241 40.3307C96.0438 40.291 96.1711 40.2798 96.2959 40.298L96.1595 43.1737H96.2194C96.1392 43.3828 96.0412 43.5848 95.9265 43.7773C95.4539 44.5402 94.5952 45.0609 94.279 45.8967C94.1427 46.2998 94.0906 46.7265 94.1259 47.1504C94.1259 47.3992 94.1559 47.6513 94.1758 47.9V47.8801C94.2224 48.5435 94.2357 49.1737 93.8763 49.7077C93.63 50.0725 93.2339 50.3478 93.0975 50.7624C93.0597 50.8779 93.0428 50.9992 93.0475 51.1206C93.0743 51.4841 93.1504 51.8422 93.2739 52.1853C93.2753 52.1787 93.2753 52.1719 93.2739 52.1654C93.3569 52.4177 93.3763 52.6865 93.3305 52.9481C93.1807 53.6115 92.3719 54.1654 92.4119 54.7989C92.4096 54.8822 92.422 54.9653 92.4485 55.0443C92.6041 55.3537 92.8735 55.5914 93.2007 55.7077C93.7138 55.9985 94.3031 56.1279 94.8914 56.0791C95.1119 56.0394 95.3251 55.9668 95.5238 55.8636C95.2908 56.3975 95.0512 56.9249 94.8082 57.4257C94.7716 57.5053 94.7316 57.5849 94.6917 57.6645C94.6917 57.6645 92.6348 56.2947 91.4666 59.0874C91.1256 59.6678 90.8817 60.2996 90.7444 60.9581C90.6859 61.2215 90.6034 61.479 90.4981 61.7276C89.9795 62.6025 89.2033 63.2973 88.2748 63.7176C85.8918 64.8055 76.2665 76.769 76.0968 79.8669C76.0135 81.0761 75.8083 82.274 75.4844 83.4423C74.7267 86.1937 74.532 89.0688 74.9119 91.8967C75.0308 92.8106 75.2279 93.7128 75.501 94.5932C76.5228 97.6878 77.2051 103.462 77.2051 103.462L78.3101 113.485C78.269 114.869 78.3291 116.253 78.4898 117.628C77.3615 118.912 72.8318 124.262 74.5625 125.718C75.8938 126.865 78.2235 126.676 79.5315 126.441C78.4299 129.157 76.6959 133.88 76.4662 137.124C76.1334 141.923 77.0353 148.281 78.4632 150.723C79.891 153.164 84.6504 159.426 84.6504 159.426C84.6504 159.426 84.4274 168.016 86.1281 171.137C87.8289 174.258 88.5145 180.733 88.5145 180.733C88.5145 180.733 90.1021 186.199 89.3066 188.208C88.5111 190.218 90.781 191.89 88.398 193.227C86.015 194.563 82.9663 224.689 82.9663 224.689C82.9663 224.689 81.7382 244.434 82.9663 245.439C83.032 245.487 83.1022 245.528 83.176 245.562V252.195C83.176 252.195 82.3239 253.588 85.7886 253.87C88.1617 254.059 94.8881 254.487 98.8786 254.736L101.971 254.928C101.971 254.928 109.293 256.381 112.528 254.928C115.763 253.475 121.497 253.509 120.645 249.671C120.532 249.149 120.381 248.636 120.193 248.136C119.258 245.754 117.67 245.482 114.744 244.819C114.575 244.782 114.412 244.749 114.262 244.723C111.18 244.189 110.168 245.618 108.441 243.757C106.94 242.149 102.16 240.348 100.533 239.777C100.573 239.658 100.623 239.542 100.663 239.419C100.202 239.341 99.7731 239.133 99.4278 238.819L103.838 239.097L106.464 239.26C106.464 239.26 112.688 240.497 115.45 239.26C118.212 238.023 123.072 238.056 122.346 234.796C122.251 234.351 122.123 233.915 121.963 233.489C121.168 231.466 119.817 231.243 117.33 230.683C117.187 230.653 117.054 230.623 116.921 230.6C114.302 230.145 113.443 231.359 111.975 229.781C110.717 228.434 106.747 226.925 105.319 226.411C105.319 225.674 104.32 224.626 103.691 223.575C102.952 222.348 104.317 218.053 104.317 218.053L105.096 200.232C105.392 200.1 105.706 200.011 106.028 199.966C106.028 199.966 109.549 196.616 108.754 193.048C108.591 191.968 108.507 190.879 108.501 189.787C109.659 188.716 111.253 187.134 111.706 186.159C112.445 184.57 111.706 176.872 111.706 176.872V147.436L117.597 148.029L122.942 148.577L124.569 148.743L129.915 149.28L142.199 150.517L153.269 148.427L158.058 147.525L167.907 145.668V121.655L178.101 119.976ZM97.0215 40.4042L96.3359 40.3312C96.5622 40.3412 96.8018 40.3843 97.0215 40.4042Z"
@@ -2337,7 +2367,7 @@ const NoResultsFoundIcon = () => (
       />
       <path
         d="M110.151 115.203L135.779 111.047V135.226L111.429 133.956L110.151 115.203Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.05"
@@ -2346,7 +2376,7 @@ const NoResultsFoundIcon = () => (
       />
       <path
         d="M135.779 111.047L166.512 113.339L164.812 134.38L135.779 135.226V111.047Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
@@ -2355,19 +2385,19 @@ const NoResultsFoundIcon = () => (
       />
       <path
         d="M145.228 103.664L135.779 111.044L166.512 113.336L171.535 105.783L145.228 103.664Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M100.873 107.143L123.944 104.344L135.78 111.047L110.152 115.203L100.873 107.143Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M141.397 117.326V150.384L129.392 149.157L124.17 148.626L122.579 148.46L117.36 147.926L110.151 147.19V115.203L135.776 116.941L141.397 117.326Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M166.512 113.336V145.575L156.89 147.416L152.211 148.311L141.397 150.381V117.323L166.512 113.336Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.05"
@@ -2376,7 +2406,7 @@ const NoResultsFoundIcon = () => (
       />
       <path
         d="M100.873 122.162L110.152 115.203L141.398 117.326L136.798 125.047L100.873 122.162Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
@@ -2385,7 +2415,7 @@ const NoResultsFoundIcon = () => (
       />
       <path
         d="M166.512 113.336L141.397 117.323L149.572 124.62L176.474 120.122L166.512 113.336Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
@@ -2442,98 +2472,98 @@ const NoResultsFoundIcon = () => (
       />
       <path
         d="M217.591 37.2741C217.591 37.2741 204.943 36.5146 206.421 45.3571C206.421 45.3571 206.125 46.9192 207.546 47.629C207.546 47.629 207.569 46.9657 208.844 47.1945C209.298 47.2707 209.759 47.2929 210.218 47.2609C210.841 47.2195 211.432 46.976 211.903 46.5677C211.903 46.5677 215.46 45.105 216.845 39.3073C216.845 39.3073 217.87 38.0403 217.843 37.7153L215.707 38.6274C215.707 38.6274 216.436 40.163 215.86 41.44C215.86 41.44 215.793 38.6838 215.381 38.7468C215.297 38.7468 214.272 39.2808 214.272 39.2808C214.272 39.2808 215.527 41.9541 214.578 43.901C214.578 43.901 214.938 40.6042 213.88 39.4731L212.375 40.3488C212.375 40.3488 213.843 43.1116 212.848 45.367C212.848 45.367 213.104 41.9076 212.059 40.561L210.694 41.6191C210.694 41.6191 212.076 44.3455 211.234 46.2161C211.234 46.2161 211.124 42.1896 210.398 41.8844C210.398 41.8844 209.207 42.9325 209.027 43.3637C209.027 43.3637 209.969 45.3537 209.383 46.3853C209.383 46.3853 209.024 43.702 208.717 43.6887C208.717 43.6887 207.529 45.4665 207.406 46.6738C207.464 45.5483 207.816 44.4574 208.428 43.5096C207.743 43.6387 207.111 43.9651 206.611 44.4483C206.611 44.4483 206.794 43.1912 208.721 43.0818C208.721 43.0818 209.719 41.7319 209.965 41.6489C209.965 41.6489 208.048 41.4897 206.887 42.0038C206.887 42.0038 207.909 40.8197 210.318 41.3405L211.65 40.2459C211.65 40.2459 209.127 39.9143 208.055 40.2824C208.055 40.2824 209.287 39.2343 212.012 39.9972L213.477 39.1249C213.477 39.1249 211.327 38.6605 210.045 38.8297C210.045 38.8297 211.397 38.1033 213.906 38.8894L214.955 38.4217C214.955 38.4217 213.377 38.1133 212.918 38.0635C212.458 38.0138 212.432 37.8877 212.432 37.8877C213.43 37.7222 214.454 37.8371 215.391 38.2194C215.391 38.2194 217.637 37.4134 217.591 37.2741Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M256.019 81.5007C256.019 81.5007 243.372 80.7412 244.85 89.5836C244.85 89.5836 244.553 91.1458 245.975 91.8556C245.975 91.8556 245.998 91.1922 247.276 91.4211C247.73 91.4972 248.191 91.5195 248.65 91.4874C249.265 91.443 249.849 91.2009 250.315 90.7976C250.315 90.7976 253.876 89.3316 255.26 83.5339C255.26 83.5339 256.282 82.2702 256.242 81.9451L254.105 82.8539C254.105 82.8539 254.834 84.3896 254.262 85.6665C254.262 85.6665 254.192 82.9103 253.783 82.9733C253.699 82.9733 252.671 83.5073 252.671 83.5073C252.671 83.5073 253.929 86.1839 252.98 88.1276C252.98 88.1276 253.34 84.8307 252.278 83.6997L250.791 84.5654C250.791 84.5654 252.258 87.3282 251.263 89.5836C251.263 89.5836 251.519 86.1243 250.474 84.7777L249.113 85.839C249.113 85.839 250.491 88.5621 249.652 90.4327C249.652 90.4327 249.542 86.4062 248.817 86.101C248.817 86.101 247.625 87.1491 247.442 87.5803C247.442 87.5803 248.388 89.5704 247.802 90.6019C247.802 90.6019 247.442 87.9186 247.136 87.9053C247.136 87.9053 245.948 89.6831 245.825 90.8904C245.884 89.7647 246.238 88.674 246.85 87.7262C246.164 87.8557 245.531 88.1819 245.029 88.6649C245.029 88.6649 245.216 87.4078 247.143 87.2984C247.143 87.2984 248.125 85.9485 248.388 85.8655C248.388 85.8655 246.47 85.7063 245.309 86.2204C245.309 86.2204 246.331 85.0364 248.737 85.5737L250.068 84.4791C250.068 84.4791 247.542 84.1475 246.474 84.5156C246.474 84.5156 247.705 83.4675 250.431 84.2304L251.895 83.3581C251.895 83.3581 249.742 82.897 248.461 83.0629C248.461 83.0629 249.815 82.3365 252.325 83.1226L253.373 82.6549C253.373 82.6549 251.796 82.3465 251.333 82.2967C250.87 82.247 250.847 82.1209 250.847 82.1209C251.846 81.9553 252.872 82.0701 253.809 82.4526C253.809 82.4526 256.059 81.64 256.019 81.5007Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M179.186 73.6538C179.186 73.6538 182.098 61.352 173.099 61.3088C173.099 61.3088 171.604 60.7516 170.662 62.0253C170.662 62.0253 171.305 62.1613 170.869 63.3752C170.718 63.8044 170.617 64.2496 170.569 64.7019C170.505 65.3184 170.644 65.9391 170.965 66.4697C170.965 66.4697 171.807 70.2176 177.289 72.5659C177.289 72.5659 178.367 73.7865 178.693 73.7997L178.161 71.5477C178.161 71.5477 176.517 72.002 175.352 71.216C175.352 71.216 178.091 71.6173 178.094 71.216C178.094 71.1331 177.761 70.0352 177.761 70.0352C177.761 70.0352 174.903 70.8113 173.139 69.5477C173.139 69.5477 176.337 70.4631 177.638 69.6173L177.039 67.9855C177.039 67.9855 174.044 68.9573 171.994 67.5941C171.994 67.5941 175.372 68.4365 176.883 67.6405L176.067 66.1215C176.067 66.1215 173.139 67.0103 171.431 65.8661C171.431 65.8661 175.425 66.4432 175.858 65.7865C175.858 65.7865 175.026 64.4365 174.63 64.1845C174.63 64.1845 172.513 64.7749 171.581 64.022C171.581 64.022 174.293 64.1248 174.357 63.8395C174.357 63.8395 172.802 62.3702 171.618 62.0385C172.722 62.2891 173.741 62.8217 174.576 63.5841C174.564 62.889 174.349 62.2125 173.957 61.6372C173.957 61.6372 175.169 62.0352 174.956 63.9589C174.956 63.9589 176.121 65.153 176.157 65.4249C176.157 65.4249 176.64 63.5709 176.33 62.3404C176.33 62.3404 177.329 63.5477 176.387 65.8196L177.239 67.3287C177.239 67.3287 178.011 64.9075 177.815 63.7931C177.815 63.7931 178.643 65.1795 177.422 67.7268L178.038 69.3155C178.038 69.3155 178.86 67.279 178.913 65.9987C178.913 65.9987 179.402 67.4515 178.194 69.7831L178.48 70.8909C178.48 70.8909 179.053 69.3951 179.179 68.9506C179.306 68.5062 179.436 68.5029 179.436 68.5029C179.431 69.5119 179.144 70.4996 178.607 71.3553C178.607 71.3553 179.043 73.6704 179.186 73.6538Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M151.489 77.8424C151.489 77.8424 141.331 70.2703 137.7 78.4726C137.7 78.4726 136.592 79.6169 137.387 80.9867C137.387 80.9867 137.766 80.4527 138.718 81.3383C139.055 81.6508 139.429 81.9225 139.83 82.1476C140.373 82.4492 141.001 82.5656 141.617 82.4792C141.617 82.4792 145.398 83.2056 149.751 79.1227C149.751 79.1227 151.306 78.6252 151.452 78.3333L149.159 77.932C149.159 77.932 148.919 79.6136 147.738 80.3665C147.738 80.3665 149.199 78.0248 148.82 77.8557C148.743 77.8192 147.598 77.6898 147.598 77.6898C147.598 77.6898 147.172 80.6152 145.308 81.7197C145.308 81.7197 147.428 79.1625 147.165 77.6368L145.425 77.5439C145.425 77.5439 145.128 80.6583 143.052 81.9983C143.052 81.9983 145.172 79.2487 145.049 77.5505L143.325 77.6898C143.325 77.6898 142.975 80.718 141.241 81.8192C141.241 81.8192 143.368 78.3963 142.932 77.7462C142.932 77.7462 141.358 77.9685 140.968 78.2272C140.968 78.2272 140.665 80.3963 139.6 80.9469C139.6 80.9469 140.782 78.5091 140.542 78.3399C140.542 78.3399 138.569 79.1724 137.793 80.121C138.464 79.2128 139.361 78.4948 140.396 78.0381C139.752 77.7714 139.044 77.6977 138.359 77.8258C138.359 77.8258 139.204 76.8772 140.875 77.8424C140.875 77.8424 142.439 77.2553 142.706 77.3283C142.706 77.3283 141.191 76.1442 139.936 75.9386C139.936 75.9386 141.447 75.5074 143.161 77.2653L144.889 77.0895C144.889 77.0895 142.968 75.4311 141.867 75.1525C141.867 75.1525 143.474 74.9502 145.328 77.0796L147.032 77.1558C147.032 77.1558 145.491 75.5903 144.33 75.0265C144.33 75.0265 145.857 75.1592 147.521 77.1923L148.656 77.3748C148.656 77.3748 147.508 76.2537 147.149 75.9618C146.789 75.6699 146.839 75.5472 146.839 75.5472C147.765 75.9558 148.559 76.6126 149.132 77.4444C149.132 77.4444 151.446 77.9784 151.489 77.8424Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M185.307 7.49233C185.307 7.49233 175.149 -0.0831323 171.518 8.12251C171.518 8.12251 170.41 9.26679 171.205 10.6366C171.205 10.6366 171.585 10.1026 172.537 10.9882C172.876 11.2992 173.25 11.5696 173.652 11.7941C174.195 12.096 174.823 12.2125 175.439 12.1258C175.439 12.1258 179.22 12.8522 183.573 8.76596C183.573 8.76596 185.127 8.27176 185.271 7.97657L182.977 7.58188C182.977 7.58188 182.741 9.26347 181.556 10.0164C181.556 10.0164 183.021 7.67475 182.641 7.50559C182.565 7.46911 181.42 7.33976 181.42 7.33976C181.42 7.33976 180.98 10.2718 179.117 11.3696C179.117 11.3696 181.233 8.81239 180.974 7.28669L179.233 7.19382C179.233 7.19382 178.934 10.3082 176.86 11.6449C176.86 11.6449 178.98 8.89531 178.857 7.19714L177.136 7.33644C177.136 7.33644 176.783 10.3679 175.049 11.4691C175.049 11.4691 177.18 8.04622 176.744 7.39614C176.744 7.39614 175.169 7.61836 174.78 7.87707C174.78 7.87707 174.477 10.0462 173.412 10.5968C173.412 10.5968 174.593 8.15899 174.354 7.98652C174.354 7.98652 172.38 8.82234 171.605 9.77093C172.275 8.86171 173.172 8.14351 174.207 7.68801C173.563 7.41938 172.853 7.34556 172.167 7.47574C172.167 7.47574 173.016 6.52715 174.687 7.49233C174.687 7.49233 176.251 6.90194 176.517 6.97823C176.517 6.97823 175.003 5.79415 173.748 5.5852C173.748 5.5852 175.256 5.15733 176.97 6.9119L178.697 6.73611C178.697 6.73611 176.78 5.07773 175.675 4.79581C175.675 4.79581 177.283 4.5968 179.14 6.72616L180.844 6.79912C180.844 6.79912 179.303 5.23362 178.138 4.67309C178.138 4.67309 179.669 4.80576 181.333 6.83893L182.465 7.02135C182.465 7.02135 181.313 5.91355 180.954 5.62831C180.594 5.34307 180.644 5.21704 180.644 5.21704C181.57 5.62519 182.364 6.28207 182.937 7.11422C182.937 7.11422 185.251 7.61836 185.307 7.49233Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M224.121 17.0849C224.121 17.0849 220.061 5.10814 212.402 9.81461C212.402 9.81461 210.838 10.1463 210.715 11.7085C210.715 11.7085 211.331 11.4829 211.603 12.7433C211.705 13.1916 211.858 13.6268 212.059 14.0402C212.335 14.5964 212.783 15.0491 213.337 15.3304C213.337 15.3304 216.04 18.0667 221.951 17.1612C221.951 17.1612 223.512 17.6322 223.798 17.4697L222.134 15.8412C222.134 15.8412 220.982 17.0916 219.578 17.0418C219.578 17.0418 222.117 15.9407 221.908 15.5858C221.864 15.5161 220.996 14.7632 220.996 14.7632C220.996 14.7632 218.979 16.929 216.816 16.7864C216.816 16.7864 220.014 15.8776 220.666 14.4647L219.288 13.4067C219.288 13.4067 217.271 15.8013 214.799 15.7284C214.799 15.7284 218.127 14.6637 218.969 13.1911L217.471 12.332C217.471 12.332 215.474 14.6305 213.404 14.5576C213.404 14.5576 217.105 12.9423 217.115 12.1596C217.115 12.1596 215.694 11.4531 215.225 11.4465C215.225 11.4465 213.74 13.0617 212.562 12.9158C212.562 12.9158 214.918 11.5725 214.819 11.2972C214.819 11.2972 212.722 10.8693 211.54 11.2143C212.609 10.8435 213.756 10.7577 214.868 10.9655C214.489 10.3814 213.946 9.92039 213.308 9.63883C213.308 9.63883 214.546 9.337 215.374 11.075C215.374 11.075 216.999 11.4763 217.172 11.6853C217.172 11.6853 216.599 9.85773 215.684 8.97548C215.684 8.97548 217.172 9.47631 217.578 11.9009L219.102 12.73C219.102 12.73 218.473 10.2723 217.714 9.41329C217.714 9.41329 219.155 10.1562 219.468 12.9589L220.833 13.9838C220.833 13.9838 220.453 11.8212 219.814 10.7002C219.814 10.7002 220.999 11.6753 221.212 14.2922L222.041 15.0816C222.041 15.0816 221.735 13.5095 221.608 13.065C221.482 12.6206 221.585 12.5907 221.585 12.5907C222.114 13.4511 222.394 14.4407 222.394 15.4498C222.394 15.4498 224.005 17.1712 224.121 17.0849Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M197.622 17.6814C197.622 17.6814 185.008 16.2818 186.049 25.2005C186.049 25.2005 185.673 26.7461 187.048 27.5222C187.048 27.5222 187.104 26.8589 188.379 27.1574C188.83 27.254 189.29 27.2996 189.75 27.2934C190.373 27.2822 190.975 27.0691 191.464 26.6864C191.464 26.6864 195.096 25.4028 196.79 19.6814C196.79 19.6814 197.875 18.4708 197.851 18.1425L195.671 18.9451C195.671 18.9451 196.337 20.5139 195.671 21.761C195.671 21.761 195.741 19.0048 195.339 19.0479C195.255 19.0479 194.204 19.5256 194.204 19.5256C194.204 19.5256 195.322 22.2619 194.277 24.169C194.277 24.169 194.803 20.8921 193.801 19.7113L192.253 20.5073C192.253 20.5073 193.585 23.3431 192.47 25.5455C192.47 25.5455 192.902 22.1027 191.927 20.7063L190.513 21.7013C190.513 21.7013 191.751 24.4907 190.815 26.3183C190.815 26.3183 190.912 22.2917 190.203 21.9501C190.203 21.9501 188.958 22.9451 188.755 23.3564C188.755 23.3564 189.597 25.3796 188.962 26.3912C188.962 26.3912 188.739 23.6947 188.446 23.6682C188.446 23.6682 187.168 25.3829 186.981 26.5935C187.097 25.4712 187.505 24.3985 188.166 23.4824C187.476 23.5775 186.828 23.8715 186.302 24.3282C186.302 24.3282 186.549 23.0844 188.479 23.0712C188.479 23.0712 189.527 21.7743 189.81 21.7047C189.81 21.7047 187.903 21.4493 186.715 21.9037C186.715 21.9037 187.797 20.7693 190.173 21.4294L191.574 20.4045C191.574 20.4045 189.042 19.8937 187.97 20.2254C187.97 20.2254 189.255 19.2304 191.937 20.1425L193.445 19.3431C193.445 19.3431 191.318 18.7727 190.03 18.8755C190.03 18.8755 191.418 18.2121 193.884 19.1309L194.956 18.7163C194.956 18.7163 193.395 18.3282 192.936 18.2552C192.476 18.1823 192.46 18.0562 192.46 18.0562C193.466 17.9412 194.484 18.1065 195.402 18.5338C195.402 18.5338 197.645 17.8207 197.622 17.6814Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M307.986 115.244C307.986 115.244 295.379 113.844 296.421 122.753C296.421 122.753 296.044 124.299 297.419 125.075C297.419 125.075 297.476 124.412 298.75 124.707C299.2 124.807 299.661 124.852 300.122 124.843C300.744 124.833 301.347 124.62 301.836 124.236C301.836 124.236 305.467 122.952 307.144 117.234C307.144 117.234 308.229 116.02 308.206 115.695L306.026 116.494C306.026 116.494 306.692 118.067 306.026 119.314C306.026 119.314 306.096 116.554 305.693 116.601C305.61 116.601 304.558 117.075 304.558 117.075C304.558 117.075 305.676 119.811 304.631 121.718C304.631 121.718 305.157 118.445 304.155 117.261L302.608 118.06C302.608 118.06 303.939 120.896 302.827 123.098C302.827 123.098 303.257 119.655 302.282 118.256L300.867 119.251C300.867 119.251 302.105 122.04 301.17 123.864C301.17 123.864 301.267 119.838 300.558 119.499C300.558 119.499 299.316 120.494 299.11 120.906C299.11 120.906 299.955 122.929 299.316 123.941C299.316 123.941 299.093 121.244 298.8 121.218C298.8 121.218 297.522 122.932 297.336 124.143C297.451 123.021 297.86 121.948 298.521 121.032C297.83 121.125 297.181 121.419 296.657 121.878C296.657 121.878 296.903 120.63 298.834 120.617C298.834 120.617 299.885 119.32 300.165 119.254C300.165 119.254 298.258 118.995 297.07 119.45C297.07 119.45 298.151 118.319 300.531 118.979L301.929 117.954C301.929 117.954 299.426 117.483 298.338 117.808C298.338 117.808 299.622 116.813 302.305 117.722L303.813 116.926C303.813 116.926 301.686 116.355 300.398 116.458C300.398 116.458 301.786 115.795 304.252 116.713L305.324 116.295C305.324 116.295 303.763 115.907 303.303 115.838C302.844 115.768 302.827 115.639 302.827 115.639C303.833 115.522 304.852 115.686 305.77 116.113C305.77 116.113 308.02 115.387 307.986 115.244Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M327.26 126.978C327.26 126.978 314.652 125.582 315.694 134.487C315.694 134.487 315.321 136.033 316.692 136.809C316.692 136.809 316.749 136.145 318.024 136.444C318.473 136.541 318.932 136.586 319.392 136.577C320.011 136.564 320.61 136.352 321.099 135.973C321.099 135.973 324.727 134.689 326.404 128.968C326.404 128.968 327.493 127.757 327.466 127.429L325.286 128.228C325.286 128.228 325.952 129.801 325.286 131.048C325.286 131.048 325.356 128.291 324.953 128.335C324.87 128.335 323.818 128.809 323.818 128.809C323.818 128.809 324.937 131.545 323.891 133.452C323.891 133.452 324.417 130.179 323.416 128.998L321.868 129.794C321.868 129.794 323.199 132.63 322.088 134.832C322.088 134.832 322.517 131.389 321.542 129.993L320.127 130.988C320.127 130.988 321.365 133.777 320.433 135.605C320.433 135.605 320.527 131.575 319.818 131.237C319.818 131.237 318.576 132.232 318.37 132.643C318.37 132.643 319.215 134.666 318.576 135.678C318.576 135.678 318.353 132.981 318.06 132.955C318.06 132.955 316.782 134.67 316.599 135.88C316.714 134.758 317.122 133.686 317.781 132.769C317.09 132.864 316.442 133.158 315.917 133.615C315.917 133.615 316.167 132.368 318.097 132.358C318.097 132.358 319.145 131.061 319.428 130.991C319.428 130.991 317.521 130.736 316.333 131.19C316.333 131.19 317.415 130.056 319.794 130.716L321.192 129.691C321.192 129.691 318.689 129.22 317.601 129.545C317.601 129.545 318.886 128.55 321.568 129.462L323.076 128.663C323.076 128.663 320.949 128.092 319.661 128.195C319.661 128.195 321.049 127.532 323.515 128.451L324.587 128.036C324.587 128.036 323.026 127.648 322.57 127.575C322.114 127.502 322.091 127.376 322.091 127.376C323.097 127.261 324.116 127.426 325.033 127.854C325.033 127.854 327.293 127.121 327.26 126.978Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M284.469 28.1393C284.469 28.1393 274.311 20.5672 270.68 28.7695C270.68 28.7695 269.572 29.9138 270.367 31.2836C270.367 31.2836 270.747 30.7496 271.699 31.6351C272.036 31.9477 272.409 32.2194 272.81 32.4444C273.354 32.7458 273.982 32.8623 274.598 32.7761C274.598 32.7761 278.379 33.5025 282.735 29.4196C282.735 29.4196 284.286 28.922 284.433 28.6302L282.146 28.2189C282.146 28.2189 281.906 29.9005 280.725 30.6534C280.725 30.6534 282.186 28.3118 281.807 28.1426C281.73 28.1061 280.588 27.9768 280.588 27.9768C280.588 27.9768 280.159 30.9021 278.295 32.0066C278.295 32.0066 280.415 29.4494 280.152 27.9237L278.412 27.8308C278.412 27.8308 278.116 30.9453 276.039 32.2852C276.039 32.2852 278.162 29.5356 278.036 27.8375L276.312 27.9768C276.312 27.9768 275.979 31.005 274.228 32.1061C274.228 32.1061 276.358 28.6832 275.919 28.0332C275.919 28.0332 274.345 28.2554 273.955 28.5141C273.955 28.5141 273.656 30.6832 272.591 31.2338C272.591 31.2338 273.769 28.796 273.529 28.6269C273.529 28.6269 271.556 29.4594 270.78 30.4079C271.451 29.4997 272.348 28.7817 273.383 28.325C272.739 28.0584 272.031 27.9846 271.346 28.1128C271.346 28.1128 272.195 27.1642 273.865 28.1293C273.865 28.1293 275.426 27.5423 275.693 27.6152C275.693 27.6152 274.178 26.4312 272.924 26.2255C272.924 26.2255 274.435 25.7944 276.149 27.5522L277.876 27.3764C277.876 27.3764 275.959 25.7181 274.854 25.4395C274.854 25.4395 276.461 25.2371 278.315 27.3665L280.023 27.4428C280.023 27.4428 278.478 25.8773 277.317 25.3134C277.317 25.3134 278.848 25.4461 280.509 27.4793L281.644 27.6617C281.644 27.6617 280.495 26.5406 280.136 26.2487C279.776 25.9569 279.83 25.8607 279.83 25.8607C280.754 26.27 281.547 26.9267 282.119 27.7579C282.119 27.7579 284.426 28.2753 284.469 28.1393Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M292.317 82.8032C292.317 82.8032 288.816 70.6539 280.941 75.0154C280.941 75.0154 279.363 75.2575 279.167 76.8297C279.167 76.8297 279.793 76.634 280.009 77.9043C280.089 78.3607 280.223 78.806 280.408 79.231C280.655 79.8026 281.083 80.2778 281.627 80.5843C281.627 80.5843 284.203 83.4367 290.147 82.7998C290.147 82.7998 291.685 83.3371 291.977 83.1912L290.403 81.4864C290.403 81.4864 289.195 82.6871 287.797 82.5743C287.797 82.5743 290.38 81.5793 290.18 81.2244C290.14 81.1514 289.308 80.3587 289.308 80.3587C289.308 80.3587 287.198 82.435 285.041 82.1929C285.041 82.1929 288.28 81.43 288.992 80.0569L287.661 78.9358C287.661 78.9358 285.537 81.2376 283.071 81.0585C283.071 81.0585 286.426 80.1398 287.351 78.7103L285.893 77.7849C285.893 77.7849 283.78 79.9905 281.73 79.8247C281.73 79.8247 285.501 78.3753 285.547 77.5959C285.547 77.5959 284.156 76.8264 283.687 76.7998C283.687 76.7998 282.132 78.3454 280.951 78.1464C280.951 78.1464 283.367 76.9093 283.281 76.6307C283.281 76.6307 281.204 76.11 280.009 76.3985C281.091 76.0787 282.238 76.0456 283.337 76.3023C282.985 75.7022 282.465 75.2179 281.84 74.9093C281.84 74.9093 283.091 74.6605 283.837 76.435C283.837 76.435 285.437 76.906 285.604 77.1249C285.604 77.1249 285.115 75.2708 284.239 74.3521C284.239 74.3521 285.704 74.9159 286 77.357L287.484 78.2559C287.484 78.2559 286.965 75.7683 286.246 74.8927C286.246 74.8927 287.651 75.6987 287.84 78.5113L289.172 79.5959C289.172 79.5959 288.889 77.4201 288.303 76.2791C288.303 76.2791 289.445 77.3073 289.538 79.9275L290.33 80.7567C290.33 80.7567 290.097 79.1713 289.997 78.7202C289.897 78.2692 289.997 78.2061 289.997 78.2061C290.49 79.0884 290.726 80.0898 290.679 81.0983C290.679 81.0983 292.197 82.8828 292.317 82.8032Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M214.295 110.182C214.295 110.182 207.496 99.5089 201.182 105.897C201.182 105.897 199.738 106.56 199.991 108.136C199.991 108.136 200.54 107.771 201.106 108.932C201.309 109.343 201.561 109.729 201.858 110.079C202.255 110.558 202.798 110.894 203.405 111.035C203.405 111.035 206.684 113.051 212.209 110.769C212.209 110.769 213.836 110.855 214.076 110.633L212.079 109.439C212.079 109.439 211.257 110.932 209.882 111.214C209.882 111.214 212.086 109.555 211.789 109.25C211.733 109.19 210.708 108.666 210.708 108.666C210.708 108.666 209.266 111.247 207.13 111.622C207.13 111.622 210.022 109.98 210.322 108.461L208.727 107.761C208.727 107.761 207.339 110.564 204.923 111.078C204.923 111.078 207.885 109.257 208.368 107.625L206.704 107.147C206.704 107.147 205.299 109.857 203.286 110.272C203.286 110.272 206.494 107.824 206.318 107.061C206.318 107.061 204.767 106.713 204.321 106.819C204.321 106.819 203.266 108.739 202.074 108.879C202.074 108.879 204.044 107.015 203.881 106.769C203.881 106.769 201.741 106.852 200.676 107.466C201.626 106.852 202.721 106.498 203.851 106.438C203.345 105.96 202.71 105.641 202.024 105.519C202.024 105.519 203.152 104.932 204.354 106.424C204.354 106.424 206.018 106.424 206.248 106.59C206.248 106.59 205.249 104.932 204.154 104.312C204.154 104.312 205.719 104.444 206.69 106.703L208.371 107.147C208.371 107.147 207.17 104.909 206.234 104.268C206.234 104.268 207.809 104.647 208.784 107.297L210.355 107.96C210.355 107.96 209.47 105.953 208.581 105.015C208.581 105.015 209.965 105.678 210.794 108.169L211.793 108.743C211.793 108.743 211.127 107.287 210.891 106.885C210.654 106.484 210.748 106.391 210.748 106.391C211.468 107.1 211.976 107.995 212.215 108.975C212.215 108.975 214.206 110.295 214.295 110.182Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M258.985 55.6458C258.985 55.6458 252.518 44.7702 246.005 50.9593C246.005 50.9593 244.54 51.5894 244.746 53.1616C244.746 53.1616 245.302 52.81 245.835 53.9875C246.025 54.406 246.265 54.8002 246.55 55.1616C246.933 55.6507 247.466 56.0005 248.068 56.1566C248.068 56.1566 251.28 58.2727 256.875 56.1566C256.875 56.1566 258.499 56.2926 258.745 56.077L256.791 54.8233C256.791 54.8233 255.926 56.286 254.542 56.5281C254.542 56.5281 256.795 54.9261 256.512 54.6243C256.452 54.5613 255.447 54.004 255.447 54.004C255.447 54.004 253.926 56.5414 251.786 56.8498C251.786 56.8498 254.728 55.2976 255.071 53.7918L253.5 53.0554C253.5 53.0554 252.025 55.8183 249.592 56.2594C249.592 56.2594 252.611 54.5314 253.144 52.9161L251.499 52.3855C251.499 52.3855 250.008 55.0389 247.985 55.4037C247.985 55.4037 251.266 53.0555 251.113 52.2893C251.113 52.2893 249.576 51.8913 249.116 51.9841C249.116 51.9841 248.002 53.8714 246.807 53.9742C246.807 53.9742 248.834 52.1765 248.68 51.9244C248.68 51.9244 246.537 51.941 245.455 52.5215C246.424 51.939 247.529 51.6189 248.66 51.5928C248.169 51.0997 247.543 50.7608 246.86 50.6176C246.86 50.6176 248.008 50.0637 249.19 51.5928C249.19 51.5928 250.854 51.6491 251.077 51.8183C251.077 51.8183 250.135 50.1599 249.057 49.4767C249.057 49.4767 250.614 49.6558 251.516 51.9443L253.18 52.4418C253.18 52.4418 252.052 50.1666 251.133 49.4966C251.133 49.4966 252.698 49.9244 253.59 52.6011L255.137 53.3208C255.137 53.3208 254.315 51.2876 253.473 50.3357C253.473 50.3357 254.834 51.0422 255.59 53.5563L256.565 54.1599C256.565 54.1599 255.939 52.684 255.72 52.276C255.5 51.868 255.593 51.7785 255.593 51.7785C256.291 52.5092 256.771 53.4186 256.981 54.4054C256.981 54.4054 258.888 55.7553 258.985 55.6458Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M218.07 78.5199C218.07 78.5199 218.403 65.8831 209.593 67.6642C209.593 67.6642 208.015 67.4221 207.35 68.8616C207.35 68.8616 208.015 68.8616 207.829 70.1385C207.768 70.5938 207.761 71.0547 207.809 71.5116C207.869 72.1314 208.132 72.7141 208.558 73.17C208.558 73.17 210.145 76.6659 216.006 77.8533C216.006 77.8533 217.308 78.8317 217.634 78.7786L216.635 76.6825C216.635 76.6825 215.121 77.4586 213.82 76.9312C213.82 76.9312 216.582 76.7687 216.506 76.3641C216.506 76.2811 215.933 75.2728 215.933 75.2728C215.933 75.2728 213.291 76.6161 211.31 75.7339C211.31 75.7339 214.639 75.9826 215.727 74.8914L214.798 73.4221C214.798 73.4221 212.076 74.9743 209.779 74.0589C209.779 74.0589 213.257 74.1982 214.575 73.1136L213.467 71.7869C213.467 71.7869 210.781 73.2529 208.877 72.4768C208.877 72.4768 212.911 72.2347 213.204 71.5017C213.204 71.5017 212.112 70.3508 211.673 70.175C211.673 70.175 209.723 71.17 208.658 70.6327C208.658 70.6327 211.32 70.1883 211.337 69.8931C211.337 69.8931 209.516 68.7687 208.288 68.6858C209.421 68.7059 210.528 69.0216 211.5 69.6012C211.348 68.9232 211.001 68.3042 210.501 67.8201C210.501 67.8201 211.77 67.9627 211.943 69.8765C211.943 69.8765 213.33 70.8118 213.42 71.0705C213.42 71.0705 213.517 69.1567 212.961 68.0158C212.961 68.0158 214.186 68.9942 213.727 71.4088L214.868 72.7156C214.868 72.7156 215.128 70.1883 214.712 69.1368C214.712 69.1368 215.803 70.3276 215.131 73.0672L216.053 74.4967C216.053 74.4967 216.446 72.3375 216.236 71.0672C216.236 71.0672 217.008 72.3939 216.303 74.9179L216.809 75.9461C216.809 75.9461 217.065 74.364 217.098 73.903C217.131 73.442 217.258 73.4121 217.258 73.4121C217.458 74.4016 217.379 75.427 217.028 76.374C217.028 76.374 217.923 78.5631 218.07 78.5199Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M232.635 239.089C237.585 239.089 241.598 238.413 241.598 237.579C241.598 236.746 237.585 236.07 232.635 236.07C227.685 236.07 223.672 236.746 223.672 237.579C223.672 238.413 227.685 239.089 232.635 239.089Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M199.961 262.003C204.911 262.003 208.924 261.327 208.924 260.493C208.924 259.66 204.911 258.984 199.961 258.984C195.011 258.984 190.998 259.66 190.998 260.493C190.998 261.327 195.011 262.003 199.961 262.003Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M30.9991 250.26C35.9492 250.26 39.9621 249.585 39.9621 248.751C39.9621 247.918 35.9492 247.242 30.9991 247.242C26.049 247.242 22.0361 247.918 22.0361 248.751C22.0361 249.585 26.049 250.26 30.9991 250.26Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         opacity="0.1"
         d="M267.944 260.487C272.895 260.487 276.907 259.811 276.907 258.978C276.907 258.144 272.895 257.469 267.944 257.469C262.994 257.469 258.981 258.144 258.981 258.978C258.981 259.811 262.994 260.487 267.944 260.487Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M277.276 242.089C284.668 242.089 290.659 241.079 290.659 239.834C290.659 238.588 284.668 237.578 277.276 237.578C269.885 237.578 263.894 238.588 263.894 239.834C263.894 241.079 269.885 242.089 277.276 242.089Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M282.825 236.143C283.436 235.648 283.88 234.979 284.1 234.226C284.266 233.463 283.94 232.551 283.211 232.272C282.392 231.96 281.517 232.524 280.851 233.095C280.185 233.665 279.43 234.318 278.561 234.199C279.007 233.795 279.341 233.284 279.53 232.713C279.719 232.143 279.757 231.534 279.64 230.945C279.602 230.701 279.498 230.472 279.34 230.282C278.884 229.798 278.062 230.007 277.516 230.388C275.786 231.602 275.303 233.944 275.293 236.053C275.12 235.294 275.266 234.501 275.263 233.731C275.26 232.962 275.043 232.073 274.381 231.668C273.974 231.442 273.515 231.328 273.05 231.337C272.271 231.31 271.402 231.386 270.873 231.954C270.207 232.657 270.384 233.841 270.956 234.607C271.529 235.373 272.404 235.867 273.209 236.405C273.854 236.788 274.404 237.311 274.82 237.934C274.868 238.021 274.907 238.112 274.937 238.206H279.816C280.908 237.657 281.921 236.963 282.825 236.143Z"
-        fill="#F47738"
+        fill={fill}
       />
       <path
         d="M24.9814 241.737C24.9814 241.737 30.0903 241.581 31.6379 240.486C33.1856 239.392 39.5026 238.088 39.8854 239.843C40.2681 241.598 47.567 248.563 41.7958 248.609C36.0246 248.656 28.3862 247.714 26.8486 246.778C25.3109 245.843 24.9814 241.737 24.9814 241.737Z"
@@ -2565,10 +2595,10 @@ const NoResultsFoundIcon = () => (
   </svg>
 );
 
-const WorksMgmtIcon = ({ fill = "white" }) => (
+const WorksMgmtIcon = ({ fill = "white" ,width="34",height="36"}) => (
   <svg
-    width="34"
-    height="36"
+    width={width}
+    height={height}
     viewBox="0 0 34 36"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -2584,10 +2614,10 @@ const WorksMgmtIcon = ({ fill = "white" }) => (
   </svg>
 );
 
-const BioMetricIcon = ({ fill = "#F47738" }) => (
+const BioMetricIcon = ({ fill = "#C84C0E" ,width="30",height="34"}) => (
   <svg
-    width="30"
-    height="34"
+    width={width}
+    height={height}
     viewBox="0 0 30 34"
     fill={"none"}
     xmlns="http://www.w3.org/2000/svg"
@@ -2599,11 +2629,11 @@ const BioMetricIcon = ({ fill = "#F47738" }) => (
   </svg>
 );
 
-const AddFileFilled = ({ className = "", fill = "", style = {} }) => (
+const AddFileFilled = ({ className = "", fill = "#C84C0E", style = {} ,width="19",height="18"}) => (
   <svg
-    width="19"
+    width={width}
     className={className}
-    height="18"
+    height={height}
     style={style}
     viewBox="0 0 19 18"
     fill={fill}
@@ -2611,15 +2641,15 @@ const AddFileFilled = ({ className = "", fill = "", style = {} }) => (
   >
     <path
       d="M14.6016 8.75C15.2141 8.75 15.8003 8.86375 16.3516 9.05625V5.25L11.1016 0H2.35156C1.38031 0 0.601562 0.77875 0.601562 1.75V14C0.601562 14.9712 1.38906 15.75 2.35156 15.75H9.65781C9.46531 15.1987 9.35156 14.6125 9.35156 14C9.35156 11.1037 11.7053 8.75 14.6016 8.75ZM10.2266 1.3125L15.0391 6.125H10.2266V1.3125ZM18.1016 13.125V14.875H15.4766V17.5H13.7266V14.875H11.1016V13.125H13.7266V10.5H15.4766V13.125H18.1016Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const LocateIcon = ({ className = "" }) => (
+const LocateIcon = ({ className = "" ,width="22",height="22",fill="#505A5F"}) => (
   <svg
-    width="22"
-    height="22"
+    width={width}
+    height={height}
     viewBox="0 0 22 22"
     fill="none"
     className={className}
@@ -2627,15 +2657,15 @@ const LocateIcon = ({ className = "" }) => (
   >
     <path
       d="M11 7C8.79 7 7 8.79 7 11C7 13.21 8.79 15 11 15C13.21 15 15 13.21 15 11C15 8.79 13.21 7 11 7ZM19.94 10C19.48 5.83 16.17 2.52 12 2.06V0H10V2.06C5.83 2.52 2.52 5.83 2.06 10H0V12H2.06C2.52 16.17 5.83 19.48 10 19.94V22H12V19.94C16.17 19.48 19.48 16.17 19.94 12H22V10H19.94ZM11 18C7.13 18 4 14.87 4 11C4 7.13 7.13 4 11 4C14.87 4 18 7.13 18 11C18 14.87 14.87 18 11 18Z"
-      fill="#505A5F"
+      fill={fill}
     />
   </svg>
 );
 
-const ProjectIcon = ({ className = "", fill = "none", style = {} }) => (
+const ProjectIcon = ({ className = "", fill = "white", style = {},width="28",height="22" }) => (
   <svg
-    width="28"
-    height="22"
+    width={width}
+    height={height}
     viewBox="0 0 28 22"
     className={className}
     style={style}
@@ -2644,14 +2674,14 @@ const ProjectIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M11.3346 0.333984H3.33464C1.86797 0.333984 0.681302 1.53398 0.681302 3.00065L0.667969 19.0007C0.667969 20.4673 1.86797 21.6673 3.33464 21.6673H24.668C26.1346 21.6673 27.3346 20.4673 27.3346 19.0007V5.66732C27.3346 4.20065 26.1346 3.00065 24.668 3.00065H14.0013L11.3346 0.333984Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
-const EstimateIcon = ({ className = "", fill = "none", style = {} }) => (
+const EstimateIcon = ({ className = "", fill = "none", style = {},width="28",height="31" }) => (
   <svg
-    width="28"
-    height="31"
+    width={width}
+    height={height}
     viewBox="0 0 28 31"
     className={className}
     style={style}
@@ -2665,14 +2695,14 @@ const EstimateIcon = ({ className = "", fill = "none", style = {} }) => (
     <circle cx="21" cy="24" r="6.5" fill="#F8F8F8" stroke="#0B4B66" />
     <path
       d="M23.998 22.1797L23.6992 23.3164H18.1738L18.4785 22.1797H23.998ZM21.168 28.5723L18.3438 25.2266L18.3379 24.2246H19.7148C20.0352 24.2246 20.2988 24.1621 20.5059 24.0371C20.7129 23.9121 20.8672 23.7441 20.9688 23.5332C21.0703 23.3184 21.1211 23.0801 21.1211 22.8184C21.1211 22.5449 21.0742 22.3027 20.9805 22.0918C20.8867 21.8809 20.7363 21.7168 20.5293 21.5996C20.3223 21.4785 20.0469 21.418 19.7031 21.418H18.1797L18.5254 20.041H19.7031C20.4062 20.041 20.9922 20.1465 21.4609 20.3574C21.9297 20.5684 22.2812 20.873 22.5156 21.2715C22.75 21.666 22.8672 22.1445 22.8672 22.707C22.8672 23.1992 22.7891 23.6309 22.6328 24.002C22.4766 24.373 22.2285 24.6797 21.8887 24.9219C21.5488 25.1602 21.1016 25.3281 20.5469 25.4258L23.0898 28.4902V28.5723H21.168ZM24.0098 20.041L23.7051 21.1719H19.1289L19.4336 20.041H24.0098Z"
-      fill="#0B4B66"
+      fill={fill || "#0B4B66"}
     />
   </svg>
 );
-const OrganisationIcon = ({ className = "", fill = "none", style = {} }) => (
+const OrganisationIcon = ({ className = "", fill = "none", style = {},width="32",height="32" }) => (
   <svg
-    width="32"
-    height="32"
+    width={width}
+    height={height}
     viewBox="0 0 32 32"
     className={className}
     style={style}
@@ -2681,14 +2711,14 @@ const OrganisationIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M29.675 21.7392H28.1712L28.1709 17.6893C28.1644 17.6289 28.1525 17.5691 28.1351 17.511C28.1525 17.4527 28.1644 17.3931 28.1709 17.3327C28.1712 17.0481 28.0583 16.775 27.8572 16.5737C27.656 16.3723 27.3832 16.2591 27.0984 16.2589H17.0752V13.5307C18.8187 13.1727 20.2694 11.9699 20.9439 10.3226C21.6183 8.67533 21.4278 6.80052 20.436 5.32254C19.4441 3.84457 17.7812 2.95801 16.0013 2.95801C14.2214 2.95801 12.5584 3.84457 11.5665 5.32254C10.5747 6.80052 10.3842 8.67533 11.0587 10.3226C11.7331 11.9699 13.1838 13.1727 14.9275 13.5307V16.2589H4.90539C4.62057 16.2587 4.3477 16.3715 4.14614 16.5726C3.94479 16.7738 3.83153 17.0468 3.83153 17.3315V17.3327C3.83804 17.3921 3.84978 17.451 3.86677 17.5083C3.84915 17.5674 3.83699 17.628 3.83028 17.6893V21.7392H2.32776C2.04295 21.739 1.77007 21.8519 1.56851 22.053C1.36716 22.2541 1.25391 22.5272 1.25391 22.8118V27.9683C1.2537 28.2529 1.36654 28.526 1.56767 28.7274C1.76881 28.9287 2.04167 29.042 2.3265 29.0422H7.48177C7.76659 29.0424 8.03947 28.9293 8.24103 28.7282C8.44237 28.5271 8.55563 28.2542 8.55563 27.9696V22.8131C8.55584 22.5283 8.443 22.2554 8.24186 22.0538C8.04073 21.8525 7.76787 21.7392 7.48304 21.7392H5.978V18.4066H14.9274L14.9276 21.7392H13.4246C13.14 21.739 12.8671 21.8519 12.6656 22.053C12.4642 22.2541 12.351 22.5272 12.3508 22.8118V27.9683C12.3508 28.2529 12.4636 28.526 12.6647 28.7274C12.8659 28.9287 13.1387 29.042 13.4236 29.0422H18.578C18.8626 29.0424 19.1357 28.9293 19.337 28.7282C19.5384 28.5271 19.6516 28.2542 19.6518 27.9696V22.8131C19.6518 22.5283 19.539 22.2554 19.3379 22.0538C19.1367 21.8525 18.8639 21.7392 18.579 21.7392H17.0752V18.4066H26.0235L26.0233 21.7392H24.5206C24.236 21.739 23.9629 21.8519 23.7615 22.053C23.5602 22.2541 23.4469 22.5272 23.4467 22.8118V27.9683C23.4467 28.2529 23.5596 28.526 23.7607 28.7274C23.9618 28.9287 24.2347 29.042 24.5195 29.0422H29.675H29.6748C29.9596 29.0424 30.2325 28.9293 30.4341 28.7282C30.6354 28.5271 30.7487 28.2542 30.7487 27.9696V22.8131C30.7489 22.5283 30.636 22.2554 30.4349 22.0538C30.2338 21.8525 29.9607 21.7392 29.6761 21.7392L29.675 21.7392ZM12.8082 8.29749C12.8086 7.45061 13.1453 6.63852 13.7443 6.03991C14.343 5.44136 15.1554 5.10514 16.0023 5.10535C16.849 5.10535 17.6611 5.44197 18.2599 6.04099C18.8586 6.63976 19.1949 7.45206 19.1949 8.29878C19.1946 9.14566 18.8582 9.95775 18.2594 10.5566C17.6605 11.1553 16.8484 11.4918 16.0016 11.4918C15.1545 11.4918 14.342 11.1552 13.7433 10.5561C13.1445 9.95694 12.8081 9.14443 12.8083 8.29754L12.8082 8.29749ZM6.40815 26.8947H3.40184V23.8871H6.40837L6.40815 26.8947ZM17.5041 26.8947H14.4986V23.8871H17.5043L17.5041 26.8947ZM28.6011 26.8947H25.5946V23.8871H28.6011V26.8947Z"
-      fill="white"
+      fill={fill || "white"}
     />
   </svg>
 );
-const WageseekerIcon = ({ className = "", fill = "none", style = {} }) => (
+const WageseekerIcon = ({ className = "", fill = "none", style = {} ,width="32",height="26"}) => (
   <svg
-    width="32"
-    height="26"
+    width={width}
+    height={height}
     className={className}
     style={style}
     viewBox="0 0 32 26"
@@ -2699,14 +2729,14 @@ const WageseekerIcon = ({ className = "", fill = "none", style = {} }) => (
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M15.9997 0C18.0699 0 19.7467 1.6356 19.7467 3.65442C19.7467 5.67349 18.0702 7.30883 15.9997 7.30883C13.9298 7.30883 12.2533 5.67373 12.2533 3.65442C12.2533 1.6356 13.9298 0 15.9997 0ZM6.36438 0C8.43458 0 10.1113 1.6356 10.1113 3.65442C10.1113 5.67349 8.43483 7.30883 6.36438 7.30883C4.29444 7.30883 2.61793 5.67373 2.61793 3.65442C2.61793 1.6356 4.29444 0 6.36438 0ZM10.178 17.0607V25.9994H2.55385V15.9281H0.5V12.5096C0.5 10.151 2.47417 8.22564 4.89249 8.22564H7.83697C8.75633 8.22564 9.61452 8.50528 10.3214 8.97954C9.48153 9.92812 8.97393 11.1619 8.97393 12.5096V17.0602H10.178L10.178 17.0607ZM25.6354 0C27.7053 0 29.3818 1.6356 29.3818 3.65442C29.3818 5.67349 27.7053 7.30883 25.6354 7.30883C23.5652 7.30883 21.8884 5.67373 21.8884 3.65442C21.8884 1.6356 23.5649 0 25.6354 0ZM29.4484 15.9288V26H21.825V17.0613H23.0261V12.5107C23.0261 11.163 22.5182 9.92948 21.6786 8.98065C22.3855 8.50637 23.2437 8.22675 24.163 8.22675H27.1075C29.5258 8.22675 31.5 10.1522 31.5 12.5107V15.9293H29.4486L29.4484 15.9288ZM19.8131 15.9288V26H12.1896V15.9288H10.1352V12.5103C10.1352 10.1517 12.1094 8.22626 14.5277 8.22626H17.4722C19.8905 8.22626 21.8647 10.1517 21.8647 12.5103V15.9288H19.8131Z"
-      fill="white"
+      fill={fill || "white"}
     />
   </svg>
 );
-const ContractIcon = ({ className = "", fill = "none", style = {} }) => (
+const ContractIcon = ({ className = "", fill = "none", style = {} ,width="24",height="27"}) => (
   <svg
-    width="24"
-    height="27"
+    width={width}
+    height={height}
     className={className}
     style={style}
     viewBox="0 0 24 27"
@@ -2720,11 +2750,11 @@ const ContractIcon = ({ className = "", fill = "none", style = {} }) => (
     <g clip-path="url(#clip0_1_3)">
       <path
         d="M14.9269 16.7879L13.3359 18.3789L17.8331 22.8761L19.4241 21.2851L14.9269 16.7879Z"
-        fill="#0B4B66"
+        fill={fill || "#0B4B66"}
       />
       <path
         d="M16.1242 14.4996C17.5717 14.4996 18.7492 13.3221 18.7492 11.8746C18.7492 11.4396 18.6292 11.0346 18.4417 10.6746L16.4167 12.6996L15.2992 11.5821L17.3242 9.55711C16.9642 9.36961 16.5592 9.24961 16.1242 9.24961C14.6767 9.24961 13.4992 10.4271 13.4992 11.8746C13.4992 12.1821 13.5592 12.4746 13.6567 12.7446L12.2692 14.1321L10.9342 12.7971L11.4667 12.2646L10.4092 11.2071L11.9992 9.61711C11.1217 8.73961 9.69672 8.73961 8.81922 9.61711L6.16422 12.2721L7.22172 13.3296H5.10672L4.57422 13.8621L7.22922 16.5171L7.76172 15.9846V13.8621L8.81922 14.9196L9.35172 14.3871L10.6867 15.7221L5.12922 21.2796L6.71922 22.8696L15.2542 14.3421C15.5242 14.4396 15.8167 14.4996 16.1242 14.4996Z"
-        fill="#0B4B66"
+        fill={fill || "#0B4B66"}
       />
     </g>
     <defs>
@@ -2734,10 +2764,10 @@ const ContractIcon = ({ className = "", fill = "none", style = {} }) => (
     </defs>
   </svg>
 );
-const DashboardIcon = ({ className = "", fill = "none", style = {} }) => (
+const DashboardIcon = ({ className = "", fill = "none", style = {},width="24",height="24" }) => (
   <svg
-    width="24"
-    height="24"
+    width={width}
+    height={height}
     className={className}
     style={style}
     viewBox="0 0 24 24"
@@ -2746,14 +2776,14 @@ const DashboardIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M0 13.3333H10.6667V0H0V13.3333ZM0 24H10.6667V16H0V24ZM13.3333 24H24V10.6667H13.3333V24ZM13.3333 0V8H24V0H13.3333Z"
-      fill="white"
+      fill={fill || "white"}
     />
   </svg>
 );
-const HelperIcon = ({ className = "", fill = "none", style = {} }) => (
+const HelperIcon = ({ className = "", fill = "none", style = {},width="32", height="32" }) => (
   <svg
-    width="32"
-    height="32"
+    width={width}
+    height={height}
     className={className}
     style={style}
     viewBox="0 0 32 32"
@@ -2763,7 +2793,7 @@ const HelperIcon = ({ className = "", fill = "none", style = {} }) => (
     <g clip-path="url(#clip0_4347_41530)">
       <path
         d="M14.668 24.0003H17.3346V21.3337H14.668V24.0003ZM16.0013 2.66699C8.6413 2.66699 2.66797 8.64033 2.66797 16.0003C2.66797 23.3603 8.6413 29.3337 16.0013 29.3337C23.3613 29.3337 29.3346 23.3603 29.3346 16.0003C29.3346 8.64033 23.3613 2.66699 16.0013 2.66699ZM16.0013 26.667C10.1213 26.667 5.33464 21.8803 5.33464 16.0003C5.33464 10.1203 10.1213 5.33366 16.0013 5.33366C21.8813 5.33366 26.668 10.1203 26.668 16.0003C26.668 21.8803 21.8813 26.667 16.0013 26.667ZM16.0013 8.00033C13.0546 8.00033 10.668 10.387 10.668 13.3337H13.3346C13.3346 11.867 14.5346 10.667 16.0013 10.667C17.468 10.667 18.668 11.867 18.668 13.3337C18.668 16.0003 14.668 15.667 14.668 20.0003H17.3346C17.3346 17.0003 21.3346 16.667 21.3346 13.3337C21.3346 10.387 18.948 8.00033 16.0013 8.00033Z"
-        fill="white"
+        fill={fill || "white"}
       />
     </g>
     <defs>
@@ -2773,10 +2803,10 @@ const HelperIcon = ({ className = "", fill = "none", style = {} }) => (
     </defs>
   </svg>
 );
-const AttendanceIcon = ({ className = "", fill = "none", style = {} }) => (
+const AttendanceIcon = ({ className = "", fill = "none", style = {},width="32",height="32" }) => (
   <svg
-    width="32"
-    height="32"
+    width={width}
+    height={height}
     viewBox="0 0 32 32"
     className={className}
     style={style}
@@ -2785,38 +2815,38 @@ const AttendanceIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M23.9674 19.9844C21.0132 19.9844 18.5968 22.2203 18.3063 25.096C18.287 25.2879 18.2773 25.4831 18.2773 25.6798C18.2773 25.8687 18.2875 26.0542 18.3053 26.2382C18.3104 26.2924 18.3208 26.3463 18.3274 26.4004C18.6807 29.2087 21.0613 31.3745 23.9674 31.3745C26.8736 31.3745 29.258 29.2087 29.612 26.4004C29.6186 26.3463 29.6291 26.2924 29.6341 26.2382C29.6519 26.0542 29.6621 25.8687 29.6621 25.6798C29.6621 22.5289 27.1186 19.9844 23.9674 19.9844ZM26.6029 23.0278C26.7603 23.0232 26.9122 23.0839 27.0233 23.1958C27.2439 23.4177 27.2439 23.7765 27.0233 23.9984L23.804 27.2221C23.716 27.3105 23.6017 27.3675 23.4781 27.3845C23.4624 27.3868 23.4464 27.3883 23.4304 27.3891C23.2687 27.3977 23.1109 27.337 22.9967 27.2221L20.9839 25.2083C20.8769 25.1016 20.8167 24.9567 20.8167 24.8052C20.8167 24.654 20.8769 24.5091 20.9839 24.4021C21.0864 24.2986 21.2244 24.2381 21.3698 24.2331C21.5274 24.229 21.6794 24.2902 21.7902 24.4021L23.4003 26.0112L26.2203 23.1957C26.322 23.0933 26.4588 23.0333 26.6029 23.0277L26.6029 23.0278Z"
-      fill="white"
+      fill={fill || "white"}
     />
     <path
       d="M5.18073 14.0079C5.73151 14.0079 6.25584 14.1431 6.76753 14.2959C6.48515 14.9735 6.31943 15.7296 6.31943 16.5666V22.2623H0.625V17.7065C0.625 16.454 1.16028 15.5837 1.99929 14.962C2.83852 14.3403 4.00518 14.0078 5.18075 14.0078L5.18073 14.0079Z"
-      fill="white"
+      fill={fill || "white"}
     />
     <path
       d="M13.4337 11.5879C14.5168 11.5879 15.5471 11.898 16.4705 12.3362C15.9083 13.0822 15.5441 13.9667 15.4575 14.9739C15.4376 15.1211 15.4252 15.2721 15.4252 15.4286V23.9687H7.45703V16.5673C7.45703 16.337 7.47228 16.1179 7.49922 15.9068C7.50202 15.8831 7.50837 15.8613 7.51142 15.8379C7.60089 15.2139 7.80067 14.6674 8.08737 14.1843L8.08763 14.1845C8.10212 14.1593 8.11482 14.1334 8.12524 14.1065C8.42694 13.6238 8.81509 13.2093 9.27739 12.861C10.3835 12.0274 11.9045 11.5879 13.4341 11.5879L13.4337 11.5879Z"
-      fill="white"
+      fill={fill || "white"}
     />
     <path
       d="M23.9678 10.4473C25.8723 10.4473 27.7755 10.8999 29.1495 11.7504C30.5236 12.6011 31.3735 13.7817 31.3735 15.4277V26.2465H30.7508C30.7643 26.0876 30.7859 25.9305 30.7943 25.7717C30.7994 25.7412 30.8022 25.7104 30.8022 25.6794C30.8022 25.6629 30.8001 25.6469 30.7999 25.6303V25.6306V25.626C30.7762 22.5737 28.7388 19.9906 25.9539 19.1419C25.7444 19.0781 25.5317 19.0232 25.3144 18.9795C25.3068 18.978 25.2986 18.9777 25.291 18.9762C25.0818 18.935 24.8693 18.9023 24.6538 18.8806C24.6528 18.8806 24.6515 18.8796 24.6505 18.8796C24.4261 18.857 24.1983 18.8451 23.9678 18.8451C23.7324 18.8451 23.4999 18.8573 23.2706 18.8806C19.8307 19.2314 17.1391 22.1483 17.1391 25.6795C17.1391 25.8709 17.1513 26.059 17.1668 26.2466H16.5664V24.5686V24.5688C16.5667 24.5591 16.5667 24.5495 16.5664 24.5398V15.4278C16.5664 15.2425 16.5809 15.0656 16.602 14.8918C16.6083 14.8402 16.6172 14.7898 16.6254 14.7395C16.6444 14.6198 16.6688 14.5034 16.6976 14.3893C16.7123 14.3313 16.7258 14.2734 16.7431 14.217C16.7751 14.111 16.8147 14.009 16.8554 13.9079C16.9065 13.7826 16.9642 13.6603 17.0277 13.5421C17.0519 13.4969 17.0753 13.4509 17.1012 13.4064C17.1579 13.3106 17.2186 13.2176 17.2834 13.1263C17.2982 13.1052 17.3137 13.0849 17.3289 13.064C17.4799 12.8597 17.6504 12.666 17.8403 12.4825L17.8408 12.4822C17.8553 12.4675 17.869 12.4517 17.882 12.4355C18.1504 12.1861 18.4546 11.9584 18.7904 11.7505C20.1644 10.8998 22.0633 10.4474 23.9678 10.4474L23.9678 10.4473Z"
-      fill="white"
+      fill={fill || "white"}
     />
     <path
       d="M5.17963 7.46096C6.12974 7.46096 6.88537 8.21789 6.88537 9.16794C6.88537 10.118 6.12974 10.8782 5.17963 10.8782C4.22952 10.8782 3.47266 10.118 3.47266 9.16794C3.47266 9.04924 3.4846 8.93359 3.50722 8.82202C3.66506 8.04069 4.34827 7.46096 5.17963 7.46096Z"
-      fill="white"
+      fill={fill || "white"}
     />
     <path
       d="M13.1504 2.90457C13.249 2.90457 13.3468 2.9094 13.4429 2.91906H13.4462C13.541 2.92872 13.6346 2.94371 13.7263 2.96252C14.6555 3.15162 15.4173 3.78985 15.777 4.64282C15.8847 4.89877 15.9559 5.17429 15.9849 5.46228C15.9945 5.5581 15.9994 5.6557 15.9994 5.75457C15.9994 5.85319 15.9945 5.95003 15.9849 6.04585C15.9559 6.33383 15.8847 6.60985 15.777 6.86531C15.4176 7.7173 14.6559 8.35372 13.7263 8.54229C13.5418 8.57965 13.3507 8.59973 13.1547 8.59998C13.0561 8.59998 12.9582 8.59414 12.8621 8.58448C11.6136 8.45892 10.6081 7.53657 10.3624 6.32951C10.3248 6.14371 10.3047 5.95207 10.3047 5.75458C10.3047 5.65596 10.3095 5.55811 10.3192 5.46203C10.3288 5.36595 10.3436 5.2714 10.3626 5.17838C10.6084 3.97034 11.6139 3.04488 12.8624 2.91878C12.9569 2.90938 13.0533 2.9043 13.1504 2.9043V2.90457Z"
-      fill="white"
+      fill={fill || "white"}
     />
     <path
       d="M23.9677 0.626961C24.0861 0.626961 24.2028 0.633061 24.3179 0.644753C25.815 0.795729 27.021 1.90491 27.3158 3.35344C27.3611 3.57635 27.3847 3.80611 27.3847 4.04302C27.3847 4.27965 27.3611 4.51069 27.3158 4.73358C27.021 6.18211 25.815 7.29131 24.3179 7.44227C24.2043 7.45371 24.0889 7.45981 23.972 7.46006C23.8536 7.46006 23.7369 7.45396 23.6218 7.44227C23.5066 7.43058 23.393 7.4138 23.2814 7.39118C22.0558 7.14184 21.0732 6.24007 20.7082 5.06145C20.6086 4.74018 20.5547 4.39782 20.5547 4.04301C20.5547 3.92457 20.5608 3.8079 20.5725 3.69277C20.5956 3.46249 20.6419 3.23984 20.7082 3.02557C21.0732 1.84726 22.0555 0.945432 23.2814 0.695833C23.3927 0.673212 23.5066 0.656183 23.6218 0.644745C23.7354 0.633308 23.8508 0.626961 23.9677 0.626961Z"
-      fill="white"
+      fill={fill || "white"}
     />
   </svg>
 );
-const HRIcon = ({ className = "", fill = "none", style = {} }) => (
+const HRIcon = ({ className = "", fill = "white", style = {},width="28",height="28" }) => (
   <svg
-    width="28"
-    height="28"
+    width={width}
+    height={height}
     className={className}
     style={style}
     viewBox="0 0 28 28"
@@ -2825,14 +2855,14 @@ const HRIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M3.33464 6.00033H0.667969V24.667C0.667969 26.1337 1.86797 27.3337 3.33464 27.3337H22.0013V24.667H3.33464V6.00033ZM24.668 0.666992H8.66797C7.2013 0.666992 6.0013 1.86699 6.0013 3.33366V19.3337C6.0013 20.8003 7.2013 22.0003 8.66797 22.0003H24.668C26.1346 22.0003 27.3346 20.8003 27.3346 19.3337V3.33366C27.3346 1.86699 26.1346 0.666992 24.668 0.666992ZM16.668 3.33366C18.8813 3.33366 20.668 5.12033 20.668 7.33366C20.668 9.54699 18.8813 11.3337 16.668 11.3337C14.4546 11.3337 12.668 9.54699 12.668 7.33366C12.668 5.12033 14.4546 3.33366 16.668 3.33366ZM24.668 19.3337H8.66797V17.3337C8.66797 14.6803 14.0013 13.3337 16.668 13.3337C19.3346 13.3337 24.668 14.6803 24.668 17.3337V19.3337Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
-const MuktaHomeIcon = ({ className = "", fill = "none", style = {} }) => (
+const MuktaHomeIcon = ({ className = "", fill = "white", style = {} ,width="28",height="23"}) => (
   <svg
-    width="28"
-    height="23"
+    width={width}
+    height={height}
     className={className}
     style={style}
     viewBox="0 0 28 23"
@@ -2841,14 +2871,14 @@ const MuktaHomeIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M11.3346 22.6667V14.6667H16.668V22.6667H23.3346V12H27.3346L14.0013 0L0.667969 12H4.66797V22.6667H11.3346Z"
-      fill="white"
+      fill={fill}
     />
   </svg>
 );
-const DoubleTickIcon = ({ className = "", fill = "none", style = {} }) => (
+const DoubleTickIcon = ({ className = "", fill = "#C84C0E", style = {},width,height }) => (
   <svg
-    width="32"
-    height="19"
+    width={width || "32"}
+    height={height || "19"}
     viewBox="0 0 32 19"
     className={className}
     style={style}
@@ -2857,14 +2887,14 @@ const DoubleTickIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M24.0002 2.33312L22.1202 0.453125L13.6669 8.90646L15.5469 10.7865L24.0002 2.33312ZM29.6535 0.453125L15.5469 14.5598L9.97354 8.99979L8.09354 10.8798L15.5469 18.3331L31.5469 2.33312L29.6535 0.453125ZM0.546875 10.8798L8.00021 18.3331L9.88021 16.4531L2.44021 8.99979L0.546875 10.8798Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
-const InfoIcon = ({ className = "", fill = "none", style = {} }) => (
+const InfoIcon = ({ className = "", fill = "none", style = {},width,height }) => (
   <svg
-    width="20"
-    height="20"
+    width={width || "20"}
+    height={height || "20"}
     viewBox="0 0 20 20"
     className={className}
     style={style}
@@ -2873,14 +2903,14 @@ const InfoIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M9 5H11V7H9V5ZM9 9H11V15H9V9ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z"
-      fill="#505A5F"
+      fill={fill || "#505A5F"}
     />
   </svg>
 );
-const PaymentIcon = ({ className = "", fill = "none", style = {} }) => (
+const PaymentIcon = ({ className = "", fill = "none", style = {},width,height }) => (
   <svg
-    width="34"
-    height="34"
+    width={width || "34"}
+    height={height || "34"}
     viewBox="0 0 34 34"
     className={className}
     style={style}
@@ -2890,7 +2920,7 @@ const PaymentIcon = ({ className = "", fill = "none", style = {} }) => (
     <g clip-path="url(#clip0_7555_25801)">
       <path
         d="M23.9987 2.66675H7.9987C6.53203 2.66675 5.33203 3.86675 5.33203 5.33341V26.6667C5.33203 28.1334 6.53203 29.3334 7.9987 29.3334H23.9987C25.4654 29.3334 26.6654 28.1334 26.6654 26.6667V5.33341C26.6654 3.86675 25.4654 2.66675 23.9987 2.66675ZM7.9987 5.33341H14.6654V16.0001L11.332 14.0001L7.9987 16.0001V5.33341Z"
-        fill="white"
+        fill={fill || "white"}
       />
     </g>
     <defs>
@@ -2901,10 +2931,10 @@ const PaymentIcon = ({ className = "", fill = "none", style = {} }) => (
   </svg>
 );
 
-const HistoryIcon = ({ className = "", fill = "none", style = {} }) => (
+const HistoryIcon = ({ className = "", fill = "#C84C0E", style = {},width,height }) => (
   <svg
-    width="36"
-    height="36"
+    width={width || "36"}
+    height={height || "36"}
     viewBox="0 0 36 36"
     fill={fill}
     className={className}
@@ -2913,39 +2943,39 @@ const HistoryIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M30.7437 5.30394C23.7393 -1.76798 12.3808 -1.76798 5.37636 5.30394L3.33196 7.36803V3.88935C3.33196 2.97184 2.5748 2.20731 1.66598 2.20731C0.757234 2.20731 0 2.97177 0 3.88935V11.42C0 12.3375 0.757166 13.102 1.66598 13.102H9.12473C10.0335 13.102 10.7907 12.3376 10.7907 11.42C10.7907 10.5025 10.0335 9.73794 9.12473 9.73794H5.67925L7.72365 7.67385C10.5633 4.80685 14.3116 3.35418 18.0599 3.35418C21.8083 3.35444 25.5565 4.80713 28.3961 7.67412C31.3493 10.6558 32.9017 14.7843 32.6366 18.9892C32.5988 19.9067 33.2802 20.7093 34.189 20.7858H34.3025C35.1733 20.7858 35.8927 20.0979 35.9685 19.2185C36.2714 14.0577 34.3783 8.97375 30.7435 5.304L30.7437 5.30394Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M18.2519 8.16797C17.3432 8.16797 16.5859 8.93243 16.5859 9.85001V18.1069C16.5859 18.8714 17.0782 19.5213 17.7976 19.7125L23.8176 21.4326C24.6883 21.7003 25.6349 21.1267 25.862 20.2857C26.1271 19.4066 25.5968 18.4509 24.6883 18.2216L19.9178 16.8073V9.85007C19.9178 8.93277 19.1984 8.16804 18.2519 8.16804L18.2519 8.16797Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M25.4454 31.0611C24.5746 31.5581 23.6659 31.9786 22.7194 32.2845C22.3406 32.3991 22.038 32.6668 21.8486 33.0108C21.6592 33.3548 21.6592 33.7753 21.7728 34.1577C22.038 34.9222 22.8707 35.3427 23.6281 35.1134C24.764 34.731 25.8619 34.2342 26.8842 33.6607C27.6036 33.2402 27.8307 32.3611 27.4143 31.6347C27.0733 30.9083 26.1646 30.6406 25.4454 31.0611Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M3.40851 20.1747C3.37074 19.7923 3.14335 19.4483 2.84069 19.1808C2.57553 18.9897 2.27287 18.875 1.96994 18.875H1.78058C1.40185 18.9131 1.06114 19.1427 0.796242 19.4483C0.569113 19.7541 0.455548 20.1362 0.531082 20.5567C0.682414 21.7801 0.947574 22.9651 1.36404 24.0736C1.6292 24.838 2.49996 25.2585 3.25712 24.9911C3.63585 24.8764 3.9385 24.5706 4.09008 24.2266C4.24141 23.8826 4.27944 23.4621 4.16588 23.0797C3.78715 22.1622 3.55977 21.1684 3.40844 20.1746L3.40851 20.1747Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M7.60837 28.6674C7.38124 28.4381 7.19188 28.2088 6.96476 27.9794C6.66183 27.6355 6.28338 27.4824 5.8669 27.4824C5.52621 27.4824 5.18553 27.5971 4.88257 27.8648C4.27672 28.4 4.20119 29.3556 4.769 29.9673C4.99613 30.235 5.26128 30.5025 5.52617 30.7702C6.09398 31.3435 6.73788 31.9171 7.38146 32.4138C8.02507 32.9109 8.97165 32.7578 9.42585 32.108C9.65298 31.8021 9.76655 31.42 9.72878 30.9995C9.69101 30.6172 9.46362 30.2732 9.16096 30.0057C8.63064 29.6231 8.10057 29.1645 7.6083 28.6675L7.60837 28.6674Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M33.281 24.1352C33.0538 24.0206 32.8645 23.9824 32.6374 23.9824C32.486 23.9824 32.3344 24.0206 32.1831 24.0589C31.8044 24.1736 31.5017 24.4413 31.3123 24.8234C30.8581 25.7026 30.328 26.582 29.7222 27.3464C29.2299 27.9963 29.3434 28.9138 29.9493 29.449C30.5551 29.946 31.5395 29.8313 32.0317 29.2196C32.7512 28.264 33.3948 27.2702 33.9248 26.1999C34.1142 25.8559 34.1142 25.4354 34.0006 25.053C33.8868 24.5939 33.6217 24.288 33.281 24.1352Z"
-      fill="#F47738"
+      fill={fill}
     />
     <path
       d="M17.1491 33.0137C16.1648 32.9371 15.1802 32.7844 14.2337 32.5166C14.1201 32.4785 13.9685 32.4785 13.855 32.4785C13.5898 32.4785 13.3627 32.555 13.1355 32.6697C12.7948 32.8609 12.5677 33.2049 12.4542 33.5872C12.227 34.3901 12.7193 35.1927 13.4765 35.422C14.6124 35.7279 15.7861 35.919 16.9975 35.9953H17.0733C17.8305 35.9953 18.4741 35.3836 18.5499 34.6192C18.5877 33.7784 17.9441 33.0521 17.1491 33.0137Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const WarningIcon = ({ className = "", fill = "none", style = {} }) => (
+const WarningIcon = ({ className = "", fill = "#C84C0E", style = {},width,height }) => (
   <svg
-    width="40"
-    height="40"
+    width={width || "40"}
+    height={height || "40"}
     viewBox="0 0 40 40"
     fill={fill}
     className={className}
@@ -2955,7 +2985,7 @@ const WarningIcon = ({ className = "", fill = "none", style = {} }) => (
     <g clip-path="url(#clip0_7513_43945)">
       <path
         d="M1.66797 35.0007H38.3346L20.0013 3.33398L1.66797 35.0007ZM21.668 30.0007H18.3346V26.6673H21.668V30.0007ZM21.668 23.334H18.3346V16.6673H21.668V23.334Z"
-        fill="#F47738"
+        fill={fill}
       />
     </g>
     <defs>
@@ -2966,10 +2996,10 @@ const WarningIcon = ({ className = "", fill = "none", style = {} }) => (
   </svg>
 );
 
-const AttentionListIcon = ({ className = "", fill = "none", style = {} }) => (
+const AttentionListIcon = ({ className = "", fill = "#C84C0E", style = {},width="36",height="36" }) => (
   <svg
-    width="36"
-    height="36"
+    width={width}
+    height={height}
     viewBox="0 0 24 27"
     fill={fill}
     className={className}
@@ -2978,15 +3008,15 @@ const AttentionListIcon = ({ className = "", fill = "none", style = {} }) => (
   >
     <path
       d="M21.3333 3.00065H15.76C15.2 1.45398 13.7333 0.333984 12 0.333984C10.2667 0.333984 8.8 1.45398 8.24 3.00065H2.66667C1.2 3.00065 0 4.20065 0 5.66732V24.334C0 25.8007 1.2 27.0007 2.66667 27.0007H21.3333C22.8 27.0007 24 25.8007 24 24.334V5.66732C24 4.20065 22.8 3.00065 21.3333 3.00065ZM12 3.00065C12.7333 3.00065 13.3333 3.60065 13.3333 4.33398C13.3333 5.06732 12.7333 5.66732 12 5.66732C11.2667 5.66732 10.6667 5.06732 10.6667 4.33398C10.6667 3.60065 11.2667 3.00065 12 3.00065ZM12.6667 21.6673H5.33333V19.0007H12.6667V21.6673ZM18.6667 16.334H5.33333V13.6673H18.6667V16.334ZM18.6667 11.0007H5.33333V8.33398H18.6667V11.0007Z"
-      fill="#F47738"
+      fill={fill}
     />
   </svg>
 );
 
-const XlsxFile = ({ className = "", fill = "none", style = {} }) => (
+const XlsxFile = ({ className = "", fill = "none", style = {},width="38",height="38" }) => (
   <svg
-    width="38"
-    height="38"
+    width={width}
+    height={height}
     viewBox="0 0 38 38"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -3024,10 +3054,10 @@ const XlsxFile = ({ className = "", fill = "none", style = {} }) => (
   </svg>
 );
 
-const DocFile = ({ className = "", fill = "none", styles = {} }) => (
+const DocFile = ({ className = "", fill = "none", styles = {},width="33",height="36" }) => (
   <svg
-    width="33"
-    height="36"
+    width={width}
+    height={height}
     viewBox="0 0 33 36"
     fill="none"
     className={className}
@@ -3052,10 +3082,10 @@ const DocFile = ({ className = "", fill = "none", styles = {} }) => (
     />
   </svg>
 );
-const PdfFile = ({ className = "", fill = "none", style = {} }) => (
+const PdfFile = ({ className = "", fill = "none", style = {},width="33",height="36" }) => (
   <svg
-    width="33"
-    height="36"
+    width={width}
+    height={height}
     viewBox="0 0 33 36"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -3078,10 +3108,10 @@ const PdfFile = ({ className = "", fill = "none", style = {} }) => (
     />
   </svg>
 );
-const JpgFile = ({ className = "", fill = "none", style = {} }) => (
+const JpgFile = ({ className = "", fill = "none", style = {} ,width="33",height="36"}) => (
   <svg
-    width="33"
-    height="36"
+    width={width}
+    height={height}
     viewBox="0 0 33 36"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -3102,10 +3132,10 @@ const JpgFile = ({ className = "", fill = "none", style = {} }) => (
   </svg>
 );
 
-const PngFile = ({ className = "", fill = "none", style = {} }) => (
+const PngFile = ({ className = "", fill = "none", style = {} ,width="34",height="36"}) => (
   <svg
-    width="34"
-    height="36"
+    width={width}
+    height={height}
     viewBox="0 0 34 36"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -3132,10 +3162,10 @@ const PngFile = ({ className = "", fill = "none", style = {} }) => (
   </svg>
 );
 
-const DocUpload = ({ className = "", fill = "none", styles }) => (
+const DocUpload = ({ className = "", fill = "none", styles,width="100",height="100" }) => (
   <svg
-    width="100"
-    height="100"
+    width={width}
+    height={height}
     viewBox="0 0 100 100"
     fill={fill ? fill : "none"}
     xmlns="http://www.w3.org/2000/svg"
@@ -3153,7 +3183,7 @@ const DocUpload = ({ className = "", fill = "none", styles }) => (
     <g opacity="0.1" clip-path="url(#clip0_4936_4271)">
       <path
         d="M54 27H38C35.8 27 34.02 28.8 34.02 31L34 63C34 65.2 35.78 67 37.98 67H62C64.2 67 66 65.2 66 63V39L54 27ZM58 59H42V55H58V59ZM58 51H42V47H58V51ZM52 41V30L63 41H52Z"
-        fill="#505A5F"
+        fill={fill || "#505A5F"}
       />
     </g>
     <defs>
@@ -3169,10 +3199,10 @@ const DocUpload = ({ className = "", fill = "none", styles }) => (
   </svg>
 );
 
-const DocXlsxUpload = ({ className = "", fill = "none", styles }) => (
+const DocXlsxUpload = ({ className = "", fill = "none", styles,width="100",height="100" }) => (
   <svg
-    width="100"
-    height="100"
+    width={width}
+    height={height}
     viewBox="0 0 100 100"
     fill={fill ? fill : "none"}
     xmlns="http://www.w3.org/2000/svg"
@@ -3233,10 +3263,10 @@ const DocXlsxUpload = ({ className = "", fill = "none", styles }) => (
   </svg>
 );
 
-const DocdocUpload = ({ className = "", fill = "none", styles }) => (
+const DocdocUpload = ({ className = "", fill = "none", styles,width="100",height="100" }) => (
   <svg
-    width="100"
-    height="100"
+    width={width}
+    height={height}
     viewBox="0 0 100 100"
     fill={fill ? fill : "none"}
     xmlns="http://www.w3.org/2000/svg"
@@ -3282,10 +3312,10 @@ const DocdocUpload = ({ className = "", fill = "none", styles }) => (
   </svg>
 );
 
-const DocPdfUpload = ({ className = "", fill = "none", styles }) => (
+const DocPdfUpload = ({ className = "", fill = "none", styles ,width="100",height="100"}) => (
   <svg
-    width="100"
-    height="100"
+    width={width}
+    height={height}
     viewBox="0 0 100 100"
     fill={fill ? fill : "none"}
     xmlns="http://www.w3.org/2000/svg"
@@ -3329,12 +3359,12 @@ const DocPdfUpload = ({ className = "", fill = "none", styles }) => (
   </svg>
 );
 
-const ProfileIcon = ({ className, styles,width,height }) => (
+const ProfileIcon = ({ className, styles,width="32",height="32" }) => (
   <svg
     className={className}
     style={{ ...styles }}
-    width={width || "32"}
-    height={height || "32"}
+    width={width}
+    height={height}
     viewBox="0 0 64 64"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js
index 4f491f32434..f392abc3dc5 100644
--- a/react/ui-components/src/atoms/Dropdown.js
+++ b/react/ui-components/src/atoms/Dropdown.js
@@ -146,11 +146,39 @@ const Dropdown = (props) => {
   const [forceSet, setforceSet] = useState(0);
   const [optionIndex, setOptionIndex] = useState(-1);
   const optionRef = useRef(null);
+  const dropdownComponentRef = useRef(null);
   const menuRef = useRef(null); 
   const selectorRef = useRef(null);
   const hasCustomSelector = props.customSelector ? true : false;
   const t = props.t || translateDummy;
 
+
+  const scrollIntoViewIfNeeded = () => {
+    if (dropdownComponentRef.current) {
+      const rect = dropdownComponentRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Check if the component is outside the viewport
+      const isOutsideViewport =
+        rect.top < 0 || rect.left < 0 || rect.bottom > viewportHeight || rect.right > viewportWidth;
+
+      if (isOutsideViewport) {
+        // Scroll to make the component visible
+        dropdownComponentRef.current.scrollIntoView({
+          behavior: "smooth", // Optional: smooth scrolling
+          block: "center",    // Scroll to the center vertically
+          inline: "center",   // Scroll to the center horizontally
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    scrollIntoViewIfNeeded();
+  }, []); // Runs on mount
+
+
   useEffect(() => {
     setSelectedOption(props.selected);
   }, [props.selected]);
@@ -430,6 +458,7 @@ const Dropdown = (props) => {
           : "digit-dropdown-select-wrap"
       } ${props?.className ? props?.className : ""}`}
       style={props?.style || {}}
+      ref={dropdownComponentRef}
     >
       {(hasCustomSelector || props?.profilePic) && (
         <div
diff --git a/react/ui-components/src/atoms/Uploader.js b/react/ui-components/src/atoms/FileUpload.js
similarity index 95%
rename from react/ui-components/src/atoms/Uploader.js
rename to react/ui-components/src/atoms/FileUpload.js
index 7b5baeff363..e6bc285ddd5 100644
--- a/react/ui-components/src/atoms/Uploader.js
+++ b/react/ui-components/src/atoms/FileUpload.js
@@ -5,7 +5,7 @@ import ErrorMessage from "./ErrorMessage";
 import StringManipulator from "./StringManipulator";
 import Chip from "./Chip";
 import { SVG } from "./SVG";
-import UploadPopup from "./UploadPopup";
+import UploadWidget from "./UploadWidget";
 import UploadImage from "./UploadImage";
 import Button from "./Button";
 import { Colors} from "../constants/colors/colorconstants";
@@ -16,7 +16,7 @@ const getRandomId = () => {
   return Math.floor((Math.random() || 1) * 139);
 };
 
-const Uploader = (props) => {
+const FileUpload = (props) => {
   const { t } = useTranslation();
   const inpRef = useRef();
   const user_type = getUserType();
@@ -28,7 +28,7 @@ const Uploader = (props) => {
   const [errors, setErrors] = useState([]);
 
   const handleFileUpload = async (e) => {
-    const files = props.variant === "uploadFile" ? e.target.files : e;
+    const files = props.variant === "uploadField" ? e.target.files : e;
     const newErrors = [];
     if (files.length > 0) {
       const acceptedFiles = [];
@@ -42,7 +42,7 @@ const Uploader = (props) => {
         }
       }
       let newFiles;
-      if (props.variant === "uploadImage" || props.variant === "uploadPopup") {
+      if (props.variant === "uploadImage" || props.variant === "uploadWidget") {
         newFiles = files;
       } else {
         newFiles = props?.multiple ? [...uploadedFiles, ...files] : [files[0]];
@@ -123,7 +123,7 @@ const Uploader = (props) => {
       setUploadedFilesCount(updatedFiles.length);
       setErrors(updatedErrors);
     }
-    props?.removeTargetedFile(fileToRemove);
+    props?.removeTargetedFile && props?.removeTargetedFile(fileToRemove);
   };
 
   const handleFileDownload = (file) => {
@@ -148,23 +148,25 @@ const Uploader = (props) => {
       if (props?.onUpload) {
         const uploadResult = await props?.onUpload(uploadedFiles);
         if (uploadResult && uploadResult.length !== 0) {
-          const newErrors = [];
-          uploadResult.forEach(({ file, error }) => {
-            const fileIndex = errors.findIndex((item) => item.file === file);
-            if (fileIndex !== -1) {
-              errors[fileIndex].error = error;
-            } else {
-              newErrors.push({ file, error });
-            }
+          setErrors((prevErrors) => {
+            const newErrors = [];
+            uploadResult.forEach(({ file, error }) => {
+              const existingErrorIndex = prevErrors.findIndex((item) => item.file === file);
+              if (existingErrorIndex !== -1) {
+                prevErrors[existingErrorIndex].error = error; 
+              } else {
+                newErrors.push({ file, error }); 
+              }
+            });
+            return [...prevErrors, ...newErrors];
           });
-          setErrors([...errors, ...newErrors]);
         }
       }
     };
     if (uploadedFiles.length > 0) {
       uploadFiles();
     }
-  }, [uploadedFiles, errors, props?.onUpload]);
+  }, [uploadedFiles,props?.onUpload]);
 
   useEffect(() => {
     setButtonLabel(
@@ -291,10 +293,10 @@ const Uploader = (props) => {
 
   const renderVariant = () => {
     switch (props.variant) {
-      case "uploadPopup":
+      case "uploadWidget":
         return (
           <Fragment>
-            <UploadPopup
+            <UploadWidget
               onSubmit={handleFileUpload}
               fileData={uploadedFiles}
               fileTypes={props.accept}
@@ -329,7 +331,7 @@ const Uploader = (props) => {
             />
           </Fragment>
         );
-      case "uploadFile":
+      case "uploadField":
       default:
         return (
           <Fragment>
@@ -518,7 +520,7 @@ const Uploader = (props) => {
   );
 };
 
-Uploader.propTypes = {
+FileUpload.propTypes = {
   hintText: PropTypes.string,
   showHint: PropTypes.bool,
   label: PropTypes.string,
@@ -544,8 +546,8 @@ Uploader.propTypes = {
   showReUploadButton: PropTypes.bool,
 };
 
-Uploader.defaultProps = {
+FileUpload.defaultProps = {
   disableButton: false,
 };
 
-export default Uploader;
+export default FileUpload;
diff --git a/react/ui-components/src/atoms/Footer.js b/react/ui-components/src/atoms/Footer.js
index 03769f7e8c2..16b642c55a5 100644
--- a/react/ui-components/src/atoms/Footer.js
+++ b/react/ui-components/src/atoms/Footer.js
@@ -1,22 +1,76 @@
-import React from "react";
+import React,{useState,useEffect} from "react";
+import PropTypes from "prop-types";
+
+const Footer = (props) => {
+
+  const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 480);
+  const onResize = () => {
+    if (window.innerWidth <= 480) {
+      if (!isMobileView) {
+        setIsMobileView(true);
+      }
+    } else {
+      if (isMobileView) {
+        setIsMobileView(false);
+      }
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      onResize();
+    });
+    return () => {
+      window.removeEventListener("resize", () => {
+        onResize();
+      });
+    };
+  });
+
+  const hasActionFields = props?.actionFields?.length > 0;
+  const allowedActionFields = hasActionFields
+    ? props?.actionFields.slice(0, props?.maxActionFieldsAllowed || 5)
+    : [];
+  const sortedActionFields = [...allowedActionFields].sort((a, b) => {
+    const typeOrder = { primary: 3, secondary: 2, tertiary: 1 };
+    const getTypeOrder = (button) =>
+      typeOrder[(button.props.variation || "").toLowerCase()];
+    return getTypeOrder(a) - getTypeOrder(b);
+  });
+  const finalActionFields = props?.sortActionFields
+    ? isMobileView
+      ? sortedActionFields.reverse()
+      : sortedActionFields
+    : allowedActionFields;
+
 
-function Footer(props) {
-  const info = window?.Digit?.UserService?.getUser()?.info || null;
-  const userType = info?.type || null;
-  const additionalClassname = userType === "EMPLOYEE" ? "employee" : "citizen";
 
   return (
-    <div className={`digit-home-footer ${additionalClassname} ${props?.className ? props?.className : ""}`} style={props?.style ? props?.style : {}}>
-      <img
-        className="digit-home-footer-img"
-        alt="Powered by DIGIT"
-        src={window?.globalConfigs?.getConfig?.("DIGIT_FOOTER")}
-        onClick={() => {
-          window.open(window?.globalConfigs?.getConfig?.("DIGIT_HOME_URL"), "_blank").focus();
-        }}
-      />
+    <div className={`digit-action-bar-wrap ${props?.className ? props?.className : ""}`} style={props?.style}>
+      {hasActionFields && (
+        <div
+          className={`digit-action-bar-fields ${
+            props?.setactionFieldsToRight ? "toRight" : ""
+          } ${
+            props?.setactionFieldsToLeft ? "toLeft" : ""
+          }`}
+        >
+          {finalActionFields.map((field, index) => (
+            <div className="action-bar-individual-action-field" key={index}>
+              {field}
+            </div>
+          ))}
+        </div>
+      )}
+      {props?.children}
     </div>
   );
-}
+};
+
+Footer.propTypes = {
+  /** custom class of the svg icon */
+  className: PropTypes.string,
+  /** custom style of the svg icon */
+  style: PropTypes.object,
+};
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/HomeFooter.js b/react/ui-components/src/atoms/HomeFooter.js
new file mode 100644
index 00000000000..d47b00b17bd
--- /dev/null
+++ b/react/ui-components/src/atoms/HomeFooter.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+function HomeFooter(props) {
+  const info = window?.Digit?.UserService?.getUser()?.info || null;
+  const userType = info?.type || null;
+  const additionalClassname = userType === "EMPLOYEE" ? "employee" : "citizen";
+
+  return (
+    <div className={`digit-home-footer ${additionalClassname} ${props?.className ? props?.className : ""}`} style={props?.style ? props?.style : {}}>
+      <img
+        className="digit-home-footer-img"
+        alt="Powered by DIGIT"
+        src={window?.globalConfigs?.getConfig?.("DIGIT_FOOTER")}
+        onClick={() => {
+          window.open(window?.globalConfigs?.getConfig?.("DIGIT_HOME_URL"), "_blank").focus();
+        }}
+      />
+    </div>
+  );
+}
+
+export default HomeFooter;
diff --git a/react/ui-components/src/atoms/LoaderComponent.js b/react/ui-components/src/atoms/LoaderComponent.js
index 6258cbfeb27..448c48c7f56 100644
--- a/react/ui-components/src/atoms/LoaderComponent.js
+++ b/react/ui-components/src/atoms/LoaderComponent.js
@@ -34,9 +34,11 @@ const LoaderComponent = ({
       style={style || {}}
     >
       {renderLoader()}
-      <div className={`digit-loader-text ${className || ""}`}>{`${t(
-        loaderText || "Loading"
-      )}...`}</div>
+      {loaderText && (
+        <div className={`digit-loader-text ${className || ""}`}>
+          {`${t(loaderText)}...`}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/react/ui-components/src/atoms/MobileSidebar.js b/react/ui-components/src/atoms/MobileSideNav.js
similarity index 99%
rename from react/ui-components/src/atoms/MobileSidebar.js
rename to react/ui-components/src/atoms/MobileSideNav.js
index 22bccc89e03..63ccabe7d12 100644
--- a/react/ui-components/src/atoms/MobileSidebar.js
+++ b/react/ui-components/src/atoms/MobileSideNav.js
@@ -9,7 +9,7 @@ import { Colors } from "../constants/colors/colorconstants";
 import { iconRender } from "../utils/iconRender";
 import { Spacers } from "../constants/spacers/spacers";
 
-const MobileSidebar = ({
+const MobileSideNav = ({
   items,
   profileName,
   profileNumber,
@@ -339,7 +339,7 @@ const MobileSidebar = ({
   ) :  null;
 };
 
-MobileSidebar.propTypes = {
+MobileSideNav.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       path: PropTypes.string,
@@ -354,4 +354,4 @@ MobileSidebar.propTypes = {
   reopenOnLogout:PropTypes.bool
 };
 
-export default MobileSidebar;
\ No newline at end of file
+export default MobileSideNav;
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/RadioButtons.js b/react/ui-components/src/atoms/RadioButtons.js
index 59131f044f4..abaf32a465a 100644
--- a/react/ui-components/src/atoms/RadioButtons.js
+++ b/react/ui-components/src/atoms/RadioButtons.js
@@ -21,7 +21,7 @@ const RadioButtons = (props) => {
       {props?.options?.map((option, ind) => {
         if (props?.optionsKey && !props?.isDependent) {
           return (
-            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option?.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`} key={ind}>
+            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option?.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""} ${props?.isLabelFirst ? "label-first" : ""}`} key={ind}>
               <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option?.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`}>
                 <input
                   className="digit-radio-btn"
@@ -46,7 +46,7 @@ const RadioButtons = (props) => {
           );
         } else if (props?.optionsKey && props?.isDependent) {
           return (
-            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option?.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`} key={ind}>
+            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option?.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""} ${props?.isLabelFirst ? "label-first" : ""}`} key={ind}>
               <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option?.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`}>
                 <input
                   className="digit-radio-btn"
@@ -72,7 +72,7 @@ const RadioButtons = (props) => {
           );
         } else {
           return (
-            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`} key={ind}>
+            <div className={`radio-option-container ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""} ${props?.isLabelFirst ? "label-first" : ""}`} key={ind}>
               <span className={`digit-radio-btn-wrap ${props?.disabled ? "disabled" : ""} ${(props?.value === option.code && props?.disabled) ? "preselected" : ""} ${isAnyPreselected ? "has-preselected" : ""}`}>
                 <input
                   className="digit-radio-btn"
diff --git a/react/ui-components/src/atoms/SelectionCard.js b/react/ui-components/src/atoms/SelectionTag.js
similarity index 90%
rename from react/ui-components/src/atoms/SelectionCard.js
rename to react/ui-components/src/atoms/SelectionTag.js
index ca6baceaf8f..45b90e59aab 100644
--- a/react/ui-components/src/atoms/SelectionCard.js
+++ b/react/ui-components/src/atoms/SelectionTag.js
@@ -5,13 +5,14 @@ import { useTranslation } from "react-i18next";
 import { Colors } from "../constants/colors/colorconstants";
 import { iconRender } from "../utils/iconRender";
 
-const SelectionCard = ({
+const SelectionTag = ({
   width,
   errorMessage,
   options,
   onSelectionChanged,
   allowMultipleSelection = true,
-  selected
+  selected,
+  withContainer
 }) => {
   const { t } = useTranslation();
   const [selectedOptions, setSelectedOptions] = useState(selected || []);
@@ -70,13 +71,13 @@ const SelectionCard = ({
         onClick={() => handleOptionClick(option)}
       >
         {option.prefixIcon && (
-          <span className="selectioncardicon">
+          <span className="selectiontagicon">
             {IconRender(option?.prefixIcon, isSelected)}
           </span>
         )}
-        <span className="selectioncard-option-label">{option.name}</span>
+        <span className="selectiontag-option-label">{option.name}</span>
         {option.suffixIcon && (
-          <span className="selectioncardicon">
+          <span className="selectiontagicon">
             {IconRender(option?.suffixIcon, isSelected)}
           </span>
         )}
@@ -86,7 +87,7 @@ const SelectionCard = ({
 
   return (
     <div className="selection-card-container">
-      <div className={`selection-card ${errorMessage ? "error" : ""}`}>
+      <div className={`selection-card ${errorMessage ? "error" : ""} ${!withContainer ? "hideContainer" : ""}`}>
         {options?.map(renderOption)}
       </div>
       {errorMessage && (
@@ -101,7 +102,7 @@ const SelectionCard = ({
   );
 };
 
-SelectionCard.propTypes = {
+SelectionTag.propTypes = {
   width: PropTypes.number,
   errorMessage: PropTypes.string,
   options: PropTypes.arrayOf(
@@ -116,4 +117,4 @@ SelectionCard.propTypes = {
   allowMultipleSelection: PropTypes.bool,
 };
 
-export default SelectionCard;
+export default SelectionTag;
diff --git a/react/ui-components/src/atoms/Sidebar.js b/react/ui-components/src/atoms/SideNav.js
similarity index 99%
rename from react/ui-components/src/atoms/Sidebar.js
rename to react/ui-components/src/atoms/SideNav.js
index 08548d60955..8f4243693ac 100644
--- a/react/ui-components/src/atoms/Sidebar.js
+++ b/react/ui-components/src/atoms/SideNav.js
@@ -7,7 +7,7 @@ import { Colors } from "../constants/colors/colorconstants";
 import { iconRender } from "../utils/iconRender";
 import { Spacers } from "../constants/spacers/spacers";
 
-const Sidebar = ({
+const SideNav = ({
   items,
   theme,
   variant,
@@ -303,7 +303,7 @@ const Sidebar = ({
   );
 };
 
-Sidebar.propTypes = {
+SideNav.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       path: PropTypes.string,
@@ -321,11 +321,11 @@ Sidebar.propTypes = {
   hideAccessbilityTools: PropTypes.bool,
 };
 
-Sidebar.defaultProps = {
+SideNav.defaultProps = {
   theme: "dark",
   variant: "primary",
   transitionDuration: 0.3,
   styles: {},
 };
 
-export default Sidebar;
+export default SideNav;
diff --git a/react/ui-components/src/atoms/SlideOverMenu.js b/react/ui-components/src/atoms/SidePanel.js
similarity index 98%
rename from react/ui-components/src/atoms/SlideOverMenu.js
rename to react/ui-components/src/atoms/SidePanel.js
index 0df6dec917e..92c9bb49b59 100644
--- a/react/ui-components/src/atoms/SlideOverMenu.js
+++ b/react/ui-components/src/atoms/SidePanel.js
@@ -4,7 +4,7 @@ import { SVG } from "./SVG";
 import { Colors } from "../constants/colors/colorconstants";
 import { Spacers } from "../constants/spacers/spacers";
 
-const SlideOverMenu = ({
+const SidePanel = ({
   className = "",
   styles = {},
   type = "static",
@@ -196,7 +196,7 @@ const SlideOverMenu = ({
   );
 };
 
-SlideOverMenu.propTypes = {
+SidePanel.propTypes = {
   className: PropTypes.string,
   styles: PropTypes.object,
   type: PropTypes.oneOf(["static", "dynamic"]),
@@ -220,4 +220,4 @@ SlideOverMenu.propTypes = {
   defaultClosedWidth: PropTypes.number,
 };
 
-export default SlideOverMenu;
+export default SidePanel;
diff --git a/react/ui-components/src/atoms/Switch.js b/react/ui-components/src/atoms/Switch.js
index e71a2ebfbad..572bcf1d160 100644
--- a/react/ui-components/src/atoms/Switch.js
+++ b/react/ui-components/src/atoms/Switch.js
@@ -10,6 +10,7 @@ const Switch = ({
   className,
   style,
   disable = false,
+  switchStyle
 }) => {
   const [isChecked, setIsChecked] = useState(isCheckedInitially);
 
@@ -25,7 +26,7 @@ const Switch = ({
       className={`digit-switch-container ${className || ""} ${
         disable ? "switch-disabled" : ""
       }`}
-      style={style}
+      style={style || {}}
     >
       {isLabelFirst && (
         <span className={`digit-switch-label ${"labelFirst"}`}>{label}</span>
@@ -36,6 +37,7 @@ const Switch = ({
         } ${disable ? "switch-disabled" : ""}`}
         onClick={handleToggle}
         tabIndex={0}
+        style={switchStyle || {}}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
             handleToggle();
@@ -67,5 +69,6 @@ Switch.propTypes = {
   onToggle: PropTypes.func,
   className: PropTypes.string,
   style: PropTypes.object,
+  switchStyle: PropTypes.object,
   disable: PropTypes.bool,
 };
diff --git a/react/ui-components/src/atoms/Tab.js b/react/ui-components/src/atoms/Tab.js
index 5593c941629..57c4e5754c8 100644
--- a/react/ui-components/src/atoms/Tab.js
+++ b/react/ui-components/src/atoms/Tab.js
@@ -65,7 +65,7 @@ const Tab = ({
                 style={
                   maxWidth
                     ? {
-                        width: `${maxWidth}px`,
+                        minWidth: `${maxWidth}px`,
                         ...itemStyle,
                       }
                     : { ...itemStyle }
diff --git a/react/ui-components/src/atoms/Table.js b/react/ui-components/src/atoms/Table.js
index 43c3942f94b..695c70496f2 100644
--- a/react/ui-components/src/atoms/Table.js
+++ b/react/ui-components/src/atoms/Table.js
@@ -2,7 +2,7 @@ import { useGlobalFilter, usePagination, useRowSelect, useSortBy, useTable } fro
 import React, { useEffect, useState, useRef, forwardRef } from "react";
 import { CustomSVG } from "./CustomSVG";
 import CheckBox from "./CheckBox";
-import ActionBar from "./ActionBar";
+import Footer from "./Footer";
 import Toast from "./Toast";
 import Button from "./Button";
 
@@ -255,7 +255,7 @@ const Table = ({
         </div>
       )}
       {Object.keys(selectedRowIds)?.length > 0 && (
-        <ActionBar className="actionBarWrapper">
+        <Footer className="actionBarWrapper">
           <span style={{ display: "flex" }}>
             <CustomSVG.DoubleTickIcon style={{ marginRight: "8px" }} />
             <p className="search-instruction-header" style={{ marginBottom: 0 }}>{`${Object.keys(selectedRowIds)?.length} ${t(
@@ -263,7 +263,7 @@ const Table = ({
             )}`}</p>
           </span>
           <Button label={t(actionLabel)} onClick={handleSelection} />
-        </ActionBar>
+        </Footer>
       )}
       {toast?.show && <Toast label={toast?.label} type={toast?.error ? "error" : ""} isDleteBtn={true} onClose={handleToastClose}></Toast>}
     </React.Fragment>
diff --git a/react/ui-components/src/atoms/UploadImage.js b/react/ui-components/src/atoms/UploadImage.js
index 5f353ad7475..b34e0accb65 100644
--- a/react/ui-components/src/atoms/UploadImage.js
+++ b/react/ui-components/src/atoms/UploadImage.js
@@ -292,7 +292,8 @@ const UploadImage = ({
               <div className="upload-options" style={{ display: "flex" }}>
                 <label
                   onClick={() => toggleWebcam()}
-                  style={{ cursor: "pointer" }}
+                  // style={{ cursor: "pointer" }}
+                  className="upload-options-svg-wrap"
                 >
                   <SVG.CameraEnhance
                     fill="#C84C0E"
diff --git a/react/ui-components/src/atoms/UploadPopup.js b/react/ui-components/src/atoms/UploadWidget.js
similarity index 89%
rename from react/ui-components/src/atoms/UploadPopup.js
rename to react/ui-components/src/atoms/UploadWidget.js
index 9e4261e1721..badc53d24d0 100644
--- a/react/ui-components/src/atoms/UploadPopup.js
+++ b/react/ui-components/src/atoms/UploadWidget.js
@@ -5,10 +5,10 @@ import Button from "./Button";
 import { SVG } from "./SVG";
 import { CustomSVG } from "./CustomSVG";
 import ErrorMessage from "./ErrorMessage";
-import InfoCard from "./InfoCard";
+import AlertCard from "./AlertCard";
 import { Colors} from "../constants/colors/colorconstants";
 
-const UploadPopup = ({
+const UploadWidget = ({
   onSubmit,
   fileData,
   onFileDelete,
@@ -56,7 +56,7 @@ const UploadPopup = ({
 
   const dragDropJSX = (
     <div
-      className={`digit-uploader-content-uploadpopup ${iserror ? "error" : ""}`}
+      className={`digit-uploader-content-uploadWidget ${iserror ? "error" : ""}`}
     >
       {
         <SVG.FileUpload
@@ -66,8 +66,8 @@ const UploadPopup = ({
         ></SVG.FileUpload>
       }
       <p className="drag-drop-text" style={{ margin: "0px", display: "flex" }}>
-        {"Drag and drop your file or"}
-        <Button label={"Browse in my files"} variation={"link"} />
+        {t("Drag and drop your file or ")}
+        <div className="drag-drop-link">{t("Browse in my files")}</div>
       </p>
     </div>
   );
@@ -121,25 +121,25 @@ const UploadPopup = ({
   const renderFileIcon = (fileType, fileErrors) => {
     switch (fileType) {
       case "application/pdf":
-        return <CustomSVG.PdfFile className="icon" />;
+        return <CustomSVG.PdfFile className="uploadWidget-icon" />;
       case "image/png":
-        return <CustomSVG.PngFile className="icon" />;
+        return <CustomSVG.PngFile className="uploadWidget-icon" />;
       case "image/jpeg":
       case "image/pjpeg":
-        return <CustomSVG.JpgFile className="icon" />;
+        return <CustomSVG.JpgFile className="uploadWidget-icon" />;
       case "application/vnd.ms-excel":
       case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
       case "application/excel":
       case "application/x-excel":
       case "application/x-msexcel":
-        return <CustomSVG.XlsxFile className="icon" />;
+        return <CustomSVG.XlsxFile className="uploadWidget-icon" />;
       case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
       case "application/msword":
-        return <CustomSVG.DocFile className="icon" />;
+        return <CustomSVG.DocFile className="uploadWidget-icon" />;
       default:
         return (
           <SVG.File
-            className="icon"
+            className="uploadWidget-icon"
             fill={fileErrors ? errorColor : inputBorderColor}
           />
         );
@@ -183,10 +183,10 @@ const UploadPopup = ({
             </div>
           </div>
           {fileErrors && showErrorCard && (
-            <InfoCard
+            <AlertCard
               variant={"error"}
               text={fileErrors?.error}
-              className={"uploadpopup-error-card"}
+              className={"uploadWidget-error-card"}
             />
           )}
           <div
@@ -220,7 +220,7 @@ const UploadPopup = ({
             ))}
           </div>
           <span
-            className="digit-uploadpopup-close-icon"
+            className="digit-uploadWidget-close-icon"
             style={{ display: "flex" }}
             onClick={() => handleFileDelete(file)}
           >
@@ -253,4 +253,4 @@ const UploadPopup = ({
   );
 };
 
-export default UploadPopup;
+export default UploadWidget;
diff --git a/react/ui-components/src/atoms/foundationstories/Iconography.stories.js b/react/ui-components/src/atoms/foundationstories/Iconography.stories.js
new file mode 100644
index 00000000000..0676b759ebc
--- /dev/null
+++ b/react/ui-components/src/atoms/foundationstories/Iconography.stories.js
@@ -0,0 +1,57 @@
+import React from "react";
+import * as components from "@egovernments/digit-ui-svg-components";
+import { CustomSVG } from "../CustomSVG";
+
+export default {
+  title: "Foundations/Iconography",
+};
+
+const gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  gap: "16px",
+  padding: "16px",
+};
+
+const cardStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "1px solid #D6D5D4",
+  borderRadius: "8px",
+  padding: "16px",
+  gap: "8px",
+};
+
+const renderIcon = (IconComponent, name) => {
+  if (IconComponent) {
+    return (
+      <div key={name} style={cardStyle}>
+        <IconComponent fill="#0B4B66" width="50" height="50" />
+        <span className="typography body-l" style={{ color: "#0B4B66" }}>{name}</span>
+      </div>
+    );
+  } else {
+    return (
+      <div key={name} style={cardStyle}>
+        <span style={{ color: "red", fontSize: "14px" }}>Invalid Icon</span>
+      </div>
+    );
+  }
+};
+
+export const Iconography = () => {
+  const customSvgIcons = Object.entries(CustomSVG);
+  const svgIcons = Object.entries(components);
+
+  const allIcons = [...svgIcons, ...customSvgIcons].sort(([a], [b]) =>
+    a.localeCompare(b)
+  );
+
+  return (
+    <div style={gridStyle}>
+      {allIcons.map(([name, IconComponent]) => renderIcon(IconComponent, name))}
+    </div>
+  );
+};
diff --git a/react/ui-components/src/atoms/index.js b/react/ui-components/src/atoms/index.js
index 8131d618533..62e2e16fc54 100644
--- a/react/ui-components/src/atoms/index.js
+++ b/react/ui-components/src/atoms/index.js
@@ -1,6 +1,6 @@
 import { Accordion } from "./Accordion";
-import {AccordionWrapper} from "./Accordion";
-import ActionBar from "./ActionBar";
+import {AccordionList} from "./Accordion";
+import HomeFooter from "./HomeFooter";
 import ActionLinks from "./ActionLinks";
 import Amount from "./Amount";
 import AppContainer from "./AppContainer";
@@ -31,7 +31,7 @@ import Header from "./Header";
 import HeaderBar from "./HeaderBar";
 import HorizontalNav from "./HorizontalNav";
 import Tab from "./Tab";
-import InfoCard from "./InfoCard";
+import AlertCard from "./AlertCard";
 import InputTextAmount from "./InputTextAmount";
 import KeyNote from "./KeyNote";
 import LabelFieldPair from "./LabelFieldPair";
@@ -71,8 +71,8 @@ import Stepper from "./Stepper";
 import Timeline from "./Timeline";
 import StringManipulator from "./StringManipulator";
 import InfoButton from "./InfoButton";
-import Uploader  from "./Uploader";
-import UploadPopup from "./UploadPopup";
+import FileUpload  from "./FileUpload";
+import UploadWidget from "./UploadWidget";
 import UploadImage from "./UploadImage";
 import ErrorBoundary from "./ErrorBoundary";
 import TextBlock from "./TextBlock";
@@ -84,9 +84,9 @@ import Divider from "./Divider";
 import TopBar from "./TopBar";
 import Hamburger from "./Hamburger";
 import Menu from "./Menu";
-import Sidebar from "./Sidebar";
-import MobileSidebar from "./MobileSidebar";
-import SelectionCard from "./SelectionCard";
+import SideNav from "./SideNav";
+import MobileSideNav from "./MobileSideNav";
+import SelectionTag from "./SelectionTag";
 import Tag from "./Tag";
 import Tooltip from "./Tooltip";
 import Switch from "./Switch";
@@ -97,7 +97,7 @@ import TableCell from "./TableCell";
 import TableFooter from "./TableFooter";
 import TableHeader from "./TableHeader";
 import TableRow from "./TableRow";
-import SlideOverMenu from "./SlideOverMenu";
+import SidePanel from "./SidePanel";
 import NestedTable from "./NestedTable";
 import LoaderComponent from "./LoaderComponent";
 import Iframe from "./Iframe";
@@ -105,17 +105,17 @@ import Iframe from "./Iframe";
 export {
   ErrorBoundary,
   PageBasedInput,
-  ActionBar,
+  Footer,
   ActionLinks,
   Amount,
   AppContainer,
   BackLink,
-  Sidebar,
-  MobileSidebar,
+  SideNav,
+  MobileSideNav,
   Switch,
   Accordion,
   Iframe,
-  AccordionWrapper,
+  AccordionList,
   Tooltip,
   Banner,
   BodyContainer,
@@ -138,13 +138,13 @@ export {
   DisplayPhotos,
   Dropdown,
   ErrorMessage,
-  Footer,
+  HomeFooter,
   Header,
   HeaderBar,
   HorizontalNav,
   LoaderComponent,
   Tab,
-  InfoCard,
+  AlertCard,
   InputTextAmount,
   KeyNote,
   LabelFieldPair,
@@ -154,11 +154,11 @@ export {
   MultiSelectDropdown,
   NoResultsFound,
   OTPInput,
-  SlideOverMenu,
+  SidePanel,
   Paragraph,
   PlusMinusInput,
   PopUp,
-  SelectionCard,
+  SelectionTag,
   Tag,
   PrivateRoute,
   RadioButtons,
@@ -187,8 +187,8 @@ export {
   ButtonGroup,
   StringManipulator,
   InfoButton,
-  Uploader,
-  UploadPopup,
+  FileUpload,
+  UploadWidget,
   UploadImage,
   TextBlock,
   Panels,
diff --git a/react/ui-components/src/atoms/stories/Accordion.stories.js b/react/ui-components/src/atoms/stories/Accordion.stories.js
index edaa5f7bcd2..1f5331c96e7 100644
--- a/react/ui-components/src/atoms/stories/Accordion.stories.js
+++ b/react/ui-components/src/atoms/stories/Accordion.stories.js
@@ -9,15 +9,19 @@ export default {
     title: { control: "text" },
     children: { control: "text" },
     isOpenInitially: { control: "boolean" },
-    customClassName: { control: "text" },
-    customStyles: { control: "object" },
-    onToggle: { action: "onToggle" },
+    customClassName: { control: "text" ,table: { disable: true } },
+    customStyles: { control: "object" ,table: { disable: true } },
+    onToggle: { action: "onToggle",table: { disable: true }  },
     icon: { control: "text" },
     number: { control: "number" },
     hideCardBorder: { control: "boolean" },
     hideDivider: { control: "boolean" },
     hideCardBg: { control: "boolean" },
     hideBorderRadius: { control: "boolean" },
+    iconFill: { table: { disable: true } },
+    isClosed: { table: { disable: true } },
+    iconWidth: { table: { disable: true } },
+    iconHeight: { table: { disable: true } },
   },
 };
 
@@ -35,100 +39,41 @@ Documentation.storyName = "Docs";
 
 export const Basic = Template.bind({});
 Basic.args = {
-  title:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
-  children:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+  title: "Section Header",
+  children: `Dummy text refers to the bits of content that are used to fill a website. This text helps web designers better envision how the website will look as a finished product. It is important to understand that dummy text has no meaning whatsoever. Its sole purpose is to fill out blank spaces with “word-like” content, without making any copyright infringements. 
+  Dummy text refers to the bits of content that are used to fill a website. This text helps web designers better envision how the website will look as a finished product. It is important to understand that dummy text has no meaning whatsoever. Its sole purpose is to fill out blank spaces with “word-like” content, without making any copyright infringements.`,
   isOpenInitially: false,
   hideCardBorder: true,
   hideDivider: true,
-  hideCardBg: false,
-  hideBorderRadius: true,
-};
-
-export const WithStroke = Template.bind({});
-WithStroke.args = {
-  title:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
-  children:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
-  isOpenInitially: false,
-  hideCardBorder: false,
-  hideDivider: true,
-  hideCardBg: false,
-  hideBorderRadius: false,
-};
-
-export const WithDivider = Template.bind({});
-WithDivider.args = {
-  title:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
-  children:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
-  isOpenInitially: false,
-  hideCardBorder: true,
-  hideDivider: false,
   hideCardBg: true,
   hideBorderRadius: true,
+  icon:"",
+  number:""
 };
 
-export const WithStrokeAndDivider = Template.bind({});
-WithStrokeAndDivider.args = {
-  title:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
-  children:
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
-  isOpenInitially: false,
-  hideCardBorder: false,
-  hideDivider: false,
-  hideCardBg: false,
-  hideBorderRadius: false,
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  title: "Accordion with Icon",
-  children: "This accordion has an icon.",
-  icon: "AccountCircle",
-  isOpenInitially: false,
-  hideCardBorder: false,
-  hideDivider: false,
-  hideCardBg: false,
-  hideBorderRadius: false,
-};
-
-export const WithNumber = Template.bind({});
-WithNumber.args = {
-  title: "Accordion with Number",
-  children: "This accordion has a number.",
-  number: 1,
+export const Nested = Template.bind({});
+Nested.args = {
   isOpenInitially: false,
   hideCardBorder: false,
   hideDivider: false,
   hideCardBg: false,
   hideBorderRadius: false,
-};
-
-export const NestedAccordion = Template.bind({});
-NestedAccordion.args = {
-  isOpenInitially: false,
-  hideCardBorder: false,
-  hideDivider: false,
-  hideCardBg: false,
-  hideBorderRadius: false,
-  title: "Main Accordion",
+  title: "Section Header",
   children: (
     <Accordion title="Nested Accordion" isChild={true}>
       This is a nested accordion demonstrating component composition. The
       isChild prop ensures proper styling and behavior.
     </Accordion>
   ),
+  icon:"",
+  number:""
 };
 
 export const Custom = Template.bind({});
 Custom.args = {
-  title: "Custom Styled Accordion",
-  children: "This accordion has custom styles.",
+  title: "Section Header",
+  children: `Dummy text refers to the bits of content that are used to fill a website. This text helps web designers better envision how the website will look as a finished product. It is important to understand that dummy text has no meaning whatsoever. Its sole purpose is to fill out blank spaces with “word-like” content, without making any copyright infringements. 
+  Dummy text refers to the bits of content that are used to fill a website. This text helps web designers better envision how the website will look as a finished product. It is important to understand that dummy text has no meaning whatsoever. Its sole purpose is to fill out blank spaces with “word-like” content, without making any copyright infringements.`,
   customClassName: "custom-accordion",
   customStyles: {
     borderColor: "#C84C0E",
@@ -138,4 +83,7 @@ Custom.args = {
   hideDivider: false,
   hideCardBg: false,
   hideBorderRadius: false,
+  icon:"",
+  number:"",
+  isOpenInitially: false,
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/AlertCard.stories.js b/react/ui-components/src/atoms/stories/AlertCard.stories.js
new file mode 100644
index 00000000000..513f8bedcf9
--- /dev/null
+++ b/react/ui-components/src/atoms/stories/AlertCard.stories.js
@@ -0,0 +1,170 @@
+import React from "react";
+import AlertCard from "../AlertCard";
+import TextArea from "../TextArea";
+import InfoButton from "../InfoButton";
+import Iframe from "../Iframe";
+
+export default {
+  title: "Atoms/AlertCard",
+  component: AlertCard,
+  argTypes: {
+    label: {
+      control: "text",
+      table: { disable: true },
+    },
+    variant: {
+      control: "select",
+      options: ["default", "success", "warning", "error"],
+      table: { disable: true },
+    },
+    text: { control: "text", table: { disable: true } },
+    style: {
+      control: "object",
+      table: { disable: true },
+    },
+    textStyle: {
+      control: "object",
+      table: { disable: true },
+    },
+    additionalElements: {
+      control: "boolean",
+      table: { disable: true },
+    },
+    inline: {
+      control: "select",
+      options: ["Default", "Inline"],
+      name: "WidgetsAlignment",
+      mapping: {
+        Default: false,
+        Inline: true,
+      },
+    },
+    WithAction: {
+      control: "boolean",
+    },
+  },
+};
+
+const additionalElements = [
+  <p key="1">Additional Element 1</p>,
+  <img
+    key="2"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 2"
+  />,
+  <img
+    key="3"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 3"
+  />,
+  <img
+    key="4"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 4"
+  />,
+  <img
+    key="5"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 5"
+  />,
+  <img
+    key="6"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 6"
+  />,
+  <img
+    key="7"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 7"
+  />,
+  <img
+    key="8"
+    src="https://digit.org/wp-content/uploads/2023/06/Digit-Logo-1.png"
+    alt="Additional Element 8"
+  />,
+  <TextArea
+    type="textarea"
+    disabled={false}
+    populators={{ resizeSmart: true }}
+  ></TextArea>,
+];
+
+const additionalElementsWithAction = [
+  ...additionalElements,
+  <InfoButton size="large" isDisabled={false} label={"Button"}></InfoButton>,
+];
+
+const actionWidget = [
+  <InfoButton size="large" isDisabled={false} label={"Button"}></InfoButton>,
+];
+
+const Template = ({ WithWidgets, WithAction, ...args }) => (
+  <AlertCard
+    {...args}
+    additionalElements={
+      WithWidgets && WithAction
+        ? additionalElementsWithAction
+        : !WithAction && WithWidgets
+        ? additionalElements
+        : WithAction && !WithWidgets
+        ? actionWidget
+        : []
+    }
+  />
+);
+
+const commonArgs = {
+  label: "Info",
+  text:
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+  variant: "default",
+  WithWidgets: false,
+  inline: "Default",
+  WithAction:false
+};
+
+export const Documentation = () => (
+  <Iframe
+    //Todo:Update the url
+    src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
+    title="AlertCard Documentation"
+  />
+);
+
+Documentation.storyName = "Docs";
+
+export const Info = Template.bind({});
+Info.args = {
+  ...commonArgs,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  ...commonArgs,
+  variant: "success",
+  label: "Success",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  ...commonArgs,
+  label: "Warning",
+  variant: "warning",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  ...commonArgs,
+  label: "Error",
+  variant: "error",
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+  ...commonArgs,
+  label: "Custom",
+  style:{
+    border:"3px solid black",
+    backgroundColor:"#ffffff"
+  }
+};
diff --git a/react/ui-components/src/atoms/stories/BackLink.stories.js b/react/ui-components/src/atoms/stories/BackLink.stories.js
index f17174a053e..bb2b43cea02 100644
--- a/react/ui-components/src/atoms/stories/BackLink.stories.js
+++ b/react/ui-components/src/atoms/stories/BackLink.stories.js
@@ -6,33 +6,22 @@ export default {
   title: "Atoms/BackLink",
   component: BackLink,
   argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "teritiary"],
-    },
-    className: {
-      control: "text",
-    },
-    style: {
-      control: { type: "object" },
-    },
-    onClick: {
-      control: "function",
-    },
+    variant: { table: { disable: true } },
+    className: { table: { disable: true } },
+    style: { table: { disable: true } },
+    label: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+    hideIcon: { table: { disable: true } },
+    hideLabel: { table: { disable: true } },
+    iconFill: { table: { disable: true } },
     disabled: {
-      control: "boolean",
-    },
-    hideLabel: {
-      control: "boolean",
-    },
-    hideIcon: {
-      control: "boolean",
-    },
-    iconFill: {
-      control: "text",
-    },
-    label: {
-      control: "text",
+      control: "select",
+      options: ["Default", "Disabled"],
+      name:"state",
+      mapping: {
+        Default: false, 
+        Disabled: true, 
+      },
     },
   },
 };
@@ -40,10 +29,9 @@ export default {
 const Template = (args) => <BackLink {...args} />;
 
 const commonArgs = {
-  className: "",
   style: {},
   onClick: () => console.log("clicked"),
-  disabled: false,
+  disabled: "Default",
   variant: "",
   hideIcon: false,
   hideLabel: false,
@@ -77,11 +65,4 @@ export const Backlink3 = Template.bind({});
 Backlink3.args = {
   ...commonArgs,
   variant: "teritiary",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  variant: "primary",
-  disabled: true,
-};
+};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/BreadCrumb.stories.js b/react/ui-components/src/atoms/stories/BreadCrumb.stories.js
index 77fe2fd500b..8b593833715 100644
--- a/react/ui-components/src/atoms/stories/BreadCrumb.stories.js
+++ b/react/ui-components/src/atoms/stories/BreadCrumb.stories.js
@@ -8,42 +8,110 @@ export default {
   title: "Atoms/BreadCrumb",
   component: BreadCrumb,
   argTypes: {
-    className: {
-      control: "text",
-    },
-    style: {
-      control: { type: "object" },
-    },
-    crumbs: {
-      control: { type: "object" },
-    },
-    spanStyle: {
-      control: { type: "object" },
-    },
-    maxItems: {
-      control: { type: "number" },
-    },
-    itemsAfterCollapse: {
-      control: { type: "number" },
-    },
-    itemsBeforeCollapse: {
-      control: { type: "number" },
-    },
-    expandText: {
-      control: { type: "text" },
+    className: { table: { disable: true } },
+    style: { table: { disable: true } },
+    crumbs: { table: { disable: true } },
+    spanStyle: { table: { disable: true } },
+    maxItems: { table: { disable: true } },
+    itemsAfterCollapse: { table: { disable: true } },
+    itemsBeforeCollapse: { table: { disable: true } },
+    expandText: { table: { disable: true } },
+    customSeparator: { table: { disable: true } },
+    WithIcons: {
+      control: "boolean",
+    },
+    WithCustomSeparator: {
+      control: "boolean",
     },
   },
 };
 
-const Template = (args) => (
-  <Router>
-    <BreadCrumb {...args} />
-  </Router>
-);
+// Updated crumbs with icons
+const iconCrumbs = [
+  {
+    content: "Home",
+    show: true,
+    internalLink: "/home",
+    icon: <SVG.Home fill={"#C84C0E"} />,
+  },
+  {
+    content: "Previous1",
+    show: true,
+    internalLink: "/previous1",
+    icon: <SVG.Person fill={"#C84C0E"} />,
+  },
+  {
+    content: "Previous2",
+    show: true,
+    internalLink: "/previous2",
+    icon: <SVG.Edit fill={"#C84C0E"} />,
+  },
+  {
+    content: "Previous3",
+    show: true,
+    internalLink: "/previous3",
+    icon: <SVG.Person fill={"#C84C0E"} />,
+  },
+  {
+    content: "Current",
+    show: true,
+    internalLink: "/current",
+    icon: <SVG.Edit fill={"#787878"} />,
+  },
+];
+const crumbs = [
+  {
+    content: "Home",
+    show: true,
+    internalLink: "/home",
+  },
+  {
+    content: "Previous1",
+    show: true,
+    internalLink: "/previous1",
+  },
+  {
+    content: "Previous2",
+    show: true,
+    internalLink: "/previous2",
+  },
+  {
+    content: "Previous3",
+    show: true,
+    internalLink: "/previous3",
+  },
+  {
+    content: "Current",
+    show: true,
+    internalLink: "/current",
+  },
+];
+
+
+const commonArgs = {
+  WithCustomSeparator: false,
+  WithIcons:false
+};
+
+const Template = (args) => {
+  const { WithIcons, WithCustomSeparator, ...rest } = args;
+  const customSeparator = WithCustomSeparator ? (
+    <SVG.ArrowForward fill={"#C84C0E"} />
+  ) : undefined;
+  const finalCrumbs = WithIcons ? iconCrumbs : crumbs || [];
+  return (
+    <Router>
+      <BreadCrumb
+        {...rest}
+        crumbs={finalCrumbs}
+        customSeparator={customSeparator}
+      />
+    </Router>
+  );
+};
 
 export const Documentation = () => (
   <Iframe
-    //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
     title="Breadcrumb Documentation"
   />
@@ -53,166 +121,22 @@ Documentation.storyName = "Docs";
 
 export const Basic = Template.bind({});
 Basic.args = {
-  crumbs: [
-    {
-      content: "Home",
-      show: true,
-      internalLink: "/home",
-    },
-    {
-      content: "Previous",
-      show: true,
-      internalLink: "/previous",
-    },
-    {
-      content: "Current",
-      show: true,
-      internalLink: "/current",
-    },
-  ],
+  ...commonArgs
 };
 
 export const Collapsed = Template.bind({});
 Collapsed.args = {
-  crumbs: [
-    {
-      content: "Home",
-      show: true,
-      internalLink: "/home",
-    },
-    {
-      content: "Previous1",
-      show: true,
-      internalLink: "/previous1",
-    },
-    {
-      content: "Previous2",
-      show: true,
-      internalLink: "/previous2",
-    },
-    {
-      content: "Previous3",
-      show: true,
-      internalLink: "/previous3",
-    },
-    {
-      content: "Current",
-      show: true,
-      internalLink: "/current",
-    },
-  ],
+  ...commonArgs,
   maxItems: 3,
 };
 
-export const CollapsedWithCustomValues = Template.bind({});
-CollapsedWithCustomValues.args = {
-  crumbs: [
-    {
-      content: "Home",
-      show: true,
-      internalLink: "/home",
-    },
-    {
-      content: "Previous1",
-      show: true,
-      internalLink: "/previous1",
-    },
-    {
-      content: "Previous2",
-      show: true,
-      internalLink: "/previous2",
-    },
-    {
-      content: "Previous3",
-      show: true,
-      internalLink: "/previous3",
-    },
-    {
-      content: "Current",
-      show: true,
-      internalLink: "/current",
-    },
-  ],
+export const Custom = Template.bind({});
+Custom.args = {
+  ...commonArgs,
   maxItems: 3,
   itemsBeforeCollapse: 1,
   itemsAfterCollapse: 2,
-};
-
-export const CollapsedWithExpandText = Template.bind({});
-CollapsedWithExpandText.args = {
-  crumbs: [
-    {
-      content: "Home",
-      show: true,
-      internalLink: "/home",
-    },
-    {
-      content: "Previous1",
-      show: true,
-      internalLink: "/previous1",
-    },
-    {
-      content: "Previous2",
-      show: true,
-      internalLink: "/previous2",
-    },
-    {
-      content: "Previous3",
-      show: true,
-      internalLink: "/previous3",
-    },
-    {
-      content: "Current",
-      show: true,
-      internalLink: "/current",
-    },
-  ],
-  maxItems: 3,
-  expandText: "{click here to expand}",
-};
-
-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  crumbs: [
-    {
-      internalLink: "/home",
-      content: "Home",
-      show: true,
-      icon: <SVG.Home fill={"#C84C0E"} />,
-    },
-    {
-      internalLink: "/previous",
-      content: "Previous",
-      show: true,
-      icon: <SVG.Person fill={"#C84C0E"} />,
-    },
-    {
-      internalLink: "/current",
-      content: "Current",
-      show: true,
-      icon: <SVG.Edit fill={"#787878"} />,
-    },
-  ],
-};
-
-export const WithCustomSeparators = Template.bind({});
-WithCustomSeparators.args = {
-  crumbs: [
-    {
-      content: "Home",
-      show: true,
-      internalLink: "/home",
-    },
-    {
-      content: "Previous",
-      show: true,
-      internalLink: "/previous",
-    },
-    {
-      content: "Current",
-      show: true,
-      internalLink: "/current",
-    },
-  ],
-  customSeparator: <SVG.ArrowForward fill={"#C84C0E"} />,
+  spanStyle: {
+    color: "#0B4B66",
+  },
 };
diff --git a/react/ui-components/src/atoms/stories/Checkbox.stories.js b/react/ui-components/src/atoms/stories/Checkbox.stories.js
new file mode 100644
index 00000000000..eacc532bef1
--- /dev/null
+++ b/react/ui-components/src/atoms/stories/Checkbox.stories.js
@@ -0,0 +1,100 @@
+import React from "react";
+import CheckBox from "../CheckBox";
+import Iframe from "../Iframe";
+
+export default {
+  title: "Atoms/CheckBox",
+  component: CheckBox,
+  argTypes: {
+    onChange: { action: "onChange", table: { disable: true } },
+    value: { control: "text", table: { disable: true } },
+    checked: { control: "boolean", table: { disable: true } },
+    isIntermediate: { control: "boolean", table: { disable: true } },
+    styles: { control: "object", table: { disable: true } },
+    style: { control: "object", table: { disable: true } },
+    ref: { table: { disable: true } },
+    userType: { table: { disable: true } },
+    hideLabel: { table: { disable: true } },
+    disabled: {
+      control: "select",
+      options: ["Default","Disabled"],
+      name:"state",
+      mapping: {
+        Default: false, 
+        Disabled: true, 
+      },
+    },
+    isLabelFirst: { control: "boolean" },
+    label: { control: "text"},
+  },
+};
+
+const commonStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  color: "#363636",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+  const [isChecked, setIsChecked] = React.useState(args?.checked);
+
+  const handleCheckboxChange = (event) => {
+    setIsChecked(event.target.checked);
+  };
+
+  return (
+    <div style={commonStyles}>
+      <CheckBox
+        {...args}
+        checked={isChecked}
+        onChange={handleCheckboxChange}
+      ></CheckBox>
+    </div>
+  );
+};
+
+const commonArgs = {
+  onChange: () => {},
+  value: "",
+  checked: true,
+  isLabelFirst: false,
+  label: "Label",
+  isIntermediate: false,
+  styles: {},
+  style: {},
+  disabled: "Default",
+};
+
+export const Documentation = () => (
+  <Iframe
+    //Todo:Update the url
+    src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
+    title="Checkbox Documentation"
+  />
+);
+
+Documentation.storyName = "Docs";
+
+export const UnChecked = Template.bind({});
+UnChecked.args = {
+  ...commonArgs,
+  checked:false
+};
+
+export const Intermediate = Template.bind({});
+Intermediate.args = {
+  ...commonArgs,
+  checked:false,
+  isIntermediate:true
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  ...commonArgs,
+  checked:true
+};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/CheckboxDocs.stories.js b/react/ui-components/src/atoms/stories/CheckboxDocs.stories.js
deleted file mode 100644
index acf64f007b0..00000000000
--- a/react/ui-components/src/atoms/stories/CheckboxDocs.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import CheckBox from "../CheckBox";
-import Iframe from "../Iframe";
-
-export default {
-  title: "Atoms/CheckBox",
-  component: CheckBox,
-  argTypes: {
-    config: { control: "object" },
-    inputRef: { control: false },
-    onChange: { action: "onChange" },
-    errorStyle: { control: "object" },
-    disabled: { control: "boolean" },
-    type: { control: "text" },
-    props: { control: "object" },
-    populators: { control: "object" },
-    formData: { control: "object" },
-    isIntermediate: { control: "boolean" },
-  },
-};
-
-export const Documentation = () => (
-  <Iframe
-    //Todo:Update the url
-    src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="Checkbox Documentation"
-  />
-);
-
-Documentation.storyName = "Docs";
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/CheckedCheckbox.stories.js b/react/ui-components/src/atoms/stories/CheckedCheckbox.stories.js
deleted file mode 100644
index 4c89ac9871c..00000000000
--- a/react/ui-components/src/atoms/stories/CheckedCheckbox.stories.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from "react";
-import FieldV1 from "../../hoc/FieldV1";
-import CheckBox from "../CheckBox";
-
-export default {
-  title: "Atoms/CheckBox/Checked",
-  component: CheckBox,
-  argTypes: {
-    config: { control: "object" },
-    inputRef: { control: false },
-    onChange: { action: "onChange" },
-    errorStyle: { control: "object" },
-    disabled: { control: "boolean" },
-    type: { control: "text" },
-    props: { control: "object" },
-    populators: { control: "object" },
-    formData: { control: "object" },
-    isIntermediate:{control:"boolean"}
-  },
-};
-
-const Template = (args) => <FieldV1 {...args} />;
-
-const t = (key) => key;
-
-const commonArgs = {
-  t: t,
-  populators: {
-    title: "Value",
-    name: "checked",
-    isLabelFirst:false,
-    isIntermediate:false
-  },
-  formData: {
-    checked: true,
-  },
-  inputRef: null,
-  onChange: () => {},
-  errorStyle: null,
-  disabled: false,
-  type: "checkbox",
-};
-
-//checkbox when checked
-export const Basic = Template.bind({});
-Basic.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: true,
-  },
-};
-
-//checkbox labelled and checked
-export const Labelled = Template.bind({});
-Labelled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: true,
-  },
-};
-
-//checkbox with paragrah as a label
-export const LongLabelled = Template.bind({});
-LongLabelled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title:
-      "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead.",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: true,
-  },
-};
-
-//checkbox with label before
-export const LabelFirst = Template.bind({});
-LabelFirst.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-    isLabelFirst:true
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: true,
-  },
-};
-
-export const LongLabelFirst = Template.bind({});
-LongLabelFirst.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    isLabelFirst:true,
-    title:
-      "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead.",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: true,
-  },
-};
-
-//checkbox checked and disabled
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: true,
-  },
-  disabled: true,
-};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Chip.stories.js b/react/ui-components/src/atoms/stories/Chip.stories.js
index c537d790f0c..07335131939 100644
--- a/react/ui-components/src/atoms/stories/Chip.stories.js
+++ b/react/ui-components/src/atoms/stories/Chip.stories.js
@@ -9,42 +9,60 @@ export default {
   argTypes: {
     className: {
       control: "text",
+      table: { disable: true }
     },
     text: {
       control: "text",
     },
     onClick: {
       control: "function",
+      table: { disable: true }
     },
     onTagClick: {
       control: "function",
+      table: { disable: true }
     },
     extraStyles: {
       control: { type: "object" },
+      table: { disable: true }
     },
     disabled: {
       control: "boolean",
+      table: { disable: true }
     },
     isErrorTag: {
       control: "boolean",
+      table: { disable: true }
     },
     hideClose: {
       control: "boolean",
+      name:"With Close",
+      mapping:{
+        true:false,
+        false:true
+      }
     },
     error: {
       control: "text",
+      // table: { disable: true }
     },
-    iconReq: {
-      control: "text",
+    WithIcon: {
+      control: "boolean",
+      name:"With Icon"
     },
   },
 };
 
-const Template = (args) => (
-  <div className="digit-tag-container">
-    <Chip {...args} />
+const Template = (args) => {
+  const { WithIcon, ...restArgs } = args;
+
+  return (
+    <div className="digit-tag-container">
+    <Chip {...restArgs} iconReq={WithIcon ? "Edit" : ""} />
   </div>
-);
+  );
+};
+
 
 const commonArgs = {
   text: "Chip",
@@ -55,8 +73,8 @@ const commonArgs = {
   disabled: false,
   isErrorTag: false,
   error: "",
-  hideClose: true,
-  iconReq: "",
+  hideClose: false,
+  WithIcon:false
 };
 
 export const Documentation = () => (
@@ -74,26 +92,11 @@ Basic.args = {
   ...commonArgs,
 };
 
-export const WithClose = Template.bind({});
-WithClose.args = {
-  ...commonArgs,
-  text: "Chip",
-  hideClose: false,
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  ...commonArgs,
-  text: "Chip",
-  iconReq: "Edit",
-};
-
 export const Error = Template.bind({});
 Error.args = {
   ...commonArgs,
   text: "ErrorChipWithError",
   isErrorTag: true,
   error: "ErrorMessage",
-  iconReq: "Edit",
   hideClose: false,
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Dropdown.stories.js b/react/ui-components/src/atoms/stories/Dropdown.stories.js
index a016a1423bd..3148dc73372 100644
--- a/react/ui-components/src/atoms/stories/Dropdown.stories.js
+++ b/react/ui-components/src/atoms/stories/Dropdown.stories.js
@@ -4,7 +4,7 @@ import FieldV1 from "../../hoc/FieldV1";
 import { CustomDropdown } from "../../molecules";
 
 export default {
-  title: "Atoms/DropDown/Simple",
+  title: "Atoms/SimpleDropdown",
   component: CustomDropdown,
   argTypes: {
     t: { control: false },
diff --git a/react/ui-components/src/atoms/stories/Dropdowndocs.stories.js b/react/ui-components/src/atoms/stories/Dropdowndocs.stories.js
index 8151c5350b0..0e0a2e6d73f 100644
--- a/react/ui-components/src/atoms/stories/Dropdowndocs.stories.js
+++ b/react/ui-components/src/atoms/stories/Dropdowndocs.stories.js
@@ -3,7 +3,7 @@ import { CustomDropdown } from "../../molecules";
 import Iframe from "../Iframe";
 
 export default {
-  title: "Atoms/DropDown/Simple",
+  title: "Atoms/SimpleDropDown",
   component: CustomDropdown,
   argTypes: {
     t: { control: false },
diff --git a/react/ui-components/src/atoms/stories/DynamicSideovermenu.stories.js b/react/ui-components/src/atoms/stories/DynamicSideovermenu.stories.js
deleted file mode 100644
index e507cac721c..00000000000
--- a/react/ui-components/src/atoms/stories/DynamicSideovermenu.stories.js
+++ /dev/null
@@ -1,1094 +0,0 @@
-import React from "react";
-import SlideOverMenu from "../SlideOverMenu";
-import Button from "../Button";
-import { SVG } from "../SVG";
-
-export default {
-  title: "Atoms/SlideOverMenu/Dynamic",
-  component: SlideOverMenu,
-  argTypes: {
-    className: { control: "text" },
-    styles: { control: "object" },
-    type: { control: "select", options: ["static", "dynamic"] },
-    position: { control: "select", options: ["left", "right"] },
-    children: {
-      control: "object",
-    },
-    header: {
-      control: "object",
-    },
-    footer: {
-      control: "object",
-    },
-    bgActive: { control: "boolean" },
-    isOverlay: { 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"}
-  },
-};
-
-const Template = (args) => <SlideOverMenu {...args} />;
-
-const commonArgs = {
-  className: "",
-  styles: {},
-  type: "dynamic",
-  position: "right",
-  children: [],
-  header: [],
-  footer: [],
-  bgActive: true,
-  isOverlay: false,
-  isDraggable: false,
-  hideScrollIcon: true,
-  sections: [],
-  defaultClosedWidth: "",
-  defaultOpenWidth: "",
-  addClose:false,
-  closedContents:[],
-  closedSections:[],
-  closedHeader:[],
-  closedFooter:[],
-  hideArrow:false
-};
-
-const children = [
-  <div>This is static content on the right!</div>,
-  <div
-    style={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-    }}
-  >
-    <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-      Roles
-    </div>
-    <Button
-      onClick={() => {
-        console.log("clicked");
-      }}
-      label={"Customize Roles"}
-      variation={"link"}
-      size={"medium"}
-    />
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role1
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role2
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Helpdesk
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role3
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint Resolver
-    </div>
-  </div>,
-
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role4
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role5
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Helpdesk
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role6
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint Resolver
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role7
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role8
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Helpdesk
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role9
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint Resolver
-    </div>
-  </div>,
-];
-
-const 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
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-        Roles1
-      </div>
-      <Button
-        onClick={() => {
-          console.log("clicked");
-        }}
-        label={"Customize Roles"}
-        variation={"link"}
-        size={"medium"}
-      />
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role1
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role2
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Helpdesk
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role3
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint Resolver
-      </div>
-    </div>,
-  ],
-  [
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-        Roles2
-      </div>
-      <Button
-        onClick={() => {
-          console.log("clicked");
-        }}
-        label={"Customize Roles"}
-        variation={"link"}
-        size={"medium"}
-      />
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role1
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role2
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Helpdesk
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role3
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint Resolver
-      </div>
-    </div>,
-  ],
-  [
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-        Roles3
-      </div>
-      <Button
-        onClick={() => {
-          console.log("clicked");
-        }}
-        label={"Customize Roles"}
-        variation={"link"}
-        size={"medium"}
-      />
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role1
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role2
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Helpdesk
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role3
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint Resolver
-      </div>
-    </div>,
-  ],
-];
-
-const header = [
-  <div className="typography heading-l" style={{ color: "#0B4B66" }}>
-    Header
-  </div>,
-];
-
-const footer = [
-  <Button
-    onClick={() => {
-      console.log("clicked");
-    }}
-    size={"medium"}
-    style={{ width: "100%" }}
-    label={"Customize Sandbox"}
-    icon={"Edit"}
-    variation={"secondary"}
-  />,
-];
-
-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 Right = Template.bind({});
-Right.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithoutBgActive = Template.bind({});
-RightWithoutBgActive.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  bgActive: false,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithSections = Template.bind({});
-RightWithSections.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  header: header,
-  footer: footer,
-  sections: sections,
-  closedContents:closedContents,
-  closedSections:closedSections,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithSectionsAndWithoutBgActive = Template.bind({});
-RightWithSectionsAndWithoutBgActive.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  header: header,
-  footer: footer,
-  sections: sections,
-  bgActive: false,
-  closedSections:closedSections,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithDragging = Template.bind({});
-RightWithDragging.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  isDraggable: true,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithClose = Template.bind({});
-RightWithClose.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  addClose:true,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithSectionsAndClose = Template.bind({});
-RightWithSectionsAndClose.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  header: header,
-  footer: footer,
-  sections: sections,
-  closedSections:closedSections,
-  addClose:true,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const RightWithCustomWidths = Template.bind({});
-RightWithCustomWidths.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  defaultClosedWidth: 100,
-  defaultOpenWidth: 600,
-  closedSections:closedSections,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const Left = Template.bind({});
-Left.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const LeftWithoutBgActive = Template.bind({});
-LeftWithoutBgActive.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  bgActive: false,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const LeftWithSections = Template.bind({});
-LeftWithSections.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  header: header,
-  footer: footer,
-  sections: sections,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedSections:closedSections,
-  closedFooter:closedFooter
-};
-
-export const LeftWithSectionsAndWithoutBgACtive = Template.bind({});
-LeftWithSectionsAndWithoutBgACtive.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  header: header,
-  footer: footer,
-  sections: sections,
-  bgActive: false,
-  closedHeader:closedHeader,
-  closedSections:closedSections,
-  closedFooter:closedFooter
-};
-
-export const LeftWithDragging = Template.bind({});
-LeftWithDragging.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  isDraggable: true,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const LeftWithClose = Template.bind({});
-LeftWithClose.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  addClose:true,
-  closedContents:closedContents,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const LeftWithSectionsAndClose = Template.bind({});
-LeftWithSectionsAndClose.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  header: header,
-  footer: footer,
-  sections: sections,
-  addClose:true,
-  closedSections:closedSections,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
-
-export const LeftWithCustomWidths = Template.bind({});
-LeftWithCustomWidths.args = {
-  ...commonArgs,
-  type: "dynamic",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  defaultClosedWidth: 100,
-  defaultOpenWidth: 600,
-  closedHeader:closedHeader,
-  closedFooter:closedFooter
-};
diff --git a/react/ui-components/src/atoms/stories/ErrorMessage.stories.js b/react/ui-components/src/atoms/stories/ErrorMessage.stories.js
deleted file mode 100644
index ad686da821a..00000000000
--- a/react/ui-components/src/atoms/stories/ErrorMessage.stories.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { Children } from "react";
-import ErrorMessage from "../ErrorMessage";
-import { truncate } from "lodash";
-import Iframe from "../Iframe";
-
-export default {
-  title: "Atoms/ErrorMessage",
-  component: ErrorMessage,
-  argTypes: {
-    wrapperClassName: {
-      control: "text",
-    },
-    wrapperStyles: {
-      control: { type: "object" },
-    },
-    showIcon: {
-      control: "boolean",
-    },
-    iconStyles: {
-      control: { type: "object" },
-    },
-    message: {
-      control: "text",
-    },
-    className: {
-      control: "text",
-    },
-    style: {
-      control: { type: "object" },
-    },
-    truncateMessage: {
-      control: "boolean",
-    },
-    maxLength: {
-      control: "text",
-    },
-  },
-};
-
-const Template = (args) => <ErrorMessage {...args} />;
-
-const commonArgs = {
-  wrapperClassName: "",
-  wrapperStyles: {},
-  showIcon: false,
-  iconStyles: {},
-  message: "",
-  className: "",
-  style: {},
-  truncateMessage: false,
-  maxLength: "",
-};
-
-export const Documentation = () => (
-  <Iframe
-    //Todo:Update the url
-    src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="ErrorMessage Documentation"
-  />
-);
-
-Documentation.storyName = "Docs";
-
-// Default ErrorMessage
-export const Default = Template.bind({});
-Default.args = {
-  ...commonArgs,
-  message: "Error Message",
-};
-
-// ErrorMessage with icon
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  ...commonArgs,
-  message: "Error Message With Icon",
-  showIcon: true,
-};
-
-// ErrorMessage with icon
-export const WithTruncateMessage = Template.bind({});
-WithTruncateMessage.args = {
-  ...commonArgs,
-  message: "Error with truncateMessage as true",
-  showIcon: true,
-  truncateMessage: true,
-  maxLength: 10,
-};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/ErrorPanel.stories.js b/react/ui-components/src/atoms/stories/ErrorPanel.stories.js
index f1179a3ea36..95877fa1dac 100644
--- a/react/ui-components/src/atoms/stories/ErrorPanel.stories.js
+++ b/react/ui-components/src/atoms/stories/ErrorPanel.stories.js
@@ -5,40 +5,58 @@ export default {
   title: "Atoms/Panels/Error",
   component: Panels,
   argTypes: {
-    type: { control: "select", options: ["success", "error"] },
+    type: {
+      control: "select",
+      options: ["success", "error"],
+      table: { disable: true },
+    },
     className: {
       control: "text",
+      table: { disable: true },
     },
     message: {
       control: "text",
+      table: { disable: true },
     },
     info: {
       control: "text",
+      table: { disable: true },
     },
     response: {
       control: "text",
+      table: { disable: true },
     },
     customIcon: {
-        control: "text",
-      },
-      iconFill: {
-        control: "text",
-      },
+      control: "text",
+      table: { disable: true },
+    },
+    iconFill: {
+      control: "text",
+      table: { disable: true },
+    },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     multipleResponses: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
+    },
+    showAsSvg: {
+      control: "boolean",
+      name: "With Animation",
+      mapping: {
+        true: false,
+        false: true,
+      },
     },
-    showAsSvg:{
-      control:"boolean"
+    animationProps: {
+      control: { type: "object" },
+      table: { disable: true },
     },
-    animationProps:{
-      control: {type :"object"}
-    }
   },
 };
 
@@ -48,12 +66,12 @@ const commonArgs = {
   className: "",
   message: "Message",
   type: "success",
-  info: "Ref ID ",
+  info: "Description ",
   response: "949749795479",
   customIcon:"",
   iconFill:"",
   style: {},
-  showAsSvg:false,
+  showAsSvg:true,
   multipleResponses:[],
   animationProps:{
     noAutoplay:false,
@@ -80,15 +98,6 @@ WithAnimationProperties.args = {
   }
 };
 
-
-export const WithoutAnimation = Template.bind({});
-WithoutAnimation.args = {
-  ...commonArgs,
-  type: "error",
-  message: "Error Message!",
-  showAsSvg:true
-};
-
 export const WithMultipleResponses = Template.bind({});
 WithMultipleResponses.args = {
   ...commonArgs,
diff --git a/react/ui-components/src/atoms/stories/Iconography.stories.js b/react/ui-components/src/atoms/stories/Iconography.stories.js
deleted file mode 100644
index 6fc5825cb7e..00000000000
--- a/react/ui-components/src/atoms/stories/Iconography.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import { SVG } from "../SVG";
-import { CustomSVG } from "../CustomSVG";
-import { iconRender } from "../../utils/iconRender";
-
-export default {
-  title: "Foundations",
-};
-
-const style = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  transform: "translate(-50%, -50%)",
-  "flex-direction": "column",
-  gap: "16px",
-};
-
-const Template = (args) => {
-  const IconComponent =
-    SVG[args.icon] || CustomSVG[args.icon];
-
-  return (
-    <div style={style}>
-      <div
-        className="typography caption-s"
-        style={{
-          gap: "8px",
-          display: "flex",
-          flexDirection: "column",
-          color: "#0B4B66",
-        }}
-      >
-        {args.icon}
-      </div>
-      {IconComponent ? <IconComponent {...args} /> : "Icon not found"}
-    </div>
-  );
-};
-
-export const Iconography = Template.bind({});
-Iconography.args = {
-  className: "",
-  style: {},
-  fill: "#C84C0E",
-  height: "50",
-  width: "50",
-  onClick: () => {},
-  icon: "Accessibility",
-};
diff --git a/react/ui-components/src/atoms/stories/UploadImage.stories.js b/react/ui-components/src/atoms/stories/ImageUpload.stories.js
similarity index 89%
rename from react/ui-components/src/atoms/stories/UploadImage.stories.js
rename to react/ui-components/src/atoms/stories/ImageUpload.stories.js
index cce32c06ba9..227168a8252 100644
--- a/react/ui-components/src/atoms/stories/UploadImage.stories.js
+++ b/react/ui-components/src/atoms/stories/ImageUpload.stories.js
@@ -1,9 +1,9 @@
 import React from "react";
-import Uploader from "../Uploader";
+import FileUpload from "../FileUpload";
 
 export default {
-  title: "Atoms/Uploader/UploadImage",
-  component: Uploader,
+  title: "Atoms/FileUpload/Image Upload",
+  component: FileUpload,
   argTypes: {
     uploadedFiles: {
       control: {
@@ -13,7 +13,7 @@ export default {
     variant: {
       control: {
         type: "select",
-        options: ["uploadFile", "uploadPopup", "uploadImage"],
+        options: ["uploadField", "uploadWidget", "uploadImage"],
       },
     },
     showLabel: {
@@ -88,7 +88,7 @@ export default {
   },
 };
 
-const Template = (args) => <Uploader {...args} />;
+const Template = (args) => <FileUpload {...args} />;
 
 export const Basic = Template.bind({});
 Basic.args = {
diff --git a/react/ui-components/src/atoms/stories/InfoButton.stories.js b/react/ui-components/src/atoms/stories/InfoButton.stories.js
deleted file mode 100644
index 0ae47cca2c3..00000000000
--- a/react/ui-components/src/atoms/stories/InfoButton.stories.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from "react";
-import InfoButton from "../InfoButton";
-import Iframe from "../Iframe";
-
-export default {
-  title: "Atoms/InfoButton",
-  component: InfoButton,
-  argTypes: {
-    isDisabled: {
-      control: "boolean",
-    },
-    label: {
-      control: "text",
-    },
-    infobuttontype: {
-      control: "select",
-      options: ["info", "error", "success", "warning"],
-    },
-    size: { control: "select", options: ["large", "medium", "small"] },
-    className: {
-      control: "text",
-    },
-    style: {
-      control: { type: "object" },
-    },
-    onClick: {
-      control: "function",
-    },
-    isSuffix: {
-      control: "boolean",
-    },
-  },
-};
-
-const commonStyles = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  color: "#363636",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  transform: "translate(-50%, -50%)",
-};
-
-const Template = (args) => (
-  <div style={commonStyles}>
-    <InfoButton {...args} />
-  </div>
-);
-
-const commonArgs = {
-  label: "Button",
-  className: "custom-class",
-  style: {},
-  onClick: () => console.log("clicked"),
-  isDisabled: false,
-  infobuttontype: "",
-  isSuffix: false,
-  size: "",
-};
-
-export const Documentation = () => (
-  <Iframe
-    //Todo:Update the url
-    src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="InfoButton Documentation"
-  />
-);
-
-Documentation.storyName = "Docs";
-
-export const Infobutton = Template.bind({});
-Infobutton.args = {
-  ...commonArgs,
-  infobuttontype: "info",
-};
-
-export const Successbutton = Template.bind({});
-Successbutton.args = {
-  ...commonArgs,
-  infobuttontype: "success",
-};
-
-export const Warningbutton = Template.bind({});
-Warningbutton.args = {
-  ...commonArgs,
-  infobuttontype: "warning",
-};
-
-export const Errorbutton = Template.bind({});
-Errorbutton.args = {
-  ...commonArgs,
-  infobuttontype: "error",
-};
diff --git a/react/ui-components/src/atoms/stories/InfoCard.stories.js b/react/ui-components/src/atoms/stories/InfoCard.stories.js
deleted file mode 100644
index 8fc62ba8f23..00000000000
--- a/react/ui-components/src/atoms/stories/InfoCard.stories.js
+++ /dev/null
@@ -1,207 +0,0 @@
-import React from "react";
-import InfoCard from "../InfoCard";
-import TextArea from "../TextArea";
-import InfoButton from "../InfoButton";
-import Iframe from "../Iframe";
-
-export default {
-  title: "Atoms/InfoCard",
-  component: InfoCard,
-  argTypes: {
-    label: {
-      control: "text",
-    },
-    variant: {
-      control: "select",
-      options: ["default", "success", "warning", "error"],
-    },
-    text: { control: "text" },
-    style: {
-      control: "object",
-    },
-    textStyle: {
-      control: "object",
-    },
-    additionalElements: {
-      control: {
-        type: "array",
-        separator: ",",
-      },
-    },
-    inline: {
-      control: "boolean",
-    },
-  },
-};
-
-const Template = (args) => <InfoCard {...args} />;
-
-const commonArgs = {
-  label: "Info",
-  text:
-    "Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect theservice to get completed in 24 hrs from the time of payment.",
-  variant: "default",
-};
-
-const additionalElements = [
-  <p key="1">Additional Element 1</p>,
-  <img
-    key="2"
-    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
-    alt="Additional Element 2"
-  />,
-  <img
-    key="3"
-    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
-    alt="Additional Element 3"
-  />,
-  <img
-    key="4"
-    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
-    alt="Additional Element 4"
-  />,
-  <img
-    key="5"
-    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
-    alt="Additional Element 5"
-  />,
-  <img
-    key="6"
-    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
-    alt="Additional Element 6"
-  />,
-  <img
-    key="7"
-    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
-    alt="Additional Element 7"
-  />,
-  <img
-    key="8"
-    src="https://digit.org/wp-content/uploads/2023/06/Digit-Logo-1.png"
-    alt="Additional Element 8"
-  />,
-  <TextArea
-    type="textarea"
-    disabled={false}
-    populators={{ resizeSmart: true }}
-  ></TextArea>,
-];
-
-export const Documentation = () => (
-  <Iframe
-    //Todo:Update the url
-    src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="InfoCard Documentation"
-  />
-);
-
-Documentation.storyName = "Docs";
-
-// Info default
-export const Info = Template.bind({});
-Info.args = {
-  ...commonArgs,
-};
-
-// Info with additional elements
-export const InfoWithAdditionalElements = Template.bind({});
-InfoWithAdditionalElements.args = {
-  ...commonArgs,
-  additionalElements: [
-    ...additionalElements,
-    <InfoButton label={"Button"} size="large" isDisabled={false}></InfoButton>,
-  ],
-};
-
-// Info Success
-export const InfoSuccess = Template.bind({});
-InfoSuccess.args = {
-  ...commonArgs,
-  label: "Success",
-  variant: "success",
-};
-InfoSuccess.argTypes = {
-  variant: { control: { disable: true } },
-};
-
-// InfoSuccess with additional elements
-export const InfoSuccessWithAdditionalElements = Template.bind({});
-InfoSuccessWithAdditionalElements.args = {
-  ...commonArgs,
-  additionalElements: [
-    ...additionalElements,
-    <InfoButton
-      size="large"
-      isDisabled={false}
-      infobuttontype={"success"}
-      label={"Button"}
-    ></InfoButton>,
-  ],
-  label: "Success",
-  variant: "success",
-};
-InfoSuccessWithAdditionalElements.argTypes = {
-  variant: { control: { disable: true } },
-};
-
-// Info Warning
-export const InfoWarning = Template.bind({});
-InfoWarning.args = {
-  ...commonArgs,
-  label: "Warning",
-  variant: "warning",
-};
-InfoWarning.argTypes = {
-  variant: { control: { disable: true } },
-};
-
-// InfoWarning with additional elements
-export const InfoWarningWithAdditionalElements = Template.bind({});
-InfoWarningWithAdditionalElements.args = {
-  ...commonArgs,
-  additionalElements: [
-    ...additionalElements,
-    <InfoButton
-      size="large"
-      isDisabled={false}
-      infobuttontype={"warning"}
-      label={"Button"}
-    ></InfoButton>,
-  ],
-  label: "Warning",
-  variant: "warning",
-};
-InfoWarningWithAdditionalElements.argTypes = {
-  variant: { control: { disable: true } },
-};
-
-// Info Error
-export const InfoError = Template.bind({});
-InfoError.args = {
-  ...commonArgs,
-  label: "Error",
-  variant: "error",
-};
-InfoError.argTypes = {
-  variant: { control: { disable: true } },
-};
-
-// InfoError with additional elements
-export const InfoErrorWithAdditionalElements = Template.bind({});
-InfoErrorWithAdditionalElements.args = {
-  ...commonArgs,
-  additionalElements: [
-    ...additionalElements,
-    <InfoButton
-      size="large"
-      isDisabled={false}
-      infobuttontype={"error"}
-      label={"Button"}
-    ></InfoButton>,
-  ],
-  label: "Error",
-  variant: "error",
-};
-InfoErrorWithAdditionalElements.argTypes = {
-  variant: { control: { disable: true } },
-};
diff --git a/react/ui-components/src/atoms/stories/IntermediateCheckbox.stories.js b/react/ui-components/src/atoms/stories/IntermediateCheckbox.stories.js
deleted file mode 100644
index c90009ed2c2..00000000000
--- a/react/ui-components/src/atoms/stories/IntermediateCheckbox.stories.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-import FieldV1 from "../../hoc/FieldV1";
-import CheckBox from "../CheckBox";
-
-export default {
-  title: "Atoms/CheckBox/Intermediate",
-  component: CheckBox,
-  argTypes: {
-    config: { control: "object" },
-    inputRef: { control: false },
-    onChange: { action: "onChange" },
-    errorStyle: { control: "object" },
-    disabled: { control: "boolean" },
-    type: { control: "text" },
-    props: { control: "object" },
-    populators: { control: "object" },
-    formData: { control: "object" },
-    isIntermediate:{control:"boolean"}
-  },
-};
-
-const Template = (args) => <FieldV1 {...args} />;
-
-const t = (key) => key;
-
-const commonArgs = {
-  t: t,
-  populators: {
-    title: "Value",
-    name: "checked",
-    isLabelFirst:false,
-    isIntermediate:false
-  },
-  formData: {
-    checked: true,
-  },
-  inputRef: null,
-  onChange: () => {},
-  errorStyle: null,
-  disabled: false,
-  type: "checkbox",
-};
-
-//checkbox intermediate
-export const Basic = Template.bind({});
-Basic.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "",
-    isIntermediate:true
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-export const Labelled = Template.bind({});
-Labelled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-    isIntermediate:true
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox with paragrah as a label
-export const LongLabelled = Template.bind({});
-LongLabelled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    isIntermediate:true,
-    title:
-      "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead.",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-
-//checkbox with label before
-export const LabelFirst = Template.bind({});
-LabelFirst.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-    isLabelFirst:true,
-    isIntermediate:true
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox with label before
-export const LongLabelFirst = Template.bind({});
-LongLabelFirst.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    isLabelFirst:true,
-    isIntermediate:true,
-    title:
-      "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead.",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox intermediate
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-    isIntermediate:true
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-  disabled: true,
-};
-
-export const FunctionalCheckbox = () => {
-  const [isChecked, setIsChecked] = React.useState(false);
-
-  const handleCheckboxChange = (event) => {
-    setIsChecked(event.target.checked);
-  };
-
-  return (
-    <CheckBox
-      label={"Label"}
-      checked={isChecked}
-      onChange={handleCheckboxChange}
-    ></CheckBox>
-  );
-};
diff --git a/react/ui-components/src/atoms/stories/LabelFieldPair.stories.js b/react/ui-components/src/atoms/stories/LabelFieldPair.stories.js
deleted file mode 100644
index 43fc6d7d40a..00000000000
--- a/react/ui-components/src/atoms/stories/LabelFieldPair.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import LabelFieldPair from "../LabelFieldPair";
-import TextBlock from "../TextBlock";
-import TextInput from "../TextInput";
-import Iframe from "../Iframe";
-
-export default {
-  title: "Atoms/LabelFieldPair",
-  component: LabelFieldPair,
-  argTypes: {
-    className: {
-      control: "text",
-    },
-    style: {
-      control: { type: "object" },
-    },
-    vertical: {
-      control: "boolean",
-    },
-  },
-};
-
-export const Documentation = () => (
-  <Iframe
-  //Todo:Update the url
-  src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-  title="LabelFieldPair Documentation"
-/>
-);
-
-Documentation.storyName = "Docs";
-
-export const Default = () => (
-  <LabelFieldPair>
-    <TextBlock body={"Name"}></TextBlock>
-    <TextInput type="text"></TextInput>
-  </LabelFieldPair>
-);
-
-export const VerticalAlignment = () => (
-  <LabelFieldPair vertical={true}>
-    <TextBlock body={"Name"}></TextBlock>
-    <TextInput type="text"></TextInput>
-  </LabelFieldPair>
-);
diff --git a/react/ui-components/src/atoms/stories/LinkButton.stories.js b/react/ui-components/src/atoms/stories/LinkButton.stories.js
index 4f117d6d113..c0e264ebdda 100644
--- a/react/ui-components/src/atoms/stories/LinkButton.stories.js
+++ b/react/ui-components/src/atoms/stories/LinkButton.stories.js
@@ -5,46 +5,84 @@ export default {
   title: "Atoms/Button/Link",
   component: Button,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
-    },
     label: {
       control: "text",
     },
     variation: {
       control: "select",
       options: ["primary", "secondary", "teritiary", "link"],
+      table: { disable: true },
     },
     size: { control: "select", options: ["large", "medium", "small"] },
     className: {
       control: "text",
+      table: { disable: true },
     },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     onClick: {
       control: "function",
-    },
-    isSuffix: {
-      control: "boolean",
+      table: { disable: true },
     },
     title: {
       control: "text",
+      table: { disable: true },
+    },
+    isSearchable: {
+      control: "boolean"
+    },
+    showBottom: {
+      control: "select",
+      options: ["DropUp", "DropDown"],
+      name: "ActionButton",
+      mapping: {
+        DropUp: false,
+        DropDown: true,
+      },
+    },
+    optionsKey: {
+      control: "text",
+      table: { disable: true },
     },
     options: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
     },
-    isSearchable: {
-      control: "boolean",
+    isDisabled: {
+      control: "select",
+      options: ["Default", "Disabled"],
+      name: "state",
+      mapping: {
+        Default: false,
+        Disabled: true,
+      },
     },
-    showBottom: {
+    textStyles: { table: { disable: true } },
+    iconFill: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    onOptionSelect: { table: { disable: true } },
+    type: { table: { disable: true } },
+    WithIcon: {
       control: "boolean",
     },
-    optionsKey: {
-      control: "text",
+    isSuffix: {
+      control: "select",
+      options: ["Prefix", "Suffix"],
+      name: "Icon",
+      mapping: {
+        Prefix: false,
+        Suffix: true,
+      },
+      if: { arg: "WithIcon", truthy: true}, 
+    },
+    Width: {
+      control: "select",
+      options: ["Hug Content", "Justify"],
     },
   },
 };
@@ -60,26 +98,49 @@ const commonStyles = {
   transform: "translate(-50%, -50%)",
 };
 
-const Template = (args) => (
-  <div style={commonStyles}>
-    <Button {...args} />
-  </div>
-);
+
+const Template = (args) => {
+  const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+  const widthStyles =
+    Width === "Hug Content"
+      ? { width: "auto", whiteSpace: "nowrap" }
+      : { width: "100%" };
+
+  return (
+    <div
+      style={{ ...commonStyles, width: Width === "Justify" ? "100%" : "auto" }}
+    >
+      <Button
+        {...restArgs}
+        style={{ ...restArgs.style, ...widthStyles }}
+        icon={WithIcon ? (isSuffix ? "ArrowForward" : "ArrowBack") : ""}
+        isSuffix={WithIcon && isSuffix}
+        menuStyles={!args.showBottom ? { bottom: "40px" } : undefined}
+      />
+    </div>
+  );
+};
 
 const commonArgs = {
   label: "Button",
   className: "custom-class",
   style: {},
-  onClick: () => {console.log("clicked"); } ,
-  isDisabled: false,
+  onClick: () => {
+    console.log("clicked");
+  },
+  isDisabled: "Default",
   variation: "",
-  isSuffix: false,
-  size: "",
-  title:"",
-  iconFill:"",
-  options:[],
-  optionsKey:"",
-  isSearchable:false
+  size: "large",
+  title: "",
+  iconFill: "",
+  options: [],
+  optionsKey: "",
+  WithIcon: false,
+  isSuffix: "Prefix",
+  isSearchable: false,
+  Width:"Hug Content",
+  showBottom:"DropDown"
 };
 
 // Button with link variantion
@@ -88,40 +149,4 @@ Basic.args = {
   ...commonArgs,
   variation: "link",
   label: "Link",
-};
-
-// Button with link variantion and with icon
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  ...commonArgs,
-  variation: "link",
-  label: "Link",
-  icon: "MyLocation",
-};
-
-// Button with link variantion and with icon as a suffix
-export const WithSuffixIcon = Template.bind({});
-WithSuffixIcon.args = {
-  ...commonArgs,
-  variation: "link",
-  label: "Link",
-  icon: "ArrowForward",
-  isSuffix: true,
-};
-
-// Button with link variantion and disabled
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  variation: "link",
-  label: "Link",
-  isDisabled: true,
-};
-
-// Button with link variation and label with maxchars
-export const LabelWithMaxLength = Template.bind({});
-LabelWithMaxLength.args = {
-  ...commonArgs,
-  variation: "link",
-  label: "qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopas",
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Loader.stories.js b/react/ui-components/src/atoms/stories/Loader.stories.js
index 079e882df82..80731093d4d 100644
--- a/react/ui-components/src/atoms/stories/Loader.stories.js
+++ b/react/ui-components/src/atoms/stories/Loader.stories.js
@@ -10,18 +10,23 @@ export default {
     variant: {
       control: "select",
       options: ["Basic", "PageLoader", "OverlayLoader"],
+      table:{disable:true}
     },
     className: {
       control: "text",
+      table:{disable:true}
     },
     style: {
       control: { type: "object" },
+      table:{disable:true}
     },
     animationStyles: {
       control: { type: "object" },
+      table:{disable:true}
     },
     loaderText: {
       control: "text",
+      name:"Loader Text"
     },
   },
 };
@@ -33,6 +38,7 @@ const commonArgs = {
   style: {},
   variant: "Basic",
   animationStyles: {},
+  loaderText:"Loading"
 };
 
 export const Documentation = () => (
diff --git a/react/ui-components/src/atoms/stories/MultiselectDropdown.stories.js b/react/ui-components/src/atoms/stories/MultiselectDropdown.stories.js
index 03a64edf26f..e9eacec7bc4 100644
--- a/react/ui-components/src/atoms/stories/MultiselectDropdown.stories.js
+++ b/react/ui-components/src/atoms/stories/MultiselectDropdown.stories.js
@@ -4,7 +4,7 @@ import FieldV1 from "../../hoc/FieldV1";
 import { CustomDropdown } from "../../molecules";
 
 export default {
-  title: "Atoms/DropDown/MultiSelect",
+  title: "Atoms/MultiSelectDropDown",
   component: CustomDropdown,
   argTypes: {
     t: { control: false },
diff --git a/react/ui-components/src/atoms/stories/Multiselectdropdowndocs.stories.js b/react/ui-components/src/atoms/stories/Multiselectdropdowndocs.stories.js
index b850c0ff17b..8af20636b51 100644
--- a/react/ui-components/src/atoms/stories/Multiselectdropdowndocs.stories.js
+++ b/react/ui-components/src/atoms/stories/Multiselectdropdowndocs.stories.js
@@ -5,7 +5,7 @@ import { CustomDropdown } from "../../molecules";
 import Iframe from "../Iframe";
 
 export default {
-  title: "Atoms/DropDown/MultiSelect",
+  title: "Atoms/MultiSelectDropDown",
   component: CustomDropdown,
   argTypes: {
     t: { control: false },
diff --git a/react/ui-components/src/atoms/stories/PrimaryButton.stories.js b/react/ui-components/src/atoms/stories/PrimaryButton.stories.js
index 32a5383159f..817d9b9d21a 100644
--- a/react/ui-components/src/atoms/stories/PrimaryButton.stories.js
+++ b/react/ui-components/src/atoms/stories/PrimaryButton.stories.js
@@ -5,46 +5,84 @@ export default {
   title: "Atoms/Button/Primary",
   component: Button,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
-    },
     label: {
       control: "text",
     },
     variation: {
       control: "select",
       options: ["primary", "secondary", "teritiary", "link"],
+      table: { disable: true },
     },
     size: { control: "select", options: ["large", "medium", "small"] },
     className: {
       control: "text",
+      table: { disable: true },
     },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     onClick: {
       control: "function",
+      table: { disable: true },
     },
-    isSuffix: {
+    title: {
+      control: "text",
+      table: { disable: true },
+    },
+    isSearchable: {
       control: "boolean",
     },
-    title: {
+    showBottom: {
+      control: "select",
+      options: ["DropUp", "DropDown"],
+      name: "ActionButton",
+      mapping: {
+        DropUp: false,
+        DropDown: true,
+      },
+    },
+    optionsKey: {
       control: "text",
+      table: { disable: true },
     },
     options: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
     },
-    isSearchable: {
-      control: "boolean",
+    isDisabled: {
+      control: "select",
+      options: ["Default", "Disabled"],
+      name: "state",
+      mapping: {
+        Default: false,
+        Disabled: true,
+      },
     },
-    showBottom: {
+    textStyles: { table: { disable: true } },
+    iconFill: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    onOptionSelect: { table: { disable: true } },
+    type: { table: { disable: true } },
+    WithIcon: {
       control: "boolean",
     },
-    optionsKey: {
-      control: "text",
+    isSuffix: {
+      control: "select",
+      options: ["Prefix", "Suffix"],
+      name: "Icon",
+      mapping: {
+        Prefix: false,
+        Suffix: true,
+      },
+      if: { arg: "WithIcon", truthy: true },
+    },
+    Width: {
+      control: "select",
+      options: ["Hug Content", "Justify"],
     },
   },
 };
@@ -60,26 +98,48 @@ const commonStyles = {
   transform: "translate(-50%, -50%)",
 };
 
-const Template = (args) => (
-  <div style={commonStyles}>
-    <Button {...args} />
-  </div>
-);
+const Template = (args) => {
+  const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+  const widthStyles =
+    Width === "Hug Content"
+      ? { width: "auto", whiteSpace: "nowrap" }
+      : { width: "100%" };
+
+  return (
+    <div
+      style={{ ...commonStyles, width: Width === "Justify" ? "100%" : "auto" }}
+    >
+      <Button
+        {...restArgs}
+        style={{ ...restArgs.style, ...widthStyles }}
+        icon={WithIcon ? (isSuffix ? "ArrowForward" : "ArrowBack") : ""}
+        isSuffix={WithIcon && isSuffix}
+        menuStyles={!args.showBottom ? { bottom: "40px" } : undefined}
+      />
+    </div>
+  );
+};
 
 const commonArgs = {
   label: "Button",
   className: "custom-class",
   style: {},
-  onClick: () => {console.log("clicked"); } ,
-  isDisabled: false,
+  onClick: () => {
+    console.log("clicked");
+  },
+  isDisabled: "Default",
   variation: "",
-  isSuffix: false,
-  size: "",
-  title:"",
-  iconFill:"",
-  options:[],
-  optionsKey:"",
-  isSearchable:false
+  size: "large",
+  title: "",
+  iconFill: "",
+  options: [],
+  optionsKey: "",
+  WithIcon: false,
+  isSuffix: "Prefix",
+  isSearchable: false,
+  showBottom: "DropDown",
+  Width: "Hug Content",
 };
 
 // Button with primary variantion
@@ -89,110 +149,20 @@ Basic.args = {
   variation: "primary",
 };
 
-// Button with primary variantion and with icon
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  ...commonArgs,
-  variation: "primary",
-  icon: "MyLocation",
-};
-
-// Button with primary variantion and with icon as a suffix
-export const WithSuffixIcon = Template.bind({});
-WithSuffixIcon.args = {
+export const ActionButton = Template.bind({});
+ActionButton.args = {
   ...commonArgs,
+  label: "ActionButton",
   variation: "primary",
-  icon: "ArrowForward",
-  isSuffix: true,
-};
-
-// Button with primary variantion and disabled
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  variation: "primary",
-  isDisabled: true,
-};
-
-// Button with primary variation and label with maxchars
-export const LabelWithMaxLength = Template.bind({});
-LabelWithMaxLength.args = {
-  ...commonArgs,
-  variation: "primary",
-  label: "qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopas",
-};
-
-export const ActionSelectionDropDown = Template.bind({});
-ActionSelectionDropDown.args = {
-  ...commonArgs,
-  label:"ActionButton",
-  variation: "primary",
-  type:"actionButton",
-  optionsKey:"name",
-  isSearchable:true,
-    options:[
-      { name: "Action A", code: "Actiona" },
-      { name: "Action B", code: "Actionb" },
-      { name: "Action C", code: "Actionc" },
-    ],
-  showBottom:true,
-  onOptionSelect:(e)=>{console.log(e,"option selected")}
-};
-
-export const UnsearchableActionSelectionDropDown = Template.bind({});
-UnsearchableActionSelectionDropDown.args = {
-  ...commonArgs,
-  label:"ActionButton",
-  variation: "primary",
-  type:"actionButton",
-  optionsKey:"name",
-  isSearchable:false,
-    options:[
-      { name: "Action A", code: "Actiona" },
-      { name: "Action B", code: "Actionb" },
-      { name: "Action C", code: "Actionc" },
-    ],
-  showBottom:true,
-  onOptionSelect:(e)=>{console.log(e,"option selected")}
-  
-};
-
-export const ActionSelectionDropUp = Template.bind({});
-ActionSelectionDropUp.args = {
-  ...commonArgs,
-  label:"ActionButton",
-  variation: "primary",
-  type:"actionButton",
-  optionsKey:"name",
-  isSearchable:true,
-    options:[
-      { name: "Action A", code: "Actiona" },
-      { name: "Action B", code: "Actionb" },
-      { name: "Action C", code: "Actionc" },
-    ],
-  showBottom:false,
-  menuStyles:{
-    bottom:"40px"
+  type: "actionButton",
+  optionsKey: "name",
+  isSearchable: true,
+  options: [
+    { name: "Action A", code: "Actiona" },
+    { name: "Action B", code: "Actionb" },
+    { name: "Action C", code: "Actionc" },
+  ],
+  onOptionSelect: (e) => {
+    console.log(e, "option selected");
   },
-  onOptionSelect:(e)=>{console.log(e,"option selected")}
 };
-
-export const UnsearchableActionSelectionDropUp = Template.bind({});
-UnsearchableActionSelectionDropUp.args = {
-  ...commonArgs,
-  label:"ActionButton",
-  variation: "primary",
-  type:"actionButton",
-  optionsKey:"name",
-  isSearchable:false,
-    options:[
-      { name: "Action A", code: "Actiona" },
-      { name: "Action B", code: "Actionb" },
-      { name: "Action C", code: "Actionc" },
-    ],
-  showBottom:false,
-  menuStyles:{
-    bottom:"40px"
-  },
-  onOptionSelect:(e)=>{console.log(e,"option selected")}
-};
\ 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 63b2db2756e..54b74ac1701 100644
--- a/react/ui-components/src/atoms/stories/RadioButtons.stories.js
+++ b/react/ui-components/src/atoms/stories/RadioButtons.stories.js
@@ -1,69 +1,101 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { CustomDropdown } from "../../molecules";
-import FieldV1 from "../../hoc/FieldV1";
 import Iframe from "../Iframe";
+import RadioButtons from "../RadioButtons";
 
 export default {
   title: "Atoms/RadioButton",
-  component: CustomDropdown,
+  component: RadioButtons,
   argTypes: {
-    t: { control: false },
-    populators: { control: "object" },
-    inputRef: { control: false },
-    label: { control: "text" },
-    onChange: { action: "onChange" },
-    value: { control: "text" },
-    errorStyle: { control: "object" },
-    disabled: { control: "boolean" },
-    type: { control: "select", options: ["radio"] },
-    additionalWrapperClass: { control: "text" },
-    props: { control: "object" },
+    optionsKey: {
+      control: "text",
+      table: { disable: true },
+    },
+    options: {
+      table: { disable: true },
+    },
+    inputRef: {
+      table: { disable: true },
+    },
+    errorStyle: {
+      table: { disable: true },
+    },
+    State: {
+      control: "select",
+      options: ["Default", "Disabled", "NonEditable"],
+    },
+    additionalWrapperClass: { control: "text", table: { disable: true } },
+    error: { control: "text", table: { disable: true } },
+    style: { control: "object", table: { disable: true } },
+    innerStyles: { control: "object", table: { disable: true } },
+    selectedOption: { table: { disable: true } },
+    onSelect: { action: "onChange", table: { disable: true } },
+    alignVertical: { table: { disable: true } },
+    isLabelFirst: {
+      control: "select",
+      name:"Alignment",
+      options:[
+        "Right","Left"
+      ],
+      mapping:{
+        Right:false,
+        Left:true
+      }
+    },
   },
 };
 const queryClient = new QueryClient();
 
+const commonStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  color: "#363636",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
+};
+
 const Template = (args) => {
-  const [selectedOption, setSelectedOption] = useState(args.value);
+  const { State, ...rest } = args;
+
+  const [selectedOption, setSelectedOption] = useState(
+    State === "NonEditable" ? "Option" : args.value
+  );
 
-  const handleSelectOption = (e, name) => {
+  const handleSelectOption = (e) => {
     const selectedValue = e.code;
     if (selectedValue !== undefined) {
-      setSelectedOption(selectedValue);
-      args.onChange(e, name);
+      setSelectedOption(e);
     }
   };
 
   return (
     <QueryClientProvider client={queryClient}>
-      <FieldV1 {...args} value={selectedOption} onChange={handleSelectOption} />
+      <div style={commonStyles}>
+        <RadioButtons
+          {...rest}
+          disabled={State === "Disabled" || State === "NonEditable"}
+          onSelect={handleSelectOption}
+          selectedOption={State === "NonEditable" ? "Option" : selectedOption}
+          value={State === "NonEditable" ? "Option" : selectedOption}
+        />
+      </div>
     </QueryClientProvider>
   );
 };
 
-const t = (key) => key;
-
-const gendersOptions = [
-  { code: "MALE", name: "MALE" },
-  { code: "FEMALE", name: "FEMALE" },
-  { code: "TRANSGENDER", name: "TRANSGENDER" },
-];
-
 const commonArgs = {
-  t: t,
-  populators: {
-    name: "gender",
-    optionsKey: "name",
-    options: gendersOptions,
-  },
+  optionsKey: "name",
+  options: [{ code: "Option", name: "Option" }],
   inputRef: null,
-  label: "Select Gender",
   errorStyle: null,
-  disabled: false,
-  type: "radio",
   additionalWrapperClass: "",
   error: "",
-  description: "",
+  alignVertical: false,
+  isLabelFirst:"Right",
+  State: "Default",
 };
 
 export const Documentation = () => (
@@ -76,41 +108,7 @@ export const Documentation = () => (
 
 Documentation.storyName = "Docs";
 
-export const Default = Template.bind({});
-Default.args = {
-  ...commonArgs,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  disabled: true,
-};
-Disabled.argTypes = {
-  disabled: { control: { disable: true } },
-};
-
-export const Filled = Template.bind({});
-Filled.args = {
-  ...commonArgs,
-  value: "MALE",
-};
-
-export const PreSelected = Template.bind({});
-PreSelected.args = {
+export const Basic = Template.bind({});
+Basic.args = {
   ...commonArgs,
-  value: "MALE",
-  disabled: true,
-};
-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/SecondaryButton.stories.js b/react/ui-components/src/atoms/stories/SecondaryButton.stories.js
index de3dd5e3131..2f845064440 100644
--- a/react/ui-components/src/atoms/stories/SecondaryButton.stories.js
+++ b/react/ui-components/src/atoms/stories/SecondaryButton.stories.js
@@ -5,46 +5,84 @@ export default {
   title: "Atoms/Button/Secondary",
   component: Button,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
-    },
     label: {
       control: "text",
     },
     variation: {
       control: "select",
       options: ["primary", "secondary", "teritiary", "link"],
+      table: { disable: true },
     },
     size: { control: "select", options: ["large", "medium", "small"] },
     className: {
       control: "text",
+      table: { disable: true },
     },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     onClick: {
       control: "function",
-    },
-    isSuffix: {
-      control: "boolean",
+      table: { disable: true },
     },
     title: {
       control: "text",
+      table: { disable: true },
+    },
+    isSearchable: {
+      control: "boolean"
+    },
+    showBottom: {
+      control: "select",
+      options: ["DropUp", "DropDown"],
+      name: "ActionButton",
+      mapping: {
+        DropUp: false,
+        DropDown: true,
+      },
+    },
+    optionsKey: {
+      control: "text",
+      table: { disable: true },
     },
     options: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
     },
-    isSearchable: {
-      control: "boolean",
+    isDisabled: {
+      control: "select",
+      options: ["Default", "Disabled"],
+      name: "state",
+      mapping: {
+        Default: false,
+        Disabled: true,
+      },
     },
-    showBottom: {
+    textStyles: { table: { disable: true } },
+    iconFill: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    onOptionSelect: { table: { disable: true } },
+    type: { table: { disable: true } },
+    WithIcon: {
       control: "boolean",
     },
-    optionsKey: {
-      control: "text",
+    isSuffix: {
+      control: "select",
+      options: ["Prefix", "Suffix"],
+      name: "Icon",
+      mapping: {
+        Prefix: false,
+        Suffix: true,
+      },
+      if: { arg: "WithIcon", truthy: true}, 
+    },
+    Width: {
+      control: "select",
+      options: ["Hug Content", "Justify"],
     },
   },
 };
@@ -60,26 +98,48 @@ const commonStyles = {
   transform: "translate(-50%, -50%)",
 };
 
-const Template = (args) => (
-  <div style={commonStyles}>
-    <Button {...args} />
-  </div>
-);
+const Template = (args) => {
+  const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+  const widthStyles =
+    Width === "Hug Content"
+      ? { width: "auto", whiteSpace: "nowrap" }
+      : { width: "100%" };
+
+  return (
+    <div
+      style={{ ...commonStyles, width: Width === "Justify" ? "100%" : "auto" }}
+    >
+      <Button
+        {...restArgs}
+        style={{ ...restArgs.style, ...widthStyles }}
+        icon={WithIcon ? (isSuffix ? "ArrowForward" : "ArrowBack") : ""}
+        isSuffix={WithIcon && isSuffix}
+        menuStyles={!args.showBottom ? { bottom: "40px" } : undefined}
+      />
+    </div>
+  );
+};
 
 const commonArgs = {
   label: "Button",
   className: "custom-class",
   style: {},
-  onClick: () => {console.log("clicked"); } ,
-  isDisabled: false,
+  onClick: () => {
+    console.log("clicked");
+  },
+  isDisabled: "Default",
   variation: "",
-  isSuffix: false,
-  size: "",
-  title:"",
-  iconFill:"",
-  options:[],
-  optionsKey:"",
-  isSearchable:false
+  size: "large",
+  title: "",
+  iconFill: "",
+  options: [],
+  optionsKey: "",
+  WithIcon: false,
+  isSuffix: "Prefix",
+  isSearchable: false,
+  showBottom:"DropDown",
+  Width:"Hug Content"
 };
 
 
@@ -90,35 +150,20 @@ Basic.args = {
   variation: "secondary",
 };
 
-// Button with secondary variantion and with icon
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  ...commonArgs,
-  variation: "secondary",
-  icon: "MyLocation",
-};
-
-// Button with secondary variantion and with icon as a suffix
-export const WithSuffixIcon = Template.bind({});
-WithSuffixIcon.args = {
-  ...commonArgs,
-  variation: "secondary",
-  icon: "ArrowForward",
-  isSuffix: true,
-};
-
-// Button with secondary variantion and disabled
-export const Disabled = Template.bind({});
-Disabled.args = {
+export const ActionButton = Template.bind({});
+ActionButton.args = {
   ...commonArgs,
+  label: "ActionButton",
   variation: "secondary",
-  isDisabled: true,
-};
-
-// Button with secondary variation and label with maxchars
-export const LabelWithMaxLength = Template.bind({});
-LabelWithMaxLength.args = {
-  ...commonArgs,
-  variation: "secondary",
-  label: "qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopas",
+  type: "actionButton",
+  optionsKey: "name",
+  isSearchable: true,
+  options: [
+    { name: "Action A", code: "Actiona" },
+    { name: "Action B", code: "Actionb" },
+    { name: "Action C", code: "Actionc" },
+  ],
+  onOptionSelect: (e) => {
+    console.log(e, "option selected");
+  },
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/SelectionCard.stories.js b/react/ui-components/src/atoms/stories/SelectionTag.stories.js
similarity index 50%
rename from react/ui-components/src/atoms/stories/SelectionCard.stories.js
rename to react/ui-components/src/atoms/stories/SelectionTag.stories.js
index fc98072c571..36a24aa79d0 100644
--- a/react/ui-components/src/atoms/stories/SelectionCard.stories.js
+++ b/react/ui-components/src/atoms/stories/SelectionTag.stories.js
@@ -1,50 +1,79 @@
 import React from "react";
-import SelectionCard from "../SelectionCard";
+import SelectionTag from "../SelectionTag";
 import { SVG } from "../SVG";
 import Iframe from "../Iframe";
 
 export default {
-  title: "Atoms/SelectionCard",
-  component: SelectionCard,
+  title: "Atoms/SelectionTag",
+  component: SelectionTag,
   argTypes: {
     width: {
-      control: "number",
+      control: "select",
+      options: ["Fixed-Equal", "Custom"],
+      name: "Width",
+      mapping: {
+        "Fixed-Equal": undefined,
+        Custom: 300,
+      },
     },
     errorMessage: {
-      control: "text",
+      control: "check",
+      name: "Error",
+      options: ["Error"],
     },
     options: {
       control: "object",
+      table: { disable: true },
     },
     onSelectionChanged: {
       action: "selectionChanged",
+      table: { disable: true },
     },
     selected: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
     },
     allowMultipleSelection: {
       control: "boolean",
+      table: { disable: true },
+    },
+    withContainer: {
+      control: "select",
+      options: ["Enable", "Disable"],
+      name: "Container",
+      mapping: {
+        Enable: true,
+        Disable: false,
+      },
+    },
+    WithIcon: {
+      control: "boolean",
+    },
+    isSuffix: {
+      control: "select",
+      options: ["Prefix", "Suffix"],
+      name: "Icon",
+      mapping: {
+        Prefix: false,
+        Suffix: true,
+      },
+      if: { arg: "WithIcon", truthy: true },
     },
   },
 };
 
-const Template = (args) => <SelectionCard {...args} />;
-
-const commonArgs = {
-  width: "",
-  errorMessage: "",
-  selected: [],
-  options: [
-    { name: "Option 1", code: "option1", prefixIcon: "", suffixIcon: "" },
-    { name: "Option 2", code: "option2", prefixIcon: "", suffixIcon: "" },
-    { name: "Option 3", code: "option3", prefixIcon: "", suffixIcon: "" },
-  ],
-  allowMultipleSelection: true,
-  onSelectionChanged: (selectedOptions) =>
-    console.log("Selected options:", selectedOptions),
+const commonStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  color: "#363636",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
 };
 
 const prefixIconOptions = [
@@ -59,67 +88,49 @@ const suffixIconOptions = [
   { name: "Option 3", code: "option3", prefixIcon: "", suffixIcon: "Edit" },
 ];
 
-const IconOptions = [
-  { name: "Option 1", code: "option1", prefixIcon: "Edit", suffixIcon: "Edit" },
-  { name: "Option 2", code: "option2", prefixIcon: "Edit", suffixIcon: "Edit" },
-  { name: "Option 3", code: "option3", prefixIcon: "Edit", suffixIcon: "Edit" },
-];
+const Template = (args) => {
+  const {errorMessage,WithIcon,isSuffix,...rest} = args;
+  return (
+    <div style={commonStyles}>
+      <SelectionTag {...rest} errorMessage={errorMessage?.length > 0 ? "Error Message" : ''} options={WithIcon ? isSuffix ? suffixIconOptions : prefixIconOptions : args.options}/>
+    </div>
+  );
+};
+
+const commonArgs = {
+  width: "Fixed-Equal",
+  errorMessage: "",
+  selected: [],
+  options: [
+    { name: "Option 1", code: "option1", prefixIcon: "", suffixIcon: "" },
+    { name: "Option 2", code: "option2", prefixIcon: "", suffixIcon: "" },
+    { name: "Option 3", code: "option3", prefixIcon: "", suffixIcon: "" },
+  ],
+  allowMultipleSelection: false,
+  onSelectionChanged: (selectedOptions) =>
+    console.log("Selected options:", selectedOptions),
+  withContainer: "Enable",
+  WithIcon:false,
+  isSuffix:"Prefix"
+};
 
 export const Documentation = () => (
   <Iframe
     //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="SelectionCard Documentation"
+    title="SelectionTag Documentation"
   />
 );
 
 Documentation.storyName = "Docs";
 
-export const Default = Template.bind({});
-Default.args = {
-  ...commonArgs,
-};
-
-export const WithPrefixIcon = Template.bind({});
-WithPrefixIcon.args = {
-  ...commonArgs,
-  options: prefixIconOptions,
-};
-
-export const WithSuffixIcon = Template.bind({});
-WithSuffixIcon.args = {
-  ...commonArgs,
-  options: suffixIconOptions,
-};
-
-export const WithIcons = Template.bind({});
-WithIcons.args = {
+export const SingleSelect = Template.bind({});
+SingleSelect.args = {
   ...commonArgs,
-  options: IconOptions,
 };
 
-export const SingleSelection = Template.bind({});
-SingleSelection.args = {
+export const MultiSelect = Template.bind({});
+MultiSelect.args = {
   ...commonArgs,
-  allowMultipleSelection: false,
-};
-
-export const WithInitialSelection = Template.bind({});
-WithInitialSelection.args = {
-  ...commonArgs,
-  selected: [
-    { name: "Option 1", code: "option1", prefixIcon: "", suffixIcon: "" },
-  ],
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...commonArgs,
-  errorMessage: "There was an error",
-};
-
-export const CustomWidth = Template.bind({});
-CustomWidth.args = {
-  ...commonArgs,
-  width: 300,
-};
+  allowMultipleSelection: true,
+};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/StaticSlideOverMenu.stories.js b/react/ui-components/src/atoms/stories/StaticSlideOverMenu.stories.js
deleted file mode 100644
index 29ec3b00878..00000000000
--- a/react/ui-components/src/atoms/stories/StaticSlideOverMenu.stories.js
+++ /dev/null
@@ -1,1024 +0,0 @@
-import React from "react";
-import SlideOverMenu from "../SlideOverMenu";
-import Button from "../Button";
-import { SVG } from "../SVG";
-
-export default {
-  title: "Atoms/SlideOverMenu/Static",
-  component: SlideOverMenu,
-  argTypes: {
-    className: { control: "text" },
-    styles: { control: "object" },
-    type: { control: "select", options: ["static", "dynamic"] },
-    position: { control: "select", options: ["left", "right"] },
-    children: {
-      control: "object",
-    },
-    header: {
-      control: "object",
-    },
-    footer: {
-      control: "object",
-    },
-    bgActive: { control: "boolean" },
-    isOverlay: { 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"}
-  },
-};
-
-const Template = (args) => <SlideOverMenu {...args} />;
-
-const commonArgs = {
-  className: "",
-  styles: {},
-  type: "static",
-  position: "right",
-  children: [],
-  header: [],
-  footer: [],
-  bgActive: true,
-  isOverlay: false,
-  isDraggable: false,
-  hideScrollIcon: true,
-  sections: [],
-  defaultClosedWidth: "",
-  defaultOpenWidth: "",
-  addClose:false,
-  closedContents:[],
-  closedSections:[],
-  closedHeader:[],
-  closedFooter:[],
-  hideArrow:false
-};
-
-const children = [
-  <div>This is static content on the right!</div>,
-  <div
-    style={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-    }}
-  >
-    <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-      Roles
-    </div>
-    <Button
-      onClick={() => {
-        console.log("clicked");
-      }}
-      label={"Customize Roles"}
-      variation={"link"}
-      size={"medium"}
-    />
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role1
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role2
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Helpdesk
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role3
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint Resolver
-    </div>
-  </div>,
-
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role4
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role5
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Helpdesk
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role6
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint Resolver
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role7
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role8
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Helpdesk
-    </div>
-  </div>,
-  <div style={{ display: "flex", alignItems: "center" }}>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopLeftRadius: "2px",
-        borderBottomLeftRadius: "2px",
-        backgroundColor: "#eeeeee",
-        color: "#363636",
-        padding: "10px",
-      }}
-      className="typography heading-s"
-    >
-      Role9
-    </div>
-    <div
-      style={{
-        border: "1px solid #d6d5d4",
-        borderTopRightRadius: "2px",
-        borderBottomRightRadius: "2px",
-        color: "#363636",
-        padding: "10px",
-        width: "100%",
-      }}
-      className="typography body-xs"
-    >
-      Complaint Resolver
-    </div>
-  </div>,
-];
-
-const 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
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-        Roles1
-      </div>
-      <Button
-        onClick={() => {
-          console.log("clicked");
-        }}
-        label={"Customize Roles"}
-        variation={"link"}
-        size={"medium"}
-      />
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role1
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role2
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Helpdesk
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role3
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint Resolver
-      </div>
-    </div>,
-  ],
-  [
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-        Roles2
-      </div>
-      <Button
-        onClick={() => {
-          console.log("clicked");
-        }}
-        label={"Customize Roles"}
-        variation={"link"}
-        size={"medium"}
-      />
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role1
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role2
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Helpdesk
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role3
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint Resolver
-      </div>
-    </div>,
-  ],
-  [
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <div className="typography heading-m" style={{ color: "#0B4B66" }}>
-        Roles3
-      </div>
-      <Button
-        onClick={() => {
-          console.log("clicked");
-        }}
-        label={"Customize Roles"}
-        variation={"link"}
-        size={"medium"}
-      />
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role1
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role2
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Helpdesk
-      </div>
-    </div>,
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopLeftRadius: "2px",
-          borderBottomLeftRadius: "2px",
-          backgroundColor: "#eeeeee",
-          color: "#363636",
-          padding: "10px",
-        }}
-        className="typography heading-s"
-      >
-        Role3
-      </div>
-      <div
-        style={{
-          border: "1px solid #d6d5d4",
-          borderTopRightRadius: "2px",
-          borderBottomRightRadius: "2px",
-          color: "#363636",
-          padding: "10px",
-          width: "100%",
-        }}
-        className="typography body-xs"
-      >
-        Complaint Resolver
-      </div>
-    </div>,
-  ],
-];
-
-const header = [
-  <div className="typography heading-l" style={{ color: "#0B4B66" }}>
-    Header
-  </div>,
-];
-
-const footer = [
-  <Button
-    onClick={() => {
-      console.log("clicked");
-    }}
-    size={"medium"}
-    style={{ width: "100%" }}
-    label={"Customize Sandbox"}
-    icon={"Edit"}
-    variation={"secondary"}
-  />,
-];
-
-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 Right = Template.bind({});
-Right.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-};
-
-export const RightWithoutBgActive = Template.bind({});
-RightWithoutBgActive.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  bgActive: false,
-};
-
-export const RightWithSections = Template.bind({});
-RightWithSections.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  header: header,
-  footer: footer,
-  sections: sections,
-};
-
-export const RightWithSectionsAndWithoutBgActive = Template.bind({});
-RightWithSectionsAndWithoutBgActive.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  header: header,
-  footer: footer,
-  sections: sections,
-  bgActive: false,
-};
-
-export const RightWithClose = Template.bind({});
-RightWithClose.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  addClose:true,
-  closedContents:closedContents
-};
-
-export const RightWithSectionsAndClose = Template.bind({});
-RightWithSectionsAndClose.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  header: header,
-  footer: footer,
-  sections: sections,
-  closedSections:closedSections,
-  addClose:true,
-  closedHeader:closedHeader
-};
-
-export const RightWithCustomWidth = Template.bind({});
-RightWithCustomWidth.args = {
-  ...commonArgs,
-  type: "static",
-  position: "right",
-  children: children,
-  header: header,
-  footer: footer,
-  defaultOpenWidth: 600,
-};
-
-export const Left = Template.bind({});
-Left.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-};
-
-export const LeftWithoutBgActive = Template.bind({});
-LeftWithoutBgActive.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  bgActive: false,
-};
-
-export const StaticLeftWithSections = Template.bind({});
-StaticLeftWithSections.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  header: header,
-  footer: footer,
-  sections: sections,
-};
-
-export const LeftWithSectionsWithoutBgActive = Template.bind({});
-LeftWithSectionsWithoutBgActive.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  header: header,
-  footer: footer,
-  sections: sections,
-  bgActive: false,
-};
-
-export const LeftWithClose = Template.bind({});
-LeftWithClose.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  addClose:true,
-  closedContents:closedContents,
-  closedHeader:closedHeader
-};
-
-export const LeftWithSectionsAndClose = Template.bind({});
-LeftWithSectionsAndClose.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  header: header,
-  footer: footer,
-  sections: sections,
-  closedSections:closedSections,
-  addClose:true,
-  closedHeader:closedHeader
-};
-
-export const LeftWithCustomWidth = Template.bind({});
-LeftWithCustomWidth.args = {
-  ...commonArgs,
-  type: "static",
-  position: "left",
-  children: children,
-  header: header,
-  footer: footer,
-  defaultOpenWidth: 600,
-};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/SuccessPanel.stories.js b/react/ui-components/src/atoms/stories/SuccessPanel.stories.js
index 77ac4f1e89a..6e8165504bc 100644
--- a/react/ui-components/src/atoms/stories/SuccessPanel.stories.js
+++ b/react/ui-components/src/atoms/stories/SuccessPanel.stories.js
@@ -5,60 +5,79 @@ export default {
   title: "Atoms/Panels/Success",
   component: Panels,
   argTypes: {
-    type: { control: "select", options: ["success", "error"] },
+    type: {
+      control: "select",
+      options: ["success", "error"],
+      table: { disable: true },
+    },
     className: {
       control: "text",
+      table: { disable: true },
     },
     message: {
       control: "text",
+      table: { disable: true },
     },
     info: {
       control: "text",
+      table: { disable: true },
     },
     response: {
       control: "text",
+      table: { disable: true },
     },
     customIcon: {
-        control: "text",
-      },
-      iconFill: {
-        control: "text",
-      },
+      control: "text",
+      table: { disable: true },
+    },
+    iconFill: {
+      control: "text",
+      table: { disable: true },
+    },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     multipleResponses: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
     },
-    showAsSvg:{
-      control:"boolean"
+    showAsSvg: {
+      control: "boolean",
+      name: "With Animation",
+      mapping: {
+        true: false,
+        false: true,
+      },
+    },
+    animationProps: {
+      control: { type: "object" },
+      table: { disable: true },
     },
-    animationProps:{
-      control: {type :"object"}
-    }
   },
 };
 
-const Template = (args) => <Panels {...args} />;
-
+const Template = (args) => {
+  return <Panels {...args} />;
+};
 const commonArgs = {
   className: "",
   message: "Message",
   type: "success",
-  info: "Ref ID ",
+  info: "Description",
   response: "949749795479",
-  customIcon:"",
-  iconFill:"",
+  customIcon: "",
+  iconFill: "",
   style: {},
-  showAsSvg:false,
-  multipleResponses:[],
-  animationProps:{
-    noAutoplay:false,
-    loop :false
-  }
+  showAsSvg: true,
+  multipleResponses: [],
+  animationProps: {
+    noAutoplay: false,
+    loop: false,
+  },
 };
 
 export const Basic = Template.bind({});
@@ -73,20 +92,12 @@ WithAnimationProperties.args = {
   ...commonArgs,
   type: "success",
   message: "Success Message!",
-  animationProps:{
+  animationProps: {
     ...commonArgs.animationProps,
-    loop :true,
-    width:100,
-    height:100
-  }
-};
-
-export const WithoutAnimation = Template.bind({});
-WithoutAnimation.args = {
-  ...commonArgs,
-  type: "success",
-  message: "Success Message!",
-  showAsSvg:true
+    loop: true,
+    width: 100,
+    height: 100,
+  },
 };
 
 export const WithMultipleResponses = Template.bind({});
@@ -94,5 +105,5 @@ WithMultipleResponses.args = {
   ...commonArgs,
   type: "success",
   message: "Success Message!",
-  multipleResponses:["949749795469","949749795579","949749795499"]
+  multipleResponses: ["949749795469", "949749795579", "949749795499"],
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Switch.stories.js b/react/ui-components/src/atoms/stories/Switch.stories.js
index af953580e3c..75a042bbc52 100644
--- a/react/ui-components/src/atoms/stories/Switch.stories.js
+++ b/react/ui-components/src/atoms/stories/Switch.stories.js
@@ -6,18 +6,42 @@ export default {
   title: "Atoms/Switch",
   component: Switch,
   argTypes: {
-    isLabelFirst: { control: "boolean" },
-    label: { control: "text" },
-    shapeOnOff: { control: "boolean" },
-    isCheckedInitially: { control: "boolean" },
-    onToggle: { action: "onToggle" },
-    className: { control: "text" },
-    style: { control: "object" },
-    disable: { control: "boolean" },
+    isLabelFirst: {
+      control: "select",
+      name: "Label Alignment",
+      options: ["Left", "Right"],
+      mapping: {
+        Left: true,
+        Right: false,
+      },
+    },
+    label: {
+      control: "boolean",
+      name: "Label",
+      mapping: {
+        true: "Label",
+        false: "",
+      },
+    },
+    shapeOnOff: { control: "boolean", table: { disable: true } },
+    isCheckedInitially: { control: "boolean", table: { disable: true } },
+    onToggle: { action: "onToggle", table: { disable: true } },
+    className: { control: "text", table: { disable: true } },
+    style: { control: "object", table: { disable: true } },
+    switchStyle: { control: "object", table: { disable: true } },
+    disable: {
+      control: "select",
+      name: "State",
+      options: ["Default", "Disabled"],
+    },
   },
 };
 
-const Template = (args) => <Switch {...args} />;
+const Template = (args) => {
+  const {disable,...rest} = args;
+
+  return <Switch {...rest} disable={disable === "Disabled"} />;
+};
 
 export const Documentation = () => (
   <Iframe
@@ -29,86 +53,29 @@ export const Documentation = () => (
 
 Documentation.storyName = "Docs";
 
-export const Default = Template.bind({});
-Default.args = {
-  label: "",
-  isLabelFirst: false,
+const commonArgs = {
+  isLabelFirst: "Right",
   shapeOnOff: false,
+  label: false,
   isCheckedInitially: false,
+  disable:"Default"
 };
 
-export const LabelOnRight = Template.bind({});
-LabelOnRight.args = {
-  label: "Toggle me",
-  isLabelFirst: false,
-  shapeOnOff: false,
-  isCheckedInitially: false,
-};
-
-export const LabelOnLeft = Template.bind({});
-LabelOnLeft.args = {
-  label: "Toggle me",
-  isLabelFirst: true,
-  shapeOnOff: false,
-  isCheckedInitially: false,
+export const Basic = Template.bind({});
+Basic.args = {
+  ...commonArgs,
 };
 
-export const OffShape = Template.bind({});
-OffShape.args = {
-  label: "Off Shape",
-  isLabelFirst: false,
+export const WithSymbol = Template.bind({});
+WithSymbol.args = {
+  ...commonArgs,
   shapeOnOff: true,
-  isCheckedInitially: false,
 };
 
-export const Checked = Template.bind({});
-Checked.args = {
-  label: "",
-  isLabelFirst: false,
-  shapeOnOff: false,
-  isCheckedInitially: true,
-};
-
-export const CheckedLabelOnRight = Template.bind({});
-CheckedLabelOnRight.args = {
-  label: "Toggle me",
-  isLabelFirst: false,
-  shapeOnOff: false,
-  isCheckedInitially: true,
-};
-
-export const CheckedLabelOnLeft = Template.bind({});
-CheckedLabelOnLeft.args = {
-  label: "Toggle me",
-  isLabelFirst: true,
-  shapeOnOff: false,
-  isCheckedInitially: true,
-};
-
-export const OnShape = Template.bind({});
-OnShape.args = {
-  label: "On Shape",
-  isLabelFirst: false,
-  shapeOnOff: true,
-  isCheckedInitially: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: "Disabled",
-  isLabelFirst: false,
-  shapeOnOff: false,
-  isCheckedInitially: false,
-  disable: true,
-};
-
-export const onToggleLogic = Template.bind({});
-onToggleLogic.args = {
-  label: "",
-  isLabelFirst: false,
-  shapeOnOff: false,
-  isCheckedInitially: false,
-  onToggle: (e) => {
-    console.log(e, "event");
+export const Custom = Template.bind({});
+Custom.args = {
+  ...commonArgs,
+  switchStyle: {
+    backgroundColor: "green",
   },
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Tab.stories.js b/react/ui-components/src/atoms/stories/Tab.stories.js
index ad8c070823c..282ff080f26 100644
--- a/react/ui-components/src/atoms/stories/Tab.stories.js
+++ b/react/ui-components/src/atoms/stories/Tab.stories.js
@@ -6,26 +6,74 @@ export default {
   title: "Atoms/Tab",
   component: Tab,
   argTypes: {
-    configNavItems: { control: "object" },
-    activeLink: { control: "text" },
-    configItemKey: { control: "text" },
-    setActiveLink: { action: "setActiveLink" },
-    showNav: { control: "boolean" },
-    style: { control: "object" },
-    className: { control: "text" },
-    inFormComposer: { control: "boolean" },
-    navClassName: { control: "text" },
-    navStyles: { control: "object" },
-    itemStyle: { control: "object" },
-    onTabClick: { action: "onChange" },
+    configNavItems: { control: "object", table: { disable: true } },
+    activeLink: { control: "text", table: { disable: true } },
+    configItemKey: { control: "text", table: { disable: true } },
+    setActiveLink: { action: "setActiveLink", table: { disable: true } },
+    showNav: { control: "boolean", table: { disable: true } },
+    style: { control: "object", table: { disable: true } },
+    className: { control: "text", table: { disable: true } },
+    inFormComposer: { control: "boolean", table: { disable: true } },
+    navClassName: { control: "text", table: { disable: true } },
+    navStyles: { control: "object", table: { disable: true } },
+    itemStyle: { control: "object", table: { disable: true } },
+    items: { table: { disable: true } },
+    onTabClick: { action: "onChange", table: { disable: true } },
+    WithIcons: { control: "boolean" },
+    Tab1Label: { control: "text", name: "Tab 1 Label" },
+    Tab2Label: { control: "text", name: "Tab 2 Label" },
+    Tab3Label: { control: "text", name: "Tab 3 Label" },
+    Tab4Label: { control: "text", name: "Tab 4 Label" },
   },
 };
 
+const commonStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  color: "#363636",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
+};
+
+const exampleItems = [
+  { name: "Tab 1", code: "Tab 1" },
+  { name: "Tab 2", code: "Tab 2" },
+  { name: "Tab 3", code: "Tab 3" },
+  { name: "Tab 4", code: "Tab 4" },
+];
+
+const exampleItemsWithIcons = [
+  { name: "Tab 1", code: "Tab 1", icon: "Home" },
+  { name: "Tab 2", code: "Tab 2", icon: "MyLocation" },
+  { name: "Tab 3", code: "Tab 3", icon: "Article" },
+  { name: "Tab 4", code: "Tab 4", icon: "AccountCircle" },
+];
+
 const Template = (args) => {
+  const { WithIcons, ...rest } = args;
   const [activeLink, setActiveLink] = useState(args.activeLink);
 
+  // Dynamic configNavItems update
+  const configNavItems = WithIcons
+    ? [...exampleItemsWithIcons]
+    : [...exampleItems];
+  configNavItems[0].code = args.Tab1Label && args.Tab1Label !=="" ?  args.Tab1Label : configNavItems[0].code;
+  configNavItems[1].code = args.Tab2Label && args.Tab2Label!=="" ?  args.Tab2Label : configNavItems[1].code;
+  configNavItems[2].code = args.Tab3Label && args.Tab3Label!=="" ?  args.Tab3Label : configNavItems[2].code;
+  configNavItems[3].code = args.Tab4Label && args.Tab4Label!=="" ?  args.Tab4Label : configNavItems[3].code;
+
   return (
-    <Tab {...args} activeLink={activeLink} setActiveLink={setActiveLink} />
+    <div style={commonStyles}>
+      <Tab
+        {...rest}
+        configNavItems={configNavItems}
+        activeLink={activeLink}
+        setActiveLink={setActiveLink}
+      />
+    </div>
   );
 };
 
@@ -39,15 +87,7 @@ export const Documentation = () => (
 
 Documentation.storyName = "Docs";
 
-// Default Tab
-export const Default = Template.bind({});
-Default.args = {
-  configNavItems: [
-    { name: "Tab 1", code: "Tab 1" },
-    { name: "Tab 2", code: "Tab 2" },
-    { name: "Tab 3", code: "Tab 3" },
-    { name: "Tab 4", code: "Tab 4" },
-  ],
+const commonArgs = {
   activeLink: "Tab 2",
   showNav: true,
   style: {},
@@ -55,88 +95,25 @@ Default.args = {
   navClassName: "",
   configItemKey: "code",
   navStyles: {},
-  onTagClick: (item) => {
+  onTabClick: (item) => {
     console.log(item);
   },
   itemStyle: {},
+  WithIcons: false,
+  Tab1Label: "",
+  Tab2Label: "",
+  Tab3Label: "",
+  Tab4Label: "",
 };
 
-export const WithConfigItemKey = Template.bind({});
-WithConfigItemKey.args = {
-  configNavItems: [
-    { name: "Tab one", code: "1" },
-    { name: "Tab two", code: "2" },
-    { name: "Tab three", code: "3" },
-    { name: "Tab four", code: "4" },
-  ],
-  activeLink: "Tab one",
-  showNav: true,
-  style: {},
-  className: "",
-  navClassName: "",
-  configItemKey: "name",
-  navStyles: {},
-  itemStyle: {},
-};
-
-export const DifferentLabels = Template.bind({});
-DifferentLabels.args = {
-  configNavItems: [
-    { name: "home", code: "H" },
-    { name: "about", code: "About" },
-    { name: "services", code: "Ss" },
-    { name: "contact", code: "Con" },
-  ],
-  activeLink: "H",
-  showNav: true,
-  style: {},
-  className: "",
-  navClassName: "",
-  configItemKey: "code",
-  navStyles: {},
-  itemStyle: {},
+export const Basic = Template.bind({});
+Basic.args = {
+  ...commonArgs,
 };
 
-// Tab with custom styles
-export const CustomStyledNav = Template.bind({});
-CustomStyledNav.args = {
-  ...Default.args,
+export const Custom = Template.bind({});
+Custom.args = {
+  ...Basic.args,
   style: { backgroundColor: "#FFFFFF" },
   itemStyle: { backgroundColor: "#FAFAFA", border: "1px solid black" },
 };
-
-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  configNavItems: [
-    { name: "Tab 1", code: "Tab 1", icon: "Home" },
-    { name: "Tab 2", code: "Tab 2", icon: "MyLocation" },
-    { name: "Tab 3", code: "Tab 3", icon: "Article" },
-    { name: "Tab 4", code: "Tab 4", icon: "AccountCircle" },
-  ],
-  activeLink: "Tab 2",
-  showNav: true,
-  style: {},
-  className: "",
-  navClassName: "",
-  configItemKey: "code",
-  navStyles: {},
-  itemStyle: {},
-};
-
-export const WithLargeLabel = Template.bind({});
-WithLargeLabel.args = {
-  configNavItems: [
-    { name: "Tab 1", code: "Tab with the large label given as the name" },
-    { name: "Tab 2", code: "Tab 2" },
-    { name: "Tab 3", code: "Tab 3" },
-    { name: "Tab 4", code: "Tab 4" },
-  ],
-  activeLink: "Tab 2",
-  showNav: true,
-  style: {},
-  className: "",
-  navClassName: "",
-  configItemKey: "code",
-  navStyles: {},
-  itemStyle: {},
-};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/Tag.stories.js b/react/ui-components/src/atoms/stories/Tag.stories.js
index 3b6d2058ca1..cdd52c662c1 100644
--- a/react/ui-components/src/atoms/stories/Tag.stories.js
+++ b/react/ui-components/src/atoms/stories/Tag.stories.js
@@ -8,49 +8,98 @@ export default {
   argTypes: {
     className: {
       control: "text",
+      table: { disable: true },
     },
     iconClassName: {
       control: "text",
+      table: { disable: true },
     },
     label: {
       control: "text",
+      name: "Label",
     },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     labelStyle: {
       control: { type: "object" },
+      table: { disable: true },
     },
     stroke: {
-      control: "boolean",
+      control: "check",
+      name: "Stroke",
+      options: ["Enable"],
     },
     type: {
       control: "select",
       options: ["monochrome", "success", "warning", "error"],
+      table: { disable: true },
     },
     alignment: {
       control: "select",
       options: ["center", "left", "right"],
+      table: { disable: true },
     },
     icon: {
       control: "text",
+      table: { disable: true },
     },
     showIcon: {
-      control: "boolean",
+      control: "check",
+      name: "Icon",
+      options: ["Enable"],
+    },
+    iconColor: {
+      table: { disable: true },
+    },
+    onClick: {
+      control: "check",
+      name: "Clickable",
+      options: ["Enable"],
     },
   },
 };
 
-const Template = (args) => <Tag {...args} />;
+const commonStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  color: "#363636",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+  const { stroke, showIcon, onClick, ...rest } = args;
+  return (
+    <div style={commonStyles}>
+      <Tag
+        {...rest}
+        stroke={stroke?.length > 0 ? true : false}
+        showIcon={showIcon?.length > 0 ? true : false}
+        onClick={
+          onClick?.length > 0
+            ? (e) => {
+                console.log(e);
+              }
+            : undefined
+        }
+      />
+    </div>
+  );
+};
 
 const commonArgs = {
   label: "Tag",
   className: "",
   style: {},
-  stroke: false,
-  type: "success",
+  stroke: "",
+  type: "monochrome",
   icon: "",
-  showIcon: false,
+  showIcon: "",
   labelStyle: {},
 };
 
@@ -64,68 +113,36 @@ export const Documentation = () => (
 
 Documentation.storyName = "Docs";
 
-export const Default = Template.bind({});
-Default.args = {
+export const Basic = Template.bind({});
+Basic.args = {
   ...commonArgs,
+  type: "monochrome",
 };
 
-export const WithIcon = Template.bind({});
-WithIcon.args = {
+export const Success = Template.bind({});
+Success.args = {
   ...commonArgs,
-  label: "Tag With Icon",
-  showIcon: true,
-};
-
-export const WithStroke = Template.bind({});
-WithStroke.args = {
-  ...commonArgs,
-  label: "Tag With Stroke",
-  stroke: true,
-};
-
-export const WithIconAndStroke = Template.bind({});
-WithIconAndStroke.args = {
-  ...commonArgs,
-  label: "Tag With icon & stroke",
-  stroke: true,
-  showIcon: true,
+  type: "success",
 };
 
-export const WithCustomIconAndStyles = Template.bind({});
-WithCustomIconAndStyles.args = {
+export const Error = Template.bind({});
+Error.args = {
   ...commonArgs,
-  label: "Tag With custom icons & colors",
-  stroke: true,
-  showIcon: true,
-  icon: "MyLocation",
-  style: {
-    backgroundColor: "#FCF2E4",
-  },
-  labelStyle: {
-    color: "#0B4B66",
-  },
+  type: "error",
 };
-
-export const WithOnClick = Template.bind({});
-WithOnClick.args = {
+export const Warning = Template.bind({});
+Warning.args = {
   ...commonArgs,
-  label: "Tag With OnClick Function",
-  onClick: () => {
-    console.log("clicked");
-  },
+  type: "warning",
 };
-
-export const WithAlignment = Template.bind({});
-WithAlignment.args = {
+export const Custom = Template.bind({});
+Custom.args = {
   ...commonArgs,
-  label: "Tag With custom icons & colors",
-  stroke: true,
-  showIcon: true,
-  icon: "MyLocation",
   style: {
     width: "600px",
   },
   labelStyle: {
     color: "#0B4B66",
   },
+  icon: "ArrowLeft",
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/TeritiaryButton.stories.js b/react/ui-components/src/atoms/stories/TeritiaryButton.stories.js
index 2b09517b669..c43bf2824c0 100644
--- a/react/ui-components/src/atoms/stories/TeritiaryButton.stories.js
+++ b/react/ui-components/src/atoms/stories/TeritiaryButton.stories.js
@@ -5,46 +5,84 @@ export default {
   title: "Atoms/Button/Teritiary",
   component: Button,
   argTypes: {
-    isDisabled: {
-      control: "boolean",
-    },
     label: {
       control: "text",
     },
     variation: {
       control: "select",
       options: ["primary", "secondary", "teritiary", "link"],
+      table: { disable: true },
     },
     size: { control: "select", options: ["large", "medium", "small"] },
     className: {
       control: "text",
+      table: { disable: true },
     },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     onClick: {
       control: "function",
-    },
-    isSuffix: {
-      control: "boolean",
+      table: { disable: true },
     },
     title: {
       control: "text",
+      table: { disable: true },
+    },
+    isSearchable: {
+      control: "boolean"
+    },
+    showBottom: {
+      control: "select",
+      options: ["DropUp", "DropDown"],
+      name: "ActionButton",
+      mapping: {
+        DropUp: false,
+        DropDown: true,
+      },
+    },
+    optionsKey: {
+      control: "text",
+      table: { disable: true },
     },
     options: {
       control: {
         type: "array",
         separator: ",",
       },
+      table: { disable: true },
     },
-    isSearchable: {
-      control: "boolean",
+    isDisabled: {
+      control: "select",
+      options: ["Default", "Disabled"],
+      name: "state",
+      mapping: {
+        Default: false,
+        Disabled: true,
+      },
     },
-    showBottom: {
+    textStyles: { table: { disable: true } },
+    iconFill: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    onOptionSelect: { table: { disable: true } },
+    type: { table: { disable: true } },
+    WithIcon: {
       control: "boolean",
     },
-    optionsKey: {
-      control: "text",
+    isSuffix: {
+      control: "select",
+      options: ["Prefix", "Suffix"],
+      name: "Icon",
+      mapping: {
+        Prefix: false,
+        Suffix: true,
+      },
+      if: { arg: "WithIcon", truthy: true}, 
+    },
+    Width: {
+      control: "select",
+      options: ["Hug Content", "Justify"],
     },
   },
 };
@@ -60,26 +98,48 @@ const commonStyles = {
   transform: "translate(-50%, -50%)",
 };
 
-const Template = (args) => (
-  <div style={commonStyles}>
-    <Button {...args} />
-  </div>
-);
+const Template = (args) => {
+  const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+  const widthStyles =
+    Width === "Hug Content"
+      ? { width: "auto", whiteSpace: "nowrap" }
+      : { width: "100%" };
+
+  return (
+    <div
+      style={{ ...commonStyles, width: Width === "Justify" ? "100%" : "auto" }}
+    >
+      <Button
+        {...restArgs}
+        style={{ ...restArgs.style, ...widthStyles }}
+        icon={WithIcon ? (isSuffix ? "ArrowForward" : "ArrowBack") : ""}
+        isSuffix={WithIcon && isSuffix}
+        menuStyles={!args.showBottom ? { bottom: "40px" } : undefined}
+      />
+    </div>
+  );
+};
 
 const commonArgs = {
   label: "Button",
   className: "custom-class",
   style: {},
-  onClick: () => {console.log("clicked"); } ,
-  isDisabled: false,
+  onClick: () => {
+    console.log("clicked");
+  },
+  isDisabled: "Default",
   variation: "",
-  isSuffix: false,
-  size: "",
-  title:"",
-  iconFill:"",
-  options:[],
-  optionsKey:"",
-  isSearchable:false
+  size: "large",
+  title: "",
+  iconFill: "",
+  options: [],
+  optionsKey: "",
+  WithIcon: false,
+  isSuffix: "Prefix",
+  isSearchable: false,
+  showBottom:"DropDown",
+  Width:"Hug Content"
 };
 
 // Button with Teritiary variantion
@@ -89,35 +149,20 @@ Teritiary.args = {
   variation: "teritiary",
 };
 
-// Button with Teritiary variantion and with icon
-export const TeritiaryWithIcon = Template.bind({});
-TeritiaryWithIcon.args = {
-  ...commonArgs,
-  variation: "teritiary",
-  icon: "MyLocation",
-};
-
-// Button with Teritiary variantion and with icon as a suffix
-export const TeritiaryWithSuffixIcon = Template.bind({});
-TeritiaryWithSuffixIcon.args = {
-  ...commonArgs,
-  variation: "teritiary",
-  icon: "ArrowForward",
-  isSuffix: true,
-};
-
-// Button with Teritiary variantion and disabled
-export const TeritiaryDisabled = Template.bind({});
-TeritiaryDisabled.args = {
+export const ActionButton = Template.bind({});
+ActionButton.args = {
   ...commonArgs,
+  label: "ActionButton",
   variation: "teritiary",
-  isDisabled: true,
-};
-
-// Button with Teritiary variation and label with maxchars
-export const TeritiaryLabelWithMaxLength = Template.bind({});
-TeritiaryLabelWithMaxLength.args = {
-  ...commonArgs,
-  variation: "teritiary",
-  label: "qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopas",
+  type: "actionButton",
+  optionsKey: "name",
+  isSearchable: true,
+  options: [
+    { name: "Action A", code: "Actiona" },
+    { name: "Action B", code: "Actionb" },
+    { name: "Action C", code: "Actionc" },
+  ],
+  onOptionSelect: (e) => {
+    console.log(e, "option selected");
+  },
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/TextBlock.stories.js b/react/ui-components/src/atoms/stories/TextBlock.stories.js
index edcec01bc33..eee5217189d 100644
--- a/react/ui-components/src/atoms/stories/TextBlock.stories.js
+++ b/react/ui-components/src/atoms/stories/TextBlock.stories.js
@@ -5,6 +5,24 @@ import Iframe from "../Iframe";
 export default {
   title: "Atoms/TextBlock",
   component: TextBlock,
+  headerContentClassName: {
+    table: { disable: true },
+  },
+  headerClassName: {
+    table: { disable: true },
+  },
+  captionClassName: {
+    table: { disable: true },
+  },
+  subHeaderClassName: {
+    table: { disable: true },
+  },
+  bodyClassName: {
+    table: { disable: true },
+  },
+  wrapperClassName: {
+    table: { disable: true },
+  },
 };
 
 const Template = (args) => <TextBlock {...args} />;
@@ -19,16 +37,25 @@ export const Documentation = () => (
 
 Documentation.storyName = "Docs";
 
-export const Default = Template.bind({});
-Default.args = {
-  headerContentClassName: "",
+const commonArgs = {
+  // headerContentClassName: "",
   caption: "Caption",
-  captionClassName: "",
+  // captionClassName: "",
   header: "Heading",
-  headerClassName: "",
+  // headerClassName: "",
   subHeader: "Subheading",
-  subHeaderClassName: "",
+  // subHeaderClassName: "",
   body:
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-  bodyClassName: "",
-};
\ No newline at end of file
+  // bodyClassName: "",
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+  ...commonArgs,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+  ...commonArgs,
+};
diff --git a/react/ui-components/src/atoms/stories/Toggle.stories.js b/react/ui-components/src/atoms/stories/Toggle.stories.js
index f3a76146bbb..815677c49a4 100644
--- a/react/ui-components/src/atoms/stories/Toggle.stories.js
+++ b/react/ui-components/src/atoms/stories/Toggle.stories.js
@@ -78,7 +78,7 @@ export const Documentation = () => (
 Documentation.storyName = "Docs";
 
 //Default Toggle
-export const Default = Template.bind({});
-Default.args = {
+export const Basic = Template.bind({});
+Basic.args = {
   ...commonArgs,
 };
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/UnCheckedCheckBox.stories.js b/react/ui-components/src/atoms/stories/UnCheckedCheckBox.stories.js
deleted file mode 100644
index 693525ab2b3..00000000000
--- a/react/ui-components/src/atoms/stories/UnCheckedCheckBox.stories.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from "react";
-import FieldV1 from "../../hoc/FieldV1";
-import CheckBox from "../CheckBox";
-
-export default {
-  title: "Atoms/CheckBox/Unchecked",
-  component: CheckBox,
-  argTypes: {
-    config: { control: "object" },
-    inputRef: { control: false },
-    onChange: { action: "onChange" },
-    errorStyle: { control: "object" },
-    disabled: { control: "boolean" },
-    type: { control: "text" },
-    props: { control: "object" },
-    populators: { control: "object" },
-    formData: { control: "object" },
-    isIntermediate:{control:"boolean"}
-  },
-};
-
-const Template = (args) => <FieldV1 {...args} />;
-
-const t = (key) => key;
-
-const commonArgs = {
-  t: t,
-  populators: {
-    title: "Value",
-    name: "checked",
-    isLabelFirst:false,
-    isIntermediate:false
-  },
-  formData: {
-    checked: true,
-  },
-  inputRef: null,
-  onChange: () => {},
-  errorStyle: null,
-  disabled: false,
-  type: "checkbox",
-};
-
-//Default checkbox
-export const Basic = Template.bind({});
-Basic.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox with label
-export const Labelled = Template.bind({});
-Labelled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox with paragrah as a label
-export const LongLabelled = Template.bind({});
-LongLabelled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title:
-      "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead.",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-
-//checkbox with label before
-export const LabelFirst = Template.bind({});
-LabelFirst.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-    isLabelFirst:true
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox with label before
-export const LongLabelFirst = Template.bind({});
-LongLabelFirst.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    isLabelFirst:true,
-    title:
-      "In the quiet glow of dawn, the city stirred to life. A gentle breeze carried whispers of possibility through the streets, as if the day itself held secrets waiting to unfold. Birds painted ribbons of melody across the sky, joining the symphony of a waking world. The first rays of sunlight tiptoed over the horizon, casting a warm, golden hue on the buildings and trees below. In this tranquil moment, the promise of a new day hung in the air, inviting everyone to embrace the journey ahead.",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-};
-
-//checkbox disabled
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...commonArgs,
-  populators: {
-    ...commonArgs.populators,
-    title: "Value",
-  },
-  formData: {
-    ...commonArgs.formData,
-    checked: false,
-  },
-  disabled: true,
-};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/UploaderDocs.stories.js b/react/ui-components/src/atoms/stories/UploaderDocs.stories.js
index 2347addef8c..4de53d1aef8 100644
--- a/react/ui-components/src/atoms/stories/UploaderDocs.stories.js
+++ b/react/ui-components/src/atoms/stories/UploaderDocs.stories.js
@@ -1,10 +1,10 @@
 import React from "react";
-import Uploader from "../Uploader";
+import FileUpload from "../FileUpload";
 import Iframe from "../Iframe";
 
 export default {
-  title: "Atoms/Uploader",
-  component: Uploader,
+  title: "Atoms/FileUpload",
+  component: FileUpload,
   argTypes: {
     uploadedFiles: {
       control: {
@@ -14,7 +14,7 @@ export default {
     variant: {
       control: {
         type: "select",
-        options: ["uploadFile", "uploadPopup", "uploadImage"],
+        options: ["uploadField", "uploadWidget", "uploadImage"],
       },
     },
     showLabel: {
@@ -93,7 +93,7 @@ export const Documentation = () => (
   <Iframe
     //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="Uploader Documentation"
+    title="FileUpload Documentation"
   />
 );
 
diff --git a/react/ui-components/src/atoms/stories/UploadeFile.stories.js b/react/ui-components/src/atoms/stories/UploaderField.stories.js
similarity index 60%
rename from react/ui-components/src/atoms/stories/UploadeFile.stories.js
rename to react/ui-components/src/atoms/stories/UploaderField.stories.js
index ef5f25cb103..03f43f1ee2e 100644
--- a/react/ui-components/src/atoms/stories/UploadeFile.stories.js
+++ b/react/ui-components/src/atoms/stories/UploaderField.stories.js
@@ -1,9 +1,9 @@
 import React from "react";
-import Uploader from "../Uploader";
+import FileUpload from "../FileUpload";
 
 export default {
-  title: "Atoms/Uploader/UploadFile",
-  component: Uploader,
+  title: "Atoms/FileUpload/Uploader Field",
+  component: FileUpload,
   argTypes: {
     uploadedFiles: {
       control: {
@@ -13,7 +13,7 @@ export default {
     variant: {
       control: {
         type: "select",
-        options: ["uploadFile", "uploadPopup", "uploadImage"],
+        options: ["uploadField", "uploadWidget", "uploadImage"],
       },
     },
     showLabel: {
@@ -88,26 +88,26 @@ export default {
   },
 };
 
-const Template = (args) => <Uploader {...args} />;
+const Template = (args) => <FileUpload {...args} />;
 
 export const UploadFile = Template.bind({});
 UploadFile.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
 };
 
 export const UploadFileWithTags = Template.bind({});
 UploadFileWithTags.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   showAsTags: true,
   multiple: true,
 };
 
-export const UploadFileWithTagsAndOnUploadLogic = Template.bind({});
-UploadFileWithTagsAndOnUploadLogic.args = {
+export const WithTagsAndOnUploadLogic = Template.bind({});
+WithTagsAndOnUploadLogic.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   showAsTags: true,
   multiple: true,
   onUpload: (uploadedFiles) => {
@@ -118,10 +118,10 @@ UploadFileWithTagsAndOnUploadLogic.args = {
   },
 };
 
-export const UploadFileWithTagsValidations = Template.bind({});
-UploadFileWithTagsValidations.args = {
+export const WithTagsValidations = Template.bind({});
+WithTagsValidations.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   multiple: true,
   showAsTags: true,
   validations: {
@@ -130,18 +130,18 @@ UploadFileWithTagsValidations.args = {
   },
 };
 
-export const UploadFileWithPreview = Template.bind({});
-UploadFileWithPreview.args = {
+export const WithPreview = Template.bind({});
+WithPreview.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   showAsPreview: true,
   multiple: true,
 };
 
-export const UploadFileWithPreviewAndonUploadLogic = Template.bind({});
-UploadFileWithPreviewAndonUploadLogic.args = {
+export const WithPreviewAndOnUploadLogic = Template.bind({});
+WithPreviewAndOnUploadLogic.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   showAsPreview: true,
   multiple: true,
   onUpload: (uploadedFiles) => {
@@ -152,10 +152,10 @@ UploadFileWithPreviewAndonUploadLogic.args = {
   },
 };
 
-export const UploadFileWithPreviewValidations = Template.bind({});
-UploadFileWithPreviewValidations.args = {
+export const WithPreviewValidations = Template.bind({});
+WithPreviewValidations.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   showAsPreview: true,
   multiple: true,
   validations: {
@@ -164,35 +164,9 @@ UploadFileWithPreviewValidations.args = {
   },
 };
 
-
-
-export const UploadFileWithError = Template.bind({});
-UploadFileWithError.args = {
+export const WithError = Template.bind({});
+WithError.args = {
   uploadedFiles: [],
-  variant: "uploadFile",
+  variant: "uploadField",
   iserror: "Component Level Error!",
 };
-
-export const UploadImage = Template.bind({});
-UploadImage.args = {
-  uploadedFiles: [],
-  variant: "uploadImage",
-};
-
-export const UploadMultipleImages = Template.bind({});
-UploadMultipleImages.args = {
-  uploadedFiles: [],
-  variant: "uploadImage",
-  multiple: true,
-};
-
-export const UploadMultipleImagesWithValidations = Template.bind({});
-UploadMultipleImagesWithValidations.args = {
-  uploadedFiles: [],
-  variant: "uploadImage",
-  multiple: true,
-  validations: {
-    maxSizeAllowedInMB: 5,
-    minSizeRequiredInMB: 1,
-  },
-};
\ No newline at end of file
diff --git a/react/ui-components/src/atoms/stories/UploadPopup.stories.js b/react/ui-components/src/atoms/stories/UploaderWidget.stories.js
similarity index 87%
rename from react/ui-components/src/atoms/stories/UploadPopup.stories.js
rename to react/ui-components/src/atoms/stories/UploaderWidget.stories.js
index 6c679026e4b..dce9eb31542 100644
--- a/react/ui-components/src/atoms/stories/UploadPopup.stories.js
+++ b/react/ui-components/src/atoms/stories/UploaderWidget.stories.js
@@ -1,9 +1,9 @@
 import React from "react";
-import Uploader from "../Uploader";
+import FileUpload from "../FileUpload";
 
 export default {
-  title: "Atoms/Uploader/UploadPopup",
-  component: Uploader,
+  title: "Atoms/FileUpload/Uploader Widget",
+  component: FileUpload,
   argTypes: {
     uploadedFiles: {
       control: {
@@ -13,7 +13,7 @@ export default {
     variant: {
       control: {
         type: "select",
-        options: ["uploadFile", "uploadPopup", "uploadImage"],
+        options: ["uploadField", "uploadWidget", "uploadImage"],
       },
     },
     showLabel: {
@@ -88,13 +88,13 @@ export default {
   },
 };
 
-const Template = (args) => <Uploader {...args} />;
+const Template = (args) => <FileUpload {...args} />;
 
 
 export const Basic = Template.bind({});
 Basic.args = {
   uploadedFiles: [],
-  variant: "uploadPopup",
+  variant: "uploadWidget",
   showDownloadButton: true,
   showReUploadButton: true,
   multiple: false,
@@ -103,7 +103,7 @@ Basic.args = {
 export const WithValidations = Template.bind({});
 WithValidations.args = {
   uploadedFiles: [],
-  variant: "uploadPopup",
+  variant: "uploadWidget",
   multiple: true,
   validations: {
     maxSizeAllowedInMB: 5,
@@ -116,7 +116,7 @@ WithValidations.args = {
 export const WithValidationsWithErrorCard = Template.bind({});
 WithValidationsWithErrorCard.args = {
   uploadedFiles: [],
-  variant: "uploadPopup",
+  variant: "uploadWidget",
   multiple: true,
   validations: {
     maxSizeAllowedInMB: 5,
@@ -130,7 +130,7 @@ WithValidationsWithErrorCard.args = {
 export const WithError = Template.bind({});
 WithError.args = {
   uploadedFiles: [],
-  variant: "uploadPopup",
+  variant: "uploadWidget",
   showDownloadButton: true,
   showReUploadButton: true,
   multiple: false,
diff --git a/react/ui-components/src/hoc/FormComposerV2.js b/react/ui-components/src/hoc/FormComposerV2.js
index 2efedbd8848..ca4b22cdceb 100644
--- a/react/ui-components/src/hoc/FormComposerV2.js
+++ b/react/ui-components/src/hoc/FormComposerV2.js
@@ -9,7 +9,7 @@ import Card from "../atoms/Card";
 import Header from "../atoms/Header";
 import Button from "../atoms/Button";
 import ActionLinks from "../atoms/ActionLinks";
-import ActionBar from "../atoms/ActionBar";
+import Footer from "../atoms/Footer";
 import LabelFieldPair from "../atoms/LabelFieldPair";
 import ErrorMessage from "../atoms/ErrorMessage";
 import HorizontalNav from "../atoms/HorizontalNav";
@@ -410,10 +410,10 @@ export const FormComposer = (props) => {
         </HorizontalNav>
       )}
       {!props.submitInForm && props.label && (
-        <ActionBar>
+        <Footer>
           <SubmitBar label={t(props.label)} submit="submit" disabled={isDisabled} />
           {props.onSkip && props.showSkip && <ActionLinks style={props?.skipStyle} label={t(`CS_SKIP_CONTINUE`)} onClick={props.onSkip} />}
-        </ActionBar>
+        </Footer>
       )}
       {showErrorToast && <Toast type={"error"} label={t("ES_COMMON_PLEASE_ENTER_ALL_MANDATORY_FIELDS")} isDleteBtn={true} onClose={closeToast} />}
     </form>
diff --git a/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js b/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js
index c1b471dd072..d00a1386362 100644
--- a/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js
+++ b/react/ui-components/src/hoc/MobileView/MobileSearchComponent.js
@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { InboxContext } from "../InboxSearchComposerContext";
 import { CustomSVG } from "../../atoms/CustomSVG";
-import ActionBar from "../../atoms/ActionBar";
+import Footer from "../../atoms/Footer";
 import SubmitBar from "../../atoms/SubmitBar";
 import LinkLabel from "../../atoms/LinkLabel";
 import RenderFormFields from "../../molecules/RenderFormFields";
@@ -162,12 +162,12 @@ const renderHeader = () => {
               labelStyle={{fontSize: "16px"}}
               apiDetails={apiDetails}
             />  
-            <ActionBar className="clear-search-container">
+            <Footer className="clear-search-container">
               <div className={`search-button-wrapper ${screenType} ${uiConfig?.type}`}>
                 { uiConfig?.secondaryLabel && <LinkLabel style={{marginBottom: 0, whiteSpace: 'nowrap'}} onClick={clearSearch}>{t(uiConfig?.secondaryLabel)}</LinkLabel> }
                 { uiConfig?.primaryLabel && <SubmitBar label={t(uiConfig?.primaryLabel)} submit="submit" disabled={false}/> }
               </div>
-            </ActionBar>
+            </Footer>
           </div> 
         </form>
         { showToast && <Toast 
diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js
index f1670fe0bdb..725253c3cb1 100644
--- a/react/ui-components/src/index.js
+++ b/react/ui-components/src/index.js
@@ -1,13 +1,13 @@
 import {
   Accordion,
-  AccordionWrapper,
-  ActionBar,
+  AccordionList,
+  Footer,
   ActionLinks,
   Amount,
   AppContainer,
   BackLink,
-  Sidebar,
-  MobileSidebar,
+  SideNav,
+  MobileSideNav,
   Switch,
   Tooltip,
   Banner,
@@ -31,12 +31,12 @@ import {
   DisplayPhotos,
   Dropdown,
   ErrorMessage,
-  Footer,
+  HomeFooter,
   Header,
   HeaderBar,
   HorizontalNav,
   Tab,
-  InfoCard,
+  AlertCard,
   PageBasedInput,
   InputTextAmount,
   KeyNote,
@@ -47,7 +47,7 @@ import {
   MultiSelectDropdown,
   NoResultsFound,
   OTPInput,
-  SlideOverMenu,
+  SidePanel,
   Paragraph,
   PlusMinusInput,
   PopUp,
@@ -76,8 +76,8 @@ import {
   Timeline,
   StringManipulator,
   InfoButton,
-  Uploader,
-  UploadPopup,
+  FileUpload,
+  UploadWidget,
   UploadImage,
   ErrorBoundary,
   TextBlock,
@@ -89,7 +89,7 @@ import {
   TopBar,
   Hamburger,
   Menu,
-  SelectionCard,
+  SelectionTag,
   Tag,
   CustomSVG,
   TableMain,
@@ -141,16 +141,16 @@ initLibraries().then(() => {
 });
 
 export {
-  ActionBar,
+  Footer,
   ActionLinks,
   Amount,
   AppContainer,
   BackLink,
-  Sidebar,
-  MobileSidebar,
+  SideNav,
+  MobileSideNav,
   Accordion,
   Iframe,
-  AccordionWrapper,
+  AccordionList,
   Switch,
   Tooltip,
   Banner,
@@ -158,7 +158,7 @@ export {
   BreadCrumb,
   BreakLine,
   Button,
-  SelectionCard,
+  SelectionTag,
   Tag,
   Card,
   CardBasedOptions,
@@ -177,13 +177,13 @@ export {
   DisplayPhotos,
   Dropdown,
   ErrorMessage,
-  Footer,
+  HomeFooter,
   Header,
   HeaderBar,
   HorizontalNav,
   LoaderComponent,
   Tab,
-  InfoCard,
+  AlertCard,
   InputTextAmount,
   SearchField,
   KeyNote,
@@ -194,7 +194,7 @@ export {
   MultiSelectDropdown,
   NoResultsFound,
   OTPInput,
-  SlideOverMenu,
+  SidePanel,
   Paragraph,
   PlusMinusInput,
   PopUp,
@@ -253,8 +253,8 @@ export {
   Timeline,
   StringManipulator,
   InfoButton,
-  Uploader,
-  UploadPopup,
+  FileUpload,
+  UploadWidget,
   UploadImage,
   TextBlock,
   Panels,
diff --git a/react/ui-components/src/molecules/CustomDropdown.js b/react/ui-components/src/molecules/CustomDropdown.js
index 3747ad1ceee..93e079c6ef3 100644
--- a/react/ui-components/src/molecules/CustomDropdown.js
+++ b/react/ui-components/src/molecules/CustomDropdown.js
@@ -52,6 +52,7 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange,id, value, errorS
             additionalWrapperClass={additionalWrapperClass}
             innerStyles={config?.innerStyles}
             alignVertical={config?.alignVertical}
+            isLabelFirst={config?.isLabelFirst}
           />
         );
       case "dropdown":
@@ -86,6 +87,7 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange,id, value, errorS
             inputRef={inputRef}
             options={data || config?.options || []}
             key={config.name}
+            style={config?.style || {}}
             optionsKey={config?.optionsKey}
             value={value}
             id={id}
diff --git a/react/ui-components/src/molecules/DetailsCard.js b/react/ui-components/src/molecules/DetailsCard.js
index bfeace0c756..153a7bb95ae 100644
--- a/react/ui-components/src/molecules/DetailsCard.js
+++ b/react/ui-components/src/molecules/DetailsCard.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import CitizenInfoLabel from "../atoms/CitizenInfoLabel";
 import Button from "../atoms/Button";
-import ActionBar from "../atoms/ActionBar";
+import Footer from "../atoms/Footer";
 
 export const Details = ({ label, name, onClick }) => {
   return (
@@ -83,9 +83,9 @@ const DetailsCard = ({
               <CitizenInfoLabel className={"digit-core-variant"} info={t("ATM_INFO_LABEL")} text={t(`ATM_INFO_TEXT`)} fill={"#CC7B2F"} />
             ) : null}
             {showActionBar ? (
-              <ActionBar>
+              <Footer>
                 <Button onClick={() => handleDetailCardClick(object)} label={submitButtonLabel} />
-              </ActionBar>
+              </Footer>
             ) : null}
           </div>
         );
diff --git a/react/ui-components/src/molecules/PanelCard.js b/react/ui-components/src/molecules/PanelCard.js
index c4829fae7d6..12002340cd5 100644
--- a/react/ui-components/src/molecules/PanelCard.js
+++ b/react/ui-components/src/molecules/PanelCard.js
@@ -91,26 +91,33 @@ const PanelCard = (props) => {
           <Panels {...props}></Panels>
         </div>
       }
-      <div
-        ref={childrenWrapRef}
-        className={`digit-panelcard-children-wrap ${
-          props?.showChildrenInline ? "inline" : ""
-        } ${isOverflowing ? "with-shadow" : ""} ${!hasFooterChildren ? "without-footer" : ""}`}
-      >
-        {props?.description && (
-          <div className="digit-panelcard-description">
-            {props?.description}
-          </div>
-        )}
-        {props?.children}
-      </div>
+      {(props?.children.length>0 || props?.description!=="") && (
+        <div
+          ref={childrenWrapRef}
+          className={`digit-panelcard-children-wrap ${
+            props?.showChildrenInline ? "inline" : ""
+          } ${isOverflowing ? "with-shadow" : ""} ${
+            !hasFooterChildren ? "without-footer" : ""
+          }`}
+        >
+          {props?.description && (
+            <div className="digit-panelcard-description">
+              {props?.description}
+            </div>
+          )}
+          {props?.children}
+        </div>
+      )}
       {hasFooterChildren && (
         <div
           className={`digit-panelcard-footer ${
             props?.footerclassName ? props?.footerclassName : ""
           } ${isOverflowing ? "with-shadow" : ""}`}
         >
-          <div className="digit-panelcard-footer-buttons" style={{...props?.footerStyles}} >
+          <div
+            className="digit-panelcard-footer-buttons"
+            style={{ ...props?.footerStyles }}
+          >
             {finalFooterArray}
           </div>
         </div>
diff --git a/react/ui-components/src/molecules/stories/AccordionWrapper.stories.js b/react/ui-components/src/molecules/stories/AccordionList.stories.js
similarity index 69%
rename from react/ui-components/src/molecules/stories/AccordionWrapper.stories.js
rename to react/ui-components/src/molecules/stories/AccordionList.stories.js
index 168edb41b7f..aac531df8be 100644
--- a/react/ui-components/src/molecules/stories/AccordionWrapper.stories.js
+++ b/react/ui-components/src/molecules/stories/AccordionList.stories.js
@@ -1,20 +1,21 @@
 import React from "react";
 import { Accordion } from "../../atoms";
-import { AccordionWrapper } from "../../atoms";
+import { AccordionList } from "../../atoms";
 import {Iframe} from "../../atoms";
 
 export default {
-  title: "Molecules/AccordionWrapper",
-  component: AccordionWrapper,
+  title: "Molecules/AccordionList",
+  component: AccordionList,
   argTypes: {
-    className: { control: "text" },
-    styles: { control: "object" },
     allowMultipleOpen: { control: "boolean" },
-    addDivider: { control: "boolean" },
+    addDivider: { control: "boolean" ,name:"With Divider"},
+    children: { table: { disable: true } },
+    customClassName: { table: { disable: true } },
+    customStyles: { table: { disable: true } },
   },
 };
 
-const Template = (args) => <AccordionWrapper {...args} />;
+const Template = (args) => <AccordionList {...args} />;
 
 const children = [
   <Accordion
@@ -52,17 +53,15 @@ const children = [
 ];
 
 const commonArgs = {
-  className: "",
-  style: {},
   allowMultipleOpen: true,
-  addDivider: true,
+  addDivider: false,
 };
 
 export const Documentation = () => (
   <Iframe
     //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="AccordionWrapper Documentation"
+    title="AccordionList Documentation"
   />
 );
 
@@ -74,22 +73,8 @@ Default.args = {
   children: children,
 };
 
-export const WithoutDivider = Template.bind({});
-WithoutDivider.args = {
-  ...commonArgs,
-  children: children,
-  addDivider: false,
-};
-
-export const WithOnlySingleOpen = Template.bind({});
-WithOnlySingleOpen.args = {
-  ...commonArgs,
-  children: children,
-  allowMultipleOpen: false,
-};
-
-export const CustomStyles = Template.bind({});
-CustomStyles.args = {
+export const Custom = Template.bind({});
+Custom.args = {
   ...commonArgs,
   children: children,
   styles: {
diff --git a/react/ui-components/src/atoms/stories/AlertPopup.stories.js b/react/ui-components/src/molecules/stories/AlertPopup.stories.js
similarity index 88%
rename from react/ui-components/src/atoms/stories/AlertPopup.stories.js
rename to react/ui-components/src/molecules/stories/AlertPopup.stories.js
index 38cce169203..ee051046afe 100644
--- a/react/ui-components/src/atoms/stories/AlertPopup.stories.js
+++ b/react/ui-components/src/molecules/stories/AlertPopup.stories.js
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import PopUp from "../PopUp";
-import Button from "../Button";
-import InfoCard from "../InfoCard";
+import PopUp from "../../atoms/PopUp";
+import AlertCard from "../../atoms/AlertCard";
+import Button from "../../atoms/Button";
 
 export default {
-  title: "Atoms/PopUp/Alert",
+  title: "Molecules/PopUp/Alert",
   component: PopUp,
   argTypes: {
     className: {
@@ -184,20 +184,20 @@ const footerChildrenWithOneButton = [
 
 const lessChildren = [
   <div>This is the content of the Popup</div>,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
 ];
 
 const moreChildren = [
   <div>This is the content of the Popup</div>,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
 ];
 
 export const Alert = Template.bind({});
diff --git a/react/ui-components/src/atoms/stories/BasicPopUp.stories.js b/react/ui-components/src/molecules/stories/BasicPopup.stories.js
similarity index 90%
rename from react/ui-components/src/atoms/stories/BasicPopUp.stories.js
rename to react/ui-components/src/molecules/stories/BasicPopup.stories.js
index c3aa3f7d032..2058d42851c 100644
--- a/react/ui-components/src/atoms/stories/BasicPopUp.stories.js
+++ b/react/ui-components/src/molecules/stories/BasicPopup.stories.js
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import PopUp from "../PopUp";
-import Button from "../Button";
-import InfoCard from "../InfoCard";
+import PopUp from "../../atoms/PopUp";
+import AlertCard from "../../atoms/AlertCard";
+import Button from "../../atoms/Button";
 
 export default {
-  title: "Atoms/PopUp/Basic",
+  title: "Molecules/PopUp/Basic",
   component: PopUp,
   argTypes: {
     className: {
@@ -248,20 +248,20 @@ const footerChildrenSix = [
 
 const lessChildren = [
   <div>This is the content of the Popup</div>,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
 ];
 
 const moreChildren = [
   <div>This is the content of the Popup</div>,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
-  <InfoCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
+  <AlertCard text={"This is an infocard"} className={"popup-info-card"} />,
 ];
 
 export const Basic = Template.bind({});
diff --git a/react/ui-components/src/molecules/stories/ButtonGroup.stories.js b/react/ui-components/src/molecules/stories/ButtonGroup.stories.js
index 2aab92cca8d..2b21aeb2389 100644
--- a/react/ui-components/src/molecules/stories/ButtonGroup.stories.js
+++ b/react/ui-components/src/molecules/stories/ButtonGroup.stories.js
@@ -1,87 +1,132 @@
 import React from "react";
 import { Button } from "../../atoms";
-import {ButtonGroup} from "../../atoms";
-import {Iframe} from "../../atoms";
+import { ButtonGroup } from "../../atoms";
+import { Iframe } from "../../atoms";
 
 export default {
   title: "Molecules/ButtonGroup",
   component: ButtonGroup,
   argTypes: {
+    size: {
+      control: "select",
+      options: ["large", "medium", "small"],
+    },
+    buttonsArray: { table: { disable: true } },
+    sortButtons: {
+      control: "boolean",
+      name: "Auto Sort",
+    },
+    equalButtons: {
+      control: "boolean",
+      name: "Equal Buttons",
+    },
   },
 };
 
-const Template = (args) => <ButtonGroup {...args} />;
+const commonArgs = {
+  sortButtons:false,
+  size:"large",
+  equalButtons:true
+}
 
-const buttons = [
-    <Button type={"button"} size={"large"} variation={"primary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"large"} variation={"primary"} label="Buttons" onClick={() => console.log("Clicked Button 2")} />,
-  ];
+const largebuttons = [
+  <Button
+    type={"button"}
+    size={"large"}
+    variation={"teritiary"}
+    label="ButtonTeritiary"
+    onClick={() => console.log("Clicked Button 1")}
+  />,
+  <Button
+    type={"button"}
+    size={"large"}
+    variation={"primary"}
+    label="ButtonPrimary"
+    onClick={() => console.log("Clicked Button 1")}
+  />,
+  <Button
+    type={"button"}
+    size={"large"}
+    variation={"secondary"}
+    label="Button"
+    onClick={() => console.log("Clicked Button 2")}
+  />,
+];
 
-  const sortThisbuttons = [
-    <Button type={"button"} size={"large"} variation={"teritiary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"large"} variation={"primary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"large"} variation={"secondary"} label="Buttons" onClick={() => console.log("Clicked Button 2")} />,
-  ];
+const mediumbuttons = [
+  <Button
+    type={"button"}
+    size={"medium"}
+    variation={"teritiary"}
+    label="ButtonTeritiary"
+    onClick={() => console.log("Clicked Button 1")}
+  />,
+  <Button
+    type={"button"}
+    size={"medium"}
+    variation={"primary"}
+    label="ButtonPrimary"
+    onClick={() => console.log("Clicked Button 1")}
+  />,
+  <Button
+    type={"button"}
+    size={"medium"}
+    variation={"secondary"}
+    label="Buttons"
+    onClick={() => console.log("Clicked Button 2")}
+  />,
+];
+const smallbuttons = [
+  <Button
+    type={"button"}
+    size={"small"}
+    variation={"teritiary"}
+    label="ButtonTeritiary"
+    onClick={() => console.log("Clicked Button 1")}
+  />,
+  <Button
+    type={"button"}
+    size={"small"}
+    variation={"primary"}
+    label="ButtonPrimary"
+    onClick={() => console.log("Clicked Button 1")}
+  />,
+  <Button
+    type={"button"}
+    size={"small"}
+    variation={"secondary"}
+    label="Buttons"
+    onClick={() => console.log("Clicked Button 2")}
+  />,
+];
 
-  const sortThisbuttonsMedium = [
-    <Button type={"button"} size={"medium"} variation={"teritiary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"medium"} variation={"primary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"medium"} variation={"secondary"} label="Buttons" onClick={() => console.log("Clicked Button 2")} />,
-  ];
-
-  const sortThisbuttonsSmall = [
-    <Button type={"button"} size={"small"} variation={"teritiary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"small"} variation={"primary"} label="ButtonPrimary" onClick={() => console.log("Clicked Button 1")} />,
-    <Button type={"button"} size={"small"} variation={"secondary"} label="Buttons" onClick={() => console.log("Clicked Button 2")} />,
-  ];
+const Template = (args) => {
+  const { size, ...rest } = args;
+  return (
+    <ButtonGroup
+      buttonsArray={
+        args.size === "medium"
+          ? mediumbuttons
+          : args?.size === "small"
+          ? smallbuttons
+          : largebuttons
+      }
+      {...rest}
+    />
+  );
+};
 
-  export const Documentation = () => (
-    <Iframe
+export const Documentation = () => (
+  <Iframe
     //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
     title="ButtonGroup Documentation"
   />
-  );
+);
 
-  Documentation.storyName = "Docs";
-
-export const Default = Template.bind({});
-Default.args = {
-  buttonsArray: buttons,
-};
-
-export const ButtonsGroupWithUnSortedButtons = Template.bind({});
-ButtonsGroupWithUnSortedButtons.args = {
-  buttonsArray: sortThisbuttons,
-  sortButtons:false
-};
+Documentation.storyName = "Docs";
 
-export const ButtonsGroupWithSortedButtons = Template.bind({});
-ButtonsGroupWithSortedButtons.args = {
-  buttonsArray: sortThisbuttons,
-  sortButtons:true
+export const Basic = Template.bind({});
+Basic.args = {
+  ...commonArgs
 };
-
-export const ButtonsGroupWithUnSortedButtonsMedium = Template.bind({});
-ButtonsGroupWithUnSortedButtonsMedium.args = {
-  buttonsArray: sortThisbuttonsMedium,
-  sortButtons:false
-};
-
-export const ButtonsGroupWithSortedButtonsMedium = Template.bind({});
-ButtonsGroupWithSortedButtonsMedium.args = {
-  buttonsArray: sortThisbuttonsMedium,
-  sortButtons:true
-};
-
-export const ButtonsGroupWithUnSortedButtonsSmall= Template.bind({});
-ButtonsGroupWithUnSortedButtonsSmall.args = {
-  buttonsArray: sortThisbuttonsSmall,
-  sortButtons:false
-};
-
-export const ButtonsGroupWithSortedButtonsSmall = Template.bind({});
-ButtonsGroupWithSortedButtonsSmall.args = {
-  buttonsArray: sortThisbuttonsSmall,
-  sortButtons:true
-};
\ No newline at end of file
diff --git a/react/ui-components/src/molecules/stories/CardVariantPrimaryCard.stories.js b/react/ui-components/src/molecules/stories/CardVariantPrimaryCard.stories.js
index 53d0dad76c4..e9876f68076 100644
--- a/react/ui-components/src/molecules/stories/CardVariantPrimaryCard.stories.js
+++ b/react/ui-components/src/molecules/stories/CardVariantPrimaryCard.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import InfoCard from "../../atoms/InfoCard";
+import AlertCard from "../../atoms/AlertCard";
 import Button from "../../atoms/Button";
 import TextArea from "../../atoms/TextArea";
 import MultiSelectDropdown from "../../atoms/MultiSelectDropdown";
@@ -108,7 +108,7 @@ export const PrimaryCardWithElements = () => (
         console.log(value);
       }}
     />
-    <InfoCard
+    <AlertCard
       populators={{
         name: "infocard",
       }}
diff --git a/react/ui-components/src/molecules/stories/CardVariantScondaryCard.stories.js b/react/ui-components/src/molecules/stories/CardVariantScondaryCard.stories.js
index 093413499f0..acd72995f24 100644
--- a/react/ui-components/src/molecules/stories/CardVariantScondaryCard.stories.js
+++ b/react/ui-components/src/molecules/stories/CardVariantScondaryCard.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import InfoCard from "../../atoms/InfoCard";
+import AlertCard from "../../atoms/AlertCard";
 import Button from "../../atoms/Button";
 import TextArea from "../../atoms/TextArea";
 import MultiSelectDropdown from "../../atoms/MultiSelectDropdown";
@@ -107,7 +107,7 @@ export const SecondaryCardWithElements = () => (
         console.log(value);
       }}
     />
-    <InfoCard
+    <AlertCard
       populators={{
         name: "infocard",
       }}
diff --git a/react/ui-components/src/molecules/stories/CustomSidebar.stories.js b/react/ui-components/src/molecules/stories/CustomSideNav.stories.js
similarity index 95%
rename from react/ui-components/src/molecules/stories/CustomSidebar.stories.js
rename to react/ui-components/src/molecules/stories/CustomSideNav.stories.js
index 435273ef40c..88525c07317 100644
--- a/react/ui-components/src/molecules/stories/CustomSidebar.stories.js
+++ b/react/ui-components/src/molecules/stories/CustomSideNav.stories.js
@@ -1,10 +1,10 @@
 import React, { Children } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { Sidebar } from "../../atoms";
+import { SideNav } from "../../atoms";
 
 export default {
-  title: "Molecules/Sidebar/Custom",
-  component: Sidebar,
+  title: "Molecules/SideNav/Custom",
+  component: SideNav,
   argTypes: {
     items: { control: "object" },
     collapsedWidth: { control: "text" },
@@ -20,7 +20,7 @@ export default {
 
 const Template = (args) => (
   <Router>
-    <Sidebar {...args} />
+    <SideNav {...args} />
   </Router>
 );
 
diff --git a/react/ui-components/src/molecules/stories/DarkSidebar.stories.js b/react/ui-components/src/molecules/stories/DarkSideNav.stories.js
similarity index 95%
rename from react/ui-components/src/molecules/stories/DarkSidebar.stories.js
rename to react/ui-components/src/molecules/stories/DarkSideNav.stories.js
index 66d9fe44a24..9903d891ea2 100644
--- a/react/ui-components/src/molecules/stories/DarkSidebar.stories.js
+++ b/react/ui-components/src/molecules/stories/DarkSideNav.stories.js
@@ -1,10 +1,10 @@
 import React, { Children } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { Sidebar } from "../../atoms";
+import { SideNav } from "../../atoms";
 
 export default {
-  title: "Molecules/Sidebar/Dark",
-  component: Sidebar,
+  title: "Molecules/SideNav/Dark",
+  component: SideNav,
   argTypes: {
     items: { control: "object" },
     collapsedWidth: { control: "text" },
@@ -20,7 +20,7 @@ export default {
 
 const Template = (args) => (
   <Router>
-    <Sidebar {...args} />
+    <SideNav {...args} />
   </Router>
 );
 
diff --git a/react/ui-components/src/molecules/stories/DarkThemeHamburger.stories.js b/react/ui-components/src/molecules/stories/DarkThemeHamburger.stories.js
index 849583d942f..077a3b62cd7 100644
--- a/react/ui-components/src/molecules/stories/DarkThemeHamburger.stories.js
+++ b/react/ui-components/src/molecules/stories/DarkThemeHamburger.stories.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import MobileSidebar from "../../atoms/MobileSidebar";
+import MobileSideNav from "../../atoms/MobileSideNav";
 
 
 export default {
   title: "Molecules/Hamburger/Dark",
-  component: MobileSidebar,
+  component: MobileSideNav,
   argTypes: {
     items: { control: "object" },
     usermanuals: { control: "object" },
@@ -26,7 +26,7 @@ export default {
 
 const Template = (args) => (
   <Router>
-    <MobileSidebar {...args} />
+    <MobileSideNav {...args} />
   </Router>
 );
 
diff --git a/react/ui-components/src/molecules/stories/DarkThemeHeader.stories.js b/react/ui-components/src/molecules/stories/DarkThemeHeader.stories.js
index c3126359225..a8bae2aa1fc 100644
--- a/react/ui-components/src/molecules/stories/DarkThemeHeader.stories.js
+++ b/react/ui-components/src/molecules/stories/DarkThemeHeader.stories.js
@@ -207,7 +207,7 @@ export const Header = Template.bind({});
 Header.args = {
   ...commonArgs,
   theme: "dark",
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -223,7 +223,7 @@ Header.args = {
 export const HeaderWithImageOnLeft = Template.bind({});
 HeaderWithImageOnLeft.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -241,7 +241,7 @@ HeaderWithImageOnLeft.args = {
 export const WithActionFields = Template.bind({});
 WithActionFields.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -259,7 +259,7 @@ WithActionFields.args = {
 export const ActionFieldsWithProfileAsImg = Template.bind({});
 ActionFieldsWithProfileAsImg.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -277,7 +277,7 @@ ActionFieldsWithProfileAsImg.args = {
 export const WithActionFieldsWithProfileAsSvg = Template.bind({});
 WithActionFieldsWithProfileAsSvg.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -295,7 +295,7 @@ WithActionFieldsWithProfileAsSvg.args = {
 export const WithDropdownMoreOptions = Template.bind({});
 WithDropdownMoreOptions.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -313,7 +313,7 @@ WithDropdownMoreOptions.args = {
 export const WithActionFieldsAndImageOnLeft = Template.bind({});
 WithActionFieldsAndImageOnLeft.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
diff --git a/react/ui-components/src/molecules/stories/DynamicSidePanel.stories.js b/react/ui-components/src/molecules/stories/DynamicSidePanel.stories.js
new file mode 100644
index 00000000000..be81b5bed93
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/DynamicSidePanel.stories.js
@@ -0,0 +1,412 @@
+import React from "react";
+import SidePanel from "../../atoms/SidePanel";
+import Button from "../../atoms/Button";
+import { SVG } from "../../atoms/SVG";
+
+export default {
+  title: "Molecules/SidePanel/Dynamic",
+  component: SidePanel,
+  argTypes: {
+    className: { control: "text" ,table:{disable:true}},
+    styles: { control: "object",table:{disable:true} },
+    type: { control: "select", options: ["static", "dynamic"] ,table:{disable:true}},
+    position: { control: "select", options: ["left", "right"] ,name:"Position"},
+    children: {
+      control: "object",table:{disable:true}
+    },
+    header: {
+      control: "object",table:{disable:true}
+    },
+    footer: {
+      control: "object",table:{disable:true}
+    },
+    bgActive: { control: "boolean" ,name:'Background Active'},
+    isOverlay: { control: "boolean",table:{disable:true} },
+    hideArrow: { control: "boolean" ,name:'With Nudge',mapping:{
+      true:false,
+      false:true
+    }},
+    hideScrollIcon: { control: "boolean",table:{disable:true} },
+    isDraggable: { control: "boolean" ,name:"Draggable"},
+    defaultClosedWidth: { control: "text" ,table:{disable:true}},
+    defaultOpenWidth: { control: "text" ,table:{disable:true}},
+    addClose: { control: "boolean",name:"With Close" },
+    closedHeader: { control: "object" ,table:{disable:true}},
+    closedFooter: { control: "object",table:{disable:true} },
+    closedContents: { control: "object",table:{disable:true} },
+    sections: {control:'boolean',name:"With Sections" },
+    closedSections:{table:{disable:true}},
+    transitionDuration:{table:{disable:true}}
+  },
+};
+
+const sectionsToShow = [
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-s" style={{ color: "#0B4B66" }}>
+        Subheading1
+      </div>
+    </div>,
+    <div className="typography body-s">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </div>,
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      size={"medium"}
+      style={{ width: "100%" }}
+      label={"Dynamic SidePanel"}
+      icon={"Edit"}
+      variation={"secondary"}
+    />,
+  ],
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-s" style={{ color: "#0B4B66" }}>
+        Subheading2
+      </div>
+    </div>,
+    <div className="typography body-s">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </div>,
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      size={"medium"}
+      style={{ width: "100%" }}
+      label={"Dynamic SidePanel"}
+      icon={"Edit"}
+      variation={"secondary"}
+    />,
+  ],
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-s" style={{ color: "#0B4B66" }}>
+        Subheading3
+      </div>
+    </div>,
+    <div className="typography body-s">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </div>,
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      size={"medium"}
+      style={{ width: "100%" }}
+      label={"Dynamic SidePanel"}
+      icon={"Edit"}
+      variation={"secondary"}
+    />,
+  ],
+];
+
+const Template = (args) => {
+  const {sections,...rest} = args;
+  return (<SidePanel {...rest} sections={sections ? sectionsToShow : []} />)
+};
+
+const commonArgs = {
+  className: "",
+  styles: {},
+  type: "dynamic",
+  position: "right",
+  children: [],
+  header: [],
+  footer: [],
+  bgActive: true,
+  isOverlay: false,
+  isDraggable: true,
+  hideScrollIcon: true,
+  sections: [],
+  defaultClosedWidth: "",
+  defaultOpenWidth: "",
+  addClose:false,
+  closedContents:[],
+  closedSections:[],
+  closedHeader:[],
+  closedFooter:[],
+  hideArrow:true
+};
+
+const children = [
+  <div className="typography heading-s">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</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 header = [
+  <div className="typography heading-m" style={{ color: "#0B4B66" }}>
+    Header
+  </div>,
+];
+
+const footer = [
+  <Button
+    onClick={() => {
+      console.log("clicked");
+    }}
+    size={"medium"}
+    style={{ width: "100%" }}
+    label={"Dynamic SidePanel"}
+    icon={"Edit"}
+    variation={"secondary"}
+  />,
+];
+
+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 Basic = Template.bind({});
+Basic.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+  ...commonArgs,
+  type: "dynamic",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  defaultClosedWidth: 100,
+  defaultOpenWidth: 600,
+  closedSections:closedSections,
+  closedContents:closedContents,
+  closedHeader:closedHeader,
+  closedFooter:closedFooter
+};
diff --git a/react/ui-components/src/molecules/stories/ErrorPanel.stories.js b/react/ui-components/src/molecules/stories/ErrorPanelCard.stories.js
similarity index 98%
rename from react/ui-components/src/molecules/stories/ErrorPanel.stories.js
rename to react/ui-components/src/molecules/stories/ErrorPanelCard.stories.js
index 491872f0441..b1eff16b87d 100644
--- a/react/ui-components/src/molecules/stories/ErrorPanel.stories.js
+++ b/react/ui-components/src/molecules/stories/ErrorPanelCard.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { InfoCard } from "../../atoms";
+import { AlertCard } from "../../atoms";
 import { Button } from "../../atoms";
 import PanelCard from "../PanelCard";
 
@@ -83,7 +83,7 @@ const commonArgs = {
   maxFooterButtonsAllowed: 5,
   message: "Message",
   type: "success",
-  info: "Ref ID ",
+  info: "Description",
   response: "949749795479",
   customIcon: "",
   iconFill: "",
@@ -168,7 +168,7 @@ const footerChildrenSix = [
 ];
 
 const children = [
-  <InfoCard
+  <AlertCard
     variant={"success"}
     className={"panelcard-infocard"}
     text={"This is success"}
@@ -176,7 +176,7 @@ const children = [
 ];
 
 const errorchildren = [
-    <InfoCard
+    <AlertCard
       variant={"error"}
       className={"panelcard-infocard"}
       text={"This is error"}
diff --git a/react/ui-components/src/molecules/stories/Footer.stories.js b/react/ui-components/src/molecules/stories/Footer.stories.js
index 530b92be265..2a91753cc1a 100644
--- a/react/ui-components/src/molecules/stories/Footer.stories.js
+++ b/react/ui-components/src/molecules/stories/Footer.stories.js
@@ -1,47 +1,67 @@
 import React from "react";
 import { Button } from "../../atoms";
-import { ActionBar } from "../../atoms";
-import {Iframe} from "../../atoms";
+import { Footer } from "../../atoms";
+import { Iframe } from "../../atoms";
 
 export default {
   title: "Molecules/Footer",
-  component: ActionBar,
+  component: Footer,
   argTypes: {
     className: {
       control: "text",
+      table: { disable: true },
     },
     style: {
       control: { type: "object" },
+      table: { disable: true },
     },
     actionFields: {
       control: { type: "object" },
+      table: { disable: true },
     },
     setactionFieldsToRight: {
       control: { type: "boolean" },
+      table: { disable: true },
     },
     setactionFieldsToLeft: {
       control: { type: "boolean" },
+      table: { disable: true },
     },
     maxActionFieldsAllowed: {
       control: { type: "number" },
+      table: { disable: true },
     },
     sortActionFields: {
       control: { type: "boolean" },
+      table: { disable: true },
     },
     setChildrenLeft: {
       control: { type: "boolean" },
+      table: { disable: true },
+    },
+    flex: {
+      control: "select",
+      options: ["Left", "Right"],
+      name:"Flex"
     },
   },
 };
 
-const Template = (args) => <ActionBar {...args} />;
+const Template = (args) => {
+  const { flex, ...rest } = args;
+  return (
+    <Footer
+      {...rest}
+      setactionFieldsToRight={flex === "Right"}
+      setactionFieldsToLeft={"Left"}
+    />
+  );
+};
 
 const commonArgs = {
   className: "",
   style: {},
   actionFields: [],
-  setactionFieldsToRight: false,
-  setactionFieldsToLeft: false,
   maxActionFieldsAllowed: 5,
   sortActionFields: true,
   setChildrenLeft: false,
@@ -87,31 +107,9 @@ const footeractionFieldsWithSearchableDropdown = [
     variation={"primary"}
     optionsKey={"name"}
     isSearchable={true}
-    onOptionSelect={(option)=>{console.log(option)}}
-  ></Button>,
-];
-
-const footeractionFieldsWithUnSearchableDropdown = [
-  <Button
-    type={"button"}
-    size={"large"}
-    variation={"secondary"}
-    label="Back"
-    icon={"ArrowBack"}
-    onClick={() => console.log("Moving to previous page")}
-  />,
-  <Button
-    type={"actionButton"}
-    options={[
-      { name: "Action A", code: "Actiona" },
-      { name: "Action B", code: "Actionb" },
-      { name: "Action C", code: "Actionc" },
-    ]}
-    label={"Actions"}
-    variation={"primary"}
-    optionsKey={"name"}
-    isSearchable={false}
-    onOptionSelect={(option)=>{console.log(option)}}
+    onOptionSelect={(option) => {
+      console.log(option);
+    }}
   ></Button>,
 ];
 
@@ -125,35 +123,23 @@ export const Documentation = () => (
 
 Documentation.storyName = "Docs";
 
-
-export const Default = Template.bind({});
-Default.args = {
-  ...commonArgs,
-  actionFields: footeractionFields,
-};
-
-export const actionFieldsSetToRight = Template.bind({});
-actionFieldsSetToRight.args = {
-  ...commonArgs,
-  actionFields: footeractionFields,
-  setactionFieldsToRight: true,
+export const Basic = () => (
+  <Footer
+    className={""}
+    style={{}}
+    actionFields={footeractionFieldsWithSearchableDropdown}
+    maxActionFieldsAllowed={5}
+    sortActionFields={true}
+    setChildrenLeft={false}
+  />
+);
+Basic.argTypes = {
+  flex: { table: { disable: true } },
 };
 
-export const actionFieldsSetToLeft = Template.bind({});
-actionFieldsSetToLeft.args = {
+export const Flex = Template.bind({});
+Flex.args = {
   ...commonArgs,
   actionFields: footeractionFields,
-  setactionFieldsToLeft: true,
-};
-
-export const WithSearchableDropdown = Template.bind({});
-WithSearchableDropdown.args = {
-  ...commonArgs,
-  actionFields: footeractionFieldsWithSearchableDropdown,
-};
-
-export const WithUnsearchableDropdown = Template.bind({});
-WithUnsearchableDropdown.args = {
-  ...commonArgs,
-  actionFields: footeractionFieldsWithUnSearchableDropdown,
+  flex:"Right"
 };
diff --git a/react/ui-components/src/molecules/stories/FormCard.stories.js b/react/ui-components/src/molecules/stories/FormCard.stories.js
index cc0b43c9f1b..5b68ca7a2b6 100644
--- a/react/ui-components/src/molecules/stories/FormCard.stories.js
+++ b/react/ui-components/src/molecules/stories/FormCard.stories.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Button from "../../atoms/Button";
 import TextInput from "../../atoms/TextInput";
-import Uploader from "../../atoms/Uploader";
+import FileUpload from "../../atoms/FileUpload";
 import Chip from "../../atoms/Chip";
 import {
   Card,
@@ -209,14 +209,14 @@ export const SimpleLayout = () => {
           ></Dropdown>
         </div>
       </LabelFieldPair>
-      {/* <Uploader
+      {/* <FileUpload
         style={{ marginBottom: "24px" }}
-        variant={"uploadFile"}
+        variant={"uploadField"}
         multiple={false}
         label={"Choose Document"}
         showLabel={true}
         inline={true}
-      ></Uploader> */}
+      ></FileUpload> */}
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Email ID"}></TextBlock>
         <TextInput type="text"></TextInput>
@@ -398,14 +398,14 @@ export const WithLayoutExample1 = () => {
           ></Dropdown>
         </div>
       </LabelFieldPair>
-      {/* <Uploader
+      {/* <FileUpload
         style={{ marginBottom: "24px" }}
-        variant={"uploadFile"}
+        variant={"uploadField"}
         multiple={false}
         label={"Choose Document"}
         showLabel={true}
         inline={true}
-      ></Uploader> */}
+      ></FileUpload> */}
       <LabelFieldPair>
         <TextBlock style={textBlockStyle} body={"Email ID"}></TextBlock>
         <TextInput type="text"></TextInput>
diff --git a/react/ui-components/src/molecules/stories/HamburgerDocs.stories.js b/react/ui-components/src/molecules/stories/HamburgerDocs.stories.js
index 2aeded21fcc..c8013aa17de 100644
--- a/react/ui-components/src/molecules/stories/HamburgerDocs.stories.js
+++ b/react/ui-components/src/molecules/stories/HamburgerDocs.stories.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import MobileSidebar from "../../atoms/MobileSidebar";
+import MobileSideNav from "../../atoms/MobileSideNav";
 import {Iframe} from "../../atoms";
 
 export default {
   title: "Molecules/Hamburger",
-  component: MobileSidebar,
+  component: MobileSideNav,
   argTypes: {
     items: { control: "object" },
     usermanuals: { control: "object" },
diff --git a/react/ui-components/src/molecules/stories/LightSidebar.stories.js b/react/ui-components/src/molecules/stories/LightSideNav.stories.js
similarity index 97%
rename from react/ui-components/src/molecules/stories/LightSidebar.stories.js
rename to react/ui-components/src/molecules/stories/LightSideNav.stories.js
index f41d6ba9dfd..74ee2fe06e5 100644
--- a/react/ui-components/src/molecules/stories/LightSidebar.stories.js
+++ b/react/ui-components/src/molecules/stories/LightSideNav.stories.js
@@ -1,10 +1,10 @@
 import React, { Children } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { Sidebar } from "../../atoms";
+import { SideNav } from "../../atoms";
 
 export default {
-  title: "Molecules/Sidebar/Light",
-  component: Sidebar,
+  title: "Molecules/SideNav/Light",
+  component: SideNav,
   argTypes: {
     items: { control: "object" },
     collapsedWidth: { control: "text" },
@@ -20,7 +20,7 @@ export default {
 
 const Template = (args) => (
   <Router>
-    <Sidebar {...args} />
+    <SideNav {...args} />
   </Router>
 );
 
diff --git a/react/ui-components/src/molecules/stories/LightThemeHamburger.stories.js b/react/ui-components/src/molecules/stories/LightThemeHamburger.stories.js
index 9950c487487..6003d9eafa2 100644
--- a/react/ui-components/src/molecules/stories/LightThemeHamburger.stories.js
+++ b/react/ui-components/src/molecules/stories/LightThemeHamburger.stories.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import MobileSidebar from "../../atoms/MobileSidebar";
+import MobileSideNav from "../../atoms/MobileSideNav";
 
 
 export default {
   title: "Molecules/Hamburger/Light",
-  component: MobileSidebar,
+  component: MobileSideNav,
   argTypes: {
     items: { control: "object" },
     usermanuals: { control: "object" },
@@ -26,7 +26,7 @@ export default {
 
 const Template = (args) => (
   <Router>
-    <MobileSidebar {...args} />
+    <MobileSideNav {...args} />
   </Router>
 );
 
diff --git a/react/ui-components/src/molecules/stories/LightThemeHeader.stories.js b/react/ui-components/src/molecules/stories/LightThemeHeader.stories.js
index 092e040b9c7..b8490b5baf6 100644
--- a/react/ui-components/src/molecules/stories/LightThemeHeader.stories.js
+++ b/react/ui-components/src/molecules/stories/LightThemeHeader.stories.js
@@ -242,7 +242,7 @@ const commonArgs = {
 export const LightThemeHeader = Template.bind({});
 LightThemeHeader.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -258,7 +258,7 @@ LightThemeHeader.args = {
 export const LightThemeHeaderWithImageOnLeft = Template.bind({});
 LightThemeHeaderWithImageOnLeft.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -275,7 +275,7 @@ LightThemeHeaderWithImageOnLeft.args = {
 export const WithActionFields = Template.bind({});
 WithActionFields.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   onImageClick: () => {
     console.log("image is clicked");
   },
@@ -291,7 +291,7 @@ WithActionFields.args = {
 export const WithProfileAsImage = Template.bind({});
 WithProfileAsImage.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -308,7 +308,7 @@ WithProfileAsImage.args = {
 export const WithProfileAsSvg = Template.bind({});
 WithProfileAsSvg.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -325,7 +325,7 @@ WithProfileAsSvg.args = {
 export const WithDropdownMoreOptions = Template.bind({});
 WithDropdownMoreOptions.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
@@ -342,7 +342,7 @@ WithDropdownMoreOptions.args = {
 export const WithActionFieldsAndImageOnLeft = Template.bind({});
 WithActionFieldsAndImageOnLeft.args = {
   ...commonArgs,
-  ulb: "City Municipal Corporation",
+  ulb: "Logo Placeholder",
   language: "English",
   onImageClick: () => {
     console.log("image is clicked");
diff --git a/react/ui-components/src/atoms/stories/PopupDocs.stories.js b/react/ui-components/src/molecules/stories/PopupDocs.stories.js
similarity index 94%
rename from react/ui-components/src/atoms/stories/PopupDocs.stories.js
rename to react/ui-components/src/molecules/stories/PopupDocs.stories.js
index 4d66ce61ffc..923e7c253bf 100644
--- a/react/ui-components/src/atoms/stories/PopupDocs.stories.js
+++ b/react/ui-components/src/molecules/stories/PopupDocs.stories.js
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import PopUp from "../PopUp";
-import Iframe from "../Iframe";
+import PopUp from "../../atoms/PopUp";
+import Iframe from "../../atoms/Iframe";
 
 export default {
-  title: "Atoms/PopUp",
+  title: "Molecules/PopUp",
   component: PopUp,
   argTypes: {
     className: {
diff --git a/react/ui-components/src/molecules/stories/SidebarDocs.stories.js b/react/ui-components/src/molecules/stories/SideNavDocs.stories.js
similarity index 87%
rename from react/ui-components/src/molecules/stories/SidebarDocs.stories.js
rename to react/ui-components/src/molecules/stories/SideNavDocs.stories.js
index 5f03e2e1d0a..a082afc8f2c 100644
--- a/react/ui-components/src/molecules/stories/SidebarDocs.stories.js
+++ b/react/ui-components/src/molecules/stories/SideNavDocs.stories.js
@@ -1,11 +1,11 @@
 import React, { Children } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { Sidebar } from "../../atoms";
+import { SideNav } from "../../atoms";
 import { Iframe } from "../../atoms";
 
 export default {
-  title: "Molecules/Sidebar",
-  component: Sidebar,
+  title: "Molecules/SideNav",
+  component: SideNav,
   argTypes: {
     items: { control: "object" },
     collapsedWidth: { control: "text" },
@@ -23,7 +23,7 @@ export const Documentation = () => (
   <Iframe
     //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="Sidebar Documentation"
+    title="SideNav Documentation"
   />
 );
 
diff --git a/react/ui-components/src/atoms/stories/SlideOverMenuDocs.stories.js b/react/ui-components/src/molecules/stories/SidePanelDocs.stories.js
similarity index 86%
rename from react/ui-components/src/atoms/stories/SlideOverMenuDocs.stories.js
rename to react/ui-components/src/molecules/stories/SidePanelDocs.stories.js
index 7391881f4d3..1d8cd0723f0 100644
--- a/react/ui-components/src/atoms/stories/SlideOverMenuDocs.stories.js
+++ b/react/ui-components/src/molecules/stories/SidePanelDocs.stories.js
@@ -1,10 +1,10 @@
 import React from "react";
-import SlideOverMenu from "../SlideOverMenu";
-import Iframe from "../Iframe";
+import SidePanel from "../../atoms/SidePanel";
+import Iframe from "../../atoms/Iframe";
 
 export default {
-  title: "Atoms/SlideOverMenu",
-  component: SlideOverMenu,
+  title: "Molecules/SidePanel",
+  component: SidePanel,
   argTypes: {
     className: { control: "text" },
     styles: { control: "object" },
@@ -37,7 +37,7 @@ export const Documentation = () => (
   <Iframe
     //Todo:Update the url
     src="https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui/ui-components-standardisation/digit-ui-core-react-components/input-field"
-    title="SlideOverMenu Documentation"
+    title="SidePanel Documentation"
   />
 );
 
diff --git a/react/ui-components/src/molecules/stories/StaticSidePanel.stories.js b/react/ui-components/src/molecules/stories/StaticSidePanel.stories.js
new file mode 100644
index 00000000000..b639197da9e
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/StaticSidePanel.stories.js
@@ -0,0 +1,220 @@
+import React from "react";
+import SidePanel from "../../atoms/SidePanel";
+import Button from "../../atoms/Button";
+
+export default {
+  title: "Molecules/SidePanel/Static",
+  component: SidePanel,
+  argTypes: {
+    className: { control: "text", table: { disable: true } },
+    styles: { control: "object", table: { disable: true } },
+    type: {
+      control: "select",
+      options: ["static", "dynamic"],
+      table: { disable: true },
+    },
+    position: {
+      control: "select",
+      options: ["left", "right"],
+      name: "Position",
+    },
+    children: {
+      control: "object",
+      table: { disable: true },
+    },
+    header: {
+      control: "object",
+      table: { disable: true },
+    },
+    footer: {
+      control: "object",
+      table: { disable: true },
+    },
+    bgActive: { control: "boolean", name: "Background Active" },
+    isOverlay: { control: "boolean", table: { disable: true } },
+    hideArrow: { control: "boolean", table: { disable: true } },
+    hideScrollIcon: { control: "boolean", table: { disable: true } },
+    isDraggable: { control: "boolean", table: { disable: true } },
+    defaultClosedWidth: { control: "text", table: { disable: true } },
+    defaultOpenWidth: { control: "text", table: { disable: true } },
+    addClose: { control: "boolean", name: "With Close" },
+    closedContents: { control: "object", table: { disable: true } },
+    closedHeader: { control: "object", table: { disable: true } },
+    closedFooter: { control: "object", table: { disable: true } },
+    sections: { control: "boolean", name: "With Sections" },
+    closedSections: { table: { disable: true } },
+    transitionDuration: { table: { disable: true } },
+  },
+};
+
+const sectionsToShow = [
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-s" style={{ color: "#0B4B66" }}>
+        Subheading1
+      </div>
+    </div>,
+    <div className="typography body-s">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </div>,
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      size={"medium"}
+      style={{ width: "100%" }}
+      label={"Static SidePanel"}
+      icon={"Edit"}
+      variation={"secondary"}
+    />,
+  ],
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-s" style={{ color: "#0B4B66" }}>
+        Subheading2
+      </div>
+    </div>,
+    <div className="typography body-s">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </div>,
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      size={"medium"}
+      style={{ width: "100%" }}
+      label={"Static SidePanel"}
+      icon={"Edit"}
+      variation={"secondary"}
+    />,
+  ],
+  [
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <div className="typography heading-s" style={{ color: "#0B4B66" }}>
+        Subheading3
+      </div>
+    </div>,
+    <div className="typography body-s">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </div>,
+    <Button
+      onClick={() => {
+        console.log("clicked");
+      }}
+      size={"medium"}
+      style={{ width: "100%" }}
+      label={"Static SidePanel"}
+      icon={"Edit"}
+      variation={"secondary"}
+    />,
+  ],
+];
+
+const Template = (args) => {
+  const { sections, ...rest } = args;
+  return <SidePanel {...rest} sections={sections ? sectionsToShow : []} />;
+};
+
+const commonArgs = {
+  className: "",
+  styles: {},
+  type: "static",
+  position: "right",
+  children: [],
+  header: [],
+  footer: [],
+  bgActive: true,
+  isOverlay: false,
+  isDraggable: false,
+  hideScrollIcon: true,
+  sections: [],
+  defaultClosedWidth: "",
+  defaultOpenWidth: "",
+  addClose: false,
+  closedContents: [],
+  closedSections: [],
+  closedHeader: [],
+  closedFooter: [],
+  hideArrow: false,
+};
+
+const children = [
+  <div>This is static content on the right!</div>,
+  <div className="typography heading-s">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged. It
+    was popularised in the 1960s with the release of Letraset sheets containing
+    Lorem Ipsum passages, and more recently with desktop publishing software
+    like Aldus PageMaker including versions of Lorem Ipsum.
+  </div>,
+];
+
+const header = [
+  <div className="typography heading-m" style={{ color: "#0B4B66" }}>
+    Header
+  </div>,
+];
+
+const footer = [
+  <Button
+    onClick={() => {
+      console.log("clicked");
+    }}
+    size={"medium"}
+    style={{ width: "100%" }}
+    label={"Customize Sandbox"}
+    icon={"Edit"}
+    variation={"secondary"}
+  />,
+];
+
+export const Basic = Template.bind({});
+Basic.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+  ...commonArgs,
+  type: "static",
+  position: "right",
+  children: children,
+  header: header,
+  footer: footer,
+  defaultOpenWidth: 600,
+};
diff --git a/react/ui-components/src/molecules/stories/SuccessPanelCard.stories.js b/react/ui-components/src/molecules/stories/SuccessPanelCard.stories.js
index dd3fdb7ccf2..584efd98f3d 100644
--- a/react/ui-components/src/molecules/stories/SuccessPanelCard.stories.js
+++ b/react/ui-components/src/molecules/stories/SuccessPanelCard.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { InfoCard } from "../../atoms";
+import { AlertCard } from "../../atoms";
 import { Button } from "../../atoms";
 import PanelCard from "../PanelCard";
 
@@ -168,7 +168,7 @@ const footerChildrenSix = [
 ];
 
 const children = [
-  <InfoCard
+  <AlertCard
     variant={"success"}
     className={"panelcard-infocard"}
     text={"This is success"}