diff --git a/src/components/interactive-docs/CodePanel.tsx b/src/components/interactive-docs/CodePanel.tsx
index bfbfa234f..70bb573f7 100644
--- a/src/components/interactive-docs/CodePanel.tsx
+++ b/src/components/interactive-docs/CodePanel.tsx
@@ -7,7 +7,7 @@ export function CodePanel() {
   return (
     <nav
       ref={ref!}
-      class="sticky top-40 grid grid-rows-[auto_1fr] h-[calc(100dvh-160px-8px)] gap-y-2 overflow-hidden rounded-xl bg-slate-8 px-2"
+      class="sticky top-42 grid grid-rows-[auto_1fr] h-[calc(100dvh-160px-8px)] gap-y-2 overflow-hidden rounded-xl bg-slate-8 px-2 md:top-40"
     >
       <CodePreview />
       <CodeRenderer />
diff --git a/src/layouts/docs/InteractiveDocs.tsx b/src/layouts/docs/InteractiveDocs.tsx
index ea9060960..9951f9433 100644
--- a/src/layouts/docs/InteractiveDocs.tsx
+++ b/src/layouts/docs/InteractiveDocs.tsx
@@ -21,13 +21,19 @@ export function InteractiveDocs(
   const isHybridSelected = createMemo(() => !Array.isArray(selectedLanguage()));
   return (
     <div class="grid grid-cols-[1fr_1.2fr] grid-rows-[auto_1fr] flex-1 gap-y-2">
-      <div class="sticky top-26 col-span-2 min-h-12 flex items-center gap-3 from-white bg-gradient-to-r px-6">
-        <div class="rounded-md text-xs text-slate-5 font-medium">
-          결제대행사
-        </div>
-        <PgSelect />
-        <div class="rounded-md text-xs text-slate-5 font-medium">결제수단</div>
-        <PayMethodSelect />
+      <div class="sticky top-55px col-span-2 min-h-12 flex flex-wrap items-center gap-3 from-white bg-gradient-to-r px-6 z-sticky-layout md:top-26">
+        <section class="flex flex-row items-center">
+          <div class="rounded-md text-xs text-slate-5 font-medium">
+            결제대행사
+          </div>
+          <PgSelect />
+        </section>
+        <section class="flex flex-row items-center">
+          <div class="rounded-md text-xs text-slate-5 font-medium">
+            결제수단
+          </div>
+          <PayMethodSelect />
+        </section>
         <LanguageSelect languages={["frontend", "hybrid"]} title="Frontend" />
         <Show when={isHybridSelected() === false}>
           <LanguageSelect languages={"backend"} title="Backend" />
diff --git a/uno.config.ts b/uno.config.ts
index fa4b04309..01807e4a0 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -14,6 +14,7 @@ const zIndex = {
   "left-sidebar": 8,
   "overlay-dim": 2,
   "selected-tab": 1,
+  "sticky-layout": 3,
 };
 
 export default defineConfig({