diff --git a/src/components/DownloadPage/DownloadPage.tsx b/src/components/DownloadPage/DownloadPage.tsx
index 23d51c1..cfcd856 100644
--- a/src/components/DownloadPage/DownloadPage.tsx
+++ b/src/components/DownloadPage/DownloadPage.tsx
@@ -59,13 +59,13 @@ const PublicDownloadPage = () => {
     <div>
       <div className="flex justify-center items-center w-screen h-screen bg-black bg-opacity-90">
         <div
-          className="absolute top-[20px] flex justify-between w-full"
+          className="absolute top-5 flex justify-between w-full"
           id="actions-wrapper"
         >
           <div className="ml-4 flex items-center">
-            <span className="inline-flex items-center mr-[15px] max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
+            <span className="inline-flex items-center mr-4 max-w-7 min-w-7 min-h-7 max-h-7">
               <div
-                className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"
+                className="h-7 w-7 bg-red-500 rounded-md flex flex-row justify-center items-center"
                 style={{ background: imageColor }}
               >
                 <span className="font-semibold text-[9.5px] text-white">
@@ -78,43 +78,29 @@ const PublicDownloadPage = () => {
             </p>
           </div>
         </div>
-        <div className="w-[300px] p-4 bg-white rounded-md border shadow-lg">
-          <div className="mt-2 flex justify-between">
-            <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-              Type
-            </span>
-            <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-              {fileExtension}
-            </span>
+        <div className="w-[300px] p-4 bg-white rounded-md border shadow-lg text-xs flex flex-col space-y-3">
+          <div className="flex justify-between">
+            <span className="text-gray-primary font-normal">Type</span>
+            <span className="text-black font-normal ">{fileExtension}</span>
           </div>
-          <div className="mt-2 flex justify-between">
-            <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-              Size
-            </span>
-            <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-              {fileSize}
-            </span>
+          <div className="flex justify-between">
+            <span className="text-gray-primary font-normal">Size</span>
+            <span className="text-black font-normal ">{fileSize}</span>
           </div>
-          <div className="mt-2 flex justify-between">
-            <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-              Created
-            </span>
-            <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-              {formattedDate}
-            </span>
+          <div className="flex justify-between">
+            <span className="text-gray-primary font-normal ">Created</span>
+            <span className="text-black font-normal ">{formattedDate}</span>
           </div>
-          <div className="mt-2 flex justify-between">
-            <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-              Access
-            </span>
-            <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
+          <div className="flex justify-between">
+            <span className="text-gray-primary font-normal ">Access</span>
+            <span className="text-black font-normal ">
               {file.metadata.link ? "Public" : "Private"}
             </span>
           </div>
-          <div className="mt-[15px] flex justify-center">
+          <div className="flex justify-center">
             <a
               onClick={downloadItem}
-              className="w-[80px] h-[40px] inline-flex items-center justify-center border border-[#3c85ee] rounded-[4px] text-[#3c85ee] text-[15px] font-medium no-underline animate mr-4 cursor-pointer hover:bg-[#f6f5fd]"
+              className="px-5 py-2.5 inline-flex items-center justify-center border border-primary rounded-md text-primary text-sm font-medium no-underline animate mr-4 cursor-pointer hover:bg-white-hover"
             >
               Download
             </a>
diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx
index 42c1244..916728e 100644
--- a/src/components/FileInfoPopup/FileInfoPopup.tsx
+++ b/src/components/FileInfoPopup/FileInfoPopup.tsx
@@ -72,13 +72,13 @@ const FileInfoPopup = memo(() => {
       )}
 
       <div
-        className="absolute top-[20px] flex justify-between w-full"
+        className="absolute top-5 flex justify-between w-full"
         id="actions-wrapper"
       >
         <div className="ml-4 flex items-center">
-          <span className="inline-flex items-center mr-[15px] max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
+          <span className="inline-flex items-center mr-4 max-w-7 min-w-7 min-h-7 max-h-7">
             <div
-              className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"
+              className="h-7 w-7 bg-red-500 rounded-md flex flex-row justify-center items-center"
               style={{ background: imageColor }}
             >
               <span className="font-semibold text-[9.5px] text-white">
@@ -93,63 +93,45 @@ const FileInfoPopup = memo(() => {
         <div className="flex mr-4">
           <div onClick={onContextMenu} id="action-context-wrapper">
             <ActionsIcon
-              className="pointer text-white w-[20px] h-[25px] mr-4 cursor-pointer"
+              className="pointer text-white w-h h-6 mr-4 cursor-pointer"
               id="action-context-icon"
             />
           </div>
 
           <div onClick={closePhotoViewer} id="action-close-wrapper">
             <CloseIcon
-              className="pointer text-white w-[25px] h-[25px] cursor-pointer"
+              className="pointer text-white w-6 h-6 cursor-pointer"
               id="action-close-icon"
             />
           </div>
         </div>
       </div>
-      <div className="w-[300px] p-4 bg-white rounded-md">
-        <div className="mt-2 flex justify-between">
-          <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-            Type
-          </span>
-          <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-            {fileExtension}
-          </span>
+      <div className="w-[300px] p-4 bg-white rounded-md border shadow-lg text-xs flex flex-col space-y-3">
+        <div className="flex justify-between">
+          <span className="text-gray-primary font-normal">Type</span>
+          <span className="text-black font-normal ">{fileExtension}</span>
         </div>
-        <div className="mt-2 flex justify-between">
-          <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-            Size
-          </span>
-          <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-            {fileSize}
-          </span>
+        <div className="flex justify-between">
+          <span className="text-gray-primary font-normal">Size</span>
+          <span className="text-black font-normal ">{fileSize}</span>
         </div>
-        <div className="mt-2 flex justify-between">
-          <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-            Created
-          </span>
-          <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-            {formattedDate}
-          </span>
+        <div className="flex justify-between">
+          <span className="text-gray-primary font-normal ">Created</span>
+          <span className="text-black font-normal ">{formattedDate}</span>
         </div>
-        <div className="mt-2 flex justify-between">
-          <span className="text-[#637381] text-[13px] font-normal leading-[20px] min-w-[50px]">
-            Access
-          </span>
-          <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
+        <div className="flex justify-between">
+          <span className="text-gray-primary font-normal ">Access</span>
+          <span className="text-black font-normal ">
             {file.metadata.link ? "Public" : "Private"}
           </span>
         </div>
-        <div className="mt-[15px] flex justify-center">
+        <div className="flex justify-center">
           <a
             onClick={downloadItem}
-            className="w-[80px] h-[40px] inline-flex items-center justify-center border border-[#3c85ee] rounded-[4px] text-[#3c85ee] text-[15px] font-medium no-underline animate mr-4 cursor-pointer hover:bg-[#f6f5fd]"
+            className="px-5 py-2.5 inline-flex items-center justify-center border border-primary rounded-md text-primary text-sm font-medium no-underline animate mr-4 cursor-pointer hover:bg-white-hover"
           >
             Download
           </a>
-          <ActionsIcon
-            onClick={onContextMenu}
-            className="w-[20px] ml-4 cursor-pointer"
-          />
         </div>
       </div>
     </div>
diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx
index c31a518..01ddefd 100644
--- a/src/components/FileItem/FileItem.tsx
+++ b/src/components/FileItem/FileItem.tsx
@@ -119,7 +119,7 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
           <div className="flex items-center fileTextXL:w-[560px] w-[60px] xxs:w-[160px] xs:w-[260px] fileTextXSM:w-[460px] fileTextLG:w-[440px] fileTextMD:w-[240px] desktopMode:w-[160px]">
             <span className="inline-flex items-center mr-[15px] max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
               <div
-                className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"
+                className="h-7 w-7 bg-red-500 rounded-md flex flex-row justify-center items-center"
                 style={{ background: imageColor }}
               >
                 <span className="font-semibold text-[9.5px] text-white">
@@ -173,9 +173,9 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
     return (
       <div
         className={classNames(
-          "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[130px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white ",
+          "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[130px] sm:h-[150px] animiate hover:border-primary overflow-hidden bg-white ",
           elementSelected || elementMultiSelected
-            ? "border-[#3c85ee]"
+            ? "border-primary"
             : "border-gray-third"
         )}
         onClick={fileClick}
@@ -237,8 +237,8 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
           className={classNames(
             "p-3 overflow-hidden text-ellipsis block w-full animate",
             elementSelected || elementMultiSelected
-              ? "bg-[#3c85ee] text-white"
-              : "bg-white text-[#637381]"
+              ? "bg-primary text-white"
+              : "bg-white text-gray-primary"
           )}
         >
           <p
@@ -253,10 +253,10 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
           </p>
           <span
             className={classNames(
-              "m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
+              "m-0 font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
               elementSelected || elementMultiSelected
                 ? "text-white"
-                : "text-[#637381]"
+                : "text-gray-primary]"
             )}
           >
             Created {formattedCreatedDate}
diff --git a/src/components/Files/Files.tsx b/src/components/Files/Files.tsx
index db89554..03771c5 100644
--- a/src/components/Files/Files.tsx
+++ b/src/components/Files/Files.tsx
@@ -20,10 +20,8 @@ const Files = memo(() => {
   return (
     <div className="mt-8">
       <div>
-        <div className="flex justify-between items-center mb-[20px]">
-          {isHome && (
-            <h2 className="m-0 text-[22px] font-medium">Home Files</h2>
-          )}
+        <div className="flex justify-between items-center mb-5">
+          {isHome && <h2 className="m-0 text-xl font-medium">Home Files</h2>}
           {!isHome && (
             <React.Fragment>
               <div className="block">
@@ -36,7 +34,10 @@ const Files = memo(() => {
             <ul className="flex items-center list-none m-0 p-0">
               <li className="mr-4" onClick={changeListViewMode}>
                 <a
-                  style={listView ? { color: "#919eab" } : { color: "#3c85ee" }}
+                  className={classNames({
+                    "text-gray-primary": listView,
+                    "text-primary": !listView,
+                  })}
                 >
                   <svg
                     className="w-4 h-4 cursor-pointer"
@@ -58,9 +59,10 @@ const Files = memo(() => {
               </li>
               <li className="mr-2" onClick={changeListViewMode}>
                 <a
-                  style={
-                    !listView ? { color: "#919eab" } : { color: "#3c85ee" }
-                  }
+                  className={classNames({
+                    "text-gray-primary": !listView,
+                    "text-primary": listView,
+                  })}
                 >
                   <svg
                     className="w-4 h-4 cursor-pointer"
@@ -107,23 +109,17 @@ const Files = memo(() => {
               <tr>
                 <th>
                   <div className="flex flex-row items-center mb-2">
-                    <p className="text-[#212b36] text-sm font-medium">Name</p>
+                    <p className="text-black 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>
+                  <p className="text-black 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">
-                    Created
-                  </p>
+                  <p className="text-black text-sm font-medium mb-2">Created</p>
                 </th>
                 <th>
-                  <p className="text-[#212b36] text-sm font-medium mb-2">
-                    Actions
-                  </p>
+                  <p className="text-black text-sm font-medium mb-2">Actions</p>
                 </th>
               </tr>
             </thead>
@@ -138,13 +134,6 @@ const Files = memo(() => {
             </tbody>
           </table>
         )}
-
-        {/* <div
-          className="dataform-loadmore-files"
-          style={loadingMore ? {} : { display: "none" }}
-        >
-          <SpinnerImage />
-        </div> */}
       </div>
     </div>
   );
diff --git a/src/components/FolderItem/FolderItem.tsx b/src/components/FolderItem/FolderItem.tsx
index 1d7df3b..4125786 100644
--- a/src/components/FolderItem/FolderItem.tsx
+++ b/src/components/FolderItem/FolderItem.tsx
@@ -88,9 +88,9 @@ const FolderItem: React.FC<FolderItemProps> = memo((props) => {
   return (
     <div
       className={classNames(
-        "p-[12px] border border-gray-third rounded-[4px] overflow-hidden cursor-pointer animate hover:border-[#3c85ee]",
+        "p-3 border border-gray-third rounded-md overflow-hidden cursor-pointer animate hover:border-primary",
         {
-          "bg-[#3c85ee]": elementSelected || elementMultiSelected,
+          "bg-primary": elementSelected || elementMultiSelected,
         }
       )}
       onClick={folderClick}
@@ -114,7 +114,7 @@ const FolderItem: React.FC<FolderItemProps> = memo((props) => {
       <div>
         <svg
           className={classNames(
-            "w-[40px] h-[40px]",
+            "w-10 h-10",
             elementSelected || elementMultiSelected
               ? "text-white"
               : "text-[#3c85ee]"
@@ -136,15 +136,15 @@ const FolderItem: React.FC<FolderItemProps> = memo((props) => {
       </div>
       <div
         className={classNames(
-          "overflow-hidden text-ellipsis block w-full animate mt-2",
+          "overflow-hidden text-ellipsis block w-full animate",
           elementSelected || elementMultiSelected
-            ? "bg-[#3c85ee] text-white"
-            : "bg-white text-[#637381]"
+            ? "bg-primary text-white"
+            : "bg-white text-gray-primary"
         )}
       >
         <p
           className={classNames(
-            "m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
+            "m-0 text-sm font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
             elementSelected || elementMultiSelected
               ? "text-white"
               : "text-black"
@@ -157,7 +157,7 @@ const FolderItem: React.FC<FolderItemProps> = memo((props) => {
             "m-0 font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
             elementSelected || elementMultiSelected
               ? "text-white"
-              : "text-[#637381]"
+              : "text-gray-primary"
           )}
         >
           Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")}
diff --git a/src/components/Folders/Folders.tsx b/src/components/Folders/Folders.tsx
index 370bf7c..8700bb2 100644
--- a/src/components/Folders/Folders.tsx
+++ b/src/components/Folders/Folders.tsx
@@ -70,7 +70,7 @@ const Folders = memo(() => {
       <div className="flex flex-row mb-[20px] justify-between text-[#212b36] items-center">
         <h2
           className={classNames(
-            "m-0 text-[22px] font-medium",
+            "m-0 text-xl font-medium",
             isHome ? "block" : "invisible"
           )}
         >
diff --git a/src/components/QuickAccess/QuickAccess.tsx b/src/components/QuickAccess/QuickAccess.tsx
index 5490f43..18d1dfe 100644
--- a/src/components/QuickAccess/QuickAccess.tsx
+++ b/src/components/QuickAccess/QuickAccess.tsx
@@ -18,9 +18,7 @@ const QuickAccess = memo(() => {
       style={isHome ? { display: "block" } : { display: "none" }}
     >
       <div className="flex flex-row items-center justify-between mb-4">
-        <h2 className=" text-[#212b36] text-[22px] font-medium">
-          Quick Access
-        </h2>
+        <h2 className=" text-[#212b36] text-xl font-medium">Quick Access</h2>
         <ChevronOutline
           onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}
           className={classNames(