diff --git a/public/login.php b/public/login.php
new file mode 100644
index 0000000..0575b04
--- /dev/null
+++ b/public/login.php
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تسجيل الدخول | مُصادَق</title>
+    
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Alpine.js -->
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+    <style>
+        :root {
+            --emerald: #10b981;
+            --bg-base: #080c14;
+            --bg-surface: #0d1424;
+            --border-default: rgba(255,255,255,0.10);
+            --text-primary: #f0f6fc;
+            --text-secondary: #8b949e;
+        }
+
+        body {
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            background-color: var(--bg-base);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        .login-card {
+            background-color: var(--bg-surface);
+            border: 1px solid var(--border-default);
+            padding: 3rem;
+            width: 100%;
+            max-width: 450px;
+            border-radius: 8px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+
+        .input-field {
+            background-color: #05080f;
+            border: 1px solid var(--border-default);
+            color: white;
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border-radius: 4px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .input-field:focus {
+            border-color: var(--emerald);
+        }
+
+        .btn-primary {
+            background-color: var(--emerald);
+            color: #000;
+            width: 100%;
+            padding: 0.75rem;
+            border-radius: 4px;
+            font-weight: 700;
+            transition: opacity 0.2s;
+        }
+
+        .btn-primary:hover {
+            opacity: 0.9;
+        }
+
+        .glow {
+            position: absolute;
+            width: 500px;
+            height: 500px;
+            background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
+            z-index: -1;
+        }
+    </style>
+</head>
+<body x-data="loginForm">
+    <div class="glow"></div>
+    
+    <div class="login-card">
+        <div class="text-center mb-10">
+            <div class="w-16 h-16 bg-emerald-500 rounded-xl flex items-center justify-center text-white text-3xl font-bold mx-auto mb-4 shadow-lg shadow-emerald-500/20">م</div>
+            <h1 class="text-2xl font-bold mb-2">مرحباً بك في مُصادَق</h1>
+            <p class="text-sm text-gray-500">نظام أتمتة الفواتير الضريبية الذكي</p>
+        </div>
+
+        <form @submit.prevent="submitLogin">
+            <div class="mb-6">
+                <label class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2">البريد الإلكتروني</label>
+                <input type="email" x-model="email" class="input-field" placeholder="name@company.com" required>
+            </div>
+
+            <div class="mb-8">
+                <label class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2">كلمة المرور</label>
+                <input type="password" x-model="password" class="input-field" placeholder="••••••••" required>
+            </div>
+
+            <template x-if="error">
+                <div class="mb-6 p-3 bg-red-950/50 border border-red-500/50 text-red-200 text-sm rounded" x-text="error"></div>
+            </template>
+
+            <button type="submit" class="btn-primary flex items-center justify-center gap-2" :disabled="loading">
+                <span x-show="loading" class="animate-spin text-lg">↻</span>
+                <span x-text="loading ? 'جاري التحقق...' : 'دخول النظام ↵'"></span>
+            </button>
+        </form>
+
+        <div class="mt-8 pt-8 border-t border-gray-800 text-center">
+            <p class="text-sm text-gray-500">ليس لديك حساب؟ <a href="#" class="text-emerald-500 hover:underline">ابدأ التجربة المجانية</a></p>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('loginForm', () => ({
+                email: '',
+                password: '',
+                error: '',
+                loading: false,
+
+                async submitLogin() {
+                    this.loading = true;
+                    this.error = '';
+                    
+                    try {
+                        const response = await fetch('/api/v1/auth/login', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                email: this.email,
+                                password: this.password
+                            })
+                        });
+
+                        const result = await response.json();
+
+                        if (result.success) {
+                            localStorage.setItem('access_token', result.data.access_token);
+                            localStorage.setItem('user', JSON.stringify(result.data.user));
+                            window.location.href = '/';
+                        } else {
+                            this.error = result.message || 'خطأ في تسجيل الدخول';
+                        }
+                    } catch (e) {
+                        this.error = 'حدث خطأ في الاتصال بالخادم';
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            }));
+        });
+    </script>
+</body>
+</html>
diff --git a/public/register.php b/public/register.php
new file mode 100644
index 0000000..101505e
--- /dev/null
+++ b/public/register.php
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>إنشاء حساب | مُصادَق</title>
+    
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Alpine.js -->
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+    <style>
+        :root {
+            --emerald: #10b981;
+            --bg-base: #080c14;
+            --bg-surface: #0d1424;
+            --border-default: rgba(255,255,255,0.10);
+            --text-primary: #f0f6fc;
+        }
+
+        body {
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            background-color: var(--bg-base);
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 2rem 0;
+        }
+
+        .login-card {
+            background-color: var(--bg-surface);
+            border: 1px solid var(--border-default);
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 500px;
+            border-radius: 8px;
+        }
+
+        .input-field {
+            background-color: #05080f;
+            border: 1px solid var(--border-default);
+            color: white;
+            width: 100%;
+            padding: 0.6rem 1rem;
+            border-radius: 4px;
+            outline: none;
+        }
+
+        .input-field:focus {
+            border-color: var(--emerald);
+        }
+
+        .btn-primary {
+            background-color: var(--emerald);
+            color: #000;
+            width: 100%;
+            padding: 0.75rem;
+            border-radius: 4px;
+            font-weight: 700;
+        }
+    </style>
+</head>
+<body x-data="registerForm">
+    <div class="login-card">
+        <div class="text-center mb-8">
+            <h1 class="text-2xl font-bold mb-2">ابدأ مع مُصادَق</h1>
+            <p class="text-sm text-gray-500">سجل شركتك الآن وابدأ أتمتة فواتيرك</p>
+        </div>
+
+        <form @submit.prevent="submitRegister">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                    <label class="block text-xs font-bold text-gray-500 mb-2 uppercase">اسم الشركة</label>
+                    <input type="text" x-model="tenant_name" class="input-field" placeholder="شركة المثال" required>
+                </div>
+                <div>
+                    <label class="block text-xs font-bold text-gray-500 mb-2 uppercase">اسم المسؤول</label>
+                    <input type="text" x-model="user_name" class="input-field" placeholder="حمزة" required>
+                </div>
+            </div>
+
+            <div class="mb-4">
+                <label class="block text-xs font-bold text-gray-500 mb-2 uppercase">البريد الإلكتروني</label>
+                <input type="email" x-model="email" class="input-field" placeholder="admin@company.com" required>
+            </div>
+
+            <div class="mb-6">
+                <label class="block text-xs font-bold text-gray-500 mb-2 uppercase">كلمة المرور</label>
+                <input type="password" x-model="password" class="input-field" placeholder="••••••••" required>
+            </div>
+
+            <template x-if="error">
+                <div class="mb-6 p-3 bg-red-950/50 border border-red-500/50 text-red-200 text-sm rounded" x-text="error"></div>
+            </template>
+
+            <button type="submit" class="btn-primary" :disabled="loading">
+                <span x-text="loading ? 'جاري إنشاء الحساب...' : 'إنشاء الحساب والبدء ↵'"></span>
+            </button>
+        </form>
+
+        <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm">
+            <p class="text-gray-500">لديك حساب بالفعل؟ <a href="/login.php" class="text-emerald-500 hover:underline">تسجيل الدخول</a></p>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('registerForm', () => ({
+                tenant_name: '',
+                user_name: '',
+                email: '',
+                password: '',
+                error: '',
+                loading: false,
+
+                async submitRegister() {
+                    this.loading = true;
+                    this.error = '';
+                    
+                    try {
+                        const response = await fetch('/api/v1/auth/register', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                tenant_name: this.tenant_name,
+                                user_name: this.user_name,
+                                email: this.email,
+                                password: this.password
+                            })
+                        });
+
+                        const result = await response.json();
+
+                        if (result.success) {
+                            localStorage.setItem('access_token', result.data.access_token);
+                            localStorage.setItem('user', JSON.stringify(result.data.user));
+                            window.location.href = '/';
+                        } else {
+                            this.error = result.message || 'خطأ في إنشاء الحساب';
+                        }
+                    } catch (e) {
+                        this.error = 'حدث خطأ في الاتصال بالخادم';
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            }));
+        });
+    </script>
+</body>
+</html>
