diff --git a/bootstrap_styles.libraries.yml b/bootstrap_styles.libraries.yml
index 4177609..7ba3d57 100644
--- a/bootstrap_styles.libraries.yml
+++ b/bootstrap_styles.libraries.yml
@@ -11,6 +11,13 @@ layout_builder_form_style:
     - core/once
     - bootstrap_styles/themes-overrides

+# Offcanvas Font
+offcanvas-font:
+  css:
+    theme:
+      //fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap: { type: external, minified: true }
+      css/fonts.css: { }
+
 # Themes overrides
 themes-overrides:
   css:
@@ -189,3 +196,10 @@ aos.local:
   css:
     theme:
       /libraries/aos/dist/aos.css: { minified: true }
+
+# Gin Compatibility
+theme.gin:
+  version: 1.x
+  css:
+    theme:
+      css/gin.css: { weight: 1 }
\ No newline at end of file
diff --git a/bootstrap_styles.module b/bootstrap_styles.module
index 1a87ee6..42c6a7e 100644
--- a/bootstrap_styles.module
+++ b/bootstrap_styles.module
@@ -77,6 +77,14 @@ function bootstrap_styles_page_attachments_alter(array &$page) {
       // Attach the default dark theme.
       $page['#attached']['library'][] = 'bootstrap_styles/theme.dark';
     }
+
+    // Check if the Gin theme is installed and set as the admin theme.
+    $theme_handler = \Drupal::service('theme_handler');
+    $admin_theme = \Drupal::config('system.theme')->get('admin');
+
+    if ($theme_handler->themeExists('gin') && $admin_theme === 'gin') {
+      $page['#attached']['library'][] = 'bootstrap_styles/theme.gin';
+    }
   }
 }

diff --git a/css/gin.css b/css/gin.css
new file mode 100644
index 0000000..1c0efe9
--- /dev/null
+++ b/css/gin.css
@@ -0,0 +1,393 @@
+:root,
+#drupal-off-canvas-wrapper {
+  --off-canvas-background-color-medium: #383A40;
+  --off-canvas-background-color-dark: #292C32;
+  --off-canvas-padding: 0;
+  --off-canvas-border-color: transparent;
+  --off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  --off-canvas-vertical-spacing-unit: 0;
+  --off-canvas-title-background-color: #292C32;
+  --off-canvas-title-padding: calc(3 * 0.5rem);
+}
+
+#layout-builder-modal,
+#drupal-off-canvas-wrapper {
+  --off-canvas-title-text-color: var(--gin-color-primary-active);
+  --off-canvas-background-color-medium: var(--gin-bg-app);
+}
+
+#layout-builder-modal .ui-dialog-titlebar,
+#drupal-off-canvas-wrapper .ui-dialog-titlebar {
+  background-color: var(--gin-bg-app);
+}
+
+#layout-builder-modal a,
+#drupal-off-canvas-wrapper a {
+  color: var(--gin-color-primary-active);
+}
+
+#drupal-off-canvas .blb_breakpoint_col {
+  background-color: #dbdbdb !important;
+  color: #ffffff !important;
+}
+
+#drupal-off-canvas .blb_breakpoint_cols input:checked + label .blb_breakpoint_col {
+  background-color: var(--gin-offcanvas-active) !important;
+  color: #ffffff !important;
+}
+
+#drupal-off-canvas details[open] > summary {
+  color: var(--gin-offcanvas-active);
+  background-color: #ffffff;
+}
+
+#drupal-off-canvas details[open] > summary:hover {
+  color: var(--gin-offcanvas-active);
+  background-color: #ffffff;
+}
+
+#drupal-off-canvas summary[aria-expanded='true'], #drupal-off-canvas summary:hover, #drupal-off-canvas summary:focus {
+  color: var(--gin-offcanvas-active);
+  background-color: #ffffff;
+}
+
+#drupal-off-canvas summary[aria-expanded='true']:after, #drupal-off-canvas summary:hover:after, #drupal-off-canvas summary:focus:after {
+  border-right-color: var(--gin-offcanvas-active);
+  border-bottom-color: var(--gin-offcanvas-active);
+}
+
+#drupal-off-canvas summary .bs-group-title {
+  color: var(--gin-offcanvas-active);
+}
+
+#drupal-off-canvas #bs_nav-tabs li a.active:hover,
+#drupal-off-canvas #bs_nav-tabs li a.active {
+  color: var(--gin-offcanvas-active);
+}
+
+#drupal-off-canvas #bs_nav-tabs li a.active:hover svg *,
+#drupal-off-canvas #bs_nav-tabs li a.active svg * {
+  fill: var(--gin-offcanvas-active) !important;
+}
+
+#drupal-off-canvas #bs_nav-tabs li a.active:hover::after,
+#drupal-off-canvas #bs_nav-tabs li a.active::after {
+  background-color: var(--gin-offcanvas-active);
+}
+
+#drupal-off-canvas #bs_nav-tabs li a.active:after {
+  background-color: var(--gin-offcanvas-active);
+}
+
+#drupal-off-canvas .fieldgroup.blb_container_type .fieldset-wrapper > div > div input + label {
+  background-color: var(--gin-bg-app);
+}
+
+#drupal-off-canvas .fieldgroup.blb_container_type .fieldset-wrapper > div > div input + label:hover {
+  background-color: var(--gin-offcanvas-active) !important;
+}
+
+#drupal-off-canvas .fieldgroup.blb_gutter_type .fieldset-wrapper > div > div input:checked + label,
+#drupal-off-canvas .fieldgroup.blb_container_type .fieldset-wrapper > div > div input:checked + label {
+  background-color: var(--gin-offcanvas-active);
+  color: var(--gin-bg-app);
+}
+
+#drupal-off-canvas .inline-block-create-button {
+  background-color: var(--gin-offcanvas-active) !important;
+  color: var(--gin-bg-app) !important;
+}
+
+#drupal-off-canvas .inline-block-create-button:hover {
+  background-color: var(--gin-offcanvas-active) !important;
+}
+
+#bs_nav-tabs {
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  margin: 0 0 2rem 0 !important;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 0;
+  width: calc(100% + 4rem) !important;
+  transform: translateX(-2rem);
+}
+
+#bs_nav-tabs li {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-bottom: none;
+}
+
+#bs_nav-tabs li a {
+  transition: all .3s ease-in-out;
+  cursor: pointer;
+  position: relative;
+  padding: .5rem .75rem;
+  min-height: 68px;
+  min-width: 16.666%;
+  color: var(--gin-color-primary-active) !important;
+  background: #ffffff;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: .2s background-color ease-in-out;
+  text-decoration: none;
+}
+
+#bs_nav-tabs li a:after {
+  transition: all .3s ease-in-out;
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #dbdbdb;
+  z-index: 1;
+}
+
+#bs_nav-tabs li a:hover {
+  color: rgba(var(--gin-color-primary-active), 0.8);
+  text-decoration: none;
+}
+
+#bs_nav-tabs li a:hover .bs_tooltip {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0px);
+}
+
+#bs_nav-tabs li a:hover svg * {
+  fill: rgba(var(--gin-color-primary-active), 0.8);
+}
+
+#bs_nav-tabs li a.active, #bs_nav-tabs li a.active:hover {
+  color: var(--gin-color-primary-active) !important;
+  background-color: #ffffff;
+}
+
+#bs_nav-tabs li a.active:after, #bs_nav-tabs li a.active:hover:after {
+  background-color: var(--gin-color-primary-active) !important;
+  left: -1px;
+  bottom: 0;
+  right: -1px;
+  width: calc(100% + 2px);
+  height: 5px;
+  border-radius: 8px;
+}
+
+#bs_nav-tabs li a.active svg *, #bs_nav-tabs li a.active:hover svg * {
+  fill: var(--gin-color-primary-active) !important;
+}
+
+#bs_nav-tabs li a .blb_icon,
+#bs_nav-tabs li a span[role='img'] {
+  max-width: 25px;
+  margin: 0 .75rem;
+}
+
+#bs_nav-tabs li a svg {
+  max-width: 100%;
+  height: auto;
+  background: none;
+}
+
+#bs_nav-tabs li a svg * {
+  transition: all .3s ease-in-out;
+  fill: var(--gin-color-primary-active);
+}
+
+.ui-dialog .ui-dialog-title {
+  color: var(--gin-color-primary-active) !important;
+}
+
+select:not([class^="ck"]),
+input[type="date"]:not([class^="ck"]),
+input[type="datetime"]:not([class^="ck"]),
+input[type="datetime-local"]:not([class^="ck"]),
+input[type="email"]:not([class^="ck"]),
+input[type="month"]:not([class^="ck"]),
+input[type="number"]:not([class^="ck"]),
+input[type="password"]:not([class^="ck"]),
+input[type="search"]:not([class^="ck"]),
+input[type="tel"]:not([class^="ck"]),
+input[type="text"]:not([class^="ck"]),
+input[type="time"]:not([class^="ck"]),
+input[type="url"]:not([class^="ck"]),
+input[type="week"]:not([class^="ck"]),
+:not(.ck-source-editing-area) > textarea:not([class^="ck"]) {
+  color: var(--gin-color-primary-active);
+  padding: .65rem 1rem;
+  vertical-align: middle;
+  border: 2px solid #dbdbdb;
+  background-color: transparent;
+}
+
+select:not([class^="ck"]):focus-visible,
+input[type="date"]:not([class^="ck"]):focus-visible,
+input[type="datetime"]:not([class^="ck"]):focus-visible,
+input[type="datetime-local"]:not([class^="ck"]):focus-visible,
+input[type="email"]:not([class^="ck"]):focus-visible,
+input[type="month"]:not([class^="ck"]):focus-visible,
+input[type="number"]:not([class^="ck"]):focus-visible,
+input[type="password"]:not([class^="ck"]):focus-visible,
+input[type="search"]:not([class^="ck"]):focus-visible,
+input[type="tel"]:not([class^="ck"]):focus-visible,
+input[type="text"]:not([class^="ck"]):focus-visible,
+input[type="time"]:not([class^="ck"]):focus-visible,
+input[type="url"]:not([class^="ck"]):focus-visible,
+input[type="week"]:not([class^="ck"]):focus-visible,
+:not(.ck-source-editing-area) > textarea:not([class^="ck"]):focus-visible {
+  border-color: var(--gin-color-primary-active) !important;
+}
+
+select:not([class^="ck"])::placeholder,
+input[type="date"]:not([class^="ck"])::placeholder,
+input[type="datetime"]:not([class^="ck"])::placeholder,
+input[type="datetime-local"]:not([class^="ck"])::placeholder,
+input[type="email"]:not([class^="ck"])::placeholder,
+input[type="month"]:not([class^="ck"])::placeholder,
+input[type="number"]:not([class^="ck"])::placeholder,
+input[type="password"]:not([class^="ck"])::placeholder,
+input[type="search"]:not([class^="ck"])::placeholder,
+input[type="tel"]:not([class^="ck"])::placeholder,
+input[type="text"]:not([class^="ck"])::placeholder,
+input[type="time"]:not([class^="ck"])::placeholder,
+input[type="url"]:not([class^="ck"])::placeholder,
+input[type="week"]:not([class^="ck"])::placeholder,
+:not(.ck-source-editing-area) > textarea:not([class^="ck"])::placeholder {
+  color: rgba(var(--gin-color-primary-active), 0.5);
+}
+
+select:not([class^="ck"])[disabled],
+input[type="date"]:not([class^="ck"])[disabled],
+input[type="datetime"]:not([class^="ck"])[disabled],
+input[type="datetime-local"]:not([class^="ck"])[disabled],
+input[type="email"]:not([class^="ck"])[disabled],
+input[type="month"]:not([class^="ck"])[disabled],
+input[type="number"]:not([class^="ck"])[disabled],
+input[type="password"]:not([class^="ck"])[disabled],
+input[type="search"]:not([class^="ck"])[disabled],
+input[type="tel"]:not([class^="ck"])[disabled],
+input[type="text"]:not([class^="ck"])[disabled],
+input[type="time"]:not([class^="ck"])[disabled],
+input[type="url"]:not([class^="ck"])[disabled],
+input[type="week"]:not([class^="ck"])[disabled],
+:not(.ck-source-editing-area) > textarea:not([class^="ck"])[disabled] {
+  background-color: rgba(var(--gin-color-primary-active), 0.1);
+}
+
+select:not([class^="ck"]),
+input[type="date"]:not([class^="ck"]),
+input[type="datetime"]:not([class^="ck"]),
+input[type="datetime-local"]:not([class^="ck"]),
+input[type="email"]:not([class^="ck"]),
+input[type="month"]:not([class^="ck"]),
+input[type="number"]:not([class^="ck"]),
+input[type="password"]:not([class^="ck"]),
+input[type="search"]:not([class^="ck"]),
+input[type="tel"]:not([class^="ck"]),
+input[type="text"]:not([class^="ck"]),
+input[type="time"]:not([class^="ck"]),
+input[type="url"]:not([class^="ck"]),
+input[type="week"]:not([class^="ck"]),
+:not(.ck-source-editing-area) > textarea:not([class^="ck"]) {
+  height: auto;
+  border-radius: 8px;
+}
+
+input:not([class^="ck"])::placeholder,
+:not(.ck-source-editing-area) > textarea:not([class^="ck"])::placeholder {
+  color: rgba(var(--gin-color-primary-active), 0.8);
+}
+
+.ck-reset_all:not(.ck-reset_all-excluded *),
+.ck.ck-reset,
+.ck.ck-reset_all {
+  color: initial;
+}
+
+.ck .btn.ck-link_selected {
+  background: var(--bs-btn-bg);
+}
+
+.button--primary,
+input[type="submit"].button--primary,
+input[type="submit"].media-library-open-button,
+input[type="submit"].button[data-drupal-selector^="edit-image"] {
+  font-size: 17px;
+  margin: 0;
+  padding: 11px 20px;
+  color: #ffffff;
+  background: var(--gin-color-primary-active) !important;
+  min-width: auto;
+  width: 100%;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.button--primary:hover, .button--primary:focus, .button--primary:active,
+input[type="submit"].button--primary:hover,
+input[type="submit"].button--primary:focus,
+input[type="submit"].button--primary:active,
+input[type="submit"].media-library-open-button:hover,
+input[type="submit"].media-library-open-button:focus,
+input[type="submit"].media-library-open-button:active,
+input[type="submit"].button[data-drupal-selector^="edit-image"]:hover,
+input[type="submit"].button[data-drupal-selector^="edit-image"]:focus,
+input[type="submit"].button[data-drupal-selector^="edit-image"]:active {
+  color: #ffffff;
+  background: var(--gin-color-primary-active);
+}
+
+.button--primary:disabled, .button--primary:disabled:active, .button--primary.is-disabled, .button--primary.is-disabled:active,
+input[type="submit"].button--primary:disabled,
+input[type="submit"].button--primary:disabled:active,
+input[type="submit"].button--primary.is-disabled,
+input[type="submit"].button--primary.is-disabled:active,
+input[type="submit"].media-library-open-button:disabled,
+input[type="submit"].media-library-open-button:disabled:active,
+input[type="submit"].media-library-open-button.is-disabled,
+input[type="submit"].media-library-open-button.is-disabled:active,
+input[type="submit"].button[data-drupal-selector^="edit-image"]:disabled,
+input[type="submit"].button[data-drupal-selector^="edit-image"]:disabled:active,
+input[type="submit"].button[data-drupal-selector^="edit-image"].is-disabled,
+input[type="submit"].button[data-drupal-selector^="edit-image"].is-disabled:active {
+  background: var(--gin-color-primary-active);
+}
+
+.button--danger {
+  color: #DC7C7C;
+}
+
+.button--danger:hover, .button--danger:focus, .button--danger:active {
+  color: #d15454;
+}
+
+.button--danger:disabled, .button--danger.is-disabled {
+  color: #737373;
+}
+
+#layout-builder-modal details[open] > summary:hover,
+#layout-builder-modal details[open] > summary,
+#layout-builder-modal summary[aria-expanded='true'],
+#layout-builder-modal summary:hover,
+#layout-builder-modal summary:focus {
+  color: var(--gin-color-primary-active);
+}
+
+#layout-builder-modal summary[aria-expanded='true']:after,
+#layout-builder-modal summary:hover:after,
+#layout-builder-modal summary:focus:after {
+  border-right-color: var(--gin-color-primary-active);
+  border-bottom-color: var(--gin-color-primary-active);
+}
diff --git a/css/themes/dark.css b/css/themes/dark.css
index 3fe4a3d..37a36e8 100644
--- a/css/themes/dark.css
+++ b/css/themes/dark.css
@@ -1255,6 +1255,7 @@

 #drupal-off-canvas-wrapper .ui-dialog-titlebar {
   padding: 1em;
+  background: #383A40;
 }

 .ui-dialog .ui-resizable-w {
diff --git a/css/themes/light.css b/css/themes/light.css
index 486251a..b45dbcf 100644
--- a/css/themes/light.css
+++ b/css/themes/light.css
@@ -10,8 +10,13 @@
   --off-canvas-title-padding: calc(3 * 0.5rem);
 }

+#drupal-off-canvas-wrapper {
+  --off-canvas-title-text-color: #474747;
+  --off-canvas-background-color-medium: #ffffff;
+}
+
 #layout-builder-modal {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background: #ffffff;
   padding: 0;
   border-radius: 0 0 8px 8px;
@@ -136,7 +141,7 @@
 }

 #layout-builder-modal hr {
-  background: var(--off-canvas-background-color-medium);
+  background: var(--off-canvas-title-text-color);
 }

 #layout-builder-modal .ui-widget-content a {
@@ -281,7 +286,7 @@
 #layout-builder-modal summary,
 #layout-builder-modal .ui-dialog-content {
   outline: 0;
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background: transparent;
 }

@@ -310,7 +315,7 @@
   font-weight: normal;
   display: flex;
   align-items: center;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.05);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.05);
   cursor: pointer;
   border: 2px solid transparent;
 }
@@ -338,7 +343,7 @@
 #layout-builder-modal summary img path,
 #layout-builder-modal summary svg g,
 #layout-builder-modal summary svg path {
-  fill: var(--off-canvas-background-color-medium);
+  fill: var(--off-canvas-title-text-color);
 }

 #layout-builder-modal summary:after {
@@ -366,7 +371,7 @@

 #layout-builder-modal summary[aria-expanded='true'], #layout-builder-modal summary:hover, #layout-builder-modal summary:focus {
   color: #26A5FF;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.14);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
 }

 #layout-builder-modal summary[aria-expanded='true']:after, #layout-builder-modal summary:hover:after, #layout-builder-modal summary:focus:after {
@@ -380,7 +385,7 @@

 #layout-builder-modal details[open] > summary {
   color: #26A5FF;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.14);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
 }

 #layout-builder-modal details[open] > summary:after {
@@ -396,7 +401,7 @@

 #layout-builder-modal details[open] > summary:hover {
   color: #26A5FF;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.14);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
 }

 #layout-builder-modal .dropbutton-widget {
@@ -426,11 +431,11 @@
 }

 #layout-builder-modal .dropbutton-toggle {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #layout-builder-modal .dropbutton-arrow {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #layout-builder-modal td .dropbutton-widget {
@@ -439,7 +444,7 @@

 #layout-builder-modal td .dropbutton-multiple.open .dropbutton li,
 #layout-builder-modal td .dropbutton-multiple.open .dropbutton a {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #layout-builder-modal th,
@@ -462,7 +467,7 @@
 }

 #layout-builder-modal form {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   font-family: inherit;
   display: flex;
   flex-flow: wrap;
@@ -487,7 +492,7 @@
 }

 #layout-builder-modal label:not([class^="ck"]) {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   font-size: 1rem;
   font-weight: normal;
   margin-bottom: .5rem;
@@ -496,7 +501,7 @@
 #layout-builder-modal .description,
 #layout-builder-modal .form-item .description,
 #layout-builder-modal .details-description {
-  color: rgba(var(--off-canvas-background-color-medium), 0.5);
+  color: rgba(var(--off-canvas-title-text-color), 0.5);
   font-size: .875rem;
   margin-top: .25rem;
   margin-bottom: 1rem;
@@ -521,7 +526,7 @@
   margin-bottom: 0.5rem;
   display: inline-block;
   font-weight: normal;
-  color: rgba(var(--off-canvas-background-color-medium), 0.6);
+  color: rgba(var(--off-canvas-title-text-color), 0.6);
 }

 #layout-builder-modal .form-select {
@@ -578,7 +583,7 @@
 #layout-builder-modal .form-textarea:hover,
 #layout-builder-modal .form-date:hover,
 #layout-builder-modal .form-time:hover {
-  border-color: rgba(var(--off-canvas-background-color-medium), 0.75);
+  border-color: rgba(var(--off-canvas-title-text-color), 0.75);
 }

 #layout-builder-modal .form-select:focus,
@@ -614,7 +619,7 @@
 }

 #layout-builder-modal .ief-form {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.035);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.035);
   padding: 1rem 2rem 2rem 2rem;
   border-radius: 8px;
 }
@@ -624,7 +629,7 @@
 }

 #layout-builder-modal .ief-entity-table tr:hover td {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.035);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.035);
 }

 #layout-builder-modal .ief-entity-table .ief-row-entity td:last-child {
@@ -714,7 +719,7 @@
 #layout-builder-modal .inline-block-list a {
   font-size: 1rem;
   padding: 11px !important;
-  color: var(--off-canvas-background-color-medium) !important;
+  color: var(--off-canvas-title-text-color) !important;
   background: #e6e6e6 !important;
   margin: 0 !important;
   display: flex !important;
@@ -790,7 +795,7 @@
 #layout-builder-modal input[type="url"]:not([class^="ck"]),
 #layout-builder-modal input[type="week"]:not([class^="ck"]),
 #layout-builder-modal :not(.ck-source-editing-area) > textarea:not([class^="ck"]) {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   padding: .65rem 1rem;
   vertical-align: middle;
   border: 2px solid #dbdbdb;
@@ -830,7 +835,7 @@
 #layout-builder-modal input[type="url"]:not([class^="ck"])::placeholder,
 #layout-builder-modal input[type="week"]:not([class^="ck"])::placeholder,
 #layout-builder-modal :not(.ck-source-editing-area) > textarea:not([class^="ck"])::placeholder {
-  color: rgba(var(--off-canvas-background-color-medium), 0.5);
+  color: rgba(var(--off-canvas-title-text-color), 0.5);
 }

 #layout-builder-modal select:not([class^="ck"])[disabled],
@@ -848,7 +853,7 @@
 #layout-builder-modal input[type="url"]:not([class^="ck"])[disabled],
 #layout-builder-modal input[type="week"]:not([class^="ck"])[disabled],
 #layout-builder-modal :not(.ck-source-editing-area) > textarea:not([class^="ck"])[disabled] {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #layout-builder-modal select:not([class^="ck"]),
@@ -872,7 +877,7 @@

 #layout-builder-modal input:not([class^="ck"])::placeholder,
 #layout-builder-modal :not(.ck-source-editing-area) > textarea:not([class^="ck"])::placeholder {
-  color: rgba(var(--off-canvas-background-color-medium), 0.8);
+  color: rgba(var(--off-canvas-title-text-color), 0.8);
 }

 #layout-builder-modal .ck-reset_all,
@@ -886,7 +891,7 @@
 }

 #layout-builder-modal table {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #layout-builder-modal .table > :not(:first-child) {
@@ -900,7 +905,7 @@

 #layout-builder-modal td,
 #layout-builder-modal th {
-  border-bottom: 1px solid rgba(var(--off-canvas-background-color-medium), 0.2);
+  border-bottom: 1px solid rgba(var(--off-canvas-title-text-color), 0.2);
 }

 #layout-builder-modal th[colspan="2"] h4 {
@@ -915,12 +920,12 @@
 }

 #layout-builder-modal td {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   vertical-align: middle;
 }

 #layout-builder-modal tr:hover td {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.035);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.035);
 }

 #layout-builder-modal .drag {
@@ -1031,11 +1036,11 @@
 }

 #layout-builder-modal button.link.tabledrag-toggle-weight {
-  color: rgba(var(--off-canvas-background-color-medium), 0.75);
+  color: rgba(var(--off-canvas-title-text-color), 0.75);
   border-radius: 4px;
   outline: none;
   margin-bottom: .25rem;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.25);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.25);
   border: 2px solid transparent;
   font-size: initial;
 }
@@ -1153,7 +1158,7 @@
   padding: 1rem 2rem;
   border-radius: 8px 8px 0 0;
   background-color: #ffffff;
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   border: 0;
 }

@@ -1194,7 +1199,7 @@
 /* Style the dialog-off-canvas container. */
 .ui-dialog.ui-dialog-off-canvas {
   font-size: 16px;
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background: #ffffff;
 }

@@ -1215,7 +1220,7 @@
 }

 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background: #ffffff;
   padding: 1rem;
 }
@@ -1427,7 +1432,7 @@
 }

 #drupal-off-canvas hr {
-  background: var(--off-canvas-background-color-medium);
+  background: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas .ui-widget-content a {
@@ -1572,7 +1577,7 @@
 #drupal-off-canvas summary,
 #drupal-off-canvas .ui-dialog-content {
   outline: 0;
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background: transparent;
 }

@@ -1601,7 +1606,7 @@
   font-weight: normal;
   display: flex;
   align-items: center;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.05);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.05);
   cursor: pointer;
   border: 2px solid transparent;
 }
@@ -1629,7 +1634,7 @@
 #drupal-off-canvas summary img path,
 #drupal-off-canvas summary svg g,
 #drupal-off-canvas summary svg path {
-  fill: var(--off-canvas-background-color-medium);
+  fill: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas summary:after {
@@ -1657,7 +1662,7 @@

 #drupal-off-canvas summary[aria-expanded='true'], #drupal-off-canvas summary:hover, #drupal-off-canvas summary:focus {
   color: #26A5FF;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.14);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
 }

 #drupal-off-canvas summary[aria-expanded='true']:after, #drupal-off-canvas summary:hover:after, #drupal-off-canvas summary:focus:after {
@@ -1671,7 +1676,7 @@

 #drupal-off-canvas details[open] > summary {
   color: #26A5FF;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.14);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
 }

 #drupal-off-canvas details[open] > summary:after {
@@ -1687,7 +1692,7 @@

 #drupal-off-canvas details[open] > summary:hover {
   color: #26A5FF;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.14);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
 }

 #drupal-off-canvas .dropbutton-widget {
@@ -1717,11 +1722,11 @@
 }

 #drupal-off-canvas .dropbutton-toggle {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas .dropbutton-arrow {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas td .dropbutton-widget {
@@ -1730,7 +1735,7 @@

 #drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
 #drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas th,
@@ -1753,7 +1758,7 @@
 }

 #drupal-off-canvas form {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   font-family: inherit;
   display: flex;
   flex-flow: wrap;
@@ -1778,7 +1783,7 @@
 }

 #drupal-off-canvas label:not([class^="ck"]) {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   font-size: 1rem;
   font-weight: normal;
   margin-bottom: .5rem;
@@ -1787,7 +1792,7 @@
 #drupal-off-canvas .description,
 #drupal-off-canvas .form-item .description,
 #drupal-off-canvas .details-description {
-  color: rgba(var(--off-canvas-background-color-medium), 0.5);
+  color: rgba(var(--off-canvas-title-text-color), 0.5);
   font-size: .875rem;
   margin-top: .25rem;
   margin-bottom: 1rem;
@@ -1812,7 +1817,7 @@
   margin-bottom: 0.5rem;
   display: inline-block;
   font-weight: normal;
-  color: rgba(var(--off-canvas-background-color-medium), 0.6);
+  color: rgba(var(--off-canvas-title-text-color), 0.6);
 }

 #drupal-off-canvas .form-select {
@@ -1869,7 +1874,7 @@
 #drupal-off-canvas .form-textarea:hover,
 #drupal-off-canvas .form-date:hover,
 #drupal-off-canvas .form-time:hover {
-  border-color: rgba(var(--off-canvas-background-color-medium), 0.75);
+  border-color: rgba(var(--off-canvas-title-text-color), 0.75);
 }

 #drupal-off-canvas .form-select:focus,
@@ -1905,7 +1910,7 @@
 }

 #drupal-off-canvas .ief-form {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.035);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.035);
   padding: 1rem 2rem 2rem 2rem;
   border-radius: 8px;
 }
@@ -1915,7 +1920,7 @@
 }

 #drupal-off-canvas .ief-entity-table tr:hover td {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.035);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.035);
 }

 #drupal-off-canvas .ief-entity-table .ief-row-entity td:last-child {
@@ -2005,7 +2010,7 @@
 #drupal-off-canvas .inline-block-list a {
   font-size: 1rem;
   padding: 11px !important;
-  color: var(--off-canvas-background-color-medium) !important;
+  color: var(--off-canvas-title-text-color) !important;
   background: #e6e6e6 !important;
   margin: 0 !important;
   display: flex !important;
@@ -2081,7 +2086,7 @@
 #drupal-off-canvas input[type="url"]:not([class^="ck"]),
 #drupal-off-canvas input[type="week"]:not([class^="ck"]),
 #drupal-off-canvas :not(.ck-source-editing-area) > textarea:not([class^="ck"]) {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   padding: .65rem 1rem;
   vertical-align: middle;
   border: 2px solid #dbdbdb;
@@ -2121,7 +2126,7 @@
 #drupal-off-canvas input[type="url"]:not([class^="ck"])::placeholder,
 #drupal-off-canvas input[type="week"]:not([class^="ck"])::placeholder,
 #drupal-off-canvas :not(.ck-source-editing-area) > textarea:not([class^="ck"])::placeholder {
-  color: rgba(var(--off-canvas-background-color-medium), 0.5);
+  color: rgba(var(--off-canvas-title-text-color), 0.5);
 }

 #drupal-off-canvas select:not([class^="ck"])[disabled],
@@ -2139,7 +2144,7 @@
 #drupal-off-canvas input[type="url"]:not([class^="ck"])[disabled],
 #drupal-off-canvas input[type="week"]:not([class^="ck"])[disabled],
 #drupal-off-canvas :not(.ck-source-editing-area) > textarea:not([class^="ck"])[disabled] {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas select:not([class^="ck"]),
@@ -2163,7 +2168,7 @@

 #drupal-off-canvas input:not([class^="ck"])::placeholder,
 #drupal-off-canvas :not(.ck-source-editing-area) > textarea:not([class^="ck"])::placeholder {
-  color: rgba(var(--off-canvas-background-color-medium), 0.8);
+  color: rgba(var(--off-canvas-title-text-color), 0.8);
 }

 #drupal-off-canvas .ck-reset_all,
@@ -2177,7 +2182,7 @@
 }

 #drupal-off-canvas table {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas .table > :not(:first-child) {
@@ -2191,7 +2196,7 @@

 #drupal-off-canvas td,
 #drupal-off-canvas th {
-  border-bottom: 1px solid rgba(var(--off-canvas-background-color-medium), 0.2);
+  border-bottom: 1px solid rgba(var(--off-canvas-title-text-color), 0.2);
 }

 #drupal-off-canvas th[colspan="2"] h4 {
@@ -2206,12 +2211,12 @@
 }

 #drupal-off-canvas td {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   vertical-align: middle;
 }

 #drupal-off-canvas tr:hover td {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.035);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.035);
 }

 #drupal-off-canvas .drag {
@@ -2322,11 +2327,11 @@
 }

 #drupal-off-canvas button.link.tabledrag-toggle-weight {
-  color: rgba(var(--off-canvas-background-color-medium), 0.75);
+  color: rgba(var(--off-canvas-title-text-color), 0.75);
   border-radius: 4px;
   outline: none;
   margin-bottom: .25rem;
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.25);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.25);
   border: 2px solid transparent;
   font-size: initial;
 }
@@ -2715,7 +2720,7 @@

 #drupal-off-canvas .blb_breakpoint_cols label:hover .blb_breakpoint_col,
 #layout-builder-modal .blb_breakpoint_cols label:hover .blb_breakpoint_col {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.8);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.8);
   color: #ffffff;
 }

@@ -2727,13 +2732,13 @@

 #drupal-off-canvas .blb_breakpoint_col,
 #layout-builder-modal .blb_breakpoint_col {
-  color: var(--off-canvas-background-color-medium);
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.2);
+  color: var(--off-canvas-title-text-color);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.2);
 }

 #drupal-off-canvas .blb_breakpoint_col.bp-selected,
 #layout-builder-modal .blb_breakpoint_col.bp-selected {
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background-color: #26A5FF;
 }

@@ -2959,7 +2964,7 @@
 #layout-builder-modal .bs_input-circles .fieldset-wrapper label {
   transition: all .3s ease-in-out;
   cursor: pointer !important;
-  border: 2px solid var(--off-canvas-background-color-medium);
+  border: 2px solid var(--off-canvas-title-text-color);
   border-radius: 40px;
   font-size: 0.00001px;
   position: relative;
@@ -3013,7 +3018,7 @@
   content: '';
   position: absolute;
   border-radius: 40px;
-  background: linear-gradient(to top left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(var(--off-canvas-background-color-medium), 0.1) 50%, rgba(var(--off-canvas-background-color-medium), 0) 100%);
+  background: linear-gradient(to top left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(var(--off-canvas-title-text-color), 0.1) 50%, rgba(var(--off-canvas-title-text-color), 0) 100%);
 }

 #drupal-off-canvas em.placeholder,
@@ -3075,7 +3080,7 @@

 #drupal-off-canvas .bs_radio-tabs .fieldset-wrapper > div > div input + label:hover,
 #layout-builder-modal .bs_radio-tabs .fieldset-wrapper > div > div input + label:hover {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas .bs_radio-tabs .fieldset-wrapper > div > div input + label svg,
@@ -3086,7 +3091,7 @@

 #drupal-off-canvas .bs_radio-tabs .fieldset-wrapper > div > div input:focus + label,
 #layout-builder-modal .bs_radio-tabs .fieldset-wrapper > div > div input:focus + label {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas .bs_radio-tabs .fieldset-wrapper > div > div input:checked + label,
@@ -3265,7 +3270,7 @@
   padding: .5rem .75rem;
   min-height: 68px;
   min-width: 16.666%;
-  color: var(--off-canvas-background-color-medium);
+  color: var(--off-canvas-title-text-color);
   background: #ffffff;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3292,7 +3297,7 @@

 #drupal-off-canvas #bs_nav-tabs li a:hover,
 #layout-builder-modal #bs_nav-tabs li a:hover {
-  color: rgba(var(--off-canvas-background-color-medium), 0.8);
+  color: rgba(var(--off-canvas-title-text-color), 0.8);
   text-decoration: none;
 }

@@ -3305,7 +3310,7 @@

 #drupal-off-canvas #bs_nav-tabs li a:hover svg *,
 #layout-builder-modal #bs_nav-tabs li a:hover svg * {
-  fill: rgba(var(--off-canvas-background-color-medium), 0.8);
+  fill: rgba(var(--off-canvas-title-text-color), 0.8);
 }

 #drupal-off-canvas #bs_nav-tabs li a.active, #drupal-off-canvas #bs_nav-tabs li a.active:hover,
@@ -3351,7 +3356,7 @@
 #drupal-off-canvas #bs_nav-tabs li a svg *,
 #layout-builder-modal #bs_nav-tabs li a svg * {
   transition: all .3s ease-in-out;
-  fill: var(--off-canvas-background-color-medium);
+  fill: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas #bs_tabContent > .bs_tab-pane,
@@ -3509,7 +3514,7 @@
   justify-content: center;
   vertical-align: top;
   min-width: 25%;
-  background: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background: rgba(var(--off-canvas-title-text-color), 0.1);
   border: 2px solid #dbdbdb;
   border-radius: 8px;
   transition: border-color 0.2s, color 0.2s, background 0.2s;
@@ -3620,7 +3625,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: rgba(var(--off-canvas-background-color-medium), 0.8);
+  color: rgba(var(--off-canvas-title-text-color), 0.8);
 }

 #drupal-off-canvas .media-library-item--grid:before,
@@ -3896,7 +3901,7 @@
 #drupal-off-canvas .bs_background--size .fieldset-wrapper > div > div input + label:hover,
 #layout-builder-modal .bs_background--attachment .fieldset-wrapper > div > div input + label:hover,
 #layout-builder-modal .bs_background--size .fieldset-wrapper > div > div input + label:hover {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas .bs_background--attachment .fieldset-wrapper > div > div input + label svg,
@@ -3911,7 +3916,7 @@
 #drupal-off-canvas .bs_background--size .fieldset-wrapper > div > div input:focus + label,
 #layout-builder-modal .bs_background--attachment .fieldset-wrapper > div > div input:focus + label,
 #layout-builder-modal .bs_background--size .fieldset-wrapper > div > div input:focus + label {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas .bs_background--attachment .fieldset-wrapper > div > div input:checked + label,
@@ -3993,7 +3998,7 @@

 #drupal-off-canvas .bs_background--position .form-radios input ~ label:hover,
 #layout-builder-modal .bs_background--position .form-radios input ~ label:hover {
-  background-color: var(--off-canvas-background-color-medium);
+  background-color: var(--off-canvas-title-text-color);
   animation: hover-pop 0.3s linear 1;
 }

@@ -4101,7 +4106,7 @@

 #drupal-off-canvas .bs_background--repeat .fieldset-wrapper > div > div input + label:hover,
 #layout-builder-modal .bs_background--repeat .fieldset-wrapper > div > div input + label:hover {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas .bs_background--repeat .fieldset-wrapper > div > div input + label svg,
@@ -4112,7 +4117,7 @@

 #drupal-off-canvas .bs_background--repeat .fieldset-wrapper > div > div input:focus + label,
 #layout-builder-modal .bs_background--repeat .fieldset-wrapper > div > div input:focus + label {
-  background-color: rgba(var(--off-canvas-background-color-medium), 0.1);
+  background-color: rgba(var(--off-canvas-title-text-color), 0.1);
 }

 #drupal-off-canvas .bs_background--repeat .fieldset-wrapper > div > div input:checked + label,
@@ -4287,7 +4292,7 @@
   text-align: center;
   justify-content: center;
   background: #ebebeb;
-  color: rgba(var(--off-canvas-background-color-medium), 0.3);
+  color: rgba(var(--off-canvas-title-text-color), 0.3);
 }

 #drupal-off-canvas [data-bs-element="bs_preview-box"][data-bs-mode="light"],
@@ -4463,7 +4468,7 @@
 #drupal-off-canvas .field-scroll-effects .fieldset-wrapper > div > div input label.active,
 #layout-builder-modal .field-scroll-effects .fieldset-wrapper > div > div input label.active {
   color: #ffffff;
-  background-color: var(--off-canvas-background-color-medium);
+  background-color: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas .field-scroll-effects .fieldset-wrapper > div > div .input-icon.fade-up,
@@ -4715,7 +4720,7 @@
 #drupal-off-canvas .bs-field-box-shadow .fieldset-wrapper > div > div input label.active,
 #layout-builder-modal .bs-field-box-shadow .fieldset-wrapper > div > div input label.active {
   color: #ffffff;
-  background-color: var(--off-canvas-background-color-medium);
+  background-color: var(--off-canvas-title-text-color);
 }

 #drupal-off-canvas .bs-field-box-shadow .fieldset-wrapper > div > div .input-icon,
@@ -5051,3 +5056,23 @@
 #layout-builder-modal .field-text-alignment .fieldset-wrapper > div > div input + label .input-icon[class*="justify"] {
   background-image: url("../../images/plugins/text-alignment/text-justify.svg");
 }
+
+#drupal-off-canvas .blb_breakpoint_col {
+  background-color: #dbdbdb !important;
+  color: #ffffff !important;
+}
+
+#drupal-off-canvas .blb_breakpoint_cols input:checked + label .blb_breakpoint_col {
+  background-color: #26A5FF !important;
+  color: #ffffff !important;
+}
+
+#drupal-off-canvas summary[aria-expanded='true'], #drupal-off-canvas summary:hover, #drupal-off-canvas summary:focus {
+  color: #26A5FF;
+  background-color: rgba(var(--off-canvas-title-text-color), 0.14);
+}
+
+#drupal-off-canvas summary[aria-expanded='true']:after, #drupal-off-canvas summary:hover:after, #drupal-off-canvas summary:focus:after {
+  border-right-color: #26A5FF;
+  border-bottom-color: #26A5FF;
+}
diff --git a/scss/gin.scss b/scss/gin.scss
new file mode 100644
index 0000000..7566e70
--- /dev/null
+++ b/scss/gin.scss
@@ -0,0 +1,370 @@
+@import "variables";
+@import "mixins";
+
+#layout-builder-modal,
+#drupal-off-canvas-wrapper {
+    --off-canvas-title-text-color: var(--gin-color-primary-active);
+    --off-canvas-background-color-medium: var(--gin-bg-app);
+
+    .ui-dialog-titlebar {
+        background-color: var(--gin-bg-app);
+    }
+
+    a {
+        color: var(--gin-color-primary-active);
+    }
+}
+
+// Main Color Controllers
+$panel_text_color:          var(--gin-color-primary-active);
+$panel_link_color:          var(--gin-color-primary-active);
+$panel_bg_color:            var(--gin-bg-app);
+
+// Details & Summary
+$summary_link_color:              var(--gin-color-primary-active);
+$summary_link_color_hover:        var(--gin-color-primary-active) !default;
+$summary_link_color_active:       $summary_link_color_hover !default;
+
+$summary_bg_color:                transparent !default;
+$summary_bg_color_hover:          var(--gin-color-primary-active);
+$summary_bg_color_active:         $gray-464 !default;
+
+// Tabs
+$tabs_bottom_border_color:  $gray-dbd;
+$tab_text_color:            var(--gin-color-primary-active);
+$tab_text_color_hover:      rgba(var(--gin-color-primary-active), .8);
+$tab_text_color_active:     var(--gin-color-primary-active);
+$tab_bg_color:              $white;
+$tab_bg_color_active:       $white;
+
+// Buttons
+$button_primary_text_color:         $white;
+$button_primary_text_color_hover:   $panel_text_color;
+$button_primary_bg_color:           var(--gin-color-primary-active);
+$button_primary_bg_color_hover:     var(--gin-color-primary-active);
+
+#drupal-off-canvas {
+    .blb_breakpoint_col {
+        background-color: $gray-dbd !important;
+        color: $white !important;
+    }
+
+    .blb_breakpoint_cols input:checked + label .blb_breakpoint_col {
+        background-color: var(--gin-offcanvas-active) !important;
+        color: $white !important;
+    }
+
+    details[open] > summary {
+        color: var(--gin-offcanvas-active);
+        background-color: $white;
+
+        &:hover {
+            color: var(--gin-offcanvas-active);
+            background-color: $white;
+        }
+    }
+
+    summary {
+        &[aria-expanded='true'],
+        &:hover,
+        &:focus {
+            color: var(--gin-offcanvas-active);
+            background-color: $white;
+
+            &:after {
+                border-right-color: var(--gin-offcanvas-active);
+                border-bottom-color: var(--gin-offcanvas-active);
+            }
+        }
+        .bs-group-title {
+            color: var(--gin-offcanvas-active);
+        }
+    }
+
+    #bs_nav-tabs li a.active:hover,
+    #bs_nav-tabs li a.active {
+        color: var(--gin-offcanvas-active);
+
+        svg *{
+            fill: var(--gin-offcanvas-active) !important;
+        }
+
+        &::after {
+            background-color: var(--gin-offcanvas-active);
+        }
+    }
+    #bs_nav-tabs li a.active:after {
+        background-color: var(--gin-offcanvas-active);
+    }
+
+    .fieldgroup.blb_container_type .fieldset-wrapper > div > div input + label {
+        background-color: var(--gin-bg-app);
+
+        &:hover {
+            background-color: var(--gin-offcanvas-active) !important;
+        }
+    }
+
+    .fieldgroup.blb_gutter_type .fieldset-wrapper > div > div input:checked + label,
+    .fieldgroup.blb_container_type .fieldset-wrapper > div > div input:checked + label {
+        background-color: var(--gin-offcanvas-active);
+        color: var(--gin-bg-app);
+    }
+
+    .inline-block-create-button {
+        background-color: var(--gin-offcanvas-active) !important;
+        color: var(--gin-bg-app) !important;
+
+        &:hover {
+            background-color: var(--gin-offcanvas-active) !important;
+        }
+    }
+}
+
+// Horizontal Icon Tabs
+#bs_nav-tabs {
+    display: flex;
+    justify-content: center;
+    flex-wrap: nowrap;
+    margin: 0 0 2rem 0 !important;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    padding: 0;
+    width: calc(100% + 4rem) !important;
+    transform: translateX(-2rem);
+
+    li {
+      flex: 1 1 auto;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      border-bottom: none;
+
+      a {
+        @include smooth-all-transition;
+        cursor: pointer;
+        position: relative;
+        padding: .5rem .75rem;
+        min-height: 68px;
+        min-width: 16.666%;
+        color: $tab_text_color !important;
+        background: $tab_bg_color;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: .2s background-color ease-in-out;
+        text-decoration: none;
+
+        &:after {
+          @include smooth-all-transition;
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          width: 100%;
+          height: 2px;
+          background-color: $tabs_bottom_border_color;
+          z-index: 1;
+        }
+
+        &:hover {
+          color: $tab_text_color_hover;
+          text-decoration: none;
+
+          .bs_tooltip {
+            opacity: 1;
+            pointer-events: auto;
+            transform: translateY(0px);
+          }
+
+          svg * {
+            fill: $tab_text_color_hover;
+          }
+        }
+
+        &.active,
+        &.active:hover {
+          color: $tab_text_color_active !important;
+          background-color: $tab_bg_color_active;
+
+          &:after {
+            background-color: $tab_text_color_active !important;
+            left: -1px;
+            bottom: 0;
+            right: -1px;
+            width: calc(100% + 2px);
+            height: 5px;
+            border-radius: $border_radius;
+          }
+
+          svg * {
+            fill: $tab_text_color_active !important;
+          }
+        }
+
+        .blb_icon,
+        span[role='img'] {
+          max-width: 25px;
+          margin: 0 .75rem;
+        }
+
+        svg {
+          max-width: 100%;
+          height: auto;
+          background: none;
+
+          * {
+            @include smooth-all-transition;
+            fill: $tab_text_color;
+          }
+        }
+      }
+    }
+}
+
+.ui-dialog {
+    .ui-dialog-title {
+        color: var(--gin-color-primary-active) !important;
+    }
+}
+
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+:not(.ck-source-editing-area) > textarea {
+  &:not([class^="ck"]) {
+    color: $panel_text_color;
+    padding: .65rem 1rem;
+    vertical-align: middle;
+    border: 2px solid $tabs_bottom_border_color;
+    background-color: transparent;
+
+    &:focus-visible {
+      border-color: $panel_link_color !important;
+    }
+
+    &::placeholder {
+      color: rgba($panel_text_color, .5);
+    }
+
+    &[disabled] {
+      background-color: rgba($panel_text_color, .1);
+    }
+  }
+}
+
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+:not(.ck-source-editing-area) > textarea {
+  &:not([class^="ck"]) {
+    height: auto;
+    border-radius: $border_radius;
+  }
+}
+
+input,
+:not(.ck-source-editing-area) > textarea {
+  &:not([class^="ck"])::placeholder {
+    color: rgba($panel_text_color, .8);
+  }
+}
+
+// CKEditor 5
+.ck-reset_all:not(.ck-reset_all-excluded *),
+.ck.ck-reset,
+.ck.ck-reset_all {
+  color: initial;
+}
+
+.ck .btn.ck-link_selected {
+  background: var(--bs-btn-bg);
+}
+
+// Primary buttons.
+.button--primary,
+input[type="submit"].button--primary,
+input[type="submit"].media-library-open-button,
+input[type="submit"].button[data-drupal-selector^="edit-image"] {
+  font-size: 17px;
+  margin: 0;
+  padding: 11px 20px;
+  color: $button_primary_text_color;
+  background: $button_primary_bg_color !important;
+  min-width: auto;
+  width: 100%;
+  border-radius: $border_radius;
+  text-align: center;
+  font-weight: bold;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $button_primary_text_color;
+    background: $button_primary_bg_color_hover;
+  }
+
+  &:disabled,
+  &:disabled:active,
+  &.is-disabled,
+  &.is-disabled:active {
+    background: var(--gin-color-primary-active);
+  }
+}
+
+// Delete buttons.
+.button--danger {
+  color: $state_error;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: darken($state_error, 10%);
+  }
+
+  &:disabled,
+  &.is-disabled {
+    color: #737373;
+  }
+}
+
+#layout-builder-modal details[open] > summary:hover,
+#layout-builder-modal details[open] > summary,
+#layout-builder-modal summary[aria-expanded='true'],
+#layout-builder-modal summary:hover,
+#layout-builder-modal summary:focus {
+    color: var(--gin-color-primary-active);
+}
+
+#layout-builder-modal summary[aria-expanded='true']:after,
+#layout-builder-modal summary:hover:after,
+#layout-builder-modal summary:focus:after {
+    border-right-color: var(--gin-color-primary-active);
+    border-bottom-color: var(--gin-color-primary-active);
+}
\ No newline at end of file
diff --git a/scss/themes/light.scss b/scss/themes/light.scss
index 3c911b4..10ee1b8 100644
--- a/scss/themes/light.scss
+++ b/scss/themes/light.scss
@@ -1,9 +1,14 @@
 // Import default variables.
 @import "../variables";

+#drupal-off-canvas-wrapper {
+    --off-canvas-title-text-color: #474747;
+    --off-canvas-background-color-medium: #ffffff;
+}
+
 // Reset our theme color variables.
 // Colors
-$panel_text_color:          var(--off-canvas-background-color-medium);
+$panel_text_color:          var(--off-canvas-title-text-color);
 $panel_link_color:          $blue-26a;
 $panel_bg_color:            $white;

@@ -57,3 +62,30 @@ $border_preview_box_bg:     darken($panel_bg_color, 8%);

 // Import our components with our newly overridden vars from above.
 @import "common";
+
+
+#drupal-off-canvas {
+    .blb_breakpoint_col {
+        background-color: $gray-dbd !important;
+        color: $white !important;
+    }
+
+    .blb_breakpoint_cols input:checked + label .blb_breakpoint_col {
+        background-color: $blue-26a !important;
+        color: $white !important;
+    }
+
+    summary {
+        &[aria-expanded='true'],
+        &:hover,
+        &:focus {
+            color: $summary_link_color_hover;
+            background-color: $summary_bg_color_hover;
+
+            &:after {
+            border-right-color: $summary_link_color_hover;
+            border-bottom-color: $summary_link_color_hover;
+            }
+        }
+    }
+}
\ No newline at end of file