diff --git a/app/globals.css b/app/globals.css
index ad9ab27..79eb88e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -90,3 +90,8 @@ main {
   display: flex;
   flex-direction: row;
 }
+
+.col {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/app/page.tsx b/app/page.tsx
index 40d41ca..c09f113 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import '@/app/globals.css';
 import { Game, GameGroup } from '@/types/stellaris';
-import { GameView } from '@/components/gui/game-view';
+import { GameView } from '@/components/gui/client/game-view';
 import { generateUrl } from '@/components/server/fetchers';
 
 export default async function Home() {
diff --git a/components/gui/client/game-info-tabs.tsx b/components/gui/client/game-info-tabs.tsx
new file mode 100644
index 0000000..c51da3d
--- /dev/null
+++ b/components/gui/client/game-info-tabs.tsx
@@ -0,0 +1,137 @@
+'use client';
+import { Ethic, Game, GameData, GameGroup } from "@/types/stellaris";
+import { Dispatch, Key, SetStateAction, Suspense, useEffect, useState } from 'react';
+import { Empire } from '../../../types/stellaris';
+import { generateUrl } from "@/components/server/fetchers";
+
+type SelectionType = "all" | Set<Key>;
+
+export const GameInfoTabs = (
+  props: {
+    game: Game,
+    groups: GameGroup[]
+  }) => {
+
+  const [currentTab, setCurrentTab] = useState(1);
+
+  // won't work with a class, needs to be a type
+  const [gameData, setGameData] = useState({info: props.game, groups: props.groups, empires: new Array<Empire>});
+
+  useEffect(() => {
+    const getEmpires = async () => {
+      const tmpEmpires = await fetch(
+        generateUrl('/empires', [
+          //{ key: "group_id", val: this.gr }, // TODO: wait for firq to implement multi calls, for now return all empires in game and manual parse
+          { key: "group_game_id", val: gameData.info.id },]
+        )).then((res) => res.json());
+    
+      let empires: Empire[] = []
+    
+      tmpEmpires.forEach((empire: Empire) => {
+        if (gameData.groups.map(group => group.id).includes(empire.group_id)) {
+          empires.push(empire)
+        }
+      });
+      return empires;
+    }
+    
+    const fetchData = async () => {
+      let tmpData = gameData
+      tmpData.groups = props.groups;
+      tmpData.empires = await getEmpires();
+      setGameData((prevGameData) => ({
+        ...prevGameData,
+        groups: tmpData.groups,
+        empires: tmpData.empires
+      }));
+    }
+
+    if (gameData.groups != props.groups) {
+      fetchData()
+    }
+  }, [gameData, props.groups])
+
+  let currentTabView;
+  switch (currentTab) {
+    case (1):
+    case (2): {
+      currentTabView = <p>{currentTab}</p>
+      break;
+    }
+    case (3): {
+      const gestaltSums = getGestaltCount(gameData.empires, 13);
+      currentTabView =
+        <div className="col">
+          <p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
+          <p>Empires: {gameData.empires.length}</p>
+          <div className="row">
+            <p>Ethics</p>
+            <div className="col">
+              <p>Total Gestalts: {gestaltSums.total}</p>
+              Hive Minds: {gestaltSums.total - gestaltSums.machines}
+              <br></br>
+              Machines: {gestaltSums.machines}
+              <br></br>
+              <p>Machine Ethics</p>
+            </div>
+          </div>
+          <div className="col">
+            <div className="row">
+              <p>Portrait 1</p>
+              <p>Portrait 2</p>
+              <p>Portrait 3</p>
+            </div>
+            <div className="row">
+              <p>Portrait 1</p>
+              <p>Portrait 2</p>
+              <p>Portrait 3</p>
+            </div>
+          </div>
+        </div>;
+      break;
+    }
+    default:
+      currentTabView = <p>Oops, something went wrong</p>
+  }
+
+  return (
+    <>
+      <div className="row">
+        <button key={1} onClick={() => setCurrentTab(_currentTab => 1)}>
+          Tab 1
+        </button>
+        <button key={2} onClick={() => setCurrentTab(_currentTab => 2)}>
+          Tab 2
+        </button>
+        <button key={3} onClick={() => setCurrentTab(_currentTab => 3)}>
+          Legacy Visuals
+        </button>
+      </div>
+      {currentTabView}
+    </>
+  )
+}
+
+function getEthicSum(ethic: Ethic, empires: Empire[]) {
+  let sum = 0;
+  empires.forEach(empire => { empire.ethic_ids.includes(ethic.id) ? sum = sum + 1 : sum });
+  return sum;
+}
+
+function getGestaltCount(empires: Empire[], machineId: number) {
+  let sum = 0;
+  let sumMachines = 0;
+
+  empires.forEach(empire => { 
+    if(empire.gestalt) {
+      if(empire.empire_portrait_group_id == machineId) {
+        sumMachines = sumMachines + 1;
+        sum = sum + 1;
+      }
+      else {
+        sum = sum + 1
+      }
+      
+    }});
+  return {total: sum, machines: sumMachines}
+}
diff --git a/components/gui/game-view.tsx b/components/gui/client/game-view.tsx
similarity index 88%
rename from components/gui/game-view.tsx
rename to components/gui/client/game-view.tsx
index 62588db..cb7be05 100644
--- a/components/gui/game-view.tsx
+++ b/components/gui/client/game-view.tsx
@@ -1,8 +1,8 @@
 'use client';
 import { Game } from "@/types/stellaris";
-import { GameSelect } from "./game-select";
+import { GameSelect } from "../server/game-select";
 import { useState } from 'react';
-import { GameGroupSelect } from "./game-group-select";
+import { GameGroupSelect } from "../server/game-group-select";
 import { SSRProvider } from "react-bootstrap";
 import { GameInfoTabs } from "./game-info-tabs";
 
diff --git a/components/gui/data-handlers/game-info-handler.tsx b/components/gui/data-handlers/game-info-handler.tsx
deleted file mode 100644
index 78fdc0e..0000000
--- a/components/gui/data-handlers/game-info-handler.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { fetchGameGroups } from "@/components/server/fetchers";
-import { Game, GameGroup } from "@/types/stellaris";
-import { Dispatch, SetStateAction } from "react";
-
-export const GameInfoHandler = async (
-  props: {
-  game: Game,
-  groups: GameGroup[]
-}) => {
-  if (props) {
-    const currentGame = props.game;
-    const currentGroups = props.groups;
-  
-  }
-
-  return <></>
-}
\ No newline at end of file
diff --git a/components/gui/game-info-tabs.tsx b/components/gui/game-info-tabs.tsx
deleted file mode 100644
index e7e21e6..0000000
--- a/components/gui/game-info-tabs.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-import { Game, GameGroup } from "@/types/stellaris";
-import { Dropdown } from "@nextui-org/react";
-import { Dispatch, Key, SetStateAction, Suspense, useState } from 'react';
-import { fetchGameGroups } from "@/components/server/fetchers";
-import { GameInfoHandler } from "./data-handlers/game-info-handler";
-
-type SelectionType = "all" | Set<Key>;
-
-export const GameInfoTabs = (
-  props: {
-    game: Game,
-    groups: GameGroup[]
-  }) => {
-
-  const [currentTab, setCurrentTab] = useState(1); 
-
-  let currentTabView;
-  switch(currentTab) {
-    case(1):
-    case(2): {
-      currentTabView = <p>{currentTab}</p>
-      break;
-    }
-    case(3): {
-      currentTabView = <GameInfoLegacyView game={props.game} groups={props.groups}/>
-      break;
-    }
-    default:
-      currentTabView = <p>Oops, something went wrong</p>
-  }
-
-  return (
-    <>
-      <Suspense>
-        <GameInfoHandler game={props.game} groups={props.groups} />
-      </Suspense>
-      <div className="row">
-        <button key={1} onClick={() => setCurrentTab(_currentTab => 1)}>
-          Tab 1
-        </button>
-        <button key={2} onClick={() => setCurrentTab(_currentTab => 2)}>
-          Tab 2
-        </button>
-        <button key={3} onClick={() => setCurrentTab(_currentTab => 3)}>
-          Legacy Visuals
-        </button>
-      </div>
-      {currentTabView}
-    </>
-  )
-}
-
-const GameInfoLegacyView = (
-  props: {
-    game: Game,
-    groups: GameGroup[]
-  }
-) => {
-  return (
-    <div>
-      <p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/components/gui/game-group-select.tsx b/components/gui/server/game-group-select.tsx
similarity index 100%
rename from components/gui/game-group-select.tsx
rename to components/gui/server/game-group-select.tsx
diff --git a/components/gui/game-select.tsx b/components/gui/server/game-select.tsx
similarity index 100%
rename from components/gui/game-select.tsx
rename to components/gui/server/game-select.tsx
diff --git a/types/stellaris.ts b/types/stellaris.ts
index b2a04de..7f35f24 100644
--- a/types/stellaris.ts
+++ b/types/stellaris.ts
@@ -1,3 +1,4 @@
+import { generateUrl } from '../components/server/fetchers';
 // Ethics Data should be stored differently after Game 15, class will stil be needed for compat reasons afterwards
 export class EthicsDataG15 {
   // Array index determines fanatic or regular, Index value represents number of occurences
@@ -5,13 +6,13 @@ export class EthicsDataG15 {
 
   constructor(data: Array<number>) {
     this.data[Scale.normal] = data[0],
-    this.data[Scale.fanatic] = data[1]
+      this.data[Scale.fanatic] = data[1]
   }
 
   sum(weigthed: boolean): number {
     let sum = 0;
     // skip 0 index since it isn't used
-    this.data.slice(1,this.data.length).forEach((value, index) => {
+    this.data.slice(1, this.data.length).forEach((value, index) => {
       // Since the index is accessed via scale enum this works, if not weighted override to 1
       let factor = index + 1;
       if (!weigthed) {
@@ -75,3 +76,39 @@ export type GameGroup = {
   game_id: number,
   name: string
 }
+
+export class Empire {
+  id: number = 0;
+  group_id: number = 0;
+  group_game_id: number = 0;
+  private discord_user: string | undefined;
+  private empire_name: string | undefined;
+  gestalt: boolean = false;
+  empire_portrait_group_id: number = 0;
+  empire_portrait_id: number = 0;
+  ethic_ids: number[] = [];
+
+  async getEthics() {
+    let tmpEthics = await fetch(
+      generateUrl('/empire_ethics', [
+        { key: "empires_id", val: this.id },
+        { key: "empires_group_id", val: this.group_id },
+        { key: "empires_group_game_id", val: this.group_game_id }]
+      )).then((res) => res.json());
+    tmpEthics.forEach((empireEthic: { empires_id: number, empires_group_id: number, empires_group_name_id: number, ethics_id: number }) => {
+      this.ethic_ids.push(empireEthic.ethics_id)
+    });
+  }
+}
+
+export type Ethic = {
+  id: number,
+  name: string,
+  fanatic: boolean
+}
+
+export type GameData = {
+  info: Game;
+  groups: GameGroup[];
+  empires: Empire[];
+}