diff --git a/src/components/Home/HomeLayouts/HmLayout1.jsx b/src/components/Home/HomeLayouts/HmLayout1.jsx
new file mode 100644
index 0000000..a21ec52
--- /dev/null
+++ b/src/components/Home/HomeLayouts/HmLayout1.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import UpdateTable from "./../UpdateTable";
+import TotalRecentHx from "./../TotalRecentHx";
+
+export default function HmLayout1({ className }) {
+  return (
+    <div>
+        <TotalRecentHx className="mb-10"/> 
+        <UpdateTable className="mb-10"/>
+    </div>
+  );
+}
diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx
index 888ce7a..e806ad9 100755
--- a/src/components/Home/index.jsx
+++ b/src/components/Home/index.jsx
@@ -1,8 +1,10 @@
 import React from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
-import UpdateTable from "./UpdateTable";
-import TotalRecentHx from "./TotalRecentHx";
+// import UpdateTable from "./UpdateTable";
+// import TotalRecentHx from "./TotalRecentHx";
+
+import HmLayout1 from "./HomeLayouts/HmLayout1";
 
 export default function Home() {
     const trending = datas.datas;
@@ -10,8 +12,7 @@ export default function Home() {
     return (
         <Layout>
             <div className="home-page-wrapper">
-                <TotalRecentHx className="mb-10"/> 
-                <UpdateTable className="mb-10"/>
+                <HmLayout1 />
             </div>
         </Layout>
     );