diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7778036..cc904ca 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,7 +4,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import '../styles/globals.css';
-import Header from '@components/layout/Header/Header';
+import Header from '@/src/components/layout/Header';
 
 export const metadata: Metadata = {
   title: 'Nguyễn Công PC - Cửa Hàng Máy Tính PC Đồ Hoạ - PC Gaming chuyên nghiệp',
diff --git a/src/app/page.tsx b/src/app/page.tsx
index eafe967..37c20cf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,10 @@
-import Image from 'next/image';
-import SliderHome from '@components/layout/homepage/SliderHome';
+import React from 'react';
+import Home from '@components/layout/home';
 
-export default function Home() {
+export default function Homepage() {
   return (
-    <div className="page-hompage mt-4">
-      <div className="container">
-        {/* slider */}
-        <SliderHome />
-      </div>
-    </div>
+    <>
+      <Home />
+    </>
   );
 }
diff --git a/src/components/layout/Header/HeaderBottomRight.tsx b/src/components/layout/Header/HeaderBottom/HeaderBottomRight.tsx
similarity index 98%
rename from src/components/layout/Header/HeaderBottomRight.tsx
rename to src/components/layout/Header/HeaderBottom/HeaderBottomRight.tsx
index 970d585..9e89de9 100644
--- a/src/components/layout/Header/HeaderBottomRight.tsx
+++ b/src/components/layout/Header/HeaderBottom/HeaderBottomRight.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { menuData } from './menuData'; // Đảm bảo file này export menuData
+import { menuData } from '../menuData'; // Đảm bảo file này export menuData
 import Link from 'next/link';
 import { FaCaretDown } from 'react-icons/fa';
 
diff --git a/src/components/layout/Header/HeaderBottom.tsx b/src/components/layout/Header/HeaderBottom/index.tsx
similarity index 98%
rename from src/components/layout/Header/HeaderBottom.tsx
rename to src/components/layout/Header/HeaderBottom/index.tsx
index 2cf5956..a3cc91b 100644
--- a/src/components/layout/Header/HeaderBottom.tsx
+++ b/src/components/layout/Header/HeaderBottom/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { FaBars } from 'react-icons/fa';
-import { menuData } from './menuData';
+import { menuData } from '../menuData';
 import Image from 'next/image';
 import Link from 'next/link';
 import HeaderBottomRight from './HeaderBottomRight';
diff --git a/src/components/layout/Header/HeaderMid.tsx b/src/components/layout/Header/HeaderMid/index.tsx
similarity index 100%
rename from src/components/layout/Header/HeaderMid.tsx
rename to src/components/layout/Header/HeaderMid/index.tsx
diff --git a/src/components/layout/Header/HeaderTop.tsx b/src/components/layout/Header/HeaderTop/index.tsx
similarity index 100%
rename from src/components/layout/Header/HeaderTop.tsx
rename to src/components/layout/Header/HeaderTop/index.tsx
diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/index.tsx
similarity index 100%
rename from src/components/layout/Header/Header.tsx
rename to src/components/layout/Header/index.tsx
diff --git a/src/components/layout/home/BoxDeal/BoxProductDeal.tsx b/src/components/layout/home/BoxDeal/BoxProductDeal.tsx
new file mode 100644
index 0000000..6ff7fe3
--- /dev/null
+++ b/src/components/layout/home/BoxDeal/BoxProductDeal.tsx
@@ -0,0 +1,34 @@
+'use client';
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import { FaCaretRight } from 'react-icons/fa';
+
+const BoxProductDeal: React.FC = () => {
+  return (
+    <div className="box-product-deal boder-radius-10">
+      <div className="box-title-deal flex items-center justify-between">
+        <div className="title-deal flex items-center justify-center gap-10">
+          <i className="sprite sprite-icon-deal-home"></i>
+          <h2 className="title font-bold">Giá tốt mỗi ngày</h2>
+          <span className="text-time-deal-home color-white fz-16 font-bold">Kết thúc sau</span>
+          <div className="global-time-deal flex items-center gap-6"></div>
+        </div>
+        <a href="/deal" className="button-deal color-white mb-10 flex items-center">
+          Xem thêm khuyến mãi <FaCaretRight size={16} />
+        </a>
+      </div>
+      <div className="box-list-item-deal swiper-box-deal">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={6}
+          loop={true}
+          navigation={true}
+        ></Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default BoxProductDeal;
diff --git a/src/components/layout/homepage/SliderHome.tsx b/src/components/layout/home/SliderHome.tsx
similarity index 100%
rename from src/components/layout/homepage/SliderHome.tsx
rename to src/components/layout/home/SliderHome.tsx
diff --git a/src/components/layout/homepage/bannerData.ts b/src/components/layout/home/bannerData.ts
similarity index 100%
rename from src/components/layout/homepage/bannerData.ts
rename to src/components/layout/home/bannerData.ts
diff --git a/src/components/layout/home/index.tsx b/src/components/layout/home/index.tsx
new file mode 100644
index 0000000..5d0a1d7
--- /dev/null
+++ b/src/components/layout/home/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import SliderHome from './SliderHome';
+import BoxProductDeal from './BoxDeal/BoxProductDeal';
+const Home = () => {
+  return (
+    <div className="page-hompage mt-4">
+      <div className="container">
+        {/* slider */}
+        <SliderHome />
+        {/* deal */}
+        <BoxProductDeal />
+      </div>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/components/layout/homepage/BoxProductDeal.tsx b/src/components/layout/homepage/BoxProductDeal.tsx
deleted file mode 100644
index f484154..0000000
--- a/src/components/layout/homepage/BoxProductDeal.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-
-const BoxProductDeal: React.FC = () => {
-  return (
-    <div className="box-product-deal boder-radius-10">
-      <div className="box-title-deal d-flex align-items-center justify-content-between">
-        <div className="title-deal d-flex align-items-center justify-content-center gap-10">
-          <i className="sprite sprite-icon-deal-home"></i>
-          <h2 className="title font-weight-800">Giá tốt mỗi ngày</h2>
-          <span className="text-time-deal-home color-white fz-16 font-weight-700">
-            Kết thúc sau
-          </span>
-          <div className="global-time-deal d-flex align-items-center gap-6"></div>
-        </div>
-        <a href="/deal" className="button-deal color-white mb-10">
-          Xem thêm khuyến mãi <i className="fa-solid fa-caret-right"></i>
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default BoxProductDeal;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 40b12de..bde4744 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2174,6 +2174,7 @@ textarea::placeholder {
 .page-hompage .box-product-deal {
   padding: 12px;
   margin: 20px 0;
+  background: linear-gradient(180deg, #ee1100 0%, #000000 100%);
 }
 .page-hompage .box-product-deal .title-deal {
   margin-top: 10px;