diff --git a/packages/common/src/store/ui/modals/artist-pick-modal.ts b/packages/common/src/store/ui/modals/artist-pick-modal.ts
new file mode 100644
index 00000000000..b630e440f19
--- /dev/null
+++ b/packages/common/src/store/ui/modals/artist-pick-modal.ts
@@ -0,0 +1,23 @@
+import { ID } from '~/models/Identifiers'
+import { Nullable } from '~/utils/typeUtils'
+
+import { createModal } from './createModal'
+
+export type ArtistPickModalState = {
+  trackId: Nullable<ID>
+}
+
+const artistPickModal = createModal<ArtistPickModalState>({
+  reducerPath: 'ArtistPick',
+  initialState: {
+    isOpen: false,
+    trackId: null
+  },
+  sliceSelector: (state) => state.ui.modals
+})
+
+export const {
+  hook: useArtistPickModal,
+  reducer: artistPickModalReducer,
+  actions: artistPickModalActions
+} = artistPickModal
diff --git a/packages/common/src/store/ui/modals/index.ts b/packages/common/src/store/ui/modals/index.ts
index d2a31a60311..01fffcb697b 100644
--- a/packages/common/src/store/ui/modals/index.ts
+++ b/packages/common/src/store/ui/modals/index.ts
@@ -18,3 +18,4 @@ export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'
 export * from './add-funds-modal'
 export * from './wait-for-download-modal'
+export * from './artist-pick-modal'
diff --git a/packages/common/src/store/ui/modals/parentSlice.ts b/packages/common/src/store/ui/modals/parentSlice.ts
index ca71ea2eb75..66571cf8e3d 100644
--- a/packages/common/src/store/ui/modals/parentSlice.ts
+++ b/packages/common/src/store/ui/modals/parentSlice.ts
@@ -61,7 +61,8 @@ export const initialState: BasicModalsState = {
   AddFundsModal: { isOpen: false },
   Welcome: { isOpen: false },
   CoinflowWithdraw: { isOpen: false },
-  WaitForDownloadModal: { isOpen: false }
+  WaitForDownloadModal: { isOpen: false },
+  ArtistPick: { isOpen: false }
 }
 
 const slice = createSlice({
diff --git a/packages/common/src/store/ui/modals/reducers.ts b/packages/common/src/store/ui/modals/reducers.ts
index 064557b3d90..a8e799fd5a2 100644
--- a/packages/common/src/store/ui/modals/reducers.ts
+++ b/packages/common/src/store/ui/modals/reducers.ts
@@ -1,6 +1,7 @@
 import { Action, combineReducers, Reducer } from '@reduxjs/toolkit'
 
 import { addFundsModalReducer } from './add-funds-modal'
+import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
@@ -45,7 +46,8 @@ const combinedReducers = combineReducers({
   PremiumContentPurchaseModal: premiumContentPurchaseModalReducer,
   CoinflowOnramp: coinflowOnrampModalReducer,
   CoinflowWithdraw: coinflowWithdrawModalReducer,
-  WaitForDownloadModal: waitForDownloadModalReducer
+  WaitForDownloadModal: waitForDownloadModalReducer,
+  ArtistPick: artistPickModalReducer
 })
 
 /**
diff --git a/packages/common/src/store/ui/modals/types.ts b/packages/common/src/store/ui/modals/types.ts
index 97bec9bcd2b..76f2c0a76b1 100644
--- a/packages/common/src/store/ui/modals/types.ts
+++ b/packages/common/src/store/ui/modals/types.ts
@@ -3,6 +3,7 @@ import { Action } from '@reduxjs/toolkit'
 import { ModalSource } from '~/models/Analytics'
 
 import { AddFundsModalState } from './add-funds-modal'
+import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
 import { EditPlaylistModalState } from './edit-playlist-modal'
@@ -81,6 +82,7 @@ export type Modals =
   | 'Welcome'
   | 'CoinflowWithdraw'
   | 'WaitForDownloadModal'
+  | 'ArtistPick'
 
 export type BasicModalsState = {
   [modal in Modals]: BaseModalState
@@ -101,6 +103,7 @@ export type StatefulModalsState = {
   PremiumContentPurchaseModal: PremiumContentPurchaseModalState
   CoinflowWithdraw: CoinflowWithdrawModalState
   WaitForDownloadModal: WaitForDownloadModalState
+  ArtistPick: ArtistPickModalState
 }
 
 export type ModalsState = BasicModalsState & StatefulModalsState
diff --git a/packages/harmony/src/components/button/BaseButton/types.ts b/packages/harmony/src/components/button/BaseButton/types.ts
index 3deca04aa04..a2986296ce7 100644
--- a/packages/harmony/src/components/button/BaseButton/types.ts
+++ b/packages/harmony/src/components/button/BaseButton/types.ts
@@ -34,12 +34,12 @@ export type BaseButtonProps = {
   /**
    * Optional icon element to include on the left side of the button
    */
-  iconLeft?: IconComponent
+  iconLeft?: IconComponent | null
 
   /**
    * Optional icon element to include on the right side of the button
    */
-  iconRight?: IconComponent
+  iconRight?: IconComponent | null
 
   /**
    * When true, do not override icon's fill colors
diff --git a/packages/harmony/src/components/button/Button/Button.tsx b/packages/harmony/src/components/button/Button/Button.tsx
index 1c34bc3b4ed..9f357b788ef 100644
--- a/packages/harmony/src/components/button/Button/Button.tsx
+++ b/packages/harmony/src/components/button/Button/Button.tsx
@@ -144,6 +144,30 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       })
     }
 
+    const commonHoverStyles: CSSObject = {
+      backgroundColor: themeColors.neutral.n25
+    }
+
+    const commonActiveStyles: CSSObject = {
+      backgroundColor: themeColors.neutral.n100
+    }
+
+    const commonStyles: CSSObject = {
+      backgroundColor: themeColors.special.white,
+      color: themeColors.text.default,
+      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`,
+
+      '&:hover': commonHoverStyles,
+      '&:active': commonActiveStyles,
+
+      ...(_isHovered && commonHoverStyles),
+      ...(_isPressed && commonActiveStyles),
+      ...(isDisabled && {
+        backgroundColor: themeColors.neutral.n150,
+        boxShadow: 'none'
+      })
+    }
+
     const destructiveHoverStyles: CSSObject = {
       backgroundColor: themeColors.special.red,
       color: themeColors.static.white
@@ -195,6 +219,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ? tertiaryStyles
         : variant === 'destructive'
         ? destructiveStyles
+        : variant === 'common'
+        ? commonStyles
         : primaryStyles),
 
       '::before': {
@@ -208,12 +234,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         backgroundColor: 'rgba(0, 0, 0, 0)'
       },
 
-      ...(variant !== 'tertiary' && {
-        ':hover': hoverStyles,
-        ':active': activeStyles,
-        ...(_isHovered && hoverStyles),
-        ...(_isPressed && activeStyles)
-      })
+      ...(variant !== 'tertiary' &&
+        variant !== 'common' && {
+          ':hover': hoverStyles,
+          ':active': activeStyles,
+          ...(_isHovered && hoverStyles),
+          ...(_isPressed && activeStyles)
+        })
     }
 
     const iconCss =
diff --git a/packages/harmony/src/components/button/Button/types.ts b/packages/harmony/src/components/button/Button/types.ts
index ee7927e218c..5cf5d095e0a 100644
--- a/packages/harmony/src/components/button/Button/types.ts
+++ b/packages/harmony/src/components/button/Button/types.ts
@@ -6,7 +6,12 @@ import { BaseButtonProps } from '../BaseButton/types'
 
 export type HTMLButtonProps = ComponentPropsWithoutRef<'button'>
 
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive'
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'destructive'
+  | 'common'
 
 export type ButtonSize = 'small' | 'default' | 'large'
 
diff --git a/packages/harmony/src/components/modal/ModalFooter.module.css b/packages/harmony/src/components/modal/ModalFooter.module.css
index 6047c1d9790..ae99993b563 100644
--- a/packages/harmony/src/components/modal/ModalFooter.module.css
+++ b/packages/harmony/src/components/modal/ModalFooter.module.css
@@ -3,6 +3,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--harmony-unit-6);
-  padding-top: var(--harmony-unit-6);
+  padding: var(--harmony-spacing-xl);
+  gap: var(--harmony-spacing-s);
 }
diff --git a/packages/harmony/src/components/text/Text/constants.ts b/packages/harmony/src/components/text/Text/constants.ts
index 648baf49813..047c7f14831 100644
--- a/packages/harmony/src/components/text/Text/constants.ts
+++ b/packages/harmony/src/components/text/Text/constants.ts
@@ -10,6 +10,19 @@ export const variantTagMap = {
     l: 'h2',
     m: 'h3',
     s: 'h4'
+  },
+  title: {
+    xl: 'h5',
+    l: 'h5',
+    m: 'h5',
+    s: 'h5'
+  },
+  label: {
+    xl: 'p',
+    l: 'p',
+    m: 'p',
+    s: 'p',
+    xs: 'p'
   }
 }
 
diff --git a/packages/web/src/app/web-player/WebPlayer.jsx b/packages/web/src/app/web-player/WebPlayer.jsx
index ad0e04ded2d..74f7a10f6c9 100644
--- a/packages/web/src/app/web-player/WebPlayer.jsx
+++ b/packages/web/src/app/web-player/WebPlayer.jsx
@@ -45,7 +45,6 @@ import Navigator from 'components/nav/Navigator'
 import TopLevelPage from 'components/nav/mobile/TopLevelPage'
 import Notice from 'components/notice/Notice'
 import { NotificationPage } from 'components/notification'
-import PinnedTrackConfirmation from 'components/pin-track-confirmation/PinTrackConfirmation'
 import PlayBarProvider from 'components/play-bar/PlayBarProvider'
 import { RewardClaimedToast } from 'components/reward-claimed-toast/RewardClaimedToast'
 import DesktopRoute from 'components/routes/DesktopRoute'
@@ -75,7 +74,7 @@ import FeedPage from 'pages/feed-page/FeedPage'
 import FollowersPage from 'pages/followers-page/FollowersPage'
 import FollowingPage from 'pages/following-page/FollowingPage'
 import HistoryPage from 'pages/history-page/HistoryPage'
-import NotFoundPage from 'pages/not-found-page/NotFoundPage'
+import { NotFoundPage } from 'pages/not-found-page/NotFoundPage'
 import NotificationUsersPage from 'pages/notification-users-page/NotificationUsersPage'
 import { PayAndEarnPage } from 'pages/pay-and-earn-page/PayAndEarnPage'
 import { TableType } from 'pages/pay-and-earn-page/types'
@@ -999,7 +998,6 @@ class WebPlayer extends Component {
           <RewardClaimedToast />
           {/* Non-mobile */}
           {!isMobile ? <Visualizer /> : null}
-          {!isMobile ? <PinnedTrackConfirmation /> : null}
           {!isMobile ? <DevModeMananger /> : null}
           {/* Mobile-only */}
           {isMobile ? (
diff --git a/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.module.css b/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.module.css
index c8074cc126b..3ec94ed374d 100644
--- a/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.module.css
+++ b/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.module.css
@@ -35,11 +35,6 @@
   line-height: 150%;
 }
 
-.doneButton {
-  align-self: center;
-  width: 100%;
-}
-
 .markdownFrame {
   background: var(--background);
   box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.1);
diff --git a/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx b/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx
index bb608c9a0d4..f0c913cc5a5 100644
--- a/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx
+++ b/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx
@@ -9,9 +9,10 @@ import {
   ModalContent,
   ModalHeader,
   ModalTitle,
-  IconRobot
+  IconRobot,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType, MarkdownViewer } from '@audius/stems'
+import { MarkdownViewer } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
@@ -84,21 +85,13 @@ export const AiAttributionSettingsModal = () => {
           />
         </div>
         {allowAiAttribution ? (
-          <Button
-            text={messages.disable}
-            type={ButtonType.COMMON}
-            size={ButtonSize.MEDIUM}
-            className={styles.doneButton}
-            onClick={handleSubmit}
-          />
+          <Button variant='secondary' onClick={handleSubmit} fullWidth>
+            {messages.disable}
+          </Button>
         ) : (
-          <Button
-            text={messages.accept}
-            type={ButtonType.PRIMARY}
-            size={ButtonSize.MEDIUM}
-            className={styles.doneButton}
-            onClick={handleSubmit}
-          />
+          <Button variant='primary' onClick={handleSubmit} fullWidth>
+            {messages.accept}
+          </Button>
         )}
       </ModalContent>
     </Modal>
diff --git a/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.module.css b/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.module.css
index 2c1de761cec..baab1286a47 100644
--- a/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.module.css
+++ b/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.module.css
@@ -47,16 +47,6 @@
   margin-top: 16px;
 }
 
-.mainButton {
-  border-radius: 32px;
-}
-
-.mainButton span {
-  color: var(--primary) !important;
-  font-size: var(--font-l) !important;
-  font-weight: var(--font-bold) !important;
-}
-
 .notNow {
   margin-top: 15px;
   color: white;
diff --git a/packages/web/src/components/artist-pick-modal/ArtistPickModal.tsx b/packages/web/src/components/artist-pick-modal/ArtistPickModal.tsx
new file mode 100644
index 00000000000..77706d276d0
--- /dev/null
+++ b/packages/web/src/components/artist-pick-modal/ArtistPickModal.tsx
@@ -0,0 +1,88 @@
+import {
+  accountSelectors,
+  tracksSocialActions,
+  useArtistPickModal
+} from '@audius/common/store'
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalContentText,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle
+} from '@audius/harmony'
+import { useDispatch } from 'react-redux'
+
+import { useSelector } from 'utils/reducer'
+
+const { setArtistPick, unsetArtistPick } = tracksSocialActions
+const getAccountUser = accountSelectors.getAccountUser
+
+const messagesMap = {
+  add: {
+    title: 'Set your Artist Pick',
+    description:
+      'This track will appear at the top of your profile, above your recent uploads, until you change or remove it.',
+    confirm: 'Set Track'
+  },
+  update: {
+    title: 'Change your artist pick?',
+    description:
+      'This track will appear at the top of your profile and replace your previously picked track.',
+    confirm: 'Change Track'
+  },
+  remove: {
+    title: 'Unset as Artist Pick',
+    description:
+      'Are you sure you want to remove your pick? This track will be displayed based on its release date.',
+    confirm: 'Unset Track'
+  }
+}
+
+export const ArtistPickModal = () => {
+  const {
+    isOpen,
+    onClose,
+    data: { trackId }
+  } = useArtistPickModal()
+  const dispatch = useDispatch()
+
+  const currentArtistPickId = useSelector(
+    (state) => getAccountUser(state)?.artist_pick_track_id
+  )
+
+  const action = !currentArtistPickId ? 'add' : trackId ? 'update' : 'remove'
+
+  const messages = messagesMap[action]
+
+  const handleSubmit = () => {
+    if (trackId) {
+      dispatch(setArtistPick(trackId))
+    } else {
+      dispatch(unsetArtistPick())
+    }
+    onClose()
+  }
+
+  return (
+    <Modal size='small' isOpen={isOpen} onClose={onClose}>
+      <ModalHeader>
+        <ModalTitle title={messages.title} />
+      </ModalHeader>
+      <ModalContent>
+        <ModalContentText css={{ textAlign: 'center' }}>
+          {messages.description}
+        </ModalContentText>
+      </ModalContent>
+      <ModalFooter>
+        <Button variant='secondary' onClick={onClose} fullWidth>
+          Cancel
+        </Button>
+        <Button variant='primary' onClick={handleSubmit} fullWidth>
+          {messages.confirm}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}
diff --git a/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx b/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx
index 3e4b19372c1..bea5440cd52 100644
--- a/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx
+++ b/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx
@@ -275,9 +275,9 @@ export const ArtistRecommendations = forwardRef<
         <FollowButton
           isDisabled={isLoading}
           following={isFollowingAll}
-          invertedColor={true}
-          messages={messages}
+          invertedColor
           size='full'
+          messages={messages}
           onFollow={handleFollowAll}
           onUnfollow={handleUnfollowAll}
         />
diff --git a/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx b/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx
index 4e6b61f9313..b9504efc266 100644
--- a/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx
+++ b/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx
@@ -17,6 +17,12 @@ import {
 } from '@audius/common/store'
 import { formatDateWithTimezoneOffset } from '@audius/common/utils'
 import {
+  Button as HarmonyButton,
+  ModalContent,
+  ModalContentText,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
   Modal,
   IconVolumeLevel2 as IconVolume,
   IconVolumeLevel0 as IconMute,
@@ -338,39 +344,37 @@ const CollectibleDetailsModal = ({
       </Modal>
 
       <Modal
-        showTitleHeader
-        showDismissButton
-        headerContainerClassName={styles.modalHeader}
         isOpen={isPicConfirmModalOpen}
         onClose={() => setIsPicConfirmaModalOpen(false)}
-        titleClassName={styles.confirmModalTitle}
-        title={
-          <>
-            <IconImage />
-            <span>Set as Profile Pic</span>
-          </>
-        }
       >
-        <div className={styles.confirmModalContainer}>
-          <p className={styles.confirmModalText}>
-            Are you sure you want to change your profile picture?
-          </p>
-
-          <div className={styles.confirmButtonContainer}>
-            <Button
-              className={styles.profPicConfirmButton}
-              onClick={() => setIsPicConfirmaModalOpen(false)}
-              text='Nevermind'
-              type={ButtonType.COMMON_ALT}
-            />
-            <Button
-              className={styles.profPicConfirmButton}
-              onClick={onClickProfPicUpload}
-              text='Yes'
-              type={ButtonType.PRIMARY_ALT}
-            />
-          </div>
-        </div>
+        <ModalHeader>
+          <ModalTitle
+            title={collectibleMessages.setAsProfilePic}
+            icon={<IconImage />}
+          />
+        </ModalHeader>
+        <ModalContent>
+          <ModalContentText>
+            {collectibleMessages.setAsProfilePicDescription}
+          </ModalContentText>
+        </ModalContent>
+
+        <ModalFooter>
+          <HarmonyButton
+            variant='secondary'
+            onClick={() => setIsPicConfirmaModalOpen(false)}
+            fullWidth
+          >
+            {collectibleMessages.setAsProfilePickCancel}
+          </HarmonyButton>
+          <HarmonyButton
+            variant='primary'
+            onClick={onClickProfPicUpload}
+            fullWidth
+          >
+            {collectibleMessages.setAsProfilePickConfirm}
+          </HarmonyButton>
+        </ModalFooter>
       </Modal>
 
       <Drawer
diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css
index 72182ce52a1..1b04805fdef 100644
--- a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css
+++ b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css
@@ -325,42 +325,6 @@
   height: var(--unit-9);
 }
 
-.confirmModalContainer {
-  padding: 0 var(--unit-6);
-}
-.confirmModalTitle {
-  color: var(--neutral-light-4);
-  font-size: 22px;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-.confirmModalTitle span {
-  margin-left: var(--unit-2);
-}
-.confirmModalTitle path {
-  fill: var(--neutral-light-4);
-}
-
-.confirmModalText {
-  margin: 2rem 4rem;
-  font-size: var(--font-l);
-  font-weight: var(--font-medium);
-}
-
-.confirmButtonContainer {
-  display: flex;
-  gap: var(--unit-8);
-  justify-content: center;
-  margin-bottom: var(--unit-6);
-}
-.confirmButtonContainer .profPicConfirmButton {
-  padding: var(--unit-3) var(--unit-6);
-}
-.confirmButtonContainer .profPicConfirmButton span {
-  font-size: var(--font-l);
-  letter-spacing: 0;
-}
-
 .nftModal {
   display: flex;
   align-items: flex-start;
@@ -517,11 +481,6 @@
   opacity: 1;
 }
 
-.editDoneButton {
-  margin: 32px 0;
-  padding: 18px 24px !important;
-}
-
 .editTableContainer {
   max-height: 20vh;
   overflow-y: auto;
@@ -662,14 +621,6 @@
   border-radius: 0.25rem;
 }
 
-.embedButton {
-  padding: 0.75rem 1.5rem !important;
-}
-
-.embedButtonText {
-  font-size: var(--font-l) !important;
-}
-
 .embedClickText {
   position: absolute;
   top: 100%;
diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.tsx b/packages/web/src/components/collectibles/components/CollectiblesPage.tsx
index cadeafaa449..168b8c84051 100644
--- a/packages/web/src/components/collectibles/components/CollectiblesPage.tsx
+++ b/packages/web/src/components/collectibles/components/CollectiblesPage.tsx
@@ -16,6 +16,7 @@ import {
 } from '@audius/common/store'
 import { getHash } from '@audius/common/utils'
 import {
+  Button as HarmonyButton,
   Modal,
   IconKebabHorizontal,
   IconPencil,
@@ -89,7 +90,12 @@ export const collectibleMessages = {
   videoNotSupported: 'Your browser does not support the video tag.',
   clickCopy: 'Click To Copy',
   copied: 'Copied to Clipboard',
-  done: 'Done'
+  done: 'Done',
+  setAsProfilePic: 'Set As Profile Pic',
+  setAsProfilePicDescription:
+    'Are you sure you want to change your profile picture?',
+  setAsProfilePickCancel: 'Nevermind',
+  setAsProfilePickConfirm: 'Yes'
 }
 
 const dedupe = (list: any[]) => {
@@ -734,13 +740,13 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
             </div>
           )}
 
-          <Button
-            className={styles.editDoneButton}
-            type={ButtonType.PRIMARY_ALT}
-            size={ButtonSize.SMALL}
-            text='Done'
+          <HarmonyButton
+            variant='primary'
+            size='small'
             onClick={handleDoneClick}
-          />
+          >
+            Done
+          </HarmonyButton>
         </div>
       </Modal>
 
@@ -784,13 +790,9 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
                   </div>
                 </div>
               </Toast>
-              <Button
-                type={ButtonType.PRIMARY_ALT}
-                onClick={closeEmbedModal}
-                text={collectibleMessages.done}
-                textClassName={styles.embedButtonText}
-                className={styles.embedButton}
-              />
+              <HarmonyButton variant='primary' onClick={closeEmbedModal}>
+                {collectibleMessages.done}
+              </HarmonyButton>
             </div>
           </div>
         </div>
diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx
index 9d7eb2704f6..87b5fc6cb9a 100644
--- a/packages/web/src/components/collection/desktop/EditButton.tsx
+++ b/packages/web/src/components/collection/desktop/EditButton.tsx
@@ -1,10 +1,7 @@
 import { useCallback } from 'react'
 
 import { useEditPlaylistModal } from '@audius/common/store'
-import { IconPencil } from '@audius/harmony'
-import { ButtonProps, ButtonType } from '@audius/stems'
-
-import { EntityActionButton } from '../../entity-page/EntityActionButton'
+import { ButtonProps, IconPencil, Button } from '@audius/harmony'
 
 const messages = {
   edit: 'Edit'
@@ -24,12 +21,13 @@ export const EditButton = (props: EditButtonProps) => {
   }, [collectionId, onOpen])
 
   return (
-    <EntityActionButton
-      type={ButtonType.COMMON}
-      text={messages.edit}
-      leftIcon={<IconPencil />}
+    <Button
+      variant='secondary'
+      iconLeft={IconPencil}
       onClick={handleEdit}
       {...other}
-    />
+    >
+      {messages.edit}
+    </Button>
   )
 }
diff --git a/packages/web/src/components/collection/desktop/FavoriteButton.tsx b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
index 6986f44de75..e3dd26367ec 100644
--- a/packages/web/src/components/collection/desktop/FavoriteButton.tsx
+++ b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
@@ -12,14 +12,11 @@ import {
   collectionsSocialActions,
   CommonState
 } from '@audius/common/store'
-import { IconHeart } from '@audius/harmony'
-import { ButtonProps, ButtonType } from '@audius/stems'
+import { ButtonProps, IconHeart, Button } from '@audius/harmony'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { Tooltip } from 'components/tooltip'
 
-import { EntityActionButton } from '../../entity-page/EntityActionButton'
-
 const { getCollection } = collectionPageSelectors
 const { getAccountCollections } = accountSelectors
 const {
@@ -41,7 +38,7 @@ type FavoriteButtonProps = Partial<ButtonProps> & {
 }
 
 export const FavoriteButton = (props: FavoriteButtonProps) => {
-  const { collectionId, isOwner, type, ...other } = props
+  const { collectionId, isOwner, variant, ...other } = props
 
   const userPlaylists = useSelector(getAccountCollections)
 
@@ -83,13 +80,14 @@ export const FavoriteButton = (props: FavoriteButtonProps) => {
       disabled={isOwner || saveCount === 0}
       text={isSaved ? messages.unfavorite : messages.favorite}
     >
-      <EntityActionButton
-        type={type ?? (isSaved ? ButtonType.SECONDARY : ButtonType.COMMON)}
-        text={isSaved ? messages.favorited : messages.favorite}
-        leftIcon={<IconHeart />}
+      <Button
+        variant={variant ?? (isSaved ? 'primary' : 'secondary')}
+        iconLeft={IconHeart}
         onClick={handleFavorite}
         {...other}
-      />
+      >
+        {isSaved ? messages.favorited : messages.favorite}
+      </Button>
     </Tooltip>
   )
 }
diff --git a/packages/web/src/components/collection/desktop/PlayButton.tsx b/packages/web/src/components/collection/desktop/PlayButton.tsx
index a84d1b8481c..666d8eb496b 100644
--- a/packages/web/src/components/collection/desktop/PlayButton.tsx
+++ b/packages/web/src/components/collection/desktop/PlayButton.tsx
@@ -1,9 +1,6 @@
 import { MouseEventHandler } from 'react'
 
-import { IconPause, IconPlay } from '@audius/harmony'
-import { ButtonType } from '@audius/stems'
-
-import { EntityActionButton } from '../../entity-page/EntityActionButton'
+import { IconPause, IconPlay, Button } from '@audius/harmony'
 
 import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
@@ -21,12 +18,13 @@ export const PlayButton = (props: PlayButtonProps) => {
   const { onPlay, playing: isPlaying } = props
 
   return (
-    <EntityActionButton
-      type={ButtonType.PRIMARY_ALT}
-      text={isPlaying ? messages.pause : messages.play}
-      leftIcon={isPlaying ? <IconPause /> : <IconPlay />}
+    <Button
+      variant='primary'
+      iconLeft={isPlaying ? IconPause : IconPlay}
       onClick={onPlay}
       widthToHideText={BUTTON_COLLAPSE_WIDTHS.first}
-    />
+    >
+      {isPlaying ? messages.pause : messages.play}
+    </Button>
   )
 }
diff --git a/packages/web/src/components/collection/desktop/PublishButton.tsx b/packages/web/src/components/collection/desktop/PublishButton.tsx
index 478cc62e33c..133a39941b1 100644
--- a/packages/web/src/components/collection/desktop/PublishButton.tsx
+++ b/packages/web/src/components/collection/desktop/PublishButton.tsx
@@ -4,17 +4,12 @@ import {
   collectionPageSelectors,
   CommonState
 } from '@audius/common/store'
-import { IconRocket } from '@audius/harmony'
-import { ButtonProps, ButtonType } from '@audius/stems'
+import { ButtonProps, IconRocket, Button } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 import { useToggle } from 'react-use'
 
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { Tooltip } from 'components/tooltip'
 
-import { EntityActionButton } from '../../entity-page/EntityActionButton'
-
-import styles from './CollectionHeader.module.css'
 import { PublishConfirmationModal } from './PublishConfirmationModal'
 
 const { getCollection } = collectionPageSelectors
@@ -46,26 +41,20 @@ export const PublishButton = (props: PublishButtonProps) => {
   const isDisabled = !track_count || track_count === 0 || hasHiddenTracks
 
   const publishButtonElement = (
-    <EntityActionButton
-      type={_is_publishing ? ButtonType.DISABLED : ButtonType.COMMON}
-      text={
-        _is_publishing ? (
-          <span>{messages.publishing}&#8230;</span>
-        ) : (
-          messages.publish
-        )
-      }
-      leftIcon={
-        _is_publishing ? (
-          <LoadingSpinner className={styles.spinner} />
-        ) : (
-          <IconRocket />
-        )
-      }
-      onClick={_is_publishing ? undefined : toggleIsConfirming}
+    <Button
+      variant='secondary'
+      iconLeft={IconRocket}
+      onClick={toggleIsConfirming}
       disabled={isDisabled}
+      isLoading={_is_publishing}
       {...other}
-    />
+    >
+      {_is_publishing ? (
+        <span>{messages.publishing}&#8230;</span>
+      ) : (
+        messages.publish
+      )}
+    </Button>
   )
 
   return (
diff --git a/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx b/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx
index c3ed2c07da4..4e218778f22 100644
--- a/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx
+++ b/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx
@@ -14,9 +14,9 @@ import {
   ModalTitle,
   ModalProps,
   ModalFooter,
-  IconRocket
+  IconRocket,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { useDispatch, useSelector } from 'react-redux'
 
 import styles from './PublishConfirmationModal.module.css'
@@ -63,19 +63,17 @@ export const PublishConfirmationModal = (
         </ModalContentText>
       </ModalContent>
       <ModalFooter className={styles.footer}>
+        <Button variant='secondary' onClick={onClose} fullWidth>
+          {messages.cancel}
+        </Button>
         <Button
-          fullWidth
-          text={messages.cancel}
-          type={ButtonType.COMMON}
-          onClick={onClose}
-        />
-        <Button
-          fullWidth
-          text={messages.publish}
-          leftIcon={<IconRocket />}
-          type={ButtonType.PRIMARY}
+          variant='primary'
+          iconLeft={IconRocket}
           onClick={handlePublish}
-        />
+          fullWidth
+        >
+          {messages.publish}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/collection/desktop/RepostButton.tsx b/packages/web/src/components/collection/desktop/RepostButton.tsx
index 8a1c4e30792..41657f668a0 100644
--- a/packages/web/src/components/collection/desktop/RepostButton.tsx
+++ b/packages/web/src/components/collection/desktop/RepostButton.tsx
@@ -6,14 +6,11 @@ import {
   collectionsSocialActions,
   CommonState
 } from '@audius/common/store'
-import { IconRepost } from '@audius/harmony'
-import { ButtonProps, ButtonType } from '@audius/stems'
+import { ButtonProps, IconRepost, Button } from '@audius/harmony'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { Tooltip } from 'components/tooltip'
 
-import { EntityActionButton } from '../../entity-page/EntityActionButton'
-
 const { getCollection } = collectionPageSelectors
 const { repostCollection, undoRepostCollection } = collectionsSocialActions
 
@@ -28,7 +25,7 @@ type RepostButtonProps = Partial<ButtonProps> & {
 }
 
 export const RepostButton = (props: RepostButtonProps) => {
-  const { collectionId, type, ...other } = props
+  const { collectionId, variant, ...other } = props
   const dispatch = useDispatch()
 
   const { has_current_user_reposted } =
@@ -48,16 +45,16 @@ export const RepostButton = (props: RepostButtonProps) => {
     <Tooltip
       text={has_current_user_reposted ? messages.unrepost : messages.repost}
     >
-      <EntityActionButton
-        type={
-          type ??
-          (has_current_user_reposted ? ButtonType.SECONDARY : ButtonType.COMMON)
+      <Button
+        variant={
+          variant ?? (has_current_user_reposted ? 'primary' : 'secondary')
         }
-        text={has_current_user_reposted ? messages.reposted : messages.repost}
-        leftIcon={<IconRepost />}
+        iconLeft={IconRepost}
         onClick={handleRepost}
         {...other}
-      />
+      >
+        {has_current_user_reposted ? messages.reposted : messages.repost}
+      </Button>
     </Tooltip>
   )
 }
diff --git a/packages/web/src/components/collection/desktop/ShareButton.tsx b/packages/web/src/components/collection/desktop/ShareButton.tsx
index b8d3f6f34b1..0250b88e099 100644
--- a/packages/web/src/components/collection/desktop/ShareButton.tsx
+++ b/packages/web/src/components/collection/desktop/ShareButton.tsx
@@ -2,14 +2,11 @@ import { useCallback } from 'react'
 
 import { ShareSource, SmartCollectionVariant, ID } from '@audius/common/models'
 import { shareModalUIActions } from '@audius/common/store'
-import { IconShare } from '@audius/harmony'
-import { ButtonProps, ButtonType } from '@audius/stems'
+import { ButtonProps, IconShare, Button } from '@audius/harmony'
 import { useDispatch } from 'react-redux'
 
 import { Tooltip } from 'components/tooltip'
 
-import { EntityActionButton } from '../../entity-page/EntityActionButton'
-
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
 
 const messages = {
@@ -23,7 +20,7 @@ type ShareButtonProps = Partial<ButtonProps> & {
 }
 
 export const ShareButton = (props: ShareButtonProps) => {
-  const { collectionId, type, userId, tooltipText, ...other } = props
+  const { collectionId, variant, userId, tooltipText, ...other } = props
   const dispatch = useDispatch()
 
   const handleShare = useCallback(() => {
@@ -52,13 +49,14 @@ export const ShareButton = (props: ShareButtonProps) => {
   }, [dispatch, collectionId, userId])
 
   const shareButtonElement = (
-    <EntityActionButton
-      type={type ?? ButtonType.COMMON}
-      text={messages.share}
-      leftIcon={<IconShare />}
+    <Button
+      variant={variant ?? 'secondary'}
+      iconLeft={IconShare}
       onClick={handleShare}
       {...other}
-    />
+    >
+      {messages.share}
+    </Button>
   )
 
   return tooltipText ? (
diff --git a/packages/web/src/components/collection/mobile/CollectionHeader.jsx b/packages/web/src/components/collection/mobile/CollectionHeader.jsx
index c50a21da830..9a8d683e568 100644
--- a/packages/web/src/components/collection/mobile/CollectionHeader.jsx
+++ b/packages/web/src/components/collection/mobile/CollectionHeader.jsx
@@ -8,8 +8,7 @@ import {
   formatSecondsAsText,
   formatDate
 } from '@audius/common/utils'
-import { IconPause, IconPlay } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconPause, IconPlay } from '@audius/harmony'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -53,23 +52,13 @@ const Loading = (props) => {
 
 const PlayButton = (props) => {
   return props.playing ? (
-    <Button
-      className={cn(styles.playAllButton, styles.buttonFormatting)}
-      textClassName={styles.playAllButtonText}
-      type={ButtonType.PRIMARY_ALT}
-      text={messages.pause}
-      leftIcon={<IconPause />}
-      onClick={props.onPlay}
-    />
+    <Button variant='primary' iconLeft={IconPause} onClick={props.onPlay}>
+      {messages.pause}
+    </Button>
   ) : (
-    <Button
-      className={cn(styles.playAllButton, styles.buttonFormatting)}
-      textClassName={styles.playAllButtonText}
-      type={ButtonType.PRIMARY_ALT}
-      text={messages.play}
-      leftIcon={<IconPlay />}
-      onClick={props.onPlay}
-    />
+    <Button variant='primary' iconLeft={IconPlay} onClick={props.onPlay}>
+      {messages.play}
+    </Button>
   )
 }
 
diff --git a/packages/web/src/components/collection/mobile/CollectionHeader.module.css b/packages/web/src/components/collection/mobile/CollectionHeader.module.css
index cdf002c9495..5e55c654cc9 100644
--- a/packages/web/src/components/collection/mobile/CollectionHeader.module.css
+++ b/packages/web/src/components/collection/mobile/CollectionHeader.module.css
@@ -60,23 +60,6 @@
   margin-bottom: 14px;
 }
 
-.playAllButton {
-  width: 100%;
-  height: 40px !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.playAllButton .playAllButtonText {
-  color: var(--darkmode-static-white);
-  font-size: var(--font-xl);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.71px;
-  line-height: normal;
-  text-align: center;
-}
-
 .buttonContainer {
   flex: 1;
   width: 100%;
diff --git a/packages/web/src/components/confirmation-box/ConfirmationBox.jsx b/packages/web/src/components/confirmation-box/ConfirmationBox.jsx
deleted file mode 100644
index dae6c84cca0..00000000000
--- a/packages/web/src/components/confirmation-box/ConfirmationBox.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
-import PropTypes from 'prop-types'
-
-import styles from './ConfirmationBox.module.css'
-
-const ConfirmationBox = (props) => {
-  return (
-    <div className={styles.confirmationBox}>
-      <div className={styles.text}>{props.text}</div>
-      <div className={styles.buttons}>
-        <Button
-          text={props.leftText}
-          name={props.leftName}
-          size={ButtonSize.MEDIUM}
-          type={ButtonType.COMMON}
-          onClick={props.leftClick}
-        />
-        <Button
-          text={props.rightText}
-          name={props.rightName}
-          size={ButtonSize.MEDIUM}
-          type={ButtonType.PRIMARY_ALT}
-          onClick={props.rightClick}
-        />
-      </div>
-    </div>
-  )
-}
-
-ConfirmationBox.propTypes = {
-  text: PropTypes.string,
-  rightText: PropTypes.string,
-  leftText: PropTypes.string,
-  leftName: PropTypes.string,
-  rightName: PropTypes.string,
-  rightClick: PropTypes.func,
-  leftClick: PropTypes.func
-}
-
-ConfirmationBox.defaultProps = {
-  text: 'This might not be safe. Are you sure?',
-  rightText: 'Yes',
-  leftText: 'No',
-  rightClick: () => {},
-  leftClick: () => {}
-}
-
-export default ConfirmationBox
diff --git a/packages/web/src/components/confirmation-box/ConfirmationBox.module.css b/packages/web/src/components/confirmation-box/ConfirmationBox.module.css
deleted file mode 100644
index 1d1cdd9d934..00000000000
--- a/packages/web/src/components/confirmation-box/ConfirmationBox.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.confirmationBox {
-  width: 100%;
-  background-color: var(--white);
-  padding: 24px 32px 32px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.text {
-  text-align: center;
-  margin-bottom: 24px;
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-  line-height: 22px;
-  color: var(--neutral);
-}
-
-.buttons {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-}
diff --git a/packages/web/src/components/data-entry/ContextualMenu.tsx b/packages/web/src/components/data-entry/ContextualMenu.tsx
index 1aaab6d5e3e..73e9e590aba 100644
--- a/packages/web/src/components/data-entry/ContextualMenu.tsx
+++ b/packages/web/src/components/data-entry/ContextualMenu.tsx
@@ -11,9 +11,9 @@ import {
   Text as HarmonyText,
   IconCaretRight,
   Text,
-  IconComponent
+  IconComponent,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import {
   Form,
   Formik,
@@ -96,12 +96,9 @@ const MenuForm = (props: MenuFormProps) => {
             </HarmonyText>
           </Box>
         ) : null}
-        <Button
-          form={label}
-          type={ButtonType.PRIMARY}
-          text={messages.save}
-          buttonType='submit'
-        />
+        <Button variant='primary' form={label} type='submit'>
+          {messages.save}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/discovery-node-selection/DiscoveryNodeSelection.tsx b/packages/web/src/components/discovery-node-selection/DiscoveryNodeSelection.tsx
index 5f05a3e8301..75bbb5ec853 100644
--- a/packages/web/src/components/discovery-node-selection/DiscoveryNodeSelection.tsx
+++ b/packages/web/src/components/discovery-node-selection/DiscoveryNodeSelection.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
 
 import Input from 'components/data-entry/Input'
 import { useDevModeHotkey } from 'hooks/useDevModeHotkey'
@@ -57,12 +57,9 @@ const DiscoveryNodeSelection = () => {
           onChange={(value: string) => setEndpoint(value.trim())}
         />
 
-        <Button
-          // not using messages variable because this is not intended for end user
-          text='Apply'
-          type={ButtonType.PRIMARY_ALT}
-          onClick={handleDiscoveryNodeSelection}
-        />
+        <Button variant='primary' onClick={handleDiscoveryNodeSelection}>
+          Apply
+        </Button>
       </div>
 
       {success && (
diff --git a/packages/web/src/components/download-mobile-app-drawer/DownloadMobileAppDrawer.tsx b/packages/web/src/components/download-mobile-app-drawer/DownloadMobileAppDrawer.tsx
index 740143563f2..afb70c4a589 100644
--- a/packages/web/src/components/download-mobile-app-drawer/DownloadMobileAppDrawer.tsx
+++ b/packages/web/src/components/download-mobile-app-drawer/DownloadMobileAppDrawer.tsx
@@ -7,9 +7,9 @@ import {
   IconCloudUpload as IconUpload,
   IconSpeaker,
   IconListens,
-  IconMessage
+  IconMessage,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 
 import Drawer from 'components/drawer/Drawer'
 import { getMobileOS } from 'utils/clientUtil'
@@ -85,11 +85,9 @@ export const DownloadMobileAppDrawer = (
             <span>{messages.download}</span>
           </li>
         </ul>
-        <Button
-          type={ButtonType.PRIMARY_ALT}
-          text={messages.buttonText}
-          onClick={goToAppStore}
-        />
+        <Button variant='primary' onClick={goToAppStore} fullWidth>
+          {messages.buttonText}
+        </Button>
       </div>
     </Drawer>
   )
diff --git a/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.module.css b/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.module.css
deleted file mode 100644
index 65317522eea..00000000000
--- a/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.modalButton {
-  font-size: var(--font-l) !important;
-  font-weight: var(--font-bold) !important;
-}
-
-.modalFooter {
-  column-gap: var(--unit-2);
-  padding: var(--unit-6);
-}
diff --git a/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.tsx b/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.tsx
index 84a38042981..928b2452a96 100644
--- a/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.tsx
+++ b/packages/web/src/components/duplicate-add-confirmation-modal/DuplicateAddConfirmationModal.tsx
@@ -8,6 +8,7 @@ import {
 } from '@audius/common/store'
 import { fillString } from '@audius/common/utils'
 import {
+  Button,
   Modal,
   ModalContent,
   ModalContentText,
@@ -15,7 +16,6 @@ import {
   ModalTitle,
   ModalFooter
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { capitalize } from 'lodash'
 import { useDispatch } from 'react-redux'
 
@@ -25,8 +25,6 @@ import { ToastContext } from 'components/toast/ToastContext'
 import ToastLinkContent from 'components/toast/mobile/ToastLinkContent'
 import { collectionPage } from 'utils/route'
 
-import styles from './DuplicateAddConfirmationModal.module.css'
-
 const { addTrackToPlaylist } = cacheCollectionsActions
 const { getCollection } = cacheCollectionsSelectors
 const { getPlaylistId, getTrackId } = duplicateAddConfirmationModalUISelectors
@@ -107,21 +105,13 @@ export const DuplicateAddConfirmationModal = () => {
           )}
         </ModalContentText>
       </ModalContent>
-      <ModalFooter className={styles.modalFooter}>
-        <Button
-          textClassName={styles.modalButton}
-          fullWidth
-          text={messages.add}
-          type={ButtonType.COMMON}
-          onClick={handleAdd}
-        />
-        <Button
-          textClassName={styles.modalButton}
-          fullWidth
-          text={messages.cancel}
-          type={ButtonType.PRIMARY}
-          onClick={onClose}
-        />
+      <ModalFooter>
+        <Button variant='secondary' fullWidth onClick={handleAdd}>
+          {messages.add}
+        </Button>
+        <Button fullWidth variant='primary' onClick={onClose}>
+          {messages.cancel}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.module.css b/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.module.css
index f63065f5310..2944f3d47f3 100644
--- a/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.module.css
+++ b/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.module.css
@@ -34,20 +34,6 @@
   color: var(--neutral);
 }
 
-.submit {
-  height: 40px;
-  width: 100%;
-  background-color: var(--accent-red) !important;
-}
-
-.submit .submitText {
-  font-style: normal;
-  font-size: var(--font-m);
-  line-height: 12px;
-  text-align: center;
-  color: var(--white);
-}
-
 .cancel {
   margin-top: 4px;
   padding: 12px;
diff --git a/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.tsx b/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.tsx
index 41f6f83e94e..69ad460f1f1 100644
--- a/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.tsx
+++ b/packages/web/src/components/edit-playlist/mobile/RemovePlaylistTrackDrawer.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
 
 import Drawer from 'components/drawer/Drawer'
 
@@ -32,13 +32,9 @@ const RemovePlaylistTrackDrawer = ({
         <div className={styles.description}>
           {messages.description(trackTitle)}
         </div>
-        <Button
-          className={styles.submit}
-          type={ButtonType.PRIMARY_ALT}
-          text={messages.submit}
-          textClassName={styles.submitText}
-          onClick={onConfirm}
-        />
+        <Button variant='destructive' onClick={onConfirm} fullWidth>
+          {messages.submit}
+        </Button>
         <div className={styles.cancel} onClick={onClose}>
           {messages.cancel}
         </div>
diff --git a/packages/web/src/components/embed-modal/EmbedModal.module.css b/packages/web/src/components/embed-modal/EmbedModal.module.css
index 3346d453d45..3d7cf4c6a5b 100644
--- a/packages/web/src/components/embed-modal/EmbedModal.module.css
+++ b/packages/web/src/components/embed-modal/EmbedModal.module.css
@@ -62,11 +62,3 @@
   line-height: 23px;
   margin-bottom: 16px;
 }
-
-.button .buttonText {
-  font-size: var(--font-s);
-  text-transform: uppercase;
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
-  line-height: 10px;
-}
diff --git a/packages/web/src/components/embed-modal/EmbedModal.tsx b/packages/web/src/components/embed-modal/EmbedModal.tsx
index b45e552ac60..c923e4c2502 100644
--- a/packages/web/src/components/embed-modal/EmbedModal.tsx
+++ b/packages/web/src/components/embed-modal/EmbedModal.tsx
@@ -2,8 +2,7 @@ import { useState, useMemo, useEffect, useCallback } from 'react'
 
 import { Name, PlayableType, ID, Track } from '@audius/common/models'
 import { encodeHashId } from '@audius/common/utils'
-import { Modal, SegmentedControl } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, Modal, SegmentedControl } from '@audius/harmony'
 import cn from 'classnames'
 import { connect } from 'react-redux'
 import { Dispatch } from 'redux'
@@ -200,13 +199,9 @@ const EmbedModal = ({ isOpen, kind, id, metadata, close }: EmbedModalProps) => {
           </div>
 
           <div className={styles.bottom}>
-            <Button
-              type={ButtonType.PRIMARY_ALT}
-              onClick={close}
-              text='Done'
-              textClassName={styles.buttonText}
-              className={styles.button}
-            />
+            <Button variant='primary' onClick={close}>
+              Done
+            </Button>
           </div>
         </div>
       </div>
diff --git a/packages/web/src/components/entity-page/EntityActionButton.module.css b/packages/web/src/components/entity-page/EntityActionButton.module.css
deleted file mode 100644
index 7925d971c7f..00000000000
--- a/packages/web/src/components/entity-page/EntityActionButton.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.text {
-  font-size: var(--font-l) !important;
-  text-transform: uppercase;
-}
-
-.icon {
-  margin-right: var(--unit-2) !important;
-}
diff --git a/packages/web/src/components/entity-page/EntityActionButton.tsx b/packages/web/src/components/entity-page/EntityActionButton.tsx
index 6440006c432..d424bf65ee1 100644
--- a/packages/web/src/components/entity-page/EntityActionButton.tsx
+++ b/packages/web/src/components/entity-page/EntityActionButton.tsx
@@ -1,15 +1,8 @@
-import { Button, ButtonProps } from '@audius/stems'
-
-import styles from './EntityActionButton.module.css'
+import { Button, ButtonProps } from '@audius/harmony'
 
 type CollectionActionButtonProps = ButtonProps
 
 export const EntityActionButton = (props: CollectionActionButtonProps) => {
-  return (
-    <Button
-      textClassName={styles.text}
-      iconClassName={styles.icon}
-      {...props}
-    />
-  )
+  const { children, ...other } = props
+  return <Button {...other}>{children}</Button>
 }
diff --git a/packages/web/src/components/image-selection/ImageSelectionButton.jsx b/packages/web/src/components/image-selection/ImageSelectionButton.jsx
index a0825249015..ff2655b26a8 100644
--- a/packages/web/src/components/image-selection/ImageSelectionButton.jsx
+++ b/packages/web/src/components/image-selection/ImageSelectionButton.jsx
@@ -1,7 +1,6 @@
 import { useRef, useState } from 'react'
 
-import { IconCamera } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { IconCamera, Button } from '@audius/harmony'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import ReactDropzone from 'react-dropzone'
@@ -77,16 +76,18 @@ const ImageSelectionButton = ({
       {includePopup ? (
         <>
           <Button
+            variant='tertiary'
+            size='small'
             ref={anchorRefProp ? undefined : anchorRefInner}
-            className={cn(styles.button, buttonClassName, {
+            className={cn(buttonClassName, {
               [styles.hide]: showModal
             })}
-            text={buttonText}
-            rightIcon={<IconCamera />}
-            type={ButtonType.WHITE}
+            iconRight={IconCamera}
             onClick={handleClick}
-            buttonType='button'
-          />
+            type='button'
+          >
+            {buttonText}
+          </Button>
           <ImageSelectionPopup
             anchorRef={anchorRefProp ?? anchorRefInner}
             className={styles.popup}
@@ -107,15 +108,17 @@ const ImageSelectionButton = ({
             data-testid='upload-photo-dropzone'
           >
             <Button
-              className={cn(styles.button, styles.noPopup, {
+              variant='tertiary'
+              size='small'
+              className={cn(styles.noPopup, {
                 [styles.hide]: hasImage
               })}
-              text={buttonText}
-              rightIcon={<IconCamera />}
-              type={ButtonType.WHITE}
+              iconRight={IconCamera}
               onClick={handleClick}
-              buttonType='button'
-            />
+              type='button'
+            >
+              {buttonText}
+            </Button>
           </ReactDropzone>
           {error ? (
             <InvalidFileType className={styles.invalidFileType} />
diff --git a/packages/web/src/components/image-selection/ImageSelectionButton.module.css b/packages/web/src/components/image-selection/ImageSelectionButton.module.css
index de79b3bdcaf..9d116cbebc6 100644
--- a/packages/web/src/components/image-selection/ImageSelectionButton.module.css
+++ b/packages/web/src/components/image-selection/ImageSelectionButton.module.css
@@ -14,14 +14,6 @@
   margin: 4px auto;
 }
 
-.button {
-  height: 40px !important;
-  box-sizing: content-box;
-  border-radius: 6px;
-  opacity: 1;
-  transition: all 0.07s ease-in-out;
-}
-
 .hide {
   opacity: 0;
   cursor: default;
diff --git a/packages/web/src/components/image-selection/ImageSelectionPopup.jsx b/packages/web/src/components/image-selection/ImageSelectionPopup.jsx
index 8310cebd23f..5458d9670e8 100644
--- a/packages/web/src/components/image-selection/ImageSelectionPopup.jsx
+++ b/packages/web/src/components/image-selection/ImageSelectionPopup.jsx
@@ -4,8 +4,7 @@ import { useSelectTierInfo } from '@audius/common/hooks'
 import { RandomImage } from '@audius/common/services'
 import { accountSelectors, badgeTiers } from '@audius/common/store'
 import { removeNullable } from '@audius/common/utils'
-import { Popup, SegmentedControl, IconSearch } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, Popup, SegmentedControl, IconSearch } from '@audius/harmony'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
@@ -95,12 +94,13 @@ const RandomPage = ({ onSelect }) => {
       </div>
       <div className={styles.buttonWrapper}>
         <Button
-          className={styles.button}
-          textClassName={styles.buttonText}
-          type={ButtonType.PRIMARY_ALT}
-          text={searched ? messages.searchAgain : messages.search}
+          variant='primary'
+          size='small'
+          fullWidth
           onClick={() => getRandomPhoto(randomPhotoQuery)}
-        />
+        >
+          {searched ? messages.searchAgain : messages.search}
+        </Button>
       </div>
       <div className={styles.suggestion}>
         <div className={styles.suggestionHeader}>
diff --git a/packages/web/src/components/image-selection/ImageSelectionPopup.module.css b/packages/web/src/components/image-selection/ImageSelectionPopup.module.css
index 3db8a1aed73..90e7e275306 100644
--- a/packages/web/src/components/image-selection/ImageSelectionPopup.module.css
+++ b/packages/web/src/components/image-selection/ImageSelectionPopup.module.css
@@ -88,16 +88,6 @@
   margin: 0 auto var(--unit-6);
 }
 
-.button {
-  height: var(--unit-9) !important;
-  width: 100%;
-}
-
-.button .buttonText {
-  font-size: var(--font-m);
-  font-weight: var(--font-bold);
-}
-
 .suggestion {
   font-size: var(--font-s);
   font-weight: var(--font-medium);
diff --git a/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.module.css b/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.module.css
deleted file mode 100644
index 62abc1f5eec..00000000000
--- a/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.modalBody {
-  max-width: 480px;
-}
-
-.content {
-  line-height: 130%;
-  font-size: var(--font-l);
-  font-weight: var(--font-medium);
-}
-
-.footer {
-  padding: 0 var(--unit-6) var(--unit-6);
-}
-
-.button {
-  width: 100%;
-}
diff --git a/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.tsx b/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.tsx
index 39e931c5f89..62351b13b55 100644
--- a/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.tsx
+++ b/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.tsx
@@ -20,17 +20,16 @@ import {
   ModalFooter,
   IconMessageUnblock as IconUnblockMessages,
   IconMessageLocked,
-  IconTipping
+  IconTipping,
+  Button,
+  ModalContentText
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { Action } from '@reduxjs/toolkit'
 import { useDispatch } from 'react-redux'
 
 import { UserNameAndBadges } from 'components/user-name-and-badges/UserNameAndBadges'
 import { useSelector } from 'utils/reducer'
 
-import styles from './InboxUnavailableModal.module.css'
-
 const { unblockUser, createChat } = chatActions
 
 const messages = {
@@ -76,13 +75,13 @@ const actionToContent = ({
           )
         ),
         buttonText: messages.tipButton,
-        buttonIcon: <IconTipping />
+        buttonIcon: IconTipping
       }
     case ChatPermissionAction.UNBLOCK:
       return {
         content: messages.unblockContent,
         buttonText: messages.unblockButton,
-        buttonIcon: <IconUnblockMessages />
+        buttonIcon: IconUnblockMessages
       }
     default:
       return {
@@ -177,24 +176,22 @@ export const InboxUnavailableModal = () => {
   })
 
   return (
-    <Modal
-      bodyClassName={styles.modalBody}
-      isOpen={isOpen}
-      onClose={onClose}
-      onClosed={onClosed}
-    >
+    <Modal isOpen={isOpen} onClose={onClose} onClosed={onClosed} size='small'>
       <ModalHeader onClose={handleCancel}>
         <ModalTitle icon={<IconMessageLocked />} title={messages.title} />
       </ModalHeader>
-      <ModalContent className={styles.content}>{content}</ModalContent>
-      <ModalFooter className={styles.footer}>
+      <ModalContent>
+        <ModalContentText>{content}</ModalContentText>
+      </ModalContent>
+      <ModalFooter>
         <Button
-          className={styles.button}
-          type={hasAction ? ButtonType.PRIMARY_ALT : ButtonType.COMMON_ALT}
-          text={buttonText}
-          leftIcon={buttonIcon}
+          variant={hasAction ? 'primary' : 'secondary'}
+          fullWidth
+          iconLeft={buttonIcon}
           onClick={handleClick}
-        />
+        >
+          {buttonText}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/menu/TrackMenu.tsx b/packages/web/src/components/menu/TrackMenu.tsx
index f7fa339b0d1..928cbb81ccd 100644
--- a/packages/web/src/components/menu/TrackMenu.tsx
+++ b/packages/web/src/components/menu/TrackMenu.tsx
@@ -17,7 +17,8 @@ import {
   useEditTrackModal,
   playbackPositionActions,
   playbackPositionSelectors,
-  CommonState
+  CommonState,
+  artistPickModalActions
 } from '@audius/common/store'
 import { Genre } from '@audius/common/utils'
 import { PopupMenuItem } from '@audius/harmony'
@@ -28,7 +29,6 @@ import { Dispatch } from 'redux'
 import * as embedModalActions from 'components/embed-modal/store/actions'
 import { ToastContext } from 'components/toast/ToastContext'
 import { useFlag } from 'hooks/useRemoteConfig'
-import { showSetAsArtistPickConfirmation } from 'store/application/ui/setAsArtistPickConfirmation/actions'
 import { AppState } from 'store/types'
 import { albumPage, profilePage } from 'utils/route'
 import { trpc } from 'utils/trpcClientWeb'
@@ -354,8 +354,9 @@ function mapDispatchToProps(dispatch: Dispatch) {
     undoRepostTrack: (trackId: ID) =>
       dispatch(undoRepostTrack(trackId, RepostSource.OVERFLOW)),
     setArtistPick: (trackId: ID) =>
-      dispatch(showSetAsArtistPickConfirmation(trackId)),
-    unsetArtistPick: () => dispatch(showSetAsArtistPickConfirmation()),
+      dispatch(artistPickModalActions.open({ trackId })),
+    unsetArtistPick: () =>
+      dispatch(artistPickModalActions.open({ trackId: null })),
     openAddToCollectionModal: (
       collectionType: 'album' | 'playlist',
       trackId: ID,
diff --git a/packages/web/src/components/nav/desktop/NavButton.module.css b/packages/web/src/components/nav/desktop/NavButton.module.css
deleted file mode 100644
index 2f83d0c6eb8..00000000000
--- a/packages/web/src/components/nav/desktop/NavButton.module.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.navButton {
-  height: 36px;
-  padding: 0 20px;
-}
-
-.navButton > .navButtonText {
-  font-size: var(--font-xs);
-  font-weight: var(--font-demi-bold);
-  letter-spacing: 0px;
-}
-
-.createAccount > .navButtonText {
-  font-weight: var(--font-bold);
-  font-size: var(--font-s);
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-}
-
-.createAccount > .navButtonText {
-  margin-right: 8px !important;
-}
-
-.upload > .navButtonText {
-  color: var(--neutral-light-4);
-}
-
-.upload .navButtonIcon {
-  margin-right: 8px !important;
-}
-
-.upload > .navButtonIcon path {
-  fill: var(--neutral-light-4);
-}
-
-.spinner {
-  display: block;
-  height: 16px;
-  width: 16px;
-}
-
-.spinner g path {
-  stroke: var(--neutral-light-4) !important;
-}
diff --git a/packages/web/src/components/nav/desktop/NavButton.tsx b/packages/web/src/components/nav/desktop/NavButton.tsx
index 813be6656d7..73d6089be21 100644
--- a/packages/web/src/components/nav/desktop/NavButton.tsx
+++ b/packages/web/src/components/nav/desktop/NavButton.tsx
@@ -8,20 +8,16 @@ import {
 } from '@audius/common/store'
 import {
   IconCloudUpload as IconUpload,
-  IconUserFollow as IconFollow
+  IconUserFollow as IconFollow,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType, ButtonSize } from '@audius/stems'
-import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 
 import { make, useRecord } from 'common/store/analytics/actions'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { AppState } from 'store/types'
 import { SIGN_UP_PAGE, UPLOAD_PAGE } from 'utils/route'
 
-import styles from './NavButton.module.css'
-
 const { getAccountStatus, getAccountUser } = accountSelectors
 const { resetState: resetUploadState } = uploadActions
 const { getIsUploading } = uploadSelectors
@@ -57,70 +53,38 @@ export const NavButton = () => {
 
   let button
   switch (status) {
-    case 'signedOut':
-      button = (
-        <Button
-          as={Link}
-          to={SIGN_UP_PAGE}
-          className={cn(styles.navButton, styles.createAccount)}
-          textClassName={styles.navButtonText}
-          iconClassName={styles.navButtonIcon}
-          type={ButtonType.PRIMARY_ALT}
-          size={ButtonSize.SMALL}
-          text={messages.signUp}
-          leftIcon={<IconFollow />}
-          onClick={handleSignup}
-        />
-      )
-      break
     case 'signedIn':
-      button = (
-        <Button
-          as={Link}
-          to={UPLOAD_PAGE}
-          className={cn(styles.navButton, styles.upload)}
-          textClassName={styles.navButtonText}
-          iconClassName={styles.navButtonIcon}
-          type={ButtonType.COMMON}
-          size={ButtonSize.SMALL}
-          text={messages.uploadTrack}
-          leftIcon={<IconUpload />}
-          onClick={handleUpload}
-        />
-      )
-      break
     case 'uploading':
       button = (
         <Button
-          as={Link}
-          to={UPLOAD_PAGE}
-          className={cn(styles.navButton, styles.upload)}
-          textClassName={styles.navButtonText}
-          iconClassName={styles.navButtonIcon}
-          type={ButtonType.COMMON_ALT}
-          size={ButtonSize.SMALL}
-          text={messages.uploading}
-          leftIcon={<LoadingSpinner className={styles.spinner} />}
+          variant='secondary'
+          size='small'
+          asChild
+          iconLeft={IconUpload}
+          isLoading={status === 'uploading'}
           onClick={handleUpload}
-        />
+        >
+          <Link to={UPLOAD_PAGE}>{messages.uploadTrack}</Link>
+        </Button>
       )
       break
     case 'loading':
       button = null
       break
+    case 'signedOut':
     default:
       button = (
         <Button
-          className={cn(styles.navButton, styles.createAccount)}
-          textClassName={styles.navButtonText}
-          iconClassName={styles.navButtonIcon}
-          type={ButtonType.PRIMARY_ALT}
-          size={ButtonSize.SMALL}
-          text='SIGN UP'
-          leftIcon={<IconFollow />}
+          variant='primary'
+          size='small'
+          asChild
+          iconLeft={IconFollow}
           onClick={handleSignup}
-        />
+        >
+          <Link to={SIGN_UP_PAGE}>{messages.signUp}</Link>
+        </Button>
       )
+      break
   }
 
   return button
diff --git a/packages/web/src/components/nav/mobile/NavBar.tsx b/packages/web/src/components/nav/mobile/NavBar.tsx
index 1ae0758a1e5..ecb2b85e204 100644
--- a/packages/web/src/components/nav/mobile/NavBar.tsx
+++ b/packages/web/src/components/nav/mobile/NavBar.tsx
@@ -8,7 +8,7 @@ import {
   IconSettings,
   IconCrown,
   IconCaretLeft,
-  IconRemove,
+  IconClose,
   IconNotificationOn,
   IconButton
 } from '@audius/harmony'
@@ -139,7 +139,8 @@ const NavBar = ({
       <IconButton
         aria-label='close'
         color='subdued'
-        icon={IconRemove}
+        icon={IconClose}
+        size='m'
         onClick={getIsIOS() ? goBackAndResetSlide : goBackAndDoNotAnimate}
       />
     )
@@ -148,7 +149,8 @@ const NavBar = ({
       <IconButton
         aria-label='close'
         color='subdued'
-        icon={IconRemove}
+        icon={IconClose}
+        size='m'
         onClick={goBackAndDoNotAnimate}
       />
     )
diff --git a/packages/web/src/components/nav/mobile/SignOut.module.css b/packages/web/src/components/nav/mobile/SignOut.module.css
deleted file mode 100644
index f8aecadc452..00000000000
--- a/packages/web/src/components/nav/mobile/SignOut.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.signOut {
-  padding: 24px 22px 21px;
-  color: var(--neutral);
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-  line-height: 22px;
-  text-align: center;
-}
-
-.nevermindButton {
-  margin: 24px 0px 20px;
-}
-
-.signOutButtons {
-  width: 100%;
-  justify-content: center;
-}
-
-.signOutButtons .signOutButtonText {
-  font-size: var(--font-s);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
-}
diff --git a/packages/web/src/components/nav/mobile/SignOut.tsx b/packages/web/src/components/nav/mobile/SignOut.tsx
deleted file mode 100644
index 3d0368928ef..00000000000
--- a/packages/web/src/components/nav/mobile/SignOut.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useCallback } from 'react'
-
-import { Name } from '@audius/common/models'
-import { signOutActions } from '@audius/common/store'
-import { Button, ButtonType } from '@audius/stems'
-import cn from 'classnames'
-import { useDispatch } from 'react-redux'
-
-import { make, useRecord } from 'common/store/analytics/actions'
-
-import styles from './SignOut.module.css'
-const { signOut } = signOutActions
-
-const messages = {
-  nevermind: 'NEVERMIND',
-  signOut: 'Sign Out',
-  signOutButton: 'SIGN OUT',
-  confirmSignOut: 'Are you sure you want to sign out?',
-  warning:
-    'Double check that you have an account recovery email just in case (resend from your settings).'
-}
-
-const SignOutPage = ({ onClickBack }: { onClickBack: () => void }) => {
-  const record = useRecord()
-  const dispatch = useDispatch()
-  const onSignOut = useCallback(async () => {
-    record(
-      make(Name.SETTINGS_LOG_OUT, {
-        callback: () => dispatch(signOut())
-      })
-    )
-  }, [record, dispatch])
-
-  return (
-    <div className={styles.signOut}>
-      <div>{messages.confirmSignOut}</div>
-      <div>{messages.warning}</div>
-      <Button
-        type={ButtonType.PRIMARY_ALT}
-        className={cn(styles.nevermindButton, styles.signOutButtons)}
-        textClassName={styles.signOutButtonText}
-        text={messages.nevermind}
-        onClick={onClickBack}
-      />
-      <Button
-        type={ButtonType.COMMON}
-        className={styles.signOutButtons}
-        textClassName={styles.signOutButtonText}
-        text={messages.signOutButton}
-        onClick={onSignOut}
-      />
-    </div>
-  )
-}
-
-export default SignOutPage
diff --git a/packages/web/src/components/no-connectivity-page/NoConnectivityContent.module.css b/packages/web/src/components/no-connectivity-page/NoConnectivityContent.module.css
deleted file mode 100644
index 9f70b844920..00000000000
--- a/packages/web/src/components/no-connectivity-page/NoConnectivityContent.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.outerContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  background-color: var(--notification-background-active);
-  height: 100%;
-  width: 100%;
-}
-
-.spacer {
-  visibility: hidden;
-  flex: 0.5;
-}
-
-.container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  font-size: var(--font-xl);
-  font-weight: var(--font-medium);
-  letter-spacing: 0.3px;
-  color: var(--neutral-light-2);
-  margin: auto 80px 0px;
-}
-
-.container > * {
-  margin-top: 24px;
-}
-
-.container > *:last-child {
-  margin-top: auto;
-  margin-bottom: 160px;
-}
-
-.button {
-  margin-top: auto;
-  background-color: var(--primary);
-}
-
-.spinner svg {
-  height: 22px !important;
-  width: 22px !important;
-}
diff --git a/packages/web/src/components/no-connectivity-page/NoConnectivityContent.tsx b/packages/web/src/components/no-connectivity-page/NoConnectivityContent.tsx
deleted file mode 100644
index de00e5daf43..00000000000
--- a/packages/web/src/components/no-connectivity-page/NoConnectivityContent.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useState, useEffect } from 'react'
-
-import { IconNoWifi as IconOffline } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-import cn from 'classnames'
-import Lottie from 'react-lottie'
-
-import loadingSpinner from 'assets/animations/loadingSpinner.json'
-
-import styles from './NoConnectivityContent.module.css'
-
-const messages = {
-  title: "You're not connected to the internet.",
-  retry: 'Retry'
-}
-
-const REFRESH_TIMEOUT_MSEC = 2 * 1000
-
-type NoConnectivityContentProps = {
-  containerClassName?: string
-  innerClassName?: string
-}
-
-const rootElement = document.querySelector('#root')
-
-const NoConnectivityContent = ({
-  containerClassName,
-  innerClassName
-}: NoConnectivityContentProps) => {
-  const [isRefreshing, setIsRefreshing] = useState(false)
-
-  useEffect(() => {
-    rootElement && disableBodyScroll(rootElement)
-    return () => {
-      clearAllBodyScrollLocks()
-    }
-  }, [])
-
-  const onClick = () => {
-    if (isRefreshing) return
-    setIsRefreshing(true)
-    setTimeout(() => setIsRefreshing(false), REFRESH_TIMEOUT_MSEC)
-  }
-
-  return (
-    <div className={cn(styles.outerContainer, containerClassName)}>
-      <div className={styles.spacer} />
-      <div className={cn(styles.container, innerClassName)}>
-        <IconOffline />
-        <div>{messages.title}</div>
-        <Button
-          type={ButtonType.PRIMARY_ALT}
-          onClick={onClick}
-          isDisabled={isRefreshing}
-          text={
-            isRefreshing ? (
-              <div className={styles.spinner}>
-                <Lottie
-                  isClickToPauseDisabled
-                  options={{
-                    loop: true,
-                    autoplay: true,
-                    animationData: loadingSpinner
-                  }}
-                />
-              </div>
-            ) : (
-              messages.retry
-            )
-          }
-          className={styles.button}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default NoConnectivityContent
diff --git a/packages/web/src/components/no-connectivity-page/NoConnectivityPage.module.css b/packages/web/src/components/no-connectivity-page/NoConnectivityPage.module.css
deleted file mode 100644
index 436c74866f3..00000000000
--- a/packages/web/src/components/no-connectivity-page/NoConnectivityPage.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.container {
-  position: fixed;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  z-index: 1000;
-}
diff --git a/packages/web/src/components/no-connectivity-page/NoConnectivityPage.tsx b/packages/web/src/components/no-connectivity-page/NoConnectivityPage.tsx
deleted file mode 100644
index af08d2b9b1e..00000000000
--- a/packages/web/src/components/no-connectivity-page/NoConnectivityPage.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import NoConnectivityContent from './NoConnectivityContent'
-import styles from './NoConnectivityPage.module.css'
-
-const NoConnectivityPage = () => {
-  return (
-    <div className={styles.container}>
-      <NoConnectivityContent />
-    </div>
-  )
-}
-
-export default NoConnectivityPage
diff --git a/packages/web/src/components/pin-track-confirmation/PinTrackConfirmation.module.css b/packages/web/src/components/pin-track-confirmation/PinTrackConfirmation.module.css
deleted file mode 100644
index 2835621bdda..00000000000
--- a/packages/web/src/components/pin-track-confirmation/PinTrackConfirmation.module.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.modalBody {
-  max-width: 400px;
-  width: 100%;
-}
-
-.modalHeader {
-  margin: 0px 16px;
-}
-
-.modalTitle {
-  color: var(--neutral-light-4);
-  font-size: var(--font-l);
-  font-weight: var(--font-heavy);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.container {
-  padding: 16px;
-}
-
-.header {
-  width: 452px;
-  color: var(--neutral);
-  font-family: var(--font-family);
-  font-size: var(--font-m);
-  font-weight: var(--font-bold);
-  text-align: center;
-  margin: 24px auto 8px;
-}
-
-.description {
-  color: var(--neutral);
-  font-family: var(--font-family);
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-  text-align: center;
-  margin: 0px auto 24px;
-  max-width: 360px;
-  line-height: 21px;
-}
-
-.multiline {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-.buttons {
-  display: inline-flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.deleteButton {
-  cursor: pointer;
-  margin-right: 31px;
-  text-transform: uppercase;
-}
-
-.nevermindButton {
-  cursor: pointer;
-  text-transform: uppercase;
-}
diff --git a/packages/web/src/components/pin-track-confirmation/PinTrackConfirmation.tsx b/packages/web/src/components/pin-track-confirmation/PinTrackConfirmation.tsx
deleted file mode 100644
index d2c2d6d3a80..00000000000
--- a/packages/web/src/components/pin-track-confirmation/PinTrackConfirmation.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { memo } from 'react'
-
-import { ID } from '@audius/common/models'
-import { accountSelectors, tracksSocialActions } from '@audius/common/store'
-import { Modal } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
-import { connect } from 'react-redux'
-import { Dispatch } from 'redux'
-
-import { cancelSetAsArtistPick } from 'store/application/ui/setAsArtistPickConfirmation/actions'
-import { getSetAsArtistPickConfirmation } from 'store/application/ui/setAsArtistPickConfirmation/selectors'
-import { PinTrackAction } from 'store/application/ui/setAsArtistPickConfirmation/types'
-import { AppState } from 'store/types'
-
-import styles from './PinTrackConfirmation.module.css'
-const { setArtistPick, unsetArtistPick } = tracksSocialActions
-const getAccountUser = accountSelectors.getAccountUser
-
-type PinTrackConfirmationProps = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>
-
-const pinTrackActionMessages = {
-  [PinTrackAction.ADD]: {
-    title: 'SET YOUR ARTIST PICK',
-    description:
-      'This track will appear at the top of your profile, above your recent uploads, until you change or remove it.',
-    confirm: 'PICK TRACK'
-  },
-  [PinTrackAction.UPDATE]: {
-    title: 'CHANGE YOUR ARTIST PICK?',
-    description:
-      'This track will appear at the top of your profile and replace your previously picked track.',
-    confirm: 'CHANGE TRACK'
-  },
-  [PinTrackAction.REMOVE]: {
-    title: 'UNSET AS ARTIST PICK',
-    description: (
-      <div className={styles.multiline}>
-        <p>{'Are you sure you want to remove your pick?'}</p>
-        <p>{'This track will be displayed based on its release date.'}</p>
-      </div>
-    ),
-    confirm: 'UNSET TRACK'
-  }
-}
-
-const getMessages = (action?: PinTrackAction) => {
-  return {
-    ...(action
-      ? pinTrackActionMessages[action]
-      : { title: '', description: '', confirm: '' }),
-    cancel: 'CANCEL'
-  }
-}
-
-const PinTrackConfirmation = (props: PinTrackConfirmationProps) => {
-  const { artist_pick_track_id: artistPick } = props.user || {
-    artist_pick_track_id: null
-  }
-  const pinAction = !artistPick
-    ? PinTrackAction.ADD
-    : props.pinTrack.trackId
-    ? PinTrackAction.UPDATE
-    : PinTrackAction.REMOVE
-  const messages = getMessages(pinAction)
-
-  const onConfirm = () => {
-    props.setArtistPick(props.pinTrack.trackId)
-    props.onCancel()
-  }
-
-  return (
-    <Modal
-      title={messages.title}
-      showTitleHeader
-      showDismissButton
-      bodyClassName={styles.modalBody}
-      headerContainerClassName={styles.modalHeader}
-      titleClassName={styles.modalTitle}
-      isOpen={props.pinTrack.isVisible}
-      onClose={props.onCancel}
-    >
-      <div className={styles.container}>
-        <div className={styles.description}>{messages.description}</div>
-        <div className={styles.buttons}>
-          <Button
-            className={styles.deleteButton}
-            text={messages.cancel}
-            size={ButtonSize.MEDIUM}
-            type={ButtonType.COMMON}
-            onClick={props.onCancel}
-          />
-          <Button
-            className={styles.nevermindButton}
-            text={messages.confirm}
-            size={ButtonSize.MEDIUM}
-            type={ButtonType.PRIMARY_ALT}
-            onClick={onConfirm}
-          />
-        </div>
-      </div>
-    </Modal>
-  )
-}
-
-PinTrackConfirmation.defaultProps = {
-  visible: false
-}
-
-function mapStateToProps(state: AppState) {
-  return {
-    user: getAccountUser(state),
-    pinTrack: getSetAsArtistPickConfirmation(state)
-  }
-}
-
-function mapDispatchToProps(dispatch: Dispatch) {
-  return {
-    onCancel: () => dispatch(cancelSetAsArtistPick()),
-    setArtistPick: (trackId?: ID) =>
-      dispatch(trackId ? setArtistPick(trackId) : unsetArtistPick())
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(memo(PinTrackConfirmation))
diff --git a/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx b/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx
index fca4fe2166c..d16a9b58f06 100644
--- a/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx
+++ b/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx
@@ -20,11 +20,9 @@ import {
   IconRepost,
   Flex
 } from '@audius/harmony'
-import { ButtonType } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { make } from 'common/store/analytics/actions'
-import { EntityActionButton } from 'components/entity-page/EntityActionButton'
 import { TwitterShareButton } from 'components/twitter-share-button/TwitterShareButton'
 import { fullTrackPage } from 'utils/route'
 
@@ -113,15 +111,16 @@ export const PurchaseContentFormFooter = ({
     return (
       <Flex direction='column' gap='xl' alignSelf='stretch'>
         <Flex gap='l'>
-          <EntityActionButton
-            buttonType='button'
-            type={isReposted ? ButtonType.SECONDARY : ButtonType.COMMON}
-            text={isReposted ? messages.reposted : messages.repost}
+          <Button
+            type='button'
+            variant={isReposted ? 'primary' : 'secondary'}
             fullWidth
-            leftIcon={<IconRepost />}
+            iconLeft={IconRepost}
             onClick={onRepost}
             role='log'
-          />
+          >
+            {isReposted ? messages.reposted : messages.repost}
+          </Button>
           <TwitterShareButton
             fullWidth
             type='dynamic'
diff --git a/packages/web/src/components/publish-track-confirmation-modal/PublishTrackConfirmationModal.tsx b/packages/web/src/components/publish-track-confirmation-modal/PublishTrackConfirmationModal.tsx
index 541f643a533..22d45cf9238 100644
--- a/packages/web/src/components/publish-track-confirmation-modal/PublishTrackConfirmationModal.tsx
+++ b/packages/web/src/components/publish-track-confirmation-modal/PublishTrackConfirmationModal.tsx
@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 
 import { publishTrackConfirmationModalUISelectors } from '@audius/common/store'
 import {
+  Button,
   Modal,
   ModalContent,
   ModalContentText,
@@ -10,13 +11,10 @@ import {
   ModalFooter,
   IconRocket
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 
 import { useModalState } from 'common/hooks/useModalState'
 import { useSelector } from 'common/hooks/useSelector'
 
-import styles from '../upload-confirmation-modal/UploadConfirmationModal.module.css'
-
 const { getConfirmCallback } = publishTrackConfirmationModalUISelectors
 
 const messages = {
@@ -43,31 +41,18 @@ export const PublishTrackConfirmationModal = () => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} size='small'>
       <ModalHeader>
-        <ModalTitle
-          icon={<IconRocket className={styles.titleIcon} />}
-          title={messages.title}
-        />
+        <ModalTitle icon={<IconRocket />} title={messages.title} />
       </ModalHeader>
       <ModalContent>
-        <ModalContentText className={styles.modalText}>
-          {messages.description}
-        </ModalContentText>
+        <ModalContentText>{messages.description}</ModalContentText>
       </ModalContent>
-      <ModalFooter className={styles.modalFooter}>
-        <Button
-          textClassName={styles.modalButton}
-          fullWidth
-          text={messages.cancel}
-          type={ButtonType.COMMON}
-          onClick={onClose}
-        />
-        <Button
-          textClassName={styles.modalButton}
-          fullWidth
-          text={messages.release}
-          type={ButtonType.PRIMARY}
-          onClick={handleConfirm}
-        />
+      <ModalFooter>
+        <Button fullWidth variant='secondary' onClick={onClose}>
+          {messages.cancel}
+        </Button>
+        <Button variant='primary' fullWidth onClick={handleConfirm}>
+          {messages.release}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
index f78b09bfd0b..c7bae32fc8f 100644
--- a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
+++ b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
@@ -1,66 +1,3 @@
-.modalContainer {
-  max-width: 536px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.modalHeader {
-  margin: 0px 16px;
-  padding-bottom: 8px;
-}
-
-.remixSettingsModalContainer > div {
-  max-width: 720px;
-  width: 100%;
-}
-
-.remixSettingsModalHeader {
-  font-weight: var(--font-heavy);
-  color: var(--neutral-light-2);
-}
-
-.remixSettingsModalHeader h2 {
-  color: var(--neutral-light-2);
-  font-weight: var(--font-heavy);
-}
-
-.remixSettingsModalHeaderDismissButton {
-  color: var(--neutral-light-2);
-}
-
-.remixSettingsModalTitleIcon {
-  width: var(--unit-5);
-  height: var(--unit-5);
-}
-
-.modalTitle {
-  color: var(--neutral);
-  font-size: var(--font-l);
-  font-weight: var(--font-heavy);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  line-height: 23px;
-  margin-bottom: 7px;
-}
-
-.modalSubtitle {
-  color: var(--neutral-light-4);
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-  letter-spacing: 0;
-  line-height: 18px;
-}
-
-.content {
-  padding: 16px 16px 0px;
-  color: var(--neutral);
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-  letter-spacing: 0;
-  line-height: 18px;
-}
-
 .info {
   margin-bottom: 8px;
 }
@@ -107,21 +44,6 @@
   align-items: center;
 }
 
-.doneButton {
-  align-self: flex-end;
-  margin: 16px;
-}
-
-.doneButtonContainer {
-  display: flex;
-  justify-content: center;
-  padding-top: var(--unit-2);
-}
-
-.doneButtonContainer .doneButton2 {
-  font-size: var(--font-l);
-}
-
 .disableInfo {
   margin-bottom: var(--unit-6);
 }
diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
index cee6dddf713..e6616500163 100644
--- a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
+++ b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
@@ -16,9 +16,10 @@ import {
   ModalHeader,
   ModalTitle,
   Switch,
-  IconRemix
+  IconRemix,
+  ModalFooter,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import { debounce } from 'lodash'
 
@@ -35,9 +36,8 @@ import styles from './RemixSettingsModal.module.css'
 const INPUT_DEBOUNCE_MS = 1000
 
 const messages = {
-  done: 'DONE',
-  done2: 'Done',
-  title: 'REMIX SETTINGS',
+  done: 'Done',
+  title: 'Remix Settings',
   subtitle: 'Specify what track you remixed here',
   remixOf: 'This is a Remix of: (Paste Audius Track URL)',
   error: 'Please paste a valid Audius track URL',
@@ -171,21 +171,13 @@ const RemixSettingsModal = ({
 
   return (
     <Modal
+      size='medium'
       isOpen={isOpen}
       onClose={onCloseModal}
-      wrapperClassName={styles.remixSettingsModalContainer}
       dismissOnClickOutside
     >
-      <ModalHeader
-        className={styles.remixSettingsModalHeader}
-        onClose={onCloseModal}
-        showDismissButton
-        dismissButtonClassName={styles.remixSettingsModalHeaderDismissButton}
-      >
-        <ModalTitle
-          title={messages.title}
-          icon={<IconRemix className={styles.remixSettingsModalTitleIcon} />}
-        />
+      <ModalHeader onClose={onCloseModal}>
+        <ModalTitle title={messages.title} icon={<IconRemix />} />
       </ModalHeader>
       <ModalContent>
         {isStreamGated ? (
@@ -264,16 +256,12 @@ const RemixSettingsModal = ({
         >
           {messages.preventOtherRemixes}
         </div>
-
-        <div className={styles.doneButtonContainer}>
-          <Button
-            textClassName={styles.doneButton2}
-            text={messages.done2}
-            type={ButtonType.PRIMARY_ALT}
-            onClick={onCloseModal}
-          />
-        </div>
       </ModalContent>
+      <ModalFooter>
+        <Button variant='primary' onClick={onCloseModal}>
+          {messages.done}
+        </Button>
+      </ModalFooter>
     </Modal>
   )
 }
diff --git a/packages/web/src/components/stat-banner/StatBanner.module.css b/packages/web/src/components/stat-banner/StatBanner.module.css
index 2187fcc3502..7a7ec289390 100644
--- a/packages/web/src/components/stat-banner/StatBanner.module.css
+++ b/packages/web/src/components/stat-banner/StatBanner.module.css
@@ -36,33 +36,3 @@
 .subscribeButton {
   margin-right: 6px;
 }
-
-.statButton {
-  text-transform: uppercase;
-  /* Specific value to ensure the button width doesn't change when variants
-   *  and text changes
-  */
-  width: 142px;
-}
-
-.iconButton svg {
-  width: var(--unit-5);
-  height: var(--unit-5);
-}
-
-.iconButton path {
-  fill: var(--neutral);
-}
-
-.iconButton.disabled path {
-  fill: var(--neutral-light-4);
-}
-
-.iconButton:hover path {
-  fill: var(--static-white);
-}
-
-button.iconButton.statButton {
-  width: var(--unit-8);
-  padding: 0;
-}
diff --git a/packages/web/src/components/stat-banner/StatBanner.tsx b/packages/web/src/components/stat-banner/StatBanner.tsx
index 4384dc0f9e9..3857fd0b971 100644
--- a/packages/web/src/components/stat-banner/StatBanner.tsx
+++ b/packages/web/src/components/stat-banner/StatBanner.tsx
@@ -10,9 +10,9 @@ import {
   IconPencil,
   IconKebabHorizontal,
   IconMessage,
-  PopupMenu
+  PopupMenu,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 
 import { ArtistRecommendationsPopup } from 'components/artist-recommendations/ArtistRecommendationsPopup'
@@ -112,11 +112,10 @@ const StatsPopupMenu = ({
       renderTrigger={(anchorRef, triggerPopup) => (
         <Button
           ref={anchorRef}
-          type={ButtonType.COMMON}
-          size={ButtonSize.SMALL}
-          className={cn(styles.iconButton, styles.statButton)}
+          variant='secondary'
+          size='small'
           aria-label={messages.more}
-          text={<IconKebabHorizontal />}
+          iconLeft={IconKebabHorizontal}
           onClick={() => triggerPopup()}
         />
       )}
@@ -159,14 +158,14 @@ export const StatBanner = (props: StatsBannerProps) => {
 
   const shareButton = (
     <Button
-      type={ButtonType.COMMON}
-      size={ButtonSize.SMALL}
-      className={cn(styles.statButton)}
-      text={messages.share}
-      leftIcon={<IconShare />}
+      variant='secondary'
+      size='small'
+      iconLeft={IconShare}
       onClick={onShare}
       widthToHideText={BUTTON_COLLAPSE_WIDTHS.first}
-    />
+    >
+      {messages.share}
+    </Button>
   )
 
   switch (mode) {
@@ -175,34 +174,31 @@ export const StatBanner = (props: StatsBannerProps) => {
         <>
           {shareButton}
           <Button
-            className={cn(styles.buttonTwo, styles.statButton)}
-            size={ButtonSize.SMALL}
-            type={ButtonType.SECONDARY}
-            text={messages.edit}
-            leftIcon={<IconPencil />}
+            variant='secondary'
+            size='small'
+            iconLeft={IconPencil}
             onClick={onEdit}
             widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
-          />
+          >
+            {messages.edit}
+          </Button>
         </>
       )
       break
     case 'editing':
       buttons = (
         <>
+          <Button variant='secondary' size='small' onClick={onCancel}>
+            {messages.cancel}
+          </Button>
           <Button
-            className={styles.statButton}
-            size={ButtonSize.SMALL}
-            type={ButtonType.COMMON}
-            text={messages.cancel}
-            onClick={onCancel}
-          />
-          <Button
+            variant='primary'
+            size='small'
             className={cn(styles.buttonTwo, styles.statButton)}
-            size={ButtonSize.SMALL}
-            type={ButtonType.PRIMARY_ALT}
-            text={messages.save}
             onClick={onSave}
-          />
+          >
+            {messages.save}
+          </Button>
         </>
       )
       break
@@ -220,13 +216,11 @@ export const StatBanner = (props: StatsBannerProps) => {
               />
               {onMessage ? (
                 <Button
-                  type={ButtonType.COMMON}
-                  size={ButtonSize.SMALL}
-                  className={cn(styles.iconButton, styles.statButton, {
-                    [styles.disabled]: !canCreateChat
-                  })}
+                  variant='secondary'
+                  size='small'
+                  disabled={!canCreateChat}
                   aria-label={messages.message}
-                  text={canCreateChat ? <IconMessage /> : <IconMessageLocked />}
+                  iconLeft={canCreateChat ? IconMessage : IconMessageLocked}
                   onClick={onMessage}
                 />
               ) : null}
diff --git a/packages/web/src/components/tipping/tip-audio/ConfirmSendTip.tsx b/packages/web/src/components/tipping/tip-audio/ConfirmSendTip.tsx
index 4da59b02c4d..aefe2551e34 100644
--- a/packages/web/src/components/tipping/tip-audio/ConfirmSendTip.tsx
+++ b/packages/web/src/components/tipping/tip-audio/ConfirmSendTip.tsx
@@ -1,15 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { tippingSelectors, tippingActions } from '@audius/common/store'
-import { IconCaretLeft, IconSend, IconCheck } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { IconCaretLeft, IconSend, IconCheck, Button } from '@audius/harmony'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { Transition, animated } from 'react-spring/renderprops.cjs'
 
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
-
 import { ProfileInfo } from '../../profile-info/ProfileInfo'
 
 import styles from './TipAudio.module.css'
@@ -139,27 +136,18 @@ export const ConfirmSendTip = () => {
       {!hasError && !isSending && !isConverting ? <ConfirmInfo /> : null}
       <div className={cn(styles.flexCenter, styles.buttonContainer)}>
         <Button
-          type={ButtonType.PRIMARY}
-          text={
-            hasError
-              ? messages.confirmAndTryAgain
-              : !isSending && !isConverting
-              ? messages.confirmTip
-              : ''
-          }
+          variant='primary'
           onClick={handleConfirmSendClick}
-          rightIcon={
-            isSending || isConverting ? (
-              <LoadingSpinner className={styles.loadingSpinner} />
-            ) : (
-              <IconCheck />
-            )
-          }
+          iconRight={IconCheck}
+          isLoading={isSending || isConverting}
           disabled={isDisabled}
-          className={cn(styles.button, styles.confirmButton, {
-            [styles.disabled]: isDisabled
-          })}
-        />
+        >
+          {hasError
+            ? messages.confirmAndTryAgain
+            : !isSending && !isConverting
+            ? messages.confirmTip
+            : ''}
+        </Button>
       </div>
       {!isSending && !isConverting ? (
         <div
diff --git a/packages/web/src/components/tipping/tip-audio/SendTip.tsx b/packages/web/src/components/tipping/tip-audio/SendTip.tsx
index 35991ec978a..385915833bf 100644
--- a/packages/web/src/components/tipping/tip-audio/SendTip.tsx
+++ b/packages/web/src/components/tipping/tip-audio/SendTip.tsx
@@ -30,9 +30,9 @@ import {
   IconArrowRight as IconArrow,
   IconTrophy,
   TokenAmountInput,
-  TokenAmountInputChangeHandler
+  TokenAmountInputChangeHandler,
+  Button
 } from '@audius/harmony'
-import { ButtonType, Button } from '@audius/stems'
 import BN from 'bn.js'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
@@ -247,15 +247,13 @@ export const SendTip = () => {
       {renderAvailableAmount()}
       <div className={cn(styles.flexCenter, styles.buttonContainer)}>
         <Button
-          text={messages.sendATip}
-          type={ButtonType.PRIMARY_ALT}
+          variant='primary'
           onClick={handleSendClick}
-          rightIcon={<IconArrow />}
-          textClassName={styles.buttonText}
-          className={cn(styles.buttonText, { [styles.disabled]: isDisabled })}
+          iconRight={IconArrow}
           disabled={isDisabled}
-          iconClassName={styles.buttonIcon}
-        />
+        >
+          {messages.sendATip}
+        </Button>
       </div>
       {hasInsufficientBalance && (
         <div className={cn(styles.flexCenter, styles.error)}>
diff --git a/packages/web/src/components/tipping/tip-audio/TipAudio.module.css b/packages/web/src/components/tipping/tip-audio/TipAudio.module.css
index 61abe2ee5d9..672d964b9ab 100644
--- a/packages/web/src/components/tipping/tip-audio/TipAudio.module.css
+++ b/packages/web/src/components/tipping/tip-audio/TipAudio.module.css
@@ -1,13 +1,3 @@
-.tipIconTextContainer {
-  min-height: 24px;
-  display: flex;
-  align-items: center;
-}
-
-.tipText {
-  margin-left: 8px;
-}
-
 .modalBody {
   width: 488px;
   height: 492px;
@@ -171,10 +161,6 @@
   cursor: pointer;
 }
 
-.tipAudioButton {
-  width: 100%;
-}
-
 .buttonText {
   font-size: var(--font-l) !important;
 }
@@ -289,19 +275,6 @@
   fill: var(--neutral-light-4) !important;
 }
 
-.shareButton,
-.shareButton:hover {
-  background: var(--static-twitter-blue) !important;
-}
-
-.shareButton span {
-  color: var(--static-white) !important;
-}
-
-.shareButton path {
-  fill: var(--static-white) !important;
-}
-
 .support {
   font-size: var(--font-m);
   font-weight: var(--font-demi-bold);
diff --git a/packages/web/src/components/tipping/tip-audio/TipAudioButton.tsx b/packages/web/src/components/tipping/tip-audio/TipAudioButton.tsx
index 0e1cc841346..1d850b6e715 100644
--- a/packages/web/src/components/tipping/tip-audio/TipAudioButton.tsx
+++ b/packages/web/src/components/tipping/tip-audio/TipAudioButton.tsx
@@ -1,13 +1,10 @@
 import { profilePageSelectors, tippingActions } from '@audius/common/store'
-import { IconTokenGold } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
-import cn from 'classnames'
+import { Button, IconTokenGold } from '@audius/harmony'
 import { useDispatch } from 'react-redux'
 
 import { useSelector } from 'common/hooks/useSelector'
 import { useAuthenticatedCallback } from 'hooks/useAuthenticatedCallback'
 
-import styles from './TipAudio.module.css'
 const { beginTip } = tippingActions
 const { getProfileUser } = profilePageSelectors
 
@@ -25,15 +22,12 @@ export const TipAudioButton = () => {
 
   return (
     <Button
-      className={cn(styles.button, styles.tipAudioButton)}
-      type={ButtonType.PRIMARY}
-      text={
-        <div className={styles.tipIconTextContainer}>
-          <IconTokenGold size='l' />
-          <span className={styles.tipText}>{messages.tipAudio}</span>
-        </div>
-      }
+      variant='primary'
+      fullWidth
+      iconLeft={IconTokenGold}
       onClick={handleClick}
-    />
+    >
+      {messages.tipAudio}
+    </Button>
   )
 }
diff --git a/packages/web/src/components/tipping/tip-audio/TipSent.tsx b/packages/web/src/components/tipping/tip-audio/TipSent.tsx
index 8bd4156b24b..99b461ba423 100644
--- a/packages/web/src/components/tipping/tip-audio/TipSent.tsx
+++ b/packages/web/src/components/tipping/tip-audio/TipSent.tsx
@@ -4,8 +4,7 @@ import { Name } from '@audius/common/models'
 import { deriveUserBankAddress } from '@audius/common/services'
 import { accountSelectors, tippingSelectors } from '@audius/common/store'
 import { formatNumberCommas } from '@audius/common/utils'
-import { IconTwitter, IconCheck } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { IconTwitter, IconCheck, Button } from '@audius/harmony'
 import cn from 'classnames'
 
 import { useSelector } from 'common/hooks/useSelector'
@@ -95,12 +94,13 @@ export const TipSent = () => {
       </div>
       <div className={styles.flexCenter}>
         <Button
-          className={styles.shareButton}
-          type={ButtonType.PRIMARY}
-          text={messages.shareToTwitter}
+          variant='primary'
+          color='blue'
           onClick={handleShareClick}
-          leftIcon={<IconTwitter width={24} height={24} />}
-        />
+          iconLeft={IconTwitter}
+        >
+          {messages.shareToTwitter}
+        </Button>
       </div>
     </div>
   ) : null
diff --git a/packages/web/src/components/track/GatedTrackSection.tsx b/packages/web/src/components/track/GatedTrackSection.tsx
index 2d1c522adff..a8f831ac634 100644
--- a/packages/web/src/components/track/GatedTrackSection.tsx
+++ b/packages/web/src/components/track/GatedTrackSection.tsx
@@ -29,9 +29,9 @@ import {
   IconSpecialAccess,
   IconLogoCircleETH,
   IconLogoCircleSOL,
-  useTheme
+  useTheme,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
@@ -253,14 +253,14 @@ const LockedGatedTrackSection = ({
     if (isContentCollectibleGated(streamConditions)) {
       return (
         <Button
-          color='accentBlue'
-          text={messages.goToCollection}
+          variant='primary'
+          color='blue'
           onClick={goToCollection}
-          rightIcon={<IconExternalLink />}
-          type={ButtonType.PRIMARY}
-          iconClassName={styles.buttonIcon}
-          textClassName={styles.buttonText}
-        />
+          iconRight={IconExternalLink}
+          fullWidth
+        >
+          {messages.goToCollection}
+        </Button>
       )
     }
 
@@ -283,26 +283,27 @@ const LockedGatedTrackSection = ({
     if (isContentTipGated(streamConditions)) {
       return (
         <Button
-          color='accentBlue'
-          text={messages.sendTip}
+          variant='primary'
+          color='blue'
           onClick={handleSendTip}
-          rightIcon={<IconTip />}
-          type={ButtonType.PRIMARY}
-          iconClassName={styles.buttonIcon}
-          textClassName={styles.buttonText}
-        />
+          iconRight={IconTip}
+          fullWidth
+        >
+          {messages.sendTip}
+        </Button>
       )
     }
 
     if (isContentUSDCPurchaseGated(streamConditions)) {
       return (
         <Button
-          color='specialLightGreen'
-          text={messages.buy(formatPrice(streamConditions.usdc_purchase.price))}
+          variant='primary'
+          color='lightGreen'
           onClick={handlePurchase}
-          type={ButtonType.PRIMARY}
-          textClassName={styles.buttonText}
-        />
+          fullWidth
+        >
+          {messages.buy(formatPrice(streamConditions.usdc_purchase.price))}
+        </Button>
       )
     }
 
diff --git a/packages/web/src/components/track/GiantTrackTile.module.css b/packages/web/src/components/track/GiantTrackTile.module.css
index ad08593fe79..7283e853b41 100644
--- a/packages/web/src/components/track/GiantTrackTile.module.css
+++ b/packages/web/src/components/track/GiantTrackTile.module.css
@@ -221,30 +221,6 @@
   width: 250px;
 }
 
-.gatedContentSectionButton button {
-  width: 100%;
-}
-
-.gatedContentSectionButton .buttonText {
-  font-size: var(--font-l);
-}
-
-.gatedContentSectionButton .buttonIcon svg {
-  width: var(--unit-4);
-  height: var(--unit-4);
-}
-
-.gatedContentSectionButton .followButton {
-  width: 100%;
-  flex: unset;
-  max-width: none;
-  height: 46px;
-}
-
-.gatedContentSectionButton .followButton > span {
-  font-size: var(--font-l);
-}
-
 .collectibleName {
   color: var(--secondary);
 }
@@ -448,3 +424,14 @@
     margin-left: 0;
   }
 }
+
+.gatedContentSectionButton .followButton {
+  width: 100%;
+  flex: unset;
+  max-width: none;
+  height: 46px;
+}
+
+.gatedContentSectionButton .followButton > span {
+  font-size: var(--font-l);
+}
diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx
index 68783a55e38..041be6a4e07 100644
--- a/packages/web/src/components/track/GiantTrackTile.tsx
+++ b/packages/web/src/components/track/GiantTrackTile.tsx
@@ -32,19 +32,17 @@ import {
   IconHeart,
   IconKebabHorizontal,
   IconShare,
-  IconRocket
+  IconRocket,
+  Button
 } from '@audius/harmony'
 import { Mood } from '@audius/sdk'
-import { Button, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import moment from 'moment'
 import { useDispatch, shallowEqual, useSelector } from 'react-redux'
 
 import { ClientOnly } from 'components/client-only/ClientOnly'
 import DownloadButtons from 'components/download-buttons/DownloadButtons'
-import { EntityActionButton } from 'components/entity-page/EntityActionButton'
 import { TextLink, UserLink } from 'components/link'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Menu from 'components/menu/Menu'
 import RepostFavoritesStats from 'components/repost-favorites-stats/RepostFavoritesStats'
 import { ScheduledReleaseGiantLabel } from 'components/scheduled-release-label/ScheduledReleaseLabel'
@@ -263,17 +261,16 @@ export const GiantTrackTile = ({
   const renderShareButton = () => {
     const shouldShow =
       (!isUnlisted && !isPublishing) || fieldVisibility.share || isOwner
-    return (
-      shouldShow && (
-        <EntityActionButton
-          type={ButtonType.COMMON}
-          text='share'
-          leftIcon={<IconShare />}
-          widthToHideText={BUTTON_COLLAPSE_WIDTHS.first}
-          onClick={onShare}
-        />
-      )
-    )
+    return shouldShow ? (
+      <Button
+        variant='secondary'
+        iconLeft={IconShare}
+        widthToHideText={BUTTON_COLLAPSE_WIDTHS.first}
+        onClick={onShare}
+      >
+        share
+      </Button>
+    ) : null
   }
 
   const renderMakePublicButton = () => {
@@ -284,31 +281,23 @@ export const GiantTrackTile = ({
     return (
       (isUnlisted || isPublishing) &&
       isOwner && (
-        <EntityActionButton
-          type={isPublishing ? ButtonType.DISABLED : ButtonType.COMMON}
-          text={text}
-          leftIcon={
-            isPublishing ? (
-              <LoadingSpinner className={styles.spinner} />
-            ) : (
-              <IconRocket />
-            )
-          }
+        <Button
+          variant='secondary'
+          isLoading={isPublishing}
+          iconLeft={IconRocket}
           widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
-          onClick={
-            isPublishing
-              ? undefined
-              : () => {
-                  dispatch(
-                    openPublishTrackConfirmationModal({
-                      confirmCallback: () => {
-                        onMakePublic(trackId)
-                      }
-                    })
-                  )
+          onClick={() => {
+            dispatch(
+              openPublishTrackConfirmationModal({
+                confirmCallback: () => {
+                  onMakePublic(trackId)
                 }
-          }
-        />
+              })
+            )
+          }}
+        >
+          {text}
+        </Button>
       )
     )
   }
@@ -330,24 +319,18 @@ export const GiantTrackTile = ({
             text={isReposted ? 'Unrepost' : 'Repost'}
           >
             <div>
-              <EntityActionButton
+              <Button
+                variant={isReposted ? 'primary' : 'secondary'}
                 name='repost'
-                type={
-                  isOwner
-                    ? ButtonType.DISABLED
-                    : isReposted
-                    ? ButtonType.SECONDARY
-                    : ButtonType.COMMON
-                }
+                disabled={isOwner}
                 widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
-                text={
-                  isReposted
-                    ? messages.repostedButtonText
-                    : messages.repostButtonText
-                }
-                leftIcon={<IconRepost />}
-                onClick={isOwner ? () => {} : onRepost}
-              />
+                iconLeft={IconRepost}
+                onClick={onRepost}
+              >
+                {isReposted
+                  ? messages.repostedButtonText
+                  : messages.repostButtonText}
+              </Button>
             </div>
           </Tooltip>
         </Toast>
@@ -371,20 +354,16 @@ export const GiantTrackTile = ({
             text={isSaved ? 'Unfavorite' : 'Favorite'}
           >
             <div>
-              <EntityActionButton
+              <Button
                 name='favorite'
-                type={
-                  isOwner
-                    ? ButtonType.DISABLED
-                    : isSaved
-                    ? ButtonType.SECONDARY
-                    : ButtonType.COMMON
-                }
-                text={isSaved ? 'FAVORITED' : 'FAVORITE'}
+                disabled={isOwner}
+                variant={isSaved ? 'primary' : 'secondary'}
                 widthToHideText={BUTTON_COLLAPSE_WIDTHS.third}
-                leftIcon={<IconHeart />}
-                onClick={isOwner ? undefined : onSave}
-              />
+                iconLeft={IconHeart}
+                onClick={onSave}
+              >
+                {isSaved ? 'favorited' : 'favorite'}
+              </Button>
             </div>
           </Tooltip>
         </Toast>
@@ -669,15 +648,10 @@ export const GiantTrackTile = ({
                   {(ref, triggerPopup) => (
                     <div className={cn(styles.menuKebabContainer)} ref={ref}>
                       <Button
-                        className={cn(
-                          styles.buttonFormatting,
-                          styles.moreButton
-                        )}
-                        leftIcon={<IconKebabHorizontal />}
+                        variant='secondary'
+                        aria-label='More options'
+                        iconLeft={IconKebabHorizontal}
                         onClick={() => triggerPopup()}
-                        text={null}
-                        textClassName={styles.buttonTextFormatting}
-                        type={ButtonType.COMMON}
                       />
                     </div>
                   )}
diff --git a/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.module.css b/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.module.css
index 60d28d65257..b9d0d53a538 100644
--- a/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.module.css
+++ b/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.module.css
@@ -1,16 +1,6 @@
 .root {
   min-width: 470px;
 }
-.content {
-  padding-top: 16px;
-  padding-bottom: 0;
-}
-.footer {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 24px;
-}
 
 .spinner {
   width: 64px;
diff --git a/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.tsx b/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.tsx
index 5d3a95d26c9..2fd07b01e61 100644
--- a/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.tsx
+++ b/packages/web/src/components/transaction-details-modal/TransactionDetailsModal.tsx
@@ -11,9 +11,9 @@ import {
   ModalHeader,
   ModalTitle,
   ModalFooter,
-  IconTransaction
+  IconTransaction,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
@@ -53,7 +53,7 @@ export const TransactionDetailsModal = () => {
           icon={<IconTransaction />}
         />
       </ModalHeader>
-      <ModalContent className={styles.content}>
+      <ModalContent>
         {transactionDetails.status === Status.SUCCESS ? (
           <TransactionDetailsContent
             transactionDetails={transactionDetails.transactionDetails}
@@ -65,11 +65,9 @@ export const TransactionDetailsModal = () => {
         ) : null}
       </ModalContent>
       <ModalFooter className={styles.footer}>
-        <Button
-          type={ButtonType.PRIMARY_ALT}
-          text={messages.done}
-          onClick={handleClose}
-        />
+        <Button variant='primary' onClick={handleClose}>
+          {messages.done}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/unload-dialog/UnloadDialog.module.css b/packages/web/src/components/unload-dialog/UnloadDialog.module.css
deleted file mode 100644
index 365dd0df445..00000000000
--- a/packages/web/src/components/unload-dialog/UnloadDialog.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.modalBody {
-  max-width: 480px;
-  width: 100%;
-}
-
-.modalHeader {
-  margin: 0px 16px;
-}
-
-.modalTitle {
-  color: var(--neutral-light-4);
-  font-size: var(--font-l);
-  font-weight: var(--font-heavy);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  justify-self: center;
-}
-
-.modalTitle i {
-  margin-left: 4px;
-}
diff --git a/packages/web/src/components/unload-dialog/UnloadDialog.jsx b/packages/web/src/components/unload-dialog/UnloadDialog.tsx
similarity index 62%
rename from packages/web/src/components/unload-dialog/UnloadDialog.jsx
rename to packages/web/src/components/unload-dialog/UnloadDialog.tsx
index 020d17a589f..1971fccf11c 100644
--- a/packages/web/src/components/unload-dialog/UnloadDialog.jsx
+++ b/packages/web/src/components/unload-dialog/UnloadDialog.tsx
@@ -5,15 +5,18 @@ import {
   Modal,
   setupHotkeys,
   removeHotkeys,
-  ModifierKeys
+  ModifierKeys,
+  ModalHeader,
+  ModalTitle,
+  ModalContent,
+  ModalContentText,
+  ModalFooter,
+  Button
 } from '@audius/harmony'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import ConfirmationBox from 'components/confirmation-box/ConfirmationBox'
 import { isElectron } from 'utils/clientUtil'
 
-import styles from './UnloadDialog.module.css'
-
 const { getIsConfirming } = confirmerSelectors
 
 const MESSAGE_TEXT = `
@@ -25,19 +28,21 @@ const MESSAGE_TEXT = `
 const RELOAD_TEXT = 'RELOAD ANYWAY'
 const QUIT_TEXT = 'QUIT ANYWAY'
 
-const UnloadDialog = (props) => {
+export const UnloadDialog = () => {
   const [showModal, setShowModal] = useState(false)
   const [reload, setReload] = useState(true)
 
+  const isConfirming = useSelector(getIsConfirming)
+
   const seenModalRef = useRef(false)
-  const hotkeyHookRef = useRef(null)
+  const hotkeyHookRef = useRef<(e: KeyboardEvent) => void>()
 
   const addElectronListener = isElectron()
-  const ipcRef = useRef(null)
+  const ipcRef = useRef<any>(null)
 
   useEffect(() => {
-    if (props.isConfirming) {
-      const beforeUnload = (event) => {
+    if (isConfirming) {
+      const beforeUnload = (event: BeforeUnloadEvent) => {
         event.preventDefault()
         if (!seenModalRef.current) event.returnValue = ''
       }
@@ -47,7 +52,7 @@ const UnloadDialog = (props) => {
         // Configure IPC so we can send receive/send close/quit events from
         // the main process.
         const ipc = window.require('electron').ipcRenderer
-        ipc.on('close', (event, arg) => {
+        ipc.on('close', () => {
           setReload(false)
           setShowModal(true)
         })
@@ -69,7 +74,7 @@ const UnloadDialog = (props) => {
         window.removeEventListener('beforeunload', beforeUnload)
       }
     }
-  }, [props.isConfirming, addElectronListener])
+  }, [isConfirming, addElectronListener])
 
   const onRefreshHotkey = () => {
     setReload(true)
@@ -98,36 +103,30 @@ const UnloadDialog = (props) => {
   }
 
   return (
-    <Modal
-      title={
-        <>
-          Hang tight! <i className='emoji woman-surfing' />
-        </>
-      }
-      isOpen={showModal}
-      showTitleHeader
-      onClose={onModalClose}
-      bodyClassName={styles.modalBody}
-      wrapperClassName={styles.modalWrapper}
-      titleClassName={styles.modalTitle}
-      headerContainerClassName={styles.modalHeader}
-      showDismissButton
-    >
-      <ConfirmationBox
-        text={MESSAGE_TEXT}
-        rightText='GOT IT'
-        leftText={reload ? RELOAD_TEXT : QUIT_TEXT}
-        rightClick={onModalClose}
-        leftClick={reload ? onReloadAnyway : onQuitAnyway}
-      />
+    <Modal isOpen={showModal} onClose={onModalClose}>
+      <ModalHeader>
+        <ModalTitle
+          title={
+            <>
+              Hang tight! <i className='emoji woman-surfing' />
+            </>
+          }
+        />
+      </ModalHeader>
+      <ModalContent>
+        <ModalContentText>{MESSAGE_TEXT}</ModalContentText>
+      </ModalContent>
+      <ModalFooter>
+        <Button variant='secondary' onClick={onModalClose}>
+          Got It
+        </Button>
+        <Button
+          variant='primary'
+          onClick={reload ? onReloadAnyway : onQuitAnyway}
+        >
+          {reload ? RELOAD_TEXT : QUIT_TEXT}
+        </Button>
+      </ModalFooter>
     </Modal>
   )
 }
-
-const mapStateToProps = (state) => ({
-  isConfirming: getIsConfirming(state)
-})
-
-const mapDispatchToProps = (dispatch) => ({})
-
-export default connect(mapStateToProps, mapDispatchToProps)(UnloadDialog)
diff --git a/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.module.css b/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.module.css
deleted file mode 100644
index 6bd800b46b3..00000000000
--- a/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.titleIcon path {
-  fill: var(--neutral-light-2);
-}
-
-.modalText {
-  text-align: center;
-}
-
-.modalButton {
-  font-size: var(--font-l) !important;
-  font-weight: var(--font-bold) !important;
-}
-
-.modalFooter {
-  column-gap: var(--unit-2);
-  padding: 0 var(--unit-6) var(--unit-6);
-}
diff --git a/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.tsx b/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.tsx
index d247c86c04f..bc1140ed45c 100644
--- a/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.tsx
+++ b/packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.tsx
@@ -8,15 +8,13 @@ import {
   ModalHeader,
   ModalTitle,
   ModalFooter,
-  IconCloudUpload as IconUpload
+  IconCloudUpload as IconUpload,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 
 import { useModalState } from 'common/hooks/useModalState'
 import { useSelector } from 'common/hooks/useSelector'
 
-import styles from './UploadConfirmationModal.module.css'
-
 const { getConfirmCallback, getHasPublicTracks } =
   uploadConfirmationModalUISelectors
 
@@ -46,33 +44,22 @@ export const UploadConfirmationModal = () => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} size='small'>
       <ModalHeader>
-        <ModalTitle
-          icon={<IconUpload className={styles.titleIcon} />}
-          title={messages.title}
-        />
+        <ModalTitle icon={<IconUpload />} title={messages.title} />
       </ModalHeader>
       <ModalContent>
-        <ModalContentText className={styles.modalText}>
+        <ModalContentText>
           {hasPublicTracks
             ? messages.publicDescription
             : messages.hiddenDescription}
         </ModalContentText>
       </ModalContent>
-      <ModalFooter className={styles.modalFooter}>
-        <Button
-          textClassName={styles.modalButton}
-          fullWidth
-          text={messages.cancel}
-          type={ButtonType.COMMON}
-          onClick={onClose}
-        />
-        <Button
-          textClassName={styles.modalButton}
-          fullWidth
-          text={messages.upload}
-          type={ButtonType.PRIMARY}
-          onClick={handleConfirm}
-        />
+      <ModalFooter>
+        <Button variant='secondary' fullWidth onClick={onClose}>
+          {messages.cancel}
+        </Button>
+        <Button variant='primary' fullWidth onClick={handleConfirm}>
+          {messages.upload}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/components/user-badges/TierExplainerModal.module.css b/packages/web/src/components/user-badges/TierExplainerModal.module.css
deleted file mode 100644
index 1761f168b46..00000000000
--- a/packages/web/src/components/user-badges/TierExplainerModal.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.modalBody {
-  max-width: 720px;
-  min-height: 320px;
-  width: 100%;
-}
-
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 24px 0px;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 160%;
-}
-
-.textContainer {
-  max-width: 378px;
-  margin-right: 22px;
-  line-height: 25.6px;
-}
-
-.button {
-  margin-top: 72px;
-}
-
-.left {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.tierWrapper {
-  width: 242px;
-}
diff --git a/packages/web/src/components/user-badges/TierExplainerModal.tsx b/packages/web/src/components/user-badges/TierExplainerModal.tsx
index 8fd5348f1d3..6c53299c953 100644
--- a/packages/web/src/components/user-badges/TierExplainerModal.tsx
+++ b/packages/web/src/components/user-badges/TierExplainerModal.tsx
@@ -1,7 +1,14 @@
 import { useCallback } from 'react'
 
-import { Modal } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
+import {
+  Button,
+  Flex,
+  Modal,
+  ModalContent,
+  ModalContentText,
+  ModalHeader,
+  ModalTitle
+} from '@audius/harmony'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch } from 'react-redux'
 
@@ -10,8 +17,6 @@ import { useProfileTier } from 'hooks/wallet'
 import { Tier } from 'pages/audio-rewards-page/Tiers'
 import { AUDIO_PAGE } from 'utils/route'
 
-import styles from './TierExplainerModal.module.css'
-
 export const messages = {
   title: '$AUDIO VIP Tiers',
   desc1: 'Unlock $AUDIO VIP Tiers by simply holding more $AUDIO.',
@@ -39,33 +44,30 @@ const TierExplainerModal = () => {
     <Modal
       isOpen={isOpen}
       onClose={handleDismiss}
-      bodyClassName={styles.modalBody}
-      showTitleHeader
-      title={messages.title}
-      showDismissButton
       dismissOnClickOutside
-      contentHorizontalPadding={48}
+      size='medium'
     >
-      <div className={styles.container}>
-        <div className={styles.left}>
-          <div className={styles.textContainer}>
-            {messages.desc1}
-            <br />
-            <br />
-            {messages.desc2}
-          </div>
-          <Button
-            type={ButtonType.PRIMARY_ALT}
-            size={ButtonSize.MEDIUM}
-            text={messages.learnMore}
-            className={styles.button}
-            onClick={onClickLearnMore}
-          />
-        </div>
-        <div className={styles.tierWrapper}>
-          <Tier isCompact tier={tier} />
-        </div>
-      </div>
+      <ModalHeader>
+        <ModalTitle title={messages.title} />
+      </ModalHeader>
+      <ModalContent>
+        <Flex alignItems='center'>
+          <Flex direction='column' gap='l' alignItems='flex-start' flex={3}>
+            <ModalContentText>
+              {messages.desc1}
+              <br />
+              <br />
+              {messages.desc2}
+            </ModalContentText>
+            <Button variant='primary' onClick={onClickLearnMore}>
+              {messages.learnMore}
+            </Button>
+          </Flex>
+          <Flex flex={2}>
+            <Tier isCompact tier={tier} />
+          </Flex>
+        </Flex>
+      </ModalContent>
     </Modal>
   )
 }
diff --git a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
index 1118d7541df..a4698f615a2 100644
--- a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
+++ b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
@@ -20,8 +20,13 @@ import {
   makeOptimisticChallengeSortComparator,
   isAudioMatchingChallenge
 } from '@audius/common/utils'
-import { IconArrowRight as IconArrow, IconCheck, Text } from '@audius/harmony'
-import { ProgressBar, ButtonType, Button } from '@audius/stems'
+import {
+  Button,
+  IconArrowRight as IconArrow,
+  IconCheck,
+  Text
+} from '@audius/harmony'
+import { ProgressBar } from '@audius/stems'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -129,11 +134,11 @@ const RewardPanel = ({
     ? messages.viewDetails
     : panelButtonText
 
-  const buttonType = needsDisbursement
-    ? ButtonType.PRIMARY_ALT
+  const buttonVariant = needsDisbursement
+    ? 'primary'
     : hasDisbursed
-    ? ButtonType.COMMON_ALT
-    : ButtonType.COMMON
+    ? 'secondary'
+    : 'common'
 
   return (
     <div
@@ -179,16 +184,13 @@ const RewardPanel = ({
           )}
         </div>
         <Button
-          className={wm(
-            cn(styles.panelButton, hasDisbursed ? styles.disbursed : '')
-          )}
-          type={buttonType}
-          text={buttonMessage}
-          rightIcon={hasDisbursed ? null : <IconArrow />}
-          iconClassName={styles.buttonIcon}
+          variant={buttonVariant}
+          size='small'
+          iconRight={hasDisbursed ? null : IconArrow}
           onClick={openRewardModal}
-          textClassName={styles.panelButtonText}
-        />
+        >
+          {buttonMessage}
+        </Button>
       </div>
     </div>
   )
diff --git a/packages/web/src/pages/audio-rewards-page/components/ConnectWalletsBody.tsx b/packages/web/src/pages/audio-rewards-page/components/ConnectWalletsBody.tsx
index b2b5433514e..c0ef19a0b23 100644
--- a/packages/web/src/pages/audio-rewards-page/components/ConnectWalletsBody.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/ConnectWalletsBody.tsx
@@ -4,7 +4,7 @@ import {
   tokenDashboardPageSelectors,
   tokenDashboardPageActions
 } from '@audius/common/store'
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
 import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 
@@ -61,15 +61,13 @@ const ConnectWalletsBody = ({ className }: ConnectWalletsBodyProps) => {
       <h4 className={styles.title}>{messages.title}</h4>
       <p className={styles.description}>{messages.description}</p>
       <Button
-        className={cn(styles.connectBtn, {
-          [styles.disabled]: isConnectDisabled
-        })}
-        textClassName={styles.connectBtnText}
-        type={ButtonType.PRIMARY_ALT}
-        text={messages.connectBtn}
+        variant='primary'
+        disabled={isConnectDisabled}
         onClick={onConnectWallets}
-        isDisabled={isConnectDisabled}
-      />
+        css={(theme) => ({ marginBottom: theme.spacing['2xl'] })}
+      >
+        {messages.connectBtn}
+      </Button>
       {hasReachedLimit && <p className={styles.limit}>{messages.limit}</p>}
       {(numConnectedWallets > 0 || Boolean(confirmingWallet.wallet)) && (
         <WalletsTable
diff --git a/packages/web/src/pages/audio-rewards-page/components/ErrorBody.module.css b/packages/web/src/pages/audio-rewards-page/components/ErrorBody.module.css
index a99967fc7a0..5163042a005 100644
--- a/packages/web/src/pages/audio-rewards-page/components/ErrorBody.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/ErrorBody.module.css
@@ -20,7 +20,3 @@
   box-sizing: border-box;
   border-radius: 8px;
 }
-
-.btn {
-  margin-bottom: 24px;
-}
diff --git a/packages/web/src/pages/audio-rewards-page/components/ErrorBody.tsx b/packages/web/src/pages/audio-rewards-page/components/ErrorBody.tsx
index 6f666a1a271..26056f1f7b8 100644
--- a/packages/web/src/pages/audio-rewards-page/components/ErrorBody.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/ErrorBody.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react'
 
-import { Scrollbar } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, Scrollbar } from '@audius/harmony'
 import cn from 'classnames'
 
 import styles from './ErrorBody.module.css'
@@ -21,11 +20,14 @@ const ErrorBody = ({ error, className, onClose }: ErrorBodyProps) => {
     <div className={cn(styles.container, { [className!]: !!className })}>
       <Scrollbar className={styles.scrollableMessage}>{error}</Scrollbar>
       <Button
-        className={styles.btn}
-        text={messages.okay}
-        type={ButtonType.PRIMARY_ALT}
+        variant='primary'
+        css={(theme) => ({
+          marginBottom: theme.spacing.xl
+        })}
         onClick={onClose}
-      />
+      >
+        {messages.okay}
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.module.css b/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.module.css
index 6eb9995c27a..0984511a0ec 100644
--- a/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.module.css
@@ -75,10 +75,6 @@
   align-items: center;
 }
 
-.understandText {
-  font-size: var(--font-s) !important;
-}
-
 .audio {
   font-weight: var(--font-bold);
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.tsx b/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.tsx
index 03b5f6f8159..773d5bf333b 100644
--- a/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/ReceiveBody.tsx
@@ -1,8 +1,7 @@
 import { useCreateUserbankIfNeeded } from '@audius/common/hooks'
 import { WalletAddress, SolanaWalletAddress } from '@audius/common/models'
 import { FeatureFlags } from '@audius/common/services'
-import { IconSolana as LogoSol } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconSolana as LogoSol } from '@audius/harmony'
 import cn from 'classnames'
 
 import { useLocalStorage } from 'hooks/useLocalStorage'
@@ -103,12 +102,9 @@ const ReceiveBody = ({ wallet, solWallet }: ReceiveBodyProps) => {
             address={solWallet}
           />
         ) : (
-          <Button
-            text={messages.understand}
-            onClick={onClickUnderstand}
-            textClassName={styles.understandText}
-            type={ButtonType.PRIMARY_ALT}
-          />
+          <Button variant='primary' onClick={onClickUnderstand}>
+            {messages.understand}
+          </Button>
         )}
       </>
     )
diff --git a/packages/web/src/pages/audio-rewards-page/components/SendInputBody.module.css b/packages/web/src/pages/audio-rewards-page/components/SendInputBody.module.css
index 4a71fb2c2c9..59eb099043a 100644
--- a/packages/web/src/pages/audio-rewards-page/components/SendInputBody.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/SendInputBody.module.css
@@ -52,10 +52,6 @@
   color: var(--neutral);
 }
 
-.sendBtnText {
-  font-size: var(--font-s) !important;
-}
-
 .errorLabel {
   color: var(--accent-red);
   display: flex;
diff --git a/packages/web/src/pages/audio-rewards-page/components/SendInputBody.tsx b/packages/web/src/pages/audio-rewards-page/components/SendInputBody.tsx
index 596bec75244..f5da6858ae5 100644
--- a/packages/web/src/pages/audio-rewards-page/components/SendInputBody.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/SendInputBody.tsx
@@ -22,13 +22,13 @@ import {
   Nullable
 } from '@audius/common/utils'
 import {
+  Button,
   Flex,
   IconTokenGold as IconGoldBadgeSVG,
   IconValidationX,
   TextInput,
   TokenAmountInput
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { remoteConfigInstance } from 'services/remote-config/remote-config-instance'
@@ -298,13 +298,9 @@ const SendInputBody = ({
           onChange={handleChangeAddress}
         />
         {renderAddressError()}
-        <Button
-          className={styles.sendBtn}
-          text={messages.sendAudio}
-          textClassName={styles.sendBtnText}
-          onClick={onClickSend}
-          type={hasError ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT}
-        />
+        <Button variant='primary' onClick={onClickSend} disabled={!!hasError}>
+          {messages.sendAudio}
+        </Button>
       </Flex>
     </ModalBodyWrapper>
   )
diff --git a/packages/web/src/pages/audio-rewards-page/components/SendInputConfirmation.tsx b/packages/web/src/pages/audio-rewards-page/components/SendInputConfirmation.tsx
index a20512fcc4b..81ebc2a604b 100644
--- a/packages/web/src/pages/audio-rewards-page/components/SendInputConfirmation.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/SendInputConfirmation.tsx
@@ -3,10 +3,8 @@ import { useEffect, useState } from 'react'
 import { StringAudio, BNWei, WalletAddress } from '@audius/common/models'
 import { tokenDashboardPageSelectors } from '@audius/common/store'
 import { weiToAudio, stringAudioToBN } from '@audius/common/utils'
-import { IconArrowRight } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconArrowRight } from '@audius/harmony'
 
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { useSelector } from 'utils/reducer'
 
 import { ModalBodyTitle, ModalBodyWrapper } from '../WalletModal'
@@ -76,16 +74,13 @@ const SendInputConfirmation = ({
       <AddressWithArrow address={recipientAddress} />
       <div className={styles.buttonWrapper}>
         <Button
-          text={messages.sendButton}
+          variant='primary'
           onClick={canRecipientReceiveWAudio === 'true' ? onSend : undefined}
-          type={ButtonType.PRIMARY_ALT}
           disabled={canRecipientReceiveWAudio === 'false' || isLongLoading}
-          rightIcon={
-            isLongLoading ? (
-              <LoadingSpinner className={styles.loadingSpinner} />
-            ) : null
-          }
-        />
+          isLoading={isLongLoading}
+        >
+          {messages.sendButton}
+        </Button>
       </div>
       {canRecipientReceiveWAudio === 'false' ? (
         <div className={styles.errorMessage}>{messages.errorMessage}</div>
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
index 50d70abfe1b..974030131d4 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -23,16 +23,17 @@ import {
   IconValidationCheck,
   IconCheck,
   IconVerified,
-  IconTwitter as IconTwitterBird
+  IconTwitter as IconTwitterBird,
+  SocialButton,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType, ProgressBar } from '@audius/stems'
+import { ProgressBar } from '@audius/stems'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
 
 import QRCode from 'assets/img/imageQR.png'
 import { useModalState } from 'common/hooks/useModalState'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Toast from 'components/toast/Toast'
 import { ToastContext } from 'components/toast/ToastContext'
 import Tooltip from 'components/tooltip/Tooltip'
@@ -101,6 +102,7 @@ const messages = {
   twitterShare: (modalType: 'referrals' | 'ref-v') =>
     `Share Invite With Your ${modalType === 'referrals' ? 'Friends' : 'Fans'}`,
   twitterCopy: `Come support me on @audius! Use my link and we both earn $AUDIO when you sign up.\n\n #audius #audiorewards\n\n`,
+  twitterReferralLabel: 'Share referral link on Twitter',
   verifiedChallenge: 'VERIFIED CHALLENGE',
   claimAmountLabel: '$AUDIO available to claim',
   claimedSoFar: '$AUDIO claimed so far',
@@ -161,17 +163,18 @@ const TwitterShareButton = ({
   modalType,
   inviteLink
 }: TwitterShareButtonProps) => {
-  const wm = useWithMobileStyle(styles.mobile)
+  const isMobile = useIsMobile()
+
   return (
-    <Button
-      type={ButtonType.PRIMARY_ALT}
-      text={messages.twitterShare(modalType)}
-      leftIcon={<IconTwitterBird />}
+    <SocialButton
+      socialType='twitter'
+      iconLeft={IconTwitterBird}
       onClick={() => openTwitterLink(inviteLink, messages.twitterCopy)}
-      className={wm(styles.twitterButton)}
-      textClassName={styles.twitterText}
-      iconClassName={styles.twitterIcon}
-    />
+      aria-label={messages.twitterReferralLabel}
+      fullWidth={isMobile}
+    >
+      {messages.twitterShare(modalType)}
+    </SocialButton>
   )
 }
 
@@ -448,13 +451,14 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
       )}
       {buttonLink && challenge?.state !== 'completed' && (
         <Button
-          className={wm(cn(styles.button, styles.buttonLink))}
-          type={ButtonType.PRIMARY_ALT}
-          text={buttonInfo?.label}
+          variant='primary'
+          fullWidth={isMobile}
           onClick={goToRoute}
-          leftIcon={buttonInfo?.leftIcon}
-          rightIcon={buttonInfo?.rightIcon}
-        />
+          iconLeft={buttonInfo?.leftIcon}
+          iconRight={buttonInfo?.rightIcon}
+        >
+          {buttonInfo?.label}
+        </Button>
       )}
       <div className={wm(styles.claimRewardWrapper)}>
         {audioToClaim > 0 ? (
@@ -463,21 +467,13 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
               {`${audioToClaim} ${messages.claimAmountLabel}`}
             </div>
             <Button
-              text={messages.claimYourReward}
-              className={wm(styles.button)}
-              type={
-                claimInProgress ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT
-              }
-              isDisabled={claimInProgress}
-              rightIcon={
-                claimInProgress ? (
-                  <LoadingSpinner className={styles.spinner} />
-                ) : (
-                  <IconCheck />
-                )
-              }
+              variant='primary'
+              isLoading={claimInProgress}
+              iconRight={IconCheck}
               onClick={onClaimRewardClicked}
-            />
+            >
+              {messages.claimYourReward}
+            </Button>
           </>
         ) : null}
         {audioClaimedSoFar > 0 && challenge?.state !== 'disbursed' ? (
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
index 056e22cf8f4..1992f1760de 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
@@ -148,14 +148,6 @@
   color: var(--white);
 }
 
-.button * {
-  font-size: var(--font-l) !important;
-  letter-spacing: 0px !important;
-}
-.button.mobile {
-  width: 100%;
-}
-
 .buttonLink {
   margin-top: 32px;
 }
@@ -366,37 +358,6 @@
   flex-direction: column;
 }
 
-.twitterButton {
-  min-height: 60px;
-  flex: 1;
-  padding: unset;
-  background-color: var(--static-twitter-blue);
-  border-radius: 6px;
-}
-
-.twitterButton.mobile {
-  width: 100%;
-}
-
-.twitterButton:hover {
-  background-color: var(--static-twitter-blue) !important;
-}
-
-.twitterButton .twitterText {
-  font-size: var(--font-m);
-  color: var(--static-white);
-}
-.twitterButton .twitterIcon {
-  margin-right: 8px !important;
-}
-.twitterButton .twitterIcon path {
-  fill: var(--static-white);
-}
-.twitterButton .twitterIcon svg {
-  width: 24px;
-  height: 18px;
-  fill: var(--static-white);
-}
 .buttonSpacer {
   width: 10px;
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/TopAPI.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/TopAPI.tsx
index 648485290ea..61da038ae16 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/TopAPI.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/TopAPI.tsx
@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 
-import { IconArrowRight as IconArrow } from '@audius/harmony'
-import { ButtonType, Button } from '@audius/stems'
+import { Button, IconArrowRight as IconArrow } from '@audius/harmony'
 
 import AudiusAPI from 'assets/img/audiusAPI.png'
 import { useModalState } from 'common/hooks/useModalState'
@@ -31,14 +30,12 @@ const TopAPIBody = () => {
       <span className={styles.title}>{messages.title}</span>
       <span className={styles.subtitle}>{messages.description}</span>
       <Button
-        type={ButtonType.PRIMARY_ALT}
-        text={messages.button}
-        className={styles.button}
+        variant='primary'
         onClick={onClickAudiusAPI}
-        textClassName={styles.buttonText}
-        rightIcon={<IconArrow />}
-        iconClassName={styles.buttonIcon}
-      />
+        iconRight={IconArrow}
+      >
+        {messages.button}
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/TopApi.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/TopApi.module.css
index 7863f43eb34..691cf9c078f 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/TopApi.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/TopApi.module.css
@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
+  margin-bottom: var(--harmony-spacing-2xl);
 }
 
 .container.mobile {
@@ -24,7 +25,7 @@
   color: var(--neutral);
   font-size: 16px;
   font-weight: 700;
-  margin-bottom: 32px;
+  margin-bottom: var(--harmony-spacing-2xl);
 }
 .mobile .subtitle {
   color: var(--neutral-light-4);
@@ -40,23 +41,3 @@
   width: 126px;
   margin: 8px 0px 24px;
 }
-
-.button {
-  margin-bottom: 32px;
-}
-
-.mobile .button {
-  margin-bottom: 24px;
-}
-
-.buttonText {
-  font-size: 18px !important;
-}
-
-.mobile .buttonText {
-  font-size: 16px !important;
-}
-
-.buttonIcon {
-  margin: 0 2px 0 0px !important;
-}
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.module.css
index fd02558f382..fa1396c2733 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.module.css
@@ -123,14 +123,6 @@
   color: var(--neutral-light-6);
 }
 
-.mobile .button {
-  width: 100%;
-}
-
-.buttonIcon {
-  margin: 0 2px 0 0px !important;
-}
-
 .titleHeader {
   text-align: center;
   color: var(--white);
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.tsx
index 82355a7483e..18a31f4a546 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/TrendingRewards.tsx
@@ -7,8 +7,11 @@ import {
   audioRewardsPageActions,
   TrendingRewardsModalType
 } from '@audius/common/store'
-import { SegmentedControl, IconArrowRight as IconArrow } from '@audius/harmony'
-import { ButtonType, Button } from '@audius/stems'
+import {
+  SegmentedControl,
+  IconArrowRight as IconArrow,
+  Button
+} from '@audius/harmony'
 import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 import { TwitterTweetEmbed } from 'react-twitter-embed'
@@ -207,13 +210,14 @@ const TrendingRewardsBody = ({
           </div>
         </div>
         <Button
-          type={ButtonType.PRIMARY_ALT}
-          text={textMap[modalType][isMobile ? 'buttonMobile' : 'button']}
+          variant='primary'
           onClick={onButtonClick}
           className={styles.button}
-          rightIcon={<IconArrow size='s' />}
-          iconClassName={wm(styles.buttonIcon)}
-        />
+          iconRight={IconArrow}
+          fullWidth={isMobile}
+        >
+          {textMap[modalType][isMobile ? 'buttonMobile' : 'button']}
+        </Button>
         <span onClick={onClickToS} className={styles.terms}>
           {messages.terms}
         </span>
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.module.css
index a29ff08ac8f..4c96679bcdc 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.module.css
@@ -134,14 +134,3 @@
 .mobile .twitterButton {
   width: 100% !important;
 }
-
-.uploadButton {
-  margin-top: 24px;
-}
-.mobile .uploadButton {
-  display: none;
-}
-
-.uploadText {
-  font-size: 18px !important;
-}
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.tsx
index a0067a31d46..62418c6540b 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/VerifiedUpload.tsx
@@ -1,7 +1,11 @@
 import { useCallback } from 'react'
 
-import { IconTwitter, IconCloudUpload, IconInstagram } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import {
+  IconTwitter,
+  IconCloudUpload,
+  IconInstagram,
+  Button
+} from '@audius/harmony'
 
 import { useModalState } from 'common/hooks/useModalState'
 import { InstagramButton, TwitterButton } from 'components/social-button'
@@ -83,13 +87,14 @@ const VerifiedUpload = ({ dismissModal }: { dismissModal: () => void }) => {
           : messages.step2SubtitleDesktop}
       </span>
       <Button
+        variant='primary'
+        css={(theme) => ({ marginTop: theme.spacing['2xl'] })}
         className={styles.uploadButton}
-        text={messages.uploadButton}
-        rightIcon={<IconCloudUpload />}
-        type={ButtonType.PRIMARY_ALT}
+        iconRight={IconCloudUpload}
         onClick={onClickUpload}
-        textClassName={styles.uploadText}
-      />
+      >
+        {messages.uploadButton}
+      </Button>
       <Divider />
       <span className={styles.title}>{messages.step3Title}</span>
       <span className={styles.subtitle}>{messages.step3Subtitle}</span>
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.module.css
index fca21c99728..3338a4dc182 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.module.css
@@ -28,14 +28,6 @@
   margin-top: 24px;
 }
 
-.btn {
-  margin: 24px 0px;
-}
-
-.btn svg {
-  height: 20px;
-}
-
 .description {
   font-weight: 600;
   font-size: var(--font-m);
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.tsx
index 3246b16bee0..13965fc32ef 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/VipDiscordModal.tsx
@@ -1,6 +1,5 @@
 import { vipDiscordModalSelectors } from '@audius/common/store'
-import { IconDiscord } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconDiscord } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
@@ -65,12 +64,13 @@ export const VipDiscordModal = () => {
           />
         ) : null}
         <Button
-          className={styles.btn}
-          text={messages.launch}
+          variant='primary'
+          css={(theme) => ({ marginTop: theme.spacing['2xl'] })}
           onClick={handleClick}
-          type={ButtonType.PRIMARY_ALT}
-          leftIcon={<IconDiscord />}
-        />
+          iconLeft={IconDiscord}
+        >
+          {messages.launch}
+        </Button>
       </div>
     </ModalDrawer>
   )
diff --git a/packages/web/src/pages/audio-rewards-page/config.tsx b/packages/web/src/pages/audio-rewards-page/config.tsx
index 0f20176d27d..2eb0564ad42 100644
--- a/packages/web/src/pages/audio-rewards-page/config.tsx
+++ b/packages/web/src/pages/audio-rewards-page/config.tsx
@@ -6,6 +6,7 @@ import {
   IconArrowRight,
   IconCheck,
   IconCloudUpload,
+  IconComponent,
   IconTokenGold
 } from '@audius/harmony'
 
@@ -31,8 +32,8 @@ type LinkButtonType =
 
 type LinkButtonInfo = {
   label: string
-  leftIcon: ReactNode | null
-  rightIcon: ReactNode | null
+  leftIcon: IconComponent | null
+  rightIcon: IconComponent | null
   link: (handle: string | null) => string | null
 }
 
@@ -44,49 +45,49 @@ const linkButtonMap: Record<LinkButtonType, LinkButtonInfo> = {
   trackUpload: {
     label: 'Upload Tracks',
     leftIcon: null,
-    rightIcon: <IconCloudUpload />,
+    rightIcon: IconCloudUpload,
     link: () => UPLOAD_PAGE
   },
   profile: {
     label: 'Your Profile',
     leftIcon: null,
-    rightIcon: <IconArrowRight />,
+    rightIcon: IconArrowRight,
     link: (handle: Nullable<string>) => (handle ? profilePage(handle) : null)
   },
   verifyAccount: {
     label: 'Verify Your Account',
     leftIcon: null,
-    rightIcon: <IconCheck />,
+    rightIcon: IconCheck,
     link: () => SETTINGS_PAGE
   },
   trendingTracks: {
     label: 'Trending Tracks',
     leftIcon: null,
-    rightIcon: <IconArrowRight />,
+    rightIcon: IconArrowRight,
     link: () => TRENDING_PAGE
   },
   sendFirstTip: {
     label: 'Send a Tip',
     leftIcon: null,
-    rightIcon: <GoldBadgeIconImage />,
+    rightIcon: GoldBadgeIconImage,
     link: () => LIBRARY_PAGE
   },
   firstPlaylist: {
     label: 'Discover Some Tracks',
     leftIcon: null,
-    rightIcon: <IconArrowRight />,
+    rightIcon: IconArrowRight,
     link: () => EXPLORE_PAGE
   },
   [ChallengeName.AudioMatchingSell]: {
     label: 'View Premium Tracks',
     leftIcon: null,
-    rightIcon: <IconArrowRight />,
+    rightIcon: IconArrowRight,
     link: () => EXPLORE_PREMIUM_TRACKS_PAGE
   },
   [ChallengeName.AudioMatchingBuy]: {
     label: 'View Premium Tracks',
     leftIcon: null,
-    rightIcon: <IconArrowRight />,
+    rightIcon: IconArrowRight,
     link: () => EXPLORE_PREMIUM_TRACKS_PAGE
   }
 }
diff --git a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.module.css
index 4871bf9c284..0dc207cbcd7 100644
--- a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.module.css
+++ b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.module.css
@@ -2,10 +2,6 @@
   max-width: 488px;
 }
 
-.button {
-  flex: 1;
-}
-
 .content > div {
   line-height: 150%;
   font-weight: var(--font-medium);
@@ -14,9 +10,3 @@
   flex-direction: column;
   gap: var(--unit-4);
 }
-
-.footer {
-  display: flex;
-  gap: var(--unit-4);
-  padding: 0 var(--unit-6) var(--unit-6) var(--unit-6);
-}
diff --git a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
index 4b38e4dd0a2..8e2eff7bec7 100644
--- a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
+++ b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
@@ -9,9 +9,9 @@ import {
   ModalTitle,
   ModalFooter,
   IconMessageBlock,
-  IconInfo
+  IconInfo,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { HelpCallout } from 'components/help-callout/HelpCallout'
@@ -77,18 +77,12 @@ export const BlockUserConfirmationModal = ({
         <HelpCallout icon={<IconInfo />} content={messages.callout} />
       </ModalContent>
       <ModalFooter className={styles.footer}>
-        <Button
-          className={styles.button}
-          type={ButtonType.PRIMARY}
-          text={messages.cancel}
-          onClick={onClose}
-        />
-        <Button
-          className={styles.button}
-          type={ButtonType.DESTRUCTIVE}
-          text={isReportAbuse ? messages.confirmReport : messages.confirmBlock}
-          onClick={handleConfirmClicked}
-        />
+        <Button variant='secondary' onClick={onClose} fullWidth>
+          {messages.cancel}
+        </Button>
+        <Button variant='destructive' onClick={handleConfirmClicked} fullWidth>
+          {isReportAbuse ? messages.confirmReport : messages.confirmBlock}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/pages/chat-page/components/CreateChatPrompt.tsx b/packages/web/src/pages/chat-page/components/CreateChatPrompt.tsx
index a8ed5a42962..2d3ea88fe0d 100644
--- a/packages/web/src/pages/chat-page/components/CreateChatPrompt.tsx
+++ b/packages/web/src/pages/chat-page/components/CreateChatPrompt.tsx
@@ -1,8 +1,7 @@
 import { useCallback } from 'react'
 
 import { chatSelectors, useCreateChatModal } from '@audius/common/store'
-import { IconCompose } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconCompose } from '@audius/harmony'
 
 import { useSelector } from 'common/hooks/useSelector'
 
@@ -38,13 +37,9 @@ export const CreateChatPrompt = () => {
           {hasChats ? messages.selectSubtitle : messages.newSubtitle}
         </div>
       </div>
-      <Button
-        className={styles.button}
-        type={ButtonType.PRIMARY_ALT}
-        text={messages.writeMessage}
-        leftIcon={<IconCompose />}
-        onClick={handleClick}
-      />
+      <Button variant='primary' iconLeft={IconCompose} onClick={handleClick}>
+        {messages.writeMessage}
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.module.css
deleted file mode 100644
index 963f955ed8a..00000000000
--- a/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.root {
-  max-width: 488px;
-}
-
-.button {
-  flex: 1;
-}
-
-.content {
-  line-height: 150%;
-  font-weight: var(--font-medium);
-  font-size: var(--font-l);
-}
-
-.footer {
-  display: flex;
-  gap: var(--unit-4);
-  padding: 0 var(--unit-6) var(--unit-6) var(--unit-6);
-}
diff --git a/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.tsx
index b770b7f7398..59600218133 100644
--- a/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.tsx
+++ b/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.tsx
@@ -8,15 +8,14 @@ import {
   ModalHeader,
   ModalTitle,
   ModalFooter,
-  IconMessageUnblock as IconUnblockMessages
+  IconMessageUnblock as IconUnblockMessages,
+  Button,
+  ModalContentText
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { UserNameAndBadges } from 'components/user-name-and-badges/UserNameAndBadges'
 
-import styles from './UnblockUserConfirmationModal.module.css'
-
 const { unblockUser } = chatActions
 
 const messages = {
@@ -49,26 +48,20 @@ export const UnblockUserConfirmationModal = ({
   }, [dispatch, onClose, user])
 
   return (
-    <Modal bodyClassName={styles.root} isOpen={isVisible} onClose={onClose}>
+    <Modal isOpen={isVisible} onClose={onClose} size='small'>
       <ModalHeader>
         <ModalTitle title={messages.title} icon={<IconUnblockMessages />} />
       </ModalHeader>
-      <ModalContent className={styles.content}>
-        {messages.content(user)}
+      <ModalContent>
+        <ModalContentText>{messages.content(user)}</ModalContentText>
       </ModalContent>
-      <ModalFooter className={styles.footer}>
-        <Button
-          className={styles.button}
-          type={ButtonType.COMMON_ALT}
-          text={messages.cancel}
-          onClick={onClose}
-        />
-        <Button
-          className={styles.button}
-          type={ButtonType.PRIMARY_ALT}
-          text={messages.confirm}
-          onClick={handleConfirmClicked}
-        />
+      <ModalFooter>
+        <Button variant='secondary' onClick={onClose} fullWidth>
+          {messages.cancel}
+        </Button>
+        <Button variant='primary' onClick={handleConfirmClicked} fullWidth>
+          {messages.confirm}
+        </Button>
       </ModalFooter>
     </Modal>
   )
diff --git a/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.module.css b/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.module.css
index 58701aa051f..00d00d7cf92 100644
--- a/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.module.css
+++ b/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.module.css
@@ -32,23 +32,6 @@
   margin-bottom: 24px;
 }
 
-.button {
-  height: auto !important;
-  margin-inline-end: 24px;
-  padding: 12px 24px !important;
-}
-.button.buttonDanger,
-.button.buttonDanger:hover {
-  background-color: var(--accent-red);
-}
-.button.buttonDanger:active {
-  background-color: var(--accent-red-dark-1);
-}
-
-.button > span {
-  font-size: var(--font-m) !important;
-}
-
 /** MOBILE **/
 .mobile.tile {
   padding: 24px;
@@ -68,7 +51,3 @@
   display: inline-block;
   margin-bottom: 8px;
 }
-.mobile .button {
-  margin: 12px 0 0;
-  width: 100%;
-}
diff --git a/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.tsx b/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.tsx
index 6ea2f29b538..2fa4ac9b5fb 100644
--- a/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.tsx
+++ b/packages/web/src/pages/deactivate-account-page/DeactivateAccountPage.tsx
@@ -5,7 +5,7 @@ import {
   deactivateAccountActions,
   deactivateAccountSelectors
 } from '@audius/common/store'
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
@@ -86,23 +86,21 @@ export const DeactivateAcccountPageContents = ({
       )}
       <div className={styles.buttons}>
         <Button
-          className={cn(styles.button, {
-            [styles.buttonDanger]: !(isLoading && isMobile)
-          })}
-          text={messages.buttonDeactivate}
-          type={
-            isLoading && isMobile ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT
-          }
+          variant='destructive'
+          isLoading={isLoading}
           onClick={openConfirmation}
-        />
+          fullWidth={isMobile}
+        >
+          {messages.buttonDeactivate}
+        </Button>
         <Button
-          className={styles.button}
-          text={messages.buttonSafety}
-          type={
-            isLoading && isMobile ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT
-          }
+          variant='secondary'
+          isLoading={isLoading}
           onClick={goToSafety}
-        />
+          fullWidth={isMobile}
+        >
+          {messages.buttonSafety}
+        </Button>
       </div>
     </div>
   )
diff --git a/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.module.css b/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.module.css
index 10d7b616993..c2ab5418220 100644
--- a/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.module.css
+++ b/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.module.css
@@ -16,20 +16,3 @@
   margin-left: auto;
   margin-right: auto;
 }
-
-.button {
-  height: auto !important;
-  margin-inline-end: 24px;
-  padding: 12px 24px !important;
-}
-.button.buttonDanger,
-.button.buttonDanger:hover {
-  background-color: var(--accent-red);
-}
-.button.buttonDanger:active {
-  background-color: var(--accent-red-dark-1);
-}
-
-.button > span {
-  font-size: var(--font-m) !important;
-}
diff --git a/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.tsx b/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.tsx
index d4ddab832a7..d6daae50fcd 100644
--- a/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.tsx
+++ b/packages/web/src/pages/deactivate-account-page/components/desktop/DeactivateAccountConfirmationModal.tsx
@@ -1,6 +1,4 @@
-import { Modal } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
-import cn from 'classnames'
+import { Button, Modal } from '@audius/harmony'
 
 import LoadingSpinnerFullPage from 'components/loading-spinner-full-page/LoadingSpinnerFullPage'
 
@@ -38,22 +36,15 @@ export const DeactivateAccountConfirmationModal = ({
         )}
         <div className={styles.buttons}>
           <Button
-            className={cn(styles.button, {
-              [styles.buttonDanger]: !isLoading
-            })}
-            isDisabled={isLoading}
+            variant='destructive'
+            isLoading={isLoading}
             onClick={onConfirm}
-            textClassName={styles.deleteButtonText}
-            text={messages.buttonDeactivate}
-            type={isLoading ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT}
-          />
-          <Button
-            className={styles.button}
-            isDisabled={isLoading}
-            onClick={onClose}
-            text={messages.buttonGoBack}
-            type={isLoading ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT}
-          />
+          >
+            {messages.buttonDeactivate}
+          </Button>
+          <Button isLoading={isLoading} onClick={onClose}>
+            {messages.buttonGoBack}
+          </Button>
         </div>
       </div>
     </Modal>
diff --git a/packages/web/src/pages/explore-page/components/desktop/Section.module.css b/packages/web/src/pages/explore-page/components/desktop/Section.module.css
index fee96b6d0f6..7be1c5491a9 100644
--- a/packages/web/src/pages/explore-page/components/desktop/Section.module.css
+++ b/packages/web/src/pages/explore-page/components/desktop/Section.module.css
@@ -89,11 +89,3 @@
 .expandable.expanded .children {
   max-height: 4000px;
 }
-
-.expandButton {
-  margin-top: 32px;
-}
-
-.expandable .expandButton .expandButtonText {
-  text-transform: uppercase;
-}
diff --git a/packages/web/src/pages/explore-page/components/desktop/Section.tsx b/packages/web/src/pages/explore-page/components/desktop/Section.tsx
index daaa62d0309..fb0d1795314 100644
--- a/packages/web/src/pages/explore-page/components/desktop/Section.tsx
+++ b/packages/web/src/pages/explore-page/components/desktop/Section.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback, ReactNode } from 'react'
 
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
 import cn from 'classnames'
 
 import styles from './Section.module.css'
@@ -54,12 +54,12 @@ const Section = ({
       <div className={styles.children}>{children}</div>
       {expandable && !isExpanded && (
         <Button
-          className={styles.expandButton}
-          textClassName={styles.expandButtonText}
-          type={ButtonType.PRIMARY_ALT}
-          text={expandText || messages.more}
+          variant='primary'
+          css={(theme) => ({ marginTop: theme.spacing['3xl'] })}
           onClick={expand}
-        />
+        >
+          {expandText || messages.more}
+        </Button>
       )}
     </div>
   )
diff --git a/packages/web/src/pages/explore-page/components/mobile/ExplorePage.tsx b/packages/web/src/pages/explore-page/components/mobile/ExplorePage.tsx
index d6701ce240d..30bf2da41ca 100644
--- a/packages/web/src/pages/explore-page/components/mobile/ExplorePage.tsx
+++ b/packages/web/src/pages/explore-page/components/mobile/ExplorePage.tsx
@@ -187,6 +187,7 @@ const ExplorePage = ({
                     ? styles.premiumTracksBackgroundIcon
                     : undefined
                 }
+                color='staticWhite'
               />
             }
             goToRoute={goToRoute}
diff --git a/packages/web/src/pages/feed-page/components/EmptyFeed.jsx b/packages/web/src/pages/feed-page/components/EmptyFeed.jsx
index 4f8353d2514..82523777071 100644
--- a/packages/web/src/pages/feed-page/components/EmptyFeed.jsx
+++ b/packages/web/src/pages/feed-page/components/EmptyFeed.jsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 
-import { Button, ButtonType, ButtonSize } from '@audius/stems'
+import { Button } from '@audius/harmony'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -53,13 +53,9 @@ const EmptyFeed = (props) => {
                 <i className='emoji small headphone' />
               </div>
               <div className={styles.item}>and much more!</div>
-              <Button
-                text='Sign Up'
-                type={ButtonType.PRIMARY_ALT}
-                size={ButtonSize.SMALL}
-                onClick={props.onClick}
-                className={styles.button}
-              />
+              <Button variant='primary' size='small' onClick={props.onClick}>
+                Sign Up
+              </Button>
             </>
           )}
         </div>
diff --git a/packages/web/src/pages/feed-page/components/FollowUsers.jsx b/packages/web/src/pages/feed-page/components/FollowUsers.jsx
index 7391894aea8..4b62aa89e7d 100644
--- a/packages/web/src/pages/feed-page/components/FollowUsers.jsx
+++ b/packages/web/src/pages/feed-page/components/FollowUsers.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 
-import { IconUserFollow as IconFollow } from '@audius/harmony'
-import { Button, ButtonType, ButtonSize } from '@audius/stems'
+import { Button, IconUserFollow as IconFollow } from '@audius/harmony'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -60,14 +59,13 @@ const FollowUsers = (props) => {
       </div>
       <div className={styles.buttonContainer}>
         <Button
-          text={`Follow Selected Artists`}
-          type={disabled ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT}
-          size={ButtonSize.MEDIUM}
-          leftIcon={<IconFollow />}
+          variant='primary'
+          disabled={disabled}
+          iconLeft={IconFollow}
           onClick={onFollowUsers}
-          className={styles.button}
-          textClassName={styles.buttonText}
-        />
+        >
+          Follow Selected Artists
+        </Button>
       </div>
     </div>
   )
diff --git a/packages/web/src/pages/feed-page/components/FollowUsers.module.css b/packages/web/src/pages/feed-page/components/FollowUsers.module.css
index a1f7e15bb5c..990f934093e 100644
--- a/packages/web/src/pages/feed-page/components/FollowUsers.module.css
+++ b/packages/web/src/pages/feed-page/components/FollowUsers.module.css
@@ -28,10 +28,3 @@
   display: inline-flex;
   justify-content: center;
 }
-
-.button .buttonText {
-  color: #ffffff;
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 12px;
-}
diff --git a/packages/web/src/pages/history-page/components/desktop/HistoryPage.module.css b/packages/web/src/pages/history-page/components/desktop/HistoryPage.module.css
index fc5e5112d28..dc81339794e 100644
--- a/packages/web/src/pages/history-page/components/desktop/HistoryPage.module.css
+++ b/packages/web/src/pages/history-page/components/desktop/HistoryPage.module.css
@@ -2,23 +2,6 @@
   position: relative;
 }
 
-.historyPageHeader .playAllButton {
-  margin-left: 28px;
-  height: 28px;
-  width: 94px;
-  display: flex;
-  justify-content: center;
-}
-.historyPageHeader .playAllButton .playAllButtonIcon {
-  margin-right: 8px;
-  width: 12px !important;
-  height: 12px !important;
-}
-
-.historyPageHeader .playAllButton .playAllButtonText {
-  font-size: 11px;
-}
-
 /* Filter Input in Header */
 .historyPageWrapper :global(.ant-input-affix-wrapper) {
   position: absolute;
diff --git a/packages/web/src/pages/history-page/components/desktop/HistoryPage.tsx b/packages/web/src/pages/history-page/components/desktop/HistoryPage.tsx
index 0550813177b..ec18d3864c8 100644
--- a/packages/web/src/pages/history-page/components/desktop/HistoryPage.tsx
+++ b/packages/web/src/pages/history-page/components/desktop/HistoryPage.tsx
@@ -1,8 +1,7 @@
 import { ChangeEvent, memo, useMemo } from 'react'
 
 import { ID } from '@audius/common/models'
-import { IconPause, IconPlay } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconPause, IconPlay } from '@audius/harmony'
 
 import FilterInput from 'components/filter-input/FilterInput'
 import Header from 'components/header/desktop/Header'
@@ -61,14 +60,13 @@ const HistoryPage = ({
 
   const playAllButton = !loading ? (
     <Button
-      className={styles.playAllButton}
-      textClassName={styles.playAllButtonText}
-      iconClassName={styles.playAllButtonIcon}
-      type={ButtonType.PRIMARY_ALT}
-      text={queuedAndPlaying ? 'PAUSE' : 'PLAY'}
-      leftIcon={queuedAndPlaying ? <IconPause /> : <IconPlay />}
+      variant='primary'
+      css={(theme) => ({ marginLeft: theme.spacing.xl })}
+      iconLeft={queuedAndPlaying ? IconPause : IconPlay}
       onClick={onPlay}
-    />
+    >
+      {queuedAndPlaying ? 'Play' : 'Pause'}
+    </Button>
   ) : null
 
   const trackTableActions = loading
diff --git a/packages/web/src/pages/modals/Modals.tsx b/packages/web/src/pages/modals/Modals.tsx
index a097d797aa7..f01e92a318f 100644
--- a/packages/web/src/pages/modals/Modals.tsx
+++ b/packages/web/src/pages/modals/Modals.tsx
@@ -6,6 +6,7 @@ import { AddFundsModal } from 'components/add-funds-modal/AddFundsModal'
 import AddToCollectionModal from 'components/add-to-collection/desktop/AddToCollectionModal'
 import { AiAttributionSettingsModal } from 'components/ai-attribution-settings-modal'
 import AppCTAModal from 'components/app-cta-modal/AppCTAModal'
+import { ArtistPickModal } from 'components/artist-pick-modal/ArtistPickModal'
 import BrowserPushConfirmationModal from 'components/browser-push-confirmation-modal/BrowserPushConfirmationModal'
 import { BuyAudioModal } from 'components/buy-audio-modal/BuyAudioModal'
 import { BuyAudioRecoveryModal } from 'components/buy-audio-modal/BuyAudioRecoveryModal'
@@ -29,7 +30,7 @@ import { TipAudioModal } from 'components/tipping/tip-audio/TipAudioModal'
 import ConnectedMobileOverflowModal from 'components/track-overflow-modal/ConnectedMobileOverflowModal'
 import { TransactionDetailsModal } from 'components/transaction-details-modal'
 import UnfollowConfirmationModal from 'components/unfollow-confirmation-modal/UnfollowConfirmationModal'
-import UnloadDialog from 'components/unload-dialog/UnloadDialog'
+import { UnloadDialog } from 'components/unload-dialog/UnloadDialog'
 import { UploadConfirmationModal } from 'components/upload-confirmation-modal'
 import { USDCPurchaseDetailsModal } from 'components/usdc-purchase-details-modal/USDCPurchaseDetailsModal'
 import { USDCTransactionDetailsModal } from 'components/usdc-transaction-details-modal/USDCTransactionDetailsModal'
@@ -110,7 +111,8 @@ const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = {
   USDCTransactionDetailsModal,
   AddFundsModal,
   CoinflowWithdraw: CoinflowWithdrawModal,
-  WaitForDownloadModal
+  WaitForDownloadModal,
+  ArtistPick: ArtistPickModal
 }
 
 const commonModals = Object.entries(commonModalsMap) as [
diff --git a/packages/web/src/pages/not-found-page/NotFoundPage.module.css b/packages/web/src/pages/not-found-page/NotFoundPage.module.css
index d9a20ac3451..5e54c3d9c5a 100644
--- a/packages/web/src/pages/not-found-page/NotFoundPage.module.css
+++ b/packages/web/src/pages/not-found-page/NotFoundPage.module.css
@@ -64,9 +64,6 @@
 .buttonWrapper {
   margin-top: 100px;
 }
-.buttonWrapper .buttonFormatting .buttonFormattingText {
-  font-size: 18px;
-}
 
 /* Mobile styles */
 .isMobile {
@@ -118,14 +115,3 @@
 .isMobile .buttonWrapper {
   margin: 40px 0px 60px;
 }
-
-.isMobile .buttonFormatting {
-  width: 100%;
-  justify-content: center;
-}
-
-.isMobile .buttonFormatting .buttonFormattingText {
-  font-size: var(--font-m);
-  font-weight: var(--font-bold);
-  text-align: center;
-}
diff --git a/packages/web/src/pages/not-found-page/NotFoundPage.tsx b/packages/web/src/pages/not-found-page/NotFoundPage.tsx
index 556552edaa0..502785d677f 100644
--- a/packages/web/src/pages/not-found-page/NotFoundPage.tsx
+++ b/packages/web/src/pages/not-found-page/NotFoundPage.tsx
@@ -1,14 +1,11 @@
 import { useEffect, useContext } from 'react'
 
 import { Name } from '@audius/common/models'
-import { themeSelectors } from '@audius/common/store'
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
+import { useTheme } from '@emotion/react'
 import cn from 'classnames'
-import { push as pushRoute } from 'connected-react-router'
 import Lottie from 'react-lottie'
-import { connect } from 'react-redux'
-import { withRouter, RouteComponentProps } from 'react-router-dom'
-import { Dispatch } from 'redux'
+import { Link } from 'react-router-dom'
 
 import notFoundAnimation from 'assets/animations/404.json'
 import tiledBackground from 'assets/img/notFoundTiledBackround.png'
@@ -19,11 +16,9 @@ import NavContext, {
 } from 'components/nav/store/context'
 import Page from 'components/page/Page'
 import { useIsMobile } from 'hooks/useIsMobile'
-import { AppState } from 'store/types'
-import { isMatrix, shouldShowDark } from 'utils/theme/theme'
+import { HOME_PAGE } from 'utils/route'
 
 import styles from './NotFoundPage.module.css'
-const { getTheme } = themeSelectors
 
 const messages = {
   title: 'Not Found',
@@ -33,11 +28,8 @@ const messages = {
   cta: 'Take Me Back To The Music'
 }
 
-type NotFoundPageProps = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  RouteComponentProps
-
-const NotFoundPage = ({ goToHomePage, theme }: NotFoundPageProps) => {
+export const NotFoundPage = () => {
+  const theme = useTheme()
   const isMobile = useIsMobile()
   const record = useRecord()
   useEffect(() => {
@@ -72,10 +64,9 @@ const NotFoundPage = ({ goToHomePage, theme }: NotFoundPageProps) => {
         className={cn(styles.bodyWrapper, {
           [styles.bodyWrapperMobile]: isMobile
         })}
-        style={{
+        css={{
           backgroundImage: `url(${tiledBackground})`,
-          backgroundBlendMode:
-            shouldShowDark(theme) || isMatrix() ? 'color-burn' : 'none'
+          backgroundBlendMode: theme.type === 'day' ? 'none' : 'color-burn'
         }}
       >
         <div className={styles.contentWrapper}>
@@ -91,32 +82,12 @@ const NotFoundPage = ({ goToHomePage, theme }: NotFoundPageProps) => {
             </div>
           </div>
           <div className={styles.buttonWrapper}>
-            <Button
-              className={styles.buttonFormatting}
-              textClassName={styles.buttonFormattingText}
-              type={ButtonType.PRIMARY_ALT}
-              text={messages.cta}
-              onClick={goToHomePage}
-            />
+            <Button variant='primary' fullWidth={isMobile} asChild>
+              <Link to={HOME_PAGE}>{messages.cta}</Link>
+            </Button>
           </div>
         </div>
       </div>
     </Page>
   )
 }
-
-function mapStateToProps(state: AppState) {
-  return {
-    theme: getTheme(state)
-  }
-}
-
-function mapDispatchToProps(dispatch: Dispatch) {
-  return {
-    goToHomePage: () => dispatch(pushRoute('/'))
-  }
-}
-
-export default withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(NotFoundPage)
-)
diff --git a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css
index c6dc852c24e..38aefe8ccbe 100644
--- a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css
+++ b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.module.css
@@ -26,6 +26,3 @@
 .mobile .deactivatedText {
   margin: 24px 0 12px;
 }
-.mobile .deactivatedBackButton {
-  width: 100%;
-}
diff --git a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
index 9751826801f..d1282e6fb83 100644
--- a/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
+++ b/packages/web/src/pages/profile-page/components/DeactivatedProfileTombstone.tsx
@@ -1,6 +1,8 @@
-import { IconArrowRight } from '@audius/harmony'
-import { ButtonSize, Button, ButtonType } from '@audius/stems'
+import { Button, IconArrowRight } from '@audius/harmony'
 import cn from 'classnames'
+import { Link } from 'react-router-dom'
+
+import { HOME_PAGE } from 'utils/route'
 
 import styles from './DeactivatedProfileTombstone.module.css'
 
@@ -10,23 +12,21 @@ const messages = {
 }
 
 export const DeactivatedProfileTombstone = ({
-  goToRoute,
   isMobile = false
 }: {
-  goToRoute: (route: string) => void
   isMobile?: boolean
 }) => {
   return (
     <div className={cn(styles.deactivated, { [styles.mobile]: isMobile })}>
       <div className={styles.deactivatedText}>{messages.helpText}</div>
       <Button
-        className={styles.deactivatedBackButton}
-        onClick={() => goToRoute('/')}
-        type={ButtonType.PRIMARY_ALT}
-        size={ButtonSize.MEDIUM}
-        text={messages.buttonText}
-        rightIcon={<IconArrowRight color='staticWhite' />}
-      />
+        variant='primary'
+        fullWidth={isMobile}
+        asChild
+        iconRight={IconArrowRight}
+      >
+        <Link to={HOME_PAGE}>{messages.buttonText}</Link>
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
index dc55fcd6ee7..8adf8ea9189 100644
--- a/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
+++ b/packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
@@ -783,7 +783,7 @@ const ProfilePage = ({
             />
             <div className={styles.content}>
               {profile && profile.is_deactivated ? (
-                <DeactivatedProfileTombstone goToRoute={goToRoute} />
+                <DeactivatedProfileTombstone />
               ) : (
                 body
               )}
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
index ad9d483ee50..ff24857bf2e 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx
@@ -636,7 +636,7 @@ const ProfilePage = g(
     if (profile && profile.is_deactivated) {
       content = (
         <div className={styles.contentContainer}>
-          <DeactivatedProfileTombstone goToRoute={goToRoute} isMobile={true} />
+          <DeactivatedProfileTombstone isMobile />
         </div>
       )
     } else if (!isLoading && !isEditing) {
diff --git a/packages/web/src/pages/profile-page/components/mobile/UploadButton.module.css b/packages/web/src/pages/profile-page/components/mobile/UploadButton.module.css
deleted file mode 100644
index 46d524e2a1c..00000000000
--- a/packages/web/src/pages/profile-page/components/mobile/UploadButton.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.buttonContainer {
-  padding: 8px 12px;
-}
-
-.button {
-  width: 100%;
-  box-shadow: 0px 2px 5px var(--table-shadow);
-  border-color: var(--neutral-light-7);
-  height: 40px !important;
-}
-
-.button:hover {
-  transform: none;
-}
-
-.buttonText {
-  color: var(--neutral-light-2) !important;
-}
-
-.icon path {
-  fill: var(--neutral-light-2) !important;
-}
diff --git a/packages/web/src/pages/profile-page/components/mobile/UploadButton.tsx b/packages/web/src/pages/profile-page/components/mobile/UploadButton.tsx
index 184edc9deaf..0f6c58f5b15 100644
--- a/packages/web/src/pages/profile-page/components/mobile/UploadButton.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/UploadButton.tsx
@@ -1,12 +1,9 @@
 import { useCallback, useState } from 'react'
 
-import { IconCloudUpload } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, Flex, IconCloudUpload } from '@audius/harmony'
 
 import { DownloadMobileAppDrawer } from 'components/download-mobile-app-drawer/DownloadMobileAppDrawer'
 
-import styles from './UploadButton.module.css'
-
 const UploadButton = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const handleDrawerClose = useCallback(() => {
@@ -18,23 +15,20 @@ const UploadButton = () => {
   }, [setIsDrawerOpen])
 
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button
-          className={styles.button}
-          textClassName={styles.buttonText}
-          onClick={handleClick}
-          text='Upload Track'
-          type={ButtonType.COMMON_ALT}
-          leftIcon={<IconCloudUpload />}
-          iconClassName={styles.icon}
-        />
-      </div>
+    <Flex pv='s' ph='m'>
+      <Button
+        variant='tertiary'
+        onClick={handleClick}
+        iconLeft={IconCloudUpload}
+        fullWidth
+      >
+        Upload Track
+      </Button>
       <DownloadMobileAppDrawer
         isOpen={isDrawerOpen}
         onClose={handleDrawerClose}
       />
-    </>
+    </Flex>
   )
 }
 
diff --git a/packages/web/src/pages/requires-update/RequiresUpdate.module.css b/packages/web/src/pages/requires-update/RequiresUpdate.module.css
index 39b72f9bd0a..f122563c03f 100644
--- a/packages/web/src/pages/requires-update/RequiresUpdate.module.css
+++ b/packages/web/src/pages/requires-update/RequiresUpdate.module.css
@@ -37,17 +37,3 @@
   font-weight: var(--font-demi-bold);
   margin-bottom: 52px;
 }
-
-.button :global(.btnRightIcon .ant-spin-dot i) {
-  background-color: var(--white);
-}
-
-.spinner {
-  display: block;
-  height: 16px;
-  width: 16px;
-}
-
-.spinner g path {
-  stroke: var(--static-white) !important;
-}
diff --git a/packages/web/src/pages/requires-update/RequiresUpdate.tsx b/packages/web/src/pages/requires-update/RequiresUpdate.tsx
index 5b5ec3f4407..d1cf009dce8 100644
--- a/packages/web/src/pages/requires-update/RequiresUpdate.tsx
+++ b/packages/web/src/pages/requires-update/RequiresUpdate.tsx
@@ -1,8 +1,7 @@
 import { Theme } from '@audius/common/models'
-import { Button, ButtonType, ButtonSize } from '@audius/stems'
+import { Button } from '@audius/harmony'
 
 import tileBackground from 'assets/img/notFoundTiledBackround.png'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { isMatrix, shouldShowDark } from 'utils/theme/theme'
 
 import styles from './RequiresUpdate.module.css'
@@ -36,17 +35,9 @@ const SomethingWrong = ({
     >
       <div className={styles.title}>{messages.title}</div>
       <div className={styles.subtitle}>{messages.subtitle}</div>
-      <div className={styles.button}>
-        <Button
-          type={ButtonType.PRIMARY_ALT}
-          rightIcon={
-            isUpdating ? <LoadingSpinner className={styles.spinner} /> : null
-          }
-          text={isUpdating ? messages.buttonIsUpdating : messages.buttonUpdate}
-          size={ButtonSize.MEDIUM}
-          onClick={onUpdate}
-        />
-      </div>
+      <Button variant='primary' isLoading={isUpdating} onClick={onUpdate}>
+        {isUpdating ? messages.buttonIsUpdating : messages.buttonUpdate}
+      </Button>
     </div>
   </div>
 )
diff --git a/packages/web/src/pages/saved-page/components/desktop/SavedPage.module.css b/packages/web/src/pages/saved-page/components/desktop/SavedPage.module.css
index 1fff625df50..15d9d7623f5 100644
--- a/packages/web/src/pages/saved-page/components/desktop/SavedPage.module.css
+++ b/packages/web/src/pages/saved-page/components/desktop/SavedPage.module.css
@@ -7,23 +7,6 @@
   justify-content: left;
 }
 
-.savedPageHeader .playAllButton {
-  margin-left: 28px;
-  height: 28px;
-  width: 94px;
-  display: flex;
-  justify-content: center;
-}
-.savedPageHeader .playAllButton .playAllButtonIcon {
-  margin-right: 8px;
-  width: 12px !important;
-  height: 12px !important;
-}
-
-.savedPageHeader .playAllButton .playAllButtonText {
-  font-size: 11px;
-}
-
 /* Filter Input in Header */
 .savedPageWrapper :global(.ant-input-affix-wrapper) {
   position: absolute;
diff --git a/packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx b/packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx
index afa8f5be2cd..8cf3ef0943b 100644
--- a/packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx
+++ b/packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx
@@ -16,9 +16,9 @@ import {
   IconNote,
   IconPlaylists,
   IconPause,
-  IconPlay
+  IconPlay,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import { useSelector } from 'react-redux'
 
 import FilterInput from 'components/filter-input/FilterInput'
@@ -169,14 +169,13 @@ const SavedPage = ({
       }}
     >
       <Button
-        className={styles.playAllButton}
-        iconClassName={styles.playAllButtonIcon}
-        textClassName={styles.playAllButtonText}
-        type={ButtonType.PRIMARY_ALT}
-        text={queuedAndPlaying ? 'PAUSE' : 'PLAY'}
-        leftIcon={queuedAndPlaying ? <IconPause /> : <IconPlay />}
+        variant='primary'
+        css={(theme) => ({ marginLeft: theme.spacing.xl })}
+        iconLeft={queuedAndPlaying ? IconPause : IconPlay}
         onClick={onPlay}
-      />
+      >
+        {queuedAndPlaying ? 'Pause' : 'Play'}
+      </Button>
     </div>
   )
 
diff --git a/packages/web/src/pages/saved-page/components/mobile/SavedPage.module.css b/packages/web/src/pages/saved-page/components/mobile/SavedPage.module.css
index 5a18c8a8cb9..bb4f57c9ea3 100644
--- a/packages/web/src/pages/saved-page/components/mobile/SavedPage.module.css
+++ b/packages/web/src/pages/saved-page/components/mobile/SavedPage.module.css
@@ -156,8 +156,3 @@
 .emoji {
   margin-left: 3px;
 }
-
-.emptyButton .emptyButtonText {
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-}
diff --git a/packages/web/src/pages/saved-page/components/mobile/SavedPage.tsx b/packages/web/src/pages/saved-page/components/mobile/SavedPage.tsx
index 077eff3b660..43f69bed440 100644
--- a/packages/web/src/pages/saved-page/components/mobile/SavedPage.tsx
+++ b/packages/web/src/pages/saved-page/components/mobile/SavedPage.tsx
@@ -28,8 +28,13 @@ import {
   QueueItem,
   CommonState
 } from '@audius/common/store'
-import { IconAlbum, IconFilter, IconNote, IconPlaylists } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import {
+  Button,
+  IconAlbum,
+  IconFilter,
+  IconNote,
+  IconPlaylists
+} from '@audius/harmony'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
@@ -70,17 +75,14 @@ type EmptyTabProps = {
 }
 
 export const EmptyTab = (props: EmptyTabProps) => {
+  const { message, onClick } = props
   return (
     <div className={styles.emptyTab}>
-      <div className={styles.message}>{props.message}</div>
+      <div className={styles.message}>{message}</div>
       <div className={styles.afterSaved}>{emptyTabMessages.afterSaved}</div>
-      <Button
-        type={ButtonType.PRIMARY_ALT}
-        className={styles.emptyButton}
-        textClassName={styles.emptyButtonText}
-        text={emptyTabMessages.goToTrending}
-        onClick={props.onClick}
-      />
+      <Button variant='primary' onClick={onClick}>
+        {emptyTabMessages.goToTrending}
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppsSettingsCard.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppsSettingsCard.tsx
index 402a5a30f5f..86e59dba9e3 100644
--- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppsSettingsCard.tsx
+++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppsSettingsCard.tsx
@@ -1,10 +1,8 @@
 import { useState, useCallback } from 'react'
 
-import { IconEmbed } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconEmbed } from '@audius/harmony'
 
 import SettingsCard from '../SettingsCard'
-import styles from '../SettingsPage.module.css'
 
 import { DeveloperAppsSettingsModal } from './DeveloperAppsSettingsModal'
 
@@ -32,13 +30,9 @@ export const DeveloperAppsSettingsCard = () => {
         title={messages.title}
         description={messages.description}
       >
-        <Button
-          onClick={handleOpen}
-          className={styles.cardButton}
-          textClassName={styles.settingButtonText}
-          type={ButtonType.COMMON_ALT}
-          text={messages.buttonText}
-        />
+        <Button variant='common' onClick={handleOpen} fullWidth>
+          {messages.buttonText}
+        </Button>
       </SettingsCard>
       <DeveloperAppsSettingsModal isOpen={isModalOpen} onClose={handleClose} />
     </>
diff --git a/packages/web/src/pages/settings-page/components/desktop/SettingsPage.module.css b/packages/web/src/pages/settings-page/components/desktop/SettingsPage.module.css
index 9b60355416d..f98fefa3788 100644
--- a/packages/web/src/pages/settings-page/components/desktop/SettingsPage.module.css
+++ b/packages/web/src/pages/settings-page/components/desktop/SettingsPage.module.css
@@ -17,24 +17,6 @@
   gap: var(--unit-6);
 }
 
-.signOutButton {
-  margin-bottom: 16px;
-  height: 48px;
-  flex: 0 0 48px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.signOutButton .signOutButtonText {
-  color: var(--neutral-light-4);
-  font-weight: var(--font-demi-bold);
-  font-size: var(--font-m);
-}
-
-.signOutButton .signOutButtonIcon path {
-  fill: var(--neutral-light-4);
-}
-
 .version {
   align-self: center;
   flex: 0 1;
@@ -61,35 +43,10 @@
   color: var(--neutral-light-2);
 }
 
-.modalBody {
-  max-width: 500px;
-  width: 100%;
-}
-
-.modalHeader {
-  margin: 0 16px;
-}
-
-.modalTitle {
-  color: var(--neutral-light-4);
-  font-size: var(--font-l);
-  font-weight: var(--font-heavy);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
 .cardFull {
   flex: 1 1 100%;
 }
 
-.cardButton {
-  width: 100%;
-}
-
-.cardButton .settingButtonText {
-  font-size: var(--font-l);
-}
-
 .iconVerified path:nth-child(2) {
   fill: transparent;
 }
diff --git a/packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx b/packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx
index 4d5a68f7f8f..5aedbc4692c 100644
--- a/packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx
+++ b/packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx
@@ -13,6 +13,7 @@ import {
 } from '@audius/common/store'
 import { removeNullable } from '@audius/common/utils'
 import {
+  Button,
   Modal,
   IconAppearance,
   SegmentedControl,
@@ -24,9 +25,13 @@ import {
   IconVerified,
   IconEmailAddress,
   IconKey,
-  IconMessage
+  IconMessage,
+  ModalHeader,
+  ModalTitle,
+  ModalContent,
+  ModalContentText,
+  ModalFooter
 } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import { Link } from 'react-router-dom'
 
@@ -34,7 +39,6 @@ import { useModalState } from 'common/hooks/useModalState'
 import { make, useRecord } from 'common/store/analytics/actions'
 import { ChangeEmailModal } from 'components/change-email/ChangeEmailModal'
 import { ChangePasswordModal } from 'components/change-password/ChangePasswordModal'
-import ConfirmationBox from 'components/confirmation-box/ConfirmationBox'
 import Header from 'components/header/desktop/Header'
 import Page from 'components/page/Page'
 import Toast from 'components/toast/Toast'
@@ -63,11 +67,6 @@ import VerificationModal from './VerificationModal'
 const { getAllowAiAttribution } = settingsPageSelectors
 const { version } = packageInfo
 
-const SIGN_OUT_MODAL_TEXT = `
-  Are you sure you want to sign out?
-  Double check that you have an account recovery email just in case (resend from your settings).
-`
-
 const EMAIL_TOAST_TIMEOUT = 2000
 
 const messages = {
@@ -119,7 +118,11 @@ const messages = {
   changeEmailButtonText: 'Change Email',
   changePasswordButtonText: 'Change Password',
   desktopAppButtonText: 'Get The App',
-  showPrivateKey: 'Show Private Key (Advanced)'
+  showPrivateKey: 'Show Private Key (Advanced)',
+  signOutModalText: `
+  Are you sure you want to sign out?
+  Double check that you have an account recovery email just in case (resend from your settings).
+`
 }
 
 export type SettingsPageProps = {
@@ -347,13 +350,9 @@ export const SettingsPage = (props: SettingsPageProps) => {
             title={messages.inboxSettingsCardTitle}
             description={messages.inboxSettingsCardDescription}
           >
-            <Button
-              onClick={openInboxSettingsModal}
-              className={styles.cardButton}
-              textClassName={styles.settingButtonText}
-              type={ButtonType.COMMON_ALT}
-              text={messages.inboxSettingsButtonText}
-            />
+            <Button variant='common' onClick={openInboxSettingsModal} fullWidth>
+              {messages.inboxSettingsButtonText}
+            </Button>
           </SettingsCard>
         ) : null}
         <SettingsCard
@@ -361,13 +360,9 @@ export const SettingsPage = (props: SettingsPageProps) => {
           title={messages.notificationsCardTitle}
           description={messages.notificationsCardDescription}
         >
-          <Button
-            onClick={openNotificationSettings}
-            className={styles.cardButton}
-            textClassName={styles.settingButtonText}
-            type={ButtonType.COMMON_ALT}
-            text={messages.notificationsButtonText}
-          />
+          <Button variant='common' onClick={openNotificationSettings} fullWidth>
+            {messages.notificationsButtonText}
+          </Button>
         </SettingsCard>
         <SettingsCard
           icon={<IconMail />}
@@ -381,13 +376,9 @@ export const SettingsPage = (props: SettingsPageProps) => {
             placement={ComponentPlacement.BOTTOM}
             fillParent={false}
           >
-            <Button
-              onClick={showEmailToast}
-              className={styles.cardButton}
-              textClassName={styles.settingButtonText}
-              type={ButtonType.COMMON_ALT}
-              text={messages.accountRecoveryButtonText}
-            />
+            <Button onClick={showEmailToast} variant='common' fullWidth>
+              {messages.accountRecoveryButtonText}
+            </Button>
           </Toast>
         </SettingsCard>
         <SettingsCard
@@ -395,26 +386,18 @@ export const SettingsPage = (props: SettingsPageProps) => {
           title={messages.changeEmailCardTitle}
           description={messages.changeEmailCardDescription}
         >
-          <Button
-            onClick={openChangeEmailModal}
-            className={cn(styles.cardButton, styles.changePasswordButton)}
-            textClassName={styles.settingButtonText}
-            type={ButtonType.COMMON_ALT}
-            text={messages.changeEmailButtonText}
-          />
+          <Button onClick={openChangeEmailModal} variant='common' fullWidth>
+            {messages.changeEmailButtonText}
+          </Button>
         </SettingsCard>
         <SettingsCard
           icon={<IconKey />}
           title={messages.changePasswordCardTitle}
           description={messages.changePasswordCardDescription}
         >
-          <Button
-            onClick={openChangePasswordModal}
-            className={cn(styles.cardButton, styles.changePasswordButton)}
-            textClassName={styles.settingButtonText}
-            type={ButtonType.COMMON_ALT}
-            text={messages.changePasswordButtonText}
-          />
+          <Button onClick={openChangePasswordModal} variant='common' fullWidth>
+            {messages.changePasswordButtonText}
+          </Button>
         </SettingsCard>
         {isAiAttributionEnabled ? (
           <SettingsCard
@@ -429,11 +412,11 @@ export const SettingsPage = (props: SettingsPageProps) => {
             ) : null}
             <Button
               onClick={openAiAttributionSettingsModal}
-              className={styles.cardButton}
-              textClassName={styles.settingButtonText}
-              type={ButtonType.COMMON_ALT}
-              text={messages.aiGeneratedButtonText}
-            />
+              variant='common'
+              fullWidth
+            >
+              {messages.aiGeneratedButtonText}
+            </Button>
           </SettingsCard>
         ) : null}
         <SettingsCard
@@ -461,26 +444,24 @@ export const SettingsPage = (props: SettingsPageProps) => {
           >
             <Button
               onClick={handleDownloadDesktopAppClicked}
-              className={styles.cardButton}
-              textClassName={styles.settingButtonText}
-              type={ButtonType.COMMON_ALT}
-              text={messages.desktopAppButtonText}
-            />
+              variant='common'
+              fullWidth
+            >
+              {messages.desktopAppButtonText}
+            </Button>
           </SettingsCard>
         ) : null}
         {areDeveloperAppsEnabled ? <DeveloperAppsSettingsCard /> : null}
       </div>
       <div className={styles.version}>
         <Button
-          className={styles.signOutButton}
-          textClassName={styles.signOutButtonText}
-          iconClassName={styles.signOutButtonIcon}
-          type={ButtonType.COMMON_ALT}
-          text={messages.signOut}
-          name='sign-out'
-          leftIcon={<IconSignOut />}
+          variant='common'
+          iconLeft={IconSignOut}
           onClick={openSignOutModal}
-        />
+          css={(theme) => ({ marginBottom: theme.spacing.l })}
+        >
+          {messages.signOut}
+        </Button>
         <span>{`${messages.version} ${version}`}</span>
         <span>
           {messages.copyright} -{' '}
@@ -511,27 +492,30 @@ export const SettingsPage = (props: SettingsPageProps) => {
         </Link>
       </div>
       <Modal
-        title={
-          <>
-            Hold Up! <i className='emoji waving-hand-sign' />
-          </>
-        }
         isOpen={isSignOutModalVisible}
         onClose={closeSignOutModal}
-        showTitleHeader
-        showDismissButton
-        bodyClassName={styles.modalBody}
-        headerContainerClassName={styles.modalHeader}
-        titleClassName={styles.modalTitle}
+        size='small'
       >
-        <ConfirmationBox
-          text={SIGN_OUT_MODAL_TEXT}
-          rightText='NEVERMIND'
-          leftText='SIGN OUT'
-          leftName='confirm-sign-out'
-          rightClick={closeSignOutModal}
-          leftClick={handleSignOut}
-        />
+        <ModalHeader>
+          <ModalTitle
+            title={
+              <>
+                Hold Up! <i className='emoji waving-hand-sign' />
+              </>
+            }
+          />
+        </ModalHeader>
+        <ModalContent>
+          <ModalContentText>{messages.signOutModalText}</ModalContentText>
+          <ModalFooter>
+            <Button variant='secondary' onClick={closeSignOutModal} fullWidth>
+              Nevermind
+            </Button>
+            <Button variant='primary' onClick={handleSignOut} fullWidth>
+              Sign Out
+            </Button>
+          </ModalFooter>
+        </ModalContent>
       </Modal>
       <ChangePasswordModal
         isOpen={isChangePasswordModalVisible}
diff --git a/packages/web/src/pages/settings-page/components/mobile/AccountSettingsPage.tsx b/packages/web/src/pages/settings-page/components/mobile/AccountSettingsPage.tsx
index 5e12f661b75..cfa955b69c7 100644
--- a/packages/web/src/pages/settings-page/components/mobile/AccountSettingsPage.tsx
+++ b/packages/web/src/pages/settings-page/components/mobile/AccountSettingsPage.tsx
@@ -2,7 +2,6 @@ import { useState, useContext, useCallback } from 'react'
 
 import { Name, SquareSizes } from '@audius/common/models'
 import {
-  Modal,
   Button,
   IconVerified,
   IconRecoveryEmail,
@@ -19,9 +18,9 @@ import { debounce } from 'lodash'
 import { make, useRecord } from 'common/store/analytics/actions'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
-import SignOutPage from 'components/nav/mobile/SignOut'
 import { ToastContext } from 'components/toast/ToastContext'
 import { useUserProfilePicture } from 'hooks/useUserProfilePicture'
+import SignOutModal from 'pages/settings-page/components/mobile/SignOutModal'
 import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance'
 import {
   ACCOUNT_VERIFICATION_SETTINGS_PAGE,
@@ -62,8 +61,7 @@ const messages = {
   signOut:
     'Make sure you have your account recovery email stored somewhere safe before signing out!',
   emailSent: 'Email Sent!',
-  emailNotSent: 'Something broke! Please try again!',
-  holdUp: 'HOLD UP!'
+  emailNotSent: 'Something broke! Please try again!'
 }
 
 type AccountSettingsItemProps = {
@@ -232,17 +230,10 @@ const AccountSettingsPage = ({
           buttonTitle={messages.signOutButtonTitle}
           onClick={() => setShowModalSignOut(true)}
         />
-        <Modal
-          showTitleHeader
-          showDismissButton
-          title={messages.holdUp}
+        <SignOutModal
           isOpen={showModalSignOut}
-          allowScroll={false}
-          bodyClassName={styles.modal}
           onClose={() => setShowModalSignOut(false)}
-        >
-          <SignOutPage onClickBack={() => setShowModalSignOut(false)} />
-        </Modal>
+        />
       </div>
     </MobilePageContainer>
   )
diff --git a/packages/web/src/pages/settings-page/components/mobile/SignOutModal.tsx b/packages/web/src/pages/settings-page/components/mobile/SignOutModal.tsx
new file mode 100644
index 00000000000..56b2cba96e3
--- /dev/null
+++ b/packages/web/src/pages/settings-page/components/mobile/SignOutModal.tsx
@@ -0,0 +1,68 @@
+import { useCallback } from 'react'
+
+import { Name } from '@audius/common/models'
+import { signOutActions } from '@audius/common/store'
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalContentText,
+  ModalFooter,
+  ModalHeader,
+  ModalProps,
+  ModalTitle
+} from '@audius/harmony'
+import { useDispatch } from 'react-redux'
+
+import { make, useRecord } from 'common/store/analytics/actions'
+
+const { signOut } = signOutActions
+
+const messages = {
+  title: 'Hold Up!',
+  nevermind: 'Nevermind',
+  signOut: 'Sign Out',
+  signOutButton: 'Sign Out',
+  confirmSignOut: 'Are you sure you want to sign out?',
+  warning:
+    'Double check that you have an account recovery email just in case (resend from your settings).'
+}
+
+type SignOutModalProps = Omit<ModalProps, 'children'>
+
+const SignOutModal = (props: SignOutModalProps) => {
+  const { onClose } = props
+  const record = useRecord()
+  const dispatch = useDispatch()
+
+  const handleSignOut = useCallback(() => {
+    record(
+      make(Name.SETTINGS_LOG_OUT, {
+        callback: () => dispatch(signOut())
+      })
+    )
+  }, [record, dispatch])
+
+  return (
+    <Modal {...props}>
+      <ModalHeader>
+        <ModalTitle title={messages.title} />
+      </ModalHeader>
+      <ModalContent>
+        <ModalContentText>{messages.confirmSignOut}</ModalContentText>
+
+        <ModalContentText>{messages.warning}</ModalContentText>
+      </ModalContent>
+      <ModalFooter>
+        <Button variant='primary' onClick={onClose} fullWidth>
+          {messages.nevermind}
+        </Button>
+        <Button variant='secondary' onClick={handleSignOut} fullWidth>
+          {messages.signOutButton}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}
+
+export default SignOutModal
diff --git a/packages/web/src/pages/sign-on/components/ProfileForm.module.css b/packages/web/src/pages/sign-on/components/ProfileForm.module.css
index 89a753d1a06..74f8f81c054 100644
--- a/packages/web/src/pages/sign-on/components/ProfileForm.module.css
+++ b/packages/web/src/pages/sign-on/components/ProfileForm.module.css
@@ -132,11 +132,6 @@
   top: 34px;
 }
 
-.continueButton .continueButtonText {
-  font-weight: var(--font-bold);
-  font-size: var(--font-l);
-}
-
 .handleInput :global(.placeholder) {
   padding-left: 20px;
 }
@@ -223,14 +218,3 @@
   margin-bottom: 20px;
   overflow: hidden;
 }
-
-.spinner {
-  display: block;
-  height: 18px;
-  width: 18px;
-  margin: 3px;
-}
-
-.spinner g path {
-  stroke: var(--white) !important;
-}
diff --git a/packages/web/src/pages/sign-on/components/ProfileForm.tsx b/packages/web/src/pages/sign-on/components/ProfileForm.tsx
index 8e715daac0a..74c1cd84079 100644
--- a/packages/web/src/pages/sign-on/components/ProfileForm.tsx
+++ b/packages/web/src/pages/sign-on/components/ProfileForm.tsx
@@ -6,8 +6,7 @@ import {
   MAX_DISPLAY_NAME_LENGTH
 } from '@audius/common/services'
 import { getErrorMessage } from '@audius/common/utils'
-import { IconArrowRight } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconArrowRight } from '@audius/harmony'
 import cn from 'classnames'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { Spring } from 'react-spring/renderprops.cjs'
@@ -17,7 +16,6 @@ import Input from 'components/data-entry/Input'
 import InstagramAuth, {
   InstagramAuthProps
 } from 'components/instagram-auth/InstagramAuth'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import ProfilePicture from 'components/profile-picture/ProfilePicture'
 import { StatusMessage } from 'components/status-message/StatusMessage'
 import { TwitterAuthProps } from 'components/twitter-auth/TwitterAuth'
@@ -262,22 +260,15 @@ const ProfileForm = (props: ProfileFormProps) => {
         ) : null}
       </div>
       <Button
-        text='Continue'
+        variant='primary'
         name='continue'
-        minWidth={160}
-        rightIcon={
-          shouldShowLoadingSpinner ? (
-            <LoadingSpinner className={styles.spinner} />
-          ) : (
-            <IconArrowRight />
-          )
-        }
-        type={profileValid ? ButtonType.PRIMARY_ALT : ButtonType.DISABLED}
-        isDisabled={!profileValid}
+        isLoading={shouldShowLoadingSpinner}
+        iconRight={IconArrowRight}
+        disabled={!profileValid}
         onClick={onContinue}
-        textClassName={styles.continueButtonText}
-        className={cn(styles.continueButton)}
-      />
+      >
+        Continue
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/sign-on/components/desktop/AppCTA.module.css b/packages/web/src/pages/sign-on/components/desktop/AppCTA.module.css
index 9c5efd5f2dd..30ac71b07df 100644
--- a/packages/web/src/pages/sign-on/components/desktop/AppCTA.module.css
+++ b/packages/web/src/pages/sign-on/components/desktop/AppCTA.module.css
@@ -49,8 +49,3 @@
   width: 272px;
   animation: QRAnim 0.6s cubic-bezier(0.24, 1.84, 0.43, 1.01);
 }
-
-.continueButton .continueButtonText {
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-}
diff --git a/packages/web/src/pages/sign-on/components/desktop/AppCTA.tsx b/packages/web/src/pages/sign-on/components/desktop/AppCTA.tsx
index 3950011504e..b1d89ca4f0b 100644
--- a/packages/web/src/pages/sign-on/components/desktop/AppCTA.tsx
+++ b/packages/web/src/pages/sign-on/components/desktop/AppCTA.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react'
 
-import { IconArrowRight } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconArrowRight } from '@audius/harmony'
 import cn from 'classnames'
 
 import QRCode from 'assets/img/imageQR.png'
@@ -54,14 +53,13 @@ const AppCTA = ({ onNextPage }: AppCTAProps) => {
         {messages.qrInstruction}
       </Subtitle>
       <Button
-        text='Continue'
+        variant='primary'
         name='continue'
-        rightIcon={<IconArrowRight />}
-        type={ButtonType.PRIMARY_ALT}
+        iconRight={IconArrowRight}
         onClick={onNextPage}
-        textClassName={styles.continueButtonText}
-        className={styles.continueButton}
-      />
+      >
+        Continue
+      </Button>
     </div>
   )
 }
diff --git a/packages/web/src/pages/sign-on/components/desktop/EmailPage.tsx b/packages/web/src/pages/sign-on/components/desktop/EmailPage.tsx
index 74b14be50e4..c4b1de81085 100644
--- a/packages/web/src/pages/sign-on/components/desktop/EmailPage.tsx
+++ b/packages/web/src/pages/sign-on/components/desktop/EmailPage.tsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react'
 
-import { IconArrowRight } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
+import { Button, IconArrowRight } from '@audius/harmony'
 import cn from 'classnames'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { Spring } from 'react-spring/renderprops.cjs'
 
 import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import Input from 'components/data-entry/Input'
-import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import PreloadImage from 'components/preload-image/PreloadImage'
 import { StatusMessage } from 'components/status-message/StatusMessage'
 import { useDelayedEffect } from 'hooks/useDelayedEffect'
@@ -162,24 +160,15 @@ export const EmailPage = ({
       ) : null}
       <div className={styles.buttonsContainer}>
         <Button
-          size={ButtonSize.MEDIUM}
-          text='Continue'
+          variant='primary'
           name='continue'
-          rightIcon={
-            shouldDisableInputs && shouldShowLoadingSpinner ? (
-              <LoadingSpinner className={styles.spinner} />
-            ) : (
-              <IconArrowRight />
-            )
-          }
-          type={
-            shouldDisableInputs ? ButtonType.DISABLED : ButtonType.PRIMARY_ALT
-          }
+          isLoading={shouldDisableInputs && shouldShowLoadingSpinner}
+          iconRight={IconArrowRight}
           onClick={onClickSubmit}
-          textClassName={styles.signInButtonText}
-          className={styles.signInButton}
-          isDisabled={shouldDisableInputs}
-        />
+          disabled={shouldDisableInputs}
+        >
+          Continue
+        </Button>
         {hasMetaMask ? (
           <MetaMaskOption
             text='Sign Up With'
@@ -193,10 +182,11 @@ export const EmailPage = ({
               [styles.hasAccountErrMetaMask]: hasMetaMask && showError,
               [styles.hasAccountErr]: !hasMetaMask && showError
             })}
-            type={ButtonType.COMMON_ALT}
-            text={'Have an Account? Sign In'}
+            variant='secondary'
             onClick={onSignIn}
-          />
+          >
+            Have an Account? Sign In
+          </Button>
         </div>
         <div className={styles.forgotPasswordTextContainer}>
           <span
diff --git a/packages/web/src/pages/something-wrong/SomethingWrong.tsx b/packages/web/src/pages/something-wrong/SomethingWrong.tsx
index 20d936a457a..9e0651087ca 100644
--- a/packages/web/src/pages/something-wrong/SomethingWrong.tsx
+++ b/packages/web/src/pages/something-wrong/SomethingWrong.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import { Button, ButtonType } from '@audius/stems'
+import { Button } from '@audius/harmony'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
@@ -61,12 +61,12 @@ export const SomethingWrong = () => {
         </div>
         <div className={styles.cta}>
           <Button
-            className={styles.buttonFormatting}
-            textClassName={styles.buttonText}
-            type={ButtonType.PRIMARY_ALT}
-            text={messages.cta}
+            variant='primary'
+            fullWidth={isMobile}
             onClick={handleClickRetry}
-          />
+          >
+            {messages.cta}
+          </Button>
         </div>
       </div>
     </div>
diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
index 040626d7714..4dfb7359abf 100644
--- a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
@@ -33,9 +33,9 @@ import {
   IconPlay,
   IconSpecialAccess,
   IconCart,
-  Box
+  Box,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import { shallowEqual, useSelector } from 'react-redux'
 
@@ -86,25 +86,26 @@ const PlayButton = ({ disabled, playing, onPlay }: PlayButtonProps) => {
   return (
     <Button
       disabled={disabled}
-      type={ButtonType.PRIMARY_ALT}
-      text={playing ? messages.pause : messages.play}
-      leftIcon={playing ? <IconPause /> : <IconPlay />}
+      variant='primary'
+      iconLeft={playing ? IconPause : IconPlay}
       onClick={onPlay}
-      size={ButtonSize.LARGE}
       fullWidth
-    />
+    >
+      {playing ? messages.pause : messages.play}
+    </Button>
   )
 }
 
 const PreviewButton = ({ playing, onPlay }: PlayButtonProps) => {
   return (
     <Button
-      type={ButtonType.SECONDARY}
-      text={playing ? messages.pause : messages.preview}
-      leftIcon={playing ? <IconPause /> : <IconPlay />}
+      variant='secondary'
+      iconLeft={playing ? IconPause : IconPlay}
       onClick={onPlay}
       fullWidth
-    />
+    >
+      {playing ? messages.pause : messages.preview}
+    </Button>
   )
 }
 
diff --git a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/actions.ts b/packages/web/src/store/application/ui/setAsArtistPickConfirmation/actions.ts
deleted file mode 100644
index 3ed0253dffc..00000000000
--- a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/actions.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ID } from '@audius/common/models'
-
-// actions
-export const SHOW_SET_AS_ARTIST_PICK_CONFIRMATION = 'SET_AS_ARTIST_PICK/SHOW'
-export const HIDE_SET_AS_ARTIST_PICK_CONFIRMATION = 'SET_AS_ARTIST_PICK/HIDE'
-
-// action creators
-export const showSetAsArtistPickConfirmation = (trackId?: ID) => ({
-  type: SHOW_SET_AS_ARTIST_PICK_CONFIRMATION,
-  trackId
-})
-
-export const cancelSetAsArtistPick = () => ({
-  type: HIDE_SET_AS_ARTIST_PICK_CONFIRMATION
-})
-
-export type ShowSetAsArtistPickConfirmation = ReturnType<
-  typeof showSetAsArtistPickConfirmation
->
-export type CancelSetAsArtistPick = ReturnType<typeof cancelSetAsArtistPick>
-
-// action interfaces
-export type SetAsArtistPickConfirmationAction =
-  | ShowSetAsArtistPickConfirmation
-  | CancelSetAsArtistPick
diff --git a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/reducer.ts b/packages/web/src/store/application/ui/setAsArtistPickConfirmation/reducer.ts
deleted file mode 100644
index e1bebd4bfbb..00000000000
--- a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/reducer.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as pinTrackActions from 'store/application/ui/setAsArtistPickConfirmation/actions'
-import { makeReducer } from 'utils/reducer'
-
-import { SetAsArtistPickConfirmationState } from './types'
-
-const initialState: SetAsArtistPickConfirmationState = {
-  isVisible: false
-}
-
-const actionMap = {
-  [pinTrackActions.SHOW_SET_AS_ARTIST_PICK_CONFIRMATION](
-    state: SetAsArtistPickConfirmationState,
-    action: pinTrackActions.ShowSetAsArtistPickConfirmation
-  ): SetAsArtistPickConfirmationState {
-    return {
-      isVisible: true,
-      trackId: action.trackId
-    }
-  },
-  [pinTrackActions.HIDE_SET_AS_ARTIST_PICK_CONFIRMATION](
-    state: SetAsArtistPickConfirmationState,
-    action: pinTrackActions.CancelSetAsArtistPick
-  ): SetAsArtistPickConfirmationState {
-    return { isVisible: false }
-  }
-}
-
-export default makeReducer(actionMap, initialState)
diff --git a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/selectors.ts b/packages/web/src/store/application/ui/setAsArtistPickConfirmation/selectors.ts
deleted file mode 100644
index b6d336f20e8..00000000000
--- a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/selectors.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AppState } from 'store/types'
-
-export const getSetAsArtistPickConfirmation = (state: AppState) => {
-  return state.application.ui.setAsArtistPickConfirmation
-}
diff --git a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/types.ts b/packages/web/src/store/application/ui/setAsArtistPickConfirmation/types.ts
deleted file mode 100644
index 403f7b564b9..00000000000
--- a/packages/web/src/store/application/ui/setAsArtistPickConfirmation/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ID } from '@audius/common/models'
-
-export enum PinTrackAction {
-  ADD = 'ADD',
-  REMOVE = 'REMOVE',
-  UPDATE = 'UPDATE'
-}
-
-export interface SetAsArtistPickConfirmationState {
-  isVisible: boolean
-  trackId?: ID
-}
diff --git a/packages/web/src/store/reducers.ts b/packages/web/src/store/reducers.ts
index 70358334b8d..2cb1217d00e 100644
--- a/packages/web/src/store/reducers.ts
+++ b/packages/web/src/store/reducers.ts
@@ -25,7 +25,6 @@ import cookieBanner from 'store/application/ui/cookieBanner/reducer'
 import editFolderModal from 'store/application/ui/editFolderModal/slice'
 import notifications from 'store/application/ui/notifications/notificationsUISlice'
 import scrollLock from 'store/application/ui/scrollLock/reducer'
-import setAsArtistPickConfirmation from 'store/application/ui/setAsArtistPickConfirmation/reducer'
 import userListModal from 'store/application/ui/userListModal/slice'
 import dragndrop from 'store/dragndrop/slice'
 import error from 'store/errors/reducers'
@@ -81,7 +80,6 @@ const createRootReducer = (
         embedModal,
         firstUploadModal,
         scrollLock,
-        setAsArtistPickConfirmation,
         userListModal,
         visualizer,
         notifications
diff --git a/packages/web/src/store/types.ts b/packages/web/src/store/types.ts
index d1bf092796b..ad3b59f5506 100644
--- a/packages/web/src/store/types.ts
+++ b/packages/web/src/store/types.ts
@@ -37,7 +37,6 @@ import { CookieBannerState } from './application/ui/cookieBanner/types'
 import { EditFolderModalState } from './application/ui/editFolderModal/slice'
 import { NotificationsUIState } from './application/ui/notifications/notificationsUISlice'
 import { ScrollLockState } from './application/ui/scrollLock/types'
-import { SetAsArtistPickConfirmationState } from './application/ui/setAsArtistPickConfirmation/types'
 import { UserListModalState } from './application/ui/userListModal/types'
 import { DragnDropState } from './dragndrop/slice'
 const averageColor = averageColorReducer
@@ -69,7 +68,6 @@ export type AppState = CommonState & {
       embedModal: EmbedModalState
       firstUploadModal: FirstUploadModalState
       scrollLock: ScrollLockState
-      setAsArtistPickConfirmation: SetAsArtistPickConfirmationState
       stemsUpload: ReturnType<typeof StemsUploadReducer>
       userListModal: UserListModalState
       visualizer: ReturnType<typeof VisualizerReducer>