diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx
index 278160f3..e9293e37 100644
--- a/src/components/StandardNav.jsx
+++ b/src/components/StandardNav.jsx
@@ -413,7 +413,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                       className="tooltip mb-0 ml-4 flex cursor-pointer items-center space-x-2 rounded-lg px-4 py-1"
                       style={{ backgroundColor: '#212121', borderWidth: '0px' }}
                     >
-                      <h1 className="mx-auto mb-0 mt-0 text-center font-semibold text-blue-500">
+                      <h1 className="mx-auto mb-0 mt-0 text-center  text-blue-500">
                         <i className="far fa-check-circle"></i> {points}
                       </h1>
                     </div>
@@ -494,7 +494,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               <Link
                                 href={`/users/${username}`}
                                 className={classNames(
-                                  'flex w-full px-4 py-3 font-semibold text-neutral-50 hover:bg-neutral-700'
+                                  'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
                               >
                                 <UserCircleIcon
@@ -508,7 +508,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               <Link
                                 href="/settings"
                                 className={classNames(
-                                  'flex w-full px-4 py-3 font-semibold text-neutral-50 hover:bg-neutral-700'
+                                  'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
                               >
                                 <Cog6ToothIcon
@@ -521,7 +521,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                             <a
                               href="https://ctfguide.hellonext.co/b/feedback"
                               className={classNames(
-                                'hidden flex w-full px-4 py-3 font-semibold text-neutral-50 hover:bg-neutral-700'
+                                'hidden flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
                             >
                               <PencilSquareIcon
@@ -533,7 +533,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                             <Link
                               href="/report"
                               className={classNames(
-                                'hidden flex w-full px-4 py-3 font-semibold text-neutral-50 hover:bg-neutral-700'
+                                'hidden flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
                             >
                               <ShieldExclamationIcon
@@ -543,11 +543,24 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               Report
                             </Link>
 
+                            <Link
+                              href="/report"
+                              className={classNames(
+                                ' flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
+                              )}
+                            >
+                              <ShieldExclamationIcon
+                                className="mr-4 block h-6 w-6"
+                                aria-hidden="true"
+                              />
+                              Report an Issue
+                            </Link>
+
                             {role === 'ADMIN' && (
                               <Link
                                 href="/moderation"
                                 className={classNames(
-                                  'flex w-full px-4 py-3 font-semibold text-neutral-50 hover:bg-neutral-700'
+                                  'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
                               >
                                 <ShieldCheckIcon
@@ -561,7 +574,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                             <button
                               onClick={logout}
                               className={classNames(
-                                'flex w-full cursor-pointer px-4 py-3 font-semibold text-neutral-50 hover:bg-neutral-700'
+                                'flex w-full cursor-pointer px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
                             >
                               <ArrowRightIcon
@@ -654,7 +667,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                   <div className="px-4">
                     <div
                       type="text"
-                      className="flex w-full items-center rounded-lg border border-transparent bg-neutral-800 px-4 py-2 text-sm font-semibold text-neutral-500 placeholder-gray-300 hover:cursor-pointer hover:text-neutral-50 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="flex w-full items-center rounded-lg border border-transparent bg-neutral-800 px-4 py-2 text-sm  text-neutral-500 placeholder-gray-300 hover:cursor-pointer hover:text-neutral-50 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
                       onClick={() => setShowSearchModal(true)}
                     >
                       <FontAwesomeIcon
diff --git a/src/components/create/Card.jsx b/src/components/create/Card.jsx
index cd01e8a9..a7349c1e 100644
--- a/src/components/create/Card.jsx
+++ b/src/components/create/Card.jsx
@@ -4,7 +4,7 @@ export function Card({ challenge }) {
       <div className="flex items-center justify-between space-x-4">
         <div className="min-w-0 space-y-3">
           <div className="flex items-center space-x-3">
-            <h2 className="text-xl font-medium text-white">
+            <h2 className="text-xl  text-white">
               <a href="#">
                 <span className="absolute inset-0" aria-hidden="true"></span>
                 {challenge.title}
diff --git a/src/components/dashboard/Report.jsx b/src/components/dashboard/Report.jsx
index 86556dd6..8cc56572 100644
--- a/src/components/dashboard/Report.jsx
+++ b/src/components/dashboard/Report.jsx
@@ -1,119 +1,282 @@
 import { useState } from 'react';
 import Head from 'next/head';
-import { TextField } from '@/components/Fields';
 import { motion } from 'framer-motion';
 import request from '@/utils/request';
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 
 export default function ReportForm() {
-  const [text, setText] = useState('');
-  const [showPopup, setShowPopup] = useState(false);
-  const [showError, setErrorPopup] = useState(false);
+  const [formData, setFormData] = useState({
+    type: 'USER',
+    message: '',
+    userId: '',
+    challengeId: '',
+    url: '',
+    severity: 'LOW',
+    featureType: 'ENHANCEMENT'
+  });
+  const [status, setStatus] = useState({ show: false, isError: false, message: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const reportTypes = [
+    { 
+      id: 'USER', 
+      label: 'User Report',
+      description: 'Report a user for suspicious or inappropriate behavior',
+      fields: [
+        { name: 'userId', label: 'User ID or Username', type: 'text', required: true },
+        { name: 'message', label: 'What did this user do?', type: 'textarea', required: true }
+      ]
+    },
+    { 
+      id: 'CHALLENGE', 
+      label: 'Challenge Issue',
+      description: 'Report issues with challenges, including incorrect flags or broken environments',
+      fields: [
+        { name: 'challengeId', label: 'Challenge ID', type: 'text', required: true },
+        { name: 'message', label: 'What is wrong with this challenge?', type: 'textarea', required: true }
+      ]
+    },
+    { 
+      id: 'BUG', 
+      label: 'Bug Report',
+      description: 'Report technical issues or bugs on the platform',
+      fields: [
+        { name: 'url', label: 'Where did you find this bug?', type: 'text', required: true },
+        { name: 'severity', label: 'Severity', type: 'select', required: true,
+          options: [
+            { value: 'LOW', label: 'Low - Minor inconvenience' },
+            { value: 'MEDIUM', label: 'Medium - Affects functionality' },
+            { value: 'HIGH', label: 'High - Critical issue' }
+          ]
+        },
+        { name: 'message', label: 'Describe the bug and steps to reproduce', type: 'textarea', required: true }
+      ]
+    },
+    { 
+      id: 'FEATURE', 
+      label: 'Feature Request',
+      description: 'Suggest new features or improvements',
+      fields: [
+        { name: 'featureType', label: 'Type of Feature', type: 'select', required: true,
+          options: [
+            { value: 'ENHANCEMENT', label: 'Enhancement to existing feature' },
+            { value: 'NEW', label: 'New feature' },
+            { value: 'INTEGRATION', label: 'Third-party integration' }
+          ]
+        },
+        { name: 'message', label: 'Describe your feature request', type: 'textarea', required: true }
+      ]
+    }
+  ];
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setIsSubmitting(true);
 
-  function handleSubmit(event) {
     try {
-      event.preventDefault();
-      const url = `${process.env.NEXT_PUBLIC_API_URL}/report?type=USER`;
-      request(url, 'POST', { message: text, itemid: '' })
-        .then((data) => {
-          console.log('Report Sent', data);
-          if (data?.error) {
-            setErrorPopup(true);
-            setTimeout(() => setErrorPopup(false), 4000);
-          } else {
-            setShowPopup(true);
-            setTimeout(() => setShowPopup(false), 4000);
-          }
-        })
-        .catch((error) => {
-          setErrorPopup(true);
-          setTimeout(() => setErrorPopup(false), 4000);
-        });
-    } catch {}
-  }
+      const currentType = reportTypes.find(type => type.id === formData.type);
+      
+      const payload = Object.entries(formData).reduce((acc, [key, value]) => {
+        if (value && (
+          key === 'type' || 
+          key === 'message' || 
+          currentType.fields.some(field => field.name === key)
+        )) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
+      const url = `${process.env.NEXT_PUBLIC_API_URL}/report`;
+      const response = await request(url, 'POST', payload);
+
+      if (response?.error) throw new Error(response.error);
+
+      setStatus({
+        show: true,
+        isError: false,
+        message: 'Thank you! Your report has been submitted successfully.'
+      });
+      
+      setFormData(prev => ({ 
+        ...prev, 
+        message: '', 
+        userId: '', 
+        challengeId: '', 
+        url: '' 
+      }));
+    } catch (error) {
+      setStatus({
+        show: true,
+        isError: true,
+        message: 'Failed to submit report. Please try again later.'
+      });
+    } finally {
+      setIsSubmitting(false);
+      setTimeout(() => setStatus(prev => ({ ...prev, show: false })), 4000);
+    }
+  };
+
+  const currentReportType = reportTypes.find(type => type.id === formData.type);
 
   return (
-    <>
+    <div className="min-h-screen">
       <Head>
-        <title>Report a Bug</title>
-        <style>
-          @import
-          url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
-        </style>
+        <title>Report an Issue - CTFGuide</title>
       </Head>
-      <div className="flex min-h-full flex-col py-12 sm:px-6 lg:px-8">
-        <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-white">
-            Report a Bug
+
+      <div className="px-4 py-8 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h2 className="text-3xl font-bold tracking-tight text-white">
+            Submit a Report
           </h2>
+          <p className="mt-2 text-sm text-gray-400">
+            Help us improve by reporting issues, bugs, or suspicious activity
+          </p>
         </div>
-        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div
-            style={{ backgroundColor: '#212121' }}
-            className="py-8 px-4 shadow sm:rounded-lg sm:px-10"
-          >
-            <form onSubmit={handleSubmit} className="space-y-2">
-              <label
-                for="difficulty"
-                className="block text-sm font-medium leading-5 text-gray-200"
-              >
-                Message
-              </label>
-              <div>
-                <TextField
-                  id="text"
-                  type="text"
-                  required
-                  value={text}
-                  onChange={(event) => setText(event.target.value)}
-                  className="mb-6"
-                />
-              </div>
-              <label
-                for="difficulty"
-                className="block text-sm font-medium leading-5 text-gray-200"
-              >
-                Report Type
-              </label>
-              <select
-                style={{ backgroundColor: '#363636' }}
-                id="type"
-                className="block w-full rounded border-none pr-40 pl-3 pr-10 text-base leading-6 text-white focus:outline-none sm:text-sm sm:leading-5"
-              >
-                <option disabled="">General</option>
-                <option>User</option>
-                <option>Challenge</option>
-                <option>Bug</option>
-              </select>
-              <div>
-                <button
-                  type="submit"
-                  className="mt-8 flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-                >
-                  Submit Report
-                </button>
-              </div>
-            </form>
+
+        {/* Main Form */}
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+          {/* Left Column - Report Type Selection */}
+          <div className="bg-[#212121] p-6 rounded-lg">
+            <h3 className="text-lg font-medium text-white mb-4">Report Type</h3>
+            <select
+              value={formData.type}
+              onChange={(e) => setFormData({ 
+                ...formData, 
+                type: e.target.value,
+                message: '',
+                userId: '',
+                challengeId: '',
+                url: '',
+                severity: 'LOW',
+                featureType: 'ENHANCEMENT'
+              })}
+              className="w-full rounded bg-[#2a2a2a] border-none px-3 py-2 text-white focus:ring-2 focus:ring-blue-500"
+            >
+              {reportTypes.map(type => (
+                <option key={type.id} value={type.id}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+
+            {/* Type Description */}
+            <div className="mt-4 p-4 bg-[#2a2a2a] rounded-lg">
+              <p className="text-sm text-gray-400 mb-4">
+                {currentReportType.description}
+              </p>
+              <h4 className="text-sm font-medium text-gray-200 mb-2">
+                What to include:
+              </h4>
+              <ul className="text-sm text-gray-400 list-disc list-inside">
+                {formData.type === 'CHALLENGE' && (
+                  <>
+                    <li>Challenge ID</li>
+                    <li>Challenge Name</li>
+                    <li>Issue Description</li>
+                  </>
+                )}
+                {formData.type === 'USER' && (
+                  <>
+                    <li>User ID</li>
+                    <li>Username</li>
+                    <li>Issue Description</li>
+                  </>
+                )}
+                {formData.type === 'BUG' && (
+                  <>
+                    <li>Steps to reproduce</li>
+                    <li>Expected behavior</li>
+                    <li>Actual behavior</li>
+                    <li>Screenshots (if applicable)</li>
+                  </>
+                )}
+                {formData.type === 'FEATURE' && (
+                  <>
+                    <li>Clear description of the feature</li>
+                    <li>Use cases</li>
+                    <li>Potential benefits</li>
+                  </>
+                )}
+              </ul>
+            </div>
+          </div>
+
+          {/* Right Column - Dynamic Form Fields */}
+          <div className="lg:col-span-2">
+            <div className="bg-[#212121] rounded-lg p-6">
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {currentReportType.fields.map(field => (
+                  <div key={field.name} className="space-y-1">
+                    <label className="block text-sm font-medium text-gray-200">
+                      {field.label}
+                    </label>
+                    {field.type === 'select' ? (
+                      <select
+                        value={formData[field.name]}
+                        onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+                        className="w-full rounded bg-[#2a2a2a] border-none px-3 py-2 text-white focus:ring-2 focus:ring-blue-500"
+                        required={field.required}
+                      >
+                        {field.options?.map(option => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    ) : field.type === 'textarea' ? (
+                      <textarea
+                        value={formData[field.name]}
+                        onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+                        className="w-full rounded bg-[#2a2a2a] border-none px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 min-h-[120px]"
+                        required={field.required}
+                        placeholder={`Enter ${field.label.toLowerCase()}...`}
+                      />
+                    ) : (
+                      <input
+                        type="text"
+                        value={formData[field.name]}
+                        onChange={(e) => setFormData({ ...formData, [field.name]: e.target.value })}
+                        className="w-full rounded bg-[#2a2a2a] border-none px-3 py-2 text-white focus:ring-2 focus:ring-blue-500"
+                        required={field.required}
+                        placeholder={`Enter ${field.label.toLowerCase()}...`}
+                      />
+                    )}
+                  </div>
+                ))}
+
+                <div className="pt-4">
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isSubmitting ? 'Submitting...' : 'Submit Report'}
+                  </button>
+                </div>
+              </form>
+            </div>
           </div>
         </div>
-        {showPopup && (
-          <motion.h1
-            className="center animate-slide-in-right fixed bottom-6 right-6 rounded-md bg-blue-400 p-2 py-2 px-4"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-          >
-            <div>Submitted Report!</div>
-          </motion.h1>
-        )}
-        {showError && (
-          <motion.h1
-            className="center animate-slide-in-right fixed bottom-6 right-6 rounded-md bg-blue-400 p-2 py-2 px-4"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-          >
-            <div>Failed to send Report!</div>
-          </motion.h1>
-        )}
       </div>
-    </>
+
+      {/* Status Notification */}
+      {status.show && (
+        <motion.div
+          className={`fixed bottom-6 right-6 rounded-md p-4 ${
+            status.isError ? 'bg-red-500' : 'bg-green-500'
+          }`}
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 50 }}
+        >
+          <div className="flex items-center">
+            <span className="text-white">{status.message}</span>
+          </div>
+        </motion.div>
+      )}
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/profile/ChallengeCard.jsx b/src/components/profile/ChallengeCard.jsx
index 2b633528..33595412 100644
--- a/src/components/profile/ChallengeCard.jsx
+++ b/src/components/profile/ChallengeCard.jsx
@@ -66,7 +66,7 @@ const ChallengeCard = (_props) => {
         challenge.solved ? 'bg-green-900/50' : 'bg-[#212121]'
       } px-5 py-6 transition-all duration-300 hover:bg-[#2c2c2c] ${props.className ?? ''}`} href={`${baseUrl}/challenges/${challenge.id}`} >
         <div className="flex justify-between">
-          <h1 className="truncate text-2xl font-bold text-white w-2/3">{challenge.title}</h1>
+          <h1 className="truncate text-2xl  text-white w-2/3">{challenge.title}</h1>
 
           <div className="flex items-center text-gray-400 ">
        
diff --git a/src/components/userASK/onboarding.jsx b/src/components/userASK/onboarding.jsx
new file mode 100644
index 00000000..b28ed076
--- /dev/null
+++ b/src/components/userASK/onboarding.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+const OnboardingModal = ({ showModal, setShowModal }) => {
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <CSSTransition
+      in={showModal}
+      timeout={300}
+      classNames="slide"
+      unmountOnExit
+    >
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
+        <div className="relative w-full max-w-3xl mx-auto bg-white rounded-lg shadow-lg">
+          <div className="flex justify-end p-2">
+            <button
+              className="text-gray-500 hover:text-gray-700"
+              onClick={closeModal}
+            >
+              <span className="sr-only">Close</span>
+              &times;
+            </button>
+          </div>
+          <div className="p-6">
+            <h2 className="text-2xl font-semibold text-gray-800">Welcome!</h2>
+            <p className="mt-4 text-gray-600">
+              We would like to understand where you stand. Please provide us with some information.
+            </p>
+            {/* Add your form or content here */}
+          </div>
+        </div>
+      </div>
+    </CSSTransition>
+  );
+};
+
+const Onboarding = () => {
+  const [showModal, setShowModal] = useState(true);
+
+  return (
+    <div>
+      <OnboardingModal showModal={showModal} setShowModal={setShowModal} />
+    </div>
+  );
+};
+
+export default Onboarding;
diff --git a/src/pages/dashboard.jsx b/src/pages/dashboard.jsx
index bd79e0bd..b3ee752a 100644
--- a/src/pages/dashboard.jsx
+++ b/src/pages/dashboard.jsx
@@ -154,7 +154,7 @@ export default function Dashboard() {
 
   useEffect(() => {
  
-    setShowOnboarding(false);
+    //setShowOnboarding(false);
   }, []);
 
   const handleHideOnboarding = () => {
@@ -185,7 +185,7 @@ export default function Dashboard() {
           <div className="flex flex-col lg:flex-row md:mt-8 lg:mt-8 items-start p-4 mx-auto gap-4 max-w-7xl text-neutral-50">
             <div className='w-full'>
               {showOnboarding && (
-                <div className='w-full p-4'>
+                <div className='w-full p-4 animate__animated animate__slideInDown'>
                   <h1 className='text-2xl font-semibold flex align-middle'>
                     Onboarding 
                     <span 
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 4c1b5384..01f2864c 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,7 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@layer utilities {
+  .font-semibold {
+    font-weight: 430;
+  }
+}
 /* HTML: <div class="loader"></div> */
 .loader {
   width: 50px;
@@ -29,7 +33,7 @@
   50%  {background-position: 0 -9.6px ,8px 9.6px; transform:rotate(90deg)}
   100% {background-position: 0 -19.2px,8px 19.2px;transform:rotate(180deg)}
 }
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
 @import "~@uiw/react-markdown-editor/markdown-editor.css";
 
 @layer utilities {