diff --git a/bulma.theme b/bulma.theme
index 3344c51..bbcfd11 100644
--- a/bulma.theme
+++ b/bulma.theme
@@ -171,7 +171,9 @@ function bulma_preprocess_block(&$variables) {
 
   // Customize the ID and classes of the main menu block.
   $main_menu = Bulma::singleSetting('bulma_general_menu');
-  if (!empty($variables['elements']['#id']) && $variables['elements']['#id'] === 'bulma_' . $main_menu . '_menu') {
+  $plugin_id = 'system_menu_block:' . $main_menu;
+  // Match blocks by plugin ID to support Bulma and any active subtheme.
+  if (!empty($variables['elements']['#plugin_id']) && $variables['elements']['#plugin_id'] == $plugin_id) {
     $variables['attributes']['id'] = 'nav-menu';
     $variables['attributes']['class'][] = 'nav-menu';
     $variables['attributes']['class'][] = 'nav-right';
@@ -380,7 +382,7 @@ function bulma_library_info_alter(&$libraries, $extension) {
   if ($extension === 'bulma' &&
     isset($libraries['global']) &&
     ($themes = Bulmaswatch::getThemes()) &&
-    (($theme = theme_get_setting('bulma_bulmaswatch_theme')) !== 'default')
+    (($theme = Bulma::singleSetting('bulma_bulmaswatch_theme')) !== 'default')
   ) {
     $libraries['global']['css']['base'] = [
       $themes[$theme]['local_css'] => ['minified' => TRUE],
diff --git a/starterkit/default/README.md b/starterkit/default/README.md
index 534760f..7037986 100644
--- a/starterkit/default/README.md
+++ b/starterkit/default/README.md
@@ -6,6 +6,12 @@ It has Bulma CSS framework, Sass, and Font Awesome built-in.
 1. Components and plugins from Bulma.
 2. Sass and Font Awesome built-in.
 
+## Installation
+After installing, you can optionally add the
+[Bulmaswath](https://jenil.github.io/bulmaswatch) themes. To do so,
+[download from GitHub](https://github.com/jenil/bulmaswatch) and extract to
+libraries/bulmaswatch, renaming the extracted directory as necessary.
+
 ## Links
 * Project Page:   http://vallic.com
 * Documentation:  http://vallic.com
diff --git a/starterkit/default/config/install/default.settings.yml b/starterkit/default/config/install/default.settings.yml
index 5c45498..513eced 100644
--- a/starterkit/default/config/install/default.settings.yml
+++ b/starterkit/default/config/install/default.settings.yml
@@ -23,3 +23,5 @@ bulma_table:
    bulma_table_bordered: 0
    bulma_table_striped: 0
    bulma_table_narrow: 0
+bulma_bulmaswatch:
+   bulma_bulmaswatch_theme: 'default'
diff --git a/starterkit/default/config/schema/default.schema.yml b/starterkit/default/config/schema/default.schema.yml
index 0d929bf..62224b7 100644
--- a/starterkit/default/config/schema/default.schema.yml
+++ b/starterkit/default/config/schema/default.schema.yml
@@ -84,3 +84,10 @@ BULMA_SUBTHEME_MACHINE_NAME.settings:
         bulma_table_narrow:
           type: integer
           label: 'Narrow'
+    bulma_bulmaswatch:
+      type: mapping
+      label: 'Bulmaswatch'
+      mapping:
+        bulma_bulmaswatch_theme:
+          type: string
+          label: 'Theme'
diff --git a/starterkit/default/default.theme b/starterkit/default/default.theme
index 2377a76..b2dd9ca 100644
--- a/starterkit/default/default.theme
+++ b/starterkit/default/default.theme
@@ -4,3 +4,20 @@
  * @file
  * Theme functions.
  */
+
+/**
+ * Implements hook_library_info_alter().
+ */
+function BULMA_SUBTHEME_MACHINE_NAME_library_info_alter(&$libraries, $extension) {
+  // Swap in Bulmaswatch theme's css.
+  if ($extension === 'BULMA_SUBTHEME_MACHINE_NAME' &&
+    isset($libraries['global']) &&
+    ($themes = Bulmaswatch::getThemes()) &&
+    (($theme = Bulma::singleSetting('bulma_bulmaswatch_theme')) !== 'default')
+  ) {
+    $libraries['global']['css']['base'] = [
+      $themes[$theme]['local_css'] => ['minified' => TRUE],
+    ];
+  }
+
+}
diff --git a/starterkit/default/templates/system/default.html.twig b/starterkit/default/templates/system/default.html.twig
index 20ce71a..db4abbf 100644
--- a/starterkit/default/templates/system/default.html.twig
+++ b/starterkit/default/templates/system/default.html.twig
@@ -45,120 +45,118 @@
  * @ingroup themeable
  */
 #}
-<div id="header">
+<section class="hero is-primary">
     {# Top navbar #}
     {% if page.navbar_branding or page.navbar_social or page.primary_menu %}
-        <div class="container">
-            <nav class="nav">
-                <div class="nav-left">
+    <div class="hero-head">
+        <nav class="main-nav nav">
+            <div class="container">
+                <div class="nav-left is-clipped">
                     {{ page.navbar_branding }}
                 </div>
                 <div class="nav-center">
                     {{ page.navbar_social }}
                 </div>
                 {% if page.primary_menu %}
-                    <span id="nav-toggle" class="nav-toggle">
+                <span id="nav-toggle" class="nav-toggle">
                     <span></span>
                     <span></span>
                     <span></span>
                 </span>
-                    <div id="nav-menu" class="nav-right nav-menu">
-                        {{ page.primary_menu }}
-                    </div>
+                {{ page.primary_menu }}
                 {% endif %}
-            </nav>
-        </div>
+            </div>
+        </nav>
+    </div>
     {% endif %}
 
     {% if page.header or page.header_search %}
-    <section class="hero is-primary">
-        {# Header hero region + search #}
-        <div class="hero-body">
-            <div class="container">
-                <div class="columns is-vcentered">
-                    <div class="column">
-                        {{ page.header }}
-                        {% if is_front %}
-                            <h1 class="title">{{ site_slogan }}</h1>
-                        {% endif %}
-                    </div>
-                    <div class="column is-narrow">
-                        {{ page.header_search }}
-                    </div>
+    {# Header hero region + search #}
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                    {{ page.header }}
+                    {% if is_front %}
+                        <h1 class="title">{{ site_slogan }}</h1>
+                    {% endif %}
+                </div>
+                <div class="column is-narrow">
+                    {{ page.header_search }}
                 </div>
             </div>
         </div>
-        {% endif %}
+    </div>
+    {% endif %}
 
-        {# Drupal tabs #}
-        {% if page.header_tabs %}
-            <div class="hero-footer">
-                <div class="container">
-                    {{ page.header_tabs }}
-                </div>
+    {# Drupal tabs #}
+    {% if page.header_tabs %}
+        <div class="hero-footer">
+            <div class="container">
+                {{ page.header_tabs }}
             </div>
-        {% endif %}
+        </div>
+    {% endif %}
 
-    </section>
-</div>
+</section>
 
 {# Secondary menu #}
 {% if page.secondary_menu %}
-    <nav class="nav has-shadow">
-        <div class="container">
-            {{ page.secondary_menu }}
-        </div>
-    </nav>
+<nav class="nav has-shadow">
+    <div class="container">
+        {{ page.secondary_menu }}
+    </div>
+</nav>
 {% endif %}
 
 {# Pinterest blocks style #}
 {% if page.tile_one %}
-    <div class="blocks tiles">
-        <div class="container">
-            <div class="tile is-ancestor">
-                <div class="tile is-vertical is-8">
-                    <div class="tile">
-                        {% if page.tile_one or page.tile_two %}
-                            <div class="tile is-parent is-vertical">
-                                <div class="tile is-child notification is-primary">
-                                    {{ page.tile_one }}
-                                </div>
-                                <div class="tile is-child notification is-warning">
-                                    {{ page.tile_two }}
-                                </div>
+<div class="blocks tiles">
+    <div class="container">
+        <div class="tile is-ancestor">
+            <div class="tile is-vertical is-8">
+                <div class="tile">
+                    {% if page.tile_one or page.tile_two %}
+                        <div class="tile is-parent is-vertical">
+                            <div class="tile is-child notification is-primary">
+                                {{ page.tile_one }}
                             </div>
-                        {% endif %}
-
-                        {% if page.tile_three %}
-                            <div class="tile is-parent">
-                                <div class="tile is-child notification is-info">
-                                    {{ page.tile_three }}
-                                </div>
+                            <div class="tile is-child notification is-warning">
+                                {{ page.tile_two }}
                             </div>
-                        {% endif %}
-
-                    </div>
+                        </div>
+                    {% endif %}
 
-                    {% if page.tile_four %}
+                    {% if page.tile_three %}
                         <div class="tile is-parent">
-                            <div class="tile is-child notification is-danger">
-                                {{ page.tile_four }}
+                            <div class="tile is-child notification is-info">
+                                {{ page.tile_three }}
                             </div>
                         </div>
                     {% endif %}
 
                 </div>
 
-                {% if page.tile_five %}
+                {% if page.tile_four %}
                     <div class="tile is-parent">
-                        <div class="tile is-child notification is-success">
-                            {{ page.tile_five }}
+                        <div class="tile is-child notification is-danger">
+                            {{ page.tile_four }}
                         </div>
                     </div>
                 {% endif %}
+
             </div>
+
+            {% if page.tile_five %}
+                <div class="tile is-parent">
+                    <div class="tile is-child notification is-success">
+                        {{ page.tile_five }}
+                    </div>
+                </div>
+            {% endif %}
         </div>
     </div>
+</div>
 {% endif %}
 
 {# Main section #}
@@ -195,11 +193,11 @@
 
 {# Bottom second colored section #}
 {% if page.bottom %}
-    <section class="hero is-info bsa">
-        <div class="container">
-            {{ page.bottom }}
-        </div>
-    </section>
+<section class="hero is-info bsa">
+    <div class="container">
+        {{ page.bottom }}
+    </div>
+</section>
 {% endif %}
 
 {# Footer #}