diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
index 86eb87e..1249f6b 100644
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -8,53 +8,53 @@ import { Check } from "lucide-react";
 export default function AboutSection() {
   return (
     <section data-webild-section="about" id="about" className="bg-background py-24">
-  <div className="max-w-content-width mx-auto px-6">
-    <ScrollReveal variant="slide-up">
-      <div className="text-center max-w-3xl mx-auto mb-16 space-y-6">
-        <Tag text="About Us" />
-        <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
-          A Legacy of Unparalleled Hospitality
-        </h2>
-        <p className="text-lg text-muted-foreground leading-relaxed">
-          Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
-        </p>
-      </div>
-    </ScrollReveal>
+      <div className="max-w-content-width mx-auto px-6">
+        <ScrollReveal variant="slide-up">
+          <div className="bg-card border border-border rounded-theme p-8 md:p-12 mb-16 space-y-6 max-w-4xl mx-auto text-left">
+            <Tag text="About Us" />
+            <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
+              A Legacy of Unparalleled Hospitality
+            </h2>
+            <p className="text-lg text-muted-foreground leading-relaxed">
+              Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
+            </p>
+          </div>
+        </ScrollReveal>
 
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-      <ScrollReveal variant="slide-up">
-        <div className="space-y-8">
-          <ul className="space-y-4">
-            {[
-              "Award-winning fine dining restaurants",
-              "World-class spa and wellness center",
-              "24/7 personalized concierge service",
-              "Breathtaking panoramic city views",
-              "State-of-the-art fitness facilities"
-            ].map((item, index) => (
-              <li key={index} className="flex items-center gap-3">
-                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
-                  <Check className="w-4 h-4 text-primary" />
-                </div>
-                <span className="text-foreground">{item}</span>
-              </li>
-            ))}
-          </ul>
-          <Button text="Discover Our Story" variant="primary" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
+          <ScrollReveal variant="slide-up">
+            <div className="space-y-8">
+              <ul className="space-y-4">
+                {[
+                  "Award-winning fine dining restaurants",
+                  "World-class spa and wellness center",
+                  "24/7 personalized concierge service",
+                  "Breathtaking panoramic city views",
+                  "State-of-the-art fitness facilities"
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-3">
+                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Check className="w-4 h-4 text-primary" />
+                    </div>
+                    <span className="text-foreground">{item}</span>
+                  </li>
+                ))}
+              </ul>
+              <Button text="Discover Our Story" variant="primary" />
+            </div>
+          </ScrollReveal>
+          
+          <ScrollReveal variant="fade">
+            <div className="relative h-[500px] rounded-theme overflow-hidden">
+              <ImageOrVideo 
+                imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-black/10"></div>
+            </div>
+          </ScrollReveal>
         </div>
-      </ScrollReveal>
-      
-      <ScrollReveal variant="fade">
-        <div className="relative h-[500px] rounded-theme overflow-hidden">
-          <ImageOrVideo 
-            imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 bg-black/10"></div>
-        </div>
-      </ScrollReveal>
-    </div>
-  </div>
-</section>
+      </div>
+    </section>
   );
 }
\ No newline at end of file