diff --git a/src/components/Home/HomeLayouts/HmLayout2.jsx b/src/components/Home/HomeLayouts/HmLayout2.jsx
new file mode 100644
index 0000000..25a99b8
--- /dev/null
+++ b/src/components/Home/HomeLayouts/HmLayout2.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 HmLayout2({ className }) {
+  return (
+    <div>
+        <UpdateTable className="mb-10"/>
+        <TotalRecentHx className="mb-10"/> 
+    </div>
+  );
+}
diff --git a/src/components/Home/HomeLayouts/HmLayout3.jsx b/src/components/Home/HomeLayouts/HmLayout3.jsx
new file mode 100644
index 0000000..1f52e8a
--- /dev/null
+++ b/src/components/Home/HomeLayouts/HmLayout3.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 HmLayout3({ className }) {
+  return (
+    <div>
+        <TotalRecentHx className="mb-10"/> 
+        <TotalRecentHx className="mb-10"/> 
+    </div>
+  );
+}
diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx
index e806ad9..9efcbdf 100755
--- a/src/components/Home/index.jsx
+++ b/src/components/Home/index.jsx
@@ -1,18 +1,29 @@
 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 HmLayout1 from "./HomeLayouts/HmLayout1";
+import HmLayout2 from "./HomeLayouts/HmLayout2";
+import HmLayout3 from "./HomeLayouts/HmLayout3";
+
 
 export default function Home() {
     const trending = datas.datas;
-
+    const main_layout =JSON.parse( localStorage.getItem("layout") ); // need to make safer - check for type first
+    const recomended = main_layout.dash; // make safe 
     return (
         <Layout>
             <div className="home-page-wrapper">
-                <HmLayout1 />
+                {
+                  recomended=='33010'?(<HmLayout1 />):
+                  recomended=='33015'?(<HmLayout2 />):
+                  recomended=='33020'?(<HmLayout3 />):
+                  recomended=='33025'?(<HmLayout1 />):
+                  recomended=='33030'?(<HmLayout3 />):
+                  recomended=='33035'?(<HmLayout2 />):
+                  recomended=='33040'?(<HmLayout1 />):
+                  ''
+                }
             </div>
         </Layout>
     );