diff --git a/CHANGELOG.md b/CHANGELOG.md
index c101bedc..a3659bc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### 🎨 Enhancements
 
+- New tag design for the tags, category, and taxonomy fields
 - [#263](https://github.com/estruyf/vscode-front-matter/issues/263): WYSIWYG string field option
 - [#308](https://github.com/estruyf/vscode-front-matter/issues/308): New `File` field
 - [#314](https://github.com/estruyf/vscode-front-matter/issues/314): New preview actions to open the page in the browser and refresh the preview
diff --git a/assets/media/styles.css b/assets/media/styles.css
index acd7388f..e9b78144 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -221,60 +221,6 @@
   margin-top: 1rem;
 }
 
-.article__tags__items__item {
-  display: inline-flex;
-  margin-bottom: .5rem;
-  margin-right: .5rem;
-}
-
-.article__tags__items__item {
-  display: inline-block;
-  margin-bottom: .5rem;
-  margin-right: .5rem;
-}
-
-.article__tags__items__item_add,
-.article__tags__items__item_delete {
-  display: inline-block;
-  width: auto;
-}
-
-.article__tags__items__item svg {
-  display: inline;
-  vertical-align: bottom;
-}
-
-.article__tags__items__item_delete span {
-  margin-left: .5rem;
-}
-
-.article__tags__items__pill_notexists {
-  color: var(--vscode-inputValidation-errorForeground);
-  background-color: var(--vscode-inputValidation-errorBackground);
-  padding-left: .5rem;
-}
-
-.article__tags__items__pill_notexists:hover {
-  color: var(--vscode-inputValidation-errorForeground);
-  background-color: var(--vscode-inputValidation-errorBackground);
-
-  filter: contrast(60%);
-}
-
-.article__tags__items__item_add {
-  color: var(--vscode-inputValidation-infoForeground);
-  background-color: var(--vscode-inputValidation-infoBackground);
-  border-right: 1px solid var(--vscode-inputValidation-infoBorder);
-}
-
-.article__tags__items__item_add:hover {
-  color: var(--vscode-inputValidation-infoForeground);
-  background-color: var(--vscode-inputValidation-infoBackground);
-  border-right: 1px solid var(--vscode-inputValidation-infoBorder);
-
-  filter: contrast(60%);
-}
-
 .article__actions > * + *,
 .other_actions > * + *,
 .base__actions > * + *,
diff --git a/src/panelWebView/components/Tag.tsx b/src/panelWebView/components/Tag.tsx
index 23527b0f..a02ce089 100644
--- a/src/panelWebView/components/Tag.tsx
+++ b/src/panelWebView/components/Tag.tsx
@@ -1,6 +1,5 @@
+import { PlusIcon, XIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { AddIcon } from './Icons/AddIcon';
-import { ArchiveIcon } from './Icons/ArchiveIcon';
 
 export interface ITagProps {
   className: string;
@@ -17,13 +16,29 @@ const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithChildren<
   const { value, className, title, onRemove, onCreate, disableConfigurable } = props;
 
   return (
-    <div className={`article__tags__items__item`}>
-      {
-        !disableConfigurable && onCreate && 
-        <button title={`Add ${value} to your settings`} className={`article__tags__items__item_add`} onClick={() => onCreate(value)}><AddIcon /></button>
-      }
-      <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><ArchiveIcon /></span></button>
-    </div>
+    <>
+      <div className={`tag`}>
+        { 
+          !disableConfigurable && onCreate && (
+            <button 
+              className={`tag__create`}
+              title={`Add ${value} to your settings`} 
+              onClick={() => onCreate(value)}>
+              <PlusIcon style={{ width: `1rem`, height: `1rem` }} />
+            </button>
+          ) 
+        }
+        
+        <div className={`tag__value`}>{value}</div>
+
+        <button 
+          title={title} 
+          className={`tag__delete`} 
+          onClick={() => onRemove(value)}>
+          <XIcon style={{ width: `1rem`, height: `1rem` }} />
+        </button>
+      </div>
+    </>
   );
 };
 
diff --git a/src/panelWebView/components/Tags.tsx b/src/panelWebView/components/Tags.tsx
index c699997f..a4b83774 100644
--- a/src/panelWebView/components/Tags.tsx
+++ b/src/panelWebView/components/Tags.tsx
@@ -28,12 +28,24 @@ const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWithChildre
     <div className={`article__tags__items`}>
       {
         knownTags.map((t, idx) => (
-          <Tag key={generateKey(t, idx)} value={t} className={`article__tags__items__pill_exists`} onRemove={onRemove} title={`Remove ${t}`} />
+          <Tag 
+            key={generateKey(t, idx)} 
+            value={t} 
+            className={`article__tags__items__pill_exists`} 
+            onRemove={onRemove} 
+            title={`Remove ${t}`} />
         ))
       }
       {
         unknownTags.map((t, idx) => (
-          <Tag key={generateKey(t, idx)} value={t} className={`article__tags__items__pill_notexists`} onRemove={onRemove} onCreate={onCreate} title={`Be aware, this tag "${t}" is not saved in your settings. Once removed, it will be gone forever.`} disableConfigurable={disableConfigurable} />
+          <Tag 
+            key={generateKey(t, idx)} 
+            value={t} 
+            className={`article__tags__items__pill_notexists`} 
+            onRemove={onRemove} 
+            onCreate={onCreate} 
+            title={`Be aware, this tag "${t}" is not saved in your settings. Once removed, it will be gone forever.`} 
+            disableConfigurable={disableConfigurable} />
         ))
       }
     </div>
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index ba088adc..93dc4f49 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -354,6 +354,73 @@ vscode-divider {
   padding: .5rem;
 }
 
+/* Tags */
+.article__tags__items {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 1rem;
+}
+
+.tag {
+  align-items: center;
+  background-color: var(--vscode-button-background);
+  border: 1px solid var(--vscode-button-border);
+  border-radius: 2px;
+  color: var(--vscode-button-foreground);
+  display: inline-flex;
+  font-size: 11px;
+  line-height: 16px;
+  padding: .25rem .25rem;
+  margin-bottom: .5rem;
+  margin-right: .5rem;
+}
+
+.tag button {
+  background: none;
+  border: none;
+  color: inherit;
+  outline: none !important;
+  outline-offset: inherit !important;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem;
+}
+
+.tag .tag__create {
+  margin-right: .25rem;
+}
+
+.tag .tag__create:hover {
+  color: var(--vscode-inputValidation-infoForeground, #000);
+  background-color: var(--vscode-inputValidation-infoBackground);
+  border-radius: 2px;
+}
+
+.vscode-dark .tag .tag__create:hover {
+  color: var(--vscode-inputValidation-infoForeground, #fff);
+}
+
+.tag .tag__delete {
+  margin-left: .25rem;
+}
+
+.tag .tag__delete:hover {
+  background-color: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground, #000);
+  border-radius: 2px;
+}
+
+.vscode-dark .tag .tag__delete:hover {
+  color: var(--vscode-inputValidation-infoForeground, #fff);
+}
+
+.tag .tag__value {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+
+
 /* Quill changes */
 .ql-toolbar.ql-snow,
 .ql-container.ql-snow {