diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css
index dc1465d17..3718602cf 100644
--- a/apps/client/src/stylesheets/theme-next/ribbon.css
+++ b/apps/client/src/stylesheets/theme-next/ribbon.css
@@ -42,7 +42,7 @@ div.promoted-attributes-container {
  */
 
  /* The property label */
-.note-info-widget-table th,
+.note-info-item > span:first-child,
 .file-properties-widget .file-table th,
 .image-properties > div:first-child > span > strong {
     opacity: 0.65;
@@ -50,7 +50,6 @@ div.promoted-attributes-container {
     vertical-align: top;
 }
 
-.note-info-widget-table td,
 .file-properties-widget .file-table td {
     vertical-align: top;
 }
diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
index 2e670d51d..2fb9daa80 100644
--- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
+++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
@@ -36,57 +36,58 @@ export default function NoteInfoTab({ note }: TabContext) {
     return (
         <div className="note-info-widget">
             {note && (
-                <table className="note-info-widget-table">
-                    <tbody>
-                        <tr>
-                            <th>{t("note_info_widget.note_id")}:</th>
-                            <td class="note-info-id">{note.noteId}</td>
-                            <th>{t("note_info_widget.created")}:</th>
-                            <td>{formatDateTime(metadata?.dateCreated)}</td>
-                            <th>{t("note_info_widget.modified")}:</th>
-                            <td>{formatDateTime(metadata?.dateModified)}</td>
-                        </tr>
+                <>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.note_id")}:</span>
+                        <span className="note-info-id">{note.noteId}</span>
+                    </div>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.created")}:</span>
+                        <span>{formatDateTime(metadata?.dateCreated)}</span>
+                    </div>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.modified")}:</span>
+                        <span>{formatDateTime(metadata?.dateModified)}</span>
+                    </div>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.type")}:</span>
+                        <span>
+                            <span className="note-info-type">{note.type}</span>{' '}
+                            {note.mime && <span className="note-info-mime">({note.mime})</span>}
+                        </span>
+                    </div>
+                    <div className="note-info-item">
+                        <span title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</span>
+                        <span className="note-info-size-col-span">
+                            {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
+                                <Button
+                                    className="calculate-button"
+                                    icon="bx bx-calculator"
+                                    text={t("note_info_widget.calculate")}
+                                    onClick={() => {
+                                        setIsLoading(true);
+                                        setTimeout(async () => {
+                                            await Promise.allSettled([
+                                                server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
+                                                server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
+                                            ]);
+                                            setIsLoading(false);
+                                        }, 0);
+                                    }}
+                                />
+                            )}
 
-                        <tr>
-                            <th>{t("note_info_widget.type")}:</th>
-                            <td>
-                                <span class="note-info-type">{note.type}</span>{' '}
-                                { note.mime && <span class="note-info-mime">({note.mime})</span> }
-                            </td>
-
-                            <th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
-                            <td colSpan={3}>
-                                {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
-                                    <Button
-                                        className="calculate-button"
-                                        style={{ padding: "0px 10px 0px 10px" }}
-                                        icon="bx bx-calculator"
-                                        text={t("note_info_widget.calculate")}
-                                        onClick={() => {
-                                            setIsLoading(true);
-                                            setTimeout(async () => {
-                                                await Promise.allSettled([
-                                                    server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
-                                                    server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
-                                                ]);
-                                                setIsLoading(false);
-                                            }, 0);
-                                        }}
-                                    />
-                                )}
-
-                                <span className="note-sizes-wrapper">
-                                    <span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
-                                    {" "}
-                                    {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
-                                        <span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
-                                    }
-                                    {isLoading && <LoadingSpinner />}
-                                </span>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                            <span className="note-sizes-wrapper">
+                                <span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
+                                {" "}
+                                {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
+                                    <span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
+                                }
+                                {isLoading && <LoadingSpinner />}
+                            </span>
+                        </span>
+                    </div>
+                </>
             )}
         </div>
     )
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 16437d618..f47c6d662 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -160,17 +160,20 @@
 /* #region Note info */
 .note-info-widget {
     padding: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
 }
 
-.note-info-widget-table {
-    max-width: 100%;
-    display: block;
-    overflow-x: auto;
-    white-space: nowrap;
+.note-info-item {
+    display: flex;
+    align-items: baseline;
+    padding-inline-end: 15px;
+    padding-block: 5px;
 }
 
-.note-info-widget-table td, .note-info-widget-table th {
-    padding: 5px;
+.note-info-item > span:first-child {
+    padding-inline-end: 5px;
 }
 
 .note-info-mime {
@@ -186,6 +189,10 @@
     font-size: 0.8em;
     vertical-align: middle !important;
 }
+
+.note-info-widget .calculate-button {
+    padding: 0 10px;
+}
 /* #endregion */
 
 /* #region Similar Notes */