diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
index 9cb54d4..f201cf5 100644
--- a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Accordion{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Accordion</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Accordion</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/button.html b/pgaweb/templates/pgaweb/styleguide/alerts/alerts.html
similarity index 62%
rename from pgaweb/templates/pgaweb/styleguide/button/button.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/alerts.html
index 5be1a06..ce2b03e 100644
--- a/pgaweb/templates/pgaweb/styleguide/button/button.html
+++ b/pgaweb/templates/pgaweb/styleguide/alerts/alerts.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Alert{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Buttons</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Alert</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
     <div class="tab-content" id="themeTabContent">
         <div class="tab-pane fade show active theme-content theme-content-default"
              id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
-            {% include "pgaweb/styleguide/button/sd_button.html" %}
+            {% include "pgaweb/styleguide/alerts/sd_alert.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
-            {% include "pgaweb/styleguide/button/dark_button.html" %}
+            {% include "pgaweb/styleguide/alerts/dark_alert.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
-            {% include "pgaweb/styleguide/button/hc_button.html" %}
+            {% include "pgaweb/styleguide/alerts/hc_alert.html" %}
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html b/pgaweb/templates/pgaweb/styleguide/alerts/dark_alert.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/dark_alert.html
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html b/pgaweb/templates/pgaweb/styleguide/alerts/hc_alert.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/hc_alert.html
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html b/pgaweb/templates/pgaweb/styleguide/alerts/sd_alert.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html
rename to pgaweb/templates/pgaweb/styleguide/alerts/sd_alert.html
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html b/pgaweb/templates/pgaweb/styleguide/buttons/buttons.html
similarity index 61%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/buttons.html
index 8ab6799..211fa94 100644
--- a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
+++ b/pgaweb/templates/pgaweb/styleguide/buttons/buttons.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Button{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Dropdowns</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Button</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
     <div class="tab-content" id="themeTabContent">
         <div class="tab-pane fade show active theme-content theme-content-default"
              id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
-            {% include "pgaweb/styleguide/dropdown/sd_dropdown.html" %}
+            {% include "pgaweb/styleguide/buttons/sd_button.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
-            {% include "pgaweb/styleguide/dropdown/dark_dropdown.html" %}
+            {% include "pgaweb/styleguide/buttons/dark_button.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
-            {% include "pgaweb/styleguide/dropdown/hc_dropdown.html" %}
+            {% include "pgaweb/styleguide/buttons/hc_button.html" %}
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/dark_button.html b/pgaweb/templates/pgaweb/styleguide/buttons/dark_button.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/button/dark_button.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/dark_button.html
diff --git a/pgaweb/templates/pgaweb/styleguide/button/hc_button.html b/pgaweb/templates/pgaweb/styleguide/buttons/hc_button.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/button/hc_button.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/hc_button.html
diff --git a/pgaweb/templates/pgaweb/styleguide/button/sd_button.html b/pgaweb/templates/pgaweb/styleguide/buttons/sd_button.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/button/sd_button.html
rename to pgaweb/templates/pgaweb/styleguide/buttons/sd_button.html
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
index c1ee04e..13dfafb 100644
--- a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Checkbox{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Checkbox</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Checkbox</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
index cc317e9..3b433bf 100644
--- a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Color Palette{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Color Palette</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Color Palette</h1>
     <p>
         pgAdmin uses standard sets of colors for consistency and style. We are also
         committed to complying with AA standard contrast ratios (AAA for the high contrast theme).
@@ -29,4 +32,6 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
+
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/dark_dropdown.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/dark_dropdown.html
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/menu.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/dropdowns.html
similarity index 61%
rename from pgaweb/templates/pgaweb/styleguide/menu/menu.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/dropdowns.html
index 8f3bf50..5ca394b 100644
--- a/pgaweb/templates/pgaweb/styleguide/menu/menu.html
+++ b/pgaweb/templates/pgaweb/styleguide/dropdowns/dropdowns.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Dropdown{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Menu</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Dropdown</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
     <div class="tab-content" id="themeTabContent">
         <div class="tab-pane fade show active theme-content theme-content-default"
              id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
-            {% include "pgaweb/styleguide/menu/sd_menu.html" %}
+            {% include "pgaweb/styleguide/dropdowns/sd_dropdown.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
-            {% include "pgaweb/styleguide/menu/dark_menu.html" %}
+            {% include "pgaweb/styleguide/dropdowns/dark_dropdown.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
-            {% include "pgaweb/styleguide/menu/hc_menu.html" %}
+            {% include "pgaweb/styleguide/dropdowns/hc_dropdown.html" %}
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/hc_dropdown.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/hc_dropdown.html
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdowns/sd_dropdown.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html
rename to pgaweb/templates/pgaweb/styleguide/dropdowns/sd_dropdown.html
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
index 79fb2ef..12e1d36 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
@@ -1,4 +1,7 @@
-<h1 class="styleguide-title" id="typography">Iconography</h1>
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Iconography{% endblock %}
+{% block styleguide_content %}
+<h1 class="styleguide-title" id="typography">Styleguide: Iconography</h1>
 <p>
     Icons are visual representations of commands, files or common actions. They
     should be meaningful, simple and legible. pgAdmin uses custom as well as
@@ -42,4 +45,5 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
index bf27331..0f04ca1 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
@@ -3,7 +3,7 @@
 
     <ul class="style-action-menu">
         <li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
-        <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a></li>
+        <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Themes</a></li>
         <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a>
             <ul>
                 <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Font Awesome</a></li>
diff --git a/pgaweb/templates/pgaweb/styleguide/index.html b/pgaweb/templates/pgaweb/styleguide/index.html
index 116a93a..0d8ed20 100644
--- a/pgaweb/templates/pgaweb/styleguide/index.html
+++ b/pgaweb/templates/pgaweb/styleguide/index.html
@@ -1,8 +1,6 @@
 {% extends "pgaweb/page.html" %}
 {% load static %}
 
-{% block title %}Style Guide{% endblock %}
-
 {% block content %}
     <div class="style-action">
         {% if page == "typography" %}
@@ -16,12 +14,7 @@
     <div class="style-guide">
         <link rel="stylesheet"
               href="{% static 'COMPILED/assets/css/styleguide.css' %}?{{ gitrev }}"/>
-        {% if page == 'typography' %}
-            {% include "pgaweb/styleguide/style_typography.html" %}
-        {% elif page == 'themes' %}
-            {% include "pgaweb/styleguide/style_theme.html" %}
-        {% elif page == 'iconography' %}
-            {% include "pgaweb/styleguide/iconography/iconography.html" %}
-        {% endif %}
+        {% block page_content %}
+        {% endblock %}
     </div>
 {% endblock %}
diff --git a/pgaweb/templates/pgaweb/styleguide/input/input.html b/pgaweb/templates/pgaweb/styleguide/input/input.html
index efc75bc..d45d199 100644
--- a/pgaweb/templates/pgaweb/styleguide/input/input.html
+++ b/pgaweb/templates/pgaweb/styleguide/input/input.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Input{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Input Field</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Input</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html b/pgaweb/templates/pgaweb/styleguide/menus/dark_menu.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html
rename to pgaweb/templates/pgaweb/styleguide/menus/dark_menu.html
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html b/pgaweb/templates/pgaweb/styleguide/menus/hc_menu.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html
rename to pgaweb/templates/pgaweb/styleguide/menus/hc_menu.html
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/alert.html b/pgaweb/templates/pgaweb/styleguide/menus/menus.html
similarity index 62%
rename from pgaweb/templates/pgaweb/styleguide/alert/alert.html
rename to pgaweb/templates/pgaweb/styleguide/menus/menus.html
index 2d3d4f0..b5328ec 100644
--- a/pgaweb/templates/pgaweb/styleguide/alert/alert.html
+++ b/pgaweb/templates/pgaweb/styleguide/menus/menus.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Menu{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Alerts</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Menu</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
     <div class="tab-content" id="themeTabContent">
         <div class="tab-pane fade show active theme-content theme-content-default"
              id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
-            {% include "pgaweb/styleguide/alert/sd_alert.html" %}
+            {% include "pgaweb/styleguide/menus/sd_menu.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
-            {% include "pgaweb/styleguide/alert/dark_alert.html" %}
+            {% include "pgaweb/styleguide/menus/dark_menu.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
-            {% include "pgaweb/styleguide/alert/hc_alert.html" %}
+            {% include "pgaweb/styleguide/menus/hc_menu.html" %}
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html b/pgaweb/templates/pgaweb/styleguide/menus/sd_menu.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html
rename to pgaweb/templates/pgaweb/styleguide/menus/sd_menu.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/dark_radiobuttons.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html
rename to pgaweb/templates/pgaweb/styleguide/radio_buttons/dark_radiobuttons.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/hc_radiobuttons.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html
rename to pgaweb/templates/pgaweb/styleguide/radio_buttons/hc_radiobuttons.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radio_buttons/radio_buttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/radio_buttons.html
new file mode 100644
index 0000000..2a307ef
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radio_buttons/radio_buttons.html
@@ -0,0 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Radio Buttons{% endblock %}
+{% block styleguide_content %}
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Radio Buttons</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/radio_buttons/sd_radiobuttons.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/radio_buttons/dark_radiobuttons.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/radio_buttons/hc_radiobuttons.html" %}
+        </div>
+    </div>
+    </p>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radio_buttons/sd_radiobuttons.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html
rename to pgaweb/templates/pgaweb/styleguide/radio_buttons/sd_radiobuttons.html
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
deleted file mode 100644
index 251b2c4..0000000
--- a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Radio Buttons</h1>
-    <p>
-        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
-        <!--Add page specific content as per theme selection-->
-    <div class="tab-content" id="themeTabContent">
-        <div class="tab-pane fade show active theme-content theme-content-default"
-             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
-            {% include "pgaweb/styleguide/radiobuttons/sd_radiobuttons.html" %}
-        </div>
-        <div class="tab-pane fade theme-content  theme-content-default"
-             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
-            {% include "pgaweb/styleguide/radiobuttons/dark_radiobuttons.html" %}
-        </div>
-        <div class="tab-pane fade theme-content  theme-content-default"
-             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
-            {% include "pgaweb/styleguide/radiobuttons/hc_radiobuttons.html" %}
-        </div>
-    </div>
-    </p>
-</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/style_action.html b/pgaweb/templates/pgaweb/styleguide/style_action.html
index d7844ba..88d278c 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_action.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_action.html
@@ -3,7 +3,7 @@
 
     <ul class="style-action-menu">
         <li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
-        <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a>
+        <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Themes</a>
         </li>
         <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a></li>
     </ul>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_action_theme.html b/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
index 615146f..86550a9 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
@@ -3,9 +3,9 @@
 
     <ul class="style-action-menu">
         <li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
-        <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a>
+        <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Themes</a>
             <ul>
-                <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Color
+                <li><a href="{% url 'styleguide_index' page='themes' section='color_palette' %}">Color
                     Palette</a></li>
                 <li><a href="{% url 'styleguide_index' page='themes' section='input' %}">Input
                     Field</a></li>
@@ -27,7 +27,7 @@
                 </li>
                 <li><a href="{% url 'styleguide_index' page='themes' section='menus' %}">Menu</a>
                 </li>
-                <li><a href="{% url 'styleguide_index' page='themes' section='tab_sets' %}">Tab
+                <li><a href="{% url 'styleguide_index' page='themes' section='tab_set' %}">Tab
                     Set</a></li>
             </ul>
         </li>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_theme.html b/pgaweb/templates/pgaweb/styleguide/style_theme.html
index 316f895..0638824 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_theme.html
+++ b/pgaweb/templates/pgaweb/styleguide/style_theme.html
@@ -1,27 +1,6 @@
+{% extends 'pgaweb/styleguide/index.html' %}
+{% block page_content %}
 <div class="style-theme">
-    {% if section == 'color' %}
-        {% include "pgaweb/styleguide/color_palette/color_palette.html" %}
-    {% elif section == 'input' %}
-        {% include "pgaweb/styleguide/input/input.html" %}
-    {% elif section == 'dropdowns' %}
-        {% include "pgaweb/styleguide/dropdown/dropdown.html" %}
-    {% elif section == 'buttons' %}
-        {% include "pgaweb/styleguide/button/button.html" %}
-    {% elif section == 'checkbox' %}
-        {% include "pgaweb/styleguide/checkbox/checkbox.html" %}
-    {% elif section == 'radio_buttons' %}
-        {% include "pgaweb/styleguide/radiobuttons/radiobuttons.html" %}
-    {% elif section == 'toggle_buttons' %}
-        {% include "pgaweb/styleguide/togglebutton/togglebutton.html" %}
-    {% elif section == 'alerts' %}
-        {% include "pgaweb/styleguide/alert/alert.html" %}
-    {% elif section == 'table' %}
-        {% include "pgaweb/styleguide/table/table.html" %}
-    {% elif section == 'accordion' %}
-        {% include "pgaweb/styleguide/accordion/accordion.html" %}
-    {% elif section == 'menus' %}
-        {% include "pgaweb/styleguide/menu/menu.html" %}
-    {% elif section == 'tab_sets' %}
-        {% include "pgaweb/styleguide/tab_set/tab_set.html" %}
-    {% endif %}
-</div>
\ No newline at end of file
+    {% block styleguide_content %}{% endblock %}
+</div>
+{% endblock %}
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
index 334ea42..0b78b7a 100644
--- a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Tab Set{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Tab Set</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Tab Set</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/table.html b/pgaweb/templates/pgaweb/styleguide/table/table.html
index b3236eb..4fbb9ef 100644
--- a/pgaweb/templates/pgaweb/styleguide/table/table.html
+++ b/pgaweb/templates/pgaweb/styleguide/table/table.html
@@ -1,5 +1,8 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Table{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Table</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Table</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
@@ -18,4 +21,5 @@
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
similarity index 100%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/toggle_buttons.html
similarity index 60%
rename from pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
rename to pgaweb/templates/pgaweb/styleguide/toggle_buttons/toggle_buttons.html
index 6419e9f..762bc91 100644
--- a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/toggle_buttons.html
@@ -1,21 +1,25 @@
+{% extends 'pgaweb/styleguide/style_theme.html' %}
+{% block title %}Styleguide: Toggle Buttons{% endblock %}
+{% block styleguide_content %}
 <div class="color-palette">
-    <h1 class="styleguide-title" id="colorpalette">Toggle Buttons</h1>
+    <h1 class="styleguide-title" id="colorpalette">Styleguide: Toggle Buttons</h1>
     <p>
         {% include "pgaweb/styleguide/theme_nav_bar.html" %}
         <!--Add page specific content as per theme selection-->
     <div class="tab-content" id="themeTabContent">
         <div class="tab-pane fade show active theme-content theme-content-default"
              id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
-            {% include "pgaweb/styleguide/togglebutton/sd_togglebutton.html" %}
+            {% include "pgaweb/styleguide/toggle_buttons/sd_togglebutton.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
-            {% include "pgaweb/styleguide/togglebutton/dark_togglebutton.html" %}
+            {% include "pgaweb/styleguide/toggle_buttons/dark_togglebutton.html" %}
         </div>
         <div class="tab-pane fade theme-content  theme-content-default"
              id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
-            {% include "pgaweb/styleguide/togglebutton/hc_togglebutton.html" %}
+            {% include "pgaweb/styleguide/toggle_buttons/hc_togglebutton.html" %}
         </div>
     </div>
     </p>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/style_typography.html b/pgaweb/templates/pgaweb/styleguide/typography.html
similarity index 90%
rename from pgaweb/templates/pgaweb/styleguide/style_typography.html
rename to pgaweb/templates/pgaweb/styleguide/typography.html
index c34aaba..a7486fc 100644
--- a/pgaweb/templates/pgaweb/styleguide/style_typography.html
+++ b/pgaweb/templates/pgaweb/styleguide/typography.html
@@ -1,4 +1,7 @@
-<h1 class="styleguide-title" id="typography">Typography</h1>
+{% extends 'pgaweb/styleguide/index.html' %}
+{% block title %}Styleguide: Typography{% endblock %}
+{% block page_content %}
+<h1 class="styleguide-title" id="typography">Styleguide: Typography</h1>
 <p>
     pgAdmin primarily uses Google Roboto for the overall content and Source Code
     Pro is used for SQL and other code.
@@ -46,4 +49,5 @@
         <pre class="font-size-14-style">14px<span class="tab-14px">Lorem ipsum is dummy text.</span></pre>
         <pre class="font-size-13-style">13px<span class="tab-13px">Lorem ipsum is dummy text.</span></pre>
     </div>
-</div>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/pgaweb/views.py b/pgaweb/views.py
index 0b2b433..113f147 100644
--- a/pgaweb/views.py
+++ b/pgaweb/views.py
@@ -72,12 +72,16 @@ def styleguide_redirect(request):
 def styleguide_index(request, page='typography', section=''):
 
     if page == 'themes' and not section:
-        section = 'color'
+        section = 'color_palette'
 
-    if page == 'iconography' and not section:
-        section = 'fontawesome'
+    if page == 'iconography':
+        section = 'fontawesome' if not section else section
+        url = 'pgaweb/styleguide/{0}/{0}.html'.format(page)
+    else:
+        url = 'pgaweb/styleguide/{0}/{1}.html'.format(
+            section, section) if section else 'pgaweb/styleguide/{0}.html'.format(page)
 
-    return render(request, 'pgaweb/styleguide/index.html', {'page': page, 'section': section})
+    return render(request, url, {'page': page, 'section': section})
 
 # Handle the Support level pages
 def support_index(request):