diff --git a/src/App.jsx b/src/App.jsx
index 99d55a675..a66ca0db1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,88 +1,163 @@
-import { createTheme, MantineProvider } from "@mantine/core";
+import { MantineProvider, createTheme } from "@mantine/core";
+import { Suspense, lazy } from "react";
+import { useSelector } from "react-redux";
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
-import { Route, Routes, Navigate, useLocation } from "react-router-dom";
+import {
+  Route,
+  Routes,
+  Navigate,
+  useLocation,
+  useParams,
+} from "react-router-dom";
 import { Notifications } from "@mantine/notifications";
+import { host } from "./routes/globalRoutes";
 import { Layout } from "./components/layout";
-import Dashboard from "./Modules/Dashboard/dashboardNotifications";
-import Profile from "./Modules/Dashboard/StudentProfile/profilePage";
-import LoginPage from "./pages/login";
-import ForgotPassword from "./pages/forgotPassword";
-import AcademicPage from "./Modules/Academic/index";
-import ValidateAuth from "./helper/validateauth";
-import FacultyProfessionalProfile from "./Modules/facultyProfessionalProfile/facultyProfessionalProfile";
-import InactivityHandler from "./helper/inactivityhandler";
-import Examination from "./Modules/Examination/examination";
-import Database from "./Modules/Database/database";
-import ProgrammeCurriculumRoutes from "./Modules/Program_curriculum/programmCurriculum";
-import NotFoundPage from "./components/NotFoundPage";
+import PatentRoutes from "./Modules/Patent/routes/PatentRoutes";
+
+// Working module imports
+const Dashboard = lazy(
+  () => import("./Modules/Dashboard/dashboardNotifications"),
+);
+const Profile = lazy(
+  () => import("./Modules/Dashboard/StudentProfile/profilePage"),
+);
+const LoginPage = lazy(() => import("./pages/login"));
+const ForgotPassword = lazy(() => import("./pages/forgotPassword"));
+const AcademicPage = lazy(() => import("./Modules/Academic/index"));
+const ValidateAuth = lazy(() => import("./helper/validateauth"));
+const MessPage = lazy(() => import("./Modules/Mess/messContent"));
+const FacultyProfessionalProfile = lazy(
+  () =>
+    import("./Modules/facultyProfessionalProfile/facultyProfessionalProfile"),
+);
+const InactivityHandler = lazy(() => import("./helper/inactivityhandler.js"));
+const Examination = lazy(() => import("./Modules/Examination/examination"));
+const ProgrammeCurriculumRoutes = lazy(
+  () => import("./Modules/Program_curriculum/programmCurriculum"),
+);
 
 const theme = createTheme({
-  breakpoints: {
-    xxs: "300px",
-    xs: "375px",
-    sm: "768px",
-    md: "992px",
-    lg: "1200px",
-    xl: "1408px",
-  },
+  breakpoints: { xs: "30em", sm: "48em", md: "64em", lg: "74em", xl: "90em" },
 });
 
+function ProfileRouteWithUsername() {
+  const { username } = useParams();
+  return <Profile connectionRoute={`${host}/dep/api/profile/${username}/`} />;
+}
+
 export default function App() {
   const location = useLocation();
+  const role = useSelector((state) => state.user.role);
+
   return (
     <MantineProvider theme={theme}>
       <Notifications position="top-center" autoClose={2000} limit={1} />
-      {location.pathname !== "/accounts/login" && <ValidateAuth />}
+
+      {![
+        "/accounts/login",
+        "/reset-password",
+      ].includes(location.pathname) && <ValidateAuth />}
       {location.pathname !== "/accounts/login" && <InactivityHandler />}
 
       <Routes>
         <Route path="/" element={<Navigate to="/accounts/login" replace />} />
+
         <Route
           path="/dashboard"
           element={
             <Layout>
-              <Dashboard />
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Dashboard />
+              </Suspense>
             </Layout>
           }
         />
+
         <Route
           path="/academics"
           element={
             <Layout>
-              <AcademicPage />
+              <Suspense fallback={<div>Loading .... </div>}>
+                <AcademicPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+
+        <Route
+          path="/programme_curriculum/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ProgrammeCurriculumRoutes />
+              </Suspense>
+            </Layout>
+          }
+        />
+
+        <Route
+          path="/examination/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Examination />
+              </Suspense>
+            </Layout>
+          }
+        />
+
+        <Route
+          path="/mess"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <MessPage />
+              </Suspense>
             </Layout>
           }
         />
+
         <Route
           path="/profile"
           element={
             <Layout>
-              <Profile />
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Profile />
+              </Suspense>
             </Layout>
           }
         />
+
         <Route
-          path="/facultyprofessionalprofile/*"
+          path="/profile/:username"
           element={
             <Layout>
-              <FacultyProfessionalProfile />
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ProfileRouteWithUsername />
+              </Suspense>
             </Layout>
           }
         />
+
         <Route
-          path="/programme_curriculum/*"
+          path="/facultyprofessionalprofile/*"
           element={
-            <div>
-              <ProgrammeCurriculumRoutes />
-            </div>
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <FacultyProfessionalProfile />
+              </Suspense>
+            </Layout>
           }
         />
+
+        <Route path="/patent/*" element={<PatentRoutes />} />
+
         <Route path="/accounts/login" element={<LoginPage />} />
         <Route path="/reset-password" element={<ForgotPassword />} />
-        <Route path="/examination/*" element={<Examination />} />
-        <Route path="/database/*" element={<Database />} />
-        <Route path="*" element={<NotFoundPage />} />
+
+        {/* Catch-all route for modules not yet implemented */}
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
       </Routes>
     </MantineProvider>
   );
diff --git a/src/App.jsx.backup b/src/App.jsx.backup
new file mode 100644
index 000000000..5a4870525
--- /dev/null
+++ b/src/App.jsx.backup
@@ -0,0 +1,562 @@
+import { MantineProvider, createTheme } from "@mantine/core";
+import { Suspense, lazy } from "react";
+import { useSelector } from "react-redux";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import {
+  Route,
+  Routes,
+  Navigate,
+  useLocation,
+  useParams,
+} from "react-router-dom";
+import { Notifications } from "@mantine/notifications";
+import { host } from "./routes/globalRoutes";
+import { Layout } from "./components/layout";
+// import InventoryIndex from "./Modules/Inventory/components/InventoryIndex"; // Commented out - module not present
+// import PurchaseRoutes from "./Modules/Purchase/PurchaseRoute.jsx"; // Commented out - module not present
+import PatentRoutes from "./Modules/Patent/routes/PatentRoutes";
+
+// eslint-disable-next-line import/no-unresolved
+// import UserBreadcrumbs from "./Modules/Scholarship/user/components/UserBreadcumbs"; // Module not present
+// import OtherAcadProcedures from "./Modules/Otheracademic/OtherAcademicProcedures"; // Module not present
+// import PendingReqs from "./Modules/Visitors_Hostel/pendingRequests.jsx"; // Module not present
+// import { DesignationsProvider } from "./Modules/Iwd/helper/designationContext"; // Module not present
+// import { WorkProvider } from "./Modules/Iwd/helper/WorkContext"; // Module not present
+
+// Missing modules - commented out
+// const PlacementCellPage = lazy(() => import("./Modules/PlacementCell"));
+// const JobApplicationForm = lazy(
+//   () => import("./Modules/PlacementCell/ApplyForPlacementForm"),
+// );
+// const PlacementEventHandeling = lazy(
+//   () => import("./Modules/PlacementCell/components/PlacementEventHandeling"),
+// );
+// const ApplicationStatusTimeline = lazy(
+//   () => import("./Modules/PlacementCell/components/Timeline"),
+// );
+// const HealthCenter = lazy(() => import("./Modules/Health Center"));
+// const ConvenorBreadcumbs = lazy(
+//   () => import("./Modules/Scholarship/convenor/components/ConvenorBreadcumbs"),
+// );
+// const HostelPage = lazy(() => import("./Modules/Hostel-Management/index"));
+// const IwdModule = lazy(() => import("./Modules/Iwd/index"));
+// const IwdWorkPage = lazy(
+//   () => import("./Modules/Iwd/components/managebills/index"),
+// );
+
+const Dashboard = lazy(
+  () => import("./Modules/Dashboard/dashboardNotifications"),
+);
+// const ComplaintSystem = lazy(
+//   () => import("./Modules/ComplaintManagement/index"),
+// );
+const Profile = lazy(
+  () => import("./Modules/Dashboard/StudentProfile/profilePage"),
+);
+const LoginPage = lazy(() => import("./pages/login"));
+const ForgotPassword = lazy(() => import("./pages/forgotPassword"));
+const ResetPasswordConfirm = lazy(() => import("./pages/resetPasswordConfirm"));
+const AcademicPage = lazy(() => import("./Modules/Academic/index"));
+const ValidateAuth = lazy(() => import("./helper/validateauth"));
+// const HR = lazy(() => import("./Modules/HR/index"));
+const MessPage = lazy(() => import("./Modules/Mess/pages/index"));
+// const FileTracking = lazy(() => import("./Modules/FileTracking"));
+// const ResearchProjects = lazy(() => import("./Modules/RSPC/researchProjects"));
+// const RequestForms = lazy(() => import("./Modules/RSPC/requestForms"));
+// const VisitorsContent = lazy(
+//   () => import("./Modules/Visitors_Hostel/visitorsContent"),
+// );
+// const CancellationRequest = lazy(
+//   () => import("./Modules/Visitors_Hostel/cancellationRequest"),
+// );
+// const BookingForm = lazy(() => import("./Modules/Visitors_Hostel/bookingForm"));
+// const Bookings = lazy(() => import("./Modules/Visitors_Hostel/bookings"));
+// const ActiveBookingsPage = lazy(
+//   () => import("./Modules/Visitors_Hostel/activeBookings"),
+// );
+// const CompletedBookingsPage = lazy(
+//   () => import("./Modules/Visitors_Hostel/completedBookings"),
+// );
+// const VHGuidelinesPage = lazy(
+//   () => import("./Modules/Visitors_Hostel/vhGuidelines"),
+// );
+// const InventoryManagement = lazy(
+//   () => import("./Modules/Visitors_Hostel/inventory"),
+// );
+// const RoomsAvailibility = lazy(
+//   () => import("./Modules/Visitors_Hostel/roomsAvailability"),
+// );
+// const AccountStatemnts = lazy(
+//   () => import("./Modules/Visitors_Hostel/accountStatements"),
+// );
+const FacultyProfessionalProfile = lazy(
+  () =>
+    import("./Modules/facultyProfessionalProfile/facultyProfessionalProfile"),
+);
+
+const InactivityHandler = lazy(() => import("./helper/inactivityhandler"));
+// const DepartmentPage = lazy(
+//   () => import("./Modules/Department/DepartmentDashboard"),
+// );
+
+// const GymkhanaDashboard = lazy(
+//   () => import("./Modules/Gymkhana/GymkhanaDashboard.jsx"),
+// );
+
+const Examination = lazy(() => import("./Modules/Examination/examination"));
+
+const ProgrammeCurriculumRoutes = lazy(
+  () => import("./Modules/Program_curriculum/programmCurriculum"),
+);
+
+// const CourseManagementPage = lazy(() => import("./Modules/CourseManagement"));
+
+const theme = createTheme({
+  breakpoints: { xs: "30em", sm: "48em", md: "64em", lg: "74em", xl: "90em" },
+});
+function ProfileRouteWithUsername() {
+  const { username } = useParams();
+  return <Profile connectionRoute={`${host}/dep/api/profile/${username}/`} />;
+}
+export default function App() {
+  const location = useLocation();
+  const role = useSelector((state) => state.user.role);
+  return (
+    <MantineProvider theme={theme}>
+      <Notifications position="top-center" autoClose={2000} limit={1} />
+
+      {![
+        "/accounts/login",
+        "/reset-password",
+        location.pathname.startsWith("/reset-password-confirm/")
+          ? location.pathname
+          : "",
+      ].includes(location.pathname) && <ValidateAuth />}
+      {location.pathname !== "/accounts/login" && <InactivityHandler />}
+
+      <Routes>
+        <Route path="/" element={<Navigate to="/accounts/login" replace />} />
+        <Route
+          path="/dashboard"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Dashboard />
+              </Suspense>
+            </Layout>
+          }
+        />
+
+        <Route
+          path="/academics"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <AcademicPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/programme_curriculum/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ProgrammeCurriculumRoutes />
+              </Suspense>
+            </Layout>
+          }
+        />
+        {/* HR Module - commented out - module not present
+        <Route
+          path="/hr/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <HR />
+              </Suspense>
+            </Layout>
+          }
+        />
+        */}
+        <Route
+          path="/examination/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Examination />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/mess"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <MessPage />
+              </Suspense>
+            </Layout>
+        {/* Routes commented out - modules not present
+          }
+        />
+        <Route
+          path="/placement-cell"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <PlacementCellPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/placement-cell/apply-placement"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <JobApplicationForm />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/placement-cell/view"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <PlacementEventHandeling />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/placement-cell/timeline"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ApplicationStatusTimeline />
+              </Suspense>
+            </Layout>
+
+        {/* Commented out - Inventory module not present
+        <Route
+          path="/inventory"
+          element={
+            <Layout>
+              <InventoryIndex />
+            </Layout>
+          }
+        />        <Route
+          path="/course-management"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <CourseManagementPage />
+              </Suspense>
+            </Layout>
+          }
+
+        <Route
+          path="/profile"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Profile />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/profile/:username"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ProfileRouteWithUsername />
+              </Suspense>
+            </Layout>
+        {/* Routes commented out - modules not present
+          }
+        />
+        <Route
+          path="/filetracking"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <FileTracking />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <Bookings />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/pending_requests"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <PendingReqs />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/cancel_request"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <CancellationRequest />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/active_bookings"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <ActiveBookingsPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/completed_bookings"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <CompletedBookingsPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/booking-form"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                {" "}
+                <VisitorsContent />
+                <BookingForm />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/room-availability"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <RoomsAvailibility />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/mess-record"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/inventory"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <InventoryManagement />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/account-statement"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <AccountStatemnts />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/rules"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <VHGuidelinesPage />
+              </Suspense>
+            </Layout>
+        <Route
+          path="/facultyprofessionalprofile/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <FacultyProfessionalProfile />
+              </Suspense>
+            </Layout>
+        {/* Routes commented out - modules not present
+          }
+        />
+        <Route
+          path="/complaints"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ComplaintSystem />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/department"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <DepartmentPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/hostel"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <HostelPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/iwd"
+          element={
+            <Suspense fallback={<div>Loading .... </div>}>
+              <DesignationsProvider>
+                <Layout>
+                  <IwdModule />
+                </Layout>
+              </DesignationsProvider>
+            </Suspense>
+          }
+        />
+        <Route
+          path="/iwd/work/:id"
+          element={
+            <Suspense fallback={<div>Loading .... </div>}>
+              <DesignationsProvider>
+                <WorkProvider>
+                  <Layout>
+                    <IwdWorkPage />
+                  </Layout>
+                </WorkProvider>
+              </DesignationsProvider>
+            </Suspense>
+          }
+        />
+        <Route
+          path="/research"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ResearchProjects />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/research/forms"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <RequestForms />
+              </Suspense>
+            </Layout>
+          }
+        <Route
+        {/* Routes commented out - modules not present
+        />
+
+        <Route
+          path="/scholarship"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                {role === "spacsconvenor" && <ConvenorBreadcumbs />}
+                {role === "student" && <UserBreadcrumbs />}
+                {role === "spacsassistant" && <ConvenorBreadcumbs />}
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/department"
+          element={
+            <Layout>
+              <DepartmentPage />
+            </Layout>
+          }
+
+        <Route path="/healthcenter/*" element={<div>Health Center module not available</div>} />
+        {/* <Route path="/purchase/*" element={<PurchaseRoutes />} /> */}
+        <Route path="/patent/*" element={<PatentRoutes />} />
+        <Route path="/accounts/login" element={<LoginPage />} />
+        <Route path="/reset-password" element={<ForgotPassword />} />
+        <Route
+          path="/reset-password-confirm/:uid/:token"
+          element={
+            <Suspense
+              fallback={
+                <div style={{ textAlign: "center" }}>Loading .... </div>
+              }
+            >
+              <ResetPasswordConfirm />
+            </Suspense>
+          }
+        {/* Routes commented out - modules not present
+        />
+
+        <Route
+          path="/GymKhana"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <GymkhanaDashboard />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/otherAcadProcedures"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <OtherAcadProcedures />
+              </Suspense>
+            </Layout>
+          }
+      </Routes>
+    </MantineProvider>
+  );
+}
diff --git a/src/App.jsx.full_backup b/src/App.jsx.full_backup
new file mode 100644
index 000000000..5a4870525
--- /dev/null
+++ b/src/App.jsx.full_backup
@@ -0,0 +1,562 @@
+import { MantineProvider, createTheme } from "@mantine/core";
+import { Suspense, lazy } from "react";
+import { useSelector } from "react-redux";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import {
+  Route,
+  Routes,
+  Navigate,
+  useLocation,
+  useParams,
+} from "react-router-dom";
+import { Notifications } from "@mantine/notifications";
+import { host } from "./routes/globalRoutes";
+import { Layout } from "./components/layout";
+// import InventoryIndex from "./Modules/Inventory/components/InventoryIndex"; // Commented out - module not present
+// import PurchaseRoutes from "./Modules/Purchase/PurchaseRoute.jsx"; // Commented out - module not present
+import PatentRoutes from "./Modules/Patent/routes/PatentRoutes";
+
+// eslint-disable-next-line import/no-unresolved
+// import UserBreadcrumbs from "./Modules/Scholarship/user/components/UserBreadcumbs"; // Module not present
+// import OtherAcadProcedures from "./Modules/Otheracademic/OtherAcademicProcedures"; // Module not present
+// import PendingReqs from "./Modules/Visitors_Hostel/pendingRequests.jsx"; // Module not present
+// import { DesignationsProvider } from "./Modules/Iwd/helper/designationContext"; // Module not present
+// import { WorkProvider } from "./Modules/Iwd/helper/WorkContext"; // Module not present
+
+// Missing modules - commented out
+// const PlacementCellPage = lazy(() => import("./Modules/PlacementCell"));
+// const JobApplicationForm = lazy(
+//   () => import("./Modules/PlacementCell/ApplyForPlacementForm"),
+// );
+// const PlacementEventHandeling = lazy(
+//   () => import("./Modules/PlacementCell/components/PlacementEventHandeling"),
+// );
+// const ApplicationStatusTimeline = lazy(
+//   () => import("./Modules/PlacementCell/components/Timeline"),
+// );
+// const HealthCenter = lazy(() => import("./Modules/Health Center"));
+// const ConvenorBreadcumbs = lazy(
+//   () => import("./Modules/Scholarship/convenor/components/ConvenorBreadcumbs"),
+// );
+// const HostelPage = lazy(() => import("./Modules/Hostel-Management/index"));
+// const IwdModule = lazy(() => import("./Modules/Iwd/index"));
+// const IwdWorkPage = lazy(
+//   () => import("./Modules/Iwd/components/managebills/index"),
+// );
+
+const Dashboard = lazy(
+  () => import("./Modules/Dashboard/dashboardNotifications"),
+);
+// const ComplaintSystem = lazy(
+//   () => import("./Modules/ComplaintManagement/index"),
+// );
+const Profile = lazy(
+  () => import("./Modules/Dashboard/StudentProfile/profilePage"),
+);
+const LoginPage = lazy(() => import("./pages/login"));
+const ForgotPassword = lazy(() => import("./pages/forgotPassword"));
+const ResetPasswordConfirm = lazy(() => import("./pages/resetPasswordConfirm"));
+const AcademicPage = lazy(() => import("./Modules/Academic/index"));
+const ValidateAuth = lazy(() => import("./helper/validateauth"));
+// const HR = lazy(() => import("./Modules/HR/index"));
+const MessPage = lazy(() => import("./Modules/Mess/pages/index"));
+// const FileTracking = lazy(() => import("./Modules/FileTracking"));
+// const ResearchProjects = lazy(() => import("./Modules/RSPC/researchProjects"));
+// const RequestForms = lazy(() => import("./Modules/RSPC/requestForms"));
+// const VisitorsContent = lazy(
+//   () => import("./Modules/Visitors_Hostel/visitorsContent"),
+// );
+// const CancellationRequest = lazy(
+//   () => import("./Modules/Visitors_Hostel/cancellationRequest"),
+// );
+// const BookingForm = lazy(() => import("./Modules/Visitors_Hostel/bookingForm"));
+// const Bookings = lazy(() => import("./Modules/Visitors_Hostel/bookings"));
+// const ActiveBookingsPage = lazy(
+//   () => import("./Modules/Visitors_Hostel/activeBookings"),
+// );
+// const CompletedBookingsPage = lazy(
+//   () => import("./Modules/Visitors_Hostel/completedBookings"),
+// );
+// const VHGuidelinesPage = lazy(
+//   () => import("./Modules/Visitors_Hostel/vhGuidelines"),
+// );
+// const InventoryManagement = lazy(
+//   () => import("./Modules/Visitors_Hostel/inventory"),
+// );
+// const RoomsAvailibility = lazy(
+//   () => import("./Modules/Visitors_Hostel/roomsAvailability"),
+// );
+// const AccountStatemnts = lazy(
+//   () => import("./Modules/Visitors_Hostel/accountStatements"),
+// );
+const FacultyProfessionalProfile = lazy(
+  () =>
+    import("./Modules/facultyProfessionalProfile/facultyProfessionalProfile"),
+);
+
+const InactivityHandler = lazy(() => import("./helper/inactivityhandler"));
+// const DepartmentPage = lazy(
+//   () => import("./Modules/Department/DepartmentDashboard"),
+// );
+
+// const GymkhanaDashboard = lazy(
+//   () => import("./Modules/Gymkhana/GymkhanaDashboard.jsx"),
+// );
+
+const Examination = lazy(() => import("./Modules/Examination/examination"));
+
+const ProgrammeCurriculumRoutes = lazy(
+  () => import("./Modules/Program_curriculum/programmCurriculum"),
+);
+
+// const CourseManagementPage = lazy(() => import("./Modules/CourseManagement"));
+
+const theme = createTheme({
+  breakpoints: { xs: "30em", sm: "48em", md: "64em", lg: "74em", xl: "90em" },
+});
+function ProfileRouteWithUsername() {
+  const { username } = useParams();
+  return <Profile connectionRoute={`${host}/dep/api/profile/${username}/`} />;
+}
+export default function App() {
+  const location = useLocation();
+  const role = useSelector((state) => state.user.role);
+  return (
+    <MantineProvider theme={theme}>
+      <Notifications position="top-center" autoClose={2000} limit={1} />
+
+      {![
+        "/accounts/login",
+        "/reset-password",
+        location.pathname.startsWith("/reset-password-confirm/")
+          ? location.pathname
+          : "",
+      ].includes(location.pathname) && <ValidateAuth />}
+      {location.pathname !== "/accounts/login" && <InactivityHandler />}
+
+      <Routes>
+        <Route path="/" element={<Navigate to="/accounts/login" replace />} />
+        <Route
+          path="/dashboard"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Dashboard />
+              </Suspense>
+            </Layout>
+          }
+        />
+
+        <Route
+          path="/academics"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <AcademicPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/programme_curriculum/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ProgrammeCurriculumRoutes />
+              </Suspense>
+            </Layout>
+          }
+        />
+        {/* HR Module - commented out - module not present
+        <Route
+          path="/hr/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <HR />
+              </Suspense>
+            </Layout>
+          }
+        />
+        */}
+        <Route
+          path="/examination/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Examination />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/mess"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <MessPage />
+              </Suspense>
+            </Layout>
+        {/* Routes commented out - modules not present
+          }
+        />
+        <Route
+          path="/placement-cell"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <PlacementCellPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/placement-cell/apply-placement"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <JobApplicationForm />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/placement-cell/view"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <PlacementEventHandeling />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/placement-cell/timeline"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ApplicationStatusTimeline />
+              </Suspense>
+            </Layout>
+
+        {/* Commented out - Inventory module not present
+        <Route
+          path="/inventory"
+          element={
+            <Layout>
+              <InventoryIndex />
+            </Layout>
+          }
+        />        <Route
+          path="/course-management"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <CourseManagementPage />
+              </Suspense>
+            </Layout>
+          }
+
+        <Route
+          path="/profile"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <Profile />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/profile/:username"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ProfileRouteWithUsername />
+              </Suspense>
+            </Layout>
+        {/* Routes commented out - modules not present
+          }
+        />
+        <Route
+          path="/filetracking"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <FileTracking />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <Bookings />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/pending_requests"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <PendingReqs />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/cancel_request"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <CancellationRequest />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/active_bookings"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <ActiveBookingsPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/completed_bookings"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <CompletedBookingsPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/booking-form"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                {" "}
+                <VisitorsContent />
+                <BookingForm />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/room-availability"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <RoomsAvailibility />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/mess-record"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/inventory"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <InventoryManagement />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/account-statement"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <AccountStatemnts />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/visitors_hostel/rules"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <VisitorsContent />
+                <VHGuidelinesPage />
+              </Suspense>
+            </Layout>
+        <Route
+          path="/facultyprofessionalprofile/*"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <FacultyProfessionalProfile />
+              </Suspense>
+            </Layout>
+        {/* Routes commented out - modules not present
+          }
+        />
+        <Route
+          path="/complaints"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ComplaintSystem />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/department"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <DepartmentPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/hostel"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <HostelPage />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/iwd"
+          element={
+            <Suspense fallback={<div>Loading .... </div>}>
+              <DesignationsProvider>
+                <Layout>
+                  <IwdModule />
+                </Layout>
+              </DesignationsProvider>
+            </Suspense>
+          }
+        />
+        <Route
+          path="/iwd/work/:id"
+          element={
+            <Suspense fallback={<div>Loading .... </div>}>
+              <DesignationsProvider>
+                <WorkProvider>
+                  <Layout>
+                    <IwdWorkPage />
+                  </Layout>
+                </WorkProvider>
+              </DesignationsProvider>
+            </Suspense>
+          }
+        />
+        <Route
+          path="/research"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <ResearchProjects />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/research/forms"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <RequestForms />
+              </Suspense>
+            </Layout>
+          }
+        <Route
+        {/* Routes commented out - modules not present
+        />
+
+        <Route
+          path="/scholarship"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                {role === "spacsconvenor" && <ConvenorBreadcumbs />}
+                {role === "student" && <UserBreadcrumbs />}
+                {role === "spacsassistant" && <ConvenorBreadcumbs />}
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/department"
+          element={
+            <Layout>
+              <DepartmentPage />
+            </Layout>
+          }
+
+        <Route path="/healthcenter/*" element={<div>Health Center module not available</div>} />
+        {/* <Route path="/purchase/*" element={<PurchaseRoutes />} /> */}
+        <Route path="/patent/*" element={<PatentRoutes />} />
+        <Route path="/accounts/login" element={<LoginPage />} />
+        <Route path="/reset-password" element={<ForgotPassword />} />
+        <Route
+          path="/reset-password-confirm/:uid/:token"
+          element={
+            <Suspense
+              fallback={
+                <div style={{ textAlign: "center" }}>Loading .... </div>
+              }
+            >
+              <ResetPasswordConfirm />
+            </Suspense>
+          }
+        {/* Routes commented out - modules not present
+        />
+
+        <Route
+          path="/GymKhana"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <GymkhanaDashboard />
+              </Suspense>
+            </Layout>
+          }
+        />
+        <Route
+          path="/otherAcadProcedures"
+          element={
+            <Layout>
+              <Suspense fallback={<div>Loading .... </div>}>
+                <OtherAcadProcedures />
+              </Suspense>
+            </Layout>
+          }
+      </Routes>
+    </MantineProvider>
+  );
+}
diff --git a/src/Modules/Patent/components/Applicant/ApplicantMainDashboard.jsx b/src/Modules/Patent/components/Applicant/ApplicantMainDashboard.jsx
new file mode 100644
index 000000000..dadfcbe96
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/ApplicantMainDashboard.jsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Container, Loader, Flex, Select } from "@mantine/core";
+import { useDispatch } from "react-redux";
+import { SortAscending } from "@phosphor-icons/react";
+import CustomBreadcrumbs from "../../../../components/Breadcrumbs.jsx";
+import ModuleTabs from "../../../../components/moduleTabs.jsx";
+import SubmitNewApplication from "./SubmitNewApplication/ApplicantSubmit.jsx";
+import ApplicantDashboard from "./Dashboard/ApplicantDashboard.jsx";
+import ViewApplicationsPage from "./ViewApplication/ApplicationView.jsx";
+import SavedDraftsPage from "./SavedDrafts/ApplicationDraft.jsx";
+import NotificationsPage from "./Notifications/ApplicantNotifications.jsx";
+import ApplicationForm from "./SubmitNewApplication/ApplicationForm.jsx";
+import SearchApplications from "../Common/Search/SearchApplications.jsx";
+import PendingConsentApplications from "./PendingConsent/PendingConsentApplications.jsx";
+
+const categories = ["Most Recent", "Tags", "Title"];
+
+function ApplicantMainDashboard() {
+  const [activeTab, setActiveTab] = useState("0");
+  const [sortedBy, setSortedBy] = useState("Most Recent");
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  // Define your tabs here
+  const tabItems = [
+    { title: "Dashboard" },
+    { title: "Submit New Application" },
+    { title: "View Applications" },
+    { title: "Pending Consents" },
+    { title: "Saved Drafts" },
+    { title: "Notifications" },
+    { title: "Search Applications" },
+  ];
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = localStorage.getItem("authToken");
+      if (!token) return console.error("No authentication token found!");
+
+      try {
+        setLoading(true);
+        // Fetch data logic here if needed
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [dispatch]);
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+      <Flex justify="space-between" align="center" mt="lg">
+        <ModuleTabs
+          tabs={tabItems}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          badges={[]}
+        />
+
+        <Flex align="center" mt="md" rowGap="1rem" columnGap="4rem" wrap="wrap">
+          <Select
+            classNames={{
+              option: "select-options",
+              input: "select-inputs",
+            }}
+            variant="filled"
+            leftSection={<SortAscending />}
+            data={categories}
+            value={sortedBy}
+            onChange={setSortedBy}
+            placeholder="Sort By"
+          />
+        </Flex>
+      </Flex>
+
+      {/* Render content based on the active tab */}
+      <Grid mt="xl">
+        {loading ? (
+          <Container py="xl">
+            <Loader size="lg" />
+          </Container>
+        ) : (
+          <>
+            {activeTab === "0" && (
+              <ApplicantDashboard setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "1" && (
+              <SubmitNewApplication setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "1.1" && (
+              <ApplicationForm setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "2" && (
+              <ViewApplicationsPage setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "3" && (
+              <PendingConsentApplications />
+            )}
+            {activeTab === "4" && (
+              <SavedDraftsPage setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "5" && (
+              <NotificationsPage setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "6" && (
+              <SearchApplications />
+            )}
+          </>
+        )}
+      </Grid>
+    </>
+  );
+}
+
+export default ApplicantMainDashboard;
diff --git a/src/Modules/Patent/components/Applicant/Dashboard/ApplicantDashboard.jsx b/src/Modules/Patent/components/Applicant/Dashboard/ApplicantDashboard.jsx
new file mode 100644
index 000000000..18f3364f8
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/Dashboard/ApplicantDashboard.jsx
@@ -0,0 +1,326 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Grid,
+  Box,
+  Text,
+  Divider,
+  Button,
+  Container,
+  Progress,
+} from "@mantine/core";
+import { ClipboardText, FilePlus, Archive, Bell } from "@phosphor-icons/react";
+import "../../../style/Applicant/ApplicantDashboard.css";
+import DownloadsSection from "./DownloadsSection";
+
+function ApplicantDashboard({ setActiveTab }) {
+  return (
+    <Box>
+      {/* Page Title */}
+      <Text id="pms-dashboard-title">Patent & Copyright Dashboard</Text>
+
+      {/* Content Below Title */}
+      <Container id="pms-dashboard-content-container">
+        {/* Feature Description */}
+        <Text mt="sm" mb="lg" pb="lg">
+          Welcome to the Patent Application Management System. This platform
+          enables you to efficiently manage your patent applications, monitor
+          their progress, and access essential resources. Please follow the
+          established workflow for a streamlined application process.
+        </Text>
+
+        {/* Feature Points */}
+        <Box id="pms-dashboard-feature-box-container">
+          <Grid>
+            <Grid.Col span={12}>
+              <Box id="pms-dashboard-feature-box-with-hover">
+                <ClipboardText size={28} id="pms-dashboard-feature-icon" />
+                <Text>
+                  <span id="pms-dashboard-feature-box-title">
+                    Application Tracking:{" "}
+                  </span>
+                  Monitor the status of your patent applications with real-time
+                  updates and comprehensive progress tracking.
+                </Text>
+              </Box>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Box id="pms-dashboard-feature-box-with-hover">
+                <FilePlus size={28} id="pms-dashboard-feature-icon" />
+                <Text>
+                  <span id="pms-dashboard-feature-box-title">
+                    Structured Process:{" "}
+                  </span>
+                  Follow our systematic approach for completing patent
+                  applications with clear guidance at each stage.
+                </Text>
+              </Box>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Box id="pms-dashboard-feature-box-with-hover">
+                <Archive size={28} id="pms-dashboard-feature-icon" />
+                <Text>
+                  <span id="pms-dashboard-feature-box-title">
+                    Resource Management:{" "}
+                  </span>
+                  Access comprehensive documentation, guidelines, and forms
+                  essential for the patent application process.
+                </Text>
+              </Box>
+            </Grid.Col>
+          </Grid>
+        </Box>
+
+        <Divider id="pms-dashboard-divider" />
+
+        {/* Application Workflow */}
+        <Container id="pms-dashboard-workflow-container">
+          <Text id="pms-dashboard-section-title" mb="lg">
+            Application Workflow
+          </Text>
+
+          {/* Horizontal Progress Bar for Larger Screens */}
+          <Box
+            id="pms-status-progress-container"
+            display={{ base: "none", sm: "block" }}
+            style={{ position: "relative" }}
+          >
+            <Progress
+              size="xl"
+              radius="lg"
+              sections={[
+                { value: 14.3, color: "blue" },
+                { value: 14.3, color: "#b3cde0" },
+                { value: 14.3, color: "#8cb3d9" },
+                { value: 14.3, color: "#6699cc" },
+                { value: 14.3, color: "#336699" },
+                { value: 14.3, color: "#003366" },
+                { value: 14.2, color: "black" },
+              ]}
+              mt="md"
+            />
+            {/* Dots */}
+            <Box
+              style={{
+                position: "absolute",
+                top: "40%",
+                left: 0,
+                width: "100%",
+                display: "flex",
+                justifyContent: "space-between",
+                transform: "translateY(-50%)",
+              }}
+            >
+              {[
+                { label: "Submitted", color: "#b3cde0" },
+                { label: "PCCAdmin", color: "#8cb3d9" },
+                { label: "Attorney Assignment", color: "#6699cc" },
+                { label: "Director's Approval", color: "#336699" },
+                { label: "Patentability Check", color: "blue" },
+                { label: "Search Report", color: "#003366" },
+                { label: "Patent Filed", color: "black" },
+              ].map((step, index) => (
+                <Box key={index} style={{ flex: 1, textAlign: "center" }}>
+                  <Box
+                    style={{
+                      height: "14px",
+                      width: "14px",
+                      backgroundColor: step.color,
+                      borderRadius: "50%",
+                      margin: "0 auto",
+                      marginBottom: "8px",
+                      border: "2px solid white",
+                      boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.2)",
+                    }}
+                  />
+                </Box>
+              ))}
+            </Box>
+            {/* Labels Below Bar */}
+            <Box
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginTop: "16px",
+              }}
+            >
+              {[
+                "Submitted",
+                "PCCAdmin",
+                "PCC Review",
+                "Director's Approval",
+                "Patentability Check",
+                "Search Report",
+                "Patent Filed",
+              ].map((label, index) => (
+                <Text
+                  key={index}
+                  style={{
+                    fontSize: "16px",
+                    fontWeight: "bold",
+                    color: "#1a202c",
+                    textAlign: "center",
+                    flex: 1,
+                  }}
+                >
+                  {label}
+                </Text>
+              ))}
+            </Box>
+          </Box>
+
+          {/* Vertical Progress Bar for Mobile Screens */}
+          <Box
+            id="pms-dashboard-mobile-progress-container"
+            display={{ base: "flex", sm: "none" }}
+          >
+            <Box id="pms-dashboard-mobile-progress-bar">
+              <Progress
+                size="xl"
+                radius="lg"
+                sections={[
+                  { value: 14.3, color: "blue" },
+                  { value: 14.3, color: "#b3cde0" },
+                  { value: 14.3, color: "#8cb3d9" },
+                  { value: 14.3, color: "#6699cc" },
+                  { value: 14.3, color: "#336699" },
+                  { value: 14.3, color: "#003366" },
+                  { value: 14.2, color: "black" },
+                ]}
+                orientation="vertical"
+                style={{ height: "300px" }}
+              />
+            </Box>
+            <Box id="pms-dashboard-mobile-progress-labels">
+              {[
+                { label: "Submitted", color: "#b3cde0" },
+                { label: "PCCAdmin", color: "#8cb3d9" },
+                { label: "PCC Review", color: "#6699cc" },
+                { label: "Director's Approval", color: "#336699" },
+                { label: "Patentability Check", color: "blue" },
+                { label: "Search Report", color: "#003366" },
+                { label: "Patent Filed", color: "black" },
+              ].map((step, index) => (
+                <Box key={index} id="pms-dashboard-mobile-progress-label">
+                  <Box
+                    id="pms-dashboard-mobile-progress-dot"
+                    style={{ backgroundColor: step.color }}
+                  />
+                  <Text>{step.label}</Text>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Container>
+
+        <Divider id="pms-dashboard-divider" />
+
+        {/* Downloads Section */}
+        <DownloadsSection />
+      </Container>
+
+      {/* Dashboard Sections */}
+      <Grid mt="xl" id="pms-dashboard-grid">
+        {/* Submit New Application */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          <Box id="pms-dashboard-cards">
+            <Text id="pms-dashboard-card-title">
+              <FilePlus size={20} id="pms-dashboard-icon" /> Submit New
+              Application
+            </Text>
+            <Divider id="pms-dashboard-card-divider" />
+            <Text size="sm" mt="sm">
+              Initiate the patent application process through our comprehensive
+              submission system.
+            </Text>
+            <Button
+              variant="outline"
+              fullWidth
+              mt="md"
+              size="sm"
+              onClick={() => setActiveTab("1")}
+            >
+              Begin Application
+            </Button>
+          </Box>
+        </Grid.Col>
+
+        {/* View Applications */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          <Box id="pms-dashboard-cards">
+            <Text id="pms-dashboard-card-title">
+              <ClipboardText size={20} id="pms-dashboard-icon" /> View
+              Applications
+            </Text>
+            <Divider id="pms-dashboard-card-divider" />
+            <Text size="sm" mt="sm">
+              Access and monitor the status of all your submitted patent
+              applications.
+            </Text>
+            <Button
+              variant="outline"
+              fullWidth
+              mt="md"
+              size="sm"
+              onClick={() => setActiveTab("2")}
+            >
+              View Applications
+            </Button>
+          </Box>
+        </Grid.Col>
+
+        {/* Saved Drafts */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          <Box id="pms-dashboard-cards">
+            <Text id="pms-dashboard-card-title">
+              <Archive size={20} id="pms-dashboard-icon" /> Saved Drafts
+            </Text>
+            <Divider id="pms-dashboard-card-divider" />
+            <Text size="sm" mt="sm">
+              Continue working on applications that have been saved as drafts.
+            </Text>
+            <Button
+              variant="outline"
+              fullWidth
+              mt="md"
+              size="sm"
+              onClick={() => setActiveTab("3")}
+            >
+              Access Drafts
+            </Button>
+          </Box>
+        </Grid.Col>
+
+        {/* Notifications */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          <Box id="pms-dashboard-cards">
+            <Text id="pms-dashboard-card-title">
+              <Bell size={20} id="icon" /> Notifications
+            </Text>
+            <Divider id="pms-dashboard-card-divider" />
+            <Text size="sm" mt="sm">
+              Receive and review important updates regarding your patent
+              applications.
+            </Text>
+            <Button
+              variant="outline"
+              fullWidth
+              mt="md"
+              size="sm"
+              onClick={() => setActiveTab("4")}
+            >
+              View Notifications
+            </Button>
+          </Box>
+        </Grid.Col>
+      </Grid>
+    </Box>
+  );
+}
+
+// Define prop types for ApplicantDashboard
+ApplicantDashboard.propTypes = {
+  setActiveTab: PropTypes.func.isRequired, // setActiveTab is a required function
+};
+
+export default ApplicantDashboard;
diff --git a/src/Modules/Patent/components/Applicant/Dashboard/DownloadsSection.jsx b/src/Modules/Patent/components/Applicant/Dashboard/DownloadsSection.jsx
new file mode 100644
index 000000000..99ded74fb
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/Dashboard/DownloadsSection.jsx
@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from "react";
+import { Button, Text, Table, LoadingOverlay } from "@mantine/core";
+import { ArrowCircleDown } from "@phosphor-icons/react";
+import { fetchDocuments } from "../../../services/documentService.jsx";
+
+function DownloadsSection() {
+  const [downloadsData, setDownloadsData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [hoveredRow, setHoveredRow] = useState(null);
+
+  const loadDocuments = async () => {
+    setLoading(true);
+    try {
+      const data = await fetchDocuments();
+      setDownloadsData(data);
+    } catch (error) {
+      console.error("Error fetching documents:", error);
+      alert("Failed to load documents");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadDocuments();
+  }, []);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        maxWidth: "1400px",
+        margin: "20px auto 40px auto",
+        padding: "0 20px",
+        position: "relative",
+      }}
+    >
+      <LoadingOverlay visible={loading} overlayBlur={2} />
+
+      <Text
+        style={{
+          fontSize: "24px",
+          fontWeight: 600,
+          color: "#1976d2",
+          margin: "20px 0",
+          width: "100%",
+          textAlign: "left",
+        }}
+      >
+        Documents & Downloads
+      </Text>
+
+      <div style={{ overflowX: "auto", width: "100%" }}>
+        <Table
+          style={{
+            width: "100%",
+            borderCollapse: "separate",
+            borderSpacing: 0,
+            borderRadius: "8px",
+            overflow: "hidden",
+            border: "1px solid #e5edf1",
+          }}
+        >
+          <thead>
+            <tr>
+              <th
+                style={{
+                  width: "5%",
+                  background: "rgb(244, 246, 246)",
+                  fontWeight: 600,
+                  padding: "16px 20px",
+                  borderBottom: "2px solid #e5edf1",
+                  borderRight: "1px solid #e5edf1",
+                }}
+              >
+                S.No.
+              </th>
+              <th
+                style={{
+                  width: "75%",
+                  background: "rgb(244, 246, 246)",
+                  fontWeight: 600,
+                  padding: "16px 20px",
+                  borderBottom: "2px solid #e5edf1",
+                  borderRight: "1px solid #e5edf1",
+                }}
+              >
+                Document Title
+              </th>
+              <th
+                style={{
+                  width: "20%",
+                  background: "rgb(244, 246, 246)",
+                  fontWeight: 600,
+                  padding: "16px 20px",
+                  textAlign: "center",
+                }}
+              >
+                Download
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {downloadsData.map((download, index) => {
+              const isHovered = hoveredRow === index;
+              return (
+                <tr
+                  key={download.id}
+                  onMouseEnter={() => setHoveredRow(index)}
+                  onMouseLeave={() => setHoveredRow(null)}
+                  style={{
+                    backgroundColor: isHovered
+                      ? "#f0f4fa"
+                      : index % 2 === 0
+                        ? "#f8fbff"
+                        : "#ffffff",
+                    transition: "background-color 0.2s ease",
+                  }}
+                >
+                  <td
+                    style={{
+                      padding: "14px 20px",
+                      borderBottom: "1px solid #e5edf1",
+                      borderRight: "1px solid #e5edf1",
+                      color: "#000",
+                    }}
+                  >
+                    {index + 1}
+                  </td>
+                  <td
+                    style={{
+                      padding: "14px 20px",
+                      borderBottom: "1px solid #e5edf1",
+                      borderRight: "1px solid #e5edf1",
+                      color: "#000",
+                    }}
+                  >
+                    {download.title}
+                  </td>
+                  <td
+                    style={{
+                      padding: "14px 20px",
+                      borderBottom: "1px solid #e5edf1",
+                      textAlign: "center",
+                    }}
+                  >
+                    <Button
+                      component="a"
+                      href={download.link}
+                      target="_blank"
+                      variant="outline"
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        background: isHovered ? "#1976d2" : "#fff",
+                        color: isHovered ? "#fff" : "#1976d2",
+                        border: "1.5px solid #1976d2",
+                        borderRadius: "6px",
+                        padding: "6px 14px",
+                        fontWeight: 500,
+                        transition: "all 0.18s",
+                      }}
+                    >
+                      <ArrowCircleDown size={16} />
+                      Download
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+export default DownloadsSection;
diff --git a/src/Modules/Patent/components/Applicant/EditApplication/EditApplicationModal.jsx b/src/Modules/Patent/components/Applicant/EditApplication/EditApplicationModal.jsx
new file mode 100644
index 000000000..dd999ed4f
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/EditApplication/EditApplicationModal.jsx
@@ -0,0 +1,680 @@
+import React, { useState, useEffect } from "react";
+import {
+  Modal,
+  TextInput,
+  Textarea,
+  Select,
+  Button,
+  Group,
+  Text,
+  Stepper,
+  Card,
+  Grid,
+  FileInput,
+  NumberInput,
+  Alert,
+  Divider,
+  Box,
+  ActionIcon,
+  Table,
+  Badge,
+} from "@mantine/core";
+import {
+  FileText,
+  Plus,
+  Trash,
+  Upload,
+  CheckCircle,
+  Warning
+} from "@phosphor-icons/react";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+const EditApplicationModal = ({
+  opened,
+  onClose,
+  application,
+  onSuccess
+}) => {
+  const [activeStep, setActiveStep] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+
+  // Form data state
+  const [formData, setFormData] = useState({
+    title: "",
+    area_of_invention: "",
+    problem_statement: "",
+    objective: "",
+    ip_type: "",
+    novelty: "",
+    advantages: "",
+    tested_experimentally: false,
+    applications: "",
+    funding_details: "",
+    funding_source: "",
+    publication_details: "",
+    mou_details: "",
+    research_details: "",
+    development_stage: "",
+    company_details: [],
+    inventors: [],
+    comments: ""
+  });
+
+  const [files, setFiles] = useState({
+    poc_details: null,
+    source_file: null,
+    mou_file: null,
+    form_iii: null
+  });
+
+  const authToken = localStorage.getItem("authToken");
+
+  // Pre-populate form data when application changes
+  useEffect(() => {
+    if (application && opened) {
+      console.log("Populating edit form with existing application data:", application);
+
+      setFormData({
+        // Preserve ALL existing data fields
+        title: application.title || "",
+        area_of_invention: application.section_i?.area || "",
+        problem_statement: application.section_i?.problem || "",
+        objective: application.section_i?.objective || "",
+        ip_type: application.section_i?.type_of_ip || "",
+        novelty: application.section_i?.novelty || "",
+        advantages: application.section_i?.advantages || "",
+        tested_experimentally: application.section_i?.is_tested || false,
+        applications: application.section_i?.applications || "",
+
+        // Section II - Preserve all funding data
+        funding_details: application.section_ii?.funding_details || "",
+        funding_source: application.section_ii?.funding_source || "",
+        publication_details: application.section_ii?.publication_details || "",
+        mou_details: application.section_ii?.mou_details || "",
+        research_details: application.section_ii?.research_details || "",
+
+        // Section III - Preserve company details and development stage
+        development_stage: application.section_iii?.[0]?.development_stage ||
+                          application.company_details?.[0]?.development_stage || "",
+        company_details: application.section_iii?.length > 0
+          ? application.section_iii
+          : application.company_details || [],
+
+        // Preserve inventor data with all fields
+        inventors: (application.inventors || []).map(inventor => ({
+          name: inventor.name || "",
+          email: inventor.email || inventor.institute_mail || inventor.personal_mail || "",
+          institute_mail: inventor.institute_mail || inventor.email || "",
+          personal_mail: inventor.personal_mail || inventor.email || "",
+          mobile: inventor.mobile || "",
+          address: inventor.address || "",
+          percentage_share: inventor.percentage_share || 0,
+          has_consent: inventor.has_consent || false,
+          consent_date: inventor.consent_date || null
+        })),
+
+        // Additional fields that might exist
+        token_no: application.token_no || application.token_number || "",
+        status: application.status || "",
+        decision_status: application.decision_status || "",
+        submitted_date: application.submitted_date || "",
+
+        // Comments for this resubmission
+        comments: ""
+      });
+
+      // Reset form state
+      setActiveStep(0);
+      setErrorMessage("");
+      setSuccessMessage("");
+
+      // Reset file uploads (user can choose new files if needed)
+      setFiles({
+        poc_details: null,
+        source_file: null,
+        mou_file: null,
+        form_iii: null
+      });
+    }
+  }, [application, opened]);
+
+  const updateFormData = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const addCompany = () => {
+    setFormData(prev => ({
+      ...prev,
+      company_details: [...prev.company_details, {
+        company_name: "",
+        contact_person: "",
+        contact_no: ""
+      }]
+    }));
+  };
+
+  const removeCompany = (index) => {
+    setFormData(prev => ({
+      ...prev,
+      company_details: prev.company_details.filter((_, i) => i !== index)
+    }));
+  };
+
+  const updateCompany = (index, field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      company_details: prev.company_details.map((company, i) =>
+        i === index ? { ...company, [field]: value } : company
+      )
+    }));
+  };
+
+  const updateInventor = (index, field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      inventors: prev.inventors.map((inventor, i) =>
+        i === index ? { ...inventor, [field]: value } : inventor
+      )
+    }));
+  };
+
+  const validateCurrentStep = () => {
+    switch (activeStep) {
+      case 0: // Basic Information
+        if (!formData.title?.trim()) {
+          setErrorMessage("Title is required");
+          return false;
+        }
+        if (!formData.area_of_invention?.trim()) {
+          setErrorMessage("Area of invention is required");
+          return false;
+        }
+        if (!formData.ip_type) {
+          setErrorMessage("IP Type is required");
+          return false;
+        }
+        break;
+      case 1: // Technical Details
+        if (!formData.problem_statement?.trim() || formData.problem_statement.length < 50) {
+          setErrorMessage("Problem statement must be at least 50 characters");
+          return false;
+        }
+        if (!formData.objective?.trim() || formData.objective.length < 30) {
+          setErrorMessage("Objective must be at least 30 characters");
+          return false;
+        }
+        break;
+      case 2: // Funding & Research
+        if (!formData.funding_details?.trim()) {
+          setErrorMessage("Funding details are required");
+          return false;
+        }
+        break;
+      case 3: // Inventors validation
+        const totalPercentage = formData.inventors.reduce((sum, inv) => sum + (parseFloat(inv.percentage_share) || 0), 0);
+        if (Math.abs(totalPercentage - 100) > 0.01) {
+          setErrorMessage(`Inventor percentages must sum to 100%. Current total: ${totalPercentage}%`);
+          return false;
+        }
+        break;
+    }
+    setErrorMessage("");
+    return true;
+  };
+
+  const nextStep = () => {
+    if (validateCurrentStep()) {
+      setActiveStep(prev => Math.min(prev + 1, 4));
+    }
+  };
+
+  const prevStep = () => {
+    setActiveStep(prev => Math.max(prev - 1, 0));
+    setErrorMessage("");
+  };
+
+  const handleSubmit = async () => {
+    if (!validateCurrentStep()) return;
+
+    try {
+      setLoading(true);
+      setErrorMessage("");
+
+      // Prepare comprehensive data for submission - PRESERVE ALL EXISTING DATA
+      const submitData = new FormData();
+
+      // Create comprehensive data object ensuring NO data loss
+      const comprehensiveData = {
+        // Core application data
+        title: formData.title || application.title || "",
+
+        // Section I - Technical details (preserve all existing fields)
+        area_of_invention: formData.area_of_invention || application.section_i?.area || "",
+        problem_statement: formData.problem_statement || application.section_i?.problem || "",
+        objective: formData.objective || application.section_i?.objective || "",
+        ip_type: formData.ip_type || application.section_i?.type_of_ip || "",
+        novelty: formData.novelty || application.section_i?.novelty || "",
+        advantages: formData.advantages || application.section_i?.advantages || "",
+        tested_experimentally: formData.tested_experimentally !== undefined
+          ? formData.tested_experimentally
+          : application.section_i?.is_tested || false,
+        applications: formData.applications || application.section_i?.applications || "",
+
+        // Section II - Funding & Research (preserve all existing fields)
+        funding_details: formData.funding_details || application.section_ii?.funding_details || "",
+        funding_source: formData.funding_source || application.section_ii?.funding_source || "",
+        publication_details: formData.publication_details || application.section_ii?.publication_details || "",
+        mou_details: formData.mou_details || application.section_ii?.mou_details || "",
+        research_details: formData.research_details || application.section_ii?.research_details || "",
+
+        // Section III - Company details (preserve existing structure)
+        development_stage: formData.development_stage ||
+                          application.section_iii?.[0]?.development_stage ||
+                          application.company_details?.[0]?.development_stage || "",
+        company_details: formData.company_details?.length > 0
+          ? formData.company_details
+          : application.section_iii?.length > 0
+            ? application.section_iii
+            : application.company_details?.length > 0
+              ? application.company_details
+              : [{
+                  company_name: "Default Company",
+                  contact_person: "Default Contact",
+                  contact_no: "0000000000"
+                }],
+
+        // Inventor data (preserve existing inventor information)
+        inventors: formData.inventors?.length > 0
+          ? formData.inventors.map(inv => ({
+              name: inv.name || "",
+              institute_mail: inv.institute_mail || inv.email || "",
+              personal_mail: inv.personal_mail || inv.email || "",
+              mobile: inv.mobile || "",
+              address: inv.address || "",
+              percentage: inv.percentage_share || 0
+            }))
+          : (application.inventors || []).map(inv => ({
+              name: inv.name || "",
+              institute_mail: inv.institute_mail || inv.email || "",
+              personal_mail: inv.personal_mail || inv.email || "",
+              mobile: inv.mobile || "",
+              address: inv.address || "",
+              percentage: inv.percentage_share || 0
+            })),
+
+        // Comments for this resubmission
+        comments: formData.comments || "Application updated via edit interface"
+      };
+
+      console.log("Submitting comprehensive resubmission data:", comprehensiveData);
+
+      // Add JSON data
+      submitData.append("json_data", JSON.stringify(comprehensiveData));
+
+      // Add files (only if new files were uploaded)
+      Object.keys(files).forEach(key => {
+        if (files[key]) {
+          submitData.append(key, files[key]);
+        }
+      });
+
+      const response = await axios.post(
+        `${API_BASE_URL}/applicant/applications/resubmit/${application.application_id}/`,
+        submitData,
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+
+      setSuccessMessage("Application updated and resubmitted successfully!");
+      setTimeout(() => {
+        onSuccess?.();
+        onClose();
+      }, 2000);
+
+    } catch (error) {
+      console.error("Resubmission error:", error);
+      setErrorMessage(
+        error.response?.data?.error ||
+        "Failed to resubmit application. Please check all fields and try again."
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const ipTypes = [
+    "Patent", "Copyright", "Trademark",
+    "Industrial Design", "Trade Secret", "Geographical Indication"
+  ];
+
+  const developmentStages = [
+    "Embryonic", "Partially developed", "Off-the-shelf"
+  ];
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="xl"
+      title="Edit Application for Resubmission"
+      closeOnClickOutside={false}
+    >
+      <Box>
+        {errorMessage && (
+          <Alert color="red" title="Error" mb="md">
+            {errorMessage}
+          </Alert>
+        )}
+
+        {successMessage && (
+          <Alert color="green" title="Success" mb="md" icon={<CheckCircle size={16} />}>
+            {successMessage}
+          </Alert>
+        )}
+
+        <Stepper active={activeStep} mb="xl">
+          <Stepper.Step label="Basic Info" description="Title, area, IP type" />
+          <Stepper.Step label="Technical" description="Problem, objective, novelty" />
+          <Stepper.Step label="Research" description="Funding, publications" />
+          <Stepper.Step label="Inventors" description="Review inventor details" />
+          <Stepper.Step label="Review" description="Final review & submit" />
+        </Stepper>
+
+        {/* Data preservation info */}
+        <Alert color="blue" title="Data Preservation" mb="md" icon={<CheckCircle size={16} />}>
+          All your existing application data has been automatically loaded. You only need to modify the fields you want to change -
+          everything else will be preserved exactly as it was.
+        </Alert>
+
+        {/* Step 0: Basic Information */}
+        {activeStep === 0 && (
+          <Card p="md">
+            <Text weight={500} mb="md">Basic Information</Text>
+
+            <TextInput
+              label="Application Title"
+              description="Current title loaded from your original application"
+              placeholder="Enter application title"
+              value={formData.title}
+              onChange={(e) => updateFormData("title", e.target.value)}
+              required
+              mb="md"
+            />
+
+            <TextInput
+              label="Area of Invention"
+              description="Current area loaded from your original application"
+              placeholder="e.g., Computer Science, Biotechnology"
+              value={formData.area_of_invention}
+              onChange={(e) => updateFormData("area_of_invention", e.target.value)}
+              required
+              mb="md"
+            />
+
+            <Select
+              label="IP Type"
+              placeholder="Select IP type"
+              data={ipTypes}
+              value={formData.ip_type}
+              onChange={(value) => updateFormData("ip_type", value)}
+              required
+              mb="md"
+            />
+
+            <Textarea
+              label="Novelty"
+              placeholder="Describe the novel aspects"
+              value={formData.novelty}
+              onChange={(e) => updateFormData("novelty", e.target.value)}
+              minRows={3}
+              mb="md"
+            />
+
+            <Textarea
+              label="Advantages"
+              placeholder="List the advantages"
+              value={formData.advantages}
+              onChange={(e) => updateFormData("advantages", e.target.value)}
+              minRows={3}
+            />
+          </Card>
+        )}
+
+        {/* Step 1: Technical Details */}
+        {activeStep === 1 && (
+          <Card p="md">
+            <Text weight={500} mb="md">Technical Details</Text>
+
+            <Textarea
+              label="Problem Statement"
+              placeholder="Describe the problem (minimum 50 characters)"
+              value={formData.problem_statement}
+              onChange={(e) => updateFormData("problem_statement", e.target.value)}
+              minRows={4}
+              required
+              mb="md"
+            />
+
+            <Textarea
+              label="Objective"
+              placeholder="Describe the objective (minimum 30 characters)"
+              value={formData.objective}
+              onChange={(e) => updateFormData("objective", e.target.value)}
+              minRows={3}
+              required
+              mb="md"
+            />
+
+            <Textarea
+              label="Applications"
+              placeholder="Describe potential applications"
+              value={formData.applications}
+              onChange={(e) => updateFormData("applications", e.target.value)}
+              minRows={3}
+              mb="md"
+            />
+
+            <FileInput
+              label="POC Details (New Upload)"
+              placeholder="Upload proof of concept document"
+              accept=".pdf,.doc,.docx"
+              value={files.poc_details}
+              onChange={(file) => setFiles(prev => ({ ...prev, poc_details: file }))}
+              leftSection={<Upload size={16} />}
+            />
+          </Card>
+        )}
+
+        {/* Step 2: Research & Funding */}
+        {activeStep === 2 && (
+          <Card p="md">
+            <Text weight={500} mb="md">Research & Funding Details</Text>
+
+            <Textarea
+              label="Funding Details"
+              placeholder="Describe funding sources and amounts"
+              value={formData.funding_details}
+              onChange={(e) => updateFormData("funding_details", e.target.value)}
+              minRows={3}
+              required
+              mb="md"
+            />
+
+            <TextInput
+              label="Funding Source"
+              placeholder="e.g., Government Grant, Private Funding"
+              value={formData.funding_source}
+              onChange={(e) => updateFormData("funding_source", e.target.value)}
+              mb="md"
+            />
+
+            <Textarea
+              label="Publication Details"
+              placeholder="List any related publications"
+              value={formData.publication_details}
+              onChange={(e) => updateFormData("publication_details", e.target.value)}
+              minRows={2}
+              mb="md"
+            />
+
+            <Textarea
+              label="Research Details"
+              placeholder="Additional research information"
+              value={formData.research_details}
+              onChange={(e) => updateFormData("research_details", e.target.value)}
+              minRows={3}
+              mb="md"
+            />
+
+            <Group>
+              <FileInput
+                label="Source Agreement (New)"
+                accept=".pdf"
+                value={files.source_file}
+                onChange={(file) => setFiles(prev => ({ ...prev, source_file: file }))}
+                leftSection={<Upload size={16} />}
+                style={{ flex: 1 }}
+              />
+
+              <FileInput
+                label="MOU File (New)"
+                accept=".pdf"
+                value={files.mou_file}
+                onChange={(file) => setFiles(prev => ({ ...prev, mou_file: file }))}
+                leftSection={<Upload size={16} />}
+                style={{ flex: 1 }}
+              />
+            </Group>
+          </Card>
+        )}
+
+        {/* Step 3: Inventors Review */}
+        {activeStep === 3 && (
+          <Card p="md">
+            <Text weight={500} mb="md">Inventors Information</Text>
+            <Text size="sm" color="dimmed" mb="md">
+              Review and verify inventor details. Percentages must sum to exactly 100%.
+            </Text>
+
+            {formData.inventors.length > 0 ? (
+              <Table>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Email</th>
+                    <th>Percentage Share</th>
+                    <th>Consent Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {formData.inventors.map((inventor, index) => (
+                    <tr key={index}>
+                      <td>{inventor.name}</td>
+                      <td>{inventor.email}</td>
+                      <td>
+                        <NumberInput
+                          value={inventor.percentage_share}
+                          onChange={(value) => updateInventor(index, "percentage_share", value)}
+                          min={0}
+                          max={100}
+                          precision={2}
+                          size="sm"
+                          style={{ width: 100 }}
+                        />%
+                      </td>
+                      <td>
+                        <Badge color={inventor.has_consent ? "green" : "orange"}>
+                          {inventor.has_consent ? "Consented" : "Pending"}
+                        </Badge>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            ) : (
+              <Alert color="yellow" title="No Inventors Found">
+                This application has no inventor data. Contact support if this seems incorrect.
+              </Alert>
+            )}
+
+            <Box mt="md">
+              <Text size="sm" weight={500}>
+                Total Percentage: {formData.inventors.reduce((sum, inv) => sum + (parseFloat(inv.percentage_share) || 0), 0).toFixed(2)}%
+              </Text>
+              {Math.abs(formData.inventors.reduce((sum, inv) => sum + (parseFloat(inv.percentage_share) || 0), 0) - 100) > 0.01 && (
+                <Text size="sm" color="red">
+                  ⚠️ Percentages must sum to exactly 100%
+                </Text>
+              )}
+            </Box>
+          </Card>
+        )}
+
+        {/* Step 4: Review & Submit */}
+        {activeStep === 4 && (
+          <Card p="md">
+            <Text weight={500} mb="md">Review & Submit</Text>
+
+            <Textarea
+              label="Comments (Optional)"
+              description="Add any comments about the changes made"
+              placeholder="Describe what was modified in this resubmission"
+              value={formData.comments}
+              onChange={(e) => updateFormData("comments", e.target.value)}
+              minRows={3}
+              mb="md"
+            />
+
+            <Alert color="blue" title="Ready to Resubmit" icon={<CheckCircle size={16} />}>
+              Your application has been updated and is ready for resubmission.
+              Once submitted, it will be reviewed by the PCC Admin.
+            </Alert>
+          </Card>
+        )}
+
+        <Divider my="md" />
+
+        <Group position="apart">
+          <Button
+            variant="light"
+            onClick={prevStep}
+            disabled={activeStep === 0 || loading}
+          >
+            Previous
+          </Button>
+
+          <Group>
+            <Button variant="light" onClick={onClose} disabled={loading}>
+              Cancel
+            </Button>
+
+            {activeStep < 4 ? (
+              <Button onClick={nextStep} disabled={loading}>
+                Next Step
+              </Button>
+            ) : (
+              <Button
+                onClick={handleSubmit}
+                loading={loading}
+                leftSection={<CheckCircle size={16} />}
+              >
+                Resubmit Application
+              </Button>
+            )}
+          </Group>
+        </Group>
+      </Box>
+    </Modal>
+  );
+};
+
+export default EditApplicationModal;
\ No newline at end of file
diff --git a/src/Modules/Patent/components/Applicant/Notifications/ApplicantNotifications.jsx b/src/Modules/Patent/components/Applicant/Notifications/ApplicantNotifications.jsx
new file mode 100644
index 000000000..cdeb78e12
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/Notifications/ApplicantNotifications.jsx
@@ -0,0 +1,296 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Card, Button, Text, Box, Grid, Loader, Badge, ActionIcon } from "@mantine/core";
+import { Check, Bell, ArrowRight, CheckCircle } from "phosphor-react";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+const styles = {
+  notificationCard: {
+    padding: "1.5rem",
+    marginBottom: "1rem",
+    boxShadow: "0 5px 8px rgba(0, 0, 0, 0.1)",
+    borderRadius: "8px",
+    borderLeft: "10px solid #3182ce",
+    backgroundColor: "#fff",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    marginLeft: "-10px",
+  },
+  unreadCard: {
+    borderLeft: "10px solid #228be6",
+    backgroundColor: "#f8faff",
+  },
+  notificationTitle: {
+    fontSize: "22px",
+    fontWeight: 500,
+    marginBottom: "0",
+    color: "#1a1b1e",
+  },
+  notificationStatus: {
+    fontSize: "1rem",
+    fontWeight: 500,
+    marginBottom: "0.5rem",
+  },
+  notificationDate: {
+    fontSize: "0.875rem",
+    color: "#666",
+    marginBottom: "1rem",
+  },
+  notificationDescription: {
+    fontSize: "0.875rem",
+    color: "#444",
+    marginBottom: "0",
+    flex: 1,
+  },
+  markReadButton: {
+    width: "100%",
+    marginTop: "auto",
+    color: "#3182ce",
+    fontWeight: 500,
+  },
+  pageTitle: {
+    fontSize: "24px",
+    fontWeight: 600,
+    marginBottom: "10px",
+    color: "#1a1b1e",
+  },
+  container: {
+    width: "100%",
+    padding: "0 1rem",
+    maxWidth: "1800px",
+    margin: "0 50px",
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "20px",
+  },
+};
+
+const getNotificationColor = (type) => {
+  switch (type) {
+    case "Application Approved":
+      return "#38a169";
+    case "Application Rejected":
+      return "#e53e3e";
+    case "Appeal Update":
+      return "#805ad5";
+    case "Action Required":
+      return "#dd6b20";
+    case "Deadline Approaching":
+      return "#d69e2e";
+    case "Deadline Expired":
+      return "#c53030";
+    case "Status Change":
+      return "#3182ce";
+    case "Consent Required":
+      return "#319795";
+    case "Revision Requested":
+      return "#ed8936";
+    default:
+      return "#3182ce";
+  }
+};
+
+function NotificationCard({
+  id,
+  title,
+  notification_type,
+  message,
+  created_at,
+  is_read,
+  action_url,
+  onMarkAsRead,
+}) {
+  const color = getNotificationColor(notification_type);
+  const date = new Date(created_at);
+  const formattedDate = date.toLocaleDateString();
+  const formattedTime = date.toLocaleTimeString();
+
+  return (
+    <Card style={{ ...styles.notificationCard, ...(is_read ? {} : styles.unreadCard) }}>
+      <Box style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+        <Text style={styles.notificationTitle}>{title}</Text>
+        {!is_read && <Badge color="blue" size="sm">New</Badge>}
+      </Box>
+      <Text style={{ ...styles.notificationStatus, color }}>{notification_type}</Text>
+      <Text style={styles.notificationDate}>{`${formattedDate} | ${formattedTime}`}</Text>
+      <Text style={styles.notificationDescription}>{message}</Text>
+      <Box style={{ display: "flex", gap: "10px", marginTop: "auto" }}>
+        {!is_read && (
+          <Button
+            variant="outline"
+            leftSection={<Check size={16} />}
+            style={styles.markReadButton}
+            onClick={() => onMarkAsRead(id)}
+          >
+            Mark as Read
+          </Button>
+        )}
+        {action_url && (
+          <Button
+            variant="light"
+            rightSection={<ArrowRight size={16} />}
+            onClick={() => window.location.href = action_url}
+          >
+            View
+          </Button>
+        )}
+      </Box>
+    </Card>
+  );
+}
+
+NotificationCard.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  notification_type: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  created_at: PropTypes.string.isRequired,
+  is_read: PropTypes.bool.isRequired,
+  action_url: PropTypes.string,
+  onMarkAsRead: PropTypes.func.isRequired,
+};
+
+NotificationCard.defaultProps = {
+  action_url: "",
+};
+
+function NotificationsPage() {
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchNotifications = async () => {
+    const token = localStorage.getItem("authToken");
+    if (!token) {
+      setError("No authentication token found");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await axios.get(`${API_BASE_URL}/notifications/`, {
+        headers: { Authorization: `Token ${token}` },
+      });
+      setNotifications(response.data);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching notifications:", err);
+      setError("Failed to fetch notifications");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+  }, []);
+
+  const handleMarkAsRead = async (id) => {
+    const token = localStorage.getItem("authToken");
+    try {
+      await axios.post(
+        `${API_BASE_URL}/notifications/${id}/read/`,
+        {},
+        { headers: { Authorization: `Token ${token}` } }
+      );
+      setNotifications(
+        notifications.map((n) =>
+          n.id === id ? { ...n, is_read: true } : n
+        )
+      );
+    } catch (err) {
+      console.error("Error marking notification as read:", err);
+    }
+  };
+
+  const handleMarkAllAsRead = async () => {
+    const token = localStorage.getItem("authToken");
+    try {
+      await axios.post(
+        `${API_BASE_URL}/notifications/read-all/`,
+        {},
+        { headers: { Authorization: `Token ${token}` } }
+      );
+      setNotifications(notifications.map((n) => ({ ...n, is_read: true })));
+    } catch (err) {
+      console.error("Error marking all notifications as read:", err);
+    }
+  };
+
+  const unreadCount = notifications.filter((n) => !n.is_read).length;
+
+  if (loading) {
+    return (
+      <Box style={styles.container}>
+        <Loader size="lg" />
+      </Box>
+    );
+  }
+
+  return (
+    <Box style={styles.container}>
+      <Box style={styles.headerRow}>
+        <Box style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+          <Bell size={28} weight="fill" color="#3182ce" />
+          <Text style={styles.pageTitle}>Notifications</Text>
+          {unreadCount > 0 && (
+            <Badge color="red" size="lg">{unreadCount} unread</Badge>
+          )}
+        </Box>
+        {unreadCount > 0 && (
+          <Button
+            variant="light"
+            leftSection={<CheckCircle size={16} />}
+            onClick={handleMarkAllAsRead}
+          >
+            Mark All as Read
+          </Button>
+        )}
+      </Box>
+
+      {error && (
+        <Text color="red" mb="md">{error}</Text>
+      )}
+
+      {notifications.length === 0 ? (
+        <Card p="xl" withBorder>
+          <Text ta="center" c="dimmed">No notifications yet</Text>
+        </Card>
+      ) : (
+        <Box style={{ width: "100%" }}>
+          <Grid gutter="xl" align="stretch" style={{ margin: 0 }}>
+            {notifications.map((notification) => (
+              <Grid.Col
+                span={6}
+                p="md"
+                key={notification.id}
+                style={{ minHeight: "100%" }}
+              >
+                <NotificationCard
+                  id={notification.id}
+                  title={notification.title}
+                  notification_type={notification.notification_type}
+                  message={notification.message}
+                  created_at={notification.created_at}
+                  is_read={notification.is_read}
+                  action_url={notification.action_url}
+                  onMarkAsRead={handleMarkAsRead}
+                />
+              </Grid.Col>
+            ))}
+          </Grid>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default NotificationsPage;
diff --git a/src/Modules/Patent/components/Applicant/PendingConsent/PendingConsentApplications.jsx b/src/Modules/Patent/components/Applicant/PendingConsent/PendingConsentApplications.jsx
new file mode 100644
index 000000000..f67017b66
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/PendingConsent/PendingConsentApplications.jsx
@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  Text,
+  Button,
+  Group,
+  Badge,
+  Box,
+  Loader,
+  Alert,
+  Modal,
+  Divider,
+  Progress,
+  Grid,
+} from "@mantine/core";
+import {
+  Handshake,
+  CheckCircle,
+  Warning,
+  Eye,
+  Clock
+} from "@phosphor-icons/react";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+const PendingConsentApplications = () => {
+  const [applications, setApplications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [consentLoading, setConsentLoading] = useState(false);
+  const [actionMessage, setActionMessage] = useState(null);
+  const authToken = localStorage.getItem("authToken");
+
+  useEffect(() => {
+    fetchPendingConsentApplications();
+  }, []);
+
+  const fetchPendingConsentApplications = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/pending-consent/`,
+        {
+          headers: { Authorization: `Token ${authToken}` },
+        }
+      );
+      setApplications(response.data || []);
+    } catch (err) {
+      console.error("Error fetching pending consent applications:", err);
+      setActionMessage({
+        type: "error",
+        text: "Failed to load pending consent applications.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGiveConsent = async (applicationId) => {
+    try {
+      setConsentLoading(true);
+      await axios.post(
+        `${API_BASE_URL}/applicant/applications/consent/${applicationId}/`,
+        {},
+        {
+          headers: { Authorization: `Token ${authToken}` },
+        }
+      );
+
+      setActionMessage({
+        type: "success",
+        text: "Consent given successfully! The application owner will be notified.",
+      });
+
+      // Refresh the list
+      fetchPendingConsentApplications();
+      setDetailModalOpen(false);
+    } catch (err) {
+      setActionMessage({
+        type: "error",
+        text: err.response?.data?.error || "Failed to give consent.",
+      });
+    } finally {
+      setConsentLoading(false);
+    }
+  };
+
+  const openDetailModal = async (application) => {
+    try {
+      // Fetch full application details
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/details/${application.application_id}`,
+        { headers: { Authorization: `Token ${authToken}` } }
+      );
+      setSelectedApplication(response.data);
+      setDetailModalOpen(true);
+    } catch (err) {
+      setActionMessage({
+        type: "error",
+        text: "Failed to load application details.",
+      });
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box style={{ textAlign: "center", padding: "2rem" }}>
+        <Loader size="lg" />
+        <Text mt="md">Loading pending consent applications...</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Group position="apart" mb="lg">
+        <Text size="xl" weight={600}>
+          <Handshake size={24} style={{ marginRight: "10px", verticalAlign: "middle" }} />
+          Applications Awaiting Your Consent
+        </Text>
+        <Badge color="orange" size="lg">
+          {applications.length} Pending
+        </Badge>
+      </Group>
+
+      {actionMessage && (
+        <Alert
+          color={actionMessage.type === "success" ? "green" : "red"}
+          title={actionMessage.type === "success" ? "Success" : "Error"}
+          mb="md"
+          withCloseButton
+          onClose={() => setActionMessage(null)}
+        >
+          {actionMessage.text}
+        </Alert>
+      )}
+
+      {applications.length === 0 ? (
+        <Card p="xl" radius="md" withBorder style={{ textAlign: "center" }}>
+          <CheckCircle size={48} color="#51cf66" style={{ marginBottom: "1rem" }} />
+          <Text size="lg" weight={500} mb="sm">
+            No Pending Consents
+          </Text>
+          <Text color="dimmed">
+            You don't have any patent applications waiting for your consent.
+          </Text>
+        </Card>
+      ) : (
+        <Box>
+          {applications.map((app) => (
+            <Card key={app.application_id} p="lg" radius="md" withBorder mb="md">
+              <Grid>
+                <Grid.Col span={8}>
+                  <Text weight={600} size="lg" mb="xs">
+                    {app.title}
+                  </Text>
+                  <Text size="sm" color="dimmed" mb="sm">
+                    Token: {app.token_number} • Primary Applicant: {app.primary_applicant}
+                  </Text>
+
+                  <Group spacing="xs" mb="sm">
+                    <Badge color="orange" leftSection={<Clock size={14} />}>
+                      Pending Your Consent
+                    </Badge>
+                    <Badge variant="outline">
+                      Your Share: {app.your_percentage}%
+                    </Badge>
+                  </Group>
+
+                  <Text size="sm" color="dimmed">
+                    Submitted: {new Date(app.submitted_date).toLocaleDateString()}
+                  </Text>
+                </Grid.Col>
+
+                <Grid.Col span={4} style={{ textAlign: "right" }}>
+                  <Box mb="md">
+                    <Text size="sm" color="dimmed" mb="xs">
+                      Consent Progress
+                    </Text>
+                    <Progress
+                      value={(app.consents_received / app.total_inventors) * 100}
+                      color="teal"
+                      size="sm"
+                      mb="xs"
+                    />
+                    <Text size="xs" color="dimmed">
+                      {app.consents_received} of {app.total_inventors} inventors
+                    </Text>
+                  </Box>
+
+                  <Group spacing="sm">
+                    <Button
+                      variant="light"
+                      leftSection={<Eye size={16} />}
+                      onClick={() => openDetailModal(app)}
+                    >
+                      Review
+                    </Button>
+                    <Button
+                      color="green"
+                      leftSection={<CheckCircle size={16} />}
+                      onClick={() => handleGiveConsent(app.application_id)}
+                      loading={consentLoading}
+                    >
+                      Give Consent
+                    </Button>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+            </Card>
+          ))}
+        </Box>
+      )}
+
+      {/* Application Detail Modal */}
+      <Modal
+        opened={detailModalOpen}
+        onClose={() => setDetailModalOpen(false)}
+        size="xl"
+        title="Application Details - Review for Consent"
+      >
+        {selectedApplication && (
+          <Box>
+            <Text weight={600} size="lg" mb="md">
+              {selectedApplication.title}
+            </Text>
+
+            <Grid>
+              <Grid.Col span={6}>
+                <Text size="sm" weight={500}>Token Number:</Text>
+                <Text size="sm" color="dimmed" mb="sm">{selectedApplication.token_number}</Text>
+
+                <Text size="sm" weight={500}>Primary Applicant:</Text>
+                <Text size="sm" color="dimmed" mb="sm">{selectedApplication.primary_applicant}</Text>
+              </Grid.Col>
+
+              <Grid.Col span={6}>
+                <Text size="sm" weight={500}>IP Type:</Text>
+                <Text size="sm" color="dimmed" mb="sm">{selectedApplication.section_i?.type_of_ip || "N/A"}</Text>
+
+                <Text size="sm" weight={500}>Area of Invention:</Text>
+                <Text size="sm" color="dimmed" mb="sm">{selectedApplication.section_i?.area || "N/A"}</Text>
+              </Grid.Col>
+            </Grid>
+
+            <Divider my="md" />
+
+            <Text weight={500} mb="sm">Problem Statement:</Text>
+            <Text size="sm" color="dimmed" mb="md">{selectedApplication.section_i?.problem || "N/A"}</Text>
+
+            <Text weight={500} mb="sm">Objective:</Text>
+            <Text size="sm" color="dimmed" mb="md">{selectedApplication.section_i?.objective || "N/A"}</Text>
+
+            <Divider my="md" />
+
+            <Text weight={500} mb="sm">Inventors & Shares:</Text>
+            {selectedApplication.inventors?.map((inventor, index) => (
+              <Box key={index} p="sm" mb="xs" style={{
+                backgroundColor: inventor.user_email === localStorage.getItem("userEmail")
+                  ? "#e6fffa" : "#f8f9fa",
+                borderRadius: "8px"
+              }}>
+                <Group position="apart">
+                  <Box>
+                    <Text size="sm" weight={500}>
+                      {inventor.name}
+                      {inventor.user_email === localStorage.getItem("userEmail") && (
+                        <Badge color="blue" size="xs" ml="xs">You</Badge>
+                      )}
+                    </Text>
+                    <Text size="xs" color="dimmed">{inventor.email}</Text>
+                  </Box>
+                  <Group>
+                    <Badge color="gray" variant="outline">
+                      {inventor.percentage_share}%
+                    </Badge>
+                    {inventor.has_consent ? (
+                      <Badge color="green" leftSection={<CheckCircle size={12} />}>
+                        Consented
+                      </Badge>
+                    ) : (
+                      <Badge color="orange" leftSection={<Warning size={12} />}>
+                        Pending
+                      </Badge>
+                    )}
+                  </Group>
+                </Group>
+              </Box>
+            ))}
+
+            <Divider my="md" />
+
+            <Group position="apart">
+              <Text size="sm" color="dimmed">
+                By giving consent, you acknowledge your {selectedApplication.inventors?.find(inv =>
+                  inv.user_email === localStorage.getItem("userEmail")
+                )?.percentage_share}% ownership share in this patent application.
+              </Text>
+              <Group>
+                <Button
+                  variant="light"
+                  onClick={() => setDetailModalOpen(false)}
+                >
+                  Close
+                </Button>
+                <Button
+                  color="green"
+                  leftSection={<CheckCircle size={16} />}
+                  onClick={() => handleGiveConsent(selectedApplication.application_id)}
+                  loading={consentLoading}
+                >
+                  Give Consent
+                </Button>
+              </Group>
+            </Group>
+          </Box>
+        )}
+      </Modal>
+    </Box>
+  );
+};
+
+export default PendingConsentApplications;
\ No newline at end of file
diff --git a/src/Modules/Patent/components/Applicant/SavedDrafts/ApplicationDraft.jsx b/src/Modules/Patent/components/Applicant/SavedDrafts/ApplicationDraft.jsx
new file mode 100644
index 000000000..d5721183e
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/SavedDrafts/ApplicationDraft.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Card, Button, Text, Box, Center, ThemeIcon } from "@mantine/core";
+import { ArrowRight, FileText } from "phosphor-react";
+import "../../../style/Applicant/ApplicationDraft.css";
+
+// Empty state component
+function EmptyDraftsState({ onStartNew }) {
+  return (
+    <Card id="patent-system-saved-draft-card">
+      <Center style={{ flexDirection: "column", padding: "14px 12px" }}>
+        <ThemeIcon
+          size="lg"
+          radius="xl"
+          variant="light"
+          color="blue"
+          style={{ marginBottom: 10 }}
+        >
+          <FileText size={20} />
+        </ThemeIcon>
+        <Text size="lg" weight={600} align="center" style={{ marginBottom: 6 }}>
+          No Drafts Available
+        </Text>
+        <Text size="xs" align="center" style={{ marginBottom: 6 }}>
+          You haven't saved any patent application drafts yet.
+        </Text>
+        <Button
+          variant="outline"
+          leftIcon={<ArrowRight size={14} />}
+          onClick={onStartNew}
+          size="sm"
+          style={{ width: "100%" }}
+        >
+          Start New Application
+        </Button>
+      </Center>
+    </Card>
+  );
+}
+
+EmptyDraftsState.propTypes = {
+  onStartNew: PropTypes.func.isRequired,
+};
+
+// Main component
+function SavedDraftsPage({ setActiveTab }) {
+  return (
+    <Box style={{ width: "100%" }}>
+      <Text id="patent-system-draft-header-text" size="xl" weight={700}>
+        Saved Drafts
+      </Text>
+
+      <Box id="patent-system-draft-app-container">
+        <EmptyDraftsState onStartNew={() => setActiveTab("1.1")} />
+      </Box>
+    </Box>
+  );
+}
+
+SavedDraftsPage.propTypes = {
+  setActiveTab: PropTypes.func.isRequired,
+};
+
+export default SavedDraftsPage;
diff --git a/src/Modules/Patent/components/Applicant/SubmitNewApplication/ApplicantSubmit.jsx b/src/Modules/Patent/components/Applicant/SubmitNewApplication/ApplicantSubmit.jsx
new file mode 100644
index 000000000..c3989e30d
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/SubmitNewApplication/ApplicantSubmit.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { Button, Card, Text, Box } from "@mantine/core";
+import { ArrowRight } from "phosphor-react";
+import "../../../style/Applicant/ApplicantSubmit.css";
+import PropTypes from "prop-types";
+
+function SubmitNewApplication({ setActiveTab }) {
+  const handleSubmit = () => {
+    setActiveTab("1.1");
+  };
+
+  return (
+    <Box id="pms-submit-app-container">
+      <Text id="pms-submit-header-text">Submit New Application</Text>
+
+      <Box id="pms-submit-card-container" style={{ marginLeft: "50px" }}>
+        <Card id="pms-submit-application-card">
+          <Text id="pms-submit-card-title" weight={600} size="lg">
+            Intellectual Property Filing Form
+          </Text>
+          <Text id="pms-submit-card-details" size="sm">
+            Please use this form for all types of IP, including Patents,
+            Copyright, Designs etc.
+          </Text>
+          <br />
+          <Text id="pms-submit-card-description" size="sm">
+            Complete this form to initiate a new patent filing. Please ensure
+            all necessary details are accurate before submission. This form will
+            help streamline your application process and ensure compliance with
+            institutional guidelines.
+          </Text>
+          <Button
+            variant="light"
+            leftIcon={<ArrowRight size={16} />}
+            id="pms-start-application-button"
+            onClick={handleSubmit}
+            fullWidth
+            mt="sm"
+          >
+            Start Application
+          </Button>
+        </Card>
+      </Box>
+    </Box>
+  );
+}
+
+SubmitNewApplication.propTypes = {
+  setActiveTab: PropTypes.func.isRequired,
+};
+
+export default SubmitNewApplication;
diff --git a/src/Modules/Patent/components/Applicant/SubmitNewApplication/ApplicationForm.jsx b/src/Modules/Patent/components/Applicant/SubmitNewApplication/ApplicationForm.jsx
new file mode 100644
index 000000000..be6927d17
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/SubmitNewApplication/ApplicationForm.jsx
@@ -0,0 +1,1168 @@
+import React, { useState } from "react";
+import {
+  TextInput,
+  Button,
+  Group,
+  Paper,
+  Title,
+  Text,
+  Textarea,
+  Table,
+  FileInput,
+  Checkbox,
+  Stack,
+  ScrollArea,
+  MultiSelect,
+  Badge,
+} from "@mantine/core";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import { useMediaQuery } from "@mantine/hooks";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+function ApplicationForm() {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const [inventors, setInventors] = useState([
+    {
+      name: "",
+      email: "",
+      collegeemail: "",
+      address: "",
+      mobile: "",
+      Contributionpercentage: "",
+    },
+  ]);
+  const [applicationTitle, setApplicationTitle] = useState("");
+  const IP_TYPES = [
+    {
+      value: "Patent",
+      label: "Patent",
+      description:
+        "Protects new inventions - technical solutions to problems. Covers how things work, what they do, how they do it, what they're made of, and how they're made.",
+      icon: "🔬",
+    },
+    {
+      value: "Copyright",
+      label: "Copyright",
+      description:
+        "Protects original creative works like books, music, software, art, and films. Covers the expression of ideas rather than the ideas themselves.",
+      icon: "🎨",
+    },
+    {
+      value: "Design",
+      label: "Design",
+      description:
+        "Protects the visual appearance of products including shape, configuration, pattern, or ornamentation. Focuses on aesthetic rather than functional features.",
+      icon: "✨",
+    },
+    {
+      value: "Trademark",
+      label: "Trademark",
+      description:
+        "Protects brand identifiers like names, logos, slogans that distinguish goods/services in the marketplace. Helps prevent consumer confusion.",
+      icon: "🏷️",
+    },
+    {
+      value: "Trade Secret",
+      label: "Trade Secret",
+      description:
+        "Protects confidential business information (formulas, processes, methods) that provides competitive advantage. No registration required but must be kept secret.",
+      icon: "🔒",
+    },
+    {
+      value: "Geographical Indication",
+      label: "Geographical Indication",
+      description:
+        "Protects products originating from specific regions with qualities/reputation due to that origin (e.g., Champagne, Darjeeling Tea).",
+      icon: "🌍",
+    },
+  ];
+  const [ipTypes, setIpTypes] = useState([]);
+
+  const [step, setStep] = useState(1);
+  const [generalQuestions, setGeneralQuestions] = useState({
+    inventionArea: "",
+    problemArea: "",
+    objective: "",
+    novelty: "",
+    utility: "",
+    tested: "",
+    applications: "",
+  });
+  const [section1Files, setSection1Files] = useState([]);
+  const [section2FundingFile, setSection2FundingFile] = useState(null);
+  const [section2MouFile, setSection2MouFile] = useState(null);
+  const [section3FormIII, setSection3FormIII] = useState(null);
+  const [iprOwnershipQuestions, setIprOwnershipQuestions] = useState({
+    significantUse: "",
+    fundingSource: "",
+    presentationDetails: "",
+    mOUDetails: "",
+    academicResearch: "",
+  });
+
+  const [companies, setCompanies] = useState([
+    { name: "", concernedPerson: "", contact: "" },
+  ]);
+
+  const [developmentStage, setDevelopmentStage] = useState({
+    embryonic: false,
+    partiallyDeveloped: false,
+    offTheShelf: false,
+  });
+
+  const [selectedDevelopmentStage, setSelectedDevelopmentStage] = useState("");
+
+  const handleDevelopmentStageChange = (value) => {
+    setSelectedDevelopmentStage(value);
+    setDevelopmentStage({
+      embryonic: value === "embryonic",
+      partiallyDeveloped: value === "partiallyDeveloped",
+      offTheShelf: value === "offTheShelf",
+    });
+  };
+
+  const navigate = useNavigate();
+
+  const handleAddInventor = () => {
+    setInventors([
+      ...inventors,
+      {
+        name: "",
+        email: "",
+        collegeemail: "",
+        address: "",
+        mobile: "",
+        Contributionpercentage: "",
+      },
+    ]);
+  };
+
+  const handleRemoveInventor = (index) => {
+    const updatedInventors = inventors.filter((_, i) => i !== index);
+    setInventors(updatedInventors);
+  };
+
+  const handleInputChange = (index, field, value) => {
+    if (field === "collegeemail") {
+      // Convert the part before @ to uppercase
+      const [username, domain] = value.split("@");
+      if (domain === "iiitdmj.ac.in") {
+        value = `${username.toUpperCase()}@${domain}`;
+      }
+    }
+    const updatedInventors = inventors.map((inventor, i) =>
+      i === index ? { ...inventor, [field]: value } : inventor,
+    );
+    setInventors(updatedInventors);
+  };
+
+  const handleGeneralInputChange = (field, value) => {
+    setGeneralQuestions({ ...generalQuestions, [field]: value });
+  };
+
+  const handleIprOwnershipInputChange = (field, value) => {
+    setIprOwnershipQuestions({ ...iprOwnershipQuestions, [field]: value });
+  };
+
+  const handleCompanyInputChange = (index, field, value) => {
+    const updatedCompanies = [...companies];
+    updatedCompanies[index][field] = value;
+    setCompanies(updatedCompanies);
+  };
+
+  const validateStep4 = () => {
+    return (
+      companies.every(
+        (company) => company.name && company.concernedPerson && company.contact,
+      ) && selectedDevelopmentStage
+    );
+  };
+
+  const validateCurrentStep = () => {
+    switch (step) {
+      case 1:
+        return (
+          applicationTitle &&
+          ipTypes.length > 0 &&
+          inventors.every(
+            (inventor) =>
+              inventor.name &&
+              inventor.email &&
+              inventor.collegeemail &&
+              inventor.address &&
+              inventor.mobile &&
+              inventor.Contributionpercentage,
+          )
+        );
+      case 2:
+        return (
+          generalQuestions.inventionArea &&
+          generalQuestions.problemArea &&
+          generalQuestions.objective &&
+          generalQuestions.novelty &&
+          generalQuestions.utility &&
+          generalQuestions.tested &&
+          generalQuestions.applications
+        );
+      case 3:
+        return (
+          iprOwnershipQuestions.significantUse &&
+          iprOwnershipQuestions.fundingSource &&
+          iprOwnershipQuestions.presentationDetails &&
+          iprOwnershipQuestions.mOUDetails &&
+          iprOwnershipQuestions.academicResearch
+        );
+      case 4:
+        return validateStep4();
+      default:
+        return false;
+    }
+  };
+
+  const addNewCompany = () => {
+    setCompanies([
+      ...companies,
+      { name: "", concernedPerson: "", contact: "" },
+    ]);
+  };
+
+  const removeCompany = (index) => {
+    const updatedCompanies = companies.filter((_, i) => i !== index);
+    setCompanies(updatedCompanies);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!validateCurrentStep()) {
+      alert("Please fill all required fields before submitting.");
+      return;
+    }
+
+    const data = {
+      title: applicationTitle,
+      ip_type: ipTypes,
+      user_id: 7108,
+      inventors: inventors.map((inventor) => ({
+        name: inventor.name,
+        institute_mail: inventor.collegeemail,
+        personal_mail: inventor.email,
+        address: inventor.address,
+        mobile: inventor.mobile,
+        percentage: inventor.Contributionpercentage,
+      })),
+      area_of_invention: generalQuestions.inventionArea,
+      problem_statement: generalQuestions.problemArea,
+      objective: generalQuestions.objective,
+      novelty: generalQuestions.novelty,
+      advantages: generalQuestions.utility,
+      tested_experimentally: generalQuestions.tested === "true",
+      applications: generalQuestions.applications,
+      funding_details: iprOwnershipQuestions.significantUse,
+      funding_source: iprOwnershipQuestions.fundingSource,
+      publication_details: iprOwnershipQuestions.presentationDetails,
+      mou_details: iprOwnershipQuestions.mOUDetails,
+      research_details: iprOwnershipQuestions.academicResearch,
+      company_details: companies.map((company) => ({
+        company_name: company.name,
+        contact_person: company.concernedPerson,
+        contact_no: company.contact,
+      })),
+      development_stage:
+        Object.keys(developmentStage).find(
+          (stage) => developmentStage[stage],
+        ) || "Prototype",
+    };
+
+    const formData = new FormData();
+    formData.append("json_data", JSON.stringify(data));
+
+    section1Files.forEach((file) => {
+      formData.append("poc_details", file);
+    });
+
+    if (section2FundingFile) {
+      formData.append("source_file", section2FundingFile);
+    }
+    if (section2MouFile) {
+      formData.append("mou_file", section2MouFile);
+    }
+
+    if (section3FormIII) {
+      formData.append("form_iii", section3FormIII);
+    }
+
+    try {
+      const yourToken = localStorage.getItem("authToken");
+      if (!yourToken) throw new Error("No token found!");
+
+      const response = await axios.post(
+        `${host}/patentsystem/applicant/applications/submit/`,
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            Authorization: `Token ${yourToken}`,
+          },
+        },
+      );
+      alert(
+        `Application submitted successfully! Token: ${response.data.token}`,
+      );
+      navigate("/dashboard");
+    } catch (error) {
+      console.error("Error response:", error.response?.data);
+      alert(`Error: ${error.response?.data?.error || error.message}`);
+    }
+  };
+
+  const nextPage = () => {
+    if (validateCurrentStep()) {
+      setStep(step + 1);
+    } else {
+      alert("Please fill all required fields before proceeding.");
+    }
+  };
+
+  const prevPage = () => {
+    setStep(step - 1);
+  };
+
+  const handleSaveDraft = () => {
+    const draft = {
+      applicationTitle,
+      inventors,
+      generalQuestions,
+      iprOwnershipQuestions,
+    };
+
+    const savedDrafts = JSON.parse(localStorage.getItem("savedDrafts")) || [];
+    savedDrafts.push(draft);
+    localStorage.setItem("savedDrafts", JSON.stringify(savedDrafts));
+
+    alert("Draft saved successfully!");
+    navigate("/patent/applicant/");
+  };
+
+  const handleDownload = () => {
+    window.open("https://example.com/sample.pdf", "_blank");
+  };
+
+  // Button styles
+  const outlineButtonStyle = {
+    backgroundColor: "white",
+    color: "#0073e6",
+    border: "1px solid #0073e6",
+    transition: "background-color 0.3s ease, color 0.3s ease",
+    "&:hover": {
+      backgroundColor: "#0073e6",
+      color: "white",
+    },
+  };
+
+  const redButtonStyle = {
+    backgroundColor: "white",
+    color: "red",
+    border: "1px solid red",
+    transition: "background-color 0.3s ease, color 0.3s ease",
+    "&:hover": {
+      backgroundColor: "red",
+      color: "white",
+    },
+  };
+
+  const greenButtonStyle = {
+    backgroundColor: "#00a854",
+    color: "white",
+    border: "1px solid #00a854",
+    transition: "background-color 0.3s ease",
+    "&:hover": {
+      backgroundColor: "#008f48",
+    },
+  };
+
+  const blueButtonStyle = {
+    backgroundColor: "#0073e6",
+    color: "white",
+    border: "1px solid #0073e6",
+    transition: "background-color 0.3s ease",
+    "&:hover": {
+      backgroundColor: "#005bb5",
+    },
+  };
+
+  const fileInputStyles = {
+    root: {
+      marginBottom: "16px",
+    },
+    label: {
+      marginBottom: "8px",
+      fontSize: "14px",
+      fontWeight: 500,
+    },
+    input: {
+      padding: "10px 16px",
+      backgroundColor: "#e6f7ff",
+      border: "1px solid #91d5ff",
+      color: "#1890ff",
+      borderRadius: "4px",
+      cursor: "pointer",
+      transition: "all 0.2s",
+      width: isMobile ? "100%" : "50%",
+      "&:hover": {
+        backgroundColor: "#bae7ff",
+        borderColor: "#69c0ff",
+      },
+    },
+    placeholder: {
+      color: "#1890ff",
+    },
+  };
+
+  return (
+    <Paper
+      p="xl"
+      radius="md"
+      bg="#f5f7f8"
+      style={{
+        width: "100%",
+        maxWidth: "100%",
+        marginLeft: "50px",
+        marginRight: "50px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        boxShadow: "none",
+      }}
+    >
+      <Title
+        order={1}
+        align="center"
+        mb={10}
+        style={{ fontSize: isMobile ? "22px" : "26px", width: "100%" }}
+      >
+        Intellectual Property Filing Form
+      </Title>
+      <Text align="center" size="sm" mb={20} style={{ width: "100%" }}>
+        (Please use this form for all types of IP, including Patents, Copyright,
+        Designs, Marks, and even Know-how)
+      </Text>
+      <ScrollArea style={{ width: "100%", maxWidth: "100%" }}>
+        <form
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          {step === 1 && (
+            <div style={{ width: "100%", maxWidth: "100%" }}>
+              <Title
+                order={3}
+                align="center"
+                mb={20}
+                style={{ fontSize: isMobile ? "20px" : "24px" }}
+              >
+                Section - I : (Administrative and Technical Details)
+              </Title>
+              <TextInput
+                label="Title of Application"
+                placeholder="Enter title of the application"
+                value={applicationTitle}
+                onChange={(e) => setApplicationTitle(e.target.value)}
+                mb="md"
+                required
+                styles={{
+                  root: { width: "100%" },
+                }}
+              />
+
+              <Text size="sm" mb={4}>
+                Type of Intellectual Property
+                <Text component="span" c="red">
+                  *
+                </Text>
+              </Text>
+
+              <MultiSelect
+                placeholder="Select IP type(s)"
+                value={ipTypes}
+                onChange={setIpTypes}
+                data={IP_TYPES.map((type) => ({
+                  value: type.value,
+                  label: type.label,
+                  description: type.description,
+                }))}
+                required
+                searchable
+                nothingFound="No matching IP types"
+                mb="md"
+                styles={{
+                  input: {
+                    borderColor: "#ced4da",
+                    "&:focus": {
+                      borderColor: "#228be6",
+                    },
+                  },
+                }}
+              />
+
+              {ipTypes.length > 0 && (
+                <Stack spacing="sm" mb="md">
+                  {ipTypes.map((selectedType) => {
+                    const typeInfo = IP_TYPES.find(
+                      (t) => t.value === selectedType,
+                    );
+                    return (
+                      <Paper
+                        key={selectedType}
+                        p="sm"
+                        withBorder
+                        radius="sm"
+                        style={{
+                          backgroundColor: "#f8f9fa",
+                          borderColor: "#dee2e6",
+                        }}
+                      >
+                        <Group spacing="xs">
+                          <Text size="sm" fw={500} c="dark">
+                            {typeInfo.icon} {typeInfo.label}
+                          </Text>
+                          <Badge color="blue" variant="light">
+                            Selected
+                          </Badge>
+                        </Group>
+                        <Text size="xs" c="dimmed" mt={4}>
+                          {typeInfo.description}
+                        </Text>
+                      </Paper>
+                    );
+                  })}
+                </Stack>
+              )}
+
+              <Text size="sm" mb={10}>
+                1. Please list inventor(s) who have contributed in the main
+                inventive step of the invention.
+              </Text>
+              <Text size="sm" fw={700} mb={20}>
+                Note : Students should provide their permanent (personal)
+                Email-ID
+              </Text>
+              {inventors.map((inventor, index) => (
+                <Stack key={index} mb="md">
+                  <TextInput
+                    label={`Inventor-${index + 1} Name`}
+                    placeholder="Name of Inventor"
+                    value={inventor.name}
+                    onChange={(e) =>
+                      handleInputChange(index, "name", e.target.value)
+                    }
+                    required
+                  />
+                  <TextInput
+                    label="Email"
+                    placeholder="Email of Inventor"
+                    value={inventor.email}
+                    onChange={(e) =>
+                      handleInputChange(index, "email", e.target.value)
+                    }
+                    required
+                  />
+                  <TextInput
+                    label="College Email"
+                    placeholder="iiitdmj.ac.in email of Inventor"
+                    value={inventor.collegeemail}
+                    onChange={(e) =>
+                      handleInputChange(index, "collegeemail", e.target.value)
+                    }
+                    required
+                  />
+                  <TextInput
+                    label="Contact Address"
+                    placeholder="Contact Address of Inventor"
+                    value={inventor.address}
+                    onChange={(e) =>
+                      handleInputChange(index, "address", e.target.value)
+                    }
+                    required
+                  />
+                  <TextInput
+                    label="Mobile Number"
+                    placeholder="Mobile Number of Inventor"
+                    value={inventor.mobile}
+                    onChange={(e) =>
+                      handleInputChange(index, "mobile", e.target.value)
+                    }
+                    required
+                  />
+                  <TextInput
+                    label="Contribution Percentage"
+                    placeholder="%"
+                    value={inventor.Contributionpercentage}
+                    onChange={(e) =>
+                      handleInputChange(
+                        index,
+                        "Contributionpercentage",
+                        e.target.value,
+                      )
+                    }
+                    required
+                  />
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "flex-end",
+                      width: "100%",
+                    }}
+                  >
+                    <Button
+                      style={{
+                        ...redButtonStyle,
+                        width: isMobile ? "100%" : "auto",
+                      }}
+                      onClick={() => handleRemoveInventor(index)}
+                    >
+                      Remove
+                    </Button>
+                  </div>
+                </Stack>
+              ))}
+
+              <Group position="center" mt="md">
+                <Button
+                  onClick={handleAddInventor}
+                  style={outlineButtonStyle}
+                  fullWidth={isMobile}
+                >
+                  Add Inventor
+                </Button>
+              </Group>
+
+              <Group position="center" mt="lg" grow={isMobile}>
+                <Button
+                  onClick={nextPage}
+                  style={outlineButtonStyle}
+                  fullWidth={isMobile}
+                >
+                  Next
+                </Button>
+              </Group>
+            </div>
+          )}
+
+          {step === 2 && (
+            <div style={{ width: "100%", maxWidth: "100%" }}>
+              <Title
+                order={2}
+                align="center"
+                mb={20}
+                style={{ fontSize: isMobile ? "20px" : "24px" }}
+              >
+                Section - I : (Administrative and Technical Details)
+              </Title>
+              <div
+                style={{
+                  maxWidth: "100%",
+                  width: "100%",
+                  padding: isMobile ? "0 10px" : "0 20px",
+                }}
+              >
+                <TextInput
+                  label="2. What is the area of the invention?"
+                  placeholder="Enter the area of the invention"
+                  value={generalQuestions.inventionArea}
+                  onChange={(e) =>
+                    handleGeneralInputChange("inventionArea", e.target.value)
+                  }
+                  mb="md"
+                  required
+                />
+                <TextInput
+                  label="3. What is the problem in the area?"
+                  placeholder="Enter the problem in the area"
+                  value={generalQuestions.problemArea}
+                  onChange={(e) =>
+                    handleGeneralInputChange("problemArea", e.target.value)
+                  }
+                  mb="md"
+                  required
+                />
+                <TextInput
+                  label="4. What is the objective of your invention?"
+                  placeholder="Enter the objective of the invention"
+                  value={generalQuestions.objective}
+                  onChange={(e) =>
+                    handleGeneralInputChange("objective", e.target.value)
+                  }
+                  mb="md"
+                  required
+                />
+                <TextInput
+                  label="5. What is the Novelty?"
+                  placeholder="Enter the novelty of the invention"
+                  value={generalQuestions.novelty}
+                  onChange={(e) =>
+                    handleGeneralInputChange("novelty", e.target.value)
+                  }
+                  mb="md"
+                  required
+                />
+                <TextInput
+                  label="6. What is the utility (advantages) of the present invention over comparable inventors available in literature including patents?"
+                  placeholder="Describe the advantages over comparable inventors"
+                  value={generalQuestions.utility}
+                  onChange={(e) =>
+                    handleGeneralInputChange("utility", e.target.value)
+                  }
+                  mb="md"
+                  required
+                />
+                <TextInput
+                  label="7. Has the invention been tested experimentally?"
+                  placeholder="Proof-of-concept/Prototype details"
+                  value={generalQuestions.tested}
+                  onChange={(e) =>
+                    handleGeneralInputChange("tested", e.target.value)
+                  }
+                  mb="md"
+                  required
+                />
+                <FileInput
+                  label="If yes, please add the details of the proof of concept/Prototype"
+                  placeholder="Upload proof of concept/Prototype"
+                  mb="md"
+                  multiple
+                  clearable
+                  value={section1Files}
+                  onChange={setSection1Files}
+                  accept="image/*,application/pdf"
+                  styles={fileInputStyles}
+                />
+                <div style={{ marginTop: "10px", marginBottom: "20px" }}>
+                  {section1Files.map((file, index) => (
+                    <div key={index}>
+                      <strong>{file.name}</strong> (
+                      {(file.size / 1024).toFixed(2)} KB)
+                    </div>
+                  ))}
+                </div>
+                <Textarea
+                  resize="vertical"
+                  label="8. Can you think of applications of your invention?"
+                  placeholder="List down applications of your invention"
+                  minRows={4}
+                  value={generalQuestions.applications}
+                  onChange={(e) =>
+                    handleGeneralInputChange("applications", e.target.value)
+                  }
+                  required
+                />
+              </div>
+
+              <Group position="apart" mt="lg" grow={isMobile}>
+                <Button
+                  style={outlineButtonStyle}
+                  onClick={prevPage}
+                  fullWidth={isMobile}
+                >
+                  Previous
+                </Button>
+                <Button
+                  onClick={nextPage}
+                  style={outlineButtonStyle}
+                  fullWidth={isMobile}
+                >
+                  Next
+                </Button>
+                <Button
+                  onClick={handleSaveDraft}
+                  style={blueButtonStyle}
+                  fullWidth={isMobile}
+                >
+                  Save Draft
+                </Button>
+              </Group>
+            </div>
+          )}
+
+          {step === 3 && (
+            <div style={{ width: "100%", maxWidth: "100%" }}>
+              <Title
+                order={2}
+                align="center"
+                mb={20}
+                style={{ fontSize: isMobile ? "20px" : "24px" }}
+              >
+                Section - II : (IPR Ownership)
+              </Title>
+              <Textarea
+                resize="vertical"
+                label="1. Was the intellectual property created with the significant use of funds or facilities of IIITDM Jabalpur?"
+                placeholder="Describe the significant use of your invention"
+                minRows={4}
+                mb={10}
+                value={iprOwnershipQuestions.significantUse}
+                onChange={(e) =>
+                  handleIprOwnershipInputChange(
+                    "significantUse",
+                    e.target.value,
+                  )
+                }
+                required
+              />
+              <Textarea
+                resize="vertical"
+                label="2. Please describe the source of funding for the invention."
+                placeholder="Enter the funding source"
+                minRows={4}
+                mb={5}
+                value={iprOwnershipQuestions.fundingSource}
+                onChange={(e) =>
+                  handleIprOwnershipInputChange("fundingSource", e.target.value)
+                }
+                required
+              />
+              <FileInput
+                label="If yes, Name of the funding agency and copy of agreement, letter of intent, must be uploaded here."
+                placeholder="Upload funding agency details"
+                clearable
+                value={section2FundingFile}
+                onChange={setSection2FundingFile}
+                accept="image/,application/pdf"
+                styles={fileInputStyles}
+              />
+              <div style={{ marginTop: "5px", marginBottom: "10px" }}>
+                {section2FundingFile && (
+                  <div>
+                    <strong>{section2FundingFile.name}</strong> (
+                    {(section2FundingFile.size / 1024).toFixed(2)} KB)
+                  </div>
+                )}
+              </div>
+              <Textarea
+                resize="vertical"
+                label="3. Have you presented/published in any Journal/conference if yes, please give details?"
+                placeholder="Enter presentation details"
+                minRows={4}
+                mb={10}
+                value={iprOwnershipQuestions.presentationDetails}
+                onChange={(e) =>
+                  handleIprOwnershipInputChange(
+                    "presentationDetails",
+                    e.target.value,
+                  )
+                }
+                required
+              />
+              <Textarea
+                resize="vertical"
+                label="4. Was the intellectual property created in the course of or pursuant to a sponsored or a consultancy research agreement with IIITDM Jabalpur?"
+                placeholder="Enter MOU details"
+                minRows={4}
+                mb={5}
+                value={iprOwnershipQuestions.mOUDetails}
+                onChange={(e) =>
+                  handleIprOwnershipInputChange("mOUDetails", e.target.value)
+                }
+                required
+              />
+              <FileInput
+                label="If yes, please upload a copy of MOU with concerned project."
+                placeholder="Upload MOU details"
+                clearable
+                value={section2MouFile}
+                onChange={setSection2MouFile}
+                accept="image/,application/pdf"
+                styles={fileInputStyles}
+              />
+              <div style={{ marginTop: "5px", marginBottom: "10px" }}>
+                {section2MouFile && (
+                  <div>
+                    <strong>{section2MouFile.name}</strong> (
+                    {(section2MouFile.size / 1024).toFixed(2)} KB)
+                  </div>
+                )}
+              </div>
+              <Textarea
+                resize="vertical"
+                label="5. Was the intellectual property created as a part of academic research leading towards a degree or otherwise?"
+                placeholder="Describe academic research involvement"
+                minRows={4}
+                mb={10}
+                value={iprOwnershipQuestions.academicResearch}
+                onChange={(e) =>
+                  handleIprOwnershipInputChange(
+                    "academicResearch",
+                    e.target.value,
+                  )
+                }
+                required
+              />
+
+              <Group position="apart" mt="lg" grow={isMobile}>
+                <Button
+                  style={outlineButtonStyle}
+                  onClick={prevPage}
+                  fullWidth={isMobile}
+                >
+                  Previous
+                </Button>
+                <Button
+                  onClick={nextPage}
+                  style={outlineButtonStyle}
+                  fullWidth={isMobile}
+                >
+                  Next
+                </Button>
+              </Group>
+            </div>
+          )}
+
+          {step === 4 && (
+            <div style={{ width: "100%", maxWidth: "100%" }}>
+              <Title
+                order={2}
+                align="center"
+                mb={20}
+                style={{ fontSize: isMobile ? "20px" : "24px" }}
+              >
+                Section - III : (Commercialization)
+              </Title>
+
+              <Text size="sm" mb={10}>
+                1. Who are the Target companies, both in India or abroad?
+              </Text>
+              <Text size="sm" mb={20}>
+                Please give specific list of companies and contact details of
+                the concerned person who can be contacted for initiating
+                Technology Licensing.
+              </Text>
+
+              {isMobile ? (
+                <Stack>
+                  {companies.map((company, index) => (
+                    <Paper key={index} p="md" shadow="xs" mb="md">
+                      <TextInput
+                        label="Company Name"
+                        placeholder="Enter company name"
+                        value={company.name}
+                        onChange={(e) =>
+                          handleCompanyInputChange(
+                            index,
+                            "name",
+                            e.target.value,
+                          )
+                        }
+                        required
+                        mb="sm"
+                      />
+                      <TextInput
+                        label="Concerned Person"
+                        placeholder="Enter person name"
+                        value={company.concernedPerson}
+                        onChange={(e) =>
+                          handleCompanyInputChange(
+                            index,
+                            "concernedPerson",
+                            e.target.value,
+                          )
+                        }
+                        required
+                        mb="sm"
+                      />
+                      <TextInput
+                        label="Contact Number"
+                        placeholder="Enter contact number"
+                        value={company.contact}
+                        onChange={(e) =>
+                          handleCompanyInputChange(
+                            index,
+                            "contact",
+                            e.target.value,
+                          )
+                        }
+                        required
+                        mb="sm"
+                      />
+                      <Button
+                        style={redButtonStyle}
+                        onClick={() => removeCompany(index)}
+                        fullWidth
+                        mt="sm"
+                      >
+                        Remove Company
+                      </Button>
+                    </Paper>
+                  ))}
+                </Stack>
+              ) : (
+                <ScrollArea style={{ maxWidth: "100%", overflowX: "auto" }}>
+                  <Table>
+                    <thead>
+                      <tr>
+                        <th>Name of Company</th>
+                        <th>Name of Concerned Person</th>
+                        <th>Contact Number</th>
+                        <th>Action</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {companies.map((company, index) => (
+                        <tr key={index}>
+                          <td>
+                            <TextInput
+                              placeholder="Company Name"
+                              value={company.name}
+                              onChange={(e) =>
+                                handleCompanyInputChange(
+                                  index,
+                                  "name",
+                                  e.target.value,
+                                )
+                              }
+                              required
+                            />
+                          </td>
+                          <td>
+                            <TextInput
+                              placeholder="Concerned Person"
+                              value={company.concernedPerson}
+                              onChange={(e) =>
+                                handleCompanyInputChange(
+                                  index,
+                                  "concernedPerson",
+                                  e.target.value,
+                                )
+                              }
+                              required
+                            />
+                          </td>
+                          <td>
+                            <TextInput
+                              placeholder="Contact Number"
+                              value={company.contact}
+                              onChange={(e) =>
+                                handleCompanyInputChange(
+                                  index,
+                                  "contact",
+                                  e.target.value,
+                                )
+                              }
+                              required
+                            />
+                          </td>
+                          <td>
+                            <Button
+                              style={redButtonStyle}
+                              onClick={() => removeCompany(index)}
+                              fullWidth
+                            >
+                              Remove
+                            </Button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </Table>
+                </ScrollArea>
+              )}
+
+              <Button
+                onClick={addNewCompany}
+                style={outlineButtonStyle}
+                fullWidth={isMobile}
+                mt="md"
+              >
+                + Add More Companies
+              </Button>
+
+              <Text size="sm" mt="xl" mb="sm">
+                2. Development stage:
+              </Text>
+              <Text size="sm" mb="md">
+                In your opinion, which best describes the current stage of
+                development:
+              </Text>
+
+              <Stack spacing="sm">
+                <Checkbox
+                  checked={selectedDevelopmentStage === "embryonic"}
+                  onChange={() => handleDevelopmentStageChange("embryonic")}
+                  label="Embryonic (needs substantial work to bring to market)"
+                  size={isMobile ? "sm" : "md"}
+                />
+                <Checkbox
+                  checked={selectedDevelopmentStage === "partiallyDeveloped"}
+                  onChange={() =>
+                    handleDevelopmentStageChange("partiallyDeveloped")
+                  }
+                  label="Partially developed (could be brought to market with significant investment)"
+                  size={isMobile ? "sm" : "md"}
+                />
+                <Checkbox
+                  checked={selectedDevelopmentStage === "offTheShelf"}
+                  onChange={() => handleDevelopmentStageChange("offTheShelf")}
+                  label="Off-the-shelf (could be brought to market with nominal investment)"
+                  size={isMobile ? "sm" : "md"}
+                />
+              </Stack>
+
+              <Text size="sm" mt="xl" mb="sm">
+                Download the following form, duly fill and sign it, and upload
+                it afterward.
+              </Text>
+              <Button
+                style={blueButtonStyle}
+                onClick={handleDownload}
+                fullWidth={isMobile}
+                mb="md"
+              >
+                Download Form-III
+              </Button>
+              <FileInput
+                label="Upload duly filled and signed Form-III"
+                placeholder="Upload form"
+                clearable
+                value={section3FormIII}
+                onChange={setSection3FormIII}
+                accept="image/*,application/pdf"
+                mb="md"
+                styles={fileInputStyles}
+              />
+              {section3FormIII && (
+                <Text size="sm" mb="md">
+                  <strong>{section3FormIII.name}</strong> (
+                  {(section3FormIII.size / 1024).toFixed(2)} KB)
+                </Text>
+              )}
+
+              <Text size="sm" mt="xl" mb="xl" fw={700}>
+                Undertaking: Intellectual Property is filing on the behalf of
+                the Institute.
+              </Text>
+
+              <Group position="apart" mt="lg" grow={isMobile}>
+                <Button onClick={prevPage} style={outlineButtonStyle}>
+                  Previous
+                </Button>
+
+                <Button onClick={handleSaveDraft} style={blueButtonStyle}>
+                  Save Draft
+                </Button>
+
+                <Button onClick={handleSubmit} style={greenButtonStyle}>
+                  Submit
+                </Button>
+              </Group>
+            </div>
+          )}
+        </form>
+      </ScrollArea>
+    </Paper>
+  );
+}
+
+export default ApplicationForm;
diff --git a/src/Modules/Patent/components/Applicant/ViewApplication/ApplicationView.jsx b/src/Modules/Patent/components/Applicant/ViewApplication/ApplicationView.jsx
new file mode 100644
index 000000000..5df604e4d
--- /dev/null
+++ b/src/Modules/Patent/components/Applicant/ViewApplication/ApplicationView.jsx
@@ -0,0 +1,1653 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  Card,
+  Text,
+  Box,
+  Grid,
+  Container,
+  Stepper,
+  Badge,
+  Loader,
+  Title,
+  Divider,
+  Modal,
+  Textarea,
+  Group,
+  Alert,
+  Progress,
+  Tooltip,
+} from "@mantine/core";
+import {
+  CalendarCheck,
+  User,
+  FileText,
+  Hourglass,
+  Key,
+  ArrowLeft,
+  DownloadSimple,
+  CheckCircle,
+  CircleNotch,
+  ArrowRight,
+  Scales,
+  Handshake,
+  Warning,
+} from "@phosphor-icons/react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import "../../../style/Applicant/ApplicationView.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+import EditApplicationModal from "../EditApplication/EditApplicationModal.jsx";
+import { getStatusColor } from "../../../utils/statusColors.js";
+
+// Define API_BASE_URL
+const API_BASE_URL = `${host}/patentsystem`;
+
+// Progress Bar Component
+function PatentProgressBar({ currentStatus, isMobile }) {
+  const allStatuses = [
+    "Submitted",
+    "Reviewed by PCC Admin",
+    "Forwarded for Director's Review",
+    "Director's Approval Received",
+    "Patentability Check Started",
+    "Patentability Check Completed",
+    "Patentability Search Report Generated",
+    "Patent Filed",
+    "Patent Published",
+    "Patent Granted",
+    "Patent Refused",
+  ];
+
+  const getStepIndex = (status) => {
+    if (status === "Rejected") return -1;
+    return allStatuses.findIndex((s) => s === status);
+  };
+
+  const currentStep = getStepIndex(currentStatus);
+  const isRejected = currentStatus === "Rejected";
+  const isRefused = currentStatus === "Patent Refused";
+  const isGranted = currentStatus === "Patent Granted";
+
+  // Determine which statuses to display based on current status
+  let displayStatuses;
+  if (isRefused) {
+    displayStatuses = ["Submitted", "Patent Refused"];
+  } else if (isGranted) {
+    // Show only the first 11 stages without "Patent Refused" for granted patents
+    displayStatuses = allStatuses.slice(0, 11);
+  } else {
+    displayStatuses = allStatuses;
+  }
+
+  return (
+    <div id={`pms-progress-container ${isRejected ? "rejected" : ""}`}>
+      {isRejected && (
+        <Text color="red" size="lg" weight={600} id="pms-rejection-label">
+          Application Rejected
+        </Text>
+      )}
+
+      {!isMobile ? (
+        // Desktop view
+        <div id="pms-desktop-stepper">
+          {isRefused ? (
+            // Simple two-step progress for refused patents
+            <Stepper
+              active={1}
+              id="pms-workflow-stepper"
+              size="md"
+              color="red"
+              orientation="horizontal"
+              iconSize={24}
+              breakpoint="sm"
+            >
+              <Stepper.Step
+                key="Submitted"
+                icon={<CheckCircle size={18} />}
+                label="Stage 1"
+                description="Submitted"
+                id="pms-completed-step"
+              />
+              <Stepper.Step
+                key="Patent Refused"
+                icon={<CircleNotch size={18} />}
+                label="Stage 2"
+                description="Patent Refused"
+                id="pms-completed-step"
+              />
+            </Stepper>
+          ) : (
+            // Regular view with two rows for normal flow
+            <>
+              <Stepper
+                active={isGranted ? 4 : currentStep}
+                id="pms-workflow-stepper"
+                size="md"
+                color={isRejected ? "red" : "blue"}
+                orientation="horizontal"
+                iconSize={24}
+                breakpoint="sm"
+              >
+                {displayStatuses.slice(0, 4).map((status, index) => (
+                  <Stepper.Step
+                    key={status}
+                    icon={
+                      isGranted || index < currentStep ? (
+                        <CheckCircle size={18} />
+                      ) : index === currentStep ? (
+                        <CircleNotch size={18} />
+                      ) : (
+                        <ArrowRight size={18} />
+                      )
+                    }
+                    label={`Stage ${index + 1}`}
+                    description={status}
+                    id={
+                      isGranted || index <= currentStep
+                        ? "pms-completed-step"
+                        : "pms-pending-step"
+                    }
+                  />
+                ))}
+              </Stepper>
+              <Stepper
+                active={isGranted ? 7 : Math.max(0, currentStep - 4)} // All steps active if granted
+                id="pms-workflow-stepper second-row"
+                size="md"
+                color={isRejected ? "red" : "blue"}
+                orientation="horizontal"
+                iconSize={24}
+                breakpoint="sm"
+              >
+                {displayStatuses.slice(4).map((status, index) => (
+                  <Stepper.Step
+                    key={status}
+                    icon={
+                      isGranted || index + 4 < currentStep ? (
+                        <CheckCircle size={18} />
+                      ) : index + 4 === currentStep ? (
+                        <CircleNotch size={18} />
+                      ) : (
+                        <ArrowRight size={18} />
+                      )
+                    }
+                    label={`Stage ${index + 5}`}
+                    description={status}
+                    id={
+                      isGranted || index + 4 <= currentStep
+                        ? "pms-completed-step"
+                        : "pms-pending-step"
+                    }
+                  />
+                ))}
+              </Stepper>
+            </>
+          )}
+        </div>
+      ) : (
+        // Mobile view - vertical stepper
+        <Stepper
+          active={
+            isRefused ? 1 : isGranted ? displayStatuses.length - 1 : currentStep
+          }
+          id="pms-workflow-stepper mobile-view"
+          size="sm"
+          color={isRefused ? "red" : isRejected ? "red" : "blue"}
+          orientation="vertical"
+          iconSize={16}
+        >
+          {displayStatuses.map((status, index) => (
+            <Stepper.Step
+              key={status}
+              icon={
+                isGranted || index < (isRefused ? 1 : currentStep) ? (
+                  <CheckCircle size={16} />
+                ) : index === (isRefused ? 1 : currentStep) ? (
+                  <CircleNotch size={16} />
+                ) : (
+                  <ArrowRight size={16} />
+                )
+              }
+              label={`Stage ${index + 1}`}
+              description={status}
+              id={
+                isGranted || index <= (isRefused ? 1 : currentStep)
+                  ? "completed-step"
+                  : "pending-step"
+              }
+            />
+          ))}
+        </Stepper>
+      )}
+    </div>
+  );
+}
+
+PatentProgressBar.propTypes = {
+  currentStatus: PropTypes.string.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+};
+
+// Application Card Component
+function ApplicationCard({
+  title,
+  date,
+  tokenNumber,
+  applicationNumber,
+  status,
+  onViewApplication,
+}) {
+  const formattedDate = date
+    ? new Date(date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      })
+    : "Not available";
+
+  return (
+    <Card id="pms-application-card" shadow="sm" p="lg" radius="md" withBorder>
+      <Text id="pms-app-card-title" weight={700} size="lg" mb="md">
+        {title}
+      </Text>
+
+      <div id="pms-app-card-info">
+        <div id="pms-info-item">
+          <CalendarCheck size={18} />
+          <Text id="pms-info-text">{formattedDate}</Text>
+        </div>
+
+        <div id="pms-info-item">
+          <FileText size={18} />
+          <Text id="pms-info-text">Application #{applicationNumber}</Text>
+        </div>
+
+        {tokenNumber ? (
+          <div id="pms-info-item">
+            <Key size={18} />
+            <Text id="pms-info-text">Tracking Token: {tokenNumber}</Text>
+          </div>
+        ) : (
+          <div id="pms-info-item">
+            <Hourglass size={18} />
+            <Text id="pms-info-text">Token: Awaiting assignment</Text>
+          </div>
+        )}
+
+        <div id="pms-card-badge-container">
+          <Badge color={getStatusColor(status)} size="lg">
+            {status}
+          </Badge>
+        </div>
+      </div>
+
+      <Button
+        variant="filled"
+        color="blue"
+        fullWidth
+        mt="md"
+        onClick={() => onViewApplication(applicationNumber)}
+        id="pms-view-application-button"
+      >
+        View Details
+      </Button>
+    </Card>
+  );
+}
+
+ApplicationCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  date: PropTypes.string,
+  tokenNumber: PropTypes.string,
+  applicationNumber: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  onViewApplication: PropTypes.func.isRequired,
+};
+
+function ConditionalFileDownload({ filePath, label, value }) {
+  const encodedFilePath = filePath ? encodeURI(filePath) : null;
+  const fileUrl = encodedFilePath ? `${API_BASE_URL}${encodedFilePath}` : null;
+
+  return (
+    <div id="pms-form-field-with-download">
+      <div id="pms-field-label-container">
+        <Text id="pms-field-label">{label}</Text>
+        <Text id="pms-field-value">{value || "Not provided"}</Text>
+      </div>
+      {fileUrl ? (
+        <div id="pms-download-button-wrapper">
+          <Button
+            component="a"
+            href={fileUrl}
+            download
+            variant="outline"
+            color="blue"
+            leftIcon={<DownloadSimple size={18} />}
+          >
+            Download {label.replace(":", "")}
+          </Button>
+        </div>
+      ) : (
+        <Text color="red" size="sm">
+          Not submitted
+        </Text>
+      )}
+    </div>
+  );
+}
+
+ConditionalFileDownload.propTypes = {
+  filePath: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string,
+};
+
+// File Download Button Component
+function FileDownloadButton({ fileUrl, label, disabled }) {
+  if (!fileUrl || fileUrl === "null" || disabled) {
+    return (
+      <Button
+        variant="outline"
+        color="gray"
+        leftIcon={<DownloadSimple size={18} />}
+        disabled
+      >
+        No {label} Available
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      component="a"
+      href={fileUrl}
+      download
+      variant="outline"
+      color="blue"
+      leftIcon={<DownloadSimple size={18} />}
+    >
+      Download {label}
+    </Button>
+  );
+}
+
+FileDownloadButton.propTypes = {
+  fileUrl: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+function FormField({ label, value }) {
+  const isMobile = window.innerWidth <= 768;
+
+  return (
+    <div
+      className={`pms-form-field-label-and-value ${isMobile ? "pms-mobile-form-field" : ""}`}
+      style={{ padding: "10px" }}
+    >
+      <Text
+        className={`pms-form-field-label ${isMobile ? "pms-mobile-field-label" : ""}`}
+      >
+        {label}
+      </Text>
+      <Text
+        className={`pms-form-field-value ${isMobile ? "pms-mobile-field-value" : ""}`}
+      >
+        {value?.trim() ? value : "Not provided"}
+      </Text>
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+// Field with download button - moved outside of the render function
+function FormFieldWithDownload({ label, value, fileUrl, fileLabel }) {
+  // Extract just the filename from the path for display
+  const displayValue = value && typeof value === "string" && value.includes("/")
+    ? value.split("/").pop()
+    : value;
+
+  return (
+    <div className="pms-form-field-with-download">
+      <div className="pms-form-field-label-and-value">
+        <Text className="pms-form-field-label">{label}</Text>
+        <Text className="pms-form-field-value">{displayValue || "Not provided"}</Text>
+      </div>
+      <div id="pms-download-button-wrapper">
+        <FileDownloadButton
+          fileUrl={fileUrl}
+          label={fileLabel}
+          disabled={!fileUrl || fileUrl === "null"}
+        />
+      </div>
+    </div>
+  );
+}
+
+FormFieldWithDownload.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fileUrl: PropTypes.string,
+  fileLabel: PropTypes.string.isRequired,
+};
+
+// Section component for detail view - moved outside of the render function
+function FormSection({ title, children }) {
+  return (
+    <Card
+      id={`pms-detail-section ${
+        window.innerWidth <= 768 ? "mobile-form-section" : ""
+      }`}
+      radius="md"
+      withBorder
+      mb="md"
+      p={40}
+      style={{
+        borderRadius: "20px",
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      <Title className="pms-form-section-title" style={{ marginLeft: "-10px" }}>
+        {title}
+      </Title>
+      {children}
+    </Card>
+  );
+}
+
+FormSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+// Main Application View Component
+function ApplicationView({ setActiveTab }) {
+  const [applications, setApplications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [viewMode, setViewMode] = useState("list");
+  const [isMobile, setIsMobile] = useState(false);
+  const [withdrawModalOpen, setWithdrawModalOpen] = useState(false);
+  const [withdrawReason, setWithdrawReason] = useState("");
+  const [actionLoading, setActionLoading] = useState(false);
+  const [actionMessage, setActionMessage] = useState(null);
+
+  // Feature 1: Appeal state
+  const [appealModalOpen, setAppealModalOpen] = useState(false);
+  const [appealReason, setAppealReason] = useState("");
+
+  // Feature 2: Consent state
+  const [consentStatus, setConsentStatus] = useState(null);
+  const [consentLoading, setConsentLoading] = useState(false);
+
+  // Edit application modal state
+  const [editModalOpen, setEditModalOpen] = useState(false);
+
+  // Retrieve authToken from local storage
+  const authToken = localStorage.getItem("authToken");
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const fetchApplicationData = async () => {
+      if (!authToken) {
+        setError("Authorization token is missing. Please login again.");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+
+        const response = await axios.get(
+          `${API_BASE_URL}/applicant/applications/`,
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+            },
+          },
+        );
+
+        if (
+          response.data &&
+          response.data.applications &&
+          Array.isArray(response.data.applications)
+        ) {
+          const formattedApplications = response.data.applications.map(
+            (application) => ({
+              title: application.title || "Untitled Application",
+              date: application.submitted_date || "",
+              tokenNumber: application.token_no || null,
+              applicationNumber: application.application_id,
+              status: application.status || "Pending",
+            }),
+          );
+
+          setApplications(formattedApplications);
+        } else {
+          setError("No applications found or invalid response format");
+        }
+      } catch (err) {
+        console.error("Error fetching application data:", err);
+        setError("Failed to load application data. Please try again later.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApplicationData();
+  }, [authToken]);
+
+  const handleViewApplication = async (applicationNumber) => {
+    try {
+      setLoading(true);
+
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/details/${applicationNumber}`,
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+          },
+        },
+      );
+
+      if (response.data) {
+        setSelectedApplication(response.data);
+        setViewMode("detail");
+        localStorage.setItem("selectedApplicationId", applicationNumber);
+      }
+    } catch (err) {
+      console.error("Error fetching application details:", err);
+      setError("Failed to load application details. Please try again later.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBackToList = () => {
+    setViewMode("list");
+    setSelectedApplication(null);
+    setActionMessage(null);
+  };
+
+  const handleResubmit = async () => {
+    if (!selectedApplication) return;
+
+    // CRITICAL VALIDATION: Check consent status before allowing resubmission
+    if (consentStatus) {
+      if (!consentStatus.shares_valid) {
+        setActionMessage({
+          type: "error",
+          text: "Cannot resubmit: Inventor percentage shares must sum to exactly 100% before resubmission."
+        });
+        return;
+      }
+
+      if (!consentStatus.all_consented) {
+        setActionMessage({
+          type: "error",
+          text: "Cannot resubmit: All inventors must give their consent before resubmission."
+        });
+        return;
+      }
+    }
+
+    try {
+      setActionLoading(true);
+      await axios.post(
+        `${API_BASE_URL}/applicant/applications/resubmit/${selectedApplication.application_id}/`,
+        {},
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      setActionMessage({ type: "success", text: "Application resubmitted successfully!" });
+      // Refresh the detail
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/details/${selectedApplication.application_id}`,
+        { headers: { Authorization: `Token ${authToken}` } },
+      );
+      if (response.data) setSelectedApplication(response.data);
+    } catch (err) {
+      setActionMessage({
+        type: "error",
+        text: err.response?.data?.error || "Failed to resubmit application.",
+      });
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleEditSuccess = async () => {
+    // Refresh the application data after successful edit
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/details/${selectedApplication.application_id}`,
+        { headers: { Authorization: `Token ${authToken}` } }
+      );
+      if (response.data) {
+        setSelectedApplication(response.data);
+        setActionMessage({
+          type: "success",
+          text: "Application updated and resubmitted successfully!"
+        });
+      }
+    } catch (err) {
+      console.error("Error refreshing application data:", err);
+    }
+  };
+
+  const handleWithdraw = async () => {
+    if (!selectedApplication || !withdrawReason.trim()) return;
+    try {
+      setActionLoading(true);
+      await axios.post(
+        `${API_BASE_URL}/applicant/applications/withdraw/${selectedApplication.application_id}/`,
+        { reason: withdrawReason },
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      setWithdrawModalOpen(false);
+      setWithdrawReason("");
+      setActionMessage({ type: "success", text: "Application withdrawn successfully." });
+      // Refresh the detail
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/details/${selectedApplication.application_id}`,
+        { headers: { Authorization: `Token ${authToken}` } },
+      );
+      if (response.data) setSelectedApplication(response.data);
+    } catch (err) {
+      setActionMessage({
+        type: "error",
+        text: err.response?.data?.error || "Failed to withdraw application.",
+      });
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  // Feature 1: Handle appeal submission
+  const handleAppeal = async () => {
+    if (!selectedApplication || !appealReason.trim()) return;
+    try {
+      setActionLoading(true);
+      await axios.post(
+        `${API_BASE_URL}/applicant/applications/${selectedApplication.application_id}/appeal/`,
+        { reason: appealReason },
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      setAppealModalOpen(false);
+      setAppealReason("");
+      setActionMessage({ type: "success", text: "Appeal lodged successfully. You will be notified of the decision." });
+      // Refresh the detail
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/details/${selectedApplication.application_id}`,
+        { headers: { Authorization: `Token ${authToken}` } },
+      );
+      if (response.data) setSelectedApplication(response.data);
+    } catch (err) {
+      setActionMessage({
+        type: "error",
+        text: err.response?.data?.error || "Failed to lodge appeal. Make sure your reason is at least 50 characters.",
+      });
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  // Feature 2: Fetch consent status
+  const fetchConsentStatus = async (applicationId) => {
+    try {
+      setConsentLoading(true);
+      const response = await axios.get(
+        `${API_BASE_URL}/applicant/applications/${applicationId}/consent/status/`,
+        { headers: { Authorization: `Token ${authToken}` } }
+      );
+      setConsentStatus(response.data);
+    } catch (err) {
+      console.error("Error fetching consent status:", err);
+    } finally {
+      setConsentLoading(false);
+    }
+  };
+
+  // Feature 2: Handle giving consent
+  const handleGiveConsent = async () => {
+    if (!selectedApplication) return;
+    try {
+      setConsentLoading(true);
+      await axios.post(
+        `${API_BASE_URL}/applicant/applications/${selectedApplication.application_id}/consent/`,
+        {},
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      setActionMessage({ type: "success", text: "Consent given successfully." });
+      // Refresh consent status
+      await fetchConsentStatus(selectedApplication.application_id);
+    } catch (err) {
+      setActionMessage({
+        type: "error",
+        text: err.response?.data?.error || "Failed to give consent.",
+      });
+    } finally {
+      setConsentLoading(false);
+    }
+  };
+
+  // Fetch consent status when viewing application details
+  useEffect(() => {
+    if (selectedApplication && viewMode === "detail") {
+      fetchConsentStatus(selectedApplication.application_id);
+    }
+  }, [selectedApplication, viewMode]);
+
+  // Render application list view with improved loading and error states
+  const renderApplicationList = () => (
+    // Replace the Grid component with this structure:
+    <Box id="pms-applications-container">
+      <Text id="pms-view-app-page-title">Your Patent Applications</Text>
+
+      {loading ? (
+        <div id="pms-loader-container">
+          <Loader size="lg" color="blue" />
+          <Text mt="md">Loading your applications...</Text>
+        </div>
+      ) : error ? (
+        <Card id="pms-empty-state-card" p="xl" radius="md" withBorder>
+          <Text style={{ fontSize: "22px", fontWeight: 500 }}>
+            Unable to Load Applications
+          </Text>
+          <Divider
+            w="100%"
+            style={{ margin: "0 0", border: "0.5px solid rgb(215, 215, 215)" }}
+          />
+          <Text size="sm" color="dimmed" mt="sm">
+            We encountered an issue while loading your applications. Please try
+            again.
+          </Text>
+          <Button
+            mt="lg"
+            color="blue"
+            onClick={() => window.location.reload()}
+            fullWidth
+          >
+            Try Again
+          </Button>
+        </Card>
+      ) : applications.length === 0 ? (
+        <Card id="pms-empty-state-card" p="xl" radius="md" withBorder>
+          <Text size="lg" align="center" weight={500}>
+            No Applications Found
+          </Text>
+          <Text size="sm" color="dimmed" align="center" mt="sm">
+            You haven't submitted any patent applications yet.
+          </Text>
+          <Button
+            mt="lg"
+            color="blue"
+            onClick={() => setActiveTab("newApplication")}
+            fullWidth
+          >
+            Start New Application
+          </Button>
+        </Card>
+      ) : (
+        <div id="pms-view-applications-grid">
+          {applications.map((app, index) => (
+            <ApplicationCard
+              key={index}
+              title={app.title}
+              date={app.date}
+              tokenNumber={app.tokenNumber}
+              applicationNumber={app.applicationNumber}
+              status={app.status}
+              onViewApplication={handleViewApplication}
+            />
+          ))}
+        </div>
+      )}
+    </Box>
+  );
+
+  // Render application detail view with enhanced UI
+  const renderApplicationDetail = () => {
+    if (!selectedApplication) return null;
+
+    const {
+      application_id,
+      title,
+      token_no,
+      status,
+      decision_status,
+      comments,
+      inventors: applicants,
+      section_I,
+      section_II,
+      section_III,
+      dates,
+    } = selectedApplication;
+
+    const submittedDate = dates?.submitted_date
+      ? new Date(dates.submitted_date).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        })
+      : "Not recorded";
+
+    // Build file URLs — backend returns media paths like /media/patent/...
+    const pocFileUrl = section_I?.poc_details
+      ? `${host}${section_I.poc_details}`
+      : null;
+    const sourceAgreementFileUrl = section_II?.source_agreement
+      ? `${host}${section_II.source_agreement}`
+      : null;
+    const mouFileUrl = section_II?.mou_file
+      ? `${host}${section_II.mou_file}`
+      : null;
+    const firstSectionIII = Array.isArray(section_III) ? section_III[0] : section_III;
+    const formIIIFileUrl = firstSectionIII?.form_iii
+      ? `${host}${firstSectionIII.form_iii}`
+      : null;
+
+    return (
+      <Container
+        id={`pms-detail-container ${
+          isMobile ? "pms-mobile-form-container" : ""
+        }`}
+        size="100%"
+        style={{ maxWidth: "100%", padding: "2rem" }}
+      >
+        <div id="pms-application-view-detail-header">
+          <Button
+            onClick={handleBackToList}
+            leftIcon={<ArrowLeft size={18} />}
+            id="pms-application-view-back-button"
+          >
+            Back
+          </Button>
+          <Text id="pms-application-view-page-title">
+            Application ID : {application_id}
+          </Text>
+          <Button
+            component="a"
+            href={`${API_BASE_URL}/download/${application_id}/`}
+            target="_blank"
+            download={`Application-${application_id}.pdf`}
+            id="pms-application-view-download-button"
+            rightIcon={<DownloadSimple size={18} />}
+          >
+            Download
+          </Button>
+        </div>
+
+        <div>
+          {/* Show alert when modification is requested */}
+          {status === "Draft" && decision_status === "Needs Revision" && comments && (
+            <Alert
+              icon={<Hourglass size={24} />}
+              title="Modification Requested"
+              color="orange"
+              radius="md"
+              mb="lg"
+              style={{ 
+                backgroundColor: "#fff4e6",
+                borderLeft: "4px solid #ff922b"
+              }}
+            >
+              <Text weight={600} size="md" mb="sm">
+                The PCC Admin has requested modifications to your application.
+              </Text>
+              <Text weight={600} mb="xs">PCC Admin Comments:</Text>
+              <Text
+                style={{
+                  backgroundColor: "#ffe8cc",
+                  padding: "12px",
+                  borderRadius: "8px",
+                  border: "1px solid #ffd8a8",
+                  whiteSpace: "pre-wrap"
+                }}
+              >
+                {comments}
+              </Text>
+              <Text mt="md" color="dimmed" size="sm">
+                Please make the necessary changes and resubmit your application.
+              </Text>
+            </Alert>
+          )}
+
+          <FormSection
+            title="Application Overview"
+            id="pms-application-view-form-section"
+          >
+            <Grid>
+              <Grid.Col span={12} md={4} className="pms-form-field-container">
+                <FormField label="Title of Application:" value={title} />
+              </Grid.Col>
+
+              <Grid.Col span={12} md={4} className="pms-form-field-container">
+                <FormField label="Submission Date:" value={submittedDate} />
+              </Grid.Col>
+              <Grid.Col span={12} md={4} className="pms-form-field-container">
+                <FormField label="Token Number:" value={token_no} />
+              </Grid.Col>
+              <Grid.Col span={12} md={4} className="pms-form-field-container">
+                <FormField label="Status:" value={status} />
+              </Grid.Col>
+              <Grid.Col span={12} md={4} className="pms-form-field-container">
+                <FormField label="Decision Status:" value={decision_status} />
+              </Grid.Col>
+              <Grid.Col span={12} className="pms-form-field-container">
+                <FormField label="Comments:" value={comments} />
+              </Grid.Col>
+            </Grid>
+          </FormSection>
+
+          <FormSection title="Key Dates">
+            <div id="pms-key-dates-container">
+              <div id="pms-key-dates-grid">
+                {/* <div id="pms-key-date-card">
+                <div id="pms-key-date-title">Reviewed by PCC</div>
+                <div id="pms-key-date-value">
+                  {dates?.reviewed_by_pcc_date
+                    ? new Date(dates.reviewed_by_pcc_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet reviewed"}
+                </div>
+              </div> */}
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">Forwarded to Director</div>
+                  <div id="pms-key-date-value">
+                    {dates?.forwarded_to_director_date
+                      ? new Date(
+                          dates.forwarded_to_director_date,
+                        ).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })
+                      : "Not yet forwarded"}
+                  </div>
+                </div>
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">Director Approval</div>
+                  <div id="pms-key-date-value">
+                    {dates?.director_approval_date
+                      ? new Date(
+                          dates.director_approval_date,
+                        ).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })
+                      : "Not yet approved"}
+                  </div>
+                </div>
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">Patentability Check Start</div>
+                  <div id="pms-key-date-value">
+                    {dates?.patentability_check_start_date
+                      ? new Date(
+                          dates.patentability_check_start_date,
+                        ).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })
+                      : "Not started"}
+                  </div>
+                </div>
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">
+                    Patentability Check Completed
+                  </div>
+                  <div id="pms-key-date-value">
+                    {dates?.patentability_check_completed_date
+                      ? new Date(
+                          dates.patentability_check_completed_date,
+                        ).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })
+                      : "Not completed"}
+                  </div>
+                </div>
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">Search Report Generated</div>
+                  <div id="pms-key-date-value">
+                    {dates?.search_report_generated_date
+                      ? new Date(
+                          dates.search_report_generated_date,
+                        ).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })
+                      : "Not generated"}
+                  </div>
+                </div>
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">Date of Filing</div>
+                  <div id="pms-key-date-value">
+                    {dates?.patent_filed_date
+                      ? new Date(dates.patent_filed_date).toLocaleDateString(
+                          "en-US",
+                          {
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                          },
+                        )
+                      : "Not recorded"}
+                  </div>
+                </div>
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title">Date of Publication</div>
+                  <div id="pms-key-date-value">
+                    {dates?.patent_published_date
+                      ? new Date(
+                          dates.patent_published_date,
+                        ).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })
+                      : "Not yet published"}
+                  </div>
+                </div>
+
+                {/* <div id="pms-key-date-card">
+                <div id="pms-key-date-title">Decision Date</div>
+                <div id="pms-key-date-value">
+                  {dates?.decision_date
+                    ? new Date(dates.decision_date).toLocaleDateString(
+                          "en-US",
+                          {
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                          },
+                        )
+                    : "No decision yet"}
+                  </div>
+              </div> */}
+
+                <div id="pms-key-date-card">
+                  <div id="pms-key-date-title"> Date of Granting</div>
+                  <div id="pms-key-date-value">
+                    {dates?.final_decision_date
+                      ? new Date(dates.final_decision_date).toLocaleDateString(
+                          "en-US",
+                          {
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                          },
+                        )
+                      : "No final decision yet"}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </FormSection>
+
+          <FormSection title="Section I: Administrative and Technical Details">
+            <Grid>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Area of the invention:"
+                  value={section_I?.area}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Problem in the area:"
+                  value={section_I?.problem}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Objective of your invention:"
+                  value={section_I?.objective}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField label="Novelty:" value={section_I?.novelty} />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField label="Advantages:" value={section_I?.advantages} />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Tested:"
+                  value={
+                    section_I?.is_tested === true
+                      ? "Yes"
+                      : section_I?.is_tested === false
+                        ? "No"
+                        : ""
+                  }
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormFieldWithDownload
+                  label="POC Details:"
+                  value={section_I?.poc_details}
+                  fileUrl={pocFileUrl}
+                  fileLabel="POC File"
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Applications:"
+                  value={section_I?.applications}
+                />
+              </Grid.Col>
+            </Grid>
+          </FormSection>
+
+          <FormSection title="Section II: IPR Ownership">
+            <Grid>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Funding Details:"
+                  value={section_II?.funding_details}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Funding Source:"
+                  value={section_II?.funding_source}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormFieldWithDownload
+                  label="Source Agreement:"
+                  value={section_II?.source_agreement}
+                  fileUrl={sourceAgreementFileUrl}
+                  fileLabel="Source Agreement"
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Publication Details:"
+                  value={section_II?.publication_details}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormFieldWithDownload
+                  label="MOU Details:"
+                  value={section_II?.mou_details}
+                  fileUrl={mouFileUrl}
+                  fileLabel="MOU File"
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Research Details:"
+                  value={section_II?.research_details}
+                />
+              </Grid.Col>
+            </Grid>
+          </FormSection>
+
+          <FormSection title="Section III: Commercialization">
+            <Grid>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Company Name:"
+                  value={section_III?.company_name}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Contact Person:"
+                  value={section_III?.contact_person}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormField
+                  label="Contact Number:"
+                  value={section_III?.contact_no}
+                />
+              </Grid.Col>
+              <Grid.Col span={12} md={6} className="pms-form-field-container">
+                <FormFieldWithDownload
+                  label="Development Stage:"
+                  value={section_III?.development_stage}
+                  fileUrl={formIIIFileUrl}
+                  fileLabel="Form III"
+                />
+              </Grid.Col>
+            </Grid>
+          </FormSection>
+
+          <FormSection title="Inventor">
+            {applicants && applicants.length > 0 ? (
+              <div id="pms-inventors-container">
+                {applicants.map((applicant, index) => (
+                  <Card
+                    key={index}
+                    id="pms-inventor-card"
+                    p="md"
+                    radius="sm"
+                    withBorder
+                  >
+                    <Text weight={600} size="lg" mb="xs" align="center">
+                      Inventor {index + 1}
+                    </Text>
+                    <div id="pms-inventor-details">
+                      <FormField
+                        className="pms-form-field-container"
+                        label="Name:"
+                        value={applicant.name}
+                      />
+                      <FormField
+                        className="pms-form-field-container"
+                        label="Email:"
+                        value={applicant.email}
+                      />
+                      <FormField
+                        className="pms-form-field-container"
+                        label="Mobile:"
+                        value={applicant.mobile}
+                      />
+                      <FormField
+                        className="pms-form-field-container"
+                        label="Address:"
+                        value={applicant.address}
+                      />
+                      <FormField
+                        label="Share Percentage:"
+                        value={
+                          applicant.percentage_share
+                            ? `${applicant.percentage_share}%`
+                            : ""
+                        }
+                      />
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            ) : (
+              <Text color="dimmed">No inventor information available</Text>
+            )}
+          </FormSection>
+
+          <FormSection title="Application Progress">
+            <PatentProgressBar currentStatus={status} isMobile={isMobile} />
+          </FormSection>
+
+          {/* Resubmit / Withdraw Actions */}
+          {actionMessage && (
+            <Alert
+              color={actionMessage.type === "success" ? "green" : "red"}
+              title={actionMessage.type === "success" ? "Success" : "Error"}
+              mb="md"
+              withCloseButton
+              onClose={() => setActionMessage(null)}
+            >
+              {actionMessage.text}
+            </Alert>
+          )}
+
+          {(status === "Rejected" ||
+            status === "Needs Revision" ||
+            status === "Draft") && (
+            <Card p="lg" radius="md" withBorder mb="md">
+              <Text weight={600} size="lg" mb="sm">
+                Resubmit Application
+              </Text>
+              <Text size="sm" color="dimmed" mb="md">
+                You can resubmit this application within 60 days of rejection.
+                Make necessary changes before resubmitting.
+                {consentStatus && (!consentStatus.shares_valid || !consentStatus.all_consented) && (
+                  <Text color="red" size="sm" mt="xs">
+                    ⚠️ Requirements: All inventors must consent AND percentage shares must total 100%
+                  </Text>
+                )}
+              </Text>
+              <Group>
+                <Button
+                  color="blue"
+                  onClick={() => setEditModalOpen(true)}
+                  leftSection={<ArrowRight size={16} />}
+                >
+                  Edit & Resubmit
+                </Button>
+                <Button
+                  variant="light"
+                  color="blue"
+                  onClick={handleResubmit}
+                  loading={actionLoading}
+                  disabled={consentStatus && (!consentStatus.shares_valid || !consentStatus.all_consented)}
+                >
+                  Quick Resubmit
+                </Button>
+              </Group>
+            </Card>
+          )}
+
+          {/* Feature 1: Appeal Section for Rejected Applications */}
+          {status === "Rejected" && (
+            <Card p="lg" radius="md" withBorder mb="md" style={{ borderLeft: "4px solid #805ad5" }}>
+              <Group position="apart" mb="sm">
+                <Text weight={600} size="lg">
+                  <Scales size={20} style={{ marginRight: "8px", verticalAlign: "middle" }} />
+                  Lodge Formal Appeal
+                </Text>
+                <Badge color="violet">Available within 60 days</Badge>
+              </Group>
+              <Text size="sm" color="dimmed" mb="md">
+                If you believe the rejection decision was incorrect, you can lodge a formal appeal.
+                Your appeal will be reviewed by the Director. Please provide a detailed reason
+                (minimum 50 characters) explaining why you believe the decision should be reconsidered.
+              </Text>
+              <Button
+                color="violet"
+                leftSection={<Scales size={18} />}
+                onClick={() => setAppealModalOpen(true)}
+              >
+                Lodge Appeal
+              </Button>
+            </Card>
+          )}
+
+          {/* Feature 1: Appeal Status Display */}
+          {(status === "Appeal" || status === "Appeal Under Review" ||
+            status === "Appeal Approved" || status === "Appeal Rejected") && (
+            <Card p="lg" radius="md" withBorder mb="md" style={{
+              borderLeft: `4px solid ${status === "Appeal Approved" ? "#38a169" : status === "Appeal Rejected" ? "#e53e3e" : "#805ad5"}`
+            }}>
+              <Text weight={600} size="lg" mb="sm">
+                Appeal Status
+              </Text>
+              <Badge
+                color={status === "Appeal Approved" ? "green" : status === "Appeal Rejected" ? "red" : "violet"}
+                size="lg"
+                mb="md"
+              >
+                {status}
+              </Badge>
+              {selectedApplication.appeal_reason && (
+                <Box mt="md">
+                  <Text weight={500} mb="xs">Your Appeal Reason:</Text>
+                  <Text size="sm" style={{ backgroundColor: "#f8f9fa", padding: "10px", borderRadius: "8px" }}>
+                    {selectedApplication.appeal_reason}
+                  </Text>
+                </Box>
+              )}
+            </Card>
+          )}
+
+          {/* Feature 2: Consent Status Section */}
+          {consentStatus && (
+            <Card p="lg" radius="md" withBorder mb="md" style={{ borderLeft: "4px solid #319795" }}>
+              <Group position="apart" mb="sm">
+                <Text weight={600} size="lg">
+                  <Handshake size={20} style={{ marginRight: "8px", verticalAlign: "middle" }} />
+                  Inventor Consent Status
+                </Text>
+                {consentStatus.all_consented ? (
+                  <Badge color="green" size="lg">All Consents Received</Badge>
+                ) : (
+                  <Badge color="orange" size="lg">Pending Consents</Badge>
+                )}
+              </Group>
+
+              <Grid mb="md">
+                <Grid.Col span={6}>
+                  <Text size="sm" color="dimmed">Total Share Allocation</Text>
+                  <Progress
+                    value={parseFloat(consentStatus.total_share)}
+                    color={consentStatus.shares_valid ? "green" : "red"}
+                    size="lg"
+                    mb="xs"
+                  />
+                  <Text size="sm" weight={500}>
+                    {consentStatus.total_share}%
+                    {!consentStatus.shares_valid && (
+                      <Text component="span" color="red" ml="xs">
+                        (Must equal 100%)
+                      </Text>
+                    )}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <Text size="sm" color="dimmed">Consent Progress</Text>
+                  <Progress
+                    value={(consentStatus.inventors.filter(i => i.has_consent).length / consentStatus.inventors.length) * 100}
+                    color="teal"
+                    size="lg"
+                    mb="xs"
+                  />
+                  <Text size="sm" weight={500}>
+                    {consentStatus.inventors.filter(i => i.has_consent).length} / {consentStatus.inventors.length} inventors
+                  </Text>
+                </Grid.Col>
+              </Grid>
+
+              <Divider mb="md" />
+
+              <Text weight={500} mb="sm">Inventors:</Text>
+              {consentStatus.inventors.map((inventor, index) => (
+                <Box key={index} style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "8px 12px",
+                  backgroundColor: inventor.has_consent ? "#e6fffa" : "#fff5f5",
+                  borderRadius: "8px",
+                  marginBottom: "8px"
+                }}>
+                  <Box>
+                    <Text weight={500}>{inventor.name}</Text>
+                    <Text size="sm" color="dimmed">{inventor.email} • {inventor.percentage_share}%</Text>
+                  </Box>
+                  <Box style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+                    {inventor.has_consent ? (
+                      <Tooltip label={`Consented on ${new Date(inventor.consent_date).toLocaleDateString()}`}>
+                        <Badge color="green" leftSection={<CheckCircle size={14} />}>
+                          Consented
+                        </Badge>
+                      </Tooltip>
+                    ) : (
+                      <Badge color="orange" leftSection={<Warning size={14} />}>
+                        Pending
+                      </Badge>
+                    )}
+                  </Box>
+                </Box>
+              ))}
+
+              {/* Show Give Consent button if current user is an inventor who hasn't consented */}
+              {consentStatus.inventors.some(i => !i.has_consent) && (
+                <Box mt="md">
+                  <Button
+                    color="teal"
+                    leftSection={<Handshake size={18} />}
+                    onClick={handleGiveConsent}
+                    loading={consentLoading}
+                  >
+                    Give My Consent
+                  </Button>
+                </Box>
+              )}
+            </Card>
+          )}
+
+          {status !== "Withdrawn" &&
+            status !== "Patent Granted" &&
+            status !== "Patent Refused" && (
+              <Card p="lg" radius="md" withBorder mb="md">
+                <Text weight={600} size="lg" mb="sm">
+                  Withdraw Application
+                </Text>
+                <Text size="sm" color="dimmed" mb="md">
+                  If you wish to withdraw this application, please provide a
+                  reason. This action cannot be undone.
+                </Text>
+                <Button
+                  color="red"
+                  variant="outline"
+                  onClick={() => setWithdrawModalOpen(true)}
+                >
+                  Withdraw Application
+                </Button>
+              </Card>
+            )}
+
+          {/* Withdraw Modal */}
+          <Modal
+            opened={withdrawModalOpen}
+            onClose={() => setWithdrawModalOpen(false)}
+            title="Withdraw Application"
+            centered
+            size="md"
+          >
+            <Textarea
+              label="Reason for Withdrawal"
+              placeholder="Please explain why you want to withdraw this application"
+              value={withdrawReason}
+              onChange={(e) => setWithdrawReason(e.target.value)}
+              required
+              minRows={3}
+              mb="md"
+            />
+            <Group position="right">
+              <Button
+                variant="outline"
+                onClick={() => setWithdrawModalOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                color="red"
+                onClick={handleWithdraw}
+                loading={actionLoading}
+                disabled={!withdrawReason.trim()}
+              >
+                Confirm Withdrawal
+              </Button>
+            </Group>
+          </Modal>
+
+          {/* Feature 1: Appeal Modal */}
+          <Modal
+            opened={appealModalOpen}
+            onClose={() => setAppealModalOpen(false)}
+            title="Lodge Formal Appeal"
+            centered
+            size="lg"
+          >
+            <Text size="sm" color="dimmed" mb="md">
+              Please provide a detailed explanation for your appeal. Explain why you believe the
+              rejection decision was incorrect and should be reconsidered by the Director.
+            </Text>
+            <Textarea
+              label="Appeal Reason"
+              placeholder="Enter your detailed appeal reason (minimum 50 characters)..."
+              value={appealReason}
+              onChange={(e) => setAppealReason(e.target.value)}
+              required
+              minRows={4}
+              mb="md"
+              error={appealReason.length > 0 && appealReason.length < 50 ? "Appeal reason must be at least 50 characters" : null}
+            />
+            <Text size="xs" color="dimmed" mb="md">
+              Character count: {appealReason.length}/50 minimum
+            </Text>
+            <Group position="right">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setAppealModalOpen(false);
+                  setAppealReason("");
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                color="violet"
+                leftSection={<Scales size={18} />}
+                onClick={handleAppeal}
+                loading={actionLoading}
+                disabled={appealReason.length < 50}
+              >
+                Submit Appeal
+              </Button>
+            </Group>
+          </Modal>
+
+          {/* Edit Application Modal */}
+          <EditApplicationModal
+            opened={editModalOpen}
+            onClose={() => setEditModalOpen(false)}
+            application={selectedApplication}
+            onSuccess={handleEditSuccess}
+          />
+        </div>
+      </Container>
+    );
+  };
+
+  return (
+    <Box id="pms-application-view-container">
+      {viewMode === "list"
+        ? renderApplicationList()
+        : renderApplicationDetail()}
+    </Box>
+  );
+}
+
+ApplicationView.propTypes = {
+  setActiveTab: PropTypes.func.isRequired,
+};
+
+export default ApplicationView;
diff --git a/src/Modules/Patent/components/Common/Documents/DocumentVersionControl.jsx b/src/Modules/Patent/components/Common/Documents/DocumentVersionControl.jsx
new file mode 100644
index 000000000..303676d6b
--- /dev/null
+++ b/src/Modules/Patent/components/Common/Documents/DocumentVersionControl.jsx
@@ -0,0 +1,418 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  Text,
+  Button,
+  Group,
+  FileInput,
+  TextInput,
+  Textarea,
+  Modal,
+  Badge,
+  Box,
+  Grid,
+  Loader,
+  Alert,
+  ActionIcon,
+  Tooltip,
+  Select,
+  Timeline,
+} from "@mantine/core";
+import {
+  Upload,
+  FileText,
+  Download,
+  Eye,
+  History,
+  File,
+  Plus,
+} from "@phosphor-icons/react";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+const DocumentVersionControl = ({ applicationId }) => {
+  const [documents, setDocuments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
+  const [historyModalOpen, setHistoryModalOpen] = useState(false);
+  const [selectedDocType, setSelectedDocType] = useState("");
+  const [documentHistory, setDocumentHistory] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Upload form state
+  const [uploadForm, setUploadForm] = useState({
+    document_type: "",
+    title: "",
+    file: null,
+    description: "",
+  });
+
+  const documentTypes = [
+    { value: "POC Details", label: "POC Details" },
+    { value: "Source Agreement", label: "Source Agreement" },
+    { value: "MOU File", label: "MOU File" },
+    { value: "Form III", label: "Form III" },
+    { value: "Supporting Document", label: "Supporting Document" },
+    { value: "Research Paper", label: "Research Paper" },
+    { value: "Technical Drawing", label: "Technical Drawing" },
+    { value: "Patent Draft", label: "Patent Draft" },
+    { value: "Legal Document", label: "Legal Document" },
+    { value: "Other", label: "Other" },
+  ];
+
+  useEffect(() => {
+    if (applicationId) {
+      fetchDocuments();
+    }
+  }, [applicationId]);
+
+  const fetchDocuments = async () => {
+    const token = localStorage.getItem("authToken");
+    try {
+      setLoading(true);
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/documents/?current_only=true`,
+        {
+          headers: { Authorization: `Token ${token}` },
+        }
+      );
+      setDocuments(response.data);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching documents:", err);
+      setError("Failed to fetch documents");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchDocumentHistory = async (documentType) => {
+    const token = localStorage.getItem("authToken");
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/documents/?document_type=${documentType}`,
+        {
+          headers: { Authorization: `Token ${token}` },
+        }
+      );
+      setDocumentHistory(response.data);
+      setSelectedDocType(documentType);
+      setHistoryModalOpen(true);
+    } catch (err) {
+      console.error("Error fetching document history:", err);
+      setError("Failed to fetch document history");
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!uploadForm.file || !uploadForm.title || !uploadForm.document_type) {
+      setError("Please fill in all required fields");
+      return;
+    }
+
+    const token = localStorage.getItem("authToken");
+    const formData = new FormData();
+    formData.append("file", uploadForm.file);
+    formData.append("document_type", uploadForm.document_type);
+    formData.append("title", uploadForm.title);
+    formData.append("description", uploadForm.description);
+
+    try {
+      setUploading(true);
+      await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/documents/`,
+        formData,
+        {
+          headers: {
+            Authorization: `Token ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+
+      setUploadModalOpen(false);
+      setUploadForm({
+        document_type: "",
+        title: "",
+        file: null,
+        description: "",
+      });
+      fetchDocuments();
+      setError(null);
+    } catch (err) {
+      console.error("Error uploading document:", err);
+      setError(err.response?.data?.error || "Failed to upload document");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const getFileIcon = (fileUrl) => {
+    if (!fileUrl) return <File size={20} />;
+    const ext = fileUrl.split('.').pop()?.toLowerCase();
+    const color = ext === 'pdf' ? 'red' : ext === 'doc' || ext === 'docx' ? 'blue' : ext === 'jpg' || ext === 'png' ? 'green' : 'gray';
+    return <FileText size={20} color={color} />;
+  };
+
+  const formatFileSize = (url) => {
+    // This is a placeholder - in real implementation, you'd get file size from backend
+    return "Unknown size";
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  if (loading) {
+    return (
+      <Card p="lg" withBorder>
+        <Group position="center">
+          <Loader size="md" />
+          <Text>Loading documents...</Text>
+        </Group>
+      </Card>
+    );
+  }
+
+  return (
+    <Box>
+      {error && (
+        <Alert color="red" mb="md" onClose={() => setError(null)} withCloseButton>
+          {error}
+        </Alert>
+      )}
+
+      <Card p="lg" withBorder>
+        <Group position="apart" mb="md">
+          <Text size="lg" weight={600}>
+            <FileText size={20} style={{ marginRight: "8px", verticalAlign: "middle" }} />
+            Document Version Control
+          </Text>
+          <Button
+            leftSection={<Plus size={16} />}
+            onClick={() => setUploadModalOpen(true)}
+          >
+            Upload New Document
+          </Button>
+        </Group>
+
+        {documents.length === 0 ? (
+          <Box ta="center" py="xl">
+            <FileText size={48} color="gray" />
+            <Text mt="md" color="dimmed">
+              No documents uploaded yet
+            </Text>
+            <Button
+              mt="md"
+              leftSection={<Upload size={16} />}
+              onClick={() => setUploadModalOpen(true)}
+            >
+              Upload First Document
+            </Button>
+          </Box>
+        ) : (
+          <Grid>
+            {documents.map((doc, index) => (
+              <Grid.Col key={index} span={12} md={6} lg={4}>
+                <Card p="md" withBorder>
+                  <Group position="apart" mb="xs">
+                    <Group>
+                      {getFileIcon(doc.file_url)}
+                      <Text size="sm" weight={500}>
+                        v{doc.version}
+                      </Text>
+                    </Group>
+                    <Badge size="sm" color="blue">
+                      Current
+                    </Badge>
+                  </Group>
+
+                  <Text weight={600} mb="xs" lineClamp={2}>
+                    {doc.title}
+                  </Text>
+
+                  <Text size="sm" color="dimmed" mb="xs">
+                    Type: {doc.document_type}
+                  </Text>
+
+                  {doc.description && (
+                    <Text size="xs" color="dimmed" mb="sm" lineClamp={2}>
+                      {doc.description}
+                    </Text>
+                  )}
+
+                  <Box mb="sm">
+                    <Text size="xs" color="dimmed">
+                      Uploaded by: {doc.uploaded_by_name || "Unknown"}
+                    </Text>
+                    <Text size="xs" color="dimmed">
+                      Date: {formatDate(doc.created_at)}
+                    </Text>
+                  </Box>
+
+                  <Group>
+                    <Tooltip label="Download">
+                      <ActionIcon
+                        variant="light"
+                        color="blue"
+                        component="a"
+                        href={doc.file_url}
+                        download
+                      >
+                        <Download size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                    <Tooltip label="View History">
+                      <ActionIcon
+                        variant="light"
+                        color="gray"
+                        onClick={() => fetchDocumentHistory(doc.document_type)}
+                      >
+                        <History size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                  </Group>
+                </Card>
+              </Grid.Col>
+            ))}
+          </Grid>
+        )}
+      </Card>
+
+      {/* Upload Modal */}
+      <Modal
+        opened={uploadModalOpen}
+        onClose={() => setUploadModalOpen(false)}
+        title="Upload New Document Version"
+        size="md"
+      >
+        <Box>
+          <Select
+            label="Document Type"
+            placeholder="Select document type"
+            value={uploadForm.document_type}
+            onChange={(value) =>
+              setUploadForm({ ...uploadForm, document_type: value })
+            }
+            data={documentTypes}
+            required
+            mb="md"
+          />
+
+          <TextInput
+            label="Document Title"
+            placeholder="Enter document title"
+            value={uploadForm.title}
+            onChange={(e) =>
+              setUploadForm({ ...uploadForm, title: e.target.value })
+            }
+            required
+            mb="md"
+          />
+
+          <FileInput
+            label="Select File"
+            placeholder="Choose file to upload"
+            value={uploadForm.file}
+            onChange={(file) => setUploadForm({ ...uploadForm, file })}
+            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.txt"
+            required
+            mb="md"
+          />
+
+          <Textarea
+            label="Description (Optional)"
+            placeholder="Enter document description"
+            value={uploadForm.description}
+            onChange={(e) =>
+              setUploadForm({ ...uploadForm, description: e.target.value })
+            }
+            minRows={2}
+            mb="md"
+          />
+
+          <Group position="right">
+            <Button
+              variant="outline"
+              onClick={() => setUploadModalOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleUpload}
+              loading={uploading}
+              leftSection={<Upload size={16} />}
+            >
+              Upload Document
+            </Button>
+          </Group>
+        </Box>
+      </Modal>
+
+      {/* History Modal */}
+      <Modal
+        opened={historyModalOpen}
+        onClose={() => setHistoryModalOpen(false)}
+        title={`Version History - ${selectedDocType}`}
+        size="lg"
+      >
+        <Timeline active={documentHistory.length} bulletSize={24} lineWidth={2}>
+          {documentHistory.map((doc, index) => (
+            <Timeline.Item
+              key={index}
+              bullet={<FileText size={12} />}
+              title={
+                <Group>
+                  <Text weight={500}>v{doc.version}</Text>
+                  {doc.is_current && (
+                    <Badge size="xs" color="green">
+                      Current
+                    </Badge>
+                  )}
+                </Group>
+              }
+            >
+              <Text size="sm" weight={500} mb="xs">
+                {doc.title}
+              </Text>
+              {doc.description && (
+                <Text size="xs" color="dimmed" mb="xs">
+                  {doc.description}
+                </Text>
+              )}
+              <Group>
+                <Text size="xs" color="dimmed">
+                  Uploaded: {formatDate(doc.created_at)}
+                </Text>
+                <Text size="xs" color="dimmed">
+                  By: {doc.uploaded_by_name}
+                </Text>
+                <Button
+                  size="xs"
+                  variant="light"
+                  leftSection={<Download size={12} />}
+                  component="a"
+                  href={doc.file_url}
+                  download
+                >
+                  Download
+                </Button>
+              </Group>
+            </Timeline.Item>
+          ))}
+        </Timeline>
+      </Modal>
+    </Box>
+  );
+};
+
+export default DocumentVersionControl;
\ No newline at end of file
diff --git a/src/Modules/Patent/components/Common/Search/SearchApplications.jsx b/src/Modules/Patent/components/Common/Search/SearchApplications.jsx
new file mode 100644
index 000000000..52fb7cd60
--- /dev/null
+++ b/src/Modules/Patent/components/Common/Search/SearchApplications.jsx
@@ -0,0 +1,319 @@
+import React, { useState } from "react";
+import {
+  Card,
+  Text,
+  TextInput,
+  Button,
+  Group,
+  Select,
+  Grid,
+  Loader,
+  Badge,
+  Box,
+  Pagination,
+  Divider,
+} from "@mantine/core";
+import { MagnifyingGlass, Funnel, Calendar, FileText } from "@phosphor-icons/react";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+import { getStatusColor } from "../../../utils/statusColors.js";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+const SearchApplications = () => {
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [decisionFilter, setDecisionFilter] = useState("");
+  const [dateFrom, setDateFrom] = useState(null);
+  const [dateTo, setDateTo] = useState(null);
+  const [department, setDepartment] = useState("");
+  const [results, setResults] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalResults, setTotalResults] = useState(0);
+  const [departments, setDepartments] = useState([]);
+
+  const statusOptions = [
+    { value: "", label: "All Statuses" },
+    { value: "Draft", label: "Draft" },
+    { value: "Submitted", label: "Submitted" },
+    { value: "Under Review", label: "Under Review" },
+    { value: "Reviewed by PCC Admin", label: "Reviewed by PCC Admin" },
+    { value: "Forwarded for Director's Review", label: "Forwarded for Director's Review" },
+    { value: "Approved", label: "Approved" },
+    { value: "Rejected", label: "Rejected" },
+    { value: "Appeal", label: "Appeal" },
+    { value: "Appeal Under Review", label: "Appeal Under Review" },
+    { value: "Appeal Approved", label: "Appeal Approved" },
+    { value: "Appeal Rejected", label: "Appeal Rejected" },
+    { value: "Needs Revision", label: "Needs Revision" },
+    { value: "Resubmitted", label: "Resubmitted" },
+    { value: "Patent Filed", label: "Patent Filed" },
+    { value: "Patent Granted", label: "Patent Granted" },
+    { value: "Patent Refused", label: "Patent Refused" },
+    { value: "Withdrawn", label: "Withdrawn" },
+    { value: "Expired", label: "Expired" },
+  ];
+
+  const decisionOptions = [
+    { value: "", label: "All Decisions" },
+    { value: "Pending", label: "Pending" },
+    { value: "Approved", label: "Approved" },
+    { value: "Rejected", label: "Rejected" },
+    { value: "Needs Revision", label: "Needs Revision" },
+  ];
+
+  React.useEffect(() => {
+    fetchDepartments();
+  }, []);
+
+  const fetchDepartments = async () => {
+    const token = localStorage.getItem("authToken");
+    try {
+      const response = await axios.get(`${API_BASE_URL}/pccAdmin/departments/`, {
+        headers: { Authorization: `Token ${token}` },
+      });
+      setDepartments(
+        response.data.departments.map((dept) => ({ value: dept, label: dept }))
+      );
+    } catch (err) {
+      console.error("Error fetching departments:", err);
+    }
+  };
+
+  const handleSearch = async (page = 1) => {
+    const token = localStorage.getItem("authToken");
+    if (!token) return;
+
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (query) params.append("q", query);
+      if (statusFilter) params.append("status", statusFilter);
+      if (decisionFilter) params.append("decision", decisionFilter);
+      if (dateFrom) params.append("date_from", dateFrom.toISOString().split("T")[0]);
+      if (dateTo) params.append("date_to", dateTo.toISOString().split("T")[0]);
+      if (department) params.append("department", department);
+
+      const limit = 10;
+      const offset = (page - 1) * limit;
+      params.append("limit", limit);
+      params.append("offset", offset);
+
+      const response = await axios.get(`${API_BASE_URL}/search/?${params}`, {
+        headers: { Authorization: `Token ${token}` },
+      });
+
+      setResults(response.data.applications);
+      setTotalResults(response.data.total);
+      setCurrentPage(page);
+    } catch (err) {
+      console.error("Search error:", err);
+      setResults([]);
+      setTotalResults(0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearFilters = () => {
+    setQuery("");
+    setStatusFilter("");
+    setDecisionFilter("");
+    setDateFrom(null);
+    setDateTo(null);
+    setDepartment("");
+    setResults(null);
+    setTotalResults(0);
+    setCurrentPage(1);
+  };
+
+  const totalPages = Math.ceil(totalResults / 10);
+
+  return (
+    <Box p="lg">
+      <Text size="xl" weight={600} mb="lg">
+        <MagnifyingGlass size={24} style={{ marginRight: "10px", verticalAlign: "middle" }} />
+        Search Patent Applications
+      </Text>
+
+      {/* Search Filters */}
+      <Card p="lg" mb="lg" withBorder>
+        <Group mb="md">
+          <Funnel size={20} />
+          <Text weight={500}>Search Filters</Text>
+        </Group>
+
+        <Grid>
+          <Grid.Col span={12} md={6}>
+            <TextInput
+              label="Search Query"
+              placeholder="Search by title, token number, or applicant name..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              leftSection={<MagnifyingGlass size={16} />}
+            />
+          </Grid.Col>
+
+          <Grid.Col span={12} md={6}>
+            <Select
+              label="Status"
+              placeholder="Select status"
+              value={statusFilter}
+              onChange={setStatusFilter}
+              data={statusOptions}
+              clearable
+            />
+          </Grid.Col>
+
+          <Grid.Col span={12} md={6}>
+            <Select
+              label="Decision"
+              placeholder="Select decision"
+              value={decisionFilter}
+              onChange={setDecisionFilter}
+              data={decisionOptions}
+              clearable
+            />
+          </Grid.Col>
+
+          <Grid.Col span={12} md={6}>
+            <Select
+              label="Department"
+              placeholder="Select department"
+              value={department}
+              onChange={setDepartment}
+              data={[{ value: "", label: "All Departments" }, ...departments]}
+              clearable
+            />
+          </Grid.Col>
+
+          <Grid.Col span={12} md={6}>
+            <TextInput
+              label="From Date"
+              placeholder="YYYY-MM-DD"
+              value={dateFrom}
+              onChange={(e) => setDateFrom(e.target.value)}
+              leftSection={<Calendar size={16} />}
+            />
+          </Grid.Col>
+
+          <Grid.Col span={12} md={6}>
+            <TextInput
+              label="To Date"
+              placeholder="YYYY-MM-DD"
+              value={dateTo}
+              onChange={(e) => setDateTo(e.target.value)}
+              leftSection={<Calendar size={16} />}
+            />
+          </Grid.Col>
+        </Grid>
+
+        <Group mt="md">
+          <Button
+            onClick={() => handleSearch(1)}
+            loading={loading}
+            leftSection={<MagnifyingGlass size={16} />}
+          >
+            Search Applications
+          </Button>
+          <Button variant="light" onClick={clearFilters}>
+            Clear Filters
+          </Button>
+        </Group>
+      </Card>
+
+      {/* Search Results */}
+      {loading && (
+        <Box ta="center" py="xl">
+          <Loader size="lg" />
+          <Text mt="md">Searching applications...</Text>
+        </Box>
+      )}
+
+      {results !== null && !loading && (
+        <Card p="lg" withBorder>
+          <Group mb="md" position="apart">
+            <Text weight={500}>
+              Search Results ({totalResults} applications found)
+            </Text>
+            {totalPages > 1 && (
+              <Text size="sm" color="dimmed">
+                Page {currentPage} of {totalPages}
+              </Text>
+            )}
+          </Group>
+
+          {results.length === 0 ? (
+            <Box ta="center" py="xl">
+              <FileText size={48} color="gray" />
+              <Text mt="md" color="dimmed">
+                No applications found matching your search criteria.
+              </Text>
+            </Box>
+          ) : (
+            <>
+              {results.map((app, index) => (
+                <Box key={app.id} mb="md">
+                  <Card p="md" withBorder>
+                    <Group position="apart" mb="sm">
+                      <Text weight={600} size="lg">
+                        {app.title}
+                      </Text>
+                      <Badge color={getStatusColor(app.status)} size="lg">
+                        {app.status}
+                      </Badge>
+                    </Group>
+
+                    <Grid>
+                      <Grid.Col span={6}>
+                        <Text size="sm" color="dimmed">Application ID</Text>
+                        <Text weight={500}>{app.id}</Text>
+                      </Grid.Col>
+                      <Grid.Col span={6}>
+                        <Text size="sm" color="dimmed">Token Number</Text>
+                        <Text weight={500}>{app.token_no || "Not assigned"}</Text>
+                      </Grid.Col>
+                      <Grid.Col span={6}>
+                        <Text size="sm" color="dimmed">Primary Applicant</Text>
+                        <Text weight={500}>{app.primary_applicant}</Text>
+                      </Grid.Col>
+                      <Grid.Col span={6}>
+                        <Text size="sm" color="dimmed">Submitted Date</Text>
+                        <Text weight={500}>
+                          {app.submitted_date
+                            ? new Date(app.submitted_date).toLocaleDateString()
+                            : "Not submitted"}
+                        </Text>
+                      </Grid.Col>
+                      <Grid.Col span={6}>
+                        <Text size="sm" color="dimmed">Decision Status</Text>
+                        <Badge color={app.decision_status === "Approved" ? "green" : app.decision_status === "Rejected" ? "red" : "gray"}>
+                          {app.decision_status}
+                        </Badge>
+                      </Grid.Col>
+                    </Grid>
+                  </Card>
+                  {index < results.length - 1 && <Divider my="md" />}
+                </Box>
+              ))}
+
+              {totalPages > 1 && (
+                <Group position="center" mt="lg">
+                  <Pagination
+                    value={currentPage}
+                    onChange={(page) => handleSearch(page)}
+                    total={totalPages}
+                    size="md"
+                  />
+                </Group>
+              )}
+            </>
+          )}
+        </Card>
+      )}
+    </Box>
+  );
+};
+
+export default SearchApplications;
\ No newline at end of file
diff --git a/src/Modules/Patent/components/Director/Dashboard/DirectorDashboard.jsx b/src/Modules/Patent/components/Director/Dashboard/DirectorDashboard.jsx
new file mode 100644
index 000000000..16c764383
--- /dev/null
+++ b/src/Modules/Patent/components/Director/Dashboard/DirectorDashboard.jsx
@@ -0,0 +1,189 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { Grid, Box, Text, Divider, Button, Paper } from "@mantine/core";
+import {
+  ClipboardText,
+  CheckCircle,
+  Eye,
+  Clock,
+  ChartBar,
+  Buildings,
+  Bell,
+} from "@phosphor-icons/react";
+import DownloadsSection from "./DirectorDownloads";
+import InsightsPage from "./DirectorInsights";
+import "../../../style/Director/DirectorDashboard.css";
+
+const TabKeys = {
+  NEW_APPLICATIONS: "1",
+  REVIEWED_APPLICATIONS: "2",
+  NOTIFICATIONS: "3",
+};
+
+function DirectorDashboard({ setActiveTab }) {
+  useEffect(() => {
+    const handleResize = () => {
+      // Window resize listener for future responsive features
+    };
+
+    handleResize(); // Check on initial render
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const featuresData = [
+    {
+      icon: <Eye size={28} id="pms-director-dashboard-feature-icon" />,
+      title: "Application Management and Review",
+      description:
+        "Track and review patent applications, view submission details, and monitor status updates.",
+    },
+    {
+      icon: <Clock size={28} id="pms-director-dashboard-feature-icon" />,
+      title: "Transparent Record-Keeping and Status Visibility",
+      description:
+        "Real-time status updates, detailed history tracking, and archive functionality.",
+    },
+    {
+      icon: <ChartBar size={28} id="pms-director-dashboard-feature-icon" />,
+      title: "Dashboard Analytics and Insights",
+      description:
+        "Analyze application volume, performance metrics, and trends to support data-driven decisions.",
+    },
+  ];
+
+  return (
+    <div id="pms-director-dashboard-container">
+      <Text id="pms-director-dashboard-title">
+        Patent & Copyright Management Dashboard
+      </Text>
+      <Box align="center">
+        <Paper
+          shadow="md"
+          radius="lg"
+          id="pms-director-dashboard-combined-section"
+          align="left"
+        >
+          <Text id="pms-director-dashboard-overview-title" ml={10}>
+            Patent Management System (PMS)
+            <Buildings size={24} id="pms-director-overview-icon" />
+          </Text>
+          <Text id="pms-director-dashboard-overview-text" m={10} mb={30}>
+            The Patent Management System at IIITDM Jabalpur focuses on fostering
+            research and development activities, particularly in IT-enabled
+            design and manufacturing, as well as the design of IT systems.
+          </Text>
+
+          <Box id="pms-director-dashboard-feature-box-container">
+            <Grid>
+              {featuresData.map((feature, index) => (
+                <Grid.Col span={12} key={index}>
+                  <Box id="pms-director-dashboard-feature-box-with-hover">
+                    <div id="pms-director-dashboard-feature-icon">
+                      {feature.icon}
+                    </div>
+                    <Text>
+                      <span id="pms-director-dashboard-feature-box-title">
+                        <b>{feature.title}</b>:{" "}
+                      </span>
+                      {feature.description}
+                    </Text>
+                  </Box>
+                </Grid.Col>
+              ))}
+            </Grid>
+          </Box>
+
+          <Divider my="xl" id="pms-dashboard-divider" />
+
+          <DownloadsSection />
+
+          <Divider my="xl" id="pms-dashboard-divider" />
+
+          <div style={{ marginLeft: "12px", marginRight: "12px" }}>
+            <InsightsPage />
+          </div>
+        </Paper>
+        <Grid mt="xl" id="pms-director-dashboard-grid">
+          <Grid.Col span={{ base: 12, sm: 6 }}>
+            <Box id="pms-director-dashboard-cards">
+              <Text id="pms-director-dashboard-card-title">
+                <ClipboardText size={20} id="pms-director-dashboard-icon" /> New
+                Applications
+              </Text>
+              <Divider id="pms-director-dashboard-card-divider" />
+              <Text size="sm" mt="sm">
+                View all applications forwarded by PCC Admin for your review.
+                okay
+              </Text>
+              <Button
+                variant="outline"
+                fullWidth
+                mt="md"
+                size="sm"
+                onClick={() => setActiveTab(TabKeys.NEW_APPLICATIONS)}
+                id="pms-director-dashboard-button"
+              >
+                View Submitted Applications
+              </Button>
+            </Box>
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, sm: 6 }}>
+            <Box id="pms-director-dashboard-cards">
+              <Text id="pms-director-dashboard-card-title">
+                <CheckCircle size={20} id="pms-director-dashboard-icon" />{" "}
+                Reviewed Applications
+              </Text>
+              <Divider id="pms-director-dashboard-card-divider" />
+              <Text size="sm" mt="sm">
+                Access applications that have been reviewed.
+              </Text>
+              <Button
+                variant="outline"
+                fullWidth
+                mt="md"
+                size="sm"
+                onClick={() => setActiveTab(TabKeys.REVIEWED_APPLICATIONS)}
+                id="pms-director-dashboard-button"
+              >
+                View Reviewed Applications
+              </Button>
+            </Box>
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, sm: 6 }}>
+            <Box id="pms-director-dashboard-cards">
+              <Text id="pms-director-dashboard-card-title">
+                <Bell size={20} id="pms-director-dashboard-icon" />{" "}
+                Notifications
+              </Text>
+              <Divider id="pms-director-dashboard-card-divider" />
+              <Text size="sm" mt="sm">
+                Stay updated with the latest notifications regarding your patent
+                applications.
+              </Text>
+              <Button
+                variant="outline"
+                fullWidth
+                mt="md"
+                size="sm"
+                onClick={() => setActiveTab(TabKeys.NOTIFICATIONS)}
+                id="pms-director-dashboard-button"
+              >
+                View Notifications
+              </Button>
+            </Box>
+          </Grid.Col>
+        </Grid>
+      </Box>
+    </div>
+  );
+}
+
+DirectorDashboard.propTypes = {
+  setActiveTab: PropTypes.func.isRequired,
+};
+
+export default DirectorDashboard;
diff --git a/src/Modules/Patent/components/Director/Dashboard/DirectorDownloads.jsx b/src/Modules/Patent/components/Director/Dashboard/DirectorDownloads.jsx
new file mode 100644
index 000000000..c571c3580
--- /dev/null
+++ b/src/Modules/Patent/components/Director/Dashboard/DirectorDownloads.jsx
@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from "react";
+import { Button, Text, Table, LoadingOverlay } from "@mantine/core";
+import { ArrowCircleDown } from "@phosphor-icons/react";
+import { fetchDocuments } from "../../../services/documentService.jsx";
+
+function DownloadsSection() {
+  const [downloadsData, setDownloadsData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  // Track which button is hovered (by id)
+  const [hoveredBtn, setHoveredBtn] = useState(null);
+
+  const loadDocuments = async () => {
+    setLoading(true);
+    try {
+      const data = await fetchDocuments();
+      setDownloadsData(data);
+    } catch (error) {
+      console.error("Error fetching documents:", error);
+      alert("Failed to load documents");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadDocuments();
+  }, []);
+
+  // Inline styles for button, including hover effect
+  const getButtonStyle = (isHovered) => ({
+    fontSize: "0.85rem",
+    backgroundColor: isHovered ? "#0073e6" : "#fff",
+    color: isHovered ? "#fff" : "#0073e6",
+    border: "1px solid #0073e6",
+    fontWeight: 500,
+    transition: "all 0.18s",
+    boxShadow: isHovered ? "0 2px 8px rgba(0,0,0,0.08)" : "none",
+  });
+
+  return (
+    <div
+      id="pms-director-downloads-container"
+      style={{
+        position: "relative",
+        margin: "10px",
+        width: "100%",
+        marginRight: "20px",
+      }}
+    >
+      <style>
+        {`
+          #pms-director-downloads-table {
+            align: center;
+            justify-content: space-between;
+            width: 98%;
+            border-collapse: collapse;
+          }
+
+          #pms-director-downloads-table th,
+          #pms-director-downloads-table td {
+            padding: 12px;
+            border: 1px solid #ddd;
+          }
+
+          #pms-director-downloads-table-thead{
+            background-color:rgb(236, 237, 237);
+          }
+
+          #pms-director-downloads-table tbody tr:nth-child(odd) {
+            background-color: #f9f9f9;
+          }
+
+          #pms-director-downloads-table tbody tr:nth-child(even) {
+            background-color: #ffffff;
+          }
+
+          #pms-director-downloads-table tbody tr:hover {
+            background-color: #f5f7f8;
+          }
+
+          #pms-director-section-title {
+            font-size: 24px;
+            font-weight: 600;
+            margin-top: 20px
+          }
+        `}
+      </style>
+
+      <LoadingOverlay visible={loading} overlayBlur={2} />
+
+      <Text align="left" id="pms-director-section-title" mb={10}>
+        Documents & Downloads
+      </Text>
+
+      <div style={{ overflowX: "auto", width: "100%" }}>
+        <Table id="pms-director-downloads-table">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th id="pms-director-downloads-table-thead">S.No.</Table.Th>
+              <Table.Th id="pms-director-downloads-table-thead">
+                Document Title
+              </Table.Th>
+              <Table.Th id="pms-director-downloads-table-thead">
+                Download
+              </Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <tbody>
+            {downloadsData.map((download, index) => (
+              <tr key={download.id}>
+                <td>{index + 1}</td>
+                <td>{download.title}</td>
+                <td style={{ textAlign: "center" }}>
+                  <Button
+                    component="a"
+                    href={download.link}
+                    target="_blank"
+                    color="blue"
+                    variant="outline"
+                    id="pms-director-download-button"
+                    style={getButtonStyle(hoveredBtn === download.id)}
+                    onMouseEnter={() => setHoveredBtn(download.id)}
+                    onMouseLeave={() => setHoveredBtn(null)}
+                  >
+                    <ArrowCircleDown size={16} style={{ marginRight: "8px" }} />
+                    Download
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+export default DownloadsSection;
diff --git a/src/Modules/Patent/components/Director/Dashboard/DirectorInsights.jsx b/src/Modules/Patent/components/Director/Dashboard/DirectorInsights.jsx
new file mode 100644
index 000000000..0fa575b93
--- /dev/null
+++ b/src/Modules/Patent/components/Director/Dashboard/DirectorInsights.jsx
@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+import { Table, Select, Button, Text, Container } from "@mantine/core";
+import { DownloadSimple } from "@phosphor-icons/react";
+import "../../../style/Pcc_Admin/InsightsPage.css";
+
+function InsightsPage() {
+  const [selectedYear, setSelectedYear] = useState("2021");
+
+  const applicationsByYear = {
+    2021: [
+      { label: "Pending", count: 100, color: "#0056b3" },
+      { label: "Approved", count: 70, color: "#32cd32" },
+      { label: "Reverted", count: 30, color: "#ff6347" },
+    ],
+    2022: [
+      { label: "Pending", count: 120, color: "#0056b3" },
+      { label: "Approved", count: 80, color: "#32cd32" },
+      { label: "Reverted", count: 40, color: "#ff6347" },
+    ],
+  };
+
+  const applications = applicationsByYear[selectedYear] || [];
+  const totalApplications = applications.reduce(
+    (sum, app) => sum + app.count,
+    0,
+  );
+
+  const handleDownload = () => {
+    const csvContent = `Status,Count,Percentage\n${applications
+      .map(
+        (app) =>
+          `${app.label},${app.count},${(
+            (app.count / totalApplications) *
+            100
+          ).toFixed(2)}%`,
+      )
+      .join("\n")}`;
+
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.setAttribute("href", url);
+    link.setAttribute("download", `Applications_${selectedYear}.csv`);
+    link.click();
+  };
+
+  return (
+    <Container id="pms-insights-page">
+      <Text order={2} align="left" id="pms-page-title">
+        Applications Overview - {selectedYear}
+      </Text>
+      <Text align="left" size="sm" mb="lg" id="pms-description">
+        Select a year from the dropdown below to view the statistics of
+        applications for that year. You can also download the data as a CSV file
+        for further analysis.
+      </Text>
+
+      <div id="pms-filter">
+        <Text size="sm" weight={600}>
+          Select Year:
+        </Text>
+        <Select
+          id="pms-year-select"
+          data={Object.keys(applicationsByYear)}
+          value={selectedYear}
+          onChange={(value) => setSelectedYear(value)}
+          radius="md"
+          size="sm"
+        />
+      </div>
+
+      <div id="pms-insights-content">
+        <div id="pms-chart-section">
+          <svg
+            width="100%"
+            height="300"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="xMidYMid meet"
+          >
+            {
+              applications.reduce(
+                (acc, app, index) => {
+                  const { startAngle } = acc;
+                  const sweepAngle = (app.count / totalApplications) * 360;
+                  const endAngle = startAngle + sweepAngle;
+
+                  const largeArcFlag = sweepAngle > 180 ? 1 : 0;
+                  const [startX, startY] = [
+                    50 + 40 * Math.cos((Math.PI * startAngle) / 180),
+                    50 + 40 * Math.sin((Math.PI * startAngle) / 180),
+                  ];
+                  const [endX, endY] = [
+                    50 + 40 * Math.cos((Math.PI * endAngle) / 180),
+                    50 + 40 * Math.sin((Math.PI * endAngle) / 180),
+                  ];
+
+                  const midAngle = startAngle + sweepAngle / 2;
+                  const [textX, textY] = [
+                    50 + 25 * Math.cos((Math.PI * midAngle) / 180),
+                    50 + 25 * Math.sin((Math.PI * midAngle) / 180),
+                  ];
+
+                  acc.slices.push(
+                    <g key={index}>
+                      <path
+                        d={`M50,50 L${startX},${startY} A40,40 0 ${largeArcFlag} 1 ${endX},${endY} Z`}
+                        fill={app.color}
+                      />
+                      <text
+                        x={textX}
+                        y={textY}
+                        fontSize="4"
+                        fill="#fff"
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        {((app.count / totalApplications) * 100).toFixed(1)}%
+                      </text>
+                    </g>,
+                  );
+
+                  acc.startAngle = endAngle;
+                  return acc;
+                },
+                { slices: [], startAngle: 0 },
+              ).slices
+            }
+          </svg>
+
+          <div id="pms-legend">
+            {applications.map((app, index) => (
+              <div key={index} id="pms-legend-item">
+                <div
+                  id="pms-legend-color"
+                  style={{ backgroundColor: app.color }}
+                />
+                <span id="pms-legend-label">{app.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div id="pms-table-section">
+          <Text id="pms-table-title" align="center" mb="md">
+            Applications Data
+          </Text>
+          <Table highlightOnHover>
+            <thead>
+              <tr>
+                <th>Status</th>
+                <th>Count</th>
+                <th>Percentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              {applications.map((app, index) => (
+                <tr key={index}>
+                  <td>{app.label}</td>
+                  <td>{app.count}</td>
+                  <td>{((app.count / totalApplications) * 100).toFixed(2)}%</td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+      </div>
+
+      <div id="pms-download-csv-button">
+        <Button
+          radius="md"
+          size="md"
+          variant="outline"
+          leftIcon={<DownloadSimple size={16} />}
+          onClick={handleDownload}
+          id="pms-download-button"
+        >
+          Download CSV
+        </Button>
+      </div>
+    </Container>
+  );
+}
+
+export default InsightsPage;
diff --git a/src/Modules/Patent/components/Director/DirectorMainDashboard.jsx b/src/Modules/Patent/components/Director/DirectorMainDashboard.jsx
new file mode 100644
index 000000000..43a404c8f
--- /dev/null
+++ b/src/Modules/Patent/components/Director/DirectorMainDashboard.jsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Container, Loader, Flex, Select } from "@mantine/core";
+import { useDispatch } from "react-redux";
+import { SortAscending } from "@phosphor-icons/react";
+import CustomBreadcrumbs from "../../../../components/Breadcrumbs.jsx";
+import ModuleTabs from "../../../../components/moduleTabs.jsx";
+import DirectorDashboard from "./Dashboard/DirectorDashboard.jsx";
+import SubmittedApplications from "./NewApplications/SubmittedApplications.jsx";
+import RecentsView from "./ReviewedApplications/RecentsView.jsx";
+import PatentApplication from "./NewApplications/StatusView.jsx";
+import DirectorNotifications from "./Notifications/DirectorNotifications.jsx"; // Import the notification component
+
+const categories = ["Most Recent", "Tags", "Title"];
+
+function DirectorMainDashboard() {
+  const [activeTab, setActiveTab] = useState("0");
+  const [sortedBy, setSortedBy] = useState("Most Recent");
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  // Define your tabs here
+  const tabItems = [
+    { title: "Dashboard" }, // Tab 0
+    { title: "New Applications" }, // Tab 1
+    { title: "Reviewed Applications" }, // Tab 2
+    { title: "Notifications" }, // Tab 3 
+  ];
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = localStorage.getItem("authToken");
+      if (!token) return console.error("No authentication token found!");
+
+      try {
+        setLoading(true);
+        // Fetch data logic here if needed
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [dispatch]);
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+      <Flex justify="space-between" align="center" mt="lg">
+        <ModuleTabs
+          tabs={tabItems}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          badges={[]}
+        />
+
+        <Flex align="center" mt="md" rowGap="1rem" columnGap="4rem" wrap="wrap">
+          <Select
+            classNames={{
+              option: "select-options",
+              input: "select-inputs",
+            }}
+            variant="filled"
+            leftSection={<SortAscending />}
+            data={categories}
+            value={sortedBy}
+            onChange={setSortedBy}
+            placeholder="Sort By"
+          />
+        </Flex>
+      </Flex>
+
+      {/* Render content based on the active tab */}
+      <Grid mt="xl">
+        {loading ? (
+          <Container py="xl">
+            <Loader size="lg" />
+          </Container>
+        ) : (
+          <>
+            {activeTab === "0" && (
+              <DirectorDashboard setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "1" && (
+              <SubmittedApplications setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "1.1" && (
+              <PatentApplication setActiveTab={setActiveTab} />
+            )}
+            {activeTab === "2" && <RecentsView setActiveTab={setActiveTab} />}
+            {activeTab === "3" && <DirectorNotifications />}{" "}
+            {/* Render notifications */}
+          </>
+        )}
+      </Grid>
+    </>
+  );
+}
+
+export default DirectorMainDashboard;
diff --git a/src/Modules/Patent/components/Director/NewApplications/StatusView.jsx b/src/Modules/Patent/components/Director/NewApplications/StatusView.jsx
new file mode 100644
index 000000000..95e978612
--- /dev/null
+++ b/src/Modules/Patent/components/Director/NewApplications/StatusView.jsx
@@ -0,0 +1,719 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import {
+  Container,
+  Text,
+  Card,
+  Grid,
+  Button,
+  Loader,
+  Alert,
+  Title,
+  Textarea,
+  Group,
+} from "@mantine/core";
+import { ArrowLeft, DownloadSimple } from "phosphor-react";
+import "../../../style/Director/StatusView.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+function FormField({ label, value }) {
+  return (
+    <div id="pms-new-status-form-field">
+      <Text id="pms-new-status-field-label">{label}</Text>
+      <Text id="pms-new-status-field-value">{value || "Not provided"}</Text>
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+function FileDownloadButton({ fileUrl, label, disabled }) {
+  if (!fileUrl || fileUrl === "null" || disabled) {
+    return (
+      <Button
+        variant="outline"
+        color="gray"
+        leftIcon={<DownloadSimple size={18} />}
+        disabled
+      >
+        No {label} Available
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      component="a"
+      href={fileUrl}
+      download
+      variant="outline"
+      color="blue"
+      leftIcon={<DownloadSimple size={18} />}
+    >
+      Download {label}
+    </Button>
+  );
+}
+
+FileDownloadButton.propTypes = {
+  fileUrl: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+function FormFieldWithDownload({ label, value, fileUrl, fileLabel }) {
+  return (
+    <div id="pms-new-status-form-field-with-download">
+      <div id="pms-new-status-field-label-container">
+        <Text id="pms-new-status-field-label">{label}</Text>
+        <Text id="pms-new-status-field-value">{value || "Not provided"}</Text>
+      </div>
+      <div id="pms-new-status-download-button-wrapper">
+        <FileDownloadButton
+          fileUrl={fileUrl}
+          label={fileLabel}
+          disabled={!fileUrl || fileUrl === "null"}
+        />
+      </div>
+    </div>
+  );
+}
+
+FormFieldWithDownload.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fileUrl: PropTypes.string,
+  fileLabel: PropTypes.string.isRequired,
+};
+
+function FormSection({ title, children }) {
+  return (
+    <Card
+      id="pms-new-status-detail-section"
+      p="lg"
+      radius="md"
+      withBorder
+      mb="md"
+    >
+      <Title id="pms-new-status-section-title">{title}</Title>
+      {children}
+    </Card>
+  );
+}
+
+FormSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function PatentApplication() {
+  const [applicationData, setApplicationData] = useState(null);
+  const [budgetData, setBudgetData] = useState(null);
+  const [budgetActionLoading, setBudgetActionLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [applicationId, setApplicationId] = useState(null);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [feedback, setFeedback] = useState("");
+  const API_BASE_URL = `${host}/patentsystem`;
+  const authToken = localStorage.getItem("authToken");
+  const handleAccept = async () => {
+    try {
+      await axios.post(
+        `${API_BASE_URL}/director/application/accept`,
+        {
+          application_id: applicationId,
+          comments: feedback,
+        },
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      alert("Application Approved successfully!");
+      window.history.back();
+    } catch (err) {
+      console.error("Error in approving application:", err);
+      alert(`Failed to approve: ${err.response?.data?.error || err.message}`);
+    }
+  };
+  const handleReject = async () => {
+    if (!feedback || feedback.trim().length < 50) {
+      alert("Please provide feedback of at least 50 characters before rejecting.");
+      return;
+    }
+    try {
+      await axios.post(
+        `${API_BASE_URL}/director/application/reject`,
+        { application_id: applicationId, comments: feedback, decision: "Reject" },
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      alert("Application Reverted successfully!");
+      window.history.back();
+    } catch (err) {
+      console.error("Error in Reverting application:", err);
+      alert(`Failed to Revert: ${err.response?.data?.error || err.message}`);
+    }
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const storedId = localStorage.getItem("selectedApplicationId");
+    if (storedId) {
+      const idParts = storedId.split("_");
+      const numericId = idParts.length > 1 ? idParts[1] : storedId;
+      setApplicationId(numericId);
+    } else {
+      setError("No application selected - Please choose an application first");
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchApplicationDetails = async () => {
+      if (!applicationId) return;
+
+      try {
+        setLoading(true);
+        const response = await axios.post(
+          `${API_BASE_URL}/director/application/details`,
+          { application_id: applicationId },
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+              "Content-Type": "application/json",
+            },
+          },
+        );
+
+        if (response.data) {
+          setApplicationData(response.data);
+          setApplicationId(response.data.application_id);
+          setError(null);
+        }
+      } catch (err) {
+        console.error("Error fetching details:", err);
+        setError(
+          `Failed to load details: ${err.response?.data?.error || err.message}`,
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const fetchBudgetDetails = async () => {
+      if (!applicationId) return;
+      try {
+        const res = await axios.get(`${API_BASE_URL}/director/budget/${applicationId}/decision/`, {
+          headers: { Authorization: `Token ${authToken}` },
+        });
+        if (res.data) {
+          setBudgetData(res.data);
+        }
+      } catch (err) {
+        // Ignore 404s
+      }
+    };
+
+    fetchApplicationDetails();
+    fetchBudgetDetails();
+  }, [applicationId, authToken]);
+
+  const handleBudgetDecision = async (approve) => {
+    try {
+      setBudgetActionLoading(true);
+      await axios.post(
+        `${API_BASE_URL}/director/budget/${applicationId}/decision/`,
+        { approve, remarks: feedback || "Director review" },
+        { headers: { Authorization: `Token ${authToken}` } }
+      );
+      // Refresh budget
+      const res = await axios.get(`${API_BASE_URL}/director/budget/${applicationId}/decision/`, {
+        headers: { Authorization: `Token ${authToken}` },
+      });
+      if (res.data) setBudgetData(res.data);
+      alert(`Budget ${approve ? "Approved" : "Denied"} successfully`);
+    } catch (err) {
+      alert("Failed to record budget decision.");
+    } finally {
+      setBudgetActionLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      localStorage.removeItem("selectedApplicationId");
+      localStorage.removeItem("selectedApplicationToken");
+    };
+  }, []);
+
+  if (loading) {
+    return (
+      <Container id="pms-new-status-loader-container">
+        <Loader size="lg" color="blue" />
+        <Text mt="md">Loading application details...</Text>
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container id="pms-new-status-error-container">
+        <Alert color="red" title="Error">
+          {error}
+        </Alert>
+        <Button mt="md" onClick={() => window.history.back()}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  if (!applicationData) {
+    return (
+      <Container id="pms-new-status-error-container">
+        <Alert color="blue" title="No Data">
+          No application data found
+        </Alert>
+        <Button mt="md" onClick={() => window.history.back()}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  const {
+    application_id,
+    title,
+    token_no,
+    primary_applicant_name,
+    status,
+    decision_status,
+    comments,
+    inventors: applicants,
+    section_I,
+    section_II,
+    section_III,
+    dates,
+    last_updated_at,
+  } = applicationData;
+
+  const formatDate = (dateString, fallbackText = "Not recorded") => {
+    if (!dateString) return fallbackText;
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  return (
+    <Container
+      className={`pms-new-status-director-detail-container ${isMobile ? "mobile-form-container" : ""}`}
+    >
+      <Button
+        onClick={() => window.history.back()}
+        variant="outline"
+        color="blue"
+        leftIcon={<ArrowLeft size={18} />}
+        id="pms-new-status-director-view-back-button"
+      >
+        Back
+      </Button>
+
+      <div id="pms-new-status-form-content">
+        <FormSection title="Application Overview">
+          <Grid>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Application ID:" value={application_id} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Title:" value={title} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField
+                label="Primary Applicant:"
+                value={primary_applicant_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField
+                label="Submission Date:"
+                value={formatDate(dates?.submitted_date)}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Token Number:" value={token_no} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Status:" value={status} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Decision Status:" value={decision_status} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField
+                label="Last Updated:"
+                value={formatDate(last_updated_at)}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Comments:" value={comments} />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        {budgetData && (
+          <FormSection title={budgetData.decision === "Escalated to Director" ? "Escalated Budget Approval" : "Budget Information"}>
+            {budgetData.decision === "Escalated to Director" && (
+              <Text weight={500} mb="md" color="orange">This application has an escalated budget that requires your approval.</Text>
+            )}
+            <Grid mb="md">
+              <Grid.Col span={12} md={3}>
+                <FormField label="Filing Cost:" value={`₹${budgetData.filing_cost}`} />
+              </Grid.Col>
+              <Grid.Col span={12} md={3}>
+                <FormField label="Attorney Fees:" value={`₹${budgetData.attorney_fees}`} />
+              </Grid.Col>
+              <Grid.Col span={12} md={3}>
+                <FormField label="Admin Cost:" value={`₹${budgetData.administrative_cost}`} />
+              </Grid.Col>
+              <Grid.Col span={12} md={3}>
+                <FormField label="Total Cost:" value={`₹${budgetData.total_cost}`} />
+              </Grid.Col>
+              <Grid.Col span={12} md={6}>
+                <FormField label="Status / Decision:" value={budgetData.decision} />
+              </Grid.Col>
+              <Grid.Col span={12} md={6}>
+                <FormField label="Budget Remarks:" value={budgetData.remarks || "No remarks provided"} />
+              </Grid.Col>
+            </Grid>
+            {budgetData.decision === "Escalated to Director" && (
+              <div style={{ display: "flex", gap: "10px", justifyContent: "flex-end" }}>
+                <Button
+                  color="red"
+                  onClick={() => handleBudgetDecision(false)}
+                  loading={budgetActionLoading}
+                >
+                  Deny Budget
+                </Button>
+                <Button
+                  color="green"
+                  onClick={() => handleBudgetDecision(true)}
+                  loading={budgetActionLoading}
+                >
+                  Approve Budget
+                </Button>
+              </div>
+            )}
+          </FormSection>
+        )}
+
+        <FormSection title="Key Dates">
+          <div id="pms-new-status-key-dates-grid">
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">Submitted</div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(dates?.submitted_date, "Not yet submitted")}
+              </div>
+            </div>
+
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">
+                Forwarded to Director
+              </div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(
+                  dates?.forwarded_to_director_date,
+                  "Not yet forwarded",
+                )}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">Director Approval</div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(dates?.director_approval_date, "Not yet approved")}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">
+                Patentability Check Started
+              </div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(
+                  dates?.patentability_check_start_date,
+                  "Not started",
+                )}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">
+                Patentability Check Completed
+              </div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(
+                  dates?.patentability_check_completed_date,
+                  "Not completed",
+                )}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">
+                Search Report Generated
+              </div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(
+                  dates?.search_report_generated_date,
+                  "Not generated",
+                )}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">Patent Filed</div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(dates?.patent_filed_date, "Not filed")}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">Patent Published</div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(dates?.patent_published_date, "Not published")}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">Final Decision</div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(dates?.final_decision_date, "No final decision")}
+              </div>
+            </div>
+            <div id="pms-new-status-key-date-card">
+              <div id="pms-new-status-key-date-title">Decision Date</div>
+              <div id="pms-new-status-key-date-value">
+                {formatDate(dates?.decision_date, "No decision")}
+              </div>
+            </div>
+          </div>
+        </FormSection>
+        <FormSection title="Section I: Administrative and Technical Details">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Type of IP:" value={section_I?.type_of_ip} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Area:" value={section_I?.area} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Problem:" value={section_I?.problem} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Objective:" value={section_I?.objective} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Novelty:" value={section_I?.novelty} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Advantages:" value={section_I?.advantages} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Is Tested:"
+                value={
+                  section_I?.is_tested === true
+                    ? "Yes"
+                    : section_I?.is_tested === false
+                      ? "No"
+                      : "Not specified"
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField
+                label="Applications:"
+                value={section_I?.applications}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormFieldWithDownload
+                label="Proof of Concept Details:"
+                value="Proof of Concept Documentation"
+                fileUrl={section_I?.poc_details}
+                fileLabel="Proof of Concept"
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+        <FormSection title="Section II: IPR Ownership">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Details:"
+                value={section_II?.funding_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Source:"
+                value={section_II?.funding_source}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormFieldWithDownload
+                label="Source Agreement:"
+                value="Source Agreement Document"
+                fileUrl={section_II?.source_agreement}
+                fileLabel="Agreement Document"
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField
+                label="Publication Details:"
+                value={section_II?.publication_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="MOU Details:" value={section_II?.mou_details} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormFieldWithDownload
+                label="MOU File:"
+                value="MOU Document"
+                fileUrl={section_II?.mou_file}
+                fileLabel="MOU Document"
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField
+                label="Research Details:"
+                value={section_II?.research_details}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+        <FormSection title="Section III: Commercialization">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Company Name:"
+                value={section_III?.company_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Person:"
+                value={section_III?.contact_person}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Number:"
+                value={section_III?.contact_no}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Development Stage:"
+                value={section_III?.development_stage}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormFieldWithDownload
+                label="Form III:"
+                value="Form III Document"
+                fileUrl={section_III?.form_iii}
+                fileLabel="Form III"
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+        <FormSection title="Applicants">
+          {applicants?.length > 0 ? (
+            <Grid>
+              {applicants.map((applicant, index) => (
+                <Grid.Col key={index} span={12} md={6}>
+                  <Card id="pms-new-status-applicant-card">
+                    <Text weight={600} size="lg" mb="xs">
+                      Applicant {index + 1}
+                    </Text>
+                    <FormField label="Name:" value={applicant.name} />
+                    <FormField label="Email:" value={applicant.email} />
+                    <FormField label="Mobile:" value={applicant.mobile} />
+                    <FormField label="Address:" value={applicant.address} />
+                    <FormField
+                      label="Share Percentage:"
+                      value={
+                        applicant.percentage_share
+                          ? `${applicant.percentage_share}%`
+                          : ""
+                      }
+                    />
+                  </Card>
+                </Grid.Col>
+              ))}
+            </Grid>
+          ) : (
+            <Text color="dimmed">No applicant information available</Text>
+          )}
+        </FormSection>
+        <FormSection title="Application Decision">
+          <div id="pms-new-status-decision-section">
+            <div id="pms-new-status-assign-attorney-section">
+              <Text size="lg" weight={500} mb="sm">
+                Director Feedback
+              </Text>
+              <Textarea
+                placeholder="Provide your feedback (minimum 50 characters for rejection/revision)"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                minRows={3}
+                maxRows={6}
+                mb="md"
+              />
+            </div>
+
+            <div id="pms-new-status-decision-buttons">
+              <Group spacing="md">
+                <Button
+                  color="green"
+                  size="md"
+                  onClick={handleAccept}
+                  id="pms-new-status-decision-button"
+                >
+                  Approve
+                </Button>
+                <Button
+                  color="red"
+                  size="md"
+                  onClick={handleReject}
+                  id="pms-new-status-decision-button"
+                >
+                  Reject
+                </Button>
+              </Group>
+            </div>
+          </div>
+        </FormSection>
+      </div>
+    </Container>
+  );
+}
+
+export default PatentApplication;
diff --git a/src/Modules/Patent/components/Director/NewApplications/SubmittedApplications.jsx b/src/Modules/Patent/components/Director/NewApplications/SubmittedApplications.jsx
new file mode 100644
index 000000000..3731ab698
--- /dev/null
+++ b/src/Modules/Patent/components/Director/NewApplications/SubmittedApplications.jsx
@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  ScrollArea,
+  Table,
+  Title,
+  Text,
+  Loader,
+  Alert,
+} from "@mantine/core";
+import { Eye, ArrowsClockwise } from "@phosphor-icons/react";
+import axios from "axios";
+import PropTypes from "prop-types";
+import "../../../style/Director/SubmittedApplications.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+function SubmittedApplications({ setActiveTab }) {
+  const [applicationsData, setApplicationsData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const authToken = localStorage.getItem("authToken");
+
+  const columnNames = [
+    "S.No.",
+    "Application ID",
+    "Token Number",
+    "Patent Title",
+    "Submitted By",
+    "Department",
+    "Date-Time",
+    "Actions",
+  ];
+
+  const fetchApplicationData = async (showRefresh = false) => {
+    if (!authToken) {
+      setError("Authorization token is missing. Please login again.");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (showRefresh) {
+        setIsRefreshing(true);
+      } else {
+        setLoading(true);
+      }
+
+      const response = await axios.get(
+        `${API_BASE_URL}/director/applications/new/`,
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+          },
+        },
+      );
+
+      const formattedData = Object.entries(response.data.applications).map(
+        ([key, app], index) => ({
+          id: index + 1,
+          applicationId: key,
+          tokenNumber: app.token_no,
+          title: app.title,
+          submitter: app.submitted_by,
+          Department: app.department,
+          date: new Date(app.forwarded_on).toLocaleString(),
+        }),
+      );
+
+      setApplicationsData(formattedData);
+      setError(null);
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to fetch applications");
+      console.error("Error fetching applications:", err);
+    } finally {
+      setLoading(false);
+      if (showRefresh) {
+        setIsRefreshing(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchApplicationData();
+  }, [authToken]);
+
+  const handleViewDetails = (application) => {
+    localStorage.setItem("selectedApplicationId", application.applicationId);
+    localStorage.setItem("selectedApplicationToken", application.tokenNumber);
+    setActiveTab("1.1");
+  };
+
+  const handleRefresh = () => {
+    fetchApplicationData(true);
+  };
+
+  const renderApplicationsTable = () => {
+    if (loading) {
+      return (
+        <Box id="pms-director-submitted-loader-container">
+          <Loader size="lg" color="blue" />
+          <Text mt={10}>Loading applications...</Text>
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Alert color="red" title="Error loading applications">
+          {error}
+        </Alert>
+      );
+    }
+
+    if (applicationsData.length === 0) {
+      return (
+        <Alert color="blue" title="No applications">
+          There are no applications forwarded for review at this time.
+        </Alert>
+      );
+    }
+
+    return (
+      <ScrollArea id="pms-director-submitted-tableWrapper">
+        <Table
+          highlightOnHover
+          striped
+          withBorder
+          id="pms-director-submitted-styledTable"
+        >
+          <thead id="pms-director-submitted-fusionTableHeader">
+            <tr>
+              {columnNames.map((columnName, index) => (
+                <th key={index}>{columnName}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {applicationsData.map((application) => (
+              <tr
+                key={application.applicationId}
+                id="pms-director-submitted-tableRow"
+              >
+                <td>{application.id}</td>
+                <td>{application.applicationId}</td>
+                <td>{application.tokenNumber}</td>
+                <td title={application.title}>{application.title}</td>
+                <td>{application.submitter}</td>
+                <td>{application.Department}</td>
+                <td>{application.date}</td>
+                <td>
+                  <Button
+                    variant="outline"
+                    color="blue"
+                    size="sm"
+                    onClick={() => handleViewDetails(application)}
+                    id="pms-director-submitted-viewButton"
+                  >
+                    <Eye size={16} /> <span>View</span>
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <Box id="pms-director-submitted-director-submitted-apps-container">
+      {/* Header with title */}
+      <Box id="pms-director-submitted-director-submitted-apps-header">
+        <Title
+          order={2}
+          id="pms-director-submitted-director-submitted-apps-title"
+        >
+          Applications Forwarded by PCC Admin
+        </Title>
+      </Box>
+
+      {/* Description text */}
+      <Box id="pms-director-submitted-director-submitted-apps-description">
+        {/* Refresh button */}
+        <Button
+          id="pms-director-submitted-director-submitted-apps-refresh"
+          onClick={handleRefresh}
+          loading={isRefreshing}
+          leftIcon={<ArrowsClockwise size={16} />}
+        >
+          {isRefreshing ? "Refreshing..." : "Refresh"}
+        </Button>
+      </Box>
+
+      <Box id="pms-director-submitted-director-submitted-apps-outer">
+        {renderApplicationsTable()}
+      </Box>
+    </Box>
+  );
+}
+
+SubmittedApplications.propTypes = {
+  setActiveTab: PropTypes.func.isRequired,
+};
+
+export default SubmittedApplications;
diff --git a/src/Modules/Patent/components/Director/Notifications/DirectorNotifications.jsx b/src/Modules/Patent/components/Director/Notifications/DirectorNotifications.jsx
new file mode 100644
index 000000000..3f331f2cb
--- /dev/null
+++ b/src/Modules/Patent/components/Director/Notifications/DirectorNotifications.jsx
@@ -0,0 +1,196 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Card, Button, Text, Box, SimpleGrid } from "@mantine/core";
+import notificationsData from "../../../data/director/notificationsData";
+
+const styles = {
+  notificationCard: {
+    padding: "1.3rem 2rem",
+    marginBottom: "8px",
+    boxShadow: "0 3px 6px rgba(0, 0, 0, 0.10)",
+    borderRadius: "8px",
+    backgroundColor: "#fff",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    borderLeft: "8px solid #3182ce",
+  },
+  notificationTitle: {
+    fontSize: "20px",
+    fontWeight: 500,
+    marginBottom: "2.2px",
+    lineHeight: 1.2,
+  },
+  notificationStatus: {
+    fontSize: "0.97rem",
+    fontWeight: 500,
+    marginBottom: "10px",
+    lineHeight: 1.2,
+  },
+  notificationToken: {
+    fontSize: "0.83rem",
+    color: "#666",
+    marginBottom: "5px",
+    lineHeight: 1.2,
+  },
+  notificationDate: {
+    fontSize: "0.83rem",
+    color: "#666",
+    marginBottom: "10px",
+    lineHeight: 1.2,
+  },
+  notificationDescription: {
+    fontSize: "0.83rem",
+    color: "#444",
+    padding: "0",
+    flex: 1,
+    marginBottom: "8px",
+    lineHeight: 1.25,
+  },
+  notificationActions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: "0.4rem",
+    marginTop: "0.3rem",
+  },
+  actionButton: {
+    flex: "1",
+    minWidth: "200px",
+    fontWeight: "500",
+    fontSize: "0.9rem",
+    padding: "10px 0",
+    height: "35px",
+    backgroundColor: "#fff",
+    color: "#0073e6",
+    border: "1px solid #0073e6",
+    transition: "background 0.18s, color 0.18s",
+    cursor: "pointer",
+  },
+  actionButtonHover: {
+    backgroundColor: "#0073e6",
+    color: "#fff",
+    border: "1px solid #0073e6",
+  },
+  pageTitle: {
+    fontSize: "24px",
+    marginTop: "-6px",
+    fontWeight: 600,
+    marginBottom: "8px",
+    color: "#1a1b1e",
+    lineHeight: 1.2,
+  },
+  container: {
+    width: "100%",
+    padding: "0",
+    maxWidth: "1800px",
+    margin: "0 50px",
+  },
+};
+
+function NotificationCard({
+  id,
+  token,
+  title,
+  status,
+  description,
+  date,
+  time,
+  color,
+  onMarkAsRead,
+  isRead,
+}) {
+  const [hover, setHover] = useState(false);
+
+  const getStatusColor = () => color || "#3182ce";
+  const buttonStyle = {
+    ...styles.actionButton,
+    ...(hover ? styles.actionButtonHover : {}),
+    ...(isRead && {
+      backgroundColor: "#f3f3f3",
+      color: "#888",
+      border: "1px solid #ddd",
+    }),
+  };
+
+  return (
+    <Card style={styles.notificationCard}>
+      <Text style={styles.notificationTitle}>{title}</Text>
+      <Text style={{ ...styles.notificationStatus, color: getStatusColor() }}>
+        {status}
+      </Text>
+      <Text style={styles.notificationToken}>{token}</Text>
+      <Text style={styles.notificationDate}>{`${date} | ${time}`}</Text>
+      <Text style={styles.notificationDescription}>{description}</Text>
+      <div style={styles.notificationActions}>
+        <Button
+          variant={isRead ? "default" : "outline"}
+          style={buttonStyle}
+          onClick={() => onMarkAsRead(id)}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+        >
+          {isRead ? "Remove Notification" : "Mark as Read"}
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+NotificationCard.propTypes = {
+  id: PropTypes.number.isRequired,
+  token: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  time: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  onMarkAsRead: PropTypes.func.isRequired,
+  isRead: PropTypes.bool.isRequired,
+};
+
+function DirectorNotifications() {
+  const [notifications, setNotifications] = useState(notificationsData);
+  const [readNotifications, setReadNotifications] = useState([]);
+
+  const handleMarkAsRead = (id) => {
+    if (readNotifications.includes(id)) {
+      setNotifications(notifications.filter((n) => n.id !== id));
+      setReadNotifications(readNotifications.filter((readId) => readId !== id));
+    } else {
+      setReadNotifications([...readNotifications, id]);
+    }
+  };
+
+  return (
+    <Box style={styles.container}>
+      <Text style={styles.pageTitle}>Notifications</Text>
+      <Box style={{ width: "100%" }}>
+        <SimpleGrid
+          cols={{ base: 1, sm: 2, lg: 2 }}
+          spacing={{ base: "md", sm: "xl" }}
+          verticalSpacing={{ base: "md", sm: "xl" }}
+        >
+          {notifications.map((notification) => (
+            <NotificationCard
+              token={notification.token}
+              id={notification.id}
+              title={notification.title}
+              status={notification.status}
+              description={notification.description}
+              date={notification.date}
+              time={notification.time}
+              color={notification.color}
+              onMarkAsRead={handleMarkAsRead}
+              isRead={readNotifications.includes(notification.id)}
+              key={notification.id}
+            />
+          ))}
+        </SimpleGrid>
+      </Box>
+    </Box>
+  );
+}
+
+export default DirectorNotifications;
diff --git a/src/Modules/Patent/components/Director/ReviewedApplications/RecentsView.jsx b/src/Modules/Patent/components/Director/ReviewedApplications/RecentsView.jsx
new file mode 100644
index 000000000..2e23e4480
--- /dev/null
+++ b/src/Modules/Patent/components/Director/ReviewedApplications/RecentsView.jsx
@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  ScrollArea,
+  Table,
+  Title,
+  Text,
+  Loader,
+  Alert,
+  Button,
+} from "@mantine/core";
+import { ArrowsClockwise } from "@phosphor-icons/react";
+import axios from "axios";
+import "../../../style/Director/RecentsView.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+function ReviewedApplications() {
+  const [applicationsData, setApplicationsData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const authToken = localStorage.getItem("authToken");
+
+  const columnNames = [
+    "S.No.",
+    "Application ID",
+    "Token Number",
+    "Patent Title",
+    "Submitted By",
+    "Department",
+    "Arrival Date",
+    "Reviewed Date",
+    "Current Status",
+  ];
+
+  const fetchReviewedApplications = async (showRefresh = false) => {
+    if (!authToken) {
+      setError("Authorization token is missing. Please login again.");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      if (showRefresh) {
+        setIsRefreshing(true);
+      } else {
+        setLoading(true);
+      }
+
+      const response = await axios.get(
+        `${API_BASE_URL}/director/reviewedapplications`,
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+          },
+        },
+      );
+
+      const formattedData = Object.entries(response.data.applications).map(
+        ([key, app], index) => ({
+          id: index + 1,
+          applicationId: key,
+          tokenNumber: app.token_no,
+          title: app.title,
+          submitter: app.submitted_by,
+          department: app.department,
+          arrivalDate:
+            app.forwarded_on && app.forwarded_on !== "Unknown"
+              ? new Date(app.forwarded_on).toLocaleDateString()
+              : "N/A",
+          reviewedDate:
+            app.decision_date && app.decision_date !== "Unknown"
+              ? new Date(app.decision_date).toLocaleDateString()
+              : "N/A",
+          currentStatus: app.status,
+        }),
+      );
+      setApplicationsData(formattedData);
+    } catch (err) {
+      console.error("Error fetching applications:", err);
+    } finally {
+      setLoading(false);
+      if (showRefresh) {
+        setIsRefreshing(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchReviewedApplications();
+  }, [authToken]);
+
+  const handleRefresh = () => {
+    fetchReviewedApplications(true);
+  };
+
+  const renderApplicationsTable = () => {
+    if (loading) {
+      return (
+        <Box id="pms-reviewed-loader-container">
+          <Loader size="lg" color="blue" />
+          <Text mt={10}>Loading reviewed applications...</Text>
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Alert color="red" title="Error loading applications">
+          {error}
+        </Alert>
+      );
+    }
+
+    if (applicationsData.length === 0) {
+      return (
+        <Alert color="blue" title="No reviewed applications">
+          There are no reviewed applications at this time.
+        </Alert>
+      );
+    }
+
+    return (
+      <ScrollArea id="pms-reviewed-tableWrapper">
+        <Table
+          highlightOnHover
+          striped
+          withBorder
+          id="pms-reviewed-styledTable"
+        >
+          <thead id="pms-reviewed-fusionTableHeader">
+            <tr>
+              {columnNames.map((columnName, index) => (
+                <th key={index}>{columnName}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {applicationsData.map((item) => (
+              <tr key={item.applicationId} id="pms-reviewed-tableRow">
+                <td>{item.id}</td>
+                <td>{item.applicationId}</td>
+                <td>{item.tokenNumber}</td>
+                <td title={item.title}>{item.title}</td>
+                <td>{item.submitter}</td>
+                <td>{item.department}</td>
+                <td>{item.arrivalDate}</td>
+                <td>{item.reviewedDate}</td>
+                <td>
+                  <Text
+                    id={
+                      item.currentStatus === "Patent Granted"
+                        ? "pms-status-granted"
+                        : item.currentStatus === "Patent Refused"
+                          ? "pms-status-refused"
+                          : "pms-status-pending"
+                    }
+                    weight={500}
+                    style={{ fontSize: "14px" }}
+                  >
+                    {item.currentStatus}
+                  </Text>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <Box id="pms-reviewed-apps-container">
+      {/* Header with title */}
+      <Box id="pms-reviewed-apps-header">
+        <Title order={2} id="pms-reviewed-apps-title">
+          Reviewed Patent Applications
+        </Title>
+      </Box>
+
+      {/* Description text */}
+      <Box id="pms-reviewed-apps-description">
+        {/* Refresh button */}
+        <Button
+          id="pms-reviewed-apps-refresh"
+          onClick={handleRefresh}
+          loading={isRefreshing}
+          leftIcon={<ArrowsClockwise size={16} />}
+        >
+          {isRefreshing ? "Refreshing..." : "Refresh"}
+        </Button>
+      </Box>
+
+      <Box id="pms-reviewed-apps-outer">{renderApplicationsTable()}</Box>
+    </Box>
+  );
+}
+
+export default ReviewedApplications;
diff --git a/src/Modules/Patent/components/PCCAdmin/Analytics/AnalyticsDashboard.jsx b/src/Modules/Patent/components/PCCAdmin/Analytics/AnalyticsDashboard.jsx
new file mode 100644
index 000000000..620785b00
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/Analytics/AnalyticsDashboard.jsx
@@ -0,0 +1,344 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  Text,
+  Grid,
+  Select,
+  Group,
+  Loader,
+  Box,
+  Progress,
+  Badge,
+  SimpleGrid,
+  RingProgress,
+  Center,
+} from "@mantine/core";
+import {
+  TrendUp,
+  FileText,
+  CheckCircle,
+  XCircle,
+  Clock,
+  ChartBar,
+  Calendar,
+} from "@phosphor-icons/react";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+const AnalyticsDashboard = () => {
+  const [analytics, setAnalytics] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [selectedYear, setSelectedYear] = useState("");
+  const [selectedDepartment, setSelectedDepartment] = useState("");
+  const [departments, setDepartments] = useState([]);
+
+  useEffect(() => {
+    fetchDepartments();
+    fetchAnalytics();
+  }, []);
+
+  const fetchDepartments = async () => {
+    const token = localStorage.getItem("authToken");
+    try {
+      const response = await axios.get(`${API_BASE_URL}/pccAdmin/departments/`, {
+        headers: { Authorization: `Token ${token}` },
+      });
+      setDepartments(
+        response.data.departments.map((dept) => ({ value: dept, label: dept }))
+      );
+    } catch (err) {
+      console.error("Error fetching departments:", err);
+    }
+  };
+
+  const fetchAnalytics = async () => {
+    const token = localStorage.getItem("authToken");
+    if (!token) return;
+
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (selectedYear) params.append("year", selectedYear);
+      if (selectedDepartment) params.append("department", selectedDepartment);
+
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/analytics/summary/?${params}`,
+        {
+          headers: { Authorization: `Token ${token}` },
+        }
+      );
+      setAnalytics(response.data);
+    } catch (err) {
+      console.error("Error fetching analytics:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAnalytics();
+  }, [selectedYear, selectedDepartment]);
+
+  const yearOptions = [
+    { value: "", label: "All Years" },
+    { value: "2024", label: "2024" },
+    { value: "2023", label: "2023" },
+    { value: "2022", label: "2022" },
+    { value: "2021", label: "2021" },
+  ];
+
+  const StatCard = ({ icon, title, value, color = "blue", description }) => (
+    <Card p="lg" withBorder>
+      <Group position="apart" mb="xs">
+        <Box style={{ color: `var(--mantine-color-${color}-6)` }}>
+          {icon}
+        </Box>
+        <Text size="xl" weight={700}>
+          {value}
+        </Text>
+      </Group>
+      <Text size="sm" weight={500} mb="xs">
+        {title}
+      </Text>
+      {description && (
+        <Text size="xs" color="dimmed">
+          {description}
+        </Text>
+      )}
+    </Card>
+  );
+
+  if (loading && !analytics) {
+    return (
+      <Box p="lg">
+        <Center py="xl">
+          <Loader size="lg" />
+        </Center>
+      </Box>
+    );
+  }
+
+  return (
+    <Box p="lg">
+      <Group position="apart" mb="lg">
+        <Text size="xl" weight={600}>
+          <ChartBar size={24} style={{ marginRight: "10px", verticalAlign: "middle" }} />
+          Patent Analytics Dashboard
+        </Text>
+        <Group>
+          <Select
+            placeholder="Select Year"
+            value={selectedYear}
+            onChange={setSelectedYear}
+            data={yearOptions}
+            w={120}
+          />
+          <Select
+            placeholder="Select Department"
+            value={selectedDepartment}
+            onChange={setSelectedDepartment}
+            data={[{ value: "", label: "All Departments" }, ...departments]}
+            w={200}
+          />
+        </Group>
+      </Group>
+
+      {analytics && (
+        <>
+          {/* Overview Stats */}
+          <SimpleGrid cols={4} spacing="lg" mb="lg">
+            <StatCard
+              icon={<FileText size={24} />}
+              title="Total Applications"
+              value={analytics.total_applications}
+              color="blue"
+              description="All patent applications"
+            />
+            <StatCard
+              icon={<CheckCircle size={24} />}
+              title="Approved"
+              value={analytics.approved}
+              color="green"
+              description="Successfully approved applications"
+            />
+            <StatCard
+              icon={<XCircle size={24} />}
+              title="Rejected"
+              value={analytics.rejected}
+              color="red"
+              description="Applications that were rejected"
+            />
+            <StatCard
+              icon={<Clock size={24} />}
+              title="Pending"
+              value={analytics.pending}
+              color="orange"
+              description="Applications under review"
+            />
+          </SimpleGrid>
+
+          <Grid>
+            {/* Approval Rate */}
+            <Grid.Col span={12} md={4}>
+              <Card p="lg" withBorder>
+                <Text size="lg" weight={600} mb="md">
+                  Approval Rate
+                </Text>
+                <Center>
+                  <RingProgress
+                    size={120}
+                    thickness={8}
+                    sections={[
+                      {
+                        value: analytics.approval_rate,
+                        color: analytics.approval_rate > 70 ? 'green' : analytics.approval_rate > 50 ? 'yellow' : 'red'
+                      }
+                    ]}
+                    label={
+                      <Center>
+                        <Text size="xl" weight={700}>
+                          {analytics.approval_rate}%
+                        </Text>
+                      </Center>
+                    }
+                  />
+                </Center>
+              </Card>
+            </Grid.Col>
+
+            {/* Status Distribution */}
+            <Grid.Col span={12} md={8}>
+              <Card p="lg" withBorder>
+                <Text size="lg" weight={600} mb="md">
+                  Status Distribution
+                </Text>
+                <Box>
+                  {analytics.status_distribution.slice(0, 8).map((item, index) => (
+                    <Box key={index} mb="sm">
+                      <Group position="apart" mb={4}>
+                        <Text size="sm">{item.status}</Text>
+                        <Badge size="sm">{item.count}</Badge>
+                      </Group>
+                      <Progress
+                        value={(item.count / analytics.total_applications) * 100}
+                        color={
+                          item.status.includes("Approved") || item.status.includes("Granted")
+                            ? "green"
+                            : item.status.includes("Rejected") || item.status.includes("Refused")
+                            ? "red"
+                            : item.status.includes("Appeal")
+                            ? "violet"
+                            : "blue"
+                        }
+                        size="sm"
+                      />
+                    </Box>
+                  ))}
+                </Box>
+              </Card>
+            </Grid.Col>
+
+            {/* Monthly Submissions */}
+            <Grid.Col span={12} md={6}>
+              <Card p="lg" withBorder>
+                <Text size="lg" weight={600} mb="md">
+                  <Calendar size={20} style={{ marginRight: "8px", verticalAlign: "middle" }} />
+                  Monthly Submissions
+                </Text>
+                <Box>
+                  {analytics.monthly_submissions.slice(-6).map((item, index) => (
+                    <Box key={index} mb="sm">
+                      <Group position="apart" mb={4}>
+                        <Text size="sm">{item.month || "Unknown"}</Text>
+                        <Text size="sm" weight={500}>{item.count}</Text>
+                      </Group>
+                      <Progress
+                        value={(item.count / Math.max(...analytics.monthly_submissions.map(m => m.count))) * 100}
+                        color="blue"
+                        size="sm"
+                      />
+                    </Box>
+                  ))}
+                </Box>
+              </Card>
+            </Grid.Col>
+
+            {/* Department Distribution */}
+            <Grid.Col span={12} md={6}>
+              <Card p="lg" withBorder>
+                <Text size="lg" weight={600} mb="md">
+                  <TrendUp size={20} style={{ marginRight: "8px", verticalAlign: "middle" }} />
+                  Department Distribution
+                </Text>
+                <Box>
+                  {analytics.department_distribution.slice(0, 8).map((item, index) => (
+                    <Box key={index} mb="sm">
+                      <Group position="apart" mb={4}>
+                        <Text size="sm">{item.department}</Text>
+                        <Badge size="sm">{item.count}</Badge>
+                      </Group>
+                      <Progress
+                        value={(item.count / analytics.total_applications) * 100}
+                        color="cyan"
+                        size="sm"
+                      />
+                    </Box>
+                  ))}
+                </Box>
+              </Card>
+            </Grid.Col>
+
+            {/* Decision Distribution */}
+            <Grid.Col span={12}>
+              <Card p="lg" withBorder>
+                <Text size="lg" weight={600} mb="md">
+                  Decision Status Breakdown
+                </Text>
+                <SimpleGrid cols={3} spacing="lg">
+                  {analytics.decision_distribution.map((item, index) => (
+                    <Card key={index} p="md" withBorder>
+                      <Group position="apart" mb="xs">
+                        <Text size="sm" color="dimmed">
+                          {item.decision_status}
+                        </Text>
+                        <Badge
+                          color={
+                            item.decision_status === "Approved"
+                              ? "green"
+                              : item.decision_status === "Rejected"
+                              ? "red"
+                              : "gray"
+                          }
+                        >
+                          {item.count}
+                        </Badge>
+                      </Group>
+                      <Progress
+                        value={(item.count / analytics.total_applications) * 100}
+                        color={
+                          item.decision_status === "Approved"
+                            ? "green"
+                            : item.decision_status === "Rejected"
+                            ? "red"
+                            : "gray"
+                        }
+                        size="lg"
+                      />
+                      <Text size="xs" color="dimmed" mt="xs">
+                        {((item.count / analytics.total_applications) * 100).toFixed(1)}% of total
+                      </Text>
+                    </Card>
+                  ))}
+                </SimpleGrid>
+              </Card>
+            </Grid.Col>
+          </Grid>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default AnalyticsDashboard;
\ No newline at end of file
diff --git a/src/Modules/Patent/components/PCCAdmin/Dashboard/DownloadsPage.jsx b/src/Modules/Patent/components/PCCAdmin/Dashboard/DownloadsPage.jsx
new file mode 100644
index 000000000..337dc7582
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/Dashboard/DownloadsPage.jsx
@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Container,
+  Text,
+  TextInput,
+  Group,
+  LoadingOverlay,
+} from "@mantine/core";
+import { ArrowCircleDown, Plus, Trash } from "@phosphor-icons/react";
+import "../../../style/Pcc_Admin/DownloadsPage.css";
+import {
+  fetchDocuments,
+  addDocument,
+  deleteDocument,
+} from "../../../services/documentService.jsx";
+
+function DownloadsPage() {
+  const [downloadsData, setDownloadsData] = useState([]);
+  const [newDocument, setNewDocument] = useState({
+    title: "",
+    link: "",
+  });
+  const [loading, setLoading] = useState(false);
+
+  const loadDocuments = async () => {
+    setLoading(true);
+    try {
+      const data = await fetchDocuments();
+      setDownloadsData(data);
+    } catch (error) {
+      console.error("Error fetching documents:", error);
+      alert("Failed to load documents");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddDocument = async () => {
+    if (!newDocument.title || !newDocument.link) {
+      alert("Please fill in both title and link fields");
+      return;
+    }
+
+    try {
+      const created = await addDocument(newDocument);
+      setDownloadsData((prev) => [created, ...prev]);
+      setNewDocument({ title: "", link: "" });
+    } catch (error) {
+      console.error("Error adding document:", error);
+      alert("Failed to add document");
+    }
+  };
+
+  const handleDeleteDocument = async (id) => {
+    try {
+      await deleteDocument(id);
+      setDownloadsData((prev) => prev.filter((doc) => doc.id !== id));
+    } catch (error) {
+      console.error("Error deleting document:", error);
+      alert("Failed to delete document");
+    }
+  };
+
+  useEffect(() => {
+    loadDocuments();
+  }, []);
+
+  return (
+    <Container
+      size="xl"
+      id="pms-pcc-downloads-container"
+      style={{ position: "relative" }}
+    >
+      <LoadingOverlay visible={loading} overlayBlur={2} />
+
+      <Text align="center" id="pms-pcc-downloads-title" mb={20}>
+        Download Forms and Documents
+      </Text>
+      <Text align="center" id="pms-pcc-downloads-description" mb={20}>
+        You can review the document title and click the "Download" button to
+        access the desired file.
+      </Text>
+
+      {/* Add Document Form */}
+      <div id="pms-pcc-add-document-form">
+        <Text id="pms-pcc-add-document-form-title">Add New Document</Text>
+        <Group spacing="sm">
+          <TextInput
+            placeholder="Document Title"
+            value={newDocument.title}
+            onChange={(e) =>
+              setNewDocument({ ...newDocument, title: e.target.value })
+            }
+            style={{ flex: 2 }}
+          />
+          <TextInput
+            placeholder="Document Link"
+            value={newDocument.link}
+            onChange={(e) =>
+              setNewDocument({ ...newDocument, link: e.target.value })
+            }
+            style={{ flex: 3 }}
+          />
+          <Button
+            onClick={handleAddDocument}
+            color="green"
+            leftIcon={<Plus size={16} />}
+            id="pms-pcc-add-document-button"
+          >
+            Add
+          </Button>
+        </Group>
+      </div>
+
+      <div style={{ overflowX: "auto", width: "100%" }}>
+        <table id="pms-pcc-downloads-table">
+          <thead>
+            <tr>
+              <th style={{ width: "8%" }}>S.No.</th>
+              <th style={{ width: "57%" }}>Document Title</th>
+              <th style={{ width: "25%" }}>Download</th>
+              <th style={{ width: "10%" }}>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {downloadsData.map((download, index) => (
+              <tr key={download.id}>
+                <td>{index + 1}</td>
+                <td>{download.title}</td>
+                <td>
+                  <Button
+                    component="a"
+                    href={download.link}
+                    target="_blank"
+                    color="blue"
+                    variant="outline"
+                    id="pms-pcc-download-button"
+                    fullWidth
+                  >
+                    <ArrowCircleDown size={16} style={{ marginRight: "8px" }} />
+                    Download
+                  </Button>
+                </td>
+                <td>
+                  <Button
+                    color="red"
+                    variant="outline"
+                    onClick={() => handleDeleteDocument(download.id)}
+                    fullWidth
+                    id="pms-pcc-delete-button"
+                  >
+                    <Trash size={16} />
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Container>
+  );
+}
+
+export default DownloadsPage;
diff --git a/src/Modules/Patent/components/PCCAdmin/Dashboard/InsightsPage.jsx b/src/Modules/Patent/components/PCCAdmin/Dashboard/InsightsPage.jsx
new file mode 100644
index 000000000..4362cbe09
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/Dashboard/InsightsPage.jsx
@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from "react";
+import { Table, Select, Button, Text, Container, Loader, Alert } from "@mantine/core";
+import { DownloadSimple } from "@phosphor-icons/react";
+import axios from "axios";
+import "../../../style/Pcc_Admin/InsightsPage.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+// Map backend status names to display-friendly colors
+const STATUS_COLORS = {
+  Submitted: "#0056b3",
+  "Reviewed by PCC Admin": "#17a2b8",
+  Resubmitted: "#6f42c1",
+  "Forwarded for Director's Review": "#fd7e14",
+  Approved: "#32cd32",
+  Rejected: "#ff6347",
+  "Needs Revision": "#ffc107",
+  Draft: "#6c757d",
+  Withdrawn: "#adb5bd",
+  "Patentability Check Started": "#20c997",
+  "Patentability Check Completed": "#198754",
+  "Search Report Generated": "#0dcaf0",
+  "Patent Filed": "#0d6efd",
+  "Patent Published": "#6610f2",
+  "Patent Granted": "#28a745",
+  "Patent Refused": "#dc3545",
+};
+
+function getStatusColor(status) {
+  return STATUS_COLORS[status] || "#6c757d";
+}
+
+function InsightsPage() {
+  const [selectedYear, setSelectedYear] = useState("all");
+  const [availableYears, setAvailableYears] = useState([]);
+  const [applications, setApplications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const authToken = localStorage.getItem("authToken");
+
+  const fetchAnalytics = async (year) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const params = year && year !== "all" ? `?year=${year}` : "";
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/analytics/${params}`,
+        {
+          headers: { Authorization: `Token ${authToken}` },
+        },
+      );
+
+      const stats = response.data.stats || [];
+      const mapped = stats.map((item) => ({
+        label: item.status,
+        count: item.count,
+        color: getStatusColor(item.status),
+      }));
+      setApplications(mapped);
+
+      if (response.data.available_years) {
+        setAvailableYears(response.data.available_years.map(String));
+      }
+    } catch (err) {
+      console.error("Error fetching analytics:", err);
+      setError("Failed to load analytics data. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAnalytics(selectedYear);
+  }, [selectedYear]);
+
+  const totalApplications = applications.reduce(
+    (sum, app) => sum + app.count,
+    0,
+  );
+
+  const handleDownload = () => {
+    if (totalApplications === 0) return;
+    const csvContent = `Status,Count,Percentage\n${applications
+      .map(
+        (app) =>
+          `"${app.label}",${app.count},${(
+            (app.count / totalApplications) *
+            100
+          ).toFixed(2)}%`,
+      )
+      .join("\n")}`;
+
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.setAttribute("href", url);
+    link.setAttribute(
+      "download",
+      `Applications_${selectedYear === "all" ? "All_Years" : selectedYear}.csv`,
+    );
+    link.click();
+  };
+
+  const yearOptions = [
+    { value: "all", label: "All Years" },
+    ...availableYears.map((y) => ({ value: y, label: y })),
+  ];
+
+  return (
+    <Container id="pms-insights-page">
+      <Text order={2} align="left" id="pms-page-title">
+        Applications Overview{" "}
+        {selectedYear !== "all" ? `- ${selectedYear}` : ""}
+      </Text>
+      <Text align="left" size="sm" mb="lg" id="pms-description">
+        Select a year from the dropdown below to view the statistics of
+        applications for that year. You can also download the data as a CSV file
+        for further analysis.
+      </Text>
+
+      <div id="pms-filter">
+        <Text size="sm" weight={600}>
+          Select Year:
+        </Text>
+        <Select
+          id="pms-year-select"
+          data={yearOptions}
+          value={selectedYear}
+          onChange={(value) => setSelectedYear(value)}
+          radius="md"
+          size="sm"
+        />
+      </div>
+
+      {loading ? (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            padding: "40px",
+          }}
+        >
+          <Loader size="lg" variant="dots" />
+        </div>
+      ) : error ? (
+        <Alert color="red" title="Error" mt="md">
+          {error}
+        </Alert>
+      ) : totalApplications === 0 ? (
+        <Alert color="blue" title="No Data" mt="md">
+          No applications found
+          {selectedYear !== "all" ? ` for ${selectedYear}` : ""}.
+        </Alert>
+      ) : (
+        <>
+          <div id="pms-insights-content">
+            <div id="pms-chart-section">
+              <svg
+                width="100%"
+                height="300"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="xMidYMid meet"
+              >
+                {
+                  applications.reduce(
+                    (acc, app) => {
+                      const { startAngle } = acc;
+                      const sweepAngle =
+                        (app.count / totalApplications) * 360;
+                      const endAngle = startAngle + sweepAngle;
+
+                      const largeArcFlag = sweepAngle > 180 ? 1 : 0;
+                      const [startX, startY] = [
+                        50 + 40 * Math.cos((Math.PI * startAngle) / 180),
+                        50 + 40 * Math.sin((Math.PI * startAngle) / 180),
+                      ];
+                      const [endX, endY] = [
+                        50 + 40 * Math.cos((Math.PI * endAngle) / 180),
+                        50 + 40 * Math.sin((Math.PI * endAngle) / 180),
+                      ];
+
+                      const midAngle = startAngle + sweepAngle / 2;
+                      const [textX, textY] = [
+                        50 + 25 * Math.cos((Math.PI * midAngle) / 180),
+                        50 + 25 * Math.sin((Math.PI * midAngle) / 180),
+                      ];
+
+                      acc.slices.push(
+                        <g key={app.label}>
+                          <path
+                            d={`M50,50 L${startX},${startY} A40,40 0 ${largeArcFlag} 1 ${endX},${endY} Z`}
+                            fill={app.color}
+                          />
+                          {sweepAngle > 15 && (
+                            <text
+                              x={textX}
+                              y={textY}
+                              fontSize="3.5"
+                              fill="#fff"
+                              textAnchor="middle"
+                              dominantBaseline="middle"
+                            >
+                              {(
+                                (app.count / totalApplications) *
+                                100
+                              ).toFixed(1)}
+                              %
+                            </text>
+                          )}
+                        </g>,
+                      );
+
+                      acc.startAngle = endAngle;
+                      return acc;
+                    },
+                    { slices: [], startAngle: 0 },
+                  ).slices
+                }
+              </svg>
+
+              <div id="pms-legend">
+                {applications.map((app) => (
+                  <div key={app.label} id="pms-legend-item">
+                    <div
+                      id="pms-legend-color"
+                      style={{ backgroundColor: app.color }}
+                    />
+                    <span id="pms-legend-label">{app.label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div id="pms-table-section">
+              <Text id="pms-table-title" align="center" mb="md">
+                Applications Data
+              </Text>
+              <Table highlightOnHover>
+                <thead>
+                  <tr>
+                    <th>Status</th>
+                    <th>Count</th>
+                    <th>Percentage</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {applications.map((app) => (
+                    <tr key={app.label}>
+                      <td>{app.label}</td>
+                      <td>{app.count}</td>
+                      <td>
+                        {((app.count / totalApplications) * 100).toFixed(2)}%
+                      </td>
+                    </tr>
+                  ))}
+                  <tr style={{ fontWeight: "bold", borderTop: "2px solid #dee2e6" }}>
+                    <td>Total</td>
+                    <td>{totalApplications}</td>
+                    <td>100.00%</td>
+                  </tr>
+                </tbody>
+              </Table>
+            </div>
+          </div>
+
+          <div id="pms-download-csv-button">
+            <Button
+              radius="md"
+              size="md"
+              variant="outline"
+              leftIcon={<DownloadSimple size={16} />}
+              onClick={handleDownload}
+              id="pms-download-button"
+            >
+              Download CSV
+            </Button>
+          </div>
+        </>
+      )}
+    </Container>
+  );
+}
+
+export default InsightsPage;
diff --git a/src/Modules/Patent/components/PCCAdmin/Dashboard/PCCAdminDashboard.jsx b/src/Modules/Patent/components/PCCAdmin/Dashboard/PCCAdminDashboard.jsx
new file mode 100644
index 000000000..340213e81
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/Dashboard/PCCAdminDashboard.jsx
@@ -0,0 +1,138 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, Box, Text, Divider, Button, Paper } from "@mantine/core";
+import {
+  Eye,
+  List,
+  Briefcase,
+  ArrowCircleDown,
+  Buildings,
+} from "@phosphor-icons/react";
+
+import DownloadsPage from "./DownloadsPage";
+import "../../../style/Pcc_Admin/PCCAdminDashboard.css";
+import InsightsPage from "./InsightsPage";
+
+function PCCAdminDashboard({ setActiveTab }) {
+  const renderDashboardCard = (icon, title, description, tabId) => (
+    <Box id="pms-pcc-dashboard-cards">
+      <Text id="pms-dashboard-card-title">
+        {icon} {title}
+      </Text>
+      <Divider id="pms-card-divider" />
+      <Text size="sm" mt="sm">
+        {description}
+      </Text>
+      <Button
+        variant="outline"
+        fullWidth
+        mt="md"
+        size="sm"
+        onClick={() => setActiveTab(tabId)}
+      >
+        {title}
+      </Button>
+    </Box>
+  );
+
+  return (
+    <Box>
+      {/* Page Title */}
+      <Text id="pms-pcc-dashboard-title">
+        Patent & Copyright Cell Dashboard
+      </Text>
+
+      {/* Combined Overview and Insights Section */}
+      <Paper
+        id="pms-pcc-combined-section"
+        style={{ marginLeft: "50px", marginRight: "50px" }}
+      >
+        {/* Overview Section */}
+        <Box id="pms-pcc-overview-section">
+          <Text id="pms-pcc-overview-title">
+            Patent Management System (PMS)
+            <Buildings size={24} id="pms-pcc-overview-icon" />
+          </Text>
+          <Text id="pms-pcc-overview-text">
+            The Patent Management System at IIITDM Jabalpur focuses on fostering
+            research and development activities, particularly in IT-enabled
+            design and manufacturing, as well as the design of IT systems. Here,
+            you can manage applications, track their status, access important
+            resources and view insights.
+          </Text>
+        </Box>
+
+        <Divider my="xl" id="pms-dashboard-card-divider" />
+
+        {/* Insights Section */}
+        <Box id="pms-pcc-insights-section">
+          <InsightsPage />
+        </Box>
+
+        <Divider my="xl" id="pms-dashboard-card-divider" />
+
+        {/* Downloads Section */}
+        <DownloadsPage />
+      </Paper>
+
+      {/* Dashboard Cards Section */}
+      <Grid mt="xl" id="pms-pcc-dashboard-grid">
+        {/* New Applications Card */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          {renderDashboardCard(
+            <Eye size={20} id="pms-pcc-icon" />,
+            "New Applications",
+            "Review and provide feedback on the latest applications.",
+            "1",
+          )}
+        </Grid.Col>
+
+        {/* Ongoing Applications Card */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          {renderDashboardCard(
+            <List size={20} id="pms-pcc-icon" />,
+            "Ongoing Applications",
+            "Track the current status of all the ongoing applications.",
+            "2",
+          )}
+        </Grid.Col>
+
+        {/* Past Applications Card */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          {renderDashboardCard(
+            <Briefcase size={20} id="pms-pcc-icon" />,
+            "Past Applications",
+            "Track record of all the filed and reeted applications.",
+            "3",
+          )}
+        </Grid.Col>
+
+        {/* Communication Logs Card */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          {renderDashboardCard(
+            <Briefcase size={20} id="pms-pcc-icon" />,
+            "Communication Logs",
+            "Log and track external communications with attorneys and patent offices.",
+            "4",
+          )}
+        </Grid.Col>
+
+        {/* Notifications Card */}
+        <Grid.Col span={{ base: 12, sm: 6 }}>
+          {renderDashboardCard(
+            <ArrowCircleDown size={20} id="pms-pcc-icon" />,
+            "Notifications",
+            "Get notifications regarding status updates and other important information.",
+            "5",
+          )}
+        </Grid.Col>
+      </Grid>
+    </Box>
+  );
+}
+
+PCCAdminDashboard.propTypes = {
+  setActiveTab: PropTypes.func.isRequired,
+};
+
+export default PCCAdminDashboard;
diff --git a/src/Modules/Patent/components/PCCAdmin/ManageAttorney/AddCommunicationLog.jsx b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/AddCommunicationLog.jsx
new file mode 100644
index 000000000..01d6235be
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/AddCommunicationLog.jsx
@@ -0,0 +1,261 @@
+import React, { useState } from "react";
+import {
+  TextInput,
+  Textarea,
+  Button,
+  Title,
+  Select,
+  FileInput,
+  Alert,
+  LoadingOverlay,
+} from "@mantine/core";
+import {
+  EnvelopeSimple,
+  PaperPlaneTilt,
+  UserCircle,
+  ArrowLeft,
+  Paperclip,
+  ShieldCheck,
+} from "phosphor-react";
+import PropTypes from "prop-types";
+import { communicationLogService } from "../../../services/communicationLogService.jsx";
+import "../../../style/Pcc_Admin/NewAttorneyForm.css";
+
+function AddCommunicationLog({ applicationId, onBack, onSuccess }) {
+  const [formData, setFormData] = useState({
+    direction: "",
+    subject: "",
+    body: "",
+    external_party_name: "",
+    external_party_email: "",
+    confidentiality_level: "Internal",
+  });
+  const [attachment, setAttachment] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!formData.direction) {
+      setError("Please select a communication direction.");
+      return;
+    }
+    if (!formData.subject.trim()) {
+      setError("Subject is required.");
+      return;
+    }
+    if (!formData.body.trim()) {
+      setError("Body/details are required.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      await communicationLogService.addLog(applicationId, {
+        ...formData,
+        attachment,
+      });
+
+      if (onSuccess) onSuccess();
+    } catch (err) {
+      setError(err.message || "Failed to add communication log.");
+      console.error("Error adding log:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div id="pcc-new-attorney-form-container">
+      <LoadingOverlay visible={isLoading} />
+
+      <div id="pcc-new-attorney-form-header">
+        <Title order={2} id="pcc-new-attorney-form-title">
+          Log External Communication
+        </Title>
+        <Button
+          variant="subtle"
+          leftIcon={<ArrowLeft size={20} weight="bold" />}
+          onClick={onBack}
+          id="pcc-new-attorney-back-btn"
+        >
+          Back
+        </Button>
+      </div>
+
+      {error && (
+        <Alert
+          color="red"
+          mb="md"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit} id="pcc-new-attorney-form-content">
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <PaperPlaneTilt size={20} id="pcc-new-attorney-form-icon" />
+              <span>Direction</span>
+            </div>
+            <Select
+              placeholder="Select direction"
+              data={[
+                { value: "INCOMING", label: "Incoming" },
+                { value: "OUTGOING", label: "Outgoing" },
+              ]}
+              value={formData.direction}
+              onChange={(val) =>
+                setFormData({ ...formData, direction: val || "" })
+              }
+              required
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <EnvelopeSimple size={20} id="pcc-new-attorney-form-icon" />
+              <span>Subject</span>
+            </div>
+            <TextInput
+              name="subject"
+              value={formData.subject}
+              onChange={handleChange}
+              required
+              placeholder="Brief subject of the communication"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <UserCircle size={20} id="pcc-new-attorney-form-icon" />
+              <span>External Party Name</span>
+            </div>
+            <TextInput
+              name="external_party_name"
+              value={formData.external_party_name}
+              onChange={handleChange}
+              placeholder="Attorney, Patent Office, etc."
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <EnvelopeSimple size={20} id="pcc-new-attorney-form-icon" />
+              <span>External Party Email</span>
+            </div>
+            <TextInput
+              name="external_party_email"
+              value={formData.external_party_email}
+              onChange={handleChange}
+              placeholder="email@example.com"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <ShieldCheck size={20} id="pcc-new-attorney-form-icon" />
+              <span>Confidentiality Level</span>
+            </div>
+            <Select
+              placeholder="Select confidentiality level"
+              data={[
+                { value: "Public", label: "Public" },
+                { value: "Internal", label: "Internal" },
+                { value: "Confidential", label: "Confidential" },
+                {
+                  value: "Attorney-Client Privileged",
+                  label: "Attorney-Client Privileged",
+                },
+              ]}
+              value={formData.confidentiality_level}
+              onChange={(val) =>
+                setFormData({
+                  ...formData,
+                  confidentiality_level: val || "Internal",
+                })
+              }
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field" style={{ width: "100%" }}>
+            <div id="pcc-new-attorney-form-label">
+              <EnvelopeSimple size={20} id="pcc-new-attorney-form-icon" />
+              <span>Details / Body</span>
+            </div>
+            <Textarea
+              name="body"
+              value={formData.body}
+              onChange={handleChange}
+              required
+              minRows={5}
+              maxRows={10}
+              placeholder="Detailed description of the communication, instructions received, actions taken..."
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Paperclip size={20} id="pcc-new-attorney-form-icon" />
+              <span>Attachment (optional)</span>
+            </div>
+            <FileInput
+              placeholder="Upload proof / screenshot / document"
+              value={attachment}
+              onChange={setAttachment}
+              accept="image/*,application/pdf,.doc,.docx"
+              clearable
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-footer">
+          <Button
+            type="submit"
+            variant="filled"
+            color="blue"
+            id="pcc-new-attorney-form-submit-btn"
+            loading={isLoading}
+          >
+            Log Communication
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+AddCommunicationLog.propTypes = {
+  applicationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+  onBack: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func,
+};
+
+export default AddCommunicationLog;
diff --git a/src/Modules/Patent/components/PCCAdmin/ManageAttorney/AttorneyAssignment.jsx b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/AttorneyAssignment.jsx
new file mode 100644
index 000000000..846bd4260
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/AttorneyAssignment.jsx
@@ -0,0 +1,419 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  TextInput,
+  Textarea,
+  Button,
+  Title,
+  FileInput,
+  Alert,
+  LoadingOverlay,
+  Card,
+  Text,
+  Badge,
+  Group,
+} from "@mantine/core";
+import {
+  UserCircle,
+  EnvelopeSimple,
+  Phone,
+  Buildings,
+  Briefcase,
+  ArrowLeft,
+  Paperclip,
+} from "phosphor-react";
+import { attorneyAssignmentService } from "../../../services/attorneyService.jsx";
+import "../../../style/Pcc_Admin/NewAttorneyForm.css";
+
+function AttorneyAssignment({ applicationId, onBack }) {
+  const [existingAssignment, setExistingAssignment] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    attorney_name: "",
+    attorney_email: "",
+    attorney_phone: "",
+    attorney_firm: "",
+    specialization: "",
+    remarks: "",
+  });
+  const [engagementProof, setEngagementProof] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+
+  // Fetch existing assignment on mount
+  useEffect(() => {
+    const fetchAssignment = async () => {
+      try {
+        setIsLoading(true);
+        const data =
+          await attorneyAssignmentService.getAssignment(applicationId);
+        if (data) {
+          setExistingAssignment(data);
+          setFormData({
+            attorney_name: data.attorney_name || "",
+            attorney_email: data.attorney_email || "",
+            attorney_phone: data.attorney_phone || "",
+            attorney_firm: data.attorney_firm || "",
+            specialization: data.specialization || "",
+            remarks: data.remarks || "",
+          });
+        }
+      } catch (err) {
+        console.error("Error fetching attorney assignment:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchAssignment();
+  }, [applicationId]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+
+    if (!formData.attorney_name || formData.attorney_name.trim().length < 2) {
+      setError("Attorney name must be at least 2 characters.");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      await attorneyAssignmentService.assignAttorney(applicationId, {
+        ...formData,
+        engagement_proof: engagementProof,
+      });
+
+      setSuccess("Attorney assigned successfully!");
+      setIsEditing(false);
+
+      // Refresh data
+      const data = await attorneyAssignmentService.getAssignment(applicationId);
+      if (data) {
+        setExistingAssignment(data);
+      }
+    } catch (err) {
+      setError(err.message || "Failed to assign attorney.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingOverlay visible />;
+  }
+
+  // View mode - show existing assignment
+  if (existingAssignment && !isEditing) {
+    return (
+      <div id="pcc-new-attorney-form-container">
+        <div id="pcc-new-attorney-form-header">
+          <Title order={2} id="pcc-new-attorney-form-title">
+            Attorney Assignment
+          </Title>
+          <Group>
+            <Button
+              variant="outline"
+              color="blue"
+              onClick={() => setIsEditing(true)}
+            >
+              Edit Assignment
+            </Button>
+            <Button
+              variant="subtle"
+              leftIcon={<ArrowLeft size={20} weight="bold" />}
+              onClick={onBack}
+            >
+              Back
+            </Button>
+          </Group>
+        </div>
+
+        {success && (
+          <Alert
+            color="green"
+            mb="md"
+            withCloseButton
+            onClose={() => setSuccess(null)}
+          >
+            {success}
+          </Alert>
+        )}
+
+        <Card p="lg" radius="md" withBorder>
+          <Group mb="md">
+            <Badge
+              size="lg"
+              color={existingAssignment.is_active ? "green" : "red"}
+              variant="light"
+            >
+              {existingAssignment.is_active ? "Active" : "Inactive"}
+            </Badge>
+          </Group>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Attorney Name
+            </Text>
+            <Text size="md">{existingAssignment.attorney_name}</Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Email
+            </Text>
+            <Text size="md">
+              {existingAssignment.attorney_email || "Not provided"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Phone
+            </Text>
+            <Text size="md">
+              {existingAssignment.attorney_phone || "Not provided"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Firm
+            </Text>
+            <Text size="md">
+              {existingAssignment.attorney_firm || "Not provided"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Specialization
+            </Text>
+            <Text size="md">
+              {existingAssignment.specialization || "Not provided"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Remarks
+            </Text>
+            <Text size="md">{existingAssignment.remarks || "No remarks"}</Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Assigned Date
+            </Text>
+            <Text size="md">
+              {existingAssignment.assigned_date
+                ? new Date(existingAssignment.assigned_date).toLocaleDateString(
+                    "en-US",
+                    {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    },
+                  )
+                : "N/A"}
+            </Text>
+          </div>
+
+          {existingAssignment.engagement_proof && (
+            <div style={{ marginBottom: "12px" }}>
+              <Text weight={500} size="sm" color="dimmed">
+                Engagement Proof
+              </Text>
+              <Button
+                component="a"
+                href={existingAssignment.engagement_proof}
+                target="_blank"
+                download
+                variant="outline"
+                color="blue"
+                leftIcon={<Paperclip size={18} />}
+                mt="xs"
+              >
+                Download Proof
+              </Button>
+            </div>
+          )}
+        </Card>
+      </div>
+    );
+  }
+
+  // Edit/Create mode - show form
+  return (
+    <div id="pcc-new-attorney-form-container">
+      <LoadingOverlay visible={isSaving} />
+
+      <div id="pcc-new-attorney-form-header">
+        <Title order={2} id="pcc-new-attorney-form-title">
+          {existingAssignment
+            ? "Update Attorney Assignment"
+            : "Assign Attorney"}
+        </Title>
+        <Button
+          variant="subtle"
+          leftIcon={<ArrowLeft size={20} weight="bold" />}
+          onClick={existingAssignment ? () => setIsEditing(false) : onBack}
+          id="pcc-new-attorney-back-btn"
+        >
+          {existingAssignment ? "Cancel" : "Back"}
+        </Button>
+      </div>
+
+      {error && (
+        <Alert
+          color="red"
+          mb="md"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit} id="pcc-new-attorney-form-content">
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <UserCircle size={20} id="pcc-new-attorney-form-icon" />
+              <span>Attorney Name *</span>
+            </div>
+            <TextInput
+              name="attorney_name"
+              value={formData.attorney_name}
+              onChange={handleChange}
+              required
+              placeholder="Full name of the attorney"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <EnvelopeSimple size={20} id="pcc-new-attorney-form-icon" />
+              <span>Attorney Email</span>
+            </div>
+            <TextInput
+              name="attorney_email"
+              type="email"
+              value={formData.attorney_email}
+              onChange={handleChange}
+              placeholder="attorney@example.com"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Phone size={20} id="pcc-new-attorney-form-icon" />
+              <span>Phone Number</span>
+            </div>
+            <TextInput
+              name="attorney_phone"
+              value={formData.attorney_phone}
+              onChange={handleChange}
+              placeholder="+91 XXXXXXXXXX"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Buildings size={20} id="pcc-new-attorney-form-icon" />
+              <span>Law Firm</span>
+            </div>
+            <TextInput
+              name="attorney_firm"
+              value={formData.attorney_firm}
+              onChange={handleChange}
+              placeholder="Name of the law firm"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Briefcase size={20} id="pcc-new-attorney-form-icon" />
+              <span>Specialization</span>
+            </div>
+            <TextInput
+              name="specialization"
+              value={formData.specialization}
+              onChange={handleChange}
+              placeholder="e.g. Software Patents, Biotech, Mechanical"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Paperclip size={20} id="pcc-new-attorney-form-icon" />
+              <span>Engagement Proof (optional)</span>
+            </div>
+            <FileInput
+              placeholder="Upload engagement letter / contract"
+              value={engagementProof}
+              onChange={setEngagementProof}
+              accept="image/*,application/pdf,.doc,.docx"
+              clearable
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field" style={{ width: "100%" }}>
+            <div id="pcc-new-attorney-form-label">
+              <EnvelopeSimple size={20} id="pcc-new-attorney-form-icon" />
+              <span>Remarks</span>
+            </div>
+            <Textarea
+              name="remarks"
+              value={formData.remarks}
+              onChange={handleChange}
+              minRows={3}
+              maxRows={6}
+              placeholder="Any additional notes about this attorney engagement..."
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-footer">
+          <Button
+            type="submit"
+            variant="filled"
+            color="blue"
+            id="pcc-new-attorney-form-submit-btn"
+            loading={isSaving}
+          >
+            {existingAssignment ? "Update Assignment" : "Assign Attorney"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+AttorneyAssignment.propTypes = {
+  applicationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default AttorneyAssignment;
diff --git a/src/Modules/Patent/components/PCCAdmin/ManageAttorney/CommunicationLogDetail.jsx b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/CommunicationLogDetail.jsx
new file mode 100644
index 000000000..2da5754f9
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/CommunicationLogDetail.jsx
@@ -0,0 +1,175 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Text, Box, Button, Badge, Card, Group } from "@mantine/core";
+import {
+  EnvelopeSimple,
+  PaperPlaneTilt,
+  UserCircle,
+  CaretLeft,
+  Calendar,
+  Paperclip,
+  ShieldCheck,
+} from "phosphor-react";
+import "../../../style/Pcc_Admin/AttorneyForm.css";
+
+function CommunicationLogDetail({ log, onBack }) {
+  if (!log) {
+    return <Text>Communication log not found</Text>;
+  }
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return "N/A";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  return (
+    <div id="pms-pcc-attorney-details-container">
+      {/* Header with Back Button */}
+      <div id="pms-pcc-top-nav-container">
+        <Button
+          variant="subtle"
+          leftIcon={<CaretLeft size={20} weight="bold" />}
+          onClick={onBack}
+          id="pms-pcc-attorney-back-btn"
+        >
+          Back
+        </Button>
+        <Badge
+          size="lg"
+          color={log.direction === "OUTGOING" ? "blue" : "green"}
+          variant="light"
+        >
+          {log.direction === "OUTGOING" ? "Outgoing" : "Incoming"}
+        </Badge>
+        <Badge
+          size="lg"
+          color={
+            log.confidentiality_level === "Attorney-Client Privileged"
+              ? "red"
+              : log.confidentiality_level === "Confidential"
+                ? "orange"
+                : log.confidentiality_level === "Public"
+                  ? "green"
+                  : "blue"
+          }
+          variant="light"
+        >
+          {log.confidentiality_level || "Internal"}
+        </Badge>
+      </div>
+
+      {/* Communication Details */}
+      <Box id="pms-pcc-attorney-details-grid">
+        <Card p="md" radius="sm" withBorder mb="md">
+          <Group mb="sm">
+            <PaperPlaneTilt size={20} />
+            <Text weight={600} size="lg">
+              {log.subject || "No Subject"}
+            </Text>
+          </Group>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Text id="pms-pcc-attorney-detail">
+              <Calendar size={20} id="pms-pcc-icon" />
+              <strong>Date:</strong> {formatDate(log.created_at)}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Text id="pms-pcc-attorney-detail">
+              <UserCircle size={20} id="pms-pcc-icon" />
+              <strong>External Party:</strong>{" "}
+              {log.external_party_name || "Not specified"}
+            </Text>
+          </div>
+
+          {log.external_party_email && (
+            <div style={{ marginBottom: "16px" }}>
+              <Text id="pms-pcc-attorney-detail">
+                <EnvelopeSimple size={20} id="pms-pcc-icon" />
+                <strong>Email:</strong> {log.external_party_email}
+              </Text>
+            </div>
+          )}
+
+          <div style={{ marginBottom: "16px" }}>
+            <Text id="pms-pcc-attorney-detail">
+              <UserCircle size={20} id="pms-pcc-icon" />
+              <strong>Logged By:</strong> {log.logged_by_name || "PCC Admin"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Text id="pms-pcc-attorney-detail">
+              <ShieldCheck size={20} id="pms-pcc-icon" />
+              <strong>Confidentiality:</strong>{" "}
+              {log.confidentiality_level || "Internal"}
+            </Text>
+          </div>
+        </Card>
+
+        {/* Body / Details */}
+        <Card p="md" radius="sm" withBorder mb="md">
+          <Text weight={600} size="md" mb="sm">
+            Communication Details
+          </Text>
+          <Text
+            style={{
+              whiteSpace: "pre-wrap",
+              lineHeight: 1.6,
+              backgroundColor: "#f8f9fa",
+              padding: "12px",
+              borderRadius: "8px",
+            }}
+          >
+            {log.body || "No details provided."}
+          </Text>
+        </Card>
+
+        {/* Attachment */}
+        {log.attachment && (
+          <Card p="md" radius="sm" withBorder mb="md">
+            <Text weight={600} size="md" mb="sm">
+              Attachment
+            </Text>
+            <Button
+              component="a"
+              href={log.attachment}
+              target="_blank"
+              download
+              variant="outline"
+              color="blue"
+              leftIcon={<Paperclip size={18} />}
+            >
+              Download Attachment
+            </Button>
+          </Card>
+        )}
+      </Box>
+    </div>
+  );
+}
+
+CommunicationLogDetail.propTypes = {
+  log: PropTypes.shape({
+    id: PropTypes.number,
+    direction: PropTypes.string,
+    subject: PropTypes.string,
+    body: PropTypes.string,
+    external_party_name: PropTypes.string,
+    external_party_email: PropTypes.string,
+    logged_by_name: PropTypes.string,
+    created_at: PropTypes.string,
+    attachment: PropTypes.string,
+    confidentiality_level: PropTypes.string,
+  }),
+  onBack: PropTypes.func.isRequired,
+};
+
+export default CommunicationLogDetail;
diff --git a/src/Modules/Patent/components/PCCAdmin/ManageAttorney/CommunicationLogs.jsx b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/CommunicationLogs.jsx
new file mode 100644
index 000000000..f4d025a3d
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/CommunicationLogs.jsx
@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  ScrollArea,
+  Table,
+  Text,
+  Container,
+  Paper,
+  LoadingOverlay,
+  Select,
+  Badge,
+  Group,
+  Alert,
+} from "@mantine/core";
+import axios from "axios";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+import AddCommunicationLog from "./AddCommunicationLog.jsx";
+import CommunicationLogDetail from "./CommunicationLogDetail.jsx";
+import "../../../style/Pcc_Admin/ManageAttorneys.css";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+function CommunicationLogs() {
+  const [logs, setLogs] = useState([]);
+  const [applications, setApplications] = useState([]);
+  const [selectedApplicationId, setSelectedApplicationId] = useState(null);
+  const [selectedLog, setSelectedLog] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [isAddingLog, setIsAddingLog] = useState(false);
+
+  const authToken = localStorage.getItem("authToken");
+
+  // Fetch ongoing applications for the dropdown
+  useEffect(() => {
+    const fetchApplications = async () => {
+      try {
+        setIsLoading(true);
+        const [ongoingRes, newRes] = await Promise.all([
+          axios.get(`${API_BASE_URL}/pccAdmin/applications/ongoing/`, {
+            headers: { Authorization: `Token ${authToken}` },
+          }),
+          axios.get(`${API_BASE_URL}/pccAdmin/applications/new/`, {
+            headers: { Authorization: `Token ${authToken}` },
+          }),
+        ]);
+
+        const ongoingData = ongoingRes.data.applications || [];
+        const newData = newRes.data.applications || [];
+
+        const ongoingApps = Array.isArray(ongoingData)
+          ? ongoingData
+          : Object.entries(ongoingData).map(([id, app]) => ({
+              application_id: parseInt(id, 10),
+              ...app,
+            }));
+
+        const newApps = Array.isArray(newData)
+          ? newData
+          : Object.entries(newData).map(([id, app]) => ({
+              application_id: parseInt(id, 10),
+              ...app,
+            }));
+
+        const allApps = [...newApps, ...ongoingApps];
+
+        // Deduplicate by id
+        const uniqueApps = allApps.reduce((acc, app) => {
+          if (!acc.find((a) => a.application_id === app.application_id)) {
+            acc.push(app);
+          }
+          return acc;
+        }, []);
+
+        setApplications(uniqueApps);
+        setError(null);
+      } catch (err) {
+        console.error("Error fetching applications:", err);
+        setError("Failed to load applications.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchApplications();
+  }, [authToken]);
+
+  // Fetch communication logs when application is selected
+  useEffect(() => {
+    if (!selectedApplicationId) {
+      setLogs([]);
+      return;
+    }
+
+    const fetchLogs = async () => {
+      try {
+        setIsLoading(true);
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/${selectedApplicationId}/communications/`,
+          {
+            headers: { Authorization: `Token ${authToken}` },
+          },
+        );
+
+        let fetchedLogs = response.data || [];
+        if (!Array.isArray(fetchedLogs)) {
+          fetchedLogs = Object.keys(fetchedLogs).map((key) => fetchedLogs[key]);
+        }
+        setLogs(fetchedLogs);
+        setError(null);
+      } catch (err) {
+        console.error("Error fetching communication logs:", err);
+        setError("Failed to load communication logs.");
+        setLogs([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchLogs();
+  }, [selectedApplicationId, authToken]);
+
+  const handleViewDetail = (log) => {
+    setSelectedLog(log);
+    setIsAddingLog(false);
+  };
+
+  const handleBackToList = async () => {
+    setSelectedLog(null);
+    setIsAddingLog(false);
+    // Refresh logs
+    if (selectedApplicationId) {
+      try {
+        setIsLoading(true);
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/${selectedApplicationId}/communications/`,
+          {
+            headers: { Authorization: `Token ${authToken}` },
+          },
+        );
+
+        let fetchedLogs = response.data || [];
+        if (!Array.isArray(fetchedLogs)) {
+          fetchedLogs = Object.keys(fetchedLogs).map((key) => fetchedLogs[key]);
+        }
+        setLogs(fetchedLogs);
+      } catch (err) {
+        console.error("Error refreshing logs:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const handleAddLogClick = () => {
+    if (!selectedApplicationId) {
+      setError("Please select an application first.");
+      return;
+    }
+    setIsAddingLog(true);
+    setSelectedLog(null);
+  };
+
+  const handleLogAdded = async () => {
+    setIsAddingLog(false);
+    // Refresh logs
+    if (selectedApplicationId) {
+      try {
+        setIsLoading(true);
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/${selectedApplicationId}/communications/`,
+          {
+            headers: { Authorization: `Token ${authToken}` },
+          },
+        );
+
+        let fetchedLogs = response.data || [];
+        if (!Array.isArray(fetchedLogs)) {
+          fetchedLogs = Object.keys(fetchedLogs).map((key) => fetchedLogs[key]);
+        }
+        setLogs(fetchedLogs);
+      } catch (err) {
+        console.error("Error refreshing logs:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return "N/A";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const getDirectionBadge = (direction) => {
+    if (direction === "OUTGOING") {
+      return (
+        <Badge color="blue" variant="light">
+          Outgoing
+        </Badge>
+      );
+    }
+    return (
+      <Badge color="green" variant="light">
+        Incoming
+      </Badge>
+    );
+  };
+
+  // Show detail view
+  if (selectedLog) {
+    return (
+      <CommunicationLogDetail log={selectedLog} onBack={handleBackToList} />
+    );
+  }
+
+  // Show add form
+  if (isAddingLog) {
+    return (
+      <AddCommunicationLog
+        applicationId={selectedApplicationId}
+        onBack={handleBackToList}
+        onSuccess={handleLogAdded}
+      />
+    );
+  }
+
+  const applicationOptions = applications.map((app) => ({
+    value: String(app.application_id),
+    label: `#${app.application_id} — ${app.title || "Untitled"}`,
+  }));
+
+  return (
+    <Container id="pms-pcc-manage-attorneys-container">
+      <Text id="pms-pcc-page-heading-title">Communication Logs</Text>
+      <Text size="sm" color="dimmed" mb="md">
+        Log and track all external communications with attorneys, patent
+        offices, and other parties.
+      </Text>
+
+      {error && (
+        <Alert
+          color="red"
+          mb="md"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+
+      {/* Application Selector */}
+      <Group mb="md" align="flex-end">
+        <Select
+          label="Select Application"
+          placeholder="Choose an application to view logs"
+          data={applicationOptions}
+          value={selectedApplicationId ? String(selectedApplicationId) : null}
+          onChange={(val) => setSelectedApplicationId(val)}
+          searchable
+          clearable
+          style={{ flex: 1, maxWidth: 500 }}
+        />
+
+        <Button
+          variant="outline"
+          color="blue"
+          onClick={handleAddLogClick}
+          id="pms-pcc-add-new-attorney-button"
+          disabled={!selectedApplicationId}
+        >
+          + Add Communication Log
+        </Button>
+      </Group>
+
+      {isLoading && <LoadingOverlay visible />}
+
+      {selectedApplicationId && !isLoading && (
+        <Paper id="pms-pcc-manage-attorney-table-card">
+          <ScrollArea>
+            <Table
+              highlightOnHover
+              striped
+              withBorder
+              id="pms-pcc-manage-attorney-styledTable"
+            >
+              <thead id="pms-pcc-fusionTableHeader">
+                <tr>
+                  <th>Date</th>
+                  <th>Direction</th>
+                  <th>Subject</th>
+                  <th>External Party</th>
+                  <th>Confidentiality</th>
+                  <th>Logged By</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {logs.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} style={{ textAlign: "center" }}>
+                      <Text color="dimmed" py="md">
+                        No communication logs found for this application.
+                      </Text>
+                    </td>
+                  </tr>
+                ) : (
+                  logs.map((log) => (
+                    <tr key={log.id}>
+                      <td>{formatDate(log.created_at)}</td>
+                      <td>{getDirectionBadge(log.direction)}</td>
+                      <td>{log.subject}</td>
+                      <td>{log.external_party_name || "N/A"}</td>
+                      <td>
+                        <Badge
+                          color={
+                            log.confidentiality_level ===
+                            "Attorney-Client Privileged"
+                              ? "red"
+                              : log.confidentiality_level === "Confidential"
+                                ? "orange"
+                                : log.confidentiality_level === "Public"
+                                  ? "green"
+                                  : "blue"
+                          }
+                          variant="light"
+                        >
+                          {log.confidentiality_level || "Internal"}
+                        </Badge>
+                      </td>
+                      <td>{log.logged_by_name || "PCC Admin"}</td>
+                      <td>
+                        <Button
+                          variant="subtle"
+                          color="blue"
+                          onClick={() => handleViewDetail(log)}
+                          id="pms-pcc-view-details-button"
+                        >
+                          View Details
+                        </Button>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </Table>
+          </ScrollArea>
+        </Paper>
+      )}
+
+      {!selectedApplicationId && !isLoading && (
+        <Paper p="xl" withBorder mt="md" style={{ textAlign: "center" }}>
+          <Text color="dimmed" size="lg">
+            Select an application above to view its communication logs.
+          </Text>
+        </Paper>
+      )}
+    </Container>
+  );
+}
+
+export default CommunicationLogs;
diff --git a/src/Modules/Patent/components/PCCAdmin/ManageAttorney/FilingRecord.jsx b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/FilingRecord.jsx
new file mode 100644
index 000000000..8a61af23a
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/FilingRecord.jsx
@@ -0,0 +1,465 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  TextInput,
+  Textarea,
+  Button,
+  Title,
+  Select,
+  FileInput,
+  Alert,
+  LoadingOverlay,
+  Card,
+  Text,
+  Badge,
+  Group,
+} from "@mantine/core";
+import {
+  FileText,
+  ArrowLeft,
+  Paperclip,
+  Globe,
+  Calendar,
+  Buildings,
+  Hash,
+} from "phosphor-react";
+import { filingRecordService } from "../../../services/attorneyService.jsx";
+import "../../../style/Pcc_Admin/NewAttorneyForm.css";
+
+function FilingRecord({ applicationId, onBack }) {
+  const [existingRecord, setExistingRecord] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    filing_office: "",
+    jurisdiction: "India",
+    external_filing_id: "",
+    filing_date: "",
+    international_filing_justification: "",
+    remarks: "",
+  });
+  const [confirmationProof, setConfirmationProof] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+
+  useEffect(() => {
+    const fetchRecord = async () => {
+      try {
+        setIsLoading(true);
+        const data = await filingRecordService.getFilingRecord(applicationId);
+        // data could be { filing_record: null } from backend if none exists
+        if (data && !("filing_record" in data && data.filing_record === null)) {
+          setExistingRecord(data);
+          setFormData({
+            filing_office: data.filing_office || "",
+            jurisdiction: data.jurisdiction || "India",
+            external_filing_id: data.external_filing_id || "",
+            filing_date: data.filing_date || "",
+            international_filing_justification:
+              data.international_filing_justification || "",
+            remarks: data.remarks || "",
+          });
+        }
+      } catch (err) {
+        console.error("Error fetching filing record:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchRecord();
+  }, [applicationId]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+
+    if (!formData.filing_office.trim()) {
+      setError("Filing office is required.");
+      return;
+    }
+    if (!formData.jurisdiction.trim()) {
+      setError("Jurisdiction is required.");
+      return;
+    }
+    if (!formData.filing_date) {
+      setError("Filing date is required.");
+      return;
+    }
+
+    // Validate international filing justification for non-Indian jurisdictions
+    if (
+      formData.jurisdiction !== "India" &&
+      (!formData.international_filing_justification ||
+        formData.international_filing_justification.trim().length < 10)
+    ) {
+      setError(
+        "International filing justification is required (minimum 10 characters) for non-Indian jurisdictions.",
+      );
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      await filingRecordService.recordFiling(applicationId, {
+        ...formData,
+        confirmation_proof: confirmationProof,
+      });
+
+      setSuccess("Filing record saved successfully!");
+      setIsEditing(false);
+
+      const data = await filingRecordService.getFilingRecord(applicationId);
+      if (data) {
+        setExistingRecord(data);
+      }
+    } catch (err) {
+      setError(err.message || "Failed to record filing.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingOverlay visible />;
+  }
+
+  // View mode
+  if (existingRecord && !isEditing) {
+    return (
+      <div id="pcc-new-attorney-form-container">
+        <div id="pcc-new-attorney-form-header">
+          <Title order={2} id="pcc-new-attorney-form-title">
+            Filing Record
+          </Title>
+          <Group>
+            <Button
+              variant="outline"
+              color="blue"
+              onClick={() => setIsEditing(true)}
+            >
+              Update Record
+            </Button>
+            <Button
+              variant="subtle"
+              leftIcon={<ArrowLeft size={20} weight="bold" />}
+              onClick={onBack}
+            >
+              Back
+            </Button>
+          </Group>
+        </div>
+
+        {success && (
+          <Alert
+            color="green"
+            mb="md"
+            withCloseButton
+            onClose={() => setSuccess(null)}
+          >
+            {success}
+          </Alert>
+        )}
+
+        <Card p="lg" radius="md" withBorder mb="md">
+          <Group mb="md">
+            <Badge size="lg" color="green" variant="filled">
+              Filed
+            </Badge>
+            <Badge size="lg" color="blue" variant="light">
+              {existingRecord.jurisdiction || "India"}
+            </Badge>
+          </Group>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Filing Office
+            </Text>
+            <Text size="md">{existingRecord.filing_office}</Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Jurisdiction
+            </Text>
+            <Text size="md">{existingRecord.jurisdiction}</Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              External Filing ID
+            </Text>
+            <Text size="md">
+              {existingRecord.external_filing_id || "Not assigned yet"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Filing Date
+            </Text>
+            <Text size="md">
+              {existingRecord.filing_date
+                ? new Date(existingRecord.filing_date).toLocaleDateString(
+                    "en-US",
+                    {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    },
+                  )
+                : "N/A"}
+            </Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Filed By
+            </Text>
+            <Text size="md">{existingRecord.filed_by_name || "PCC Admin"}</Text>
+          </div>
+
+          {existingRecord.jurisdiction !== "India" &&
+            existingRecord.international_filing_justification && (
+              <div style={{ marginBottom: "12px" }}>
+                <Text weight={500} size="sm" color="dimmed">
+                  International Filing Justification
+                </Text>
+                <Text
+                  size="md"
+                  style={{
+                    whiteSpace: "pre-wrap",
+                    backgroundColor: "#f8f9fa",
+                    padding: "8px",
+                    borderRadius: "6px",
+                  }}
+                >
+                  {existingRecord.international_filing_justification}
+                </Text>
+              </div>
+            )}
+
+          {existingRecord.remarks && (
+            <div style={{ marginBottom: "12px" }}>
+              <Text weight={500} size="sm" color="dimmed">
+                Remarks
+              </Text>
+              <Text size="md">{existingRecord.remarks}</Text>
+            </div>
+          )}
+
+          {existingRecord.confirmation_proof && (
+            <div style={{ marginBottom: "12px" }}>
+              <Text weight={500} size="sm" color="dimmed">
+                Confirmation Proof
+              </Text>
+              <Button
+                component="a"
+                href={existingRecord.confirmation_proof}
+                target="_blank"
+                download
+                variant="outline"
+                color="blue"
+                leftIcon={<Paperclip size={18} />}
+                mt="xs"
+              >
+                Download Proof
+              </Button>
+            </div>
+          )}
+        </Card>
+      </div>
+    );
+  }
+
+  // Edit/Create form
+  return (
+    <div id="pcc-new-attorney-form-container">
+      <LoadingOverlay visible={isSaving} />
+
+      <div id="pcc-new-attorney-form-header">
+        <Title order={2} id="pcc-new-attorney-form-title">
+          {existingRecord ? "Update Filing Record" : "Record Patent Filing"}
+        </Title>
+        <Button
+          variant="subtle"
+          leftIcon={<ArrowLeft size={20} weight="bold" />}
+          onClick={existingRecord ? () => setIsEditing(false) : onBack}
+          id="pcc-new-attorney-back-btn"
+        >
+          {existingRecord ? "Cancel" : "Back"}
+        </Button>
+      </div>
+
+      {error && (
+        <Alert
+          color="red"
+          mb="md"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit} id="pcc-new-attorney-form-content">
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Buildings size={20} id="pcc-new-attorney-form-icon" />
+              <span>Filing Office *</span>
+            </div>
+            <TextInput
+              name="filing_office"
+              value={formData.filing_office}
+              onChange={handleChange}
+              required
+              placeholder="e.g. Indian Patent Office, USPTO, EPO"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Globe size={20} id="pcc-new-attorney-form-icon" />
+              <span>Jurisdiction *</span>
+            </div>
+            <Select
+              placeholder="Select jurisdiction"
+              data={[
+                { value: "India", label: "India" },
+                { value: "United States", label: "United States" },
+                { value: "European Union", label: "European Union" },
+                { value: "China", label: "China" },
+                { value: "Japan", label: "Japan" },
+                { value: "South Korea", label: "South Korea" },
+                { value: "International (PCT)", label: "International (PCT)" },
+                { value: "Other", label: "Other" },
+              ]}
+              value={formData.jurisdiction}
+              onChange={(val) =>
+                setFormData({ ...formData, jurisdiction: val || "India" })
+              }
+              required
+              searchable
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Hash size={20} id="pcc-new-attorney-form-icon" />
+              <span>External Filing ID</span>
+            </div>
+            <TextInput
+              name="external_filing_id"
+              value={formData.external_filing_id}
+              onChange={handleChange}
+              placeholder="Application number from patent office"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Calendar size={20} id="pcc-new-attorney-form-icon" />
+              <span>Filing Date *</span>
+            </div>
+            <TextInput
+              name="filing_date"
+              type="date"
+              value={formData.filing_date}
+              onChange={handleChange}
+              required
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        {formData.jurisdiction !== "India" && (
+          <div id="pcc-new-attorney-form-section">
+            <div id="pcc-new-attorney-form-field" style={{ width: "100%" }}>
+              <div id="pcc-new-attorney-form-label">
+                <Globe size={20} id="pcc-new-attorney-form-icon" />
+                <span>International Filing Justification * (min 10 chars)</span>
+              </div>
+              <Textarea
+                name="international_filing_justification"
+                value={formData.international_filing_justification}
+                onChange={handleChange}
+                required
+                minRows={3}
+                maxRows={6}
+                placeholder="Justify why this patent needs to be filed internationally..."
+                id="pcc-new-attorney-form-input"
+              />
+            </div>
+          </div>
+        )}
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Paperclip size={20} id="pcc-new-attorney-form-icon" />
+              <span>Confirmation Proof (optional)</span>
+            </div>
+            <FileInput
+              placeholder="Upload filing receipt / confirmation"
+              value={confirmationProof}
+              onChange={setConfirmationProof}
+              accept="image/*,application/pdf,.doc,.docx"
+              clearable
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field" style={{ width: "100%" }}>
+            <div id="pcc-new-attorney-form-label">
+              <FileText size={20} id="pcc-new-attorney-form-icon" />
+              <span>Remarks</span>
+            </div>
+            <Textarea
+              name="remarks"
+              value={formData.remarks}
+              onChange={handleChange}
+              minRows={3}
+              maxRows={6}
+              placeholder="Any additional remarks about the filing..."
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-footer">
+          <Button
+            type="submit"
+            variant="filled"
+            color="blue"
+            id="pcc-new-attorney-form-submit-btn"
+            loading={isSaving}
+          >
+            {existingRecord ? "Update Filing Record" : "Record Filing"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+FilingRecord.propTypes = {
+  applicationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default FilingRecord;
diff --git a/src/Modules/Patent/components/PCCAdmin/ManageAttorney/PatentabilityAssessment.jsx b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/PatentabilityAssessment.jsx
new file mode 100644
index 000000000..72dd18b65
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/ManageAttorney/PatentabilityAssessment.jsx
@@ -0,0 +1,586 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  TextInput,
+  Textarea,
+  Button,
+  Title,
+  Select,
+  FileInput,
+  Alert,
+  LoadingOverlay,
+  Card,
+  Text,
+  Badge,
+  Group,
+  NumberInput,
+  Progress,
+} from "@mantine/core";
+import {
+  MagnifyingGlass,
+  ArrowLeft,
+  Paperclip,
+  ChartBar,
+  Lightbulb,
+  Scales,
+  Star,
+} from "phosphor-react";
+import { patentabilityAssessmentService } from "../../../services/attorneyService.jsx";
+import "../../../style/Pcc_Admin/NewAttorneyForm.css";
+
+function PatentabilityAssessment({ applicationId, onBack }) {
+  const [existingAssessment, setExistingAssessment] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    assessed_by_attorney: "",
+    novelty_score: "",
+    non_obviousness_score: "",
+    utility_score: "",
+    search_completeness: "",
+    recommendation: "",
+    opinion_summary: "",
+    prior_art_references: "",
+  });
+  const [attorneyReport, setAttorneyReport] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+
+  useEffect(() => {
+    const fetchAssessment = async () => {
+      try {
+        setIsLoading(true);
+        const data =
+          await patentabilityAssessmentService.getAssessment(applicationId);
+        if (data) {
+          setExistingAssessment(data);
+          setFormData({
+            assessed_by_attorney: data.assessed_by_attorney || "",
+            novelty_score: data.novelty_score ?? "",
+            non_obviousness_score: data.non_obviousness_score ?? "",
+            utility_score: data.utility_score ?? "",
+            search_completeness: data.search_completeness ?? "",
+            recommendation: data.recommendation || "",
+            opinion_summary: data.opinion_summary || "",
+            prior_art_references: data.prior_art_references || "",
+          });
+        }
+      } catch (err) {
+        console.error("Error fetching assessment:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchAssessment();
+  }, [applicationId]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+
+    if (!formData.assessed_by_attorney.trim()) {
+      setError("Attorney name who performed the assessment is required.");
+      return;
+    }
+    if (!formData.recommendation) {
+      setError("Recommendation is required.");
+      return;
+    }
+    if (
+      !formData.opinion_summary ||
+      formData.opinion_summary.trim().length < 20
+    ) {
+      setError("Opinion summary must be at least 20 characters.");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      await patentabilityAssessmentService.recordAssessment(applicationId, {
+        ...formData,
+        attorney_report: attorneyReport,
+      });
+
+      setSuccess("Patentability assessment recorded successfully!");
+      setIsEditing(false);
+
+      const data =
+        await patentabilityAssessmentService.getAssessment(applicationId);
+      if (data) {
+        setExistingAssessment(data);
+      }
+    } catch (err) {
+      setError(err.message || "Failed to record assessment.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const getRecommendationColor = (rec) => {
+    switch (rec) {
+      case "File Patent":
+        return "green";
+      case "Do Not File":
+        return "red";
+      case "Needs Amendment":
+        return "orange";
+      default:
+        return "gray";
+    }
+  };
+
+  const getScoreColor = (score) => {
+    if (score >= 80) return "green";
+    if (score >= 60) return "blue";
+    if (score >= 40) return "yellow";
+    return "red";
+  };
+
+  if (isLoading) {
+    return <LoadingOverlay visible />;
+  }
+
+  // View mode
+  if (existingAssessment && !isEditing) {
+    return (
+      <div id="pcc-new-attorney-form-container">
+        <div id="pcc-new-attorney-form-header">
+          <Title order={2} id="pcc-new-attorney-form-title">
+            Patentability Assessment
+          </Title>
+          <Group>
+            <Button
+              variant="outline"
+              color="blue"
+              onClick={() => setIsEditing(true)}
+            >
+              Update Assessment
+            </Button>
+            <Button
+              variant="subtle"
+              leftIcon={<ArrowLeft size={20} weight="bold" />}
+              onClick={onBack}
+            >
+              Back
+            </Button>
+          </Group>
+        </div>
+
+        {success && (
+          <Alert
+            color="green"
+            mb="md"
+            withCloseButton
+            onClose={() => setSuccess(null)}
+          >
+            {success}
+          </Alert>
+        )}
+
+        <Card p="lg" radius="md" withBorder mb="md">
+          <Group mb="md">
+            <Badge
+              size="lg"
+              color={getRecommendationColor(existingAssessment.recommendation)}
+              variant="filled"
+            >
+              {existingAssessment.recommendation || "Pending"}
+            </Badge>
+          </Group>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Assessed By (Attorney)
+            </Text>
+            <Text size="md">{existingAssessment.assessed_by_attorney}</Text>
+          </div>
+
+          <div style={{ marginBottom: "12px" }}>
+            <Text weight={500} size="sm" color="dimmed">
+              Assessment Date
+            </Text>
+            <Text size="md">
+              {existingAssessment.assessment_date
+                ? new Date(
+                    existingAssessment.assessment_date,
+                  ).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })
+                : "N/A"}
+            </Text>
+          </div>
+        </Card>
+
+        <Card p="lg" radius="md" withBorder mb="md">
+          <Text weight={600} size="lg" mb="md">
+            Scores
+          </Text>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Group position="apart" mb={4}>
+              <Text size="sm" weight={500}>
+                Novelty Score
+              </Text>
+              <Text size="sm" weight={600}>
+                {existingAssessment.novelty_score ?? "N/A"}/100
+              </Text>
+            </Group>
+            {existingAssessment.novelty_score != null && (
+              <Progress
+                value={existingAssessment.novelty_score}
+                color={getScoreColor(existingAssessment.novelty_score)}
+                size="lg"
+                radius="xl"
+              />
+            )}
+          </div>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Group position="apart" mb={4}>
+              <Text size="sm" weight={500}>
+                Non-Obviousness Score
+              </Text>
+              <Text size="sm" weight={600}>
+                {existingAssessment.non_obviousness_score ?? "N/A"}/100
+              </Text>
+            </Group>
+            {existingAssessment.non_obviousness_score != null && (
+              <Progress
+                value={existingAssessment.non_obviousness_score}
+                color={getScoreColor(existingAssessment.non_obviousness_score)}
+                size="lg"
+                radius="xl"
+              />
+            )}
+          </div>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Group position="apart" mb={4}>
+              <Text size="sm" weight={500}>
+                Utility Score
+              </Text>
+              <Text size="sm" weight={600}>
+                {existingAssessment.utility_score ?? "N/A"}/100
+              </Text>
+            </Group>
+            {existingAssessment.utility_score != null && (
+              <Progress
+                value={existingAssessment.utility_score}
+                color={getScoreColor(existingAssessment.utility_score)}
+                size="lg"
+                radius="xl"
+              />
+            )}
+          </div>
+
+          <div style={{ marginBottom: "16px" }}>
+            <Group position="apart" mb={4}>
+              <Text size="sm" weight={500}>
+                Search Completeness
+              </Text>
+              <Text size="sm" weight={600}>
+                {existingAssessment.search_completeness ?? "N/A"}/100
+              </Text>
+            </Group>
+            {existingAssessment.search_completeness != null && (
+              <Progress
+                value={existingAssessment.search_completeness}
+                color={getScoreColor(existingAssessment.search_completeness)}
+                size="lg"
+                radius="xl"
+              />
+            )}
+          </div>
+        </Card>
+
+        <Card p="lg" radius="md" withBorder mb="md">
+          <Text weight={600} size="lg" mb="sm">
+            Opinion Summary
+          </Text>
+          <Text
+            style={{
+              whiteSpace: "pre-wrap",
+              lineHeight: 1.6,
+              backgroundColor: "#f8f9fa",
+              padding: "12px",
+              borderRadius: "8px",
+            }}
+          >
+            {existingAssessment.opinion_summary || "No summary provided."}
+          </Text>
+        </Card>
+
+        {existingAssessment.prior_art_references && (
+          <Card p="lg" radius="md" withBorder mb="md">
+            <Text weight={600} size="lg" mb="sm">
+              Prior Art References
+            </Text>
+            <Text
+              style={{
+                whiteSpace: "pre-wrap",
+                lineHeight: 1.6,
+                backgroundColor: "#f8f9fa",
+                padding: "12px",
+                borderRadius: "8px",
+              }}
+            >
+              {existingAssessment.prior_art_references}
+            </Text>
+          </Card>
+        )}
+
+        {existingAssessment.attorney_report && (
+          <Card p="lg" radius="md" withBorder mb="md">
+            <Text weight={600} size="lg" mb="sm">
+              Attorney Report
+            </Text>
+            <Button
+              component="a"
+              href={existingAssessment.attorney_report}
+              target="_blank"
+              download
+              variant="outline"
+              color="blue"
+              leftIcon={<Paperclip size={18} />}
+            >
+              Download Report
+            </Button>
+          </Card>
+        )}
+      </div>
+    );
+  }
+
+  // Edit/Create form
+  return (
+    <div id="pcc-new-attorney-form-container">
+      <LoadingOverlay visible={isSaving} />
+
+      <div id="pcc-new-attorney-form-header">
+        <Title order={2} id="pcc-new-attorney-form-title">
+          {existingAssessment
+            ? "Update Patentability Assessment"
+            : "Record Patentability Assessment"}
+        </Title>
+        <Button
+          variant="subtle"
+          leftIcon={<ArrowLeft size={20} weight="bold" />}
+          onClick={existingAssessment ? () => setIsEditing(false) : onBack}
+          id="pcc-new-attorney-back-btn"
+        >
+          {existingAssessment ? "Cancel" : "Back"}
+        </Button>
+      </div>
+
+      {error && (
+        <Alert
+          color="red"
+          mb="md"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit} id="pcc-new-attorney-form-content">
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <MagnifyingGlass size={20} id="pcc-new-attorney-form-icon" />
+              <span>Assessed By (Attorney Name) *</span>
+            </div>
+            <TextInput
+              value={formData.assessed_by_attorney}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  assessed_by_attorney: e.target.value,
+                })
+              }
+              required
+              placeholder="Name of attorney who conducted the assessment"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Star size={20} id="pcc-new-attorney-form-icon" />
+              <span>Recommendation *</span>
+            </div>
+            <Select
+              placeholder="Select recommendation"
+              data={[
+                { value: "File Patent", label: "File Patent" },
+                { value: "Do Not File", label: "Do Not File" },
+                { value: "Needs Amendment", label: "Needs Amendment" },
+              ]}
+              value={formData.recommendation}
+              onChange={(val) =>
+                setFormData({ ...formData, recommendation: val || "" })
+              }
+              required
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Lightbulb size={20} id="pcc-new-attorney-form-icon" />
+              <span>Novelty Score (0-100)</span>
+            </div>
+            <NumberInput
+              value={formData.novelty_score}
+              onChange={(val) =>
+                setFormData({ ...formData, novelty_score: val })
+              }
+              min={0}
+              max={100}
+              placeholder="0-100"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Scales size={20} id="pcc-new-attorney-form-icon" />
+              <span>Non-Obviousness Score (0-100)</span>
+            </div>
+            <NumberInput
+              value={formData.non_obviousness_score}
+              onChange={(val) =>
+                setFormData({ ...formData, non_obviousness_score: val })
+              }
+              min={0}
+              max={100}
+              placeholder="0-100"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <ChartBar size={20} id="pcc-new-attorney-form-icon" />
+              <span>Utility Score (0-100)</span>
+            </div>
+            <NumberInput
+              value={formData.utility_score}
+              onChange={(val) =>
+                setFormData({ ...formData, utility_score: val })
+              }
+              min={0}
+              max={100}
+              placeholder="0-100"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <MagnifyingGlass size={20} id="pcc-new-attorney-form-icon" />
+              <span>Search Completeness (0-100)</span>
+            </div>
+            <NumberInput
+              value={formData.search_completeness}
+              onChange={(val) =>
+                setFormData({ ...formData, search_completeness: val })
+              }
+              min={0}
+              max={100}
+              placeholder="0-100"
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field" style={{ width: "100%" }}>
+            <div id="pcc-new-attorney-form-label">
+              <Lightbulb size={20} id="pcc-new-attorney-form-icon" />
+              <span>Opinion Summary * (min 20 chars)</span>
+            </div>
+            <Textarea
+              value={formData.opinion_summary}
+              onChange={(e) =>
+                setFormData({ ...formData, opinion_summary: e.target.value })
+              }
+              required
+              minRows={5}
+              maxRows={10}
+              placeholder="Detailed opinion on the patentability of the invention..."
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field" style={{ width: "100%" }}>
+            <div id="pcc-new-attorney-form-label">
+              <MagnifyingGlass size={20} id="pcc-new-attorney-form-icon" />
+              <span>Prior Art References</span>
+            </div>
+            <Textarea
+              value={formData.prior_art_references}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  prior_art_references: e.target.value,
+                })
+              }
+              minRows={3}
+              maxRows={8}
+              placeholder="List any prior art references found during the search..."
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-section">
+          <div id="pcc-new-attorney-form-field">
+            <div id="pcc-new-attorney-form-label">
+              <Paperclip size={20} id="pcc-new-attorney-form-icon" />
+              <span>Attorney Report (optional)</span>
+            </div>
+            <FileInput
+              placeholder="Upload attorney's assessment report"
+              value={attorneyReport}
+              onChange={setAttorneyReport}
+              accept="image/*,application/pdf,.doc,.docx"
+              clearable
+              id="pcc-new-attorney-form-input"
+            />
+          </div>
+        </div>
+
+        <div id="pcc-new-attorney-form-footer">
+          <Button
+            type="submit"
+            variant="filled"
+            color="blue"
+            id="pcc-new-attorney-form-submit-btn"
+            loading={isSaving}
+          >
+            {existingAssessment ? "Update Assessment" : "Record Assessment"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+PatentabilityAssessment.propTypes = {
+  applicationId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default PatentabilityAssessment;
diff --git a/src/Modules/Patent/components/PCCAdmin/NewApplication/NewApplicaion.jsx b/src/Modules/Patent/components/PCCAdmin/NewApplication/NewApplicaion.jsx
new file mode 100644
index 000000000..8c722a7a8
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/NewApplication/NewApplicaion.jsx
@@ -0,0 +1,337 @@
+import React, { useState, useEffect } from "react";
+import { Box, Button, Table, Text, Loader, Alert, Group } from "@mantine/core";
+import { Eye, ArrowsClockwise } from "@phosphor-icons/react";
+import axios from "axios";
+import ViewNewApplication from "./ViewNewApplication";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+function NewApplication() {
+  const [selectedApplicationId, setSelectedApplicationId] = useState(null);
+  const [applications, setApplications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const columnNames = [
+    "S.No.",
+    "Application Number",
+    "Token Number",
+    "Patent Title",
+    "Inventor 1",
+    "Designation",
+    "Department",
+    "Date",
+    "Actions",
+  ];
+
+  // Assign percent widths to each column (total 100%)
+  const columnPercents = [
+    "5%", // S.No.
+    "12%", // Application Number
+    "10%", // Token Number
+    "22%", // Patent Title
+    "11%", // Inventor 1
+    "10%", // Designation
+    "10%", // Department
+    "10%", // Date
+    "10%", // Actions
+  ];
+
+  const fetchApplications = async (showRefresh = false) => {
+    try {
+      if (showRefresh) {
+        setIsRefreshing(true);
+      } else {
+        setLoading(true);
+      }
+      const response = await axios.get(
+        `${host}/patentsystem/pccAdmin/applications/new/`,
+        {
+          headers: {
+            Authorization: `Token ${localStorage.getItem("authToken")}`,
+          },
+        },
+      );
+      const applicationsArray = Object.entries(response.data.applications).map(
+        ([appId, appData]) => ({
+          id: appId,
+          token_no: appData.token_no || "Not Assigned",
+          ...appData,
+        }),
+      );
+      setApplications(applicationsArray);
+      setError(null);
+    } catch (err) {
+      setError(
+        err.response?.data?.message ||
+          "Unable to fetch applications. Please try again later.",
+      );
+    } finally {
+      setLoading(false);
+      if (showRefresh) {
+        setIsRefreshing(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchApplications();
+  }, []);
+
+  const handleViewClick = (applicationId) => {
+    setSelectedApplicationId(applicationId);
+  };
+
+  const handleBackClick = () => {
+    setSelectedApplicationId(null);
+  };
+
+  const handleRefresh = () => {
+    fetchApplications(true);
+  };
+
+  const renderApplicationsTable = () => {
+    if (loading) {
+      return (
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "40px 0",
+          }}
+        >
+          <Loader size="lg" color="blue" />
+          <Text mt={10}>Loading applications...</Text>
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Alert color="red" title="Error loading applications">
+          {error}
+        </Alert>
+      );
+    }
+
+    if (applications.length === 0) {
+      return (
+        <Alert color="blue" title="No applications">
+          There are no new applications to review at this time.
+        </Alert>
+      );
+    }
+
+    return (
+      <Table
+        striped
+        highlightOnHover
+        withBorder
+        style={{
+          width: "100%",
+          tableLayout: "fixed", // force columns to squeeze
+          fontSize: "14px",
+        }}
+      >
+        <thead>
+          <tr>
+            {columnNames.map((col, idx) => (
+              <th
+                key={col}
+                style={{
+                  width: columnPercents[idx],
+                  padding: "8px 6px",
+                  fontWeight: 600,
+                  color: "#333",
+                  textAlign: "left",
+                  background: "#f8f9fa",
+                  borderBottom: "2px solid #dee2e6",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {col}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {applications.map((application, index) => (
+            <tr
+              key={application.id}
+              style={{
+                backgroundColor: index % 2 === 0 ? "#fff" : "#f6f6fb",
+              }}
+            >
+              <td
+                style={{
+                  width: columnPercents[0],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {index + 1}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[1],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {application.id}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[2],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {application.token_no || "Not Assigned"}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[3],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+                title={application.title}
+              >
+                {application.title}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[4],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {application.submitted_by}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[5],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {application.designation}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[6],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {application.department}
+              </td>
+              <td
+                style={{
+                  width: columnPercents[7],
+                  padding: "8px 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {application.submitted_on}
+              </td>
+              <td style={{ width: columnPercents[8], padding: "8px 6px" }}>
+                <Group position="left" spacing="xs">
+                  <Button
+                    variant="outline"
+                    color="blue"
+                    size="sm"
+                    onClick={() => handleViewClick(application.id)}
+                  >
+                    <Eye size={16} />
+                    <span>View</span>
+                  </Button>
+                </Group>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    );
+  };
+
+  return (
+    <Box
+      style={{
+        position: "relative",
+        width: "100%",
+        maxWidth: "100%",
+      }}
+    >
+      {!selectedApplicationId ? (
+        <>
+          <Text
+            style={{
+              textAlign: "left",
+              fontSize: "24px",
+              fontWeight: 600,
+              marginLeft: "50px",
+            }}
+          >
+            New Applications
+          </Text>
+          <Text size="md" color="dimmed" style={{ textAlign: "left" }} />
+
+          <Group position="left" mb="sm">
+            <Button
+              variant="subtle"
+              color="blue"
+              size="sm"
+              onClick={handleRefresh}
+              loading={isRefreshing}
+              style={{ marginLeft: "50px" }}
+              leftIcon={<ArrowsClockwise size={16} />}
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+          </Group>
+
+          <Box
+            style={{
+              maxWidth: "100%",
+              padding: "12px 50px",
+              backgroundColor: "transparent",
+              borderRadius: "12px",
+              marginBottom: "20px",
+              boxShadow: "0px 5px 15px rgba(0, 0, 0, 0)",
+            }}
+          >
+            {renderApplicationsTable()}
+          </Box>
+        </>
+      ) : (
+        <ViewNewApplication
+          applicationId={selectedApplicationId}
+          handleBackToList={handleBackClick}
+        />
+      )}
+    </Box>
+  );
+}
+
+export default NewApplication;
diff --git a/src/Modules/Patent/components/PCCAdmin/NewApplication/ViewNewApplication.jsx b/src/Modules/Patent/components/PCCAdmin/NewApplication/ViewNewApplication.jsx
new file mode 100644
index 000000000..beb98785d
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/NewApplication/ViewNewApplication.jsx
@@ -0,0 +1,1211 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import {
+  Container,
+  Text,
+  Card,
+  Grid,
+  Button,
+  Loader,
+  Alert,
+  Title,
+  Textarea,
+  Modal,
+  Group,
+  ActionIcon,
+  Box,
+  Select,
+  NumberInput,
+} from "@mantine/core";
+import { ArrowLeft, Download } from "phosphor-react"; // Changed DownloadSimple to Download
+import "../../../style/Pcc_Admin/ViewNewApplication.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+// Field component for detail view
+function FormField({ label, value }) {
+  return (
+    <div id="pms-pcc-form-field">
+      <Text id="pms-pcc-field-label">{label}</Text>
+      <Text id="pms-pcc-field-value">{value || "Not provided"}</Text>
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+// Field with download button for direct file URLs
+function FormFieldWithDownload({ label, value, fileUrl, fileLabel }) {
+  // Extract just the filename from the path for display
+  const displayValue = value && typeof value === "string" && value.includes("/")
+    ? value.split("/").pop()
+    : value;
+
+  return (
+    <div id="pms-pcc-form-field-with-download">
+      <div id="pms-pcc-field-label-container">
+        <Text id="pms-pcc-field-label">{label}</Text>
+        <Text id="pms-pcc-field-value">{displayValue || "Not provided"}</Text>
+      </div>
+      <div id="pms-pcc-download-button-wrapper">
+        <FileDownloadButton
+          fileUrl={fileUrl}
+          label={fileLabel}
+          disabled={!fileUrl || fileUrl === "null"}
+        />
+      </div>
+    </div>
+  );
+}
+
+FormFieldWithDownload.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fileUrl: PropTypes.string,
+  fileLabel: PropTypes.string.isRequired,
+};
+
+// File Download Button Component
+function FileDownloadButton({ fileUrl, label, disabled }) {
+  if (!fileUrl || fileUrl === "null" || disabled) {
+    return (
+      <Button
+        variant="outline"
+        color="gray"
+        leftIcon={<Download size={18} />} // Changed from DownloadSimple to Download
+        disabled
+      >
+        No {label} Available
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      component="a"
+      href={fileUrl}
+      download
+      variant="outline"
+      color="blue"
+      leftIcon={<Download size={18} />} // Changed from DownloadSimple to Download
+    >
+      Download {label}
+    </Button>
+  );
+}
+
+FileDownloadButton.propTypes = {
+  fileUrl: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+// Section component for detail view
+function FormSection({ title, children }) {
+  return (
+    <Card id="pms-pcc-detail-section" p="lg" radius="md" withBorder mb="md">
+      <Title id="pms-pcc-section-title">{title}</Title>
+      {children}
+    </Card>
+  );
+}
+
+FormSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function ViewNewApplication({ applicationId, handleBackToList }) {
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [directors, setDirectors] = useState([]);
+  const [selectedDirectorId, setSelectedDirectorId] = useState("");
+  const [comments, setComments] = useState("");
+  
+  // Budget Data
+  const [budgetData, setBudgetData] = useState({
+    filing_cost: 0,
+    attorney_fees: 0,
+    administrative_cost: 0,
+    remarks: "",
+  });
+
+  const [actionLoading, setActionLoading] = useState(false);
+  const [actionSuccess, setActionSuccess] = useState(null);
+  const [actionError, setActionError] = useState(null);
+  const [commentError, setCommentError] = useState(null);
+
+  // Modal states
+  const [forwardModalOpen, setForwardModalOpen] = useState(false);
+  const [modificationModalOpen, setModificationModalOpen] = useState(false);
+
+  const API_BASE_URL = `${host}/patentsystem`;
+  const authToken = localStorage.getItem("authToken");
+
+  const getApiErrorMessage = (err, fallbackMessage) => {
+    const apiData = err?.response?.data;
+
+    if (typeof apiData === "string" && apiData.trim()) {
+      return apiData;
+    }
+
+    if (apiData?.error) {
+      return apiData.error;
+    }
+
+    if (apiData?.message) {
+      return apiData.message;
+    }
+
+    if (apiData?.detail) {
+      return apiData.detail;
+    }
+
+    return err?.message || fallbackMessage;
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Fetch directors list when component mounts
+  useEffect(() => {
+    const fetchDirectors = async () => {
+      try {
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/directors/`,
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+            },
+          },
+        );
+
+        if (response.data && response.data.directors) {
+          const directorOptions = response.data.directors.map((director) => ({
+            value: director.id.toString(),
+            label: `${director.name} (${director.email})`,
+          }));
+          setDirectors(directorOptions);
+          // Auto-select if only one director exists
+          if (directorOptions.length === 1) {
+            setSelectedDirectorId(directorOptions[0].value);
+          }
+        }
+      } catch (err) {
+        console.error("Error fetching directors list:", err);
+      }
+    };
+
+    fetchDirectors();
+  }, [authToken]);
+
+  // Fetch application details
+  useEffect(() => {
+    const fetchApplicationDetails = async () => {
+      if (!applicationId) {
+        setError("No application ID provided");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/details/${applicationId}/`,
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+            },
+          },
+        );
+
+        if (response.data) {
+          setSelectedApplication(response.data);
+          setComments(response.data.comments || "");
+          setError(null);
+        } else {
+          setError("No application data found");
+        }
+      } catch (err) {
+        console.error("Error fetching application details:", err);
+        setError(`Failed to load application details: ${err.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApplicationDetails();
+  }, [applicationId, authToken]);
+
+
+
+  const openForwardModal = () => {
+    setComments("");
+    setActionError(null);
+    setCommentError(null);
+    setForwardModalOpen(true);
+  };
+
+  const openModificationModal = () => {
+    setComments("");
+    setActionError(null);
+    setCommentError(null);
+    setModificationModalOpen(true);
+  };
+
+  // Handler for forward to director
+  const handleForwardToDirector = async () => {
+    // Reset errors
+    setActionError(null);
+    setCommentError(null);
+
+    // Validate director selection
+    if (!selectedDirectorId) {
+      setActionError("Please select a director to forward to");
+      return;
+    }
+
+    // Validate comments
+    if (!comments.trim()) {
+      setCommentError("Comments are required for forwarding to director");
+      return;
+    }
+
+    setActionLoading(true);
+
+    try {
+      // First, review the application if not already reviewed
+      if (selectedApplication.status === "Submitted" || selectedApplication.status === "Resubmitted") {
+        await axios.post(
+          `${API_BASE_URL}/pccAdmin/applications/new/review/${applicationId}/`,
+          { comments: "" },
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+              "Content-Type": "application/json",
+            },
+          },
+        );
+      }
+
+      // Then save the budget details
+      await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/budget/`,
+        {
+          filing_cost: budgetData.filing_cost,
+          attorney_fees: budgetData.attorney_fees,
+          administrative_cost: budgetData.administrative_cost,
+          remarks: budgetData.remarks || comments,
+        },
+        { headers: { Authorization: `Token ${authToken}` } }
+      );
+
+      // Finally forward to director
+      await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/new/forward/${applicationId}/`,
+        {
+          comments,
+          director_id: selectedDirectorId,
+        },
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      setActionSuccess("Application successfully forwarded to director");
+      setForwardModalOpen(false);
+
+      // Refresh application details after the action
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/details/${applicationId}/`,
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+          },
+        },
+      );
+
+      if (response.data) {
+        setSelectedApplication(response.data);
+      }
+    } catch (err) {
+      console.error("Error forwarding to director:", err);
+      setActionError(
+        `Failed to forward application: ${getApiErrorMessage(err, "Unable to forward application.")}`,
+      );
+    } finally {
+      setActionLoading(false);
+      // Clear success message after 3 seconds
+      if (actionSuccess) {
+        setTimeout(() => setActionSuccess(null), 3000);
+      }
+    }
+  };
+
+  // Handler for request modification
+  const handleRequestModification = async () => {
+    // Reset errors
+    setActionError(null);
+    setCommentError(null);
+
+    // Validate comments
+    if (!comments.trim()) {
+      setCommentError("Comments are required for requesting modification");
+      return;
+    }
+
+    setActionLoading(true);
+
+    try {
+      await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/new/requestModification/${applicationId}/`,
+        {
+          comments,
+        },
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      setActionSuccess("Modification request sent successfully");
+      setModificationModalOpen(false);
+
+      // Refresh application details after the action
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/details/${applicationId}/`,
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+          },
+        },
+      );
+
+      if (response.data) {
+        setSelectedApplication(response.data);
+      }
+    } catch (err) {
+      console.error("Error requesting modification:", err);
+      setActionError(
+        `Failed to request modification: ${getApiErrorMessage(err, "Unable to request modification.")}`,
+      );
+    } finally {
+      setActionLoading(false);
+      // Clear success message after 3 seconds
+      if (actionSuccess) {
+        setTimeout(() => setActionSuccess(null), 3000);
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <Container id="pms-pcc-loader-container">
+        <Loader size="lg" color="blue" />
+        <Text mt="md">Loading application details...</Text>
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container id="pms-pcc-error-container">
+        <Alert color="red" title="Error">
+          {error}
+        </Alert>
+        <Button mt="md" onClick={handleBackToList}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  if (!selectedApplication) {
+    return (
+      <Container id="pms-pcc-error-container">
+        <Alert color="blue" title="No Data">
+          No application data found
+        </Alert>
+        <Button mt="md" onClick={handleBackToList}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  const {
+    application_id,
+    title,
+    token_no,
+    primary_applicant_name,
+    status,
+    decision_status,
+    comments: app_comments,
+    inventors: applicants,
+    section_I,
+    section_II,
+    section_III,
+    dates,
+  } = selectedApplication;
+
+  const submittedDate = dates?.submitted_date
+    ? new Date(dates.submitted_date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : "Not recorded";
+
+  // Build file URLs — backend returns media paths like /media/patent/...
+  const mouFileUrl = section_II?.mou_file
+    ? `${host}${section_II.mou_file}`
+    : null;
+  const firstSectionIII = Array.isArray(section_III) ? section_III[0] : section_III;
+  const formIIIFileUrl = firstSectionIII?.form_iii
+    ? `${host}${firstSectionIII.form_iii}`
+    : null;
+  const pocFileUrl = section_I?.poc_details
+    ? `${host}${section_I.poc_details}`
+    : null;
+  const sourceAgreementFileUrl = section_II?.source_agreement
+    ? `${host}${section_II.source_agreement}`
+    : null;
+
+  return (
+    <Container
+      id={`pms-pcc-new-app-detail-container1 ${isMobile ? "mobile-form-container" : ""}`}
+      size="xl"
+      px={0}
+      fluid
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          position: "relative",
+          marginBottom: "0",
+        }}
+      >
+        <Button
+          onClick={handleBackToList}
+          variant="subtle"
+          color="blue"
+          leftIcon={<ArrowLeft size={18} />}
+          style={{
+            position: "absolute",
+            left: "50px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            border: "none",
+            padding: "10px",
+            fontWeight: "500",
+          }}
+        >
+          Back
+        </Button>
+
+        <Text
+          id={`pms-pcc-detail-page-title ${isMobile ? "mobile-detail-page-title" : ""}`}
+          style={{
+            fontSize: "24px",
+            fontWeight: "600",
+            textAlign: "center",
+            margin: "0 auto",
+          }}
+        >
+          Application Details
+        </Text>
+      </div>
+
+      {actionSuccess && (
+        <Alert color="green" title="Success" mb="md">
+          {actionSuccess}
+        </Alert>
+      )}
+
+      {/* Action buttons at the top of the form */}
+      <Card id="pms-pcc-action-buttons-card" style={{ margin: "0 50px" }}>
+        <Group
+          position="center"
+          spacing="md"
+          id="pms-pcc-action-buttons-group"
+          style={{ justifyContent: "center" }}
+        >
+          <Button
+            component="a"
+            href={`${API_BASE_URL}/download/${application_id}/`}
+            target="_blank"
+            download={`Application-${application_id}.pdf`}
+            size="md"
+            variant="outline"
+            color="blue"
+            leftIcon={<Download size={18} />}
+            id="pms-pcc-action-button"
+            sx={(theme) => ({
+              borderColor: theme.colors.blue[6],
+              color: theme.colors.blue[6],
+              backgroundColor: "transparent",
+              "&:hover": {
+                backgroundColor: `${theme.colors.blue[6]} !important`,
+                color: "white !important",
+              },
+            })}
+          >
+            Download Application
+          </Button>
+
+          <Button
+            size="md"
+            variant="outline"
+            color="green"
+            leftIcon={<ActionIcon size={18} />}
+            onClick={openForwardModal}
+            id="pms-pcc-action-button"
+            sx={(theme) => ({
+              borderColor: theme.colors.green[6],
+              color: theme.colors.green[6],
+              backgroundColor: "transparent",
+              "&:hover": {
+                backgroundColor: `${theme.colors.green[6]} !important`,
+                color: "white !important",
+              },
+            })}
+          >
+            Forward to Director
+          </Button>
+
+          <Button
+            size="md"
+            variant="outline"
+            color="orange"
+            leftIcon={<ActionIcon size={18} />}
+            onClick={openModificationModal}
+            id="pms-pcc-action-button"
+            sx={(theme) => ({
+              borderColor: theme.colors.orange[6],
+              color: theme.colors.orange[6],
+              backgroundColor: "transparent",
+              "&:hover": {
+                backgroundColor: `${theme.colors.orange[6]} !important`,
+                color: "white !important",
+              },
+            })}
+          >
+            Request Modification
+          </Button>
+        </Group>
+      </Card>
+
+      <div id="pms-pcc-pcc-form-content">
+        <FormSection title="Application Overview" id="pms-pcc-pcc-form-section">
+          <Grid>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Application ID:" value={application_id} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Title:" value={title} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField
+                label="Primary Applicant:"
+                value={primary_applicant_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Submission Date:" value={submittedDate} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Token Number:" value={token_no} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Status:" value={status} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Decision Status:" value={decision_status} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Comments:" value={app_comments} />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Key Dates">
+          <div id="pms-pcc-key-dates-container">
+            <div id="pms-pcc-key-dates-grid">
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Forwarded to Director</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.forwarded_to_director_date
+                    ? new Date(
+                        dates.forwarded_to_director_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not yet forwarded"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Director Approval</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.director_approval_date
+                    ? new Date(dates.director_approval_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet approved"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Patentability Check Start</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patentability_check_start_date
+                    ? new Date(
+                        dates.patentability_check_start_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not started"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">
+                  Patentability Check Completed
+                </div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patentability_check_completed_date
+                    ? new Date(
+                        dates.patentability_check_completed_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not completed"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Search Report Generated</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.search_report_generated_date
+                    ? new Date(
+                        dates.search_report_generated_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not generated"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Date of Filing</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patent_filed_date
+                    ? new Date(dates.patent_filed_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not recorded"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Date of Publication</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patent_published_date
+                    ? new Date(dates.patent_published_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet published"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Decision Date</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.decision_date
+                    ? new Date(dates.decision_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "No decision yet"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Final Decision Date</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.final_decision_date
+                    ? new Date(dates.final_decision_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "No final decision yet"}
+                </div>
+              </div>
+            </div>
+          </div>
+        </FormSection>
+
+        <FormSection title="Section I: Administrative and Technical Details">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Type of IP:"
+                value={
+                  Array.isArray(section_I?.type_of_ip)
+                    ? section_I?.type_of_ip.join(", ")
+                    : section_I?.type_of_ip
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Area of the invention:"
+                value={section_I?.area}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Problem in the area:"
+                value={section_I?.problem}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Objective:" value={section_I?.objective} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Novelty:" value={section_I?.novelty} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Advantages:" value={section_I?.advantages} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Tested:"
+                value={
+                  section_I?.is_tested === true
+                    ? "Yes"
+                    : section_I?.is_tested === false
+                      ? "No"
+                      : ""
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="POC Details:"
+                value={section_I?.poc_details}
+                fileUrl={pocFileUrl}
+                fileLabel="POC File"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Applications:"
+                value={section_I?.applications}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Section II: IPR Ownership">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Details:"
+                value={section_II?.funding_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Source:"
+                value={section_II?.funding_source}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="Source Agreement:"
+                value={section_II?.source_agreement}
+                fileUrl={sourceAgreementFileUrl}
+                fileLabel="Source Agreement"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Publication Details:"
+                value={section_II?.publication_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="MOU Details:"
+                value={section_II?.mou_details}
+                fileUrl={mouFileUrl}
+                fileLabel="MOU File"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Research Details:"
+                value={section_II?.research_details}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Section III: Commercialization">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Company Name:"
+                value={section_III?.company_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Person:"
+                value={section_III?.contact_person}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Number:"
+                value={section_III?.contact_no}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="Development Stage:"
+                value={section_III?.development_stage}
+                fileUrl={formIIIFileUrl}
+                fileLabel="Form III"
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Inventors">
+          {applicants && applicants.length > 0 ? (
+            <Grid>
+              {applicants.map((applicant, index) => (
+                <Grid.Col key={index} span={12} md={6}>
+                  <Card
+                    id="pms-pcc-applicant-card"
+                    p="md"
+                    radius="sm"
+                    withBorder
+                  >
+                    <Text weight={600} size="lg" mb="xs">
+                      Inventor {index + 1}
+                    </Text>
+                    <FormField label="Name:" value={applicant.name} />
+                    <FormField label="Email:" value={applicant.email} />
+                    <FormField label="Mobile:" value={applicant.mobile} />
+                    <FormField label="Address:" value={applicant.address} />
+                    <FormField
+                      label="Share Percentage:"
+                      value={
+                        applicant.percentage_share
+                          ? `${applicant.percentage_share}%`
+                          : ""
+                      }
+                    />
+                  </Card>
+                </Grid.Col>
+              ))}
+            </Grid>
+          ) : (
+            <Text color="dimmed">No applicant information available</Text>
+          )}
+        </FormSection>
+      </div>
+
+      {/* Forward to Director Modal - Improved UI */}
+      <Modal
+        opened={forwardModalOpen}
+        onClose={() => setForwardModalOpen(false)}
+        title={
+          <Text style={{ fontSize: "22px", fontWeight: 600, color: "#1a1b1e" }}>
+            Forward to Director
+          </Text>
+        }
+        size="lg"
+        padding="xl"
+        radius="md"
+        overlayProps={{
+          opacity: 0.55,
+          blur: 3,
+        }}
+        centered
+      >
+        <Box sx={{ padding: "0 10px" }}>
+          {actionError && (
+            <Alert color="red" title="Error" mb="xl" radius="md">
+              {actionError}
+            </Alert>
+          )}
+
+          <Select
+            label={
+              <Text weight={500} mb={5}>
+                Select Director <span style={{ color: "red" }}>*</span>
+              </Text>
+            }
+            placeholder="Choose a director"
+            data={directors}
+            value={selectedDirectorId}
+            onChange={setSelectedDirectorId}
+            mb="xl"
+            size="md"
+            radius="md"
+            required
+            searchable
+          />
+
+          <Title order={5} mt="md" mb="xs">Budget Proposal</Title>
+          <Grid align="flex-end" mb="xl">
+            <Grid.Col span={4}>
+              <NumberInput
+                label="Filing Cost"
+                placeholder="0.00"
+                value={budgetData.filing_cost}
+                onChange={(val) => setBudgetData({ ...budgetData, filing_cost: val })}
+                required
+                min={0}
+              />
+            </Grid.Col>
+            <Grid.Col span={4}>
+              <NumberInput
+                label="Attorney Fees"
+                placeholder="0.00"
+                value={budgetData.attorney_fees}
+                onChange={(val) => setBudgetData({ ...budgetData, attorney_fees: val })}
+                required
+                min={0}
+              />
+            </Grid.Col>
+            <Grid.Col span={4}>
+              <NumberInput
+                label="Admin Cost"
+                placeholder="0.00"
+                value={budgetData.administrative_cost}
+                onChange={(val) => setBudgetData({ ...budgetData, administrative_cost: val })}
+                required
+                min={0}
+              />
+            </Grid.Col>
+          </Grid>
+
+          <Textarea
+            label={
+              <Text weight={500} mb={5}>
+                Comments for Director <span style={{ color: "red" }}>*</span>
+              </Text>
+            }
+            placeholder="Add detailed comments for the director about this application"
+            value={comments}
+            onChange={(e) => setComments(e.target.value)}
+            minRows={4}
+            maxRows={6}
+            mb="xl"
+            size="md"
+            radius="md"
+            error={commentError}
+            required
+            withAsterisk={false}
+          />
+
+          <Text size="sm" color="dimmed" mb="xl" italic>
+            Please provide detailed instructions or notes for the director to
+            review this application.
+          </Text>
+
+          <Group position="right" mt="xl" spacing="md">
+            <Button
+              variant="outline"
+              size="md"
+              radius="md"
+              onClick={() => {
+                setForwardModalOpen(false);
+                setActionError(null);
+                setCommentError(null);
+              }}
+              sx={(theme) => ({
+                borderColor: theme.colors.gray[5],
+                color: theme.colors.gray[7],
+                "&:hover": {
+                  backgroundColor: theme.colors.gray[1],
+                },
+              })}
+            >
+              Cancel
+            </Button>
+            <Button
+              color="green"
+              size="md"
+              radius="md"
+              onClick={handleForwardToDirector}
+              loading={actionLoading}
+              sx={(theme) => ({
+                backgroundColor: theme.colors.green[6],
+                "&:hover": {
+                  backgroundColor: theme.colors.green[7],
+                },
+              })}
+            >
+              Forward to Director
+            </Button>
+          </Group>
+        </Box>
+      </Modal>
+
+      {/* Request Modification Modal - Improved UI */}
+      <Modal
+        opened={modificationModalOpen}
+        onClose={() => setModificationModalOpen(false)}
+        title={
+          <Text style={{ fontSize: "22px", fontWeight: 600, color: "#1a1b1e" }}>
+            Request Modification
+          </Text>
+        }
+        size="lg"
+        padding="xl"
+        radius="md"
+        overlayProps={{
+          opacity: 0.55,
+          blur: 3,
+        }}
+        centered
+      >
+        <Box sx={{ padding: "0 10px" }}>
+          {actionError && (
+            <Alert color="red" title="Error" mb="xl" radius="md">
+              {actionError}
+            </Alert>
+          )}
+
+          <Text size="md" mb="xl" weight={500}>
+            Please specify what aspects of the application need to be modified
+            by the applicant.
+          </Text>
+
+          <Textarea
+            label={
+              <Text weight={500} mb={5}>
+                Modification Comments <span style={{ color: "red" }}>*</span>
+              </Text>
+            }
+            placeholder="Provide detailed instructions about what needs to be modified in the application"
+            value={comments}
+            onChange={(e) => setComments(e.target.value)}
+            minRows={5}
+            maxRows={8}
+            mb="xl"
+            size="md"
+            radius="md"
+            error={commentError}
+            required
+            withAsterisk={false}
+          />
+
+          <Text size="sm" color="dimmed" mb="xl" italic>
+            Be specific about what information is incorrect, missing, or needs
+            clarification. These comments will be sent directly to the
+            applicant.
+          </Text>
+
+          <Group position="right" mt="xl" spacing="md">
+            <Button
+              variant="outline"
+              size="md"
+              radius="md"
+              onClick={() => {
+                setModificationModalOpen(false);
+                setActionError(null);
+                setCommentError(null);
+              }}
+              sx={(theme) => ({
+                borderColor: theme.colors.gray[5],
+                color: theme.colors.gray[7],
+                "&:hover": {
+                  backgroundColor: theme.colors.gray[1],
+                },
+              })}
+            >
+              Cancel
+            </Button>
+            <Button
+              color="orange"
+              size="md"
+              radius="md"
+              onClick={handleRequestModification}
+              loading={actionLoading}
+              sx={(theme) => ({
+                backgroundColor: theme.colors.orange[6],
+                "&:hover": {
+                  backgroundColor: theme.colors.orange[7],
+                },
+              })}
+            >
+              Request Modification
+            </Button>
+          </Group>
+        </Box>
+      </Modal>
+    </Container>
+  );
+}
+
+ViewNewApplication.propTypes = {
+  applicationId: PropTypes.string.isRequired,
+  handleBackToList: PropTypes.func.isRequired,
+};
+
+export default ViewNewApplication;
diff --git a/src/Modules/Patent/components/PCCAdmin/Notifications/PCCAdminNotification.jsx b/src/Modules/Patent/components/PCCAdmin/Notifications/PCCAdminNotification.jsx
new file mode 100644
index 000000000..a01ffce89
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/Notifications/PCCAdminNotification.jsx
@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Card, Button, Text, Box, Grid } from "@mantine/core";
+
+// Dummy data for notifications
+const notificationsData = [
+  {
+    id: 1,
+    title: "AI-Based Disease Detection in Crops",
+    status: "Approved by director",
+    type: "approval",
+    description:
+      "Application approved by Director. PCC Admin to proceed with next steps.",
+    date: "2024-10-25",
+    time: "11:30:00",
+  },
+  {
+    id: 2,
+    title: "Smart Irrigation System",
+    status: "Rejected by director",
+    type: "rejection",
+    description:
+      "Application rejected by Director. Needs to be returned to applicant with comments.",
+    date: "2024-10-24",
+    time: "15:45:00",
+  },
+  {
+    id: 3,
+    title: "New Patent Application Received",
+    status: "Pending review",
+    type: "new",
+    description:
+      "New application received from applicant. Needs to be reviewed before forwarding to Director.",
+    date: "2024-10-23",
+    time: "09:15:00",
+  },
+];
+
+const styles = {
+  notificationCard: {
+    padding: "1.5rem",
+    marginBottom: "10px",
+    boxShadow: "0 5px 8px rgba(0, 0, 0, 0.2)",
+    borderRadius: "8px",
+    backgroundColor: "#fff",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    borderLeft: "10px solid #00AEEF",
+  },
+  notificationTitle: {
+    fontSize: "20px",
+    fontWeight: 500,
+    marginBottom: "0",
+  },
+  notificationStatus: {
+    fontSize: "1rem",
+    fontWeight: 500,
+    marginBottom: "0.2rem",
+  },
+  notificationDate: {
+    fontSize: "0.875rem",
+    color: "#666",
+    marginBottom: "1rem",
+  },
+  notificationDescription: {
+    fontSize: "0.875rem",
+    color: "#444",
+    padding: "0",
+    flex: 1,
+  },
+  notificationActions: {
+    display: "flex",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "0.5rem",
+  },
+  actionButton: {
+    flex: "1",
+    minWidth: "120px",
+    fontWeight: "500",
+  },
+  pageTitle: {
+    fontSize: "26px",
+    marginTop: "-10px",
+    fontWeight: 600,
+    marginBottom: "10px",
+  },
+  container: {
+    width: "100%",
+    padding: "0",
+    maxWidth: "1800px",
+    margin: "0 50px",
+  },
+};
+
+// Notification card component
+function NotificationCard({
+  id,
+  title,
+  status,
+  description,
+  date,
+  time,
+  type,
+  onMarkAsRead,
+  onForwardToAttorney,
+  onReturnToApplicant,
+}) {
+  const getStatusColor = () => {
+    switch (type) {
+      case "approval":
+        return "#38a169"; // green
+      case "rejection":
+        return "#e53e3e"; // red
+      case "new":
+        return "#3182ce"; // blue
+      default:
+        return "#718096"; // gray
+    }
+  };
+
+  return (
+    <Card style={{ ...styles.notificationCard }}>
+      <Text style={styles.notificationTitle}>{title}</Text>
+      <Text style={{ ...styles.notificationStatus, color: getStatusColor() }}>
+        {status}
+      </Text>
+      <Text style={styles.notificationDate}>{`${date} | ${time}`}</Text>
+      <Text style={styles.notificationDescription}>{description}</Text>
+
+      <div style={styles.notificationActions}>
+        {type === "approval" && (
+          <Button
+            variant="outline"
+            style={styles.actionButton}
+            onClick={() => onForwardToAttorney(id)}
+          >
+            Forward to Attorney
+          </Button>
+        )}
+
+        {type === "rejection" && (
+          <Button
+            variant="outline"
+            style={styles.actionButton}
+            onClick={() => onReturnToApplicant(id)}
+          >
+            Return to Applicant
+          </Button>
+        )}
+
+        <Button
+          variant="outline"
+          style={styles.actionButton}
+          onClick={() => onMarkAsRead(id)}
+        >
+          Mark as Read
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+NotificationCard.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  time: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  onMarkAsRead: PropTypes.func.isRequired,
+  onForwardToAttorney: PropTypes.func,
+  onReturnToApplicant: PropTypes.func,
+};
+
+function PCCAdminNotifications() {
+  const [notifications, setNotifications] = useState(notificationsData);
+
+  const handleMarkAsRead = (id) => {
+    setNotifications(
+      notifications.filter((notification) => notification.id !== id),
+    );
+  };
+
+  const handleForwardToAttorney = (id) => {
+    // In a real app, this would trigger an API call
+    alert(`Application ${id} forwarded to Attorney`);
+    handleMarkAsRead(id);
+  };
+
+  const handleReturnToApplicant = (id) => {
+    // In a real app, this would trigger an API call
+    alert(`Application ${id} returned to Applicant`);
+    handleMarkAsRead(id);
+  };
+
+  return (
+    <Box style={styles.container}>
+      {/* Page Title */}
+      <Text style={styles.pageTitle}>Notifications</Text>
+
+      {/* Notifications container */}
+      <Box style={{ width: "100%" }}>
+        <Grid gutter="xl" align="stretch" style={{ margin: 0 }}>
+          {notifications.map((notification) => (
+            <Grid.Col
+              span={6}
+              p="md"
+              key={notification.id}
+              style={{ minHeight: "100%" }}
+            >
+              <NotificationCard
+                id={notification.id}
+                title={notification.title}
+                status={notification.status}
+                description={notification.description}
+                date={notification.date}
+                time={notification.time}
+                type={notification.type}
+                onMarkAsRead={handleMarkAsRead}
+                onForwardToAttorney={handleForwardToAttorney}
+                onReturnToApplicant={handleReturnToApplicant}
+              />
+            </Grid.Col>
+          ))}
+        </Grid>
+      </Box>
+    </Box>
+  );
+}
+
+export default PCCAdminNotifications;
diff --git a/src/Modules/Patent/components/PCCAdmin/OngoingApplication/OngoingApplication.jsx b/src/Modules/Patent/components/PCCAdmin/OngoingApplication/OngoingApplication.jsx
new file mode 100644
index 000000000..365c0984f
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/OngoingApplication/OngoingApplication.jsx
@@ -0,0 +1,472 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  ScrollArea,
+  Table,
+  Text,
+  Loader,
+  Group,
+  Divider,
+  Badge,
+} from "@mantine/core";
+import { Eye, ArrowsClockwise, Warning } from "@phosphor-icons/react";
+import axios from "axios";
+import ViewOngoingApplication from "./ViewOngoingApplication";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+import { getStatusColor } from "../../../utils/statusColors.js";
+
+function OngoingApplication() {
+  const [applications, setApplications] = useState([]);
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const columnNames = [
+    "S.No",
+    "Application Number",
+    "Token Number",
+    "Patent Title",
+    "Inventor 1",
+    "Designation",
+    "Department",
+    "Date",
+    "Status",
+    "View",
+  ];
+
+  // Styles
+  const styles = {
+    container: {
+      position: "relative",
+      width: "100%",
+      maxWidth: "100%",
+    },
+    title: {
+      fontSize: "24px",
+      fontWeight: 600,
+      textAlign: "left",
+      margin: "0 20px",
+      paddingLeft: "50px",
+      position: "relative",
+    },
+    outerContainer: {
+      maxWidth: "100%",
+      padding: "0px 50px",
+      backgroundColor: "transparent",
+      borderRadius: "12px",
+      marginBottom: "20px",
+      boxShadow: "0px 5px 15px rgba(0, 0, 0, 0)",
+    },
+    tableWrapper: {
+      overflowX: "auto",
+      width: "100%",
+      backgroundColor: "inherit",
+      paddingBottom: 0,
+      marginBottom: 0,
+    },
+    table: {
+      width: "100%",
+      minWidth: "100%",
+      fontSize: "14px",
+      backgroundColor: "#ffffff",
+      borderSpacing: 0,
+      borderCollapse: "separate",
+      borderRadius: "8px",
+      overflow: "hidden",
+      transition: "all 0.3s ease",
+      boxShadow: "0px 3px 8px rgba(0, 0, 0, 0.05)",
+    },
+    tableHeader: {
+      padding: "16px 20px",
+      textAlign: "left",
+      backgroundColor: "#f2f2f2",
+      fontWeight: 600,
+      color: "#444",
+      position: "sticky",
+      top: 0,
+      zIndex: 10,
+      transition: "background-color 0.2s ease",
+      whiteSpace: "nowrap",
+    },
+    tableRow: {
+      backgroundColor: "#ffffff",
+      transition: "all 0.2s ease",
+      "&:hover": {
+        backgroundColor: "#f8fbff",
+        transform: "translateY(-1px)",
+        boxShadow: "0 3px 6px rgba(0, 0, 0, 0.05)",
+      },
+    },
+    tableCell: {
+      padding: "14px 20px",
+      borderTop: "1px solid #f0f0f0",
+      verticalAlign: "middle",
+    },
+    viewButton: {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      fontWeight: 600,
+      transition: "all 0.2s ease",
+      borderRadius: "6px",
+      padding: "8px 12px",
+      "&:hover": {
+        transform: "translateY(-2px)",
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+      },
+    },
+    loaderContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "40px 0",
+    },
+    refreshButton: {
+      marginLeft: "50px",
+      paddingLeft: 0,
+    },
+    errorContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "40px 20px",
+      textAlign: "center",
+    },
+    emptyContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "40px 20px",
+      textAlign: "center",
+    },
+  };
+
+  const formatDate = (dateString) => {
+    if (!dateString || dateString === "Not Provided") return "Not Provided";
+    try {
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  const fetchApplications = async (refresh = false) => {
+    try {
+      // Fixed version
+      if (refresh) {
+        setIsRefreshing(true);
+      } else {
+        setLoading(true);
+      }
+      const { data } = await axios.get(
+        `${host}/patentsystem/pccAdmin/applications/ongoing/`,
+        {
+          headers: {
+            Authorization: `Token ${localStorage.getItem("authToken")}`,
+          },
+        },
+      );
+
+      const formatted = Object.entries(data.applications)
+        .map(([id, details]) => ({
+          id: id.split("_")[1] || id,
+          token_no: details.token_no || "Not Assigned",
+          title: details.title || "Not Provided",
+          submitted_by: details.submitted_by || "Not Provided",
+          designation: details.designation || "Not Provided",
+          department: details.department || "Not Provided",
+          submitted_on: details.submitted_on || "Not Provided",
+          status: details.status || "Not Provided",
+        }))
+        .sort((a, b) => {
+          if (a.submitted_on === "Not Provided") return 1;
+          if (b.submitted_on === "Not Provided") return -1;
+          return new Date(b.submitted_on) - new Date(a.submitted_on);
+        });
+
+      setApplications(formatted);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching applications:", err);
+      setError(
+        err.response?.data?.message ||
+          "Unable to fetch applications. Please try again later.",
+      );
+    } finally {
+      setLoading(false);
+      if (refresh) setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      await fetchApplications();
+    })();
+  }, []);
+
+  const handleViewClick = (id) => setSelectedApplication(id);
+  const handleRefresh = () => fetchApplications(true);
+
+  if (loading) {
+    return (
+      <Box style={styles.loaderContainer}>
+        <Loader size="lg" color="#4a90e2" />
+        <Text mt="md" align="center" size="md" color="#555">
+          Loading applications...
+        </Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box style={styles.errorContainer}>
+        <Group mb="lg" align="center">
+          <Warning size={32} color="#ff4d4f" weight="fill" />
+          <Text color="#ff4d4f" size="lg" weight={500}>
+            Error Loading Applications
+          </Text>
+        </Group>
+        <Text mb="lg" color="#666">
+          {error}
+        </Text>
+        <Button
+          onClick={fetchApplications}
+          color="blue"
+          variant="filled"
+          leftIcon={<ArrowsClockwise size={16} />}
+        >
+          Retry
+        </Button>
+      </Box>
+    );
+  }
+
+  if (applications.length === 0) {
+    return (
+      <Box style={styles.emptyContainer}>
+        <Text size="lg" align="center" mb="md" weight={500} color="#faad14">
+          No applications found
+        </Text>
+        <Text size="md" align="center" color="#666" mb="lg">
+          There are currently no patent applications in the system.
+        </Text>
+        <Button
+          onClick={handleRefresh}
+          color="blue"
+          variant="filled"
+          leftIcon={<ArrowsClockwise size={16} />}
+        >
+          Refresh
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box style={styles.container}>
+      {!selectedApplication ? (
+        <>
+          <Text style={styles.title}>Ongoing Applications</Text>
+
+          <Group position="left" mb="md" style={styles.refreshButton}>
+            <Button
+              variant="subtle"
+              color="blue"
+              size="sm"
+              onClick={handleRefresh}
+              loading={isRefreshing}
+              leftIcon={<ArrowsClockwise size={16} />}
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+          </Group>
+
+          <Box style={styles.outerContainer}>
+            <ScrollArea style={styles.tableWrapper}>
+              <Table highlightOnHover striped withBorder style={styles.table}>
+                <thead className="fusionTableHeader">
+                  <tr>
+                    {columnNames.map((columnName, index) => (
+                      <th
+                        key={index}
+                        style={{
+                          padding: "12px 16px",
+                          fontWeight: 600,
+                          color: "#333",
+                          textAlign: "left",
+                          borderBottom: "2px solid #dee2e6",
+                          backgroundColor: "#f8f9fa",
+                        }}
+                      >
+                        {columnName}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {applications.map((application, index) => (
+                    <tr
+                      key={application.id}
+                      style={{
+                        ...styles.tableRow,
+                        backgroundColor:
+                          index % 2 === 0 ? "#ffffff" : "#f8f9fa",
+                      }}
+                    >
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {index + 1}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.id}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.token_no}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                        title={application.title}
+                      >
+                        {application.title}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.submitted_by}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.designation}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.department}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {formatDate(application.submitted_on)}
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        <Badge
+                          color={getStatusColor(application.status)}
+                          size="md"
+                          variant="filled"
+                        >
+                          {application.status}
+                        </Badge>
+                      </td>
+                      <td
+                        style={{
+                          ...styles.tableCell,
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        <Button
+                          variant="outline"
+                          color="blue"
+                          size="sm"
+                          onClick={() => handleViewClick(application.id)}
+                          style={{
+                            ...styles.viewButton,
+                            backgroundColor: "#fff",
+                            color: "#0073e6",
+                            border: "1px solid #0073e6",
+                            fontWeight: 500,
+                            transition: "all 0.2s ease",
+                            ":hover": {
+                              backgroundColor: "#0073e6",
+                              color: "#fff",
+                            },
+                          }}
+                        >
+                          <Eye size={16} /> <span>View</span>
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </ScrollArea>
+          </Box>
+        </>
+      ) : (
+        <Box style={styles.container}>
+          <Divider my="lg" />
+          <ViewOngoingApplication
+            applicationId={selectedApplication}
+            handleBackToList={() => setSelectedApplication(null)}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default OngoingApplication;
diff --git a/src/Modules/Patent/components/PCCAdmin/OngoingApplication/ViewOngoingApplication.jsx b/src/Modules/Patent/components/PCCAdmin/OngoingApplication/ViewOngoingApplication.jsx
new file mode 100644
index 000000000..934bebd1c
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/OngoingApplication/ViewOngoingApplication.jsx
@@ -0,0 +1,1544 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import {
+  Container,
+  Text,
+  Card,
+  Grid,
+  Button,
+  Loader,
+  Alert,
+  Title,
+  Stepper,
+  Group,
+  Select,
+  NumberInput,
+  Textarea,
+  Modal,
+} from "@mantine/core";
+import {
+  ArrowLeft,
+  DownloadSimple,
+  CheckCircle,
+  CircleNotch,
+  ArrowRight,
+} from "phosphor-react";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+import AttorneyAssignment from "../ManageAttorney/AttorneyAssignment.jsx";
+import PatentabilityAssessment from "../ManageAttorney/PatentabilityAssessment.jsx";
+import FilingRecord from "../ManageAttorney/FilingRecord.jsx";
+import "../../../style/Pcc_Admin/ViewOngoingApplication.css";
+
+// Field component for detail view
+function FormField({ label, value }) {
+  return (
+    <div id="pms-pcc-form-field">
+      <Text id="pms-pcc-field-label">{label}</Text>
+      <Text id="pms-pcc-field-value">{value || "Not provided"}</Text>
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+// Field with download button for direct file URLs
+function FormFieldWithDownload({ label, value, fileUrl, fileLabel }) {
+  // Extract just the filename from the path for display
+  const displayValue =
+    value && typeof value === "string" && value.includes("/")
+      ? value.split("/").pop()
+      : value;
+
+  return (
+    <div id="pms-pcc-form-field-with-download">
+      <div id="pms-pcc-field-label-container">
+        <Text id="pms-pcc-field-label">{label}</Text>
+        <Text id="pms-pcc-field-value">{displayValue || "Not provided"}</Text>
+      </div>
+      <div id="pms-pcc-download-button-wrapper">
+        <FileDownloadButton
+          fileUrl={fileUrl}
+          label={fileLabel}
+          disabled={!fileUrl || fileUrl === "null"}
+        />
+      </div>
+    </div>
+  );
+}
+
+FormFieldWithDownload.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fileUrl: PropTypes.string,
+  fileLabel: PropTypes.string.isRequired,
+};
+
+// File Download Button Component
+function FileDownloadButton({ fileUrl, label, disabled }) {
+  if (!fileUrl || fileUrl === "null" || disabled) {
+    return (
+      <Button
+        variant="outline"
+        color="gray"
+        leftIcon={<DownloadSimple size={18} />}
+        disabled
+      >
+        No {label} Available
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      component="a"
+      href={fileUrl}
+      download
+      variant="outline"
+      color="blue"
+      leftIcon={<DownloadSimple size={18} />}
+    >
+      Download {label}
+    </Button>
+  );
+}
+
+FileDownloadButton.propTypes = {
+  fileUrl: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+// Section component for detail view
+function FormSection({ title, children }) {
+  return (
+    <Card id="pms-pcc-detail-section" p="lg" radius="md" withBorder mb="md">
+      <Title id="pms-pcc-section-title">{title}</Title>
+      {children}
+    </Card>
+  );
+}
+
+FormSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+// Progress Bar Component
+function PatentProgressBar({ currentStatus, isMobile }) {
+  const allStatuses = [
+    "Submitted",
+    "Reviewed by PCC Admin",
+    "Forwarded for Director's Review",
+    "Director's Approval Received",
+    "Patentability Check Started",
+    "Patentability Check Completed",
+    "Search Report Generated",
+    "Patent Filed",
+    "Patent Published",
+    "Patent Granted",
+    "Patent Refused",
+  ];
+
+  const getStepIndex = (status) => {
+    if (status === "Rejected") return -1;
+    return allStatuses.findIndex((s) => s === status);
+  };
+
+  const currentStep = getStepIndex(currentStatus);
+  const isRejected = currentStatus === "Rejected";
+  const isRefused = currentStatus === "Patent Refused";
+  const isGranted = currentStatus === "Patent Granted";
+
+  // Determine which statuses to display based on current status
+  let displayStatuses;
+  if (isRefused) {
+    displayStatuses = ["Submitted", "Patent Refused"];
+  } else if (isGranted) {
+    // Show only the first 11 stages without "Patent Refused" for granted patents
+    displayStatuses = allStatuses.slice(0, 11);
+  } else {
+    displayStatuses = allStatuses;
+  }
+
+  return (
+    <div className={`progress-container ${isRejected ? "rejected" : ""}`}>
+      {isRejected && (
+        <Text color="red" size="lg" weight={600} id="pms-pcc-rejection-label">
+          Application Rejected
+        </Text>
+      )}
+
+      {!isMobile ? (
+        // Desktop view
+        <div id="pms-pcc-desktop-stepper">
+          {isRefused ? (
+            // Simple two-step progress for refused patents
+            <Stepper
+              active={1}
+              id="pms-pcc-workflow-stepper"
+              size="md"
+              color="red"
+              orientation="horizontal"
+              iconSize={24}
+              breakpoint="sm"
+            >
+              <Stepper.Step
+                key="Submitted"
+                icon={<CheckCircle size={18} />}
+                label="Stage 1"
+                description="Submitted"
+                id="pms-pcc-completed-step"
+              />
+              <Stepper.Step
+                key="Patent Refused"
+                icon={<CircleNotch size={18} />}
+                label="Stage 2"
+                description="Patent Refused"
+                id="pms-pcc-completed-step"
+              />
+            </Stepper>
+          ) : (
+            // Regular view with two rows for normal flow
+            <>
+              <Stepper
+                active={isGranted ? 4 : currentStep}
+                id="pms-pcc-workflow-stepper"
+                size="md"
+                color={isRejected ? "red" : "blue"}
+                orientation="horizontal"
+                iconSize={24}
+                breakpoint="sm"
+              >
+                {displayStatuses.slice(0, 4).map((status, index) => (
+                  <Stepper.Step
+                    key={status}
+                    icon={
+                      isGranted || index < currentStep ? (
+                        <CheckCircle size={18} />
+                      ) : index === currentStep ? (
+                        <CircleNotch size={18} />
+                      ) : (
+                        <ArrowRight size={18} />
+                      )
+                    }
+                    label={`Stage ${index + 1}`}
+                    description={status}
+                    className={
+                      isGranted || index <= currentStep
+                        ? "completed-step"
+                        : "pending-step"
+                    }
+                  />
+                ))}
+              </Stepper>
+              <Stepper
+                active={isGranted ? 7 : Math.max(0, currentStep - 4)} // All steps active if granted
+                id="pms-pcc-workflow-stepper second-row"
+                size="md"
+                color={isRejected ? "red" : "blue"}
+                orientation="horizontal"
+                iconSize={24}
+                breakpoint="sm"
+              >
+                {displayStatuses.slice(4).map((status, index) => (
+                  <Stepper.Step
+                    key={status}
+                    icon={
+                      isGranted || index + 4 < currentStep ? (
+                        <CheckCircle size={18} />
+                      ) : index + 4 === currentStep ? (
+                        <CircleNotch size={18} />
+                      ) : (
+                        <ArrowRight size={18} />
+                      )
+                    }
+                    label={`Stage ${index + 5}`}
+                    description={status}
+                    className={
+                      isGranted || index + 4 <= currentStep
+                        ? "completed-step"
+                        : "pending-step"
+                    }
+                  />
+                ))}
+              </Stepper>
+            </>
+          )}
+        </div>
+      ) : (
+        // Mobile view - vertical stepper
+        <Stepper
+          active={
+            isRefused ? 1 : isGranted ? displayStatuses.length - 1 : currentStep
+          }
+          id="pms-pcc-workflow-stepper mobile-view"
+          size="sm"
+          color={isRefused ? "red" : isRejected ? "red" : "blue"}
+          orientation="vertical"
+          iconSize={16}
+        >
+          {displayStatuses.map((status, index) => (
+            <Stepper.Step
+              key={status}
+              icon={
+                isGranted || index < (isRefused ? 1 : currentStep) ? (
+                  <CheckCircle size={16} />
+                ) : index === (isRefused ? 1 : currentStep) ? (
+                  <CircleNotch size={16} />
+                ) : (
+                  <ArrowRight size={16} />
+                )
+              }
+              label={`Stage ${index + 1}`}
+              description={status}
+              className={
+                isGranted || index <= (isRefused ? 1 : currentStep)
+                  ? "completed-step"
+                  : "pending-step"
+              }
+            />
+          ))}
+        </Stepper>
+      )}
+    </div>
+  );
+}
+
+PatentProgressBar.propTypes = {
+  currentStatus: PropTypes.string.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+};
+
+function ViewOngoingApplication({ applicationId, handleBackToList }) {
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [updatingStatus, setUpdatingStatus] = useState(false);
+  const [statusUpdateMessage, setStatusUpdateMessage] = useState(null);
+  // Sub-view state: null | "attorney" | "assessment" | "filing"
+  const [activeSubView, setActiveSubView] = useState(null);
+
+  const [budgetModalOpen, setBudgetModalOpen] = useState(false);
+  const [submittingBudget, setSubmittingBudget] = useState(false);
+  const [budgetData, setBudgetData] = useState({
+    filing_cost: 0,
+    attorney_fees: 0,
+    administrative_cost: 0,
+    remarks: "",
+  });
+  const [budgetStatus, setBudgetStatus] = useState(null);
+
+  const [requestModModalOpen, setRequestModModalOpen] = useState(false);
+  const [modificationComments, setModificationComments] = useState("");
+  const [requestingMod, setRequestingMod] = useState(false);
+
+  const API_BASE_URL = `${host}/patentsystem`;
+  const authToken = localStorage.getItem("authToken");
+
+  useEffect(() => {
+    const fetchBudget = async () => {
+      try {
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/${applicationId}/budget/`,
+          { headers: { Authorization: `Token ${authToken}` } },
+        );
+        if (
+          response.data &&
+          !response.data.error &&
+          response.data.budget !== null
+        ) {
+          const b = response.data;
+          setBudgetData({
+            filing_cost: b.filing_cost,
+            attorney_fees: b.attorney_fees,
+            administrative_cost: b.administrative_cost,
+            remarks: b.remarks,
+          });
+          setBudgetStatus(b.decision);
+        }
+      } catch (err) {
+        console.error("No existing budget found or error fetching.", err);
+      }
+    };
+    if (applicationId && authToken) {
+      fetchBudget();
+    }
+  }, [applicationId, authToken]);
+
+  // These statuses must match the backend's expected REVIEW_STATUSES
+  const statusOptions = [
+    {
+      value: "Director's Approval Received",
+      label: "Director's Approval Received",
+    },
+    {
+      value: "Patentability Check Started",
+      label: "Patentability Check Started",
+    },
+    {
+      value: "Patentability Check Completed",
+      label: "Patentability Check Completed",
+    },
+    {
+      value: "Search Report Generated",
+      label: "Patentability Search Report Generated",
+    },
+    { value: "Patent Filed", label: "Patent Filed" },
+    { value: "Patent Published", label: "Patent Published" },
+    { value: "Patent Granted", label: "Patent Granted" },
+    { value: "Patent Refused", label: "Patent Refused" },
+  ];
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const fetchApplicationDetails = async () => {
+      if (!applicationId) {
+        setError("No application ID provided");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/details/${applicationId}/`,
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+            },
+          },
+        );
+
+        if (response.data) {
+          setSelectedApplication(response.data);
+          setError(null);
+        } else {
+          setError("No application data found");
+        }
+      } catch (err) {
+        console.error("Error fetching application details:", err);
+        setError(`Failed to load application details: ${err.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApplicationDetails();
+  }, [applicationId, authToken]);
+
+  const handleRequestModification = async () => {
+    if (!modificationComments || modificationComments.trim().length < 10) {
+      setStatusUpdateMessage({
+        type: "error",
+        text: "Comments are required (minimum 10 characters).",
+      });
+      return;
+    }
+    setRequestingMod(true);
+    try {
+      await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/new/requestModification/${applicationId}/`,
+        { comments: modificationComments },
+        { headers: { Authorization: `Token ${authToken}` } },
+      );
+      setRequestModModalOpen(false);
+      setStatusUpdateMessage({
+        type: "success",
+        text: "Application sent back to applicant for revision.",
+      });
+      setTimeout(() => {
+        handleBackToList();
+      }, 1500);
+    } catch (err) {
+      console.error("Failed to request modification: ", err);
+      setStatusUpdateMessage({
+        type: "error",
+        text: `Failed to request modification: ${err.response?.data?.message || err.message}`,
+      });
+    } finally {
+      setRequestingMod(false);
+    }
+  };
+
+  const handleSaveBudget = async () => {
+    setSubmittingBudget(true);
+    try {
+      const response = await axios.post(
+        `${host}/patentsystem/pccAdmin/applications/${applicationId}/budget/`,
+        budgetData,
+        {
+          headers: {
+            Authorization: `Token ${localStorage.getItem("authToken")}`,
+          },
+        },
+      );
+      setBudgetModalOpen(false);
+      setBudgetStatus(response.data.decision);
+      setStatusUpdateMessage({
+        type: "success",
+        text: `Budget saved successfully! Decision: ${response.data.decision}`,
+      });
+      setTimeout(() => setStatusUpdateMessage(null), 5000);
+    } catch (e) {
+      console.error("Budget failed to save.", e);
+      setStatusUpdateMessage({
+        type: "error",
+        text: "Failed to save budget.",
+      });
+      setTimeout(() => setStatusUpdateMessage(null), 5000);
+    } finally {
+      setSubmittingBudget(false);
+    }
+  };
+
+  const handleStatusChange = async (newStatus) => {
+    if (!newStatus || newStatus === selectedApplication.status) return;
+
+    // Prevent moving past "Patent Granted" status
+    if (selectedApplication.status === "Patent Granted") {
+      setStatusUpdateMessage({
+        type: "info",
+        text: "This application has already been granted a patent. No further status changes are allowed.",
+      });
+
+      // Clear info message after 5 seconds
+      setTimeout(() => {
+        setStatusUpdateMessage(null);
+      }, 5000);
+
+      return;
+    }
+
+    // For "Patent Refused" status, show confirmation dialog
+    if (newStatus === "Patent Refused") {
+      const confirmRefusal = window.confirm(
+        "Are you sure you want to mark this application as 'Patent Refused'? This action cannot be undone.",
+      );
+
+      if (!confirmRefusal) {
+        return; // User canceled the operation
+      }
+    }
+
+    try {
+      setUpdatingStatus(true);
+      setStatusUpdateMessage(null);
+
+      // Update to match the backend's expected parameter name
+      const response = await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/ongoing/changeStatus/${applicationId}/`,
+        { next_status: newStatus }, // Changed from 'status' to 'next_status'
+        {
+          headers: {
+            Authorization: `Token ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        },
+      );
+
+      if (response.data && response.status === 200) {
+        // Update the application object with new status and fetch fresh dates
+        try {
+          const freshResp = await axios.get(
+            `${API_BASE_URL}/pccAdmin/applications/details/${applicationId}/`,
+            { headers: { Authorization: `Token ${authToken}` } },
+          );
+          setSelectedApplication(freshResp.data);
+        } catch (err) {
+          setSelectedApplication({
+            ...selectedApplication,
+            status: newStatus,
+          });
+        }
+
+        setStatusUpdateMessage({
+          type: "success",
+          text: `Status successfully updated to ${newStatus}`,
+        });
+      } else {
+        setStatusUpdateMessage({
+          type: "error",
+          text: "Failed to update status. Please try again.",
+        });
+      }
+    } catch (err) {
+      console.error("Error updating application status:", err);
+      setStatusUpdateMessage({
+        type: "error",
+        text: `Error: ${err.response?.data?.error || err.message}`,
+      });
+    } finally {
+      setUpdatingStatus(false);
+
+      // Clear success message after 5 seconds
+      if (
+        statusUpdateMessage?.type === "success" ||
+        statusUpdateMessage?.type === "info"
+      ) {
+        setTimeout(() => {
+          setStatusUpdateMessage(null);
+        }, 5000);
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <Container id="pms-pcc-loader-container">
+        <Loader size="lg" color="blue" />
+        <Text mt="md">Loading application details...</Text>
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container id="pms-pcc-error-container">
+        <Alert color="red" title="Error">
+          {error}
+        </Alert>
+        <Button mt="md" onClick={handleBackToList}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  if (!selectedApplication) {
+    return (
+      <Container id="pms-pcc-error-container">
+        <Alert color="blue" title="No Data">
+          No application data found
+        </Alert>
+        <Button mt="md" onClick={handleBackToList}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  // Render sub-views for attorney, assessment, filing
+  if (activeSubView === "attorney") {
+    return (
+      <AttorneyAssignment
+        applicationId={applicationId}
+        onBack={() => setActiveSubView(null)}
+      />
+    );
+  }
+  if (activeSubView === "assessment") {
+    return (
+      <PatentabilityAssessment
+        applicationId={applicationId}
+        onBack={() => setActiveSubView(null)}
+      />
+    );
+  }
+  if (activeSubView === "filing") {
+    return (
+      <FilingRecord
+        applicationId={applicationId}
+        onBack={() => setActiveSubView(null)}
+      />
+    );
+  }
+
+  const {
+    application_id,
+    title,
+    token_no,
+    primary_applicant_name,
+    status,
+    decision_status,
+    comments,
+    inventors: applicants,
+    section_I,
+    section_II,
+    section_III,
+    dates,
+  } = selectedApplication;
+
+  const submittedDate = dates?.submitted_date
+    ? new Date(dates.submitted_date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : "Not recorded";
+
+  // Build file URLs — backend returns media paths like /media/patent/...
+  const mouFileUrl = section_II?.mou_file
+    ? `${host}${section_II.mou_file}`
+    : null;
+  const firstSectionIII = Array.isArray(section_III)
+    ? section_III[0]
+    : section_III;
+  const formIIIFileUrl = firstSectionIII?.form_iii
+    ? `${host}${firstSectionIII.form_iii}`
+    : null;
+  const pocFileUrl = section_I?.poc_details
+    ? `${host}${section_I.poc_details}`
+    : null;
+  const sourceAgreementFileUrl = section_II?.source_agreement
+    ? `${host}${section_II.source_agreement}`
+    : null;
+
+  // Get the next allowed status based on current status
+  const getCurrentStatusIndex = () => {
+    return statusOptions.findIndex((option) => option.value === status);
+  };
+
+  const getNextStatus = () => {
+    const currentIndex = getCurrentStatusIndex();
+    if (currentIndex >= 0 && currentIndex < statusOptions.length - 1) {
+      const nextStat = statusOptions[currentIndex + 1].value;
+      // Prevent auto-moving sequentially into Refused when pressing next on Granted. Auto next logic:
+      if (statusOptions[currentIndex].value === "Patent Published") {
+        return "Patent Granted";
+      }
+      return nextStat;
+    }
+    return null;
+  };
+
+  const getPreviousStatus = () => {
+    const currentIndex = getCurrentStatusIndex();
+    return currentIndex > 0 ? statusOptions[currentIndex - 1].value : null;
+  };
+
+  return (
+    <Container
+      className={`pms-pcc-ongoing-detail-container ${isMobile ? "mobile-form-container" : ""}`}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          position: "relative",
+          marginBottom: "-20px",
+          backgroundColor: "#f5f7f8",
+          height: "60px",
+          zIndex: 10,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            left: "50px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            zIndex: 20,
+            cursor: "pointer",
+          }}
+        >
+          <Button
+            variant="subtle"
+            color="blue"
+            leftIcon={<ArrowLeft size={18} />}
+            style={{
+              border: "none",
+              padding: "10px",
+              background: "none",
+              cursor: "pointer",
+              fontWeight: "500",
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (typeof handleBackToList === "function") {
+                handleBackToList();
+              } else {
+                window.history.back();
+              }
+            }}
+          >
+            Back
+          </Button>
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            right: "50px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            zIndex: 20,
+          }}
+        >
+          <Button
+            component="a"
+            href={`${API_BASE_URL}/download/${application_id}/`}
+            target="_blank"
+            download={`Application-${application_id}.pdf`}
+            variant="subtle"
+            color="blue"
+            rightIcon={<DownloadSimple size={18} />}
+            style={{
+              border: "none",
+              padding: "10px",
+              background: "none",
+              cursor: "pointer",
+              fontWeight: "500",
+            }}
+          >
+            Download
+          </Button>
+        </div>
+      </div>
+
+      <div
+        id="pms-pcc-form-content"
+        style={{
+          backgroundColor: "#f5f7f8",
+          boxShadow: "0px 5px 15px rgba(0, 0, 0, 0)",
+        }}
+      >
+        <FormSection title="Application Overview">
+          <Grid>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Current Status:" value={status} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Application ID:" value={application_id} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Title:" value={title} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField
+                label="Primary Applicant:"
+                value={primary_applicant_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Submission Date:" value={submittedDate} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Token Number:" value={token_no} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Decision Status:" value={decision_status} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Comments:" value={comments} />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Key Dates">
+          <div id="pms-pcc-key-dates-container">
+            <div id="pms-pcc-key-dates-grid">
+              {/* <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Reviewed by PCC</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.reviewed_by_pcc_date
+                    ? new Date(dates.reviewed_by_pcc_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet reviewed"}
+                </div>
+              </div> */}
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Forwarded to Director</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.forwarded_to_director_date
+                    ? new Date(
+                        dates.forwarded_to_director_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not yet forwarded"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Director Approval</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.director_approval_date
+                    ? new Date(dates.director_approval_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet approved"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Patentability Check Start</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patentability_check_start_date
+                    ? new Date(
+                        dates.patentability_check_start_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not started"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">
+                  Patentability Check Completed
+                </div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patentability_check_completed_date
+                    ? new Date(
+                        dates.patentability_check_completed_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not completed"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Search Report Generated</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.search_report_generated_date
+                    ? new Date(
+                        dates.search_report_generated_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not generated"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Date of Filing</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patent_filed_date
+                    ? new Date(dates.patent_filed_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not recorded"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Date of Publication</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.patent_published_date
+                    ? new Date(dates.patent_published_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet published"}
+                </div>
+              </div>
+
+              {/* <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title">Decision Date</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.decision_date
+                    ? new Date(dates.decision_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "No decision yet"}
+                </div>
+              </div> */}
+
+              <div id="pms-pcc-key-date-card">
+                <div id="pms-pcc-key-date-title"> Date of Granting</div>
+                <div id="pms-pcc-key-date-value">
+                  {dates?.final_decision_date
+                    ? new Date(dates.final_decision_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "No final decision yet"}
+                </div>
+              </div>
+            </div>
+          </div>
+        </FormSection>
+
+        <FormSection title="Section I: Administrative and Technical Details">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Type of IP:"
+                value={
+                  Array.isArray(section_I?.type_of_ip)
+                    ? section_I?.type_of_ip.join(", ")
+                    : section_I?.type_of_ip
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Area of the invention:"
+                value={section_I?.area}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Problem in the area:"
+                value={section_I?.problem}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Objective:" value={section_I?.objective} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Novelty:" value={section_I?.novelty} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Advantages:" value={section_I?.advantages} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Tested:"
+                value={
+                  section_I?.is_tested === true
+                    ? "Yes"
+                    : section_I?.is_tested === false
+                      ? "No"
+                      : ""
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="POC Details:"
+                value={section_I?.poc_details}
+                fileUrl={pocFileUrl}
+                fileLabel="POC File"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Applications:"
+                value={section_I?.applications}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Section II: IPR Ownership">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Details:"
+                value={section_II?.funding_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Source:"
+                value={section_II?.funding_source}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="Source Agreement:"
+                value={section_II?.source_agreement}
+                fileUrl={sourceAgreementFileUrl}
+                fileLabel="Source Agreement"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Publication Details:"
+                value={section_II?.publication_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="MOU Details:"
+                value={section_II?.mou_details}
+                fileUrl={mouFileUrl}
+                fileLabel="MOU File"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Research Details:"
+                value={section_II?.research_details}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Section III: Commercialization">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Company Name:"
+                value={section_III?.company_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Person:"
+                value={section_III?.contact_person}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Number:"
+                value={section_III?.contact_no}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="Development Stage:"
+                value={section_III?.development_stage}
+                fileUrl={formIIIFileUrl}
+                fileLabel="Form III"
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Applicants">
+          {applicants && applicants.length > 0 ? (
+            <Grid>
+              {applicants.map((applicant, index) => (
+                <Grid.Col key={index} span={12} md={6}>
+                  <Card
+                    id="pms-pcc-applicant-card"
+                    p="md"
+                    radius="sm"
+                    withBorder
+                  >
+                    <Text weight={600} size="lg" mb="xs">
+                      Applicant {index + 1}
+                    </Text>
+                    <FormField label="Name:" value={applicant.name} />
+                    <FormField label="Email:" value={applicant.email} />
+                    <FormField label="Mobile:" value={applicant.mobile} />
+                    <FormField label="Address:" value={applicant.address} />
+                    <FormField
+                      label="Share Percentage:"
+                      value={
+                        applicant.percentage_share
+                          ? `${applicant.percentage_share}%`
+                          : ""
+                      }
+                    />
+                  </Card>
+                </Grid.Col>
+              ))}
+            </Grid>
+          ) : (
+            <Text color="dimmed">No applicant information available</Text>
+          )}
+        </FormSection>
+
+        <FormSection title="Post-Approval Management (PCC Admin)">
+          <Text size="sm" color="dimmed" mb="md">
+            Use these actions to manage the patent application workflow after
+            director approval. Assign an attorney, record patentability
+            assessments, and log filing details.
+          </Text>
+          <Grid>
+            <Grid.Col span={12} md={4}>
+              <Card
+                p="md"
+                radius="md"
+                withBorder
+                style={{
+                  cursor: "pointer",
+                  transition: "all 0.2s ease",
+                  textAlign: "center",
+                }}
+                onClick={() => setActiveSubView("attorney")}
+                sx={(theme) => ({
+                  "&:hover": {
+                    borderColor: theme.colors.blue[5],
+                    boxShadow: theme.shadows.sm,
+                  },
+                })}
+              >
+                <Text weight={600} size="lg" mb="xs" color="blue">
+                  👤 Attorney Assignment
+                </Text>
+                <Text size="sm" color="dimmed">
+                  Assign or update the external patent attorney for this
+                  application
+                </Text>
+                <Button
+                  variant="outline"
+                  color="blue"
+                  mt="md"
+                  fullWidth
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setActiveSubView("attorney");
+                  }}
+                >
+                  Manage Attorney
+                </Button>
+              </Card>
+            </Grid.Col>
+
+            <Grid.Col span={12} md={4}>
+              <Card
+                p="md"
+                radius="md"
+                withBorder
+                style={{
+                  cursor: "pointer",
+                  transition: "all 0.2s ease",
+                  textAlign: "center",
+                }}
+                onClick={() => setActiveSubView("assessment")}
+                sx={(theme) => ({
+                  "&:hover": {
+                    borderColor: theme.colors.violet[5],
+                    boxShadow: theme.shadows.sm,
+                  },
+                })}
+              >
+                <Text weight={600} size="lg" mb="xs" color="violet">
+                  📊 Patentability Assessment
+                </Text>
+                <Text size="sm" color="dimmed">
+                  Record the patentability assessment results from the attorney
+                </Text>
+                <Button
+                  variant="outline"
+                  color="violet"
+                  mt="md"
+                  fullWidth
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setActiveSubView("assessment");
+                  }}
+                >
+                  Manage Assessment
+                </Button>
+              </Card>
+            </Grid.Col>
+
+            <Grid.Col span={12} md={4}>
+              <Card
+                p="md"
+                radius="md"
+                withBorder
+                style={{
+                  cursor: "pointer",
+                  transition: "all 0.2s ease",
+                  textAlign: "center",
+                }}
+                onClick={() => setActiveSubView("filing")}
+                sx={(theme) => ({
+                  "&:hover": {
+                    borderColor: theme.colors.green[5],
+                    boxShadow: theme.shadows.sm,
+                  },
+                })}
+              >
+                <Text weight={600} size="lg" mb="xs" color="green">
+                  📁 Filing Record
+                </Text>
+                <Text size="sm" color="dimmed">
+                  Record the patent filing details after submission to the
+                  patent office
+                </Text>
+                <Button
+                  variant="outline"
+                  color="green"
+                  mt="md"
+                  fullWidth
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setActiveSubView("filing");
+                  }}
+                >
+                  Manage Filing
+                </Button>
+              </Card>
+            </Grid.Col>
+
+            <Grid.Col span={12} md={4}>
+              <Card
+                p="md"
+                radius="md"
+                withBorder
+                style={{
+                  cursor: "pointer",
+                  transition: "all 0.2s ease",
+                  textAlign: "center",
+                }}
+                onClick={() => setBudgetModalOpen(true)}
+                sx={(theme) => ({
+                  "&:hover": {
+                    borderColor: theme.colors.orange[5],
+                    boxShadow: theme.shadows.sm,
+                  },
+                })}
+              >
+                <Text weight={600} size="lg" mb="xs" color="orange">
+                  💰 Budget & Finances
+                </Text>
+                <Text size="sm" color="dimmed">
+                  Propose budget or record financial tracking for this
+                  application. {budgetStatus ? `(Status: ${budgetStatus})` : ""}
+                </Text>
+                <Button
+                  variant="outline"
+                  color="orange"
+                  mt="md"
+                  fullWidth
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setBudgetModalOpen(true);
+                  }}
+                >
+                  Manage Finances
+                </Button>
+              </Card>
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Application Progress">
+          <PatentProgressBar currentStatus={status} isMobile={isMobile} />
+
+          <div id="pms-pcc-status-update-section">
+            <Text size="md" weight={500} mb="xs" mt="lg">
+              Update Application Status
+            </Text>
+
+            {statusUpdateMessage && (
+              <Alert
+                color={statusUpdateMessage.type === "success" ? "green" : "red"}
+                title={
+                  statusUpdateMessage.type === "success" ? "Success" : "Error"
+                }
+                mb="md"
+                withCloseButton
+                onClose={() => setStatusUpdateMessage(null)}
+              >
+                {statusUpdateMessage.text}
+              </Alert>
+            )}
+
+            <Group
+              position="apart"
+              align="flex-end"
+              id="pms-pcc-status-update-group"
+            >
+              <Select
+                label="Select New Status"
+                placeholder="Choose status"
+                data={statusOptions}
+                value={status}
+                onChange={handleStatusChange}
+                style={{ minWidth: isMobile ? "100%" : "300px" }}
+                disabled={updatingStatus}
+              />
+
+              <div id="pms-pcc-status-button-group">
+                <Button
+                  color="blue"
+                  loading={updatingStatus}
+                  disabled={updatingStatus || !getNextStatus()}
+                  onClick={() => {
+                    const nextStatus = getNextStatus();
+                    if (nextStatus) {
+                      handleStatusChange(nextStatus);
+                    }
+                  }}
+                >
+                  Move to Next Stage
+                </Button>
+
+                <Button
+                  color="red"
+                  variant="outline"
+                  loading={updatingStatus}
+                  disabled={updatingStatus || !getPreviousStatus()}
+                  onClick={() => {
+                    const prevStatus = getPreviousStatus();
+                    if (prevStatus) {
+                      handleStatusChange(prevStatus);
+                    }
+                  }}
+                  ml="xs"
+                >
+                  Move to Previous Stage
+                </Button>
+                {/* Send Back for Modification Button */}
+                <Button
+                  color="red"
+                  variant="outline"
+                  leftIcon={<ArrowLeft size={16} />}
+                  onClick={() => setRequestModModalOpen(true)}
+                  ml="xs"
+                >
+                  Request Modification / Needs Amendment
+                </Button>
+              </div>
+            </Group>
+          </div>
+        </FormSection>
+      </div>
+
+      {/* Request Modification Modal */}
+      <Modal
+        opened={requestModModalOpen}
+        onClose={() => setRequestModModalOpen(false)}
+        title={
+          <Text weight={600} size="lg">
+            Request Application Modification
+          </Text>
+        }
+      >
+        <Text size="sm" mb="md" color="dimmed">
+          Send this application back to the applicant for revisions. Please
+          provide clear details on what needs to be changed or amended.
+        </Text>
+        <Textarea
+          placeholder="Details required for modification..."
+          label="Modification Request Details"
+          minRows={4}
+          value={modificationComments}
+          onChange={(e) => setModificationComments(e.currentTarget.value)}
+          required
+        />
+        <Group position="right" mt="md">
+          <Button
+            variant="subtle"
+            onClick={() => setRequestModModalOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            color="red"
+            loading={requestingMod}
+            onClick={handleRequestModification}
+          >
+            Send to Applicant
+          </Button>
+        </Group>
+      </Modal>
+
+      <Modal
+        opened={budgetModalOpen}
+        onClose={() => setBudgetModalOpen(false)}
+        title={<Title order={3}>Financial & Budget Tracking</Title>}
+        size="lg"
+      >
+        <Grid>
+          <Grid.Col span={12} md={4}>
+            <NumberInput
+              label="Filing Cost (₹)"
+              value={budgetData.filing_cost}
+              onChange={(val) =>
+                setBudgetData({ ...budgetData, filing_cost: val || 0 })
+              }
+              min={0}
+              parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
+              formatter={(value) =>
+                !Number.isNaN(parseFloat(value))
+                  ? `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                  : ""
+              }
+            />
+          </Grid.Col>
+          <Grid.Col span={12} md={4}>
+            <NumberInput
+              label="Attorney Fees (₹)"
+              value={budgetData.attorney_fees}
+              onChange={(val) =>
+                setBudgetData({ ...budgetData, attorney_fees: val || 0 })
+              }
+              min={0}
+            />
+          </Grid.Col>
+          <Grid.Col span={12} md={4}>
+            <NumberInput
+              label="Admin Cost (₹)"
+              value={budgetData.administrative_cost}
+              onChange={(val) =>
+                setBudgetData({ ...budgetData, administrative_cost: val || 0 })
+              }
+              min={0}
+            />
+          </Grid.Col>
+          <Grid.Col span={12}>
+            <Textarea
+              label="Remarks / Comments"
+              value={budgetData.remarks}
+              onChange={(e) =>
+                setBudgetData({ ...budgetData, remarks: e.currentTarget.value })
+              }
+              minRows={3}
+            />
+          </Grid.Col>
+        </Grid>
+
+        <Group position="right" mt="xl">
+          <Button variant="outline" onClick={() => setBudgetModalOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSaveBudget}
+            loading={submittingBudget}
+            color="orange"
+          >
+            Submit Budget
+          </Button>
+        </Group>
+      </Modal>
+    </Container>
+  );
+}
+
+ViewOngoingApplication.propTypes = {
+  applicationId: PropTypes.string.isRequired,
+  handleBackToList: PropTypes.func.isRequired,
+};
+
+export default ViewOngoingApplication;
diff --git a/src/Modules/Patent/components/PCCAdmin/PCCAStatusView.jsx b/src/Modules/Patent/components/PCCAdmin/PCCAStatusView.jsx
new file mode 100644
index 000000000..c43eaddb9
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/PCCAStatusView.jsx
@@ -0,0 +1,586 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import {
+  Container,
+  Text,
+  Card,
+  Stepper,
+  Button,
+  Loader,
+  Alert,
+} from "@mantine/core";
+import {
+  IconInfoCircle,
+  IconAlertCircle,
+  IconDownload,
+  IconFile,
+} from "@tabler/icons-react";
+import { CheckCircle, CircleNotch, ArrowRight } from "phosphor-react";
+import "../../style/Pcc_Admin/PCCAStatus.css";
+import { host } from "../../../../routes/globalRoutes/index.jsx";
+
+// Progress Bar Component
+function PatentProgressBar({ currentStatus, isMobile }) {
+  const statuses = [
+    "Submitted",
+    "Reviewed by PCC Admin",
+    "Forwarded for Director's Review",
+    "Director's Approval Received",
+    "Patentability Check",
+    "Search Report Generated",
+    "Patent Filed",
+  ];
+
+  const getStepIndex = (status) => {
+    switch (status) {
+      case "Submitted":
+      case "Resubmitted":
+        return 0;
+      case "Reviewed by PCC Admin":
+        return 1;
+      case "Forwarded for Director's Review":
+      case "Forwarded to Director":
+      case "Under Review":
+        return 2;
+      case "Director's Approval Received":
+      case "Approved":
+        return 3;
+      case "Patentability Check":
+      case "Patentability Check Started":
+      case "Patentability Check Completed":
+        return 4;
+      case "Search Report Generated":
+      case "Patentability Search Report Generated":
+        return 5;
+      case "Patent Filed":
+      case "Patent Published":
+      case "Patent Granted":
+        return 6;
+      case "Rejected":
+      case "Patent Refused":
+      case "Appeal Rejected":
+        return -1;
+      default: {
+        // Try finding if it loosely matches
+        const idx = statuses.findIndex((s) => s === status);
+        return idx !== -1 ? idx : 0;
+      }
+    }
+  };
+
+  const currentStep = getStepIndex(currentStatus);
+  const isRejected = currentStep === -1;
+
+  return (
+    <div className={`progress-container ${isRejected ? "rejected" : ""}`}>
+      {isRejected && (
+        <Text color="red" size="lg" weight={600} className="rejection-label">
+          Application Rejected
+        </Text>
+      )}
+
+      <Stepper
+        active={currentStep}
+        className={`workflow-stepper ${isMobile ? "mobile-view" : ""}`}
+        size={isMobile ? "sm" : "md"}
+        color={isRejected ? "red" : "blue"}
+        orientation={isMobile ? "vertical" : "horizontal"}
+        iconSize={isMobile ? 16 : 24}
+      >
+        {statuses.map((status, index) => (
+          <Stepper.Step
+            key={status}
+            icon={
+              index < currentStep ? (
+                <CheckCircle size={isMobile ? 16 : 18} />
+              ) : index === currentStep ? (
+                <CircleNotch size={isMobile ? 16 : 18} />
+              ) : (
+                <ArrowRight size={isMobile ? 16 : 18} />
+              )
+            }
+            label={`Stage ${index + 1}`}
+            description={status}
+            className={index <= currentStep ? "completed-step" : "pending-step"}
+          />
+        ))}
+      </Stepper>
+    </div>
+  );
+}
+
+PatentProgressBar.propTypes = {
+  currentStatus: PropTypes.string.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+};
+
+// Format date helper function
+const formatDate = (dateString) => {
+  if (!dateString) return "Not Available";
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  } catch (error) {
+    console.error("Error formatting date:", error);
+    return "Invalid Date";
+  }
+};
+
+// File Download Button Component
+function FileDownloadButton({ fileUrl, fileName, disabled }) {
+  return (
+    <Button
+      component="a"
+      href={fileUrl}
+      target="_blank"
+      download={fileName}
+      color="blue"
+      className="down-button"
+      disabled={disabled}
+      leftIcon={<IconFile size={16} />}
+    >
+      Download {fileName}
+    </Button>
+  );
+}
+
+FileDownloadButton.propTypes = {
+  fileUrl: PropTypes.string,
+  fileName: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+function PCCAStatusView({ applicationId }) {
+  const [applicationData, setApplicationData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchApplicationDetails = async () => {
+      if (!applicationId) {
+        setError("No application ID provided");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await axios.get(
+          `${host}/patentsystem/pccAdmin/applications/status/details/${applicationId}/`,
+          {
+            headers: {
+              Authorization: `Token ${localStorage.getItem("authToken")}`,
+            },
+          },
+        );
+        setApplicationData(response.data);
+        setError(null);
+      } catch (err) {
+        console.error("Error fetching application details:", err);
+        setError("Failed to load application details. Please try again later.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApplicationDetails();
+  }, [applicationId]);
+
+  const handleDownloadForm = () => {
+    // Logic to download the entire form
+    // This would typically be an API call to get a PDF or other document format
+    alert("Downloading the complete application form...");
+
+    // Example implementation:
+    // window.location.href = `http://127.0.0.1:8000/patentsystem/pccAdmin/applications/download/${applicationId}/`;
+  };
+
+  if (loading) {
+    return (
+      <Container
+        className="form-container"
+        size="lg"
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "300px",
+        }}
+      >
+        <Loader size="xl" variant="dots" />
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container className="form-container" size="lg">
+        <Alert icon={<IconAlertCircle size={16} />} title="Error" color="red">
+          {error}
+        </Alert>
+      </Container>
+    );
+  }
+
+  if (!applicationData) {
+    return (
+      <Container className="form-container" size="lg">
+        <Alert icon={<IconInfoCircle size={16} />} title="No Data" color="blue">
+          No application data found for the specified ID.
+        </Alert>
+      </Container>
+    );
+  }
+
+  return (
+    <Container className="form-container" size="lg">
+      <Text className="form-title">{applicationData.title || "Untitled"}</Text>
+
+      <Card className="form-section">
+        <Text className="section-title">Application Details</Text>
+        <div className="form-field">
+          <Text className="field-heading">Primary Applicant:</Text>
+          <Text className="field-value">
+            {applicationData.primary_applicant_name || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Submission Date:</Text>
+          <Text className="field-value">
+            {formatDate(applicationData.dates?.submitted_date)}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Application ID:</Text>
+          <Text className="field-value">
+            {applicationData.application_id || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Token Number:</Text>
+          <Text className="field-value">
+            {applicationData.token_no || "Not Assigned"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Status:</Text>
+          <Text className="field-value">
+            {applicationData.status || "Draft"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Decision Status:</Text>
+          <Text className="field-value">
+            {applicationData.decision_status || "Pending"}
+          </Text>
+        </div>
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">Applicants</Text>
+        {applicationData.inventors && applicationData.inventors.length > 0 ? (
+          applicationData.inventors.map((applicant, index) => (
+            <div key={index} className="inventor-container">
+              <Text className="inventor-title">Applicant {index + 1}</Text>
+              <div className="form-field">
+                <Text className="field-heading">Name:</Text>
+                <Text className="field-value">{applicant.name || "—"}</Text>
+              </div>
+              <div className="form-field">
+                <Text className="field-heading">Email:</Text>
+                <Text className="field-value">{applicant.email || "—"}</Text>
+              </div>
+              <div className="form-field">
+                <Text className="field-heading">Contact Address:</Text>
+                <Text className="field-value">{applicant.address || "—"}</Text>
+              </div>
+              <div className="form-field">
+                <Text className="field-heading">Mobile:</Text>
+                <Text className="field-value">{applicant.mobile || "—"}</Text>
+              </div>
+              <div className="form-field">
+                <Text className="field-heading">Percentage Share:</Text>
+                <Text className="field-value">
+                  {applicant.percentage_share || "—"}%
+                </Text>
+              </div>
+            </div>
+          ))
+        ) : (
+          <Text>No applicant information available</Text>
+        )}
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">
+          Section I: Administrative and Technical Details
+        </Text>
+        <div className="form-field">
+          <Text className="field-heading">Title of Application:</Text>
+          <Text className="field-value">{applicationData.title || "—"}</Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Area of the invention:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.area || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Problem in the area:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.problem || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Objective of your invention:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.objective || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Novelty:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.novelty || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Advantages:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.advantages || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Tested:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.is_tested === true
+              ? "Yes"
+              : applicationData.section_I?.is_tested === false
+                ? "No"
+                : "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Proof of Concept:</Text>
+          <div className="field-value">
+            {applicationData.section_I?.poc_details ? (
+              <FileDownloadButton
+                fileUrl={`${host}${applicationData.section_I.poc_details}`}
+                fileName="POC-File"
+                disabled={!applicationData.section_I?.poc_details}
+              />
+            ) : (
+              "No file available"
+            )}
+          </div>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Applications:</Text>
+          <Text className="field-value">
+            {applicationData.section_I?.applications || "—"}
+          </Text>
+        </div>
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">Section II: IPR Ownership</Text>
+        <div className="form-field">
+          <Text className="field-heading">Funding Details:</Text>
+          <Text className="field-value">
+            {applicationData.section_II?.funding_details || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Source of funding:</Text>
+          <Text className="field-value">
+            {applicationData.section_II?.funding_source || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Source Agreement:</Text>
+          <div className="field-value">
+            {applicationData.section_II?.source_agreement ? (
+              <FileDownloadButton
+                fileUrl={`${host}${applicationData.section_II.source_agreement}`}
+                fileName="Source-Agreement.pdf"
+                disabled={!applicationData.section_II?.source_agreement}
+              />
+            ) : (
+              "No file available"
+            )}
+          </div>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Publication Details:</Text>
+          <Text className="field-value">
+            {applicationData.section_II?.publication_details || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">MOU Details:</Text>
+          <Text className="field-value">
+            {applicationData.section_II?.mou_details || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">MOU File:</Text>
+          <div className="field-value">
+            {applicationData.section_II?.mou_file ? (
+              <FileDownloadButton
+                fileUrl={`${host}${applicationData.section_II.mou_file}`}
+                fileName="MOU-File.pdf"
+                disabled={!applicationData.section_II?.mou_file}
+              />
+            ) : (
+              "No file available"
+            )}
+          </div>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Research Details:</Text>
+          <Text className="field-value">
+            {applicationData.section_II?.research_details || "—"}
+          </Text>
+        </div>
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">Section III: Commercialization</Text>
+        <div className="form-field">
+          <Text className="field-heading">Target Company:</Text>
+          <Text className="field-value">
+            {(Array.isArray(applicationData.section_III)
+              ? applicationData.section_III[0]?.company_name
+              : applicationData.section_III?.company_name) || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Contact Person:</Text>
+          <Text className="field-value">
+            {(Array.isArray(applicationData.section_III)
+              ? applicationData.section_III[0]?.contact_person
+              : applicationData.section_III?.contact_person) || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Contact Number:</Text>
+          <Text className="field-value">
+            {(Array.isArray(applicationData.section_III)
+              ? applicationData.section_III[0]?.contact_no
+              : applicationData.section_III?.contact_no) || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Development Stage:</Text>
+          <Text className="field-value">
+            {(Array.isArray(applicationData.section_III)
+              ? applicationData.section_III[0]?.development_stage
+              : applicationData.section_III?.development_stage) || "—"}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Form-III:</Text>
+          <div className="field-value">
+            {(
+              Array.isArray(applicationData.section_III)
+                ? applicationData.section_III[0]?.form_iii
+                : applicationData.section_III?.form_iii
+            ) ? (
+              <FileDownloadButton
+                fileUrl={`${host}${Array.isArray(applicationData.section_III) ? applicationData.section_III[0].form_iii : applicationData.section_III.form_iii}`}
+                fileName="Form-III.pdf"
+                disabled={false}
+              />
+            ) : (
+              "No file available"
+            )}
+          </div>
+        </div>
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">Important Dates</Text>
+        <div className="form-field">
+          <Text className="field-heading">Submission Date:</Text>
+          <Text className="field-value">
+            {formatDate(applicationData.dates?.submitted_date)}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Assigned Date:</Text>
+          <Text className="field-value">
+            {formatDate(applicationData.dates?.assigned_date)}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Decision Date:</Text>
+          <Text className="field-value">
+            {formatDate(applicationData.dates?.decision_date)}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Patentability Check Date:</Text>
+          <Text className="field-value">
+            {formatDate(applicationData.dates?.patentability_check_date)}
+          </Text>
+        </div>
+        <div className="form-field">
+          <Text className="field-heading">Patentability File Date:</Text>
+          <Text className="field-value">
+            {formatDate(applicationData.dates?.patentability_file_date)}
+          </Text>
+        </div>
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">Comments</Text>
+        <div className="form-field">
+          <Text className="field-value">
+            {applicationData.comments || "No comments available."}
+          </Text>
+        </div>
+      </Card>
+
+      <Card className="form-section">
+        <Text className="section-title">Application Progress</Text>
+        <PatentProgressBar
+          currentStatus={applicationData.status || "Draft"}
+          isMobile={isMobile}
+        />
+      </Card>
+
+      <div className="form-actions">
+        <Button
+          onClick={handleDownloadForm}
+          color="blue"
+          className="down-button"
+          leftIcon={<IconDownload size={16} />}
+        >
+          Download Complete Form
+        </Button>
+      </div>
+    </Container>
+  );
+}
+
+PCCAStatusView.propTypes = {
+  applicationId: PropTypes.string.isRequired,
+};
+
+export default PCCAStatusView;
diff --git a/src/Modules/Patent/components/PCCAdmin/PCCAdminMainDashboard.jsx b/src/Modules/Patent/components/PCCAdmin/PCCAdminMainDashboard.jsx
new file mode 100644
index 000000000..3d5450079
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/PCCAdminMainDashboard.jsx
@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Container, Loader, Flex, Select } from "@mantine/core";
+import { useDispatch } from "react-redux";
+import { SortAscending } from "@phosphor-icons/react";
+import CustomBreadcrumbs from "../../../../components/Breadcrumbs.jsx";
+import ModuleTabs from "../../../../components/moduleTabs.jsx";
+import PCCAdminDashboard from "./Dashboard/PCCAdminDashboard.jsx";
+import OngoingApplication from "./OngoingApplication/OngoingApplication.jsx";
+import PastApplications from "./PastApplication/PastApplications.jsx";
+import NewApplication from "./NewApplication/NewApplicaion.jsx"; // Fixed typo in import name
+import PCCAdminNotifications from "./Notifications/PCCAdminNotification.jsx";
+import CommunicationLogs from "./ManageAttorney/CommunicationLogs.jsx";
+import AnalyticsDashboard from "../PccAdmin/Analytics/AnalyticsDashboard.jsx";
+import SearchApplications from "../Common/Search/SearchApplications.jsx";
+
+// Move constants outside of component
+const SORT_CATEGORIES = ["Most Recent", "Tags", "Title"];
+const TAB_ITEMS = [
+  { title: "Dashboard", id: "0" },
+  { title: "New Applications", id: "1" },
+  { title: "Ongoing Applications", id: "2" },
+  { title: "Past Applications", id: "3" },
+  { title: "Communication Logs", id: "4" },
+  { title: "Notifications", id: "5" },
+  { title: "Search Applications", id: "6" },
+  { title: "Analytics", id: "7" },
+];
+
+function PCCAdminMainDashboard() {
+  const [activeTab, setActiveTab] = useState("0");
+  const [sortedBy, setSortedBy] = useState("Most Recent");
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = localStorage.getItem("authToken");
+      if (!token) {
+        console.error("No authentication token found!");
+        return;
+      }
+
+      try {
+        setLoading(true);
+        // Fetch data logic here if needed
+        // Consider using dispatch to update Redux state
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [dispatch]);
+
+  // Render the appropriate component based on active tab
+  const renderTabContent = () => {
+    if (loading) {
+      return (
+        <Container py="xl">
+          <Loader size="lg" />
+        </Container>
+      );
+    }
+
+    switch (activeTab) {
+      case "0":
+        return <PCCAdminDashboard setActiveTab={setActiveTab} />;
+      case "1":
+        return <NewApplication />;
+      case "2":
+        return <OngoingApplication setActiveTab={setActiveTab} />;
+      case "3":
+        return <PastApplications setActiveTab={setActiveTab} />;
+      case "4":
+        return <CommunicationLogs setActiveTab={setActiveTab} />;
+      case "5":
+        return <PCCAdminNotifications setActiveTab={setActiveTab} />;
+      case "6":
+        return <SearchApplications />;
+      case "7":
+        return <AnalyticsDashboard />;
+      default:
+        return <PCCAdminDashboard setActiveTab={setActiveTab} />;
+    }
+  };
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+
+      <Flex justify="space-between" align="center" mt="lg">
+        <ModuleTabs
+          tabs={TAB_ITEMS}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          badges={[]}
+        />
+
+        <Flex align="center" mt="md" rowGap="1rem" columnGap="4rem" wrap="wrap">
+          <Select
+            classNames={{
+              option: "select-options",
+              input: "select-inputs",
+            }}
+            variant="outline"
+            leftSection={<SortAscending />}
+            data={SORT_CATEGORIES}
+            value={sortedBy}
+            onChange={setSortedBy}
+            placeholder="Sort By"
+          />
+        </Flex>
+      </Flex>
+
+      <Grid mt="xl">{renderTabContent()}</Grid>
+    </>
+  );
+}
+
+export default PCCAdminMainDashboard;
diff --git a/src/Modules/Patent/components/PCCAdmin/PastApplication/PastApplications.jsx b/src/Modules/Patent/components/PCCAdmin/PastApplication/PastApplications.jsx
new file mode 100644
index 000000000..401ae2b49
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/PastApplication/PastApplications.jsx
@@ -0,0 +1,380 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  ScrollArea,
+  Table,
+  Text,
+  Loader,
+  Group,
+  Divider,
+  Select,
+  Badge,
+} from "@mantine/core";
+import { Eye, ArrowsClockwise, Warning, Calendar } from "@phosphor-icons/react";
+import axios from "axios";
+import ViewPastApplication from "./ViewPastApplication";
+import "../../../style/Pcc_Admin/PastApplications.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+import { getStatusColor } from "../../../utils/statusColors.js";
+
+function PastApplications() {
+  const [applications, setApplications] = useState([]);
+  const [filteredApplications, setFilteredApplications] = useState([]);
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedYears, setSelectedYears] = useState([]);
+  const [availableYears, setAvailableYears] = useState([]);
+
+  const columnNames = [
+    "S.No",
+    "Application Number",
+    "Token Number",
+    "Patent Title",
+    "Inventor 1",
+    "Designation",
+    "Department",
+    "Date",
+    "Status",
+    "View",
+  ];
+
+  const formatDate = (dateString) => {
+    if (!dateString || dateString === "Not Provided") return "Not Provided";
+    try {
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  const fetchApplications = async (refresh = false) => {
+    try {
+      if (refresh) setIsRefreshing(true);
+      else setLoading(true);
+
+      const { data } = await axios.get(
+        `${host}/patentsystem/pccAdmin/applications/past/`,
+        {
+          headers: {
+            Authorization: `Token ${localStorage.getItem("authToken")}`,
+          },
+        },
+      );
+
+      const formatted = Object.entries(data.applications || {})
+        .map(([id, details]) => ({
+          id,
+          token_no: details.token_no || "Not Assigned",
+          title: details.title || "Not Provided",
+          submitted_by: details.submitted_by || "Not Provided",
+          designation: details.designation || "Not Provided",
+          department: details.department || "Not Provided",
+          submitted_on: details.submitted_on || "Not Provided",
+          status: details.decision_status || "Not Provided",
+          year: details.submitted_on
+            ? new Date(details.submitted_on).getFullYear().toString()
+            : "Unknown",
+        }))
+        .sort((a, b) => {
+          if (a.submitted_on === "Not Provided") return 1;
+          if (b.submitted_on === "Not Provided") return -1;
+          return new Date(b.submitted_on) - new Date(a.submitted_on);
+        });
+
+      const years = [
+        ...new Set(
+          formatted.filter((f) => f.year !== "Unknown").map((f) => f.year),
+        ),
+      ]
+        .sort((a, b) => b - a)
+        .map((year) => ({ value: year, label: year }));
+
+      setAvailableYears(years);
+      setApplications(formatted);
+      setFilteredApplications(formatted);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching applications:", err);
+      setError("Failed to load applications. Please try again later.");
+    } finally {
+      setLoading(false);
+      if (refresh) setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchApplications();
+  }, []);
+
+  useEffect(() => {
+    if (!applications) return;
+    if (selectedYears.length === 0) {
+      setFilteredApplications(applications);
+    } else {
+      setFilteredApplications(
+        applications.filter((app) => selectedYears.includes(app.year)),
+      );
+    }
+  }, [selectedYears, applications]);
+
+  const handleViewClick = (id) => setSelectedApplication(id);
+  const handleRefresh = () => fetchApplications(true);
+  const handleYearChange = (years) => setSelectedYears(years);
+
+  if (loading) {
+    return (
+      <Box id="pms-pcc-past-loading-container">
+        <Loader size="lg" color="#4a90e2" />
+        <Text mt="md" align="center" size="md" color="#555">
+          Loading applications...
+        </Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box id="pms-pcc-past-error-container">
+        <Group mb="lg" align="center">
+          <Warning size={32} color="#ff4d4f" weight="fill" />
+          <Text color="#ff4d4f" size="lg" weight={500}>
+            Error Loading Applications
+          </Text>
+        </Group>
+        <Text mb="lg" color="#666">
+          {error}
+        </Text>
+        <Button
+          onClick={fetchApplications}
+          color="blue"
+          variant="filled"
+          leftIcon={<ArrowsClockwise size={16} />}
+        >
+          Retry
+        </Button>
+      </Box>
+    );
+  }
+
+  if (!applications || applications.length === 0) {
+    return (
+      <Box id="pms-pcc-past-empty-container">
+        <Text size="lg" align="center" mb="md" weight={500} color="#faad14">
+          No applications found
+        </Text>
+        <Text size="md" align="center" color="#666" mb="lg">
+          There are currently no patent applications in the system.
+        </Text>
+        <Button
+          onClick={handleRefresh}
+          color="blue"
+          variant="filled"
+          leftIcon={<ArrowsClockwise size={16} />}
+        >
+          Refresh
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box id="pms-pcc-past-past-app-status-applications-container">
+      {!selectedApplication ? (
+        <>
+          <Text id="pms-pcc-past-past-app-status-title">Past Applications</Text>
+          <Group position="apart" mb="md">
+            <Button
+              variant="subtle"
+              color="blue"
+              size="sm"
+              onClick={handleRefresh}
+              loading={isRefreshing}
+              leftIcon={<ArrowsClockwise size={16} />}
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+
+            <Select
+              data={availableYears}
+              placeholder="Filter by year"
+              multiple
+              value={selectedYears}
+              onChange={handleYearChange}
+              icon={<Calendar size={16} />}
+              id="pms-pcc-past-year-filter"
+            />
+          </Group>
+
+          <Box
+            id="pms-pcc-past-past-app-outerContainer"
+            style={{ marginRight: "50px" }}
+          >
+            <ScrollArea style={{ height: "calc(100vh - 250px)" }}>
+              <Table highlightOnHover striped withBorder>
+                <thead id="pms-pcc-past-fusionTableHeader">
+                  <tr>
+                    {columnNames.map((columnName, index) => (
+                      <th
+                        key={index}
+                        style={{
+                          padding: "12px 16px",
+                          fontWeight: 600,
+                          fontSize: "17px",
+                          textAlign: "left",
+                          borderBottom: "2px solid #dee2e6",
+                          backgroundColor: "#f8f9fa",
+                        }}
+                      >
+                        {columnName}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredApplications.map((application, index) => (
+                    <tr
+                      key={application.id}
+                      style={{
+                        backgroundColor:
+                          index % 2 === 0 ? "#ffffff" : "#f8f9fa",
+                      }}
+                    >
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {index + 1}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.id}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.token_no}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                        title={application.title}
+                      >
+                        {application.title}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.submitted_by}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.designation}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {application.department}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        {formatDate(application.submitted_on)}
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        <Badge
+                          color={getStatusColor(application.status)}
+                          size="md"
+                          variant="filled"
+                        >
+                          {application.status}
+                        </Badge>
+                      </td>
+                      <td
+                        style={{
+                          padding: "12px 16px",
+                          color: "#333",
+                          borderBottom: "1px solid #dee2e6",
+                        }}
+                      >
+                        <Button
+                          variant="outline"
+                          color="blue"
+                          size="sm"
+                          onClick={() => handleViewClick(application.id)}
+                          style={{
+                            backgroundColor: "#fff",
+                            color: "#0073e6",
+                            border: "1px solid #0073e6",
+                            fontWeight: 500,
+                            transition: "all 0.2s ease",
+                          }}
+                        >
+                          <Eye size={16} /> <span>View</span>
+                        </Button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </ScrollArea>
+          </Box>
+        </>
+      ) : (
+        <Box id="pms-pcc-past-detail-view-container">
+          <Divider my="lg" />
+          <ViewPastApplication
+            applicationId={selectedApplication}
+            handleBackToList={() => setSelectedApplication(null)}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default PastApplications;
diff --git a/src/Modules/Patent/components/PCCAdmin/PastApplication/ViewPastApplication.jsx b/src/Modules/Patent/components/PCCAdmin/PastApplication/ViewPastApplication.jsx
new file mode 100644
index 000000000..03e5a0d45
--- /dev/null
+++ b/src/Modules/Patent/components/PCCAdmin/PastApplication/ViewPastApplication.jsx
@@ -0,0 +1,725 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import {
+  Container,
+  Text,
+  Card,
+  Grid,
+  Button,
+  Loader,
+  Alert,
+  Title,
+} from "@mantine/core";
+import { ArrowLeft, DownloadSimple } from "phosphor-react";
+import "../../../style/Pcc_Admin/ViewPastApplications.css";
+import { host } from "../../../../../routes/globalRoutes/index.jsx";
+
+// Field component for detail view
+function FormField({ label, value }) {
+  return (
+    <div id="pms-pcc-past-form-field">
+      <Text id="pms-pcc-past-field-label">{label}</Text>
+      <Text id="pms-pcc-past-field-value">{value || "Not provided"}</Text>
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+// Field with download button for direct file URLs
+function FormFieldWithDownload({ label, value, fileUrl, fileLabel }) {
+  // Extract just the filename from the path for display
+  const displayValue = value && typeof value === "string" && value.includes("/")
+    ? value.split("/").pop()
+    : value;
+
+  return (
+    <div id="pms-pcc-past-form-field-with-download">
+      <div id="pms-pcc-past-field-label-container">
+        <Text id="pms-pcc-past-field-label">{label}</Text>
+        <Text id="pms-pcc-past-field-value">{displayValue || "Not provided"}</Text>
+      </div>
+      <div id="pms-pcc-past-download-button-wrapper">
+        <FileDownloadButton
+          fileUrl={fileUrl}
+          label={fileLabel}
+          disabled={!fileUrl || fileUrl === "null"}
+        />
+      </div>
+    </div>
+  );
+}
+
+FormFieldWithDownload.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fileUrl: PropTypes.string,
+  fileLabel: PropTypes.string.isRequired,
+};
+
+// File Download Button Component
+function FileDownloadButton({ fileUrl, label, disabled }) {
+  if (!fileUrl || fileUrl === "null" || disabled) {
+    return (
+      <Button
+        variant="outline"
+        color="gray"
+        leftIcon={<DownloadSimple size={18} />}
+        disabled
+      >
+        No {label} Available
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      component="a"
+      href={fileUrl}
+      download
+      variant="outline"
+      color="blue"
+      leftIcon={<DownloadSimple size={18} />}
+    >
+      Download {label}
+    </Button>
+  );
+}
+
+FileDownloadButton.propTypes = {
+  fileUrl: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+// Section component for detail view
+function FormSection({ title, children }) {
+  return (
+    <Card
+      id="pms-pcc-past-detail-section"
+      p="lg"
+      radius="md"
+      withBorder
+      mb="md"
+      style={{ width: "100%" }}
+    >
+      <Title id="pms-pcc-past-section-title">{title}</Title>
+      {children}
+    </Card>
+  );
+}
+
+FormSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function ViewPastApplication({ applicationId, handleBackToList }) {
+  const [selectedApplication, setSelectedApplication] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  const API_BASE_URL = `${host}/patentsystem`;
+  const authToken = localStorage.getItem("authToken");
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const fetchApplicationDetails = async () => {
+      if (!applicationId) {
+        setError("No application ID provided");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await axios.get(
+          `${API_BASE_URL}/pccAdmin/applications/details/${applicationId}/`,
+          {
+            headers: {
+              Authorization: `Token ${authToken}`,
+            },
+          },
+        );
+
+        if (response.data) {
+          setSelectedApplication(response.data);
+          setError(null);
+        } else {
+          setError("No application data found");
+        }
+      } catch (err) {
+        console.error("Error fetching application details:", err);
+        setError(`Failed to load application details: ${err.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApplicationDetails();
+  }, [applicationId, authToken]);
+
+  if (loading) {
+    return (
+      <Container id="pms-pcc-past-loader-container">
+        <Loader size="lg" color="blue" />
+        <Text mt="md">Loading application details...</Text>
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container id="pms-pcc-past-error-container">
+        <Alert color="red" title="Error">
+          {error}
+        </Alert>
+        <Button mt="md" onClick={handleBackToList}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  if (!selectedApplication) {
+    return (
+      <Container id="pms-pcc-past-error-container">
+        <Alert color="blue" title="No Data">
+          No application data found
+        </Alert>
+        <Button mt="md" onClick={handleBackToList}>
+          Back to Applications
+        </Button>
+      </Container>
+    );
+  }
+
+  const {
+    application_id,
+    title,
+    token_no,
+    primary_applicant_name,
+    status,
+    decision_status,
+    comments,
+    inventors: applicants,
+    section_I,
+    section_II,
+    section_III,
+    dates,
+  } = selectedApplication;
+
+  const submittedDate = dates?.submitted_date
+    ? new Date(dates.submitted_date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : "Not recorded";
+
+  // Build file URLs — backend returns media paths like /media/patent/...
+  const mouFileUrl = section_II?.mou_file
+    ? `${host}${section_II.mou_file}`
+    : null;
+  const firstSectionIII = Array.isArray(section_III) ? section_III[0] : section_III;
+  const formIIIFileUrl = firstSectionIII?.form_iii
+    ? `${host}${firstSectionIII.form_iii}`
+    : null;
+  const pocFileUrl = section_I?.poc_details
+    ? `${host}${section_I.poc_details}`
+    : null;
+  const sourceAgreementFileUrl = section_II?.source_agreement
+    ? `${host}${section_II.source_agreement}`
+    : null;
+
+  return (
+    <Container
+      className={`detail-container ${isMobile ? "mobile-form-container" : ""}`}
+      size={isMobile ? "sm" : "lg"}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          position: "relative",
+          marginBottom: "0",
+          backgroundColor: "#f5f7f8",
+          height: "60px",
+          zIndex: 10,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            left: "30px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            zIndex: 20,
+            cursor: "pointer",
+          }}
+        >
+          <Button
+            variant="subtle"
+            color="blue"
+            leftIcon={<ArrowLeft size={18} />}
+            style={{
+              border: "none",
+              padding: "10px",
+              background: "none",
+              cursor: "pointer",
+              fontWeight: "500",
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (typeof handleBackToList === "function") {
+                handleBackToList();
+              } else {
+                window.history.back();
+              }
+            }}
+          >
+            Back
+          </Button>
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            right: "110px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            zIndex: 20,
+          }}
+        >
+          <Button
+            component="a"
+            href={`${API_BASE_URL}/download/${application_id}/`}
+            target="_blank"
+            download={`Application-${application_id}.pdf`}
+            variant="subtle"
+            color="blue"
+            rightIcon={<DownloadSimple size={18} />}
+            style={{
+              border: "none",
+              padding: "10px",
+              background: "none",
+              cursor: "pointer",
+              fontWeight: "500",
+            }}
+          >
+            Download
+          </Button>
+        </div>
+
+        <Text
+          className={`detail-page-title ${isMobile ? "mobile-detail-page-title" : ""}`}
+          style={{
+            fontSize: "24px",
+            fontWeight: "600",
+            textAlign: "center",
+            margin: "0 auto",
+          }}
+        >
+          Application Details
+        </Text>
+      </div>
+
+      <div
+        id="pms-pcc-past-form-content"
+        style={{
+          backgroundColor: "#f5f7f8",
+          boxShadow: "0px 5px 15px rgba(0, 0, 0, 0)",
+          paddingRight: "80px",
+        }}
+      >
+        <FormSection title="Application Overview">
+          <Grid>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Application ID:" value={application_id} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Title:" value={title} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField
+                label="Primary Applicant:"
+                value={primary_applicant_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Submission Date:" value={submittedDate} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Token Number:" value={token_no} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Status:" value={status} />
+            </Grid.Col>
+            <Grid.Col span={12} md={4}>
+              <FormField label="Decision Status:" value={decision_status} />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <FormField label="Comments:" value={comments} />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Key Dates">
+          <div id="pms-pcc-past-key-dates-container">
+            <div id="pms-pcc-past-key-dates-grid">
+              {/* <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">Reviewed by PCC</div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.reviewed_by_pcc_date
+                    ? new Date(dates.reviewed_by_pcc_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet reviewed"}
+                </div>
+              </div> */}
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">
+                  Forwarded to Director
+                </div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.forwarded_to_director_date
+                    ? new Date(
+                        dates.forwarded_to_director_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not yet forwarded"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">Director Approval</div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.director_approval_date
+                    ? new Date(dates.director_approval_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet approved"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">
+                  Patentability Check Start
+                </div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.patentability_check_start_date
+                    ? new Date(
+                        dates.patentability_check_start_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not started"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">
+                  Patentability Check Completed
+                </div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.patentability_check_completed_date
+                    ? new Date(
+                        dates.patentability_check_completed_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not completed"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">
+                  Search Report Generated
+                </div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.search_report_generated_date
+                    ? new Date(
+                        dates.search_report_generated_date,
+                      ).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : "Not generated"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">Date of Filing</div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.patent_filed_date
+                    ? new Date(dates.patent_filed_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not recorded"}
+                </div>
+              </div>
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">Date of Publication</div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.patent_published_date
+                    ? new Date(dates.patent_published_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "Not yet published"}
+                </div>
+              </div>
+
+              {/* <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">Decision Date</div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.decision_date
+                    ? new Date(dates.decision_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "No decision yet"}
+                </div>
+              </div> */}
+
+              <div id="pms-pcc-past-key-date-card">
+                <div id="pms-pcc-past-key-date-title">Date of Granting</div>
+                <div id="pms-pcc-past-key-date-value">
+                  {dates?.final_decision_date
+                    ? new Date(dates.final_decision_date).toLocaleDateString(
+                        "en-US",
+                        {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        },
+                      )
+                    : "No final decision yet"}
+                </div>
+              </div>
+            </div>
+          </div>
+        </FormSection>
+
+        <FormSection title="Section I: Administrative and Technical Details">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Type of IP:" value={section_I?.type_of_ip} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Area of the invention:"
+                value={section_I?.area}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Problem in the area:"
+                value={section_I?.problem}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Objective:" value={section_I?.objective} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Novelty:" value={section_I?.novelty} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField label="Advantages:" value={section_I?.advantages} />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Tested:"
+                value={
+                  section_I?.is_tested === true
+                    ? "Yes"
+                    : section_I?.is_tested === false
+                      ? "No"
+                      : ""
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="POC Details:"
+                value={section_I?.poc_details}
+                fileUrl={pocFileUrl}
+                fileLabel="POC File"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Applications:"
+                value={section_I?.applications}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Section II: IPR Ownership">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Details:"
+                value={section_II?.funding_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Funding Source:"
+                value={section_II?.funding_source}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="Source Agreement:"
+                value={section_II?.source_agreement}
+                fileUrl={sourceAgreementFileUrl}
+                fileLabel="Source Agreement"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Publication Details:"
+                value={section_II?.publication_details}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="MOU Details:"
+                value={section_II?.mou_details}
+                fileUrl={mouFileUrl}
+                fileLabel="MOU File"
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Research Details:"
+                value={section_II?.research_details}
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Section III: Commercialization">
+          <Grid>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Company Name:"
+                value={section_III?.company_name}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Person:"
+                value={section_III?.contact_person}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormField
+                label="Contact Number:"
+                value={section_III?.contact_no}
+              />
+            </Grid.Col>
+            <Grid.Col span={12} md={6}>
+              <FormFieldWithDownload
+                label="Development Stage:"
+                value={section_III?.development_stage}
+                fileUrl={formIIIFileUrl}
+                fileLabel="Form III"
+              />
+            </Grid.Col>
+          </Grid>
+        </FormSection>
+
+        <FormSection title="Applicants">
+          {applicants && applicants.length > 0 ? (
+            <Grid>
+              {applicants.map((applicant, index) => (
+                <Grid.Col key={index} span={12} md={6}>
+                  <Card
+                    id="pms-pcc-past-applicant-card"
+                    p="md"
+                    radius="sm"
+                    withBorder
+                  >
+                    <Text weight={600} size="lg" mb="xs">
+                      Applicant {index + 1}
+                    </Text>
+                    <FormField label="Name:" value={applicant.name} />
+                    <FormField label="Email:" value={applicant.email} />
+                    <FormField label="Mobile:" value={applicant.mobile} />
+                    <FormField label="Address:" value={applicant.address} />
+                    <FormField
+                      label="Share Percentage:"
+                      value={
+                        applicant.percentage_share
+                          ? `${applicant.percentage_share}%`
+                          : ""
+                      }
+                    />
+                  </Card>
+                </Grid.Col>
+              ))}
+            </Grid>
+          ) : (
+            <Text color="dimmed">No applicant information available</Text>
+          )}
+        </FormSection>
+      </div>
+    </Container>
+  );
+}
+
+ViewPastApplication.propTypes = {
+  applicationId: PropTypes.string.isRequired,
+  handleBackToList: PropTypes.func.isRequired,
+};
+
+export default ViewPastApplication;
diff --git a/src/Modules/Patent/data/director/notificationsData.jsx b/src/Modules/Patent/data/director/notificationsData.jsx
new file mode 100644
index 000000000..b5a221e0b
--- /dev/null
+++ b/src/Modules/Patent/data/director/notificationsData.jsx
@@ -0,0 +1,46 @@
+// src/data/notificationsData.js
+
+const notificationsData = [
+  {
+    id: 1,
+    token: "IIITDMJ/AGR/20241107/001/AAS/104",
+    title: "Smart Home Security",
+    status: "Rejected",
+    description: "Application rejected by PCC Admin due to missing details.",
+    date: "2024-10-23",
+    time: "14:30:00",
+    color: "red",
+  },
+  {
+    id: 2,
+    token: "IIITDMJ/AGR/20241107/018/DFS/105",
+    title: "Renewable Energy Storage",
+    status: "Rejected",
+    description: "Application rejected by Director during final approval step.",
+    date: "2024-10-20",
+    time: "16:20:45",
+    color: "red",
+  },
+  {
+    id: 3,
+    token: "IIITDMJ/AGR/20241107/002/NVV/105",
+    title: "Quantum Computing",
+    status: "Accepted",
+    description: "Application approved by Director. PCC Admin to initiate patentability check.",
+    date: "2024-10-21",
+    time: "09:45:00",
+    color: "green",
+  },
+  {
+    id: 4,
+    token: "IIITDMJ/AGR/20241107/003/RSR/106",
+    title: "AI Driven Agriculture",
+    status: "Accepted",
+    description: "Application accepted by PCC Admin and forwarded to Director for initial review.",
+    date: "2024-10-22",
+    time: "10:15:30",
+    color: "green",
+  },
+];
+
+export default notificationsData;
diff --git a/src/Modules/Patent/find_features.py b/src/Modules/Patent/find_features.py
new file mode 100644
index 000000000..7c3155d0e
--- /dev/null
+++ b/src/Modules/Patent/find_features.py
@@ -0,0 +1,24 @@
+import os
+import re
+
+backend_path = r"C:\Users\tanay\OneDrive\Desktop\Fusion1\Fusioncode\Fusion\FusionIIIT\applications\patent_system\services.py"
+with open(backend_path, 'r', encoding='utf-8') as f:
+    text = f.read()
+
+features = [
+    "director",
+    "coi", "conflict",
+    "budget", "financial",
+    "office action",
+    "post_grant", "maintenance",
+    "deadline", "alert",
+    "licens", "tech transfer",
+    "audit"
+]
+
+print("Backend checks:")
+for feat in features:
+    if re.search(feat, text, re.IGNORECASE):
+         print(f"FOUND: {feat}")
+    else:
+         print(f"NOT FOUND: {feat}")
diff --git a/src/Modules/Patent/find_front.py b/src/Modules/Patent/find_front.py
new file mode 100644
index 000000000..a28a4aa7f
--- /dev/null
+++ b/src/Modules/Patent/find_front.py
@@ -0,0 +1,33 @@
+import os
+import re
+
+frontend_path = r"C:\Users\tanay\OneDrive\Desktop\Fusion1\Fusioncode\Fusion-client\src\Modules\Patent"
+features = [
+    "director",
+    "coi", "conflict",
+    "budget", "financial",
+    "office action",
+    "post_grant", "maintenance",
+    "deadline", "alert",
+    "licens", "tech transfer",
+    "audit"
+]
+
+print("Frontend checks:")
+found_feats = set()
+for root, dirs, files in os.walk(frontend_path):
+    for file in files:
+        if file.endswith('.jsx') or file.endswith('.js'):
+            try:
+                with open(os.path.join(root, file), 'r', encoding='utf-8') as f:
+                    text = f.read()
+                    for feat in features:
+                        if re.search(feat, text, re.IGNORECASE):
+                            found_feats.add(feat)
+            except:
+                pass
+for feat in features:
+     if feat in found_feats:
+          print(f"FOUND: {feat}")
+     else:
+          print(f"NOT FOUND: {feat}")
diff --git a/src/Modules/Patent/fix_comm.py b/src/Modules/Patent/fix_comm.py
new file mode 100644
index 000000000..18798baf6
--- /dev/null
+++ b/src/Modules/Patent/fix_comm.py
@@ -0,0 +1,31 @@
+import os
+
+fp = r"C:\Users\tanay\OneDrive\Desktop\Fusion1\Fusioncode\Fusion-client\src\Modules\Patent\components\PCCAdmin\ManageAttorney\CommunicationLogs.jsx"
+with open(fp, "r", encoding="utf-8") as f:
+    text = f.read()
+
+# Replace the applications fetching code
+old_code = """        const ongoingApps = ongoingRes.data.applications || [];
+        const newApps = newRes.data.applications || [];
+        const allApps = [...newApps, ...ongoingApps];"""
+
+new_code = """        const ongoingData = ongoingRes.data.applications || [];
+        const newData = newRes.data.applications || [];
+        
+        const ongoingApps = Array.isArray(ongoingData) 
+          ? ongoingData 
+          : Object.entries(ongoingData).map(([id, app]) => ({ application_id: parseInt(id), ...app }));
+          
+        const newApps = Array.isArray(newData) 
+          ? newData 
+          : Object.entries(newData).map(([id, app]) => ({ application_id: parseInt(id), ...app }));
+          
+        const allApps = [...newApps, ...ongoingApps];"""
+
+if old_code in text:
+    text = text.replace(old_code, new_code)
+    with open(fp, "w", encoding="utf-8") as f:
+        f.write(text)
+    print("CommunicationLogs.jsx patched!")
+else:
+    print("Could not find the target code in CommunicationLogs.jsx")
diff --git a/src/Modules/Patent/fix_pcca.py b/src/Modules/Patent/fix_pcca.py
new file mode 100644
index 000000000..41ab7b8d8
--- /dev/null
+++ b/src/Modules/Patent/fix_pcca.py
@@ -0,0 +1,61 @@
+import os
+import re
+
+fp = r"C:\Users\tanay\OneDrive\Desktop\Fusion1\Fusioncode\Fusion-client\src\Modules\Patent\components\PCCAdmin\PCCAStatusView.jsx"
+with open(fp, "r", encoding="utf-8") as f:
+    text = f.read()
+
+old_code = """  const getStepIndex = (status) => {
+    if (status === "Rejected") return -1;
+    return statuses.findIndex((s) => s === status);
+  };
+
+  const currentStep = getStepIndex(currentStatus);
+  const isRejected = currentStatus === "Rejected";"""
+
+new_code = """  const getStepIndex = (status) => {
+    switch (status) {
+      case "Submitted":
+      case "Resubmitted":
+        return 0;
+      case "Reviewed by PCC Admin":
+        return 1;
+      case "Forwarded for Director's Review":
+      case "Forwarded to Director":
+      case "Under Review":
+        return 2;
+      case "Director's Approval Received":
+      case "Approved":
+        return 3;
+      case "Patentability Check":
+      case "Patentability Check Started":
+      case "Patentability Check Completed":
+        return 4;
+      case "Search Report Generated":
+      case "Patentability Search Report Generated":
+        return 5;
+      case "Patent Filed":
+      case "Patent Published":
+      case "Patent Granted":
+        return 6;
+      case "Rejected":
+      case "Patent Refused":
+      case "Appeal Rejected":
+        return -1;
+      default:
+        // Try finding if it loosely matches
+        const idx = statuses.findIndex((s) => s === status);
+        return idx !== -1 ? idx : 0;
+    }
+  };
+
+  const currentStep = getStepIndex(currentStatus);
+  const isRejected = currentStep === -1;"""
+
+if old_code in text:
+    text = text.replace(old_code, new_code)
+    with open(fp, "w", encoding="utf-8") as f:
+        f.write(text)
+    print("PCCAStatusView.jsx patched!")
+else:
+    print("Could not find the target code in PCCAStatusView.jsx")
diff --git a/src/Modules/Patent/routes/PatentRoutes.jsx b/src/Modules/Patent/routes/PatentRoutes.jsx
new file mode 100644
index 000000000..a7912f896
--- /dev/null
+++ b/src/Modules/Patent/routes/PatentRoutes.jsx
@@ -0,0 +1,111 @@
+import { Route, Routes, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { Layout } from "../../../components/layout";
+
+import ApplicantMainDashboard from "../components/Applicant/ApplicantMainDashboard";
+import DirectorMainDashboard from "../components/Director/DirectorMainDashboard";
+import PCCAdminMainDashboard from "../components/PCCAdmin/PCCAdminMainDashboard";
+import PCCStatusView from "../components/PCCAdmin/PCCAStatusView";
+
+export default function PatentRoutes() {
+  const role = useSelector((state) => state.user.role);
+
+  // Debug: Log the role to console
+  console.log("Patent Routes - Current Role:", role);
+
+  // If role is not loaded yet or is Guest-User, don't redirect to dashboard immediately
+  if (!role || role === "Guest-User") {
+    return (
+      <Layout>
+        <div style={{ padding: "20px", textAlign: "center" }}>
+          <h2>Loading Patent Management System...</h2>
+          <p>Please wait while we verify your access.</p>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Routes>
+      {/* Applicant Routes - Only for applicants or inventors */}
+      {[
+        "student",
+        "alumini",
+        "Professor",
+        "Associate Professor",
+        "Assistant Professor",
+        "Research Engineer",
+      ].includes(role) && (
+        <Route
+          path="/applicant/"
+          element={
+            <Layout>
+              <ApplicantMainDashboard />
+            </Layout>
+          }
+        />
+      )}
+
+      {/* Director Routes - Only for Director */}
+      {role === "Director" && (
+        <Route
+          path="/director"
+          element={
+            <Layout>
+              <DirectorMainDashboard />
+            </Layout>
+          }
+        />
+      )}
+
+      {/* PCC Admin Routes - Only for PCC Admin */}
+      {role === "PCC Admin" && (
+        <Route
+          path="/pccAdmin/"
+          element={
+            <Layout>
+              <PCCAdminMainDashboard />
+            </Layout>
+          }
+        />
+      )}
+
+      {role === "PCC Admin" && (
+        <Route
+          path="/pccAdmin/application/view-details"
+          element={
+            <Layout>
+              <PCCStatusView />
+            </Layout>
+          }
+        />
+      )}
+
+      {/* Default route - redirect to role-specific dashboard */}
+      <Route
+        path="/"
+        element={
+          role === "Director" ? (
+            <Navigate to="/patent/director" replace />
+          ) : role === "PCC Admin" ? (
+            <Navigate to="/patent/pccAdmin/" replace />
+          ) : [
+              "student",
+              "alumini",
+              "Professor",
+              "Associate Professor",
+              "Assistant Professor",
+              "Research Engineer",
+            ].includes(role) ? (
+            <Navigate to="/patent/applicant/" replace />
+          ) : (
+            <Navigate to="/dashboard" replace />
+          )
+        }
+      />
+
+      {/* Redirect users without access or unmatched routes */}
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}
diff --git a/src/Modules/Patent/services/attorneyService.jsx b/src/Modules/Patent/services/attorneyService.jsx
new file mode 100644
index 000000000..b5d82d9b1
--- /dev/null
+++ b/src/Modules/Patent/services/attorneyService.jsx
@@ -0,0 +1,263 @@
+import axios from "axios";
+import { host } from "../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+// Helper function to get token
+const getAuthToken = () => {
+  const token = localStorage.getItem("authToken");
+  if (!token) {
+    throw new Error("Authentication token not found. Please log in.");
+  }
+  return token;
+};
+
+const authHeaders = () => ({
+  headers: {
+    Authorization: `Token ${getAuthToken()}`,
+    "Content-Type": "application/json",
+  },
+});
+
+const authHeadersMultipart = () => ({
+  headers: {
+    Authorization: `Token ${getAuthToken()}`,
+    "Content-Type": "multipart/form-data",
+  },
+});
+
+/**
+ * Service for managing attorney assignments (UC-006).
+ * PCC Admin assigns an external attorney to a patent application.
+ */
+export const attorneyAssignmentService = {
+  /**
+   * Get attorney assignment for a specific application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Object|null>}
+   */
+  getAssignment: async (applicationId) => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/attorney/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 404) {
+        return null;
+      }
+      console.error("Error fetching attorney assignment:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Assign or update attorney for an application.
+   * @param {number|string} applicationId
+   * @param {Object} data - { attorney_name, attorney_email, attorney_phone, attorney_firm, specialization, engagement_proof?, remarks }
+   * @returns {Promise<Object>}
+   */
+  assignAttorney: async (applicationId, data) => {
+    try {
+      const formData = new FormData();
+      formData.append("attorney_name", data.attorney_name || "");
+      formData.append("attorney_email", data.attorney_email || "");
+      formData.append("attorney_phone", data.attorney_phone || "");
+      formData.append("attorney_firm", data.attorney_firm || "");
+      formData.append("specialization", data.specialization || "");
+      formData.append("remarks", data.remarks || "");
+      if (data.engagement_proof) {
+        formData.append("engagement_proof", data.engagement_proof);
+      }
+
+      const response = await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/attorney/`,
+        formData,
+        authHeadersMultipart(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 400) {
+        throw new Error(
+          error.response?.data?.error ||
+            "Invalid data. Please check your input.",
+        );
+      }
+      if (error.response?.status === 403) {
+        throw new Error(
+          error.response?.data?.error ||
+            "You do not have permission to perform this action.",
+        );
+      }
+      console.error("Error assigning attorney:", error);
+      throw error;
+    }
+  },
+};
+
+/**
+ * Service for managing patentability assessments (UC-007).
+ * PCC Admin records the assessment done by the external attorney.
+ */
+export const patentabilityAssessmentService = {
+  /**
+   * Get patentability assessment for a specific application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Object|null>}
+   */
+  getAssessment: async (applicationId) => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/assessment/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 404) {
+        return null;
+      }
+      console.error("Error fetching patentability assessment:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Record or update patentability assessment for an application.
+   * @param {number|string} applicationId
+   * @param {Object} data - { assessed_by_attorney, novelty_score, non_obviousness_score, utility_score, search_completeness, recommendation, opinion_summary, prior_art_references, attorney_report? }
+   * @returns {Promise<Object>}
+   */
+  recordAssessment: async (applicationId, data) => {
+    try {
+      const formData = new FormData();
+      formData.append("assessed_by_attorney", data.assessed_by_attorney || "");
+      formData.append("novelty_score", data.novelty_score || "");
+      formData.append(
+        "non_obviousness_score",
+        data.non_obviousness_score || "",
+      );
+      formData.append("utility_score", data.utility_score || "");
+      formData.append("search_completeness", data.search_completeness || "");
+      formData.append("recommendation", data.recommendation || "");
+      formData.append("opinion_summary", data.opinion_summary || "");
+      formData.append("prior_art_references", data.prior_art_references || "");
+      if (data.attorney_report) {
+        formData.append("attorney_report", data.attorney_report);
+      }
+
+      const response = await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/assessment/`,
+        formData,
+        authHeadersMultipart(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 400) {
+        throw new Error(
+          error.response?.data?.error ||
+            "Invalid data. Please check your input.",
+        );
+      }
+      if (error.response?.status === 403) {
+        throw new Error(
+          error.response?.data?.error ||
+            "You do not have permission to perform this action.",
+        );
+      }
+      console.error("Error recording patentability assessment:", error);
+      throw error;
+    }
+  },
+};
+
+/**
+ * Service for managing filing records (UC-009).
+ * PCC Admin records the patent filing details after it has been filed.
+ */
+export const filingRecordService = {
+  /**
+   * Get filing record for a specific application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Object|null>}
+   */
+  getFilingRecord: async (applicationId) => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/filing/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 404) {
+        return null;
+      }
+      console.error("Error fetching filing record:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Record or update filing for an application.
+   * @param {number|string} applicationId
+   * @param {Object} data - { filing_office, jurisdiction, external_filing_id, filing_date, confirmation_proof?, international_filing_justification, remarks }
+   * @returns {Promise<Object>}
+   */
+  recordFiling: async (applicationId, data) => {
+    try {
+      const formData = new FormData();
+      formData.append("filing_office", data.filing_office || "");
+      formData.append("jurisdiction", data.jurisdiction || "");
+      formData.append("external_filing_id", data.external_filing_id || "");
+      formData.append("filing_date", data.filing_date || "");
+      formData.append(
+        "international_filing_justification",
+        data.international_filing_justification || "",
+      );
+      formData.append("remarks", data.remarks || "");
+      if (data.confirmation_proof) {
+        formData.append("confirmation_proof", data.confirmation_proof);
+      }
+
+      const response = await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/filing/`,
+        formData,
+        authHeadersMultipart(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 400) {
+        throw new Error(
+          error.response?.data?.error ||
+            "Invalid data. Please check your input.",
+        );
+      }
+      if (error.response?.status === 403) {
+        throw new Error(
+          error.response?.data?.error ||
+            "You do not have permission to perform this action.",
+        );
+      }
+      console.error("Error recording filing:", error);
+      throw error;
+    }
+  },
+};
diff --git a/src/Modules/Patent/services/communicationLogService.jsx b/src/Modules/Patent/services/communicationLogService.jsx
new file mode 100644
index 000000000..f46f30bac
--- /dev/null
+++ b/src/Modules/Patent/services/communicationLogService.jsx
@@ -0,0 +1,232 @@
+import axios from "axios";
+import { host } from "../../../routes/globalRoutes/index.jsx";
+
+const API_BASE_URL = `${host}/patentsystem`;
+
+// Helper function to get token
+const getAuthToken = () => {
+  const token = localStorage.getItem("authToken");
+  if (!token) {
+    throw new Error("Authentication token not found. Please log in.");
+  }
+  return token;
+};
+
+const authHeaders = () => ({
+  headers: {
+    Authorization: `Token ${getAuthToken()}`,
+    "Content-Type": "application/json",
+  },
+});
+
+const authHeadersMultipart = () => ({
+  headers: {
+    Authorization: `Token ${getAuthToken()}`,
+    "Content-Type": "multipart/form-data",
+  },
+});
+
+export const communicationLogService = {
+  /**
+   * Get all communication logs for a specific application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Array>} Array of log objects
+   */
+  getLogs: async (applicationId) => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/communications/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error fetching communication logs:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Add a new communication log entry.
+   * Supports file attachment via multipart/form-data.
+   * @param {number|string} applicationId
+   * @param {Object} data - { direction, subject, body, external_party_name, external_party_email, attachment? }
+   * @returns {Promise<Object>}
+   */
+  addLog: async (applicationId, data) => {
+    try {
+      const formData = new FormData();
+      formData.append("direction", data.direction || "");
+      formData.append("subject", data.subject || "");
+      formData.append("body", data.body || "");
+      formData.append("external_party_name", data.external_party_name || "");
+      formData.append("external_party_email", data.external_party_email || "");
+      formData.append(
+        "confidentiality_level",
+        data.confidentiality_level || "Internal",
+      );
+      if (data.attachment) {
+        formData.append("attachment", data.attachment);
+      }
+
+      const response = await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/communications/`,
+        formData,
+        authHeadersMultipart(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      if (error.response?.status === 400) {
+        throw new Error(
+          error.response?.data?.error ||
+            "Invalid data. Please check your input.",
+        );
+      }
+      console.error("Error adding communication log:", error);
+      throw error;
+    }
+  },
+};
+
+export const budgetService = {
+  /**
+   * Get budget details for an application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Object|null>}
+   */
+  getBudget: async (applicationId) => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/budget/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error fetching budget:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Create or update budget for an application.
+   * @param {number|string} applicationId
+   * @param {Object} data - { filing_cost, attorney_fees, administrative_cost, remarks }
+   * @returns {Promise<Object>}
+   */
+  saveBudget: async (applicationId, data) => {
+    try {
+      const response = await axios.post(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/budget/`,
+        data,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error saving budget:", error);
+      throw error;
+    }
+  },
+};
+
+export const auditService = {
+  /**
+   * Get audit logs for an application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Array>}
+   */
+  getAuditLogs: async (applicationId) => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/applications/${applicationId}/audit/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error fetching audit logs:", error);
+      throw error;
+    }
+  },
+};
+
+export const analyticsService = {
+  /**
+   * Get application statistics.
+   * @returns {Promise<Object>}
+   */
+  getStats: async () => {
+    try {
+      const response = await axios.get(
+        `${API_BASE_URL}/pccAdmin/analytics/`,
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error fetching analytics:", error);
+      throw error;
+    }
+  },
+};
+
+export const applicantService = {
+  /**
+   * Resubmit a rejected/needs-revision application.
+   * @param {number|string} applicationId
+   * @returns {Promise<Object>}
+   */
+  resubmit: async (applicationId) => {
+    try {
+      const response = await axios.post(
+        `${API_BASE_URL}/applicant/applications/resubmit/${applicationId}/`,
+        {},
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error resubmitting application:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Withdraw an application.
+   * @param {number|string} applicationId
+   * @param {string} reason
+   * @returns {Promise<Object>}
+   */
+  withdraw: async (applicationId, reason) => {
+    try {
+      const response = await axios.post(
+        `${API_BASE_URL}/applicant/applications/withdraw/${applicationId}/`,
+        { reason },
+        authHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      if (error.response?.status === 401) {
+        throw new Error("Authentication failed. Please log in again.");
+      }
+      console.error("Error withdrawing application:", error);
+      throw error;
+    }
+  },
+};
diff --git a/src/Modules/Patent/services/documentService.jsx b/src/Modules/Patent/services/documentService.jsx
new file mode 100644
index 000000000..77eba60b3
--- /dev/null
+++ b/src/Modules/Patent/services/documentService.jsx
@@ -0,0 +1,42 @@
+import axios from "axios";
+import { host } from "../../../routes/globalRoutes/index.jsx";
+
+const API_BASE = `${host}/patentsystem`;
+
+const getAuthHeaders = () => {
+  const token = localStorage.getItem("authToken");
+  return {
+    headers: {
+      Authorization: `Token ${token}`,
+    },
+  };
+};
+
+export const fetchDocuments = async () => {
+  const response = await axios.get(`${API_BASE}/documents/`, getAuthHeaders());
+  return response.data;
+};
+
+export const addDocument = async (document) => {
+  try {
+    const response = await axios.post(
+      `${API_BASE}/documents/`,
+      document,
+      getAuthHeaders(),
+    );
+    return response.data;
+  } catch (error) {
+    console.error(
+      "Error adding document:",
+      error.response?.data || error.message,
+    );
+    throw error;
+  }
+};
+
+export const deleteDocument = async (id) => {
+  await axios.delete(
+    `${API_BASE}/pccAdmin/documents/${id}/delete/`,
+    getAuthHeaders(),
+  );
+};
diff --git a/src/Modules/Patent/style/Applicant/ApplicantDashboard.css b/src/Modules/Patent/style/Applicant/ApplicantDashboard.css
new file mode 100644
index 000000000..a895ecd34
--- /dev/null
+++ b/src/Modules/Patent/style/Applicant/ApplicantDashboard.css
@@ -0,0 +1,189 @@
+/* General Page Styling */
+/* Title Styling */
+#pms-dashboard-title {
+  font-size: 26px;
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+
+/* Content Below Title */
+#pms-dashboard-content-container {
+  max-width: 95%;
+  font-size: 16px;
+  margin-bottom: 32px;
+  background-color: #ffffff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Feature Box Container */
+#pms-dashboard-feature-box-container {
+  display: flex;
+  flex-direction: column;
+  margin: 16px;
+}
+
+/* Individual Feature Box */
+#pms-dashboard-feature-box-with-hover {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f5f7f8;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  margin-bottom: 16px;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  cursor: pointer;
+}
+
+#pms-dashboard-feature-box-with-hover:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+}
+
+/* Feature Icon */
+#pms-dashboard-feature-icon {
+  margin-right: 16px;
+  color: #0073e6;
+}
+
+/* Feature Title */
+#pms-dashboard-feature-box-title {
+  font-weight: 700;
+  font-size: 16px;
+  color: #2d3748;
+}
+
+#pms-dashboard-divider {
+  margin: 16px 0;
+  border: 1px solid #e2e8f0;
+  width: 100%;
+}
+
+/* Progress Bar Container */
+#pms-dashboard-workflow-container {
+  max-width: 100%;
+  margin-bottom: 32px;
+  margin-top: 32px;
+}
+
+/* Section Title */
+#pms-dashboard-section-title {
+  font-size: 1.5rem;
+  font-weight: 550;
+  color: #2d3748;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+/* Mobile Progress Bar Container */
+#pms-dashboard-mobile-progress-container {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+}
+
+/* Vertical Progress Bar */
+#pms-dashboard-mobile-progress-bar {
+  height: 300px;
+  width: 20px;
+
+}
+
+/* Progress Labels */
+#pms-dashboard-mobile-progress-labels {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+#pms-dashboard-mobile-progress-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#pms-dashboard-mobile-progress-dot {
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Hide Mobile Progress Bar on Larger Screens */
+@media (min-width: 768px) {
+  #pms-dashboard-mobile-progress-container {
+    display: none;
+  }
+}
+
+/* Hide Horizontal Progress Bar on Smaller Screens */
+@media (max-width: 768px) {
+  #pms-status-progress-container {
+    display: none;
+  }
+}
+
+/* Dashboard Grid */
+#pms-dashboard-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 30px;
+  padding-top: 0px;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+  #pms-dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dashboard Cards */
+#pms-dashboard-cards {
+  background-color: #fff;
+  padding: 32px;
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  text-align: left;
+  cursor: pointer;
+  flex: 1 1 calc(50% - 12px); /* Two cards per row on larger screens */
+}
+
+#pms-dashboard-cards:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+}
+
+/* Card Title */
+#pms-dashboard-card-title {
+  font-size: 20px;
+  font-weight: 600;
+  color:rgb(41, 146, 191);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Card Divider */
+#pms-dashboard-card-divider {
+  margin-top: 12px;
+  width: 100%;
+  border: 1px solid #f0f0f0;
+  margin-bottom: 12px;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+  #pms-dashboard-cards {
+    flex: 1 1 100%; /* One card per row on smaller screens */
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Applicant/ApplicantSubmit.css b/src/Modules/Patent/style/Applicant/ApplicantSubmit.css
new file mode 100644
index 000000000..dfc5e0c62
--- /dev/null
+++ b/src/Modules/Patent/style/Applicant/ApplicantSubmit.css
@@ -0,0 +1,101 @@
+/* Page title */
+#pms-submit-header-text {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  padding-left: 50px;
+  margin-bottom: 10px;
+}
+
+/* Card container */
+#pms-submit-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+/* Application card */
+#pms-submit-application-card {
+  flex: 1;
+  min-width: 45%;
+  max-width: 45%;
+  margin-left: 0;
+  padding: 25px;
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#pms-submit-application-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+/* Card title */
+#pms-submit-card-title {
+  font-size: 22px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: #2b3547;
+}
+
+/* Card details */
+#pms-submit-card-details {
+  font-size: 14px;
+  color: #6b7280;
+  margin-bottom: 4px;
+}
+
+/* Card description */
+#pms-submit-card-description {
+  font-size: 14px;
+  color: #4a5568;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+/* Start Application button */
+#pms-start-application-button {
+  margin-top: 16px;
+  background-color: #fff;
+  border: 1px solid #15abff;
+  color: #15abff;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#pms-start-application-button:hover {
+  background-color: #15abff;
+  color: #fff;
+}
+
+/* Responsive behavior for smaller screens */
+@media (max-width: 768px) {
+  #pms-submit-card-container {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  #pms-submit-application-card {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  #pms-submit-header-text {
+    padding-left: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  #pms-submit-header-text {
+    padding-left: 8px;
+    font-size: 26px;
+  }
+
+  #pms-submit-card-container {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Applicant/ApplicationDraft.css b/src/Modules/Patent/style/Applicant/ApplicationDraft.css
new file mode 100644
index 000000000..98850ca86
--- /dev/null
+++ b/src/Modules/Patent/style/Applicant/ApplicationDraft.css
@@ -0,0 +1,53 @@
+/* Page title */
+#patent-system-draft-header-text {
+  font-size: 24px;
+  font-weight: 700;
+  color: #2d3748;
+  letter-spacing: 0.5px;
+  padding-left: 50px;
+  margin-bottom: 10px;
+}
+
+/* Saved drafts container for flex layout */
+#patent-system-draft-app-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  width: 100%;
+}
+
+/* Saved draft card */
+#patent-system-saved-draft-card {
+  flex: 1;
+  min-width: 40%;
+  max-width: 40%;
+  margin-left: 50px;
+  padding: 16px;
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#patent-system-saved-draft-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+
+/* Responsive behavior for smaller screens */
+@media (max-width: 768px) {
+  #patent-system-draft-app-container {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  #patent-system-saved-draft-card {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  #patent-system-draft-header-text {
+    padding-left: 10px;
+  }
+}
diff --git a/src/Modules/Patent/style/Applicant/ApplicationView.css b/src/Modules/Patent/style/Applicant/ApplicationView.css
new file mode 100644
index 000000000..477c8b896
--- /dev/null
+++ b/src/Modules/Patent/style/Applicant/ApplicationView.css
@@ -0,0 +1,648 @@
+/* Application View Container */
+#pms-application-view-container {
+  width: 100%;
+  padding: 0;
+  padding-left: 0px;
+  padding-right: 0px;
+  max-width: 100%;
+  margin: 0 50px;
+}
+
+/* Page Title */
+#pms-view-app-page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 10px;
+  margin-top: 0;
+  text-align: left;
+  padding: 0;
+}
+
+#pms-form-title::after {
+  content: "";
+  display: block;
+  width: 80px;
+  height: 4px;
+  /* background: #4c6ef5; */
+  margin: 10px auto 0;
+  border-radius: 2px;
+}
+
+/* Applications Grid - Modified for 2 cards per row */
+#pms-view-applications-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Application Card */
+#pms-application-card {
+  padding: 25px;
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  height: 100%;
+  width: 100%;
+}
+
+#pms-application-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+/* Card Title */
+#pms-app-card-title {
+  font-size: 22px;
+  font-weight: 500;
+  color: #2b3547;
+  margin-bottom: 2px;
+}
+
+/* Card Info Items */
+#pms-app-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#pms-info-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+#pms-info-text {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+/* Status Badge */
+#pms-card-badge-container {
+  margin-top: 6px;
+}
+
+/* View Button */
+#pms-view-application-button {
+  margin-top: 16px;
+  background-color: #fff;
+  border: 1px solid #15abff;
+  color: #15abff;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#pms-view-application-button:hover {
+  background-color: #15abff;
+  color: #fff;
+}
+
+/* Empty State Card */
+#pms-empty-state-card {
+  max-width: 600px;
+  margin: 0 0;
+  text-align: left;
+  padding: 25px;
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#pms-empty-state-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+#pms-empty-state-card button {
+  margin-top: 16px;
+  background-color: #fff;
+  border: 1px solid #15abff;
+  color: #15abff;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#pms-empty-state-card button:hover {
+  background-color: #15abff;
+  color: #fff;
+}
+
+/* Loader Container */
+#pms-loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 40px 0;
+}
+
+/* ApplicationView#pms-css - FORM PART ONLY (Detail View) */
+
+/* Detail View Container */
+#pms-detail-container {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0px;
+  border-radius: 8px;
+  background-color: #f5f7f8;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
+}
+
+/* Form Content */
+#pms-form-content {
+  background: #f5f7f8;
+  border-radius: 8px;
+  padding: 0;
+  width: 95%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+}
+
+/* Sections */
+#pms-detail-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  background-color: #ffffff;
+}
+
+#pms-form-section {
+  padding: 0;
+  margin: 0 0 20px 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+#pms-form-section h3 {
+  font-size: 1.2rem;
+  color: #333;
+  margin: 0;
+  padding: 15px 20px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e9ecef;
+  width: 100%;
+  line-height: 1.5;
+}
+
+#pms-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Header Section */
+#pms-application-view-detail-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+#pms-application-view-back-button {
+  position: absolute;
+  left: 0;
+  background-color: transparent;
+  color: #15abff;
+  border: 1px solid #15abff;
+  padding: 8px 16px;
+  font-weight: 500;
+}
+
+#pms-application-view-back-button:hover {
+  background-color: rgba(210, 217, 244, 0.1);
+  color: #15abff;
+  box-shadow: none;
+}
+
+/* Add styling for download button */
+#pms-application-view-download-button {
+  position: absolute;
+  right: 0;
+  background-color: transparent;
+  color: #15abff;
+  border: 1px solid #15abff;
+  padding: 8px 16px;
+  font-weight: 500;
+}
+
+#pms-application-view-download-button:hover {
+  background-color: rgba(76, 110, 245, 0.1);
+  color: #4c6ef5;
+  box-shadow: none;
+}
+
+#pms-view-application-back-button:active {
+  transform: translateY(0);
+  font-weight: 500;
+}
+
+#pms-application-view-page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #2d3748;
+  letter-spacing: 0.5px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 0;
+  max-width: 80%;
+}
+
+#pms-not-submitted-text {
+  color: #e03131;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Section Titles - Consistent styling */
+.pms-form-section-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #2d3748;
+  margin-bottom: 30px;
+  padding-bottom: 10px;
+  position: relative;
+  border-bottom: 1px solid #e9ecef;
+}
+
+/* Key Dates Section - New Design */
+#pms-key-dates-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+#pms-key-dates-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+#pms-key-date-card {
+  background: #f5f7f8;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  /* border-left: 3px solid #4c6ef5; */
+  transition: all 0.3s ease;
+}
+
+#pms-key-date-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#pms-key-date-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #555;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+#pms-key-date-value {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #pms-key-dates-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  #pms-key-date-card {
+    padding: 12px;
+  }
+  
+  #pms-key-date-title {
+    font-size: 13px;
+  }
+  
+  #pms-key-date-value {
+    font-size: 14px;
+  }
+}
+/* Progress Bar Desktop Layout */
+#pms-desktop-stepper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+#pms-workflow-stepper {
+  width: 100%;
+}
+
+#pms-workflow-stepper#pms-second-row {
+  margin-top: -10px; /* Reduce gap between rows */
+}
+
+/* Adjust step descriptions to prevent wrapping */
+#pms-workflow-stepper #pms-mantine-Stepper-stepDescription {
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+/* Mobile stepper adjustments */
+#pms-workflow-stepper#pms-mobile-view {
+  padding-left: 10px;
+}
+
+#pms-workflow-stepper#pms-mobile-view #pms-mantine-Stepper-stepDescription {
+  font-size: 13px;
+}
+
+
+/* Applicant Cards */
+#pms-applicant-card {
+  padding: 15px;
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  margin-bottom: 15px;
+}
+
+/* Download Field Container - Desktop */
+#pms-download-field-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Download Button Wrapper */
+#pms-download-button-wrapper {
+  margin-left: auto; /* Pushes button to right */
+}
+
+/* Download Button Styling */
+#pms-download-button {
+  white-space: nowrap;
+  margin-left: 16px;
+}
+
+/* Form Field Row - For fields with download buttons */
+#pms-field-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  #pms-download-field-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  #pms-download-button-wrapper {
+    margin-left: 0;
+    margin-top: 8px;
+    width: 100%;
+  }
+  
+  #pms-download-button {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+/* Form Field with Download Button */
+.pms-form-field-with-download {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+#pms-field-label-container {
+  flex: 1;
+  min-width: 200px;
+}
+
+#pms-download-button-wrapper {
+  margin-left: 16px;
+  flex-shrink: 0;
+}
+
+/* Adjust the download button styling */
+#pms-download-button-container #pms-mantine-Button {
+  white-space: nowrap;
+}
+
+/* For mobile view */
+@media (max-width: 768px) {
+  #pms-form-field-with-download {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  #pms-field-label-container {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  
+  #pms-download-button-wrapper {
+    margin-left: 0;
+    width: 100%;
+  }
+  
+  #pms-download-button-container #pms-mantine-Button {
+    width: 100%;
+  }
+}
+/* Status Stepper */
+#pms-status-stepper-container {
+  margin: 30px 0;
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+#pms-rejected-status {
+  margin-bottom: 16px;
+  text-align: center;
+  color: #e03131;
+  font-weight: 600;
+}
+
+/* Form Actions */
+#pms-form-actions {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+#pms-form-actions #pms-mantine-Button {
+  background-color: #4c6ef5;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+#pms-form-actions #pms-mantine-Button:hover {
+  background-color: #3b5bdb;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+
+/* Responsive Behavior */
+@media (max-width: 1024px) {
+  #pms-applications-grid {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  #pms-page-title {
+    padding-left: 0;
+    font-size: 24px;
+    text-align: left;
+  }
+
+  #pms-applications-grid {
+    grid-template-columns: 1fr;
+    margin: 0;
+    padding: 0;
+    gap: 16px;
+  }
+
+  #pms-application-card {
+    min-width: 100%;
+    max-width: 100%;
+  }
+  #pms-detail-container {
+    padding: 0px;
+  }
+  
+  #pms-application-view-detail-header {
+    margin-bottom: 20px;
+  }
+  
+  #pms-form-title {
+    font-size: 20px;
+  }
+  
+  #pms-detail-section {
+    padding: 15px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  }
+  
+  #pms-section-title {
+    font-size: 16px;
+  }
+  
+  #pms-form-field {
+    text-align: center; /* Center align all text in form fields */
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center child elements */
+  }
+  
+  #pms-form-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  #pms-form-actions #pms-mantine-Button {
+    width: 100%;
+  }
+
+  #pms-field-label,
+  #pms-field-value {
+    text-align: center; /* Explicit center alignment */
+    width: 100%; /* Ensure full width */
+  }
+
+}
+
+@media (max-width: 480px) {
+  #pms-page-title {
+    font-size: 22px;
+  }
+
+  #pms-application-card {
+    padding: 16px;
+  }
+
+  #pms-app-card-title {
+    font-size: 18px;
+  }
+
+  #pms-form-title {
+    font-size: 18px;
+  }
+  
+  #pms-section-title {
+    font-size: 15px;
+  }
+  
+  #pms-field-label {
+    font-size: 13px;
+  }
+  
+  #pms-field-value {
+    font-size: 14px;
+  }
+  
+  #pms-applicant-card {
+    padding: 12px;
+  }
+}
+
+.pms-form-field-container {
+  padding: 20px;
+  margin-bottom: 1rem;
+  border-radius: 8px;
+  background-color: #f5f7f8;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.pms-form-field-label-and-value {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.pms-form-field-label {
+  font-weight: 600;
+  margin-left: 1rem;
+}
+
+.pms-form-field-value {
+  margin-left: 0px;
+}
diff --git a/src/Modules/Patent/style/Director/DirectorDashboard.css b/src/Modules/Patent/style/Director/DirectorDashboard.css
new file mode 100644
index 000000000..f9b8cd697
--- /dev/null
+++ b/src/Modules/Patent/style/Director/DirectorDashboard.css
@@ -0,0 +1,141 @@
+#pms-director-dashboard-title {
+  font-size: 26px;
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+#pms-director-dashboard-combined-section {
+  max-width: 95%;
+  font-size: 16px;
+  margin-bottom: 32px;
+  background-color: #ffffff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+#pms-director-dashboard-overview-title {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+#pms-director-overview-icon {
+  margin-bottom: -5px;
+  margin-left: 9px;
+}
+
+/* Feature Box Container */
+#pms-director-dashboard-feature-box-container {
+  display: flex;
+  flex-direction: column;
+  margin: 16px;
+}
+
+/* Individual Feature Box */
+#pms-director-dashboard-feature-box-with-hover {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f5f7f8;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  margin-bottom: 16px;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  cursor: pointer;
+}
+
+#pms-director-dashboard-feature-box-with-hover:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+}
+
+/* Feature Icon */
+#pms-director-dashboard-feature-icon {
+  margin-right: 16px;
+  color: #0073e6;
+}
+
+/* Feature Title */
+#pms-dashboard-feature-box-title {
+  font-weight: 700;
+  font-size: 16px;
+  color: #2d3748;
+}
+
+#pms-dashboard-divider {
+  margin: 16px 0;
+  border: 1px solid #e2e8f0;
+  width: 100%;
+}
+
+/* Dashboard Grid */
+#pms-director-dashboard-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 30px;
+  padding-top: 0px;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+  #pms-director-dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dashboard Cards */
+#pms-director-dashboard-cards {
+  background-color: #fff;
+  padding: 32px;
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  text-align: left;
+  cursor: pointer;
+  flex: 1 1 calc(50% - 12px); /* Two cards per row on larger screens */
+}
+
+#pms-director-dashboard-cards:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+}
+
+/* Card Title */
+#pms-director-dashboard-card-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #0073e6;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Card Divider */
+#pms-director-dashboard-card-divider {
+  margin-top: 12px;
+  width: 100%;
+  border: 1px solid #f0f0f0;
+  margin-bottom: 12px;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+  #pms-director-dashboard-cards {
+    flex: 1 1 100%; /* One card per row on smaller screens */
+  }
+}
+
+#pms-director-dashboard-button {
+  font-weight: 500;
+  color: #0073e6;
+  background-color: #fff;
+}
+
+#pms-director-dashboard-button:hover {
+  background-color: #0073e6;
+  color: #fff;
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Director/RecentsView.css b/src/Modules/Patent/style/Director/RecentsView.css
new file mode 100644
index 000000000..111a9d1da
--- /dev/null
+++ b/src/Modules/Patent/style/Director/RecentsView.css
@@ -0,0 +1,199 @@
+/* Scoped container */
+#pms-reviewed-apps-container {
+  position: relative;
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+/* Header styles */
+#pms-reviewed-apps-header {
+  padding: 0 32px;
+  margin-bottom: 8px;
+}
+
+#pms-reviewed-apps-title {
+  font-weight: 700 !important;
+  text-align: left;
+  margin-left: 0 !important;
+  margin-bottom: 5px !important;
+  font-size: 24px;
+}
+
+/* Description area */
+#pms-reviewed-apps-description {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 32px;
+  margin-bottom: 24px;
+}
+
+#pms-reviewed-apps-text {
+  text-align: left;
+}
+
+/* Refresh button */
+#pms-reviewed-apps-refresh {
+  align-self: flex-start;
+  background-color: #fff;
+  border: 1.5px solid #1976d2;
+  color: #1976d2;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.18s, color 0.18s, border 0.18s;
+  width: auto;
+  margin-top: 12px;
+  margin-bottom: -32px;
+  border-radius: 6px;
+  padding: 8px 18px;
+  cursor: pointer;
+}
+#pms-reviewed-apps-refresh:hover,
+#pms-reviewed-apps-refresh:focus {
+  background-color: #1976d2;
+  color: #fff;
+  border: 1.5px solid #1976d2;
+}
+
+/* Main content container */
+#pms-reviewed-apps-outer {
+  max-width: 100%;
+  padding: 24px 32px;
+  background-color: #f5f7f8;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  box-shadow: none;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+/* Table wrapper */
+#pms-reviewed-apps-outer #pms-reviewed-tableWrapper {
+  overflow-x: auto;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+/* Table styles - ERP theme: gray borders, light header, striped rows */
+#pms-reviewed-apps-outer #pms-reviewed-styledTable {
+  width: 100%;
+  font-size: 14px;
+  background-color: #e0e0e0;
+  border-spacing: 0;
+  border-collapse: collapse;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid #e0e0e0;
+  box-shadow: none;
+}
+
+#pms-reviewed-apps-outer #pms-reviewed-styledTable th,
+#pms-reviewed-apps-outer #pms-reviewed-styledTable td {
+  padding: 14px 20px;
+  vertical-align: middle;
+  border: 1px solid #e0e0e0; /* Thin gray border for all cells */
+  color: #222e3a;
+}
+
+#pms-reviewed-apps-outer #pms-reviewed-fusionTableHeader th {
+  padding: 16px 20px;
+  text-align: left;
+  background-color: #f5f7f8; /* Light gray header */
+  font-weight: 700;
+  color: #111;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+  border-bottom: 2px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+}
+
+#pms-reviewed-apps-outer #pms-reviewed-tableRow {
+  background-color: #fff;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+#pms-reviewed-apps-outer #pms-reviewed-tableRow:nth-child(even) {
+  background-color: #fafafa;
+}
+
+#pms-reviewed-apps-outer #pms-reviewed-tableRow:hover {
+  background-color: #f3f5f4;
+  transform: translateY(-1px);
+  box-shadow: none;
+}
+
+/* Status text colors */
+#pms-status-granted {
+  color: #2e7d32 !important;
+  font-weight: 600;
+}
+#pms-status-refused {
+  color: #d32f2f !important;
+  font-weight: 600;
+}
+#pms-status-pending {
+  color: #1976d2 !important;
+  font-weight: 600;
+}
+
+/* Loader styles */
+#pms-reviewed-apps-outer #pms-reviewed-loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+/* Responsive Design */
+@media (min-width: 768px) {
+  #pms-reviewed-apps-description {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  #pms-reviewed-apps-refresh {
+    margin-top: 0;
+  }
+}
+@media (max-width: 767px) {
+  #pms-reviewed-apps-header,
+  #pms-reviewed-apps-description {
+    padding: 0 20px;
+  }
+  #pms-reviewed-apps-outer {
+    padding: 20px;
+    border-radius: 8px;
+  }
+}
+@media (max-width: 480px) {
+  #pms-reviewed-apps-header,
+  #pms-reviewed-apps-description {
+    padding: 0 16px;
+  }
+  #pms-reviewed-apps-outer {
+    padding: 16px;
+    border-radius: 6px;
+  }
+  #pms-reviewed-apps-outer #pms-reviewed-fusionTableHeader th {
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+  #pms-reviewed-apps-outer #pms-reviewed-tableRow td {
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+  #pms-reviewed-apps-refresh {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+}
diff --git a/src/Modules/Patent/style/Director/StatusView.css b/src/Modules/Patent/style/Director/StatusView.css
new file mode 100644
index 000000000..848467b20
--- /dev/null
+++ b/src/Modules/Patent/style/Director/StatusView.css
@@ -0,0 +1,198 @@
+.pms-new-status-director-detail-container {
+  background: transparent;
+  margin: 0 50px 40px 50px;
+  padding: 0;
+  max-width: 1400px;
+  box-sizing: border-box;
+}
+
+/* Responsive margin for mobile */
+@media (max-width: 900px) {
+  .pms-new-status-director-detail-container {
+    margin: 0 10px 30px 10px;
+  }
+}
+
+#pms-new-status-detail-section {
+  background: #f9fbfc;
+  border-radius: 14px;
+  border: 1px solid #e7eaf3;
+  margin-bottom: 32px;
+  box-shadow: 0 1px 8px 0 rgba(30, 42, 64, 0.06);
+  padding: 28px 24px 22px 24px;
+}
+
+/* Section heading centered, font 24px, fw 600 */
+#pms-new-status-section-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #2c3e60;
+  margin-bottom: 20px;
+  text-align: center;
+  width: 100%;
+}
+
+/* Main page title centered, font 24px, fw 600 */
+.pms-director-new-status-detail-page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #253053;
+  margin: 0 auto 12px auto;
+  line-height: 1.2;
+  flex: 1;
+  text-align: center;
+}
+
+/* Back button: subtle gray, less padding, hover effect */
+#pms-new-status-director-view-back-button {
+  background: #f7f8fa;
+  color: #1a1e2e;
+  border: 1px solid #bfc5cd;
+  padding: 4px 16px;
+  font-weight: 500;
+  font-size: 15px;
+  border-radius: 6px;
+  transition: background 0.18s, color 0.18s, border 0.18s;
+  box-shadow: none;
+  min-width: 70px;
+  margin-right: 16px;
+  margin-bottom: 10px;
+}
+
+#pms-new-status-director-view-back-button:hover,
+#pms-new-status-director-view-back-button:focus {
+  background: #bfc5cd;
+  color: #f0f0f0;
+  border: 1.5px solid #bfc5cd;
+}
+
+/* Field: gray box, gray border, label bold, value inline */
+#pms-new-status-form-field,
+#pms-new-status-form-field-with-download {
+  display: flex;
+  align-items: center;
+  background: #f7f8fa;
+  border: 1px solid #d6dbe2;
+  border-radius: 8px;
+  padding: 10px 16px;
+  margin-bottom: 14px;
+  gap: 16px;
+  min-height: 44px;
+  box-sizing: border-box;
+}
+
+#pms-new-status-form-field-with-download {
+  justify-content: space-between;
+}
+
+#pms-new-status-field-label {
+  font-weight: 700;
+  color: #253053;
+  font-size: 1rem;
+  margin-right: 8px;
+  min-width: 160px;
+  flex-shrink: 0;
+}
+
+#pms-new-status-field-value {
+  font-weight: 400;
+  color: #1a1e2e;
+  font-size: 1rem;
+  flex: 1;
+  word-break: break-word;
+}
+
+/* Download button area */
+#pms-new-status-download-button-wrapper {
+  margin-left: 24px;
+  flex-shrink: 0;
+}
+
+/* Key Dates grid: cards in a grid */
+#pms-new-status-key-dates-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 18px;
+  margin-top: 10px;
+  margin-bottom: 6px;
+}
+
+#pms-new-status-key-date-card {
+  background: #e9edf3;
+  border-radius: 8px;
+  border: 1px solid #bfc5cd;
+  padding: 14px 12px;
+  box-shadow: 0 1px 3px 0 rgba(30, 42, 64, 0.04);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+#pms-new-status-key-date-title {
+  font-size: 0.98rem;
+  color: #3b4a6b;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+#pms-new-status-key-date-value {
+  font-size: 1.04rem;
+  color: #1a1e2e;
+  font-weight: 600;
+}
+
+/* Applicant card */
+#pms-new-status-applicant-card {
+  background: #f4f6fa;
+  border: 1px solid #e1e4ed;
+  border-radius: 10px;
+  padding: 18px 14px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 4px 0 rgba(30, 42, 64, 0.04);
+}
+
+/* Decision section */
+#pms-new-status-decision-section {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Center the approve and revert buttons */
+#pms-new-status-decision-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+}
+
+#pms-new-status-decision-button {
+  min-width: 120px;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+/* Responsive tweaks */
+@media (max-width: 700px) {
+  #pms-new-status-detail-section {
+    padding: 14px 6px 12px 6px;
+  }
+  #pms-new-status-form-field,
+  #pms-new-status-form-field-with-download {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 8px 8px;
+  }
+  #pms-new-status-field-label {
+    min-width: unset;
+    margin-bottom: 2px;
+  }
+  #pms-new-status-download-button-wrapper {
+    margin-left: 0;
+  }
+  #pms-new-status-key-dates-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
diff --git a/src/Modules/Patent/style/Director/SubmittedApplications.css b/src/Modules/Patent/style/Director/SubmittedApplications.css
new file mode 100644
index 000000000..c3a36add8
--- /dev/null
+++ b/src/Modules/Patent/style/Director/SubmittedApplications.css
@@ -0,0 +1,208 @@
+/* Scoped container */
+#pms-director-submitted-director-submitted-apps-container {
+  position: relative;
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+/* Header styles */
+#pms-director-submitted-director-submitted-apps-header {
+  padding: 0 32px;
+  margin-bottom: 8px;
+}
+
+#pms-director-submitted-director-submitted-apps-title {
+  font-weight: 700 !important;
+  text-align: left ;
+  margin-left: 0 !important;
+  margin-bottom: 5px !important;
+  font-size: 24px ;
+}
+
+/* Description area */
+#pms-director-submitted-director-submitted-apps-description {
+  display: flex;
+  flex-direction: column;
+  gap: 16px ;
+  padding: 0 32px;
+  margin-bottom: 24px !important;
+}
+
+#pms-director-submitted-director-submitted-apps-text {
+  text-align: left;
+}
+
+/* Refresh button */
+#pms-director-submitted-director-submitted-apps-refresh {
+  align-self: flex-start;
+  background-color: #fff;
+  border: 1.5px solid #1976d2;
+  color: #1976d2;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.18s, color 0.18s, border 0.18s;
+  width: auto;
+  margin-top: 12px;
+  margin-bottom: -32px;
+  border-radius: 6px;
+  padding: 8px 18px;
+  cursor: pointer;
+}
+#pms-director-submitted-director-submitted-apps-refresh:hover,
+#pms-director-submitted-director-submitted-apps-refresh:focus {
+  background-color: #1976d2;
+  color: #fff;
+  border: 1.5px solid #1976d2;
+}
+
+/* Main content container */
+#pms-director-submitted-director-submitted-apps-outer {
+  max-width: 100%;
+  padding: 24px 32px;
+  background-color: #f5f7f8;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  box-shadow: none;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+/* Table wrapper */
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-tableWrapper {
+  overflow-x: auto;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+/* Table styles - ERP theme: gray borders, light header, striped rows */
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-styledTable {
+  width: 100%;
+  font-size: 14px;
+  background-color: #e0e0e0;
+  border-spacing: 0;
+  border-collapse: collapse;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid #e0e0e0;
+  box-shadow: none;
+}
+
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-styledTable th,
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-styledTable td {
+  padding: 14px 20px;
+  vertical-align: middle;
+  border: 1px solid #e0e0e0; /* Thin gray border for all cells */
+  color: #222e3a;
+}
+
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-fusionTableHeader th {
+  padding: 16px 20px;
+  text-align: left;
+  background-color: #f5f7f8; /* Light gray header */
+  font-weight: 700;
+  color: #111;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+  border-bottom: 2px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+}
+
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-tableRow {
+  background-color: #fff;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-tableRow:nth-child(even) {
+  background-color: #fafafa;
+}
+
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-tableRow:hover {
+  background-color: #f3f5f4;
+  transform: translateY(-1px);
+  box-shadow: none;
+}
+
+/* View Button - ERP blue theme, hover effect */
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-viewButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 7px 18px;
+  background: #fff;
+  color: #1976d2;
+  border: 1.5px solid #1976d2;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.18s, color 0.18s, border 0.18s;
+}
+
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-viewButton:hover,
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-viewButton:focus {
+  background: #1976d2;
+  color: #fff;
+  border: 1.5px solid #1976d2;
+}
+
+/* Loader styles */
+#pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+/* Responsive Design */
+@media (min-width: 768px) {
+  #pms-director-submitted-director-submitted-apps-description {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  #pms-director-submitted-director-submitted-apps-refresh {
+    margin-top: 0;
+  }
+}
+@media (max-width: 767px) {
+  #pms-director-submitted-director-submitted-apps-header,
+  #pms-director-submitted-director-submitted-apps-description {
+    padding: 0 20px;
+  }
+  #pms-director-submitted-director-submitted-apps-outer {
+    padding: 20px;
+    border-radius: 8px;
+  }
+}
+@media (max-width: 480px) {
+  #pms-director-submitted-director-submitted-apps-header,
+  #pms-director-submitted-director-submitted-apps-description {
+    padding: 0 16px;
+  }
+  #pms-director-submitted-director-submitted-apps-outer {
+    padding: 16px;
+    border-radius: 6px;
+  }
+  #pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-fusionTableHeader th {
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+  #pms-director-submitted-director-submitted-apps-outer #pms-director-submitted-tableRow td {
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+  #pms-director-submitted-director-submitted-apps-refresh {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/AttorneyDetails.css b/src/Modules/Patent/style/Pcc_Admin/AttorneyDetails.css
new file mode 100644
index 000000000..225cadfc8
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/AttorneyDetails.css
@@ -0,0 +1,156 @@
+#pms-pcc-attorney-details-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+#pms-pcc-attorney-details-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 32px;
+  position: relative;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+#pms-pcc-attorney-details-back-btn {
+  padding: 8px 16px;
+  font-weight: 500;
+  color: #666;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#pms-pcc-attorney-details-back-btn:hover {
+  background-color: transparent;
+  color: #333;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#pms-pcc-attorney-details-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 auto;
+  text-align: center;
+  flex: 1;
+}
+
+#pms-pcc-attorney-details-content {
+  display: flex;
+  gap: 48px;
+  margin-bottom: 32px;
+}
+
+#pms-pcc-attorney-details-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+#pms-pcc-attorney-details-field {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+#pms-pcc-attorney-details-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #495057;
+}
+
+#pms-pcc-attorney-details-icon {
+  color: #228be6;
+  flex-shrink: 0;
+}
+
+#pms-pcc-attorney-details-input {
+  width: 100%;
+}
+
+#pms-pcc-attorney-details-input #pms-pcc-mantine-TextInput-input {
+  height: 40px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ced4da;
+  transition: border-color 0.2s ease;
+  padding: 0 12px;
+}
+
+#pms-pcc-attorney-details-input #pms-pcc-mantine-TextInput-input:focus {
+  border-color: #228be6;
+  box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.1);
+}
+
+#pms-pcc-attorney-details-item {
+  padding: 12px 16px;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #495057;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+#pms-pcc-attorney-details-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 32px;
+  border-top: 1px solid #e9ecef;
+  margin-top: 16px;
+}
+
+#pms-pcc-attorney-details-submit-btn {
+  width: 240px;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #228be6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+#pms-pcc-attorney-details-submit-btn:hover {
+  background-color: #1c7ed6;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #pms-pcc-attorney-details-container {
+    padding: 24px;
+  }
+
+  #pms-pcc-attorney-details-content {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  #pms-pcc-attorney-details-section {
+    gap: 24px;
+  }
+
+  #pms-pcc-attorney-details-title {
+    font-size: 20px;
+  }
+
+  #pms-pcc-attorney-details-submit-btn {
+    width: 100%;
+    max-width: 240px;
+  }
+} 
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/AttorneyForm.css b/src/Modules/Patent/style/Pcc_Admin/AttorneyForm.css
new file mode 100644
index 000000000..4788a0a49
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/AttorneyForm.css
@@ -0,0 +1,123 @@
+/* Main Container */
+#pms-pcc-attorney-details-container {
+  width: 100%;
+  padding: 0 50px;
+  background-color: transparent;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+/* Heading */
+#pms-pcc-attorney-details-heading {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+/* Top Navigation Bar */
+#pms-pcc-top-nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+/* Unified Button Styling */
+#pms-pcc-attorney-back-btn,
+#pms-pcc-edit-details-button,
+#pms-pcc-save-button,
+#pms-pcc-cancel-button {
+  border: 1px solid #1e66f5;
+  color: #1e66f5;
+  background-color: white;
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+}
+
+#pms-pcc-attorney-back-btn:hover,
+#pms-pcc-edit-details-button:hover,
+#pms-pcc-save-button:hover,
+#pms-pcc-cancel-button:hover {
+  background-color: #1e66f5;
+  color: white;
+}
+
+/* Grid Layout - Two Fields Per Row */
+#pms-pcc-attorney-details-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2.5rem;
+}
+
+/* Detail Item Box */
+.detail-item {
+  background-color: #ffffff;
+  border-radius: 10px;
+  border: 2px solid #f0f0f0;
+  padding: 1.25rem 1.5rem;
+  transition: background-color 0.3s ease, border-left 0.3s ease;
+}
+
+
+/* Detail Text */
+#pms-pcc-attorney-detail {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: #333;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+/* Icons */
+#pms-pcc-icon {
+  color: #1e66f5;
+  flex-shrink: 0;
+}
+
+/* Input Field Style */
+#pms-pcc-edit-input {
+  margin-top: 0.4rem;
+}
+
+/* Assigned Cases - Full Width Below Grid */
+#pms-pcc-detail-item-assigned-cases {
+  width: 100%;
+  background-color: #fff;
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 1.5rem;
+}
+
+/* Case List */
+#pms-pcc-assigned-cases-list {
+  margin-top: 1rem;
+  padding-left: 1.2rem;
+  border-left: 4px solid #1e66f5;
+}
+
+#pms-pcc-assigned-case-item {
+  margin-bottom: 0.6rem;
+}
+
+/* No Cases Text */
+#pms-pcc-no-applications-text {
+  margin-top: 1rem;
+  font-style: italic;
+  color: #6c757d;
+}
+
+/* Responsive Adjustments */
+@media screen and (max-width: 768px) {
+  #pms-pcc-attorney-details-grid {
+    grid-template-columns: 1fr;
+  }
+
+  #pms-pcc-top-nav-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/DownloadsPage.css b/src/Modules/Patent/style/Pcc_Admin/DownloadsPage.css
new file mode 100644
index 000000000..2be92c924
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/DownloadsPage.css
@@ -0,0 +1,185 @@
+/* DownloadsPage#pms-pcc-css */
+
+/* Title styling */
+#pms-pcc-downloads-title {
+  margin-bottom: 0px;
+  margin-top: 0px;
+  font-size: 26px;
+  color: #333;
+  font-weight: 700;
+  text-align: left;
+}
+
+/* Description styling */
+#pms-pcc-downloads-description {
+  font-size: 14px;
+  color: #555;
+  text-align: left;
+  margin-bottom: 32px;
+  margin-top: -25px;
+}
+
+/* Card styling for table */
+#pms-pcc-table-card {
+  padding: 24px;
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  overflow-x: auto; /* Enable horizontal scrolling on small screens */
+}
+
+/* Table styling */
+#pms-pcc-downloads-container {
+  padding: 1rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+#pms-pcc-downloads-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 auto;
+  background-color: transparent;
+}
+
+#pms-pcc-downloads-table th,
+#pms-pcc-downloads-table td {
+  padding: 1rem;
+  text-align: left;
+  border-bottom: 1px solid #eaeaea;
+}
+
+#pms-pcc-downloads-table th {
+  background-color: #f5f7f8;
+  font-weight: 600;
+  white-space: nowrap;
+  text-align: center;
+}
+
+#pms-pcc-downloads-table td {
+  text-align: left;
+  vertical-align: middle;
+}
+
+#pms-pcc-downloads-table tr:hover {
+  background-color: #f8f9fa;
+}
+
+/* Button styling */
+#pms-pcc-download-button, #pms-pcc-delete-button {
+  min-width: 120px;
+  transition: all 0.2s ease;
+}
+
+#pms-pcc-download-button:hover, #pms-pcc-delete-button:hover {
+  transform: translateY(-1px);
+}
+
+/* Desktop-specific styles */
+@media (min-width: 769px) {
+  #pms-pcc-manage-attorney-container {
+    margin-left: 30px; /* Shift container to the right */
+  }
+}
+
+/* Responsive styles for smaller screens */
+@media (max-width: 768px) {
+  #pms-pcc-manage-attorney-container {
+    padding: 1rem;
+  }
+
+  #pms-pcc-downloads-container {
+    padding: 0.5rem;
+  }
+
+  #pms-pcc-add-document-form {
+    padding: 1rem;
+  }
+
+  #pms-pcc-downloads-table th,
+  #pms-pcc-downloads-table td {
+    padding: 0.75rem;
+  }
+
+  #pms-pcc-page-heading-title {
+    font-size: 1.5rem;
+  }
+
+  #pms-pcc-description {
+    font-size: 12px;
+  }
+}
+
+/* ...existing styles above... */
+
+/* Alternate row colors for downloads table */
+#pms-pcc-downloads-table tbody tr:nth-child(odd) {
+  background-color: #fff;
+}
+
+#pms-pcc-downloads-table tbody tr:nth-child(even) {
+  background-color: #f5f7f8;
+}
+
+/* Optional: Keep hover effect above the alternates */
+#pms-pcc-downloads-table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+/* ...rest of your styles... */
+
+
+@media (max-width: 480px) {
+  #pms-pcc-page-heading-title {
+    font-size: 20px;
+  }
+
+  #pms-pcc-description {
+    font-size: 11px;
+  }
+
+  #pms-pcc-downloads-container {
+    padding: 0.5rem;
+  }
+
+  #pms-pcc-add-document-form {
+    padding: 0.75rem;
+  }
+
+  #pms-pcc-downloads-table th,
+  #pms-pcc-downloads-table td {
+    padding: 0.5rem;
+  }
+
+  #pms-pcc-download-button, #pms-pcc-delete-button {
+    font-size: 12px;
+    padding: 4px 8px;
+  }
+}
+
+#pms-pcc-add-document-form {
+  background-color: #f8f9fa;
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+}
+
+#pms-pcc-add-document-form-title {
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+#pms-pcc-add-document-button {
+  color: #0073e6;
+  background-color: #fff;
+  border-color: #0073e6;
+}
+
+#pms-pcc-add-document-button:hover {
+  background-color: #0073e6;
+  color: #fff;
+}
+
diff --git a/src/Modules/Patent/style/Pcc_Admin/InsightsPage.css b/src/Modules/Patent/style/Pcc_Admin/InsightsPage.css
new file mode 100644
index 000000000..6531018eb
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/InsightsPage.css
@@ -0,0 +1,222 @@
+#pms-insights-page {
+  width: 100%;
+  max-width: 1800px;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+#pms-page-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+#pms-description {
+  color: #555;
+  margin-bottom: 1rem;
+}
+
+#pms-filter {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+#pms-year-select {
+  min-width: 120px;
+}
+
+#pms-insights-content {
+  display: flex;
+  gap: 2rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#pms-chart-section,
+#pms-table-section {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+#pms-chart-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#pms-legend {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+#pms-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#pms-legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+#pms-legend-label {
+  font-size: 0.9rem;
+  color: #333;
+}
+
+#pms-table-section {
+  min-width: 320px;
+}
+
+#pms-table-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 1rem;
+}
+
+#pms-table-section table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: none;
+  border: 1px solid #e0e7ef;
+}
+
+#pms-table-section th,
+#pms-table-section td {
+  padding: 12px 16px;
+  text-align: left;
+  border: 1px solid #e0e7ef; /* Add border for all cells */
+}
+
+#pms-table-section thead {
+  background-color: #f5f7f8;
+  color: #333;
+}
+
+#pms-table-section thead tr {
+  background-color: #f0f0f0;
+}
+#pms-table-section th {
+  color: #000;
+  font-weight: 600;
+  padding: 12px 16px;
+  border-bottom: 2px solid #e0e7ef;
+  border-top: 1px solid #e0e7ef;
+}
+
+#pms-table-section tbody tr:nth-child(even) {
+  background-color: #f0f4fa;
+}
+#pms-table-section tbody tr:nth-child(odd) {
+  background-color: #f8fbff;
+}
+
+#pms-table-section tbody tr:hover {
+  background-color: #f0f4fa;
+  transition: background 0.15s;
+}
+
+#pms-download-csv-button {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+
+#pms-download-button {
+  background-color: #fff;
+  color: #0073e6;
+  padding: 10px 20px;
+  border-radius: 5px;
+  transition: all 0.1s ease;
+  font-weight: 500;
+  margin-top: 0;
+  margin-left: 0;
+  border: 1px solid #0073e6;
+}
+
+#pms-download-button:hover {
+  background-color: #0073e6;
+  color: #fff;
+}
+
+/* Responsive Styles */
+@media (max-width: 1100px) {
+  #pms-insights-content {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  #pms-table-section,
+  #pms-chart-section {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 700px) {
+  #pms-insights-page {
+    padding: 0.5rem;
+  }
+  #pms-description {
+    font-size: 0.95rem;
+  }
+  #pms-filter {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  #pms-table-section th,
+  #pms-table-section td {
+    padding: 8px 8px;
+    font-size: 0.95rem;
+  }
+  #pms-table-title {
+    font-size: 1rem;
+  }
+  #pms-download-csv-button {
+    margin-top: 1rem;
+  }
+  #pms-download-button {
+    width: 100%;
+    font-size: 1rem;
+    padding: 8px 0;
+  }
+  #pms-legend-label {
+    font-size: 0.85rem;
+  }
+  #pms-legend-color {
+    width: 14px;
+    height: 14px;
+  }
+  #pms-chart-section svg {
+    height: 180px !important;
+    min-height: 120px;
+  }
+}
+
+@media (max-width: 480px) {
+  #pms-table-section th,
+  #pms-table-section td {
+    font-size: 0.85rem;
+    padding: 6px 4px;
+  }
+  #pms-table-title {
+    font-size: 0.95rem;
+  }
+  #pms-legend-label {
+    font-size: 0.8rem;
+  }
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/ManageAttorneys.css b/src/Modules/Patent/style/Pcc_Admin/ManageAttorneys.css
new file mode 100644
index 000000000..abf726ed1
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/ManageAttorneys.css
@@ -0,0 +1,221 @@
+#pms-pcc-manage-attorneys-container {
+  padding: 0;
+  width: 100%;
+  max-width: 1800px;
+  margin: 0 auto;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+#pms-pcc-top-nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+#pms-pcc-page-heading-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+#pms-pcc-description {
+  color: #666;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+#pms-pcc-button-group {
+  display: flex;
+  justify-content: start;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+#pms-pcc-add-new-attorney-button,
+#pms-pcc-remove-attorney-button,
+#pms-pcc-remove-selected-button,
+#pms-pcc-view-details-button,
+#pms-pcc-back-button,
+#pms-pcc-edit-details-button {
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Add New */
+#pms-pcc-add-new-attorney-button {
+  background-color: #fff;
+  color: #0073e6;
+  border: 1px solid #0073e6;
+}
+
+#pms-pcc-add-new-attorney-button:hover {
+  background-color: #0073e6;
+  color: #fff;
+}
+
+/* Remove */
+#pms-pcc-remove-attorney-button {
+  background-color: #fff;
+  color: #dc3545;
+  border: 1px solid #dc3545;
+}
+
+#pms-pcc-remove-attorney-button:hover {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+/* Remove Selected */
+#pms-pcc-remove-selected-button {
+  margin-top: 16px;
+  background-color: #dc3545;
+  color: #fff;
+  border: none;
+}
+
+#pms-pcc-remove-selected-button:hover {
+  background-color: #c82333;
+}
+
+/* Back */
+#pms-pcc-back-button {
+  background-color: #fff;
+  color: #666;
+  border: 1px solid #666;
+}
+
+#pms-pcc-back-button:hover {
+  background-color: #666;
+  color: #fff;
+}
+
+/* Edit */
+#pms-pcc-edit-details-button {
+  background-color: #fff;
+  color: #0073e6;
+  border: 1px solid #0073e6;
+}
+
+#pms-pcc-edit-details-button:hover {
+  background-color: #0073e6;
+  color: #fff;
+}
+
+/* View Button */
+#pms-pcc-view-details-button {
+  background-color: #fff;
+  color: #0073e6;
+  border: 1px solid #0073e6;
+  padding: 6px 14px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+#pms-pcc-view-details-button:hover {
+  background-color: #0073e6;
+  color: #fff;
+}
+
+/* Table Card */
+#pms-pcc-manage-attorney-table-card {
+  background: #f9f8fa;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+  overflow: hidden;
+}
+
+/* Table */
+#pms-pcc-manage-attorney-styledTable {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+#pms-pcc-fusionTableHeader {
+  background-color: #f8f9fa;
+}
+
+#pms-pcc-fusionTableHeader th {
+  padding: 12px 16px;
+  font-weight: 600;
+  color: #333;
+  text-align: left;
+  border-bottom: 2px solid #dee2e6;
+}
+
+/* Row striping and hover */
+#pms-pcc-manage-attorney-styledTable tbody tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+
+#pms-pcc-manage-attorney-styledTable tbody tr:nth-child(even) {
+  background-color: #f5f8f9;
+}
+
+#pms-pcc-manage-attorney-styledTable tbody tr:hover {
+  background-color: #ffffff;
+}
+
+#pms-pcc-manage-attorney-styledTable td {
+  padding: 12px 16px;
+  color: #333;
+  border-bottom: 1px solid #dee2e6;
+  text-align: center;
+}
+
+#pms-pcc-manage-attorney-styledTable td:last-child {
+  display: flex;
+  justify-content: center;
+}
+
+/* Checkbox Styling */
+#pms-pcc-mantine-Checkbox-root {
+  cursor: pointer;
+}
+
+#pms-pcc-mantine-Checkbox-input:checked {
+  background-color: #0073e6;
+  border-color: #0073e6;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  #pms-pcc-manage-attorneys-container {
+    padding: 16px;
+  }
+
+  #pms-pcc-button-group {
+    flex-direction: column;
+  }
+
+  #pms-pcc-manage-attorney-styledTable {
+    font-size: 14px;
+  }
+
+  #pms-pcc-fusionTableHeader th,
+  #pms-pcc-manage-attorney-styledTable td {
+    padding: 8px 12px;
+  }
+
+  #pms-pcc-page-heading-title {
+    font-size: 20px;
+  }
+
+  #pms-pcc-view-details-button {
+    padding: 6px 10px;
+    font-size: 14px;
+  }
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/NewApplication.css b/src/Modules/Patent/style/Pcc_Admin/NewApplication.css
new file mode 100644
index 000000000..0ff4fdd6b
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/NewApplication.css
@@ -0,0 +1,266 @@
+/* General Container */
+.review-applications-container {
+  position: relative;
+  /* width: 100%; */
+}
+.detail-container1{
+  background-color: transparent;
+  width: 100%;
+  /* margin-left: 100px;
+  margin-right: 50px; */
+  max-width: none;
+}
+
+.outerContainer {
+  max-width: none;
+  padding: 24px 50px;
+  background-color:transparent;
+  margin-left: 25px;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0);
+  /* overflow: hidden; */
+  /* transition: all 0.3s ease; */
+  
+}
+
+
+.new-application-title {
+  font-size: 24px;
+  font-weight: 600;
+  text-align: left;
+  margin: 0 auto;
+  padding-left: 50px;
+  position: relative;
+}
+
+.title::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 30px;
+  width: 60px;
+  height: 3px;
+  background-color: #1c7ed6;
+  border-radius: 2px;
+}
+
+.content {
+  text-align: left;
+}
+
+.description {
+  text-align: left;
+  margin-left: 32px;
+  margin-right: 32px;
+  font-size: 15px;
+  color: #555;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+/* Wrapper for horizontal scrolling */
+.tableWrapper {
+  overflow-x: auto;
+  width: 100%;
+  background-color: inherit; /* use parent background */
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+
+
+/* Responsive Table */
+.styledTable {
+  width: 100%;
+  font-size: 14px;
+  background-color: #ffffff;
+  border-spacing: 0;
+  border-collapse: separate;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
+}
+
+.fusionTableHeader th {
+  padding: 16px 20px;
+  text-align: left;
+  background-color: #f2f2f2;
+  font-weight: 600;
+  color: #444;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  transition: background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.tableRow {
+  background-color: #ffffff;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.tableRow:hover {
+  background-color: #f8fbff;
+  transform: translateY(-1px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+}
+
+.tableRow td {
+  padding: 14px 20px;
+  border-top: 1px solid #f0f0f0;
+  vertical-align: middle;
+}
+
+.viewButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  border-radius: 6px;
+  padding: 8px 12px;
+}
+
+.viewButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.back-button {
+  margin-bottom: 20px;
+  margin-right: 50px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+  margin-left: 30px;
+  border-radius: 6px;
+  padding: 8px 16px;
+}
+
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.detail-view-container {
+  padding: 20px 0;
+}
+
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+/* Responsive Design */
+
+/* Small devices (up to 768px) */
+@media (max-width: 768px) {
+  .outerContainer {
+    padding: 20px;
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100vw;
+    overflow-x: hidden;
+    border-radius: 8px;
+  }
+
+  .title {
+    font-size: 24px;
+    padding-left: 20px;
+  }
+
+  .title::after {
+    left: 20px;
+    width: 50px;
+  }
+
+  .description {
+    margin-left: 20px !important;
+    margin-right: 20px !important;
+    font-size: 14px;
+  }
+
+  .tableWrapper {
+    overflow-x: auto;
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .styledTable {
+    min-width: 100%;
+  }
+
+  .fusionTableHeader th {
+    padding: 12px 16px;
+    font-size: 13px;
+  }
+
+  .tableRow td {
+    padding: 12px 16px;
+    font-size: 13px;
+  }
+
+  .viewButton {
+    font-size: 13px;
+    padding: 6px 10px;
+  }
+
+  .back-button {
+    margin-left: 20px;
+    padding: 8px 14px;
+  }
+}
+
+/* Extra small devices (up to 480px) */
+@media (max-width: 480px) {
+  .outerContainer {
+    padding: 16px;
+    max-width: 100vw;
+    overflow-x: hidden;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
+  }
+
+  .title {
+    font-size: 22px;
+    padding-left: 16px;
+  }
+
+  .title::after {
+    left: 16px;
+    width: 40px;
+  }
+
+  .description {
+    margin-left: 16px !important;
+    margin-right: 16px !important;
+    font-size: 13px;
+  }
+
+  .fusionTableHeader th {
+    padding: 10px 14px;
+    font-size: 12px;
+  }
+
+  .tableRow td {
+    padding: 10px 14px;
+    font-size: 12px;
+    white-space: nowrap; /* Prevent text wrapping on small screens */
+  }
+
+  .viewButton {
+    font-size: 12px;
+    padding: 5px 8px;
+  }
+
+  .back-button {
+    margin-left: 16px;
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/NewAttorneyForm.css b/src/Modules/Patent/style/Pcc_Admin/NewAttorneyForm.css
new file mode 100644
index 000000000..72404cc88
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/NewAttorneyForm.css
@@ -0,0 +1,157 @@
+/* NewAttorneyForm#pcc-css */
+
+#pcc-new-attorney-form-container {
+  margin: 0 50px;
+  padding: 40px 32px;
+  width: 100%;
+  max-width: 1800px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+#pcc-new-attorney-form-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+#pcc-new-attorney-back-btn {
+  padding: 8px 16px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #0073e6;
+  border: 1px solid #0073e6;
+  background-color: white;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#pcc-new-attorney-back-btn:hover {
+  background-color: #0073e6;
+  color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+#pcc-new-attorney-form-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #212529;
+  margin: 0;
+}
+
+#pcc-new-attorney-form-content {
+  display: flex;
+  gap: 48px;
+  flex-wrap: wrap;
+  margin-bottom: 40px;
+}
+
+#pcc-new-attorney-form-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 300px;
+}
+
+#pcc-new-attorney-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#pcc-new-attorney-form-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #495057;
+}
+
+#pcc-new-attorney-form-icon {
+  color: #228be6;
+  flex-shrink: 0;
+}
+
+#pcc-new-attorney-form-input input {
+  height: 40px;
+  font-size: 14px;
+  border-radius: 6px;
+  border: 1px solid #ced4da;
+  padding: 0 12px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+#pcc-new-attorney-form-input input:focus {
+  border-color: #228be6;
+  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.15);
+}
+
+#pcc-new-attorney-form-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+  border-top: 1px solid #e9ecef;
+}
+
+#pcc-new-attorney-form-submit-btn {
+  width: 240px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  background-color: #228be6;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+#pcc-new-attorney-form-submit-btn:hover {
+  background-color: #1c7ed6;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+}
+
+/* Modal specific styles */
+#pcc-new-attorney-modal #pcc-mantine-Modal-body {
+  padding: 24px;
+}
+
+#pcc-new-attorney-modal #pcc-mantine-Modal-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #pcc-new-attorney-form-container {
+    padding: 24px;
+  }
+
+  #pcc-new-attorney-form-content {
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  #pcc-new-attorney-form-title {
+    font-size: 22px;
+  }
+
+  #pcc-new-attorney-form-submit-btn {
+    width: 100%;
+    max-width: 240px;
+  }
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/OngoingApplication.css b/src/Modules/Patent/style/Pcc_Admin/OngoingApplication.css
new file mode 100644
index 000000000..9507ecb56
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/OngoingApplication.css
@@ -0,0 +1,151 @@
+/* Centering Header */
+.status-header {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+.m_4081bf90 {
+  margin-top: 10px;
+  margin-left: 59px;
+}
+.status-update-group{
+  margin-left: 0px;
+}
+/* Container Styles */
+.ongoing-app-status-applications-container {
+  margin-left: 50px;
+  margin-right: 50px;
+  border: 1px solid #000;
+  max-width: 100%;
+  background-color: transparent;
+}
+
+/* Title and Description */
+.ongoing-app-status-title {
+  font-size: 24px;
+  margin: 0;
+  font-weight: 600;
+  text-align: left;
+}
+
+.stati-title {
+  font-size: 2rem;
+  color: #333;
+  margin-bottom: 16px;
+  font-weight: 700;
+  text-align: left;
+}
+
+.description {
+  font-size: 1rem;
+  color: #5f6368;
+  margin-bottom: 24px;
+  line-height: 1.6;
+}
+
+/* Loading and Error States */
+.loading-container, 
+.error-container,
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  margin: 20px 0;
+  text-align: center;
+}
+
+/* Table Container */
+.ongoing-app-outerContainer {
+  padding-top: 10px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+/* Status Cards Container */
+.status-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: flex-start;
+}
+
+/* Individual Card Styles */
+.status-card {
+  width: calc(48% - 8px);
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #ffffff;
+  /* Paper-like shadow */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.status-card:hover {
+  /* Stronger shadow on hover to enhance floating effect */
+  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15);
+  transform: translateY(-5px);
+}
+
+/* Card Title and Description */
+.card-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.card-description {
+  font-size: 0.95rem;
+  color: #606060;
+  margin-bottom: 15px;
+  line-height: 1.5;
+}
+
+/* Button Styles */
+.view-button {
+  color: #0073e6;
+  background-color: #ffffff;
+  border: 1px solid #0073e6;
+  font-weight: 500;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.view-button:hover {
+  background-color: #f0f7ff;
+  color: #2563eb;
+}
+
+/* Detail View Styles */
+.detail-view-container {
+  padding: 20px;
+  background-color: transparent;
+  border-radius: 8px;
+  /* Paper-like shadow for detail view */
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.07);
+  margin-top: 20px;
+}
+
+.back-button {
+  margin-bottom: 20px;
+  font-size: 0.9rem;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+/* Year Filter Styles */
+/* Year Filter Styles */
+.year-filter {
+  min-width: 200px;
+  max-width: 300px;
+  
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/PCCAStatus.css b/src/Modules/Patent/style/Pcc_Admin/PCCAStatus.css
new file mode 100644
index 000000000..e96b95de3
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/PCCAStatus.css
@@ -0,0 +1,236 @@
+/* Global Styles */
+body {
+  background: linear-gradient(to right, #e3f2fd, #fce4ec);
+  font-family: Arial, sans-serif;
+  color: #333;
+  margin: 0;
+  padding: 0;
+}
+
+/* Main Container Styling */
+.form-container {
+  background-color: #ffffff;
+  border-radius: 15px;
+  padding: 16px;
+  margin: 20px auto;
+  max-width: 100%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Title Styling */
+.form-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #4a90e2;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+/* Section Styling */
+.form-section {
+  margin-top: 20px;
+  padding: 16px;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.section-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #4a90e2;
+  margin-bottom: 15px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* Form Field Styling */
+.form-field {
+  margin-bottom: 15px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.field-heading {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #555;
+  margin-bottom: 4px;
+  flex: 0 0 30%;
+}
+
+.field-value {
+  font-size: 0.875rem;
+  color: #333;
+  margin-left: 8px;
+  flex: 0 0 65%;
+}
+
+/* Inventor Container Styling */
+.inventor-container {
+  margin-bottom: 20px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.inventor-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #4a90e2;
+  margin-bottom: 10px;
+}
+
+/* Progress Bar Styling */
+.progress-container {
+  margin: 20px 0;
+  width: 100%;
+}
+
+.workflow-stepper {
+  width: 100%;
+}
+
+.completed-step {
+  color: #4caf50;
+}
+
+.pending-step {
+  color: #9e9e9e;
+}
+
+.rejection-label {
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.mobile-view {
+  padding: 10px 0;
+}
+
+/* Form Actions */
+.form-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+/* Button Styling */
+.down-button {
+  background-color: #0073e6;
+  color: #fff;
+  border: none;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 12px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  width: 100%;
+  text-align: center;
+}
+
+.down-button:hover {
+  background-color: #005bb5;
+}
+
+.down-button:focus {
+  outline: none;
+  box-shadow: 0 0 4px 2px rgba(0, 123, 230, 0.5);
+}
+
+.down-button:disabled {
+  background-color: #cccccc;
+  color: #666666;
+  cursor: not-allowed;
+}
+
+/* Responsive Styles */
+@media (min-width: 768px) {
+  /* Desktop-specific styles */
+  .form-actions {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .down-button {
+    width: auto;
+    flex: 1;
+    margin: 0 5px;
+  }
+}
+
+@media (max-width: 768px) {
+  /* Mobile-specific styles */
+  .form-container {
+    padding: 12px;
+    margin: 10px auto;
+  }
+
+  .form-title {
+    font-size: 1.2rem;
+  }
+
+  .form-section {
+    padding: 12px;
+  }
+
+  .field-heading,
+  .field-value {
+    font-size: 0.75rem;
+  }
+
+  .inventor-title {
+    font-size: 0.875rem;
+  }
+
+  .down-button {
+    font-size: 12px;
+    padding: 10px 15px;
+  }
+  
+  .field-heading,
+  .field-value {
+    flex: 0 0 100%;
+  }
+  
+  .field-value {
+    margin-left: 0;
+    margin-top: 4px;
+  }
+}
+
+@media (max-width: 480px) {
+  .form-container {
+    padding: 10px;
+    margin: 8px auto;
+  }
+
+  .form-title {
+    font-size: 1rem;
+  }
+
+  .form-section {
+    padding: 10px;
+  }
+
+  .field-heading,
+  .field-value {
+    font-size: 0.625rem;
+  }
+
+  .inventor-title {
+    font-size: 0.75rem;
+  }
+
+  .down-button {
+    font-size: 10px;
+    padding: 8px 12px;
+  }
+  
+  .section-title {
+    font-size: 1rem;
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/PCCAdminDashboard.css b/src/Modules/Patent/style/Pcc_Admin/PCCAdminDashboard.css
new file mode 100644
index 000000000..1b50008ac
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/PCCAdminDashboard.css
@@ -0,0 +1,104 @@
+/* General Styles */
+#pms-pcc-dashboard-title {
+  font-size: 26px;
+  font-weight: bold;
+  text-align: center;
+  color: #333;
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+/* Combined Section */
+#pms-pcc-combined-section {
+  max-width: 95%;
+  font-size: 16px;
+  margin-bottom: 32px;
+  background-color: #ffffff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Overview Section */
+#pms-pcc-overview-section {
+  margin: 0;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+#pms-pcc-overview-title, #pms-pcc-table-title {
+  font-size: 24px;
+  font-weight: 600;
+  display: flex;
+  align-items: left;
+  gap: 8px;
+  color: #333;
+}
+
+#pms-pcc-overview-icon {
+  margin-top: 7px;
+  color: #000;
+}
+
+
+#pms-pcc-download-button:hover {
+  background-color: #0073e6;
+  color: #ffffff;
+}
+
+/* Dashboard Grid */
+#pms-pcc-dashboard-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 30px;
+  padding-top: 0px;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+  #pms-pcc-dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dashboard Cards */
+#pms-pcc-dashboard-cards {
+  background-color: #fff;
+  padding: 32px;
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  text-align: left;
+  cursor: pointer;
+  flex: 1 1 calc(50% - 12px); /* Two cards per row on larger screens */
+}
+
+#pms-pcc-dashboard-cards:hover {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-4px);
+}
+
+/* Card Title */
+#pms-dashboard-card-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #0073e6;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+/* Card Divider */
+#pms-dashboard-card-divider {
+  margin-top: 12px;
+  width: 100%;
+  border: 1px solid #f0f0f0;
+  margin-bottom: 12px;
+}
+
+/* Responsive Behavior */
+@media (max-width: 768px) {
+  #pms-dashboard-cards {
+    flex: 1 1 100%; /* One card per row on smaller screens */
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/PastApplications.css b/src/Modules/Patent/style/Pcc_Admin/PastApplications.css
new file mode 100644
index 000000000..3846ae5be
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/PastApplications.css
@@ -0,0 +1,173 @@
+/* Container */
+#pms-pcc-past-past-app-status-applications-container {
+  margin-left: 50px;
+  margin-top: 0;
+  width: 100%;
+  max-width: 1800px;
+  background: #f5f7f8;
+  min-height: 100vh;
+  padding-bottom: 32px;
+}
+
+/* Title */
+#pms-pcc-past-past-app-status-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 18px;
+  margin-top: 0;
+  text-align: left;
+  letter-spacing: 0.01em;
+}
+
+/* Loading/Error/Empty */
+#pms-pcc-past-loading-container,
+#pms-pcc-past-error-container,
+#pms-pcc-past-empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  margin: 32px 0;
+  text-align: center;
+}
+
+/* Table Container */
+#pms-pcc-past-past-app-outerContainer {
+  overflow: hidden;
+  margin-right: 50px;
+  margin-top: 12px;
+}
+
+/* Table */
+.mantine-Table-root,
+#pms-pcc-past-past-app-outerContainer table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
+}
+
+#pms-pcc-past-past-app-outerContainer th {
+  font-size: 13px;
+}
+
+#pms-pcc-past-past-app-outerContainer td {
+  font-size: 12px;
+}
+
+#pms-pcc-past-fusionTableHeader th {
+  padding: 14px 18px;
+  font-weight: 500;
+  color: #333;
+  text-align: left;
+  border-bottom: 2px solid #e5e7eb;
+  background: #f8f9fa;
+  font-size: 20px;
+}
+
+#pms-pcc-past-past-app-outerContainer td {
+  padding: 14px 18px;
+  color: #333;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+/* Alternate row colors */
+#pms-pcc-past-past-app-outerContainer tbody tr:nth-child(odd) {
+  background: #fff;
+}
+#pms-pcc-past-past-app-outerContainer tbody tr:nth-child(even) {
+  background: #f8f9fa;
+}
+
+/* Hover */
+#pms-pcc-past-past-app-outerContainer tbody tr:hover {
+  background: #eaf4fa;
+  transition: background 0.15s;
+}
+
+/* Status Badge */
+.status-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #fff;
+  background: #bdbdbd;
+}
+.status-badge.approved { background: #4caf50; }
+.status-badge.rejected { background: #e53935; }
+.status-badge.pending { background: #ffb300; }
+.status-badge.default { background: #bdbdbd; }
+
+/* View Button */
+.view-button,
+#pms-pcc-past-past-app-outerContainer .mantine-Button-root {
+  color: #0073e6;
+  background: #fff;
+  border: 1px solid #0073e6;
+  font-weight: 500;
+  padding: 6px 14px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.18s;
+  font-size: 0.98rem;
+}
+
+.view-button:hover,
+#pms-pcc-past-past-app-outerContainer .mantine-Button-root:hover {
+  background: #f0f7ff;
+  color: #2563eb;
+  border-color: #2563eb;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  #pms-pcc-past-past-app-status-applications-container {
+    margin-left: 8px;
+    padding-bottom: 16px;
+  }
+  #pms-pcc-past-past-app-outerContainer {
+    margin-right: 8px;
+  }
+  .status-card {
+    width: 100%;
+    margin-bottom: 18px;
+  }
+}
+
+@media (max-width: 600px) {
+  #pms-pcc-past-past-app-status-applications-container {
+    margin-left: 0;
+    padding-bottom: 8px;
+  }
+  #pms-pcc-past-past-app-outerContainer {
+    margin-right: 0;
+    border-radius: 7px;
+  }
+  #pms-pcc-past-past-app-status-title {
+    font-size: 1.25rem;
+    margin-bottom: 10px;
+  }
+  .status-card {
+    padding: 14px;
+    border-radius: 7px;
+  }
+  #pms-pcc-past-fusionTableHeader th,
+  #pms-pcc-past-past-app-outerContainer td {
+    padding: 8px 6px;
+    font-size: 0.92rem;
+  }
+}
+
+/* Utility */
+.text-muted {
+  color: #888 !important;
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/ReviewApplication.css b/src/Modules/Patent/style/Pcc_Admin/ReviewApplication.css
new file mode 100644
index 000000000..033a411dd
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/ReviewApplication.css
@@ -0,0 +1,164 @@
+/* General Container */
+.outerContainer {
+  max-width: 100%;
+  padding: 32px;
+  background-color: #f9fafc;
+  margin-left: 25px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  overflow-x: hidden; /* Prevent horizontal overflow */
+}
+
+.title {
+  font-size: 26px;
+  font-weight: bold;
+  text-align: left;
+  margin: 0 auto;
+  margin-top: 15px;
+  margin-bottom: 10px;
+  color: black;
+  padding-left: 30px;
+}
+
+.title span {
+  color: black;
+}
+
+.content {
+  text-align: left;
+}
+
+.description {
+  text-align: left;
+  margin-left: 32px; /* Default margin for desktop */
+  margin-right: 32px; /* Default margin for desktop */
+  font-size: 14px;
+  color: #555;
+}
+
+/* Wrapper for horizontal scrolling */
+.tableWrapper {
+  overflow-x: auto; /* Enable horizontal scrolling */
+  width: 100%;
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
+}
+
+/* Responsive Table */
+.styledTable {
+  width: 100%;
+  font-size: 14px;
+  background-color: #ffffff;
+  border-spacing: 0 8px;
+  transition: all 0.3s ease;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+}
+
+.fusionTableHeader th {
+  padding: 14px 18px;
+  text-align: left;
+}
+
+.tableRow {
+  background-color: #ffffff;
+  border-radius: 8px;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.viewButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+
+/* Responsive Design */
+
+/* Small devices (up to 768px) */
+@media (max-width: 768px) {
+  .outerContainer {
+    padding: 16px; /* Reduced padding for smaller screens */
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100vw; /* Ensure container doesn't exceed viewport width */
+    overflow-x: hidden; /* Prevent horizontal overflow */
+  }
+
+  .title {
+    font-size: 22px; /* Adjusted font size */
+    padding-left: 16px;
+  }
+
+  .description {
+    margin-left: 24px !important; /* Adjusted margin for smaller screens */
+    margin-right: 16px !important; /* Adjusted margin for smaller screens */
+    font-size: 13px; /* Smaller font size for mobile */
+  }
+
+  .tableWrapper {
+    overflow-x: auto; /* Ensure horizontal scrolling */
+    width: 100%; /* Take full width of the container */
+    margin-left: 0; /* Reset negative margin */
+  }
+
+  .styledTable {
+    min-width: 100%; /* Allow table to shrink to fit the screen */
+  }
+
+  .fusionTableHeader th {
+    padding: 10px 12px; /* Reduced padding for smaller screens */
+    font-size: 12px; /* Smaller font size for headers */
+  }
+
+  .tableRow td {
+    padding: 10px 12px; /* Reduced padding for smaller screens */
+    font-size: 12px; /* Smaller font size for table cells */
+  }
+
+  .viewButton {
+    font-size: 12px; /* Smaller font size for button */
+  }
+}
+
+/* Extra small devices (up to 480px) */
+@media (max-width: 480px) {
+  .outerContainer {
+    padding: 12px;
+    max-width: 100vw; /* Ensure container doesn't exceed viewport width */
+    overflow-x: hidden; /* Prevent horizontal overflow */
+  }
+
+  .title {
+    font-size: 20px;
+    padding-left: 8px;
+  }
+
+  .description {
+    margin-left: 16px !important; /* Further reduced margin for very small screens */
+    margin-right: 8px !important; /* Further reduced margin for very small screens */
+    font-size: 12px; /* Even smaller font size for compact screens */
+  }
+
+  .tableWrapper {
+    margin-left: 0; /* Reset negative margin */
+  }
+
+  .styledTable {
+    min-width: 100%; /* Allow table to shrink to fit the screen */
+  }
+
+  .fusionTableHeader th {
+    padding: 8px 10px; /* Further reduced padding for very small screens */
+    font-size: 11px; /* Smaller font size for headers */
+  }
+
+  .tableRow td {
+    padding: 8px 10px; /* Further reduced padding for very small screens */
+    font-size: 11px; /* Smaller font size for table cells */
+  }
+
+  .viewButton {
+    font-size: 11px; /* Smaller font size for button */
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/ReviewComponent.css b/src/Modules/Patent/style/Pcc_Admin/ReviewComponent.css
new file mode 100644
index 000000000..a1da0e3df
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/ReviewComponent.css
@@ -0,0 +1,88 @@
+/* Container for the form */
+.form-container {
+  width: 1300px;
+  margin: auto;
+  background-color: #ffffff; /* White background for contrast */
+  border-radius: 10px; /* Rounded corners */
+  padding: 30px; /* Padding around the content */
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+}
+
+/* Header styles */
+.header {
+  font-size: 28px;
+  font-weight: bold;
+  color: #2d3748; /* Dark gray for text */
+  margin-bottom: 10px; /* Space below header */
+}
+
+.sub-header {
+  font-size: 16px;
+  color: #4a5568; /* Slightly lighter gray */
+  margin-bottom: 20px; /* Space below sub-header */
+}
+
+/* Section title styles */
+.section-title {
+  font-size: 22px;
+  font-weight: bold;
+  color: #2d3748; /* Dark gray */
+  margin-top: 20px; /* Space above section titles */
+}
+
+/* Question title styles */
+.question-title {
+  font-size: 18px;
+  color: #2d3748; /* Dark gray */
+  margin-top: 15px; /* Space above question titles */
+}
+
+/* Input field styles */
+.textarea,
+.text-input {
+  margin-bottom: 20px; /* Space below each input field */
+}
+
+/* Button container styling */
+.button-container {
+  display: flex;
+  justify-content: space-between; /* Space between buttons */
+}
+
+/* Action button styling */
+.action-button {
+    flex-grow: 1; /* Allow buttons to grow equally */
+    margin-right: 10px; /* Space between buttons */
+    transition: background-color .3s ease, transform .2s ease; /* Animation for hover and click effects */
+    border-radius: 5px; /* Rounded corners for buttons */
+    padding: 10px; /* Padding inside buttons */
+    border: none; /* Remove default border */
+}
+
+.action-button:hover {
+    background-color: rgba(0,0,0,0.05); /* Light hover effect for buttons */
+    transform: translateY(-2px); /* Slight lift effect on hover */
+}
+
+/* Remove margin from last button to avoid extra space at the end */
+.action-button:last-child {
+    margin-right: 0; 
+}
+
+/* Textarea styling for better appearance */
+textarea {
+    border-radius: 5px; /* Rounded corners for text areas */
+    border: 1px solid #cbd5e0; /* Light gray border color for text areas */
+    padding: 10px; /* Padding inside text areas */
+    resize: vertical; /* Allow vertical resizing only */
+}
+
+textarea::placeholder {
+    color: #a0aec0; /* Placeholder text color */
+}
+
+textarea:hover,
+textarea:focus {
+    border-color: #3182ce; /* Change border color on hover and focus to blue */
+    outline: none; /* Remove default outline on focus */
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/StatusOfApplications.css b/src/Modules/Patent/style/Pcc_Admin/StatusOfApplications.css
new file mode 100644
index 000000000..256cf645c
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/StatusOfApplications.css
@@ -0,0 +1,111 @@
+/* Centering Header */
+.status-header {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+
+/* Container Styles */
+.status-container {
+  padding: 30px;
+  max-width: 100%;
+  background-color: #f9fafb;
+}
+
+/* Title and Description */
+.status-title {
+  font-size: 2rem;
+  color: #333;
+  margin-bottom: 16px;
+  font-weight: 700;
+  text-align: left;
+}
+.stati-title{
+  font-size: 2rem;
+    color: #333;
+    margin-bottom: 16px;
+    font-weight: 700;
+  text-align: left;
+}
+
+.description {
+  font-size: 1rem;
+  color: #5f6368;
+  margin-bottom: 24px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+/* Status Cards Container */
+.status-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: flex-start;
+}
+
+/* Individual Card Styles */
+.status-card {
+  width: calc(48% - 8px);
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #ffffff;
+  /* Paper-like shadow */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.status-card:hover {
+  /* Stronger shadow on hover to enhance floating effect */
+  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15);
+  
+  transform: translateY(-5px);
+}
+
+/* Card Title and Description */
+.card-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.card-description {
+  font-size: 0.95rem;
+  color: #606060;
+  margin-bottom: 15px;
+  line-height: 1.5;
+}
+
+/* Button Styles */
+.view-button {
+  color: #0073e6;
+    background-color: #ffffff;
+    border: 1px solid #0073e6;
+    font-weight: 500;
+    padding: 1px;
+}
+
+.view-button:hover {
+  background-color: #2563eb;
+}
+
+/* Detail View Styles */
+.detail-view-container {
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  /* Paper-like shadow for detail view */
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.07);
+  margin-top: 20px;
+}
+
+.back-button {
+  margin-bottom: 20px;
+  font-size: 0.9rem;
+  
+  transition: color 0.2s, border-color 0.2s;
+}
+
+
diff --git a/src/Modules/Patent/style/Pcc_Admin/ViewNewApplication.css b/src/Modules/Patent/style/Pcc_Admin/ViewNewApplication.css
new file mode 100644
index 000000000..75fb4c6ab
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/ViewNewApplication.css
@@ -0,0 +1,311 @@
+/*========================================
+  Base & Container
+========================================*/
+#pms-pcc-new-app-detail-container1 {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  background-color: #f5f8f9;
+  padding: 2rem 4%;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
+.mobile-form-container {
+  padding: 1rem 2%;
+}
+
+/*========================================
+  Loader & Error States
+========================================*/
+#pms-pcc-loader-container,
+#pms-pcc-error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 0;
+  text-align: center;
+}
+
+#pms-pcc-error-container .mantine-Alert-root {
+  max-width: 600px;
+  width: 100%;
+}
+
+/*========================================
+  Header: Back Button & Title
+========================================*/
+#pms-pcc-new-app-detail-container1 > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+}
+
+#pms-pcc-new-app-detail-container1 > div:first-child .mantine-Button {
+  margin-right: auto;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  color: #1e66f5;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+#pms-pcc-new-app-detail-container1 > div:first-child .mantine-Button:hover {
+  background-color: #1e66f5;
+  color: #ffffff;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+#pms-pcc-detail-page-title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: #1e293b;
+  text-align: center;
+  margin: 0;
+}
+
+.mobile-detail-page-title {
+  font-size: 1.5rem;
+}
+
+/*========================================
+  Action Buttons Section
+========================================*/
+#pms-pcc-action-buttons-card {
+  margin: 0 0 1rem;
+  max-width: none;
+  padding: 1rem 2rem;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+#pms-pcc-action-buttons-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+}
+
+#pms-pcc-action-button {
+  min-width: 180px;
+  font-weight: 500;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* Blue Download button */
+#pms-pcc-action-button[color="blue"] {
+  border: 2px solid #1e66f5;
+  color: #1e66f5;
+  background: transparent;
+}
+#pms-pcc-action-button[color="blue"]:hover {
+  background-color: #1e66f5;
+  color: white;
+}
+
+/* Green Forward button */
+#pms-pcc-action-button[color="green"] {
+  border: 2px solid #40c057;
+  color: #40c057;
+  background: transparent;
+}
+#pms-pcc-action-button[color="green"]:hover {
+  background-color: #40c057;
+  color: white;
+}
+
+/* Orange Modify button */
+#pms-pcc-action-button[color="orange"] {
+  border: 2px solid #fd7e14;
+  color: #fd7e14;
+  background: transparent;
+}
+#pms-pcc-action-button[color="orange"]:hover {
+  background-color: #fd7e14;
+  color: white;
+}
+
+/* Gray disabled/no-file button */
+#pms-pcc-download-button-wrapper .mantine-Button[color="gray"] {
+  border: 2px solid #adb5bd;
+  color: #adb5bd;
+  background: transparent;
+}
+#pms-pcc-download-button-wrapper .mantine-Button[color="gray"]:hover {
+  background-color: #adb5bd;
+  color: white;
+}
+
+/*========================================
+  Detail Form Content
+========================================*/
+#pms-pcc-pcc-form-content {
+  max-width: 1200px;
+  margin: 1rem auto 2rem;
+}
+
+/*----------------------------------------
+  FormField rows (boxed style)
+----------------------------------------*/
+#pms-pcc-form-field,
+#pms-pcc-form-field-with-download {
+  background-color: #ffffff;
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: flex-start;
+}
+
+#pms-pcc-form-field:last-child,
+#pms-pcc-form-field-with-download:last-child {
+  margin-bottom: 0;
+}
+
+#pms-pcc-field-label-container,
+#pms-pcc-form-field > #pms-pcc-field-label {
+  flex: 0 0 auto;
+}
+
+#pms-pcc-field-value {
+  flex: 1 1 auto;
+  background-color: #f8f9fa;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  font-size: 1rem;
+  color: #334155;
+  word-break: break-word;
+}
+
+/*========================================
+  Section Cards (via FormSection)
+========================================*/
+#pms-pcc-detail-section {
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  margin: 1.5rem auto;
+  max-width: 1200px;
+  padding: 1.5rem 2rem;
+}
+
+#pms-pcc-section-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 1rem;
+}
+
+/*========================================
+  Key Dates Grid & Cards
+========================================*/
+#pms-pcc-key-dates-container {
+  margin-top: 1rem;
+}
+
+#pms-pcc-key-dates-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+#pms-pcc-key-date-card {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#pms-pcc-key-date-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#pms-pcc-key-date-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #475569;
+  margin-bottom: 0.5rem;
+}
+
+#pms-pcc-key-date-value {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+/*========================================
+  Applicants Cards
+========================================*/
+#pms-pcc-applicant-card {
+  background-color: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+/*========================================
+  Modals (override Mantine defaults)
+========================================*/
+.mantine-Modal-root .mantine-Modal-modal {
+  margin: 0 auto !important;
+}
+
+.mantine-Modal-root .mantine-Modal-inner {
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.mantine-Modal-title {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e2e8f0 !important;
+}
+
+.mantine-Modal-root .mantine-Modal-body {
+  padding: 1.5rem 2rem;
+}
+
+/*========================================
+  Responsive Adjustments
+========================================*/
+@media (max-width: 768px) {
+  #pms-pcc-new-app-detail-container1 {
+    padding: 1rem 2%;
+  }
+
+  #pms-pcc-pcc-form-content {
+    padding: 0 1rem;
+  }
+
+  #pms-pcc-action-buttons-group {
+    flex-direction: column;
+  }
+
+  #pms-pcc-key-dates-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  }
+
+  #pms-pcc-detail-section {
+    padding: 1rem 1.5rem;
+    margin: 1rem 0;
+  }
+
+  #pms-pcc-detail-page-title {
+    font-size: 1.5rem;
+  }
+}
diff --git a/src/Modules/Patent/style/Pcc_Admin/ViewOngoingApplication.css b/src/Modules/Patent/style/Pcc_Admin/ViewOngoingApplication.css
new file mode 100644
index 000000000..3e04a65d6
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/ViewOngoingApplication.css
@@ -0,0 +1,273 @@
+/* ============================
+   Detail Container
+============================= */
+.pms-pcc-ongoing-detail-container {
+    max-width: 1800px;
+    margin: 0 auto;
+    background: transparent;
+    border-radius: 16px;
+    box-sizing: border-box;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+}
+
+/* ============================
+     Header Bar
+  ============================= */
+#pms-pcc-past-detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background: #f6f8fa;
+    height: 60px;
+    margin-bottom: 2rem;
+    border-bottom: 1.5px solid #e2e8f0;
+    border-radius: 8px 8px 0 0;
+}
+
+#pms-pcc-past-detail-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 0;
+    text-align: center;
+    letter-spacing: 0.01em;
+}
+
+#pms-pcc-past-detail-back-button,
+#pms-pcc-past-detail-download-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #2563eb;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1.25rem;
+    transition: color 0.18s, background 0.18s;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+#pms-pcc-past-detail-back-button {
+    left: 1.25rem;
+}
+
+#pms-pcc-past-detail-download-button {
+    right: 1.25rem;
+}
+
+#pms-pcc-past-detail-back-button:hover,
+#pms-pcc-past-detail-download-button:hover {
+    color: #fff;
+    background: #2563eb;
+}
+
+/* ============================
+     Section Cards
+  ============================= */
+#pms-pcc-past-detail-section {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(30, 40, 90, 0.05);
+    margin-bottom: 2.2rem;
+    padding: 2rem 2.5rem;
+    border: 1px solid #e5e7eb;
+    width: 100%;
+}
+
+#pms-pcc-past-section-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 1.3rem;
+    letter-spacing: 0.01em;
+}
+
+/* ============================
+     Form Fields
+  ============================= */
+#pms-pcc-past-form-field,
+#pms-pcc-past-form-field-with-download {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.2rem;
+    margin-bottom: 1.1rem;
+}
+
+#pms-pcc-past-form-field-with-download {
+    justify-content: space-between;
+}
+
+#pms-pcc-past-field-label-container,
+#pms-pcc-past-form-field>#pms-pcc-past-field-label {
+    flex: 0 0 auto;
+}
+
+#pms-pcc-past-field-label {
+    font-weight: 600;
+    color: #475569;
+    font-size: 1rem;
+    min-width: 120px;
+}
+
+#pms-pcc-past-field-value {
+    flex: 1 1 auto;
+    background: #fff;
+    padding: 0.6rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 5px;
+    color: #334155;
+    font-size: 1rem;
+    word-break: break-word;
+}
+
+#pms-pcc-past-download-button-wrapper {
+    flex-shrink: 0;
+    margin-left: 1rem;
+}
+
+/* ============================
+     Key Dates Grid
+  ============================= */
+#pms-pcc-past-key-dates-container {
+    margin-top: 0.8rem;
+}
+
+#pms-pcc-past-key-dates-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.2rem;
+}
+
+#pms-pcc-past-key-date-card {
+    background: #f9fafb;
+    border-radius: 8px;
+    padding: 1.1rem 1rem;
+    text-align: center;
+    box-shadow: 0 1px 6px rgba(30, 40, 90, 0.03);
+    border: 1px solid #e5e7eb;
+    transition: transform 0.18s, box-shadow 0.18s;
+}
+
+#pms-pcc-past-key-date-card:hover {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 4px 18px rgba(30, 40, 90, 0.09);
+}
+
+#pms-pcc-past-key-date-title {
+    font-size: 1.05rem;
+    font-weight: 500;
+    color: #475569;
+    margin-bottom: 0.4rem;
+}
+
+#pms-pcc-past-key-date-value {
+    font-size: 1.08rem;
+    font-weight: 600;
+    color: #2563eb;
+}
+
+/* ============================
+     Applicants Cards
+  ============================= */
+#pms-pcc-past-applicant-card {
+    background: #f9fafb;
+    border-radius: 8px;
+    box-shadow: 0 1px 7px rgba(30, 40, 90, 0.04);
+    padding: 1.2rem 1rem;
+    margin-bottom: 1.2rem;
+    border: 1px solid #e5e7eb;
+}
+
+/* ============================
+     Loader & Alerts
+  ============================= */
+#pms-pcc-past-loader-container,
+#pms-pcc-past-error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3.5rem 0;
+    text-align: center;
+}
+
+/* ============================
+     Responsive Design
+  ============================= */
+@media (max-width: 900px) {
+    #pms-pcc-past-detail-container {
+        padding: 1.25rem 1.5%;
+        max-width: 99vw;
+    }
+
+    #pms-pcc-past-detail-section {
+        padding: 1.2rem 1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    #pms-pcc-past-detail-container {
+        padding: 0.7rem 1.5%;
+        border-radius: 10px;
+    }
+
+    #pms-pcc-past-form-field,
+    #pms-pcc-past-form-field-with-download {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5rem;
+    }
+
+    #pms-pcc-past-detail-section {
+        padding: 1rem 0.5rem;
+    }
+
+    #pms-pcc-past-detail-header {
+        height: 48px;
+        font-size: 1rem;
+        border-radius: 7px 7px 0 0;
+    }
+
+    #pms-pcc-past-detail-back-button,
+    #pms-pcc-past-detail-download-button {
+        font-size: 0.95rem;
+        padding: 0.4rem 0.8rem;
+        left: 0.5rem;
+        right: 0.5rem;
+    }
+
+    #pms-pcc-past-detail-title {
+        font-size: 1.1rem;
+    }
+
+    #pms-pcc-past-key-dates-grid {
+        grid-template-columns: 1fr;
+        gap: 0.7rem;
+    }
+}
+
+@media (max-width: 480px) {
+    #pms-pcc-past-detail-container {
+        padding: 0.4rem 0.2rem;
+        border-radius: 6px;
+    }
+
+    #pms-pcc-past-detail-section {
+        padding: 0.7rem 0.2rem;
+    }
+
+    #pms-pcc-past-detail-header {
+        height: 38px;
+        font-size: 0.95rem;
+    }
+
+    #pms-pcc-past-detail-title {
+        font-size: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/src/Modules/Patent/style/Pcc_Admin/ViewPastApplications.css b/src/Modules/Patent/style/Pcc_Admin/ViewPastApplications.css
new file mode 100644
index 000000000..fd63d150a
--- /dev/null
+++ b/src/Modules/Patent/style/Pcc_Admin/ViewPastApplications.css
@@ -0,0 +1,246 @@
+/* ============================
+   Detail Container
+============================= */
+#pms-pcc-past-detail-container {
+    max-width: 1300px;
+    margin: 0 auto;
+    background: #f6f8fa;
+    padding: 2.5rem 2.5%;
+    border-radius: 16px;
+    box-sizing: border-box;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+  }
+  
+  /* ============================
+     Header Bar
+  ============================= */
+  #pms-pcc-past-detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background: #f6f8fa;
+    height: 60px;
+    margin-bottom: 2rem;
+    border-bottom: 1.5px solid #e2e8f0;
+    border-radius: 8px 8px 0 0;
+  }
+  
+  #pms-pcc-past-detail-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 0;
+    text-align: center;
+    letter-spacing: 0.01em;
+  }
+  
+  #pms-pcc-past-detail-back-button,
+  #pms-pcc-past-detail-download-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #2563eb;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1.25rem;
+    transition: color 0.18s, background 0.18s;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 1rem;
+  }
+  #pms-pcc-past-detail-back-button { left: 1.25rem; }
+  #pms-pcc-past-detail-download-button { right: 1.25rem; }
+  #pms-pcc-past-detail-back-button:hover,
+  #pms-pcc-past-detail-download-button:hover {
+    color: #fff;
+    background: #2563eb;
+  }
+  
+  /* ============================
+     Section Cards
+  ============================= */
+  #pms-pcc-past-detail-section {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(30, 40, 90, 0.05);
+    margin-bottom: 2.2rem;
+    padding: 2rem 2.5rem;
+    border: 1px solid #e5e7eb;
+    width: 100%;
+  }
+  
+  #pms-pcc-past-section-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 1.3rem;
+    letter-spacing: 0.01em;
+  }
+  
+  /* ============================
+     Form Fields
+  ============================= */
+  #pms-pcc-past-form-field,
+  #pms-pcc-past-form-field-with-download {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.2rem;
+    margin-bottom: 1.1rem;
+  }
+  #pms-pcc-past-form-field-with-download {
+    justify-content: space-between;
+  }
+  #pms-pcc-past-field-label-container,
+  #pms-pcc-past-form-field > #pms-pcc-past-field-label {
+    flex: 0 0 auto;
+  }
+  #pms-pcc-past-field-label {
+    font-weight: 600;
+    color: #475569;
+    font-size: 1rem;
+    min-width: 120px;
+  }
+  #pms-pcc-past-field-value {
+    flex: 1 1 auto;
+    background: #fff;
+    padding: 0.6rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 5px;
+    color: #334155;
+    font-size: 1rem;
+    word-break: break-word;
+  }
+  #pms-pcc-past-download-button-wrapper {
+    flex-shrink: 0;
+    margin-left: 1rem;
+  }
+  
+  /* ============================
+     Key Dates Grid
+  ============================= */
+  #pms-pcc-past-key-dates-container {
+    margin-top: 0.8rem;
+  }
+  #pms-pcc-past-key-dates-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.2rem;
+  }
+  #pms-pcc-past-key-date-card {
+    background: #f9fafb;
+    border-radius: 8px;
+    padding: 1.1rem 1rem;
+    text-align: center;
+    box-shadow: 0 1px 6px rgba(30, 40, 90, 0.03);
+    border: 1px solid #e5e7eb;
+    transition: transform 0.18s, box-shadow 0.18s;
+  }
+  #pms-pcc-past-key-date-card:hover {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 4px 18px rgba(30, 40, 90, 0.09);
+  }
+  #pms-pcc-past-key-date-title {
+    font-size: 1.05rem;
+    font-weight: 500;
+    color: #475569;
+    margin-bottom: 0.4rem;
+  }
+  #pms-pcc-past-key-date-value {
+    font-size: 1.08rem;
+    font-weight: 600;
+    color: #2563eb;
+  }
+  
+  /* ============================
+     Applicants Cards
+  ============================= */
+  #pms-pcc-past-applicant-card {
+    background: #f9fafb;
+    border-radius: 8px;
+    box-shadow: 0 1px 7px rgba(30, 40, 90, 0.04);
+    padding: 1.2rem 1rem;
+    margin-bottom: 1.2rem;
+    border: 1px solid #e5e7eb;
+  }
+  
+  /* ============================
+     Loader & Alerts
+  ============================= */
+  #pms-pcc-past-loader-container,
+  #pms-pcc-past-error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3.5rem 0;
+    text-align: center;
+  }
+  
+  /* ============================
+     Responsive Design
+  ============================= */
+  @media (max-width: 900px) {
+    #pms-pcc-past-detail-container {
+      padding: 1.25rem 1.5%;
+      max-width: 99vw;
+    }
+    #pms-pcc-past-detail-section {
+      padding: 1.2rem 1rem;
+    }
+  }
+  @media (max-width: 768px) {
+    #pms-pcc-past-detail-container {
+      padding: 0.7rem 1.5%;
+      border-radius: 10px;
+    }
+    #pms-pcc-past-form-field,
+    #pms-pcc-past-form-field-with-download {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.5rem;
+    }
+    #pms-pcc-past-detail-section {
+      padding: 1rem 0.5rem;
+    }
+    #pms-pcc-past-detail-header {
+      height: 48px;
+      font-size: 1rem;
+      border-radius: 7px 7px 0 0;
+    }
+    #pms-pcc-past-detail-back-button,
+    #pms-pcc-past-detail-download-button {
+      font-size: 0.95rem;
+      padding: 0.4rem 0.8rem;
+      left: 0.5rem;
+      right: 0.5rem;
+    }
+    #pms-pcc-past-detail-title {
+      font-size: 1.1rem;
+    }
+    #pms-pcc-past-key-dates-grid {
+      grid-template-columns: 1fr;
+      gap: 0.7rem;
+    }
+  }
+  @media (max-width: 480px) {
+    #pms-pcc-past-detail-container {
+      padding: 0.4rem 0.2rem;
+      border-radius: 6px;
+    }
+    #pms-pcc-past-detail-section {
+      padding: 0.7rem 0.2rem;
+    }
+    #pms-pcc-past-detail-header {
+      height: 38px;
+      font-size: 0.95rem;
+    }
+    #pms-pcc-past-detail-title {
+      font-size: 1rem;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/Modules/Patent/utils/statusColors.js b/src/Modules/Patent/utils/statusColors.js
new file mode 100644
index 000000000..9d914fc98
--- /dev/null
+++ b/src/Modules/Patent/utils/statusColors.js
@@ -0,0 +1,32 @@
+export const getStatusColor = (status) => {
+  switch (status) {
+    case "Submitted":
+    case "Resubmitted":
+      return "blue";
+    case "Director's Approval Received":
+    case "Patent Filed":
+    case "Patent Granted":
+    case "Approved":
+    case "Appeal Approved":
+      return "green";
+    case "Forwarded for Director's Review":
+    case "Forwarded to Director":
+    case "Patentability Search Report Generated":
+    case "Under Review":
+      return "orange";
+    case "Draft":
+      return "yellow";
+    case "Rejected":
+    case "Patent Refused":
+    case "Appeal Rejected":
+      return "red";
+    case "Needs Revision":
+    case "Modification Requested":
+      return "pink";
+    case "Appeal":
+    case "Appeal Under Review":
+      return "violet";
+    default:
+      return "gray";
+  }
+};