diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8784bb38..6136c4c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - [#566](https://github.com/estruyf/vscode-front-matter/issues/566): Keep the panel context on the live preview
 - [#568](https://github.com/estruyf/vscode-front-matter/issues/568): Update the preview URL if the slug changes
 - [#586](https://github.com/estruyf/vscode-front-matter/issues/586): Allow to specify the content card fields
+- [#588](https://github.com/estruyf/vscode-front-matter/issues/588): Added extensibility support to override card fields
 
 ### ⚡️ Optimizations
 
diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index 10152ffe..086fc2e3 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -29,7 +29,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   const settings = useRecoilValue(SettingsSelector);
   const draftField = useMemo(() => settings?.draftField, [settings]);
   const cardFields = useMemo(() => settings?.dashboardState?.contents?.cardFields, [settings?.dashboardState?.contents?.cardFields]);
-  const { titleHtml, imageHtml, footerHtml } = useExtensibility({
+  const { titleHtml, descriptionHtml, dateHtml, statusHtml, tagsHtml, imageHtml, footerHtml } = useExtensibility({
     fmFilePath,
     date,
     title,
@@ -162,11 +162,19 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           <div className="relative p-4 w-full grow">
             <div className={`flex justify-between items-center ${hasDraftOrDate ? `mb-2` : ``}`}>
               {
-                cardFields?.state && draftField && draftField.name && <Status draft={pageData[draftField.name]} />
+                statusHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: statusHtml }} />
+                ) : (
+                  cardFields?.state && draftField && draftField.name && <Status draft={pageData[draftField.name]} />
+                )
               }
 
               {
-                cardFields?.date && <DateField className={`mr-4`} value={date} />
+                dateHtml ? (
+                  <div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
+                ) : (
+                  cardFields?.date && <DateField className={`mr-4`} value={date} />
+                )
               }
             </div>
 
@@ -179,7 +187,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
             <button onClick={openFile} className={`text-left block`}>
               {
-                titleHtml ? titleHtml : (
+                titleHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: titleHtml }} />
+                ) : (
                   <h2 className="mb-2 font-bold">
                     {escapedTitle}
                   </h2>
@@ -188,28 +198,39 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             </button>
 
             <button onClick={openFile} className={`text-left block`}>
-              <p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
+              {
+                descriptionHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
+                ) : (
+                  <p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
+                )
+              }
             </button>
 
-            {tags && tags.length > 0 && (
-              <div className="mt-2">
-                {tags.map(
-                  (tag, index) =>
-                    tag && (
-                      <span
-                        key={index}
-                        className={`inline-block mr-1 mt-1 text-xs ${getColors(
-                          `text-[#5D561D] dark:text-[#F0ECD0]`,
-                          `text-[var(--vscode-textPreformat-foreground)]`
-                        )
-                          }`}
-                      >
-                        #{tag}
-                      </span>
-                    )
-                )}
-              </div>
-            )}
+            {
+              tagsHtml ? (
+                <div className="mt-2" dangerouslySetInnerHTML={{ __html: tagsHtml }} />
+              ) : (
+                tags && tags.length > 0 && (
+                  <div className="mt-2">
+                    {tags.map(
+                      (tag, index) => tag && (
+                        <span
+                          key={index}
+                          className={`inline-block mr-1 mt-1 text-xs ${getColors(
+                            `text-[#5D561D] dark:text-[#F0ECD0]`,
+                            `text-[var(--vscode-textPreformat-foreground)]`
+                          )
+                            }`}
+                        >
+                          #{tag}
+                        </span>
+                      )
+                    )}
+                  </div>
+                )
+              )
+            }
           </div>
 
           {
diff --git a/src/dashboardWebView/hooks/useExtensibility.tsx b/src/dashboardWebView/hooks/useExtensibility.tsx
index b78e3f29..7f0eb322 100644
--- a/src/dashboardWebView/hooks/useExtensibility.tsx
+++ b/src/dashboardWebView/hooks/useExtensibility.tsx
@@ -9,6 +9,10 @@ export default function useExtensibility(options: {
   pageData: any;
 }) {
   const [titleHtml, setTitleHtml] = useState<string | undefined>(undefined);
+  const [descriptionHtml, setDescriptionHtml] = useState<string | undefined>(undefined);
+  const [statusHtml, setStatusHtml] = useState<string | undefined>(undefined);
+  const [dateHtml, setDateHtml] = useState<string | undefined>(undefined);
+  const [tagsHtml, setTagsHtml] = useState<string | undefined>(undefined);
   const [imageHtml, setImageHtml] = useState<string | undefined>(undefined);
   const [footerHtml, setFooterHtml] = useState<string | undefined>(undefined);
 
@@ -67,10 +71,82 @@ export default function useExtensibility(options: {
         }
       });
     }
+
+    if (window.fmExternal.getCardDescription) {
+      window.fmExternal.getCardDescription(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setDescriptionHtml(htmlContent);
+        } else {
+          setDescriptionHtml(undefined);
+        }
+      });
+    }
+
+    if (window.fmExternal.getCardDate) {
+      window.fmExternal.getCardDate(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setDateHtml(htmlContent);
+        } else {
+          setDateHtml(undefined);
+        }
+      });
+    }
+
+    if (window.fmExternal.getCardStatus) {
+      window.fmExternal.getCardStatus(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setStatusHtml(htmlContent);
+        } else {
+          setStatusHtml(undefined);
+        }
+      });
+    }
+
+    if (window.fmExternal.getCardTags) {
+      window.fmExternal.getCardTags(options.fmFilePath, {
+        fmFilePath: options.fmFilePath,
+        date: options.date,
+        title: options.title,
+        description: options.description,
+        type: options.type,
+        ...options.pageData
+      }).then(htmlContent => {
+        if (htmlContent) {
+          setTagsHtml(htmlContent);
+        } else {
+          setTagsHtml(undefined);
+        }
+      });
+    }
   }, [options]);
 
   return {
     titleHtml,
+    descriptionHtml,
+    statusHtml,
+    dateHtml,
+    tagsHtml,
     imageHtml,
     footerHtml
   };
diff --git a/src/dashboardWebView/index.tsx b/src/dashboardWebView/index.tsx
index 0a49f2c7..1c9c91c9 100644
--- a/src/dashboardWebView/index.tsx
+++ b/src/dashboardWebView/index.tsx
@@ -31,7 +31,7 @@ declare global {
       getCardFooter: (filePath: string, data: any) => Promise<string | undefined>;
       // 8.5.0 extension points
       getCardTitle: (filePath: string, data: any) => Promise<string | undefined>;
-      getcardDescription: (filePath: string, data: any) => Promise<string | undefined>;
+      getCardDescription: (filePath: string, data: any) => Promise<string | undefined>;
       getCardTags: (filePath: string, data: any) => Promise<string | undefined>;
       getCardDate: (filePath: string, data: any) => Promise<string | undefined>;
       getCardStatus: (filePath: string, data: any) => Promise<string | undefined>;