diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 6e4eb82..f8de101 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -83,5 +83,5 @@ export function Footer() {
         </div>
       </Container>
     </footer>
-  );
+  )
 }
diff --git a/src/components/moderation/ViewReport.jsx b/src/components/moderation/ViewReport.jsx
new file mode 100644
index 0000000..ab10eb0
--- /dev/null
+++ b/src/components/moderation/ViewReport.jsx
@@ -0,0 +1,132 @@
+import { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+
+export default function ViewReport({ open, setOpen, report }) {
+  // Parse metadata if it exists and is a string
+  const metadata = report?.metadata ? 
+    (typeof report.metadata === 'string' ? JSON.parse(report.metadata) : report.metadata) 
+    : {};
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-neutral-900 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl sm:p-6">
+                <div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <Dialog.Title as="h3" className="text-2xl font-semibold leading-6 text-white">
+                      Report Details
+                    </Dialog.Title>
+                    <div className="mt-4 text-left">
+                      <div className="space-y-4 text-white">
+                        <div>
+                          <h4 className="font-semibold">Type:</h4>
+                          <p>{report?.type}</p>
+                        </div>
+
+                        {metadata.reportedUserId && (
+                          <div>
+                            <h4 className="font-semibold">Reported User ID:</h4>
+                       
+                              <a 
+                                href={`/users/${metadata.reportedUserId}`} 
+                                className="text-blue-400 hover:text-blue-300"
+                                target="#blank"
+                              >
+                                {metadata.reportedUserId}
+                              </a>
+                       
+                          </div>
+                        )}
+
+                        {metadata.challengeId && (
+                          <div>
+                            <h4 className="font-semibold">Challenge ID:</h4>
+                            <p>{metadata.challengeId}</p>
+                          </div>
+                        )}
+
+                        {metadata.url && (
+                          <div>
+                            <h4 className="font-semibold">URL:</h4>
+                            <p>{metadata.url}</p>
+                          </div>
+                        )}
+
+                        {metadata.severity && (
+                          <div>
+                            <h4 className="font-semibold">Severity:</h4>
+                            <p>
+                              <span className={`inline-flex items-center rounded-md px-2 py-1 text-sm font-medium ${
+                                metadata.severity.toLowerCase() === 'critical' ? 'bg-red-500/15 text-red-700 dark:text-red-400' :
+                                metadata.severity.toLowerCase() === 'high' ? 'bg-orange-500/15 text-orange-700 dark:text-orange-400' :
+                                metadata.severity.toLowerCase() === 'medium' ? 'bg-yellow-500/15 text-yellow-700 dark:text-yellow-400' :
+                                'bg-blue-500/15 text-blue-700 dark:text-blue-400' // For low severity
+                              }`}>
+                                {metadata.severity}
+                              </span>
+                            </p>
+                          </div>
+                        )}
+
+                        {metadata.featureType && (
+                          <div>
+                            <h4 className="font-semibold">Feature Type:</h4>
+                            <p>{metadata.featureType}</p>
+                          </div>
+                        )}
+
+                        <div>
+                          <h4 className="font-semibold">Description:</h4>
+                          <p className="whitespace-pre-wrap">
+                            {report?.desc}
+                          </p>
+                        </div>
+
+                        <div>
+                          <h4 className="font-semibold">Submitted:</h4>
+                          <p>{report?.createdAt && new Date(report.createdAt).toLocaleString()}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-6">
+                  <button
+                    type="button"
+                    className="inline-flex w-full justify-center rounded-md bg-neutral-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-neutral-700"
+                    onClick={() => setOpen(false)}
+                  >
+                    Close
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+} 
\ No newline at end of file
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 1e476d7..cc9bae2 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -46,7 +46,7 @@ export default function App({ Component, pageProps }) {
 
   return <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID} scope="email profile openid">
     <Context.Provider value={appState}>
-      <Component {...pageProps} />;
+      <Component {...pageProps} />
       <Analytics />
 
     </Context.Provider>
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index 506c49d..c6746ec 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -57,7 +57,7 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    );
+    )
   }
 }
 
diff --git a/src/pages/challenges/[...id].jsx b/src/pages/challenges/[...id].jsx
index f7df743..8488c1b 100644
--- a/src/pages/challenges/[...id].jsx
+++ b/src/pages/challenges/[...id].jsx
@@ -623,7 +623,7 @@ function TabLink({ tabName, selected, url, className }) {
     'Hints': 'fas fa-question text-red-500',
     'Description': 'fas fa-info-circle text-blue-500',
     'AI': 'fas fa-robot text-orange-500',
-  }[tabName] || 'fas fa-file-alt text-blue-500';
+  }[tabName] || 'fas fa-file-alt text-blue-500'
 
   return (
     <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}>
@@ -1069,7 +1069,7 @@ function WriteUpPage({ cache, setCache, onWriteupSelect }) {
                 </h3>
                
                 </div>
-                <p className="text-sm text-blue-500 font-semibold" onClick={() => window.location.href = `../../users/${writeup.user.username}`}>@{writeup.user.username}</p>
+                <p className="text-sm text-blue-500 font-semibold">@{writeup.user.username}</p>
 
               </div>
               <div className="ml-auto mt-2">
@@ -1274,42 +1274,46 @@ function LeaderboardPage({ cache, setCache }) {
       </div>
 
       {leaderboard.length > 0 ? (
-        leaderboard.slice(0, 10).map((entry, index) => {
-          let color;
-          switch (index) {
-            case 0:
-              color = "from-yellow-700 to-yellow-800"; // gold
-              break;
-            case 1:
-              color = "from-gray-700 to-gray-800"; // silver
-              break;
-            case 2:
-              color = "from-orange-800 to-orange-900"; // bronze
-              break;
-            default:
-              color = "bg-neutral-700"; // default color for others
-          }
-          return (
-            <div className="px-3" key={index}>
-              <div className={`flex justify-between items-center py-2 px-2 bg-gradient-to-r ${color} rounded-lg my-2`}>
-                <div className="flex items-center justify-between align-middle">
-                  <img
-                    src={entry.user.profileImage || `https://robohash.org/${entry.user.username}.png?set=set1&size=150x150`}
-                    className="w-8 h-8 mr-2 rounded-full"
-                    alt={`${entry.user.username}'s profile`}
-                  />
-                  <span className="text-2xl font-bold">{index + 1}.</span>
-                  <span className="ml-2 text-xl font-semibold text-white">
-                    <Link href={`/users/${entry.user.username}`}>
-                      {entry.user.username}
-                    </Link>
-                  </span>
+        <div className="px-1 overflow-y-auto max-h-[calc(100vh-40px)] relative">
+          {leaderboard.slice(0, 10).map((entry, index) => {
+            let color;
+            switch (index) {
+              case 0:
+                color = "from-yellow-700 to-yellow-800"; // gold
+                break;
+              case 1:
+                color = "from-gray-700 to-gray-800"; // silver
+                break;
+              case 2:
+                color = "from-orange-800 to-orange-900"; // bronze
+                break;
+              default:
+                color = "bg-neutral-700"; // default color for others
+            }
+            return (
+              <div className="px-3" key={index}>
+                <div className={`flex justify-between items-center py-2 px-2 bg-gradient-to-r ${color} rounded-lg my-2`}>
+                  <div className="flex items-center justify-between align-middle">
+                    <img
+                      src={entry.user.profileImage || `https://robohash.org/${entry.user.username}.png?set=set1&size=150x150`}
+                      className="w-8 h-8 mr-2 rounded-full"
+                      alt={`${entry.user.username}'s profile`}
+                    />
+                    <span className="text-2xl font-bold">{index + 1}.</span>
+                    <span className="ml-2 text-xl font-semibold text-white">
+                      <Link href={`/users/${entry.user.username}`}>
+                        {entry.user.username}
+                      </Link>
+                    </span>
+                  </div>
+                  <div className="text-xl font-semibold">{entry.points} points</div>
                 </div>
-                <div className="text-xl font-semibold">{entry.points} points</div>
               </div>
-            </div>
-          )
-        })
+            )
+          })}
+          {/* Add fade-out overlay that stays anchored */}
+          <div className="sticky bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-neutral-800 to-transparent pointer-events-none"></div>
+        </div>
       ) : (
         <div className="px-3">
           <div className="flex justify-center items-center py-2 px-2 bg-neutral-900 rounded-lg my-2">
diff --git a/src/pages/moderation.jsx b/src/pages/moderation.jsx
index 6e7a1e9..31fa1b8 100644
--- a/src/pages/moderation.jsx
+++ b/src/pages/moderation.jsx
@@ -13,6 +13,7 @@ import request from '@/utils/request';
 import { MyTable } from '@/components/Table';
 import { TableHead, TableRow, TableHeader, TableCell, TableBody, Table } from "@/components/ui/table"
 import ViewChallenge from '@/components/moderation/ViewChallenge';
+import ViewReport from '@/components/moderation/ViewReport';
 
 export default function Competitions() {
   const [selectedChallenges, setSelectedChallenges] = useState([]);
@@ -25,6 +26,8 @@ export default function Competitions() {
   
   
   const [bonusPoints, setBonusPoints] = useState(0);
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [reportIsOpen, setReportIsOpen] = useState(false);
 
   
   // get reports
@@ -323,7 +326,7 @@ export default function Competitions() {
   return (
     <>
       <Head>
-        <title>Leaderboards - CTFGuide</title>
+        <title>CTFGuide Moderation Panel</title>
         <meta name="description" content="Practice Problems" />
         <style>
           @import url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
@@ -423,9 +426,33 @@ export default function Competitions() {
               <div className='mt-2'>
                 {reports.length > 0 ? (
                   reports.map((report) => (
-                    <div key={report.id} className='bg-neutral-800 w-full mb-2 border focus:bg-blue-900 focus:border-blue-500 border-neutral-700 hover:bg-neutral-700/50 cursor-pointer px-2 py-1 flex items-center text-sm'>
+                    <div 
+                      key={report.id} 
+                      className={`w-full mb-2 border focus:bg-blue-900 focus:border-blue-500 border-neutral-700 hover:bg-neutral-700/50 cursor-pointer px-2 py-1 flex items-center text-sm ${
+                        JSON.parse(report.metadata).severity === 'HIGH' ? 'bg-red-900/20' :
+                        JSON.parse(report.metadata).severity === 'MEDIUM' ? 'bg-yellow-900/20' :
+                        JSON.parse(report.metadata).severity === 'LOW' ? 'bg-blue-900/20' :
+                        'bg-neutral-800'
+                      }`}
+                      onClick={() => {
+                        setSelectedReport(report);
+                        setReportIsOpen(true);
+                      }}
+                    >
                       <div className='flex-grow'>
-                        <h1 className='text-sm text-left ml-4'>{report.type} REPORT</h1>
+                        <h1 className='text-sm text-left ml-4'>
+                          {report.type} REPORT
+                          {report.metadata?.severity && (
+                            <span className={`ml-2 px-2 py-0.5 rounded text-xs ${
+                              report.metadata.severity === 'HIGH' ? 'bg-red-600 text-white' :
+                              report.metadata.severity === 'MEDIUM' ? 'bg-yellow-600 text-white' :
+                              report.metadata.severity === 'LOW' ? 'bg-blue-600 text-white' :
+                              'bg-neutral-600 text-white'
+                            }`}>
+                              {report.metadata.severity}
+                            </span>
+                          )}
+                        </h1>
                       </div>  
                       <div className='ml-auto text-right'>
                         <p className='text-sm'>Reported by <span className='font-bold'>{report.userId}</span></p>
@@ -487,6 +514,7 @@ export default function Competitions() {
         </main>
         <div className='flex w-full h-full grow basis-0'></div>
         <ViewChallenge open={challengeIsOpen} setOpen={setChallengeIsOpen} selected={selectedId} />
+        <ViewReport open={reportIsOpen} setOpen={setReportIsOpen} report={selectedReport}  />
         <Footer />
       </div>
     </>