diff --git a/ipi-survey-platform/src/App.jsx b/ipi-survey-platform/src/App.jsx
index 22550aa..aac0ee5 100644
--- a/ipi-survey-platform/src/App.jsx
+++ b/ipi-survey-platform/src/App.jsx
@@ -213,7 +213,7 @@ function App() {
         <Route
           path="/admin/validations"
           element={
-            <RequireRole allowedRoles={['Admin', 'EstablishmentUser']}>
+            <RequireRole allowedRoles={['Admin']}>
               <Validations />
             </RequireRole>
           }
@@ -221,7 +221,7 @@ function App() {
         <Route
           path="/admin/validations/:id"
           element={
-            <RequireRole allowedRoles={['Admin', 'EstablishmentUser']}>
+            <RequireRole allowedRoles={['Admin']}>
               <ValidationReview />
             </RequireRole>
           }
diff --git a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
index af066ea..10cdd5f 100644
--- a/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
+++ b/ipi-survey-platform/src/components/dashboard/SubmissionHistory.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Table from '@/components/common/Table';
 import Footer from '../common/Footer';
+import HeaderBar from '@/components/layout/HeaderBar';
+import DetailedOverview from '@/components/overview/DetailedOverview';
 
 const searchIconSrc = '/assets/images/material-symbols_search-rounded.svg';
 
@@ -59,6 +61,7 @@ const downloadCsv = (rows) => {
 
 export const SubmissionHistory = ({ history = [], loading = false, error = '' }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
+  const [selectedSubmission, setSelectedSubmission] = React.useState(null);
   const navigate = useNavigate();
 
   const normalizedHistory = React.useMemo(() => {
@@ -84,11 +87,8 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
     );
   });
 
-  // ✅ Updated navigation to match SubmissionTable pattern
-  const navigateToView = (id) => {
-    navigate(`/admin/validations/${id}`, {
-      state: { actionType: 'view' }
-    });
+  const handleViewDetails = (rowData) => {
+    setSelectedSubmission(rowData);
   };
 
   const rowsData = filteredRows.map((item) => {
@@ -103,7 +103,7 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
       <span className="whitespace-nowrap">{item.submission_on}</span>,
       productLabel,
       <button
-        onClick={() => navigateToView(item.id)} // ✅ Now routes to /admin/validations/:id
+        onClick={() => handleViewDetails(item)}
         className="text-[#9E792B] hover:text-[#7b5f22] font-medium"
       >
         View Details
@@ -169,6 +169,20 @@ export const SubmissionHistory = ({ history = [], loading = false, error = '' })
     </div>
   );
 
+  if (selectedSubmission) {
+    return (
+      <div className="min-h-screen bg-[#F8FAFC]">
+        <HeaderBar />
+        <main className="max-w-[1280px] mx-auto px-4 py-6">
+          <DetailedOverview
+            submission={selectedSubmission}
+            onBack={() => setSelectedSubmission(null)}
+          />
+        </main>
+      </div>
+    );
+  }
+
   return (
     <>
       <section className="max-w-[1280px] mx-auto px-0">