diff --git a/packages/harmony/src/components/index.ts b/packages/harmony/src/components/index.ts
index cdf02b10b46..dc5e13683c5 100644
--- a/packages/harmony/src/components/index.ts
+++ b/packages/harmony/src/components/index.ts
@@ -15,3 +15,5 @@ export * from './radio'
 export * from './radio-group'
 export * from './popup-menu'
 export * from './modal'
+export * from './progress-bar'
+export * from './scrubber'
diff --git a/packages/stems/src/components/ProgressBar/ProgressBar.module.css b/packages/harmony/src/components/progress-bar/ProgressBar.module.css
similarity index 62%
rename from packages/stems/src/components/ProgressBar/ProgressBar.module.css
rename to packages/harmony/src/components/progress-bar/ProgressBar.module.css
index 59502726d31..f01641475af 100644
--- a/packages/stems/src/components/ProgressBar/ProgressBar.module.css
+++ b/packages/harmony/src/components/progress-bar/ProgressBar.module.css
@@ -5,7 +5,7 @@
 }
 
 .slider {
-  background-color: var(--neutral-light-9);
+  background-color: var(--harmony-n-50);
   box-shadow: inset 1px 1px 7px -2px rgba(53, 54, 79, 0.25);
   border-radius: 22px;
   height: 24px;
@@ -14,11 +14,7 @@
 }
 
 .sliderBar {
-  background: linear-gradient(
-    315deg,
-    var(--page-header-gradient-color-1) 2.04%,
-    var(--page-header-gradient-color-2) 100%
-  );
+  background: var(--harmony-gradient);
   bottom: 0;
   left: 0;
   position: absolute;
@@ -28,7 +24,7 @@
 
 .labels {
   display: flex;
-  font-size: var(--font-s);
+  font-size: var(--harmony-font-s);
   justify-content: space-between;
   margin-top: 8px;
   padding: 0 4px;
@@ -36,6 +32,6 @@
 
 .minLabel,
 .maxLabel {
-  color: var(--neutral-light-4);
-  font-weight: var(--font-bold);
+  color: var(--harmony-text-subdued);
+  font-weight: var(--harmony-font-bold);
 }
diff --git a/packages/stems/src/components/ProgressBar/ProgressBar.tsx b/packages/harmony/src/components/progress-bar/ProgressBar.tsx
similarity index 77%
rename from packages/stems/src/components/ProgressBar/ProgressBar.tsx
rename to packages/harmony/src/components/progress-bar/ProgressBar.tsx
index 2ec3d4d2600..3c4427cc591 100644
--- a/packages/stems/src/components/ProgressBar/ProgressBar.tsx
+++ b/packages/harmony/src/components/progress-bar/ProgressBar.tsx
@@ -1,11 +1,8 @@
 import { useState, useEffect, useMemo } from 'react'
-import * as React from 'react'
 
 import BN from 'bn.js'
 import cn from 'classnames'
 
-import { clampBN } from 'utils/bnHelpers'
-
 import styles from './ProgressBar.module.css'
 import { ProgressBarProps, ProgressValue } from './types'
 
@@ -14,18 +11,24 @@ const getBN = (num: ProgressValue): BN => {
   return new BN(num)
 }
 
-export const ProgressBar: React.FC<ProgressBarProps> = ({
-  className,
-  sliderClassName,
-  sliderBarClassName,
-  min = new BN(0),
-  max = new BN(100),
-  value,
-  showLabels = false,
-  minWrapper: MinWrapper,
-  maxWrapper: MaxWrapper,
-  ...other
-}: ProgressBarProps) => {
+function clampBN(value: BN, min: BN, max: BN): BN {
+  return BN.min(BN.max(value, min), max)
+}
+
+// @beta - This component was directly ported from stems and subject to change
+export const ProgressBar = (props: ProgressBarProps) => {
+  const {
+    className,
+    sliderClassName,
+    sliderBarClassName,
+    min = new BN(0),
+    max = new BN(100),
+    value,
+    showLabels = false,
+    minWrapper: MinWrapper,
+    maxWrapper: MaxWrapper,
+    ...other
+  } = props
   const [sliderWidth, setSliderWidth] = useState(0)
 
   const percentage = useMemo(() => {
diff --git a/packages/stems/src/components/ProgressBar/index.ts b/packages/harmony/src/components/progress-bar/index.ts
similarity index 100%
rename from packages/stems/src/components/ProgressBar/index.ts
rename to packages/harmony/src/components/progress-bar/index.ts
diff --git a/packages/stems/src/components/ProgressBar/types.ts b/packages/harmony/src/components/progress-bar/types.ts
similarity index 100%
rename from packages/stems/src/components/ProgressBar/types.ts
rename to packages/harmony/src/components/progress-bar/types.ts
diff --git a/packages/stems/src/components/Scrubber/Scrubber.module.css b/packages/harmony/src/components/scrubber/Scrubber.module.css
similarity index 59%
rename from packages/stems/src/components/Scrubber/Scrubber.module.css
rename to packages/harmony/src/components/scrubber/Scrubber.module.css
index a77745d48c1..e7c9f97c18e 100644
--- a/packages/stems/src/components/Scrubber/Scrubber.module.css
+++ b/packages/harmony/src/components/scrubber/Scrubber.module.css
@@ -4,11 +4,12 @@
   width: 100%;
 }
 
-.timestampStart, .timestampEnd {
-  color: var(--neutral);
-  font-size: var(--font-2xs);
+.timestampStart,
+.timestampEnd {
+  color: var(--harmony-neutral);
+  font-size: var(--harmony-font-2xs);
   line-height: 12px;
-  font-family: var(--font-family);
+  font-family: var(--harmony-font-family);
   min-width: 40px;
 }
 
@@ -22,5 +23,5 @@
 
 .scrubber.isMobile .timestampStart,
 .scrubber.isMobile .timestampEnd {
-  font-size: var(--font-xs);
+  font-size: var(--harmony-font-xs);
 }
diff --git a/packages/stems/src/components/Scrubber/Scrubber.tsx b/packages/harmony/src/components/scrubber/Scrubber.tsx
similarity index 97%
rename from packages/stems/src/components/Scrubber/Scrubber.tsx
rename to packages/harmony/src/components/scrubber/Scrubber.tsx
index 6add6f07db7..570b3cc8dea 100644
--- a/packages/stems/src/components/Scrubber/Scrubber.tsx
+++ b/packages/harmony/src/components/scrubber/Scrubber.tsx
@@ -24,6 +24,7 @@ const formatSeconds = (seconds: number) => {
 }
 
 /**
+ * @beta - This component was directly ported from stems and subject to change
  * Wraps the `<Slider />` component and provides timestamp indicators.
  */
 export const Scrubber = ({
diff --git a/packages/stems/src/components/Scrubber/Slider.module.css b/packages/harmony/src/components/scrubber/Slider.module.css
similarity index 65%
rename from packages/stems/src/components/Scrubber/Slider.module.css
rename to packages/harmony/src/components/scrubber/Slider.module.css
index 2114e6c9b0e..2590cc5eb36 100644
--- a/packages/stems/src/components/Scrubber/Slider.module.css
+++ b/packages/harmony/src/components/scrubber/Slider.module.css
@@ -4,23 +4,23 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  margin: 0 var(--unit-3);
+  margin: 0 var(--harmony-unit-3);
 }
 
 .slider.isMobile {
-  margin: 0 var(--unit-4);
+  margin: 0 var(--harmony-unit-4);
 }
 
 .slider.isDisabled {
-  cursor: default
+  cursor: default;
 }
 
 /* Use a psuedo-element to "increase" the clickable area of the scrubber. */
 .slider.expandedTargets:after {
   position: absolute;
   opacity: 0;
-  border-radius: var(--unit-half);;
-  content: "";
+  border-radius: var(--harmony-unit-half);
+  content: '';
   width: 100%;
   height: 500%;
   top: -300%;
@@ -30,9 +30,9 @@
 .rail {
   position: relative;
   width: 100%;
-  height: var(--unit);
-  border-radius: var(--unit-half);
-  background: var(--neutral-light-8);
+  height: var(--harmony-unit);
+  border-radius: var(--harmony-unit-half);
+  background: var(--harmony-n-100);
   overflow: hidden;
   /** Fixes Safari bug where overflow doesn't work with border radius during animation */
   mask-image: -webkit-radial-gradient(white, black);
@@ -51,14 +51,14 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: var(--neutral);
+  background: var(--harmony-neutral);
 }
 
 .track:before {
-  content: "";
+  content: '';
   position: absolute;
-  border-radius: var(--unit-half);
-  background: var(--scrubber-hover);
+  border-radius: var(--harmony-unit-half);
+  background: var(--harmony-primary-gradient);
   width: 100%;
   height: 100%;
   left: 0;
@@ -85,24 +85,26 @@
 }
 
 .handle {
-  margin-left: var(--negative-unit);
-  height: var(--unit-2);
-  width: var(--unit-2);
+  margin-left: var(--harmony-negative-unit);
+  height: var(--harmony-unit-2);
+  width: var(--harmony-unit-2);
   border-radius: 50%;
-  background: var(--white);
-  box-shadow: 0 0 2px 0 rgba(133,129,153,0.5), 0 2px 5px -1px rgba(133,129,153,0.5);
+  background: var(--harmony-white);
+  box-shadow: 0 0 2px 0 rgba(133, 129, 153, 0.5),
+    0 2px 5px -1px rgba(133, 129, 153, 0.5);
   transition: transform 0.18s ease-in-out, opacity 0.18s ease-in-out;
   opacity: 0;
   transform: scale(0);
 }
 
 .slider.isMobile .handle {
-  height: var(--unit-4);
-  width: var(--unit-4);
-  margin-left: var(--negative-unit-2);
+  height: var(--harmony-unit-4);
+  width: var(--harmony-unit-4);
+  margin-left: calc(var(--harmony-negative-unit) * 2);
 }
 
-.showHandle .handle, .slider:not(.showHandle):hover .handle {
+.showHandle .handle,
+.slider:not(.showHandle):hover .handle {
   opacity: 1;
   transform: scale(1);
 }
diff --git a/packages/stems/src/components/Scrubber/Slider.tsx b/packages/harmony/src/components/scrubber/Slider.tsx
similarity index 100%
rename from packages/stems/src/components/Scrubber/Slider.tsx
rename to packages/harmony/src/components/scrubber/Slider.tsx
diff --git a/packages/stems/src/components/Scrubber/hooks.ts b/packages/harmony/src/components/scrubber/hooks.ts
similarity index 100%
rename from packages/stems/src/components/Scrubber/hooks.ts
rename to packages/harmony/src/components/scrubber/hooks.ts
diff --git a/packages/stems/src/components/Scrubber/index.ts b/packages/harmony/src/components/scrubber/index.ts
similarity index 100%
rename from packages/stems/src/components/Scrubber/index.ts
rename to packages/harmony/src/components/scrubber/index.ts
diff --git a/packages/stems/src/components/Scrubber/types.ts b/packages/harmony/src/components/scrubber/types.ts
similarity index 100%
rename from packages/stems/src/components/Scrubber/types.ts
rename to packages/harmony/src/components/scrubber/types.ts
diff --git a/packages/harmony/src/foundations/color/primitive.css b/packages/harmony/src/foundations/color/primitive.css
index c5cc4769d6a..2c684775306 100644
--- a/packages/harmony/src/foundations/color/primitive.css
+++ b/packages/harmony/src/foundations/color/primitive.css
@@ -51,6 +51,7 @@
   --harmony-dark-red: #bb0218;
   --harmony-green: #0f9e48;
   --harmony-light-green: #13c65a;
+  --harmony-primary-gradient: linear-gradient(135deg, #ee00ed 0%, #c514e0 100%);
   --harmony-gradient: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
 }
 
diff --git a/packages/stems/src/components/Button/Button.module.css b/packages/stems/src/components/Button/Button.module.css
deleted file mode 100644
index fe7d9d9dfb7..00000000000
--- a/packages/stems/src/components/Button/Button.module.css
+++ /dev/null
@@ -1,544 +0,0 @@
-.button {
-  box-sizing: border-box;
-  cursor: pointer;
-  user-select: none;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  transition: all var(--quick);
-  position: relative;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: var(--unit-6);
-  padding-right: var(--unit-6);
-}
-
-.button:focus {
-  outline: none !important;
-}
-
-.button.noIcon {
-  padding-left: var(--unit-8);
-  padding-right: var(--unit-8);
-}
-
-.button.medium {
-  height: var(--unit-12);
-}
-
-.button.small {
-  height: var(--unit-8);
-}
-
-.button.large {
-  padding: var(--unit-5) var(--unit-6);
-  height: var(--unit-15);
-  gap: var(--unit-2);
-}
-
-.button.large .textLabel {
-  font-size: var(--font-xl);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.25px;
-  line-height: var(--unit-5);
-  text-transform: uppercase;
-}
-
-.button.large .icon,
-.button.large .icon.left {
-  margin-right: 0;
-}
-
-.button.tiny {
-  height: var(--unit-7);
-  padding-left: var(--unit-4);
-  padding-right: var(--unit-4);
-}
-
-.button.medium .icon svg {
-  width: var(--unit-6);
-}
-
-.button.small .icon svg {
-  width: var(--unit-4);
-}
-
-.button.tiny .icon svg {
-  width: var(--unit-4);
-}
-
-.button .icon path {
-  fill: var(--neutral);
-  transition: all var(--quick);
-}
-
-.button .icon.left {
-  margin-right: var(--unit-3);
-}
-
-.button.small .icon.left {
-  margin-right: var(--unit-2);
-}
-
-.button .icon.left.noText {
-  margin: 0 !important;
-}
-
-.button .icon.right {
-  margin-left: var(--unit-3);
-}
-
-.button .icon.right.noText {
-  margin: 0 !important;
-}
-
-.button .icon {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.textLabel {
-  vertical-align: middle;
-  transition: all var(--quick);
-}
-
-.button .overlay {
-  background-color: var(--overlay-color, transparent);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: var(--overlay-opacity, 0);
-}
-
-/* Primary Button */
-
-.primary {
-  --button-color: var(--primary);
-  box-shadow: var(--shadow-near);
-  border: none;
-  border-radius: 4px;
-  background: var(--button-color);
-}
-
-.primary .textLabel {
-  color: var(--primary-secondary-text);
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-}
-
-.primary .icon path,
-.primary .icon use {
-  fill: var(--primary-secondary-text);
-}
-
-.primary.includeHoverAnimations:hover.enabled {
-  --overlay-color: var(--static-white);
-  --overlay-opacity: 0.1;
-  box-shadow: var(--shadow-mid);
-  transform: var(--grow);
-  background: var(--button-color);
-}
-
-.primary.includeHoverAnimations:active.enabled {
-  --overlay-color: var(--static-blck);
-  --overlay-opacity: 0.2;
-  box-shadow: none;
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-  background: var(--button-color);
-}
-
-/* PrimaryAlt Button */
-
-.primaryAlt {
-  height: 46px;
-  border: none;
-  border-radius: 4px;
-  background: var(--primary);
-}
-
-.primaryAlt .textLabel {
-  color: var(--primary-secondary-text);
-  font-size: var(--font-s);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
-}
-
-.primaryAlt .icon path,
-.primaryAlt .icon use {
-  fill: var(--primary-secondary-text);
-}
-
-.primaryAlt.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  background: var(--primary-light-1);
-}
-
-.primaryAlt.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-  background: var(--primary-dark-1);
-}
-
-/* Secondary Button */
-
-.secondary {
-  border: 1px solid var(--primary-dark-1);
-  border-radius: 4px;
-  background: var(--white);
-}
-
-.secondary .textLabel {
-  color: var(--primary);
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-}
-
-.secondary.small .textLabel {
-  font-size: var(--font-s);
-  letter-spacing: 0.5px;
-}
-
-.secondary.tiny .textLabel {
-  font-size: 11px;
-  letter-spacing: 0.3px;
-}
-
-.secondary .icon path,
-.secondary .icon use {
-  fill: var(--primary);
-}
-
-.secondary.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  border: 1px solid var(--primary-dark-2);
-  background: var(--primary);
-}
-
-.secondary.includeHoverAnimations:hover.enabled .textLabel {
-  color: var(--primary-secondary-text);
-}
-
-.secondary.includeHoverAnimations:hover.enabled .icon path,
-.secondary.includeHoverAnimations:hover.enabled .icon use {
-  fill: var(--primary-secondary-text);
-}
-
-.secondary.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-  border: 1px solid var(--primary-dark-2);
-  background: var(--primary-dark-2);
-}
-
-/* Tertiary Button */
-
-.tertiary {
-  background: var(--white);
-  border: 1px solid var(--neutral-light-7);
-  border-radius: 4px;
-}
-
-.tertiary .textLabel {
-  color: var(--secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-}
-
-.tertiary .icon path,
-.tertiary .icon use {
-  fill: var(--secondary);
-}
-
-.tertiary.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  background-color: var(--static-white);
-}
-
-.tertiary.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-}
-
-/* Common Button */
-
-.common {
-  border: 1px solid var(--neutral-light-6);
-  border-radius: 4px;
-  background: var(--white);
-}
-
-.common.small {
-  padding: 0 var(--unit-4);
-}
-
-.common .textLabel {
-  color: var(--neutral);
-  font-size: var(--font-s);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
-}
-
-.common.tiny .textLabel {
-  font-size: 11px;
-  letter-spacing: 0.3px;
-}
-
-.common .icon path,
-.common .icon use {
-  fill: var(--neutral);
-}
-
-.common.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  border: 1px solid var(--primary-dark-2);
-  background: var(--primary);
-}
-
-.common.includeHoverAnimations:hover.enabled .textLabel {
-  color: var(--primary-secondary-text);
-}
-
-.common.includeHoverAnimations:hover.enabled .icon path,
-.common.includeHoverAnimations:hover.enabled .icon use {
-  fill: var(--primary-secondary-text);
-}
-
-.common.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-  border: 1px solid var(--primary-dark-2);
-  background: var(--primary-dark-2);
-}
-
-.common.includeHoverAnimations:active.enabled .textLabel {
-  color: var(--primary-secondary-text);
-}
-
-.common.includeHoverAnimations:active.enabled .icon path {
-  fill: var(--primary-secondary-text);
-}
-
-/* Common Alt Button */
-
-.commonAlt {
-  border: 1px solid var(--neutral-light-6);
-  border-radius: 4px;
-  background: var(--white);
-}
-
-.commonAlt .textLabel {
-  color: var(--neutral);
-  font-size: var(--font-s);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
-}
-
-.commonAlt.small .textLabel {
-  font-size: var(--font-xs);
-}
-
-.commonAlt .icon path,
-.commonAlt .icon use {
-  fill: var(--neutral);
-}
-
-.commonAlt:hover.enabled {
-  transform: var(--grow);
-  border: 1px solid var(--neutral-light-6);
-  background: var(--neutral-light-10);
-}
-
-.commonAlt.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-  border: 1px solid var(--neutral-light-6);
-  background: var(--neutral-light-8);
-}
-
-/* Glass Button */
-
-.glass {
-  border: 1px solid var(--white);
-  border-radius: 4px;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.glass .textLabel {
-  text-transform: uppercase;
-  color: var(--white);
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-}
-
-.glass .icon path,
-.glass .icon use {
-  fill: var(--white);
-}
-
-.glass.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.glass.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(1, 1, 1);
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-/* Disabled Button */
-
-.disabled {
-  box-shadow: none;
-  border-radius: 4px;
-  background-color: var(--neutral-light-7);
-  cursor: default;
-  transform: none;
-  border: none;
-  pointer-events: none;
-}
-
-.disabled .textLabel {
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-  color: var(--white);
-}
-
-.disabled .icon path,
-.disabled .icon use {
-  fill: var(--white);
-}
-
-/* White Button */
-
-.white {
-  border: none;
-  border-radius: 4px;
-  background-color: var(--static-neutral-light-10);
-  box-shadow: 0 1px 0 0 var(--neutral-light-4),
-    0 4px 12px -4px rgba(0, 0, 0, 0.3);
-}
-
-.white .textLabel {
-  color: var(--secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-l);
-  font-weight: var(--font-demi-bold);
-}
-
-.white .icon path,
-.white .icon use {
-  fill: var(--secondary);
-}
-
-.white.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  background-color: var(--static-white);
-  box-shadow: 0 1px 0 0 var(--neutral-light-5),
-    0 5px 20px -3px rgba(0, 0, 0, 0.3);
-}
-
-.white.includeHoverAnimations:active.enabled {
-  background-color: #eeeeee;
-  box-shadow: 0 1px 0 0 var(--neutral-light-4),
-    0 4px 12px -4px rgba(0, 0, 0, 0.3);
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-}
-
-/* Text Button */
-.textButton {
-  background: none;
-  border: none;
-  outline: none;
-  padding: 8px 24px;
-  font-weight: var(--font-bold);
-}
-
-.textButton.button.medium,
-.textButton.button.small,
-.textButton.button.tiny {
-  height: unset;
-}
-
-.textButton.medium,
-.textButton.medium .textLabel {
-  font-size: var(--font-m);
-}
-.textButton.small,
-.textButton.small .textLabel {
-  font-size: var(--font-s);
-}
-.textButton.tiny,
-.textButton.tiny .textLabel {
-  font-size: var(--font-xs);
-}
-
-.textButton.button .icon svg {
-  width: calc(1em - 2px);
-  height: calc(1em - 2px);
-}
-
-.textButton:hover .textLabel {
-  color: var(--secondary);
-}
-
-.textButton .icon.left {
-  margin-right: var(--unit-1);
-}
-
-.textButton .icon.right {
-  margin-left: var(--unit-1);
-}
-
-.textButton .icon path {
-  transition: all var(--quick);
-}
-
-.textButton:hover .icon path {
-  fill: var(--secondary);
-}
-
-/** Destructive buttons **/
-.destructive {
-  background: transparent;
-  border: 1px solid var(--accent-red);
-  border-radius: var(--unit-1);
-}
-
-.destructive .textLabel {
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-  color: var(--accent-red);
-}
-
-.destructive .icon path {
-  fill: var(--accent-red);
-}
-
-/** destructive hover **/
-.destructive.includeHoverAnimations:hover.enabled {
-  transform: var(--grow);
-  background-color: var(--accent-red);
-}
-
-.destructive.includeHoverAnimations:active.enabled {
-  transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
-  background-color: var(--accent-red-dark-1);
-}
-
-.destructive.includeHoverAnimations:hover.enabled .textLabel {
-  color: white;
-}
-
-.destructive.includeHoverAnimations:hover.enabled .icon path {
-  fill: var(--static-white);
-}
-
-/** destructive disabled **/
-.destructive:disabled {
-  opacity: 0.45;
-}
-
-.fullWidth {
-  width: 100%;
-}
diff --git a/packages/stems/src/components/Button/Button.stories.tsx b/packages/stems/src/components/Button/Button.stories.tsx
deleted file mode 100644
index dba601ead1a..00000000000
--- a/packages/stems/src/components/Button/Button.stories.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { Button } from './Button'
-import { ButtonProps, Type } from './types'
-
-import { Size } from './index'
-
-export default {
-  component: Button,
-  title: 'Components/Button',
-  argTypes: { onClick: { action: 'clicked' } }
-}
-
-const baseProps: ButtonProps = {
-  text: 'Click Me'
-}
-
-const Template: Story<ButtonProps> = (args) => (
-  <div style={{ alignItems: 'center', display: 'flex', gap: '16px' }}>
-    <Button {...baseProps} size={Size.TINY} {...args} />
-    <Button {...baseProps} size={Size.SMALL} {...args} />
-    <Button {...baseProps} size={Size.MEDIUM} {...args} />
-    <Button {...baseProps} size={Size.LARGE} {...args} />
-  </div>
-)
-
-const BackgroundTemplate: Story<ButtonProps> = (args) => (
-  <div style={{ backgroundColor: '#555', padding: '16px' }}>
-    <Button {...baseProps} {...args} />
-  </div>
-)
-
-// Primary
-export const Primary = Template.bind({})
-
-// Disabled
-export const Disabled = Template.bind({})
-Disabled.args = { disabled: true }
-
-// Primary Alt
-export const PrimaryAlt = Template.bind({})
-PrimaryAlt.args = { type: Type.PRIMARY_ALT }
-
-// Primary w/ color
-export const PrimaryWithColor = Template.bind({})
-PrimaryWithColor.args = { color: 'accentBlue' }
-
-// Secondary
-export const Secondary = Template.bind({})
-Secondary.args = { type: Type.SECONDARY }
-
-// Common
-export const Common = Template.bind({})
-Common.args = { type: Type.COMMON }
-
-// Common Alt
-export const CommonAlt = Template.bind({})
-CommonAlt.args = { type: Type.COMMON_ALT }
-
-// Glass
-export const Glass = BackgroundTemplate.bind({})
-Glass.args = { type: Type.GLASS }
-
-// White
-export const White = Template.bind({})
-White.args = { type: Type.WHITE }
-
-// Text
-export const Text = Template.bind({})
-Text.args = { type: Type.TEXT }
-
-// Destructive
-export const Destructive = Template.bind({})
-Destructive.args = { type: Type.DESTRUCTIVE }
diff --git a/packages/stems/src/components/Button/Button.tsx b/packages/stems/src/components/Button/Button.tsx
deleted file mode 100644
index 9faa5ddad42..00000000000
--- a/packages/stems/src/components/Button/Button.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { forwardRef, CSSProperties, ElementType, ForwardedRef } from 'react'
-
-import cn from 'classnames'
-
-import { useMediaQueryListener } from 'hooks/useMediaQueryListener'
-import { CSSCustomProperties } from 'styles/types'
-import { toCSSVariableName } from 'utils/styles'
-
-import styles from './Button.module.css'
-import { ButtonProps, Type, Size } from './types'
-
-const SIZE_STYLE_MAP = {
-  [Size.TINY]: styles.tiny,
-  [Size.SMALL]: styles.small,
-  [Size.MEDIUM]: styles.medium,
-  [Size.LARGE]: styles.large
-}
-
-const TYPE_STYLE_MAP = {
-  [Type.PRIMARY]: styles.primary,
-  [Type.PRIMARY_ALT]: styles.primaryAlt,
-  [Type.SECONDARY]: styles.secondary,
-  [Type.TERTIARY]: styles.tertiary,
-  [Type.COMMON]: styles.common,
-  [Type.COMMON_ALT]: styles.commonAlt,
-  [Type.DISABLED]: styles.disabled,
-  [Type.GLASS]: styles.glass,
-  [Type.WHITE]: styles.white,
-  [Type.TEXT]: styles.textButton,
-  [Type.DESTRUCTIVE]: styles.destructive
-}
-
-/**
- * @deprecated
- * Deprecated: (use `Button` from \@audius/harmony)
- *
- * A common Button component. Includes a few variants and options to
- * include and position icons.
- */
-export const Button = forwardRef(function Button<
-  Component extends ElementType = 'button'
->(props: ButtonProps<Component>, ref: ForwardedRef<HTMLButtonElement>) {
-  const {
-    color,
-    text,
-    type = Type.PRIMARY,
-    buttonType,
-    size = Size.MEDIUM,
-    leftIcon,
-    rightIcon,
-    isDisabled,
-    disabled: disabledProp,
-    includeHoverAnimations = true,
-    widthToHideText,
-    minWidth,
-    className,
-    iconClassName,
-    textClassName,
-    'aria-label': ariaLabelProp,
-    fullWidth,
-    as,
-    ...other
-  } = props
-  const { isMatch: textIsHidden } = useMediaQueryListener(
-    `(max-width: ${widthToHideText}px)`
-  )
-  const disabled = disabledProp ?? isDisabled
-  const isTextVisible = !!text && !textIsHidden
-
-  const renderLeftIcon = () =>
-    leftIcon && (
-      <span
-        className={cn(iconClassName, styles.icon, styles.left, {
-          [styles.noText]: !isTextVisible
-        })}
-      >
-        {leftIcon}
-      </span>
-    )
-
-  const renderRightIcon = () =>
-    rightIcon && (
-      <span
-        className={cn(iconClassName, styles.icon, styles.right, {
-          [styles.noText]: !isTextVisible
-        })}
-      >
-        {rightIcon}
-      </span>
-    )
-
-  const getAriaLabel = () => {
-    if (ariaLabelProp) return ariaLabelProp
-    // Use the text prop as the aria-label if the text becomes hidden
-    // and no aria-label was provided to keep the button accessible.
-    else if (textIsHidden && typeof text === 'string') return text
-    return undefined
-  }
-
-  const renderText = () =>
-    isTextVisible && (
-      <span className={cn(styles.textLabel, textClassName)}>{text}</span>
-    )
-
-  const style: CSSCustomProperties = {
-    minWidth: minWidth && isTextVisible ? `${minWidth}px` : 'unset',
-    '--button-color': color ? `var(${toCSSVariableName(color)})` : undefined
-  }
-
-  const RootComponent: ElementType = as ?? 'button'
-
-  return (
-    <RootComponent
-      aria-label={getAriaLabel()}
-      className={cn(
-        styles.button,
-        SIZE_STYLE_MAP[size || Size.MEDIUM],
-        TYPE_STYLE_MAP[type || Type.COMMON],
-        {
-          [styles.noIcon]: !leftIcon && !rightIcon,
-          [styles.disabled]: disabled,
-          [styles.enabled]: !disabled,
-          [styles.includeHoverAnimations]: includeHoverAnimations,
-          [styles.fullWidth]: fullWidth
-        },
-        className
-      )}
-      disabled={disabled}
-      type={buttonType}
-      ref={ref}
-      style={style as CSSProperties}
-      {...other}
-    >
-      {color ? <span className={styles.overlay} /> : null}
-      {renderLeftIcon()}
-      {renderText()}
-      {renderRightIcon()}
-    </RootComponent>
-  )
-})
diff --git a/packages/stems/src/components/Button/index.ts b/packages/stems/src/components/Button/index.ts
deleted file mode 100644
index 1148be17d1d..00000000000
--- a/packages/stems/src/components/Button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Button } from './Button'
-export { ButtonProps, Type, Size } from './types'
diff --git a/packages/stems/src/components/Button/test.ts b/packages/stems/src/components/Button/test.ts
deleted file mode 100644
index f2d299fc54d..00000000000
--- a/packages/stems/src/components/Button/test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Button } from '.'
-
-describe('Button', () => {
-  it('is truthy', () => {
-    expect(Button).toBeTruthy()
-  })
-})
diff --git a/packages/stems/src/components/Button/types.ts b/packages/stems/src/components/Button/types.ts
deleted file mode 100644
index 4a35e6a6e61..00000000000
--- a/packages/stems/src/components/Button/types.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
-
-import { ColorValue } from 'styles/colors'
-
-export enum Type {
-  PRIMARY = 'primary',
-  PRIMARY_ALT = 'primaryAlt',
-  SECONDARY = 'secondary',
-  TERTIARY = 'tertiary',
-  COMMON = 'common',
-  COMMON_ALT = 'commonAlt',
-  DISABLED = 'disabled',
-  GLASS = 'glass',
-  WHITE = 'white',
-  TEXT = 'text',
-  DESTRUCTIVE = 'destructive'
-}
-
-export enum Size {
-  TINY = 'tiny',
-  SMALL = 'small',
-  MEDIUM = 'medium',
-  LARGE = 'large'
-}
-
-type ButtonOwnProps<Component extends ElementType = 'button'> = {
-  as?: Component
-  color?: ColorValue
-  /**
-   * The text of the button
-   */
-  text: ReactNode
-
-  /**
-   * The type of the button
-   */
-  type?: Type
-
-  /**
-   * The default behavior of the button.
-   */
-  buttonType?: 'submit' | 'button' | 'reset'
-
-  /**
-   * The button size
-   */
-  size?: Size
-
-  /**
-   * Optional icon element to include on the left side of the button
-   */
-  leftIcon?: ReactNode | JSX.Element
-
-  /**
-   * Optional icon element to include on the right side of the button
-   */
-  rightIcon?: ReactNode | JSX.Element
-
-  /**
-   * Whether or not the button is clickable
-   */
-  isDisabled?: boolean
-
-  /**
-   * Whether or not to include animations on hover
-   * Consider turning off animations in mobile-first experiences
-   */
-  includeHoverAnimations?: boolean
-
-  /**
-   * The max width at which text will still be shown
-   */
-  widthToHideText?: number
-
-  /**
-   * Optional min width
-   * Min width can be useful if the button is switching states and you want
-   * to keep a certain width while text length changes
-   */
-  minWidth?: number
-
-  /**
-   * If provided, allow button to take up full width of container
-   */
-  fullWidth?: boolean
-
-  /**
-   * Class name to apply to the icon
-   */
-  iconClassName?: string
-
-  /**
-   * Class name to apply to the text label
-   */
-  textClassName?: string
-}
-
-export type ButtonProps<Component extends ElementType = 'button'> =
-  ButtonOwnProps<Component> &
-    Omit<ComponentPropsWithoutRef<Component>, keyof ButtonOwnProps>
diff --git a/packages/stems/src/components/MarkdownViewer/MarkdownViewer.stories.tsx b/packages/stems/src/components/MarkdownViewer/MarkdownViewer.stories.tsx
deleted file mode 100644
index b949a3260ed..00000000000
--- a/packages/stems/src/components/MarkdownViewer/MarkdownViewer.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { MarkdownViewer, MarkdownViewerProps } from '.'
-
-export default {
-  component: MarkdownViewer,
-  title: 'Components/MarkdownViewer'
-}
-
-const defaultProps: MarkdownViewerProps = {
-  markdown: `
-# Hello
-Good morning
-
-## Section 1
-
-1. This
-2. Is
-3. An ordered list
-    1. And
-    2. A
-    3. Sublist
-
-You can also **bold** and _italicize_ things.
-And make
-
-* Bullet1
-* Bullet2
-* Bullet3
-
-## Appendix
-
-Read more here: [link](https://example.com)
-  `
-}
-
-const Template: Story<MarkdownViewerProps> = (args) => {
-  return <MarkdownViewer {...defaultProps} {...args} />
-}
-
-// Default
-export const Default = Template.bind({})
diff --git a/packages/stems/src/components/PillButton/PillButton.module.css b/packages/stems/src/components/PillButton/PillButton.module.css
deleted file mode 100644
index bd097f6848f..00000000000
--- a/packages/stems/src/components/PillButton/PillButton.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.button {
-  height: unset !important;
-  padding: 10px 0;
-  border-radius: 100px;
-  border: 1px solid var(--neutral-light-4);
-  background: var(--white);
-}
-.buttonText {
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  font-size: var(--font-xs) !important;
-  color: var(--neutral) !important;
-  letter-spacing: unset !important;
-}
-.button:hover {
-  transform: scale3d(1.01, 1.01, 1.01) !important;
-  border: unset !important;
-}
-.button:active {
-  transform: scale3d(0.99, 0.99, 0.99) !important;
-}
-.button:hover .buttonText,
-.button:active .buttonText {
-  color: var(--white) !important;
-}
-.button.primary:hover,
-.button.primary:hover .buttonText {
-  background: var(--primary) !important;
-}
-.button.primary:active,
-.button.primary:active .buttonText {
-  background: var(--primary-dark-2) !important;
-}
-.button.secondary:hover,
-.button.secondary:hover .buttonText {
-  background: var(--secondary-light-2) !important;
-}
-.button.secondary:active,
-.button.secondary:active .buttonText {
-  background: var(--secondary) !important;
-}
diff --git a/packages/stems/src/components/PillButton/PillButton.stories.tsx b/packages/stems/src/components/PillButton/PillButton.stories.tsx
deleted file mode 100644
index 3f870193b2f..00000000000
--- a/packages/stems/src/components/PillButton/PillButton.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { PillButton, PillButtonProps } from './'
-
-export default {
-  component: PillButton,
-  title: 'Components/PillButton'
-}
-
-const defaultProps: PillButtonProps = {
-  text: 'Pill Button'
-}
-
-const Template: Story<PillButtonProps> = (args) => {
-  return <PillButton {...defaultProps} {...args} />
-}
-
-// Default
-export const Default = Template.bind({})
-
-// Disabled
-export const Disabled = Template.bind({})
-Disabled.args = { disabled: true }
diff --git a/packages/stems/src/components/PillButton/PillButton.tsx b/packages/stems/src/components/PillButton/PillButton.tsx
deleted file mode 100644
index f54de607cb2..00000000000
--- a/packages/stems/src/components/PillButton/PillButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import cn from 'classnames'
-
-import { Button, Type as ButtonType } from 'components/Button'
-
-import styles from './PillButton.module.css'
-import { PillButtonProps, Variant as PillButtonVariant } from './types'
-
-const VARIANT_STYLE_MAP = {
-  [PillButtonVariant.PRIMARY]: styles.primary,
-  [PillButtonVariant.SECONDARY]: styles.secondary
-}
-/**
- * @deprecated Used in feed-tip-tile
- */
-export const PillButton = (props: PillButtonProps) => {
-  const {
-    text,
-    onClick,
-    variant = PillButtonVariant.PRIMARY,
-    className,
-    textClassName,
-    ...other
-  } = props
-  return (
-    <Button
-      className={cn(styles.button, VARIANT_STYLE_MAP[variant], className)}
-      textClassName={cn(styles.buttonText, textClassName)}
-      type={ButtonType.COMMON}
-      text={text}
-      onClick={onClick}
-      {...other}
-    />
-  )
-}
diff --git a/packages/stems/src/components/PillButton/index.ts b/packages/stems/src/components/PillButton/index.ts
deleted file mode 100644
index ea8fe8aaf56..00000000000
--- a/packages/stems/src/components/PillButton/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PillButton } from './PillButton'
-export { PillButtonProps, Variant } from './types'
diff --git a/packages/stems/src/components/PillButton/types.ts b/packages/stems/src/components/PillButton/types.ts
deleted file mode 100644
index 94a04da9a45..00000000000
--- a/packages/stems/src/components/PillButton/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ButtonProps } from 'components/Button'
-
-export enum Variant {
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary'
-}
-
-export type PillButtonProps = ButtonProps & {
-  variant?: Variant
-}
diff --git a/packages/stems/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/stems/src/components/ProgressBar/ProgressBar.stories.tsx
deleted file mode 100644
index 9d035f5c1b4..00000000000
--- a/packages/stems/src/components/ProgressBar/ProgressBar.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { ProgressBar } from './ProgressBar'
-import { ProgressBarProps } from './types'
-
-export default {
-  component: ProgressBar,
-  title: 'Components/ProgressBar',
-  argTypes: {}
-}
-
-const Template: Story<ProgressBarProps> = (args) => <ProgressBar {...args} />
-const baseProps: ProgressBarProps = {
-  min: 0,
-  max: 10,
-  value: 3
-}
-
-// Primary
-export const Primary = Template.bind({})
-Primary.args = { ...baseProps }
-
-// With Labels
-export const WithLabels = Template.bind({})
-WithLabels.args = { ...baseProps, showLabels: true }
-
-// With Label Wrappers
-export const WithLabelWrappers = Template.bind({})
-WithLabelWrappers.args = {
-  ...baseProps,
-  showLabels: true,
-  minWrapper: ({ value }) => <span>{value.toString()} $AUDIO</span>,
-  maxWrapper: ({ value }) => <span>{value.toString()} $AUDIO</span>
-}
diff --git a/packages/stems/src/components/Scrollbar/Scrollbar.module.css b/packages/stems/src/components/Scrollbar/Scrollbar.module.css
deleted file mode 100644
index 10c6227a04c..00000000000
--- a/packages/stems/src/components/Scrollbar/Scrollbar.module.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.scrollbar {
-  height: 100%;
-  min-height: 0;
-}
-
-.scrollbar :global(.ps__thumb-y) {
-  opacity: 0.5;
-  background-color: var(--neutral-dark-3);
-}
-
-.scrollbar :global(.ps__rail-y) {
-  margin-top: var(--unit);
-  margin-bottom: var(--unit);
-  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
-}
-
-/* Cancel the default of perfect scroll, which always shows the scrollbar when hovering over container. Our desired behavior is to
-only show the scrollbar for ~1s, then fade away if not scrolling. */
-:global(.ps:hover).scrollbar > :global(.ps__rail-y),
-:global(.ps:hover).scrollbar > :global(.ps__rail-x) {
-  opacity: 0;
-}
-
-:global(.scrollbar--hovered-visible).scrollbar:not(:global(.ps--scrolling-y))
-  > :global(.ps__rail-y),
-:global(.scrollbar--hovered-visible).scrollbar:not(:global(.ps--scrolling-x))
-  > :global(.ps__rail-x) {
-  opacity: 0.6;
-}
-
-:global(.ps--focus).scrollbar > :global(.ps__rail-x),
-:global(.ps--focus).scrollbar > :global(.ps__rail-y),
-:global(.ps--scrolling-x).scrollbar > :global(.ps__rail-x),
-:global(.ps--scrolling-y).scrollbar > :global(.ps__rail-y) {
-  opacity: 0.6 !important;
-}
-
-.scrollbar > :global(.ps__rail-y):hover,
-.scrollbar > :global(.ps__rail-x):hover {
-  opacity: 0.9 !important;
-}
diff --git a/packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx b/packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx
deleted file mode 100644
index 340dbc7f80e..00000000000
--- a/packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { Scrollbar, ScrollbarProps } from '.'
-
-export default {
-  component: Scrollbar,
-  title: 'Components/Scrollbar'
-}
-
-const Template: Story<ScrollbarProps> = ({
-  children = (
-    <>
-      <p>
-        This is some content in a scrollable container. The surrounding
-        `Scrollbar` component gives this a custom scrollbar.
-      </p>
-      <p>
-        `Scrollbar` is meant to be used for small scrolling areas within a
-        page/view (e.g. a scrolling navigation bar), not the entire page itself.
-      </p>
-      <p>
-        `Scrollbar` uses{' '}
-        <a
-          href='https://www.npmjs.com/package/react-perfect-scrollbar'
-          target='_blank'
-          rel='noreferrer'
-        >
-          react-perfect-scrollbar
-        </a>{' '}
-        under the hood. For advanced use cases, refer to the documentation.
-      </p>
-      <p style={{ paddingTop: 200 }}>
-        This is some content in a scrollable container. The surrounding
-        `Scrollbar` component gives this a custom scrollbar.
-      </p>
-      <p>
-        `Scrollbar` is meant to be used for small scrolling areas within a
-        page/view (e.g. a scrolling navigation bar), not the entire page itself.
-      </p>
-      <p>
-        `Scrollbar` uses{' '}
-        <a
-          href='https://www.npmjs.com/package/react-perfect-scrollbar'
-          target='_blank'
-          rel='noreferrer'
-        >
-          react-perfect-scrollbar
-        </a>{' '}
-        under the hood. For advanced use cases, refer to the documentation.
-      </p>
-    </>
-  ),
-  ...args
-}) => {
-  return (
-    <div style={{ height: 200 }}>
-      <Scrollbar {...args}>{children}</Scrollbar>
-    </div>
-  )
-}
-
-export const Base = Template.bind({})
diff --git a/packages/stems/src/components/Scrollbar/Scrollbar.tsx b/packages/stems/src/components/Scrollbar/Scrollbar.tsx
deleted file mode 100644
index f6c43f074cd..00000000000
--- a/packages/stems/src/components/Scrollbar/Scrollbar.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useEffect, useRef, forwardRef, Ref, useCallback, useId } from 'react'
-
-import { ResizeObserver } from '@juggle/resize-observer'
-import cn from 'classnames'
-import PerfectScrollbar from 'react-perfect-scrollbar'
-import useMeasure from 'react-use-measure'
-
-import styles from './Scrollbar.module.css'
-import { ScrollbarProps } from './types'
-
-/**
- * @deprecated use `@audius/harmony` Scrollbar instead
- */
-export const Scrollbar = forwardRef(
-  (
-    { children, className, id, forward, isHidden, ...props }: ScrollbarProps,
-    forwardedRef: Ref<PerfectScrollbar>
-  ) => {
-    // Do not remove:
-    // useMeasure ref is required for infinite scrolling to work
-    const [ref] = useMeasure({ polyfill: ResizeObserver })
-    const timerRef = useRef<NodeJS.Timeout | null>(null)
-    const reactId = useId()
-    const elementId = id || reactId
-
-    useEffect(() => {
-      return () => {
-        if (timerRef.current !== null) {
-          clearTimeout(timerRef.current)
-        }
-      }
-    }, [])
-
-    const hideScrollbar = useCallback(() => {
-      const element = document.getElementById(elementId)
-      if (element) {
-        element.classList.remove('scrollbar--hovered-visible')
-      }
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current)
-      }
-    }, [elementId, timerRef])
-
-    const showScrollbar = useCallback(() => {
-      if (isHidden) return
-      const element = document.getElementById(elementId)
-      if (element) {
-        element.classList.add('scrollbar--hovered-visible')
-      }
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current)
-      }
-      timerRef.current = setTimeout(() => {
-        const element = document.getElementById(elementId)
-        if (element) {
-          element.classList.remove('scrollbar--hovered-visible')
-        }
-      }, 1400)
-    }, [elementId, timerRef, isHidden])
-
-    useEffect(() => {
-      if (isHidden) {
-        hideScrollbar()
-      }
-    }, [isHidden, hideScrollbar])
-
-    const content = forward ? children : <div ref={ref}>{children}</div>
-
-    return (
-      <PerfectScrollbar
-        {...props}
-        ref={forwardedRef}
-        id={elementId}
-        className={cn(styles.scrollbar, className)}
-        onMouseEnter={showScrollbar}
-        onMouseLeave={hideScrollbar}
-      >
-        {content}
-      </PerfectScrollbar>
-    )
-  }
-)
diff --git a/packages/stems/src/components/Scrollbar/index.ts b/packages/stems/src/components/Scrollbar/index.ts
deleted file mode 100644
index 349ec05275e..00000000000
--- a/packages/stems/src/components/Scrollbar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Scrollbar } from './Scrollbar'
-export { ScrollbarProps } from './types'
diff --git a/packages/stems/src/components/Scrollbar/types.ts b/packages/stems/src/components/Scrollbar/types.ts
deleted file mode 100644
index 7f8a30223df..00000000000
--- a/packages/stems/src/components/Scrollbar/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ScrollBarProps as PerfectScrollbarProps } from 'react-perfect-scrollbar'
-
-export type ScrollbarProps = PerfectScrollbarProps & {
-  forward?: boolean
-  /**
-   * Whether or not to hide the scrollbars. Useful if you are rendering
-   * a scroll bar inside something that is changing sizes and you need
-   * to wait for the size to be stable before showing scrollbars.
-   */
-  isHidden?: boolean
-}
diff --git a/packages/stems/src/components/Scrubber/Scrubber.stories.tsx b/packages/stems/src/components/Scrubber/Scrubber.stories.tsx
deleted file mode 100644
index 63fccae7759..00000000000
--- a/packages/stems/src/components/Scrubber/Scrubber.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { Scrubber } from './Scrubber'
-import { ScrubberProps } from './types'
-
-export default {
-  component: Scrubber,
-  title: 'Components/Scrubber'
-}
-
-const Template: Story<ScrubberProps> = (args) => <Scrubber {...args} />
-const baseProps: Partial<ScrubberProps> = {
-  isPlaying: false,
-  mediaKey: '1',
-  elapsedSeconds: 0,
-  totalSeconds: 100
-}
-
-// Primary
-export const Primary = Template.bind({})
-Primary.args = { ...baseProps }
-
-// Disabled
-export const Disabled = Template.bind({})
-Disabled.args = { ...baseProps, isDisabled: true }
-
-// No Timestamps
-export const NoTimestamps = Template.bind({})
-NoTimestamps.args = { ...baseProps, includeTimestamps: false }
-
-// Mobile
-export const Mobile = Template.bind({})
-Mobile.args = { ...baseProps, isMobile: true }
diff --git a/packages/stems/src/components/Scrubber/test.ts b/packages/stems/src/components/Scrubber/test.ts
deleted file mode 100644
index 747fe55f19d..00000000000
--- a/packages/stems/src/components/Scrubber/test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Scrubber } from '.'
-
-describe('Scrubber', () => {
-  it('is truthy', () => {
-    expect(Scrubber).toBeTruthy()
-  })
-})
diff --git a/packages/stems/src/components/Switch/Switch.module.css b/packages/stems/src/components/Switch/Switch.module.css
deleted file mode 100644
index 4a4acaf63c1..00000000000
--- a/packages/stems/src/components/Switch/Switch.module.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.root {
-  opacity: 1;
-  position: relative;
-  cursor: pointer;
-}
-
-.input {
-  cursor: inherit;
-  position: absolute;
-  opacity: 0;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  z-index: 1;
-}
-
-.switchTrack {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 48px;
-  height: 26px;
-  border-radius: 99px;
-  position: relative;
-  transition: background-color 0.2s;
-  background-color: var(--neutral-light-6);
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
-}
-
-.switchThumb {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  height: 22px;
-  width: 22px;
-  border-radius: 50%;
-  transition: 0.2s;
-  background: var(--neutral-light-9);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
-}
-
-.input:checked + .switchTrack {
-  background-color: var(--secondary);
-}
-
-.input:checked + .switchTrack .switchThumb {
-  left: calc(100% - 2px);
-  transform: translateX(-100%);
-}
-
-.switchTrack:active .switchThumb {
-  width: 20px;
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: auto;
-  pointer-events: none;
-}
diff --git a/packages/stems/src/components/Switch/Switch.tsx b/packages/stems/src/components/Switch/Switch.tsx
deleted file mode 100644
index 4b1579ee3b2..00000000000
--- a/packages/stems/src/components/Switch/Switch.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentProps } from 'react'
-
-import cn from 'classnames'
-
-import styles from './Switch.module.css'
-
-export type SwitchProps = ComponentProps<'input'>
-
-/**
- * @deprecated use @audius/harmony Switch instead
- */
-export const Switch = (props: SwitchProps) => {
-  const { disabled } = props
-  return (
-    <span className={cn(styles.root, { [styles.disabled]: disabled })}>
-      <input className={styles.input} type='checkbox' {...props} />
-      <span className={styles.switchTrack}>
-        <span className={styles.switchThumb} />
-      </span>
-    </span>
-  )
-}
diff --git a/packages/stems/src/components/Switch/index.ts b/packages/stems/src/components/Switch/index.ts
deleted file mode 100644
index 865ddbb0581..00000000000
--- a/packages/stems/src/components/Switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Switch'
diff --git a/packages/stems/src/components/Tag/Tag.module.css b/packages/stems/src/components/Tag/Tag.module.css
deleted file mode 100644
index 6698ffaf11d..00000000000
--- a/packages/stems/src/components/Tag/Tag.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.tag {
-  padding: 5px 8px;
-  height: 17px;
-  border-radius: 2px;
-  line-height: normal;
-  background-color: var(--neutral-light-4);
-  user-select: none;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.tag.clickable {
-  cursor: pointer;
-  transition: all ease-in-out 0.04s;
-}
-.tag.clickable:hover {
-  background-color: var(--secondary);
-  color: var(--white);
-}
-.tag.clickable:active {
-  transform: scale(0.96);
-}
-
-.textLabel {
-  color: var(--white);
-  font-size: var(--font-2xs);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.75px;
-  line-height: 8px;
-
-  vertical-align: top;
-  text-transform: uppercase;
-  white-space: nowrap;
-  word-break: keep-all;
-  text-decoration: none;
-  /*text-shadow: 0 1px 2px rgba(39,31,71,0.25);*/
-}
diff --git a/packages/stems/src/components/Tag/Tag.stories.tsx b/packages/stems/src/components/Tag/Tag.stories.tsx
deleted file mode 100644
index 235ef6e67e6..00000000000
--- a/packages/stems/src/components/Tag/Tag.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Story } from '@storybook/react'
-
-import { Tag, type TagProps } from './Tag'
-
-export default {
-  component: Tag,
-  title: 'Components/Tag'
-}
-
-const Template: Story<TagProps<'span'>> = (args) => {
-  return <Tag {...args} />
-}
-
-export const Base = Template.bind({})
-
-Base.args = {
-  tag: 'example tag'
-}
diff --git a/packages/stems/src/components/Tag/Tag.tsx b/packages/stems/src/components/Tag/Tag.tsx
deleted file mode 100644
index d9ecae75c0f..00000000000
--- a/packages/stems/src/components/Tag/Tag.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-
-import cn from 'classnames'
-
-import styles from './Tag.module.css'
-
-const defaultElement = 'span'
-
-type TagOwnProps<TagElementType extends ElementType = ElementType> = {
-  tag: string
-  as?: TagElementType
-}
-
-export type TagProps<TagComponentType extends ElementType> =
-  TagOwnProps<TagComponentType> &
-    Omit<ComponentProps<TagComponentType>, keyof TagOwnProps>
-
-/**
- * @deprecated use `@audius/harmony` tag instead
- */
-export const Tag = <TagElementType extends ElementType = typeof defaultElement>(
-  props: TagProps<TagElementType>
-) => {
-  const { tag, as: Component = defaultElement, className, ...other } = props
-
-  const style = {
-    [styles.clickable]: !!other.onClick
-  }
-
-  return (
-    <Component className={cn(className, styles.tag, style)} {...other}>
-      <span className={styles.textLabel}>{tag}</span>
-    </Component>
-  )
-}
diff --git a/packages/stems/src/components/Tag/index.ts b/packages/stems/src/components/Tag/index.ts
deleted file mode 100644
index fd1a1e7ebd9..00000000000
--- a/packages/stems/src/components/Tag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Tag'
diff --git a/packages/stems/src/hooks/useControlled.ts b/packages/stems/src/hooks/useControlled.ts
deleted file mode 100644
index 377afc3413b..00000000000
--- a/packages/stems/src/hooks/useControlled.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
-The MIT License (MIT)
-
-Copyright (c) 2014 Call-Em-All
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
- */
-
-// Adapted from Material UI: https://github.com/mui/material-ui/blob/a31d9166a46b41b63b1932252e8eb32a3f4dfb2b/packages/mui-utils/src/useControlled.js
-
-import { useRef, useState, useCallback, useEffect } from 'react'
-
-const switchControlledError = ({
-  isControlled,
-  stateName,
-  componentName
-}: {
-  isControlled: boolean
-  stateName: string
-  componentName: string
-}) => {
-  return [
-    `Audius Stems: A component is changing an ${
-      isControlled ? '' : 'un'
-    }controlled ${stateName} state of ${componentName} to be ${
-      isControlled ? 'un' : ''
-    }controlled.`,
-    'This is likely caused by the value changing from undefined to a defined value, which should not happen.',
-    'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',
-    "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.",
-    'More info: https://fb.me/react-controlled-components'
-  ].join('\n')
-}
-
-const defaultChangedError = ({
-  stateName,
-  componentName
-}: {
-  stateName: string
-  componentName: string
-}) => {
-  return (
-    `Audius Stems: A component is changing the default ${stateName} state of an uncontrolled ${componentName} after being initialized. ` +
-    `To suppress this warning opt to use a controlled ${componentName}.`
-  )
-}
-
-export const useControlled = <T extends string | number | undefined | null>({
-  controlledProp,
-  defaultValue,
-  stateName = 'value',
-  componentName
-}: {
-  controlledProp: T
-  defaultValue: T
-  stateName?: string
-  componentName: string
-}): [T, (newValue: T) => void] => {
-  // Save a ref of the initial isControlled state
-  const { current: isControlled } = useRef(controlledProp !== undefined)
-
-  // Local state for use with uncontrolled components
-  const [valueState, setValueState] = useState(defaultValue)
-
-  // If the component is controlled, use the controlled prop rather than the local state
-  const value = isControlled ? controlledProp : valueState
-
-  // If the component is uncontrolled, this callback can be used to set the value
-  const setValueIfUncontrolled = useCallback(
-    (newValue: T) => {
-      if (!isControlled) {
-        setValueState(newValue)
-      }
-    },
-    [isControlled]
-  )
-
-  // Note each hook in this block has disabled react-hooks/rules-of-hooks
-  // The code won't fork here at runtime, you'll either be in production or you won't.
-  /* eslint-disable react-hooks/rules-of-hooks */
-  if (process.env.NODE_ENV !== 'production') {
-    // Check if the component is switching from controlled to uncontrolled or vice-versa
-    useEffect(() => {
-      if (isControlled !== (controlledProp !== undefined)) {
-        console.error(
-          switchControlledError({ isControlled, stateName, componentName })
-        )
-      }
-    }, [componentName, controlledProp, isControlled, stateName])
-
-    // Check if the default value of an uncontrolled prop is being changed after initialization
-    const { current: initialDefaultValue } = useRef(defaultValue)
-    useEffect(() => {
-      if (!isControlled && defaultValue !== initialDefaultValue) {
-        console.error(defaultChangedError({ stateName, componentName }))
-      }
-    }, [
-      componentName,
-      defaultValue,
-      initialDefaultValue,
-      isControlled,
-      stateName
-    ])
-  }
-  /* eslint-enable react-hooks/rules-of-hooks */
-
-  return [value, setValueIfUncontrolled]
-}
diff --git a/packages/stems/src/hooks/useMediaQueryListener.ts b/packages/stems/src/hooks/useMediaQueryListener.ts
deleted file mode 100644
index 5dc3cefa589..00000000000
--- a/packages/stems/src/hooks/useMediaQueryListener.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useEffect, useState, useCallback } from 'react'
-
-export const useMediaQueryListener = (mediaQuery: string) => {
-  // Stores whether there is a match
-  const [isMatch, setIsMatch] = useState(false)
-
-  // Updates whether there is a match or not
-  // when the media query status changes
-  const listener = useCallback(
-    (matcher: any) => setIsMatch(matcher.matches),
-    [setIsMatch]
-  )
-
-  // If mediaQuery is set, set up a media query listener
-  useEffect(() => {
-    if (mediaQuery) {
-      const matcher = window.matchMedia(mediaQuery)
-      listener(matcher)
-      matcher.addListener(listener)
-      return () => matcher.removeListener(listener)
-    }
-    return () => {}
-  }, [mediaQuery, listener])
-
-  return { isMatch }
-}
diff --git a/packages/stems/src/index.ts b/packages/stems/src/index.ts
index 870a177159f..644ed7d4509 100644
--- a/packages/stems/src/index.ts
+++ b/packages/stems/src/index.ts
@@ -5,25 +5,3 @@ import './assets/styles/animations.css'
 import './assets/styles/shadows.css'
 import './assets/styles/transforms.css'
 import './assets/styles/layers.css'
-
-export * from './styles/colors'
-export * from './utils/styles'
-
-export {
-  PillButton,
-  PillButtonProps,
-  Variant as PillButtonVariant
-} from './components/PillButton'
-
-export { ProgressBar, ProgressBarProps } from './components/ProgressBar'
-export { Scrubber } from './components/Scrubber'
-
-export {
-  TokenValueSlider,
-  TokenValueSliderProps
-} from './components/TokenValueSlider'
-
-export {
-  MarkdownViewer,
-  MarkdownViewerProps
-} from './components/MarkdownViewer'
diff --git a/packages/stems/src/styles/colors.ts b/packages/stems/src/styles/colors.ts
deleted file mode 100644
index 1bf7bcc8769..00000000000
--- a/packages/stems/src/styles/colors.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export type ColorValue =
-  | 'background'
-  | 'primary'
-  | 'primaryDark1'
-  | 'primaryDark2'
-  | 'primaryLight1'
-  | 'primaryLight2'
-  | 'secondary'
-  | 'secondaryDark1'
-  | 'secondaryDark2'
-  | 'secondaryLight1'
-  | 'secondaryLight2'
-  | 'primarySecondaryText'
-  | 'neutral'
-  | 'neutralDark1'
-  | 'neutralDark2'
-  | 'neutralDark3'
-  | 'neutralLight1'
-  | 'neutralLight2'
-  | 'neutralLight3'
-  | 'neutralLight4'
-  | 'neutralLight5'
-  | 'neutralLight6'
-  | 'neutralLight7'
-  | 'neutralLight8'
-  | 'neutralLight9'
-  | 'neutralLight10'
-  | 'white'
-  | 'accentRed'
-  | 'accentRedDark1'
-  | 'accentRedLight1'
-  | 'accentGreen'
-  | 'accentGreenDark1'
-  | 'accentGreenLight1'
-  | 'accentOrange'
-  | 'accentOrangeDark1'
-  | 'accentOrangeLight1'
-  | 'accentPurple'
-  | 'accentBlue'
-  | 'specialLightGreen'
-  | 'darkmodeStaticWhite'
-  | 'staticWhite'
-  | 'staticNeutral'
diff --git a/packages/stems/src/styles/types.ts b/packages/stems/src/styles/types.ts
deleted file mode 100644
index a22e9b6b299..00000000000
--- a/packages/stems/src/styles/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CSSProperties } from 'react'
-
-/** Type override to allow usage of custom properties in the
- * `style' prop. We're using this instead of augmenting the csstype module
- * because that currently breaks types for some third-party modules. Note that
- * you will have to cast it back to CSSProperties in most cases.
- * Usage:
- * ```
- * const style: CSSCustomProperties = {
- *   width: '10px',
- *   '--custom-prop': 'var(--custom-var-value)
- * }
- *
- * return <button style={style as CSSProperties} />
- * ```
- */
-export type CSSCustomProperties = CSSProperties & {
-  // Allow any CSS Custom Properties
-  [index: `--${string}`]: any
-}
diff --git a/packages/stems/src/types.ts b/packages/stems/src/types.ts
deleted file mode 100644
index 7373cd25364..00000000000
--- a/packages/stems/src/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-declare module 'react' {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null
-}
-
-export {}
diff --git a/packages/stems/src/typings.d.ts b/packages/stems/src/typings.d.ts
deleted file mode 100644
index 86093f4ad8f..00000000000
--- a/packages/stems/src/typings.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Default CSS definition for typescript,
- * will be overridden with file-specific definitions by rollup
- */
-declare module '*.css' {
-  const content: { [className: string]: string }
-  export default content
-}
-
-declare module '*.svg' {
-  const svgUrl: string
-  const svgComponent: React.ComponentType<SvgProps>
-  export default svgUrl
-  export { svgComponent as ReactComponent }
-}
-
-declare module 'storybook-addon-smart-knobs'
diff --git a/packages/stems/src/utils/bnHelpers.ts b/packages/stems/src/utils/bnHelpers.ts
deleted file mode 100644
index a90591f052c..00000000000
--- a/packages/stems/src/utils/bnHelpers.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import BN from 'bn.js'
-
-export function getBNPercentage(n1: BN, n2: BN): number {
-  if (n2.isZero()) return 0
-  const thousand = new BN('1000')
-  const num = n1.mul(thousand).div(n2)
-  if (num.gte(thousand)) return 1
-  return num.toNumber() / 1000
-}
-
-export function clampBN(value: BN, min: BN, max: BN): BN {
-  return BN.min(BN.max(value, min), max)
-}
diff --git a/packages/stems/src/utils/findAncestor.ts b/packages/stems/src/utils/findAncestor.ts
deleted file mode 100644
index 96cf61c8e94..00000000000
--- a/packages/stems/src/utils/findAncestor.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Legacy browser support for `Element.closest`
- * @param el
- * @param selector query selector
- */
-export const findAncestor = (el: Element | null, selector: string) => {
-  if (el !== null && el.closest) {
-    return el.closest(selector)
-  }
-  // Fall back to just looping back through parents
-  while (
-    (el = el?.parentElement ?? null) &&
-    // @ts-ignore
-    !(el.matches || el.matchesSelector).call(el, selector)
-  );
-  return el
-}
diff --git a/packages/stems/src/utils/hotkeyUtil.ts b/packages/stems/src/utils/hotkeyUtil.ts
deleted file mode 100644
index b10a4bb89a1..00000000000
--- a/packages/stems/src/utils/hotkeyUtil.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { size, throttle } from 'lodash'
-
-export enum ModifierKeys {
-  CMD = 0,
-  CTRL = 1,
-  SHIFT = 2,
-  ALT = 3
-}
-
-type ModifierHandler = {
-  cb: (e?: KeyboardEvent) => void
-  or?: ModifierKeys[]
-  and?: ModifierKeys[]
-}
-
-type Handler = (e?: KeyboardEvent) => void
-export type Mapping = {
-  [key: number]: Handler | ModifierHandler
-}
-
-/**
- * Checks whether the DOM is in a state where a global hotkey press is allowed.
- * For example, even if an anchor tag has focus, it should not prevent global hotkeys
- * from working.
- * @returns {boolean} whether or not a global hotkey press is allowed.
- */
-function allowGlobalHotkeyPress() {
-  return (
-    document.activeElement &&
-    (document.activeElement === document.body ||
-      document.activeElement.nodeName === 'A' /* <a> */ ||
-      document.activeElement.nodeName === 'BUTTON' /* <button> */ ||
-      document.activeElement.getAttribute('role') === 'button')
-  ) /* Lottie button */
-}
-
-function isModifierPressed(modifier: ModifierKeys, e: KeyboardEvent) {
-  if (modifier === ModifierKeys.CMD) return e.metaKey
-  if (modifier === ModifierKeys.CTRL) return e.ctrlKey
-  if (modifier === ModifierKeys.SHIFT) return e.shiftKey
-  if (modifier === ModifierKeys.ALT) return e.altKey
-  return false
-}
-
-function fireHotkey(
-  e: KeyboardEvent,
-  mapping: Mapping,
-  preventDefault: boolean
-) {
-  if (allowGlobalHotkeyPress() && e.keyCode in mapping) {
-    if (size(mapping[e.keyCode]) > 1) {
-      const cb = (mapping[e.keyCode] as ModifierHandler).cb
-      const or = (mapping[e.keyCode] as ModifierHandler).or
-      const and = (mapping[e.keyCode] as ModifierHandler).and
-
-      let satisfiedOr = true
-      if (or) {
-        satisfiedOr = false
-        or.forEach((modifier) => {
-          if (isModifierPressed(modifier as ModifierKeys, e)) satisfiedOr = true
-        })
-      }
-
-      let satisfiedAnd = true
-      if (and) {
-        and.forEach((modifier) => {
-          if (!isModifierPressed(modifier, e)) satisfiedAnd = false
-        })
-      }
-
-      if (satisfiedOr && satisfiedAnd) {
-        if (preventDefault) e.preventDefault()
-        cb(e)
-      }
-    } else {
-      // If no modifier keys are required, fire the callback.
-      if (preventDefault) e.preventDefault()
-      ;(mapping[e.keyCode] as Handler)(e)
-    }
-  }
-}
-
-/**
- * Sets up hotkeys for a component. Should generally be called in componentDidMount.
- * @param {function|Object} mapping the hotkey mapping keycodes to callback.
- * @param {Number} throttleMs the number of milliseconds to throttle keydown events with.
- * For example:
- *  setupHotkeys({32: this.playMusic})  // fires playMusic() on 'space'
- *
- * The mapping values may be an object with three fields:
- *  cb: the callback to fire
- *  or: modifier keys that must be OR'd with the hotkey
- *  and: modifier keys that must be AND'd with the hotkey
- *
- * For example:
- *  setupHotkeys({32: {cb: this.playMusic, or: [CMD, CTRL]})
- *    // fires on 'cmd+space' or 'ctrl+space'
- *  setupHotkeys({32: {cb: this.playMusic, and: [CMD, CTRL]})
- *    // fires on 'cmd+ctrl+space'
- *  setupHotkeys({32: {cb: this.playMusic, or: [ALT, CTRL], and: [CMD, SHIFT]})
- *    // fires on 'cmd+shift+alt+space' or 'cmd+shift+ctrl+space'\
- * @returns {function} the event listener function
- */
-export function setupHotkeys(
-  mapping: Mapping,
-  throttleMs = 100,
-  preventDefault = true
-) {
-  const hotkeyHook = (e: KeyboardEvent) => {
-    fireHotkey(e, mapping, preventDefault)
-  }
-  const throttledHook = (e: KeyboardEvent) =>
-    throttle(hotkeyHook, throttleMs, { leading: true })(e)
-  document.addEventListener('keydown', throttledHook, false)
-  return throttledHook
-}
-
-/**
- * Removes a hotkey event listener.
- * @param {function} hook the function hook returned by setupHotkeys.
- */
-export function removeHotkeys(hook: (e: KeyboardEvent) => void) {
-  document.removeEventListener('keydown', hook, false)
-}
diff --git a/packages/stems/src/utils/scrollParent.ts b/packages/stems/src/utils/scrollParent.ts
deleted file mode 100644
index 47c89fa231e..00000000000
--- a/packages/stems/src/utils/scrollParent.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Gets the scroll parent of an HTML element
- * From SO: https://stackoverflow.com/a/42543908/11435157
- * @param node
- * @returns the scroll parent
- */
-export const getScrollParent = (node: HTMLElement): Element | null => {
-  const regex = /(auto|scroll)/
-  const parents = (_node: HTMLElement, ps: HTMLElement[]): HTMLElement[] => {
-    if (_node.parentNode === null) {
-      return ps
-    }
-    return parents(_node.parentNode as HTMLElement, ps.concat([_node]))
-  }
-
-  const style = (_node: HTMLElement, prop: string) =>
-    getComputedStyle(_node, null).getPropertyValue(prop)
-  const overflow = (_node: HTMLElement) =>
-    style(_node, 'overflow') +
-    style(_node, 'overflow-y') +
-    style(_node, 'overflow-x')
-  const scroll = (_node: HTMLElement) => regex.test(overflow(_node))
-
-  const scrollParent = (_node: HTMLElement) => {
-    if (!_node.parentNode) {
-      return null
-    }
-
-    const ps = parents(_node.parentNode as HTMLElement, [])
-
-    for (let i = 0; i < ps.length; i += 1) {
-      if (scroll(ps[i])) {
-        return ps[i]
-      }
-    }
-
-    return document.scrollingElement || document.documentElement
-  }
-
-  return scrollParent(node)
-}
diff --git a/packages/stems/src/utils/styles.ts b/packages/stems/src/utils/styles.ts
deleted file mode 100644
index cc591b818e8..00000000000
--- a/packages/stems/src/utils/styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { kebabCase } from 'lodash'
-
-/** Converts a camelCased variable name such as `primaryDark1` to an
- * equivalent CSS variable name (`--primary-dark-1`). Useful for passing
- * values like color names to a component to be converted to a CSS
- * property set via `style`
- */
-export const toCSSVariableName = (name: string) => {
-  return `--${kebabCase(name)}`
-}
diff --git a/packages/stems/src/utils/transitions.ts b/packages/stems/src/utils/transitions.ts
deleted file mode 100644
index d9c78190605..00000000000
--- a/packages/stems/src/utils/transitions.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const standard = {
-  tension: 310,
-  friction: 25,
-  clamp: true
-}
-
-export const wobble = {
-  tension: 250,
-  friction: 25
-}
-
-export const slowWobble = {
-  tension: 175,
-  friction: 20
-}
-
-export const stiff = {
-  tension: 215,
-  friction: 40
-}
-
-export const fast = {
-  tension: 300,
-  friction: 40
-}
diff --git a/packages/stems/src/utils/types.ts b/packages/stems/src/utils/types.ts
deleted file mode 100644
index 0903acaf17f..00000000000
--- a/packages/stems/src/utils/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react'
-
-export type BaseButtonProps = Omit<
-  ComponentPropsWithoutRef<'button'>,
-  'children'
->
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 f0c913cc5a5..74c00d4ebcd 100644
--- a/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx
+++ b/packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx
@@ -12,10 +12,10 @@ import {
   IconRobot,
   Button
 } from '@audius/harmony'
-import { MarkdownViewer } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
+import { MarkdownViewer } from 'components/markdown-viewer'
 import { useSelector } from 'utils/reducer'
 
 import styles from './AiAttributionSettingsModal.module.css'
diff --git a/packages/web/src/components/lineup/LineupProvider.tsx b/packages/web/src/components/lineup/LineupProvider.tsx
index 3e131cd7f0f..85f1e4b3110 100644
--- a/packages/web/src/components/lineup/LineupProvider.tsx
+++ b/packages/web/src/components/lineup/LineupProvider.tsx
@@ -787,7 +787,7 @@ class LineupProvider extends PureComponent<CombinedProps, LineupProviderState> {
               threshold={loadMoreThreshold}
               element='ol'
             >
-              {showFeedTipTile ? <FeedTipTile /> : null}
+              <FeedTipTile />
               {tiles.map((tile, index) => (
                 <li key={index}>{tile}</li>
               ))}
diff --git a/packages/stems/src/components/MarkdownViewer/MarkdownViewer.module.css b/packages/web/src/components/markdown-viewer/MarkdownViewer.module.css
similarity index 100%
rename from packages/stems/src/components/MarkdownViewer/MarkdownViewer.module.css
rename to packages/web/src/components/markdown-viewer/MarkdownViewer.module.css
diff --git a/packages/stems/src/components/MarkdownViewer/MarkdownViewer.tsx b/packages/web/src/components/markdown-viewer/MarkdownViewer.tsx
similarity index 100%
rename from packages/stems/src/components/MarkdownViewer/MarkdownViewer.tsx
rename to packages/web/src/components/markdown-viewer/MarkdownViewer.tsx
diff --git a/packages/stems/src/components/MarkdownViewer/index.ts b/packages/web/src/components/markdown-viewer/index.ts
similarity index 100%
rename from packages/stems/src/components/MarkdownViewer/index.ts
rename to packages/web/src/components/markdown-viewer/index.ts
diff --git a/packages/web/src/components/notification/Notification/AnnouncementNotification.tsx b/packages/web/src/components/notification/Notification/AnnouncementNotification.tsx
index e0bed7cde77..c398574f231 100644
--- a/packages/web/src/components/notification/Notification/AnnouncementNotification.tsx
+++ b/packages/web/src/components/notification/Notification/AnnouncementNotification.tsx
@@ -2,11 +2,11 @@ import { useCallback } from 'react'
 
 import { Name } from '@audius/common/models'
 import { AnnouncementNotification as AnnouncementNotificationType } from '@audius/common/store'
-import { MarkdownViewer } from '@audius/stems'
 import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 
 import { make, useRecord } from 'common/store/analytics/actions'
+import { MarkdownViewer } from 'components/markdown-viewer'
 import { openNotificationModal } from 'store/application/ui/notifications/notificationsUISlice'
 
 import styles from './AnnouncementNotification.module.css'
diff --git a/packages/web/src/components/notification/NotificationModal.tsx b/packages/web/src/components/notification/NotificationModal.tsx
index 51efcd59283..81ae8f76417 100644
--- a/packages/web/src/components/notification/NotificationModal.tsx
+++ b/packages/web/src/components/notification/NotificationModal.tsx
@@ -1,6 +1,7 @@
 import { AnnouncementNotification } from '@audius/common/store'
 import { Modal, Scrollbar, IconClose as IconRemove } from '@audius/harmony'
-import { MarkdownViewer } from '@audius/stems'
+
+import { MarkdownViewer } from 'components/markdown-viewer'
 
 import { IconAnnouncement } from './Notification/components/icons'
 import styles from './NotificationModal.module.css'
diff --git a/packages/web/src/components/now-playing/NowPlaying.tsx b/packages/web/src/components/now-playing/NowPlaying.tsx
index 137d5ac9de8..482d7aa55c0 100644
--- a/packages/web/src/components/now-playing/NowPlaying.tsx
+++ b/packages/web/src/components/now-playing/NowPlaying.tsx
@@ -32,8 +32,7 @@ import {
   OverflowActionCallbacks
 } from '@audius/common/store'
 import { Genre } from '@audius/common/utils'
-import { IconCaretRight as IconCaret } from '@audius/harmony'
-import { Scrubber } from '@audius/stems'
+import { IconCaretRight as IconCaret, Scrubber } from '@audius/harmony'
 import { Location } from 'history'
 import { connect, useSelector } from 'react-redux'
 import { Dispatch } from 'redux'
diff --git a/packages/web/src/components/play-bar/desktop/PlayBar.jsx b/packages/web/src/components/play-bar/desktop/PlayBar.jsx
index 5b6308a6016..6905a55e6bb 100644
--- a/packages/web/src/components/play-bar/desktop/PlayBar.jsx
+++ b/packages/web/src/components/play-bar/desktop/PlayBar.jsx
@@ -22,8 +22,7 @@ import {
   playbackRateValueMap
 } from '@audius/common/store'
 import { Genre } from '@audius/common/utils'
-import { removeHotkeys, setupHotkeys } from '@audius/harmony'
-import { Scrubber } from '@audius/stems'
+import { removeHotkeys, setupHotkeys, Scrubber } from '@audius/harmony'
 import { push as pushRoute } from 'connected-react-router'
 import { connect } from 'react-redux'
 
diff --git a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css
index 92583e77812..9f6cce49005 100644
--- a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css
+++ b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css
@@ -120,15 +120,6 @@
   align-items: center;
 }
 
-.sendTipButton {
-  margin-left: 8px;
-}
-.sendTipButtonTextContainer {
-  display: flex;
-}
-.sendTipButtonText {
-  color: var(--neutral-light-4) !important;
-}
 .sendTipName {
   margin-left: 2.5px;
   max-width: 302px;
diff --git a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx
index 22f9f4c6dd9..21b83dd6a5e 100644
--- a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx
+++ b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx
@@ -10,9 +10,9 @@ import {
 import {
   IconClose as IconRemove,
   IconTipping as IconTip,
-  IconButton
+  IconButton,
+  Button
 } from '@audius/harmony'
-import { PillButton } from '@audius/stems'
 import { ResizeObserver } from '@juggle/resize-observer'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
@@ -45,7 +45,7 @@ const getAccountUser = accountSelectors.getAccountUser
 const messages = {
   wasTippedBy: 'Was Tipped By',
   andOthers: (num: number) => `& ${num} ${num > 1 ? 'others' : 'other'}`,
-  sendTipToPrefix: 'SEND TIP TO ',
+  sendTipToPrefix: 'Send Tip to ',
   sendTip: 'SEND TIP',
   dismissButton: 'Dismiss tip tile'
 }
@@ -145,12 +145,9 @@ const SendTipButton = ({ user, hideName = false }: SendTipButtonProps) => {
     )
 
   return (
-    <PillButton
-      className={styles.sendTipButton}
-      textClassName={styles.sendTipButtonText}
-      text={renderSendTipButtonTitle()}
-      onClick={handleClick}
-    />
+    <Button variant='secondary' size='small' onClick={handleClick}>
+      {renderSendTipButtonTitle()}
+    </Button>
   )
 }
 
diff --git a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css b/packages/web/src/components/token-value-slider/TokenValueSlider.module.css
similarity index 58%
rename from packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css
rename to packages/web/src/components/token-value-slider/TokenValueSlider.module.css
index e4139f4a6d8..a01c792258b 100644
--- a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css
+++ b/packages/web/src/components/token-value-slider/TokenValueSlider.module.css
@@ -1,6 +1,15 @@
-:root, root {
-  --stems-token-value-slider-background: linear-gradient(315deg, #7652CC 2.04%, #B05CE6 100%);
-  --stems-token-value-slider-background-error: linear-gradient(180deg, #F15064 0%, #C03A4B 100%);
+:root,
+root {
+  --token-value-slider-background: linear-gradient(
+    315deg,
+    #7652cc 2.04%,
+    #b05ce6 100%
+  );
+  --token-value-slider-background-error: linear-gradient(
+    180deg,
+    #f15064 0%,
+    #c03a4b 100%
+  );
 }
 
 .container {
@@ -10,13 +19,13 @@
   width: 576px;
 
   /* Text styles */
-  font-family: var(--font-family);
-  font-weight: var(--font-bold);
-  font-size: var(--font-s);
+  font-family: var(--harmony-font-family);
+  font-weight: var(--harmony-font-bold);
+  font-size: var(--harmony-font-s);
   line-height: 17px;
   letter-spacing: 1px;
   text-transform: uppercase;
-  color: #BEC5E0;
+  color: var(--harmony-neutral);
 }
 
 .slider {
@@ -31,20 +40,20 @@
 
 .newValueSlider {
   position: absolute;
-  background: var(--stems-token-value-slider-background);
+  background: var(--token-value-slider-background);
   height: 100%;
   transition: width 0.2s ease-in-out;
 }
 
 .initialValueSlider {
   position: absolute;
-  background: var(--stems-token-value-slider-background);
+  background: var(--token-value-slider-background);
   height: 100%;
   transition: width 0.2s ease-in-out;
 }
 
 .invalid {
-  background: var(--stems-token-value-slider-background-error);
+  background: var(--token-value-slider-background-error);
   z-index: 1;
 }
 
@@ -58,16 +67,16 @@
   display: inline-flex;
   justify-content: space-between;
   margin-bottom: 8px;
-  color: var(--neutral);
+  color: var(--harmony-neutral);
 }
 
 .minLabel {
-  color: var(--neutral-light-4);
+  color: var(--harmony-text-subdued);
   padding-right: 4px;
 }
 
 .maxLabel {
-  color: var(--neutral-light-4);
+  color: var(--harmony-text-subdued);
   padding-left: 4px;
 }
 
diff --git a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx b/packages/web/src/components/token-value-slider/TokenValueSlider.tsx
similarity index 93%
rename from packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx
rename to packages/web/src/components/token-value-slider/TokenValueSlider.tsx
index e8717cfec0e..61f35b1a567 100644
--- a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx
+++ b/packages/web/src/components/token-value-slider/TokenValueSlider.tsx
@@ -1,10 +1,9 @@
 import { useState, useRef, useEffect } from 'react'
 import * as React from 'react'
 
+import BN from 'bn.js'
 import cn from 'classnames'
 
-import { getBNPercentage } from 'utils/bnHelpers'
-
 import styles from './TokenValueSlider.module.css'
 import { TokenValueSliderProps } from './types'
 
@@ -14,6 +13,14 @@ const messages = {
   current: 'CURRENT'
 }
 
+export function getBNPercentage(n1: BN, n2: BN): number {
+  if (n2.isZero()) return 0
+  const thousand = new BN('1000')
+  const num = n1.mul(thousand).div(n2)
+  if (num.gte(thousand)) return 1
+  return num.toNumber() / 1000
+}
+
 export const TokenValueSlider: React.FC<TokenValueSliderProps> = ({
   className,
   sliderClassName,
diff --git a/packages/stems/src/components/TokenValueSlider/index.ts b/packages/web/src/components/token-value-slider/index.ts
similarity index 52%
rename from packages/stems/src/components/TokenValueSlider/index.ts
rename to packages/web/src/components/token-value-slider/index.ts
index a9d7f3ebd3a..60cbca9bac3 100644
--- a/packages/stems/src/components/TokenValueSlider/index.ts
+++ b/packages/web/src/components/token-value-slider/index.ts
@@ -1,2 +1 @@
 export { TokenValueSlider } from './TokenValueSlider'
-export { TokenValueSliderProps } from './types'
diff --git a/packages/stems/src/components/TokenValueSlider/types.ts b/packages/web/src/components/token-value-slider/types.ts
similarity index 100%
rename from packages/stems/src/components/TokenValueSlider/types.ts
rename to packages/web/src/components/token-value-slider/types.ts
diff --git a/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx b/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx
index ac403725d05..5ff12db1451 100644
--- a/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx
+++ b/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx
@@ -5,8 +5,7 @@ import {
   CommonState
 } from '@audius/common/store'
 import { formatLineupTileDuration } from '@audius/common/utils'
-import { IconCheck } from '@audius/harmony'
-import { ProgressBar } from '@audius/stems'
+import { IconCheck, ProgressBar } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 
 import styles from './GiantTrackTile.module.css'
diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
index 4bd462f22fe..2e213976948 100644
--- a/packages/web/src/components/track/desktop/TrackTile.tsx
+++ b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -22,9 +22,9 @@ import {
   IconVisibilityHidden,
   Text,
   Flex,
-  spacing
+  spacing,
+  ProgressBar
 } from '@audius/harmony'
-import { ProgressBar } from '@audius/stems'
 import cn from 'classnames'
 import moment from 'moment'
 import { useSelector } from 'react-redux'
diff --git a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
index a4698f615a2..3b3ad92228f 100644
--- a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
+++ b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
@@ -24,9 +24,9 @@ import {
   Button,
   IconArrowRight as IconArrow,
   IconCheck,
+  ProgressBar,
   Text
 } from '@audius/harmony'
-import { ProgressBar } from '@audius/stems'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
diff --git a/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx b/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx
index 31e599e4d3e..f069bead531 100644
--- a/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx
@@ -1,8 +1,9 @@
 import { BNAudio } from '@audius/common/models'
 import { formatNumberCommas } from '@audius/common/utils'
-import { TokenValueSlider } from '@audius/stems'
 import BN from 'bn.js'
 
+import { TokenValueSlider } from 'components/token-value-slider'
+
 import styles from './DashboardTokenValueSlider.module.css'
 
 type DashboardTokenValueSliderProps = {
@@ -19,11 +20,8 @@ const MinMaxWrapper = ({ value }: { value: BN }) => {
   )
 }
 
-const DashboardTokenValueSlider = ({
-  min,
-  max,
-  value
-}: DashboardTokenValueSliderProps) => {
+const DashboardTokenValueSlider = (props: DashboardTokenValueSliderProps) => {
+  const { min, max, value } = props
   return (
     <TokenValueSlider
       className={styles.sliderContainer}
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 974030131d4..873f1aea4c0 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
@@ -25,9 +25,9 @@ import {
   IconVerified,
   IconTwitter as IconTwitterBird,
   SocialButton,
-  Button
+  Button,
+  ProgressBar
 } from '@audius/harmony'
-import { ProgressBar } from '@audius/stems'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
diff --git a/packages/web/src/pages/upload-page/pages/FinishPage.tsx b/packages/web/src/pages/upload-page/pages/FinishPage.tsx
index 0ba90d48dde..d20e8ca120b 100644
--- a/packages/web/src/pages/upload-page/pages/FinishPage.tsx
+++ b/packages/web/src/pages/upload-page/pages/FinishPage.tsx
@@ -16,9 +16,9 @@ import {
   IconCloudUpload as IconUpload,
   IconValidationCheck,
   Text,
-  PlainButton
+  PlainButton,
+  ProgressBar
 } from '@audius/harmony'
-import { ProgressBar } from '@audius/stems'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'