diff --git a/react/css/README.md b/react/css/README.md
index 61f05e4052..e7e981fbc9 100644
--- a/react/css/README.md
+++ b/react/css/README.md
@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.24 Added overlay for Popup
 1.8.2-coreui.23 Updated Panel success animation styles
 1.8.2-coreui.22 Updated tag, stepper styles 
 1.8.2-coreui.21 Updated Panel, Popup styles
diff --git a/react/css/package.json b/react/css/package.json
index 6ea551815a..0578691e5f 100644
--- a/react/css/package.json
+++ b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-coreui.23",
+  "version": "1.8.2-coreui.24",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",
diff --git a/react/css/src/digitv2/components/popUpV2.scss b/react/css/src/digitv2/components/popUpV2.scss
index dad67f1d56..2a98b0ecaf 100644
--- a/react/css/src/digitv2/components/popUpV2.scss
+++ b/react/css/src/digitv2/components/popUpV2.scss
@@ -1,277 +1,295 @@
-.digit-popup-wrap {
-  @apply w-full h-auto flex-col absolute;
-  z-index: 10000;
-  background-color: theme(digitv2.lightTheme.paper-primary);
-  border-radius: theme(digitv2.spacers.spacer1);
-  box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(11, 12, 12, 0.7); 
   display: flex;
-
-  @media (min-width: 48rem) {
-    max-height: 86%;
-    max-width: 51%;
-  }
-
-  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-    max-height: 82%;
-    max-width: 74%;
-  }
-
-  @media (max-width: 30rem) {
-    max-height: 80%;
-    max-width: 91%;
-  }
-
-  &.alert {
-    text-align: center;
-  }
-
-  .digit-popup-close {
-    @apply items-center cursor-pointer absolute;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; 
+  backdrop-filter: blur(2px); 
+  -webkit-backdrop-filter: blur(2px); 
+
+  .digit-popup-wrap {
+    @apply w-full h-auto flex-col fixed;
+    z-index: 10000;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    border-radius: theme(digitv2.spacers.spacer1);
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
     display: flex;
-    justify-content: flex-end;
-    width: theme(digitv2.spacers.spacer6);
-    height: theme(digitv2.spacers.spacer6);
-
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  
     @media (min-width: 48rem) {
-      top: theme(digitv2.spacers.spacer3);
-      right: theme(digitv2.spacers.spacer3);
+      max-height: 86%;
+      max-width: 51%;
     }
-
+  
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      top: 0.625rem;
-      right: 0.625rem;
+      max-height: 82%;
+      max-width: 74%;
     }
-
+  
     @media (max-width: 30rem) {
-      top: theme(digitv2.spacers.spacer2);
-      right: theme(digitv2.spacers.spacer2);
+      max-height: 80%;
+      max-width: 91%;
     }
-
-
-    svg {
-      flex-shrink: 0;
-
+  
+    &.alert {
+      text-align: center;
+    }
+  
+    .digit-popup-close {
+      @apply items-center cursor-pointer absolute;
+      display: flex;
+      justify-content: flex-end;
+      width: theme(digitv2.spacers.spacer6);
+      height: theme(digitv2.spacers.spacer6);
+  
       @media (min-width: 48rem) {
-        width: theme(digitv2.spacers.spacer7) !important;
-        height: theme(digitv2.spacers.spacer7) !important;
+        top: theme(digitv2.spacers.spacer3);
+        right: theme(digitv2.spacers.spacer3);
       }
-
-    }
-  }
-
-  .digit-popup-header {
-    @apply flex-col;
-    display: flex !important;
-    gap: theme(digitv2.spacers.spacer4);
-
-    .digit-popup-icon-header-container {
-      display: flex !important;
-      gap: theme(digitv2.spacers.spacer2);
-
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        top: 0.625rem;
+        right: 0.625rem;
+      }
+  
+      @media (max-width: 30rem) {
+        top: theme(digitv2.spacers.spacer2);
+        right: theme(digitv2.spacers.spacer2);
+      }
+  
+  
       svg {
         flex-shrink: 0;
+  
+        @media (min-width: 48rem) {
+          width: theme(digitv2.spacers.spacer7) !important;
+          height: theme(digitv2.spacers.spacer7) !important;
+        }
+  
       }
-
-      .digit-popup-heading-subheading-wrap {
-        @apply flex-col;
+    }
+  
+    .digit-popup-header {
+      @apply flex-col;
+      display: flex !important;
+      gap: theme(digitv2.spacers.spacer4);
+  
+      .digit-popup-icon-header-container {
         display: flex !important;
-        gap: theme(digitv2.spacers.spacer1);
-        color: theme(digitv2.lightTheme.text-primary);
-
-        .digit-popup-heading {
-          @extend .typography.heading-l;
-          line-height: normal;
+        gap: theme(digitv2.spacers.spacer2);
+  
+        svg {
+          flex-shrink: 0;
         }
-
-        .digit-popup-subheading {
-          @extend .typography.caption-s;
+  
+        .digit-popup-heading-subheading-wrap {
+          @apply flex-col;
+          display: flex !important;
+          gap: theme(digitv2.spacers.spacer1);
+          color: theme(digitv2.lightTheme.text-primary);
+  
+          .digit-popup-heading {
+            @extend .typography.heading-l;
+            line-height: normal;
+          }
+  
+          .digit-popup-subheading {
+            @extend .typography.caption-s;
+          }
+        }
+  
+        .digit-popup-description {
+          @extend .typography.body-l;
+          color: theme(digitv2.lightTheme.text-primary);
         }
       }
-
-      .digit-popup-description {
-        @extend .typography.body-l;
-        color: theme(digitv2.lightTheme.text-primary);
-      }
-    }
-
-    &.with-shadow {
-      box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
-    }
-
-    @media (min-width: 48rem) {
-      padding: theme(digitv2.spacers.spacer6);
-      padding-bottom: theme(digitv2.spacers.spacer0);
-
+  
       &.with-shadow {
-        padding-bottom: theme(digitv2.spacers.spacer6);
+        box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
       }
+  
+      @media (min-width: 48rem) {
+        padding: theme(digitv2.spacers.spacer6);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer6);
+        }
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        padding: theme(digitv2.spacers.spacer5);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer5);
+        }
+      }
+  
+      @media (max-width: 30rem) {
+        padding: theme(digitv2.spacers.spacer4);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer4);
+        }
+      }
+  
     }
-
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      padding: theme(digitv2.spacers.spacer5);
-      padding-bottom: theme(digitv2.spacers.spacer0);
-
-      &.with-shadow {
-        padding-bottom: theme(digitv2.spacers.spacer5);
+  
+    .digit-popup-children-wrap {
+      @apply overflow-hidden overflow-y-auto flex-col;
+      display: flex;
+      flex: 1;
+  
+      &.inline {
+        flex-direction: row;
+      }
+  
+      @media (min-width: 48rem) {
+        gap: theme(digitv2.spacers.spacer6);
+        padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
+  
+        &.with-shadow,
+        &.without-footer{
+          padding: theme(digitv2.spacers.spacer6);
+        }
+  
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        gap: theme(digitv2.spacers.spacer5);
+        padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
+      
+        &.with-shadow,
+        &.without-footer{
+          padding: theme(digitv2.spacers.spacer5);
+        }
+      
+      }
+  
+      @media (max-width: 30rem) {
+        gap: theme(digitv2.spacers.spacer4);
+        padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
+      
+        &.with-shadow,
+        &.without-footer{
+          padding: theme(digitv2.spacers.spacer4);
+        }
       }
     }
-
-    @media (max-width: 30rem) {
-      padding: theme(digitv2.spacers.spacer4);
-      padding-bottom: theme(digitv2.spacers.spacer0);
-
+  
+    .digit-popup-footer {
+      @apply flex-wrap;
+      display: flex;
+      gap: theme(digitv2.spacers.spacer4);
+  
       &.with-shadow {
-        padding-bottom: theme(digitv2.spacers.spacer4);
+        box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
       }
-    }
-
-  }
-
-  .digit-popup-children-wrap {
-    @apply overflow-hidden overflow-y-auto flex-col;
-    display: flex;
-    flex: 1;
-
-    &.inline {
-      flex-direction: row;
-    }
-
-    @media (min-width: 48rem) {
-      gap: theme(digitv2.spacers.spacer6);
-      padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
-
-      &.with-shadow,
-      &.without-footer{
+  
+      @media (min-width: 48rem) {
         padding: theme(digitv2.spacers.spacer6);
       }
-
-    }
-
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      gap: theme(digitv2.spacers.spacer5);
-      padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
-    
-      &.with-shadow,
-      &.without-footer{
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        @apply w-full;
         padding: theme(digitv2.spacers.spacer5);
       }
-    
-    }
-
-    @media (max-width: 30rem) {
-      gap: theme(digitv2.spacers.spacer4);
-      padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
-    
-      &.with-shadow,
-      &.without-footer{
+  
+      @media (max-width: 30rem) {
+        @apply flex-col;
         padding: theme(digitv2.spacers.spacer4);
       }
     }
-  }
-
-  .digit-popup-footer {
-    @apply flex-wrap;
-    display: flex;
-    gap: theme(digitv2.spacers.spacer4);
-
-    &.with-shadow {
-      box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
-    }
-
-    @media (min-width: 48rem) {
-      padding: theme(digitv2.spacers.spacer6);
-    }
-
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      @apply w-full;
-      padding: theme(digitv2.spacers.spacer5);
-    }
-
-    @media (max-width: 30rem) {
-      @apply flex-col;
-      padding: theme(digitv2.spacers.spacer4);
-    }
-  }
-
-  .digit-popup-footer-buttons {
-    margin-left: auto;
-    display: flex;
-    gap: theme(digitv2.spacers.spacer4);
-    @apply max-w-full flex-wrap;
-
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      @apply w-full;
-
-      button {
-        flex: 1;
+  
+    .digit-popup-footer-buttons {
+      margin-left: auto;
+      display: flex;
+      gap: theme(digitv2.spacers.spacer4);
+      @apply max-w-full flex-wrap;
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        @apply w-full;
+  
+        button {
+          flex: 1;
+        }
       }
-    }
-
-    @media (max-width: 30rem) {
-      @apply flex-col;
-      margin: theme(digitv2.spacers.spacer0);
-
-      button {
-        width: 100%;
+  
+      @media (max-width: 30rem) {
+        @apply flex-col;
+        margin: theme(digitv2.spacers.spacer0);
+  
+        button {
+          width: 100%;
+        }
       }
     }
-  }
-
-
-  .digit-popup-alert-content {
-    @apply flex-col items-center;
-    display: flex;
-    gap: theme(digitv2.spacers.spacer2);
-
-    .digit-popup-alert-heading {
-      @extend .typography.heading-l;
-      line-height: normal;
-      color: theme(digitv2.lightTheme.text-primary);
-    }
-
-    .digit-popup-alert-message {
-      @extend .typography.caption-s;
-      text-align: center;
-      color: theme(digitv2.lightTheme.text-primary);
-    }
-
-    &.with-shadow {
-      box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
-    }
-
-    @media (min-width: 48rem) {
-      padding: theme(digitv2.spacers.spacer6);
-      padding-bottom: theme(digitv2.spacers.spacer0);
-
-      &.with-shadow {
-        padding-bottom: theme(digitv2.spacers.spacer6);
+  
+  
+    .digit-popup-alert-content {
+      @apply flex-col items-center;
+      display: flex;
+      gap: theme(digitv2.spacers.spacer2);
+  
+      .digit-popup-alert-heading {
+        @extend .typography.heading-l;
+        line-height: normal;
+        color: theme(digitv2.lightTheme.text-primary);
       }
-    }
-
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      padding: theme(digitv2.spacers.spacer5);
-      padding-bottom: theme(digitv2.spacers.spacer0);
-
-      &.with-shadow {
-        padding-bottom: theme(digitv2.spacers.spacer5);
+  
+      .digit-popup-alert-message {
+        @extend .typography.caption-s;
+        text-align: center;
+        color: theme(digitv2.lightTheme.text-primary);
       }
-    }
-
-    @media (max-width: 30rem) {
-      padding: theme(digitv2.spacers.spacer4);
-      padding-bottom: theme(digitv2.spacers.spacer0);
-
+  
       &.with-shadow {
-        padding-bottom: theme(digitv2.spacers.spacer4);
+        box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+      }
+  
+      @media (min-width: 48rem) {
+        padding: theme(digitv2.spacers.spacer6);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer6);
+        }
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        padding: theme(digitv2.spacers.spacer5);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer5);
+        }
+      }
+  
+      @media (max-width: 30rem) {
+        padding: theme(digitv2.spacers.spacer4);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer4);
+        }
       }
     }
-  }
-
-  .popup-info-card {
-    margin: theme(digitv2.spacers.spacer0);
-    width: 100%;
-    max-width: 100%;
-    min-width: 100%;
+  
+    .popup-info-card {
+      margin: theme(digitv2.spacers.spacer0);
+      width: 100%;
+      max-width: 100%;
+      min-width: 100%;
+    }
   }
 }
 
diff --git a/react/example/package.json b/react/example/package.json
index d7a69046bd..5a636cb1ff 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.1-beta.32",
+    "@egovernments/digit-ui-components": "0.0.2",
     "@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 c93911c2a2..47b6530d9d 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-css@1.8.2-coreui.23/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-css@1.8.2-coreui.24/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 35144f7597..fba5b831e5 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.1-beta.32",
+        "@egovernments/digit-ui-components": "0.0.2",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",
diff --git a/react/modules/core/package.json b/react/modules/core/package.json
index d974b6ba70..2e7c286625 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.1-beta.32",
+    "@egovernments/digit-ui-components": "0.0.2",
     "@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 f3e565fbe1..07581bfc7c 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.1-beta.32",
+    "@egovernments/digit-ui-components": "0.0.2",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",
diff --git a/react/package.json b/react/package.json
index e26683d33d..6d09be4dc8 100644
--- a/react/package.json
+++ b/react/package.json
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.32",
+    "@egovernments/digit-ui-components": "0.0.2",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",
diff --git a/react/ui-components/README.md b/react/ui-components/README.md
index 1c77736b9f..db9f5f7591 100644
--- a/react/ui-components/README.md
+++ b/react/ui-components/README.md
@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.2 Added new components and enhancements for old components
 0.0.1-beta.32 Updated Panel Success Animation
 0.0.1-beta.31 Added new prop named activeSteps in Stepper
 0.0.1-beta.30 Updated Panel Animation Styles
@@ -91,6 +92,31 @@ yarn storybook
 0.0.1 base version
 ```
 
+## [0.0.2] - 2024-06-03
+
+### New Changes
+
+- Added Error Message Component. 
+- Added Info Button Component. 
+- Added Panels Component. 
+- Added Popup Component With Two Variants defualt and alert. 
+- Added RemoveableTag Component. 
+- Added Stepper Component.
+- Added TextBlock Component.
+- Added Timeline Component.
+- Added Uploader Component With Three Varinats UploadFile,UploadPopup and UploadImage.
+- Added PanelCard Molecule.
+
+### Enhancements 
+
+- Updated Button Component Styles. 
+- Updated Dropdown Component Styles and Added SelectAll Option. 
+- Updated InfoCard Component Styles. 
+- Added Animation for Toast. 
+- Added new prop named type for Toast replacing the separate props for `info`, `warning`, and `error`. 
+- Updated Typography with lineHeight 
+- Updated Color Typography
+
 ## [0.0.1-beta.28] - 2024-05-24
 
 ### New Changes
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index f99c189643..fd353c9632 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.1-beta.32",
+  "version": "0.0.2",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-css": "1.8.2-coreui.23",
+    "@egovernments/digit-ui-css": "1.8.2-coreui.24",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",
diff --git a/react/ui-components/src/atoms/PopUp.js b/react/ui-components/src/atoms/PopUp.js
index b4d18ef8f2..3341ca1d60 100644
--- a/react/ui-components/src/atoms/PopUp.js
+++ b/react/ui-components/src/atoms/PopUp.js
@@ -109,118 +109,134 @@ const PopUp = (props) => {
     : allowedFooter;
 
   return (
-    <div
-      className={`digit-popup-wrap ${
-        props?.className ? props?.className : ""
-      } ${props?.type ? props?.type : ""}`}
-      style={props?.style}
-    >
-      {props?.type === "alert" ? (
-        <div
-          className={`digit-popup-alert-content ${
-            isOverflowing ? "with-shadow" : ""
-          }`}
-        >
-          {!props?.customIcon && (
-            <SVG.Warning
-              fill={props?.iconFill ? props?.iconFill : "#D4351C"}
-              width={"48px"}
-              height={"48px"}
-              className="popup-alert-icon"
-            />
-          )}
-          {props?.customIcon && iconGenerated}
-          <div className="digit-popup-alert-heading">
-            {props?.alertHeading || "Alert!"}
-          </div>
-          <div className="digit-popup-alert-message">
-            {props?.alertMessage || "AlertMessage"}
-          </div>
-        </div>
-      ) : (
-        <>
+    <div className={`popup-overlay ${props?.overlayClassName || ""}`} onClick={() => props?.onOverlayClick()}>
+      <div
+        className={`digit-popup-wrap ${
+          props?.className ? props?.className : ""
+        } ${props?.type ? props?.type : ""}`}
+        style={props?.style}
+      >
+        {props?.type === "alert" ? (
           <div
-            className={`digit-popup-header ${
-              props?.headerclassName ? props?.headerclassName : ""
-            }  ${isOverflowing ? "with-shadow" : ""}`}
-            style={{ display: "flex" }}
+            className={`digit-popup-alert-content ${
+              isOverflowing ? "with-shadow" : ""
+            }`}
           >
-            <div className="header-close-container" style={{ display: "flex" }}>
+            {!props?.customIcon && (
+              <SVG.Warning
+                fill={props?.iconFill ? props?.iconFill : "#D4351C"}
+                width={"48px"}
+                height={"48px"}
+                className="popup-alert-icon"
+              />
+            )}
+            {props?.customIcon && iconGenerated}
+            <div className="digit-popup-alert-heading">
+              {props?.alertHeading || "Alert!"}
+            </div>
+            <div className="digit-popup-alert-message">
+              {props?.alertMessage || "AlertMessage"}
+            </div>
+          </div>
+        ) : (
+          <>
+            <div
+              className={`digit-popup-header ${
+                props?.headerclassName ? props?.headerclassName : ""
+              }  ${isOverflowing ? "with-shadow" : ""}`}
+              style={{ display: "flex" }}
+            >
               <div
-                className="digit-popup-icon-header-container"
+                className="header-close-container"
                 style={{ display: "flex" }}
               >
-                {props?.showIcon && !props?.customIcon && (
-                  <SVG.ErrorOutline
-                    fill={props?.iconFill ? props?.iconFill : "#D4351C"}
-                    width={"32px"}
-                    height={"32px"}
-                    className="popup-error-icon"
-                  />
-                )}
-                {props?.showIcon && props?.customIcon && iconGenerated}
                 <div
-                  className="digit-popup-heading-subheading-wrap"
+                  className="digit-popup-icon-header-container"
                   style={{ display: "flex" }}
                 >
-                  {props?.heading && (
-                    <div className="digit-popup-heading">
-                      {StringManipulator(
-                        "TOSENTENCECASE",
-                        StringManipulator("TRUNCATESTRING", props?.heading, {
-                          maxLength: props?.headerMaxLength || 256,
-                        })
-                      )}
-                    </div>
-                  )}
-                  {props?.subheading && (
-                    <div className="digit-popup-subheading">
-                      {StringManipulator(
-                        "TOSENTENCECASE",
-                        StringManipulator("TRUNCATESTRING", props?.subheading, {
-                          maxLength: props?.subHeaderMaxLength || 256,
-                        })
-                      )}
-                    </div>
+                  {props?.showIcon && !props?.customIcon && (
+                    <SVG.ErrorOutline
+                      fill={props?.iconFill ? props?.iconFill : "#D4351C"}
+                      width={"32px"}
+                      height={"32px"}
+                      className="popup-error-icon"
+                    />
                   )}
+                  {props?.showIcon && props?.customIcon && iconGenerated}
+                  <div
+                    className="digit-popup-heading-subheading-wrap"
+                    style={{ display: "flex" }}
+                  >
+                    {props?.heading && (
+                      <div className="digit-popup-heading">
+                        {StringManipulator(
+                          "TOSENTENCECASE",
+                          StringManipulator("TRUNCATESTRING", props?.heading, {
+                            maxLength: props?.headerMaxLength || 256,
+                          })
+                        )}
+                      </div>
+                    )}
+                    {props?.subheading && (
+                      <div className="digit-popup-subheading">
+                        {StringManipulator(
+                          "TOSENTENCECASE",
+                          StringManipulator(
+                            "TRUNCATESTRING",
+                            props?.subheading,
+                            {
+                              maxLength: props?.subHeaderMaxLength || 256,
+                            }
+                          )
+                        )}
+                      </div>
+                    )}
+                  </div>
                 </div>
+                <span
+                  className="digit-popup-close"
+                  style={{ display: "flex" }}
+                  onClick={() => props?.onClose()}
+                >
+                  <SVG.Close
+                    fill={"#363636"}
+                    width={"24px"}
+                    height={"24px"}
+                    className="popup-close-svg"
+                  />
+                </span>
               </div>
-              <span
-                className="digit-popup-close"
-                style={{ display: "flex" }}
-                onClick={() => props?.onClose()}
-              >
-                <SVG.Close
-                  fill={"#363636"}
-                  width={"24px"}
-                  height={"24px"}
-                  className="popup-close-svg"
-                />
-              </span>
             </div>
-          </div>
-        </>
-      )}
-      <div
-        ref={childrenWrapRef}
-        className={`digit-popup-children-wrap ${
-          props?.showChildrenInline ? "inline" : ""
-        } ${isOverflowing ? "with-shadow" : ""} ${!hasFooterChildren ? "without-footer" : ""}`}
-      >
-        {props?.description && (
-          <div className="digit-popup-description">{props?.description}</div>
+          </>
         )}
-        {props?.children}
-      </div>
-      {hasFooterChildren && (
         <div
-          className={`digit-popup-footer ${
-            props?.footerclassName ? props?.footerclassName : ""
-          } ${isOverflowing ? "with-shadow" : ""}`}
+          ref={childrenWrapRef}
+          className={`digit-popup-children-wrap ${
+            props?.showChildrenInline ? "inline" : ""
+          } ${isOverflowing ? "with-shadow" : ""} ${
+            !hasFooterChildren ? "without-footer" : ""
+          }`}
         >
-          <div className="digit-popup-footer-buttons" style={{...props?.footerStyles}}>{finalFooterArray}</div>
+          {props?.description && (
+            <div className="digit-popup-description">{props?.description}</div>
+          )}
+          {props?.children}
         </div>
-      )}
+        {hasFooterChildren && (
+          <div
+            className={`digit-popup-footer ${
+              props?.footerclassName ? props?.footerclassName : ""
+            } ${isOverflowing ? "with-shadow" : ""}`}
+          >
+            <div
+              className="digit-popup-footer-buttons"
+              style={{ ...props?.footerStyles }}
+            >
+              {finalFooterArray}
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
@@ -235,6 +251,7 @@ PopUp.propTypes = {
   footerChildren: PropTypes.node,
   onClose: PropTypes.func,
   type: PropTypes.string,
+  onOverlayClick:PropTypes.func
 };
 
-export default PopUp;
+export default PopUp;
\ No newline at end of file
diff --git a/react/ui-components/src/hoc/stories/PopUp.stories.js b/react/ui-components/src/hoc/stories/PopUp.stories.js
index 9072ab7750..b7a2f4e9d1 100644
--- a/react/ui-components/src/hoc/stories/PopUp.stories.js
+++ b/react/ui-components/src/hoc/stories/PopUp.stories.js
@@ -12,6 +12,12 @@ export default {
       control: "text",
     },
     type: { control: "select", options: ["default", "alert"] },
+    overlayClassName: {
+      control: "text",
+    },
+    onOverlayClick: {
+      control: "function",
+    },
     headerclassName: {
       control: "text",
     },
@@ -83,6 +89,7 @@ const Template = (args) => <PopUp {...args} />;
 const commonArgs = {
   type: "default",
   className: "",
+  overlayClassName: "",
   headerclassName: "",
   footerclassName: "",
   style: {},
@@ -104,6 +111,9 @@ const commonArgs = {
   sortFooterButtons: true,
   maxFooterButtonsAllowed: 5,
   footerStyles: {},
+  onOverlayClick: () => {
+    console.log("Popup overlay is clicked");
+  },
 };
 
 const footerChildrenWithTwoButtons = [