diff --git a/src/components/CommunityPortal/Activities/ActivitiesPage.jsx b/src/components/CommunityPortal/Activities/ActivitiesPage.jsx
index 01087b9251..c60c2a4974 100644
--- a/src/components/CommunityPortal/Activities/ActivitiesPage.jsx
+++ b/src/components/CommunityPortal/Activities/ActivitiesPage.jsx
@@ -1,35 +1,30 @@
-import React, { useState } from 'react';
+import React from 'react';
 import RegistrationForm from './RegistrationForm';
 import ResourceMonitoring from './ResourceMonitoring';
 import LatestRegistration from './LatestRegistration';
 import MyEvent from './MyEvent';
-import ActivityFeedbackModal from '../ActivityFeedbackForm';
-import styles from './styles.module.css';
-
+import styles from './Activitiesstyles.module.css';
+import { useSelector } from 'react-redux';
 function ActivitiesPage() {
-  const [showFeedback, setShowFeedback] = useState(false);
-
+  const darkMode = useSelector(state => state.theme.darkMode);
   return (
-    <div className={`${styles.activitiesPage}`}>
-      <header className={`${styles.header}`}>
-        <h1 className={styles.headerTitle}>Event Registrations</h1>
+    <div className={`${darkMode ? styles.darkmode : ''}`}>
+      <div className={`${styles.activitiesPage}`}>
+        <header className={`${styles.header}`}>
+          <h1>Event Registrations</h1>
+        </header>
 
-        <button className={styles.feedbackBtn} onClick={() => setShowFeedback(true)}>
-          Give Feedback
-        </button>
-      </header>
+        <ResourceMonitoring />
 
-      <ResourceMonitoring />
-
-      <div className="middle-section">
-        <RegistrationForm />
-      </div>
+        <div className={`${styles.middleSection}`}>
+          <RegistrationForm />
+        </div>
 
-      <div className="main-content">
-        <LatestRegistration />
-        <MyEvent />
+        <div className={`${styles.mainContent}`}>
+          <LatestRegistration />
+          <MyEvent />
+        </div>
       </div>
-      {showFeedback && <ActivityFeedbackModal onClose={() => setShowFeedback(false)} />}
     </div>
   );
 }
diff --git a/src/components/CommunityPortal/Activities/Activitiesstyles.module.css b/src/components/CommunityPortal/Activities/Activitiesstyles.module.css
new file mode 100644
index 0000000000..68df724c4b
--- /dev/null
+++ b/src/components/CommunityPortal/Activities/Activitiesstyles.module.css
@@ -0,0 +1,691 @@
+.activitiesPage {
+  padding: 24px;
+  font-family: Inter, Arial, sans-serif;
+  background-color: #f4f6f8;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.header h2,
+.resourceMonitoring h2,
+.latestRegistration h2,
+.myEvent h2 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.resourceMonitoring,
+.latestRegistration,
+.myEvent {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 20px 22px;
+  margin-bottom: 24px;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
+}
+
+.resourceGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.resourceCard {
+  background: linear-gradient(180deg, #fafafa, #fff);
+  border-radius: 14px;
+  padding: 18px;
+  text-align: center;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.resourceCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 22px rgb(0 0 0 / 8%);
+}
+
+/* Title + Value */
+.resourceTitle {
+  text-align: left;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #6b7280;
+  margin-bottom: 6px;
+}
+
+.resourceValue {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.circleContainer {
+  position: relative;
+  width: 84px;
+  height: 84px;
+  margin: 14px auto;
+}
+
+.progressCircle {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.circleBg {
+  fill: none;
+  stroke: #e5e7eb;
+  stroke-width: 4;
+}
+
+.circleProgress {
+  fill: none;
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.4s ease;
+}
+
+.circleLabel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.resourceStats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+}
+
+.resourceStats p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #6b7280;
+}
+
+.resourceStats .arrow {
+  font-size: 1rem;
+}
+
+.arrow.up {
+  color: #16a34a;
+}
+
+.arrow.down {
+  color: #dc2626;
+}
+
+.latestRegistration ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.latestRegistration li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.latestRegistration li:last-child {
+  border-bottom: none;
+}
+
+.registerinfo {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.registerinfo p {
+  margin: 0;
+  font-weight: 500;
+  color: #111827;
+}
+
+.time {
+  font-size: 0.8rem;
+  color: #6b7280;
+}
+
+.approveBtn,
+.createNewBtn,
+.applyFiltersBtn {
+  border: none;
+  border-radius: 10px;
+  padding: 8px 14px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.approveBtn {
+  background-color: #2563eb;
+  color: white;
+}
+
+.createNewBtn {
+  background-color: #16a34a;
+  color: white;
+}
+
+.applyFiltersBtn {
+  background-color: #2563eb;
+  color: white;
+}
+
+.approveBtn:hover,
+.applyFiltersBtn:hover {
+  background-color: #1e40af;
+}
+
+.createNewBtn:hover {
+  background-color: #15803d;
+}
+
+.myEvent .eventControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.myEventsTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.myEventsTable th {
+  background-color: #f9fafb;
+  font-weight: 600;
+  color: #374151;
+}
+
+.myEventsTable th,
+.myEventsTable td {
+  padding: 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.myEventsTable tr:hover {
+  background-color: #f9fafb;
+}
+
+.eventTime {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.dateBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dateBox .day {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #f97316;
+}
+
+.dateBox .date {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.status,
+.resource {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  min-width: 70px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.status.active {
+  background-color: rgb(34 197 94 / 15%);
+  color: #15803d;
+}
+
+.status.closed {
+  background-color: rgb(99 102 241 / 15%);
+  color: #4338ca;
+}
+
+.status.cancelled {
+  background-color: rgb(239 68 68 / 15%);
+  color: #b91c1c;
+}
+
+.resource.pending {
+  background-color: rgb(234 179 8 / 18%);
+  color: #92400e;
+}
+
+.resource.completed {
+  background-color: rgb(34 197 94 / 15%);
+  color: #15803d;
+}
+
+.resource.cancelled {
+  background-color: rgb(239 68 68 / 15%);
+  color: #b91c1c;
+}
+
+.registrationForm {
+  background: white;
+  border-radius: 14px;
+  padding: 16px 18px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 22px rgb(0 0 0 / 8%);
+}
+
+.registrationForm h3 {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.formFields {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Inputs */
+.registrationForm input,
+.registrationForm select {
+  height: 36px;
+  padding: 0 10px;
+  font-size: 0.85rem;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  color: #111827;
+}
+
+.filterControls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.filterControls select {
+  appearance: none;
+  height: 34px;
+  padding: 0 34px 0 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 14px;
+  color: #111827;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.filterControls select:hover {
+  background-color: white;
+  border-color: #9ca3af;
+}
+
+.filterControls select:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 15%);
+}
+
+.inputError {
+  border-color: #dc2626 !important;
+  background-color: #fef2f2;
+  box-shadow: 0 0 0 2px rgb(220 38 38 / 12%);
+}
+
+.registrationForm input[type='date'] {
+  max-width: 180px;
+}
+
+.inlineRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.bottomRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.bottomRow input[type='date'] {
+  max-width: 180px;
+}
+
+.submitbtn {
+  height: 36px;
+  padding: 0 22px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: 12px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.submitbtn:hover {
+  background-color: #1e40af;
+}
+
+.registrationToast {
+  background-color: #fff;
+  color: #1f2937;
+  border-radius: 12px;
+  box-shadow: 0 10px 24px rgb(15 23 42 / 14%);
+  border: 1px solid #e5e7eb;
+  font-size: 0.92rem;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.registrationToastProgress {
+  background: linear-gradient(90deg, #2563eb, #38bdf8);
+}
+
+.registrationToast.darkmode {
+  background-color: #0b1220;
+  color: #e5e7eb;
+  box-shadow: 0 14px 30px rgb(0 0 0 / 55%);
+  border: 1px solid #1e293b;
+}
+
+.registrationToast :global(.Toastify__toast-body) {
+  margin: 0;
+  padding: 12px 10px;
+}
+
+.registrationToast :global(.Toastify__close-button) {
+  color: #334155;
+  opacity: 0.8;
+}
+
+.registrationToast :global(.Toastify__close-button:hover) {
+  color: #0f172a;
+  opacity: 1;
+}
+
+.registrationToast.darkmode :global(.Toastify__close-button) {
+  color: #e2e8f0;
+  opacity: 0.85;
+}
+
+.registrationToast.darkmode :global(.Toastify__close-button:hover) {
+  color: #fff;
+  opacity: 1;
+}
+
+.registrationToastProgress.darkmode {
+  background: linear-gradient(90deg, #38bdf8, #60a5fa);
+}
+
+.viewToggle button {
+  padding: 10px 18px;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+}
+
+.activeView {
+  background-color: #111827;
+  color: white;
+}
+
+.inactiveView {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+
+.darkmode .activitiesPage {
+  background-color: #0f172a;
+  color: #e5e7eb;
+}
+
+.darkmode .header h1,
+.darkmode .header h2,
+.darkmode .resourceMonitoring h2,
+.darkmode .latestRegistration h2,
+.darkmode .myEvent h2 {
+  color: #f9fafb;
+}
+
+.darkmode .resourceMonitoring,
+.darkmode .latestRegistration,
+.darkmode .myEvent,
+.darkmode .registrationForm {
+  background-color: #020617;
+  border: 1px solid #1e293b;
+  box-shadow:
+    0 0 0 1px rgb(255 255 255 / 2%),
+    0 12px 28px rgb(0 0 0 / 75%);
+}
+
+.darkmode .resourceCard {
+  background: #020617;
+  border: 1px solid #1e293b;
+}
+
+.darkmode .resourceTitle {
+  color: #9ca3af;
+}
+
+.darkmode .resourceValue,
+.darkmode .circleLabel {
+  color: #f9fafb;
+}
+
+.darkmode .resourceStats p {
+  color: #9ca3af;
+}
+
+.darkmode .latestRegistration li {
+  border-bottom-color: #1e293b;
+}
+
+.darkmode .registerinfo p {
+  color: #f9fafb;
+}
+
+.darkmode .time {
+  color: #9ca3af;
+}
+
+.darkmode .myEventsTable th {
+  background-color: #020617;
+  color: #e5e7eb;
+}
+
+.darkmode .myEventsTable td {
+  color: #e5e7eb;
+  border-bottom-color: #1e293b;
+}
+
+.darkmode .myEventsTable tr:hover {
+  background-color: #020617;
+}
+
+.darkmode .dateBox .day {
+  color: #fb923c;
+}
+
+.darkmode .dateBox .date {
+  color: #f9fafb;
+}
+
+.darkmode .registrationForm input,
+.darkmode .registrationForm select,
+.darkmode .filterControls select {
+  background-color: #020617;
+  border-color: #1e293b;
+  color: #e5e7eb;
+}
+
+.darkmode .registrationForm input::placeholder {
+  color: #64748b;
+}
+
+.darkmode .registrationForm input:focus,
+.darkmode .registrationForm select:focus,
+.darkmode .filterControls select:focus {
+  border-color: #60a5fa;
+  background-color: #020617;
+}
+
+.darkmode .inputError {
+  border-color: #f87171 !important;
+  background-color: rgb(127 29 29 / 25%);
+  box-shadow: 0 0 0 2px rgb(248 113 113 / 20%);
+}
+
+.dateInputWrapperDark {
+  position: relative;
+  display: inline-block;
+}
+
+.dateInputWrapperDark::after {
+  content: '';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  pointer-events: none;
+}
+
+.dateInputWrapperDark input[type='date'] {
+  color-scheme: dark;
+  color: #e5e7eb;
+  -webkit-text-fill-color: #e5e7eb;
+  background: #020617;
+  padding-right: 30px;
+}
+
+.dateInputWrapperDark input[type='date']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.darkmode .approveBtn,
+.darkmode .applyFiltersBtn,
+.darkmode .submitbtn {
+  background-color: #2563eb;
+}
+
+.darkmode .createNewBtn {
+  background-color: #16a34a;
+}
+
+.darkmode .approveBtn:hover,
+.darkmode .applyFiltersBtn:hover,
+.darkmode .submitbtn:hover {
+  background-color: #1e40af;
+}
+
+.darkmode .createNewBtn:hover {
+  background-color: #15803d;
+}
+
+.darkmode .viewToggle button {
+  background-color: #020617;
+  color: #9ca3af;
+  border: 1px solid #1e293b;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.darkmode .viewToggle button:hover {
+  background-color: #020617;
+  color: #f9fafb;
+}
+
+.darkmode .viewToggle .activeView {
+  background-color: #2563eb;
+  color: #fff;
+  border-color: #2563eb;
+}
+
+.darkmode .viewToggle .activeView:hover {
+  background-color: #1e40af;
+}
+
+.darkmode .viewToggle .inactiveView {
+  background-color: #020617;
+  color: #9ca3af;
+}
+
+.darkmode .viewToggle .inactiveView:hover {
+  color: #f9fafb;
+}
+
+.darkmode .status,
+.darkmode .resource {
+  color: #e5e7eb;
+}
+
+.darkmode .status.active,
+.darkmode .resource.completed {
+  background-color: rgb(34 197 94 / 25%);
+}
+
+.darkmode .status.closed {
+  background-color: rgb(99 102 241 / 25%);
+}
+
+.darkmode .status.cancelled,
+.darkmode .resource.cancelled {
+  background-color: rgb(239 68 68 / 25%);
+}
+
+.darkmode .resource.pending {
+  background-color: rgb(234 179 8 / 25%);
+}
diff --git a/src/components/CommunityPortal/Activities/LatestRegistration.jsx b/src/components/CommunityPortal/Activities/LatestRegistration.jsx
index f4f27ebe2f..79b3edd399 100644
--- a/src/components/CommunityPortal/Activities/LatestRegistration.jsx
+++ b/src/components/CommunityPortal/Activities/LatestRegistration.jsx
@@ -1,9 +1,9 @@
-import styles from './styles.module.css';
+import styles from './Activitiesstyles.module.css';
 
 function LatestRegistration() {
   return (
     <div className={`${styles.latestRegistration}`}>
-      <h2 className={`${styles.headerTitle}`}>Latest Registration</h2>
+      <h2>Latest Registration</h2>
       <ul>
         <li>
           <div className={`${styles.registerinfo}`}>
diff --git a/src/components/CommunityPortal/Activities/MyEvent.jsx b/src/components/CommunityPortal/Activities/MyEvent.jsx
index b0dd5f7d7a..f77403010f 100644
--- a/src/components/CommunityPortal/Activities/MyEvent.jsx
+++ b/src/components/CommunityPortal/Activities/MyEvent.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import styles from './styles.module.css';
+import styles from './Activitiesstyles.module.css';
 
 function MyEvent() {
   const mockEvents = [
@@ -80,7 +80,6 @@ function MyEvent() {
         {filteredEvents.map(event => (
           <tr key={event.date}>
             {' '}
-            {/* Use event.date as the key */}
             <td>
               <div className={`${styles.dateBox}`}>
                 <span className={`${styles.day}`}>{event.day}</span>
@@ -91,12 +90,16 @@ function MyEvent() {
               {event.event}
               <div className={`${styles.eventTime}`}>{event.time}</div>
             </td>
-            <td className={`${styles.status} ${styles[event.status.toLowerCase()]}`}>
-              {event.status}
+            <td>
+              <span className={`${styles.status} ${styles[event.status.toLowerCase()]}`}>
+                {event.status}
+              </span>
             </td>
             <td>{event.registration}</td>
-            <td className={`${styles.resource} ${styles[event.resource.toLowerCase()]}`}>
-              {event.resource}
+            <td>
+              <span className={`${styles.resource} ${styles[event.resource.toLowerCase()]}`}>
+                {event.resource}
+              </span>
             </td>
             <td>{event.location}</td>
           </tr>
@@ -106,7 +109,7 @@ function MyEvent() {
   );
 
   const displayCalendarView = () => (
-    <div className="calendarView">
+    <div className={`${styles.calendarView}`}>
       <h3>Calendar View</h3>
       <p>Events displayed in a calendar format will go here.</p>
     </div>
@@ -114,19 +117,19 @@ function MyEvent() {
 
   return (
     <div className={`${styles.myEvent}`}>
-      <h2 className={styles.headerTitle}>My Event</h2>
+      <h2>My Event</h2>
       <div className={`${styles.eventControls}`}>
         <div className={`${styles.viewToggle}`}>
           <button
             type="button"
-            className={view === 'list' ? styles.activeView : styles.inactiveView}
+            className={view === 'list' ? `${styles.activeView}` : `${styles.inactiveView}`}
             onClick={() => setView('list')}
           >
             List
           </button>
           <button
             type="button"
-            className={view === 'calendar' ? styles.activeView : styles.inactiveView}
+            className={view === 'calendar' ? `${styles.activeView}` : `${styles.inactiveView}`}
             onClick={() => setView('calendar')}
           >
             Calendar
@@ -162,7 +165,7 @@ function MyEvent() {
           </button>
         </div>
       </div>
-      <div className="eventDisplayOption">
+      <div className={`${styles.eventDisplayOption}`}>
         {view === 'list' ? displayListView() : displayCalendarView()}
       </div>
     </div>
diff --git a/src/components/CommunityPortal/Activities/RegistrationForm.jsx b/src/components/CommunityPortal/Activities/RegistrationForm.jsx
index 623acf70ec..8faebeff90 100644
--- a/src/components/CommunityPortal/Activities/RegistrationForm.jsx
+++ b/src/components/CommunityPortal/Activities/RegistrationForm.jsx
@@ -1,71 +1,93 @@
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import styles from './styles.module.css';
+import styles from './Activitiesstyles.module.css';
 
 function RegistrationForm() {
+  const darkMode = useSelector(state => state.theme?.darkMode);
   const [eventType, setEventType] = useState('');
   const [location, setLocation] = useState('');
   const [name, setName] = useState('');
   const [eventDate, setEventDate] = useState('');
+  const [showValidation, setShowValidation] = useState(false);
+  const isFormComplete = Boolean(name && eventType && location && eventDate);
 
   const handleSubmit = e => {
     e.preventDefault();
+    if (!isFormComplete) {
+      setShowValidation(true);
+      return;
+    }
     toast(
       `Name of Register: ${name}, Event Type: ${eventType}, Location: ${location}, Event Date: ${eventDate}`,
+      {
+        className: `${styles.registrationToast} ${darkMode ? styles.darkmode : ''}`,
+        progressClassName: `${styles.registrationToastProgress} ${darkMode ? styles.darkmode : ''}`,
+      },
     );
   };
 
   return (
-    <form className={`${styles.registrationForm}`} onSubmit={handleSubmit}>
-      <h2 className={`${styles.headerTitle}`}>Event Registrations</h2>
+    <form
+      className={`${styles.registrationForm} ${darkMode ? styles.darkmode : ''}`}
+      onSubmit={handleSubmit}
+    >
+      <h3>Event Registrations</h3>
 
-      <div className={`${styles.registrationformField}`}>
-        <label htmlFor="name">Name of Registrant</label>
+      <div className={`${styles.formFields}`}>
         <input
-          id="name"
           type="text"
+          placeholder="Registrant name"
           value={name}
           onChange={e => setName(e.target.value)}
-          placeholder="Enter your name"
+          className={`${showValidation && !name ? styles.inputError : ''}`}
+          aria-invalid={showValidation && !name}
         />
-      </div>
 
-      <div className={`${styles.registrationformField}`}>
-        <label htmlFor="eventType">Event Type</label>
-        <select id="eventType" value={eventType} onChange={e => setEventType(e.target.value)}>
-          <option value="">Select Event Type</option>
-          <option value="conference">Conference</option>
-          <option value="workshop">Workshop</option>
-          <option value="webinar">Webinar</option>
-        </select>
-      </div>
+        <div className={`${styles.inlineRow}`}>
+          <select
+            value={eventType}
+            onChange={e => setEventType(e.target.value)}
+            className={`${showValidation && !eventType ? styles.inputError : ''}`}
+            aria-invalid={showValidation && !eventType}
+          >
+            <option value="">Event type</option>
+            <option value="conference">Conference</option>
+            <option value="workshop">Workshop</option>
+            <option value="webinar">Webinar</option>
+          </select>
 
-      <div className={`${styles.registrationformField}`}>
-        <label htmlFor="location">Location</label>
-        <select id="location" value={location} onChange={e => setLocation(e.target.value)}>
-          <option value="">Select Location</option>
-          <option value="ny">New York</option>
-          <option value="sf">San Francisco</option>
-          <option value="la">Los Angeles</option>
-        </select>
-      </div>
+          <select
+            value={location}
+            onChange={e => setLocation(e.target.value)}
+            className={`${showValidation && !location ? styles.inputError : ''}`}
+            aria-invalid={showValidation && !location}
+          >
+            <option value="">Location</option>
+            <option value="ny">New York</option>
+            <option value="sf">San Francisco</option>
+            <option value="la">Los Angeles</option>
+          </select>
+        </div>
 
-      <div className={`${styles.registrationformField}`}>
-        <label htmlFor="eventDate">Event Date</label>
-        <input
-          id="eventDate"
-          type="date"
-          value={eventDate}
-          onChange={e => setEventDate(e.target.value)}
-          placeholder="Select Event Date"
-          min={new Date().toISOString().split('T')[0]}
-        />
-      </div>
+        <div className={`${styles.bottomRow}`}>
+          <div className={`${darkMode ? styles.dateInputWrapperDark : ''}`}>
+            <input
+              type="date"
+              value={eventDate}
+              min={new Date().toISOString().split('T')[0]}
+              onChange={e => setEventDate(e.target.value)}
+              className={`${showValidation && !eventDate ? styles.inputError : ''}`}
+              aria-invalid={showValidation && !eventDate}
+            />
+          </div>
 
-      <button type="submit" className={`${styles.submitbtn}`}>
-        Submit
-      </button>
+          <button type="submit" className={`${styles.submitbtn}`}>
+            Register
+          </button>
+        </div>
+      </div>
     </form>
   );
 }
diff --git a/src/components/CommunityPortal/Activities/ResourceMonitoring.jsx b/src/components/CommunityPortal/Activities/ResourceMonitoring.jsx
index 15c935f57b..ae1ecdb529 100644
--- a/src/components/CommunityPortal/Activities/ResourceMonitoring.jsx
+++ b/src/components/CommunityPortal/Activities/ResourceMonitoring.jsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import styles from './styles.module.css';
-
+import styles from './Activitiesstyles.module.css';
 function ResourceMonitoring() {
   const resources = [
     {
@@ -66,124 +65,58 @@ function ResourceMonitoring() {
 
   return (
     <div className={`${styles.resourceMonitoring}`}>
-      <h2 className={styles.headerTitle}>Resources Monitoring</h2>
+      <h2>Resources Monitoring</h2>
       <div className={`${styles.resourceGrid}`}>
         {resources.map((resource, index) => {
           const progress = (resource.value / resource.max) * 100;
           const arrowColor = resource.direction === 'up' ? 'green' : 'red';
 
           return (
-            <div
-              className={`${styles.resourceCard}`}
-              key={resource.title}
-              style={{
-                backgroundColor: resource.bgColor,
-                padding: '15px',
-                borderRadius: '10px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}
-            >
+            <div className={`${styles.resourceCard}`} key={resource.title}>
               {/* Left Section: Title and Value */}
-              <div style={{ textAlign: 'left' }}>
-                <div
-                  className={`${styles.resourceTitle}`}
-                  style={{ fontSize: '1rem', fontWeight: '500' }}
-                >
+              <div>
+                <div className={`${styles.resourceTitle}`}>
                   {resource.title}
                   <button
                     type="button"
                     aria-label={`Toggle ${resource.title}`}
                     onClick={() => handleArrowClick(index)}
-                    style={{
-                      fontSize: '0.8rem',
-                      cursor: 'pointer',
-                      background: 'none',
-                      border: 'none',
-                      marginLeft: '5px',
-                      padding: 0,
-                    }}
                   >
                     ↗
                   </button>
                 </div>
-                <div
-                  className={`${styles.resourceValue}`}
-                  style={{
-                    fontWeight: 'bold',
-                    fontSize: '2rem',
-                    color: 'black',
-                    marginTop: '10px',
-                  }}
-                >
-                  {resource.value}
-                </div>
-                <div
-                  className={`${styles.resourceStats}`}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    marginTop: '5px',
-                    fontSize: '0.9rem',
-                  }}
-                >
-                  <div
-                    className={`${styles.arrow}`}
-                    style={{
-                      color: arrowColor,
-                      fontSize: '1rem',
-                      marginRight: '5px',
-                    }}
-                  >
-                    {resource.direction === 'up' ? '▲' : '▼'}
-                  </div>
-                  <p style={{ margin: '0 5px', color: arrowColor }}>{resource.change}</p>
-                  <p style={{ color: 'grey' }}>compare to last week</p>
+                <div className={`${styles.resourceValue}`}>{resource.value}</div>
+                <div className={`${styles.resourceStats}`}>
+                  <div className={`${styles.arrow}`}>{resource.direction === 'up' ? '▲' : '▼'}</div>
+                  <p>{resource.change}</p>
+                  <p>compare to last week</p>
                 </div>
               </div>
 
-              {/* Right Section: Circle */}
-              <div className={`${styles.circleContainer}`} style={{ textAlign: 'right' }}>
-                <svg
-                  className={`${styles.progressCircle}`}
-                  viewBox="0 0 36 36"
-                  style={{
-                    width: '90px',
-                    height: '90px',
-                  }}
-                >
+              <div className={styles.circleContainer}>
+                <svg className={styles.progressCircle} viewBox="0 0 36 36" width="90" height="90">
                   <path
-                    className={`${styles.circleBg}`}
-                    style={{ stroke: 'lightgrey', fill: 'none', strokeWidth: '2' }}
-                    d="M18 2.0845
-                        a 15.9155 15.9155 0 0 1 0 31.831
-                        a 15.9155 15.9155 0 0 1 0 -31.831"
+                    className={styles.circleBg}
+                    d="
+                      M18 2.5
+                      a 15.5 15.5 0 0 1 0 31
+                      a 15.5 15.5 0 0 1 0 -31
+                    "
                   />
+
                   <path
-                    className={`${styles.circleProgress}`}
-                    style={{
-                      stroke: progressColorMap[resource.title] || 'gray',
-                      fill: 'none',
-                      strokeWidth: '2',
-                    }}
+                    className={styles.circleProgress}
+                    stroke={progressColorMap[resource.title] || '#9ca3af'}
                     strokeDasharray={`${progress}, 100`}
-                    d="M18 2.0845
-                        a 15.9155 15.9155 0 0 1 0 31.831
-                        a 15.9155 15.9155 0 0 1 0 -31.831"
+                    d="
+                      M18 2.5
+                      a 15.5 15.5 0 0 1 0 31
+                      a 15.5 15.5 0 0 1 0 -31
+                    "
                   />
                 </svg>
-                <div
-                  className={`${styles.circleLabel}`}
-                  style={{
-                    fontSize: '1rem',
-                    fontWeight: 'bold',
-                    color: 'black',
-                    marginTop: '5px',
-                  }}
-                >
-                  {labelMap[resource.title] || `${resource.value}/${resource.max}`}
-                </div>
+
+                <div className={styles.circleLabel}>{progress}%</div>
               </div>
             </div>
           );