diff --git a/src/app/(main)/dang-ky/page.tsx b/src/app/(main)/dang-ky/page.tsx
new file mode 100644
index 0000000..4077c96
--- /dev/null
+++ b/src/app/(main)/dang-ky/page.tsx
@@ -0,0 +1,15 @@
+
+import RegisterPage from "@/components/customer/Register"
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+    title: "Đăng nhập tài khoản",
+    description: "",
+};
+
+import "@/styles/customer.css";
+
+export default function Home() {
+    return (
+        <RegisterPage />
+    )
+}
diff --git a/src/app/(main)/dang-nhap/page.tsx b/src/app/(main)/dang-nhap/page.tsx
new file mode 100644
index 0000000..1c3c226
--- /dev/null
+++ b/src/app/(main)/dang-nhap/page.tsx
@@ -0,0 +1,15 @@
+
+import LoginPage from "@/components/customer/Login";
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+    title: "Đăng nhập tài khoản",
+    description: "",
+};
+
+import "@/styles/customer.css";
+
+export default function Home() {
+    return (
+        <LoginPage />
+    )
+}
diff --git a/src/components/customer/Login.tsx b/src/components/customer/Login.tsx
new file mode 100644
index 0000000..954a1c6
--- /dev/null
+++ b/src/components/customer/Login.tsx
@@ -0,0 +1,94 @@
+'use client';
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from 'next/navigation';
+
+export default function LoginPage() {
+    const router = useRouter();
+
+    const [ hidePass, setHidePass ] = useState(false);
+
+    const [ email, setEmail ] = useState('');
+    const [ password, setPassword ] = useState('');
+    const [ error, setError ] = useState('');
+
+    const handleLogin = () => {
+        console.log('email: ', email);
+        console.log('password: ', password);
+
+        if (
+            email === 'admin@mail.com' && 
+            password === '123456'
+        ) {
+            setError('');
+
+            router.push('/taikhoan');
+
+        } else {
+            setError('Email hoặc mật khẩu không đúng!');
+        }
+
+    }
+
+    return (
+        <div className="customer-page container p-10">
+            <div className="customer-content-group">
+                <div className="text-center title text-18 font-600">
+                    <Link href="/dang-ky" className="mr-5">ĐĂNG KÝ</Link>
+                    <Link href="/dang-nhap" className="current">ĐĂNG NHẬP</Link>
+                </div>
+
+                <div className="customer-form">
+                    <div className="item">
+                        <p>Email<span className="red">*</span></p>
+                        <input 
+                            type="email" 
+                            name="email" 
+                            value={email}
+                            onChange={ (e) => setEmail(e.target.value) }
+                            required 
+                        />                        
+                    </div>
+
+                    <div className="item">
+                        <p>Mật khẩu<span className="red">*</span></p>
+                        <div className="position-relative">
+                            <input 
+                                type={`${hidePass ? 'text' : 'password'}`}
+                                className="input-pass" 
+                                name="password" 
+                                value={password}
+                                onChange={ (e) => setPassword(e.target.value) }
+                                required 
+                            />
+                            <button 
+                                type="button"
+                                onClick={ () => setHidePass(!hidePass) }
+                                className="show-pass bx bx-eye-big" 
+                            />
+                        </div>
+                    </div>
+
+                    { error && 
+                        <span className="d-block w-100 mt-2 red">{error}</span>
+                    }                    
+
+                    <div className="text-right mt-2 mb-2">
+                        <Link 
+                            href="/quen-mat-khau" 
+                            style={{ color: '#208ce8' }}
+                        > Quên mật khẩu? </Link>
+                    </div>
+                    
+                    <button 
+                        type="button" 
+                        onClick={handleLogin} 
+                        className="bg-red font-600 text-18 text-white d-block btn-regis"
+                    >
+                        ĐĂNG NHẬP
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/customer/Register.tsx b/src/components/customer/Register.tsx
new file mode 100644
index 0000000..8b1f0a4
--- /dev/null
+++ b/src/components/customer/Register.tsx
@@ -0,0 +1,79 @@
+'use client';
+import Link from "next/link";
+import { useState } from "react";
+
+export default function RegisterPage() {
+    const [ hidePass, setHidePass ] = useState(false);
+    const [ hideConfirmPass, setHideConfirmPass ] = useState(false);
+
+    return (
+        <div className="customer-page container p-10">
+            <div className="customer-content-group">
+                <div className="text-center title text-18 font-600">
+                    <Link href="/dang-ky" className="current mr-5">ĐĂNG KÝ</Link>
+                    <Link href="/dang-nhap">ĐĂNG NHẬP</Link>
+                </div>
+                
+                <div className="customer-form">
+                    <form encType="multipart/form-data">
+                        <div className="item">
+                            <p>Họ và Tên<span className="red">*</span></p>
+                            <input type="text" name="info[full_name]" id="full_name" />
+                        </div>
+                        <div className="item">
+                            <p>Số điện thoại<span className="red">*</span></p>
+                            <input type="text" name="info[tel]" id="tel" />
+                        </div>
+                        <div className="item">
+                            <p>Địa chỉ<span className="red">*</span></p>
+                            <input type="text" name="info[address]" id="address" />
+                        </div>
+                        <div className="item">
+                            <p>Email<span className="red">*</span></p>
+                            <input type="text" name="info[email]" id="email" />
+                        </div>
+                        <div className="item">
+                            <p>Mật khẩu<span className="red">*</span></p>
+                            <div className="position-relative">
+                                <input 
+                                    type={`${hidePass ? 'text' : 'password'}`} 
+                                    className="input-pass" 
+                                    name="info[password]" 
+                                    id="password" 
+                                />
+
+                                <button 
+                                    type="button"
+                                    onClick={ () => setHidePass(!hidePass) }
+                                    className="show-pass bx bx-eye-big" 
+                                />
+                            </div>
+                        </div>
+
+                        <div className="item">
+                            <p>Nhập lại mật khẩu<span className="red">*</span></p>
+                            <div className="position-relative">
+                                <input 
+                                    type={`${hideConfirmPass ? 'text' : 'password'}`} 
+                                    className="input-pass" 
+                                    name="info[confirm_password]" 
+                                    id="confirm_password" 
+                                />
+                                
+                                <button 
+                                    type="button"
+                                    onClick={ () => setHideConfirmPass(!hideConfirmPass) }
+                                    className="show-pass bx bx-eye-big" 
+                                />
+                            </div>
+                            <span className="d-block w-100 red" id="js-pass-alert" />
+                        </div>
+                        
+                        <button type="button" className="bg-red font-600 text-18 text-white d-block btn-regis mt-3">ĐĂNG KÝ</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+    );
+}
\ No newline at end of file
diff --git a/src/components/other/Header/Search.tsx b/src/components/other/Header/Search.tsx
index 918da03..5bf41f8 100644
--- a/src/components/other/Header/Search.tsx
+++ b/src/components/other/Header/Search.tsx
@@ -2,11 +2,25 @@ export default function Search(){
     return(
         <div className="header-search-group w-[440px] relative">
             <form method="get" action="/tim" name="search" className="flex items-center justify-between p-[6px] pl-5 bg-white rounded-[30px]">
-                <input type="text" id="js-global-search" name="q" placeholder="Nhập từ khóa tìm kiếm" defaultValue="" autoComplete="off" className="w-[calc(100%_-_36px)] pr-3 placeholder:!text-[#5F5F5F] placeholder:!text-[14px] h-9" />
-                <button type="button" id="js-search-btn" aria-labelledby="js-global-search" className="bg-linear rounded-full w-9 h-9"><i className="block !w-full !h-full icons icon-search"></i></button>
+                <input 
+                    type="text" 
+                    name="q" 
+                    placeholder="Nhập từ khóa tìm kiếm" 
+                    defaultValue="" 
+                    autoComplete="off" 
+                    className="w-[calc(100%_-_36px)] pr-3 placeholder:!text-[#5F5F5F] placeholder:!text-[14px] h-9" 
+                />
+
+                <button 
+                    type="submit"
+                    aria-labelledby="js-global-search" 
+                    className="bg-linear rounded-full w-9 h-9"
+                >
+                    <i className="block !w-full !h-full icons icon-search"></i>
+                </button>
             </form>
 
-            <div className="autocomplete-suggestions" id="js-search-holder"> </div>
+            <div className="autocomplete-suggestions"> </div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/data/customers/index.tsx b/src/data/customers/index.tsx
new file mode 100644
index 0000000..efe620a
--- /dev/null
+++ b/src/data/customers/index.tsx
@@ -0,0 +1,246 @@
+export const CustomerInfo = [
+    {
+        "id": 7323,
+        "name": "Hurasoft Đức",
+        "emailVerify": 0,
+        "email": "ducdt@hurasoft.com",
+        "type": "register",
+        "tel": "0987654231",
+        "mobile": "0987876213",
+        "address": "số 3 ngõ 18 thái hà",
+        "province": 1,
+        "province_name": "Hà Nội",
+        "district": 1,
+        "district_name": "Ba Đình",
+        "birthday": "23-05",
+        "birthyear": "1995",
+        "sex": "male",
+        "loyalty_point": "0",
+        "loyalty_level": "0",
+        "avatar": "https://hoanghapccdn.com/media/avatar/default-avatar.jpg",
+        "review": [
+            {
+                "id": 8762,
+                "item_type": "product",
+                "item_id": 6434,
+                "people_like_count": 0,
+                "people_dislike_count": 0,
+                "reply_count": 0,
+                "is_user_admin": "0",
+                "user_avatar": "",
+                "user_name": "Hurasoft Đức - SĐT: 0987876213",
+                "rate": "4",
+                "title": "HH AI PC DUAL RTX PRO 5000 BLACKWELL 48GB | THREADRIPPER 9960X | 256GB",
+                "content": "account test rating",
+                "files": [
+                    "https://hoanghapccdn.com/media/product/6729_aorus_c500_glass_ha1.jpg",
+                    "https://hoanghapccdn.com/media/product/6729_aorus_c500_glass_ha3.jpg",
+                    "https://hoanghapccdn.com/media/product/6729_aorus_c500_glass_ha4.jpg"
+                ],
+                "approved": 1,
+                "post_time": 1761027763,
+                "new_replies": [
+                    {
+                        "id": 742,
+                        "comment_id": 8760,
+                        "user_avatar": "0",
+                        "user_name": "Hurasoft \u0110\u1ee9c",
+                        "is_user_admin": 1,
+                        "people_like_count": 0,
+                        "approved": 1,
+                        "people_dislike_count": 0,
+                        "content": "admin test",
+                        "post_time": 1760331038
+                    }
+                ],
+                "product_info": {
+                    "id": 6434,
+                    "productName": "HH AI PC DUAL RTX PRO 5000 BLACKWELL 48GB | THREADRIPPER 9960X | 256GB",
+                    "productSummary": `<p>CPU AMD Ryzen 9 9950X</p>`,
+                    "warranty": "12 tháng                ",
+                    "productUrl": "/pcai-dual-rtx-pro-5000-threadripper-9960x-256gb",
+                    "quantity": 1,
+                    "productSKU": "HuraSKU-01",
+                    "productImage": {
+                        "small": "https://hoanghapccdn.com/media/product/75_6729_aorus_c500_glass_ha1.jpg",
+                        "large": "https://hoanghapccdn.com/media/product/250_6729_aorus_c500_glass_ha1.jpg",
+                        "original": ""
+                    },
+                    "review": {
+                        "rate": 3,
+                        "total": 3
+                    },
+                    "comment": {
+                        "rate": 3,
+                        "total": 2
+                    }
+                }
+            },
+            {
+                "id": 8762,
+                "item_type": "product",
+                "item_id": 6434,
+                "people_like_count": 0,
+                "people_dislike_count": 0,
+                "reply_count": 0,
+                "is_user_admin": "0",
+                "user_avatar": "",
+                "user_name": "Hurasoft Đức - SĐT: 0987876213",
+                "rate": "4",
+                "title": "HuraSoft - Sản phẩm test (Không xóa)",
+                "content": "account test rating",
+                "files": [],
+                "approved": 1,
+                "post_time": 1761027763,
+                "new_replies": [
+                    {
+                        "id": 742,
+                        "comment_id": 8760,
+                        "user_avatar": "0",
+                        "user_name": "Hurasoft \u0110\u1ee9c",
+                        "is_user_admin": 1,
+                        "people_like_count": 0,
+                        "approved": 1,
+                        "people_dislike_count": 0,
+                        "content": "admin test",
+                        "post_time": 1760331038
+                    }
+                ],
+                "product_info": {
+                    "id": 6434,
+                    "productName": "HuraSoft - Sản phẩm test (Không xóa)",
+                    "productSummary": `<p>CPU AMD Ryzen 9 9950X</p>`,
+                    "warranty": "12 tháng                ",
+                    "productUrl": "/hurasoft-san-pham-test-khong-xoa",
+                    "quantity": 1,
+                    "productSKU": "HuraSKU-01",
+                    "productImage": {
+                        "small": "https://hoanghapccdn.com/media/product/75_6729_aorus_c500_glass_ha1.jpg",
+                        "large": "https://hoanghapccdn.com/media/product/250_6729_aorus_c500_glass_ha1.jpg",
+                        "original": ""
+                    },
+                    "review": {
+                        "rate": 3,
+                        "total": 3
+                    },
+                    "comment": {
+                        "rate": 3,
+                        "total": 2
+                    }
+                }
+            },
+        ],
+        "comment": [
+            {
+                "id": 8762,
+                "item_type": "product",
+                "item_id": 6434,
+                "people_like_count": 0,
+                "people_dislike_count": 0,
+                "reply_count": 0,
+                "is_user_admin": "0",
+                "user_avatar": "",
+                "user_name": "Hurasoft Đức - SĐT: 0987876213",
+                "rate": "4",
+                "title": "HH AI PC DUAL RTX PRO 5000 BLACKWELL 48GB | THREADRIPPER 9960X | 256GB",
+                "content": "account test rating",
+                "files": [
+                    "https://hoanghapccdn.com/media/product/6729_aorus_c500_glass_ha1.jpg",
+                    "https://hoanghapccdn.com/media/product/6729_aorus_c500_glass_ha3.jpg",
+                    "https://hoanghapccdn.com/media/product/6729_aorus_c500_glass_ha4.jpg"
+                ],
+                "approved": 1,
+                "post_time": 1761027763,
+                "new_replies": [
+                    {
+                        "id": 742,
+                        "comment_id": 8760,
+                        "user_avatar": "0",
+                        "user_name": "Hurasoft \u0110\u1ee9c",
+                        "is_user_admin": 1,
+                        "people_like_count": 0,
+                        "approved": 1,
+                        "people_dislike_count": 0,
+                        "content": "admin test",
+                        "post_time": 1760331038
+                    }
+                ],
+                "product_info": {
+                    "id": 6434,
+                    "productName": "HH AI PC DUAL RTX PRO 5000 BLACKWELL 48GB | THREADRIPPER 9960X | 256GB",
+                    "productSummary": `<p>CPU AMD Ryzen 9 9950X</p>`,
+                    "warranty": "12 tháng                ",
+                    "productUrl": "/pcai-dual-rtx-pro-5000-threadripper-9960x-256gb",
+                    "quantity": 1,
+                    "productSKU": "HuraSKU-01",
+                    "productImage": {
+                        "small": "https://hoanghapccdn.com/media/product/75_6729_aorus_c500_glass_ha1.jpg",
+                        "large": "https://hoanghapccdn.com/media/product/250_6729_aorus_c500_glass_ha1.jpg",
+                        "original": ""
+                    },
+                    "review": {
+                        "rate": 3,
+                        "total": 3
+                    },
+                    "comment": {
+                        "rate": 3,
+                        "total": 2
+                    }
+                }
+            },
+            {
+                "id": 8762,
+                "item_type": "product",
+                "item_id": 6434,
+                "people_like_count": 0,
+                "people_dislike_count": 0,
+                "reply_count": 0,
+                "is_user_admin": "0",
+                "user_avatar": "",
+                "user_name": "Hurasoft Đức - SĐT: 0987876213",
+                "rate": "4",
+                "title": "HuraSoft - Sản phẩm test (Không xóa)",
+                "content": "account test rating",
+                "files": [],
+                "approved": 1,
+                "post_time": 1761027763,
+                "new_replies": [
+                    {
+                        "id": 742,
+                        "comment_id": 8760,
+                        "user_avatar": "0",
+                        "user_name": "Hurasoft \u0110\u1ee9c",
+                        "is_user_admin": 1,
+                        "people_like_count": 0,
+                        "approved": 1,
+                        "people_dislike_count": 0,
+                        "content": "admin test",
+                        "post_time": 1760331038
+                    }
+                ],
+                "product_info": {
+                    "id": 6434,
+                    "productName": "HuraSoft - Sản phẩm test (Không xóa)",
+                    "productSummary": `<p>CPU AMD Ryzen 9 9950X</p>`,
+                    "warranty": "12 tháng                ",
+                    "productUrl": "/hurasoft-san-pham-test-khong-xoa",
+                    "quantity": 1,
+                    "productSKU": "HuraSKU-01",
+                    "productImage": {
+                        "small": "https://hoanghapccdn.com/media/product/75_6729_aorus_c500_glass_ha1.jpg",
+                        "large": "https://hoanghapccdn.com/media/product/250_6729_aorus_c500_glass_ha1.jpg",
+                        "original": ""
+                    },
+                    "review": {
+                        "rate": 3,
+                        "total": 3
+                    },
+                    "comment": {
+                        "rate": 3,
+                        "total": 2
+                    }
+                }
+            },
+        ]
+    }
+]
diff --git a/src/styles/customer.css b/src/styles/customer.css
new file mode 100644
index 0000000..8982646
--- /dev/null
+++ b/src/styles/customer.css
@@ -0,0 +1,54 @@
+.customer-page{padding:20px 6px}
+.customer-page a{color:#222}
+.customer-page .customer-content-group{max-width:825px;margin:20px auto;-webkit-box-shadow:0 0 7px 0 rgba(0,0,0,0.2);box-shadow:0 0 7px 0 rgba(0,0,0,0.2);background:#fff;padding:20px 0}
+.customer-page .customer-form{margin:auto;max-width:616px}
+.customer-page .customer-form p{margin:0}
+.customer-page .customer-form .item{margin-top:20px;font-weight:300}
+.customer-page .customer-form .item input{display:block;width:100%;border:1px solid #d7d7d7;padding:0 12px;height:42px;border-radius:5px;margin-top:5px}
+.customer-page .customer-form .show-pass{position:absolute;right:12px;top:13px}
+.customer-page .customer-form .capcha-item{width:304px}
+.customer-page .customer-form label{display:block;margin:20px 0;font-weight:300}
+.customer-page .title a{-webkit-transition:unset!important;transition:unset!important}
+.customer-page .title a.current,.customer-page .title a:hover{color:#1f82f5;border-bottom:1px solid #1f82f5}
+.customer-page .btn-regis{width:100%;height:46px;border:0;border-radius:6px;color:#fff;background:#1f82f5;}
+.customer-page .btn-login-group{font-size:18px;text-transform:uppercase;font-weight:600}
+.customer-page .btn-login-group a{color:#fff;background:#3b5998;padding:0 15px;margin-bottom:8px;border-radius:7px;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:46px}
+.customer-page .btn-login-group a:hover{background:#334c82}
+.customer-page .btn-login-group a:nth-child(2){background:#009dff;margin:0}
+.customer-page .btn-login-group a:nth-child(2):hover{background:#0880cc}
+.customer-page .btn-login-group i{margin-right:12px;font-size:28px}
+.customer-page .icon-zalo{background:url(/images/icon-zalo.png) no-repeat;background-position:center;background-size:contain}
+.customer-page .text{line-height:54px}
+.customer-page .text::before,.customer-page .text::after{content:'';border-top:1px solid #e1e1e1;position:absolute;left:0;right:0;top:23px}
+.customer-page .text::after{top:30px}
+.customer-page .text span{position:relative;padding:0 17px;z-index:1;background:#fff}
+.account-page a{color:#222}
+.account-page .global-breadcrumb{padding:12px 0}
+.account-page .col-left{width:303px;border-right:1px solid #f5f5f5;padding:24px 0}
+.account-page .col-right{width:calc(100% - 304px);padding:20px 0}
+.account-page .col-right a:hover{color:#472928}
+.account-page .left-title{padding:0 0 14px;width:calc(100% - 58px)}
+.account-page .icon-user{margin-right:10px;width:48px;height:48px;background:url(/images/sprite.png) no-repeat;background-position:-335px -200px}
+.account-page .title-list a{display:block;padding:10px 18px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.account-page .title-list a.active,.account-page .title-list a:hover{background:#f5f5f5}
+.account-page .title-list i{color:#888;margin-right:18px;width:24px;text-align:center;font-size:20px}
+.account-page .title-list span{width:calc(100% - 42px)}
+.account-page .info-page{max-width:720px;padding:0 8px}
+.account-page .info-page input,.account-page .info-page select{width:100%;padding-left:13px;border-radius:5px;border:1px solid #e1e1e1;height:38px;margin-bottom:8px}
+.account-page .info-page .radio-container{margin:13px 0}
+.account-page .btn-submit{width:160px;height:40px;color:#fff;border:0;border-radius:5px;font-size:16px;font-weight:500;margin:10px 0}
+.account-page .province{margin:0 36px 8px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;float:left}
+.account-page .province:first-child{width:370px}
+.account-page .province:last-child{margin-right:0;width:calc(100% - 406px)}
+.account-page .province p{width:150px;margin:0}
+.account-page .province select{width:calc(100% - 150px);margin:0}
+.account-page .order-page tr:hover td{background:#f4fbff}
+.account-page .order-page tr:first-child td{background:#fff!important;border-top:0}
+.account-page .order-page td{padding:15px 8px;border-top:1px solid #e1e1e1}
+.account-page .order-page a:hover{color:#D91605}
+.account-page .cart-send-info{padding:20px 15px;margin-top:12px;background:#f5f5f5;font-weight:300}
+.account-page .cart-send-info b{display:inline-block;width:185px;vertical-align:top}
+.account-page .cart-send-info span{display:inline-block;width:calc(100% - 189px)}
+.account-page .account-history-page{padding:0 8px}
+.account-page .account-history-holder{border-top:1px solid #f5f5f5;border-left:1px solid #f5f5f5}
+.account-page .account-history-holder .p-item{border-right:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5;width:25%;border-radius:0}
\ No newline at end of file