diff --git a/public/images/shape-animation/dog-tag.svg b/public/images/shape-animation/dog-tag.svg
new file mode 100644
index 00000000..2a9ab7e4
--- /dev/null
+++ b/public/images/shape-animation/dog-tag.svg
@@ -0,0 +1,15 @@
+
+<svg id="Line_Gradient" data-name="Line Gradient" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .cls-1 { fill: url(#custom-gradient); }
+    </style>
+    <linearGradient id="custom-gradient" x1="4.00917" y1="32" x2="59.99083" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#091f40"/> <!-- Navy Blue -->
+      <stop offset="0.5" stop-color="#c5203e"/> <!-- Red -->
+      <stop offset="1" stop-color="#ffffff"/> <!-- White -->
+    </linearGradient>
+  </defs>
+  <title>Line Gradient</title>
+  <path class="cls-1" d="M40.03642,12.29256a2.4037,2.4037,0,0,0-3.38724-.00391L11.60938,37.31779a2.41571,2.41571,0,0,0,0,3.40081L23.27374,52.37327a2.4092,2.4092,0,0,0,3.4013,0l2.66012-2.66109A.99277.99277,0,0,1,30.739,51.1159L28.0788,53.777a4.39571,4.39571,0,0,1-6.20881,0L10.20562,42.12236a4.40528,4.40528,0,0,1-.00291-6.20542L35.24246,10.88786c2.14067-2.095,5.14718-1.48333,6.93251.73281a.9935.9935,0,0,1-1.40371,1.40573ZM32.15483,46.893a.99281.99281,0,0,0,1.40381,1.40369l19.5459-19.54686a4.39068,4.39068,0,0,0,.0048-6.19281l-.72412-.73484a.99281.99281,0,0,0-1.41341,1.3941l.73189.74255a2.39575,2.39575,0,0,1-.00294,3.38724ZM59.64345,14.847a37.51268,37.51268,0,0,1-4.50519,3.325l1.85852,1.85861a7.96827,7.96827,0,0,1-.00088,11.232L30.59015,57.67808a7.952,7.952,0,0,1-11.23151,0L6.32406,44.63322a7.96808,7.96808,0,0,1,.00039-11.231L27.5286,12.19757a.99281.99281,0,0,1,1.4038,1.40371L7.72828,34.806a5.97272,5.97272,0,0,0-.00153,8.42157L20.76288,56.27432a5.9623,5.9623,0,0,0,8.42351,0L55.593,29.8579a5.97443,5.97443,0,0,0,.00007-8.4235l-2.24093-2.24094a17.87487,17.87487,0,0,1-4.91966,1.79094,4.45761,4.45761,0,1,1,.052-2.03978,15.79355,15.79355,0,0,0,3.384-1.23483L42.558,8.39924a5.97023,5.97023,0,0,0-8.42351,0l-2.39255,2.39255a.99278.99278,0,0,1-1.4038-1.40372l2.39259-2.39259a7.96,7.96,0,0,1,11.23006-.001l1.85667,1.85667A36.59861,36.59861,0,0,1,49.1463,4.34405a.99252.99252,0,0,1,1.50264,1.29711,34.14878,34.14878,0,0,0-3.38767,4.65389L53.688,16.7218a35.19058,35.19058,0,0,0,4.66412-3.38324.99284.99284,0,0,1,1.2913,1.50846ZM46.22764,21.17841c-1.05727-.10474-3.36557.035-3.06088-1.58208a.99657.99657,0,0,1,1.235-.66887c1.06972.21927,2.9661.81129,1.47173-.80657a2.48632,2.48632,0,1,0,.35413,3.05752ZM24.32559,32.69353,27.169,30.6829l-.0446-3.48127a1.27261,1.27261,0,0,1,2.03681-1.0344l2.78812,2.07946,3.29708-1.11777a1.27336,1.27336,0,0,1,1.6151,1.61509L35.74372,32.0411l2.0814,2.79006a1.26142,1.26142,0,0,1,.11439,1.33783,1.2864,1.2864,0,0,1-1.1517.697l-3.48128-.0446-2.00917,2.84144a1.27333,1.27333,0,0,1-2.2559-.35772l-1.03294-3.32326L24.6838,34.94846a1.27346,1.27346,0,0,1-.35821-2.25493Zm2.32522.78719,2.30437.71642a1.26972,1.26972,0,0,1,.83711.83567l.71691,2.30631,1.39309-1.96992a1.24945,1.24945,0,0,1,1.05379-.538l2.41537.031-1.4435-1.934a1.27226,1.27226,0,0,1-.18323-1.174l.77265-2.2811-2.285.77458a1.27106,1.27106,0,0,1-1.17012-.18516l-1.93405-1.44254.031,2.412a1.27562,1.27562,0,0,1-.5395,1.0567Z"/>
+</svg>
diff --git a/src/assets/svgs/shape-2.svg b/src/assets/svgs/shape-2.svg
index ada85d12..6fb8bc37 100644
--- a/src/assets/svgs/shape-2.svg
+++ b/src/assets/svgs/shape-2.svg
@@ -1,7 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 395 397" version="1.1" width="395px" height="397px">
-    <g transform="translate(-51.000000, -1390.000000)">
-        <g transform="translate(-28.000000, 963.000000)">
-            <path d="M353.907509,817.715288 C386.112868,835.281848 455.192882,815.572841 468.907509,740.715288 C483.008804,663.747218 442.907509,661.715288 449.907509,633.715288 C478,592 483.008804,538.76355 453.907509,506.715288 C381.907509,431.715288 363.907509,521.715288 303.907509,466.715288 C279.650772,442.458551 242.907509,413.715288 189.907509,433.715288 C114.974471,461.991907 132.907509,521.005066 132.907509,563.715288 C132.907509,578.753612 85.1423289,607.023718 79.9075093,645.715288 C73.306976,694.501115 103.907509,758.715288 132.907509,780.715288 C178.907509,832.715288 249.907509,820.715288 281.907509,802.715288 C309.384918,787.259246 331.907509,805.715288 353.907509,817.715288 Z" fill="#091f40"></path>
-        </g>
-    </g>
+<svg id="b5823f4c-b0b0-4471-8ee2-882e7eef742d" data-name="Flat Gradient" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .gradient-fill { fill: url(#custom-gradient); }
+    </style>
+    <linearGradient id="custom-gradient" x1="4" y1="32" x2="60" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#091f40"/> <!-- Navy Blue -->
+      <stop offset="0.5" stop-color="#c5203e"/> <!-- Red -->
+      <stop offset="1" stop-color="#ffffff"/> <!-- White -->
+    </linearGradient>
+  </defs>
+  <path class="gradient-fill" d="M10.7272,39.97037H53.26944a2.87666,2.87666,0,0,0,2.87015-2.87014V12.299a2.87667,2.87667,0,0,0-2.87015-2.87015H10.7272A2.87666,2.87666,0,0,0,7.85706,12.299V37.10023A2.87665,2.87665,0,0,0,10.7272,39.97037Zm-.35-26.61136a1.45974,1.45974,0,0,1,1.45008-1.4601H52.16935a1.45974,1.45974,0,0,1,1.45009,1.4601V36.05019a1.45332,1.45332,0,0,1-1.45009,1.46009H11.82729a1.45331,1.45331,0,0,1-1.45008-1.46009ZM59.67975,48.43083l-4.61023-7.01037a1.94068,1.94068,0,0,0-1.62008-.87H10.5472a1.94068,1.94068,0,0,0-1.62008.87L4.31689,48.43083A1.93466,1.93466,0,0,0,5.937,51.431h52.1227A1.94989,1.94989,0,0,0,59.67975,48.43083Zm-34.90177-.57,1.17-1.78013a.70845.70845,0,0,1,.61-.33H37.4386a.70845.70845,0,0,1,.61.33l1.17005,1.78013a.74262.74262,0,0,1-.61,1.14006H25.388A.74261.74261,0,0,1,24.778,47.8608Zm13.33754.14H25.8749l.82-1.25007H37.29547ZM58.43969,51.831H5.55695a.50149.50149,0,0,0-.5.5A2.0172,2.0172,0,0,0,7.037,54.57115h49.9226A1.98465,1.98465,0,0,0,58.93972,52.591C58.97549,52.23493,58.86323,51.83169,58.43969,51.831Zm-1.48,1.74014h-.00312a.987.987,0,0,0,.95-.74009A.97982.97982,0,0,1,56.95964,53.57111ZM11.82729,36.51023H52.16935a.46345.46345,0,0,0,.45-.46V13.359a.45677.45677,0,0,0-.45-.46H11.82729a.45677.45677,0,0,0-.45.46V36.05019A.46345.46345,0,0,0,11.82729,36.51023ZM31.99832,13.709A11.01361,11.01361,0,0,1,42.99889,24.70957c-.61917,14.59611-21.3904,14.59149-22.00116-.00007A11.00719,11.00719,0,0,1,31.99832,13.709Z"/>
 </svg>
\ No newline at end of file
diff --git a/src/containers/blog/layout-01/index.tsx b/src/containers/blog/layout-01/index.tsx
index 0dcdea6b..fbc9c680 100644
--- a/src/containers/blog/layout-01/index.tsx
+++ b/src/containers/blog/layout-01/index.tsx
@@ -19,11 +19,20 @@ type TProps = TSection & {
     };
 };
 
-const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize }: TProps) => {
+const BlogArea = ({
+    data: { section_title, motto, blogs },
+    space,
+    bg,
+    titleSize,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
 
     return (
-        <Section className="blog-area tw-relative tw-overflow-hidden" space={space} bg={bg}>
+        <Section
+            className="blog-area tw-relative tw-overflow-hidden"
+            space={space}
+            bg={bg}
+        >
             <div className="tw-absolute tw-inset-0 tw-flex jtw-justify-center tw-items-center">
                 <img
                     src="/images/bg/shape-03.png"
@@ -110,9 +119,13 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[7px] tw-w-[60px] tw-h-[60px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 tw-top-[220px] tw-left-[260px]"
diff --git a/src/containers/contact-info/layout-01/index.tsx b/src/containers/contact-info/layout-01/index.tsx
index 12d7ceb8..8fa68613 100644
--- a/src/containers/contact-info/layout-01/index.tsx
+++ b/src/containers/contact-info/layout-01/index.tsx
@@ -29,7 +29,9 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             <span className="tw-text-lg tw-text-heading tw-leading-none tw-font-medium tw-mb-2.5">
                                 {section_title?.subtitle}
                             </span>
-                            <h2 className="tw-leading-none tw-mb-10">{section_title.title}</h2>
+                            <h2 className="tw-leading-none tw-mb-10">
+                                {section_title.title}
+                            </h2>
                         </>
                     )}
                     {items?.map((item) => (
@@ -43,7 +45,9 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                                     "tw-text-[32px] tw-text-primary tw-absolute tw-left-0 tw-top-0"
                                 )}
                             />
-                            <h3 className="tw-text-lg tw-mb-3.8">{item.title}</h3>
+                            <h3 className="tw-text-lg tw-mb-3.8">
+                                {item.title}
+                            </h3>
                             {item.texts?.map((text) => (
                                 <p
                                     key={text.id}
@@ -81,7 +85,10 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                         }}
                     >
                         <span data-depth="3">
-                            <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                            <img
+                                src="/images/shape-animation/about-shape-1.png"
+                                alt=""
+                            />
                         </span>
                     </motion.div>
 
@@ -92,7 +99,10 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             y: trans2().y,
                         }}
                     >
-                        <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                        <img
+                            src="/images/shape-animation/about-shape-1.png"
+                            alt=""
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-top-[255px] tw-left-2 sm:tw-top-[355px] sm:-tw-left-2 tw-z-20"
@@ -101,9 +111,13 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[42px] tw-h-[42px] md:tw-w-[62px] md:tw-h-[62px] md:tw-border-8">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-w-[100px] tw-bottom-3.8 tw-right-5 sm:tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] md:tw-w-auto"
@@ -121,7 +135,10 @@ const ContactInfo = ({ data: { section_title, items, images } }: TProps) => {
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/nwesletter-shape-2.png" alt="" />
+                        <img
+                            src="/images/shape-animation/nwesletter-shape-2.png"
+                            alt=""
+                        />
                     </motion.div>
                 </motion.div>
             </div>
diff --git a/src/containers/hero/layout-02/index.tsx b/src/containers/hero/layout-02/index.tsx
index 24e6c4fc..af3785f9 100644
--- a/src/containers/hero/layout-02/index.tsx
+++ b/src/containers/hero/layout-02/index.tsx
@@ -3,7 +3,13 @@ import clsx from "clsx";
 import Button from "@ui/button";
 import MottoText from "@ui/motto-text";
 import { useUI } from "@contexts/ui-context";
-import { HeadingType, TextType, ButtonType, ImageType, MottoType } from "@utils/types";
+import {
+    HeadingType,
+    TextType,
+    ButtonType,
+    ImageType,
+    MottoType,
+} from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
 
 type TProps = {
@@ -16,7 +22,9 @@ type TProps = {
     };
 };
 
-const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps) => {
+const HeroArea = ({
+    data: { headings, texts, buttons, motto, images },
+}: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <div className="hero-area tw-pt-[65px]">
@@ -48,7 +56,13 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             {content}
                         </Button>
                     ))}
-                    {motto && <MottoText {...motto} size="md" className="tw-mt-[25px]" />}
+                    {motto && (
+                        <MottoText
+                            {...motto}
+                            size="md"
+                            className="tw-mt-[25px]"
+                        />
+                    )}
                 </motion.div>
 
                 <div className="tw-relative tw-z-10">
@@ -78,7 +92,10 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                         }}
                     >
                         <span data-depth="3">
-                            <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                            <img
+                                src="/images/shape-animation/about-shape-1.png"
+                                alt=""
+                            />
                         </span>
                     </motion.div>
 
@@ -89,7 +106,10 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             y: trans2().y,
                         }}
                     >
-                        <img src="/images/shape-animation/about-shape-1.png" alt="" />
+                        <img
+                            src="/images/shape-animation/about-shape-1.png"
+                            alt=""
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-top-[255px] tw-left-2 sm:tw-top-[355px] sm:-tw-left-2 tw-z-20"
@@ -98,9 +118,13 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[42px] tw-h-[42px] md:tw-w-[62px] md:tw-h-[62px] md:tw-border-8">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-w-[100px] tw-bottom-3.8 tw-right-5 sm:tw-w-[100px] sm:tw-bottom-[55px] sm:tw-right-[45px] md:tw-w-auto"
@@ -118,7 +142,10 @@ const HeroArea = ({ data: { headings, texts, buttons, motto, images } }: TProps)
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/nwesletter-shape-2.png" alt="" />
+                        <img
+                            src="/images/shape-animation/nwesletter-shape-2.png"
+                            alt=""
+                        />
                     </motion.div>
                 </div>
             </div>
diff --git a/src/containers/team/layout-01/index.tsx b/src/containers/team/layout-01/index.tsx
index 59f89cf7..c970b9eb 100644
--- a/src/containers/team/layout-01/index.tsx
+++ b/src/containers/team/layout-01/index.tsx
@@ -14,7 +14,12 @@ type TProps = TSection & {
     };
 };
 
-const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TProps) => {
+const TeamArea = ({
+    data: { section_title, buttons },
+    space,
+    bg,
+    titleSize,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <Section className="team-area" space={space} bg={bg}>
@@ -62,9 +67,13 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-left-1/2 -tw-bottom-5 tw-w-[120px] lg:-tw-bottom-[70px] lg:tw-w-auto"
@@ -88,7 +97,10 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/cta-shape-01.png" alt="" />
+                        <img
+                            src="/images/shape-animation/cta-shape-01.png"
+                            alt=""
+                        />
                     </motion.div>
                 </motion.div>
                 <motion.div
@@ -99,7 +111,11 @@ const TeamArea = ({ data: { section_title, buttons }, space, bg, titleSize }: TP
                     variants={scrollUpVariants}
                 >
                     {section_title && (
-                        <SectionTitle {...section_title} align="left" titleSize={titleSize} />
+                        <SectionTitle
+                            {...section_title}
+                            align="left"
+                            titleSize={titleSize}
+                        />
                     )}
                     {buttons?.map(({ id, content, ...rest }) => (
                         <Button key={id} className="tw-mt-1" {...rest}>
diff --git a/src/containers/testimonial/layout-04/index.tsx b/src/containers/testimonial/layout-04/index.tsx
index 0c53f2d6..a5a1c9c6 100644
--- a/src/containers/testimonial/layout-04/index.tsx
+++ b/src/containers/testimonial/layout-04/index.tsx
@@ -48,7 +48,12 @@ const TestimonialArea = ({
                             className="tw-my-7.5"
                         />
                     )}
-                    {items?.[1] && <Testimonial04 title={items[1].title} className="tw-ml-auto" />}
+                    {items?.[1] && (
+                        <Testimonial04
+                            title={items[1].title}
+                            className="tw-ml-auto"
+                        />
+                    )}
                     <motion.div
                         className="tw-absolute -tw-z-1 tw-left-[-110px] tw-bottom-[130px] tw-w-[166px] tw-h-[-110px]"
                         animate={{
@@ -81,7 +86,9 @@ const TestimonialArea = ({
                     viewport={{ once: true, amount: 0.4 }}
                     variants={scrollUpVariants}
                 >
-                    {total_reviews && <RatingBox {...total_reviews} className="tw-mb-7.5" />}
+                    {total_reviews && (
+                        <RatingBox {...total_reviews} className="tw-mb-7.5" />
+                    )}
                     {items?.[2] && (
                         <Testimonial03
                             image={{
@@ -102,9 +109,13 @@ const TestimonialArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-8 tw-w-[54px] tw-h-[54px]">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute -tw-z-1 -tw-right-2.5 tw-bottom-15"
@@ -113,7 +124,10 @@ const TestimonialArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <img src="/images/shape-animation/nwesletter-shape-2.png" alt="" />
+                        <img
+                            src="/images/shape-animation/nwesletter-shape-2.png"
+                            alt=""
+                        />
                     </motion.div>
                 </motion.div>
                 <motion.div
@@ -124,11 +138,18 @@ const TestimonialArea = ({
                     variants={scrollUpVariants}
                 >
                     {section_title && (
-                        <SectionTitle {...section_title} align="left" titleSize={titleSize} />
+                        <SectionTitle
+                            {...section_title}
+                            align="left"
+                            titleSize={titleSize}
+                        />
                     )}
 
                     {buttons?.[0]?.content && (
-                        <Button {...buttons[0]} className="tw-mt-4 lg:tw-mt-7.5">
+                        <Button
+                            {...buttons[0]}
+                            className="tw-mt-4 lg:tw-mt-7.5"
+                        >
                             {buttons[0].content}
                         </Button>
                     )}
diff --git a/src/containers/video/layout-01/index.tsx b/src/containers/video/layout-01/index.tsx
index 0be2ad04..c108df79 100644
--- a/src/containers/video/layout-01/index.tsx
+++ b/src/containers/video/layout-01/index.tsx
@@ -20,7 +20,11 @@ type TProps = TSection & {
     };
 };
 
-const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps) => {
+const VideoArea = ({
+    data: { section_title, images, video },
+    space,
+    bg,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
         <Section
@@ -92,9 +96,13 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 -tw-bottom-[45px] tw-right-5 tw-w-[85px] md:tw-w-auto"
diff --git a/src/containers/video/layout-02/index.tsx b/src/containers/video/layout-02/index.tsx
index 59e4cade..6eca807b 100644
--- a/src/containers/video/layout-02/index.tsx
+++ b/src/containers/video/layout-02/index.tsx
@@ -7,7 +7,13 @@ import BottomShape from "@ui/bottom-shape/shape-03";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import { useUI } from "@contexts/ui-context";
 import { scrollUpVariants } from "@utils/variants";
-import { ImageType, MottoType, SectionTitleType, TSection, VideoType } from "@utils/types";
+import {
+    ImageType,
+    MottoType,
+    SectionTitleType,
+    TSection,
+    VideoType,
+} from "@utils/types";
 
 const AnimatedSectionTitle = motion(SectionTitle);
 const AnimatedMottoText = motion(MottoText);
@@ -69,9 +75,13 @@ const VideoArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
diff --git a/src/containers/video/layout-03/index.tsx b/src/containers/video/layout-03/index.tsx
index 0ddcb1f1..c90e3b0c 100644
--- a/src/containers/video/layout-03/index.tsx
+++ b/src/containers/video/layout-03/index.tsx
@@ -6,7 +6,13 @@ import BottomShape from "@ui/bottom-shape/shape-03";
 import Video from "@ui/video-with-poster/video-02";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import { useUI } from "@contexts/ui-context";
-import { ImageType, MottoType, SectionTitleType, TSection, VideoType } from "@utils/types";
+import {
+    ImageType,
+    MottoType,
+    SectionTitleType,
+    TSection,
+    VideoType,
+} from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
 
 const AnimatedVideo = motion(Video);
@@ -68,9 +74,13 @@ const VideoArea = ({
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
@@ -90,10 +100,16 @@ const VideoArea = ({
                     variants={scrollUpVariants}
                 >
                     {section_title && (
-                        <SectionTitle {...section_title} align="left" titleSize={titleSize} />
+                        <SectionTitle
+                            {...section_title}
+                            align="left"
+                            titleSize={titleSize}
+                        />
                     )}
 
-                    {motto && <MottoText className="tw-mt-1" size="md" {...motto} />}
+                    {motto && (
+                        <MottoText className="tw-mt-1" size="md" {...motto} />
+                    )}
                 </motion.div>
             </div>
             <BottomShape />
diff --git a/src/containers/video/layout-04/index.tsx b/src/containers/video/layout-04/index.tsx
index 1c421636..c379579c 100644
--- a/src/containers/video/layout-04/index.tsx
+++ b/src/containers/video/layout-04/index.tsx
@@ -18,7 +18,11 @@ type TProps = TSection & {
 const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
     const { trans1, trans2 } = useUI();
     return (
-        <Section className="video-area tw-relative tw-z-10" space={space} bg={bg}>
+        <Section
+            className="video-area tw-relative tw-z-10"
+            space={space}
+            bg={bg}
+        >
             <h2 className="tw-sr-only">Video Section</h2>
             <div className="tw-container -tw-bottom-[140px] -tw-mt-[140px]">
                 {video && images?.[0] && (
@@ -63,9 +67,13 @@ const VideoArea = ({ data: { images, video }, space, bg }: TProps) => {
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 -tw-bottom-[45px] tw-right-5 tw-w-[85px] md:tw-w-auto"
diff --git a/src/containers/video/layout-06/index.tsx b/src/containers/video/layout-06/index.tsx
index 2624b5e6..ee9d6b18 100644
--- a/src/containers/video/layout-06/index.tsx
+++ b/src/containers/video/layout-06/index.tsx
@@ -4,7 +4,12 @@ import MottoText from "@ui/motto-text";
 import SectionTitle from "@components/section-title";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import { useUI } from "@contexts/ui-context";
-import { ImageType, MottoType, SectionTitleType, VideoType } from "@utils/types";
+import {
+    ImageType,
+    MottoType,
+    SectionTitleType,
+    VideoType,
+} from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
 
 const AnimatedVideo = motion(Video);
@@ -19,7 +24,10 @@ type TProps = {
     titleSize?: "default" | "large";
 };
 
-const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }: TProps) => {
+const VideoArea = ({
+    data: { section_title, motto, images, video },
+    titleSize,
+}: TProps) => {
     const { trans1, trans2 } = useUI();
 
     return (
@@ -62,9 +70,13 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                             y: trans1().y,
                         }}
                     >
-                        <span className="tw-block -tw-indent-[99999px] tw-border-[6px] tw-border-desert tw-rounded-full tw-w-[45px] tw-h-[45px] md:tw-border-8 md:tw-w-15 md:tw-h-15">
-                            shape 3
-                        </span>
+                        <img
+                            src="/images/shape-animation/dog-tag.svg"
+                            alt="shape"
+                            loading="lazy"
+                            width={178}
+                            height={178}
+                        />
                     </motion.div>
                     <motion.div
                         className="tw-absolute tw-z-1 tw-right-0 -tw-bottom-15 tw-w-[85px] md:tw-w-auto"
@@ -90,7 +102,9 @@ const VideoArea = ({ data: { section_title, motto, images, video }, titleSize }:
                             className="lg:tw-max-w-[420px]"
                         />
                     )}
-                    {motto && <MottoText className="tw-mt-4" size="md" {...motto} />}
+                    {motto && (
+                        <MottoText className="tw-mt-4" size="md" {...motto} />
+                    )}
                 </motion.div>
             </div>
         </div>
diff --git a/src/containers/video/layout-07/index.tsx b/src/containers/video/layout-07/index.tsx
index 0b0b016e..b4b177d4 100644
--- a/src/containers/video/layout-07/index.tsx
+++ b/src/containers/video/layout-07/index.tsx
@@ -85,9 +85,13 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps
                         y: trans1().y,
                     }}
                 >
-                    <span className="tw-block -tw-indent-[99999px] tw-border-desert tw-rounded-full tw-border-[6px] tw-w-[45px] tw-h-[45px] md:tw-border-[12px] md:tw-w-[90px] md:tw-h-[90px]">
-                        shape 3
-                    </span>
+                    <img
+                        src="/images/shape-animation/dog-tag.svg"
+                        alt="shape"
+                        loading="lazy"
+                        width={178}
+                        height={178}
+                    />
                 </motion.div>
                 <motion.div
                     className="tw-absolute tw-z-1 -tw-bottom-[120px] tw-right-5 tw-w-[85px] md:tw-w-auto"
diff --git a/src/data/menu.ts b/src/data/menu.ts
index 698efbda..389063b8 100644
--- a/src/data/menu.ts
+++ b/src/data/menu.ts
@@ -1,100 +1,43 @@
-export default [
+// Types for menu structure
+type MenuStatus = "hot" | "coming soon" | "new";
+
+interface MenuItem {
+    id: number;
+    label: string;
+    path: string;
+    external?: boolean;
+    status?: MenuStatus;
+}
+
+interface SubMenuItem extends MenuItem {
+    submenu?: MenuItem[];
+}
+
+interface MegaMenuGroup {
+    id: number;
+    title: string;
+    submenu: MenuItem[];
+}
+
+interface BannerSection {
+    path: string;
+    image: {
+        src: string;
+        alt?: string;
+    };
+}
+
+interface MegaMenuItem extends MenuItem {
+    megamenu?: (MegaMenuGroup | { id: number; title: string; banner: BannerSection })[];
+}
+
+type NavigationItem = SubMenuItem | MegaMenuItem;
+
+const navigation: NavigationItem[] = [
     {
         id: 1,
         label: "Home",
         path: "/",
-        /* megamenu: [
-            {
-                id: 11,
-                title: "Group 01",
-                submenu: [
-                    {
-                        id: 111,
-                        label: "submenu item 01",
-                        path: "/",
-                        status: "hot",
-                    },
-                    {
-                        id: 112,
-                        label: "submenu item 02",
-                        path: "#",
-                    },
-                    {
-                        id: 113,
-                        label: "submenu item 03",
-                        path: "#",
-                        status: "hot",
-                    },
-                    {
-                        id: 114,
-                        label: "submenu item 04",
-                        path: "#",
-                    },
-                    {
-                        id: 115,
-                        label: "submenu item 05",
-                        path: "#",
-                    },
-                    {
-                        id: 116,
-                        label: "submenu item 06",
-                        path: "#",
-                    },
-                ],
-            },
-            {
-                id: 12,
-                title: "Group 02",
-                submenu: [
-                    {
-                        id: 121,
-                        label: "submenu item 07",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 122,
-                        label: "submenu item 08",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 123,
-                        label: "submenu item 09",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 124,
-                        label: "submenu item 10",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 125,
-                        label: "submenu item 11",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                    {
-                        id: 126,
-                        label: "submenu item 12",
-                        path: "/",
-                        status: "coming soon",
-                    },
-                ],
-            },
-            {
-                id: 13,
-                title: "Banner",
-                banner: {
-                    path: "/",
-                    image: {
-                        src: "/images/menu/mega-menu.jpg",
-                    },
-                },
-            },
-        ], */
     },
     {
         id: 2,
@@ -103,7 +46,7 @@ export default [
         submenu: [
             {
                 id: 21,
-                label: "About",
+                label: "About Us",
                 path: "/about-us",
             },
             {
@@ -124,46 +67,52 @@ export default [
         path: "#!",
         submenu: [
             {
-                id: 24,
+                id: 31,
                 label: "Become a Mentor",
                 path: "/mentor",
             },
             {
-                id: 25,
+                id: 32,
                 label: "Apply to be a Student",
                 path: "/apply",
+                status: "new",
             },
-            /*           {
-                id: 26,
-                label: "Join our community",
-                path: "/join-our-community",
-            },
-*/
         ],
     },
     {
         id: 4,
-        label: "Events",
-        path: "/events",
-    },
-    {
-        id: 5,
         label: "Blog",
         path: "/blogs/blog",
     },
     {
-        id: 6,
+        id: 5,
         label: "Contact Us",
         path: "/contact-us",
     },
     {
-        id: 7,
-        label: "Shop",
-        path: "https://hashflag.shop/",
-    },
-    {
-        id: 8,
-        label: "Donate",
-        path: "/donate",
+        id: 6,
+        label: "Support",
+        path: "#!",
+        submenu: [
+            {
+                id: 61,
+                label: "Events",
+                path: "/events",
+            },
+            {
+                id: 62,
+                label: "Shop",
+                path: "https://hashflag.shop/",
+                external: true,
+            },
+            {
+                id: 63,
+                label: "Donate",
+                path: "/donate",
+                status: "hot",
+            },
+        ],
     },
 ];
+
+export default navigation;