diff --git a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
index c7933033..dee674f1 100644
--- a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
+++ b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw, LayoutGrid, Monitor } from "lucide-react";
+import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";
 import { useRouter } from "next/navigation";
@@ -21,8 +21,6 @@ import {
   GridMode,
   isPopLayout,
   createEmptyLayout,
-  GAP_PRESETS,
-  GRID_BREAKPOINTS,
   BLOCK_GAP,
   BLOCK_PADDING,
   detectGridMode,
@@ -86,26 +84,32 @@ function PopScreenViewPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // 뷰포트 너비 (클라이언트 사이드에서만 계산, 최대 1366px)
-  const [viewportWidth, setViewportWidth] = useState(1024); // 기본값: 태블릿 가로
-  
-  // 모드 결정: 
-  // - 프리뷰 모드: 수동 선택한 device/orientation 사용
-  // - 일반 모드: 화면 너비 기준으로 자동 결정 (GRID_BREAKPOINTS와 일치)
-  const currentModeKey = isPreviewMode 
-    ? getModeKey(deviceType, isLandscape)
-    : detectGridMode(viewportWidth);
+  // 실제 브라우저 너비 (모드 감지용)
+  const [rawWidth, setRawWidth] = useState(1024);
   
   useEffect(() => {
-    const updateViewportWidth = () => {
-      setViewportWidth(Math.min(window.innerWidth, 1366));
-    };
-    
-    updateViewportWidth();
-    window.addEventListener("resize", updateViewportWidth);
-    return () => window.removeEventListener("resize", updateViewportWidth);
+    const updateWidth = () => setRawWidth(window.innerWidth);
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
   }, []);
 
+  // 모드 결정
+  const currentModeKey = isPreviewMode 
+    ? getModeKey(deviceType, isLandscape)
+    : detectGridMode(rawWidth);
+
+  // 디자이너와 동일한 기준 너비 사용 (모드별 고정 너비)
+  const MODE_REFERENCE_WIDTH: Record<GridMode, number> = {
+    mobile_portrait: 375,
+    mobile_landscape: 600,
+    tablet_portrait: 820,
+    tablet_landscape: 1024,
+  };
+  const viewportWidth = isPreviewMode
+    ? DEVICE_SIZES[deviceType][isLandscape ? "landscape" : "portrait"].width
+    : MODE_REFERENCE_WIDTH[currentModeKey];
+
   // 화면 및 POP 레이아웃 로드
   useEffect(() => {
     const loadScreen = async () => {
@@ -288,20 +292,7 @@ function PopScreenViewPage() {
               </div>
             )}
 
-            {/* 일반 모드 네비게이션 바 */}
-            {!isPreviewMode && (
-              <div className="sticky top-0 z-50 flex h-10 items-center justify-between border-b bg-white/80 px-3 backdrop-blur">
-                <Button variant="ghost" size="sm" onClick={() => router.push("/pop")} className="gap-1 text-xs">
-                  <LayoutGrid className="h-3.5 w-3.5" />
-                  POP 대시보드
-                </Button>
-                <span className="text-xs text-gray-500">{screen.screenName}</span>
-                <Button variant="ghost" size="sm" onClick={() => router.push("/")} className="gap-1 text-xs">
-                  <Monitor className="h-3.5 w-3.5" />
-                  PC 모드
-                </Button>
-              </div>
-            )}
+            {/* 일반 모드 네비게이션 바 제거 (프로필 컴포넌트에서 PC 모드 전환 가능) */}
 
             {/* POP 화면 컨텐츠 */}
             <div className={`flex-1 flex flex-col overflow-auto ${isPreviewMode ? "py-4 items-center" : "bg-white"}`}>