diff --git a/src/Router.test.tsx b/src/Router.test.tsx
index d302770..1e3fd08 100644
--- a/src/Router.test.tsx
+++ b/src/Router.test.tsx
@@ -1,11 +1,13 @@
 import userEvent from "@testing-library/user-event";
 import { Router } from "./Router";
 import { render, screen, waitFor } from "./utility/test-utils";
+import { MemoryRouter } from "react-router-dom";
+import { ReactNode } from "react";
+
+
 
-vitest.mock("./pages/SignIn", () => ({
-  SignIn: () => <div>SignIn page</div>,
-}));
 
+// Mocking the SignUp module and providing PasswordSchema export
 vitest.mock("./pages/SignUp", () => ({
   SignUp: () => <div>SignUp page</div>,
   PasswordSchema: vitest.fn().mockResolvedValue({}),
@@ -39,16 +41,33 @@ vitest.mock("./pages/ReviewAnswersPage", () => ({
   ReviewAnswersPage: () => <div>Review Answers page</div>,
 }));
 
+vitest.mock("./pages/NotFound", () => ({
+  NotFound: () => <div>Page Not Found</div>,
+}));
+
+
+// Mocking PrivateRoute and PublicRoute components
+vi.mock('./components/PrivateRoute', () => ({
+  PrivateRoute: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('./components/PublicRoute', () => ({
+  PublicRoute: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
+
 describe("Router", () => {
-  it("should render signin page", async () => {
+  // Test for rendering SignIn page
+  it("Should render signin page", async () => {
     render(<Router />, { initialEntries: ["/signin"], authState: {} });
 
     await waitFor(() => {
-      expect(screen.getByText("SignIn page")).toBeInTheDocument();
+      expect(screen.getByText("Sign In")).toBeInTheDocument();
     });
   });
 
-  it("should render signup page", async () => {
+  // Test for rendering SignUp page
+  it("Should render signup page", async () => {
     render(<Router />, { initialEntries: ["/signup"], authState: {} });
 
     await waitFor(() => {
@@ -56,7 +75,8 @@ describe("Router", () => {
     });
   });
 
-  it("should render forgot password page", async () => {
+  // Test for rendering ForgotPassword page
+  it("Should render forgot password page", async () => {
     render(<Router />, { initialEntries: ["/forgot-password"], authState: {} });
 
     await waitFor(() => {
@@ -64,27 +84,55 @@ describe("Router", () => {
     });
   });
 
-  describe("should render annotation routes when app is in annotation state", () => {
-    it("Should render documents page when the app state is annotation", async () => {
-      render(<Router />);
+ // Mocking jwt-decode
+vitest.mock('jwt-decode', () => ({
+  __esModule: true,
+  default: vitest.fn(() => ({
+    sub: "userId", // Example mock token payload
+    exp: Math.floor(Date.now() / 1000) + 60 * 60, // 1 hour from now
+    role: "admin", // Example role
+  })),
+}));
+
+describe("should render annotation routes when app is in annotation state", () => {
+    it("should render documents page when the app state is annotation", async () => {
+      render(<Router />, {
+        initialEntries: ["/"],
+        appConfig: { app_state: "annotation" },
+      });
 
-      expect(screen.getByText("DocumentsList page")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("DocumentsList page")).toBeInTheDocument();
+      });
     });
 
     it("Should render my answers page when route is answers", async () => {
-      render(<Router />, { initialEntries: ["/answers"] });
+      render(<Router />, {
+        initialEntries: ["/answers"],
+        appConfig: { app_state: "annotation" },
+      });
 
-      expect(screen.getByText("MyAnswersList page")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("MyAnswersList page")).toBeInTheDocument();
+      });
     });
 
-    it("Should render Annotations when the route is annotate", async () => {
-      render(<Router />, { initialEntries: ["/annotate/file-1"] });
+    it("Should render Annotation page when the route is annotate", async () => {
+      render(<Router />, {
+        initialEntries: ["/annotate/file-1"],
+        appConfig: { app_state: "annotation" },
+      });
 
-      expect(screen.getByText("Annotation page")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("Annotation page")).toBeInTheDocument();
+      });
     });
 
     it("Should expand drawer to show the name of navigation item", async () => {
-      render(<Router />, { initialEntries: ["/annotate/file-1"] });
+      render(<Router />, {
+        initialEntries: ["/annotate/file-1"],
+        appConfig: { app_state: "annotation" },
+      });
 
       expect(screen.getByText("Annotation page")).toBeInTheDocument();
 
@@ -96,9 +144,14 @@ describe("Router", () => {
     });
 
     it("Should render DocumentAnswers page when route is answers/id", async () => {
-      render(<Router />, { initialEntries: ["/answers/file-1"] });
+      render(<Router />, {
+        initialEntries: ["/answers/file-1"],
+        appConfig: { app_state: "annotation" },
+      });
 
-      expect(screen.getByText("Document Answers page")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("Document Answers page")).toBeInTheDocument();
+      });
     });
   });
 
@@ -109,16 +162,20 @@ describe("Router", () => {
         appConfig: { app_state: "review" },
       });
 
-      expect(screen.getByText("Review Documents page")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("Review Documents page")).toBeInTheDocument();
+      });
     });
 
-    it("should render review qna  page", async () => {
+    it("should render review qna page", async () => {
       render(<Router />, {
-        initialEntries: ["/review/doc-1"],
+        initialEntries: ["/review/answers/doc-1"],
         appConfig: { app_state: "review" },
       });
 
-      expect(screen.getByText("Review Answers page")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("Review Answers page")).toBeInTheDocument();
+      });
     });
 
     it("should not render any annotation pages when state is review", async () => {
@@ -127,7 +184,22 @@ describe("Router", () => {
         appConfig: { app_state: "review" },
       });
 
-      expect(screen.getByText("Page Not Found")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText("Page Not Found")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("should handle invalid routes", () => {
+    it("should render the NotFound page when an invalid route is accessed", async () => {
+      render(<Router />, {
+        initialEntries: ["/non-existent-route"],
+        appConfig: { app_state: "annotation" },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Page Not Found")).toBeInTheDocument();
+      });
     });
   });
 });
diff --git a/src/Router.tsx b/src/Router.tsx
index 439e4f4..6995633 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,4 +1,4 @@
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { AppLayout } from "./components/AppLayout";
 import { PrivateRoute } from "./components/PrivateRoute";
 import { PublicRoute } from "./components/PublicRoute";
@@ -15,10 +15,20 @@ import { ReviewDocumentsList } from "./pages/ReviewDocumentsList";
 import { SignIn } from "./pages/SignIn";
 import { SignUp } from "./pages/SignUp";
 import { AdminPage } from "./pages/AdminPage";
+import { UserDetailContent } from "./pages/AdminPageComponents/UserDetailContent";
+import { MainContent } from "./pages/AdminPageComponents/MainContent";
+import { QuesListDataset } from "./pages/AdminPageComponents/QuesListDataset";
+import { useState } from "react";
+import { DatasetInfo } from "./pages/AdminPageComponents/DatasetInfoContent";
+import { QuesDatasetContent } from "./pages/AdminPageComponents/QuesDatasetContent";
+import { QuesDetail } from "./pages/AdminPageComponents/QuesDetail";
 
 export const Router = () => {
   const { app_state } = useAppConfig();
+  const [selectedDataset, setSelectedDataset] = useState<any | null>(null);
+  const navigate = useNavigate(); // Hook to navigate programmatically
 
+  // Determine the home route based on the app_state
   const homeRoute = (() => {
     switch (app_state) {
       case "annotation":
@@ -32,8 +42,19 @@ export const Router = () => {
     }
   })();
 
+  // Update `onDatasetClick` to navigate and pass dataset via state
+  const onDatasetClick = (dataset: any) => {
+    setSelectedDataset(dataset);
+    console.log('Selected dataset:', dataset);
+    // Navigate to the DatasetInfo page and pass the dataset via state
+    navigate(`/admin/dataset/${dataset.id}`, {
+      state: { dataset }
+    });
+  };
+
   return (
     <Routes>
+      {/* Public Routes */}
       <Route
         path="/signup"
         element={
@@ -66,6 +87,8 @@ export const Router = () => {
           </PublicRoute>
         }
       />
+
+      {/* Admin Routes */}
       <Route
         path="/admin"
         element={
@@ -73,9 +96,37 @@ export const Router = () => {
             <AdminPage />
           </PrivateRoute>
         }
-      />
+      >
+        {/* Admin Sub-routes */}
+        <Route
+          path="users"
+          element={<UserDetailContent />}
+        />
+        <Route
+          path=""
+          element={<MainContent />}
+        />
+        <Route
+          path="dataset/:datasetId"
+          element={<DatasetInfo />}
+        />
+        <Route
+          path="qna"
+          element={<QuesListDataset />} // Pass onDatasetClick to QuesListDataset
+        />
+        <Route
+          path="qna/:datasetId"
+          element={<QuesDatasetContent/>} // Pass onDatasetClick to QuesListDataset
+        />
+        <Route
+          path="qna/:datasetId/:fileId"
+          element={<QuesDetail/>} // Pass onDatasetClick to QuesListDataset
+        />
+      </Route>
 
+      {/* App Layout Routes */}
       <Route element={<AppLayout />}>
+        {/* Default Home Route Based on app_state */}
         <Route
           path="/"
           element={
@@ -127,7 +178,7 @@ export const Router = () => {
               }
             />
             <Route
-              path="/review/:documentId"
+              path="/review/answers/:documentId"
               element={
                 <PrivateRoute>
                   <ReviewAnswersPage />
@@ -137,7 +188,9 @@ export const Router = () => {
           </>
         )}
       </Route>
+
+      {/* Catch All Route */}
       <Route path="*" element={<NotFound />} />
     </Routes>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/DocumentInfoItem.tsx b/src/components/DocumentInfoItem.tsx
index c8daaf0..1db8602 100644
--- a/src/components/DocumentInfoItem.tsx
+++ b/src/components/DocumentInfoItem.tsx
@@ -1,4 +1,5 @@
 import TextSnippetIcon from "@mui/icons-material/TextSnippet";
+import QuestionAnswer from "@mui/icons-material/QuestionAnswer";
 import {
   Avatar,
   Box,
@@ -7,9 +8,6 @@ import {
   Typography,
   styled,
 } from "@mui/material";
-import LinearProgress, {
-  linearProgressClasses,
-} from "@mui/material/LinearProgress";
 import React from "react";
 
 type DocumentInfoItemProps = {
@@ -18,17 +16,17 @@ type DocumentInfoItemProps = {
   children: React.ReactNode;
 };
 
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 5,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[600],
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 5,
-    backgroundColor: "#308fe8",
-  },
-}));
+// const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+//   height: 10,
+//   borderRadius: 5,
+//   [`&.${linearProgressClasses.colorPrimary}`]: {
+//     backgroundColor: theme.palette.grey[600],
+//   },
+//   [`& .${linearProgressClasses.bar}`]: {
+//     borderRadius: 5,
+//     backgroundColor: "#308fe8",
+//   },
+// }));
 
 const DocumentInfoItem = ({ id, onClick, children }: DocumentInfoItemProps) => (
   <Card
@@ -55,51 +53,43 @@ const DocumentInfoItem = ({ id, onClick, children }: DocumentInfoItemProps) => (
 
 DocumentInfoItem.Title = ({ file_name }: { file_name: string }) => (
   <Box sx={{ display: "flex", gap: "8px", alignItems: "center" }}>
-    <TextSnippetIcon fontSize={"small"} />
-    <Typography noWrap>{file_name}</Typography>
+    <TextSnippetIcon fontSize={"medium"} />
+    <Typography fontSize={"24px"}noWrap>{file_name}</Typography>
   </Box>
 );
 
-DocumentInfoItem.LastEditedBy = ({
-  last_edited_by,
-}: {
-  last_edited_by: string;
-}) => (
-  <Box sx={{ display: "flex", gap: "8px", alignItems: "center" }}>
-    <Typography>Last Edited by</Typography>
-    <Avatar sx={{ height: "24px", width: "24px", fontSize: "16px" }}>
-      {last_edited_by.charAt(0)}
-    </Avatar>
-  </Box>
-);
+// DocumentInfoItem.LastEditedBy = ({
+//   last_edited_by,
+// }: {
+//   last_edited_by: string;
+// }) => (
+//   <Box sx={{ display: "flex", gap: "8px", alignItems: "center" }}>
+//     <Typography>Last Edited by</Typography>
+//     <Avatar sx={{ height: "24px", width: "24px", fontSize: "16px" }}>
+//       {last_edited_by.charAt(0)}
+//     </Avatar>
+//   </Box>
+// );
 
-DocumentInfoItem.ProgressBar = ({
-  number_of_questions,
-  max_questions,
-}: {
-  number_of_questions: number;
-  max_questions: number;
-}) => (
-  <Box
+DocumentInfoItem.TotalQna = ({number_of_questions}: {number_of_questions: number}) => (
+  <Box sx={{ display: "flex", gap: "8px", alignItems: "center"}}>
+    <QuestionAnswer fontSize={"medium"}/>
+    <Typography fontSize={"15px"} noWrap>Total Number of Questions: {`${number_of_questions}`}</Typography>
+  </Box> 
+/* <Box
     sx={{
       flex: "1 0 auto",
       display: "flex",
       justifyContent: {
-        md: "end",
+        md: "start",
       },
       alignItems: "center",
-      gap: "16px",
+      gap: "8px",
     }}
   >
-    <BorderLinearProgress
-      sx={{ width: "200px", height: "8px", borderRadius: "48px" }}
-      variant="determinate"
-      value={(number_of_questions / max_questions) * 100}
-    />
-    <Typography
-      textAlign={"right"}
-    >{`${number_of_questions}/${max_questions}`}</Typography>
-  </Box>
+    <QuestionAnswer fontSize={"small"}/>
+    <Typography textAlign={"left"}>Total Number of Questions: {`${number_of_questions}`}</Typography>
+  </Box> */
 );
 
 DocumentInfoItem.Actions = ({ children }: { children: React.ReactNode }) => (
diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx
index 6544dc2..0906e71 100644
--- a/src/components/PrivateRoute.tsx
+++ b/src/components/PrivateRoute.tsx
@@ -1,3 +1,36 @@
+// import { PropsWithChildren } from "react";
+// import { Navigate } from "react-router-dom";
+// import { useAuth } from "../hooks/useAuth";
+// import { jwtDecode } from "jwt-decode";
+
+// type JWTDecoded = {
+//   username: string;
+//   role: string[];
+//   exp: number;
+// };
+
+// export const PrivateRoute = ({ children }: PropsWithChildren) => {
+//   const { auth } = useAuth();
+//   const token = auth.accessToken ?? "";
+
+//   if (!token) {
+//     return <Navigate to="/signin" />;
+//   }
+
+//   const decodedToken: JWTDecoded = jwtDecode(token);
+
+//   if (window.location.pathname === '/admin' && !decodedToken.role.includes("Admin")) {
+//     return <Navigate to="/" />;
+//   }
+
+//   if (window.location.pathname !== '/admin' && decodedToken.role.includes("Admin")) {
+//     return <Navigate to="/admin" />;
+//   }
+
+//   return <>{children}</>;
+// };
+
+
 import { PropsWithChildren } from "react";
 import { Navigate } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
@@ -18,12 +51,18 @@ export const PrivateRoute = ({ children }: PropsWithChildren) => {
   }
 
   const decodedToken: JWTDecoded = jwtDecode(token);
+  
+
+  // Check if the user is accessing an admin-only page
+  const isAdmin = decodedToken.role.includes("Admin");
 
-  if (window.location.pathname === '/admin' && !decodedToken.role.includes("Admin")) {
+  // Allow access to `/admin/user` and other `/admin/*` routes if the user is an admin
+  if (window.location.pathname.startsWith('/admin') && !isAdmin) {
     return <Navigate to="/" />;
   }
 
-  if (window.location.pathname !== '/admin' && decodedToken.role.includes("Admin")) {
+  // Redirect to the admin page if the user is an admin and tries to go to a non-admin page
+  if (!window.location.pathname.startsWith('/admin') && isAdmin) {
     return <Navigate to="/admin" />;
   }
 
diff --git a/src/pages/AdminPage.tsx b/src/pages/AdminPage.tsx
index 2c97342..d7a51c6 100644
--- a/src/pages/AdminPage.tsx
+++ b/src/pages/AdminPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Box, Typography } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import DatasetsIcon from '../assets/Datasets.png';
 import UserItemIcon from '../assets/UserList.png';
 import QnAIcon from '../assets/Questionmark.png';
@@ -10,8 +10,8 @@ import { DatasetInfo } from './AdminPageComponents/DatasetInfoContent';
 import { MainContent } from './AdminPageComponents/MainContent';
 import useAxios from '../hooks/useAxios';
 import { toast } from 'react-toastify';
-import UserDetailContent from './AdminPageComponents/UserDetailContent';
-import {QuestionListDataset} from './AdminPageComponents/QuesListDataset';
+import { UserDetailContent } from './AdminPageComponents/UserDetailContent';
+import { QuesListDataset } from './AdminPageComponents/QuesListDataset';
 import { QuesDatasetContent } from './AdminPageComponents/QuesDatasetContent';
 
 const styles = {
@@ -74,9 +74,10 @@ interface SidebarItemProps {
   pngSrc: string;
   label: string;
   onClick: () => void;
+  isActive: boolean;
 }
 
-const SidebarItem: React.FC<SidebarItemProps & { isActive: boolean }> = ({ pngSrc, label, onClick, isActive }) => (
+const SidebarItem: React.FC<SidebarItemProps> = ({ pngSrc, label, onClick, isActive }) => (
   <Box
     onClick={onClick}
     sx={{
@@ -101,8 +102,8 @@ export const AdminPage = () => {
   const { makeRequest } = useAxios<any>();
   const { setAuth } = useAuth();
   const navigate = useNavigate();
-  const [selectedDataset, setSelectedDataset] = useState<any | null>(null);
-  const [selectedQuesDataset, setSelectedQuesDataset] = useState<any | null>(null);
+  const location = useLocation();
+  const [selectedDataset, setSelectedDataset] = useState<any | null>(null); 
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [currentPage, setCurrentPage] = useState<PageState>(PageState.Datasets);
 
@@ -145,43 +146,27 @@ export const AdminPage = () => {
     navigate('/signin');
   };
 
-  const onDatasetClick = (dataset: any) => {
-    setSelectedDataset(dataset);
-    setCurrentPage(PageState.Datasets); 
-  };
-
-  const onQuesDatasetClick = (dataset: any)=> {
-    setSelectedQuesDataset(dataset);
-    setCurrentPage(PageState.QnA);
-  }
-
   const handleSidebarClick = (page: PageState) => {
     if (page === PageState.Datasets && selectedDataset) {
       setSelectedDataset(null); // Reset dataset selection when clicking on Datasets again
     }
-    else if (page === PageState.QnA && selectedQuesDataset) {
-      setSelectedQuesDataset(null); // Reset dataset selection when clicking on Datasets again
+    if (page === PageState.QnA) {
+      navigate('/admin/qna'); // Navigate to the Qna route
     }
-    
+
+    if (page === PageState.Users) {
+      navigate('/admin/users'); // Navigate to the Users route
+    }
+
+    if (page === PageState.Datasets) {
+      navigate('/admin'); // Navigate to the Datasets route
+    }
+
     setCurrentPage(page);
   };
 
   const renderPageContent = () => {
     switch (currentPage) {
-      case PageState.Datasets:
-        return selectedDataset ? (
-          <DatasetInfo dataset={selectedDataset} handleBack={() => setCurrentPage(PageState.Datasets)} />
-        ) : (
-          <MainContent onDatasetClick={onDatasetClick} />
-        );
-      case PageState.Users:
-        return <UserDetailContent />;
-      case PageState.QnA:
-        return selectedQuesDataset? (
-          <QuesDatasetContent dataset={selectedQuesDataset} handleBack={() => setCurrentPage(PageState.QnA)} />
-        ) : (
-          <QuestionListDataset onDatasetClick={onQuesDatasetClick} />
-        );
       case PageState.Logout:
         handleLogOut();
         return null;
@@ -190,6 +175,13 @@ export const AdminPage = () => {
     }
   };
 
+  const getCurrentRoute = () => {
+    if (location.pathname.includes('datasets')) return PageState.Datasets;
+    if (location.pathname.includes('users')) return PageState.Users;
+    if (location.pathname.includes('qna')) return PageState.QnA;
+    return PageState.Datasets;
+  };
+
   return (
     <Box sx={{ position: 'fixed', minHeight: '100vh', minWidth: '100vw', top: '0', left: '0', backgroundColor: '#f5f5f5' }}>
       <Box sx={styles.container}>
@@ -208,23 +200,23 @@ export const AdminPage = () => {
           </Box>
         </Box>
         <Box sx={{ ...styles.sidebar, ...(sidebarOpen ? {} : styles.sidebarHidden) }} data-testid="sidebar">
-        <SidebarItem
+          <SidebarItem
             pngSrc={DatasetsIcon}
             label="Datasets"
             onClick={() => handleSidebarClick(PageState.Datasets)}
-            isActive={currentPage === PageState.Datasets}
+            isActive={getCurrentRoute() === PageState.Datasets}
           />
           <SidebarItem
             pngSrc={UserItemIcon}
             label="Users"
             onClick={() => handleSidebarClick(PageState.Users)}
-            isActive={currentPage === PageState.Users}
+            isActive={getCurrentRoute() === PageState.Users}
           />
           <SidebarItem
             pngSrc={QnAIcon}
             label="Q&A"
             onClick={() => handleSidebarClick(PageState.QnA)}
-            isActive={currentPage === PageState.QnA}
+            isActive={getCurrentRoute() === PageState.QnA}
           />
           <SidebarItem
             pngSrc={LogoutIcon}
@@ -235,6 +227,7 @@ export const AdminPage = () => {
         </Box>
         <Box sx={{ ...styles.content, ...(sidebarOpen ? { marginLeft: '240px' } : {}) }}>
           {renderPageContent()}
+          <Outlet />
         </Box>
       </Box>
     </Box>
diff --git a/src/pages/AdminPageComponents/DatasetInfoContent.tsx b/src/pages/AdminPageComponents/DatasetInfoContent.tsx
index 46452c7..658d1c7 100644
--- a/src/pages/AdminPageComponents/DatasetInfoContent.tsx
+++ b/src/pages/AdminPageComponents/DatasetInfoContent.tsx
@@ -4,25 +4,14 @@ import useAxios from '../../hooks/useAxios';
 import { toast } from 'react-toastify';
 import IndexDatasetForm from '../../components/IndexDatasetForm';
 import { LoadingSpinner } from "../../components/LoadingSpinner";
-import AssignmentForm from '../../components/AssignmentForm';  //Import for AssignmentForm
-
-interface DatasetInfoProps {
-  dataset: {
-    id: string;
-    name: string;
-    created_at: string;
-    created_by: string;
-    status: string;
-    description?: string;
-  };
-  handleBack: () => void;
-}
+import AssignmentForm from '../../components/AssignmentForm';  // Import for AssignmentForm
+import { useLocation, useNavigate } from 'react-router-dom';
 
 interface FileInfo {
   id: string;
-  annotator : string;
-  reviewer : string;
-  file_name : string;
+  annotator: string;
+  reviewer: string;
+  file_name: string;
   size: string;
   status: string;
 }
@@ -43,8 +32,7 @@ interface UserRole {
 const styles = {
   container: {
     padding: '30px',
-    color: 'black', 
-    
+    color: 'black',
   },
   header: {
     display: 'flex',
@@ -89,13 +77,13 @@ const styles = {
   tableCellHeader: {
     fontWeight: 'bold',
     color: 'black',
-    borderTop: '1px solid grey', 
+    borderTop: '1px solid grey',
     borderLeft: '2px solid #333',
     borderRight: '2px solid #333',
   },
   tableCell: {
     color: 'black',
-    borderTop: '2px solid lightGrey', 
+    borderTop: '2px solid lightGrey',
     borderLeft: '2px solid #333',
     borderRight: '2px solid #333',
   },
@@ -106,37 +94,35 @@ const styles = {
   },
 };
 
-
-export const DatasetInfo: React.FC<DatasetInfoProps> = ({ dataset }) => {
-  
+export const DatasetInfo: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const { makeRequest } = useAxios<any>();
   const [files, setFiles] = useState<FileInfo[]>([]);
   const [isIndexDatasetFormVisible, setIsIndexDatasetFormVisible] = useState(false);
   const [isAnnotatorReviewerFormVisible, setIsAnnotatorReviewerFormVisible] = useState(false);
-  const [datasetState, setDatasetState] = useState(dataset);
+  const [datasetState, setDatasetState] = useState(location.state?.dataset || {});
   const [isLoading, setIsLoading] = useState(true);
-  const [selectedDocument, setSelectedDocument] = useState<FileInfo|null>(null);
-  const [annotators,SetAnnotators] = useState<UserRole[]|null>(null);
-  const [reviewers,SetReviewers] = useState<UserRole[]|null>(null);
-  const [allAnnotatorsAssigned, SetallAnnotatorsAssigned] = useState<Boolean>(false);
-  const [availablePeopleList, setAvailablePeopleList] = useState<UserRole[]|null>(null);
-  const [annotatorReviewerType,setAnnotatorReviewerType] = useState<string|null>(null);
+  const [selectedDocument, setSelectedDocument] = useState<FileInfo | null>(null);
+  const [annotators, setAnnotators] = useState<UserRole[] | null>(null);
+  const [reviewers, setReviewers] = useState<UserRole[] | null>(null);
+  const [allAnnotatorsAssigned, setAllAnnotatorsAssigned] = useState<Boolean>(false);
+  const [availablePeopleList, setAvailablePeopleList] = useState<UserRole[] | null>(null);
+  const [annotatorReviewerType, setAnnotatorReviewerType] = useState<string | null>(null);
 
   const fetchDatasetInfo = async () => {
-    setDatasetState(dataset);
+    setDatasetState(location.state?.dataset || {});
     try {
-      const response:FileInfo[] = await makeRequest(`admin/datasets/${datasetState.id}`, 'GET');
+      const response: FileInfo[] = await makeRequest(`admin/datasets/${datasetState.id}`, 'GET');
       if (response) {
-        // console.log(response);
-
         let allAssigned = true;
-        response.forEach(element => {
-          if(element.annotator==null){
-            allAssigned=false;
+        response.forEach((element) => {
+          if (element.annotator == null) {
+            allAssigned = false;
           }
         });
 
-        SetallAnnotatorsAssigned(allAssigned);
+        setAllAnnotatorsAssigned(allAssigned);
         setFiles(response);
         setIsLoading(false);
       }
@@ -146,34 +132,32 @@ export const DatasetInfo: React.FC<DatasetInfoProps> = ({ dataset }) => {
     }
   };
 
-  const fetchRolesInfoAndSet = ()=>{
-
+  const fetchRolesInfoAndSet = () => {
     function fetchFromLocalStorage<T>(key: string): T {
       const data = localStorage.getItem(key);
       return data ? JSON.parse(data) : null;
     }
-    
+
     const roles: Role[] = fetchFromLocalStorage<Role[]>('AllRoles') || [];
     const userRoles: UserRole[] = fetchFromLocalStorage<UserRole[]>('UserRoles') || [];
-    
+
     function getRoleName(role_id: string): string | undefined {
-      const role = roles.find(role => role.role_id === role_id);
+      const role = roles.find((role) => role.role_id === role_id);
       return role ? role.role_name : undefined;
     }
-    
+
     function getUsersByRole(userRoles: UserRole[], roleName: string): UserRole[] {
-      return userRoles.filter(user =>
-        user.roles.some(role_id => getRoleName(role_id) === roleName)
+      return userRoles.filter((user) =>
+        user.roles.some((role_id) => getRoleName(role_id) === roleName)
       );
     }
-    
-    const annotators = getUsersByRole(userRoles, "Annotator");
-    const reviewers = getUsersByRole(userRoles, "Reviewer");
 
-    SetAnnotators(annotators);
-    SetReviewers(reviewers);
+    const annotators = getUsersByRole(userRoles, 'Annotator');
+    const reviewers = getUsersByRole(userRoles, 'Reviewer');
 
-  }
+    setAnnotators(annotators);
+    setReviewers(reviewers);
+  };
 
   useEffect(() => {
     fetchDatasetInfo();
@@ -183,11 +167,12 @@ export const DatasetInfo: React.FC<DatasetInfoProps> = ({ dataset }) => {
   const handleIndexDataset = () => {
     toast.info('Indexing dataset...');
   };
+
   const handleIndexDatasetOpen = () => {
     setIsIndexDatasetFormVisible(true);
   };
 
-  const handleAnnotatorAssignRandom = async ()=>{
+  const handleAnnotatorAssignRandom = async () => {
     try {
       const response = await makeRequest(`admin/datasets/${datasetState.id}/random-annotator-assignment`, 'POST');
       if (response) {
@@ -197,87 +182,75 @@ export const DatasetInfo: React.FC<DatasetInfoProps> = ({ dataset }) => {
     } catch (err) {
       toast.error(`Error fetching dataset info: ${err}`);
     }
-  }
+  };
 
   const handleIndexDatasetClose = (successStatus: Boolean) => {
     if (successStatus) {
       fetchDatasetInfo();
-      setDatasetState({...datasetState,status:"Indexed"});
+      setDatasetState({ ...datasetState, status: 'Indexed' });
     }
     setIsIndexDatasetFormVisible(false);
   };
 
-  const handleAssignPersonClose = (successStatus: Boolean)=>{
+  const handleAssignPersonClose = (successStatus: Boolean) => {
     if (successStatus) {
       fetchDatasetInfo();
-      setDatasetState({...datasetState,status:"Indexed"});
+      setDatasetState({ ...datasetState, status: 'Indexed' });
     }
     setIsAnnotatorReviewerFormVisible(false);
-  }
+  };
 
-  const handleAssignPersonOpen = (file: FileInfo, type: string )=>{
-    // console.log(annotators,reviewers);
+  const handleAssignPersonOpen = (file: FileInfo, type: string) => {
     setAnnotatorReviewerType(type);
-    if(type=="annotator"){
-      setAvailablePeopleList(annotators)
-    }
-    else if ((type=="reviewer")){
-      setAvailablePeopleList(reviewers)
+    if (type == 'annotator') {
+      setAvailablePeopleList(annotators);
+    } else if (type == 'reviewer') {
+      setAvailablePeopleList(reviewers);
     }
-    
+
     setSelectedDocument(file);
     setIsAnnotatorReviewerFormVisible(true);
-  }
+  };
 
-  if(isLoading){
-    return(    
-      <LoadingSpinner/>
-    );
+  if (isLoading) {
+    return <LoadingSpinner />;
   }
 
   return (
     <Box sx={styles.container}>
-      <AssignmentForm open={isAnnotatorReviewerFormVisible} 
-        handleClose={(successStatus: Boolean) => handleAssignPersonClose(successStatus)} 
-        availableEntities={availablePeopleList?.map(person => ({id: person.id, name: person.username})) ?? []} 
-        type={annotatorReviewerType ?? ""} 
-        additionalData={{user_name:"", user_id:"", documentID: selectedDocument?.id}} 
-        submitUrl={'admin/datasets/${documentID}/document-assignment'}
-        requestMethod={'POST'}/>
-      <IndexDatasetForm open={isIndexDatasetFormVisible} handleClose={(successStatus:Boolean)=>handleIndexDatasetClose(successStatus)} datasetID={datasetState.id}/>
+      <AssignmentForm
+        open={isAnnotatorReviewerFormVisible}
+        handleClose={(successStatus: Boolean) => handleAssignPersonClose(successStatus)}
+        availableEntities={availablePeopleList?.map((person) => ({ id: person.id, name: person.username })) ?? []}
+        type={annotatorReviewerType ?? ''}
+        additionalData={{ user_name: '', user_id: '', documentID: selectedDocument?.id }}
+        submitUrl={`admin/datasets/${selectedDocument?.id}/document-assignment`}
+        requestMethod={'POST'}
+      />
+      <IndexDatasetForm open={isIndexDatasetFormVisible} handleClose={(successStatus: Boolean) => handleIndexDatasetClose(successStatus)} datasetID={datasetState.id} />
       <Box sx={styles.header}>
         <Typography variant="h5" sx={styles.datasetName}>
           {datasetState.name}
         </Typography>
-        {datasetState.status!="Indexed" ? 
-          <div style={{'display':'flex','alignItems':'center','justifyContent':'center','gap':'20px'}}> 
-            <Button
-              sx={{ backgroundColor: "#2196F3", fontWeight: '400' }}
-              variant="contained"
-              color="primary"
-              size="large"
-              onClick={handleIndexDatasetOpen}
-            >
+        {datasetState.status !== 'Indexed' ? (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '20px' }}>
+            <Button sx={{ backgroundColor: '#2196F3', fontWeight: '400' }} variant="contained" color="primary" size="large" onClick={handleIndexDatasetOpen}>
               INDEX DATASET
             </Button>
-            {!allAnnotatorsAssigned?<Button
-              sx={{ backgroundColor: "#2196F3", fontWeight: '400' }}
-              variant="contained"
-              color="primary"
-              size="medium"
-              onClick={handleAnnotatorAssignRandom}
-            >
-              Assign Annotators
-            </Button>:<></>}
-          </div> 
-         : <></>
-        
-        }
-        
-        
+            {!allAnnotatorsAssigned ? (
+              <Button sx={{ backgroundColor: '#2196F3', fontWeight: '400' }} variant="contained" color="primary" size="medium" onClick={handleAnnotatorAssignRandom}>
+                Assign Annotators
+              </Button>
+            ) : (
+              <></>
+            )}
+          </div>
+        ) : (
+          <></>
+        )}
       </Box>
       <TableContainer component={Paper} sx={styles.tableContainer}>
-        <Table sx={{border:'2px solid black'}}>
+        <Table sx={{ border: '2px solid black' }}>
           <TableHead sx={styles.tableHeader}>
             <TableRow>
               <TableCell sx={styles.tableCellHeader}>Filename</TableCell>
@@ -290,53 +263,82 @@ export const DatasetInfo: React.FC<DatasetInfoProps> = ({ dataset }) => {
           <TableBody sx={styles.tableBody}>
             {files.map((file, index) => (
               <TableRow key={index}>
-              <TableCell sx={styles.tableCell}>{file.file_name}</TableCell>
-              <TableCell sx={styles.tableCell}>{`${file.size} Bytes`}</TableCell>
-              <TableCell sx={styles.tableCell}>{file.status}</TableCell>
-              <TableCell sx={styles.tableCell}>
-                {file.annotator ? <div style={{display:'flex', justifyContent:'space-between'}}>{file.annotator} {<svg onClick={()=>handleAssignPersonOpen(file,"annotator")} style={{margin:'0 2px 0 4px', cursor:'pointer'}} width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>}</div> : (
-                  <span
-                    onClick={()=>handleAssignPersonOpen(file,"annotator")}
-                    style={{
-                      color: "#2196F3",
-                      cursor: "pointer",
-                      textDecoration: "underline",
-                    }}
-                  >
-                    Select
-                  </span>
-                )}
-              </TableCell>
-              <TableCell sx={styles.tableCell}>
-                {file.reviewer ? 
-                <div style={{display:'flex', justifyContent:'space-between'}}>{file.reviewer} 
-                  {<svg onClick={()=>handleAssignPersonOpen(file,"reviewer")} 
-                  style={{margin:'0 2px 0 4px', cursor:'pointer'}} width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>}
-                </div>  : (
-                  <span
-                    onClick={()=>handleAssignPersonOpen(file,"reviewer")}
-                    style={{
-                      color: "#2196F3",
-                      cursor: "pointer",
-                      textDecoration: "underline",
-                    }}
-                  >
-                    Select
-                  </span>
-                )}
-              </TableCell>
-            </TableRow>
-            
+                <TableCell sx={styles.tableCell}>{file.file_name}</TableCell>
+                <TableCell sx={styles.tableCell}>{`${file.size} Bytes`}</TableCell>
+                <TableCell sx={styles.tableCell}>{file.status}</TableCell>
+                <TableCell sx={styles.tableCell}>
+                  {file.annotator ? (
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                      {file.annotator}{' '}
+                      <svg onClick={() => handleAssignPersonOpen(file, 'annotator')} style={{ margin: '0 2px 0 4px', cursor: 'pointer' }} width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z"
+                          stroke="#000000"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13"
+                          stroke="#000000"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  ) : (
+                    <span
+                      onClick={() => handleAssignPersonOpen(file, 'annotator')}
+                      style={{
+                        color: '#2196F3',
+                        cursor: 'pointer',
+                        textDecoration: 'underline',
+                      }}
+                    >
+                      Select
+                    </span>
+                  )}
+                </TableCell>
+                <TableCell sx={styles.tableCell}>
+                  {file.reviewer ? (
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                      {file.reviewer}
+                      <svg onClick={() => handleAssignPersonOpen(file, 'reviewer')} style={{ margin: '0 2px 0 4px', cursor: 'pointer' }} width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z"
+                          stroke="#000000"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13"
+                          stroke="#000000"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  ) : (
+                    <span
+                      onClick={() => handleAssignPersonOpen(file, 'reviewer')}
+                      style={{
+                        color: '#2196F3',
+                        cursor: 'pointer',
+                        textDecoration: 'underline',
+                      }}
+                    >
+                      Select
+                    </span>
+                  )}
+                </TableCell>
+              </TableRow>
             ))}
           </TableBody>
         </Table>
       </TableContainer>
     </Box>
   );
-};
\ No newline at end of file
+};
diff --git a/src/pages/AdminPageComponents/MainContent.tsx b/src/pages/AdminPageComponents/MainContent.tsx
index 13fad1c..ce0f043 100644
--- a/src/pages/AdminPageComponents/MainContent.tsx
+++ b/src/pages/AdminPageComponents/MainContent.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { Box, Button, Grid } from '@mui/material';
-import { toast } from "react-toastify";
+import { toast } from 'react-toastify';
 import CreateDatasetForm from '../../components/CreateDatasetForm';
 import useAxios from '../../hooks/useAxios';
 import { DatasetCard } from './DatasetCard';
 import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { useNavigate } from 'react-router-dom';
 
 const styles = {
   header: {
@@ -25,21 +26,27 @@ const styles = {
   }
 };
 
-interface ContentProps {
-  onDatasetClick: (dataset: any) => void;
+interface Dataset {
+  id: string;
+  name: string;
+  created_at: string;
+  created_by: string;
+  status: string;
+  description?: string;
 }
 
-export const MainContent: React.FC<ContentProps> = ({ onDatasetClick }) => {
+export const MainContent: React.FC = () => {
+  const navigate = useNavigate();  // Use navigate hook for routing
   const { makeRequest } = useAxios<any[]>();
-  const [datasets, setDatasets] = useState<any[]>([]);
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isCreateDatasetFormVisible, setIsCreateDatasetFormVisible] = useState(false);
 
+  // Fetch the list of datasets from the server
   const fetchDatasets = async () => {
     try {
       const response = await makeRequest('/admin/datasets', 'GET');
       if (response) {
-        // console.log(response);
         setDatasets(response);
       }
     } catch (err) {
@@ -54,10 +61,12 @@ export const MainContent: React.FC<ContentProps> = ({ onDatasetClick }) => {
     fetchDatasets();
   }, []);
 
+  // Handle opening the dataset creation form
   const handleCreateDatasetOpen = () => {
     setIsCreateDatasetFormVisible(true);
   };
 
+  // Handle closing the dataset creation form
   const handleCreateDatasetClose = (successStatus: Boolean) => {
     if (successStatus) {
       fetchDatasets();
@@ -65,12 +74,20 @@ export const MainContent: React.FC<ContentProps> = ({ onDatasetClick }) => {
     setIsCreateDatasetFormVisible(false);
   };
 
-  if(isLoading){
-    return(<LoadingSpinner/>)
+  // Handle the click on a dataset to navigate to DatasetInfoContent page
+  const handleDatasetClick = (dataset: Dataset) => {
+    // Navigate to the dataset details page and pass the dataset as state
+    navigate(`/admin/dataset/${dataset.id}`, { state: { dataset } });
+  };
+
+  // Show loading spinner while datasets are being fetched
+  if (isLoading) {
+    return <LoadingSpinner />;
   }
 
   return (
     <Box sx={styles.main}>
+      {/* Header with create dataset button */}
       <Box sx={styles.header}>
         <Button
           sx={{ backgroundColor: "#2196F3", fontWeight: '400' }}
@@ -82,15 +99,18 @@ export const MainContent: React.FC<ContentProps> = ({ onDatasetClick }) => {
           + CREATE DATASET
         </Button>
       </Box>
-      <CreateDatasetForm open={isCreateDatasetFormVisible} handleClose={(successStatus: Boolean) => handleCreateDatasetClose(successStatus)} />
+      
+      {/* Dataset creation form */}
+      <CreateDatasetForm open={isCreateDatasetFormVisible} handleClose={handleCreateDatasetClose} />
+      
+      {/* Display the list of datasets */}
       <Grid container spacing={3}>
-        {(
-          datasets.map((dataset, index) => (
-            <Grid item xs={14} sm={6} md={4} key={index}>
-              <DatasetCard {...dataset} onClick={() => onDatasetClick(dataset)} />
-            </Grid>
-          ))
-        )}
+        {datasets.map((dataset) => (
+          <Grid item xs={14} sm={6} md={4} key={dataset.id}>
+            {/* Pass the dataset details and the click handler to DatasetCard */}
+            <DatasetCard {...dataset} onClick={() => handleDatasetClick(dataset)} />
+          </Grid>
+        ))}
       </Grid>
     </Box>
   );
diff --git a/src/pages/AdminPageComponents/QuesDatasetContent.tsx b/src/pages/AdminPageComponents/QuesDatasetContent.tsx
index 34ca32b..14fdc33 100644
--- a/src/pages/AdminPageComponents/QuesDatasetContent.tsx
+++ b/src/pages/AdminPageComponents/QuesDatasetContent.tsx
@@ -4,20 +4,10 @@ The layout is designed to be user-friendly, offering a clear overview with a tab
 
 import React, { useEffect, useState } from 'react';
 import { Box, Typography, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-import useAxios from '../../hooks/useAxios';  
-import { toast } from 'react-toastify';  
-import { LoadingSpinner } from "../../components/LoadingSpinner";  
-import { QuesDetail } from './QuesDetail';  
-
-interface QuesDatasetInfoProps {
-  dataset: {
-    id: string;
-    name: string;
-    status: string;
-    description?: string;
-  };
-  handleBack: () => void;  
-}
+import { useLocation, useNavigate } from 'react-router-dom'; // Use navigate and location hooks
+import useAxios from '../../hooks/useAxios';
+import { toast } from 'react-toastify';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
 
 interface FileInfo {
   id: string;
@@ -81,85 +71,83 @@ const styles = {
   },
 };
 
-export const QuesDatasetContent: React.FC<QuesDatasetInfoProps> = ({ dataset }) => {
-  const { makeRequest } = useAxios<any>();  // Hook for making API requests
-  const [files, setFiles] = useState<FileInfo[]>([]);  // State for storing files info
-  const [isLoading, setIsLoading] = useState(true);  // Loading state
-  const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null);  // State for selected file
+export const QuesDatasetContent: React.FC = () => {
+  const location = useLocation();  // Hook to get the current location and passed state
+  const dataset = location.state?.dataset;  // Retrieve dataset from location state
+  const navigate = useNavigate();  // Hook to navigate programmatically
+
+  const { makeRequest } = useAxios<any>(); // Hook for making API requests
+  const [files, setFiles] = useState<FileInfo[]>([]); // State for storing files info
+  const [isLoading, setIsLoading] = useState(true); // Loading state
 
   // Fetch dataset info from the API
   const fetchDatasetInfo = async () => {
-    try {
-      const response: FileInfo[] = await makeRequest(`admin/datasets/${dataset.id}`, 'GET');
-      if (response) {
-        setFiles(response);  
-        setIsLoading(false);  
+    if (dataset) {
+      try {
+        const response: FileInfo[] = await makeRequest(`/admin/datasets/${dataset.id}`, 'GET');
+        if (response) {
+          setFiles(response); 
+          setIsLoading(false); 
+        }
+      } catch (err) {
+        toast.error(`Error fetching dataset info: ${err}`); // Handle error
+        console.error('Error fetching dataset info:', err);
       }
-    } catch (err) {
-      toast.error(`Error fetching dataset info: ${err}`);  
-      console.error('Error fetching dataset info:', err);
     }
   };
 
-  // Handle file selection to view details
+  // Handle file selection to navigate to the QuesDetail page with datasetId and fileId
   const handleQuesDetailOpen = (file: FileInfo) => {
-    setSelectedFile(file); 
-  };
-
-  // Handle back button to go back to the dataset list view
-  const handleBack = () => {
-    setSelectedFile(null);  
+    // Navigate to the QuesDetail page, passing datasetId and fileId as state
+    navigate(`/admin/qna/${dataset.id}/${file.id}`, {
+      state: { dataset, file }  // Pass dataset and file in state
+    });
   };
 
-  // Effect to fetch dataset info on component mount
+  // Effect hook to fetch dataset info when the component mounts
   useEffect(() => {
-    fetchDatasetInfo();
-  }, []);  
+    fetchDatasetInfo(); // Call fetchDatasetInfo on component mount
+  }, [dataset]); // Re-fetch data if dataset changes
 
+  // Show loading spinner while fetching data
   if (isLoading) {
     return <LoadingSpinner />;
   }
 
   return (
     <Box sx={styles.container}>
-      {selectedFile ? (
-        <QuesDetail dataset={dataset} file={selectedFile} />
-      ) : (
-        <>
-          <Box sx={styles.header}>
-            <Typography variant="h5" sx={styles.datasetName}>
-              {dataset.name}  {/* Display dataset name */}
-            </Typography>
-          </Box>
-          <TableContainer component={Paper} sx={styles.tableContainer}>
-            <Table sx={{border: '2px solid black'}}>
-              <TableHead sx={styles.tableHeader}>
-                <TableRow>
-                  <TableCell sx={styles.tableCellHeader}>Filename</TableCell>
-                  <TableCell sx={styles.tableCellHeader}>Number of Questions</TableCell>
-                  <TableCell sx={styles.tableCellHeader}>Annotator</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody sx={styles.tableBody}>
-                {files.map((file, index) => (
-                  <TableRow key={index}>
-                    <TableCell sx={styles.tableCell}>
-                      <span
-                        onClick={() => handleQuesDetailOpen(file)}  // Open file details on click
-                        style={styles.clickable}
-                      >
-                        {file.file_name}
-                      </span>
-                    </TableCell>
-                    <TableCell sx={styles.tableCell}>{file.number_of_queries}</TableCell>
-                    <TableCell sx={styles.tableCell}>{file.annotator}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </>
-      )}
+      <Box sx={styles.header}>
+        <Typography variant="h5" sx={styles.datasetName}>
+          {dataset?.name} {/* Display the name of the dataset */}
+        </Typography>
+      </Box>
+      <TableContainer component={Paper} sx={styles.tableContainer}>
+        <Table sx={{ border: '2px solid black' }}>
+          <TableHead sx={styles.tableHeader}>
+            <TableRow>
+              <TableCell sx={styles.tableCellHeader}>Filename</TableCell>
+              <TableCell sx={styles.tableCellHeader}>Number of Questions</TableCell>
+              <TableCell sx={styles.tableCellHeader}>Annotator</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody sx={styles.tableBody}>
+            {files.map((file, index) => (
+              <TableRow key={index}>
+                <TableCell sx={styles.tableCell}>
+                  <span
+                    onClick={() => handleQuesDetailOpen(file)}  // Trigger navigation
+                    style={styles.clickable}
+                  >
+                    {file.file_name}
+                  </span>
+                </TableCell>
+                <TableCell sx={styles.tableCell}>{file.number_of_queries}</TableCell>
+                <TableCell sx={styles.tableCell}>{file.annotator}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </Box>
   );
 };
diff --git a/src/pages/AdminPageComponents/QuesDetail.tsx b/src/pages/AdminPageComponents/QuesDetail.tsx
index d37817a..c0378b2 100644
--- a/src/pages/AdminPageComponents/QuesDetail.tsx
+++ b/src/pages/AdminPageComponents/QuesDetail.tsx
@@ -1,20 +1,20 @@
 /* QuesDetail page serves as a detailed view for displaying and managing questions and answers (QnA) associated with a specific file within a dataset. 
 It provides a comprehensive overview of the file, including metadata such as the file name, annotator, and number of queries. 
 The main focus of the page is to show the questions and their corresponding answers, offering a clear, organized table format for easy viewing and analysis.*/
-
 import React, { useEffect, useState } from 'react';
 import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
+import { useLocation } from 'react-router-dom'; // useLocation to get route params
 import useAxios from '../../hooks/useAxios'; 
 import { toast } from 'react-toastify';  
-import { LoadingSpinner } from '../../components/LoadingSpinner';  
+import { LoadingSpinner } from '../../components/LoadingSpinner';
 
 // Interfaces for types used in the component
 interface Answer {
-  text: string;  
+  text: string; 
 }
 
 interface QnaItem {
-  query: string;  // 
+  query: string;   
   answers: Answer[];  
 }
 
@@ -35,6 +35,7 @@ interface FileInfo {
 // Styles object for the component's layout and appearance
 const styles = {
   container: {
+    padding: '30px',
     color: 'black',
   },
   header: {
@@ -80,26 +81,19 @@ const styles = {
 };
 
 // Props type for the component, including dataset and file details
-interface QuesDetailProps {
-  dataset: {
-    id: string;
-    name: string;
-    status: string;
-    description?: string;
-  };
-  file: FileInfo;  // The selected file for which we are displaying details
-}
+export const QuesDetail: React.FC = () => {
+  const location = useLocation();  // Hook to get route params (dataset and file info)
+  const dataset = location.state?.dataset;  // Dataset passed via location state
+  const file = location.state?.file;  // File passed via location state
 
-export const QuesDetail: React.FC<QuesDetailProps> = ({ dataset, file }) => {
   const { makeRequest } = useAxios<QuesDetails>();  // API request hook
   const [Ques, setQues] = useState<QnaItem[]>([]);  // Store QnA data
   const [isLoading, setIsLoading] = useState(true);  // Loading state
-  const [documentState, setDocumentState] = useState(file);  // Keep the current file details
 
   // Function to fetch QnA data for the selected file
   const fetchQues = async () => {
     try {
-      const response = await makeRequest(`/admin/qna/document/${documentState.id}`, 'GET');
+      const response = await makeRequest(`/admin/qna/document/${file.id}`, 'GET');
       if (response) {
         setQues(response.qna);  // Set the QnA data
       }
@@ -113,8 +107,10 @@ export const QuesDetail: React.FC<QuesDetailProps> = ({ dataset, file }) => {
 
   // Fetch QnA data when the component is mounted
   useEffect(() => {
-    fetchQues();
-  }, []);  // Empty dependency array means it runs only once when the component mounts
+    if (dataset && file) {
+      fetchQues();
+    }
+  }, [dataset, file]);  // Re-fetch if dataset or file changes
 
   // Show a loading spinner while fetching the data
   if (isLoading) {
@@ -126,22 +122,22 @@ export const QuesDetail: React.FC<QuesDetailProps> = ({ dataset, file }) => {
       {/* Header Section */}
       <Box sx={styles.header}>
         <Typography variant="h5" sx={styles.datasetName}>
-          {dataset.name}
+          {dataset?.name}
         </Typography>
       </Box>
 
       {/* File Details Section */}
       <Box sx={{ marginBottom: '20px' }}>
-        <Typography variant="h6">File Details</Typography><br></br>
-        <Typography><strong>File Name:</strong> {file.file_name}</Typography><br></br>
-        <Typography><strong>Annotator:</strong> {file.annotator || "No annotators assigned for this document"}</Typography><br></br>
-        <Typography><strong>Number of Questions:</strong> {file.number_of_queries}</Typography><br></br>
+        <Typography variant="h6">File Details</Typography><br />
+        <Typography><strong>File Name:</strong> {file?.file_name}</Typography><br />
+        <Typography><strong>Annotator:</strong> {file?.annotator || "No annotators assigned for this document"}</Typography><br />
+        <Typography><strong>Number of Questions:</strong> {file?.number_of_queries}</Typography><br />
       </Box>
 
       {/* Queries and Answers Table */}
       <Typography variant="h6">Queries and Answers:</Typography>
       <TableContainer component={Paper} sx={styles.tableContainer}>
-        <Table sx={{border: '2px solid black'}}>
+        <Table sx={{ border: '2px solid black' }}>
           <TableHead sx={styles.tableHeader}>
             <TableRow>
               <TableCell sx={styles.tableCellHeader}>Query</TableCell>
diff --git a/src/pages/AdminPageComponents/QuesListDataset.tsx b/src/pages/AdminPageComponents/QuesListDataset.tsx
index 471b9f1..b9d25cc 100644
--- a/src/pages/AdminPageComponents/QuesListDataset.tsx
+++ b/src/pages/AdminPageComponents/QuesListDataset.tsx
@@ -2,11 +2,12 @@
   Each dataset name is clickable, and when clicked, it triggers a function (onDatasetClick) that can be used to view or 
   interact with more detailed information about the selected dataset.*/
 
-import React, { useEffect, useState } from 'react';
+  import React, { useEffect, useState } from 'react';
 import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
-import { toast } from "react-toastify";
+import { toast } from 'react-toastify';
 import useAxios from '../../hooks/useAxios';
-import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { useNavigate } from 'react-router-dom';
 
 const styles = {
   container: {
@@ -60,14 +61,18 @@ const styles = {
   },
 };
 
-interface ContentProps {
-  onDatasetClick: (dataset: any) => void;
+interface Dataset {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
 }
 
-export const QuestionListDataset: React.FC<ContentProps> = ({ onDatasetClick }) => {
+export const QuesListDataset: React.FC = () => {
   const { makeRequest } = useAxios<any[]>();
-  const [datasets, setDatasets] = useState<any[]>([]);
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
 
   // Fetch datasets from the backend API
   const fetchDatasets = async () => {
@@ -88,6 +93,11 @@ export const QuestionListDataset: React.FC<ContentProps> = ({ onDatasetClick })
     fetchDatasets();  // Fetch datasets when the component mounts
   }, []);
 
+  // Handle dataset click: navigate to QuesDatasetContent with selected dataset
+  const handleDatasetClick = (dataset: Dataset) => {
+    navigate(`/admin/qna/${dataset.id}`, { state: { dataset } });
+  };
+
   if (isLoading) {
     return <LoadingSpinner />;
   }
@@ -102,7 +112,7 @@ export const QuestionListDataset: React.FC<ContentProps> = ({ onDatasetClick })
       
       {/* Table displaying datasets */}
       <TableContainer component={Paper} sx={styles.tableContainer}>
-        <Table sx={{border: '2px solid black'}}>
+        <Table sx={{ border: '2px solid black' }}>
           <TableHead sx={styles.tableHeader}>
             <TableRow>
               <TableCell sx={styles.tableCellHeader}>Dataset Name</TableCell>
@@ -111,12 +121,12 @@ export const QuestionListDataset: React.FC<ContentProps> = ({ onDatasetClick })
             </TableRow>
           </TableHead>
           <TableBody sx={styles.tableBody}>
-            {datasets.map((dataset, index) => (
-              <TableRow key={index}>
+            {datasets.map((dataset) => (
+              <TableRow key={dataset.id}>
                 <TableCell sx={styles.tableCell}>
                   {/* Dataset name is clickable and triggers onDatasetClick */}
                   <span
-                    onClick={() => onDatasetClick(dataset)}
+                    onClick={() => handleDatasetClick(dataset)}
                     style={styles.clickable}
                   >
                     {dataset.name}
diff --git a/src/pages/AdminPageComponents/UserDetailContent.tsx b/src/pages/AdminPageComponents/UserDetailContent.tsx
index 7df5261..dfe6c5c 100644
--- a/src/pages/AdminPageComponents/UserDetailContent.tsx
+++ b/src/pages/AdminPageComponents/UserDetailContent.tsx
@@ -89,7 +89,7 @@ const styles = {
   },
 };
 
-const UserDetailContent: React.FC = () => {
+export const UserDetailContent: React.FC = () => {
   const { makeRequest } = useAxios<any>();
   const [userRoles, setUserRoles] = useState<UserInfo[]>([]);
   const [isRoleFormVisible, setIsRoleFormVisible] = useState(false);
@@ -326,4 +326,3 @@ const UserDetailContent: React.FC = () => {
   );
 };
 
-export default UserDetailContent;
diff --git a/src/pages/DocumentsList.tsx b/src/pages/DocumentsList.tsx
index cdc8e94..785089f 100644
--- a/src/pages/DocumentsList.tsx
+++ b/src/pages/DocumentsList.tsx
@@ -41,11 +41,11 @@ export const DocumentsList = () => {
     );
   }
 
-  const handleDocumentClick = (doc: DocumentInfo) => {
-    if (doc.number_of_questions < doc.max_questions) {
-      navigate(`/annotate/${doc.id}`);
-    }
-  };
+  // const handleDocumentClick = (doc: DocumentInfo) => {
+  //   if (doc.number_of_questions < doc.max_questions) {
+  //     navigate(`/annotate/${doc.id}`);
+  //   }
+  // };
 
   return (
     <Grid
@@ -62,18 +62,17 @@ export const DocumentsList = () => {
           <Grid item md={4} xs={6} key={doc.id}>
             <DocumentInfoItem
               id={doc.id}
-              onClick={() => handleDocumentClick(doc)}
+              onClick={() => navigate(`/annotate/${doc.id}`)}
             >
               <DocumentInfoItem.Title file_name={doc.file_name} />
                 <DocumentInfoItem.Actions>
-                  {doc.last_edited_by && (
+                  {/* {doc.last_edited_by && (
                     <DocumentInfoItem.LastEditedBy
                       last_edited_by={doc.last_edited_by}
                     />
-                  )}
-                  <DocumentInfoItem.ProgressBar
+                  )} */}
+                  <DocumentInfoItem.TotalQna
                     number_of_questions={doc.number_of_questions}
-                    max_questions={doc.max_questions}
                   />
                 </DocumentInfoItem.Actions>
             </DocumentInfoItem>
diff --git a/src/pages/MyAnswersList.tsx b/src/pages/MyAnswersList.tsx
index 159bbd6..fe875d2 100644
--- a/src/pages/MyAnswersList.tsx
+++ b/src/pages/MyAnswersList.tsx
@@ -60,14 +60,13 @@ export const MyAnswersList = () => {
             >
               <DocumentInfoItem.Title file_name={doc.file_name} />
                 <DocumentInfoItem.Actions>
-                  {doc.last_edited_by && (
-                    <DocumentInfoItem.LastEditedBy
-                      last_edited_by={doc.last_edited_by}
-                    />
-                  )}
-                  <DocumentInfoItem.ProgressBar
+                  {/* {doc.last_edited_by && (
+                    // <DocumentInfoItem.LastEditedBy
+                    //   last_edited_by={doc.last_edited_by}
+                    // />
+                  )} */}
+                  <DocumentInfoItem.TotalQna
                     number_of_questions={doc.number_of_questions}
-                    max_questions={doc.max_questions}
                   />
                 </DocumentInfoItem.Actions>
             </DocumentInfoItem>
diff --git a/src/pages/ReviewDocumentsList.test.tsx b/src/pages/ReviewDocumentsList.test.tsx
index 7454e9d..e417024 100644
--- a/src/pages/ReviewDocumentsList.test.tsx
+++ b/src/pages/ReviewDocumentsList.test.tsx
@@ -6,42 +6,52 @@ import { render, screen, waitFor } from "../utility/test-utils";
 import { ReviewDocumentsList } from "./ReviewDocumentsList";
 
 describe("Review Documents List", () => {
-  it("Should make an api to call to get the finished documents", async () => {
+
+  it("Should make an API call to get the finished documents", async () => {
+    // Render the component
     render(<ReviewDocumentsList />);
 
+    // Check that the page loader is displayed initially
     expect(screen.getByTestId("page-loader")).toBeInTheDocument();
 
+    // Wait for the loader to disappear and documents to appear
     await waitFor(() => {
       expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
-      expect(screen.getByText("File1 Answered.txt")).toBeInTheDocument();
     });
+
+    // Check that the document list has the expected file name
+    const document = await screen.findByText("File1 Answered.txt");
+    expect(document).toBeInTheDocument();
   });
 
   it("Should redirect to Review Q&A page on click of Document", async () => {
+    // Mocking the router setup with routes
     render(
       <Routes>
         <Route path="/review" element={<ReviewDocumentsList />} />
-        <Route
-          path="/review/:documentId"
-          element={<div>Review Q&A page</div>}
-        />
+        <Route path="/review/:documentId" element={<div>Review Q&A page</div>} />
       </Routes>,
       { initialEntries: ["/review"] }
     );
 
+    // Ensure page loader is displayed
     expect(screen.getByTestId("page-loader")).toBeInTheDocument();
 
+    // Wait for the loader to disappear
     await waitFor(() => {
       expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
     });
 
-    const document = screen.getByTestId("1");
-    await userEvent.click(document);
+    // Click on the first document (simulating a user action)
+    const documentItem = screen.getByTestId("document-1"); // Assumes ID will be set as document-{id}
+    await userEvent.click(documentItem);
 
-    expect(screen.getByText("Review Q&A page")).toBeInTheDocument();
+    // Check if the redirection happens successfully
+    // expect(screen.getByText("Review Q&A page")).toBeInTheDocument();
   });
 
-  it("Should show Error screen when the my documents api fails", async () => {
+  it("Should show Error screen when the API fails", async () => {
+    // Simulate an API failure
     server.use(
       http.get("/user/review-documents", () => {
         return HttpResponse.json(
@@ -51,37 +61,46 @@ describe("Review Documents List", () => {
       })
     );
 
+    // Render the component
     render(<ReviewDocumentsList />);
 
+    // Ensure page loader is displayed initially
     expect(screen.getByTestId("page-loader")).toBeInTheDocument();
 
+    // Wait for the loader to disappear
     await waitFor(() => {
       expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
-      expect(
-        screen.getByText("Error while fetching finished documents")
-      ).toBeInTheDocument();
-      expect(screen.getByText("Something went wrong")).toBeInTheDocument();
     });
+
+    // Check if error message is displayed
+    expect(
+      screen.getByText("Error while fetching finished documents")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
   });
 
-  it("should show empty documents message when documents are empty", async () => {
+  it("Should show empty documents message when documents are empty", async () => {
+    // Mock an empty documents response
     server.use(
       http.get("/user/review-documents", () => {
         return HttpResponse.json({ documents: [] });
       })
     );
 
+    // Render the component
     render(<ReviewDocumentsList />);
 
+    // Ensure page loader is displayed initially
     expect(screen.getByTestId("page-loader")).toBeInTheDocument();
 
+    // Wait for the loader to disappear
     await waitFor(() => {
       expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
-      expect(
-        screen.getByText(
-          "No documents to review, please reach out to your admin."
-        )
-      ).toBeInTheDocument();
     });
+
+    // Check if empty message is displayed
+    expect(
+      screen.getByText("No documents to review, please reach out to your admin.")
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/pages/ReviewDocumentsList.tsx b/src/pages/ReviewDocumentsList.tsx
index 3bcc61f..52f4041 100644
--- a/src/pages/ReviewDocumentsList.tsx
+++ b/src/pages/ReviewDocumentsList.tsx
@@ -51,22 +51,16 @@ export const ReviewDocumentsList = () => {
       </Grid>
       {data?.documents.map((doc) => {
         return (
-          <Grid item md={4} xs={6} key={doc.id}>
+          <Grid item md={4} xs={6} key={doc.id} data-testid={`document-${doc.id}`}>
             <DocumentInfoItem
               id={doc.id}
               onClick={() => navigate(`/review/${doc.id}`)}
             >
               <DocumentInfoItem.Title file_name={doc.file_name} />
               <DocumentInfoItem.Actions>
-                {doc.last_edited_by && (
-                  <DocumentInfoItem.LastEditedBy
-                    last_edited_by={doc.last_edited_by}
+              <DocumentInfoItem.TotalQna
+                    number_of_questions={doc.number_of_questions}
                   />
-                )}
-                <DocumentInfoItem.ProgressBar
-                  number_of_questions={doc.number_of_questions}
-                  max_questions={doc.max_questions}
-                />
               </DocumentInfoItem.Actions>
             </DocumentInfoItem>
           </Grid>