diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a51efc9..8f39513 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -4,6 +4,7 @@ import { Bell } from 'lucide-react';
 import { useAuth } from '@/contexts/auth';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 const Header: React.FC = () => {
   const {
@@ -12,6 +13,7 @@ const Header: React.FC = () => {
   const userName = user?.user_metadata?.username || '익명';
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
+  const isMobile = useIsMobile();
 
   // 이미지 프리로딩 처리
   useEffect(() => {
diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 46ef474..5c0286d 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -24,36 +24,90 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   return (
     <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
       <div className="neuro-card w-full">
-        <div className="flex items-center justify-center gap-2 py-[5px]">
-          <Wallet size={24} className="text-gray-500" />
-          <p className="text-gray-500 text-base">예산</p>
-        </div>
-        <p className="text-sm font-bold text-neuro-income text-center mt-3">
-          {formatCurrency(totalBudget)}
-        </p>
-      </div>
-      <div className="neuro-card w-full">
-        <div className="flex items-center justify-center gap-2 py-[5px]">
-          <CreditCard size={24} className="text-gray-500" />
-          <p className="text-gray-500 font-medium text-base">지출</p>
-        </div>
-        <p className="text-sm font-bold text-neuro-income text-center mt-3">
-          {formatCurrency(totalExpense)}
-        </p>
-      </div>
-      <div className="neuro-card w-full">
-        <div className="flex items-center justify-center gap-2 py-[5px]">
-          <Coins size={24} className="text-gray-500" />
-          <p className="text-gray-500 text-base">잔액</p>
-        </div>
-        {isOverBudget ? (
-          <p className="text-sm font-bold text-red-500 text-center mt-3">
-            초과액: {formatCurrency(Math.abs(remainingBudget))}
-          </p>
+        {isMobile ? (
+          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+          <div className="flex items-center justify-between px-3 py-[5px]">
+            <div className="flex items-center gap-2">
+              <Wallet size={24} className="text-gray-500" />
+              <p className="text-gray-500 text-base">예산</p>
+            </div>
+            <p className="text-sm font-bold text-neuro-income">
+              {formatCurrency(totalBudget)}
+            </p>
+          </div>
         ) : (
-          <p className="text-sm font-bold text-neuro-income text-center mt-3">
-            {formatCurrency(remainingBudget)}
-          </p>
+          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
+          <>
+            <div className="flex items-center justify-center gap-2 py-[5px]">
+              <Wallet size={24} className="text-gray-500" />
+              <p className="text-gray-500 text-base">예산</p>
+            </div>
+            <p className="text-sm font-bold text-neuro-income text-center mt-3">
+              {formatCurrency(totalBudget)}
+            </p>
+          </>
+        )}
+      </div>
+      <div className="neuro-card w-full">
+        {isMobile ? (
+          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+          <div className="flex items-center justify-between px-3 py-[5px]">
+            <div className="flex items-center gap-2">
+              <CreditCard size={24} className="text-gray-500" />
+              <p className="text-gray-500 font-medium text-base">지출</p>
+            </div>
+            <p className="text-sm font-bold text-neuro-income">
+              {formatCurrency(totalExpense)}
+            </p>
+          </div>
+        ) : (
+          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
+          <>
+            <div className="flex items-center justify-center gap-2 py-[5px]">
+              <CreditCard size={24} className="text-gray-500" />
+              <p className="text-gray-500 font-medium text-base">지출</p>
+            </div>
+            <p className="text-sm font-bold text-neuro-income text-center mt-3">
+              {formatCurrency(totalExpense)}
+            </p>
+          </>
+        )}
+      </div>
+      <div className="neuro-card w-full">
+        {isMobile ? (
+          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
+          <div className="flex items-center justify-between px-3 py-[5px]">
+            <div className="flex items-center gap-2">
+              <Coins size={24} className="text-gray-500" />
+              <p className="text-gray-500 text-base">잔액</p>
+            </div>
+            {isOverBudget ? (
+              <p className="text-sm font-bold text-red-500">
+                초과액: {formatCurrency(Math.abs(remainingBudget))}
+              </p>
+            ) : (
+              <p className="text-sm font-bold text-neuro-income">
+                {formatCurrency(remainingBudget)}
+              </p>
+            )}
+          </div>
+        ) : (
+          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
+          <>
+            <div className="flex items-center justify-center gap-2 py-[5px]">
+              <Coins size={24} className="text-gray-500" />
+              <p className="text-gray-500 text-base">잔액</p>
+            </div>
+            {isOverBudget ? (
+              <p className="text-sm font-bold text-red-500 text-center mt-3">
+                초과액: {formatCurrency(Math.abs(remainingBudget))}
+              </p>
+            ) : (
+              <p className="text-sm font-bold text-neuro-income text-center mt-3">
+                {formatCurrency(remainingBudget)}
+              </p>
+            )}
+          </>
         )}
       </div>
     </div>