diff --git a/peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx b/peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx
index ce0073abd2..67610b70ee 100644
--- a/peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx
+++ b/peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx
@@ -7,7 +7,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -15,11 +15,13 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 interface TopicsPopoverProps {
   selectedTopics: string[];
   onChange: (value: string[]) => void;
+  isAdmin?: boolean;
 }
 
 export function TopicsPopover({
   selectedTopics,
   onChange,
+  isAdmin,
 }: TopicsPopoverProps) {
   const [open, setOpen] = useState(false);
   const [topics, setTopics] = useState<string[]>([]);
@@ -58,7 +60,7 @@ export function TopicsPopover({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[200px] p-0">
-        <div className="p-2">
+        <div className="flex gap-1 p-2">
           <Input
             placeholder="Search topics..."
             value={searchTerm}
@@ -68,8 +70,23 @@ export function TopicsPopover({
             }}
             className="mb-2"
           />
+          {isAdmin && (
+            <Button
+              onClick={async () => {
+                if (!searchTerm.trim()) {
+                  return;
+                }
+                setTopics((prev) => [...prev, searchTerm]);
+                setSearchTerm('');
+              }}
+              className="p-2"
+              variant="outline"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          )}
         </div>
-        <ScrollArea className="h-[300px]">
+        <ScrollArea className="h-[300px] overflow-y-auto">
           {filteredTopics.length === 0 ? (
             <p className="p-2 text-sm text-muted-foreground">No topic found.</p>
           ) : (
diff --git a/peerprep-fe/src/app/admin/page.tsx b/peerprep-fe/src/app/admin/page.tsx
index 09d0ddd45f..95d286c606 100644
--- a/peerprep-fe/src/app/admin/page.tsx
+++ b/peerprep-fe/src/app/admin/page.tsx
@@ -23,6 +23,18 @@ function AdminPage() {
     refetchFilter,
   } = useFilteredProblems();
 
+  const validateEntries = (problem: Problem) => {
+    if (
+      problem.description === '' ||
+      problem.title === '' ||
+      problem.tags.length === 0
+    ) {
+      setInformationDialog('Please fill in all required fields');
+      return false;
+    }
+    return true;
+  };
+
   const handleDelete = async (id: number) => {
     const res = await axiosClient.delete(`/questions/${id}`);
     if (res.status !== 200) {
@@ -34,6 +46,9 @@ function AdminPage() {
 
   const handleEdit = async (problem: Problem) => {
     try {
+      if (!validateEntries(problem)) {
+        throw new Error('Invalid problem entries');
+      }
       const res = await axiosClient.put(`/questions/${problem._id}`, {
         difficulty: problem.difficulty,
         description: problem.description,
@@ -68,16 +83,10 @@ function AdminPage() {
   };
 
   const handleAdd = async (problem: Problem) => {
-    // TODO: Add proper validation of fields
-    if (
-      problem.description === '' ||
-      problem.title === '' ||
-      problem.tags.length === 0
-    ) {
-      setInformationDialog('Please fill in all required fields');
-      return;
-    }
     try {
+      if (!validateEntries(problem)) {
+        throw new Error('Invalid problem entries');
+      }
       const res = await axiosClient.post(`/questions`, {
         difficulty: problem.difficulty,
         description: problem.description,
diff --git a/peerprep-fe/src/components/dialogs/ActionDialog.tsx b/peerprep-fe/src/components/dialogs/ActionDialog.tsx
index b92dcc8996..663ca60e56 100644
--- a/peerprep-fe/src/components/dialogs/ActionDialog.tsx
+++ b/peerprep-fe/src/components/dialogs/ActionDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -16,6 +16,7 @@ type Props = {
   description: string;
   callback?: () => void;
   callbackTitle?: string;
+  children?: ReactElement;
 };
 
 const ActionDialog = ({
@@ -26,18 +27,23 @@ const ActionDialog = ({
   description,
   callback,
   callbackTitle,
+  children,
 }: Props) => {
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="bg-black">
+      <DialogContent className="max-h-[80%] overflow-auto bg-black">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{subtitle}</DialogDescription>
         </DialogHeader>
-        <div className="mt-4">
-          <h3 className="mb-2 text-lg font-semibold">Description:</h3>
-          <p>{description}</p>
-        </div>
+        {children ? (
+          children
+        ) : (
+          <div className="mt-4">
+            <h3 className="mb-2 text-lg font-semibold">Description:</h3>
+            <p>{description}</p>
+          </div>
+        )}
         <div className="mt-6 flex justify-end">
           <Button variant="secondary" onClick={callback}>
             {callbackTitle}
diff --git a/peerprep-fe/src/components/problems/ProblemDescriptionPanel.tsx b/peerprep-fe/src/components/problems/ProblemDescriptionPanel.tsx
index 6142e75fc8..7e52199bc9 100644
--- a/peerprep-fe/src/components/problems/ProblemDescriptionPanel.tsx
+++ b/peerprep-fe/src/components/problems/ProblemDescriptionPanel.tsx
@@ -5,21 +5,29 @@ import { Button } from '../ui/button';
 type Props = {
   problem: Problem;
   resetQuestion: () => void; // replace with something more generic
+  hasHeader?: boolean;
 };
 
-const ProblemDescriptionPanel = ({ problem, resetQuestion }: Props) => {
+const ProblemDescriptionPanel = ({
+  problem,
+  resetQuestion,
+  hasHeader = true,
+}: Props) => {
   return (
     <>
-      <div className="flex justify-between">
-        <h2 className="mb-4 text-2xl font-bold">{problem.title}</h2>
-        <Button
-          variant="outline"
-          className="border-gray-700 bg-gray-800"
-          onClick={() => resetQuestion()}
-        >
-          Reset
-        </Button>
-      </div>
+      {hasHeader && (
+        <div className="flex justify-between">
+          <h2 className="mb-4 text-2xl font-bold">{problem.title}</h2>
+          <Button
+            variant="outline"
+            className="border-gray-700 bg-gray-800"
+            onClick={() => resetQuestion()}
+          >
+            Reset
+          </Button>
+        </div>
+      )}
+
       <p className="mb-4">{problem.description}</p>
       {problem.examples.map((example, index) => (
         <React.Fragment key={index}>
diff --git a/peerprep-fe/src/components/problems/ProblemInputDialog.tsx b/peerprep-fe/src/components/problems/ProblemInputDialog.tsx
index 293111b997..89fee37aea 100644
--- a/peerprep-fe/src/components/problems/ProblemInputDialog.tsx
+++ b/peerprep-fe/src/components/problems/ProblemInputDialog.tsx
@@ -90,6 +90,7 @@ function ProblemInputDialog({
               onChange={(value) => {
                 setProblemData({ ...problemData, tags: value });
               }}
+              isAdmin
             />
           </div>
           <div className="mt-2 flex justify-end">
diff --git a/peerprep-fe/src/components/problems/ProblemRow.tsx b/peerprep-fe/src/components/problems/ProblemRow.tsx
index 2490172e17..9a602f7a41 100644
--- a/peerprep-fe/src/components/problems/ProblemRow.tsx
+++ b/peerprep-fe/src/components/problems/ProblemRow.tsx
@@ -10,6 +10,7 @@ import InformationDialog from '../dialogs/InformationDialog';
 import ActionDialog from '../dialogs/ActionDialog';
 import { useRouter } from 'next/navigation';
 import { axiosClient } from '@/network/axiosClient';
+import ProblemDescriptionPanel from './ProblemDescriptionPanel';
 
 function ProblemStatus({ status }: { status: string }) {
   if (status === 'solved') {
@@ -156,7 +157,14 @@ export default function ProblemRow({
         description={problem.description}
         callback={handleMatch}
         callbackTitle="Match"
-      />
+      >
+        <ProblemDescriptionPanel
+          problem={problem}
+          resetQuestion={() => {}}
+          hasHeader={false}
+        />
+      </ActionDialog>
+
       {/* Dialog for deleting question */}
       <ActionDialog
         isOpen={isDeleteDialogOpen}