diff --git a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
new file mode 100644
index 0000000..98ce3b0
--- /dev/null
+++ b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
@@ -0,0 +1,40 @@
+import "../../../styles/BrowseHome.scoped.scss";
+
+
+import React, { useContext } from "react";
+import AuthContext from "../../../context/AuthContext";
+
+import { Filter } from "./Filter";
+import { Items } from "./Items";
+
+const BrowseHome = () => {
+  const { user } = useContext(AuthContext);
+
+  return (
+    <>
+      <div className="main2 flex justify-center items-center ">
+
+        <div className="basis-1/4">
+    
+
+            {/* filter  */}
+            <Filter />
+
+        </div>
+
+        <div className="cards_container grow p-14">
+    
+    {/* other one */}
+
+    
+          <Items />
+
+
+
+        </div>
+      </div>
+    </>
+  );
+};
+
+export { BrowseHome };
diff --git a/frontend/src/components/Home/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/Filter.jsx
similarity index 62%
rename from frontend/src/components/Home/BrowseHome.jsx
rename to frontend/src/components/Home/BrowseHome/Filter.jsx
index 550e593..d99c686 100644
--- a/frontend/src/components/Home/BrowseHome.jsx
+++ b/frontend/src/components/Home/BrowseHome/Filter.jsx
@@ -1,23 +1,19 @@
-import "../../styles/BrowseHome.scoped.scss";
 
-import { Link } from "react-router-dom";
+import { anime_data, genres, year, studio } from "../../../data";
+import "../../../styles/BrowseHome.scoped.scss";
 
-import React, { useContext } from "react";
-import AuthContext from "../../context/AuthContext";
 
-// data
-import { anime_data, genres, year, studio } from "../../data";
+const Filter = () => {
+    
 
-const BrowseHome = () => {
-  const { user } = useContext(AuthContext);
-
-  return (
-    <>
-      <div className="main2 flex justify-center items-center ">
+    
+   return <>
+        
         {/* 
 // TODO , and with data we get in search, we need to pass and send it to BE. but dont bother. wait first BE to finish what they have ...
         */}
-        <div className="basis-1/4">
+
+
           <div className="filter flex flex-col border-2 border-pinky m-6 ">
             <h1 className="self-center m-4 mt-8 ">Browse</h1>
 
@@ -87,37 +83,8 @@ const BrowseHome = () => {
               Submit
             </button>
           </div>
-        </div>
-
-        <div className="cards_container grow p-14">
-          <div className="  grid grid-cols-4 gap-x-6 gap-y-6  grow ">
-            {/*individual card. for anime it shows */}
-            {anime_data.map((item) => (
-              <Link
-                to="/detailspage"
-                state={{ id: item.anime_id, anime: true }}
-                key={item.anime_id}
-              >
-                <div className="card">
-                  <div className="card_img">
-                    <img src={item.image} />
-                  </div>
-
-                  <div className="flex flex-row gap-x-2 mt-3">
-                    {/* check index.css, for global use, vertical rectangle.. */}
-
-                    <p className="title8 secondary-left-line">{item.title}</p>
-
-                    {/*TODO you add favorite button, and for it to work properly */}
-                  </div>
-                </div>
-              </Link>
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
+        
+   </> 
+} 
 
-export { BrowseHome };
+export {Filter};
\ No newline at end of file
diff --git a/frontend/src/components/Home/BrowseHome/Items.jsx b/frontend/src/components/Home/BrowseHome/Items.jsx
new file mode 100644
index 0000000..653bf6f
--- /dev/null
+++ b/frontend/src/components/Home/BrowseHome/Items.jsx
@@ -0,0 +1,42 @@
+
+import { anime_data, genres, year, studio } from "../../../data";
+import "../../../styles/BrowseHome.scoped.scss";
+
+import { Link } from "react-router-dom";
+
+const Items = () => {
+    
+
+    
+   return <>
+
+          <div className="  grid grid-cols-4 gap-x-6 gap-y-6  grow ">
+
+            {/*individual card. for anime it shows */}
+            {anime_data.map((item) => (
+              <Link
+                to="/detailspage"
+                state={{ id: item.anime_id, anime: true }}
+                key={item.anime_id}
+              >
+                <div className="card">
+                  <div className="card_img">
+                    <img src={item.image} />
+                  </div>
+
+                  <div className="flex flex-row gap-x-2 mt-3">
+                    {/* check index.css, for global use, vertical rectangle.. */}
+
+                    <p className="title8 secondary-left-line">{item.title}</p>
+
+                    {/*TODO you add favorite button, and for it to work properly */}
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+    
+   </> 
+} 
+
+export {Items};
\ No newline at end of file
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 87345ae..3d31e70 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,6 +1,6 @@
 import { PopularCarousel } from "../components/Home/PopularCarousel/PopularCarousel";
 import { UpcomingCarousel } from "../components/Home/UpcomingCarousel";
-import { BrowseHome } from "../components/Home/BrowseHome";
+import { BrowseHome } from "../components/Home/BrowseHome/BrowseHome";
 
 const Home = () => {
   return (