diff --git a/package-lock.json b/package-lock.json
index 75b05fa0d6..fc0d4ccf5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
         "@emotion/styled": "^11.14.1",
         "@kyper/hooks": "^1.3.0",
         "@kyper/icon": "^1.22.0",
-        "@kyper/progressindicators": "^3.5.0",
         "@kyper/tokenprovider": "^4.4.0",
         "@mui/icons-material": "^7.3.9",
         "@mui/material": "^7.3.9",
@@ -1632,19 +1631,6 @@
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/@kyper/progressindicators": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@kyper/progressindicators/-/progressindicators-3.5.0.tgz",
-      "integrity": "sha512-bQrLBaA2MX1I73SQrrY5u9HWzKEcZi/WYzAX1gTu2LzJiW+PXYrc/OagSkboLJT60kU+rejp6Up60kCx/Y4Pog==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@kyper/tokenprovider": "^4.0.0",
-        "@mxenabled/cssinjs": "^0.6.0",
-        "prop-types": "^15.7.2",
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@kyper/tokenprovider": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@kyper/tokenprovider/-/tokenprovider-4.4.0.tgz",
@@ -2596,6 +2582,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@mxenabled/cssinjs/-/cssinjs-0.6.0.tgz",
       "integrity": "sha512-pj4/+iqyEGS1zg4i7jo7jLX+tS9h1YA5W1vLfUipuLWbxzEmoI6K2JvfhP1jT3eKTOJE3MTH+K53/t9KDyUu3Q==",
+      "dev": true,
       "dependencies": {
         "free-style": "^4.1.0",
         "insert-css": "^2.0.0"
@@ -8092,7 +8079,8 @@
     "node_modules/free-style": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/free-style/-/free-style-4.1.0.tgz",
-      "integrity": "sha512-Irv8vaifjszJimKa+6lcax5bEIpMb1oQ7N6zLFQK3ovCnYDPsy1M5DiuHV1mDSYvEFtQ2/mu37kn+UEooeJ6Ww=="
+      "integrity": "sha512-Irv8vaifjszJimKa+6lcax5bEIpMb1oQ7N6zLFQK3ovCnYDPsy1M5DiuHV1mDSYvEFtQ2/mu37kn+UEooeJ6Ww==",
+      "dev": true
     },
     "node_modules/from2": {
       "version": "2.3.0",
@@ -9089,7 +9077,8 @@
     "node_modules/insert-css": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
-      "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA=="
+      "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==",
+      "dev": true
     },
     "node_modules/internal-slot": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index f23682eb0e..c22156af4c 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "@emotion/styled": "^11.14.1",
     "@kyper/hooks": "^1.3.0",
     "@kyper/icon": "^1.22.0",
-    "@kyper/progressindicators": "^3.5.0",
     "@kyper/tokenprovider": "^4.4.0",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
diff --git a/src/components/ClientLogo.js b/src/components/ClientLogo.js
index 70d4cc79e5..045ac2af80 100644
--- a/src/components/ClientLogo.js
+++ b/src/components/ClientLogo.js
@@ -12,7 +12,7 @@ import ConnectHeaderRecipientDark from 'src/images/header/ConnectHeaderRecipient
 
 export const ClientLogo = ({
   alt = 'Client logo',
-  className,
+  className = '',
   clientGuid,
   size = 32,
   style = {},
diff --git a/src/components/LoadingSpinner-test.js b/src/components/LoadingSpinner-test.js
new file mode 100644
index 0000000000..4769bf473c
--- /dev/null
+++ b/src/components/LoadingSpinner-test.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { LoadingSpinner } from 'src/components/LoadingSpinner'
+
+describe('LoadingSpinner', () => {
+  it('renders a progressbar by default', () => {
+    render(<LoadingSpinner />)
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('does not render the loading text by default', () => {
+    render(<LoadingSpinner />)
+
+    expect(screen.queryByText('Loading ...')).not.toBeInTheDocument()
+  })
+
+  it('renders the loading text when showText is true', () => {
+    render(<LoadingSpinner showText={true} />)
+
+    expect(screen.getByText('Loading ...')).toBeInTheDocument()
+  })
+
+  it('does not render the loading text when showText is false', () => {
+    render(<LoadingSpinner showText={false} />)
+
+    expect(screen.queryByText('Loading ...')).not.toBeInTheDocument()
+  })
+
+  it('renders the spinner at the default size of 48px', () => {
+    render(<LoadingSpinner />)
+
+    const spinner = screen.getByRole('progressbar')
+    expect(spinner).toHaveStyle({ width: '48px', height: '48px' })
+  })
+
+  it('renders the spinner at a custom size', () => {
+    render(<LoadingSpinner size={24} />)
+
+    const spinner = screen.getByRole('progressbar')
+    expect(spinner).toHaveStyle({ width: '24px', height: '24px' })
+  })
+})
diff --git a/src/components/LoadingSpinner.js b/src/components/LoadingSpinner.js
index 931334ca7d..c519d0fddc 100644
--- a/src/components/LoadingSpinner.js
+++ b/src/components/LoadingSpinner.js
@@ -1,46 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Spinner } from '@kyper/progressindicators'
-import { useTokens } from '@kyper/tokenprovider'
+import { Stack } from '@mui/material'
+import { Text } from '@mxenabled/mxui'
+import CircularProgress from '@mui/material/CircularProgress'
+
+import styles from './LoadingSpinner.module.css'
 import { __ } from 'src/utilities/Intl'
 
 export const LoadingSpinner = ({ showText = false, size = 48 }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
-
   return (
-    <div style={styles.container}>
-      <Spinner
-        bgColor={tokens.BackgroundColor.Container}
-        fgColor={tokens.Color.Brand300}
-        size={size}
-      />
-      {showText && <div style={styles.text}>{__('Loading ...')}</div>}
+    <div className={styles.container}>
+      <Stack spacing={2}>
+        <CircularProgress color="primary" size={size} />
+        {showText && (
+          <Text className={styles.text} variant="caption">
+            {__('Loading ...')}
+          </Text>
+        )}
+      </Stack>
     </div>
   )
 }
 
-const getStyles = (tokens) => {
-  return {
-    container: {
-      backgroundColor: tokens.BackgroundColor.Container,
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    text: {
-      color: '#999',
-      fontSize: tokens.FontSize.Tiny,
-      fontWeight: tokens.FontWeight.SemiBold,
-      textAlign: 'center',
-      marginTop: '16px',
-    },
-  }
-}
-
 LoadingSpinner.propTypes = {
   showText: PropTypes.bool,
   size: PropTypes.number,
diff --git a/src/components/LoadingSpinner.module.css b/src/components/LoadingSpinner.module.css
new file mode 100644
index 0000000000..7d4427f339
--- /dev/null
+++ b/src/components/LoadingSpinner.module.css
@@ -0,0 +1,12 @@
+.container {
+  background-color: var(--mui-palette-background-paper);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.text {
+  text-align: center;
+}
diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx
index a96da7f76a..e59a59fe90 100644
--- a/src/views/connecting/progress/ProgressBar.tsx
+++ b/src/views/connecting/progress/ProgressBar.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { useTokens } from '@kyper/tokenprovider'
-import { Spinner } from '@kyper/progressindicators'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import { ProgressLine } from 'src/views/connecting/progress/ProgressLine'
 import { ProgressCheckMark } from 'src/views/connecting/progress/ProgressCheckMark'
@@ -23,8 +22,6 @@ export const ProgressBar = ({
   institution: { guid: string; logo_url: string }
   jobSchedule: { isInitialized: boolean }
 }) => {
-  const tokens = useTokens()
-
   const clientGuid = useSelector(getClientGuid)
 
   const styles = getStyles()
@@ -33,7 +30,7 @@ export const ProgressBar = ({
   if (jobSchedule.isInitialized === false) {
     return (
       <div style={styles.container}>
-        <Spinner bgColor="transparent" fgColor={tokens.TextColor.Active} />
+        <CircularProgress color="primary" size={64} />
       </div>
     )
   }
diff --git a/src/views/connecting/progress/ProgressCircle.js b/src/views/connecting/progress/ProgressCircle.js
index 4f4efcf378..9b43432845 100644
--- a/src/views/connecting/progress/ProgressCircle.js
+++ b/src/views/connecting/progress/ProgressCircle.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useTokens } from '@kyper/tokenprovider'
-import { Spinner } from '@kyper/progressindicators'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import { JOB_STATUSES } from 'src/const/consts'
 
@@ -29,7 +29,7 @@ export const ProgressCircle = (props) => {
   if (isActive) {
     circleContent = (
       <div style={circleStyle}>
-        <Spinner bgColor="transparent" fgColor={tokens.TextColor.Active} size={16} />
+        <CircularProgress color="primary" size={16} />
       </div>
     )
   } else if (isDone) {
diff --git a/src/views/microdeposits/Verifying-test.tsx b/src/views/microdeposits/Verifying-test.tsx
index c22d4150d6..79dadecd1c 100644
--- a/src/views/microdeposits/Verifying-test.tsx
+++ b/src/views/microdeposits/Verifying-test.tsx
@@ -104,7 +104,7 @@ describe('Verifying', () => {
       expect(screen.getByTestId('checking-amounts-paragraph')).toHaveTextContent(
         'Checking microdeposit amounts.',
       )
-      expect(document.querySelector('[data-ui-test="kyper-spinner"]')).toBeInTheDocument()
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
     })
   })
 
diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts
index 17ced3616f..dcb19a4cf8 100644
--- a/typings/kyper.d.ts
+++ b/typings/kyper.d.ts
@@ -10,6 +10,5 @@ declare module '@kyper/icon/Dollar'
 declare module '@kyper/icon/Growth'
 declare module '@kyper/icon/Image'
 declare module '@kyper/icon/Health'
-declare module '@kyper/progressindicators'
 declare module '@kyper/hooks'
 declare module '@kyper/icon/CheckmarkFilled'