diff --git a/packages/freesewing.shared/components/mdx/index.js b/packages/freesewing.shared/components/mdx/index.js
index 885b82eb233..89ceb52c558 100644
--- a/packages/freesewing.shared/components/mdx/index.js
+++ b/packages/freesewing.shared/components/mdx/index.js
@@ -17,6 +17,7 @@ const mdxCustomComponents = (app) => ({
     {...props}
     patterns={{examples, rendertest, tutorial}}
   >{props.children}</Example>,
+  Comment: props => <Popout {...props} comment />,
   Fixme: props => <Popout {...props} fixme />,
   Link: props => <Popout {...props} link />,
   Note: props => <Popout {...props} note />,
diff --git a/packages/freesewing.shared/components/popout.js b/packages/freesewing.shared/components/popout.js
index b08b997112c..7d5e4cebd0c 100644
--- a/packages/freesewing.shared/components/popout.js
+++ b/packages/freesewing.shared/components/popout.js
@@ -1,4 +1,5 @@
 const colors = {
+  comment: 'secondary',
   note: 'primary',
   tip: 'accent',
   warning: 'error',
@@ -33,11 +34,16 @@ const Popout = (props) => {
   return (
     <div className={`relative my-8 bg-${color} bg-opacity-5`}>
       <div className={`
-        border-y-4 sm:border-0 sm:border-l-4 px-6 sm:px-8 py-4 sm:py-2 shadow border-${color}`}>
-        <div className={`font-bold uppercase text-${color}`}>
-          {type}
+        border-y-4 sm:border-0 sm:border-l-4 px-6 sm:px-8 py-4 sm:py-2 shadow text-base border-${color}`}>
+        <div className={`font-bold flex flex-row gap-1 items-end` }>
+          <span className={`font-bold uppercase text-${color}`}>{type}</span>
+          <span className={`font-normal text-base text-${color}`}>
+            {type === 'comment' && <> by <b>{props.by}</b></>}</span>
         </div>
         <div className="py-1 first:mt-0 popout-content">{props.children}</div>
+        {type === 'comment' && (
+          <div className={`font-bold italic text-${color}`}>{props.by}</div>
+        )}
       </div>
     </div>
   )