diff --git a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx
similarity index 68%
rename from Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx
rename to Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx
index 23c8d3047..79776c7c9 100644
--- a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx
+++ b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx
@@ -3,13 +3,24 @@ import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
 
-function AnnouncementsDualButtonWithIcon({
+/**
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.icon - Optional React node for an announcement icon
+ * @param {string} props.subject - The announcement subject text
+ * @param {string} props.body - The announcement body text content
+ * @param {string} props.esc - The text for the escape button (usually "Close")
+ * @param {string} props.primary - The text for the primary button
+ * @returns {JSX.Element} - Renders the announcement dual button with icon component
+ */
+
+const AnnouncementsDualButtonWithIcon = ({
   icon,
   subject,
   body,
   esc,
   primary,
-}) {
+}) => {
   return (
     <div className="announcement-tile">
       {icon && <div className="announcement-icon">{icon}</div>}
@@ -32,7 +43,7 @@ function AnnouncementsDualButtonWithIcon({
       </div>
     </div>
   );
-}
+};
 
 AnnouncementsDualButtonWithIcon.propTypes = {
   icon: PropTypes.object,
diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx
index 22497ca73..b9390406a 100644
--- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx
+++ b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx
@@ -2,6 +2,18 @@ import "./announcementUpdateSubscription.css";
 import React from "react";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.title - Title text for the update subscription dialog (required)
+ * @param {string} props.text - Body text for the update subscription dialog (required)
+ * @param {string} props.cancel - Text for the negative (cancel) button (required)
+ * @param {string} props.positive - Text for the positive button (required)
+ * @param {string} props.header - Title text for the email subscription section (required)
+ * @param {string} props.button - Text for the subscribe button (required)
+ * @returns {JSX.Element} - Renders the announcement update subscription component
+ */
+
 const AnnouncementUpdateSubscription = ({
   title,
   text,
diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
index bdffb6e98..0617b10b0 100644
--- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
+++ b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
@@ -10,6 +10,7 @@
   --update-subscription-color-7: #d0d5dd;
   --update-subscription-padding-0: 12px 16px;
   --update-subscription-margin-right: 12px;
+  --update-subscription-font-size: 13px;
   --update-subscription-radius-0: 4px;
   --spacing-1: 16px;
   --spacing-2: 20px;
@@ -58,6 +59,7 @@
   border-radius: var(--update-subscription-radius-0);
   border: 1px solid var(--update-subscription-color-3);
   background-color: var(--update-subscription-color-2);
+  font-size: var(--update-subscription-font-size);
 }
 
 .controls-positive,
@@ -68,7 +70,7 @@
   border: 1px solid var(--update-subscription-color-4);
   background-color: var(--update-subscription-color-5);
   color: var(--update-subscription-color-2);
-  font-size: 13px;
+  font-size: var(--update-subscription-font-size);
 }
 
 .update-subscription-title {
diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx
index 8630ed176..70ece178c 100644
--- a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx
+++ b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx
@@ -3,6 +3,16 @@ import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.subject - The announcement subject text
+ * @param {string} props.body - The announcement body text content
+ * @param {string} props.esc - The text for the escape button
+ * @param {string} props.primary - The text for the primary button
+ * @returns {JSX.Element} - Renders the announcement dual button component
+ */
+
 const AnnouncementsDualButton = ({ subject, body, esc, primary }) => {
   return (
     <div className="announcement-without-tile">
diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx
index 023d2e15f..e5cae6124 100644
--- a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx
+++ b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx
@@ -3,7 +3,13 @@ import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
 
-function AnnouncementsMessageBar({ message }) {
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.message - The announcement message text content (required)
+ * @returns {JSX.Element} - Renders the announcement message bar component
+ */
+const AnnouncementsMessageBar = ({ message }) => {
   return (
     <div className="announcement-tile">
       <div className="announcement-messagebar-body">{message}</div>
@@ -12,7 +18,7 @@ function AnnouncementsMessageBar({ message }) {
       </div>
     </div>
   );
-}
+};
 
 AnnouncementsMessageBar.propTypes = {
   message: PropTypes.string.isRequired,
diff --git a/Client/src/components/Charts/Servers/ServerStatus.jsx b/Client/src/components/Charts/Servers/ServerStatus.jsx
index 5916736ed..7e6dfd3dd 100644
--- a/Client/src/components/Charts/Servers/ServerStatus.jsx
+++ b/Client/src/components/Charts/Servers/ServerStatus.jsx
@@ -2,6 +2,14 @@ import React from "react";
 import "./serverStatus.css";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.title - The title text for the server status (required)
+ * @param {string} props.value - The value text to be displayed (required)
+ * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
+ * @returns {JSX.Element} - Renders the server status component
+ */
 const ServerStatus = ({ title, value, state }) => {
   return (
     <div className="server-status-tile">
diff --git a/Client/src/components/Charts/Statistics/Statistic.jsx b/Client/src/components/Charts/Statistics/Statistic.jsx
index 65b639296..44b4f8e03 100644
--- a/Client/src/components/Charts/Statistics/Statistic.jsx
+++ b/Client/src/components/Charts/Statistics/Statistic.jsx
@@ -2,6 +2,13 @@ import React from "react";
 import "./statistic.css";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.title - The title text for the statistic (required)
+ * @param {string} props.value - The numerical or textual value for the statistic (required)
+ * @returns {JSX.Element} - Renders the statistic component
+ */
 const Statistic = ({ title, value }) => {
   return (
     <div className="statistic-tile">
diff --git a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx
index d80144c12..67af3ab88 100644
--- a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx
+++ b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx
@@ -3,6 +3,12 @@ import React from "react";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {"red" | "green"} props.theme - The color theme for the alert (required) - must be either "red" or "green"
+ * @returns {JSX.Element} - Renders the complex alert component with dynamic color theme
+ */
 const ComplexAlert = ({ theme }) => {
   if (theme === "red") {
     return (
diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
index b781849e5..3432fb5c0 100644
--- a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
@@ -2,6 +2,16 @@ import "./dualButtonPopupModal.css";
 import React from "react";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {boolean} [props.open=true] - Controls the visibility of the modal (defaults to true)
+ * @param {string} props.subject - The title text for the modal (required)
+ * @param {string} props.description - The description text for the modal (required)
+ * @param {string} props.esc - The text for the discard button (usually "Cancel", "Dismiss" or "Discard") (required)
+ * @param {string} props.save - The text for the save button (required)
+ * @returns {JSX.Element} - Renders the dual button popup modal component
+ */
 const DualButtonPopupModal = ({
   open = true,
   subject,
diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
index 64d74eda4..527428eaf 100644
--- a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
+++ b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
@@ -3,7 +3,30 @@ import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
 
-function DualButtonPopupModalWithTextfields({ title, esc, save }) {
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.title - The title text for the modal (required)
+ * @returns {JSX.Element} - Renders a single text field component within a popup modal
+ */
+const PopupModalTextfield = ({ title }) => {
+  return (
+    <div className="popup-modal-input">
+      <div className="popup-modal-input-title">{title}</div>
+      <input type="text" className="popup-modal-text-field" />
+    </div>
+  );
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.title - The title text for the modal (required)
+ * @param {string} props.esc - The text for the cancel button (required)
+ * @param {string} props.save - The text for the save button (required)
+ * @returns {JSX.Element} - Renders the dual button popup modal component with text fields
+ */
+const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => {
   return (
     <div className="popup-modal-holder">
       <div className="popup-modal-header">
@@ -13,7 +36,7 @@ function DualButtonPopupModalWithTextfields({ title, esc, save }) {
         </div>
       </div>
       <div className="spacing-height"></div>
-      {PopupModalTextfield()}
+      <PopupModalTextfield title="Name" />
       <div className="spacing-height"></div>
       <div className="spacing-height"></div>
       <div className="popup-modal-controllers">
@@ -22,7 +45,7 @@ function DualButtonPopupModalWithTextfields({ title, esc, save }) {
       </div>
     </div>
   );
-}
+};
 
 DualButtonPopupModalWithTextfields.propTypes = {
   title: PropTypes.string.isRequired,
@@ -31,12 +54,3 @@ DualButtonPopupModalWithTextfields.propTypes = {
 };
 
 export default DualButtonPopupModalWithTextfields;
-
-function PopupModalTextfield() {
-  return (
-    <div className="popup-modal-input">
-      <div className="popup-modal-input-title">Name</div>
-      <input type="text" className="popup-modal-text-field" />
-    </div>
-  );
-}
diff --git a/Client/src/components/TextFields/Description/DescriptionTextField.jsx b/Client/src/components/TextFields/Description/DescriptionTextField.jsx
index e69a430f0..d57f213a1 100644
--- a/Client/src/components/TextFields/Description/DescriptionTextField.jsx
+++ b/Client/src/components/TextFields/Description/DescriptionTextField.jsx
@@ -3,6 +3,13 @@ import "./descriptionTextField.css";
 import { TextField } from "@mui/material";
 import PropTypes from "prop-types";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.hintText - The hint text displayed within the text field (required)
+ * @param {boolean} props.hasError - A flag indicating if the text field has an error (required)
+ * @returns {JSX.Element} - Renders the description text field component
+ */
 const DescriptionTextField = ({ hintText, hasError }) => {
   return (
     <div className="description-field-holder">
diff --git a/Client/src/components/TextFields/Email/EmailTextField.jsx b/Client/src/components/TextFields/Email/EmailTextField.jsx
index a48450be9..42c19acd4 100644
--- a/Client/src/components/TextFields/Email/EmailTextField.jsx
+++ b/Client/src/components/TextFields/Email/EmailTextField.jsx
@@ -4,6 +4,18 @@ import { InputAdornment, TextField } from "@mui/material";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.id - Unique ID for the text field (optional)
+ * @param {string} props.label - The label text displayed above the text field (optional)
+ * @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional)
+ * @param {string} props.placeholder - The placeholder text displayed within the text field (optional)
+ * @param {"error" | "help"} [props.icon] - The type of icon to display (error or help) (optional)
+ * @param {string} props.helperText - The helper text displayed below the text field (optional)
+ * @param {boolean} props.error - A flag indicating if the text field has an error (required)
+ * @returns {JSX.Element} - Renders the email text field component with dynamic icon display
+ */
 const EmailTextField = ({
   id,
   label,
diff --git a/Client/src/components/TextFields/Website/WebsiteTextField.jsx b/Client/src/components/TextFields/Website/WebsiteTextField.jsx
index 37a628a38..45555f3cb 100644
--- a/Client/src/components/TextFields/Website/WebsiteTextField.jsx
+++ b/Client/src/components/TextFields/Website/WebsiteTextField.jsx
@@ -3,6 +3,14 @@ import "./websiteTextField.css";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
+/**
+ * @component
+ * @param {Object} props
+ * @param {boolean} [props.showHelp=true] - Controls the visibility of the help icon (defaults to true)
+ * @param {boolean} [props.hasCopyButton=false] - Controls the visibility of the copy button (defaults to false)
+ * @param {string} props.hintText - The hint text displayed below the text field (required)
+ * @returns {JSX.Element} - Renders the website text field component with optional help and copy features
+ */
 const WebsiteTextField = ({
   showHelp = true,
   hasCopyButton = false,