diff --git a/src/Components/Banner/AddBanner.jsx b/src/Components/Banner/AddBanner.jsx
index e33f46c..fee195e 100644
--- a/src/Components/Banner/AddBanner.jsx
+++ b/src/Components/Banner/AddBanner.jsx
@@ -206,7 +206,20 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
               placeholder="Heading"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={formData?.heading?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={
+                formData?.heading?.length > 50
+                  ? "red"
+                  : "gray.500"
+              }
+              className="web-text-small"
+            >
+              If heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.heading?.length} characters
+            </FormHelperText>
             {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.heading.message}
@@ -218,12 +231,25 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Sub Heading
             </FormLabel>
-            <Input
+            <Textarea
               {...register("sub_heading")}
               placeholder="Sub Heading"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={formData?.sub_heading.length > 230}
             />
+          
+            <FormHelperText
+              color={
+                formData?.sub_heading.length > 230
+                  ? "red"
+                  : "gray.500"
+              }
+              className="web-text-small"
+            >
+              If sub heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.sub_heading.length} characters
+            </FormHelperText>
             {errors.sub_heading && (
               <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 " />{" "}
@@ -241,10 +267,18 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
               placeholder="Button title"
               className="web-text-medium"
               size="sm"
-              maxLength={90}
+              errorBorderColor="crimson"
+              isInvalid={formData?.CTO_button_title.length > 30}
             />
-            <FormHelperText className="web-text-small">
-              Maximum characters must be 100 characters.
+            <FormHelperText
+              color={
+                formData?.CTO_button_title.length > 30
+                  ? "red"
+                  : "gray.500"
+              }
+              className="web-text-small"
+            >
+              If Button title crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.CTO_button_title.length} characters
             </FormHelperText>
 
             {errors.CTO_button_title && (
diff --git a/src/Components/Banner/BannerEdit.jsx b/src/Components/Banner/BannerEdit.jsx
index af0c85e..8b353c9 100644
--- a/src/Components/Banner/BannerEdit.jsx
+++ b/src/Components/Banner/BannerEdit.jsx
@@ -45,7 +45,11 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}
   const [isLoadingEdit, setIsLoadingEdit] = useState(false);
   const [selectedImage, setSelectedImage] = useState();
   const [largeImageData, setLargeImageData] = useState(null);
-  // const [formData, setFormData] = useState()
+  const [title, setTitle] = useState("");
+
+  const handleTitleChange = (e) => {
+    setTitle(e.target.value);
+  };
 
 
   const {
@@ -264,7 +268,20 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}
             name="heading"
             type="text"
             id="heading"
+            errorBorderColor="crimson"
+            isInvalid={formData?.heading.length > 50}
+            // maxLength={51}
           />
+          <FormHelperText
+            color={
+              formData?.heading.length > 50
+                ? "red"
+                : "gray.500"
+            }
+            className="web-text-small"
+          >
+            If heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.heading.length} characters
+          </FormHelperText>
           {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 " />{" "}
@@ -284,7 +301,20 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}
             size="sm"
             id="sub_heading"
             name="sub_heading"
+            errorBorderColor="crimson"
+            isInvalid={formData?.sub_heading.length > 230}
           />
+          
+          <FormHelperText
+            color={
+              formData?.sub_heading.length > 230
+                ? "red"
+                : "gray.500"
+            }
+            className="web-text-small"
+          >
+            If sub heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.sub_heading.length} characters
+          </FormHelperText>
           {errors.sub_heading && (
             <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 " />{" "}
@@ -299,15 +329,24 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}
           </FormLabel>
           <Input
             {...register("CTO_button_title")}
-            placeholder="CTO_button_title"
+            placeholder="Button title"
             className="web-text-medium"
             size="sm"
             maxLength={90}
             id="CTO_button_title"
             name="CTO_button_title"
+            errorBorderColor="crimson"
+            isInvalid={formData?.CTO_button_title.length > 30}
           />
-          <FormHelperText className="web-text-small">
-            Maximum characters must be 100 characters.
+          <FormHelperText
+            color={
+              formData?.CTO_button_title.length > 30
+                ? "red"
+                : "gray.500"
+            }
+            className="web-text-small"
+          >
+            If sub heading crosses 50 characters it will cause problem in alignment on website.you have entered {formData?.CTO_button_title.length} characters
           </FormHelperText>
 
           {errors.CTO_button_title && (
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 9821b5f..54459d4 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -128,7 +128,7 @@ const DashboardLayout = () => {
         // onMouseOver={() => setIsDrawerOpen(true)}
         // onMouseLeave={() => setIsDrawerOpen(false)}
         style={{
-          width: isDrawerOpen || openDrawerClick ? 225 : 66,
+          width: isDrawerOpen || openDrawerClick ? 225 : 78,
           transition: "width 0.3s ease-in-out", // Smooth transition for width change
           overflow: "hidden", // Hide overflow to prevent content overflow during transition
           // backgroundColor:"#FAFBFC"
@@ -147,7 +147,7 @@ const DashboardLayout = () => {
           ) : (
             <img
               style={{
-                width: 25,
+                width: 40,
               }}
               src={logoMini}
               alt="Logo"
@@ -159,13 +159,13 @@ const DashboardLayout = () => {
           {nav.map(({ title, path, Icon }, index) => (
             <Box 
             color={'whitesmoke'}
-            key={index} className=" mb-1 w-100 d-flex ">
+            key={index} className=" mb-1 w-100 d-flex  ">
               {path ? (
                 <NavLink
                   style={{
                     height: "auto",
                   }}
-                  className={`${isDrawerOpen || openDrawerClick ? "p-1 web-text-medium" : "p-2 web-text-large"}  rounded-2  link  d-flex align-items-center gap-2 w-100 ps-3 `}
+                  className={`${isDrawerOpen || openDrawerClick ? "p-1 web-text-medium ps-3" : "p-2 ps-1 web-text-xlarge justify-content-center"}  rounded-1  link  d-flex align-items-center gap-2 w-100   `}
                   to={path}
                 >
                   <span
@@ -262,7 +262,7 @@ const DashboardLayout = () => {
       <main
         className={`h-100 ${isDrawerOpen || openDrawerClick ? "ps-3" : "ps-3"}`}
         style={{
-          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 225 : 66}px)`,
+          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 225 : 78}px)`,
           transition: "width 0.3s ease-in-out",
           position: "relative",
           // boxShadow:
diff --git a/src/Pages/Banners/HomeBanner/HomeBannerAdd.jsx b/src/Pages/Banners/HomeBanner/HomeBannerAdd.jsx
index d1513ec..9c065c4 100644
--- a/src/Pages/Banners/HomeBanner/HomeBannerAdd.jsx
+++ b/src/Pages/Banners/HomeBanner/HomeBannerAdd.jsx
@@ -5,6 +5,7 @@ const HomeBannerAdd = () => {
   const [createLearnBannerData] = useCreateHomeBannerMutation();
   return (
     <AddBanner
+    center={true}
       title={"Home banner"}
       navigateLink={"/banner/home"}
       createApi={createLearnBannerData}
diff --git a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
index bb886e4..9188d98 100644
--- a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
@@ -366,9 +366,9 @@ const AddBlogsAndArticles = () => {
                 className="web-text-medium"
                 size="sm"
               />
-              <FormHelperText className="web-text-small">
+              {/* <FormHelperText className="web-text-small">
                 Please share proper linked in link here.
-              </FormHelperText>
+              </FormHelperText> */}
               {errors.summary && (
                 <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 " />{" "}
@@ -386,11 +386,11 @@ const AddBlogsAndArticles = () => {
               <Textarea
                 rows={4}
                 {...register("meta_description")}
-                onChange={handleDescriptionChange}
                 placeholder="Blog description"
                 className="web-text-medium"
                 errorBorderColor="crimson"
                 isInvalid={metaDescription.length > 160}
+                onChange={handleDescriptionChange}
                 size="sm"
               />