diff --git a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
index 34c7b48d..1c18f50d 100644
--- a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
+++ b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
@@ -1,5 +1,7 @@
-import { Employee } from '../../People.interface';
+import { Option } from '@app/types/common';
+import { Employee, PeopleStatus } from '../../People.interface';
 
 export interface PeopleTableProps {
   people: Employee[];
+  currentTab?: Option<keyof typeof PeopleStatus>;
 }
diff --git a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
index b1306769..31cc4568 100644
--- a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
+++ b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
@@ -7,10 +7,16 @@ import Link from 'next/link';
 import { employeeMenuOptions } from '../../People.utils';
 import { PeopleTableProps } from './PeopleTable.interface';
 import { Avatar } from '@app/components/common/Avatar';
-import { getInitials } from '@app/utils';
+import { generateClassNames, getInitials } from '@app/utils';
 import { formatDate } from '@app/utils';
+import { PeopleStatus } from '../../People.interface';
+import { Button } from '@app/components/common/Button';
+
+export const PeopleTable: FC<PeopleTableProps> = ({ people, currentTab }) => {
+  const draft = currentTab?.id === PeopleStatus.drafts;
+  const deactivated = currentTab?.id === PeopleStatus.deactivated;
+  const active = currentTab?.id === PeopleStatus.active;
 
-export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
   return (
     <div className="flow-root">
       <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
@@ -18,28 +24,57 @@ export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
           <table className="min-w-full divide-y divide-navy-200 border-b border-navy-200">
             <thead className="text-left uppercase text-navy-500">
               <tr>
-                <th scope="col" className="py-3.5 pl-4 pr-3 text-xs font-medium sm:pl-4">
+                <th
+                  scope="col"
+                  className={generateClassNames('py-3.5 pl-4 pr-3 text-xs font-medium sm:pl-4', {
+                    'w-[400px]': deactivated,
+                  })}
+                >
                   Employee
                 </th>
-                <th scope="col" className="px-3 py-5 text-xs font-medium">
+                <th
+                  scope="col"
+                  className={generateClassNames('px-3 py-5 text-xs font-medium', {
+                    'w-[320px]': deactivated,
+                  })}
+                >
                   Ladder
                 </th>
-                <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
+                <th
+                  scope="col"
+                  className={generateClassNames('w-[160px] px-3 py-5 text-right text-xs font-medium', {
+                    'w-[320px]': deactivated,
+                  })}
+                >
                   Current Band
                 </th>
-                <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
-                  Active Goal
-                </th>
-                <th scope="col" className="w-[248px] px-3 py-5 text-center text-xs font-medium">
-                  Goal Progress
-                </th>
-                <th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
-                  Pending actions
-                </th>
-                <th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
-                  Last activity date
-                </th>
-                <th scope="col" className="relative px-4 py-3.5 sm:pr-0">
+                {draft && (
+                  <th scope="col" className="w-[160px] py-5 pl-14 pr-3 text-left text-xs font-medium">
+                    Action
+                  </th>
+                )}
+                {active && (
+                  <>
+                    <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
+                      Active Goal
+                    </th>
+                    <th scope="col" className="w-[248px] px-3 py-5 text-center text-xs font-medium">
+                      Goal Progress
+                    </th>
+                    <th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
+                      Pending actions
+                    </th>
+                    <th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
+                      Last activity date
+                    </th>
+                  </>
+                )}
+                <th
+                  scope="col"
+                  className={generateClassNames('relative px-4 py-3.5 sm:pr-0', {
+                    'w-[320px]': deactivated,
+                  })}
+                >
                   <span className="sr-only">Edit</span>
                 </th>
               </tr>
@@ -80,61 +115,86 @@ export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
                       ))}
                     </div>
                   </td>
-                  <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
-                    <div className="flex flex-col items-end gap-y-4">
-                      {person?.laddersDetails?.map((ladder) => (
-                        <div key={ladder.ladderName} className="mr-2 h-4 w-4 text-navy-700">
-                          {ladder?.activeGoal && <CheckMarkIcon className="text-green-600" width={20} height={20} />}
+                  {active && (
+                    <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
+                      <div className="flex flex-col items-end gap-y-4">
+                        {person?.laddersDetails?.map((ladder) => (
+                          <div key={ladder.ladderName} className="mr-2 h-4 w-4 text-navy-700">
+                            {ladder?.activeGoal && <CheckMarkIcon className="text-green-600" width={20} height={20} />}
+                          </div>
+                        ))}
+                      </div>
+                    </td>
+                  )}
+                  {draft && (
+                    <td className="text-gray-500 whitespace-nowrap py-5 pl-14 pr-10 text-sm">
+                      <div className="flex">
+                        <Button variant="border" styleType="natural" className="mr-4">
+                          Resume
+                        </Button>
+                        <Button variant="border" styleType="natural">
+                          Activate employee
+                        </Button>
+                      </div>
+                    </td>
+                  )}
+                  {active && (
+                    <>
+                      <td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
+                        <div className="flex flex-col gap-y-4">
+                          {person?.laddersDetails?.map((ladder) => (
+                            <div key={ladder.ladderName} className="flex h-4 items-center text-navy-700">
+                              {ladder.activeGoal && (
+                                <>
+                                  <div className="mr-3 w-full rounded-full bg-navy-300">
+                                    <div
+                                      className="h-2 rounded-full bg-blue-800"
+                                      style={{ width: `${ladder.goalProgress}%` }}
+                                    />
+                                  </div>
+                                  <Typography variant="body-s/medium" className="text-navy-600">
+                                    {ladder.goalProgress}%
+                                  </Typography>
+                                </>
+                              )}
+                            </div>
+                          ))}
                         </div>
-                      ))}
-                    </div>
-                  </td>
-                  <td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
-                    <div className="flex flex-col gap-y-4">
-                      {person?.laddersDetails?.map((ladder) => (
-                        <div key={ladder.ladderName} className="flex h-4 items-center text-navy-700">
-                          {ladder.activeGoal && (
-                            <>
-                              <div className="mr-3 w-full rounded-full bg-navy-300">
-                                <div
-                                  className="h-2 rounded-full bg-blue-800"
-                                  style={{ width: `${ladder.goalProgress}%` }}
-                                />
+                      </td>
+                      <td className="text-gray-500 flex flex-col items-center whitespace-nowrap px-3 py-8 text-sm">
+                        {person?.laddersDetails?.map((details) => (
+                          <div
+                            key={details.ladderName}
+                            className="flex h-8 w-8 items-center justify-center text-navy-700"
+                          >
+                            {details.activeGoal && (
+                              <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800">
+                                <Typography variant="body-s/semibold" className="text-white">
+                                  {details.pendingActions}
+                                </Typography>
                               </div>
-                              <Typography variant="body-s/medium" className="text-navy-600">
-                                {ladder.goalProgress}%
+                            )}
+                          </div>
+                        ))}
+                      </td>
+                      <td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
+                        {person?.laddersDetails?.map((details) => (
+                          <div key={details.ladderName} className="flex h-8 w-8 items-center">
+                            {details.lastActivityDate && (
+                              <Typography variant="body-s/regular" className="text-navy-700">
+                                {formatDate(details.lastActivityDate)}
                               </Typography>
-                            </>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </td>
-                  <td className="text-gray-500 flex flex-col items-center whitespace-nowrap px-3 py-8 text-sm">
-                    {person?.laddersDetails?.map((details) => (
-                      <div key={details.ladderName} className="flex h-8 w-8 items-center justify-center text-navy-700">
-                        {details.activeGoal && (
-                          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800">
-                            <Typography variant="body-s/semibold" className="text-white">
-                              {details.pendingActions}
-                            </Typography>
+                            )}
                           </div>
-                        )}
-                      </div>
-                    ))}
-                  </td>
-                  <td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
-                    {person?.laddersDetails?.map((details) => (
-                      <div key={details.ladderName} className="flex h-8 w-8 items-center">
-                        {details.lastActivityDate && (
-                          <Typography variant="body-s/regular" className="text-navy-700">
-                            {formatDate(details.lastActivityDate)}
-                          </Typography>
-                        )}
-                      </div>
-                    ))}
-                  </td>
-                  <td className="relative whitespace-nowrap py-5 text-sm font-medium">
+                        ))}
+                      </td>
+                    </>
+                  )}
+                  <td
+                    className={generateClassNames('relative whitespace-nowrap py-5 text-sm', {
+                      'flex justify-end': deactivated,
+                    })}
+                  >
                     {/* TODO: Create new component Dropdown Menu */}
                     <Menu as="div" className="relative">
                       <MenuButton>
diff --git a/frontend/src/components/pages/People/People.hook.ts b/frontend/src/components/pages/People/People.hook.ts
index f2c2ab73..4862a128 100644
--- a/frontend/src/components/pages/People/People.hook.ts
+++ b/frontend/src/components/pages/People/People.hook.ts
@@ -18,10 +18,10 @@ export const usePeople = () => {
     },
   });
 
-  const [tab, setTab] = useState<Option | undefined>();
+  const [tab, setTab] = useState<Option<keyof typeof PeopleStatus> | undefined>();
   const [fetchedPeople, setFetchedPeople] = useState<PeopleDetails>();
   const [filteredPeople, setFilteredPeople] = useState<Employee[]>([]);
-  const [tabsData, setTabsData] = useState<Option[]>([]);
+  const [tabsData, setTabsData] = useState<Option<keyof typeof PeopleStatus>[]>([]);
   const { setParams } = useQueryParams();
   const values = form.watch();
 
@@ -36,9 +36,9 @@ export const usePeople = () => {
   // INFO: set all available tabs
   useEffect(() => {
     if (fetchedPeople) {
-      const tabs: Option[] = [
+      const tabs: Option<keyof typeof PeopleStatus>[] = [
         { name: `${PeopleStatus.active} (${fetchedPeople.active})`, id: PeopleStatus.active },
-        { name: `${PeopleStatus.draft} (${fetchedPeople.draft})`, id: PeopleStatus.draft },
+        { name: `${PeopleStatus.drafts} (${fetchedPeople.draft})`, id: PeopleStatus.drafts },
         { name: `${PeopleStatus.deactivated} (${fetchedPeople.deactivated})`, id: PeopleStatus.deactivated },
       ];
       setTabsData(tabs);
@@ -60,7 +60,7 @@ export const usePeople = () => {
   // INFO: set people based on filters
   useEffect(() => {
     const filteredPeople = fetchedPeople?.results.filter(
-      (person) => person.status.toLocaleLowerCase() === tab?.id.toLocaleLowerCase(),
+      (person) => person?.status?.toLocaleLowerCase() === tab?.id.toLocaleLowerCase(),
     );
 
     if (filteredPeople) {
diff --git a/frontend/src/components/pages/People/People.interface.ts b/frontend/src/components/pages/People/People.interface.ts
index 8f72a57f..e6588c94 100644
--- a/frontend/src/components/pages/People/People.interface.ts
+++ b/frontend/src/components/pages/People/People.interface.ts
@@ -12,7 +12,7 @@ export interface PeopleTableForm {
 
 export const PeopleStatus = {
   active: 'active',
-  draft: 'draft',
+  drafts: 'drafts',
   deactivated: 'deactivated',
 } as const;
 
diff --git a/frontend/src/components/pages/People/People.tsx b/frontend/src/components/pages/People/People.tsx
index 8cea9a58..6b61d381 100644
--- a/frontend/src/components/pages/People/People.tsx
+++ b/frontend/src/components/pages/People/People.tsx
@@ -43,7 +43,7 @@ export const People = () => {
               />
             </div>
           </div>
-          <PeopleTable people={filteredPeople} />
+          <PeopleTable currentTab={tab} people={filteredPeople} />
         </div>
       </div>
     </FormProvider>
diff --git a/frontend/src/components/pages/People/People.utils.ts b/frontend/src/components/pages/People/People.utils.ts
index 6c4cbb07..d105fdfd 100644
--- a/frontend/src/components/pages/People/People.utils.ts
+++ b/frontend/src/components/pages/People/People.utils.ts
@@ -141,7 +141,7 @@ export const PEOPLE_DETAILS = {
           pendingActions: 2,
         },
       ],
-      status: PeopleStatus.draft,
+      status: PeopleStatus.drafts,
     },
     {
       id: 33,
@@ -156,7 +156,7 @@ export const PEOPLE_DETAILS = {
           pendingActions: 4,
         },
       ],
-      status: PeopleStatus.draft,
+      status: PeopleStatus.drafts,
     },
     {
       id: 433,
@@ -171,7 +171,7 @@ export const PEOPLE_DETAILS = {
           pendingActions: 2,
         },
       ],
-      status: PeopleStatus.draft,
+      status: PeopleStatus.drafts,
     },
     {
       id: 42243,
@@ -186,7 +186,7 @@ export const PEOPLE_DETAILS = {
           pendingActions: 2,
         },
       ],
-      status: PeopleStatus.draft,
+      status: PeopleStatus.drafts,
     },
   ],
   active: 11,
diff --git a/frontend/src/types/common.ts b/frontend/src/types/common.ts
index 51767071..a5014d49 100644
--- a/frontend/src/types/common.ts
+++ b/frontend/src/types/common.ts
@@ -3,7 +3,7 @@ export interface Point {
   y: number;
 }
 
-export interface Option {
-  id: string;
+export interface Option<T extends string = string> {
+  id: T;
   name: string;
 }