diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue
index 4bbfac50..2b9cd329 100644
--- a/src/components/FullVue.vue
+++ b/src/components/FullVue.vue
@@ -86,7 +86,7 @@ export default defineComponent({
       if (isScrolling.value) {
         setTimeout(() => {
           isScrolling.value = false;
-        }, 600);
+        }, 800);
       }
     }
     function scrollUp() {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 98aab484..6b4c2b47 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,9 +33,9 @@ let portalStyle = reactive({});
 if (query["portal"] === "true") {
   // eslint-disable-next-line no-undef
   portalStyle = reactive({
-    "height": "100%",
-    "max-height": "375px",
-    "max-width": "800px",
+    height: "100%",
+    "max-height": "350px",
+    "max-width": "963px",
   });
 }
 
diff --git a/src/styles/jetbrains-dark.scss b/src/styles/jetbrains-dark.scss
index 7e218b0d..a9ff9d40 100644
--- a/src/styles/jetbrains-dark.scss
+++ b/src/styles/jetbrains-dark.scss
@@ -1,5 +1,5 @@
 :root {
-  --spp-white: #A9B7C6;
+  --spp-white: #808080;
   --spp-light-grey: #A9B7C6;
   --spp-grey: #A9B7C6;
   --spp-light-blue: #629755;
@@ -66,6 +66,7 @@
 
 .el-popper.is-light {
   background: var(--nice-black);
+  border: 1px solid var(--border-color) !important;
 }
 
 .micro-topo-chart .operations-list {
@@ -213,11 +214,20 @@
 
 .el-sub-menu__title {
   background-color: var(--spp-other-green) !important;
+
+  &:hover {
+    background-color: var(--dashboard-tool-background) !important;
+  }
+}
+
+.el-menu-item {
+  &:hover {
+    background-color: var(--dashboard-tool-background) !important;
+  }
 }
 
 .el-menu-item.is-active {
-  color: var(--spp-red) !important;
-  background-color: var(--menu-selected-color) !important;
+  background-color: var(--dashboard-tool-background) !important;
 }
 
 .bar-select {
@@ -231,7 +241,7 @@
 .nav-bar {
   background-color: var(--spp-darkest-green) !important;
   border-bottom: 1px solid var(--spp-darkest-green) !important;
-  color: var(--spp-white) !important;
+  color: var(--spp-light-grey) !important;
 }
 
 .nav-bar.dark {
@@ -241,11 +251,15 @@
 
 .tools {
   &:hover {
-    color: var(--spp-red) !important;
+    color: var(--spp-white) !important;
   }
 }
 
 .chart-card {
+  color: var(--spp-light-grey) !important;
+}
+
+.unit {
   color: var(--spp-white) !important;
 }
 
@@ -281,6 +295,10 @@
 }
 
 .tabs {
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
   input {
     background: inherit !important;
   }
@@ -308,7 +326,7 @@
 }
 
 .vue-grid-item.active {
-  border: 1px solid var(--spp-red) !important;
+  border: 1px solid var(--border-color) !important;
 }
 
 .vue-grid-layout {
@@ -319,10 +337,6 @@
   background: var(--spp-dark-green) !important;
 }
 
-.vue-grid-item.active {
-  border: 1px solid var(--spp-red) !important;
-}
-
 .dashboard-tool {
   background: var(--dashboard-tool-background) !important;
   border-bottom: 1px solid var(--border-color) !important;
@@ -362,7 +376,7 @@
 }
 
 .link {
-  color: var(--spp-red) !important;
+  color: var(--spp-light-grey) !important;
 }
 
 .dark-dialog {
@@ -412,3 +426,58 @@ a {
 .log-tips {
   color: red;
 }
+
+.el-progress-bar__outer {
+  background-color: var(--widget-background) !important;
+}
+
+.menu-control {
+  color: var(--spp-white) !important;
+}
+
+.el-notification {
+  background-color: var(--widget-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.el-notification__title {
+  color: var(--spp-white) !important;
+}
+
+.el-notification__content {
+  color: var(--spp-light-grey) !important;
+}
+
+.graph {
+  background-color: var(--widget-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.header,
+.footer {
+  background-color: var(--table-header-color) !important;
+  border-top: 1px solid var(--border-color) !important;
+}
+
+.el-collapse-item__header {
+  background-color: var(--spp-darkest-green) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.el-collapse-item__wrap {
+  background-color: var(--widget-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.el-collapse-item__content {
+  background-color: var(--dashboard-tool-background) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.attributes {
+  color: var(--spp-light-grey) !important;
+}
+
+.scroll-handler__wrapper .scroll-to.active {
+  background-color: var(--border-color) !important;
+}
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 56396450..4b625e7b 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -254,7 +254,7 @@ export default defineComponent({
       if (isScrolling.value) {
         setTimeout(() => {
           isScrolling.value = false;
-        }, 600);
+        }, 800);
       }
     }
     watch(
@@ -424,7 +424,7 @@ export default defineComponent({
   right: 0;
   top: 40vh;
   height: auto;
-  width: 20px;
+  width: 17px;
   .scroll-to {
     opacity: 0.5;
     width: 10px;
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index c6e4bc32..14942f47 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -253,14 +253,14 @@ export const QueryOrders = [
   { label: "Duration", value: "BY_DURATION" },
 ];
 export const TextColors: { [key: string]: string } = {
-  green: "#67C23A",
+  green: "#629755",
   blue: "#409EFF",
-  red: "#F56C6C",
+  red: "#e1483b",
   grey: "#909399",
   white: "#fff",
   black: "#000",
   orange: "#E6A23C",
-  purple: "#bf99f8",
+  purple: "#9876AA",
 };
 
 export const CalculationOpts = [
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 7b943af9..24b62665 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -118,7 +118,7 @@ function getOption() {
         "#9876AA",
         "#CC7832",
         "#8A653B",
-        "#FF0000",
+        "#e1483b",
         "#FFC66D",
       ];
       break;
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 93ac9d7d..60d90a8a 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -128,7 +128,7 @@ function getOption() {
         "#9876AA",
         "#CC7832",
         "#8A653B",
-        "#FF0000",
+        "#e1483b",
         "#FFC66D",
       ];
       break;
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 8fe0f72f..fbf6c43e 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -35,7 +35,7 @@ limitations under the License. -->
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        :color="TextColors[config.color || 'purple']"
+        :color="TextColors[config.color || 'red']"
         :show-text="false"
       />
     </div>
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index 7801f6e4..f7043126 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -46,7 +46,7 @@ limitations under the License. -->
                 <Icon
                   iconName="timeline"
                   size="middle"
-                  style="color: #409eff"
+                  style="color: #629755"
                 />
               </span>
             </template>