Brighter background color, rearranging of elementes + empire count

app/globals.css

@@ -11,8 +11,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground: #ffffff;
-    --background-start: #000000;
-    --background-end: #000000;
+    --background-start: #1a1a1a;
+    --background-end: #1a1a1a;
   }
 }
 

app/page.tsx

@@ -1,9 +1,22 @@
+'use client';
+import { useState } from 'react';
 import {RadarChart} from '../components/charts/radar'
+import {EmpireStats} from '../components/tables/empires'
+import { Checkbox } from '@nextui-org/react';
 
 export default function Home() {
+  const [weighted, setWeighted] = useState(true);
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between">
-      <RadarChart />
+    <main className="flex min-h-screen flex-row items-center">
+      <div className='flex flex-row min-h-screen'>
+        <RadarChart weighted={weighted}/>
+        <div className='flex flex-col justify-around'>
+          <EmpireStats />
+          <Checkbox labelColor="primary" defaultSelected={weighted} onChange={() => setWeighted(!weighted)}>Weighted Ethics</Checkbox>
+        </div>
+      </div>
+      
+
     </main>
   )
 }