diff --git a/package.json b/package.json
index 3ae113c..565bdbf 100644
--- a/package.json
+++ b/package.json
@@ -414,7 +414,6 @@
     "jsonc-parser": "^3.0.0",
     "lodash": "^4.17.21",
     "sha1": "^1.1.1",
-    "tab-goto": "^0.1.1",
     "vscode-ext-codicons": "^1.4.0",
     "vscode-ext-help-and-feedback-view": "^1.0.1"
   },
diff --git a/src/CodeSnippetsEditor.ts b/src/CodeSnippetsEditor.ts
index 238c0ad..8704a2d 100644
--- a/src/CodeSnippetsEditor.ts
+++ b/src/CodeSnippetsEditor.ts
@@ -278,16 +278,6 @@ export class CodeSnippetsEditor implements vscode.CustomTextEditorProvider {
       )
     );
 
-    const tabGotoUri = webview.asWebviewUri(
-      vscode.Uri.joinPath(
-        this.context.extensionUri,
-        "node_modules",
-        "tab-goto",
-        "dist",
-        "index.min.js"
-      )
-    );
-
     // Use a nonce to whitelist which scripts can be run
     const nonce = getNonce();
 
@@ -327,7 +317,6 @@ export class CodeSnippetsEditor implements vscode.CustomTextEditorProvider {
           window.i18nText = ${JSON.stringify(i18nText)}
         </script>
 				<script nonce="${nonce}" src="${scriptUri}"></script>
-        <script nonce="${nonce}" src="${tabGotoUri}"></script>
 			</body>
 			</html>`;
   }
diff --git a/views/code-snippets-editor/src/components/SnippetItem.scss b/views/code-snippets-editor/src/components/SnippetItem.scss
index 52d4e49..89f8c8a 100644
--- a/views/code-snippets-editor/src/components/SnippetItem.scss
+++ b/views/code-snippets-editor/src/components/SnippetItem.scss
@@ -24,6 +24,7 @@
       flex-wrap: wrap;
       gap: 0.2rem;
       padding-bottom: 0.5rem;
+
       &__item {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -36,28 +37,81 @@
         color: var(--badge-foreground);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
       }
+    }
+
+    &__scope-edit {
+      padding-bottom: 0.5rem;
+
+      &__label {
+        display: block;
+        color: var(--foreground);
+        cursor: pointer;
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        margin-bottom: calc(var(--design-unit) * 1px);
+      }
 
       .tags-input {
-        background: var(--input-background);
         .tagify {
-          --tags-border-color: none;
-          --tags-hover-border-color: none;
-          --tags-focus-border-color: none;
-          --tag-bg: var(--badge-background);
-          --tag-hover: var(--badge-background);
-          --tag-text-color: var(--badge-foreground);
-          --tag-text-color--edit: var(--badge-foreground);
-          --tag-invalid-bg: var(--badge-background);
-          --tag-invalid-color: var(--vscode-errorForeground);
-          --tag-remove-bg: var(--badge-background);
-          --tag-remove-btn-color: var(--badge-foreground);
-          --tag-remove-btn-bg: none;
-          --tag-remove-btn-bg--hover: none;
-          --input-color: var(--input-foreground);
-          --placeholder-color: rgba(0, 0, 0, 0.4);
-          --placeholder-color-focus: rgba(0, 0, 0, 0.25);
-          --loader-size: 0.8em;
-          --readonly-striped: 1;
+          width: 100%;
+          background: var(--input-background);
+          border-radius: calc(var(--corner-radius) * 1px);
+          border: calc(var(--border-width) * 1px) solid var(--dropdown-border);
+          padding: 0 calc(var(--design-unit) * 2px + 1px);
+
+          &__tag {
+            font-family: var(--font-family);
+            font-size: var(--type-ramp-minus1-font-size);
+            line-height: var(--type-ramp-minus1-line-height);
+            background-color: var(--badge-background);
+            border: calc(var(--border-width) * 1px) solid var(--button-border);
+            border-radius: var(--tag-corner-radius);
+            padding: calc(var(--design-unit) * 0.5px)
+              calc(var(--design-unit) * 1px);
+            margin: calc(var(--design-unit) * 1px)
+              calc(var(--design-unit) * 1px) calc(var(--design-unit) * 1px) 0;
+
+            &-text {
+              width: 100%;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              color: var(--badge-foreground);
+            }
+
+            &__removeBtn {
+              margin: 0;
+              color: var(--badge-foreground);
+
+              &:hover + div > span {
+                opacity: initial;
+              }
+            }
+
+            & > div {
+              max-width: calc(100% - 14px);
+              padding: 0 4px 0 0;
+
+              &::before {
+                display: none;
+              }
+            }
+          }
+
+          &__input {
+            font-size: var(--type-ramp-base-font-size);
+            padding: calc(var(--design-unit) * 0.5px)
+              calc(var(--design-unit) * 1px);
+            margin: calc(var(--design-unit) * 1px)
+              calc(var(--design-unit) * 1px) calc(var(--design-unit) * 1px) 0;
+
+            &::before {
+              color: var(--input-placeholder-foreground);
+            }
+          }
+
+          &--focus {
+            border-color: var(--focus-border);
+          }
         }
       }
     }
@@ -66,16 +120,20 @@
       padding-bottom: 0.5rem;
       overflow: hidden;
       text-overflow: ellipsis;
+
       vscode-text-field {
         width: 100%;
       }
     }
+
     &__body {
       position: relative;
       color: var(--vscode-textPreformat-foreground);
 
       pre {
         margin: 0;
+        width: 100%;
+        overflow: auto;
       }
 
       vscode-text-area {
@@ -119,3 +177,38 @@
     gap: 0.5em;
   }
 }
+
+.tagify__dropdown {
+  &__wrapper {
+    background: var(--dropdown-background);
+    border: calc(var(--border-width) * 1px) solid var(--focus-border);
+    border-radius: calc(var(--corner-radius) * 1px);
+  }
+
+  &__item {
+    margin: 0;
+    border-radius: var(--corner-radius);
+    border: calc(var(--border-width) * 1px) solid transparent;
+    color: var(--foreground);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    padding: 0 calc((var(--design-unit) / 2) * 1px)
+      calc((var(--design-unit) / 4) * 1px);
+
+    &--active,
+    &:active {
+      filter: none;
+      background: var(--list-active-selection-background);
+      border: calc(var(--border-width) * 1px) solid var(--focus-border);
+      color: var(--list-active-selection-foreground);
+    }
+  }
+
+  &__footer {
+    margin: 0;
+    border: calc(var(--border-width) * 1px) solid transparent;
+    padding: 0 calc((var(--design-unit) / 2) * 1px)
+      calc((var(--design-unit) / 4) * 1px);
+    color: var(--input-placeholder-foreground);
+  }
+}
diff --git a/views/code-snippets-editor/src/components/SnippetItem.tsx b/views/code-snippets-editor/src/components/SnippetItem.tsx
index e626b3f..71d4dd6 100644
--- a/views/code-snippets-editor/src/components/SnippetItem.tsx
+++ b/views/code-snippets-editor/src/components/SnippetItem.tsx
@@ -16,6 +16,14 @@ interface Props {
   cancelEdit(): void;
 }
 
+function originalInputValueFormat(
+  values: {
+    value: string;
+  }[]
+) {
+  return values.map((item) => item.value).join(",");
+}
+
 const SnippetItem = ({
   snippet,
   readonly,
@@ -181,8 +189,6 @@ const SnippetItem = ({
                 name="name"
                 value={snippet.name}
                 onInput={handleChange}
-                tab-goto-key={`${keyName}-name-input`}
-                shift-tab-goto={`[tab-goto-key="${keyName}-cancel-button"]`}
               >
                 {window.i18nText.name}
               </vscode-text-field>
@@ -196,45 +202,34 @@ const SnippetItem = ({
             </div>
             <div style={{ flex: "1 1 0" }}></div>
             <div className="code-snippets-editor-operation">
-              <vscode-button
-                ref={saveBtnRef}
-                onClick={saveEdit}
-                tab-goto-key={`${keyName}-save-button`}
-                shift-tab-goto={`[tab-goto-key="${keyName}-body-input"]`}
-              >
+              <vscode-button ref={saveBtnRef} onClick={saveEdit}>
                 {window.i18nText.save}
               </vscode-button>
               <vscode-button
                 ref={cancelBtnRef}
                 appearance="secondary"
                 onClick={cancelEdit}
-                tab-goto-key={`${keyName}-cancel-button`}
-                tab-goto={`[tab-goto-key="${keyName}-name-input"]`}
               >
                 {window.i18nText.cancel}
               </vscode-button>
             </div>
           </div>
-
-          {/* <vscode-text-field
-                name="scope"
-                value={snippet.scope}
-                onInput={handleChange}
-                tab-goto-key={`${keyName}-scope-input`}
-                tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
-              >
-                {window.i18nText.scope}
-              </vscode-text-field> */}
-          <div
-            className="code-snippets-editor-snippet__scope"
-            tab-goto-key={`${keyName}-scope-input`}
-            tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
-          >
+          <div className="code-snippets-editor-snippet__scope-edit">
+            <div className="code-snippets-editor-snippet__scope-edit__label">
+              Scope
+            </div>
             <Tags
               name="scope"
               whitelist={langIds}
               placeholder="Add Scopes"
               defaultValue={snippet.scope} // initial value
+              onChange={handleChange}
+              settings={{
+                dropdown: {
+                  enabled: 1,
+                },
+                originalInputValueFormat,
+              }}
             />
           </div>
 
@@ -243,8 +238,6 @@ const SnippetItem = ({
               name="description"
               value={snippet.description}
               onInput={handleChange}
-              tab-goto-key={`${keyName}-description-input`}
-              shift-tab-goto={`[tab-goto-key="${keyName}-scope-input"]`}
             >
               {window.i18nText.description}
             </vscode-text-field>
@@ -256,8 +249,6 @@ const SnippetItem = ({
               rows={10}
               value={snippet.body}
               onInput={handleChange}
-              tab-goto-key={`${keyName}-body-input`}
-              tab-goto={`[tab-goto-key="${keyName}-save-button"]`}
             >
               {window.i18nText.body}
             </vscode-text-area>
diff --git a/yarn.lock b/yarn.lock
index 5dfed74..ea80816 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6380,11 +6380,6 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-tab-goto@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/tab-goto/-/tab-goto-0.1.1.tgz#1c98d996a60ccf2e8541e24f704da2bb0f40bbc2"
-  integrity sha512-ekuFNVHROhsx7atqPSK4K2W04x4HMZ5TmG0YRcUgOXALU5llh+UcTIQzULkaVVm2JbQzsEulHQSL45F9dYd71A==
-
 tabbable@^5.2.0:
   version "5.3.3"
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"