diff --git a/src/@types/events.ts b/src/@types/events.ts
deleted file mode 100644
index 193b610..0000000
--- a/src/@types/events.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/*===============================*
-          EVENT TYPES
- *===============================*
-*/
-export type ReactFormEvent = React.FormEvent<HTMLFormElement>;
-export type ReactSelectEvent = React.MouseEvent<HTMLLIElement>;
-export type ReactInputEvent = React.ChangeEvent<HTMLInputElement>;
-export type ReactMouseEvent = React.MouseEvent<HTMLButtonElement>;
diff --git a/src/@types/helpers.ts b/src/@types/helpers.ts
deleted file mode 100644
index 81e91ef..0000000
--- a/src/@types/helpers.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-/*===============================*
-          HELPER TYPES
- *===============================*
-*/
-
-export type Immutable<T> = T extends PrimitiveType
-  ? T
-  : T extends AtomicObject
-  ? T
-  : T extends Array<infer A>
-  ? ReadonlyArray<Immutable<A>>
-  : T extends IfAvailable<ReadonlyMap<infer K, infer V>>
-  ? ReadonlyMap<Immutable<K>, Immutable<V>>
-  : T extends IfAvailable<ReadonlySet<infer S>>
-  ? ReadonlySet<Immutable<S>>
-  : T extends WeakReferences
-  ? T
-  : T extends object
-  ? {
-      // !NOTE: removes methods on object
-      readonly [P in NonFunctionPropertyNames<T>]: Immutable<T[P]>;
-      // !NOTE: use { readonly [P in keyof T]: Immutable<T[P]> } to add methods
-    }
-  : unknown;
-
-export type RequiredKeys<T> = {
-  [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K;
-}[keyof T];
-
-export type LooseAutocomplete<T extends string> = T | Omit<string, T>;
-
-export type Expand<T> = T extends (...args: infer A) => infer R
-  ? (...args: Expand<A>) => Expand<R>
-  : T extends object
-  ? T extends infer O
-    ? { [K in keyof O]: Expand<O[K]> }
-    : never
-  : T;
-
-export type DeepPartial<T> = T extends Function
-  ? T
-  : T extends Array<infer A>
-  ? DeepPartialArray<A>
-  : T extends object
-  ? DeepPartialObject<T>
-  : T | undefined;
-
-type DeepPartialArray<T> = Array<DeepPartial<T>>;
-type DeepPartialObject<T> = {
-  [K in keyof T]?: DeepPartial<T[K]>;
-};
-
-export type KeyValuePair<K extends keyof any = string, V = string> = Record<
-  K,
-  V
->;
-export interface RecursiveKeyValuePair<
-  K extends keyof any = string,
-  V = string
-> {
-  [key: string]: V | RecursiveKeyValuePair<K, V>;
-}
-
-export type OptionalUnion<
-  U extends Record<string, any>,
-  A extends keyof U = U extends U ? keyof U : never
-> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
-
-type WeakReferences =
-  | IfAvailable<WeakMap<any, any>>
-  | IfAvailable<WeakSet<any>>;
-
-type IfAvailable<T, Fallback = void> = true | false extends (
-  T extends never ? true : false
-)
-  ? Fallback
-  : keyof T extends never
-  ? Fallback
-  : T;
-
-// get function properties
-type FunctionPropertyNames<T> = {
-  [P in keyof T]: T[P] extends Function ? P : never;
-}[keyof T];
-type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;
-
-// get non function properties
-type NonFunctionPropertyNames<T> = {
-  [P in keyof T]: T[P] extends Function ? never : P;
-}[keyof T];
-type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
-
-type PrimitiveType =
-  | string
-  | number
-  | boolean
-  | undefined
-  | null
-  | bigint
-  | symbol;
-type AtomicObject = Function | RegExp | Promise<any> | Date;
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
new file mode 100644
index 0000000..66cff5a
--- /dev/null
+++ b/src/@types/index.d.ts
@@ -0,0 +1,245 @@
+// import type { RequestInit } from 'graphql-request/build/esm/types.dom';
+// This helps with type inference when using the component
+export declare module 'react' {
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+
+export declare namespace Project {
+  type ElementProps<E extends React.ElementType<any>> = $ElementProps<E> &
+    Omit<React.ComponentPropsWithoutRef<E>, keyof $ElementProps<E>>;
+
+  interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {}
+
+  type $ElementProps<E extends React.ElementType<any>> = {
+    children: React.ReactNode;
+    as?: E;
+  };
+
+  // type ElementProps<T> = T extends React.ComponentType<infer Props>
+  //   ? Props extends object
+  //     ? Props
+  //     : never
+  //   : never;
+
+  type ElementProps<E extends React.ElementType<any>> = $ElementProps<E> &
+    Omit<React.ComponentPropsWithoutRef<E>, keyof $ElementProps<E>>;
+
+  interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {}
+
+  type PropsFrom<T> = T extends React.FC<infer Props>
+    ? Props
+    : T extends React.Component<infer Props>
+    ? Props
+    : T extends object
+    ? { [K in keyof T]: T[K] }
+    : never;
+
+  /*===============================*
+          EVENT TYPES
+ *===============================*
+*/
+  type ReactFormEvent = React.FormEvent<HTMLFormElement>;
+  type ReactSelectEvent = React.MouseEvent<HTMLLIElement>;
+  type ReactInputEvent = React.ChangeEvent<HTMLInputElement>;
+  type ReactMouseEvent = React.MouseEvent<HTMLButtonElement>;
+
+  /*===============================*
+          PROJECT MODEL TYPES
+ *===============================*
+*/
+
+  /*===============================*
+          DATA MODELS
+ *===============================*
+*/
+
+  interface IUser {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    photo: string;
+  }
+
+  type Invoices = Array<Invoice>;
+
+  type IStatus = ['PAID', 'PENDING', 'DRAFT'];
+
+  type Invoice = DraftInvoice | PendingInvoice | PaidInvoice;
+
+  type InvoiceStatus = IStatus[number];
+
+  interface DraftInvoice extends InvoiceFormType {
+    status: 'DRAFT';
+  }
+  interface PendingInvoice extends InvoiceFormType {
+    status: 'PENDING';
+  }
+  interface PaidInvoice extends InvoiceFormType {
+    status: 'PAID';
+  }
+
+  interface InvoiceFormType {
+    clientAddress: IAddress;
+    clientEmail: string;
+    clientName: string;
+    description: string;
+    items: ILineItem[];
+    senderAddress: IAddress;
+    issueDate?: string | undefined;
+    paymentDue?: string | undefined;
+    paymentTerms?: number | undefined;
+    status?: InvoiceStatus | undefined;
+    tag?: string | undefined;
+    total?: number | undefined;
+    userId?: string | undefined;
+  }
+
+  interface IAddress {
+    street: string;
+    city: string;
+    postCode: string;
+    country: string;
+  }
+  interface ILineItem {
+    name: string;
+    quantity: number;
+    price: number;
+    id?: string | undefined;
+    total?: number | undefined;
+  }
+
+  interface IErrorResponse {
+    response: { errors: IError[]; data: IErrorData };
+  }
+
+  interface IError {
+    message: string;
+    locations: IErrorLocation[];
+    path: string[];
+    extensions: IErrorExtensions;
+  }
+  interface IErrorLocation {
+    line: number;
+    column: number;
+  }
+  interface IErrorExtensions {
+    code: string;
+    http: { status: number };
+    stacktrace: string[];
+  }
+  interface IErrorData {
+    [x: string]: any;
+  }
+
+  /*===============================*
+          HELPER TYPES
+ *===============================*
+*/
+
+  type Immutable<T> = T extends PrimitiveType
+    ? T
+    : T extends AtomicObject
+    ? T
+    : T extends Array<infer A>
+    ? ReadonlyArray<Immutable<A>>
+    : T extends IfAvailable<ReadonlyMap<infer K, infer V>>
+    ? ReadonlyMap<Immutable<K>, Immutable<V>>
+    : T extends IfAvailable<ReadonlySet<infer S>>
+    ? ReadonlySet<Immutable<S>>
+    : T extends WeakReferences
+    ? T
+    : T extends object
+    ? {
+        // !NOTE: removes methods on object
+        readonly [P in NonFunctionPropertyNames<T>]: Immutable<T[P]>;
+        // !NOTE: use { readonly [P in keyof T]: Immutable<T[P]> } to add methods
+      }
+    : unknown;
+
+  type RequiredKeys<T> = {
+    [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K;
+  }[keyof T];
+
+  type LooseAutocomplete<T extends string> = T | Omit<string, T>;
+
+  type Expand<T> = T extends (...args: infer A) => infer R
+    ? (...args: Expand<A>) => Expand<R>
+    : T extends object
+    ? T extends infer O
+      ? { [K in keyof O]: Expand<O[K]> }
+      : never
+    : T;
+
+  type DeepPartial<T> = T extends Function
+    ? T
+    : T extends Array<infer A>
+    ? DeepPartialArray<A>
+    : T extends object
+    ? DeepPartialObject<T>
+    : T | undefined;
+
+  type DeepPartialArray<T> = Array<DeepPartial<T>>;
+  type DeepPartialObject<T> = {
+    [K in keyof T]?: DeepPartial<T[K]>;
+  };
+
+  type KeyValuePair<K extends keyof any = string, V = string> = Record<K, V>;
+  interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+    [key: string]: V | RecursiveKeyValuePair<K, V>;
+  }
+
+  type OptionalUnion<
+    U extends Record<string, any>,
+    A extends keyof U = U extends U ? keyof U : never
+  > = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+
+  type WeakReferences =
+    | IfAvailable<WeakMap<any, any>>
+    | IfAvailable<WeakSet<any>>;
+
+  type IfAvailable<T, Fallback = void> = true | false extends (
+    T extends never ? true : false
+  )
+    ? Fallback
+    : keyof T extends never
+    ? Fallback
+    : T;
+
+  // get function properties
+  type FunctionPropertyNames<T> = {
+    [P in keyof T]: T[P] extends Function ? P : never;
+  }[keyof T];
+  type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;
+
+  // get non function properties
+  type NonFunctionPropertyNames<T> = {
+    [P in keyof T]: T[P] extends Function ? never : P;
+  }[keyof T];
+  type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
+
+  type PrimitiveType =
+    | string
+    | number
+    | boolean
+    | undefined
+    | null
+    | bigint
+    | symbol;
+  type AtomicObject = Function | RegExp | Promise<any> | Date;
+}
+
+export declare global {
+  interface GlobalReducerActions {}
+}
+
+type GlobalReducer<IState> = (
+  state: IState,
+  action: {
+    [ActionType in keyof GlobalReducerActions]: {
+      type: ActionType;
+    } & GlobalReducerActions[ActionType];
+  }[keyof GlobalReducerActions]
+) => IState;
diff --git a/src/@types/index.ts b/src/@types/index.ts
deleted file mode 100644
index 763ac7e..0000000
--- a/src/@types/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './events';
-export * from './helpers';
-export * from './models';
-export * from './project.d';
-export * from './types';
diff --git a/src/@types/models.ts b/src/@types/models.ts
deleted file mode 100644
index b700d13..0000000
--- a/src/@types/models.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-/*===============================*
-          DATA MODELS
- *===============================*
-*/
-
-export interface IUser {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  photo: string;
-}
-
-export type Invoices = Array<Invoice>;
-
-export type Invoice = DraftInvoice | PendingInvoice | PaidInvoice;
-
-export type IStatus = ['PAID', 'PENDING', 'DRAFT'];
-
-export type InvoiceStatus = IStatus[number];
-export type PaidInvoice = {
-  id: string;
-  createdAt: string;
-  updatedAt?: string;
-  paymentDue: string;
-  description: string;
-  paymentTerms: number;
-  clientName: string;
-  clientEmail: string;
-  status: Extract<InvoiceStatus, 'PAID'>;
-  senderAddress: IAddress;
-  clientAddress: IAddress;
-  items: ILineItem[];
-  total: number;
-};
-export type PendingInvoice = {
-  id: string;
-  createdAt: string;
-  updatedAt?: string;
-  paymentDue: string;
-  description: string;
-  paymentTerms: number;
-  clientName: string;
-  clientEmail: string;
-  status: Extract<InvoiceStatus, 'PENDING'>;
-  senderAddress: IAddress;
-  clientAddress: IAddress;
-  items: ILineItem[];
-  total: number;
-};
-export type DraftInvoice = {
-  id: string;
-  createdAt: string;
-  updatedAt?: string;
-  paymentDue?: string;
-  description?: string;
-  paymentTerms: number;
-  clientName?: string;
-  clientEmail?: string;
-  status: Extract<InvoiceStatus, 'DRAFT'>;
-  senderAddress?: IAddress;
-  clientAddress?: Partial<IAddress>;
-  items?: ILineItem[];
-  total?: number;
-};
-
-interface IAddress {
-  street: string;
-  city: string;
-  postCode: string;
-  country: string;
-}
-interface ILineItem {
-  name: string;
-  quantity: number;
-  price: number;
-  total: number;
-}
-
-export interface IErrorResponse {
-  response: { errors: IError[]; data: IErrorData };
-}
-
-interface IError {
-  message: string;
-  locations: IErrorLocation[];
-  path: string[];
-  extensions: IErrorExtensions;
-}
-interface IErrorLocation {
-  line: number;
-  column: number;
-}
-interface IErrorExtensions {
-  code: string;
-  http: { status: number };
-  stacktrace: string[];
-}
-interface IErrorData {
-  [x: string]: any;
-}
diff --git a/src/@types/project.d.ts b/src/@types/project.d.ts
deleted file mode 100644
index 65b00d6..0000000
--- a/src/@types/project.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// import type { RequestInit } from 'graphql-request/build/esm/types.dom';
-// This helps with type inference when using the component
-export declare module 'react' {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
-export declare type $ElementProps<T> = T extends React.ComponentType<
-  infer Props
->
-  ? Props extends object
-    ? Props
-    : never
-  : never;
-
-export type PropsFrom<T> = T extends React.FC<infer Props>
-  ? Props
-  : T extends React.Component<infer Props>
-  ? Props
-  : T extends object
-  ? { [K in keyof T]: T[K] }
-  : never;
diff --git a/src/@types/types.ts b/src/@types/types.ts
deleted file mode 100755
index 4e67838..0000000
--- a/src/@types/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-declare global {
-  interface GlobalReducerActions {}
-}
-
-export type GlobalReducer<IState> = (
-  state: IState,
-  action: {
-    [ActionType in keyof GlobalReducerActions]: {
-      type: ActionType;
-    } & GlobalReducerActions[ActionType];
-  }[keyof GlobalReducerActions]
-) => IState;
-
-type ElementProps<E extends React.ElementType<any>> = {
-  children: React.ReactNode;
-  as?: E;
-};
-
-export type Props<E extends React.ElementType<any>> = ElementProps<E> &
-  Omit<React.ComponentPropsWithoutRef<E>, keyof ElementProps<E>>;
diff --git a/src/common/links.tsx b/src/common/links.tsx
index f275c88..8fc2b5e 100755
--- a/src/common/links.tsx
+++ b/src/common/links.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   IconAddSVG,
   IconArrowDownSVG,
@@ -10,8 +9,6 @@ import {
   LogoSVG,
 } from './svg-icons';
 
-export interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {}
-
 export const icons = {
   arrow: {
     right: IconArrowRightSVG,
diff --git a/src/components/atoms/form-control.tsx b/src/components/atoms/form-control.tsx
index f2a4e1f..ec22fa1 100644
--- a/src/components/atoms/form-control.tsx
+++ b/src/components/atoms/form-control.tsx
@@ -1,4 +1,4 @@
-import type { Props } from '@src/@types';
+import type { Project } from '@src/@types';
 import clsx from 'clsx';
 
 const FormControl = <E extends React.ElementType = 'div'>({
@@ -6,7 +6,7 @@ const FormControl = <E extends React.ElementType = 'div'>({
   className,
   children,
   ...rest
-}: Props<E>) => {
+}: Project.ElementProps<E>) => {
   const RenderedElement = as || 'div';
 
   return (
diff --git a/src/components/atoms/logo.tsx b/src/components/atoms/logo.tsx
index 3edfe93..64822e5 100644
--- a/src/components/atoms/logo.tsx
+++ b/src/components/atoms/logo.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-type Props = {};
+interface Props {}
 
 const Logo = (props: Props) => {
   return (
diff --git a/src/components/atoms/logout-button.tsx b/src/components/atoms/logout-button.tsx
index 4ae93f4..712b31a 100644
--- a/src/components/atoms/logout-button.tsx
+++ b/src/components/atoms/logout-button.tsx
@@ -1,4 +1,4 @@
-import { IErrorResponse } from '@src/@types';
+import type { Project } from '@src/@types';
 import { client, useAuthDispatch, useLogoutQuery } from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
@@ -22,7 +22,7 @@ const LogoutButton = (props: Props) => {
         queryClient.clear();
         navigate('/login');
       },
-      onError(error: IErrorResponse) {
+      onError(error: Project.IErrorResponse) {
         dispatch('auth/logout');
         queryClient.clear();
         navigate('/login');
diff --git a/src/components/atoms/svg-icon.tsx b/src/components/atoms/svg-icon.tsx
index 919d4b1..ff3ca73 100644
--- a/src/components/atoms/svg-icon.tsx
+++ b/src/components/atoms/svg-icon.tsx
@@ -1,7 +1,7 @@
-import { IconProps } from '@src/common';
+import { Project } from '@src/@types';
 import * as React from 'react';
 
-interface IProps extends IconProps {
+interface IProps extends Project.IconProps {
   fileName: string;
   iconPath?: string;
   onCompleted: () => void;
diff --git a/src/components/atoms/text.tsx b/src/components/atoms/text.tsx
index e28b26a..7a3c5a6 100755
--- a/src/components/atoms/text.tsx
+++ b/src/components/atoms/text.tsx
@@ -1,10 +1,10 @@
-import type { Props } from '@src/@types';
+import type { Project } from '@src/@types';
 
 const Text = <E extends React.ElementType = 'p'>({
   children,
   as,
   ...rest
-}: Props<E>) => {
+}: Project.ElementProps<E>) => {
   const RenderedElement = as || 'p';
   return <RenderedElement {...rest}>{children}</RenderedElement>;
 };
diff --git a/src/components/molecules/@types.ts b/src/components/molecules/@types.ts
deleted file mode 100644
index 1b6946e..0000000
--- a/src/components/molecules/@types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export interface InvoiceFormType {
-  clientAddress: {
-    street: string;
-    city: string;
-    country: string;
-    postCode: string;
-  };
-  clientEmail: string;
-  clientName: string;
-  description: string;
-  items: [
-    {
-      name: string;
-      quantity: number;
-      price: number;
-      id?: string | undefined;
-      total?: number | undefined;
-    },
-    ...{
-      name: string;
-      quantity: number;
-      price: number;
-      id?: string | undefined;
-      total?: number | undefined;
-    }[]
-  ];
-  senderAddress: {
-    street: string;
-    city: string;
-    country: string;
-    postCode: string;
-  };
-  issueDate?: string | undefined;
-  paymentDue?: string | undefined;
-  paymentTerms?: number | undefined;
-  status?: 'PAID' | 'PENDING' | 'DRAFT' | undefined;
-  tag?: string | undefined;
-  total?: number | undefined;
-  userId?: string | undefined;
-}
diff --git a/src/components/molecules/actions-btns.tsx b/src/components/molecules/actions-btns.tsx
index 5d93b8e..17962aa 100644
--- a/src/components/molecules/actions-btns.tsx
+++ b/src/components/molecules/actions-btns.tsx
@@ -1,4 +1,4 @@
-import type { InvoiceType } from '@src/lib';
+import { InvoiceType, isPaidInvoice } from '@src/lib';
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 
@@ -32,7 +32,8 @@ const InvoiceActions = ({
         type='button'
         className='btn btn-invoice font-bold'
         onClick={() => {
-          if (invoice?.status !== 'PAID') updateStatus(invoice);
+          // @ts-expect-error disable typecheck error
+          if (!isPaidInvoice(invoice)) updateStatus(invoice);
         }}
       >
         Mark as Paid
diff --git a/src/components/molecules/edit-item-list.tsx b/src/components/molecules/edit-item-list.tsx
index 8193fcd..60818e1 100644
--- a/src/components/molecules/edit-item-list.tsx
+++ b/src/components/molecules/edit-item-list.tsx
@@ -9,12 +9,13 @@ import {
 } from 'react-hook-form';
 import { v4 as uuid } from 'uuid';
 import { FormErrorText, FormLabel } from '../atoms';
-import type { InvoiceFormType } from './@types';
+
+import { Project } from '@src/@types';
 import { PriceOutput } from './price-output';
 
 interface Props {
-  methods: UseFormReturn<InvoiceFormType, any>;
-  invoice: InvoiceFormType;
+  methods: UseFormReturn<Project.InvoiceFormType, any>;
+  invoice: Project.InvoiceFormType;
 }
 
 const EditItemList = ({ methods, invoice }: Props) => {
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index a517db8..cf35730 100755
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,4 +1,3 @@
-export * from './@types';
 export * from './actions-btns';
 export * from './calendar';
 export * from './dropdown';
diff --git a/src/components/molecules/new-item-list.tsx b/src/components/molecules/new-item-list.tsx
index 6b12a32..e38821c 100644
--- a/src/components/molecules/new-item-list.tsx
+++ b/src/components/molecules/new-item-list.tsx
@@ -1,3 +1,4 @@
+import type { Project } from '@src/@types';
 import { calculateTotal, endsWith, useMedia } from '@src/lib';
 import clsx from 'clsx';
 import * as React from 'react';
@@ -9,11 +10,10 @@ import {
 } from 'react-hook-form';
 import { v4 as uuid } from 'uuid';
 import { FormErrorText, FormLabel } from '../atoms';
-import { InvoiceFormType } from './@types';
 import { PriceOutput } from './price-output';
 
 interface Props {
-  methods: UseFormReturn<InvoiceFormType, any>;
+  methods: UseFormReturn<Project.InvoiceFormType, any>;
 }
 
 const NewItemList = ({ methods }: Props) => {
diff --git a/src/components/molecules/query-result.tsx b/src/components/molecules/query-result.tsx
index 8980d94..515754e 100755
--- a/src/components/molecules/query-result.tsx
+++ b/src/components/molecules/query-result.tsx
@@ -1,4 +1,4 @@
-import type { IErrorResponse } from '@src/@types';
+import type { Project } from '@src/@types';
 import * as React from 'react';
 import { toast } from 'react-toastify';
 import { LoadingSpinner } from '../atoms';
@@ -25,7 +25,7 @@ const QueryResult = <T,>({
   children,
 }: Props<T>) => {
   if (error) {
-    (error as IErrorResponse).response.errors.forEach((err) => {
+    (error as Project.IErrorResponse).response.errors.forEach((err) => {
       if (err.message.includes('Authorised'))
         toast.error('Something unexpected happened. Please try again.');
       else toast.error(err.message);
diff --git a/src/components/organisms/content.tsx b/src/components/organisms/content.tsx
index a396ec3..d9d741e 100644
--- a/src/components/organisms/content.tsx
+++ b/src/components/organisms/content.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
-type Props = {};
+interface Props {}
 
 const MainContent = (props: Props) => {
   return (
diff --git a/src/components/organisms/edit-invoice.tsx b/src/components/organisms/edit-invoice.tsx
index 81b766a..864ff65 100644
--- a/src/components/organisms/edit-invoice.tsx
+++ b/src/components/organisms/edit-invoice.tsx
@@ -4,27 +4,27 @@ import {
   RHFSubmitHandler,
   calculateTotal,
   client,
+  constants,
   hasValues,
   terms,
   useGetInvoiceQuery,
   useGetInvoicesQuery,
   useUpdateInvoiceMutation,
   useZodForm,
-  constants,
 } from '@src/lib';
 import { useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
 import { useState } from 'react';
 import { FormProvider } from 'react-hook-form';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
 import { Text } from '../atoms';
 import { Calendar, Dropdown, EditItemList, FormField } from '../molecules';
+
 interface Props {}
 
 const EditInvoiceForm = (props: Props) => {
   const { invoiceId } = useParams();
-  const location = useLocation();
 
   const navigate = useNavigate();
   const queryClient = useQueryClient();
diff --git a/src/components/organisms/invoice-details.tsx b/src/components/organisms/invoice-details.tsx
index af0beb3..c3354b3 100644
--- a/src/components/organisms/invoice-details.tsx
+++ b/src/components/organisms/invoice-details.tsx
@@ -137,7 +137,7 @@ const InvoiceDetails = ({ invoice, updateStatus, openDeleteModal }: Props) => {
         </div>
 
         {isMobile ? (
-          <div className='sticky bottom-0 px-[2.4rem] py-9 dark:bg-brand-700'>
+          <div className='sticky bottom-0 bg-neutral-100 bg-100 px-[2.4rem] py-10 dark:bg-brand-700'>
             <InvoiceActions
               invoice={invoice}
               updateStatus={updateStatus}
diff --git a/src/components/organisms/login.tsx b/src/components/organisms/login.tsx
index 2427438..3be9c20 100644
--- a/src/components/organisms/login.tsx
+++ b/src/components/organisms/login.tsx
@@ -1,4 +1,4 @@
-import { IErrorResponse } from '@src/@types';
+import { Project } from '@src/@types';
 import { icons } from '@src/common';
 import { client, useLoginMutation, usePersist } from '@src/lib';
 import {
@@ -29,7 +29,7 @@ const LoginForm = (props: Props) => {
       toast.success('Login Successful');
       navigate('/');
     },
-    onError(e: IErrorResponse) {
+    onError(e: Project.IErrorResponse) {
       e.response.errors.forEach(async (error) => {
         toast.error(error.message);
       });
@@ -80,7 +80,7 @@ const LoginForm = (props: Props) => {
             name='password'
             label={'Password'}
             className='col-span-6'
-            autoComplete='new-password'
+            autoComplete='current-password'
           />
 
           <button
diff --git a/src/components/organisms/new-invoice.tsx b/src/components/organisms/new-invoice.tsx
index c5c550c..9199064 100644
--- a/src/components/organisms/new-invoice.tsx
+++ b/src/components/organisms/new-invoice.tsx
@@ -1,4 +1,4 @@
-import type { InvoiceStatus } from '@src/@types';
+import { Project } from '@src/@types';
 import {
   DateTime,
   InvoiceFormSchema,
@@ -22,7 +22,7 @@ import { Calendar, Dropdown, FormField, NewItemList } from '../molecules';
 interface Props {}
 
 const NewInvoiceForm = (props: Props) => {
-  const [status, setStatus] = useState<InvoiceStatus>('PENDING');
+  const [status, setStatus] = useState<Project.InvoiceStatus>('PENDING');
   const [selectedTerm, setSelectedTerm] = useState(terms[0].value);
   const [selectedDate, setSelectedDate] = useState(DateTime.TODAY);
 
@@ -265,17 +265,17 @@ const NewInvoiceForm = (props: Props) => {
         </div>
 
         <div className='sticky bottom-0 bg-neutral-100 bg-100 px-[2.4rem] py-10 dark:bg-brand-700'>
-          <section className='h-container flex items-center gap-6'>
+          <section className='h-container flex items-center gap-4'>
             <button
               type='button'
-              className='btn body-100 bg-neutral-300 px-8 py-6 font-bold text-brand-400 first:mr-auto'
+              className='btn body-100 bg-neutral-300 px-6 py-6 font-bold text-brand-400 first:mr-auto'
               onClick={() => void navigate(-1)}
             >
               Discard
             </button>
             <button
               type='submit'
-              className='btn body-100 bg-[#373B53] px-8 py-6 font-bold text-brand-300 hover:bg-brand-900'
+              className='btn body-100 bg-[#373B53] px-6 py-6 font-bold text-brand-300 hover:bg-brand-900'
               onClick={() => void setStatus('DRAFT')}
             >
               Save as draft
@@ -283,7 +283,7 @@ const NewInvoiceForm = (props: Props) => {
             <button
               type='submit'
               // disabled={!isSubmittable}
-              className='btn body-100 bg-brand-500 px-8 py-6 font-bold text-neutral-100 hover:bg-brand-200'
+              className='btn body-100 bg-brand-500 px-6 py-6 font-bold text-neutral-100 hover:bg-brand-200'
               onClick={() => void setStatus('PENDING')}
             >
               Save & Send
diff --git a/src/components/organisms/register.tsx b/src/components/organisms/register.tsx
index 36aa6b0..936a1f7 100644
--- a/src/components/organisms/register.tsx
+++ b/src/components/organisms/register.tsx
@@ -1,4 +1,4 @@
-import type { IErrorResponse } from '@src/@types';
+import type { Project } from '@src/@types';
 import {
   RHFSubmitHandler,
   RegisterFormSchema,
@@ -28,7 +28,7 @@ const RegisterForm = (props: Props) => {
       toast.success(data.register?.message);
       navigate('/login');
     },
-    onError(e: IErrorResponse) {
+    onError(e: Project.IErrorResponse) {
       e.response.errors.forEach(async (error) => {
         toast.error(error.message);
       });
diff --git a/src/components/templates/home.tsx b/src/components/templates/home.tsx
index 2f3d39c..989eef0 100644
--- a/src/components/templates/home.tsx
+++ b/src/components/templates/home.tsx
@@ -3,7 +3,7 @@ import {
   EnvelopeOpenIcon,
   InboxArrowDownIcon,
 } from '@heroicons/react/24/solid';
-import type { IStatus } from '@src/@types';
+import type { Project } from '@src/@types';
 import {
   client,
   datetime,
@@ -19,7 +19,7 @@ import { StatusButton, Text } from '../atoms';
 import { PageSEO } from './seo';
 import styles from './templates.module.css';
 
-const status: IStatus = ['PAID', 'PENDING', 'DRAFT'];
+const status: Project.IStatus = ['PAID', 'PENDING', 'DRAFT'];
 const HeaderCells = ['S/N', 'Due Date', 'Amount', 'Customer', 'Status'];
 
 interface Props {}
@@ -32,8 +32,8 @@ const HomeTemplate = (props: Props) => {
   const invoices = React.useMemo(() => {
     return (data?.invoices || []).sort((a, b) => {
       return (
-        status.indexOf(a.status as IStatus[number]) -
-        status.indexOf(b.status as IStatus[number])
+        status.indexOf(a.status as Project.IStatus[number]) -
+        status.indexOf(b.status as Project.IStatus[number])
       );
     });
   }, [data?.invoices]);
@@ -80,7 +80,7 @@ const HomeTemplate = (props: Props) => {
             <div className='flex flex-col gap-4 rounded-lg bg-neutral-100 p-4'>
               <div className='flex items-center justify-between gap-4'>
                 <Text as='h4' className='font-bold text-blue-950'>
-                  Total {pluralize('Invoice', invoices.length)}
+                  Total Invoices
                 </Text>
                 <div className='rounded-brand bg-green-100 p-4'>
                   <InboxArrowDownIcon className='aspect-square w-4 text-green-500' />
@@ -95,7 +95,7 @@ const HomeTemplate = (props: Props) => {
             <div className='flex flex-col gap-4 rounded-lg bg-neutral-100 p-4'>
               <div className='flex items-center justify-between gap-4'>
                 <Text as='h4' className='font-bold text-blue-950'>
-                  Pending {pluralize('Invoice', pendingInvoices.length)}
+                  Pending Invoices
                 </Text>
                 <div className='rounded-brand bg-violet-100 p-4'>
                   <EnvelopeOpenIcon className='aspect-square w-4 text-violet-500' />
@@ -110,7 +110,7 @@ const HomeTemplate = (props: Props) => {
             <div className='flex flex-col gap-4 rounded-lg bg-neutral-100 p-4'>
               <div className='flex items-center justify-between gap-4'>
                 <Text as='h4' className='font-bold text-blue-950'>
-                  Draft {pluralize('Invoice', draftInvoices.length)}
+                  Draft Invoices
                 </Text>
                 <div className='rounded-brand bg-blue-100 p-4'>
                   <InboxArrowDownIcon className='aspect-square w-4 text-blue-500' />
@@ -164,7 +164,10 @@ const HomeTemplate = (props: Props) => {
                     key={invoice?.id}
                     className='rounded-brand bg-neutral-100 p-[1.6rem] shadow-100 transition-[background,border] delay-0 duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:border hover:border-brand-500 active:border active:border-brand-500 dark:bg-brand-600 max-sx:pt-4'
                   >
-                    <blockquote className='grid grid-cols-2 grid-rows-3 items-end'>
+                    <Link
+                      to={`invoices/${String(invoice?.id)}`}
+                      className='grid grid-cols-2 grid-rows-3 items-end'
+                    >
                       <Text as='p' className='body-100 font-bold'>
                         <span className='text-brand-400'>#</span>
                         <span className='uppercase text-brand-900 dark:text-neutral-100'>
@@ -201,7 +204,7 @@ const HomeTemplate = (props: Props) => {
                         status={invoice?.status}
                         className='col-start-2 col-end-3 row-start-3 row-end-4 h-16 w-[11rem] flex-1 justify-self-end'
                       />
-                    </blockquote>
+                    </Link>
                   </li>
                 ))
               ) : (
diff --git a/src/components/templates/invoices.tsx b/src/components/templates/invoices.tsx
index e128c2b..5ea40ea 100755
--- a/src/components/templates/invoices.tsx
+++ b/src/components/templates/invoices.tsx
@@ -1,5 +1,5 @@
 import { Listbox, Transition } from '@headlessui/react';
-import type { IStatus } from '@src/@types';
+import type { Project } from '@src/@types';
 import { icons } from '@src/common';
 import {
   capitalize,
@@ -18,7 +18,7 @@ import { Link } from 'react-router-dom';
 import { StatusButton, Text } from '../atoms';
 import { PageSEO } from './seo';
 
-const status: IStatus = ['PAID', 'PENDING', 'DRAFT'];
+const status: Project.IStatus = ['PAID', 'PENDING', 'DRAFT'];
 
 interface Props {}
 
@@ -41,8 +41,8 @@ const InvoicesTemplate = (props: Props) => {
       })
     : invoices.sort((a, b) => {
         return (
-          status.indexOf(a.status as IStatus[number]) -
-          status.indexOf(b.status as IStatus[number])
+          status.indexOf(a.status as Project.IStatus[number]) -
+          status.indexOf(b.status as Project.IStatus[number])
         );
       });
 
@@ -53,6 +53,7 @@ const InvoicesTemplate = (props: Props) => {
         description={`The list of all the current user's invoices`}
         isArticle={false}
       />
+
       <header className='mt-20 flex items-center'>
         <div className='flex-1'>
           <Text as='h1'>Invoices</Text>
diff --git a/src/lib/client/graphql.ts b/src/lib/client/graphql.ts
index 9605a41..cd6c978 100644
--- a/src/lib/client/graphql.ts
+++ b/src/lib/client/graphql.ts
@@ -1,7 +1,7 @@
 import { GraphQLClient } from 'graphql-request';
 import { constants } from '../helpers';
 
-const endpoint = `${constants.BASE_URL}`; //  process?.env?.NEXT_PUBLIC_GRAPHQL_ENDPOINT ??
+const endpoint = `${constants.BASE_URL}/api/graphql`; //  process?.env?.NEXT_PUBLIC_GRAPHQL_ENDPOINT ??
 
 export const client = new GraphQLClient(endpoint, {
   credentials: 'include',
diff --git a/src/lib/context/auth.tsx b/src/lib/context/auth.tsx
index 182ad95..f36d415 100644
--- a/src/lib/context/auth.tsx
+++ b/src/lib/context/auth.tsx
@@ -1,4 +1,4 @@
-import { IUser } from '@src/@types';
+import type { Project } from '@src/@types';
 import { GraphQLClient } from 'graphql-request';
 import { produce } from 'immer';
 import {
@@ -13,7 +13,7 @@ import { client } from '../client';
 import { useGetUserQuery, useRefreshAuthQuery } from '../hooks';
 interface IState {
   token?: string;
-  user?: Partial<IUser>;
+  user?: Partial<Project.IUser>;
 }
 
 type IAction = 'auth/addUser' | 'auth/addToken' | 'auth/logout';
@@ -74,7 +74,7 @@ function useAuth(client: GraphQLClient) {
   return useReducer(reducer, initialState);
 }
 
-function authReducer(user?: Partial<IUser>, token?: string) {
+function authReducer(user?: Partial<Project.IUser>, token?: string) {
   return produce((draft: IState, action: IAction) => {
     switch (action) {
       case 'auth/addUser':
diff --git a/src/lib/helpers/utils.ts b/src/lib/helpers/utils.ts
index 26d65bb..c487e70 100755
--- a/src/lib/helpers/utils.ts
+++ b/src/lib/helpers/utils.ts
@@ -1,9 +1,4 @@
-import type {
-  DraftInvoice,
-  Invoice,
-  PaidInvoice,
-  PendingInvoice,
-} from '@src/@types';
+import type { Project } from '@src/@types';
 import {
   DehydrateOptions,
   QueryClient,
@@ -51,18 +46,22 @@ export function approximate(num = 0, fractionDigits = 0) {
   return Number.parseFloat(num.toFixed(fractionDigits));
 }
 
-export const isDraftInvoice = (invoice: Invoice): invoice is DraftInvoice => {
-  return invoice.status === 'DRAFT';
+export const isDraftInvoice = (
+  invoice?: Project.Invoice
+): invoice is Project.DraftInvoice => {
+  return invoice?.status === 'DRAFT';
 };
 
 export const isPendingInvoice = (
-  invoice: Invoice
-): invoice is PendingInvoice => {
-  return invoice.status === 'PENDING';
+  invoice?: Project.Invoice
+): invoice is Project.PendingInvoice => {
+  return invoice?.status === 'PENDING';
 };
 
-export const isPaidInvoice = (invoice: Invoice): invoice is PaidInvoice => {
-  return invoice.status === 'PAID';
+export const isPaidInvoice = (
+  invoice?: Project.Invoice
+): invoice is Project.PaidInvoice => {
+  return invoice?.status === 'PAID';
 };
 
 export function range(start: number, stop: number, step: number) {
diff --git a/src/lib/middleware/persist-login.tsx b/src/lib/middleware/persist-login.tsx
index e2ab531..fb4860d 100644
--- a/src/lib/middleware/persist-login.tsx
+++ b/src/lib/middleware/persist-login.tsx
@@ -1,4 +1,4 @@
-import { IErrorResponse } from '@src/@types';
+import type { Project } from '@src/@types';
 import { Loader } from '@src/components';
 import * as React from 'react';
 import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
@@ -31,7 +31,7 @@ const PersistLogin = (props: Props) => {
         setTrueSuccess(true);
         dispatch('auth/addToken');
       },
-      onError(err: IErrorResponse) {
+      onError(err: Project.IErrorResponse) {
         err.response.errors.forEach(async (error) => {
           toast.error(error.message);
 
@@ -66,7 +66,7 @@ const PersistLogin = (props: Props) => {
       onSuccess: async (data) => {
         dispatch('auth/addUser');
       },
-      onError(err: IErrorResponse) {
+      onError(err: Project.IErrorResponse) {
         err.response.errors.forEach(async (error) => {
           toast.error(error.message);
 
diff --git a/src/routes/invoices/edit.tsx b/src/routes/invoices/edit.tsx
index 224232f..b11ba94 100644
--- a/src/routes/invoices/edit.tsx
+++ b/src/routes/invoices/edit.tsx
@@ -2,7 +2,7 @@ import { EditInvoiceForm, InvoiceFormTemplate } from '@src/components';
 import { client, useGetInvoiceQuery } from '@src/lib';
 import { useParams } from 'react-router-dom';
 
-type Props = {};
+interface Props {}
 
 const EditInvoiceRoute = (props: Props) => {
   const { invoiceId } = useParams();
diff --git a/src/routes/invoices/id.tsx b/src/routes/invoices/id.tsx
index 4d53ff0..8ecfa7f 100644
--- a/src/routes/invoices/id.tsx
+++ b/src/routes/invoices/id.tsx
@@ -1,6 +1,6 @@
 import { InvoiceTemplate } from '@src/components';
 
-type Props = {};
+interface Props {}
 
 const InvoiceRoute = (props: Props) => {
   return <InvoiceTemplate />;
diff --git a/src/routes/invoices/new.tsx b/src/routes/invoices/new.tsx
index f7bef73..f9e1dd7 100644
--- a/src/routes/invoices/new.tsx
+++ b/src/routes/invoices/new.tsx
@@ -1,6 +1,6 @@
 import { InvoiceFormTemplate, NewInvoiceForm } from '@src/components';
 
-type Props = {};
+interface Props {}
 
 const NewInvoiceRoute = (props: Props) => {
   return (
diff --git a/tsconfig.json b/tsconfig.json
index 6533735..984c2ae 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2015",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -22,6 +22,6 @@
       "@src/*": ["./src/*"]
     }
   },
-  "include": ["./src"],
+  "include": ["./src", "**/*.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }