diff --git a/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx b/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx
index a5bfa14..5c3df81 100644
--- a/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx
+++ b/src/app/(routes)/(website)/components/aboutMe/AboutMeContent.tsx
@@ -41,7 +41,7 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
 
   return (
     <section
-      className="relative flex w-full max-w-[1200px] flex-col items-center justify-center gap-12 py-20 lg:flex-row"
+      className="relative flex w-full max-w-[1200px] flex-col items-center justify-center gap-12 py-20 lg:flex-row lg:gap-16"
       id="about-me"
     >
       {/* Text Section */}
@@ -98,7 +98,6 @@ export default function AboutMeContent({ data }: AboutMeContentProps) {
         className="relative w-full max-w-[450px] flex justify-center lg:w-[40%]"
       >
         <div className="relative group">
-          <div className="absolute -inset-4 bg-gradient-to-tr from-primary to-purple-600 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
           <div className="relative overflow-hidden rounded-3xl border-4 border-background shadow-2xl">
             <Image
               src={process.env.NEXT_PUBLIC_BACK_URL + data.image}
diff --git a/src/app/(routes)/(website)/components/header/header.tsx b/src/app/(routes)/(website)/components/header/header.tsx
index ffe9cee..aa1884e 100644
--- a/src/app/(routes)/(website)/components/header/header.tsx
+++ b/src/app/(routes)/(website)/components/header/header.tsx
@@ -64,7 +64,7 @@ export default async function Header() {
           href="/Parsa Aghayi CV Resume.pdf"
           download
           target="_blank"
-          className="hidden sm:flex items-center justify-center whitespace-nowrap rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-[0_0_20px_rgba(255,84,128,0.3)] transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,84,128,0.5)] hover:scale-105 active:scale-95"
+          className="hidden sm:flex items-center justify-center whitespace-nowrap rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-[0_0_20px_rgba(253,111,0,0.3)] transition-all duration-300 hover:shadow-[0_0_30px_rgba(253,111,0,0.5)] hover:scale-105 active:scale-95"
         >
           {dict.website.header.Button}
         </a>
diff --git a/src/app/(routes)/(website)/components/hero/hero.tsx b/src/app/(routes)/(website)/components/hero/hero.tsx
index b1f8191..deeeba2 100644
--- a/src/app/(routes)/(website)/components/hero/hero.tsx
+++ b/src/app/(routes)/(website)/components/hero/hero.tsx
@@ -15,9 +15,6 @@ export default function Hero({ dict }: HeroProps) {
     { href: "#", src: "/images/icons/linkedin.svg", alt: "linkedin" },
   ];
 
-  // Detect RTL
-  const isRTL = typeof document !== "undefined" && document.dir === "rtl";
-
   return (
     <section 
       id="home" 
@@ -25,11 +22,11 @@ export default function Hero({ dict }: HeroProps) {
     >
       {/* Image Section */}
       <motion.div 
-        initial={{ opacity: 0, x: isRTL ? 50 : -50 }}
-        whileInView={{ opacity: 1, x: 0 }}
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.8, ease: "easeOut" }}
         viewport={{ once: true }}
-        className="relative z-10 flex w-full max-w-[500px] flex-col items-center justify-center lg:w-[45%] xl:w>[50%]"
+        className="relative z-10 flex w-full max-w-[500px] flex-shrink-0 flex-col items-center justify-center lg:w-[45%] xl:w-[50%]"
       >
         <div className="relative group">
           {/* Glowing background effect */}
@@ -76,9 +73,9 @@ export default function Hero({ dict }: HeroProps) {
 
       {/* Text Section */}
       <motion.div 
-        initial={{ opacity: 0, x: isRTL ? -50 : 50 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: "easeOut", delay: 0.1 }}
         viewport={{ once: true }}
         className="flex w-full max-w-[700px] flex-col items-start text-start"
       >
@@ -109,7 +106,7 @@ export default function Hero({ dict }: HeroProps) {
           <span className="text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold tracking-tighter text-foreground leading-tight">
             {dict.website.homePage.top.profession}
           </span>
-          <span className="text-3xl md:text-5xl lg:text-6xl xl:text-7xl font-mono font-bold text-primary/80 tracking-tighter leading-tight italic">
+          <span className="text-xl md:text-2xl lg:text-3xl xl:text-4xl font-mono font-bold text-primary/80 tracking-tighter leading-tight italic">
             {dict.website.homePage.top.roll}
           </span>
         </motion.div>
diff --git a/src/app/(routes)/(website)/components/projects/projects.tsx b/src/app/(routes)/(website)/components/projects/projects.tsx
index cac274d..1523edf 100644
--- a/src/app/(routes)/(website)/components/projects/projects.tsx
+++ b/src/app/(routes)/(website)/components/projects/projects.tsx
@@ -34,6 +34,7 @@ export default function Projects({ dict }: MyProjectsProps) {
   const [categories, setCategories] = useState<ProjectCategory[]>([]);
   const [projects, setProjects] = useState<Project[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [loading, setLoading] = useState(true);
   const locale = getCookie("selectedLocale") || getCookie("defaultLocale");
 
   useEffect(() => {
@@ -41,30 +42,36 @@ export default function Projects({ dict }: MyProjectsProps) {
     setSelectedCategory(initialCategory);
 
     const fetchProjects = async () => {
-      const res = await fetch(
-        `/api/website/projects/translation/${locale}?sort=desc&per_page=40`,
-      );
-      const data = await res.json();
-      const resProjects: Project[] =
-        (data.projects as ProjectResponse).data || [];
-      const resCategories: CategoryResponse[] = data.categories || [];
+      setLoading(true);
+      try {
+        const res = await fetch(
+          `/api/website/projects/translation/${locale}?sort=desc&per_page=40`,
+        );
+        const data = await res.json();
+        const resProjects: Project[] =
+          (data.projects as ProjectResponse).data || [];
+        const resCategories: CategoryResponse[] = data.categories || [];
 
-      setProjects(resProjects);
+        setProjects(resProjects);
 
-      const uniqueCategories: ProjectCategory[] = [
-        {
-          label: initialCategory,
-          active: true,
-        },
-        ...resCategories
-          .slice(0, MAX_CATEGORIES)
-          .map((category: CategoryResponse) => ({
-            label: category.title,
-            active: false,
-          })),
-      ];
+        const uniqueCategories: ProjectCategory[] = [
+          {
+            label: initialCategory,
+            active: true,
+          },
+          ...resCategories
+            .slice(0, MAX_CATEGORIES)
+            .map((category: CategoryResponse) => ({
+              label: category.title,
+              active: false,
+            })),
+        ];
 
-      setCategories(uniqueCategories);
+        setCategories(uniqueCategories);
+      } catch {
+        setProjects([]);
+      }
+      setLoading(false);
     };
 
     fetchProjects();
@@ -205,7 +212,23 @@ export default function Projects({ dict }: MyProjectsProps) {
                   </div>
                 </motion.div>
               ))
-            : renderSkeletons(3)}
+            : loading
+              ? renderSkeletons(3)
+              : (
+                <div className="col-span-full flex flex-col items-center justify-center py-20 text-center">
+                  <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-6">
+                    <svg className="w-10 h-10 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                    </svg>
+                  </div>
+                  <h3 className="text-xl font-bold text-foreground mb-2">
+                    {locale === "fa" ? "پروژه‌ای یافت نشد" : "No projects found"}
+                  </h3>
+                  <p className="text-muted-foreground max-w-md">
+                    {locale === "fa" ? "در حال حاضر پروژه‌ای در این دسته‌بندی وجود ندارد. لطفاً دسته‌بندی دیگری را انتخاب کنید." : "No projects in this category yet. Please try another category."}
+                  </p>
+                </div>
+              )}
         </AnimatePresence>
       </motion.div>
     </section>
diff --git a/src/app/(routes)/(website)/components/services/services.tsx b/src/app/(routes)/(website)/components/services/services.tsx
index fbc1859..85376d5 100644
--- a/src/app/(routes)/(website)/components/services/services.tsx
+++ b/src/app/(routes)/(website)/components/services/services.tsx
@@ -47,7 +47,7 @@ export default function Services({ dict }: ServicesProps) {
       transition={{ duration: 0.5, delay: (index || 0) * 0.1 }}
       viewport={{ once: true }}
       whileHover={{ y: -10 }}
-      className="group flex w-full flex-col items-start rounded-3xl glass-panel p-8 transition-all duration-300 hover:border-primary/50"
+      className="group flex h-full w-full flex-col items-start rounded-3xl glass-panel p-8 transition-all duration-300 hover:border-primary/50"
     >
       <div className="mb-6 relative overflow-hidden rounded-2xl w-20 h-20 bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
         {loading ? (
diff --git a/src/app/(routes)/(website)/components/testimonials/testimonials.tsx b/src/app/(routes)/(website)/components/testimonials/testimonials.tsx
index 290d227..050791d 100644
--- a/src/app/(routes)/(website)/components/testimonials/testimonials.tsx
+++ b/src/app/(routes)/(website)/components/testimonials/testimonials.tsx
@@ -95,7 +95,7 @@ export default function Testimonials({ dict }: TestimonialsProps) {
             whileHover={{ y: -10 }}
             className="relative p-8 rounded-3xl glass-panel flex flex-col h-full"
           >
-            <div className="absolute -top-6 -left-6 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg">
+            <div className="absolute -top-6 -start-6 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg">
               <Quote className="w-6 h-6" />
             </div>
             
diff --git a/src/app/globals.css b/src/app/globals.css
index 7688ae9..4cac22f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,12 +10,12 @@
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 340 80% 50%; /* Accent Pink/Red */
+    --primary: 30 80% 50%; /* Accent Orange */
     --primary-foreground: 0 0% 100%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
+    --muted-foreground: 240 5% 30%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
@@ -33,12 +33,12 @@
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 340 80% 60%;
+    --primary: 30 80% 60%;
     --primary-foreground: 0 0% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
+    --muted-foreground: 240 5% 80%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
@@ -84,8 +84,21 @@
 
 .mesh-gradient {
   background-image: 
-    radial-gradient(at 0% 0%, hsla(340, 80%, 50%, 0.15) 0px, transparent 50%),
+    radial-gradient(at 0% 0%, hsla(30, 80%, 50%, 0.15) 0px, transparent 50%),
     radial-gradient(at 100% 0%, hsla(220, 80%, 50%, 0.15) 0px, transparent 50%),
-    radial-gradient(at 100% 100%, hsla(340, 80%, 50%, 0.15) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, hsla(30, 80%, 50%, 0.15) 0px, transparent 50%),
     radial-gradient(at 0% 100%, hsla(220, 80%, 50%, 0.15) 0px, transparent 50%);
 }
+
+[dir="rtl"] body,
+[dir="rtl"] p,
+[dir="rtl"] span,
+[dir="rtl"] li,
+[dir="rtl"] h1,
+[dir="rtl"] h2,
+[dir="rtl"] h3,
+[dir="rtl"] h4,
+[dir="rtl"] h5,
+[dir="rtl"] h6 {
+  font-family: var(--font-mikhak), ui-sans-serif, system-ui, sans-serif;
+}