diff --git a/micro-frontends/sandbox-ui/README.md b/micro-frontends/sandbox-ui/README.md
index 109fc6e82de..161cb2eb0a6 100644
--- a/micro-frontends/sandbox-ui/README.md
+++ b/micro-frontends/sandbox-ui/README.md
@@ -77,27 +77,27 @@ Refer [Storybook](https://unified-dev.digit.org/storybook/) to know more about t
 ## Project Structure
 
 ```
-sandbox-ui/
-├── packages/                      # Microfrontends
-│   ├── components/                # Shared React components
-│   │   └── src/                   # Source files for shared components
-│   ├── root-app/                  # Main rendered JS app
-│   │   ├── public/                # Public assets for root app
-│   │   ├── src/                   # Source files for root app
-│   ├── modules/                   # Microfrontend modules
-│   │   ├── account-mgmt/          # Account Management App
-│   │   │   ├── public/            # Public assets for module 1
-│   │   │   ├── src/               # Source files for module 1
-│   │   ├── data-mgmt/             # Data Management App
-│   │   │   ├── public/            # Public assets for module 2
-│   │   │   ├── src/               # Source files for module 2
-│   │   ├── user-app/              # User App
-│   │   │   ├── public/            # Public assets for module 2
-│   │   │   ├── src/               # Source files for module 2
-├── .gitignore                     # Git ignore file
-├── package.json                   # NPM package configuration
-├── lerna.json                     # Lerna configuration
-└── README.md                      # Project README
+    sandbox-ui/
+    ├── packages/                      # Microfrontends
+    │   ├── components/                # Shared React components
+    │   │   └── src/                   # Source files for shared components
+    │   ├── root-app/                  # Main rendered JS app
+    │   │   ├── public/                # Public assets for root app
+    │   │   ├── src/                   # Source files for root app
+    │   ├── modules/                   # Microfrontend modules
+    │   │   ├── account-mgmt/          # Account Management App
+    │   │   │   ├── public/            # Public assets for module 1
+    │   │   │   ├── src/               # Source files for module 1
+    │   │   ├── data-mgmt/             # Data Management App
+    │   │   │   ├── public/            # Public assets for module 2
+    │   │   │   ├── src/               # Source files for module 2
+    │   │   ├── user-app/              # User App
+    │   │   │   ├── public/            # Public assets for module 2
+    │   │   │   ├── src/               # Source files for module 2
+    ├── .gitignore                     # Git ignore file
+    ├── package.json                   # NPM package configuration
+    ├── lerna.json                     # Lerna configuration
+    └── README.md                      # Project README
 
 ```
 
diff --git a/micro-frontends/sandbox-ui/package.json b/micro-frontends/sandbox-ui/package.json
index 51567d68059..7f411cd056a 100644
--- a/micro-frontends/sandbox-ui/package.json
+++ b/micro-frontends/sandbox-ui/package.json
@@ -12,13 +12,13 @@
     "packages/modules/*"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-webpack.121",
+    "@egovernments/digit-ui-components": "^0.0.1-webpack.121",
     "@egovernments/sandbox-components": "0.0.5",
-    "webpack-dev-server": "^5.0.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "15.0.0",
-    "react-router-dom": "6.25.1"
+    "react-router-dom": "6.25.1",
+    "webpack-dev-server": "^5.0.4"
   },
   "devDependencies": {
     "concurrently": "^6.2.1",
@@ -33,5 +33,3 @@
     "build": "lerna run build"
   }
 }
-
-
diff --git a/micro-frontends/sandbox-ui/packages/components/package.json b/micro-frontends/sandbox-ui/packages/components/package.json
index c2475808f5a..9559ce04dc0 100644
--- a/micro-frontends/sandbox-ui/packages/components/package.json
+++ b/micro-frontends/sandbox-ui/packages/components/package.json
@@ -44,7 +44,8 @@
     "react-stepper-horizontal": "1.0.11",
     "react-tabs": "6.0.2",
     "localforage": "^1.10.0",
-    "@tanstack/react-query": "5.50.1"
+    "@tanstack/react-query": "5.50.1",
+    "@egovernments/digit-ui-components": "0.0.9-beta.1"
   },
   "peerDependencies": {
     "react": "18.3.1",
diff --git a/micro-frontends/sandbox-ui/packages/components/src/Button.js b/micro-frontends/sandbox-ui/packages/components/src/Button.js
index 04cbc0cb3c2..da622807fca 100644
--- a/micro-frontends/sandbox-ui/packages/components/src/Button.js
+++ b/micro-frontends/sandbox-ui/packages/components/src/Button.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+
 export const Button = ({ children, onClick }) => {
   return (
     <button onClick={onClick}>
diff --git a/micro-frontends/sandbox-ui/packages/components/src/components/Slider.js b/micro-frontends/sandbox-ui/packages/components/src/components/Slider.js
new file mode 100644
index 00000000000..c0b5191b951
--- /dev/null
+++ b/micro-frontends/sandbox-ui/packages/components/src/components/Slider.js
@@ -0,0 +1,154 @@
+import React, {useState,useEffect} from 'react';
+
+import { DigitUIComponents } from '../../../components/src';
+const { Button, TextBlock } = DigitUIComponents;
+import "./../css/index.css";
+import bellSvg from './../public/bell.svg'; 
+import cloudMoon from "./../public/cloud-moon-svgrepo-com.svg";
+import thunderCloud from "./../public/image.png";
+
+
+
+
+
+const dummyData = [
+  {
+    stepsArray: [
+      {
+        text: "The lantern flickered softly in the meadow as the symphony of the night began to unfold. A glacier shimmered in the horizon, while a bumblebee buzzed around a mosaic of flowers. Tranquil moments passed as circuit lights twinkled in the distance. An astronaut marveled at the quasar above, surrounded by a lattice of stars. The driftwood by the harbor created a charming prism of colors, as the ember of a cascade slowly dimmed. A tango played softly in the background, whispering a mirage of distant lands.",
+        bannerImage: "https://cdn.worldvectorlogo.com/logos/world-health-organization-logo-1.svg"
+      },
+      {
+        text: "In the heart of the fortress, an euphoria spread as the carousel spun with joy. The radiant lights reflected on a whistle that pierced through the thunder. Parchment maps lay scattered, revealing hidden frost patterns. A phoenix emerged from the eclipse, casting a bright drift across the land. An alloy of history and legend combined with the song of the meadowlark in an oasis of peace. Nebula clouds floated by the quarry, where quantum secrets were whispered among the stars. The luminary of the vortex created a new ember of hope.",
+        bannerImage: bellSvg
+      },
+      {
+        text: "The horizon glowed with a twilight hue as a mirage danced in the celestial sky. A spindle of light traced a path over the lantern by the glacier. The mosaic of stars above reflected the radiance of the vortex, while a gentle drift of cool air brought an echo of ancient quantum mysteries. The zenith of the night revealed a glowing ember, whispering secrets of a hidden prism. A cascade of light fell softly over the fortress, as the nimbus clouds gently rolled by. The harmony of nature intertwined with the sapphire night.",
+        bannerImage: cloudMoon
+      },
+      {
+        text: "As the odyssey of the day ended, the ecliptic sky showcased a radiant display. Oasis moments were filled with cryptic symbols of solstice magic. The aurora danced gracefully over the glacier, while a distant beacon lit the way through the nimbus clouds. Harmony settled in as the echo of the celestial realm intertwined with the horizon. Driftwood by the shore created a serene backdrop, and the serene landscape was adorned with a quasar of light. The twilight melded into a mirage of stars",
+        bannerImage: thunderCloud
+      }
+    ]
+  }
+];
+
+const Slider = ({ data = dummyData }) => {
+
+ 
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isTransitioning,setIsTransitioning]=useState(false);
+  // useEffect(() => {
+  //   if(isTransitioning){
+  //     const timer=setTimeout(()=>setIsTransitioning(false),1500);
+  //     return ()=>clearTimeout(timer);
+  //   }
+  // }, [isTransitioning]); 
+
+  const handleNext = () => {
+    // if (isTransitioning) return;
+    setCurrentStep((prevStep) =>
+      prevStep < data[0].stepsArray.length - 1 ? prevStep + 1 : 0
+    );
+  };
+
+  const handlePrevious = () => {
+    // if (isTransitioning) return;
+    setCurrentStep((prevStep) =>
+      prevStep > 0 ? prevStep - 1 : data[0].stepsArray.length - 1
+    );
+  };
+
+  const handleClick = (e) => {
+    e.stopPropagation(); 
+    // console.log("e",e);
+    // console.log("native",e.nativeEvent);
+    // console.log("current target",e.currentTarget);
+    const {  offsetX } = e.nativeEvent;
+    
+    const container = e.currentTarget; // Access the clicked element
+    const offsetWidth = container.offsetWidth;
+    console.log("container",container);
+
+    if (offsetX < offsetWidth / 2) {
+      handlePrevious();
+    } else {
+      handleNext();
+    }
+    console.log("ofwidth",offsetWidth);
+    console.log("ofX",offsetX);
+  };
+
+  const { text, bannerImage } = data[0].stepsArray[currentStep];
+
+  return (
+    <div className="slider-container" styles={{transition : "5s"}}onClick={handleClick}>
+
+
+      <img src={bannerImage} alt={`Slide ${currentStep}`} className="slider-image" />
+      <div className="slider-card">
+        <TextBlock
+          body={text}
+          headerContentClassName="custom-header-class"
+          subHeaderClasName="sub-header-class"
+          captionClassName=""
+          header="Slider"
+          subHeader=""
+        />
+      </div>
+
+      <div className="slider-dots">
+        {data[0].stepsArray.map((_, index) => (
+          <span
+            key={index}
+            className={`dot ${index === currentStep ? 'active' : ''}`}
+            onClick={ (e) => { 
+              e.stopPropagation();
+              setCurrentStep(index);
+            }}
+          />
+        ))}
+      </div>
+
+
+
+
+      {/* <div className="slider-buttons">
+        <Button
+          className="slider-button"
+
+          icon="ArrowBack"
+          isSuffix
+          label=""
+          onClick={handlePrevious}
+          options={[]}
+          optionsKey=""
+          size="small"
+          style={{}}
+          title=""
+          variation="secondary"
+        />
+
+
+        <Button
+          className="slider-button"
+
+          icon="ArrowForward"
+          isSuffix
+          label=""
+          onClick={handleNext}
+          options={[]}
+          optionsKey=""
+          size="small"
+          style={{}}
+          title=""
+          variation="secondary"
+        />
+      </div> */}
+
+    </div>
+  );
+};
+
+export default Slider;
diff --git a/micro-frontends/sandbox-ui/packages/components/src/css/index.css b/micro-frontends/sandbox-ui/packages/components/src/css/index.css
new file mode 100644
index 00000000000..f2a8edb4a61
--- /dev/null
+++ b/micro-frontends/sandbox-ui/packages/components/src/css/index.css
@@ -0,0 +1,145 @@
+.slider-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+    width: 22rem;
+    height: 100vh;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    
+  }
+  
+  .slider-image {
+    height: 100vh;
+    width: 22rem;
+    border-radius: 8px;
+    color: red;
+    transition: opacity 1.5s ease-in-out;
+    
+  }
+  .slider-image.fade-in {
+    opacity: 1;
+  }
+  
+  .slider-image.fade-out {
+    opacity: 0;
+  }
+  
+  .slider-card {
+    background-color: rgba(104, 104, 255, 0.6);
+    border-radius: 0.7rem;
+    position: absolute;
+    top: 0;
+    height: 25rem;
+    width: 22rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .slider-text {
+    position: absolute;
+    top: 10rem;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 1.2em;
+    text-align: center;
+    padding: 10px;
+    border-radius: 5px;
+    width: 90%;
+  }
+  
+  
+  
+  .slider-buttons {
+    margin-left: 1rem;
+    position: absolute;
+    top: 22rem;
+    left: 0;
+    /* Align buttons to the start of the row */
+    display: flex;
+    flex-direction: row;
+    /* Fix from 'rows' to 'row' to arrange buttons horizontally */
+    justify-content: center;
+    transform: translateY(-50%);
+    gap: 10px;
+    /* Space between buttons */
+  }
+  
+  .slider-button {
+    width: 50px;
+    height: 50px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    padding: 0;
+    min-height: 50px;
+    max-height: 50px;
+    min-width: 50px;
+    max-width: 50px;
+  
+  }
+  
+  
+  
+  .slider-button img {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .slider-button:hover {
+    opacity: 1;
+  }
+  
+  .slider-button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+  
+  .digit-text-block-header-content.custom-header-class {
+    .digit-text-block-header {
+      font-size: 1.5em;
+      color: rgb(249, 246, 246) !important;
+      color: #333;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+  
+    .digit-text-block-body{
+      margin-top: 0rem;
+    }
+  }
+  
+  .digit-text-block-wrap{
+    gap:0rem;
+  }
+
+  .slider-dots {
+    position: absolute;
+    top: 22rem;
+    left:2.5rem;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+  }
+  
+  .dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: orange;
+    border-radius: 50%;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity 1s;
+  }
+  
+  .dot.active {
+    opacity: 1;
+  }
\ No newline at end of file
diff --git a/micro-frontends/sandbox-ui/packages/components/src/public/bell.svg b/micro-frontends/sandbox-ui/packages/components/src/public/bell.svg
new file mode 100644
index 00000000000..74d135fda00
--- /dev/null
+++ b/micro-frontends/sandbox-ui/packages/components/src/public/bell.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.10, written by Peter Selinger 2001-2011
+</metadata>
+<g transform="translate(0.000000,256.000000) scale(0.050000,-0.050000)"
+fill="#000000" stroke="none">
+<path d="M1169 5089 c-133 -66 -164 -206 -120 -540 17 -130 31 -310 31 -400 0
+-294 109 -509 258 -509 72 0 74 -6 25 -77 -167 -235 -356 -917 -297 -1069 19
+-51 -26 -550 -64 -697 -43 -166 -127 -347 -234 -502 -312 -454 -9 -719 937
+-819 l236 -25 58 -103 c251 -444 900 -432 1132 21 l40 80 230 25 c967 106
+1265 364 951 821 -214 311 -269 514 -292 1075 -25 599 -104 911 -302 1192 -42
+59 -33 78 37 78 136 0 245 228 245 513 0 91 14 271 31 401 44 335 14 471 -118
+533 -177 84 -573 -60 -947 -345 l-184 -141 -95 42 c-108 48 -275 42 -358 -12
+-63 -41 -57 -43 -154 47 -302 276 -868 499 -1046 411z m327 -241 c276 -92 664
+-337 664 -419 0 -42 -10 -38 -149 61 -178 127 -475 263 -636 291 -106 18 -135
+31 -135 58 0 77 49 79 256 9z m2380 -3 c6 -38 -3 -45 -51 -45 -149 0 -483
+-148 -708 -314 -129 -95 -137 -98 -137 -59 0 14 68 77 151 140 362 269 727
+406 745 278z m-1240 -386 c54 -20 139 -111 120 -130 -4 -4 -50 8 -102 27 -88
+32 -100 32 -188 0 -109 -39 -119 -36 -82 24 47 81 152 113 252 79z m-853 -937
+c-131 -316 -96 -378 165 -290 110 38 115 34 162 -108 39 -122 98 -165 177
+-129 38 17 69 83 155 323 59 166 113 302 118 302 6 0 59 -136 118 -302 86
+-240 117 -306 155 -323 79 -36 138 7 177 129 48 145 50 146 192 98 229 -77
+264 -6 147 300 -86 226 -83 239 34 150 289 -221 404 -537 447 -1232 42 -687
+103 -917 322 -1225 105 -148 131 -267 68 -316 -341 -262 -2159 -340 -2992
+-129 -393 100 -439 178 -261 445 220 331 280 569 313 1232 35 695 200 1089
+530 1268 63 35 60 18 -27 -193z m1086 -3165 c-169 -179 -516 -172 -638 14
+l-32 49 364 0 364 0 -58 -63z"/>
+<path d="M1536 2533 c-18 -18 -35 -130 -51 -335 -30 -392 -93 -644 -226 -909
+-107 -213 -111 -258 -26 -290 200 -76 467 687 467 1334 0 205 -72 292 -164
+200z"/>
+</g>
+</svg>
diff --git a/micro-frontends/sandbox-ui/packages/components/src/public/cloud-moon-svgrepo-com.svg b/micro-frontends/sandbox-ui/packages/components/src/public/cloud-moon-svgrepo-com.svg
new file mode 100644
index 00000000000..4cc381e4282
--- /dev/null
+++ b/micro-frontends/sandbox-ui/packages/components/src/public/cloud-moon-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 15.5018C18.651 14.5223 17 12.2039 17 9.5C17 6.79774 18.6534 4.48062 21 3.5C20.2304 3.17906 19.3859 3 18.5 3C15.7977 3 13.4806 4.64899 12.5 6.9956M6.9 21C4.74609 21 3 19.2889 3 17.1781C3 15.4286 4.3 13.8125 6.25 13.5C6.86168 12.0617 8.30934 11 9.9978 11C12.1607 11 13.9285 12.6589 14.05 14.75C15.1978 15.2463 16 16.4645 16 17.7835C16 19.5599 14.5449 21 12.75 21L6.9 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/micro-frontends/sandbox-ui/packages/components/src/public/image.png b/micro-frontends/sandbox-ui/packages/components/src/public/image.png
new file mode 100644
index 00000000000..54a59e385b2
Binary files /dev/null and b/micro-frontends/sandbox-ui/packages/components/src/public/image.png differ
diff --git a/micro-frontends/sandbox-ui/packages/modules/account-mgmt/src/root.component.js b/micro-frontends/sandbox-ui/packages/modules/account-mgmt/src/root.component.js
index 60f45a754a2..258ca6cb305 100644
--- a/micro-frontends/sandbox-ui/packages/modules/account-mgmt/src/root.component.js
+++ b/micro-frontends/sandbox-ui/packages/modules/account-mgmt/src/root.component.js
@@ -1,11 +1,23 @@
 import { DigitUIComponents ,ReactQueryWrapper} from "components";
-const { TestComponent, Tag, SelectionCard, ErrorMessage } = DigitUIComponents;
+import Slider from "../../../components/src/components/Slider";
+// import { InfoButton,BreadCrumb, InfoCard } from "@egovernments/digit-ui-components";
+const { TestComponent,BreadCrumb, Tag, SelectionCard, ErrorMessage,Button } = DigitUIComponents;
+
 
 export default function Root(props) {
   return (
     <div>
+
+      {/* <ErrorMessage/> */}
+      {/* <SelectionCard/> */}
+      {/* <TestComponent/> */}
+      {/* <Tag/>   */}
+      {/* <BreadCrumb/> */}
+      
+      
+      <Slider/>
       <ReactQueryWrapper>
-      <h1>hi</h1>
+      <h1>hi </h1>
       <Tag />
       <SelectionCard
         options={[
diff --git a/micro-frontends/sandbox-ui/packages/modules/data-mgmt/src/root.component.js b/micro-frontends/sandbox-ui/packages/modules/data-mgmt/src/root.component.js
index 763f271bcda..4d71e8a2b41 100644
--- a/micro-frontends/sandbox-ui/packages/modules/data-mgmt/src/root.component.js
+++ b/micro-frontends/sandbox-ui/packages/modules/data-mgmt/src/root.component.js
@@ -10,14 +10,14 @@ export default function Root(props) {
   
   return <>
   <ReactQueryWrapper>
-   <section>hey account-mgmt
-  <NavigateButton to="account-mgmt"></NavigateButton>
+   <section>hey account-mgmtt
+  <NavigateButton to="account-mgmttt"></NavigateButton>
   </section>;
-  <section> hey user
-  <NavigateButton to="user"></NavigateButton>
+  <section> hey userr
+  <NavigateButton to="userrr"></NavigateButton>
   </section>;
-  <section>hey data-mgmt
-  <NavigateButton to="data-mgmt"></NavigateButton>
+  <section>hey data-mgmtt
+  <NavigateButton to="data-mgmttt"></NavigateButton>
   </section>;
     <Test />
     <TestComponent/>