diff --git a/public/js/pagination.js b/public/js/pagination.js
index 7f668007..2f620118 100644
--- a/public/js/pagination.js
+++ b/public/js/pagination.js
@@ -114,13 +114,9 @@ document.body.addEventListener('htmx:afterSwap', function(event) {
     setTimeout(function() {
         const perPageSelect = document.getElementById('perPageSelect');
         if (perPageSelect) {
-            // 서버에서 받은 값(data-server-value)을 우선 사용
-            const serverValue = perPageSelect.dataset.serverValue;
-            if (serverValue) {
-                perPageSelect.value = serverValue;
-                // 쿠키도 서버 값으로 업데이트
-                setCookie('pagination_per_page', serverValue);
-            }
+            // 쿠키에 저장된 값으로 selectbox 설정 (서버 값으로 덮어쓰지 않음)
+            const cookieValue = getPerPageFromCookie();
+            perPageSelect.value = cookieValue;
         }
     }, 50);
 });
diff --git a/resources/views/menus/create.blade.php b/resources/views/menus/create.blade.php
index a4ebbe5e..990f80fd 100644
--- a/resources/views/menus/create.blade.php
+++ b/resources/views/menus/create.blade.php
@@ -30,7 +30,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                         <option value="">최상위 메뉴</option>
                         @foreach($parentMenus as $parent)
                             <option value="{{ $parent->id }}">
-                                {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->icon ? $parent->icon . ' ' : '' }}{{ $parent->name }}
+                                {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->name }}
                             </option>
                         @endforeach
                     </select>
diff --git a/resources/views/menus/edit.blade.php b/resources/views/menus/edit.blade.php
index 6ead1259..9d034aba 100644
--- a/resources/views/menus/edit.blade.php
+++ b/resources/views/menus/edit.blade.php
@@ -32,7 +32,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                         @foreach($parentMenus as $parent)
                             @if($parent->id != $menu->id)
                                 <option value="{{ $parent->id }}" {{ $menu->parent_id == $parent->id ? 'selected' : '' }}>
-                                    {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->icon ? $parent->icon . ' ' : '' }}{{ $parent->name }}
+                                    {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->name }}
                                 </option>
                             @endif
                         @endforeach
diff --git a/resources/views/menus/global-create.blade.php b/resources/views/menus/global-create.blade.php
index 5de470f0..0b61f7e3 100644
--- a/resources/views/menus/global-create.blade.php
+++ b/resources/views/menus/global-create.blade.php
@@ -7,7 +7,10 @@
         <!-- 페이지 헤더 -->
         <div class="flex justify-between items-center mb-6">
             <div>
-                <h1 class="text-2xl font-bold text-gray-800">글로벌 메뉴 생성</h1>
+                <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
+                    <x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
+                    글로벌 메뉴 생성
+                </h1>
                 <p class="text-sm text-gray-500 mt-1">시스템 전체에서 사용되는 기본 메뉴를 생성합니다.</p>
             </div>
             <a href="{{ route('menus.global.index') }}" class="text-gray-600 hover:text-gray-800">
@@ -29,7 +32,9 @@
                             class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                         <option value="">최상위 메뉴</option>
                         @foreach($parentMenus as $parent)
-                            <option value="{{ $parent->id }}">{{ $parent->name }}</option>
+                            <option value="{{ $parent->id }}">
+                                {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->name }}
+                            </option>
                         @endforeach
                     </select>
                 </div>
@@ -58,9 +63,39 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                     <label for="icon" class="block text-sm font-medium text-gray-700 mb-2">
                         아이콘
                     </label>
-                    <input type="text" name="icon" id="icon"
-                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
-                           placeholder="heroicon-o-home">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div id="icon-preview" class="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-lg bg-gray-50 text-gray-600">
+                            <x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
+                        </div>
+                        <input type="text" name="icon" id="icon"
+                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                               placeholder="아래에서 선택하거나 직접 입력">
+                    </div>
+                    <!-- 아이콘 샘플 그리드 -->
+                    <div class="border border-gray-200 rounded-lg p-3 bg-gray-50">
+                        <p class="text-xs text-gray-500 mb-2">사용 가능한 아이콘 (클릭하여 선택)</p>
+                        <div class="grid grid-cols-6 sm:grid-cols-9 md:grid-cols-13 gap-1">
+                            @php
+                            $sampleIcons = [
+                                'home', 'folder', 'chart-bar', 'calendar', 'building',
+                                'users', 'user-group', 'menu', 'shield-check', 'key',
+                                'cog', 'beaker', 'code', 'document-text', 'clipboard-list',
+                                'cube', 'collection', 'tag', 'database', 'terminal',
+                                'server', 'adjustments', 'sparkles', 'lightning-bolt', 'puzzle', 'external-link',
+                            ];
+                            @endphp
+                            @foreach($sampleIcons as $iconKey)
+                                <button type="button"
+                                        onclick="selectIcon('{{ $iconKey }}')"
+                                        class="icon-btn flex flex-col items-center gap-0.5 p-2 hover:bg-white hover:shadow-sm rounded-lg transition cursor-pointer border border-transparent hover:border-purple-300 group"
+                                        data-icon="{{ $iconKey }}"
+                                        title="{{ $iconKey }}">
+                                    <x-sidebar.menu-icon :icon="$iconKey" class="w-5 h-5 text-gray-500 group-hover:text-purple-600" />
+                                    <span class="text-[9px] text-gray-400 group-hover:text-purple-600 truncate max-w-full leading-none">{{ $iconKey }}</span>
+                                </button>
+                            @endforeach
+                        </div>
+                    </div>
                 </div>
 
                 <!-- 정렬 순서 -->
@@ -112,6 +147,43 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                            placeholder="https://example.com">
                 </div>
 
+                <!-- 확장 옵션 섹션 -->
+                <div class="border-t border-gray-200 pt-4 mt-6 mb-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-sm font-semibold text-gray-700">확장 옵션</h3>
+                        <button type="button" onclick="toggleOptionsSection()" class="text-xs text-purple-600 hover:text-purple-800">
+                            <span id="options-toggle-text">접기</span>
+                        </button>
+                    </div>
+
+                    <div id="options-section" class="space-y-4">
+                        <!-- section -->
+                        <div>
+                            <label for="option_section" class="block text-sm font-medium text-gray-700 mb-1">
+                                section
+                            </label>
+                            <select name="option_section" id="option_section"
+                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                <option value="main">main (기본)</option>
+                                <option value="tools">tools (도구)</option>
+                                <option value="labs">labs (실험실)</option>
+                            </select>
+                            <p class="text-xs text-gray-400 mt-1">사이드바 영역 구분. main: 메인 메뉴, tools: 개발도구 영역, labs: R&D 실험실 영역</p>
+                        </div>
+
+                        <!-- meta (JSON) -->
+                        <div>
+                            <label for="option_meta" class="block text-sm font-medium text-gray-700 mb-1">
+                                meta <span class="text-xs text-gray-400">(JSON)</span>
+                            </label>
+                            <textarea name="option_meta" id="option_meta" rows="3"
+                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono text-sm"
+                                      placeholder='{"tab": "S", "badge": "new"}'></textarea>
+                            <p class="text-xs text-gray-400 mt-1">추가 메타 데이터 (JSON 형식). 탭 구분, 뱃지 표시 등 커스텀 속성 저장</p>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- 버튼 그룹 -->
                 <div class="flex justify-end gap-4 mt-6">
                     <a href="{{ route('menus.global.index') }}"
@@ -130,6 +202,37 @@ class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transit
 
 @push('scripts')
 <script>
+    // 아이콘 선택
+    window.selectIcon = function(iconKey) {
+        document.getElementById('icon').value = iconKey;
+        updateIconPreview(iconKey);
+        // 선택 상태 표시
+        document.querySelectorAll('.icon-btn').forEach(btn => {
+            btn.classList.remove('bg-purple-50', 'border-purple-400');
+            if (btn.dataset.icon === iconKey) {
+                btn.classList.add('bg-purple-50', 'border-purple-400');
+            }
+        });
+    };
+
+    // 아이콘 미리보기 업데이트
+    window.updateIconPreview = function(iconKey) {
+        const preview = document.getElementById('icon-preview');
+        const iconBtn = document.querySelector(`.icon-btn[data-icon="${iconKey}"]`);
+        if (iconBtn) {
+            const svg = iconBtn.querySelector('svg');
+            if (svg) {
+                const clonedSvg = svg.cloneNode(true);
+                clonedSvg.classList.remove('w-5', 'h-5');
+                clonedSvg.classList.add('w-6', 'h-6');
+                preview.innerHTML = '';
+                preview.appendChild(clonedSvg);
+            }
+        } else if (iconKey) {
+            preview.innerHTML = `<span class="text-xs text-gray-400">${iconKey}</span>`;
+        }
+    };
+
     // 외부 링크 체크박스 토글
     document.getElementById('is_external').addEventListener('change', function() {
         const externalUrlGroup = document.getElementById('external-url-group');
@@ -140,6 +243,41 @@ class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transit
         }
     });
 
+    // 확장 옵션 섹션 토글
+    window.toggleOptionsSection = function() {
+        const section = document.getElementById('options-section');
+        const toggleText = document.getElementById('options-toggle-text');
+        if (section.classList.contains('hidden')) {
+            section.classList.remove('hidden');
+            toggleText.textContent = '접기';
+        } else {
+            section.classList.add('hidden');
+            toggleText.textContent = '펼치기';
+        }
+    };
+
+    // options 객체 생성
+    function buildOptionsObject() {
+        const options = {};
+
+        const section = document.getElementById('option_section').value;
+        if (section && section !== 'main') {
+            options.section = section;
+        }
+
+        const metaStr = document.getElementById('option_meta').value.trim();
+        if (metaStr) {
+            try {
+                options.meta = JSON.parse(metaStr);
+            } catch (e) {
+                showToast('meta 필드의 JSON 형식이 올바르지 않습니다.', 'error');
+                throw e;
+            }
+        }
+
+        return Object.keys(options).length > 0 ? options : null;
+    }
+
     // 폼 제출 처리
     document.getElementById('menuForm').addEventListener('submit', async function(e) {
         e.preventDefault();
@@ -147,6 +285,20 @@ class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transit
         const formData = new FormData(this);
         const data = Object.fromEntries(formData.entries());
 
+        // option_ 접두사 필드 제거
+        delete data.option_section;
+        delete data.option_meta;
+
+        // options 객체 추가
+        try {
+            const options = buildOptionsObject();
+            if (options) {
+                data.options = options;
+            }
+        } catch (e) {
+            return; // JSON 파싱 에러
+        }
+
         try {
             const response = await fetch('/api/admin/global-menus', {
                 method: 'POST',
diff --git a/resources/views/menus/global-edit.blade.php b/resources/views/menus/global-edit.blade.php
index 4603956b..115dba73 100644
--- a/resources/views/menus/global-edit.blade.php
+++ b/resources/views/menus/global-edit.blade.php
@@ -7,7 +7,10 @@
         <!-- 페이지 헤더 -->
         <div class="flex justify-between items-center mb-6">
             <div>
-                <h1 class="text-2xl font-bold text-gray-800">글로벌 메뉴 수정</h1>
+                <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
+                    <x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
+                    글로벌 메뉴 수정
+                </h1>
                 <p class="text-sm text-gray-500 mt-1">시스템 전체에서 사용되는 기본 메뉴를 수정합니다.</p>
             </div>
             <a href="{{ route('menus.global.index') }}" class="text-gray-600 hover:text-gray-800">
@@ -32,7 +35,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                         @foreach($parentMenus as $parent)
                             @if($parent->id != $menu->id)
                                 <option value="{{ $parent->id }}" {{ $menu->parent_id == $parent->id ? 'selected' : '' }}>
-                                    {{ $parent->name }}
+                                    {{ str_repeat('── ', $parent->depth ?? 0) }}{{ $parent->name }}
                                 </option>
                             @endif
                         @endforeach
@@ -61,14 +64,51 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                 </div>
 
                 <!-- 아이콘 -->
+                @php
+                    $currentIcon = old('icon', $menu->icon);
+                    $sampleIcons = [
+                        'home', 'folder', 'chart-bar', 'calendar', 'building',
+                        'users', 'user-group', 'menu', 'shield-check', 'key',
+                        'cog', 'beaker', 'code', 'document-text', 'clipboard-list',
+                        'cube', 'collection', 'tag', 'database', 'terminal',
+                        'server', 'adjustments', 'sparkles', 'lightning-bolt', 'puzzle', 'external-link',
+                    ];
+                @endphp
                 <div class="mb-4">
                     <label for="icon" class="block text-sm font-medium text-gray-700 mb-2">
                         아이콘
                     </label>
-                    <input type="text" name="icon" id="icon"
-                           value="{{ old('icon', $menu->icon) }}"
-                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
-                           placeholder="heroicon-o-home">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div id="icon-preview" class="w-12 h-12 flex items-center justify-center border border-gray-300 rounded-lg bg-gray-50 text-gray-600">
+                            @if($currentIcon && in_array($currentIcon, $sampleIcons))
+                                <x-sidebar.menu-icon :icon="$currentIcon" class="w-6 h-6" />
+                            @elseif($currentIcon)
+                                <span class="text-xs text-gray-400">{{ $currentIcon }}</span>
+                            @else
+                                <x-sidebar.menu-icon icon="menu" class="w-6 h-6" />
+                            @endif
+                        </div>
+                        <input type="text" name="icon" id="icon"
+                               value="{{ $currentIcon }}"
+                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                               placeholder="아래에서 선택하거나 직접 입력">
+                    </div>
+                    <!-- 아이콘 샘플 그리드 -->
+                    <div class="border border-gray-200 rounded-lg p-3 bg-gray-50">
+                        <p class="text-xs text-gray-500 mb-2">사용 가능한 아이콘 (클릭하여 선택)</p>
+                        <div class="grid grid-cols-6 sm:grid-cols-9 md:grid-cols-13 gap-1">
+                            @foreach($sampleIcons as $iconKey)
+                                <button type="button"
+                                        onclick="selectIcon('{{ $iconKey }}')"
+                                        class="icon-btn flex flex-col items-center gap-0.5 p-2 hover:bg-white hover:shadow-sm rounded-lg transition cursor-pointer border border-transparent hover:border-purple-300 group {{ $currentIcon === $iconKey ? 'bg-purple-50 border-purple-400' : '' }}"
+                                        data-icon="{{ $iconKey }}"
+                                        title="{{ $iconKey }}">
+                                    <x-sidebar.menu-icon :icon="$iconKey" class="w-5 h-5 text-gray-500 group-hover:text-purple-600" />
+                                    <span class="text-[9px] text-gray-400 group-hover:text-purple-600 truncate max-w-full leading-none">{{ $iconKey }}</span>
+                                </button>
+                            @endforeach
+                        </div>
+                    </div>
                 </div>
 
                 <!-- 정렬 순서 -->
@@ -125,6 +165,54 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
                            placeholder="https://example.com">
                 </div>
 
+                <!-- 확장 옵션 섹션 -->
+                @php
+                    $hasOptions = $menu->options && count($menu->options) > 0;
+                    $currentSection = $menu->getSection() ?? 'main';
+                    $currentMeta = $menu->getMeta();
+                    $currentMetaJson = $currentMeta ? json_encode($currentMeta, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : '';
+                @endphp
+                <div class="border-t border-gray-200 pt-4 mt-6 mb-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-sm font-semibold text-gray-700">
+                            확장 옵션
+                            @if($hasOptions)
+                                <span class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">{{ count($menu->options) }}</span>
+                            @endif
+                        </h3>
+                        <button type="button" onclick="toggleOptionsSection()" class="text-xs text-purple-600 hover:text-purple-800">
+                            <span id="options-toggle-text">접기</span>
+                        </button>
+                    </div>
+
+                    <div id="options-section" class="space-y-4">
+                        <!-- section -->
+                        <div>
+                            <label for="option_section" class="block text-sm font-medium text-gray-700 mb-1">
+                                section
+                            </label>
+                            <select name="option_section" id="option_section"
+                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                <option value="main" {{ $currentSection === 'main' ? 'selected' : '' }}>main (기본)</option>
+                                <option value="tools" {{ $currentSection === 'tools' ? 'selected' : '' }}>tools (도구)</option>
+                                <option value="labs" {{ $currentSection === 'labs' ? 'selected' : '' }}>labs (실험실)</option>
+                            </select>
+                            <p class="text-xs text-gray-400 mt-1">사이드바 영역 구분. main: 메인 메뉴, tools: 개발도구 영역, labs: R&D 실험실 영역</p>
+                        </div>
+
+                        <!-- meta (JSON) -->
+                        <div>
+                            <label for="option_meta" class="block text-sm font-medium text-gray-700 mb-1">
+                                meta <span class="text-xs text-gray-400">(JSON)</span>
+                            </label>
+                            <textarea name="option_meta" id="option_meta" rows="3"
+                                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono text-sm"
+                                      placeholder='{"tab": "S", "badge": "new"}'>{{ $currentMetaJson }}</textarea>
+                            <p class="text-xs text-gray-400 mt-1">추가 메타 데이터 (JSON 형식). 탭 구분, 뱃지 표시 등 커스텀 속성 저장</p>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- 버튼 그룹 -->
                 <div class="flex justify-end gap-4 mt-6">
                     <a href="{{ route('menus.global.index') }}"
@@ -143,6 +231,37 @@ class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transit
 
 @push('scripts')
 <script>
+    // 아이콘 선택
+    window.selectIcon = function(iconKey) {
+        document.getElementById('icon').value = iconKey;
+        updateIconPreview(iconKey);
+        // 선택 상태 표시
+        document.querySelectorAll('.icon-btn').forEach(btn => {
+            btn.classList.remove('bg-purple-50', 'border-purple-400');
+            if (btn.dataset.icon === iconKey) {
+                btn.classList.add('bg-purple-50', 'border-purple-400');
+            }
+        });
+    };
+
+    // 아이콘 미리보기 업데이트
+    window.updateIconPreview = function(iconKey) {
+        const preview = document.getElementById('icon-preview');
+        const iconBtn = document.querySelector(`.icon-btn[data-icon="${iconKey}"]`);
+        if (iconBtn) {
+            const svg = iconBtn.querySelector('svg');
+            if (svg) {
+                const clonedSvg = svg.cloneNode(true);
+                clonedSvg.classList.remove('w-5', 'h-5');
+                clonedSvg.classList.add('w-6', 'h-6');
+                preview.innerHTML = '';
+                preview.appendChild(clonedSvg);
+            }
+        } else if (iconKey) {
+            preview.innerHTML = `<span class="text-xs text-gray-400">${iconKey}</span>`;
+        }
+    };
+
     // 외부 링크 체크박스 토글
     document.getElementById('is_external').addEventListener('change', function() {
         const externalUrlGroup = document.getElementById('external-url-group');
@@ -153,6 +272,41 @@ class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transit
         }
     });
 
+    // 확장 옵션 섹션 토글
+    window.toggleOptionsSection = function() {
+        const section = document.getElementById('options-section');
+        const toggleText = document.getElementById('options-toggle-text');
+        if (section.classList.contains('hidden')) {
+            section.classList.remove('hidden');
+            toggleText.textContent = '접기';
+        } else {
+            section.classList.add('hidden');
+            toggleText.textContent = '펼치기';
+        }
+    };
+
+    // options 객체 생성
+    function buildOptionsObject() {
+        const options = {};
+
+        const section = document.getElementById('option_section').value;
+        if (section && section !== 'main') {
+            options.section = section;
+        }
+
+        const metaStr = document.getElementById('option_meta').value.trim();
+        if (metaStr) {
+            try {
+                options.meta = JSON.parse(metaStr);
+            } catch (e) {
+                showToast('meta 필드의 JSON 형식이 올바르지 않습니다.', 'error');
+                throw e;
+            }
+        }
+
+        return Object.keys(options).length > 0 ? options : null;
+    }
+
     // 폼 제출 처리
     document.getElementById('menuForm').addEventListener('submit', async function(e) {
         e.preventDefault();
@@ -160,6 +314,20 @@ class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transit
         const formData = new FormData(this);
         const data = Object.fromEntries(formData.entries());
 
+        // option_ 접두사 필드 제거
+        delete data.option_section;
+        delete data.option_meta;
+
+        // options 객체 추가
+        try {
+            const options = buildOptionsObject();
+            if (options) {
+                data.options = options;
+            }
+        } catch (e) {
+            return; // JSON 파싱 에러
+        }
+
         try {
             const response = await fetch('/api/admin/global-menus/{{ $menu->id }}', {
                 method: 'PUT',