diff --git a/app/client/ui/DocTutorial.css b/app/client/ui/DocTutorial.css
index 9c7fcf27..64b9993a 100644
--- a/app/client/ui/DocTutorial.css
+++ b/app/client/ui/DocTutorial.css
@@ -1,29 +1,52 @@
 .doc-tutorial-popup h1,
 .doc-tutorial-popup h2,
 .doc-tutorial-popup h3,
+.doc-tutorial-popup h4,
+.doc-tutorial-popup h5,
+.doc-tutorial-popup h6,
 .doc-tutorial-popup p,
 .doc-tutorial-popup li {
   color: var(--grist-theme-text, #262633);
 }
 
+.doc-tutorial-popup h2,
+.doc-tutorial-popup h3,
+.doc-tutorial-popup h4,
+.doc-tutorial-popup h5,
+.doc-tutorial-popup h6 {
+  margin: 20px 0px 10px 0px;
+  font-weight: 400;
+}
+
 .doc-tutorial-popup h1 {
   margin: 0px 0px 24px 0px;
   font-weight: 500;
   font-size: 28px;
-  line-height: 40px;
+  line-height: 42px;
 }
 
 .doc-tutorial-popup h2 {
-  margin: 20px 0px 10px 0px;
-  font-weight: 400;
   font-size: 24px;
-  line-height: 32px;
+  line-height: 36px;
 }
 
 .doc-tutorial-popup h3 {
-  margin: 20px 0px 10px 0px;
-  font-weight: 400;
+  font-size: 22px;
+  line-height: 33px;
+}
+
+.doc-tutorial-popup h4 {
   font-size: 20px;
+  line-height: 30px;
+}
+
+.doc-tutorial-popup h5 {
+  font-size: 18px;
+  line-height: 27px;
+}
+
+.doc-tutorial-popup h6 {
+  font-size: 16px;
   line-height: 24px;
 }
 
@@ -31,7 +54,7 @@
   margin: 0px 0px 16px 0px;
   font-weight: 400;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
 }
 
 .doc-tutorial-popup a,
@@ -42,7 +65,7 @@
 .doc-tutorial-popup li {
   font-weight: 400;
   font-size: 14px;
-  line-height: 22px;
+  line-height: 21px;
 }
 
 .doc-tutorial-popup ol,
@@ -52,13 +75,23 @@
 
 .doc-tutorial-popup code {
   padding: 2px 5px;
-  background: #FFFFFF;
-  border: 1px solid #E1E4E5;
-  color: #333333;
+  color: var(--grist-theme-tutorials-popup-code-fg, #333333);
+  background: var(--grist-theme-tutorials-popup-code-bg, #FFFFFF);
+  border: 1px solid var(--grist-theme-tutorials-popup-code-border, #E1E4E5);
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
+.doc-tutorial-popup pre {
+  background: var(--grist-theme-tutorials-popup-code-bg, #FFFFFF);
+  border: 1px solid var(--grist-theme-tutorials-popup-code-border, #E1E4E5);
+}
+
+.doc-tutorial-popup pre > code {
+  background: none;
+  border: none;
+}
+
 .doc-tutorial-popup iframe {
   border: none;
 }
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
index 605e3fda..f7c8329f 100644
--- a/app/client/ui2018/cssVars.ts
+++ b/app/client/ui2018/cssVars.ts
@@ -762,6 +762,9 @@ export const theme = {
   tutorialsPopupHeaderFg: new CustomProp('theme-tutorials-popup-header-fg', undefined,
     colors.lightGreen),
   tutorialsPopupBoxBg: new CustomProp('theme-tutorials-popup-box-bg', undefined, '#F5F5F5'),
+  tutorialsPopupCodeFg: new CustomProp('theme-tutorials-popup-code-fg', undefined, '#333333'),
+  tutorialsPopupCodeBg: new CustomProp('theme-tutorials-popup-code-bg', undefined, '#FFFFFF'),
+  tutorialsPopupCodeBorder: new CustomProp('theme-tutorials-popup-code-border', undefined, '#E1E4E5'),
 
   /* Ace */
   aceEditorBg: new CustomProp('theme-ace-editor-bg', undefined, 'white'),
diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts
index 6dfab272..730b6dee 100644
--- a/app/common/ThemePrefs-ti.ts
+++ b/app/common/ThemePrefs-ti.ts
@@ -378,6 +378,9 @@ export const ThemeColors = t.iface([], {
   "tutorials-popup-border": "string",
   "tutorials-popup-header-fg": "string",
   "tutorials-popup-box-bg": "string",
+  "tutorials-popup-code-fg": "string",
+  "tutorials-popup-code-bg": "string",
+  "tutorials-popup-code-border": "string",
   "ace-editor-bg": "string",
   "ace-autocomplete-primary-fg": "string",
   "ace-autocomplete-secondary-fg": "string",
diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts
index 463c81cd..6d7fe9c7 100644
--- a/app/common/ThemePrefs.ts
+++ b/app/common/ThemePrefs.ts
@@ -490,6 +490,9 @@ export interface ThemeColors {
   'tutorials-popup-border': string;
   'tutorials-popup-header-fg': string;
   'tutorials-popup-box-bg': string;
+  'tutorials-popup-code-fg': string;
+  'tutorials-popup-code-bg': string;
+  'tutorials-popup-code-border': string;
 
   /* Ace */
   'ace-editor-bg': string;
diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
index a428a469..0e7c19a9 100644
--- a/app/common/themes/GristDark.ts
+++ b/app/common/themes/GristDark.ts
@@ -469,6 +469,9 @@ export const GristDark: ThemeColors = {
   'tutorials-popup-border': '#70707D',
   'tutorials-popup-header-fg': '#FFFFFF',
   'tutorials-popup-box-bg': '#60606D',
+  'tutorials-popup-code-fg': '#FFFFFF',
+  'tutorials-popup-code-bg': '#262633',
+  'tutorials-popup-code-border': '#929299',
 
   /* Ace */
   'ace-editor-bg': '#32323F',
diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
index b891be0c..00de9ccc 100644
--- a/app/common/themes/GristLight.ts
+++ b/app/common/themes/GristLight.ts
@@ -469,6 +469,9 @@ export const GristLight: ThemeColors = {
   'tutorials-popup-border': '#D9D9D9',
   'tutorials-popup-header-fg': '#FFFFFF',
   'tutorials-popup-box-bg': '#F5F5F5',
+  'tutorials-popup-code-fg': '#333333',
+  'tutorials-popup-code-bg': '#FFFFFF',
+  'tutorials-popup-code-border': '#E1E4E5',
 
   /* Ace */
   'ace-editor-bg': 'white',