diff --git a/.eslintrc b/.eslintrc
index 9582ddfd81..ff67d35757 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -85,18 +85,22 @@
       "react/prop-types": 0,
       "react/jsx-key": 0,
       "import/order": ["error", {
-        "groups": ["external", "builtin", "internal", "sibling", "parent", "index"],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc", "caseInsensitive": true },
+        "warnOnUnassignedImports": true,
+        "groups": ["builtin", "external", "internal", "sibling", "parent", "index", "object", "type"],
         "pathGroups": [
-          { "pattern": "prop-types", "group": "external", "position": "before"},
-          { "pattern": "react-*", "group": "external", "position": "before"},
-          { "pattern": "react", "group": "external", "position": "before"},
-          { "pattern": "components", "group": "internal" },
-          { "pattern": "assets/**", "group": "internal", "position": "after" },
-          { "pattern": "apis", "group": "internal", "position": "after" },
-          { "pattern": "common", "group": "internal", "position": "after" }
+          { "pattern": "react", "group": "builtin", "position": "before" },
+          { "pattern": "common/**", "group": "internal" },
+          { "pattern": "context/**", "group": "internal" },
+          { "pattern": "components/**", "group": "internal" },
+          { "pattern": "assets/**", "group": "internal" },
+          { "pattern": "apis/**", "group": "internal" },
+          { "pattern": "constants/**", "group": "internal", "position": "after" },
+          { "pattern": "utils/**", "group": "internal" },
+          { "pattern": "helpers/**", "group": "internal" }
         ],
-        "pathGroupsExcludedImportTypes": ["builtin"],
-        "alphabetize": { "order": "asc", "caseInsensitive": true }
+        "pathGroupsExcludedImportTypes": ["builtin"]
       }]
     }
   }
diff --git a/.slugignore b/.slugignore
new file mode 100644
index 0000000000..37c2a976eb
--- /dev/null
+++ b/.slugignore
@@ -0,0 +1,2 @@
+/spec
+/test
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index ddd546a0be..bf3209b374 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -2,3 +2,4 @@
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../js .js
diff --git a/public/delete.svg b/app/assets/images/delete.svg
similarity index 100%
rename from public/delete.svg
rename to app/assets/images/delete.svg
diff --git a/public/edit.svg b/app/assets/images/edit.svg
similarity index 100%
rename from public/edit.svg
rename to app/assets/images/edit.svg
diff --git a/app/assets/js/.keep b/app/assets/js/.keep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/controllers/internal_api/v1/projects_controller.rb b/app/controllers/internal_api/v1/projects_controller.rb
index ade62bd3ba..b8c1f79c09 100644
--- a/app/controllers/internal_api/v1/projects_controller.rb
+++ b/app/controllers/internal_api/v1/projects_controller.rb
@@ -28,7 +28,7 @@ def update
 
   def destroy
     authorize project
-    project.discard!
+    render json: { notice: I18n.t("projects.delete.success.message") }, status: :ok if project.discard!
   end
 
   private
diff --git a/app/controllers/invoices/view_controller.rb b/app/controllers/invoices/view_controller.rb
index 47193ac423..7031627e89 100644
--- a/app/controllers/invoices/view_controller.rb
+++ b/app/controllers/invoices/view_controller.rb
@@ -5,6 +5,8 @@ class Invoices::ViewController < ApplicationController
   skip_after_action :verify_authorized
 
   def show
+    invoice.viewed! if invoice.sent?
+
     render :show, locals: { invoice: }, layout: false
   end
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ca8926ad54..165188fe0d 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -3,7 +3,7 @@
 module ApplicationHelper
   def user_avatar(user)
     if user.avatar.attached?
-      user.avatar
+      url_for(user.avatar)
     else
       image_url "avatar.svg"
     end
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index a29692dd9f..36c14807fc 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -1,14 +1,13 @@
-import "../stylesheets/application.scss";
-
+import "@fontsource/plus-jakarta-sans";
 import * as ActiveStorage from "@rails/activestorage";
 import Rails from "@rails/ujs";
+import "alpine-turbo-drive-adapter";
 import * as ReactRailsUJS from "react_ujs";
 
-import "alpine-turbo-drive-adapter";
 require("alpinejs");
 require("jquery");
 
-import "@fontsource/plus-jakarta-sans";
+import "../stylesheets/application.scss";
 
 global.toastr = require("toastr");
 global.toastr.options = {
diff --git a/app/javascript/packs/org_timezones.js b/app/javascript/packs/org_timezones.js
new file mode 100644
index 0000000000..f9f5f686c9
--- /dev/null
+++ b/app/javascript/packs/org_timezones.js
@@ -0,0 +1,41 @@
+/* eslint-disable space-before-function-paren */
+/* eslint-disable func-style */
+
+document.addEventListener("DOMContentLoaded", function () {
+  let timezones = [];
+
+  function setTimeZoneOptions(options) {
+    const timeZoneSelect = document.querySelector(".select-timezone");
+    timeZoneSelect.innerHTML = "";
+    options.forEach((option) => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option;
+      optionElement.innerText = option;
+      if (window.location.pathname === "/company/new") {
+        optionElement.selected =
+          option === "(GMT-05:00) Eastern Time (US & Canada)";
+      }
+      timeZoneSelect.appendChild(optionElement);
+    });
+  }
+
+  function handleChangeCountry(event) {
+    const country = event.target.value;
+    const timeZonesForCountry = timezones[country];
+    if (timeZonesForCountry) setTimeZoneOptions(timeZonesForCountry);
+  }
+
+  const selectCountry = document.querySelector(".select-country");
+
+  selectCountry.addEventListener("change", handleChangeCountry);
+
+  async function main() {
+    const response = await fetch("/internal_api/v1/timezones");
+    const jsonResponse = await response.json();
+    timezones = jsonResponse.timezones;
+    if (window.location.pathname === "/company/new")
+      setTimeZoneOptions(timezones[selectCountry.value]);
+  }
+
+  main();
+});
diff --git a/app/javascript/packs/server_rendering.js b/app/javascript/packs/server_rendering.js
index b71665a287..affcbc5082 100644
--- a/app/javascript/packs/server_rendering.js
+++ b/app/javascript/packs/server_rendering.js
@@ -1,7 +1,8 @@
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-import "../stylesheets/application.scss";
 
 const componentRequireContext = require.context("src/components", true);
 import * as ReactRailsUJS from "react_ujs";
+
+import "../stylesheets/application.scss";
 ReactRailsUJS.useContext(componentRequireContext);
diff --git a/app/javascript/src/apis/reports.ts b/app/javascript/src/apis/reports.ts
index 652797de40..f31719df71 100644
--- a/app/javascript/src/apis/reports.ts
+++ b/app/javascript/src/apis/reports.ts
@@ -10,6 +10,6 @@ const download = (type, queryParams) => axios({
   responseType: "blob"
 });
 
-const reports = { get, download };
+const reportsApi = { get, download };
 
-export default reports;
+export default reportsApi;
diff --git a/app/javascript/src/apis/team.ts b/app/javascript/src/apis/team.ts
index a1edcb7799..fa3f5a9cf5 100644
--- a/app/javascript/src/apis/team.ts
+++ b/app/javascript/src/apis/team.ts
@@ -18,7 +18,7 @@ const inviteMember = payload => axios.post("/invitations",payload);
 const updateInvitedMember = (id,payload) => axios.put(`/invitations/${id}`,payload);
 const deleteInvitedMember = id => axios.delete(`/invitations/${id}`);
 
-export {
+const teamApi =  {
   get,
   search,
   destroyTeamMember,
@@ -27,3 +27,5 @@ export {
   deleteInvitedMember,
   inviteMember
 };
+
+export default teamApi;
diff --git a/app/javascript/src/apis/timeTracking.ts b/app/javascript/src/apis/timeTracking.ts
index e4d55caf99..f2b3c1871a 100644
--- a/app/javascript/src/apis/timeTracking.ts
+++ b/app/javascript/src/apis/timeTracking.ts
@@ -4,4 +4,6 @@ const path = "/time-tracking";
 
 const get = async () => axios.get(path);
 
-export default { get };
+const timeTrackingApi = { get };
+
+export default timeTrackingApi;
diff --git a/app/javascript/src/common/AutoComplete.tsx b/app/javascript/src/common/AutoComplete.tsx
index f8d8722cde..686903481c 100644
--- a/app/javascript/src/common/AutoComplete.tsx
+++ b/app/javascript/src/common/AutoComplete.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import Autocomplete from "react-autocomplete";
 import { useNavigate } from "react-router-dom";
 
diff --git a/app/javascript/src/common/ChartBar/index.tsx b/app/javascript/src/common/ChartBar/index.tsx
index e20d0d1608..23928ff7a4 100644
--- a/app/javascript/src/common/ChartBar/index.tsx
+++ b/app/javascript/src/common/ChartBar/index.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from "react";
+
 import ReactTooltip from "react-tooltip";
 
 import { minutesToHHMM } from "helpers/hhmm-parser";
+
 import { IChartBarGraph, ISingleClient } from "./interface";
 
 const Client = ({ element, totalMinutes, index }:ISingleClient) => {
diff --git a/app/javascript/src/common/CustomDatePicker/index.tsx b/app/javascript/src/common/CustomDatePicker/index.tsx
index 1985409228..30b8976a3d 100644
--- a/app/javascript/src/common/CustomDatePicker/index.tsx
+++ b/app/javascript/src/common/CustomDatePicker/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import DatePicker from "react-datepicker";
+
 import { getMonth, getYear } from "date-fns";
 import { CaretCircleLeft, CaretCircleRight } from "phosphor-react";
-
+import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
 const CustomDatePicker = ({ handleChange, dueDate }) => {
diff --git a/app/javascript/src/common/Pagination.tsx b/app/javascript/src/common/Pagination.tsx
index 260f9258b8..a79510d442 100644
--- a/app/javascript/src/common/Pagination.tsx
+++ b/app/javascript/src/common/Pagination.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import cn from "classnames";
 import { CaretCircleLeft, CaretCircleRight } from "phosphor-react";
 
diff --git a/app/javascript/src/common/SyncAutoComplete.tsx b/app/javascript/src/common/SyncAutoComplete.tsx
index daf04e2bd7..099cdd9b65 100644
--- a/app/javascript/src/common/SyncAutoComplete.tsx
+++ b/app/javascript/src/common/SyncAutoComplete.tsx
@@ -1,8 +1,9 @@
 // NOTE: This file is for synchronous auto complete.
 
 import React, { useState, useEffect } from "react";
-import Autocomplete from "react-autocomplete";
+
 import { MagnifyingGlass } from "phosphor-react";
+import Autocomplete from "react-autocomplete";
 
 const cssStyles = {
   menuStyles: {
diff --git a/app/javascript/src/common/Table/index.tsx b/app/javascript/src/common/Table/index.tsx
index d1d11c72f7..a17e313a88 100644
--- a/app/javascript/src/common/Table/index.tsx
+++ b/app/javascript/src/common/Table/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { useTable, useRowSelect } from "react-table";
-import PropTypes from "prop-types";
+
 import { Pencil, Trash } from "phosphor-react";
+import PropTypes from "prop-types";
+import { useTable, useRowSelect } from "react-table";
 
 const IndeterminateCheckbox = React.forwardRef( // eslint-disable-line react/display-name
   ({ indeterminate, ...rest }:any, ref) => {
diff --git a/app/javascript/src/common/Toastr.tsx b/app/javascript/src/common/Toastr.tsx
index f789055c3b..a67439d268 100644
--- a/app/javascript/src/common/Toastr.tsx
+++ b/app/javascript/src/common/Toastr.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { toast, Slide } from "react-toastify";
+
 import { GetToasterIcon, getToasterCloseButton } from "../constants/index";
 
 const customId = "custom-toaster-id";
diff --git a/app/javascript/src/components/App.tsx b/app/javascript/src/components/App.tsx
index be4edd02a3..eb14474cde 100644
--- a/app/javascript/src/components/App.tsx
+++ b/app/javascript/src/components/App.tsx
@@ -1,9 +1,13 @@
 import React, { Fragment, useEffect } from "react";
+
+import { Roles, TOASTER_DURATION } from "constants/index";
+
 import { BrowserRouter } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
+
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import UserContext from "context/UserContext";
-import { Roles, TOASTER_DURATION } from "constants/index";
+
 import Main from "./Main";
 import Navbar from "./Navbar";
 
diff --git a/app/javascript/src/components/Clients/Details/Header.tsx b/app/javascript/src/components/Clients/Details/Header.tsx
index 2764c23f6e..7099fa33da 100644
--- a/app/javascript/src/components/Clients/Details/Header.tsx
+++ b/app/javascript/src/components/Clients/Details/Header.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+
 import { ArrowLeft, DotsThreeVertical, Receipt, Pencil, CaretDown, Trash } from "phosphor-react";
+import { useNavigate } from "react-router-dom";
 
 import AddProject from "../Modals/AddProject";
 import DeleteClient from "../Modals/DeleteClient";
diff --git a/app/javascript/src/components/Clients/Details/index.tsx b/app/javascript/src/components/Clients/Details/index.tsx
index e257368f01..7d4b46b0dc 100644
--- a/app/javascript/src/components/Clients/Details/index.tsx
+++ b/app/javascript/src/components/Clients/Details/index.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from "react";
+
+import { TOASTER_DURATION } from "constants/index";
+
 import { useParams } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
+
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import clientApi from "apis/clients";
-
 import AmountBoxContainer from "common/AmountBox";
 import ChartBar from "common/ChartBar";
 import Table from "common/Table";
@@ -13,8 +16,8 @@ import { cashFormatter } from "helpers/cashFormater";
 import { currencySymbol } from "helpers/currencySymbol";
 import { sendGAPageView } from "utils/googleAnalytics";
 
-import { TOASTER_DURATION } from "constants/index";
 import Header from "./Header";
+
 import { unmapClientDetails } from "../../../mapper/client.mapper";
 
 const getTableData = (clients) => {
@@ -67,10 +70,7 @@ const ClientList = ({ isAdminUser }) => {
       });
   };
 
-  useEffect(() => {
-    sendGAPageView();
-    setAuthHeaders();
-    registerIntercepts();
+  const fetchProjectList = () => {
     clientApi.show(params.clientId, "?time_frame=week")
       .then((res) => {
         const sanitized = unmapClientDetails(res);
@@ -79,6 +79,13 @@ const ClientList = ({ isAdminUser }) => {
         setTotalMinutes(sanitized.totalMinutes);
         setOverDueOutstandingAmt(sanitized.overdueOutstandingAmount);
       });
+  };
+
+  useEffect(() => {
+    sendGAPageView();
+    setAuthHeaders();
+    registerIntercepts();
+    fetchProjectList();
   }, []);
 
   const tableHeader = [
@@ -134,7 +141,7 @@ const ClientList = ({ isAdminUser }) => {
                     THIS WEEK
               </option>
               <option className="text-miru-dark-purple-600" value="month">
-                    This MONTH
+                    THIS MONTH
               </option>
               <option className="text-miru-dark-purple-600" value="year">
                     THIS YEAR
@@ -173,6 +180,7 @@ const ClientList = ({ isAdminUser }) => {
         <DeleteProject
           setShowDeleteDialog={setShowDeleteDialog}
           project={selectedProject}
+          fetchProjectList={fetchProjectList}
         />
       )}
     </>
diff --git a/app/javascript/src/components/Clients/List/Header.tsx b/app/javascript/src/components/Clients/List/Header.tsx
index 369893ba23..c39c8dac5c 100644
--- a/app/javascript/src/components/Clients/List/Header.tsx
+++ b/app/javascript/src/components/Clients/List/Header.tsx
@@ -1,20 +1,18 @@
 import * as React from "react";
+
+import { MagnifyingGlass, Plus } from "phosphor-react";
+
 import clientApi from "apis/clients";
 import AutoComplete from "common/AutoComplete";
-import { MagnifyingGlass, Plus } from "phosphor-react";
-import { unmapClientListForDropdown } from "../../../mapper/client.mapper";
 
-const Header = ({
-  setnewClient,
-  isAdminUser
-}) => {
+import { unmapClientListForDropdown } from "../../../mapper/client.mapper";
 
+const Header = ({ setnewClient, isAdminUser }) => {
   const searchCallBack = async (searchString, setDropdownItems) => {
-    await clientApi.get(`?q=${searchString}`)
-      .then((res) => {
-        const dropdownList = unmapClientListForDropdown(res);
-        setDropdownItems(dropdownList);
-      });
+    await clientApi.get(`?q=${searchString}`).then((res) => {
+      const dropdownList = unmapClientListForDropdown(res);
+      setDropdownItems(dropdownList);
+    });
   };
 
   return (
@@ -23,27 +21,31 @@ const Header = ({
         isAdminUser
           ? "sm:flex mt-6 mb-3 sm:items-center sm:justify-between"
           : "sm:flex mt-6 mb-3 sm:items-center"
-      }>
-      <h2 className="header__title">Clients</h2>
-      <div className="header__searchWrap">
-        <div className="header__searchInnerWrapper">
-          <AutoComplete searchCallBack={searchCallBack} />
-          <button className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
-            <MagnifyingGlass size={12} />
-          </button>
-        </div>
-      </div>
+      }
+    >
+      <h2 className="header__title ml-4">Clients</h2>
+
       {isAdminUser && (
-        <div className="flex">
-          <button
-            type="button"
-            className="header__button"
-            onClick={() => setnewClient(true)}
-          >
-            <Plus weight="fill" size={16} />
-            <span className="ml-2 inline-block">NEW CLIENT</span>
-          </button>
-        </div>
+        <React.Fragment>
+          <div className="header__searchWrap">
+            <div className="header__searchInnerWrapper">
+              <AutoComplete searchCallBack={searchCallBack} />
+              <button className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
+                <MagnifyingGlass size={12} />
+              </button>
+            </div>
+          </div>
+          <div className="flex">
+            <button
+              type="button"
+              className="header__button"
+              onClick={() => setnewClient(true)}
+            >
+              <Plus weight="fill" size={16} />
+              <span className="ml-2 inline-block">NEW CLIENT</span>
+            </button>
+          </div>
+        </React.Fragment>
       )}
     </div>
   );
diff --git a/app/javascript/src/components/Clients/List/index.tsx b/app/javascript/src/components/Clients/List/index.tsx
index c8b247a6d4..47cc0bf251 100644
--- a/app/javascript/src/components/Clients/List/index.tsx
+++ b/app/javascript/src/components/Clients/List/index.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from "react";
+
+import { TOASTER_DURATION } from "constants/index";
+
 import { useNavigate } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
+
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import clientApi from "apis/clients";
-
 import AmountBoxContainer from "common/AmountBox";
 import ChartBar from "common/ChartBar";
 import Table from "common/Table";
@@ -11,8 +14,8 @@ import { cashFormatter } from "helpers/cashFormater";
 import { currencySymbol } from "helpers/currencySymbol";
 import { sendGAPageView } from "utils/googleAnalytics";
 
-import { TOASTER_DURATION } from "constants/index";
 import Header from "./Header";
+
 import { unmapClientList } from "../../../mapper/client.mapper";
 import DeleteClient from "../Modals/DeleteClient";
 import EditClient from "../Modals/EditClient";
@@ -101,6 +104,19 @@ const Clients = ({ isAdminUser }) => {
     }
   ];
 
+  const employeeTableHeader = [
+    {
+      Header: "CLIENT",
+      accessor: "col1", // accessor is the "key" in the data
+      cssClass: ""
+    },
+    {
+      Header: "HOURS LOGGED",
+      accessor: "col3",
+      cssClass: "text-right" // accessor is the "key" in the data
+    }
+  ];
+
   const currencySymb = currencySymbol(overdueOutstandingAmount?.currency);
 
   const amountBox = [{
@@ -136,7 +152,7 @@ const Clients = ({ isAdminUser }) => {
                 THIS WEEK
               </option>
               <option className="text-miru-dark-purple-600" value="month">
-                This MONTH
+                THIS MONTH
               </option>
               <option className="text-miru-dark-purple-600" value="year">
                 THIS YEAR
@@ -155,7 +171,7 @@ const Clients = ({ isAdminUser }) => {
                   handleEditClick={handleEditClick}
                   handleDeleteClick={handleDeleteClick}
                   hasRowIcons={isAdminUser}
-                  tableHeader={tableHeader}
+                  tableHeader={isAdminUser? tableHeader : employeeTableHeader}
                   tableRowArray={tableData}
                   rowOnClick={isAdminUser ? handleRowClick : () => { }}// eslint-disable-line
                 />}
diff --git a/app/javascript/src/components/Clients/Modals/AddProject.tsx b/app/javascript/src/components/Clients/Modals/AddProject.tsx
index 5c31ba3ab8..d8d92c2a84 100644
--- a/app/javascript/src/components/Clients/Modals/AddProject.tsx
+++ b/app/javascript/src/components/Clients/Modals/AddProject.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
+
+import { X } from "phosphor-react";
 import { useNavigate } from "react-router-dom";
+
 import projectApi from "apis/projects";
-import { X } from "phosphor-react";
 
 const AddProject = ({ setShowProjectModal, clientDetails }) => {
 
diff --git a/app/javascript/src/components/Clients/Modals/DeleteClient.tsx b/app/javascript/src/components/Clients/Modals/DeleteClient.tsx
index 632f7cf64b..465f6d42da 100644
--- a/app/javascript/src/components/Clients/Modals/DeleteClient.tsx
+++ b/app/javascript/src/components/Clients/Modals/DeleteClient.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import { useNavigate } from "react-router-dom";
+
 import clientApi from "apis/clients";
 
 interface IProps {
diff --git a/app/javascript/src/components/Clients/Modals/EditClient.tsx b/app/javascript/src/components/Clients/Modals/EditClient.tsx
index 5f44a98d49..bb4bb3964d 100644
--- a/app/javascript/src/components/Clients/Modals/EditClient.tsx
+++ b/app/javascript/src/components/Clients/Modals/EditClient.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 
-import clientApi from "apis/clients";
 import { Formik, Form, Field, FormikProps } from "formik";
 import { X } from "phosphor-react";
 import * as Yup from "yup";
 
+import clientApi from "apis/clients";
+
 const newClientSchema = Yup.object().shape({
   name: Yup.string().required("Name cannot be blank"),
   email: Yup.string().email("Invalid email ID").required("Email ID cannot be blank"),
diff --git a/app/javascript/src/components/Clients/Modals/NewClient.tsx b/app/javascript/src/components/Clients/Modals/NewClient.tsx
index 8d864e1c82..5828caa313 100644
--- a/app/javascript/src/components/Clients/Modals/NewClient.tsx
+++ b/app/javascript/src/components/Clients/Modals/NewClient.tsx
@@ -1,10 +1,12 @@
 import React from "react";
-import clientApi from "apis/clients";
-import Toastr from "common/Toastr";
+
 import { Formik, Form, Field, FormikProps } from "formik";
 import { X } from "phosphor-react";
 import * as Yup from "yup";
 
+import clientApi from "apis/clients";
+import Toastr from "common/Toastr";
+
 const newClientSchema = Yup.object().shape({
   name: Yup.string().required("Name cannot be blank"),
   email: Yup.string().email("Invalid email ID").required("Email ID cannot be blank"),
diff --git a/app/javascript/src/components/InvoiceEmail/Header.tsx b/app/javascript/src/components/InvoiceEmail/Header.tsx
index 02e54730ba..8eaa34ba5e 100644
--- a/app/javascript/src/components/InvoiceEmail/Header.tsx
+++ b/app/javascript/src/components/InvoiceEmail/Header.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Wallet } from "phosphor-react";
 
 const Header = ({ invoice, stripeUrl }) => (
diff --git a/app/javascript/src/components/InvoiceEmail/InvoiceDetails.tsx b/app/javascript/src/components/InvoiceEmail/InvoiceDetails.tsx
index d0002e536a..f93d6651e4 100644
--- a/app/javascript/src/components/InvoiceEmail/InvoiceDetails.tsx
+++ b/app/javascript/src/components/InvoiceEmail/InvoiceDetails.tsx
@@ -1,6 +1,8 @@
 import React from "react";
+
 import InvoiceInfo from "./InvoiceInfo";
 import InvoiceTotalSummary from "./InvoiceTotalSummary";
+
 import ClientInfo from "../Invoices/Invoice/ClientInfo";
 import CompanyInfo from "../Invoices/Invoice/CompanyInfo";
 import InvoiceLineItems from "../Invoices/Invoice/InvoiceLineItems";
diff --git a/app/javascript/src/components/InvoiceEmail/InvoiceInfo.tsx b/app/javascript/src/components/InvoiceEmail/InvoiceInfo.tsx
index 0e2e7e774a..03dbd0e345 100644
--- a/app/javascript/src/components/InvoiceEmail/InvoiceInfo.tsx
+++ b/app/javascript/src/components/InvoiceEmail/InvoiceInfo.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import dayjs from "dayjs";
+
 import { currencyFormat } from "helpers/currency";
 
 const InvoiceInfo = ({ invoice, company }) => {
diff --git a/app/javascript/src/components/InvoiceEmail/InvoiceTotalSummary.tsx b/app/javascript/src/components/InvoiceEmail/InvoiceTotalSummary.tsx
index 6cd36134d6..0a7750dc6b 100644
--- a/app/javascript/src/components/InvoiceEmail/InvoiceTotalSummary.tsx
+++ b/app/javascript/src/components/InvoiceEmail/InvoiceTotalSummary.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { currencyFormat } from "helpers/currency";
 
 const InvoiceTotalSummary = ({ invoice, company, lineItems }) => {
diff --git a/app/javascript/src/components/Invoices/Edit/Header.tsx b/app/javascript/src/components/Invoices/Edit/Header.tsx
index 7ef38d5ba1..5752324b1b 100644
--- a/app/javascript/src/components/Invoices/Edit/Header.tsx
+++ b/app/javascript/src/components/Invoices/Edit/Header.tsx
@@ -1,7 +1,8 @@
 import React from "react";
+
+import { X, FloppyDisk, PaperPlaneTilt } from "phosphor-react";
 import { Link } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
-import { X, FloppyDisk, PaperPlaneTilt } from "phosphor-react";
 
 const Header = ({ invoiceNumber, id, updateInvoice }) => (
   <React.Fragment>
diff --git a/app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx b/app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx
index 49754c744e..198c6574d4 100644
--- a/app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx
+++ b/app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useRef } from "react";
 
 import useOutsideClick from "helpers/outsideClick";
+
 import NewLineItemTable from "./NewLineItemTable";
+
 import TableHeader from "../common/LineItemTableHeader";
 import NewLineItemRow from "../common/NewLineItemRow";
 import ManualEntry from "../Generate/ManualEntry";
diff --git a/app/javascript/src/components/Invoices/Edit/InvoiceTotal.tsx b/app/javascript/src/components/Invoices/Edit/InvoiceTotal.tsx
index e4fa262e02..d74cb9568d 100644
--- a/app/javascript/src/components/Invoices/Edit/InvoiceTotal.tsx
+++ b/app/javascript/src/components/Invoices/Edit/InvoiceTotal.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { currencyFormat } from "helpers/currency";
+
 import { PencilSimple, DotsThreeVertical } from "phosphor-react";
 
+import { currencyFormat } from "helpers/currency";
+
 import DiscountMenu from "../Generate/DiscountMenu";
 
 // TODO: Make invoice total as common component and move logic to main container
diff --git a/app/javascript/src/components/Invoices/Edit/index.tsx b/app/javascript/src/components/Invoices/Edit/index.tsx
index 481f9b6558..f06da196c0 100644
--- a/app/javascript/src/components/Invoices/Edit/index.tsx
+++ b/app/javascript/src/components/Invoices/Edit/index.tsx
@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react";
+
+import dayjs from "dayjs";
 import { useParams, useNavigate } from "react-router-dom";
 
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import clientsApi from "apis/clients";
 import invoicesApi from "apis/invoices";
-import dayjs from "dayjs";
 import { sendGAPageView } from "utils/googleAnalytics";
 
 import Header from "./Header";
 import InvoiceTable from "./InvoiceTable";
 import InvoiceTotal from "./InvoiceTotal";
+
 import { unmapLineItems } from "../../../mapper/editInvoice.mapper";
 import { generateInvoiceLineItems } from "../common/utils";
 import CompanyInfo from "../CompanyInfo";
diff --git a/app/javascript/src/components/Invoices/Generate/ClientSelection.tsx b/app/javascript/src/components/Invoices/Generate/ClientSelection.tsx
index 88773ae6ac..cfe3d1b084 100644
--- a/app/javascript/src/components/Invoices/Generate/ClientSelection.tsx
+++ b/app/javascript/src/components/Invoices/Generate/ClientSelection.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useRef } from "react";
+
+import { PencilSimple } from "phosphor-react";
 import Select from "react-select";
+
 import useOutsideClick from "helpers/outsideClick";
-import { PencilSimple } from "phosphor-react";
 
 import { DropdownIndicator } from "./CustomComponents";
 import { reactSelectStyles } from "./Styles";
diff --git a/app/javascript/src/components/Invoices/Generate/CustomComponents.tsx b/app/javascript/src/components/Invoices/Generate/CustomComponents.tsx
index 0b4e92e350..0ee9ba95ad 100644
--- a/app/javascript/src/components/Invoices/Generate/CustomComponents.tsx
+++ b/app/javascript/src/components/Invoices/Generate/CustomComponents.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { components, DropdownIndicatorProps } from "react-select";
+
 import { MagnifyingGlass } from "phosphor-react";
+import { components, DropdownIndicatorProps } from "react-select";
 
 export const DropdownIndicator = (props: DropdownIndicatorProps<true>) => (
   <components.DropdownIndicator {...props}>
diff --git a/app/javascript/src/components/Invoices/Generate/DiscountMenu.tsx b/app/javascript/src/components/Invoices/Generate/DiscountMenu.tsx
index dba2414258..4d5fefe73f 100644
--- a/app/javascript/src/components/Invoices/Generate/DiscountMenu.tsx
+++ b/app/javascript/src/components/Invoices/Generate/DiscountMenu.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { PencilSimple, Trash } from "phosphor-react";
 
 const Discountmenu = ({ setShowDiscount, setShowDiscountMenu, setAddDiscount, setDiscount }) => (
diff --git a/app/javascript/src/components/Invoices/Generate/Header.tsx b/app/javascript/src/components/Invoices/Generate/Header.tsx
index 67a6d12064..9028ddbf94 100644
--- a/app/javascript/src/components/Invoices/Generate/Header.tsx
+++ b/app/javascript/src/components/Invoices/Generate/Header.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import { ToastContainer } from "react-toastify";
-import { X, FloppyDisk, PaperPlaneTilt, Gear } from "phosphor-react";
 
 import { TOASTER_DURATION } from "constants/index";
 
+import { X, FloppyDisk, PaperPlaneTilt, Gear } from "phosphor-react";
+import { Link } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+
 const Header = ({
   handleSendInvoice,
   handleSaveInvoice,
diff --git a/app/javascript/src/components/Invoices/Generate/InvoiceDetails.tsx b/app/javascript/src/components/Invoices/Generate/InvoiceDetails.tsx
index bec8a20e7b..686343cbfc 100644
--- a/app/javascript/src/components/Invoices/Generate/InvoiceDetails.tsx
+++ b/app/javascript/src/components/Invoices/Generate/InvoiceDetails.tsx
@@ -1,8 +1,11 @@
 import React, { useState, useRef } from "react";
-import CustomDatePicker from "common/CustomDatePicker";
+
 import dayjs from "dayjs";
-import { currencyFormat } from "helpers/currency";
 import { PencilSimple } from "phosphor-react";
+
+import CustomDatePicker from "common/CustomDatePicker";
+import { currencyFormat } from "helpers/currency";
+
 import ClientSelection from "./ClientSelection";
 
 const InvoiceDetails = ({
diff --git a/app/javascript/src/components/Invoices/Generate/InvoiceSettings.tsx b/app/javascript/src/components/Invoices/Generate/InvoiceSettings.tsx
index 4f90f9468a..d137b8bfb5 100644
--- a/app/javascript/src/components/Invoices/Generate/InvoiceSettings.tsx
+++ b/app/javascript/src/components/Invoices/Generate/InvoiceSettings.tsx
@@ -1,12 +1,14 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useEffect } from "react";
 
+import { ApiStatus as PaymentSettingsStatus } from "constants/index";
+
+import { X } from "phosphor-react";
+
 import paymentSettings from "apis/payment-settings";
 import PaymentsProviders from "apis/payments/providers";
 import CustomCheckbox from "common/CustomCheckbox";
 import CustomToggle from "common/CustomToggle";
-import { X } from "phosphor-react";
-import { ApiStatus as PaymentSettingsStatus } from "constants/index";
 
 const amex = require("../../../../../assets/images/amex.svg");
 const applePay = require("../../../../../assets/images/applePay.svg");
diff --git a/app/javascript/src/components/Invoices/Generate/InvoiceTable.tsx b/app/javascript/src/components/Invoices/Generate/InvoiceTable.tsx
index a6dce163bd..0180547d99 100644
--- a/app/javascript/src/components/Invoices/Generate/InvoiceTable.tsx
+++ b/app/javascript/src/components/Invoices/Generate/InvoiceTable.tsx
@@ -1,11 +1,13 @@
 import React, { useEffect, useState, useRef } from "react";
-import generateInvoice from "apis/generateInvoice";
+
 import dayjs from "dayjs";
 
+import generateInvoice from "apis/generateInvoice";
 import useOutsideClick from "helpers/outsideClick";
 
 import ManualEntry from "./ManualEntry";
 import NewLineItemTable from "./NewLineItemTable";
+
 import TableHeader from "../common/LineItemTableHeader";
 import NewLineItemRows from "../common/NewLineItemRow";
 import MultipleEntriesModal from "../MultipleEntriesModal";
diff --git a/app/javascript/src/components/Invoices/Generate/InvoiceTotal.tsx b/app/javascript/src/components/Invoices/Generate/InvoiceTotal.tsx
index 3ec849cf3b..d3906e10f4 100644
--- a/app/javascript/src/components/Invoices/Generate/InvoiceTotal.tsx
+++ b/app/javascript/src/components/Invoices/Generate/InvoiceTotal.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { currencyFormat } from "helpers/currency";
+
 import { PencilSimple, DotsThreeVertical } from "phosphor-react";
 
+import { currencyFormat } from "helpers/currency";
+
 import DiscountMenu from "./DiscountMenu";
 
 const InvoiceTotal = ({
diff --git a/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx b/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx
index e80b7afe81..af7cefafce 100644
--- a/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx
+++ b/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx
@@ -1,7 +1,10 @@
 import React from "react";
-import InfiniteScroll from "react-infinite-scroll-component";
+
 import dayjs from "dayjs";
+import InfiniteScroll from "react-infinite-scroll-component";
+
 import { DropdownHeader } from "./CustomComponents";
+
 import { getMaxIdx } from "../common/utils";
 
 const NewLineItemTable = ({
diff --git a/app/javascript/src/components/Invoices/Generate/index.tsx b/app/javascript/src/components/Invoices/Generate/index.tsx
index 0827cb330e..90a8ab474c 100644
--- a/app/javascript/src/components/Invoices/Generate/index.tsx
+++ b/app/javascript/src/components/Invoices/Generate/index.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from "react";
 
 import { useNavigate } from "react-router-dom";
+
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import generateInvoice from "apis/generateInvoice";
-
 import invoicesApi from "apis/invoices";
 import Toastr from "common/Toastr";
 import { sendGAPageView } from "utils/googleAnalytics";
+
 import Container from "./Container";
 import Header from "./Header";
-
 import InvoiceSettings from "./InvoiceSettings";
+
 import { mapGenerateInvoice, unmapGenerateInvoice } from "../../../mapper/generateInvoice.mapper";
 import { generateInvoiceLineItems } from "../common/utils";
 import SendInvoice from "../popups/SendInvoice";
diff --git a/app/javascript/src/components/Invoices/Invoice/BackButton.tsx b/app/javascript/src/components/Invoices/Invoice/BackButton.tsx
index 54468c080b..7bfc328e67 100644
--- a/app/javascript/src/components/Invoices/Invoice/BackButton.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/BackButton.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 import {
   ArrowLeft
 } from "phosphor-react";
+import { Link } from "react-router-dom";
 
 const BackButton = ({ href }) => (
   <div className="h-14 w-14 flex flex-row justify-center items-center mr-1">
diff --git a/app/javascript/src/components/Invoices/Invoice/DeleteButton.tsx b/app/javascript/src/components/Invoices/Invoice/DeleteButton.tsx
index 420fb97df4..be39f42934 100644
--- a/app/javascript/src/components/Invoices/Invoice/DeleteButton.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/DeleteButton.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Trash } from "phosphor-react";
 
 const DeleteButton = ({ onClick }) => (
diff --git a/app/javascript/src/components/Invoices/Invoice/EditButton.tsx b/app/javascript/src/components/Invoices/Invoice/EditButton.tsx
index 5e7dbc75ef..1e8c6f38d3 100644
--- a/app/javascript/src/components/Invoices/Invoice/EditButton.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/EditButton.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 import { Pencil } from "phosphor-react";
+import { Link } from "react-router-dom";
 
 const EditButton = ({ editInvoiceLink }) => (
   <div className="flex flex-col justify-items-center edit-button-container mx-1">
diff --git a/app/javascript/src/components/Invoices/Invoice/Header.tsx b/app/javascript/src/components/Invoices/Invoice/Header.tsx
index d619edca46..c14d4f9445 100644
--- a/app/javascript/src/components/Invoices/Invoice/Header.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/Header.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import BackButton from "./BackButton";
 import InvoiceActions from "./InvoiceActions";
 import InvoiceStatus from "./InvoiceStatus";
diff --git a/app/javascript/src/components/Invoices/Invoice/InvoiceActions.tsx b/app/javascript/src/components/Invoices/Invoice/InvoiceActions.tsx
index 4587a8065c..42ee5030c0 100644
--- a/app/javascript/src/components/Invoices/Invoice/InvoiceActions.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/InvoiceActions.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import DeleteButton from "./DeleteButton";
 import EditButton from "./EditButton";
 import SendButton from "./SendButton";
diff --git a/app/javascript/src/components/Invoices/Invoice/InvoiceDetails.tsx b/app/javascript/src/components/Invoices/Invoice/InvoiceDetails.tsx
index dfbfd8bdc6..da6e2ad1bb 100644
--- a/app/javascript/src/components/Invoices/Invoice/InvoiceDetails.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/InvoiceDetails.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import ClientInfo from "./ClientInfo";
 import CompanyInfo from "./CompanyInfo";
 import InvoiceInfo from "./InvoiceInfo";
diff --git a/app/javascript/src/components/Invoices/Invoice/InvoiceInfo.tsx b/app/javascript/src/components/Invoices/Invoice/InvoiceInfo.tsx
index 652133de14..edab895fda 100644
--- a/app/javascript/src/components/Invoices/Invoice/InvoiceInfo.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/InvoiceInfo.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import dayjs from "dayjs";
+
 import { currencyFormat } from "helpers/currency";
 
 const formatDate = (date) => dayjs(date).format("DD-MM-YYYY");
diff --git a/app/javascript/src/components/Invoices/Invoice/InvoiceLineItems.tsx b/app/javascript/src/components/Invoices/Invoice/InvoiceLineItems.tsx
index 8ce5744c56..e0778e2b9a 100644
--- a/app/javascript/src/components/Invoices/Invoice/InvoiceLineItems.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/InvoiceLineItems.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import LineItem from "./LineItem";
 
 const InvoiceLineItems = ({ currency, items, showHeader }) => {
diff --git a/app/javascript/src/components/Invoices/Invoice/InvoiceTotalSummary.tsx b/app/javascript/src/components/Invoices/Invoice/InvoiceTotalSummary.tsx
index d1c7a1b7bb..ba41d45ed2 100644
--- a/app/javascript/src/components/Invoices/Invoice/InvoiceTotalSummary.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/InvoiceTotalSummary.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { currencyFormat } from "helpers/currency";
 
 const InvoiceTotalSummary = ({ invoice }) => {
diff --git a/app/javascript/src/components/Invoices/Invoice/LineItem.tsx b/app/javascript/src/components/Invoices/Invoice/LineItem.tsx
index 1d846dff24..7205c75526 100644
--- a/app/javascript/src/components/Invoices/Invoice/LineItem.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/LineItem.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import dayjs from "dayjs";
+
 import { currencyFormat } from "helpers/currency";
 
 const LineItem = ({ currency, item }) => {
diff --git a/app/javascript/src/components/Invoices/Invoice/SendButton.tsx b/app/javascript/src/components/Invoices/Invoice/SendButton.tsx
index d81b993b45..fe5a113adf 100644
--- a/app/javascript/src/components/Invoices/Invoice/SendButton.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/SendButton.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { PaperPlaneTilt } from "phosphor-react";
 
 const SendButton = ({ onClick }) => (
diff --git a/app/javascript/src/components/Invoices/Invoice/index.tsx b/app/javascript/src/components/Invoices/Invoice/index.tsx
index 5234edbbbd..cdce17ffc0 100644
--- a/app/javascript/src/components/Invoices/Invoice/index.tsx
+++ b/app/javascript/src/components/Invoices/Invoice/index.tsx
@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from "react";
+
+import { ApiStatus as InvoiceStatus } from "constants/index";
+
 import { useParams } from "react-router-dom";
 
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import invoicesApi from "apis/invoices";
 import { sendGAPageView } from "utils/googleAnalytics";
-import { ApiStatus as InvoiceStatus } from "constants/index";
 
 import Header from "./Header";
 import InvoiceDetails from "./InvoiceDetails";
+
 import DeleteInvoice from "../popups/DeleteInvoice";
 import SendInvoice from "../popups/SendInvoice";
 
diff --git a/app/javascript/src/components/Invoices/List/FilterSideBar/index.tsx b/app/javascript/src/components/Invoices/List/FilterSideBar/index.tsx
index c625984eed..30aa8f2664 100644
--- a/app/javascript/src/components/Invoices/List/FilterSideBar/index.tsx
+++ b/app/javascript/src/components/Invoices/List/FilterSideBar/index.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
-import Select from "react-select";
+
 import { X } from "phosphor-react";
+import Select from "react-select";
 
 import getStatusCssClass from "utils/getStatusTag";
 
diff --git a/app/javascript/src/components/Invoices/List/Header.tsx b/app/javascript/src/components/Invoices/List/Header.tsx
index 35ed617d4c..b7b11d5fad 100644
--- a/app/javascript/src/components/Invoices/List/Header.tsx
+++ b/app/javascript/src/components/Invoices/List/Header.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
-import invoicesApi from "apis/invoices";
-import useDebounce from "helpers/debounce";
+
+import { ApiStatus as InvoiceStatus } from "constants/index";
+
 import {
   Funnel,
   MagnifyingGlass,
@@ -10,7 +10,11 @@ import {
   PaperPlaneTilt,
   X
 } from "phosphor-react";
-import { ApiStatus as InvoiceStatus } from "constants/index";
+import { Link } from "react-router-dom";
+
+import invoicesApi from "apis/invoices";
+import useDebounce from "helpers/debounce";
+
 import SearchDropdown from "./InvoiceSearch/SearchDropdown";
 
 const Header = ({
diff --git a/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchDropdown.tsx b/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchDropdown.tsx
index 6f8e43ea7b..7513781f3b 100644
--- a/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchDropdown.tsx
+++ b/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchDropdown.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
+
 import { ApiStatus } from "constants/index";
+
 import SearchedDataRow from "./SearchedDataRow";
 
 const SearchDropdown = ({ list=[], status, display }) => {
diff --git a/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchedDataRow.tsx b/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchedDataRow.tsx
index cb4ce2abb5..b98e826905 100644
--- a/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchedDataRow.tsx
+++ b/app/javascript/src/components/Invoices/List/InvoiceSearch/SearchedDataRow.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
-import { useNavigate } from "react-router-dom";
+
 import dayjs from "dayjs";
+import { useNavigate } from "react-router-dom";
+
 import { currencyFormat } from "helpers/currency";
 import getStatusCssClass from "utils/getStatusTag";
 
diff --git a/app/javascript/src/components/Invoices/List/SendInvoice/index.tsx b/app/javascript/src/components/Invoices/List/SendInvoice/index.tsx
index 0656aaac49..eb87460aec 100644
--- a/app/javascript/src/components/Invoices/List/SendInvoice/index.tsx
+++ b/app/javascript/src/components/Invoices/List/SendInvoice/index.tsx
@@ -6,13 +6,15 @@ import React, {
   useState
 } from "react";
 
-import invoicesApi from "apis/invoices";
+import { ApiStatus as InvoiceStatus } from "constants/index";
+
 import cn from "classnames";
+import { X } from "phosphor-react";
+
+import invoicesApi from "apis/invoices";
 import Toastr from "common/Toastr";
 import useOutsideClick from "helpers/outsideClick";
-import { X } from "phosphor-react";
 
-import { ApiStatus as InvoiceStatus } from "constants/index";
 import {
   isEmailValid,
   emailSubject,
diff --git a/app/javascript/src/components/Invoices/List/SendInvoice/utils.ts b/app/javascript/src/components/Invoices/List/SendInvoice/utils.ts
index 4342f1201e..57efc6279c 100644
--- a/app/javascript/src/components/Invoices/List/SendInvoice/utils.ts
+++ b/app/javascript/src/components/Invoices/List/SendInvoice/utils.ts
@@ -1,8 +1,9 @@
+import { ApiStatus as InvoiceStatus } from "constants/index";
+
 import dayjs from "dayjs";
-import { currencyFormat } from "helpers/currency";
 import * as Yup from "yup";
 
-import { ApiStatus as InvoiceStatus } from "constants/index";
+import { currencyFormat } from "helpers/currency";
 
 export const isEmailValid = (email: string): boolean => {
   const schema = Yup.string().email();
diff --git a/app/javascript/src/components/Invoices/List/Table/TableRow.tsx b/app/javascript/src/components/Invoices/List/Table/TableRow.tsx
index fe92dde801..750b5bd644 100644
--- a/app/javascript/src/components/Invoices/List/Table/TableRow.tsx
+++ b/app/javascript/src/components/Invoices/List/Table/TableRow.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import CustomCheckbox from "common/CustomCheckbox";
+
 import dayjs from "dayjs";
-import { currencyFormat } from "helpers/currency";
 import { PaperPlaneTilt, Pen, Trash } from "phosphor-react";
+import { Link } from "react-router-dom";
 
+import CustomCheckbox from "common/CustomCheckbox";
+import { currencyFormat } from "helpers/currency";
 import getStatusCssClass from "utils/getStatusTag";
 
 import SendInvoice from "../SendInvoice";
diff --git a/app/javascript/src/components/Invoices/List/container.tsx b/app/javascript/src/components/Invoices/List/container.tsx
index 82c54f3803..01f982edfb 100644
--- a/app/javascript/src/components/Invoices/List/container.tsx
+++ b/app/javascript/src/components/Invoices/List/container.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import Table from "./Table";
+
 import InvoiceSummary from "../InvoiceSummary";
 
 const Container = ({
diff --git a/app/javascript/src/components/Invoices/List/index.tsx b/app/javascript/src/components/Invoices/List/index.tsx
index c22ac047b2..980a3107df 100644
--- a/app/javascript/src/components/Invoices/List/index.tsx
+++ b/app/javascript/src/components/Invoices/List/index.tsx
@@ -1,17 +1,19 @@
 import * as React from "react";
+
+import { ApiStatus as InvoicesStatus } from "constants/index";
+
 import { useSearchParams } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
 import invoicesApi from "apis/invoices";
 import Pagination from "common/Pagination";
 import { sendGAPageView } from "utils/googleAnalytics";
-import { ApiStatus as InvoicesStatus } from "constants/index";
 
 import Container from "./container";
 import FilterSideBar from "./FilterSideBar";
 import Header from "./Header";
-import { TOASTER_DURATION } from "../../../constants/index";
 
+import { TOASTER_DURATION } from "../../../constants/index";
 import BulkDeleteInvoices from "../popups/BulkDeleteInvoices";
 import DeleteInvoice from "../popups/DeleteInvoice";
 
diff --git a/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx b/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx
index 9082bb3e6c..f5a2b9c497 100644
--- a/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx
+++ b/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import Select from "react-select";
 
 const FilterSelect = ({ option, placeholder }) => {
diff --git a/app/javascript/src/components/Invoices/MultipleEntriesModal/Header.tsx b/app/javascript/src/components/Invoices/MultipleEntriesModal/Header.tsx
index a6b08ef47c..2051c4799f 100644
--- a/app/javascript/src/components/Invoices/MultipleEntriesModal/Header.tsx
+++ b/app/javascript/src/components/Invoices/MultipleEntriesModal/Header.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { X, MagnifyingGlass } from "phosphor-react";
+
 import FilterSelect from "./FilterSelect";
 
 const Header = ({ setMultiLineItemModal }) => (
diff --git a/app/javascript/src/components/Invoices/MultipleEntriesModal/Table.tsx b/app/javascript/src/components/Invoices/MultipleEntriesModal/Table.tsx
index 38f73e65c3..cf16c8996a 100644
--- a/app/javascript/src/components/Invoices/MultipleEntriesModal/Table.tsx
+++ b/app/javascript/src/components/Invoices/MultipleEntriesModal/Table.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import InfiniteScroll from "react-infinite-scroll-component";
+
 import dayjs from "dayjs";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 const CheckboxIcon = () => <div className="bg-white border-2 border-miru-han-purple-1000 w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500">
   <svg className="custom__checkbox-tick fill-current hidden w-2 h-2 text-miru-han-purple-1000 pointer-events-none" version="1.1" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/javascript/src/components/Invoices/MultipleEntriesModal/index.tsx b/app/javascript/src/components/Invoices/MultipleEntriesModal/index.tsx
index 9102b066f9..e5d9733da5 100644
--- a/app/javascript/src/components/Invoices/MultipleEntriesModal/index.tsx
+++ b/app/javascript/src/components/Invoices/MultipleEntriesModal/index.tsx
@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from "react";
+
 import dayjs from "dayjs";
+
 import Footer from "./Footer";
 import Header from "./Header";
 import Table from "./Table";
+
 import fetchNewLineItems from "../api/generateInvoice";
 
 const MultipleEntriesModal = ({
diff --git a/app/javascript/src/components/Invoices/common/NewLineItemRow/EditLineItems.tsx b/app/javascript/src/components/Invoices/common/NewLineItemRow/EditLineItems.tsx
index 3af47d5031..1c43ee67b3 100644
--- a/app/javascript/src/components/Invoices/common/NewLineItemRow/EditLineItems.tsx
+++ b/app/javascript/src/components/Invoices/common/NewLineItemRow/EditLineItems.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 
-import DatePicker from "react-datepicker";
 import { Trash } from "phosphor-react";
+import DatePicker from "react-datepicker";
 
 const EditLineItems = ({
   item,
diff --git a/app/javascript/src/components/Invoices/common/NewLineItemRow/NewLineItemStatic.tsx b/app/javascript/src/components/Invoices/common/NewLineItemRow/NewLineItemStatic.tsx
index e42fa826e9..a727c62b54 100644
--- a/app/javascript/src/components/Invoices/common/NewLineItemRow/NewLineItemStatic.tsx
+++ b/app/javascript/src/components/Invoices/common/NewLineItemRow/NewLineItemStatic.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from "react";
+
 import dayjs from "dayjs";
-import { currencyFormat } from "helpers/currency";
 import { DotsThreeVertical, PencilSimple, Trash } from "phosphor-react";
 
+import { currencyFormat } from "helpers/currency";
+
 const NewLineItemStatic = ({
   currency,
   item,
diff --git a/app/javascript/src/components/Invoices/common/NewLineItemRow/index.tsx b/app/javascript/src/components/Invoices/common/NewLineItemRow/index.tsx
index e5107a49cb..11a43c2a1a 100644
--- a/app/javascript/src/components/Invoices/common/NewLineItemRow/index.tsx
+++ b/app/javascript/src/components/Invoices/common/NewLineItemRow/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import EditLineItems from "./EditLineItems";
 import NewLineItemStatic from "./NewLineItemStatic";
 
diff --git a/app/javascript/src/components/Invoices/popups/BulkDeleteInvoices.tsx b/app/javascript/src/components/Invoices/popups/BulkDeleteInvoices.tsx
index 375691b91b..ecc0f3f3f7 100644
--- a/app/javascript/src/components/Invoices/popups/BulkDeleteInvoices.tsx
+++ b/app/javascript/src/components/Invoices/popups/BulkDeleteInvoices.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import invoicesApi from "apis/invoices";
 
 interface IProps {
diff --git a/app/javascript/src/components/Invoices/popups/DeleteInvoice.tsx b/app/javascript/src/components/Invoices/popups/DeleteInvoice.tsx
index bae4b7ae8a..764ca02faa 100644
--- a/app/javascript/src/components/Invoices/popups/DeleteInvoice.tsx
+++ b/app/javascript/src/components/Invoices/popups/DeleteInvoice.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import { useNavigate } from "react-router-dom";
+
 import invoicesApi from "apis/invoices";
 
 interface IProps {
diff --git a/app/javascript/src/components/Invoices/popups/SendInvoice/index.tsx b/app/javascript/src/components/Invoices/popups/SendInvoice/index.tsx
index a50a02f027..a739abab9e 100644
--- a/app/javascript/src/components/Invoices/popups/SendInvoice/index.tsx
+++ b/app/javascript/src/components/Invoices/popups/SendInvoice/index.tsx
@@ -5,15 +5,17 @@ import React, {
   useRef,
   useState
 } from "react";
+
+import { ApiStatus as InvoiceStatus } from "constants/index";
+
+import cn from "classnames";
+import { X } from "phosphor-react";
 import { useNavigate } from "react-router-dom";
 
 import invoicesApi from "apis/invoices";
-import cn from "classnames";
 import Toastr from "common/Toastr";
 import useOutsideClick from "helpers/outsideClick";
-import { X } from "phosphor-react";
 
-import { ApiStatus as InvoiceStatus } from "constants/index";
 import {
   isEmailValid,
   emailSubject,
diff --git a/app/javascript/src/components/Invoices/popups/SendInvoice/utils.tsx b/app/javascript/src/components/Invoices/popups/SendInvoice/utils.tsx
index fced1b0001..334c7424b7 100644
--- a/app/javascript/src/components/Invoices/popups/SendInvoice/utils.tsx
+++ b/app/javascript/src/components/Invoices/popups/SendInvoice/utils.tsx
@@ -1,8 +1,9 @@
+import { ApiStatus as InvoiceStatus } from "constants/index";
+
 import dayjs from "dayjs";
-import { currencyFormat } from "helpers/currency";
 import * as Yup from "yup";
 
-import { ApiStatus as InvoiceStatus } from "constants/index";
+import { currencyFormat } from "helpers/currency";
 
 export const isEmailValid = (email: string): boolean => {
   const schema = Yup.string().email();
diff --git a/app/javascript/src/components/Main.tsx b/app/javascript/src/components/Main.tsx
index 0f55548906..e8350c6538 100644
--- a/app/javascript/src/components/Main.tsx
+++ b/app/javascript/src/components/Main.tsx
@@ -1,4 +1,8 @@
 import React from "react";
+
+import { Roles, Paths } from "constants/index";
+import ROUTES from "constants/routes";
+
 import {
   Routes,
   Route,
@@ -7,8 +11,6 @@ import {
 } from "react-router-dom";
 
 import ErrorPage from "common/Error";
-import { Roles, Paths } from "constants/index";
-import ROUTES from "constants/routes";
 
 const RestrictedRoute = ({ user, role, authorisedRoles }) => {
   if (!user) {
diff --git a/app/javascript/src/components/Navbar/index.tsx b/app/javascript/src/components/Navbar/index.tsx
index aa871b7739..307129c82e 100644
--- a/app/javascript/src/components/Navbar/index.tsx
+++ b/app/javascript/src/components/Navbar/index.tsx
@@ -1,5 +1,7 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
+
+import { Paths } from "constants/index";
+
 import {
   Timer,
   UsersThree,
@@ -13,8 +15,8 @@ import {
   Question,
   SignOut
 } from "phosphor-react";
+import { NavLink } from "react-router-dom";
 
-import { Paths } from "constants/index";
 const miruLogo = require("../../../../assets/images/PurpleMiruLogoWithText.svg"); //eslint-disable-line
 const avatar = require("../../../../assets/images/NavAvatar.svg"); //eslint-disable-line
 
diff --git a/app/javascript/src/components/PlanDetails/index.tsx b/app/javascript/src/components/PlanDetails/index.tsx
index 9da508ab9f..60438b851e 100644
--- a/app/javascript/src/components/PlanDetails/index.tsx
+++ b/app/javascript/src/components/PlanDetails/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { Formik, Form, Field } from "formik";
 import * as Yup from "yup";
 
diff --git a/app/javascript/src/components/Profile/BankAccountDetails/BankDetails.tsx b/app/javascript/src/components/Profile/BankAccountDetails/BankDetails.tsx
index a5f4feb6be..7413886ad1 100644
--- a/app/javascript/src/components/Profile/BankAccountDetails/BankDetails.tsx
+++ b/app/javascript/src/components/Profile/BankAccountDetails/BankDetails.tsx
@@ -1,10 +1,13 @@
 import React, { useEffect } from "react";
 
-import wiseApi from "apis/wise";
 import { X } from "phosphor-react";
 import { isEmpty } from "ramda";
+
+import wiseApi from "apis/wise";
+
 import AddressDetails from "./AddressDetails";
 import BankDetailInput from "./BillingDetailInput";
+
 /* eslint-disable @typescript-eslint/no-var-requires */
 const Shield = require("../../../../../assets/images/shield.svg");
 
diff --git a/app/javascript/src/components/Profile/BankAccountDetails/CurrencyDropdown.tsx b/app/javascript/src/components/Profile/BankAccountDetails/CurrencyDropdown.tsx
index 746942a3ec..b87318c63c 100644
--- a/app/javascript/src/components/Profile/BankAccountDetails/CurrencyDropdown.tsx
+++ b/app/javascript/src/components/Profile/BankAccountDetails/CurrencyDropdown.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect } from "react";
 
-import wiseApi from "apis/wise";
 import getSymbolFromCurrency from "currency-symbol-map";
 
+import wiseApi from "apis/wise";
+
 const CurrencyDropdown = ({
   currencies, setCurrencies,
   currency, setCurrency,
diff --git a/app/javascript/src/components/Profile/BankAccountDetails/index.tsx b/app/javascript/src/components/Profile/BankAccountDetails/index.tsx
index 2f8e555cdb..c891478035 100644
--- a/app/javascript/src/components/Profile/BankAccountDetails/index.tsx
+++ b/app/javascript/src/components/Profile/BankAccountDetails/index.tsx
@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from "react";
 
+import { isEmpty } from "ramda";
+
 import profilesApi from "apis/profiles";
 import wiseApi from "apis/wise";
 import Loader from "common/Loader";
 import { separateAddressFields, bankFieldValidationRequirements } from "helpers/wiseUtilityFunctions";
-import { isEmpty } from "ramda";
 import { sendGAPageView } from "utils/googleAnalytics";
+
 import BankDetails from "./BankDetails";
 import BankInfo from "./BankInfo";
 import CurrencyDropdown from "./CurrencyDropdown";
+
 import Header from "../Header";
 
 const BankAccountDetails = () => {
diff --git a/app/javascript/src/components/Profile/Billing/Table/TableRow.tsx b/app/javascript/src/components/Profile/Billing/Table/TableRow.tsx
index 517edeb4b1..15ab289aa1 100644
--- a/app/javascript/src/components/Profile/Billing/Table/TableRow.tsx
+++ b/app/javascript/src/components/Profile/Billing/Table/TableRow.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { DownloadSimple } from "phosphor-react";
 
 const TableRow = ({
diff --git a/app/javascript/src/components/Profile/Billing/index.tsx b/app/javascript/src/components/Profile/Billing/index.tsx
index 4e60c8c053..ce81f204e0 100644
--- a/app/javascript/src/components/Profile/Billing/index.tsx
+++ b/app/javascript/src/components/Profile/Billing/index.tsx
@@ -1,7 +1,9 @@
 import React from "react";
+
 import { Divider } from "common/Divider";
 
 import Table from "./Table";
+
 import Header from "../Header";
 
 const Billing = () => (
diff --git a/app/javascript/src/components/Profile/Layout.tsx b/app/javascript/src/components/Profile/Layout.tsx
index f1add564ae..1de4fce646 100644
--- a/app/javascript/src/components/Profile/Layout.tsx
+++ b/app/javascript/src/components/Profile/Layout.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { useState } from "react";
-import { ToastContainer } from "react-toastify";
 
 import { TOASTER_DURATION } from "constants/index";
-import EntryContext from "./context/EntryContext";
 
+import { ToastContainer } from "react-toastify";
+
+import EntryContext from "./context/EntryContext";
 import RouteConfig from "./RouteConfig";
 import SideNav from "./SubNav";
 
diff --git a/app/javascript/src/components/Profile/Organization/Billing/Table/TableRow.tsx b/app/javascript/src/components/Profile/Organization/Billing/Table/TableRow.tsx
index 517edeb4b1..15ab289aa1 100644
--- a/app/javascript/src/components/Profile/Organization/Billing/Table/TableRow.tsx
+++ b/app/javascript/src/components/Profile/Organization/Billing/Table/TableRow.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { DownloadSimple } from "phosphor-react";
 
 const TableRow = ({
diff --git a/app/javascript/src/components/Profile/Organization/Billing/index.tsx b/app/javascript/src/components/Profile/Organization/Billing/index.tsx
index 87ce6bd4a6..e2c2ac68d2 100644
--- a/app/javascript/src/components/Profile/Organization/Billing/index.tsx
+++ b/app/javascript/src/components/Profile/Organization/Billing/index.tsx
@@ -1,8 +1,10 @@
 import React from "react";
+
 import { Divider } from "common/Divider";
 import { sendGAPageView } from "utils/googleAnalytics";
 
 import Table from "./Table";
+
 import Header from "../../Header";
 
 const Billing = () => {
diff --git a/app/javascript/src/components/Profile/Organization/Edit/index.tsx b/app/javascript/src/components/Profile/Organization/Edit/index.tsx
index 4cbee56260..509e460abb 100644
--- a/app/javascript/src/components/Profile/Organization/Edit/index.tsx
+++ b/app/javascript/src/components/Profile/Organization/Edit/index.tsx
@@ -1,6 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useCallback, useEffect, useState } from "react";
+
+import { CountryList } from "constants/countryList";
+import { currencyList } from "constants/currencyList";
+
 import Select from "react-select";
+import * as Yup from "yup";
 
 import companiesApi from "apis/companies";
 import companyProfileApi from "apis/companyProfile";
@@ -8,9 +13,6 @@ import { Divider } from "common/Divider";
 import Loader from "common/Loader/index";
 import Toastr from "common/Toastr";
 import { sendGAPageView } from "utils/googleAnalytics";
-import * as Yup from "yup";
-import { CountryList } from "constants/countryList";
-import { currencyList } from "constants/currencyList";
 
 import Header from "../../Header";
 
diff --git a/app/javascript/src/components/Profile/Organization/Import/TableRow.tsx b/app/javascript/src/components/Profile/Organization/Import/TableRow.tsx
index 4cd785435e..f25e5be682 100644
--- a/app/javascript/src/components/Profile/Organization/Import/TableRow.tsx
+++ b/app/javascript/src/components/Profile/Organization/Import/TableRow.tsx
@@ -1,5 +1,7 @@
 import React, { Fragment } from "react";
+
 import Select from "react-select";
+
 import { reactSelectStyles } from "./Styles";
 
 const TableRow = ({
diff --git a/app/javascript/src/components/Profile/Organization/Import/importCard.tsx b/app/javascript/src/components/Profile/Organization/Import/importCard.tsx
index 0b0d2f86ea..d30abc7849 100644
--- a/app/javascript/src/components/Profile/Organization/Import/importCard.tsx
+++ b/app/javascript/src/components/Profile/Organization/Import/importCard.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-constant-condition */
 import React from "react";
+
 import ProgressBar from "common/ProgressBar";
 
 const ImportCard = ({ id, title, description, btnText, handleOnShowModalClick }) => (
diff --git a/app/javascript/src/components/Profile/Organization/Import/importModal.tsx b/app/javascript/src/components/Profile/Organization/Import/importModal.tsx
index 9d7435e587..4327575fe7 100644
--- a/app/javascript/src/components/Profile/Organization/Import/importModal.tsx
+++ b/app/javascript/src/components/Profile/Organization/Import/importModal.tsx
@@ -1,8 +1,11 @@
 /* eslint-disable no-constant-condition */
 import React, { Fragment } from "react";
+
+import { X } from "phosphor-react";
+
 import ProgressBar from "common/ProgressBar";
 import { bytesToSize } from "helpers/byteToSizeConverter";
-import { X } from "phosphor-react";
+
 import TableHeader from "./TableHeader";
 import TableRow from "./TableRow";
 
diff --git a/app/javascript/src/components/Profile/Organization/Import/index.tsx b/app/javascript/src/components/Profile/Organization/Import/index.tsx
index 525d932fd9..9a8bfb0f0d 100644
--- a/app/javascript/src/components/Profile/Organization/Import/index.tsx
+++ b/app/javascript/src/components/Profile/Organization/Import/index.tsx
@@ -5,6 +5,7 @@ import Loader from "common/Loader/index";
 
 import ImportCard from "./importCard";
 import ImportModal from "./importModal";
+
 import Header from "../../Header";
 
 const importList = [{
diff --git a/app/javascript/src/components/Profile/Organization/Payment/index.tsx b/app/javascript/src/components/Profile/Organization/Payment/index.tsx
index 8c83fa62a7..d4b5f00f63 100644
--- a/app/javascript/src/components/Profile/Organization/Payment/index.tsx
+++ b/app/javascript/src/components/Profile/Organization/Payment/index.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useEffect } from "react";
 
+import { ApiStatus as PaymentSettingsStatus } from "constants/index";
+
 import paymentSettings from "apis/payment-settings";
 import Loader from "common/Loader/index";
 import { sendGAPageView } from "utils/googleAnalytics";
-import { ApiStatus as PaymentSettingsStatus } from "constants/index";
 
 import Header from "../../Header";
 
diff --git a/app/javascript/src/components/Profile/SubNav.tsx b/app/javascript/src/components/Profile/SubNav.tsx
index 0edda97b05..e4e899eaa4 100644
--- a/app/javascript/src/components/Profile/SubNav.tsx
+++ b/app/javascript/src/components/Profile/SubNav.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React from "react";
+
 import { NavLink } from "react-router-dom";
 
 const profile = require("../../../../assets/images/avatar_payments.svg");
@@ -60,15 +61,6 @@ const SideNav = ({ isAdmin, firstName, company, lastName, email }) => {
           PROFILE SETTINGS
         </NavLink>
       </li>
-      <li className='border-b-2 border-miru-gray-400'>
-        <NavLink
-          to="/profile/edit/bank_account_details"
-          type="li"
-          className={({ isActive }) => getActiveClassName(isActive)}
-        >
-          BANK ACCOUNT DETAILS
-        </NavLink>
-      </li>
     </ul>
   );
 
diff --git a/app/javascript/src/components/Profile/UserDetail/index.tsx b/app/javascript/src/components/Profile/UserDetail/index.tsx
index b92d97d76b..c244b1be1f 100644
--- a/app/javascript/src/components/Profile/UserDetail/index.tsx
+++ b/app/javascript/src/components/Profile/UserDetail/index.tsx
@@ -2,15 +2,17 @@
 
 import React, { useEffect, useState } from "react";
 
+import * as Yup from "yup";
+
 import profileApi from "apis/profile";
 import { Divider } from "common/Divider";
 import Loader from "common/Loader/index";
 import { sendGAPageView } from "utils/googleAnalytics";
-import * as Yup from "yup";
 
 import { useProfile } from "../context/EntryContext";
 import Header from "../Header";
 
+const deleteIcon = require("../../../../../assets/images/delete.svg");
 const editButton = require("../../../../../assets/images/edit_image_button.svg");
 const password_icon = require("../../../../../assets/images/password_icon.svg");
 const password_icon_text = require("../../../../../assets/images/password_icon_text.svg");
@@ -222,7 +224,7 @@ const UserDetails = () => {
                   </input>
                   <button className="" onClick={handleDeleteLogo}>
                     <img
-                      src="/delete.svg"
+                      src={deleteIcon}
                       alt="delete"
                       style={{ "minWidth": "20px" }}
                     />
diff --git a/app/javascript/src/components/Projects/Details/EditMembersList.tsx b/app/javascript/src/components/Projects/Details/EditMembersList.tsx
index e1b0507f21..d82c0ea250 100644
--- a/app/javascript/src/components/Projects/Details/EditMembersList.tsx
+++ b/app/javascript/src/components/Projects/Details/EditMembersList.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
 
+import { X } from "phosphor-react";
+
 import companyUsersApi from "apis/company-users";
 import projectMembersApi from "apis/project-members";
 import Toastr from "common/Toastr";
-import { X } from "phosphor-react";
 
 import EditMembersListForm from "./EditMembersListForm";
 
diff --git a/app/javascript/src/components/Projects/Details/EditMembersListForm.tsx b/app/javascript/src/components/Projects/Details/EditMembersListForm.tsx
index 882e2ee694..db990163c7 100644
--- a/app/javascript/src/components/Projects/Details/EditMembersListForm.tsx
+++ b/app/javascript/src/components/Projects/Details/EditMembersListForm.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import { Trash } from "phosphor-react";
 
 const EditMembersListForm = ({ members, allMemberList, updateMemberState, setMembers, handleSubmit, currencySymbol }) => {
@@ -9,7 +10,7 @@ const EditMembersListForm = ({ members, allMemberList, updateMemberState, setMem
   };
 
   const addNewMemberRowHandler = () => {
-    setMembers(oldMembers => [...oldMembers, {}]);
+    setMembers(oldMembers => [...oldMembers, { hourlyRate: 0, isExisting: false }]);
   };
 
   const getMember = (member, idx) => {
diff --git a/app/javascript/src/components/Projects/Details/index.tsx b/app/javascript/src/components/Projects/Details/index.tsx
index 5488a4e50c..496fbf463e 100644
--- a/app/javascript/src/components/Projects/Details/index.tsx
+++ b/app/javascript/src/components/Projects/Details/index.tsx
@@ -1,26 +1,27 @@
 import React, { useEffect } from "react";
+
+import {
+  ArrowLeft,
+  DotsThreeVertical,
+  Receipt,
+  Pencil,
+  UsersThree,
+  Trash
+} from "phosphor-react";
 import { useParams, useNavigate } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import projectAPI from "apis/projects";
-
 import AmountBoxContainer from "common/AmountBox";
 import ChartBar from "common/ChartBar";
 import Table from "common/Table";
-
 import { cashFormatter } from "helpers/cashFormater";
 import { currencySymbol } from "helpers/currencySymbol";
-import {
-  ArrowLeft,
-  DotsThreeVertical,
-  Receipt,
-  Pencil,
-  UsersThree,
-  Trash
-} from "phosphor-react";
 import { sendGAPageView } from "utils/googleAnalytics";
+
 import EditMembersList from "./EditMembersList";
+
 import { TOASTER_DURATION } from "../../../constants/index";
 import { unmapper } from "../../../mapper/project.mapper";
 import AddEditProject from "../Modals/AddEditProject";
@@ -155,6 +156,10 @@ const ProjectDetails = () => {
 
   const menuBackground = isHeaderMenuVisible ? "bg-miru-gray-1000" : "";
 
+  const backToProjects = () => {
+    navigate("/projects");
+  };
+
   return (
     <>
       <ToastContainer autoClose={TOASTER_DURATION} />
@@ -260,7 +265,7 @@ const ProjectDetails = () => {
               THIS WEEK
             </option>
             <option className="text-miru-dark-purple-600" value="month">
-              This MONTH
+              THIS MONTH
             </option>
             <option className="text-miru-dark-purple-600" value="year">
               THIS YEAR
@@ -307,6 +312,7 @@ const ProjectDetails = () => {
         <DeleteProject
           setShowDeleteDialog={setShowDeleteDialog}
           project={project}
+          fetchProjectList={backToProjects}
         />
       )}
     </>
diff --git a/app/javascript/src/components/Projects/List/Header.tsx b/app/javascript/src/components/Projects/List/Header.tsx
index d2e10c9ada..6c84696628 100644
--- a/app/javascript/src/components/Projects/List/Header.tsx
+++ b/app/javascript/src/components/Projects/List/Header.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
-import projectApi from "apis/projects";
-import AutoComplete from "common/AutoComplete";
+
 import Logger from "js-logger";
 import { Funnel, MagnifyingGlass, Plus } from "phosphor-react";
 
+import projectApi from "apis/projects";
+import AutoComplete from "common/AutoComplete";
+
 const Header = ({ setShowProjectModal, isAdminUser }) => {
 
   const searchCallBack = async (searchString, setDropdownItems) => {
diff --git a/app/javascript/src/components/Projects/List/index.tsx b/app/javascript/src/components/Projects/List/index.tsx
index a345dee22b..22ee3ab46f 100644
--- a/app/javascript/src/components/Projects/List/index.tsx
+++ b/app/javascript/src/components/Projects/List/index.tsx
@@ -1,14 +1,17 @@
 import React from "react";
+
+import { TOASTER_DURATION } from "constants/index";
+
+import Logger from "js-logger";
 import { ToastContainer } from "react-toastify";
 
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import projectApi from "apis/projects";
-import Logger from "js-logger";
 import { sendGAPageView } from "utils/googleAnalytics";
-import { TOASTER_DURATION } from "constants/index";
 
 import Header from "./Header";
 import { Project } from "./project";
+
 import { IProject } from "../interface";
 import AddEditProject from "../Modals/AddEditProject";
 import DeleteProject from "../Modals/DeleteProject";
@@ -103,6 +106,7 @@ export const ProjectList = ({ isAdminUser }) => {
         <DeleteProject
           setShowDeleteDialog={setShowDeleteDialog}
           project={deleteProjectData}
+          fetchProjectList={fetchProjects}
         />
       )}
     </React.Fragment>
diff --git a/app/javascript/src/components/Projects/List/project.tsx b/app/javascript/src/components/Projects/List/project.tsx
index 82e6114752..9c9c14bd4b 100644
--- a/app/javascript/src/components/Projects/List/project.tsx
+++ b/app/javascript/src/components/Projects/List/project.tsx
@@ -1,7 +1,10 @@
 import * as React from "react";
+
+import { Pen, Trash } from "phosphor-react";
 import { useNavigate } from "react-router-dom";
+
 import { minutesToHHMM } from "helpers/hhmm-parser";
-import { Pen, Trash } from "phosphor-react";
+
 import { IProject } from "../interface";
 
 export const Project = ({
@@ -38,7 +41,7 @@ export const Project = ({
       className={`last:border-b-0 ${grayColor}`}
       onMouseLeave={handleMouseLeave}
       onMouseEnter={handleMouseEnter}
-      onClick={() => projectClickHandler(id)}
+      onClick={() => isAdminUser ? projectClickHandler(id) : () => {}} // eslint-disable-line
     >
       <td className="table__cell text-base">
         <div className="flex items-center justify-between">
diff --git a/app/javascript/src/components/Projects/Modals/AddEditProject.tsx b/app/javascript/src/components/Projects/Modals/AddEditProject.tsx
index ddbe024435..3ce30a4044 100644
--- a/app/javascript/src/components/Projects/Modals/AddEditProject.tsx
+++ b/app/javascript/src/components/Projects/Modals/AddEditProject.tsx
@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from "react";
-import projectApi from "apis/projects";
+
 import Logger from "js-logger";
 import { X } from "phosphor-react";
 
+import projectApi from "apis/projects";
+
 const AddEditProject = ({
   setEditProjectData,
   editProjectData,
diff --git a/app/javascript/src/components/Projects/Modals/DeleteProject.tsx b/app/javascript/src/components/Projects/Modals/DeleteProject.tsx
index dcb0fa5a85..84eb219283 100644
--- a/app/javascript/src/components/Projects/Modals/DeleteProject.tsx
+++ b/app/javascript/src/components/Projects/Modals/DeleteProject.tsx
@@ -1,22 +1,20 @@
 import React from "react";
+
 import projectApi from "apis/projects";
 
 interface IProps {
   project: any;
   setShowDeleteDialog: any;
+  fetchProjectList: any;
 }
 
-const DeleteProject = ({ project, setShowDeleteDialog }: IProps) => {
+const DeleteProject = ({ project, setShowDeleteDialog, fetchProjectList }: IProps) => {
   const deleteProject = async project => {
-    projectApi.destroy(project.id)
-      .then(() => {
-        setTimeout(() => {
-          setShowDeleteDialog(false);
-          window.location.assign(window.location.origin+"/projects");
-        }, 500);
-      }).catch(() => {
-        setShowDeleteDialog(true);
-      });
+    const res = await projectApi.destroy(project.id);
+    if (res.status === 200) {
+      setShowDeleteDialog(false);
+    }
+    fetchProjectList();
   };
   return (
     <div className="px-4 flex items-center justify-center">
diff --git a/app/javascript/src/components/Reports/Container/ReportRow.tsx b/app/javascript/src/components/Reports/Container/ReportRow.tsx
index 048d9b0f2b..0c92d04408 100644
--- a/app/javascript/src/components/Reports/Container/ReportRow.tsx
+++ b/app/javascript/src/components/Reports/Container/ReportRow.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { minutesToHHMM } from "helpers/hhmm-parser";
+
 import { ITimeEntry } from "../interface";
 
 const ReportRow = ({
diff --git a/app/javascript/src/components/Reports/Container/index.tsx b/app/javascript/src/components/Reports/Container/index.tsx
index 4f781083cb..0fb16a5134 100644
--- a/app/javascript/src/components/Reports/Container/index.tsx
+++ b/app/javascript/src/components/Reports/Container/index.tsx
@@ -1,5 +1,7 @@
 import React, { Fragment } from "react";
+
 import ReportRow from "./ReportRow";
+
 import { useEntry } from "../context/EntryContext";
 
 const ReportHeader = () => (
diff --git a/app/javascript/src/components/Reports/Filters/filterOptions.ts b/app/javascript/src/components/Reports/Filters/filterOptions.ts
index 8bb689d353..4f74047a1b 100644
--- a/app/javascript/src/components/Reports/Filters/filterOptions.ts
+++ b/app/javascript/src/components/Reports/Filters/filterOptions.ts
@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+
 import { month, getDayWithSuffix } from "../../../utils/dateUtil";
 
 const getWeek = (isCurrentWeek) => {
diff --git a/app/javascript/src/components/Reports/Filters/index.tsx b/app/javascript/src/components/Reports/Filters/index.tsx
index 85339e85dc..894e778b3d 100644
--- a/app/javascript/src/components/Reports/Filters/index.tsx
+++ b/app/javascript/src/components/Reports/Filters/index.tsx
@@ -1,14 +1,18 @@
 import React, { useEffect, useState } from "react";
-import Select from "react-select";
-import CustomDateRangePicker from "common/CustomDateRangePicker";
+
 import { X } from "phosphor-react";
+import Select from "react-select";
 import * as Yup from "yup";
+
+import CustomDateRangePicker from "common/CustomDateRangePicker";
+
 import {
   dateRangeOptions,
   statusOption,
   groupBy
 } from "./filterOptions";
 import { customStyles } from "./style";
+
 import getStatusCssClass from "../../../utils/getStatusTag";
 import { useEntry } from "../context/EntryContext";
 
diff --git a/app/javascript/src/components/Reports/Header/NavigationFilter.tsx b/app/javascript/src/components/Reports/Header/NavigationFilter.tsx
index 83887e0fc1..e090fafb6d 100644
--- a/app/javascript/src/components/Reports/Header/NavigationFilter.tsx
+++ b/app/javascript/src/components/Reports/Header/NavigationFilter.tsx
@@ -1,6 +1,9 @@
 import React, { Fragment } from "react";
+
 import { X } from "phosphor-react";
+
 import { getReports } from "./fetchReport";
+
 import { useEntry } from "../context/EntryContext";
 import { customDateFilter } from "../revenueByClient/Filters/filterOptions";
 
diff --git a/app/javascript/src/components/Reports/Header/index.tsx b/app/javascript/src/components/Reports/Header/index.tsx
index 082e4434f2..4b70a1ff93 100644
--- a/app/javascript/src/components/Reports/Header/index.tsx
+++ b/app/javascript/src/components/Reports/Header/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+
 import {
   CaretDown,
   FileCsv,
@@ -11,8 +11,11 @@ import {
   Share,
   X
 } from "phosphor-react";
+import { Link } from "react-router-dom";
+
 import { getReports } from "./fetchReport";
 import NavigationFilter from "./NavigationFilter";
+
 import { useEntry } from "../context/EntryContext";
 
 const leftArrow = require("../../../../images/back-arrow.svg");
diff --git a/app/javascript/src/components/Reports/api/applyFilter.ts b/app/javascript/src/components/Reports/api/applyFilter.ts
index 118d5a91ea..abdcb1e8b8 100644
--- a/app/javascript/src/components/Reports/api/applyFilter.ts
+++ b/app/javascript/src/components/Reports/api/applyFilter.ts
@@ -1,5 +1,7 @@
-import reports from "apis/reports";
 import dayjs from "dayjs";
+
+import reportsApi from "apis/reports";
+
 import { unmapper } from "../../../mapper/report.mapper";
 import { customDateFilter } from "../revenueByClient/Filters/filterOptions";
 
@@ -38,7 +40,7 @@ const applyFilter = async (selectedFilter, setTimeEntries, setNavFilters, setFil
   const queryParams = getQueryParams(selectedFilter);
   const sanitizedParam = queryParams.substring(1);
   const sanitizedQuery = `?${sanitizedParam}`;
-  const res = await reports.get(sanitizedQuery);
+  const res = await reportsApi.get(sanitizedQuery);
   const sanitizedData = unmapper(res.data);
   setTimeEntries(sanitizedData.reports);
   getFilterOptions(sanitizedData.filterOptions);
diff --git a/app/javascript/src/components/Reports/api/revenueByClient.ts b/app/javascript/src/components/Reports/api/revenueByClient.ts
index 0bb92a0a3e..b9d4ae125c 100644
--- a/app/javascript/src/components/Reports/api/revenueByClient.ts
+++ b/app/javascript/src/components/Reports/api/revenueByClient.ts
@@ -1,7 +1,8 @@
-import clientRevenueApi from "apis/reports/clientRevenue";
 import dayjs from "dayjs";
 import Logger from "js-logger";
 
+import clientRevenueApi from "apis/reports/clientRevenue";
+
 dayjs.Ls.en.weekStart = 1;
 
 const getReportData = async ({
diff --git a/app/javascript/src/components/Reports/context/EntryContext.tsx b/app/javascript/src/components/Reports/context/EntryContext.tsx
index 6a36872e54..099b398d6f 100644
--- a/app/javascript/src/components/Reports/context/EntryContext.tsx
+++ b/app/javascript/src/components/Reports/context/EntryContext.tsx
@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+
 import OutstandingOverdueInvoiceContext from "./outstandingOverdueInvoiceContext";
 import RevenueByClientReportContext from "./RevenueByClientContext";
 import TimeEntryReportContext from "./TimeEntryReportContext";
diff --git a/app/javascript/src/components/Reports/outstandingInvoices/Container/TableRow.tsx b/app/javascript/src/components/Reports/outstandingInvoices/Container/TableRow.tsx
index aff00f26d5..9efea30473 100644
--- a/app/javascript/src/components/Reports/outstandingInvoices/Container/TableRow.tsx
+++ b/app/javascript/src/components/Reports/outstandingInvoices/Container/TableRow.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import dayjs from "dayjs";
+
 import { currencyFormat } from "helpers/currency";
 import getStatusCssClass from "utils/getStatusTag";
 
diff --git a/app/javascript/src/components/Reports/outstandingInvoices/Container/index.tsx b/app/javascript/src/components/Reports/outstandingInvoices/Container/index.tsx
index 83748a7518..492a1f0777 100644
--- a/app/javascript/src/components/Reports/outstandingInvoices/Container/index.tsx
+++ b/app/javascript/src/components/Reports/outstandingInvoices/Container/index.tsx
@@ -1,9 +1,12 @@
 import React, { Fragment } from "react";
+
 import TotalHeader from "common/TotalHeader";
 import { useEntry } from "components/Reports/context/EntryContext";
 import { cashFormatter } from "helpers/cashFormater";
 import { currencySymbol } from "helpers/currencySymbol";
+
 import TableRow from "./TableRow";
+
 import { ClientList } from "../interface";
 
 const TableHeader = () => (
diff --git a/app/javascript/src/components/Reports/outstandingInvoices/Filters/filterOptions.ts b/app/javascript/src/components/Reports/outstandingInvoices/Filters/filterOptions.ts
index 0af4ec039e..affc907305 100644
--- a/app/javascript/src/components/Reports/outstandingInvoices/Filters/filterOptions.ts
+++ b/app/javascript/src/components/Reports/outstandingInvoices/Filters/filterOptions.ts
@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires  */
 import dayjs from "dayjs";
+
 import { month, quarters } from "../../../../utils/dateUtil";
+
 const quarterOfYear = require("dayjs/plugin/quarterOfYear");
 dayjs.extend(quarterOfYear);
 
diff --git a/app/javascript/src/components/Reports/outstandingInvoices/Filters/index.tsx b/app/javascript/src/components/Reports/outstandingInvoices/Filters/index.tsx
index 84513fe3c0..0c1823020f 100644
--- a/app/javascript/src/components/Reports/outstandingInvoices/Filters/index.tsx
+++ b/app/javascript/src/components/Reports/outstandingInvoices/Filters/index.tsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react";
-import Select from "react-select";
-import CustomDateRangePicker from "common/CustomDateRangePicker";
+
 import { X } from "phosphor-react";
+import Select from "react-select";
 import * as Yup from "yup";
+
+import CustomDateRangePicker from "common/CustomDateRangePicker";
+
 import {
   dateRangeOptions
 } from "./filterOptions";
 import { customStyles } from "./style";
+
 import { useEntry } from "../../context/EntryContext";
 
 const dateSchema = Yup.object().shape({
diff --git a/app/javascript/src/components/Reports/outstandingInvoices/index.tsx b/app/javascript/src/components/Reports/outstandingInvoices/index.tsx
index c7e584d80a..82cb287130 100644
--- a/app/javascript/src/components/Reports/outstandingInvoices/index.tsx
+++ b/app/javascript/src/components/Reports/outstandingInvoices/index.tsx
@@ -2,9 +2,11 @@
 import React, { useState, useEffect } from "react";
 
 import { sendGAPageView } from "utils/googleAnalytics";
+
 import Container from "./Container";
 import Filters from "./Filters";
 import { OutstandingOverdueInvoice } from "./interface";
+
 import getReportData from "../api/outstandingOverdueInvoice";
 import EntryContext from "../context/EntryContext";
 import RevenueByClientReportContext from "../context/RevenueByClientContext";
@@ -123,7 +125,7 @@ const OutstandingInvoiceReport = () => {
           isFilterVisible={isFilterVisible}
           resetFilter={resetFilter}
           handleDownload={handleDownload}
-          type={"Outstanding and Overdue Invoices"}
+          type={"Invoices Report"}
         />
         <Container />
         {false && <Filters
diff --git a/app/javascript/src/components/Reports/reportList/index.tsx b/app/javascript/src/components/Reports/reportList/index.tsx
index e4d3d0ffec..11f285733b 100644
--- a/app/javascript/src/components/Reports/reportList/index.tsx
+++ b/app/javascript/src/components/Reports/reportList/index.tsx
@@ -2,6 +2,7 @@
 import React from "react";
 
 import ReportCard from "./reportCard";
+
 const calendar = require("../../../../images/Calendar.svg"); // eslint-disable-line
 const hours = require("../../../../images/Hours.svg");
 const overdueOutstandingIcon = require("../../../../images/OverdueOutstanding.svg");
@@ -9,13 +10,13 @@ const revenue = require("../../../../images/Revenue.svg");
 
 const listDetails = [{
   icon: calendar,
-  title: "Time entry report",
+  title: "Time Entry Report",
   description: "A summary of the time entries added by your team.",
   url: "time-entry",
   show: true
 }, {
   icon: overdueOutstandingIcon,
-  title: "Outstanding & overdue invoices",
+  title: "Invoices Report",
   description: "A detailed summary of outstanding and overdue of all clients for a period of time.",
   url: "outstanding-overdue-invoice",
   show: true
@@ -27,7 +28,7 @@ const listDetails = [{
   show: false
 }, {
   icon: revenue,
-  title: "Revenue by client",
+  title: "Revenue Report",
   description: "A detailed report of revenue from each client.",
   url: "revenue-by-client",
   show: true
diff --git a/app/javascript/src/components/Reports/reportList/reportCard.tsx b/app/javascript/src/components/Reports/reportList/reportCard.tsx
index 5ce004cd29..0a624feeb6 100644
--- a/app/javascript/src/components/Reports/reportList/reportCard.tsx
+++ b/app/javascript/src/components/Reports/reportList/reportCard.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { NavLink } from "react-router-dom";
 
 const ReportCard = ({
diff --git a/app/javascript/src/components/Reports/revenueByClient/Container/TableRow.tsx b/app/javascript/src/components/Reports/revenueByClient/Container/TableRow.tsx
index 75e65e917e..464049d9a2 100644
--- a/app/javascript/src/components/Reports/revenueByClient/Container/TableRow.tsx
+++ b/app/javascript/src/components/Reports/revenueByClient/Container/TableRow.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { currencyFormat } from "helpers/currency";
+
 import { RevenueByClients } from "../interface";
 
 const TableRow = ({
diff --git a/app/javascript/src/components/Reports/revenueByClient/Container/index.tsx b/app/javascript/src/components/Reports/revenueByClient/Container/index.tsx
index f4f4a2a6c7..396f794069 100644
--- a/app/javascript/src/components/Reports/revenueByClient/Container/index.tsx
+++ b/app/javascript/src/components/Reports/revenueByClient/Container/index.tsx
@@ -1,8 +1,10 @@
 import React, { Fragment } from "react";
+
 import TotalHeader from "common/TotalHeader";
 import { useEntry } from "components/Reports/context/EntryContext";
 import { cashFormatter } from "helpers/cashFormater"; // TODO: Formatter
 import { currencySymbol } from "helpers/currencySymbol";
+
 import TableRow from "./TableRow";
 
 const TableHeader = () => (
diff --git a/app/javascript/src/components/Reports/revenueByClient/Filters/filterOptions.ts b/app/javascript/src/components/Reports/revenueByClient/Filters/filterOptions.ts
index 73872ec0f2..ba9bff022c 100644
--- a/app/javascript/src/components/Reports/revenueByClient/Filters/filterOptions.ts
+++ b/app/javascript/src/components/Reports/revenueByClient/Filters/filterOptions.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires  */
 import dayjs from "dayjs";
+
 import { month, quarters } from "../../../../utils/dateUtil";
 
 const quarterOfYear = require("dayjs/plugin/quarterOfYear");
diff --git a/app/javascript/src/components/Reports/revenueByClient/Filters/index.tsx b/app/javascript/src/components/Reports/revenueByClient/Filters/index.tsx
index 51f89515ec..d91bbd6f64 100644
--- a/app/javascript/src/components/Reports/revenueByClient/Filters/index.tsx
+++ b/app/javascript/src/components/Reports/revenueByClient/Filters/index.tsx
@@ -1,14 +1,18 @@
 import React, { useEffect, useState } from "react";
-import Select from "react-select";
-import clients from "apis/clients";
-import CustomDateRangePicker from "common/CustomDateRangePicker";
+
 import Logger from "js-logger";
 import { X } from "phosphor-react";
+import Select from "react-select";
 import * as Yup from "yup";
+
+import clientApi from "apis/clients";
+import CustomDateRangePicker from "common/CustomDateRangePicker";
+
 import {
   dateRangeOptions
 } from "./filterOptions";
 import { customStyles } from "./style";
+
 import { useEntry } from "../../context/EntryContext";
 
 const dateSchema = Yup.object().shape({
@@ -40,7 +44,7 @@ const FilterSideBar = ({
 
   const fetchAndSetClients = async () => {
     try {
-      const { data } = await clients.get("");
+      const { data } = await clientApi.get("");
       setClientList(
         data.client_details.map(client => ({ value: client.id, label: client.name }))
       );
diff --git a/app/javascript/src/components/Reports/revenueByClient/index.tsx b/app/javascript/src/components/Reports/revenueByClient/index.tsx
index 2fce79f25f..dd22976a7e 100644
--- a/app/javascript/src/components/Reports/revenueByClient/index.tsx
+++ b/app/javascript/src/components/Reports/revenueByClient/index.tsx
@@ -2,12 +2,13 @@
 import React, { useState, useEffect } from "react";
 
 import { sendGAPageView } from "utils/googleAnalytics";
+
 import Container from "./Container";
 import Filters from "./Filters";
 import { RevenueByClients } from "./interface";
+
 import getReportData from "../api/revenueByClient";
 import EntryContext from "../context/EntryContext";
-
 import OutstandingOverdueInvoiceContext from "../context/outstandingOverdueInvoiceContext";
 import TimeEntryReportContext from "../context/TimeEntryReportContext";
 import Header from "../Header";
@@ -126,7 +127,7 @@ const RevenueByClientReport = () => {
           isFilterVisible={isFilterVisible}
           resetFilter={resetFilter}
           handleDownload={handleDownload}
-          type={"Revenue By Client"}
+          type={"Revenue Report"}
         />
         <Container />
         {isFilterVisible && <Filters
diff --git a/app/javascript/src/components/Reports/timeEntry/index.tsx b/app/javascript/src/components/Reports/timeEntry/index.tsx
index 393e11af4d..1248551f29 100644
--- a/app/javascript/src/components/Reports/timeEntry/index.tsx
+++ b/app/javascript/src/components/Reports/timeEntry/index.tsx
@@ -1,17 +1,16 @@
 import React, { useState, useEffect } from "react";
 
-import reports from "apis/reports";
+import reportsApi from "apis/reports";
 import { sendGAPageView } from "utils/googleAnalytics";
+
 import applyFilter, { getQueryParams } from "../api/applyFilter";
 import Container from "../Container";
 import EntryContext from "../context/EntryContext";
-
 import OutstandingOverdueInvoiceContext from "../context/outstandingOverdueInvoiceContext";
 import RevenueByClientReportContext from "../context/RevenueByClientContext";
 import Filters from "../Filters";
 import { getMonth } from "../Filters/filterOptions";
 import Header from "../Header";
-
 import { ITimeEntry } from "../interface";
 
 const TimeEntryReports = () => {
@@ -92,7 +91,7 @@ const TimeEntryReports = () => {
 
   const handleDownload = async (type) => {
     const queryParams = getQueryParams(selectedFilter).substring(1);
-    const response = await reports.download(type, `?${queryParams}`);
+    const response = await reportsApi.download(type, `?${queryParams}`);
     const url = window.URL.createObjectURL(new Blob([response.data]));
     const link = document.createElement("a");
     const date = new Date();
@@ -132,7 +131,7 @@ const TimeEntryReports = () => {
           isFilterVisible={isFilterVisible}
           resetFilter={resetFilter}
           handleDownload={handleDownload}
-          type={"Time entry report"}
+          type={"Time Entry Report"}
         />
         <Container />
         {isFilterVisible && <Filters
diff --git a/app/javascript/src/components/Reports/totalHoursLogged/index.tsx b/app/javascript/src/components/Reports/totalHoursLogged/index.tsx
index db25b5298f..92b8b94aac 100644
--- a/app/javascript/src/components/Reports/totalHoursLogged/index.tsx
+++ b/app/javascript/src/components/Reports/totalHoursLogged/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import Header from "../Header";
 
 const TotalHoursReport = () => (
diff --git a/app/javascript/src/components/Team/Details/CompensationDetails/index.tsx b/app/javascript/src/components/Team/Details/CompensationDetails/index.tsx
index 5682bb4675..40017b7994 100644
--- a/app/javascript/src/components/Team/Details/CompensationDetails/index.tsx
+++ b/app/javascript/src/components/Team/Details/CompensationDetails/index.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from "react";
+
 import StaticPage from "./StaticPage";
 
 const CompensationDetails = () => (
diff --git a/app/javascript/src/components/Team/Details/DeviceDetails/index.tsx b/app/javascript/src/components/Team/Details/DeviceDetails/index.tsx
index 720815fd26..70fc6f23bd 100644
--- a/app/javascript/src/components/Team/Details/DeviceDetails/index.tsx
+++ b/app/javascript/src/components/Team/Details/DeviceDetails/index.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from "react";
+
 import StaticPage from "./StaticPage";
 
 const DeviceDetails = () => (
diff --git a/app/javascript/src/components/Team/Details/EmploymentDetails/index.tsx b/app/javascript/src/components/Team/Details/EmploymentDetails/index.tsx
index 3e513b345d..d10495ba46 100644
--- a/app/javascript/src/components/Team/Details/EmploymentDetails/index.tsx
+++ b/app/javascript/src/components/Team/Details/EmploymentDetails/index.tsx
@@ -1,5 +1,7 @@
 import React, { Fragment, useEffect } from "react";
+
 import { useTeamDetails } from "context/TeamDetailsContext";
+
 import StaticPage from "./StaticPage";
 
 const EmploymentDetails = () => {
diff --git a/app/javascript/src/components/Team/Details/Layout/Header.tsx b/app/javascript/src/components/Team/Details/Layout/Header.tsx
index dbd2ac7790..154e6e140c 100644
--- a/app/javascript/src/components/Team/Details/Layout/Header.tsx
+++ b/app/javascript/src/components/Team/Details/Layout/Header.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+
 import { ArrowLeft } from "phosphor-react";
+import { useNavigate } from "react-router-dom";
 
 const Header = () => {
   const navigate = useNavigate();
diff --git a/app/javascript/src/components/Team/Details/Layout/OutletWrapper.tsx b/app/javascript/src/components/Team/Details/Layout/OutletWrapper.tsx
index d53c798e84..ae2f03ac87 100644
--- a/app/javascript/src/components/Team/Details/Layout/OutletWrapper.tsx
+++ b/app/javascript/src/components/Team/Details/Layout/OutletWrapper.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Outlet } from "react-router-dom";
 
 const OutletWrapper = () => (
diff --git a/app/javascript/src/components/Team/Details/Layout/SideNav.tsx b/app/javascript/src/components/Team/Details/Layout/SideNav.tsx
index c932b794dc..ab0facb2da 100644
--- a/app/javascript/src/components/Team/Details/Layout/SideNav.tsx
+++ b/app/javascript/src/components/Team/Details/Layout/SideNav.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import { NavLink, useParams } from "react-router-dom";
+
 const userAvatar = require("../../../../../../assets/images/user_avatar.svg"); //eslint-disable-line
 
 const getActiveClassName = (isActive) => {
diff --git a/app/javascript/src/components/Team/Details/PersonalDetails/index.tsx b/app/javascript/src/components/Team/Details/PersonalDetails/index.tsx
index b7a4b3993f..780998a20c 100644
--- a/app/javascript/src/components/Team/Details/PersonalDetails/index.tsx
+++ b/app/javascript/src/components/Team/Details/PersonalDetails/index.tsx
@@ -1,6 +1,8 @@
 import React, { Fragment } from "react";
 import { useEffect } from "react";
+
 import { useTeamDetails } from "context/TeamDetailsContext";
+
 import StaticPage from "./StaticPage";
 
 const PersonalDetails = () => {
diff --git a/app/javascript/src/components/Team/Details/ReimburstmentDetails/StaticPage.tsx b/app/javascript/src/components/Team/Details/ReimburstmentDetails/StaticPage.tsx
index 8c89c1ade2..6eacf93ccc 100644
--- a/app/javascript/src/components/Team/Details/ReimburstmentDetails/StaticPage.tsx
+++ b/app/javascript/src/components/Team/Details/ReimburstmentDetails/StaticPage.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Pen, Trash } from "phosphor-react";
 
 const StaticPage = () => (
diff --git a/app/javascript/src/components/Team/Details/ReimburstmentDetails/index.tsx b/app/javascript/src/components/Team/Details/ReimburstmentDetails/index.tsx
index 4f4be112fe..e469800ec4 100644
--- a/app/javascript/src/components/Team/Details/ReimburstmentDetails/index.tsx
+++ b/app/javascript/src/components/Team/Details/ReimburstmentDetails/index.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from "react";
+
 import StaticPage from "./StaticPage";
 
 const ReimburstmentDetails = () => (
diff --git a/app/javascript/src/components/Team/Details/index.tsx b/app/javascript/src/components/Team/Details/index.tsx
index 4b96f53fa5..c7a3dde674 100644
--- a/app/javascript/src/components/Team/Details/index.tsx
+++ b/app/javascript/src/components/Team/Details/index.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
+
 import { TeamDetailsContext } from "context/TeamDetailsContext";
+
 import Header from "./Layout/Header";
 import OutletWrapper from "./Layout/OutletWrapper";
 import SideNav from "./Layout/SideNav";
diff --git a/app/javascript/src/components/Team/List/Header.tsx b/app/javascript/src/components/Team/List/Header.tsx
index 2abde655ae..ab9de31201 100644
--- a/app/javascript/src/components/Team/List/Header.tsx
+++ b/app/javascript/src/components/Team/List/Header.tsx
@@ -1,12 +1,15 @@
 import React from "react";
-import { search } from "apis/team";
-import AutoComplete from "common/AutoComplete";
-import { useList } from "context/TeamContext";
-import { useUserContext } from "context/UserContext";
+
+import { TeamModalType } from "constants/index";
+
 import Logger from "js-logger";
 import { unmapList } from "mapper/team.mapper";
 import { MagnifyingGlass, Plus } from "phosphor-react";
-import { TeamModalType } from "constants/index";
+
+import teamApi from "apis/team";
+import AutoComplete from "common/AutoComplete";
+import { useList } from "context/TeamContext";
+import { useUserContext } from "context/UserContext";
 
 const Header = () => {
   const { isAdminUser } = useUserContext();
@@ -15,7 +18,7 @@ const Header = () => {
   const searchCallBack = async (searchString, setDropdownItems) => {
     try {
       if (!searchString) return;
-      const res = await search(searchString);
+      const res = await teamApi.search(searchString);
       const dropdownList = unmapList(res);
       const searchList = dropdownList.map(item => ({
         label: item.name,
@@ -29,8 +32,8 @@ const Header = () => {
 
   return (
     <div className="sm:flex mt-6 mb-3 sm:items-center sm:justify-between">
-      <h2 className="header__title">Team</h2>
-      <div className="header__searchWrap">
+      <h2 className="header__title ml-4">Team</h2>
+      <div className="header__searchWrap mx-auto">
         <div className="header__searchInnerWrapper">
           <AutoComplete searchCallBack={searchCallBack} />
           <button className="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer">
diff --git a/app/javascript/src/components/Team/List/Table/TableHead.tsx b/app/javascript/src/components/Team/List/Table/TableHead.tsx
index feebe1c452..f4cd4036aa 100644
--- a/app/javascript/src/components/Team/List/Table/TableHead.tsx
+++ b/app/javascript/src/components/Team/List/Table/TableHead.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from "react";
+
 import { useUserContext } from "context/UserContext";
 
 const TableHead = () => {
@@ -6,9 +7,6 @@ const TableHead = () => {
   return (
     <thead  className=" border-miru-gray-200" data-cy="team-table-header">
       <tr>
-        <th scope="col" className="table__header p-6">
-          PHOTO
-        </th>
         <th scope="col" className="table__header p-6">
           NAME
         </th>
diff --git a/app/javascript/src/components/Team/List/Table/TableRow.tsx b/app/javascript/src/components/Team/List/Table/TableRow.tsx
index 00a4b7b9de..1af086720f 100644
--- a/app/javascript/src/components/Team/List/Table/TableRow.tsx
+++ b/app/javascript/src/components/Team/List/Table/TableRow.tsx
@@ -1,9 +1,12 @@
 import React, { Fragment } from "react";
+
+import { TeamModalType } from "constants/index";
+
+import { PencilSimple, Trash } from "phosphor-react";
 import { useNavigate } from "react-router-dom";
+
 import { useList } from "context/TeamContext";
 import { useUserContext } from "context/UserContext";
-import { PencilSimple, Trash } from "phosphor-react";
-import { TeamModalType } from "constants/index";
 
 const TableRow = ({ item }) => {
   const { isAdminUser } = useUserContext();
@@ -22,16 +25,13 @@ const TableRow = ({ item }) => {
     <tr data-cy="team-table-row" className="border-b last:border-0 border-miru-gray-200 hoverIcon" onClick={() => {
       navigate("1");
     }}>
-      <td className="table__data p-6">
-        <img src={item.profilePicture} className="table__avatar" />
-      </td>
-      <td className="table__data p-6">
+      <td className="table__data p-6 capitalize">
         {item.name}
       </td>
       <td className="table__data table__text p-6">
         {item.email}
       </td>
-      <td className="table__data table__text p-6">
+      <td className="table__data table__text p-6 capitalize">
         {item.role}
       </td>
       {isAdminUser &&
diff --git a/app/javascript/src/components/Team/List/Table/index.tsx b/app/javascript/src/components/Team/List/Table/index.tsx
index 3c0b5e0753..4dac317cb4 100644
--- a/app/javascript/src/components/Team/List/Table/index.tsx
+++ b/app/javascript/src/components/Team/List/Table/index.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import { useList } from "context/TeamContext";
+
 import TableHead from "./TableHead";
 import TableRow from "./TableRow";
 
diff --git a/app/javascript/src/components/Team/List/index.tsx b/app/javascript/src/components/Team/List/index.tsx
index f81996ca8b..312eab55f0 100644
--- a/app/javascript/src/components/Team/List/index.tsx
+++ b/app/javascript/src/components/Team/List/index.tsx
@@ -1,11 +1,16 @@
 import React, { Fragment, useEffect, useState } from "react";
+
+import { TeamModalType, TOASTER_DURATION } from "constants/index";
+
+import { unmapList } from "mapper/team.mapper";
 import { ToastContainer } from "react-toastify";
-import { get } from "apis/team";
+
+import teamApi from "apis/team";
 import { ListContext } from "context/TeamContext";
-import { unmapList } from "mapper/team.mapper";
-import { TeamModalType, TOASTER_DURATION } from "constants/index";
+
 import Header from "./Header";
 import Table from "./Table";
+
 import Modals from "../modals/Modals";
 
 export const ProjectList = () => {
@@ -20,7 +25,7 @@ export const ProjectList = () => {
   };
 
   const getTeamList = async () => {
-    const response = await get();
+    const response = await teamApi.get();
     if (response.status === 200) {
       const sanitized = unmapList(response);
       setTeamList(sanitized);
diff --git a/app/javascript/src/components/Team/RouteConfig.tsx b/app/javascript/src/components/Team/RouteConfig.tsx
index 2d00e93221..0f91497f2b 100644
--- a/app/javascript/src/components/Team/RouteConfig.tsx
+++ b/app/javascript/src/components/Team/RouteConfig.tsx
@@ -1,8 +1,10 @@
 import React from "react";
+
 import {
   Route,
   Routes
 } from "react-router-dom";
+
 // import Details from "./Details";
 // import CompensationDetails from "./Details/CompensationDetails";
 // import DeviceDetails from "./Details/DeviceDetails";
diff --git a/app/javascript/src/components/Team/modals/AddEditMember.tsx b/app/javascript/src/components/Team/modals/AddEditMember.tsx
index 5f781fa51c..c0b9a9c3fe 100644
--- a/app/javascript/src/components/Team/modals/AddEditMember.tsx
+++ b/app/javascript/src/components/Team/modals/AddEditMember.tsx
@@ -1,10 +1,13 @@
 import React, { useState } from "react";
-import { updateInvitedMember, inviteMember, updateTeamMember } from "apis/team";
-import { useList } from "context/TeamContext";
+
+import { TeamModalType } from "constants/index";
+
 import { Formik, Form, Field, FormikProps } from "formik";
 import { X } from "phosphor-react";
 import * as Yup from "yup";
-import { TeamModalType } from "constants/index";
+
+import teamApi from "apis/team";
+import { useList } from "context/TeamContext";
 
 const TeamMemberSchema = Yup.object().shape({
   firstName: Yup.string().required("First Name cannot be blank"),
@@ -53,12 +56,12 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
     try {
       if (isEdit) {
         if (user.isTeamMember) {
-          await updateTeamMember(user.id, payload);
+          await teamApi.updateTeamMember(user.id, payload);
         } else {
-          await updateInvitedMember(user.id, payload);
+          await teamApi.updateInvitedMember(user.id, payload);
         }
       } else {
-        await inviteMember(payload);
+        await teamApi.inviteMember(payload);
       }
       setModalState("");
     } catch (err) {
@@ -78,7 +81,11 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
           <div className="rounded-lg px-6 pb-6 bg-white shadow-xl transform transition-all sm:align-middle sm:max-w-md modal-width">
             <div className="flex justify-between items-center mt-6">
               <h6 className="text-base font-extrabold">
-                {isEdit ? user.isTeamMember ? "Edit Member" : "Edit Invitation" : "Add Member"}
+                {isEdit
+                  ? user.isTeamMember
+                    ? "Edit User Details"
+                    : "Edit Invitation"
+                  : "Create New User"}
               </h6>
               <button
                 type="button"
@@ -95,21 +102,14 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
               onSubmit={handleSubmit}
             >
               {(props: FormikProps<FormValues>) => {
-                const { touched, errors } = props;
+                const { touched, errors, isValid, dirty } = props;
                 return (
                   <Form>
                     <div className="mt-4">
                       <div className="field">
                         <div className="field_with_errors">
                           <label className="form__label">Name</label>
-                          <div className="tracking-wider block text-xs text-red-600 flex">
-                            {errors.firstName && touched.firstName && (
-                              <div>{errors.firstName}</div>
-                            )}
-                            {errors.lastName && touched.lastName && (
-                              <div className="ml-2">{errors.lastName}</div>
-                            )}
-                          </div>
+
                         </div>
                         <div className="flex">
                           <div className="mt-1">
@@ -121,7 +121,13 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
                               } `}
                               data-cy="new-member-firstName"
                               name="firstName"
+                              placeholder="First Name"
                             />
+                            <div className="tracking-wider block text-xs text-red-600 flex">
+                              {errors.firstName && touched.firstName && (
+                                <div>{errors.firstName}</div>
+                              )}
+                            </div>
                           </div>
                           <div className="mt-1 ml-8">
                             <Field
@@ -132,7 +138,14 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
                               } `}
                               data-cy="new-member-lastName"
                               name="lastName"
+                              placeholder="Last Name"
+
                             />
+                            <div className="tracking-wider block text-xs text-red-600 flex">
+                              {errors.lastName && touched.lastName && (
+                                <div className="ml-2">{errors.lastName}</div>
+                              )}
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -141,11 +154,6 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
                       <div className="field">
                         <div className="field_with_errors">
                           <label className="form__label">Email</label>
-                          <div className="tracking-wider block text-xs text-red-600">
-                            {errors.email && touched.email && (
-                              <div>{errors.email}</div>
-                            )}
-                          </div>
                         </div>
                         <div className="mt-1">
                           <Field
@@ -157,7 +165,13 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
                             name="email"
                             disabled={isEdit}
                             data-cy="new-member-email"
+                            placeholder="Enter email ID"
                           />
+                          <div className="tracking-wider block text-xs text-red-600">
+                            {errors.email && touched.email && (
+                              <div>{errors.email}</div>
+                            )}
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -226,13 +240,19 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
                       {apiError}
                     </p>
                     <div className="actions mt-4">
-                      <input
+                      <button
                         type="submit"
                         name="commit"
-                        value={isEdit ? "SAVE CHANGES": "SEND INVITATION"}
-                        className="form__input_submit"
                         data-cy="send-invite-button"
-                      />
+                        disabled={!(dirty && isValid)}
+                        className={
+                          !isValid || !dirty
+                            ? "tracking-widest h-10 w-full flex justify-center py-1 px-4 border border-transparent shadow-sm text-base font-sans font-medium text-miru-white-1000 bg-miru-gray-1000 focus:outline-none rounded"
+                            : "form__input_submit"
+                        }
+                      >
+                        {isEdit ? "SAVE CHANGES" : "SEND INVITE"}
+                      </button>
                     </div>
                   </Form>
                 );
diff --git a/app/javascript/src/components/Team/modals/DeleteMember.tsx b/app/javascript/src/components/Team/modals/DeleteMember.tsx
index a4b8e5b65f..6ac8a87817 100644
--- a/app/javascript/src/components/Team/modals/DeleteMember.tsx
+++ b/app/javascript/src/components/Team/modals/DeleteMember.tsx
@@ -1,19 +1,23 @@
 
 import React from "react";
-import { destroyTeamMember, deleteInvitedMember } from "apis/team";
+
+import { TeamModalType } from "constants/index";
+
+import { X } from "phosphor-react";
+
+import teamApi from "apis/team";
 import Toastr from "common/Toastr";
 import { useList } from "context/TeamContext";
-import { X } from "phosphor-react";
-import { TeamModalType } from "constants/index";
 
 const DeleteMember = ({ user }) => {
   const { setModalState } = useList();
+
   const deleteTeamMember = async () => {
     try {
       if (user.isTeamMember) {
-        await destroyTeamMember(user.id);
+        await teamApi.destroyTeamMember(user.id);
       } else {
-        await deleteInvitedMember(user.id);
+        await teamApi.deleteInvitedMember(user.id);
       }
       setModalState(TeamModalType.NONE);
     } catch (error) {
@@ -38,7 +42,7 @@ const DeleteMember = ({ user }) => {
               </button>
             </div>
             <p className="my-8">
-              Are you sure you want to delete user {user?.name}? This action cannot be reversed.
+              Are you sure you want to delete user <b> {user?.name}</b>? This action cannot be reversed.
             </p>
             <div className="flex justify-between">
               <button
diff --git a/app/javascript/src/components/Team/modals/Modals.tsx b/app/javascript/src/components/Team/modals/Modals.tsx
index e2d798b7f7..63bc41e3c0 100644
--- a/app/javascript/src/components/Team/modals/Modals.tsx
+++ b/app/javascript/src/components/Team/modals/Modals.tsx
@@ -1,6 +1,8 @@
 
 import React from "react";
+
 import { useList } from "context/TeamContext";
+
 import AddEditMember from "./AddEditMember";
 import DeleteMember from "./DeleteMember";
 
diff --git a/app/javascript/src/components/payments/Header.tsx b/app/javascript/src/components/payments/Header.tsx
index 1b16af8db2..44bf2ff91f 100644
--- a/app/javascript/src/components/payments/Header.tsx
+++ b/app/javascript/src/components/payments/Header.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { MagnifyingGlass, Plus } from "phosphor-react";
 
 const Header = ( { setShowManualEntryModal } ) => (
diff --git a/app/javascript/src/components/payments/Modals/AddManualEntry.tsx b/app/javascript/src/components/payments/Modals/AddManualEntry.tsx
index 2affb5b0f8..8d9a983f56 100644
--- a/app/javascript/src/components/payments/Modals/AddManualEntry.tsx
+++ b/app/javascript/src/components/payments/Modals/AddManualEntry.tsx
@@ -1,13 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState } from "react";
+
+import dayjs from "dayjs";
+import { X, Calendar } from "phosphor-react";
+import { MagnifyingGlass } from "phosphor-react";
 import Select, { DropdownIndicatorProps, components } from "react-select";
+
 import payment from "apis/payments/payments";
 import CustomDatePicker from "common/CustomDatePicker";
 import Toastr from "common/Toastr";
-import dayjs from "dayjs";
 
-import { X, Calendar } from "phosphor-react";
-import { MagnifyingGlass } from "phosphor-react";
 import { mapPayment } from "../../../mapper/payment.mapper";
 
 const AddManualEntry = ({ setShowManualEntryModal, invoiceList, fetchPaymentList, fetchInvoiceList }) => {
diff --git a/app/javascript/src/components/payments/Table/TableRow.tsx b/app/javascript/src/components/payments/Table/TableRow.tsx
index 2bbbfe674e..155c5b44f0 100644
--- a/app/javascript/src/components/payments/Table/TableRow.tsx
+++ b/app/javascript/src/components/payments/Table/TableRow.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { currencyFormat } from "helpers/currency";
 
 const TableRow = ({ payment, baseCurrency }) => {
diff --git a/app/javascript/src/components/payments/index.tsx b/app/javascript/src/components/payments/index.tsx
index 98840d3135..186319aa15 100644
--- a/app/javascript/src/components/payments/index.tsx
+++ b/app/javascript/src/components/payments/index.tsx
@@ -1,11 +1,14 @@
 import React, { useState } from "react";
 
+import Logger from "js-logger";
+
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import payment from "apis/payments/payments";
-import Logger from "js-logger";
+
 import Header from "./Header";
 import AddManualEntry from "./Modals/AddManualEntry";
 import Table from "./Table/index";
+
 import { unmapPayment } from "../../mapper/payment.mapper";
 
 const Payments = () => {
diff --git a/app/javascript/src/components/time-tracking/AddEntry.tsx b/app/javascript/src/components/time-tracking/AddEntry.tsx
index c56aadd09c..0e37d23aa6 100644
--- a/app/javascript/src/components/time-tracking/AddEntry.tsx
+++ b/app/javascript/src/components/time-tracking/AddEntry.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React from "react";
-import timesheetEntryApi from "apis/timesheet-entry";
+
 import autosize from "autosize";
 
+import timesheetEntryApi from "apis/timesheet-entry";
 import Toastr from "common/Toastr";
 import { minutesFromHHMM, minutesToHHMM } from "helpers/hhmm-parser";
 import { getNumberWithOrdinal } from "helpers/ordinal";
diff --git a/app/javascript/src/components/time-tracking/DatesInWeek.tsx b/app/javascript/src/components/time-tracking/DatesInWeek.tsx
index 5e85d80e33..aa79fa5ca5 100644
--- a/app/javascript/src/components/time-tracking/DatesInWeek.tsx
+++ b/app/javascript/src/components/time-tracking/DatesInWeek.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import { getNumberWithOrdinal } from "helpers/ordinal";
 
 const WeeklyEntries: React.FC<Iprops> = ({
diff --git a/app/javascript/src/components/time-tracking/EntryCard.tsx b/app/javascript/src/components/time-tracking/EntryCard.tsx
index e926581323..ae34096db7 100644
--- a/app/javascript/src/components/time-tracking/EntryCard.tsx
+++ b/app/javascript/src/components/time-tracking/EntryCard.tsx
@@ -1,9 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import React from "react";
 
 import { minutesToHHMM } from "helpers/hhmm-parser";
 
 import BillTag from "./BillTag";
 
+const deleteIcon = require("../../../../assets/images/delete.svg");
+const editIcon = require("../../../../assets/images/edit.svg");
+
 interface props {
   id: number;
   client: string;
@@ -32,7 +36,7 @@ const EntryCard: React.FC<props> = ({
         <p className="text-lg mx-2">•</p>
         <p className="text-lg">{project}</p>
       </div>
-      <p className="max-h-32 overflow-auto text-sm text-miru-dark-purple-400 break-words whitespace-pre-wrap">
+      <p className="max-h-32 w-160 overflow-auto text-sm text-miru-dark-purple-400 break-words whitespace-pre-wrap">
         {note}
       </p>
     </div>
@@ -47,16 +51,16 @@ const EntryCard: React.FC<props> = ({
       <p className="text-4xl">{minutesToHHMM(duration)}</p>
       <button onClick={() => setEditEntryId(id)} className="mx-10">
         <img
-          src="/edit.svg"
+          src={editIcon}
           alt="edit"
-          className="icon-hover text-miru-han-purple-600 hover:text-miru-han-purple-1000"
+          className="icon-hover text-miru-han-purple-600 hover:text-miru-han-purple-1000 w-4 h-4"
         />
       </button>
       <button onClick={() => handleDeleteEntry(id)} className="mr-10">
         <img
-          src="/delete.svg"
+          src={deleteIcon}
           alt="delete"
-          className="icon-hover fill-blue text-miru-han-purple-1000 hover:text-miru-han-purple-1000"
+          className="icon-hover fill-blue text-miru-han-purple-1000 hover:text-miru-han-purple-1000 w-4 h-4"
         />
       </button>
     </div>
diff --git a/app/javascript/src/components/time-tracking/Index.tsx b/app/javascript/src/components/time-tracking/Index.tsx
index 1152d2f1bc..c104b716eb 100644
--- a/app/javascript/src/components/time-tracking/Index.tsx
+++ b/app/javascript/src/components/time-tracking/Index.tsx
@@ -1,17 +1,20 @@
 /* eslint-disable no-unexpected-multiline */
 import React  from "react";
+
+import { TOASTER_DURATION } from "constants/index";
+
+import * as dayjs from "dayjs";
+import * as updateLocale from "dayjs/plugin/updateLocale";
+import * as weekday from "dayjs/plugin/weekday";
+import Logger from "js-logger";
 import { ToastContainer } from "react-toastify";
 
 import timesheetEntryApi from "apis/timesheet-entry";
 import timeTrackingApi from "apis/timeTracking";
 import SyncAutoComplete from "common/SyncAutoComplete";
-import * as dayjs from "dayjs";
-import * as updateLocale from "dayjs/plugin/updateLocale";
-import * as weekday from "dayjs/plugin/weekday";
 import { minutesToHHMM } from "helpers/hhmm-parser";
-import Logger from "js-logger";
 import { sendGAPageView } from "utils/googleAnalytics";
-import { TOASTER_DURATION } from "constants/index";
+
 import AddEntry from "./AddEntry";
 import DatesInWeek from "./DatesInWeek";
 import EntryCard from "./EntryCard";
diff --git a/app/javascript/src/components/time-tracking/MonthCalender.tsx b/app/javascript/src/components/time-tracking/MonthCalender.tsx
index dbe990bdc5..74975b35db 100644
--- a/app/javascript/src/components/time-tracking/MonthCalender.tsx
+++ b/app/javascript/src/components/time-tracking/MonthCalender.tsx
@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from "react";
+
 import dayjs from "dayjs";
-import { minutesToHHMM } from "helpers/hhmm-parser";
 import Logger from "js-logger";
 
+import { minutesToHHMM } from "helpers/hhmm-parser";
+
 const { useState, useEffect } = React;
 // Day start from monday
 dayjs.Ls.en.weekStart = 1;
diff --git a/app/javascript/src/components/time-tracking/WeeklyEntries.tsx b/app/javascript/src/components/time-tracking/WeeklyEntries.tsx
index 3d483da544..3da2a3b92e 100644
--- a/app/javascript/src/components/time-tracking/WeeklyEntries.tsx
+++ b/app/javascript/src/components/time-tracking/WeeklyEntries.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
+
 import timesheetEntryApi from "apis/timesheet-entry";
 import Toastr from "common/Toastr";
+
 import SelectProject from "./SelectProject";
 import WeeklyEntriesCard from "./WeeklyEntriesCard";
 
diff --git a/app/javascript/src/components/time-tracking/WeeklyEntriesCard.tsx b/app/javascript/src/components/time-tracking/WeeklyEntriesCard.tsx
index 555654bd83..88ab685caf 100644
--- a/app/javascript/src/components/time-tracking/WeeklyEntriesCard.tsx
+++ b/app/javascript/src/components/time-tracking/WeeklyEntriesCard.tsx
@@ -1,14 +1,16 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import * as React from "react";
+
+import Logger from "js-logger";
+
 import timesheetEntryApi from "apis/timesheet-entry";
 import Toastr from "common/Toastr";
-
 import { minutesToHHMM, minutesFromHHMM } from "helpers/hhmm-parser";
 import validateTimesheetEntry from "helpers/validateTimesheetEntry";
-import Logger from "js-logger";
 
 const checkedIcon = require("../../../../assets/images/checkbox-checked.svg");
 const uncheckedIcon = require("../../../../assets/images/checkbox-unchecked.svg");
+const editIcon = require("../../../../assets/images/edit.svg");
 
 const { useState, useEffect } = React;
 
@@ -205,15 +207,15 @@ const WeeklyEntriesCard = ({
         <div className="flex justify-around">
           <img
             onClick={() => {if (! isWeeklyEditing) setProjectSelected(false); setIsWeeklyEditing(true); }}
-            src="/edit.svg"
+            src={editIcon}
             alt="edit"
-            className="icon-hover ml-8 cursor-pointer"
+            className="icon-hover ml-8 cursor-pointer w-4 h-4"
           />
           {/* <img
             onClick={handleDeleteEntries}
-            src="/delete.svg"
+            src={deleteIcon}
             alt="delete"
-            className="icon-hover ml-8 cursor-pointer"
+            className="icon-hover ml-8 cursor-pointer w-4 h-4"
           /> */}
         </div>
       </div>
diff --git a/app/javascript/src/constants/routes.ts b/app/javascript/src/constants/routes.ts
index 44b27408e3..7d2c7c22c6 100644
--- a/app/javascript/src/constants/routes.ts
+++ b/app/javascript/src/constants/routes.ts
@@ -1,5 +1,7 @@
-import ErrorPage from "common/Error";
 import { Roles, Paths } from "constants/index";
+
+import ErrorPage from "common/Error";
+
 import ClientDetails from "../components/Clients/Details";
 import ClientList from "../components/Clients/List";
 import EditInvoice from "../components/Invoices/Edit";
diff --git a/app/javascript/src/utils/getStatusTag.ts b/app/javascript/src/utils/getStatusTag.ts
index b6426d8b00..003b17b774 100644
--- a/app/javascript/src/utils/getStatusTag.ts
+++ b/app/javascript/src/utils/getStatusTag.ts
@@ -7,7 +7,7 @@ const getStatusCssClass = (status) => {
     billed: "bg-miru-alert-green-400 text-miru-alert-green-800",
     unbilled: "bg-miru-alert-yellow-400 text-miru-alert-green-1000",
     nonbilled: "bg-miru-dark-purple-100 text-miru-dark-purple-600",
-    paid: "bg-miru-alert-green-400 text-miru-alert-green-800"
+    paid: "bg-miru-han-purple-100 text-miru-han-purple-1000"
   };
   const lowerCaseStatus = status.toLowerCase();
   return `rounded-xl text-xs tracking-widest font-semibold px-1 ${STATUS_LIST[lowerCaseStatus]}`;
diff --git a/app/models/timesheet_entry.rb b/app/models/timesheet_entry.rb
index 1290baff63..dc852dd9f7 100644
--- a/app/models/timesheet_entry.rb
+++ b/app/models/timesheet_entry.rb
@@ -7,7 +7,7 @@
 #  id          :bigint           not null, primary key
 #  bill_status :integer          not null
 #  duration    :float            not null
-#  note        :text
+#  note        :text             default("")
 #  work_date   :date             not null
 #  created_at  :datetime         not null
 #  updated_at  :datetime         not null
diff --git a/app/views/companies/new.html.erb b/app/views/companies/new.html.erb
index 680d42311e..bc2e34c077 100644
--- a/app/views/companies/new.html.erb
+++ b/app/views/companies/new.html.erb
@@ -1,3 +1,4 @@
+<%= javascript_pack_tag "org_timezones", "data-turbo-track": "reload", defer: true %>
 <div class="pt-10/100 px-10 xsm:px-20/100 sm:px-26/100 md:px-30/100 lg:px-32/100 xl:px-36/100">
   <div class="font-jakartasans">
     <div class="p-5 2xl:p-10 shadow-xl rounded-lg">
@@ -169,4 +170,3 @@
     </div>
   </div>
 </div>
-<script  src="/javascripts/org.js" >
diff --git a/app/views/companies/show.html.erb b/app/views/companies/show.html.erb
index 2b9787e414..002f54b104 100644
--- a/app/views/companies/show.html.erb
+++ b/app/views/companies/show.html.erb
@@ -1,3 +1,4 @@
+<%= javascript_pack_tag "org_timezones", "data-turbo-track": "reload", defer: true %>
 <div class="align-page__outer-wrapper">
   <div class="align-page__middle-wrapper">
     <div class="align-page__inner-wrapper">
@@ -208,4 +209,3 @@
     </div>
   </div>
 </div>
-<script  src="/javascripts/org.js" >
diff --git a/app/views/mailers/invoice_mailer/invoice.html.erb b/app/views/mailers/invoice_mailer/invoice.html.erb
index 6b37ee875f..2c54c7a92e 100644
--- a/app/views/mailers/invoice_mailer/invoice.html.erb
+++ b/app/views/mailers/invoice_mailer/invoice.html.erb
@@ -24,7 +24,7 @@
         >
           Invoice Summary
         </div>
-        <table style="width: 100%; border-collapse: separate;border-spacing: 0 15px; ">
+        <table style="width: 100%; margin: 40px ; border-collapse: separate;border-spacing: 0 15px; ">
           <colgroup>
             <col width="40%">
             <col width="40%">
@@ -41,7 +41,7 @@
               <div style=' font-weight:normal; font-size:12px;'>Invoice Number</div>
               <div style="font-weight:normal; font-size:16px;"><%= @invoice.invoice_number %></div>
             </td>
-            <td align="right">
+            <td align="left">
               <div style=' font-weight:normal; font-size:12px;'>Total</div>
               <div style="font-weight:normal; font-size:12px;">Amount</div>
             </td>
@@ -59,8 +59,7 @@
               <div style="font-weight:normal; font-size:16px;">-</div>
             </td>
             <td align="right">
-              <div style="font-weight:normal; font-size:40px"><%= @amount %></div>
-
+              <div style="font-weight:normal; font-size:24px; margin-right: 40px;"><%= @amount %></div>
             </td>
           </tr>
 
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 101a2902e5..c5380b08dd 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -4,7 +4,6 @@
 
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = "1.0"
-
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
 
diff --git a/config/locales/devise.en.yml b/config/locales/devise.en.yml
index 2cb95f349d..2938582675 100644
--- a/config/locales/devise.en.yml
+++ b/config/locales/devise.en.yml
@@ -100,8 +100,8 @@ en:
         user:
           attributes:
             password:
-              too_short: "Password must be at least %{count} characters long"
-              blank: "Password can't be blank"
+              too_short: "must be at least %{count} characters long"
+              blank: "can't be blank"
             password_confirmation:
               confirmation: "Passwords dont' match"
             first_name:
diff --git a/cypress/e2e/team/teamPageForEmployee.spec.js b/cypress/e2e/team/teamPageForEmployee.spec.js
index 4292aa98f9..83fcbdaf5b 100644
--- a/cypress/e2e/team/teamPageForEmployee.spec.js
+++ b/cypress/e2e/team/teamPageForEmployee.spec.js
@@ -15,7 +15,6 @@ describe("Team page for Employee", () => {
     cy.get(teamTabSelector.addNewUserButton).should("not.exist");
   });
   it("should display all column names", function () {
-    cy.get(teamTabSelector.teamTableHeader).contains("PHOTO");
     cy.get(teamTabSelector.teamTableHeader).contains("NAME");
     cy.get(teamTabSelector.teamTableHeader).contains("EMAIL ID");
     cy.get(teamTabSelector.teamTableHeader).contains("ROLE");
diff --git a/db/seeds/05_clients.rb b/db/seeds/05_clients.rb
index ade2fa5d88..6eef290647 100644
--- a/db/seeds/05_clients.rb
+++ b/db/seeds/05_clients.rb
@@ -2,12 +2,12 @@
 
 # Client Create Start
 microsoft = {
-  name: "Microsoft", email: "support@microsoft.com", phone: "+1 9999999991",
+  name: "Microsoft", email: "support@test-microsoft123.com", phone: "+1 9999999991",
   address: "California, USA"
 }
 
 flipkart = {
-  name: "Flipkart", email: "support@flipkart.com", phone: "+91 9999999992",
+  name: "Flipkart", email: "support@test-flipkart123.com", phone: "+91 9999999992",
   address: "Singapore"
 }
 
diff --git a/helix b/helix
new file mode 160000
index 0000000000..402f285ba5
--- /dev/null
+++ b/helix
@@ -0,0 +1 @@
+Subproject commit 402f285ba59f0139ea0d2f4aa862e143ecce9e50
diff --git a/package.json b/package.json
index f49ff6a44f..65514d8070 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saeloun/miru-web",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "dependencies": {
     "@babel/plugin-proposal-private-methods": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
diff --git a/public/javascripts/org.js b/public/javascripts/org.js
deleted file mode 100644
index 6dec186454..0000000000
--- a/public/javascripts/org.js
+++ /dev/null
@@ -1,36 +0,0 @@
-let timezones = [];
-
-function setTimeZoneOptions(options) {
-  const timeZoneSelect = document.querySelector(".select-timezone");
-  timeZoneSelect.innerHTML = "";
-  options.forEach((option) => {
-    const optionElement = document.createElement("option");
-    optionElement.value = option;
-    optionElement.innerText = option;
-    if (window.location.pathname === "/company/new") {
-      optionElement.selected =
-        option === "(GMT-05:00) Eastern Time (US & Canada)";
-    }
-    timeZoneSelect.appendChild(optionElement);
-  });
-}
-
-function handleChangeCountry(event) {
-  const country = event.target.value;
-  const timeZonesForCountry = timezones[country];
-  if (timeZonesForCountry) setTimeZoneOptions(timeZonesForCountry);
-}
-
-const selectCountry = document.querySelector(".select-country");
-
-selectCountry.addEventListener("change", handleChangeCountry);
-
-async function main() {
-  const response = await fetch("/internal_api/v1/timezones");
-  const jsonResponse = await response.json();
-  timezones = jsonResponse.timezones;
-  if (window.location.pathname === "/company/new")
-    setTimeZoneOptions(timezones[selectCountry.value]);
-}
-
-main();
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
index ecad6c51e3..3d47452c32 100644
--- a/spec/helpers/application_helper_spec.rb
+++ b/spec/helpers/application_helper_spec.rb
@@ -8,7 +8,7 @@
       let(:user) { create(:user, :with_avatar) }
 
       it "returns user's avatar" do
-        expect(helper.user_avatar(user)).to eq(user.avatar)
+        expect(helper.user_avatar(user)).to eq(url_for(user.avatar))
       end
     end
 
diff --git a/spec/requests/internal_api/v1/team/index_spec.rb b/spec/requests/internal_api/v1/team/index_spec.rb
index b3f1dc2e97..079e7afe79 100644
--- a/spec/requests/internal_api/v1/team/index_spec.rb
+++ b/spec/requests/internal_api/v1/team/index_spec.rb
@@ -23,7 +23,7 @@
     end
 
     it "checks if profile picture is there with each team member" do
-      expect(json_response["team"].first["profilePicture"]).to eq(JSON.parse(user.avatar.to_json))
+      expect("http://www.example.com#{json_response["team"].first["profilePicture"]}").to eq(url_for(user.avatar))
       expect(json_response["invitation"].last["profilePicture"]).to include("/assets/avatar")
     end
 
diff --git a/spec/requests/invoices/view_spec.rb b/spec/requests/invoices/view_spec.rb
index 43a8b818da..0e8fec1fcf 100644
--- a/spec/requests/invoices/view_spec.rb
+++ b/spec/requests/invoices/view_spec.rb
@@ -6,7 +6,7 @@
   describe "#show" do
     let(:company) { create(:company, :with_logo) }
     let(:client) { create(:client, company:) }
-    let(:invoice) { create(:invoice, client:, company:) }
+    let(:invoice) { create(:invoice, client:, company:, status: "sent") }
 
     context "when unauthenticated" do
       it "is able to view the client invoice successfully" do
@@ -14,5 +14,24 @@
         expect(response).to be_successful
       end
     end
+
+    context "when the client viewed the invoice" do
+      context "if the invoice status is 'sent'" do
+        it "updates the invoice status to viewed" do
+          send_request :get, view_invoice_path(invoice.external_view_key)
+          expect(response).to be_successful
+          expect(invoice.reload.status).to eq "viewed"
+        end
+      end
+
+      context "if the invoice status is not 'sent'" do
+        it "does not update the invoice status to viewed and it should remain the same status" do
+          invoice.update(status: "draft")
+          send_request :get, view_invoice_path(invoice.external_view_key)
+          expect(response).to be_successful
+          expect(invoice.reload.status).to eq "draft"
+        end
+      end
+    end
   end
 end
diff --git a/tailwind.config.js b/tailwind.config.js
index 2bf3c9ee25..a2defa8fd2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -172,6 +172,7 @@ module.exports = {
         112: "28rem",
         129: "33rem",
         138: "34.5rem",
+        160: "40rem"
       },
       padding: {
         "36/100": "36.66666%",
@@ -193,7 +194,7 @@ module.exports = {
     extend: {
       display: ["group-hover"],
     },
-    opacity: ({ after }) => after(['disabled'])
+    opacity: ({ after }) => after(["disabled"]),
   },
   plugins: [],
 };
diff --git a/yarn.lock b/yarn.lock
index 15f0735d17..e363c1e2f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9003,9 +9003,9 @@ terser-webpack-plugin@^4.2.3:
     webpack-sources "^1.4.3"
 
 terser@^4.1.2:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"