diff --git a/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js b/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js
index 05adbea27..88b49fd0c 100644
--- a/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js
+++ b/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js
@@ -10,6 +10,8 @@ import {CardLoader} from "../../navigation/Loader";
 const GeolocationsCard = ({data}) => {
     const {t} = useTranslation();
 
+    if (!data) return <CardLoader/>
+
     if (!data?.geolocations_enabled) {
         return (
             <div className="alert alert-warning mb-0" id="geolocation-warning">
@@ -19,8 +21,6 @@ const GeolocationsCard = ({data}) => {
         )
     }
 
-    if (!data) return <CardLoader/>
-
     return (
         <Card>
             <Card.Header>
diff --git a/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js b/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js
index b9d43b83c..62af23328 100644
--- a/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js
+++ b/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js
@@ -4,11 +4,12 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faCrosshairs} from "@fortawesome/free-solid-svg-icons";
 import KillsTable from "../../table/KillsTable";
 import React from "react";
+import {CardLoader} from "../../navigation/Loader";
 
 const PvpKillsTableCard = ({player_kills}) => {
     const {t} = useTranslation();
 
-    if (!player_kills) return <></>;
+    if (!player_kills) return <CardLoader/>;
 
     return (
         <Card>
diff --git a/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js b/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js
index bc32fb386..006e8e860 100644
--- a/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js
+++ b/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js
@@ -4,11 +4,12 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faClock} from "@fortawesome/free-regular-svg-icons";
 import WorldPie from "../../graphs/WorldPie";
 import React from "react";
+import {CardLoader} from "../../navigation/Loader";
 
 const WorldPieCard = ({worldSeries, gmSeries}) => {
     const {t} = useTranslation();
 
-    if (!worldSeries || !gmSeries) return <></>
+    if (!worldSeries || !gmSeries) return <CardLoader/>;
 
     return (
         <Card>
diff --git a/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js
index 9995de5f1..6185d6c0b 100644
--- a/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js
@@ -7,10 +7,11 @@ import SmallTrend from "../../../trend/SmallTrend";
 import {faCalendar, faCalendarPlus} from "@fortawesome/free-regular-svg-icons";
 import ComparingLabel from "../../../trend/ComparingLabel";
 import End from "../../../layout/End";
+import {CardLoader} from "../../../navigation/Loader";
 
 const OnlineActivityInsightsCard = ({data}) => {
     const {t} = useTranslation();
-    if (!data) return <></>
+    if (!data) return <CardLoader/>;
 
     return (
         <InsightsFor30DaysCard>
diff --git a/Plan/react/dashboard/src/components/cards/server/insights/PerformanceInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/PerformanceInsightsCard.js
index 93c4010f4..ea456b78e 100644
--- a/Plan/react/dashboard/src/components/cards/server/insights/PerformanceInsightsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/insights/PerformanceInsightsCard.js
@@ -3,10 +3,11 @@ import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
 import {useTranslation} from "react-i18next";
 import Datapoint from "../../../Datapoint";
 import {faDragon, faMap, faTachometerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
+import {CardLoader} from "../../../navigation/Loader";
 
 const PerformanceInsightsCard = ({data}) => {
     const {t} = useTranslation();
-    if (!data) return <></>
+    if (!data) return <CardLoader/>;
 
     return (
         <InsightsFor30DaysCard>
diff --git a/Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
index 064833f18..6233a2f96 100644
--- a/Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
@@ -3,11 +3,12 @@ import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
 import Datapoint from "../../../Datapoint";
 import {useTranslation} from "react-i18next";
 import {faKhanda} from "@fortawesome/free-solid-svg-icons";
+import {CardLoader} from "../../../navigation/Loader";
 
 const PvpPveInsightsCard = ({data}) => {
     const {t} = useTranslation();
 
-    if (!data) return <></>
+    if (!data) return <CardLoader/>;
 
     return (
         <InsightsFor30DaysCard>
diff --git a/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js
index 0b5ab1a72..8f60a3b03 100644
--- a/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js
@@ -4,10 +4,11 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faBookOpen} from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 import OnlineActivityAsNumbersTable from "../../../table/OnlineActivityAsNumbersTable";
+import {CardLoader} from "../../../navigation/Loader";
 
 const OnlineActivityAsNumbersCard = ({data}) => {
     const {t} = useTranslation();
-    if (!data) return <></>
+    if (!data) return <CardLoader/>;
 
     return (
         <Card>
diff --git a/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js b/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js
index 0fab9b3c1..55c483e62 100644
--- a/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js
@@ -7,10 +7,11 @@ import BigTrend from "../../../trend/BigTrend";
 import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
 import React from "react";
 import {TableRow} from "../../../table/TableRow";
+import {CardLoader} from "../../../navigation/Loader";
 
 const ServerWeekComparisonCard = ({data}) => {
     const {t} = useTranslation();
-    if (!data) return <></>;
+    if (!data) return <CardLoader/>;
     return (
         <Card>
             <Card.Header>
diff --git a/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js
index e5804e03f..902b36093 100644
--- a/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js
@@ -13,11 +13,12 @@ import {
 import Datapoint from "../../../Datapoint";
 import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
 import React from "react";
+import {CardLoader} from "../../../navigation/Loader";
 
 const ServerAsNumbersCard = ({data}) => {
     const {t} = useTranslation();
 
-    if (!data) return <></>;
+    if (!data) return <CardLoader/>;
 
     return (
         <Card>
diff --git a/Plan/react/dashboard/src/components/navigation/Sidebar.js b/Plan/react/dashboard/src/components/navigation/Sidebar.js
index b99b16eb8..a3a4a418f 100644
--- a/Plan/react/dashboard/src/components/navigation/Sidebar.js
+++ b/Plan/react/dashboard/src/components/navigation/Sidebar.js
@@ -23,7 +23,7 @@ const Divider = ({showMargin}) => (
     <hr className={"sidebar-divider" + (showMargin ? '' : " my-0")}/>
 )
 
-const InnerItem = ({href, icon, name, nameShort}) => {
+const InnerItem = ({href, icon, name, nameShort, color}) => {
     if (!href) {
         return (<hr className={"nav-servers dropdown-divider mx-3 my-2"}/>)
     }
@@ -31,7 +31,8 @@ const InnerItem = ({href, icon, name, nameShort}) => {
     if (href.startsWith('/')) {
         return (
             <a href={href} className="collapse-item nav-button">
-                <Fa icon={icon}/> <span>{nameShort ? nameShort : name}</span>
+                <Fa icon={icon} className={color ? "col-" + color : undefined}/>
+                <span>{nameShort ? nameShort : name}</span>
             </a>
         )
     }
@@ -39,11 +40,11 @@ const InnerItem = ({href, icon, name, nameShort}) => {
     return <NavLink to={href} className={({isActive}) => {
         return isActive ? "collapse-item nav-button active" : "collapse-item nav-button"
     }}>
-        <Fa icon={icon}/> <span>{nameShort ? nameShort : name}</span>
+        <Fa icon={icon} className={color ? "col-" + color : undefined}/> <span>{nameShort ? nameShort : name}</span>
     </NavLink>
 }
 
-const Item = ({href, icon, name, nameShort, inner}) => {
+const Item = ({href, icon, name, nameShort, color, inner}) => {
     const {setCurrentTab} = useNavigation();
     const {pathname} = useLocation();
     const {t} = useTranslation();
@@ -53,14 +54,15 @@ const Item = ({href, icon, name, nameShort, inner}) => {
     }, [pathname, href, setCurrentTab, name])
 
     if (inner) {
-        return (<InnerItem href={href} icon={icon} name={t(name)} nameShort={t(nameShort)}/>)
+        return (<InnerItem href={href} icon={icon} name={t(name)} nameShort={t(nameShort)} color={color}/>)
     }
 
     if (href.startsWith('/')) {
         return (
             <li className={"nav-item nav-button"}>
                 <a href={baseAddress + href} className="nav-link">
-                    <Fa icon={icon}/> <span>{t(nameShort ? nameShort : name)}</span>
+                    <Fa icon={icon} className={color ? "col-" + color : undefined}/>
+                    <span>{t(nameShort ? nameShort : name)}</span>
                 </a>
             </li>
         )
@@ -71,7 +73,7 @@ const Item = ({href, icon, name, nameShort, inner}) => {
             <NavLink to={href} className={({isActive}) => {
                 return isActive ? "nav-link active" : "nav-link"
             }}>
-                <Fa icon={icon}/> <span>{t(name)}</span>
+                <Fa icon={icon} className={color ? "col-" + color : undefined}/> <span>{t(name)}</span>
             </NavLink>
         </li>
     );
@@ -155,7 +157,8 @@ const SidebarCollapse = ({item, open, setOpen}) => {
                     aria-expanded={open}
                     data-bs-toggle="collapse"
             >
-                <Fa icon={item.icon}/> <span>{t(item.name)}</span>
+                <Fa icon={item.icon} className={item?.color ? "col-" + item?.color : undefined}/>
+                <span>{t(item.name)}</span>
             </button>
             <Collapse in={open}>
                 <div id={item.name + "-collapse"}>
@@ -168,6 +171,7 @@ const SidebarCollapse = ({item, open, setOpen}) => {
                                   icon={content.icon}
                                   name={content.name}
                                   nameShort={content.nameShort}
+                                  color={content.color}
                             />)}
                     </div>
                 </div>
@@ -190,6 +194,7 @@ const renderItem = (item, i, openCollapse, setOpenCollapse, t) => {
                      href={item.href}
                      icon={item.icon}
                      name={item.name}
+                     color={item.color}
                      nameShort={item.nameShort}
         />
     }
diff --git a/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js b/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js
index 4aa3c9be7..ee4c4dbc0 100644
--- a/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js
+++ b/Plan/react/dashboard/src/components/table/OnlineActivityAsNumbersTable.js
@@ -6,10 +6,11 @@ import ComparisonTable from "./ComparisonTable";
 import SmallTrend from "../trend/SmallTrend";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faCalendarCheck, faClock, faEye} from "@fortawesome/free-regular-svg-icons";
+import {CardLoader} from "../navigation/Loader";
 
 const OnlineActivityAsNumbersTable = ({data}) => {
     const {t} = useTranslation();
-    if (!data) return <></>;
+    if (!data) return <CardLoader/>;
 
     return (
         <ComparisonTable
diff --git a/Plan/react/dashboard/src/components/table/PerformanceAsNumbersTable.js b/Plan/react/dashboard/src/components/table/PerformanceAsNumbersTable.js
index c0142b717..ef4fc8dc4 100644
--- a/Plan/react/dashboard/src/components/table/PerformanceAsNumbersTable.js
+++ b/Plan/react/dashboard/src/components/table/PerformanceAsNumbersTable.js
@@ -14,10 +14,11 @@ import {TableRow} from "./TableRow";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faEye} from "@fortawesome/free-regular-svg-icons";
 import AsNumbersTable from "./AsNumbersTable";
+import {CardLoader} from "../navigation/Loader";
 
 const PerformanceAsNumbersTable = ({data}) => {
     const {t} = useTranslation();
-    if (!data) return <></>;
+    if (!data) return <CardLoader/>;
 
     return (
         <AsNumbersTable
diff --git a/Plan/react/dashboard/src/views/server/ServerOverview.js b/Plan/react/dashboard/src/views/server/ServerOverview.js
index cf5598e87..5cf8df260 100644
--- a/Plan/react/dashboard/src/views/server/ServerOverview.js
+++ b/Plan/react/dashboard/src/views/server/ServerOverview.js
@@ -12,11 +12,12 @@ import OnlineActivityCard from "../../components/cards/server/graphs/OnlineActiv
 import ServerAsNumbersCard from "../../components/cards/server/values/ServerAsNumbersCard";
 import ServerWeekComparisonCard from "../../components/cards/server/tables/ServerWeekComparisonCard";
 import LoadIn from "../../components/animation/LoadIn";
+import {CardLoader} from "../../components/navigation/Loader";
 
 const Last7DaysCard = ({data}) => {
     const {t} = useTranslation();
 
-    if (!data) return <></>;
+    if (!data) return <CardLoader/>;
 
     return (
         <Card>