diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..26d3352
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/Good_First_Issue_Web_App.iml b/.idea/Good_First_Issue_Web_App.iml
new file mode 100644
index 0000000..d0876a7
--- /dev/null
+++ b/.idea/Good_First_Issue_Web_App.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..4dfb542
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,21 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="sentencepiece" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyUnresolvedReferencesInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredIdentifiers">
+        <list>
+          <option value="main.*" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
new file mode 100644
index 0000000..105ce2d
--- /dev/null
+++ b/.idea/inspectionProfiles/profiles_settings.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..1d3ce46
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.13" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13" project-jdk-type="Python SDK" />
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..b29f58e
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Good_First_Issue_Web_App.iml" filepath="$PROJECT_DIR$/.idea/Good_First_Issue_Web_App.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..f03a665
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/Good_First_Issue_Web_App" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Good_First_Issue_Web_App b/Good_First_Issue_Web_App
new file mode 160000
index 0000000..7e25890
--- /dev/null
+++ b/Good_First_Issue_Web_App
@@ -0,0 +1 @@
+Subproject commit 7e25890e80c511450ba39769acbff21be4a33293
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74b5e05..8ca269b 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -12,6 +12,34 @@
     animation: App-logo-spin infinite 20s linear;
   }
 }
+/* Light Mode (default) */
+body {
+  background-color: #ffffff;
+  color: #000000;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+/* Toggle Button */
+.dark-toggle-btn {
+  background: transparent;
+  color: inherit;
+  border: 1px solid #888;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-left: 15px;
+}
+
+.dark-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 
 .App-header {
   background-color: #282c34;
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4f2ede4..0e476ea 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,6 +1,10 @@
 import "./App.css";
 import {Hero, About, Repositories, Form, Layout} from './pages'
 import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
+import IncidentResponse from "./pages/IncidentResponse";
+
+// inside <Routes> or equivalent
+<Route path="/incident-response" element={<IncidentResponse />} />
 
 const router = createBrowserRouter(
   createRoutesFromElements(
diff --git a/frontend/src/pages/Layout.js b/frontend/src/pages/Layout.js
index 963149b..ad0ac00 100644
--- a/frontend/src/pages/Layout.js
+++ b/frontend/src/pages/Layout.js
@@ -5,6 +5,53 @@ import {Outlet} from 'react-router-dom'
 function Layout() {
   return (
     <>
+    import React, { useState, useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import "./Layout.css";
+
+export default function Layout() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  // Load theme from localStorage on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme === "dark") {
+      setDarkMode(true);
+      document.body.classList.add("dark-mode");
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    if (darkMode) {
+      document.body.classList.remove("dark-mode");
+      localStorage.setItem("theme", "light");
+      setDarkMode(false);
+    } else {
+      document.body.classList.add("dark-mode");
+      localStorage.setItem("theme", "dark");
+      setDarkMode(true);
+    }
+  };
+
+  return (
+    <div>
+      <header>
+        <h1>Good First Issue Web App</h1>
+        <nav>
+          {/* Dark Mode Toggle Button */}
+          <button onClick={toggleTheme} className="dark-toggle-btn">
+            {darkMode ? "☀️ Light Mode" : "🌙 Dark Mode"}
+          </button>
+        </nav>
+      </header>
+
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
       <Navbar />
       <Outlet />
       <Footer />
diff --git a/frontend/src/pages/Navbar.js b/frontend/src/pages/Navbar.js
index aa535c8..051a94e 100644
--- a/frontend/src/pages/Navbar.js
+++ b/frontend/src/pages/Navbar.js
@@ -27,6 +27,8 @@ function Navbar() {
             <NavLink to='/form'>Form</NavLink>
           </li>
         </ul>
+        <a href="/incident-response">Incident Response Plan</a>
+
       </div>
       <div className="social-links">
         <ul>
diff --git a/frontend/src/pages/incident-response.html b/frontend/src/pages/incident-response.html
new file mode 100644
index 0000000..30d367f
--- /dev/null
+++ b/frontend/src/pages/incident-response.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Incident Response Plan</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <nav class="navbar">
+        <a href="index.html">Home</a>
+        <a href="incident-response.html">Incident Response Plan</a>
+    </nav>
+
+    <main class="container">
+        <h1>Incident Response Plan</h1>
+        <p>Creating an incident response plan is crucial for organizations for several reasons:</p>
+        <ul>
+            <li><strong>Minimize Impact and Damage:</strong> React quickly and effectively to security incidents.</li>
+            <li><strong>Clear Roles and Responsibilities:</strong> Everyone knows their role during a crisis.</li>
+            <li><strong>Enhance Communication:</strong> Ensure accurate and consistent information is shared.</li>
+            <li><strong>Compliance:</strong> Meet regulatory and legal requirements.</li>
+            <li><strong>Reputation:</strong> Preserve trust with customers and stakeholders.</li>
+            <li><strong>Cost Savings:</strong> Prevent unnecessary expenses due to poor response.</li>
+            <li><strong>Continuous Improvement:</strong> Learn and adapt after incidents.</li>
+        </ul>
+    </main>
+</body>
+</html>
diff --git a/frontend/src/pages/incidentResponse.js b/frontend/src/pages/incidentResponse.js
new file mode 100644
index 0000000..a83f671
--- /dev/null
+++ b/frontend/src/pages/incidentResponse.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+const IncidentResponse = () => {
+  return (
+    <div style={{ padding: "20px", fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
+      <h1 style={{ color: "#2c3e50" }}>Incident Response Plan</h1>
+      <p>Creating an incident response plan is crucial for organizations for several reasons:</p>
+      <ul>
+        <li><strong>Minimize Impact and Damage:</strong> React quickly and effectively to limit damage and shorten recovery time.</li>
+        <li><strong>Clear Roles and Responsibilities:</strong> Defines responsibilities for the response team, avoiding confusion.</li>
+        <li><strong>Enhance Communication:</strong> Provides internal and external communication protocols.</li>
+        <li><strong>Legal and Regulatory Compliance:</strong> Ensures compliance with laws and avoids fines.</li>
+        <li><strong>Preserve Organizational Reputation:</strong> A transparent and fast response builds trust.</li>
+        <li><strong>Reduction in Downtime:</strong> Predetermined steps reduce downtime and business impact.</li>
+        <li><strong>Cost Savings:</strong> Prevents unnecessary expenses from misinformation or chaos.</li>
+        <li><strong>Continuous Improvement:</strong> Post-incident reviews refine procedures.</li>
+        <li><strong>Stakeholder Assurance:</strong> Shows partners and customers the org is prepared.</li>
+        <li><strong>Enhanced Security Posture:</strong> Regular reviews help identify and fix gaps.</li>
+      </ul>
+      <p>
+        <em>
+          In essence, an incident response plan is like an insurance policy for cybersecurity incidents.
+          You hope never to use it, but when the need arises, you’ll be glad you have it.
+        </em>
+      </p>
+    </div>
+  );
+};
+
+export default IncidentResponse;