From 72750474517e545fe77ce73a2b3fe7d25db624d8 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 28 May 2024 19:20:24 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20[C-4416,=20C-4418,=20C-441?=
 =?UTF-8?q?9=20C-4322]=20Fast=20SSR=20(#8603)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/package.json                  |   1 +
 packages/common/src/adapters/grant.ts         |  15 +
 packages/common/src/adapters/imageSize.ts     |  30 ++
 packages/common/src/adapters/index.ts         |   4 +
 .../common/src/adapters/playlistLibrary.ts    |  12 +
 packages/common/src/adapters/user.ts          | 105 ++++++
 packages/common/src/api/account.ts            |   9 +-
 packages/common/src/api/collectionAdapters.ts |   0
 packages/common/src/api/topArtists.ts         |   2 +-
 packages/common/src/api/user.ts               |   9 +-
 packages/common/src/models/Grant.ts           |  15 +-
 packages/common/src/models/ImageSizes.ts      |  24 --
 packages/common/src/models/PlaylistLibrary.ts |  11 -
 packages/common/src/models/Tipping.ts         |   3 +-
 packages/common/src/models/User.ts            | 104 +-----
 packages/common/src/sdk/userAdapters.ts       |   0
 packages/common/src/serverStore/index.ts      |   1 -
 .../common/src/serverStore/serverReducers.ts  |  48 ---
 .../src/store/cache/collections/reducer.ts    |  63 +---
 .../common/src/store/cache/tracks/reducer.ts  |  53 +--
 .../common/src/store/cache/users/reducer.ts   |  59 +---
 packages/common/src/store/reducers.ts         |   6 +-
 .../src/store/ui/related-artists/sagas.ts     |   3 +-
 .../src/components/artwork/Artwork.tsx        |   6 +-
 .../src/components/button/Button/types.ts     |   3 +-
 .../button/FilterButton/FilterButton.tsx      |   3 +-
 .../components/button/FilterButton/types.ts   |   2 +-
 .../button/IconButton/IconButton.tsx          |   3 +-
 packages/harmony/src/components/index.ts      |   1 +
 .../harmony/src/components/layout/Box/Box.tsx |   2 +-
 .../src/components/layout/Box/types.ts        |   2 +-
 .../src/components/layout/Divider/types.ts    |   2 +-
 .../harmony/src/components/layout/index.ts    |   1 -
 .../src/components/popup-menu/PopupMenu.tsx   |   2 +-
 .../src/components/popup-menu/types.tsx       |   2 +-
 .../{layout/Popup => popup}/Popup.mdx         |   0
 .../{layout/Popup => popup}/Popup.module.css  |   0
 .../{layout/Popup => popup}/Popup.stories.tsx |   2 +-
 .../{layout/Popup => popup}/Popup.tsx         |   4 +-
 .../{layout/Popup => popup}/index.ts          |   0
 .../{layout/Popup => popup}/types.ts          |   4 +-
 .../src/components/skeleton/Skeleton.tsx      |   2 +-
 packages/harmony/src/components/tag/Tag.tsx   |   6 +-
 .../src/components/text-link/TextLink.tsx     |   2 +-
 .../harmony/src/components/text-link/types.ts |   2 +-
 packages/mobile/babel.config.js               |   1 +
 packages/mobile/tsconfig.json                 |  15 +-
 packages/web/.eslintrc.js                     |   1 +
 packages/web/package.json                     |   1 +
 packages/web/src/app/ServerReduxProvider.tsx  |  63 ----
 .../app/web-player/ServerReduxProvider.tsx    |  40 +++
 .../src/app/web-player/ServerWebPlayer.tsx    | 151 ++++-----
 .../web/src/common/store/cache/users/sagas.ts |   4 +-
 .../token-dashboard/getAccountMetadataCID.ts  |   3 +-
 .../web/src/common/store/profile/sagas.js     |   8 +-
 .../common/store/user-list/favorites/sagas.ts |   2 +-
 .../common/store/user-list/followers/sagas.ts |   9 +-
 .../common/store/user-list/following/sagas.ts |   9 +-
 .../common/store/user-list/reposts/sagas.ts   |  10 +-
 .../components/AlbumDetailsText.tsx           |  18 +-
 .../cover-photo/ServerCoverPhoto.tsx          |  31 --
 .../components/link/ServerExternalLink.tsx    |  80 -----
 .../link/ServerExternalTextLink.tsx           |  25 --
 .../src/components/link/ServerUserLink.tsx    |  37 ---
 .../ServerMobilePageContainer.tsx             | 126 -------
 .../stat-banner/ServerStatBanner.tsx          |  33 --
 .../components/track/ServerGiantArtwork.tsx   |  39 ---
 .../components/track/ServerGiantTrackTile.tsx | 301 -----------------
 .../ServerUserGeneratedText.tsx               |  95 ++----
 .../DesktopServerCollectionPage.tsx           | 163 +++++++++
 .../MobileServerCollectionPage.tsx            | 142 ++++++++
 .../collection-page/ServerCollectionPage.tsx  |  18 +
 .../components/ServerTrackList.tsx            |  48 +++
 .../server-track-page/ServerTrackPage.tsx     |  15 -
 .../desktop/ServerTrackPage.tsx               | 138 --------
 .../mobile/ServerActionButtonRow.tsx          |  14 -
 .../mobile/ServerHiddenTrackHeader.tsx        |  20 --
 .../mobile/ServerStatsButtonRow.tsx           |  74 -----
 .../mobile/ServerTrackPage.tsx                | 156 ---------
 .../mobile/ServerTrackPageHeader.tsx          | 309 ------------------
 .../track-page/DesktopServerTrackPage.tsx     | 182 +++++++++++
 .../track-page/MobileServerTrackPage.tsx      | 147 +++++++++
 .../src/pages/track-page/ServerTrackPage.tsx  |  18 +
 .../pages/track-page/components/Metadata.tsx  |  21 ++
 packages/web/src/services/env/index.ts        |   2 +-
 packages/web/src/ssr/SsrContext.tsx           |  38 ++-
 .../web/src/ssr/collection/+onBeforeRender.ts |  70 +++-
 .../web/src/ssr/collection/+onRenderHtml.tsx  |  75 +++++
 .../web/src/ssr/profile/+onBeforeRender.tsx   |  19 +-
 .../web/src/ssr/track/+onBeforeRender.tsx     |  22 +-
 .../web/src/ssr/{ => track}/+onRenderHtml.tsx |  49 +--
 packages/web/src/ssr/track/onRenderHtml.tsx   |  97 ------
 .../web/src/store/configureServerStore.ts     | 151 ---------
 packages/web/src/store/serverReducers.ts      |  35 --
 packages/web/src/utils/clientUtil.ts          |   5 +-
 packages/web/src/utils/route.ts               |   2 +-
 packages/web/src/utils/theme/theme.ts         |   2 +-
 packages/web/tsconfig.json                    |  15 +-
 packages/web/vite.config.ts                   |   2 +-
 99 files changed, 1354 insertions(+), 2425 deletions(-)
 create mode 100644 packages/common/src/adapters/grant.ts
 create mode 100644 packages/common/src/adapters/imageSize.ts
 create mode 100644 packages/common/src/adapters/index.ts
 create mode 100644 packages/common/src/adapters/playlistLibrary.ts
 create mode 100644 packages/common/src/adapters/user.ts
 create mode 100644 packages/common/src/api/collectionAdapters.ts
 create mode 100644 packages/common/src/sdk/userAdapters.ts
 delete mode 100644 packages/common/src/serverStore/index.ts
 delete mode 100644 packages/common/src/serverStore/serverReducers.ts
 rename packages/harmony/src/components/{layout/Popup => popup}/Popup.mdx (100%)
 rename packages/harmony/src/components/{layout/Popup => popup}/Popup.module.css (100%)
 rename packages/harmony/src/components/{layout/Popup => popup}/Popup.stories.tsx (97%)
 rename packages/harmony/src/components/{layout/Popup => popup}/Popup.tsx (98%)
 rename packages/harmony/src/components/{layout/Popup => popup}/index.ts (100%)
 rename packages/harmony/src/components/{layout/Popup => popup}/types.ts (96%)
 delete mode 100644 packages/web/src/app/ServerReduxProvider.tsx
 create mode 100644 packages/web/src/app/web-player/ServerReduxProvider.tsx
 delete mode 100644 packages/web/src/components/cover-photo/ServerCoverPhoto.tsx
 delete mode 100644 packages/web/src/components/link/ServerExternalLink.tsx
 delete mode 100644 packages/web/src/components/link/ServerExternalTextLink.tsx
 delete mode 100644 packages/web/src/components/link/ServerUserLink.tsx
 delete mode 100644 packages/web/src/components/mobile-page-container/ServerMobilePageContainer.tsx
 delete mode 100644 packages/web/src/components/stat-banner/ServerStatBanner.tsx
 delete mode 100644 packages/web/src/components/track/ServerGiantArtwork.tsx
 delete mode 100644 packages/web/src/components/track/ServerGiantTrackTile.tsx
 create mode 100644 packages/web/src/pages/collection-page/DesktopServerCollectionPage.tsx
 create mode 100644 packages/web/src/pages/collection-page/MobileServerCollectionPage.tsx
 create mode 100644 packages/web/src/pages/collection-page/ServerCollectionPage.tsx
 create mode 100644 packages/web/src/pages/collection-page/components/ServerTrackList.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/ServerTrackPage.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/desktop/ServerTrackPage.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/mobile/ServerActionButtonRow.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/mobile/ServerHiddenTrackHeader.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/mobile/ServerStatsButtonRow.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/mobile/ServerTrackPage.tsx
 delete mode 100644 packages/web/src/pages/server-track-page/mobile/ServerTrackPageHeader.tsx
 create mode 100644 packages/web/src/pages/track-page/DesktopServerTrackPage.tsx
 create mode 100644 packages/web/src/pages/track-page/MobileServerTrackPage.tsx
 create mode 100644 packages/web/src/pages/track-page/ServerTrackPage.tsx
 create mode 100644 packages/web/src/pages/track-page/components/Metadata.tsx
 create mode 100644 packages/web/src/ssr/collection/+onRenderHtml.tsx
 rename packages/web/src/ssr/{ => track}/+onRenderHtml.tsx (52%)
 delete mode 100644 packages/web/src/ssr/track/onRenderHtml.tsx
 delete mode 100644 packages/web/src/store/configureServerStore.ts
 delete mode 100644 packages/web/src/store/serverReducers.ts

diff --git a/packages/common/package.json b/packages/common/package.json
index 0bf833ff3f5..f0db5667468 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -7,6 +7,7 @@
   "homepage": "https://github.com/AudiusProject/audius-protocol/packages/common#readme",
   "license": "",
   "exports": {
+    "./adapters": "./src/adapters/index.ts",
     "./api": "./src/api/index.ts",
     "./assets": "./src/assets/index.ts",
     "./audius-query": "./src/audius-query/index.ts",
diff --git a/packages/common/src/adapters/grant.ts b/packages/common/src/adapters/grant.ts
new file mode 100644
index 00000000000..9d8b68d9395
--- /dev/null
+++ b/packages/common/src/adapters/grant.ts
@@ -0,0 +1,15 @@
+import { full } from '@audius/sdk'
+
+import { Grant } from '~/models/Grant'
+import { decodeHashId } from '~/utils/hashIds'
+
+export const grantFromSDK = (input: full.Grant): Grant => {
+  return {
+    grantee_address: input.granteeAddress,
+    user_id: decodeHashId(input.userId) ?? null,
+    is_revoked: input.isRevoked,
+    is_approved: input.isApproved,
+    created_at: input.createdAt,
+    updated_at: input.updatedAt
+  }
+}
diff --git a/packages/common/src/adapters/imageSize.ts b/packages/common/src/adapters/imageSize.ts
new file mode 100644
index 00000000000..3224a01f5b3
--- /dev/null
+++ b/packages/common/src/adapters/imageSize.ts
@@ -0,0 +1,30 @@
+import { full } from '@audius/sdk'
+
+import {
+  CoverPhotoSizesCids,
+  ProfilePictureSizesCids,
+  SquareSizes,
+  WidthSizes
+} from '~/models/ImageSizes'
+
+export const coverPhotoSizesCIDsFromSDK = (
+  input: full.CoverPhoto
+): CoverPhotoSizesCids => {
+  return [WidthSizes.SIZE_640, WidthSizes.SIZE_2000].reduce((out, size) => {
+    out[size] = input[size] ?? null
+    return out
+  }, {})
+}
+
+export const profilePictureSizesCIDsFromSDK = (
+  input: full.ProfilePicture
+): ProfilePictureSizesCids => {
+  return [
+    SquareSizes.SIZE_1000_BY_1000,
+    SquareSizes.SIZE_150_BY_150,
+    SquareSizes.SIZE_480_BY_480
+  ].reduce((out, size) => {
+    out[size] = input[size] ?? null
+    return out
+  }, {})
+}
diff --git a/packages/common/src/adapters/index.ts b/packages/common/src/adapters/index.ts
new file mode 100644
index 00000000000..b3776c10afa
--- /dev/null
+++ b/packages/common/src/adapters/index.ts
@@ -0,0 +1,4 @@
+export * from './grant'
+export * from './imageSize'
+export * from './playlistLibrary'
+export * from './user'
diff --git a/packages/common/src/adapters/playlistLibrary.ts b/packages/common/src/adapters/playlistLibrary.ts
new file mode 100644
index 00000000000..f6e75b1ce78
--- /dev/null
+++ b/packages/common/src/adapters/playlistLibrary.ts
@@ -0,0 +1,12 @@
+import { full } from '@audius/sdk'
+
+import { PlaylistLibrary, PlaylistLibraryItem } from '~/models/PlaylistLibrary'
+
+export const playlistLibraryFromSDK = (
+  input?: full.PlaylistLibrary
+): PlaylistLibrary | undefined => {
+  if (!input) return undefined
+  return {
+    contents: input.contents as PlaylistLibraryItem[]
+  }
+}
diff --git a/packages/common/src/adapters/user.ts b/packages/common/src/adapters/user.ts
new file mode 100644
index 00000000000..79949d4e14c
--- /dev/null
+++ b/packages/common/src/adapters/user.ts
@@ -0,0 +1,105 @@
+import type { full } from '@audius/sdk'
+import { omit } from 'lodash'
+import snakecaseKeys from 'snakecase-keys'
+
+import {
+  ManagedUserMetadata,
+  UserManagerMetadata,
+  UserMetadata
+} from '~/models/User'
+import { SolanaWalletAddress, StringWei } from '~/models/Wallet'
+import { decodeHashId } from '~/utils/hashIds'
+import { removeNullable } from '~/utils/typeUtils'
+
+import { grantFromSDK } from './grant'
+import {
+  coverPhotoSizesCIDsFromSDK,
+  profilePictureSizesCIDsFromSDK
+} from './imageSize'
+import { playlistLibraryFromSDK } from './playlistLibrary'
+
+/** Converts a SDK `full.UserFull` response to a UserMetadata. Note: Will _not_ include the "current user" fields as those aren't returned by the Users API */
+export const userMetadataFromSDK = (
+  input: full.UserFull
+): UserMetadata | undefined => {
+  const user = snakecaseKeys(input)
+  const decodedUserId = decodeHashId(user.id)
+  if (!decodedUserId) {
+    return undefined
+  }
+
+  const newUser: UserMetadata = {
+    // Fields from API that are omitted in this model
+    ...omit(user, ['id', 'cover_photo_legacy', 'profile_picture_legacy']),
+
+    // Conversions
+    artist_pick_track_id: user.artist_pick_track_id
+      ? decodeHashId(user.artist_pick_track_id)
+      : null,
+
+    // Nested Types
+    playlist_library: playlistLibraryFromSDK(user.playlist_library) ?? null,
+    cover_photo_cids: user.cover_photo_cids
+      ? coverPhotoSizesCIDsFromSDK(user.cover_photo_cids)
+      : null,
+    profile_picture_cids: user.profile_picture_cids
+      ? profilePictureSizesCIDsFromSDK(user.profile_picture_cids)
+      : null,
+
+    // Re-types
+    balance: user.balance as StringWei,
+    associated_wallets_balance: user.associated_wallets_balance as StringWei,
+    total_balance: user.total_balance as StringWei,
+    user_id: decodedUserId,
+    spl_wallet: user.spl_wallet as SolanaWalletAddress,
+
+    // Legacy Overrides
+    cover_photo: user.cover_photo_legacy ?? null,
+    profile_picture: user.profile_picture_legacy ?? null,
+
+    // Required Nullable fields
+    bio: user.bio ?? null,
+    cover_photo_sizes: user.cover_photo_sizes ?? null,
+    creator_node_endpoint: user.creator_node_endpoint ?? null,
+    location: user.location ?? null,
+    metadata_multihash: user.metadata_multihash ?? null,
+    profile_picture_sizes: user.profile_picture_sizes ?? null
+  }
+
+  return newUser
+}
+
+export const userMetadataListFromSDK = (input?: full.UserFull[]) =>
+  input ? input.map((d) => userMetadataFromSDK(d)).filter(removeNullable) : []
+
+export const managedUserFromSDK = (
+  input: full.ManagedUser
+): ManagedUserMetadata | undefined => {
+  const user = userMetadataFromSDK(input.user)
+  if (!user) {
+    return undefined
+  }
+  return {
+    user,
+    grant: grantFromSDK(input.grant)
+  }
+}
+
+export const managedUserListFromSDK = (input?: full.ManagedUser[]) =>
+  input ? input.map((d) => managedUserFromSDK(d)).filter(removeNullable) : []
+
+export const userManagerFromSDK = (
+  input: full.UserManager
+): UserManagerMetadata | undefined => {
+  const manager = userMetadataFromSDK(input.manager)
+  if (!manager) {
+    return undefined
+  }
+  return {
+    manager,
+    grant: grantFromSDK(input.grant)
+  }
+}
+
+export const userManagerListFromSDK = (input?: full.UserManager[]) =>
+  input ? input.map((d) => userManagerFromSDK(d)).filter(removeNullable) : []
diff --git a/packages/common/src/api/account.ts b/packages/common/src/api/account.ts
index 4d0ea8a9261..fe63b3dbfa0 100644
--- a/packages/common/src/api/account.ts
+++ b/packages/common/src/api/account.ts
@@ -1,13 +1,8 @@
 import dayjs from 'dayjs'
 
+import { managedUserListFromSDK, userManagerListFromSDK } from '~/adapters/user'
 import { createApi } from '~/audius-query'
-import {
-  ID,
-  User,
-  UserMetadata,
-  managedUserListFromSDK,
-  userManagerListFromSDK
-} from '~/models'
+import { ID, User, UserMetadata } from '~/models'
 
 import { Id } from './utils'
 
diff --git a/packages/common/src/api/collectionAdapters.ts b/packages/common/src/api/collectionAdapters.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/common/src/api/topArtists.ts b/packages/common/src/api/topArtists.ts
index dccd75dd97d..0424b32ecf8 100644
--- a/packages/common/src/api/topArtists.ts
+++ b/packages/common/src/api/topArtists.ts
@@ -1,7 +1,7 @@
 import { uniq } from 'lodash'
 
+import { userMetadataListFromSDK } from '~/adapters/user'
 import { createApi } from '~/audius-query'
-import { userMetadataListFromSDK } from '~/models'
 import { ID } from '~/models/Identifiers'
 import { Kind } from '~/models/Kind'
 
diff --git a/packages/common/src/api/user.ts b/packages/common/src/api/user.ts
index 6fbcae1bb0d..26d287237cd 100644
--- a/packages/common/src/api/user.ts
+++ b/packages/common/src/api/user.ts
@@ -1,13 +1,8 @@
 import { full } from '@audius/sdk'
 
+import { userMetadataListFromSDK } from '~/adapters/user'
 import { createApi } from '~/audius-query'
-import {
-  ID,
-  Kind,
-  OptionalId,
-  StringUSDC,
-  userMetadataListFromSDK
-} from '~/models'
+import { ID, Kind, OptionalId, StringUSDC } from '~/models'
 import {
   USDCTransactionDetails,
   USDCTransactionMethod,
diff --git a/packages/common/src/models/Grant.ts b/packages/common/src/models/Grant.ts
index 9629573c8da..8e7a3f54752 100644
--- a/packages/common/src/models/Grant.ts
+++ b/packages/common/src/models/Grant.ts
@@ -1,6 +1,4 @@
-import { full } from '@audius/sdk'
-
-import { Nullable, decodeHashId } from '~/utils'
+import { Nullable } from '~/utils'
 
 import { ID } from './Identifiers'
 
@@ -12,14 +10,3 @@ export type Grant = {
   created_at: string
   updated_at: string
 }
-
-export const grantFromSDK = (input: full.Grant): Grant => {
-  return {
-    grantee_address: input.granteeAddress,
-    user_id: decodeHashId(input.userId) ?? null,
-    is_revoked: input.isRevoked,
-    is_approved: input.isApproved,
-    created_at: input.createdAt,
-    updated_at: input.updatedAt
-  }
-}
diff --git a/packages/common/src/models/ImageSizes.ts b/packages/common/src/models/ImageSizes.ts
index b45964cb1f1..2880f6201fd 100644
--- a/packages/common/src/models/ImageSizes.ts
+++ b/packages/common/src/models/ImageSizes.ts
@@ -1,5 +1,3 @@
-import { full } from '@audius/sdk'
-
 export enum DefaultSizes {
   // Used as a catch-all fallback when no other size data is available.
   OVERRIDE = 'OVERRIDE'
@@ -33,25 +31,3 @@ export type ProfilePictureSizesCids =
 export type ProfilePictureSizes = ImageSizesObject<SquareSizes>
 export type CoverPhotoSizesCids = ImageSizesObjectWithoutOverride<WidthSizes>
 export type CoverPhotoSizes = ImageSizesObject<WidthSizes>
-
-export const coverPhotoSizesCIDsFromSDK = (
-  input: full.CoverPhoto
-): CoverPhotoSizesCids => {
-  return [WidthSizes.SIZE_640, WidthSizes.SIZE_2000].reduce((out, size) => {
-    out[size] = input[size] ?? null
-    return out
-  }, {})
-}
-
-export const profilePictureSizesCIDsFromSDK = (
-  input: full.ProfilePicture
-): ProfilePictureSizesCids => {
-  return [
-    SquareSizes.SIZE_1000_BY_1000,
-    SquareSizes.SIZE_150_BY_150,
-    SquareSizes.SIZE_480_BY_480
-  ].reduce((out, size) => {
-    out[size] = input[size] ?? null
-    return out
-  }, {})
-}
diff --git a/packages/common/src/models/PlaylistLibrary.ts b/packages/common/src/models/PlaylistLibrary.ts
index 01070f44912..4843bd7a5d6 100644
--- a/packages/common/src/models/PlaylistLibrary.ts
+++ b/packages/common/src/models/PlaylistLibrary.ts
@@ -1,5 +1,3 @@
-import { full } from '@audius/sdk'
-
 import { SmartCollectionVariant } from '~/models/SmartCollectionVariant'
 
 import { ID } from './Identifiers'
@@ -45,12 +43,3 @@ export type PlaylistLibraryItem =
 export type PlaylistLibrary = {
   contents: (PlaylistLibraryFolder | PlaylistLibraryIdentifier)[]
 }
-
-export const playlistLibraryFromSDK = (
-  input?: full.PlaylistLibrary
-): PlaylistLibrary | undefined => {
-  if (!input) return undefined
-  return {
-    contents: input.contents as PlaylistLibraryItem[]
-  }
-}
diff --git a/packages/common/src/models/Tipping.ts b/packages/common/src/models/Tipping.ts
index 46ab41489a2..5615a595ecf 100644
--- a/packages/common/src/models/Tipping.ts
+++ b/packages/common/src/models/Tipping.ts
@@ -1,9 +1,10 @@
 import { full } from '@audius/sdk'
 
+import { userMetadataFromSDK } from '~/adapters/user'
 import { ID } from '~/models/Identifiers'
 import { removeNullable } from '~/utils/typeUtils'
 
-import { UserMetadata, userMetadataFromSDK } from './User'
+import { UserMetadata } from './User'
 import { StringWei } from './Wallet'
 
 export type Supporter = {
diff --git a/packages/common/src/models/User.ts b/packages/common/src/models/User.ts
index 9b131a1a5e0..672b02545c2 100644
--- a/packages/common/src/models/User.ts
+++ b/packages/common/src/models/User.ts
@@ -1,7 +1,3 @@
-import { full } from '@audius/sdk'
-import { omit } from 'lodash'
-import snakecaseKeys from 'snakecase-keys'
-
 import { Collectible, CollectiblesMetadata } from '~/models/Collectible'
 import { Color } from '~/models/Color'
 import { CID, ID } from '~/models/Identifiers'
@@ -9,19 +5,13 @@ import {
   CoverPhotoSizes,
   CoverPhotoSizesCids,
   ProfilePictureSizes,
-  ProfilePictureSizesCids,
-  coverPhotoSizesCIDsFromSDK,
-  profilePictureSizesCIDsFromSDK
+  ProfilePictureSizesCids
 } from '~/models/ImageSizes'
-import {
-  PlaylistLibrary,
-  playlistLibraryFromSDK
-} from '~/models/PlaylistLibrary'
+import { PlaylistLibrary } from '~/models/PlaylistLibrary'
 import { SolanaWalletAddress, StringWei, WalletAddress } from '~/models/Wallet'
-import { decodeHashId } from '~/utils/hashIds'
-import { Nullable, removeNullable } from '~/utils/typeUtils'
+import { Nullable } from '~/utils/typeUtils'
 
-import { Grant, grantFromSDK } from './Grant'
+import { Grant } from './Grant'
 import { Timestamped } from './Timestamped'
 import { UserEvent } from './UserEvent'
 
@@ -134,89 +124,3 @@ export type InstagramUser = {
 export type TikTokUser = {
   verified: boolean
 }
-
-/** Converts a SDK `full.UserFull` response to a UserMetadata. Note: Will _not_ include the "current user" fields as those aren't returned by the Users API */
-export const userMetadataFromSDK = (
-  input: full.UserFull
-): UserMetadata | undefined => {
-  const user = snakecaseKeys(input)
-  const decodedUserId = decodeHashId(user.id)
-  if (!decodedUserId) {
-    return undefined
-  }
-
-  const newUser: UserMetadata = {
-    // Fields from API that are omitted in this model
-    ...omit(user, ['id', 'cover_photo_legacy', 'profile_picture_legacy']),
-
-    // Conversions
-    artist_pick_track_id: user.artist_pick_track_id
-      ? decodeHashId(user.artist_pick_track_id)
-      : null,
-
-    // Nested Types
-    playlist_library: playlistLibraryFromSDK(user.playlist_library) ?? null,
-    cover_photo_cids: user.cover_photo_cids
-      ? coverPhotoSizesCIDsFromSDK(user.cover_photo_cids)
-      : null,
-    profile_picture_cids: user.profile_picture_cids
-      ? profilePictureSizesCIDsFromSDK(user.profile_picture_cids)
-      : null,
-
-    // Re-types
-    balance: user.balance as StringWei,
-    associated_wallets_balance: user.associated_wallets_balance as StringWei,
-    total_balance: user.total_balance as StringWei,
-    user_id: decodedUserId,
-    spl_wallet: user.spl_wallet as SolanaWalletAddress,
-
-    // Legacy Overrides
-    cover_photo: user.cover_photo_legacy ?? null,
-    profile_picture: user.profile_picture_legacy ?? null,
-
-    // Required Nullable fields
-    bio: user.bio ?? null,
-    cover_photo_sizes: user.cover_photo_sizes ?? null,
-    creator_node_endpoint: user.creator_node_endpoint ?? null,
-    location: user.location ?? null,
-    metadata_multihash: user.metadata_multihash ?? null,
-    profile_picture_sizes: user.profile_picture_sizes ?? null
-  }
-
-  return newUser
-}
-
-export const userMetadataListFromSDK = (input?: full.UserFull[]) =>
-  input ? input.map((d) => userMetadataFromSDK(d)).filter(removeNullable) : []
-
-export const managedUserFromSDK = (
-  input: full.ManagedUser
-): ManagedUserMetadata | undefined => {
-  const user = userMetadataFromSDK(input.user)
-  if (!user) {
-    return undefined
-  }
-  return {
-    user,
-    grant: grantFromSDK(input.grant)
-  }
-}
-
-export const managedUserListFromSDK = (input?: full.ManagedUser[]) =>
-  input ? input.map((d) => managedUserFromSDK(d)).filter(removeNullable) : []
-
-export const userManagerFromSDK = (
-  input: full.UserManager
-): UserManagerMetadata | undefined => {
-  const manager = userMetadataFromSDK(input.manager)
-  if (!manager) {
-    return undefined
-  }
-  return {
-    manager,
-    grant: grantFromSDK(input.grant)
-  }
-}
-
-export const userManagerListFromSDK = (input?: full.UserManager[]) =>
-  input ? input.map((d) => userManagerFromSDK(d)).filter(removeNullable) : []
diff --git a/packages/common/src/sdk/userAdapters.ts b/packages/common/src/sdk/userAdapters.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/common/src/serverStore/index.ts b/packages/common/src/serverStore/index.ts
deleted file mode 100644
index 8011ffe8be0..00000000000
--- a/packages/common/src/serverStore/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './serverReducers'
diff --git a/packages/common/src/serverStore/serverReducers.ts b/packages/common/src/serverStore/serverReducers.ts
deleted file mode 100644
index faf6b856733..00000000000
--- a/packages/common/src/serverStore/serverReducers.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { History } from 'history'
-import { combineReducers } from 'redux'
-import type { Storage } from 'redux-persist'
-
-import account from '~/store/account/slice'
-import collectionsReducer from '~/store/cache/collections/reducer'
-import { asCache } from '~/store/cache/reducer'
-import tracksReducer from '~/store/cache/tracks/reducer'
-import usersReducer from '~/store/cache/users/reducer'
-// import collection from '~/store/pages/collection/reducer'
-// import profileReducer from '~/store/pages/profile/reducer'
-import track from '~/store/pages/track/reducer'
-import theme from '~/store/ui/theme/slice'
-
-import { Kind, SsrPageProps } from '../models'
-
-/**
- * A function that creates common reducers.
- * @returns an object of all reducers to be used with `combineReducers`
- */
-export const serverReducers = (
-  _storage: Storage,
-  ssrPageProps?: SsrPageProps,
-  _isServerSide?: boolean,
-  _history?: History
-) => ({
-  account,
-
-  // Cache
-  // @ts-ignore
-  collections: asCache(collectionsReducer(ssrPageProps), Kind.COLLECTIONS),
-  // @ts-ignore
-  tracks: asCache(tracksReducer(ssrPageProps), Kind.TRACKS),
-  // @ts-ignore
-  users: asCache(usersReducer(ssrPageProps), Kind.USERS),
-
-  // UI
-  ui: combineReducers({
-    theme
-  }),
-
-  // Pages
-  pages: combineReducers({
-    // collection: collection(ssrPageProps),
-    // profile: profileReducer(ssrPageProps),
-    track: track(ssrPageProps)
-  })
-})
diff --git a/packages/common/src/store/cache/collections/reducer.ts b/packages/common/src/store/cache/collections/reducer.ts
index 672580a68a8..f78e83d0674 100644
--- a/packages/common/src/store/cache/collections/reducer.ts
+++ b/packages/common/src/store/cache/collections/reducer.ts
@@ -1,16 +1,7 @@
-import snakecaseKeys from 'snakecase-keys'
-
-import { makePlaylist } from '~/services/audius-api-client/ResponseAdapter'
 import { initialCacheState } from '~/store/cache/reducer'
 import { makeUid } from '~/utils/uid'
 
-import {
-  Collection,
-  ID,
-  Kind,
-  PlaylistTrackId,
-  SsrPageProps
-} from '../../../models'
+import { Collection, ID, Kind, PlaylistTrackId } from '../../../models'
 import {
   AddEntriesAction,
   AddSuccededAction,
@@ -98,54 +89,10 @@ const actionsMap = {
   }
 }
 
-const buildInitialState = (ssrPageProps?: SsrPageProps) => {
-  // If we have preloaded data from the server, populate the initial
-  // cache state with it
-  if (ssrPageProps?.collection) {
-    // @ts-ignore
-    const collection = makePlaylist(snakecaseKeys(ssrPageProps.collection))
-    if (!collection) return initialState
-
-    const id = collection.playlist_id
-    const uid = makeUid(Kind.COLLECTIONS, id)
-
-    return {
-      ...initialState,
-      entries: {
-        [id]: {
-          metadata: collection,
-          _timestamp: Date.now()
-        }
-      },
-      uids: {
-        [uid]: collection.playlist_id
-      },
-      statuses: {
-        [id]: 'SUCCESS'
-      },
-      permalinks: {
-        ...(collection.permalink
-          ? {
-              [collection.permalink]: collection.playlist_id
-            }
-          : {})
-      }
-    }
-  }
-  return initialState
+const reducer = (state = initialState, action: any) => {
+  const matchingReduceFunction = actionsMap[action.type]
+  if (!matchingReduceFunction) return state
+  return matchingReduceFunction(state, action)
 }
 
-const reducer =
-  (ssrPageProps?: SsrPageProps) =>
-  (state: CollectionsCacheState, action: any) => {
-    if (!state) {
-      // @ts-ignore
-      state = buildInitialState(ssrPageProps)
-    }
-
-    const matchingReduceFunction = actionsMap[action.type]
-    if (!matchingReduceFunction) return state
-    return matchingReduceFunction(state, action)
-  }
-
 export default reducer
diff --git a/packages/common/src/store/cache/tracks/reducer.ts b/packages/common/src/store/cache/tracks/reducer.ts
index 47e0a27322d..ed71cf64162 100644
--- a/packages/common/src/store/cache/tracks/reducer.ts
+++ b/packages/common/src/store/cache/tracks/reducer.ts
@@ -1,13 +1,8 @@
-import snakecaseKeys from 'snakecase-keys'
-
 import { Cache } from '~/models/Cache'
 import { ID } from '~/models/Identifiers'
 import { Kind } from '~/models/Kind'
-import { SsrPageProps } from '~/models/SsrPageProps'
 import { Track } from '~/models/Track'
-import { makeTrack } from '~/services/audius-api-client/ResponseAdapter'
 import { initialCacheState } from '~/store/cache/reducer'
-import { makeUid } from '~/utils/uid'
 
 import {
   AddEntriesAction,
@@ -77,47 +72,13 @@ const actionsMap = {
   }
 }
 
-const buildInitialState = (ssrPageProps?: SsrPageProps) => {
-  // If we have preloaded data from the server, populate the initial
-  // cache state with it
-  if (ssrPageProps?.track) {
-    // @ts-ignore
-    const track = makeTrack(snakecaseKeys(ssrPageProps.track))
-    if (!track) return initialState
-
-    const id = track.track_id
-    const uid = makeUid(Kind.TRACKS, id)
-
-    return {
-      ...initialState,
-      entries: {
-        [id]: {
-          metadata: track,
-          _timestamp: Date.now()
-        }
-      },
-      uids: {
-        [uid]: track.track_id
-      },
-      statuses: {
-        [id]: 'SUCCESS'
-      }
-    }
-  }
-  return initialState
+const reducer = (
+  state: TracksCacheState = initialState,
+  action: AddSuccededAction<Track>
+) => {
+  const matchingReduceFunction = actionsMap[action.type]
+  if (!matchingReduceFunction) return state
+  return matchingReduceFunction(state, action)
 }
 
-const reducer =
-  (ssrPageProps?: SsrPageProps) =>
-  (state: TracksCacheState, action: AddSuccededAction<Track>) => {
-    if (!state) {
-      // @ts-ignore
-      state = buildInitialState(ssrPageProps)
-    }
-
-    const matchingReduceFunction = actionsMap[action.type]
-    if (!matchingReduceFunction) return state
-    return matchingReduceFunction(state, action)
-  }
-
 export default reducer
diff --git a/packages/common/src/store/cache/users/reducer.ts b/packages/common/src/store/cache/users/reducer.ts
index 60a56bb4501..436c1c88050 100644
--- a/packages/common/src/store/cache/users/reducer.ts
+++ b/packages/common/src/store/cache/users/reducer.ts
@@ -1,13 +1,8 @@
-import snakecaseKeys from 'snakecase-keys'
-
 import { Cache } from '~/models/Cache'
 import { ID } from '~/models/Identifiers'
 import { Kind } from '~/models/Kind'
-import { SsrPageProps } from '~/models/SsrPageProps'
 import { User } from '~/models/User'
-import { makeUser } from '~/services/audius-api-client/ResponseAdapter'
 import { initialCacheState } from '~/store/cache/reducer'
-import { makeUid } from '~/utils/uid'
 
 import {
   AddEntriesAction,
@@ -63,53 +58,13 @@ const actionsMap = {
   }
 }
 
-const buildInitialState = (ssrPageProps?: SsrPageProps) => {
-  // If we have preloaded data from the server, populate the initial
-  // cache state with it
-  if (ssrPageProps) {
-    const apiUser =
-      ssrPageProps.user ??
-      ssrPageProps.track?.user ??
-      ssrPageProps.collection?.user ??
-      null
-
-    // @ts-ignore
-    const user = apiUser ? makeUser(snakecaseKeys(apiUser)) : null
-    if (!user) return initialState
-
-    const id = user.user_id
-    const uid = makeUid(Kind.USERS, id)
-
-    return {
-      ...initialState,
-      entries: {
-        [id]: {
-          metadata: user,
-          _timestamp: Date.now()
-        }
-      },
-      uids: {
-        [uid]: user.user_id
-      },
-      statuses: {
-        [id]: 'SUCCESS'
-      }
-    }
-  }
-  return initialState
+const reducer = (
+  state: UsersCacheState = initialState,
+  action: AddSuccededAction<User>
+) => {
+  const matchingReduceFunction = actionsMap[action.type]
+  if (!matchingReduceFunction) return state
+  return matchingReduceFunction(state, action)
 }
 
-const reducer =
-  (ssrPageProps?: SsrPageProps) =>
-  (state: UsersCacheState, action: AddSuccededAction<User>) => {
-    if (!state) {
-      // @ts-ignore
-      state = buildInitialState(ssrPageProps)
-    }
-
-    const matchingReduceFunction = actionsMap[action.type]
-    if (!matchingReduceFunction) return state
-    return matchingReduceFunction(state, action)
-  }
-
 export default reducer
diff --git a/packages/common/src/store/reducers.ts b/packages/common/src/store/reducers.ts
index 80dc1c2bc74..ca73766e68d 100644
--- a/packages/common/src/store/reducers.ts
+++ b/packages/common/src/store/reducers.ts
@@ -164,13 +164,13 @@ export const reducers = (
 
   // Cache
   // @ts-ignore
-  collections: asCache(collectionsReducer(ssrPageProps), Kind.COLLECTIONS),
+  collections: asCache(collectionsReducer, Kind.COLLECTIONS),
   // TODO: Fix type error
   // @ts-ignore
-  tracks: asCache(tracksReducer(ssrPageProps), Kind.TRACKS),
+  tracks: asCache(tracksReducer, Kind.TRACKS),
   // TODO: Fix type error
   // @ts-ignore
-  users: asCache(usersReducer(ssrPageProps), Kind.USERS),
+  users: asCache(usersReducer, Kind.USERS),
 
   savedCollections: savedCollectionsReducer,
 
diff --git a/packages/common/src/store/ui/related-artists/sagas.ts b/packages/common/src/store/ui/related-artists/sagas.ts
index f517f2cd121..48dfc23fc46 100644
--- a/packages/common/src/store/ui/related-artists/sagas.ts
+++ b/packages/common/src/store/ui/related-artists/sagas.ts
@@ -2,8 +2,9 @@ import { PayloadAction } from '@reduxjs/toolkit'
 import { shuffle } from 'lodash'
 import { call, put, select, takeEvery } from 'typed-redux-saga'
 
+import { userMetadataListFromSDK } from '~/adapters/user'
 import { Id } from '~/api'
-import { ID, UserMetadata, userMetadataListFromSDK } from '~/models'
+import { ID, UserMetadata } from '~/models'
 import { DoubleKeys } from '~/services/remote-config'
 import { accountSelectors } from '~/store/account'
 import { processAndCacheUsers } from '~/store/cache'
diff --git a/packages/harmony/src/components/artwork/Artwork.tsx b/packages/harmony/src/components/artwork/Artwork.tsx
index 2c4fda1cca8..184594952e0 100644
--- a/packages/harmony/src/components/artwork/Artwork.tsx
+++ b/packages/harmony/src/components/artwork/Artwork.tsx
@@ -2,13 +2,15 @@ import { ComponentProps, useEffect, useState } from 'react'
 
 import { useTheme } from '@emotion/react'
 
-import { Box, BoxProps, Flex } from 'components/layout'
-import { Skeleton } from 'components/skeleton'
+import { Box, BoxProps } from '../layout/Box'
+import { Flex } from '../layout/Flex'
+import { Skeleton } from '../skeleton'
 
 export type ArtworkProps = {
   isLoading?: boolean
   borderWidth?: number
   'data-testid'?: string
+  noLoading?: boolean
 } & Pick<ComponentProps<'img'>, 'src'> &
   BoxProps
 
diff --git a/packages/harmony/src/components/button/Button/types.ts b/packages/harmony/src/components/button/Button/types.ts
index ee7927e218c..6ae5e8b0799 100644
--- a/packages/harmony/src/components/button/Button/types.ts
+++ b/packages/harmony/src/components/button/Button/types.ts
@@ -1,7 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react'
 
-import type { SpecialColors } from 'foundations/color'
-
+import type { SpecialColors } from '../../../foundations/color'
 import { BaseButtonProps } from '../BaseButton/types'
 
 export type HTMLButtonProps = ComponentPropsWithoutRef<'button'>
diff --git a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
index 8aa4a7213d3..d82cbff18b2 100644
--- a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
+++ b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx
@@ -3,7 +3,8 @@ import { forwardRef, RefObject, useRef, useState, useCallback } from 'react'
 import { CSSObject, useTheme } from '@emotion/react'
 
 import { BaseButton } from 'components/button/BaseButton/BaseButton'
-import { Box, Flex, Paper, Popup } from 'components/layout'
+import { Box, Flex, Paper } from 'components/layout'
+import { Popup } from 'components/popup'
 import { useControlled } from 'hooks/useControlled'
 import { IconCaretDown, IconCloseAlt } from 'icons'
 
diff --git a/packages/harmony/src/components/button/FilterButton/types.ts b/packages/harmony/src/components/button/FilterButton/types.ts
index d8668a31e19..74f595bffff 100644
--- a/packages/harmony/src/components/button/FilterButton/types.ts
+++ b/packages/harmony/src/components/button/FilterButton/types.ts
@@ -1,5 +1,5 @@
 import { IconComponent } from 'components/icon'
-import { Origin } from 'components/layout/Popup/types'
+import { Origin } from 'components/popup/types'
 
 export type FilterButtonSize = 'default' | 'small'
 
diff --git a/packages/harmony/src/components/button/IconButton/IconButton.tsx b/packages/harmony/src/components/button/IconButton/IconButton.tsx
index cf28073750c..b93a25bd1b5 100644
--- a/packages/harmony/src/components/button/IconButton/IconButton.tsx
+++ b/packages/harmony/src/components/button/IconButton/IconButton.tsx
@@ -2,8 +2,7 @@ import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
 
-import type { IconComponent, IconProps } from 'components/icon'
-
+import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
 import type { BaseButtonProps } from '../BaseButton/types'
 
diff --git a/packages/harmony/src/components/index.ts b/packages/harmony/src/components/index.ts
index 9b970e8b4f0..4e743cc6f29 100644
--- a/packages/harmony/src/components/index.ts
+++ b/packages/harmony/src/components/index.ts
@@ -13,6 +13,7 @@ export * from './segmented-control'
 export * from './scrollbar'
 export * from './radio'
 export * from './radio-group'
+export * from './popup'
 export * from './popup-menu'
 export * from './modal'
 export * from './progress-bar'
diff --git a/packages/harmony/src/components/layout/Box/Box.tsx b/packages/harmony/src/components/layout/Box/Box.tsx
index 8bc8e03e30e..382875aba28 100644
--- a/packages/harmony/src/components/layout/Box/Box.tsx
+++ b/packages/harmony/src/components/layout/Box/Box.tsx
@@ -60,7 +60,7 @@ export const Box = styled.div<BoxProps>(
       paddingLeft: (padL && spacing[padL as SpacingOptions]) ?? padL,
       paddingRight: (padR && spacing[padR as SpacingOptions]) ?? padR,
       paddingBottom: (padB && spacing[padB as SpacingOptions]) ?? padB,
-      marginTop: marginT && spacing[marginT],
+      marginTop: (marginT && spacing[marginT as SpacingOptions]) ?? marginT,
       marginLeft: marginL && spacing[marginL],
       marginRight: marginR && spacing[marginR],
       marginBottom: marginB && spacing[marginB],
diff --git a/packages/harmony/src/components/layout/Box/types.ts b/packages/harmony/src/components/layout/Box/types.ts
index 3b4fd8522dc..61f40406460 100644
--- a/packages/harmony/src/components/layout/Box/types.ts
+++ b/packages/harmony/src/components/layout/Box/types.ts
@@ -34,7 +34,7 @@ export type BaseBoxProps = {
   /** Margin Vertical */
   mv?: SpacingOptions
   /** Margin Top */
-  mt?: SpacingOptions
+  mt?: SpacingOptions | CSSProperties['marginTop']
   /** Margin Left */
   ml?: SpacingOptions
   /** Margin Right */
diff --git a/packages/harmony/src/components/layout/Divider/types.ts b/packages/harmony/src/components/layout/Divider/types.ts
index d78bd2e9d93..8cf831caaf6 100644
--- a/packages/harmony/src/components/layout/Divider/types.ts
+++ b/packages/harmony/src/components/layout/Divider/types.ts
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { BorderColors } from 'foundations'
+import { BorderColors } from '../../../foundations/color'
 
 export type DividerProps = {
   orientation?: 'horizontal' | 'vertical'
diff --git a/packages/harmony/src/components/layout/index.ts b/packages/harmony/src/components/layout/index.ts
index f055990b5dd..a7401bd5347 100644
--- a/packages/harmony/src/components/layout/index.ts
+++ b/packages/harmony/src/components/layout/index.ts
@@ -2,4 +2,3 @@ export * from './Box'
 export * from './Divider'
 export * from './Flex'
 export * from './Paper'
-export * from './Popup'
diff --git a/packages/harmony/src/components/popup-menu/PopupMenu.tsx b/packages/harmony/src/components/popup-menu/PopupMenu.tsx
index 67d30a7ca49..4ad607d011a 100644
--- a/packages/harmony/src/components/popup-menu/PopupMenu.tsx
+++ b/packages/harmony/src/components/popup-menu/PopupMenu.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'
 
 import cn from 'classnames'
 
-import { Popup } from '../layout/Popup'
+import { Popup } from '../popup'
 
 import styles from './PopupMenu.module.css'
 import { PopupMenuItem, PopupMenuProps } from './types'
diff --git a/packages/harmony/src/components/popup-menu/types.tsx b/packages/harmony/src/components/popup-menu/types.tsx
index 247c07381ed..2c2b52694e1 100644
--- a/packages/harmony/src/components/popup-menu/types.tsx
+++ b/packages/harmony/src/components/popup-menu/types.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, MouseEvent } from 'react'
 
-import { PopupProps } from '../layout/Popup'
+import { PopupProps } from '../popup'
 
 type ApplicablePopupProps = Pick<
   PopupProps,
diff --git a/packages/harmony/src/components/layout/Popup/Popup.mdx b/packages/harmony/src/components/popup/Popup.mdx
similarity index 100%
rename from packages/harmony/src/components/layout/Popup/Popup.mdx
rename to packages/harmony/src/components/popup/Popup.mdx
diff --git a/packages/harmony/src/components/layout/Popup/Popup.module.css b/packages/harmony/src/components/popup/Popup.module.css
similarity index 100%
rename from packages/harmony/src/components/layout/Popup/Popup.module.css
rename to packages/harmony/src/components/popup/Popup.module.css
diff --git a/packages/harmony/src/components/layout/Popup/Popup.stories.tsx b/packages/harmony/src/components/popup/Popup.stories.tsx
similarity index 97%
rename from packages/harmony/src/components/layout/Popup/Popup.stories.tsx
rename to packages/harmony/src/components/popup/Popup.stories.tsx
index ed3d2bb91ce..7fbfbfa4069 100644
--- a/packages/harmony/src/components/layout/Popup/Popup.stories.tsx
+++ b/packages/harmony/src/components/popup/Popup.stories.tsx
@@ -34,7 +34,7 @@ const Render = (props: PopupProps) => {
 }
 
 const meta: Meta<typeof Popup> = {
-  title: 'Layout/Popup [beta]',
+  title: 'Components/Popup [beta]',
   component: Popup,
   parameters: {
     controls: {
diff --git a/packages/harmony/src/components/layout/Popup/Popup.tsx b/packages/harmony/src/components/popup/Popup.tsx
similarity index 98%
rename from packages/harmony/src/components/layout/Popup/Popup.tsx
rename to packages/harmony/src/components/popup/Popup.tsx
index c409c2df005..223ace58b9d 100644
--- a/packages/harmony/src/components/layout/Popup/Popup.tsx
+++ b/packages/harmony/src/components/popup/Popup.tsx
@@ -17,8 +17,8 @@ import { PlainButton } from 'components/button'
 import { IconClose } from 'icons'
 import { ModalState } from 'utils/modalState'
 
-import { useClickOutside } from '../../../hooks/useClickOutside'
-import { getScrollParent } from '../../../utils/getScrollParent'
+import { useClickOutside } from '../../hooks/useClickOutside'
+import { getScrollParent } from '../../utils/getScrollParent'
 
 import styles from './Popup.module.css'
 import type { PopupProps, Origin } from './types'
diff --git a/packages/harmony/src/components/layout/Popup/index.ts b/packages/harmony/src/components/popup/index.ts
similarity index 100%
rename from packages/harmony/src/components/layout/Popup/index.ts
rename to packages/harmony/src/components/popup/index.ts
diff --git a/packages/harmony/src/components/layout/Popup/types.ts b/packages/harmony/src/components/popup/types.ts
similarity index 96%
rename from packages/harmony/src/components/layout/Popup/types.ts
rename to packages/harmony/src/components/popup/types.ts
index fb0b221925a..5af2fcec774 100644
--- a/packages/harmony/src/components/layout/Popup/types.ts
+++ b/packages/harmony/src/components/popup/types.ts
@@ -1,4 +1,4 @@
-import type { MutableRefObject, ReactChild } from 'react'
+import type { MutableRefObject, ReactElement } from 'react'
 
 import { ShadowOptions } from 'foundations'
 
@@ -36,7 +36,7 @@ export type PopupProps = {
   /**
    * Children to render inside the Popup
    */
-  children?: ReactChild
+  children?: ReactElement
 
   /**
    * Whether to dismiss the popup on mouse leave
diff --git a/packages/harmony/src/components/skeleton/Skeleton.tsx b/packages/harmony/src/components/skeleton/Skeleton.tsx
index 4bfcbb1dde3..b968c72329c 100644
--- a/packages/harmony/src/components/skeleton/Skeleton.tsx
+++ b/packages/harmony/src/components/skeleton/Skeleton.tsx
@@ -1,6 +1,6 @@
 import { keyframes, useTheme } from '@emotion/react'
 
-import { Box, BoxProps } from 'components/layout'
+import { Box, BoxProps } from '../layout/Box'
 
 const shimmer = keyframes({
   from: {
diff --git a/packages/harmony/src/components/tag/Tag.tsx b/packages/harmony/src/components/tag/Tag.tsx
index e1a4b35b660..f9cecce2cff 100644
--- a/packages/harmony/src/components/tag/Tag.tsx
+++ b/packages/harmony/src/components/tag/Tag.tsx
@@ -2,9 +2,9 @@ import { MouseEvent } from 'react'
 
 import { CSSObject, useTheme } from '@emotion/react'
 
-import { IconButton } from 'components/button'
-
-import { IconCloseAlt, IconPlus } from '../../icons'
+import IconCloseAlt from '../../assets/icons/CloseAlt.svg'
+import IconPlus from '../../assets/icons/Plus.svg'
+import { IconButton } from '../button/IconButton/IconButton'
 import { Text } from '../text'
 
 const messages = {
diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx
index 231456dc6f9..1b76d734f88 100644
--- a/packages/harmony/src/components/text-link/TextLink.tsx
+++ b/packages/harmony/src/components/text-link/TextLink.tsx
@@ -3,7 +3,7 @@ import { Ref, forwardRef } from 'react'
 import { useTheme } from '@emotion/react'
 import { Slot } from '@radix-ui/react-slot'
 
-import { Text } from 'components/text'
+import { Text } from '../text'
 
 import type { TextLinkProps } from './types'
 
diff --git a/packages/harmony/src/components/text-link/types.ts b/packages/harmony/src/components/text-link/types.ts
index 3596561a842..817bdfaa088 100644
--- a/packages/harmony/src/components/text-link/types.ts
+++ b/packages/harmony/src/components/text-link/types.ts
@@ -1,6 +1,6 @@
 import type { HTMLProps } from 'react'
 
-import type { TextProps } from 'components/text'
+import type { TextProps } from '../text'
 
 export type TextLinkProps = Omit<TextProps, 'variant' | 'onClick' | 'color'> &
   Omit<
diff --git a/packages/mobile/babel.config.js b/packages/mobile/babel.config.js
index 9b68ff5d6f2..f99721ddd75 100644
--- a/packages/mobile/babel.config.js
+++ b/packages/mobile/babel.config.js
@@ -9,6 +9,7 @@ module.exports = (api) => {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
         root: ['.'],
         alias: {
+          '@audius/common/adapters': '../common/src/adapters',
           '@audius/common/messages': '../common/src/messages',
           '@audius/common/hooks': '../common/src/hooks',
           '@audius/common/context': '../common/src/context',
diff --git a/packages/mobile/tsconfig.json b/packages/mobile/tsconfig.json
index 330241292db..2d2b369ce06 100644
--- a/packages/mobile/tsconfig.json
+++ b/packages/mobile/tsconfig.json
@@ -21,7 +21,20 @@
     "module": "esnext",
     "paths": {
       "@audius/harmony-native": ["./src/harmony-native/index.ts"],
-      "@audius/common/*": ["../common/src/*"],
+      "@audius/common/adapters": ["../../common/src/adapters/index.ts"],
+      "@audius/common/api": ["../../common/src/api/index.ts"],
+      "@audius/common/assets": ["../../common/src/assets/index.ts"],
+      "@audius/common/audius-query": ["../../common/src/audius-query/index.ts"],
+      "@audius/common/context": ["../../common/src/context/index.ts"],
+      "@audius/common/hooks": ["../../common/src/hooks/index.ts"],
+      "@audius/common/messages": ["../../common/src/messages/index.ts"],
+      "@audius/common/models": ["../../common/src/models/index.ts"],
+      "@audius/common/schemas": ["../../common/src/schemas/index.ts"],
+      "@audius/common/services": ["../../common/src/services/index.ts"],
+      "@audius/common/store": ["../../common/src/store/index.ts"],
+      "@audius/common/serverStore": ["../../common/src/serverStore/index.ts"],
+      "@audius/common/utils": ["../../common/src/utils/index.ts"],
+      "@audius/common/src/*": ["../../common/src/*"],
       "~/*": ["../common/src/*"],
       "app/*": ["./src/*"],
       // Remove these when no longer dependent on @audius/web
diff --git a/packages/web/.eslintrc.js b/packages/web/.eslintrc.js
index 0f11cdfb03c..f6d8b966ac1 100644
--- a/packages/web/.eslintrc.js
+++ b/packages/web/.eslintrc.js
@@ -15,6 +15,7 @@ module.exports = {
           ['audio', './src/audio'],
           ['assets', './src/assets'],
           ['common', './src/common'],
+          ['@audius/common/src', '../common/src'],
           ['components', './src/components'],
           ['hooks', './src/hooks'],
           ['models', './src/models'],
diff --git a/packages/web/package.json b/packages/web/package.json
index 2691354c866..5160392a738 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -8,6 +8,7 @@
   "scripts": {
     "DEV & BUILD========================================": "",
     "analyze": "env-cmd ./env/.env.bundle npm run build:prod",
+    "analyze:ssr": "env-cmd ./env/.env.bundle npm run build:ssr:prod",
     "build:dev": "env-cmd ./env/.env.dev turbo run build && rm -rf build-development && mv build build-development",
     "build:prod-source-maps": "env-cmd ./env/.env.prod env-cmd ./env/.env.source-maps turbo run build && rm -rf build-production && mv build build-production",
     "build:prod": "env-cmd ./env/.env.prod turbo run build && rm -rf build-production && mv build build-production",
diff --git a/packages/web/src/app/ServerReduxProvider.tsx b/packages/web/src/app/ServerReduxProvider.tsx
deleted file mode 100644
index 91841f459b9..00000000000
--- a/packages/web/src/app/ServerReduxProvider.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ReactNode, useRef } from 'react'
-
-import { Provider } from 'react-redux'
-import { Persistor, persistStore } from 'redux-persist'
-import { PersistGate } from 'redux-persist/integration/react'
-import { PartialDeep } from 'type-fest'
-
-import { useIsMobile } from 'hooks/useIsMobile'
-import { configureStore } from 'store/configureServerStore'
-import { AppState } from 'store/types'
-import logger from 'utils/logger'
-
-import { useSsrContext } from '../ssr/SsrContext'
-
-import { useHistoryContext } from './HistoryProvider'
-
-export const ServerReduxProvider = ({
-  children,
-  initialStoreState
-}: {
-  children: ReactNode
-  // Sets up an initial store state
-  initialStoreState?: PartialDeep<AppState>
-}) => {
-  const { pageProps, isServerSide } = useSsrContext()
-  const { history } = useHistoryContext()
-  const isMobile = useIsMobile()
-
-  const storeRef = useRef<ReturnType<typeof configureStore>>()
-  const persistorRef = useRef<Persistor>()
-
-  if (!storeRef.current) {
-    const store = configureStore(
-      history,
-      isMobile,
-      pageProps,
-      isServerSide,
-      initialStoreState
-    )
-    storeRef.current = store
-    const persistor = persistStore(store)
-    persistorRef.current = persistor
-
-    // Mount store to window for easy access
-    if (typeof window !== 'undefined') {
-      // @ts-ignore
-      window.store = store
-    }
-
-    // Set up logger on store
-    if (!isServerSide) {
-      logger(store)
-    }
-  }
-
-  return (
-    <Provider store={storeRef.current}>
-      <PersistGate loading={null} persistor={persistorRef.current!}>
-        {() => children}
-      </PersistGate>
-    </Provider>
-  )
-}
diff --git a/packages/web/src/app/web-player/ServerReduxProvider.tsx b/packages/web/src/app/web-player/ServerReduxProvider.tsx
new file mode 100644
index 00000000000..7f263870df9
--- /dev/null
+++ b/packages/web/src/app/web-player/ServerReduxProvider.tsx
@@ -0,0 +1,40 @@
+import { ReactElement } from 'react'
+
+import { Kind } from '@audius/common/src/models/Kind'
+import {
+  cacheTracksReducer,
+  cacheCollectionsReducer,
+  cacheUsersReducer
+} from '@audius/common/src/store/cache'
+import { asCache } from '@audius/common/src/store/cache/reducer'
+import { Provider } from 'react-redux'
+import { combineReducers, createStore } from 'redux'
+import { PartialDeep } from 'type-fest'
+
+import { AppState } from 'store/types'
+
+type ServerReduxProviderProps = {
+  children: ReactElement
+  initialState: PartialDeep<AppState>
+}
+
+const reducers = {
+  // @ts-ignore
+  users: asCache(cacheUsersReducer, Kind.TRACKS),
+  // @ts-ignore
+  tracks: asCache(cacheTracksReducer, Kind.TRACKS),
+  // @ts-ignore
+  collections: asCache(cacheCollectionsReducer, Kind.COLLECTIONS)
+}
+
+export const ServerReduxProvider = (props: ServerReduxProviderProps) => {
+  const { initialState, children } = props
+  return (
+    <Provider
+      // @ts-ignore
+      store={createStore(combineReducers(reducers), initialState, undefined)}
+    >
+      {children}
+    </Provider>
+  )
+}
diff --git a/packages/web/src/app/web-player/ServerWebPlayer.tsx b/packages/web/src/app/web-player/ServerWebPlayer.tsx
index b716e46024c..bd959311ddb 100644
--- a/packages/web/src/app/web-player/ServerWebPlayer.tsx
+++ b/packages/web/src/app/web-player/ServerWebPlayer.tsx
@@ -1,107 +1,84 @@
-import { PropsWithChildren, ReactNode, useRef } from 'react'
-
+import { PropsWithChildren, ReactElement } from 'react'
 import '@audius/harmony/dist/harmony.css'
-import cn from 'classnames'
-import { ConnectedRouter } from 'connected-react-router'
 
-import { AppErrorBoundary } from 'app/AppErrorBoundary'
-import { HistoryContextProvider, useHistoryContext } from 'app/HistoryProvider'
-import { ServerReduxProvider } from 'app/ServerReduxProvider'
-import { ThemeProvider } from 'app/ThemeProvider'
-import {
-  HeaderContextProvider,
-  HeaderContextConsumer
-} from 'components/header/mobile/HeaderContextProvider'
-import ServerNavigator from 'components/nav/ServerNavigator'
-import { ServerPlayBar } from 'components/play-bar/desktop/ServerPlayBar'
-import { useIsMobile } from 'hooks/useIsMobile'
-import { MAIN_CONTENT_ID } from 'pages/MainContentContext'
-import { SsrContextProvider, SsrContextType } from 'ssr/SsrContext'
-import { getSystemAppearance, getTheme } from 'utils/theme/theme'
+import { Box } from '@audius/harmony/src/components/layout/Box'
+import { Flex } from '@audius/harmony/src/components/layout/Flex'
+import { ThemeProvider } from '@audius/harmony/src/foundations/theme/ThemeProvider'
+import { StaticRouter } from 'react-router-dom'
+import { PartialDeep } from 'type-fest'
 
-import styles from './WebPlayer.module.css'
+import { SsrContextProvider } from 'ssr/SsrContext'
+import { AppState } from 'store/types'
 
-type ServerWebPlayerProps = PropsWithChildren<{
-  ssrContextValue: SsrContextType
-}>
+import { ServerReduxProvider } from './ServerReduxProvider'
 
-const InnerProviderContainer = ({ children }: { children: ReactNode }) => {
-  const { history } = useHistoryContext()
+type ServerProviderProps = PropsWithChildren<{
+  initialState: PartialDeep<AppState>
+  isMobile: boolean
+}>
 
-  const initialStoreState = {
-    ui: {
-      theme: {
-        theme: getTheme(),
-        systemPreference: getSystemAppearance()
-      }
-    }
-  }
+const ServerProviders = (props: ServerProviderProps) => {
+  const { initialState, isMobile, children } = props
 
   return (
-    <>
-      <ServerReduxProvider initialStoreState={initialStoreState}>
-        <ConnectedRouter history={history}>
-          <ThemeProvider>
-            <HeaderContextProvider>
-              {/* @ts-ignore */}
-              {children}
-            </HeaderContextProvider>
-          </ThemeProvider>
-        </ConnectedRouter>
-      </ServerReduxProvider>
-    </>
+    <ServerReduxProvider initialState={initialState}>
+      <StaticRouter>
+        <SsrContextProvider
+          value={{
+            isMobile,
+            isServerSide: true,
+            isSsrEnabled: true
+          }}
+        >
+          <ThemeProvider theme='day'>{children}</ThemeProvider>
+        </SsrContextProvider>
+      </StaticRouter>
+    </ServerReduxProvider>
   )
 }
 
-const ProviderContainer = ({
-  ssrContextValue,
-  children
-}: ServerWebPlayerProps) => (
-  <>
-    <SsrContextProvider value={ssrContextValue}>
-      <HistoryContextProvider>
-        <InnerProviderContainer>
-          <AppErrorBoundary>{children}</AppErrorBoundary>
-        </InnerProviderContainer>
-      </HistoryContextProvider>
-    </SsrContextProvider>
-  </>
-)
+type WebPlayerContentProps = {
+  children: ReactElement
+  isMobile: boolean
+}
+
+const WebPlayerContent = (props: WebPlayerContentProps) => {
+  const { isMobile, children } = props
 
-const WebPlayerContent = ({ children }: Partial<ServerWebPlayerProps>) => {
-  const isMobile = useIsMobile()
-  const mainContentRef = useRef(null)
+  if (isMobile) {
+    return (
+      <Flex direction='column' w='100%' backgroundColor='default'>
+        <Flex h={40} w='100%' backgroundColor='white' />
+        <Box pb={50}>{children}</Box>
+        <Flex
+          h={50}
+          w='100%'
+          backgroundColor='surface1'
+          css={{ position: 'fixed', bottom: 0, zIndex: 1 }}
+        />
+      </Flex>
+    )
+  }
 
   return (
-    <div className={styles.root}>
-      <div className={cn(styles.app, { [styles.mobileApp]: isMobile })}>
-        <ServerNavigator />
-        <div
-          ref={mainContentRef}
-          id={MAIN_CONTENT_ID}
-          role='main'
-          className={cn(styles.mainContentWrapper, {
-            [styles.mainContentWrapperMobile]: isMobile
-          })}
-        >
-          {/* @ts-ignore */}
-          {isMobile && <HeaderContextConsumer />}
-          {children}
-        </div>
-
-        <ServerPlayBar isMobile={isMobile} />
-      </div>
-    </div>
+    <Flex w='100%'>
+      <Flex h='100%' w={240} backgroundColor='surface1' />
+      {children}
+    </Flex>
   )
 }
 
-export const ServerWebPlayer = ({
-  ssrContextValue,
-  ...other
-}: ServerWebPlayerProps) => {
+type ServerWebPlayerProps = {
+  initialState: PartialDeep<AppState>
+  isMobile: boolean
+  children: ReactElement
+}
+
+export const ServerWebPlayer = (props: ServerWebPlayerProps) => {
+  const { initialState, isMobile, children } = props
   return (
-    <ProviderContainer ssrContextValue={ssrContextValue}>
-      <WebPlayerContent {...other} />
-    </ProviderContainer>
+    <ServerProviders initialState={initialState} isMobile={isMobile}>
+      <WebPlayerContent isMobile={isMobile}>{children}</WebPlayerContent>
+    </ServerProviders>
   )
 }
diff --git a/packages/web/src/common/store/cache/users/sagas.ts b/packages/web/src/common/store/cache/users/sagas.ts
index fb0812da7fc..3e0c4f26ced 100644
--- a/packages/web/src/common/store/cache/users/sagas.ts
+++ b/packages/web/src/common/store/cache/users/sagas.ts
@@ -1,10 +1,10 @@
+import { userMetadataListFromSDK } from '@audius/common/adapters'
 import {
   DefaultSizes,
   Kind,
   OptionalId,
   User,
-  UserMetadata,
-  userMetadataListFromSDK
+  UserMetadata
 } from '@audius/common/models'
 import {
   Metadata,
diff --git a/packages/web/src/common/store/pages/token-dashboard/getAccountMetadataCID.ts b/packages/web/src/common/store/pages/token-dashboard/getAccountMetadataCID.ts
index 8421f94a0ad..2b288ad94f3 100644
--- a/packages/web/src/common/store/pages/token-dashboard/getAccountMetadataCID.ts
+++ b/packages/web/src/common/store/pages/token-dashboard/getAccountMetadataCID.ts
@@ -1,4 +1,5 @@
-import { Id, userMetadataListFromSDK } from '@audius/common/models'
+import { userMetadataListFromSDK } from '@audius/common/adapters'
+import { Id } from '@audius/common/models'
 import { accountSelectors, getSDK } from '@audius/common/store'
 import { select, call } from 'typed-redux-saga'
 
diff --git a/packages/web/src/common/store/profile/sagas.js b/packages/web/src/common/store/profile/sagas.js
index ec8979e9d70..b9599d75e30 100644
--- a/packages/web/src/common/store/profile/sagas.js
+++ b/packages/web/src/common/store/profile/sagas.js
@@ -1,9 +1,5 @@
-import {
-  DefaultSizes,
-  Kind,
-  Id,
-  userMetadataListFromSDK
-} from '@audius/common/models'
+import { userMetadataListFromSDK } from '@audius/common/adapters'
+import { DefaultSizes, Kind, Id } from '@audius/common/models'
 import { DoubleKeys, FeatureFlags } from '@audius/common/services'
 import {
   accountSelectors,
diff --git a/packages/web/src/common/store/user-list/favorites/sagas.ts b/packages/web/src/common/store/user-list/favorites/sagas.ts
index 2462b14f2bc..2efb6d8beb1 100644
--- a/packages/web/src/common/store/user-list/favorites/sagas.ts
+++ b/packages/web/src/common/store/user-list/favorites/sagas.ts
@@ -1,10 +1,10 @@
+import { userMetadataListFromSDK } from '@audius/common/adapters'
 import {
   FavoriteType,
   Collection,
   ID,
   Track,
   Id,
-  userMetadataListFromSDK,
   OptionalId
 } from '@audius/common/models'
 import {
diff --git a/packages/web/src/common/store/user-list/followers/sagas.ts b/packages/web/src/common/store/user-list/followers/sagas.ts
index 202991a229b..896a693d2c3 100644
--- a/packages/web/src/common/store/user-list/followers/sagas.ts
+++ b/packages/web/src/common/store/user-list/followers/sagas.ts
@@ -1,10 +1,5 @@
-import {
-  ID,
-  Id,
-  OptionalId,
-  User,
-  userMetadataListFromSDK
-} from '@audius/common/models'
+import { userMetadataListFromSDK } from '@audius/common/adapters'
+import { ID, Id, OptionalId, User } from '@audius/common/models'
 import {
   cacheUsersSelectors,
   UserListSagaFactory,
diff --git a/packages/web/src/common/store/user-list/following/sagas.ts b/packages/web/src/common/store/user-list/following/sagas.ts
index 615c9bb4ead..950625010ce 100644
--- a/packages/web/src/common/store/user-list/following/sagas.ts
+++ b/packages/web/src/common/store/user-list/following/sagas.ts
@@ -1,10 +1,5 @@
-import {
-  ID,
-  Id,
-  OptionalId,
-  User,
-  userMetadataListFromSDK
-} from '@audius/common/models'
+import { userMetadataListFromSDK } from '@audius/common/adapters'
+import { ID, Id, OptionalId, User } from '@audius/common/models'
 import {
   cacheUsersSelectors,
   UserListSagaFactory,
diff --git a/packages/web/src/common/store/user-list/reposts/sagas.ts b/packages/web/src/common/store/user-list/reposts/sagas.ts
index d3b5c56dbcd..3ea0b5d12e3 100644
--- a/packages/web/src/common/store/user-list/reposts/sagas.ts
+++ b/packages/web/src/common/store/user-list/reposts/sagas.ts
@@ -1,11 +1,5 @@
-import {
-  Collection,
-  ID,
-  Id,
-  OptionalId,
-  Track,
-  userMetadataListFromSDK
-} from '@audius/common/models'
+import { userMetadataListFromSDK } from '@audius/common/adapters'
+import { Collection, ID, Id, OptionalId, Track } from '@audius/common/models'
 import {
   cacheCollectionsSelectors,
   cacheTracksSelectors,
diff --git a/packages/web/src/components/collection/components/AlbumDetailsText.tsx b/packages/web/src/components/collection/components/AlbumDetailsText.tsx
index dc927a096ed..b0d9366365c 100644
--- a/packages/web/src/components/collection/components/AlbumDetailsText.tsx
+++ b/packages/web/src/components/collection/components/AlbumDetailsText.tsx
@@ -1,5 +1,9 @@
-import { formatDate, formatSecondsAsText } from '@audius/common/utils'
-import { Box, Flex, Text } from '@audius/harmony'
+import {
+  formatDate,
+  formatSecondsAsText
+} from '@audius/common/src/utils/timeUtil'
+import { Box, Flex } from '@audius/harmony/src/components/layout/'
+import { Text } from '@audius/harmony/src/components/text/Text'
 
 import { useIsMobile } from 'hooks/useIsMobile'
 
@@ -9,12 +13,9 @@ type AlbumDetailsTextProps = {
   numTracks: number
   duration: number | null
 }
-export const AlbumDetailsText = ({
-  duration,
-  lastModifiedDate,
-  numTracks,
-  releaseDate
-}: AlbumDetailsTextProps) => {
+
+export const AlbumDetailsText = (props: AlbumDetailsTextProps) => {
+  const { duration, lastModifiedDate, numTracks, releaseDate } = props
   const isMobile = useIsMobile()
   const renderAlbumDetailsText = () => {
     const hasDate = lastModifiedDate || releaseDate
@@ -26,6 +27,7 @@ export const AlbumDetailsText = ({
 
     const trackCountText = `${numTracks} tracks`
     const durationText = duration ? `, ${formatSecondsAsText(duration)}` : ''
+
     return isMobile ? (
       <Flex direction='column' gap='xs'>
         {hasDate ? <Box>{releaseAndUpdatedText}</Box> : null}
diff --git a/packages/web/src/components/cover-photo/ServerCoverPhoto.tsx b/packages/web/src/components/cover-photo/ServerCoverPhoto.tsx
deleted file mode 100644
index de94883d7a0..00000000000
--- a/packages/web/src/components/cover-photo/ServerCoverPhoto.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { memo } from 'react'
-
-import { Nullable } from '@audius/common/utils'
-import cn from 'classnames'
-import { FileWithPreview } from 'react-dropzone'
-
-import styles from './CoverPhoto.module.css'
-
-type CoverPhotoProps = {
-  userId: Nullable<number>
-  updatedCoverPhoto?: string
-  className?: string
-  loading?: boolean
-  error?: boolean
-  edit?: boolean
-  darken?: boolean
-  onDrop?: (
-    file: FileWithPreview[],
-    source: 'original' | 'unsplash' | 'url'
-  ) => Promise<void>
-}
-
-const ServerCoverPhoto = ({ className }: CoverPhotoProps) => {
-  return (
-    <div className={cn(styles.coverPhoto, className)}>
-      {/* TODO: Add static image here */}
-    </div>
-  )
-}
-
-export default memo(ServerCoverPhoto)
diff --git a/packages/web/src/components/link/ServerExternalLink.tsx b/packages/web/src/components/link/ServerExternalLink.tsx
deleted file mode 100644
index 8b4ab1fd640..00000000000
--- a/packages/web/src/components/link/ServerExternalLink.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { MouseEvent, ReactNode, useCallback } from 'react'
-
-import { Name } from '@audius/common/models'
-
-import { make, useRecord } from 'common/store/analytics/actions'
-
-const externalLinkAllowList = new Set([
-  'facebook.com',
-  'instagram.com',
-  'tiktok.com',
-  'twitter.com',
-  'x.com',
-  'blog.audius.co',
-  'audius.co',
-  'discord.gg',
-  'solscan.io'
-])
-
-const isAllowedExternalLink = (link: string) => {
-  try {
-    let hostname = new URL(link).hostname
-    hostname = hostname.replace(/^www\./, '')
-    return externalLinkAllowList.has(hostname)
-  } catch (e) {
-    return false
-  }
-}
-
-export type ServerExternalLinkProps = {
-  to: string
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void
-  source?: 'profile page' | 'track page' | 'collection page'
-  ignoreWarning?: boolean
-  children: ReactNode
-}
-
-export const ServerExternalLink = (props: ServerExternalLinkProps) => {
-  const {
-    to,
-    onClick,
-    source,
-    ignoreWarning = false,
-    children,
-    ...other
-  } = props
-
-  const record = useRecord()
-
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      onClick?.(event)
-      if (source) {
-        record(
-          make(Name.LINK_CLICKING, {
-            // @ts-expect-error
-            url: event.target.href,
-            source
-          })
-        )
-      }
-      if (to && !ignoreWarning && !isAllowedExternalLink(to)) {
-        event.preventDefault()
-        window.open(to, '_blank', 'noreferrer,noopener')
-      }
-    },
-    [onClick, record, source, to, ignoreWarning]
-  )
-
-  return (
-    <a
-      target='_blank'
-      rel='noreferrer'
-      href={to}
-      onClick={handleClick}
-      {...other}
-    >
-      {children}
-    </a>
-  )
-}
diff --git a/packages/web/src/components/link/ServerExternalTextLink.tsx b/packages/web/src/components/link/ServerExternalTextLink.tsx
deleted file mode 100644
index 99e1edf1850..00000000000
--- a/packages/web/src/components/link/ServerExternalTextLink.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { TextLink, TextLinkProps } from '@audius/harmony'
-
-import {
-  ServerExternalLink,
-  ServerExternalLinkProps
-} from './ServerExternalLink'
-
-type ServerExternalTextLinkProps = Omit<TextLinkProps, 'href'> &
-  ServerExternalLinkProps
-
-export const ServerExternalTextLink = (props: ServerExternalTextLinkProps) => {
-  const { to, onClick, source, ignoreWarning, children, ...other } = props
-  return (
-    <TextLink asChild {...other}>
-      <ServerExternalLink
-        to={to}
-        onClick={onClick}
-        source={source}
-        ignoreWarning={ignoreWarning}
-      >
-        {children}
-      </ServerExternalLink>
-    </TextLink>
-  )
-}
diff --git a/packages/web/src/components/link/ServerUserLink.tsx b/packages/web/src/components/link/ServerUserLink.tsx
deleted file mode 100644
index a0c73e23c57..00000000000
--- a/packages/web/src/components/link/ServerUserLink.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ID } from '@audius/common/models'
-import { Text, useTheme } from '@audius/harmony'
-
-import { AppState } from 'store/types'
-import { useSelector } from 'utils/reducer'
-import { profilePage } from 'utils/route'
-
-import { TextLink, TextLinkProps } from './TextLink'
-
-type ServerUserLinkProps = Omit<TextLinkProps, 'to'> & {
-  userId: ID
-  popover?: boolean
-}
-
-// NOTE: Can't use user badges or user cache selectors bc it pulls in libs
-export const ServerUserLink = (props: ServerUserLinkProps) => {
-  const { userId, popover, children, ...other } = props
-  const { spacing } = useTheme()
-
-  const user = useSelector((state: AppState) => {
-    return state.users.entries[userId]?.metadata
-  })
-
-  const url = user?.handle ? profilePage(user.handle) : ''
-
-  return (
-    <TextLink
-      to={url}
-      css={{ columnGap: spacing.xs, alignItems: 'center' }}
-      ellipses={popover}
-      {...other}
-    >
-      <Text ellipses>{user?.name}</Text>
-      {children}
-    </TextLink>
-  )
-}
diff --git a/packages/web/src/components/mobile-page-container/ServerMobilePageContainer.tsx b/packages/web/src/components/mobile-page-container/ServerMobilePageContainer.tsx
deleted file mode 100644
index f2b40a90897..00000000000
--- a/packages/web/src/components/mobile-page-container/ServerMobilePageContainer.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { ReactNode, useEffect, useContext } from 'react'
-
-import cn from 'classnames'
-
-import { useHistoryContext } from 'app/HistoryProvider'
-import { MetaTags, MetaTagsProps } from 'components/meta-tags/MetaTags'
-import { ScrollContext } from 'components/scroll-provider/ScrollProvider'
-import { useInstanceVar } from 'hooks/useInstanceVar'
-import { getPathname } from 'utils/route'
-import { getSafeArea, SafeAreaDirection } from 'utils/safeArea'
-
-import styles from './MobilePageContainer.module.css'
-
-type OwnProps = {
-  children: ReactNode
-
-  // Whether or not to always render the page at full viewport height.
-  // Defaults to false.
-  fullHeight?: boolean
-
-  className?: string
-  // If full height specified, optionally pass in a classname for the
-  // background div.
-  backgroundClassName?: string
-  containerClassName?: string
-
-  // Has the default header and should add margins to the top for it
-  hasDefaultHeader?: boolean
-} & MetaTagsProps
-
-type MobilePageContainerProps = OwnProps
-
-// Height of the bottom nav bar in px
-const BOTTOM_BAR_HEIGHT = 49
-// Padding between bottom of content and the
-// bottom bars
-const BOTTOM_PADDING = 32
-
-const safeAreaBottom = getSafeArea(SafeAreaDirection.BOTTOM)
-
-export const ServerMobilePageContainer = (props: MobilePageContainerProps) => {
-  const {
-    backgroundClassName,
-    canonicalUrl,
-    children,
-    className,
-    containerClassName,
-    description,
-    fullHeight = false,
-    hasDefaultHeader = false,
-    image,
-    noIndex,
-    ogDescription,
-    structuredData,
-    title
-  } = props
-  const { history } = useHistoryContext()
-  const { getScrollForRoute, setScrollForRoute } = useContext(ScrollContext)!
-  const [getInitialPathname] = useInstanceVar(getPathname(history.location))
-  const [getLastScroll, setLastScroll] = useInstanceVar(0)
-
-  // On mount, restore the last scroll position
-  useEffect(() => {
-    const lastScrollPosition = getScrollForRoute(getInitialPathname())
-    window.scrollTo(0, lastScrollPosition)
-    setLastScroll(lastScrollPosition)
-  }, [getScrollForRoute, getInitialPathname, setLastScroll])
-
-  useEffect(() => {
-    // Store Y scroll in instance var as we scroll
-    const onScroll = () => {
-      const path = getPathname(history.location)
-      // We can stay mounted after switching
-      // paths, so check for this case
-      if (path === getInitialPathname()) {
-        setLastScroll(window.scrollY)
-      }
-    }
-
-    window.addEventListener('scroll', onScroll, { passive: true })
-
-    // Save the valid scroll on unmount
-    return () => {
-      setScrollForRoute(getInitialPathname(), getLastScroll())
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [
-    setLastScroll,
-    getInitialPathname,
-    setScrollForRoute,
-    getLastScroll,
-    history
-  ])
-
-  const paddingBottom = `${
-    BOTTOM_BAR_HEIGHT + BOTTOM_PADDING + safeAreaBottom
-  }px`
-  const style = { paddingBottom }
-
-  const metaTagsProps = {
-    title,
-    description,
-    ogDescription,
-    image,
-    canonicalUrl,
-    structuredData,
-    noIndex
-  }
-
-  return (
-    <>
-      <MetaTags {...metaTagsProps} />
-      <div
-        className={cn(styles.container, className, containerClassName, {
-          [styles.hasDefaultHeader]: hasDefaultHeader
-        })}
-        style={fullHeight ? undefined : style}
-      >
-        {children}
-      </div>
-      {fullHeight && (
-        <div className={cn(styles.background, backgroundClassName)} />
-      )}
-    </>
-  )
-}
diff --git a/packages/web/src/components/stat-banner/ServerStatBanner.tsx b/packages/web/src/components/stat-banner/ServerStatBanner.tsx
deleted file mode 100644
index 07a9e5a4cad..00000000000
--- a/packages/web/src/components/stat-banner/ServerStatBanner.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { StatProps } from 'components/stats/Stats'
-
-import styles from './StatBanner.module.css'
-
-export type ProfileMode = 'visitor' | 'owner' | 'editing'
-
-type StatsBannerProps = {
-  stats?: StatProps[]
-  mode?: ProfileMode
-  isEmpty?: boolean
-  profileId?: number
-  areArtistRecommendationsVisible?: boolean
-  onCloseArtistRecommendations?: () => void
-  onEdit?: () => void
-  onShare?: () => void
-  onSave?: () => void
-  onCancel?: () => void
-  onFollow?: () => void
-  onUnfollow?: () => void
-  following?: boolean
-  isSubscribed?: boolean
-  onToggleSubscribe?: () => void
-  canCreateChat?: boolean
-  onMessage?: () => void
-  onBlock?: () => void
-  onUnblock?: () => void
-  isBlocked?: boolean
-  accountUserId?: number | null
-}
-
-export const ServerStatBanner = (props: StatsBannerProps) => {
-  return <div className={styles.wrapper}></div>
-}
diff --git a/packages/web/src/components/track/ServerGiantArtwork.tsx b/packages/web/src/components/track/ServerGiantArtwork.tsx
deleted file mode 100644
index 869a4ca8c50..00000000000
--- a/packages/web/src/components/track/ServerGiantArtwork.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Box } from '@audius/harmony'
-
-import styles from './GiantArtwork.module.css'
-
-type ServerGiantArtworkProps = {
-  coSign: any | null
-  cid: string | null
-  overrideArtwork?: string
-}
-
-const messages = {
-  artworkAltText: 'Track Artwork'
-}
-
-export const ServerGiantArtwork = ({
-  overrideArtwork
-}: ServerGiantArtworkProps) => {
-  return (
-    <div className={styles.giantArtwork}>
-      <Box
-        h={'100%'}
-        w={'100%'}
-        className={styles.imageWrapper}
-        css={{ overflow: 'hidden' }}
-      >
-        <img
-          css={{
-            height: '100%',
-            width: '100%',
-            maxWidth: '100%',
-            objectFit: 'cover'
-          }}
-          src={overrideArtwork}
-          alt={messages.artworkAltText}
-        />
-      </Box>
-    </div>
-  )
-}
diff --git a/packages/web/src/components/track/ServerGiantTrackTile.tsx b/packages/web/src/components/track/ServerGiantTrackTile.tsx
deleted file mode 100644
index 4cbb5fed450..00000000000
--- a/packages/web/src/components/track/ServerGiantTrackTile.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import {
-  ID,
-  CoverArtSizes,
-  FieldVisibility,
-  Remix,
-  AccessConditions
-} from '@audius/common/models'
-import { CommonState } from '@audius/common/store'
-import { Text, Flex, IconRobot } from '@audius/harmony'
-import cn from 'classnames'
-import { shallowEqual, useSelector } from 'react-redux'
-
-import { ServerUserLink } from 'components/link/ServerUserLink'
-import RepostFavoritesStats from 'components/repost-favorites-stats/RepostFavoritesStats'
-import { ScheduledReleaseGiantLabel } from 'components/scheduled-release-label/ScheduledReleaseLabel'
-import Skeleton from 'components/skeleton/Skeleton'
-import { Tile } from 'components/tile'
-import { ServerUserGeneratedText } from 'components/user-generated-text/ServerUserGeneratedText'
-import { moodMap } from 'utils/Moods'
-import { formatDate, formatSeconds } from 'utils/dateUtils'
-
-import Badge from './Badge'
-import { CardTitle } from './CardTitle'
-import styles from './GiantTrackTile.module.css'
-import InfoLabel from './InfoLabel'
-import { ServerGiantArtwork } from './ServerGiantArtwork'
-
-const messages = {
-  makePublic: 'MAKE PUBLIC',
-  releaseNow: 'RELEASE NOW',
-  isPublishing: 'PUBLISHING',
-  repostButtonText: 'repost',
-  repostedButtonText: 'reposted',
-  unplayed: 'Unplayed',
-  timeLeft: 'left',
-  played: 'Played',
-  generatedWithAi: 'Generated With AI',
-  actionGroupLabel: 'track actions'
-}
-
-export type ServerGiantTrackTileProps = {
-  aiAttributionUserId: number | null
-  artistHandle: string
-  badge: string | null
-  coSign: Remix | null
-  coverArtSizes: CoverArtSizes | null
-  credits: string
-  currentUserId: ID | null
-  description: string
-  hasStreamAccess: boolean
-  duration: number
-  fieldVisibility: FieldVisibility
-  following: boolean
-  genre: string
-  isArtistPick: boolean
-  isOwner: boolean
-  isStreamGated: boolean
-  isDownloadGated: boolean
-  isPublishing: boolean
-  isRemix: boolean
-  isReposted: boolean
-  isSaved: boolean
-  isUnlisted: boolean
-  isScheduledRelease: boolean
-  listenCount: number
-  loading: boolean
-  mood: string
-  onClickFavorites: () => void
-  onClickReposts: () => void
-  onMakePublic: (trackId: ID) => void
-  onFollow: () => void
-  onPlay: () => void
-  onPreview: () => void
-  onRepost: () => void
-  onSave: () => void
-  onShare: () => void
-  onUnfollow: () => void
-  playing: boolean
-  previewing: boolean
-  streamConditions: AccessConditions | null
-  downloadConditions: AccessConditions | null
-  released: string
-  repostCount: number
-  saveCount: number
-  tags: string
-  trackId: number
-  trackTitle: string
-  userId: number
-  ddexApp?: string | null
-  overrideArtwork?: string
-}
-
-export const ServerGiantTrackTile = ({
-  aiAttributionUserId,
-  badge,
-  coSign,
-  credits,
-  description,
-  duration,
-  fieldVisibility,
-  following,
-  genre,
-  isOwner,
-  isStreamGated,
-  isRemix,
-  isScheduledRelease,
-  isUnlisted,
-  loading,
-  mood,
-  onClickFavorites,
-  onClickReposts,
-  onFollow,
-  onUnfollow,
-  released,
-  repostCount,
-  saveCount,
-  streamConditions,
-  trackId,
-  trackTitle,
-  userId,
-  overrideArtwork
-}: ServerGiantTrackTileProps) => {
-  const track = useSelector(
-    (state: CommonState) => state.tracks.entries[trackId],
-    shallowEqual
-  )
-
-  const renderCardTitle = (className: string) => {
-    return (
-      <CardTitle
-        className={className}
-        isUnlisted={isUnlisted}
-        isScheduledRelease={isScheduledRelease}
-        isRemix={isRemix}
-        isStreamGated={isStreamGated}
-        // isPodcast={genre === Genre.PODCASTS}
-        isPodcast={genre === 'Podcasts'}
-        streamConditions={streamConditions}
-      />
-    )
-  }
-
-  const renderMood = () => {
-    const shouldShow = !isUnlisted || fieldVisibility.mood
-    return (
-      shouldShow &&
-      mood && (
-        <InfoLabel
-          className={styles.infoLabelPlacement}
-          labelName='mood'
-          labelValue={mood in moodMap ? moodMap[mood] : mood}
-        />
-      )
-    )
-  }
-
-  const renderGenre = () => {
-    const shouldShow = !isUnlisted || fieldVisibility.genre
-
-    return (
-      shouldShow && (
-        <InfoLabel
-          className={styles.infoLabelPlacement}
-          labelName='genre'
-          labelValue={genre}
-        />
-      )
-    )
-  }
-
-  const renderReleased = () => {
-    return (
-      !isUnlisted &&
-      released && (
-        <InfoLabel
-          className={styles.infoLabelPlacement}
-          labelName='released'
-          labelValue={formatDate(released)}
-        />
-      )
-    )
-  }
-
-  const renderStatsRow = () => {
-    return (
-      <RepostFavoritesStats
-        isUnlisted={isUnlisted}
-        repostCount={repostCount}
-        saveCount={saveCount}
-        onClickReposts={onClickReposts}
-        onClickFavorites={onClickFavorites}
-      />
-    )
-  }
-
-  const renderScheduledReleaseRow = () => {
-    return (
-      <ScheduledReleaseGiantLabel released={released} isUnlisted={isUnlisted} />
-    )
-  }
-
-  const isLoading = loading
-
-  const overflowMenuExtraItems = []
-  if (!isOwner) {
-    overflowMenuExtraItems.push({
-      text: following ? 'Unfollow Artist' : 'Follow Artist',
-      onClick: () =>
-        setTimeout(() => (following ? onUnfollow() : onFollow()), 0)
-    })
-  }
-
-  const fadeIn = {
-    [styles.show]: !isLoading,
-    [styles.hide]: isLoading
-  }
-
-  return (
-    <Tile className={styles.giantTrackTile} size='large' elevation='mid'>
-      <div className={styles.topSection}>
-        <ServerGiantArtwork
-          overrideArtwork={overrideArtwork}
-          coSign={coSign}
-          // @ts-ignore
-          cid={track?.cover_art_sizes ?? null}
-        />
-        <div className={styles.infoSection}>
-          <div className={styles.infoSectionHeader}>
-            {renderCardTitle(cn(fadeIn))}
-            <div className={styles.title}>
-              <Text variant='heading' size='xl' className={cn(fadeIn)}>
-                {trackTitle}
-              </Text>
-              {isLoading && <Skeleton className={styles.skeleton} />}
-            </div>
-            <Flex>
-              <Text
-                variant='title'
-                strength='weak'
-                tag='h2'
-                className={cn(fadeIn)}
-              >
-                <Text color='subdued'>By </Text>
-                <ServerUserLink userId={userId} popover />
-              </Text>
-              {isLoading && (
-                <Skeleton className={styles.skeleton} width='60%' />
-              )}
-            </Flex>
-          </div>
-
-          <div className={cn(styles.statsSection, fadeIn)}>
-            {renderStatsRow()}
-            {renderScheduledReleaseRow()}
-          </div>
-        </div>
-        <div className={styles.badges}>
-          {aiAttributionUserId ? (
-            <Badge
-              icon={<IconRobot />}
-              className={styles.badgeAi}
-              textLabel={messages.generatedWithAi}
-            />
-          ) : null}
-          {badge ? (
-            <Badge className={styles.badgePlacement} textLabel={badge} />
-          ) : null}
-        </div>
-      </div>
-
-      <div className={cn(styles.bottomSection, fadeIn)}>
-        <div className={styles.infoLabelsSection}>
-          <InfoLabel
-            className={styles.infoLabelPlacement}
-            labelName='duration'
-            labelValue={`${formatSeconds(duration)}`}
-          />
-          {renderReleased()}
-          {renderGenre()}
-          {renderMood()}
-          {credits ? (
-            <InfoLabel
-              className={styles.infoLabelPlacement}
-              labelName='credit'
-              labelValue={credits}
-            />
-          ) : null}
-        </div>
-        {description ? (
-          <ServerUserGeneratedText
-            tag='h3'
-            size='s'
-            className={styles.description}
-          >
-            {description}
-          </ServerUserGeneratedText>
-        ) : null}
-      </div>
-    </Tile>
-  )
-}
diff --git a/packages/web/src/components/user-generated-text/ServerUserGeneratedText.tsx b/packages/web/src/components/user-generated-text/ServerUserGeneratedText.tsx
index 4439bd5651e..0f5df3795ad 100644
--- a/packages/web/src/components/user-generated-text/ServerUserGeneratedText.tsx
+++ b/packages/web/src/components/user-generated-text/ServerUserGeneratedText.tsx
@@ -1,101 +1,52 @@
-import {
-  forwardRef,
-  useMemo,
-  MouseEvent,
-  Ref,
-  ForwardedRef,
-  ElementType
-} from 'react'
+import { Ref, forwardRef } from 'react'
 
-import { Text, TextProps } from '@audius/harmony'
+import { squashNewLines } from '@audius/common/src/utils/formatUtil'
+import { Text, TextProps } from '@audius/harmony/src/components/text'
+import { TextLink } from '@audius/harmony/src/components/text-link'
 import Linkify from 'linkify-react'
-import { IntermediateRepresentation, Opts } from 'linkifyjs'
+import { IntermediateRepresentation } from 'linkifyjs'
 
-import { ServerExternalTextLink } from 'components/link/ServerExternalTextLink'
-import { TextLink } from 'components/link/TextLink'
-import { squashNewLines } from 'utils/stringUtils'
-import { getPathFromAudiusUrl, isAudiusUrl } from 'utils/urlUtils'
+type LinkifyTextProps = TextProps<any>
 
-type LinkifyTextProps = TextProps<any> & {
-  innerRef?: Ref<any>
-}
-
-const LinkifyText = forwardRef((props: LinkifyTextProps, ref) => {
-  const { innerRef, ...other } = props
-  return <Text ref={innerRef ?? ref} {...other} />
-})
-
-type ServerUserGeneratedTextProps<T extends ElementType> = TextProps<T> & {
-  linkSource?: 'profile page' | 'track page' | 'collection page'
-  onClickLink?: (event: MouseEvent<HTMLAnchorElement>) => void
-}
-
-const formatExternalLink = (href: string) => {
-  const strippedHref = href.replace(/((?:https?):\/\/)|www./g, '')
-  return `https://${strippedHref}`
-}
-
-const formatAudiusUrl = (href: string) => {
-  return getPathFromAudiusUrl(href) as string
-}
+const LinkifyText = forwardRef(
+  (props: LinkifyTextProps, ref: Ref<HTMLSpanElement>) => {
+    const { ...other } = props
+    return <Text ref={ref} {...other} />
+  }
+)
 
 const renderLink = ({ attributes, content }: IntermediateRepresentation) => {
   const { href, ...props } = attributes
 
-  const isExternalLink = !isAudiusUrl(href)
-  const to = isExternalLink ? formatExternalLink(href) : formatAudiusUrl(href)
-
-  const LinkComponent = isExternalLink ? ServerExternalTextLink : TextLink
-
   return (
-    <LinkComponent to={to} variant='visible' {...props}>
+    <TextLink href={href} {...props} variant='visible'>
       {content}
-    </LinkComponent>
+    </TextLink>
   )
 }
 
-export const ServerUserGeneratedText = forwardRef(function <
-  T extends ElementType
->(props: ServerUserGeneratedTextProps<T>, ref: ForwardedRef<HTMLElement>) {
-  const {
-    children: childrenProp,
-    variant = 'body',
-    color,
-    size,
-    strength,
-    tag = 'p',
-    linkSource,
-    onClickLink,
-    ...other
-  } = props
+type ServerUserGeneratedTextProps = TextProps
 
-  const options: Opts = useMemo(
-    () => ({
-      render: renderLink,
-      attributes: { source: linkSource, onClick: onClickLink }
-    }),
-    [linkSource, onClickLink]
-  )
+export const ServerUserGeneratedText = (
+  props: ServerUserGeneratedTextProps
+) => {
+  const { children: childrenProp, ...other } = props
 
   const children =
     typeof childrenProp === 'string'
       ? squashNewLines(childrenProp)
       : childrenProp
 
+  if (!children) return null
+
   return (
     <Linkify
-      options={options}
+      options={{ render: renderLink }}
       as={LinkifyText}
-      innerRef={ref}
-      tag={tag}
-      variant={variant}
-      color={color}
-      size={size}
-      strength={strength}
       css={{ whiteSpace: 'pre-line' }}
       {...other}
     >
       {children}
     </Linkify>
   )
-})
+}
diff --git a/packages/web/src/pages/collection-page/DesktopServerCollectionPage.tsx b/packages/web/src/pages/collection-page/DesktopServerCollectionPage.tsx
new file mode 100644
index 00000000000..8140f367f1e
--- /dev/null
+++ b/packages/web/src/pages/collection-page/DesktopServerCollectionPage.tsx
@@ -0,0 +1,163 @@
+import { ID } from '@audius/common/src/models'
+import { getCollection } from '@audius/common/src/store/cache/collections/selectors'
+import { getUser } from '@audius/common/src/store/cache/users/selectors'
+import { formatCount } from '@audius/common/src/utils/formatUtil'
+import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
+import IconKebabHorizontal from '@audius/harmony/src/assets/icons/KebabHorizontal.svg'
+import IconPlay from '@audius/harmony/src/assets/icons/Play.svg'
+import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
+import IconShare from '@audius/harmony/src/assets/icons/Share.svg'
+import { Artwork } from '@audius/harmony/src/components/artwork/Artwork'
+import { Button } from '@audius/harmony/src/components/button/Button/Button'
+import { IconButton } from '@audius/harmony/src/components/button/IconButton/IconButton'
+import { PlainButton } from '@audius/harmony/src/components/button/PlainButton/PlainButton'
+import { IconComponent } from '@audius/harmony/src/components/icon'
+import { Box } from '@audius/harmony/src/components/layout/Box'
+import { Flex } from '@audius/harmony/src/components/layout/Flex'
+import { Paper } from '@audius/harmony/src/components/layout/Paper'
+import { Text } from '@audius/harmony/src/components/text'
+import { TextLink } from '@audius/harmony/src/components/text-link'
+
+import { AlbumDetailsText } from 'components/collection/components/AlbumDetailsText'
+import { ServerUserGeneratedText } from 'components/user-generated-text/ServerUserGeneratedText'
+import { useSelector } from 'utils/reducer'
+import { profilePage } from 'utils/route'
+
+type ServerCollectionPageProps = {
+  collectionId: ID
+}
+export const DesktopServerCollectionPage = (
+  props: ServerCollectionPageProps
+) => {
+  const { collectionId } = props
+
+  const collection = useSelector((state) =>
+    getCollection(state, { id: collectionId })
+  )
+  const user = useSelector((state) =>
+    getUser(state, { id: collection?.playlist_owner_id })
+  )
+
+  if (!collection || !user) return null
+
+  const {
+    cover_art,
+    is_album,
+    playlist_name,
+    repost_count,
+    save_count,
+    description,
+    updated_at,
+    created_at,
+    track_count,
+    tracks
+  } = collection
+
+  const duration = tracks?.reduce((acc, track) => acc + track.duration, 0) ?? 0
+  const { handle, name } = user
+
+  return (
+    <Flex w='100%' direction='column'>
+      <Box w='100%' css={{ maxWidth: 1096 }} pt={112} ph='l' alignSelf='center'>
+        <Paper direction='column' w='100%'>
+          <Flex p='l' direction='row' gap='xl'>
+            <Artwork src={cover_art!} h={270} w={270} isLoading={false} />
+            <Flex direction='column' justifyContent='space-between'>
+              <Flex direction='column' gap='xl' pt='s'>
+                <Text variant='label' color='subdued'>
+                  {is_album ? 'Album' : 'Playlist'}
+                </Text>
+                <Flex direction='column' gap='s'>
+                  <Text variant='heading' size='xl'>
+                    {playlist_name}
+                  </Text>
+                  <Text variant='body' strength='strong' color='subdued'>
+                    By{' '}
+                    <TextLink
+                      href={profilePage(handle)}
+                      variant='visible'
+                      size='m'
+                      strength='default'
+                    >
+                      {name}
+                    </TextLink>
+                  </Text>
+                </Flex>
+                {repost_count > 0 && save_count > 0 ? (
+                  <Flex gap='l'>
+                    {repost_count > 0 ? (
+                      <PlainButton
+                        variant='subdued'
+                        size='large'
+                        iconLeft={IconRepost}
+                        css={{ padding: 0 }}
+                      >
+                        {formatCount(repost_count)} Reposts
+                      </PlainButton>
+                    ) : null}
+                    {save_count > 0 ? (
+                      <PlainButton
+                        variant='subdued'
+                        size='large'
+                        iconLeft={IconHeart}
+                        css={{ padding: 0 }}
+                      >
+                        {formatCount(save_count)} Favorites
+                      </PlainButton>
+                    ) : null}
+                  </Flex>
+                ) : null}
+              </Flex>
+              <Flex gap='2xl'>
+                <Button iconLeft={IconPlay} size='large'>
+                  Play
+                </Button>
+                <IconButton
+                  icon={IconRepost}
+                  aria-label='repost track'
+                  size='2xl'
+                  color='subdued'
+                />
+                <IconButton
+                  icon={IconHeart as IconComponent}
+                  aria-label='favorite track'
+                  size='2xl'
+                  color='subdued'
+                />
+                <IconButton
+                  icon={IconShare}
+                  aria-label='share track'
+                  size='2xl'
+                  color='subdued'
+                />
+                <IconButton
+                  icon={IconKebabHorizontal}
+                  aria-label='more options'
+                  size='2xl'
+                  color='subdued'
+                />
+              </Flex>
+            </Flex>
+          </Flex>
+          <Flex
+            backgroundColor='surface1'
+            borderTop='default'
+            borderBottom='default'
+            p='xl'
+            gap='xl'
+          >
+            <Flex direction='column' gap='l'>
+              <ServerUserGeneratedText>{description}</ServerUserGeneratedText>
+              <AlbumDetailsText
+                lastModifiedDate={updated_at}
+                releaseDate={created_at}
+                numTracks={track_count}
+                duration={duration}
+              />
+            </Flex>
+          </Flex>
+        </Paper>
+      </Box>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/collection-page/MobileServerCollectionPage.tsx b/packages/web/src/pages/collection-page/MobileServerCollectionPage.tsx
new file mode 100644
index 00000000000..10ec3de5aaf
--- /dev/null
+++ b/packages/web/src/pages/collection-page/MobileServerCollectionPage.tsx
@@ -0,0 +1,142 @@
+import { ID } from '@audius/common/src/models'
+import { getCollection } from '@audius/common/src/store/cache/collections/selectors'
+import { getUser } from '@audius/common/src/store/cache/users/selectors'
+import { formatCount } from '@audius/common/src/utils/formatUtil'
+import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
+import IconKebabHorizontal from '@audius/harmony/src/assets/icons/KebabHorizontal.svg'
+import IconPlay from '@audius/harmony/src/assets/icons/Play.svg'
+import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
+import IconShare from '@audius/harmony/src/assets/icons/Share.svg'
+import { Artwork } from '@audius/harmony/src/components/artwork/Artwork'
+import { Button } from '@audius/harmony/src/components/button/Button/Button'
+import { IconButton } from '@audius/harmony/src/components/button/IconButton/IconButton'
+import { PlainButton } from '@audius/harmony/src/components/button/PlainButton/PlainButton'
+import { IconComponent } from '@audius/harmony/src/components/icon'
+import { Divider } from '@audius/harmony/src/components/layout/Divider'
+import { Flex } from '@audius/harmony/src/components/layout/Flex'
+import { Paper } from '@audius/harmony/src/components/layout/Paper'
+import { Text } from '@audius/harmony/src/components/text'
+import { TextLink } from '@audius/harmony/src/components/text-link'
+
+import { AlbumDetailsText } from 'components/collection/components/AlbumDetailsText'
+import { ServerUserGeneratedText } from 'components/user-generated-text/ServerUserGeneratedText'
+import { useSelector } from 'utils/reducer'
+import { profilePage } from 'utils/route'
+
+import { ServerTrackList } from './components/ServerTrackList'
+
+type ServerCollectionPageProps = {
+  collectionId: ID
+}
+
+export const MobileServerCollectionPage = (
+  props: ServerCollectionPageProps
+) => {
+  const { collectionId } = props
+
+  const collection = useSelector((state) =>
+    getCollection(state, { id: collectionId })
+  )
+  const user = useSelector((state) =>
+    getUser(state, { id: collection?.playlist_owner_id })
+  )
+
+  if (!collection || !user) return null
+
+  const {
+    cover_art,
+    is_album,
+    playlist_name,
+    repost_count,
+    save_count,
+    description,
+    updated_at,
+    created_at,
+    track_count,
+    tracks
+  } = collection
+
+  const duration = tracks?.reduce((acc, track) => acc + track.duration, 0) ?? 0
+  const { handle, name } = user
+
+  return (
+    <Flex direction='column' backgroundColor='default' p='l'>
+      <Paper direction='column'>
+        <Flex direction='column' p='l' gap='l' w='100%' alignItems='center'>
+          <Text variant='label' color='subdued'>
+            {is_album ? 'Album' : 'Playlist'}
+          </Text>
+          <Artwork src={cover_art!} isLoading={false} h={224} w={224} />
+          <Flex direction='column' gap='s'>
+            <Text variant='heading' size='s'>
+              {playlist_name}
+            </Text>
+            <TextLink
+              href={profilePage(handle)}
+              variant='visible'
+              size='l'
+              css={{ alignSelf: 'center' }}
+            >
+              {name}
+            </TextLink>
+          </Flex>
+          <Button iconLeft={IconPlay} fullWidth>
+            Play
+          </Button>
+          <Flex gap='xl'>
+            <IconButton
+              icon={IconRepost}
+              aria-label='repost track'
+              size='2xl'
+              color='subdued'
+            />
+            <IconButton
+              icon={IconHeart as IconComponent}
+              aria-label='favorite track'
+              size='2xl'
+              color='subdued'
+            />
+            <IconButton
+              icon={IconShare}
+              aria-label='share track'
+              size='2xl'
+              color='subdued'
+            />
+            <IconButton
+              icon={IconKebabHorizontal}
+              aria-label='more options'
+              size='2xl'
+              color='subdued'
+            />
+          </Flex>
+        </Flex>
+        <Divider />
+        <Flex direction='column' backgroundColor='surface1' p='l' gap='l'>
+          {repost_count > 0 && save_count > 0 ? (
+            <Flex gap='xl'>
+              {repost_count > 0 ? (
+                <PlainButton iconLeft={IconRepost} css={{ padding: 0 }}>
+                  {formatCount(repost_count)} Reposts
+                </PlainButton>
+              ) : null}
+              {save_count > 0 ? (
+                <PlainButton iconLeft={IconHeart} css={{ padding: 0 }}>
+                  {formatCount(save_count)} Favorites
+                </PlainButton>
+              ) : null}
+            </Flex>
+          ) : null}
+          <ServerUserGeneratedText>{description}</ServerUserGeneratedText>
+          <AlbumDetailsText
+            lastModifiedDate={updated_at}
+            releaseDate={created_at}
+            numTracks={track_count}
+            duration={duration}
+          />
+        </Flex>
+        <Divider />
+        <ServerTrackList collectionId={collectionId} />
+      </Paper>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/collection-page/ServerCollectionPage.tsx b/packages/web/src/pages/collection-page/ServerCollectionPage.tsx
new file mode 100644
index 00000000000..3d3ffffe094
--- /dev/null
+++ b/packages/web/src/pages/collection-page/ServerCollectionPage.tsx
@@ -0,0 +1,18 @@
+import { ID } from '@audius/common/src/models/Identifiers'
+
+import { DesktopServerCollectionPage } from './DesktopServerCollectionPage'
+import { MobileServerCollectionPage } from './MobileServerCollectionPage'
+
+type ServerCollectionPageProps = {
+  collectionId: ID
+  isMobile: boolean
+}
+
+export const ServerCollectionPage = (props: ServerCollectionPageProps) => {
+  const { collectionId, isMobile } = props
+  return isMobile ? (
+    <MobileServerCollectionPage collectionId={collectionId} />
+  ) : (
+    <DesktopServerCollectionPage collectionId={collectionId} />
+  )
+}
diff --git a/packages/web/src/pages/collection-page/components/ServerTrackList.tsx b/packages/web/src/pages/collection-page/components/ServerTrackList.tsx
new file mode 100644
index 00000000000..4e6b550e77c
--- /dev/null
+++ b/packages/web/src/pages/collection-page/components/ServerTrackList.tsx
@@ -0,0 +1,48 @@
+import { ID } from '@audius/common/src/models'
+import { getCollectionTracks } from '@audius/common/src/store/cache/collections/selectors'
+import IconKebabHorizontal from '@audius/harmony/src/assets/icons/KebabHorizontal.svg'
+import { Artwork } from '@audius/harmony/src/components/artwork/Artwork'
+import { IconButton } from '@audius/harmony/src/components/button/IconButton/IconButton'
+import { Flex } from '@audius/harmony/src/components/layout/Flex'
+import { TextLink } from '@audius/harmony/src/components/text-link'
+
+import { useSelector } from 'utils/reducer'
+
+type ServerTrackListProps = {
+  collectionId: ID
+}
+
+export const ServerTrackList = (props: ServerTrackListProps) => {
+  const { collectionId } = props
+  const tracks = useSelector((state) =>
+    getCollectionTracks(state, { id: collectionId })
+  )
+  if (!tracks) return null
+
+  return (
+    <ul>
+      {tracks.map((track) => {
+        const { track_id, title, cover_art } = track
+        return (
+          <Flex
+            as='li'
+            key={track_id}
+            ph='m'
+            pv='s'
+            justifyContent='space-between'
+          >
+            <Flex alignItems='center' gap='m'>
+              <Artwork src={cover_art!} h={56} w={56} isLoading={false} />
+              <TextLink size='s'>{title}</TextLink>
+            </Flex>
+            <IconButton
+              icon={IconKebabHorizontal}
+              aria-label='more options'
+              color='subdued'
+            />
+          </Flex>
+        )
+      })}
+    </ul>
+  )
+}
diff --git a/packages/web/src/pages/server-track-page/ServerTrackPage.tsx b/packages/web/src/pages/server-track-page/ServerTrackPage.tsx
deleted file mode 100644
index 19299574e56..00000000000
--- a/packages/web/src/pages/server-track-page/ServerTrackPage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ServerTrackPage as DesktopPage } from './desktop/ServerTrackPage'
-import { ServerTrackPage as MobilePage } from './mobile/ServerTrackPage'
-
-export type ServerTrackPageProps = {
-  track: any
-  isMobile: boolean
-}
-
-export const ServerTrackPage = ({
-  isMobile,
-  ...other
-}: ServerTrackPageProps) => {
-  // @ts-ignore
-  return isMobile ? <MobilePage {...other} /> : <DesktopPage {...other} />
-}
diff --git a/packages/web/src/pages/server-track-page/desktop/ServerTrackPage.tsx b/packages/web/src/pages/server-track-page/desktop/ServerTrackPage.tsx
deleted file mode 100644
index 2bcd9e000ec..00000000000
--- a/packages/web/src/pages/server-track-page/desktop/ServerTrackPage.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { ID, Track, User } from '@audius/common/models'
-import { useSelector } from 'react-redux'
-
-import ServerCoverPhoto from 'components/cover-photo/ServerCoverPhoto'
-import NavBanner from 'components/nav-banner/NavBanner'
-import { ServerPage } from 'components/page/ServerPage'
-import { ServerStatBanner } from 'components/stat-banner/ServerStatBanner'
-import { ServerGiantTrackTile } from 'components/track/ServerGiantTrackTile'
-import { getTrackDefaults, emptyStringGuard } from 'pages/track-page/utils'
-import { AppState } from 'store/types'
-import { decodeHashId } from 'utils/hashIds'
-
-import styles from '../../track-page/components/desktop/TrackPage.module.css'
-
-export type OwnProps = {
-  title: string
-  description: string
-  canonicalUrl: string
-  structuredData?: Object
-  // Hero Track Props
-  heroTrack: Track | null
-  hasValidRemixParent: boolean
-  user: User | null
-  heroPlaying: boolean
-  previewing: boolean
-  userId: ID | null
-  badge: string | null
-}
-
-export const ServerTrackPage = ({
-  title,
-  description,
-  canonicalUrl,
-  structuredData,
-  // Hero Track Props
-  heroTrack,
-  user,
-  userId,
-  badge
-}: OwnProps) => {
-  // @ts-ignore
-  const trackId = decodeHashId(heroTrack.id)
-  const track = useSelector(
-    (state: AppState) => state.tracks.entries[trackId as ID].metadata
-  )
-  // @ts-ignore
-  const trackOwner = track?.user
-
-  const isOwner = track?.owner_id === userId
-  const following = user?.does_current_user_follow ?? false
-  const isSaved = track?.has_current_user_saved ?? false
-  const isReposted = track?.has_current_user_reposted ?? false
-
-  const defaults = getTrackDefaults(track)
-
-  const renderGiantTrackTile = () => (
-    <ServerGiantTrackTile
-      loading={false}
-      playing={false}
-      previewing={false}
-      trackTitle={defaults.title}
-      trackId={defaults.trackId}
-      aiAttributionUserId={defaults.aiAttributionUserId}
-      userId={trackOwner?.user_id ?? 0}
-      artistHandle={emptyStringGuard(trackOwner?.handle)}
-      coverArtSizes={defaults.coverArtSizes}
-      // @ts-ignore
-      overrideArtwork={heroTrack.artwork['1000x1000']}
-      tags={defaults.tags}
-      description={defaults.description}
-      listenCount={defaults.playCount}
-      duration={defaults.duration}
-      released={defaults.released}
-      credits={defaults.credits}
-      genre={defaults.genre}
-      mood={defaults.mood}
-      repostCount={defaults.repostCount}
-      saveCount={defaults.saveCount}
-      isReposted={isReposted}
-      isOwner={isOwner}
-      currentUserId={userId}
-      isArtistPick={
-        track && trackOwner
-          ? trackOwner.artist_pick_track_id === track.track_id
-          : false
-      }
-      ddexApp={track?.ddex_app}
-      isSaved={isSaved}
-      badge={badge}
-      isUnlisted={defaults.isUnlisted}
-      isScheduledRelease={defaults.isScheduledRelease}
-      isStreamGated={defaults.isStreamGated}
-      streamConditions={defaults.streamConditions}
-      isDownloadGated={defaults.isDownloadGated}
-      downloadConditions={defaults.downloadConditions}
-      // TODO: fix this
-      // hasStreamAccess={hasStreamAccess}
-      hasStreamAccess={true}
-      isRemix={!!defaults.remixParentTrackId}
-      isPublishing={defaults.isPublishing}
-      fieldVisibility={defaults.fieldVisibility}
-      coSign={defaults.coSign}
-      // Actions
-      onPlay={() => {}}
-      onPreview={() => {}}
-      onShare={() => {}}
-      onRepost={() => {}}
-      onSave={() => {}}
-      following={following}
-      onFollow={() => {}}
-      onUnfollow={() => {}}
-      onMakePublic={() => {}}
-      onClickReposts={() => {}}
-      onClickFavorites={() => {}}
-    />
-  )
-
-  return (
-    <ServerPage
-      title={title}
-      description={description}
-      ogDescription={defaults.description}
-      canonicalUrl={canonicalUrl}
-      structuredData={structuredData}
-      variant='flush'
-      scrollableSearch
-      fromOpacity={1}
-      noIndex={defaults.isUnlisted}
-    >
-      <div className={styles.headerWrapper}>
-        <ServerCoverPhoto userId={trackOwner ? trackOwner.user_id : null} />
-        <ServerStatBanner isEmpty />
-        <NavBanner empty />
-      </div>
-      <div className={styles.contentWrapper}>{renderGiantTrackTile()}</div>
-    </ServerPage>
-  )
-}
diff --git a/packages/web/src/pages/server-track-page/mobile/ServerActionButtonRow.tsx b/packages/web/src/pages/server-track-page/mobile/ServerActionButtonRow.tsx
deleted file mode 100644
index 218798ead87..00000000000
--- a/packages/web/src/pages/server-track-page/mobile/ServerActionButtonRow.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Flex } from '@audius/harmony'
-
-export const ServerActionButtonRow = () => {
-  return (
-    <Flex
-      h={42.5}
-      direction='row'
-      alignItems='center'
-      justifyContent='center'
-      gap='xl'
-      mt='m'
-    />
-  )
-}
diff --git a/packages/web/src/pages/server-track-page/mobile/ServerHiddenTrackHeader.tsx b/packages/web/src/pages/server-track-page/mobile/ServerHiddenTrackHeader.tsx
deleted file mode 100644
index 07ce0c04e3d..00000000000
--- a/packages/web/src/pages/server-track-page/mobile/ServerHiddenTrackHeader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { IconVisibilityHidden, Text } from '@audius/harmony'
-
-import styles from '../../track-page/components/HiddenTrackHeader.module.css'
-
-const messages = {
-  hiddenTrackTitle: 'Hidden Track'
-}
-
-// Presents the Hidden Track title. Extracted for use in mobile and desktop
-// track pages.
-export const ServerHiddenTrackHeader = () => {
-  return (
-    <span className={styles.root}>
-      <IconVisibilityHidden className={styles.icon} />
-      <Text variant='title' size='s' strength='weak' className={styles.label}>
-        {messages.hiddenTrackTitle}
-      </Text>
-    </span>
-  )
-}
diff --git a/packages/web/src/pages/server-track-page/mobile/ServerStatsButtonRow.tsx b/packages/web/src/pages/server-track-page/mobile/ServerStatsButtonRow.tsx
deleted file mode 100644
index 4aa5442a143..00000000000
--- a/packages/web/src/pages/server-track-page/mobile/ServerStatsButtonRow.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { IconHeart as IconFavorite, IconRepost } from '@audius/harmony'
-import cn from 'classnames'
-
-import { formatCount } from 'utils/stringUtils'
-
-import styles from '../../track-page/components/mobile/StatsButtonRow.module.css'
-
-const messages = {
-  plays: 'Plays'
-}
-
-type ServerStatsButtonRowProps = {
-  className?: string
-  showListenCount: boolean
-  showFavoriteCount: boolean
-  showRepostCount: boolean
-  listenCount?: number
-  favoriteCount: number
-  repostCount: number
-  onClickFavorites: () => void
-  onClickReposts: () => void
-}
-
-// A row of stats, visible on playlist and tracks pages.
-export const ServerStatsButtonRow = ({
-  className,
-  showListenCount,
-  showFavoriteCount,
-  showRepostCount,
-  favoriteCount,
-  repostCount,
-  onClickFavorites,
-  onClickReposts,
-  listenCount = 0
-}: ServerStatsButtonRowProps) => {
-  const renderListenCount = () => {
-    return (
-      <div className={cn(styles.countContainer, styles.listenCount)}>
-        <span className={styles.count}>{formatCount(listenCount)}</span>
-        <span className={styles.countLabel}>{messages.plays}</span>
-      </div>
-    )
-  }
-
-  const renderFavoriteCount = () => {
-    return (
-      <div className={styles.countContainer} onClick={onClickFavorites}>
-        <span className={styles.count}>{formatCount(favoriteCount)}</span>
-        <IconFavorite />
-      </div>
-    )
-  }
-
-  const renderRepostCount = () => {
-    return (
-      <div className={styles.countContainer} onClick={onClickReposts}>
-        <span className={styles.count}>{formatCount(repostCount)}</span>
-        <IconRepost />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      {(showListenCount || showFavoriteCount || showRepostCount) && (
-        <div className={cn(styles.statsContainer, className)}>
-          {showListenCount && renderListenCount()}
-          {showFavoriteCount && renderFavoriteCount()}
-          {showRepostCount && renderRepostCount()}
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/packages/web/src/pages/server-track-page/mobile/ServerTrackPage.tsx b/packages/web/src/pages/server-track-page/mobile/ServerTrackPage.tsx
deleted file mode 100644
index f546c0013e0..00000000000
--- a/packages/web/src/pages/server-track-page/mobile/ServerTrackPage.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { useEffect, useContext } from 'react'
-
-import {
-  ID,
-  LineupState,
-  SquareSizes,
-  Track,
-  User
-} from '@audius/common/models'
-import { OverflowAction, QueueItem } from '@audius/common/store'
-
-import { HeaderContext } from 'components/header/mobile/HeaderContextProvider'
-import { ServerMobilePageContainer } from 'components/mobile-page-container/ServerMobilePageContainer'
-import NavContext, {
-  LeftPreset,
-  CenterPreset,
-  RightPreset
-} from 'components/nav/mobile/NavContext'
-import { getTrackDefaults } from 'pages/track-page/utils'
-import { decodeHashId } from 'utils/hashIds'
-
-import styles from '../../track-page/components/mobile/TrackPage.module.css'
-
-import { ServerTrackPageHeader } from './ServerTrackPageHeader'
-
-export type OwnProps = {
-  title: string
-  description: string
-  canonicalUrl: string
-  structuredData?: Object
-  hasValidRemixParent: boolean
-  // Hero Track Props
-  heroTrack: Track | null
-  user: User | null
-  heroPlaying: boolean
-  previewing: boolean
-  userId: ID | null
-  onHeroPlay: ({
-    isPlaying,
-    isPreview
-  }: {
-    isPlaying: boolean
-    isPreview?: boolean
-  }) => void
-  onHeroShare: (trackId: ID) => void
-  goToAllRemixesPage: () => void
-  goToParentRemixesPage: () => void
-  onHeroRepost: (isReposted: boolean, trackId: number) => void
-  onClickMobileOverflow: (
-    trackId: ID,
-    overflowActions: OverflowAction[]
-  ) => void
-
-  onSaveTrack: (isSaved: boolean, trackId: ID) => void
-  // Tracks Lineup Props
-  tracks: LineupState<Track>
-  currentQueueItem: QueueItem
-  isPlaying: boolean
-  isBuffering: boolean
-  play: (uid?: string) => void
-  pause: () => void
-  goToFavoritesPage: (trackId: ID) => void
-  goToRepostsPage: (trackId: ID) => void
-}
-
-export const ServerTrackPage = ({
-  title,
-  description,
-  canonicalUrl,
-  structuredData,
-  // Hero Track Props
-  heroTrack,
-  user,
-  heroPlaying,
-  previewing,
-  userId,
-  onClickMobileOverflow
-}: OwnProps) => {
-  const { setLeft, setCenter, setRight } = useContext(NavContext)!
-  useEffect(() => {
-    setLeft(LeftPreset.BACK)
-    setCenter(CenterPreset.LOGO)
-    setRight(RightPreset.SEARCH)
-  }, [setLeft, setCenter, setRight])
-
-  const { setHeader } = useContext(HeaderContext)
-  useEffect(() => {
-    setHeader(null)
-  }, [setHeader])
-
-  const isOwner = heroTrack ? heroTrack.owner_id === userId : false
-  const isSaved = heroTrack ? heroTrack.has_current_user_saved : false
-  const isReposted = heroTrack ? heroTrack.has_current_user_reposted : false
-  const isFollowing = user ? user.does_current_user_follow : false
-
-  const defaults = getTrackDefaults(heroTrack)
-
-  return (
-    <ServerMobilePageContainer
-      title={title}
-      description={description}
-      ogDescription={defaults.description}
-      canonicalUrl={canonicalUrl}
-      structuredData={structuredData}
-      noIndex={defaults.isUnlisted}
-    >
-      <div className={styles.trackContent}>
-        <ServerTrackPageHeader
-          isLoading={false}
-          isPlaying={heroPlaying}
-          isPreviewing={previewing}
-          isReposted={isReposted}
-          isFollowing={isFollowing}
-          title={defaults.title}
-          trackId={defaults.trackId}
-          // @ts-ignore
-          trackArtworkSrc={heroTrack?.artwork[SquareSizes.SIZE_480_BY_480]}
-          // @ts-ignore
-          userId={decodeHashId(heroTrack?.user.id) ?? 0}
-          coverArtSizes={defaults.coverArtSizes}
-          tags={defaults.tags}
-          description={defaults.description}
-          listenCount={defaults.playCount}
-          repostCount={defaults.repostCount}
-          duration={defaults.duration}
-          released={defaults.released}
-          credits={defaults.credits}
-          genre={defaults.genre}
-          mood={defaults.mood}
-          saveCount={defaults.saveCount}
-          isOwner={isOwner}
-          isSaved={isSaved}
-          coSign={defaults.coSign}
-          // Actions (Wire up once we add backend integrations)
-          onClickMobileOverflow={onClickMobileOverflow}
-          onPlay={() => {}}
-          onPreview={() => {}}
-          onSave={() => {}}
-          onShare={() => {}}
-          onRepost={() => {}}
-          isUnlisted={defaults.isUnlisted}
-          isStreamGated={defaults.isStreamGated}
-          streamConditions={defaults.streamConditions}
-          hasStreamAccess={true}
-          hasDownloadAccess={true}
-          // -------------------
-          isRemix={!!defaults.remixParentTrackId}
-          fieldVisibility={defaults.fieldVisibility}
-          aiAttributedUserId={defaults.aiAttributionUserId}
-          goToFavoritesPage={() => {}}
-          goToRepostsPage={() => {}}
-        />
-      </div>
-    </ServerMobilePageContainer>
-  )
-}
diff --git a/packages/web/src/pages/server-track-page/mobile/ServerTrackPageHeader.tsx b/packages/web/src/pages/server-track-page/mobile/ServerTrackPageHeader.tsx
deleted file mode 100644
index 21a3841dd61..00000000000
--- a/packages/web/src/pages/server-track-page/mobile/ServerTrackPageHeader.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-import { useCallback } from 'react'
-
-import {
-  isContentCollectibleGated,
-  isContentUSDCPurchaseGated,
-  ID,
-  CoverArtSizes,
-  FieldVisibility,
-  Remix,
-  AccessConditions
-} from '@audius/common/models'
-import { CommonState, OverflowAction } from '@audius/common/store'
-import {
-  Flex,
-  IconCollectible,
-  IconPause,
-  IconPlay,
-  IconSpecialAccess,
-  IconCart,
-  Box,
-  Button
-} from '@audius/harmony'
-import cn from 'classnames'
-import { shallowEqual, useSelector } from 'react-redux'
-
-import { ServerUserLink } from 'components/link/ServerUserLink'
-import { SearchTag } from 'components/search/SearchTag'
-import { ServerUserGeneratedText } from 'components/user-generated-text/ServerUserGeneratedText'
-import { moodMap } from 'utils/Moods'
-import { formatDate, formatSeconds } from 'utils/dateUtils'
-
-import styles from '../../track-page/components/mobile/TrackHeader.module.css'
-
-import { ServerActionButtonRow } from './ServerActionButtonRow'
-import { ServerHiddenTrackHeader } from './ServerHiddenTrackHeader'
-import { ServerStatsButtonRow } from './ServerStatsButtonRow'
-
-const messages = {
-  track: 'TRACK',
-  remix: 'REMIX',
-  play: 'PLAY',
-  preview: 'PREVIEW',
-  pause: 'PAUSE',
-  collectibleGated: 'COLLECTIBLE GATED',
-  premiumTrack: 'PREMIUM TRACK',
-  specialAccess: 'SPECIAL ACCESS',
-  generatedWithAi: 'Generated With AI',
-  artworkAltText: 'Track Artwork'
-}
-
-type PlayButtonProps = {
-  disabled?: boolean
-  playing: boolean
-  onPlay: () => void
-}
-
-const PlayButton = ({ disabled, playing, onPlay }: PlayButtonProps) => {
-  return (
-    <Button
-      disabled={disabled}
-      variant='primary'
-      iconLeft={playing ? IconPause : IconPlay}
-      onClick={onPlay}
-      fullWidth
-    >
-      {playing ? messages.pause : messages.play}
-    </Button>
-  )
-}
-
-type ServerTrackPageHeaderProps = {
-  isLoading: boolean
-  isPlaying: boolean
-  isPreviewing: boolean
-  isOwner: boolean
-  isSaved: boolean
-  isReposted: boolean
-  isFollowing: boolean
-  title: string
-  trackId: ID
-  userId: ID
-  trackArtworkSrc?: string
-  coverArtSizes: CoverArtSizes | null
-  description: string
-  released: string
-  genre: string
-  mood: string
-  credits: string
-  tags: string
-  listenCount: number
-  duration: number
-  saveCount: number
-  repostCount: number
-  isUnlisted: boolean
-  isStreamGated: boolean
-  streamConditions: AccessConditions | null
-  hasStreamAccess: boolean
-  hasDownloadAccess: boolean
-  isRemix: boolean
-  fieldVisibility: FieldVisibility
-  coSign: Remix | null
-  aiAttributedUserId: ID | null
-  onClickMobileOverflow: (
-    trackId: ID,
-    overflowActions: OverflowAction[]
-  ) => void
-  onPlay: () => void
-  onPreview: () => void
-  onShare: () => void
-  onSave: () => void
-  onRepost: () => void
-  goToFavoritesPage: (trackId: ID) => void
-  goToRepostsPage: (trackId: ID) => void
-}
-
-export const ServerTrackPageHeader = ({
-  title,
-  trackId,
-  userId,
-  trackArtworkSrc,
-  description = '',
-  isOwner = false,
-  released,
-  duration,
-  isPlaying,
-  isPreviewing,
-  isUnlisted,
-  isStreamGated,
-  streamConditions,
-  hasStreamAccess,
-  isRemix,
-  fieldVisibility,
-  saveCount = 0,
-  repostCount,
-  listenCount,
-  mood,
-  credits,
-  genre,
-  tags,
-  onPlay = () => {},
-  goToFavoritesPage,
-  goToRepostsPage
-}: ServerTrackPageHeaderProps) => {
-  const track = useSelector(
-    (state: CommonState) => state.tracks.entries[trackId],
-    shallowEqual
-  )
-  const hasDownloadableAssets =
-    // @ts-ignore
-    track?.is_downloadable || (track?._stems?.length ?? 0) > 0
-
-  const showListenCount =
-    isOwner || (!isStreamGated && (isUnlisted || fieldVisibility.play_count))
-
-  const filteredTags = (tags || '').split(',').filter(Boolean)
-
-  const trackLabels: { isHidden?: boolean; label: string; value: any }[] = [
-    {
-      label: 'Duration',
-      value: formatSeconds(duration)
-    },
-    {
-      label: 'Genre',
-      isHidden: isUnlisted && !fieldVisibility?.genre,
-      value: genre
-    },
-    { value: formatDate(released), label: 'Released', isHidden: isUnlisted },
-    {
-      isHidden: isUnlisted && !fieldVisibility?.mood,
-      label: 'Mood',
-      // @ts-ignore
-      value: mood && mood in moodMap ? moodMap[mood] : mood
-    },
-    { label: 'Credit', value: credits }
-  ].filter(({ isHidden, value }) => !isHidden && !!value)
-
-  const renderTags = () => {
-    if ((isUnlisted && !fieldVisibility.tags) || filteredTags.length === 0) {
-      return null
-    }
-
-    return (
-      <Flex
-        gap='s'
-        wrap='wrap'
-        justifyContent='center'
-        className={styles.withSectionDivider}
-      >
-        {filteredTags.map((tag) => (
-          <SearchTag key={tag} source='track page'>
-            {tag}
-          </SearchTag>
-        ))}
-      </Flex>
-    )
-  }
-
-  const renderTrackLabels = () => {
-    return trackLabels.map((infoFact) => {
-      return (
-        <div key={infoFact.label} className={styles.infoFact}>
-          <div className={styles.infoLabel}>{infoFact.label}</div>
-          <div className={styles.infoValue}>{infoFact.value}</div>
-        </div>
-      )
-    })
-  }
-
-  const onClickFavorites = useCallback(() => {
-    goToFavoritesPage(trackId)
-  }, [goToFavoritesPage, trackId])
-
-  const onClickReposts = useCallback(() => {
-    goToRepostsPage(trackId)
-  }, [goToRepostsPage, trackId])
-
-  const imageElement = (
-    <Box
-      className={cn(styles.coverArt, styles.imageWrapper)}
-      css={{ overflow: 'hidden' }}
-    >
-      <img
-        css={{
-          height: '100%',
-          width: '100%',
-          maxWidth: '100%',
-          objectFit: 'cover'
-        }}
-        src={trackArtworkSrc}
-        alt='Track Artwork'
-      />
-    </Box>
-  )
-
-  const renderHeaderText = () => {
-    if (isStreamGated) {
-      let IconComponent = IconSpecialAccess
-      let titleMessage = messages.specialAccess
-      if (isContentCollectibleGated(streamConditions)) {
-        IconComponent = IconCollectible
-        titleMessage = messages.collectibleGated
-      } else if (isContentUSDCPurchaseGated(streamConditions)) {
-        IconComponent = IconCart
-        titleMessage = messages.premiumTrack
-      }
-      return (
-        <div className={cn(styles.typeLabel, styles.gatedContentLabel)}>
-          <IconComponent />
-          <span>{titleMessage}</span>
-        </div>
-      )
-    }
-
-    return (
-      <div className={styles.typeLabel}>
-        {isRemix ? messages.remix : messages.track}
-      </div>
-    )
-  }
-
-  return (
-    <div className={styles.trackHeader}>
-      {isUnlisted ? (
-        <div className={styles.hiddenTrackHeaderWrapper}>
-          <ServerHiddenTrackHeader />
-        </div>
-      ) : (
-        renderHeaderText()
-      )}
-      {imageElement}
-      <div className={styles.titleArtistSection}>
-        <h1 className={styles.title}>{title}</h1>
-        <ServerUserLink userId={userId} variant='visible' size='l' />
-      </div>
-      <PlayButton
-        disabled={!hasStreamAccess}
-        playing={isPlaying && !isPreviewing}
-        onPlay={onPlay}
-      />
-      <ServerActionButtonRow />
-      <ServerStatsButtonRow
-        className={styles.withSectionDivider}
-        showListenCount={showListenCount}
-        showFavoriteCount={!isUnlisted}
-        showRepostCount={!isUnlisted}
-        listenCount={listenCount}
-        favoriteCount={saveCount}
-        repostCount={repostCount}
-        onClickFavorites={onClickFavorites}
-        onClickReposts={onClickReposts}
-      />
-
-      {description ? (
-        <ServerUserGeneratedText
-          className={styles.description}
-          linkSource='track page'
-        >
-          {description}
-        </ServerUserGeneratedText>
-      ) : null}
-      <div className={cn(styles.infoSection, styles.withSectionDivider)}>
-        {renderTrackLabels()}
-      </div>
-      {renderTags()}
-
-      {hasDownloadableAssets ? <Box pt='l' w='100%' /> : null}
-    </div>
-  )
-}
diff --git a/packages/web/src/pages/track-page/DesktopServerTrackPage.tsx b/packages/web/src/pages/track-page/DesktopServerTrackPage.tsx
new file mode 100644
index 00000000000..6bdbb1bf923
--- /dev/null
+++ b/packages/web/src/pages/track-page/DesktopServerTrackPage.tsx
@@ -0,0 +1,182 @@
+import { ID } from '@audius/common/src/models/Identifiers'
+import { getTrack } from '@audius/common/src/store/cache/tracks/selectors'
+import { getUser } from '@audius/common/src/store/cache/users/selectors'
+import { formatCount } from '@audius/common/src/utils/formatUtil'
+import {
+  formatDate,
+  formatSecondsAsText
+} from '@audius/common/src/utils/timeUtil'
+import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
+import IconKebabHorizontal from '@audius/harmony/src/assets/icons/KebabHorizontal.svg'
+import IconPlay from '@audius/harmony/src/assets/icons/Play.svg'
+import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
+import IconShare from '@audius/harmony/src/assets/icons/Share.svg'
+import { Button } from '@audius/harmony/src/components/button/Button/Button'
+import { IconButton } from '@audius/harmony/src/components/button/IconButton/IconButton'
+import { PlainButton } from '@audius/harmony/src/components/button/PlainButton/PlainButton'
+import { IconComponent } from '@audius/harmony/src/components/icon'
+import { Box } from '@audius/harmony/src/components/layout/Box'
+import { Divider } from '@audius/harmony/src/components/layout/Divider'
+import { Flex } from '@audius/harmony/src/components/layout/Flex'
+import { Paper } from '@audius/harmony/src/components/layout/Paper'
+import { Tag } from '@audius/harmony/src/components/tag'
+import { Text } from '@audius/harmony/src/components/text'
+import { TextLink } from '@audius/harmony/src/components/text-link'
+import { Link } from 'react-router-dom'
+
+import { ServerUserGeneratedText } from 'components/user-generated-text/ServerUserGeneratedText'
+import { useSelector } from 'utils/reducer'
+import { profilePage, searchResultsPage } from 'utils/route'
+
+import { Metadata } from './components/Metadata'
+
+type ServerTrackPageProps = {
+  trackId: ID
+}
+
+export const DesktopServerTrackPage = (props: ServerTrackPageProps) => {
+  const { trackId } = props
+  const track = useSelector((state) => getTrack(state, { id: trackId }))
+  const user = useSelector((state) => getUser(state, { id: track?.owner_id }))
+  if (!track || !user) return null
+
+  const {
+    title,
+    repost_count,
+    save_count,
+    play_count,
+    description,
+    genre,
+    mood,
+    release_date,
+    duration,
+    tags,
+    field_visibility,
+    cover_art
+  } = track
+  const { handle, name, cover_photo } = user
+
+  return (
+    <Flex w='100%' direction='column'>
+      <Box
+        as='img'
+        // @ts-ignore
+        src={cover_photo}
+        w='100%'
+        h={376}
+        css={{ position: 'absolute', top: 0, objectFit: 'cover' }}
+      />
+      <Box w='100%' css={{ maxWidth: 1080 }} pt={200} ph='l' alignSelf='center'>
+        <Paper direction='column' w='100%'>
+          <Flex p='l' gap='xl'>
+            {/* @ts-ignore */}
+            <Box as='img' src={cover_art} h={320} w={320} borderRadius='m' />
+            <Flex direction='column' gap='2xl'>
+              <Flex direction='column' gap='l'>
+                <Text variant='label'>Track</Text>
+                <Flex direction='column' gap='s'>
+                  <Text variant='heading' size='xl'>
+                    {title}
+                  </Text>
+                  <Text
+                    variant='body'
+                    size='s'
+                    strength='strong'
+                    color='subdued'
+                  >
+                    By{' '}
+                    <TextLink
+                      size='m'
+                      strength='default'
+                      href={profilePage(handle)}
+                      variant='visible'
+                    >
+                      {name}
+                    </TextLink>
+                  </Text>
+                </Flex>
+                <Flex gap='l'>
+                  <PlainButton
+                    variant='subdued'
+                    size='large'
+                    iconLeft={IconRepost}
+                    css={{ padding: 0 }}
+                  >
+                    {formatCount(repost_count)} Reposts
+                  </PlainButton>
+                  <PlainButton
+                    variant='subdued'
+                    size='large'
+                    iconLeft={IconHeart}
+                    css={{ padding: 0 }}
+                  >
+                    {formatCount(save_count)} Favorites
+                  </PlainButton>
+                </Flex>
+              </Flex>
+              <Flex gap='xl' alignItems='center'>
+                <Button iconLeft={IconPlay} size='large'>
+                  Play
+                </Button>
+                <Text variant='title' color='subdued'>
+                  {formatCount(play_count)} Plays
+                </Text>
+              </Flex>
+              <Flex gap='2xl'>
+                <IconButton
+                  icon={IconRepost}
+                  aria-label='repost track'
+                  size='2xl'
+                  color='subdued'
+                />
+                <IconButton
+                  icon={IconHeart as IconComponent}
+                  aria-label='favorite track'
+                  size='2xl'
+                  color='subdued'
+                />
+                <IconButton
+                  icon={IconShare}
+                  aria-label='share track'
+                  size='2xl'
+                  color='subdued'
+                />
+                <IconButton
+                  icon={IconKebabHorizontal}
+                  aria-label='more options'
+                  size='2xl'
+                  color='subdued'
+                />
+              </Flex>
+            </Flex>
+          </Flex>
+          <Divider />
+          <Flex direction='column' backgroundColor='surface1' p='xl' gap='l'>
+            <ServerUserGeneratedText>{description}</ServerUserGeneratedText>
+            <Flex gap='l'>
+              <Metadata attribute='genre' value={genre} />
+              {mood ? <Metadata attribute='mood' value={mood} /> : null}
+            </Flex>
+            <Text variant='body' size='s' strength='strong'>
+              {release_date ? `Released ${formatDate(release_date)}, ` : null}
+              {duration ? formatSecondsAsText(duration) : null}
+            </Text>
+            {field_visibility?.tags && tags ? (
+              <Flex gap='s'>
+                {tags
+                  .split(',')
+                  .filter((t) => t)
+                  .map((tag) => (
+                    <Link key={tag} to={searchResultsPage(`#${tag}`)}>
+                      <Tag>{tag}</Tag>
+                    </Link>
+                  ))}
+              </Flex>
+            ) : null}
+          </Flex>
+        </Paper>
+      </Box>
+      <Box />
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/track-page/MobileServerTrackPage.tsx b/packages/web/src/pages/track-page/MobileServerTrackPage.tsx
new file mode 100644
index 00000000000..ac0063c7469
--- /dev/null
+++ b/packages/web/src/pages/track-page/MobileServerTrackPage.tsx
@@ -0,0 +1,147 @@
+import { ID } from '@audius/common/src/models/Identifiers'
+import { getTrack } from '@audius/common/src/store/cache/tracks/selectors'
+import { getUser } from '@audius/common/src/store/cache/users/selectors'
+import { formatCount } from '@audius/common/src/utils/formatUtil'
+import {
+  formatDate,
+  formatSecondsAsText
+} from '@audius/common/src/utils/timeUtil'
+import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
+import IconKebabHorizontal from '@audius/harmony/src/assets/icons/KebabHorizontal.svg'
+import IconPlay from '@audius/harmony/src/assets/icons/Play.svg'
+import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
+import IconShare from '@audius/harmony/src/assets/icons/Share.svg'
+import { Artwork } from '@audius/harmony/src/components/artwork/Artwork'
+import { Button } from '@audius/harmony/src/components/button/Button/Button'
+import { IconButton } from '@audius/harmony/src/components/button/IconButton/IconButton'
+import { PlainButton } from '@audius/harmony/src/components/button/PlainButton/PlainButton'
+import { IconComponent } from '@audius/harmony/src/components/icon'
+import { Divider } from '@audius/harmony/src/components/layout/Divider'
+import { Flex } from '@audius/harmony/src/components/layout/Flex'
+import { Paper } from '@audius/harmony/src/components/layout/Paper'
+import { Tag } from '@audius/harmony/src/components/tag'
+import { Text } from '@audius/harmony/src/components/text'
+import { TextLink } from '@audius/harmony/src/components/text-link'
+import { Link } from 'react-router-dom'
+
+import { ServerUserGeneratedText } from 'components/user-generated-text/ServerUserGeneratedText'
+import { useSelector } from 'utils/reducer'
+import { profilePage, searchResultsPage } from 'utils/route'
+
+import { Metadata } from './components/Metadata'
+
+type ServerTrackPageProps = {
+  trackId: ID
+}
+
+export const MobileServerTrackPage = (props: ServerTrackPageProps) => {
+  const { trackId } = props
+
+  const track = useSelector((state) => getTrack(state, { id: trackId }))
+  const user = useSelector((state) => getUser(state, { id: track?.owner_id }))
+  if (!track || !user) return null
+
+  const {
+    title,
+    repost_count,
+    save_count,
+    play_count,
+    description,
+    genre,
+    mood,
+    release_date,
+    duration,
+    tags,
+    field_visibility,
+    cover_art
+  } = track
+  const { handle, name } = user
+
+  return (
+    <Flex direction='column' backgroundColor='default' p='l'>
+      <Paper direction='column'>
+        <Flex direction='column' p='l' gap='l' w='100%' alignItems='center'>
+          <Text variant='label' color='subdued'>
+            Track
+          </Text>
+          <Artwork src={cover_art!} isLoading={false} h={224} w={224} />
+          <Flex direction='column' gap='s'>
+            <Text variant='heading' size='s'>
+              {title}
+            </Text>
+            <TextLink
+              href={profilePage(handle)}
+              variant='visible'
+              size='l'
+              css={{ alignSelf: 'center' }}
+            >
+              {name}
+            </TextLink>
+          </Flex>
+          <Button iconLeft={IconPlay} fullWidth>
+            Play
+          </Button>
+          <Flex gap='xl'>
+            <IconButton
+              icon={IconRepost}
+              aria-label='repost track'
+              size='2xl'
+              color='subdued'
+            />
+            <IconButton
+              icon={IconHeart as IconComponent}
+              aria-label='favorite track'
+              size='2xl'
+              color='subdued'
+            />
+            <IconButton
+              icon={IconShare}
+              aria-label='share track'
+              size='2xl'
+              color='subdued'
+            />
+            <IconButton
+              icon={IconKebabHorizontal}
+              aria-label='more options'
+              size='2xl'
+              color='subdued'
+            />
+          </Flex>
+        </Flex>
+        <Divider />
+        <Flex direction='column' backgroundColor='surface1' p='l' gap='l'>
+          <Flex gap='xl'>
+            <PlainButton iconLeft={IconRepost} css={{ padding: 0 }}>
+              {formatCount(repost_count)} Reposts
+            </PlainButton>
+            <PlainButton iconLeft={IconHeart} css={{ padding: 0 }}>
+              {formatCount(save_count)} Favorites
+            </PlainButton>
+          </Flex>
+          <ServerUserGeneratedText>{description}</ServerUserGeneratedText>
+          <Flex gap='l'>
+            <Metadata attribute='genre' value={genre} />
+            {mood ? <Metadata attribute='mood' value={mood} /> : null}
+          </Flex>
+          <Text variant='body' size='s' strength='strong'>
+            {release_date ? `Released ${formatDate(release_date)}, ` : null}
+            {duration ? `${formatSecondsAsText(duration)}, ` : null}
+            {formatCount(play_count)} Plays
+          </Text>
+          {field_visibility?.tags && tags ? (
+            <Flex gap='s'>
+              {tags
+                .split(',')
+                .filter((t) => t)
+                .map((tag) => (
+                  <Link key={tag} to={searchResultsPage(`#${tag}`)}>
+                    <Tag>{tag}</Tag>
+                  </Link>
+                ))}
+            </Flex>
+          ) : null}
+        </Flex>
+      </Paper>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/track-page/ServerTrackPage.tsx b/packages/web/src/pages/track-page/ServerTrackPage.tsx
new file mode 100644
index 00000000000..fc8b70ea58f
--- /dev/null
+++ b/packages/web/src/pages/track-page/ServerTrackPage.tsx
@@ -0,0 +1,18 @@
+import { ID } from '@audius/common/src/models/Identifiers'
+
+import { DesktopServerTrackPage } from './DesktopServerTrackPage'
+import { MobileServerTrackPage } from './MobileServerTrackPage'
+
+type ServerTrackPageProps = {
+  trackId: ID
+  isMobile: boolean
+}
+
+export const ServerTrackPage = (props: ServerTrackPageProps) => {
+  const { trackId, isMobile } = props
+  return isMobile ? (
+    <MobileServerTrackPage trackId={trackId} />
+  ) : (
+    <DesktopServerTrackPage trackId={trackId} />
+  )
+}
diff --git a/packages/web/src/pages/track-page/components/Metadata.tsx b/packages/web/src/pages/track-page/components/Metadata.tsx
new file mode 100644
index 00000000000..8388c29f7f0
--- /dev/null
+++ b/packages/web/src/pages/track-page/components/Metadata.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+
+import { Text } from '@audius/harmony/src/components/text'
+
+type MetadataProps = {
+  attribute: string
+  value: ReactNode
+}
+export const Metadata = (props: MetadataProps) => {
+  const { attribute, value } = props
+  return (
+    <Text>
+      <Text variant='label' color='subdued' strength='default'>
+        {attribute}
+      </Text>{' '}
+      <Text variant='body' strength='strong' css={{ lineHeight: '16px' }}>
+        {value}
+      </Text>
+    </Text>
+  )
+}
diff --git a/packages/web/src/services/env/index.ts b/packages/web/src/services/env/index.ts
index f1683e6d9f5..a0c77b4b644 100644
--- a/packages/web/src/services/env/index.ts
+++ b/packages/web/src/services/env/index.ts
@@ -1,4 +1,4 @@
-import { Environment, Env } from '@audius/common/services'
+import type { Environment, Env } from '@audius/common/services'
 
 import { env as envDev } from './env.dev'
 import { env as envProd } from './env.prod'
diff --git a/packages/web/src/ssr/SsrContext.tsx b/packages/web/src/ssr/SsrContext.tsx
index 5d38e11fab4..7b6ad97859c 100644
--- a/packages/web/src/ssr/SsrContext.tsx
+++ b/packages/web/src/ssr/SsrContext.tsx
@@ -1,7 +1,7 @@
-import { createContext, memo, useContext } from 'react'
+import { createContext, useContext } from 'react'
 
-import { SsrPageProps } from '@audius/common/models'
-import { Nullable } from '@audius/common/utils'
+import type { SsrPageProps } from '@audius/common/models'
+import type { Nullable } from '@audius/common/utils'
 import { History } from 'history'
 
 import { isMobile as isMobileClient } from 'utils/clientUtil'
@@ -24,12 +24,12 @@ export type SsrContextType = {
    * The page props for the current request. This is available on both the server and the client.
    * For example, this can contain track data for rendering the track page
    */
-  pageProps: SsrPageProps
+  pageProps?: SsrPageProps
   /**
    * The history object for the current request. This is only available on the server.
    * Use useHistoryContext to access the history object on the client.
    */
-  history: Nullable<History>
+  history?: Nullable<History>
 }
 
 export const useSsrContext = () => {
@@ -47,16 +47,18 @@ export const SsrContext = createContext<SsrContextType>({
   history: null
 })
 
-export const SsrContextProvider = memo(
-  (props: { value: SsrContextType; children: JSX.Element }) => {
-    const isMobile = props.value.isServerSide
-      ? props.value.isMobile
-      : isMobileClient()
-
-    return (
-      <SsrContext.Provider value={{ ...props.value, isMobile }}>
-        {props.children}
-      </SsrContext.Provider>
-    )
-  }
-)
+type SsrContextProviderProps = {
+  value: SsrContextType
+  children: JSX.Element
+}
+
+export const SsrContextProvider = (props: SsrContextProviderProps) => {
+  const { value, children } = props
+  const isMobile = value.isServerSide ? value.isMobile : isMobileClient()
+
+  return (
+    <SsrContext.Provider value={{ ...value, isMobile }}>
+      {children}
+    </SsrContext.Provider>
+  )
+}
diff --git a/packages/web/src/ssr/collection/+onBeforeRender.ts b/packages/web/src/ssr/collection/+onBeforeRender.ts
index 58fd2a186b0..bf0276ac25d 100644
--- a/packages/web/src/ssr/collection/+onBeforeRender.ts
+++ b/packages/web/src/ssr/collection/+onBeforeRender.ts
@@ -1,29 +1,69 @@
-import { Maybe } from '@audius/common/utils'
-import type { full as FullSdk } from '@audius/sdk'
+import { APITrack } from '@audius/common/src/services'
+import {
+  makePlaylist,
+  makeTrack,
+  makeUser
+} from '@audius/common/src/services/audius-api-client/ResponseAdapter'
+import { developmentConfig } from '@audius/sdk/src/sdk/config/development'
+import { productionConfig } from '@audius/sdk/src/sdk/config/production'
+import { stagingConfig } from '@audius/sdk/src/sdk/config/staging'
 import type { PageContextServer } from 'vike/types'
 
-import { audiusSdk } from '../sdk'
-
-export type CollectionPageProps = {
-  collection: Maybe<FullSdk.PlaylistFull>
+const sdkConfigs = {
+  production: productionConfig,
+  staging: stagingConfig,
+  development: developmentConfig
 }
 
+export type CollectionPageProps = {}
+
 export async function onBeforeRender(pageContext: PageContextServer) {
   const { handle, slug } = pageContext.routeParams
 
-  try {
-    // NOTE: This is the playlist api, but works for both albums and playlists
-    const { data: collections } =
-      await audiusSdk.full.playlists.getPlaylistByHandleAndSlug({
-        handle,
-        slug
-      })
-    const collection = collections?.[0]
+  // Fetching directly from discovery node rather than using the sdk because
+  // including the sdk increases bundle size and creates substantial cold start times
+  const discoveryNodes = (
+    sdkConfigs[process.env.VITE_ENVIRONMENT as keyof typeof sdkConfigs] ??
+    productionConfig
+  ).network.discoveryNodes
+
+  const discoveryNode =
+    discoveryNodes[Math.floor(Math.random() * discoveryNodes.length)]
+
+  const discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${slug}`
+  const discoveryRequestUrl = `${discoveryNode.endpoint}/${discoveryRequestPath}`
+
+  const res = await fetch(discoveryRequestUrl)
+  if (res.status !== 200) {
+    throw new Error(discoveryRequestUrl)
+  }
 
+  const { data } = await res.json()
+  const [apiCollection] = data
+  const collection = {
+    ...makePlaylist(apiCollection),
+    cover_art: apiCollection.artwork['1000x1000']
+  }
+
+  const { user: apiUser } = apiCollection
+  const user = {
+    ...makeUser(apiUser),
+    cover_photo: apiUser.cover_photo['2000x'],
+    profile_picture: apiUser.profile_picture['1000x1000']
+  }
+
+  const tracks = apiCollection.tracks.map((apiTrack: APITrack) => ({
+    ...makeTrack(apiTrack),
+    cover_art: apiTrack.artwork['150x150']
+  }))
+
+  try {
     return {
       pageContext: {
         pageProps: {
-          collection
+          collection,
+          user,
+          tracks
         }
       }
     }
diff --git a/packages/web/src/ssr/collection/+onRenderHtml.tsx b/packages/web/src/ssr/collection/+onRenderHtml.tsx
new file mode 100644
index 00000000000..1f11ebd4790
--- /dev/null
+++ b/packages/web/src/ssr/collection/+onRenderHtml.tsx
@@ -0,0 +1,75 @@
+import type { Collection, Track, User } from '@audius/common/models'
+import createEmotionServer from '@emotion/server/create-instance'
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import { escapeInject, dangerouslySkipEscape } from 'vike/server'
+import type { PageContextServer } from 'vike/types'
+
+import { ServerWebPlayer } from 'app/web-player/ServerWebPlayer'
+import { ServerCollectionPage } from 'pages/collection-page/ServerCollectionPage'
+import { isMobileUserAgent } from 'utils/clientUtil'
+
+import { harmonyCache } from '../../HarmonyCacheProvider'
+import { getIndexHtml } from '../getIndexHtml'
+
+const { extractCriticalToChunks, constructStyleTagsFromChunks } =
+  createEmotionServer(harmonyCache)
+
+type TrackPageContext = PageContextServer & {
+  pageProps: {
+    collection: Collection
+    user: User
+    tracks: Track[]
+  }
+  userAgent: string
+}
+
+export default function render(pageContext: TrackPageContext) {
+  const { pageProps, userAgent } = pageContext
+  const { collection, user, tracks } = pageProps
+  const { playlist_id } = collection
+  const { user_id } = user
+
+  const isMobile = isMobileUserAgent(userAgent)
+
+  const pageHtml = renderToString(
+    <ServerWebPlayer
+      isMobile={isMobile}
+      initialState={{
+        collections: { entries: { [playlist_id]: { metadata: collection } } },
+        users: { entries: { [user_id]: { metadata: user } } },
+        tracks: {
+          entries: tracks.reduce((acc, track) => {
+            const { track_id } = track
+            return { ...acc, [track_id]: { metadata: track } }
+          }, {})
+        }
+      }}
+    >
+      <ServerCollectionPage collectionId={playlist_id} isMobile={isMobile} />
+    </ServerWebPlayer>
+  )
+
+  const helmet = Helmet.renderStatic()
+  const chunks = extractCriticalToChunks(pageHtml)
+  const styles = constructStyleTagsFromChunks(chunks)
+
+  const html = getIndexHtml()
+    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
+    .replace(
+      `<meta property="helmet" />`,
+      `
+      ${helmet.title.toString()}
+      ${helmet.meta.toString()}
+      ${helmet.link.toString()}
+      `
+    )
+    .replace(
+      `<style id="emotion"></style>`,
+      `
+      ${styles}
+      `
+    )
+
+  return escapeInject`${dangerouslySkipEscape(html)}`
+}
diff --git a/packages/web/src/ssr/profile/+onBeforeRender.tsx b/packages/web/src/ssr/profile/+onBeforeRender.tsx
index 724c20760aa..11e6a2fa7a4 100644
--- a/packages/web/src/ssr/profile/+onBeforeRender.tsx
+++ b/packages/web/src/ssr/profile/+onBeforeRender.tsx
@@ -1,28 +1,13 @@
-import { Maybe } from '@audius/common/utils'
-import { full as FullSdk } from '@audius/sdk'
 import type { PageContextServer } from 'vike/types'
 
-import { audiusSdk } from '../sdk'
-
-export type ProfilePageProps = {
-  user: Maybe<FullSdk.UserFull>
-}
+export type ProfilePageProps = {}
 
 export async function onBeforeRender(pageContext: PageContextServer) {
   const { handle } = pageContext.routeParams
 
   try {
-    const { data: users } = await audiusSdk.full.users.getUserByHandle({
-      handle
-    })
-    const user = users?.[0]
-
-    const pageProps = { user }
-
     return {
-      pageContext: {
-        pageProps
-      }
+      pageContext: {}
     }
   } catch (e) {
     console.error(
diff --git a/packages/web/src/ssr/track/+onBeforeRender.tsx b/packages/web/src/ssr/track/+onBeforeRender.tsx
index de4cf4a6247..ddd5750faf1 100644
--- a/packages/web/src/ssr/track/+onBeforeRender.tsx
+++ b/packages/web/src/ssr/track/+onBeforeRender.tsx
@@ -1,3 +1,7 @@
+import {
+  makeTrack,
+  makeUser
+} from '@audius/common/src/services/audius-api-client/ResponseAdapter'
 import { developmentConfig } from '@audius/sdk/src/sdk/config/development'
 import { productionConfig } from '@audius/sdk/src/sdk/config/production'
 import { stagingConfig } from '@audius/sdk/src/sdk/config/staging'
@@ -31,11 +35,25 @@ export async function onBeforeRender(pageContext: PageContextServer) {
       throw new Error(discoveryRequestUrl)
     }
 
-    const json = await res.json()
+    const { data } = await res.json()
+    const [apiTrack] = data
+    // Include artwork in the track object
+    const track = {
+      ...makeTrack(apiTrack),
+      cover_art: apiTrack.artwork['1000x1000']
+    }
+
+    const { user: apiUser } = apiTrack
+    // Include api user images.
+    const user = {
+      ...makeUser(apiUser),
+      cover_photo: apiUser.cover_photo['2000x'],
+      profile_picture: apiUser.profile_picture['1000x1000']
+    }
 
     return {
       pageContext: {
-        pageProps: { track: json.data[0] }
+        pageProps: { track, user }
       }
     }
   } catch (e) {
diff --git a/packages/web/src/ssr/+onRenderHtml.tsx b/packages/web/src/ssr/track/+onRenderHtml.tsx
similarity index 52%
rename from packages/web/src/ssr/+onRenderHtml.tsx
rename to packages/web/src/ssr/track/+onRenderHtml.tsx
index fb0a81a8261..34785a3e951 100644
--- a/packages/web/src/ssr/+onRenderHtml.tsx
+++ b/packages/web/src/ssr/track/+onRenderHtml.tsx
@@ -1,45 +1,46 @@
-import { SsrPageProps } from '@audius/common/models'
+import type { Track, User } from '@audius/common/models'
 import createEmotionServer from '@emotion/server/create-instance'
-import { createMemoryHistory } from 'history'
 import { renderToString } from 'react-dom/server'
 import { Helmet } from 'react-helmet'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import type { PageContextServer } from 'vike/types'
 
+import { ServerWebPlayer } from 'app/web-player/ServerWebPlayer'
+import { ServerTrackPage } from 'pages/track-page/ServerTrackPage'
 import { isMobileUserAgent } from 'utils/clientUtil'
 
-import { harmonyCache } from '../HarmonyCacheProvider'
-
-import RootWithProviders from './RootWithProviders'
-import { getIndexHtml } from './getIndexHtml'
+import { harmonyCache } from '../../HarmonyCacheProvider'
+import { getIndexHtml } from '../getIndexHtml'
 
 const { extractCriticalToChunks, constructStyleTagsFromChunks } =
   createEmotionServer(harmonyCache)
 
-export default function render(
-  pageContext: PageContextServer & {
-    pageProps: SsrPageProps
-    userAgent: string
+type TrackPageContext = PageContextServer & {
+  pageProps: {
+    track: Track
+    user: User
   }
-) {
-  const { pageProps, urlPathname } = pageContext
+  userAgent: string
+}
 
-  const isMobile = isMobileUserAgent(pageContext.userAgent)
+export default function render(pageContext: TrackPageContext) {
+  const { pageProps, userAgent } = pageContext
+  const { track, user } = pageProps
+  const { track_id } = track
+  const { user_id } = user
 
-  const history = createMemoryHistory({
-    initialEntries: [urlPathname]
-  })
+  const isMobile = isMobileUserAgent(userAgent)
 
   const pageHtml = renderToString(
-    <RootWithProviders
-      ssrContextValue={{
-        isServerSide: true,
-        isSsrEnabled: true,
-        pageProps,
-        history,
-        isMobile
+    <ServerWebPlayer
+      isMobile={isMobile}
+      initialState={{
+        tracks: { entries: { [track_id]: { metadata: track } } },
+        users: { entries: { [user_id]: { metadata: user } } }
       }}
-    />
+    >
+      <ServerTrackPage trackId={track_id} isMobile={isMobile} />
+    </ServerWebPlayer>
   )
 
   const helmet = Helmet.renderStatic()
diff --git a/packages/web/src/ssr/track/onRenderHtml.tsx b/packages/web/src/ssr/track/onRenderHtml.tsx
deleted file mode 100644
index f74d36739f1..00000000000
--- a/packages/web/src/ssr/track/onRenderHtml.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { SsrPageProps } from '@audius/common/models'
-import createEmotionServer from '@emotion/server/create-instance'
-import { createMemoryHistory } from 'history'
-import { renderToString } from 'react-dom/server'
-import { Helmet } from 'react-helmet'
-import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import type { PageContextServer } from 'vike/types'
-
-import { ServerWebPlayer } from 'app/web-player/ServerWebPlayer'
-import { ServerTrackPage } from 'pages/server-track-page/ServerTrackPage'
-import { isMobileUserAgent } from 'utils/clientUtil'
-import { getTrackPageSEOFields } from 'utils/seo'
-
-import { harmonyCache } from '../../HarmonyCacheProvider'
-import { getIndexHtml } from '../getIndexHtml'
-
-const { extractCriticalToChunks, constructStyleTagsFromChunks } =
-  createEmotionServer(harmonyCache)
-
-export default function render(
-  pageContext: PageContextServer & {
-    pageProps: SsrPageProps
-    userAgent: string
-  }
-) {
-  const { pageProps, urlPathname } = pageContext
-  const { track } = pageProps
-
-  const isMobile = isMobileUserAgent(pageContext.userAgent)
-
-  const history = createMemoryHistory({
-    initialEntries: [urlPathname]
-  })
-
-  const {
-    title = '',
-    description = '',
-    canonicalUrl = '',
-    structuredData
-  } = getTrackPageSEOFields({
-    title: track.title,
-    userName: track.user.name,
-    permalink: track.permalink,
-    releaseDate: track.release_date ?? track.created_at ?? ''
-  })
-
-  const pageHtml = renderToString(
-    <ServerWebPlayer
-      ssrContextValue={{
-        isServerSide: true,
-        isSsrEnabled: true,
-        pageProps,
-        history,
-        isMobile
-      }}
-    >
-      <ServerTrackPage
-        isMobile={isMobile}
-        // @ts-ignore
-        title={title}
-        description={description}
-        canonicalUrl={canonicalUrl}
-        structuredData={structuredData}
-        heroTrack={track}
-        user={track.user}
-        userId={track.user.id}
-        hasValidRemixParent={false}
-        heroPlaying={false}
-        previewing={false}
-        badge={null}
-      />
-    </ServerWebPlayer>
-  )
-
-  const helmet = Helmet.renderStatic()
-  const chunks = extractCriticalToChunks(pageHtml)
-  const styles = constructStyleTagsFromChunks(chunks)
-
-  const html = getIndexHtml()
-    .replace(`<div id="root"></div>`, `<div id="root">${pageHtml}</div>`)
-    .replace(
-      `<meta property="helmet" />`,
-      `
-      ${helmet.title.toString()}
-      ${helmet.meta.toString()}
-      ${helmet.link.toString()}
-      `
-    )
-    .replace(
-      `<style id="emotion"></style>`,
-      `
-      ${styles}
-      `
-    )
-
-  return escapeInject`${dangerouslySkipEscape(html)}`
-}
diff --git a/packages/web/src/store/configureServerStore.ts b/packages/web/src/store/configureServerStore.ts
deleted file mode 100644
index fc39c4ae6ac..00000000000
--- a/packages/web/src/store/configureServerStore.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Name, SsrPageProps } from '@audius/common/models'
-import { composeWithDevToolsLogOnlyInProduction } from '@redux-devtools/extension'
-import { configureScope, addBreadcrumb } from '@sentry/browser'
-import { routerMiddleware } from 'connected-react-router'
-import { History } from 'history'
-import { createStore, applyMiddleware, Action, Store } from 'redux'
-import createSagaMiddleware from 'redux-saga'
-import createSentryMiddleware from 'redux-sentry-middleware'
-import thunk from 'redux-thunk'
-import { PartialDeep } from 'type-fest'
-
-import { track as amplitudeTrack } from 'services/analytics/amplitude'
-import * as errorActions from 'store/errors/actions'
-import createRootReducer from 'store/serverReducers'
-
-// import { buildStoreContext } from './storeContext'
-import { AppState } from './types'
-
-declare global {
-  interface Window {
-    // @ts-ignore
-    store: Store<RootState>
-  }
-}
-
-export type StoreType = ReturnType<typeof configureStore>
-type RootState = ReturnType<StoreType['getState']>
-
-// Can't send up the entire Redux state b/c it's too fat
-// for Sentry to handle, and there is sensitive data
-const statePruner = (state: AppState) => {
-  const currentProfileHandle = state.pages.profile.currentUser ?? ''
-  const currentProfile = state.pages.profile.entries[currentProfileHandle] ?? {}
-
-  return {
-    account: {
-      status: state.account.status,
-      userId: state.account.userId,
-      reason: state.account.reason
-    },
-    pages: {
-      profile: {
-        handle: currentProfile.handle,
-        status: currentProfile.status,
-        updateError: currentProfile.updateError,
-        updateSuccess: currentProfile.updateSuccess,
-        updating: currentProfile.updating,
-        userId: currentProfile.userId
-      }
-    },
-    router: {
-      action: state.router.action,
-      location: state.router.location
-    },
-    signOn: {
-      accountReady: state.signOn.accountReady,
-      email: state.signOn.email,
-      handle: state.signOn.handle,
-      status: state.signOn.status,
-      twitterId: state.signOn.twitterId,
-      twitteRScreenName: state.signOn.twitterScreenName,
-      useMetaMask: state.signOn.useMetaMask,
-      verified: state.signOn.verified
-    },
-    upload: {
-      completionId: state.upload.completionId,
-      failedTrackIndices: state.upload.failedTrackIndices,
-      metadata: state.upload.metadata,
-      success: state.upload.success,
-      tracks: (state.upload.tracks || []).map((t) => ({
-        metadata: t.metadata
-      })),
-      uploading: state.upload.uploading,
-      uploadProgress: state.upload.uploadProgress,
-      uploadType: state.upload.uploadType
-    }
-  }
-}
-
-// We're not logging any action bodies to prevent us from accidentally
-// logging sensitive information in the future if additional actions are added.
-// If we discover we want specific action bodies in the future for Sentry
-// debuggability, those should be whitelisted here.
-const actionSanitizer = (action: Action) => ({ type: action.type })
-const sentryMiddleware = createSentryMiddleware(
-  { configureScope, addBreadcrumb } as any,
-  {
-    actionTransformer: actionSanitizer,
-    stateTransformer: statePruner
-  }
-)
-
-export const configureStore = (
-  history: History,
-  isMobile: boolean,
-  ssrPageProps?: SsrPageProps,
-  isServerSide?: boolean,
-  initialStoreState?: PartialDeep<AppState>
-) => {
-  const onSagaError = (
-    error: Error,
-    errorInfo: {
-      sagaStack: string
-    }
-  ) => {
-    console.error(
-      `Caught saga error: ${error} ${JSON.stringify(errorInfo, null, 4)}`
-    )
-    store.dispatch(
-      errorActions.handleError({
-        name: 'Caught Saga Error',
-        message: error.message,
-        shouldRedirect: true
-      })
-    )
-    const additionalInfo = {
-      ...errorInfo,
-      route: window.location.pathname
-    }
-
-    amplitudeTrack(Name.ERROR_PAGE, additionalInfo)
-  }
-
-  const sagaMiddleware = createSagaMiddleware({
-    onError: onSagaError
-    // context: buildStoreContext({ isMobile })
-  })
-
-  const middlewares = applyMiddleware(
-    routerMiddleware(history),
-    // Don't run sagas serverside
-    ...(typeof window !== 'undefined' ? [sagaMiddleware] : []),
-    sentryMiddleware,
-    thunk
-  )
-
-  const composeEnhancers = composeWithDevToolsLogOnlyInProduction({
-    trace: true,
-    traceLimit: 25,
-    maxAge: 1000
-  })
-
-  const store = createStore(
-    createRootReducer(history, ssrPageProps, isServerSide),
-    // @ts-ignore - Initial state is just for test mocking purposes
-    initialStoreState,
-    composeEnhancers(middlewares)
-  )
-
-  return store
-}
diff --git a/packages/web/src/store/serverReducers.ts b/packages/web/src/store/serverReducers.ts
deleted file mode 100644
index 3bee6fc2476..00000000000
--- a/packages/web/src/store/serverReducers.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { SsrPageProps } from '@audius/common/models'
-import { serverReducers } from '@audius/common/serverStore'
-import { connectRouter } from 'connected-react-router'
-import { History } from 'history'
-import localForage from 'localforage'
-import { combineReducers } from 'redux'
-
-import error from 'store/errors/reducers'
-
-const createRootReducer = (
-  routeHistory: History,
-  ssrPageProps?: SsrPageProps,
-  isServerSide?: boolean
-) => {
-  const commonStoreReducers = serverReducers(
-    localForage,
-    ssrPageProps,
-    isServerSide,
-    routeHistory
-  )
-
-  return combineReducers({
-    // Common store
-    ...commonStoreReducers,
-    // (End common store)
-
-    // Router
-    router: connectRouter(routeHistory),
-
-    // Error Page
-    error: error(ssrPageProps)
-  })
-}
-
-export default createRootReducer
diff --git a/packages/web/src/utils/clientUtil.ts b/packages/web/src/utils/clientUtil.ts
index 7aee1673334..a99531311b5 100644
--- a/packages/web/src/utils/clientUtil.ts
+++ b/packages/web/src/utils/clientUtil.ts
@@ -1,4 +1,7 @@
-import { Client, OS, MobileOS } from '@audius/common/models'
+// @ts-ignore -- Can't get mobile types to be happy
+import { Client } from '@audius/common/src/models/Client'
+// @ts-ignore -- Can't get mobile types to be happy
+import { OS, MobileOS } from '@audius/common/src/models/OS'
 
 declare global {
   interface Window {
diff --git a/packages/web/src/utils/route.ts b/packages/web/src/utils/route.ts
index a118409b8a9..f579ca34e77 100644
--- a/packages/web/src/utils/route.ts
+++ b/packages/web/src/utils/route.ts
@@ -1,4 +1,4 @@
-import { ID } from '@audius/common/models'
+import type { ID } from '@audius/common/models'
 import { push as pushRoute } from 'connected-react-router'
 import { Location } from 'history'
 import { matchPath } from 'react-router'
diff --git a/packages/web/src/utils/theme/theme.ts b/packages/web/src/utils/theme/theme.ts
index ce844a2a902..79b79d2da70 100644
--- a/packages/web/src/utils/theme/theme.ts
+++ b/packages/web/src/utils/theme/theme.ts
@@ -21,7 +21,7 @@ export const shouldShowDark = (theme?: Theme | null) => {
 export const getTheme = (): Theme | null => {
   const theme =
     typeof window !== 'undefined'
-      ? window.localStorage.getItem(THEME_KEY)
+      ? window.localStorage.getItem(THEME_KEY) || Theme.DEFAULT
       : null
   if (theme && Object.values(Theme).includes(theme as Theme)) {
     return theme as Theme
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
index 3841e896a64..5213543f600 100644
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -24,7 +24,20 @@
     "types": ["vite/client"],
     "paths": {
       // "@audius/test": ["./test/test-utils.tsx"],
-      "@audius/common/*": ["../../common/src/*"],
+      "@audius/common/adapters": ["../../common/src/adapters/index.ts"],
+      "@audius/common/api": ["../../common/src/api/index.ts"],
+      "@audius/common/assets": ["../../common/src/assets/index.ts"],
+      "@audius/common/audius-query": ["../../common/src/audius-query/index.ts"],
+      "@audius/common/context": ["../../common/src/context/index.ts"],
+      "@audius/common/hooks": ["../../common/src/hooks/index.ts"],
+      "@audius/common/messages": ["../../common/src/messages/index.ts"],
+      "@audius/common/models": ["../../common/src/models/index.ts"],
+      "@audius/common/schemas": ["../../common/src/schemas/index.ts"],
+      "@audius/common/services": ["../../common/src/services/index.ts"],
+      "@audius/common/store": ["../../common/src/store/index.ts"],
+      "@audius/common/serverStore": ["../../common/src/serverStore/index.ts"],
+      "@audius/common/utils": ["../../common/src/utils/index.ts"],
+      "@audius/common/src/*": ["../../common/src/*"],
       "~/*": ["../../common/src/*"],
     }
   },
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index 2eb72f60ece..182aab32a77 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -159,7 +159,7 @@ export default defineConfig(async ({ mode }) => {
         ssr: '/src/ssr',
         '~': path.resolve(__dirname, '../../packages/common/src'),
         test: '/src/test',
-
+        '@audius/common/src': path.resolve(__dirname, '../common/src'),
         os: require.resolve('os-browserify'),
         path: require.resolve('path-browserify'),
         url: require.resolve('url'),