diff --git a/app/Livewire/ChangePassword.php b/app/Livewire/ChangePassword.php
new file mode 100644
index 0000000..7db783b
--- /dev/null
+++ b/app/Livewire/ChangePassword.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class ChangePassword extends Component
+{
+    public function render()
+    {
+        return view('livewire.change-password');
+    }
+}
diff --git a/app/Livewire/Login.php b/app/Livewire/Login.php
new file mode 100644
index 0000000..19779cf
--- /dev/null
+++ b/app/Livewire/Login.php
@@ -0,0 +1,157 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use App\Services\ApiService;
+use App\Services\CookieService;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Log;
+
+class Login extends Component
+{
+    public $username = '';
+    public $password = '';
+    public $isSubmitting = false;
+    public $userVerified = false;
+    public $isModalVisible = false;
+    public $forgotUsername = false;
+    public $userEmail = '';
+    public $userLogo = '';
+    public $mounted = false;
+    public $role = null;
+    public $errors = [];
+
+    protected $apiService;
+    protected $cookieService;
+
+    public function boot(ApiService $apiService, CookieService $cookieService)
+    {
+        $this->apiService = $apiService;
+        $this->cookieService = $cookieService;
+    }
+
+    public function mount()
+    {
+        if (Session::get('isAuthenticated')) {
+            return redirect('/my-profile'); // Adjust based on role if needed
+        }
+
+        try {
+            $contactResponse = $this->apiService->get('systemPreference/contact_details');
+            $logoResponse = $this->apiService->get('systemPreference/logo');
+
+            $this->userEmail = $contactResponse['data']['value'] ?? '';
+            $this->userLogo = $logoResponse['data']['value'] ?? '';
+            $this->mounted = true;
+        } catch (\Exception $e) {
+            Log::error('Failed to load system preferences', ['error' => $e->getMessage(), 'source' => 'LoginComponent']);
+        }
+    }
+
+    public function checkUser()
+    {
+        $this->isSubmitting = true;
+        $this->errors = [];
+
+        try {
+            $this->validate([
+                'username' => ['required', 'regex:/^[A-Za-z0-9_@. ]+$/'],
+            ], [
+                'username.required' => 'Username is required!',
+                'username.regex' => 'Invalid username.',
+            ]);
+
+            $response = $this->apiService->post('/login_username', ['username' => $this->username]);
+            $this->userVerified = $response['data']['is_verified'] ?? false;
+            $this->role = $response['data']['role'] ?? null;
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            $this->errors = $e->errors();
+        } catch (\Exception $e) {
+            $this->errors['username'] = [$e->getMessage()];
+            Log::error('Username check failed', ['error' => $e->getMessage(), 'source' => 'LoginComponent']);
+        } finally {
+            $this->isSubmitting = false;
+        }
+    }
+
+    public function login()
+    {
+        $this->isSubmitting = true;
+        $this->errors = [];
+
+        try {
+            $this->validate([
+                'password' => ['required'],
+            ], [
+                'password.required' => 'Password is required!',
+            ]);
+
+            $response = $this->apiService->post('/login_password', [
+                'username' => $this->username,
+                'password' => $this->password,
+            ]);
+
+            if (isset($response['data']['prompt_password']) && $response['data']['prompt_password']) {
+                return redirect()->route('change-password', [
+                    'username' => $this->username,
+                    'admin_uuid' => $response['data']['admin_uuid'],
+                    'password' => $this->password,
+                ]);
+            }
+
+            if (isset($response['data']['token'])) {
+                $token = $response['data']['token'];
+                $this->cookieService->setCookie(['token' => $token], 'TOKEN');
+                Session::put('isAuthenticated', true);
+
+                $profileResponse = $this->apiService->post('adminProfile');
+                $userInfo = $profileResponse['data'];
+                Session::put('userInfo', $userInfo);
+
+                Log::info('Login successful', ['source' => 'LoginComponent']);
+                return redirect('/my-profile'); // Adjust based on role if needed
+            }
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            $this->errors = $e->errors();
+        } catch (\Exception $e) {
+            $this->errors['password'] = [$e->getMessage()];
+            Log::error('Login failed', ['error' => $e->getMessage(), 'source' => 'LoginComponent']);
+        } finally {
+            $this->isSubmitting = false;
+        }
+    }
+
+    public function showModalForgotUsername()
+    {
+        $this->isModalVisible = true;
+        $this->forgotUsername = true;
+    }
+
+    public function showModalChangePassword()
+    {
+        $this->isModalVisible = true;
+        $this->forgotUsername = false;
+    }
+
+    public function hideModal()
+    {
+        $this->isModalVisible = false;
+    }
+
+    public function backToLogin()
+    {
+        $this->username = '';
+        $this->password = '';
+        $this->userVerified = false;
+    }
+
+    public function render()
+    {
+        if (!$this->mounted) {
+            return null;
+        }
+
+        return view('livewire.login')->layout('layouts.app', ['title' => 'Login Page']);
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/LoginTest.php b/app/Livewire/LoginTest.php
new file mode 100644
index 0000000..6e6bc2e
--- /dev/null
+++ b/app/Livewire/LoginTest.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Tests\Feature\Livewire;
+
+use Livewire\Livewire;
+use Tests\TestCase;
+use App\Livewire\Login;
+
+class LoginTest extends TestCase
+{
+    /** @test */
+    public function it_renders_without_crashing()
+    {
+        Livewire::test(Login::class)
+            ->assertSee('Login'); // Check if "Login" text is rendered
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/PublicTopErrorPage.php b/app/Livewire/PublicTopErrorPage.php
new file mode 100644
index 0000000..2be7e87
--- /dev/null
+++ b/app/Livewire/PublicTopErrorPage.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Jenssegers\Agent\Agent;
+
+class PublicTopErrorPage extends Component
+{
+    public function backHandler()
+    {
+        $agent = new Agent();
+
+        if ($agent->is('iOS')) {
+            // Trigger iOS native handler
+            $this->dispatchBrowserEvent('ios-top-up-failed');
+        } elseif ($agent->is('Android')) {
+            // Trigger Android native handler
+            $this->dispatchBrowserEvent('android-top-up-failed');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.public-top-error-page')->layout('layouts.app');
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/PublicTopSuccessPage.php b/app/Livewire/PublicTopSuccessPage.php
new file mode 100644
index 0000000..8da55f4
--- /dev/null
+++ b/app/Livewire/PublicTopSuccessPage.php
@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use App\Services\ApiService;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Log;
+use Jenssegers\Agent\Agent;
+
+class PublicTopSuccessPage extends Component
+{
+    public $loading = false;
+    public $status = '';
+    public $userInfo = null;
+    public $message = '';
+    public $paymentId = '';
+    public $token = '';
+    public $payerId = '';
+
+    protected $apiService;
+
+    public function boot(ApiService $apiService)
+    {
+        $this->apiService = $apiService;
+    }
+
+    public function mount()
+    {
+        $this->loading = true;
+
+        // Get query parameters from the request
+        $this->paymentId = request()->query('paymentId');
+        $this->token = request()->query('token');
+        $this->payerId = request()->query('PayerID');
+
+        $payload = [
+            'paymentId' => $this->paymentId,
+            'token' => $this->token,
+            'PayerID' => $this->payerId,
+        ];
+
+        try {
+            $response = $this->apiService->post('paypalExecute', $payload);
+
+            if ($response && isset($response['status']) && $response['status'] === 200) {
+                $this->status = 200;
+                $this->userInfo = $response['data'];
+                Log::info('Top-up success', ['source' => 'PublicTopSuccessPage']);
+            }
+        } catch (\Exception $e) {
+            $this->status = $e->getCode() ?: 500;
+            $this->message = $e->getMessage();
+            Log::error('Top-up failed', ['error' => $e->getMessage(), 'source' => 'PublicTopSuccessPage']);
+        } finally {
+            $this->loading = false;
+        }
+    }
+
+    public function backHandler()
+    {
+        $agent = new Agent();
+
+        if ($agent->is('iOS')) {
+            // Trigger iOS native handler
+            $this->dispatchBrowserEvent('ios-top-up-failed');
+        } elseif ($agent->is('Android')) {
+            // Trigger Android native handler
+            $this->dispatchBrowserEvent('android-top-up-failed');
+        }
+    }
+
+    public function backHandlerSuccess()
+    {
+        $agent = new Agent();
+
+        if ($agent->is('iOS')) {
+            // Trigger iOS native handler
+            $this->dispatchBrowserEvent('ios-top-up-success');
+        } elseif ($agent->is('Android')) {
+            // Trigger Android native handler (corrected from Failed to Success)
+            $this->dispatchBrowserEvent('android-top-up-success');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.public-top-success-page')->layout('layouts.app');
+    }
+}
\ No newline at end of file
diff --git a/app/Livewire/Registration.php b/app/Livewire/Registration.php
new file mode 100644
index 0000000..abc481d
--- /dev/null
+++ b/app/Livewire/Registration.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use App\Services\ApiService;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Validation\Rule;
+
+class Registration extends Component
+{
+    public $email = '';
+    public $password = '';
+    public $confirm_password = '';
+    public $first_name = '';
+    public $middle_name = '';
+    public $last_name = '';
+    public $website = '';
+    public $isSubmitting = false;
+    public $status = '';
+    public $errors = [];
+    public $isRegistered = false;
+
+    protected $apiService;
+
+    public function boot(ApiService $apiService)
+    {
+        $this->apiService = $apiService;
+    }
+
+    public function mount()
+    {
+        if (Session::get('isRegistered')) {
+            return redirect()->route('login');
+        }
+    }
+
+    public function register()
+    {
+        $this->isSubmitting = true;
+        $this->status = 'loading';
+        $this->errors = [];
+
+        try {
+            $this->validate([
+                'email' => ['required', 'email'],
+                'password' => ['required'],
+                'confirm_password' => ['required', Rule::in([$this->password])],
+                'first_name' => ['required'],
+                'middle_name' => ['required'],
+                'last_name' => ['required'],
+                'website' => ['required'],
+            ], [
+                'email.required' => 'Email is required.',
+                'email.email' => 'Invalid Email address.',
+                'password.required' => 'Password is required.',
+                'confirm_password.required' => 'Confirm password is required.',
+                'confirm_password.in' => 'Passwords do not match.',
+                'first_name.required' => 'First name is required.',
+                'middle_name.required' => 'Middle name is required.',
+                'last_name.required' => 'Last name is required.',
+                'website.required' => 'Website is required.',
+            ]);
+
+            $data = [
+                'email' => $this->email,
+                'password' => $this->password,
+                'first_name' => $this->first_name,
+                'middle_name' => $this->middle_name,
+                'last_name' => $this->last_name,
+                'website' => $this->website,
+            ];
+
+            $response = $this->apiService->post('/register', $data);
+
+            if ($response && isset($response['status']) && $response['status'] === 201) {
+                $this->status = 'success';
+                $this->isRegistered = true;
+                Session::put('isRegistered', true);
+                Session::flash('success', 'Registration successful.');
+                return redirect()->route('login');
+            }
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            $this->status = 'error';
+            $this->errors = $e->errors();
+            Log::error('Registration validation failed', ['errors' => $this->errors, 'source' => 'RegistrationComponent']);
+        } catch (\Exception $e) {
+            $this->status = 'error';
+            Session::flash('error', 'Something went wrong: ' . $e->getMessage());
+            Log::error('Registration failed', ['error' => $e->getMessage(), 'source' => 'RegistrationComponent']);
+        } finally {
+            $this->isSubmitting = false;
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.registration')->layout('layouts.app');
+    }
+}
\ No newline at end of file
diff --git a/composer.json b/composer.json
index 192f45c..d80d8cc 100644
--- a/composer.json
+++ b/composer.json
@@ -8,6 +8,7 @@
     "require": {
         "php": "^8.2",
         "guzzlehttp/guzzle": "^7.9",
+        "jenssegers/agent": "^2.6",
         "laravel/framework": "^11.31",
         "laravel/tinker": "^2.9",
         "laravel/ui": "^4.6",
diff --git a/composer.lock b/composer.lock
index bfce4c2..51cf3e6 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "76604e550276fef9afccacf4143ff3aa",
+    "content-hash": "a76eb60c479c8d60dd14c1dc914f137b",
     "packages": [
         {
             "name": "brick/math",
@@ -1054,6 +1054,141 @@
             ],
             "time": "2025-02-03T10:55:03+00:00"
         },
+        {
+            "name": "jaybizzle/crawler-detect",
+            "version": "v1.3.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/JayBizzle/Crawler-Detect.git",
+                "reference": "d3b7ff28994e1b0de764ab7412fa269a79634ff3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/JayBizzle/Crawler-Detect/zipball/d3b7ff28994e1b0de764ab7412fa269a79634ff3",
+                "reference": "d3b7ff28994e1b0de764ab7412fa269a79634ff3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.8|^5.5|^6.5|^9.4"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Jaybizzle\\CrawlerDetect\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mark Beech",
+                    "email": "m@rkbee.ch",
+                    "role": "Developer"
+                }
+            ],
+            "description": "CrawlerDetect is a PHP class for detecting bots/crawlers/spiders via the user agent",
+            "homepage": "https://github.com/JayBizzle/Crawler-Detect/",
+            "keywords": [
+                "crawler",
+                "crawler detect",
+                "crawler detector",
+                "crawlerdetect",
+                "php crawler detect"
+            ],
+            "support": {
+                "issues": "https://github.com/JayBizzle/Crawler-Detect/issues",
+                "source": "https://github.com/JayBizzle/Crawler-Detect/tree/v1.3.4"
+            },
+            "time": "2025-03-05T23:12:10+00:00"
+        },
+        {
+            "name": "jenssegers/agent",
+            "version": "v2.6.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/jenssegers/agent.git",
+                "reference": "daa11c43729510b3700bc34d414664966b03bffe"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/jenssegers/agent/zipball/daa11c43729510b3700bc34d414664966b03bffe",
+                "reference": "daa11c43729510b3700bc34d414664966b03bffe",
+                "shasum": ""
+            },
+            "require": {
+                "jaybizzle/crawler-detect": "^1.2",
+                "mobiledetect/mobiledetectlib": "^2.7.6",
+                "php": ">=5.6"
+            },
+            "require-dev": {
+                "php-coveralls/php-coveralls": "^2.1",
+                "phpunit/phpunit": "^5.0|^6.0|^7.0"
+            },
+            "suggest": {
+                "illuminate/support": "Required for laravel service providers"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "Agent": "Jenssegers\\Agent\\Facades\\Agent"
+                    },
+                    "providers": [
+                        "Jenssegers\\Agent\\AgentServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Jenssegers\\Agent\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jens Segers",
+                    "homepage": "https://jenssegers.com"
+                }
+            ],
+            "description": "Desktop/mobile user agent parser with support for Laravel, based on Mobiledetect",
+            "homepage": "https://github.com/jenssegers/agent",
+            "keywords": [
+                "Agent",
+                "browser",
+                "desktop",
+                "laravel",
+                "mobile",
+                "platform",
+                "user agent",
+                "useragent"
+            ],
+            "support": {
+                "issues": "https://github.com/jenssegers/agent/issues",
+                "source": "https://github.com/jenssegers/agent/tree/v2.6.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/jenssegers",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/jenssegers/agent",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-06-13T08:05:20+00:00"
+        },
         {
             "name": "laravel/framework",
             "version": "v11.44.2",
@@ -2145,6 +2280,68 @@
             ],
             "time": "2025-03-12T20:24:15+00:00"
         },
+        {
+            "name": "mobiledetect/mobiledetectlib",
+            "version": "2.8.45",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/serbanghita/Mobile-Detect.git",
+                "reference": "96aaebcf4f50d3d2692ab81d2c5132e425bca266"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/serbanghita/Mobile-Detect/zipball/96aaebcf4f50d3d2692ab81d2c5132e425bca266",
+                "reference": "96aaebcf4f50d3d2692ab81d2c5132e425bca266",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.0.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~4.8.36"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-0": {
+                    "Detection": "namespaced/"
+                },
+                "classmap": [
+                    "Mobile_Detect.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Serban Ghita",
+                    "email": "serbanghita@gmail.com",
+                    "homepage": "http://mobiledetect.net",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Mobile_Detect is a lightweight PHP class for detecting mobile devices. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.",
+            "homepage": "https://github.com/serbanghita/Mobile-Detect",
+            "keywords": [
+                "detect mobile devices",
+                "mobile",
+                "mobile detect",
+                "mobile detector",
+                "php mobile detect"
+            ],
+            "support": {
+                "issues": "https://github.com/serbanghita/Mobile-Detect/issues",
+                "source": "https://github.com/serbanghita/Mobile-Detect/tree/2.8.45"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/serbanghita",
+                    "type": "github"
+                }
+            ],
+            "time": "2023-11-07T21:57:25+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.9.0",
diff --git a/resources/css/app.css b/resources/css/app.css
index 32d4f96..426aeea 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,4 +1,101 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+/* Import Bootstrap */
 @import 'bootstrap/dist/css/bootstrap.min.css';
+
+/* General styles */
+#root {
+    height: 100%;
+    overflow: hidden;
+}
+
+/* Custom colors and hover effects */
+:root {
+    --primary-color: #e74610; /* Replace Ant Design's orange */
+    --hover-bg: rgba(231, 70, 16, 0.1);
+}
+
+/* Menu styles (adapt for Bootstrap navbar or custom sidebar) */
+.nav-link:hover,
+.nav-link.active {
+    color: var(--primary-color) !important;
+}
+
+.nav-item:hover {
+    background-color: var(--hover-bg) !important;
+}
+
+/* Scrollbar styles */
+::-webkit-scrollbar {
+    width: 12px;
+    background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #b8bbc9;
+}
+
+/* Form and button styles */
+.form-control:disabled {
+    cursor: text !important;
+}
+
+.btn-sm {
+    padding: 0 20px !important;
+    height: 27px !important;
+}
+
+/* Breadcrumb (Bootstrap equivalent) */
+.breadcrumb-item a:hover {
+    color: var(--primary-color) !important;
+}
+
+.breadcrumb-item:last-child a {
+    color: #4d4d4d;
+    font-weight: 500;
+    opacity: 0.85;
+}
+
+/* Custom terms management (adapt for your UI) */
+.terms-management {
+    position: absolute;
+    left: -42px;
+}
+
+.terms-management-parent {
+    position: relative;
+    left: -30px;
+}
+
+.terms-management-parent .terms-management {
+    position: relative;
+    left: 37px;
+    border-color: var(--primary-color) !important;
+    background: var(--primary-color);
+    width: 100px;
+    color: #fff;
+    text-align: right;
+}
+
+.terms-management-parent .btn:hover,
+.terms-management-parent .btn:focus {
+    background: var(--primary-color);
+    color: #fff;
+}
+
+/* Responsive design */
+@media only screen and (max-width: 480px) {
+    .app-container {
+        position: fixed;
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e8e2ec0..721de20 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -3,11 +3,16 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Laravel</title>
+    <title>Unioil - @yield('title')</title>
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @if(app()->environment('local'))
+        <script>
+            localStorage.setItem('debug', 'awesome-react-app:*');
+        </script>
+    @endif
 </head>
 <body>
-    <div class="container mt-5">
+    <div id="root" class="app-container h-100">
         @yield('content')
     </div>
     <script src="{{ asset('js/app.js') }}"></script>
diff --git a/resources/views/livewire/change-password.blade.php b/resources/views/livewire/change-password.blade.php
new file mode 100644
index 0000000..db86de0
--- /dev/null
+++ b/resources/views/livewire/change-password.blade.php
@@ -0,0 +1,3 @@
+<div>
+    {{-- Close your eyes. Count to one. That is how long forever feels. --}}
+</div>
diff --git a/resources/views/livewire/login.blade.php b/resources/views/livewire/login.blade.php
new file mode 100644
index 0000000..caf0110
--- /dev/null
+++ b/resources/views/livewire/login.blade.php
@@ -0,0 +1,75 @@
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-12 col-md-6">
+            <div class="text-center mt-5 mb-4">
+                <img src="{{ asset('images/logo_unioil.png') }}" alt="Unioil Logo" style="max-width: 200px;">
+            </div>
+            <div class="mb-3">
+                <h1 class="mb-0">Welcome</h1>
+                @if(!$userVerified)
+                    <span style="font-size: 12px;">Sign in to continue</span>
+                @endif
+            </div>
+
+            <form wire:submit.prevent="{{ $userVerified ? 'login' : 'checkUser' }}">
+                <div class="mb-3 position-relative">
+                    @if(!$userVerified)
+                        <label class="form-label fw-medium" style="color: #005598;">Enter Username</label>
+                        <input type="text" class="form-control @error('username') is-invalid @enderror" wire:model="username" placeholder="User name" readonly="{{ $userVerified ? 'true' : 'false' }}">
+                        @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                    @else
+                        <div class="d-flex align-items-center bg-light border rounded p-2 mb-3" style="border-color: #d9d9d9;">
+                            <span class="input-group-text bg-transparent border-0"><i class="bi bi-person"></i></span>
+                            <span class="flex-grow-1 text-muted">{{ $username }}</span>
+                            <button type="button" wire:click="backToLogin" class="btn btn-link p-0 text-muted"><i class="bi bi-x"></i></button>
+                        </div>
+                    @endif
+                </div>
+
+                @if($userVerified)
+                    <div class="mb-3">
+                        <label class="form-label fw-medium" style="color: #005598;">Enter Password</label>
+                        <input type="password" class="form-control @error('password') is-invalid @enderror" wire:model="password" placeholder="Password">
+                        @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                    </div>
+                @endif
+
+                <div class="row mt-4">
+                    <div class="col-6">
+                        @if($userVerified)
+                            <a href="#" wire:click="showModalChangePassword" style="color: #005598;">Forgot Password</a>
+                        @else
+                            <a href="#" wire:click="showModalForgotUsername" style="color: #005598;">Forgot Username</a>
+                        @endif
+                    </div>
+                    <div class="col-6 text-end">
+                        <button type="submit" class="btn btn-primary w-100" wire:loading.attr="disabled" wire:target="{{ $userVerified ? 'login' : 'checkUser' }}" style="background-color: {{ $userVerified ? ($password ? '#E74610' : '#FCFCFC') : ($username ? '#E74610' : '#FCFCFC') }}; border-color: {{ $userVerified ? ($password ? '#E74610' : '#D9D9D9') : ($username ? '#E74610' : '#D9D9D9') }};" {{ $userVerified ? ($password ? '' : 'disabled') : ($username ? '' : 'disabled') }}>
+                            <span wire:loading wire:target="{{ $userVerified ? 'login' : 'checkUser' }}">Processing...</span>
+                            <span wire:loading.remove wire:target="{{ $userVerified ? 'login' : 'checkUser' }}">Next</span>
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+            <!-- Modal -->
+            @if($isModalVisible)
+                <div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
+                    <div class="modal-dialog modal-dialog-centered" style="max-width: 337px;">
+                        <div class="modal-content">
+                            <div class="modal-body">
+                                <h4>Forgot {{ $forgotUsername ? 'Username' : 'Password' }}</h4>
+                                <p>
+                                    To have your {{ $forgotUsername ? 'username' : 'password' }} reset, please contact <br>
+                                    Unioil's admin at <a href="mailto:{{ $userEmail }}" style="color: #005598;">{{ $userEmail }}</a>
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-end">
+                                <button wire:click="hideModal" class="btn btn-primary" style="background-color: #E74610; border-color: #E74610; width: 64px;">Ok</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            @endif
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/public-top-error-page.blade.php b/resources/views/livewire/public-top-error-page.blade.php
new file mode 100644
index 0000000..195e831
--- /dev/null
+++ b/resources/views/livewire/public-top-error-page.blade.php
@@ -0,0 +1,29 @@
+<div class="container position-relative" style="min-height: 100vh;">
+    <div class="text-center position-absolute top-0 start-50 translate-middle-x mt-4">
+        <img src="{{ asset('images/ic_error.svg') }}" alt="Error" style="width: 24vmin;">
+        <p class="mt-3" style="line-height: 7vmin; font-size: 6vmin; font-weight: bold; color: #4D4D4D;">
+            Transaction Failed.<br>
+            Your purchase for top-up is not <br>successful. Please try again.
+        </p>
+    </div>
+    <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4" style="width: 100%; max-width: 300px;">
+        <button wire:click="backHandler" class="btn btn-primary w-100" style="height: 11vmin; font-size: 5vmin; background-color: #e74610; border-color: #e74610;">
+            Return to Top-Up Page
+        </button>
+    </div>
+
+    <!-- JavaScript for native app integration -->
+    <script>
+        window.addEventListener('ios-top-up-failed', function () {
+            if (typeof window.iOStopUpFailed === 'function') {
+                window.iOStopUpFailed();
+            }
+        });
+
+        window.addEventListener('android-top-up-failed', function () {
+            if (typeof window.AndroidTopUpFailed === 'function') {
+                window.AndroidTopUpFailed();
+            }
+        });
+    </script>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/public-top-success-page.blade.php b/resources/views/livewire/public-top-success-page.blade.php
new file mode 100644
index 0000000..8c34b07
--- /dev/null
+++ b/resources/views/livewire/public-top-success-page.blade.php
@@ -0,0 +1,86 @@
+<div class="container position-relative" style="min-height: 100vh;">
+    @if($loading)
+        <div class="text-center position-absolute top-50 start-50 translate-middle" style="font-size: 6vmin;">
+            <div class="spinner-border text-primary" role="status"></div>
+            <span class="ms-2">Loading Top-Up Please wait...</span>
+        </div>
+    @else
+        <div class="mt-5">
+            @if($status == 200)
+                <div class="text-center position-absolute top-0 start-50 translate-middle-x mt-4">
+                    <img src="{{ asset('images/ic_success.svg') }}" alt="Success" style="width: 18vmin;">
+                    <p class="mt-3" style="line-height: 7vmin; font-size: 6vmin; font-weight: bold;">
+                        Your purchase for top-up points <br> is successful!
+                    </p>
+                    <div style="font-size: 15px; font-weight: 400;">
+                        <div class="row">
+                            <div class="col-12">
+                                <span style="font-size: 6vmin; font-weight: bold;">{{ $userInfo['date'] ?? '' }}</span>
+                            </div>
+                            <div class="col-12">Card Number: {{ $userInfo['card_number'] ?? '' }}</div>
+                            <div class="col-12">Sales Invoice Number: {{ $userInfo['invoice'] ?? '' }}</div>
+                        </div>
+                        <div class="mt-3" style="font-size: 3.5vmin;">
+                            <div class="row justify-content-between">
+                                <div class="col-6 text-start">Top-up Points Value</div>
+                                <div class="col-6 text-end">{{ $userInfo['points'] ?? '' }}</div>
+                            </div>
+                            <div class="row justify-content-between">
+                                <div class="col-6 text-start">Payment Value</div>
+                                <div class="col-6 text-end">Php {{ $userInfo['payment_val'] ?? '' }}</div>
+                            </div>
+                            <div class="row justify-content-between">
+                                <div class="col-6 text-start">Paypal Fee</div>
+                                <div class="col-6 text-end">Php {{ $userInfo['paypal_fee'] ?? '' }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4" style="width: 100%; max-width: 300px;">
+                    <button wire:click="backHandlerSuccess" class="btn btn-primary w-100" style="height: 11vmin; font-size: 5vmin; background-color: #e74610; border-color: #e74610;">
+                        Return to Home Page
+                    </button>
+                </div>
+            @else
+                <div class="text-center position-absolute top-0 start-50 translate-middle-x mt-4">
+                    <img src="{{ asset('images/ic_error.svg') }}" alt="Error" style="width: 24vmin;">
+                    <p class="mt-3" style="line-height: 7vmin; font-size: 5vmin; font-weight: bold; color: #4D4D4D;">
+                        Transaction Failed.<br>{{ $message }}
+                    </p>
+                </div>
+                <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4" style="width: 100%; max-width: 300px;">
+                    <button wire:click="backHandler" class="btn btn-primary w-100" style="height: 11vmin; font-size: 5vmin; background-color: #e74610; border-color: #e74610;">
+                        Return to Top-Up Page
+                    </button>
+                </div>
+            @endif
+        </div>
+    @endif
+
+    <!-- JavaScript for native app integration -->
+    <script>
+        window.addEventListener('ios-top-up-success', function () {
+            if (typeof window.iOStopUpSuccess === 'function') {
+                window.iOStopUpSuccess();
+            }
+        });
+
+        window.addEventListener('ios-top-up-failed', function () {
+            if (typeof window.iOStopUpFailed === 'function') {
+                window.iOStopUpFailed();
+            }
+        });
+
+        window.addEventListener('android-top-up-success', function () {
+            if (typeof window.AndroidTopUpSuccess === 'function') {
+                window.AndroidTopUpSuccess();
+            }
+        });
+
+        window.addEventListener('android-top-up-failed', function () {
+            if (typeof window.AndroidTopUpFailed === 'function') {
+                window.AndroidTopUpFailed();
+            }
+        });
+    </script>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/registration.blade.php b/resources/views/livewire/registration.blade.php
new file mode 100644
index 0000000..74e20a3
--- /dev/null
+++ b/resources/views/livewire/registration.blade.php
@@ -0,0 +1,106 @@
+<div class="row justify-content-center align-items-center">
+    <div class="col-12 col-sm-12 col-lg-6 col-xl-6">
+        <h1 class="text-center">Registration</h1>
+
+        @if($status === 'error' && session('error'))
+            <div class="alert alert-danger mb-3" role="alert">
+                {{ session('error') }}
+            </div>
+        @endif
+
+        <form wire:submit.prevent="register">
+            <div class="mb-3 row">
+                <label for="email" class="col-sm-4 col-form-label">E-mail</label>
+                <div class="col-sm-8">
+                    <input type="email" class="form-control @error('email') is-invalid @enderror" wire:model="email" id="email">
+                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="mb-3 row">
+                <label for="password" class="col-sm-4 col-form-label">Password</label>
+                <div class="col-sm-8">
+                    <input type="password" class="form-control @error('password') is-invalid @enderror" wire:model="password" id="password">
+                    @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="mb-3 row">
+                <label for="confirm_password" class="col-sm-4 col-form-label">Confirm Password</label>
+                <div class="col-sm-8">
+                    <input type="password" class="form-control @error('confirm_password') is-invalid @enderror" wire:model="confirm_password" id="confirm_password">
+                    @error('confirm_password') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="mb-3 row">
+                <label for="first_name" class="col-sm-4 col-form-label">First Name</label>
+                <div class="col-sm-8">
+                    <input type="text" class="form-control @error('first_name') is-invalid @enderror" wire:model="first_name" id="first_name">
+                    @error('first_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="mb-3 row">
+                <label for="middle_name" class="col-sm-4 col-form-label">Middle Name</label>
+                <div class="col-sm-8">
+                    <input type="text" class="form-control @error('middle_name') is-invalid @enderror" wire:model="middle_name" id="middle_name">
+                    @error('middle_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="mb-3 row">
+                <label for="last_name" class="col-sm-4 col-form-label">Last Name</label>
+                <div class="col-sm-8">
+                    <input type="text" class="form-control @error('last_name') is-invalid @enderror" wire:model="last_name" id="last_name">
+                    @error('last_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="mb-3 row">
+                <label for="website" class="col-sm-4 col-form-label">Website</label>
+                <div class="col-sm-8">
+                    <select class="form-select @error('website') is-invalid @enderror" wire:model="website" id="website">
+                        <option value="">Select Website</option>
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                    </select>
+                    @error('website') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                </div>
+            </div>
+
+            <div class="text-center">
+                <button type="submit" class="btn btn-primary" wire:loading.attr="disabled" wire:target="register">
+                    <span wire:loading wire:target="register">Registering...</span>
+                    <span wire:loading.remove wire:target="register">Register</span>
+                </button>
+            </div>
+        </form>
+
+        <div class="text-center mt-3">
+            Back to <a href="{{ route('login') }}">Login</a>
+        </div>
+    </div>
+</div>
+
+@if(session('success'))
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+        Swal.fire({
+            icon: 'success',
+            title: 'Success',
+            text: '{{ session('success') }}',
+        });
+    </script>
+@endif
+
+@if(session('error'))
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script>
+        Swal.fire({
+            icon: 'error',
+            title: 'Error',
+            text: '{{ session('error') }}',
+        });
+    </script>
+@endif
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 3336ee9..d1a834a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -47,6 +47,12 @@ use App\Livewire\FetchData;
 use App\Livewire\Logout;
 use App\Livewire\ErrorHandler;
 
+Route::get('/registration', \App\Livewire\Registration::class)->name('registration');
+Route::get('/topup-success-page', \App\Livewire\PublicTopSuccessPage::class)->name('topup-success');
+Route::get('/topup-error-page', \App\Livewire\PublicTopErrorPage::class)->name('topup-error');
+
+Route::get('/login', \App\Livewire\Login::class)->name('login');
+Route::get('/change-password', \App\Livewire\ChangePassword::class)->name('change-password');
 
 
 Route::get('/fetch-data/{url}', FetchData::class)->name('fetch.data');