diff --git a/themes/Bootswatch5.2_Scss/Addon.ini b/themes/Bootswatch5.2_Scss/Addon.ini
new file mode 100644
index 0000000..8b2b445
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/Addon.ini
@@ -0,0 +1,8 @@
+Addon_Name = 'Bootswatch 5.2 Scss'
+;Addon_Unique_ID = 
+Addon_Version = 5.2
+min_gpeasy_version = 5.2
+
+[FrontEndFramework]
+name = Bootstrap
+version = 5
diff --git a/themes/Bootswatch5.2_Scss/_common/common_style.scss b/themes/Bootswatch5.2_Scss/_common/common_style.scss
new file mode 100644
index 0000000..da15a7b
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/_common/common_style.scss
@@ -0,0 +1,133 @@
+// Theme Bootswatch 4 Scss
+// Common styles used in all layouts
+//
+// Instead of Autoprefixer we use vendor-prefix mixins,
+// see /include/thirdparty/Bootstrap4/scss/bootstrap/vp-mixins
+//
+// Migrate to Bootstrap 5.2: check out https://getbootstrap.com/docs/5.2/migration/
+
+
+// Imports
+@if variable-exists(web-font-path) {
+  @import url($web-font-path);
+}
+@import 'contactform.scss';
+@import 'compensate_fixed_navbar.scss'; // default, import only with 'fixed-top' class on navbar in template.php line 44
+@import 'footer.scss';
+@import 'dropdown.scss';
+
+
+// Page Flex Layout for Sticky Footer ==========================================
+html, body {
+  height: 100%;
+}
+
+body {
+  // vendor-prefix mixin
+  @include vp-flexbox();
+  @include vp-flex-direction(column);
+}
+
+// Height fix for Admin Top Bar and hidden admin UI
+html:not(.override_admin_style) body.gpAdmin {
+  height: calc(100% - 29px);
+}
+
+// Navbar =======================================================================
+$navbar-font-size: 1rem !default; // non-standard variable, needs a default value. actual value see layout's variables.scss
+.navbar {
+  font-size: $navbar-font-size;
+}
+
+// Content Area
+.main-content {
+  // vendor-prefix mixin
+  @include vp-flex(1 0 auto);
+}
+
+// Add padding-top to the first content section to prevent content sticking to the navbar
+#gpx_content > .GPAREA:first-child {
+  padding-top: 2rem;
+}
+
+// Main Footer
+footer.main-footer {
+  // vendor-prefix mixin
+  @include vp-flex-shrink(0);
+  // more in footer.scss
+}
+
+// Fix for bad container paddings in navbars (as of Bootstrap 4.1.1)
+@include media-breakpoint-up(sm) {
+  .navbar > .container,
+  .navbar > .container-fluid {
+    padding-right: ($grid-gutter-width / 2);
+    padding-left: ($grid-gutter-width / 2);
+  }
+}
+
+// Align menu right, fix dropdown alignment
+.navbar-right {
+  > .GPAREA:first-child {
+    margin-left: auto;
+  }
+  .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+}
+
+
+// convert Typesetter grid to become Bootstrap 4 (flex) grid =====================
+.gpRow    { @extend .row; }
+.gpCol-1  { @extend .col-md-1; }
+.gpCol-2  { @extend .col-md-2; }
+.gpCol-3  { @extend .col-md-3; }
+.gpCol-4  { @extend .col-md-4; }
+.gpCol-5  { @extend .col-md-5; }
+.gpCol-6  { @extend .col-md-6; }
+.gpCol-7  { @extend .col-md-7; }
+.gpCol-8  { @extend .col-md-8; }
+.gpCol-9  { @extend .col-md-9; }
+.gpCol-10 { @extend .col-md-10; }
+.gpCol-11 { @extend .col-md-11; }
+.gpCol-12 { @extend .col-12; }
+[class *= "gpCol-"] { margin-bottom: unset; }
+
+// fixes for flex grid
+.filetype-wrapper_section.row {
+  > .gpclear {
+    display: none;
+  }
+  &:after{
+    content: none;
+  }
+}
+
+
+// Extra Content 'Dropdown Divider'
+.gpArea_Extra_Bootstrap_Dropdown_Divider {
+  @extend .dropdown-divider;
+}
+
+
+// Admin Links
+.footer-bottom {
+  > span {
+    margin-right: 0.75em;
+  }
+
+  .sitemap_link > a:before,
+  .login_link > a:before {
+    display: inline-block;
+    font-family: FontAwesome;
+  }
+
+  .sitemap_link > a:before {
+    content: "\f0ca\a0";
+  }
+
+  .login_link > a:before {
+    content: "\f2bd\a0";
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/_common/compensate_fixed_navbar.scss b/themes/Bootswatch5.2_Scss/_common/compensate_fixed_navbar.scss
new file mode 100644
index 0000000..492685c
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/_common/compensate_fixed_navbar.scss
@@ -0,0 +1,25 @@
+// Theme Bootswatch 4 Scss
+// Compensations for fixed navbar
+// only required when the main navbar has the css class 'fixed-top'
+
+// padding-top for the body element
+body {
+  padding-top: $navbar-height;
+}
+
+// Prevent targeted anchors hiding behind fixed navbar
+// default compensation
+.GPAREA a[name]:not([href]),
+.GPAREA a[id]:not([href]) {
+  margin-top: calc( ( #{$navbar-height} + 2rem ) * -1 );
+  padding-top: calc( #{$navbar-height} + 2rem );
+  z-index: -5;
+}
+
+// compensation when logged-in
+// with support for HideAdminUI plugin https://github.com/juek/HideAdminUI
+html:not(.override_admin_style) body.gpAdmin .GPAREA a[name]:not([href]),
+html:not(.override_admin_style) body.gpAdmin .GPAREA a[id]:not([href]) {
+  margin-top: calc( ( #{$navbar-height} + 2rem + 29px ) * -1 );
+  padding-top: calc( #{$navbar-height} + 2rem + 29px );
+}
diff --git a/themes/Bootswatch5.2_Scss/_common/contactform.scss b/themes/Bootswatch5.2_Scss/_common/contactform.scss
new file mode 100644
index 0000000..500a128
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/_common/contactform.scss
@@ -0,0 +1,50 @@
+// Typesetter's built-in contact form
+
+form.contactform {
+	width: 100%;
+
+	label:not([for="contact_message"]) {
+		width: auto;
+		float: none;
+		clear: both;
+		margin: 0 0 0.6em 0;
+		> span.title {
+			display: block;
+			float: none;
+			width: auto;
+			margin: 0;
+		}
+		&:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+	}
+	input, textarea {
+		float: none;
+		width: 100%;
+		margin-top: 0.5rem;
+	}
+
+	input.submit.btn {
+		float: none;
+		width: auto;
+		padding: $input-btn-padding-y $input-btn-padding-x;
+	}
+
+	> label[for="contact_message"] {
+		width: auto;
+		float: none;
+		clear: both;
+		margin: 0;
+	}
+
+	> textarea#contact_message {
+		margin-bottom: 0.6em;
+	}
+
+	> .alert {
+		text-align: center;
+		margin-top: 20px;
+	}
+}
diff --git a/themes/Bootswatch5.2_Scss/_common/dropdown.scss b/themes/Bootswatch5.2_Scss/_common/dropdown.scss
new file mode 100644
index 0000000..5eac374
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/_common/dropdown.scss
@@ -0,0 +1,55 @@
+/* Bootstrap 5 Multi-Level Dropdown CSS */
+
+.dropdown-submenu {
+  position: relative; /* Needed for submenu positioning */
+}
+
+/* Style the submenu trigger link */
+.dropdown-submenu > .dropdown-item.dropdown-toggle {
+  /* BS5 dropdown-item already uses flex, so alignment is often okay */
+}
+.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
+    content: '▸'; /* Right arrow indicator (or choose another) */
+    display: inline-block;
+    vertical-align: middle; /* Adjust as needed */
+    border: none; /* Override Bootstrap's default caret */
+    margin-inline-start: 0.5em; /* Space between text and arrow (RTL friendly) */
+}
+
+
+/* Hide submenu by default */
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  /* Position to the side (RTL friendly) */
+  inset-inline-start: 100%;
+  margin-top: -1px; /* Align top edge (adjust as needed based on borders) */
+  margin-inline-start: 0.1rem; /* Small gap (RTL friendly) */
+  display: none; /* Hide by default */
+  /* min-width: set if needed, BS5 dropdown-menu has its own logic */
+}
+
+/* Show submenu on hover/focus */
+/* Using :hover on the LI and :focus-within for keyboard nav */
+.dropdown-submenu:hover > .dropdown-menu,
+.dropdown-submenu:focus-within > .dropdown-menu {
+  display: block; /* Show */
+}
+
+/* Optional: Adjust positioning for menus aligned to the end (right in LTR) */
+/* This requires the parent dropdown-menu to have .dropdown-menu-end */
+.dropdown-menu.dropdown-menu-end .dropdown-submenu > .dropdown-menu {
+    inset-inline-start: auto; /* Unset side positioning */
+    inset-inline-end: 100%;   /* Position to the left (in LTR) */
+    margin-inline-start: 0;
+    margin-inline-end: 0.1rem;
+}
+
+/* Optional: Ensure dropdown items don't wrap if text is long */
+.dropdown-item {
+    white-space: nowrap;
+}
+
+/* Optional: Improve keyboard navigation focus visibility */
+.dropdown-submenu > a:focus + .dropdown-menu {
+    /* display: block; Might be redundant with focus-within */
+}
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/_common/footer.scss b/themes/Bootswatch5.2_Scss/_common/footer.scss
new file mode 100644
index 0000000..f109fb9
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/_common/footer.scss
@@ -0,0 +1,102 @@
+// footer variables
+// these are no Bootstrap standard variables
+// therefore we need to define default values
+
+$footer-font-size:              0.875rem !default;
+$footer-bg:                     $gray-300 !default;
+$footer-border-top:             none !default;
+$footer-color:                  $body-color !default;
+$footer-headings-color:         $headings-color !default;
+$footer-link-color:             $link-color !default;
+$footer-link-hover-color:       $link-hover-color !default;
+
+$footer-nav-bg:                 transparent !default;
+$footer-nav-item-border:        none !default;
+$footer-nav-link-color:         $footer-link-color !default;
+$footer-nav-link-bg:            transparent !default;
+$footer-nav-link-hover-color:   $footer-link-hover-color !default;
+$footer-nav-link-hover-bg:      transparent !default;
+$footer-nav-link-active-color:  $footer-link-hover-color !default;
+$footer-nav-link-active-bg:     transparent !default;
+
+
+footer.main-footer {
+  font-size: $footer-font-size;
+  background: $footer-bg;
+  border-top: $footer-border-top;
+  color: $footer-color;
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
+    color: $footer-headings-color;
+  }
+  a {
+    color: $footer-link-color;
+    &:hover {
+      color: $footer-link-hover-color;
+    }
+  }
+}
+
+.footer-nav,
+.footer-nav ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-nav {
+  margin: 0.6rem 0;
+  background: $footer-nav-bg;
+  border-bottom: $footer-nav-item-border;
+
+  li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    border-top: $footer-nav-item-border;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  a, a:hover, a:visited, a:active, a:focus {
+    text-decoration: none;
+    color: $footer-nav-link-color;
+    background: $footer-nav-link-bg;
+  }
+
+  a {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0.4rem 0;
+
+    &.active {
+      color: $footer-nav-link-active-color;
+      background: $footer-nav-link-active-bg;
+    }
+    &:hover, &:focus {
+      color: $footer-nav-link-hover-color;
+      background: $footer-nav-link-hover-bg;
+    }
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  // 2nd level links
+  > li > ul > li > a {
+    text-indent: 1em;
+  }
+
+  // 3rd level links
+  > li > ul > li > ul > li > a {
+    text-indent: 2em;
+  }
+
+}
diff --git a/themes/Bootswatch5.2_Scss/cerulean/_bootswatch.scss b/themes/Bootswatch5.2_Scss/cerulean/_bootswatch.scss
new file mode 100644
index 0000000..1249cf1
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cerulean/_bootswatch.scss
@@ -0,0 +1,88 @@
+// Cerulean 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
+
+:root {
+  color-scheme: light;
+}
+
+// Mixins
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(tint-color($color, 16%), $color, 60%, shade-color($color, 6%));
+}
+
+// Navbar
+
+.navbar {
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      @include btn-shadow($value);
+    }
+  }
+}
+
+.navbar-brand,
+.nav-link {
+  text-shadow: $text-shadow;
+}
+
+// Buttons
+
+.btn {
+  text-shadow: $text-shadow;
+}
+
+.btn-secondary,
+.btn-outline-secondary {
+  color: $gray-700;
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include btn-shadow($value);
+  }
+}
+
+// Typography
+
+.text-secondary {
+  color: $gray-500 !important;
+}
+
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-dark {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $white;
+  }
+}
+
+// Navs
+
+.dropdown-menu {
+  .dropdown-header {
+    color: $gray-600;
+  }
+}
+
+// Indicators
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/cerulean/_variables.scss b/themes/Bootswatch5.2_Scss/cerulean/_variables.scss
new file mode 100644
index 0000000..7d6bef0
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cerulean/_variables.scss
@@ -0,0 +1,61 @@
+// Cerulean 5.2.2
+// Bootswatch
+
+$theme: "cerulean" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #033c73 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #c71c22 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #dd5600 !default;
+$green:   #73a839 !default;
+$teal:    #20c997 !default;
+$cyan:    #2fa4e7 !default;
+
+$primary:       $cyan !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $blue !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.75 !default;
+
+// Body
+
+$body-color:    $gray-700 !default;
+
+// Fonts
+
+$headings-color:         $cyan !default;
+
+// Dropdowns
+
+$dropdown-link-color:           $body-color !default;
+$dropdown-link-hover-color:     $white !default;
+$dropdown-link-hover-bg:        $primary !default;
+
+// Navbar
+
+$navbar-dark-color:             rgba($white, .8) !default;
+$navbar-dark-hover-color:       $white !default;
diff --git a/themes/Bootswatch5.2_Scss/cerulean/index.html b/themes/Bootswatch5.2_Scss/cerulean/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cerulean/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/cerulean/style.scss b/themes/Bootswatch5.2_Scss/cerulean/style.scss
new file mode 100644
index 0000000..14973c4
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cerulean/style.scss
@@ -0,0 +1,35 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+// Variables 
+
diff --git a/themes/Bootswatch5.2_Scss/cosmo/_bootswatch.scss b/themes/Bootswatch5.2_Scss/cosmo/_bootswatch.scss
new file mode 100644
index 0000000..d0ba665
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cosmo/_bootswatch.scss
@@ -0,0 +1,39 @@
+// Cosmo 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Typography
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Progress bars
+
+.progress {
+  @include box-shadow(none);
+
+  .progress-bar {
+    font-size: 8px;
+    line-height: 8px;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/cosmo/_variables.scss b/themes/Bootswatch5.2_Scss/cosmo/_variables.scss
new file mode 100644
index 0000000..222846d
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cosmo/_variables.scss
@@ -0,0 +1,69 @@
+// Cosmo 5.2.2
+// Bootswatch
+
+$theme: "cosmo" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #373a3c !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2780e3 !default;
+$indigo:  #6610f2 !default;
+$purple:  #613d7c !default;
+$pink:    #e83e8c !default;
+$red:     #ff0039 !default;
+$orange:  #f0ad4e !default;
+$yellow:  #ff7518 !default;
+$green:   #3fb618 !default;
+$teal:    #20c997 !default;
+$cyan:    #9954bb !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-800 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.6 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+$body-color:    $gray-800 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-font-weight:      400 !default;
+
+// Navbar
+
+$navbar-dark-hover-color:       rgba($white, 1) !default;
+$navbar-light-hover-color:      rgba($black, .9) !default;
+
+// Alerts
+
+$alert-border-width:            0 !default;
+
+// Progress bars
+
+$progress-height:               .5rem !default;
diff --git a/themes/Bootswatch5.2_Scss/cosmo/index.html b/themes/Bootswatch5.2_Scss/cosmo/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cosmo/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/cosmo/style.scss b/themes/Bootswatch5.2_Scss/cosmo/style.scss
new file mode 100644
index 0000000..714c40b
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cosmo/style.scss
@@ -0,0 +1,43 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
+// Navbar =======================================================================
+
+// Buttons =====================================================================
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+.progress {
+  @include box-shadow(none);
+
+  .progress-bar {
+    font-size: 8px;
+    line-height: 8px;
+  }
+}
+
+// Containers ==================================================================
diff --git a/themes/Bootswatch5.2_Scss/cyborg/_bootswatch.scss b/themes/Bootswatch5.2_Scss/cyborg/_bootswatch.scss
new file mode 100644
index 0000000..25b9437
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cyborg/_bootswatch.scss
@@ -0,0 +1,148 @@
+// Cyborg 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: dark;
+}
+
+// Navbar
+
+.navbar {
+  &.bg-primary {
+    border: 1px solid $gray-700;
+  }
+
+  &.bg-dark {
+    background-color: $body-bg !important;
+    border: 1px solid $gray-700;
+  }
+
+  &.bg-light {
+    background-color: $gray-500 !important;
+  }
+
+  &.fixed-top {
+    border-width: 0 0 1px;
+  }
+
+  &.fixed-bottom {
+    border-width: 1px 0 0;
+  }
+}
+
+// Buttons
+
+.btn {
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Forms
+
+legend {
+  color: $white;
+}
+
+.form-control {
+  color-scheme: light;
+  background-clip: border-box;
+
+  &:disabled,
+  &[readonly] {
+    border-color: transparent;
+  }
+}
+
+// Navs
+
+.nav-tabs,
+.nav-pills {
+  .nav-link {
+    color: $white;
+
+    &:hover {
+      background-color: $gray-700;
+    }
+
+    &.disabled,
+    &.disabled:hover {
+      color: $nav-link-disabled-color;
+      background-color: transparent;
+    }
+
+    &.active {
+      background-color: $primary;
+    }
+  }
+}
+
+.breadcrumb {
+  a {
+    color: $white;
+  }
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+.badge {
+  &.bg-dark {
+    color: $gray-900;
+  }
+}
+
+// Containers
+
+.list-group-item-action {
+
+  &:hover {
+    border-color: $primary;
+  }
+}
+
+.popover {
+  &-title {
+    border-bottom: none;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/cyborg/_variables.scss b/themes/Bootswatch5.2_Scss/cyborg/_variables.scss
new file mode 100644
index 0000000..4fb7924
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cyborg/_variables.scss
@@ -0,0 +1,181 @@
+// Cyborg 5.2.2
+// Bootswatch
+
+$theme: "cyborg" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #adafae !default;
+$gray-500: #888 !default;
+$gray-600: #555 !default;
+$gray-700: #282828 !default;
+$gray-800: #222 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2a9fd6 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #c00 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f80 !default;
+$green:   #77b300 !default;
+$teal:    #20c997 !default;
+$cyan:    #93c !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-800 !default;
+$dark:          $gray-400 !default;
+
+$min-contrast-ratio:   2.25 !default;
+
+
+// Body
+
+$body-bg:       #060606 !default;
+$body-color:    $gray-400 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:  Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
+$h1-font-size:            4rem !default;
+$h2-font-size:            3rem !default;
+$h3-font-size:            2.5rem !default;
+$h4-font-size:            2rem !default;
+$h5-font-size:            1.5rem !default;
+$headings-color:          $white !default;
+
+// Tables
+
+$table-color:                   $white !default;
+$table-accent-bg:               rgba($white, .05) !default;
+$table-hover-bg:                rgba($white, .075) !default;
+$table-border-color:            $gray-700 !default;
+$table-dark-bg:                 $gray-500 !default;
+$table-dark-border-color:       darken($gray-500, 7.5%) !default;
+
+$table-bg-scale:              0% !default;
+
+// Buttons
+
+$input-btn-padding-x:       1rem !default;
+
+// Forms
+
+$input-bg:                          $white !default;
+$input-disabled-bg:                 $gray-400 !default;
+
+$input-color:                       $gray-900 !default;
+$input-border-color:                $white !default;
+$input-border-width:                0 !default;
+
+$input-group-addon-color:           $white !default;
+$input-group-addon-bg:              $gray-700 !default;
+$input-group-addon-border-color:    transparent !default;
+
+$form-check-input-bg:                     $white !default;
+$form-check-input-border:                 none !default;
+
+$form-file-button-color:          $white !default;
+
+// Dropdowns
+
+$dropdown-bg:                    $gray-700 !default;
+$dropdown-divider-bg:            $gray-800 !default;
+$dropdown-link-color:            $white !default;
+$dropdown-link-hover-color:      $white !default;
+$dropdown-link-hover-bg:         $primary !default;
+
+// Navs
+
+$nav-tabs-border-color:                       $table-border-color !default;
+$nav-tabs-link-hover-border-color:            $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:                  $white !default;
+$nav-tabs-link-active-bg:                     $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color:           $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-color:                     $white !default;
+$pagination-bg:                        $gray-700 !default;
+$pagination-border-color:              transparent !default;
+$pagination-hover-color:               $white !default;
+$pagination-hover-bg:                  $primary !default;
+$pagination-hover-border-color:        $pagination-border-color !default;
+$pagination-disabled-bg:               $pagination-bg !default;
+$pagination-disabled-border-color:     $pagination-border-color !default;
+
+// Cards
+
+$card-bg:                           $gray-700 !default;
+
+// Tooltips
+
+$tooltip-bg:                        $gray-700 !default;
+$tooltip-opacity:                   1 !default;
+
+// Popovers
+
+$popover-bg:                        $gray-700 !default;
+
+// Toasts
+
+$toast-color:                       $white !default;
+$toast-background-color:            $gray-800 !default;
+$toast-border-color:                $gray-700 !default;
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-header-border-color:         $gray-700 !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-700 !default;
+
+// List group
+
+$list-group-color:                  $white !default;
+$list-group-bg:                     $gray-800 !default;
+$list-group-border-color:           $gray-700 !default;
+$list-group-hover-bg:               $primary !default;
+$list-group-disabled-bg:            $gray-700 !default;
+$list-group-action-color:           $white !default;
+$list-group-action-active-bg:       $primary !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $gray-700 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .6 !default;
+$btn-close-hover-opacity:    1 !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/themes/Bootswatch5.2_Scss/cyborg/index.html b/themes/Bootswatch5.2_Scss/cyborg/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cyborg/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/cyborg/style.scss b/themes/Bootswatch5.2_Scss/cyborg/style.scss
new file mode 100644
index 0000000..cf46164
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/cyborg/style.scss
@@ -0,0 +1,19 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
+
diff --git a/themes/Bootswatch5.2_Scss/darkly/_bootswatch.scss b/themes/Bootswatch5.2_Scss/darkly/_bootswatch.scss
new file mode 100644
index 0000000..a4bacbe
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/darkly/_bootswatch.scss
@@ -0,0 +1,84 @@
+// Darkly 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: dark;
+}
+
+// Typography
+
+.blockquote {
+  &-footer {
+    color: $gray-600;
+  }
+}
+
+// Forms
+
+.form-control {
+  color-scheme: light;
+}
+
+.input-group-addon {
+  color: $white;
+}
+
+.form-floating > label {
+  color: $gray-700;
+}
+
+// Navs
+
+.nav-tabs,
+.nav-pills {
+  .nav-link,
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: $white;
+  }
+}
+
+.breadcrumb a {
+  color: $white;
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/darkly/_variables.scss b/themes/Bootswatch5.2_Scss/darkly/_variables.scss
new file mode 100644
index 0000000..6fdbf24
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/darkly/_variables.scss
@@ -0,0 +1,173 @@
+// Darkly 5.2.2
+// Bootswatch
+
+$theme: "darkly" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ebebeb !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #444 !default;
+$gray-800: #303030 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #375a7f !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e74c3c !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f39c12 !default;
+$green:   #00bc8c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498db !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-500 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   1.9 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                $white !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+$text-muted:                  $gray-600 !default;
+
+// Tables
+
+$table-border-color:          $gray-700 !default;
+
+$table-bg-scale:              0% !default;
+
+// Forms
+
+$input-bg:                          $white !default;
+$input-color:                       $gray-800 !default;
+$input-border-color:                $body-bg !default;
+$input-group-addon-color:           $gray-500 !default;
+$input-group-addon-bg:              $gray-700 !default;
+
+$form-check-input-bg:                     $white !default;
+$form-check-input-border:                 none !default;
+
+$form-file-button-color:          $white !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-900 !default;
+$dropdown-border-color:             $gray-700 !default;
+$dropdown-divider-bg:               $gray-700 !default;
+$dropdown-link-color:               $white !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-500 !default;
+$nav-tabs-border-color:             $gray-700 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                rgba($white, .6) !default;
+$navbar-dark-hover-color:          $white !default;
+$navbar-light-color:                rgba($gray-900, .7) !default;
+$navbar-light-hover-color:          $gray-900 !default;
+$navbar-light-active-color:         $gray-900 !default;
+$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               lighten($success, 10%) !default;
+$pagination-hover-border-color:     transparent !default;
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+$pagination-disabled-color:         $white !default;
+$pagination-disabled-bg:            darken($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// Cards
+
+$card-cap-bg:                       $gray-700 !default;
+$card-bg:                           $gray-800 !default;
+
+// Popovers
+
+$popover-bg:                        $gray-800 !default;
+$popover-header-bg:                 $gray-700 !default;
+
+// Toasts
+
+$toast-background-color:            $gray-700 !default;
+$toast-header-background-color:     $gray-800 !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-content-border-color:        $gray-700 !default;
+$modal-header-border-color:         $gray-700 !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-700 !default;
+
+// List group
+
+$list-group-color:                  $body-color !default;
+$list-group-bg:                     $gray-800 !default;
+$list-group-border-color:           $gray-700 !default;
+$list-group-hover-bg:               $gray-700 !default;
+$list-group-action-hover-color:     $list-group-color !default;
+$list-group-action-active-bg:       $gray-900 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $gray-700 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/themes/Bootswatch5.2_Scss/darkly/index.html b/themes/Bootswatch5.2_Scss/darkly/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/darkly/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/darkly/style.scss b/themes/Bootswatch5.2_Scss/darkly/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/darkly/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/drop_down_menu.php b/themes/Bootswatch5.2_Scss/drop_down_menu.php
new file mode 100644
index 0000000..7d111b4
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/drop_down_menu.php
@@ -0,0 +1,45 @@
+     
+<?php
+
+$GP_MENU_ELEMENTS = 'Bootstrap5_menu';
+
+/**
+ * Generates menu link elements compatible with Bootstrap 5.2 navbars/dropdowns.
+ */
+function Bootstrap5_menu($node, $attributes, $level, $menu_id, $item_position){
+    GLOBAL $GP_MENU_LINKS;
+
+   if( $node == 'a' ){
+    $strpos_class = strpos($attributes['attr'], 'class="');
+    $add_class = ( $level > 0 ) ? "dropdown-item" : "nav-link";
+
+    if( $strpos_class === false ){
+      $attributes['attr'] .= ' class="' . $add_class . '"';
+      $strpos_class = strpos($attributes['attr'], 'class="');
+    } else {
+      $attributes['attr'] = substr($attributes['attr'], 0, $strpos_class + 7) 
+        . $add_class . ' '                                                  
+        . substr($attributes['attr'], $strpos_class + 7);                    
+    }
+   
+    // Ensure 'title' is included if it might be used in $GP_MENU_LINKS
+    $search = array('{$href_text}', '{$attr}', '{$label}', '{$title}');
+
+    if( isset($attributes['class']) && is_array($attributes['class']) && in_array('dropdown-toggle', $attributes['class']) ){
+      $format = '<a {$attr} data-bs-toggle="dropdown" href="{$href_text}">{$label}</a>';
+    } else {
+      if (isset($GP_MENU_LINKS) && !empty($GP_MENU_LINKS)) {
+          $format = $GP_MENU_LINKS;
+    } else {
+          $format = '<a {$attr} href="{$href_text}">{$label}</a>';
+      }
+    }
+        
+    return str_replace( $search, $attributes, $format );
+  }
+  return null;
+}
+
+?>
+
+      
diff --git a/themes/Bootswatch5.2_Scss/flatly/_bootswatch.scss b/themes/Bootswatch5.2_Scss/flatly/_bootswatch.scss
new file mode 100644
index 0000000..af14b8f
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/flatly/_bootswatch.scss
@@ -0,0 +1,91 @@
+// Flatly 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.bg-primary {
+  .navbar-nav .show > .nav-link,
+  .navbar-nav .nav-link.active,
+  .navbar-nav .nav-link:hover,
+  .navbar-nav .nav-link:focus {
+    color: $success !important;
+  }
+}
+
+// Navs
+
+.nav-tabs {
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: $primary;
+  }
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+// Containers
+
+.modal,
+.toast,
+.offcanvas {
+  .btn-close {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/flatly/_variables.scss b/themes/Bootswatch5.2_Scss/flatly/_variables.scss
new file mode 100644
index 0000000..2b086a8
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/flatly/_variables.scss
@@ -0,0 +1,113 @@
+// Flatly 5.2.2
+// Bootswatch
+
+$theme: "flatly" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ecf0f1 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #b4bcc2 !default;
+$gray-600: #95a5a6 !default;
+$gray-700: #7b8a8b !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2c3e50 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e74c3c !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f39c12 !default;
+$green:   #18bc9c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498db !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-700 !default;
+
+$min-contrast-ratio:   2.05 !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+
+// Tables
+
+$table-bg-scale:              0% !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default !default;
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-600 !default !default;
+$nav-tabs-border-color:             $gray-200 !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $primary !default;
+$navbar-dark-active-color:          $primary !default;
+
+$navbar-dark-brand-color:                 $white !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-brand-color !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               darken($success, 15%) !default;
+$pagination-hover-border-color:     transparent !default;
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+$pagination-disabled-color:         $gray-200 !default;
+$pagination-disabled-bg:            lighten($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// List group
+
+$list-group-hover-bg:               $gray-200 !default;
+$list-group-disabled-bg:            $gray-200 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;
diff --git a/themes/Bootswatch5.2_Scss/flatly/index.html b/themes/Bootswatch5.2_Scss/flatly/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/flatly/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/flatly/style.scss b/themes/Bootswatch5.2_Scss/flatly/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/flatly/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/index.html b/themes/Bootswatch5.2_Scss/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/journal/_bootswatch.scss b/themes/Bootswatch5.2_Scss/journal/_bootswatch.scss
new file mode 100644
index 0000000..551ae49
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/journal/_bootswatch.scss
@@ -0,0 +1,67 @@
+// Journal 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.bg-dark {
+  background-color: $black !important;
+}
+
+.bg-light {
+  color: $black;
+  background-color: $white !important;
+  border: 1px solid $gray-200;
+
+  &.navbar-fixed-top {
+    border-width: 0 0 1px;
+  }
+
+  &.navbar-fixed-bottom {
+    border-width: 1px 0 0;
+  }
+}
+
+.navbar {
+  font-family: $headings-font-family;
+  font-size: 18px;
+  font-weight: $headings-font-weight;
+}
+
+.navbar-brand {
+  padding-top: .5rem;
+  font-size: inherit;
+  font-weight: $headings-font-weight;
+  text-transform: uppercase;
+}
+
+// Buttons
+
+.btn {
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+
+  &-secondary,
+  &-warning {
+    color: $white;
+  }
+}
+
+// Navs
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/journal/_variables.scss b/themes/Bootswatch5.2_Scss/journal/_variables.scss
new file mode 100644
index 0000000..f65ad53
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/journal/_variables.scss
@@ -0,0 +1,64 @@
+// Journal 5.2.2
+// Bootswatch
+
+$theme: "journal" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #aaa !default;
+$gray-600: #777 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #eb6864 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #f57a00 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f5e625 !default;
+$green:   #22b24c !default;
+$teal:    #20c997 !default;
+$cyan:    #369 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   1.28 !default;
+
+// Fonts
+
+$headings-font-family:   "News Cycle", "Arial Narrow Bold", sans-serif !default;
+$headings-font-weight:    700 !default;
+$headings-line-height:    1.1 !default;
+
+// Buttons
+
+$input-btn-padding-x:         1rem !default;
+
+// Navbar
+
+$navbar-light-color:                rgba($black, .7) !default;
+$navbar-light-hover-color:          $black !default;
+$navbar-light-active-color:         $black !default;
+
+// Pagination
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $primary !default;
+$pagination-hover-border-color:     $primary !default;
diff --git a/themes/Bootswatch5.2_Scss/journal/index.html b/themes/Bootswatch5.2_Scss/journal/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/journal/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/journal/style.scss b/themes/Bootswatch5.2_Scss/journal/style.scss
new file mode 100644
index 0000000..01c924d
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/journal/style.scss
@@ -0,0 +1,17 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
diff --git a/themes/Bootswatch5.2_Scss/litera/_bootswatch.scss b/themes/Bootswatch5.2_Scss/litera/_bootswatch.scss
new file mode 100644
index 0000000..bb3869d
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/litera/_bootswatch.scss
@@ -0,0 +1,119 @@
+// Litera 5.2.2
+// Bootswatch
+
+
+// Variables
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.navbar {
+  font-size: $font-size-sm;
+
+  &.bg-dark {
+    background-color: $success !important;
+  }
+
+  &.bg-light {
+    background-color: $white !important;
+    border: 1px solid rgba(0, 0, 0, .1);
+
+    &.navbar-fixed-top {
+      border-width: 0 0 1px;
+    }
+
+    &.navbar-fixed-bottom {
+      border-width: 1px 0 0;
+    }
+  }
+}
+
+// Typography
+
+p {
+  font-family: $font-family-serif;
+}
+
+blockquote {
+  font-style: italic;
+}
+
+footer {
+  font-size: $font-size-sm;
+}
+
+.lead {
+  font-family: $font-family-sans-serif;
+  color: $gray-600;
+}
+
+// Tables
+
+table,
+.table {
+  font-size: $font-size-sm;
+}
+
+// Navs
+
+.nav,
+.breadcrumb,
+.pagination {
+  font-size: $font-size-sm;
+}
+
+.dropdown-menu {
+  font-size: $font-size-sm;
+}
+
+// Indicators
+
+.alert {
+  font-size: $font-size-sm;
+  color: $white;
+
+  &,
+  p {
+    font-family: $font-family-sans-serif;
+  }
+
+  a,
+  .alert-link {
+    font-weight: 400;
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient($value, mix($body-bg, $value, 15%)) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.list-group {
+  font-size: $font-size-sm;
+}
diff --git a/themes/Bootswatch5.2_Scss/litera/_variables.scss b/themes/Bootswatch5.2_Scss/litera/_variables.scss
new file mode 100644
index 0000000..01e21ed
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/litera/_variables.scss
@@ -0,0 +1,100 @@
+// Litera 5.2.2
+// Bootswatch
+
+$theme: "litera" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #ddd !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #4582ec !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f0ad4e !default;
+$green:   #02b875 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   1.85 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Fonts
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-serif:           Georgia, Cambria, "Times New Roman", Times, serif !default;
+// stylelint-enable
+
+$font-size-base:              1.1rem !default;
+$headings-font-weight:        700 !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, .1) !default;
+
+$table-bg-scale:              0% !default;
+
+// Buttons
+
+$input-btn-padding-y:         .5rem !default;
+$input-btn-padding-x:         1.1rem !default;
+$btn-font-family:             $font-family-sans-serif !default;
+$btn-font-size:               .875rem !default;
+$btn-font-size-sm:            .688rem !default;
+
+$btn-border-radius:           1.078em !default;
+$btn-border-radius-lg:        2.688em !default;
+$btn-border-radius-sm:        .844em !default;
+
+// Forms
+
+$input-border-color:                    rgba(0, 0, 0, .1) !default;
+$input-group-addon-bg:                  $gray-200 !default !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white, .6) !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-hover-color:          $body-color !default;
+$navbar-light-active-color:         $body-color !default;
+
+// Tooltips
+
+$tooltip-font-size:                 11px !default;
+
+// Badges
+
+$badge-font-weight:                 400 !default;
+$badge-padding-y:                   .6em !default;
+$badge-padding-x:                   1.2em !default;
+
+// Alerts
+
+$alert-border-width:                0 !default;
diff --git a/themes/Bootswatch5.2_Scss/litera/index.html b/themes/Bootswatch5.2_Scss/litera/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/litera/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/litera/style.scss b/themes/Bootswatch5.2_Scss/litera/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/litera/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/lumen/_bootswatch.scss b/themes/Bootswatch5.2_Scss/lumen/_bootswatch.scss
new file mode 100644
index 0000000..0fbbfd0
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lumen/_bootswatch.scss
@@ -0,0 +1,330 @@
+// Lumen 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Mixins
+
+@mixin shadow($width: 4px){
+  border-style: solid;
+  border-width: 0 1px $width 1px;
+}
+
+// Navbar
+
+.navbar {
+  @include shadow();
+
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      border-color: shade-color($value, 10%);
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  @include shadow();
+  text-transform: uppercase;
+
+  &:not(.disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+  }
+
+  &:not(.disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+    @include box-shadow(none);
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: $value;
+      }
+
+      &,
+      &:not(.disabled):hover,
+      &:not(.disabled):active,
+      &:focus {
+        border-color: shade-color($value, 10%);
+      }
+    }
+  }
+}
+
+.btn-outline-secondary {
+  color: $black;
+}
+
+[class*="btn-outline"] {
+  border-top-width: 1px;
+}
+
+.btn-group-vertical {
+  .btn + .btn {
+    &:hover {
+      margin-top: -1px;
+      border-top-width: 1px;
+    }
+
+    &:active {
+      margin-top: -1px;
+      border-top-width: 2px;
+    }
+  }
+}
+
+// Typography
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+.blockquote-footer {
+  color: $gray-600;
+}
+
+// Forms
+
+.form-control {
+  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
+}
+
+// Navs
+
+.nav {
+  .open > a,
+  .open > a:hover,
+  .open > a:focus {
+    border-color: transparent;
+  }
+}
+
+.nav-tabs {
+  .nav-link {
+    color: $body-color;
+
+    &,
+    &.disabled,
+    &.disabled:hover,
+    &.disabled:focus {
+      margin-top: 6px;
+      border-color: $nav-tabs-border-color;
+      transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out;
+    }
+
+    &:not(.disabled):hover,
+    &:not(.disabled):focus,
+    &.active {
+      padding-bottom: add(.5rem, 6px);
+      margin-top: 0;
+      border-bottom-color: transparent;
+    }
+  }
+
+  &.nav-justified > li {
+    vertical-align: bottom;
+  }
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  @include shadow();
+  border-top-width: 1px;
+  @include box-shadow(none);
+}
+
+.breadcrumb {
+  border-color: shade-color($breadcrumb-bg, 10%);
+  @include shadow();
+}
+
+.pagination {
+  > li > a,
+  > li > span {
+    position: relative;
+    top: 0;
+    font-weight: 700;
+    color: $pagination-color;
+    text-transform: uppercase;
+    @include shadow();
+
+    &:hover,
+    &:focus {
+      top: 1px;
+      text-decoration: none;
+      border-bottom-width: 3px;
+    }
+
+    &:active {
+      top: 2px;
+      border-bottom-width: 2px;
+    }
+  }
+
+  > .disabled > a,
+  > .disabled > span {
+    &:hover {
+      top: 0;
+      @include shadow();
+    }
+
+    &:active {
+      top: 0;
+      @include shadow();
+    }
+  }
+}
+
+.pager {
+  > li > a,
+  > li > span,
+  > .disabled > a,
+  > .disabled > span {
+    &,
+    &:hover,
+    &:active {
+      border-right-width: 2px;
+      border-left-width: 2px;
+    }
+  }
+}
+
+// Indicators
+
+.btn-close {
+  text-decoration: none;
+  opacity: .4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.alert {
+  color: $white;
+  @include shadow();
+
+  &-primary {
+    background-color: $primary;
+    border-color: shade-color($primary, 10%);
+  }
+
+  &-secondary {
+    background-color: $secondary;
+    border-color: shade-color($secondary, 10%);
+  }
+
+  &-success {
+    background-color: $success;
+    border-color: shade-color($success, 10%);
+  }
+
+  &-info {
+    background-color: $info;
+    border-color: shade-color($info, 10%);
+  }
+
+  &-danger {
+    background-color: $danger;
+    border-color: shade-color($danger, 10%);
+  }
+
+  &-warning {
+    background-color: $warning;
+    border-color: shade-color($warning, 10%);
+  }
+
+  &-dark {
+    background-color: $dark;
+    border-color: shade-color($dark, 10%);
+  }
+
+  &-light {
+    background-color: $light;
+    border-color: shade-color($light, 10%);
+  }
+
+  .alert-link {
+    font-weight: 400;
+    color: $white;
+    text-decoration: underline;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    a,
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+a.list-group-item {
+  &-success {
+    &.active {
+      background-color: $success;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($success, 10%);
+    }
+  }
+
+  &-warning {
+    &.active {
+      background-color: $warning;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($warning, 10%);
+    }
+  }
+
+  &-danger {
+    &.active {
+      background-color: $danger;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: shade-color($danger, 10%);
+    }
+  }
+}
+
+.modal,
+.toast,
+.offcanvas {
+  .btn-close {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/lumen/_variables.scss b/themes/Bootswatch5.2_Scss/lumen/_variables.scss
new file mode 100644
index 0000000..2e0117b
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lumen/_variables.scss
@@ -0,0 +1,93 @@
+// Lumen 5.2.2
+// Bootswatch
+
+$theme: "lumen" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f6f6f6 !default;
+$gray-200: #f0f0f0 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #999 !default;
+$gray-700: #555 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #158cba !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #ff4136 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ff851b !default;
+$green:   #28b62c !default;
+$teal:    #20c997 !default;
+$cyan:    #75caeb !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-700 !default;
+
+$min-contrast-ratio:   1.75 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Tables
+
+$table-bg-scale:              0% !default;
+
+// Buttons
+
+$btn-font-weight:             700 !default;
+
+// Dropdowns
+
+$dropdown-link-color:         rgba(0, 0, 0, .5) !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-900 !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Pagination
+
+$pagination-color:                  $gray-700 !default;
+$pagination-bg:                     $gray-200 !default;
+$pagination-hover-color:            $pagination-color !default;
+$pagination-hover-bg:               $pagination-bg !default;
+$pagination-active-border-color:    darken($primary, 5%) !default;
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $pagination-bg !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $pagination-bg !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Modals
+
+$modal-content-border-color:        rgba($black, .1) !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .4 !default;
+$btn-close-hover-opacity:    1 !default;
diff --git a/themes/Bootswatch5.2_Scss/lumen/index.html b/themes/Bootswatch5.2_Scss/lumen/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lumen/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/lumen/style.scss b/themes/Bootswatch5.2_Scss/lumen/style.scss
new file mode 100644
index 0000000..59e75c2
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lumen/style.scss
@@ -0,0 +1,23 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin shadow($width: 4px){
+  border-style: solid;
+  border-width: 0 1px $width 1px;
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+@import '_variables.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/lux/_bootswatch.scss b/themes/Bootswatch5.2_Scss/lux/_bootswatch.scss
new file mode 100644
index 0000000..96f0062
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lux/_bootswatch.scss
@@ -0,0 +1,178 @@
+// Lux 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.navbar {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  &-nav {
+    .nav-link {
+      padding-top: .715rem;
+      padding-bottom: .715rem;
+    }
+  }
+
+  &-brand {
+    margin-right: 2rem;
+  }
+}
+
+.bg-light {
+  border: 1px solid rgba(0, 0, 0, .1);
+
+  &.navbar-fixed-top {
+    border-width: 0 0 1px;
+  }
+
+  &.navbar-bottom-top {
+    border-width: 1px 0 0;
+  }
+}
+
+.nav-item {
+  margin-right: 2rem;
+}
+
+// Buttons
+
+.btn {
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+
+  &-sm {
+    font-size: 10px;
+  }
+
+  &-warning {
+    &,
+    &:hover,
+    &:not([disabled]):not(.disabled):active,
+    &:focus {
+      color: $white;
+    }
+  }
+}
+
+.btn-outline-secondary {
+  color: $gray-600;
+  border-color: $gray-600;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active {
+    color: $white;
+    background-color: $gray-400;
+    border-color: $gray-400;
+  }
+
+  &:not([disabled]):not(.disabled):focus {
+    box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
+  }
+}
+
+[class*="btn-outline-"] {
+  border-width: 2px;
+}
+
+.border-secondary {
+  border: 1px solid $gray-400 !important;
+}
+
+// Typography
+
+body {
+  font-weight: 200;
+  letter-spacing: 1px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+.text-secondary {
+  color: $body-color !important;
+}
+
+// Tables
+
+th {
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+}
+
+.table {
+  th,
+  td {
+    padding: 1.5rem;
+  }
+
+  &-sm {
+    th,
+    td {
+      padding: .75rem;
+    }
+  }
+}
+
+// Navs
+
+.dropdown-menu {
+  font-size: $font-size-sm;
+  text-transform: none;
+}
+
+// Indicators
+
+.badge {
+  padding-top: .28rem;
+
+  &-pill {
+    border-radius: 10rem;
+  }
+
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.list-group-item,
+.card {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    color: inherit;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/lux/_variables.scss b/themes/Bootswatch5.2_Scss/lux/_variables.scss
new file mode 100644
index 0000000..80700f2
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lux/_variables.scss
@@ -0,0 +1,103 @@
+// Lux 5.2.2
+// Bootswatch
+
+$theme: "lux" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f7f7f9 !default;
+$gray-300: #eceeef !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #919aa1 !default;
+$gray-700: #55595c !default;
+$gray-800: #343a40 !default;
+$gray-900: #1a1a1a !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f0ad4e !default;
+$green:   #4bbf73 !default;
+$teal:    #20c997 !default;
+$cyan:    #1f9bcf !default;
+
+$primary:       $gray-900 !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $white !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.3 !default;
+
+// Options
+
+$enable-rounded:            false !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$h1-font-size:                2rem !default;
+$h2-font-size:                1.75rem !default;
+$h3-font-size:                1.5rem !default;
+$h4-font-size:                1.25rem !default;
+$h5-font-size:                1rem !default;
+$h6-font-size:                .75rem !default;
+$headings-font-weight:        600 !default;
+$headings-color:              $gray-900 !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, .05) !default;
+
+// Buttons + Forms
+
+$input-btn-border-width:      0 !default;
+
+// Buttons
+
+$btn-line-height:             1.5rem !default;
+$input-btn-padding-y:         .75rem !default;
+$input-btn-padding-x:         1.5rem !default;
+$input-btn-padding-y-sm:      .5rem !default;
+$input-btn-padding-x-sm:      1rem !default;
+$input-btn-padding-y-lg:      2rem !default;
+$input-btn-padding-x-lg:      2rem !default;
+$btn-font-weight:             600 !default;
+
+// Forms
+
+$input-line-height:                     1.5 !default;
+$input-bg:                              $gray-200 !default;
+$input-disabled-bg:                     $gray-300 !default;
+$input-group-addon-bg:                  $gray-300 !default;
+
+// Navbar
+
+$navbar-padding-y:                  1.5rem !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-color:                rgba($black, .3) !default;
+$navbar-light-hover-color:          $gray-900 !default;
+$navbar-light-active-color:         $gray-900 !default;
+
+// Pagination
+
+$pagination-border-color:           transparent !default;
+$pagination-hover-border-color:     $pagination-border-color !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
diff --git a/themes/Bootswatch5.2_Scss/lux/index.html b/themes/Bootswatch5.2_Scss/lux/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lux/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/lux/style.scss b/themes/Bootswatch5.2_Scss/lux/style.scss
new file mode 100644
index 0000000..99cda23
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/lux/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
+
diff --git a/themes/Bootswatch5.2_Scss/materia/_bootswatch.scss b/themes/Bootswatch5.2_Scss/materia/_bootswatch.scss
new file mode 100644
index 0000000..d9f9a70
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/materia/_bootswatch.scss
@@ -0,0 +1,662 @@
+// Materia 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Mixins
+
+@mixin ripple($color) {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin-left: 0;
+    pointer-events: none;
+    content: "";
+    background-position: 50%;
+    background-size: 1000% 1000%;
+    border: none;
+    opacity: 0;
+    transition: background .5s, opacity 1s;
+    @include gradient-radial($color 10%, transparent 10.01%);
+  }
+
+  &:active::before {
+    background-size: 0 0;
+    opacity: .2;
+    transition: none;
+  }
+
+  &.disabled,
+  &[disabled] {
+    &::before {
+      display: none;
+    }
+  }
+}
+
+@mixin btn($class,$bg,$color) {
+  .btn-#{$class} {
+    &:focus {
+      background-color: $bg;
+      box-shadow: 0 0 0 2px rgba(204, 204, 204, .5);
+    }
+
+    &:hover,
+    &:active:hover {
+      background-color: shade-color($bg, 12%);
+    }
+
+    &:active {
+      box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+    }
+
+    @include ripple($color);
+  }
+
+  .btn-outline-#{$class} {
+    @include ripple($color);
+  }
+}
+
+.dropdown-toggle::after,
+.dropup .dropdown-toggle::after,
+.dropstart .dropdown-toggle::after,
+.dropend .dropdown-toggle::after {
+  border-width: 4px;
+}
+
+// Navbar
+
+.navbar {
+  border: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
+
+  &-brand {
+    font-size: 24px;
+  }
+
+  &-nav .nav-link {
+    padding-top: .9rem;
+    padding-bottom: .9rem;
+  }
+
+  &.bg-dark,
+  &.bg-primary {
+    input[type="search"],
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    input[type="number"],
+    input[type="tel"] {
+      color: $white;
+      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5);
+
+      &:focus {
+        box-shadow: inset 0 -2px 0 $white;
+      }
+
+      &::placeholder {
+        color: rgba(255, 255, 255, .5);
+      }
+    }
+  }
+}
+
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-dark,
+.bg-black {
+  color-scheme: dark;
+}
+
+// Buttons
+
+@include btn(primary, $primary, $white);
+@include btn(secondary, $secondary, $gray-500);
+@include btn(success, $success, $white);
+@include btn(info, $info, $white);
+@include btn(warning, $warning, $white);
+@include btn(danger, $danger, $white);
+@include btn(dark, $dark, $white);
+@include btn(light, $light, $white);
+
+.btn {
+  text-transform: uppercase;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
+  transition: color .4s, background-color .4s, border-color .4s, box-shadow .4s;
+
+  &-link {
+    color: $link-color;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      color: $link-hover-color;
+      text-decoration: $link-hover-decoration;
+      box-shadow: none;
+    }
+
+    &.disabled, // Although btn-link is intended for buttons, which want to look like link, I include here a.disable for the sake of consistency
+    &[disabled],
+    fieldset[disabled] & {
+      &:hover,
+      &:active:hover {
+        color: $btn-link-disabled-color;
+        text-decoration: none;
+      }
+    }
+  }
+
+  &-secondary {
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+      color: rgba(0, 0, 0, .4);
+      background-color: rgba(0, 0, 0, .1);
+      opacity: 1;
+
+      &:hover,
+      &:focus {
+        background-color: rgba(0, 0, 0, .1);
+      }
+    }
+  }
+
+  &-outline-secondary {
+    color: $gray-300;
+    border-color: $gray-200;
+  }
+
+  &-warning {
+    color: $white;
+  }
+}
+
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: 0;
+  }
+
+  &-vertical {
+    > .btn + .btn,
+    > .btn + .btn-group,
+    > .btn-group + .btn,
+    > .btn-group + .btn-group {
+      margin-top: 0;
+    }
+  }
+
+  .btn + .btn,
+  .btn + .btn-group > .dropdown-toggle {
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
+  }
+}
+
+.border-secondary {
+  border: 1px solid #dfdfdf !important;
+}
+
+// Typography
+
+body,
+input,
+button {
+  letter-spacing: .1px;
+}
+
+p {
+  margin: 0 0 1em;
+}
+
+.text-secondary {
+  color: $gray-500 !important;
+}
+
+// Tables
+
+.table-hover {
+  > tbody > tr,
+  > tbody > tr > th,
+  > tbody > tr > td {
+    transition: background-color .2s, color .2s;
+  }
+}
+
+.thead-inverse th {
+  color: $white;
+  background-color: $primary;
+}
+
+// Forms
+
+.col-form-label {
+  font-size: 16px;
+
+  &-sm {
+    font-size: $font-size-sm;
+  }
+
+  &-lg {
+    font-size: $font-size-lg;
+  }
+}
+
+.form-control {
+  color-scheme: inherit;
+}
+
+textarea,
+textarea.form-control,
+input.form-control,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+[type="text"].form-control,
+[type="password"].form-control,
+[type="email"].form-control,
+[type="tel"].form-control,
+[contenteditable].form-control {
+  box-shadow: inset 0 -1px 0 #ddd;
+  transition: box-shadow .2s;
+
+  &:focus {
+    box-shadow: inset 0 -2px 0 $primary;
+  }
+
+  &[disabled],
+  &[readonly] {
+    border-bottom: 1px dotted #ddd;
+    box-shadow: none;
+  }
+
+  &[disabled],
+  &[disabled]::placeholder {
+    color: #ddd;
+  }
+}
+
+select,
+select.form-control {
+  padding: .5rem 0;
+  background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'><path fill='#{$gray-600}' d='M8 0 4 4 0 0z'/></svg>"));
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 8px 4px;
+  box-shadow: inset 0 -1px 0 #ddd;
+  appearance: none;
+
+  &.input {
+    &-sm {
+      font-size: $font-size-sm;
+    }
+
+    &-lg {
+      font-size: $font-size-lg;
+    }
+  }
+
+  &:focus {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'><path fill='#{$gray-900}' d='M8 0 4 4 0 0z'/></svg>"));
+    box-shadow: inset 0 -2px 0 $primary;
+  }
+
+  &[multiple] {
+    background: none;
+  }
+}
+
+.form-check-input {
+  width: 1.25em;
+  height: 1.25em;
+  margin-top: 1px;
+  border: 2px solid $gray-400;
+
+  &:checked[type="radio"] {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$blue}' stroke='#{$white}'/></svg>")), var(--bs-gradient);
+    background-size: 1.8em;
+  }
+}
+
+.form-switch {
+  .form-check-input {
+    position: relative;
+    height: .8em;
+    margin-top: .29em;
+    background-color: $gray-400;
+    background-image: none;
+    border: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: -.2em;
+      left: -.2em;
+      width: 1.2em;
+      height: 1.2em;
+      content: "";
+      background-color: $white;
+      border-radius: 50%;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      transition: left .15s ease-in-out;
+    }
+
+    &::after {
+      position: absolute;
+      top: -.2em;
+      left: -.2em;
+      z-index: -1;
+      width: 1.2em;
+      height: 1.2em;
+      content: "";
+      border-radius: 50%;
+      box-shadow: 0 0 0 9px rgba(0, 0, 0, .05);
+      transition: left .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
+      transform: scale(0);
+    }
+
+    &:hover:not(.disabled),
+    &:focus:not(.disabled) {
+
+      &::after {
+        transform: scale(.9);
+      }
+    }
+
+    &:focus:not(.disabled) {
+      &::after {
+        box-shadow: 0 0 0 9px rgba(0, 0, 0, .1);
+      }
+    }
+
+    &:checked {
+      background-color: rgba(33, 150, 243, .3);
+
+      &::before {
+        left: calc(100% - .8em);
+        background-color: rgba(33, 150, 243, 1);
+      }
+
+      &::after {
+        left: calc(100% - .8em);
+        box-shadow: 0 0 0 9px rgba(33, 150, 243, .1);
+      }
+
+      &:hover:not(.disabled),
+      &:focus:not(.disabled) {
+        &::after {
+          transform: scale(.9);
+        }
+      }
+
+      &:focus:not(.disabled) {
+        &::after {
+          box-shadow: 0 0 0 9px rgba(33, 150, 243, .2);
+        }
+      }
+    }
+  }
+}
+
+.form-check:not(.form-switch) {
+  .form-check-input {
+    &:checked[type="checkbox"] {
+      background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$white}' stroke-width='2' d='m6 10 3 3 6-6'/></svg>")), var(--bs-gradient);
+      background-size: 1.6em;
+    }
+  }
+}
+
+.has-warning {
+  input:not([type="checkbox"]),
+  .form-control,
+  input.form-control[readonly],
+  input[type="text"][readonly],
+  [type="text"].form-control[readonly],
+  input:not([type="checkbox"]):focus,
+  .form-control:focus {
+    border-bottom: none;
+    box-shadow: inset 0 -2px 0 $warning;
+  }
+}
+
+.has-danger {
+  input:not([type="checkbox"]),
+  .form-control,
+  input.form-control[readonly],
+  input[type="text"][readonly],
+  [type="text"].form-control[readonly],
+  input:not([type="checkbox"]):focus,
+  .form-control:focus {
+    border-bottom: none;
+    box-shadow: inset 0 -2px 0 $danger;
+  }
+}
+
+.has-success {
+  input:not([type="checkbox"]),
+  .form-control,
+  input.form-control[readonly],
+  input[type="text"][readonly],
+  [type="text"].form-control[readonly],
+  input:not([type="checkbox"]):focus,
+  .form-control:focus {
+    border-bottom: none;
+    box-shadow: inset 0 -2px 0 $success;
+  }
+}
+
+// Remove the Bootstrap feedback styles for input addons
+.input-group-addon {
+  .has-warning &,
+  .has-danger &,
+  .has-success & {
+    color: $input-color;
+    background-color: $input-group-addon-bg;
+    border-color: $input-group-addon-border-color;
+  }
+}
+
+.form-group-lg {
+  select,
+  select.form-control {
+    line-height: 1.5;
+  }
+}
+
+// Navs
+
+.nav-tabs {
+  .nav-item + .nav-item {
+    margin-left: 0;
+  }
+
+  .nav-link,
+  .nav-link:focus {
+    margin-right: 0;
+    color: $body-color;
+    background-color: transparent;
+    border: none;
+    box-shadow: inset 0 -1px 0 #ddd;
+    transition: color .2s, box-shadow .2s;
+
+    &:hover {
+      color: $primary;
+      background-color: transparent;
+      box-shadow: inset 0 -2px 0 $primary;
+    }
+  }
+
+  .nav-link.active,
+  .nav-link.active:focus {
+    color: $primary;
+    border: none;
+    box-shadow: inset 0 -2px 0 $primary;
+
+    &:hover {
+      color: $primary;
+      border: none;
+    }
+  }
+
+  .nav-link.disabled {
+    box-shadow: inset 0 -1px 0 #ddd;
+  }
+
+  &.nav-justified {
+    .nav-link,
+    .nav-link:hover,
+    .nav-link:focus,
+    .nav-link.active,
+    .nav-link.active:hover,
+    .nav-link.active:focus {
+      border: none;
+    }
+  }
+
+  .dropdown-menu {
+    margin-top: 0;
+  }
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+}
+
+// Indicators
+
+.alert {
+  padding-right: 2.5rem;
+  border: none;
+
+  &,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $white;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  a:not(.btn),
+  .alert-link {
+    font-weight: 700;
+    color: $white;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.card {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
+
+  &.border-primary,
+  &.border-secondary,
+  &.border-success,
+  &.border-info,
+  &.border-warning,
+  &.border-danger,
+  &.border-light,
+  &.border-dark {
+    border-width: 1px;
+  }
+}
+
+.list-group {
+  &-item-action.active {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $white;
+    }
+  }
+}
+
+.modal-content {
+  border-radius: .2rem;
+  box-shadow: 0 6px 36px rgba(0, 0, 0, .3);
+}
+
+.modal,
+.toast,
+.offcanvas {
+  .btn-close {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+  }
+}
+
+.popover {
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+}
+
+.carousel {
+  &-caption {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: inherit;
+    }
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/materia/_variables.scss b/themes/Bootswatch5.2_Scss/materia/_variables.scss
new file mode 100644
index 0000000..c6be66d
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/materia/_variables.scss
@@ -0,0 +1,114 @@
+// Materia 5.2.2
+// Bootswatch
+
+$theme: "materia" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #bbb !default;
+$gray-600: #666 !default;
+$gray-700: #444 !default;
+$gray-800: #222 !default;
+$gray-900: #212121 !default;
+$black:    #000 !default;
+
+$blue:    #2196f3 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e51c23 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ff9800 !default;
+$green:   #4caf50 !default;
+$teal:    #20c997 !default;
+$cyan:    #9c27b0 !default;
+
+$primary:       $blue !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.15 !default;
+
+$enable-gradients: true !default;
+
+// Body
+
+$body-color:    $gray-700 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
+$font-size-base:            1rem !default;
+$font-weight-base:          400 !default;
+
+// Buttons
+
+$input-btn-padding-y:       .8rem !default;
+$input-btn-padding-x:       1rem !default;
+
+// Forms
+
+$input-padding-y:                1rem !default;
+$input-padding-x:                0 !default;
+$input-padding-y-sm:             0 !default;
+$input-padding-x-sm:             0 !default;
+$input-padding-y-lg:             ($font-size-base * 1.25) !default;
+$input-padding-x-lg:             0 !default;
+$input-bg:                       transparent !default;
+$input-disabled-bg:              transparent !default;
+$input-color:                    $gray-600 !default;
+$input-border-color:             transparent !default;
+$input-border-width:             0 !default;
+$input-border-radius:            0 !default;
+$input-border-radius-lg:         0 !default;
+$input-border-radius-sm:         0 !default;
+$input-placeholder-color:        rgba(0, 0, 0, .4) !default;
+$input-group-addon-bg:           transparent !default;
+
+// Navs
+
+$nav-link-disabled-color:       $gray-500 !default;
+$nav-tabs-border-color:         transparent !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                 rgba($white, .75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Cards
+
+$card-border-width:                 0 !default;
+$card-border-color:                 transparent !default;
+
+// Tooltips
+
+$tooltip-bg:                        $gray-700 !default;
+
+// Modals
+
+$modal-content-border-color:        transparent !default;
+
+// Progress bars
+
+$progress-height:               .375rem !default;
+$progress-border-radius:        0 !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .6 !default;
+$btn-close-hover-opacity:    1 !default;
diff --git a/themes/Bootswatch5.2_Scss/materia/index.html b/themes/Bootswatch5.2_Scss/materia/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/materia/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/materia/style.scss b/themes/Bootswatch5.2_Scss/materia/style.scss
new file mode 100644
index 0000000..b172f0d
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/materia/style.scss
@@ -0,0 +1,52 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins ========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin ripple($color){
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    @include gradient-radial($color 10%, transparent 10.01%);
+    background-size: 1000% 1000%;
+    background-position: 50%;
+    border: none;
+    opacity: 0;
+    pointer-events: none;
+    transition: background 0.5s, opacity 1s;
+  }
+
+  &:active:after {
+    background-size: 0 0;
+    opacity: .2;
+    transition: 0s;
+  }
+
+  &.disabled,
+  &[disabled] {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
diff --git a/themes/Bootswatch5.2_Scss/minty/_bootswatch.scss b/themes/Bootswatch5.2_Scss/minty/_bootswatch.scss
new file mode 100644
index 0000000..f11f558
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/minty/_bootswatch.scss
@@ -0,0 +1,148 @@
+// Minty 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.navbar {
+  font-family: $headings-font-family;
+}
+
+.bg-dark {
+  background-color: $secondary !important;
+}
+
+.border-dark {
+  border-color: $secondary !important;
+}
+
+// Buttons
+
+.btn {
+  font-family: $headings-font-family;
+
+  &,
+  &:hover {
+    color: $white;
+  }
+
+  &-light,
+  &-light:hover {
+    color: $gray-700;
+  }
+
+  &-link,
+  &-link:hover {
+    color: $primary;
+  }
+
+  &-link.disabled:hover {
+    color: $gray-600;
+  }
+
+  &-outline-primary {
+    color: $primary;
+  }
+
+  &-outline-secondary {
+    color: $secondary;
+  }
+
+  &-outline-success {
+    color: $success;
+  }
+
+  &-outline-info {
+    color: $info;
+  }
+
+  &-outline-warning {
+    color: $warning;
+  }
+
+  &-outline-danger {
+    color: $danger;
+  }
+
+  &-outline-dark {
+    color: $dark;
+  }
+
+  &-outline-light {
+    color: $light;
+  }
+}
+
+// Forms
+
+legend {
+  font-family: $headings-font-family;
+}
+
+// Navs
+
+.dropdown-menu {
+  font-family: $font-family-sans-serif;
+}
+
+.breadcrumb {
+  a {
+    color: $navbar-dark-color;
+  }
+
+  a:hover {
+    color: $white;
+    text-decoration: none;
+  }
+}
+
+// Indicators
+
+.alert {
+  a,
+  .alert-link {
+    color: $white;
+  }
+
+  &-light {
+
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  color: $white;
+
+  &.bg-light {
+    color: $gray-700;
+  }
+}
+
+// Containers
+
+.card,
+.list-group-item {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/minty/_variables.scss b/themes/Bootswatch5.2_Scss/minty/_variables.scss
new file mode 100644
index 0000000..136eefb
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/minty/_variables.scss
@@ -0,0 +1,106 @@
+// Minty 5.2.2
+// Bootswatch
+
+$theme: "minty" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f7f7f9 !default;
+$gray-300: #eceeef !default;
+$gray-400: #ced4da !default;
+$gray-500: #aaa !default;
+$gray-600: #888 !default;
+$gray-700: #5a5a5a !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #ff7851 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffce67 !default;
+$green:   #56cc9d !default;
+$teal:    #20c997 !default;
+$cyan:    #6cc3d5 !default;
+
+$primary:       #78c2ad !default;
+$secondary:     #f3969a !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   1.45 !default;
+
+// Body
+
+$body-color:                $gray-600 !default;
+
+// Components
+
+$border-radius:               .4rem !default;
+$border-radius-lg:            .6rem !default;
+$border-radius-sm:            .3rem !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$headings-font-family:        Montserrat, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$headings-color:              $gray-700 !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, .05) !default;
+
+$table-bg-scale:              0% !default;
+
+// Dropdowns
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $secondary !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white, .6) !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-color:                rgba($black, .3) !default;
+$navbar-light-hover-color:          $gray-700 !default;
+$navbar-light-active-color:         $gray-700 !default;
+$navbar-light-disabled-color:       rgba($black, .1) !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $primary !default;
+$pagination-border-color:           $primary !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $secondary !default;
+$pagination-hover-border-color:     $pagination-hover-bg !default;
+$pagination-active-bg:              $secondary !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+$pagination-disabled-color:         $white !default;
+$pagination-disabled-bg:            #cce8e0 !default;
+$pagination-disabled-border-color:  $pagination-disabled-bg !default;
+
+// Alerts
+
+$alert-color-scale:                 0% !default;
+$alert-bg-scale:                    0% !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $primary !default;
+$breadcrumb-divider-color:          $white !default;
+$breadcrumb-active-color:           $breadcrumb-divider-color !default;
+$breadcrumb-border-radius:          .25rem !default;
diff --git a/themes/Bootswatch5.2_Scss/minty/index.html b/themes/Bootswatch5.2_Scss/minty/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/minty/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/minty/style.scss b/themes/Bootswatch5.2_Scss/minty/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/minty/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/pulse/_bootswatch.scss b/themes/Bootswatch5.2_Scss/pulse/_bootswatch.scss
new file mode 100644
index 0000000..52b7cc0
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/pulse/_bootswatch.scss
@@ -0,0 +1,149 @@
+// Pulse 5.2.2
+// Bootswatch
+
+
+// Variables
+
+:root {
+  color-scheme: light;
+}
+
+// Buttons
+
+.btn {
+  &:focus,
+  &:active,
+  &:active:focus,
+  &.active:focus {
+    outline: none;
+  }
+
+  &-secondary {
+    color: $gray-900;
+    background-color: $white;
+    border-color: #ccc;
+
+    &:hover {
+      color: $gray-900;
+      background-color: $gray-300;
+      border-color: $gray-500;
+    }
+
+    &.disabled {
+      color: tint-color($gray-900, 5%);
+      background-color: $white;
+      border-color: tint-color(#ccc, 5%);
+    }
+  }
+
+  &-warning {
+    color: $white;
+  }
+
+  &-primary:focus {
+    box-shadow: 0 0 5px tint-color($primary, 10%);
+  }
+
+  &-secondary:focus {
+    box-shadow: 0 0 5px $gray-400;
+  }
+
+  &-success:focus {
+    box-shadow: 0 0 5px tint-color($success, 10%);
+  }
+
+  &-info:focus {
+    box-shadow: 0 0 5px tint-color($info, 10%);
+  }
+
+  &-warning:focus {
+    box-shadow: 0 0 5px tint-color($warning, 10%);
+  }
+
+  &-danger:focus {
+    box-shadow: 0 0 5px tint-color($danger, 10%);
+  }
+
+  &.disabled:focus {
+    box-shadow: none;
+  }
+}
+
+// Tables
+
+.table .thead-dark th {
+  background-color: $secondary;
+  border-color: $table-border-color;
+}
+
+// Forms
+
+.form-control:focus {
+  box-shadow: 0 0 5px rgba(100, 65, 164, .4);
+}
+
+// Navs
+
+.nav-tabs {
+  .nav-link,
+  .nav-link.active, {
+    border-width: 0 0 1px;
+  }
+
+  .nav-link:hover,
+  .nav-link.active,
+  .nav-link.active:hover,
+  .nav-link.active:focus {
+    border-bottom: 1px solid $primary;
+  }
+
+  .nav-item + .nav-item {
+    margin-left: 0;
+  }
+}
+
+.breadcrumb {
+  &-item.active {
+    color: $gray-700;
+  }
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Progress bars
+
+.progress {
+  height: 8px;
+}
+
+// Containers
+
+.list-group {
+  &-item {
+    color: rgba(255, 255, 255, .8);
+
+    &.active,
+    &:hover,
+    &:focus {
+      color: $white;
+    }
+
+    &.active {
+      font-weight: 700;
+
+      &:hover {
+        background-color: $list-group-hover-bg;
+      }
+    }
+
+    &.disabled:hover {
+      color: $list-group-disabled-color;
+    }
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/pulse/_variables.scss b/themes/Bootswatch5.2_Scss/pulse/_variables.scss
new file mode 100644
index 0000000..7b34263
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/pulse/_variables.scss
@@ -0,0 +1,96 @@
+// Pulse 5.2.2
+// Bootswatch
+
+$theme: "pulse" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #fafafa !default;
+$gray-200: #f9f8fc !default;
+$gray-300: #ededed !default;
+$gray-400: #cbc8d0 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #444 !default;
+$gray-800: #343a40 !default;
+$gray-900: #17141f !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #593196 !default;
+$pink:    #e83e8c !default;
+$red:     #fc3939 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #efa31d !default;
+$green:   #13b955 !default;
+$teal:    #20c997 !default;
+$cyan:    #009cdc !default;
+
+$primary:       $purple !default;
+$secondary:     #a991d4 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   2.1 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+// Links
+
+$link-hover-color:          $primary !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, .05) !default;
+
+// Forms
+
+$input-focus-border-color:              $primary !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $primary !default;
+
+// Navbar
+
+$navbar-padding-y:                  1.2rem !default;
+$navbar-dark-hover-color:           rgba($white, .9) !default;
+$navbar-dark-active-color:          rgba($white, .9) !default;
+$navbar-light-color:                rgba($black, .4) !default;
+$navbar-light-active-color:         rgba($black, .7) !default;
+$navbar-light-disabled-color:       rgba($black, .2) !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-bar-bg:                   $primary !default;
+
+// List group
+
+$list-group-bg:                     $gray-900 !default;
+$list-group-border-color:           transparent !default;
+$list-group-hover-bg:               lighten($list-group-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-bg !default;
+$list-group-disabled-color:         lighten($list-group-bg, 30%) !default;
diff --git a/themes/Bootswatch5.2_Scss/pulse/index.html b/themes/Bootswatch5.2_Scss/pulse/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/pulse/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/pulse/style.scss b/themes/Bootswatch5.2_Scss/pulse/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/pulse/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/quartz/_bootswatch.scss b/themes/Bootswatch5.2_Scss/quartz/_bootswatch.scss
new file mode 100644
index 0000000..61d6f48
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/quartz/_bootswatch.scss
@@ -0,0 +1,291 @@
+// Quartz 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$body-bg-image: linear-gradient(90deg, shade-color($cyan, 10%), shade-color($purple, 10%), shade-color($pink, 5%)) !default;
+$frosted-opacity: .3 !default;
+
+:root {
+  color-scheme: dark;
+}
+
+// Mixins
+
+@mixin glass($opacity: $frosted-opacity, $bg: $white) {
+  border: none;
+  box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1), $box-shadow;
+  @include frost($opacity, $bg);
+
+  a {
+    color: $card-color;
+  }
+
+  .text-muted {
+    color: rgba($card-color, .7) !important;
+  }
+}
+
+@mixin frost($opacity: $frosted-opacity, $bg: $white) {
+  background-color: transparent;
+  background-image: linear-gradient(125deg, rgba($bg, ($opacity)), rgba($bg, ($opacity - .1)) 70%);
+  backdrop-filter: blur(5px);
+}
+
+// Body
+
+body {
+  background-image: $body-bg-image;
+}
+
+// Tables
+
+.table-secondary {
+  --bs-table-hover-color: $white;
+}
+
+// Buttons
+
+.btn {
+  &-secondary {
+    color: $white;
+    border: none;
+
+    &:hover,
+    &:focus {
+      color: $white;
+    }
+
+    &.disabled {
+      color: $white;
+    }
+  }
+}
+
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) {
+  margin-left: 0;
+}
+
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) {
+  margin-top: 0;
+}
+
+.bg-light .btn {
+  background-color: rgba($black, .2);
+}
+
+// Forms
+
+.input-group-text,
+.form-control::file-selector-button {
+  background-color: transparent;
+  background-image: linear-gradient(125deg, rgba($white, .3), rgba($white, .2) 70%);
+  border: none;
+  backdrop-filter: blur(5px);
+}
+
+.input-group-text {
+  box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1);
+}
+
+.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: 0;
+  border-left: none;
+}
+
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
+  border-right: none;
+}
+
+.form-select:not([multiple]) {
+  transition: border-color .15s ease-in-out;
+
+  option {
+    color: $black;
+  }
+}
+
+.bg-light .form-control {
+  color: $gray-800;
+  border-color: rgba($black, .2);
+
+  &::placeholder {
+    color: rgba($black, .2);
+  }
+}
+
+// Navs
+
+.dropdown-menu {
+  @include glass(.3);
+}
+
+.nav-tabs {
+  .nav-link {
+    transition: none;
+
+    &:hover,
+    &:focus {
+      color: $white;
+      isolation: auto;
+    }
+
+    &,
+    &.disabled {
+      background-color: $progress-bg;
+    }
+  }
+
+  .nav-item:first-child > .nav-link {
+    border-radius: $border-radius 0 0 $border-radius;
+  }
+
+  .nav-item:last-child > .nav-link {
+    border-radius: 0 $border-radius $border-radius 0;
+  }
+
+  .nav-item .nav-link.active,
+  .nav-item.show .nav-link {
+    @include glass(1, $white);
+    border-radius: $border-radius;
+    transform: scale(1.1);
+
+    &:hover,
+    &:focus {
+      color: $gray-800;
+    }
+  }
+
+  .dropdown-menu {
+    border-radius: $border-radius;
+  }
+}
+
+.nav-pills {
+  .nav-link {
+    transition: none;
+
+    &:hover,
+    &:focus {
+      color: $white;
+      isolation: auto;
+    }
+  }
+}
+
+// Indicators
+
+.alert {
+  @include glass();
+  position: relative;
+  overflow: hidden;
+  color: $white;
+
+  @each $color, $value in $theme-colors {
+    $opacity: .7;
+    &-#{$color}::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: .5rem;
+      height: 100%;
+      content: "";
+      background-color: $value;
+    }
+  }
+
+  .alert-link {
+    color: $card-color;
+  }
+}
+
+.badge {
+  &.bg-secondary {
+    --bs-bg-opacity: .4;
+  }
+
+  &.bg-light {
+    color: $gray-800;
+  }
+}
+
+// Containers
+
+.list-group {
+  @include glass();
+}
+
+.card {
+  @include glass();
+
+  @each $color, $value in $theme-colors {
+    @if ($color == secondary) {
+      --bs-secondary-rgb: transparent;
+    } @else {
+      &.bg-#{$color} {
+        background-image: none;
+      }
+    }
+  }
+
+  &.bg-light {
+    .card-header,
+    .card-body {
+      color: $gray-800;
+    }
+  }
+
+  &.border {
+    @each $color, $value in $theme-colors {
+      &-#{$color} {
+        @include glass();
+
+        .card-header {
+          background-color: $value !important;
+          border-bottom: none;
+
+          @if ($color == light) {
+            color: $gray-800;
+          }
+        }
+      }
+    }
+  }
+
+  &-header {
+    font-weight: $headings-font-weight;
+  }
+}
+
+.accordion-item {
+  @include glass();
+  box-shadow: none;
+}
+
+.toast {
+  @include glass();
+}
+
+.popover {
+  @include glass();
+
+  &-header {
+    border-bottom-color: $border-color;
+  }
+}
+
+.tooltip {
+  backdrop-filter: blur(5px);
+}
+
+.modal-content {
+  @include glass();
+}
+
+.offcanvas {
+  @include glass();
+}
diff --git a/themes/Bootswatch5.2_Scss/quartz/_variables.scss b/themes/Bootswatch5.2_Scss/quartz/_variables.scss
new file mode 100644
index 0000000..3ce430c
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/quartz/_variables.scss
@@ -0,0 +1,229 @@
+// Quartz 5.2.2
+// Bootswatch
+
+$theme: "quartz" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9e9e8 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #3a8fd9 !default;
+$indigo:  #6610f2 !default;
+$purple:  #686dc3 !default;
+$pink:    #e83283 !default;
+$red:     #fc346f !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #41d7a7 !default;
+$teal:    #528fb3 !default;
+$cyan:    #39cbfb !default;
+
+$primary:       $pink !default;
+$secondary:     rgba($white, .4) !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $orange !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   1.5 !default;
+
+// Spacing
+
+$spacer: 2rem !default;
+
+// Body
+
+$body-bg:                   $purple !default;
+$body-color:                $white !default;
+
+// Links
+
+$link-color:                              $white !default;
+
+// Components
+
+$border-color:                rgba($white, .2) !default;
+
+$border-radius:               .5rem !default;
+$border-radius-sm:            .6rem !default;
+$border-radius-lg:            .7rem !default;
+$border-radius-pill:          50rem !default;
+
+$box-shadow:                  1px 3px 24px -1px rgba($black, .15) !default;
+$box-shadow-sm:               0 1px 1px rgba($black, .1) !default;
+
+// Fonts
+
+$headings-font-weight:        700 !default;
+
+$text-muted:                  rgba($white, .7) !default;
+
+$blockquote-footer-color:     $text-muted !default;
+
+// Tables
+
+$table-dark-bg:               $dark !default;
+$table-dark-border-color:     darken($dark, 5%) !default;
+
+$table-bg-scale:              0% !default;
+
+// Buttons + Forms
+
+$input-btn-padding-y:         .75rem !default;
+$input-btn-padding-x:         1.5rem !default;
+
+// Buttons
+
+$btn-box-shadow:              $box-shadow !default;
+
+// Forms
+
+$input-bg:                              transparent !default;
+$input-disabled-bg:                     rgba($white, .1) !default;
+
+$input-border-color:                    rgba($white, .4) !default;
+$input-border-width:                    1px !default;
+
+$input-focus-border-color:              $input-border-color !default;
+$input-focus-box-shadow:                none !default;
+
+$input-placeholder-color:               $text-muted !default;
+
+$form-switch-color:               $white !default;
+
+$form-switch-focus-color:         $form-switch-color !default;
+
+$input-group-addon-bg:                  transparent !default;
+
+$form-check-input-bg:                     rgba($white, .3) !default;
+$form-check-input-border:                 1px solid $border-color !default;
+
+$form-select-indicator-color:       $white !default;
+$form-select-focus-box-shadow:    none !default;
+
+$form-range-track-bg:             rgba($black, .2) !default;
+
+$form-range-thumb-disabled-bg:             $gray-500 !default;
+
+// Navs
+
+$nav-link-disabled-color:           $text-muted !default;
+
+$nav-tabs-border-width:             0 !default;
+$nav-tabs-border-radius:            0 !default;
+$nav-tabs-link-active-color:        $gray-800 !default;
+$nav-tabs-link-active-bg:           $white !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:           $border-radius-pill !default;
+$nav-pills-link-active-color:       $white !default;
+$nav-pills-link-active-bg:          $primary !default;
+
+// Navbars
+
+$navbar-dark-color:                 rgba($white, .8) !default;
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-color:                rgba($gray-800, .8) !default;
+$navbar-light-hover-color:          $gray-800 !default;
+$navbar-light-active-color:         $gray-800 !default;
+$navbar-light-disabled-color:       rgba($gray-800, .3) !default;
+
+// Dropdowns
+
+$dropdown-border-color:             $border-color !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            rgba($white, .4) !default;
+
+// Pagination
+
+$pagination-bg:                     rgba($white, .3) !default;
+$pagination-border-width:           0 !default;
+
+$pagination-focus-color:            $white !default;
+$pagination-focus-bg:               $dropdown-link-hover-bg !default;
+$pagination-focus-box-shadow:       none !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $dropdown-link-hover-bg !default;
+
+$pagination-disabled-color:         $text-muted !default;
+$pagination-disabled-bg:            $pagination-bg !default;
+
+// Cards
+
+$card-spacer-y:                     1.75rem !default;
+$card-spacer-x:                     2rem !default;
+$card-border-color:                 $border-color !default;
+$card-cap-bg:                       transparent !default;
+$card-cap-color:                    $white !default;
+$card-color:                        $white !default;
+$card-bg:                           transparent !default;
+
+// Accordion
+
+$accordion-button-bg:                     $secondary !default;
+$accordion-button-active-bg:              $primary !default;
+$accordion-button-active-color:           $white !default;
+
+// Tooltips
+
+$tooltip-opacity:                   .7 !default;
+
+// Popovers
+
+$popover-header-bg:                 $card-cap-bg !default;
+
+$popover-body-color:                $card-color !default;
+$popover-body-padding-y:            $spacer * .5 !default;
+
+$popover-arrow-color:               $border-color !default;
+
+$popover-arrow-outer-color:         transparent !default;
+
+// Toasts
+
+$toast-header-color:                $card-color !default;
+$toast-header-background-color:     $card-cap-bg !default;
+$toast-header-border-color:         $border-color !default;
+
+// Progress bars
+
+$progress-bg:                       rgba($black, .2) !default;
+
+// List group
+
+$list-group-color:                  $white !default;
+$list-group-bg:                     transparent !default;
+$list-group-border-color:           $border-color !default;
+$list-group-border-width:           0 !default;
+
+$list-group-hover-bg:               $dropdown-link-hover-bg !default;
+
+$list-group-disabled-color:         $text-muted !default;
+
+$list-group-action-color:           $white !default;
+$list-group-action-hover-color:     $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-divider-color:          $white !default;
+$breadcrumb-active-color:           $white !default;
+
+// Close
+
+$btn-close-color:            $white !default;
diff --git a/themes/Bootswatch5.2_Scss/quartz/index.html b/themes/Bootswatch5.2_Scss/quartz/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/quartz/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/quartz/style.scss b/themes/Bootswatch5.2_Scss/quartz/style.scss
new file mode 100644
index 0000000..9bec9a6
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/quartz/style.scss
@@ -0,0 +1,25 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
+// Sandstone (required for @extend) =============================================
+.sandstone {
+  font-size: $navbar-font-size;
+  line-height: 22px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
diff --git a/themes/Bootswatch5.2_Scss/sandstone/_bootswatch.scss b/themes/Bootswatch5.2_Scss/sandstone/_bootswatch.scss
new file mode 100644
index 0000000..45a997a
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sandstone/_bootswatch.scss
@@ -0,0 +1,236 @@
+// Sandstone 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.sandstone {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+  text-transform: uppercase;
+}
+
+.navbar {
+  .nav-link {
+    @extend .sandstone;
+  }
+
+  &-form input,
+  &-form .form-control {
+    border: none;
+  }
+}
+
+// Buttons
+
+.btn {
+  @extend .sandstone;
+
+  &:hover {
+    border-color: transparent;
+  }
+
+  &-success,
+  &-warning {
+    color: $white;
+  }
+}
+
+// Tables
+
+.table {
+  .thead-dark th {
+    background-color: $dark;
+  }
+}
+
+// Forms
+
+input,
+.form-control {
+  @include box-shadow(none);
+
+  &:focus {
+    @include box-shadow(none);
+  }
+}
+
+// Navs
+
+.nav-tabs {
+  .nav-link {
+    @extend .sandstone;
+    background-color: $gray-200;
+    border-color: $gray-300;
+  }
+
+  .nav-link,
+  .nav-link:hover,
+  .nav-link:focus {
+    color: $gray-600;
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover,
+  .nav-link.disabled:focus {
+    color: $nav-link-disabled-color;
+    background-color: $gray-200;
+    border-color: $gray-300;
+  }
+}
+
+.nav-pills {
+  .nav-link {
+    @extend .sandstone;
+    color: $gray-600;
+    border: 1px solid transparent;
+  }
+
+  .nav-link.active,
+  .nav-link:hover,
+  .nav-link:focus {
+    background-color: $gray-200;
+    border-color: $gray-300;
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover {
+    color: $gray-300;
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+
+.breadcrumb {
+  @extend .sandstone;
+  border: 1px solid $gray-300;
+}
+
+.pagination {
+  @extend .sandstone;
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.dropdown-menu {
+  .dropdown-item {
+    @extend .sandstone;
+  }
+}
+
+// Indicators
+
+.alert {
+  color: $white;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  &-primary {
+    &,
+    > th,
+    > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &,
+    > th,
+    > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-success {
+    &,
+    > th,
+    > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &,
+    > th,
+    > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &,
+    > th,
+    > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &,
+    > th,
+    > td {
+      background-color: $warning;
+    }
+  }
+
+  &-dark {
+    &,
+    > th,
+    > td {
+      background-color: $dark;
+    }
+  }
+
+  &-light {
+    &,
+    > th,
+    > td {
+      background-color: $light;
+    }
+
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+.tooltip {
+  @extend .sandstone;
+}
+
+// Containers
+
+.modal,
+.toast,
+.offcanvas {
+  .btn-close {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$gray-300}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/sandstone/_variables.scss b/themes/Bootswatch5.2_Scss/sandstone/_variables.scss
new file mode 100644
index 0000000..4d70310
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sandstone/_variables.scss
@@ -0,0 +1,139 @@
+// Sandstone 5.2.2
+// Bootswatch
+
+$theme: "sandstone" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f8f5f0 !default;
+$gray-300: #dfd7ca !default;
+$gray-400: #ced4da !default;
+$gray-500: #98978b !default;
+$gray-600: #8e8c84 !default;
+$gray-700: #495057 !default;
+$gray-800: #3e3f3a !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #325d88 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #f47c3c !default;
+$yellow:  #ffc107 !default;
+$green:   #93c54b !default;
+$teal:    #20c997 !default;
+$cyan:    #29abe0 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $orange !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-font-weight:        400 !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-600 !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            $gray-200 !default;
+$dropdown-link-active-color:        $dropdown-link-color !default;
+$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;
+
+// Navs
+
+$nav-link-padding-x:                .9rem !default;
+$nav-link-disabled-color:           $gray-300 !default;
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $gray-300 !default;
+$nav-tabs-link-active-bg:           $white !default;
+$nav-pills-link-active-color:       $gray-600 !default;
+$nav-pills-link-active-bg:          $gray-200 !default;
+
+// Navbar
+
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-hover-color:          $black !default;
+$navbar-light-active-color:         $black !default;
+
+// Pagination
+
+$pagination-color:                  $gray-600 !default;
+$pagination-bg:                     $gray-200 !default;
+$pagination-border-color:           $gray-300 !default;
+$pagination-hover-color:            $pagination-color !default;
+$pagination-active-color:           $pagination-color !default;
+$pagination-active-bg:              $gray-300 !default;
+$pagination-active-border-color:    $gray-300 !default;
+$pagination-disabled-color:         $gray-300 !default;
+$pagination-disabled-bg:            $gray-200 !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Cards
+
+$card-border-color:                 rgba($gray-300, .75) !default;
+$card-cap-bg:                       rgba($gray-200, .25) !default;
+
+// Popovers
+
+$popover-header-bg:                 $gray-200 !default;
+
+// Modals
+
+$modal-content-border-color:        $gray-300 !default;
+$modal-header-border-color:         $modal-content-border-color !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-border-radius:            10px !default;
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-border-color:           $gray-300 !default;
+$list-group-hover-bg:               $gray-200 !default;
+$list-group-active-color:           $body-color !default;
+$list-group-active-bg:              $gray-200 !default;
+$list-group-active-border-color:    $gray-300 !default;
+$list-group-disabled-color:         $gray-500 !default;
+$list-group-disabled-bg:            $white !default;
+$list-group-action-color:           $list-group-active-color !default;
+$list-group-action-active-color:    $list-group-active-color !default;
+$list-group-action-active-bg:       $gray-300 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $pagination-bg !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .8 !default;
+$btn-close-hover-opacity:    1 !default;
diff --git a/themes/Bootswatch5.2_Scss/sandstone/index.html b/themes/Bootswatch5.2_Scss/sandstone/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sandstone/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/sandstone/style.scss b/themes/Bootswatch5.2_Scss/sandstone/style.scss
new file mode 100644
index 0000000..9bec9a6
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sandstone/style.scss
@@ -0,0 +1,25 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
+// Sandstone (required for @extend) =============================================
+.sandstone {
+  font-size: $navbar-font-size;
+  line-height: 22px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
diff --git a/themes/Bootswatch5.2_Scss/screenshot.png b/themes/Bootswatch5.2_Scss/screenshot.png
new file mode 100644
index 0000000..735b70d
Binary files /dev/null and b/themes/Bootswatch5.2_Scss/screenshot.png differ
diff --git a/themes/Bootswatch5.2_Scss/simplex/_bootswatch.scss b/themes/Bootswatch5.2_Scss/simplex/_bootswatch.scss
new file mode 100644
index 0000000..0784872
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/simplex/_bootswatch.scss
@@ -0,0 +1,143 @@
+// Simplex 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Mixins
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(tint-color($color, 6%), $color, 6%, shade-color($color, 6%));
+  filter: none;
+  border: 1px solid shade-color($color, 13%);
+}
+
+// Navbar
+
+.navbar {
+  border-style: solid;
+  border-width: 1px;
+
+  &-fixed-top {
+    border-width: 0 0 1px;
+  }
+
+  &-fixed-bottom {
+    border-style: solid;
+    border-top-width: 1px 0 0 0;
+  }
+
+  &.bg-primary {
+    background-color: $primary !important;
+    border-color: shade-color($primary, 13%) !important;
+  }
+
+  &.bg-dark {
+    border-color: shade-color($dark, 13%) !important;
+  }
+
+  &.bg-light {
+    border-color: shade-color($white, 13%);
+  }
+}
+
+// Buttons
+
+.btn-primary,
+.btn-primary:hover {
+  @include btn-shadow($primary);
+}
+
+.btn-secondary,
+.btn-secondary:hover {
+  @include btn-shadow($secondary);
+}
+
+.btn-secondary:focus,
+.btn-secondary:not([disabled]):not(.disabled):active,
+.btn-secondary:not([disabled]):not(.disabled).active {
+  box-shadow: 0 0 0 .2rem rgba($gray-200, .5);
+}
+
+.btn-success,
+.btn-success:hover {
+  @include btn-shadow($success);
+}
+
+.btn-info,
+.btn-info:hover {
+  @include btn-shadow($info);
+}
+
+.btn-warning,
+.btn-warning:hover {
+  @include btn-shadow($warning);
+}
+
+.btn-danger,
+.btn-danger:hover {
+  @include btn-shadow($danger);
+}
+
+.btn-dark,
+.btn-dark:hover {
+  @include btn-shadow($dark);
+}
+
+.btn-light,
+.btn-light:hover {
+  @include btn-shadow($light);
+}
+
+.btn-outline-secondary {
+  color: $gray-400;
+  border-color: $gray-400;
+
+  &:hover {
+    color: $white;
+    background-color: $gray-400;
+  }
+}
+
+// Typography
+
+.text-secondary {
+  color: $gray-600 !important;
+}
+
+// Forms
+
+legend,
+label {
+  color: $headings-color;
+}
+
+// Navs
+
+.breadcrumb {
+  border: 1px solid shade-color($white, 13%);
+}
+
+.pagination {
+  .page-link:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/simplex/_variables.scss b/themes/Bootswatch5.2_Scss/simplex/_variables.scss
new file mode 100644
index 0000000..b047cef
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/simplex/_variables.scss
@@ -0,0 +1,104 @@
+// Simplex 5.2.2
+// Bootswatch
+
+$theme: "simplex" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ddd !default;
+$gray-300: #ccc !default;
+$gray-400: #bbb !default;
+$gray-500: #adb5bd !default;
+$gray-600: #777 !default;
+$gray-700: #444 !default;
+$gray-800: #373a3c !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #9b479f !default;
+$pink:    #e83e8c !default;
+$red:     #d9230f !default;
+$orange:  #d9831f !default;
+$yellow:  #ffc107 !default;
+$green:   #469408 !default;
+$teal:    #20c997 !default;
+$cyan:    #029acf !default;
+
+$primary:       $red !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $orange !default;
+$danger:        $purple !default;
+$light:         $white !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.8 !default;
+
+// Body
+
+$body-bg:                   #fcfcfc !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Dropdowns
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                .9rem !default;
+$nav-link-disabled-color:           $gray-400 !default;
+$nav-tabs-border-color:             darken(#fff, 6.5%) !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white, .75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-border-color:           $nav-tabs-border-color !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $primary !default;
+$pagination-hover-border-color:     $primary !default;
+$pagination-disabled-color:         $gray-400 !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Cards
+
+$card-border-color:                 $nav-tabs-border-color !default;
+
+// Popovers
+
+$popover-border-color:              $nav-tabs-border-color !default;
+
+// Modals
+
+$modal-content-border-color:        $nav-tabs-border-color !default;
+$modal-header-border-color:         $nav-tabs-border-color !default;
+
+// Progress bars
+
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-border-color:           $nav-tabs-border-color !default;
+$list-group-disabled-bg:            $nav-tabs-border-color !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-border-radius:          .25rem !default;
diff --git a/themes/Bootswatch5.2_Scss/simplex/index.html b/themes/Bootswatch5.2_Scss/simplex/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/simplex/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/simplex/style.scss b/themes/Bootswatch5.2_Scss/simplex/style.scss
new file mode 100644
index 0000000..d3f0fa5
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/simplex/style.scss
@@ -0,0 +1,22 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 3%), $color, 6%, darken($color, 3%));
+  filter: none;
+  border: 1px solid darken($color, 6.5%);
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
diff --git a/themes/Bootswatch5.2_Scss/sketchy/_bootswatch.scss b/themes/Bootswatch5.2_Scss/sketchy/_bootswatch.scss
new file mode 100644
index 0000000..fc6977a
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sketchy/_bootswatch.scss
@@ -0,0 +1,482 @@
+// Sketchy 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+// stylelint-disable scss/dollar-variable-default
+$border-radius-sketchy:    255px 25px 225px 25px / 25px 225px 25px 255px;
+$border-radius-lg-sketchy: 55px 225px 15px 25px / 25px 25px 35px 355px;
+$border-radius-sm-sketchy: 255px 25px 225px 25px / 25px 225px 25px 255px;
+// style-enable scss/dollar-variable-default
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.navbar {
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 25px 25px 55px 5px/5px 55px 25px 25px;
+
+  &.bg-light {
+    border-color: $gray-800;
+  }
+
+  &.fixed-top {
+    border-width: 0 0 2px;
+    border-radius: 0 25px 225px 0/25px 0 25px 255px;
+  }
+
+  &.fixed-bottom {
+    border-width: 2px 0 0;
+    border-radius: 255px 25px 0 25px/25px 225px 25px 0;
+  }
+
+  &-brand {
+    font-family: $headings-font-family;
+    font-weight: 400;
+    text-decoration: none;
+  }
+}
+
+// Buttons
+
+.btn {
+  text-decoration: none;
+  border-radius: $border-radius-sketchy;
+
+  &-lg {
+    border-radius: $border-radius-lg-sketchy;
+  }
+
+  &-sm {
+    border-radius: $border-radius-sm-sketchy;
+  }
+}
+
+.btn-check {
+  display: inline-block;
+  opacity: 0;
+}
+
+// Typography
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: $font-family-sans-serif;
+}
+
+b,
+strong {
+  font-family: $headings-font-family;
+}
+
+blockquote {
+  border-radius: 15px 27px 25px 25px/25px 25px 305px 635px;
+}
+
+// Tables
+
+table {
+  th,
+  td {
+    background-color: $white;
+  }
+}
+
+.table-bordered {
+  overflow: hidden;
+  border-spacing: 0;
+  border-collapse: separate;
+  background-color: $gray-800;
+  border-radius: 5px 25px 5px 25px/25px 5px 25px 5px;
+
+  th,
+  td {
+    border-radius: 5px 5px 25px 4px/5px 4px 3px 5px;
+  }
+
+  .table-success,
+  .table-success:hover {
+    td,
+    th {
+      color: $white;
+      background-color: $success;
+    }
+  }
+
+  .table-info,
+  .table-info:hover {
+    td,
+    th {
+      color: $white;
+      background-color: $info;
+    }
+  }
+
+  .table-warning,
+  .table-warning:hover {
+    td,
+    th {
+      color: $white;
+      background-color: $warning;
+    }
+  }
+
+  .table-danger,
+  .table-danger:hover {
+    td,
+    th {
+      color: $white;
+      background-color: $danger;
+    }
+  }
+}
+
+.table-dark {
+  th,
+  td,
+  &.table-hover .table-active:hover > th,
+  &.table-hover .table-active:hover > td {
+    background-color: $gray-800;
+  }
+}
+
+
+// Forms
+
+input,
+.form-control,
+.input-group-text {
+  border-radius: $border-radius-sketchy;
+}
+
+textarea,
+textarea.form-control,
+select,
+select.form-control {
+  border-radius: $border-radius-lg-sketchy !important;
+}
+
+[type="checkbox"] {
+  position: relative;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  border: none;
+  appearance: none;
+
+  &::before {
+    position: absolute;
+    top: -.1em;
+    left: 0;
+    display: inline-block;
+    width: 15px;
+    height: 16px;
+    content: "";
+    border: 2px solid $gray-800;
+    border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px;
+  }
+
+  &:focus::before {
+    box-shadow: 0 0 0 .25rem rgba(51, 51, 51, .25);
+  }
+
+  &:checked::after {
+    position: absolute;
+    top: 0;
+    left: .1em;
+    font-size: 1.5rem;
+    line-height: .5;
+    color: $gray-800;
+    content: "x";
+  }
+
+  &:disabled {
+    &::before {
+      border: 2px solid $gray-500;
+    }
+  }
+}
+
+[type="radio"] {
+  position: relative;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  border: none;
+  appearance: none;
+
+  &::before {
+    position: absolute;
+    top: -.1em;
+    left: 0;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    content: "";
+    border: 2px solid $gray-800;
+    border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
+  }
+
+  &:focus::before {
+    box-shadow: 0 0 0 .25rem rgba(51, 51, 51, .25);
+  }
+
+  &:checked::before {
+    background-color: $gray-800;
+  }
+
+  &:disabled {
+    &::before {
+      border: 2px solid $gray-500;
+    }
+  }
+}
+
+.form-check-input {
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.form-switch {
+  padding-left: 0;
+
+  .form-check-input {
+    position: relative;
+    margin-left: 0;
+
+    &::before {
+      width: 32px;
+      border-radius: 30% 35% 30% 30% / 30% 50% 30% 45%;
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      content: "";
+      background-color: $white;
+      border: 2px solid #333;
+      border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
+      transition: left .15s ease-in-out;
+    }
+
+    &:checked::after {
+      top: 0;
+      left: 18px;
+      background-color: $gray-800;
+    }
+  }
+
+  .form-check-label {
+    margin-left: .5em;
+  }
+}
+
+// Navs
+
+.dropdown-menu {
+  overflow: hidden;
+  border-radius: 555px 25px 25px 25px/25px 25px 25px 555px;
+}
+
+.dropdown-divider {
+  border-top-width: 2px;
+}
+
+.list-group {
+  overflow: hidden;
+  background-color: $gray-800;
+  border: 2px solid $gray-800;
+  border-radius: 45px 15px 35px 5px/15px 5px 15px 65px;
+
+  &-item {
+    border-top: 2px solid $gray-800;
+    border-right: none;
+    border-left: none;
+    border-radius: 255px 5px 225px 5px/25px 225px 25px 255px;
+
+    &:first-child {
+      border-top: none;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.nav-pills .nav-link {
+  border-radius: $border-radius-sketchy;
+}
+
+.nav-link,
+.page-link,
+.list-group-item,
+.dropdown-item {
+  text-decoration: none;
+}
+
+.nav-tabs {
+  .nav-link {
+    border-radius: 45px 15px 225px 5px/25px 225px 25px 255px;
+  }
+}
+
+.breadcrumb {
+  border: 2px solid $gray-800;
+  border-radius: $border-radius-sketchy;
+}
+
+.pagination {
+  .page-link {
+    border-radius: 425px 255px 25px 25px/25px 25px 5px 25px;
+  }
+}
+
+// Indicators
+
+.badge {
+  border-radius: $border-radius-sm-sketchy;
+
+  &-pill {
+    border-radius: 7rem 8rem 8rem 8rem / 4rem 5rem 6rem 6rem;
+  }
+
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+.alert {
+  border-radius: $border-radius-sketchy;
+
+  .btn-close {
+    &::before {
+      color: inherit;
+    }
+  }
+}
+
+// Progress bars
+
+.progress {
+  border: 2px solid $gray-800;
+  border-radius: $border-radius-sm-sketchy;
+}
+
+// Containers
+
+.card {
+  border-radius: 5px 5px 5px 5px/25px 25px 25px 5px;
+
+  &-outline {
+    &-primary,
+    &-success,
+    &-info,
+    &-warning,
+    &-danger {
+      border-width: 2px;
+    }
+  }
+
+  &-header {
+    border-color: inherit;
+    border-bottom-width: 2px;
+
+    &:first-child {
+      border-radius: 3px 3px 0 0/23px 23px 0 0;
+    }
+  }
+
+  &-footer {
+    border-top-width: 2px;
+  }
+}
+
+.toast {
+  border-radius: 10px 10px 15px 5px/5px 15px 5px 15px;
+
+  &-header {
+    font-family: $headings-font-family;
+  }
+}
+
+.modal {
+  &-content {
+    border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
+  }
+}
+
+.popover {
+  padding: 0;
+  border-radius: 45px 85px 15px 25px/15px 10px 35px 555px;
+
+  &-title {
+    border-bottom: 2px solid $gray-800;
+  }
+
+  &.bs-popover-start::before,
+  &.bs-tether-element-attached-right::before {
+    right: -13px;
+  }
+
+  &.bs-popover-top::before,
+  &.bs-tether-element-attached-bottom::before {
+    bottom: -13px;
+  }
+
+  &.bs-popover-bottom::before,
+  &.bs-tether-element-attached-top::before {
+    top: -13px;
+  }
+
+  &.bs-popover-end::before,
+  &.bs-tether-element-attached-left::before {
+    left: -13px;
+  }
+}
+
+.tooltip {
+  &-inner {
+    border-radius: $border-radius-sm-sketchy;
+  }
+}
+
+pre {
+  border: 2px solid $gray-800;
+  border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
+}
+
+.btn-close {
+  background-image: none;
+
+  &::before {
+    position: absolute;
+    top: .8rem;
+    right: 1rem;
+    content: "X";
+  }
+}
+
+.img {
+  &-thumbnail {
+    border-radius: $border-radius-sketchy;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/sketchy/_variables.scss b/themes/Bootswatch5.2_Scss/sketchy/_variables.scss
new file mode 100644
index 0000000..134dec6
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sketchy/_variables.scss
@@ -0,0 +1,160 @@
+// Sketchy 5.2.2
+// Bootswatch
+
+$theme: "sketchy" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f7f7f9 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ccc !default;
+$gray-500: #aaa !default;
+$gray-600: #868e96 !default;
+$gray-700: #555 !default;
+$gray-800: #333 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$primary:       $gray-800 !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $white !default;
+$dark:          $gray-700 !default;
+
+$min-contrast-ratio:   1.6 !default;
+
+// Links
+
+$link-decoration:           underline !default;
+
+// Components
+
+$border-width:              2px !default;
+$border-radius:             25px !default;
+$border-radius-lg:          35px !default;
+$border-radius-sm:          15px !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Neucha, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-weight-base:            700 !default;
+$headings-font-family:        "Cabin Sketch", cursive !default;
+
+$blockquote-small-color:      $gray-800 !default;
+
+// Tables
+
+$table-hover-bg:              $white !default;
+$table-border-width:          2px !default;
+$table-border-color:          $gray-800 !default;
+
+// Forms
+
+$input-border-color:                $gray-800 !default;
+$input-focus-border-color:          $input-border-color !default;
+
+// Dropdowns
+
+$dropdown-border-color:             $gray-800 !default;
+$dropdown-divider-bg:               $gray-800 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $gray-800 !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-800 !default;
+$nav-tabs-link-hover-border-color:  $gray-800 !default;
+$nav-tabs-link-active-color:        $gray-800 !default;
+$nav-tabs-link-active-border-color: $gray-800 !default;
+
+// Navbar
+
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-dark-toggler-border-color:  $white !default;
+$navbar-light-color:                $gray-800 !default;
+$navbar-light-hover-color:          $gray-800 !default;
+$navbar-light-active-color:         $gray-800 !default;
+$navbar-light-toggler-border-color: $gray-800 !default;
+
+// Pagination
+
+$pagination-border-color:           $gray-800 !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $gray-800 !default;
+$pagination-hover-border-color:     $gray-800 !default;
+$pagination-disabled-color:         $gray-400 !default;
+$pagination-disabled-border-color:  $gray-800 !default;
+
+// Cards
+
+$card-border-width:                 2px !default;
+$card-border-color:                 $gray-800 !default;
+
+// Popovers
+
+$popover-border-color:              $gray-800 !default;
+
+// Badges
+
+$badge-padding-y:                   .5em !default;
+$badge-padding-x:                   1.2em !default;
+
+// Toasts
+
+$toast-border-width:                2px !default;
+$toast-border-color:                $gray-800 !default;
+$toast-header-color:                $gray-800 !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-border-color:        $gray-800 !default;
+$modal-header-border-color:         $gray-800 !default;
+
+// Progress bars
+
+$progress-bg:                       $white !default;
+$progress-bar-bg:                   $gray-400 !default;
+
+// List group
+
+$list-group-border-color:           $gray-800 !default;
+$list-group-hover-bg:               $gray-300 !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $gray-800 !default;
+$list-group-action-color:           $gray-800 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-divider-color:          $gray-800 !default;
+$breadcrumb-active-color:           $gray-800 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            inherit !default;
+$btn-close-opacity:          1 !default;
+$btn-close-hover-opacity:    1 !default;
+$btn-close-focus-shadow:     none !default;
diff --git a/themes/Bootswatch5.2_Scss/sketchy/index.html b/themes/Bootswatch5.2_Scss/sketchy/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sketchy/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/sketchy/style.scss b/themes/Bootswatch5.2_Scss/sketchy/style.scss
new file mode 100644
index 0000000..c4388ca
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/sketchy/style.scss
@@ -0,0 +1,17 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/slate/_bootswatch.scss b/themes/Bootswatch5.2_Scss/slate/_bootswatch.scss
new file mode 100644
index 0000000..5cfd003
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/slate/_bootswatch.scss
@@ -0,0 +1,370 @@
+// Slate 5.2.2
+// Bootswatch
+
+
+// Variables
+
+:root {
+  color-scheme: dark;
+}
+
+// Mixins
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(tint-color($color, 12%), $color, 60%, shade-color($color, 8%));
+  filter: none;
+}
+
+@mixin btn-shadow-inverse($color){
+  @include gradient-y-three-colors(shade-color($color, 36%), shade-color($color, 30%), 40%, shade-color($color, 26%));
+  filter: none;
+}
+
+// Navbar
+
+.navbar {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  border: 1px solid rgba(0, 0, 0, .6);
+
+  .container {
+    padding: 0;
+  }
+
+  .navbar-toggler {
+    border-color: rgba(0, 0, 0, .6);
+  }
+
+  &-fixed-top {
+    border-width: 0 0 1px;
+  }
+
+  &-fixed-bottom {
+    border-width: 1px 0 0;
+  }
+
+  .nav-link {
+    padding: 1rem;
+    border-right: 1px solid rgba(0, 0, 0, .2);
+    border-left: 1px solid rgba(255, 255, 255, .1);
+
+    &:hover,
+    &:focus {
+      @include btn-shadow-inverse($gray-800);
+      border-left: 1px solid rgba(0, 0, 0, .2);
+    }
+  }
+
+  &-brand {
+    padding: .75rem 1rem subtract(24px, .75rem);
+    margin-right: 0;
+    border-right: 1px solid rgba(0, 0, 0, .2);
+  }
+
+  .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, .3);
+    border-left: 1px solid rgba(0, 0, 0, .2);
+  }
+
+  &-nav .nav-item + .nav-item {
+    margin-left: 0;
+  }
+
+  &.bg-light {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
+
+    .nav-link {
+      &:hover,
+      &:focus {
+        @include btn-shadow-inverse($gray-600);
+        border-left: 1px solid rgba(0, 0, 0, .2);
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .navbar-expand-sm {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-expand-md {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .navbar-expand-lg {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  border-color: rgba(0, 0, 0, .6);
+
+  &:not([disabled]):not(.disabled).active,
+  &.disabled {
+    border-color: rgba(0, 0, 0, .6);
+    box-shadow: none;
+  }
+
+  &:hover,
+  &:focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled):active:hover,
+  &:not([disabled]):not(.disabled).active:hover {
+    border-color: rgba(0, 0, 0, .6);
+  }
+}
+
+.btn-primary {
+  @include btn-shadow($primary);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active:hover,
+  &:not([disabled]):not(.disabled).active:hover {
+    @include btn-shadow-inverse($primary);
+  }
+}
+
+.btn-secondary {
+  @include btn-shadow($secondary);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($secondary);
+  }
+}
+
+.btn-success {
+  @include btn-shadow($success);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($success);
+  }
+}
+
+.btn-info {
+  @include btn-shadow($info);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($info);
+  }
+}
+
+.btn-warning {
+  @include btn-shadow($warning);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($warning);
+  }
+}
+
+.btn-danger {
+  @include btn-shadow($danger);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($danger);
+  }
+}
+
+.btn-outline {
+  &-primary {
+    color: $white;
+  }
+}
+
+.btn-link,
+.btn-link:hover {
+  border-color: transparent;
+}
+
+.btn-group,
+.btn-group-vertical {
+  .btn.active {
+    border-color: rgba(0, 0, 0, .6);
+  }
+}
+
+// Typography
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
+}
+
+// Forms
+
+legend {
+  color: $white;
+}
+
+.form-control {
+  color-scheme: light;
+}
+
+.input-group-addon {
+  @include btn-shadow($secondary);
+  color: $white;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+}
+
+// Navs
+
+.nav-tabs {
+  .nav-link {
+    @include btn-shadow-inverse($gray-800);
+    border: 1px solid rgba(0, 0, 0, .6);
+
+    &:not([disabled]):not(.disabled):hover,
+    &:not([disabled]):not(.disabled):focus,
+    &:not([disabled]):not(.disabled):active,
+    &:not([disabled]):not(.disabled).active {
+      @include btn-shadow($gray-800);
+    }
+
+    &.disabled {
+      border: 1px solid rgba(0, 0, 0, .6);
+    }
+  }
+
+  .nav-link,
+  .nav-link:hover {
+    color: $white;
+  }
+}
+
+.nav-pills {
+  .nav-link {
+    @include btn-shadow($gray-800);
+    color: $white;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+    border: 1px solid rgba(0, 0, 0, .6);
+
+    &:hover {
+      @include btn-shadow-inverse($gray-800);
+      border: 1px solid rgba(0, 0, 0, .6);
+    }
+  }
+
+  .nav-link.active,
+  .nav-link:hover {
+    background-color: transparent;
+    @include btn-shadow-inverse($gray-800);
+    border: 1px solid rgba(0, 0, 0, .6);
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover {
+    @include btn-shadow($gray-800);
+    color: $nav-link-disabled-color;
+  }
+}
+
+.pagination {
+  .page-link {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+    @include btn-shadow($gray-800);
+
+    &:hover {
+      @include btn-shadow-inverse($gray-800);
+      text-decoration: none;
+    }
+  }
+
+  .page-item.active .page-link {
+    @include btn-shadow-inverse($gray-800);
+  }
+
+  .page-item.disabled .page-link {
+    @include btn-shadow($gray-800);
+  }
+}
+
+.breadcrumb {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, .6);
+  @include btn-shadow($gray-800);
+
+  a,
+  a:hover {
+    color: $white;
+  }
+}
+
+// Indicators
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
+  }
+
+  &-light {
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-bg;
+    }
+  }
+}
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.list-group {
+  &-item-action:hover {
+    background-color: shade-color($gray-900, 10%);
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/slate/_variables.scss b/themes/Bootswatch5.2_Scss/slate/_variables.scss
new file mode 100644
index 0000000..683f233
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/slate/_variables.scss
@@ -0,0 +1,168 @@
+// Slate 5.2.2
+// Bootswatch
+
+$theme: "slate" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #999 !default;
+$gray-600: #7a8288 !default;
+$gray-700: #52575c !default;
+$gray-800: #3a3f44 !default;
+$gray-900: #272b30 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #ee5f5b !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f89406 !default;
+$green:   #62c462 !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $gray-800 !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   1.95 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                #aaa !default;
+
+// Links
+
+$link-color:                $white !default;
+
+// Fonts
+
+// Tables
+
+$table-color:                 $white !default;
+$table-accent-bg:             rgba($white, .05) !default;
+$table-hover-bg:              rgba($white, .075) !default;
+$table-border-color:          rgba($black, .6) !default;
+$table-dark-border-color:     $table-border-color !default;
+$table-dark-color:            $white !default;
+
+$table-bg-scale:              0% !default;
+
+// Buttons
+
+$input-btn-padding-y:         .75rem !default;
+$input-btn-padding-x:         1rem !default;
+
+// Forms
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     #ccc !default;
+
+$input-color:                       $gray-900 !default;
+
+$form-check-input-bg:                     $white !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-800 !default;
+$dropdown-border-color:             rgba($black, .6) !default;
+$dropdown-divider-bg:               rgba($black, .15) !default;
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $body-bg !default;
+$dropdown-link-active-color:        $dropdown-link-hover-color !default;
+$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;
+
+// Navs
+
+$nav-tabs-border-color:             rgba($black, .6) !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-padding-y:                  0 !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-hover-color:          $gray-800 !default;
+$navbar-light-active-color:         $gray-800 !default;
+
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     transparent !default;
+$pagination-border-color:           rgba($black, .6) !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               transparent !default;
+$pagination-hover-border-color:     rgba($black, .6) !default;
+$pagination-active-bg:              transparent !default;
+$pagination-active-border-color:    rgba($black, .6) !default;
+$pagination-disabled-bg:            transparent !default;
+$pagination-disabled-border-color:  rgba($black, .6) !default;
+
+// Cards
+
+$card-border-color:                 rgba($black, .6) !default;
+$card-cap-bg:                       lighten($gray-800, 10%) !default;
+$card-bg:                           lighten($body-bg, 5%) !default;
+
+// Popovers
+
+$popover-bg:                        lighten($body-bg, 5%) !default;
+
+// Toasts
+
+$toast-background-color:            lighten($body-bg, 5%) !default;
+$toast-border-color:                rgba(0, 0, 0, .2) !default;
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  lighten($body-bg, 5%) !default;
+$modal-header-border-color:         rgba(0, 0, 0, .2) !default;
+
+// Progress bars
+
+$progress-bg:                       darken($gray-900, 5%) !default;
+$progress-bar-color:                $gray-600 !default;
+
+// List group
+
+$list-group-color:                  $white !default;
+$list-group-bg:                     lighten($body-bg, 5%) !default;
+$list-group-border-color:           rgba($black, .6) !default;
+$list-group-hover-bg:               lighten($body-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-hover-bg !default;
+$list-group-active-border-color:    $list-group-border-color !default;
+$list-group-disabled-color:         $gray-700 !default;
+$list-group-action-color:           $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/themes/Bootswatch5.2_Scss/slate/index.html b/themes/Bootswatch5.2_Scss/slate/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/slate/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/slate/style.scss b/themes/Bootswatch5.2_Scss/slate/style.scss
new file mode 100644
index 0000000..54ada3b
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/slate/style.scss
@@ -0,0 +1,28 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
+  filter: none;
+}
+
+@mixin btn-shadow-inverse($color){
+  @include gradient-y-three-colors(darken($color, 18%), darken($color, 15%), 40%, darken($color, 13%));
+  filter: none;
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/solar/_bootswatch.scss b/themes/Bootswatch5.2_Scss/solar/_bootswatch.scss
new file mode 100644
index 0000000..27fec0a
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/solar/_bootswatch.scss
@@ -0,0 +1,66 @@
+// Solar 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: dark;
+}
+
+// Buttons
+
+.btn {
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Indicators
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-bg;
+    }
+  }
+}
+
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/solar/_variables.scss b/themes/Bootswatch5.2_Scss/solar/_variables.scss
new file mode 100644
index 0000000..fe49e9e
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/solar/_variables.scss
@@ -0,0 +1,189 @@
+// Solar 5.2.2
+// Bootswatch
+
+$theme: "solar" !default;
+
+//
+// Color system
+//
+
+// stylelint-disable
+$white:    #fff !default;
+$gray-100: #fdf6e3 !default;
+$gray-200: #eee8d5 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #839496 !default;
+$gray-700: #495057 !default;
+$gray-800: #073642 !default;
+$gray-900: #002b36 !default;
+$black:    #000 !default;
+
+$blue:    #b58900 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d33682 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #cb4b16 !default;
+$green:   #2aa198 !default;
+$teal:    #20c997 !default;
+$cyan:    #268bd2 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.5 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                $gray-600 !default;
+
+// Links
+
+$link-color:                $success !default;
+$link-hover-color:          $link-color !default;
+
+// Components
+
+$component-active-color:      rgba(255, 255, 255, .75) !default;
+$component-active-bg:         $gray-800 !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default !default;
+
+// Tables
+
+$table-accent-bg:             rgba($white, .05) !default;
+$table-hover-bg:              rgba($white, .075) !default;
+$table-border-color:          $component-active-bg !default;
+$table-dark-bg:               $gray-500 !default;
+$table-dark-border-color:     darken($gray-500, 3%) !default;
+$table-dark-color:            $body-bg !default;
+
+$table-bg-scale:              0% !default;
+
+// Forms
+
+$input-bg:                              #a9bdbd !default;
+$input-disabled-bg:                     #657b83 !default;
+
+$input-color:                           $gray-800 !default;
+$input-border-color:                    rgba($black, .15) !default;
+$input-placeholder-color:               #657b83 !default;
+$input-group-addon-color:               $gray-600 !default;
+$input-group-addon-bg:                  $gray-800 !default;
+
+$form-check-input-bg:                     rgba(255, 255, 255, .75) !default;
+$form-check-input-border:                 1px solid $white !default;
+$form-check-input-checked-bg-color:       $primary !default;
+
+$form-switch-color:               rgba(255, 255, 255, .75) !default;
+$form-switch-focus-color:         $form-switch-color !default;
+
+$form-range-track-bg:             $gray-800 !default;
+$form-range-thumb-bg:                      $primary !default;
+
+$form-file-button-color:          $gray-600 !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-800 !default;
+$dropdown-divider-bg:               $body-bg !default;
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         rgba(255, 255, 255, .75) !default;
+$dropdown-link-hover-bg:            $body-bg !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-800 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $component-active-color !default;
+$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbars
+
+$navbar-light-color:                rgba($black, .4) !default !default;
+$navbar-light-active-color:         rgba($black, .7) !default !default;
+
+// Pagination
+
+$pagination-bg:                     transparent !default;
+$pagination-border-color:           $gray-800 !default;
+$pagination-hover-bg:               $gray-800 !default;
+$pagination-hover-border-color:     $gray-800 !default;
+$pagination-active-color:           rgba(255, 255, 255, .75) !default;
+$pagination-active-bg:              $gray-800 !default;
+$pagination-active-border-color:    $gray-800 !default;
+$pagination-disabled-color:         $gray-800 !default;
+$pagination-disabled-bg:            transparent !default;
+$pagination-disabled-border-color:  $gray-800 !default;
+
+// Cards
+
+$card-border-color:                 rgba($gray-900, .95) !default;
+$card-cap-bg:                       rgba($gray-800, .25) !default;
+$card-bg:                           rgba($gray-200, .125) !default;
+
+// Popovers
+
+$popover-bg:                        $gray-800 !default;
+$popover-border-color:              $body-bg !default;
+$popover-header-bg:                 $gray-800 !default;
+
+// Toasts
+
+$toast-background-color:            lighten($body-bg, 5%) !default;
+$toast-border-color:                rgba(0, 0, 0, .2) !default;
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-content-border-color:        $body-bg !default;
+$modal-header-border-color:         $body-bg !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-800 !default;
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-color:                  $white !default;
+$list-group-bg:                     transparent !default;
+$list-group-border-color:           $gray-800 !default;
+$list-group-hover-bg:               $gray-800 !default;
+$list-group-active-color:           $white !default;
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            transparent !default;
+$list-group-action-color:           $body-color !default;
+$list-group-action-hover-color:     $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $component-active-bg !default;
+$breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:                       $white !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/themes/Bootswatch5.2_Scss/solar/index.html b/themes/Bootswatch5.2_Scss/solar/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/solar/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/solar/style.scss b/themes/Bootswatch5.2_Scss/solar/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/solar/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/spacelab/_bootswatch.scss b/themes/Bootswatch5.2_Scss/spacelab/_bootswatch.scss
new file mode 100644
index 0000000..f92d56c
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/spacelab/_bootswatch.scss
@@ -0,0 +1,99 @@
+// Spacelab 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Mixins
+
+@mixin btn-shadow($color) {
+  @include gradient-y-three-colors(tint-color($color, 24%), $color, 50%, shade-color($color, 8%));
+  filter: none;
+  border: 1px solid shade-color($color, 20%);
+}
+
+// Navbar
+
+.navbar {
+  .nav-link,
+  .navbar-brand {
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, .1);
+    transition: color ease-in-out .2s;
+  }
+
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      @include btn-shadow($value);
+    }
+  }
+
+  &.bg-light {
+    .nav-link,
+    .navbar-brand {
+      text-shadow: 1px 1px 0 rgba(255, 255, 255, .1);
+    }
+
+    .navbar-brand {
+      color: $navbar-light-color;
+
+      &:hover {
+        color: $info;
+      }
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  text-shadow: -1px -1px 0 rgba(0, 0, 0, .1);
+
+  &-link {
+    text-shadow: none;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include btn-shadow($value);
+  }
+
+  .btn-#{$color}:not(.disabled):hover {
+    @include btn-shadow(shade-color($value, 8%));
+  }
+}
+
+[class*="btn-outline-"] {
+  text-shadow: none;
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.card,
+.list-group-item {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/spacelab/_variables.scss b/themes/Bootswatch5.2_Scss/spacelab/_variables.scss
new file mode 100644
index 0000000..eb052ac
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/spacelab/_variables.scss
@@ -0,0 +1,64 @@
+// Spacelab 5.2.2
+// Bootswatch
+
+$theme: "spacelab" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #999 !default;
+$gray-600: #777 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #2d2d2d !default;
+$black:    #000 !default;
+
+$blue:    #446e9b !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #cd0200 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #d47500 !default;
+$green:   #3cb521 !default;
+$teal:    #20c997 !default;
+$cyan:    #3399f3 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.65 !default;
+
+// Body
+
+$body-color:                $gray-600 !default;
+
+// Links
+
+$link-color:                $info !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-color:              $gray-900 !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white, .75) !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-color:                rgba($black, .4) !default;
+$navbar-light-hover-color:          $info !default;
+$navbar-light-active-color:         $info !default;
diff --git a/themes/Bootswatch5.2_Scss/spacelab/index.html b/themes/Bootswatch5.2_Scss/spacelab/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/spacelab/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/spacelab/style.scss b/themes/Bootswatch5.2_Scss/spacelab/style.scss
new file mode 100644
index 0000000..ac6a84d
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/spacelab/style.scss
@@ -0,0 +1,23 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins==========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 15%), $color, 50%, darken($color, 4%));
+  filter: none;
+  border: 1px solid darken($color, 10%);
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
diff --git a/themes/Bootswatch5.2_Scss/superhero/_bootswatch.scss b/themes/Bootswatch5.2_Scss/superhero/_bootswatch.scss
new file mode 100644
index 0000000..8c06a3a
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/superhero/_bootswatch.scss
@@ -0,0 +1,150 @@
+// Superhero 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: dark;
+}
+
+// Buttons
+
+.btn {
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Typography
+
+.dropdown-menu {
+  font-size: $font-size-sm;
+}
+
+.dropdown-header {
+  font-size: $font-size-sm;
+}
+
+.blockquote-footer {
+  color: $body-color;
+}
+
+// Tables
+
+.table {
+  font-size: $font-size-sm;
+
+  .thead-dark th {
+    color: $white;
+  }
+
+  a:not(.btn) {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  .dropdown-menu a {
+    text-decoration: none;
+  }
+
+  .text-muted {
+    color: $text-muted;
+  }
+}
+
+// Forms
+
+label,
+.radio label,
+.checkbox label,
+.help-block {
+  font-size: $font-size-sm;
+}
+
+.form-control{
+  color-scheme: light;
+}
+
+.form-floating {
+  label {
+    color: $input-placeholder-color;
+  }
+}
+
+// Navs
+
+.nav-tabs,
+.nav-pills {
+  .nav-link,
+  .nav-link:hover {
+    color: $body-color;
+  }
+
+  .nav-link.disabled {
+    color: $nav-link-disabled-color;
+  }
+}
+
+.page-link:hover,
+.page-link:focus {
+  color: $white;
+  text-decoration: none;
+}
+
+// Indicators
+
+.alert {
+  color: $white;
+  border: none;
+
+  a,
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+.badge {
+  &-warning,
+  &-info {
+    color: $white;
+  }
+}
+
+// Popovers
+
+.popover-header {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+// Containers
+
+.modal {
+  &-header,
+  &-footer {
+    background-color: $table-hover-bg;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/superhero/_variables.scss b/themes/Bootswatch5.2_Scss/superhero/_variables.scss
new file mode 100644
index 0000000..a4e2da8
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/superhero/_variables.scss
@@ -0,0 +1,176 @@
+// Superhero 5.2.2
+// Bootswatch
+
+$theme: "superhero" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #ebebeb !default;
+$gray-200: #4e5d6c !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #4c9be8 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #f0ad4e !default;
+$yellow:  #ffc107 !default;
+$green:   #5cb85c !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         lighten($gray-200, 35%) !default;
+$dark:          #20374c !default;
+
+$min-contrast-ratio:   1.6 !default;
+
+// Body
+
+$body-bg:                   #0f2537 !default;
+$body-color:                $gray-100 !default;
+
+// Components
+
+$border-radius:               0 !default;
+$border-radius-lg:            0 !default;
+$border-radius-sm:            0 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$text-muted:                  rgba(255, 255, 255, .4) !default;
+
+// Tables
+
+$table-accent-bg:             rgba($white, .05) !default;
+$table-hover-bg:              rgba($white, .075) !default;
+$table-border-color:          rgba($black, .15) !default;
+$table-head-bg:               $light !default;
+$table-dark-bg:               $light !default;
+$table-dark-border-color:     $gray-200 !default;
+$table-dark-color:            $body-bg !default;
+
+$table-bg-scale:              0% !default;
+
+// Forms
+
+$input-bg:                          $white !default;
+$input-disabled-bg:                 $gray-100 !default;
+
+$input-color:                       $gray-900 !default;
+$input-border-color:                transparent !default;
+$input-border-width:                0 !default;
+
+$input-placeholder-color:               $gray-600 !default;
+
+$input-group-addon-color:           $body-color !default;
+
+$form-check-input-bg:                     $white !default;
+$form-check-input-border:                 none !default;
+
+$form-file-button-color:          $body-color !default;
+
+$form-floating-label-opacity:     1 !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-200 !default;
+$dropdown-divider-bg:               rgba($black, .15) !default;
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            $table-hover-bg !default;
+
+// Navs
+
+$nav-link-disabled-color:           rgba(255, 255, 255, .4) !default;
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-active-color:        $body-color !default;
+$nav-tabs-link-active-border-color: $gray-200 !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white, .75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $gray-200 !default;
+$pagination-border-color:           transparent !default;
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $nav-link-disabled-color !default;
+$pagination-hover-border-color:     $pagination-border-color !default;
+$pagination-disabled-color:         $nav-link-disabled-color !default;
+$pagination-disabled-bg:            $pagination-bg !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Cards
+
+$card-cap-bg:                       $table-hover-bg !default;
+$card-bg:                           $gray-200 !default;
+$card-inner-border-radius:          0 !default;
+
+// Popovers
+
+$popover-bg:                        $gray-200 !default;
+$popover-header-bg:                 $table-hover-bg !default;
+
+// Toasts
+
+$toast-background-color:            $gray-200 !default;
+$toast-border-color:                rgba(0, 0, 0, .2) !default;
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-200 !default;
+$modal-header-border-color:         rgba(0, 0, 0, .2) !default;
+
+// List group
+
+$list-group-color:                  $white !default;
+$list-group-bg:                     $gray-200 !default;
+$list-group-border-color:           transparent !default;
+$list-group-hover-bg:               $nav-link-disabled-color !default;
+$list-group-disabled-color:         $nav-link-disabled-color !default;
+$list-group-action-color:           $white !default;
+$list-group-action-hover-color:     $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $body-color !default;
+$breadcrumb-active-color:           $body-color !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .5 !default;
+$btn-close-hover-opacity:    1 !default;
+
+// Code
+
+$pre-color:                         inherit !default;
diff --git a/themes/Bootswatch5.2_Scss/superhero/index.html b/themes/Bootswatch5.2_Scss/superhero/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/superhero/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/superhero/style.scss b/themes/Bootswatch5.2_Scss/superhero/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/superhero/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/template.php b/themes/Bootswatch5.2_Scss/template.php
new file mode 100644
index 0000000..c72b894
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/template.php
@@ -0,0 +1,135 @@
+<?php
+/**
+ * Theme Bootswatch 5.2 Scss 
+ * Typesetter CMS theme template
+ * based on https://bootswatch.com
+ *
+ */
+
+global $page, $config;
+$path = $page->theme_dir . '/drop_down_menu.php';
+include_once($path);
+common::LoadComponents( 'bootstrap5.2-js,fontawesome' );
+$lang = isset($page->lang) ? $page->lang : $config['language'];
+
+/**
+ * If you are using Multi-Language Manager 1.2.3+
+ * and want to use localized $langmessage values in the template,
+ * uncomment the following line
+ */
+ // common::GetLangFile('main.inc', $lang);
+
+?><!DOCTYPE html>
+<html lang="<?php echo $lang; ?>" class="bootstrap-5">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+    <?php
+      gpOutput::GetHead();
+    ?>
+
+  </head>
+  <body>
+    <!--[if lte IE 9]>
+      <div class="alert alert-warning">
+        <h3>Bootstrap 5</h3>
+        <p>We&rsquo;re sorry but Internet Explorer 9 support was dropped as of Bootstrap version 4.</p>
+      </div>
+    <![endif]-->
+    <header class="main-header">
+      <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary gp-fixed-adjust"  data-bs-theme="dark">
+        <div class="container">
+
+          <?php
+            echo common::Link('', $config['title'], '', 'class="navbar-brand"');
+          ?>
+
+            <button class="navbar-toggler" type="button"
+            data-bs-toggle="collapse" 
+            data-bs-target="#navbarResponsive" 
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+            </button>
+
+
+          <div class="collapse navbar-collapse navbar-left" id="navbarResponsive">
+            <?php
+              $GP_ARRANGE = false;
+              // main nav classes
+              $GP_MENU_CLASSES = array(
+                'menu_top'          => 'nav navbar-nav',
+                'selected'          => 'active',
+                'selected_li'       => '',
+                'childselected'     => 'active',
+                'childselected_li'  => 'active', // use '' if you do not want 1st-level nav items to indicate that a child item is active
+                'li_'               => 'nav-item nav-item-',
+                'li_title'          => '',
+                'haschildren'       => 'dropdown-toggle',
+                'haschildren_li'    => 'dropdown',
+                'child_ul'          => 'dropdown-menu',
+              );
+
+              gpOutput::Get('TopTwoMenu'); //top two levels
+            ?>
+          </div><!--/.navbar-collapse -->
+        </div>
+      </div>
+    </header><!-- /.main-header -->
+
+    <div class="main-content">
+      <div class="container">
+        <?php $page->GetContent(); ?>
+      </div><!-- /.container-->
+    </div><!-- /.main-content -->
+
+    <footer class="main-footer pt-5 pb-5 mt-5">
+      <div class="container">
+
+        <?php
+          // possible footer nav classes
+          $GP_MENU_CLASSES = array(
+            'menu_top'          => 'footer-nav',
+            'selected'          => 'active',
+            'selected_li'       => '',
+            'childselected'     => 'active',
+            'childselected_li'  => 'active',
+            'li_'               => 'li-',
+            'li_title'          => '',
+            'haschildren'       => 'subitem-link',
+            'haschildren_li'    => 'subitem',
+            'child_ul'          => 'subitem-menu',
+          );
+        ?>
+
+        <div class="row">
+          <div class="col-sm-6 col-lg-3 footer-column footer-column-1">
+            <?php gpOutput::Get('Extra', 'Footer_Column_1'); ?>
+          </div>
+
+          <div class="col-sm-6 col-lg-3 footer-column footer-column-2">
+            <?php gpOutput::Get('Extra', 'Footer_Column_2'); ?>
+          </div>
+
+          <div class="col-sm-6 col-lg-3 footer-column footer-column-3">
+            <?php gpOutput::Get('Extra', 'Footer_Column_3'); ?>
+          </div>
+
+          <div class="col-sm-6 col-lg-3 footer-column footer-column-4">
+            <?php gpOutput::Get('Extra', 'Footer_Column_4'); ?>
+          </div>
+        </div><!-- /.row -->
+
+        <div class="row">
+          <div class="col-12 footer-bottom">
+            <?php gpOutput::GetAdminLink(); ?>
+          </div>
+        </div><!-- /.row -->
+
+      </div><!-- /.container -->
+    </footer><!-- /.main-footer -->
+  </body>
+</html>
diff --git a/themes/Bootswatch5.2_Scss/united/_bootswatch.scss b/themes/Bootswatch5.2_Scss/united/_bootswatch.scss
new file mode 100644
index 0000000..81bb8ba
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/united/_bootswatch.scss
@@ -0,0 +1,22 @@
+// United 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $body-color;
+  }
+}
diff --git a/themes/Bootswatch5.2_Scss/united/_variables.scss b/themes/Bootswatch5.2_Scss/united/_variables.scss
new file mode 100644
index 0000000..80da37e
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/united/_variables.scss
@@ -0,0 +1,56 @@
+// United 5.2.2
+// Bootswatch
+
+$theme: "united" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #aea79f !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #772953 !default;
+$pink:    #e83e8c !default;
+$red:     #df382c !default;
+$orange:  #e95420 !default;
+$yellow:  #efb73e !default;
+$green:   #38b44a !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$primary:       $orange !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $purple !default;
+
+$min-contrast-ratio:   1.8 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Tables
+
+$table-dark-bg:               $dark !default;
+$table-dark-border-color:     darken($dark, 5%) !default;
diff --git a/themes/Bootswatch5.2_Scss/united/index.html b/themes/Bootswatch5.2_Scss/united/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/united/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/united/style.scss b/themes/Bootswatch5.2_Scss/united/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/united/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/yeti/_bootswatch.scss b/themes/Bootswatch5.2_Scss/yeti/_bootswatch.scss
new file mode 100644
index 0000000..66b19d7
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/yeti/_bootswatch.scss
@@ -0,0 +1,363 @@
+// Yeti 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.navbar {
+  font-weight: $headings-font-weight;
+}
+
+.bg-primary {
+  .dropdown-menu {
+    background-color: $primary;
+
+    .dropdown-item,
+    .dropdown-item:focus {
+      color: $navbar-dark-color;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:hover,
+    .dropdown-item:focus {
+      color: $white;
+      background-color: shade-color($primary, 10%);
+    }
+  }
+}
+
+.bg-dark {
+  background-color: $gray-800 !important;
+
+  .dropdown-menu {
+    background-color: $gray-800;
+
+    .dropdown-item,
+    .dropdown-item:focus {
+      color: $navbar-dark-color;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:hover,
+    .dropdown-item:focus  {
+      color: $white;
+      background-color: shade-color($gray-800, 10%);
+    }
+  }
+}
+
+.bg-light {
+  .dropdown-menu {
+    background-color: $gray-200;
+
+    .dropdown-item,
+    .dropdown-item:focus {
+      color: $navbar-light-color;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:hover,
+    .dropdown-item:focus  {
+      color: $navbar-light-hover-color;
+      background-color: tint-color($gray-200, 10%);
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  &-primary {
+    border-color: shade-color($primary, 10%);
+  }
+
+  &-secondary {
+    border-color: shade-color($secondary, 10%);
+  }
+
+  &-success {
+    border-color: shade-color($success, 10%);
+  }
+
+  &-info {
+    color: $white;
+    border-color: shade-color($info, 10%);
+  }
+
+  &-danger {
+    border-color: shade-color($danger, 10%);
+  }
+
+  &-warning {
+    color: $white;
+    border-color: shade-color($warning, 10%);
+  }
+
+  &-light {
+    border-color: shade-color($light, 10%);
+  }
+
+  &-dark {
+    border-color: shade-color($dark, 10%);
+  }
+}
+
+.btn-outline-secondary {
+  color: $black;
+}
+
+.btn-group {
+  .dropdown-menu {
+    border-top-width: 0;
+  }
+
+  .dropdown-toggle {
+    &.btn-primary ~ .dropdown-menu {
+      background-color: $primary;
+      border-color: shade-color($primary, 10%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: shade-color($primary, 16%);
+      }
+    }
+
+    &.btn-secondary ~ .dropdown-menu {
+      background-color: $secondary;
+      border-color: shade-color($secondary, 10%);
+
+      .dropdown-item {
+        color: $body-color;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: shade-color($secondary, 16%);
+      }
+    }
+
+    &.btn-success ~ .dropdown-menu {
+      background-color: $success;
+      border-color: shade-color($success, 10%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: shade-color($success, 16%);
+      }
+    }
+
+    &.btn-info ~ .dropdown-menu {
+      background-color: $info;
+      border-color: shade-color($info, 10%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: shade-color($info, 16%);
+      }
+    }
+
+    &.btn-warning ~ .dropdown-menu {
+      background-color: $warning;
+      border-color: shade-color($warning, 10%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: shade-color($warning, 16%);
+      }
+    }
+
+    &.btn-danger ~ .dropdown-menu {
+      background-color: $danger;
+      border-color: shade-color($danger, 10%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: shade-color($danger, 16%);
+      }
+    }
+  }
+}
+
+// Typography
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+.blockquote-footer {
+  color: $gray-600;
+}
+
+// Tables
+
+table {
+  font-size: $font-size-sm;
+}
+
+// Forms
+
+label,
+.control-label,
+.help-block,
+.checkbox,
+.radio,
+.form-control-feedback {
+  font-size: $font-size-sm;
+}
+
+// Navs
+
+.dropdown-item {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: $font-size-sm;
+  font-weight: 300;
+}
+
+.nav-tabs {
+  .nav-link,
+  .nav-link.disabled,
+  .nav-link.disabled:hover,
+  .nav-link.disabled:focus {
+    background-color: $gray-200;
+    border-color: $nav-tabs-border-color;
+  }
+
+  .nav-item + .nav-item {
+    .nav-link {
+      border-left: none;
+    }
+  }
+}
+
+.nav-pills {
+  .active {
+    border: 1px solid shade-color($primary, 10%);
+  }
+}
+
+.breadcrumb {
+  font-size: $font-size-sm;
+  font-weight: 300;
+  text-transform: uppercase;
+  border: 1px solid $dropdown-border-color;
+}
+
+.pagination {
+  font-weight: 300;
+
+  .page-link {
+    margin-right: .1em;
+    margin-left: .1em;
+    border-color: transparent;
+    border-radius: 3px;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .page-item.disabled {
+    .page-link {
+      border-color: transparent;
+    }
+  }
+}
+
+.pagination,
+.pagination-lg,
+.pagination-sm {
+  .page-item:first-child,
+  .page-item:last-child {
+    .page-link {
+      border-radius: 3px;
+    }
+  }
+}
+
+.list-group {
+  font-size: $font-size-sm;
+  font-weight: 300;
+}
+
+// Indicators
+
+.alert {
+  font-size: $font-size-sm;
+  font-weight: 300;
+  color: $white;
+
+  .alert-link {
+    color: $white;
+    text-decoration: underline;
+  }
+
+  &:not(.alert-secondary):not(.alert-light) .btn-close {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$white}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    a:not(.btn),
+    .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Progress bars
+
+.progress[value] {
+  height: 22px;
+  padding: 2px;
+  background-color: #f6f6f6;
+  border: 1px solid #ccc;
+  @include box-shadow(none);
+}
+
+// Popovers
+
+.popover-header {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
diff --git a/themes/Bootswatch5.2_Scss/yeti/_variables.scss b/themes/Bootswatch5.2_Scss/yeti/_variables.scss
new file mode 100644
index 0000000..1f26f37
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/yeti/_variables.scss
@@ -0,0 +1,123 @@
+// Yeti 5.2.2
+// Bootswatch
+
+$theme: "yeti" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ccc !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #008cba !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #f04124 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #e99002 !default;
+$green:   #43ac6a !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   1.9 !default;
+
+// Components
+
+$border-radius:               0 !default;
+$border-radius-lg:            0 !default;
+$border-radius-sm:            0 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-font-weight:        300 !default;
+
+// Tables
+
+$table-bg-scale:              0% !default;
+
+// Buttons
+
+$input-btn-padding-x:         .5rem !default;
+$btn-font-weight:             300 !default;
+
+// Dropdowns
+
+$dropdown-border-color:             rgba($black, .1) !default;
+$dropdown-divider-bg:               rgba($black, .1) !default;
+
+// Navs
+
+$nav-link-disabled-color:           $gray-400 !default;
+$nav-tabs-border-color:             $dropdown-border-color !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white, .7) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-color:                  $gray-600 !default;
+$pagination-border-color:           $nav-tabs-border-color !default;
+$pagination-active-border-color:    darken($primary, 5%) !default;
+$pagination-disabled-color:         $gray-200 !default;
+
+// Cards
+
+$card-inner-border-radius:          0 !default;
+
+// Badges
+
+$badge-font-weight:                 300 !default;
+$badge-padding-x:                   1rem !default;
+
+// Alerts
+
+$alert-link-font-weight:            400 !default;
+
+$alert-bg-scale:                    0% !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-400 !default;
+$progress-bar-color:                $white !default;
+
+// List group
+
+$list-group-disabled-bg:            $gray-200 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-border-radius:          3px !default;
+
+// Close
+
+$btn-close-color:            $gray-600 !default;
+$btn-close-opacity:          .6 !default;
+$btn-close-hover-opacity:    1 !default;
diff --git a/themes/Bootswatch5.2_Scss/yeti/index.html b/themes/Bootswatch5.2_Scss/yeti/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/yeti/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/yeti/style.scss b/themes/Bootswatch5.2_Scss/yeti/style.scss
new file mode 100644
index 0000000..eacd344
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/yeti/style.scss
@@ -0,0 +1,18 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+
+
diff --git a/themes/Bootswatch5.2_Scss/zephyr/_bootswatch.scss b/themes/Bootswatch5.2_Scss/zephyr/_bootswatch.scss
new file mode 100644
index 0000000..a75a9cd
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/zephyr/_bootswatch.scss
@@ -0,0 +1,215 @@
+// Zephyr 5.2.2
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+:root {
+  color-scheme: light;
+}
+
+// Navbar
+
+.navbar {
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  .nav-item {
+    margin-right: .5rem;
+    margin-left: .5rem;
+  }
+
+  .navbar-nav {
+    .nav-link {
+      border-radius: $border-radius;
+    }
+  }
+}
+
+.navbar-dark {
+  .navbar-nav {
+    .nav-link {
+      &:hover {
+        background-color: rgba(255, 255, 255, .1);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, .5);
+      }
+    }
+  }
+}
+
+.navbar-light {
+  .navbar-nav {
+    .nav-link {
+      &:hover {
+        background-color: rgba(0, 0, 0, .03);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, .05);
+      }
+    }
+  }
+}
+
+.navbar-nav {
+  --bs-nav-link-padding-x: .5rem;
+}
+
+// Buttons
+
+.btn-secondary,
+.btn-light,
+.btn-outline-secondary,
+.btn-outline-light {
+  color: $gray-900;
+
+  &:disabled,
+  &.disabled {
+    border: 1px solid shade-color($secondary, 10%);
+  }
+}
+
+.btn-secondary,
+.btn-outline-secondary {
+  border-color: shade-color($secondary, 10%);
+
+  &:hover,
+  &:active {
+    background-color: shade-color($secondary, 10%);
+    border-color: shade-color($secondary, 10%);
+  }
+}
+
+.btn-light,
+.btn-outline-light {
+  border-color: shade-color($light, 10%);
+
+  &:hover,
+  &:active {
+    background-color: shade-color($light, 10%);
+    border-color: shade-color($light, 10%);
+  }
+}
+
+// Tables
+
+.table {
+  font-size: $font-size-sm;
+  box-shadow: $box-shadow-lg;
+}
+
+thead th {
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+}
+
+// Forms
+
+.input-group-text {
+  box-shadow: $box-shadow;
+}
+
+// Navs
+
+.nav-tabs {
+  font-weight: 500;
+
+  .nav-link {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-width: 0 0 1px;
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    box-shadow: inset 0 -2px 0 $primary;
+  }
+}
+
+.nav-pills {
+  font-weight: 500;
+}
+
+.pagination {
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  .page-link {
+    box-shadow: $box-shadow;
+  }
+}
+
+.breadcrumb {
+  font-size: $font-size-sm;
+  font-weight: 500;
+  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  &-item {
+    padding: 1rem .5rem 1rem 0;
+  }
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  padding-right: 1rem;
+}
+
+// Indicators
+
+.alert {
+  .btn-close {
+    color: inherit;
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $gray-900;
+  }
+}
+
+// Containers
+
+.list-group-item,
+.card {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    color: inherit;
+  }
+}
+
+.list-group {
+  box-shadow: $box-shadow-lg;
+}
+
+.card {
+  box-shadow: $box-shadow-lg;
+}
+
+.modal-footer {
+  background-color: $gray-100;
+}
+
+.modal-content {
+  box-shadow: $box-shadow-lg;
+}
diff --git a/themes/Bootswatch5.2_Scss/zephyr/_variables.scss b/themes/Bootswatch5.2_Scss/zephyr/_variables.scss
new file mode 100644
index 0000000..6b9cfd9
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/zephyr/_variables.scss
@@ -0,0 +1,163 @@
+// Zephyr 5.2.2
+// Bootswatch
+
+$theme: "zephyr" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #3459e6 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #da292e !default;
+$orange:  #f8765f !default;
+$yellow:  #f4bd61 !default;
+$green:   #2fb380 !default;
+$teal:    #20c997 !default;
+$cyan:    #287bb5 !default;
+
+$primary:       $blue !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   1.65 !default;
+
+$enable-shadows:              true !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+$headings-color:              $gray-900 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm:                $font-size-base * .875 !default;
+
+// Components
+
+$box-shadow:                  0 1px 2px rgba($black, .05) !default;
+$box-shadow-lg:               0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !default;
+
+// Tables
+
+$table-cell-padding-y:        1rem !default;
+$table-cell-padding-x:        1rem !default;
+$table-cell-padding-y-sm:     .5rem !default;
+$table-cell-padding-x-sm:     .5rem !default;
+
+$table-th-font-weight:        500 !default;
+
+// Buttons + Forms
+
+$input-btn-padding-y:         .5rem !default;
+$input-btn-padding-x:         1rem !default;
+$input-btn-font-size:         $font-size-sm !default;
+
+// Buttons
+
+$btn-font-weight:             500 !default;
+$btn-box-shadow:              $box-shadow !default;
+$btn-focus-box-shadow:        $box-shadow !default;
+$btn-active-box-shadow:       $box-shadow !default;
+
+// Forms
+
+$form-label-font-weight:                500 !default;
+
+$input-box-shadow:                      $box-shadow !default;
+
+$input-group-addon-bg:                  $gray-100 !default;
+
+// Navs
+
+$nav-link-color:                    $body-color !default;
+$nav-link-hover-color:              $body-color !default;
+
+$nav-tabs-border-radius:            0 !default;
+$nav-tabs-link-active-color:        $primary !default;
+
+// Navbar
+
+$navbar-padding-y:                  .85rem !default;
+
+$navbar-nav-link-padding-x:         .75rem !default;
+
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-dark-active-color:          $white !default;
+
+$navbar-light-color:                $black !default;
+$navbar-light-hover-color:          $black !default;
+$navbar-light-active-color:         $black !default;
+
+// Dropdowns
+
+$dropdown-font-size:                $font-size-sm !default;
+$dropdown-border-color:             $gray-300 !default;
+$dropdown-divider-bg:               $gray-200 !default;
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+$dropdown-item-padding-y:           .5rem !default;
+$dropdown-item-padding-x:           1rem !default;
+
+// Pagination
+
+$pagination-padding-y:              .5rem !default;
+$pagination-padding-x:              1rem !default;
+
+$pagination-color:                  $gray-700 !default;
+
+$pagination-focus-color:            $pagination-color !default;
+
+$pagination-hover-color:            $pagination-color !default;
+$pagination-hover-bg:               $gray-100 !default;
+
+// Cards
+$card-spacer-x:                     1.5rem !default;
+$card-cap-padding-y:                1rem !default;
+$card-cap-padding-x:                1.5rem !default;
+
+// Toasts
+
+$toast-header-color:                $headings-color !default;
+
+// Modals
+
+$modal-content-border-color:        $gray-300 !default;
+$modal-header-border-width:         0 !default;
+
+// List group
+
+$list-group-item-padding-y:         1rem !default;
+$list-group-item-padding-x:         1.5rem !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-x:              1rem !default;
+
+$breadcrumb-divider:                quote(">") !default;
diff --git a/themes/Bootswatch5.2_Scss/zephyr/index.html b/themes/Bootswatch5.2_Scss/zephyr/index.html
new file mode 100644
index 0000000..6c70bcf
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/zephyr/index.html
@@ -0,0 +1 @@
+<html></html>
\ No newline at end of file
diff --git a/themes/Bootswatch5.2_Scss/zephyr/style.scss b/themes/Bootswatch5.2_Scss/zephyr/style.scss
new file mode 100644
index 0000000..d3f0fa5
--- /dev/null
+++ b/themes/Bootswatch5.2_Scss/zephyr/style.scss
@@ -0,0 +1,22 @@
+// Theme Bootswatch 5 Scss
+// Layout Cerulean 5.2
+// https://bootswatch.com
+// Migrate to Bootstrap 5: check out https://getbootstrap.com/docs/5.2/migration/
+
+// Import Bootstrap Scss ========================================================
+@import '_variables.scss';
+@import 'include/thirdparty/Bootstrap5.2/scss/_bootstrap.scss';
+@import '_bootswatch.scss';
+
+// Variables and Mixins =========================================================
+$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 3%), $color, 6%, darken($color, 3%));
+  filter: none;
+  border: 1px solid darken($color, 6.5%);
+}
+
+// Import Common Styles =========================================================
+@import '../_common/common_style.scss';
+