diff --git a/venue-reservation/src/app/signup-landing/page.tsx b/venue-reservation/src/app/signup-landing/page.tsx
index 5b4f13b..739a102 100644
--- a/venue-reservation/src/app/signup-landing/page.tsx
+++ b/venue-reservation/src/app/signup-landing/page.tsx
@@ -1,25 +1,15 @@
 import React from "react";
 import Card from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-
+import BrandingSection from "@/components/branding-section";
 const SignupLanding = () => {
   return (
     <div className="flex flex-col min-h-screen bg-gray-100 items-center justify-center">
       <div className="flex flex-col lg:flex-row w-full max-w-5xl items-center lg:items-stretch justify-between p-6 lg:p-12 space-y-6 lg:space-y-0 lg:space-x-12">
         
         {/* Left Branding Section  */}
-        <div className="bg-gradient-to-b from-[#312405] via-[#735203] via-[#78580E] to-[#906B11] text-white p-10 md:p-14 lg:p-20 rounded-3xl shadow-lg w-5/6 max-w-xs lg:max-w-md h-[600px] flex flex-col justify-between">
-        <div>
-          <h1 className="text-4xl font-bold">RS.</h1>                                                                                     
-          <h2 className="text-lg font-semibold mt-4">Reservation System</h2>
-        </div>
-        <div>
-          <p className="mt-8 text-base leading-relaxed">
-            “Effortlessly book and manage your event with our seamless reservation system, designed for convenience and flexibility.”
-          </p>
-        </div>
-      </div>
-
+        <BrandingSection />
+        
         {/* Right Sign-Up Section */}
         <div className="flex flex-1 items-center justify-center">
           <Card>
diff --git a/venue-reservation/src/components/branding-section.tsx b/venue-reservation/src/components/branding-section.tsx
new file mode 100644
index 0000000..21d5ec5
--- /dev/null
+++ b/venue-reservation/src/components/branding-section.tsx
@@ -0,0 +1,29 @@
+// src/components/branding-section.tsx
+
+import React from "react";
+
+interface BrandingSectionProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+}
+
+const BrandingSection: React.FC<BrandingSectionProps> = ({
+  title = "RS.",
+  subtitle = "Reservation System",
+  description = "Effortlessly book and manage your event with our seamless reservation system, designed for convenience and flexibility.",
+}) => {
+  return (
+    <div className="bg-gradient-to-b from-[#312405] via-[#735203] via-[#78580E] to-[#906B11] text-white p-10 md:p-14 lg:p-20 rounded-3xl shadow-lg w-5/6 max-w-xs lg:max-w-md h-[600px] flex flex-col justify-between">
+      <div>
+        <h1 className="text-4xl font-bold">{title}</h1>
+        <h2 className="text-lg font-semibold mt-4">{subtitle}</h2>
+      </div>
+      <div>
+        <p className="mt-8 text-base leading-relaxed">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default BrandingSection;