diff --git a/.phan/stubs/GeneratePress/class-generate-range-slider-control.php b/.phan/stubs/GeneratePress/class-generate-range-slider-control.php
new file mode 100644
index 0000000..7d83b6f
--- /dev/null
+++ b/.phan/stubs/GeneratePress/class-generate-range-slider-control.php
@@ -0,0 +1,6 @@
+<?php
+
+class Generate_Range_Slider_Control {
+	public function __construct( $manager, $id, $args = [] ) {
+	}
+}
diff --git a/.phan/stubs/GeneratePress/class-generate-typography-customize-control.php b/.phan/stubs/GeneratePress/class-generate-typography-customize-control.php
new file mode 100644
index 0000000..d69b407
--- /dev/null
+++ b/.phan/stubs/GeneratePress/class-generate-typography-customize-control.php
@@ -0,0 +1,6 @@
+<?php
+
+class Generate_Typography_Customize_Control {
+	public function __construct( $manager, $id, $args = [] ) {
+	}
+}
diff --git a/.phan/stubs/GeneratePress/functions.php b/.phan/stubs/GeneratePress/functions.php
new file mode 100644
index 0000000..4b0e89b
--- /dev/null
+++ b/.phan/stubs/GeneratePress/functions.php
@@ -0,0 +1,4 @@
+<?php
+
+function generatepress_is_module_active( $module, $definition ) {
+}
diff --git a/.phan/stubs/WordPress/class-wp-control.php b/.phan/stubs/WordPress/class-wp-control.php
new file mode 100644
index 0000000..e4d1552
--- /dev/null
+++ b/.phan/stubs/WordPress/class-wp-control.php
@@ -0,0 +1,18 @@
+<?php
+
+class WP_Customize_Control {
+	public $json;
+	public $settings;
+
+	public function __construct( $a, $b, $c ) {
+	}
+
+	public function get_link( $a ) {
+	}
+
+	public function to_json() {
+	}
+
+	public function value( $a ) {
+	}
+}
diff --git a/.phan/stubs/WordPress/class-wp-customize-color-control.php b/.phan/stubs/WordPress/class-wp-customize-color-control.php
new file mode 100644
index 0000000..ae069a7
--- /dev/null
+++ b/.phan/stubs/WordPress/class-wp-customize-color-control.php
@@ -0,0 +1,6 @@
+<?php
+
+class WP_Customize_Color_Control {
+	public function __construct( $manager, $id, $args = [] ) {
+	}
+}
diff --git a/.phan/stubs/WordPress/class-wp-customize-image-control.php b/.phan/stubs/WordPress/class-wp-customize-image-control.php
new file mode 100644
index 0000000..54cf2cd
--- /dev/null
+++ b/.phan/stubs/WordPress/class-wp-customize-image-control.php
@@ -0,0 +1,6 @@
+<?php
+
+class WP_Customize_Image_Control {
+	public function __construct( $manager, $id, $args = [] ) {
+	}
+}
diff --git a/.phan/stubs/WordPress/class-wp-customize-manager.php b/.phan/stubs/WordPress/class-wp-customize-manager.php
new file mode 100644
index 0000000..e0c4d40
--- /dev/null
+++ b/.phan/stubs/WordPress/class-wp-customize-manager.php
@@ -0,0 +1,18 @@
+<?php
+
+class WP_Customize_manager {
+	public function add_control( $id, $args = [] ) {
+	}
+
+	public function add_panel( $id, $args = [] ) {
+	}
+
+	public function add_section( $id, $args = [] ) {
+	}
+
+	public function add_setting( $id, $args = [] ) {
+	}
+
+	public function register_control_type( $a ) {
+	}
+}
diff --git a/.phan/stubs/WordPress/functions.php b/.phan/stubs/WordPress/functions.php
index 7ab2bc2..cc2cdb8 100644
--- a/.phan/stubs/WordPress/functions.php
+++ b/.phan/stubs/WordPress/functions.php
@@ -5,6 +5,14 @@
  * @package skaut-google-drive-gallery
  */
 
+function __($a, $b) {
+	return '';
+}
+
+function absint( $a ) {
+	return 0;
+}
+
 function add_action( $a, $b, $c = '' ) {
 }
 
@@ -34,6 +42,10 @@ function esc_html__( $a, $b ) {
 	return '';
 }
 
+function esc_url( $a ) {
+	return '';
+}
+
 function get_option( $a, $b ) {
 	switch ( wp_rand( 0, 2 ) ) {
 		case 0:
@@ -85,6 +97,10 @@ function remove_action( $a, $b, $c = '' ) {
 	return false;
 }
 
+function sanitize_text_field( $a ) {
+	return '';
+}
+
 function switch_theme( $a ) {
 }
 
@@ -101,11 +117,27 @@ function trailingslashit( $a ) {
 	return '';
 }
 
+function wp_add_inline_style( $a, $b ) {
+}
+
 function wp_enqueue_script( $a, $b, $c, $d, $e ) {
 }
 
-function wp_enqueue_style( $a, $b, $c, $d ) {
+function wp_enqueue_style( $a, $b = '', $c = [], $d = false ) {
+}
+
+function wp_localize_script( $a, $b, $c ) {
+}
+
+/**
+ * @return array
+ */
+function wp_parse_args( $a, $b ) {
+	return [];
 }
 
 function wp_rand( $a, $b ) {
 }
+
+function wp_register_style( $a, $b, $c, $d ) {
+}
diff --git a/src/js/admin/colors_live_preview.js b/src/js/admin/colors_live_preview.js
new file mode 100644
index 0000000..d5a23c2
--- /dev/null
+++ b/src/js/admin/colors_live_preview.js
@@ -0,0 +1,6 @@
+'use strict';
+
+jQuery( 'document' ).ready( function( $ ) {
+    generatepress_colors_live_update( 'h1_color', 'h1', 'color', '', 'text_color' );
+    generatepress_colors_live_update( 'h2_color', 'h2', 'color', '', 'text_color' );
+});
diff --git a/src/js/admin/preset_customize_control.js b/src/js/admin/preset_customize_control.js
new file mode 100644
index 0000000..31aa59f
--- /dev/null
+++ b/src/js/admin/preset_customize_control.js
@@ -0,0 +1,45 @@
+import '../../scss/admin/preset_customize_control.scss';
+'use strict';
+
+jQuery( 'document' ).ready( function( $ ) {
+    function flatten( input ) {
+        const ret = {};
+        $.each( input, function( key, value ) {
+            if ( 'object' === typeof ( value ) ) {
+                $.each( value, function( subKey, subValue ) {
+                    ret[key + '[' + subKey + ']'] = subValue;
+                });
+            } else {
+                ret[key] = value;
+            }
+        });
+        return ret;
+    }
+
+    wp.customize.control(
+        'crdm_basic_preset',
+        function( control ) {
+            const presets = [];
+            $.each( crdmbasicPresetCustomizeControlLocalize, function( key, value ) {
+                presets[key] = flatten( value );
+            });
+            control.container.find( 'input[name=crdm_basic_preset]' ).change( function() {
+                control.container.find( '.button' ).prop( 'disabled', false );
+            });
+            control.container.find( '.button' ).on( 'click', function() {
+                const chosen =  control.container.find( 'input[name=crdm_basic_preset]:checked' ).val();
+                if ( ! chosen ) {
+                    console.log( 'FAIL' );
+                    return;
+                }
+                $.each( presets[chosen], function( key, value ) {
+                    const setting = wp.customize( key );
+                    if ( ! setting ) {
+                        return;
+                    }
+                    setting.set( value );
+                });
+            });
+        }
+    );
+});
diff --git a/src/js/admin/typography_live_preview.js b/src/js/admin/typography_live_preview.js
new file mode 100644
index 0000000..b8d7f23
--- /dev/null
+++ b/src/js/admin/typography_live_preview.js
@@ -0,0 +1,22 @@
+'use strict';
+
+jQuery( 'document' ).ready( function( $ ) {
+    generatepress_typography_live_update( 'navigation_font_size', '.main-navigation a, .menu-toggle', 'font-size', 'px', crdmTypographyLivePreview.desktop );
+    generatepress_typography_live_update( 'mobile_navigation_font_size', '.main-navigation:not(.slideout-navigation) a, .menu-toggle', 'font-size', 'px', crdmTypographyLivePreview.mobile );
+    generatepress_typography_live_update( 'navigation_font_weight', '.main-navigation a, .menu-toggle', 'font-weight' );
+    generatepress_typography_live_update( 'navigation_font_transform', '.main-navigation a, .menu-toggle', 'text-transform' );
+
+    generatepress_typography_live_update( 'heading_1_font_size', 'h1', 'font-size', 'px', crdmTypographyLivePreview.desktop );
+    generatepress_typography_live_update( 'mobile_heading_1_font_size', 'h1', 'font-size', 'px', crdmTypographyLivePreview.mobile );
+    generatepress_typography_live_update( 'heading_1_weight', 'h1', 'font-weight' );
+    generatepress_typography_live_update( 'heading_1_transform', 'h1', 'text-transform' );
+    generatepress_typography_live_update( 'heading_1_line_height', 'h1', 'line-height', 'em' );
+    generatepress_typography_live_update( 'heading_1_margin_bottom', 'h1', 'margin-bottom', 'px' );
+
+    generatepress_typography_live_update( 'heading_2_font_size', 'h2', 'font-size', 'px', crdmTypographyLivePreview.desktop );
+    generatepress_typography_live_update( 'mobile_heading_2_font_size', 'h2', 'font-size', 'px', crdmTypographyLivePreview.mobile );
+    generatepress_typography_live_update( 'heading_2_weight', 'h2', 'font-weight' );
+    generatepress_typography_live_update( 'heading_2_transform', 'h2', 'text-transform' );
+    generatepress_typography_live_update( 'heading_2_line_height', 'h2', 'line-height', 'em' );
+    generatepress_typography_live_update( 'heading_2_margin_bottom', 'h2', 'margin-bottom', 'px' );
+});
diff --git a/src/php/CrdmBasic/Customizer/Controls/class-background-image-customize-control.php b/src/php/CrdmBasic/Customizer/Controls/class-background-image-customize-control.php
new file mode 100644
index 0000000..40d2002
--- /dev/null
+++ b/src/php/CrdmBasic/Customizer/Controls/class-background-image-customize-control.php
@@ -0,0 +1,92 @@
+<?php
+/**
+ * Contains the Background_Image_Customize_Control class.
+ *
+ * @package crdm-basic
+ */
+
+declare(strict_types = 1);
+
+namespace CrdmBasic\Customizer\Controls;
+
+/**
+ * A WP_Customize_Control for background image configuration
+ *
+ * Allows for controlling the repeat, size, attachment and position of a background image.
+ */
+class Background_Image_Customize_Control extends \WP_Customize_Control {
+
+	/**
+	 * Control's type.
+	 *
+	 * @var string
+	 */
+	public $type = 'crdm-basic-background-image';
+
+	/**
+	 * Exports control parameters for JS.
+	 *
+	 * @inheritDoc
+	 */
+	public function to_json() {
+		parent::to_json();
+
+		$this->json['position_description'] = esc_html__( 'left top, x%, y%, xpos ypos (px)', 'crdm-basic' );
+		$this->json['position_placeholder'] = esc_html__( 'Position', 'crdm-basic' );
+
+		foreach ( $this->settings as $key => $id ) {
+			$this->json['settings'][ $key ] = array(
+				'link'  => $this->get_link( $key ),
+				'value' => $this->value( $key ),
+				'id'    => $id->id ?? '',
+			);
+		}
+
+		$this->json['repeat_choices']     = array(
+			''          => esc_html__( 'Repeat', 'crdm-basic' ),
+			'repeat-x'  => esc_html__( 'Repeat x', 'crdm-basic' ),
+			'repeat-y'  => esc_html__( 'Repeat y', 'crdm-basic' ),
+			'no-repeat' => esc_html__( 'No Repeat', 'crdm-basic' ),
+		);
+		$this->json['size_choices']       = array(
+			''        => esc_html__( 'Size (Auto)', 'crdm-basic' ),
+			'100'     => esc_html__( '100% Width', 'crdm-basic' ),
+			'cover'   => esc_html__( 'Cover', 'crdm-basic' ),
+			'contain' => esc_html__( 'Contain', 'crdm-basic' ),
+		);
+		$this->json['attachment_choices'] = array(
+			''        => esc_html__( 'Attachment', 'crdm-basic' ),
+			'fixed'   => esc_html__( 'Fixed', 'crdm-basic' ),
+			'local'   => esc_html__( 'Local', 'crdm-basic' ),
+			'inherit' => esc_html__( 'Inherit', 'crdm-basic' ),
+		);
+	}
+
+	/**
+	 * Prints the Underscore.js template for the control.
+	 *
+	 * @inheritDoc
+	 */
+	public function content_template() {
+		?>
+<# _.each( [ [ data.settings.repeat, data.repeat_choices ], [ data.settings.size, data.size_choices ], [ data.settings.attachment, data.attachment_choices] ], function( tuple ) {
+	if ( tuple[0] ) { #>
+		<label>
+			<select {{{ tuple[0].link }}}>
+				<# _.each( tuple[1], function( label, choice ) { #>
+					<option value="{{{ choice }}}" <# if ( choice === tuple[0].value ) { #> selected="selected" <# } #>>{{{ label }}}</option>
+				<# } ) #>
+			</select>
+		</label>
+	<# }
+} ); #>
+
+<# if ( data.settings.position ) { #>
+	<label>
+		<input name="{{{ data.settings.position.id }}}" type="text" {{{ data.settings.position.link }}} value="{{{ data.settings.position.value }}}" placeholder="{{{ data.position_placeholder }}}" />
+			<p class="description">{{{ data.position_description }}}</p>
+	</label>
+<# } #>
+		<?php
+	}
+}
diff --git a/src/php/CrdmBasic/Customizer/Controls/class-preset-customize-control.php b/src/php/CrdmBasic/Customizer/Controls/class-preset-customize-control.php
new file mode 100644
index 0000000..631a546
--- /dev/null
+++ b/src/php/CrdmBasic/Customizer/Controls/class-preset-customize-control.php
@@ -0,0 +1,107 @@
+<?php
+/**
+ * Contains the Preset_Customize_Control class.
+ *
+ * @package crdm-basic
+ */
+
+declare(strict_types = 1);
+
+namespace CrdmBasic\Customizer\Controls;
+
+/**
+ * A WP_Customize_Control choosing a preset
+ *
+ * Allows for choosing a preset for the whole webpage.
+ */
+class Preset_Customize_Control extends \WP_Customize_Control {
+
+	/**
+	 * Control's type.
+	 *
+	 * @var string
+	 */
+	public $type = 'crdm-basic-preset';
+
+	/**
+	 * The available presets
+	 *
+	 * @var array
+	 */
+	private $presets;
+
+	/**
+	 * Preset_Customize_Control constructor.
+	 *
+	 * Initializes the available presets.
+	 *
+	 * @param \WP_Customize_Manager $manager Customizer bootstrap instance.
+	 * @param string                $id Control ID.
+	 * @param array                 $args Control arguments.
+	 * @param array                 $presets The available presets.
+	 *
+	 * @inheritDoc
+	 *
+	 * @SuppressWarnings(PHPMD.ShortVariable)
+	 */
+	public function __construct( $manager, $id, $args, $presets = array() ) {
+		parent::__construct( $manager, $id, $args );
+
+		$this->presets = $presets;
+	}
+
+	/**
+	 * Enqueues the JS.
+	 *
+	 * Enqueues the JavaScript file handling the Control.
+	 *
+	 * @inheritDoc
+	 */
+	public function enqueue() {
+		wp_enqueue_style( 'crdm_basic_preset_customize_control_style', CRDMBASIC_TEMPLATE_URL . 'admin/preset_customize_control.css', array(), CRDMBASIC_APP_VERSION );
+		wp_enqueue_script( 'crdm_basic_preset_customize_control_script', CRDMBASIC_TEMPLATE_URL . 'admin/preset_customize_control.js', array( 'jquery', 'customize-preview' ), CRDMBASIC_APP_VERSION, true );
+		wp_localize_script(
+			'crdm_basic_preset_customize_control_script',
+			'crdmbasicPresetCustomizeControlLocalize',
+			$this->presets
+		);
+	}
+
+	/**
+	 * Exports control parameters for JS.
+	 *
+	 * @inheritDoc
+	 */
+	public function to_json() {
+		parent::to_json();
+
+		$this->json['light_image'] = CRDMBASIC_TEMPLATE_URL . 'admin/light.png';
+		$this->json['dark_image']  = CRDMBASIC_TEMPLATE_URL . 'admin/dark.png';
+		$this->json['light']       = esc_html__( 'Light', 'crdm-basic' );
+		$this->json['dark']        = esc_html__( 'Dark', 'crdm-basic' );
+		$this->json['warning']     = esc_html__( 'Applying the preset overrides a lot of the theme options. You can always go back by closing the customizer.', 'crdm-basic' );
+		$this->json['button']      = esc_html__( 'Apply', 'crdm-basic' );
+	}
+
+	/**
+	 * Prints the Underscore.js template for the control.
+	 *
+	 * @inheritDoc
+	 */
+	public function content_template() {
+		?>
+<label>
+	<input type="radio" name="crdm_basic_preset" value="light"> {{{ data.light }}}
+	<img class="crdmbasic_preset_customize_control_img" src="{{{ data.light_image }}}" alt="{{{ data.light }}}">
+</label>
+<label>
+	<input type="radio" name="crdm_basic_preset" value="dark"> {{{ data.dark }}}
+	<img class="crdmbasic_preset_customize_control_img" src="{{{ data.dark_image }}}" alt="{{{ data.dark }}}">
+</label>
+<div>
+	{{{ data.warning }}}
+</div>
+<button type="button" class="crdmbasic_preset_customize_control_button button button-primary" disabled> {{{ data.button}}} </button>
+		<?php
+	}
+}
diff --git a/src/php/CrdmBasic/Customizer/class-background.php b/src/php/CrdmBasic/Customizer/class-background.php
index b7a0127..2b5810f 100644
--- a/src/php/CrdmBasic/Customizer/class-background.php
+++ b/src/php/CrdmBasic/Customizer/class-background.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * Contains the Background class
+ * Contains the Background class.
  *
  * @package crdm-basic
  */
@@ -9,170 +9,344 @@
 
 namespace CrdmBasic\Customizer;
 
-use Kirki;
-
 /**
  * Background configuration
  *
  * This class sets up all the customizer options for configuring the background of the webpage.
  */
-class Background {
+class Background extends Customizer_Category {
+	const DEFAULT = array(
+		'generate_background_settings' => array(
+			'body_image'      => '',
+			'body_repeat'     => '',
+			'body_size'       => '',
+			'body_attachment' => '',
+			'body_position'   => '',
+			'nav_image'       => '',
+			'nav_repeat'      => '',
+		),
+		'crdm_basic_header'            => array(
+			'background' => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_background.png',
+			'foreground' => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_foreground.png',
+			'under'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_grass.png',
+		),
+	);
 
 	/**
-	 * The ID of the configuration set ("crdm-basic").
+	 * Initializes customizer options.
 	 *
-	 * @var string $config_id
-	 */
-	protected $config_id = '';
-	/**
-	 * The ID of the panel in which this option is displayed.
+	 * Adds the panel, section, all the settings and controls to the WordPress customizer.
 	 *
-	 * @var string $panel_id
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
 	 */
-	protected $panel_id = '';
+	public function customize( $wp_customize ) {
+		if ( ! Init::generatepress_module_enabled( 'generate_package_backgrounds' ) ) {
+			$wp_customize->register_control_type( 'CrdmBasic\Customizer\Controls\Background_Image_Customize_Control' );
+
+			$this->add_panel_sections( $wp_customize );
+
+			$this->customize_body( $wp_customize );
+			$this->customize_navigation( $wp_customize );
+		}
+		$this->customize_header( $wp_customize );
+	}
+
 	/**
-	 * The ID of the section in which this option is displayed.
+	 * Adds the panel and sections
+	 *
+	 * Adds the panel and sections that would otherwise be added by GeneratePress.
 	 *
-	 * @var string $section_id
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
 	 */
-	protected $section_id = '';
+	private function add_panel_sections( $wp_customize ) {
+		$wp_customize->add_panel(
+			'generate_backgrounds_panel',
+			array(
+				'capability'     => 'edit_theme_options',
+				'theme_supports' => '',
+				'title'          => __( 'Background Images', 'crdm-basic' ),
+				'priority'       => 55,
+			)
+		);
+
+		$wp_customize->add_section(
+			'generate_backgrounds_body',
+			array(
+				'title'      => __( 'Body', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 5,
+				'panel'      => 'generate_backgrounds_panel',
+			)
+		);
+
+		$wp_customize->add_section(
+			'generate_backgrounds_header',
+			array(
+				'title'      => __( 'Header', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 10,
+				'panel'      => 'generate_backgrounds_panel',
+			)
+		);
+
+		$wp_customize->add_section(
+			'generate_backgrounds_navigation',
+			array(
+				'title'      => __( 'Primary Navigation', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 15,
+				'panel'      => 'generate_backgrounds_panel',
+			)
+		);
+	}
 
 	/**
-	 * Background class constructor
+	 * Initializes customizer body options.
 	 *
-	 * Adds the section and its controls to the customizer.
+	 * Adds customizer options for controling the body background.
 	 *
-	 * @param string $config_id The ID of the configuration set ("crdm-basic").
-	 * @param string $panel_id The ID of the panel in which this option is displayed.
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
 	 */
-	public function __construct( string $config_id, string $panel_id ) {
-		$this->config_id  = $config_id;
-		$this->panel_id   = $panel_id;
-		$this->section_id = $panel_id . '_background';
+	private function customize_body( $wp_customize ) {
+		$wp_customize->add_setting(
+			'generate_background_settings[body_image]',
+			array(
+				'default'           => self::DEFAULT['generate_background_settings']['body_image'],
+				'type'              => 'option',
+				'capability'        => 'edit_theme_options',
+				'sanitize_callback' => 'esc_url_raw',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Image_Control(
+				$wp_customize,
+				'generate_backgrounds-body-image',
+				array(
+					'section'  => 'generate_backgrounds_body',
+					'settings' => 'generate_background_settings[body_image]',
+					'label'    => __( 'Body', 'crdm-basic' ),
+				)
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_background_settings[body_repeat]',
+			array(
+				'default'           => self::DEFAULT['generate_background_settings']['body_repeat'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_background_settings[body_size]',
+			array(
+				'default'           => self::DEFAULT['generate_background_settings']['body_size'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_background_settings[body_attachment]',
+			array(
+				'default'           => self::DEFAULT['generate_background_settings']['body_attachment'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_background_settings[body_position]',
+			array(
+				'default'           => self::DEFAULT['generate_background_settings']['body_position'],
+				'type'              => 'option',
+				'capability'        => 'edit_theme_options',
+				'sanitize_callback' => 'esc_html',
+			)
+		);
 
-		$this->init_section();
-		$this->init_controls();
+		$wp_customize->add_control(
+			new Controls\Background_Image_Customize_Control(
+				$wp_customize,
+				'body_backgrounds_control',
+				array(
+					'section'  => 'generate_backgrounds_body',
+					'settings' => array(
+						'repeat'     => 'generate_background_settings[body_repeat]',
+						'size'       => 'generate_background_settings[body_size]',
+						'attachment' => 'generate_background_settings[body_attachment]',
+						'position'   => 'generate_background_settings[body_position]',
+					),
+				)
+			)
+		);
 	}
 
 	/**
-	 * Initializes the section
+	 * Initializes customizer navigation options.
+	 *
+	 * Adds customizer options for controling the background of the primary navigation.
 	 *
-	 * Adds the section to the customizer.
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
 	 */
-	protected function init_section() {
-		Kirki::add_section(
-			$this->section_id,
+	private function customize_navigation( $wp_customize ) {
+		$wp_customize->add_setting(
+			'generate_background_settings[nav_image]',
+			array(
+				'default'           => self::DEFAULT['generate_background_settings']['nav_image'],
+				'type'              => 'option',
+				'capability'        => 'edit_theme_options',
+				'sanitize_callback' => 'esc_url_raw',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Image_Control(
+				$wp_customize,
+				'generate_backgrounds_settings[nav_image]',
+				array(
+					'section'  => 'generate_backgrounds_navigation',
+					'settings' => 'generate_background_settings[nav_image]',
+					'priority' => 750,
+					'label'    => __( 'Navigation', 'crdm-basic' ),
+				)
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_background_settings[nav_repeat]',
 			array(
-				'title' => esc_attr__( 'Background', 'crdm-basic' ),
-				'panel' => $this->panel_id,
+				'default'           => self::DEFAULT['generate_background_settings']['nav_repeat'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+			)
+		);
+
+		$wp_customize->add_control(
+			'generate_background_settings[nav_repeat]',
+			array(
+				'type'     => 'select',
+				'section'  => 'generate_backgrounds_navigation',
+				'settings' => 'generate_background_settings[nav_repeat]',
+				'choices'  => array(
+					''          => __( 'Repeat', 'crdm-basic' ),
+					'repeat-x'  => __( 'Repeat x', 'crdm-basic' ),
+					'repeat-y'  => __( 'Repeat y', 'crdm-basic' ),
+					'no-repeat' => __( 'No Repeat', 'crdm-basic' ),
+				),
+				'priority' => 800,
 			)
 		);
 	}
 
 	/**
-	 * Initializes the controls
+	 * Initializes customizer header options.
+	 *
+	 * Adds customizer options for controling the header background and foreground images.
 	 *
-	 * Adds all the controls to the section
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
 	 */
-	protected function init_controls() {
-		Kirki::add_field(
-			$this->config_id,
+	private function customize_header( $wp_customize ) {
+		$wp_customize->add_setting(
+			'crdm_basic_header[background]',
 			array(
-				'type'      => 'background',
-				'settings'  => 'webBg',
-				'label'     => esc_attr__( 'Webpage background', 'crdm-basic' ),
-				'section'   => $this->section_id,
-				'default'   => array(
-					'background-color'      => '#f7f3e2',
-					'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_background.png',
-					'background-repeat'     => 'repeat',
-					'background-position'   => 'left top',
-					'background-size'       => '300px auto',
-					'background-attachment' => 'scroll',
-				),
-				'output'    => array(
-					array(
-						'element' => 'body',
-					),
-				),
-				'transport' => 'auto',
+				'default'           => self::DEFAULT['crdm_basic_header']['background'],
+				'type'              => 'option',
+				'capability'        => 'edit_theme_options',
+				'sanitize_callback' => 'esc_url_raw',
 			)
 		);
 
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'        => 'background',
-				'settings'    => 'headerBg1',
-				'label'       => esc_attr__( 'Header background image', 'crdm-basic' ),
-				'description' => esc_attr__( 'Behind the menu', 'crdm-basic' ),
-				'section'     => $this->section_id,
-				'default'     => array(
-					'background-color'      => 'rgba(255, 255, 255, 0)',
-					'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_background.png',
-					'background-repeat'     => 'no-repeat',
-					'background-position'   => 'right top',
-					'background-size'       => '376px auto',
-					'background-attachment' => 'scroll',
-				),
-				'output'      => array(
-					array(
-						'element' => '.crdm_header__bg_1',
-					),
-				),
-				'transport'   => 'auto',
+		$wp_customize->add_control(
+			new \WP_Customize_Image_Control(
+				$wp_customize,
+				'crdm_basic_header[background]',
+				array(
+					'section'  => 'generate_backgrounds_header',
+					'settings' => 'crdm_basic_header[background]',
+					'label'    => __( 'Featured background image', 'crdm-basic' ),
+				)
 			)
 		);
 
-		Kirki::add_field(
-			$this->config_id,
+		$wp_customize->add_setting(
+			'crdm_basic_header[foreground]',
 			array(
-				'type'        => 'background',
-				'settings'    => 'headerBg2',
-				'label'       => esc_attr__( 'Header foreground image', 'crdm-basic' ),
-				'description' => esc_attr__( 'In front of the menu', 'crdm-basic' ),
-				'section'     => $this->section_id,
-				'default'     => array(
-					'background-color'      => 'rgba(255, 255, 255, 0)',
-					'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_foreground.png',
-					'background-repeat'     => 'no-repeat',
-					'background-position'   => 'right bottom',
-					'background-size'       => '100% auto',
-					'background-attachment' => 'scroll',
-				),
-				'output'      => array(
-					array(
-						'element' => '.crdm_header__bg_2-container-content',
-					),
-				),
-				'transport'   => 'auto',
+				'default'           => self::DEFAULT['crdm_basic_header']['foreground'],
+				'type'              => 'option',
+				'capability'        => 'edit_theme_options',
+				'sanitize_callback' => 'esc_url_raw',
 			)
 		);
 
-		Kirki::add_field(
-			$this->config_id,
+		$wp_customize->add_control(
+			new \WP_Customize_Image_Control(
+				$wp_customize,
+				'crdm_basic_header[foreground]',
+				array(
+					'section'  => 'generate_backgrounds_header',
+					'settings' => 'crdm_basic_header[foreground]',
+					'label'    => __( 'Featured foreground image', 'crdm-basic' ),
+				)
+			)
+		);
+
+		$wp_customize->add_setting(
+			'crdm_basic_header[under]',
 			array(
-				'type'        => 'background',
-				'settings'    => 'headerBg3',
-				'label'       => esc_attr__( 'Header bottom image', 'crdm-basic' ),
-				'description' => esc_attr__( 'Under the menu', 'crdm-basic' ),
-				'section'     => $this->section_id,
-				'default'     => array(
-					'background-color'      => 'rgba(255, 255, 255, 0)',
-					'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_grass.png',
-					'background-repeat'     => 'repeat-x',
-					'background-position'   => 'left bottom',
-					'background-size'       => 'auto 100%',
-					'background-attachment' => 'scroll',
-				),
-				'output'      => array(
-					array(
-						'element' => '.crdm_header__bg_3',
-					),
-				),
-				'transport'   => 'auto',
+				'default'           => self::DEFAULT['crdm_basic_header']['under'],
+				'type'              => 'option',
+				'capability'        => 'edit_theme_options',
+				'sanitize_callback' => 'esc_url_raw',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Image_Control(
+				$wp_customize,
+				'crdm_basic_header[under]',
+				array(
+					'section'  => 'generate_backgrounds_header',
+					'settings' => 'crdm_basic_header[under]',
+					'label'    => __( 'Under menu image', 'crdm-basic' ),
+				)
 			)
 		);
 	}
 
+	/**
+	 * Returns the CSS for the background settings.
+	 *
+	 * Returns all the CSS properties for the background settings.
+	 *
+	 * @return array A list of properties in selectors.
+	 */
+	protected function inline_css() {
+		$generate_settings = wp_parse_args( get_option( 'generate_background_settings', array() ), self::DEFAULT['generate_background_settings'] );
+		$crdm_settings     = wp_parse_args( get_option( 'crdm_basic_header', array() ), self::DEFAULT['crdm_basic_header'] );
+		return array(
+			'body'                                 => array(
+				array( 'background-image', $generate_settings['body_image'], 'url' ),
+				array( 'background-repeat', $generate_settings['body_repeat'] ),
+				array( 'background-size', $generate_settings['body_size'] ),
+				array( 'background-attachment', $generate_settings['body_attachment'] ),
+				array( 'background-position', $generate_settings['body_position'] ),
+			),
+			'.crdm_header__bg_1'                   => array(
+				array( 'background-image', $crdm_settings['background'], 'url' ),
+			),
+			'.crdm_header__bg_2-container-content' => array(
+				array( 'background-image', $crdm_settings['foreground'], 'url' ),
+			),
+			'.crdm_header__bg_3'                   => array(
+				array( 'background-image', $crdm_settings['under'], 'url' ),
+			),
+			'.main-navigation, .menu-toggle'       => array(
+				array( 'background-image', $generate_settings['nav_image'], 'url' ),
+				array( 'background-repeat', $generate_settings['nav_repeat'] ),
+			),
+		);
+	}
 }
diff --git a/src/php/CrdmBasic/Customizer/class-border-radius.php b/src/php/CrdmBasic/Customizer/class-border-radius.php
index 3e5fd8c..e30f4b4 100644
--- a/src/php/CrdmBasic/Customizer/class-border-radius.php
+++ b/src/php/CrdmBasic/Customizer/class-border-radius.php
@@ -9,87 +9,80 @@
 
 namespace CrdmBasic\Customizer;
 
-use Kirki;
-
 /**
  * Border radius configuration
  *
  * This class sets up all the customizer options for configuring the radius of corners of the webpage elements.
  */
-class Border_Radius {
+class Border_Radius extends Customizer_Category {
+	const DEFAULT = array(
+		'crdm_basic_border_radius' => '',
+	);
 
 	/**
-	 * The ID of the configuration set ("crdm-basic").
+	 * Initializes customizer options.
 	 *
-	 * @var string $config_id
-	 */
-	protected $config_id = '';
-	/**
-	 * The ID of the panel in which this option is displayed.
+	 * Adds the panel, section, all the settings and controls to the WordPress customizer.
 	 *
-	 * @var string $panel_id
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
 	 */
-	protected $panel_id = '';
-	/**
-	 * The ID of the section in which this option is displayed.
-	 *
-	 * @var string $section_id
-	 */
-	protected $section_id = '';
-
-	/**
-	 * Border_Radius class constructor
-	 *
-	 * Adds the section and its controls to the customizer.
-	 *
-	 * @param string $config_id The ID of the configuration set ("crdm-basic").
-	 * @param string $panel_id The ID of the panel in which this option is displayed.
-	 */
-	public function __construct( string $config_id, string $panel_id ) {
-		$this->config_id  = $config_id;
-		$this->panel_id   = $panel_id;
-		$this->section_id = $panel_id . '_borderRadius';
+	public function customize( $wp_customize ) {
+		$wp_customize->add_section(
+			'crdm_basic_border_radius',
+			array(
+				'capability' => 'edit_theme_options',
+				'title'      => __( 'Border radius', 'crdm-basic' ),
+				'priority'   => 25,
+			)
+		);
 
-		$this->init_section();
-		$this->init_controls();
-	}
+		$wp_customize->add_setting(
+			'crdm_basic_border_radius',
+			array(
+				'default'    => self::DEFAULT['crdm_basic_border_radius'],
+				'type'       => 'option',
+				'capability' => 'edit_theme_options',
+			)
+		);
 
-	/**
-	 * Initializes the section
-	 *
-	 * Adds the section to the customizer.
-	 */
-	protected function init_section() {
-		Kirki::add_section(
-			$this->section_id,
+		$wp_customize->add_control(
+			'crdm_basic_border_radius',
 			array(
-				'title' => esc_attr__( 'Border radius', 'crdm-basic' ),
-				'panel' => $this->panel_id,
+				'type'        => 'text',
+				'section'     => 'crdm_basic_border_radius',
+				'label'       => __( 'Border radius', 'crdm-basic' ),
+				'description' => __( 'Including units, e. g. "10px"', 'crdm-basic' ),
 			)
 		);
 	}
 
 	/**
-	 * Initializes the controls
+	 * Returns the CSS for the background settings.
+	 *
+	 * Returns all the CSS properties for the background settings.
 	 *
-	 * Adds all the controls to the section
+	 * @return array A list of properties in selectors.
 	 */
-	protected function init_controls() {
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'        => 'dimension',
-				'settings'    => 'borderRadius',
-				'label'       => esc_attr__( 'Border radius', 'crdm-basic' ),
-				'description' => esc_attr__( 'Including units, e. g. "10px"', 'crdm-basic' ),
-				'section'     => $this->section_id,
-				'default'     => '0px',
-				'css_vars'    => array(
-					array( '--main-border-radius' ),
-				),
-				'transport'   => 'auto',
-			)
+	protected function inline_css() {
+		$setting = get_option( 'crdm_basic_border_radius', self::DEFAULT['crdm_basic_border_radius'] );
+		return array(
+			'.widget-area .widget'       => array(
+				array( 'border-radius', $setting ),
+			),
+			'.crdm_page-header_captions' => array(
+				array( 'border-radius', $setting ),
+			),
+			'.main-navigation'           => array(
+				array( 'border-radius', $setting ),
+			),
+			'.main-navigation .main-nav ul.sub-menu li:first-child a' => array(
+				array( 'border-top-left-radius', $setting ),
+				array( 'border-top-right-radius', $setting ),
+			),
+			'.main-navigation .main-nav ul.sub-menu li:last-child a' => array(
+				array( 'border-bottom-left-radius', $setting ),
+				array( 'border-bottom-right-radius', $setting ),
+			),
 		);
 	}
-
 }
diff --git a/src/php/CrdmBasic/Customizer/class-color-variant.php b/src/php/CrdmBasic/Customizer/class-color-variant.php
index 6e9b22d..733d4c3 100644
--- a/src/php/CrdmBasic/Customizer/class-color-variant.php
+++ b/src/php/CrdmBasic/Customizer/class-color-variant.php
@@ -91,43 +91,6 @@ protected function init_controls() {
 				'preset'      => array(
 					'light' => array(
 						'settings' => array(
-							'webBg'                 => array(
-								'background-color' => 'rgba(255, 255, 255, 0)',
-								'background-image' => CRDMBASIC_TEMPLATE_URL . 'frontend/light_background.png',
-							),
-							'headerBg1'             => array(
-								'background-color'      => 'rgba(255, 255, 255, 0)',
-								'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_background.png',
-								'background-repeat'     => 'no-repeat',
-								'background-position'   => 'right top',
-								'background-size'       => '376px auto',
-								'background-attachment' => 'scroll',
-							),
-							'headerBg2'             => array(
-								'background-color'      => 'rgba(255, 255, 255, 0)',
-								'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_foreground.png',
-								'background-repeat'     => 'no-repeat',
-								'background-position'   => 'right bottom',
-								'background-size'       => '100% auto',
-								'background-attachment' => 'scroll',
-							),
-							'headerBg3'             => array(
-								'background-color'      => 'rgba(255, 255, 255, 0)',
-								'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_grass.png',
-								'background-repeat'     => 'repeat-x',
-								'background-position'   => 'left bottom',
-								'background-size'       => 'auto 100%',
-								'background-attachment' => 'scroll',
-							),
-							'borderRadius'          => '0px',
-							'menuBg'                => array(
-								'background-color' => '#037b8c',
-								'background-image' => '',
-							),
-							'menuFont'              => array(
-								'font-family' => 'Patrick Hand',
-								'color'       => '#efefe5',
-							),
 							'menuSeparatorColor'    => '#3b969f',
 							'submenuBg'             => array(
 								'background-color' => '#65c3d4',
@@ -138,18 +101,6 @@ protected function init_controls() {
 								'color'       => '#ffffff',
 							),
 							'submenuSeparatorColor' => '#ffffff',
-							'contentFont'           => array(
-								'font-family' => 'PT Sans',
-								'color'       => '#3f3f3f',
-							),
-							'contentH1Font'         => array(
-								'font-family' => 'PT Sans',
-								'color'       => '#037b8c',
-							),
-							'contentH2Font'         => array(
-								'font-family' => 'PT Sans',
-								'color'       => '#037b8c',
-							),
 							'contentH3Font'         => array(
 								'font-family' => 'PT Sans',
 								'color'       => '#00011f',
@@ -173,39 +124,6 @@ protected function init_controls() {
 					),
 					'dark'  => array(
 						'settings' => array(
-							'webBg'                 => array(
-								'background-color' => '#0f2b4a',
-								'background-image' => '',
-							),
-							'headerBg1'             => array(
-								'background-color' => 'rgba(255, 255, 255, 0)',
-								'background-image' => '',
-							),
-							'headerBg2'             => array(
-								'background-color'      => 'rgba(255, 255, 255, 0)',
-								'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/dark_header_foreground.png',
-								'background-repeat'     => 'no-repeat',
-								'background-position'   => 'right bottom',
-								'background-size'       => '87% auto',
-								'background-attachment' => 'scroll',
-							),
-							'headerBg3'             => array(
-								'background-color'      => 'rgba(255, 255, 255, 0)',
-								'background-image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/dark_pavement.png',
-								'background-repeat'     => 'repeat-x',
-								'background-position'   => 'left bottom',
-								'background-size'       => '24px 10px',
-								'background-attachment' => 'scroll',
-							),
-							'borderRadius'          => '0.5em',
-							'menuBg'                => array(
-								'background-color' => '#122030',
-								'background-image' => '',
-							),
-							'menuFont'              => array(
-								'font-family' => 'Patrick Hand',
-								'color'       => '#f2efde',
-							),
 							'menuSeparatorColor'    => '#465058',
 							'submenuBg'             => array(
 								'background-color' => '#122030',
@@ -216,18 +134,6 @@ protected function init_controls() {
 								'color'       => '#5aa4cc',
 							),
 							'submenuSeparatorColor' => '#0f2b4a',
-							'contentFont'           => array(
-								'font-family' => 'PT Sans',
-								'color'       => '#ebebeb',
-							),
-							'contentH1Font'         => array(
-								'font-family' => 'PT Sans',
-								'color'       => '#7adff1',
-							),
-							'contentH2Font'         => array(
-								'font-family' => 'PT Sans',
-								'color'       => '#7adff1',
-							),
 							'contentH3Font'         => array(
 								'font-family' => 'PT Sans',
 								'color'       => '#ebebeb',
diff --git a/src/php/CrdmBasic/Customizer/class-colors.php b/src/php/CrdmBasic/Customizer/class-colors.php
new file mode 100644
index 0000000..5d31c46
--- /dev/null
+++ b/src/php/CrdmBasic/Customizer/class-colors.php
@@ -0,0 +1,225 @@
+<?php
+/**
+ * Contains the Colors class.
+ *
+ * @package crdm-basic
+ */
+
+declare( strict_types=1 );
+
+namespace CrdmBasic\Customizer;
+
+/**
+ * Color configuration
+ *
+ * This class sets up all the customizer options for configuring the various colors of the webpage.
+ */
+class Colors extends Customizer_Category {
+	const DEFAULT = array(
+		'generate_settings' => array(
+			'navigation_background_color' => '#222222',
+			'navigation_text_color'       => '#ffffff',
+			'h1_color'                    => '',
+			'h2_color'                    => '',
+		),
+	);
+
+	/**
+	 * Enqueues the JS.
+	 *
+	 * Enqueues the live-preview JS handlers.
+	 */
+	public function enqueue_live_preview() {
+		wp_enqueue_script( 'crdm_colors_live_preview', CRDMBASIC_TEMPLATE_URL . 'admin/colors_live_preview.js', array(), CRDMBASIC_APP_VERSION, false );
+	}
+
+	/**
+	 * Initializes customizer options.
+	 *
+	 * Adds the panel, section, all the settings and controls to the WordPress customizer.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	public function customize( $wp_customize ) {
+		if ( ! Init::generatepress_module_enabled( 'generate_package_colors' ) ) {
+			$this->add_panel_sections( $wp_customize );
+
+			$this->customize_primary_navigation( $wp_customize );
+			$this->customize_content( $wp_customize );
+		}
+	}
+
+	/**
+	 * Adds the panel and sections
+	 *
+	 * Adds the panel and sections that would otherwise be added by GeneratePress.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	private function add_panel_sections( $wp_customize ) {
+		$wp_customize->add_panel(
+			'generate_colors_panel',
+			array(
+				'priority'       => 30,
+				'theme_supports' => '',
+				'title'          => __( 'Colors', 'crdm-basic' ),
+				'description'    => '',
+			)
+		);
+
+		$wp_customize->add_section(
+			'navigation_color_section',
+			array(
+				'title'    => __( 'Primary Navigation', 'crdm-basic' ),
+				'priority' => 60,
+				'panel'    => 'generate_colors_panel',
+			)
+		);
+
+		$wp_customize->add_section(
+			'content_color_section',
+			array(
+				'title'    => __( 'Content', 'crdm-basic' ),
+				'priority' => 80,
+				'panel'    => 'generate_colors_panel',
+			)
+		);
+	}
+
+	/**
+	 * Initializes customizer options for primary navigation.
+	 *
+	 * Adds customizer options for controling the menu background color.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	private function customize_primary_navigation( $wp_customize ) {
+		$wp_customize->add_setting(
+			'generate_settings[navigation_background_color]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['navigation_background_color'],
+				'type'              => 'option',
+				'sanitize_callback' => array( $this, 'sanitize_hex' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Color_Control(
+				$wp_customize,
+				'navigation_background_color_control',
+				array(
+					'label'    => __( 'Background', 'crdm-basic' ),
+					'section'  => 'navigation_color_section',
+					'settings' => 'generate_settings[navigation_background_color]',
+					'priority' => '1',
+				)
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_settings[navigation_text_color]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['navigation_text_color'],
+				'type'              => 'option',
+				'sanitize_callback' => array( $this, 'sanitize_hex' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Color_Control(
+				$wp_customize,
+				'navigation_text_color',
+				array(
+					'label'    => __( 'Text', 'crdm-basic' ),
+					'section'  => 'navigation_color_section',
+					'settings' => 'generate_settings[navigation_text_color]',
+					'priority' => '2',
+				)
+			)
+		);
+	}
+
+	/**
+	 * Initializes customizer options for heading.
+	 *
+	 * Adds customizer options for controling heading text color.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	private function customize_content( $wp_customize ) {
+		$wp_customize->add_setting(
+			'generate_settings[h1_color]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['h1_color'],
+				'type'              => 'option',
+				'sanitize_callback' => array( $this, 'sanitize_hex' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Color_Control(
+				$wp_customize,
+				'h1_color',
+				array(
+					'label'    => __( 'Heading 1 (H1) Color', 'crdm-basic' ),
+					'section'  => 'content_color_section',
+					'settings' => 'generate_settings[h1_color]',
+					'priority' => '11',
+				)
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_settings[h2_color]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['h2_color'],
+				'type'              => 'option',
+				'sanitize_callback' => array( $this, 'sanitize_hex' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \WP_Customize_Color_Control(
+				$wp_customize,
+				'h2_color',
+				array(
+					'label'    => __( 'Heading 2 (H2) Color', 'crdm-basic' ),
+					'section'  => 'content_color_section',
+					'settings' => 'generate_settings[h2_color]',
+					'priority' => '12',
+				)
+			)
+		);
+	}
+
+	/**
+	 * Sanitizes a color.
+	 *
+	 * Checks whether a color is a valid hex code.
+	 *
+	 * @param string $value The value to be checked.
+	 *
+	 * @return string Hex code or empty string.
+	 */
+	public function sanitize_hex( $value ) {
+		if ( mb_ereg_match( '^#([a-fA-F0-9]{3}){1,2}$', $value ) ) {
+			return $value;
+		}
+		return '';
+	}
+
+	/**
+	 * Returns the CSS for the background settings.
+	 *
+	 * Returns all the CSS properties for the background settings.
+	 *
+	 * @return array A list of properties in selectors.
+	 */
+	protected function inline_css() {
+		return array();
+	}
+}
diff --git a/src/php/CrdmBasic/Customizer/class-content.php b/src/php/CrdmBasic/Customizer/class-content.php
index 9a21f21..4e64fa5 100644
--- a/src/php/CrdmBasic/Customizer/class-content.php
+++ b/src/php/CrdmBasic/Customizer/class-content.php
@@ -112,30 +112,6 @@ protected function init_controls() {
 			)
 		);
 
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'      => 'typography',
-				'settings'  => 'contentFont',
-				'label'     => esc_attr__( 'Body', 'crdm-basic' ),
-				'section'   => $this->section_id,
-				'default'   => array(
-					'font-family'    => 'PT Sans',
-					'variant'        => 'regular',
-					'font-size'      => '17px',
-					'line-height'    => '1.4',
-					'letter-spacing' => 'inherit',
-					'color'          => '#3f3f3f',
-				),
-				'output'    => array(
-					array(
-						'element' => 'body .site-main',
-					),
-				),
-				'transport' => 'auto',
-			)
-		);
-
 		Kirki::add_field(
 			$this->config_id,
 			array(
@@ -154,57 +130,6 @@ protected function init_controls() {
 			)
 		);
 
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'        => 'typography',
-				'settings'    => 'contentH1Font',
-				'label'       => esc_attr__( 'Heading 1 (H1)', 'crdm-basic' ),
-				'description' => esc_attr__( 'The color will be used for other elements (lists, tables etc.) as well.', 'crdm-basic' ),
-				'section'     => $this->section_id,
-				'default'     => array(
-					'font-family'    => 'PT Sans',
-					'variant'        => '700',
-					'font-size'      => '2.3em',
-					'line-height'    => '1.15',
-					'letter-spacing' => 'inherit',
-					'color'          => '#037b8c',
-					'text-transform' => 'none',
-				),
-				'output'      => array(
-					array(
-						'element' => 'body .site-main h1',
-					),
-				),
-				'transport'   => 'auto',
-			)
-		);
-
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'      => 'typography',
-				'settings'  => 'contentH2Font',
-				'label'     => esc_attr__( 'Heading 2 (H2)', 'crdm-basic' ),
-				'section'   => $this->section_id,
-				'default'   => array(
-					'font-family'    => 'PT Sans',
-					'variant'        => 'regular',
-					'font-size'      => '2.2em',
-					'line-height'    => '1.2',
-					'letter-spacing' => 'inherit',
-					'color'          => '#037b8c',
-					'text-transform' => 'none',
-				),
-				'output'    => array(
-					array(
-						'element' => 'body .site-main h2',
-					),
-				),
-				'transport' => 'auto',
-			)
-		);
-
 		Kirki::add_field(
 			$this->config_id,
 			array(
@@ -343,7 +268,7 @@ public function resolve_and_print_list_css_variables() {
 	private static function get_bg_color() {
 		$bg_color = get_theme_mod( 'contentBg' );
 		if ( empty( $bg_color ) || ! isset( $bg_color['background-color'] ) || substr( $bg_color['background-color'], 0, 1 ) !== '#' ) {
-			return get_theme_mod( 'webBg' );
+			return get_theme_mod( 'generate_settings[background_color]' );
 		}
 		return $bg_color;
 	}
diff --git a/src/php/CrdmBasic/Customizer/class-customizer-category.php b/src/php/CrdmBasic/Customizer/class-customizer-category.php
new file mode 100644
index 0000000..6b57579
--- /dev/null
+++ b/src/php/CrdmBasic/Customizer/class-customizer-category.php
@@ -0,0 +1,98 @@
+<?php
+/**
+ * Contains the Customizer_Category class.
+ *
+ * @package crdm-basic
+ */
+
+declare( strict_types=1 );
+
+namespace CrdmBasic\Customizer;
+
+/**
+ * A customizer category (panel/section)
+ *
+ * This class contains all the functions used by a customizer category.
+ */
+abstract class Customizer_Category {
+	/**
+	 * Customizer_Category class constructor
+	 *
+	 * Adds the customize function to the WordPress action.
+	 */
+	public function __construct() {
+		add_action( 'customize_register', array( $this, 'customize' ), 9 );
+		add_action( 'wp_enqueue_scripts', array( $this, 'add_inline_css' ), 11 );
+		add_action( 'customize_preview_init', array( $this, 'enqueue_live_preview' ), 101 );
+	}
+
+	/**
+	 * Enqueues the JS.
+	 *
+	 * Enqueues the live-preview JS handlers.
+	 */
+	public function enqueue_live_preview() {}
+
+	/**
+	 * Initializes customizer options.
+	 *
+	 * Adds the panels, sections, settings and controls for the category to the WordPress customizer.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	abstract public function customize( $wp_customize );
+
+	/**
+	 * Returns the styles for the category.
+	 *
+	 * Returns the styles for the category encoded in an array.
+	 *
+	 * @return array The styles.
+	 */
+	abstract protected function inline_css();
+
+	/**
+	 * Registers the inline CSS stylesheet
+	 *
+	 * Registers and enqueues an empty stylesheet to be used for the customizer-defined settings.
+	 */
+	public static function register_inline_css() {
+		wp_register_style( 'crdm_customizer', false, array(), CRDMBASIC_APP_VERSION );
+		wp_enqueue_style( 'crdm_customizer' );
+	}
+
+	/**
+	 * Adds the inline CSS to the page.
+	 *
+	 * Processes all the styles provided by `inline_css`, converts them to CSS and adds them to the page.
+	 *
+	 * @see inline_css
+	 */
+	public function add_inline_css() {
+		$css = '';
+		foreach ( $this->inline_css() as $selector => $properties ) {
+			$css .= $selector . " {\n";
+			foreach ( $properties as $property ) {
+				if ( empty( $property[1] ) ) {
+					continue;
+				}
+				if ( isset( $property[2] ) ) {
+					switch ( $property[2] ) {
+						case 'url':
+							$value = 'url(\'' . esc_url( $property[1] ) . '\')';
+							break;
+						default:
+							$value = esc_attr( $property[1] );
+					}
+				} else {
+					$value = esc_attr( $property[1] );
+				}
+				$css .= $property[0] . ': ' . $value . ";\n";
+			}
+			$css .= "}\n";
+		}
+		wp_add_inline_style( 'crdm_customizer', $css );
+	}
+}
+
+add_action( 'wp_enqueue_scripts', array( '\\CrdmBasic\\Customizer\\Customizer_Category', 'register_inline_css' ), 10 );
diff --git a/src/php/CrdmBasic/Customizer/class-init.php b/src/php/CrdmBasic/Customizer/class-init.php
index c52d7a9..87a0f62 100644
--- a/src/php/CrdmBasic/Customizer/class-init.php
+++ b/src/php/CrdmBasic/Customizer/class-init.php
@@ -66,9 +66,12 @@ protected function init_panel() {
 	 * Adds all the sections and their controls to the panel.
 	 */
 	protected function init_sections_and_controls() {
+		( new Preset() );
+		( new Border_Radius() );
+		( new Colors() );
+		( new Typography() );
+		( new Background() );
 		( new Color_Variant( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
-		( new Background( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
-		( new Border_Radius( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
 		( new Menu( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
 		( new Sidebar( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
 		( new Page_Header( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
@@ -76,4 +79,29 @@ protected function init_sections_and_controls() {
 		( new Footer( self::CONFIG_ID, self::CONFIG_ID . '_theme' ) );
 	}
 
+	/**
+	 * Checks for a GeneratePress module
+	 *
+	 * Checks whether GeneratePress premium is installed and a module is enabled.
+	 *
+	 * @param string $module The name of the module.
+	 *
+	 * $return bool Whether the module is enabled.
+	 */
+	public static function generatepress_module_enabled( $module ) {
+		if ( ! function_exists( 'generatepress_is_module_active' ) ) {
+			return false;
+		}
+		switch ( $module ) {
+			case 'generate_package_backgrounds':
+				$definition = 'GENERATE_BACKGROUNDS';
+				break;
+			case 'generate_package_colors':
+				$definition = 'GENERATE_COLORS';
+				break;
+			default:
+				return false;
+		}
+		return generatepress_is_module_active( $module, $definition );
+	}
 }
diff --git a/src/php/CrdmBasic/Customizer/class-menu.php b/src/php/CrdmBasic/Customizer/class-menu.php
index ec8253c..1c96dc1 100644
--- a/src/php/CrdmBasic/Customizer/class-menu.php
+++ b/src/php/CrdmBasic/Customizer/class-menu.php
@@ -75,60 +75,6 @@ protected function init_section() {
 	 * Adds all the controls to the section
 	 */
 	protected function init_controls() {
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'      => 'background',
-				'settings'  => 'menuBg',
-				'label'     => esc_attr__( 'Menu background', 'crdm-basic' ),
-				'section'   => $this->section_id,
-				'default'   => array(
-					'background-color'      => '#037b8c',
-					'background-image'      => '',
-					'background-repeat'     => 'repeat',
-					'background-position'   => 'center center',
-					'background-size'       => 'cover',
-					'background-attachment' => 'scroll',
-				),
-				'output'    => array(
-					array(
-						'element' => '.main-navigation, .main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a',
-					),
-				),
-				'transport' => 'auto',
-			)
-		);
-
-		Kirki::add_field(
-			$this->config_id,
-			array(
-				'type'      => 'typography',
-				'settings'  => 'menuFont',
-				'label'     => esc_attr__( 'Menu items', 'crdm-basic' ),
-				'section'   => $this->section_id,
-				'default'   => array(
-					'font-family'    => 'Patrick Hand',
-					'variant'        => 'regular',
-					'font-size'      => '16px',
-					'line-height'    => '37px',
-					'letter-spacing' => 'inherit',
-					'color'          => '#efefe5',
-					'text-transform' => 'none',
-				),
-				'output'    => array(
-					array(
-						'element' => '.main-navigation .main-nav > ul > li > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a',
-					),
-					array(
-						'choice'   => 'color',
-						'element'  => '.dropdown-menu-toggle:before',
-						'property' => 'color',
-					),
-				),
-				'transport' => 'auto',
-			)
-		);
-
 		Kirki::add_field(
 			$this->config_id,
 			array(
diff --git a/src/php/CrdmBasic/Customizer/class-preset.php b/src/php/CrdmBasic/Customizer/class-preset.php
new file mode 100644
index 0000000..e42e200
--- /dev/null
+++ b/src/php/CrdmBasic/Customizer/class-preset.php
@@ -0,0 +1,177 @@
+<?php
+/**
+ * Contains the Preset class
+ *
+ * @package crdm-basic
+ */
+
+declare( strict_types=1 );
+
+namespace CrdmBasic\Customizer;
+
+/**
+ * Preset choice
+ *
+ * This class sets up all the customizer options for choosing one of the built-in presets of the template
+ */
+class Preset {
+	const PRESETS = array(
+		'light' => array(
+			'generate_settings'            => array(
+				'background_color'            => '#ffffff',
+				'navigation_background_color' => '#037b8c',
+				'navigation_text_color'       => '#efefe5',
+				'font_body'                   => 'PT Sans',
+				'body_font_weight'            => 'normal',
+				'body_font_transform'         => 'none',
+				'body_font_size'              => '17',
+				'body_line_height'            => '1.4',
+				'paragraph_margin'            => '1.5',
+				'text_color'                  => '#3f3f3f',
+				'font_navigation'             => 'Patrick Hand',
+				'navigation_font_weight'      => 'normal',
+				'navigation_font_transform'   => 'none',
+				'navigation_font_size'        => '16',
+				'mobile_navigation_font_size' => '',
+				'font_heading_1'              => 'PT Sans',
+				'heading_1_weight'            => 'normal',
+				'heading_1_transform'         => 'none',
+				'heading_1_font_size'         => '2.3',
+				'mobile_heading_1_font_size'  => '',
+				'heading_1_line_height'       => '1.15',
+				'heading_1_margin_bottom'     => '20',
+				'h1_color'                    => '#037b8c',
+				'font_heading_2'              => 'PT Sans',
+				'heading_2_weight'            => 'normal',
+				'heading_2_transform'         => 'none',
+				'heading_2_font_size'         => '2.2',
+				'mobile_heading_2_font_size'  => '',
+				'heading_2_line_height'       => '1.2',
+				'heading_2_margin_bottom'     => '20',
+				'h2_color'                    => '#037b8c',
+			),
+			'generate_background_settings' => array(
+				'body_image'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_background.png',
+				'body_repeat'     => '',
+				'body_size'       => '',
+				'body_attachment' => '',
+				'body_position'   => '',
+				'nav_image'       => '',
+				'nav_repeat'      => '',
+			),
+			'crdm_basic_header'            => array(
+				'background' => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_background.png',
+				'foreground' => CRDMBASIC_TEMPLATE_URL . 'frontend/light_header_foreground.png',
+				'under'      => CRDMBASIC_TEMPLATE_URL . 'frontend/light_grass.png',
+			),
+			'font_body_variants'           => 'regular',
+			'font_body_category'           => '',
+			'font_navigation_variants'     => 'regular',
+			'font_navigation_category'     => '',
+			'font_heading_1_variants'      => '700',
+			'font_heading_1_category'      => '',
+			'font_heading_2_variants'      => 'regular',
+			'font_heading_2_category'      => '',
+			'crdm_basic_border_radius'     => '',
+		),
+		'dark'  => array(
+			'generate_settings'            => array(
+				'background_color'            => '#0f2b4a',
+				'navigation_background_color' => '#122030',
+				'navigation_text_color'       => '#f2efde',
+				'font_body'                   => 'PT Sans',
+				'body_font_weight'            => 'normal',
+				'body_font_transform'         => 'none',
+				'body_font_size'              => '17',
+				'body_line_height'            => '1.4',
+				'paragraph_margin'            => '1.5',
+				'text_color'                  => '#ebebeb',
+				'font_navigation'             => 'Patrick Hand',
+				'navigation_font_weight'      => 'normal',
+				'navigation_font_transform'   => 'none',
+				'navigation_font_size'        => '16',
+				'mobile_navigation_font_size' => '',
+				'font_heading_1'              => 'PT Sans',
+				'heading_1_weight'            => 'normal',
+				'heading_1_transform'         => 'none',
+				'heading_1_font_size'         => '2.3',
+				'mobile_heading_1_font_size'  => '',
+				'heading_1_line_height'       => '1.15',
+				'heading_1_margin_bottom'     => '20',
+				'h1_color'                    => '#7adff1',
+				'font_heading_2'              => 'PT Sans',
+				'heading_2_weight'            => 'normal',
+				'heading_2_transform'         => 'none',
+				'heading_2_font_size'         => '2.2',
+				'mobile_heading_2_font_size'  => '',
+				'heading_2_line_height'       => '1.2',
+				'heading_2_margin_bottom'     => '20',
+				'h2_color'                    => '#7adff1',
+			),
+			'generate_background_settings' => array(
+				'body_image'      => '',
+				'body_repeat'     => '',
+				'body_size'       => '',
+				'body_attachment' => '',
+				'body_position'   => '',
+				'nav_image'       => '',
+				'nav_repeat'      => '',
+			),
+			'crdm_basic_header'            => array(
+				'background' => '',
+				'foreground' => CRDMBASIC_TEMPLATE_URL . 'frontend/dark_header_foreground.png',
+				'under'      => CRDMBASIC_TEMPLATE_URL . 'frontend/dark_pavement.png',
+			),
+			'font_body_variants'           => 'regular',
+			'font_body_category'           => '',
+			'font_navigation_variants'     => 'regular',
+			'font_navigation_category'     => '',
+			'font_heading_1_variants'      => '700',
+			'font_heading_1_category'      => '',
+			'font_heading_2_variants'      => 'regular',
+			'font_heading_2_category'      => '',
+			'crdm_basic_border_radius'     => '0.5em',
+		),
+	);
+
+	/**
+	 * Preset class constructor
+	 *
+	 * Adds settings for the 2 presets for the page.
+	 */
+	public function __construct() {
+		add_action( 'customize_register', array( $this, 'customize' ), 1000 );
+	}
+
+	/**
+	 * Initializes customizer options.
+	 *
+	 * Adds the panel, section, all the settings and controls to the WordPress customizer.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	public function customize( $wp_customize ) {
+		$wp_customize->register_control_type( 'CrdmBasic\Customizer\Controls\Preset_Customize_Control' );
+
+		$wp_customize->add_section(
+			'crdm_basic_preset',
+			array(
+				'title'      => __( 'Preset', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 21,
+			)
+		);
+
+		$wp_customize->add_control(
+			new Controls\Preset_Customize_Control(
+				$wp_customize,
+				'crdm_basic_preset',
+				array(
+					'section'  => 'crdm_basic_preset',
+					'settings' => array(),
+				),
+				self::PRESETS
+			)
+		);
+	}
+}
diff --git a/src/php/CrdmBasic/Customizer/class-typography.php b/src/php/CrdmBasic/Customizer/class-typography.php
new file mode 100644
index 0000000..e9ca95b
--- /dev/null
+++ b/src/php/CrdmBasic/Customizer/class-typography.php
@@ -0,0 +1,900 @@
+<?php
+/**
+ * Contains the Colors class.
+ *
+ * @package crdm-basic
+ */
+
+declare( strict_types=1 );
+
+namespace CrdmBasic\Customizer;
+
+/**
+ * Typography configuration
+ *
+ * This class sets up all the customizer options for configuring the various font and text properties of the theme.
+ */
+class Typography extends Customizer_Category {
+	const DEFAULT = array(
+		'generate_settings'        => array(
+			'font_body'                   => 'System Stack',
+			'body_font_weight'            => 'normal',
+			'body_font_transform'         => 'none',
+			'body_font_size'              => '17',
+			'body_line_height'            => '1.5',
+			'paragraph_margin'            => '1.5',
+			'font_navigation'             => 'inherit',
+			'navigation_font_weight'      => 'normal',
+			'navigation_font_transform'   => 'none',
+			'navigation_font_size'        => '15',
+			'mobile_navigation_font_size' => '15',
+			'font_heading_1'              => 'inherit',
+			'heading_1_weight'            => '300',
+			'heading_1_transform'         => 'none',
+			'heading_1_font_size'         => '40',
+			'mobile_heading_1_font_size'  => '30',
+			'heading_1_line_height'       => '1.2',
+			'heading_1_margin_bottom'     => '20',
+			'font_heading_2'              => 'inherit',
+			'heading_2_weight'            => '300',
+			'heading_2_transform'         => 'none',
+			'heading_2_font_size'         => '40',
+			'mobile_heading_2_font_size'  => '30',
+			'heading_2_line_height'       => '1.2',
+			'heading_2_margin_bottom'     => '20',
+		),
+		'font_body_variants'       => '',
+		'font_body_category'       => '',
+		'font_navigation_variants' => '',
+		'font_navigation_category' => '',
+		'font_heading_1_variants'  => '',
+		'font_heading_1_category'  => '',
+		'font_heading_2_variants'  => '',
+		'font_heading_2_category'  => '',
+	);
+
+	/**
+	 * Enqueues the JS.
+	 *
+	 * Enqueues the live-preview JS handlers.
+	 */
+	public function enqueue_live_preview() {
+		wp_enqueue_script( 'crdm_typography_live_preview', CRDMBASIC_TEMPLATE_URL . 'admin/typography_live_preview.js', array(), CRDMBASIC_APP_VERSION, false );
+		wp_localize_script(
+			'crdm_typography_live_preview',
+			'crdmTypographyLivePreview',
+			array(
+				// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+				'mobile'  => apply_filters( 'generate_mobile_media_query', '(max-width:768px)' ),
+				// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+				'desktop' => apply_filters( 'generate_desktop_media_query', '(min-width:1025px)' ),
+			)
+		);
+	}
+
+	/**
+	 * Initializes customizer options.
+	 *
+	 * Adds the panel, section, all the settings and controls to the WordPress customizer.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	public function customize( $wp_customize ) {
+		if ( ! Init::generatepress_module_enabled( 'generate_package_colors' ) ) {
+			$wp_customize->register_control_type( 'Generate_Typography_Customize_Control' );
+			$wp_customize->register_control_type( 'Generate_Range_Slider_Control' );
+			$this->add_panel_sections( $wp_customize );
+
+			$this->customize_body( $wp_customize );
+			$this->customize_primary_navigation( $wp_customize );
+			$this->customize_headings( $wp_customize );
+		}
+	}
+
+	/**
+	 * Adds the panel and sections
+	 *
+	 * Adds the panel and sections that would otherwise be added by GeneratePress.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	private function add_panel_sections( $wp_customize ) {
+		$wp_customize->add_panel(
+			'generate_typography_panel',
+			array(
+				'capability'     => 'edit_theme_options',
+				'theme_supports' => '',
+				'title'          => __( 'Typography', 'crdm-basic' ),
+				'priority'       => 30,
+			)
+		);
+
+		$wp_customize->add_section(
+			'font_section',
+			array(
+				'title'      => __( 'Body', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 30,
+				'panel'      => 'generate_typography_panel',
+			)
+		);
+
+		$wp_customize->add_section(
+			'font_navigation_section',
+			array(
+				'title'      => __( 'Primary Navigation', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 50,
+				'panel'      => 'generate_typography_panel',
+			)
+		);
+
+		$wp_customize->add_section(
+			'font_content_section',
+			array(
+				'title'      => __( 'Headings', 'crdm-basic' ),
+				'capability' => 'edit_theme_options',
+				'priority'   => 60,
+				'panel'      => 'generate_typography_panel',
+			)
+		);
+	}
+
+	/**
+	 * Initializes customizer options for body.
+	 *
+	 * Adds customizer options for controling the body typography.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	private function customize_body( $wp_customize ) {
+		// Family.
+		$wp_customize->add_setting(
+			'generate_settings[font_body]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['font_body'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Variants.
+		$wp_customize->add_setting(
+			'font_body_variants',
+			array(
+				'default'           => self::DEFAULT['font_body_variants'],
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_variants' ),
+			)
+		);
+
+		// Category.
+		$wp_customize->add_setting(
+			'font_body_category',
+			array(
+				'default'           => self::DEFAULT['font_body_category'],
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Font weight.
+		$wp_customize->add_setting(
+			'generate_settings[body_font_weight]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['body_font_weight'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		// Transform.
+		$wp_customize->add_setting(
+			'generate_settings[body_font_transform]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['body_font_transform'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Typography_Customize_Control(
+				$wp_customize,
+				'body_typography',
+				array(
+					'section'  => 'font_section',
+					'priority' => 1,
+					'settings' => array(
+						'family'    => 'generate_settings[font_body]',
+						'variant'   => 'font_body_variants',
+						'category'  => 'font_body_category',
+						'weight'    => 'generate_settings[body_font_weight]',
+						'transform' => 'generate_settings[body_font_transform]',
+					),
+				)
+			)
+		);
+
+		// Size.
+		$wp_customize->add_setting(
+			'generate_settings[body_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['body_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => 'absint',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[body_font_size]',
+				array(
+					'description' => __( 'Font size', 'crdm-basic' ),
+					'section'     => 'font_section',
+					'priority'    => 40,
+					'settings'    => array(
+						'desktop' => 'generate_settings[body_font_size]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 6,
+							'max'  => 25,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+					),
+				)
+			)
+		);
+
+		// Line height.
+		$wp_customize->add_setting(
+			'generate_settings[body_line_height]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['body_line_height'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_decimal_number' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[body_line_height]',
+				array(
+					'description' => __( 'Line height', 'crdm-basic' ),
+					'section'     => 'font_section',
+					'priority'    => 45,
+					'settings'    => array(
+						'desktop' => 'generate_settings[body_line_height]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 1,
+							'max'  => 5,
+							'step' => .1,
+							'edit' => true,
+							'unit' => '',
+						),
+					),
+				)
+			)
+		);
+
+		// Paragraph margin.
+		$wp_customize->add_setting(
+			'generate_settings[paragraph_margin]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['paragraph_margin'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_decimal_number' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[paragraph_margin]',
+				array(
+					'description' => __( 'Paragraph margin', 'crdm-basic' ),
+					'section'     => 'font_section',
+					'priority'    => 47,
+					'settings'    => array(
+						'desktop' => 'generate_settings[paragraph_margin]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 0,
+							'max'  => 5,
+							'step' => .1,
+							'edit' => true,
+							'unit' => 'em',
+						),
+					),
+				)
+			)
+		);
+	}
+
+	/**
+	 * Initializes customizer options for primary navigation.
+	 *
+	 * Adds customizer options for controling the primary navigation typography.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 */
+	private function customize_primary_navigation( $wp_customize ) {
+		// Family.
+		$wp_customize->add_setting(
+			'generate_settings[font_navigation]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['font_navigation'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Variants.
+		$wp_customize->add_setting(
+			'font_navigation_variants',
+			array(
+				'default'           => self::DEFAULT['font_navigation_variants'],
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_variants' ),
+			)
+		);
+
+		// Category.
+		$wp_customize->add_setting(
+			'font_navigation_category',
+			array(
+				'default'           => self::DEFAULT['font_navigation_category'],
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Weight.
+		$wp_customize->add_setting(
+			'generate_settings[navigation_font_weight]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['navigation_font_weight'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		// Transform.
+		$wp_customize->add_setting(
+			'generate_settings[navigation_font_transform]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['navigation_font_transform'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Typography_Customize_Control(
+				$wp_customize,
+				'google_font_site_navigation_control',
+				array(
+					'section'  => 'font_navigation_section',
+					'priority' => 120,
+					'settings' => array(
+						'family'    => 'generate_settings[font_navigation]',
+						'variant'   => 'font_navigation_variants',
+						'category'  => 'font_navigation_category',
+						'weight'    => 'generate_settings[navigation_font_weight]',
+						'transform' => 'generate_settings[navigation_font_transform]',
+					),
+				)
+			)
+		);
+
+		// Size.
+		$wp_customize->add_setting(
+			'generate_settings[navigation_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['navigation_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => 'absint',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_settings[mobile_navigation_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['mobile_navigation_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_empty_absint' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[navigation_font_size]',
+				array(
+					'description' => __( 'Font size', 'crdm-basic' ),
+					'section'     => 'font_navigation_section',
+					'priority'    => 165,
+					'settings'    => array(
+						'desktop' => 'generate_settings[navigation_font_size]',
+						'mobile'  => 'generate_settings[mobile_navigation_font_size]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 6,
+							'max'  => 30,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+						'mobile'  => array(
+							'min'  => 6,
+							'max'  => 30,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+					),
+				)
+			)
+		);
+	}
+
+	/**
+	 * Initializes customizer options for headings.
+	 *
+	 * Adds customizer options for controling heading typography.
+	 *
+	 * @param \WP_Customize_Manager $wp_customize The WordPress customizer manager.
+	 *
+	 * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
+	 */
+	public function customize_headings( $wp_customize ) {
+		// H1.
+		// Family.
+		$wp_customize->add_setting(
+			'generate_settings[font_heading_1]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['font_heading_1'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Variants.
+		$wp_customize->add_setting(
+			'font_heading_1_variants',
+			array(
+				'default'           => self::DEFAULT['font_heading_1_variants'],
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_variants' ),
+			)
+		);
+
+		// Category.
+		$wp_customize->add_setting(
+			'font_heading_1_category',
+			array(
+				'default'           => self::DEFAULT['font_heading_1_category'],
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Weight.
+		$wp_customize->add_setting(
+			'generate_settings[heading_1_weight]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_1_weight'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		// Transform.
+		$wp_customize->add_setting(
+			'generate_settings[heading_1_transform]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_1_transform'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Typography_Customize_Control(
+				$wp_customize,
+				'font_heading_1_control',
+				array(
+					'label'    => __( 'Heading 1 (H1)', 'crdm-basic' ),
+					'section'  => 'font_content_section',
+					'settings' => array(
+						'family'    => 'generate_settings[font_heading_1]',
+						'variant'   => 'font_heading_1_variants',
+						'category'  => 'font_heading_1_category',
+						'weight'    => 'generate_settings[heading_1_weight]',
+						'transform' => 'generate_settings[heading_1_transform]',
+					),
+				)
+			)
+		);
+
+		// Size.
+		$wp_customize->add_setting(
+			'generate_settings[heading_1_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_1_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => 'absint',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_settings[mobile_heading_1_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['mobile_heading_1_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_empty_absint' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'h1_font_sizes',
+				array(
+					'description' => __( 'Font size', 'crdm-basic' ),
+					'section'     => 'font_content_section',
+					'settings'    => array(
+						'desktop' => 'generate_settings[heading_1_font_size]',
+						'mobile'  => 'generate_settings[mobile_heading_1_font_size]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 15,
+							'max'  => 100,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+						'mobile'  => array(
+							'min'  => 15,
+							'max'  => 100,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+					),
+				)
+			)
+		);
+
+		// Line height.
+		$wp_customize->add_setting(
+			'generate_settings[heading_1_line_height]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_1_line_height'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_decimal_number' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[heading_1_line_height]',
+				array(
+					'description' => __( 'Line height', 'crdm-basic' ),
+					'section'     => 'font_content_section',
+					'settings'    => array(
+						'desktop' => 'generate_settings[heading_1_line_height]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 0,
+							'max'  => 5,
+							'step' => .1,
+							'edit' => true,
+							'unit' => 'em',
+						),
+					),
+				)
+			)
+		);
+
+		// Paragraph margin.
+		$wp_customize->add_setting(
+			'generate_settings[heading_1_margin_bottom]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_1_margin_bottom'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_decimal_number' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[heading_1_margin_bottom]',
+				array(
+					'description' => __( 'Bottom margin', 'crdm-basic' ),
+					'section'     => 'font_content_section',
+					'settings'    => array(
+						'desktop' => 'generate_settings[heading_1_margin_bottom]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 0,
+							'max'  => 100,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+					),
+				)
+			)
+		);
+
+		// H2.
+		// Family.
+		$wp_customize->add_setting(
+			'generate_settings[font_heading_2]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['font_heading_2'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Variants.
+		$wp_customize->add_setting(
+			'font_heading_2_variants',
+			array(
+				'default'           => self::DEFAULT['font_heading_2_variants'],
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_variants' ),
+			)
+		);
+
+		// Category.
+		$wp_customize->add_setting(
+			'font_heading_2_category',
+			array(
+				'default'           => self::DEFAULT['font_heading_2_category'],
+				'sanitize_callback' => 'sanitize_text_field',
+			)
+		);
+
+		// Weight.
+		$wp_customize->add_setting(
+			'generate_settings[heading_2_weight]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_2_weight'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		// Transform.
+		$wp_customize->add_setting(
+			'generate_settings[heading_2_transform]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_2_transform'],
+				'type'              => 'option',
+				'sanitize_callback' => 'sanitize_key',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Typography_Customize_Control(
+				$wp_customize,
+				'font_heading_2_control',
+				array(
+					'label'    => __( 'Heading 2 (H2)', 'crdm-basic' ),
+					'section'  => 'font_content_section',
+					'settings' => array(
+						'family'    => 'generate_settings[font_heading_2]',
+						'variant'   => 'font_heading_2_variants',
+						'category'  => 'font_heading_2_category',
+						'weight'    => 'generate_settings[heading_2_weight]',
+						'transform' => 'generate_settings[heading_2_transform]',
+					),
+				)
+			)
+		);
+
+		// Size.
+		$wp_customize->add_setting(
+			'generate_settings[heading_2_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_2_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => 'absint',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_setting(
+			'generate_settings[mobile_heading_2_font_size]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['mobile_heading_2_font_size'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_empty_absint' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'h2_font_sizes',
+				array(
+					'description' => __( 'Font size', 'crdm-basic' ),
+					'section'     => 'font_content_section',
+					'settings'    => array(
+						'desktop' => 'generate_settings[heading_2_font_size]',
+						'mobile'  => 'generate_settings[mobile_heading_2_font_size]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 10,
+							'max'  => 80,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+						'mobile'  => array(
+							'min'  => 10,
+							'max'  => 80,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+					),
+				)
+			)
+		);
+
+		// Line height.
+		$wp_customize->add_setting(
+			'generate_settings[heading_2_line_height]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_2_line_height'],
+				'type'              => 'option',
+				'sanitize_callback' => array( '\\CrdmBasic\\Customizer\\Typography', 'sanitize_decimal_number' ),
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[heading_2_line_height]',
+				array(
+					'description' => __( 'Line height', 'crdm-basic' ),
+					'section'     => 'font_content_section',
+					'settings'    => array(
+						'desktop' => 'generate_settings[heading_2_line_height]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 0,
+							'max'  => 5,
+							'step' => .1,
+							'edit' => true,
+							'unit' => 'em',
+						),
+					),
+				)
+			)
+		);
+
+		// Paragraph margin.
+		$wp_customize->add_setting(
+			'generate_settings[heading_2_margin_bottom]',
+			array(
+				'default'           => self::DEFAULT['generate_settings']['heading_2_margin_bottom'],
+				'type'              => 'option',
+				'sanitize_callback' => 'generate_premium_sanitize_decimal_integer',
+				'transport'         => 'postMessage',
+			)
+		);
+
+		$wp_customize->add_control(
+			new \Generate_Range_Slider_Control(
+				$wp_customize,
+				'generate_settings[heading_2_margin_bottom]',
+				array(
+					'description' => __( 'Bottom margin', 'crdm-basic' ),
+					'section'     => 'font_content_section',
+					'settings'    => array(
+						'desktop' => 'generate_settings[heading_2_margin_bottom]',
+					),
+					'choices'     => array(
+						'desktop' => array(
+							'min'  => 0,
+							'max'  => 100,
+							'step' => 1,
+							'edit' => true,
+							'unit' => 'px',
+						),
+					),
+				)
+			)
+		);
+	}
+
+	/**
+	 * Sanitizes a decimal number.
+	 *
+	 * Converts a string representation of a number into a non-negative float.
+	 *
+	 * @param string $value The value to be sanitized.
+	 *
+	 * @return float The float value.
+	 */
+	public static function sanitize_decimal_number( $value ) {
+		return abs( floatval( $value ) );
+	}
+
+	/**
+	 * Sanitizes font variants.
+	 *
+	 * Converts a list of font variants into a variant string.
+	 *
+	 * @param string|array $value The value to be sanitized.
+	 *
+	 * @return string The variant string.
+	 */
+	public static function sanitize_variants( $value ) {
+		if ( is_array( $value ) ) {
+			$value = implode( ',', $value );
+		}
+		return sanitize_text_field( $value );
+	}
+
+	/**
+	 * Sanitizes a non-negative integer.
+	 *
+	 * Converts a string representation of a number into a non-negative integer. Optionally keeps empty string as an empty string
+	 *
+	 * @param string $value The value to be sanitized.
+	 *
+	 * @return string|int The integer value.
+	 */
+	public static function sanitize_empty_absint( $value ) {
+		if ( '' === $value ) {
+			return '';
+		}
+		return absint( $value );
+	}
+
+
+	/**
+	 * Returns the CSS for the background settings.
+	 *
+	 * Returns all the CSS properties for the background settings.
+	 *
+	 * @return array A list of properties in selectors.
+	 */
+	protected function inline_css() {
+		return array();
+	}
+}
diff --git a/src/php/disable-gp-functions.php b/src/php/disable-gp-functions.php
new file mode 100644
index 0000000..a8e61c8
--- /dev/null
+++ b/src/php/disable-gp-functions.php
@@ -0,0 +1,19 @@
+<?php
+/**
+ * Declares some function placeholders which turn off specific parts of GeneratePress.
+ *
+ * @package crdm-basic
+ */
+
+// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound
+
+declare(strict_types = 1);
+
+if ( ! function_exists( 'generate_fonts_customize_register' ) ) {
+	/**
+	 * Turns off GP Typography
+	 *
+	 * The presence of this function disables the Typography section from GeneratePress basic.
+	 */
+	function generate_fonts_customize_register() {}
+}
diff --git a/src/php/functions.php b/src/php/functions.php
index f67f160..7ea486a 100644
--- a/src/php/functions.php
+++ b/src/php/functions.php
@@ -19,6 +19,8 @@
 define( 'CRDMBASIC_PARENT_TEMPLATE_PATH', realpath( get_template_directory() ) . DIRECTORY_SEPARATOR );
 define( 'CRDMBASIC_PARENT_TEMPLATE_URL', trailingslashit( get_template_directory_uri() ) );
 
+require CRDMBASIC_APP_PATH . 'disable-gp-functions.php';
+
 /**
  * Initializes the theme
  *
diff --git a/src/scss/admin/preset_customize_control.scss b/src/scss/admin/preset_customize_control.scss
new file mode 100644
index 0000000..106111c
--- /dev/null
+++ b/src/scss/admin/preset_customize_control.scss
@@ -0,0 +1,9 @@
+.crdmbasic_preset_customize_control_img {
+	margin-bottom: 20px;
+	margin-top: 10px;
+}
+
+.crdmbasic_preset_customize_control_button {
+	float: right;
+	margin-top: 10px !important;
+}
diff --git a/src/scss/frontend/content.scss b/src/scss/frontend/content.scss
index 369085f..50fb19b 100644
--- a/src/scss/frontend/content.scss
+++ b/src/scss/frontend/content.scss
@@ -1,5 +1,4 @@
 body {
-	font-family: "PT Sans", sans-serif;
 	grid-column-gap: 50px;
 	grid-template-rows: 100px 1fr;
 }
@@ -20,26 +19,6 @@ body {
 		background-color: #fff;
 	}
 
-	.entry-content,
-	.entry-summary,
-	.page-content {
-		line-height: 1.4;
-	}
-
-	h1 {
-		font-size: 2.3em;
-		font-weight: 700;
-		line-height: 1.15;
-		color: #037b8c;
-	}
-
-	h2 {
-		font-size: 2.2em;
-		font-weight: 400;
-		line-height: 1.2;
-		color: #037b8c;
-	}
-
 	h3 {
 		font-size: 1.8em;
 		font-weight: 700;
diff --git a/src/scss/frontend/header.scss b/src/scss/frontend/header.scss
index 324c3fe..d13ad17 100644
--- a/src/scss/frontend/header.scss
+++ b/src/scss/frontend/header.scss
@@ -16,6 +16,9 @@
 	width: 100%;
 	height: 216px;
 	z-index: -1;
+	background-repeat: no-repeat;
+	background-size: auto 215px;
+	background-position: right top;
 
 	@media (max-width: 768px) {
 		display: none;
@@ -32,6 +35,9 @@
 		width: 340px;
 		height: 205px;
 		z-index: 1;
+		background-repeat: no-repeat;
+		background-size: 100% auto;
+		background-position: right top;
 
 		@media (max-width: 768px) {
 			display: none;
@@ -47,6 +53,9 @@
 	right: 0;
 	width: 100%;
 	height: 28px;
+	background-repeat: repeat-x;
+	background-size: auto 100%;
+	background-position: left bottom;
 }
 
 .page-header-image.crdm_page-header {
@@ -61,7 +70,6 @@
 	min-width: 33%;
 	padding: 0.5em 1.2em;
 	background-color: rgba(196, 219, 122, 0.79);
-	border-radius: var(--main-border-radius);
 
 	h1 {
 		margin: 0 0 0.25em 0;
diff --git a/src/scss/frontend/navigation.scss b/src/scss/frontend/navigation.scss
index 973c917..dd4df59 100644
--- a/src/scss/frontend/navigation.scss
+++ b/src/scss/frontend/navigation.scss
@@ -1,5 +1,4 @@
 .main-navigation {
-	border-radius: var(--main-border-radius);
 
 	.main-nav {
 
@@ -7,18 +6,14 @@
 			position: relative;
 			z-index: 2;
 
-			& > li > a {
-				font-family: "Patrick Hand", cursive;
-
-				&::after {
-					content: "";
-					position: absolute;
-					left: 100%;
-					top: 20%;
-					bottom: 20%;
-					width: 1px;
-					z-index: 1;
-				}
+			& > li > a::after {
+				content: "";
+				position: absolute;
+				left: 100%;
+				top: 20%;
+				bottom: 20%;
+				width: 1px;
+				z-index: 1;
 			}
 		}
 
@@ -26,7 +21,6 @@
 
 			li a {
 				position: relative;
-				font-size: 16px;
 				line-height: 37px;
 			}
 
@@ -51,19 +45,6 @@
 			ul li:first-child a {
 				border-top-color: transparent;
 			}
-
-			&.sub-menu li {
-
-				&:last-child a {
-					border-bottom-left-radius: var(--main-border-radius);
-					border-bottom-right-radius: var(--main-border-radius);
-				}
-
-				&:first-child a {
-					border-top-left-radius: var(--main-border-radius);
-					border-top-right-radius: var(--main-border-radius);
-				}
-			}
 		}
 	}
 }
diff --git a/src/scss/frontend/sidebar.scss b/src/scss/frontend/sidebar.scss
index 83f8cac..63c791d 100644
--- a/src/scss/frontend/sidebar.scss
+++ b/src/scss/frontend/sidebar.scss
@@ -3,7 +3,6 @@
 	.widget {
 		padding: 1em;
 		box-shadow: 0 -5px 0 0 rgba(240, 240, 240, 0.75), 0 5px 0 0 rgba(240, 240, 240, 0.75);
-		border-radius: var(--main-border-radius);
 
 		a,
 		a:visited,
diff --git a/webpack.config.js b/webpack.config.js
index d0d3b19..cd3de82 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,11 +36,14 @@ LiveReloadPlugin.prototype.done = function done(stats) {
 module.exports = {
     mode: 'production',
     entry: {
-        index: './src/js/frontend/index.js'
+        'frontend/index': './src/js/frontend/index.js',
+        'admin/preset_customize_control': './src/js/admin/preset_customize_control.js',
+        'admin/colors_live_preview': './src/js/admin/colors_live_preview.js',
+        'admin/typography_live_preview': './src/js/admin/typography_live_preview.js'
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'dist/frontend')
+        path: path.resolve(__dirname, 'dist')
     },
     devtool: 'source-map',
     watchOptions: {
@@ -105,26 +108,30 @@ module.exports = {
     },
     plugins: [
         new CleanWebpackPlugin({
-            verbose: true
+            verbose: true,
+            cleanStaleWebpackAssets: false
         }),
         new CopyWebpackPlugin([{
             from: './src/png/frontend',
-            to: './'
+            to: './frontend'
         },{
             from: './src/png/admin',
-            to: './../admin'
+            to: './admin'
         },{
             from: './src/php/functions.php',
-            to: './../'
+            to: './'
+        },{
+            from: './src/php/disable-gp-functions.php',
+            to: './'
         },{
             from: './src/php/CrdmBasic',
-            to: './../src/php/CrdmBasic'
+            to: './src/php/CrdmBasic'
         },{
             from: './src/assets',
-            to: './../'
+            to: './'
         },{
             from: './vendor',
-            to: './../vendor',
+            to: './vendor',
             ignore: ['**/\.*', '**/\.*/**/*'],
             transform(content, path) {
                 if (path.match(/\.(?:php|md)$/)) {