diff --git a/__mocks__/handlers/task-details.handler.ts b/__mocks__/handlers/task-details.handler.ts
index 6a68faea3..3fbf54b6b 100644
--- a/__mocks__/handlers/task-details.handler.ts
+++ b/__mocks__/handlers/task-details.handler.ts
@@ -34,6 +34,37 @@ const taskDetailsHandler = [
             })
         );
     }),
+    rest.get(`${URL}/tasks/6KhcLU3yr45dzjQIVm0k/details`, (_, res, ctx) => {
+        return res(
+            ctx.status(200),
+            ctx.json({
+                message: 'task returned successfully',
+                taskData: {
+                    id: '6KhcLU3yr45dzjQIVm0k',
+                    isNoteworthy: true,
+                    lossRate: {
+                        dinero: 0,
+                        neelam: 0,
+                    },
+                    endsOn: 1618790410,
+                    title: 'test 1 for drag and drop',
+                    status: 'assigned',
+                    assignee: 'ankur',
+                    links: ['null'],
+                    dependsOn: ['null'],
+                    percentCompleted: 0,
+                    type: 'feature',
+                    priority: 'high',
+                    featureUrl: 'https://www.sampleUrl.com',
+                    startedOn: 1617062400,
+                    completionAward: {
+                        neelam: 0,
+                        dinero: 110,
+                    },
+                },
+            })
+        );
+    }),
     rest.patch(`${URL}/tasks/:taskId`, (_, res, ctx) => {
         return res(ctx.status(204));
     }),
diff --git a/__tests__/Unit/Components/Select/Select.test.tsx b/__tests__/Unit/Components/Select/Select.test.tsx
new file mode 100644
index 000000000..3576c966d
--- /dev/null
+++ b/__tests__/Unit/Components/Select/Select.test.tsx
@@ -0,0 +1,197 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+import { Select } from '@/components/Select';
+
+const sampleOptions = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+];
+
+const onSelectMock = jest.fn();
+describe('Select', () => {
+    test('renders with initial state', () => {
+        const value = sampleOptions[0];
+        render(
+            <Select
+                value={value}
+                onChange={() => onSelectMock()}
+                options={sampleOptions}
+            />
+        );
+
+        expect(screen.queryByTestId('selected-option')).toBeInTheDocument();
+
+        expect(screen?.queryByTestId('options')).not.toHaveClass('show');
+    });
+
+    test('opens dropdown when clicked', () => {
+        const value = sampleOptions[0];
+        render(
+            <Select
+                value={value}
+                onChange={() => onSelectMock()}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen?.getByRole('button', {
+            name: value.label,
+        });
+
+        fireEvent.click(selectContainer);
+
+        expect(screen?.queryByTestId('options')).toHaveClass('show');
+    });
+
+    test('selects an option', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+
+        const option2 = screen?.getByText('Option 2');
+        fireEvent.click(option2);
+
+        expect(onChangeMock).toHaveBeenCalledWith(sampleOptions[1]);
+    });
+
+    test('selects an option for touch', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+
+        const option2 = screen?.getByText('Option 2');
+        fireEvent.pointerEnter(option2);
+
+        expect(onChangeMock).toHaveBeenCalledWith(sampleOptions[1]);
+    });
+
+    test('handler should not be called when event target is not a child of container', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByTestId('selected-option');
+
+        // Simulate a keyboard event with a target that is not a child of the container
+        fireEvent.keyDown(document.body, { key: 'Enter' });
+
+        // The handler function should not be called since the target is not a child of the container
+        expect(onChangeMock).not.toHaveBeenCalled();
+
+        // Handler should be called when the target is a child of the container
+        fireEvent.click(selectContainer);
+        // The dropdown should be visible after the key press.
+        expect(screen?.queryByTestId('options')).toHaveClass('show');
+    });
+
+    test('navigates options with arrow keys', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByRole('button');
+        // Simulate pressing the "ArrowDown" key to open the dropdown.
+        fireEvent.keyDown(selectContainer, {
+            key: 'ArrowDown',
+            code: 'ArrowDown',
+        });
+        // The dropdown should be visible after the key press.
+        expect(screen.getByTestId('options')).toBeVisible();
+
+        // Simulate pressing the "ArrowDown" key to open the dropdown.
+        fireEvent.keyDown(selectContainer, {
+            key: 'ArrowDown',
+            code: 'ArrowDown',
+        });
+
+        // The second option should be highlighted.
+        expect(screen.getByText('Option 2')).toHaveClass('highlighted');
+    });
+
+    test('using escape key for closing the options', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByRole('button');
+        fireEvent.click(selectContainer);
+
+        // The dropdown should be visible after the key press.
+        expect(screen.getByTestId('options')).toBeVisible();
+
+        // Simulate pressing the "Escape" key to close the dropdown.
+        fireEvent.keyDown(selectContainer, { key: 'Escape', code: 'Escape' });
+
+        //  The dropdown should be closed after selecting an option.
+        expect(screen?.queryByTestId('options')).not.toHaveClass('show');
+    });
+
+    test('handler should close the dropdown when the container loses focus (onBlur event)', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByTestId('selected-option');
+        const optionsList = screen.getByTestId('options');
+
+        // Open the dropdown by simulating a click on the select container
+        fireEvent.click(selectContainer);
+        expect(optionsList).toBeVisible();
+
+        // Simulate blur event on the select container
+        fireEvent.blur(selectContainer);
+
+        // The dropdown should be closed after the container loses focus
+        expect(screen?.queryByTestId('options')).not.toHaveClass('show');
+    });
+
+    test('handler should set the highlighted index when an option is hovered (onMouseEnter event)', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const optionElement = screen.getByText('Option 2');
+
+        // Simulate mouse enter on the option element
+        fireEvent.mouseEnter(optionElement);
+
+        // The highlighted index should be set to the index of the hovered option
+        expect(optionElement).toHaveClass('highlighted');
+    });
+});
diff --git a/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx b/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
index 762234987..abde6f808 100644
--- a/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
@@ -67,12 +67,24 @@ describe('TaskDetails Page', () => {
         });
     });
 
-    it('Should render No Description available for a task without description', async () => {
+    it('Should render Description available for a task', async () => {
         const { getByText } = renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
             </Provider>
         );
+        await waitFor(() => {
+            expect(
+                getByText('This is a sample description')
+            ).toBeInTheDocument();
+        });
+    });
+    it('Should render No Description available for a task without description', async () => {
+        const { getByText } = renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID="6KhcLU3yr45dzjQIVm0k" />
+            </Provider>
+        );
         await waitFor(() => {
             expect(getByText('No description available')).toBeInTheDocument();
         });
@@ -137,6 +149,16 @@ describe('TaskDetails Page', () => {
             expect(getByText('Ankush')).toBeInTheDocument();
         });
     });
+    test('should render "Something went wrong!" when isError is true', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={''} />
+            </Provider>
+        );
+
+        const errorElement = await screen.findByText('Something went wrong!');
+        expect(errorElement).toBeInTheDocument();
+    });
     it('Renders Task Started-on Date', async () => {
         const { getByText } = renderWithRouter(
             <Provider store={store()}>
diff --git a/__tests__/Unit/Components/Tasks/TasksContent.test.tsx b/__tests__/Unit/Components/Tasks/TasksContent.test.tsx
index f1cdba004..806b0b1a5 100644
--- a/__tests__/Unit/Components/Tasks/TasksContent.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TasksContent.test.tsx
@@ -1,12 +1,19 @@
 import { TasksContent } from '@/components/tasks/TasksContent';
 import { setupServer } from 'msw/node';
 import handlers from '../../../../__mocks__/handlers';
-import { fireEvent, screen } from '@testing-library/react';
+import { act, fireEvent, screen, within } from '@testing-library/react';
 import { renderWithRouter } from '@/test_utils/createMockRouter';
 import { Provider } from 'react-redux';
 import { store } from '@/app/store';
 import { NO_TASKS_FOUND_MESSAGE } from '@/constants/messages';
 import { noTasksFoundHandler } from '../../../../__mocks__//handlers/tasks.handler';
+import { TABS } from '@/interfaces/task.type';
+import { getChangedStatusName } from '@/utils/getChangedStatusName';
+
+jest.mock('@/hooks/useIntersection', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
 
 const server = setupServer(...handlers);
 
@@ -17,7 +24,20 @@ afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 describe('tasks content', () => {
+    const breakpointToShowSelect = 440;
+    const breakpointToShowTabs = breakpointToShowSelect + 450;
+
+    const setWindowInnerWidth = (width: number) => {
+        // Change the viewport to 500px.
+        global.innerWidth = width;
+
+        // Trigger the window resize event.
+        global.dispatchEvent(new Event('resize'));
+    };
+
     test('renders tabs component', async () => {
+        setWindowInnerWidth(breakpointToShowTabs);
+
         renderWithRouter(
             <Provider store={store()}>
                 <TasksContent dev={false} />
@@ -25,10 +45,12 @@ describe('tasks content', () => {
         );
 
         expect(screen.getByText(/loading/i)).toBeInTheDocument();
+
         await screen.findByTestId('tabs');
     });
 
     test('select tab and set active', async () => {
+        setWindowInnerWidth(breakpointToShowTabs);
         renderWithRouter(
             <Provider store={store()}>
                 <TasksContent dev={false} />
@@ -38,7 +60,10 @@ describe('tasks content', () => {
             }
         );
         await screen.findByTestId('tabs');
-        const assignedButton = screen.getByRole('button', {
+        const tabsContainer = within(
+            screen.getByTestId('status-tabs-container')
+        );
+        const assignedButton = tabsContainer.getByRole('button', {
             name: /assigned/i,
         });
         expect(assignedButton).toHaveClass('active');
@@ -65,6 +90,7 @@ describe('tasks content', () => {
             { query: { dev: 'true', section: 'available' } }
         );
         await screen.findByTestId('tabs');
+
         const task = await findByText(
             'Design and develop an online booking system'
         );
@@ -79,7 +105,10 @@ describe('tasks content', () => {
             { query: { dev: 'false', section: 'available' } }
         );
         await screen.findByTestId('tabs');
-        const unassignedButton = screen.getByRole('button', {
+        const tabsContainer = within(
+            screen.getByTestId('status-tabs-container')
+        );
+        const unassignedButton = tabsContainer.getByRole('button', {
             name: /UNASSINGED/i,
         });
         expect(unassignedButton).toHaveClass('active');
@@ -89,59 +118,70 @@ describe('tasks content', () => {
         expect(task).toBeInTheDocument();
     });
 
-    test('load more button is disabled when there are no more tasks to load', async () => {
-        server.use(noTasksFoundHandler);
+    test('Selecting a tab pushes into query params', async () => {
+        setWindowInnerWidth(breakpointToShowTabs);
+        const mockPushFunction = jest.fn();
         renderWithRouter(
             <Provider store={store()}>
                 <TasksContent dev={true} />
             </Provider>,
-            { query: { dev: 'true' } }
+            { push: mockPushFunction }
         );
+
         await screen.findByTestId('tabs');
-        const loadMoreButton = screen.getByRole('button', {
-            name: /load more/i,
+        const tabsContainer = within(
+            screen.getByTestId('status-tabs-container')
+        );
+        const inProgressBtn = tabsContainer.getByRole('button', {
+            name: /IN PROGRESS/i,
+        });
+        expect(inProgressBtn).toHaveClass('active');
+        const unassignedButton = tabsContainer.getByRole('button', {
+            name: /UNASSINGED/i,
+        });
+        fireEvent.click(unassignedButton);
+        expect(mockPushFunction).toBeCalledTimes(1);
+        expect(mockPushFunction).toBeCalledWith({
+            query: {
+                section: 'available',
+            },
         });
-        expect(loadMoreButton).toBeDisabled();
     });
 
-    test('load more button is enabled when there are more tasks to load', async () => {
+    test('should show status-tabs-container after 450px of screen width', async () => {
+        setWindowInnerWidth(breakpointToShowTabs);
+        const mockPushFunction = jest.fn();
         renderWithRouter(
             <Provider store={store()}>
                 <TasksContent dev={true} />
             </Provider>,
-            { query: { dev: 'true' } }
+            { push: mockPushFunction }
         );
+
         await screen.findByTestId('tabs');
-        const loadMoreButton = screen.getByRole('button', {
-            name: /load more/i,
-        });
-        expect(loadMoreButton).toBeEnabled();
+        const tabsContainer = screen.getByTestId('status-tabs-container');
+        const tabStyles = getComputedStyle(tabsContainer);
+        expect(tabStyles.display).toBe('block');
     });
 
-    test('fetch more tasks when load more button is clicked', async () => {
-        const { findByText } = renderWithRouter(
+    test('should show status-select-container 450px below status-tabs-container', async () => {
+        setWindowInnerWidth(breakpointToShowSelect);
+        const mockPushFunction = jest.fn();
+        renderWithRouter(
             <Provider store={store()}>
                 <TasksContent dev={true} />
             </Provider>,
-            { query: { dev: 'true', section: 'available' } }
-        );
-        await screen.findByTestId('tabs');
-        const task = await findByText(
-            'Design and develop an online booking system'
-        );
-        expect(task).toBeInTheDocument();
-        const loadMoreButton = await screen.getByRole('button', {
-            name: /load more/i,
-        });
-        expect(loadMoreButton).toBeEnabled();
-        fireEvent.click(loadMoreButton);
-        const task2 = await findByText(
-            'Design and develop an online booking system'
+            { push: mockPushFunction }
         );
-        expect(task2).toBeInTheDocument();
+        await screen.findByTestId('status-select-container');
+        const selectContainer = screen.getByTestId('status-select-container');
+        const selectStyles = getComputedStyle(selectContainer);
+
+        expect(selectStyles.display).toBe('block');
     });
 
-    test('Selecting a tab pushes into query params', async () => {
+    test('Selecting a value from dropdown pushes into query params', async () => {
+        setWindowInnerWidth(breakpointToShowSelect);
         const mockPushFunction = jest.fn();
         renderWithRouter(
             <Provider store={store()}>
@@ -149,19 +189,27 @@ describe('tasks content', () => {
             </Provider>,
             { push: mockPushFunction }
         );
-        await screen.findByTestId('tabs');
-        const inProgressBtn = screen.getByRole('button', {
-            name: /IN PROGRESS/i,
+
+        await screen.findByTestId('status-select-container');
+        const selectContainer = screen?.getByTestId(
+            'selected-option-container'
+        );
+
+        fireEvent.click(selectContainer);
+        fireEvent.keyDown(selectContainer, {
+            key: 'ArrowDown',
+            code: 'ArrowDown',
         });
-        expect(inProgressBtn).toHaveClass('active');
-        const unassignedButton = screen.getByRole('button', {
-            name: /UNASSINGED/i,
+
+        fireEvent.keyDown(selectContainer, {
+            key: 'Enter',
+            code: 'Enter',
         });
-        fireEvent.click(unassignedButton);
+
         expect(mockPushFunction).toBeCalledTimes(1);
         expect(mockPushFunction).toBeCalledWith({
             query: {
-                section: 'available',
+                section: TABS[1].toLowerCase(),
             },
         });
     });
diff --git a/__tests__/Unit/hooks/useIntersection.ts.test.tsx b/__tests__/Unit/hooks/useIntersection.ts.test.tsx
new file mode 100644
index 000000000..da14cb9df
--- /dev/null
+++ b/__tests__/Unit/hooks/useIntersection.ts.test.tsx
@@ -0,0 +1,88 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useIntersection from './../../../src/hooks/useIntersection';
+import { MutableRefObject } from 'react';
+
+const mockIntersectionObserver = jest.fn();
+mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+});
+
+describe('useIntersection', () => {
+    let loadingRef: MutableRefObject<HTMLDivElement | null>;
+    let bottomBoundaryRef: MutableRefObject<HTMLDivElement | null>;
+    let onLoadMore: jest.Mock<any, any>;
+
+    beforeEach(() => {
+        loadingRef = { current: document.createElement('div') };
+        bottomBoundaryRef = { current: document.createElement('div') };
+        onLoadMore = jest.fn();
+        window.IntersectionObserver = mockIntersectionObserver;
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should observe the loadingRef element', () => {
+        renderHook(() =>
+            useIntersection(loadingRef, bottomBoundaryRef, onLoadMore)
+        );
+        expect(mockIntersectionObserver).toHaveBeenCalledTimes(1);
+        expect(mockIntersectionObserver).toHaveBeenCalledWith(
+            expect.any(Function),
+            { root: null, rootMargin: '0px', threshold: 0 }
+        );
+    });
+
+    it('should add and remove event listener for the scroll event', () => {
+        const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+        const removeEventListenerSpy = jest.spyOn(
+            window,
+            'removeEventListener'
+        );
+        const { unmount } = renderHook(() =>
+            useIntersection(loadingRef, bottomBoundaryRef, onLoadMore)
+        );
+        expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+            'scroll',
+            expect.any(Function)
+        );
+        unmount();
+        expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith(
+            'scroll',
+            expect.any(Function)
+        );
+        addEventListenerSpy.mockRestore();
+        removeEventListenerSpy.mockRestore();
+    });
+
+    it('should call onLoadMore when scroll reaches the bottom boundary', () => {
+        const handleScroll = jest.fn();
+        const addEventListenerSpy = jest
+            .spyOn(window, 'addEventListener')
+            .mockImplementation((event, cb) => {
+                if (event === 'scroll') {
+                    handleScroll.mockImplementation(cb as any);
+                }
+            });
+        renderHook(() =>
+            useIntersection(loadingRef, bottomBoundaryRef, onLoadMore)
+        );
+        const bottomBoundaryRect = {
+            top: window.innerHeight,
+        };
+        Object.defineProperty(
+            bottomBoundaryRef.current,
+            'getBoundingClientRect',
+            {
+                value: () => bottomBoundaryRect,
+            }
+        );
+        handleScroll();
+        expect(onLoadMore).toHaveBeenCalledTimes(1);
+        addEventListenerSpy.mockRestore();
+    });
+});
diff --git a/__tests__/Unit/utils/getActiveTab.test.ts b/__tests__/Unit/utils/getActiveTab.test.ts
index fccb21b41..1e4cd0e28 100644
--- a/__tests__/Unit/utils/getActiveTab.test.ts
+++ b/__tests__/Unit/utils/getActiveTab.test.ts
@@ -6,12 +6,12 @@ describe('Unit | Util | Get Active Tab', () => {
         expect(getActiveTab()).toEqual(Tab.IN_PROGRESS);
         expect(getActiveTab('assigned')).toEqual(Tab.ASSIGNED);
         expect(getActiveTab('available')).toEqual(Tab.AVAILABLE);
-        expect(getActiveTab('needs_review')).toEqual(Tab.NEEDS_REVIEW);
-        expect(getActiveTab('in_review')).toEqual(Tab.IN_REVIEW);
+        expect(getActiveTab('needs-review')).toEqual(Tab.NEEDS_REVIEW);
+        expect(getActiveTab('in-review')).toEqual(Tab.IN_REVIEW);
         expect(getActiveTab('verified')).toEqual(Tab.VERIFIED);
         expect(getActiveTab('merged')).toEqual(Tab.MERGED);
         expect(getActiveTab('completed')).toEqual(Tab.COMPLETED);
-        expect(getActiveTab('in_progress')).toEqual(Tab.IN_PROGRESS);
+        expect(getActiveTab('in-progress')).toEqual(Tab.IN_PROGRESS);
         expect(getActiveTab('someRandomSection')).toEqual(Tab.IN_PROGRESS);
     });
 });
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
new file mode 100644
index 000000000..3d8248d65
--- /dev/null
+++ b/src/components/Select/index.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './select.module.scss';
+import { SelectOption, SelectProps } from '@/types/Select';
+
+export function Select({ value, onChange, options }: SelectProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    function selectOption(option: SelectOption) {
+        if (option !== value) onChange(option);
+    }
+
+    function onOptionClick(option: SelectOption) {
+        selectOption(option);
+        setIsOpen(false);
+    }
+
+    // Accessiblity
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            e.preventDefault();
+            if (
+                e.target != containerRef.current &&
+                !containerRef?.current?.contains(e.target as Node)
+            )
+                return;
+
+            switch (e.code) {
+                case 'Enter':
+                case 'Space':
+                    if (isOpen) {
+                        selectOption(options[highlightedIndex]);
+                        setIsOpen(false);
+                    }
+                    break;
+                case 'ArrowUp':
+                case 'ArrowDown': {
+                    if (!isOpen) {
+                        setIsOpen(true);
+                        break;
+                    }
+
+                    const newValue =
+                        highlightedIndex + (e.code === 'ArrowDown' ? 1 : -1);
+                    if (newValue >= 0 && newValue < options.length) {
+                        setHighlightedIndex(newValue);
+                    }
+                    break;
+                }
+                case 'Escape':
+                    setIsOpen(false);
+                    break;
+            }
+        };
+        containerRef.current?.addEventListener('keydown', handler);
+
+        return () => {
+            containerRef.current?.removeEventListener('keydown', handler);
+        };
+    }, [isOpen, highlightedIndex, options]);
+
+    return (
+        <div
+            ref={containerRef}
+            onBlur={() => setIsOpen(false)}
+            onClick={() => {
+                setIsOpen((prev) => !prev);
+            }}
+            tabIndex={0}
+            className={styles.container}
+        >
+            <button
+                className={styles['selected-option-container']}
+                data-testid="selected-option-container"
+            >
+                <span className={styles.value} data-testid="selected-option">
+                    {value?.label}
+                </span>
+                <div className={styles.caret}></div>
+            </button>
+            <ul
+                className={`${styles.options} ${isOpen ? styles.show : ''}`}
+                data-testid="options"
+            >
+                {options.map((option, index) => (
+                    <li
+                        onClick={() => {
+                            onOptionClick(option);
+                        }}
+                        onPointerEnter={() => {
+                            onOptionClick(option);
+                        }}
+                        onMouseEnter={() => setHighlightedIndex(index)}
+                        key={option.value}
+                        className={`${
+                            index === highlightedIndex ? styles.highlighted : ''
+                        } ${styles.option}`}
+                        style={{ cursor: 'pointer' }}
+                    >
+                        {option.label}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
new file mode 100644
index 000000000..4b5c10ae6
--- /dev/null
+++ b/src/components/Select/select.module.scss
@@ -0,0 +1,86 @@
+$theme-grey: #d4d4d5;
+$theme-grey-light: #f1f1f5;
+$gray-shade-color: #808080;
+$gray-shade-color2: #5c5b5b;
+$black: #000;
+$border-color: #d4d4d5;
+.container {
+    position: relative;
+    width: 20em;
+    min-height: 1.5em;
+    border: 2px solid $border-color;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    outline: none;
+    margin: auto;
+}
+
+.container:focus {
+    border-color: $gray-shade-color2;
+}
+
+.selected-option-container {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+    display: flex;
+    width: 100%;
+    align-items: center;
+}
+
+.value {
+    flex-grow: 1;
+    display: flex;
+    gap: 0.5em;
+    flex-wrap: wrap;
+    font-weight: bold;
+}
+
+.caret {
+    translate: 0 25%;
+    border: 0.25em solid transparent;
+    border-top-color: $gray-shade-color2;
+    width: 8px;
+    height: 8px;
+}
+
+.options {
+    position: absolute;
+    margin: 0;
+    padding: 0rem;
+    list-style: none;
+    display: none;
+    max-height: 15em;
+    overflow-y: auto;
+    border: 0.05em solid $gray-shade-color2;
+    border-radius: 0.25em;
+    width: 100%;
+    left: 0;
+    top: calc(100% + 0.25em);
+    background-color: white;
+    z-index: 100;
+}
+
+.options.show {
+    display: block;
+}
+
+.option {
+    padding: 0.5em 0.5em;
+    cursor: pointer;
+}
+
+.option.selected {
+    background-color: $gray-shade-color2;
+}
+
+.option.highlighted {
+    background-color: $theme-grey-light;
+}
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index a6fceb1d7..2d395f841 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -1,21 +1,12 @@
 import styles from '@/components/Tabs/Tabs.module.scss';
 import { Tab } from '@/interfaces/task.type';
-import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants';
+import { getChangedStatusName } from '@/utils/getChangedStatusName';
 
 type TabsProps = {
     tabs: Tab[];
     onSelect: (tab: Tab) => void;
     activeTab: Tab;
 };
-function changeName(name: string) {
-    if (name === COMPLETED) {
-        return DONE;
-    } else if (name === AVAILABLE) {
-        return UNASSINGED;
-    } else {
-        return name.split('_').join(' ');
-    }
-}
 
 const Tabs = ({ tabs, onSelect, activeTab }: TabsProps) => (
     <>
@@ -27,7 +18,7 @@ const Tabs = ({ tabs, onSelect, activeTab }: TabsProps) => (
                     activeTab === tab ? styles.active : ''
                 }`}
             >
-                {changeName(tab)}
+                {getChangedStatusName(tab)}
             </button>
         ))}
     </>
diff --git a/src/components/taskDetails/Details.tsx b/src/components/taskDetails/Details.tsx
index a665cb6ce..1931c7acd 100644
--- a/src/components/taskDetails/Details.tsx
+++ b/src/components/taskDetails/Details.tsx
@@ -4,7 +4,7 @@ import classNames from './task-details.module.scss';
 
 type Props = {
     detailType: string;
-    value: string;
+    value?: string;
 };
 
 const Details: FC<Props> = ({ detailType, value }) => {
@@ -13,7 +13,7 @@ const Details: FC<Props> = ({ detailType, value }) => {
             <span className={classNames.detailType}>{detailType}:</span>
             <span
                 className={classNames.detailValue}
-                style={{ color: setColor?.[value] ?? 'black' }}
+                style={{ color: value ? setColor[value] : 'black' }}
             >
                 {value ?? 'N/A'}
             </span>
diff --git a/src/components/taskDetails/index.tsx b/src/components/taskDetails/index.tsx
index 8aa0e9bc0..9b2814970 100644
--- a/src/components/taskDetails/index.tsx
+++ b/src/components/taskDetails/index.tsx
@@ -1,11 +1,9 @@
 import React, {
     ChangeEvent,
     FC,
-    useEffect,
-    useContext,
-    useRef,
     useState,
     ReactElement,
+    useEffect,
 } from 'react';
 import TaskContainer from './TaskContainer';
 import Details from './Details';
@@ -19,10 +17,13 @@ import {
 } from '@/app/services/taskDetailsApi';
 
 import useUserData from '@/hooks/useUserData';
-import { ButtonProps, TextAreaProps } from '@/interfaces/taskDetails.type';
+import {
+    ButtonProps,
+    TextAreaProps,
+    taskDetailsDataType,
+} from '@/interfaces/taskDetails.type';
 import Layout from '@/components/Layout';
 import TaskDependency from '@/components/taskDetails/taskDependency';
-import { parseDependencyValue } from '@/utils/parseDependency';
 import { useGetProgressDetailsQuery } from '@/app/services/progressesApi';
 import { ProgressDetailsData } from '@/types/standup.type';
 import { getDateFromTimestamp } from '@/utils/getDateFromTimestamp';
@@ -34,7 +35,7 @@ export function Button(props: ButtonProps) {
         <button
             type="button"
             className={classNames['button']}
-            onClick={() => clickHandler(value)}
+            onClick={() => clickHandler(value ?? true)}
         >
             {buttonName}
         </button>
@@ -58,78 +59,65 @@ type Props = {
     url?: string;
     taskID: string;
 };
-
 const TaskDetails: FC<Props> = ({ taskID }) => {
     const router = useRouter();
     const { query } = router;
     const isDevModeEnabled = query.dev === 'true' ? true : false;
 
-    const { data: userData, isUserAuthorized } = useUserData();
+    const { isUserAuthorized } = useUserData();
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
-    const initialDataRef = useRef<Record<string, any> | undefined>({});
     const { data, isError, isLoading, isFetching } =
         useGetTaskDetailsQuery(taskID);
 
     const taskDependencyIds: string[] = !isFetching
         ? data?.taskData?.dependsOn || []
         : [];
-
     const { SUCCESS, ERROR } = ToastTypes;
 
-    const taskDetailsData = data?.taskData;
-    const [taskDetails, setTaskDetails] = useState<
-        Record<string, any> | undefined
-    >({});
-    const [editedDetails, setEditedDetails] = useState({});
+    const taskDetailsData: taskDetailsDataType['taskData'] = data?.taskData;
 
-    const [updateTaskDetails] = useUpdateTaskDetailsMutation();
-    const [updatedDependencies, setUpdatedDependencies] = useState<string[]>(
-        taskDetails?.dependsOn || []
-    );
+    const [editedTaskDetails, setEditedTaskDetails] = useState<
+        taskDetailsDataType['taskData'] | undefined
+    >(data?.taskData);
 
     const [addOrUpdateTaskRequest, taskRequestUpdateStatus] =
         useAddOrUpdateMutation();
 
     useEffect(() => {
-        const fetchedData = data?.taskData;
-        setTaskDetails(taskDetailsData);
-        initialDataRef.current = fetchedData;
-    }, [isLoading, data]);
-
-    function handleChange(
-        event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) {
-        const { name, value } = event.target;
-
-        if (name === 'dependsOn') {
-            const updatedDependencies = parseDependencyValue(value);
-            setUpdatedDependencies(updatedDependencies);
+        if (data?.taskData) {
+            setEditedTaskDetails(data.taskData);
         }
-        const formData = {
-            ...taskDetails,
-            [event.target.name]: event.target.value,
-            dependsOn: [...updatedDependencies],
-        };
-        setEditedDetails(formData);
-        setTaskDetails(formData);
-    }
+    }, [data]);
+
+    const [updateTaskDetails] = useUpdateTaskDetailsMutation();
 
     function onCancel() {
         setIsEditing(false);
-        setTaskDetails(initialDataRef.current);
+        setEditedTaskDetails(taskDetailsData);
     }
-
     async function onSave() {
         setIsEditing(false);
-        updateTaskDetails({
-            editedDetails,
+        await updateTaskDetails({
+            editedDetails: editedTaskDetails,
             taskID,
         })
             .unwrap()
             .then(() => toast(SUCCESS, 'Successfully saved'))
             .catch((error) => toast(ERROR, error.data.message));
-        setTaskDetails(initialDataRef.current);
+    }
+
+    function handleChange(
+        event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) {
+        const { name, value } = event.target;
+
+        setEditedTaskDetails((prevState) => ({
+            ...prevState!,
+            ...(prevState
+                ? { [name]: name === 'dependsOn' ? [value] : value }
+                : {}),
+        }));
     }
 
     function taskRequestHandle() {
@@ -183,7 +171,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                         {isEditing ? (
                             <Textarea
                                 name="title"
-                                value={taskDetails?.title}
+                                value={editedTaskDetails?.title}
                                 onChange={handleChange}
                                 testId="title-textarea"
                             />
@@ -192,7 +180,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                 data-testid="task-title"
                                 className={classNames.taskTitle}
                             >
-                                {taskDetails?.title}
+                                {taskDetailsData?.title}
                             </span>
                         )}
                         {!isEditing ? (
@@ -223,15 +211,15 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                 {isEditing ? (
                                     <Textarea
                                         name="purpose"
-                                        value={taskDetails?.purpose}
+                                        value={editedTaskDetails?.purpose}
                                         onChange={handleChange}
                                         testId="purpose-textarea"
                                     />
                                 ) : (
                                     <p>
-                                        {!taskDetails?.purpose
+                                        {!taskDetailsData?.purpose
                                             ? 'No description available'
-                                            : taskDetails?.purpose}
+                                            : taskDetailsData?.purpose}
                                     </p>
                                 )}
                             </TaskContainer>
@@ -243,26 +231,26 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                 >
                                     <Details
                                         detailType={'Type'}
-                                        value={taskDetails?.type}
+                                        value={taskDetailsData?.type}
                                     />
                                     <Details
                                         detailType={'Priority'}
-                                        value={taskDetails?.priority}
+                                        value={taskDetailsData?.priority}
                                     />
                                     <Details
                                         detailType={'Status'}
-                                        value={taskDetails?.status}
+                                        value={taskDetailsData?.status}
                                     />
                                     <Details
                                         detailType={'Link'}
-                                        value={taskDetails?.featureUrl}
+                                        value={taskDetailsData?.featureUrl}
                                     />
                                 </div>
                             </TaskContainer>
                             {isDevModeEnabled && (
                                 <>
                                     <TaskContainer
-                                        title="Task DependsOn"
+                                        title="Task Dependencies"
                                         hasImg={false}
                                     >
                                         <TaskDependency
@@ -271,9 +259,12 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                             }
                                             isEditing={isEditing}
                                             updatedDependencies={
-                                                updatedDependencies
+                                                taskDetailsData?.dependsOn || []
                                             }
                                             handleChange={handleChange}
+                                            setEditedTaskDetails={
+                                                setEditedTaskDetails
+                                            }
                                         />
                                     </TaskContainer>
                                     <TaskContainer
@@ -310,9 +301,9 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                 <Details
                                     detailType={'Assignee'}
                                     value={
-                                        taskDetails?.type === 'feature'
-                                            ? taskDetails?.assignee
-                                            : taskDetails?.participants?.join(
+                                        taskDetailsData?.type === 'feature'
+                                            ? taskDetailsData?.assignee
+                                            : taskDetailsData?.participants?.join(
                                                   ' , '
                                               )
                                     }
@@ -328,15 +319,15 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                 hasImg={true}
                             >
                                 <Details
-                                    detailType={'StartedOn'}
+                                    detailType={'Started On'}
                                     value={convertTimeStamp(
-                                        taskDetails?.startedOn
+                                        taskDetailsData?.startedOn ?? 0
                                     )}
                                 />
                                 <Details
-                                    detailType={'EndsOn'}
+                                    detailType={'Ends On'}
                                     value={convertTimeStamp(
-                                        taskDetails?.endsOn
+                                        taskDetailsData?.endsOn ?? 0
                                     )}
                                 />
                             </TaskContainer>
diff --git a/src/components/tasks/TasksContent.tsx b/src/components/tasks/TasksContent.tsx
index 1af2eef18..18892d17a 100644
--- a/src/components/tasks/TasksContent.tsx
+++ b/src/components/tasks/TasksContent.tsx
@@ -1,7 +1,8 @@
+import { ElementRef } from 'react';
 import classNames from '@/styles/tasks.module.scss';
 import { useGetAllTasksQuery } from '@/app/services/tasksApi';
-import task, { Tab, TabTasksData } from '@/interfaces/task.type';
-import { useState, useEffect } from 'react';
+import task, { TABS, Tab, TabTasksData } from '@/interfaces/task.type';
+import { useState, useEffect, useRef } from 'react';
 import {
     NO_TASKS_FOUND_MESSAGE,
     TASKS_FETCH_ERROR_MESSAGE,
@@ -9,7 +10,11 @@ import {
 import { TabSection } from './TabSection';
 import TaskList from './TaskList/TaskList';
 import { useRouter } from 'next/router';
-import { getActiveTab } from '@/utils/getActiveTab';
+import { getActiveTab, tabToUrlParams } from '@/utils/getActiveTab';
+
+import { Select } from '../Select';
+import { getChangedStatusName } from '@/utils/getChangedStatusName';
+import useIntersection from '@/hooks/useIntersection';
 
 type RenderTaskListProps = {
     tab: string;
@@ -62,6 +67,8 @@ export const TasksContent = ({ dev }: { dev: boolean }) => {
         MERGED: [],
         COMPLETED: [],
     });
+    const loadingRef = useRef<ElementRef<'div'>>(null);
+    const bottomBoundaryRef = useRef<ElementRef<'div'>>(null);
 
     const {
         data: tasksData = { tasks: [], next: '' },
@@ -84,7 +91,7 @@ export const TasksContent = ({ dev }: { dev: boolean }) => {
         router.push({
             query: {
                 ...router.query,
-                section: tab.toLowerCase(),
+                section: tabToUrlParams(tab),
             },
         });
         setNextTasks('');
@@ -106,13 +113,41 @@ export const TasksContent = ({ dev }: { dev: boolean }) => {
         }
     }, [tasksData.tasks]);
 
+    useIntersection(loadingRef, bottomBoundaryRef, fetchMoreTasks);
+
     if (isLoading) return <p>Loading...</p>;
 
     if (isError) return <p>{TASKS_FETCH_ERROR_MESSAGE}</p>;
+    const taskSelectOptions = TABS.map((item) => ({
+        label: getChangedStatusName(item),
+        value: item,
+    }));
 
     return (
         <div className={classNames.tasksContainer}>
-            <TabSection onSelect={onSelect} activeTab={selectedTab} />
+            <div
+                className={classNames['status-tabs-container']}
+                data-testid="status-tabs-container"
+            >
+                <TabSection onSelect={onSelect} activeTab={selectedTab} />
+            </div>
+            <div
+                className={classNames['status-select-container']}
+                data-testid="status-select-container"
+            >
+                <Select
+                    value={{
+                        label: getChangedStatusName(selectedTab),
+                        value: selectedTab,
+                    }}
+                    onChange={(selectedTaskStatus) => {
+                        if (selectedTaskStatus) {
+                            onSelect(selectedTaskStatus.value as Tab);
+                        }
+                    }}
+                    options={taskSelectOptions}
+                />
+            </div>
             <div>
                 <RenderTaskList
                     dev={dev}
@@ -121,15 +156,9 @@ export const TasksContent = ({ dev }: { dev: boolean }) => {
                 />
             </div>
 
-            {dev && (
-                <button
-                    className={classNames.loadMoreButton}
-                    onClick={fetchMoreTasks}
-                    disabled={!tasksData.next}
-                >
-                    {isFetching ? 'Loading...' : 'Load More'}
-                </button>
-            )}
+            <div ref={loadingRef}>{isFetching ? 'Loading...' : null}</div>
+
+            <div ref={bottomBoundaryRef}></div>
         </div>
     );
 };
diff --git a/src/hooks/useIntersection.ts b/src/hooks/useIntersection.ts
new file mode 100644
index 000000000..bab07e5e3
--- /dev/null
+++ b/src/hooks/useIntersection.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+
+const useIntersection = (
+    loadingRef: React.MutableRefObject<HTMLDivElement | null>,
+    bottomBoundaryRef: React.MutableRefObject<HTMLDivElement | null>,
+    onLoadMore: () => void
+) => {
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    const options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0,
+    };
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            setIsIntersecting(entry.isIntersecting);
+        }, options);
+
+        if (loadingRef.current) {
+            observer.observe(loadingRef.current);
+        }
+
+        return () => {
+            if (loadingRef.current) {
+                observer.unobserve(loadingRef.current);
+            }
+        };
+    }, [loadingRef]);
+
+    useEffect(() => {
+        if (isIntersecting) {
+            onLoadMore();
+        }
+    }, [isIntersecting, onLoadMore]);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            const bottomBoundaryRect =
+                bottomBoundaryRef.current?.getBoundingClientRect();
+            if (
+                bottomBoundaryRect &&
+                bottomBoundaryRect.top <= window.innerHeight
+            ) {
+                onLoadMore();
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [bottomBoundaryRef, onLoadMore]);
+};
+
+export default useIntersection;
diff --git a/src/interfaces/taskDetails.type.ts b/src/interfaces/taskDetails.type.ts
index f11825fb0..764fd39ab 100644
--- a/src/interfaces/taskDetails.type.ts
+++ b/src/interfaces/taskDetails.type.ts
@@ -6,6 +6,7 @@ export type taskDetailsDataType = {
         completionAward: { dinero: number; neelam: number };
         createdBy: string;
         endsOn: number;
+        purpose: string;
         isNoteworthy: boolean;
         dependsOn: string[];
         lossRate: { dinero: number; neelam: number };
@@ -15,17 +16,19 @@ export type taskDetailsDataType = {
         status: string;
         title: string;
         type: string;
+        participants: string[];
+        featureUrl: string;
     };
 };
 
 export type ButtonProps = {
     buttonName: string;
-    clickHandler: (value: any) => void;
+    clickHandler: (value: boolean) => void;
     value?: boolean;
 };
 export type TextAreaProps = {
     name: string;
-    value: string;
+    value: string | undefined;
     onChange: ChangeEventHandler;
     testId: string;
 };
@@ -37,6 +40,9 @@ export type TaskDependencyProps = {
     handleChange: (
         event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
     ) => void;
+    setEditedTaskDetails: React.Dispatch<
+        React.SetStateAction<taskDetailsDataType['taskData'] | undefined>
+    >;
 };
 export type DependencyListProps = {
     taskDependencyIds: string[];
diff --git a/src/styles/tasks.module.scss b/src/styles/tasks.module.scss
index a52b8d8c9..948a8c317 100644
--- a/src/styles/tasks.module.scss
+++ b/src/styles/tasks.module.scss
@@ -37,6 +37,21 @@ $disabledColor: gray;
     flex-wrap: wrap;
 }
 
+.status-tabs-container {
+    display: block;
+    @media (max-width: 450px) {
+        display: none;
+    }
+}
+
+.status-select-container {
+    display: none;
+    padding: 1rem;
+    @media (max-width: 450px) {
+        display: block;
+    }
+}
+
 .loadMoreButton {
     border: none;
     border-radius: 0.5rem;
diff --git a/src/types/Select.d.ts b/src/types/Select.d.ts
new file mode 100644
index 000000000..81053ed0c
--- /dev/null
+++ b/src/types/Select.d.ts
@@ -0,0 +1,13 @@
+export type SelectOption = {
+    label: string;
+    value: string | number;
+};
+
+export type SingleSelectProps = {
+    value?: SelectOption;
+    onChange: (value: SelectOption | undefined) => void;
+};
+
+export type SelectProps = {
+    options: SelectOption[];
+} & SingleSelectProps;
diff --git a/src/utils/getActiveTab.ts b/src/utils/getActiveTab.ts
index b5f2e746c..16ebb8b9a 100644
--- a/src/utils/getActiveTab.ts
+++ b/src/utils/getActiveTab.ts
@@ -6,9 +6,9 @@ export const getActiveTab = (section?: string): Tab => {
             return Tab.ASSIGNED;
         case 'available':
             return Tab.AVAILABLE;
-        case 'needs_review':
+        case 'needs-review':
             return Tab.NEEDS_REVIEW;
-        case 'in_review':
+        case 'in-review':
             return Tab.IN_REVIEW;
         case 'verified':
             return Tab.VERIFIED;
@@ -20,3 +20,16 @@ export const getActiveTab = (section?: string): Tab => {
             return Tab.IN_PROGRESS;
     }
 };
+
+export const tabToUrlParams = (section: Tab): string => {
+    switch (section) {
+        case Tab.NEEDS_REVIEW:
+            return 'needs-review';
+        case Tab.IN_REVIEW:
+            return 'in-review';
+        case Tab.IN_PROGRESS:
+            return 'in-progress';
+        default:
+            return section.toLowerCase();
+    }
+};
diff --git a/src/utils/getChangedStatusName.ts b/src/utils/getChangedStatusName.ts
new file mode 100644
index 000000000..e5fd3a4a0
--- /dev/null
+++ b/src/utils/getChangedStatusName.ts
@@ -0,0 +1,10 @@
+import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants';
+export function getChangedStatusName(name: string) {
+    if (name === COMPLETED) {
+        return DONE;
+    } else if (name === AVAILABLE) {
+        return UNASSINGED;
+    } else {
+        return name.split('_').join(' ');
+    }
+}