diff --git a/resources/views/livewire/pages/about.blade.php b/resources/views/livewire/pages/about.blade.php
index 5f482eb..88ac5d2 100644
--- a/resources/views/livewire/pages/about.blade.php
+++ b/resources/views/livewire/pages/about.blade.php
@@ -10,20 +10,20 @@ new #[Layout('components.layouts.public')] class extends Component
 
 <div>
     {{-- Hero Section --}}
-    <section class="bg-[#2D3624] py-10 sm:py-[60px] lg:py-20 -mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8">
+    <section class="bg-background py-10 sm:py-[60px] lg:py-20 -mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8">
         <div class="container mx-auto px-4 text-center">
             {{-- Page Title --}}
-            <h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[3rem] font-bold text-white mb-4">
+            <h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[3rem] font-bold text-text mb-4">
                 {{ __('about.title') }}
             </h1>
 
             {{-- Tagline --}}
-            <p class="text-xl sm:text-2xl text-white/80 max-w-[800px] mx-auto mb-6">
+            <p class="text-xl sm:text-2xl text-text/80 max-w-[800px] mx-auto mb-6">
                 {{ __('about.tagline') }}
             </p>
 
             {{-- Identity Statement --}}
-            <p class="text-lg text-white/70 max-w-[700px] mx-auto">
+            <p class="text-lg text-text/70 max-w-[700px] mx-auto">
                 {{ __('about.identity') }}
             </p>
         </div>
@@ -287,28 +287,28 @@ new #[Layout('components.layouts.public')] class extends Component
     </section>
 
     {{-- Scholarship Aspiration Section --}}
-    <section class="bg-[#2D3624] py-8 sm:py-12 lg:py-[60px] relative overflow-hidden">
+    <section class="bg-background py-8 sm:py-12 lg:py-[60px] relative overflow-hidden">
         {{-- Decorative accent - subtle gold border frame --}}
         <div class="absolute inset-4 sm:inset-8 lg:inset-12 border border-accent/20 rounded-lg pointer-events-none"></div>
 
         <div class="container mx-auto px-4 relative">
-            <h2 class="text-2xl lg:text-3xl font-bold text-white text-center mb-2">
+            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
                 {{ __('about.scholarship_title') }}
             </h2>
             <div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
 
             <div class="max-w-[900px] mx-auto text-center mb-12">
-                <p class="text-white/90 text-lg mb-4">
+                <p class="text-text/90 text-lg mb-4">
                     {{ __('about.scholarship_text_1') }}
                 </p>
-                <p class="text-white/80">
+                <p class="text-text/80">
                     {{ __('about.scholarship_text_2') }}
                 </p>
             </div>
 
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
                 @foreach(__('about.scholarship_aspirations') as $index => $aspiration)
-                    <div class="flex items-center gap-3 text-white/90 {{ $index > 0 ? 'sm:border-s sm:border-white/10 sm:ps-6 lg:ps-6' : '' }}">
+                    <div class="flex items-center gap-3 text-text/90 {{ $index > 0 ? 'sm:border-s sm:border-text/10 sm:ps-6 lg:ps-6' : '' }}">
                         <flux:icon name="check-circle" class="w-6 h-6 text-accent flex-shrink-0" />
                         <span>{{ $aspiration }}</span>
                     </div>