diff --git a/src/components/Dataform/index.tsx b/src/components/Dataform/index.tsx
index 3c14ee6..c3cc012 100644
--- a/src/components/Dataform/index.tsx
+++ b/src/components/Dataform/index.tsx
@@ -59,7 +59,7 @@ const DataForm = memo(() => {
   return (
     <div
       className={classNames(
-        "w-full p-[17px_15px] desktopMode:p-[17px_40px] overflow-y-scroll",
+        "w-full px-2.5 desktopMode:px-10 py-6 overflow-y-scroll",
         {
           "opacity-50": isDraggingFile,
         }
diff --git a/src/components/Files/index.tsx b/src/components/Files/index.tsx
index d257d18..9c89236 100644
--- a/src/components/Files/index.tsx
+++ b/src/components/Files/index.tsx
@@ -87,7 +87,7 @@ const Files = memo(() => {
         {!listView ? (
           <div
             className={classNames(
-              "grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
+              "grid grid-cols-[repeat(auto-fit,minmax(47%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
               files?.pages[0]?.length === 1
                 ? "justify-normal"
                 : "justify-center xs:justify-normal"
diff --git a/src/components/Folders/index.tsx b/src/components/Folders/index.tsx
index ba57f2c..948104e 100644
--- a/src/components/Folders/index.tsx
+++ b/src/components/Folders/index.tsx
@@ -115,7 +115,7 @@ const Folders = memo(() => {
 
       <div
         className={classNames(
-          "grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
+          "grid grid-cols-[repeat(auto-fit,minmax(47%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
           folders?.length === 1
             ? "justify-normal"
             : "justify-center xs:justify-normal"
diff --git a/src/components/LeftSection/index.tsx b/src/components/LeftSection/index.tsx
index 379d97f..4892e28 100644
--- a/src/components/LeftSection/index.tsx
+++ b/src/components/LeftSection/index.tsx
@@ -1,17 +1,15 @@
-import React, { useCallback, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { createFolderAPI } from "../../api/foldersAPI";
-import { useFoldersClient } from "../../hooks/folders";
-import { showCreateFolderPopup } from "../../popups/folder";
+import { useCallback, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
 import AddNewDropdown from "../AddNewDropdown";
-import HomeListIcon from "../../icons/HomeListIcon";
 import TrashIcon from "../../icons/TrashIcon";
 import classNames from "classnames";
 import PhotoIcon from "../../icons/PhotoIcon";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { closeDrawer } from "../../reducers/leftSection";
 import SettingsIcon from "../../icons/SettingsIcon";
+import ChevronSolid from "../../icons/ChevronSolid";
+import HomeIconOutline from "../../icons/HomeIconOutline";
 
 const LeftSection = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -55,7 +53,6 @@ const LeftSection = () => {
 
   const closeDrawerEvent = useCallback(
     (e: any) => {
-      console.log("close", e?.target.id);
       if (
         !e ||
         !leftSectionOpen ||
@@ -77,7 +74,7 @@ const LeftSection = () => {
     <div
       ref={wrapperRef}
       className={classNames(
-        "p-6 fixed desktopMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 mt-[9px] animate-movement",
+        "p-6 fixed desktopMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 desktopMode:z-0 animate-movement mt-1.5",
         {
           "-left-[270px] desktopMode:left-0": !leftSectionOpen,
           "left-0": leftSectionOpen,
@@ -86,92 +83,62 @@ const LeftSection = () => {
     >
       <div className="flex flex-col h-full">
         <div>
-          <div className="relative mb-[30px]">
+          <div className="relative mb-7">
             <a
               onClick={openDropdown}
-              className="flex items-center justify-center bg-[#3c85ee] hover:bg-[#326bcc] no-underline rounded-[5px]"
+              className="flex items-center justify-center bg-primary hover:bg-primary-hover no-underline rounded-md px-2 py-2.5"
             >
-              <p className="m-0 w-full text-center text-white text-[16px] font-medium">
+              <p className="m-0 w-full text-center text-white font-medium text-sm">
                 ADD NEW
               </p>
-              <span className="min-w-[50px] min-h-[45px] rounded-tr-[5px] rounded-br-[5px] flex items-center justify-center">
-                <img src="/assets/dropselect.svg" alt="dropselect" />
-              </span>
+              <ChevronSolid className="text-white mr-1" />
             </a>
-            {/* TODO: Remove this props */}
             {isDropdownOpen && <AddNewDropdown closeDropdown={closeDropdown} />}
           </div>
-          <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md">
-            <ul onClick={goHome} className="m-0 list-none p-0 cursor-pointer">
-              <li>
-                <a
-                  className={classNames(
-                    "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                    isHome ? "text-[#3c85ee]" : "text-[#637381]"
-                  )}
-                >
-                  <span>
-                    <HomeListIcon />
-                  </span>
-                  <p className="ml-3">Home</p>
-                </a>
-              </li>
-            </ul>
-          </div>
         </div>
-        <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] mt-1 mb-1 rounded-md">
-          <ul onClick={goMedia} className="m-0 list-none p-0 cursor-pointer ">
-            <li>
-              <a
-                className={classNames(
-                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                  isMedia ? "text-[#3c85ee]" : "text-[#637381]"
-                )}
-              >
-                <span>
-                  <PhotoIcon className="w-[20px] h-[20px] -ml-[2px]" />
-                </span>
-                <p className="ml-3">Media</p>
-              </a>
-            </li>
-          </ul>
+
+        <div
+          className={classNames(
+            "pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center w-full",
+            isHome ? "text-primary bg-white-hover" : "text-gray-primary"
+          )}
+          onClick={goHome}
+        >
+          <HomeIconOutline className="w-6 h-6" />
+          <p className="ml-3">Home</p>
         </div>
-        <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md block desktopMode:hidden mb-1">
-          <ul
-            onClick={goSettings}
-            className="m-0 list-none p-0 cursor-pointer "
-          >
-            <li>
-              <a
-                className={classNames(
-                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                  isSettings ? "text-[#3c85ee]" : "text-[#637381]"
-                )}
-              >
-                <span>
-                  <SettingsIcon className="w-[22px] h-[22px] -ml-[2px]" />
-                </span>
-                <p className="ml-2">Settings</p>
-              </a>
-            </li>
-          </ul>
+
+        <div
+          className={classNames(
+            "pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center mt-1 w-full",
+            isMedia ? "text-primary bg-white-hover" : "text-gray-primary"
+          )}
+          onClick={goMedia}
+        >
+          <PhotoIcon className="w-6 h-6" />
+          <p className="ml-3">Media</p>
         </div>
-        <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md">
-          <ul onClick={goTrash} className="m-0 list-none p-0 cursor-pointer ">
-            <li>
-              <a
-                className={classNames(
-                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                  isTrash ? "text-red-500" : "text-[#637381]"
-                )}
-              >
-                <span>
-                  <TrashIcon />
-                </span>
-                <p className="ml-3">Trash</p>
-              </a>
-            </li>
-          </ul>
+
+        <div
+          className={classNames(
+            "pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center desktopMode:hidden mt-1 w-full",
+            isSettings ? "text-primary bg-white-hover" : "text-gray-primary"
+          )}
+          onClick={goSettings}
+        >
+          <SettingsIcon className="w-6 h-6" />
+          <p className="ml-3">Settings</p>
+        </div>
+
+        <div
+          className={classNames(
+            "pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center mt-1 w-full",
+            isTrash ? "text-red-500 bg-white-hover" : "text-gray-primary"
+          )}
+          onClick={goTrash}
+        >
+          <TrashIcon className="w-6 h-6" />
+          <p className="ml-3">Trash</p>
         </div>
       </div>
     </div>
diff --git a/src/components/QuickAccess/index.tsx b/src/components/QuickAccess/index.tsx
index 78f9a10..e2de80f 100644
--- a/src/components/QuickAccess/index.tsx
+++ b/src/components/QuickAccess/index.tsx
@@ -5,6 +5,7 @@ import { useQuickFiles } from "../../hooks/files";
 import classNames from "classnames";
 import { useParams } from "react-router-dom";
 import { useUtils } from "../../hooks/utils";
+import ChevronOutline from "../../icons/ChevronOutline";
 
 const QuickAccess = memo(() => {
   const { data: quickfilesList } = useQuickFiles(false);
@@ -20,26 +21,20 @@ const QuickAccess = memo(() => {
         <h2 className=" text-[#212b36] text-[22px] font-medium">
           Quick Access
         </h2>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="35"
-          height="35"
+        <ChevronOutline
           onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}
-          className={classNames("cursor-pointer animate-movement", {
-            "rotate-180": quickAccessExpanded,
-          })}
-        >
-          <path
-            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-            fill="#3c85ee"
-          />
-        </svg>
+          className={classNames(
+            "cursor-pointer animate-movement text-primary",
+            {
+              "rotate-180": quickAccessExpanded,
+            }
+          )}
+        />
       </div>
 
       <div
         className={classNames(
-          "grid animate-movement grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
+          "grid animate-movement grid-cols-[repeat(auto-fit,minmax(47%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
           quickfilesList?.length === 1
             ? "justify-normal"
             : "justify-center xs:justify-normal",
diff --git a/src/components/RightSection/index.tsx b/src/components/RightSection/index.tsx
index 689bff7..a5fe130 100644
--- a/src/components/RightSection/index.tsx
+++ b/src/components/RightSection/index.tsx
@@ -80,7 +80,7 @@ const RightSection = memo(() => {
   return (
     <div
       className={classNames(
-        "!hidden desktopMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-[25px] bg-white right-0 justify-center relative",
+        "!hidden desktopMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-6 bg-white right-0 justify-center relative mt-1.5",
         selectedItem.id === "" ? "flex justify-center items-center" : ""
       )}
     >
diff --git a/src/hooks/contextMenu.ts b/src/hooks/contextMenu.ts
index 9854a1c..053c64c 100644
--- a/src/hooks/contextMenu.ts
+++ b/src/hooks/contextMenu.ts
@@ -1,7 +1,6 @@
 import { MouseEventHandler, useRef, useState } from "react";
 
 export const useContextMenu = () => {
-  // 215 X 240
   const [contextData, setContextData] = useState({
     selected: false,
     X: 0,
diff --git a/src/icons/ChevronOutline.tsx b/src/icons/ChevronOutline.tsx
new file mode 100644
index 0000000..b99b665
--- /dev/null
+++ b/src/icons/ChevronOutline.tsx
@@ -0,0 +1,20 @@
+type ChevronOutlineType = React.SVGAttributes<SVGSVGElement>;
+
+const ChevronOutline: React.FC<ChevronOutlineType> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="35"
+      height="35"
+      {...props}
+    >
+      <path
+        d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ChevronOutline;
diff --git a/src/icons/ChevronSolid.tsx b/src/icons/ChevronSolid.tsx
new file mode 100644
index 0000000..501de86
--- /dev/null
+++ b/src/icons/ChevronSolid.tsx
@@ -0,0 +1,22 @@
+type ChevronSolidType = React.SVGAttributes<SVGSVGElement>;
+
+const ChevronSolid: React.FC<ChevronSolidType> = (props) => {
+  return (
+    <svg
+      width="9"
+      height="6"
+      viewBox="0 0 9 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        id="Path Copy"
+        d="M8.45786 0.805578C8.5044 0.748826 8.5131 0.671721 8.48042 0.606718C8.44783 0.541807 8.3794 0.500367 8.30419 0.5L0.69571 0.5C0.620596 0.500367 0.552172 0.541716 0.519584 0.606627C0.486901 0.67163 0.495598 0.748735 0.542138 0.805395L4.34638 5.42858C4.38346 5.47369 4.44003 5.5 4.49995 5.5C4.55987 5.5 4.61645 5.47369 4.65352 5.42858L8.45786 0.805578Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ChevronSolid;
diff --git a/src/icons/HomeIconOutline.tsx b/src/icons/HomeIconOutline.tsx
new file mode 100644
index 0000000..68f10b3
--- /dev/null
+++ b/src/icons/HomeIconOutline.tsx
@@ -0,0 +1,15 @@
+type HomeIconOutlineType = React.SVGAttributes<SVGSVGElement>;
+
+const HomeIconOutline: React.FC<HomeIconOutlineType> = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <title>home-variant-outline</title>
+      <path
+        d="M9,13H15V19H18V10L12,5.5L6,10V19H9V13M4,21V9L12,3L20,9V21H4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default HomeIconOutline;
diff --git a/src/icons/TrashIcon.tsx b/src/icons/TrashIcon.tsx
index 78e9566..4cca469 100644
--- a/src/icons/TrashIcon.tsx
+++ b/src/icons/TrashIcon.tsx
@@ -4,38 +4,12 @@ type TrashIconType = React.SVGAttributes<SVGSVGElement>;
 
 const TrashIcon: React.FC<TrashIconType> = (props) => {
   return (
-    <svg
-      width="17"
-      height="18"
-      viewBox="0 0 17 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g id="trash">
-        <path
-          id="Shape"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M16.0694 2.57072H11.5707V1.92803C11.5707 0.863209 10.7075 0 9.64265 0H7.07192C6.0071 0 5.14389 0.863209 5.14389 1.92803V2.57072H0.645132C0.290178 2.57072 0.00244141 2.85846 0.00244141 3.21341C0.00244141 3.56837 0.290215 3.85607 0.645132 3.85607H1.34371L2.57317 17.4108C2.60348 17.7427 2.88255 17.9963 3.21586 17.995H13.4987C13.832 17.9964 14.1111 17.7427 14.1414 17.4108L15.3708 3.85607H16.0694C16.4244 3.85607 16.7121 3.56833 16.7121 3.21338C16.7121 2.85842 16.4244 2.57072 16.0694 2.57072ZM6.42923 1.92803C6.42923 1.57308 6.71697 1.28534 7.07192 1.28534H9.64265C9.9976 1.28534 10.2853 1.57308 10.2853 1.92803V2.57072H6.42927V1.92803H6.42923ZM3.80263 16.7096H12.9119L14.0803 3.85607H5.78658H2.63745L3.80263 16.7096Z"
-          fill="currentColor"
-        />
-        <path
-          id="Path"
-          d="M6.42938 14.7385C6.4293 14.7376 6.42926 14.7367 6.42919 14.7358L5.7865 5.73834C5.76131 5.38339 5.45312 5.1161 5.09821 5.14129C4.74325 5.16649 4.47596 5.47467 4.50116 5.82959L5.14385 14.8271C5.16783 15.1641 5.44868 15.425 5.78654 15.4241H5.83282C6.1869 15.3995 6.45401 15.0925 6.42938 14.7385Z"
-          fill="currentColor"
-        />
-        <path
-          id="Path_2"
-          d="M8.35729 5.1416C8.00234 5.1416 7.7146 5.42934 7.7146 5.78429V14.7818C7.7146 15.1367 8.00234 15.4245 8.35729 15.4245C8.71224 15.4245 8.99998 15.1367 8.99998 14.7818V5.78429C8.99998 5.42934 8.71224 5.1416 8.35729 5.1416Z"
-          fill="currentColor"
-        />
-        <path
-          id="Path_3"
-          d="M11.6164 5.14129C11.2615 5.1161 10.9533 5.38339 10.9281 5.73834L10.2854 14.7358C10.2594 15.0898 10.5253 15.3979 10.8793 15.4239C10.8804 15.424 10.8814 15.424 10.8825 15.4241H10.9281C11.266 15.425 11.5468 15.1641 11.5708 14.8271L12.2135 5.82959C12.2387 5.47467 11.9714 5.16652 11.6164 5.14129Z"
-          fill="currentColor"
-        />
-      </g>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <title>trash-can-outline</title>
+      <path
+        d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"
+        fill="currentColor"
+      />
     </svg>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index c16950d..61e4ea6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
     extend: {
       colors: {
         primary: "#3c85ee",
+        "primary-hover": "#326bcc",
         "white-hover": "#f6f5fd",
         "gray-primary": "#637381",
       },