diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
index 226be67..1e09a5d 100644
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { Tag } from "@/components/ui/Tag";
-import { ScrollReveal } from "@/components/ui/ScrollReveal";
-import { ImageOrVideo } from "@/components/ui/ImageOrVideo";
-import { Button } from "@/components/ui/Button";
+import Tag from "@/components/ui/Tag";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Button from "@/components/ui/Button";
 
 export default function AboutSection() {
   return (
-    <section data-webild-section="about" id="about" className="py-24 bg-background">
+    <section data-webild-section="about" id="about" className="bg-background">
       <div className="max-w-content-width mx-auto px-6">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-2 items-center">
           <ScrollReveal variant="slide-up">
             <div className="space-y-8">
               <Tag text="About Us" />
@@ -26,7 +26,7 @@ export default function AboutSection() {
           </ScrollReveal>
           
           <ScrollReveal variant="fade">
-            <div className="relative h-[600px] rounded-3xl overflow-hidden">
+            <div className="relative h-[600px] 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"