diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index 6086bc8..0ca21f9 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -26,6 +26,11 @@ export default () => {
     { title: t("navbar.contact"), path: "Contact" },
   ];
 
+  const handleNavigation = (path: string) => {
+    const element = document.getElementById(path);
+    element?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <nav
       className={`${
@@ -36,7 +41,13 @@ export default () => {
     >
       <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
         <div className="flex items-center justify-between py-3 md:py-5 md:block">
-          <a href="/">
+          <a
+            href="Top"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent the default anchor tag behavior
+              window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to the top of the page
+            }}
+          >
             <img src={Logo} width={60} height={60} alt="logo" />
           </a>
           <div className="md:hidden">
@@ -68,7 +79,11 @@ export default () => {
                   <a
                     href={item.path}
                     className="block py-2 md:py-0 md:px-4 text-xl font-medium"
-                    onClick={() => setState(false)}
+                    onClick={(e) => {
+                      e.preventDefault(); // Prevent the default anchor tag behavior
+                      setState(false); // Close the navigation
+                      handleNavigation(item.path); // Navigate to the section
+                    }}
                   >
                     {item.title}
                   </a>
diff --git a/src/Components/Pages/Hero/Hero.tsx b/src/Components/Pages/Hero/Hero.tsx
index 432530a..b897676 100644
--- a/src/Components/Pages/Hero/Hero.tsx
+++ b/src/Components/Pages/Hero/Hero.tsx
@@ -5,6 +5,11 @@ import Stars from "../../../assets/Stars.svg";
 const Hero = () => {
   const { t } = useTranslation();
 
+  const handleNavigation = (path: string) => {
+    const element = document.getElementById(path);
+    element?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
       <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
diff --git a/src/Components/Pages/Services/CameraCards.tsx b/src/Components/Pages/Services/CameraCards.tsx
index 5b79b98..f4cfef3 100644
--- a/src/Components/Pages/Services/CameraCards.tsx
+++ b/src/Components/Pages/Services/CameraCards.tsx
@@ -9,7 +9,7 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}
diff --git a/src/Components/Pages/Services/CardBtn.tsx b/src/Components/Pages/Services/CardBtn.tsx
index 5dab055..6dad54c 100644
--- a/src/Components/Pages/Services/CardBtn.tsx
+++ b/src/Components/Pages/Services/CardBtn.tsx
@@ -6,7 +6,7 @@ interface props {
 
 const CardBtn = ({ title, onClick, isSelected }: props) => {
   const buttonClass = isSelected
-    ? "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
+    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
     : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark text-gray-400 shadow-inner";
 
   const divClass = isSelected
diff --git a/src/Components/Pages/Services/MarketingCards.tsx b/src/Components/Pages/Services/MarketingCards.tsx
index 389f237..9b2b463 100644
--- a/src/Components/Pages/Services/MarketingCards.tsx
+++ b/src/Components/Pages/Services/MarketingCards.tsx
@@ -9,7 +9,7 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}
diff --git a/src/Components/Pages/Services/SocialMedia.tsx b/src/Components/Pages/Services/SocialMedia.tsx
index 1c9edfb..cd5085a 100644
--- a/src/Components/Pages/Services/SocialMedia.tsx
+++ b/src/Components/Pages/Services/SocialMedia.tsx
@@ -9,7 +9,7 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}
diff --git a/src/Components/Pages/Services/WesiteCards.tsx b/src/Components/Pages/Services/WesiteCards.tsx
index d6a29a3..f9a48aa 100644
--- a/src/Components/Pages/Services/WesiteCards.tsx
+++ b/src/Components/Pages/Services/WesiteCards.tsx
@@ -9,7 +9,7 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}
diff --git a/src/index.css b/src/index.css
index 86242b3..bb429a6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,4 +24,19 @@ body {
   @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
 }
 
+.gold-text {
+  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
+}
 
+.fade-effect {
+  animation: fadeEffect 1s ease-in-out;
+}
+
+@keyframes fadeEffect {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}