diff --git a/app/src/assets/scss/component/_switch.scss b/app/src/assets/scss/component/_switch.scss
index 831b59a65..952774d09 100644
--- a/app/src/assets/scss/component/_switch.scss
+++ b/app/src/assets/scss/component/_switch.scss
@@ -15,6 +15,11 @@
   overflow: inherit;
   user-select: none;
 
+  &--side {
+    margin-right: 14px;
+    margin-left: 14px;
+  }
+
   &:after {
     border: 1px solid var(--b3-theme-surface-lighter);
     box-shadow: var(--b3-point-shadow);
diff --git a/app/src/config/util/snippets.ts b/app/src/config/util/snippets.ts
index cc43c6b8e..25254d4ee 100644
--- a/app/src/config/util/snippets.ts
+++ b/app/src/config/util/snippets.ts
@@ -139,12 +139,13 @@ const genSnippet = (options: ISnippet) => {
     return `<div data-id="${options.id || ""}" data-type="${options.type}">
     <div class="fn__flex">
         <input type="text" class="fn__size200 b3-text-field" placeholder="${window.siyuan.languages.title}">
-        <div class="fn__flex-1 fn__space"></div>
-        <input data-type="snippet" class="b3-switch fn__flex-center" type="checkbox"${options.enabled ? " checked" : ""}>
+        <div class="fn__flex-1"></div>
         <div class="fn__space"></div>
         <span aria-label="${window.siyuan.languages.remove}" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
             <svg><use xlink:href="#iconTrashcan"></use></svg>
         </span>
+        <div class="fn__space"></div>
+        <input data-type="snippet" class="b3-switch b3-switch--side fn__flex-center" type="checkbox"${options.enabled ? " checked" : ""}>
     </div>
     <div class="fn__hr"></div>
     <textarea class="fn__block b3-text-field" placeholder="${window.siyuan.languages.codeSnippet}" style="resize: vertical;font-family:var(--b3-font-family-code)" spellcheck="false"></textarea>