diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..f89c308
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true
+};
+
+module.exports = nextConfig;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..56fd041
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "booking-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "13.5.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.5.9",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "typescript": "5.2.2"
+  }
+}
diff --git a/src/components/AccountModal.tsx b/src/components/AccountModal.tsx
new file mode 100644
index 0000000..104708d
--- /dev/null
+++ b/src/components/AccountModal.tsx
@@ -0,0 +1,176 @@
+import { FormEvent, useEffect, useState } from 'react';
+import { useAuth } from '../hooks/useAuth';
+import { useBookingFlow } from '../hooks/useBookingFlow';
+
+export function AccountModal() {
+  const { login } = useAuth();
+  const {
+    isAccountModalOpen,
+    closeAccountModal,
+    openBookingFlow,
+    setAuthNotification,
+    authNotification
+  } = useBookingFlow();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [showReset, setShowReset] = useState(false);
+  const [resetEmail, setResetEmail] = useState('');
+  const [isResetting, setResetting] = useState(false);
+
+  useEffect(() => {
+    if (!isAccountModalOpen) {
+      setShowReset(false);
+      setError(null);
+      setResetEmail('');
+      setSubmitting(false);
+      setResetting(false);
+      setAuthNotification(null);
+    }
+  }, [isAccountModalOpen, setAuthNotification]);
+
+  if (!isAccountModalOpen) {
+    return null;
+  }
+
+  const handleLogin = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+
+    try {
+      await login(email, password);
+      setAuthNotification(null);
+      closeAccountModal();
+      openBookingFlow();
+    } catch (loginError) {
+      setError(loginError instanceof Error ? loginError.message : 'حدث خطأ غير متوقع.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleResetPassword = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setResetting(true);
+
+    try {
+      const response = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ email: resetEmail })
+      });
+
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        throw new Error(body.error ?? 'تعذّر إرسال رسالة استرجاع كلمة المرور.');
+      }
+
+      setAuthNotification('تم إرسال رسالة استرجاع كلمة المرور إلى بريدك الإلكتروني.');
+      setShowReset(false);
+      setResetEmail('');
+    } catch (resetError) {
+      setError(resetError instanceof Error ? resetError.message : 'تعذّر إرسال الرسالة.');
+    } finally {
+      setResetting(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" role="dialog" aria-modal="true">
+      <div className="modal">
+        {showReset ? (
+          <>
+            <h2>استعادة كلمة المرور</h2>
+            <p>أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين.</p>
+            <form onSubmit={handleResetPassword}>
+              <div className="input-group">
+                <label htmlFor="reset-email">البريد الإلكتروني</label>
+                <input
+                  id="reset-email"
+                  type="email"
+                  value={resetEmail}
+                  onChange={(event) => setResetEmail(event.target.value)}
+                  required
+                />
+              </div>
+              {error && <div className="alert" role="alert">{error}</div>}
+              <div className="modal-actions">
+                <button className="secondary-button" type="button" onClick={() => setShowReset(false)}>
+                  رجوع
+                </button>
+                <button type="submit" disabled={isResetting}>
+                  {isResetting ? 'جاري الإرسال...' : 'أرسل الرابط'}
+                </button>
+              </div>
+            </form>
+          </>
+        ) : (
+          <>
+            <h2>تسجيل الدخول</h2>
+            {authNotification && (
+              <div className="alert" role="status">
+                {authNotification}
+              </div>
+            )}
+            <form onSubmit={handleLogin}>
+              <div className="input-group">
+                <label htmlFor="login-email">البريد الإلكتروني</label>
+                <input
+                  id="login-email"
+                  type="email"
+                  value={email}
+                  onChange={(event) => setEmail(event.target.value)}
+                  required
+                />
+              </div>
+              <div className="input-group">
+                <label htmlFor="login-password">كلمة المرور</label>
+                <input
+                  id="login-password"
+                  type="password"
+                  value={password}
+                  onChange={(event) => setPassword(event.target.value)}
+                  required
+                />
+              </div>
+              {error && <div className="alert" role="alert">{error}</div>}
+              <div className="modal-actions">
+                <button className="secondary-button" type="button" onClick={closeAccountModal}>
+                  إغلاق
+                </button>
+                <button type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? 'جاري الدخول...' : 'دخول'}
+                </button>
+              </div>
+            </form>
+            <div style={{ marginTop: '1rem', textAlign: 'center' }}>
+              <button
+                type="button"
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: '#3358f4',
+                  fontSize: '0.95rem',
+                  cursor: 'pointer'
+                }}
+                onClick={() => {
+                  setError(null);
+                  setAuthNotification(null);
+                  setShowReset(true);
+                  setResetEmail(email);
+                }}
+              >
+                نسيت الرقم السري؟
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BookingModal.tsx b/src/components/BookingModal.tsx
new file mode 100644
index 0000000..23d68b4
--- /dev/null
+++ b/src/components/BookingModal.tsx
@@ -0,0 +1,53 @@
+import { FormEvent, useState } from 'react';
+import { useAuth } from '../hooks/useAuth';
+import { useBookingFlow } from '../hooks/useBookingFlow';
+
+export function BookingModal() {
+  const { user } = useAuth();
+  const { isBookingModalOpen, closeBookingModal } = useBookingFlow();
+  const [details, setDetails] = useState('');
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [confirmation, setConfirmation] = useState<string | null>(null);
+
+  if (!isBookingModalOpen) {
+    return null;
+  }
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setSubmitting(true);
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    setConfirmation('تم استلام حجزك وسيتم التواصل معك قريباً.');
+    setSubmitting(false);
+  };
+
+  return (
+    <div className="modal-backdrop" role="dialog" aria-modal="true">
+      <div className="modal">
+        <h2>نموذج الحجز</h2>
+        <p>مرحباً {user?.name ?? 'بالعميل'}! أخبرنا بالمزيد عن طلبك.</p>
+        <form onSubmit={handleSubmit}>
+          <div className="input-group">
+            <label htmlFor="booking-details">تفاصيل الخدمة</label>
+            <textarea
+              id="booking-details"
+              style={{ minHeight: '120px', padding: '0.75rem', borderRadius: '8px', border: '1px solid #d0d0d0' }}
+              value={details}
+              onChange={(event) => setDetails(event.target.value)}
+              required
+            />
+          </div>
+          {confirmation && <div className="alert" role="status">{confirmation}</div>}
+          <div className="modal-actions">
+            <button className="secondary-button" type="button" onClick={closeBookingModal}>
+              إغلاق
+            </button>
+            <button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? 'جاري الإرسال...' : 'إرسال الطلب'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
new file mode 100644
index 0000000..33a5528
--- /dev/null
+++ b/src/context/AuthContext.tsx
@@ -0,0 +1,58 @@
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  name?: string;
+}
+
+interface AuthContextValue {
+  user: AuthUser | null;
+  isAuthenticated: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+
+  const login = useCallback(async (email: string, password: string) => {
+    if (!email || !password) {
+      throw new Error('يجب إدخال البريد الإلكتروني وكلمة المرور.');
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    setUser({
+      id: 'demo-user',
+      email,
+      name: email.split('@')[0] ?? 'عميل'
+    });
+  }, []);
+
+  const logout = useCallback(() => {
+    setUser(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      user,
+      isAuthenticated: Boolean(user),
+      login,
+      logout
+    }),
+    [login, logout, user]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuthContext() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuthContext must be used within an AuthProvider');
+  }
+  return context;
+}
diff --git a/src/context/BookingFlowContext.tsx b/src/context/BookingFlowContext.tsx
new file mode 100644
index 0000000..8ba2159
--- /dev/null
+++ b/src/context/BookingFlowContext.tsx
@@ -0,0 +1,78 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from 'react';
+import { useAuthContext } from './AuthContext';
+
+interface BookingFlowContextValue {
+  openBookingFlow: () => void;
+  isAccountModalOpen: boolean;
+  isBookingModalOpen: boolean;
+  closeAccountModal: () => void;
+  closeBookingModal: () => void;
+  setAuthNotification: (message: string | null) => void;
+  authNotification: string | null;
+}
+
+const BookingFlowContext = createContext<BookingFlowContextValue | undefined>(undefined);
+
+export function BookingFlowProvider({ children }: { children: ReactNode }) {
+  const { isAuthenticated } = useAuthContext();
+  const [isAccountModalOpen, setAccountModalOpen] = useState(false);
+  const [isBookingModalOpen, setBookingModalOpen] = useState(false);
+  const [authNotification, setAuthNotification] = useState<string | null>(null);
+
+  const openBookingFlow = useCallback(() => {
+    if (!isAuthenticated) {
+      setAuthNotification(null);
+      setBookingModalOpen(false);
+      setAccountModalOpen(true);
+    } else {
+      setAccountModalOpen(false);
+      setAuthNotification(null);
+      setBookingModalOpen(true);
+    }
+  }, [isAuthenticated]);
+
+  const closeAccountModal = useCallback(() => {
+    setAccountModalOpen(false);
+  }, []);
+
+  const closeBookingModal = useCallback(() => {
+    setBookingModalOpen(false);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      openBookingFlow,
+      isAccountModalOpen,
+      isBookingModalOpen,
+      closeAccountModal,
+      closeBookingModal,
+      setAuthNotification,
+      authNotification
+    }),
+    [
+      authNotification,
+      closeAccountModal,
+      closeBookingModal,
+      isAccountModalOpen,
+      isBookingModalOpen,
+      openBookingFlow
+    ]
+  );
+
+  return <BookingFlowContext.Provider value={value}>{children}</BookingFlowContext.Provider>;
+}
+
+export function useBookingFlowContext() {
+  const context = useContext(BookingFlowContext);
+  if (!context) {
+    throw new Error('useBookingFlowContext must be used within a BookingFlowProvider');
+  }
+  return context;
+}
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
new file mode 100644
index 0000000..8d30b8e
--- /dev/null
+++ b/src/hooks/useAuth.ts
@@ -0,0 +1,5 @@
+import { useAuthContext } from '../context/AuthContext';
+
+export function useAuth() {
+  return useAuthContext();
+}
diff --git a/src/hooks/useBookingFlow.ts b/src/hooks/useBookingFlow.ts
new file mode 100644
index 0000000..8dc7db0
--- /dev/null
+++ b/src/hooks/useBookingFlow.ts
@@ -0,0 +1,5 @@
+import { useBookingFlowContext } from '../context/BookingFlowContext';
+
+export function useBookingFlow() {
+  return useBookingFlowContext();
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 0000000..9a92402
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,18 @@
+import type { AppProps } from 'next/app';
+import { AuthProvider } from '../context/AuthContext';
+import { BookingFlowProvider } from '../context/BookingFlowContext';
+import { AccountModal } from '../components/AccountModal';
+import { BookingModal } from '../components/BookingModal';
+import '../styles/globals.css';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <AuthProvider>
+      <BookingFlowProvider>
+        <Component {...pageProps} />
+        <AccountModal />
+        <BookingModal />
+      </BookingFlowProvider>
+    </AuthProvider>
+  );
+}
diff --git a/src/pages/api/auth/reset-password.ts b/src/pages/api/auth/reset-password.ts
new file mode 100644
index 0000000..0b28ba6
--- /dev/null
+++ b/src/pages/api/auth/reset-password.ts
@@ -0,0 +1,29 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+interface ResetPasswordResponse {
+  success?: boolean;
+  message?: string;
+  error?: string;
+}
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse<ResetPasswordResponse>
+) {
+  if (request.method !== 'POST') {
+    response.setHeader('Allow', 'POST');
+    return response.status(405).json({ error: 'Method Not Allowed' });
+  }
+
+  const { email } = request.body ?? {};
+
+  if (typeof email !== 'string' || email.trim() === '') {
+    return response.status(400).json({ error: 'البريد الإلكتروني مطلوب.' });
+  }
+
+  await new Promise((resolve) => setTimeout(resolve, 200));
+
+  console.info(`Password reset requested for ${email}`);
+
+  return response.status(200).json({ success: true, message: 'تم إرسال البريد بنجاح.' });
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..a14e766
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,24 @@
+import Head from 'next/head';
+import { useBookingFlow } from '../hooks/useBookingFlow';
+
+export default function Home() {
+  const { openBookingFlow } = useBookingFlow();
+
+  return (
+    <>
+      <Head>
+        <title>منصة الخدمات المنزلية</title>
+      </Head>
+      <main>
+        <section style={{ maxWidth: '720px', margin: '0 auto', textAlign: 'center' }}>
+          <h1>احجز خدمتك المنزلية خلال دقائق</h1>
+          <p>
+            نوفر لك فريقاً محترفاً من المختصين في التنظيف والصيانة والحدائق وغيرها. اختر الخدمة
+            المناسبة وسنكون عند بابك في أقرب وقت.
+          </p>
+          <button onClick={openBookingFlow}>ابدأ الحجز الآن</button>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/pages/services/cleaning.tsx b/src/pages/services/cleaning.tsx
new file mode 100644
index 0000000..5646279
--- /dev/null
+++ b/src/pages/services/cleaning.tsx
@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import { useBookingFlow } from '../../hooks/useBookingFlow';
+
+export default function CleaningService() {
+  const { openBookingFlow } = useBookingFlow();
+
+  return (
+    <>
+      <Head>
+        <title>تنظيف المنازل - منصة الخدمات المنزلية</title>
+      </Head>
+      <main>
+        <article style={{ maxWidth: '760px', margin: '0 auto' }}>
+          <h1>تنظيف المنازل</h1>
+          <p>
+            استمتع بمنزل نظيف ومنظم مع فريقنا المتخصص في تنظيف الأسطح، الأثاث، والمطابخ باستخدام أفضل
+            المواد الصديقة للبيئة.
+          </p>
+          <button onClick={openBookingFlow}>احجز جلسة تنظيف</button>
+          <p style={{ marginTop: '1.5rem' }}>
+            <Link href="/">العودة إلى الرئيسية</Link>
+          </p>
+        </article>
+      </main>
+    </>
+  );
+}
diff --git a/src/pages/services/maintenance.tsx b/src/pages/services/maintenance.tsx
new file mode 100644
index 0000000..8225d3b
--- /dev/null
+++ b/src/pages/services/maintenance.tsx
@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import { useBookingFlow } from '../../hooks/useBookingFlow';
+
+export default function MaintenanceService() {
+  const { openBookingFlow } = useBookingFlow();
+
+  return (
+    <>
+      <Head>
+        <title>صيانة المنازل - منصة الخدمات المنزلية</title>
+      </Head>
+      <main>
+        <article style={{ maxWidth: '760px', margin: '0 auto' }}>
+          <h1>صيانة المنازل</h1>
+          <p>
+            نقدّم خدمات صيانة شاملة تشمل الكهرباء، السباكة، والأجهزة المنزلية مع ضمان الجودة وسرعة
+            الاستجابة.
+          </p>
+          <button onClick={openBookingFlow}>احجز زيارة صيانة</button>
+          <p style={{ marginTop: '1.5rem' }}>
+            <Link href="/">العودة إلى الرئيسية</Link>
+          </p>
+        </article>
+      </main>
+    </>
+  );
+}
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..a3db1f5
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,97 @@
+:root {
+  color-scheme: light dark;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  margin: 0;
+  background: #f5f5f5;
+  color: #222;
+}
+
+main {
+  padding: 2rem;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  background: linear-gradient(135deg, #1d8cf8, #3358f4);
+  color: white;
+  transition: opacity 0.2s ease;
+}
+
+button:hover {
+  opacity: 0.9;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.modal {
+  background: white;
+  color: #222;
+  padding: 2rem;
+  border-radius: 12px;
+  width: min(90vw, 420px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+}
+
+.modal h2 {
+  margin-top: 0;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+input[type="email"],
+input[type="password"],
+input[type="text"] {
+  padding: 0.65rem 0.75rem;
+  border: 1px solid #d0d0d0;
+  border-radius: 8px;
+  font-size: 0.95rem;
+}
+
+a {
+  color: #3358f4;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.alert {
+  background: #e6f4ea;
+  color: #1e4620;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+
+.secondary-button {
+  background: #f0f1f7;
+  color: #1a1c2d;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5eaaec2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "types": ["node"]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}