diff --git a/components/DesktopNav.tsx b/components/DesktopNav.tsx
deleted file mode 100644
index b2b69f6ee..000000000
--- a/components/DesktopNav.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { useFlags } from "components/featureFlags"
-import { useTranslation } from "next-i18next"
-import React from "react"
-import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
-import { Container, Dropdown, Nav, NavDropdown } from "./bootstrap"
-
-import {
-  Avatar,
-  NavbarLinkAI,
-  NavbarLinkBills,
-  NavbarLinkEditProfile,
-  NavbarLinkEffective,
-  NavbarLinkFAQ,
-  NavbarLinkGoals,
-  NavbarLinkLogo,
-  NavbarLinkNewsfeed,
-  NavbarLinkProcess,
-  NavbarLinkSignOut,
-  NavbarLinkSupport,
-  NavbarLinkTeam,
-  NavbarLinkTestimony,
-  NavbarLinkViewProfile,
-  NavbarLinkWhyUse
-} from "./NavbarComponents"
-
-export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
-  const { authenticated } = useAuth()
-  const { notifications } = useFlags()
-  const { t } = useTranslation(["common", "auth"])
-
-  return (
-    <Container fluid className={`bg-secondary d-flex py-2 sticky-top`}>
-      <NavbarLinkLogo />
-
-      <div className={`align-self-center flex-grow-1 invisible`}>
-        <button className={`bg-light col my-2 w-100`}>
-          <div className={`text-dark`}>{"Placeholder Search Widget"}</div>
-        </button>
-      </div>
-
-      <div className={`align-self-center ms-3`}>
-        <Nav>
-          <NavbarLinkBills />
-        </Nav>
-      </div>
-
-      <div className="align-self-center">
-        <Nav>
-          <NavbarLinkTestimony />
-        </Nav>
-      </div>
-
-      {authenticated && notifications ? (
-        <div className="align-self-center">
-          <Nav>
-            <NavbarLinkNewsfeed />
-          </Nav>
-        </div>
-      ) : (
-        <></>
-      )}
-
-      <div className={`align-self-center`}>
-        <Dropdown>
-          <Dropdown.Toggle className={`btn-secondary text-white-50`}>
-            {t("about")}
-          </Dropdown.Toggle>
-          <Dropdown.Menu>
-            <NavbarLinkGoals />
-            <NavbarLinkTeam />
-            <NavbarLinkSupport />
-            <NavbarLinkFAQ />
-            <NavbarLinkAI />
-          </Dropdown.Menu>
-        </Dropdown>
-      </div>
-
-      <div className={`align-self-center justify-content-end`}>
-        <Dropdown>
-          <Dropdown.Toggle className={`btn-secondary text-white-50`}>
-            {t("learn")}
-          </Dropdown.Toggle>
-          <Dropdown.Menu>
-            <NavbarLinkEffective />
-            <NavbarLinkProcess />
-            <NavbarLinkWhyUse />
-          </Dropdown.Menu>
-        </Dropdown>
-      </div>
-
-      {authenticated ? (
-        <div className={`align-self-center justify-content-end`}>
-          <Dropdown>
-            <Dropdown.Toggle className={`btn-secondary`}>
-              <Avatar />
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <NavDropdown.Item>
-                <NavbarLinkViewProfile />
-              </NavDropdown.Item>
-              <NavDropdown.Item>
-                <NavbarLinkEditProfile />
-              </NavDropdown.Item>
-              <NavDropdown.Item>
-                <NavbarLinkSignOut
-                  handleClick={() => {
-                    void signOutAndRedirectToHome()
-                  }}
-                />
-              </NavDropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-        </div>
-      ) : (
-        <div className={`align-self-center justify-content-end`}>
-          <SignInWithButton />
-        </div>
-      )}
-    </Container>
-  )
-}
diff --git a/components/EditProfilePage/EditProfileHeader.tsx b/components/EditProfilePage/EditProfileHeader.tsx
index 08dbf9f01..b5c02f5b7 100644
--- a/components/EditProfilePage/EditProfileHeader.tsx
+++ b/components/EditProfilePage/EditProfileHeader.tsx
@@ -1,7 +1,8 @@
 import { useTranslation } from "next-i18next"
 import { Role } from "../auth"
 import { Col, Row } from "../bootstrap"
-import { FillButton, GearIcon, OutlineButton } from "../buttons"
+import { GearIcon, OutlineButton } from "../buttons"
+import { ProfileEditToggle } from "components/ProfilePage/ProfileButtons"
 
 export const EditProfileHeader = ({
   formUpdated,
@@ -28,15 +29,7 @@ export const EditProfileHeader = ({
           Icon={GearIcon}
           onClick={() => onSettingsModalOpen()}
         />
-        <FillButton
-          disabled={!!formUpdated}
-          href={`/profile?id=${uid}`}
-          label={
-            role === "organization" || role === "pendingUpgrade"
-              ? t("viewOrgProfile")
-              : t("viewMyProfile")
-          }
-        />
+        <ProfileEditToggle formUpdated={formUpdated} role={role} uid={uid} />
       </Col>
     </Row>
   )
diff --git a/components/EditProfilePage/EditProfilePage.tsx b/components/EditProfilePage/EditProfilePage.tsx
index d0ed0a249..de6b02c57 100644
--- a/components/EditProfilePage/EditProfilePage.tsx
+++ b/components/EditProfilePage/EditProfilePage.tsx
@@ -1,7 +1,5 @@
-import { useFlags } from "components/featureFlags"
-import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
 import { useTranslation } from "next-i18next"
-import { useState } from "react"
+import { useContext, useState } from "react"
 import { TabPane } from "react-bootstrap"
 import TabContainer from "react-bootstrap/TabContainer"
 import { useAuth } from "../auth"
@@ -25,6 +23,9 @@ import {
   TabNavWrapper
 } from "./StyledEditProfileComponents"
 import { TestimoniesTab } from "./TestimoniesTab"
+import { useFlags } from "components/featureFlags"
+import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
+import { TabContext } from "components/shared/ProfileTabsContext"
 
 export function EditProfile() {
   const { user } = useAuth()
@@ -62,11 +63,11 @@ export function EditProfileForm({
     notificationFrequency: notificationFrequency
   }: Profile = profile
 
-  const [key, setKey] = useState("AboutYou")
+  const { tabStatus, setTabStatus } = useContext(TabContext)
   const [formUpdated, setFormUpdated] = useState(false)
   const [settingsModal, setSettingsModal] = useState<"show" | null>(null)
   const [notifications, setNotifications] = useState<
-    "Daily" | "Weekly" | "Monthly" | "None"
+    "Weekly" | "Monthly" | "None"
   >(notificationFrequency ? notificationFrequency : "Monthly")
   const [isProfilePublic, setIsProfilePublic] = useState<false | true>(
     isPublic ? isPublic : false
@@ -146,8 +147,8 @@ export function EditProfileForm({
         />
         <TabContainer
           defaultActiveKey="AboutYou"
-          activeKey={key}
-          onSelect={(k: any) => setKey(k)}
+          activeKey={tabStatus}
+          onSelect={(k: any) => setTabStatus(k)}
         >
           <TabNavWrapper>
             {tabs.map((t, i) => (
diff --git a/components/EditProfilePage/ProfileSettingsModal.tsx b/components/EditProfilePage/ProfileSettingsModal.tsx
index 8121156dc..f721ec08f 100644
--- a/components/EditProfilePage/ProfileSettingsModal.tsx
+++ b/components/EditProfilePage/ProfileSettingsModal.tsx
@@ -15,9 +15,7 @@ type Props = Pick<ModalProps, "show" | "onHide"> & {
   role: Role
   setIsProfilePublic: Dispatch<SetStateAction<false | true>>
   notifications: Frequency
-  setNotifications: Dispatch<
-    SetStateAction<"Daily" | "Weekly" | "Monthly" | "None">
-  >
+  setNotifications: Dispatch<SetStateAction<"Weekly" | "Monthly" | "None">>
   onSettingsModalClose: () => void
 }
 
@@ -100,8 +98,16 @@ export default function ProfileSettingsModal({
       aria-labelledby="notifications-modal"
       centered
     >
-      <Modal.Header closeButton>
+      <Modal.Header>
         <Modal.Title id="notifications-modal">{t("setting")}</Modal.Title>
+        <Image
+          src="/x_cancel.png"
+          alt={t("navigation.closeNavMenu")}
+          width="30"
+          height="30"
+          className="ms-2"
+          onClick={handleCancel}
+        />
       </Modal.Header>
       <Modal.Body className={`p-3`}>
         <Form>
@@ -140,9 +146,6 @@ export default function ProfileSettingsModal({
                     variant="outline-secondary"
                   />
                   <Dropdown.Menu className={`col-12 bg-white `}>
-                    <Dropdown.Item onClick={() => setNotifications("Daily")}>
-                      {t("email.daily")}
-                    </Dropdown.Item>
                     <Dropdown.Item onClick={() => setNotifications("Weekly")}>
                       {t("email.weekly")}
                     </Dropdown.Item>
diff --git a/components/MobileNav.tsx b/components/Navbar.tsx
similarity index 51%
rename from components/MobileNav.tsx
rename to components/Navbar.tsx
index cb3432366..99372dad1 100644
--- a/components/MobileNav.tsx
+++ b/components/Navbar.tsx
@@ -1,10 +1,12 @@
-import { useFlags } from "components/featureFlags"
 import { useTranslation } from "next-i18next"
-import React, { useState } from "react"
+import React, { useContext, useState } from "react"
 import Image from "react-bootstrap/Image"
 import styled from "styled-components"
+import { useMediaQuery } from "usehooks-ts"
 import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
-import { Col, Nav, Navbar, NavDropdown } from "./bootstrap"
+import { Col, Container, Dropdown, Nav, Navbar, NavDropdown } from "./bootstrap"
+import { TabContext } from "./shared/ProfileTabsContext"
+
 import {
   Avatar,
   NavbarLinkAI,
@@ -24,7 +26,13 @@ import {
   NavbarLinkWhyUse
 } from "./NavbarComponents"
 
-export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
+export const MainNavbar: React.FC<React.PropsWithChildren<unknown>> = () => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+
+  return <>{isMobile ? <MobileNav /> : <DesktopNav />}</>
+}
+
+const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const BlackCollapse = styled(() => {
     return (
       <Navbar.Collapse id="basic-navbar-nav" className="bg-black mt-2 ps-4">
@@ -42,14 +50,25 @@ export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
     }
   `
 
+  const { tabStatus, setTabStatus } = useContext(TabContext)
+
   const ProfileLinks = () => {
     return (
       <Nav className="my-4 d-flex align-items-start">
         <NavbarLinkViewProfile />
         <NavbarLinkEditProfile
           handleClick={() => {
+            setTabStatus("AboutYou")
             closeNav()
           }}
+          tab={"navigation.editProfile"}
+        />
+        <NavbarLinkEditProfile
+          handleClick={() => {
+            setTabStatus("Following")
+            closeNav()
+          }}
+          tab={"navigation.followingTab"}
         />
         <NavbarLinkSignOut
           handleClick={() => {
@@ -66,11 +85,7 @@ export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
       <Nav className="my-4">
         <NavbarLinkBills handleClick={closeNav} />
         <NavbarLinkTestimony handleClick={closeNav} />
-        {authenticated && notifications ? (
-          <NavbarLinkNewsfeed handleClick={closeNav} />
-        ) : (
-          <></>
-        )}
+        {authenticated ? <NavbarLinkNewsfeed handleClick={closeNav} /> : <></>}
         <NavDropdown className={"navLink-primary"} title={t("about")}>
           <NavbarLinkGoals handleClick={closeNav} />
           <NavbarLinkTeam handleClick={closeNav} />
@@ -89,7 +104,6 @@ export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   }
 
   const { authenticated } = useAuth()
-  const { notifications } = useFlags()
   const [isExpanded, setIsExpanded] = useState(false)
   const [whichMenu, setWhichMenu] = useState("site")
   const { t } = useTranslation(["common", "auth"])
@@ -165,3 +179,114 @@ export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
     </Navbar>
   )
 }
+
+const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
+  const { authenticated } = useAuth()
+  const { t } = useTranslation(["common", "auth"])
+
+  const { tabStatus, setTabStatus } = useContext(TabContext)
+
+  return (
+    <Container fluid className={`bg-secondary d-flex py-2 sticky-top`}>
+      <NavbarLinkLogo />
+
+      <div className={`align-self-center flex-grow-1 invisible`}>
+        <button className={`bg-light col my-2 w-100`}>
+          <div className={`text-dark`}>{"Placeholder Search Widget"}</div>
+        </button>
+      </div>
+
+      <div className={`align-self-center ms-3`}>
+        <Nav>
+          <NavbarLinkBills />
+        </Nav>
+      </div>
+
+      <div className="align-self-center">
+        <Nav>
+          <NavbarLinkTestimony />
+        </Nav>
+      </div>
+
+      {authenticated ? (
+        <div className="align-self-center">
+          <Nav>
+            <NavbarLinkNewsfeed />
+          </Nav>
+        </div>
+      ) : (
+        <></>
+      )}
+
+      <div className={`align-self-center`}>
+        <Dropdown>
+          <Dropdown.Toggle className={`btn-secondary text-white-50`}>
+            {t("about")}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <NavbarLinkGoals />
+            <NavbarLinkTeam />
+            <NavbarLinkSupport />
+            <NavbarLinkFAQ />
+            <NavbarLinkAI />
+          </Dropdown.Menu>
+        </Dropdown>
+      </div>
+
+      <div className={`align-self-center justify-content-end`}>
+        <Dropdown>
+          <Dropdown.Toggle className={`btn-secondary text-white-50`}>
+            {t("learn")}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <NavbarLinkEffective />
+            <NavbarLinkProcess />
+            <NavbarLinkWhyUse />
+          </Dropdown.Menu>
+        </Dropdown>
+      </div>
+
+      {authenticated ? (
+        <div className={`align-self-center justify-content-end`}>
+          <Dropdown>
+            <Dropdown.Toggle className={`btn-secondary`}>
+              <Avatar />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <NavDropdown.Item>
+                <NavbarLinkViewProfile />
+              </NavDropdown.Item>
+              <NavDropdown.Item>
+                <NavbarLinkEditProfile
+                  handleClick={() => {
+                    setTabStatus("AboutYou")
+                  }}
+                  tab={"navigation.editProfile"}
+                />
+              </NavDropdown.Item>
+              <NavDropdown.Item>
+                <NavbarLinkEditProfile
+                  handleClick={() => {
+                    setTabStatus("Following")
+                  }}
+                  tab={"navigation.followingTab"}
+                />
+              </NavDropdown.Item>
+              <NavDropdown.Item>
+                <NavbarLinkSignOut
+                  handleClick={() => {
+                    void signOutAndRedirectToHome()
+                  }}
+                />
+              </NavDropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      ) : (
+        <div className={`align-self-center justify-content-end`}>
+          <SignInWithButton />
+        </div>
+      )}
+    </Container>
+  )
+}
diff --git a/components/NavbarComponents.tsx b/components/NavbarComponents.tsx
index e6e68f352..79f315bdf 100644
--- a/components/NavbarComponents.tsx
+++ b/components/NavbarComponents.tsx
@@ -78,18 +78,25 @@ export const NavbarLinkEditProfile: React.FC<
   React.PropsWithChildren<{
     handleClick?: any
     other?: any
+    tab: string
   }>
-> = ({ handleClick, other }) => {
+> = ({ handleClick, other, tab }) => {
   const isMobile = useMediaQuery("(max-width: 768px)")
   const { t } = useTranslation(["common", "auth", "profile"])
   return (
     <Nav.Item onClick={handleClick}>
       <NavLink
         className={isMobile ? "navLink-primary" : ""}
-        href="/editprofile"
+        href={
+          tab == "navigation.editProfile" ? "/editprofile" : "/editprofilealt"
+        }
+        /* editprofilealt identical to editprofile except that the mobile Nav   *
+         * link to Following Tab needs a unique url otherwise both Edit Profile *
+         * and Following Tab will light up when either one is selected          */
+
         {...other}
       >
-        {t("navigation.editProfile")}
+        {t(tab)}
       </NavLink>
     </Nav.Item>
   )
diff --git a/components/ProfilePage/OrgContactInfo.tsx b/components/ProfilePage/OrgContactInfo.tsx
index 1c87f93d9..4329c654e 100644
--- a/components/ProfilePage/OrgContactInfo.tsx
+++ b/components/ProfilePage/OrgContactInfo.tsx
@@ -22,23 +22,23 @@ export const OrgContactInfo = ({ profile }: { profile?: Profile }) => {
   const location = profile?.location ?? null
 
   return (
-    <div>
+    <div className={`ms-4 mb-4`}>
       {publicEmail && (
         <ContactInfoRow>
-          <div className="d-flex justify-content-end">{publicEmail}</div>
+          <div className="d-flex justify-content-start">{publicEmail}</div>
         </ContactInfoRow>
       )}
 
       {publicPhone && (
         <ContactInfoRow>
-          <div className="d-flex justify-content-end">{publicPhone}</div>
+          <div className="d-flex justify-content-start">{publicPhone}</div>
         </ContactInfoRow>
       )}
 
       {website && (
         <ContactInfoRow>
           <External
-            className="d-flex justify-content-end"
+            className="d-flex justify-content-start"
             plain
             href={`https://${website}`}
           >
@@ -49,12 +49,12 @@ export const OrgContactInfo = ({ profile }: { profile?: Profile }) => {
 
       {location && (
         <ContactInfoRow>
-          <div className="d-flex justify-content-end fw-bold">{location}</div>
+          <div className="d-flex justify-content-start fw-bold">{location}</div>
         </ContactInfoRow>
       )}
 
       <ContactInfoRow>
-        <div className="d-flex justify-content-end">
+        <div className="d-flex justify-content-start">
           <SocialMediaIcons
             twitter={twitter}
             linkedIn={linkedIn}
diff --git a/components/ProfilePage/ProfileButtons.tsx b/components/ProfilePage/ProfileButtons.tsx
index bbebdffa0..20b6267c2 100644
--- a/components/ProfilePage/ProfileButtons.tsx
+++ b/components/ProfilePage/ProfileButtons.tsx
@@ -1,13 +1,11 @@
-import { Role } from "components/auth/types"
 import { useTranslation } from "next-i18next"
-import { Button } from "../bootstrap"
+import React, { useContext } from "react"
 import styled from "styled-components"
-import { FillButton, GearButton, ToggleButton } from "components/buttons"
+import { FillButton, GearIcon, OutlineButton } from "../buttons"
+import { Button } from "../bootstrap"
+import { Role } from "components/auth/types"
 import { Internal } from "components/links"
-import { useProfile, ProfileHook } from "components/db"
-import { useFlags } from "components/featureFlags"
-import { FollowOrgButton } from "components/shared/FollowButton"
-import { useAuth } from "../auth"
+import { TabContext } from "components/shared/ProfileTabsContext"
 
 export const StyledButton = styled(Button).attrs(props => ({
   className: `col-12 d-flex align-items-center justify-content-center py-3 text-nowrap`,
@@ -33,15 +31,26 @@ export const ProfileEditToggle = ({ formUpdated, uid, role }: Props) => {
   const { t } = useTranslation(["editProfile"])
   return (
     <FillButton
-      className={`py-1 ml-2 text-decoration-none`}
       disabled={!!formUpdated}
-      href={`/ profile ? id = ${uid} `}
-      label={role !== "organization" ? t("viewMyProfile") : t("viewOrgProfile")}
+      href={`/profile?id=${uid}`}
+      label={
+        role === "organization" || role === "pendingUpgrade"
+          ? t("viewOrgProfile")
+          : t("viewMyProfile")
+      }
     />
   )
 }
 
-export const EditProfileButton = ({ className }: { className?: string }) => {
+export const EditProfileButton = ({
+  className,
+  handleClick,
+  tab
+}: {
+  className?: string
+  handleClick?: any
+  tab: string
+}) => {
   const { t } = useTranslation("profile")
 
   return (
@@ -49,69 +58,52 @@ export const EditProfileButton = ({ className }: { className?: string }) => {
       href="/editprofile"
       className={`text-decoration-none text-white d-flex justify-content-center align-items-center col-12 ${className}`}
     >
-      <FillButton label={t("button.editProfile")} />
+      <FillButton
+        label={t(tab)}
+        onClick={handleClick}
+        className={`${tab == "button.followedContent" ? `btn-secondary` : ``}`}
+      />
     </Internal>
   )
 }
 
-export function ProfileButtonsUser({
-  isProfilePublic,
-  onProfilePublicityChanged,
-  isUser,
-  profileId
+export function ProfileButtons({
+  onSettingsModalOpen,
+  isUser
 }: {
-  isProfilePublic: boolean | undefined
-  onProfilePublicityChanged: (isPublic: boolean) => void
+  onSettingsModalOpen: () => void
   isUser: boolean
-  profileId: string
 }) {
   const { t } = useTranslation("editProfile")
-  const { user } = useAuth()
 
-  const actions = useProfile()
+  const { tabStatus, setTabStatus } = useContext(TabContext)
 
-  const handleSave = async () => {
-    await updateProfile({ actions })
-  }
-  /* Only regular users are allowed to have a private profile. */
-  async function updateProfile({ actions }: { actions: ProfileHook }) {
-    const { updateIsPublic } = actions
-
-    await updateIsPublic(!isProfilePublic)
-    onProfilePublicityChanged(!isProfilePublic)
-  }
   return (
     <>
       {isUser ? (
         <div className={`d-grid gap-2 col-12 m-3`}>
-          <EditProfileButton className={`py-1`} />
-          <ToggleButton
-            toggleState={isProfilePublic || false}
-            stateTrueLabel={t("forms.makePrivate")}
-            stateFalseLabel={t("forms.makePublic")}
-            onClick={handleSave}
+          <EditProfileButton
+            className={`py-1`}
+            handleClick={() => {
+              setTabStatus("Following")
+            }}
+            tab={"button.followedContent"}
+          />
+          <EditProfileButton
+            className={`py-1`}
+            handleClick={() => {
+              setTabStatus("Testimonies")
+            }}
+            tab={"button.yourTestimonies"}
+          />
+          <OutlineButton
             className={`py-1`}
+            label={t("settings")}
+            Icon={GearIcon}
+            onClick={() => onSettingsModalOpen()}
           />
         </div>
       ) : null}
     </>
   )
 }
-
-export function ProfileButtonsOrg({
-  profileId,
-  isUser
-}: {
-  profileId: string
-  isUser: boolean
-}) {
-  const { followOrg } = useFlags()
-  const { user } = useAuth()
-  return (
-    <>
-      {followOrg && user && !isUser ? (
-        <FollowOrgButton profileId={profileId} />
-      ) : null}
-    </>
-  )
-}
diff --git a/components/ProfilePage/ProfileHeader.tsx b/components/ProfilePage/ProfileHeader.tsx
index d135760c2..6d82bb2d5 100644
--- a/components/ProfilePage/ProfileHeader.tsx
+++ b/components/ProfilePage/ProfileHeader.tsx
@@ -1,28 +1,92 @@
+import { useTranslation } from "next-i18next"
+import { useContext, useState } from "react"
+import { useMediaQuery } from "usehooks-ts"
+import { useAuth } from "../auth"
+import { Row, Spinner } from "../bootstrap"
+import { Profile, ProfileHook, useProfile } from "../db"
+import { EditProfileButton, ProfileButtons } from "./ProfileButtons"
 import { Header, ProfileDisplayName } from "./StyledProfileComponents"
 import { ProfileIcon } from "./StyledUserIcons"
+import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
+import { FollowUserButton } from "components/shared/FollowButton"
+import { TabContext } from "components/shared/ProfileTabsContext"
 
-import { useTranslation } from "next-i18next"
-import { Profile } from "../db"
-import { OrgContactInfo } from "./OrgContactInfo"
-import { ProfileButtonsOrg, ProfileButtonsUser } from "./ProfileButtons"
-
-export const ProfileHeader = ({
+export function HeaderWrapper({
   profileId,
-  profile,
   isUser,
-  isOrg,
-  isProfilePublic,
-  onProfilePublicityChanged
+  onProfilePublicityChanged,
+  profile
 }: {
-  profileId: string
+  isUser: boolean
   profile: Profile
+  profileId: string
+  onProfilePublicityChanged: (isPublic: boolean) => void
+}) {
+  const { user } = useAuth()
+  const uid = user?.uid
+  const result = useProfile()
+
+  if (result.loading) {
+    return (
+      <Row>
+        <Spinner animation="border" className="mx-auto" />
+      </Row>
+    )
+  }
+
+  if (result?.profile && uid) {
+    return (
+      <ProfileHeader
+        actions={result}
+        isUser={isUser}
+        onProfilePublicityChanged={onProfilePublicityChanged}
+        profile={profile}
+        profileId={profileId}
+      />
+    )
+  }
+
+  // Todo add error handling/404 page?
+}
+
+export const ProfileHeader = ({
+  actions,
+  isUser,
+  onProfilePublicityChanged,
+  profile,
+  profileId
+}: {
+  actions: ProfileHook
   isUser: boolean
-  isOrg: boolean
-  isProfilePublic: boolean | undefined
   onProfilePublicityChanged: (isPublic: boolean) => void
+  profile: Profile
+  profileId: string
 }) => {
   const { t } = useTranslation("profile")
   const { role } = profile // When we have more types of profile than org and user, we will need to use the actual role from the profile, and move away from isOrg boolean.
+  const { user } = useAuth()
+  const isMd = useMediaQuery("(max-width: 992px)")
+
+  const {
+    public: isPublic,
+    notificationFrequency: notificationFrequency
+  }: Profile = profile
+
+  const [settingsModal, setSettingsModal] = useState<"show" | null>(null)
+  const [notifications, setNotifications] = useState<
+    "Weekly" | "Monthly" | "None"
+  >(notificationFrequency ? notificationFrequency : "Monthly")
+  const [isProfilePublic, setIsProfilePublic] = useState<false | true>(
+    isPublic ? isPublic : false
+  )
+
+  const onSettingsModalOpen = () => {
+    setSettingsModal("show")
+    setNotifications(notificationFrequency ? notificationFrequency : "Monthly")
+    setIsProfilePublic(isPublic ? isPublic : false)
+  }
+
+  const { tabStatus, setTabStatus } = useContext(TabContext)
 
   return (
     <Header>
@@ -34,21 +98,45 @@ export const ProfileHeader = ({
           <ProfileDisplayName className={`col-3 col-md-auto`}>
             {profile.fullName}
           </ProfileDisplayName>
-          <ProfileButtonsOrg profileId={profileId} isUser={isUser} />
+          {user && !isUser ? (
+            <FollowUserButton profileId={profileId} />
+          ) : (
+            <EditProfileButton
+              className={`py-1 col-md-8`}
+              handleClick={() => {
+                setTabStatus("AboutYou")
+              }}
+              tab="button.editProfile"
+            />
+          )}
         </div>
       </div>
-      <div className="col-12 col-md-2 d-flex justify-content-center justify-content-md-end align-items-center ms-md-auto ">
-        {isOrg ? (
-          <OrgContactInfo profile={profile} />
-        ) : (
-          <ProfileButtonsUser
-            isProfilePublic={isProfilePublic}
-            onProfilePublicityChanged={onProfilePublicityChanged}
-            isUser={isUser}
-            profileId={profileId}
-          />
-        )}
+      <div
+        className={`col-12 d-flex justify-content-center justify-content-md-end align-items-center ms-md-auto ${
+          isMd ? `col-md-3` : `col-md-2`
+        }`}
+      >
+        <ProfileButtons
+          isUser={isUser}
+          onSettingsModalOpen={onSettingsModalOpen}
+        />
       </div>
+      <ProfileSettingsModal
+        actions={actions}
+        role={profile.role}
+        isProfilePublic={isProfilePublic}
+        setIsProfilePublic={setIsProfilePublic}
+        notifications={notifications}
+        setNotifications={setNotifications}
+        onHide={close}
+        onSettingsModalClose={() => {
+          setSettingsModal(null)
+          window.location.reload()
+          /* when saved and reopened, modal wasn't updating *
+           * would like to find cleaner solution            */
+        }}
+        show={settingsModal === "show"}
+      />
     </Header>
   )
 }
diff --git a/components/ProfilePage/ProfilePage.tsx b/components/ProfilePage/ProfilePage.tsx
index 0b7dbda98..76435cb09 100644
--- a/components/ProfilePage/ProfilePage.tsx
+++ b/components/ProfilePage/ProfilePage.tsx
@@ -10,8 +10,9 @@ import { Role, useAuth } from "../auth"
 import { Col, Container, Row, Spinner } from "../bootstrap"
 import { usePublicProfile, usePublishedTestimonyListing } from "../db"
 import { Banner } from "../shared/StyledSharedComponents"
+import { OrgContactInfo } from "./OrgContactInfo"
 import { ProfileAboutSection } from "./ProfileAboutSection"
-import { ProfileHeader } from "./ProfileHeader"
+import { HeaderWrapper } from "./ProfileHeader"
 import { ProfileLegislators } from "./ProfileLegislators"
 import { VerifyAccountSection } from "./VerifyAccountSection"
 
@@ -98,11 +99,9 @@ export function ProfilePage(profileprops: {
         </>
       ) : null}
       <Container>
-        <ProfileHeader
+        <HeaderWrapper
           profileId={profileprops.id}
           isUser={isCurrentUser}
-          isOrg={isOrg}
-          isProfilePublic={isProfilePublic}
           onProfilePublicityChanged={onProfilePublicityChanged}
           profile={profile}
         />
@@ -115,6 +114,8 @@ export function ProfilePage(profileprops: {
           </Row>
         ) : null}
 
+        <Row>{isOrg ? <OrgContactInfo profile={profile} /> : <></>}</Row>
+
         <Row>
           <Col className={`mb-4 mb-md-0`}>
             <ProfileAboutSection isOrg={isOrg} profile={profile} />
diff --git a/components/layout.tsx b/components/layout.tsx
index 754fb3927..857673a18 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,12 +1,11 @@
 import { useTranslation } from "next-i18next"
 import Head from "next/head"
 import React, { FC, useEffect, useState } from "react"
-import { useMediaQuery } from "usehooks-ts"
 import { signOutAndRedirectToHome, useAuth } from "./auth"
 import AuthModal from "./auth/AuthModal"
-import { DesktopNav } from "./DesktopNav"
 import PageFooter from "./Footer/Footer"
-import { MobileNav } from "./MobileNav"
+import { MainNavbar } from "./Navbar"
+import { TabContext, TabStatus } from "./shared/ProfileTabsContext"
 
 export const PageContainer: FC<React.PropsWithChildren<unknown>> = ({
   children
@@ -23,12 +22,13 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
   title
 }) => {
   const { authenticated, user } = useAuth()
-  const isMobile = useMediaQuery("(max-width: 768px)")
   const { t } = useTranslation("common")
   const formattedTitle = title
     ? `${title} | ${t("maple_abbr")}: ${t("maple_fullName")}`
     : `${t("maple_abbr")}: ${t("maple_fullName")}`
 
+  const [tabStatus, setTabStatus] = useState<TabStatus>("AboutYou")
+
   // isClient used to prevent hydration issues: quite possibly better solutions exist
 
   const [isClient, setIsClient] = useState(false)
@@ -44,16 +44,18 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
             <title>{formattedTitle}</title>
             <link rel="icon" href="/favicon.ico" />
           </Head>
-          <PageContainer>
-            {isMobile ? <MobileNav /> : <DesktopNav />}
-            <AuthModal />
-            <div className={`col`}>{children}</div>
-            <PageFooter
-              authenticated={authenticated}
-              user={user as any}
-              signOut={signOutAndRedirectToHome}
-            />
-          </PageContainer>
+          <TabContext.Provider value={{ tabStatus, setTabStatus }}>
+            <PageContainer>
+              <MainNavbar />
+              <AuthModal />
+              <div className={`col`}>{children}</div>
+              <PageFooter
+                authenticated={authenticated}
+                user={user as any}
+                signOut={signOutAndRedirectToHome}
+              />
+            </PageContainer>
+          </TabContext.Provider>
         </>
       ) : (
         <>
diff --git a/components/search/testimony/TestimonyHit.tsx b/components/search/testimony/TestimonyHit.tsx
index 3931db833..f9e62c272 100644
--- a/components/search/testimony/TestimonyHit.tsx
+++ b/components/search/testimony/TestimonyHit.tsx
@@ -5,7 +5,7 @@ import { Testimony } from "components/db/testimony"
 import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
 import { formatBillId } from "components/formatting"
 import { useBill } from "components/db/bills"
-import { FollowOrgButton } from "components/shared/FollowButton"
+import { FollowUserButton } from "components/shared/FollowButton"
 import { Image } from "react-bootstrap"
 import { useFlags } from "components/featureFlags"
 import { useAuth } from "components/auth"
@@ -72,7 +72,7 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
           <b>Written by {writtenBy}</b>
         </span>
         {!isCurrentUser && followOrg && user && (
-          <FollowOrgButton profileId={hit.authorUid} />
+          <FollowUserButton profileId={hit.authorUid} />
         )}
       </div>
       <hr />
diff --git a/components/shared/FollowButton.tsx b/components/shared/FollowButton.tsx
index 7876e9c0a..87fa5ec81 100644
--- a/components/shared/FollowButton.tsx
+++ b/components/shared/FollowButton.tsx
@@ -89,7 +89,13 @@ export const ButtonWithCheckmark = ({
   )
 }
 
-export function FollowOrgButton({ profileId }: { profileId: string }) {
+export function FollowUserButton({
+  className,
+  profileId
+}: {
+  className?: string
+  profileId: string
+}) {
   const { user } = useAuth()
   const uid = user?.uid
   const topicName = `testimony-${profileId}`
diff --git a/components/shared/ProfileTabsContext.tsx b/components/shared/ProfileTabsContext.tsx
new file mode 100644
index 000000000..da079e871
--- /dev/null
+++ b/components/shared/ProfileTabsContext.tsx
@@ -0,0 +1,16 @@
+import { createContext, Dispatch, SetStateAction } from "react"
+
+export type TabStatus = string | number
+
+/* TabStatus never uses numbers however it gets used in a way 
+   that links to EventKey which requires `string | number` */
+
+interface TabContextType {
+  tabStatus: TabStatus
+  setTabStatus: Dispatch<SetStateAction<string | number>>
+}
+
+export const TabContext = createContext<TabContextType>({
+  tabStatus: "AboutYou",
+  setTabStatus: () => {}
+})
diff --git a/functions/src/auth/types.ts b/functions/src/auth/types.ts
index ca298ded2..6e570d3e5 100644
--- a/functions/src/auth/types.ts
+++ b/functions/src/auth/types.ts
@@ -24,7 +24,7 @@ export const Claim = Record({
 })
 export type Claim = Static<typeof Claim>
 
-export const Frequency = Union(L("Daily"), L("Weekly"), L("Monthly"), L("None"))
+export const Frequency = Union(L("Weekly"), L("Monthly"), L("None"))
 export type Frequency = Static<typeof Frequency>
 
 export const OrgCategories = [
diff --git a/pages/editprofilealt.tsx b/pages/editprofilealt.tsx
new file mode 100644
index 000000000..f323a5832
--- /dev/null
+++ b/pages/editprofilealt.tsx
@@ -0,0 +1,23 @@
+import { requireAuth } from "../components/auth"
+import { createPage } from "../components/page"
+import { EditProfile } from "../components/EditProfilePage/EditProfilePage"
+import { createGetStaticTranslationProps } from "components/translations"
+
+/* identical to editprofile.tsx except that the mobile Nav link to *
+ * Following Tab needs a unique url otherwise both Edit Profile    *
+ * and Following Tab will light up when either one is selected     */
+
+export default createPage({
+  title: "Profile",
+  Page: requireAuth(({ user }) => {
+    return <EditProfile />
+  })
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "editProfile",
+  "footer",
+  "testimony"
+])
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 0f85f0d6f..c5771b070 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -65,6 +65,7 @@
     "communicatingWithLegislators": "Communicating with Legislators",
     "editProfile": "Edit Profile",
     "faq": "FAQ",
+    "followingTab": "Following Tab",
     "home": "Home",
     "learnAboutTestimony": "Learn About Testimony",
     "legislativeProcess": "About the MA Legislative Process",
diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
index d604f0369..7979a1696 100644
--- a/public/locales/en/profile.json
+++ b/public/locales/en/profile.json
@@ -9,7 +9,9 @@
     "editProfile": "Edit\u00A0Profile",    
     "notficationFrequencyDropdown": "open envelope with letter, toggles update frequency options",
     "follow" : "Follow",
-    "following" : "Following"
+    "followedContent": "Followed Content",
+    "following" : "Following",
+    "yourTestimonies": "Your Testimonies"
   },
   "content": {
     "viewingProfile": "Currently viewing your profile",
diff --git a/public/x_cancel.png b/public/x_cancel.png
new file mode 100644
index 000000000..343621fbc
Binary files /dev/null and b/public/x_cancel.png differ
diff --git a/stories/atoms/ProfileButtons.stories.tsx b/stories/atoms/ProfileButtons.stories.tsx
index aad9ae8ab..2d73f4e63 100644
--- a/stories/atoms/ProfileButtons.stories.tsx
+++ b/stories/atoms/ProfileButtons.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react"
 import { EditProfileHeader } from "components/EditProfilePage/EditProfileHeader"
-import { ProfileButtonsUser } from "components/ProfilePage/ProfileButtons"
+import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
 import { Providers } from "components/providers"
 import { wrapper } from "components/store"
 import { Col, Row } from "react-bootstrap"
@@ -8,7 +8,7 @@ import { Provider as Redux } from "react-redux"
 
 const meta: Meta = {
   title: "Atoms/Buttons/Profile Buttons",
-  component: ProfileButtonsUser,
+  component: ProfileButtons,
   decorators: [
     (Story, ...rest) => {
       const { store, props } = wrapper.useWrappedStore(...rest)
@@ -30,17 +30,17 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof ProfileButtonsUser>
+// type Story = StoryObj<typeof ProfileButtons>
 
-export const Primary: Story = {
-  args: {
-    isProfilePublic: true,
-    onProfilePublicityChanged: () => {
-      console.log("clicked")
-    }
-  },
-  argTypes: {
-    isProfilePublic: { control: { type: "boolean" } }
-  },
-  name: "Profile Buttons"
-}
+// export const Primary: Story = {
+//   args: {
+//     isProfilePublic: true,
+//     onProfilePublicityChanged: () => {
+//       console.log("clicked")
+//     }
+//   },
+//   argTypes: {
+//     isProfilePublic: { control: { type: "boolean" } }
+//   },
+//   name: "Profile Buttons"
+// }
diff --git a/stories/organisms/ProfileHeader.stories.tsx b/stories/organisms/ProfileHeader.stories.tsx
index 739c8e882..e443031cb 100644
--- a/stories/organisms/ProfileHeader.stories.tsx
+++ b/stories/organisms/ProfileHeader.stories.tsx
@@ -26,38 +26,40 @@ const meta: Meta = {
 
 type Story = StoryObj<typeof ProfileHeader>
 
-type ProfileHeaderProps = React.ComponentProps<typeof ProfileHeader>
-export const Primary: Story = {
-  args: {
-    isUser: true,
-    isOrg: false,
-    isProfilePublic: false,
-    uid: "yem5wVGQnpc7tXWgt16ofbiU9F23",
-    profileId: "yem5wVGQnpc7tXWgt16ofbiU9F23",
-    profile: {
-      topicName: "Topic Name",
-      role: "user",
-      fullName: "Full Name",
-      displayName: "Display Name",
-      photoURL: "https://via.placeholder.com/150",
-      contactInfo: {
-        publicEmail: "email@example.com",
-        publicPhone: 6179990808,
-        website: "example.com"
-      }
-    } as Profile,
-    isMobile: false,
-    onProfilePublicityChanged: (isPublic: boolean) => console.log(isPublic)
-  } as ProfileHeaderProps,
-  argTypes: {
-    isUser: {
-      control: { type: "boolean" },
-      name: "isUser: Is the current viewer the owner of the profile?"
-    },
-    isOrg: { control: { type: "boolean" }, name: "isOrg: Is the owner an org" },
-    isProfilePublic: { control: { type: "boolean" } }
-  },
-  name: "ProfileHeader"
-}
+// ProfileHeaderProps out of date
+
+// type ProfileHeaderProps = React.ComponentProps<typeof ProfileHeader>
+// export const Primary: Story = {
+//   args: {
+//     isUser: true,
+//     isOrg: false,
+//     isProfilePublic: false,
+//     uid: "yem5wVGQnpc7tXWgt16ofbiU9F23",
+//     profileId: "yem5wVGQnpc7tXWgt16ofbiU9F23",
+//     profile: {
+//       topicName: "Topic Name",
+//       role: "user",
+//       fullName: "Full Name",
+//       displayName: "Display Name",
+//       photoURL: "https://via.placeholder.com/150",
+//       contactInfo: {
+//         publicEmail: "email@example.com",
+//         publicPhone: 6179990808,
+//         website: "example.com"
+//       }
+//     } as Profile,
+//     isMobile: false,
+//     onProfilePublicityChanged: (isPublic: boolean) => console.log(isPublic)
+//   } as ProfileHeaderProps,
+//   argTypes: {
+//     isUser: {
+//       control: { type: "boolean" },
+//       name: "isUser: Is the current viewer the owner of the profile?"
+//     },
+//     isOrg: { control: { type: "boolean" }, name: "isOrg: Is the owner an org" },
+//     isProfilePublic: { control: { type: "boolean" } }
+//   },
+//   name: "ProfileHeader"
+// }
 
 export default meta
diff --git a/stories/organisms/editprofile/ProfileSettingsModal.stories.tsx b/stories/organisms/editprofile/ProfileSettingsModal.stories.tsx
index 8248c24bd..f08ad5d7b 100644
--- a/stories/organisms/editprofile/ProfileSettingsModal.stories.tsx
+++ b/stories/organisms/editprofile/ProfileSettingsModal.stories.tsx
@@ -33,7 +33,7 @@ export const Primary: Story = {
     actions: {} as ProfileHook,
     isProfilePublic: true,
     role: "user",
-    notifications: "Daily",
+    notifications: "Weekly",
     show: true
   },
   name: "ProfileSettingsModal"
diff --git a/stories/organisms/editprofile/personalInfoTal.stories.tsx b/stories/organisms/editprofile/personalInfoTal.stories.tsx
index f9d9bfdd3..73e1e6f5e 100644
--- a/stories/organisms/editprofile/personalInfoTal.stories.tsx
+++ b/stories/organisms/editprofile/personalInfoTal.stories.tsx
@@ -38,7 +38,7 @@ export const Primary: Story = {
         district: "District 1"
       },
       public: true,
-      notificationFrequency: "Daily",
+      notificationFrequency: "Weekly",
       about: "About me",
       social: {
         twitter: "johndoe",
@@ -73,7 +73,7 @@ export const Org: Story = {
         district: "District 1"
       },
       public: true,
-      notificationFrequency: "Daily",
+      notificationFrequency: "Weekly",
       about: "About me",
       social: {
         twitter: "johndoe",
diff --git a/stories/pages/EditProfilePage.stories.tsx b/stories/pages/EditProfilePage.stories.tsx
index fe643420d..57d378200 100644
--- a/stories/pages/EditProfilePage.stories.tsx
+++ b/stories/pages/EditProfilePage.stories.tsx
@@ -41,7 +41,7 @@ export const Primary: Story = {
         district: "District 1"
       },
       public: true,
-      notificationFrequency: "Daily",
+      notificationFrequency: "Weekly",
       about: "About me",
       social: {
         twitter: "johndoe",