diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html
index ea74ba4d44..3311ca3f82 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html	
@@ -7,38 +7,39 @@
   <img src="Creating a custom theme_5_.png">
 </p>
 <h2>Step 2. Create the theme</h2>
-<table>
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img src="Creating a custom theme_3_.png">
-      </td>
-      <td>Themes are code notes with a special attribute. Start by creating a new
-        code note.</td>
-    </tr>
-    <tr>
-      <td>
-        <img src="Creating a custom theme_1_.png">
-      </td>
-      <td>Then change the note type to a CSS code.</td>
-    </tr>
-    <tr>
-      <td>
-        <img src="Creating a custom theme_Cr.png">
-      </td>
-      <td>In the <em>Owned Attributes</em> section define the <code spellcheck="false">#appTheme</code> attribute
-        to point to any desired name. This is the name that will show up in the
-        appearance section in settings.</td>
-    </tr>
-  </tbody>
-</table>
-
+<figure class="table">
+  <table>
+    <thead>
+      <tr>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <img src="Creating a custom theme_3_.png">
+        </td>
+        <td>Themes are code notes with a special attribute. Start by creating a new
+          code note.</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="Creating a custom theme_1_.png">
+        </td>
+        <td>Then change the note type to a CSS code.</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="Creating a custom theme_Cr.png">
+        </td>
+        <td>In the <em>Owned Attributes</em> section define the <code spellcheck="false">#appTheme</code> attribute
+          to point to any desired name. This is the name that will show up in the
+          appearance section in settings.</td>
+      </tr>
+    </tbody>
+  </table>
+</figure>
 <h2>Step 3. Define the theme's CSS</h2>
 <p>As a very simple example we will change the background color of the launcher
   pane to a shade of blue.</p>
@@ -60,7 +61,7 @@
 </p>
 <h2>Step 5. Making changes</h2>
 <p>Simply go back to the note and change according to needs. To apply the
-  changes to the current window, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R </kbd> to
+  changes to the current window, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R </kbd>to
   refresh.</p>
 <p>It's a good idea to keep two windows, one for editing and the other one
   for previewing the changes.</p>
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html
index 8aa3c00775..0256575f96 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Creating an icon pack.html	
@@ -1,5 +1,5 @@
 <aside class="admonition note">
-  <p>e This page describes how to create custom icon packs. For a general description
+  <p>This page describes how to create custom icon packs. For a general description
     of how to use already existing icon packs, see&nbsp;<a class="reference-link"
     href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>.</p>
 </aside>
@@ -74,7 +74,7 @@
 		"bx-ball": {
 			"glyph": "\ue9c2",
 			"terms": [ "ball" ]
-		},		
+		},
 		"bxs-party": {
 			"glyph": "\uec92"
 			"terms": [ "party" ]
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html
index dd72effbfd..32083ee809 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Customize the Next theme.html	
@@ -18,7 +18,8 @@
 </ul>
 <h2>Overrides</h2>
 <p>Do note that the TriliumNext theme has a few more overrides than the legacy
-  theme, so you might need to suffix <code spellcheck="false">!important</code> if
-  the style changes are not applied.</p><pre><code class="language-text-css">:root {
-	--launcher-pane-background-color: #0d6efd !important;
+  theme. Due to that, it is recommended to use <code spellcheck="false">#trilium-app</code> with
+  a next theme instead of the <code spellcheck="false">:root</code> of a legacy
+  theme.</p><pre><code class="language-text-css">#trilium-app {
+	--launcher-pane-background-color: #0d6efd;
 }</code></pre>
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Theme development/Creating an icon pack.md b/docs/User Guide/User Guide/Theme development/Creating an icon pack.md
index 218c21b21b..06c5c97558 100644
--- a/docs/User Guide/User Guide/Theme development/Creating an icon pack.md	
+++ b/docs/User Guide/User Guide/Theme development/Creating an icon pack.md	
@@ -1,6 +1,6 @@
 # Creating an icon pack
 > [!NOTE]
-> e This page describes how to create custom icon packs. For a general description of how to use already existing icon packs, see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Themes/Icon%20Packs.md">Icon Packs</a>.
+> This page describes how to create custom icon packs. For a general description of how to use already existing icon packs, see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Themes/Icon%20Packs.md">Icon Packs</a>.
 
 ## Supported formats
 
@@ -49,7 +49,7 @@ The icon pack manifest is a JSON file with the following structure:
 		"bx-ball": {
 			"glyph": "\ue9c2",
 			"terms": [ "ball" ]
-		},		
+		},
 		"bxs-party": {
 			"glyph": "\uec92"
 			"terms": [ "party" ]
diff --git a/docs/User Guide/User Guide/Theme development/Customize the Next theme.md b/docs/User Guide/User Guide/Theme development/Customize the Next theme.md
index 657199a67e..e5e1ad8860 100644
--- a/docs/User Guide/User Guide/Theme development/Customize the Next theme.md	
+++ b/docs/User Guide/User Guide/Theme development/Customize the Next theme.md	
@@ -12,10 +12,10 @@ The `appThemeBase` label can be set to one of the following values:
 
 ## Overrides
 
-Do note that the TriliumNext theme has a few more overrides than the legacy theme, so you might need to suffix `!important` if the style changes are not applied.
+Do note that the TriliumNext theme has a few more overrides than the legacy theme. Due to that, it is recommended to use `#trilium-app` with a next theme instead of the `:root` of a legacy theme.
 
 ```css
-:root {
-	--launcher-pane-background-color: #0d6efd !important;
+#trilium-app {
+	--launcher-pane-background-color: #0d6efd;
 }
 ```
\ No newline at end of file