diff --git a/View/CoGrouperLiteWidgets/display.ctp b/View/CoGrouperLiteWidgets/display.ctp
index 3d79ede..4a9ad29 100644
--- a/View/CoGrouperLiteWidgets/display.ctp
+++ b/View/CoGrouperLiteWidgets/display.ctp
@@ -30,11 +30,8 @@
  */
 
 $this->extend('/GrouperGroups/base');
-//echo $this->element('GrouperLiteWidget.base-styles');
-
 
 // Figure out the widget ID so we can overwrite the dashboard's widget div
-
 $divid = $vv_config['CoGrouperLiteWidget']['co_dashboard_widget_id'];
 $plugin = filter_var($vv_codw['CoDashboardWidget']['plugin'], FILTER_SANITIZE_SPECIAL_CHARS);
 $pl = Inflector::underscore($plugin);
diff --git a/View/Elements/base-styles.ctp b/View/Elements/base-styles.ctp
deleted file mode 100644
index 48ea5e2..0000000
--- a/View/Elements/base-styles.ctp
+++ /dev/null
@@ -1,140 +0,0 @@
-<style>
-    :root {
-        --red: #B32D2D;
-        --blue: #1D7AB4;
-        --green: #1D871D;
-        --orange: #faa732;
-        --teal: #1c6070;
-        --darkteal: #003f59;
-        --link: #0076a5;
-        --link-hover: #003f59;
-        --danger: var(--red);
-        --success: var(--green);
-        --primary: var(--teal);
-        --warning: var(--orange);
-        --secondary: var(--darkteal)
-    }
-
-    .text-grouper {
-        color: var(--primary);
-    }
-
-    .text-sml {
-        font-size: 0.8rem;
-    }
-
-    #content .material-icons.lg {
-        font-size: 1.2rem;
-    }
-
-    .grouper .btn:not(.btn-link) {
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
-        max-width: 220px;
-    }
-
-    .grouper .btn:not([disabled]):hover {
-        text-decoration: none !important;
-        filter: brightness(1.1);
-    }
-
-    .grouper .btn.btn-primary {
-        background-color: var(--primary);
-        border-color: var(--primary);
-    }
-
-    .grouper .btn.btn-success {
-        background-color: var(--success);
-        border-color: var(--success);
-    }
-
-    .grouper .btn.btn-danger {
-        background-color: var(--danger);
-        border-color: var(--danger);
-    }
-
-    .grouper .btn.btn-secondary {
-        background-color: var(--secondary);
-        border-color: var(--secondary);
-    }
-
-    .grouper .btn.btn-link,
-    .grouper a:not(.btn) {
-        color: var(--link);
-    }
-
-    .grouper .btn.btn-link:hover,
-    .grouper a:not(.btn):hover {
-        color: var(--link-hover);
-    }
-
-    #subscribers.loading .loader {
-        display: block;
-    }
-
-    #subscribers.loading .subs,
-    #subscribers.error .subs {
-        display: none;
-    }
-
-    #subscribers.error .msg {
-        display: block;
-    }
-
-    #subscribers .loader,
-    #subscribers .msg {
-        display: none;
-    }
-
-    .modal-open .ui-menu {
-        z-index: 2000;
-    }
-
-    #grouper-loader {
-        pointer-events: none;
-        width: 100px;
-        display: block;
-        margin: 0 auto;
-        overflow: visible;
-        padding: 15px;
-        max-width: 100%;
-    }
-
-    #grouper-loader circle {
-        transform-origin: center;
-        fill: var(--primary);
-        transition: ease;
-        animation-timing-function: ease-in-out !important;
-    }
-
-    #search {
-        background-color: #F6F6F6;
-    }
-
-    /* fade out half */
-
-    #grouper-loader.fade-out-half circle:nth-child(1) {
-        animation: fadeInHalf 0.9s -2.3s infinite reverse;
-    }
-
-    #grouper-loader.fade-out-half circle:nth-child(2) {
-        animation: fadeInHalf 0.9s -1.3s infinite reverse;
-    }
-
-    #grouper-loader.fade-out-half circle:nth-child(3) {
-        animation: fadeInHalf 0.9s -0.3s infinite reverse;
-    }
-
-    .popover {
-        max-width: 400px;
-    }
-
-    @keyframes fadeInHalf {
-        from {
-            opacity: 0.5;
-        }
-
-        to: {
-            opacity: 1;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/View/Elements/empty b/View/Elements/empty
new file mode 100644
index 0000000..e69de29
diff --git a/View/GrouperGroups/base.ctp b/View/GrouperGroups/base.ctp
index 5594560..e4805a2 100644
--- a/View/GrouperGroups/base.ctp
+++ b/View/GrouperGroups/base.ctp
@@ -17,7 +17,7 @@ print $this->Html->meta(
 );
 
 print $this->Html->script('GrouperLiteWidget.autocomplete.grouperplugin') . PHP_EOL;
-print $this->element('GrouperLiteWidget.base-styles');
+print $this->Html->css('GrouperLiteWidget.co-grouper-base') . PHP_EOL;
 print $this->Html->css('GrouperLiteWidget.co-grouper-plugin') . PHP_EOL;
 
 $this->Html->addCrumb(_txt('pl.grouperlite.crumb.root'),
diff --git a/webroot/css/co-grouper-base.css b/webroot/css/co-grouper-base.css
index 8080b7f..198212e 100644
--- a/webroot/css/co-grouper-base.css
+++ b/webroot/css/co-grouper-base.css
@@ -1,28 +1,138 @@
 :root {
-    --red: #CC3333;
+    --red: #B32D2D;
     --blue: #1D7AB4;
-    --green: #22AA22;
+    --green: #1D871D;
+    --orange: #faa732;
     --teal: #1c6070;
+    --darkteal: #003f59;
+    --link: #0076a5;
+    --link-hover: #003f59;
     --danger: var(--red);
     --success: var(--green);
     --primary: var(--teal);
+    --warning: var(--orange);
+    --secondary: var(--darkteal)
+}
+
+.text-grouper {
+    color: var(--primary);
+}
+
+.text-sml {
+    font-size: 0.8rem;
+}
+
+#content .material-icons.lg {
+    font-size: 1.2rem;
+}
+
+.grouper .btn:not(.btn-link) {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    max-width: 220px;
+}
+
+.grouper .btn:not([disabled]):hover {
+    text-decoration: none !important;
+    filter: brightness(1.1);
 }
 
 .grouper .btn.btn-primary {
     background-color: var(--primary);
     border-color: var(--primary);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 }
 
-.grouper .btn.btn-success.btn-grouper {
+.grouper .btn.btn-success {
     background-color: var(--success);
     border-color: var(--success);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 }
 
-.grouper .btn.btn-danger.btn-grouper {
+.grouper .btn.btn-danger {
     background-color: var(--danger);
     border-color: var(--danger);
-    color: white;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+.grouper .btn.btn-secondary {
+    background-color: var(--secondary);
+    border-color: var(--secondary);
+}
+
+.grouper .btn.btn-link,
+.grouper a:not(.btn) {
+    color: var(--link);
+}
+
+.grouper .btn.btn-link:hover,
+.grouper a:not(.btn):hover {
+    color: var(--link-hover);
+}
+
+#subscribers.loading .loader {
+    display: block;
+}
+
+#subscribers.loading .subs,
+#subscribers.error .subs {
+    display: none;
+}
+
+#subscribers.error .msg {
+    display: block;
+}
+
+#subscribers .loader,
+#subscribers .msg {
+    display: none;
+}
+
+.modal-open .ui-menu {
+    z-index: 2000;
+}
+
+#grouper-loader {
+    pointer-events: none;
+    width: 100px;
+    display: block;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 15px;
+    max-width: 100%;
+}
+
+#grouper-loader circle {
+    transform-origin: center;
+    fill: var(--primary);
+    transition: ease;
+    animation-timing-function: ease-in-out !important;
+}
+
+#search {
+    background-color: #F6F6F6;
+}
+
+/* fade out half */
+
+#grouper-loader.fade-out-half circle:nth-child(1) {
+    animation: fadeInHalf 0.9s -2.3s infinite reverse;
+}
+
+#grouper-loader.fade-out-half circle:nth-child(2) {
+    animation: fadeInHalf 0.9s -1.3s infinite reverse;
+}
+
+#grouper-loader.fade-out-half circle:nth-child(3) {
+    animation: fadeInHalf 0.9s -0.3s infinite reverse;
+}
+
+.popover {
+    max-width: 400px;
+}
+
+@keyframes fadeInHalf {
+    from {
+        opacity: 0.5;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
\ No newline at end of file