diff --git a/src/Components/Banner/AddBanner.jsx b/src/Components/Banner/AddBanner.jsx
index 0150a34..224fa15 100644
--- a/src/Components/Banner/AddBanner.jsx
+++ b/src/Components/Banner/AddBanner.jsx
@@ -29,6 +29,7 @@ import { useNavigate } from "react-router-dom";
 import Loader01 from "../../Components/Loaders/Loader01";
 import Header from "../Header";
 import ToastBox from "../ToastBox";
+import BannerMainCard from "./BannerMainCard";
 
 const AddBanner = ({ createApi, navigateLink, title }) => {
   const toast = useToast();
@@ -41,10 +42,13 @@ const AddBanner = ({ createApi, navigateLink, title }) => {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(addCommunityBannerSchema),
   });
+  
+  const formData = watch();
 
   const onSubmit = async (data) => {
     console.log(data);
@@ -142,14 +146,26 @@ const AddBanner = ({ createApi, navigateLink, title }) => {
             className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
           >
             <>
-              <Image
+              {/* <Image
                 shadow={"md"}
                 rounded={8}
                 w={500}
                 h={240}
                 src={selectedImage}
                 alt="Selected Image"
-              />
+              /> */}
+
+
+<BannerMainCard
+            imgLink={selectedImage}
+            heading={formData?.heading}
+            subHeading={formData?.sub_heading}
+            buttonTitle={formData?.CTO_button_title}
+            />
+
+
+
+
               {selectedImage === fallbackImage || largeImageData === null ? (
                 ""
               ) : (
@@ -178,7 +194,7 @@ const AddBanner = ({ createApi, navigateLink, title }) => {
 
         <form
           onSubmit={handleSubmit(onSubmit)}
-          className="col-7 pt-4 mb-3  overflow-auto p-4"
+          className="col-7 pt-4  overflow-auto p-4"
         >
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
@@ -351,7 +367,7 @@ const AddBanner = ({ createApi, navigateLink, title }) => {
             </FormHelperText>
           </FormControl>
 
-          <Box className=" d-flex justify-content-end mb-5">
+          <Box className=" d-flex justify-content-end mb-0">
             <Button
               isLoading={isLoading}
               spinner={<Loader01 />}
diff --git a/src/Components/Banner/BannerEdit.jsx b/src/Components/Banner/BannerEdit.jsx
index e081e8d..02325e1 100644
--- a/src/Components/Banner/BannerEdit.jsx
+++ b/src/Components/Banner/BannerEdit.jsx
@@ -35,6 +35,7 @@ import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import fallbackImage from "../../assets/ultp-fallback-img.webp";
 import Header from "../../Components/Header";
 import CommunityBannerCard from "../../Pages/Community/CommunityBannerCard";
+import BannerMainCard from "./BannerMainCard";
 
 const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
   const { id } = useParams();
@@ -196,51 +197,12 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
             /> */}
 
 
-
-
-            <Box
-              shadow={"md"}
-              rounded={8}
-              w={469}
-              h={250}
-              borderRadius={'sm'}
-              bgImage={selectedImage}
-              bgSize="cover"
-              bgPosition="center"
-              ps={8}
-              pt={14}
-              >
-                <Text w={"70%"}fontSize={"19px"} className="fw-bolder" color={"#DE858E"} display={'block'} as={"span"}>
-                  {formData?.heading}
-                </Text>
-                <Text w={"70%"} fontSize={"10px"} mt={1} className=" fw-normal" color={"#ffffff"} display={'block'} as={"span"}>
-                  {formData?.sub_heading}
-                </Text>
-                <Button
-              fontWeight={"normal"}
-              fontSize={"9px"}
-              ps={4}
-              pe={4}
-              pt={1}
-              pb={1}
-              mt={2}
-              color={"#ffffff"}
-              _hover={{
-                bgGradient:"linear(to-r, #1E114B, purple)"
-              }}
-              // bg={'#1E114B'}
-              // bgGradient="linear(to-r, #1E114B, purple)"
-              variant={"outline"}
-              // colorScheme="purple"
-              rounded={4}
-              size={"xs"}
-              // border={'1px soild #fff'}
-              
-            >
-              {formData?.CTO_button_title}
-            </Button>
-
-            </Box>
+            <BannerMainCard
+            imgLink={selectedImage}
+            heading={formData?.heading}
+            subHeading={formData?.sub_heading}
+            buttonTitle={formData?.CTO_button_title}
+            />
 
 
 
diff --git a/src/Components/Banner/BannerMainCard.jsx b/src/Components/Banner/BannerMainCard.jsx
new file mode 100644
index 0000000..d2b673a
--- /dev/null
+++ b/src/Components/Banner/BannerMainCard.jsx
@@ -0,0 +1,52 @@
+import { Box, Button, Text } from '@chakra-ui/react'
+import React from 'react'
+
+const BannerMainCard = ({heading, subHeading, buttonTitle, imgLink}) => {
+  return (
+    <Box
+    shadow={"md"}
+    rounded={8}
+    w={469}
+    h={250}
+    borderRadius={'sm'}
+    bgImage={imgLink}
+    bgSize="cover"
+    bgPosition="center"
+    ps={8}
+    pt={14}
+    >
+      <Text w={"70%"}fontSize={"19px"} className="fw-bolder" color={"#DE858E"} display={'block'} as={"span"}>
+        {heading}
+      </Text>
+      <Text w={"70%"} fontSize={"10px"} mt={1} className=" fw-normal" color={"#ffffff"} display={'block'} as={"span"}>
+        {subHeading}
+      </Text>
+      <Button
+    fontWeight={"normal"}
+    fontSize={"9px"}
+    ps={4}
+    pe={4}
+    pt={1}
+    pb={1}
+    mt={2}
+    color={"#ffffff"}
+    _hover={{
+      bgGradient:"linear(to-r, #1E114B, purple)"
+    }}
+    // bg={'#1E114B'}
+    // bgGradient="linear(to-r, #1E114B, purple)"
+    variant={"outline"}
+    // colorScheme="purple"
+    rounded={4}
+    size={"xs"}
+    // border={'1px soild #fff'}
+    
+  >
+    {buttonTitle}
+  </Button>
+
+  </Box>
+  )
+}
+
+export default BannerMainCard
\ No newline at end of file
diff --git a/src/Components/Banner/BannerView.jsx b/src/Components/Banner/BannerView.jsx
index 508c3b9..c1417fd 100644
--- a/src/Components/Banner/BannerView.jsx
+++ b/src/Components/Banner/BannerView.jsx
@@ -15,6 +15,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
+import BannerMainCard from "./BannerMainCard";
 
 const BannerView = ({data, isLoading, editLink}) => {
   const banner = data?.data;
@@ -66,49 +67,19 @@ const BannerView = ({data, isLoading, editLink}) => {
               src={`https://rubix.betadelivery.com/${banner?.banner_image}`}
               alt="Selected Image"
             /> */}
-            <Box
-              shadow={"md"}
-              rounded={8}
-              w={469}
-              h={250}
-              borderRadius={'sm'}
-              bgImage={`https://rubix.betadelivery.com/${banner?.banner_image}`}
-              bgSize="cover"
-              bgPosition="center"
-              ps={8}
-              pt={14}
-              >
-                <Text w={"70%"}fontSize={"19px"} className="fw-bolder" color={"#DE858E"} display={'block'} as={"span"}>
-                  {banner?.Heading}
-                </Text>
-                <Text w={"70%"} fontSize={"9px"} mt={1} className=" fw-normal" color={"#ffffff"} display={'block'} as={"span"}>
-                  {banner?.sub_heading}
-                </Text>
-                <Button
-              fontWeight={"normal"}
-              fontSize={"9px"}
-              ps={4}
-              pe={4}
-              pt={1}
-              pb={1}
-              mt={2}
-              color={"#ffffff"}
-              _hover={{
-                bgGradient:"linear(to-r, #1E114B, purple)"
-              }}
-              // bg={'#1E114B'}
-              // bgGradient="linear(to-r, #1E114B, purple)"
-              variant={"outline"}
-              // colorScheme="purple"
-              rounded={4}
-              size={"xs"}
-              // border={'1px soild #fff'}
-              
-            >
-              {banner?.CTO_button_title}
-            </Button>
 
-            </Box>
+            <BannerMainCard 
+            imgLink={`https://rubix.betadelivery.com/${banner?.banner_image}`}
+            heading={banner?.Heading}
+            subHeading={banner?.sub_heading}
+            buttonTitle={banner?.CTO_button_title}
+            />
+
+
+
+
+
+
           </Box>
         </Box>