diff --git a/ui/src/components/Common/FileUpload/fileupload.scss b/ui/src/components/Common/FileUpload/fileupload.scss
index 6a2e32bda..44476f91f 100644
--- a/ui/src/components/Common/FileUpload/fileupload.scss
+++ b/ui/src/components/Common/FileUpload/fileupload.scss
@@ -1,4 +1,7 @@
 @import '../../../scss/variables';
+/**
+ * Styles for the file upload container.
+ */
 .file-upload-container {
   display: flex;
   height: 21.25rem;
@@ -10,6 +13,9 @@
   border-radius: 0.25rem;
   border: 0.125rem dashed $color-base-gray-40;
 
+  /**
+   * Styles for the file upload element.
+   */
   .file-upload {
     display: flex;
     height: 4.5rem;
@@ -20,6 +26,9 @@
     flex-shrink: 0;
   }
 
+  /**
+   * Styles for the text inside the file upload element.
+   */
   .file-upload-text {
     text-align: center;
     font-family: Inter;
@@ -30,6 +39,9 @@
     letter-spacing: 0.16px;
   }
 
+  /**
+   * Styles for the image inside the file upload container.
+   */
   .file-upload-image {
     width: 15rem;
     height: 15rem;
@@ -37,14 +49,32 @@
   }
 }
 
+/**
+ * Adds a hover effect to the element, displaying a dashed border in the base purple color.
+ *
+ * @class hover
+ */
 .hover {
   border: 0.125rem dashed $color-base-purple;
 }
 
+/**
+ * This SCSS file contains styles for the FileUpload component.
+ */
+
 .hidden {
   display: none;
 }
 
+/**
+ * Styles for the validation container component.
+ *
+ * The validation container is a flex container that displays a validation message
+ * for a file upload component. It has a white background color, a fixed height,
+ * and a border. The container is centered vertically and has no padding.
+ *
+ * @class validation-container
+ */
 .validation-container {
   display: flex;
   background-color: $color-base-white-5;
diff --git a/ui/src/components/Common/FileUpload/index.tsx b/ui/src/components/Common/FileUpload/index.tsx
index 1945e9955..73958cd4f 100644
--- a/ui/src/components/Common/FileUpload/index.tsx
+++ b/ui/src/components/Common/FileUpload/index.tsx
@@ -11,16 +11,30 @@ type FileUploadProps = {
   projectId: string;
 };
 
+/**
+ * FileUpload component for uploading files.
+ *
+ * @param {FileUploadProps} props - The props for the FileUpload component.
+ * @returns {JSX.Element} The rendered FileUpload component.
+ */
 const FileUpload = (props: FileUploadProps) => {
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const targetRef = useRef<any>(null);
 
+  /**
+   * Empty method to handle setting upload modal to false.
+   */
   const handleSetUploadModalFalse = (): any => {
     // Empty Method
   };
 
+  /**
+   * Reads the files and opens the upload modal.
+   *
+   * @param {FileList | null} filesList - The list of files to be uploaded.
+   */
   const readFiles = (filesList: FileList | null) => {
     //handle Null check
     if (!filesList) return;
@@ -49,6 +63,11 @@ const FileUpload = (props: FileUploadProps) => {
     setIsDragOver(false);
   };
 
+  /**
+   * Handles the drop event when files are dropped onto the component.
+   *
+   * @param {DragEvent<HTMLDivElement>} e - The drop event.
+   */
   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -57,22 +76,43 @@ const FileUpload = (props: FileUploadProps) => {
     e.dataTransfer.clearData();
   };
 
+  /**
+   * Handles the drag toggle event when dragging files over the component.
+   *
+   * @param {boolean} flag - The flag indicating whether the files are being dragged over the component.
+   * @returns {Function} The event handler function.
+   */
   const handleDragToggle = (flag: boolean) => (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsDragOver(flag);
   };
 
+  /**
+   * Handles the file change event when a file is selected using the file input.
+   *
+   * @param {ChangeEvent<HTMLInputElement>} e - The file change event.
+   */
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
 
     readFiles(e?.target?.files);
   };
 
+  /**
+   * Handles the file select event when the "Choose file" link is clicked.
+   *
+   * @param {any} e - The file select event.
+   */
   const handleFileSelect = (e: any) => {
     e.preventDefault();
     fileInputRef?.current?.click();
   };
 
+  /**
+   * Handles the onClose event after the files are uploaded.
+   *
+   * @param {IFile[]} files - The uploaded files.
+   */
   const onCloseAfterUpload = (files: IFile[]) => {
     props.handleOnFileUpload(files);
   };
diff --git a/ui/src/components/Common/FileUpload/upload.scss b/ui/src/components/Common/FileUpload/upload.scss
index b6b680fb9..13ab47b9c 100644
--- a/ui/src/components/Common/FileUpload/upload.scss
+++ b/ui/src/components/Common/FileUpload/upload.scss
@@ -1,11 +1,21 @@
 @import '../../../scss/variables';
 
 /* Asset upload window css */
+/**
+ * Styles for the asset upload component.
+ *
+ * @class .asset-upload
+ */
 .asset-upload {
   background: $color-brand-white-base;
   box-shadow: 0 $space-4 $space-30 rgba(0, 0, 0, 0.25);
   width: 31.25rem;
 
+  /**
+   * Styles for the heading section of the asset upload component.
+   *
+   * @class .asset-upload__heading
+   */
   &__heading {
     align-items: center;
     border-radius: $radii-4;
@@ -14,26 +24,58 @@
     justify-content: space-between;
     padding: 0 calc(var(--space-22) + 0.063rem);
 
+    /**
+     * Styles for the in-progress state of the heading section.
+     *
+     * @class .in-progress
+     */
     &.in-progress {
       background-color: $color-brand-primary-base;
     }
 
+    /**
+     * Styles for the success state of the heading section.
+     *
+     * @class .success
+     */
     &.success {
       background-color: $color-brand-success-base;
     }
 
+    /**
+     * Styles for the attention state of the heading section.
+     *
+     * @class .attention
+     */
     &.attention {
       background-color: $color-brand-attention-base;
     }
 
+    /**
+     * Styles for the warning state of the heading section.
+     *
+     * @class .warning
+     */
     &.warning {
       background-color: #ffab00 !important;
     }
 
+    /**
+     * Styles for the actions section of the heading.
+     *
+     * @class .asset-upload-actions
+     */
     .asset-upload-actions {
       justify-content: space-between;
       width: 4.375rem;
 
+      /**
+       * Styles for the cancel, minimize, and maximize buttons in the actions section.
+       *
+       * @class .asset-upload__cancel
+       * @class .asset-upload__minimize
+       * @class .asset-upload__maximize
+       */
       &__cancel,
       &__minimize,
       &__maximize {
@@ -45,20 +87,34 @@
         justify-content: center;
         width: $space-30;
 
+        /**
+         * Styles for the hover state of the cancel, minimize, and maximize buttons.
+         */
         &:hover {
           background: rgba(34, 34, 34, 0.2);
         }
 
+        /**
+         * Styles for the SVG icons in the cancel, minimize, and maximize buttons.
+         */
         & > svg {
           cursor: pointer;
         }
       }
 
+      /**
+       * Styles for the SVG icons in the actions section.
+       */
       & > svg {
         cursor: pointer;
       }
     }
 
+    /**
+     * Styles for the count section in the heading.
+     *
+     * @class .asset-upload__count
+     */
     .asset-upload__count {
       color: $color-font-white;
       font-size: $size-font-xl;
@@ -67,17 +123,32 @@
     }
   }
 
+  /**
+   * Styles for the body section of the asset upload component.
+   *
+   * @class .asset-upload__body
+   */
   &__body {
     height: 19.06rem;
     margin-right: $space-15;
     overflow-y: auto;
 
+    /**
+     * Styles for each file in the body section.
+     *
+     * @class .asset-upload__file
+     */
     .asset-upload__file {
       display: flex;
       height: 3.75rem;
       justify-content: space-between;
       padding: $space-15;
 
+      /**
+       * Styles for the name section of each file.
+       *
+       * @class .asset-upload__name
+       */
       &__name {
         color: $color-font-black;
         font-size: $size-font-medium;
@@ -87,17 +158,37 @@
         // @include text-wrapper;
       }
 
+      /**
+       * Styles for the actions section of each file.
+       *
+       * @class .asset-upload__actions
+       */
       &__actions {
         display: flex;
 
+        /**
+         * Styles for the progress section in the actions section.
+         *
+         * @class .asset-upload__progress
+         */
         &__progress {
           margin-right: $space-34;
 
+          /**
+           * Styles for the file loaded count in the progress section.
+           *
+           * @class .file-loaded
+           */
           .file-loaded {
             color: $color-font-base;
             font-size: $size-font-medium;
           }
 
+          /**
+           * Styles for the total size count in the progress section.
+           *
+           * @class .total-size
+           */
           .total-size {
             color: $color-font-base;
             font-size: $size-font-medium;
@@ -105,6 +196,11 @@
           }
         }
 
+        /**
+         * Styles for the cancel upload button in the actions section.
+         *
+         * @class .cancel-upload
+         */
         .cancel-upload {
           cursor: pointer;
           margin-top: calc(var(--space-2) + 0.063rem);
diff --git a/ui/src/components/Common/FileUpload/upload.tsx b/ui/src/components/Common/FileUpload/upload.tsx
index fcae15a4e..748f47799 100644
--- a/ui/src/components/Common/FileUpload/upload.tsx
+++ b/ui/src/components/Common/FileUpload/upload.tsx
@@ -19,6 +19,14 @@ import { returnFileSize, shortName } from '../../../utilities/functions';
 import { UPLOAD_FILE_URL } from '../../../utilities/constants';
 import './upload.scss';
 
+/**
+ * Renders a file component.
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.file - The file object.
+ * @param {Function} props.handleRemove - The function to handle file removal.
+ * @returns {JSX.Element} The file component.
+ */
 const File = ({ file, handleRemove }: any) => {
   return (
     <div className="asset-upload__file flex-v-center">
@@ -43,6 +51,12 @@ const File = ({ file, handleRemove }: any) => {
   );
 };
 
+/**
+ * Renders an error file component.
+ * @param file - The file object.
+ * @param handleRemove - The function to handle file removal.
+ * @returns The JSX element representing the error file component.
+ */
 const ErrorFile = ({ file, handleRemove }: any) => {
   return (
     <div className="asset-upload__file flex-v-center">
@@ -62,6 +76,11 @@ const ErrorFile = ({ file, handleRemove }: any) => {
   );
 };
 
+/**
+ * Renders a component for interrupting the file upload process.
+ * @param props - The component props.
+ * @returns The rendered InterruptUpload component.
+ */
 const InterruptUpload = (props: any) => {
   const handleProceed = () => {
     props.closeModal({ cancelUpload: true });
@@ -100,6 +119,9 @@ const InterruptUpload = (props: any) => {
   );
 };
 
+/**
+ * Component for handling file uploads.
+ */
 class Upload extends Component<any, any> {
   state = {
     fileList: this.props.fileList,
diff --git a/ui/src/components/Common/Modal/FilterModal/FilterModal.scss b/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
index a39ada6aa..65731c96f 100644
--- a/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
+++ b/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
@@ -1,5 +1,10 @@
 @import '../../../../scss/variables';
 
+/**
+ * Styles for the FilterModal component.
+ *
+ * @class Filter__modal
+ */
 .Filter__modal {
   width: $px-400;
   z-index: 40;
@@ -9,29 +14,78 @@
   border-radius: $px-10;
 }
 
+/**
+ * Styles for the checkbox input and tick in the FilterModal component.
+ * 
+ * The styles target the checkbox input element when it is checked, as well as the checkbox box element.
+ * The margin-top property sets the top margin of the checkbox tick.
+ * The font-size property sets the font size of the checkbox input.
+ */
 .Filter__modal .Checkbox input:checked ~ .Checkbox__tick,
 .Filter__modal .Checkbox .Checkbox__box {
   margin-top: $px-4;
   font-size: $px-16;
 }
 
+/**
+ * Styles for the FilterModal component.
+ *
+ * @class FilterModal
+ * @memberof components.Common.Modal
+ *
+ * @cssprop {string} cursor - Specifies the type of cursor to be displayed when hovering over the Filter__item.
+ * @cssprop {string} padding - Specifies the padding of the Filter__item.
+ */
 .Filter__modal .Filter__item {
   cursor: pointer;
   padding: $px-10 $px-20;
 }
 
+/**
+ * Styles for the hover effect on the FilterModal item.
+ *
+ * This selector targets the FilterModal item when it is being hovered over by the user.
+ * It sets the background color to a lightened version of the base white color.
+ */
 .Filter__modal .Filter__item:hover {
   background-color: $color-base-white-10;
 }
 
+/**
+ * Applies a specific color to the WordWrapper element when the Filter__item is being hovered over.
+ *
+ * @selector .Filter__modal .Filter__item:hover .WordWrapper
+ * @property color - The color to apply to the WordWrapper element.
+ * @value $color-brand-primary-base - The base color of the brand primary.
+ */
 .Filter__modal .Filter__item:hover .WordWrapper {
   color: $color-brand-primary-base;
 }
 
+/**
+ * Styles for the hover effect on the Checkbox__box element within the Filter__item element
+ * in the Filter__modal component.
+ *
+ * When the Filter__item element is hovered over, the Checkbox__box element will have a border
+ * with a thickness of 1.5 pixels and a color of $color-brand-primary-base.
+ */
 .Filter__modal .Filter__item:hover .Checkbox__box {
   border: 1.5px solid $color-brand-primary-base;
 }
 
+/**
+ * Styles for the header of the filter modal.
+ *
+ * @class .Filter__modal-header
+ * @memberof components.Common.Modal.FilterModal
+ *
+ * @property {string} background - The background color of the header.
+ * @property {string} border-bottom - The bottom border of the header.
+ * @property {string} font-size - The font size of the header.
+ * @property {string} height - The height of the header.
+ * @property {string} justify-content - The alignment of the content within the header.
+ * @property {string} padding - The padding of the header.
+ */
 .Filter__modal-header {
   background: $color-base-white-10;
   border-bottom: 1px solid $color-brand-secondary-lightest;
@@ -41,6 +95,20 @@
   padding: $px-14 $px-16;
 }
 
+/**
+ * Styles for the header container of the filter modal.
+ *
+ * @class .Filter__modal-header .Filter__modal-header-container
+ * @memberOf components.Common.Modal.FilterModal.FilterModal.scss
+ *
+ * @property {string} align-items - Specifies the alignment of the items inside the container.
+ * @property {string} display - Specifies the display behavior of the container.
+ * @property {string} color - Specifies the color of the text inside the container.
+ * @property {string} font-size - Specifies the font size of the text inside the container.
+ * @property {string} height - Specifies the height of the container.
+ * @property {string} line-height - Specifies the line height of the text inside the container.
+ * @property {string} font-weight - Specifies the font weight of the text inside the container.
+ */
 .Filter__modal-header .Filter__modal-header-container {
   align-items: center;
   display: flex;
@@ -53,10 +121,19 @@
   font-weight: 600;
 }
 
+/**
+ * Styles for the title element in the header of the filter modal.
+ */
 .Filter__modal-header .Filter__modal-header-container .Filter__modal-header-title {
   font-weight: 600;
 }
 
+/**
+ * Styles for the counter element in the filter modal header.
+ *
+ * This selector targets the counter element within the header container of the filter modal.
+ * It applies styles such as border, border radius, color, font size, font weight, etc.
+ */
 .Filter__modal-header .Filter__modal-header-container .Filter__modal-header-counter {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 1rem;
@@ -74,30 +151,61 @@
   width: fit-content;
 }
 
+/**
+ * Styles for the search input inside the FilterModal component.
+ *
+ * @class .Filter__searchbox .Search--primary .Search__input
+ * @memberof components.Common.Modal.FilterModal
+ *
+ * @cssprop {number} height - The height of the search input in pixels.
+ */
 .Filter__searchbox .Search--primary .Search__input {
   height: $px-35;
 }
 
+/**
+ * Styles for the FilterModal component's modal content.
+ */
 .Filter__modal-content {
   overflow: scroll;
   max-height: $px-250;
   overflow-x: hidden;
 }
 
+/**
+ * Styles for the Filter__icon class.
+ *
+ * This class is used to style the filter icon in the modal.
+ * It sets the cursor to pointer, adds padding, and sets the border-radius to 10%.
+ */
 .Filter__icon {
   cursor: pointer !important;
   padding: $px-5;
   border-radius: 10%;
 }
 
+/**
+ * Styles for the hover effect on the Filter__icon element.
+ */
 .Filter__icon:hover {
   background-color: rgba(108, 92, 231, 0.1);
 }
 
+/**
+ * Sets the background color for the filter icon.
+ *
+ * @class .Filter__icon_bg_color
+ * @memberof components.Common.Modal.FilterModal
+ *
+ * @cssprop {Color} background-color - The background color of the filter icon.
+ */
 .Filter__icon_bg_color {
   background-color: rgba(108, 92, 231, 0.1);
 }
 
+/**
+ * Styles for the cancel button in the filter modal header.
+ */
 .Filter__modal-header-cancel {
   border-radius: 25%;
   cursor: pointer;
@@ -105,10 +213,24 @@
   width: $px-24;
 }
 
+/**
+ * Styles for the hover state of the cancel button in the filter modal header.
+ *
+ * @class .Filter__modal-header-cancel:hover
+ * @memberof components.Common.Modal.FilterModal.FilterModal.scss
+ *
+ * @cssprop {Color} background-color - The background color of the cancel button when hovered.
+ */
 .Filter__modal-header-cancel:hover {
   background-color: $color-brand-secondary-lightest;
 }
 
+/**
+ * Styles for the footer of the filter modal.
+ *
+ * @class .Filter__modal-footer
+ * @memberof components.Common.Modal.FilterModal
+ */
 .Filter__modal-footer {
   display: flex;
   border-top: 1px solid $color-brand-secondary-lightest;
@@ -117,6 +239,13 @@
   padding: $px-20;
 }
 
+/**
+ * Styles for the ".Filter__no-found" class.
+ *
+ * This class is used to style the text when no results are found in the filter modal.
+ * It sets the text alignment to center, vertical alignment to middle, line height to $px-50,
+ * font weight to 600, and font size to $px-14.
+ */
 .Filter__no-found {
   text-align: center;
   vertical-align: middle;
diff --git a/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx b/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
index 56b3e5d20..403f30cd6 100644
--- a/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
+++ b/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
@@ -5,6 +5,9 @@ import WordWrapper from '../../WordWrapper/WordWrapper';
 import { IFilterStatusType, IFilterType } from './filterModal.interface';
 import './FilterModal.scss';
 
+/**
+ * Props for the FilterModal component.
+ */
 type Props = {
   title: string;
   list: IFilterType[];
diff --git a/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts b/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
index 311d0aab3..c36a49a87 100644
--- a/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
+++ b/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
@@ -4,6 +4,10 @@ export interface IFilterType {
   isChecked: boolean;
 }
 
+/**
+ * Represents the interface for the filter status type.
+ * It is a key-value pair where the key is a string and the value is a boolean.
+ */
 export interface IFilterStatusType {
   [key: string]: boolean;
 }
diff --git a/ui/src/components/Common/NotificationModal/index.tsx b/ui/src/components/Common/NotificationModal/index.tsx
index 8467cd796..382155925 100644
--- a/ui/src/components/Common/NotificationModal/index.tsx
+++ b/ui/src/components/Common/NotificationModal/index.tsx
@@ -14,26 +14,38 @@ interface Props {
     isopen: any;
 }
 
-const NotificationModal = (props:Props) => {
-    return(
-        <>
-        <ModalHeader title={'Save Changes'} closeModal={()=>{props?.closeModal(),props.isopen(false)}} className="text-capitalize" />
-        <ModalBody>
-          <div className='modal-data'>             
-            <Paragraph tagName="p" text={'You have unsaved changes on this page. Do you want to go back without saving?'} variant={"p1"}/>
-          </div>
-        </ModalBody>
-        <ModalFooter>
+/**
+ * Renders a notification modal component.
+ *
+ * @param props - The component props.
+ * @returns The rendered notification modal component.
+ */
+const NotificationModal = (props: Props) => {
+  return (
+    <>
+      <ModalHeader
+        title={'Save Changes'}
+        closeModal={() => {
+          props?.closeModal();
+          props.isopen(false);
+        }}
+        className="text-capitalize"
+      />
+      <ModalBody>
+        <div className='modal-data'>
+          <Paragraph tagName="p" text={'You have unsaved changes on this page. Do you want to go back without saving?'} variant={"p1"} />
+        </div>
+      </ModalBody>
+      <ModalFooter>
         <ButtonGroup>
-            <Button buttonType="light"version={"v2"}  onClick={() => {props.closeModal(), props.isopen(false)}}> 
-               Cancel
-           </Button>
-            <Button version={"v2"} onClick={()=> {props?.goBack(), props.closeModal()}}>Yes, go back</Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </>
-    )
-
+          <Button buttonType="light" version={"v2"} onClick={() => { props.closeModal(); props.isopen(false) }}>
+            Cancel
+          </Button>
+          <Button version={"v2"} onClick={() => { props?.goBack(); props.closeModal() }}>Yes, go back</Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
 }
 
 export default NotificationModal;
\ No newline at end of file
diff --git a/ui/src/components/Common/ProgressBar/progressBar.scss b/ui/src/components/Common/ProgressBar/progressBar.scss
index fc0310e27..2e304456f 100644
--- a/ui/src/components/Common/ProgressBar/progressBar.scss
+++ b/ui/src/components/Common/ProgressBar/progressBar.scss
@@ -1,5 +1,14 @@
 @import '../../../scss//variables';
 
+/**
+ * Styles for the ProgressBar component.
+ *
+ * The ProgressBar component displays a progress bar with a customizable bar and circle.
+ *
+ * @class ProgressBar
+ * @memberof components.Common
+ *
+ */
 .ProgressBar {
 	border-radius: $space-4;
 	
diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss
index 4c6377a39..5d7787582 100644
--- a/ui/src/components/Common/Settings/Settings.scss
+++ b/ui/src/components/Common/Settings/Settings.scss
@@ -34,13 +34,24 @@
   }
 }
 
+/**
+ * Styles for the Settings component.
+ */
+
 .Field {
   margin-bottom: $px-40;
 }
+
+/**
+ * Styles for hiding the left sidebar in the PageLayout component.
+ */
 .PageLayout__leftSidebar--hide {
   display: none;
 }
 
+/**
+ * Styles for the left sidebar.
+ */
 .leftsidebar {
   margin-top: 0 !important;
 }
diff --git a/ui/src/components/Common/Settings/index.tsx b/ui/src/components/Common/Settings/index.tsx
index 7103fb796..4f9d0d982 100644
--- a/ui/src/components/Common/Settings/index.tsx
+++ b/ui/src/components/Common/Settings/index.tsx
@@ -34,6 +34,10 @@ import DeleteProjectModal from '../DeleteProjectModal';
 import './Settings.scss';
 import { RootState } from '../../../store';
 
+/**
+ * Renders the Settings component.
+ * This component is responsible for displaying and updating project settings.
+ */
 const Settings = () => {
   const params: Params<string> = useParams();
   
diff --git a/ui/src/components/Common/Settings/setting.interface.ts b/ui/src/components/Common/Settings/setting.interface.ts
index f0abcc5e4..183b80b84 100644
--- a/ui/src/components/Common/Settings/setting.interface.ts
+++ b/ui/src/components/Common/Settings/setting.interface.ts
@@ -1,3 +1,6 @@
+/**
+ * Represents a project.
+ */
 interface IProject {
   title: string;
   name: string;
@@ -7,6 +10,9 @@ interface IProject {
   save_project: CTA;
   email: string;
 }
+/**
+ * Represents a Call to Action (CTA) object.
+ */
 interface CTA {
   open_in_new_tab: boolean;
   theme: string;
@@ -18,6 +24,9 @@ interface IExecutionLogs {
   title: string;
 }
 
+/**
+ * Represents a setting object.
+ */
 export interface Setting {
   project?: IProject;
   execution_logs?: IExecutionLogs;
diff --git a/ui/src/components/Common/WordWrapper/WordWrapper.tsx b/ui/src/components/Common/WordWrapper/WordWrapper.tsx
index f9ca62381..9b86a8e31 100644
--- a/ui/src/components/Common/WordWrapper/WordWrapper.tsx
+++ b/ui/src/components/Common/WordWrapper/WordWrapper.tsx
@@ -10,6 +10,12 @@ type Props = {
   position?: string;
 };
 
+/**
+ * Renders a component that wraps text and provides a tooltip if the text exceeds a maximum length.
+ *
+ * @param {Props} props - The component props.
+ * @returns {JSX.Element} The rendered WordWrapper component.
+ */
 function WordWrapper(props: Props) {
   const { maxLength, tooltipcontent, position = 'right' } = props;
   const text = props.text || '';
diff --git a/ui/src/components/Common/private-route.tsx b/ui/src/components/Common/private-route.tsx
index 3ba2ce342..b7fa4da40 100644
--- a/ui/src/components/Common/private-route.tsx
+++ b/ui/src/components/Common/private-route.tsx
@@ -2,11 +2,22 @@ import { FC, ReactNode } from 'react';
 import { Navigate, Outlet, useLocation } from 'react-router';
 import { getDataFromLocalStorage } from '../../utilities/functions';
 
+/**
+ * Props for the PrivateRoute component.
+ */
 type IProps = {
   children?: ReactNode;
   redirectTo: string;
 };
 
+/**
+ * Renders a private route component that checks if the user is authenticated.
+ * If the user is authenticated, it renders the child components.
+ * If the user is not authenticated, it redirects to the specified route.
+ *
+ * @param redirectTo - The route to redirect to if the user is not authenticated.
+ * @returns The private route component.
+ */
 const PrivateRoute: FC<IProps> = ({ redirectTo }: IProps) => {
   const isAuthenticated = !!getDataFromLocalStorage('app_token');
 
diff --git a/ui/src/components/Common/router.tsx b/ui/src/components/Common/router.tsx
index 6df9932c2..0fffa4a2f 100644
--- a/ui/src/components/Common/router.tsx
+++ b/ui/src/components/Common/router.tsx
@@ -19,6 +19,10 @@ const MigrationLazyLoad = lazy(() => import('../../pages/Migration'));
 const ProjectsLazyLoad = lazy(() => import('../../pages/Projects'));
 const SettingsLazyLoad = lazy(() => import ('../Common/Settings'))
 
+/**
+ * Renders the application router.
+ * @returns The application router component.
+ */
 const AppRouter = () => {
   return (
     <Routes>