diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts
index e312ad75b2..78ba633070 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts
@@ -1,6 +1,7 @@
 import { PluginType } from "../constants";
 
 import { myPlugin } from "./custom/myPlugin";
+import { header } from "./ui/header";
 import { responsivePanel } from "./ui/responsivePanel";
 import { sidebar } from "./ui/sidebar";
 
@@ -21,6 +22,6 @@ export const presetPlugins: PresetPlugins = [
   {
     id: "ui",
     title: "UI",
-    plugins: [responsivePanel, sidebar]
+    plugins: [responsivePanel, sidebar, header]
   }
 ];
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/ui/header.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/ui/header.ts
index e69de29bb2..5796850d88 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/ui/header.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/ui/header.ts
@@ -0,0 +1,86 @@
+import { FileType, PluginType } from "../../constants";
+import { PRESET_PLUGIN_COMMON_STYLE } from "../common";
+
+const yamlFile: FileType = {
+  id: "ui-header-reearth-yml",
+  title: "reearth.yml",
+  sourceCode: `id: header-plugin
+name: Header
+version: 1.0.0
+extensions:
+  - id: header
+    type: widget
+    name: Header Widget
+    description: Header Widget
+    widgetLayout:
+      extended: true
+      defaultLocation:
+        zone: outer
+        section: center
+        area: top
+  `,
+  disableEdit: true,
+  disableDelete: true
+};
+
+const widgetFile: FileType = {
+  id: "ui-header-widget",
+  title: "header.js",
+  sourceCode: `reearth.ui.show(\`
+  ${PRESET_PLUGIN_COMMON_STYLE}
+    <style>
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 16px;
+        position: sticky;
+        top: 0;
+      }
+
+      .header-logo img {
+        height: 40px;
+        cursor: pointer;
+      }
+
+      .header-menu {
+        list-style: none;
+        display: flex;
+        gap: 15px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .header-menu li {
+        font-size: 14px;
+        color: #555;
+        cursor: pointer;
+        transition: color 0.3s ease;
+      }
+
+      .header-menu li:active {
+        color: #000;
+      }
+    </style>
+    <div id="wrapper">
+      <div class="header">
+        <div class="header-logo">
+        <p>Re:Earth</p>
+        </div>
+        <ul class="header-menu">
+          <li>Home</li>
+          <li>About</li>
+          <li>Services</li>
+          <li>Contact</li>
+          <li>FAQ</li>
+        </ul>
+      </div>
+    </div>
+  \`); `
+};
+
+export const header: PluginType = {
+  id: "header",
+  title: "Header",
+  files: [widgetFile, yamlFile]
+};
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/ui/sidebar.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/ui/sidebar.ts
index 132aae9e8e..a67527604e 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/ui/sidebar.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/ui/sidebar.ts
@@ -13,6 +13,7 @@ extensions:
     name: Sidebar Widget
     description: Sidebar Widget
     widgetLayout:
+      extended: true
       defaultLocation:
         zone: outer
         section: left
@@ -28,160 +29,180 @@ const widgetFile: FileType = {
   sourceCode: `reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
     <style>
-
-#toggleBtn {
-    position: relative;
-    top: 16px;
-    left: 10px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 24px;
-    color: #555;
-  }
-
-  #searchBar {
-    margin: 10px 0;
-    padding: 8px 12px;
-    width: calc(100% - 24px);
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
-    outline: none;
-  }
-
-  .menu-container {
-    flex-grow: 1;
-    padding: 0;
-    margin: 20px 0;
-    overflow-y: auto;
-  }
-
-  .menu {
-    list-style: none;
-    padding: 0;
-    margin: 20px 0;
-  }
-
-  .menu li {
-    margin: 8px 0;
-    padding: 8px 12px;
-    background: #f8f9fa;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .menu li:active {
-    background: #d6d6d6;
-  }
-
-
-  .menu li .menu-icon {
-    font-size: 14px;
-    color: #555;
-    margin-right: 10px;
-  }
-
-  .menu li .menu-title {
-    font-size: 14px;
-    color: #333;
-    flex-grow: 1;
-  }
-
-  .menu li .menu-dots {
-    font-size: 18px;
-    color: #999;
-  }
-
-  .hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-</style>
-
-<div id="wrapper">
-  <button id="toggleBtn">☰</button>
-  <h2 id="sidebarTitle">Sidebar</h2>
-  <input type="text" id="searchBar" placeholder="Search..." />
-  <div class="menu-container">
-    <ul class="menu">
-      <li>
-        <span class="menu-icon">🏠</span>
-        <span class="menu-title">Home</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">ℹ️</span>
-        <span class="menu-title">About</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">📞</span>
-        <span class="menu-title">Contact</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">❓</span>
-        <span class="menu-title">FAQ</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">💡</span>
-        <span class="menu-title">Help</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">⚙️</span>
-        <span class="menu-title">Settings</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">👤</span>
-        <span class="menu-title">Profile</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">📊</span>
-        <span class="menu-title">Dashboard</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">🔔</span>
-        <span class="menu-title">Notifications</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-      <li>
-        <span class="menu-icon">📄</span>
-        <span class="menu-title">Reports</span>
-        <span class="menu-dots">⋮</span>
-      </li>
-
-    </ul>
-  </div>
-</div>
-  <script>
- const toggleBtn = document.getElementById("toggleBtn");
-  const sidebarTitle = document.getElementById("sidebarTitle");
-
-  toggleBtn.addEventListener("click", () => {
-    const sidebar = document.querySelector("#wrapper");
-    const isCollapsed = sidebar.style.width === "60px";
-
-    // Collapse or expand the sidebar
-    sidebar.style.width = isCollapsed ? "250px" : "60px";
-
-    // Toggle visibility instead of display for title
-    sidebarTitle.classList.toggle("hidden", !isCollapsed);
-
-    // Hide or show menu titles
-    const titles = document.querySelectorAll(".menu-title");
-    titles.forEach((title) => {
-      title.style.display = isCollapsed ? "inline" : "none";
-    });
-  });
-  </script>
+      .content-wrapper {
+        background: #eee;
+        border-radius: 5px;
+        overflow: hidden;
+        height: calc(100vh - 20px);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .upside {
+        position: sticky;
+        top: 0;
+        left: 0;
+        background: #eee;
+        z-index: 10;
+        padding: 10px;
+      }
+
+      #toggleBtn {
+        position: relative;
+        top: 16px;
+        left: 10px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 24px;
+        color: #555;
+      }
+
+      #searchBar {
+        margin: 10px 0;
+        padding: 8px 12px;
+        width: calc(100% - 24px);
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 14px;
+        outline: none;
+      }
+
+      .menu-container {
+        flex-grow: 1;
+        overflow-y: auto;
+        margin-top: 10px;
+      }
+
+      .menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .menu li {
+        margin: 8px 0;
+        padding: 8px 12px;
+        background: #f8f9fa;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .menu li:active {
+        background: #d6d6d6;
+      }
+
+
+      .menu li .menu-icon {
+        font-size: 14px;
+        color: #555;
+        margin-right: 10px;
+      }
+
+      .menu li .menu-title {
+        font-size: 14px;
+        color: #333;
+        flex-grow: 1;
+      }
+
+      .menu li .menu-dots {
+        font-size: 18px;
+        color: #999;
+      }
+
+      .hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+    </style>
+
+    <div id="wrapper">
+      <div class="content-wrapper">
+        <div class="upside">
+          <button id="toggleBtn">☰</button>
+          <h2 id="sidebarTitle">Sidebar</h2>
+          <input type="text" id="searchBar" placeholder="Search..." />
+        </div>
+        <div class="menu-container">
+          <ul class="menu">
+            <li>
+              <span class="menu-icon">🏠</span>
+              <span class="menu-title">Home</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">ℹ️</span>
+              <span class="menu-title">About</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">📞</span>
+              <span class="menu-title">Contact</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">❓</span>
+              <span class="menu-title">FAQ</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">💡</span>
+              <span class="menu-title">Help</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">⚙️</span>
+              <span class="menu-title">Settings</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">👤</span>
+              <span class="menu-title">Profile</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">📊</span>
+              <span class="menu-title">Dashboard</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">🔔</span>
+              <span class="menu-title">Notifications</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+            <li>
+              <span class="menu-icon">📄</span>
+              <span class="menu-title">Reports</span>
+              <span class="menu-dots">⋮</span>
+            </li>
+
+          </ul>
+        </div>
+      </div>
+    </div>
+    <script>
+      const toggleBtn = document.getElementById("toggleBtn");
+        const sidebarTitle = document.getElementById("sidebarTitle");
+
+        toggleBtn.addEventListener("click", () => {
+        const sidebar = document.querySelector("#wrapper");
+        const isCollapsed = sidebar.style.width === "60px";
+
+        // Collapse or expand the sidebar
+        sidebar.style.width = isCollapsed ? "250px" : "60px";
+
+        // Toggle visibility instead of display for title
+        sidebarTitle.classList.toggle("hidden", !isCollapsed);
+
+        // Hide or show menu titles
+        const titles = document.querySelectorAll(".menu-title");
+        titles.forEach((title) => {
+            title.style.display = isCollapsed ? "inline" : "none";
+          });
+        });
+    </script>
   \`); `
 };