diff --git a/src/app/compBreadcrumb.tsx b/src/app/(__components)/compBreadcrumb.tsx
similarity index 99%
rename from src/app/compBreadcrumb.tsx
rename to src/app/(__components)/compBreadcrumb.tsx
index b8200ee..32c2013 100644
--- a/src/app/compBreadcrumb.tsx
+++ b/src/app/(__components)/compBreadcrumb.tsx
@@ -1,14 +1,17 @@
 "use client";
 
 import Link from "next/link";
-import { MdHome } from "react-icons/md";
 import { Fragment, useEffect, useState } from "react";
-import siteConfig from "config/site.config";
+import { MdHome } from "react-icons/md";
+
 import { FilePath } from "types/api/path";
 
+import siteConfig from "config/site.config";
+
 type Props = {
   data?: FilePath[];
 };
+
 function Breadcrumb({ data = [] }: Props) {
   const [breadcrumb, setBreadcrumb] = useState<FilePath[]>(
     [],
diff --git a/src/app/compFooter.tsx b/src/app/(__components)/compFooter.tsx
similarity index 99%
rename from src/app/compFooter.tsx
rename to src/app/(__components)/compFooter.tsx
index 76766eb..8cdd5d1 100644
--- a/src/app/compFooter.tsx
+++ b/src/app/(__components)/compFooter.tsx
@@ -1,6 +1,7 @@
-import siteConfig from "config/site.config";
 import Link from "next/link";
 
+import siteConfig from "config/site.config";
+
 function Footer() {
   return (
     <footer
diff --git a/src/app/compGridLayout.tsx b/src/app/(__components)/compGridLayout.tsx
similarity index 99%
rename from src/app/compGridLayout.tsx
rename to src/app/(__components)/compGridLayout.tsx
index f2a4278..4830987 100644
--- a/src/app/compGridLayout.tsx
+++ b/src/app/(__components)/compGridLayout.tsx
@@ -1,14 +1,17 @@
 "use client";
 
-import { FilesResponse } from "types/api/files";
 import { drive_v3 } from "googleapis";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { MdFolder, MdPlayCircle } from "react-icons/md";
+
 import formatDuration from "utils/fileHelper/formatDuration";
 import getFileIcon from "utils/fileHelper/iconMap";
 import getFileGroup from "utils/fileHelper/typeMap";
+
+import { FilesResponse } from "types/api/files";
+
 import siteConfig from "config/site.config";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
 
 type Props = {
   data: FilesResponse;
diff --git a/src/app/compSwitchLayout.tsx b/src/app/(__components)/compSwitchLayout.tsx
similarity index 99%
rename from src/app/compSwitchLayout.tsx
rename to src/app/(__components)/compSwitchLayout.tsx
index d4c8c9a..a6c4dc7 100644
--- a/src/app/compSwitchLayout.tsx
+++ b/src/app/(__components)/compSwitchLayout.tsx
@@ -1,9 +1,5 @@
 "use client";
 
-import {
-  LayoutContext,
-  TLayoutContext,
-} from "context/layoutContext";
 import {
   useContext,
   useEffect,
@@ -16,6 +12,11 @@ import {
   MdList,
 } from "react-icons/md";
 
+import {
+  LayoutContext,
+  TLayoutContext,
+} from "context/layoutContext";
+
 function SwitchLayout() {
   const { layout, setLayout } =
     useContext<TLayoutContext>(LayoutContext);
@@ -39,6 +40,7 @@ function SwitchLayout() {
         setIsDropdownOpen(false);
       }
     }
+
     document.addEventListener(
       "mousedown",
       handleClickOutside,
diff --git a/src/app/(api)/api/banner/route.ts b/src/app/(api)/api/banner/route.ts
index 9a872da..7cb7f76 100644
--- a/src/app/(api)/api/banner/route.ts
+++ b/src/app/(api)/api/banner/route.ts
@@ -1,10 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
+
 import createErrorPayload from "utils/apiHelper/createErrorPayload";
-import getSearchParams from "utils/apiHelper/getSearchParams";
-import ExtendedError from "utils/generalHelper/extendedError";
-import { Constant } from "types/general/constant";
 import gdrive from "utils/apiHelper/gdrive";
+import getSearchParams from "utils/apiHelper/getSearchParams";
 import shortEncryption from "utils/encryptionHelper/shortEncryption";
+import ExtendedError from "utils/generalHelper/extendedError";
+
+import { Constant } from "types/general/constant";
+
 import apiConfig from "config/api.config";
 
 export async function GET(request: NextRequest) {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3ad7d3d..3aa6600 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,13 @@
-import { Metadata } from "next";
-
-import Navbar from "./compNavbar";
-import Footer from "./compFooter";
-import ContextWrapper from "./contextWrapper";
 import {
   Exo_2,
   JetBrains_Mono,
   Source_Sans_Pro,
 } from "next/font/google";
 
-import siteConfig from "config/site.config";
-import apiConfig from "config/api.config";
+import ClientContextWrapper from "components/clientContextWrapper";
+import Footer from "components/compFooter";
+import Navbar from "components/compNavbar";
+
 import "styles/globals.css";
 
 const exo2 = Exo_2({
@@ -35,27 +32,6 @@ const jetBrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",
 });
 
-export const metadata: Metadata = {
-  metadataBase: new URL(apiConfig.basePath),
-  title: siteConfig.siteName,
-  description: siteConfig.siteDescription,
-  alternates: {
-    canonical: "/",
-  },
-  openGraph: {
-    title: siteConfig.siteName,
-    description: siteConfig.siteDescription,
-    url: `/`,
-    siteName: siteConfig.siteName,
-  },
-  twitter: {
-    title: siteConfig.siteName,
-    description: siteConfig.siteDescription,
-    card: "summary_large_image",
-    site: siteConfig.siteName,
-  },
-};
-
 type Props = {
   children: React.ReactNode;
 };
@@ -66,7 +42,7 @@ function RootLayout({ children }: Props) {
       <body
         className={`${exo2.variable} ${sourceSansPro.variable} ${jetBrainsMono.variable} font-body`}
       >
-        <ContextWrapper>
+        <ClientContextWrapper>
           <main
             className={
               "text-dark-900 flex h-full min-h-dynamic w-full flex-col bg-zinc-200 font-body dark:bg-zinc-800 dark:text-zinc-100"
@@ -78,7 +54,7 @@ function RootLayout({ children }: Props) {
             </div>
             <Footer />
           </main>
-        </ContextWrapper>
+        </ClientContextWrapper>
       </body>
     </html>
   );
diff --git a/src/context/layoutContext.tsx b/src/context/layoutContext.tsx
index 530db21..3ecd930 100644
--- a/src/context/layoutContext.tsx
+++ b/src/context/layoutContext.tsx
@@ -1,4 +1,8 @@
-import React, { createContext, useState, useEffect } from "react";
+import React, {
+  createContext,
+  useEffect,
+  useState,
+} from "react";
 
 export type TLayout = "grid" | "list";
 
diff --git a/src/context/themeContext.tsx b/src/context/themeContext.tsx
index 71cd06c..c32958a 100644
--- a/src/context/themeContext.tsx
+++ b/src/context/themeContext.tsx
@@ -2,8 +2,8 @@
 
 import React, {
   createContext,
-  useState,
   useEffect,
+  useState,
 } from "react";
 
 export type TTheme = "dark" | "light";
diff --git a/src/hooks/useCopyText.ts b/src/hooks/useCopyText.ts
index 8703b98..db76931 100644
--- a/src/hooks/useCopyText.ts
+++ b/src/hooks/useCopyText.ts
@@ -3,7 +3,9 @@ import { toast } from "react-toastify";
 export default function useCopyText() {
   return (text: string) => {
     if (!navigator.clipboard) {
-      toast.error("Your browser does not support copying to clipboard.");
+      toast.error(
+        "Your browser does not support copying to clipboard.",
+      );
       return;
     }
     if (!text) {
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 2fd82bf..c9aacbf 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -2,7 +2,10 @@ import { useEffect, useState } from "react";
 
 type SetValue<T> = (value: T | ((val: T) => T)) => void;
 
-export default function useLocalStorage<T>(key: string, initialValue: T) {
+export default function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+) {
   // First check if there is a value in localStorage
   function readLocalStorage() {
     if (typeof window === "undefined") return initialValue;
@@ -11,20 +14,30 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
-      console.warn(`Error reading localStorage key “${key}”:`, error);
+      console.warn(
+        `Error reading localStorage key “${key}”:`,
+        error,
+      );
       return initialValue;
     }
   }
 
-  const [storedValue, setStoredValue] = useState<T>(readLocalStorage);
+  const [storedValue, setStoredValue] = useState<T>(
+    readLocalStorage,
+  );
 
   // Create dispatch function to set or remove localStorage
   const setValue: SetValue<T> = (value) => {
     try {
       const valueToStore =
-        value instanceof Function ? value(storedValue) : value;
+        value instanceof Function
+          ? value(storedValue)
+          : value;
       setStoredValue(valueToStore);
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      window.localStorage.setItem(
+        key,
+        JSON.stringify(valueToStore),
+      );
     } catch (error) {
       console.error("Error setting localStorage:", error);
     }
@@ -41,7 +54,10 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
           const newValue = JSON.parse(event.newValue);
           setStoredValue(newValue);
         } catch (error) {
-          console.error("Error setting localStorage:", error);
+          console.error(
+            "Error setting localStorage:",
+            error,
+          );
         }
       }
     };
@@ -49,7 +65,10 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
     window.addEventListener("storage", handleStorageChange);
 
     return () => {
-      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener(
+        "storage",
+        handleStorageChange,
+      );
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key]);
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fd12dc9..8696b9d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -22,6 +22,7 @@ html, body {
     html {
         @apply text-sm tablet:text-base;
     }
+
     * {
         @apply focus:outline focus:outline-blue-400 focus:rounded;
         @apply dark:focus:outline-blue-600;
@@ -57,13 +58,13 @@ html, body {
     }
 
     /* Text */
-
     a, .interactive {
         @apply opacity-90;
         @apply hover:opacity-100;
         @apply transition-opacity duration-[var(--animation-duration)] ease-[var(--animation-timing)];
     }
-    a[role='url']{
+
+    a[role='url'] {
         @apply opacity-100 text-blue-600;
         @apply hover:text-blue-500;
         @apply active:text-blue-700;
@@ -73,16 +74,18 @@ html, body {
         @apply dark:active:text-blue-600;
         @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
     }
+
     button {
-        @apply bg-blue-600 px-4 py-2 rounded-xl opacity-100;
-        @apply hover:bg-blue-500;
-        @apply active:bg-blue-700;
+        @apply bg-blue-600 text-zinc-100 px-4 py-2 rounded-xl opacity-100;
+        @apply hover:bg-blue-500 hover:text-zinc-100;
+        @apply active:bg-blue-700 active:text-zinc-100;
         @apply focus:outline-none;
-        @apply dark:bg-blue-500;
-        @apply dark:hover:bg-blue-400;
-        @apply dark:active:bg-blue-600;
+        @apply dark:bg-blue-500 dark:text-zinc-100;
+        @apply dark:hover:bg-blue-400 dark:hover:text-zinc-100;
+        @apply dark:active:bg-blue-600 dark:active:text-zinc-100;
         @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
     }
+
     button.ghost {
         @apply bg-transparent border border-blue-600 px-4 py-2 rounded-xl opacity-100;
         @apply hover:bg-blue-100;
@@ -93,6 +96,7 @@ html, body {
         @apply dark:active:bg-blue-900;
         @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
     }
+
     button.link {
         @apply bg-transparent px-4 py-2 rounded-xl opacity-100;
         @apply hover:bg-blue-100;
@@ -110,27 +114,44 @@ html, body {
     h1, h2, h3 {
         @apply font-bold;
     }
+
     h4, h5, h6 {
         @apply font-semibold;
     }
+
     h1 {
         @apply text-4xl tablet:text-5xl;
     }
+
     h2 {
         @apply text-3xl tablet:text-4xl;
     }
+
     h3 {
         @apply text-2xl tablet:text-3xl;
     }
+
     h4 {
         @apply text-xl tablet:text-2xl;
     }
+
     h5 {
         @apply text-lg tablet:text-xl;
     }
+
     h6 {
         @apply text-base tablet:text-lg;
     }
+
+    input {
+        @apply bg-zinc-100 px-4 py-2;
+        @apply rounded-lg focus:rounded-lg;
+        @apply border;
+        @apply border-zinc-400 hover:border-blue-300 active:border-blue-400;
+        @apply dark:bg-zinc-900;
+        @apply dark:border-zinc-600 dark:hover:border-blue-400 dark:active:border-blue-500;
+        @apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
+    }
 }
 
 @layer components {
@@ -148,22 +169,25 @@ html, body {
         @apply disabled:text-zinc-500;
         @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
     }
+
     div.layoutOption {
-         @apply rounded-lg overflow-hidden;
-         @apply justify-center;
-         @apply text-sm tablet:text-base;
-         @apply border;
-         @apply border-blue-400;
-         @apply bg-zinc-200;
-         @apply dark:border-blue-500;
-         @apply dark:bg-zinc-800;
+        @apply rounded-lg overflow-hidden;
+        @apply justify-center;
+        @apply text-sm tablet:text-base;
+        @apply border;
+        @apply border-blue-400;
+        @apply bg-zinc-200;
+        @apply dark:border-blue-500;
+        @apply dark:bg-zinc-800;
         @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
-     }
+    }
+
     div.layoutItem {
         @apply flex items-center justify-start gap-2 pr-2 pl-4 py-1 h-full w-full cursor-pointer;
         @apply bg-zinc-100 hover:bg-blue-300/25 focus:bg-zinc-50;
         @apply dark:bg-zinc-900 dark:hover:bg-blue-400/25 dark:focus:bg-zinc-950;
     }
+
     div.layoutItem[data-active="true"] {
         @apply bg-blue-300 cursor-default;
         @apply dark:bg-blue-400;
@@ -191,7 +215,8 @@ html, body {
         @apply dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:active:bg-zinc-950;
         @apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
     }
-    div.file-list{
+
+    div.file-list {
         @apply rounded-lg p-2 cursor-pointer w-full;
         @apply gap-2;
         @apply text-sm tablet:text-base;
@@ -212,6 +237,7 @@ html, body {
         @apply bg-zinc-400;
         @apply dark:border-zinc-600;
     }
+
     .divider-vertical {
         @apply h-full w-px rounded-lg;
         @apply bg-zinc-400;
diff --git a/src/styles/highlight.css b/src/styles/highlight.css
index e4547b1..abef881 100644
--- a/src/styles/highlight.css
+++ b/src/styles/highlight.css
@@ -1,128 +1,129 @@
 :root {
-  /**
-  * One Light theme for prism.js
-  * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
-  */
-  /* From colors.less */
-  --mono-1: hsl(230, 8%, 24%);
-  --mono-2: hsl(230, 6%, 44%);
-  --mono-3: hsl(230, 4%, 64%);
-  --hue-1: hsl(198, 99%, 37%);
-  --hue-2: hsl(221, 87%, 60%);
-  --hue-3: hsl(301, 63%, 40%);
-  --hue-4: hsl(119, 34%, 47%);
-  --hue-5: hsl(5, 74%, 59%);
-  --hue-5-2: hsl(344, 84%, 43%);
-  --hue-6: hsl(35, 99%, 36%);
-  --hue-6-2: hsl(35, 99%, 40%);
-  --syntax-fg: hsl(230, 8%, 24%);
-  --syntax-bg: hsl(230, 1%, 98%);
-  --syntax-gutter: hsl(230, 1%, 62%);
-  --syntax-guide: hsla(230, 8%, 24%, 0.2);
-  --syntax-accent: hsl(230, 100%, 66%);
-  /* From syntax-variables.less */
-  --syntax-selection-color: hsl(230, 1%, 90%);
-  --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
-  --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
+    /**
+    * One Light theme for prism.js
+    * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
+    */
+    /* From colors.less */
+    --mono-1: hsl(230, 8%, 24%);
+    --mono-2: hsl(230, 6%, 44%);
+    --mono-3: hsl(230, 4%, 64%);
+    --hue-1: hsl(198, 99%, 37%);
+    --hue-2: hsl(221, 87%, 60%);
+    --hue-3: hsl(301, 63%, 40%);
+    --hue-4: hsl(119, 34%, 47%);
+    --hue-5: hsl(5, 74%, 59%);
+    --hue-5-2: hsl(344, 84%, 43%);
+    --hue-6: hsl(35, 99%, 36%);
+    --hue-6-2: hsl(35, 99%, 40%);
+    --syntax-fg: hsl(230, 8%, 24%);
+    --syntax-bg: hsl(230, 1%, 98%);
+    --syntax-gutter: hsl(230, 1%, 62%);
+    --syntax-guide: hsla(230, 8%, 24%, 0.2);
+    --syntax-accent: hsl(230, 100%, 66%);
+    /* From syntax-variables.less */
+    --syntax-selection-color: hsl(230, 1%, 90%);
+    --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
+    --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
 }
+
 body.dark {
-  /**
-  * One Dark theme for prism.js
-  * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
-  */
-  /* From colors.less */
-  --mono-1: hsl(220, 14%, 71%);
-  --mono-2: hsl(220, 9%, 55%);
-  --mono-3: hsl(220, 10%, 40%);
-  --hue-1: hsl(187, 47%, 55%);
-  --hue-2: hsl(207, 82%, 66%);
-  --hue-3: hsl(286, 60%, 67%);
-  --hue-4: hsl(95, 38%, 62%);
-  --hue-5: hsl(355, 65%, 65%);
-  --hue-5-2: hsl(5, 48%, 51%);
-  --hue-6: hsl(29, 54%, 61%);
-  --hue-6-2: hsl(39, 67%, 69%);
-  --syntax-fg: hsl(220, 14%, 71%);
-  --syntax-bg: hsl(220, 13%, 18%);
-  --syntax-gutter: hsl(220, 14%, 45%);
-  --syntax-guide: hsla(220, 14%, 71%, 0.15);
-  --syntax-accent: hsl(220, 100%, 66%);
-  /* From syntax-variables.less */
-  --syntax-selection-color: hsl(220, 13%, 28%);
-  --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
-  --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
+    /**
+    * One Dark theme for prism.js
+    * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
+    */
+    /* From colors.less */
+    --mono-1: hsl(220, 14%, 71%);
+    --mono-2: hsl(220, 9%, 55%);
+    --mono-3: hsl(220, 10%, 40%);
+    --hue-1: hsl(187, 47%, 55%);
+    --hue-2: hsl(207, 82%, 66%);
+    --hue-3: hsl(286, 60%, 67%);
+    --hue-4: hsl(95, 38%, 62%);
+    --hue-5: hsl(355, 65%, 65%);
+    --hue-5-2: hsl(5, 48%, 51%);
+    --hue-6: hsl(29, 54%, 61%);
+    --hue-6-2: hsl(39, 67%, 69%);
+    --syntax-fg: hsl(220, 14%, 71%);
+    --syntax-bg: hsl(220, 13%, 18%);
+    --syntax-gutter: hsl(220, 14%, 45%);
+    --syntax-guide: hsla(220, 14%, 71%, 0.15);
+    --syntax-accent: hsl(220, 100%, 66%);
+    /* From syntax-variables.less */
+    --syntax-selection-color: hsl(220, 13%, 28%);
+    --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
+    --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
 }
 
 code[class*="language-"],
 pre[class*="language-"], pre {
-  background: var(--syntax-bg);
-  color: var(--syntax-fg);
-  text-shadow: 0 1px rgba(0, 0, 0, 0);
-  font-size: inherit;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  line-height: 1.5;
-  -moz-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
+    background: var(--syntax-bg);
+    color: var(--syntax-fg);
+    text-shadow: 0 1px rgba(0, 0, 0, 0);
+    font-size: inherit;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 2;
+    tab-size: 2;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
 }
 
 /* Selection */
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] *::-moz-selection,
 pre[class*="language-"] *::-moz-selection {
-  background: var(--syntax-selection-color);
-  color: inherit;
-  text-shadow: none;
+    background: var(--syntax-selection-color);
+    color: inherit;
+    text-shadow: none;
 }
 
 code[class*="language-"]::selection,
 code[class*="language-"] *::selection,
 pre[class*="language-"] *::selection {
-  background: var(--syntax-selection-color);
-  color: inherit;
-  text-shadow: none;
+    background: var(--syntax-selection-color);
+    color: inherit;
+    text-shadow: none;
 }
 
 /* Code blocks */
 pre[class*="language-"], pre {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  border-radius: 0.3em;
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-  padding: 0.2em 0.3em;
-  border-radius: 0.3em;
-  white-space: normal;
+    padding: 0.2em 0.3em;
+    border-radius: 0.3em;
+    white-space: normal;
 }
 
 /* Print */
 @media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
+    code[class*="language-"],
+    pre[class*="language-"] {
+        text-shadow: none;
+    }
 }
 
 .token.comment,
 .token.prolog,
 .token.cdata {
-  color: var(--mono-3);
+    color: var(--mono-3);
 }
 
 .token.doctype,
 .token.punctuation,
 .token.entity {
-  color: var(--syntax-fg);
+    color: var(--syntax-fg);
 }
 
 .token.attr-name,
@@ -131,11 +132,11 @@ pre[class*="language-"], pre {
 .token.constant,
 .token.number,
 .token.atrule {
-  color: var(--hue-6);
+    color: var(--hue-6);
 }
 
 .token.keyword {
-  color: var(--hue-3);
+    color: var(--hue-3);
 }
 
 .token.property,
@@ -143,7 +144,7 @@ pre[class*="language-"], pre {
 .token.symbol,
 .token.deleted,
 .token.important {
-  color: var(--hue-5);
+    color: var(--hue-5);
 }
 
 .token.selector,
@@ -154,123 +155,123 @@ pre[class*="language-"], pre {
 .token.regex,
 .token.attr-value,
 .token.attr-value > .token.punctuation {
-  color: var(--hue-4);
+    color: var(--hue-4);
 }
 
 .token.variable,
 .token.operator,
 .token.function {
-  color: var(--hue-2);
+    color: var(--hue-2);
 }
 
 .token.url {
-  color: var(--hue-1);
+    color: var(--hue-1);
 }
 
 /* HTML overrides */
 .token.attr-value > .token.punctuation.attr-equals,
 .token.special-attr > .token.attr-value > .token.value.css {
-  color: var(--syntax-fg);
+    color: var(--syntax-fg);
 }
 
 /* CSS overrides */
 .language-css .token.selector {
-  color: var(--hue-5);
+    color: var(--hue-5);
 }
 
 .language-css .token.property {
-  color: var(--syntax-fg);
+    color: var(--syntax-fg);
 }
 
 .language-css .token.function,
 .language-css .token.url > .token.function {
-  color: var(--hue-1);
+    color: var(--hue-1);
 }
 
 .language-css .token.url > .token.string.url {
-  color: var(--hue-4);
+    color: var(--hue-4);
 }
 
 .language-css .token.important,
 .language-css .token.atrule .token.rule {
-  color: var(--hue-3);
+    color: var(--hue-3);
 }
 
 /* JS overrides */
 .language-javascript .token.operator {
-  color: var(--hue-3);
+    color: var(--hue-3);
 }
 
 .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
-  color: var(--hue-5-2);
+    color: var(--hue-5-2);
 }
 
 /* JSON overrides */
 .language-json .token.operator {
-  color: var(--syntax-fg);
+    color: var(--syntax-fg);
 }
 
 .language-json .token.null.keyword {
-  color: var(--hue-6);
+    color: var(--hue-6);
 }
 
 /* MD overrides */
 .language-markdown .token.url,
 .language-markdown .token.url > .token.operator,
 .language-markdown .token.url-reference.url > .token.string {
-  color: var(--syntax-fg);
+    color: var(--syntax-fg);
 }
 
 .language-markdown .token.url > .token.content {
-  color: var(--hue-2);
+    color: var(--hue-2);
 }
 
 .language-markdown .token.url > .token.url,
 .language-markdown .token.url-reference.url {
-  color: var(--hue-1);
+    color: var(--hue-1);
 }
 
 .language-markdown .token.blockquote.punctuation,
 .language-markdown .token.hr.punctuation {
-  color: var(--mono-3);
-  font-style: italic;
+    color: var(--mono-3);
+    font-style: italic;
 }
 
 .language-markdown .token.code-snippet {
-  color: var(--hue-4);
+    color: var(--hue-4);
 }
 
 .language-markdown .token.bold .token.content {
-  color: var(--hue-6);
+    color: var(--hue-6);
 }
 
 .language-markdown .token.italic .token.content {
-  color: var(--hue-3);
+    color: var(--hue-3);
 }
 
 .language-markdown .token.strike .token.content,
 .language-markdown .token.strike .token.punctuation,
 .language-markdown .token.list.punctuation,
 .language-markdown .token.title.important > .token.punctuation {
-  color: var(--hue-5);
+    color: var(--hue-5);
 }
 
 /* General */
 .token.bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .token.comment,
 .token.italic {
-  font-style: italic;
+    font-style: italic;
 }
 
 .token.entity {
-  cursor: help;
+    cursor: help;
 }
 
 .token.namespace {
-  opacity: 0.8;
+    opacity: 0.8;
 }
 
 /* Plugin overrides */
@@ -281,24 +282,24 @@ pre[class*="language-"], pre {
 .token.token.cr:before,
 .token.token.lf:before,
 .token.token.space:before {
-  color: var(--syntax-guide);
-  text-shadow: none;
+    color: var(--syntax-guide);
+    text-shadow: none;
 }
 
 /* Toolbar plugin overrides */
 /* Space out all buttons and move them away from the right edge of the code block */
 div.code-toolbar > .toolbar.toolbar > .toolbar-item {
-  margin-right: 0.4em;
+    margin-right: 0.4em;
 }
 
 /* Styling the buttons */
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
-  background: var(--syntax-gutter-background-color-selected);
-  color: var(--mono-2);
-  padding: 0.1em 0.4em;
-  border-radius: 0.3em;
+    background: var(--syntax-gutter-background-color-selected);
+    color: var(--mono-2);
+    padding: 0.1em 0.4em;
+    border-radius: 0.3em;
 }
 
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
@@ -307,43 +308,43 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
-  background: var(--syntax-selection-color);
-  color: var(--syntax-fg);
+    background: var(--syntax-selection-color);
+    color: var(--syntax-fg);
 }
 
 /* Line Highlight plugin overrides */
 /* The highlighted line itself */
 .line-highlight.line-highlight {
-  background: var(--syntax-cursor-line);
+    background: var(--syntax-cursor-line);
 }
 
 /* Default line numbers in Line Highlight plugin */
 .line-highlight.line-highlight:before,
 .line-highlight.line-highlight[data-end]:after {
-  background: var(--syntax-gutter-background-color-selected);
-  color: var(--syntax-fg);
-  padding: 0.1em 0.6em;
-  border-radius: 0.3em;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
+    background: var(--syntax-gutter-background-color-selected);
+    color: var(--syntax-fg);
+    padding: 0.1em 0.6em;
+    border-radius: 0.3em;
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
 }
 
 /* Hovering over a linkable line number (in the gutter area) */
 /* Requires Line Numbers plugin as well */
 pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
-  background-color: var(--syntax-cursor-line);
+    background-color: var(--syntax-cursor-line);
 }
 
 /* Line Numbers and Command Line plugins overrides */
 /* Line separating gutter from coding area */
 .line-numbers.line-numbers .line-numbers-rows,
 .command-line .command-line-prompt {
-  border-right-color: var(--syntax-guide);
+    border-right-color: var(--syntax-guide);
 }
 
 /* Stuff in the gutter */
 .line-numbers .line-numbers-rows > span:before,
 .command-line .command-line-prompt > span:before {
-  color: var(--syntax-gutter);
+    color: var(--syntax-gutter);
 }
 
 /* Match Braces plugin overrides */
@@ -351,65 +352,65 @@ pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > spa
 .rainbow-braces .token.token.punctuation.brace-level-1,
 .rainbow-braces .token.token.punctuation.brace-level-5,
 .rainbow-braces .token.token.punctuation.brace-level-9 {
-  color: var(--hue-5);
+    color: var(--hue-5);
 }
 
 .rainbow-braces .token.token.punctuation.brace-level-2,
 .rainbow-braces .token.token.punctuation.brace-level-6,
 .rainbow-braces .token.token.punctuation.brace-level-10 {
-  color: var(--hue-4);
+    color: var(--hue-4);
 }
 
 .rainbow-braces .token.token.punctuation.brace-level-3,
 .rainbow-braces .token.token.punctuation.brace-level-7,
 .rainbow-braces .token.token.punctuation.brace-level-11 {
-  color: var(--hue-2);
+    color: var(--hue-2);
 }
 
 .rainbow-braces .token.token.punctuation.brace-level-4,
 .rainbow-braces .token.token.punctuation.brace-level-8,
 .rainbow-braces .token.token.punctuation.brace-level-12 {
-  color: var(--hue-3);
+    color: var(--hue-3);
 }
 
 /* Diff Highlight plugin overrides */
 /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
 pre.diff-highlight > code .token.token.deleted:not(.prefix),
 pre > code.diff-highlight .token.token.deleted:not(.prefix) {
-  background-color: hsla(353, 100%, 66%, 0.15);
+    background-color: hsla(353, 100%, 66%, 0.15);
 }
 
 pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
 pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
-  background-color: hsla(353, 95%, 66%, 0.25);
+    background-color: hsla(353, 95%, 66%, 0.25);
 }
 
 pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
 pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
-  background-color: hsla(353, 95%, 66%, 0.25);
+    background-color: hsla(353, 95%, 66%, 0.25);
 }
 
 pre.diff-highlight > code .token.token.inserted:not(.prefix),
 pre > code.diff-highlight .token.token.inserted:not(.prefix) {
-  background-color: hsla(137, 100%, 55%, 0.15);
+    background-color: hsla(137, 100%, 55%, 0.15);
 }
 
 pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
 pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
-  background-color: hsla(135, 73%, 55%, 0.25);
+    background-color: hsla(135, 73%, 55%, 0.25);
 }
 
 pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
 pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
-  background-color: hsla(135, 73%, 55%, 0.25);
+    background-color: hsla(135, 73%, 55%, 0.25);
 }
 
 /* Previewers plugin overrides */
@@ -417,48 +418,48 @@ pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
 /* Border around popup */
 .prism-previewer.prism-previewer:before,
 .prism-previewer-gradient.prism-previewer-gradient div {
-  border-color: hsl(224, 13%, 17%);
+    border-color: hsl(224, 13%, 17%);
 }
 
 /* Angle and time should remain as circles and are hence not included */
 .prism-previewer-color.prism-previewer-color:before,
 .prism-previewer-gradient.prism-previewer-gradient div,
 .prism-previewer-easing.prism-previewer-easing:before {
-  border-radius: 0.3em;
+    border-radius: 0.3em;
 }
 
 /* Triangles pointing to the code */
 .prism-previewer.prism-previewer:after {
-  border-top-color: hsl(224, 13%, 17%);
+    border-top-color: hsl(224, 13%, 17%);
 }
 
 .prism-previewer-flipped.prism-previewer-flipped.after {
-  border-bottom-color: hsl(224, 13%, 17%);
+    border-bottom-color: hsl(224, 13%, 17%);
 }
 
 /* Background colour within the popup */
 .prism-previewer-angle.prism-previewer-angle:before,
 .prism-previewer-time.prism-previewer-time:before,
 .prism-previewer-easing.prism-previewer-easing {
-  background: hsl(219, 13%, 22%);
+    background: hsl(219, 13%, 22%);
 }
 
 /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
 /* For time, this is the alternate colour */
 .prism-previewer-angle.prism-previewer-angle circle,
 .prism-previewer-time.prism-previewer-time circle {
-  stroke: var(--syntax-fg);
-  stroke-opacity: 1;
+    stroke: var(--syntax-fg);
+    stroke-opacity: 1;
 }
 
 /* Stroke colours of the handle, direction point, and vector itself */
 .prism-previewer-easing.prism-previewer-easing circle,
 .prism-previewer-easing.prism-previewer-easing path,
 .prism-previewer-easing.prism-previewer-easing line {
-  stroke: var(--syntax-fg);
+    stroke: var(--syntax-fg);
 }
 
 /* Fill colour of the handle */
 .prism-previewer-easing.prism-previewer-easing circle {
-  fill: transparent;
+    fill: transparent;
 }
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index 3c324a3..cec8069 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -1,75 +1,90 @@
 @tailwind components;
 
 @layer components {
-  .markdown {
-    @apply leading-normal text-inherit bg-inherit;
-  }
+    .markdown {
+        @apply leading-normal text-inherit bg-inherit;
+    }
 
-  
-  .markdown p {
-    @apply leading-loose;
-  }
 
-  .markdown h1, .markdown h2, .markdown h3 {
-    @apply mb-4 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700 first-letter:capitalize;
-  }
+    .markdown p {
+        @apply leading-loose;
+    }
 
-  .markdown code:not(pre code) {
-    @apply bg-zinc-300 dark:bg-zinc-700 px-1.5 rounded-lg;
-  }
-  .markdown code {
-    @apply font-code;
-  }
-  
-  .markdown a {
-    @apply text-blue-500 dark:text-blue-400;
-  }
-  .markdown p {
-    @apply whitespace-normal;
-  }
-  .markdown img {
-    @apply rounded-lg;
-  }
+    .markdown h1, .markdown h2, .markdown h3 {
+        @apply my-4 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700 first-letter:capitalize;
+    }
 
-  .markdown ul {
-    @apply list-disc leading-loose;
-  }
-  .markdown ol {
-    @apply list-decimal leading-loose;
-  }
-  .markdown li {
-    @apply ml-8;
-  }
+    .markdown code:not(pre code) {
+        @apply bg-zinc-300 dark:bg-zinc-700 px-2 leading-normal rounded-lg;
+    }
 
-  .markdown table {
-    @apply block w-full overflow-auto border-collapse mb-4 border-spacing-0;
-  }
-  .markdown table th, .markdown table td {
-    @apply py-1 px-3 border border-zinc-500 dark:border-zinc-500;
-  }
-  .markdown table th {
-    @apply bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100;
-  }
-  .markdown table tr {
-    @apply bg-zinc-100 dark:bg-zinc-900;
-  }
-  .markdown table tr:nth-child(2n) {
-    @apply bg-zinc-200 dark:bg-zinc-800;
-  }
+    .markdown code {
+        @apply font-code;
+    }
 
-  .markdown ul.contains-task-list {
-    @apply list-none ml-4;
-  }
-  .markdown input[type="checkbox"]{
-    @apply mr-2 w-4 h-4 aspect-square p-2;
-    @apply appearance-none border border-zinc-500;
-    @apply disabled:bg-zinc-200 dark:disabled:bg-zinc-700 disabled:checked:bg-blue-500 dark:disabled:checked:bg-blue-400;
-  }
+    .markdown a {
+        @apply text-blue-500 dark:text-blue-400;
+    }
 
-  .markdown blockquote {
-    @apply pl-2 border-l-4 border-l-zinc-500;
-  }
-  .markdown hr {
-    @apply my-4 border-t-0 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700;
-  }
+    .markdown p {
+        @apply whitespace-normal;
+    }
+
+    .markdown img {
+        @apply rounded-lg;
+    }
+
+    .markdown ul {
+        @apply list-disc leading-loose;
+    }
+
+    .markdown ol {
+        @apply list-decimal leading-loose;
+    }
+
+    .markdown li {
+        @apply ml-8;
+    }
+
+    .markdown table {
+        @apply block w-full overflow-auto border-collapse mb-4 border-spacing-0;
+    }
+
+    .markdown table th, .markdown table td {
+        @apply py-1 px-3 border border-zinc-500 dark:border-zinc-500;
+    }
+
+    .markdown table th {
+        @apply bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100;
+    }
+
+    .markdown table tr {
+        @apply bg-zinc-100 dark:bg-zinc-900;
+    }
+
+    .markdown table tr:nth-child(2n) {
+        @apply bg-zinc-200 dark:bg-zinc-800;
+    }
+
+    .markdown ul.contains-task-list {
+        @apply list-none;
+    }
+
+    .markdown ul.contains-task-list li {
+        @apply ml-1 flex items-center;
+    }
+
+    .markdown input[type="checkbox"] {
+        @apply mr-2 w-4 h-4 aspect-square p-2;
+        @apply appearance-none border border-zinc-500;
+        @apply disabled:bg-zinc-200 dark:disabled:bg-zinc-700 disabled:checked:bg-blue-500 dark:disabled:checked:bg-blue-400;
+    }
+
+    .markdown blockquote {
+        @apply pl-2 border-l-4 border-l-zinc-500;
+    }
+
+    .markdown hr {
+        @apply my-4 border-t-0 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700;
+    }
 }
\ No newline at end of file
diff --git a/src/utils/apiHelper/createErrorPayload.ts b/src/utils/apiHelper/createErrorPayload.ts
index 06d9505..9147b45 100644
--- a/src/utils/apiHelper/createErrorPayload.ts
+++ b/src/utils/apiHelper/createErrorPayload.ts
@@ -1,6 +1,7 @@
+import ExtendedError from "utils/generalHelper/extendedError";
+
 import { API_Error } from "types/api";
 import { Constant } from "types/general/constant";
-import ExtendedError from "utils/generalHelper/extendedError";
 
 function createErrorPayload(
   error: any,
diff --git a/src/utils/apiHelper/gdrive.ts b/src/utils/apiHelper/gdrive.ts
index 325630e..0bae381 100644
--- a/src/utils/apiHelper/gdrive.ts
+++ b/src/utils/apiHelper/gdrive.ts
@@ -1,6 +1,7 @@
-import apiConfig from "config/api.config";
 import { drive_v3, google } from "googleapis";
 
+import apiConfig from "config/api.config";
+
 //TODO: Move client_secret and refresh_token to config after setup page is done
 const config = {
   client_id:
diff --git a/src/utils/fileHelper/formatDate.ts b/src/utils/fileHelper/formatDate.ts
index 4a4b1d3..be4be24 100644
--- a/src/utils/fileHelper/formatDate.ts
+++ b/src/utils/fileHelper/formatDate.ts
@@ -4,6 +4,7 @@ function getLocale() {
     return window.navigator.languages[0];
   return window.navigator.language;
 }
+
 function formatDate(date: Date, locale = getLocale()) {
   return new Intl.DateTimeFormat(locale, {
     year: "numeric",
diff --git a/src/utils/fileHelper/iconMap.ts b/src/utils/fileHelper/iconMap.ts
index 8672396..bd44bd4 100644
--- a/src/utils/fileHelper/iconMap.ts
+++ b/src/utils/fileHelper/iconMap.ts
@@ -1,5 +1,3 @@
-import { typeGroup } from "./fileGroup";
-import { extensionMap, overlapVideo } from "./typeMap";
 import { IconType } from "react-icons";
 import {
   BsBoxFill,
@@ -20,6 +18,9 @@ import {
   BsFileEarmarkZipFill,
 } from "react-icons/bs";
 
+import { typeGroup } from "./fileGroup";
+import { extensionMap, overlapVideo } from "./typeMap";
+
 const iconMap: Record<keyof typeof typeGroup, IconType> = {
   "3d": BsBoxFill,
   "archive": BsFileEarmarkZipFill,
diff --git a/src/app/trigger.ts b/src/utils/fileHelper/trigger.ts
similarity index 100%
rename from src/app/trigger.ts
rename to src/utils/fileHelper/trigger.ts