diff --git a/src/screens/UserPortal/Events/Events.module.css b/src/screens/UserPortal/Events/Events.module.css
deleted file mode 100644
index eadbf63d0f..0000000000
--- a/src/screens/UserPortal/Events/Events.module.css
+++ /dev/null
@@ -1,156 +0,0 @@
-.borderNone {
-  border: none;
-}
-
-.colorWhite {
-  color: white;
-}
-
-.backgroundWhite {
-  background-color: white;
-}
-
-.maxWidth {
-  max-width: 800px;
-}
-
-.mainContainer {
-  margin-top: 2rem;
-  width: 50%;
-  flex-grow: 3;
-  max-height: 100%;
-  overflow: auto;
-}
-
-.content {
-  height: fit-content;
-  min-height: calc(100% - 40px);
-}
-.selectType {
-  border-radius: 10px;
-}
-.dropdown__item {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.gap {
-  gap: 20px;
-}
-
-.paddingY {
-  padding: 30px 0px;
-}
-
-.colorPrimary {
-  background: #31bb6b;
-  color: white;
-}
-
-.eventActionsContainer {
-  display: flex;
-  flex-direction: row;
-  gap: 15px;
-}
-
-.datePicker {
-  border-radius: 10px;
-  height: 40px;
-  text-align: center;
-  background-color: #f2f2f2;
-  border: none;
-  width: 100%;
-}
-
-.modalBody {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.switchContainer {
-  display: flex;
-  align-items: center;
-}
-
-.switches {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  flex-wrap: wrap;
-  margin-top: 20px;
-}
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 65%;
-}
-
-.datediv {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 15px;
-}
-
-.datebox {
-  width: 90%;
-  border-radius: 7px;
-  border-color: #e8e5e5;
-  outline: none;
-  box-shadow: none;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 5px;
-  padding-left: 5px;
-  margin-right: 5px;
-  margin-left: 5px;
-}
-
-.checkboxdiv > label {
-  margin-right: 50px;
-}
-.checkboxdiv > label > input {
-  margin-left: 10px;
-}
-
-.checkboxdiv {
-  display: flex;
-}
-.checkboxdiv > div {
-  width: 50%;
-}
-
-.dispflex {
-  display: flex;
-  align-items: center;
-}
-.dispflex > input {
-  border: none;
-  box-shadow: none;
-  margin-top: 5px;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #31bb6b;
-  width: 100%;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-  width: 100%;
-}
diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx
index d3fabf9469..aa8128c9e5 100644
--- a/src/screens/UserPortal/Events/Events.tsx
+++ b/src/screens/UserPortal/Events/Events.tsx
@@ -19,7 +19,7 @@ import { toast } from 'react-toastify';
 import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
 import { errorHandler } from 'utils/errorHandler';
 import useLocalStorage from 'utils/useLocalstorage';
-import styles from './Events.module.css';
+import styles from './../../../style/app.module.css';
 
 /**
  * Converts a time string to a Dayjs object.
@@ -236,7 +236,7 @@ export default function events(): JSX.Element {
           </div>
           <Modal show={createEventModal} onHide={toggleCreateEventModal}>
             <Modal.Header>
-              <p className={styles.titlemodal}>{t('eventDetails')}</p>
+              <p className={styles.titlemodalEvents}>{t('eventDetails')}</p>
               <Button
                 variant="danger"
                 onClick={toggleCreateEventModal}
@@ -280,11 +280,11 @@ export default function events(): JSX.Element {
                   onChange={handleEventLocationChange}
                   data-testid="eventLocationInput"
                 />
-                <div className={styles.datediv}>
+                <div className={styles.datedivEvents}>
                   <div>
                     <DatePicker
                       label={tCommon('startDate')}
-                      className={styles.datebox}
+                      className={styles.dateboxEvents}
                       value={dayjs(startDate)}
                       onChange={(date: Dayjs | null): void => {
                         if (date) {
@@ -298,7 +298,7 @@ export default function events(): JSX.Element {
                   <div>
                     <DatePicker
                       label={tCommon('endDate')}
-                      className={styles.datebox}
+                      className={styles.dateboxEvents}
                       value={dayjs(endDate)}
                       onChange={(date: Dayjs | null): void => {
                         if (date) {
@@ -314,7 +314,7 @@ export default function events(): JSX.Element {
                   <div className="mr-3">
                     <TimePicker
                       label={tCommon('startTime')}
-                      className={styles.datebox}
+                      className={styles.dateboxEvents}
                       timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
                       value={timeToDayJs(startTime)}
                       onChange={(time): void => {
@@ -329,7 +329,7 @@ export default function events(): JSX.Element {
                   <div>
                     <TimePicker
                       label={tCommon('endTime')}
-                      className={styles.datebox}
+                      className={styles.dateboxEvents}
                       timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
                       value={timeToDayJs(endTime)}
                       onChange={(time): void => {
@@ -342,8 +342,8 @@ export default function events(): JSX.Element {
                     />
                   </div>
                 </div>
-                <div className={styles.checkboxdiv}>
-                  <div className={styles.dispflex}>
+                <div className={styles.checkboxdivEvents}>
+                  <div className={styles.dispflexEvents}>
                     <label htmlFor="allday">{t('allDay')}?</label>
                     <Form.Switch
                       className="ms-2 mt-3"
@@ -354,7 +354,7 @@ export default function events(): JSX.Element {
                       onChange={(): void => setIsAllDay(!isAllDay)}
                     />
                   </div>
-                  <div className={styles.dispflex}>
+                  <div className={styles.dispflexEvents}>
                     <label htmlFor="recurring">{t('recurring')}:</label>
                     <Form.Switch
                       className="ms-2 mt-3"
@@ -366,8 +366,8 @@ export default function events(): JSX.Element {
                     />
                   </div>
                 </div>
-                <div className={styles.checkboxdiv}>
-                  <div className={styles.dispflex}>
+                <div className={styles.checkboxdivEvents}>
+                  <div className={styles.dispflexEvents}>
                     <label htmlFor="ispublic">{t('publicEvent')}?</label>
                     <Form.Switch
                       className="ms-2 mt-3"
@@ -378,7 +378,7 @@ export default function events(): JSX.Element {
                       onChange={(): void => setIsPublic(!isPublic)}
                     />
                   </div>
-                  <div className={styles.dispflex}>
+                  <div className={styles.dispflexEvents}>
                     <label htmlFor="registrable">{t('registerable')}?</label>
                     <Form.Switch
                       className="ms-2 mt-3"
@@ -392,7 +392,7 @@ export default function events(): JSX.Element {
                 </div>
                 <Button
                   type="submit"
-                  className={styles.greenregbtn}
+                  className={styles.blueregbtnEvents}
                   value="createevent"
                   data-testid="createEventBtn"
                 >
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 668e41e446..8b1457d2e0 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -30,6 +30,8 @@
   --tablerow-bg-color: #eff1f7;
   --row-background: var(--bs-white, white);
   --font-size-header: 16px;
+  --date-picker-background: #f2f2f2;
+  --grey-bg-color-dark: #707070;
 }
 .fonts {
   color: #707070;
@@ -3518,3 +3520,156 @@ button[data-testid='createPostBtn'] {
 .attendance-modal .paddingBottom2Rem {
   padding-bottom: 2rem;
 }
+
+/* Events.tsx */
+
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: var(--bs-white);
+}
+
+.backgroundWhite {
+  background-color: var(--bs-white);
+}
+
+.maxWidth {
+  max-width: 800px;
+}
+
+.mainContainer {
+  margin-top: 2rem;
+  width: 100%;
+  max-width: 800px;
+  flex-grow: 3;
+  max-height: 90vh;
+  overflow: auto;
+  padding: 0 1rem;
+}
+
+.selectType {
+  border-radius: 10px;
+}
+.dropdown__item {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.gap {
+  gap: var(--spacing-lg, 1.25rem);
+}
+
+.paddingY {
+  padding: var(--spacing-xl, 1.875rem) 0;
+}
+
+.eventActionsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+.datePicker {
+  border-radius: 10px;
+  height: 2.5rem;
+  text-align: center;
+  background-color: var(--date-picker-background);
+  border: none;
+  width: 100%;
+}
+
+.modalBodyEvents {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.switchContainer {
+  display: flex;
+  align-items: center;
+}
+
+.switches {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.titlemodalEvents {
+  color: var(--grey-bg-color-dark);
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid var(--subtle-blue-grey);
+  width: 65%;
+}
+
+.datedivEvents {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
+}
+
+.dateboxEvents {
+  width: 90%;
+  border-radius: 7px;
+  border-color: var(--grey-border-box-color);
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.checkboxdivEvents > label {
+  margin-right: 50px;
+}
+.checkboxdivEvents > label > input {
+  margin-left: 10px;
+}
+
+.checkboxdivEvents {
+  display: flex;
+}
+.checkboxdivEvents > div {
+  width: 50%;
+}
+
+.dispflexEvents {
+  display: flex;
+  align-items: center;
+}
+.dispflexEvents > input {
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+
+.blueregbtnEvents {
+  margin-top: var(--spacing-lg, 1.25rem);
+  border: 1px solid var(--grey-border-box-color);
+  box-shadow: 0 2px 2px var(--grey-border-box-color);
+  padding: var(--spacing-md, 0.625rem);
+  border-radius: 5px;
+  background-color: var(--subtle-blue-grey);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px var(--grey-border-box-color);
+  }
+}