diff --git a/src/App.tsx b/src/App.tsx
index 35031ca..dc7f5c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,6 +37,7 @@ import {
   ClerkProvider,
   ClerkDebugInfo,
 } from "./components/providers/ClerkProvider";
+import { BudgetProvider } from "./contexts/budget/BudgetContext";
 
 // 페이지 컴포넌트들을 개선된 레이지 로딩으로 변경 (ChunkLoadError 재시도 포함)
 const Index = createLazyComponent(() => import("./pages/Index"));
@@ -380,77 +381,79 @@ function App() {
           fallback={<ErrorScreen error={error} retry={handleRetry} />}
           showDialog={false}
         >
-          <BasicLayout>
-            <PageTracker />
-            <Suspense fallback={<PageLoadingSpinner />}>
-              <Routes>
-                <Route path="/" element={<Index />} />
-                {/* Clerk 라우트 다시 활성화 */}
-                <Route path="/sign-in/*" element={<SignIn />} />
-                <Route path="/sign-up/*" element={<SignUp />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/register" element={<Register />} />
-                <Route path="/settings" element={<Settings />} />
-                <Route path="/transactions" element={<Transactions />} />
-                <Route path="/analytics" element={<Analytics />} />
-                <Route path="/profile" element={<ProfileManagement />} />
-                <Route path="/payment-methods" element={<PaymentMethods />} />
-                <Route path="/help-support" element={<HelpSupport />} />
-                <Route
-                  path="/security-privacy"
-                  element={<SecurityPrivacySettings />}
+          <BudgetProvider>
+            <BasicLayout>
+              <PageTracker />
+              <Suspense fallback={<PageLoadingSpinner />}>
+                <Routes>
+                  <Route path="/" element={<Index />} />
+                  {/* Clerk 라우트 다시 활성화 */}
+                  <Route path="/sign-in/*" element={<SignIn />} />
+                  <Route path="/sign-up/*" element={<SignUp />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/register" element={<Register />} />
+                  <Route path="/settings" element={<Settings />} />
+                  <Route path="/transactions" element={<Transactions />} />
+                  <Route path="/analytics" element={<Analytics />} />
+                  <Route path="/profile" element={<ProfileManagement />} />
+                  <Route path="/payment-methods" element={<PaymentMethods />} />
+                  <Route path="/help-support" element={<HelpSupport />} />
+                  <Route
+                    path="/security-privacy"
+                    element={<SecurityPrivacySettings />}
+                  />
+                  <Route
+                    path="/notifications"
+                    element={<NotificationSettings />}
+                  />
+                  <Route path="/forgot-password" element={<ForgotPassword />} />
+                  <Route path="/pwa-debug" element={<PWADebugPage />} />
+                  <Route path="*" element={<NotFound />} />
+                </Routes>
+              </Suspense>
+              {/* React Query 캐시 관리 */}
+              <Suspense fallback={null}>
+                <QueryCacheManager
+                  cleanupIntervalMinutes={30}
+                  enableOfflineCache={true}
+                  enableCacheAnalysis={isDevMode}
                 />
-                <Route
-                  path="/notifications"
-                  element={<NotificationSettings />}
+              </Suspense>
+
+              {/* 오프라인 상태 관리 */}
+              <Suspense fallback={null}>
+                <OfflineManager
+                  showOfflineToast={true}
+                  autoSyncOnReconnect={true}
                 />
-                <Route path="/forgot-password" element={<ForgotPassword />} />
-                <Route path="/pwa-debug" element={<PWADebugPage />} />
-                <Route path="*" element={<NotFound />} />
-              </Routes>
-            </Suspense>
-            {/* React Query 캐시 관리 */}
-            <Suspense fallback={null}>
-              <QueryCacheManager
-                cleanupIntervalMinutes={30}
-                enableOfflineCache={true}
-                enableCacheAnalysis={isDevMode}
-              />
-            </Suspense>
+              </Suspense>
 
-            {/* 오프라인 상태 관리 */}
-            <Suspense fallback={null}>
-              <OfflineManager
-                showOfflineToast={true}
-                autoSyncOnReconnect={true}
-              />
-            </Suspense>
+              {/* 백그라운드 자동 동기화 - 성능 최적화로 30초 간격으로 조정 */}
+              <Suspense fallback={null}>
+                <BackgroundSync
+                  intervalMinutes={0.5}
+                  syncOnFocus={true}
+                  syncOnOnline={true}
+                />
+              </Suspense>
 
-            {/* 백그라운드 자동 동기화 - 성능 최적화로 30초 간격으로 조정 */}
-            <Suspense fallback={null}>
-              <BackgroundSync
-                intervalMinutes={0.5}
-                syncOnFocus={true}
-                syncOnOnline={true}
-              />
-            </Suspense>
+              {/* 개발환경에서 Sentry 테스트 버튼 */}
+              <Suspense fallback={null}>
+                <SentryTestButton />
+              </Suspense>
 
-            {/* 개발환경에서 Sentry 테스트 버튼 */}
-            <Suspense fallback={null}>
-              <SentryTestButton />
-            </Suspense>
+              {/* 개발환경에서 Clerk 상태 디버깅 */}
+              <ClerkDebugInfo />
 
-            {/* 개발환경에서 Clerk 상태 디버깅 */}
-            <ClerkDebugInfo />
+              {/* 개발환경에서 환경 변수 테스트 */}
+              {isDevMode && <EnvTest />}
 
-            {/* 개발환경에서 환경 변수 테스트 */}
-            {isDevMode && <EnvTest />}
-
-            {/* Clerk 디버그 및 제어 */}
-            <Suspense fallback={null}>
-              <ClerkDebugControl />
-            </Suspense>
-          </BasicLayout>
+              {/* Clerk 디버그 및 제어 */}
+              <Suspense fallback={null}>
+                <ClerkDebugControl />
+              </Suspense>
+            </BasicLayout>
+          </BudgetProvider>
           {isDevMode && <ReactQueryDevtools initialIsOpen={false} />}
         </SentryErrorBoundary>
       </QueryClientProvider>
diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 87f9f4b..916dd5b 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Wallet, CreditCard, Coins } from "lucide-react";
 import { formatCurrency } from "@/utils/currencyFormatter";
+import { useIsMobile } from "@/hooks/use-mobile";
 interface SummaryCardsProps {
   totalBudget: number;
   totalExpense: number;
@@ -11,6 +12,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   totalExpense,
   _savingsPercentage,
 }) => {
+  const isMobile = useIsMobile();
   // 남은 예산 계산
   const remainingBudget = totalBudget - totalExpense;
   const isOverBudget = remainingBudget < 0;