diff --git a/frontend/Site/src/app/components/action/ActionsConfig.ts b/frontend/Site/src/app/components/action/ActionsConfig.ts
index c90956d8..8e4c0e77 100644
--- a/frontend/Site/src/app/components/action/ActionsConfig.ts
+++ b/frontend/Site/src/app/components/action/ActionsConfig.ts
@@ -1,17 +1,18 @@
+import { SiteDetailsMode } from "../../features/details/dto/SiteDetailsMode";
 import { UserMode } from "../../helpers/requests/userMode";
 import { DropdownItem } from "./IActions";
 
 export const ActionItems: DropdownItem[] = [
     {
         label:'Edit Mode',
-        value: UserMode.EditMode
+        value: SiteDetailsMode.EditMode
     },
     {
         label:'SR Mode',
-        value: UserMode.SrMode
+        value: SiteDetailsMode.SRMode
     },
     {
         label:'Delete',
-        value: UserMode.DeleteMode
+        value: SiteDetailsMode.ViewOnlyMode
     },
 ]
\ No newline at end of file
diff --git a/frontend/Site/src/app/components/action/IActions.ts b/frontend/Site/src/app/components/action/IActions.ts
index 30cc2fe3..697f5d7d 100644
--- a/frontend/Site/src/app/components/action/IActions.ts
+++ b/frontend/Site/src/app/components/action/IActions.ts
@@ -1,8 +1,9 @@
-import { UserMode } from "../../helpers/requests/userMode";
+import { SiteDetailsMode } from "../../features/details/dto/SiteDetailsMode";
+
 
 export interface DropdownItem {
     label: string;
-    value: UserMode;
+    value: SiteDetailsMode;
 }
 
 export interface IActions {
diff --git a/frontend/Site/src/app/components/input-controls/InputControls.tsx b/frontend/Site/src/app/components/input-controls/InputControls.tsx
index 45a61ce8..b216e6a8 100644
--- a/frontend/Site/src/app/components/input-controls/InputControls.tsx
+++ b/frontend/Site/src/app/components/input-controls/InputControls.tsx
@@ -1,345 +1,598 @@
 import { useState } from "react";
 import { FormFieldType, IFormField } from "./IFormField";
-import avatar from '../../images/avatar.png';
+import avatar from "../../images/avatar.png";
 import { formatDateRange } from "../../helpers/utility";
-import { DateRangePicker } from 'rsuite';
-import { CalendarIcon } from '../common/icon';
+import { DateRangePicker } from "rsuite";
+import { CalendarIcon } from "../common/icon";
 import { Link as RouterLink } from "react-router-dom";
 
 interface InputProps extends IFormField {
-    children?: InputProps[];
-    isEditing?: boolean;
-    srMode?: boolean;
-    onChange: (value: any) => void;    
+  children?: InputProps[];
+  isEditing?: boolean;
+  srMode?: boolean;
+  onChange: (value: any) => void;
 }
 
-export const Link:React.FC<InputProps> = ({label, placeholder, type, value, validation, allowNumbersOnly, isEditing, customLabelCss, customInputTextCss, customEditLabelCss, customEditInputTextCss, onChange, tableMode, href})=> {
-    return (  
+export const Link: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  type,
+  value,
+  validation,
+  allowNumbersOnly,
+  isEditing,
+  customLabelCss,
+  customInputTextCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  onChange,
+  tableMode,
+  href,
+}) => {
+  return (
     <td className="table-border-light content-text">
-    <RouterLink to={href+value} className={`${customInputTextCss ?? ''}`} aria-label={`${label + " " + value}`}>
-      {value}
-    </RouterLink>
-  </td>)
-}
- 
-
-export const Label:React.FC<InputProps> = ({label, placeholder, type, value, validation, allowNumbersOnly, isEditing, customLabelCss, customInputTextCss, customEditLabelCss, customEditInputTextCss, onChange, tableMode})=> {
-    return ( <td className="table-border-light content-text"> 
-         <p className={`${customInputTextCss ?? ''}`}>{value}</p>
- </td>)
-}
- 
-export const TextInput: React.FC<InputProps> =  ({label, placeholder, type, value, validation, allowNumbersOnly, isEditing, srMode, customLabelCss, customInputTextCss, customEditLabelCss, customEditInputTextCss, onChange, tableMode})=> {
+      <RouterLink
+        to={href + value}
+        className={`${customInputTextCss ?? ""}`}
+        aria-label={`${label + " " + value}`}
+      >
+        View
+      </RouterLink>
+    </td>
+  );
+};
 
-    const [error, setError] = useState<string | null>(null);
+export const Label: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  type,
+  value,
+  validation,
+  allowNumbersOnly,
+  isEditing,
+  customLabelCss,
+  customInputTextCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  onChange,
+  tableMode,
+}) => {
+  return (
+    <td className="table-border-light content-text">
+      <p className={`${customInputTextCss ?? ""}`}>{value}</p>
+    </td>
+  );
+};
 
-    const validateInput = (inputValue: string) => {
-        if(validation)
-        {
-            if(validation.pattern && !validation.pattern.test(inputValue))
-            {
-                setError(validation.customMessage || 'Invalid input');
-                return false;
-            }
-        }
+export const TextInput: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  type,
+  value,
+  validation,
+  allowNumbersOnly,
+  isEditing,
+  srMode,
+  customLabelCss,
+  customInputTextCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  onChange,
+  tableMode,
+}) => {
+  const [error, setError] = useState<string | null>(null);
 
-        setError(null);
-        return true;
+  const validateInput = (inputValue: string) => {
+    if (validation) {
+      if (validation.pattern && !validation.pattern.test(inputValue)) {
+        setError(validation.customMessage || "Invalid input");
+        return false;
+      }
     }
 
-    const handleTextInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
-        const inputValue = e.target.value;
-        if(allowNumbersOnly)
-        {
-                if(validateInput(inputValue))
-                {
-                    onChange(inputValue); // Update parent component state only if validation passes
-                }
-        }
-        else
-        {
-            onChange(inputValue); 
-        }
+    setError(null);
+    return true;
+  };
+
+  const handleTextInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    if (allowNumbersOnly) {
+      if (validateInput(inputValue)) {
+        onChange(inputValue); // Update parent component state only if validation passes
+      }
+    } else {
+      onChange(inputValue);
     }
+  };
 
-    const handleCheckBoxChange = (isChecked: boolean) => {
-        onChange(isChecked); 
-    };
+  const handleCheckBoxChange = (isChecked: boolean) => {
+    onChange(isChecked);
+  };
 
-    // Replace any spaces in the label with underscores to create a valid id
-    const inputTxtId = label.replace(/\s+/g, '_');
+  // Replace any spaces in the label with underscores to create a valid id
+  const inputTxtId = label.replace(/\s+/g, "_");
 
-    console.log("tableMode",tableMode)
-    if(tableMode)
-        {
-            return (      
-                <td className="table-border-light content-text">                   
-                   {  isEditing ? 
-                        <input
-                            type={type}
-                            id={inputTxtId}
-                            className={`form-control custom-input ${ customEditInputTextCss ?? 'custom-input-text'}  ${error && 'error'}`}
-                            placeholder={placeholder}
-                            value={value ?? ''}
-                            onChange={handleTextInputChange}
-                            aria-label={label} // Accessibility
-                            required = {error ? true : false}
-                        />
-                        :
-                        <p className={`${customInputTextCss ?? ''}`}>{value}</p>
-                    }
-                    {error && <div className="text-danger p-1 small">{error}</div>}
-                </td>
-            );
-        }
-        else
-        {
-            return (      
-                <div className="mb-3">
-                    {
-                     !tableMode && 
-                        <>
-                            { 
-                                srMode &&
-                                <CheckBoxInput type={FormFieldType.Checkbox} label={inputTxtId} isLabel = {false} onChange={handleCheckBoxChange}/>
-                            }
-                            <label htmlFor={inputTxtId} className={`${!isEditing ? customLabelCss ?? '' : `form-label ${ customEditLabelCss ?? 'custom-label'}`}`}>
-                                {label}
-                            </label>
-                        </>
-                    }
-                    {  
-                        isEditing ? 
-                            <input
-                                type={type}
-                                id={inputTxtId}
-                                className={`form-control custom-input ${ customEditInputTextCss ?? 'custom-input-text'}  ${error && 'error'}`}
-                                placeholder={placeholder}
-                                value={value ?? ''}
-                                onChange={handleTextInputChange}
-                                aria-label={label} // Accessibility
-                                required = {error ? true : false}
-                            />
-                        : 
-                        <p className={`${customInputTextCss ?? ''}`}>{value}</p>
-                    }
-                    {error && <div className="text-danger p-1 small">{error}</div>}
-                </div>
-            );
-        }
-    
-    
-}
+  console.log("tableMode", tableMode);
+  if (tableMode) {
+    return (
+      <td className="table-border-light content-text">
+        {isEditing ? (
+          <input
+            type={type}
+            id={inputTxtId}
+            className={`form-control custom-input ${
+              customEditInputTextCss ?? "custom-input-text"
+            }  ${error && "error"}`}
+            placeholder={placeholder}
+            value={value ?? ""}
+            onChange={handleTextInputChange}
+            aria-label={label} // Accessibility
+            required={error ? true : false}
+          />
+        ) : (
+          <p className={`${customInputTextCss ?? ""}`}>{value}</p>
+        )}
+        {error && <div className="text-danger p-1 small">{error}</div>}
+      </td>
+    );
+  } else {
+    return (
+      <div className="mb-3">
+        {!tableMode && (
+          <>
+            {srMode && (
+              <CheckBoxInput
+                type={FormFieldType.Checkbox}
+                label={inputTxtId}
+                isLabel={false}
+                onChange={handleCheckBoxChange}
+              />
+            )}
+            <label
+              htmlFor={inputTxtId}
+              className={`${
+                !isEditing
+                  ? customLabelCss ?? ""
+                  : `form-label ${customEditLabelCss ?? "custom-label"}`
+              }`}
+            >
+              {label}
+            </label>
+          </>
+        )}
+        {isEditing ? (
+          <input
+            type={type}
+            id={inputTxtId}
+            className={`form-control custom-input ${
+              customEditInputTextCss ?? "custom-input-text"
+            }  ${error && "error"}`}
+            placeholder={placeholder}
+            value={value ?? ""}
+            onChange={handleTextInputChange}
+            aria-label={label} // Accessibility
+            required={error ? true : false}
+          />
+        ) : (
+          <p className={`${customInputTextCss ?? ""}`}>{value}</p>
+        )}
+        {error && <div className="text-danger p-1 small">{error}</div>}
+      </div>
+    );
+  }
+};
+
+export const Dropdown: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  options,
+  value,
+  isEditing,
+  srMode,
+  isImage,
+  customLabelCss,
+  customInputTextCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  onChange,
+  tableMode,
+}) => {
+  // Replace any spaces in the label with underscores to create a valid id
+  const drdownId = label.replace(/\s+/g, "_");
+  const [selected, setSelected] = useState<boolean>(false);
+  const imgUrl = avatar;
 
-export const Dropdown: React.FC<InputProps> = ({ label, placeholder, options, value, isEditing, srMode, isImage, customLabelCss, customInputTextCss, customEditLabelCss, customEditInputTextCss, onChange }) => {
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedOption = event.target.value.trim();
+    setSelected(selectedOption !== "");
+    onChange(selectedOption);
+  };
 
-    // Replace any spaces in the label with underscores to create a valid id
-    const drdownId = label.replace(/\s+/g, '_');
-    const [selected, setSelected] = useState<boolean>(false);
-    const imgUrl = avatar;
+  const handleCheckBoxChange = (isChecked: boolean) => {
+    onChange(isChecked);
+  };
 
-    const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const selectedOption = event.target.value.trim();
-        setSelected(selectedOption !== '');
-        onChange(selectedOption);
-    };
+  const isFirstOptionGrey = value === "";
+  if (tableMode) {
+    return (
+        <td className="table-border-light content-text">          
+  
+          {/* Create a select element with the form-select class */}
+          {isEditing ? (
+            <select
+              id={drdownId}
+              className={`form-select custom-input custom-select ${
+                customEditInputTextCss ?? "custom-input-text"
+              } ${selected ? "custom-option" : ""} ${
+                isFirstOptionGrey
+                  ? "custom-disabled-option"
+                  : "custom-primary-option"
+              }`}
+              value={value.trim() ?? ""}
+              onChange={handleSelectChange}
+              aria-label={label}
+              placeholder={placeholder}
+            >
+              <option value="" className="custom-disabled-option">
+                {placeholder}
+              </option>
+              {options?.map((option, index) => (
+                <option
+                  key={index}
+                  value={option.key}
+                  className="custom-option custom-primary-option"
+                >
+                  {option.value}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <p className={`${customInputTextCss ?? ""}`}>
+              {options?.find((opt) => opt.key === value)?.value}
+            </p>
+          )}
+        </td>
+      );
 
-    const handleCheckBoxChange = (isChecked: boolean) => {
-        onChange(isChecked); 
-    };
+  } else {
+    return (
+      <div className="mb-3">
+        {srMode && (
+          <CheckBoxInput
+            type={FormFieldType.Checkbox}
+            label={drdownId}
+            isLabel={false}
+            onChange={handleCheckBoxChange}
+          />
+        )}
+        {/* Create a label for the dropdown using the form-label class */}
 
-    const isFirstOptionGrey = value === '';
-    return(
-        <div className="mb-3">
-            { 
-                srMode &&
-                <CheckBoxInput type={FormFieldType.Checkbox} label={drdownId} isLabel = {false} onChange={handleCheckBoxChange}/>
-            }
-            {/* Create a label for the dropdown using the form-label class */}
-            <label htmlFor={drdownId} className={`${!isEditing ? customLabelCss ?? '' :  `form-label ${ customEditLabelCss ?? 'custom-label'}`}`}>
-                {label}
-            </label>
+        <label
+          htmlFor={drdownId}
+          className={`${
+            !isEditing
+              ? customLabelCss ?? ""
+              : `form-label ${customEditLabelCss ?? "custom-label"}`
+          }`}
+        >
+          {label}
+        </label>
 
-            {/* Create a select element with the form-select class */}
-            { isEditing ?
-                <select
-                    id={drdownId}
-                    className={`form-select custom-input custom-select ${ customEditInputTextCss ?? 'custom-input-text'} ${selected ? 'custom-option' : ''} ${isFirstOptionGrey? 'custom-disabled-option' : 'custom-primary-option'}`}
-                    value={value.trim() ?? ''}
-                    onChange={handleSelectChange}
-                    aria-label={label}
-                    placeholder={placeholder}
-                >
-                    <option value="" className="custom-disabled-option">{placeholder}</option>
-                    {options?.map((option, index) => (
-                        <option key={index} value={option.key} className="custom-option custom-primary-option">
-                            {option.value}
-                        </option>
-                    ))}
-                </select>
-                :
-                isImage ?
-                <div className="d-flex align-items-center gap-2">
-                    <img src={options?.find(opt => opt.key === value)?.imageUrl ?? imgUrl} alt="User image." className="custom-form-image"  aria-hidden="true" role="img" aria-label="User image"/>
-                    <p className={`m-0 ${customInputTextCss ?? ''}`}>{options?.find(opt => opt.key === value)?.value}</p>
-                </div>
-                :
-                    <p className={`${customInputTextCss ?? ''}`}>{options?.find(opt => opt.key === value)?.value}</p>
-            }
-        </div>
+        {/* Create a select element with the form-select class */}
+        {isEditing ? (
+          <select
+            id={drdownId}
+            className={`form-select custom-input custom-select ${
+              customEditInputTextCss ?? "custom-input-text"
+            } ${selected ? "custom-option" : ""} ${
+              isFirstOptionGrey
+                ? "custom-disabled-option"
+                : "custom-primary-option"
+            }`}
+            value={value.trim() ?? ""}
+            onChange={handleSelectChange}
+            aria-label={label}
+            placeholder={placeholder}
+          >
+            <option value="" className="custom-disabled-option">
+              {placeholder}
+            </option>
+            {options?.map((option, index) => (
+              <option
+                key={index}
+                value={option.key}
+                className="custom-option custom-primary-option"
+              >
+                {option.value}
+              </option>
+            ))}
+          </select>
+        ) : isImage ? (
+          <div className="d-flex align-items-center gap-2">
+            <img
+              src={
+                options?.find((opt) => opt.key === value)?.imageUrl ?? imgUrl
+              }
+              alt="User image."
+              className="custom-form-image"
+              aria-hidden="true"
+              role="img"
+              aria-label="User image"
+            />
+            <p className={`m-0 ${customInputTextCss ?? ""}`}>
+              {options?.find((opt) => opt.key === value)?.value}
+            </p>
+          </div>
+        ) : (
+          <p className={`${customInputTextCss ?? ""}`}>
+            {options?.find((opt) => opt.key === value)?.value}
+          </p>
+        )}
+      </div>
     );
-}
+  }
+};
 
-export const GroupInput: React.FC<InputProps> = ({label, children, isEditing, srMode, customLabelCss, customInputTextCss, customEditLabelCss, customEditInputTextCss, onChange}) =>{
-    const [error, setError] = useState<string | null>(null);
-    let currentConcatenatedValue;
+export const GroupInput: React.FC<InputProps> = ({
+  label,
+  children,
+  isEditing,
+  srMode,
+  customLabelCss,
+  customInputTextCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  onChange,
+}) => {
+  const [error, setError] = useState<string | null>(null);
+  let currentConcatenatedValue;
 
-    if(!isEditing)
-    {
-        currentConcatenatedValue = children?.reduce((accumulator, currentValue, index) => {
-            if(currentValue.value)
-            {
-                accumulator = accumulator +  currentValue.value + currentValue.suffix;
-            }
-            return accumulator;
-        }, '');
-    }
-    const validateInput = (inputValue: string, validation?: RegExp, customMessage?: string) => {
-        if(validation)
-        {
-            if(validation && !validation.test(inputValue))
-            {
-                setError(customMessage || 'Invalid input');
-                return false;
-            }
+  if (!isEditing) {
+    currentConcatenatedValue = children?.reduce(
+      (accumulator, currentValue, index) => {
+        if (currentValue.value) {
+          accumulator = accumulator + currentValue.value + currentValue.suffix;
         }
-
-        setError(null);
-        return true;
+        return accumulator;
+      },
+      ""
+    );
+  }
+  const validateInput = (
+    inputValue: string,
+    validation?: RegExp,
+    customMessage?: string
+  ) => {
+    if (validation) {
+      if (validation && !validation.test(inputValue)) {
+        setError(customMessage || "Invalid input");
+        return false;
+      }
     }
 
-    const handleTextInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
-        child: InputProps
-    ) => {
-        const inputValue = e.target.value.trim();
-        if (child.allowNumbersOnly) {
-            if (
-                validateInput(
-                    inputValue,
-                    child.validation?.pattern,
-                    child.validation?.customMessage
-                )
-            ) {
-                child.onChange(inputValue); // Update parent component state only if validation passes
-            }
-        } else {
-            child.onChange(inputValue);
-        }
-    };
+    setError(null);
+    return true;
+  };
+
+  const handleTextInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    child: InputProps
+  ) => {
+    const inputValue = e.target.value.trim();
+    if (child.allowNumbersOnly) {
+      if (
+        validateInput(
+          inputValue,
+          child.validation?.pattern,
+          child.validation?.customMessage
+        )
+      ) {
+        child.onChange(inputValue); // Update parent component state only if validation passes
+      }
+    } else {
+      child.onChange(inputValue);
+    }
+  };
 
-    const handleCheckBoxChange = (isChecked: boolean) => {
-        onChange(isChecked); 
-    };
+  const handleCheckBoxChange = (isChecked: boolean) => {
+    onChange(isChecked);
+  };
 
-    return(
-        <div className="mb-3"> {/* Container for the group input */}
-            { 
-                srMode &&
-                <CheckBoxInput type={FormFieldType.Checkbox} label={''} isLabel = {false} onChange={handleCheckBoxChange}/>
-            }
-            {/* Label for the group input */}
-            <label className={`${!isEditing ? customLabelCss ?? '' :  `form-label ${ customEditLabelCss ?? 'custom-label'}`}`}>{label}</label>
-            
-            {/* Bootstrap row for the group of child fields */}
-            <div className="row">
-                { isEditing ? 
-                    children?.map((child, index) => (
-                        <div key={index} className="col">
-                            {/* Render each child field as an input element */}
-                                <input
-                                type={child.type}
-                                className={`form-control custom-input ${ customEditInputTextCss ?? 'custom-input-text'} ${error && 'error'}`}
-                                placeholder={child.placeholder}
-                                value={child.value ?? ''}
-                                onChange={(e) => handleTextInputChange(e, child)}
-                                aria-label={child.label} // Accessibility
-                                />
-                            
-                        </div>
-                    ))
-                :
-                <span className={`${customInputTextCss ?? ''}`}>{currentConcatenatedValue != undefined ? currentConcatenatedValue : ''}</span>
-                }
-                {error && <div className="text-danger p-1 mx-2 small">{error}</div>}
+  return (
+    <div className="mb-3">
+      {" "}
+      {/* Container for the group input */}
+      {srMode && (
+        <CheckBoxInput
+          type={FormFieldType.Checkbox}
+          label={""}
+          isLabel={false}
+          onChange={handleCheckBoxChange}
+        />
+      )}
+      {/* Label for the group input */}
+      <label
+        className={`${
+          !isEditing
+            ? customLabelCss ?? ""
+            : `form-label ${customEditLabelCss ?? "custom-label"}`
+        }`}
+      >
+        {label}
+      </label>
+      {/* Bootstrap row for the group of child fields */}
+      <div className="row">
+        {isEditing ? (
+          children?.map((child, index) => (
+            <div key={index} className="col">
+              {/* Render each child field as an input element */}
+              <input
+                type={child.type}
+                className={`form-control custom-input ${
+                  customEditInputTextCss ?? "custom-input-text"
+                } ${error && "error"}`}
+                placeholder={child.placeholder}
+                value={child.value ?? ""}
+                onChange={(e) => handleTextInputChange(e, child)}
+                aria-label={child.label} // Accessibility
+              />
             </div>
-        </div>
-    );
-}
+          ))
+        ) : (
+          <span className={`${customInputTextCss ?? ""}`}>
+            {currentConcatenatedValue != undefined
+              ? currentConcatenatedValue
+              : ""}
+          </span>
+        )}
+        {error && <div className="text-danger p-1 mx-2 small">{error}</div>}
+      </div>
+    </div>
+  );
+};
 
-export const DateInput: React.FC<InputProps> = ({ label, placeholder, value, isEditing, srMode, customLabelCss, customInputTextCss, customEditLabelCss, customEditInputTextCss, onChange }) => {
-    let dateRangeValue;
-    if(value.length > 0)
-    {
-        dateRangeValue = formatDateRange(value);
-    }
+export const DateInput: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  value,
+  isEditing,
+  srMode,
+  customLabelCss,
+  customInputTextCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  onChange,
+}) => {
+  let dateRangeValue;
+  if (value.length > 0) {
+    dateRangeValue = formatDateRange(value);
+  }
 
-    const handleCheckBoxChange = (isChecked: boolean) => {
-        onChange(isChecked); 
-    };
-    // Replace any spaces in the label with underscores to create a valid id
-    const dateRangeId = label.replace(/\s+/g, '_');
-    return (
+  const handleCheckBoxChange = (isChecked: boolean) => {
+    onChange(isChecked);
+  };
+  // Replace any spaces in the label with underscores to create a valid id
+  const dateRangeId = label.replace(/\s+/g, "_");
+  return (
     <div className="mb-3">
-         { 
-            srMode &&
-            <CheckBoxInput type={FormFieldType.Checkbox} label={dateRangeId} isLabel = {false} onChange={handleCheckBoxChange}/>
-        }
-        <label htmlFor={dateRangeId} className={`${!isEditing ? customLabelCss ?? '' :  `form-label ${ customEditLabelCss ?? 'custom-label'}`}`}>{label}</label>
-        { isEditing ? 
-            <DateRangePicker 
-            id={dateRangeId}
-            showOneCalendar
-            ranges={[]}
-            aria-label={label}
-            className="custom-date-range"
-            placeholder={placeholder}
-            format="MM/dd/yy" character=' - '
-            caretAs={CalendarIcon}
-            value={value ?? []}
-            onChange={(value) => onChange(value)}
-            />
-            :
-            <p className={`${customInputTextCss ?? ''}`}>{dateRangeValue ?? ''}</p>
-        }
-        
+      {srMode && (
+        <CheckBoxInput
+          type={FormFieldType.Checkbox}
+          label={dateRangeId}
+          isLabel={false}
+          onChange={handleCheckBoxChange}
+        />
+      )}
+      <label
+        htmlFor={dateRangeId}
+        className={`${
+          !isEditing
+            ? customLabelCss ?? ""
+            : `form-label ${customEditLabelCss ?? "custom-label"}`
+        }`}
+      >
+        {label}
+      </label>
+      {isEditing ? (
+        <DateRangePicker
+          id={dateRangeId}
+          showOneCalendar
+          ranges={[]}
+          aria-label={label}
+          className="custom-date-range"
+          placeholder={placeholder}
+          format="MM/dd/yy"
+          character=" - "
+          caretAs={CalendarIcon}
+          value={value ?? []}
+          onChange={(value) => onChange(value)}
+        />
+      ) : (
+        <p className={`${customInputTextCss ?? ""}`}>{dateRangeValue ?? ""}</p>
+      )}
     </div>
-)};
+  );
+};
+
+export const CheckBoxInput: React.FC<InputProps> = ({
+  label,
+  isLabel,
+  isChecked,
+  customLabelCss,
+  customEditLabelCss,
+  customEditInputTextCss,
+  isEditing,
+  type,
+  value,
+  onChange,
+  tableMode
+}) => {
+  const inputTxtId = label.replace(/\s+/g, "_");
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.checked); // Toggle the checked state and pass it to the parent component
+  };
 
-export const CheckBoxInput:  React.FC<InputProps> = ({ label, isLabel, isChecked, customLabelCss, customEditLabelCss, customEditInputTextCss, isEditing, type, value, onChange }) => {
-    const inputTxtId = label.replace(/\s+/g, '_');
-    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        onChange(e.target.checked); // Toggle the checked state and pass it to the parent component
-    };
-    
-      return (
-        <div className="d-inline mb-3">
+  if(tableMode)
+    {
+        return (
+            <td className="table-border-light content-text">
+            <div className="">
+                <input
+                id={inputTxtId}
+                type={type}
+                className={`form-check-input custom-checkbox ${
+                    customEditInputTextCss ?? "custom-input-text"
+                }`}
+                checked={isChecked}
+                aria-label={label} // Accessibility
+                onChange={handleCheckboxChange}
+                disabled={!isEditing}
+                />
+                {isLabel && (
+                <label
+                    htmlFor={inputTxtId}
+                    className={`${
+                    !isEditing
+                        ? customLabelCss ?? ""
+                        : `px-1 form-label ${customEditLabelCss ?? "custom-label"}`
+                    }`}
+                >
+                    {label}
+                </label>
+                )}
+            </div>
+            </td>
+        );
+    }
+    else
+    {
+        return (
+            <div className="d-inline mb-3">
             <div className="d-inline form-check p-0">
-            <input
+                <input
                 id={inputTxtId}
                 type={type}
-                className={`form-check-input custom-checkbox ${ customEditInputTextCss ?? 'custom-input-text'}`}
+                className={`form-check-input custom-checkbox ${
+                    customEditInputTextCss ?? "custom-input-text"
+                }`}
                 checked={isChecked}
                 aria-label={label} // Accessibility
                 onChange={handleCheckboxChange}
-            />
-           { 
-                isLabel && 
-                <label htmlFor={inputTxtId} className={`${!isEditing ? customLabelCss ?? '' : `px-1 form-label ${ customEditLabelCss ?? 'custom-label'}`}`}>
-                        {label}
+                />
+                {isLabel && (
+                <label
+                    htmlFor={inputTxtId}
+                    className={`${
+                    !isEditing
+                        ? customLabelCss ?? ""
+                        : `px-1 form-label ${customEditLabelCss ?? "custom-label"}`
+                    }`}
+                >
+                    {label}
                 </label>
-            }
+                )}
             </div>
-        </div>
-      );
-}
\ No newline at end of file
+            </div>
+        );
+    }
+};
diff --git a/frontend/Site/src/app/components/table/body/TableBody.tsx b/frontend/Site/src/app/components/table/body/TableBody.tsx
index fa308bf9..6e2eb70b 100644
--- a/frontend/Site/src/app/components/table/body/TableBody.tsx
+++ b/frontend/Site/src/app/components/table/body/TableBody.tsx
@@ -4,7 +4,7 @@ import { RequestStatus } from "../../../helpers/requests/status";
 import { TableColumn } from "../TableColumn";
 
 import { FormFieldType, IFormField } from "../../input-controls/IFormField";
-import { Label, TextInput , Link } from "../../input-controls/InputControls";
+import { Label, TextInput , Link ,Dropdown,CheckBoxInput } from "../../input-controls/InputControls";
 import { ChangeTracker } from "../../common/IChangeType";
 
 interface TableBodyProps {
@@ -123,6 +123,50 @@ const TableBody: FC<TableBodyProps> = ({
             />
           );
         }
+        else if(field.type === FormFieldType.DropDown)
+          {
+            return (
+              <Dropdown 
+                label={field.label}
+                customLabelCss={field.customLabelCss}
+                customInputTextCss={field.customInputTextCss}
+                customEditLabelCss={field.customEditLabelCss}
+                customEditInputTextCss={field.customEditInputTextCss}
+                placeholder={field.placeholder}
+                value={value}
+                onChange={(value) => tableRecordChangeHandler(rowKey,field.graphQLPropertyName, value)}
+                type={field.type}
+                validation={field.validation}
+                allowNumbersOnly={field.allowNumbersOnly}
+                isEditing={editMode ?? true}
+                tableMode={field.tableMode ?? false}
+                href={field.href}
+                options={field.options}
+              />
+            );
+          }
+          else if(field.type === FormFieldType.Checkbox)
+            {
+              return (
+                <CheckBoxInput 
+                  label={field.label}
+                  customLabelCss={field.customLabelCss}
+                  customInputTextCss={field.customInputTextCss}
+                  customEditLabelCss={field.customEditLabelCss}
+                  customEditInputTextCss={field.customEditInputTextCss}
+                  placeholder={field.placeholder}
+                  value={value}
+                  onChange={(value) => tableRecordChangeHandler(rowKey,field.graphQLPropertyName, value)}
+                  type={field.type}
+                  validation={field.validation}
+                  allowNumbersOnly={field.allowNumbersOnly}
+                  isEditing={editMode ?? true}
+                  tableMode={field.tableMode ?? false}
+                  href={field.href}
+                  options={field.options}
+                />
+              );
+            }
   };
 
   const getValue = (rowIndex: number, propertyName: string) => {
@@ -155,7 +199,7 @@ const TableBody: FC<TableBodyProps> = ({
       column.displayType,
       column.displayName,
       cellValue ?? "",
-      columnIndex + rowIndex,
+      rowIndex,
       column.linkRedirectionURL ?? "",
       changeHandler,
       editMode
diff --git a/frontend/Site/src/app/components/widget/IWidget.ts b/frontend/Site/src/app/components/widget/IWidget.ts
index ae19f44a..dafcb50d 100644
--- a/frontend/Site/src/app/components/widget/IWidget.ts
+++ b/frontend/Site/src/app/components/widget/IWidget.ts
@@ -11,4 +11,5 @@ export interface IWidget {
     hideTable?:boolean;
     hideTitle?:boolean;
     editMode?:boolean;
+    changeHandler:(event:any)=>void;
 }
\ No newline at end of file
diff --git a/frontend/Site/src/app/components/widget/Widget.tsx b/frontend/Site/src/app/components/widget/Widget.tsx
index ef77a854..92d0bfd5 100644
--- a/frontend/Site/src/app/components/widget/Widget.tsx
+++ b/frontend/Site/src/app/components/widget/Widget.tsx
@@ -14,6 +14,7 @@ const Widget: React.FC<IWidget> = ({
     hideTable,
     hideTitle,
     editMode,
+    changeHandler
 }) => {
     return(
         <div className={`d-flex flex-column widget-container`}>
@@ -32,7 +33,7 @@ const Widget: React.FC<IWidget> = ({
               data={tableData}
               showPageOptions={false}
               allowRowsSelect={allowRowsSelect}
-              changeHandler={()=>{}}
+              changeHandler={changeHandler}
               editMode={editMode ?? false}
             />
           </div>
diff --git a/frontend/Site/src/app/features/dashboard/Dashboard.tsx b/frontend/Site/src/app/features/dashboard/Dashboard.tsx
index 49e23888..fedd020a 100644
--- a/frontend/Site/src/app/features/dashboard/Dashboard.tsx
+++ b/frontend/Site/src/app/features/dashboard/Dashboard.tsx
@@ -24,6 +24,11 @@ interface DashboardWidgetProps {
   onButtonClick?: () => void;
 }
 
+const changeHandler = (event:any) => {
+  console.log(event);
+}
+
+
 const DashboardTableWidget: React.FC<DashboardWidgetProps> = ({
   title,
   buttonText,
@@ -33,7 +38,7 @@ const DashboardTableWidget: React.FC<DashboardWidgetProps> = ({
   allowRowsSelect,
   onButtonClick,
 }) => (
-  <Widget title={title} tableColumns={columns} tableData={data} tableIsLoading={loading} allowRowsSelect={allowRowsSelect}>
+  <Widget changeHandler={changeHandler} title={title} tableColumns={columns} tableData={data} tableIsLoading={loading} allowRowsSelect={allowRowsSelect}>
     { buttonText && onButtonClick && 
       <button className="dashboard-btn" type="button" onClick={onButtonClick} aria-label={buttonText} >
         <span className="btn-lbl">{buttonText}</span>
diff --git a/frontend/Site/src/app/features/details/SiteDetails.tsx b/frontend/Site/src/app/features/details/SiteDetails.tsx
index 9a5b0a6b..94424c33 100644
--- a/frontend/Site/src/app/features/details/SiteDetails.tsx
+++ b/frontend/Site/src/app/features/details/SiteDetails.tsx
@@ -87,17 +87,20 @@ const SiteDetails = () => {
   const handleItemClick = (value: string) => {
     switch(value)
     {
-      case UserMode.EditMode :
+      case SiteDetailsMode.EditMode :
        setEdit(true);
        setViewMode(SiteDetailsMode.EditMode);
        dispatch(updateSiteDetailsMode(SiteDetailsMode.EditMode));
        break;
-      case UserMode.SrMode :
+      case SiteDetailsMode.SRMode :
        setEdit(true);
        setViewMode(SiteDetailsMode.SRMode);
        dispatch(updateSiteDetailsMode(SiteDetailsMode.SRMode));
        break;
-      case UserMode.DeleteMode :
+      case SiteDetailsMode.ViewOnlyMode :
+       setEdit(false);
+       setViewMode(SiteDetailsMode.ViewOnlyMode);
+       dispatch(updateSiteDetailsMode(SiteDetailsMode.ViewOnlyMode));
        break;
       default:
        break;
@@ -107,7 +110,7 @@ const SiteDetails = () => {
   const handleCancelButton = () => {
     dispatch(updateSiteDetailsMode(SiteDetailsMode.ViewOnlyMode));
     dispatch(clearTrackChanges({}));
-    setEditSiteDetailsObject(details);
+    //setEditSiteDetailsObject(details);
     setSave(false);
     setEdit(false);
   }
@@ -115,10 +118,14 @@ const SiteDetails = () => {
     <PageContainer role="details">
       {save && (
         <ModalDialog
-          closeHandler={() => {
-            dispatch(updateSiteDetailsMode(SiteDetailsMode.ViewOnlyMode));
-            setEdit(false);
+          closeHandler={(response) => {
+           
             setSave(false);
+            if(response)
+              {
+                dispatch(updateSiteDetailsMode(SiteDetailsMode.ViewOnlyMode));
+                setEdit(false);
+              }
           }}
         >
           {savedChanges.length > 0 ? (
@@ -156,7 +163,12 @@ const SiteDetails = () => {
           <span className="btn-back-lbl">Back to</span>
         </button>
         <div className="d-flex gap-2 justify-align-center">
+
+          {/* For Action Dropdown*/}
           {(!edit && viewMode === SiteDetailsMode.ViewOnlyMode && userType === UserType.Internal) && <Actions label="Action" items={ActionItems} onItemClick={handleItemClick} /> }
+           
+           
+          {/* For Edit / SR Dropdown*/}
             <div className="d-flex gap-3 align-items-center">
             {edit && userType === UserType.Internal &&
               <>
@@ -166,6 +178,8 @@ const SiteDetails = () => {
               </>
             }
           </div>
+          
+          {/* For Cart /Folio Controls*/}
           { (!edit && viewMode === SiteDetailsMode.ViewOnlyMode && userType === UserType.External) &&
             <>
               <button className="d-flex btn-cart align-items-center">
@@ -181,6 +195,15 @@ const SiteDetails = () => {
           }
         </div>
       </div>
+      <div className="section-details-header row">
+        <div>
+          <CustomLabel label="Site ID: " labelType="b-h5" />
+          <CustomLabel label="1" labelType="r-h5" />
+        </div>
+        <div>
+          <CustomLabel label="2929 Fort" labelType="b-h1" />
+        </div>
+      </div>
       <NavigationPills items={navItems} components={navComponents} />
     </PageContainer>
   );
diff --git a/frontend/Site/src/app/features/details/SummaryForm.tsx b/frontend/Site/src/app/features/details/SummaryForm.tsx
index 59902b68..fe8330c8 100644
--- a/frontend/Site/src/app/features/details/SummaryForm.tsx
+++ b/frontend/Site/src/app/features/details/SummaryForm.tsx
@@ -7,10 +7,11 @@ import "./SummaryForm.css"
 interface SummaryFormProps{
     sitesDetails: Sites,
     edit: boolean,
+    srMode: boolean,
     changeHandler:(graphQLPropertyName: any, value: String | [Date, Date])=>void
 }
 
-const SummaryForm:FC<SummaryFormProps> = ({sitesDetails, edit, changeHandler}) => { 
+const SummaryForm:FC<SummaryFormProps> = ({sitesDetails, edit,srMode, changeHandler}) => { 
   const formRows: IFormField[][] = [
     [
       {
@@ -200,7 +201,7 @@ const SummaryForm:FC<SummaryFormProps> = ({sitesDetails, edit, changeHandler}) =
 
   return (
     <form onSubmit={() => {}}>
-            <Form editMode={edit}
+            <Form editMode={edit} srMode={srMode}
         formRows={formRows}
         formData={sitesDetails}
         handleInputChange={changeHandler}
diff --git a/frontend/Site/src/app/features/details/notations/Notations.tsx b/frontend/Site/src/app/features/details/notations/Notations.tsx
index 963ea758..68b39125 100644
--- a/frontend/Site/src/app/features/details/notations/Notations.tsx
+++ b/frontend/Site/src/app/features/details/notations/Notations.tsx
@@ -12,50 +12,44 @@ import { CircleXMarkIcon, MagnifyingGlassIcon, Plus, UserMinus, UserPlus } from
 import { INotations } from "./INotations";
 // import { SiteDetailsMode } from "../../../helpers/requests/SiteDetailsMode";
 import { ChangeTracker, IChangeType } from "../../../components/common/IChangeType";
-import { siteDetailsMode, trackChanges } from "../../site/dto/SiteSlice";
+import { resetSiteDetails, siteDetailsMode, trackChanges } from "../../site/dto/SiteSlice";
 import { flattenFormRows, formatDateRange } from "../../../helpers/utility";
 import Search from "../../site/Search";
 import SearchInput from "../../../components/search/SearchInput";
 import Sort from "../../../components/sort/Sort"; 
 import SiteDetails from "../SiteDetails";
 import { SiteDetailsMode } from "../dto/SiteDetailsMode";
+import { setDate } from "date-fns";
 
 const dummyData = [
-    {
-      id: 1,
-      role: ["Admin", "User", "Guest"],
-      participantName: "John Doe",
-      sr: true,
-      date: new Date('2024-05-01')
-    },
+    // {
+    //   id: 1,
+    //   role: ["Admin", "User", "Guest"],
+    //   participantName: "John Doe",
+    //   sr: true,
+    //   date: new Date('2024-05-01')
+    // },
     {
       id: 2,
-      role: "User",
+      role: "CSAP",
       participantName: "Jane Smith",
       sr: false,
       date: new Date('2024-05-05')
     },
     {
       id:3,
-      role: "Guest",
+      role: "SDM",
       participantName: "Alex Johnson",
       sr: true,
       date: new Date('2024-05-03')
     },
     {
       id:4,
-      role: "Moderator",
+      role: "CSSATEAM",
       participantName: "Chris Lee",
       sr: false,
       date: new Date('2024-05-03')
-    },
-    {
-      id:5,
-      role: "User",
-      participantName: "Patricia Brown",
-      sr: true,
-      date: new Date('2024-05-05')
-    },
+    }
   ];
 
 
@@ -102,13 +96,34 @@ const Notations: React.FC<INotations> = ({
     };
 
     const handleAddParticipant = () => {
-        alert('handleAddParticipant click');
+
+      setData([...data , {
+        id:0,
+        role: "",
+        participantName: "",
+        sr: true,
+        date: new Date()
+      }])
+
+        //alert('handleAddParticipant click');
+        
     };
 
     const handleRemoveParticipant = () => {
         alert('handleRemoveParticipant click');
     };
 
+    const resetDetails = useSelector(resetSiteDetails);  
+    useEffect(()=>{
+
+        if(resetDetails)
+        {
+          setFormData({})
+          setData(dummyData);
+        }
+
+    },[resetDetails]);
+
     const handleInputChange = (graphQLPropertyName: any, value: String | [Date, Date]) => {
       if(viewMode === SiteDetailsMode.SRMode)
       {
@@ -160,6 +175,21 @@ const Notations: React.FC<INotations> = ({
       // setViewMode(SiteDetailsMode.SRMode);
     };
 
+    const changeHandler = (event:any) => {
+
+      let existingRecords = [...data];
+
+      let index = existingRecords.findIndex(obj => obj.id === event.row.id);
+
+      
+      existingRecords[index][event.property] = event.value;
+
+      setData([...existingRecords]);
+
+      //event
+      console.log(event);
+    }
+
     return (
       <>
           <div className="row ">
@@ -196,8 +226,8 @@ const Notations: React.FC<INotations> = ({
                   <div className="w-100">
                       <Form formRows={ userType === UserType.External ? notationFormRowExternal : notationFormRowsInternal } formData={formData} editMode={viewMode === SiteDetailsMode.EditMode}  srMode= { viewMode === SiteDetailsMode.SRMode } handleInputChange={handleInputChange}
                       aria-label="Sort Notation Form"/>
-                      <Widget title={'Notation Participants'} tableColumns={ userType === UserType.Internal ? notationColumnInternal : notationColumnExternal} tableData={data} tableIsLoading={loading} allowRowsSelect={viewMode === SiteDetailsMode.EditMode}
-                      aria-label="Notation Widget" hideTable = { false } hideTitle = { false }>
+                      <Widget changeHandler={changeHandler} title={'Notation Participants'} tableColumns={ userType === UserType.Internal ? notationColumnInternal : notationColumnExternal} tableData={data} tableIsLoading={loading} allowRowsSelect={viewMode === SiteDetailsMode.EditMode}
+                      aria-label="Notation Widget" hideTable = { false } hideTitle = { false } editMode={ viewMode === SiteDetailsMode.EditMode && userType === UserType.Internal}>
                        { viewMode === SiteDetailsMode.EditMode && userType === UserType.Internal &&
                           <div className="d-flex gap-2">
                             <button className=" d-flex align-items-center notation-btn" type="button" onClick={handleAddParticipant} aria-label={'Add Participant'} >
diff --git a/frontend/Site/src/app/features/details/notations/NotationsConfig.ts b/frontend/Site/src/app/features/details/notations/NotationsConfig.ts
index 95423678..8f2e77cf 100644
--- a/frontend/Site/src/app/features/details/notations/NotationsConfig.ts
+++ b/frontend/Site/src/app/features/details/notations/NotationsConfig.ts
@@ -11,8 +11,9 @@ export const notationFormRowsInternal: IFormField[][] = [
             placeholder: 'Notation Type',
             graphQLPropertyName: 'notationType',
             options: [
-                { key: 'type1', value: 'Type 1'},
-                { key: 'type2', value: 'Type 2'}
+                { key: 'type1', value: 'CERTIFICATE OF COMPLIANCE ISSUED USING RISK BASED STANDARDS'},
+                 { key: 'type2', value: 'WASTE MANAGEMENT APPROVAL ISSUED'},
+                 { key: 'type2', value: 'RISK ASSESSMENT SUBMITTED'}
             ],
             value: '',
             colSize: 'col-lg-5 col-md-7 col-sm-11 col-10',
@@ -54,8 +55,8 @@ export const notationFormRowsInternal: IFormField[][] = [
             placeholder: 'Notation Class',
             graphQLPropertyName: 'notationClass',
             options: [
-                { key: 'class1', value: 'Class 1'},
-                { key: 'class2', value: 'Class 2'}
+                { key: 'class1', value: 'ENVIRONMENTAL MANAGEMENT ACT: GENERAL'},
+                // { key: 'class2', value: 'Class 2'}
             ],
             value: '',
             colSize: 'col-lg-5 col-md-6 col-sm-12',
@@ -82,8 +83,8 @@ export const notationFormRowsInternal: IFormField[][] = [
             placeholder: 'Ministry Contact',
             graphQLPropertyName: 'ministryContact',
             options: [
-                { key: 'contact1', value: 'Ministry Contact 1', imageUrl: avatar},
-                { key: 'contact2', value: 'Ministry Contact 2', imageUrl: avatar}
+                { key: 'contact1', value: 'Alex', imageUrl: avatar},
+                { key: 'contact2', value: 'John', imageUrl: avatar}
             ],
             value: '',
             isImage: true,
@@ -309,20 +310,23 @@ export const notationColumnInternal: TableColumn[] = [
       active: true,
       graphQLPropertyName: "role",
       displayType:{
-        type: FormFieldType.Label,
-        label: "Site ID",
-        placeholder: 'Separate IDs by a comma (",")',
-        graphQLPropertyName: "id",
+        type: FormFieldType.DropDown,
+        label: "Text",        
+        graphQLPropertyName: "role",
         value: "",
-        validation: {
-          pattern: /^[0-9,\s]*$/,
-          customMessage: "Site ID can only contain numbers and commas",
-        },
+        options: [
+            {key:'CSAP', value:'CSAP'},
+            {key:'CSSATEAM', value:'CSSA TEAM'},
+            {key:'SDM', value:'SDM'},
+            {key:'SITEOWNER', value:'SITE OWNER'}
+        ],
         allowNumbersOnly: true,
         colSize: "col-lg-6 col-md-6 col-sm-12",
         customLabelCss: "custom-lbl-text",
         customInputTextCss: "custom-input-text",
         tableMode: true,
+        placeholder:'Please select the role'
+       
       },
       columnSize: ColumnSize.Default
     },
@@ -332,15 +336,12 @@ export const notationColumnInternal: TableColumn[] = [
       active: true,
       graphQLPropertyName: "participantName",
       displayType:{
-        type: FormFieldType.Label,
-        label: "Site ID",
-        placeholder: 'Separate IDs by a comma (",")',
-        graphQLPropertyName: "id",
+        type: FormFieldType.Text,
+        label: "Participant Name",
+        placeholder: 'Please enter ',
+        graphQLPropertyName: "participantName",
         value: "",
-        validation: {
-          pattern: /^[0-9,\s]*$/,
-          customMessage: "Site ID can only contain numbers and commas",
-        },
+        
         allowNumbersOnly: true,
         colSize: "col-lg-6 col-md-6 col-sm-12",
         customLabelCss: "custom-lbl-text",
@@ -355,19 +356,11 @@ export const notationColumnInternal: TableColumn[] = [
       active: true,
       graphQLPropertyName: "sr",
       displayType: {
-        type: FormFieldType.Label,
-        label: "Site ID",
-        placeholder: 'Separate IDs by a comma (",")',
-        graphQLPropertyName: "id",
-        value: "",
-        validation: {
-          pattern: /^[0-9,\s]*$/,
-          customMessage: "Site ID can only contain numbers and commas",
-        },
-        allowNumbersOnly: true,
-        colSize: "col-lg-6 col-md-6 col-sm-12",
-        customLabelCss: "custom-lbl-text",
-        customInputTextCss: "custom-input-text",
+        type: FormFieldType.Checkbox,
+        label: "SR",
+        placeholder: '',
+        graphQLPropertyName: "sr",
+        value: "",      
         tableMode: true,
       },
       columnSize: ColumnSize.Default
diff --git a/frontend/Site/src/app/features/details/summary/Summary.css b/frontend/Site/src/app/features/details/summary/Summary.css
index 98969362..4512ffec 100644
--- a/frontend/Site/src/app/features/details/summary/Summary.css
+++ b/frontend/Site/src/app/features/details/summary/Summary.css
@@ -3,4 +3,10 @@
     gap: var(--layout-margin-xxlarge);
     display: flex;
     flex-direction: column;
+}
+
+
+.leaflet-container
+{
+    height: 500px !important;
 }
\ No newline at end of file
diff --git a/frontend/Site/src/app/features/details/summary/Summary.tsx b/frontend/Site/src/app/features/details/summary/Summary.tsx
index e2454bd5..ffd46909 100644
--- a/frontend/Site/src/app/features/details/summary/Summary.tsx
+++ b/frontend/Site/src/app/features/details/summary/Summary.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../../components/common/IChangeType";
 import { AppDispatch } from "../../../Store";
 import { useDispatch, useSelector } from "react-redux";
-import { selectSiteDetails, siteDetailsMode, trackChanges } from "../../site/dto/SiteSlice";
+import { resetSiteDetails, selectSiteDetails, siteDetailsMode, trackChanges } from "../../site/dto/SiteSlice";
 import { RequestStatus } from "../../../helpers/requests/status";
 import { FormFieldType } from "../../../components/input-controls/IFormField";
 import { TableColumn } from "../../../components/table/TableColumn";
@@ -20,13 +20,56 @@ import { SiteDetailsMode } from "../dto/SiteDetailsMode";
 
 const Summary = () => {
 
+  setTimeout(() => {
+    let address = document.getElementsByTagName('h3');
+    address.length > 0 && address[0] && address[0].remove();
+   }, 1000); 
+
+  setTimeout(() => {
+    let address = document.getElementsByTagName('h3');
+    address.length > 0 && address[0] && address[0].remove();
+   }, 2000); 
+  
+   setTimeout(() => {
+    let address = document.getElementsByTagName('h3');
+    address.length > 0 && address[0] && address[0].remove();
+   }, 3000); 
+
+
     const detailsMode = useSelector(siteDetailsMode);
 
+    
+    
+    const details = useSelector(selectSiteDetails);
+
+    const [editSiteDetailsObject, setEditSiteDetailsObject] = useState(details);
+   
+    const resetDetails = useSelector(resetSiteDetails);  
+    useEffect(()=>{
+
+        if(resetDetails)
+        {
+            setEditSiteDetailsObject(details);
+        }
+
+    },[resetDetails])
+
+    const [edit, setEdit] = useState(false);
+  
+    const [srMode, setSRMode] = useState(false);
+
     useEffect(() => {
         if (detailsMode === SiteDetailsMode.EditMode) {
           setEdit(true);
-        } else {
+          setSRMode(false);
+        } 
+        else if (detailsMode === SiteDetailsMode.SRMode) {
+            setSRMode(true);
+            setEdit(false);
+          }
+        else {
           setEdit(false);
+          setSRMode(false);
         }
       }, [detailsMode]);
     
@@ -36,15 +79,19 @@ const Summary = () => {
     12123123, 123123, 12312312, 1231231, 23, 123123123123, 123123213, 1123123,
   ];
 
-  const [edit, setEdit] = useState(true);
+
 
   const [location, setLocation] = useState([48.46762, -123.25458]);
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const details = useSelector(selectSiteDetails);
 
-  const [editSiteDetailsObject, setEditSiteDetailsObject] = useState(details);
+
+  useEffect(()=>{
+    let address = document.getElementsByTagName('h3');
+    address.length > 0 && address[0] && address[0].remove();
+    setEditSiteDetailsObject(details);
+  },[details])
 
   const [parcelIds, setParcelIds] = useState(initialParcelIds);
 
@@ -59,14 +106,30 @@ const Summary = () => {
 
   const handleInputChange = (graphQLPropertyName: any, value: any) => {
     const trackerLabel = getTrackerLabel(graphQLPropertyName);
-    const tracker = new ChangeTracker(
-      IChangeType.Modified,
-      "Site Location Details " + trackerLabel
-    );
-    dispatch(trackChanges(tracker.toPlainObject()));
+    if(detailsMode === SiteDetailsMode.SRMode)
+    {
+        const tracker = new ChangeTracker(
+            IChangeType.Modified,
+            "Site Location Details SR Mode For " + trackerLabel
+          );
+          dispatch(trackChanges(tracker.toPlainObject()));
+          console.log({[graphQLPropertyName]:value})
+    }
+    else
+    {
+        const tracker = new ChangeTracker(
+            IChangeType.Modified,
+            "Site Location Details " + trackerLabel
+          );
+          dispatch(trackChanges(tracker.toPlainObject()));
+          const newState = { ...editSiteDetailsObject, [graphQLPropertyName]: value };
+          setEditSiteDetailsObject(newState);
+    }
+    
+   
+   
 
-    const newState = { ...editSiteDetailsObject, [graphQLPropertyName]: value };
-    setEditSiteDetailsObject(newState);
+   
   };
 
   const handleParcelIdDelete = (pid: any) => {
@@ -78,8 +141,8 @@ const Summary = () => {
 
   const data = [
     {
-      notation: 2,
-      participants: 1,
+      notation: 1,
+      participants: 3,
       associatedSites: 1,
       documents: 1,
       landUses: 5,
@@ -98,10 +161,10 @@ const Summary = () => {
 
   const columns: TableColumn[] = [
     {
-      id: 1,
-      displayName: "Documents",
+      id: 4,
+      displayName: "Notations",
       active: true,
-      graphQLPropertyName: "documents",
+      graphQLPropertyName: "notation",
       displayType: {
         type: FormFieldType.Text,
         label: "Site ID",
@@ -120,10 +183,10 @@ const Summary = () => {
       },
     },
     {
-      id: 2,
-      displayName: "Land Uses",
+      id: 5,
+      displayName: "Participants",
       active: true,
-      graphQLPropertyName: "landUses",
+      graphQLPropertyName: "participants",
       displayType: {
         type: FormFieldType.Text,
         label: "Site ID",
@@ -142,10 +205,10 @@ const Summary = () => {
       },
     },
     {
-      id: 3,
-      displayName: "Associated Sites",
+      id: 1,
+      displayName: "Documents",
       active: true,
-      graphQLPropertyName: "associatedSites",
+      graphQLPropertyName: "documents",
       displayType: {
         type: FormFieldType.Text,
         label: "Site ID",
@@ -164,10 +227,10 @@ const Summary = () => {
       },
     },
     {
-      id: 4,
-      displayName: "Notations",
+      id: 2,
+      displayName: "Land Uses",
       active: true,
-      graphQLPropertyName: "notation",
+      graphQLPropertyName: "landUses",
       displayType: {
         type: FormFieldType.Text,
         label: "Site ID",
@@ -186,10 +249,10 @@ const Summary = () => {
       },
     },
     {
-      id: 5,
-      displayName: "Participants",
+      id: 3,
+      displayName: "Associated Sites",
       active: true,
-      graphQLPropertyName: "participants",
+      graphQLPropertyName: "associatedSites",
       displayType: {
         type: FormFieldType.Text,
         label: "Site ID",
@@ -207,6 +270,8 @@ const Summary = () => {
         tableMode: true,
       },
     },
+   
+    
     {
       id: 6,
       displayName: "Parcel Description",
@@ -337,6 +402,7 @@ const Summary = () => {
               <SummaryForm
                 sitesDetails={editSiteDetailsObject}
                 edit={edit}
+                srMode={srMode}
                 changeHandler={handleInputChange}
               />
             }
@@ -398,7 +464,7 @@ const Summary = () => {
             changeHandler={(eventRecord) => {
               console.log(eventRecord);
             }}
-            editMode={edit}
+            editMode={false}
           />
         </div>
       </div>
diff --git a/frontend/Site/src/app/features/site/Search.css b/frontend/Site/src/app/features/site/Search.css
index 8bfaf476..dfd3f5cf 100644
--- a/frontend/Site/src/app/features/site/Search.css
+++ b/frontend/Site/src/app/features/site/Search.css
@@ -292,4 +292,14 @@ div.search-parent
     display: flex;
     flex-direction: column;
     gap: var(--layout-margin-xlarge);
+}
+
+.link-for-table
+{
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    text-align: left;
+    color: var(--surface-primary-default);
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/frontend/Site/src/app/features/site/dto/Columns.ts b/frontend/Site/src/app/features/site/dto/Columns.ts
index af61ffa8..533c85e0 100644
--- a/frontend/Site/src/app/features/site/dto/Columns.ts
+++ b/frontend/Site/src/app/features/site/dto/Columns.ts
@@ -212,7 +212,7 @@ const getSiteSearchResultsColumns = () => {
       true,
       1,
       true,
-      getColumnType("View","id","") ,
+      getLinkColumnType("Map","id","","site/map/") ,
       "site/map/",
       true
     ),
@@ -228,6 +228,7 @@ const getSiteSearchResultsColumns = () => {
       true,
       getLinkColumnType("Details","id","","site/details/"),
       "site/details/",
+    
       true,      
     ),
   ];
@@ -256,8 +257,8 @@ const getLinkColumnType = (label:string, propertyName:string, value:string, href
       label: label,       
       graphQLPropertyName: propertyName,
       value:value,      
-      customLabelCss: "custom-lbl-text",
-      customInputTextCss: "custom-input-text",
+      customLabelCss: "link-for-table",
+      customInputTextCss: "link-for-table",
       tableMode: true,
       href: href
     }
diff --git a/frontend/Site/src/app/features/site/dto/SiteSlice.ts b/frontend/Site/src/app/features/site/dto/SiteSlice.ts
index 13372422..f8771263 100644
--- a/frontend/Site/src/app/features/site/dto/SiteSlice.ts
+++ b/frontend/Site/src/app/features/site/dto/SiteSlice.ts
@@ -28,6 +28,7 @@ const initialState: SiteState = {
   siteDetailsUpdateStatus: RequestStatus.idle,
   changeTracker: [],
   siteDetailsMode: SiteDetailsMode.ViewOnlyMode,
+  resetSiteDetails: false,
 };
 
 export const fetchSitesDetails = createAsyncThunk(
@@ -165,20 +166,31 @@ const siteSlice = createSlice({
     },
     trackChanges: (state, action) => {
       console.log("tracking change", state, action);
-      const newState = {
-        ...state,
-        changeTracker: [...state.changeTracker, action.payload],
-      };
 
-      console.log("tracking change 2 ", newState);
+     let recordExists =   state.changeTracker.filter((tracked)=>{
+         return tracked.changeType === action.payload.changeType && tracked.label === action.payload.label
+      })
 
-      return newState;
+      if (recordExists.length === 0) {
+        const newState = {
+          ...state,
+          changeTracker: [...state.changeTracker, action.payload],
+          resetSiteDetails: false,
+        };
+        return newState;
+      } else {
+        const newState = {
+          ...state,
+        };
+        return newState;
+      }
     },
     clearTrackChanges: (state, action) => {
       console.log("tracking change", state, action);
       const newState = {
         ...state,
         changeTracker: [],
+        resetSiteDetails: true,
       };
 
       console.log("tracking change 2 ", newState);
@@ -240,6 +252,7 @@ export const siteDetailsLoadingState = (state: any) =>
 export const selectSiteDetails = (state: any) => state.sites.siteDetails;
 export const trackedChanges = (state: any) => state.sites.changeTracker;
 export const siteDetailsMode = (state: any) => state.sites.siteDetailsMode;
+export const resetSiteDetails = (state: any) => state.sites.resetSiteDetails;
 
 export const {
   siteAdded,
@@ -249,7 +262,7 @@ export const {
   updateSearchQuery,
   trackChanges,
   clearTrackChanges,
-  updateSiteDetailsMode
+  updateSiteDetailsMode,
 } = siteSlice.actions;
 
 export default siteSlice.reducer;
diff --git a/frontend/Site/src/app/features/site/dto/SiteState.ts b/frontend/Site/src/app/features/site/dto/SiteState.ts
index aa318487..526ee5c5 100644
--- a/frontend/Site/src/app/features/site/dto/SiteState.ts
+++ b/frontend/Site/src/app/features/site/dto/SiteState.ts
@@ -22,4 +22,5 @@ export class SiteState
     siteDetailsUpdateStatus:string  = RequestStatus.idle;
     changeTracker: ChangeTracker[] = [];
     siteDetailsMode: SiteDetailsMode = SiteDetailsMode.ViewOnlyMode;
+    resetSiteDetails : boolean = false;
 }
\ No newline at end of file