diff --git a/ui_src/src/assets/images/darkGraphOverview.png b/ui_src/src/assets/images/darkGraphOverview.png
new file mode 100644
index 000000000..016aeeb2f
Binary files /dev/null and b/ui_src/src/assets/images/darkGraphOverview.png differ
diff --git a/ui_src/src/assets/images/lightGraphOverview.png b/ui_src/src/assets/images/lightGraphOverview.png
new file mode 100644
index 000000000..6a6fbf364
Binary files /dev/null and b/ui_src/src/assets/images/lightGraphOverview.png differ
diff --git a/ui_src/src/components/selectThroughput/style.scss b/ui_src/src/components/selectThroughput/style.scss
index 30dfd3ef3..6b5f54c6a 100644
--- a/ui_src/src/components/selectThroughput/style.scss
+++ b/ui_src/src/components/selectThroughput/style.scss
@@ -28,6 +28,9 @@
             color: black;
             margin-left: 10px;
         }
+        .ant-select-selection-item {
+            display: block;
+        }
     }
 }
 .select-throughput-options {
diff --git a/ui_src/src/dark-style.scss b/ui_src/src/dark-style.scss
index 4f55b9927..4216fb544 100644
--- a/ui_src/src/dark-style.scss
+++ b/ui_src/src/dark-style.scss
@@ -2,694 +2,592 @@ $color-invert-filter: invert(1) hue-rotate(185deg);
 $color-invert-filter-reverse: invert(1) hue-rotate(-185deg);
 $color-background-dark: #151719;
 $color-text-light: #f1f1f1;
-$color-background-light: #dedcda;
-$color-background-medium: #cdcbc9;
+$color-background-light: #DEDCDA;
+$color-background-medium: #CDCBC9;
 $color-border-light: #c5c5c4;
 $color-border-medium: #afafad;
 $color-text-dark: #151719;
 $color-text-grey: #868686;
 
 html.dark-mode {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  overflow-x: hidden;
 
-    * {
-        box-sizing: inherit;
-    }
+  * {
+    box-sizing: inherit;
+  }
 
-    img {
-        filter: $color-invert-filter;
-    }
-
-    .menu-item,
-    .schema-name > *,
-    .station-name-overlow,
-    p {
-        color: initial;
-    }
-
-    body {
-        filter: $color-invert-filter;
-        background-color: $color-background-dark;
-        color: $color-text-light;
-
-        button,
-        .upgrade-button-wrapper,
-        .integration-name svg,
-        .memphis-gif svg,
-        .data-box svg,
-        .canvas-wrapper svg,
-        .circle-img svg,
-        .versions svg,
-        .logo-wrapper svg,
-        .schema-box-wrapper .is-used svg,
-        .station-meta svg,
-        .details-wrapper svg,
-        .item-wrap .icons svg,
-        .loader-uploading svg,
-        svg.lock-feature-icon,
-        .ant-modal-content button svg,
-        svg.icons-sidebar,
-        .station-overview-container svg,
-        .header-icon svg,
-        .header-img-container svg,
-        .integrate-header svg,
-        deatils downloads svg,
-        .git-repos-item .repo-item-icon-memphis,
-        .ant-drawer-header-title svg {
-            filter: $color-invert-filter-reverse;
-            background-color: initial;
-            color: initial;
-        }
+  img {
+    filter: $color-invert-filter;
+  }
 
-        svg.collapse-arrow-icon,
-        .collapse-arrow,
-        .messages-amount svg,
-        actions svg,
-        .ant-drawer-close svg {
-            filter: initial;
-        }
+  .menu-item, .schema-name > *, .station-name-overlow, p {
+    color: initial;
+  }
 
-        .bottom-sidebar-icons .item-wrap svg path {
-            fill: $color-text-dark !important;
-            filter: $color-invert-filter !important;
-        }
+  body {
+    filter: $color-invert-filter;
+    background-color: $color-background-dark;
+    color: $color-text-light;
 
-        .cloud-modal .header .cloud-gradient,
-        .get-started-modal .title-wrapper .title span,
-        .new-function-modal .title-wrapper .title span {
-            background: -webkit-linear-gradient(249deg, #6557ff 39.68%, #6557ff 60.07%);
-            background-clip: text;
-        }
+    button, .upgrade-button-wrapper, .integration-name svg, .memphis-gif svg, .data-box svg,
+    .canvas-wrapper svg, .circle-img svg, .versions svg, .logo-wrapper svg, .schema-box-wrapper .is-used svg,
+    .station-meta svg, .details-wrapper svg, .item-wrap .icons svg, .loader-uploading svg,
+    svg.lock-feature-icon, .ant-modal-content button svg, svg.icons-sidebar, .station-overview-container svg,
+    .header-icon svg, .header-img-container svg, .integrate-header svg, deatils downloads svg,
+    .git-repos-item .repo-item-icon-memphis, .ant-drawer-header-title svg {
+      filter: $color-invert-filter-reverse;
+      background-color: initial;
+      color: initial;
+    }
 
-        button svg.lock-feature-icon {
-            filter: initial;
-        }
+    svg.collapse-arrow-icon, .collapse-arrow, .messages-amount svg, actions svg, .ant-drawer-close svg {
+      filter: initial;
+    }
 
-        .schema-box-wrapper .is-used .not-used,
-        actions button span svg {
-            filter: $color-invert-filter-reverse;
-        }
+    .bottom-sidebar-icons .item-wrap svg path, {
+      fill: $color-text-dark !important;
+      filter: $color-invert-filter !important;
     }
 
-    .ant-popover-inner,
-    .stream-lineage-container .title-wrapper .refresh-wrapper,
-    .stream-lineage-container .title-wrapper .actions-wrapper .close-wrapper,
-    .ant-picker-panel-container,
-    .softwate-updates-container .item-component,
-    .function-box-wrapper,
-    .MuiMenu-paper,
-    .async-btn-container,
-    .update-refresh .refresh-btn {
-        box-shadow: none;
+    .cloud-modal .header .cloud-gradient, .get-started-modal .title-wrapper .title span,
+    .new-function-modal .title-wrapper .title span {
+      background: -webkit-linear-gradient(249deg, #6557ff 39.68%, #6557ff 60.07%);
+      background-clip: text;
     }
 
-    .sidebar-container {
-        background-color: $color-background-light;
-        border-color: #cdcbc9;
+    button svg.lock-feature-icon {
+      filter: initial;
     }
 
-    .app-container {
-        background-color: $color-background-light;
+    .schema-box-wrapper .is-used .not-used, actions button span svg {
+      filter: $color-invert-filter-reverse;
     }
+  }
+
+  .ant-popover-inner, .stream-lineage-container .title-wrapper .refresh-wrapper, .stream-lineage-container .title-wrapper .actions-wrapper .close-wrapper,
+  .ant-picker-panel-container, .softwate-updates-container .item-component, .function-box-wrapper, .MuiMenu-paper, .async-btn-container, .update-refresh .refresh-btn {
+    box-shadow: none;
+  }
+
+  .sidebar-container {
+    background-color: $color-background-light;
+    border-color: #CDCBC9;
+  }
 
-    .overview-container .overview-wrapper .overview-components-wrapper,
-    .station-box-container,
-    .pubSub-list-container,
-    .messages-container,
-    .station-overview-header .details .main-details,
-    .station-overview-header .details .icons-wrapper,
-    .station-overview-header .details .info-buttons {
+  .app-container {
+    background-color: $color-background-light;
+  }
+
+  .overview-container .overview-wrapper .overview-components-wrapper, .station-box-container, .pubSub-list-container, .messages-container,
+  .station-overview-header .details .main-details, .station-overview-header .details .icons-wrapper, .station-overview-header .details .info-buttons {
+    background-color: $color-background-medium;
+    border: none;
+    box-shadow: none;
+  }
+
+  .schema-container {
+    .schema-list {
+      .schema-box-wrapper {
         background-color: $color-background-medium;
         border: none;
         box-shadow: none;
-    }
 
-    .schema-container {
-        .schema-list {
-            .schema-box-wrapper {
-                background-color: $color-background-medium;
-                border: none;
-                box-shadow: none;
-
-                & date {
-                    border: none;
-                }
-
-                header,
-                type,
-                tags {
-                    border-color: $color-border-light;
-                }
-
-                .field-wrapper div,
-                .field-wrapper span {
-                    color: $color-text-dark;
-                }
-            }
+        & date {
+          border: none;
         }
-    }
 
-    .station-overview-container .pubSub-list-container .header,
-    .ant-tabs-top > .ant-tabs-nav::before,
-    .ant-tabs-bottom > .ant-tabs-nav::before,
-    .ant-tabs-top > div > .ant-tabs-nav::before,
-    .ant-tabs-bottom > div > .ant-tabs-nav::before,
-    .pubSub-list-container .coulmns-table,
-    .station-overview-header .details .info-buttons .audit {
-        border-color: $color-border-medium !important;
-    }
+        header, type, tags {
+          border-color: $color-border-light;
+        }
 
-    .configuration-list-container {
-        background-color: $color-background-light !important;
+        .field-wrapper div, .field-wrapper span {
+          color: $color-text-dark;
+        }
+      }
     }
+  }
 
-    .min-box span {
-        color: $color-text-dark;
-    }
+  .station-overview-container .pubSub-list-container .header, .ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before,
+  .pubSub-list-container .coulmns-table, .station-overview-header .details .info-buttons .audit, {
+    border-color: $color-border-medium !important;
+  }
 
-    .station-overview-container .waiting-placeholder .des {
-        color: $color-text-grey;
-    }
+  .configuration-list-container {
+    background-color: $color-background-light !important;
+  }
 
-    .station-overview-container .waiting-placeholder .button-container span {
-        color: $color-background-light !important;
-    }
+  .min-box span, {
+    color: $color-text-dark;
+  }
 
-    .station-function-overview .statistics-box-title,
-    .main-header-h1 .length-list {
-        color: $color-text-dark;
-    }
+  .station-overview-container .waiting-placeholder .des {
+    color: $color-text-grey;
+  }
 
-    .data-box span {
-        color: $color-text-dark !important;
-    }
+  .station-overview-container .waiting-placeholder .button-container span, {
+    color: $color-background-light !important;
+  }
 
-    .messages-container .top-switcher-btn,
-    .schema-box-wrapper,
-    .ant-tooltip-inner,
-    .ant-drawer-right > .ant-drawer-content-wrapper,
-    .function-container connectedRepos,
-    .select-options,
-    .ant-btn.ant-btn-primary {
-        box-shadow: none !important;
-    }
+  .station-function-overview .statistics-box-title, .main-header-h1 .length-list, {
+    color: $color-text-dark;
+  }
 
-    .create-schema-wrapper {
-        .header span,
-        .title-icon-img p.desc,
-        .schema-type .des span {
-            color: $color-text-grey !important;
-        }
-    }
+  .data-box span {
+    color: $color-text-dark !important;
+  }
 
-    .generic-details-container .data-box svg circle {
-        fill: transparent;
-    }
+  .messages-container .top-switcher-btn, .schema-box-wrapper, .ant-tooltip-inner, .ant-drawer-right > .ant-drawer-content-wrapper,
+  .function-container connectedRepos, .select-options, .ant-btn.ant-btn-primary {
+    box-shadow: none !important;
+  }
 
-    .station-overview-header .bottomRow .average-title {
-        color: $color-text-grey !important;
+  .create-schema-wrapper {
+    .header span, .title-icon-img p.desc, .schema-type .des span {
+      color: $color-text-grey !important;
     }
+  }
 
-    svg.icons-sidebar {
-        fill: #fff !important;
-    }
+  .generic-details-container .data-box svg circle {
+    fill: transparent;
+  }
 
-    .tags-list-wrapper .edit-tags {
-        background-color: $color-border-medium !important;
-    }
+  .station-overview-header .bottomRow .average-title {
+    color: $color-text-grey !important;
+  }
 
-    .function-container {
-        svg.attach-btn {
-            filter: $color-invert-filter-reverse;
-        }
+  svg.icons-sidebar {
+    fill: #fff !important;
+  }
 
-        label {
-            color: $color-text-dark;
-        }
+  .tags-list-wrapper .edit-tags {
+    background-color: $color-border-medium !important;
+  }
 
-        .ant-collapse-item {
-            background: transparent !important;
-        }
+  .function-container {
+    svg.attach-btn {
+      filter: $color-invert-filter-reverse;
     }
 
-    .stream-lineage-container .title-wrapper .refresh-wrapper svg,
-    .stream-lineage-container .title-wrapper .close-wrapper svg {
-        color: $color-text-dark;
+    label {
+      color: $color-text-dark;
     }
 
-    .stations-container .err-stations-list .coulmns-table,
-    .statistics-box,
-    functions-header,
-    .station-overview-container .details-wrapper.middle {
-        border-color: $color-border-medium !important;
+    .ant-collapse-item {
+      background: transparent !important;
     }
+  }
 
-    .overview-container .overview-wrapper .overview-components-wrapper .overview-components-header label,
-    .softwate-updates-container .item-component span,
-    .sub-header-dls,
-    .coulmns-table span,
-    .created-by,
-    .retention-storage-box .description,
-    .overview-components-header label,
-    .logs-container {
-        color: $color-text-grey !important;
-    }
+  .stream-lineage-container .title-wrapper .refresh-wrapper svg, .stream-lineage-container .title-wrapper .close-wrapper svg, {
+    color: $color-text-dark;
+  }
 
-    .external-monitoring label {
-        color: $color-text-grey;
-    }
+  .stations-container .err-stations-list .coulmns-table, .statistics-box, functions-header, .station-overview-container .details-wrapper.middle {
+    border-color: $color-border-medium !important;
+  }
 
-    .loader-container .gif-wrapper {
-        background: transparent !important;
-    }
+  .overview-container .overview-wrapper .overview-components-wrapper .overview-components-header label,
+  .softwate-updates-container .item-component span, .sub-header-dls, .coulmns-table span, .created-by,
+  .retention-storage-box .description, .overview-components-header label, .logs-container, {
+    color: $color-text-grey !important;
+  }
+
+  .external-monitoring label, {
+    color: $color-text-grey;
+  }
+
+  .loader-container .gif-wrapper {
+    background: transparent !important;
+  }
+
+  .ant-modal-content, .ant-modal-header, .search-input-container .ant-input-affix-wrapper, .ant-popover-content .ant-popover-inner,
+  .ant-drawer-content, .setting-items, .softwate-updates-container .item-component, .ant-popover-arrow-content, .ant-collapse-item,
+  .messages-container .top-switcher-btn.ms-active {
+    background-color: #E6EAE8 !important;
+    --antd-arrow-background-color: #E6EAE8 !important;
+  }
+
+  .ant-drawer-body .type-created .capitalize, .ant-drawer-body .type-created .wrapper div, .ant-drawer-body .type-created .wrapper span {
+    color: $color-text-dark !important;
+  }
 
-    .ant-modal-content,
-    .ant-modal-header,
-    .search-input-container .ant-input-affix-wrapper,
-    .ant-popover-content .ant-popover-inner,
-    .ant-drawer-content,
-    .setting-items,
-    .softwate-updates-container .item-component,
-    .ant-popover-arrow-content,
-    .ant-collapse-item,
-    .messages-container .top-switcher-btn.ms-active {
-        background-color: #e6eae8 !important;
-        --antd-arrow-background-color: #e6eae8 !important;
+  .function-container {
+    .code-btn {
+      label {
+        color: #fff;
+      }
+
+      img {
+        filter: brightness(100) invert(0);
+      }
     }
 
-    .ant-drawer-body .type-created .capitalize,
-    .ant-drawer-body .type-created .wrapper div,
-    .ant-drawer-body .type-created .wrapper span {
-        color: $color-text-dark !important;
+  }
+
+  .update-refresh .refresh-btn {
+    .refresh-icon-spin svg {
+      fill: #fff;
     }
 
-    .function-container {
-        .code-btn {
-            label {
-                color: #fff;
-            }
+    svg {
+      filter: $color-invert-filter-reverse;
 
-            img {
-                filter: brightness(100) invert(0);
-            }
-        }
+      path {
+        stroke: #fff;
+      }
     }
+  }
 
-    .update-refresh .refresh-btn {
-        .refresh-icon-spin svg {
-            fill: #fff;
-        }
+  .overview-container {
+    .stream-lineage-container {
+      background-color: $color-background-medium;
 
-        svg {
-            filter: $color-invert-filter-reverse;
+      .refresh-wrapper, .close-wrapper {
+        background: #E4E8E6;
+      }
+    }
 
-            path {
-                stroke: #fff;
-            }
-        }
+    .play-pause-btn, .segment-button-wrapper, .overview-usage-container .usage-body .usageLeft-side .totalContainer {
+      background: #E4E8E6;
     }
+  }
 
-    .overview-container {
-        .stream-lineage-container {
-            background-color: $color-background-medium;
+  .create-schema-wrapper .create-schema-form .right-side, .functions-empty, .ant-table {
+    background: #E4E8E6;
+  }
 
-            .refresh-wrapper,
-            .close-wrapper {
-                background: #e4e8e6;
-            }
-        }
+  .code-builder .ant-collapse-header {
+    background: darken(#E6EAE8, 1%);
+  }
 
-        .play-pause-btn,
-        .segment-button-wrapper,
-        .overview-usage-container .usage-body .usageLeft-side .totalContainer {
-            background: #e4e8e6;
-        }
+  .function-box-wrapper {
+    background: $color-background-medium !important;
+    border-color: transparent;
+
+    .button-container.uninstall-btn {
+      filter: $color-invert-filter-reverse;
     }
 
-    .create-schema-wrapper .create-schema-form .right-side,
-    .functions-empty,
-    .ant-table {
-        background: #e4e8e6;
+    footer {
+      border-color: $color-border-medium;
     }
 
-    .code-builder .ant-collapse-header {
-        background: darken(#e6eae8, 1%);
+    .function-name > * {
+      color: $color-text-dark !important;
     }
+  }
 
-    .function-box-wrapper {
-        background: $color-background-medium !important;
-        border-color: transparent;
+  .cloud-modal-btns > * {
+    filter: $color-invert-filter !important;
+  }
 
-        .button-container.uninstall-btn {
-            filter: $color-invert-filter-reverse;
-        }
+  .softwate-updates-container .change-log label, .softwate-updates-container .delete-account-section button span {
+    color: #fff !important;
+  }
 
-        footer {
-            border-color: $color-border-medium;
-        }
+  .softwate-updates-container button.ant-btn.ant-btn-primary span {
+    color: #fff !important;
+  }
 
-        .function-name > * {
-            color: $color-text-dark !important;
-        }
-    }
+  .ant-modal-body .buttons .button-container:first-child, .new-function-modal .footer .button-container:first-child {
+    filter: $color-invert-filter !important;
+  }
 
-    .cloud-modal-btns > * {
-        filter: $color-invert-filter !important;
-    }
+  .station-box-container .data-labels {
+    color: lighten($color-text-dark, 30%);
+  }
 
-    .softwate-updates-container .change-log label,
-    .softwate-updates-container .delete-account-section button span {
-        color: #fff !important;
-    }
+  .schema-container .action-section .button-container:first-child, .schema-container .action-section .button-container:nth-child(n-1),
+  .right-side .button-container {
+    filter: $color-invert-filter !important;
+  }
 
-    .softwate-updates-container button.ant-btn.ant-btn-primary span {
-        color: #fff !important;
-    }
+  .right-side .button-container:last-child {
+    filter: initial!important;
+  }
 
-    .ant-modal-body .buttons .button-container:first-child,
-    .new-function-modal .footer .button-container:first-child {
-        filter: $color-invert-filter !important;
-    }
+  .video-player {
+    filter: $color-invert-filter-reverse !important;
+  }
 
-    .station-box-container .data-labels {
-        color: lighten($color-text-dark, 30%);
-    }
+  integ-item {
+    background: #D1CFCD;
+  }
 
-    .schema-container .action-section .button-container:first-child,
-    .schema-container .action-section .button-container:nth-child(n-1),
-    .right-side .button-container {
-        filter: $color-invert-filter !important;
-    }
+  .stations-container .err-stations-list .rows-wrapper .even, .messages-container .list-wrapper .list .even .row-message,
+  .generic-list-wrapper .list .rows-wrapper .pubSub-row:nth-child(even), .messages-container .list-wrapper .even .row-message {
+    background: #D1CFCD;
+  }
 
-    .right-side .button-container:last-child {
-        filter: initial !important;
-    }
+  .stigg-plan-offering-container {
+    //background: lighten($color-background-dark, 80%);
+  }
 
-    .video-player {
-        filter: $color-invert-filter-reverse !important;
-    }
+  .message-wrapper .info-box {
+    background: #E4E8E6;
+    color: #000c17;
+  }
 
-    integ-item {
-        background: #d1cfcd;
+  .retention-storage-box {
+    .header {
+      background: darken(#E6EAE8, 1%);
     }
 
-    .stations-container .err-stations-list .rows-wrapper .even,
-    .messages-container .list-wrapper .list .even .row-message,
-    .generic-list-wrapper .list .rows-wrapper .pubSub-row:nth-child(even),
-    .messages-container .list-wrapper .even .row-message {
-        background: #d1cfcd;
+    .content {
+      background: darken(#E6EAE8, 2%);
     }
 
-    .stigg-plan-offering-container {
-        //background: lighten($color-background-dark, 80%);
+    .selecte-check-box-wrapper .option-wrapper {
+      background: darken(#E6EAE8, 3%);
+      border: none;
     }
 
-    .message-wrapper .info-box {
-        background: #e4e8e6;
-        color: #000c17;
+    .ant-radio-button-wrapper, .ant-input-number-handler-wrap {
+      background: darken(#E6EAE8, 1%);
     }
+  }
 
-    .retention-storage-box {
-        .header {
-            background: darken(#e6eae8, 1%);
-        }
+  .result-wrapper .result-container .result {
+    background: darken(#E6EAE8, 2%);
+  }
 
-        .content {
-            background: darken(#e6eae8, 2%);
-        }
+  .integration-guid-stepper .steps-content, .integration-guid-stepper .ant-collapse {
+    background: darken(#E6EAE8, 2%);
+  }
 
-        .selecte-check-box-wrapper .option-wrapper {
-            background: darken(#e6eae8, 3%);
-            border: none;
-        }
+  .stream-lineage-container .title-wrapper .actions-wrapper {
+    z-index: 9;
+  }
 
-        .ant-radio-button-wrapper,
-        .ant-input-number-handler-wrap {
-            background: darken(#e6eae8, 1%);
-        }
-    }
+  .overview-components-header img {
+    filter: initial;
+  }
 
-    .result-wrapper .result-container .result {
-        background: darken(#e6eae8, 2%);
-    }
+  .ms-function-card-inner, .station-function-overview functions-list .tab-functions-inner-add {
+    background: $color-background-light;
+  }
 
-    .integration-guid-stepper .steps-content,
-    .integration-guid-stepper .ant-collapse {
-        background: darken(#e6eae8, 2%);
+  .connector-modal-wrapper .ant-select-selector {
+    img {
+      filter: initial;
     }
+  }
 
-    .stream-lineage-container .title-wrapper .actions-wrapper {
-        z-index: 9;
+  .select-options {
+    img {
+      filter: initial;
     }
 
-    .overview-components-header img {
-        filter: initial;
+    background: darken(#E6EAE8, 2%);
+  }
+
+  .badgeGreen {
+    background: #86e1ac;
+  }
+
+  .badgeOrange {
+    background: #f5cfab;
+  }
+
+  .function-drawer-container {
+    .ant-tree {
+      background: transparent !important;
     }
 
-    .ms-function-card-inner,
-    .station-function-overview functions-list .tab-functions-inner-add {
-        background: $color-background-light;
+    .drawer-header svg {
+      filter: $color-invert-filter-reverse;
     }
 
-    .connector-modal-wrapper .ant-select-selector {
-        img {
-            filter: initial;
-        }
+    .action-section-btn .header-flex:nth-child(1), .action-section-btn .button-container:nth-child(2) button {
+      filter: none;
     }
+  }
 
-    .select-options {
-        img {
-            filter: initial;
-        }
+  .users-container .user-action .button-container button {
+    filter: initial;
+  }
 
-        background: darken(#e6eae8, 2%);
-    }
+  .ant-table-cell.ant-table-cell-row-hover {
+    background: darken(#E6EAE8, 3%) !important;
+  }
 
-    .badgeGreen {
-        background: #86e1ac;
-    }
+  .requests-container .usage-details .segment-data .tab-container, .stigg-customer-portal-subscriptions-overview, .stigg-payment-details-section-layout,
+  .stigg-invoices-section-layout {
+    background: darken(#E6EAE8, 2%) !important;
+  }
 
-    .badgeOrange {
-        background: #f5cfab;
-    }
+  .stigg-plan-offering-container, .stigg-period-picker-container {
+    background: darken(#E6EAE8, 2%);
+  }
 
-    .function-drawer-container {
-        .ant-tree {
-            background: transparent !important;
-        }
+  .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-plan-entitlements-container .stigg-plan-entitlements-title {
+    background: transparent !important;
+  }
 
-        .drawer-header svg {
-            filter: $color-invert-filter-reverse;
-        }
+  .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-header-wrapper .stigg-paywall-plan-button-layout button[disabled] {
+    filter: initial;
+  }
 
-        .action-section-btn .header-flex:nth-child(1),
-        .action-section-btn .button-container:nth-child(2) button {
-            filter: none;
-        }
-    }
+  .stream-lineage-container .title-wrapper .actions-wrapper .zoom-wrapper {
+    background: #E4E8E6;
+    box-shadow: none;
+  }
 
-    .users-container .user-action .button-container button {
-        filter: initial;
-    }
+  .overview-integrations-container .integrations-list .integration-item {
+    border-color: $color-border-medium;
+  }
 
-    .ant-table-cell.ant-table-cell-row-hover {
-        background: darken(#e6eae8, 3%) !important;
-    }
+  .ms-function-card-inner, .tab-functions-inner-add {
+    border-color: $color-border-light !important;
+  }
 
-    .requests-container .usage-details .segment-data .tab-container,
-    .stigg-customer-portal-subscriptions-overview,
-    .stigg-payment-details-section-layout,
-    .stigg-invoices-section-layout {
-        background: darken(#e6eae8, 2%) !important;
+  .ant-form-item {
+    .ant-select-selector, input {
+      background-color: transparent !important;
     }
+  }
 
-    .stigg-plan-offering-container,
-    .stigg-period-picker-container {
-        background: darken(#e6eae8, 2%);
-    }
+  schema-details .footer .left-side .button-container:first-child, schema-details .header .button-container, .form-button .button-container:first-child,
+  .support-container .close-button .button-container:first-child {
+    filter: $color-invert-filter-reverse;
+  }
 
-    .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-plan-entitlements-container .stigg-plan-entitlements-title {
-        background: transparent !important;
-    }
+  .anticon.anticon-close svg, .logs-wrapper .loader svg, .logs-wrapper .logs-loader svg {
+    filter: $color-invert-filter-reverse;
+  }
 
-    .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-header-wrapper .stigg-paywall-plan-button-layout button[disabled] {
-        filter: initial;
-    }
+  .users-container .users-list-container .ant-table-thead .ant-table-cell {
+    background: #E6EAE8;
+  }
 
-    .stream-lineage-container .title-wrapper .actions-wrapper .zoom-wrapper {
-        background: #e4e8e6;
-        box-shadow: none;
-    }
+  .logs-wrapper .placeholder p {
+    color: $color-text-grey !important;
+  }
 
-    .overview-integrations-container .integrations-list .integration-item {
-        border-color: $color-border-medium;
-    }
+  .log-content-wrapper log-header, .log-content-wrapper log-content {
+    border-color: $color-border-light !important;
+  }
 
-    .ms-function-card-inner,
-    .tab-functions-inner-add {
-        border-color: $color-border-light !important;
-    }
+  .logs-wrapper logs, .log-content-wrapper {
+    background: #D1CFCD;
+    box-shadow: none;
+  }
 
-    .ant-form-item {
-        .ant-select-selector,
-        input {
-            background-color: transparent !important;
-        }
-    }
+  .logs-wrapper .header-title-wrapper .button-container button, .collapse-footer .button-container:first-child button {
+    filter: none;
+  }
 
-    schema-details .footer .left-side .button-container:first-child,
-    schema-details .header .button-container,
-    .form-button .button-container:first-child,
-    .support-container .close-button .button-container:first-child {
-        filter: $color-invert-filter-reverse;
-    }
+  .ant-form-item-control-input-content .button-container {
+    display: none;
+  }
 
-    .anticon.anticon-close svg,
-    .logs-wrapper .loader svg,
-    .logs-wrapper .logs-loader svg {
-        filter: $color-invert-filter-reverse;
-        fill: #e6eae8;
-    }
+  .logs-wrapper logs .logsl .even .log-payload {
+    background: $color-background-light;
+  }
 
-    .users-container .users-list-container .ant-table-thead .ant-table-cell {
-        background: #e6eae8;
-    }
+  .log-badge-container .badge.warn {
+    background-color: rgb(160 128 22);
+  }
 
-    .logs-wrapper .placeholder p {
-        color: $color-text-grey !important;
-    }
+  .log-badge-container .badge.info {
+    background-color: #939595;
+  }
 
-    .log-content-wrapper log-header,
-    .log-content-wrapper log-content {
-        border-color: $color-border-light !important;
-    }
+  .log-badge-container .error {
+    background-color: rgb(228 128 102);
+  }
 
-    .logs-wrapper logs,
-    .log-content-wrapper {
-        background: #d1cfcd;
-        box-shadow: none;
-    }
+  input[type="text"], .ant-input-password, .ant-select.select, .install-copy {
+    border-color: $color-border-medium !important;
+  }
 
-    .logs-wrapper .header-title-wrapper .button-container button,
-    .collapse-footer .button-container:first-child button {
-        filter: none;
-    }
+  .ant-form-item-control-input-content .button-container:first-child button {
+    filter: none;
+  }
 
-    .ant-form-item-control-input-content .button-container {
-        display: none;
-    }
+  .item-wrapper.ms-active .icon svg, .item-wrapper.item-wrapper-hovered .icon svg, {
+    filter: $color-invert-filter-reverse !important;
+  }
 
-    .logs-wrapper logs .logsl .even .log-payload {
-        background: $color-background-light;
+  .message-detail-item {
+    .ant-collapse-content-box {
+      background: darken(#E6EAE8, 2%);
     }
-
-    .log-badge-container .badge.warn {
-        background-color: rgb(160 128 22);
+    label {
+      color: lighten($color-text-dark, 25%);
     }
-
-    .log-badge-container .badge.info {
-        background-color: #939595;
+    .content label:last-child {
+      color: $color-border-medium!important;
     }
+  }
 
-    .log-badge-container .error {
-        background-color: rgb(228 128 102);
-    }
+  .message-wrapper .message-detail-item .content {
+    color: lighten($color-text-dark, 25%);
+  }
 
-    input[type='text'],
-    .ant-input-password,
-    .ant-select.select,
-    .install-copy {
-        border-color: $color-border-medium !important;
+  .message-journey-container {
+    .canvas-wrapper svg {
+      filter: initial!important;
     }
-
-    .ant-form-item-control-input-content .button-container:first-child button {
-        filter: none;
+    .poison-producer, .poison-message, .consumer-group {
+      background: $color-background-medium;
     }
-
-    .item-wrapper.ms-active .icon svg,
-    .item-wrapper.item-wrapper-hovered .icon svg {
-        filter: $color-invert-filter-reverse !important;
+    .consumer-group .content-wrapper .details, .consumer-group .content-wrapper .consumers {
+      background: darken(#E6EAE8, 2%);
     }
-
-    .message-detail-item {
-        .ant-collapse-content-box {
-            background: darken(#e6eae8, 2%);
-        }
-        label {
-            color: lighten($color-text-dark, 25%);
-        }
-        .content label:last-child {
-            color: $color-border-medium !important;
-        }
+    .canvas-wrapper .producer {
+      stroke: rgba(101, 87, 255, 0.4);
     }
-
-    .message-wrapper .message-detail-item .content {
-        color: lighten($color-text-dark, 25%);
+    .canvas-wrapper .consumer {
+      stroke: rgba(255, 54, 36, 0.4);
     }
-
-    .message-journey-container {
-        .canvas-wrapper svg {
-            filter: initial !important;
-        }
-        .poison-producer,
-        .poison-message,
-        .consumer-group {
-            background: $color-background-medium;
-        }
-        .consumer-group .content-wrapper .details,
-        .consumer-group .content-wrapper .consumers {
-            background: darken(#e6eae8, 2%);
-        }
-        .canvas-wrapper .producer {
-            stroke: rgba(101, 87, 255, 0.4);
-        }
-        .canvas-wrapper .consumer {
-            stroke: rgba(255, 54, 36, 0.4);
-        }
-        .consumer-group header {
-            background: #f18e85;
-        }
+    .consumer-group header {
+      background: #f18e85;
     }
+  }
 
-    .connector-name svg,
-    .connector-options svg,
-    .connector-options-selected svg {
-        filter: initial !important;
-    }
+  .connector-name svg, .connector-options svg, .connector-options-selected svg, .ant-select-selection-item svg {
+    filter: initial!important;
+  }
 
-    .ant-select-dropdown .ant-select-item-option-content .Memphis img {
-        filter: $color-invert-filter-reverse !important;
-    }
+  .ant-select-dropdown .ant-select-item-option-content .Memphis img {
+    filter: $color-invert-filter-reverse!important;
+  }
 
-    .overview-container .overview-components-wrapper .stations-row .lottie-cloud svg {
-        filter: $color-invert-filter-reverse;
-    }
+  .overview-container .overview-components-wrapper .stations-row .lottie-cloud svg {
+    filter: $color-invert-filter-reverse;
+  }
 
-    .scrollable-wrapper .used-stations .button-container button svg {
-        filter: $color-invert-filter-reverse !important;
-    }
+  .scrollable-wrapper .used-stations .button-container button svg {
+    filter: $color-invert-filter-reverse!important;
+  }
 
-    .setting-container .setting-items .tab-container.active .tab,
-    .requests-container .usage-details .panel-container .requests-item .lavander {
-        background: rgb(101, 87, 255, 0.2) !important;
-    }
+  .setting-container .setting-items .tab-container.active .tab, .requests-container .usage-details .panel-container .requests-item .lavander {
+    background: rgb(101, 87, 255, .2)!important;
+  }
 
-    .ant-input::placeholder,
-    .ant-picker input::placeholder,
-    .ant-select-selection-placeholder {
-        color: #939595;
-    }
+  .ant-input::placeholder, .ant-picker input::placeholder, .ant-select-selection-placeholder {
+    color: #939595;
+  }
 
-    .customSelect-add-user-button .button-container {
-        filter: $color-invert-filter-reverse !important;
-    }
+  .customSelect-add-user-button .button-container, .ant-picker-header {
+    filter: $color-invert-filter-reverse!important;
+  }
 
-    .ant-picker {
-        box-shadow: none !important;
-        input::placeholder {
-        }
+  .ant-picker-header {
+    border-color: $color-text-grey!important;
+  }
+
+  .ant-picker {
+    box-shadow: none!important;
+    input::placeholder {
     }
-}
+  }
+
+  .overview-container .graphview-section svg, .cloud-teaser {
+    filter: $color-invert-filter-reverse!important;
+  }
+
+}
\ No newline at end of file
diff --git a/ui_src/src/domain/overview/index.js b/ui_src/src/domain/overview/index.js
index 36680e834..15531de36 100644
--- a/ui_src/src/domain/overview/index.js
+++ b/ui_src/src/domain/overview/index.js
@@ -26,7 +26,8 @@ import {
     USER_IMAGE
 } from 'const/localStorageConsts';
 import { ReactComponent as StationIcon } from 'assets/images/stationsIconActive.svg';
-import { ReactComponent as GraphOverview } from 'assets/images/graphOverview.svg';
+import GraphOverviewLight from 'assets/images/lightGraphOverview.png';
+import GraphOverviewDark from 'assets/images/darkGraphOverview.png';
 import { ReactComponent as CloudTeaser } from 'assets/images/cloudTeaser.svg';
 import { ReactComponent as PlusElement } from 'assets/images/plusElement.svg';
 import { ReactComponent as EditIcon } from 'assets/images/editIcon.svg';
@@ -334,7 +335,7 @@ function OverView() {
                                                         setCloudModalOpen(true);
                                                     }}
                                                 >
-                                                    <GraphOverview alt="Graph view" className="graphview-img" />
+                                                    <img className="graphview-img" src={(state?.darkMode ? GraphOverviewDark : GraphOverviewLight) || null} alt=""/>
                                                 </div>
                                             </div>
                                         </div>
diff --git a/ui_src/src/domain/overview/style.scss b/ui_src/src/domain/overview/style.scss
index 79d7e24a5..2ee9dd8ce 100644
--- a/ui_src/src/domain/overview/style.scss
+++ b/ui_src/src/domain/overview/style.scss
@@ -190,13 +190,16 @@
                 align-content: space-between;
                 display: grid;
                 grid-template-rows: 60% 38%;
-                position: relative;
                 .graphview-section {
                     height: calc(100% - 50px);
                     position: relative;
+                    overflow: hidden;
+                    max-width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
                     .graphview-img {
-                        height: 100%;
-                        width: 100%;
+                        max-width: 100%;
                         position: relative;
                         cursor: pointer;
                     }
diff --git a/ui_src/src/domain/overview/systemComponents/style.scss b/ui_src/src/domain/overview/systemComponents/style.scss
index c02bb1d72..90ba79d83 100644
--- a/ui_src/src/domain/overview/systemComponents/style.scss
+++ b/ui_src/src/domain/overview/systemComponents/style.scss
@@ -5,6 +5,7 @@
     padding: 15px;
     min-width: 280px;
     min-height: 250px;
+    overflow: hidden;
     .ant-tree-node-content-wrapper:hover {
         background-color: transparent;
         cursor: pointer;