diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 90a7f4d8..96382f7a 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -1,17 +1,16 @@
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from "react-redux";
-import { IntlProvider } from 'react-intl';
-import { loadLocaleData } from '@/translations';
-import "@/App.css";
-import { AppNavigator } from "@/routes";
-import { setLocale } from '@/store/slices/app';
-import { IndeterminateProgressOverlay } from '@/components';
+import {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {IntlProvider} from 'react-intl';
+import {loadLocaleData} from '@/translations';
+import '@/App.css';
+import {AppNavigator} from '@/routes';
+import {setLocale} from '@/store/slices/app';
+import {IndeterminateProgressOverlay} from '@/components';
 
 /**
  * @returns app react component to be rendered by electron as the UI
  */
 function App() {
-
   const dispatch = useDispatch();
   const appStore = useSelector((state: any) => state.app);
   const [translationTokens, setTranslationTokens] = useState<object>();
@@ -33,16 +32,16 @@ function App() {
   }
 
   return (
-  <div style={{height: 'calc(100% - 67px)'}} className="dark:bg-gray-800 dark:text-white"> 
-    <IntlProvider
-      locale={appStore.locale}
-      defaultLocale="en"
-      //@ts-ignore
-      messages={translationTokens.default}
-    >
-      <AppNavigator/>
-    </IntlProvider>
-  </div>
+    <div style={{ height: 'calc(100% - 67px)' }} className="dark:bg-gray-800 dark:text-white">
+      <IntlProvider
+        locale={appStore.locale}
+        defaultLocale="en"
+        //@ts-ignore
+        messages={translationTokens.default}
+      >
+        <AppNavigator />
+      </IntlProvider>
+    </div>
   );
 }
 
diff --git a/src/renderer/components/blocks/modals/ProjectModal.tsx b/src/renderer/components/blocks/modals/ProjectModal.tsx
index 06b413a9..e6f1acbe 100644
--- a/src/renderer/components/blocks/modals/ProjectModal.tsx
+++ b/src/renderer/components/blocks/modals/ProjectModal.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import {
+  CoBenefitForm,
+  EstimationForm,
+  IssuanceForm,
   Modal,
-  Tabs,
   ProjectForm,
-  IssuanceForm,
   ProjectLocationForm,
-  EstimationForm,
-  CoBenefitForm,
-  RelatedProjectForm,
   RatingForm,
+  RelatedProjectForm,
   Spinner,
+  Tabs,
 } from '@/components';
 import { FormattedMessage } from 'react-intl';
-import { useGetProjectQuery, useGetPickListsQuery } from '@/api';
+import { useGetPickListsQuery, useGetProjectQuery } from '@/api';
 
 interface ProjectModalProps {
   warehouseProjectId: string;
@@ -33,76 +33,78 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
         <FormattedMessage id={'detailed-project-view'} />
       </Modal.Header>
       <Modal.Body>
-        <Tabs>
-          {/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
-          <Tabs.Item title={<FormattedMessage id="project" />}>
-            {!isProjectLoading && !isPickListLoading && projectData ? (
-              <ProjectForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={projectData}
-                picklistOptions={pickListData}
-              />
-            ) : (
-              <Spinner size="xl" />
-            )}
-          </Tabs.Item>
-          {projectData?.issuances?.length && (
-            <Tabs.Item title={<FormattedMessage id="issuance" />}>
-              <IssuanceForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={projectData?.issuances}
-                showUnits={true}
-                picklistOptions={pickListData}
-              />
+        <div className="h-screen">
+          <Tabs>
+            {/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
+            <Tabs.Item title={<FormattedMessage id="project" />}>
+              {!isProjectLoading && !isPickListLoading && projectData ? (
+                <ProjectForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={projectData}
+                  picklistOptions={pickListData}
+                />
+              ) : (
+                <Spinner size="xl" />
+              )}
             </Tabs.Item>
-          )}
-          {projectData?.projectLocations?.length && (
-            <Tabs.Item title={<FormattedMessage id="project-locations" />}>
-              <ProjectLocationForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={projectData?.projectLocations}
-                picklistOptions={pickListData}
-              />
-            </Tabs.Item>
-          )}
-          {projectData?.estimations?.length && (
-            <Tabs.Item title={<FormattedMessage id="estimations" />}>
-              <EstimationForm onSubmit={handleProjectFormSubmit} readonly={true} data={projectData?.estimations} />
-            </Tabs.Item>
-          )}
-          {projectData?.coBenefits?.length && (
-            <Tabs.Item title={<FormattedMessage id="co-benefits" />}>
-              <CoBenefitForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={projectData?.coBenefits}
-                picklistOptions={pickListData}
-              />
-            </Tabs.Item>
-          )}
-          {projectData?.relatedProjects?.length && (
-            <Tabs.Item title={<FormattedMessage id="related-projects" />}>
-              <RelatedProjectForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={projectData?.relatedProjects}
-              />
-            </Tabs.Item>
-          )}
-          {(projectData?.projectRatings?.length || projectData?.labels?.length) && (
-            <Tabs.Item title={<FormattedMessage id="ratings" />}>
-              <RatingForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={projectData?.projectRatings}
-                picklistOptions={pickListData}
-              />
-            </Tabs.Item>
-          )}
-        </Tabs>
+            {projectData?.issuances?.length && (
+              <Tabs.Item title={<FormattedMessage id="issuance" />}>
+                <IssuanceForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={projectData?.issuances}
+                  showUnits={true}
+                  picklistOptions={pickListData}
+                />
+              </Tabs.Item>
+            )}
+            {projectData?.projectLocations?.length && (
+              <Tabs.Item title={<FormattedMessage id="project-locations" />}>
+                <ProjectLocationForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={projectData?.projectLocations}
+                  picklistOptions={pickListData}
+                />
+              </Tabs.Item>
+            )}
+            {projectData?.estimations?.length && (
+              <Tabs.Item title={<FormattedMessage id="estimations" />}>
+                <EstimationForm onSubmit={handleProjectFormSubmit} readonly={true} data={projectData?.estimations} />
+              </Tabs.Item>
+            )}
+            {projectData?.coBenefits?.length && (
+              <Tabs.Item title={<FormattedMessage id="co-benefits" />}>
+                <CoBenefitForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={projectData?.coBenefits}
+                  picklistOptions={pickListData}
+                />
+              </Tabs.Item>
+            )}
+            {projectData?.relatedProjects?.length && (
+              <Tabs.Item title={<FormattedMessage id="related-projects" />}>
+                <RelatedProjectForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={projectData?.relatedProjects}
+                />
+              </Tabs.Item>
+            )}
+            {(projectData?.projectRatings?.length || projectData?.labels?.length) && (
+              <Tabs.Item title={<FormattedMessage id="ratings" />}>
+                <RatingForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={projectData?.projectRatings}
+                  picklistOptions={pickListData}
+                />
+              </Tabs.Item>
+            )}
+          </Tabs>
+        </div>
       </Modal.Body>
     </Modal>
   );
diff --git a/src/renderer/components/blocks/modals/StagingDiffModal.tsx b/src/renderer/components/blocks/modals/StagingDiffModal.tsx
index 5adf29ad..0867ed29 100644
--- a/src/renderer/components/blocks/modals/StagingDiffModal.tsx
+++ b/src/renderer/components/blocks/modals/StagingDiffModal.tsx
@@ -27,7 +27,9 @@ const StagingDiffModal: React.FC<ProjectModalProps> = ({ stagingUuid, onClose }:
       <Modal.Header>
         <FormattedMessage id={'staging-diff'} />
       </Modal.Header>
-      <Modal.Body>{isLoading ? <p>loading...</p> : <DiffViewer data={changeRecord} />}</Modal.Body>
+      <Modal.Body>
+        <div className="h-screen">{isLoading ? <p>loading...</p> : <DiffViewer data={changeRecord} />}</div>
+      </Modal.Body>
     </Modal>
   );
 };
diff --git a/src/renderer/components/blocks/modals/UnitModal.tsx b/src/renderer/components/blocks/modals/UnitModal.tsx
index 5d37c54f..4e96a1ca 100644
--- a/src/renderer/components/blocks/modals/UnitModal.tsx
+++ b/src/renderer/components/blocks/modals/UnitModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Modal, Tabs, UnitForm, IssuanceForm, LabelForm, Spinner } from '@/components';
+import { IssuanceForm, LabelForm, Modal, Spinner, Tabs, UnitForm } from '@/components';
 import { FormattedMessage } from 'react-intl';
-import { useGetUnitQuery, useGetPickListsQuery } from '@/api';
+import { useGetPickListsQuery, useGetUnitQuery } from '@/api';
 
 interface UnitModalProps {
   warehouseUnitId: string;
@@ -22,41 +22,43 @@ const UnitModal: React.FC<UnitModalProps> = ({ warehouseUnitId, onClose }: UnitM
         <FormattedMessage id={'detailed-unit-view'} />
       </Modal.Header>
       <Modal.Body>
-        <Tabs>
-          {/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
-          <Tabs.Item title={<FormattedMessage id="unit" />}>
-            {!unitLoading && !isPickListLoading && unitData ? (
-              <UnitForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={unitData}
-                picklistOptions={pickListData}
-              />
-            ) : (
-              <Spinner size="xl" />
-            )}
-          </Tabs.Item>
-          {unitData?.issuance && (
-            <Tabs.Item title={<FormattedMessage id="issuance" />}>
-              <IssuanceForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={[unitData?.issuance]}
-                picklistOptions={pickListData}
-              />
-            </Tabs.Item>
-          )}
-          {unitData?.labels?.length && (
-            <Tabs.Item title={<FormattedMessage id="labels" />}>
-              <LabelForm
-                onSubmit={handleProjectFormSubmit}
-                readonly={true}
-                data={unitData?.labels}
-                picklistOptions={pickListData}
-              />
+        <div className="h-screen">
+          <Tabs>
+            {/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
+            <Tabs.Item title={<FormattedMessage id="unit" />}>
+              {!unitLoading && !isPickListLoading && unitData ? (
+                <UnitForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={unitData}
+                  picklistOptions={pickListData}
+                />
+              ) : (
+                <Spinner size="xl" />
+              )}
             </Tabs.Item>
-          )}
-        </Tabs>
+            {unitData?.issuance && (
+              <Tabs.Item title={<FormattedMessage id="issuance" />}>
+                <IssuanceForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={[unitData?.issuance]}
+                  picklistOptions={pickListData}
+                />
+              </Tabs.Item>
+            )}
+            {unitData?.labels?.length && (
+              <Tabs.Item title={<FormattedMessage id="labels" />}>
+                <LabelForm
+                  onSubmit={handleProjectFormSubmit}
+                  readonly={true}
+                  data={unitData?.labels}
+                  picklistOptions={pickListData}
+                />
+              </Tabs.Item>
+            )}
+          </Tabs>
+        </div>
       </Modal.Body>
     </Modal>
   );
diff --git a/src/renderer/components/blocks/modals/UpsertProjectModal.tsx b/src/renderer/components/blocks/modals/UpsertProjectModal.tsx
index e91d1b5f..3b0b5e8a 100644
--- a/src/renderer/components/blocks/modals/UpsertProjectModal.tsx
+++ b/src/renderer/components/blocks/modals/UpsertProjectModal.tsx
@@ -37,7 +37,9 @@ const UpsertProjectModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModal
     <Modal show={true} onClose={onClose}>
       <ModalHeader />
       <Modal.Body>
-        <p>the project form goes here {projectData?.warehouseProjectId}</p>
+        <div className="h-screen">
+          <p>the project form goes here {projectData?.warehouseProjectId}</p>
+        </div>
       </Modal.Body>
     </Modal>
   );
diff --git a/src/renderer/components/blocks/modals/UpsertUnitModal.tsx b/src/renderer/components/blocks/modals/UpsertUnitModal.tsx
index ebe6bb46..0ed43688 100644
--- a/src/renderer/components/blocks/modals/UpsertUnitModal.tsx
+++ b/src/renderer/components/blocks/modals/UpsertUnitModal.tsx
@@ -37,7 +37,9 @@ const UpsertUnitModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalPro
     <Modal show={true} onClose={onClose}>
       <ModalHeader />
       <Modal.Body>
-        <p>the unit form goes here {unitData?.warehouseUnitId}</p>
+        <div className="h-screen">
+          <p>the unit form goes here {unitData?.warehouseUnitId}</p>
+        </div>
       </Modal.Body>
     </Modal>
   );
diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
index 0371a47e..7ca5241c 100644
--- a/src/renderer/components/blocks/tables/ProjectsListTable.tsx
+++ b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DebouncedFunc } from 'lodash';
-import { DataTable, PageCounter, Pagination, ProjectAndUnitActions } from '@/components';
+import {DataTable, PageCounter, Pagination, ProjectAndUnitActions, Tooltip} from '@/components';
 import { Project } from '@/schemas/Project.schema';
 import { Badge } from 'flowbite-react';
 
@@ -50,8 +50,10 @@ const ProjectsListTable: React.FC<TableProps> = ({
         title: <FormattedMessage id={'project-id'} />,
         key: 'projectId',
         render: (row: Project) => (
-          <div className="p-4 bg-white rounded-lg border shadow-md">
-            <h5 className="text-sm font-bold tracking-tight text-gray-900">{row.projectId}</h5>
+          <div className="m-1 p-3 bg-white rounded-lg border shadow-sm dark:border-gray-500 dark:bg-transparent text-center overflow-hidden">
+            <Tooltip content={row.projectId}>
+              <h5 className="text-sm font-bold tracking-tight text-gray-900 dark:text-gray-50">{row.projectId}</h5>
+            </Tooltip>
           </div>
         ),
       },