diff --git a/Plan/react/dashboard/src/App.js b/Plan/react/dashboard/src/App.js
index 97766a5c4..748928d6a 100644
--- a/Plan/react/dashboard/src/App.js
+++ b/Plan/react/dashboard/src/App.js
@@ -4,12 +4,12 @@ import './style/style.css';
 
 import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
 import React from "react";
-import PlayerPage from "./views/PlayerPage";
-import PlayerOverview from "./views/PlayerOverview";
-import PlayerSessions from "./views/PlayerSessions";
-import PlayerPvpPve from "./views/PlayerPvpPve";
-import PlayerServers from "./views/PlayerServers";
-import PlayerPluginData from "./views/PlayerPluginData";
+import PlayerPage from "./views/layout/PlayerPage";
+import PlayerOverview from "./views/player/PlayerOverview";
+import PlayerSessions from "./views/player/PlayerSessions";
+import PlayerPvpPve from "./views/player/PlayerPvpPve";
+import PlayerServers from "./views/player/PlayerServers";
+import PlayerPluginData from "./views/player/PlayerPluginData";
 import {ThemeContextProvider} from "./hooks/themeHook";
 import axios from "axios";
 import ErrorView from "./views/ErrorView";
@@ -17,13 +17,13 @@ import {faMapSigns} from "@fortawesome/free-solid-svg-icons";
 import {MetadataContextProvider} from "./hooks/metadataHook";
 import {AuthenticationContextProvider} from "./hooks/authenticationHook";
 import {NavigationContextProvider} from "./hooks/navigationHook";
-import ServerPage from "./views/ServerPage";
-import ServerOverview from "./views/ServerOverview";
+import ServerPage from "./views/layout/ServerPage";
+import ServerOverview from "./views/server/ServerOverview";
 import MainPageRedirect from "./components/navigation/MainPageRedirect";
-import ServerOnlineActivity from "./views/ServerOnlineActivity";
-import ServerSessions from "./views/ServerSessions";
-import ServerPvpPve from "./views/ServerPvpPve";
-import ServerPlayerbaseOverview from "./views/ServerPlayerbaseOverview";
+import OnlineActivity from "./views/server/OnlineActivity";
+import ServerSessions from "./views/server/ServerSessions";
+import ServerPvpPve from "./views/server/ServerPvpPve";
+import PlayerbaseOverview from "./views/server/PlayerbaseOverview";
 
 const OverviewRedirect = () => {
     return (<Navigate to={"overview"} replace={true}/>)
@@ -67,10 +67,10 @@ function App() {
                             <Route path="/server/:identifier" element={<ServerPage/>}>
                                 <Route path="" element={<OverviewRedirect/>}/>
                                 <Route path="overview" element={<ServerOverview/>}/>
-                                <Route path="online-activity" element={<ServerOnlineActivity/>}/>
+                                <Route path="online-activity" element={<OnlineActivity/>}/>
                                 <Route path="sessions" element={<ServerSessions/>}/>
                                 <Route path="pvppve" element={<ServerPvpPve/>}/>
-                                <Route path="playerbase" element={<ServerPlayerbaseOverview/>}/>
+                                <Route path="playerbase" element={<PlayerbaseOverview/>}/>
                                 <Route path="retention" element={<></>}/>
                                 <Route path="players" element={<></>}/>
                                 <Route path="geolocations" element={<></>}/>
diff --git a/Plan/react/dashboard/src/components/Datapoint.js b/Plan/react/dashboard/src/components/Datapoint.js
index fce141219..6328fab74 100644
--- a/Plan/react/dashboard/src/components/Datapoint.js
+++ b/Plan/react/dashboard/src/components/Datapoint.js
@@ -5,14 +5,14 @@ const End = ({children}) => (
     <span className="float-end">{children}</span>
 )
 
-const Datapoint = ({icon, color, name, value, valueLabel, bold, boldTitle, title}) => {
+const Datapoint = ({icon, color, name, value, valueLabel, bold, boldTitle, title, trend}) => {
     const displayedValue = bold ? <b>{value}</b> : value;
-    const extraLabel = valueLabel ? ` (${valueLabel})` : '';
+    const extraLabel = valueLabel instanceof String ? ` (${valueLabel})` : '';
     const colorClass = color && color.startsWith("col-") ? color : "col-" + color;
     return (
         <p title={title ? title : name + " is " + value}>
-            <Fa icon={icon} className={colorClass}/> {boldTitle ? <b>{name}</b> : name}
-            {value !== undefined ? <End>{displayedValue} {extraLabel}</End> : ''}
+            {icon && <Fa icon={icon} className={colorClass}/>} {boldTitle ? <b>{name}</b> : name}
+            {value !== undefined ? <End>{displayedValue} {extraLabel}{trend}</End> : ''}
         </p>
     );
 }
diff --git a/Plan/react/dashboard/src/components/cards/server/CurrentPlayerbaseCard.js b/Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.js
similarity index 81%
rename from Plan/react/dashboard/src/components/cards/server/CurrentPlayerbaseCard.js
rename to Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.js
index d7dbd9f1d..49d8e82bf 100644
--- a/Plan/react/dashboard/src/components/cards/server/CurrentPlayerbaseCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.js
@@ -1,8 +1,8 @@
 import React from "react";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../../../hooks/dataFetchHook";
-import {fetchPlayerbaseDevelopmentGraph} from "../../../service/serverService";
-import {ErrorViewBody} from "../../../views/ErrorView";
+import {useDataRequest} from "../../../../hooks/dataFetchHook";
+import {fetchPlayerbaseDevelopmentGraph} from "../../../../service/serverService";
+import {ErrorViewBody} from "../../../../views/ErrorView";
 import {useTranslation} from "react-i18next";
 import {Card} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
diff --git a/Plan/react/dashboard/src/components/cards/server/OnlineActivityCard.js b/Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityCard.js
similarity index 78%
rename from Plan/react/dashboard/src/components/cards/server/OnlineActivityCard.js
rename to Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityCard.js
index c17993232..0ed736b0c 100644
--- a/Plan/react/dashboard/src/components/cards/server/OnlineActivityCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityCard.js
@@ -1,12 +1,12 @@
 import {useTranslation} from "react-i18next";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../../../hooks/dataFetchHook";
-import {fetchPlayersOnlineGraph} from "../../../service/serverService";
-import {ErrorViewCard} from "../../../views/ErrorView";
+import {useDataRequest} from "../../../../hooks/dataFetchHook";
+import {fetchPlayersOnlineGraph} from "../../../../service/serverService";
+import {ErrorViewCard} from "../../../../views/ErrorView";
 import {Card} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faChartArea} from "@fortawesome/free-solid-svg-icons";
-import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph";
+import PlayersOnlineGraph from "../../../graphs/PlayersOnlineGraph";
 import React from "react";
 
 const OnlineActivityCard = () => {
diff --git a/Plan/react/dashboard/src/components/cards/server/OnlineActivityGraphsCard.js b/Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityGraphsCard.js
similarity index 86%
rename from Plan/react/dashboard/src/components/cards/server/OnlineActivityGraphsCard.js
rename to Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityGraphsCard.js
index fb43d4b95..f65cfbec4 100644
--- a/Plan/react/dashboard/src/components/cards/server/OnlineActivityGraphsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/graphs/OnlineActivityGraphsCard.js
@@ -1,21 +1,21 @@
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../../../hooks/dataFetchHook";
+import {useDataRequest} from "../../../../hooks/dataFetchHook";
 import {
     fetchDayByDayGraph,
     fetchHourByHourGraph,
     fetchPunchCardGraph,
     fetchServerCalendarGraph
-} from "../../../service/serverService";
-import {ErrorViewBody} from "../../../views/ErrorView";
-import PunchCard from "../../graphs/PunchCard";
+} from "../../../../service/serverService";
+import {ErrorViewBody} from "../../../../views/ErrorView";
+import PunchCard from "../../../graphs/PunchCard";
 import {useTranslation} from "react-i18next";
 import {Card} from "react-bootstrap-v5";
-import CardTabs from "../../CardTabs";
+import CardTabs from "../../../CardTabs";
 import {faBraille, faChartArea} from "@fortawesome/free-solid-svg-icons";
 import {faCalendar} from "@fortawesome/free-regular-svg-icons";
 import React from "react";
-import TimeByTimeGraph from "../../graphs/TimeByTimeGraph";
-import ServerCalendar from "../../calendar/ServerCalendar";
+import TimeByTimeGraph from "../../../graphs/TimeByTimeGraph";
+import ServerCalendar from "../../../calendar/ServerCalendar";
 
 const DayByDayTab = () => {
     const {identifier} = useParams();
diff --git a/Plan/react/dashboard/src/components/cards/server/PlayerbaseDevelopmentCard.js b/Plan/react/dashboard/src/components/cards/server/graphs/PlayerbaseDevelopmentCard.js
similarity index 78%
rename from Plan/react/dashboard/src/components/cards/server/PlayerbaseDevelopmentCard.js
rename to Plan/react/dashboard/src/components/cards/server/graphs/PlayerbaseDevelopmentCard.js
index 93b27b22d..076d19e05 100644
--- a/Plan/react/dashboard/src/components/cards/server/PlayerbaseDevelopmentCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/graphs/PlayerbaseDevelopmentCard.js
@@ -1,12 +1,12 @@
 import {useTranslation} from "react-i18next";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../../../hooks/dataFetchHook";
-import {fetchPlayerbaseDevelopmentGraph} from "../../../service/serverService";
-import {ErrorViewCard} from "../../../views/ErrorView";
+import {useDataRequest} from "../../../../hooks/dataFetchHook";
+import {fetchPlayerbaseDevelopmentGraph} from "../../../../service/serverService";
+import {ErrorViewCard} from "../../../../views/ErrorView";
 import {Card} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faChartLine} from "@fortawesome/free-solid-svg-icons";
-import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph";
+import PlayersOnlineGraph from "../../../graphs/PlayersOnlineGraph";
 import React from "react";
 
 const PlayerbaseDevelopmentCard = () => {
diff --git a/Plan/react/dashboard/src/components/cards/server/ServerWorldPieCard.js b/Plan/react/dashboard/src/components/cards/server/graphs/ServerWorldPieCard.js
similarity index 67%
rename from Plan/react/dashboard/src/components/cards/server/ServerWorldPieCard.js
rename to Plan/react/dashboard/src/components/cards/server/graphs/ServerWorldPieCard.js
index 8259049b2..17c11d29b 100644
--- a/Plan/react/dashboard/src/components/cards/server/ServerWorldPieCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/graphs/ServerWorldPieCard.js
@@ -1,9 +1,9 @@
 import React from "react";
-import WorldPieCard from "../common/WorldPieCard";
+import WorldPieCard from "../../common/WorldPieCard";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../../../hooks/dataFetchHook";
-import {fetchWorldPie} from "../../../service/serverService";
-import {ErrorViewBody} from "../../../views/ErrorView";
+import {useDataRequest} from "../../../../hooks/dataFetchHook";
+import {fetchWorldPie} from "../../../../service/serverService";
+import {ErrorViewBody} from "../../../../views/ErrorView";
 
 const ServerWorldPieCard = () => {
     const {identifier} = useParams();
diff --git a/Plan/react/dashboard/src/components/cards/server/OnlineActivityInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js
similarity index 75%
rename from Plan/react/dashboard/src/components/cards/server/OnlineActivityInsightsCard.js
rename to Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js
index 28ac8ff2f..684b3db0d 100644
--- a/Plan/react/dashboard/src/components/cards/server/OnlineActivityInsightsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/insights/OnlineActivityInsightsCard.js
@@ -1,5 +1,5 @@
 import React from "react";
-import InsightsFor30DaysCard from "../common/InsightsFor30DaysCard";
+import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
 
 const OnlineActivityInsightsCard = () => {
     return (
diff --git a/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js
new file mode 100644
index 000000000..b261bcee3
--- /dev/null
+++ b/Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js
@@ -0,0 +1,42 @@
+import React from "react";
+import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
+import {useTranslation} from "react-i18next";
+import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
+import Datapoint from "../../../Datapoint";
+import {faLongArrowAltRight, faUser} from "@fortawesome/free-solid-svg-icons";
+import SmallTrend from "../../../trend/SmallTrend";
+
+const TwoPlayerChange = ({colorBefore, labelBefore, colorAfter, labelAfter}) => {
+    return (
+        <>
+            <Fa icon={faUser} className={`col-${colorBefore}`}/>{' '}{labelBefore}
+            {' '}<Fa icon={faLongArrowAltRight}/>{' '}
+            <Fa icon={faUser} className={`col-${colorAfter}`}/>{' '}{labelAfter}
+        </>
+    )
+}
+
+const PlayerbaseInsightsCard = ({data}) => {
+    const {t} = useTranslation();
+    if (!data) return <></>;
+    return (
+        <InsightsFor30DaysCard>
+            <Datapoint name={<TwoPlayerChange colorBefore={'light-green'}
+                                              labelBefore={t('html.label.new')}
+                                              colorAfter={'lime'}
+                                              labelAfter={t('html.label.regular')}/>}
+                       value={data.new_to_regular}
+                       trend={<SmallTrend trend={data.new_to_regular_trend}/>}
+            />
+            <Datapoint name={<TwoPlayerChange colorBefore={'lime'}
+                                              labelBefore={t('html.label.regular')}
+                                              colorAfter={'bluegray'}
+                                              labelAfter={t('html.label.inactive')}/>}
+                       value={data.regular_to_inactive}
+                       trend={<SmallTrend trend={data.regular_to_inactive_trend}/>}
+            />
+        </InsightsFor30DaysCard>
+    )
+}
+
+export default PlayerbaseInsightsCard;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/components/cards/server/PvpPveInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
similarity index 73%
rename from Plan/react/dashboard/src/components/cards/server/PvpPveInsightsCard.js
rename to Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
index e1c5ed6db..0e1c850f4 100644
--- a/Plan/react/dashboard/src/components/cards/server/PvpPveInsightsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
@@ -1,5 +1,5 @@
 import React from "react";
-import InsightsFor30DaysCard from "../common/InsightsFor30DaysCard";
+import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
 
 const PvpPveInsightsCard = () => {
     return (
diff --git a/Plan/react/dashboard/src/components/cards/server/SessionInsightsCard.js b/Plan/react/dashboard/src/components/cards/server/insights/SessionInsightsCard.js
similarity index 73%
rename from Plan/react/dashboard/src/components/cards/server/SessionInsightsCard.js
rename to Plan/react/dashboard/src/components/cards/server/insights/SessionInsightsCard.js
index cd6ae15cc..213f0d91c 100644
--- a/Plan/react/dashboard/src/components/cards/server/SessionInsightsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/insights/SessionInsightsCard.js
@@ -1,5 +1,5 @@
 import React from "react";
-import InsightsFor30DaysCard from "../common/InsightsFor30DaysCard";
+import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
 
 const SessionInsightsCard = () => {
     return (
diff --git a/Plan/react/dashboard/src/components/cards/server/OnlineActivityAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js
similarity index 88%
rename from Plan/react/dashboard/src/components/cards/server/OnlineActivityAsNumbersCard.js
rename to Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js
index 033f8e575..31b5f8779 100644
--- a/Plan/react/dashboard/src/components/cards/server/OnlineActivityAsNumbersCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/tables/OnlineActivityAsNumbersCard.js
@@ -3,7 +3,7 @@ import {Card} from "react-bootstrap-v5";
 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 OnlineActivityAsNumbersTable from "../../../table/OnlineActivityAsNumbersTable";
 
 const OnlineActivityAsNumbersCard = () => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js b/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js
new file mode 100644
index 000000000..cd0095b9b
--- /dev/null
+++ b/Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js
@@ -0,0 +1,52 @@
+import {useTranslation} from "react-i18next";
+import {Card} from "react-bootstrap-v5";
+import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
+import {faExchangeAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
+import ComparisonTable from "../../../table/ComparisonTable";
+import {TableRow} from "../../../table/AsNumbersTable";
+import BigTrend from "../../../trend/BigTrend";
+import React from "react";
+import {faClock} from "@fortawesome/free-regular-svg-icons";
+
+const PlayerbaseTrendsCard = ({data}) => {
+    const {t} = useTranslation();
+    if (!data) return <></>;
+    return (
+        <Card>
+            <Card.Header>
+                <h6 className="col-black">
+                    <Fa icon={faExchangeAlt} className="col-amber"/> {t('html.label.trends30days')}
+                </h6>
+            </Card.Header>
+            <ComparisonTable comparisonHeader={t('html.text.comparing30daysAgo')}
+                             headers={[t('html.label.thirtyDaysAgo'), t('html.label.now'), t('html.label.trend')]}>
+                <TableRow icon={faUsers} color="black" text={t('html.label.totalPlayers')}
+                          values={[data.total_players_now, data.total_players_then,
+                              <BigTrend trend={data.total_players_trend}/>]}/>
+                <TableRow icon={faUsers} color="lime" text={t('html.label.regularPlayers')}
+                          values={[data.regular_players_now, data.regular_players_then,
+                              <BigTrend trend={data.regular_players_trend}/>]}/>
+                <TableRow icon={faClock} color="green"
+                          text={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
+                          values={[data.playtime_avg_now, data.playtime_avg_then,
+                              <BigTrend trend={data.playtime_avg_trend}/>]}/>
+                <TableRow icon={faClock} color="gray" text={t('html.label.afk') + ' ' + t('html.label.perPlayer')}
+                          values={[data.afk_now, data.afk_then, <BigTrend trend={data.afk_trend}/>]}/>
+                <TableRow icon={faClock} color="green"
+                          text={t('html.label.averagePlaytime') + ' ' + t('html.label.perRegularPlayer')}
+                          values={[data.regular_playtime_avg_now, data.regular_playtime_avg_then,
+                              <BigTrend trend={data.regular_playtime_avg_trend}/>]}/>
+                <TableRow icon={faClock} color="teal"
+                          text={t('html.label.averageSessionLength') + ' ' + t('html.label.perRegularPlayer')}
+                          values={[data.regular_session_avg_now, data.regular_session_avg_then,
+                              <BigTrend trend={data.regular_session_avg_trend}/>]}/>
+                <TableRow icon={faClock} color="gray"
+                          text={t('html.label.afk') + ' ' + t('html.label.perRegularPlayer')}
+                          values={[data.regular_afk_avg_now, data.regular_afk_avg_then,
+                              <BigTrend trend={data.regular_afk_avg_trend}/>]}/>
+            </ComparisonTable>
+        </Card>
+    )
+}
+
+export default PlayerbaseTrendsCard
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/components/cards/server/PvpPveAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/server/tables/PvpPveAsNumbersCard.js
similarity index 89%
rename from Plan/react/dashboard/src/components/cards/server/PvpPveAsNumbersCard.js
rename to Plan/react/dashboard/src/components/cards/server/tables/PvpPveAsNumbersCard.js
index 9a18be361..28200431f 100644
--- a/Plan/react/dashboard/src/components/cards/server/PvpPveAsNumbersCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/tables/PvpPveAsNumbersCard.js
@@ -3,7 +3,7 @@ import {Card} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faCampground} from "@fortawesome/free-solid-svg-icons";
 import React from "react";
-import ServerPvpPveAsNumbersTable from "../../table/ServerPvpPveAsNumbersTable";
+import ServerPvpPveAsNumbersTable from "../../../table/ServerPvpPveAsNumbersTable";
 
 const PvpPveAsNumbersCard = ({kill_data}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/components/cards/server/ServerRecentSessionsCard.js b/Plan/react/dashboard/src/components/cards/server/tables/ServerRecentSessionsCard.js
similarity index 64%
rename from Plan/react/dashboard/src/components/cards/server/ServerRecentSessionsCard.js
rename to Plan/react/dashboard/src/components/cards/server/tables/ServerRecentSessionsCard.js
index e495720a8..891e67d79 100644
--- a/Plan/react/dashboard/src/components/cards/server/ServerRecentSessionsCard.js
+++ b/Plan/react/dashboard/src/components/cards/server/tables/ServerRecentSessionsCard.js
@@ -1,9 +1,9 @@
 import React from "react";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../../../hooks/dataFetchHook";
-import {fetchSessions} from "../../../service/serverService";
-import {ErrorViewBody} from "../../../views/ErrorView";
-import RecentSessionsCard from "../common/RecentSessionsCard";
+import {useDataRequest} from "../../../../hooks/dataFetchHook";
+import {fetchSessions} from "../../../../service/serverService";
+import {ErrorViewBody} from "../../../../views/ErrorView";
+import RecentSessionsCard from "../../common/RecentSessionsCard";
 
 const ServerRecentSessionsCard = () => {
 
diff --git a/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js b/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js
new file mode 100644
index 000000000..743978964
--- /dev/null
+++ b/Plan/react/dashboard/src/components/cards/server/tables/ServerWeekComparisonCard.js
@@ -0,0 +1,49 @@
+import {useTranslation} from "react-i18next";
+import {Card} from "react-bootstrap-v5";
+import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
+import {faCrosshairs, faExchangeAlt, faSkull, faUsers} from "@fortawesome/free-solid-svg-icons";
+import ComparisonTable from "../../../table/ComparisonTable";
+import {TableRow} from "../../../table/AsNumbersTable";
+import BigTrend from "../../../trend/BigTrend";
+import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
+import React from "react";
+
+const ServerWeekComparisonCard = ({data}) => {
+    const {t} = useTranslation();
+    if (!data) return <></>;
+    return (
+        <Card>
+            <Card.Header>
+                <h6 className="col-black">
+                    <Fa icon={faExchangeAlt}/> {t('html.label.weekComparison')}
+                </h6>
+            </Card.Header>
+            <ComparisonTable comparisonHeader={t('html.label.comparing7days')}
+                             headers={[data.start + ' - ' + data.midpoint, data.midpoint + ' - ' + data.end, t('html.label.trend')]}>
+                <TableRow icon={faUsers} color="blue" text={t('html.label.uniquePlayers')}
+                          values={[data.unique_before, data.unique_after, <BigTrend trend={data.unique_trend}/>]}/>
+                <TableRow icon={faUsers} color="light-green" text={t('html.label.newPlayers')}
+                          values={[data.new_before, data.new_after, <BigTrend trend={data.new_trend}/>]}/>
+                <TableRow icon={faUsers} color="lime" text={t('html.label.regularPlayers')}
+                          values={[data.regular_before, data.regular_after, <BigTrend trend={data.regular_trend}/>]}/>
+                <TableRow icon={faClock} color="green"
+                          text={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
+                          values={[data.average_playtime_before, data.average_playtime_after,
+                              <BigTrend trend={data.average_playtime_trend}/>]}/>
+                <TableRow icon={faCalendarCheck} color="teal" text={t('html.label.sessions')}
+                          values={[data.sessions_before, data.sessions_after,
+                              <BigTrend trend={data.sessions_trend}/>]}/>
+                <TableRow icon={faCrosshairs} color="red" text={t('html.label.playerKills')}
+                          values={[data.player_kills_before, data.player_kills_after,
+                              <BigTrend trend={data.player_kills_trend}/>]}/>
+                <TableRow icon={faCrosshairs} color="green" text={t('html.label.mobKills')}
+                          values={[data.mob_kills_before, data.mob_kills_after,
+                              <BigTrend trend={data.mob_kills_trend}/>]}/>
+                <TableRow icon={faSkull} color="black" text={t('html.label.deaths')}
+                          values={[data.deaths_before, data.deaths_after, <BigTrend trend={data.deaths_trend}/>]}/>
+            </ComparisonTable>
+        </Card>
+    )
+}
+
+export default ServerWeekComparisonCard
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js
new file mode 100644
index 000000000..e5804e03f
--- /dev/null
+++ b/Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js
@@ -0,0 +1,75 @@
+import {useTranslation} from "react-i18next";
+import {Card} from "react-bootstrap-v5";
+import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
+import {
+    faBookOpen,
+    faChartLine,
+    faCrosshairs,
+    faPowerOff,
+    faSkull,
+    faUser,
+    faUsers
+} from "@fortawesome/free-solid-svg-icons";
+import Datapoint from "../../../Datapoint";
+import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
+import React from "react";
+
+const ServerAsNumbersCard = ({data}) => {
+    const {t} = useTranslation();
+
+    if (!data) return <></>;
+
+    return (
+        <Card>
+            <Card.Header>
+                <h6 className="col-black">
+                    <Fa icon={faBookOpen}/> {t('html.label.serverAsNumberse')}
+                </h6>
+            </Card.Header>
+            <Card.Body>
+                <Datapoint name={t('html.label.currentUptime')}
+                           color={'light-green'} icon={faPowerOff}
+                           value={data.current_uptime}/>
+                <hr/>
+                <Datapoint name={t('html.label.totalPlayers')}
+                           color={'black'} icon={faUsers}
+                           value={data.total_players} bold/>
+                <Datapoint name={t('html.label.regularPlayers')}
+                           color={'lime'} icon={faUsers}
+                           value={data.regular_players} bold/>
+                <Datapoint name={t('html.label.playersOnline')}
+                           color={'blue'} icon={faUser}
+                           value={data.online_players} bold/>
+                <hr/>
+                <Datapoint name={t('html.label.lastPeak') + ' (' + data.last_peak_date + ')'}
+                           color={'blue'} icon={faChartLine}
+                           value={data.last_peak_players} valueLabel={t('html.unit.players')} bold/>
+                <Datapoint name={t('html.label.bestPeak') + ' (' + data.best_peak_date + ')'}
+                           color={'light-green'} icon={faChartLine}
+                           value={data.best_peak_players} valueLabel={t('html.unit.players')} bold/>
+                <hr/>
+                <Datapoint name={t('html.label.totalPlaytime')}
+                           color={'green'} icon={faClock}
+                           value={data.playtime}/>
+                <Datapoint name={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
+                           color={'green'} icon={faClock}
+                           value={data.player_playtime}/>
+                <Datapoint name={t('html.label.sessions')}
+                           color={'teal'} icon={faCalendarCheck}
+                           value={data.sessions} bold/>
+                <hr/>
+                <Datapoint name={t('html.label.playerKills')}
+                           color={'red'} icon={faCrosshairs}
+                           value={data.player_kills} bold/>
+                <Datapoint name={t('html.label.mobKills')}
+                           color={'green'} icon={faCrosshairs}
+                           value={data.mob_kills} bold/>
+                <Datapoint name={t('html.label.deaths')}
+                           color={'black'} icon={faSkull}
+                           value={data.deaths} bold/>
+            </Card.Body>
+        </Card>
+    )
+}
+
+export default ServerAsNumbersCard;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/components/graphs/LineGraph.js b/Plan/react/dashboard/src/components/graphs/LineGraph.js
index 208316414..4d6711e88 100644
--- a/Plan/react/dashboard/src/components/graphs/LineGraph.js
+++ b/Plan/react/dashboard/src/components/graphs/LineGraph.js
@@ -11,7 +11,7 @@ const LineGraph = ({id, series}) => {
 
     useEffect(() => {
         NoDataDisplay(Highcharts);
-        Highcharts.setOptions({lang: {noData: t('html.labels.noDataToDisplay')}})
+        Highcharts.setOptions({lang: {noData: t('html.label.noDataToDisplay')}})
         Highcharts.setOptions(graphTheming);
         Highcharts.stockChart(id, {
             rangeSelector: {
diff --git a/Plan/react/dashboard/src/components/trend/SmallTrend.js b/Plan/react/dashboard/src/components/trend/SmallTrend.js
index 749713bf8..962e40c6c 100644
--- a/Plan/react/dashboard/src/components/trend/SmallTrend.js
+++ b/Plan/react/dashboard/src/components/trend/SmallTrend.js
@@ -2,11 +2,11 @@ import React from "react";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faCaretDown, faCaretRight, faCaretUp} from "@fortawesome/free-solid-svg-icons";
 
-const TrendUpGood = ({value}) => <Fa icon={faCaretUp} className="badge bg-success" title={value}/>;
-const TrendUpBad = ({value}) => <Fa icon={faCaretUp} className="badge bg-danger" title={value}/>;
-const TrendDownBad = ({value}) => <Fa icon={faCaretDown} className="badge bg-danger" title={value}/>;
-const TrendDownGood = ({value}) => <Fa icon={faCaretDown} className="badge bg-success" title={value}/>;
-const TrendSame = ({value}) => <Fa icon={faCaretRight} className="badge bg-warning" title={value}/>;
+const TrendUpGood = ({value}) => <Fa icon={faCaretUp} className="text-success" title={value}/>;
+const TrendUpBad = ({value}) => <Fa icon={faCaretUp} className="text-danger" title={value}/>;
+const TrendDownBad = ({value}) => <Fa icon={faCaretDown} className="text-danger" title={value}/>;
+const TrendDownGood = ({value}) => <Fa icon={faCaretDown} className="text-success" title={value}/>;
+const TrendSame = ({value}) => <Fa icon={faCaretRight} className="text-warning" title={value}/>;
 
 
 const SmallTrend = ({trend}) => {
diff --git a/Plan/react/dashboard/src/views/ServerOverview.js b/Plan/react/dashboard/src/views/ServerOverview.js
deleted file mode 100644
index 87c8a9f71..000000000
--- a/Plan/react/dashboard/src/views/ServerOverview.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import React from "react";
-
-import {Card, Col, Row} from "react-bootstrap-v5";
-import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
-import {
-    faBookOpen,
-    faChartLine,
-    faCrosshairs,
-    faExchangeAlt,
-    faExclamationCircle,
-    faPowerOff,
-    faSkull,
-    faTachometerAlt,
-    faUser,
-    faUsers
-} from "@fortawesome/free-solid-svg-icons";
-import Datapoint from "../components/Datapoint";
-import {useTranslation} from "react-i18next";
-import {useParams} from "react-router-dom";
-import {fetchServerOverview} from "../service/serverService";
-import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
-import {TableRow} from "../components/table/AsNumbersTable";
-import ComparisonTable from "../components/table/ComparisonTable";
-import BigTrend from "../components/trend/BigTrend";
-import ErrorView from "./ErrorView";
-import {useDataRequest} from "../hooks/dataFetchHook";
-import OnlineActivityCard from "../components/cards/server/OnlineActivityCard";
-
-const Last7DaysCard = ({data}) => {
-    const {t} = useTranslation();
-
-    if (!data) return <></>;
-
-    return (
-        <Card>
-            <Card.Header>
-                <h6 className="col-black">
-                    {t('html.label.last7days')}
-                </h6>
-            </Card.Header>
-            <Card.Body>
-                <Datapoint name={t('html.label.uniquePlayers')}
-                           color={'blue'} icon={faUsers}
-                           value={data.unique_players} bold/>
-                <Datapoint name={t('html.label.uniquePlayers') + ' ' + t('html.label.perDay')}
-                           color={'blue'} icon={faUser}
-                           value={data.unique_players_day} bold/>
-                <Datapoint name={t('html.label.newPlayers')}
-                           color={'light-green'} icon={faUsers}
-                           value={data.new_players} bold/>
-                <Datapoint name={t('html.label.newPlayers')}
-                           color={'light-green'} icon={faUsers}
-                           value={data.new_players_retention_perc}
-                           valueLabel={data.new_players_retention + '/' + data.new_players} bold/>
-                <hr/>
-                <Datapoint name={t('html.label.averageTps')}
-                           color={'orange'} icon={faTachometerAlt}
-                           value={data.average_tps} bold/>
-                <Datapoint name={t('html.label.lowTpsSpikes')}
-                           color={'red'} icon={faExclamationCircle}
-                           value={data.low_tps_spikes} bold/>
-                <Datapoint name={t('html.label.downtime')}
-                           color={'red'} icon={faPowerOff}
-                           value={data.downtime}/>
-            </Card.Body>
-        </Card>
-    )
-}
-
-
-const ServerAsNumbersCard = ({data}) => {
-    const {t} = useTranslation();
-
-    if (!data) return <></>;
-
-    return (
-        <Card>
-            <Card.Header>
-                <h6 className="col-black">
-                    <Fa icon={faBookOpen}/> {t('html.label.serverAsNumberse')}
-                </h6>
-            </Card.Header>
-            <Card.Body>
-                <Datapoint name={t('html.label.currentUptime')}
-                           color={'light-green'} icon={faPowerOff}
-                           value={data.current_uptime}/>
-                <hr/>
-                <Datapoint name={t('html.label.totalPlayers')}
-                           color={'black'} icon={faUsers}
-                           value={data.total_players} bold/>
-                <Datapoint name={t('html.label.regularPlayers')}
-                           color={'lime'} icon={faUsers}
-                           value={data.regular_players} bold/>
-                <Datapoint name={t('html.label.playersOnline')}
-                           color={'blue'} icon={faUser}
-                           value={data.online_players} bold/>
-                <hr/>
-                <Datapoint name={t('html.label.lastPeak') + ' (' + data.last_peak_date + ')'}
-                           color={'blue'} icon={faChartLine}
-                           value={data.last_peak_players} valueLabel={t('html.unit.players')} bold/>
-                <Datapoint name={t('html.label.bestPeak') + ' (' + data.best_peak_date + ')'}
-                           color={'light-green'} icon={faChartLine}
-                           value={data.best_peak_players} valueLabel={t('html.unit.players')} bold/>
-                <hr/>
-                <Datapoint name={t('html.label.totalPlaytime')}
-                           color={'green'} icon={faClock}
-                           value={data.playtime}/>
-                <Datapoint name={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
-                           color={'green'} icon={faClock}
-                           value={data.player_playtime}/>
-                <Datapoint name={t('html.label.sessions')}
-                           color={'teal'} icon={faCalendarCheck}
-                           value={data.sessions} bold/>
-                <hr/>
-                <Datapoint name={t('html.label.playerKills')}
-                           color={'red'} icon={faCrosshairs}
-                           value={data.player_kills} bold/>
-                <Datapoint name={t('html.label.mobKills')}
-                           color={'green'} icon={faCrosshairs}
-                           value={data.mob_kills} bold/>
-                <Datapoint name={t('html.label.deaths')}
-                           color={'black'} icon={faSkull}
-                           value={data.deaths} bold/>
-            </Card.Body>
-        </Card>
-    )
-}
-
-const WeekComparisonCard = ({data}) => {
-    const {t} = useTranslation();
-    if (!data) return <></>;
-    return (
-        <Card>
-            <Card.Header>
-                <h6 className="col-black">
-                    <Fa icon={faExchangeAlt}/> {t('html.label.weekComparison')}
-                </h6>
-            </Card.Header>
-            <ComparisonTable comparisonHeader={t('html.label.comparing7days')}
-                             headers={[data.start + ' - ' + data.midpoint, data.midpoint + ' - ' + data.end, t('html.label.trend')]}>
-                <TableRow icon={faUsers} color="blue" text={t('html.label.uniquePlayers')}
-                          values={[data.unique_before, data.unique_after, <BigTrend trend={data.unique_trend}/>]}/>
-                <TableRow icon={faUsers} color="light-green" text={t('html.label.newPlayers')}
-                          values={[data.new_before, data.new_after, <BigTrend trend={data.new_trend}/>]}/>
-                <TableRow icon={faUsers} color="lime" text={t('html.label.regularPlayers')}
-                          values={[data.regular_before, data.regular_after, <BigTrend trend={data.regular_trend}/>]}/>
-                <TableRow icon={faClock} color="green"
-                          text={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
-                          values={[data.average_playtime_before, data.average_playtime_after,
-                              <BigTrend trend={data.average_playtime_trend}/>]}/>
-                <TableRow icon={faCalendarCheck} color="teal" text={t('html.label.sessions')}
-                          values={[data.sessions_before, data.sessions_after,
-                              <BigTrend trend={data.sessions_trend}/>]}/>
-                <TableRow icon={faCrosshairs} color="red" text={t('html.label.playerKills')}
-                          values={[data.player_kills_before, data.player_kills_after,
-                              <BigTrend trend={data.player_kills_trend}/>]}/>
-                <TableRow icon={faCrosshairs} color="green" text={t('html.label.mobKills')}
-                          values={[data.mob_kills_before, data.mob_kills_after,
-                              <BigTrend trend={data.mob_kills_trend}/>]}/>
-                <TableRow icon={faSkull} color="black" text={t('html.label.deaths')}
-                          values={[data.deaths_before, data.deaths_after, <BigTrend trend={data.deaths_trend}/>]}/>
-            </ComparisonTable>
-        </Card>
-    )
-}
-
-const ServerOverview = () => {
-    const {identifier} = useParams();
-
-    const {data, loadingError} = useDataRequest(
-        fetchServerOverview,
-        [identifier])
-
-    if (loadingError) {
-        return <ErrorView error={loadingError}/>
-    }
-
-    return (
-        <section className="server_overview">
-            <Row>
-                <Col lg={9}>
-                    <OnlineActivityCard/>
-                </Col>
-                <Col lg={3}>
-                    <Last7DaysCard data={data ? data.last_7_days : undefined}/>
-                </Col>
-            </Row>
-            <Row>
-                <Col lg={4}>
-                    <ServerAsNumbersCard data={data ? data.numbers : undefined}/>
-                </Col>
-                <Col lg={8}>
-                    <WeekComparisonCard data={data ? data.weeks : undefined}/>
-                </Col>
-            </Row>
-        </section>
-    )
-}
-
-export default ServerOverview;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/views/PlayerPage.js b/Plan/react/dashboard/src/views/layout/PlayerPage.js
similarity index 86%
rename from Plan/react/dashboard/src/views/PlayerPage.js
rename to Plan/react/dashboard/src/views/layout/PlayerPage.js
index 9966e8d89..33970e092 100644
--- a/Plan/react/dashboard/src/views/PlayerPage.js
+++ b/Plan/react/dashboard/src/views/layout/PlayerPage.js
@@ -1,17 +1,17 @@
 import React, {useEffect, useState} from "react";
-import Sidebar from "../components/navigation/Sidebar";
+import Sidebar from "../../components/navigation/Sidebar";
 import {Outlet, useOutletContext, useParams} from "react-router-dom";
-import ColorSelectorModal from "../components/modal/ColorSelectorModal";
-import {NightModeCss} from "../hooks/themeHook";
-import {fetchPlayer} from "../service/playerService";
-import ErrorView from "./ErrorView";
+import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
+import {NightModeCss} from "../../hooks/themeHook";
+import {fetchPlayer} from "../../service/playerService";
+import ErrorView from "../ErrorView";
 import {faCampground, faCubes, faInfoCircle, faNetworkWired} from "@fortawesome/free-solid-svg-icons";
-import {useAuth} from "../hooks/authenticationHook";
-import Header from "../components/navigation/Header";
-import {useNavigation} from "../hooks/navigationHook";
+import {useAuth} from "../../hooks/authenticationHook";
+import Header from "../../components/navigation/Header";
+import {useNavigation} from "../../hooks/navigationHook";
 import {useTranslation} from "react-i18next";
 import {faCalendarCheck} from "@fortawesome/free-regular-svg-icons";
-import {useDataRequest} from "../hooks/dataFetchHook";
+import {useDataRequest} from "../../hooks/dataFetchHook";
 
 
 const PlayerPage = () => {
diff --git a/Plan/react/dashboard/src/views/ServerPage.js b/Plan/react/dashboard/src/views/layout/ServerPage.js
similarity index 90%
rename from Plan/react/dashboard/src/views/ServerPage.js
rename to Plan/react/dashboard/src/views/layout/ServerPage.js
index d0d2679a4..7880ddd7e 100644
--- a/Plan/react/dashboard/src/views/ServerPage.js
+++ b/Plan/react/dashboard/src/views/layout/ServerPage.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {Outlet} from "react-router-dom";
-import {useNavigation} from "../hooks/navigationHook";
+import {useNavigation} from "../../hooks/navigationHook";
 import {
     faCampground,
     faChartArea,
@@ -15,13 +15,13 @@ import {
     faUsers,
     faUsersViewfinder
 } from "@fortawesome/free-solid-svg-icons";
-import {useAuth} from "../hooks/authenticationHook";
-import {NightModeCss} from "../hooks/themeHook";
-import Sidebar from "../components/navigation/Sidebar";
-import Header from "../components/navigation/Header";
-import ErrorView from "./ErrorView";
-import ColorSelectorModal from "../components/modal/ColorSelectorModal";
-import {useMetadata} from "../hooks/metadataHook";
+import {useAuth} from "../../hooks/authenticationHook";
+import {NightModeCss} from "../../hooks/themeHook";
+import Sidebar from "../../components/navigation/Sidebar";
+import Header from "../../components/navigation/Header";
+import ErrorView from "../ErrorView";
+import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
+import {useMetadata} from "../../hooks/metadataHook";
 import {faCalendarCheck} from "@fortawesome/free-regular-svg-icons";
 
 const ServerPage = () => {
diff --git a/Plan/react/dashboard/src/views/PlayerOverview.js b/Plan/react/dashboard/src/views/player/PlayerOverview.js
similarity index 95%
rename from Plan/react/dashboard/src/views/PlayerOverview.js
rename to Plan/react/dashboard/src/views/player/PlayerOverview.js
index 32868f4ba..ef5d138a9 100644
--- a/Plan/react/dashboard/src/views/PlayerOverview.js
+++ b/Plan/react/dashboard/src/views/player/PlayerOverview.js
@@ -18,15 +18,15 @@ import {
     faWifi
 } from "@fortawesome/free-solid-svg-icons";
 import {faSuperpowers} from "@fortawesome/free-brands-svg-icons";
-import Scrollable from "../components/Scrollable";
-import PunchCard from "../components/graphs/PunchCard";
-import Datapoint from "../components/Datapoint";
-import AsNumbersTable, {TableRow} from "../components/table/AsNumbersTable";
-import {useTheme} from "../hooks/themeHook";
-import {usePlayer} from "./PlayerPage";
-import {useMetadata} from "../hooks/metadataHook";
+import Scrollable from "../../components/Scrollable";
+import PunchCard from "../../components/graphs/PunchCard";
+import Datapoint from "../../components/Datapoint";
+import AsNumbersTable, {TableRow} from "../../components/table/AsNumbersTable";
+import {useTheme} from "../../hooks/themeHook";
+import {usePlayer} from "../layout/PlayerPage";
+import {useMetadata} from "../../hooks/metadataHook";
 import {useTranslation} from "react-i18next";
-import NicknamesCard from "../components/cards/player/NicknamesCard";
+import NicknamesCard from "../../components/cards/player/NicknamesCard";
 
 const PlayerOverviewCard = ({player}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/views/PlayerPluginData.js b/Plan/react/dashboard/src/views/player/PlayerPluginData.js
similarity index 92%
rename from Plan/react/dashboard/src/views/PlayerPluginData.js
rename to Plan/react/dashboard/src/views/player/PlayerPluginData.js
index e5970bb65..c8c82c08b 100644
--- a/Plan/react/dashboard/src/views/PlayerPluginData.js
+++ b/Plan/react/dashboard/src/views/player/PlayerPluginData.js
@@ -1,9 +1,9 @@
 import React, {useEffect} from "react";
-import ExtensionCard, {ExtensionCardWrapper} from "../components/extensions/ExtensionCard";
+import ExtensionCard, {ExtensionCardWrapper} from "../../components/extensions/ExtensionCard";
 import {Card, Row} from "react-bootstrap-v5";
 import {useParams} from "react-router-dom";
 import Masonry from "masonry-layout";
-import {usePlayer} from "./PlayerPage";
+import {usePlayer} from "../layout/PlayerPage";
 
 const PlayerPluginData = () => {
     const {player} = usePlayer();
diff --git a/Plan/react/dashboard/src/views/PlayerPvpPve.js b/Plan/react/dashboard/src/views/player/PlayerPvpPve.js
similarity index 87%
rename from Plan/react/dashboard/src/views/PlayerPvpPve.js
rename to Plan/react/dashboard/src/views/player/PlayerPvpPve.js
index cc2e48210..e7d6c6b7d 100644
--- a/Plan/react/dashboard/src/views/PlayerPvpPve.js
+++ b/Plan/react/dashboard/src/views/player/PlayerPvpPve.js
@@ -3,12 +3,12 @@ import {Card, Col, Row} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faLifeRing} from "@fortawesome/free-regular-svg-icons";
 import {faKhanda, faSkull} from "@fortawesome/free-solid-svg-icons";
-import Datapoint from "../components/Datapoint";
-import KillsTable from "../components/table/KillsTable";
-import {usePlayer} from "./PlayerPage";
+import Datapoint from "../../components/Datapoint";
+import KillsTable from "../../components/table/KillsTable";
+import {usePlayer} from "../layout/PlayerPage";
 import {useTranslation} from "react-i18next";
-import PvpPveAsNumbersCard from "../components/cards/player/PvpPveAsNumbersCard";
-import PvpKillsTableCard from "../components/cards/common/PvpKillsTableCard";
+import PvpPveAsNumbersCard from "../../components/cards/player/PvpPveAsNumbersCard";
+import PvpKillsTableCard from "../../components/cards/common/PvpKillsTableCard";
 
 const InsightsCard = ({player}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/views/PlayerServers.js b/Plan/react/dashboard/src/views/player/PlayerServers.js
similarity index 89%
rename from Plan/react/dashboard/src/views/PlayerServers.js
rename to Plan/react/dashboard/src/views/player/PlayerServers.js
index 600d570c5..300e768c9 100644
--- a/Plan/react/dashboard/src/views/PlayerServers.js
+++ b/Plan/react/dashboard/src/views/player/PlayerServers.js
@@ -2,13 +2,13 @@ import React from "react";
 import {Card, Col, Row} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faHandPointer} from "@fortawesome/free-regular-svg-icons";
-import Scrollable from "../components/Scrollable";
+import Scrollable from "../../components/Scrollable";
 import {faNetworkWired, faSignal} from "@fortawesome/free-solid-svg-icons";
-import ServerPie from "../components/graphs/ServerPie";
-import ServerAccordion from "../components/accordion/ServerAccordion";
-import {usePlayer} from "./PlayerPage";
+import ServerPie from "../../components/graphs/ServerPie";
+import ServerAccordion from "../../components/accordion/ServerAccordion";
+import {usePlayer} from "../layout/PlayerPage";
 import {useTranslation} from "react-i18next";
-import PingGraph from "../components/graphs/PingGraph";
+import PingGraph from "../../components/graphs/PingGraph";
 
 const PingGraphCard = ({player}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/views/PlayerSessions.js b/Plan/react/dashboard/src/views/player/PlayerSessions.js
similarity index 79%
rename from Plan/react/dashboard/src/views/PlayerSessions.js
rename to Plan/react/dashboard/src/views/player/PlayerSessions.js
index cdcf0f36e..2edfffa67 100644
--- a/Plan/react/dashboard/src/views/PlayerSessions.js
+++ b/Plan/react/dashboard/src/views/player/PlayerSessions.js
@@ -2,11 +2,11 @@ import React from "react";
 import {Card, Col, Row} from "react-bootstrap-v5";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faCalendarAlt} from "@fortawesome/free-regular-svg-icons";
-import PlayerSessionCalendar from "../components/calendar/PlayerSessionCalendar";
-import {usePlayer} from "./PlayerPage";
+import PlayerSessionCalendar from "../../components/calendar/PlayerSessionCalendar";
+import {usePlayer} from "../layout/PlayerPage";
 import {useTranslation} from "react-i18next";
-import PlayerWorldPieCard from "../components/cards/player/PlayerWorldPieCard";
-import PlayerRecentSessionsCard from "../components/cards/player/PlayerRecentSessionsCard";
+import PlayerWorldPieCard from "../../components/cards/player/PlayerWorldPieCard";
+import PlayerRecentSessionsCard from "../../components/cards/player/PlayerRecentSessionsCard";
 
 const SessionCalendarCard = ({player}) => {
     const {t} = useTranslation();
diff --git a/Plan/react/dashboard/src/views/ServerOnlineActivity.js b/Plan/react/dashboard/src/views/server/OnlineActivity.js
similarity index 60%
rename from Plan/react/dashboard/src/views/ServerOnlineActivity.js
rename to Plan/react/dashboard/src/views/server/OnlineActivity.js
index 3a46a20e8..71588efd6 100644
--- a/Plan/react/dashboard/src/views/ServerOnlineActivity.js
+++ b/Plan/react/dashboard/src/views/server/OnlineActivity.js
@@ -1,14 +1,14 @@
 import React from "react";
 import {Col, Row} from "react-bootstrap-v5";
-import OnlineActivityGraphsCard from "../components/cards/server/OnlineActivityGraphsCard";
-import OnlineActivityAsNumbersCard from "../components/cards/server/OnlineActivityAsNumbersCard";
+import OnlineActivityGraphsCard from "../../components/cards/server/graphs/OnlineActivityGraphsCard";
+import OnlineActivityAsNumbersCard from "../../components/cards/server/tables/OnlineActivityAsNumbersCard";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../hooks/dataFetchHook";
-import {fetchOnlineActivityOverview} from "../service/serverService";
-import {ErrorViewBody} from "./ErrorView";
-import OnlineActivityInsightsCard from "../components/cards/server/OnlineActivityInsightsCard";
+import {useDataRequest} from "../../hooks/dataFetchHook";
+import {fetchOnlineActivityOverview} from "../../service/serverService";
+import {ErrorViewBody} from "../ErrorView";
+import OnlineActivityInsightsCard from "../../components/cards/server/insights/OnlineActivityInsightsCard";
 
-const ServerOnlineActivity = () => {
+const OnlineActivity = () => {
     const {identifier} = useParams();
 
     const {data, loadingError} = useDataRequest(fetchOnlineActivityOverview, [identifier])
@@ -35,4 +35,4 @@ const ServerOnlineActivity = () => {
     )
 }
 
-export default ServerOnlineActivity
\ No newline at end of file
+export default OnlineActivity
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/views/ServerPlayerbaseOverview.js b/Plan/react/dashboard/src/views/server/PlayerbaseOverview.js
similarity index 51%
rename from Plan/react/dashboard/src/views/ServerPlayerbaseOverview.js
rename to Plan/react/dashboard/src/views/server/PlayerbaseOverview.js
index 9673a4ded..5c37f2632 100644
--- a/Plan/react/dashboard/src/views/ServerPlayerbaseOverview.js
+++ b/Plan/react/dashboard/src/views/server/PlayerbaseOverview.js
@@ -1,13 +1,15 @@
 import {Col, Row} from "react-bootstrap-v5";
 import React from "react";
-import PlayerbaseDevelopmentCard from "../components/cards/server/PlayerbaseDevelopmentCard";
-import CurrentPlayerbaseCard from "../components/cards/server/CurrentPlayerbaseCard";
+import PlayerbaseDevelopmentCard from "../../components/cards/server/graphs/PlayerbaseDevelopmentCard";
+import CurrentPlayerbaseCard from "../../components/cards/server/graphs/CurrentPlayerbaseCard";
 import {useParams} from "react-router-dom";
-import {useDataRequest} from "../hooks/dataFetchHook";
-import {fetchPlayerbaseOverview} from "../service/serverService";
-import ErrorView from "./ErrorView";
+import {useDataRequest} from "../../hooks/dataFetchHook";
+import {fetchPlayerbaseOverview} from "../../service/serverService";
+import ErrorView from "../ErrorView";
+import PlayerbaseTrendsCard from "../../components/cards/server/tables/PlayerbaseTrendsCard";
+import PlayerbaseInsightsCard from "../../components/cards/server/insights/PlayerbaseInsightsCard";
 
-const ServerPlayerbaseOverview = () => {
+const PlayerbaseOverview = () => {
     const {identifier} = useParams();
 
     const {data, loadingError} = useDataRequest(fetchPlayerbaseOverview, [identifier]);
@@ -27,10 +29,10 @@ const ServerPlayerbaseOverview = () => {
             </Row>
             <Row>
                 <Col lg={8}>
-
+                    <PlayerbaseTrendsCard data={data?.trends}/>
                 </Col>
                 <Col lg={4}>
-
+                    <PlayerbaseInsightsCard data={data?.insights}/>
                 </Col>
             </Row>
         </section>
@@ -38,4 +40,4 @@ const ServerPlayerbaseOverview = () => {
     )
 }
 
-export default ServerPlayerbaseOverview;
\ No newline at end of file
+export default PlayerbaseOverview;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/views/server/ServerOverview.js b/Plan/react/dashboard/src/views/server/ServerOverview.js
new file mode 100644
index 000000000..c55749701
--- /dev/null
+++ b/Plan/react/dashboard/src/views/server/ServerOverview.js
@@ -0,0 +1,89 @@
+import React from "react";
+
+import {Card, Col, Row} from "react-bootstrap-v5";
+import {faExclamationCircle, faPowerOff, faTachometerAlt, faUser, faUsers} from "@fortawesome/free-solid-svg-icons";
+import Datapoint from "../../components/Datapoint";
+import {useTranslation} from "react-i18next";
+import {useParams} from "react-router-dom";
+import {fetchServerOverview} from "../../service/serverService";
+import ErrorView from "../ErrorView";
+import {useDataRequest} from "../../hooks/dataFetchHook";
+import OnlineActivityCard from "../../components/cards/server/graphs/OnlineActivityCard";
+import ServerAsNumbersCard from "../../components/cards/server/values/ServerAsNumbersCard";
+import ServerWeekComparisonCard from "../../components/cards/server/tables/ServerWeekComparisonCard";
+
+const Last7DaysCard = ({data}) => {
+    const {t} = useTranslation();
+
+    if (!data) return <></>;
+
+    return (
+        <Card>
+            <Card.Header>
+                <h6 className="col-black">
+                    {t('html.label.last7days')}
+                </h6>
+            </Card.Header>
+            <Card.Body>
+                <Datapoint name={t('html.label.uniquePlayers')}
+                           color={'blue'} icon={faUsers}
+                           value={data.unique_players} bold/>
+                <Datapoint name={t('html.label.uniquePlayers') + ' ' + t('html.label.perDay')}
+                           color={'blue'} icon={faUser}
+                           value={data.unique_players_day} bold/>
+                <Datapoint name={t('html.label.newPlayers')}
+                           color={'light-green'} icon={faUsers}
+                           value={data.new_players} bold/>
+                <Datapoint name={t('html.label.newPlayers')}
+                           color={'light-green'} icon={faUsers}
+                           value={data.new_players_retention_perc}
+                           valueLabel={data.new_players_retention + '/' + data.new_players} bold/>
+                <hr/>
+                <Datapoint name={t('html.label.averageTps')}
+                           color={'orange'} icon={faTachometerAlt}
+                           value={data.average_tps} bold/>
+                <Datapoint name={t('html.label.lowTpsSpikes')}
+                           color={'red'} icon={faExclamationCircle}
+                           value={data.low_tps_spikes} bold/>
+                <Datapoint name={t('html.label.downtime')}
+                           color={'red'} icon={faPowerOff}
+                           value={data.downtime}/>
+            </Card.Body>
+        </Card>
+    )
+}
+
+const ServerOverview = () => {
+    const {identifier} = useParams();
+
+    const {data, loadingError} = useDataRequest(
+        fetchServerOverview,
+        [identifier])
+
+    if (loadingError) {
+        return <ErrorView error={loadingError}/>
+    }
+
+    return (
+        <section className="server_overview">
+            <Row>
+                <Col lg={9}>
+                    <OnlineActivityCard/>
+                </Col>
+                <Col lg={3}>
+                    <Last7DaysCard data={data?.last_7_days}/>
+                </Col>
+            </Row>
+            <Row>
+                <Col lg={4}>
+                    <ServerAsNumbersCard data={data?.numbers}/>
+                </Col>
+                <Col lg={8}>
+                    <ServerWeekComparisonCard data={data?.weeks}/>
+                </Col>
+            </Row>
+        </section>
+    )
+}
+
+export default ServerOverview;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/views/ServerPvpPve.js b/Plan/react/dashboard/src/views/server/ServerPvpPve.js
similarity index 66%
rename from Plan/react/dashboard/src/views/ServerPvpPve.js
rename to Plan/react/dashboard/src/views/server/ServerPvpPve.js
index 47adc2636..29f5ad069 100644
--- a/Plan/react/dashboard/src/views/ServerPvpPve.js
+++ b/Plan/react/dashboard/src/views/server/ServerPvpPve.js
@@ -1,8 +1,8 @@
 import React from "react";
-import PvpPveAsNumbersCard from "../components/cards/server/PvpPveAsNumbersCard";
+import PvpPveAsNumbersCard from "../../components/cards/server/tables/PvpPveAsNumbersCard";
 import {Col, Row} from "react-bootstrap-v5";
-import PvpKillsTableCard from "../components/cards/common/PvpKillsTableCard";
-import PvpPveInsightsCard from "../components/cards/server/PvpPveInsightsCard";
+import PvpKillsTableCard from "../../components/cards/common/PvpKillsTableCard";
+import PvpPveInsightsCard from "../../components/cards/server/insights/PvpPveInsightsCard";
 
 const ServerPvpPve = () => {
     return (
diff --git a/Plan/react/dashboard/src/views/ServerSessions.js b/Plan/react/dashboard/src/views/server/ServerSessions.js
similarity index 63%
rename from Plan/react/dashboard/src/views/ServerSessions.js
rename to Plan/react/dashboard/src/views/server/ServerSessions.js
index 646e18ed6..92c3ab7eb 100644
--- a/Plan/react/dashboard/src/views/ServerSessions.js
+++ b/Plan/react/dashboard/src/views/server/ServerSessions.js
@@ -1,8 +1,8 @@
 import {Col, Row} from "react-bootstrap-v5";
 import React from "react";
-import ServerWorldPieCard from "../components/cards/server/ServerWorldPieCard";
-import ServerRecentSessionsCard from "../components/cards/server/ServerRecentSessionsCard";
-import SessionInsightsCard from "../components/cards/server/SessionInsightsCard";
+import ServerWorldPieCard from "../../components/cards/server/graphs/ServerWorldPieCard";
+import ServerRecentSessionsCard from "../../components/cards/server/tables/ServerRecentSessionsCard";
+import SessionInsightsCard from "../../components/cards/server/insights/SessionInsightsCard";
 
 const ServerSessions = () => {
     return (