diff --git a/public/add_topic.html b/public/add_topic.html
new file mode 100644
index 0000000..0f0c4ae
--- /dev/null
+++ b/public/add_topic.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Submit Research Topic</title>
+    <link rel="stylesheet" href="css/add_topic.css">
+</head>
+
+<body>
+    <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
+    <script>
+        window.gtranslateSettings = {
+            default_language: "en",
+            detect_browser_language: true,
+            wrapper_selector: ".gtranslate_wrapper",
+            font_size: 100,
+        };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+
+    <div id="notification" class="notification hidden">New topic submitted successfully!</div>
+
+    <div class="form-container">
+        <h2>Submit Research Topic</h2>
+        <form id="researchForm">
+            <label for="department">Department <span class="required">*</span></label>
+            <select id="department" name="department" required>
+                <option value="">Select Department</option>
+                <option value="Artificial Intelligence and Machine Learning">Artificial Intelligence and Machine
+                    Learning</option>
+                <option value="Quantum Computing">Quantum Computing</option>
+                <option value="Blockchain Technology">Blockchain Technology</option>
+                <option value="Cybersecurity and Privacy">Cybersecurity and Privacy</option>
+                <option value="Renewable Energy Systems">Renewable Energy Systems</option>
+                <option value="Bioinformatics and Computational Biology">Bioinformatics and Computational Biology
+                </option>
+                <option value="Internet of Things (IoT)">Internet of Things (IoT)</option>
+                <option value="5G and Wireless Technologies">5G and Wireless Technologies</option>
+                <option value="Human-Computer Interaction">Human-Computer Interaction</option>
+                <option value="Data Science and Big Data Analytics">Data Science and Big Data Analytics</option>
+            </select>
+
+            <label for="topic">Topic <span class="required">*</span></label>
+            <input type="text" id="topic" name="topic" required>
+
+            <label for="discussion">Discussion <span class="required">*</span></label>
+            <textarea id="discussion" name="discussion" rows="4" required></textarea>
+
+            <button type="submit" class="submit-btn">Submit</button>
+        </form>
+    </div>
+
+    <script src="script/add_topic.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/css/add_topic.css b/public/css/add_topic.css
new file mode 100644
index 0000000..542be8d
--- /dev/null
+++ b/public/css/add_topic.css
@@ -0,0 +1,106 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #f9f9f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.form-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  max-width: 500px;
+}
+
+h2 {
+  text-align: center;
+  color: #333;
+}
+
+label {
+  font-weight: bold;
+  margin-top: 10px;
+  display: block;
+  color: #444;
+}
+
+.required {
+  color: #e74c3c;
+}
+
+input,
+textarea {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 10px;
+  background-color: #0598dc;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.submit-btn:hover {
+  background-color: #006ca2;
+}
+
+.notification {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 20px;
+  background-color: #28a745;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 16px;
+  text-align: center;
+  display: flex;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.notification.hidden {
+  display: none;
+}
+
+/* Design specifically for the Department dropdown */
+select {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  margin-bottom: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  background-color: #fafafa;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px top 50%;
+  cursor: pointer;
+}
+
+select:focus {
+  outline: none;
+  border-color: #007bff;
+}
diff --git a/public/main_page.html b/public/main_page.html
index 9b0bf9e..1332958 100644
--- a/public/main_page.html
+++ b/public/main_page.html
@@ -94,7 +94,7 @@ <h2 style="padding: 10px;font-size: 44px;color: rgb(202, 60, 60);">Explore Resea
                 </form>
                 <ul>
                     <li><a href="/">Home</a></li>
-                    <li><a href="#">Add Topic</a></li>
+                    <li><a href="/add_topic.html">Add Topic</a></li>
                     <li onmouseover="show()" onmouseout="hide()"><a href="#" title="View Notifications"><i
                                 id="firsticon" class="fa-sharp fa-regular fa-bell"
                                 style="padding: 0px 8px;display: inline-block;"></i><i id="secondicon"
diff --git a/public/script/add_topic.js b/public/script/add_topic.js
new file mode 100644
index 0000000..5a2e613
--- /dev/null
+++ b/public/script/add_topic.js
@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("researchForm");
+  const notification = document.getElementById("notification");
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    // Check if all fields are filled
+    if (form.checkValidity()) {
+      // Show notification
+      notification.classList.remove("hidden");
+      setTimeout(() => {
+        notification.classList.add("hidden");
+      }, 5000);
+
+      // Reset the form
+      form.reset();
+    } else {
+      // If fields are missing, use HTML5 required validation
+      form.reportValidity();
+    }
+  });
+});
