diff --git a/__tests__/Unit/Components/Tabs/Tab.test.tsx b/__tests__/Unit/Components/Tabs/Tab.test.tsx
index f9a09fd51..8f2d42118 100644
--- a/__tests__/Unit/Components/Tabs/Tab.test.tsx
+++ b/__tests__/Unit/Components/Tabs/Tab.test.tsx
@@ -1,7 +1,10 @@
 import Tabs from '@/components/Tabs';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { Tab, TABS } from '@/interfaces/task.type';
 import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants';
+import { renderWithRouter } from '@/test_utils/createMockRouter';
+import { store } from '@/app/store';
+import { Provider } from 'react-redux';
 
 function changeName(name: string) {
     if (name === COMPLETED) {
@@ -15,55 +18,113 @@ function changeName(name: string) {
 
 describe('Tabs Component', () => {
     const onSelectMock = jest.fn();
+    const mockTasksCount = {
+        ASSIGNED: 2,
+        COMPLETED: 4,
+        AVAILABLE: 10,
+        IN_PROGRESS: 0,
+        NEEDS_REVIEW: 0,
+        IN_REVIEW: 0,
+        VERIFIED: 0,
+        MERGED: 0,
+    };
 
-    it('should render all the buttons', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.ASSIGNED}
-                onSelect={onSelectMock}
-            />
+    test('should render all the buttons', () => {
+        const { queryAllByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const presentTabs = screen.queryAllByRole('button');
+        const presentTabs = queryAllByRole('button');
         expect(presentTabs.length).toBe(TABS.length);
     });
 
-    it('check if selectTab() is called with right key', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.ASSIGNED}
-                onSelect={onSelectMock}
-            />
+    test('check if selectTab() is called with right key', () => {
+        const { getByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const assignedBtn = screen.getByRole('button', { name: /ASSIGNED/i });
+        const assignedBtn = getByRole('button', { name: /ASSIGNED/i });
         fireEvent.click(assignedBtn);
         expect(onSelectMock).toHaveBeenCalledWith(Tab.ASSIGNED);
     });
 
-    it('Check if correct button is selected', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.COMPLETED}
-                onSelect={onSelectMock}
-            />
+    test('Check if correct button is selected', () => {
+        const { getByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.COMPLETED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const completedBtn = screen.getByRole('button', { name: /DONE/i });
+        const completedBtn = getByRole('button', { name: /DONE/i });
         expect(completedBtn).toHaveClass('active');
     });
 
-    it('should render all tabs passed with correct text', () => {
-        render(
-            <Tabs
-                tabs={TABS}
-                activeTab={Tab.ASSIGNED}
-                onSelect={onSelectMock}
-            />
+    test('should render all tabs passed with correct text', () => {
+        const { getAllByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>
         );
-        const presentTabs = screen.getAllByRole('button');
+        const presentTabs = getAllByRole('button');
         for (let i = 0; i < presentTabs.length; i++) {
             expect(presentTabs[i].textContent).toBe(changeName(TABS[i]));
         }
     });
+
+    test('should change Tabs design and show tasks count if feature flag is on', () => {
+        const { getByRole, getAllByRole } = renderWithRouter(
+            <Provider store={store()}>
+                <Tabs
+                    tabs={TABS}
+                    activeTab={Tab.ASSIGNED}
+                    onSelect={onSelectMock}
+                    tasksCount={mockTasksCount}
+                />
+            </Provider>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+
+        const presentTabs = getAllByRole('button');
+
+        // tasks count is rendered correctly on screen
+        for (let i = 0; i < presentTabs.length; i++) {
+            expect(presentTabs[i].textContent).toBe(
+                `${changeName(TABS[i])} (${mockTasksCount[TABS[i]]})`
+            );
+        }
+
+        // feature flag's css is applied correctly
+        for (let i = 0; i < presentTabs.length; i++) {
+            expect(presentTabs[i]).toHaveClass('featureFlagTabButton');
+        }
+
+        // active tab's feature flag css is applied correctly
+        const assignedBtn = getByRole('button', {
+            name: /assigned/i,
+        });
+        expect(assignedBtn).toHaveClass('featureFlagActiveTab');
+    });
 });
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 490fe5b23..acaa0a832 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,15 +1,16 @@
 .header {
+    padding-top: 0.6rem;
     display: flex;
     justify-content: center;
-    align-items: center;
     flex-wrap: wrap;
-    padding-top: 0.625rem;
+    align-items: center;
+    border-bottom: 1px solid var(--toastify-text-color-light);
 }
 
 .link {
-    padding: 0.625rem;
+    padding: 0.6rem;
     text-decoration: none;
-    font-weight: bold;
+    font-weight: 700;
     color: #041484;
     cursor: pointer;
     background: none;
diff --git a/src/components/ProgressForm/ProgressForm.module.scss b/src/components/ProgressForm/ProgressForm.module.scss
index b6a0c0b62..429b238e0 100644
--- a/src/components/ProgressForm/ProgressForm.module.scss
+++ b/src/components/ProgressForm/ProgressForm.module.scss
@@ -11,16 +11,6 @@ $similar-margin: $base-unit * 8;
 $section-padding-top-bottom: $base-unit * 30;
 $section-padding-left-right: $base-unit * 25;
 
-.banner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    width: 100%;
-    margin-top: $diff-margin;
-    margin-left: 8.2rem;
-}
-
 .mark {
     color: $color-red;
     text-decoration: underline;
diff --git a/src/components/ProgressForm/ProgressHeader.tsx b/src/components/ProgressForm/ProgressHeader.tsx
index af6940560..92e3866f7 100644
--- a/src/components/ProgressForm/ProgressHeader.tsx
+++ b/src/components/ProgressForm/ProgressHeader.tsx
@@ -7,17 +7,19 @@ const ProgressHeader: FC<progressHeaderProps> = ({
     updateType,
 }) => {
     return (
-        <div className={styles.progressBanner}>
-            <p className={styles.bannerPara}>
-                You have
-                <span className={styles.totalMissedUpdates}>
-                    {totalMissedUpdates} missed
-                </span>
-                {updateType} updates
-            </p>
-            <p className={styles.bannerPara}>
-                Let&apos;s try to avoid having zero days
-            </p>
+        <div className={styles.bannerContainer}>
+            <div className={styles.progressBanner}>
+                <p className={styles.bannerPara}>
+                    You have
+                    <span className={styles.totalMissedUpdates}>
+                        {totalMissedUpdates} missed
+                    </span>
+                    {updateType} updates
+                </p>
+                <p className={styles.bannerPara}>
+                    Let&apos;s try to avoid having zero days
+                </p>
+            </div>
         </div>
     );
 };
diff --git a/src/components/ProgressForm/ProgressLayout.tsx b/src/components/ProgressForm/ProgressLayout.tsx
index 6537ba17c..7aeee00bf 100644
--- a/src/components/ProgressForm/ProgressLayout.tsx
+++ b/src/components/ProgressForm/ProgressLayout.tsx
@@ -20,12 +20,10 @@ const ProgressLayout: FC = () => {
     return (
         <>
             <NavBar />
-            <div className={styles.banner}>
-                <ProgressHeader
-                    totalMissedUpdates={totalMissedUpdates}
-                    updateType="Progress"
-                />
-            </div>
+            <ProgressHeader
+                totalMissedUpdates={totalMissedUpdates}
+                updateType="Progress"
+            />
             <section className={styles.container}>
                 <h1 className={styles.formHeading}>Task Updates</h1>
                 <h2 className={styles.date}>On {getCurrentDate()}</h2>
diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss
index 93badc756..6ea7c2ded 100644
--- a/src/components/Tabs/Tabs.module.scss
+++ b/src/components/Tabs/Tabs.module.scss
@@ -1,18 +1,51 @@
 $theme-grey: #d4d4d5;
+$theme-grey-light: #f1f1f5;
+$gray-shade-color: #808080;
+$gray-shade-color2: #5c5b5b;
+$theme-dark-grey: #a1a5b7;
+$theme-pink: #e30062;
 
 .tabButton {
+    border: none;
+    border-bottom: 1.8px solid $theme-grey;
+    font-size: 0.85rem;
+    font-weight: bold;
+    color: $gray-shade-color;
+    background: var(--toastify-color-light);
+    padding: 0.45rem 0.8rem;
+    border-radius: 0.2rem 0.2rem 0 0;
+    cursor: pointer;
+}
+
+.tabButton:hover {
+    color: $gray-shade-color2;
+}
+
+.tabButton:active {
+    background-color: $theme-grey-light;
+}
+
+.active {
+    color: var(--toastify-color-dark);
+    border: 1.8px solid $theme-grey;
+    border-bottom: none;
+    background: var(--toastify-color-light);
+}
+
+.featureFlagTabButton {
     background: white;
     border: none;
     padding: 12px 8px 8px;
     font-size: 0.8em;
-    border-radius: 5px 5px 0 0;
-    border-bottom: 1px solid $theme-grey;
+    border: none;
     cursor: pointer;
+    color: $theme-dark-grey;
 }
 
-.active {
+.featureFlagActiveTab {
     font-weight: bold;
-    border: 1px solid $theme-grey;
-    border-bottom: none;
     background: white;
+    border: none;
+    border-bottom: 3px solid $theme-pink;
+    color: black;
 }
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index a6fceb1d7..67f99e895 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -1,11 +1,13 @@
 import styles from '@/components/Tabs/Tabs.module.scss';
-import { Tab } from '@/interfaces/task.type';
 import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants';
+import { Tab, tasksCountObject } from '@/interfaces/task.type';
+import { useRouter } from 'next/router';
 
 type TabsProps = {
     tabs: Tab[];
     onSelect: (tab: Tab) => void;
     activeTab: Tab;
+    tasksCount: tasksCountObject;
 };
 function changeName(name: string) {
     if (name === COMPLETED) {
@@ -17,20 +19,38 @@ function changeName(name: string) {
     }
 }
 
-const Tabs = ({ tabs, onSelect, activeTab }: TabsProps) => (
-    <>
-        {tabs.map((tab: Tab) => (
-            <button
-                key={tab}
-                onClick={() => onSelect(tab)}
-                className={`${styles.tabButton} ${
-                    activeTab === tab ? styles.active : ''
-                }`}
-            >
-                {changeName(tab)}
-            </button>
-        ))}
-    </>
-);
+const Tabs = ({ tabs, onSelect, activeTab, tasksCount }: TabsProps) => {
+    const router = useRouter();
+    const { query } = router;
+    const isFeatureFlagOn = query.dev === 'true';
+    return (
+        <>
+            {tabs.map((tab: Tab) => (
+                <button
+                    key={tab}
+                    onClick={() => onSelect(tab)}
+                    className={`
+                    ${
+                        isFeatureFlagOn
+                            ? styles.featureFlagTabButton
+                            : styles.tabButton
+                    }
+                    ${
+                        activeTab === tab
+                            ? isFeatureFlagOn
+                                ? styles.featureFlagActiveTab
+                                : styles.active
+                            : ''
+                    }
+                    `}
+                >
+                    {isFeatureFlagOn
+                        ? `${changeName(tab)} (${tasksCount[tab]})`
+                        : changeName(tab)}
+                </button>
+            ))}
+        </>
+    );
+};
 
 export default Tabs;
diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx
index 40e774614..160207471 100644
--- a/src/components/standup/index.tsx
+++ b/src/components/standup/index.tsx
@@ -73,12 +73,11 @@ const StandUpContainer: FC = () => {
     return (
         <>
             <section className="container">
+                <ProgressHeader
+                    totalMissedUpdates={totalMissedUpdates}
+                    updateType="Standup"
+                />
                 <div className={styles.standupContainer}>
-                    <ProgressHeader
-                        totalMissedUpdates={totalMissedUpdates}
-                        updateType="Standup"
-                    />
-
                     <div className={styles.standupUpdateContainer}>
                         <h1 className={styles.standupTitle}>Standup Update</h1>
                         <form
diff --git a/src/components/standup/standupContainer.module.scss b/src/components/standup/standupContainer.module.scss
index a0b7181ee..d72e589f8 100644
--- a/src/components/standup/standupContainer.module.scss
+++ b/src/components/standup/standupContainer.module.scss
@@ -12,7 +12,6 @@ $radius: 0.5rem;
 .standupContainer {
     display: flex;
     flex-direction: column;
-    margin-top: 1.8rem;
     width: 100%;
     align-items: center;
     justify-content: center;
@@ -27,6 +26,16 @@ $radius: 0.5rem;
     border-radius: $radius;
 }
 
+.bannerContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    margin-top: 2rem;
+    margin-left: 8.2rem;
+}
+
 .bannerPara {
     font-family: 'Poppins', sans-serif;
     font-size: 1.2rem;
@@ -41,7 +50,7 @@ $radius: 0.5rem;
 
 .standupUpdateContainer {
     width: 50%;
-    margin-top: 4rem;
+    margin-top: 2rem;
 }
 
 .standupForm {
diff --git a/src/components/tasks/TabSection.tsx b/src/components/tasks/TabSection.tsx
index e2e0e66a1..c6e629faa 100644
--- a/src/components/tasks/TabSection.tsx
+++ b/src/components/tasks/TabSection.tsx
@@ -1,12 +1,14 @@
-import { TABS, Tab } from '@/interfaces/task.type';
+import { TABS, Tab, tasksCountObject } from '@/interfaces/task.type';
 import classNames from '@/styles/tasks.module.scss';
 import Tabs from '../Tabs';
 export const TabSection = ({
     onSelect,
     activeTab,
+    tasksCount,
 }: {
     onSelect: (tab: Tab) => void;
     activeTab: Tab;
+    tasksCount: tasksCountObject;
 }) => {
     return (
         <div className={classNames.tabsContainer}>
@@ -14,6 +16,7 @@ export const TabSection = ({
                 tabs={TABS as Tab[]}
                 onSelect={onSelect}
                 activeTab={activeTab}
+                tasksCount={tasksCount}
             />
         </div>
     );
diff --git a/src/components/tasks/TaskList/TaskList.tsx b/src/components/tasks/TaskList/TaskList.tsx
index 810e88534..6f8574dff 100644
--- a/src/components/tasks/TaskList/TaskList.tsx
+++ b/src/components/tasks/TaskList/TaskList.tsx
@@ -53,7 +53,7 @@ export default function TaskList({
     }
 
     return (
-        <>
+        <div className={styles.taskCardsContainer}>
             {filteredTasks.map((item: task) => (
                 <Card
                     content={item}
@@ -72,6 +72,6 @@ export default function TaskList({
                     {SEE_MORE}
                 </button>
             )}
-        </>
+        </div>
     );
 }
diff --git a/src/components/tasks/TasksContent.tsx b/src/components/tasks/TasksContent.tsx
index 94765eccf..054abe9ec 100644
--- a/src/components/tasks/TasksContent.tsx
+++ b/src/components/tasks/TasksContent.tsx
@@ -3,7 +3,7 @@ import classNames from '@/styles/tasks.module.scss';
 
 import { isUserAuthorizedContext } from '@/context/isUserAuthorized';
 import updateTasksStatus from '@/helperFunctions/updateTasksStatus';
-import task, { Tab } from '@/interfaces/task.type';
+import task, { Tab, tasksCountObject } from '@/interfaces/task.type';
 import { useContext, useState, useEffect } from 'react';
 import { STATUS_ORDER } from '@/constants/task-status';
 import {
@@ -26,6 +26,20 @@ export const TasksContent = () => {
     const isUserAuthorized = useContext(isUserAuthorizedContext);
     const isEditable = isUserAuthorized && isEditMode;
     const [activeTab, setActiveTab] = useState(Tab.IN_PROGRESS);
+
+    const startingTasksCount: tasksCountObject = {
+        ASSIGNED: 0,
+        COMPLETED: 0,
+        AVAILABLE: 0,
+        IN_PROGRESS: 0,
+        NEEDS_REVIEW: 0,
+        IN_REVIEW: 0,
+        VERIFIED: 0,
+        MERGED: 0,
+    };
+    const [tasksCount, setTasksCount] =
+        useState<tasksCountObject>(startingTasksCount);
+
     // TODO: the below code should removed when mutation for updating tasks is implemented
     const [filteredTask, setFilteredTask] = useState<any>([]);
     // TODO: the below code should removed when mutation for updating tasks is implemented
@@ -37,9 +51,29 @@ export const TasksContent = () => {
         setActiveTab(tab);
     };
 
+    function getTasksCount(passedTasksArray: task[]) {
+        const tasksCount: tasksCountObject = {
+            ASSIGNED: 0,
+            COMPLETED: 0,
+            AVAILABLE: 0,
+            IN_PROGRESS: 0,
+            NEEDS_REVIEW: 0,
+            IN_REVIEW: 0,
+            VERIFIED: 0,
+            MERGED: 0,
+        };
+        passedTasksArray.forEach((task: task) => {
+            tasksCount[task.status as Tab] += 1;
+        });
+
+        return tasksCount;
+    }
+
     // TODO: the useEffect should be removed when mutation for updating tasks is implemented
     useEffect(() => {
         if ('tasks' in response) {
+            const tasksCount = getTasksCount(response.tasks);
+            setTasksCount(tasksCount);
             const tasks = updateTasksStatus(response.tasks);
             tasks.sort((a: task, b: task) => +a.endsOn - +b.endsOn);
             tasks.sort(
@@ -76,7 +110,11 @@ export const TasksContent = () => {
 
     return (
         <div className={classNames.tasksContainer}>
-            <TabSection onSelect={onSelect} activeTab={activeTab} />
+            <TabSection
+                onSelect={onSelect}
+                activeTab={activeTab}
+                tasksCount={tasksCount}
+            />
             <div>
                 {filteredTask[activeTab] ? (
                     <TaskList
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index b721017ae..78ffd3347 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -27,6 +27,7 @@ $seeMoreTasksShadow: #595959cc;
 }
 
 .card {
+    text-align: left;
     display: flex;
     flex-direction: column;
     padding: 1rem;
@@ -35,7 +36,7 @@ $seeMoreTasksShadow: #595959cc;
     justify-content: space-between;
     border: 1px solid #d9d9d9;
     position: relative;
-    max-width: 720px;
+    width: 50rem;
 
     @media (max-width: 48rem) {
         width: 100%;
@@ -303,3 +304,10 @@ $seeMoreTasksShadow: #595959cc;
         transform: rotate(360deg);
     }
 }
+
+.taskCardsContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/src/interfaces/task.type.ts b/src/interfaces/task.type.ts
index 77786b3ce..5a15228a7 100644
--- a/src/interfaces/task.type.ts
+++ b/src/interfaces/task.type.ts
@@ -44,8 +44,21 @@ enum Tab {
     COMPLETED = 'COMPLETED',
 }
 
+type tasksCountObject = {
+    ASSIGNED: number;
+    COMPLETED: number;
+    AVAILABLE: number;
+    IN_PROGRESS: number;
+    NEEDS_REVIEW: number;
+    IN_REVIEW: number;
+    VERIFIED: number;
+    MERGED: number;
+};
+
 const TABS = Object.values(Tab);
 
 export { TABS, Tab };
 
+export type { tasksCountObject };
+
 export default task;
diff --git a/src/styles/tasks.module.scss b/src/styles/tasks.module.scss
index cfdd631a0..bd09e144d 100644
--- a/src/styles/tasks.module.scss
+++ b/src/styles/tasks.module.scss
@@ -1,4 +1,5 @@
 .container {
+    text-align: center;
     display: flex;
     flex-direction: column;
     margin: 0 auto;
@@ -25,5 +26,10 @@
 }
 
 .tabsContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
     margin-bottom: 1rem;
+    flex-wrap: wrap;
 }