diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts
index 7bdc7824f..f0601c70e 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts
@@ -30,110 +30,12 @@ const widgetFile: FileType = {
 
   reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    #info-section {
-      position: sticky;
-      top: 0;
-      background: #eee;
-      text-align: left;
-    }
-
-    .camera-controls {
-      background-color: white;
-      border-radius: 5px;
-      padding: 18px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
-    .input-group label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: 600;
-    }
-
-    .info-expanded .camera-controls {
-      max-height: 250px;
-      overflow-y: auto;
-    }
-
-    .input-group input {
-      width: 100%;
-      padding: 8px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      box-sizing: border-box;
-    }
-
-    .button-group {
-      display: flex;
-      justify-content: center;
-      padding-top: 12px;
-      margin: 0;
-    }
-
-    button {
-      padding: 12px;
-      color: white;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-      font-weight: bold;
-    }
-
-    #apply-btn {
-      background-color: #2196F3;
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    #apply-btn:not(:disabled) {
-      opacity: 1;
-      cursor: pointer;
-    }
-
-    #apply-btn:not(:disabled):active {
-      background-color: #1976D2;
-    }
-
-    .status-message {
-      text-align: center;
-      color: #666;
-      height: 4px;
-      padding: 4px;
-    }
-
-    #info-section {
-      margin: 8px 0;
-      text-align: left;
-    }
-
-    #info-toggle {
-      padding: 6px 8px;
-      background: #4CAF50;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-
-    #info-content {
-      background: #f9f9f9;
-      padding: 10px;
-      border-radius: 5px;
-      margin-top: 8px;
-      font-size: 12px;
-      line-height: 1.3;
-    }
-  </style>
-
-  <div id="wrapper">
-    <div class="scrollable-content">
-      <div id="info-section">
-        <button id="info-toggle">Show Info</button>
-        <div id="info-content" style="display: none;">
+  <div class="primary-background flex-column rounded-sm gap-8 p-8">
+        <div>
+          <p class="text-lg font-bold text-center">Camera Position</p>
+          <button id="info-toggle" class="btn-neutral w-10 h-4">Show Info</button>
+        </div>
+        <div class="tertiary-background hidden rounded-sm text-sm p-8" id="info-content">
           <strong>How to Use the Plugin</strong><br><br>
           1. <strong>Automatic Tracking</strong><br>
           • Move the camera around the globe<br>
@@ -143,40 +45,38 @@ const widgetFile: FileType = {
           • Click "Apply Position"<br>
           • Camera will instantly move to the specified location.
         </div>
-      </div>
 
-      <div class="camera-controls">
-        <div class="input-group">
-          <label for="lat">Latitude</label>
+      <div class="secondary-background flex-column rounded-sm p-16 gap-8">
+        <div class="flex-column gap-4">
+          <label class="font-bold" for="lat">Latitude</label>
           <input type="number" id="lat" step="0.0001">
         </div>
-        <div class="input-group">
-          <label for="lng">Longitude</label>
+        <div class="flex-column gap-4">
+          <label class="font-bold" for="lng">Longitude</label>
           <input type="number" id="lng" step="0.0001">
         </div>
-        <div class="input-group">
-          <label for="height">Height (meters)</label>
+        <div class="flex-column gap-4">
+          <label class="font-bold" for="height">Height (meters)</label>
           <input type="number" id="height" step="1">
         </div>
-        <div class="input-group">
-          <label for="heading">Heading (radians)</label>
+        <div class="flex-column gap-4">
+          <label class="font-bold" for="heading">Heading (radians)</label>
           <input type="number" id="heading" step="0.1">
         </div>
-        <div class="input-group">
-          <label for="pitch">Pitch (radians)</label>
+        <div class="flex-column gap-4">
+          <label class="font-bold" for="pitch">Pitch (radians)</label>
           <input type="number" id="pitch" step="0.1">
         </div>
-        <div class="input-group">
-          <label for="roll">Roll (radians)</label>
+        <div class="flex-column gap-4">
+          <label class="font-bold" for="roll">Roll (radians)</label>
           <input type="number" id="roll" step="0.1">
         </div>
 
-        <div class="button-group">
-          <button id="apply-btn" disabled>Apply Position</button>
+        <div class="display-flex justify-center">
+          <button class="btn-primary w-14 h-5" id="apply-btn" disabled>Apply Position</button>
         </div>
-        <div id="status-message" class="status-message"></div>
+        <div id="status-message" class="text-secondary"></div>
       </div>
-    </div>
   </div>
 
   <script>
@@ -214,7 +114,7 @@ const widgetFile: FileType = {
   document.getElementById('info-toggle').addEventListener('click', () => {
     const infoContent = document.getElementById('info-content');
     const wrapper = document.getElementById('wrapper');
-    const isHidden = infoContent.style.display === 'none';
+    const isHidden = infoContent.style.display === 'none' || !infoContent.style.display;
 
     infoContent.style.display = isHidden ? 'block' : 'none';
     wrapper.classList.toggle('info-expanded', isHidden);
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts
index c101f6006..17b6e0125 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts
@@ -26,34 +26,10 @@ const widgetFile: FileType = {
 
 reearth.ui.show(\`
 ${PRESET_PLUGIN_COMMON_STYLE}
-<style>
-#rotateBtn {
-  border: 1.5px solid #dcdcdc;
-  padding: 0;           
-  border-radius: 5px;
-  background: #ffffff;
-  color: #000000;
-  cursor: pointer;
-  width: 200px;
-  height: 40px;           
-  font-size: 16px;      
-}
-#rotateBtn:active {
-  background: #dcdcdc;
-}
-#button-container {
-  display: flex;  
-  justify-content: center;                
-}
-</style>
-
-<div id="wrapper">
-  <h3>Rotate Camera Angle</h3>
-    <div id= "button-container">
-      <button id="rotateBtn">Click here</button>
-    </div>
+<div class="primary-background text-center p-16 rounded-sm">
+  <p class="text-lg font-bold">Rotate Camera Angle</p>
+      <button class="btn-neutral w-14 h-4" id="rotateBtn">Click here</button>
 </div>
-
 <script>
 let rotating = false;
 let intervalId;
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts
index 97e8a9b1f..dd8e3f977 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts
@@ -28,36 +28,13 @@ const widgetFile: FileType = {
 // ================================
 reearth.ui.show(\`
 ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    .zoomBtn {
-      display: flex;  
-      align-items: center;    
-      justify-content: center;
-      padding: 8px;
-      border-radius: 4px;
-      border: none;
-      background: #ffffff;
-      color: #000000;
-      cursor: pointer;
-      width: 90px;
-      height: 40px;
-    }
-    .zoomBtn:active {
-      background: #dcdcdc;
-    }
-    .zoomBtn img {
-    display: block;
-    width: 22px;
-    height: 22px;
-    }
-  </style>
-  <div id="wrapper">
-    <h3>Zoom Level</h3>
-    <div class="flex-center">
-      <button class="zoomBtn" id="zoomIn">
+  <div class="primary-background text-center justify-center p-16 rounded-sm">
+    <p class="text-lg font-bold">Zoom Level</p>
+    <div class="flex-center gap-8">
+      <button class="display-flex align-center justify-center btn btn-neutral w-10 h-5" id="zoomIn">
         <img src="https://reearth.github.io/visualizer-plugin-sample-data/public/image/plus.svg" alt="Zoom In" />
       </button>
-      <button class="zoomBtn" id="zoomOut">
+      <button class="display-flex align-center justify-center btn btn-neutral w-10 h-5" id="zoomOut">
         <img src="https://reearth.github.io/visualizer-plugin-sample-data/public/image/minus.svg" alt="Zoom Out" />
       </button>
     </div>
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/common.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/common.ts
index 755cdb140..8a6aca6dd 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/common.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/common.ts
@@ -1,10 +1,7 @@
 export const PRESET_PLUGIN_COMMON_STYLE = `<style>
+/* Plugin Playground Presets Generic Styling */
 
-  /* Plugin Playground Presets Generic Styling */
-
-/* Base & Typography */
-
-* {
+ * {
   box-sizing: border-box;
 }
 
@@ -18,54 +15,26 @@ html {
   padding: 0;
 }
 
-h2,
-h3 {
-  text-align: center;
-  margin: 0 0 12px 0;
-}
-
-h2 {
-  font-size: 24px;
-}
-
-h3 {
-  font-size: 20px;
-}
-
-/* Background Colors */
-.primary-background {
-  background-color: #ffffff;
-}
-
 /* Buttons */
 button {
-  display: inline-block;
-  padding: 8px 16px;
+  border: none;
   border-radius: 4px;
   cursor: pointer;
-  text-align: center;
-  border: none;
+}
+
+button:active {
+  background: #dcdcdc;
 }
 
 .btn-primary {
   background-color: #007bff;
-  color: white;
+  color: #ffffff;
 }
 
 .btn-primary:active {
   background-color: #0056b3;
 }
 
-.btn-secondary {
-  background-color: transparent;
-  color: #007bff;
-  border: 1px solid #007bff;
-}
-
-.btn-secondary:active {
-  background-color: #e6f0ff;
-}
-
 .btn-danger {
   background-color: #d32f2f;
   color: white;
@@ -85,23 +54,18 @@ button {
   background-color: #e6e6e6;
 }
 
-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+.btn-success {
+  background-color: #4caf50;
+  color: #ffffff;
 }
 
-/* Icon */
-.icon-btn {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
+.btn-success:active {
+  background-color: #388e3c;
 }
 
-/* Button layout */
-.button-container {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 /* Form Elements */
@@ -139,44 +103,19 @@ li {
   border: 1px solid #cccccc;
 }
 
-/* Small Text Utility */
-.small-text {
-  font-size: 12px;
-  color: #666666;
-}
-
-/* Info Sections */
-.info-toggle {
-  padding: 6px 12px;
-  background: #4caf50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.info-content {
-  background: #f9f9f9;
-  padding: 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 1.4;
+/* Layout */
+.display-flex {
+  display: flex;
 }
 
-/* Layout */
-#wrapper {
-  background: #f5f5f5;
-  border-radius: 4px;
-  padding: 16px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.display-grid {
+  display: grid;
 }
 
 .flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
 }
 
 .flex-between {
@@ -189,7 +128,31 @@ li {
 .flex-column {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+/* Background Colors */
+.primary-background {
+  background: #eeeeee;
+}
+
+.secondary-background {
+  background: #ffffff;
+}
+
+.tertiary-background {
+  background: #f9f9f9;
+}
+
+.quaternary-background {
+  background: #0000000d;
 }
 
 /* Utility Classes */
@@ -201,45 +164,215 @@ li {
   display: none;
 }
 
-.invisible {
-  visibility: hidden;
-  opacity: 0;
-}
-
 /* Spacing Utilities */
-.mt-8 {
-  margin-top: 8px;
-}
-.mt-16 {
-  margin-top: 16px;
+.m-0 {
+  margin: 0;
 }
+
 .mb-8 {
   margin-bottom: 8px;
 }
-.mb-16 {
-  margin-bottom: 16px;
-}
-.my-8 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-.mx-8 {
-  margin-left: 8px;
-  margin-right: 8px;
+
+.p-4 {
+  padding: 4px;
 }
+
 .p-8 {
   padding: 8px;
 }
+
 .p-16 {
   padding: 16px;
 }
+
 .px-8 {
   padding-left: 8px;
   padding-right: 8px;
 }
-.py-8 {
-  padding-top: 8px;
-  padding-bottom: 8px;
+
+/* Gap */
+.gap-4 {
+  gap: 4px;
 }
+
+.gap-8 {
+  gap: 8px;
+}
+
+.gap-16 {
+  gap: 16px;
+}
+
+/* Box Shadow */
+.primary-shadow {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Border Radius */
+.rounded-sm {
+  border-radius: 4px;
+}
+
+/* Font Family */
+.font-monospace {
+  font-family: monospace;
+}
+
+/* Font Size */
+.text-sm {
+  font-size: 12px;
+}
+
+.text-md {
+  font-size: 14px;
+}
+
+.text-lg {
+  font-size: 16px;
+}
+
+/* Text Color */
+.text-primary {
+  color: #007bff;
+}
+
+.text-secondary {
+  color: #666666;
+}
+
+/* Text Weight */
+.font-bold {
+  font-weight: bold;
+}
+
+/* Width */
+.w-full {
+  width: 100%;
+}
+
+.w-8 {
+  width: 64px;
+}
+
+.w-10 {
+  width: 80px;
+}
+
+.w-14 {
+  width: 112px;
+}
+
+.w-16 {
+  width: 128px;
+}
+
+/* Height */
+.h-full {
+  height: 100%;
+}
+
+.h-4 {
+  height: 32px;
+}
+
+.h-5 {
+  height: 40px;
+}
+
+.h-6 {
+  height: 48px;
+}
+
+/* Custom */
+.radio-option {
+  grid-template-columns: auto 80px 1fr;
+  align-items: baseline;
+}
+
+/* Slider */
+ .toggle {
+   position: relative;
+   display: inline-block;
+   width: 60px;
+   height: 34px;
+   }
+   .toggle input {
+   opacity: 0;
+   width: 0;
+   height: 0;
+   }
+   .slider {
+   position: absolute;
+   cursor: pointer;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background-color: #ccc;
+   transition: .4s;
+   border-radius: 34px;
+   }
+   .slider:before {
+   position: absolute;
+   content: "";
+   height: 26px;
+   width: 26px;
+   left: 4px;
+   bottom: 4px;
+   background-color: white;
+   transition: .4s;
+   border-radius: 50%;
+   }
+   input:checked + .slider {
+   background-color: #2196F3;
+   }
+   input:focus + .slider {
+   box-shadow: 0 0 1px #2196F3;
+   }
+   input:checked + .slider:before {
+   transform: translateX(26px);
+   }
+
+  .divider {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin: 16px 0;
+  }
+
+  /* Theme Selector */
+    .theme-content {
+    transition: all 0.3s ease;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .theme-content.light {
+    color: #333333;
+  }
+
+  .theme-content.dark {
+    color: #ffffff;
+    background: #333333;
+  }
+  
+  /* Storage Display */ 
+   .storage-display {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 12px;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .storage-op {
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.1);
+    font-size: 13px;
+  }
+
+  #storageOps {
+    max-height: 200px;
+    overflow-y: auto;
+  }
   </style>
 `;
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts
index 0c68c5e6b..e16d31731 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts
@@ -22,104 +22,26 @@ const widgetFile: FileType = {
   title: "theme-selector.js",
   sourceCode: `reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-  html{
-    width: 300px;
-  }
-  
-  .theme-content {
-    transition: all 0.3s ease;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  .theme-content.light {
-    color: #333333;
-  }
-
-  .theme-content.dark {
-    color: #ffffff;
-    background: #333333;
-  }
-
-  .theme-toggle {
-    background: #4CAF50;
-    color: white;
-    border: none;
-    padding: 8px 16px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 16px;
-  }
-
-  .theme-toggle:hover {
-    background: #45a049;
-  }
-
-  .storage-display {
-    background: rgba(255, 255, 255, 0.1);
-    padding: 12px;
-    border-radius: 4px;
-    margin-top: 16px;
-    font-family: monospace;
-  }
-
-  .storage-display h4 {
-    margin: 0 0 8px 0;
-    font-size: 14px;
-  }
-
-  .storage-op {
-    margin: 8px 0;
-    padding: 8px;
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    font-size: 13px;
-  }
-
-  #storageOps {
-    max-height: 200px;
-    overflow-y: auto;
-    margin-bottom: 16px;
-  }
-
-  .divider {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin: 16px 0;
-  }
-
-  #currentStorage {
-    background: rgba(0, 0, 0, 0.05);
-    padding: 8px;
-    border-radius: 4px;
-    margin-bottom: 16px;
-  }
-
-  .storage-actions {
-    margin-top: 16px;
-  }
-  </style>
-
-  <div id="wrapper">
-    <h3>Theme Selector - Client Storage Demo</h3>
+  <div class="primary-background p-16 rounded-sm">
+    <p class="text-lg font-bold text-center m-0">Theme Selector - Client Storage Demo</p>
 
     <div class="theme-content light">
-      <div class="flex-center">
-        <button id="themeToggle" class="theme-toggle">Switch to Dark Theme</button>
+      <div class="flex-center p-16">
+        <button id="themeToggle" class="btn-neutral p-8">Switch to Dark Theme</button>
       </div>
 
       <div class="divider"></div>
 
       <div class="storage-display" id="storageDisplay">
-        <h4>Current Storage State:</h4>
-        <div id="currentStorage">Loading...</div>
+        <p class="text-md font-bold font-monospace">Current Storage State:</p>
+        <div id="currentStorage" class="quaternary-background text-sm p-8 rounded-sm">Loading...</div>
 
-        <h4>Storage Operations Log:</h4>
+        <p class="text-md font-bold font-monospace">Storage Operations Log:</p>
         <div id="storageOps"></div>
 
-        <div class="flex-center storage-actions">
-          <button id="viewKeys" class="theme-toggle">View All Keys</button>
-          <button id="clearStorage" class="theme-toggle">Clear Storage</button>
+        <div class="flex-center gap-8">
+          <button id="viewKeys" class="btn-neutral p-8">View All Keys</button>
+          <button id="clearStorage" class="btn-primary p-8">Clear Storage</button>
         </div>
       </div>
     </div>
@@ -141,11 +63,22 @@ const widgetFile: FileType = {
     }
 
     function updateThemeUI(isDark) {
-      themeContent.className = 'theme-content ' + (isDark ? "dark" : "light");
-      storageDisplay.className = "storage-display " + (isDark ? "dark" : "light");
+      if (isDark) {
+        themeContent.classList.remove("light");
+        themeContent.classList.add("dark");
+        storageDisplay.classList.remove("light");
+        storageDisplay.classList.add("dark");
+        toggleBtn.textContent = "Switch to Light Theme";
+      } else {
+        themeContent.classList.remove("dark");
+        themeContent.classList.add("light");
+        storageDisplay.classList.remove("dark");
+        storageDisplay.classList.add("light");
+        toggleBtn.textContent = "Switch to Dark Theme";
+      }
+        
       const ops = document.querySelectorAll('.storage-op');
       ops.forEach(op => op.className = 'storage-op ' + (isDark ? "dark" : "light"));
-      toggleBtn.textContent = isDark ? "Switch to Light Theme" : "Switch to Dark Theme";
     }
 
     // Initialize theme from storage
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts
index ac5c8816c..0810ae6ec 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts
@@ -64,10 +64,10 @@ const widgetFile: FileType = {
   title: "extension-property-widget.js",
   sourceCode: `reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <div id="wrapper">
-    <h2>Extension Property</h2>
-    <h3 style="text-align:center">Input on Extension Settings and execute code again.</h3>
-    <h3 style="text-align:center" id="text"></h3>
+  <div class="primary-background p-16 rounded-sm">
+    <p class="text-lg font-bold text-center">Extension Property</p>
+    <p class="text-md text-secondary text-center">Input on Extension Settings and execute code again.</p>
+    <p class="text-md text-center" id="text"></p>
   </div>
 
   <script>
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts
index 6f63c21b3..268dcc602 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts
@@ -26,56 +26,15 @@ extensions:
 const extension1SourceCode = `
 reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    input {
-      padding: 8px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      flex-grow: 1;
-    }
-
-    button {
-      padding: 8px 16px;
-      background: #4CAF50;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-
-    button:hover {
-      background: #45a049;
-    }
-
-    .received {
-      background: white;
-      padding: 10px;
-      border-radius: 4px;
-      margin-top: 10px;
-    }
-
-    .messages-container {
-      min-height: 50px;
-      margin-top: 10px;
-    }
-
-    .message {
-      padding: 8px;
-      margin: 4px 0;
-      background: #f8f9fa;
-      border-radius: 4px;
-    }
-  </style>
-
-   <div id="wrapper">
-    <h2>Extension 1</h2>
+  <div class="primary-background p-16 rounded-sm">
+    <p class="text-lg font-bold">Extension 1</p>
     <div class="flex-center">
       <input id="messageInput" type="text" placeholder="Enter message"/>
-      <button id="sendButton">Send</button>
+      <button id="sendButton" class="btn-primary p-8">Send</button>
     </div>
-    <h3>Received Messages</h3>
-    <div class="received">
-      <div id="messagesContainer" class="messages-container"></div>
+    <p class="text-lg font-bold">Received Messages</p>
+    <div class="secondary-background p-4 rounded-sm">
+      <div id="messagesContainer" class="h-6"></div>
     </div>
   </div>
 
@@ -131,56 +90,15 @@ reearth.extension.on("extensionMessage", msg => {
 const extension2SourceCode = `
 reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    input {
-      padding: 8px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      flex-grow: 1;
-    }
-
-    button {
-      padding: 8px 16px;
-      background: #4CAF50;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-
-    button:hover {
-      background: #45a049;
-    }
-
-    .received {
-      background: white;
-      padding: 10px;
-      border-radius: 4px;
-      margin-top: 10px;
-    }
-
-    .messages-container {
-      min-height: 50px;
-      margin-top: 10px;
-    }
-
-    .message {
-      padding: 8px;
-      margin: 4px 0;
-      background: #f8f9fa;
-      border-radius: 4px;
-    }
-  </style>
-
-    <div id="wrapper">
-    <h2>Extension 2</h2>
+  <div class="primary-background p-16 rounded-sm">
+    <p class="text-lg font-bold">Extension 2</p>
     <div class="flex-center">
       <input id="messageInput" type="text" placeholder="Enter message"/>
-      <button id="sendButton">Send</button>
+      <button id="sendButton" class="btn-primary p-8">Send</button>
     </div>
-    <h3>Received Messages</h3>
-    <div class="received">
-      <div id="messagesContainer" class="messages-container"></div>
+    <p class="text-lg font-bold">Received Messages</p>
+    <div class="secondary-background p-4 rounded-sm">
+      <div id="messagesContainer" class="secondary-background rounded-sm h-6"></div>
     </div>
   </div>
 
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts
index 53a510d15..0fdd59e56 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts
@@ -27,75 +27,24 @@ const widgetFile: FileType = {
   title: "messenger-between-extension-and-visualizer.js",
   sourceCode: `reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-    <style>
-      .coordinates {
-        background: #fff;
-        padding: 15px;
-        border-radius: 5px;
-        margin: 10px 0;
-      }
-
-      .coordinate-value {
-        font-family: monospace;
-        color: #444;
-      }
-
-      button {
-        padding: 8px 16px;
-        background: #4CAF50;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-
-      button:hover {
-        background: #45a049;
-      }
-
-      #info-section {
-        margin: 20px 0;
-        text-align: left;
-      }
-
-      #info-toggle {
-        padding: 6px 12px;  /* Smaller button */
-        background: #4CAF50;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;    /* Smaller text */
-      }
-
-      #info-content {
-        background: #f9f9f9;  /* Light gray background */
-        padding: 10px;
-        border-radius: 5px;
-        margin-top: 15px;    /* Space between button and content */
-        font-size: 14px;
-        line-height: 1.4;
-      }
-    </style>
-
-    <div id="wrapper">
-      <h2>Coordinate Viewer</h2>
-      <div id="info-section">
-        <button id="info-toggle">Show Info</button>
-        <div id="info-content" style="display: none;">
+    <div class="primary-background p-16 rounded-sm flex-column gap-8">
+        <div>
+           <p class="text-lg font-bold text-center">Coordinate Viewer</p>
+           <button id="info-toggle" class="btn-neutral p-8">Show Info</button>
+        </div>
+        <div id="info-content" class="tertiary-background hidden p-8 rounded-sm">
           <strong>How to use this plugin:</strong><br>
           1. Click anywhere on the map to see its coordinates<br>
           2. Click the "Fly to Position" button to move the camera to that location<br>
           3. Coordinates update dynamically when you click anywhere on the map<br><br>
         </div>
-      </div>
-      <div class="coordinates">
-        <p>Latitude: <span id="lat" class="coordinate-value">-</span>°</p>
-        <p>Longitude: <span id="lng" class="coordinate-value">-</span>°</p>
-      </div>
-      <div class="flex-center">
-        <button id="flyToButton">Fly to Position</button>
-      </div>
+        <div class="secondary-background p-16 rounded-sm">
+          <p>Latitude: <span id="lat" class="font-monospace text-md">-</span>°</p>
+          <p>Longitude: <span id="lng" class="font-monospace text-md">-</span>°</p>
+        </div>
+        <div class="flex-center">
+          <button id="flyToButton" class="btn-primary p-8">Fly to Position</button>
+        </div>
     </div>
 
     <script>
@@ -126,7 +75,7 @@ const widgetFile: FileType = {
       // Toggle info section
       document.getElementById("info-toggle").addEventListener("click", () => {
         const infoContent = document.getElementById("info-content");
-        const isHidden = infoContent.style.display === "none";
+        const isHidden = infoContent.style.display === "none" || !infoContent.style.display;
         infoContent.style.display = isHidden ? "block" : "none";
         document.getElementById("info-toggle").textContent = isHidden ? "Hide Info" : "Show Info";
       });
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts
index c06e8db4d..94104d1b2 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts
@@ -27,50 +27,24 @@ const widgetFile: FileType = {
 // Define the plug-in UI //
 reearth.ui.show(\`
 ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    html {
-    width: 500px;
-  }
-    #wrapper{
-     width: 350px;
-    }
-    button {
-      padding: 4px 8px;
-      border: 1px solid black;
-      border-radius: 4px;
-      cursor: pointer;
-      background-color: white;
-      transition: background-color 0.3s ease;
-    }
-    .active {
-      background: #4CAF50;
-      color: white;;
-      border: none;
-      color: white;
-    }
-    .button-container {
-      display: flex;
-      gap: 10px;
-    }
-  </style>
-  <div id="wrapper">
-    <h2>Filter Cities based on Population:</h2>
-    <div class="button-container">
-      <button id="allBtn">Show all</button>
-      <button id="belowBtn">Population below 20000</button>
-      <button id="aboveBtn">Population above 20000</button>
+  <div class="primary-background p-16 rounded-sm">
+    <p class="text-lg font-bold">Filter Cities based on Population:</p>
+    <div class="flex-column justify-center gap-8">
+      <button class="btn-neutral btn-success p-8" id="allBtn">Show all</button>
+      <button class="btn-neutral p-8" id="belowBtn">Population below 20000</button>
+      <button class="btn-neutral p-8" id="aboveBtn">Population above 20000</button>
     </div>
   </div>
 
   <script>
-    const buttons = document.querySelectorAll(".button-container button");
+    const buttons = document.querySelectorAll("button");
 
     function setActiveButton(activeId) {
       buttons.forEach(btn => {
         if (btn.id === activeId) {
-          btn.classList.add("active");
+          btn.classList.add("btn-success");
         } else {
-          btn.classList.remove("active");
+          btn.classList.remove("btn-success");
         }
       });
     }
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts
index 5f12f150c..aed9e0829 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts
@@ -27,52 +27,12 @@ const widgetFile: FileType = {
 // Define the plug-in UI //
 reearth.ui.show(\`
 ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    .coolBtn {
-      padding: 8px;
-      border-radius: 4px;
-      border: none;
-      background: #f0ffff;
-      color: #000000;
-      cursor: pointer;
-      width: 200px;
-      height: 40px;
-      font-size: 16px 
-    }
-    .scaleBtn:active {
-      background: #dcdcdc;
-    }
-    .warmBtn {
-      padding: 8px;
-      border-radius: 4px;
-      border: none;
-      background:#ffe4e1;
-      color: #000000;
-      cursor: pointer;
-      width: 200px;
-      height: 40px;
-      font-size: 16px 
-    }
-    .scaleBtn:active {
-      background: #dcdcdc;
-    }
-
-    .button-container {
-    display: flex;        
-    gap: 8px;           
-    }
-
-    p {
-      text-align: center; 
-    }
-
-  </style>
-  <div id="wrapper">
-    <h2>Color by Height</h2>
-    <p>Choose your preferred color scheme<p>
-    <div class="button-container">
-      <button class = "coolBtn" id="cool">Cool Style</button>
-      <button class = "warmBtn" id="warm">Warm Style</button>
+  <div class="primary-background p-16 rounded-sm">
+    <p class="text-lg font-bold text-center">Color by Height</p>
+    <p class="text-md text-secondary text-center">Choose your preferred color scheme<p>
+    <div class="display-flex justify-center gap-8">
+      <button class="btn-primary w-14 h-5" id="cool">Cool Style</button>
+      <button class="btn-neutral w-14 h-5" id="warm">Warm Style</button>
     </div>
   </div>
   
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts
index c9ee79bbf..de991427b 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/overrideLayerData.ts
@@ -1,4 +1,5 @@
 import { FileType, PluginType } from "../../constants";
+import { PRESET_PLUGIN_COMMON_STYLE } from "../common";
 
 const yamlFile: FileType = {
   id: "override-layer-data-reearth-yml",
@@ -23,25 +24,11 @@ const widgetFile: FileType = {
 
 // The following describes the style and functionality of the UI //
 reearth.ui.show(\`
-<style>
-  #scaleBtn {
-    padding: 8px;
-    border-radius: 4px;
-    border: none;
-    background: #fffafa;
-    color: #000000;
-    cursor: pointer;
-    width: 200px;
-    height: 60px;
-    font-size: 16px 
-  }
-  #scaleBtn:active {
-  background: #dcdcdc;
-  }
-  
-</style>
-<button id="scaleBtn">Scale Polygon</button>
-
+ ${PRESET_PLUGIN_COMMON_STYLE}
+  <div class="primary-background flex-column align-center p-16 rounded-sm">
+    <p class="text-lg font-bold text-center">Click the button below to enlarge the polygon.</p>
+    <button class="btn-neutral w-10 h-4" id="scaleBtn">Enlarge</button>
+  </div>
 <script>
   // define initial polygon geometory
   let corners = [
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts
index 639a5e6c4..475543a96 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/showSelectedFeaturesInformation.ts
@@ -23,38 +23,16 @@ const widgetFile: FileType = {
   sourceCode: `// Configure the UI side of the Plug-in
   reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-  .displayId {
-      display: block;             
-      width: 100%;               
-      min-height: 52px;          
-      background-color: #FAFAFA;
-      border-radius: 4px;
-      padding: 8px;
-      word-wrap: break-word;      
-      box-sizing: border-box;  
-    }
-  .displayHeight {
-    display: flex;              
-    align-items: center;         
-    width: 100%;
-    min-height: 40px;
-    background-color: #FAFAFA;
-    border-radius: 4px;
-    padding: 8px;
-    word-wrap: break-word;
-    box-sizing: border-box; 
-  }
-  .title{
-      margin-bottom: 8px;     
-    }
-  </style>
-    <div id="wrapper">
-      <h3>Click to show building property</h3>
-      <p class = "title"> Building ID </p>
-      <span id="gml_id" class="displayId"></span>
-      <p class = "title"> Building Height </p>
-      <span id="building_height" class="displayHeight"</span>
+    <div class="primary-background flex-column p-16 rounded-sm">
+      <p class="text-lg font-bold text-center">Click a building to view it's properties</p>
+    <div>
+      <p class="text-sm">Building ID</p>
+      <span id="gml_id" class="secondary-background h-5 p-8 rounded-sm text-sm display-flex align-center"></span>
+    </div>
+    <div>
+        <p class="text-sm">Building Height</p>
+        <span id="building_height" class="secondary-background h-5 p-8 rounded-sm text-sm display-flex align-center"</span>
+     </div>
     </div>
   <script>
   // Receive messages and display the building id and height
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts
index aa649fa37..7d384eb85 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/timeline/playbackControl.ts
@@ -22,109 +22,19 @@ const widgetFile: FileType = {
   title: "playback-control.js",
   sourceCode: `reearth.ui.show(\`
   ${PRESET_PLUGIN_COMMON_STYLE}
-  <style>
-    .timeline-controls {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 16px;
-    }
-
-    .control-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .btn {
-      padding: 6px 16px;
-      border: none;
-      border-radius: 4px;
-      background: #2196F3;
-      color: white;
-      cursor: pointer;
-    }
-
-    .time-display-container {
-      background: #fff;
-      border-radius: 4px;
-      padding: 8px;
-      text-align: center;
-    }
-
-    .time-display {
-      font-family: monospace;
-      font-size: 14px;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-
-    .date-display {
-      color: #666;
-      font-size: 12px;
-    }
-
-    .time-value {
-      font-size: 16px;
-      font-weight: bold;
-      color: #333;
-    }
-
-    .speed-control {
-      display: flex;
-      align-items: center;
-    }
-
-    select {
-      padding: 4px;
-      border-radius: 4px;
-      border: 1px solid #ccc;
-      background: white;
-      font-size: 12px;
-    }
-
-    .radio-group {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      font-size: 12px;
-      padding-top: 8px;
-    }
-
-    .radio-option {
-      display: grid;
-      grid-template-columns: auto 80px 1fr;
-      align-items: baseline;
-      gap: 4px;
-    }
-
-    .radio-description {
-      color: #666;
-      font-size: 11px;
-    }
-
-    .control-label {
-      font-size: 12px;
-      font-weight: bold;
-    }
-  </style>
-
-  <div id="wrapper">
-    <div class="timeline-controls">
-      <div class="time-display-container">
-        <div class="time-display">
-          <div class="date-display" id="currentDate"></div>
-          <div class="time-value" id="currentTime"></div>
+  <div class="secondary-background primary-shadow p-16 rounded-sm">
+    <div class="flex-column gap-8">
+      <div class="primary-background p-8 rounded-sm">
+        <div class="flex-column font-monospace">
+          <div class="text-sm text-secondary" id="currentDate"></div>
+          <div class="font-bold" id="currentTime"></div>
         </div>
       </div>
 
-      <div class="control-row">
-        <button id="playPauseBtn" class="btn">Play</button>
-        <div class="speed-control">
-          <select id="speedSelect">
+      <div class="display-flex gap-8">
+        <button id="playPauseBtn" class="btn-primary w-8 h-4">Play</button>
+        <div class="display-flex">
+          <select class="p-4" id="speedSelect">
             <option value="1">1x</option>
             <option value="2">2x</option>
             <option value="5">5x</option>
@@ -138,30 +48,28 @@ const widgetFile: FileType = {
           </select>
         </div>
       </div>
-
-      <div class="control-group">
-        <div class="control-label">Range Type</div>
-        <div class="radio-group">
-          <div class="radio-option">
+      <div>
+        <div class="text-sm font-bold">Range Type</div>
+        <div class="flex-column text-sm">
+          <div class="display-grid radio-option gap-4">
             <input type="radio" id="unbounded" name="rangeType" value="unbounded" checked>
             <label for="unbounded">Unbounded</label>
-            <span class="radio-description"> - Time continues indefinitely in both directions.</span>
+            <span class="text-sm text-secondary"> - Time continues indefinitely in both directions.</span>
           </div>
-          <div class="radio-option">
+          <div class="display-grid radio-option gap-4">
             <input type="radio" id="clamped" name="rangeType" value="clamped">
             <label for="clamped">Clamped</label>
-            <span class="radio-description"> - Stops at the start/end of the time range.</span>
+            <span class="text-sm text-secondary"> - Stops at the start/end of the time range.</span>
           </div>
-          <div class="radio-option">
+          <div class="display-grid radio-option gap-4">
             <input type="radio" id="bounced" name="rangeType" value="bounced">
             <label for="bounced">Bounced</label>
-            <span class="radio-description"> - Reverses direction at the start/end of time range.</span>
+            <span class="text-sm text-secondary"> - Reverses direction at the start/end of time range.</span>
           </div>
         </div>
       </div>
     </div>
   </div>
-
   <script>
     let isPlaying = false;
 
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableShadowStyle.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableShadowStyle.ts
index 385a0ca55..0c8124ee6 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableShadowStyle.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableShadowStyle.ts
@@ -28,74 +28,12 @@ const widgetFile: FileType = {
   
 reearth.ui.show(\`
 ${PRESET_PLUGIN_COMMON_STYLE}
-<style>
-   body {
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   height: 100vh;
-   margin: 0;
-   background-color: #f5f5f5;
-   font-family: Arial, sans-serif;
-   }
-   .toggle-container {
-   display: flex;
-   flex-direction: column;
-   align-items: center;
-   }
-   .toggle {
-   position: relative;
-   display: inline-block;
-   width: 60px;
-   height: 34px;
-   }
-   .toggle input {
-   opacity: 0;
-   width: 0;
-   height: 0;
-   }
-   .slider {
-   position: absolute;
-   cursor: pointer;
-   top: 0;
-   left: 0;
-   right: 0;
-   bottom: 0;
-   background-color: #ccc;
-   transition: .4s;
-   border-radius: 34px;
-   }
-   .slider:before {
-   position: absolute;
-   content: "";
-   height: 26px;
-   width: 26px;
-   left: 4px;
-   bottom: 4px;
-   background-color: white;
-   transition: .4s;
-   border-radius: 50%;
-   }
-   input:checked + .slider {
-   background-color: #2196F3;
-   }
-   input:focus + .slider {
-   box-shadow: 0 0 1px #2196F3;
-   }
-   input:checked + .slider:before {
-   transform: translateX(26px);
-   }
-   .status {
-   margin-top: 20px;
-   font-size: 18px;
-   }
-</style>
-   <div class="toggle-container">
+   <div class="primary-background flex-column align-center p-16 rounded-sm gap-16">
       <label class="toggle">
       <input type="checkbox" id="toggleSwitch">
       <span class="slider"></span>
       </label>
-      <div class="status" id="status">Shadow: OFF</div>
+      <div class="text-lg" id="status">Shadow: OFF</div>
    </div>
    <script>
       document.addEventListener('DOMContentLoaded', function() {
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableTerrain.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableTerrain.ts
index f7a986b9c..25e084cde 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableTerrain.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/enableTerrain.ts
@@ -28,74 +28,12 @@ const widgetFile: FileType = {
 
 reearth.ui.show(\`
 ${PRESET_PLUGIN_COMMON_STYLE}
-<style>
-   body {
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   height: 100vh;
-   margin: 0;
-   background-color: #f5f5f5;
-   font-family: Arial, sans-serif;
-   }
-   .toggle-container {
-   display: flex;
-   flex-direction: column;
-   align-items: center;
-   }
-   .toggle {
-   position: relative;
-   display: inline-block;
-   width: 60px;
-   height: 34px;
-   }
-   .toggle input {
-   opacity: 0;
-   width: 0;
-   height: 0;
-   }
-   .slider {
-   position: absolute;
-   cursor: pointer;
-   top: 0;
-   left: 0;
-   right: 0;
-   bottom: 0;
-   background-color: #ccc;
-   transition: .4s;
-   border-radius: 34px;
-   }
-   .slider:before {
-   position: absolute;
-   content: "";
-   height: 26px;
-   width: 26px;
-   left: 4px;
-   bottom: 4px;
-   background-color: white;
-   transition: .4s;
-   border-radius: 50%;
-   }
-   input:checked + .slider {
-   background-color: #2196F3;
-   }
-   input:focus + .slider {
-   box-shadow: 0 0 1px #2196F3;
-   }
-   input:checked + .slider:before {
-   transform: translateX(26px);
-   }
-   .status {
-   margin-top: 20px;
-   font-size: 18px;
-   }
-</style>
-   <div class="toggle-container">
+   <div class="primary-background flex-column align-center p-16 rounded-sm gap-16">
       <label class="toggle">
-      <input type="checkbox" id="toggleSwitch">
-      <span class="slider"></span>
+        <input type="checkbox" id="toggleSwitch">
+        <span class="slider"></span>
       </label>
-      <div class="status" id="status">Terrain: OFF</div>
+      <div class="text-lg" id="status">Terrain: OFF</div>
    </div>
    <script>
       document.addEventListener('DOMContentLoaded', function() {
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/mouseEvent.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/mouseEvent.ts
index fb532d253..cd71906d4 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/mouseEvent.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/mouseEvent.ts
@@ -49,14 +49,16 @@ const widgetFile: FileType = {
     }
   </style>
 
-  <div id="wrapper">
-    <h2>Click Coordinates</h2>
-    <div class="coord-container">
-      <div class="coords-title">Click anywhere to see coordinates:</div>
-      <div class="coordinates">
-        <div>Latitude: <span id="lat" class="coordinate-value">-</span>°</div>
-        <div>Longitude: <span id="lng" class="coordinate-value">-</span>°</div>
-        <div>Height: <span id="height" class="coordinate-value">-</span> m</div>
+  <div class="primary-background rounded-sm p-16">
+    <p class="text-lg font-bold text-center">Click Coordinates</p>
+    <div class="secondary-background p-16 gap-4">
+      <div>
+        <p class="text-md text-secondary">Click on the map to view the coordinates:</p>
+      </div>
+      <div>
+        <div>Latitude: <span id="lat" class="font-bold">-</span>°</div>
+        <div>Longitude: <span id="lng" class="font-bold">-</span>°</div>
+        <div>Height: <span id="height" class="font-bold">-</span> m</div>
       </div>
     </div>
   </div>
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/takeScreenshot.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/takeScreenshot.ts
index f1e3b3876..5e59a7ca6 100644
--- a/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/takeScreenshot.ts
+++ b/web/src/beta/features/PluginPlayground/Plugins/presets/viewer/takeScreenshot.ts
@@ -1,4 +1,5 @@
 import { FileType, PluginType } from "../../constants";
+import { PRESET_PLUGIN_COMMON_STYLE } from "../common";
 
 const yamlFile: FileType = {
   id: "take-screenshot-reearth-yml",
@@ -21,36 +22,19 @@ const widgetFile: FileType = {
   title: "take-screenshot.js",
   sourceCode: `// / This plugin allows users to capture the current view in Re:earth, preview the screenshot, and download it as a PNG file.
   reearth.ui.show(\`
-  <style>
-    /* Generic styling system that provides consistent UI components and styling across all plugins */
-    @import url("https://reearth.github.io/visualizer-plugin-sample-data/public/css/preset-ui.css");
-
-    /* Plugin-specific styling */
-
-    .instructions {
-      font-size: 13px;
-      color: #666;
-      text-align: center;
-      font-style: italic;
-    }
-
-    #imageContainer {
-      text-align: center;
-    }
-
-    #capturedImage, .image-download-btn {
-      max-width: 100%;
-      margin: 10px auto;
-    }
-  </style>
-  <div id="wrapper">
-    <h2>Image Capture</h2>
-    <p class="instructions">Adjust your view as needed, then capture the screenshot</p>
+  ${PRESET_PLUGIN_COMMON_STYLE}
+  <div class="primary-background flex-column align-center p-16 rounded-sm gap-16">
+    <p class="text-lg font-bold m-0">Image Capture</p>
+    <p class="text-md text-secondary m-0">Adjust your view as needed, then capture the screenshot</p>
     <div class="flex-center">
-      <button class="btn-primary" id="captureButton">Capture View</button>
+      <button class="btn-primary p-8" id="captureButton">Capture View</button>
     </div>
-    <div id="imageContainer">
+    <div id="imageContainer" class="gap-16 hidden">
       <!-- Preview will appear here -->
+      <img id="capturedImage" class="w-full" />
+      <div class="display-flex justify-center">
+        <button class="btn-primary p-8" id="downloadBtn">Download Image</button>
+      </div>
     </div>
   </div>
 
@@ -64,20 +48,12 @@ const widgetFile: FileType = {
      * @param {string} imageData - Base64 encoded image data
      */
     function displayImage(imageData) {
-      // Clear any existing content in the container
-      imageContainer.innerHTML = '';
-
-      // Create and configure the image element
-      const img = document.createElement('img');
-      img.id = 'capturedImage';
+      // Find the image tag and pass the captured image data
+      const img = document.getElementById('capturedImage');
       img.src = imageData;
-
-      // Create download button with appropriate class for styling
-      const downloadBtn = document.createElement('button');
-      downloadBtn.className = 'btn-primary image-download-btn';
-      downloadBtn.textContent = 'Download Image';
-
+      
       // Add download functionality
+      const downloadBtn = document.getElementById('downloadBtn');
       downloadBtn.addEventListener('click', () => {
         // Create a temporary link element
         const link = document.createElement('a');
@@ -92,15 +68,12 @@ const widgetFile: FileType = {
         link.click();
         document.body.removeChild(link);
       });
-
-      // Add elements to the container and show it
-      imageContainer.appendChild(img);
-      imageContainer.appendChild(downloadBtn);
     }
 
     // Add capture button click handler
     captureButton.addEventListener('click', () => {
       // Send a message to the extension to request a capture
+      imageContainer.style.display = 'block';
       parent.postMessage({ type: 'capture-request' }, '*');
     });