update

src/App.js

@@ -112,14 +112,14 @@ function App() {
         </div> */}
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
-        {/* <FileManager /> */}
+        <FileManager />
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
         {/* <Blogs /> */}
         {/* <CardHolder /> */}
         {/* <UploadFile /> */}
-        <BarChartApex />
+        {/* <BarChartApex /> */}
-        <SemiDonut />
+        {/* <SemiDonut /> */}
       </div>
     </Provider>
   );

src/components/FileManager/index.js

@@ -9,12 +9,21 @@ import graySearchIcon from "./images/gray-search-icon.svg";
 
 const FileManager = () => {
   return (
-    <div style={{ backgroundColor: "#FBFBFB" }}>
+    <div
-      <div className="flex flex-row justify-between w-8/12">
+      style={{ backgroundColor: "#FBFBFB" }}
-        <div className="">
+      className="px-7 py-5 flex flex-row"
+    >
+      {/* ? right Section */}
+      <div className="flex-1">
+        {/* ? breadCrumb */}
+        <div className="mb-5">
           <BreadCrumb />
-          <TitleSubtitle />
         </div>
+        {/* ? pageTitle & searchbox */}
+        <div className="flex flex-row justify-between">
+          {/* ? pageTitle */}
+          <TitleSubtitle />
+          {/* ? searchbox */}
           <div className="self-end">
             <SearchBox
               borderClr={"#EEEEEE"}
@@ -25,10 +34,8 @@ const FileManager = () => {
             />
           </div>
         </div>
-      <div className="bg-yellow-600">
-        {" "}
-        <CardHolder />
       </div>
+      {/* left Section */} <CardHolder />
     </div>
   );
 };