diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
index 179423830..59d3d30a6 100644
--- a/packages/ui-kit/package.json
+++ b/packages/ui-kit/package.json
@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "@firecamp/types": "^0.0.11",
+    "@radix-ui/react-toast": "^1.0.0",
     "@szhsin/react-menu": "^2.3.2",
     "autoprefixer": "^10",
     "classnames": "^2.3.1",
diff --git a/packages/ui-kit/src/components/toast/Toast.stories.tsx b/packages/ui-kit/src/components/toast/Toast.stories.tsx
new file mode 100644
index 000000000..4b9c1efe0
--- /dev/null
+++ b/packages/ui-kit/src/components/toast/Toast.stories.tsx
@@ -0,0 +1,14 @@
+import Toast from './Toast';
+import { VscMenu } from "@react-icons/all-files/vsc/VscMenu";
+
+export default {
+  title: "UI-Kit/Toast",
+  component: Toast,
+  argTypes: {
+  }
+};
+
+const Template = (args: any) => <Toast {...args} />;
+
+export const ToastComp = Template.bind({});
+ToastComp.args = {};
\ No newline at end of file
diff --git a/packages/ui-kit/src/components/toast/Toast.tsx b/packages/ui-kit/src/components/toast/Toast.tsx
new file mode 100644
index 000000000..b8b306bd7
--- /dev/null
+++ b/packages/ui-kit/src/components/toast/Toast.tsx
@@ -0,0 +1,25 @@
+import * as Toast from '@radix-ui/react-toast';
+export default () => (
+  <Toast.Provider label="This is the toast">
+    <Toast.Root type="foreground">
+      <Toast.Description>File removed successfully.</Toast.Description>
+      <Toast.Close>Dismiss</Toast.Close>
+    </Toast.Root>
+
+    <Toast.Root type="foreground" duration={10000}>
+      <Toast.Description>File removed successfully.</Toast.Description>
+      <Toast.Action altText="Undo (Alt+U)">
+        Undo <kbd>Alt</kbd>+<kbd>U</kbd>
+      </Toast.Action>
+      <Toast.Close>Dismiss</Toast.Close>
+    </Toast.Root>
+
+    <Toast.Root>
+      <Toast.Title />
+      <Toast.Description />
+      <Toast.Action altText="action" />
+      <Toast.Close />
+    </Toast.Root>
+    <Toast.Viewport />
+  </Toast.Provider>
+);
diff --git a/packages/ui-kit/src/ui-kit.ts b/packages/ui-kit/src/ui-kit.ts
index 2932386a6..b32300d39 100644
--- a/packages/ui-kit/src/ui-kit.ts
+++ b/packages/ui-kit/src/ui-kit.ts
@@ -92,10 +92,13 @@ export { default as UrlBar } from './components/url/components/UrlBar';
 export { default as Popover } from './components/popover/Popover';
 export { default as ConfirmationPopover } from './components/popover/ConfirmationPopover';
 
+// Toast
+export { default as Toast } from './components/toast/Toast';
+
 // scripts
 export { default as ScriptsTabs } from './components/scripts/ScriptsTabs';
 
-//response
+// response
 export { default as Response } from './components/response/Response';
 
 //----------------------------------------------------enums---------------------------------------------------------------------------
@@ -114,4 +117,4 @@ export { default as Alert } from './components/alert/Alert';
 export type { EAlertType } from './components/alert/Alert.interface';
 export { default as Empty } from './components/empty/Empty';
 
-export {default as Loader} from './components/loader/Loader';
+export { default as Loader } from './components/loader/Loader';
diff --git a/webpack.config.js b/webpack.config.js
index f7166fbe4..5683702db 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -59,6 +59,7 @@ exports.output = {
   globalObject: 'this',
   filename: '[name].bundle.js',
   chunkFilename: '[name].bundle.js',
+  publicPath: '/js',
 };
 
 exports.output.path = path.join(__dirname, `./build/${env}/js`);