diff --git a/apps/studio/src/components/home/LogoutButton.tsx b/apps/studio/src/components/home/LogoutButton.tsx
index 152e329d1..d8e369f1f 100644
--- a/apps/studio/src/components/home/LogoutButton.tsx
+++ b/apps/studio/src/components/home/LogoutButton.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from "react";
-import { Button, Typography } from "@newm-web/elements";
+import { Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { logOut, selectSession } from "../../modules/session";
 import { useAppDispatch, useAppSelector } from "../../common";
diff --git a/apps/studio/src/components/invites/InvitesModal.tsx b/apps/studio/src/components/invites/InvitesModal.tsx
index dffa0487b..65f25675a 100644
--- a/apps/studio/src/components/invites/InvitesModal.tsx
+++ b/apps/studio/src/components/invites/InvitesModal.tsx
@@ -6,8 +6,9 @@ import {
   DialogContentText,
   DialogTitle,
   Stack,
+  Typography,
 } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Button } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 import InvitesTable from "./InvitesTable";
 import {
diff --git a/apps/studio/src/components/library/IconStatus.tsx b/apps/studio/src/components/library/IconStatus.tsx
index e35854a03..b8a8701e5 100644
--- a/apps/studio/src/components/library/IconStatus.tsx
+++ b/apps/studio/src/components/library/IconStatus.tsx
@@ -1,6 +1,5 @@
 import { FunctionComponent } from "react";
-import { Stack, Theme } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { Stack, Theme, Typography } from "@mui/material";
 import theme from "@newm-web/theme";
 
 export interface IconStatusProps {
@@ -31,7 +30,7 @@ const IconStatus: FunctionComponent<IconStatusProps> = ({
   >
     { icon }
 
-    <Typography color={ fontColor } fontWeight={ 400 }>
+    <Typography color={ theme.colors[fontColor] } fontWeight={ 400 }>
       { status }
     </Typography>
   </Stack>
diff --git a/apps/studio/src/components/minting/ConfirmContract.tsx b/apps/studio/src/components/minting/ConfirmContract.tsx
index 01391177b..26293aa29 100644
--- a/apps/studio/src/components/minting/ConfirmContract.tsx
+++ b/apps/studio/src/components/minting/ConfirmContract.tsx
@@ -1,8 +1,9 @@
-import { Box, Stack } from "@mui/material";
-import { CheckboxField, HorizontalLine, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography } from "@mui/material";
+import { CheckboxField, HorizontalLine } from "@newm-web/elements";
 import { Formik, FormikProps } from "formik";
 import { FunctionComponent, useEffect } from "react";
 import { artistAgreementPreview } from "@newm-web/assets";
+import theme from "@newm-web/theme";
 import { selectSong } from "../../modules/song";
 import { useAppSelector } from "../../common";
 import ViewPDF from "../ViewPDF";
@@ -82,7 +83,7 @@ const FormContent: FunctionComponent<FormContentProps> = ({
   return (
     <Box>
       <Stack direction="column" spacing={ 1 }>
-        <Typography color="grey100" fontWeight={ 500 }>
+        <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
           View your contract here
         </Typography>
 
@@ -98,13 +99,21 @@ const FormContent: FunctionComponent<FormContentProps> = ({
         <CheckboxField
           label={
             isCoCreator ? (
-              <Typography color="white" fontSize={ 12 } variant="subtitle1">
+              <Typography
+                color={ theme.colors.white }
+                fontSize={ 12 }
+                variant="subtitle1"
+              >
                 I confirm that I am the primary creator of{ " " }
                 <strong>{ songTitle }</strong> and all mentioned collaborators are
                 accurate.
               </Typography>
             ) : (
-              <Typography color="white" fontSize={ 12 } variant="subtitle1">
+              <Typography
+                color={ theme.colors.white }
+                fontSize={ 12 }
+                variant="subtitle1"
+              >
                 I confirm that I am the exclusive creator of{ " " }
                 <strong>{ songTitle }.</strong>
               </Typography>
@@ -130,10 +139,18 @@ const FormContent: FunctionComponent<FormContentProps> = ({
           name="agreesToContract"
         />
 
-        <Typography color="white" fontSize={ 12 } variant="subtitle1">
+        <Typography
+          color={ theme.colors.white }
+          fontSize={ 12 }
+          variant="subtitle1"
+        >
           <CheckboxField
             label={
-              <Typography color="white" fontSize={ 12 } variant="subtitle1">
+              <Typography
+                color={ theme.colors.white }
+                fontSize={ 12 }
+                variant="subtitle1"
+              >
                 By selecting &lsquo;Distribute & Mint&rsquo; you agree to
                 distribute this song to all current and future available stores
                 including digital downloads.
@@ -145,7 +162,11 @@ const FormContent: FunctionComponent<FormContentProps> = ({
 
         <HorizontalLine style={ { marginTop: "24px" } } />
 
-        <Typography color="white" fontSize={ 12 } variant="subtitle1">
+        <Typography
+          color={ theme.colors.white }
+          fontSize={ 12 }
+          variant="subtitle1"
+        >
           The distribution and minting process may take 3-15 days to complete.
         </Typography>
       </Stack>
diff --git a/apps/studio/src/components/minting/Creditors.tsx b/apps/studio/src/components/minting/Creditors.tsx
index 090705123..01b9bb5da 100644
--- a/apps/studio/src/components/minting/Creditors.tsx
+++ b/apps/studio/src/components/minting/Creditors.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, Stack, useTheme } from "@mui/material";
-import { Button, DropdownSelectField, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Button, DropdownSelectField } from "@newm-web/elements";
 import Details from "./Details";
 import {
   Creditor,
@@ -44,10 +44,10 @@ const Creditors: FunctionComponent<CreditorsProps> = ({
   return (
     <Box>
       <Stack flexDirection="row" justifyContent="space-between" mb={ -0.5 }>
-        <Typography color="grey100" variant="h5">
+        <Typography color={ theme.colors.grey100 } variant="h5">
           CREDITS TO SHOW ON SONG DETAIL
         </Typography>
-        <Typography color="grey100" variant="h5">
+        <Typography color={ theme.colors.grey100 } variant="h5">
           ROLES
         </Typography>
       </Stack>
@@ -87,7 +87,7 @@ const Creditors: FunctionComponent<CreditorsProps> = ({
                   placeholder="Select role"
                 />
               ) : (
-                <Typography color="white" fontWeight={ 500 }>
+                <Typography color={ theme.colors.white } fontWeight={ 500 }>
                   { creditor.role }
                 </Typography>
               ) }
diff --git a/apps/studio/src/components/minting/Owners.tsx b/apps/studio/src/components/minting/Owners.tsx
index 090771a3c..fe8b68748 100644
--- a/apps/studio/src/components/minting/Owners.tsx
+++ b/apps/studio/src/components/minting/Owners.tsx
@@ -1,13 +1,14 @@
 import { FunctionComponent } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import HelpIcon from "@mui/icons-material/Help";
-import { Box, IconButton, InputAdornment, Stack } from "@mui/material";
 import {
-  Button,
-  TextInputField,
-  Tooltip,
+  Box,
+  IconButton,
+  InputAdornment,
+  Stack,
   Typography,
-} from "@newm-web/elements";
+} from "@mui/material";
+import { Button, TextInputField, Tooltip } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 import Details from "./Details";
 import { emptyProfile, useGetProfileQuery } from "../../modules/session";
@@ -53,7 +54,7 @@ const Owners: FunctionComponent<OwnersProps> = ({
     <Box>
       <Stack flexDirection="row" justifyContent="space-between">
         <Stack columnGap={ 1 } flexDirection="row" mt={ 1.5 }>
-          <Typography color="grey100" variant="h5">
+          <Typography color={ theme.colors.grey100 } variant="h5">
             ROYALTY SPLIT HOLDERS
           </Typography>
 
@@ -75,7 +76,7 @@ const Owners: FunctionComponent<OwnersProps> = ({
           </Tooltip>
         </Stack>
 
-        <Typography color="grey100" variant="h5">
+        <Typography color={ theme.colors.grey100 } variant="h5">
           SPLITS
         </Typography>
       </Stack>
diff --git a/apps/studio/src/components/minting/SelectCoCreators.tsx b/apps/studio/src/components/minting/SelectCoCreators.tsx
index c5ea35dc5..19920afe8 100644
--- a/apps/studio/src/components/minting/SelectCoCreators.tsx
+++ b/apps/studio/src/components/minting/SelectCoCreators.tsx
@@ -1,11 +1,6 @@
-import { IconButton, Stack } from "@mui/material";
+import { IconButton, Stack, Typography } from "@mui/material";
 import HelpIcon from "@mui/icons-material/Help";
-import {
-  Button,
-  HorizontalLine,
-  Tooltip,
-  Typography,
-} from "@newm-web/elements";
+import { Button, HorizontalLine, Tooltip } from "@newm-web/elements";
 import { Formik, FormikProps } from "formik";
 import { FunctionComponent, useEffect, useState } from "react";
 import theme from "@newm-web/theme";
@@ -140,7 +135,7 @@ const FormContent: FunctionComponent<FormContentProps> = ({
         <>
           <HorizontalLine sx={ { my: 5 } } />
 
-          <Typography color="grey100" mb={ -0.5 } variant="h5">
+          <Typography color={ theme.colors.grey100 } mb={ -0.5 } variant="h5">
             FEATURED ARTISTS
           </Typography>
 
diff --git a/apps/studio/src/pages/createProfile/Begin.tsx b/apps/studio/src/pages/createProfile/Begin.tsx
index 19d98819c..ecaadfe8a 100644
--- a/apps/studio/src/pages/createProfile/Begin.tsx
+++ b/apps/studio/src/pages/createProfile/Begin.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, useEffect } from "react";
-import { Box, useTheme } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import { GradientTypography, Typography } from "@newm-web/elements";
+import { GradientTypography } from "@newm-web/elements";
 import { ResponsiveNEWMLogo } from "../../components";
 
 const Begin: FunctionComponent = () => {
diff --git a/apps/studio/src/pages/createProfile/Complete.tsx b/apps/studio/src/pages/createProfile/Complete.tsx
index 3f845bbf9..e108b4df2 100644
--- a/apps/studio/src/pages/createProfile/Complete.tsx
+++ b/apps/studio/src/pages/createProfile/Complete.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box, Link, useTheme } from "@mui/material";
-import { Button, GradientTypography, Typography } from "@newm-web/elements";
+import { Box, Link, Typography, useTheme } from "@mui/material";
+import { Button, GradientTypography } from "@newm-web/elements";
 import { ResponsiveNEWMLogo } from "../../components";
 import {
   NEWM_PRIVACY_POLICY_URL,
@@ -46,7 +46,7 @@ const Complete: FunctionComponent = () => {
           Enter NEWM
         </Button>
 
-        <Typography color="grey200" variant="subtitle1">
+        <Typography color={ theme.colors.grey200 } variant="subtitle1">
           By clicking &apos;Enter NEWM&apos;, you agree to
           <br />
           NEWM&apos;s{ " " }
diff --git a/apps/studio/src/pages/forgotPassword/InitiateReset.tsx b/apps/studio/src/pages/forgotPassword/InitiateReset.tsx
index 7ec80dbd6..9e806be48 100644
--- a/apps/studio/src/pages/forgotPassword/InitiateReset.tsx
+++ b/apps/studio/src/pages/forgotPassword/InitiateReset.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Button, TextInputField, Typography } from "@newm-web/elements";
-import { Box, Stack, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Button, TextInputField } from "@newm-web/elements";
 
 const InitiateReset: FunctionComponent = () => {
   const theme = useTheme();
diff --git a/apps/studio/src/pages/forgotPassword/ResetPassword.tsx b/apps/studio/src/pages/forgotPassword/ResetPassword.tsx
index 0038a217b..0f388fcc2 100644
--- a/apps/studio/src/pages/forgotPassword/ResetPassword.tsx
+++ b/apps/studio/src/pages/forgotPassword/ResetPassword.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, useState } from "react";
 import { FormikValues, useFormikContext } from "formik";
-import { Box, Stack, useTheme } from "@mui/material";
-import { Button, PasswordInputField, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Button, PasswordInputField } from "@newm-web/elements";
 
 const ResetPassword: FunctionComponent = () => {
   const theme = useTheme();
diff --git a/apps/studio/src/pages/home/SideBar.tsx b/apps/studio/src/pages/home/SideBar.tsx
index f9fc1f739..baa5b1530 100644
--- a/apps/studio/src/pages/home/SideBar.tsx
+++ b/apps/studio/src/pages/home/SideBar.tsx
@@ -1,10 +1,17 @@
 import { FunctionComponent } from "react";
-import { Box, Drawer, IconButton, Link, Stack, useTheme } from "@mui/material";
+import {
+  Box,
+  Drawer,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import {
   ProfileImage,
   SideBarHeader,
   SideBarNavLink,
-  Typography,
 } from "@newm-web/elements";
 import { DiscordLogo, NEWMLogo } from "@newm-web/assets";
 import {
diff --git a/apps/studio/src/pages/home/library/Discography.tsx b/apps/studio/src/pages/home/library/Discography.tsx
index f5f810556..85f37a7e8 100644
--- a/apps/studio/src/pages/home/library/Discography.tsx
+++ b/apps/studio/src/pages/home/library/Discography.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from "react";
-import { Typography } from "@newm-web/elements";
+import { Typography } from "@mui/material";
 import SongList from "./SongList";
 import { SearchBox } from "../../../components";
 import { useGetSongCountQuery } from "../../../modules/song";
diff --git a/apps/studio/src/pages/home/library/MarketplaceTab/EndSaleModal.tsx b/apps/studio/src/pages/home/library/MarketplaceTab/EndSaleModal.tsx
index 8a278787e..48ef12bd7 100644
--- a/apps/studio/src/pages/home/library/MarketplaceTab/EndSaleModal.tsx
+++ b/apps/studio/src/pages/home/library/MarketplaceTab/EndSaleModal.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box, Stack } from "@mui/material";
-import { Button, Modal, Typography } from "@newm-web/elements";
+import { Box, Stack, Typography } from "@mui/material";
+import { Button, Modal } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 
 interface EndSaleModalProps {
diff --git a/apps/studio/src/pages/home/library/NoSongsYet.tsx b/apps/studio/src/pages/home/library/NoSongsYet.tsx
index 6ad9bd158..c6bc4bf88 100644
--- a/apps/studio/src/pages/home/library/NoSongsYet.tsx
+++ b/apps/studio/src/pages/home/library/NoSongsYet.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Stack, Table } from "@mui/material";
-import { Button, HorizontalLine, Typography } from "@newm-web/elements";
+import { Stack, Table, Typography } from "@mui/material";
+import { Button, HorizontalLine } from "@newm-web/elements";
 import { useNavigate } from "react-router-dom";
 import theme from "@newm-web/theme";
 import TableHead from "./Table/TableHead";
diff --git a/apps/studio/src/pages/home/library/SongInfo.tsx b/apps/studio/src/pages/home/library/SongInfo.tsx
index 6ff2aab1a..4242b0cb5 100644
--- a/apps/studio/src/pages/home/library/SongInfo.tsx
+++ b/apps/studio/src/pages/home/library/SongInfo.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useParams } from "react-router";
 import { useWindowDimensions } from "@newm-web/utils";
 import {
@@ -8,7 +8,6 @@ import {
   SwitchInputField,
   TextAreaField,
   TextInputField,
-  Typography,
   UploadImageField,
 } from "@newm-web/elements";
 import theme from "@newm-web/theme";
@@ -114,7 +113,7 @@ const SongInfo = () => {
                 spacing={ 0.5 }
                 width="100%"
               >
-                <Typography color="grey100" fontWeight={ 500 }>
+                <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
                   SONG
                 </Typography>
 
@@ -136,7 +135,7 @@ const SongInfo = () => {
                 spacing={ 0.5 }
                 width="100%"
               >
-                <Typography color="grey100" fontWeight={ 500 }>
+                <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
                   SONG COVER ART
                 </Typography>
 
diff --git a/apps/studio/src/pages/home/owners/NoOwnersYet.tsx b/apps/studio/src/pages/home/owners/NoOwnersYet.tsx
index 7d59ad63f..b0023a709 100644
--- a/apps/studio/src/pages/home/owners/NoOwnersYet.tsx
+++ b/apps/studio/src/pages/home/owners/NoOwnersYet.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Box, Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import { Owner } from "@newm-web/assets";
 import { useNavigate } from "react-router-dom";
 
diff --git a/apps/studio/src/pages/home/owners/OwnerModal.tsx b/apps/studio/src/pages/home/owners/OwnerModal.tsx
index 6a711c60f..8e65cbfcc 100644
--- a/apps/studio/src/pages/home/owners/OwnerModal.tsx
+++ b/apps/studio/src/pages/home/owners/OwnerModal.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
-import { DialogProps } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { DialogProps, Typography } from "@mui/material";
 import { ProfileModal, SocialsProps } from "@newm-web/components";
+import theme from "@newm-web/theme";
 
 interface OwnerModalProps extends Omit<DialogProps, "onClose"> {
   readonly biography?: string;
@@ -29,7 +29,7 @@ const OwnerModal: FunctionComponent<OwnerModalProps> = ({
       { role ? (
         <>
           <Typography variant="body1">MAIN ROLES</Typography>
-          <Typography color="white" mt={ 0.5 } variant="subtitle1">
+          <Typography color={ theme.colors.white } mt={ 0.5 } variant="subtitle1">
             { role }
           </Typography>
         </>
@@ -40,7 +40,7 @@ const OwnerModal: FunctionComponent<OwnerModalProps> = ({
           <Typography mt={ 2.5 } variant="body1">
             DESCRIPTION
           </Typography>
-          <Typography color="white" mt={ 0.5 } variant="subtitle1">
+          <Typography color={ theme.colors.white } mt={ 0.5 } variant="subtitle1">
             { biography }
           </Typography>
         </>
diff --git a/apps/studio/src/pages/home/owners/OwnersList.tsx b/apps/studio/src/pages/home/owners/OwnersList.tsx
index dcc922e97..00fc9b747 100644
--- a/apps/studio/src/pages/home/owners/OwnersList.tsx
+++ b/apps/studio/src/pages/home/owners/OwnersList.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent, useEffect, useState } from "react";
-import { Stack } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Stack, Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import OwnersTable from "./OwnersTable";
 import {
   CollaborationStatus,
diff --git a/apps/studio/src/pages/home/owners/Songs.tsx b/apps/studio/src/pages/home/owners/Songs.tsx
index c90969e2f..31b18e5cd 100644
--- a/apps/studio/src/pages/home/owners/Songs.tsx
+++ b/apps/studio/src/pages/home/owners/Songs.tsx
@@ -1,8 +1,7 @@
 import { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useInView } from "react-intersection-observer";
-import { Grid, Stack } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { Grid, Stack, Typography } from "@mui/material";
 import { SongCard } from "@newm-web/components";
 import { useHlsJs } from "@newm-web/utils";
 import { MintingStatus, PlayerState, Song, SortOrder } from "@newm-web/types";
diff --git a/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx b/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx
index d6b46acb3..0b7accf83 100644
--- a/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx
+++ b/apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx
@@ -1,4 +1,4 @@
-import { Box, Link, Stack, useTheme } from "@mui/material";
+import { Box, Link, Stack, Typography, useTheme } from "@mui/material";
 import {
   Alert,
   Button,
@@ -11,7 +11,6 @@ import {
   SwitchInputField,
   TextAreaField,
   TextInputField,
-  Typography,
   UploadImageField,
   UploadSongField,
 } from "@newm-web/elements";
@@ -209,11 +208,11 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
               }
               severity="warning"
             >
-              <Typography color="yellow" mb={ 0.5 }>
+              <Typography color={ theme.colors.yellow } mb={ 0.5 }>
                 Outlet Profile Information Missing
               </Typography>
               <Typography
-                color="yellow"
+                color={ theme.colors.yellow }
                 fontWeight={ 400 }
                 maxWidth="460px"
                 variant="subtitle1"
@@ -244,7 +243,7 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
           >
             { isInEditMode ? (
               <>
-                <Typography color="grey100" fontWeight={ 500 }>
+                <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
                   SONG
                 </Typography>
 
@@ -262,7 +261,7 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
               </>
             ) : (
               <>
-                <Typography color="grey100" fontWeight={ 500 }>
+                <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
                   SONG FILE
                 </Typography>
 
@@ -277,7 +276,7 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
             spacing={ 0.5 }
             width="100%"
           >
-            <Typography color="grey100" fontWeight={ 500 }>
+            <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
               SONG COVER ART
             </Typography>
 
@@ -452,10 +451,14 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
                 }
                 severity="warning"
               >
-                <Typography color="yellow" mb={ 0.5 }>
+                <Typography color={ theme.colors.yellow } mb={ 0.5 }>
                   Verify your profile
                 </Typography>
-                <Typography color="yellow" fontWeight={ 400 } variant="subtitle1">
+                <Typography
+                  color={ theme.colors.yellow }
+                  fontWeight={ 400 }
+                  variant="subtitle1"
+                >
                   Profile verification is required to mint. Please verify your
                   profile.
                 </Typography>
@@ -480,10 +483,14 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
                 severity="warning"
                 sx={ { py: 2.5 } }
               >
-                <Typography color="yellow" mb={ 0.5 }>
+                <Typography color={ theme.colors.yellow } mb={ 0.5 }>
                   Connect a wallet
                 </Typography>
-                <Typography color="yellow" fontWeight={ 400 } variant="subtitle1">
+                <Typography
+                  color={ theme.colors.yellow }
+                  fontWeight={ 400 }
+                  variant="subtitle1"
+                >
                   To continue, please connect a wallet.
                 </Typography>
               </Alert>
diff --git a/apps/studio/src/pages/home/uploadSong/ConfirmAgreement.tsx b/apps/studio/src/pages/home/uploadSong/ConfirmAgreement.tsx
index eaccf441b..4d997e041 100644
--- a/apps/studio/src/pages/home/uploadSong/ConfirmAgreement.tsx
+++ b/apps/studio/src/pages/home/uploadSong/ConfirmAgreement.tsx
@@ -1,8 +1,8 @@
+import { FunctionComponent, useEffect, useState } from "react";
 import { useFormikContext } from "formik";
-import { Box, useTheme } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import { useWindowDimensions } from "@newm-web/utils";
-import { Button, Typography } from "@newm-web/elements";
-import { FunctionComponent, useEffect, useState } from "react";
+import { Button } from "@newm-web/elements";
 import PriceSummaryDialog from "./PriceSummaryDialog";
 import { UploadSongThunkRequest } from "../../../modules/song";
 import { ConfirmContract } from "../../../components";
diff --git a/apps/studio/src/pages/home/uploadSong/UploadSong.tsx b/apps/studio/src/pages/home/uploadSong/UploadSong.tsx
index 333b54f73..00347e2a4 100644
--- a/apps/studio/src/pages/home/uploadSong/UploadSong.tsx
+++ b/apps/studio/src/pages/home/uploadSong/UploadSong.tsx
@@ -1,5 +1,5 @@
-import { Box, Container } from "@mui/material";
-import { Typography, WizardForm } from "@newm-web/elements";
+import { Box, Container, Typography } from "@mui/material";
+import { WizardForm } from "@newm-web/elements";
 import { FormikHelpers, FormikValues } from "formik";
 import { FunctionComponent, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
diff --git a/apps/studio/src/pages/home/wallet/AllCaughtUp.tsx b/apps/studio/src/pages/home/wallet/AllCaughtUp.tsx
index e76c4dda6..6c0a5af4d 100644
--- a/apps/studio/src/pages/home/wallet/AllCaughtUp.tsx
+++ b/apps/studio/src/pages/home/wallet/AllCaughtUp.tsx
@@ -1,5 +1,4 @@
-import { Box } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { Box, Typography } from "@mui/material";
 import { FunctionComponent } from "react";
 
 const AllCaughtUp: FunctionComponent = () => {
diff --git a/apps/studio/src/pages/home/wallet/SongRoyaltiesList.tsx b/apps/studio/src/pages/home/wallet/SongRoyaltiesList.tsx
index 7fe8cecb8..86ea908a8 100644
--- a/apps/studio/src/pages/home/wallet/SongRoyaltiesList.tsx
+++ b/apps/studio/src/pages/home/wallet/SongRoyaltiesList.tsx
@@ -9,12 +9,13 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Typography,
 } from "@mui/material";
 import theme from "@newm-web/theme";
 import { resizeCloudinaryImage } from "@newm-web/utils";
 import { Song } from "@newm-web/types";
 import { Dispatch, SetStateAction } from "react";
-import { TablePagination, Typography } from "@newm-web/elements";
+import { TablePagination } from "@newm-web/elements";
 import AllCaughtUp from "./AllCaughtUp";
 import { TableDropdownSelect } from "../../../components";
 
diff --git a/apps/studio/src/pages/home/wallet/UnclaimedRoyalties.tsx b/apps/studio/src/pages/home/wallet/UnclaimedRoyalties.tsx
index 02d056fff..f9e669087 100644
--- a/apps/studio/src/pages/home/wallet/UnclaimedRoyalties.tsx
+++ b/apps/studio/src/pages/home/wallet/UnclaimedRoyalties.tsx
@@ -1,5 +1,5 @@
-import { Box, IconButton, Stack } from "@mui/material";
-import { Button, Tooltip, Typography } from "@newm-web/elements";
+import { Box, IconButton, Stack, Typography } from "@mui/material";
+import { Button, Tooltip } from "@newm-web/elements";
 import currency from "currency.js";
 import theme from "@newm-web/theme";
 import HelpIcon from "@mui/icons-material/Help";
@@ -32,7 +32,7 @@ export const UnclaimedRoyalties = ({
         } }
       >
         <Stack alignItems="center" direction="row" gap={ 1 }>
-          <Typography color="grey100" fontSize={ 12 }>
+          <Typography color={ theme.colors.grey100 } fontSize={ 12 }>
             ROYALTIES ACCRUED SO FAR
           </Typography>
 
diff --git a/apps/studio/src/pages/home/wallet/Wallet.tsx b/apps/studio/src/pages/home/wallet/Wallet.tsx
index 824fafaaa..8d0fd7d42 100644
--- a/apps/studio/src/pages/home/wallet/Wallet.tsx
+++ b/apps/studio/src/pages/home/wallet/Wallet.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from "react";
-import { Box, Container } from "@mui/material";
-import { Button, Typography } from "@newm-web/elements";
+import { Box, Container, Typography } from "@mui/material";
+import { Button } from "@newm-web/elements";
 import { useConnectWallet } from "@newm.io/cardano-dapp-wallet-connector";
 import { UnclaimedRoyalties } from "./UnclaimedRoyalties";
 import Portfolio from "./Portfolio";
diff --git a/apps/studio/src/pages/login/Login.tsx b/apps/studio/src/pages/login/Login.tsx
index 2251eee79..37e8cb9d4 100644
--- a/apps/studio/src/pages/login/Login.tsx
+++ b/apps/studio/src/pages/login/Login.tsx
@@ -1,11 +1,10 @@
-import { Box, Stack, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
 import {
   Button,
   HorizontalLine,
   Link,
   PasswordInputField,
   TextInputField,
-  Typography,
 } from "@newm-web/elements";
 import { FunctionComponent, MouseEventHandler, useState } from "react";
 import { Form, Formik, FormikValues } from "formik";
diff --git a/apps/studio/src/pages/signUp/Verification.tsx b/apps/studio/src/pages/signUp/Verification.tsx
index cbc77c34f..9fc642d8d 100644
--- a/apps/studio/src/pages/signUp/Verification.tsx
+++ b/apps/studio/src/pages/signUp/Verification.tsx
@@ -1,12 +1,7 @@
 import { FunctionComponent, useState } from "react";
-import {
-  Button,
-  GradientTypography,
-  TextInputField,
-  Typography,
-} from "@newm-web/elements";
+import { Button, GradientTypography, TextInputField } from "@newm-web/elements";
 import { FormikValues, useFormikContext } from "formik";
-import { Box, Stack, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
 import { ResponsiveNEWMLogo } from "../../components";
 import { sendVerificationEmail } from "../../modules/session";
 import { useAppDispatch } from "../../common";
@@ -71,7 +66,7 @@ const Verification: FunctionComponent = () => {
 
       <Box mt={ 2 } pb={ 4 }>
         { showResendLink ? (
-          <Typography color="grey100" fontWeight={ 500 }>
+          <Typography color={ theme.colors.grey100 } fontWeight={ 500 }>
             Didn&apos;t receive an email?
             <button
               style={ {
diff --git a/apps/studio/src/pages/signUp/Welcome.tsx b/apps/studio/src/pages/signUp/Welcome.tsx
index 452ffa57c..24fb52792 100644
--- a/apps/studio/src/pages/signUp/Welcome.tsx
+++ b/apps/studio/src/pages/signUp/Welcome.tsx
@@ -1,10 +1,9 @@
-import { Box, Stack, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
 import {
   Button,
   HorizontalLine,
   PasswordInputField,
   TextInputField,
-  Typography,
 } from "@newm-web/elements";
 import { FunctionComponent, useState } from "react";
 import { FormikValues, useFormikContext } from "formik";
diff --git a/packages/components/src/lib/UnsupportedBrowserBanner.tsx b/packages/components/src/lib/UnsupportedBrowserBanner.tsx
index 133204c9d..df0591600 100644
--- a/packages/components/src/lib/UnsupportedBrowserBanner.tsx
+++ b/packages/components/src/lib/UnsupportedBrowserBanner.tsx
@@ -1,5 +1,5 @@
-import { Container, Stack, useTheme } from "@mui/material";
-import { Alert, Button, Typography } from "@newm-web/elements";
+import { Container, Stack, Typography, useTheme } from "@mui/material";
+import { Alert, Button } from "@newm-web/elements";
 import { browserName } from "react-device-detect";
 import { FunctionComponent, useEffect, useState } from "react";
 
@@ -59,8 +59,12 @@ const UnsupportedBrowserBanner: FunctionComponent = () => {
           severity="warning"
         >
           <Stack spacing={ 0.5 }>
-            <Typography color="yellow">{ title }</Typography>
-            <Typography color="yellow" fontWeight={ 400 } variant="subtitle1">
+            <Typography color={ theme.colors.yellow }>{ title }</Typography>
+            <Typography
+              color={ theme.colors.yellow }
+              fontWeight={ 400 }
+              variant="subtitle1"
+            >
               { message }
             </Typography>
           </Stack>
diff --git a/packages/components/src/lib/buttons/DisconnectWalletButton.tsx b/packages/components/src/lib/buttons/DisconnectWalletButton.tsx
index 05a6e4fa2..265c8a88a 100644
--- a/packages/components/src/lib/buttons/DisconnectWalletButton.tsx
+++ b/packages/components/src/lib/buttons/DisconnectWalletButton.tsx
@@ -1,5 +1,4 @@
-import { Box, Divider, Stack, useTheme } from "@mui/material";
-import { Typography } from "@newm-web/elements";
+import { Box, Divider, Stack, Typography, useTheme } from "@mui/material";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
@@ -135,7 +134,7 @@ const DisconnectWalletButton: FunctionComponent<
           top={ parentHeight + 8 }
         >
           <Stack alignItems="flex-start" direction="row" gap={ 1 } p={ 2 }>
-            <Typography fontWeight={ 500 } sx={ { color: theme.colors.grey200 } }>
+            <Typography color={ theme.colors.grey200 } fontWeight={ 500 }>
               { ellipsedAddress }
             </Typography>
 
@@ -163,9 +162,7 @@ const DisconnectWalletButton: FunctionComponent<
             onClick={ handleDisconnect }
           >
             <LogoutIcon fontSize="small" sx={ { color: theme.colors.white } } />
-            <Typography sx={ { color: theme.colors.white } }>
-              Disconnect
-            </Typography>
+            <Typography color={ theme.colors.white }>Disconnect</Typography>
           </Stack>
         </Stack>
       ) }
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index d91d68d5c..86a0491a5 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -1,5 +1,3 @@
-export { default as Typography } from "./lib/Typography";
-export * from "./lib/Typography";
 export { default as Alert } from "./lib/Alert";
 export { default as Button } from "./lib/Button";
 export * from "./lib/Button";
diff --git a/packages/elements/src/lib/GradientTextInput.tsx b/packages/elements/src/lib/GradientTextInput.tsx
index 97a860f0a..2541e1f9b 100644
--- a/packages/elements/src/lib/GradientTextInput.tsx
+++ b/packages/elements/src/lib/GradientTextInput.tsx
@@ -4,10 +4,9 @@ import {
   HTMLProps,
   forwardRef,
 } from "react";
-import { Stack } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import theme from "@newm-web/theme";
-import Typography from "./Typography";
 
 export interface GradientTextInputProps
   extends Omit<HTMLProps<HTMLInputElement>, "as" | "ref"> {
@@ -101,15 +100,15 @@ const GradientTextInput: ForwardRefRenderFunction<
       </StyledRootElement>
 
       { errorMessage ? (
+        <Typography color={ theme.colors.red } textAlign={ textAlign } variant="h5">
+          { errorMessage }
+        </Typography>
+      ) : helperText ? (
         <Typography
-          sx={ { color: theme.colors.red } }
+          color={ theme.colors.grey100 }
           textAlign={ textAlign }
           variant="h5"
         >
-          { errorMessage }
-        </Typography>
-      ) : helperText ? (
-        <Typography color="grey100" textAlign={ textAlign } variant="h5">
           { helperText }
         </Typography>
       ) : undefined }
diff --git a/packages/elements/src/lib/IconMessage.tsx b/packages/elements/src/lib/IconMessage.tsx
index 795956d45..a040f1568 100644
--- a/packages/elements/src/lib/IconMessage.tsx
+++ b/packages/elements/src/lib/IconMessage.tsx
@@ -1,6 +1,5 @@
 import { FunctionComponent, MouseEventHandler } from "react";
-import { Stack } from "@mui/material";
-import Typography from "./Typography";
+import { Stack, Typography } from "@mui/material";
 import ErrorMessage from "./styled/ErrorMessage";
 
 interface IconMessageProps {
diff --git a/packages/elements/src/lib/Link.tsx b/packages/elements/src/lib/Link.tsx
index f5bbd66af..b6b7b0c9d 100644
--- a/packages/elements/src/lib/Link.tsx
+++ b/packages/elements/src/lib/Link.tsx
@@ -3,7 +3,16 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from "react-router-dom";
-import Typography, { TypographyProps } from "./Typography";
+import {
+  TypographyProps as MuiTypogaphyProps,
+  Typography,
+} from "@mui/material";
+import { Theme } from "@mui/material/styles";
+import theme from "@newm-web/theme";
+
+interface TypographyProps extends MuiTypogaphyProps {
+  color?: keyof Theme["colors"];
+}
 
 type LinkProps = RouterLinkProps & TypographyProps;
 
@@ -15,7 +24,7 @@ const Link: ForwardRefRenderFunction<HTMLElement, LinkProps> = (
     <RouterLink replace={ replace } style={ { textDecoration: "none" } } to={ to }>
       <Typography
         { ...typographyProps }
-        color={ color }
+        color={ theme.colors[color] }
         ref={ ref }
         sx={ {
           textDecoration: "underline",
diff --git a/packages/elements/src/lib/SideBarHeader.tsx b/packages/elements/src/lib/SideBarHeader.tsx
index 4311b2bd9..f1bb26f76 100644
--- a/packages/elements/src/lib/SideBarHeader.tsx
+++ b/packages/elements/src/lib/SideBarHeader.tsx
@@ -1,13 +1,13 @@
 import { FunctionComponent } from "react";
-import Typography from "./Typography";
-
+import { Typography } from "@mui/material";
+import theme from "@newm-web/theme";
 interface SideBarHeaderProps {
   readonly children: string;
 }
 
 const SideBarHeader: FunctionComponent<SideBarHeaderProps> = ({ children }) => {
   return (
-    <Typography color="grey300" variant="h6">
+    <Typography color={ theme.colors.grey300 } variant="h6">
       { children }
     </Typography>
   );
diff --git a/packages/elements/src/lib/SwitchInput.tsx b/packages/elements/src/lib/SwitchInput.tsx
index 8dde16402..76a54933e 100644
--- a/packages/elements/src/lib/SwitchInput.tsx
+++ b/packages/elements/src/lib/SwitchInput.tsx
@@ -3,13 +3,13 @@ import {
   Stack,
   SwitchProps,
   SxProps,
+  Typography,
   useTheme,
 } from "@mui/material";
 import { FunctionComponent, ReactNode } from "react";
 import HelpIcon from "@mui/icons-material/Help";
 import Switch from "./Switch";
 import Tooltip from "./styled/Tooltip";
-import Typography from "./Typography";
 
 export interface SwitchInputProps extends SwitchProps {
   readonly children?: ReactNode;
@@ -53,7 +53,7 @@ const SwitchInput: FunctionComponent<SwitchInputProps> = ({
         <Stack pr={ [0, 0, 4] }>
           <Stack display="flex" flexDirection="row">
             <Typography
-              color="white"
+              color={ theme.colors.white }
               pr={ 1 }
               variant={ description ? "body1" : "subtitle1" }
             >
diff --git a/packages/elements/src/lib/Typography.tsx b/packages/elements/src/lib/Typography.tsx
deleted file mode 100644
index efc3d90c1..000000000
--- a/packages/elements/src/lib/Typography.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  TypographyProps as MuiTypogaphyProps,
-  Typography as MuiTypography,
-} from "@mui/material";
-import { Theme, useTheme } from "@mui/material/styles";
-import { FunctionComponent } from "react";
-
-export interface TypographyProps extends MuiTypogaphyProps {
-  color?: keyof Theme["colors"];
-}
-
-/**
- * Typography component that allows for easily
- * overriding the color styling.
- */
-const Typography: FunctionComponent<TypographyProps> = ({
-  color,
-  children,
-  ...rest
-}) => {
-  const theme = useTheme();
-
-  return (
-    <MuiTypography color={ color ? theme.colors[color] : undefined } { ...rest }>
-      { children }
-    </MuiTypography>
-  );
-};
-
-export default Typography;
diff --git a/packages/elements/src/lib/styled/ErrorMessage.ts b/packages/elements/src/lib/styled/ErrorMessage.ts
index 062930d67..7ac339541 100644
--- a/packages/elements/src/lib/styled/ErrorMessage.ts
+++ b/packages/elements/src/lib/styled/ErrorMessage.ts
@@ -1,6 +1,6 @@
-import theme from "@newm-web/theme";
 import { styled } from "@mui/material/styles";
-import Typography from "../Typography";
+import { Typography } from "@mui/material";
+import theme from "@newm-web/theme";
 
 const ErrorMessage = styled(Typography)({
   ...theme.typography.h5,
diff --git a/packages/elements/src/lib/styled/GradientTypography.ts b/packages/elements/src/lib/styled/GradientTypography.ts
index a1944c477..cfeb24892 100644
--- a/packages/elements/src/lib/styled/GradientTypography.ts
+++ b/packages/elements/src/lib/styled/GradientTypography.ts
@@ -1,6 +1,6 @@
+import { Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import theme from "@newm-web/theme";
-import Typography from "../Typography";
 
 const GradientTypography = styled(Typography)`
   color: transparent;