diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx
index c6147e0..bf9e872 100644
--- a/src/components/BudgetCategoriesSection.tsx
+++ b/src/components/BudgetCategoriesSection.tsx
@@ -1,5 +1,8 @@
+
 import React from 'react';
-import BudgetCard from '@/components/BudgetCard';
+import { categoryIcons } from '@/constants/categoryIcons';
+import { formatCurrency } from '@/utils/formatters';
+
 interface BudgetCategoriesSectionProps {
   categories: {
     title: string;
@@ -7,14 +10,43 @@ interface BudgetCategoriesSectionProps {
     total: number;
   }[];
 }
+
 const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
   categories
 }) => {
   return <>
-      <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
-      <div className="grid gap-4 mb-8 desktop-card">
-        {categories.map((category, index) => <BudgetCard key={index} title={category.title} current={category.current} total={category.total} color="neuro-income" />)}
-      </div>
-    </>;
+    <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
+    <div className="neuro-card mb-8">
+      {categories.map((category, index) => (
+        <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
+          <div className="flex items-center gap-2 mb-1">
+            <div className="text-neuro-income">
+              {categoryIcons[category.title]}
+            </div>
+            <h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
+          </div>
+          
+          <div className="flex items-center justify-between mb-2">
+            <p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
+            <p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</p>
+          </div>
+          
+          <div className="relative h-3 neuro-pressed overflow-hidden">
+            <div 
+              className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
+              style={{ width: `${Math.min(Math.round((category.current / category.total) * 100), 100)}%` }}
+            />
+          </div>
+          
+          <div className="mt-2 flex justify-end">
+            <span className="text-xs font-medium text-gray-500">
+              {Math.min(Math.round((category.current / category.total) * 100), 100)}%
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  </>;
 };
-export default BudgetCategoriesSection;
\ No newline at end of file
+
+export default BudgetCategoriesSection;