diff --git a/src/components/progress/index.tsx b/src/components/progress/index.tsx
new file mode 100644
index 00000000..518192d0
--- /dev/null
+++ b/src/components/progress/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+import { Progress as BaseProgress } from '../ui/progress'
+import { cn } from '../../lib/utils'
+
+export const Progress = ({ className, ...props }: React.ComponentProps<typeof BaseProgress>) => {
+  return <BaseProgress className={cn('h-4 bg-secondary', className)} {...props} />
+}
diff --git a/src/stories/Progress/Progress.stories.tsx b/src/stories/Progress/Progress.stories.tsx
index 87367383..9ad473e9 100644
--- a/src/stories/Progress/Progress.stories.tsx
+++ b/src/stories/Progress/Progress.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react-vite'
-import { Progress } from '../../components/ui/progress.tsx'
+import { Progress } from '../../components/progress'
 import { expect, within } from 'storybook/test'
 
 const meta = {
diff --git a/src/styles/global.css b/src/styles/global.css
index bac724b9..29778391 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -54,7 +54,7 @@
   --card-foreground: hsl(0 0% 98%);
   --popover: hsl(240 10% 4%);
   --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(209 100% 81%);
+  --primary: hsl(180 100% 50.59%);
   --primary-foreground: hsl(240 10% 4%);
   --secondary: hsl(240 4% 16%);
   --secondary-foreground: hsl(0 0% 98%);