diff --git a/admin/class-manage-fonts.php b/admin/class-manage-fonts.php
index c1baeb3..92d77a8 100644
--- a/admin/class-manage-fonts.php
+++ b/admin/class-manage-fonts.php
@@ -64,10 +64,13 @@ class Manage_Fonts_Admin {
         // Automatically load imported dependencies and assets version.
         $asset_file = include plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
      
-        // Enqueue CSS dependencies.
+        // Enqueue CSS dependencies of the scripts included in the build.
         foreach ( $asset_file['dependencies'] as $style ) {
             wp_enqueue_style( $style );
         }
+
+        // Enqueue CSS of the app
+        wp_enqueue_style( 'fonts-app', plugins_url( 'build/index.css', __DIR__ ), array(), $asset_file['version'] );
      
         // Load our app.js.
         array_push( $asset_file['dependencies'], 'wp-i18n' );
@@ -76,7 +79,6 @@ class Manage_Fonts_Admin {
 
     function manage_fonts_admin_page () {
         $this->load_fonts_react_app();
-        wp_enqueue_style( 'manage-fonts-styles',  plugin_dir_url( __DIR__ ) . '/css/manage-fonts.css', array(), '1.0', false );
 
         $theme_name = wp_get_theme()->get( 'Name' );
 
@@ -197,7 +199,6 @@ class Manage_Fonts_Admin {
     }
 
     function google_fonts_admin_page() {
-		wp_enqueue_style('google-fonts-styles',  plugin_dir_url( __DIR__ ) . '/css/google-fonts.css', array(), '1.0', false );
         $this->load_fonts_react_app();
 ?>
         <input id="nonce" type="hidden" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
diff --git a/create-block-theme.php b/create-block-theme.php
index aeafcdc..8aed38f 100644
--- a/create-block-theme.php
+++ b/create-block-theme.php
@@ -5,7 +5,7 @@
  * Plugin Name: Create Block Theme
  * Plugin URI: https://wordpress.org/plugins/create-block-theme
  * Description: Generates a block theme
- * Version: 1.4.0
+ * Version: 1.5.0
  * Author: WordPress.org
  * Author URI: https://wordpress.org/
  * License: GNU General Public License v2 or later
diff --git a/package-lock.json b/package-lock.json
index 0b6a8fa..0f43941 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,16 @@
 {
 	"name": "create-block-theme",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "create-block-theme",
-			"version": "1.4.0",
+			"version": "1.5.0",
 			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/icons": "^9.17.0"
+			},
 			"devDependencies": {
 				"@actions/core": "^1.10.0",
 				"@emotion/babel-plugin": "^11.10.5",
@@ -1956,7 +1959,6 @@
 			"version": "7.20.13",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
 			"integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
-			"dev": true,
 			"dependencies": {
 				"regenerator-runtime": "^0.13.11"
 			},
@@ -3364,8 +3366,7 @@
 		"node_modules/@types/prop-types": {
 			"version": "15.7.5",
 			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-			"dev": true
+			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
 		},
 		"node_modules/@types/qs": {
 			"version": "6.9.7",
@@ -3383,7 +3384,6 @@
 			"version": "18.0.27",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
 			"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
-			"dev": true,
 			"dependencies": {
 				"@types/prop-types": "*",
 				"@types/scheduler": "*",
@@ -3394,7 +3394,6 @@
 			"version": "18.0.10",
 			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
 			"integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
-			"dev": true,
 			"dependencies": {
 				"@types/react": "*"
 			}
@@ -3408,8 +3407,7 @@
 		"node_modules/@types/scheduler": {
 			"version": "0.16.2",
 			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-			"dev": true
+			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
 		},
 		"node_modules/@types/semver": {
 			"version": "7.3.13",
@@ -4004,15 +4002,14 @@
 			}
 		},
 		"node_modules/@wordpress/element": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.2.0.tgz",
-			"integrity": "sha512-0hhFhzcQChSIT5pcOCSGVSK4DEi3xBtuu3uRj3HrYefcthmRdZnAeLGUGaebO5HgcxnImJ/Y0u4r948XFjj9SA==",
-			"dev": true,
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.3.0.tgz",
+			"integrity": "sha512-sgBrPm9suYx9sAtMLnfqgJem54Vew+BvVRpQoKQjpoXAKklGKSr52xOERek2TZQuZl/hMCCdvScrLIIW96UNAw==",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@types/react": "^18.0.21",
 				"@types/react-dom": "^18.0.6",
-				"@wordpress/escape-html": "^2.25.0",
+				"@wordpress/escape-html": "^2.26.0",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
 				"react": "^18.2.0",
@@ -4026,7 +4023,6 @@
 			"version": "18.2.0",
 			"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
 			"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-			"dev": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0"
 			},
@@ -4038,7 +4034,6 @@
 			"version": "18.2.0",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
 			"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-			"dev": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.0"
@@ -4051,16 +4046,14 @@
 			"version": "0.23.0",
 			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
 			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-			"dev": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0"
 			}
 		},
 		"node_modules/@wordpress/escape-html": {
-			"version": "2.25.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.25.0.tgz",
-			"integrity": "sha512-a+k2g/fg/E+XEAjq5O9iFFFMZ1+04JvaekF/ZUzDLLyBzk12D8Zfmg3UiHs0HkMFwZM1uyofpen9TOdGk9Op8Q==",
-			"dev": true,
+			"version": "2.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.26.0.tgz",
+			"integrity": "sha512-uWumpNH4hnmeepTw9K3gC5LmoZECom5L1P6HuZXYXyld8eU5L9p/JdvAPOwLmjffHyJO3hiB2JqYd+nKElbtrw==",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
@@ -4137,6 +4130,19 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@wordpress/icons": {
+			"version": "9.17.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.17.0.tgz",
+			"integrity": "sha512-bz906ftwaUgFFZB7/yrLswl43y4C14eEDhPamJ+3o45VwSr0yeKPFVNF1uOx/uNrRjihZnAyQaqs12/C7L27NQ==",
+			"dependencies": {
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/element": "^5.3.0",
+				"@wordpress/primitives": "^3.24.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/@wordpress/jest-console": {
 			"version": "6.8.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/jest-console/-/jest-console-6.8.0.tgz",
@@ -4210,6 +4216,19 @@
 				"prettier": ">=2"
 			}
 		},
+		"node_modules/@wordpress/primitives": {
+			"version": "3.24.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.24.0.tgz",
+			"integrity": "sha512-VX5iS6VKdMRC+mkd5EOjeq3wfWITPRnTWzTHGH9ozYWHNukE9+yOkeLlmTpW1yTy/IZxSFDGg+vAMDe85lf9oA==",
+			"dependencies": {
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/element": "^5.3.0",
+				"classnames": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/@wordpress/scripts": {
 			"version": "25.2.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-25.2.0.tgz",
@@ -5254,7 +5273,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
 			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-			"dev": true,
 			"dependencies": {
 				"pascal-case": "^3.1.2",
 				"tslib": "^2.0.3"
@@ -5330,7 +5348,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
 			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
-			"dev": true,
 			"dependencies": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -5357,7 +5374,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
 			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
-			"dev": true,
 			"dependencies": {
 				"camel-case": "^4.1.2",
 				"capital-case": "^1.0.4",
@@ -5487,6 +5503,11 @@
 			"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
 			"dev": true
 		},
+		"node_modules/classnames": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+			"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+		},
 		"node_modules/clean-stack": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -5815,7 +5836,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
 			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
-			"dev": true,
 			"dependencies": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -6312,8 +6332,7 @@
 		"node_modules/csstype": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-			"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
-			"dev": true
+			"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
 		},
 		"node_modules/cwd": {
 			"version": "0.10.0",
@@ -6753,7 +6772,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
 			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-			"dev": true,
 			"dependencies": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -8842,7 +8860,6 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
 			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
-			"dev": true,
 			"dependencies": {
 				"capital-case": "^1.0.4",
 				"tslib": "^2.0.3"
@@ -9544,7 +9561,6 @@
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
 			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -10464,8 +10480,7 @@
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-			"dev": true
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
 		"node_modules/js-yaml": {
 			"version": "3.14.1",
@@ -11111,7 +11126,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-			"dev": true,
 			"dependencies": {
 				"js-tokens": "^3.0.0 || ^4.0.0"
 			},
@@ -11123,7 +11137,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
 			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"dev": true,
 			"dependencies": {
 				"tslib": "^2.0.3"
 			}
@@ -11716,7 +11729,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
 			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"dev": true,
 			"dependencies": {
 				"lower-case": "^2.0.2",
 				"tslib": "^2.0.3"
@@ -12222,7 +12234,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
 			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-			"dev": true,
 			"dependencies": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -12286,7 +12297,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
 			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
 			"dependencies": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -12296,7 +12306,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
 			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
-			"dev": true,
 			"dependencies": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -13533,8 +13542,7 @@
 		"node_modules/regenerator-runtime": {
 			"version": "0.13.11",
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-			"dev": true
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
 		},
 		"node_modules/regenerator-transform": {
 			"version": "0.15.1",
@@ -14057,7 +14065,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
 			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
-			"dev": true,
 			"dependencies": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -14314,7 +14321,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
 			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
-			"dev": true,
 			"dependencies": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -15413,8 +15419,7 @@
 		"node_modules/tslib": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
-			"dev": true
+			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
 		},
 		"node_modules/tsutils": {
 			"version": "3.21.0",
@@ -15648,7 +15653,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
 			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
-			"dev": true,
 			"dependencies": {
 				"tslib": "^2.0.3"
 			}
@@ -15657,7 +15661,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
 			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
-			"dev": true,
 			"dependencies": {
 				"tslib": "^2.0.3"
 			}
@@ -18050,7 +18053,6 @@
 			"version": "7.20.13",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
 			"integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
-			"dev": true,
 			"requires": {
 				"regenerator-runtime": "^0.13.11"
 			}
@@ -19124,8 +19126,7 @@
 		"@types/prop-types": {
 			"version": "15.7.5",
 			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-			"dev": true
+			"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
 		},
 		"@types/qs": {
 			"version": "6.9.7",
@@ -19143,7 +19144,6 @@
 			"version": "18.0.27",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
 			"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
-			"dev": true,
 			"requires": {
 				"@types/prop-types": "*",
 				"@types/scheduler": "*",
@@ -19154,7 +19154,6 @@
 			"version": "18.0.10",
 			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
 			"integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
-			"dev": true,
 			"requires": {
 				"@types/react": "*"
 			}
@@ -19168,8 +19167,7 @@
 		"@types/scheduler": {
 			"version": "0.16.2",
 			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-			"dev": true
+			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
 		},
 		"@types/semver": {
 			"version": "7.3.13",
@@ -19633,15 +19631,14 @@
 			}
 		},
 		"@wordpress/element": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.2.0.tgz",
-			"integrity": "sha512-0hhFhzcQChSIT5pcOCSGVSK4DEi3xBtuu3uRj3HrYefcthmRdZnAeLGUGaebO5HgcxnImJ/Y0u4r948XFjj9SA==",
-			"dev": true,
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.3.0.tgz",
+			"integrity": "sha512-sgBrPm9suYx9sAtMLnfqgJem54Vew+BvVRpQoKQjpoXAKklGKSr52xOERek2TZQuZl/hMCCdvScrLIIW96UNAw==",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
 				"@types/react": "^18.0.21",
 				"@types/react-dom": "^18.0.6",
-				"@wordpress/escape-html": "^2.25.0",
+				"@wordpress/escape-html": "^2.26.0",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
 				"react": "^18.2.0",
@@ -19652,7 +19649,6 @@
 					"version": "18.2.0",
 					"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
 					"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-					"dev": true,
 					"requires": {
 						"loose-envify": "^1.1.0"
 					}
@@ -19661,7 +19657,6 @@
 					"version": "18.2.0",
 					"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
 					"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-					"dev": true,
 					"requires": {
 						"loose-envify": "^1.1.0",
 						"scheduler": "^0.23.0"
@@ -19671,7 +19666,6 @@
 					"version": "0.23.0",
 					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
 					"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-					"dev": true,
 					"requires": {
 						"loose-envify": "^1.1.0"
 					}
@@ -19679,10 +19673,9 @@
 			}
 		},
 		"@wordpress/escape-html": {
-			"version": "2.25.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.25.0.tgz",
-			"integrity": "sha512-a+k2g/fg/E+XEAjq5O9iFFFMZ1+04JvaekF/ZUzDLLyBzk12D8Zfmg3UiHs0HkMFwZM1uyofpen9TOdGk9Op8Q==",
-			"dev": true,
+			"version": "2.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.26.0.tgz",
+			"integrity": "sha512-uWumpNH4hnmeepTw9K3gC5LmoZECom5L1P6HuZXYXyld8eU5L9p/JdvAPOwLmjffHyJO3hiB2JqYd+nKElbtrw==",
 			"requires": {
 				"@babel/runtime": "^7.16.0"
 			}
@@ -19728,6 +19721,16 @@
 				}
 			}
 		},
+		"@wordpress/icons": {
+			"version": "9.17.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.17.0.tgz",
+			"integrity": "sha512-bz906ftwaUgFFZB7/yrLswl43y4C14eEDhPamJ+3o45VwSr0yeKPFVNF1uOx/uNrRjihZnAyQaqs12/C7L27NQ==",
+			"requires": {
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/element": "^5.3.0",
+				"@wordpress/primitives": "^3.24.0"
+			}
+		},
 		"@wordpress/jest-console": {
 			"version": "6.8.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/jest-console/-/jest-console-6.8.0.tgz",
@@ -19772,6 +19775,16 @@
 			"dev": true,
 			"requires": {}
 		},
+		"@wordpress/primitives": {
+			"version": "3.24.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.24.0.tgz",
+			"integrity": "sha512-VX5iS6VKdMRC+mkd5EOjeq3wfWITPRnTWzTHGH9ozYWHNukE9+yOkeLlmTpW1yTy/IZxSFDGg+vAMDe85lf9oA==",
+			"requires": {
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/element": "^5.3.0",
+				"classnames": "^2.3.1"
+			}
+		},
 		"@wordpress/scripts": {
 			"version": "25.2.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-25.2.0.tgz",
@@ -20548,7 +20561,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
 			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-			"dev": true,
 			"requires": {
 				"pascal-case": "^3.1.2",
 				"tslib": "^2.0.3"
@@ -20601,7 +20613,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
 			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -20622,7 +20633,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
 			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
-			"dev": true,
 			"requires": {
 				"camel-case": "^4.1.2",
 				"capital-case": "^1.0.4",
@@ -20716,6 +20726,11 @@
 			"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
 			"dev": true
 		},
+		"classnames": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+			"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+		},
 		"clean-stack": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -20965,7 +20980,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
 			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -21320,8 +21334,7 @@
 		"csstype": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-			"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
-			"dev": true
+			"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
 		},
 		"cwd": {
 			"version": "0.10.0",
@@ -21660,7 +21673,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
 			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -23213,7 +23225,6 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
 			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
-			"dev": true,
 			"requires": {
 				"capital-case": "^1.0.4",
 				"tslib": "^2.0.3"
@@ -23711,8 +23722,7 @@
 		"is-plain-object": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-			"dev": true
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
 		},
 		"is-potential-custom-element-name": {
 			"version": "1.0.1",
@@ -24419,8 +24429,7 @@
 		"js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-			"dev": true
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
 		"js-yaml": {
 			"version": "3.14.1",
@@ -24896,7 +24905,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-			"dev": true,
 			"requires": {
 				"js-tokens": "^3.0.0 || ^4.0.0"
 			}
@@ -24905,7 +24913,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
 			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
@@ -25364,7 +25371,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
 			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"dev": true,
 			"requires": {
 				"lower-case": "^2.0.2",
 				"tslib": "^2.0.3"
@@ -25742,7 +25748,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
 			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-			"dev": true,
 			"requires": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -25791,7 +25796,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
 			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -25801,7 +25805,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
 			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
-			"dev": true,
 			"requires": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -26641,8 +26644,7 @@
 		"regenerator-runtime": {
 			"version": "0.13.11",
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-			"dev": true
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
 		},
 		"regenerator-transform": {
 			"version": "0.15.1",
@@ -27029,7 +27031,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
 			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -27241,7 +27242,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
 			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
-			"dev": true,
 			"requires": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -28101,8 +28101,7 @@
 		"tslib": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
-			"dev": true
+			"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
 		},
 		"tsutils": {
 			"version": "3.21.0",
@@ -28267,7 +28266,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
 			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
@@ -28276,7 +28274,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
 			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
diff --git a/package.json b/package.json
index 56f8cdb..d42ea91 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "create-block-theme",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"private": true,
 	"description": "Create a block-based theme",
 	"author": "The WordPress Contributors",
@@ -19,6 +19,9 @@
 		"npm": ">=7 <8"
 	},
 	"main": "build/index.js",
+	"dependencies": {
+		"@wordpress/icons": "^9.17.0"
+	},
 	"devDependencies": {
 		"@actions/core": "^1.10.0",
 		"@emotion/babel-plugin": "^11.10.5",
diff --git a/readme.txt b/readme.txt
index 7599af1..294edad 100644
--- a/readme.txt
+++ b/readme.txt
@@ -4,7 +4,7 @@ Donate link: https://automattic.com/
 Tags: themes, theme, block-theme
 Requires at least: 6.0
 Tested up to: 6.1
-Stable tag: 1.4.0
+Stable tag: 1.5.0
 Requires PHP: 7.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -36,6 +36,13 @@ Still in the WordPress dashboard, navigate to "Appearance" -> "Create Block Them
 
 == Changelog ==
 
+= 1.5.0 =
+* Fix: browser console errors
+* Fix: Adding or removing fonts fails in some Windows environments
+* Add placeholder screenshot to boilerplate theme
+* Refactor: Add Google Fonts section from vanilla JS to React app
+* Adding demo text settings
+
 = 1.4.0 =
 * Specify node and npm versions, add nvmrc file
 * Add theme screenshot uploading
diff --git a/src/demo-text-input/demo-text-input.css b/src/demo-text-input/demo-text-input.css
new file mode 100644
index 0000000..4e33bce
--- /dev/null
+++ b/src/demo-text-input/demo-text-input.css
@@ -0,0 +1,27 @@
+.demo-text-input {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    padding: 1rem 0;
+    margin: 1rem 0;
+}
+
+.demo-text-input .container {
+    display: grid;
+    column-gap: 1rem;
+    grid-template-columns: 0.5fr 1fr 0.5fr min-content;
+}
+
+.demo-text-input .container > div:last-child {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.demo-text-input .components-range-control__root {
+    flex-direction: row-reverse;
+}
+
+.demo-text-input .components-range-control__number {
+    margin-left: unset !important;
+    margin-right: 1rem;
+}
\ No newline at end of file
diff --git a/src/demo-text-input/demo.js b/src/demo-text-input/demo.js
new file mode 100644
index 0000000..738a1ec
--- /dev/null
+++ b/src/demo-text-input/demo.js
@@ -0,0 +1,21 @@
+import { useContext } from '@wordpress/element';
+import { ManageFontsContext, DEMO_DEFAULTS } from '../fonts-context';
+
+function Demo ( { style } ) {
+
+    const { demoText, demoType, demoFontSize } = useContext( ManageFontsContext );
+    const Component = DEMO_DEFAULTS[ demoType ][ "component" ];
+    const demoStyles = {
+        ...style,
+        fontSize: `${demoFontSize}px`,
+        lineHeight: DEMO_DEFAULTS[ demoType ][ "lineHeight" ],
+        margin: DEMO_DEFAULTS[ demoType ][ "margin" ],
+    };
+    return (
+        <div>
+            <Component style={ demoStyles }>{ demoText }</Component>
+        </div>
+    )
+}
+
+export default Demo;
\ No newline at end of file
diff --git a/src/demo-text-input/index.js b/src/demo-text-input/index.js
new file mode 100644
index 0000000..6fe9b81
--- /dev/null
+++ b/src/demo-text-input/index.js
@@ -0,0 +1,62 @@
+import {
+    Button,
+    RangeControl,
+    SelectControl,
+    __experimentalInputControl as InputControl
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { ManageFontsContext } from '../fonts-context';
+import { update } from '@wordpress/icons';
+import "./demo-text-input.css";
+
+function DemoTextInput () {
+    
+    const { demoText, handleDemoTextChange, demoType, handleDemoTypeChange, demoFontSize, handleDemoFontSizeChange, resetDefaults } = useContext( ManageFontsContext );
+
+    return (
+        <div className="demo-text-input">
+            <div className="container">
+
+                <SelectControl
+                    label={ __( "Preview type", "create-block-theme" ) }
+                    onChange={ handleDemoTypeChange }
+                    value={ demoType }
+                >
+                    <option value="heading">{ __( "Heading", "create-block-theme" ) }</option>
+                    <option value="sentence">{ __( "Sentence", "create-block-theme" ) }</option>
+                    <option value="paragraph">{ __( "Paragraph", "create-block-theme" ) }</option>
+                </SelectControl>
+
+                <InputControl
+                    label="Demo text"
+                    value={ demoText }
+                    onChange={ handleDemoTextChange }
+                />
+
+                <div>
+                    <RangeControl
+                        label={ __( "Font size (px)", "create-block-theme" ) }
+                        value={ demoFontSize }
+                        onChange={ handleDemoFontSizeChange }
+                        min={ 8 }
+                        max={ 140 }
+                        withInputField={ true }
+                    />
+                </div>
+
+                <div>
+                    <Button variant="secondary" icon={ update } onClick={ () => {
+                        resetDefaults( "sentence" );
+                        handleDemoTypeChange( "sentence" );
+                    }}>
+                        { __( "Reset", "create-block-theme" ) }
+                    </Button>
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default DemoTextInput;
diff --git a/src/fonts-context.js b/src/fonts-context.js
index 1594c00..a50c82c 100644
--- a/src/fonts-context.js
+++ b/src/fonts-context.js
@@ -2,23 +2,82 @@ import { useState, createContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 export const ManageFontsContext = createContext();
-export const DEFAULT_DEMO_TEXT = __( "The quick brown fox jumps over the lazy dog.", "create-block-theme" );
 
+const DEFAULT_HEADING_TEXT = __( "The quick brown fox jumps over the lazy dog.", "create-block-theme" );
+const DEFAULT_SENTENCE_TEXT = __( "Incredible as it may seem, I believe that the Aleph of Garay Street was a false Aleph.", "create-block-theme" );
+const DEFAULT_PARAGRAPH_TEXT = __(
+    "First a glass of pseudo-cognac, he ordered, and then down you dive into the cellar. Let me warn you, you'll have to lie flat on your back. Total darkness, total immobility, and a certain ocular adjustment will also be necessary. From the floor, you must focus your eyes on the nineteenth step. Once I leave you, I'll lower the trapdoor and you'll be quite alone. You needn't fear the rodents very much though I know you will. In a minute or two, you'll see the Aleph, the microcosm of the alchemists and Kabbalists, our true proverbial friend, the multum in parvo!",
+    "create-block-theme" )
+const DEFAULT_DEMO_TYPE = "sentence";
+
+export const DEMO_DEFAULTS = {
+    heading: {
+        text: DEFAULT_HEADING_TEXT,
+        size: 40,
+        lineHeight: 1.1,
+        margin: "0.5em",
+        component: "h2",
+    },
+    sentence: {
+        text: DEFAULT_SENTENCE_TEXT,
+        size: 24,
+        lineHeight: 1.3,
+        margin: "0.5em",
+        component: "p",
+    },
+    paragraph: {
+        text: DEFAULT_PARAGRAPH_TEXT,
+        size: 16,
+        lineHeight: 1.5,
+        margin: "0.5em",
+        component: "p",
+    },
+};
 
 export function ManageFontsProvider( { children } ) {
-    const [ demoText, setDemoText ] = useState( localStorage.getItem( "create-block-theme_default-demo-text" ) || DEFAULT_DEMO_TEXT );
+    const [ demoType, setDemoType ] = useState(
+        localStorage.getItem( "cbt_default-demo-type" ) || DEFAULT_DEMO_TYPE
+    );
+
+    const [ demoText, setDemoText ] = useState( localStorage.getItem(
+        "cbt_default-demo-text" ) || DEMO_DEFAULTS[ demoType ][ "text" ]
+    );
+
+    const [ demoFontSize, setDemoFontSize ] = useState(
+        parseInt( localStorage.getItem( "cbt_default-demo-font-size" )) || DEMO_DEFAULTS[ demoType ][ "size" ]
+    );
 
     const handleDemoTextChange = ( newDemoText ) => {
         setDemoText( newDemoText );
-        localStorage.setItem( "create-block-theme_default-demo-text", newDemoText );
+        localStorage.setItem( "cbt_default-demo-text", newDemoText );
     }
 
-    const resetDemoText = () => {
-        setDemoText( DEFAULT_DEMO_TEXT );
+    const handleDemoTypeChange = ( newDemoType ) => {
+        setDemoType( newDemoType );
+        localStorage.setItem( "cbt_default-demo-type", newDemoType );
+        resetDefaults( newDemoType );
+    }
+
+    const handleDemoFontSizeChange = ( newDemoFontSize ) => {
+        setDemoFontSize( newDemoFontSize );
+        localStorage.setItem( "cbt_default-demo-font-size", newDemoFontSize );
+    }
+
+    const resetDefaults = ( newDemoType ) => {
+        handleDemoTextChange ( DEMO_DEFAULTS[ newDemoType || demoType ][ "text" ] );
+        handleDemoFontSizeChange( DEMO_DEFAULTS[ newDemoType || demoType ][ "size" ] );
     }
 
     return (
-        <ManageFontsContext.Provider value={{ demoText, handleDemoTextChange, resetDemoText }}>
+        <ManageFontsContext.Provider value={{
+            demoText,
+            handleDemoTextChange,
+            resetDefaults,
+            demoType,
+            handleDemoTypeChange,
+            demoFontSize,
+            handleDemoFontSizeChange,
+        }}>
             { children }
         </ManageFontsContext.Provider>
     );
diff --git a/src/google-fonts/font-variant.js b/src/google-fonts/font-variant.js
index 2701265..1d17f0d 100644
--- a/src/google-fonts/font-variant.js
+++ b/src/google-fonts/font-variant.js
@@ -1,10 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import { useEffect, useContext } from '@wordpress/element';
 import { ManageFontsContext } from '../fonts-context';
+import Demo from "../demo-text-input/demo";
 
 function FontVariant ( { font, variant, isSelected, handleToggle } ) {
-    const { demoText, handleDemoTextChange, resetDemoText } = useContext( ManageFontsContext );
-
     const style = variant.includes('italic') ? 'italic' : 'normal';
     const weight = variant === 'regular' || variant === 'italic' ? '400' : variant.replace('italic', '');
     // Force https because sometimes Google Fonts API returns http instead of https
@@ -39,9 +38,7 @@ function FontVariant ( { font, variant, isSelected, handleToggle } ) {
             <td className="">{ weight }</td>
             <td className="">{ style }</td>
             <td className="demo-cell">
-                <span className="font-preview" style={ previewStyles }>
-                    { demoText }
-                </span>
+                <Demo style={ previewStyles } />
             </td>
         </tr>
     )
diff --git a/css/google-fonts.css b/src/google-fonts/google-fonts.css
similarity index 76%
rename from css/google-fonts.css
rename to src/google-fonts/google-fonts.css
index cd2bd31..0efdf98 100644
--- a/css/google-fonts.css
+++ b/src/google-fonts/google-fonts.css
@@ -1,3 +1,7 @@
+#google-fonts-table {
+    margin-bottom: 2rem;
+}
+
 #google-fonts-table.widefat thead td input {
     margin: 0;
 }
@@ -16,6 +20,6 @@
     font-size: 1.7rem;
 }
 
-.google-fonts-page .hint {
-    display: none;
+.select-font {
+    display: flex;
 }
\ No newline at end of file
diff --git a/src/google-fonts/index.js b/src/google-fonts/index.js
index 64292d2..6d1b8f6 100644
--- a/src/google-fonts/index.js
+++ b/src/google-fonts/index.js
@@ -2,10 +2,13 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
+import { SelectControl } from '@wordpress/components';
 
 import FontVariant from './font-variant';
 import googleFontsData from "../../assets/google-fonts/fallback-fonts-list.json";
 import { getWeightFromGoogleVariant, getStyleFromGoogleVariant, forceHttps } from './utils';
+import DemoTextInput from "../demo-text-input";
+import "./google-fonts.css";
 
 const EMPTY_SELECTION_DATA = JSON.stringify( {} );
 
@@ -64,70 +67,70 @@ function GoogleFonts () {
         return select( coreDataStore ).getCurrentTheme();
     }, null );
 
-    const handleSelectChange = ( event ) => {
-        setSelectedFont( googleFontsData.items[ event.target.value ] ) ;
+    const handleSelectChange = ( value ) => {
+        setSelectedFont( googleFontsData.items[ value ] ) ;
     }
 
     return (
         <div className="wrap google-fonts-page">
-			<h2>{ __('Add Google fonts to your theme', 'create-block-theme') }</h2>
+			<h1 className="wp-heading-inline">{ __('Add Google fonts to your theme', 'create-block-theme') }</h1>
             <h3>{ __('Add Google fonts assets and font face definitions to your currently active theme', 'create-block-theme')} ({ theme?.name.rendered })</h3>
 
+            <div className="select-font">
+                <SelectControl
+                        label={ __('Select Font', 'create-block-theme') }
+                        name="google-font"
+                        onChange={ handleSelectChange }
+                    >
+                        <option value={null}>{ __('Select a font...', 'create-block-theme') }</option>
+                        { googleFontsData.items.map( ( font, index ) => (
+                                <option value={ index }>{ font.family }</option>
+                        ))}
+                </SelectControl>
+            </div>
 
-            <form enctype="multipart/form-data" action="" method="POST">
-                <label for="google-font-id">{ __('Select Font', 'create-block-theme') }</label>
+            <DemoTextInput />
 
-                <select name="google-font" onChange={ handleSelectChange }>
-                    <option value={null}>{ __('Select a font...', 'create-block-theme') }</option>
-                    { googleFontsData.items.map( ( font, index ) => (
-                            <option value={ index }>{ font.family }</option>
-                    ))}
-                </select>
+            { selectedFont && <p>{ __('Select the font variants you want to include:', 'create-block-theme') }</p> }
 
-                <br /><br />
-                <p className="hint">{ __('Select the font variants you want to include:', 'create-block-theme') }</p>
-
-                { selectedFont && (
-                    <table className="wp-list-table widefat striped table-view-list" id="google-fonts-table">
-                        <thead>
-                            <tr>
-                                <td className="">
-                                    <input
-                                        type="checkbox"
-                                        onClick={ handleToggleAllVariants }
-                                        checked={ selectedVariants.length === selectedFont?.variants.length }
-                                    />
-                                </td>
-                                <td className="">{ __('Weight', 'create-block-theme') }</td>
-                                <td className="">{ __('Style', 'create-block-theme') }</td>
-                                <td className="">{ __('Preview', 'create-block-theme') }</td>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {selectedFont.variants.map( ( variant, i ) => (
-                                <FontVariant
-                                    font={ selectedFont }
-                                    variant={ variant }
-                                    key={`font-variant-${i}`}
-                                    isSelected={ selectedVariants.includes( variant ) }
-                                    handleToggle={ () => handleToggleVariant( variant ) }
+            { selectedFont && (
+                <table className="wp-list-table widefat striped table-view-list" id="google-fonts-table">
+                    <thead>
+                        <tr>
+                            <td className="">
+                                <input
+                                    type="checkbox"
+                                    onClick={ handleToggleAllVariants }
+                                    checked={ selectedVariants.length === selectedFont?.variants.length }
                                 />
-                            ))}
-                        </tbody>
-                    </table>
-                ) }
-
-                <br /><br />
-
+                            </td>
+                            <td className="">{ __('Weight', 'create-block-theme') }</td>
+                            <td className="">{ __('Style', 'create-block-theme') }</td>
+                            <td className="">{ __('Preview', 'create-block-theme') }</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {selectedFont.variants.map( ( variant, i ) => (
+                            <FontVariant
+                                font={ selectedFont }
+                                variant={ variant }
+                                key={`font-variant-${i}`}
+                                isSelected={ selectedVariants.includes( variant ) }
+                                handleToggle={ () => handleToggleVariant( variant ) }
+                            />
+                        ))}
+                    </tbody>
+                </table>
+            ) }
+            
+            <form enctype="multipart/form-data" action="" method="POST">
                 <input type="hidden" name="selection-data" value={ selectionData } />
-
                 <input
                     type="submit"
                     value={ __('Add google fonts to your theme', 'create-block-theme') }
                     className="button button-primary"
                     disabled={ selectedVariants.length === 0 }
                 />
-
                 <input type="hidden" name="nonce" value={ nonce } />
             </form>
 		</div>
diff --git a/src/manage-fonts/font-face.js b/src/manage-fonts/font-face.js
index 474e062..df4c1ad 100644
--- a/src/manage-fonts/font-face.js
+++ b/src/manage-fonts/font-face.js
@@ -1,6 +1,7 @@
 import { Button } from '@wordpress/components'; 
 import { useContext } from '@wordpress/element';
 import { ManageFontsContext } from '../fonts-context';
+import Demo from "../demo-text-input/demo";
 const { __ } = wp.i18n;
 
 function FontFace ( {
@@ -10,7 +11,7 @@ function FontFace ( {
     deleteFontFace,
     shouldBeRemoved
 } ) {
-    const { demoText, handleDemoTextChange, resetDemoText } = useContext( ManageFontsContext );
+    const { demoText, handleDemoTextChange, resetDefaults } = useContext( ManageFontsContext );
 
     const demoStyles = {
         fontFamily,
@@ -24,12 +25,6 @@ function FontFace ( {
         handleDemoTextChange( newDemoText );
     }
 
-    const onBlur = ( event ) => {
-        if ( ! event.target.value ) {
-            resetDemoText();
-        }
-    }
-
     if ( shouldBeRemoved ) {
         return null;
     }
@@ -39,7 +34,8 @@ function FontFace ( {
             <td>{fontStyle}</td>
             <td>{fontWeight}</td>
             <td className="demo-cell">
-                <input style={ demoStyles } onChange={ handleChange } value={ demoText } onBlur={ onBlur }/>
+                {/* <input style={ demoStyles } onChange={ handleChange } value={ demoText }/> */}
+                <Demo style={ demoStyles } />
             </td>
             { deleteFontFace && <td><Button variant="tertiary" isDestructive={true} onClick={deleteFontFace}>{__('Remove', 'create-block-theme')}</Button></td> }
         </tr>
diff --git a/src/manage-fonts/index.js b/src/manage-fonts/index.js
index dcd16dc..fad2091 100644
--- a/src/manage-fonts/index.js
+++ b/src/manage-fonts/index.js
@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import FontFamily from "./font-family";
 import { __experimentalConfirmDialog as ConfirmDialog, Modal, Icon, Button } from '@wordpress/components';
+import DemoTextInput from "../demo-text-input";
+import "./manage-fonts.css";
 
 const { __ } = wp.i18n;
 
@@ -142,6 +144,9 @@ function ManageFonts () {
                 }
                 <p>{__('This action will delete the font definition and the font file assets from your theme.', "create-block-theme")}</p>
 			</ConfirmDialog>
+
+            <DemoTextInput />
+
             <div className="font-families">
                 {newThemeFonts.map((fontFamily, i) => (
                     <FontFamily
diff --git a/css/manage-fonts.css b/src/manage-fonts/manage-fonts.css
similarity index 94%
rename from css/manage-fonts.css
rename to src/manage-fonts/manage-fonts.css
index c58e1b6..9a5351f 100644
--- a/css/manage-fonts.css
+++ b/src/manage-fonts/manage-fonts.css
@@ -53,11 +53,6 @@
     width: 100%;
 }
 
-.font-face td {
-    white-space: nowrap;
-    text-align: center;
-}
-
 .font-face .demo-cell input {
     font-size: 1.7rem;
     line-height: 1.5;