From 0236c4a67d544a701a9f5967988984df4d7c6e21 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Tue, 5 Sep 2023 18:55:59 +0530
Subject: [PATCH] Porject list refactor

---
 app/newproject/page.js                        |   2 +-
 app/projects/page.jsx                         |   4 +-
 jsconfig.json                                 |   7 +-
 renderer/pages/newproject.js                  |   2 +-
 renderer/pages/projects.js                    |   8 +-
 renderer/src/Home.js                          |   2 +-
 renderer/src/WebHome.js                       |   2 +-
 renderer/src/components/Login/Signin.js       |   2 +
 .../src/components/Projects/CustomList.js     |  73 +++
 .../components/Projects/EnhancedTableHead.js  | 187 ++++++
 .../src/components/Projects/ImportPopUp.js    | 337 +++++++++++
 .../Projects/ImportPopUp.module.css           |   7 +
 .../Projects}/NewProject.js                   |   2 +-
 .../Projects}/NewWebProject.js                |   0
 .../src/components/Projects/ProjectList.js    | 106 ++++
 .../src/components/Projects/ProjectRow.js     | 210 +++++++
 .../Projects}/SearchTags.js                   |  12 +-
 .../Projects/hooks/useEditProject.js          |  63 +++
 .../Projects/hooks/useSelectProject.js        |  36 ++
 .../Projects/utils/SortingHelper.js           |  64 +++
 .../CreateProject/AdvancedSettingsDropdown.js |   2 +-
 renderer/src/components/Signup/WebSignup.js   |   4 -
 .../src/components/context/ProjectContext.js  |   2 +-
 .../hooks/projects/useProjectsSort.js         | 411 ++++----------
 renderer/src/modules/projects/ProjectList.js  | 496 ----------------
 renderer/src/modules/projects/ProjectsNav.js  |  29 -
 .../src/modules/projects/WebProjectList.js    | 533 ------------------
 .../modules/projects/hooks/useEditProject.js  |  62 ++
 .../projects/hooks/useSelectProject.js        |  36 ++
 supabase.js                                   |  50 +-
 30 files changed, 1340 insertions(+), 1411 deletions(-)
 create mode 100644 renderer/src/components/Projects/CustomList.js
 create mode 100644 renderer/src/components/Projects/EnhancedTableHead.js
 create mode 100644 renderer/src/components/Projects/ImportPopUp.js
 create mode 100644 renderer/src/components/Projects/ImportPopUp.module.css
 rename renderer/src/{modules/projects => components/Projects}/NewProject.js (99%)
 rename renderer/src/{modules/projects => components/Projects}/NewWebProject.js (100%)
 create mode 100644 renderer/src/components/Projects/ProjectList.js
 create mode 100644 renderer/src/components/Projects/ProjectRow.js
 rename renderer/src/{modules/projects => components/Projects}/SearchTags.js (91%)
 create mode 100644 renderer/src/components/Projects/hooks/useEditProject.js
 create mode 100644 renderer/src/components/Projects/hooks/useSelectProject.js
 create mode 100644 renderer/src/components/Projects/utils/SortingHelper.js
 delete mode 100644 renderer/src/modules/projects/ProjectList.js
 delete mode 100644 renderer/src/modules/projects/ProjectsNav.js
 delete mode 100644 renderer/src/modules/projects/WebProjectList.js
 create mode 100644 renderer/src/modules/projects/hooks/useEditProject.js
 create mode 100644 renderer/src/modules/projects/hooks/useSelectProject.js

diff --git a/app/newproject/page.js b/app/newproject/page.js
index 617bebfc2..aea0cfe49 100644
--- a/app/newproject/page.js
+++ b/app/newproject/page.js
@@ -1,5 +1,5 @@
 import ProtectedRoute from '@/components/Protected';
-import NewWebProject from '@/modules/projects/NewWebProject';
+import NewWebProject from '@/components/Projects/NewWebProject';
 
 const newproject = () => (
   <ProtectedRoute>
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index c938d1b54..3f93376ee 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -1,4 +1,6 @@
-import ProjectList from '@/modules/projects/WebProjectList';
+'use client';
+
+import ProjectList from '@/components/Projects/ProjectList';
 import ProtectedRoute from '@/components/Protected';
 
 const projects = () => (
diff --git a/jsconfig.json b/jsconfig.json
index a19b392f1..f94e0cddc 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,8 +1,6 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
     "paths": {
       "@/icons/*": [
         "public/icons/*"
@@ -25,6 +23,9 @@
       "@/util/*": [
         "renderer/src/util/*"
       ],
+      "@/app/*": [
+        "app/*"
+      ],
     }
   }
-}
+}
\ No newline at end of file
diff --git a/renderer/pages/newproject.js b/renderer/pages/newproject.js
index f4a44725d..7aba5fb9a 100644
--- a/renderer/pages/newproject.js
+++ b/renderer/pages/newproject.js
@@ -1,4 +1,4 @@
-import NewProject from '@/modules/projects/NewProject';
+import NewProject from '@/components/Projects/NewProject';
 import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
 import ProjectContextProvider from '@/components/context/ProjectContext';
 import AutographaContextProvider from '@/components/context/AutographaContext';
diff --git a/renderer/pages/projects.js b/renderer/pages/projects.js
index 2dcd20e2b..f880b0da9 100644
--- a/renderer/pages/projects.js
+++ b/renderer/pages/projects.js
@@ -1,9 +1,9 @@
-import ProjectList from '@/modules/projects/ProjectList';
+import ProjectList from '@/components/Projects/ProjectList';
 import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
 import AutographaContextProvider from '@/components/context/AutographaContext';
 import ProjectContextProvider from '@/components/context/ProjectContext';
 
-const projects = () => (
+const Projects = () => (
   <AuthenticationContextProvider>
     <AutographaContextProvider>
       <ProjectContextProvider>
@@ -11,6 +11,6 @@ const projects = () => (
       </ProjectContextProvider>
     </AutographaContextProvider>
   </AuthenticationContextProvider>
-);
+  );
 
-export default projects;
+export default Projects;
diff --git a/renderer/src/Home.js b/renderer/src/Home.js
index b51891b6f..d5e337410 100644
--- a/renderer/src/Home.js
+++ b/renderer/src/Home.js
@@ -2,13 +2,13 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 
 import { useContext, useState, useEffect } from 'react';
+import ProjectList from '@/components/Projects/ProjectList';
 import Login from './components/Login/Login';
 import AuthenticationContextProvider, { AuthenticationContext } from './components/Login/AuthenticationContextProvider';
 import { loadUsers } from './core/Login/handleJson';
 import ProjectContextProvider from './components/context/ProjectContext';
 import ReferenceContextProvider from './components/context/ReferenceContext';
 import * as logger from './logger';
-import ProjectList from './modules/projects/ProjectList';
 import AutographaContextProvider from './components/context/AutographaContext';
 import { getorPutAppLangage } from './core/projects/handleProfile';
 import i18n from './translations/i18n';
diff --git a/renderer/src/WebHome.js b/renderer/src/WebHome.js
index 3cf91c8f5..2b769078f 100644
--- a/renderer/src/WebHome.js
+++ b/renderer/src/WebHome.js
@@ -14,7 +14,7 @@ const WebHome = () => {
   useEffect(() => {
     const checkSession = async () => {
       const data = await getSupabaseSession();
-      if (data.session) {
+      if (data.session.user) {
         setSession(data.session);
         const appLangCode = await getorPutAppLangage('get', data.session.user.email);
         if (i18n.language !== appLangCode) {
diff --git a/renderer/src/components/Login/Signin.js b/renderer/src/components/Login/Signin.js
index 65be379cc..a9b7db2f3 100644
--- a/renderer/src/components/Login/Signin.js
+++ b/renderer/src/components/Login/Signin.js
@@ -21,6 +21,8 @@ const SignIn = () => {
     if (data.session) {
       console.log('sign in success', data);
       await localforage.setItem('userProfile', data);
+      const userData = await localforage.getItem('userProfile');
+      console.log({ userData });
       router.push('/projects');
       setLoading(false);
     } else {
diff --git a/renderer/src/components/Projects/CustomList.js b/renderer/src/components/Projects/CustomList.js
new file mode 100644
index 000000000..a08a9c798
--- /dev/null
+++ b/renderer/src/components/Projects/CustomList.js
@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
+import { classNames } from '../../util/classNames';
+
+export default function CustomList({
+ selected, setSelected, options, show, width,
+}) {
+  const dropdownWidth = width ?? 40;
+  return (
+    <Listbox value={selected} onChange={setSelected} disabled={!show}>
+      <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
+        <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
+          <span className="block truncate">{selected?.title}</span>
+          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+            <ChevronUpDownIcon
+              className="w-5 h-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
+            {options.map((option) => (
+              <Listbox.Option
+                key={option.title}
+                className={({ active }) => `${active ? 'text-amber-900 bg-amber-100' : 'text-gray-900'}
+                  cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-gray-200`}
+                value={option}
+              >
+                {({ selected, active }) => (
+                  <>
+                    <span
+                      className={`${
+                        selected ? 'font-medium' : 'font-normal'
+                      } block truncate`}
+                    >
+                      {option.title}
+                    </span>
+                    {selected ? (
+                      <span
+                        className={`${
+                          active ? 'text-amber-600' : 'text-amber-600'
+                        }
+                        absolute inset-y-0 left-0 flex items-center pl-3`}
+                      >
+                        <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+}
+
+CustomList.propTypes = {
+  selected: PropTypes.object,
+  setSelected: PropTypes.func,
+  options: PropTypes.array,
+  show: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
diff --git a/renderer/src/components/Projects/EnhancedTableHead.js b/renderer/src/components/Projects/EnhancedTableHead.js
new file mode 100644
index 000000000..4f028d42d
--- /dev/null
+++ b/renderer/src/components/Projects/EnhancedTableHead.js
@@ -0,0 +1,187 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  TableSortLabel,
+  TableCell,
+} from '@material-ui/core';
+import {
+  StarIcon,
+} from '@heroicons/react/24/outline';
+import i18n from '../../translations/i18n';
+
+// import { Menu, Transition } from '@headlessui/react';
+
+const headCells = [
+  {
+    // id: 'name', numeric: false, disablePadding: true, label: 'Project Name',
+    id: 'name', numeric: false, disablePadding: true, label: i18n.t('label-project-name'),
+  },
+  {
+    id: 'language', numeric: false, disablePadding: true, label: i18n.t('label-language'),
+  },
+  {
+    // id: 'type', numeric: false, disablePadding: true, label: 'Flavor',
+    id: 'type', numeric: false, disablePadding: true, label: i18n.t('label-flavour'),
+  },
+  {
+    id: 'date', numeric: true, disablePadding: false, label: i18n.t('label-created-date'),
+  },
+  {
+    id: 'view', numeric: true, disablePadding: false, label: i18n.t('label-last-viewed'),
+  },
+  // {
+  //   id: 'editors', numeric: false, disablePadding: false, label: 'Editors',
+  // },
+  // {
+  //   id: 'more', numeric: false, disablePadding: false, label: '',
+  // },
+];
+
+function EnhancedTableHead(props) {
+  const {
+    order, orderBy, onRequestSort,
+  } = props;
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <thead className="bg-gray-50">
+      <tr>
+        <th
+          scope="col"
+            // colSpan="2"
+          className="px-4 py-3 text-left text-xs font-medium text-gray-400"
+        >
+          <StarIcon className="h-5 w-5" aria-hidden="true" />
+        </th>
+
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            className="bg-gray-50"
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <div className="flex content-center">
+              {/* <Menu as="div" className="relative inline-block mr-2 mt-2">
+                  <Menu.Button className="focus:outline-none">
+                    <FilterIcon
+                      className="w-4 h-4 text-gray-400 hover:text-gray-600"
+                      aria-hidden="true"
+                    />
+                  </Menu.Button>
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-white
+                    divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black
+                    ring-opacity-5 focus:outline-none"
+                    >
+                      <div className="px-3 py-2 bg-gray-100 flex justify-between uppercase text-xs text-gray-500">
+                        Filters
+                      </div>
+                      <div className="px-1 py-1 ">
+                        <Menu.Item>
+                          {({ active }) => (
+                            <div className={`${active ? 'bg-primary text-white' : 'text-gray-600'
+                              } group flex items-center rounded-md w-full px-2 py-2 text-sm`}
+                            >
+                              <input
+                                type="checkbox"
+                                className={`${active ? 'border-black' : 'border-gray-300'}
+                                mr-2 form-tick appearance-none h-4
+                              w-4 border  rounded-md checked:bg-primary
+                              checked:border-transparent focus:outline-none`}
+                              />
+                              Active
+                            </div>
+                          )}
+                        </Menu.Item>
+                        <Menu.Item>
+                          {({ active }) => (
+                            <div className={`${active ? 'bg-primary text-white' : 'text-gray-600'
+                              } group flex items-center rounded-md w-full px-2 py-2 text-sm`}
+                            >
+                              <input
+                                type="checkbox"
+                                className={`${active ? 'border-black' : 'border-gray-300'}
+                                mr-2 form-tick appearance-none h-4
+                              w-4 border  rounded-md checked:bg-primary
+                              checked:border-transparent focus:outline-none`}
+                              />
+                              Finished
+                            </div>
+                          )}
+                        </Menu.Item>
+                      </div>
+                      <div className="px-3 py-2 bg-gray-100 flex justify-between">
+
+                        <Menu.Item>
+                          <button
+                            type="button"
+                            className="px-3 py-1 rounded btn-xs bg-white border border-gray-400 hover:border-gray-400 text-gray-500 hover:text-gray-600"
+                          >
+                            Clear
+                          </button>
+                        </Menu.Item>
+
+                        <Menu.Item>
+                          <button
+                            type="button"
+                            className="px-3 py-1 rounded btn-xs bg-primary border border-gray-400 hover:border-gray-400 text-white hover:text-gray-600"
+                          >
+                            Apply
+                          </button>
+                        </Menu.Item>
+
+                      </div>
+                    </Menu.Items>
+                  </Transition>
+                </Menu> */}
+
+              <TableSortLabel
+                scope="col"
+                id="sorthead"
+                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                style={{ fontWeight: 'bold', color: 'grey' }}
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <span hidden>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </span>
+                  ) : null}
+
+              </TableSortLabel>
+
+            </div>
+          </TableCell>
+          ))}
+
+        <th
+          scope="col"
+          className="px-4 py-3 text-left text-xs font-medium text-gray-400"
+        >
+          {/* <ExternalLinkIcon className="h-5 w-5" aria-hidden="true" /> */}
+        </th>
+      </tr>
+    </thead>
+  );
+}
+
+export default EnhancedTableHead;
+
+EnhancedTableHead.propTypes = {
+  onRequestSort: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  orderBy: PropTypes.string.isRequired,
+};
diff --git a/renderer/src/components/Projects/ImportPopUp.js b/renderer/src/components/Projects/ImportPopUp.js
new file mode 100644
index 000000000..b547eb43f
--- /dev/null
+++ b/renderer/src/components/Projects/ImportPopUp.js
@@ -0,0 +1,337 @@
+import React, {
+  useRef, Fragment, useContext, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Dialog, Transition } from '@headlessui/react';
+import { DocumentTextIcon, FolderOpenIcon } from '@heroicons/react/24/outline';
+import { SnackBar } from '@/components/SnackBar';
+import { ProjectContext } from '@/components/context/ProjectContext';
+import styles from './ImportPopUp.module.css';
+import * as logger from '../../logger';
+import CloseIcon from '@/illustrations/close-button-black.svg';
+
+const grammar = require('usfm-grammar');
+
+export default function ImportPopUp(props) {
+  const {
+    open,
+    closePopUp,
+    projectType,
+  } = props;
+
+  const cancelButtonRef = useRef(null);
+  const [books, setBooks] = React.useState([]);
+  const [folderPath, setFolderPath] = React.useState([]);
+  const [valid, setValid] = React.useState(false);
+  const [snackBar, setOpenSnackBar] = React.useState(false);
+  const [snackText, setSnackText] = React.useState('');
+  const [notify, setNotify] = React.useState();
+  const [show, setShow] = React.useState(false);
+  const [fileFilter, setfileFilter] = React.useState([{ name: 'usfm files', extensions: ['usfm', 'sfm', 'USFM', 'SFM'] }]);
+  const { t } = useTranslation();
+  const [labelImportFiles, setLabelImportFiles] = React.useState('Choose USFM files');
+  const {
+    actions: {
+      setImportedFiles,
+    },
+  } = useContext(ProjectContext);
+
+  function close() {
+    logger.debug('ImportPopUp.js', 'Closing the Import UI');
+    setValid(false);
+    setShow(false);
+    closePopUp();
+  }
+  function clear() {
+    logger.debug('ImportPopUp.js', 'Clearing the data from the path box');
+    setFolderPath([]);
+    setBooks([]);
+  }
+  const getBooks = (filePaths) => {
+    logger.debug('ImportPopUp.js', 'In getBooks for displaying books name using the paths');
+    const book = [];
+    // regex to split path to two groups '(.*[\\\/])' for path and '(.*)' for file name
+    const regexPath = /^(.*[\\//])(.*)$/;
+    // execute the match on the string filePath
+    filePaths.forEach((filePath) => {
+      const match = regexPath.exec(filePath);
+      if (match !== null) {
+        // we ignore the match[0] because it's the match for the hole path string
+        const fileName = match[2];
+        book.push(fileName);
+      }
+    });
+    setBooks(book);
+  };
+  const openFileDialogSettingData = async () => {
+    logger.debug('ImportPopUp.js', 'Inside openFileDialogSettingData');
+    const options = {
+      properties: ['openFile', 'multiSelections'],
+      filters: fileFilter,
+    };
+    const { dialog } = window.require('@electron/remote');
+    const chosenFolder = await dialog.showOpenDialog(options);
+    if ((chosenFolder.filePaths).length > 0) {
+      logger.debug('ImportPopUp.js', 'Selected the files');
+      setShow(true);
+    } else {
+      logger.debug('ImportPopUp.js', 'Didn\'t select any file');
+      close();
+    }
+    await getBooks(chosenFolder.filePaths);
+    setFolderPath(chosenFolder.filePaths);
+  };
+
+  const OBSValidate = (filename) => {
+    let match = false;
+    logger.debug('ImportPopUp.js', 'Inside OBS validate, allow file name with 01-50 only');
+    logger.debug('ImportPopUp.js', filename);
+    if (filename === 'front.md' || filename === 'back.md') {
+      match = true;
+    } else {
+      const regexExp = /^(5[0]|[1-4][0-9]|[0][1-9]).md$/;
+      match = regexExp.exec(filename);
+    }
+    return match;
+  };
+
+  const importFiles = (folderPath) => {
+    logger.debug('ImportPopUp.js', 'Inside importFiles');
+    const fs = window.require('fs');
+    const files = [];
+    folderPath.forEach((filePath) => {
+      switch (projectType) {
+        case 'Translation': {
+          const usfm = fs.readFileSync(filePath, 'utf8');
+          const myUsfmParser = new grammar.USFMParser(usfm);
+          const isJsonValid = myUsfmParser.validate();
+          if (isJsonValid) {
+            logger.debug('ImportPopUp.js', 'Valid USFM file.');
+            const jsonOutput = myUsfmParser.toJSON();
+            files.push({ id: jsonOutput.book.bookCode, content: usfm });
+          } else {
+            logger.warn('ImportPopUp.js', 'Invalid USFM file.');
+            setNotify('failure');
+            setSnackText(t('dynamic-msg-invalid-usfm-file'));
+            setOpenSnackBar(true);
+          }
+          break;
+        }
+
+        case 'Audio': {
+          const usfm = fs.readFileSync(filePath, 'utf8');
+          const myUsfmParser = new grammar.USFMParser(usfm);
+          const isJsonValid = myUsfmParser.validate();
+          if (isJsonValid) {
+            logger.debug('ImportPopUp.js', 'Valid USFM file.');
+            const jsonOutput = myUsfmParser.toJSON();
+            files.push({ id: jsonOutput.book.bookCode, content: usfm });
+          } else {
+            logger.warn('ImportPopUp.js', 'Invalid USFM file.');
+            setNotify('failure');
+            setSnackText(t('dynamic-msg-invalid-usfm-file'));
+            setOpenSnackBar(true);
+          }
+          break;
+        }
+
+        case 'OBS': {
+          const mdfile = fs.readFileSync(filePath, 'utf8');
+          let filename = filePath.split(/[(\\)?(/)?]/gm).pop();
+          const regexExp = /^([1-9]).md$/;
+
+          const matchSingleDigit = regexExp.exec(filename);
+          if (matchSingleDigit) {
+            let fileNum = filename.split('.')[0];
+            fileNum = fileNum.toString().padStart(2, 0);
+            filename = `${fileNum}.md`;
+          }
+          const isMdValid = OBSValidate(filename);
+          if (isMdValid) {
+            logger.debug('ImportPopUp.js', 'Valid Md file.');
+            files.push({ id: filename, content: mdfile });
+          } else {
+            logger.warn('ImportPopUp.js', 'Invalid Md file.');
+            setNotify('failure');
+            setSnackText(t('dynamic-msg-invalid-md-file'));
+            setOpenSnackBar(true);
+          }
+          break;
+        }
+
+        default:
+          break;
+      }
+    });
+    setImportedFiles(files);
+    close();
+  };
+  const importProject = async () => {
+    logger.debug('ImportPopUp.js', 'Inside importProject');
+    if (folderPath.length > 0) {
+      logger.debug('ImportPopUp.js', 'Importing the data');
+      setValid(false);
+      closePopUp(false);
+      await importFiles(folderPath);
+    } else {
+      logger.debug('ImportPopUp.js', 'Invalid Path');
+      setValid(true);
+      setNotify('failure');
+      setSnackText(t('dynamic-msg-invalid-path'));
+      setOpenSnackBar(true);
+    }
+  };
+  useEffect(() => {
+    logger.debug('ImportPopUp.js', 'Inside useEffect to set filter types of Import');
+    switch (projectType) {
+      case 'Translation':
+        setfileFilter([{ name: 'usfm files', extensions: ['usfm', 'sfm', 'USFM', 'SFM'] }]);
+        setLabelImportFiles('Choose USFM files');
+        break;
+
+      case 'OBS':
+        setfileFilter([{ name: 'markdown files', extensions: ['md', 'markdown', 'MD', 'MARKDOWN'] }]);
+        setLabelImportFiles('Choose Markdown files');
+      break;
+
+      default:
+        break;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectType]);
+
+  useEffect(() => {
+    if (open) {
+      openFileDialogSettingData();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return (
+    <>
+      <Transition
+        show={show}
+        as={Fragment}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          initialFocus={cancelButtonRef}
+          static
+          open={show}
+          onClose={() => close}
+        >
+          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+          <div className="flex items-center justify-center h-screen">
+            <div className="lg:w-5/12 h-3/6 items-center justify-center m-auto z-50 shadow overflow-hidden rounded">
+
+              <div className="relative h-full rounded shadow overflow-hidden bg-white">
+
+                <div className="flex justify-between items-center bg-secondary">
+                  <div className="uppercase bg-secondary text-white py-2 px-5 text-xs tracking-widest leading-snug rounded-tl text-center">
+                    {t('label-import-book')}
+                  </div>
+                  <button
+                    onClick={close}
+                    type="button"
+                    className="focus:outline-none"
+                  >
+                    <CloseIcon
+                      className="h-6 w-7"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
+
+                <div className="relative w-full h-full">
+                  <div className="p-8 overflow-auto w-full h-full no-scrollbars">
+                    <div className="bg-white text-sm text-left tracking-wide">
+                      <h4 className="text-xs font-base mb-2 text-primary  tracking-wide leading-4  font-light">{labelImportFiles}</h4>
+                      <div className="flex items-center mb-4">
+                        <input
+                          type="text"
+                          name="location"
+                          id=""
+                          value={folderPath}
+                          onChange={(e) => setFolderPath(e.target.value)}
+                          className="bg-white w-52 lg:w-80 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300"
+                        />
+                        <button
+                          type="button"
+                          className="px-5"
+                          onClick={() => openFileDialogSettingData()}
+                        >
+                          <FolderOpenIcon className="h-6 w-6 text-primary" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                    <div>
+                      <h4 className="text-red-500">{valid === true ? t('label-enter-location') : ''}</h4>
+                    </div>
+                    <div className="bg-white grid grid-cols-4 gap-2 p-4 pb-24 text-sm text-left tracking-wide">
+                      {
+                        books.map((book) => (
+                          <div key={book} className={`${styles.select} group`}>
+                            <DocumentTextIcon className="w-6 mr-2 group-hover:text-white" />
+                            {book}
+                          </div>
+                        ))
+                      }
+                    </div>
+
+                  </div>
+                </div>
+
+                <div className="absolute bottom-0 right-0 left-0 bg-white">
+                  <div className="flex gap-6 mx-5 justify-end my-4">
+                    <button
+                      type="button"
+                      onClick={close}
+                      className="py-2 px-6 rounded shadow bg-error text-white uppercase text-xs tracking-widest font-semibold"
+                    >
+                      {t('btn-cancel')}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={clear}
+                      className="py-2 px-6 rounded shadow bg-primary text-white uppercase text-xs tracking-widest font-semibold"
+                    >
+                      {t('btn-clear')}
+                    </button>
+                    <button
+                      type="button"
+                      className="py-2 px-7 rounded shadow bg-success text-white uppercase text-xs tracking-widest font-semibold"
+                      onClick={() => importProject()}
+                    >
+                      {t('btn-import')}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+        </Dialog>
+      </Transition>
+      <SnackBar
+        openSnackBar={snackBar}
+        snackText={snackText}
+        setOpenSnackBar={setOpenSnackBar}
+        setSnackText={setSnackText}
+        error={notify}
+      />
+    </>
+  );
+}
+ImportPopUp.propTypes = {
+  open: PropTypes.bool,
+  closePopUp: PropTypes.func,
+  projectType: PropTypes.string,
+};
diff --git a/renderer/src/components/Projects/ImportPopUp.module.css b/renderer/src/components/Projects/ImportPopUp.module.css
new file mode 100644
index 000000000..90b492eb6
--- /dev/null
+++ b/renderer/src/components/Projects/ImportPopUp.module.css
@@ -0,0 +1,7 @@
+.select {
+  @apply flex items-center px-2 py-1 text-gray-500 hover:bg-primary hover:text-white cursor-pointer rounded;
+}
+
+.active {
+  @apply flex items-center px-2 py-1 bg-primary text-white cursor-pointer rounded;
+}
diff --git a/renderer/src/modules/projects/NewProject.js b/renderer/src/components/Projects/NewProject.js
similarity index 99%
rename from renderer/src/modules/projects/NewProject.js
rename to renderer/src/components/Projects/NewProject.js
index 8a068605c..137f8c78b 100644
--- a/renderer/src/modules/projects/NewProject.js
+++ b/renderer/src/components/Projects/NewProject.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import ProjectsLayout from '@/layouts/projects/Layout';
diff --git a/renderer/src/modules/projects/NewWebProject.js b/renderer/src/components/Projects/NewWebProject.js
similarity index 100%
rename from renderer/src/modules/projects/NewWebProject.js
rename to renderer/src/components/Projects/NewWebProject.js
diff --git a/renderer/src/components/Projects/ProjectList.js b/renderer/src/components/Projects/ProjectList.js
new file mode 100644
index 000000000..8c58286f4
--- /dev/null
+++ b/renderer/src/components/Projects/ProjectList.js
@@ -0,0 +1,106 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { useState, useContext } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import ProjectsLayout from '@/layouts/projects/Layout';
+import EnhancedTableHead from '@/components/ProjectsPage/Projects/EnhancedTableHead';
+import { AutographaContext } from '@/components/context/AutographaContext';
+
+import ExportProjectPopUp from '@/layouts/projects/Export/ExportProjectPopUp';
+// import ProjectContextProvider from '@/components/context/ProjectContext';
+// import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
+import LoadingScreen from '@/components/Loading/LoadingScreen';
+import SearchTags from './SearchTags';
+import NewProject from './NewProject';
+import * as logger from '../../logger';
+import ProjectRow from './ProjectRow';
+
+export default function ProjectList() {
+  const { t } = useTranslation();
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [showArchived, setShowArchived] = useState(false);
+
+  const filterList = ['name', 'language', 'type', 'date', 'view'];
+  const {
+    states: {
+      // starredProjects,
+      projects,
+      // unstarredProjects,
+      callEditProject,
+    },
+    action: {
+      setProjects,
+      handleClickStarred,
+      setCallEditProject,
+      FetchProjects,
+    },
+  } = useContext(AutographaContext);
+  const [openPopUp, setOpenPopUp] = useState(false);
+  const [currentProject, setCurrentProject] = useState();
+  const openExportPopUp = (project) => {
+    setCurrentProject(project);
+    setOpenPopUp(true);
+  };
+  const closeExportPopUp = () => {
+    setOpenPopUp(false);
+  };
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const closeEditProject = async () => {
+    logger.debug('ProjectList.js', 'Closing edit project page and updating the values');
+    setCallEditProject(false);
+    await FetchProjects();
+  };
+  return (
+    <>
+      {!callEditProject ? (
+        <ProjectsLayout
+          title={t('projects-page')}
+          archive="enable"
+          isImport
+          showArchived={showArchived}
+          setShowArchived={setShowArchived}
+          header={(
+            <SearchTags
+              contentList1={projects}
+              // contentList2={projects}
+              filterList={filterList}
+              onfilerRequest1={setProjects}
+              // onfilerRequest2={setProjects}
+            />
+          )}
+        >
+          <div className="mx-auto py-6 sm:px-6 lg:px-8">
+            <div className="px-4 py-4 sm:px-0">
+
+              <div className="flex flex-col">
+                <div className="-my-2 sm:-mx-6 lg:-mx-8">
+                  <div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                    <div className="shadow border-b border-gray-200 sm:rounded-lg">
+                      <table data-testid="tablelayout" className="min-w-full divide-y divide-gray-200 mb-9">
+                        <EnhancedTableHead
+                          order={order}
+                          orderBy={orderBy}
+                          onRequestSort={handleRequestSort}
+                        />
+                        <ProjectRow projects={projects} order={order} orderBy={orderBy} showArchived={showArchived} openExportPopUp={openExportPopUp} setCurrentProject={setCurrentProject} handleClickStarred={handleClickStarred} />
+                      </table>
+                      {(!projects) && <div><LoadingScreen /></div>}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </ProjectsLayout>
+      ) : <NewProject call="edit" project={currentProject} closeEdit={() => closeEditProject()} />}
+      <ExportProjectPopUp open={openPopUp} closePopUp={closeExportPopUp} project={currentProject} />
+    </>
+  );
+}
diff --git a/renderer/src/components/Projects/ProjectRow.js b/renderer/src/components/Projects/ProjectRow.js
new file mode 100644
index 000000000..dce122b0f
--- /dev/null
+++ b/renderer/src/components/Projects/ProjectRow.js
@@ -0,0 +1,210 @@
+import React, { Fragment, useContext } from 'react';
+import { Disclosure, Menu, Transition } from '@headlessui/react';
+import {
+  StarIcon, EllipsisVerticalIcon,
+} from '@heroicons/react/24/outline';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
+import moment from 'moment';
+import { getComparator, stableSort } from '@/components/ProjectsPage/Projects/SortingHelper';
+import { AutographaContext } from '@/components/context/AutographaContext';
+import { useRouter } from 'next/navigation';
+import { useTranslation } from 'react-i18next';
+import useEditProject from './hooks/useEditProject';
+import useHandleSelectProject from './hooks/useSelectProject';
+
+const ProjectRow = ({
+  projects, order, orderBy, showArchived, openExportPopUp, handleClickStarred, setCurrentProject,
+}) => {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { editProject } = useEditProject();
+  const { handleSelectProject } = useHandleSelectProject();
+
+  const {
+    states: {
+      activeNotificationCount,
+    },
+    action: {
+      archiveProject,
+      setSelectedProject,
+      setNotifications,
+      setCallEditProject,
+      setActiveNotificationCount,
+    },
+  } = useContext(AutographaContext);
+
+  function filterArchive(project) {
+    if (project.isArchived === showArchived) {
+      return true;
+    } if (project.isArchived === undefined && showArchived === false) {
+      return true;
+    }
+    return false;
+  }
+
+  function sortStarred(a, b) {
+    if (a.starred === b.starred) {
+      return 0;
+    }
+    if (a.starred && !b.starred) {
+      return -1;
+    } if (!a.starred && b.starred) {
+      return 1;
+    }
+    return 0;
+  }
+  return (
+    <tbody className="bg-white divide-y divide-gray-200">
+      {projects && (stableSort(
+        projects,
+        getComparator(order, orderBy),
+        orderBy,
+        order,
+      ).filter(filterArchive).sort(sortStarred).map((project) => (
+        <Disclosure key={project.id[0]}>
+          {({ open }) => (
+            <>
+              <tr className="hover:bg-gray-100 focus:outline-none cursor-pointer">
+                <td
+                  className="px-4 py-4"
+                >
+                  <button
+                    title={project.starred ? 'unstar-project' : 'star-project'}
+                    aria-label={project.starred ? 'unstar-project' : 'star-project'}
+                    onClick={(event) => handleClickStarred(event, project.name, project.starred ? 'unstarred' : 'starred')}
+                    type="button"
+                  >
+                    {project.starred
+                      ? <StarIcon className="h-5 w-5 fill-current text-yellow-400" aria-hidden="true" />
+                      : <StarIcon className="h-5 w-5" aria-hidden="true" />}
+                  </button>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="flex items-center">
+                    <div className="ml-0">
+                      <div
+                        id={`${project.name}`}
+                        onClick={
+                          (event) => handleSelectProject(event, project.name, project.id[0], router, activeNotificationCount, setSelectedProject, setNotifications, setActiveNotificationCount)
+                        }
+                        role="button"
+                        aria-label={project.starred ? 'unstar-project-name' : 'star-project-name'}
+                        tabIndex="0"
+                        className="text-sm font-medium text-gray-900"
+                      >
+                        {project.name}
+
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-sm text-gray-900">{project.language}</div>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="text-sm text-gray-900">{project.type}</div>
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-500">{moment(project.date).format('LL')}</td>
+                <td className="px-6 py-4 text-sm text-gray-500">{moment(project.view, 'YYYY-MM-DD h:mm:ss').fromNow()}</td>
+                <td className="px-6 py-4 text-right text-sm font-medium">
+                  <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-gray-500 rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
+                    {open
+                      ? <ChevronUpIcon aria-label="arrow-up" className="w-5 h-5 text-gray-500 hover:text-purple-600" />
+                      : <ChevronDownIcon aria-label="expand-project" className="w-5 h-5 text-gray-500 hover:text-purple-600" />}
+                  </Disclosure.Button>
+                </td>
+              </tr>
+              <Transition
+                as={Fragment}
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Disclosure.Panel as="tr" key={project.name}>
+                  <td className="px-6 py-4">
+                    <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">description</div>
+                    <div aria-label="project-description-display" className="text-sm tracking-wide p-1">{project.description}</div>
+                  </td>
+                  <td colSpan="3" className="px-5">
+                    <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">Project ID</div>
+                    <div className="text-sm tracking-wide p-1">{project.id[0]}</div>
+                  </td>
+                  <td className="pl-5">
+                    <Menu as="div">
+                      <div>
+                        <Menu.Button className="px-5">
+                          <EllipsisVerticalIcon className="h-5 w-5 text-primary" aria-label="menu-project" aria-hidden="true" />
+                        </Menu.Button>
+                      </div>
+                      <Transition
+                        as={Fragment}
+                        enter="transition ease-out duration-100"
+                        enterFrom="transform opacity-0 scale-95"
+                        enterTo="transform opacity-100 scale-100"
+                        leave="transition ease-in duration-75"
+                        leaveFrom="transform opacity-100 scale-100"
+                        leaveTo="transform opacity-0 scale-95"
+                      >
+                        <Menu.Items className="fixed right-26 top-4 w-56 mb-1 z-50 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                          <div className="px-1 py-1">
+                            <Menu.Item>
+                              {({ active }) => (
+                                <button
+                                  type="button"
+                                  aria-label="edit-project"
+                                  className={`${active ? 'bg-primary text-white' : 'text-gray-900'
+                                    } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
+                                  onClick={() => editProject(project, setCurrentProject, setCallEditProject)}
+                                >
+                                  {t('btn-edit')}
+                                </button>
+                              )}
+                            </Menu.Item>
+                            <Menu.Item>
+                              {({ active }) => (
+                                <button
+                                  type="button"
+                                  className={`${active ? 'bg-primary text-white' : 'text-gray-900'
+                                    } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
+                                  onClick={() => openExportPopUp(project)}
+                                >
+                                  {t('btn-export')}
+                                </button>
+                              )}
+                            </Menu.Item>
+                            <Menu.Item>
+                              {({ active }) => (
+                                <button
+                                  type="button"
+                                  className={`${active ? 'bg-primary text-white' : 'text-gray-900'
+                                    } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
+                                  onClick={() => {
+                                    archiveProject(project, project.name);
+                                  }}
+                                >
+                                  {project.isArchived === true ? 'Restore' : 'Archive'}
+                                </button>
+                              )}
+                            </Menu.Item>
+                          </div>
+                        </Menu.Items>
+                      </Transition>
+                    </Menu>
+
+                  </td>
+                </Disclosure.Panel>
+
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      ))
+      )}
+    </tbody>
+  );
+};
+
+export default ProjectRow;
diff --git a/renderer/src/modules/projects/SearchTags.js b/renderer/src/components/Projects/SearchTags.js
similarity index 91%
rename from renderer/src/modules/projects/SearchTags.js
rename to renderer/src/components/Projects/SearchTags.js
index c68e6522e..b88cd8b69 100644
--- a/renderer/src/modules/projects/SearchTags.js
+++ b/renderer/src/components/Projects/SearchTags.js
@@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next';
 export default function SearchTags({
   defaultQuery,
   contentList1,
-  contentList2,
+  // contentList2,
   filterList,
   onfilerRequest1,
-  onfilerRequest2,
+  // onfilerRequest2,
 }) {
   const { t } = useTranslation();
   const [query, setQuery] = React.useState(defaultQuery);
@@ -40,11 +40,11 @@ export default function SearchTags({
   React.useEffect(() => {
     if (query) {
       onfilerRequest1(onQuery(query, contentList1));
-      onfilerRequest2(onQuery(query, contentList2));
+      // onfilerRequest2(onQuery(query, contentList2));
     }
     if (!query) {
       onfilerRequest1(contentList1);
-      onfilerRequest2(contentList2);
+      // onfilerRequest2(contentList2);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query]);
@@ -72,11 +72,11 @@ SearchTags.propTypes = {
   defaultQuery: PropTypes.string,
   /** Array list of items  */
   contentList1: PropTypes.array,
-  contentList2: PropTypes.array,
+  // contentList2: PropTypes.array,
   /** Array list to be filtered  */
   filterList: PropTypes.array,
   /** Function to propogate the returned repositories data array. */
   onfilerRequest1: PropTypes.func,
-  onfilerRequest2: PropTypes.func,
+  // onfilerRequest2: PropTypes.func,
   /** Configuration required if paths are provided as URL. */
 };
diff --git a/renderer/src/components/Projects/hooks/useEditProject.js b/renderer/src/components/Projects/hooks/useEditProject.js
new file mode 100644
index 000000000..4245698f9
--- /dev/null
+++ b/renderer/src/components/Projects/hooks/useEditProject.js
@@ -0,0 +1,63 @@
+import * as localforage from 'localforage';
+import { isElectron } from '@/core/handleElectron';
+import * as logger from '../../../logger';
+import packageInfo from '../../../../../package.json';
+import { environment } from '../../../../environment';
+import { sbStorageDownload } from '../../../../../supabase';
+
+const useEditProject = () => {
+  const path = require('path');
+  const getDirNameFromMetadata = (metadata) => {
+    const firstKey = Object.keys(metadata.ingredients)[0];
+    const folderName = firstKey.split(/[(\\)?(/)?]/gm).slice(0, -1);
+    let dirName = '';
+    folderName.forEach((folder) => {
+      dirName = path.join(dirName, folder);
+    });
+    return dirName;
+  };
+
+  const loadProjectData = async (project) => {
+    try {
+      let folder;
+      let data;
+      let settings;
+
+      const userProfile = await localforage.getItem('userProfile');
+
+      if (isElectron()) {
+        const fs = window.require('fs');
+        const newpath = localStorage.getItem('userPath');
+        folder = path.join(newpath, packageInfo.name, 'users', userProfile.username, 'projects', `${project.name}_${project.id[0]}`);
+        data = fs.readFileSync(path.join(folder, 'metadata.json'), 'utf-8');
+        const dirName = getDirNameFromMetadata(JSON.parse(data));
+        settings = fs.readFileSync(path.join(folder, dirName, environment.PROJECT_SETTING_FILE), 'utf-8');
+      } else {
+        folder = path.join('scribe', 'users', userProfile.user.email, 'projects', `${project.name}_${project.id[0]}`);
+        data = (await sbStorageDownload(path.join(folder, 'metadata.json'))).data;
+        const dirName = getDirNameFromMetadata(JSON.parse(await data.text()));
+        settings = (await sbStorageDownload(path.join(folder, dirName, environment.PROJECT_SETTING_FILE), 'utf-8')).data;
+      }
+
+      const metadata = JSON.parse(data instanceof Blob ? await data.text() : data);
+      const agSetting = JSON.parse(settings instanceof Blob ? await settings.text() : settings);
+
+      logger.debug('ProjectList.js', 'Loading current project metadata');
+
+      return { ...metadata, ...agSetting };
+    } catch (e) {
+      logger.debug(e);
+    }
+  };
+
+  const editProject = async (project, setCurrentProject, setCallEditProject) => {
+    console.log('editing this...', { project });
+    const metadata = await loadProjectData(project);
+    setCurrentProject(metadata);
+    setCallEditProject(true);
+  };
+
+  return { editProject };
+};
+
+export default useEditProject;
diff --git a/renderer/src/components/Projects/hooks/useSelectProject.js b/renderer/src/components/Projects/hooks/useSelectProject.js
new file mode 100644
index 000000000..37ab41378
--- /dev/null
+++ b/renderer/src/components/Projects/hooks/useSelectProject.js
@@ -0,0 +1,36 @@
+import * as localforage from 'localforage';
+import moment from 'moment';
+import * as logger from '../../../logger';
+
+const useHandleSelectProject = () => {
+  const handleSelectProject = (
+    event,
+    projectName,
+    projectId,
+    router,
+    activeNotificationCount,
+    setSelectedProject,
+    setNotifications,
+    setActiveNotificationCount,
+  ) => {
+    logger.debug('ProjectList.js', 'In handleSelectProject');
+    setSelectedProject(projectName);
+    localforage.setItem('currentProject', `${projectName}_${projectId}`);
+    router.push('/home');
+    localforage.getItem('notification').then((value) => {
+      const temp = [...value];
+      temp.push({
+        title: 'Project',
+        text: `successfully loaded ${projectName} files`,
+        type: 'success',
+        time: moment().format(),
+        hidden: true,
+      });
+      setNotifications(temp);
+    }).then(() => setActiveNotificationCount(activeNotificationCount + 1));
+  };
+
+  return { handleSelectProject };
+};
+
+export default useHandleSelectProject;
diff --git a/renderer/src/components/Projects/utils/SortingHelper.js b/renderer/src/components/Projects/utils/SortingHelper.js
new file mode 100644
index 000000000..68ea5d186
--- /dev/null
+++ b/renderer/src/components/Projects/utils/SortingHelper.js
@@ -0,0 +1,64 @@
+import moment from 'moment';
+
+moment.updateLocale('en', {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s ago',
+    s: 'a few seconds',
+    m: 'a minute',
+    mm: '%d minutes',
+    h: 'an hour',
+    hh: '%d hours',
+    d: 'a day',
+    dd(number) {
+      if (number < 7) {
+        return `${number} days`; // Moment uses "d" when it's just 1 day.
+      }
+      const weeks = Math.round(number / 7);
+      return `${weeks} ${weeks > 1 ? 'weeks' : 'week'}`;
+    },
+    M: 'a month',
+    MM: '%d months',
+    y: 'a year',
+    yy: '%d years',
+  },
+});
+
+function descendingComparator(a, b, orderBy) {
+  if (orderBy !== 'date' && (orderBy !== 'status') && orderBy !== 'editors') {
+    if (b[orderBy]?.toLowerCase() < a[orderBy]?.toLowerCase()) {
+      return -1;
+    }
+    if (b[orderBy]?.toLowerCase() > a[orderBy]?.toLowerCase()) {
+      return 1;
+    }
+    return 0;
+  }
+  return 0;
+}
+
+export function getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+export function stableSort(array, comparator, orderBy, dateorder) {
+  if (orderBy !== 'date' && (orderBy !== 'status') && orderBy !== 'editors') {
+    const stabilizedThis = array.map((el, index) => [el, index]);
+    stabilizedThis.sort((a, b) => {
+      const order = comparator(a[0], b[0]);
+      if (order !== 0) { return order; }
+      return a[1] - b[1];
+    });
+    return stabilizedThis.map((el) => el[0]);
+  }
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const dateA = new Date(a[0].date);
+    const dateB = new Date(b[0].date);
+    if (dateorder === 'desc') { return dateB - dateA; }
+    return dateA - dateB;
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
diff --git a/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js b/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
index 60b343be4..eb7bae0dc 100644
--- a/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
+++ b/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
 import localforage from 'localforage';
 import { useTranslation } from 'react-i18next';
-import CustomList from '@/modules/projects/CustomList';
 import { isElectron } from '@/core/handleElectron';
+import CustomList from '@/components/Projects/CustomList';
 import { OT, NT } from '../../../lib/CanonSpecification';
 import { ProjectContext } from '../../context/ProjectContext';
 import CustomCanonSpecification from './CustomCanonSpecification';
diff --git a/renderer/src/components/Signup/WebSignup.js b/renderer/src/components/Signup/WebSignup.js
index fa399945f..ec6331611 100644
--- a/renderer/src/components/Signup/WebSignup.js
+++ b/renderer/src/components/Signup/WebSignup.js
@@ -5,10 +5,6 @@ import { useRouter } from 'next/navigation';
 import { createSupabaseSettingJson, createWebUser } from '@/core/Login/handleLogin';
 import { environment } from '../../../environment';
 import { supabaseSignup, newPath } from '../../../../supabase';
-// if (!process.env.NEXT_PUBLIC_IS_ELECTRON) {
-//   const newPath = require('../../../../supabase').newPath
-//   const supabase = require('../../../../../supabase').supabase
-// }
 
 function SignupPage() {
   const [email, setEmail] = useState('');
diff --git a/renderer/src/components/context/ProjectContext.js b/renderer/src/components/context/ProjectContext.js
index 47479a08a..de2d1066f 100644
--- a/renderer/src/components/context/ProjectContext.js
+++ b/renderer/src/components/context/ProjectContext.js
@@ -427,7 +427,7 @@ const ProjectContextProvider = ({ children }) => {
       Object.assign(projectMetaObj, temp_obj);
     }
     logger.debug('ProjectContext.js', 'Calling saveProjectsMeta with required props');
-    const status = await saveProjectsMeta(projectMetaObj);
+    const status = isElectron() ? await saveProjectsMeta(projectMetaObj) : await saveSupabaseProjectsMeta(projectMetaObj);
     return status;
   };
 
diff --git a/renderer/src/components/hooks/projects/useProjectsSort.js b/renderer/src/components/hooks/projects/useProjectsSort.js
index d1f5bcb64..a072e250d 100644
--- a/renderer/src/components/hooks/projects/useProjectsSort.js
+++ b/renderer/src/components/hooks/projects/useProjectsSort.js
@@ -5,11 +5,8 @@ import {
   updateAgSettings,
   updateWebAgSettings,
 } from '../../../core/projects/updateAgSettings';
-import parseProjectMetaUpdate from '../../../core/projects/parseProjectMetaUpdate';
-// import metaFileReplace from '../../../core/projects/metaFileReplace';
 import { isElectron } from '../../../core/handleElectron';
 import fetchProjectsMeta from '../../../core/projects/fetchProjectsMeta';
-// import parseFileUpdate from '../../../core/projects/parseFileUpdate';
 import * as logger from '../../../logger';
 
 function useProjectsSort() {
@@ -21,14 +18,16 @@ function useProjectsSort() {
   const [orderByUnstarred, setOrderByUnstarred] = React.useState('name');
   const [starredProjects, setStarredProjets] = React.useState();
   const [unstarredProjects, setUnStarredProjets] = React.useState();
+  const [projects, setProjects] = React.useState();
   const [selectedProject, setSelectedProject] = React.useState('');
   const [notifications, setNotifications] = React.useState([]);
+  const [callEditProject, setCallEditProject] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const [activeNotificationCount, setActiveNotificationCount] = React.useState(0);
 
   const starrtedData = [];
   const unstarrtedData = [];
-  const username = 'Michael';
+  const allProjects = [];
 
   useEffect(() => {
     if (notifications.length !== 0) {
@@ -41,162 +40,6 @@ function useProjectsSort() {
     });
   }, [notifications]);
 
-  const handleClickStarred = async (event, name, property) => {
-    logger.debug(
-      'useProjectsSort.js',
-      'converting starred to be unstarred and viceversa',
-    );
-    property === 'starred' ? setactive('starred') : setactive('unstarred');
-    const selectedIndex = property === 'starred'
-      ? starredrow.findIndex((x) => x.name === name)
-      : unstarredrow.findIndex((x) => x.name === name);
-    const copy = property === 'starred'
-      ? starredrow.splice(selectedIndex, 1)
-      : unstarredrow.splice(selectedIndex, 1);
-    const projectArrayTemp = [];
-    if (isElectron()) {
-      let currentUser;
-      await localForage.getItem('userProfile').then((value) => {
-        currentUser = value?.username;
-      });
-      const projects = localForage.getItem('projectmeta');
-      projects
-        .then((value) => {
-          if (value) {
-            projectArrayTemp.push(value);
-          }
-        })
-        .then(() => {
-          projectArrayTemp[0].projects.forEach((_project) => {
-            if (_project.identification.name.en === name) {
-              let dirName;
-              switch (_project.type.flavorType.flavor.name) {
-                case 'textTranslation':
-                  dirName = 'textTranslation';
-                  break;
-                case 'textStories':
-                  dirName = 'textStories';
-                  break;
-                case 'audioTranslation':
-                  dirName = 'audioTranslation';
-                  break;
-                default:
-                  break;
-              }
-              const status = _project.project[dirName].starred;
-              const selectedProject = _project;
-              selectedProject.project[dirName].starred = !status;
-              selectedProject.project[dirName].lastSeen = moment().format();
-            }
-          });
-        })
-        .finally(() => {
-          localForage
-            .setItem('projectmeta', projectArrayTemp[0])
-            .then(() => {
-              projectArrayTemp[0].projects.forEach((_project) => {
-                if (_project.identification.name.en === name) {
-                  const id = Object.keys(
-                    _project.identification.primary.scribe,
-                  );
-                  const projectName = `${name}_${id}`;
-                  logger.debug(
-                    'useProjectsSort.js',
-                    `Updating star/unstar in Scribe settings for ${name}`,
-                  );
-                  updateAgSettings(
-                    currentUser,
-                    projectName,
-                    _project,
-                  );
-                }
-              });
-              // metaFileReplace({ userData: projectArrayTemp[0] });
-            });
-        });
-    } else {
-      parseProjectMetaUpdate({
-        username,
-        projectName: name,
-      });
-    }
-    settemparray(copy[0]);
-  };
-  const handleWebClickStarred = async (event, name, property) => {
-    logger.debug(
-      'useProjectsSort.js',
-      'converting starred to be unstarred and viceversa',
-    );
-    property === 'starred' ? setactive('starred') : setactive('unstarred');
-    const selectedIndex = property === 'starred'
-      ? starredrow.findIndex((x) => x.name === name)
-      : unstarredrow.findIndex((x) => x.name === name);
-    const copy = property === 'starred'
-      ? starredrow.splice(selectedIndex, 1)
-      : unstarredrow.splice(selectedIndex, 1);
-    const projectArrayTemp = [];
-      let currentUser;
-      await localForage.getItem('userProfile').then((value) => {
-        currentUser = value?.user?.email;
-      });
-      const projects = localForage.getItem('projectmeta');
-      projects
-        .then((value) => {
-          if (value) {
-            projectArrayTemp.push(value);
-          }
-        })
-        .then(() => {
-          projectArrayTemp[0].projects.forEach((_project) => {
-            if (_project.identification.name.en === name) {
-              let dirName;
-              switch (_project.type.flavorType.flavor.name) {
-                case 'textTranslation':
-                  dirName = 'textTranslation';
-                  break;
-                case 'textStories':
-                  dirName = 'textStories';
-                  break;
-                case 'audioTranslation':
-                  dirName = 'audioTranslation';
-                  break;
-                default:
-                  break;
-              }
-              const status = _project.project[dirName].starred;
-              const selectedProject = _project;
-              selectedProject.project[dirName].starred = !status;
-              selectedProject.project[dirName].lastSeen = moment().format();
-            }
-          });
-        })
-        .finally(() => {
-          localForage
-            .setItem('projectmeta', projectArrayTemp[0])
-            .then(() => {
-              projectArrayTemp[0].projects.forEach((_project) => {
-                if (_project.identification.name.en === name) {
-                  const id = Object.keys(
-                    _project.identification.primary.scribe,
-                  );
-                  const projectName = `${name}_${id}`;
-                  logger.debug(
-                    'useProjectsSort.js',
-                    `Updating star/unstar in Scribe settings for ${name}`,
-                  );
-                  updateWebAgSettings(
-                    currentUser,
-                    projectName,
-                    _project,
-                  );
-                }
-              });
-              // metaFileReplace({ userData: projectArrayTemp[0] });
-            });
-        });
-    settemparray(copy[0]);
-  };
-
   const handleRequestSortUnstarred = (event, property) => {
     logger.debug(
       'useProjectsSort.js',
@@ -246,6 +89,7 @@ function useProjectsSort() {
     id,
     type,
     isArchived,
+    starred,
   ) => ({
     name,
     language,
@@ -255,9 +99,10 @@ function useProjectsSort() {
     id,
     type,
     isArchived,
+    starred,
   });
 
-  const FetchStarred = (
+  const fetchAllProjects = (
     ProjectName,
     Language,
     createdAt,
@@ -266,32 +111,9 @@ function useProjectsSort() {
     id,
     type,
     isArchived,
+    starred,
   ) => {
-    starrtedData.push(
-      createData(
-        ProjectName,
-        Language,
-        createdAt,
-        LastView,
-        ProjectDescription,
-        id,
-        type,
-        isArchived,
-      ),
-    );
-  };
-
-  const FetchUnstarred = (
-    ProjectName,
-    Language,
-    createdAt,
-    LastView,
-    ProjectDescription,
-    id,
-    type,
-    isArchived,
-  ) => {
-    unstarrtedData.push(
+    allProjects.push(
       createData(
         ProjectName,
         Language,
@@ -301,6 +123,7 @@ function useProjectsSort() {
         id,
         type,
         isArchived,
+        starred,
       ),
     );
   };
@@ -331,6 +154,7 @@ function useProjectsSort() {
                       let description;
                       let flavorType;
                       let isArchived;
+                      let starred;
                       switch (
                       _project.type.flavorType.flavor
                         .name
@@ -345,6 +169,7 @@ function useProjectsSort() {
                           isArchived = _project.project
                             ?.textTranslation
                             ?.isArchived;
+                            starred = _project.project?.textTranslation?.starred;
                           flavorType = 'Text Translation';
                           break;
                         case 'textStories':
@@ -357,6 +182,7 @@ function useProjectsSort() {
                           isArchived = _project.project
                             ?.textStories
                             ?.isArchived;
+                            starred = _project.project?.textStories?.starred;
                           flavorType = 'OBS';
                           break;
                         case 'audioTranslation':
@@ -369,50 +195,26 @@ function useProjectsSort() {
                           isArchived = _project.project
                             ?.audioTranslation
                             ?.isArchived;
+                            starred = _project.project?.audioTranslation?.starred;
                           flavorType = 'Audio';
                           break;
                         default:
                           break;
                       }
-                      if (
-                        _project.project
-                          ?.textTranslation
-                          ?.starred === true
-                        || _project.project?.textStories
-                          ?.starred === true
-                        || _project.project
-                          ?.audioTranslation
-                          ?.starred === true
-                      ) {
-                        // FetchStarred(projectName,language, createdAt, updatedAt);
-                        FetchStarred(
-                          _project.identification.name
-                            .en,
-                          _project.languages[0].name
-                            .en,
-                          // _project.identification.primary.scribe[created].timestamp,
-                          _project.meta.dateCreated,
-                          lastSeen,
-                          description,
-                          created,
-                          flavorType,
-                          isArchived,
-                        );
-                      } else {
-                        FetchUnstarred(
-                          _project.identification.name
-                            .en,
-                          _project.languages[0].name
-                            .en,
-                          // _project.identification.primary.scribe[created].timestamp,
-                          _project.meta.dateCreated,
-                          lastSeen,
-                          description,
-                          created,
-                          flavorType,
-                          isArchived,
-                        );
-                      }
+                      fetchAllProjects(
+                        _project.identification.name
+                          .en,
+                        _project.languages[0].name
+                          .en,
+                        // _project.identification.primary.scribe[created].timestamp,
+                        _project.meta.dateCreated,
+                        lastSeen,
+                        description,
+                        created,
+                        flavorType,
+                        isArchived,
+                        starred,
+                      );
                     });
                   }
                 })
@@ -421,6 +223,7 @@ function useProjectsSort() {
                   setStarredProjets(starrtedData);
                   setUnStarredRow(unstarrtedData);
                   setUnStarredProjets(unstarrtedData);
+                  setProjects(allProjects);
                 });
             })
             .catch((err) => {
@@ -435,101 +238,101 @@ function useProjectsSort() {
       });
     }
   };
-
-  /**
-   * Updates the project's archive status in the localForage database.
-   * @param name - the name of the project
-   */
   const archiveProject = async (project, name) => {
     const userProfile = await localForage.getItem('userProfile');
-    const currentUser = userProfile?.username;
+    const currentUser = isElectron() ? userProfile?.username : userProfile?.user?.email;
 
     const projects = await localForage.getItem('projectmeta');
+    const updatedProjects = JSON.parse(JSON.stringify(projects));
 
-    const projectArrayTemp = JSON.parse(JSON.stringify(projects));
+    updatedProjects.projects.forEach((_project) => {
+      if (_project.identification.name.en !== name) { return; }
 
-    projectArrayTemp.projects.forEach((_project) => {
-      if (_project.identification.name.en === name) {
-        let dirName;
-        switch (_project.type.flavorType.flavor.name) {
-          case 'textTranslation': {
-            dirName = 'textTranslation';
-            break;
-          }
-          case 'textStories': {
-            dirName = 'textStories';
-            break;
-          }
-          case 'audioTranslation': {
-            dirName = 'audioTranslation';
-            break;
-          }
-          default:
-            break;
-        }
-        const status = _project.project[dirName].isArchived;
-        const selectedProject = _project;
-        selectedProject.project[dirName].isArchived = !status;
-        selectedProject.project[dirName].lastSeen = moment().format();
-      }
-    });
+      const flavorName = _project.type.flavorType.flavor.name;
+      const dirNameMap = {
+        textTranslation: 'textTranslation',
+        textStories: 'textStories',
+        audioTranslation: 'audioTranslation',
+      };
+
+      const dirName = dirNameMap[flavorName];
+      if (!dirName) { return; }
 
-    await localForage.setItem('projectmeta', projectArrayTemp);
+      const status = _project.project[dirName].isArchived;
+      _project.project[dirName].isArchived = !status;
+      _project.project[dirName].lastSeen = moment().format();
 
-    projectArrayTemp.projects.forEach((_project) => {
-      if (_project.identification.name.en === name) {
-        const id = Object.keys(_project.identification.primary.scribe);
-        const projectName = `${name}_${id}`;
-        logger.debug('useProjectsSort.js', `Updating archive/restore in scribe settings for ${name}`);
+      const id = Object.keys(_project.identification.primary.scribe);
+      const projectName = `${name}_${id}`;
+      logger.debug('useProjectsSort.js', `Updating archive/restore in scribe settings for ${name}`);
+
+      if (isElectron()) {
         updateAgSettings(currentUser, projectName, _project);
+      } else {
+        updateWebAgSettings(currentUser, projectName, _project);
       }
     });
+
+    await localForage.setItem('projectmeta', updatedProjects);
     await FetchProjects();
   };
-  const archiveWebProject = async (project, name) => {
-    const userProfile = await localForage.getItem('userProfile');
-    const currentUser = userProfile?.user?.email;
-
-    const projects = await localForage.getItem('projectmeta');
 
-    const projectArrayTemp = JSON.parse(JSON.stringify(projects));
+  const handleClickStarred = async (event, name, property) => {
+    // Helper Function: Determine directory name
+    const getDirName = (flavorName) => {
+      const dirNameMap = {
+        textTranslation: 'textTranslation',
+        textStories: 'textStories',
+        audioTranslation: 'audioTranslation',
+      };
+      return dirNameMap[flavorName];
+    };
 
-    projectArrayTemp.projects.forEach((_project) => {
-      if (_project.identification.name.en === name) {
-        let dirName;
-        switch (_project.type.flavorType.flavor.name) {
-          case 'textTranslation': {
-            dirName = 'textTranslation';
-            break;
-          }
-          case 'textStories': {
-            dirName = 'textStories';
-            break;
+    // Helper Function: Toggle the starred status of projects
+    const toggleStarredStatus = (projects, name) => {
+      projects.forEach((project) => {
+        if (project.identification.name.en === name) {
+          const dirName = getDirName(project.type.flavorType.flavor.name);
+          if (dirName) {
+            project.project[dirName].starred = !project.project[dirName].starred;
+            project.project[dirName].lastSeen = moment().format();
           }
-          case 'audioTranslation': {
-            dirName = 'audioTranslation';
-            break;
-          }
-          default:
-            break;
         }
-        const status = _project.project[dirName].isArchived;
-        const selectedProject = _project;
-        selectedProject.project[dirName].isArchived = !status;
-        selectedProject.project[dirName].lastSeen = moment().format();
-      }
-    });
+      });
+    };
 
-    await localForage.setItem('projectmeta', projectArrayTemp);
+    logger.debug('useProjectsSort.js', 'converting starred to be unstarred and viceversa');
 
-    projectArrayTemp.projects.forEach((_project) => {
-      if (_project.identification.name.en === name) {
-        const id = Object.keys(_project.identification.primary.scribe);
-        const projectName = `${name}_${id}`;
-        logger.debug('useProjectsSort.js', `Updating archive/restore in scribe settings for ${name}`);
-        updateWebAgSettings(currentUser, projectName, _project);
+    const isActiveStarred = property === 'starred';
+    setactive(isActiveStarred ? 'starred' : 'unstarred');
+
+    const rows = isActiveStarred ? starredrow : unstarredrow;
+    const copy = rows.splice(rows.findIndex((x) => x.name === name), 1);
+
+    const userProfile = await localForage.getItem('userProfile');
+    const currentUser = isElectron() ? userProfile?.username : userProfile?.user?.email;
+
+    const projectsData = await localForage.getItem('projectmeta');
+    if (!projectsData) { return; }
+
+    const projects = JSON.parse(JSON.stringify(projectsData.projects));
+    toggleStarredStatus(projects, name);
+
+    await localForage.setItem('projectmeta', { ...projectsData, projects });
+
+    const projectToUpdate = projects.find((project) => project.identification.name.en === name);
+    if (projectToUpdate) {
+      const id = Object.keys(projectToUpdate.identification.primary.scribe)[0];
+      const projectName = `${name}_${id}`;
+      logger.debug('useProjectsSort.js', `Updating star/unstar in Scribe settings for ${name}`);
+      if (isElectron()) {
+        updateAgSettings(currentUser, projectName, projectToUpdate);
+      } else {
+        updateWebAgSettings(currentUser, projectName, projectToUpdate);
       }
-    });
+    }
+
+    settemparray(copy[0]);
     await FetchProjects();
   };
 
@@ -542,6 +345,8 @@ function useProjectsSort() {
     state: {
       starredrow,
       unstarredrow,
+      projects,
+      callEditProject,
       orderUnstarred,
       orderByUnstarred,
       starredProjects,
@@ -553,12 +358,14 @@ function useProjectsSort() {
     },
     actions: {
       handleClickStarred,
-      handleWebClickStarred,
+      // handleWebClickStarred,
+      setCallEditProject,
       handleDelete,
       handleRequestSortUnstarred,
       archiveProject,
-      archiveWebProject,
+      // archiveWebProject,
       setStarredRow,
+      setProjects,
       setLoading,
       setUnStarredRow,
       settemparray,
diff --git a/renderer/src/modules/projects/ProjectList.js b/renderer/src/modules/projects/ProjectList.js
deleted file mode 100644
index c4d37c513..000000000
--- a/renderer/src/modules/projects/ProjectList.js
+++ /dev/null
@@ -1,496 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import React, { Fragment, useState } from 'react';
-import { useRouter } from 'next/router';
-import moment from 'moment';
-
-import { Disclosure, Transition, Menu } from '@headlessui/react';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
-import {
-  StarIcon, EllipsisVerticalIcon,
-} from '@heroicons/react/24/outline';
-import localforage from 'localforage';
-
-import { useTranslation } from 'react-i18next';
-import ProjectsLayout from '@/layouts/projects/Layout';
-import EnhancedTableHead from '@/components/ProjectsPage/Projects/EnhancedTableHead';
-import AutographaContextProvider, { AutographaContext } from '@/components/context/AutographaContext';
-import { getComparator, stableSort } from '@/components/ProjectsPage/Projects/SortingHelper';
-
-import ExportProjectPopUp from '@/layouts/projects/Export/ExportProjectPopUp';
-import ProjectContextProvider from '@/components/context/ProjectContext';
-import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider';
-import LoadingScreen from '@/components/Loading/LoadingScreen';
-import SearchTags from './SearchTags';
-import NewProject from './NewProject';
-import * as logger from '../../logger';
-import packageInfo from '../../../../package.json';
-import { environment } from '../../../environment';
-
-export default function ProjectList() {
-  const router = useRouter();
-  const { t } = useTranslation();
-  const [order, setOrder] = useState('asc');
-  const [orderBy, setOrderBy] = useState('name');
-  const [showArchived, setShowArchived] = useState(false);
-
-  const filterList = ['name', 'language', 'type', 'date', 'view'];
-  const {
-    states: {
-      starredrow,
-      unstarredrow,
-      starredProjects,
-      unstarredProjects,
-      activeNotificationCount,
-    },
-    action: {
-      setStarredRow,
-      setUnStarredRow,
-      handleClickStarred,
-      archiveProject,
-      setSelectedProject,
-      setNotifications,
-      setActiveNotificationCount,
-      FetchProjects,
-    },
-  } = React.useContext(AutographaContext);
-  const [callEditProject, setCallEditProject] = useState(false);
-  const [openPopUp, setOpenPopUp] = useState(false);
-  const [currentProject, setCurrentProject] = useState();
-  const openExportPopUp = (project) => {
-    setCurrentProject(project);
-    setOpenPopUp(true);
-  };
-  const closeExportPopUp = () => {
-    setOpenPopUp(false);
-  };
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
-
-  const handleSelectProject = (event, projectName, projectId) => {
-    logger.debug('ProjectList.js', 'In handleSelectProject');
-    console.log({ projectName });
-    setSelectedProject(projectName);
-    localforage.setItem('currentProject', `${projectName}_${projectId}`);
-    router.push('/home');
-    localforage.getItem('notification').then((value) => {
-      const temp = [...value];
-      temp.push({
-        title: 'Project',
-        text: `successfully loaded ${projectName} files`,
-        type: 'success',
-        time: moment().format(),
-        hidden: true,
-      });
-      setNotifications(temp);
-    }).then(() => setActiveNotificationCount(activeNotificationCount + 1));
-  };
-
-  const editproject = async (project) => {
-    logger.debug('ProjectList.js', 'In editproject');
-    const path = require('path');
-    const fs = window.require('fs');
-    const newpath = localStorage.getItem('userPath');
-    await localforage.getItem('userProfile').then((value) => {
-      const folder = path.join(newpath, packageInfo.name, 'users', value.username, 'projects', `${project.name}_${project.id[0]}`);
-      const data = fs.readFileSync(path.join(folder, 'metadata.json'), 'utf-8');
-      let metadata = JSON.parse(data);
-      const firstKey = Object.keys(metadata.ingredients)[0];
-      const folderName = firstKey.split(/[(\\)?(/)?]/gm).slice(0, -1);
-      let dirName = '';
-      folderName.forEach((folder) => {
-        dirName = path.join(dirName, folder);
-      });
-      const settings = fs.readFileSync(path.join(folder, dirName, environment.PROJECT_SETTING_FILE), 'utf-8');
-      const agSetting = JSON.parse(settings);
-      metadata = { ...metadata, ...agSetting };
-      logger.debug('ProjectList.js', 'Loading current project metadata');
-      setCurrentProject(metadata);
-      setCallEditProject(true);
-    });
-  };
-
-  const closeEditProject = async () => {
-    logger.debug('ProjectList.js', 'Closing edit project page and updating the values');
-    setCallEditProject(false);
-    await FetchProjects();
-  };
-  // checking if isArchived is true show projects in archive tab else project tab
-  function filterArchive(project) {
-    if (project.isArchived === showArchived) {
-      return true;
-    } if (project.isArchived === undefined && showArchived === false) {
-      return true;
-    }
-    return false;
-  }
-  return (
-    <>
-      {callEditProject === false
-        ? (
-          <>
-            <ProjectsLayout
-              title={t('projects-page')}
-              archive="enable"
-              isImport
-              showArchived={showArchived}
-              setShowArchived={setShowArchived}
-              header={(
-                <SearchTags
-                  contentList1={starredProjects}
-                  contentList2={unstarredProjects}
-                  filterList={filterList}
-                  onfilerRequest1={setStarredRow}
-                  onfilerRequest2={setUnStarredRow}
-                />
-              )}
-            >
-              <div className="mx-auto py-6 sm:px-6 lg:px-8">
-                <div className="px-4 py-4 sm:px-0">
-
-                  <div className="flex flex-col">
-                    <div className="-my-2 sm:-mx-6 lg:-mx-8">
-                      <div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
-                        <div className="shadow border-b border-gray-200 sm:rounded-lg">
-                          <table id="projects-list" data-testid="tablelayout" className="min-w-full divide-y divide-gray-200 mb-9">
-                            <EnhancedTableHead
-                              order={order}
-                              orderBy={orderBy}
-                              onRequestSort={handleRequestSort}
-                            />
-                            <tbody id="projects-list-star" className="bg-white divide-y divide-gray-200">
-                              {starredrow && (stableSort(
-                                starredrow,
-                                getComparator(order, orderBy),
-                                orderBy,
-                                order,
-                              ).filter(filterArchive).map((project) => (
-                                <Disclosure key={project.name}>
-                                  {({ open }) => (
-                                    <>
-                                      <tr
-                                        className="hover:bg-gray-100 focus:outline-none cursor-pointer"
-                                      >
-                                        <td className="px-4 py-4">
-                                          <button
-                                            title={t('tooltip-star-project')}
-                                            aria-label="star-project"
-                                            onClick={(event) => handleClickStarred(event, project.name, 'starred')}
-                                            type="button"
-                                          >
-                                            <StarIcon className="h-5 w-5 fill-current text-yellow-400" aria-hidden="true" />
-                                          </button>
-                                        </td>
-                                        {/* <td className="px-4 py-4">
-                                      <button
-                                        type="button"
-                                        title="open project"
-                                        onClick={
-                                          (event) => handleSelectProject(event, project.name, project.id[0])
-                                        }
-                                      >
-                                        <ExternalLinkIcon className="h-5 w-5 text-primary" aria-hidden="true" />
-                                      </button>
-                                    </td> */}
-                                        <td className="px-6 py-4">
-                                          <div
-                                            onClick={
-                                              (event) => handleSelectProject(event, project.name, project.id[0])
-                                            }
-                                            role="button"
-                                            id={`${project.name}`}
-                                            aria-label="project-name"
-                                            tabIndex="0"
-                                            className="focus:outline-none text-sm font-medium text-gray-900"
-                                          >
-                                            {project.name}
-                                          </div>
-                                        </td>
-                                        <td className="px-6 py-4 text-sm text-gray-900">{project.language}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-900">{project.type}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.date).format('LL')}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.view, 'YYYY-MM-DD h:mm:ss').fromNow()}</td>
-
-                                        <td className="px-6 py-4 text-right text-sm font-medium flex justify-end">
-                                          <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-gray-200 rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
-                                            {open
-                                              ? <ChevronUpIcon aria-label="star-arrow-up" className="w-5 h-5 text-gray-500 hover:text-purple-600" />
-                                              : <ChevronDownIcon aria-label="star-expand-project" className="w-5 h-5 text-gray-500 hover:text-purple-600" />}
-                                          </Disclosure.Button>
-                                        </td>
-                                      </tr>
-                                      <Transition
-                                        as={Fragment}
-                                        enter="transition duration-100 ease-out"
-                                        enterFrom="transform scale-95 opacity-0"
-                                        enterTo="transform scale-100 opacity-100"
-                                        leave="transition duration-75 ease-out"
-                                        leaveFrom="transform scale-100 opacity-100"
-                                        leaveTo="transform scale-95 opacity-0"
-                                      >
-                                        <Disclosure.Panel as="tr" key={project.name}>
-                                          <td className="px-6 py-4">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">{t('label-description')}</div>
-                                            <div className="text-sm tracking-wide p-1">{project.description}</div>
-                                          </td>
-                                          <td colSpan="3" className="px-5">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">{t('label-project-id')}</div>
-                                            <div className="text-sm tracking-wide p-1">{project.id[0]}</div>
-                                          </td>
-                                          <td className="pl-5">
-
-                                            <Menu as="div">
-                                              <div>
-                                                <Menu.Button className="px-5">
-                                                  <EllipsisVerticalIcon aria-label="star-menu-project" className="h-5 w-5 text-primary" aria-hidden="true" />
-                                                </Menu.Button>
-                                              </div>
-                                              <Transition
-                                                as={Fragment}
-                                                enter="transition ease-out duration-100"
-                                                enterFrom="transform opacity-0 scale-95"
-                                                enterTo="transform opacity-100 scale-100"
-                                                leave="transition ease-in duration-75"
-                                                leaveFrom="transform opacity-100 scale-100"
-                                                leaveTo="transform opacity-0 scale-95"
-                                              >
-                                                <Menu.Items className="fixed right-26 top-4 w-56 mt-2 z-50 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                                  <div className="px-1 py-1 ">
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group flex rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => editproject(project)}
-                                                        >
-                                                          {t('btn-edit')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => openExportPopUp(project)}
-                                                        >
-                                                          {t('btn-export')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
-                                                          onClick={() => {
-                                                            archiveProject(project, project.name);
-                                                          }}
-                                                        >
-                                                          {project.isArchived === true ? t('label-restore') : t('label-archive')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                  </div>
-                                                </Menu.Items>
-                                              </Transition>
-                                            </Menu>
-
-                                          </td>
-                                        </Disclosure.Panel>
-                                      </Transition>
-                                    </>
-                                  )}
-                                </Disclosure>
-                              ))
-                              )}
-                            </tbody>
-                            <tbody id="projects-list-unstar" className="bg-white divide-y divide-gray-200">
-                              {unstarredrow && (stableSort(
-                                unstarredrow,
-                                getComparator(order, orderBy),
-                                orderBy,
-                                order,
-                              ).filter(filterArchive).map((project) => (
-                                <Disclosure key={project.id[0]}>
-                                  {({ open }) => (
-                                    <>
-                                      <tr className="hover:bg-gray-100 focus:outline-none cursor-pointer">
-                                        <td
-                                          className="px-4 py-4"
-                                        >
-                                          <button
-                                            title={t('tooltip-un-star-project')}
-                                            aria-label="unstar-project"
-                                            onClick={(event) => handleClickStarred(event, project.name, 'unstarred')}
-                                            type="button"
-                                          >
-                                            <StarIcon className="h-5 w-5" aria-hidden="true" />
-                                          </button>
-                                        </td>
-                                        {/* <td className="px-4 py-4">
-                                            <button
-                                              type="button"
-                                              title="open project"
-                                              onClick={
-                                                (event) => handleSelectProject(event, project.name, project.id[0])
-                                              }
-                                            >
-                                              <ExternalLinkIcon className="h-5 w-5 text-primary" aria-hidden="true" />
-                                            </button>
-                                          </td> */}
-                                        <td className="px-6 py-4">
-                                          <div className="flex items-center">
-                                            <div className="ml-0">
-                                              <div
-                                                id={`${project.name}`}
-                                                onClick={
-                                                  (event) => handleSelectProject(event, project.name, project.id[0])
-                                                }
-                                                role="button"
-                                                aria-label="unstar-project-name"
-                                                tabIndex="0"
-                                                className="text-sm font-medium text-gray-900"
-                                              >
-                                                {project.name}
-
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </td>
-                                        <td className="px-6 py-4">
-                                          <div className="text-sm text-gray-900">{project.language}</div>
-                                        </td>
-                                        <td className="px-6 py-4">
-                                          <div className="text-sm text-gray-900">{project.type}</div>
-                                        </td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.date).format('LL')}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.view, 'YYYY-MM-DD h:mm:ss').fromNow()}</td>
-                                        <td className="px-6 py-4 text-right text-sm font-medium">
-                                          <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-gray-500 rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
-                                            {open
-                                              ? <ChevronUpIcon aria-label="unstar-arrow-up" className="w-5 h-5 text-gray-500 hover:text-purple-600" />
-                                              : <ChevronDownIcon aria-label="unstar-expand-project" className="w-5 h-5 text-gray-500 hover:text-purple-600" />}
-                                          </Disclosure.Button>
-                                        </td>
-                                      </tr>
-                                      <Transition
-                                        as={Fragment}
-                                        enter="transition duration-100 ease-out"
-                                        enterFrom="transform scale-95 opacity-0"
-                                        enterTo="transform scale-100 opacity-100"
-                                        leave="transition duration-75 ease-out"
-                                        leaveFrom="transform scale-100 opacity-100"
-                                        leaveTo="transform scale-95 opacity-0"
-                                      >
-                                        <Disclosure.Panel as="tr" key={project.name}>
-                                          <td className="px-6 py-4">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">{t('label-description')}</div>
-                                            <div aria-label="project-description-display" className="text-sm tracking-wide p-1">{project.description}</div>
-                                          </td>
-                                          <td colSpan="3" className="px-5">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">{t('label-project-id')}</div>
-                                            <div className="text-sm tracking-wide p-1">{project.id[0]}</div>
-                                          </td>
-                                          <td className="pl-5">
-                                            <Menu as="div">
-                                              <div>
-                                                <Menu.Button className="px-5">
-                                                  <EllipsisVerticalIcon className="h-5 w-5 text-primary" aria-label="unstar-menu-project" aria-hidden="true" />
-                                                </Menu.Button>
-                                              </div>
-                                              <Transition
-                                                as={Fragment}
-                                                enter="transition ease-out duration-100"
-                                                enterFrom="transform opacity-0 scale-95"
-                                                enterTo="transform opacity-100 scale-100"
-                                                leave="transition ease-in duration-75"
-                                                leaveFrom="transform opacity-100 scale-100"
-                                                leaveTo="transform opacity-0 scale-95"
-                                              >
-                                                <Menu.Items className="fixed right-26 top-4 w-56 mb-1 z-50 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                                  <div className="px-1 py-1">
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          aria-label="edit-project"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => editproject(project)}
-                                                        >
-                                                          {t('btn-edit')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => openExportPopUp(project)}
-                                                        >
-                                                          {t('btn-export')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
-                                                          onClick={() => {
-                                                            archiveProject(project, project.name);
-                                                          }}
-                                                        >
-                                                          {project.isArchived === true ? t('label-restore') : t('label-archive')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                  </div>
-                                                </Menu.Items>
-                                              </Transition>
-                                            </Menu>
-
-                                          </td>
-                                        </Disclosure.Panel>
-
-                                      </Transition>
-                                    </>
-                                  )}
-                                </Disclosure>
-                              ))
-                              )}
-                            </tbody>
-                          </table>
-                          {(!starredrow || !unstarredrow) && <div><LoadingScreen /></div>}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-            </ProjectsLayout>
-            <ExportProjectPopUp open={openPopUp} closePopUp={closeExportPopUp} project={currentProject} />
-          </>
-        )
-        : (
-          <AuthenticationContextProvider>
-            <AutographaContextProvider>
-              <ProjectContextProvider>
-                <NewProject call="edit" project={currentProject} closeEdit={() => closeEditProject()} />
-              </ProjectContextProvider>
-            </AutographaContextProvider>
-          </AuthenticationContextProvider>
-        )}
-    </>
-  );
-}
diff --git a/renderer/src/modules/projects/ProjectsNav.js b/renderer/src/modules/projects/ProjectsNav.js
deleted file mode 100644
index 72b16ce26..000000000
--- a/renderer/src/modules/projects/ProjectsNav.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import UserProfile from './Profile';
-import Sync from './Sync';
-import ProjectList from './ProjectList';
-import NewProject from './NewProject';
-
-export const ProjectsNav = ({ renderComponent }) => (
-
-  <>
-    {(() => {
-      switch (renderComponent) {
-        case 'Profile':
-          return <UserProfile />;
-        case 'Sync':
-          return <Sync />;
-        case 'Projects':
-          return <ProjectList />;
-        case 'New':
-          return <NewProject />;
-        default:
-          return null;
-      }
-    })()}
-  </>
-);
-ProjectsNav.propTypes = {
-  renderComponent: PropTypes.string.isRequired,
-};
diff --git a/renderer/src/modules/projects/WebProjectList.js b/renderer/src/modules/projects/WebProjectList.js
deleted file mode 100644
index ed82ef7ab..000000000
--- a/renderer/src/modules/projects/WebProjectList.js
+++ /dev/null
@@ -1,533 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable no-await-in-loop */
-/* eslint-disable no-nested-ternary */
-
-'use client';
-
-import React, { Fragment, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import moment from 'moment';
-
-import { Disclosure, Transition, Menu } from '@headlessui/react';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
-import {
-  StarIcon, EllipsisVerticalIcon,
-} from '@heroicons/react/24/outline';
-import localforage from 'localforage';
-
-import { useTranslation } from 'react-i18next';
-import ProjectsLayout from '@/layouts/projects/Layout';
-import EnhancedTableHead from '@/components/ProjectsPage/Projects/EnhancedTableHead';
-import AutographaContextProvider, { AutographaContext } from '@/components/context/AutographaContext';
-
-import ExportProjectPopUp from '@/layouts/projects/Export/ExportProjectPopUp';
-import ProjectContextProvider from '@/components/context/ProjectContext';
-import JSZip from 'jszip';
-import LoadingScreen from '@/components/Loading/LoadingScreen';
-import { useGetUserName } from '@/components/hooks/useGetUserName';
-import { getComparator, stableSort } from '@/components/ProjectsPage/Projects/SortingHelper';
-import { environment } from '../../../environment';
-import SearchTags from './SearchTags';
-import * as logger from '../../logger';
-import { newPath, sbStorageDownload, sbStorageList } from '../../../../supabase';
-import NewWebProject from './NewWebProject';
-
-export default function ProjectList() {
-  const router = useRouter();
-  const { t } = useTranslation();
-  const [order, setOrder] = useState('asc');
-  const [orderBy, setOrderBy] = useState('name');
-  const [showArchived, setShowArchived] = useState(false);
-
-  const { username } = useGetUserName();
-  const filterList = ['name', 'language', 'type', 'date', 'view'];
-  const {
-    states: {
-      starredrow,
-      unstarredrow,
-      starredProjects,
-      unstarredProjects,
-      loading,
-      activeNotificationCount,
-    },
-    action: {
-      setStarredRow,
-      setUnStarredRow,
-      handleWebClickStarred,
-      archiveWebProject,
-      setSelectedProject,
-      setLoading,
-      setNotifications,
-      setActiveNotificationCount,
-      FetchProjects,
-    },
-  } = React.useContext(AutographaContext);
-  const [callEditProject, setCallEditProject] = useState(false);
-  const [openPopUp, setOpenPopUp] = useState(false);
-  const [currentProject, setCurrentProject] = useState();
-
-  const openExportPopUp = async (project) => {
-    setLoading(true);
-    setCurrentProject(project);
-    const projectName = `${project.name}_${project.id[0]}`;
-    const folderPath = `${newPath}/${username}/projects/${projectName}/ingredients`;
-    console.log('triggering from web project list');
-    const { data: files, error } = await sbStorageList(folderPath);
-    // const { data: files, error } = await supabaseStorage().list(folderPath);
-    if (error) {
-      console.error('Error fetching ingredient files', error);
-    }
-
-    const zip = new JSZip(); // Create a new JSZip instance
-    for (const file of files) {
-      console.log({ file });
-      const { data, error } = await sbStorageDownload(`${folderPath}/${file.name}`);
-
-      const { data: metadata } = await sbStorageDownload(`${newPath}/${username}/projects/${projectName}/metadata.json`);
-
-      const arrayBuffer = await data.arrayBuffer(); // Convert Blob to ArrayBuffer
-      const content = new TextDecoder('utf-8').decode(arrayBuffer);
-      // Add the file to the ZIP archive inside an 'ingredients' folder
-      zip.folder('ingredients').file(file.name, content);
-      zip.file('metadata.json', metadata);
-      if (error) {
-        console.error('Zip error occurred', error);
-        return;
-      }
-    }
-
-    // Generate the ZIP archive and trigger a download of the file
-    const content = await zip.generateAsync({ type: 'blob' });
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(content);
-    link.download = `${projectName.replace('/', '-')}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    setLoading(false);
-  };
-
-  const closeExportPopUp = () => {
-    setOpenPopUp(false);
-  };
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
-
-  const handleSelectProject = (event, projectName, projectId) => {
-    console.log({ projectName, projectId });
-    setLoading(true);
-    logger.debug('ProjectList.js', 'In handleSelectProject');
-    setSelectedProject(projectName);
-    localforage.setItem('currentProject', `${projectName}_${projectId}`);
-    router.push('/home');
-    localforage.getItem('notification').then((value) => {
-      const temp = [...value];
-      temp.push({
-        title: 'Project',
-        text: `successfully loaded ${projectName} files`,
-        type: 'success',
-        time: moment().format(),
-        hidden: true,
-      });
-      setNotifications(temp);
-    }).then(() => setActiveNotificationCount(activeNotificationCount + 1));
-    // setLoading(false);
-  };
-
-  const editproject = async (project) => {
-    logger.debug('ProjectList.js', 'In editproject');
-    const path = require('path');
-    const value = await localforage.getItem('userProfile');
-    const folder = path.join('scribe', 'users', value.user.email, 'projects', `${project.name}_${project.id[0]}`);
-    const { data } = await sbStorageDownload(path.join(folder, 'metadata.json'));
-    let metadata = JSON.parse(await data.text());
-    const firstKey = Object.keys(metadata.ingredients)[0];
-    const folderName = firstKey.split(/[(\\)?(/)?]/gm).slice(0, -1);
-    let dirName = '';
-    folderName.forEach((folder) => {
-      dirName = path.join(dirName, folder);
-    });
-    const { data: settings } = await sbStorageDownload(path.join(folder, dirName, environment.PROJECT_SETTING_FILE), 'utf-8');
-    const agSetting = JSON.parse(await settings.text());
-    metadata = { ...metadata, ...agSetting };
-    logger.debug('ProjectList.js', 'Loading current project metadata');
-    setCurrentProject(metadata);
-    setCallEditProject(true);
-  };
-
-  const closeEditProject = async () => {
-    logger.debug('ProjectList.js', 'Closing edit project page and updating the values');
-    setCallEditProject(false);
-    await FetchProjects();
-  };
-
-  function filterArchive(project) {
-    if (project.isArchived === showArchived || (project.isArchived === undefined && showArchived === false)) {
-      return true;
-    }
-    return false;
-  }
-
-  return (
-    <div>
-      {loading ? <LoadingScreen /> : callEditProject === false
-        ? (
-          <>
-            <ProjectsLayout
-              title={`${t('projects-page')} - Web`}
-              archive="enable"
-              isImport
-              showArchived={showArchived}
-              setShowArchived={setShowArchived}
-              header={(
-                <SearchTags
-                  contentList1={starredProjects}
-                  contentList2={unstarredProjects}
-                  filterList={filterList}
-                  onfilerRequest1={setStarredRow}
-                  onfilerRequest2={setUnStarredRow}
-                />
-              )}
-            >
-              <div className="mx-auto py-6 sm:px-6 lg:px-8">
-                <div className="px-4 py-4 sm:px-0">
-
-                  <div className="flex flex-col">
-                    <div className="-my-2 sm:-mx-6 lg:-mx-8">
-                      <div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
-                        <div className="shadow border-b border-gray-200 sm:rounded-lg">
-                          <table data-testid="tablelayout" className="min-w-full divide-y divide-gray-200 mb-9">
-                            <EnhancedTableHead
-                              order={order}
-                              orderBy={orderBy}
-                              onRequestSort={handleRequestSort}
-                            />
-                            <tbody className="bg-white divide-y divide-gray-200">
-                              {starredrow && (stableSort(
-                                starredrow,
-                                getComparator(order, orderBy),
-                                orderBy,
-                                order,
-                              ).filter(filterArchive).map((project) => (
-                                <Disclosure key={project.name}>
-                                  {({ open }) => (
-                                    <>
-                                      <tr
-                                        className="hover:bg-gray-100 focus:outline-none cursor-pointer"
-                                      >
-                                        <td className="px-4 py-4">
-                                          <button
-                                            title="star project"
-                                            aria-label="star-project"
-                                            onClick={(event) => handleWebClickStarred(event, project.name, 'starred')}
-                                            type="button"
-                                          >
-                                            <StarIcon className="h-5 w-5 fill-current text-yellow-400" aria-hidden="true" />
-                                          </button>
-                                        </td>
-                                        {/* <td className="px-4 py-4">
-                                              <button
-                                                type="button"
-                                                title="open project"
-                                                onClick={
-                                                  (event) => handleSelectProject(event, project.name, project.id[0])
-                                                }
-                                              >
-                                                <ExternalLinkIcon className="h-5 w-5 text-primary" aria-hidden="true" />
-                                              </button>
-                                            </td> */}
-                                        <td className="px-6 py-4">
-                                          <div
-                                            onClick={
-                                              (event) => handleSelectProject(event, project.name, project.id[0])
-                                            }
-                                            role="button"
-                                            id={`${project.name}`}
-                                            aria-label="project-name"
-                                            tabIndex="0"
-                                            className="focus:outline-none text-sm font-medium text-gray-900"
-                                          >
-                                            {project.name}
-                                          </div>
-                                        </td>
-                                        <td className="px-6 py-4 text-sm text-gray-900">{project.language}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-900">{project.type}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.date).format('LL')}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.view, 'YYYY-MM-DD h:mm:ss').fromNow()}</td>
-
-                                        <td className="px-6 py-4 text-right text-sm font-medium flex justify-end">
-                                          <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-gray-200 rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
-                                            {open
-                                              ? <ChevronUpIcon aria-label="star-arrow-up" className="w-5 h-5 text-gray-500 hover:text-purple-600" />
-                                              : <ChevronDownIcon aria-label="star-expand-project" className="w-5 h-5 text-gray-500 hover:text-purple-600" />}
-                                          </Disclosure.Button>
-                                        </td>
-                                      </tr>
-                                      <Transition
-                                        as={Fragment}
-                                        enter="transition duration-100 ease-out"
-                                        enterFrom="transform scale-95 opacity-0"
-                                        enterTo="transform scale-100 opacity-100"
-                                        leave="transition duration-75 ease-out"
-                                        leaveFrom="transform scale-100 opacity-100"
-                                        leaveTo="transform scale-95 opacity-0"
-                                      >
-                                        <Disclosure.Panel as="tr" key={project.name}>
-                                          <td className="px-6 py-4">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">description</div>
-                                            <div className="text-sm tracking-wide p-1">{project.description}</div>
-                                          </td>
-                                          <td colSpan="3" className="px-5">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">Project ID</div>
-                                            <div className="text-sm tracking-wide p-1">{project.id[0]}</div>
-                                          </td>
-                                          <td className="pl-5">
-
-                                            <Menu as="div">
-                                              <div>
-                                                <Menu.Button className="px-5">
-                                                  <EllipsisVerticalIcon aria-label="star-menu-project" className="h-5 w-5 text-primary" aria-hidden="true" />
-                                                </Menu.Button>
-                                              </div>
-                                              <Transition
-                                                as={Fragment}
-                                                enter="transition ease-out duration-100"
-                                                enterFrom="transform opacity-0 scale-95"
-                                                enterTo="transform opacity-100 scale-100"
-                                                leave="transition ease-in duration-75"
-                                                leaveFrom="transform opacity-100 scale-100"
-                                                leaveTo="transform opacity-0 scale-95"
-                                              >
-                                                <Menu.Items className="fixed right-26 top-4 w-56 mt-2 z-50 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                                  <div className="px-1 py-1 ">
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group flex rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => editproject(project)}
-                                                        >
-                                                          {t('btn-edit')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => openExportPopUp(project)}
-                                                        >
-                                                          {t('btn-export')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
-                                                          onClick={() => {
-                                                            archiveWebProject(project, project.name);
-                                                          }}
-                                                        >
-                                                          {project.isArchived === true ? 'Restore' : 'Archive'}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                  </div>
-                                                </Menu.Items>
-                                              </Transition>
-                                            </Menu>
-
-                                          </td>
-                                        </Disclosure.Panel>
-                                      </Transition>
-                                    </>
-                                  )}
-                                </Disclosure>
-                              ))
-                              )}
-                            </tbody>
-                            <tbody className="bg-white divide-y divide-gray-200">
-                              {unstarredrow && (stableSort(
-                                unstarredrow,
-                                getComparator(order, orderBy),
-                                orderBy,
-                                order,
-                              ).filter(filterArchive).map((project) => (
-                                <Disclosure key={project.name}>
-                                  {({ open }) => (
-                                    <>
-                                      <tr className="hover:bg-gray-100 focus:outline-none cursor-pointer">
-                                        <td
-                                          className="px-4 py-4"
-                                        >
-                                          <button
-                                            title="unstar project"
-                                            aria-label="unstar-project"
-                                            onClick={(event) => handleWebClickStarred(event, project.name, 'unstarred')}
-                                            type="button"
-                                          >
-                                            <StarIcon className="h-5 w-5" aria-hidden="true" />
-                                          </button>
-                                        </td>
-                                        {/* <td className="px-4 py-4">
-                                                    <button
-                                                      type="button"
-                                                      title="open project"
-                                                      onClick={
-                                                        (event) => handleSelectProject(event, project.name, project.id[0])
-                                                      }
-                                                    >
-                                                      <ExternalLinkIcon className="h-5 w-5 text-primary" aria-hidden="true" />
-                                                    </button>
-                                                  </td> */}
-                                        <td className="px-6 py-4">
-                                          <div className="flex items-center">
-                                            <div className="ml-0">
-                                              <div
-                                                id={`${project.name}`}
-                                                onClick={
-                                                  (event) => handleSelectProject(event, project.name, project.id[0])
-                                                }
-                                                role="button"
-                                                aria-label="unstar-project-name"
-                                                tabIndex="0"
-                                                className="text-sm font-medium text-gray-900"
-                                              >
-                                                {project.name}
-
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </td>
-                                        <td className="px-6 py-4">
-                                          <div className="text-sm text-gray-900">{project.language}</div>
-                                        </td>
-                                        <td className="px-6 py-4">
-                                          <div className="text-sm text-gray-900">{project.type}</div>
-                                        </td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.date).format('LL')}</td>
-                                        <td className="px-6 py-4 text-sm text-gray-500">{moment(project.view, 'YYYY-MM-DD h:mm:ss').fromNow()}</td>
-                                        <td className="px-6 py-4 text-right text-sm font-medium">
-                                          <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-gray-500 rounded-lg focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
-                                            {open
-                                              ? <ChevronUpIcon aria-label="unstar-arrow-up" className="w-5 h-5 text-gray-500 hover:text-purple-600" />
-                                              : <ChevronDownIcon aria-label="unstar-expand-project" className="w-5 h-5 text-gray-500 hover:text-purple-600" />}
-                                          </Disclosure.Button>
-                                        </td>
-                                      </tr>
-                                      <Transition
-                                        as={Fragment}
-                                        enter="transition duration-100 ease-out"
-                                        enterFrom="transform scale-95 opacity-0"
-                                        enterTo="transform scale-100 opacity-100"
-                                        leave="transition duration-75 ease-out"
-                                        leaveFrom="transform scale-100 opacity-100"
-                                        leaveTo="transform scale-95 opacity-0"
-                                      >
-                                        <Disclosure.Panel as="tr" key={project.name}>
-                                          <td className="px-6 py-4">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">description</div>
-                                            <div aria-label="project-description-display" className="text-sm tracking-wide p-1">{project.description}</div>
-                                          </td>
-                                          <td colSpan="3" className="px-5">
-                                            <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">Project ID</div>
-                                            <div className="text-sm tracking-wide p-1">{project.id[0]}</div>
-                                          </td>
-                                          <td className="pl-5">
-                                            <Menu as="div">
-                                              <div>
-                                                <Menu.Button className="px-5">
-                                                  <EllipsisVerticalIcon className="h-5 w-5 text-primary" aria-label="unstar-menu-project" aria-hidden="true" />
-                                                </Menu.Button>
-                                              </div>
-                                              <Transition
-                                                as={Fragment}
-                                                enter="transition ease-out duration-100"
-                                                enterFrom="transform opacity-0 scale-95"
-                                                enterTo="transform opacity-100 scale-100"
-                                                leave="transition ease-in duration-75"
-                                                leaveFrom="transform opacity-100 scale-100"
-                                                leaveTo="transform opacity-0 scale-95"
-                                              >
-                                                <Menu.Items className="fixed right-26 top-4 w-56 mb-1 z-50 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                                  <div className="px-1 py-1">
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          aria-label="edit-project"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => editproject(project)}
-                                                        >
-                                                          {t('btn-edit')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group rounded-md items-center w-full px-2 py-2 text-sm ${project.isArchived ? 'hidden' : 'flex'}`}
-                                                          onClick={() => openExportPopUp(project)}
-                                                        >
-                                                          {t('btn-export')}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                    <Menu.Item>
-                                                      {({ active }) => (
-                                                        <button
-                                                          type="button"
-                                                          className={`${active ? 'bg-primary text-white' : 'text-gray-900'
-                                                            } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
-                                                          onClick={() => {
-                                                            archiveWebProject(project, project.name);
-                                                          }}
-                                                        >
-                                                          {project.isArchived === true ? 'Restore' : 'Archive'}
-                                                        </button>
-                                                      )}
-                                                    </Menu.Item>
-                                                  </div>
-                                                </Menu.Items>
-                                              </Transition>
-                                            </Menu>
-
-                                          </td>
-                                        </Disclosure.Panel>
-
-                                      </Transition>
-                                    </>
-                                  )}
-                                </Disclosure>
-                              ))
-                              )}
-                            </tbody>
-                          </table>
-                          {(!starredrow || !unstarredrow) && <div><LoadingScreen /></div>}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-            </ProjectsLayout>
-            <ExportProjectPopUp open={openPopUp} closePopUp={closeExportPopUp} project={currentProject} />
-          </>
-        )
-        : <ProjectContextProvider><AutographaContextProvider><NewWebProject call="edit" project={currentProject} closeEdit={() => closeEditProject()} /></AutographaContextProvider></ProjectContextProvider>}
-    </div>
-  );
-}
diff --git a/renderer/src/modules/projects/hooks/useEditProject.js b/renderer/src/modules/projects/hooks/useEditProject.js
new file mode 100644
index 000000000..19979144a
--- /dev/null
+++ b/renderer/src/modules/projects/hooks/useEditProject.js
@@ -0,0 +1,62 @@
+import * as localforage from 'localforage';
+import { isElectron } from '@/core/handleElectron';
+import * as logger from '../../../logger';
+import packageInfo from '../../../../../package.json';
+import { environment } from '../../../../environment';
+import { sbStorageDownload } from '../../../../../supabase';
+
+const useEditProject = () => {
+  const path = require('path');
+  const getDirNameFromMetadata = (metadata) => {
+    const firstKey = Object.keys(metadata.ingredients)[0];
+    const folderName = firstKey.split(/[(\\)?(/)?]/gm).slice(0, -1);
+    let dirName = '';
+    folderName.forEach((folder) => {
+      dirName = path.join(dirName, folder);
+    });
+    return dirName;
+  };
+
+  const loadProjectData = async (project) => {
+    try {
+      let folder;
+      let data;
+      let settings;
+
+      const userProfile = await localforage.getItem('userProfile');
+
+      if (isElectron()) {
+        const fs = window.require('fs');
+        const newpath = localStorage.getItem('userPath');
+        folder = path.join(newpath, packageInfo.name, 'users', userProfile.username, 'projects', `${project.name}_${project.id[0]}`);
+        data = fs.readFileSync(path.join(folder, 'metadata.json'), 'utf-8');
+        const dirName = getDirNameFromMetadata(JSON.parse(data));
+        settings = fs.readFileSync(path.join(folder, dirName, environment.PROJECT_SETTING_FILE), 'utf-8');
+      } else {
+        folder = path.join('scribe', 'users', userProfile.user.email, 'projects', `${project.name}_${project.id[0]}`);
+        data = await sbStorageDownload(path.join(folder, 'metadata.json'));
+        const dirName = getDirNameFromMetadata(JSON.parse(await data.text()));
+        settings = await sbStorageDownload(path.join(folder, dirName, environment.PROJECT_SETTING_FILE), 'utf-8');
+      }
+
+      const metadata = JSON.parse(data instanceof Blob ? await data.text() : data);
+      const agSetting = JSON.parse(settings instanceof Blob ? await settings.text() : settings);
+
+      logger.debug('ProjectList.js', 'Loading current project metadata');
+
+      return { ...metadata, ...agSetting };
+    } catch (e) {
+      logger.debug(e);
+    }
+  };
+
+  const editProject = async (project, setCurrentProject, setCallEditProject) => {
+    const metadata = await loadProjectData(project);
+    setCurrentProject(metadata);
+    setCallEditProject(true);
+  };
+
+  return { editProject };
+};
+
+export default useEditProject;
diff --git a/renderer/src/modules/projects/hooks/useSelectProject.js b/renderer/src/modules/projects/hooks/useSelectProject.js
new file mode 100644
index 000000000..37ab41378
--- /dev/null
+++ b/renderer/src/modules/projects/hooks/useSelectProject.js
@@ -0,0 +1,36 @@
+import * as localforage from 'localforage';
+import moment from 'moment';
+import * as logger from '../../../logger';
+
+const useHandleSelectProject = () => {
+  const handleSelectProject = (
+    event,
+    projectName,
+    projectId,
+    router,
+    activeNotificationCount,
+    setSelectedProject,
+    setNotifications,
+    setActiveNotificationCount,
+  ) => {
+    logger.debug('ProjectList.js', 'In handleSelectProject');
+    setSelectedProject(projectName);
+    localforage.setItem('currentProject', `${projectName}_${projectId}`);
+    router.push('/home');
+    localforage.getItem('notification').then((value) => {
+      const temp = [...value];
+      temp.push({
+        title: 'Project',
+        text: `successfully loaded ${projectName} files`,
+        type: 'success',
+        time: moment().format(),
+        hidden: true,
+      });
+      setNotifications(temp);
+    }).then(() => setActiveNotificationCount(activeNotificationCount + 1));
+  };
+
+  return { handleSelectProject };
+};
+
+export default useHandleSelectProject;
diff --git a/supabase.js b/supabase.js
index e791524e8..bf6f4fcbf 100644
--- a/supabase.js
+++ b/supabase.js
@@ -5,38 +5,36 @@ const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 const IsElectron = process.env.NEXT_PUBLIC_IS_ELECTRON === 'true';
 
 const supabase = !IsElectron ? createClient(supabaseUrl, supabaseAnonKey) : {};
+// const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
 const supabaseStorage = !IsElectron ? createClient(supabaseUrl, supabaseAnonKey).storage.from('scribe') : {};
 
 const sbStorageUpload = (file, payload, settings = {}) => {
-  console.log({file,payload,settings})
   const data = supabaseStorage.upload(file, payload, settings);
   return data;
 };
 
-async function createDirectory({path, data}) {
-  const { data: folder } = await supabaseStorage.list(path);
-  if (folder.length === 0) {
+async function createDirectory(path, data) {
+  const { data: folder } = await supabaseStorage().list(path);
+  if (folder.length > 0) {
+    console.log('folder already exists', folder);
+  } else {
     if (data) {
       await sbStorageUpload(path, data);
-      return;
-    }
-    else{
-      console.log("nofile")
-      const fileName = '.keep';
-      const filePath = `${path}/${fileName}`;
-      const fileContent = new Blob(['testtext'], { type: 'text/plain' });
-      const { data: createdDirectory } = await sbStorageUpload(
-        filePath,
-        fileContent,
-        {
-          cacheControl: '3600',
-          upsert: false,
-        },
-      );
-      console.log('created directory', createdDirectory);
-      return;
     }
-   
+    const fileName = '.keep';
+    const filePath = `${path}/${fileName}`;
+    const fileContent = new Blob([], { type: 'text/plain' });
+    const { data: createdDirectory } = await sbStorageUpload(
+      filePath,
+      fileContent,
+      {
+        cacheControl: '3600',
+        upsert: false,
+      },
+    );
+    console.log('created directory', createdDirectory);
+    return data;
   }
 }
 
@@ -55,7 +53,7 @@ const getSupabaseUser = async () => {
   }
 };
 
-const supabaseSignup = async ({email, password}) => {
+const supabaseSignup = async (email, password) => {
   if (supabase.auth) {
     const response = await supabase.auth.signUp({
       email,
@@ -97,10 +95,10 @@ const sbStorageDownload = async (path) => {
 };
 
 const sbStorageUpdate = async ({ path, payload, options = {} }) => {
-  await supabaseStorage.update(path, payload, options);
+  await supabaseStorage().update(path, payload, options);
 };
-const sbStorageRemove = async (path) => {
-  await supabaseStorage.remove(path);
+const sbStorageRemove = async (path, payload, options) => {
+  await supabaseStorage().remove(path);
 };
 
 const newPath = 'scribe/users';