diff --git a/package.json b/package.json
index df481b3..f1fcbd6 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "next-transpile-modules": "^10.0.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-toastify": "^10.0.6",
+    "react-hot-toast": "^2.4.1",
     "reflect-metadata": "^0.1.13",
     "svg2img": "^1.0.0-beta.2",
     "url": "^0.11.3",
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 7969ae4..28adb9f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Box } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import Sidebar from "./SideBar";
-import { toast, ToastContainer } from "react-toastify";
+import { Toaster, toast } from "react-hot-toast";
+import CloseIcon from '@mui/icons-material/Close';
+import PersonalVideoIcon from '@mui/icons-material/PersonalVideo';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -15,13 +17,32 @@ const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 768 && !toastShown) {
-        toast.info("For a better experience, please use a desktop.", {
+        toast((t) => (
+          <Box style={{ display: "flex", alignItems: "center", gap:'15px', justifyContent: "space-between" }}>
+            <Box sx={{display:'flex', alignItems:'flex-start', gap:'15px'}}>
+              <PersonalVideoIcon sx={{ color:'#FFFFFF'}}/>
+              <Box sx={{ fontSize: '14px', color: '#F4F4F4', fontWeight: '500' }}>Switch to desktop for a better experience</Box>
+            </Box>
+            <Button
+              onClick={() => toast.dismiss(t.id)}
+              style={{
+                marginLeft: "10px",
+                background: "transparent",
+                border: "none",
+                color: "#fff",
+                cursor: "pointer",
+              }}
+            >
+              <CloseIcon/>
+            </Button>
+          </Box>
+        ), {
           position: "top-center",
-          autoClose: false,
-          hideProgressBar: true,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
+          duration: Infinity,
+          style: {
+            background: "green",
+            color: "#fff",
+          },
         });
         setToastShown(true); // Mark toast as shown
       }
@@ -35,15 +56,41 @@ const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
       window.removeEventListener("resize", handleResize);
     };
   }, [toastShown]);
+
   return (
-    <Box display="flex" sx={{ overflowX: 'hidden !important' }} minHeight={"100vh"}>
-      <ToastContainer position="bottom-left" autoClose={3000} stacked={false} />
-      <Box sx={{ maxHeight: '132vh', minHeight: '100vh', '@media (max-width: 900px)': { position: 'absolute', top:"3px" }, '@media (min-width: 900px)': { background: "linear-gradient(to bottom, white, #F8EFDA)", position:'fixed' } }}>
+    <Box display="flex" sx={{ overflowX: "hidden !important" }} minHeight="100vh">
+      <Toaster />
+      <Box
+        sx={{
+          maxHeight: "132vh",
+          minHeight: "100vh",
+          "@media (max-width: 900px)": {
+            position: "absolute",
+            top: "3px",
+          },
+          "@media (min-width: 900px)": {
+            background: "linear-gradient(to bottom, white, #F8EFDA)",
+            position: "fixed",
+          },
+        }}
+      >
         <Sidebar selectedKey={selectedKey} onSelect={onSelect} />
       </Box>
-      <Box sx={{ flex: 1, background: '#F3F5F8', '@media (min-width: 900px)': { width: 'calc(100% - 251px)', marginLeft:'284px' }, width: '100%' }}>{children}</Box>
+      <Box
+        sx={{
+          flex: 1,
+          background: "#F3F5F8",
+          "@media (min-width: 900px)": {
+            width: "calc(100% - 251px)",
+            marginLeft: "284px",
+          },
+          width: "100%",
+        }}
+      >
+        {children}
+      </Box>
     </Box>
-  )
+  );
 };
 
-export default Layout;
+export default Layout;
\ No newline at end of file
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 434d40e..721af4f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,7 +8,6 @@ import "../styles/global.css";
 import { AppProps } from "next/app";
 import customTheme from "@/styles/CustomTheme";
 import { useEffect, useState } from "react";
-import { toast, ToastContainer } from "react-toastify";
 
 export default function App({ Component, pageProps }: AppProps) {
 
@@ -16,7 +15,6 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <CssVarsProvider theme={customTheme}>
-      <ToastContainer position="bottom-left" autoClose={3000} stacked={false} />
       <Component {...pageProps} />;
     </CssVarsProvider>
   );