diff --git a/special-pages/package.json b/special-pages/package.json
index 578143cc03..913ddedf70 100644
--- a/special-pages/package.json
+++ b/special-pages/package.json
@@ -19,6 +19,7 @@
     "test.android": "npm run test-int -- --project android",
     "test.headed": "npm run test-int -- --headed",
     "test.ui": "npm run test-int -- --ui",
+    "preserve": "npm run build.dev",
     "serve": "http-server -c-1 --port 3210 ../build/integration/pages",
     "watch": "node watch.mjs"
   },
diff --git a/special-pages/pages/new-tab/messages/customizer_deleteImage.notify.json b/special-pages/pages/new-tab/messages/customizer_deleteImage.notify.json
new file mode 100644
index 0000000000..7d778cdd79
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_deleteImage.notify.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": [
+    "id"
+  ],
+  "properties": {
+    "id": {
+      "type": "string"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_onBackgroundUpdate.subscribe.json b/special-pages/pages/new-tab/messages/customizer_onBackgroundUpdate.subscribe.json
new file mode 100644
index 0000000000..4007eb5a64
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_onBackgroundUpdate.subscribe.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/background-data.json"
+    }
+  ]
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_onColorUpdate.subscribe.json b/special-pages/pages/new-tab/messages/customizer_onColorUpdate.subscribe.json
new file mode 100644
index 0000000000..ea202ed0ef
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_onColorUpdate.subscribe.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/user-color-data.json"
+    }
+  ]
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_onImagesUpdate.subscribe.json b/special-pages/pages/new-tab/messages/customizer_onImagesUpdate.subscribe.json
new file mode 100644
index 0000000000..8d32e84360
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_onImagesUpdate.subscribe.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/user-image-data.json"
+    }
+  ]
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_onThemeUpdate.subscribe.json b/special-pages/pages/new-tab/messages/customizer_onThemeUpdate.subscribe.json
new file mode 100644
index 0000000000..bedf7ed51a
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_onThemeUpdate.subscribe.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/theme-data.json"
+    }
+  ]
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_setBackground.notify.json b/special-pages/pages/new-tab/messages/customizer_setBackground.notify.json
new file mode 100644
index 0000000000..ea9b4b40f8
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_setBackground.notify.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": [
+    "background"
+  ],
+  "properties": {
+    "background": {
+      "$ref": "./types/background.json#/definitions/background-variant"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_setTheme.notify.json b/special-pages/pages/new-tab/messages/customizer_setTheme.notify.json
new file mode 100644
index 0000000000..8acd7bb2a9
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_setTheme.notify.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["theme"],
+  "properties": {
+    "theme": {
+      "$ref": "types/browser-theme.json"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/customizer_upload.notify.json b/special-pages/pages/new-tab/messages/customizer_upload.notify.json
new file mode 100644
index 0000000000..0af74a3197
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/customizer_upload.notify.json
@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}
diff --git a/special-pages/pages/new-tab/messages/examples/widgets.js b/special-pages/pages/new-tab/messages/examples/widgets.js
index e3ff48d08e..bee51c554b 100644
--- a/special-pages/pages/new-tab/messages/examples/widgets.js
+++ b/special-pages/pages/new-tab/messages/examples/widgets.js
@@ -41,6 +41,7 @@ const initialSetupResponse = {
     locale: 'en',
     platform: { name: 'windows' },
     updateNotification: { content: null },
+    customizer: { theme: 'system', userImages: [], userColor: null, background: { kind: 'default' } },
 };
 
 export {};
diff --git a/special-pages/pages/new-tab/messages/initialSetup.response.json b/special-pages/pages/new-tab/messages/initialSetup.response.json
index b08fb9352c..2cd81f6779 100644
--- a/special-pages/pages/new-tab/messages/initialSetup.response.json
+++ b/special-pages/pages/new-tab/messages/initialSetup.response.json
@@ -29,6 +29,9 @@
         }
       }
     },
+    "customizer": {
+      "$ref": "./types/customizer-data.json"
+    },
     "updateNotification": {
       "oneOf": [
         {
diff --git a/special-pages/pages/new-tab/messages/types/background-data.json b/special-pages/pages/new-tab/messages/types/background-data.json
new file mode 100644
index 0000000000..5f12c1f734
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/background-data.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Background Data",
+  "type": "object",
+  "required": ["background"],
+  "properties": {
+    "background": {
+      "$ref": "./background.json#/definitions/background-variant"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/background.json b/special-pages/pages/new-tab/messages/types/background.json
new file mode 100644
index 0000000000..42061f0ba8
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/background.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "definitions": {
+    "background-variant": {
+      "title": "Background Variant",
+      "oneOf": [
+        {
+          "$ref": "#/definitions/default"
+        },
+        {
+          "$ref": "#/definitions/solid"
+        },
+        {
+          "$ref": "#/definitions/hex"
+        },
+        {
+          "$ref": "#/definitions/gradient"
+        },
+        {
+          "$ref": "#/definitions/image"
+        }
+      ]
+    },
+    "default": {
+      "type": "object",
+      "required": [
+        "kind"
+      ],
+      "title": "Default Background",
+      "properties": {
+        "kind": {
+          "const": "default"
+        }
+      }
+    },
+    "solid": {
+      "type": "object",
+      "required": [
+        "kind",
+        "value"
+      ],
+      "title": "Solid Color Background",
+      "properties": {
+        "kind": {
+          "const": "color"
+        },
+        "value": {
+          "$ref": "./colors.json#/definitions/colors"
+        }
+      }
+    },
+    "hex": {
+      "type": "object",
+      "required": [
+        "kind",
+        "value"
+      ],
+      "title": "Hex Value Background",
+      "properties": {
+        "kind": {
+          "const": "hex"
+        },
+        "value": {
+          "type": "string"
+        }
+      }
+    },
+    "gradient":     {
+      "type": "object",
+      "required": [
+        "kind",
+        "value"
+      ],
+      "title": "Gradient Background",
+      "properties": {
+        "kind": {
+          "const": "gradient"
+        },
+        "value": {
+          "$ref": "./colors.json#/definitions/gradients"
+        }
+      }
+    },
+    "image":     {
+      "type": "object",
+      "required": [
+        "kind",
+        "value"
+      ],
+      "title": "User Image Background",
+      "properties": {
+        "kind": {
+          "const": "userImage"
+        },
+        "value": {
+          "$ref": "./user-image.json"
+        }
+      }
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/browser-theme.json b/special-pages/pages/new-tab/messages/types/browser-theme.json
new file mode 100644
index 0000000000..1ce532afbd
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/browser-theme.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Browser Theme",
+  "enum": [
+    "light",
+    "dark",
+    "system"
+  ]
+}
diff --git a/special-pages/pages/new-tab/messages/types/colors.json b/special-pages/pages/new-tab/messages/types/colors.json
new file mode 100644
index 0000000000..05f44d2a0f
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/colors.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "definitions": {
+    "gradients": {
+      "title": "Predefined Gradient",
+      "enum": [
+        "gradient01",
+        "gradient02",
+        "gradient03",
+        "gradient04",
+        "gradient05",
+        "gradient06",
+        "gradient07",
+        "gradient08"
+      ]
+    },
+    "colors": {
+      "title": "Predefined Color",
+      "enum": [
+        "color01",
+        "color02",
+        "color03",
+        "color04",
+        "color05",
+        "color06",
+        "color07",
+        "color08",
+        "color09",
+        "color10",
+        "color11",
+        "color12",
+        "color13",
+        "color14",
+        "color15",
+        "color16",
+        "color17",
+        "color18",
+        "color19"
+      ]
+    },
+    "colorScheme": {
+      "title": "Background Color Scheme",
+      "description": "Note: this is different to the Browser Theme",
+      "enum": ["light", "dark"]
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/customizer-data.json b/special-pages/pages/new-tab/messages/types/customizer-data.json
new file mode 100644
index 0000000000..70dab1f7f7
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/customizer-data.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Customizer Data",
+  "type": "object",
+  "required": [
+    "background",
+    "theme",
+    "userImages",
+    "userColor"
+  ],
+  "properties": {
+    "background": {"$ref": "./background.json#/definitions/background-variant"},
+    "theme": { "$ref": "./browser-theme.json" },
+    "userImages": {
+      "type": "array",
+      "items": {
+        "$ref": "./user-image.json"
+      }
+    },
+    "userColor": {
+      "$ref": "./user-color-data.json#/definitions/userColor"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/theme-data.json b/special-pages/pages/new-tab/messages/types/theme-data.json
new file mode 100644
index 0000000000..0766788082
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/theme-data.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": [
+    "theme"
+  ],
+  "properties": {
+    "theme": {
+      "$ref": "./browser-theme.json"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/user-color-data.json b/special-pages/pages/new-tab/messages/types/user-color-data.json
new file mode 100644
index 0000000000..350cc65cff
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/user-color-data.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "User Color Data",
+  "type": "object",
+  "required": [
+    "userColor"
+  ],
+  "properties": {
+    "userColor": {"$ref": "#/definitions/userColor"}
+  },
+  "definitions": {
+    "userColor": {
+      "oneOf": [
+        {"type": "null"},
+        {"$ref": "./background.json#/definitions/hex"}
+      ]
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/user-image-data.json b/special-pages/pages/new-tab/messages/types/user-image-data.json
new file mode 100644
index 0000000000..d8d4a8846b
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/user-image-data.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "User Image Data",
+  "type": "object",
+  "required": [
+    "userImages"
+  ],
+  "properties": {
+    "userImages": {
+      "type": "array",
+      "items": {
+        "$ref": "./user-image.json"
+      }
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/messages/types/user-image.json b/special-pages/pages/new-tab/messages/types/user-image.json
new file mode 100644
index 0000000000..1736f44134
--- /dev/null
+++ b/special-pages/pages/new-tab/messages/types/user-image.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "UserImage",
+  "type": "object",
+  "required": ["id", "colorScheme", "src", "thumb"],
+  "properties": {
+    "id": {
+      "type": "string"
+    },
+    "src": {
+      "type": "string"
+    },
+    "thumb": {
+      "type": "string"
+    },
+    "colorScheme": {
+      "$ref": "./colors.json#/definitions/colorScheme"
+    }
+  }
+}
diff --git a/special-pages/pages/new-tab/public/backgrounds/bg-01-thumb.jpg b/special-pages/pages/new-tab/public/backgrounds/bg-01-thumb.jpg
new file mode 100644
index 0000000000..6e0da17afb
Binary files /dev/null and b/special-pages/pages/new-tab/public/backgrounds/bg-01-thumb.jpg differ
diff --git a/special-pages/pages/new-tab/public/backgrounds/bg-01.jpg b/special-pages/pages/new-tab/public/backgrounds/bg-01.jpg
new file mode 100644
index 0000000000..a4af5d0fb0
Binary files /dev/null and b/special-pages/pages/new-tab/public/backgrounds/bg-01.jpg differ
diff --git a/special-pages/pages/new-tab/public/backgrounds/bg-02-thumb.jpg b/special-pages/pages/new-tab/public/backgrounds/bg-02-thumb.jpg
new file mode 100644
index 0000000000..d39ec6fcb0
Binary files /dev/null and b/special-pages/pages/new-tab/public/backgrounds/bg-02-thumb.jpg differ
diff --git a/special-pages/pages/new-tab/public/backgrounds/bg-02.jpg b/special-pages/pages/new-tab/public/backgrounds/bg-02.jpg
new file mode 100644
index 0000000000..c1bf4a0e3a
Binary files /dev/null and b/special-pages/pages/new-tab/public/backgrounds/bg-02.jpg differ
diff --git a/special-pages/pages/new-tab/public/backgrounds/bg-03-thumb.jpg b/special-pages/pages/new-tab/public/backgrounds/bg-03-thumb.jpg
new file mode 100644
index 0000000000..06bf64d7a6
Binary files /dev/null and b/special-pages/pages/new-tab/public/backgrounds/bg-03-thumb.jpg differ
diff --git a/special-pages/pages/new-tab/public/backgrounds/bg-03.jpg b/special-pages/pages/new-tab/public/backgrounds/bg-03.jpg
new file mode 100644
index 0000000000..c7265d5f2a
Binary files /dev/null and b/special-pages/pages/new-tab/public/backgrounds/bg-03.jpg differ
diff --git a/special-pages/pages/new-tab/public/gradients/gradient01.svg b/special-pages/pages/new-tab/public/gradients/gradient01.svg
new file mode 100644
index 0000000000..a9fcd06723
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient01.svg
@@ -0,0 +1,46 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504728)">
+        <rect width="882" height="493" fill="white"/>
+        <rect x="0.000244141" width="882" height="493" fill="url(#paint0_radial_1483_504728)"/>
+        <rect x="0.000244141" width="882" height="493" fill="url(#paint1_radial_1483_504728)"/>
+        <rect x="0.000244141" width="882" height="493" fill="url(#paint2_radial_1483_504728)"/>
+        <rect x="0.000244141" width="882" height="493" fill="url(#paint3_radial_1483_504728)"/>
+        <rect x="0.000244141" width="882" height="493" fill="url(#paint4_radial_1483_504728)"/>
+        <rect x="0.000244141" width="882" height="493" fill="url(#paint5_radial_1483_504728)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.5">
+            <rect width="882" height="493" transform="translate(0.000244141)" fill="url(#pattern0_1483_504728)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504728" patternContentUnits="objectBoundingBox" width="0.0639546" height="0.114418">
+            <use xlink:href="#image0_1483_504728" transform="scale(0.000399716 0.000715111)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-120.93 -49.3) rotate(39.5863) scale(638.397 402.579)">
+            <stop stop-color="#FFD65C" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#FFD65C" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(911.285 185.134) rotate(-173.778) scale(572.539 443.044)">
+            <stop stop-color="#EB876C" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="#EB876C" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(922.311 105.15) rotate(-179.102) scale(616.098 476.758)">
+            <stop stop-color="#F8BBAA" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#F8BBAA" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_1483_504728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-232.558 246.5) rotate(7.94364) scale(553.808 449.97)">
+            <stop stop-color="#F2A18A" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#EB876C" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint4_radial_1483_504728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(868.563 576.775) rotate(-121.696) scale(687.205 531.284)">
+            <stop stop-color="#FFF0C2" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#FFF0C2" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint5_radial_1483_504728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(412.404 201.682) rotate(-132.807) scale(462.399 401.699)">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504728">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient02.svg b/special-pages/pages/new-tab/public/gradients/gradient02.svg
new file mode 100644
index 0000000000..de7ab3b7e0
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient02.svg
@@ -0,0 +1,46 @@
+<svg width="1280" height="726" viewBox="0 0 1280 726" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1485_49670)">
+        <rect width="1298.85" height="726" fill="white"/>
+        <rect x="0.000183105" y="0.000488281" width="1298.85" height="726" fill="url(#paint0_radial_1485_49670)"/>
+        <rect x="0.000183105" y="0.000488281" width="1298.85" height="726" fill="url(#paint1_radial_1485_49670)"/>
+        <rect x="0.000183105" y="0.000488281" width="1298.85" height="726" fill="url(#paint2_radial_1485_49670)"/>
+        <rect x="0.000183105" y="0.000488281" width="1298.85" height="726" fill="url(#paint3_radial_1485_49670)"/>
+        <rect x="0.000183105" y="0.000488281" width="1298.85" height="726" fill="url(#paint4_radial_1485_49670)"/>
+        <rect x="0.000183105" y="0.000488281" width="1298.85" height="726" fill="url(#paint5_radial_1485_49670)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.5">
+            <rect width="1298.85" height="726" transform="translate(0.000183105 0.000488281)" fill="url(#pattern0_1485_49670)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1485_49670" patternContentUnits="objectBoundingBox" width="0.0434292" height="0.0776969">
+            <use xlink:href="#image0_1485_49670" transform="scale(0.000271433 0.000485606)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1485_49670" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0.000166657 525.208) rotate(-19.2533) scale(1219.41 1262.45)">
+            <stop stop-color="#FFD7CC"/>
+            <stop offset="1" stop-color="#FFD7CC" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1485_49670" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1155.26 -67.7763) rotate(127.99) scale(613.262 818.947)">
+            <stop stop-color="#C7B9EE"/>
+            <stop offset="1" stop-color="#FFD7CC" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1485_49670" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1074.09 809.516) rotate(-126.025) scale(552.1 1953.88)">
+            <stop stop-color="#FFD7CC" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#FFD7CC" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_1485_49670" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1366.33 269.331) rotate(162.324) scale(668.823 893.757)">
+            <stop stop-color="#CCDAFF"/>
+            <stop offset="1" stop-color="#FFD7CC" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint4_radial_1485_49670" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-74.5822 -10.9149) rotate(35.1244) scale(1161.24 1009.07)">
+            <stop stop-color="#A591DC" stop-opacity="0.7"/>
+            <stop offset="1" stop-color="#FFD7CC" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint5_radial_1485_49670" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(741.257 435.854) rotate(59.673) scale(385.846 335.106)">
+            <stop stop-color="white" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1485_49670">
+            <rect width="1298.85" height="726" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient03.svg b/special-pages/pages/new-tab/public/gradients/gradient03.svg
new file mode 100644
index 0000000000..0639b84c25
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient03.svg
@@ -0,0 +1,31 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504730)">
+        <rect width="882" height="493" fill="#FFDE7A"/>
+        <rect x="0.000244141" y="0.000488281" width="882" height="493" fill="url(#paint0_radial_1483_504730)"/>
+        <rect x="0.000244141" y="0.000488281" width="882" height="493" fill="url(#paint1_radial_1483_504730)"/>
+        <rect x="0.000244141" y="0.000488281" width="882" height="493" fill="url(#paint2_radial_1483_504730)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.4">
+            <rect width="882" height="493" transform="translate(0.000244141 0.000488281)" fill="url(#pattern0_1483_504730)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504730" patternContentUnits="objectBoundingBox" width="0.0639546" height="0.114418">
+            <use xlink:href="#image0_1483_504730" transform="scale(0.000399716 0.000715111)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(916.453 533.164) rotate(-118.575) scale(628.117 844.638)">
+            <stop stop-color="#FFCC33" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#E46F4F" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(497.503 246.501) rotate(33.7465) scale(908.249 1073.71)">
+            <stop stop-color="#FFD65C" stop-opacity="0.7"/>
+            <stop offset="1" stop-color="#FFD7CC" stop-opacity="0.2"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-232.558 246.5) rotate(7.94364) scale(553.808 449.97)">
+            <stop stop-color="#F2A18A" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#EB876C" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504730">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient04.svg b/special-pages/pages/new-tab/public/gradients/gradient04.svg
new file mode 100644
index 0000000000..9843eade10
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient04.svg
@@ -0,0 +1,31 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504731)">
+        <rect width="882" height="493" fill="#F8BBAA"/>
+        <rect x="0.000244141" y="0.000488281" width="882" height="493" fill="url(#paint0_radial_1483_504731)"/>
+        <rect x="0.000244141" y="0.000488281" width="882" height="493" fill="url(#paint1_radial_1483_504731)"/>
+        <rect x="0.000244141" y="0.000488281" width="882" height="493" fill="url(#paint2_radial_1483_504731)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.3">
+            <rect width="882" height="493" transform="translate(0.000244141 0.000488281)" fill="url(#pattern0_1483_504731)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504731" patternContentUnits="objectBoundingBox" width="0.0639546" height="0.114418">
+            <use xlink:href="#image0_1483_504731" transform="scale(0.000399716 0.000715111)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504731" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(511.629 64.8145) rotate(94.5331) scale(893.643 2631.22)">
+            <stop stop-color="#DE5833" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#DE5833" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504731" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(843.757 581.947) rotate(-129.984) scale(872.887 822.549)">
+            <stop stop-color="#5132A9" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#DE5833" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504731" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-64.4271 310.28) rotate(-14.1495) scale(733.362 846.634)">
+            <stop stop-color="#FFCC33" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#E46F4F" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504731">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient05.svg b/special-pages/pages/new-tab/public/gradients/gradient05.svg
new file mode 100644
index 0000000000..eee5ce1a30
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient05.svg
@@ -0,0 +1,46 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504732)">
+        <rect width="882" height="493" fill="#557FF3"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint0_radial_1483_504732)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint1_radial_1483_504732)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint2_radial_1483_504732)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint3_radial_1483_504732)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint4_radial_1483_504732)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint5_radial_1483_504732)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.3">
+            <rect width="882" height="493" transform="translate(0.000244141 -0.000488281)" fill="url(#pattern0_1483_504732)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504732" patternContentUnits="objectBoundingBox" width="0.0639546" height="0.114418">
+            <use xlink:href="#image0_1483_504732" transform="scale(0.000399716 0.000715111)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504732" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(569.51 587.463) rotate(-101.129) scale(1070.95 2416.27)">
+            <stop stop-color="#3E228C" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#557FF3" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504732" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(555.729 590.22) rotate(-105.348) scale(812.252 1445.78)">
+            <stop stop-color="#3E228C" stop-opacity="0.4"/>
+            <stop offset="1" stop-color="#557FF3" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504732" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-61.6709 537.818) rotate(-34.0782) scale(472.534 811.962)">
+            <stop stop-color="#1E42A4" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#2B55CA" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_1483_504732" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(679.76 -74.4676) rotate(116.944) scale(717.78 723.948)">
+            <stop stop-color="#876ECB" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#876ECB" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint4_radial_1483_504732" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(919.554 33.096) rotate(157.829) scale(657.766 503.612)">
+            <stop stop-color="#876ECB" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#876ECB" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint5_radial_1483_504732" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(914.042 22.0638) rotate(138.214) scale(587.742 508.305)">
+            <stop stop-color="#EB876C" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#EB876C" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504732">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient06.svg b/special-pages/pages/new-tab/public/gradients/gradient06.svg
new file mode 100644
index 0000000000..a91178e5f9
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient06.svg
@@ -0,0 +1,31 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504733)">
+        <rect width="882" height="493" fill="#5132A9"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint0_radial_1483_504733)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint1_radial_1483_504733)"/>
+        <rect x="0.000244141" y="-0.000488281" width="882" height="493" fill="url(#paint2_radial_1483_504733)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.3">
+            <rect width="882" height="493" transform="translate(0.000244141 -0.000488281)" fill="url(#pattern0_1483_504733)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504733" patternContentUnits="objectBoundingBox" width="0.0639546" height="0.114418">
+            <use xlink:href="#image0_1483_504733" transform="scale(0.000399716 0.000715111)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-17.5709 492.999) rotate(-34.9642) scale(928.268 724.013)">
+            <stop stop-color="#876ECB" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#5132A9" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(594.317 -30.6837) rotate(124.375) scale(1052.61 667.441)">
+            <stop stop-color="#DE5833" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#5132A9" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(903.017 71.3638) rotate(168.366) scale(1271.96 920.191)">
+            <stop stop-color="#DE5833" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#5132A9" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504733">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient07.svg b/special-pages/pages/new-tab/public/gradients/gradient07.svg
new file mode 100644
index 0000000000..1527605f9d
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient07.svg
@@ -0,0 +1,51 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504734)">
+        <rect width="882" height="493" fill="#051133"/>
+        <rect y="-0.304688" width="882" height="493" fill="url(#paint0_radial_1483_504734)"/>
+        <rect y="-0.304688" width="882" height="493" fill="url(#paint1_radial_1483_504734)"/>
+        <rect y="-0.304688" width="882" height="493" fill="url(#paint2_radial_1483_504734)"/>
+        <rect y="-0.304688" width="882" height="493" fill="url(#paint3_radial_1483_504734)"/>
+        <rect y="-0.304688" width="882" height="493" fill="url(#paint4_radial_1483_504734)"/>
+        <rect y="-0.304688" width="882" height="493" fill="url(#paint5_radial_1483_504734)"/>
+        <rect y="-0.472656" width="882" height="493" fill="url(#paint6_radial_1483_504734)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.3">
+            <rect width="882.965" height="493.219" fill="url(#pattern0_1483_504734)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504734" patternContentUnits="objectBoundingBox" width="0.0638847" height="0.114367">
+            <use xlink:href="#image0_1483_504734" transform="scale(0.00039928 0.000714794)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-14.1943 506.139) rotate(-40.4573) scale(129.454 282.634)">
+            <stop stop-color="#051133"/>
+            <stop offset="1" stop-color="#051133" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.929 -19.4386) rotate(32.0966) scale(847.989 387.206)">
+            <stop stop-color="#6B4EBA" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#1D0A53" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(377.306 -68.8614) rotate(64.5678) scale(633.378 533.417)">
+            <stop stop-color="#14307E" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#1E42A4" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(922.31 -58.0512) rotate(157.924) scale(895.27 528.109)">
+            <stop stop-color="#5132A9" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#876ECB" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint4_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(845.306 -234.861) rotate(125.224) scale(891.168 1305.4)">
+            <stop stop-color="#DE5833" stop-opacity="0.2"/>
+            <stop offset="1" stop-color="#5132A9" stop-opacity="0.1"/>
+        </radialGradient>
+        <radialGradient id="paint5_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(693.306 -114.861) rotate(100.603) scale(413.052 1038.89)">
+            <stop stop-color="#DE5833" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#5132A9" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint6_radial_1483_504734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(415.306 135.139) rotate(49.2892) scale(453.819 878.042)">
+            <stop stop-color="#14307E" stop-opacity="0.2"/>
+            <stop offset="1" stop-color="#1E42A4" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504734">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/gradient08.svg b/special-pages/pages/new-tab/public/gradients/gradient08.svg
new file mode 100644
index 0000000000..a7c77f9a44
--- /dev/null
+++ b/special-pages/pages/new-tab/public/gradients/gradient08.svg
@@ -0,0 +1,36 @@
+<svg width="882" height="493" viewBox="0 0 882 493" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g clip-path="url(#clip0_1483_504735)">
+        <rect width="882" height="493" fill="#070019"/>
+        <rect y="-0.000244141" width="882" height="493" fill="url(#paint0_radial_1483_504735)"/>
+        <rect y="-0.000244141" width="882" height="493" fill="url(#paint1_radial_1483_504735)"/>
+        <rect y="-0.000244141" width="882" height="493" fill="url(#paint2_radial_1483_504735)"/>
+        <rect y="-0.000244141" width="882" height="493" fill="url(#paint3_radial_1483_504735)"/>
+        <g style="mix-blend-mode:soft-light" opacity="0.3">
+            <rect width="882" height="493" transform="translate(0 -0.000244141)" fill="url(#pattern0_1483_504735)"/>
+        </g>
+    </g>
+    <defs>
+        <pattern id="pattern0_1483_504735" patternContentUnits="objectBoundingBox" width="0.0639546" height="0.114418">
+            <use xlink:href="#image0_1483_504735" transform="scale(0.000399716 0.000715111)"/>
+        </pattern>
+        <radialGradient id="paint0_radial_1483_504735" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-29.9742 -38.4405) rotate(52.4323) scale(772.47 352.719)">
+            <stop stop-color="#110336" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#110336" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint1_radial_1483_504735" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(623.257 -203.923) rotate(130.021) scale(777.922 458.622)">
+            <stop stop-color="#2C146F" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="#2C146F" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_1483_504735" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(671.491 -183.238) rotate(116.606) scale(630.819 923.469)">
+            <stop stop-color="#EB876C" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#2C146F" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_1483_504735" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(151.938 -92.2222) rotate(64.1685) scale(663.404 971.156)">
+            <stop stop-color="#0B2059" stop-opacity="0.8"/>
+            <stop offset="1" stop-color="#110336" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_1483_504735">
+            <rect width="882" height="493" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/special-pages/pages/new-tab/public/gradients/grain.png b/special-pages/pages/new-tab/public/gradients/grain.png
new file mode 100644
index 0000000000..8d3ef5245c
Binary files /dev/null and b/special-pages/pages/new-tab/public/gradients/grain.png differ
diff --git a/special-pages/pages/new-tab/types/new-tab.ts b/special-pages/pages/new-tab/types/new-tab.ts
index 888e36b868..2697cc8bf6 100644
--- a/special-pages/pages/new-tab/types/new-tab.ts
+++ b/special-pages/pages/new-tab/types/new-tab.ts
@@ -6,6 +6,46 @@
  * @module NewTab Messages
  */
 
+export type BackgroundVariant =
+  | DefaultBackground
+  | SolidColorBackground
+  | HexValueBackground
+  | GradientBackground
+  | UserImageBackground;
+export type PredefinedColor =
+  | "color01"
+  | "color02"
+  | "color03"
+  | "color04"
+  | "color05"
+  | "color06"
+  | "color07"
+  | "color08"
+  | "color09"
+  | "color10"
+  | "color11"
+  | "color12"
+  | "color13"
+  | "color14"
+  | "color15"
+  | "color16"
+  | "color17"
+  | "color18"
+  | "color19";
+export type PredefinedGradient =
+  | "gradient01"
+  | "gradient02"
+  | "gradient03"
+  | "gradient04"
+  | "gradient05"
+  | "gradient06"
+  | "gradient07"
+  | "gradient08";
+/**
+ * Note: this is different to the Browser Theme
+ */
+export type BackgroundColorScheme = "light" | "dark";
+export type BrowserTheme = "light" | "dark" | "system";
 /**
  * Represents the expansion state of a widget
  */
@@ -45,6 +85,10 @@ export type RMFIcon = "Announce" | "DDGAnnounce" | "CriticalUpdate" | "AppUpdate
 export interface NewTabMessages {
   notifications:
     | ContextMenuNotification
+    | CustomizerDeleteImageNotification
+    | CustomizerSetBackgroundNotification
+    | CustomizerSetThemeNotification
+    | CustomizerUploadNotification
     | FavoritesAddNotification
     | FavoritesMoveNotification
     | FavoritesOpenNotification
@@ -74,6 +118,10 @@ export interface NewTabMessages {
     | StatsGetConfigRequest
     | StatsGetDataRequest;
   subscriptions:
+    | CustomizerOnBackgroundUpdateSubscription
+    | CustomizerOnColorUpdateSubscription
+    | CustomizerOnImagesUpdateSubscription
+    | CustomizerOnThemeUpdateSubscription
     | FavoritesOnConfigUpdateSubscription
     | FavoritesOnDataUpdateSubscription
     | NextStepsOnConfigUpdateSubscription
@@ -101,6 +149,67 @@ export interface VisibilityMenuItem {
    */
   title: string;
 }
+/**
+ * Generated from @see "../messages/customizer_deleteImage.notify.json"
+ */
+export interface CustomizerDeleteImageNotification {
+  method: "customizer_deleteImage";
+  params: CustomizerDeleteImageNotify;
+}
+export interface CustomizerDeleteImageNotify {
+  id: string;
+}
+/**
+ * Generated from @see "../messages/customizer_setBackground.notify.json"
+ */
+export interface CustomizerSetBackgroundNotification {
+  method: "customizer_setBackground";
+  params: CustomizerSetBackgroundNotify;
+}
+export interface CustomizerSetBackgroundNotify {
+  background: BackgroundVariant;
+}
+export interface DefaultBackground {
+  kind: "default";
+}
+export interface SolidColorBackground {
+  kind: "color";
+  value: PredefinedColor;
+}
+export interface HexValueBackground {
+  kind: "hex";
+  value: string;
+}
+export interface GradientBackground {
+  kind: "gradient";
+  value: PredefinedGradient;
+}
+export interface UserImageBackground {
+  kind: "userImage";
+  value: UserImage;
+}
+export interface UserImage {
+  id: string;
+  src: string;
+  thumb: string;
+  colorScheme: BackgroundColorScheme;
+}
+/**
+ * Generated from @see "../messages/customizer_setTheme.notify.json"
+ */
+export interface CustomizerSetThemeNotification {
+  method: "customizer_setTheme";
+  params: CustomizerSetThemeNotify;
+}
+export interface CustomizerSetThemeNotify {
+  theme: BrowserTheme;
+}
+/**
+ * Generated from @see "../messages/customizer_upload.notify.json"
+ */
+export interface CustomizerUploadNotification {
+  method: "customizer_upload";
+}
 /**
  * Generated from @see "../messages/favorites_add.notify.json"
  */
@@ -369,6 +478,7 @@ export interface InitialSetupResponse {
   platform: {
     name: "macos" | "windows" | "android" | "ios" | "integration";
   };
+  customizer?: CustomizerData;
   updateNotification: null | UpdateNotificationData;
 }
 export interface WidgetListItem {
@@ -382,6 +492,12 @@ export interface NewTabPageSettings {
     state: "enabled" | "disabled";
   };
 }
+export interface CustomizerData {
+  background: BackgroundVariant;
+  theme: BrowserTheme;
+  userImages: UserImage[];
+  userColor: null | HexValueBackground;
+}
 export interface UpdateNotificationData {
   content: null | UpdateNotification;
 }
@@ -474,6 +590,46 @@ export interface TrackerCompany {
   displayName: string;
   count: number;
 }
+/**
+ * Generated from @see "../messages/customizer_onBackgroundUpdate.subscribe.json"
+ */
+export interface CustomizerOnBackgroundUpdateSubscription {
+  subscriptionEvent: "customizer_onBackgroundUpdate";
+  params: BackgroundData;
+}
+export interface BackgroundData {
+  background: BackgroundVariant;
+}
+/**
+ * Generated from @see "../messages/customizer_onColorUpdate.subscribe.json"
+ */
+export interface CustomizerOnColorUpdateSubscription {
+  subscriptionEvent: "customizer_onColorUpdate";
+  params: UserColorData;
+}
+export interface UserColorData {
+  userColor: null | HexValueBackground;
+}
+/**
+ * Generated from @see "../messages/customizer_onImagesUpdate.subscribe.json"
+ */
+export interface CustomizerOnImagesUpdateSubscription {
+  subscriptionEvent: "customizer_onImagesUpdate";
+  params: UserImageData;
+}
+export interface UserImageData {
+  userImages: UserImage[];
+}
+/**
+ * Generated from @see "../messages/customizer_onThemeUpdate.subscribe.json"
+ */
+export interface CustomizerOnThemeUpdateSubscription {
+  subscriptionEvent: "customizer_onThemeUpdate";
+  params: ThemeData;
+}
+export interface ThemeData {
+  theme: BrowserTheme;
+}
 /**
  * Generated from @see "../messages/favorites_onConfigUpdate.subscribe.json"
  */