diff --git a/packages/design-system/lib/components/Button/Button.tsx b/packages/design-system/lib/components/Button/Button.tsx
index 86bf399e3..324ffc166 100644
--- a/packages/design-system/lib/components/Button/Button.tsx
+++ b/packages/design-system/lib/components/Button/Button.tsx
@@ -1,11 +1,9 @@
 import { Button as ButtonRAC } from 'react-aria-components'
+import { Loading, type LoadingProps } from '../Loading/Loading'
 
 import { variants } from './variants'
-
 import type { ButtonProps } from './types'
-import { Spinner } from '../Spinner'
 import styles from './button.module.css'
-import { SpinnerProps } from '../Spinner/Spinner'
 
 export function Button({
   variant,
@@ -27,17 +25,17 @@ export function Button({
     className,
   })
 
-  let spinnerType: SpinnerProps['type'] = 'Dark'
+  let loadingType: LoadingProps['type'] = 'Dark'
 
   switch (color) {
     case 'Primary':
-      spinnerType = 'Dark'
+      loadingType = 'Dark'
       break
     case 'Inverted':
-      spinnerType = 'White'
+      loadingType = 'White'
       break
     default:
-      spinnerType = 'Dark'
+      loadingType = 'Dark'
   }
 
   return (
@@ -48,7 +46,7 @@ export function Button({
             {children}
             {isPending && (
               <div className={styles.spinnerWrapper}>
-                <Spinner size={20} type={spinnerType} />
+                <Loading size={20} type={loadingType} />
               </div>
             )}
           </>
diff --git a/packages/design-system/lib/components/Spinner/Spinner.stories.tsx b/packages/design-system/lib/components/Loading/Loading.stories.tsx
similarity index 74%
rename from packages/design-system/lib/components/Spinner/Spinner.stories.tsx
rename to packages/design-system/lib/components/Loading/Loading.stories.tsx
index 37dc317b1..242b85b38 100644
--- a/packages/design-system/lib/components/Spinner/Spinner.stories.tsx
+++ b/packages/design-system/lib/components/Loading/Loading.stories.tsx
@@ -2,11 +2,11 @@ import 'react-material-symbols/rounded'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Spinner } from './Spinner'
+import { Loading } from './Loading'
 
-const meta: Meta<typeof Spinner> = {
-  title: 'Components/Spinner',
-  component: Spinner,
+const meta: Meta<typeof Loading> = {
+  title: 'Components/Loading',
+  component: Loading,
   argTypes: {
     type: {
       control: 'text',
@@ -19,7 +19,7 @@ const meta: Meta<typeof Spinner> = {
 
 export default meta
 
-type Story = StoryObj<typeof Spinner>
+type Story = StoryObj<typeof Loading>
 
 export const Dark: Story = {
   args: {
diff --git a/packages/design-system/lib/components/Spinner/Spinner.tsx b/packages/design-system/lib/components/Loading/Loading.tsx
similarity index 85%
rename from packages/design-system/lib/components/Spinner/Spinner.tsx
rename to packages/design-system/lib/components/Loading/Loading.tsx
index 92746a449..cf73959b1 100644
--- a/packages/design-system/lib/components/Spinner/Spinner.tsx
+++ b/packages/design-system/lib/components/Loading/Loading.tsx
@@ -1,13 +1,13 @@
-import styles from './spinner.module.css'
+import styles from './loading.module.css'
 import { VariantProps } from 'class-variance-authority'
 
 import { variants } from './variants'
 
-export interface SpinnerProps extends VariantProps<typeof variants> {
+export interface LoadingProps extends VariantProps<typeof variants> {
   size?: number
 }
 
-export function Spinner({ type, size = 20 }: SpinnerProps) {
+export function Loading({ type, size = 20 }: LoadingProps) {
   const classNames = variants({
     type,
   })
diff --git a/packages/design-system/lib/components/Loading/index.ts b/packages/design-system/lib/components/Loading/index.ts
new file mode 100644
index 000000000..71170faae
--- /dev/null
+++ b/packages/design-system/lib/components/Loading/index.ts
@@ -0,0 +1 @@
+export { Loading } from './Loading'
diff --git a/packages/design-system/lib/components/Spinner/spinner.module.css b/packages/design-system/lib/components/Loading/loading.module.css
similarity index 86%
rename from packages/design-system/lib/components/Spinner/spinner.module.css
rename to packages/design-system/lib/components/Loading/loading.module.css
index f8d3dddb8..6447c4f9c 100644
--- a/packages/design-system/lib/components/Spinner/spinner.module.css
+++ b/packages/design-system/lib/components/Loading/loading.module.css
@@ -1,9 +1,9 @@
-.spinner {
+.loading {
   display: inline-block;
 }
 
 .dot {
-  animation: spinnerAnimation 0.8s linear infinite;
+  animation: pulse 0.8s linear infinite;
   transform-origin: center;
 }
 
@@ -40,7 +40,7 @@
   animation-delay: 0s;
 }
 
-@keyframes spinnerAnimation {
+@keyframes pulse {
   0% {
     opacity: 1;
   }
diff --git a/packages/design-system/lib/components/Spinner/variants.ts b/packages/design-system/lib/components/Loading/variants.ts
similarity index 69%
rename from packages/design-system/lib/components/Spinner/variants.ts
rename to packages/design-system/lib/components/Loading/variants.ts
index ee43570da..5bf33ea3e 100644
--- a/packages/design-system/lib/components/Spinner/variants.ts
+++ b/packages/design-system/lib/components/Loading/variants.ts
@@ -1,6 +1,6 @@
 import { cva } from 'class-variance-authority'
 
-import styles from './spinner.module.css'
+import styles from './loading.module.css'
 
 export const config = {
   variants: {
@@ -14,4 +14,4 @@ export const config = {
   },
 } as const
 
-export const variants = cva(styles.spinner, config)
+export const variants = cva(styles.loading, config)
diff --git a/packages/design-system/lib/components/Spinner/index.ts b/packages/design-system/lib/components/Spinner/index.ts
deleted file mode 100644
index fbf16c1fa..000000000
--- a/packages/design-system/lib/components/Spinner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Spinner } from './Spinner'