diff --git a/apps/agent/src/Couriers/ListCouriers.tsx b/apps/agent/src/Couriers/ListCouriers.tsx
index a3fdd98f..930e02e1 100644
--- a/apps/agent/src/Couriers/ListCouriers.tsx
+++ b/apps/agent/src/Couriers/ListCouriers.tsx
@@ -26,7 +26,7 @@ export const ListCouriers = () => {
       <List
         data={couriers}
         loading={loading}
-        renderItem={(courier) => (
+        renderItem={(courier: any) => (
           <CourierOverviewCard key={courier.id} courier={courier} />
         )}
       />
diff --git a/apps/agent/src/Orders/ListOrders.tsx b/apps/agent/src/Orders/ListOrders.tsx
index 6c755844..134d6870 100644
--- a/apps/agent/src/Orders/ListOrders.tsx
+++ b/apps/agent/src/Orders/ListOrders.tsx
@@ -21,7 +21,7 @@ export const ListOrders = () => {
         data={orders}
         loading={loading}
         cols={4}
-        renderItem={(order) => (
+        renderItem={(order: any) => (
           <OrderOverviewCard key={order.id} order={order} />
         )}
       />
diff --git a/apps/agent/src/Orders/OrderProcessingForm/DeliveryDetails.tsx b/apps/agent/src/Orders/OrderProcessingForm/DeliveryDetails.tsx
index cd272044..2c43984e 100644
--- a/apps/agent/src/Orders/OrderProcessingForm/DeliveryDetails.tsx
+++ b/apps/agent/src/Orders/OrderProcessingForm/DeliveryDetails.tsx
@@ -156,7 +156,9 @@ export const DeliveryDetails = ({ navigateToNextStep }) => {
             </label>
             <Select
               options={["Custom Market", "Souq Konyo Konyo", "Souq Munuki"]}
-              title="Pickup Location"
+              label="Pickup Location"
+              errors={errors}
+              register={register}
               {...register("pickupLocation")}
             />
             {errors.pickupLocation?.message && (
diff --git a/apps/agent/tailwind.config.ts b/apps/agent/tailwind.config.ts
index 39faeb3b..2d896146 100644
--- a/apps/agent/tailwind.config.ts
+++ b/apps/agent/tailwind.config.ts
@@ -1,11 +1,10 @@
 import type { Config } from 'tailwindcss';
-
-const baseConfig: Config = require('@sahil/configs/tailwind/tailwind.config');
+import baseConfig from '@sahil/configs/tailwind/tailwind.config';
 
 const extendedConfig: Config = {
-  ...baseConfig,
+  ...baseConfig as Config,
   content: [
-    ...baseConfig.content,
+    ...(baseConfig.content as Array<string>),
     './src/Suppliers/**/**.{js,ts,jsx,tsx,mdx}',
     './src/Businesses/**/*.{js,ts,tsx,tsx,mdx}',
     './src/Couriers/**/*.{js,ts,tsx,tsx,mdx}',
diff --git a/apps/client/tailwind.config.ts b/apps/client/tailwind.config.ts
index 1fe862c2..2cf00b02 100644
--- a/apps/client/tailwind.config.ts
+++ b/apps/client/tailwind.config.ts
@@ -1,10 +1,10 @@
 import type { Config } from 'tailwindcss';
-import baseConfig from '@sahil/configs/tailwind/tailwind.config'
+import baseConfig from '@sahil/configs/tailwind/tailwind.config';
 
 const extendedConfig: Config = {
   ...baseConfig,
   content: [
-    ...baseConfig.content as Array<string>,
+    ...(baseConfig.content as Array<string>),
     './src/Addresses/**/**.{js,ts,jsx,tsx,mdx}',
     './src/Maps/**/*.{js,ts,tsx,tsx,mdx}',
     './src/Payments/**/*.{js,ts,tsx,tsx,mdx}',
@@ -42,4 +42,4 @@ const extendedConfig: Config = {
   },
 };
 
-module.exports = extendedConfig;
\ No newline at end of file
+module.exports = extendedConfig;
diff --git a/packages/lib/hooks/payments.ts b/packages/lib/hooks/payments.ts
index 17eab0be..08f5816b 100644
--- a/packages/lib/hooks/payments.ts
+++ b/packages/lib/hooks/payments.ts
@@ -1,24 +1,28 @@
-import { useMutation, useQuery } from "@apollo/client";
-import { GET_PAYMENT_STATUS, GET_PREAPPROVAL_STATUS, REQUEST_TO_PAY_STATUS } from "../graphql/queries/payments";
-import { REQUEST_TO_PAY } from "../graphql/mutations/payments";
+import { useMutation, useQuery } from '@apollo/client';
+import {
+  GET_PAYMENT_STATUS,
+  GET_PREAPPROVAL_STATUS,
+  REQUEST_TO_PAY_STATUS,
+} from '../graphql/queries/payments';
+import { REQUEST_TO_PAY } from '../graphql/mutations/payments';
 
 export const useGetPaymentStatus = () => {
-    const { error, data, loading } = useQuery(GET_PAYMENT_STATUS);
-    return { error, data: data, loading };
+  const { error, data, loading } = useQuery(GET_PAYMENT_STATUS);
+  return { error, data: data, loading };
 };
 
 export const useGetPreApprovalStatus = () => {
-    const { error, data, loading } = useQuery(GET_PREAPPROVAL_STATUS);
-    return { error, data: data, loading };
+  const { error, data, loading } = useQuery(GET_PREAPPROVAL_STATUS);
+  return { error, data: data, loading };
 };
 
-export const useGetRequesTtoPayStatus = () => {
-    const { error, data, loading } = useQuery(REQUEST_TO_PAY_STATUS);
-    return { error, data: data, loading };
+export const useGetRequestToPayStatus = () => {
+  const { error, data, loading } = useQuery(REQUEST_TO_PAY_STATUS);
+  return { error, data: data, loading };
 };
 
-export const useRequesTtoPay = () => {
-    const [requesTtoPay, { data, loading, error }] = useMutation(REQUEST_TO_PAY);
+export const useRequestToPay = () => {
+  const [requestToPay, { data, loading, error }] = useMutation(REQUEST_TO_PAY);
 
-    return {loading, requesTtoPay, error};
-}
\ No newline at end of file
+  return { loading,  requestToPay, error };
+};
diff --git a/packages/ui/components/Navbar.tsx b/packages/ui/components/Navbar.tsx
index c1ae358c..17bcca82 100644
--- a/packages/ui/components/Navbar.tsx
+++ b/packages/ui/components/Navbar.tsx
@@ -1,8 +1,8 @@
-import Image from "next/image";
-import { FC } from "react";
-import Link from "next/link";
-import { Icon } from "./Icon";
-import type { IconType } from "react-icons";
+import Image, { StaticImageData } from 'next/image';
+import { FC } from 'react';
+import Link from 'next/link';
+import { Icon } from './Icon';
+import type { IconType } from 'react-icons';
 
 type NavbarLink = {
   name: string;
@@ -12,51 +12,51 @@ type NavbarLink = {
 
 export type NavbarProps = {
   links: NavbarLink[];
-  logo?: string;
+  logo?: StaticImageData | string;
   header?: string;
 };
 
-export const Navbar: FC<NavbarProps> = ({ links, logo, header = "Sahil"}) => {
+export const Navbar: FC<NavbarProps> = ({ links, logo, header = 'Sahil' }) => {
   return (
-    <header className="navbar bg-primary text-white shadow-sm">
-      <div className="navbar-start">
+    <header className='navbar bg-primary text-white shadow-sm'>
+      <div className='navbar-start'>
         <Link
-          href="/"
-          className="font-semibold flex items-center text-base lg:text-lg"
+          href='/'
+          className='font-semibold flex items-center text-base lg:text-lg'
         >
           {logo && (
             <Image
               src={logo}
-              alt="Sahil"
-              loading="eager"
-              className="h-10 w-8 object-contain md:w-16"
+              alt='Sahil'
+              loading='eager'
+              className='h-10 w-8 object-contain md:w-16'
             />
           )}
           {header}
         </Link>
       </div>
-      <nav className="navbar-end">
-        <ul className="menu menu-horizontal px-1 hidden lg:flex lg:items-center lg:gap-4">
+      <nav className='navbar-end'>
+        <ul className='menu menu-horizontal px-1 hidden lg:flex lg:items-center lg:gap-4'>
           {links.map(({ name, href, icon }) => (
             <li key={name}>
               <Link
                 href={href}
-                className="text-base font-semibold transition-[0.4s] hover:text-green-dark"
+                className='text-base font-semibold transition-[0.4s] hover:text-green-dark'
               >
                 {icon && <Icon icon={icon} />} {name}
               </Link>
             </li>
           ))}
         </ul>
-        <div className="dropdown dropdown-end">
+        <div className='dropdown dropdown-end'>
           <ul
             tabIndex={0}
-            className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
+            className='mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52'
           >
             <li>
-              <a className="justify-between">
+              <a className='justify-between'>
                 Profile
-                <span className="badge">New</span>
+                <span className='badge'>New</span>
               </a>
             </li>
             <li>
@@ -66,31 +66,31 @@ export const Navbar: FC<NavbarProps> = ({ links, logo, header = "Sahil"}) => {
               <a>Logout</a>
             </li>
           </ul>
-          <label tabIndex={0} className="btn btn-ghost lg:hidden">
+          <label tabIndex={0} className='btn btn-ghost lg:hidden'>
             <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
+              xmlns='http://www.w3.org/2000/svg'
+              width='24'
+              height='24'
+              viewBox='0 0 24 24'
             >
               <path
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1.5"
-                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                fill='none'
+                stroke='currentColor'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth='1.5'
+                d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'
               />
             </svg>
           </label>
           <ul
             tabIndex={0}
-            className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+            className='menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52'
           >
             {links.map(({ name, href }) => {
               return (
                 <li key={name}>
-                  <Link href={href} className="text-base font-semibold">
+                  <Link href={href} className='text-base font-semibold'>
                     {name}
                   </Link>
                 </li>