diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
index 36b8253fd..2fb8c5693 100644
--- a/src/hooks/useFetch.ts
+++ b/src/hooks/useFetch.ts
@@ -1,22 +1,28 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
+import fetch from '@/helperFunctions/fetch';
 
 const useFetch = (url: string, options: object = {}) => {
-  const [response, setResponse] = React.useState(null);
-  const [error, setError] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  React.useEffect(() => {
+  const [response, setResponse] = useState<any>({});
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
     (async () => {
       setIsLoading(true);
       try {
-        const res = await fetch(url, options);
-        const json = await res.json();
-        setResponse(json);
-        setIsLoading(false);
+        const res = await fetch({
+          url,
+          method: 'get',
+          ...options,
+        });
+        setResponse(res.data);
       } catch (err) {
         setError(err);
+      } finally {
+        setIsLoading(false);
       }
     })();
-  }, []);
+  }, [url]);
   return { response, error, isLoading };
 };
 
diff --git a/src/mocks/pullRequests.json b/src/mocks/pullRequests.json
deleted file mode 100644
index bc20d6707..000000000
--- a/src/mocks/pullRequests.json
+++ /dev/null
@@ -1,32 +0,0 @@
-[
-  {
-    "id": 1,
-    "title": "Create /users/:id for getting user details",
-    "completionDate": "In next 5 days",
-    "startedAt": "3 days ago",
-    "author": "Nikhil",
-    "profilePicture": "https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/nikhil/img.png",
-    "issueStatus": "PR Review",
-    "completionStatus": "pending"
-  },
-  {
-    "id": 2,
-    "title": "Create /users/:id for getting user details",
-    "completionDate": "In next 5 days",
-    "startedAt": "3 days ago",
-    "author": "Nikhil",
-    "profilePicture": "https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/nikhil/img.png",
-    "issueStatus": "PR Reviewed and Merged",
-    "completionStatus": "completed"
-  },
-  {
-    "id": 3,
-    "title": "Create /users/:id for getting user details",
-    "completionDate": "In next 5 days",
-    "startedAt": "3 days ago",
-    "author": "Nikhil",
-    "profilePicture": "https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/nikhil/img.png",
-    "issueStatus": "PR Reviewed and Merged",
-    "completionStatus": "completed"
-  }
-]
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5a42b2bf7..8bab4b73e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,41 +2,41 @@ import { FC, useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import Layout from '@/components/Layout';
 import Card from '@/components/tasks/card';
-import fetch from '@/helperFunctions/fetch';
+import useFetch from '@/hooks/useFetch';
 import classNames from '@/styles/tasks.module.scss';
 import { task } from '@/components/constants/types';
 
 const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks`;
 
+const renderCardList = (tasks: task[]) => tasks.map(
+  (item: task) => <Card content={item} key={item.id} />,
+);
+
 const Index: FC = () => {
   const [tasks, setTasks] = useState<task[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
-      const response = await fetch({
-        url: TASKS_URL,
-      });
-      setTasks(response.data.tasks);
-      setLoading(false);
-    })();
-  }, []);
+  const [activeTasks, setActiveTasks] = useState<any>(null);
+  const [completeTasks, setCompleteTasks] = useState<any>(null);
 
-  const completedTasks = tasks.filter(
-    (item: task) => item.status === 'Active',
-  );
-  const incompleteTasks = tasks.filter(
-    (item: task) => item.status !== 'Active',
-  );
+  const {
+    response,
+    error,
+    isLoading,
+  } = useFetch(TASKS_URL);
 
-  const activeCards = completedTasks.map(
-    (item: task) => <Card content={item} key={item.id} />,
-  );
+  useEffect(() => {
+    if ('tasks' in response) {
+      setTasks(response.tasks);
+      const active = tasks.filter(
+        (item: task) => item.status === 'Active',
+      );
+      setActiveTasks(active);
 
-  const incompletedCards = incompleteTasks.map(
-    (item: task) => <Card content={item} key={item.id} />,
-  );
+      const complete = tasks.filter(
+        (item: task) => item.status !== 'Active',
+      );
+      setCompleteTasks(complete);
+    }
+  }, [isLoading, response]);
 
   return (
     <Layout>
@@ -46,7 +46,12 @@ const Index: FC = () => {
 
       <div className="container">
         {
-          (loading)
+          (!!error) && (
+            <p>Something went wrong, please contact admin!</p>
+          )
+        }
+        {
+          (isLoading)
             ? (
               <p>Loading...</p>
             )
@@ -54,11 +59,15 @@ const Index: FC = () => {
               <>
                 <div className={classNames.section}>
                   <div className={classNames.heading}>Active</div>
-                  <div className={classNames.cardContainer}>{activeCards}</div>
+                  <div className={classNames.cardContainer}>
+                    {renderCardList(activeTasks)}
+                  </div>
                 </div>
                 <div className={classNames.section}>
                   <div className={classNames.heading}>Completed</div>
-                  <div className={classNames.cardContainer}>{incompletedCards}</div>
+                  <div className={classNames.cardContainer}>
+                    {renderCardList(completeTasks)}
+                  </div>
                 </div>
               </>
             )