Update index.njk

user-guide/the-interface/index.njk

@@ -49,32 +49,6 @@ title: 02· The interface
 <p>Your account settings can be changed at the user area, in <b>Your account</b>. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.</p>
 <p>If you want to change the email address associated to your account or remove your account entirely, this can be done in the <b>Profile</b> section.</p>
 
-<h3 id="interface-light-mode">Light mode</h3>
-<p>Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:</p>
-<ul>
-  <li>From "Your account" > "Settings".</li>
-  <li>Using the shortcut <kbd>Alt/⌥</kbd> + <kbd>M</kbd>.</li>
-</ul>
-
-<figure>
-  <a href="/img/interface/dashboard-light.webp" target="_blank">
-    <img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
-  </a>
-  <figcaption>Penpot's dashboard in light mode</figcaption>
-</figure>
-<figure>
-  <a href="/img/interface/workspace-light.webp" target="_blank">
-    <img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
-  </a>
-  <figcaption>Penpot's workspace in light mode</figcaption>
-</figure>
-<figure>
-  <a href="/img/interface/viewmode-light.webp" target="_blank">
-    <img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
-  </a>
-  <figcaption>Penpot's view mode in light mode</figcaption>
-</figure>
-
 
 
 <h2 id="interface-workspace">Workspace</h2>
@@ -170,3 +144,30 @@ title: 02· The interface
   <li><strong>Reset prototype:</strong> Goes to the first board of the prototype.</li>
   <li><strong>Navigation buttons:</strong> Forward and backwards buttons.</li>
 </ol>
+
+
+<h2 id="interface-ui-theme">UI Theme</h2>
+<p>Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:</p>
+<ul>
+  <li>From "Your account" > "Settings".</li>
+  <li>Using the shortcut <kbd>Alt/⌥</kbd> + <kbd>M</kbd>.</li>
+</ul>
+
+<figure>
+  <a href="/img/interface/dashboard-light.webp" target="_blank">
+    <img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
+  </a>
+  <figcaption>Penpot's dashboard in light mode</figcaption>
+</figure>
+<figure>
+  <a href="/img/interface/workspace-light.webp" target="_blank">
+    <img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
+  </a>
+  <figcaption>Penpot's workspace in light mode</figcaption>
+</figure>
+<figure>
+  <a href="/img/interface/viewmode-light.webp" target="_blank">
+    <img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
+  </a>
+  <figcaption>Penpot's view mode in light mode</figcaption>
+</figure>