diff --git a/common/components/Button/Button.styled.tsx b/common/components/Button/Button.styled.tsx
index 42112a70d..fc91a39aa 100644
--- a/common/components/Button/Button.styled.tsx
+++ b/common/components/Button/Button.styled.tsx
@@ -38,6 +38,7 @@ export const Button = styled.div<{
   noSidePadding?: boolean;
   noTopBottomPadding?: boolean;
   noHover?: boolean;
+  agencySettingsConfigs?: boolean;
 }>`
   ${({ size }) => (size ? typography.sizeCSS[size] : typography.body)};
   display: flex;
@@ -46,7 +47,8 @@ export const Button = styled.div<{
   border-radius: 3px;
   gap: 8px;
   white-space: nowrap;
-  min-width: 80px;
+  min-width: ${({ agencySettingsConfigs }) =>
+    agencySettingsConfigs ? "unset" : "80px"};
   pointer-events: ${({ disabled }) => disabled && "none"};
   background-color: ${({ buttonColor, disabled }) => {
     if (disabled) return palette.highlight.grey3;
@@ -66,7 +68,17 @@ export const Button = styled.div<{
     }
     return "none";
   }};
-  padding: ${({ size }) => (size === "medium" ? "16px 32px" : "10px 15px")};
+
+  padding: ${({ size, agencySettingsConfigs }) => {
+    if (agencySettingsConfigs) {
+      return "0";
+    }
+    if (size) {
+      return "16px 32px";
+    }
+    return "10px 15px";
+  }};
+
   ${({ noSidePadding }) =>
     noSidePadding && "padding-left: 0; padding-right: 0;"}
   ${({ noTopBottomPadding }) =>
@@ -79,8 +91,9 @@ export const Button = styled.div<{
         return `color: ${palette.solid.darkblue}`;
       }
     }};
-    ${({ buttonColor, noHover }) => {
+    ${({ buttonColor, noHover, agencySettingsConfigs }) => {
       if (buttonColor) return "opacity: 0.8;";
+      if (agencySettingsConfigs) return "opacity: unset";
       return !noHover && `background-color: ${palette.solid.lightgrey2};`;
     }}
     a {
diff --git a/common/components/Button/Button.tsx b/common/components/Button/Button.tsx
index 0015362f4..85f28450a 100644
--- a/common/components/Button/Button.tsx
+++ b/common/components/Button/Button.tsx
@@ -39,6 +39,7 @@ export type ButtonProps = {
   noTopBottomPadding?: boolean;
   noHover?: boolean;
   tooltipMsg?: string;
+  agencySettingsConfigs?: boolean;
 };
 
 export function Button({
@@ -54,6 +55,7 @@ export function Button({
   noTopBottomPadding,
   noHover,
   tooltipMsg,
+  agencySettingsConfigs,
 }: ButtonProps) {
   return (
     <Styled.ButtonWrapper id={id}>
@@ -67,6 +69,7 @@ export function Button({
         noSidePadding={noSidePadding}
         noTopBottomPadding={noTopBottomPadding}
         noHover={noHover}
+        agencySettingsConfigs={agencySettingsConfigs}
       >
         {label}
       </Styled.Button>
diff --git a/common/components/Input/Input.styled.tsx b/common/components/Input/Input.styled.tsx
index 92dec41c0..fab95a6ab 100644
--- a/common/components/Input/Input.styled.tsx
+++ b/common/components/Input/Input.styled.tsx
@@ -258,8 +258,9 @@ export const NewInputLabel = styled.label<{ error: boolean }>`
   `};
 `;
 
-export const ErrorMessage = styled.div`
+export const ErrorMessage = styled.div<{ settingsCustomMargin?: boolean }>`
   ${typography.body}
   color: ${palette.solid.red};
-  margin-top: -4px;
+  margin-top: ${({ settingsCustomMargin }) =>
+    settingsCustomMargin ? "-4px" : "8px"};
 `;
diff --git a/common/components/Input/Input.tsx b/common/components/Input/Input.tsx
index 8b888d1bc..f7b6f155f 100644
--- a/common/components/Input/Input.tsx
+++ b/common/components/Input/Input.tsx
@@ -28,7 +28,7 @@ import * as Styled from "./Input.styled";
 import { InputTextSize, NotReportedIconTooltipProps } from "./types";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
+  label?: string;
   noBottomMargin?: boolean;
   error?: FormError;
   valueLabel?: string;
@@ -41,6 +41,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   textSize?: InputTextSize;
   hideLabel?: boolean;
   fullWidth?: boolean;
+  agencySettingsConfigs?: boolean;
+  settingsCustomMargin?: boolean;
 }
 
 export function Input({
@@ -197,6 +199,8 @@ export function NewInput({
   metricKey,
   hideLabel,
   fullWidth,
+  agencySettingsConfigs,
+  settingsCustomMargin,
   ...props
 }: InputProps) {
   return (
@@ -219,7 +223,11 @@ export function NewInput({
         error={Boolean(error)}
         fullWidth={fullWidth}
       />
-      {error && <Styled.ErrorMessage>{error.message}</Styled.ErrorMessage>}
+      {error && (
+        <Styled.ErrorMessage settingsCustomMargin={settingsCustomMargin}>
+          {error.message}
+        </Styled.ErrorMessage>
+      )}
     </Styled.NewInputWrapper>
   );
 }
diff --git a/common/components/Modal/Modal.styled.tsx b/common/components/Modal/Modal.styled.tsx
index bbde8bd6b..1ec7a5e7d 100644
--- a/common/components/Modal/Modal.styled.tsx
+++ b/common/components/Modal/Modal.styled.tsx
@@ -61,6 +61,7 @@ export const InnerWrapper = styled.div<{
   modalType?: ModalType;
   centerText?: boolean;
   customPadding?: string;
+  noBottomDiv?: boolean;
 }>`
   background-color: ${palette.solid.white};
   width: 100%;
@@ -71,6 +72,11 @@ export const InnerWrapper = styled.div<{
   ${({ centerText }) => centerText && `align-items: center;`};
   border-radius: 3px;
   ${centerTextCSS}
+  ${({ noBottomDiv }) => {
+    if (noBottomDiv) {
+      return `& > div:last-child {display: none;}`;
+    }
+  }};
 `;
 
 export const Icon = styled.img`
@@ -79,21 +85,45 @@ export const Icon = styled.img`
   margin-bottom: 24px;
 `;
 
-export const Title = styled.div<{ mediumTitle?: boolean }>`
+export const Title = styled.div<{
+  mediumTitle?: boolean;
+}>`
   ${({ mediumTitle }) =>
-    mediumTitle ? typography.sizeCSS.medium : typography.sizeCSS.large};
+    mediumTitle
+      ? `${typography.sizeCSS.medium}`
+      : `${typography.sizeCSS.large}`};
+  margin-top: 16px;
   margin-bottom: 16px;
+  a {
+    color: ${palette.solid.blue};
+    text-decoration: none;
+  }
+`;
 
+export const AgencySettingsAndJurisdictionsTitle = styled.div`
+  ${typography.bodyEmphasized}
+  margin-bottom: 16px;
+  margin-top: 16px;
   a {
     color: ${palette.solid.blue};
     text-decoration: none;
   }
 `;
 
-export const Description = styled.div<{ centerText?: boolean }>`
+export const Description = styled.div<{
+  centerText?: boolean;
+  unsetTextAlignment?: boolean;
+}>`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: ${({ centerText, unsetTextAlignment }) => {
+    if (centerText) {
+      return `align-items: center;`;
+    }
+    if (unsetTextAlignment) {
+      return `align-items: unset;`;
+    }
+  }};
   ${typography.sizeCSS.normal};
 `;
 
@@ -104,7 +134,6 @@ export const ButtonsContainer = styled.div<{
   width: 100%;
   display: flex;
   gap: 12px;
-
   ${({ modalType, centerButtons }) => {
     if (centerButtons) return "justify-content: center; margin-top: 72px;";
     if (modalType) return "justify-content: space-between; margin-top: 72px;";
@@ -116,3 +145,26 @@ export const ButtonsContainer = styled.div<{
     margin-left: auto;
   }
 `;
+
+export const UnsavedChangesButtonsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  gap: 16px;
+  margin-top: 24px;
+  & > div:first-child {
+    div {
+      border: none;
+    }
+  }
+`;
+
+export const ModalTitleWrapper = styled.div<{
+  typographyBodyEmphasized?: boolean;
+}>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  ${({ typographyBodyEmphasized }) =>
+    typographyBodyEmphasized ? `${typography.bodyEmphasized}` : ""};
+`;
diff --git a/common/components/Modal/Modal.tsx b/common/components/Modal/Modal.tsx
index 48eb0fb25..e55843e47 100644
--- a/common/components/Modal/Modal.tsx
+++ b/common/components/Modal/Modal.tsx
@@ -19,6 +19,7 @@ import React, { useEffect } from "react";
 import { createPortal } from "react-dom";
 
 import alertIcon from "../../assets/alert-icon.png";
+import xCloseLg from "../../assets/close-icon-lg.svg";
 import successIcon from "../../assets/success-icon.png";
 import warningIcon from "../../assets/warning-icon.svg";
 import { Button, ButtonColor } from "../Button";
@@ -36,6 +37,12 @@ type ModalProps = Partial<{
   mediumTitle: boolean;
   customPadding?: string;
   children?: React.ReactNode;
+  onClickClose?: () => void;
+  agencySettingsConfigs?: boolean;
+  unsavedChangesConfigs?: boolean;
+  jurisdictionsSettingsConfigs?: boolean;
+  agencySettingsAndJurisdictionsTitleConfigs?: boolean;
+  noBottomDiv?: boolean;
 }>;
 
 export function Modal({
@@ -49,6 +56,11 @@ export function Modal({
   mediumTitle,
   customPadding,
   children,
+  onClickClose,
+  unsavedChangesConfigs,
+  jurisdictionsSettingsConfigs,
+  agencySettingsAndJurisdictionsTitleConfigs,
+  noBottomDiv,
 }: ModalProps) {
   const primaryButtonColor = (): ButtonColor => {
     if (modalType === "alert") return "red";
@@ -71,28 +83,67 @@ export function Modal({
           modalType={modalType}
           centerText={centerText}
           customPadding={customPadding}
+          noBottomDiv={noBottomDiv}
         >
           {modalType === "success" && <Styled.Icon src={successIcon} alt="" />}
           {modalType === "warning" && <Styled.Icon src={warningIcon} alt="" />}
           {modalType === "alert" && <Styled.Icon src={alertIcon} alt="" />}
-          <Styled.Title mediumTitle={mediumTitle}>{title}</Styled.Title>
-          <Styled.Description>{description}</Styled.Description>
-          <Styled.ButtonsContainer modalType={modalType}>
-            {buttons?.map((button, index) => (
+          <Styled.ModalTitleWrapper typographyBodyEmphasized>
+            {agencySettingsAndJurisdictionsTitleConfigs && (
+              <Styled.AgencySettingsAndJurisdictionsTitle>
+                {title}
+              </Styled.AgencySettingsAndJurisdictionsTitle>
+            )}
+            {!agencySettingsAndJurisdictionsTitleConfigs && (
+              <Styled.Title mediumTitle={mediumTitle}>{title}</Styled.Title>
+            )}
+            {onClickClose && (
               <Button
-                label={button.label}
-                onClick={button.onClick}
-                borderColor={
-                  index === buttons.length - 1 ? undefined : "lightgrey"
-                }
-                buttonColor={
-                  index === buttons.length - 1
-                    ? primaryButtonColor()
-                    : undefined
-                }
+                label={<img src={xCloseLg} alt="Close Button" />}
+                onClick={onClickClose}
+                agencySettingsConfigs
               />
-            ))}
-          </Styled.ButtonsContainer>
+            )}
+          </Styled.ModalTitleWrapper>
+          <Styled.Description unsetTextAlignment={jurisdictionsSettingsConfigs}>
+            {description}
+          </Styled.Description>
+          {!unsavedChangesConfigs && (
+            <Styled.ButtonsContainer modalType={modalType}>
+              {buttons?.map((button, index) => (
+                <Button
+                  label={button.label}
+                  onClick={button.onClick}
+                  borderColor={
+                    index === buttons.length - 1 ? undefined : "lightgrey"
+                  }
+                  buttonColor={
+                    index === buttons.length - 1
+                      ? primaryButtonColor()
+                      : undefined
+                  }
+                />
+              ))}
+            </Styled.ButtonsContainer>
+          )}
+          {unsavedChangesConfigs && (
+            <Styled.UnsavedChangesButtonsContainer>
+              {buttons?.map((button, index) => (
+                <Button
+                  label={button.label}
+                  onClick={button.onClick}
+                  borderColor={
+                    index === buttons.length - 1 ? undefined : "lightgrey"
+                  }
+                  buttonColor={
+                    index === buttons.length - 1
+                      ? primaryButtonColor()
+                      : undefined
+                  }
+                />
+              ))}
+            </Styled.UnsavedChangesButtonsContainer>
+          )}
         </Styled.InnerWrapper>
       )}
     </Styled.OuterWrapper>
diff --git a/common/utils/helperUtils.ts b/common/utils/helperUtils.ts
index 067e6b0b9..f57962612 100644
--- a/common/utils/helperUtils.ts
+++ b/common/utils/helperUtils.ts
@@ -277,6 +277,11 @@ export const validateEmail = (email: string) => {
   );
 };
 
+export const validateAgencyURL = (url: string) => {
+  const urlRegex = /^(?:(?:https?|ftp):\/\/)?[\w.-]+\.[a-zA-Z]{2,}(?:\/\S*)?$/;
+  return urlRegex.test(url);
+};
+
 /**
  * Updates a set of selections by either adding or removing a specified item.
  * @param prevSet - The previous set of selected items to update
diff --git a/publisher/src/components/Settings/AccountSettings.styles.tsx b/publisher/src/components/Settings/AccountSettings.styles.tsx
index ccd3f7baf..89dd93505 100644
--- a/publisher/src/components/Settings/AccountSettings.styles.tsx
+++ b/publisher/src/components/Settings/AccountSettings.styles.tsx
@@ -44,7 +44,6 @@ export const AccountSettingsTitle = styled.h1`
     padding: 0 0 24px 0;
   }
 `;
-
 export const AccountSettingsInputsWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -75,27 +74,67 @@ export const AccountSettingsInputsWrapper = styled.div`
   @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
     flex-direction: column;
     gap: 0;
-    margin-left: 0px;
+    margin-left: 0;
   }
 `;
 
-export const AccountSettingsInputsCol = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  gap: 0;
+export const AgencySettingsModalInputWrapperSmall = styled.div<{
+  error?: boolean;
+  unsavedChanges?: boolean;
+}>`
+  width: 100%;
+  ${({ unsavedChanges }) =>
+    unsavedChanges ? `${typography.body}` : "initial"};
+  label {
+    display: none;
+  }
+
   div {
-    flex-direction: column;
-    align-items: start;
+    width: 100%;
 
-    label {
-      flex-direction: row;
+    input {
+      ${typography.body}
+      color: ${palette.solid.black};
+      border: ${({ error }) =>
+        error
+          ? `1px solid ${palette.solid.red}`
+          : `1px solid ${palette.highlight.grey5}`};
     }
+  }
+  @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
+    flex-direction: column;
+    gap: 0;
+    margin-left: 0;
+  }
+`;
 
-    input {
-      flex-direction: row;
+export const AgencySettingsModalInputWrapperLarge = styled.div`
+  min-height: 179px;
+  width: 100%;
+  label {
+    display: none;
+  }
+  div {
+    textarea {
+      ${typography.body}
+      color: ${palette.solid.black};
     }
   }
+  @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
+    flex-direction: column;
+    gap: 0;
+    margin-left: 0;
+  }
+`;
+
+export const AccountSettingsSectionCol = styled.div`
+  flex-direction: column;
+  margin: 0;
+  min-width: 150px;
+  div {
+    flex-direction: column;
+    align-items: start;
+  }
 
   a {
     color: ${palette.solid.blue};
@@ -104,6 +143,17 @@ export const AccountSettingsInputsCol = styled.div`
   @media only screen and (max-width: ${MIN_DESKTOP_WIDTH}px) {
     flex-direction: row;
     gap: 0;
-    margin-left: 0px;
+    margin-left: 0;
   }
 `;
+
+export const AccountSettingsSectionLabel = styled.div`
+  flex-direction: row;
+  margin-bottom: 16px;
+`;
+
+export const AccountSettingsSectionData = styled.div`
+  flex-direction: row;
+  margin-bottom: 16px;
+  color: ${palette.highlight.grey9};
+`;
diff --git a/publisher/src/components/Settings/AccountSettings.tsx b/publisher/src/components/Settings/AccountSettings.tsx
index 9de6c48bf..ab31efa02 100644
--- a/publisher/src/components/Settings/AccountSettings.tsx
+++ b/publisher/src/components/Settings/AccountSettings.tsx
@@ -15,72 +15,176 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { Button } from "@justice-counts/common/components/Button";
 import { NewInput } from "@justice-counts/common/components/Input";
-import { debounce as _debounce } from "lodash";
-import React, { useRef } from "react";
+import { Modal } from "@justice-counts/common/components/Modal";
+import { validateEmail } from "@justice-counts/common/utils/helperUtils";
+import React from "react";
 
 import { useStore } from "../../stores";
 import {
-  AccountSettingsInputsCol,
   AccountSettingsInputsWrapper,
+  AccountSettingsSectionCol,
+  AccountSettingsSectionData,
+  AccountSettingsSectionLabel,
   AccountSettingsWrapper,
+  AgencySettingsModalInputWrapperSmall,
 } from "./AccountSettings.styles";
+import { EditButtonContainer } from "./AgencySettings.styles";
+
+enum EditType {
+  Name_edit = "name",
+  Email_edit = "email",
+}
 
 export const AccountSettings = () => {
   const { userStore } = useStore();
   const [email, setEmail] = React.useState<string>(userStore?.email || "");
   const [name, setName] = React.useState<string>(userStore?.name || "");
-
+  const [isSettingInEditMode, setIsSettingInEditMode] =
+    React.useState<boolean>(false);
+  const [editType, setEditType] = React.useState<string | undefined>(undefined);
+  const [isEmailValid, setIsEmailValid] = React.useState(true);
+  const [errorMsg, setErrorMsg] = React.useState<
+    { message: string } | undefined
+  >(undefined);
+  const onClickClose = () => {
+    setEmail(userStore?.email || "");
+    resetEditModeTypeStates();
+    setName(userStore?.name || "");
+    setIsSettingInEditMode(false);
+  };
+  const resetEditModeTypeStates = () => {
+    setIsSettingInEditMode(false);
+    setEditType(undefined);
+  };
+  const checkValidEmailUpdateErrorStates = (emailUpdate?: string) => {
+    const isValid: boolean = validateEmail(emailUpdate || "");
+    setIsEmailValid(isValid);
+    setErrorMsg(!isValid ? { message: "Invalid Email" } : undefined);
+    return isValid;
+  };
   const saveNameEmailChange = (nameUpdate?: string, emailUpdate?: string) => {
     if (nameUpdate) {
+      resetEditModeTypeStates();
       return userStore.updateUserNameAndEmail(nameUpdate, email);
     }
-    if (emailUpdate) {
-      return userStore.updateUserNameAndEmail(name, emailUpdate);
+    if (checkValidEmailUpdateErrorStates(emailUpdate)) {
+      resetEditModeTypeStates();
+      return userStore.updateUserNameAndEmail(name, String(emailUpdate));
     }
   };
-
-  const debouncedSave = useRef(_debounce(saveNameEmailChange, 1500)).current;
-
   return (
-    <AccountSettingsWrapper>
-      <AccountSettingsInputsWrapper>
-        <AccountSettingsInputsCol>
-          <NewInput
-            style={{ marginBottom: "0" }}
-            persistLabel
-            label=" Name"
-            value={name}
-            onChange={(e) => {
-              setName((prev) => e.target.value.trimStart() || prev);
-              debouncedSave(
-                e.target.value.trimStart() || userStore?.name,
-                undefined
-              );
-            }}
-          />
-          <span>
-            <a href="./namemodal">Edit</a>
-          </span>
-        </AccountSettingsInputsCol>
-        <AccountSettingsInputsCol>
-          <NewInput
-            persistLabel
-            label="Email"
-            value={email}
-            onChange={(e) => {
-              setEmail((prev) => e.target.value.trimStart() || prev);
-              debouncedSave(
-                undefined,
-                e.target.value.trimStart() || userStore?.email
-              );
-            }}
-          />
-          <span>
-            <a href="./emailmodal">Edit</a>
-          </span>
-        </AccountSettingsInputsCol>
-      </AccountSettingsInputsWrapper>
-    </AccountSettingsWrapper>
+    <>
+      {isSettingInEditMode && (
+        <>
+          {editType === EditType.Name_edit && (
+            <Modal
+              title="Name"
+              description={
+                <AgencySettingsModalInputWrapperSmall>
+                  <NewInput
+                    style={{ marginBottom: "0" }}
+                    persistLabel
+                    value={name}
+                    onChange={(e) => {
+                      setName(() => e.target.value.trimStart());
+                    }}
+                    agencySettingsConfigs
+                    fullWidth
+                  />
+                </AgencySettingsModalInputWrapperSmall>
+              }
+              buttons={[
+                {
+                  label: "Save",
+                  onClick: () => {
+                    saveNameEmailChange(name);
+                  },
+                },
+              ]}
+              modalBackground="opaque"
+              onClickClose={onClickClose}
+              agencySettingsConfigs
+              agencySettingsAndJurisdictionsTitleConfigs
+              customPadding="24px 40px 40px 24px"
+            />
+          )}
+          {editType === EditType.Email_edit && (
+            <Modal
+              title="Email"
+              description={
+                <AgencySettingsModalInputWrapperSmall error={!isEmailValid}>
+                  <NewInput
+                    style={{ marginBottom: "0" }}
+                    persistLabel
+                    value={email}
+                    error={errorMsg}
+                    onChange={(e) => {
+                      const emailUpdate = e.target.value.trimStart();
+                      setEmail(emailUpdate);
+                      checkValidEmailUpdateErrorStates(emailUpdate);
+                    }}
+                    fullWidth
+                    settingsCustomMargin
+                  />
+                </AgencySettingsModalInputWrapperSmall>
+              }
+              buttons={[
+                {
+                  label: "Save",
+                  onClick: () => {
+                    saveNameEmailChange(undefined, email);
+                  },
+                },
+              ]}
+              modalBackground="opaque"
+              onClickClose={onClickClose}
+              agencySettingsConfigs
+              agencySettingsAndJurisdictionsTitleConfigs
+              customPadding="24px 40px 24px 40px"
+            />
+          )}
+        </>
+      )}
+      <AccountSettingsWrapper>
+        <AccountSettingsInputsWrapper>
+          <AccountSettingsSectionCol>
+            <AccountSettingsSectionLabel>Name</AccountSettingsSectionLabel>
+            <AccountSettingsSectionData>{name}</AccountSettingsSectionData>
+            <EditButtonContainer>
+              <Button
+                label={<>Edit</>}
+                onClick={() => {
+                  setIsSettingInEditMode(true);
+                  setEditType(EditType.Name_edit);
+                }}
+                labelColor="blue"
+                noSidePadding
+                noTopBottomPadding
+                noHover
+              />
+            </EditButtonContainer>
+          </AccountSettingsSectionCol>
+          <AccountSettingsSectionCol>
+            <AccountSettingsSectionLabel>Email</AccountSettingsSectionLabel>
+            <AccountSettingsSectionData>{email}</AccountSettingsSectionData>
+            <EditButtonContainer>
+              <Button
+                label={<>Edit</>}
+                onClick={() => {
+                  setIsSettingInEditMode(true);
+                  setEditType(EditType.Email_edit);
+                }}
+                labelColor="blue"
+                noSidePadding
+                noTopBottomPadding
+                noHover
+              />
+            </EditButtonContainer>
+          </AccountSettingsSectionCol>
+        </AccountSettingsInputsWrapper>
+      </AccountSettingsWrapper>
+    </>
   );
 };
diff --git a/publisher/src/components/Settings/AgencySettings.styles.tsx b/publisher/src/components/Settings/AgencySettings.styles.tsx
index df491b336..29523e549 100644
--- a/publisher/src/components/Settings/AgencySettings.styles.tsx
+++ b/publisher/src/components/Settings/AgencySettings.styles.tsx
@@ -24,7 +24,6 @@ import {
 } from "@justice-counts/common/components/GlobalStyles";
 import styled from "styled-components/macro";
 
-import searchIcon from "../assets/search-icon.png";
 import { SETTINGS_MENU_WITH_PADDINGS_WIDTH } from "./Settings.styles";
 
 // Common
@@ -135,7 +134,6 @@ export const AgencySettingsBlockTitle = styled.div<{
   isEditModeActive?: boolean;
   configured?: boolean;
 }>`
-  ${typography.body};
   display: flex;
   line-height: 32px;
 `;
@@ -150,15 +148,6 @@ export const AgencySettingsBlockDescription = styled.div`
   color: ${palette.highlight.grey9};
 `;
 
-export const AgencySettingsBlockSubDescription = styled(
-  AgencySettingsBlockDescription
-)<{ hasTopMargin?: boolean }>`
-  ${typography.sizeCSS.small};
-  font-weight: 500;
-  padding: 0 8px;
-  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? "24px" : "0")};
-`;
-
 export const AgencyInfoBlockDescription = styled.div<{
   hasTopMargin?: boolean;
 }>`
@@ -183,9 +172,7 @@ export const AgencySettingsInfoRow = styled.div<{ hasHover?: boolean }>`
   justify-content: space-between;
   align-items: center;
 
-  ${({ hasHover }) =>
-    hasHover &&
-    `&:hover {cursor: pointer; background-color: ${palette.highlight.grey2}}`}
+  ${({ hasHover }) => hasHover && `&:hover {cursor: pointer;}`}
   span {
     ${typography.sizeCSS.normal};
     text-align: end;
@@ -193,9 +180,23 @@ export const AgencySettingsInfoRow = styled.div<{ hasHover?: boolean }>`
   }
 `;
 
-export const AgencyInfoTextAreaLabel = styled.label`
-  margin-bottom: 16px;
-  ${typography.sizeCSS.normal};
+export const AgencyInfoTextAreaLabel = styled.label<{
+  agencyDescriptionConfigs?: boolean;
+}>`
+  ${({ agencyDescriptionConfigs }) => {
+    if (agencyDescriptionConfigs) {
+      return `align-self: 
+         flex-start; 
+         margin-top: 12px; 
+         margin-bottom: 24px;
+         ${typography.body};
+         a {
+            text-decoration: none;
+            color: ${palette.solid.blue};
+          }`;
+    }
+    return `margin-bottom: 16px; ${typography.sizeCSS.normal};`;
+  }};
 `;
 
 export const AgencyInfoTextAreaWordCounter = styled.div<{ isRed: boolean }>`
@@ -450,24 +451,22 @@ export const SupervisionSystemRow = styled(AgencySettingsInfoRow)<{
 export const JurisdictionsInputWrapper = styled.div`
   position: relative;
 `;
-
+export const JurisdictionsSearchBarContainer = styled.div`
+  border-top: 1px solid ${palette.highlight.grey5};
+  border-bottom: 1px solid ${palette.highlight.grey5};
+  margin-left: -40px;
+  margin-right: -40px;
+  padding: 40px 40px;
+  margin-bottom: 24px;
+`;
 export const JurisdictionsSearchBar = styled.input<{
   value: string | undefined;
 }>`
   ${typography.sizeCSS.normal};
   padding: 12px 13px;
   width: 100%;
-  background-image: url(${searchIcon});
-  background-position: left 16px top 50%;
-  background-repeat: no-repeat;
-  margin-bottom: 24px;
-  text-indent: 24px;
-  background-color: ${({ value }) =>
-    value ? palette.highlight.lightblue1 : palette.highlight.grey1};
-  border: none;
-  border-bottom: 1px solid
-    ${({ value }) => (value ? palette.solid.blue : palette.highlight.grey9)};
-  min-width: 266px;
+  text-indent: 12px;
+  border: 1px solid ${palette.highlight.grey5};
   caret-color: ${palette.solid.blue};
 
   &:focus {
@@ -478,12 +477,12 @@ export const JurisdictionsSearchBar = styled.input<{
 export const JurisdictionsSearchResultContainer = styled.div`
   position: absolute;
   z-index: 5;
-  width: ${AGENCY_SETTINGS_CONTAINER_WIDTH}px;
+  width: 100%;
   padding: 8px 0;
   overflow-y: auto;
   max-height: 270px;
   background-color: ${palette.solid.white};
-  top: 55px;
+  top: 135px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 0 1px rgba(23, 28, 43, 0.1), 0 4px 8px rgba(23, 28, 43, 0.04),
@@ -507,15 +506,6 @@ export const JurisdictionsSearchResult = styled.div<{ hasAction?: boolean }>`
   }
 `;
 
-export const JurisdictionAreaType = styled.div`
-  ${typography.body};
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  text-transform: capitalize;
-  color: ${palette.highlight.grey9};
-`;
-
 export const JurisdictionsListArea = styled.div`
   display: flex;
   flex-direction: column;
@@ -552,15 +542,11 @@ export const JurisdictionCheckBlock = styled.div`
 export const JurisdictionsEditModeFooter = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-`;
-
-export const JurisdictionsEditModeFooterLeftBlock = styled.div`
-  ${typography.sizeCSS.normal};
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 16px;
+  border-top: 1px solid ${palette.highlight.grey5};
+  margin-right: -40px;
+  margin-left: -40px;
+  justify-content: flex-end;
+  padding-right: 24px;
 `;
 
 export const CheckboxWrapper = styled.div`
@@ -569,14 +555,20 @@ export const CheckboxWrapper = styled.div`
   z-index: 1;
 `;
 
-export const Checkbox = styled.input`
-  appearance: none;
+export const CheckboxLabelWrapper = styled.div`
+  color: ${palette.solid.black};
+`;
+
+export const Checkbox = styled.input<{
+  squareCheckboxConfigs?: boolean;
+}>`
+  appearance: ${({ squareCheckboxConfigs }) =>
+    squareCheckboxConfigs ? "auto" : "none"};
   width: 20px;
   height: 20px;
   background: transparent;
   border: 1px solid ${palette.highlight.grey6};
   border-radius: 100%;
-
   &:hover {
     cursor: pointer;
   }
diff --git a/publisher/src/components/Settings/AgencySettingsDescription.tsx b/publisher/src/components/Settings/AgencySettingsDescription.tsx
index 9603c7445..7c107440c 100644
--- a/publisher/src/components/Settings/AgencySettingsDescription.tsx
+++ b/publisher/src/components/Settings/AgencySettingsDescription.tsx
@@ -16,27 +16,25 @@
 // =============================================================================
 
 import { Button } from "@justice-counts/common/components/Button";
-import { Input } from "@justice-counts/common/components/Input";
+import { NewInput } from "@justice-counts/common/components/Input";
+import { Modal } from "@justice-counts/common/components/Modal";
 import { observer } from "mobx-react-lite";
 import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { useStore } from "../../stores";
+import { AgencySettingsModalInputWrapperLarge } from "./AccountSettings.styles";
 import { SettingProps } from "./AgencySettings";
 import {
   AgencyInfoBlockDescription,
   AgencyInfoTextAreaLabel,
-  AgencyInfoTextAreaWordCounter,
   AgencySettingActionRequiredIndicator,
   AgencySettingsBlock,
   AgencySettingsBlockTitle,
   EditButtonContainer,
-  EditModeButtonsContainer,
 } from "./AgencySettings.styles";
 import { AgencySettingsEditModeModal } from "./AgencySettingsEditModeModal";
 
-const MAX_DESCRIPTION_CHARACTERS = 750;
-
 const AgencySettingsDescription: React.FC<{
   settingProps: SettingProps;
 }> = ({ settingProps }) => {
@@ -77,7 +75,6 @@ const AgencySettingsDescription: React.FC<{
     setIsConfirmModalOpen(false);
     removeEditMode();
   };
-
   return (
     <>
       {isSettingInEditMode && (
@@ -87,37 +84,42 @@ const AgencySettingsDescription: React.FC<{
           closeCancelModal={() => setIsConfirmModalOpen(false)}
           handleCancelModalConfirm={handleModalConfirm}
         >
-          <>
-            <AgencySettingsBlockTitle isEditModeActive>
-              Agency Information
-            </AgencySettingsBlockTitle>
-            <AgencyInfoTextAreaLabel>
-              Briefly describe your agency’s purpose and functions. This text
-              will be displayed in the About page of the public-facing
-              dashboard.
-            </AgencyInfoTextAreaLabel>
-            <Input
-              name="basic-info-description"
-              label=""
-              onChange={(e) => setInfoText(e.target.value)}
-              placeholder="Enter agency description..."
-              isPlaceholderVisible
-              multiline
-              value={infoText}
-              maxLength={750}
-            />
-            <AgencyInfoTextAreaWordCounter isRed={infoText.length >= 750}>
-              {infoText.length}/{MAX_DESCRIPTION_CHARACTERS} characters
-            </AgencyInfoTextAreaWordCounter>
-            <EditModeButtonsContainer noMargin>
-              <Button label="Cancel" onClick={handleCancelClick} />
-              <Button
-                label="Save"
-                onClick={handleSaveClick}
-                buttonColor="blue"
-              />
-            </EditModeButtonsContainer>
-          </>
+          <Modal
+            title="Agency Description"
+            description={
+              <>
+                <AgencyInfoTextAreaLabel agencyDescriptionConfigs>
+                  This description will go on your public-facing dashboard.
+                </AgencyInfoTextAreaLabel>
+                <AgencySettingsModalInputWrapperLarge>
+                  <NewInput
+                    style={{ marginBottom: "0" }}
+                    persistLabel
+                    value={infoText}
+                    placeholder="Write a description of your agency"
+                    isPlaceholderVisible
+                    multiline
+                    maxLength={750}
+                    onChange={(e) => setInfoText(e.target.value)}
+                    fullWidth
+                  />
+                </AgencySettingsModalInputWrapperLarge>
+              </>
+            }
+            buttons={[
+              {
+                label: "Save",
+                onClick: () => {
+                  handleSaveClick();
+                },
+              },
+            ]}
+            modalBackground="opaque"
+            onClickClose={handleCancelClick}
+            agencySettingsConfigs
+            agencySettingsAndJurisdictionsTitleConfigs
+            customPadding="24px 40px 24px 40px"
+          />
         </AgencySettingsEditModeModal>
       )}
 
diff --git a/publisher/src/components/Settings/AgencySettingsEditModeModal.tsx b/publisher/src/components/Settings/AgencySettingsEditModeModal.tsx
index 6272d8546..9b87b0797 100644
--- a/publisher/src/components/Settings/AgencySettingsEditModeModal.tsx
+++ b/publisher/src/components/Settings/AgencySettingsEditModeModal.tsx
@@ -21,6 +21,8 @@ import React, { useEffect } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components/macro";
 
+import { AgencySettingsModalInputWrapperSmall } from "./AccountSettings.styles";
+
 // z-index 101 to be above all
 const EditModalOuterWrapper = styled.div`
   position: fixed;
@@ -79,12 +81,20 @@ export const AgencySettingsEditModeModal: React.FC<{
       {isConfirmModalOpen && (
         <Modal
           title="Unsaved changes"
-          description="You have unsaved changes, would like to leave anyway?"
+          description={
+            <AgencySettingsModalInputWrapperSmall unsavedChanges>
+              You have unsaved changes, would you like to leave anyway?
+            </AgencySettingsModalInputWrapperSmall>
+          }
           buttons={[
-            { label: "Leave", onClick: handleCancelModalConfirm },
             { label: "Cancel", onClick: closeCancelModal },
+            { label: "Leave", onClick: handleCancelModalConfirm },
           ]}
-          centerText
+          modalBackground="opaque"
+          onClickClose={closeCancelModal}
+          agencySettingsConfigs
+          unsavedChangesConfigs
+          agencySettingsAndJurisdictionsTitleConfigs
         />
       )}
     </>
diff --git a/publisher/src/components/Settings/AgencySettingsJurisdictions.tsx b/publisher/src/components/Settings/AgencySettingsJurisdictions.tsx
index a6b679995..6efc189a7 100644
--- a/publisher/src/components/Settings/AgencySettingsJurisdictions.tsx
+++ b/publisher/src/components/Settings/AgencySettingsJurisdictions.tsx
@@ -19,6 +19,11 @@
 import addIcon from "@justice-counts/common/assets/add-icon.svg";
 import blackCheck from "@justice-counts/common/assets/black-check-icon.svg";
 import { Button } from "@justice-counts/common/components/Button";
+import { Modal } from "@justice-counts/common/components/Modal";
+import {
+  RadioButton,
+  RadioButtonsWrapper,
+} from "@justice-counts/common/components/RadioButton";
 import mappedJurisdictionsJSONData from "@justice-counts/common/fips_with_county_subdivisions.json";
 import { Jurisdiction } from "@justice-counts/common/types";
 import { observer } from "mobx-react-lite";
@@ -32,22 +37,20 @@ import {
   AgencyInfoBlockDescription,
   AgencySettingsBlock,
   AgencySettingsBlockDescription,
-  AgencySettingsBlockSubDescription,
   BasicInfoBlockTitle,
   BlueCheckIcon,
   Checkbox,
   CheckboxWrapper,
   EditButtonContainer,
   EditModeButtonsContainer,
-  JurisdictionAreaType,
   JurisdictionCheckBlock,
   JurisdictionsEditModeFooter,
-  JurisdictionsEditModeFooterLeftBlock,
   JurisdictionsInfoCol,
   JurisdictionsInfoRow,
   JurisdictionsInputWrapper,
   JurisdictionsListArea,
   JurisdictionsSearchBar,
+  JurisdictionsSearchBarContainer,
   JurisdictionsSearchResult,
   JurisdictionsSearchResultContainer,
 } from "./AgencySettings.styles";
@@ -57,6 +60,12 @@ const mappedJurisdictionsData = mappedJurisdictionsJSONData as unknown as {
   [id: string]: Jurisdiction;
 };
 
+const radioWrapperSpacing = {
+  top: -8,
+  right: 0,
+  bottom: 16,
+  left: 0,
+};
 export const AgencySettingsJurisdictions: React.FC<{
   settingProps: SettingProps;
 }> = observer(({ settingProps }) => {
@@ -83,8 +92,6 @@ export const AgencySettingsJurisdictions: React.FC<{
   const [checkedJurisdictionsIds, setCheckedJurisdictionsIds] = useState<
     string[]
   >([]);
-
-  const checkedAreasCount = checkedJurisdictionsIds.length;
   const hasInclusions = includedJurisdictionsIds.length > 0;
   const hasExclusions = excludedJurisdictionsIds.length > 0;
   const isAgencySettingConfigured = hasInclusions || hasExclusions;
@@ -242,199 +249,205 @@ export const AgencySettingsJurisdictions: React.FC<{
           closeCancelModal={() => setIsConfirmModalOpen(false)}
           handleCancelModalConfirm={handleModalConfirm}
         >
-          <>
-            <BasicInfoBlockTitle isEditModeActive>
-              {isExclusionsViewActive
-                ? "Which jurisdiction should be excluded?"
-                : "Jurisdictions"}
-            </BasicInfoBlockTitle>
-            <AgencySettingsBlockDescription>
-              Add counties, states, or counties subdivisions that{" "}
-              {isExclusionsViewActive && "DO NOT"} correspond with your agency.
-            </AgencySettingsBlockDescription>
-            <JurisdictionsInputWrapper>
-              <JurisdictionsSearchBar
-                placeholder="Type in the name of your jurisdiction (for example, Thurston County)"
-                value={inputValue}
-                onChange={(e) => {
-                  setInputValue(e.target.value);
-                  getSearch(e.target.value);
-                }}
-              />
-              {!!inputValue &&
-                (searchResult.length === 0 ? (
-                  <JurisdictionsSearchResultContainer>
-                    <JurisdictionsSearchResult>
-                      No matches
-                    </JurisdictionsSearchResult>
-                  </JurisdictionsSearchResultContainer>
-                ) : (
-                  <JurisdictionsSearchResultContainer>
-                    {searchResult
-                      .slice(0, totalSearchResultsShow)
-                      .map((result) => (
-                        <JurisdictionsSearchResult
-                          key={result.id}
-                          hasAction
-                          onClick={() => handleAddArea(result.id)}
-                        >
-                          {result.name}
-                          <JurisdictionAreaType>
-                            {removeUnderscore(result.type)}{" "}
-                            <AddIcon src={addIcon} alt="" />
-                          </JurisdictionAreaType>
-                        </JurisdictionsSearchResult>
-                      ))}
-                    {!!inputValue &&
-                      searchResult.length > totalSearchResultsShow && (
-                        <Button
-                          label="See More"
-                          onClick={() =>
-                            setTotalSearchResultsShow(
-                              totalSearchResultsShow + 10
-                            )
-                          }
-                          labelColor="blue"
-                          noHover
-                        />
-                      )}
-                  </JurisdictionsSearchResultContainer>
-                ))}
-            </JurisdictionsInputWrapper>
-
-            {!isExclusionsViewActive && (
+          <Modal
+            title="Jurisdictions"
+            description={
               <>
-                <AgencySettingsBlockSubDescription>
-                  Areas included
-                </AgencySettingsBlockSubDescription>
-                <JurisdictionsListArea>
-                  {editedIncludedJurisdictionsIds.map((id) => (
-                    <JurisdictionsInfoRow
-                      key={id}
-                      hasHover
-                      onClick={() => handleCheckedJurisdictionsIds(id)}
-                    >
-                      {mappedJurisdictionsData[id].name}
-                      <JurisdictionCheckBlock>
-                        {removeUnderscore(mappedJurisdictionsData[id].type)}
-                        <CheckboxWrapper>
-                          <Checkbox
-                            type="checkbox"
-                            checked={checkedJurisdictionsIds.includes(id)}
-                            onChange={() => handleCheckedJurisdictionsIds(id)}
-                          />
-                          <BlueCheckIcon src={blackCheck} alt="" enabled />
-                        </CheckboxWrapper>
-                      </JurisdictionCheckBlock>
-                    </JurisdictionsInfoRow>
-                  ))}
-                </JurisdictionsListArea>
-              </>
-            )}
-
-            {isExclusionsViewActive && (
-              <>
-                <AgencySettingsBlockSubDescription>
-                  Areas excluded
-                </AgencySettingsBlockSubDescription>
-                <JurisdictionsListArea>
-                  {editedExcludedJurisdictionsIds.map((id) => (
-                    <JurisdictionsInfoRow
-                      key={id}
-                      hasHover
-                      onClick={() => handleCheckedJurisdictionsIds(id)}
-                    >
-                      {mappedJurisdictionsData[id].name}
-                      <JurisdictionCheckBlock>
-                        {removeUnderscore(mappedJurisdictionsData[id].type)}
-                        <CheckboxWrapper>
-                          <Checkbox
-                            type="checkbox"
-                            checked={checkedJurisdictionsIds.includes(id)}
-                            onChange={() => handleCheckedJurisdictionsIds(id)}
-                          />
-                          <BlueCheckIcon src={blackCheck} alt="" enabled />
-                        </CheckboxWrapper>
-                      </JurisdictionCheckBlock>
-                    </JurisdictionsInfoRow>
-                  ))}
-                </JurisdictionsListArea>
+                <JurisdictionsInputWrapper>
+                  <JurisdictionsSearchBarContainer>
+                    <RadioButtonsWrapper spacing={radioWrapperSpacing}>
+                      <RadioButton
+                        type="radio"
+                        id="include"
+                        name="exclusionsView"
+                        label="Include"
+                        onClick={() =>
+                          setIsExclusionsViewActive(!isExclusionsViewActive)
+                        }
+                        defaultChecked={!isExclusionsViewActive}
+                        buttonSize="large"
+                      />
+                      <RadioButton
+                        type="radio"
+                        id="exclude"
+                        name="exclusionsView"
+                        label="Exclude"
+                        onClick={() =>
+                          setIsExclusionsViewActive(!isExclusionsViewActive)
+                        }
+                        defaultChecked={isExclusionsViewActive}
+                        buttonSize="large"
+                      />
+                    </RadioButtonsWrapper>
+                    <JurisdictionsSearchBar
+                      placeholder="Select County"
+                      value={inputValue}
+                      onChange={(e) => {
+                        setInputValue(e.target.value);
+                        getSearch(e.target.value);
+                      }}
+                    />
+                  </JurisdictionsSearchBarContainer>
+                  {!!inputValue &&
+                    (searchResult.length === 0 ? (
+                      <JurisdictionsSearchResultContainer>
+                        <JurisdictionsSearchResult>
+                          No matches
+                        </JurisdictionsSearchResult>
+                      </JurisdictionsSearchResultContainer>
+                    ) : (
+                      <JurisdictionsSearchResultContainer>
+                        {searchResult
+                          .slice(0, totalSearchResultsShow)
+                          .map((result) => (
+                            <JurisdictionsSearchResult
+                              key={result.id}
+                              hasAction
+                              onClick={() => handleAddArea(result.id)}
+                            >
+                              <JurisdictionsInfoCol>
+                                <div>{result.name}</div>
+                                <div>
+                                  <span>{removeUnderscore(result.type)}</span>
+                                </div>
+                              </JurisdictionsInfoCol>
+                              <JurisdictionsInfoCol>
+                                <div>
+                                  <AddIcon src={addIcon} alt="" />
+                                </div>
+                              </JurisdictionsInfoCol>
+                            </JurisdictionsSearchResult>
+                          ))}
+                        {!!inputValue &&
+                          searchResult.length > totalSearchResultsShow && (
+                            <Button
+                              label="See More"
+                              onClick={() =>
+                                setTotalSearchResultsShow(
+                                  totalSearchResultsShow + 10
+                                )
+                              }
+                              labelColor="blue"
+                              noHover
+                            />
+                          )}
+                      </JurisdictionsSearchResultContainer>
+                    ))}
+                </JurisdictionsInputWrapper>
+                {!isExclusionsViewActive && (
+                  <JurisdictionsListArea>
+                    {editedIncludedJurisdictionsIds.map((id) => (
+                      <JurisdictionsInfoRow
+                        key={id}
+                        hasHover={false}
+                        onClick={() => handleCheckedJurisdictionsIds(id)}
+                      >
+                        <JurisdictionsInfoCol>
+                          <div>{mappedJurisdictionsData[id].name}</div>
+                          <div>
+                            <span>
+                              {removeUnderscore(
+                                mappedJurisdictionsData[id].type
+                              )}
+                            </span>
+                          </div>
+                        </JurisdictionsInfoCol>
+                        <JurisdictionsInfoCol>
+                          <JurisdictionCheckBlock>
+                            <CheckboxWrapper>
+                              <Checkbox
+                                type="checkbox"
+                                checked={checkedJurisdictionsIds.includes(id)}
+                                onChange={() =>
+                                  handleCheckedJurisdictionsIds(id)
+                                }
+                                squareCheckboxConfigs
+                              />
+                              <BlueCheckIcon src={blackCheck} alt="" enabled />
+                            </CheckboxWrapper>
+                          </JurisdictionCheckBlock>
+                        </JurisdictionsInfoCol>
+                      </JurisdictionsInfoRow>
+                    ))}
+                  </JurisdictionsListArea>
+                )}
+                {isExclusionsViewActive && (
+                  <JurisdictionsListArea>
+                    {editedExcludedJurisdictionsIds.map((id) => (
+                      <JurisdictionsInfoRow
+                        key={id}
+                        hasHover={false}
+                        onClick={() => handleCheckedJurisdictionsIds(id)}
+                      >
+                        <JurisdictionsInfoCol>
+                          <div>{mappedJurisdictionsData[id].name}</div>
+                          <div>
+                            <span>
+                              {removeUnderscore(
+                                mappedJurisdictionsData[id].type
+                              )}
+                            </span>
+                          </div>
+                        </JurisdictionsInfoCol>
+                        <JurisdictionsInfoCol>
+                          <JurisdictionCheckBlock>
+                            <CheckboxWrapper>
+                              <Checkbox
+                                type="checkbox"
+                                checked={checkedJurisdictionsIds.includes(id)}
+                                onChange={() =>
+                                  handleCheckedJurisdictionsIds(id)
+                                }
+                                squareCheckboxConfigs
+                              />
+                              <BlueCheckIcon src={blackCheck} alt="" enabled />
+                            </CheckboxWrapper>
+                          </JurisdictionCheckBlock>
+                        </JurisdictionsInfoCol>
+                      </JurisdictionsInfoRow>
+                    ))}
+                  </JurisdictionsListArea>
+                )}
+                <JurisdictionsEditModeFooter>
+                  {checkedJurisdictionsIds.length === 0 ? (
+                    <EditModeButtonsContainer>
+                      <Button
+                        label="Save"
+                        onClick={handleSaveClick}
+                        buttonColor="blue"
+                      />
+                    </EditModeButtonsContainer>
+                  ) : (
+                    <EditModeButtonsContainer>
+                      <Button
+                        label="Cancel"
+                        onClick={() => setCheckedJurisdictionsIds([])}
+                        labelColor="blue"
+                        noSidePadding
+                        noHover
+                      />
+                      <Button
+                        label="Remove"
+                        onClick={() =>
+                          handleRemoveJurisdictions(checkedJurisdictionsIds)
+                        }
+                        buttonColor="blue"
+                        noSidePadding
+                        noHover
+                      />
+                    </EditModeButtonsContainer>
+                  )}
+                </JurisdictionsEditModeFooter>
               </>
-            )}
-
-            <JurisdictionsEditModeFooter>
-              {isExclusionsViewActive ? (
-                <JurisdictionsEditModeFooterLeftBlock>
-                  {hasInclusions
-                    ? `${editedIncludedJurisdictionsIds.length} ${
-                        editedIncludedJurisdictionsIds.length > 1
-                          ? "areas"
-                          : "area"
-                      } included`
-                    : "Need to declare included areas?"}
-                  <Button
-                    label={hasInclusions ? "View and Edit" : "Add them"}
-                    onClick={() =>
-                      setIsExclusionsViewActive(!isExclusionsViewActive)
-                    }
-                    labelColor="blue"
-                    noSidePadding
-                    noHover
-                  />
-                </JurisdictionsEditModeFooterLeftBlock>
-              ) : (
-                <JurisdictionsEditModeFooterLeftBlock>
-                  {hasExclusions
-                    ? `${editedExcludedJurisdictionsIds.length} ${
-                        editedExcludedJurisdictionsIds.length > 1
-                          ? "areas"
-                          : "area"
-                      } excluded`
-                    : "Need to declare excluded areas?"}
-                  <Button
-                    label={hasExclusions ? "View and Edit" : "Add them"}
-                    onClick={() =>
-                      setIsExclusionsViewActive(!isExclusionsViewActive)
-                    }
-                    labelColor="blue"
-                    noSidePadding
-                    noHover
-                  />
-                </JurisdictionsEditModeFooterLeftBlock>
-              )}
-              {checkedJurisdictionsIds.length === 0 ? (
-                <EditModeButtonsContainer>
-                  <Button label="Cancel" onClick={handleCancelClick} />
-                  <Button
-                    label="Save"
-                    onClick={handleSaveClick}
-                    buttonColor="blue"
-                  />
-                </EditModeButtonsContainer>
-              ) : (
-                <EditModeButtonsContainer>
-                  <Button
-                    label="Cancel"
-                    onClick={() => setCheckedJurisdictionsIds([])}
-                    labelColor="blue"
-                    noSidePadding
-                    noHover
-                  />
-                  <Button
-                    label={`Remove ${checkedAreasCount} ${
-                      checkedAreasCount > 1 ? "areas" : "area"
-                    }`}
-                    onClick={() =>
-                      handleRemoveJurisdictions(checkedJurisdictionsIds)
-                    }
-                    labelColor="red"
-                    noSidePadding
-                    noHover
-                  />
-                </EditModeButtonsContainer>
-              )}
-            </JurisdictionsEditModeFooter>
-          </>
+            }
+            modalBackground="opaque"
+            onClickClose={handleCancelClick}
+            agencySettingsConfigs
+            jurisdictionsSettingsConfigs
+            agencySettingsAndJurisdictionsTitleConfigs
+            customPadding="8px 40px 16px 40px"
+            noBottomDiv
+          />
         </AgencySettingsEditModeModal>
       )}
 
diff --git a/publisher/src/components/Settings/AgencySettingsSupervisions.tsx b/publisher/src/components/Settings/AgencySettingsSupervisions.tsx
index e37404c56..4409032dd 100644
--- a/publisher/src/components/Settings/AgencySettingsSupervisions.tsx
+++ b/publisher/src/components/Settings/AgencySettingsSupervisions.tsx
@@ -17,26 +17,35 @@
 
 import blueCheck from "@justice-counts/common/assets/status-check-icon.png";
 import { Button } from "@justice-counts/common/components/Button";
+import { Modal } from "@justice-counts/common/components/Modal";
 import { AgencySystem } from "@justice-counts/common/types";
 import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { useStore } from "../../stores";
+import { AppGuideKeys, GuideKeys } from "../HelpCenter/types";
+import { createURLToGuide } from "../HelpCenter/utils";
+import { AgencySettingsModalInputWrapperLarge } from "./AccountSettings.styles";
 import { SettingProps } from "./AgencySettings";
 import {
   AgencyInfoBlockDescription,
+  AgencyInfoTextAreaLabel,
   AgencySettingsBlock,
   AgencySettingsBlockDescription,
   BasicInfoBlockTitle,
   BlueCheckIcon,
   Checkbox,
+  CheckboxLabelWrapper,
   CheckboxWrapper,
   EditButtonContainer,
-  EditModeButtonsContainer,
   SupervisionSystemRow,
 } from "./AgencySettings.styles";
 import { AgencySettingsEditModeModal } from "./AgencySettingsEditModeModal";
 
+const learnMoreURL = createURLToGuide(
+  AppGuideKeys.publisher,
+  GuideKeys.SupervisionSystemsDisaggregation
+);
 const supervisionAgencySystems: { label: string; value: AgencySystem }[] = [
   { label: "Parole", value: "PAROLE" },
   {
@@ -129,45 +138,65 @@ export const AgencySettingsSupervisions: React.FC<{
           closeCancelModal={() => setIsConfirmModalOpen(false)}
           handleCancelModalConfirm={handleModalConfirm}
         >
-          <>
-            <BasicInfoBlockTitle isEditModeActive>
-              Supervision Populations
-            </BasicInfoBlockTitle>
-            <AgencySettingsBlockDescription>
-              Select the supervision populations that your agency is responsible
-              for.
-            </AgencySettingsBlockDescription>
-            {supervisionAgencySystems.map(({ label, value }) => (
-              <SupervisionSystemRow
-                key={value}
-                hasHover={isSettingInEditMode}
-                onClick={() => handleSetSupervisionSystemsToSave(value)}
-                isModal
-              >
-                <CheckboxWrapper>
-                  <Checkbox
-                    type="checkbox"
-                    checked={
-                      supervisionSystemsToSave?.includes(
-                        value as AgencySystem
-                      ) || false
-                    }
-                    onChange={() => handleSetSupervisionSystemsToSave(value)}
-                  />
-                  <BlueCheckIcon src={blueCheck} alt="" enabled />
-                </CheckboxWrapper>
-                {label}
-              </SupervisionSystemRow>
-            ))}
-            <EditModeButtonsContainer>
-              <Button label="Cancel" onClick={handleCancelClick} />
-              <Button
-                label="Save"
-                onClick={handleSaveClick}
-                buttonColor="blue"
-              />
-            </EditModeButtonsContainer>
-          </>
+          <Modal
+            title="Supervision Populations"
+            description={
+              <>
+                <AgencyInfoTextAreaLabel agencyDescriptionConfigs>
+                  Select the supervision populations that your agency is
+                  responsible for. This enables disaggregating data by selected
+                  population types.
+                  <a
+                    href={learnMoreURL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    &nbsp;Learn More
+                  </a>
+                </AgencyInfoTextAreaLabel>
+                <AgencySettingsModalInputWrapperLarge>
+                  {supervisionAgencySystems.map(({ label, value }) => (
+                    <SupervisionSystemRow
+                      key={value}
+                      hasHover={false}
+                      onClick={() => handleSetSupervisionSystemsToSave(value)}
+                      isModal
+                    >
+                      <CheckboxWrapper>
+                        <Checkbox
+                          type="checkbox"
+                          checked={
+                            supervisionSystemsToSave?.includes(
+                              value as AgencySystem
+                            ) || false
+                          }
+                          onChange={() =>
+                            handleSetSupervisionSystemsToSave(value)
+                          }
+                          squareCheckboxConfigs
+                        />
+                        <BlueCheckIcon src={blueCheck} alt="" enabled />
+                      </CheckboxWrapper>
+                      <CheckboxLabelWrapper>{label}</CheckboxLabelWrapper>
+                    </SupervisionSystemRow>
+                  ))}
+                </AgencySettingsModalInputWrapperLarge>
+              </>
+            }
+            buttons={[
+              {
+                label: "Save",
+                onClick: () => {
+                  handleSaveClick();
+                },
+              },
+            ]}
+            modalBackground="opaque"
+            onClickClose={handleCancelClick}
+            agencySettingsConfigs
+            agencySettingsAndJurisdictionsTitleConfigs
+            customPadding="24px 40px 24px 40px"
+          />
         </AgencySettingsEditModeModal>
       )}
 
diff --git a/publisher/src/components/Settings/AgencySettingsURL.tsx b/publisher/src/components/Settings/AgencySettingsURL.tsx
index 693047416..41707165c 100644
--- a/publisher/src/components/Settings/AgencySettingsURL.tsx
+++ b/publisher/src/components/Settings/AgencySettingsURL.tsx
@@ -17,22 +17,23 @@
 
 import { Button } from "@justice-counts/common/components/Button";
 import { formatExternalLink } from "@justice-counts/common/components/DataViz/utils";
-import { Input } from "@justice-counts/common/components/Input";
+import { NewInput } from "@justice-counts/common/components/Input";
+import { Modal } from "@justice-counts/common/components/Modal";
+import { validateAgencyURL } from "@justice-counts/common/utils/helperUtils";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { useStore } from "../../stores";
+import { AgencySettingsModalInputWrapperSmall } from "./AccountSettings.styles";
 import { SettingProps } from "./AgencySettings";
 import {
   AgencyInfoBlockDescription,
   AgencyInfoLink,
-  AgencyInfoTextAreaLabel,
   AgencySettingActionRequiredIndicator,
   AgencySettingsBlock,
   AgencySettingsBlockTitle,
   EditButtonContainer,
-  EditModeButtonsContainer,
 } from "./AgencySettings.styles";
 import { AgencySettingsEditModeModal } from "./AgencySettingsEditModeModal";
 
@@ -56,15 +57,24 @@ const AgencySettingsUrl: React.FC<{
     )?.value || "";
 
   const isAgencySettingConfigured = Boolean(homepageUrlSetting);
-
+  const [errorMsg, setErrorMsg] = React.useState<
+    { message: string } | undefined
+  >(undefined);
+  const checkValidURLSetResetErrorMsg = (urlUpdate: string) => {
+    const isValid = urlUpdate === "" || validateAgencyURL(urlUpdate);
+    setErrorMsg(!isValid ? { message: "Invalid URL" } : undefined);
+    return isValid;
+  };
   const handleSaveClick = () => {
-    const updatedSettings = updateAgencySettings(
-      "HOMEPAGE_URL",
-      urlText,
-      parseInt(agencyId)
-    );
-    saveAgencySettings(updatedSettings, agencyId);
-    removeEditMode();
+    if (checkValidURLSetResetErrorMsg(urlText)) {
+      const updatedSettings = updateAgencySettings(
+        "HOMEPAGE_URL",
+        urlText,
+        parseInt(agencyId)
+      );
+      saveAgencySettings(updatedSettings, agencyId);
+      removeEditMode();
+    }
   };
   const handleCancelClick = () => {
     if (homepageUrlSetting === urlText) {
@@ -72,6 +82,7 @@ const AgencySettingsUrl: React.FC<{
     } else {
       setIsConfirmModalOpen(true);
     }
+    setErrorMsg(undefined);
   };
   const handleModalConfirm = () => {
     setUrlText(homepageUrlSetting || "");
@@ -99,30 +110,44 @@ const AgencySettingsUrl: React.FC<{
           closeCancelModal={() => setIsConfirmModalOpen(false)}
           handleCancelModalConfirm={handleModalConfirm}
         >
-          <>
-            <AgencySettingsBlockTitle isEditModeActive>
-              Agency Homepage URL
-            </AgencySettingsBlockTitle>
-            <AgencyInfoTextAreaLabel>
-              Provide a link to your agency&apos;s website.
-            </AgencyInfoTextAreaLabel>
-            <Input
-              name="homepage-url"
-              label=""
-              placeholder="URL of agency (e.g., https://doc.iowa.gov/)"
-              isPlaceholderVisible
-              onChange={(e) => setUrlText(e.target.value)}
-              value={urlText}
-            />
-            <EditModeButtonsContainer noMargin>
-              <Button label="Cancel" onClick={handleCancelClick} />
-              <Button
-                label="Save"
-                onClick={handleSaveClick}
-                buttonColor="blue"
-              />
-            </EditModeButtonsContainer>
-          </>
+          <Modal
+            title="Agency URL"
+            description={
+              <AgencySettingsModalInputWrapperSmall
+                error={urlText !== "" && !validateAgencyURL(urlText)}
+              >
+                <NewInput
+                  style={{ marginBottom: "0" }}
+                  persistLabel
+                  value={urlText}
+                  error={errorMsg}
+                  placeholder="URL of agency (e.g., https://doc.iowa.gov/)"
+                  isPlaceholderVisible
+                  onChange={(e) => {
+                    const urlUpdate = e.target.value.trimStart();
+                    setUrlText(urlUpdate);
+                    checkValidURLSetResetErrorMsg(urlUpdate);
+                  }}
+                  agencySettingsConfigs
+                  fullWidth
+                  settingsCustomMargin
+                />
+              </AgencySettingsModalInputWrapperSmall>
+            }
+            buttons={[
+              {
+                label: "Save",
+                onClick: () => {
+                  handleSaveClick();
+                },
+              },
+            ]}
+            modalBackground="opaque"
+            onClickClose={handleCancelClick}
+            agencySettingsConfigs
+            agencySettingsAndJurisdictionsTitleConfigs
+            customPadding="24px 40px 24px 40px"
+          />
         </AgencySettingsEditModeModal>
       )}