diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index a6f21eb..acded5f 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -6,28 +6,28 @@
                 Back to Home
             </a>
         </div>
-        <x-card class="sm:w-96 w-full">
+        <x-ui.card class="sm:w-96 w-full">
             <div class="flex flex-col items-center space-y-5">
                 <x-logo class="w-fit"/>
                 <h1 class="font-bold text-2xl">Welcome Back</h1>
                 <p class=" text-accent-600 text-sm">Sign in to your {{config('app.name')}} account</p>
             </div>
             <form action="" class="flex flex-col space-y-5">
-                <x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
-                <x-input label="Password" name="password" type="password"/>
+                <x-ui.input label="Email" name="email" type="email" placeholder="you@example.com"/>
+                <x-ui.input label="Password" name="password" type="password"/>
                 <div class="flex flex-col md:flex-row md:justify-between space-y-4">
                     <div class="flex items-center space-x-2">
-                        <input type="checkbox" name="remember_me">
+                        <ui.input type="checkbox" name="remember_me" />
                         <label class="text-sm font-bold text-accent-600">Remember me</label>
                     </div>
                     <a class="text-blue-500 font-bold text-sm" href="">Forgot password?</a>
                 </div>
-                <x-button variant="neutral">Sign In</x-button>
+                <x-ui.button variant="neutral">Sign In</x-ui.button>
             </form>
 
             <p class="text-center text-accent-600 text-xs">Don't have an account?
                 <a href="{{route('register.create')}}" class="text-blue-500 font-bold">Sign Up</a>
             </p>
-        </x-card>
+        </x-ui.card>
     </section>
 </x-layout>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 85bc739..2112309 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -12,7 +12,7 @@ class="bg-linear-135 flex-1 overflow-y-scroll wrapper py-12 from-[#EFF6FF] to-[#
                     Back to Home
                 </a>
             </div>
-            <x-card class="sm:w-96 w-full ">
+            <x-ui.card class="sm:w-96 w-full ">
                 <div class="flex flex-col items-center space-y-5">
                     <x-logo class="w-fit"/>
                     <h1 class="font-bold text-2xl">Create Account</h1>
@@ -21,19 +21,19 @@ class="bg-linear-135 flex-1 overflow-y-scroll wrapper py-12 from-[#EFF6FF] to-[#
                 </div>
                 <form action="{{route('register.store')}}" method="post" class="flex flex-col space-y-5">
                     @csrf
-                    <x-input label="Full Name" name="name" placeholder="Jhon Doe"/>
-                    <x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
-                    <x-select name="role" :options="$options" value-key="value" label-key="label" label="Account Type"/>
-                    <x-input label="Password" name="password" type="password"/>
-                    <x-input label="Confirm Password" name="password_confirmation" type="password"/>
+                    <x-ui.input label="Full Name" name="name" placeholder="Jhon Doe"/>
+                    <x-ui.input label="Email" name="email" type="email" placeholder="you@example.com"/>
+                    <x-ui.select name="role" :options="$options" value-key="value" label-key="label" label="Account Type"/>
+                    <x-ui.input label="Password" name="password" type="password"/>
+                    <x-ui.input label="Confirm Password" name="password_confirmation" type="password"/>
 
-                    <x-button variant="neutral">Create Account</x-button>
+                    <x-ui.button variant="neutral">Create Account</x-ui.button>
                 </form>
 
                 <p class="text-center text-accent-600 text-xs">Already have an account?
                     <a href="{{route('login')}}" class="text-blue-500 font-bold">Sign In</a>
                 </p>
-            </x-card>
+            </x-ui.card>
 
         </div>
     </section>
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index f00d28d..5df8f54 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -8,21 +8,21 @@
                 Discover verified deals and recommendations that you can count on.
             </p>
             <div class="flex space-x-5">
-                <x-footer-icon>
+                <x-ui.footer-icon>
                     <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="m1416.013 791.915-30.91 225.617h-371.252v789.66H788.234v-789.66H449.808V791.915h338.426V585.137c0-286.871 176.207-472.329 449.09-472.329 116.87 0 189.744 6.205 231.822 11.845l-3.272 213.66-173.5.338c-4.737-.451-117.771-9.25-199.332 65.655-52.568 48.169-79.191 117.433-79.191 205.65v181.96h402.162Zm-247.276-304.018c44.446-41.401 113.71-36.889 118.787-36.663l289.467-.113 6.204-417.504-43.544-10.717C1511.675 16.02 1426.053 0 1237.324 0 901.268 0 675.425 235.206 675.425 585.137v93.97H337v451.234h338.425V1920h451.234v-789.66h356.7l61.932-451.233H1126.66v-69.152c0-54.937 14.214-96 42.078-122.058Z"
                             fill-rule="evenodd"/>
                     </svg>
-                </x-footer-icon>
+                </x-ui.footer-icon>
 
-                <x-footer-icon>
+                <x-ui.footer-icon>
                     <svg viewBox="0 0 31.812 26">
                         <path
                             d="M20.877,2.000 C22.519,2.000 24.382,2.652 25.426,3.738 C26.724,3.486 27.949,3.025 29.050,2.386 C28.625,3.687 27.718,4.779 26.540,5.469 C27.693,5.332 28.797,5.035 29.820,4.590 C29.054,5.707 28.087,6.690 26.971,7.477 C26.981,7.715 26.987,7.955 26.987,8.195 C26.987,15.562 21.445,24.000 10.939,24.000 C7.715,24.000 4.507,23.133 1.982,21.551 C2.428,21.605 2.883,21.631 3.343,21.631 C6.019,21.631 8.482,20.740 10.439,19.242 C7.937,19.199 5.827,17.586 5.103,15.373 C5.450,15.437 5.810,15.473 6.178,15.473 C6.696,15.473 7.203,15.406 7.681,15.277 C5.068,14.768 3.100,12.514 3.100,9.813 C3.100,9.787 3.100,9.764 3.100,9.740 C3.871,10.158 4.750,10.410 5.687,10.440 C4.154,9.437 3.147,7.734 3.147,5.799 C3.147,4.777 3.428,3.818 3.919,2.998 C6.735,6.367 10.945,8.588 15.693,8.822 C15.594,8.414 15.543,7.984 15.543,7.553 C15.543,4.473 17.721,2.000 20.877,2.000 M29.820,4.590 L29.825,4.590 M20.877,-0.000 C17.033,-0.000 14.060,2.753 13.614,6.552 C10.425,5.905 7.524,4.204 5.440,1.711 C5.061,1.257 4.503,0.998 3.919,0.998 C3.867,0.998 3.815,1.000 3.763,1.004 C3.123,1.055 2.547,1.413 2.216,1.966 C1.525,3.122 1.159,4.447 1.159,5.799 C1.159,6.700 1.321,7.579 1.625,8.400 C1.300,8.762 1.113,9.238 1.113,9.740 L1.113,9.813 C1.113,11.772 1.882,13.589 3.160,14.952 C3.087,15.294 3.103,15.655 3.215,15.998 C3.657,17.348 4.459,18.510 5.499,19.396 C4.800,19.552 4.079,19.631 3.343,19.631 C2.954,19.631 2.577,19.609 2.222,19.565 C2.141,19.556 2.061,19.551 1.981,19.551 C1.148,19.551 0.391,20.078 0.108,20.886 C-0.202,21.770 0.140,22.753 0.932,23.249 C3.764,25.023 7.318,26.000 10.939,26.000 C17.778,26.000 22.025,22.843 24.383,20.195 C27.243,16.984 28.907,12.718 28.972,8.455 C29.899,7.682 30.717,6.790 31.410,5.792 C31.661,5.458 31.810,5.041 31.810,4.590 C31.810,3.909 31.473,3.308 30.958,2.946 C31.181,2.176 30.925,1.342 30.303,0.833 C29.940,0.537 29.496,0.386 29.049,0.386 C28.708,0.386 28.365,0.474 28.056,0.654 C27.391,1.040 26.680,1.344 25.931,1.562 C24.555,0.592 22.688,-0.000 20.877,-0.000 L20.877,-0.000 Z"/>
                     </svg>
-                </x-footer-icon>
-                <x-footer-icon>
+                </x-ui.footer-icon>
+                <x-ui.footer-icon>
                     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd"
                               d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
@@ -34,14 +34,14 @@ class="fill-[#BDC1D2]"/>
                               d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z"
                               class="fill-[#BDC1D2]"/>
                     </svg>
-                </x-footer-icon>
-                <x-footer-icon>
+                </x-ui.footer-icon>
+                <x-ui.footer-icon>
                     <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="M1168 601.321v74.955c72.312-44.925 155.796-71.11 282.643-71.11 412.852 0 465.705 308.588 465.705 577.417v733.213L1438.991 1920v-701.261c0-117.718-42.162-140.06-120.12-140.06-74.114 0-120.12 23.423-120.12 140.06V1920l-483.604-4.204V601.32H1168Zm-687.52-.792v1318.918H0V600.53h480.48Zm-120.12 120.12H120.12v1078.678h240.24V720.65Zm687.52.792H835.267v1075.316l243.364 2.162v-580.18c0-226.427 150.51-260.18 240.24-260.18 109.55 0 240.24 45.165 240.24 260.18v580.18l237.117-2.162v-614.174c0-333.334-93.573-457.298-345.585-457.298-151.472 0-217.057 44.925-281.322 98.98l-16.696 14.173H1047.88V721.441ZM240.24 0c132.493 0 240.24 107.748 240.24 240.24 0 132.493-107.747 240.24-240.24 240.24C107.748 480.48 0 372.733 0 240.24 0 107.748 107.748 0 240.24 0Zm0 120.12c-66.186 0-120.12 53.934-120.12 120.12s53.934 120.12 120.12 120.12 120.12-53.934 120.12-120.12-53.934-120.12-120.12-120.12Z"
                             fill-rule="evenodd"/>
                     </svg>
-                </x-footer-icon>
+                </x-ui.footer-icon>
             </div>
         </article>
 
diff --git a/resources/views/components/get-in-touch.blade.php b/resources/views/components/get-in-touch.blade.php
index 89459df..1d19df6 100644
--- a/resources/views/components/get-in-touch.blade.php
+++ b/resources/views/components/get-in-touch.blade.php
@@ -7,15 +7,15 @@
 
     <section class="grid grid-cols-1 md:grid-cols-2 gap-8">
         <!-- left section, contact form -->
-        <x-card class="bg-[#F9FAFB]! shadow-none!">
+        <x-ui.card class="bg-[#F9FAFB]! shadow-none!">
             <form action="" class=" flex flex-col space-y-6">
 
-                <x-input label="Name" name="name" placeholder="Your name"/>
-                <x-input label="Email" name="email" placeholder="your.email@example.com" type="email"/>
-                <x-textarea label="Message" name="message" placeholder="Tell us how we can help..."/>
-                <x-button type="submit" variant="neutral">Send Message</x-button>
+                <x-ui.input label="Name" name="name" placeholder="Your name"/>
+                <x-ui.input label="Email" name="email" placeholder="your.email@example.com" type="email"/>
+                <x-ui.textarea label="Message" name="message" placeholder="Tell us how we can help..."/>
+                <x-ui.button type="submit" variant="neutral">Send Message</x-ui.button>
             </form>
-        </x-card>
+        </x-ui.card>
 
         <!-- right section, contact details-->
         <div class="mt-2 flex flex-col space-y-6">
diff --git a/resources/views/components/how-it-works.blade.php b/resources/views/components/how-it-works.blade.php
index 6f59a11..95818e3 100644
--- a/resources/views/components/how-it-works.blade.php
+++ b/resources/views/components/how-it-works.blade.php
@@ -7,8 +7,8 @@
 
     <section class="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-12">
 
-        <x-card class="relative">
-            <x-card-number text="01" />
+        <x-ui.card class="relative">
+            <x-ui.card-number text="01" />
             <div class="p-4 rounded-lg w-fit bg-linear-135 from-[#DEEAFE] to-[#EEEAFF] text-blue-700">
                 <x-heroicon-o-user-plus class="w-8"/>
             </div>
@@ -17,10 +17,10 @@
 
             <p class="text-accent-600 text-md">Verified brokers share exclusive deals, services and recommendations on
                 the platform.</p>
-        </x-card>
+        </x-ui.card>
 
-        <x-card class="relative">
-            <x-card-number text="02" />
+        <x-ui.card class="relative">
+            <x-ui.card-number text="02" />
             <div class="p-4 rounded-lg w-fit bg-linear-135 from-[#DEEAFE] to-[#EEEAFF] text-blue-700">
                 <x-heroicon-o-eye class="w-8"/>
             </div>
@@ -29,10 +29,10 @@
 
             <p class="text-accent-600 text-md">Browse, search, like and save deals. Click through to learn more and
                 contact brokers directly.</p>
-        </x-card>
+        </x-ui.card>
 
-        <x-card class="relative">
-            <x-card-number text="03" />
+        <x-ui.card class="relative">
+            <x-ui.card-number text="03" />
             <div class="p-4 rounded-lg w-fit bg-linear-135 from-[#DEEAFE] to-[#EEEAFF] text-blue-700">
                 <x-heroicon-o-arrow-trending-up class="w-8"/>
             </div>
@@ -41,6 +41,6 @@
 
             <p class="text-accent-600 text-md">The most engaging deals automatically rise to the top, helping you
                 discover the best opportunities.</p>
-        </x-card>
+        </x-ui.card>
     </section>
 </section>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 9a59b13..ea002b9 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -14,15 +14,15 @@
         </ul>
     </div>
 
-    <div class="nav-buttons space-x-4 font-medium hidden md:block ">
+    <div class="nav-ui.buttons space-x-4 font-medium hidden md:block ">
         <a href="{{route('login')}}">Login</a>
         <a href="{{route('register.create')}}" class="ui-btn ui-btn-neutral">Register</a>
     </div>
 
     <!-- mobile menu btn-->
-    <x-button class="md:hidden" id="openBtn">
+    <x-ui.button class="md:hidden" id="openBtn">
         <x-heroicon-o-bars-3 class="w-8"/>
-    </x-button>
+    </x-ui.button>
 
 </nav>
 
@@ -30,9 +30,9 @@
 <div id='mobileMenu' class="hidden absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10">
     <div class="flex justify-between mb-8">
         <x-logo/>
-        <x-button id="closeBtn">
+        <x-ui.button id="closeBtn">
             <x-heroicon-o-x-mark class="w-8 ml-auto"/>
-        </x-button>
+        </x-ui.button>
     </div>
     <div class="nav-links mb-10">
         <ul class="flex flex-col space-y-8 text-accent-600">
diff --git a/resources/views/components/button-sm.blade.php b/resources/views/components/ui/button-sm.blade.php
similarity index 100%
rename from resources/views/components/button-sm.blade.php
rename to resources/views/components/ui/button-sm.blade.php
diff --git a/resources/views/components/button.blade.php b/resources/views/components/ui/button.blade.php
similarity index 100%
rename from resources/views/components/button.blade.php
rename to resources/views/components/ui/button.blade.php
diff --git a/resources/views/components/card-number.blade.php b/resources/views/components/ui/card-number.blade.php
similarity index 100%
rename from resources/views/components/card-number.blade.php
rename to resources/views/components/ui/card-number.blade.php
diff --git a/resources/views/components/card.blade.php b/resources/views/components/ui/card.blade.php
similarity index 100%
rename from resources/views/components/card.blade.php
rename to resources/views/components/ui/card.blade.php
diff --git a/resources/views/components/footer-icon.blade.php b/resources/views/components/ui/footer-icon.blade.php
similarity index 100%
rename from resources/views/components/footer-icon.blade.php
rename to resources/views/components/ui/footer-icon.blade.php
diff --git a/resources/views/components/inline-error.blade.php b/resources/views/components/ui/inline-error.blade.php
similarity index 100%
rename from resources/views/components/inline-error.blade.php
rename to resources/views/components/ui/inline-error.blade.php
diff --git a/resources/views/components/input.blade.php b/resources/views/components/ui/input.blade.php
similarity index 90%
rename from resources/views/components/input.blade.php
rename to resources/views/components/ui/input.blade.php
index 6cc9363..22e8e29 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/ui/input.blade.php
@@ -6,5 +6,5 @@
     @endif
     <input class="bg-[#F3F3F5] py-2 px-4 rounded-lg" type="{{$type}}" placeholder="{{$placeholder}}"
            name="{{$name}}">
-    <x-inline-error :name="$name" />
+    <x-ui.inline-error :name="$name" />
     </div>
diff --git a/resources/views/components/select.blade.php b/resources/views/components/ui/select.blade.php
similarity index 93%
rename from resources/views/components/select.blade.php
rename to resources/views/components/ui/select.blade.php
index e9b37eb..7dae67f 100644
--- a/resources/views/components/select.blade.php
+++ b/resources/views/components/ui/select.blade.php
@@ -10,4 +10,4 @@
         <option  value="{{$option[$valueKey]}}"> {{$option[$labelKey]}} </option>
     @endforeach
 </select>
-<x-inline-error :name="$name" />
+<x-ui.inline-error :name="$name" />
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/ui/textarea.blade.php
similarity index 100%
rename from resources/views/components/textarea.blade.php
rename to resources/views/components/ui/textarea.blade.php
diff --git a/resources/views/components/why-dealhub.blade.php b/resources/views/components/why-dealhub.blade.php
index 323504b..c578cf2 100644
--- a/resources/views/components/why-dealhub.blade.php
+++ b/resources/views/components/why-dealhub.blade.php
@@ -6,29 +6,29 @@
     </p>
 
     <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <x-card>
+        <x-ui.card>
             <div class="p-4 rounded-lg bg-blue-100 text-blue-700 w-fit">
                 <x-heroicon-o-shield-check class="w-8"/>
             </div>
             <h3 class="font-bold">Verified Brokers</h3>
             <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals.</p>
-        </x-card>
+        </x-ui.card>
 
-        <x-card>
+        <x-ui.card>
             <div class="p-4 rounded-lg bg-[#F0EBFF] text-[#9470F9] w-fit">
                 <x-heroicon-o-arrow-trending-up class="w-8"/>
             </div>
             <h3 class="font-bold">Trending Recommendations</h3>
             <p class="text-accent-600 text-md">Discover what's hot and trending based on real user interactions and feedback.</p>
-        </x-card>
+        </x-ui.card>
 
-        <x-card>
+        <x-ui.card>
             <div class="p-4 rounded-lg bg-[#F9EBF3] text-[#DB5A84] w-fit">
                 <x-heroicon-o-magnifying-glass class="w-8"/>
             </div>
             <h3 class="font-bold">Smart discovery</h3>
             <p class="text-accent-600 text-md">Find exactly what you need with our intelligent search and category filtering.</p>
-        </x-card>
+        </x-ui.card>
 
     </section>
 </section>