diff --git a/src/components/Dataform/DataForm.jsx b/src/components/Dataform/DataForm.jsx
deleted file mode 100644
index ed2e539..0000000
--- a/src/components/Dataform/DataForm.jsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import FileItem from "../FileItem";
-import FolderItem from "../FolderItem";
-import React from "react";
-import QuickAccess from "../QuickAccess";
-import Folders from "../Folders";
-import ParentBar from "../ParentBar";
-import Spinner from "../Spinner";
-import SpinnerImage from "../SpinnerImage";
-import { useParams } from "react-router-dom";
-import { useInfiniteQuery, useQuery } from "react-query";
-import { getFilesList } from "../../api/filesAPI";
-import { getFoldersList } from "../../api/foldersAPI";
-import { useFiles } from "../../hooks/files";
-import { useFolders } from "../../hooks/folders";
-
-const DataForm = (props) => {
-  const {
-    data: files,
-    fetchNextPage: filesFetchNextPage,
-    invalidateFilesCache,
-  } = useFiles();
-  const { data: folders } = useFolders();
-
-  return (
-    <div
-      className={
-        props.parent === "/"
-          ? "file__control--panel"
-          : "file__control--panel folder__view"
-      }
-    >
-      {!props.loading ? <QuickAccess /> : undefined}
-
-      {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */}
-      <button
-        className="p-2 bg-blue-500 rounded-md text-white"
-        onClick={filesFetchNextPage}
-      >
-        Next page
-      </button>
-      <button
-        className="p-2 bg-blue-500 rounded-md text-white ml-4"
-        onClick={invalidateFilesCache}
-      >
-        Refresh
-      </button>
-      <Folders />
-
-      <div className="file__view noSelect">
-        <div className="recent__table--wrap">
-          {props.parent === "/" ? (
-            <div
-              className="head__recent--files noSelect"
-              style={props.loading ? { display: "none" } : {}}
-            >
-              <h2>{props.search !== "" ? "Files" : "Home Files"}</h2>
-              <div className="view__recent">
-                <ul>
-                  <li onClick={props.changeListViewMode}>
-                    <a
-                      style={
-                        props.listView
-                          ? { color: "#919eab" }
-                          : { color: "#3c85ee" }
-                      }
-                    >
-                      <i className="fas fa-th-large"></i>
-                    </a>
-                  </li>
-                  <li
-                    onClick={props.changeListViewMode}
-                    className="active__view"
-                  >
-                    <a
-                      style={
-                        !props.listView
-                          ? { color: "#919eab" }
-                          : { color: "#3c85ee" }
-                      }
-                    >
-                      <i className="fas fa-list"></i>
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          ) : (
-            <div
-              className="head__recent--files noSelect"
-              style={
-                props.loading ? { display: "none" } : { marginTop: "20px" }
-              }
-            >
-              <ParentBar />
-              <div className="view__recent">
-                <ul>
-                  <li>
-                    <a
-                      style={
-                        props.listView
-                          ? { color: "#919eab" }
-                          : { color: "#3c85ee" }
-                      }
-                      onClick={props.changeListViewMode}
-                    >
-                      <i className="fas fa-th-large"></i>
-                    </a>
-                  </li>
-                  <li className="active__view">
-                    <a
-                      style={
-                        !props.listView
-                          ? { color: "#919eab" }
-                          : { color: "#3c85ee" }
-                      }
-                      onClick={props.changeListViewMode}
-                    >
-                      <i className="fas fa-list"></i>
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          )}
-
-          {!props.listView ? (
-            <div className="main__access">
-              {files?.pages.map((filePage, index) => (
-                <React.Fragment key={index}>
-                  {filePage.map((file) => (
-                    <FileItem
-                      file={file}
-                      key={file._id}
-                      itemSelected={file._id === props.selected}
-                      downloadFile={props.downloadFile}
-                      removeFile={props.removeFile}
-                      fileClick={props.fileClick}
-                    />
-                  ))}
-                </React.Fragment>
-              ))}
-            </div>
-          ) : (
-            <table
-              className="w-full"
-              style={props.loading ? { display: "none" } : {}}
-            >
-              <tr>
-                <th>
-                  <div className="flex flex-row items-center mb-2 ml-4">
-                    <p className="text-[#212b36] text-sm font-medium">Name</p>
-                    {/* <select
-                      className="sorting__select"
-                      onChange={props.onChangeSelect}
-                      value={
-                        props.sortBy === "alp_desc" ||
-                        props.sortBy === "alp_asc"
-                          ? "name"
-                          : "date"
-                      }
-                    >
-                      <option value="date">Modified</option>
-                      <option value="name">Name</option>
-                    </select> */}
-                    {/* <a className="ml-2" onClick={props.switchSortBy}>
-                      <img
-                        className="w-3 h-3"
-                        src="/assets/sortarrow.svg"
-                        alt="sortarrow"
-                        style={
-                          props.sortBy === "date_desc" ||
-                          props.sortBy === "alp_desc"
-                            ? { transform: "scaleY(-1)" }
-                            : {}
-                        }
-                      />
-                    </a> */}
-                  </div>
-                </th>
-                <th className="hidden fileListShowDetails:table-cell">
-                  <p className="text-[#212b36] text-sm font-medium mb-2">
-                    Size
-                  </p>
-                </th>
-                <th className="hidden fileListShowDetails:table-cell">
-                  <p className="text-[#212b36] text-sm font-medium mb-2">
-                    Modified
-                  </p>
-                </th>
-                <th>
-                  <p className="text-[#212b36] text-sm font-medium mb-2">
-                    Actions
-                  </p>
-                </th>
-              </tr>
-
-              {files?.pages.map((filePage, index) => (
-                <React.Fragment key={index}>
-                  {filePage.map((file) => (
-                    <FileItem file={file} key={file._id} />
-                  ))}
-                </React.Fragment>
-              ))}
-            </table>
-          )}
-
-          <div
-            className="dataform-loadmore-files"
-            style={props.loadingMoreItems ? {} : { display: "none" }}
-          >
-            <SpinnerImage />
-          </div>
-
-          {/* {props.loading ? 
-      <div className="dataform__spinner__wrapper">
-        <Spinner />
-      </div> : undefined} */}
-
-          {/* */}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DataForm;
diff --git a/src/components/Dataform/index.jsx b/src/components/Dataform/index.jsx
index b3f2d0a..c3edf78 100644
--- a/src/components/Dataform/index.jsx
+++ b/src/components/Dataform/index.jsx
@@ -1,152 +1,33 @@
-import DataForm from "./DataForm";
-import { connect } from "react-redux";
-import React from "react";
-import {
-  enableListView,
-  disableListView,
-  setSortBy,
-} from "../../actions/filter";
-import { startSetFiles, startLoadMoreFiles } from "../../actions/files";
-import { startSetFolders } from "../../actions/folders";
-import { resetItems } from "../../actions/main";
+import QuickAccess from "../QuickAccess";
+import Folders from "../Folders";
+import { useFiles } from "../../hooks/files";
+import Files from "../Files";
 
-class DataFormContainer extends React.Component {
-  constructor(props) {
-    super(props);
+const DataForm = (props) => {
+  const { fetchNextPage: filesFetchNextPage, invalidateFilesCache } =
+    useFiles();
 
-    this.timeout = 0;
-  }
+  return (
+    <div className="w-full p-[65px_40px] overflow-y-scroll">
+      <QuickAccess />
+      <button
+        className="p-2 bg-blue-500 rounded-md text-white"
+        onClick={filesFetchNextPage}
+      >
+        Next page
+      </button>
+      <button
+        className="p-2 bg-blue-500 rounded-md text-white ml-4"
+        onClick={invalidateFilesCache}
+      >
+        Refresh
+      </button>
 
-  changeListViewMode = () => {
-    if (!this.props.listView) {
-      this.props.dispatch(enableListView());
-    } else {
-      this.props.dispatch(disableListView());
-    }
-  };
+      <Folders />
 
-  onScrollEvent = () => {};
+      <Files />
+    </div>
+  );
+};
 
-  componentDidMount = () => {
-    document.addEventListener("scroll", this.scrollCheck);
-  };
-
-  scrollCheck = (e) => {
-    const heightValue = app.clientHeight - app.clientHeight / 4;
-
-    if (heightValue < window.scrollY) {
-      const date = new Date();
-
-      if (
-        this.props.loadMoreItems &&
-        this.timeout < date.getTime() &&
-        !this.props.loadingMoreItems
-      ) {
-        this.timeout = date.getTime() + 500;
-        this.loadMoreItems();
-      } else {
-      }
-    }
-  };
-
-  loadMoreItems = () => {
-    let limit = window.localStorage.getItem("list-size") || 50;
-    limit = parseInt(limit);
-
-    if (this.props.files.length >= limit) {
-      const parent = this.props.parent;
-      const search = this.props.search;
-      const sortBy = this.props.sortBy;
-      const lastFileDate =
-        this.props.files[this.props.files.length - 1].uploadDate;
-      const lastFileName =
-        this.props.files[this.props.files.length - 1].filename;
-      const lastPageToken =
-        this.props.files[this.props.files.length - 1].pageToken;
-      const isGoogle = this.props.isGoogle;
-
-      this.props.dispatch(
-        startLoadMoreFiles(
-          parent,
-          sortBy,
-          search,
-          lastFileDate,
-          lastFileName,
-          lastPageToken,
-          isGoogle
-        )
-      );
-    }
-  };
-
-  componentDidUpdate = () => {};
-
-  switchSortBy = () => {
-    let sortByString = this.props.sortBy.includes("date")
-      ? this.props.sortBy === "date_desc"
-        ? "date_asc"
-        : "date_desc"
-      : this.props.sortBy === "alp_desc"
-      ? "alp_asc"
-      : "alp_desc";
-
-    this.props.dispatch(setSortBy(sortByString));
-  };
-
-  onChangeSelect = (e) => {
-    const value = e.target.value;
-
-    let sortByString = "";
-
-    if (value === "date") {
-      if (this.props.sortBy.includes("asc")) {
-        sortByString = "date_asc";
-      } else {
-        sortByString = "date_desc";
-      }
-    } else if (value === "name") {
-      if (this.props.sortBy.includes("asc")) {
-        sortByString = "alp_asc";
-      } else {
-        sortByString = "alp_desc";
-      }
-    }
-
-    const parent = this.props.parent;
-    const search = this.props.search;
-
-    this.props.dispatch(setSortBy(sortByString));
-    this.props.dispatch(startSetFiles(parent, sortByString, search));
-    this.props.dispatch(startSetFolders(parent, sortByString, search));
-    this.props.dispatch(resetItems());
-  };
-
-  render() {
-    return (
-      <DataForm
-        {...this.props}
-        onChangeSelect={this.onChangeSelect}
-        changeListViewMode={this.changeListViewMode}
-        switchSortBy={this.switchSortBy}
-        onScrollEvent={this.onScrollEvent}
-      />
-    );
-  }
-}
-
-const mapStateToProp = (state) => ({
-  files: state.files,
-  folders: state.folders,
-  selected: state.selectedItem.selected,
-  resetItems: state.main.resetItems,
-  parent: state.parent.parent,
-  listView: state.filter.listView,
-  sortBy: state.filter.sortBy,
-  search: state.filter.search,
-  isGoogle: state.filter.isGoogle,
-  loadMoreItems: state.main.loadMoreItems,
-  loading: state.main.loading,
-  loadingMoreItems: state.main.loadingMoreItems,
-});
-
-export default connect(mapStateToProp)(DataFormContainer);
+export default DataForm;
diff --git a/src/components/Files/index.jsx b/src/components/Files/index.jsx
new file mode 100644
index 0000000..0d1163c
--- /dev/null
+++ b/src/components/Files/index.jsx
@@ -0,0 +1,139 @@
+import { useDispatch, useSelector } from "react-redux";
+import { disableListView, enableListView } from "../../actions/filter";
+import { useFiles } from "../../hooks/files";
+import SpinnerImage from "../SpinnerImage";
+import React from "react";
+import FileItem from "../FileItem";
+import ParentBar from "../ParentBar";
+
+const Files = () => {
+  const { data: files } = useFiles();
+  const parent = useSelector((state) => state.parent.parent);
+  const listView = useSelector((state) => state.filter.listView);
+  // TODO: Fix loading
+  const loading = useSelector((state) => state.main.loading);
+  const loadingMore = useSelector((state) => state.main.loadingMoreItems);
+  const search = useSelector((state) => state.filter.search);
+  const dispatch = useDispatch();
+
+  const changeListViewMode = () => {
+    if (!listView) {
+      dispatch(enableListView());
+    } else {
+      dispatch(disableListView());
+    }
+  };
+  return (
+    <div className="mt-8">
+      <div>
+        <div className="flex justify-between">
+          <h2 className="m-0 mb-[20px] text-[22px] font-medium">
+            {search !== "" ? "Files" : "Home Files"}
+          </h2>
+          <div>
+            <ul className="flex items-center list-none m-0 p-0">
+              <li className="mr-4" onClick={changeListViewMode}>
+                <a
+                  style={listView ? { color: "#919eab" } : { color: "#3c85ee" }}
+                >
+                  <svg
+                    className="w-4 h-4 cursor-pointer"
+                    aria-hidden="true"
+                    focusable="false"
+                    data-prefix="fas"
+                    data-icon="th-large"
+                    role="img"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
+                    data-fa-i2svg=""
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M296 32h192c13.255 0 24 10.745 24 24v160c0 13.255-10.745 24-24 24H296c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24zm-80 0H24C10.745 32 0 42.745 0 56v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zM0 296v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm296 184h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H296c-13.255 0-24 10.745-24 24v160c0 13.255 10.745 24 24 24z"
+                    ></path>
+                  </svg>
+                </a>
+              </li>
+              <li className="mr-2" onClick={changeListViewMode}>
+                <a
+                  style={
+                    !listView ? { color: "#919eab" } : { color: "#3c85ee" }
+                  }
+                >
+                  <svg
+                    className="w-4 h-4 cursor-pointer"
+                    aria-hidden="true"
+                    focusable="false"
+                    data-prefix="fas"
+                    data-icon="list"
+                    role="img"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
+                    data-fa-i2svg=""
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+                    ></path>
+                  </svg>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {!listView ? (
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px]">
+            {files?.pages.map((filePage, index) => (
+              <React.Fragment key={index}>
+                {filePage.map((file) => (
+                  <FileItem file={file} key={file._id} />
+                ))}
+              </React.Fragment>
+            ))}
+          </div>
+        ) : (
+          <table className="w-full" style={loading ? { display: "none" } : {}}>
+            <tr>
+              <th>
+                <div className="flex flex-row items-center mb-2 ml-4">
+                  <p className="text-[#212b36] text-sm font-medium">Name</p>
+                </div>
+              </th>
+              <th className="hidden fileListShowDetails:table-cell">
+                <p className="text-[#212b36] text-sm font-medium mb-2">Size</p>
+              </th>
+              <th className="hidden fileListShowDetails:table-cell">
+                <p className="text-[#212b36] text-sm font-medium mb-2">
+                  Modified
+                </p>
+              </th>
+              <th>
+                <p className="text-[#212b36] text-sm font-medium mb-2">
+                  Actions
+                </p>
+              </th>
+            </tr>
+
+            {files?.pages.map((filePage, index) => (
+              <React.Fragment key={index}>
+                {filePage.map((file) => (
+                  <FileItem file={file} key={file._id} />
+                ))}
+              </React.Fragment>
+            ))}
+          </table>
+        )}
+
+        {/* <div
+          className="dataform-loadmore-files"
+          style={loadingMore ? {} : { display: "none" }}
+        >
+          <SpinnerImage />
+        </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default Files;
diff --git a/src/components/Folders/index.jsx b/src/components/Folders/index.jsx
index 0bb2dce..13b4c9e 100644
--- a/src/components/Folders/index.jsx
+++ b/src/components/Folders/index.jsx
@@ -63,11 +63,7 @@ const Folder = () => {
 
   return (
     <div
-      className={
-        parent === "/"
-          ? "folders__panel"
-          : "folders__panel folders__panel__folder"
-      }
+      className="mt-8"
       //   style={props.loading ? { display: "none" } : { display: "block" }}
     >
       <div className="flex flex-row justify-between text-[#212b36]">
@@ -99,7 +95,7 @@ const Folder = () => {
             </svg>
           </a>
           <select
-            className=" text-sm font-medium"
+            className="text-sm font-medium"
             onChange={switchTypeOrderBy}
             value={
               sortBy === "alp_desc" || sortBy === "alp_asc" ? "name" : "date"
@@ -111,7 +107,7 @@ const Folder = () => {
         </div>
       </div>
 
-      <div className="inner__folders">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px]">
         {folders?.map((folder) => (
           <FolderItem folder={folder} key={folder._id} />
         ))}
diff --git a/src/components/MainSection/MainSection.jsx b/src/components/MainSection/MainSection.jsx
index a8ffd1d..23ed79d 100644
--- a/src/components/MainSection/MainSection.jsx
+++ b/src/components/MainSection/MainSection.jsx
@@ -101,11 +101,7 @@ const MainSection = React.forwardRef((props, ref) => {
         <div className="flex flex-row h-screen w-screen pt-16">
           <LeftSection goHome={() => {}} />
 
-          <DataForm
-            folderClick={props.folderClick}
-            fileClick={props.fileClick}
-            downloadFile={props.downloadFile}
-          />
+          <DataForm />
 
           <RightSection
             folderClick={props.folderClick}