diff --git a/app/Livewire/Add-Buttons b/app/Livewire/Add-Buttons
new file mode 100644
index 0000000..e69de29
diff --git a/app/Livewire/Buttons/CreateBranch.php b/app/Livewire/Buttons/CreateBranch.php
new file mode 100644
index 0000000..480791c
--- /dev/null
+++ b/app/Livewire/Buttons/CreateBranch.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+
+class CreateBranch extends Component
+{
+    public function submit()
+    {
+        return redirect()->to('/main/station-locator/branch');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/station-locator/branch');
+    }
+    public function render()
+    {
+        return view('livewire.buttons.create-branch');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateCardType.php b/app/Livewire/Buttons/CreateCardType.php
new file mode 100644
index 0000000..cb36141
--- /dev/null
+++ b/app/Livewire/Buttons/CreateCardType.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+use Livewire\WithFileUploads;
+
+class CreateCardType extends Component
+{
+    use WithFileUploads;
+
+    public $typeImage;
+    public $coverImage;
+    
+    public function submit()
+    {
+        return redirect()->to('/main/about-us/card-type');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/about-us/card-type');
+    }
+    public function render()
+    {
+        return view('livewire.buttons.create-card-type');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateFuel.php b/app/Livewire/Buttons/CreateFuel.php
new file mode 100644
index 0000000..c7c8da1
--- /dev/null
+++ b/app/Livewire/Buttons/CreateFuel.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+
+class CreateFuel extends Component
+{
+    public function submit()
+    {
+        return redirect()->to('/main/station-locator/fuel');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/station-locator/fuel');
+    }
+    public function render()
+    {
+        return view('livewire..buttons.create-fuel');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateNotification.php b/app/Livewire/Buttons/CreateNotification.php
new file mode 100644
index 0000000..80ded15
--- /dev/null
+++ b/app/Livewire/Buttons/CreateNotification.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+
+class CreateNotification extends Component
+{
+    public function submit()
+    {
+        return redirect()->to('/main/notification');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/notification');
+     }
+
+    public function render()
+    {
+        return view('livewire.buttons.create-notification');
+    }
+}
diff --git a/app/Livewire/Buttons/CreatePhotoSlider.php b/app/Livewire/Buttons/CreatePhotoSlider.php
new file mode 100644
index 0000000..06cda62
--- /dev/null
+++ b/app/Livewire/Buttons/CreatePhotoSlider.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\WithFileUploads;
+use Livewire\Component;
+
+class CreatePhotoSlider extends Component
+{
+    use WithFileUploads;
+
+    public $image;
+
+    public function submit()
+    {
+        return redirect()->to('/main/home-page-mobile/photo-slider');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/home-page-mobile/photo-slider');
+     }
+
+    public function render()
+    {
+        return view('livewire..buttons.create-photo-slider');
+    }
+}
diff --git a/app/Livewire/Buttons/CreatePromotion.php b/app/Livewire/Buttons/CreatePromotion.php
new file mode 100644
index 0000000..58d86d5
--- /dev/null
+++ b/app/Livewire/Buttons/CreatePromotion.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+use Livewire\WithFileUploads;
+
+class CreatePromotion extends Component
+{
+    use WithFileUploads;
+
+    public $image;
+
+    public function submit()
+    {
+        return redirect()->to('/main/home-promotion/promotion');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/home-promotion/promotion');
+     }
+    public function render()
+    {
+        return view('livewire..buttons.create-promotion');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateStation.php b/app/Livewire/Buttons/CreateStation.php
new file mode 100644
index 0000000..f0b968d
--- /dev/null
+++ b/app/Livewire/Buttons/CreateStation.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\WithFileUploads;
+use Livewire\Component;
+
+class CreateStation extends Component
+{
+    use WithFileUploads;
+    
+    public $csv;
+
+    public function submit()
+    {
+        return redirect()->to('/main/station-locator/station');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/station-locator/station');
+    }
+
+    public function render()
+    {
+        return view('livewire..buttons.create-station');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateTermsAndPrivacy.php b/app/Livewire/Buttons/CreateTermsAndPrivacy.php
new file mode 100644
index 0000000..fece16d
--- /dev/null
+++ b/app/Livewire/Buttons/CreateTermsAndPrivacy.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+
+class CreateTermsAndPrivacy extends Component
+{
+    public function submit()
+    {
+        return redirect()->to('/main/about-us/terms-and-privacy');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/about-us/terms-and-privacy');
+    }
+
+    public function render()
+    {
+        return view('livewire.buttons.create-terms-and-privacy');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateTopUp.php b/app/Livewire/Buttons/CreateTopUp.php
new file mode 100644
index 0000000..2f4e763
--- /dev/null
+++ b/app/Livewire/Buttons/CreateTopUp.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+
+class CreateTopUp extends Component
+{
+    public function submit()
+    {
+        return redirect()->to('/main/top-up/top-up');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/top-up/top-up');
+     }
+    public function render()
+    {
+        return view('livewire..buttons.create-top-up');
+    }
+}
diff --git a/app/Livewire/Buttons/CreateUser.php b/app/Livewire/Buttons/CreateUser.php
new file mode 100644
index 0000000..c748bad
--- /dev/null
+++ b/app/Livewire/Buttons/CreateUser.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Livewire\Buttons;
+
+use Livewire\Component;
+
+class CreateUser extends Component
+{
+    public $username, $first_name, $last_name, $email, $status = 'active', $role = 'admin', $default_password;
+
+    public function generatePassword()
+    {
+        $this->default_password = bin2hex(random_bytes(4));
+    }
+
+    public function submit()
+    {
+        return redirect()->to('/main/user-management');
+    }
+    
+    public function cancel()
+    {
+        return redirect()->to('/main/user-management');
+    }
+
+    public function render()
+    {
+        return view('livewire.buttons.create-user');
+    }
+}
+
+
diff --git a/app/Livewire/Components/Table.php b/app/Livewire/Components/Table.php
index e383995..80c04c1 100644
--- a/app/Livewire/Components/Table.php
+++ b/app/Livewire/Components/Table.php
@@ -9,6 +9,8 @@ class Table extends Component
     public $columns = [];
     public $rows = [];
     public $selected = [];
+    public $addRoute = null;
+    public $hasAddButton = true;
     public $selectAll = false;
     public $hasCheckbox = true;
     public $hasActions = false;
@@ -17,10 +19,12 @@ class Table extends Component
     public $sortField = null;   // Column to sort
     public $sortDirection = 'asc';  // Default sort direction
 
-    public function mount($columns, $rows)
+
+    public function mount($columns, $rows, $addRoute = null)
     {
         $this->columns = $columns;
         $this->rows = $rows;
+        $this->addRoute = $addRoute;
     }
 
     // Update rows based on search
diff --git a/resources/views/livewire/about-us/card-type.blade.php b/resources/views/livewire/about-us/card-type.blade.php
index 821216e..e8ba704 100644
--- a/resources/views/livewire/about-us/card-type.blade.php
+++ b/resources/views/livewire/about-us/card-type.blade.php
@@ -9,5 +9,6 @@
     :rows="$cardTypes" 
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('card-type-create')" 
     />
 </div>
diff --git a/resources/views/livewire/about-us/terms-and-privacy.blade.php b/resources/views/livewire/about-us/terms-and-privacy.blade.php
index 09a120f..a21bc16 100644
--- a/resources/views/livewire/about-us/terms-and-privacy.blade.php
+++ b/resources/views/livewire/about-us/terms-and-privacy.blade.php
@@ -11,5 +11,6 @@
         :rows="$termsAndPrivacy" 
         :hasActions="true"
         :isViewPage="false"
+        :addRoute="route('terms-and-privacy-create')" 
     />
 </div>
diff --git a/resources/views/livewire/buttons/create-branch.blade.php b/resources/views/livewire/buttons/create-branch.blade.php
new file mode 100644
index 0000000..f2e7a92
--- /dev/null
+++ b/resources/views/livewire/buttons/create-branch.blade.php
@@ -0,0 +1,55 @@
+
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/station-locator/branch" class="hover:text-orange-600">
+            Branch
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Branch
+        </span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Branch</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Branch Details</h2>
+
+        <div class="space-y-4">
+            <!-- Branch Code -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Branch Code:</label>
+                <input type="text" wire:model="branch_code" class="flex-1 border rounded px-3 py-2" placeholder="Branch Code">
+            </div>
+
+            <!-- Branch Name -->
+                        <div class="flex items-center gap-2">
+                <label class="w-40">Branch Name:</label>
+                <input type="text" wire:model="branch_name" class="flex-1 border rounded px-3 py-2" placeholder="Branch Name">
+            </div>
+
+            <!-- Details -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Details:</label>
+                <input type="text" wire:model="details" class="flex-1 border rounded px-3 py-2" placeholder="Details">
+            </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
+
diff --git a/resources/views/livewire/buttons/create-card-type.blade.php b/resources/views/livewire/buttons/create-card-type.blade.php
new file mode 100644
index 0000000..f574a2a
--- /dev/null
+++ b/resources/views/livewire/buttons/create-card-type.blade.php
@@ -0,0 +1,135 @@
+
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/about-us/card-type" class="hover:text-orange-600">
+            Card Types
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Card Type
+        </span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Card Types</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Card Type Details</h2>
+
+        <div class="space-y-4">
+            <!-- Card Code -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Card Code:</label>
+                <input type="text" wire:model="card_code" class="flex-1 border rounded px-3 py-2" placeholder="Card Code">
+            </div>
+
+            <!-- Card Type Description -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Card Type Description:</label>
+                <input type="text" wire:model="card_type_description" class="flex-1 border rounded px-3 py-2" placeholder="Card Type Description">
+            </div>
+
+            <!-- Card Type Short Description -->
+                <div class="flex items-center gap-2">
+                <label class="w-40">Card Type Short Description:</label>
+                <input type="text" wire:model="card_type_short_description" class="flex-1 border rounded px-3 py-2" placeholder="Card Type Short Description">
+            </div>
+
+            <!-- Image Card Type -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Upload Card Type Image:</label>
+                <div class="flex-1">
+                    <input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">
+
+                    @error('image') 
+                        <span class="text-red-500 text-sm">{{ $message }}</span> 
+                    @enderror
+
+                    @if ($typeImage)
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
+                            <img src="{{ $typeImage->temporaryUrl() }}" class="h-48 rounded border">
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+            <!-- Virtual Card Font Color -->
+                    <div class="flex items-center gap-4">
+                <label class="w-40">Virtual Card Font Color:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> White
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> Black
+                </label>
+            </div>
+
+            <!-- Image Card Type -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Upload Card Type Image:</label>
+                <div class="flex-1">
+                    <input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">
+
+                    @error('image') 
+                        <span class="text-red-500 text-sm">{{ $message }}</span> 
+                    @enderror
+
+                    @if ($coverImage)
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
+                            <img src="{{ $coverImage->temporaryUrl() }}" class="h-48 rounded border">
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+            <!-- ID Number Required -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">ID Number Required:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> Yes
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> No
+                </label>
+            </div>
+
+             <!-- ID Number Description -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">ID Number Description:</label>
+                <input type="text" wire:model="card_type_description" disabled class="flex-1 border rounded px-3 py-2" placeholder="ID Number Descriptionn">
+            </div>
+
+            <h2 class="text-lg font-semibold mb-4">Data Privacy</h2>
+
+            <!-- Terms & Condition -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Terms & Condition:</label>
+                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Terms & Condition"></textarea>
+            </div>
+
+            <!-- FAQs -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">FAQs:</label>
+                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="FAQs"></textarea>
+            </div>
+
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/buttons/create-fuel.blade.php b/resources/views/livewire/buttons/create-fuel.blade.php
new file mode 100644
index 0000000..5494462
--- /dev/null
+++ b/resources/views/livewire/buttons/create-fuel.blade.php
@@ -0,0 +1,43 @@
+
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/station-locator/branch" class="hover:text-orange-600">
+            Fuel
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Fuel
+        </span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Fuel</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Fuel Details</h2>
+
+        <div class="space-y-4">
+            <!-- Fuel Name -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Fuel Name:</label>
+                <input type="text" wire:model="fuel_name" class="flex-1 border rounded px-3 py-2" placeholder="Fuel Name">
+            </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
+
diff --git a/resources/views/livewire/buttons/create-notification.blade.php b/resources/views/livewire/buttons/create-notification.blade.php
new file mode 100644
index 0000000..bf42d9c
--- /dev/null
+++ b/resources/views/livewire/buttons/create-notification.blade.php
@@ -0,0 +1,60 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center w-fit text-xs hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/notification" class="hover:text-orange-600">
+            Notifications
+        </a>
+
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Notification
+        </span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Notification</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Notification Details</h2>
+
+        <div class="space-y-4">
+            <!-- Subject -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Subject:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Subject">
+            </div>
+
+            <!-- Content -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Content:</label>
+                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Enter your content here..."></textarea>
+            </div>
+
+
+            <!-- Status -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">Schedule:</label>
+                <label>
+                    <input type="radio" wire:model="schecule" name="schedule" value="active" class="mr-1"> Yes
+                </label>
+                <label>
+                    <input type="radio" wire:model="schedule" name="schedule" value="inactive" class="mr-1"> No
+                </label>
+            </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/buttons/create-photo-slider.blade.php b/resources/views/livewire/buttons/create-photo-slider.blade.php
new file mode 100644
index 0000000..e32ff5b
--- /dev/null
+++ b/resources/views/livewire/buttons/create-photo-slider.blade.php
@@ -0,0 +1,93 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/home-page/photo-slider" class="hover:text-orange-600">
+            Photo Sliders
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Photo Slider
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Photo Slider</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Photo Slider Details</h2>
+
+        <div class="space-y-4">
+            <!-- Promotion -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Promotion:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Promotion">
+            </div>
+
+            <!-- Title -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Title:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Title">
+            </div>
+
+            <!-- Description -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Description:</label>
+                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Enter your Description here..."></textarea>
+            </div>
+
+            <!-- Image Upload -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Upload Image:</label>
+                <div class="flex-1">
+                    <input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">
+
+                    @error('image') 
+                        <span class="text-red-500 text-sm">{{ $message }}</span> 
+                    @enderror
+
+                    @if ($image)
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
+                            <img src="{{ $image->temporaryUrl() }}" class="h-48 rounded border">
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+
+            <!-- Start Date -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Start Date:</label>
+                <input type="date" wire:model="start_date" class="flex-1 border rounded px-3 py-2">
+            </div>
+            <!-- End Date -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">End Date:</label>
+                <input type="date" wire:model="end_date" class="flex-1 border rounded px-3 py-2">
+            </div>
+            <!-- Start Time -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Start Time:</label>
+                <input type="time" wire:model="start_time" class="flex-1 border rounded px-3 py-2">
+            </div>
+            <!-- End Time -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">End Time:</label>
+                <input type="time" wire:model="end_time" class="flex-1 border rounded px-3 py-2">
+            </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/buttons/create-promotion.blade.php b/resources/views/livewire/buttons/create-promotion.blade.php
new file mode 100644
index 0000000..1046842
--- /dev/null
+++ b/resources/views/livewire/buttons/create-promotion.blade.php
@@ -0,0 +1,122 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/promotion" class="hover:text-orange-600">
+            Promotions
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Promotion
+        </span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Promotion</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Promotion Details</h2>
+
+        <div class="space-y-4">
+            <!-- Title -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Title:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Title">
+            </div>
+
+            <!-- Description -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Description:</label>
+                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Enter your Description here..."></textarea>
+            </div>
+
+            <!-- Image Upload -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Upload Image:</label>
+                <div class="flex-1">
+                    <input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">
+
+                    @error('image') 
+                        <span class="text-red-500 text-sm">{{ $message }}</span> 
+                    @enderror
+
+                    @if ($image)
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
+                            <img src="{{ $image->temporaryUrl() }}" class="h-48 rounded border">
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+            <!-- Branch -->
+                        <div class="flex items-center gap-2">
+                <label class="w-40">Branch:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Branch">
+            </div>
+
+
+            <!-- Start Date -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Start Date:</label>
+                <input type="date" wire:model="start_date" class="flex-1 border rounded px-3 py-2">
+            </div>
+            <!-- End Date -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">End Date:</label>
+                <input type="date" wire:model="end_date" class="flex-1 border rounded px-3 py-2">
+            </div>
+            <!-- Start Time -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Start Time:</label>
+                <input type="time" wire:model="start_time" class="flex-1 border rounded px-3 py-2">
+            </div>
+            <!-- End Time -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Start Time:</label>
+                <input type="time" wire:model="end_time" class="flex-1 border rounded px-3 py-2">
+            </div>
+
+            <!-- Add in 2 Promos -->
+                        <div class="flex items-center gap-4">
+                <label class="w-40">Add in Top 2 Promos:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> Yes
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> No
+                </label>
+            </div>
+
+            <!-- Promo Type -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Promo Type:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Promo Type">
+            </div>
+
+            <!-- Add in 2 Promos -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">Add in GPS:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> Yes
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> No
+                </label>
+            </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/buttons/create-station.blade.php b/resources/views/livewire/buttons/create-station.blade.php
new file mode 100644
index 0000000..7be2259
--- /dev/null
+++ b/resources/views/livewire/buttons/create-station.blade.php
@@ -0,0 +1,82 @@
+
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/station-locator/branch" class="hover:text-orange-600">
+            Station
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Station
+        </span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Station</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Upload Prices</h2>
+
+        <div class="space-y-4">
+                <!-- Download CSV Template -->
+                <div class="mb-4">
+                    <a href="{{ asset('storage/templates/price-template.csv') }}" 
+                    class="text-orange-500 hover:text-orange-600 underline text-lg"
+                    download>
+                        Download Prices Template
+                    </a>
+                </div>
+        <!-- CSV Upload -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Upload CSV:</label>
+                <div class="flex-1">
+                    <input type="file" wire:model="csv" class="border rounded px-3 py-2" accept="image/*">
+
+                    @error('image') 
+                        <span class="text-red-500 text-sm">{{ $message }}</span> 
+                    @enderror
+
+                    @if ($csv)
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
+                            <img src="{{ $csv->temporaryUrl() }}" class="h-48 rounded border">
+                        </div>
+                    @endif
+                </div>
+            </div>
+
+        <!-- Select Date -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Select Date:</label>
+                <input type="date" wire:model="select_date" class="flex-1 border rounded px-3 py-2">
+            </div>
+
+        <!-- Text -->
+        <div class="p-10 text-sm text-gray-700">
+            <ul class="list-disc pl-10 space-y-1">
+                <li>This is for scheduling update for group or station.</li>
+                <li>Schedule will be applied to uploaded stations.</li>
+            </ul>
+            <span class="italic block mt-4">If you want to schedule update for another group of stations please upload new file.</span>
+        </div>
+
+
+
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Upload New Pricelist</button>
+        </div>
+    </div>
+</div>
+
diff --git a/resources/views/livewire/buttons/create-terms-and-privacy.blade.php b/resources/views/livewire/buttons/create-terms-and-privacy.blade.php
new file mode 100644
index 0000000..eead71b
--- /dev/null
+++ b/resources/views/livewire/buttons/create-terms-and-privacy.blade.php
@@ -0,0 +1,58 @@
+<div>
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/about-us/terms-and-privacy" class="hover:text-orange-600">Terms & Privacy</a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>Create Terms & Privacy</span>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create Terms or Privacy</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Terms or Privacy  Details</h2>
+
+        <div class="space-y-4">
+
+            <!-- Title -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Title:</label>
+                <input type="text" wire:model="title" class="flex-1 border rounded px-3 py-2" placeholder="Title">
+            </div>
+
+            <!-- Details -->
+            <div class="flex items-start gap-2">
+                <label class="w-40 pt-2">Details:</label>
+                <textarea wire:model="detail" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Details"></textarea>
+            </div>
+
+            <!-- Type -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">Type:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> Terms and Condition
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> Privacy Policy
+                </label>
+            </div>
+
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
+</div>
diff --git a/resources/views/livewire/buttons/create-top-up.blade.php b/resources/views/livewire/buttons/create-top-up.blade.php
new file mode 100644
index 0000000..484f56a
--- /dev/null
+++ b/resources/views/livewire/buttons/create-top-up.blade.php
@@ -0,0 +1,65 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center w-fit text-xs hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/notification" class="hover:text-orange-600">
+            Top-Up
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+            Create Top-Up
+        </span>
+
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Top-Up</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">Top-up Details</h2>
+
+        <div class="space-y-4">
+            <!-- Fee Code -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Fee Code:</label>
+                <input type="text" wire:model="fee_code" class="flex-1 border rounded px-3 py-2" placeholder="Fee Code">
+            </div>
+
+            <!-- Name -->
+                        <div class="flex items-center gap-2">
+                <label class="w-40">Name:</label>
+                <input type="text" wire:model="name" class="flex-1 border rounded px-3 py-2" placeholder="Name">
+            </div>
+
+            <!-- Value -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Value:</label>
+                <input type="text" wire:model="name" class="flex-1 border rounded px-3 py-2" placeholder="Value">
+            </div>
+
+            <!-- Type -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">Type:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> PH Peso
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> Percentage
+                </label>
+            </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/buttons/create-user.blade.php b/resources/views/livewire/buttons/create-user.blade.php
new file mode 100644
index 0000000..2e934de
--- /dev/null
+++ b/resources/views/livewire/buttons/create-user.blade.php
@@ -0,0 +1,91 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <a href="/main/user-management" class="hover:text-orange-600">
+            User Management
+        </a>
+        <x-heroicon-o-chevron-right class="w-3 h-3" />
+        <span>
+        Create User
+        </span>    
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create User</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-"></div>
+
+    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
+        <h2 class="text-lg font-semibold mb-4">User Details</h2>
+
+        <div class="space-y-4">
+            <!-- Username -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Username:</label>
+                <input type="text" wire:model="username" class="flex-1 border rounded px-3 py-2" placeholder="User name">
+                <button class="bg-orange-500 text-white px-3 py-1 rounded">Copy</button>
+            </div>
+
+            <!-- First Name -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">First Name:</label>
+                <input type="text" wire:model="first_name" class="flex-1 border rounded px-3 py-2" placeholder="First Name">
+            </div>
+
+            <!-- Last Name -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Last Name:</label>
+                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Last Name">
+            </div>
+
+            <!-- Email -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Email Address:</label>
+                <input type="email" wire:model="email" class="flex-1 border rounded px-3 py-2" placeholder="Email Address">
+            </div>
+
+            <!-- Status -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">Status:</label>
+                <label>
+                    <input type="radio" wire:model="status" name="status" value="active" class="mr-1"> Active
+                </label>
+                <label>
+                    <input type="radio" wire:model="status" name="status" value="inactive" class="mr-1"> Inactive
+                </label>
+            </div>
+
+            <!-- Role -->
+            <div class="flex items-center gap-4">
+                <label class="w-40">User Role:</label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> System Admin
+                </label>
+                <label>
+                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> Marketing Personnel
+                </label>
+            </div>
+
+            <!-- Password -->
+            <div class="flex items-center gap-2">
+                <label class="w-40">Default Password:</label>
+                <input type="text" wire:model="default_password" class="flex-1 border rounded px-3 py-2" placeholder="Default Password">
+                <button wire:click="generatePassword" class="bg-orange-500 text-white px-3 py-1 rounded">Generate</button>
+                <button class="bg-orange-500 text-white px-3 py-1 rounded">Copy</button>
+            </div>
+        </div>
+
+        <!-- Submit / Cancel -->
+        <div class="mt-6 flex justify-end gap-2">
+            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
+            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/components/table.blade.php b/resources/views/livewire/components/table.blade.php
index 896c7f5..fbbf26d 100644
--- a/resources/views/livewire/components/table.blade.php
+++ b/resources/views/livewire/components/table.blade.php
@@ -1,17 +1,23 @@
 <div class="mt-10">
     <div class="p-4 bg-white shadow-md">
-        <!-- Search Input with Debounce -->
-        <div class="mb-4">
+        <!-- Top Bar with Search & Add Button -->
+        <div class="mb-4 flex items-center justify-between">
             <input type="text" wire:model.debounce.500ms="search" 
                 class="w-80 p-2 border border-gray-300 rounded-md"
                 placeholder="Search..." 
                 autofocus>
+
+                @if ($hasAddButton && $addRoute)
+                    <a href="{{ $addRoute }}" wire:navigate
+                    class="ml-4 px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
+                        + Add
+                    </a>
+                @endif
         </div>
 
         <table class="table-auto w-full">
             <thead class="bg-gray-100">
                 <tr>
-                    <!-- Conditionally display Select All Checkbox in the header -->
                     @if ($hasCheckbox)
                         <th class="px-4 py-2 text-left">
                             <input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
@@ -21,15 +27,14 @@
                     @foreach ($columns as $column)
                         <th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
                             {{ $column['label'] }}
-                            <!-- Sorting Icons -->
                             @if ($sortField === $column['field'])
                                 @if ($sortDirection === 'asc')
-                                    <span class="ml-2">&#8593;</span> <!-- Up Triangle -->
+                                    <span class="ml-2">&#8593;</span>
                                 @else
-                                    <span class="ml-2">&#8595;</span> <!-- Down Triangle -->
+                                    <span class="ml-2">&#8595;</span>
                                 @endif
                             @else
-                                <span class="ml-2">&#8597;</span> <!-- Up Triangle by default -->
+                                <span class="ml-2">&#8597;</span>
                             @endif
                         </th>
                     @endforeach
@@ -42,7 +47,6 @@
             <tbody>
                 @forelse ($rows as $row)
                     <tr class="hover:bg-gray-50">
-                        <!-- Conditionally display Row Checkbox based on hasCheckbox -->
                         @if ($hasCheckbox)
                             <td class="px-4 py-2">
                                 <input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')" 
diff --git a/resources/views/livewire/home-page-mobile/photo-slider.blade.php b/resources/views/livewire/home-page-mobile/photo-slider.blade.php
index 51f5934..7c44069 100644
--- a/resources/views/livewire/home-page-mobile/photo-slider.blade.php
+++ b/resources/views/livewire/home-page-mobile/photo-slider.blade.php
@@ -12,5 +12,6 @@
     :hasCheckbox="true"
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('photo-slider-create')" 
     />
 </div>
diff --git a/resources/views/livewire/main-content-manager.blade.php b/resources/views/livewire/main-content-manager.blade.php
index fb1021f..ca0142e 100644
--- a/resources/views/livewire/main-content-manager.blade.php
+++ b/resources/views/livewire/main-content-manager.blade.php
@@ -81,8 +81,47 @@
         @case('fuel')
             <livewire:fuel />
             @break
-        <!-- end -->
-         
+
+        @case('user-create')
+                <livewire:buttons.create-user />
+            @break
+
+        @case('notification-create')
+                <livewire:buttons.create-notification />
+            @break
+
+        @case('photo-slider-create')
+                <livewire:buttons.create-photo-slider />
+            @break
+
+        @case('promotion-create')
+                <livewire:buttons.create-promotion />
+            @break
+
+        @case('top-up-create')
+                <livewire:buttons.create-top-up />
+            @break
+
+        @case('card-type-create')
+                <livewire:buttons.create-card-type />
+            @break
+
+        @case('terms-and-privacy-create')
+                <livewire:buttons.create-terms-and-privacy />
+            @break
+
+        @case('branch-create')
+                <livewire:buttons.create-branch />
+            @break
+
+        @case('station-create')
+                <livewire:buttons.create-station />
+            @break
+            
+        @case('fuel-create')
+                <livewire:buttons.create-fuel />
+            @break
+
         @default
             <livewire: profile />
     @endswitch
diff --git a/resources/views/livewire/navigation/drawer.blade.php b/resources/views/livewire/navigation/drawer.blade.php
index c4ca3dc..bf5c809 100644
--- a/resources/views/livewire/navigation/drawer.blade.php
+++ b/resources/views/livewire/navigation/drawer.blade.php
@@ -1,8 +1,8 @@
-<div class="w-80 bg-white text-black flex-shrink-0 shadow-md">
-    <div class="text-center mb-5">
-        <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto w-20 mt-5">
+<div x-data="{ collapsed: false }" class="bg-white text-black flex-shrink-0 shadow-md transition-all duration-300" :class="{ 'w-20': collapsed, 'w-80': !collapsed }">
+    <div class="text-center mb-5 cursor-pointer" @click="collapsed = !collapsed">
+        <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto transition-all duration-300" :class="{ 'w-20 p-5': collapsed, 'w-40 mt-5': !collapsed }">
     </div>
-    
+
     <nav class="flex flex-col space-y-2 p-4">
         @php
             function activeClass($path) {
@@ -10,117 +10,116 @@
             }
         @endphp
 
-    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
-        <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
-        <span class="{{ activeClass('main/user-management') }}">User Management</span>
-    </a>
+        <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
+            <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
+            <span x-show="!collapsed" class="{{ activeClass('main/user-management') }}">User Management</span>
+        </a>
 
-    <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
-        <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
-        <span class="{{ activeClass('main/notification') }}">Notifications</span>
-    </a>
+        <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
+            <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
+            <span x-show="!collapsed" class="{{ activeClass('main/notification') }}">Notifications</span>
+        </a>
 
-    <!-- Dropdown: Member Management -->
-    <div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
-            <div class="flex items-center gap-2">
-                <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
-                <span class="{{ activeClass('main/member-management*') }}">Member Management</span>
+        <!-- Dropdown: Member Management -->
+        <div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative">
+            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
+                <div class="flex items-center gap-2">
+                    <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
+                    <span x-show="!collapsed" class="{{ activeClass('main/member-management*') }}">Member Management</span>
+                </div>
+                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
+                <a wire:navigate href="/main/member-management/card-member" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
+                <a wire:navigate href="/main/member-management/locked-account" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
             </div>
-            <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-        </button>
-        <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/member-management/card-member" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
-            <a wire:navigate href="/main/member-management/locked-account" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
         </div>
-    </div>
 
-    <!-- Dropdown: Home Page (Mobile) -->
-    <div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
-            <div class="flex items-center gap-2">
-                <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
-                <span class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
+        <!-- Dropdown: Home Page (Mobile) -->
+        <div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative">
+            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
+                <div class="flex items-center gap-2">
+                    <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
+                    <span x-show="!collapsed" class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
+                </div>
+                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
+                <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
             </div>
-            <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-        </button>
-        <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
         </div>
-    </div>
 
-    <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
-        <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
-        <span class="{{ activeClass('main/promotion') }}">Promotions</span>
-    </a>
+        <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
+            <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
+            <span x-show="!collapsed" class="{{ activeClass('main/promotion') }}">Promotions</span>
+        </a>
 
-    <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
-        <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
-        <span class="{{ activeClass('main/top-up') }}">Top Up</span>
-    </a>
+        <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
+            <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
+            <span x-show="!collapsed" class="{{ activeClass('main/top-up') }}">Top Up</span>
+        </a>
 
-    <!-- Dropdown: About Us -->
-    <div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
-            <div class="flex items-center gap-2">
-                <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
-                <span class="{{ activeClass('main/about-us*') }}">About Us</span>
+        <!-- Dropdown: About Us -->
+        <div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative">
+            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
+                <div class="flex items-center gap-2">
+                    <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
+                    <span x-show="!collapsed" class="{{ activeClass('main/about-us*') }}">About Us</span>
+                </div>
+                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
+                <a wire:navigate href="/main/about-us/card-type" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
+                <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
             </div>
-            <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-        </button>
-        <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/about-us/card-type" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
-            <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
         </div>
-    </div>
 
-    <!-- Dropdown: Reports -->
-    <div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
-            <div class="flex items-center gap-2">
-                <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
-                <span class="{{ activeClass('main/report*') }}">Reports</span>
+        <!-- Dropdown: Reports -->
+        <div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative">
+            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
+                <div class="flex items-center gap-2">
+                    <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
+                    <span x-show="!collapsed" class="{{ activeClass('main/report*') }}">Reports</span>
+                </div>
+                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
+                <a wire:navigate href="/main/report/registration-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
+                <a wire:navigate href="/main/report/top-up-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
+                <a wire:navigate href="/main/report/mobile-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
+                <a wire:navigate href="/main/report/station-rating-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
             </div>
-            <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-        </button>
-        <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/report/registration-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
-            <a wire:navigate href="/main/report/top-up-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
-            <a wire:navigate href="/main/report/mobile-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
-            <a wire:navigate href="/main/report/station-rating-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
         </div>
-    </div>
 
-    <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
-        <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
-        <span class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
-    </a>
+        <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
+            <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
+            <span x-show="!collapsed" class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
+        </a>
 
-    <!-- Dropdown: Station Locator -->
-    <div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
-            <div class="flex items-center gap-2">
-                <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
-                <span class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
+        <!-- Dropdown: Station Locator -->
+        <div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative">
+            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
+                <div class="flex items-center gap-2">
+                    <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
+                    <span x-show="!collapsed" class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
+                </div>
+                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
+                <a wire:navigate href="/main/station-locator/branch" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
+                <a wire:navigate href="/main/station-locator/station" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
+                <a wire:navigate href="/main/station-locator/fuel" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
             </div>
-            <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-        </button>
-        <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/station-locator/branch" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
-            <a wire:navigate href="/main/station-locator/station" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
-            <a wire:navigate href="/main/station-locator/fuel" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
         </div>
-    </div>
-
-</nav>
+    </nav>
 </div>
diff --git a/resources/views/livewire/notification/notification.blade.php b/resources/views/livewire/notification/notification.blade.php
index 7205b3a..e6c7ba8 100644
--- a/resources/views/livewire/notification/notification.blade.php
+++ b/resources/views/livewire/notification/notification.blade.php
@@ -11,6 +11,7 @@
     ]"
     :rows="$notifs" 
     :hasActions="false"
+    :addRoute="route('notification-create')" 
     />
     
 </div>
diff --git a/resources/views/livewire/promotion/promotion.blade.php b/resources/views/livewire/promotion/promotion.blade.php
index e471944..67d5674 100644
--- a/resources/views/livewire/promotion/promotion.blade.php
+++ b/resources/views/livewire/promotion/promotion.blade.php
@@ -13,5 +13,6 @@
     :hasCheckbox="true"
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('promotion-create')" 
     />
 </div>
diff --git a/resources/views/livewire/station-locator/branch.blade.php b/resources/views/livewire/station-locator/branch.blade.php
index 89d8c97..ea578db 100644
--- a/resources/views/livewire/station-locator/branch.blade.php
+++ b/resources/views/livewire/station-locator/branch.blade.php
@@ -13,5 +13,6 @@
     :rows="$branches" 
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('branch-create')"
     />
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/station-locator/fuel.blade.php b/resources/views/livewire/station-locator/fuel.blade.php
index 02c4a77..c375c45 100644
--- a/resources/views/livewire/station-locator/fuel.blade.php
+++ b/resources/views/livewire/station-locator/fuel.blade.php
@@ -10,5 +10,6 @@
     :rows="$fuels" 
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('fuel-create')"
     />
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/station-locator/station.blade.php b/resources/views/livewire/station-locator/station.blade.php
index e507427..aaf5420 100644
--- a/resources/views/livewire/station-locator/station.blade.php
+++ b/resources/views/livewire/station-locator/station.blade.php
@@ -14,5 +14,6 @@
     :rows="$stations" 
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('station-create')"
     />
 </div>
diff --git a/resources/views/livewire/top-up/top-nav/top-up.blade.php b/resources/views/livewire/top-up/top-nav/top-up.blade.php
index 5d0e754..8c5df36 100644
--- a/resources/views/livewire/top-up/top-nav/top-up.blade.php
+++ b/resources/views/livewire/top-up/top-nav/top-up.blade.php
@@ -8,12 +8,12 @@
         </a>
         <x-heroicon-o-chevron-right class="w-4 h-4" />
         <a href="/main/top-up" class="hover:text-orange-600">
-            Top Up
+            Top-Up
         </a>
     </div>
 
     <!-- Page Title -->
-    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Top Up</h3>
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Top-Up</h3>
 
     <!-- Bottom border -->
     <div class="border-b border-gray-300 mt-5"></div>
diff --git a/resources/views/livewire/top-up/top-up.blade.php b/resources/views/livewire/top-up/top-up.blade.php
index 57b37fd..972c206 100644
--- a/resources/views/livewire/top-up/top-up.blade.php
+++ b/resources/views/livewire/top-up/top-up.blade.php
@@ -11,5 +11,6 @@
     :rows="$topUp" 
     :hasActions="true"
     :isViewPage="false"
+    :addRoute="route('top-up-create')" 
     />
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/user-management/user-management.blade.php b/resources/views/livewire/user-management/user-management.blade.php
index 16cdc74..07b89da 100644
--- a/resources/views/livewire/user-management/user-management.blade.php
+++ b/resources/views/livewire/user-management/user-management.blade.php
@@ -1,16 +1,20 @@
 <div>
-@include('livewire.user-management.top-nav.user-management')
-<livewire:components.table 
-    :columns="[
-        ['label' => 'Username', 'field' => 'username'],
-        ['label' => 'First Name', 'field' => 'first_name'],
-        ['label' => 'Last Name', 'field' => 'last_name'],
-        ['label' => 'Email', 'field' => 'email'],
-        ['label' => 'Role', 'field' => 'role'],
-        ['label' => 'Status', 'field' => 'status'],
-    ]"
-    :rows="$users" 
-    :hasActions="true"
-    :isViewPage="false"
+    @include('livewire.user-management.top-nav.user-management')
+
+    <livewire:components.table 
+        :columns="[
+            ['label' => 'Username', 'field' => 'username'],
+            ['label' => 'First Name', 'field' => 'first_name'],
+            ['label' => 'Last Name', 'field' => 'last_name'],
+            ['label' => 'Email', 'field' => 'email'],
+            ['label' => 'Role', 'field' => 'role'],
+            ['label' => 'Status', 'field' => 'status'],
+        ]"
+        :rows="$users" 
+        :addRoute="route('user-create')" 
+        :hasAddButton="true"
+        :hasCheckbox="true"
+        :hasActions="true"
+        :isViewPage="false"
     />
 </div>
diff --git a/routes/web.php b/routes/web.php
index aed0ba3..e2bac2c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,33 +32,73 @@ Route::get('/login', function () {
 })->name('login');
 
 
-// Route::get('/login', LoginForm::class)->name('layouts.app');
+// // Route::get('/login', LoginForm::class)->name('layouts.app');
 
-// Route::get('/dashboard', function () {
-//     return view('main.dashboard'); // This view extends layouts.dashboard
-// });
+// // Route::get('/dashboard', function () {
+// //     return view('main.dashboard'); // This view extends layouts.dashboard
+// // });
 
-// Route::get('/main', MainContentManager::class)->name('main.dashboard');
+// // Route::get('/main', MainContentManager::class)->name('main.dashboard');
 
-// Route::get('/main/profile', Profile::class)->name('profile.profile');
+// // Route::get('/main/profile', Profile::class)->name('profile.profile');
 // Route::get('/main/user-management', UserManagement::class)->name('user-management.user-management');
-// Route::get('/main/notification', Notification::class)->name('notification.notification');
-// Route::get('/main/member-management/card-member', CardMember::class)->name('member-management.card-member');
-// Route::get('/main/member-management/locked-account', LockedAccount::class)->name('member-management.locked-account');
-// Route::get('/main/home-page-mobile/photo-slider', PhotoSlider::class)->name('home-page-mobile.photo-slider');
-// Route::get('/main/promotion', Promotion::class)->name('promotion.promotion');
-// Route::get('/main/top-up', TopUp::class)->name('top-up.top-up');
-// Route::get('/main/about-us/card-type', CardType::class)->name('about-us.card-type');
-// Route::get('/main/about-us/terms-and-privacy', TermsAndPrivacy::class)->name('about-us.terms-and-privacy');
-// Route::get('/main/report/registration-report', RegistrationReport::class)->name('report.registration-report');
-// Route::get('/main/report/top-up-usage-report', TopUpUsageReport::class)->name('report.top-up-usage-report');
-// Route::get('/main/report/mobile-usage-report', MobileUsageReport::class)->name('report.mobile-usage-report');
-// Route::get('/main/report/station-rating-report', StationRatingReport::class)->name('report.station-rating-report');
-// Route::get('/main/system-parameter', SystemParameter::class)->name('system-parameter.system-parameter');
-// Route::get('/main/station-locator/branch', Branch::class)->name('station-locator.branch');
-// Route::get('/main/station-locator/station', Station::class)->name('station-locator.station');
-// Route::get('/main/station-locator/fuel', Fuel::class)->name('station-locator.fuel');
+// // Route::get('/main/notification', Notification::class)->name('notification.notification');
+// // Route::get('/main/member-management/card-member', CardMember::class)->name('member-management.card-member');
+// // Route::get('/main/member-management/locked-account', LockedAccount::class)->name('member-management.locked-account');
+// // Route::get('/main/home-page-mobile/photo-slider', PhotoSlider::class)->name('home-page-mobile.photo-slider');
+// // Route::get('/main/promotion', Promotion::class)->name('promotion.promotion');
+// // Route::get('/main/top-up', TopUp::class)->name('top-up.top-up');
+// // Route::get('/main/about-us/card-type', CardType::class)->name('about-us.card-type');
+// // Route::get('/main/about-us/terms-and-privacy', TermsAndPrivacy::class)->name('about-us.terms-and-privacy');
+// // Route::get('/main/report/registration-report', RegistrationReport::class)->name('report.registration-report');
+// // Route::get('/main/report/top-up-usage-report', TopUpUsageReport::class)->name('report.top-up-usage-report');
+// // Route::get('/main/report/mobile-usage-report', MobileUsageReport::class)->name('report.mobile-usage-report');
+// // Route::get('/main/report/station-rating-report', StationRatingReport::class)->name('report.station-rating-report');
+// // Route::get('/main/system-parameter', SystemParameter::class)->name('system-parameter.system-parameter');
+// // Route::get('/main/station-locator/branch', Branch::class)->name('station-locator.branch');
+// // Route::get('/main/station-locator/station', Station::class)->name('station-locator.station');
+// // Route::get('/main/station-locator/fuel', Fuel::class)->name('station-locator.fuel');
 
 Route::get('/main/{page?}', function () {
     return view('main.dashboard');
-})->where('page', '.*');
\ No newline at end of file
+})->where('page', '.*');
+
+Route::get('/main/user-management/user-create', function () {
+    return view('main.dashboard', ['activePage' => 'user-create']);
+})->name('user-create');
+
+Route::get('/main/notification/notification-create', function () {
+    return view('main.dashboard', ['activePage' => 'notification-create']);
+})->name('notification-create');
+
+Route::get('/main/home-page-mobile/photo-slider-create', function () {
+    return view('main.dashboard', ['activePage' => 'photo-slider-create']);
+})->name('photo-slider-create');
+
+Route::get('/main/promotion/promotion-create', function () {
+    return view('main.dashboard', ['activePage' => 'promotion-create']);
+})->name('promotion-create');
+
+Route::get('/main/top-up/top-up-create', function () {
+    return view('main.dashboard', ['activePage' => 'top-up-create']);
+})->name('top-up-create');
+
+Route::get('/main/about-us/card-type-create', function () {
+    return view('main.dashboard', ['activePage' => 'card-type-create']);
+})->name('card-type-create');
+
+Route::get('/main/about-us/terms-and-privacy-create', function () {
+    return view('main.dashboard', ['activePage' => 'terms-and-privacy-create']);
+})->name('terms-and-privacy-create');
+
+Route::get('/main/station-locator/branch-create', function () {
+    return view('main.dashboard', ['activePage' => 'branch-create']);
+})->name('branch-create');
+
+Route::get('/main/station-locator/station-create', function () {
+    return view('main.dashboard', ['activePage' => 'station-create']);
+})->name('station-create');
+
+Route::get('/main/station-locator/fuel-create', function () {
+    return view('main.dashboard', ['activePage' => 'fuel-create']);
+})->name('fuel-create');
\ No newline at end of file