diff --git a/src/Components/Banner/BannerTable.jsx b/src/Components/Banner/BannerTable.jsx
index 0282675..1185d0f 100644
--- a/src/Components/Banner/BannerTable.jsx
+++ b/src/Components/Banner/BannerTable.jsx
@@ -202,7 +202,7 @@ const BannerCommunity = ({
       Active: (
         <Switch
           size={"sm"}
-          colorScheme="teal"
+          colorScheme="purple"
           onChange={() => handleUpdateStatus(item.id, item?.status)}
           isChecked={item.status}
           // disabled={item.status}
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index e681f3d..44fa9a1 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -13,12 +13,12 @@ const Header = ({ link, btnTitle, title }) => {
       top={0}
       zIndex={999}
       className={`${
-        link && btnTitle ? "" : " pt-3 pb-3"
-      } p-2  pe-2  fw-400   border-bottom d-flex justify-content-between align-items-center`}
+        link && btnTitle ? "" : " pt-3 pb-3 "
+      } p-2  pe-2 ps-0 fw-400   border-bottom d-flex justify-content-between align-items-center`}
     >
       {/* <span className="fs-5">Community</span> */}
 
-      <Text as={"span"} fontWeight={'bold'} color={"puple.800"} className="fs-6 ">
+      <Text as={"span"} fontWeight={'bold'} color={"purple.900"} className="fs-6 ">
         {title}
       </Text>
 
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 0253900..9821b5f 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -270,11 +270,7 @@ const DashboardLayout = () => {
         }}
       >
         <Button
-          backgroundColor={'#DE858E'}
-          _hover={{
-            backgroundColor: "pink.400",
-          }}
-          color={'whitesmoke'}
+          colorScheme={'peach'}
           rounded={'sm'}
           // onMouseOver={() => setIsDrawerOpen(true)}
           // onMouseLeave={() => setIsDrawerOpen(false)}
diff --git a/src/Pages/Banners/Banner.jsx b/src/Pages/Banners/Banner.jsx
index 88da5e8..a75a15b 100644
--- a/src/Pages/Banners/Banner.jsx
+++ b/src/Pages/Banners/Banner.jsx
@@ -20,7 +20,7 @@ const Banner = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
-      <Header title={"👋🏻 Hi, Admin"} />
+      <Header title={"Banners"} />
 
       
       <BannerStack
diff --git a/src/Pages/BlogsAndArticles/BlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/BlogsAndArticles.jsx
index 85f3024..61a0358 100644
--- a/src/Pages/BlogsAndArticles/BlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/BlogsAndArticles.jsx
@@ -217,7 +217,7 @@ const BlogsAndArticles = () => {
           w={200}
         >
           {item?.tags?.map(({ id, tag }) => (
-            <Badge rounded={'full'} key={id} variant="solid"  size={"sm"} ps={3} pe={3} pt={0.5} pb={0.5}  backgroundColor={'#565263'}>
+            <Badge rounded={'full'} key={id} variant="solid" fontWeight={'normal'}  size={"sm"} ps={3} pe={3} pt={0.5} pb={0.5}  backgroundColor={'#565263'}>
               {tag}
             </Badge>
           ))}
diff --git a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx
index 1bff3b5..1a1283b 100644
--- a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx
@@ -202,6 +202,211 @@ const EditBlogsAndArticles = () => {
     >
       <Header title={"Blog"} />
       <form className="w-100" onSubmit={handleSubmit(onSubmit)}>
+
+        
+
+      <Box display={"flex"}>
+          <Box className="col-5 d-flex flex-column gap-2 pt-4">
+            {/* <span className="web-text-large fw-bold rubix-text-dark">
+                Author's Info
+              </span>
+              <span className="web-text-medium text-secondary">
+                Select the platform for which you need to create this campaign.
+              </span>
+  
+              <Divider /> */}
+
+            <span className="web-text-large fw-bold rubix-text-dark">
+              Author's display profile
+            </span>
+            <span className="web-text-medium text-secondary mb-0">
+              Below is the profile that will be displayed on the community page.
+            </span>
+            <Box
+              boxSize="sm"
+              className="d-flex flex-column align-items-center gap-3 justify-content-center"
+            >
+              <Image
+                shadow={"md"}
+                rounded={8}
+                w={214}
+                h={240}
+                src={selectedImage}
+                alt="Selected Image"
+              />
+              {selectedImage === fallbackImage ? (
+                ""
+              ) : (
+                <Box display={"flex"} flexDirection={"column"} w={"100%"}>
+                  <span className="web-text-small">{smallImageData?.name}</span>
+                  <span className="web-text-small text-secondary fst-italic">
+                    {(smallImageData?.size / (1024 * 1024)).toFixed(2)} mb
+                  </span>
+                </Box>
+              )}
+              <Button
+                onClick={() => setSelectedImage(fallbackImage)}
+                backgroundColor="red.400"
+                color={"whitesmoke"}
+                transition={"0.5s"}
+                _hover={{
+                  backgroundColor: "red.500",
+                }}
+                size="xs"
+              >
+                Remove
+              </Button>
+            </Box>
+          </Box>
+
+          <Box className="col-7 pt-4 p-4">
+            <FormControl isRequired className="mb-3">
+              <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                Author name
+              </FormLabel>
+              <Input
+                {...register("author_name")}
+                placeholder="Name"
+                className="web-text-medium"
+                size="sm"
+              />
+              {errors.name && (
+                <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                  <TiWarning className="fw-bold fs-5 " />{" "}
+                  {errors.author_name.message}
+                </span>
+              )}
+            </FormControl>
+
+            <FormControl isRequired className="mb-3">
+              <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                Author designation
+              </FormLabel>
+              <Input
+                {...register("author_designation")}
+                placeholder="Author designation"
+                className="web-text-medium"
+                size="sm"
+              />
+              {errors.author_designation && (
+                <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                  <TiWarning className="fw-bold fs-5 " />{" "}
+                  {errors.author_designation.message}
+                </span>
+              )}
+            </FormControl>
+
+            <FormControl isRequired className="mb-3">
+              <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                Display profile
+              </FormLabel>
+              {/* <ImageDropBox /> */}
+
+              <Box
+                borderColor="gray.300"
+                borderStyle="dashed"
+                borderWidth="2px"
+                rounded="md"
+                shadow="sm"
+                role="group"
+                transition="all 150ms ease-in-out"
+                _hover={{
+                  shadow: "md",
+                }}
+                as={motion.div}
+                initial="rest"
+                animate="rest"
+                whileHover="hover"
+                height={105}
+                className="pointer"
+              >
+                <Box position="relative" height="100%" width="100%">
+                  <Box
+                    position="absolute"
+                    top="0"
+                    left="0"
+                    height="100%"
+                    width="100%"
+                    display="flex"
+                    flexDirection="column"
+                  >
+                    <Stack
+                      height="100%"
+                      width="100%"
+                      display="flex"
+                      alignItems="center"
+                      justify="center"
+                    >
+                      <span
+                        className="d-flex flex-column align-items-center pointer"
+                        spacing="1"
+                      >
+                        <Heading
+                          fontSize="lg"
+                          color="gray.700"
+                          fontWeight="bold"
+                          cursor={"pointer"}
+                        >
+                          Drop images here
+                        </Heading>
+                        <span
+                          fontWeight="light"
+                          className="web-text-large text-secondary text-center pointer"
+                        >
+                          or click to upload
+                        </span>
+                      </span>
+                    </Stack>
+                  </Box>
+                  <Input
+                    {...register("profile_image")}
+                    type="file"
+                    height="100%"
+                    width="100%"
+                    position="absolute"
+                    top="0"
+                    left="0"
+                    opacity="0"
+                    aria-hidden="true"
+                    accept="image/*"
+                    onChange={handleImageChange}
+                    onDrop={handleImageChange}
+                    //   onDragEnter={startAnimation}
+                    //   onDragLeave={stopAnimation}
+                  />
+                </Box>
+              </Box>
+
+              {errors.profile_image && (
+                <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                  <TiWarning className="fw-bold fs-5 " />{" "}
+                  {errors.profile_image.message}
+                </span>
+              )}
+              <FormHelperText className="web-text-small">
+                Maximum limit of image is 5mb.
+              </FormHelperText>
+            </FormControl>
+
+            <Box className=" d-flex justify-content-end">
+              <Button
+                isLoading={isLoading01}
+                spinner={<Loader01 />}
+                color={"whitesmoke"}
+                backgroundColor={"purple.900"}
+                _hover={{
+                  backgroundColor: "purple.800",
+                }}
+                type="submit"
+                size="sm"
+                rounded={"sm"}
+              >
+                Save edit
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+        <Divider />
         <Box display={"flex"}>
           <Box className="col-5 d-flex flex-column justify-content-between gap-2 pt-4">
             <Box flexDirection={"column"} display={"flex"}>
@@ -575,209 +780,6 @@ const EditBlogsAndArticles = () => {
             </FormControl>
           </Box>
         </Box>
-        <Divider />
-
-        <Box display={"flex"}>
-          <Box className="col-5 d-flex flex-column gap-2 pt-4">
-            {/* <span className="web-text-large fw-bold rubix-text-dark">
-                Author's Info
-              </span>
-              <span className="web-text-medium text-secondary">
-                Select the platform for which you need to create this campaign.
-              </span>
-  
-              <Divider /> */}
-
-            <span className="web-text-large fw-bold rubix-text-dark">
-              Author's display profile
-            </span>
-            <span className="web-text-medium text-secondary mb-0">
-              Below is the profile that will be displayed on the community page.
-            </span>
-            <Box
-              boxSize="sm"
-              className="d-flex flex-column align-items-center gap-3 justify-content-center"
-            >
-              <Image
-                shadow={"md"}
-                rounded={8}
-                w={214}
-                h={240}
-                src={selectedImage}
-                alt="Selected Image"
-              />
-              {selectedImage === fallbackImage ? (
-                ""
-              ) : (
-                <Box display={"flex"} flexDirection={"column"} w={"100%"}>
-                  <span className="web-text-small">{smallImageData?.name}</span>
-                  <span className="web-text-small text-secondary fst-italic">
-                    {(smallImageData?.size / (1024 * 1024)).toFixed(2)} mb
-                  </span>
-                </Box>
-              )}
-              <Button
-                onClick={() => setSelectedImage(fallbackImage)}
-                backgroundColor="red.400"
-                color={"whitesmoke"}
-                transition={"0.5s"}
-                _hover={{
-                  backgroundColor: "red.500",
-                }}
-                size="xs"
-              >
-                Remove
-              </Button>
-            </Box>
-          </Box>
-
-          <Box className="col-7 pt-4 p-4">
-            <FormControl isRequired className="mb-3">
-              <FormLabel className="web-text-large fw-bold rubix-text-dark">
-                Author name
-              </FormLabel>
-              <Input
-                {...register("author_name")}
-                placeholder="Name"
-                className="web-text-medium"
-                size="sm"
-              />
-              {errors.name && (
-                <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                  <TiWarning className="fw-bold fs-5 " />{" "}
-                  {errors.author_name.message}
-                </span>
-              )}
-            </FormControl>
-
-            <FormControl isRequired className="mb-3">
-              <FormLabel className="web-text-large fw-bold rubix-text-dark">
-                Author designation
-              </FormLabel>
-              <Input
-                {...register("author_designation")}
-                placeholder="Author designation"
-                className="web-text-medium"
-                size="sm"
-              />
-              {errors.author_designation && (
-                <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                  <TiWarning className="fw-bold fs-5 " />{" "}
-                  {errors.author_designation.message}
-                </span>
-              )}
-            </FormControl>
-
-            <FormControl isRequired className="mb-3">
-              <FormLabel className="web-text-large fw-bold rubix-text-dark">
-                Display profile
-              </FormLabel>
-              {/* <ImageDropBox /> */}
-
-              <Box
-                borderColor="gray.300"
-                borderStyle="dashed"
-                borderWidth="2px"
-                rounded="md"
-                shadow="sm"
-                role="group"
-                transition="all 150ms ease-in-out"
-                _hover={{
-                  shadow: "md",
-                }}
-                as={motion.div}
-                initial="rest"
-                animate="rest"
-                whileHover="hover"
-                height={105}
-                className="pointer"
-              >
-                <Box position="relative" height="100%" width="100%">
-                  <Box
-                    position="absolute"
-                    top="0"
-                    left="0"
-                    height="100%"
-                    width="100%"
-                    display="flex"
-                    flexDirection="column"
-                  >
-                    <Stack
-                      height="100%"
-                      width="100%"
-                      display="flex"
-                      alignItems="center"
-                      justify="center"
-                    >
-                      <span
-                        className="d-flex flex-column align-items-center pointer"
-                        spacing="1"
-                      >
-                        <Heading
-                          fontSize="lg"
-                          color="gray.700"
-                          fontWeight="bold"
-                          cursor={"pointer"}
-                        >
-                          Drop images here
-                        </Heading>
-                        <span
-                          fontWeight="light"
-                          className="web-text-large text-secondary text-center pointer"
-                        >
-                          or click to upload
-                        </span>
-                      </span>
-                    </Stack>
-                  </Box>
-                  <Input
-                    {...register("profile_image")}
-                    type="file"
-                    height="100%"
-                    width="100%"
-                    position="absolute"
-                    top="0"
-                    left="0"
-                    opacity="0"
-                    aria-hidden="true"
-                    accept="image/*"
-                    onChange={handleImageChange}
-                    onDrop={handleImageChange}
-                    //   onDragEnter={startAnimation}
-                    //   onDragLeave={stopAnimation}
-                  />
-                </Box>
-              </Box>
-
-              {errors.profile_image && (
-                <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                  <TiWarning className="fw-bold fs-5 " />{" "}
-                  {errors.profile_image.message}
-                </span>
-              )}
-              <FormHelperText className="web-text-small">
-                Maximum limit of image is 5mb.
-              </FormHelperText>
-            </FormControl>
-
-            <Box className=" d-flex justify-content-end">
-              <Button
-                isLoading={isLoading01}
-                spinner={<Loader01 />}
-                color={"whitesmoke"}
-                backgroundColor={"purple.900"}
-                _hover={{
-                  backgroundColor: "purple.800",
-                }}
-                type="submit"
-                size="sm"
-                rounded={"sm"}
-              >
-                Save edit
-              </Button>
-            </Box>
-          </Box>
-        </Box>
       </form>
     </Box>
   );
diff --git a/src/Pages/BlogsAndArticles/ViewBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/ViewBlogsAndArticles.jsx
index ef02508..77f797a 100644
--- a/src/Pages/BlogsAndArticles/ViewBlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/ViewBlogsAndArticles.jsx
@@ -38,7 +38,54 @@ const ViewBlogsAndArticles = () => {
       btnTitle={'Edit blog'}
       link={`/blogs-articles/edit/${id}`}
       />
+
+
       
+<Box display={"flex"}>
+        <Box className="col-5 d-flex flex-column gap-2 pt-4">
+          <span className="web-text-large fw-bold rubix-text-dark">
+            Author's display profile
+          </span>
+          <span className="web-text-medium text-secondary mb-4">
+            Below is the profile that will be displayed on the community page.
+          </span>
+
+          <Box
+            className="d-flex  w-100 justify-content-center flex-column align-items-center "
+          >
+            <Image
+              shadow={"md"}
+              rounded={8}
+              w={214}
+              h={240}
+              src={`https://rubix.betadelivery.com/${blog?.profile_image}`}
+              alt="Selected Image"
+            />
+          </Box>
+        </Box>
+
+        <Box className="col-7 pt-4  p-4">
+          <Box className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Author name
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {blog?.author_name}
+            </Box>
+          </Box>
+
+          <Box className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Author designation
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {blog?.author_designation}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      
+      <Divider mt={50} />
       <Box display={"flex"}>
         <Box className="col-5  d-flex flex-column gap-2 pt-4">
           <span className="web-text-large fw-bold rubix-text-dark">
@@ -172,52 +219,7 @@ const ViewBlogsAndArticles = () => {
         </Box>
       </Box>
 
-      <Divider />
 
-      <Box display={"flex"}>
-        <Box className="col-5 d-flex flex-column gap-2 pt-4">
-          <span className="web-text-large fw-bold rubix-text-dark">
-            Author's display profile
-          </span>
-          <span className="web-text-medium text-secondary mb-4">
-            Below is the profile that will be displayed on the community page.
-          </span>
-
-          <Box
-            boxSize="sm"
-            className="d-flex  w-100 justify-content-start flex-column align-items-center gap-3"
-          >
-            <Image
-              shadow={"md"}
-              rounded={8}
-              w={214}
-              h={240}
-              src={`https://rubix.betadelivery.com/${blog?.profile_image}`}
-              alt="Selected Image"
-            />
-          </Box>
-        </Box>
-
-        <Box className="col-7 pt-4  p-4">
-          <Box className="mb-3">
-            <Box className="web-text-large fw-bold rubix-text-dark">
-              Author name
-            </Box>
-            <Box className="web-text-medium text-secondary">
-              {blog?.author_name}
-            </Box>
-          </Box>
-
-          <Box className="mb-3">
-            <Box className="web-text-large fw-bold rubix-text-dark">
-              Author designation
-            </Box>
-            <Box className="web-text-medium text-secondary">
-              {blog?.author_designation}
-            </Box>
-          </Box>
-        </Box>
-      </Box>
     </Box>
   );
 };
diff --git a/src/Pages/Community/CommunityBannerCard.jsx b/src/Pages/Community/CommunityBannerCard.jsx
index 6fd6c3b..485ccb0 100644
--- a/src/Pages/Community/CommunityBannerCard.jsx
+++ b/src/Pages/Community/CommunityBannerCard.jsx
@@ -132,7 +132,7 @@ const CommunityBannerCard = ({
                 </Text>
               </Tooltip>
             </Box>
-            <Button
+            <Box
               fontWeight={"normal"}
               className="web-text-xsmall"
               ps={3}
@@ -151,7 +151,7 @@ const CommunityBannerCard = ({
               
             >
               {ctoBtnTitle}
-            </Button>
+            </Box>
           </Box>
 
           <Box display={"flex"} alignItems={"center"}>
@@ -166,7 +166,7 @@ const CommunityBannerCard = ({
         </Box>
       </CardBody>
       <span
-        className="web-text-xsmall fw-bold"
+        className="web-text-xsmall text-secondary fw-bold"
         style={{
           position: "absolute",
           bottom: 4,
diff --git a/src/Pages/Events/Events.jsx b/src/Pages/Events/Events.jsx
index b4a2019..1010fd9 100644
--- a/src/Pages/Events/Events.jsx
+++ b/src/Pages/Events/Events.jsx
@@ -155,7 +155,7 @@ const Events = () => {
       Status: (
         <Switch
           size={"sm"}
-          colorScheme="teal"
+          colorScheme="pink.500"
           onChange={() => handleUpdateStatus(item?.id)}
           isChecked={item?.status}
         />
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index 562f761..2f64b47 100644
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -23,6 +23,7 @@ import {
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Cookies from 'js-cookie';
 import { validationSchema } from "../Validations/Validations";
+import ToastBox from "../Components/ToastBox";
 
 const Login = () => {
   const { isAuthenticate, setIsAuthenticate } = useContext(GlobalStateContext);
@@ -47,10 +48,11 @@ const Login = () => {
         setIsAuthenticate(true)
         setIsLoading(false);
         toast({
-          title: "Logged In",
-          status: "success",
-          isClosable: true,
+          render: () => (
+            <ToastBox status={"success"} message={"Login succesfull"} />
+          ),
         });
+
         Cookies.set('isAuthenticated', true, { expires: 7 });
         navigate("/");
       }, 2000); // 3-second delay
diff --git a/src/Pages/UnderConstruction.jsx b/src/Pages/UnderConstruction.jsx
index 0793c67..d859231 100644
--- a/src/Pages/UnderConstruction.jsx
+++ b/src/Pages/UnderConstruction.jsx
@@ -16,7 +16,7 @@ const UnderConstruction = () => {
     >
       <Box w={300} className='d-flex justify-content-start align-items-center flex-column gap-2'>
         <Image src={noInternet} w={300} />
-        <Text color={'blue.800'} as={'span'} className='fw-bold'>Comming soon...</Text>
+        <Text color={'purple.900'} as={'span'} className='fw-bold'>Comming soon...</Text>
         </Box>
     </Box>
   )
diff --git a/src/Pages/Videos/AddVideos.jsx b/src/Pages/Videos/AddVideos.jsx
index f9effe3..bd2f4d8 100644
--- a/src/Pages/Videos/AddVideos.jsx
+++ b/src/Pages/Videos/AddVideos.jsx
@@ -229,7 +229,7 @@ const AddVideos = () => {
             </FormLabel>
             <Input
               {...register("embeddedCode")}
-              placeholder="https://youtu.be/..."
+              placeholder="https://www.youtube.com/embed/..."
               className="web-text-medium"
               size="sm"
             />
diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
new file mode 100644
index 0000000..de7f680
--- /dev/null
+++ b/src/Theme/Theme.js
@@ -0,0 +1,45 @@
+// theme.js
+import { extendTheme } from "@chakra-ui/react";
+
+const customTheme = extendTheme({
+  colors: {
+    customPink: {
+      50: '#ffe5e9',
+      100: '#ffbcc9',
+      200: '#ff93a8',
+      300: '#ff6a87',
+      400: '#ff4166',
+      500: '#ff1845', // you can choose your custom color values here
+      600: '#db1139',
+      700: '#b70d2d',
+      800: '#930921',
+      900: '#700616',
+    },
+    peach: {
+        50: '#ffe6e9',
+        100: '#f8c2c7',
+        200: '#ef9da4',
+        300: '#e67882',
+        400: '#dd5460',
+        500: '#DE858E', // primary shade for your custom color
+        600: '#DE858E',
+        700: '#DE858E',
+        800: '#DE858E',
+        900: '#DE858E',
+      },
+  
+  },
+  components: {
+    Switch: {
+      baseStyle: {
+        track: {
+          _checked: {
+            bg: '#fd1449', // using your custom color here
+          },
+        },
+      },
+    },
+  },
+});
+
+export default customTheme;
diff --git a/src/main.jsx b/src/main.jsx
index c14a531..dc04b23 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -8,9 +8,10 @@ import { PersistGate } from "redux-persist/integration/react";
 import { ChakraProvider } from "@chakra-ui/react";
 import GlobalStateProvider from "./Contexts/GlobalStateProvider";
 import { store } from "./Store/Store.js";
+import customTheme from "./Theme/Theme.js";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <ChakraProvider>
+  <ChakraProvider theme={customTheme} >
     <Provider store={store}>
       {/* <PersistGate loading={null} persistor={persistor}> */}
         <GlobalStateProvider>