diff --git a/app/components/ProjectCard.vue b/app/components/ProjectCard.vue
index dd529c3..69fec7c 100644
--- a/app/components/ProjectCard.vue
+++ b/app/components/ProjectCard.vue
@@ -16,77 +16,73 @@ const translatedCategory = computed(() => {
 </script>
 
 <template>
-  <article class="group" itemscope itemtype="https://schema.org/CreativeWork">
-    <UCard>
-      <!-- Image -->
-      <template #header>
-        <NuxtLink :to="`/project/${project.id}`">
-          <NuxtImg
-            :src="project.image"
-            :alt="`${project.title} - ${project.description.slice(0, 60)}...`"
-            loading="lazy"
-            format="webp"
-            width="400"
-            height="300"
-            class="w-full h-48 object-cover"
-            itemprop="image"
-          />
-        </NuxtLink>
-      </template>
+  <article
+    class="group relative rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-all duration-300 hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 hover:-translate-y-1"
+    itemscope
+    itemtype="https://schema.org/CreativeWork"
+  >
+    <!-- Image -->
+    <NuxtLink :to="`/project/${project.id}`" class="block relative overflow-hidden">
+      <NuxtImg
+        :src="project.image"
+        :alt="`${project.title} - ${project.description.slice(0, 60)}...`"
+        loading="lazy"
+        format="webp"
+        width="400"
+        height="300"
+        class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"
+        itemprop="image"
+      />
+      <!-- Overlay on hover -->
+      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+    </NuxtLink>
 
-      <!-- Content -->
-      <div class="flex flex-col gap-3">
-        <!-- Category & Date -->
-        <div class="flex items-center justify-between">
-          <UBadge v-if="project.category" color="primary" variant="subtle" itemprop="genre">
-            {{ translatedCategory }}
-          </UBadge>
-          <time v-if="project.date" class="text-sm text-muted" :datetime="project.date" itemprop="dateCreated">
-            {{ project.date }}
-          </time>
-        </div>
-
-        <!-- Title -->
-        <h3 class="text-lg font-bold" itemprop="name">
-          {{ project.title }}
-        </h3>
-
-        <!-- Description -->
-        <p class="text-sm text-muted line-clamp-2" itemprop="description">
-          {{ project.description }}
-        </p>
-
-        <!-- Technologies -->
-        <div v-if="project.technologies?.length" class="flex flex-wrap gap-1" itemprop="keywords">
-          <UBadge
-            v-for="tech in project.technologies.slice(0, 3)"
-            :key="tech"
-            variant="subtle"
-            color="neutral"
-            size="sm"
-          >
-            {{ tech }}
-          </UBadge>
-          <UBadge v-if="project.technologies.length > 3" variant="subtle" color="neutral" size="sm">
-            +{{ project.technologies.length - 3 }}
-          </UBadge>
-        </div>
+    <!-- Content -->
+    <div class="p-5 flex flex-col gap-3">
+      <!-- Category & Date -->
+      <div class="flex items-center justify-between">
+        <UBadge v-if="project.category" color="primary" variant="subtle" itemprop="genre">
+          {{ translatedCategory }}
+        </UBadge>
+        <time v-if="project.date" class="text-xs text-gray-400 dark:text-gray-500 font-medium" :datetime="project.date" itemprop="dateCreated">
+          {{ project.date }}
+        </time>
       </div>
 
-      <!-- Action -->
-      <template #footer>
-        <UButton
-          :to="`/project/${project.id}`"
-          variant="ghost"
-          icon="i-lucide-chevron-right"
-          trailing
-          block
-          :aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
-          itemprop="url"
+      <!-- Title -->
+      <h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors" itemprop="name">
+        {{ project.title }}
+      </h3>
+
+      <!-- Description -->
+      <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 leading-relaxed" itemprop="description">
+        {{ project.description }}
+      </p>
+
+      <!-- Technologies -->
+      <div v-if="project.technologies?.length" class="flex flex-wrap gap-1.5 pt-1" itemprop="keywords">
+        <span
+          v-for="tech in project.technologies.slice(0, 3)"
+          :key="tech"
+          class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 font-medium"
         >
-          {{ t('projects.buttons.viewProject') }}
-        </UButton>
-      </template>
-    </UCard>
+          {{ tech }}
+        </span>
+        <span v-if="project.technologies.length > 3" class="text-xs px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-500 font-medium">
+          +{{ project.technologies.length - 3 }}
+        </span>
+      </div>
+
+      <!-- Action link -->
+      <NuxtLink
+        :to="`/project/${project.id}`"
+        class="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 transition-colors mt-1 group/link"
+        :aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
+        itemprop="url"
+      >
+        {{ t('projects.buttons.viewProject') }}
+        <UIcon name="i-lucide-arrow-right" class="w-4 h-4 transition-transform group-hover/link:translate-x-0.5" />
+      </NuxtLink>
+    </div>
   </article>
 </template>
diff --git a/app/components/TechBadge.vue b/app/components/TechBadge.vue
index 5a96f96..11380c4 100644
--- a/app/components/TechBadge.vue
+++ b/app/components/TechBadge.vue
@@ -57,18 +57,22 @@ const levelColor = computed(() => {
 </script>
 
 <template>
-  <div class="flex items-center gap-2" itemscope itemtype="https://schema.org/ComputerLanguage">
+  <div
+    class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700/50 transition-colors hover:border-brand-500/30"
+    itemscope
+    itemtype="https://schema.org/ComputerLanguage"
+  >
     <NuxtImg
       v-if="showImage && techData.image"
       :src="techData.image"
       :alt="`${techData.name} logo`"
-      width="24"
-      height="24"
+      width="20"
+      height="20"
       loading="lazy"
       class="shrink-0"
       itemprop="image"
     />
-    <span class="text-sm font-medium" itemprop="name">{{ techData.name }}</span>
+    <span class="text-sm font-medium text-gray-700 dark:text-gray-300" itemprop="name">{{ techData.name }}</span>
     <UBadge v-if="showLevel" :color="levelColor" variant="subtle" size="xs">
       {{ techData.level }}
     </UBadge>
diff --git a/app/components/layout/AppFooter.vue b/app/components/layout/AppFooter.vue
index 2296890..3ef269e 100644
--- a/app/components/layout/AppFooter.vue
+++ b/app/components/layout/AppFooter.vue
@@ -1,32 +1,87 @@
 <script setup lang="ts">
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 const socialLinks = [
   { name: 'gitea', url: 'https://gitea.kamisama.ovh/kayjaydee', icon: 'simple-icons:gitea', ariaKey: 'a11y.gitea' },
   { name: 'linkedin', url: 'https://linkedin.com/in/killian-dal-cin', icon: 'simple-icons:linkedin', ariaKey: 'a11y.linkedin' },
   { name: 'fiverr', url: 'https://www.fiverr.com/users/mr_kayjaydee', icon: 'simple-icons:fiverr', ariaKey: 'a11y.fiverr' },
 ]
+
+const quickLinks = computed(() => [
+  { key: 'home', path: '/' },
+  { key: 'projects', path: '/projects' },
+  { key: 'about', path: '/about' },
+  { key: 'contact', path: '/contact' },
+  { key: 'fiverr', path: '/fiverr' },
+])
 </script>
 
 <template>
-  <footer class="py-6 bg-gray-100 dark:bg-gray-800">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
-      <p class="text-sm text-gray-600 dark:text-gray-400">
-        {{ t('footer.copyright') }}
-      </p>
+  <footer class="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-8">
+        <!-- Branding & Tagline -->
+        <div class="space-y-4">
+          <NuxtLink :to="localePath('/')" class="flex items-center gap-2.5">
+            <NuxtImg
+              src="/images/logo.webp"
+              alt="Killian Dalcin"
+              width="36"
+              height="36"
+              loading="lazy"
+              class="rounded-lg"
+            />
+            <span class="text-lg font-bold text-gray-900 dark:text-white">Killian Dalcin</span>
+          </NuxtLink>
+          <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xs">
+            Full Stack Developer &amp; Hytale Plugin Developer. Building modern web experiences and game plugins.
+          </p>
+        </div>
 
-      <div class="flex items-center gap-4">
-        <a
-          v-for="link in socialLinks"
-          :key="link.name"
-          :href="link.url"
-          target="_blank"
-          rel="noopener noreferrer"
-          :aria-label="t(link.ariaKey)"
-          class="min-w-11 min-h-11 inline-flex items-center justify-center rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 transition-colors"
-        >
-          <UIcon :name="link.icon" class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-primary-500 transition-colors duration-150" />
-        </a>
+        <!-- Quick Links -->
+        <div>
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
+            Navigation
+          </h3>
+          <nav class="flex flex-col gap-2.5">
+            <NuxtLink
+              v-for="link in quickLinks"
+              :key="link.key"
+              :to="localePath(link.path)"
+              class="text-sm text-gray-500 dark:text-gray-400 hover:text-brand-500 dark:hover:text-brand-400 transition-colors"
+            >
+              {{ t(`nav.${link.key}`) }}
+            </NuxtLink>
+          </nav>
+        </div>
+
+        <!-- Social Links -->
+        <div>
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
+            Social
+          </h3>
+          <div class="flex items-center gap-3">
+            <a
+              v-for="link in socialLinks"
+              :key="link.name"
+              :href="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              :aria-label="t(link.ariaKey)"
+              class="w-10 h-10 inline-flex items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-brand-500/10 dark:hover:bg-brand-500/10 transition-all duration-200 group"
+            >
+              <UIcon :name="link.icon" class="w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-brand-500 dark:group-hover:text-brand-400 transition-colors" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom bar -->
+      <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-800">
+        <p class="text-sm text-gray-400 dark:text-gray-500 text-center">
+          {{ t('footer.copyright') }}
+        </p>
       </div>
     </div>
   </footer>
diff --git a/app/components/sections/CTASection.vue b/app/components/sections/CTASection.vue
index d5e00d1..07eadb4 100644
--- a/app/components/sections/CTASection.vue
+++ b/app/components/sections/CTASection.vue
@@ -1,19 +1,28 @@
 <script setup lang="ts">
 const { t } = useI18n()
+const localePath = useLocalePath()
 </script>
 
 <template>
-  <section class="py-16 px-4">
-    <div class="max-w-3xl mx-auto text-center">
-      <h2 class="text-3xl font-bold mb-4">{{ t('home.cta2.title') }}</h2>
-      <p class="text-lg text-muted mb-8">{{ t('home.cta2.subtitle') }}</p>
-      <div class="flex gap-4 justify-center">
-        <UButton to="/contact" size="lg">
-          {{ t('home.cta2.startProject') }}
-        </UButton>
-        <UButton to="/about" size="lg" variant="outline">
-          {{ t('home.cta2.learnMore') }}
-        </UButton>
+  <section class="py-20 md:py-28 px-4">
+    <div class="max-w-5xl mx-auto">
+      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 via-brand-500 to-emerald-500 px-8 py-16 sm:px-16 sm:py-20 text-center">
+        <!-- Decorative shapes -->
+        <div class="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-2xl" aria-hidden="true" />
+        <div class="absolute bottom-0 right-0 w-96 h-96 bg-black/10 rounded-full translate-x-1/3 translate-y-1/3 blur-2xl" aria-hidden="true" />
+
+        <div class="relative z-10">
+          <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">{{ t('home.cta2.title') }}</h2>
+          <p class="text-lg text-white/80 mb-10 max-w-2xl mx-auto">{{ t('home.cta2.subtitle') }}</p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <UButton :to="localePath('/contact')" size="xl" color="white" class="font-semibold">
+              {{ t('home.cta2.startProject') }}
+            </UButton>
+            <UButton :to="localePath('/about')" size="xl" variant="outline" color="white" class="font-semibold">
+              {{ t('home.cta2.learnMore') }}
+            </UButton>
+          </div>
+        </div>
       </div>
     </div>
   </section>
diff --git a/app/components/sections/FAQSection.vue b/app/components/sections/FAQSection.vue
index 8024c45..3d720ba 100644
--- a/app/components/sections/FAQSection.vue
+++ b/app/components/sections/FAQSection.vue
@@ -20,13 +20,17 @@ const items = computed(() =>
 </script>
 
 <template>
-  <section class="py-16 px-4">
+  <section class="py-20 md:py-28 px-4">
     <div class="max-w-3xl mx-auto">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold mb-4">{{ title }}</h2>
-        <p class="text-lg text-muted">{{ subtitle }}</p>
+      <div class="text-center mb-14">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">FAQ</span>
+        <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ title }}</h2>
+        <p class="text-lg text-gray-500 dark:text-gray-400 mt-3">{{ subtitle }}</p>
+      </div>
+
+      <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-2">
+        <UAccordion :items="items" type="single" collapsible />
       </div>
-      <UAccordion :items="items" type="single" collapsible />
     </div>
   </section>
 </template>
diff --git a/app/components/sections/FeaturedProjectsSection.vue b/app/components/sections/FeaturedProjectsSection.vue
index 49af8b5..c7a74fc 100644
--- a/app/components/sections/FeaturedProjectsSection.vue
+++ b/app/components/sections/FeaturedProjectsSection.vue
@@ -4,13 +4,22 @@ const { featuredProjects } = useProjects()
 </script>
 
 <template>
-  <section class="py-16 px-4">
-    <div class="max-w-6xl mx-auto">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold mb-4">{{ t('home.featuredProjects.title') }}</h2>
-        <p class="text-lg text-muted max-w-2xl mx-auto">{{ t('home.featuredProjects.subtitle') }}</p>
+  <section class="py-20 md:py-28 px-4">
+    <div class="max-w-7xl mx-auto">
+      <!-- Section header -->
+      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-14">
+        <div>
+          <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Portfolio</span>
+          <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('home.featuredProjects.title') }}</h2>
+          <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl">{{ t('home.featuredProjects.subtitle') }}</p>
+        </div>
+        <UButton to="/projects" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto">
+          {{ t('home.cta.viewProjects') }}
+        </UButton>
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+      <!-- Projects grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
         <ProjectCard
           v-for="project in featuredProjects"
           :key="project.id"
diff --git a/app/components/sections/HeroSection.vue b/app/components/sections/HeroSection.vue
index c86b8d8..92b81da 100644
--- a/app/components/sections/HeroSection.vue
+++ b/app/components/sections/HeroSection.vue
@@ -1,26 +1,131 @@
 <script setup lang="ts">
 const { t } = useI18n()
+const localePath = useLocalePath()
 </script>
 
 <template>
-  <section class="py-20 md:py-32">
-    <div class="max-w-4xl mx-auto text-center px-4">
-      <h1 class="text-4xl md:text-6xl font-bold mb-6">
-        {{ t('home.title') }}
-      </h1>
-      <p class="text-xl md:text-2xl text-muted mb-10">
-        {{ t('home.subtitle') }}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <UButton to="/projects" size="xl" icon="i-lucide-arrow-right" trailing>
-          {{ t('home.cta.viewProjects') }}
-        </UButton>
-        <UButton to="/fiverr" size="xl" variant="outline" icon="i-lucide-dollar-sign" trailing>
-          {{ t('nav.fiverr') }}
-        </UButton>
-        <UButton to="/contact" size="xl" variant="outline" icon="i-lucide-message-circle" trailing>
-          {{ t('home.cta.contactMe') }}
-        </UButton>
+  <section class="relative min-h-[80vh] flex items-center overflow-hidden bg-white dark:bg-gray-950">
+    <!-- Dot grid background pattern -->
+    <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.06]" aria-hidden="true">
+      <div class="absolute inset-0" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 32px 32px;" />
+    </div>
+
+    <!-- Gradient glow -->
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl pointer-events-none" aria-hidden="true" />
+
+    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-16 md:py-24">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+        <!-- Left: Content -->
+        <div class="space-y-8">
+          <!-- Status badge -->
+          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 dark:bg-brand-500/15 border border-brand-500/20">
+            <span class="relative flex h-2 w-2">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75" />
+              <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500" />
+            </span>
+            <span class="text-sm font-medium text-brand-700 dark:text-brand-400">Available for projects</span>
+          </div>
+
+          <div class="space-y-4">
+            <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1]">
+              <span class="text-gray-900 dark:text-white">{{ t('home.title').split(' ').slice(0, -2).join(' ') }} </span>
+              <span class="bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent">{{ t('home.title').split(' ').slice(-2).join(' ') }}</span>
+            </h1>
+            <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-xl leading-relaxed">
+              {{ t('home.subtitle') }}
+            </p>
+          </div>
+
+          <!-- CTA Buttons -->
+          <div class="flex flex-col sm:flex-row gap-3">
+            <UButton :to="localePath('/projects')" size="xl" icon="i-lucide-arrow-right" trailing class="font-semibold">
+              {{ t('home.cta.viewProjects') }}
+            </UButton>
+            <UButton :to="localePath('/fiverr')" size="xl" variant="outline" icon="i-lucide-dollar-sign" trailing class="font-semibold">
+              {{ t('nav.fiverr') }}
+            </UButton>
+            <UButton :to="localePath('/contact')" size="xl" variant="ghost" icon="i-lucide-message-circle" trailing class="font-semibold">
+              {{ t('home.cta.contactMe') }}
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Right: Decorative terminal/code block -->
+        <div class="hidden lg:block" aria-hidden="true">
+          <div class="relative">
+            <!-- Terminal window -->
+            <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 shadow-2xl shadow-brand-500/5 overflow-hidden">
+              <!-- Title bar -->
+              <div class="flex items-center gap-2 px-4 py-3 bg-gray-100 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700/50">
+                <div class="flex gap-1.5">
+                  <div class="w-3 h-3 rounded-full bg-red-400/80" />
+                  <div class="w-3 h-3 rounded-full bg-yellow-400/80" />
+                  <div class="w-3 h-3 rounded-full bg-green-400/80" />
+                </div>
+                <span class="text-xs text-gray-400 dark:text-gray-500 ml-2 font-mono">killian@dev ~</span>
+              </div>
+
+              <!-- Code content -->
+              <div class="p-5 font-mono text-sm leading-7 space-y-1">
+                <div>
+                  <span class="text-brand-500">const</span>
+                  <span class="text-gray-900 dark:text-white"> developer</span>
+                  <span class="text-gray-500"> = </span>
+                  <span class="text-gray-500">{</span>
+                </div>
+                <div class="pl-6">
+                  <span class="text-purple-500 dark:text-purple-400">name</span><span class="text-gray-500">: </span>
+                  <span class="text-amber-600 dark:text-amber-400">'Killian Dalcin'</span><span class="text-gray-500">,</span>
+                </div>
+                <div class="pl-6">
+                  <span class="text-purple-500 dark:text-purple-400">role</span><span class="text-gray-500">: </span>
+                  <span class="text-amber-600 dark:text-amber-400">'Full Stack Dev'</span><span class="text-gray-500">,</span>
+                </div>
+                <div class="pl-6">
+                  <span class="text-purple-500 dark:text-purple-400">skills</span><span class="text-gray-500">: [</span>
+                </div>
+                <div class="pl-10">
+                  <span class="text-amber-600 dark:text-amber-400">'Vue.js'</span><span class="text-gray-500">, </span>
+                  <span class="text-amber-600 dark:text-amber-400">'Nuxt'</span><span class="text-gray-500">, </span>
+                  <span class="text-amber-600 dark:text-amber-400">'Node.js'</span><span class="text-gray-500">,</span>
+                </div>
+                <div class="pl-10">
+                  <span class="text-amber-600 dark:text-amber-400">'Java'</span><span class="text-gray-500">, </span>
+                  <span class="text-amber-600 dark:text-amber-400">'Hytale Plugins'</span><span class="text-gray-500">,</span>
+                </div>
+                <div class="pl-10">
+                  <span class="text-amber-600 dark:text-amber-400">'Docker'</span><span class="text-gray-500">, </span>
+                  <span class="text-amber-600 dark:text-amber-400">'TypeScript'</span>
+                </div>
+                <div class="pl-6">
+                  <span class="text-gray-500">],</span>
+                </div>
+                <div class="pl-6">
+                  <span class="text-purple-500 dark:text-purple-400">available</span><span class="text-gray-500">: </span>
+                  <span class="text-brand-500">true</span>
+                </div>
+                <div>
+                  <span class="text-gray-500">}</span>
+                </div>
+                <!-- Blinking cursor -->
+                <div class="mt-2 flex items-center gap-1">
+                  <span class="text-brand-500">$</span>
+                  <span class="w-2.5 h-5 bg-brand-500 animate-pulse" />
+                </div>
+              </div>
+            </div>
+
+            <!-- Floating decoration cards -->
+            <div class="absolute -top-4 -right-4 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
+              <span class="w-2 h-2 rounded-full bg-brand-500" />
+              <span class="text-gray-700 dark:text-gray-300">50+ projects</span>
+            </div>
+            <div class="absolute -bottom-3 -left-3 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg text-xs font-medium flex items-center gap-2">
+              <UIcon name="i-lucide-star" class="text-yellow-400 w-3.5 h-3.5" />
+              <span class="text-gray-700 dark:text-gray-300">5.0 rating</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
diff --git a/app/components/sections/ServicesSection.vue b/app/components/sections/ServicesSection.vue
index 0319d81..0dec3aa 100644
--- a/app/components/sections/ServicesSection.vue
+++ b/app/components/sections/ServicesSection.vue
@@ -26,22 +26,28 @@ const services = computed(() => [
 </script>
 
 <template>
-  <section class="py-16 px-4">
-    <div class="max-w-6xl mx-auto">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold mb-4">{{ t('home.services.title') }}</h2>
-        <p class="text-lg text-muted max-w-2xl mx-auto">{{ t('home.services.subtitle') }}</p>
+  <section class="py-20 md:py-28 px-4 bg-gray-50 dark:bg-gray-900/50 rounded-3xl mx-2 md:mx-0">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-14">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Services</span>
+        <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('home.services.title') }}</h2>
+        <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">{{ t('home.services.subtitle') }}</p>
       </div>
+
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <UCard v-for="(service, index) in services" :key="index">
-          <div class="flex items-start gap-4">
-            <UIcon :name="service.icon" class="text-primary text-2xl shrink-0 mt-1" />
-            <div>
-              <h3 class="text-xl font-bold mb-2">{{ service.title }}</h3>
-              <p class="text-muted">{{ service.description }}</p>
-            </div>
+        <div
+          v-for="(service, index) in services"
+          :key="index"
+          class="group relative rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5 hover:-translate-y-0.5"
+        >
+          <!-- Icon -->
+          <div class="w-12 h-12 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mb-5 transition-colors group-hover:bg-brand-500/20">
+            <UIcon :name="service.icon" class="text-brand-600 dark:text-brand-400 text-xl" />
           </div>
-        </UCard>
+
+          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ service.title }}</h3>
+          <p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ service.description }}</p>
+        </div>
       </div>
     </div>
   </section>
diff --git a/app/components/sections/TestimonialsSection.vue b/app/components/sections/TestimonialsSection.vue
index 073cb9f..acb8d68 100644
--- a/app/components/sections/TestimonialsSection.vue
+++ b/app/components/sections/TestimonialsSection.vue
@@ -5,63 +5,84 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <section class="py-16 px-4">
-    <div class="max-w-6xl mx-auto">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold mb-4">{{ t('testimonials.title') }}</h2>
-        <p class="text-lg text-muted max-w-2xl mx-auto">{{ t('testimonials.subtitle') }}</p>
+  <section class="py-20 md:py-28 px-4">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-14">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">{{ t('testimonials.title') }}</span>
+        <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('testimonials.title') }}</h2>
+        <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">{{ t('testimonials.subtitle') }}</p>
 
-        <!-- Stats -->
-        <div class="flex justify-center gap-8 mt-8">
+        <!-- Stats row -->
+        <div class="flex justify-center gap-10 mt-10">
           <div class="text-center">
-            <p class="text-3xl font-bold text-primary">{{ testimonialsStats.totalReviews }}</p>
-            <p class="text-sm text-muted">{{ t('testimonials.stats.clients') }}</p>
+            <p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.totalReviews }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.clients') }}</p>
           </div>
+          <div class="w-px bg-gray-200 dark:bg-gray-800" />
           <div class="text-center">
-            <p class="text-3xl font-bold text-primary">{{ testimonialsStats.averageRating }}/5</p>
-            <p class="text-sm text-muted">{{ t('testimonials.stats.rating') }}</p>
+            <p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.averageRating }}/5</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.rating') }}</p>
           </div>
+          <div class="w-px bg-gray-200 dark:bg-gray-800" />
           <div class="text-center">
-            <p class="text-3xl font-bold text-primary">{{ testimonialsStats.projectsCompleted }}</p>
-            <p class="text-sm text-muted">{{ t('testimonials.stats.projects') }}</p>
+            <p class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ testimonialsStats.projectsCompleted }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('testimonials.stats.projects') }}</p>
           </div>
         </div>
       </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <UCard v-for="(testimonial, index) in testimonials" :key="index">
-          <div class="flex flex-col gap-3">
-            <!-- Rating -->
+      <!-- Horizontal scrolling testimonials -->
+      <div class="flex gap-6 overflow-x-auto pb-4 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
+        <div
+          v-for="(testimonial, index) in testimonials"
+          :key="index"
+          class="flex-none w-[340px] sm:w-[380px] snap-start"
+        >
+          <div class="h-full rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 flex flex-col gap-4 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5">
+            <!-- Rating stars -->
             <div class="flex gap-1">
               <UIcon
                 v-for="star in 5"
                 :key="star"
                 name="i-lucide-star"
-                :class="star <= testimonial.rating ? 'text-yellow-400' : 'text-gray-300'"
+                class="w-4 h-4"
+                :class="star <= testimonial.rating ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-700'"
               />
             </div>
 
-            <!-- Content -->
-            <p class="text-sm italic">"{{ testimonial.content }}"</p>
+            <!-- Quote -->
+            <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed flex-1 italic">
+              "{{ testimonial.content }}"
+            </p>
 
             <!-- Author -->
-            <div class="flex items-center gap-3 mt-2">
+            <div class="flex items-center gap-3 pt-2 border-t border-gray-100 dark:border-gray-800">
               <NuxtImg
                 :src="testimonial.avatar"
                 :alt="testimonial.name"
                 width="40"
                 height="40"
-                class="rounded-full"
+                class="rounded-full ring-2 ring-gray-100 dark:ring-gray-800"
                 loading="lazy"
               />
               <div>
-                <p class="font-semibold text-sm">{{ testimonial.name }}</p>
-                <p class="text-xs text-muted">{{ testimonial.project_type }} - {{ testimonial.platform }}</p>
+                <p class="font-semibold text-sm text-gray-900 dark:text-white">{{ testimonial.name }}</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">{{ testimonial.project_type }} - {{ testimonial.platform }}</p>
               </div>
             </div>
           </div>
-        </UCard>
+        </div>
       </div>
     </div>
   </section>
 </template>
+
+<style scoped>
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>
diff --git a/app/error.vue b/app/error.vue
index ed3d151..4696dff 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -10,13 +10,39 @@ function handleError() {
 </script>
 
 <template>
-  <div class="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
-    <h1 class="text-8xl font-bold text-primary">{{ error.statusCode }}</h1>
-    <p class="text-xl text-gray-500 dark:text-gray-400 text-center max-w-md">
-      {{ error.statusCode === 404 ? t('error.notFound') : t('error.generic') }}
-    </p>
-    <UButton size="lg" @click="handleError">
-      {{ t('error.backHome') }}
-    </UButton>
+  <div class="min-h-screen flex flex-col items-center justify-center gap-8 px-4 bg-white dark:bg-gray-950">
+    <!-- Decorative background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl" />
+    </div>
+
+    <div class="relative z-10 text-center space-y-6 max-w-lg">
+      <!-- Error code with glitch-like styling -->
+      <div class="relative">
+        <h1 class="text-[10rem] sm:text-[12rem] font-black leading-none tracking-tighter bg-gradient-to-b from-brand-500 to-brand-600 bg-clip-text text-transparent select-none">
+          {{ error.statusCode }}
+        </h1>
+        <!-- Shadow text behind -->
+        <span class="absolute inset-0 text-[10rem] sm:text-[12rem] font-black leading-none tracking-tighter text-brand-500/10 blur-sm select-none" aria-hidden="true">
+          {{ error.statusCode }}
+        </span>
+      </div>
+
+      <div class="space-y-3">
+        <p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">
+          {{ error.statusCode === 404 ? t('error.notFound') : t('error.generic') }}
+        </p>
+        <p class="text-gray-500 dark:text-gray-400">
+          {{ error.statusCode === 404
+            ? 'The page you are looking for does not exist or has been moved.'
+            : 'Something unexpected happened. Please try again.'
+          }}
+        </p>
+      </div>
+
+      <UButton size="xl" icon="i-lucide-home" class="font-semibold" @click="handleError">
+        {{ t('error.backHome') }}
+      </UButton>
+    </div>
   </div>
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3880a31..d8328fc 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="min-h-screen flex flex-col bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
     <AppHeader />
     <main class="flex-1">
       <slot />
diff --git a/app/pages/about.vue b/app/pages/about.vue
index cf60789..cda67ce 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -2,6 +2,7 @@
 import { techStack } from '~/data/techstack'
 
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 useSeoMeta({
   title: () => t('seo.about.title'),
@@ -64,15 +65,16 @@ const approachCards = computed(() => [
 <template>
   <div>
     <!-- Hero Section -->
-    <section class="py-20 px-4 text-center">
-      <div class="max-w-4xl mx-auto">
-        <h1 class="text-4xl sm:text-5xl font-bold mb-6">
+    <section class="pt-16 pb-20 px-4 bg-gray-50 dark:bg-gray-900/30">
+      <div class="max-w-4xl mx-auto text-center">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">About</span>
+        <h1 class="text-4xl sm:text-5xl font-bold mt-2 mb-6 text-gray-900 dark:text-white">
           {{ t('about.title') }}
         </h1>
-        <p class="text-xl text-muted mb-8">
+        <p class="text-xl text-gray-500 dark:text-gray-400 mb-10 max-w-2xl mx-auto">
           {{ t('about.subtitle') }}
         </p>
-        <div class="space-y-4 text-lg text-muted max-w-3xl mx-auto">
+        <div class="space-y-4 text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto leading-relaxed">
           <p>{{ t('about.intro.content') }}</p>
           <p>{{ t('about.experience.content') }}</p>
         </div>
@@ -80,23 +82,30 @@ const approachCards = computed(() => [
     </section>
 
     <!-- Skills Section -->
-    <section class="py-16 px-4">
+    <section class="py-20 md:py-28 px-4">
       <div class="max-w-7xl mx-auto">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold mb-4">{{ t('about.skills.title') }}</h2>
-          <p class="text-lg text-muted max-w-2xl mx-auto">
+        <div class="text-center mb-14">
+          <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Tech Stack</span>
+          <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('about.skills.title') }}</h2>
+          <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">
             {{ t('about.subtitle') }}
           </p>
         </div>
 
         <!-- Tech Categories Grid -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-          <UCard v-for="category in techCategories" :key="category.key">
-            <div class="flex items-center gap-3 mb-4">
-              <UIcon :name="category.icon" class="text-2xl text-primary" />
-              <h3 class="text-xl font-bold">{{ category.title }}</h3>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <div
+            v-for="category in techCategories"
+            :key="category.key"
+            class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8"
+          >
+            <div class="flex items-center gap-3 mb-6">
+              <div class="w-10 h-10 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center">
+                <UIcon :name="category.icon" class="text-xl text-brand-600 dark:text-brand-400" />
+              </div>
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ category.title }}</h3>
             </div>
-            <div class="flex flex-wrap gap-3">
+            <div class="flex flex-wrap gap-2">
               <TechBadge
                 v-for="tech in techStack[category.key]"
                 :key="tech.name"
@@ -104,16 +113,18 @@ const approachCards = computed(() => [
                 :show-level="true"
               />
             </div>
-          </UCard>
+          </div>
         </div>
 
         <!-- Operating Systems -->
-        <UCard>
-          <div class="flex items-center gap-3 mb-4">
-            <UIcon name="i-lucide-monitor" class="text-2xl text-primary" />
-            <h3 class="text-xl font-bold">{{ t('about.skills.systems') }}</h3>
+        <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center">
+              <UIcon name="i-lucide-monitor" class="text-xl text-brand-600 dark:text-brand-400" />
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ t('about.skills.systems') }}</h3>
           </div>
-          <div class="flex flex-wrap gap-3">
+          <div class="flex flex-wrap gap-2">
             <TechBadge
               v-for="tech in techStack.operating_systems"
               :key="tech.name"
@@ -121,46 +132,60 @@ const approachCards = computed(() => [
               :show-level="false"
             />
           </div>
-        </UCard>
+        </div>
       </div>
     </section>
 
     <!-- Approach Section -->
-    <section class="py-16 px-4">
+    <section class="py-20 md:py-28 px-4 bg-gray-50 dark:bg-gray-900/30">
       <div class="max-w-7xl mx-auto">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold mb-4">{{ t('about.approach.title') }}</h2>
-          <p class="text-lg text-muted max-w-2xl mx-auto">
+        <div class="text-center mb-14">
+          <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Methodology</span>
+          <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('about.approach.title') }}</h2>
+          <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">
             {{ t('about.approach.subtitle') }}
           </p>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <UCard v-for="(card, index) in approachCards" :key="index">
+          <div
+            v-for="(card, index) in approachCards"
+            :key="index"
+            class="group rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8 transition-all duration-300 hover:border-brand-500/30 hover:shadow-lg hover:shadow-brand-500/5"
+          >
             <div class="flex items-start gap-4">
-              <UIcon :name="card.icon" class="text-2xl text-primary shrink-0 mt-1" />
+              <div class="w-12 h-12 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center shrink-0 transition-colors group-hover:bg-brand-500/20">
+                <UIcon :name="card.icon" class="text-xl text-brand-600 dark:text-brand-400" />
+              </div>
               <div>
-                <h3 class="text-lg font-bold mb-2">{{ card.title }}</h3>
-                <p class="text-muted">{{ card.description }}</p>
+                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ card.title }}</h3>
+                <p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ card.description }}</p>
               </div>
             </div>
-          </UCard>
+          </div>
         </div>
       </div>
     </section>
 
     <!-- CTA Section -->
-    <section class="py-16 px-4 text-center">
-      <div class="max-w-2xl mx-auto">
-        <h2 class="text-3xl font-bold mb-4">{{ t('about.cta.title') }}</h2>
-        <p class="text-lg text-muted mb-8">{{ t('about.cta.description') }}</p>
-        <div class="flex flex-wrap justify-center gap-4">
-          <UButton to="/contact" size="lg">
-            {{ t('about.cta.button') }}
-          </UButton>
-          <UButton to="/projects" size="lg" variant="outline">
-            {{ t('home.cta.viewProjects') }}
-          </UButton>
+    <section class="py-20 md:py-28 px-4">
+      <div class="max-w-5xl mx-auto">
+        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 via-brand-500 to-emerald-500 px-8 py-16 sm:px-16 sm:py-20 text-center">
+          <div class="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-2xl" aria-hidden="true" />
+          <div class="absolute bottom-0 right-0 w-96 h-96 bg-black/10 rounded-full translate-x-1/3 translate-y-1/3 blur-2xl" aria-hidden="true" />
+
+          <div class="relative z-10">
+            <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">{{ t('about.cta.title') }}</h2>
+            <p class="text-lg text-white/80 mb-10 max-w-2xl mx-auto">{{ t('about.cta.description') }}</p>
+            <div class="flex flex-wrap justify-center gap-4">
+              <UButton :to="localePath('/contact')" size="xl" color="white" class="font-semibold">
+                {{ t('about.cta.button') }}
+              </UButton>
+              <UButton :to="localePath('/projects')" size="xl" variant="outline" color="white" class="font-semibold">
+                {{ t('home.cta.viewProjects') }}
+              </UButton>
+            </div>
+          </div>
         </div>
       </div>
     </section>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index 317fb90..6df342b 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -18,72 +18,83 @@ useSeoMeta({
 <template>
   <div>
     <!-- Hero Section -->
-    <section class="py-20 px-4 text-center">
-      <div class="max-w-4xl mx-auto">
-        <h1 class="text-4xl sm:text-5xl font-bold mb-6">
+    <section class="pt-16 pb-12 px-4 bg-gray-50 dark:bg-gray-900/30">
+      <div class="max-w-4xl mx-auto text-center">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Contact</span>
+        <h1 class="text-4xl sm:text-5xl font-bold mt-2 mb-6 text-gray-900 dark:text-white">
           {{ t('contact.title') }}
         </h1>
-        <p class="text-xl text-muted mb-8">
+        <p class="text-xl text-gray-500 dark:text-gray-400 mb-10 max-w-2xl mx-auto">
           {{ t('contact.subtitle') }}
         </p>
 
         <!-- Stats -->
-        <div class="flex flex-wrap justify-center gap-8">
+        <div class="flex flex-wrap justify-center gap-10">
           <div class="text-center">
-            <div class="text-2xl font-bold text-primary">24-48h</div>
-            <div class="text-sm text-muted">{{ t('contact.stats.responseTime') }}</div>
+            <div class="text-3xl font-extrabold text-brand-500 dark:text-brand-400">24-48h</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('contact.stats.responseTime') }}</div>
           </div>
+          <div class="w-px bg-gray-200 dark:bg-gray-800 hidden sm:block" />
           <div class="text-center">
-            <div class="text-2xl font-bold text-primary">100%</div>
-            <div class="text-sm text-muted">{{ t('contact.stats.satisfaction') }}</div>
+            <div class="text-3xl font-extrabold text-brand-500 dark:text-brand-400">100%</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('contact.stats.satisfaction') }}</div>
           </div>
+          <div class="w-px bg-gray-200 dark:bg-gray-800 hidden sm:block" />
           <div class="text-center">
-            <div class="text-2xl font-bold text-primary">Remote</div>
-            <div class="text-sm text-muted">{{ t('contact.stats.collaboration') }}</div>
+            <div class="text-3xl font-extrabold text-brand-500 dark:text-brand-400">Remote</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('contact.stats.collaboration') }}</div>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Two Column Layout -->
-    <section class="py-16 px-4">
-      <div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <!-- Left: Contact Form -->
-        <UCard>
-          <template #header>
-            <h2 class="text-2xl font-bold">{{ t('contact.form.title') }}</h2>
-          </template>
-          <ContactForm />
-        </UCard>
+    <section class="py-16 md:py-20 px-4">
+      <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-16">
+        <!-- Left: Contact Form (wider) -->
+        <div class="lg:col-span-3">
+          <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8">
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">{{ t('contact.form.title') }}</h2>
+            <ContactForm />
+          </div>
+        </div>
 
         <!-- Right: Contact Info + Social -->
-        <div class="flex flex-col gap-6">
+        <div class="lg:col-span-2 flex flex-col gap-6">
           <!-- Contact Info -->
-          <UCard>
-            <template #header>
-              <h2 class="text-xl font-bold">{{ t('contact.quickContact') }}</h2>
-            </template>
-            <div class="flex flex-col gap-4">
-              <a :href="`mailto:${siteConfig.contact.email}`" class="flex items-center gap-3 hover:text-primary transition-colors">
-                <UIcon name="i-lucide-mail" class="text-xl text-primary shrink-0" />
-                <span>{{ siteConfig.contact.email }}</span>
+          <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8">
+            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">{{ t('contact.quickContact') }}</h2>
+            <div class="flex flex-col gap-5">
+              <a
+                :href="`mailto:${siteConfig.contact.email}`"
+                class="flex items-center gap-4 group"
+              >
+                <div class="w-10 h-10 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center shrink-0 transition-colors group-hover:bg-brand-500/20">
+                  <UIcon name="i-lucide-mail" class="text-brand-600 dark:text-brand-400" />
+                </div>
+                <span class="text-gray-600 dark:text-gray-300 group-hover:text-brand-500 transition-colors">{{ siteConfig.contact.email }}</span>
               </a>
-              <a :href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`" class="flex items-center gap-3 hover:text-primary transition-colors">
-                <UIcon name="i-lucide-phone" class="text-xl text-primary shrink-0" />
-                <span>{{ siteConfig.contact.phone }}</span>
+              <a
+                :href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`"
+                class="flex items-center gap-4 group"
+              >
+                <div class="w-10 h-10 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center shrink-0 transition-colors group-hover:bg-brand-500/20">
+                  <UIcon name="i-lucide-phone" class="text-brand-600 dark:text-brand-400" />
+                </div>
+                <span class="text-gray-600 dark:text-gray-300 group-hover:text-brand-500 transition-colors">{{ siteConfig.contact.phone }}</span>
               </a>
-              <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-map-pin" class="text-xl text-primary shrink-0" />
-                <span>{{ siteConfig.contact.location }}</span>
+              <div class="flex items-center gap-4">
+                <div class="w-10 h-10 rounded-xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center shrink-0">
+                  <UIcon name="i-lucide-map-pin" class="text-brand-600 dark:text-brand-400" />
+                </div>
+                <span class="text-gray-600 dark:text-gray-300">{{ siteConfig.contact.location }}</span>
               </div>
             </div>
-          </UCard>
+          </div>
 
           <!-- Social Links -->
-          <UCard>
-            <template #header>
-              <h2 class="text-xl font-bold">{{ t('contact.findMeOn') }}</h2>
-            </template>
+          <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 sm:p-8">
+            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">{{ t('contact.findMeOn') }}</h2>
             <div class="flex flex-col gap-3">
               <a
                 v-for="social in siteConfig.social.filter(s => s.icon !== 'i-lucide-mail')"
@@ -91,46 +102,55 @@ useSeoMeta({
                 :href="social.url"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="flex items-center gap-3 hover:text-primary transition-colors"
+                class="flex items-center gap-4 p-3 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
               >
-                <UIcon :name="social.icon" class="text-xl shrink-0" />
-                <span>{{ social.name }}</span>
-                <UIcon name="i-lucide-external-link" class="text-sm text-muted ml-auto" />
+                <div class="w-10 h-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center shrink-0 group-hover:bg-brand-500/10 transition-colors">
+                  <UIcon :name="social.icon" class="text-gray-500 dark:text-gray-400 group-hover:text-brand-500 transition-colors" />
+                </div>
+                <span class="text-gray-700 dark:text-gray-300 font-medium group-hover:text-brand-500 transition-colors">{{ social.name }}</span>
+                <UIcon name="i-lucide-external-link" class="text-xs text-gray-400 dark:text-gray-600 ml-auto" />
               </a>
             </div>
-          </UCard>
+          </div>
         </div>
       </div>
     </section>
 
     <!-- FAQ Info Cards -->
-    <section class="py-16 px-4">
-      <div class="max-w-5xl mx-auto">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold mb-4">{{ t('contact.faq.title') }}</h2>
-          <p class="text-lg text-muted max-w-2xl mx-auto">
+    <section class="py-16 md:py-20 px-4 bg-gray-50 dark:bg-gray-900/30">
+      <div class="max-w-6xl mx-auto">
+        <div class="text-center mb-14">
+          <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Info</span>
+          <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('contact.faq.title') }}</h2>
+          <p class="text-lg text-gray-500 dark:text-gray-400 mt-3 max-w-2xl mx-auto">
             {{ t('contact.faq.subtitle') }}
           </p>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <UCard class="text-center">
-            <UIcon name="i-lucide-clock" class="text-3xl text-primary mb-4 mx-auto" />
-            <h3 class="text-lg font-bold mb-2">{{ t('contact.faq.responseTime.title') }}</h3>
-            <p class="text-muted text-sm">{{ t('contact.faq.responseTime.description') }}</p>
-          </UCard>
+          <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8 text-center group hover:border-brand-500/30 transition-all duration-300">
+            <div class="w-14 h-14 rounded-2xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mx-auto mb-5 group-hover:bg-brand-500/20 transition-colors">
+              <UIcon name="i-lucide-clock" class="text-2xl text-brand-600 dark:text-brand-400" />
+            </div>
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ t('contact.faq.responseTime.title') }}</h3>
+            <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">{{ t('contact.faq.responseTime.description') }}</p>
+          </div>
 
-          <UCard class="text-center">
-            <UIcon name="i-lucide-building" class="text-3xl text-primary mb-4 mx-auto" />
-            <h3 class="text-lg font-bold mb-2">{{ t('contact.faq.projectTypes.title') }}</h3>
-            <p class="text-muted text-sm">{{ t('contact.faq.projectTypes.description') }}</p>
-          </UCard>
+          <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8 text-center group hover:border-brand-500/30 transition-all duration-300">
+            <div class="w-14 h-14 rounded-2xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mx-auto mb-5 group-hover:bg-brand-500/20 transition-colors">
+              <UIcon name="i-lucide-building" class="text-2xl text-brand-600 dark:text-brand-400" />
+            </div>
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ t('contact.faq.projectTypes.title') }}</h3>
+            <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">{{ t('contact.faq.projectTypes.description') }}</p>
+          </div>
 
-          <UCard class="text-center">
-            <UIcon name="i-lucide-users" class="text-3xl text-primary mb-4 mx-auto" />
-            <h3 class="text-lg font-bold mb-2">{{ t('contact.faq.collaboration.title') }}</h3>
-            <p class="text-muted text-sm">{{ t('contact.faq.collaboration.description') }}</p>
-          </UCard>
+          <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8 text-center group hover:border-brand-500/30 transition-all duration-300">
+            <div class="w-14 h-14 rounded-2xl bg-brand-500/10 dark:bg-brand-500/15 flex items-center justify-center mx-auto mb-5 group-hover:bg-brand-500/20 transition-colors">
+              <UIcon name="i-lucide-users" class="text-2xl text-brand-600 dark:text-brand-400" />
+            </div>
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ t('contact.faq.collaboration.title') }}</h3>
+            <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">{{ t('contact.faq.collaboration.description') }}</p>
+          </div>
         </div>
       </div>
     </section>
diff --git a/app/pages/fiverr.vue b/app/pages/fiverr.vue
index b8d76ce..1b83a2d 100644
--- a/app/pages/fiverr.vue
+++ b/app/pages/fiverr.vue
@@ -33,20 +33,21 @@ const heroStats = computed(() => [
 <template>
   <div>
     <!-- Hero Section -->
-    <section class="py-20 px-4 text-center">
-      <div class="max-w-4xl mx-auto">
-        <h1 class="text-4xl sm:text-5xl font-bold mb-6">
+    <section class="pt-16 pb-16 px-4 bg-gray-50 dark:bg-gray-900/30">
+      <div class="max-w-4xl mx-auto text-center">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Fiverr</span>
+        <h1 class="text-4xl sm:text-5xl font-bold mt-2 mb-6 text-gray-900 dark:text-white">
           {{ t('fiverr.title') }}
         </h1>
-        <p class="text-xl text-muted mb-8">
+        <p class="text-xl text-gray-500 dark:text-gray-400 mb-10 max-w-2xl mx-auto">
           {{ t('fiverr.subtitle') }}
         </p>
 
         <!-- Stats -->
-        <div class="flex flex-wrap justify-center gap-8 mb-8">
+        <div class="flex flex-wrap justify-center gap-10 mb-10">
           <div v-for="stat in heroStats" :key="stat.label" class="text-center">
-            <div class="text-3xl font-bold text-primary">{{ stat.number }}</div>
-            <div class="text-sm text-muted">{{ stat.label }}</div>
+            <div class="text-4xl font-extrabold text-brand-500 dark:text-brand-400">{{ stat.number }}</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ stat.label }}</div>
           </div>
         </div>
 
@@ -54,8 +55,9 @@ const heroStats = computed(() => [
           :to="siteConfig.fiverr.profileUrl"
           target="_blank"
           external
-          size="lg"
+          size="xl"
           trailing-icon="i-lucide-external-link"
+          class="font-semibold"
         >
           {{ t('fiverr.profileCta') }}
         </UButton>
@@ -63,89 +65,114 @@ const heroStats = computed(() => [
     </section>
 
     <!-- Services Section -->
-    <section class="py-16 px-4">
+    <section class="py-20 md:py-28 px-4">
       <div class="max-w-7xl mx-auto">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold mb-4">{{ t('fiverr.services.title') }}</h2>
-          <p class="text-lg text-muted">{{ t('fiverr.services.subtitle') }}</p>
+        <div class="text-center mb-14">
+          <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Services</span>
+          <h2 class="text-3xl sm:text-4xl font-bold mt-2 text-gray-900 dark:text-white">{{ t('fiverr.services.title') }}</h2>
+          <p class="text-lg text-gray-500 dark:text-gray-400 mt-3">{{ t('fiverr.services.subtitle') }}</p>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <UCard v-for="service in services" :key="service.id">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+          <div
+            v-for="service in services"
+            :key="service.id"
+            class="group rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-all duration-300 hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 hover:-translate-y-1"
+          >
             <!-- Service Image -->
-            <NuxtImg
-              :src="service.image"
-              :alt="t(`fiverr.serviceData.${service.id}.title`)"
-              class="w-full h-48 object-cover rounded-lg mb-4"
-              loading="lazy"
-            />
-
-            <!-- Price & Status Badges -->
-            <div class="flex items-center gap-2 mb-3">
-              <UBadge color="primary" variant="subtle">
-                {{ t('fiverr.pricing.startingAt') }} {{ service.price }}
-              </UBadge>
-              <UBadge
-                :color="service.url !== '#' ? 'success' : 'warning'"
-                variant="subtle"
-              >
-                {{ service.url !== '#' ? t('fiverr.services.available') : t('fiverr.services.comingSoon') }}
-              </UBadge>
+            <div class="relative overflow-hidden">
+              <NuxtImg
+                :src="service.image"
+                :alt="t(`fiverr.serviceData.${service.id}.title`)"
+                class="w-full h-52 object-cover transition-transform duration-500 group-hover:scale-105"
+                loading="lazy"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
+              <!-- Price badge overlay -->
+              <div class="absolute bottom-3 left-3">
+                <span class="px-3 py-1.5 rounded-lg bg-brand-500 text-white text-sm font-bold shadow-lg">
+                  {{ t('fiverr.pricing.startingAt') }} {{ service.price }}
+                </span>
+              </div>
+              <!-- Status badge -->
+              <div class="absolute top-3 right-3">
+                <span
+                  :class="service.url !== '#'
+                    ? 'bg-green-500/90 text-white'
+                    : 'bg-yellow-500/90 text-white'"
+                  class="px-2.5 py-1 rounded-lg text-xs font-semibold shadow-lg"
+                >
+                  {{ service.url !== '#' ? t('fiverr.services.available') : t('fiverr.services.comingSoon') }}
+                </span>
+              </div>
             </div>
 
-            <!-- Title & Description -->
-            <h3 class="text-xl font-bold mb-2">
-              {{ t(`fiverr.serviceData.${service.id}.title`) }}
-            </h3>
-            <p class="text-muted mb-4">
-              {{ t(`fiverr.serviceData.${service.id}.description`) }}
-            </p>
+            <!-- Content -->
+            <div class="p-6">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-brand-500 transition-colors">
+                {{ t(`fiverr.serviceData.${service.id}.title`) }}
+              </h3>
+              <p class="text-gray-500 dark:text-gray-400 mb-5 leading-relaxed">
+                {{ t(`fiverr.serviceData.${service.id}.description`) }}
+              </p>
 
-            <!-- Action Button -->
-            <UButton
-              v-if="service.url !== '#'"
-              :to="service.url"
-              target="_blank"
-              external
-              size="sm"
-              trailing-icon="i-lucide-external-link"
-            >
-              {{ t('fiverr.services.orderNow') }}
-            </UButton>
-            <UButton
-              v-else
-              size="sm"
-              variant="outline"
-              disabled
-            >
-              {{ t('fiverr.services.comingSoon') }}
-            </UButton>
-          </UCard>
+              <!-- Action Button -->
+              <UButton
+                v-if="service.url !== '#'"
+                :to="service.url"
+                target="_blank"
+                external
+                trailing-icon="i-lucide-external-link"
+                class="font-semibold"
+              >
+                {{ t('fiverr.services.orderNow') }}
+              </UButton>
+              <UButton
+                v-else
+                variant="outline"
+                disabled
+                class="font-semibold"
+              >
+                {{ t('fiverr.services.comingSoon') }}
+              </UButton>
+            </div>
+          </div>
         </div>
       </div>
     </section>
 
     <!-- FAQ Section -->
-    <FAQSection
-      :faqs="homeFAQs"
-      :title="t('fiverr.faq.title')"
-      :subtitle="t('fiverr.faq.subtitle')"
-    />
+    <div class="bg-gray-50 dark:bg-gray-900/30">
+      <FAQSection
+        :faqs="homeFAQs"
+        :title="t('fiverr.faq.title')"
+        :subtitle="t('fiverr.faq.subtitle')"
+      />
+    </div>
 
     <!-- CTA Section -->
-    <section class="py-16 px-4 text-center">
-      <div class="max-w-2xl mx-auto">
-        <h2 class="text-3xl font-bold mb-4">{{ t('fiverr.cta.title') }}</h2>
-        <p class="text-lg text-muted mb-8">{{ t('fiverr.cta.subtitle') }}</p>
-        <UButton
-          :to="siteConfig.fiverr.profileUrl"
-          target="_blank"
-          external
-          size="lg"
-          trailing-icon="i-lucide-external-link"
-        >
-          {{ t('fiverr.cta.button') }}
-        </UButton>
+    <section class="py-20 md:py-28 px-4">
+      <div class="max-w-5xl mx-auto">
+        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 via-brand-500 to-emerald-500 px-8 py-16 sm:px-16 sm:py-20 text-center">
+          <div class="absolute top-0 left-0 w-72 h-72 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2 blur-2xl" aria-hidden="true" />
+          <div class="absolute bottom-0 right-0 w-96 h-96 bg-black/10 rounded-full translate-x-1/3 translate-y-1/3 blur-2xl" aria-hidden="true" />
+
+          <div class="relative z-10">
+            <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">{{ t('fiverr.cta.title') }}</h2>
+            <p class="text-lg text-white/80 mb-10 max-w-2xl mx-auto">{{ t('fiverr.cta.subtitle') }}</p>
+            <UButton
+              :to="siteConfig.fiverr.profileUrl"
+              target="_blank"
+              external
+              size="xl"
+              color="white"
+              trailing-icon="i-lucide-external-link"
+              class="font-semibold"
+            >
+              {{ t('fiverr.cta.button') }}
+            </UButton>
+          </div>
+        </div>
       </div>
     </section>
   </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8807574..c47717a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -53,24 +53,26 @@ useHead({
     <!-- Hero Section -->
     <HeroSection />
 
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <!-- Featured Projects Section -->
+    <!-- Featured Projects Section -->
+    <div class="bg-gray-50 dark:bg-gray-900/30">
       <FeaturedProjectsSection />
-
-      <!-- Services Section -->
-      <ServicesSection />
-
-      <!-- Testimonials Section -->
-      <TestimonialsSection />
-
-      <!-- FAQ Section -->
-      <FAQSection
-        :faqs="homeFAQs"
-        :title="t('faq.title')"
-        :subtitle="t('faq.subtitle')"
-      />
     </div>
 
+    <!-- Services Section -->
+    <ServicesSection />
+
+    <!-- Testimonials Section -->
+    <div class="bg-gray-50 dark:bg-gray-900/30">
+      <TestimonialsSection />
+    </div>
+
+    <!-- FAQ Section -->
+    <FAQSection
+      :faqs="homeFAQs"
+      :title="t('faq.title')"
+      :subtitle="t('faq.subtitle')"
+    />
+
     <!-- CTA Section -->
     <CTASection />
   </div>
diff --git a/app/pages/project/[id].vue b/app/pages/project/[id].vue
index 02d9f6d..becef3a 100644
--- a/app/pages/project/[id].vue
+++ b/app/pages/project/[id].vue
@@ -29,181 +29,197 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="project" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-    <!-- Breadcrumb -->
-    <nav class="mb-8">
-      <UButton
-        variant="link"
-        icon="i-lucide-arrow-left"
-        to="/projects"
-      >
-        {{ t('projects.projectDetail.backToProjects') }}
-      </UButton>
-    </nav>
-
-    <!-- Hero Grid -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
-      <!-- Project Image -->
-      <div class="rounded-lg overflow-hidden">
-        <NuxtImg
-          v-if="project.image"
-          :src="project.image"
-          :alt="project.title"
-          class="w-full h-auto object-cover"
-          format="webp"
-          loading="lazy"
-        />
-      </div>
-
-      <!-- Project Info -->
-      <div class="flex flex-col justify-center">
-        <div class="flex items-center gap-3 mb-4">
-          <UBadge v-if="project.category" variant="subtle">{{ project.category }}</UBadge>
-          <span v-if="project.date" class="text-sm text-muted">{{ project.date }}</span>
-        </div>
-
-        <h1 class="text-3xl font-bold mb-4">{{ project.title }}</h1>
-        <p class="text-lg text-muted mb-6">{{ project.description }}</p>
-
-        <!-- CTA Buttons -->
-        <div class="flex flex-wrap gap-3">
-          <UButton
-            v-if="project.demoUrl"
-            :to="project.demoUrl"
-            target="_blank"
-            icon="i-lucide-external-link"
-          >
-            {{ t('projects.projectDetail.viewDemo') }}
-          </UButton>
-
-          <UButton
-            v-if="project.githubUrl"
-            :to="project.githubUrl"
-            target="_blank"
-            variant="soft"
-            icon="i-lucide-github"
-          >
-            {{ t('projects.projectDetail.sourceCode') }}
-          </UButton>
-
-          <UButton
-            v-for="button in project.buttons"
-            :key="button.title"
-            :to="button.link"
-            target="_blank"
-            variant="outline"
-            icon="i-lucide-external-link"
-          >
-            {{ button.title }}
-          </UButton>
-        </div>
+  <div v-if="project">
+    <!-- Back navigation -->
+    <div class="bg-gray-50 dark:bg-gray-900/30 border-b border-gray-200 dark:border-gray-800">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+        <UButton
+          variant="ghost"
+          icon="i-lucide-arrow-left"
+          to="/projects"
+          size="sm"
+          class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+        >
+          {{ t('projects.projectDetail.backToProjects') }}
+        </UButton>
       </div>
     </div>
 
-    <!-- Content Grid: Main + Sidebar -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-      <!-- Main Content -->
-      <div class="lg:col-span-2 space-y-12">
-        <!-- About -->
-        <section>
-          <h2 class="text-2xl font-bold mb-4">{{ t('projects.projectDetail.aboutProject') }}</h2>
-          <p class="text-muted leading-relaxed">
-            {{ project.longDescription || project.description }}
-          </p>
-
-          <!-- Features -->
-          <div v-if="project.features" class="mt-6">
-            <h3 class="text-lg font-semibold mb-3">{{ t('projects.projectDetail.keyFeatures') }}</h3>
-            <ul class="space-y-2">
-              <li v-for="feature in project.features" :key="feature" class="flex items-start gap-2">
-                <UIcon name="i-lucide-check" class="text-primary mt-1 shrink-0" />
-                <span>{{ feature }}</span>
-              </li>
-            </ul>
+    <!-- Hero section -->
+    <section class="bg-gray-50 dark:bg-gray-900/30 pb-16 pt-8">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
+          <!-- Project Image -->
+          <div class="rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 shadow-lg">
+            <NuxtImg
+              v-if="project.image"
+              :src="project.image"
+              :alt="project.title"
+              class="w-full h-auto object-cover"
+              format="webp"
+              loading="lazy"
+            />
           </div>
-        </section>
 
-        <!-- Technologies -->
-        <section v-if="project.technologies.length">
-          <h2 class="text-2xl font-bold mb-4">{{ t('projects.projectDetail.technologiesUsed') }}</h2>
-          <div class="flex flex-wrap gap-2">
-            <TechBadge v-for="tech in project.technologies" :key="tech" :tech="tech" />
-          </div>
-        </section>
-
-        <!-- Gallery Thumbnails -->
-        <section v-if="project.gallery?.length">
-          <h2 class="text-2xl font-bold mb-4">{{ t('projects.projectDetail.gallery') }}</h2>
-          <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
-            <button
-              v-for="(image, index) in project.gallery"
-              :key="index"
-              class="relative rounded-lg overflow-hidden group cursor-pointer"
-              @click="galleryRef?.openGallery(index)"
-            >
-              <NuxtImg
-                :src="image"
-                :alt="`${project.title} - Image ${index + 1}`"
-                class="w-full h-32 object-cover"
-                loading="lazy"
-                format="webp"
-              />
-              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center">
-                <UIcon name="i-lucide-zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-opacity text-2xl" />
-              </div>
-            </button>
-          </div>
-        </section>
-      </div>
-
-      <!-- Sidebar -->
-      <aside class="space-y-6">
-        <!-- Project Info Card -->
-        <UCard>
-          <template #header>
-            <h3 class="font-semibold">{{ t('projects.projectDetail.projectInfo') }}</h3>
-          </template>
-
-          <div class="space-y-3 text-sm">
-            <div v-if="project.date" class="flex justify-between">
-              <span class="text-muted">{{ t('projects.projectDetail.date') }}</span>
-              <span class="font-medium">{{ project.date }}</span>
+          <!-- Project Info -->
+          <div class="flex flex-col justify-center space-y-6">
+            <div class="flex items-center gap-3">
+              <UBadge v-if="project.category" variant="subtle" size="md">{{ project.category }}</UBadge>
+              <span v-if="project.date" class="text-sm text-gray-400 dark:text-gray-500 font-medium">{{ project.date }}</span>
             </div>
-            <div v-if="project.category" class="flex justify-between">
-              <span class="text-muted">{{ t('projects.projectDetail.category') }}</span>
-              <span class="font-medium">{{ project.category }}</span>
-            </div>
-          </div>
-        </UCard>
 
-        <!-- Related Projects -->
-        <div v-if="relatedProjects.length > 0">
-          <h3 class="font-semibold mb-4">{{ t('projects.projectDetail.relatedProjects') }}</h3>
-          <div class="space-y-3">
-            <NuxtLink
-              v-for="related in relatedProjects"
-              :key="related.id"
-              :to="`/project/${related.id}`"
-              class="flex gap-3 p-2 rounded-lg hover:bg-elevated transition-colors"
-            >
-              <NuxtImg
-                v-if="related.image"
-                :src="related.image"
-                :alt="related.title"
-                width="60"
-                height="45"
-                class="rounded object-cover shrink-0"
-                loading="lazy"
-              />
-              <div class="min-w-0">
-                <p class="font-medium text-sm truncate">{{ related.title }}</p>
-                <p class="text-xs text-muted line-clamp-2">{{ related.description }}</p>
-              </div>
-            </NuxtLink>
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">{{ project.title }}</h1>
+            <p class="text-lg text-gray-500 dark:text-gray-400 leading-relaxed">{{ project.description }}</p>
+
+            <!-- CTA Buttons -->
+            <div class="flex flex-wrap gap-3 pt-2">
+              <UButton
+                v-if="project.demoUrl"
+                :to="project.demoUrl"
+                target="_blank"
+                icon="i-lucide-external-link"
+                size="lg"
+                class="font-semibold"
+              >
+                {{ t('projects.projectDetail.viewDemo') }}
+              </UButton>
+
+              <UButton
+                v-if="project.githubUrl"
+                :to="project.githubUrl"
+                target="_blank"
+                variant="soft"
+                icon="i-lucide-github"
+                size="lg"
+              >
+                {{ t('projects.projectDetail.sourceCode') }}
+              </UButton>
+
+              <UButton
+                v-for="button in project.buttons"
+                :key="button.title"
+                :to="button.link"
+                target="_blank"
+                variant="outline"
+                icon="i-lucide-external-link"
+                size="lg"
+              >
+                {{ button.title }}
+              </UButton>
+            </div>
           </div>
         </div>
-      </aside>
-    </div>
+      </div>
+    </section>
+
+    <!-- Content -->
+    <section class="py-16 px-4">
+      <div class="max-w-7xl mx-auto">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-16">
+          <!-- Main Content -->
+          <div class="lg:col-span-2 space-y-16">
+            <!-- About -->
+            <div>
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-5">{{ t('projects.projectDetail.aboutProject') }}</h2>
+              <p class="text-gray-500 dark:text-gray-400 leading-relaxed text-lg">
+                {{ project.longDescription || project.description }}
+              </p>
+
+              <!-- Features -->
+              <div v-if="project.features" class="mt-8">
+                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">{{ t('projects.projectDetail.keyFeatures') }}</h3>
+                <ul class="space-y-3">
+                  <li v-for="feature in project.features" :key="feature" class="flex items-start gap-3">
+                    <div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center shrink-0 mt-0.5">
+                      <UIcon name="i-lucide-check" class="text-brand-500 w-3.5 h-3.5" />
+                    </div>
+                    <span class="text-gray-600 dark:text-gray-300">{{ feature }}</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <!-- Technologies -->
+            <div v-if="project.technologies.length">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-5">{{ t('projects.projectDetail.technologiesUsed') }}</h2>
+              <div class="flex flex-wrap gap-2">
+                <TechBadge v-for="tech in project.technologies" :key="tech" :tech="tech" />
+              </div>
+            </div>
+
+            <!-- Gallery Thumbnails -->
+            <div v-if="project.gallery?.length">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-5">{{ t('projects.projectDetail.gallery') }}</h2>
+              <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                <button
+                  v-for="(image, index) in project.gallery"
+                  :key="index"
+                  class="relative rounded-xl overflow-hidden group cursor-pointer border border-gray-200 dark:border-gray-800"
+                  @click="galleryRef?.openGallery(index)"
+                >
+                  <NuxtImg
+                    :src="image"
+                    :alt="`${project.title} - Image ${index + 1}`"
+                    class="w-full h-32 object-cover transition-transform duration-300 group-hover:scale-105"
+                    loading="lazy"
+                    format="webp"
+                  />
+                  <div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-center justify-center">
+                    <UIcon name="i-lucide-zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-xl" />
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Sidebar -->
+          <aside class="space-y-6">
+            <!-- Project Info Card -->
+            <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-6 sticky top-24">
+              <h3 class="font-bold text-gray-900 dark:text-white mb-5">{{ t('projects.projectDetail.projectInfo') }}</h3>
+
+              <div class="space-y-4 text-sm">
+                <div v-if="project.date" class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-800">
+                  <span class="text-gray-500 dark:text-gray-400">{{ t('projects.projectDetail.date') }}</span>
+                  <span class="font-semibold text-gray-900 dark:text-white">{{ project.date }}</span>
+                </div>
+                <div v-if="project.category" class="flex justify-between items-center py-2">
+                  <span class="text-gray-500 dark:text-gray-400">{{ t('projects.projectDetail.category') }}</span>
+                  <UBadge variant="subtle" size="xs">{{ project.category }}</UBadge>
+                </div>
+              </div>
+            </div>
+
+            <!-- Related Projects -->
+            <div v-if="relatedProjects.length > 0" class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-6">
+              <h3 class="font-bold text-gray-900 dark:text-white mb-5">{{ t('projects.projectDetail.relatedProjects') }}</h3>
+              <div class="space-y-4">
+                <NuxtLink
+                  v-for="related in relatedProjects"
+                  :key="related.id"
+                  :to="`/project/${related.id}`"
+                  class="flex gap-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group"
+                >
+                  <NuxtImg
+                    v-if="related.image"
+                    :src="related.image"
+                    :alt="related.title"
+                    width="60"
+                    height="45"
+                    class="rounded-lg object-cover shrink-0"
+                    loading="lazy"
+                  />
+                  <div class="min-w-0">
+                    <p class="font-semibold text-sm text-gray-900 dark:text-white truncate group-hover:text-brand-500 transition-colors">{{ related.title }}</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mt-0.5">{{ related.description }}</p>
+                  </div>
+                </NuxtLink>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
 
     <!-- Gallery Modal -->
     <ProjectGallery
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
index afa7ea8..17bdc0a 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -51,64 +51,79 @@ function resetFilters() {
 </script>
 
 <template>
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+  <div>
     <!-- Hero -->
-    <div class="text-center mb-12">
-      <h1 class="text-4xl font-bold mb-4">{{ t('projects.title') }}</h1>
-      <p class="text-lg text-muted max-w-2xl mx-auto">{{ t('projects.subtitle') }}</p>
+    <section class="pt-16 pb-12 px-4 bg-gray-50 dark:bg-gray-900/30">
+      <div class="max-w-7xl mx-auto text-center">
+        <span class="text-sm font-semibold text-brand-500 dark:text-brand-400 uppercase tracking-wider">Portfolio</span>
+        <h1 class="text-4xl sm:text-5xl font-bold mt-2 mb-4 text-gray-900 dark:text-white">{{ t('projects.title') }}</h1>
+        <p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">{{ t('projects.subtitle') }}</p>
 
-      <!-- Stats -->
-      <div class="flex justify-center gap-8 mt-8">
-        <div class="text-center">
-          <p class="text-3xl font-bold text-primary">{{ totalProjects }}</p>
-          <p class="text-sm text-muted">{{ t('nav.projects') }}</p>
-        </div>
-        <div class="text-center">
-          <p class="text-3xl font-bold text-primary">{{ featuredCount }}</p>
-          <p class="text-sm text-muted">{{ t('home.featuredProjects.title') }}</p>
-        </div>
-        <div class="text-center">
-          <p class="text-3xl font-bold text-primary">{{ categories.length - 1 }}</p>
-          <p class="text-sm text-muted">{{ t('projects.categories.all') }}</p>
+        <!-- Stats -->
+        <div class="flex justify-center gap-10 mt-10">
+          <div class="text-center">
+            <p class="text-3xl font-extrabold text-brand-500 dark:text-brand-400">{{ totalProjects }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('nav.projects') }}</p>
+          </div>
+          <div class="w-px bg-gray-200 dark:bg-gray-800" />
+          <div class="text-center">
+            <p class="text-3xl font-extrabold text-brand-500 dark:text-brand-400">{{ featuredCount }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('home.featuredProjects.title') }}</p>
+          </div>
+          <div class="w-px bg-gray-200 dark:bg-gray-800" />
+          <div class="text-center">
+            <p class="text-3xl font-extrabold text-brand-500 dark:text-brand-400">{{ categories.length - 1 }}</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ t('projects.categories.all') }}</p>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- Filters -->
-    <div class="flex flex-col sm:flex-row gap-4 items-center mb-8">
-      <UInput
-        v-model="searchQuery"
-        icon="i-lucide-search"
-        :placeholder="t('common.search') + '...'"
-        class="w-full sm:w-80"
-      />
+    <!-- Filters & Grid -->
+    <section class="py-12 px-4">
+      <div class="max-w-7xl mx-auto">
+        <!-- Filter bar -->
+        <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center mb-10 p-4 rounded-2xl bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
+          <UInput
+            v-model="searchQuery"
+            icon="i-lucide-search"
+            :placeholder="t('common.search') + '...'"
+            class="w-full sm:w-72"
+            size="md"
+          />
 
-      <div class="flex flex-wrap gap-2">
-        <UButton
-          v-for="category in categories"
-          :key="category"
-          :variant="selectedCategory === category ? 'solid' : 'soft'"
-          size="sm"
-          @click="selectedCategory = category"
-        >
-          {{ category === 'all' ? t('projects.categories.all') : t(`projects.categories.${category.replace(/\s+/g, '').toLowerCase()}`) || category }}
-        </UButton>
+          <div class="flex flex-wrap gap-2">
+            <UButton
+              v-for="category in categories"
+              :key="category"
+              :variant="selectedCategory === category ? 'solid' : 'soft'"
+              :color="selectedCategory === category ? 'primary' : 'neutral'"
+              size="sm"
+              class="font-medium"
+              @click="selectedCategory = category"
+            >
+              {{ category === 'all' ? t('projects.categories.all') : t(`projects.categories.${category.replace(/\s+/g, '').toLowerCase()}`) || category }}
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Projects Grid -->
+        <div v-if="filteredProjects.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+          <ProjectCard v-for="project in filteredProjects" :key="project.id" :project="project" />
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="text-center py-24">
+          <div class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
+            <UIcon name="i-lucide-search-x" class="text-2xl text-gray-400" />
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ t('projects.noResults.title') }}</h3>
+          <p class="text-gray-500 dark:text-gray-400 mb-8 max-w-md mx-auto">{{ t('projects.noResults.description') }}</p>
+          <UButton @click="resetFilters" variant="soft" size="md">
+            {{ t('common.reset') }}
+          </UButton>
+        </div>
       </div>
-    </div>
-
-    <!-- Projects Grid -->
-    <div v-if="filteredProjects.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <ProjectCard v-for="project in filteredProjects" :key="project.id" :project="project" />
-    </div>
-
-    <!-- Empty State -->
-    <div v-else class="text-center py-16">
-      <UIcon name="i-lucide-search-x" class="text-4xl text-muted mb-4" />
-      <h3 class="text-lg font-semibold mb-2">{{ t('projects.noResults.title') }}</h3>
-      <p class="text-muted mb-6">{{ t('projects.noResults.description') }}</p>
-      <UButton @click="resetFilters" variant="soft">
-        {{ t('common.reset') }}
-      </UButton>
-    </div>
+    </section>
   </div>
 </template>