diff --git a/website/index.html b/website/index.html
index 7a542b2..2d8fb98 100644
--- a/website/index.html
+++ b/website/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@300;400;500;600;700&display=swap"
     />
     <link
       rel="stylesheet"
diff --git a/website/package-lock.json b/website/package-lock.json
index b1397ba..d71011a 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -10,7 +10,9 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.14.13",
         "@mui/material": "^5.14.13",
+        "@mui/x-charts": "^6.0.0-alpha.15",
         "firebase": "^10.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -1416,6 +1418,31 @@
         "url": "https://opencollective.com/mui"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.14.13",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.13.tgz",
+      "integrity": "sha512-fxKE1UrjI4xVxHe9IAGuVQZrc18dSBJg0P+Sqi2SZmcDUCShmgRq6Jq7l7GduvuMIkOSqAJdNgLtXmtmZkjtLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.14.13",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.13.tgz",
@@ -1596,6 +1623,39 @@
         }
       }
     },
+    "node_modules/@mui/x-charts": {
+      "version": "6.0.0-alpha.15",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-6.0.0-alpha.15.tgz",
+      "integrity": "sha512-5O54e+9FYSIggT5vEYkXXnKVo3b8b4E5iIdYOrpkKAG3ZonASqpObUp8zblvdg0JRJc0UGV3X5o7n3HD0fMw4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.1",
+        "@mui/base": "^5.0.0-beta.17",
+        "clsx": "^2.0.0",
+        "d3-color": "^3.1.0",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2397,6 +2457,100 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3038,6 +3192,14 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
diff --git a/website/package.json b/website/package.json
index bd17fee..75f885a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -13,7 +13,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.13",
     "@mui/material": "^5.14.13",
+    "@mui/x-charts": "^6.0.0-alpha.15",
     "firebase": "^10.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/website/src/App.tsx b/website/src/App.tsx
index b8ece81..3dc01c9 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -4,7 +4,7 @@ import { Box, Button, CircularProgress, Typography } from "@mui/material";
 import Typewriter from "typewriter-effect";
 import UserHome from "./components/UserHome";
 import Dots from "./components/Dots";
-import { auth, getUserData, githubProvider } from "./firebase";
+import { auth, getCurrentUserData, githubProvider } from "./firebase";
 import { UserData } from "./types";
 import "./App.css";
 
@@ -18,7 +18,7 @@ function App() {
   useEffect(() => {
     onAuthStateChanged(auth, async (user) => {
       if (user) {
-        setUserData(await getUserData(user.uid));
+        setUserData(await getCurrentUserData(user));
       } else {
         setUserData(undefined);
       }
@@ -39,7 +39,7 @@ function App() {
         flexDirection="column"
         gap={2}
         sx={{
-          background: loading || user ? "#2c3e50" : undefined,
+          background: loading || user ? "#0abde3" : undefined,
           position: "relative",
           overflow: "hidden",
         }}
@@ -93,7 +93,7 @@ function App() {
                 Compete with your friends to save the most energy!
               </Typography>
               <Button
-                style={{ color: "lightgrey" }}
+                style={{ color: "white" }}
                 variant="outlined"
                 onClick={() =>
                   window.open(
diff --git a/website/src/components/DataTable.tsx b/website/src/components/DataTable.tsx
new file mode 100644
index 0000000..cd684b4
--- /dev/null
+++ b/website/src/components/DataTable.tsx
@@ -0,0 +1,35 @@
+import { Box, Typography } from "@mui/material";
+import { useMemo } from "react";
+import DataTableEntry from "./DataTableEntry";
+
+interface IProps {
+  title: string;
+  data: [string, number[]][];
+}
+
+function DataTable(props: IProps) {
+  const data = useMemo(() => {
+    return props.data.sort(
+      (a, b) => b[1][b[1].length - 1] - a[1][a[1].length - 1]
+    );
+  }, [props.data]);
+
+  return (
+    <>
+      <Box display="flex" justifyContent="space-between" px={2} py={1}>
+        <Typography>{props.title}</Typography>
+        <Typography>Power Consumption (W)</Typography>
+      </Box>
+      {data.map((d, i) => (
+        <DataTableEntry
+          key={i}
+          name={d[0]}
+          values={d[1]}
+          color={i % 2 === 0 ? "#e6e6e6" : "whitesmoke"}
+        />
+      ))}
+    </>
+  );
+}
+
+export default DataTable;
diff --git a/website/src/components/DataTableEntry.tsx b/website/src/components/DataTableEntry.tsx
new file mode 100644
index 0000000..5f69730
--- /dev/null
+++ b/website/src/components/DataTableEntry.tsx
@@ -0,0 +1,69 @@
+import { Box, Card, IconButton, Modal, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { LineChart } from "@mui/x-charts";
+import { useState } from "react";
+
+interface IProps {
+  color?: string;
+  name: string;
+  values: number[];
+}
+
+function DataTableEntry(props: IProps) {
+  const [open, setOpen] = useState(false);
+
+  console.log(open);
+
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        px={2}
+        py={1}
+        sx={{
+          background: props.color,
+          cursor: "pointer",
+        }}
+        onClick={() => setOpen(true)}
+      >
+        <Typography>{props.name}</Typography>
+        <Typography>{props.values[props.values.length - 1]}</Typography>
+      </Box>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <Card
+          elevation={8}
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%,-50%)",
+            backgroundColor: "whitesmoke",
+            borderRadius: 10,
+            width: 600,
+            padding: 16,
+          }}
+        >
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Typography variant="h5">{props.name}</Typography>
+            <IconButton onClick={() => setOpen(false)}>
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <LineChart
+            xAxis={[{ data: props.values.map((_, i) => i) }]}
+            series={[{ data: props.values }]}
+            width={600 - 2 * 16}
+            height={400}
+          />
+        </Card>
+      </Modal>
+    </>
+  );
+}
+
+export default DataTableEntry;
diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
index 48c6dde..232ffd4 100644
--- a/website/src/components/Devices.tsx
+++ b/website/src/components/Devices.tsx
@@ -1,41 +1,26 @@
-import { Box, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { UserData } from "../types";
 import { useMemo } from "react";
+import DataTable from "./DataTable";
 
 interface IProps {
   userData: UserData;
 }
 
 function Devices(props: IProps) {
-  const devices = useMemo(() => {
-    const unsorted = props.userData.devices ?? [];
-    return unsorted.sort((a, b) => b.power[0] - a.power[0]);
+  const data = useMemo(() => {
+    const devices = props.userData.devices ?? [];
+    return devices.map(
+      (device) => [device.name, device.power] as [string, number[]]
+    );
   }, [props.userData.devices]);
 
   return (
     <>
-      <Typography variant="h5" color="white" p={2}>
+      <Typography variant="h5" p={2}>
         My Devices
       </Typography>
-      <Box display="flex" justifyContent="space-between" px={2} py={1}>
-        <Typography color="white">Device Name</Typography>
-        <Typography color="white">Last Power Output</Typography>
-      </Box>
-      {devices.map((device, i) => (
-        <Box
-          key={device.name}
-          display="flex"
-          justifyContent="space-between"
-          px={2}
-          py={1}
-          sx={{
-            background: i % 2 === 1 ? "#253544" : "#2a3b4c",
-          }}
-        >
-          <Typography color="white">{device.name}</Typography>
-          <Typography color="white">{device.power[0]}</Typography>
-        </Box>
-      ))}
+      <DataTable title="Device Name" data={data} />
     </>
   );
 }
diff --git a/website/src/components/Dots.tsx b/website/src/components/Dots.tsx
index a128fbd..e9e525f 100644
--- a/website/src/components/Dots.tsx
+++ b/website/src/components/Dots.tsx
@@ -28,7 +28,7 @@ const Dots: React.FC = () => {
       options={{
         background: {
           color: {
-            value: "#2c3e50",
+            value: "#0abde3",
           },
         },
         fpsLimit: 120,
diff --git a/website/src/components/Leaderboard.tsx b/website/src/components/Leaderboard.tsx
new file mode 100644
index 0000000..e62c1b0
--- /dev/null
+++ b/website/src/components/Leaderboard.tsx
@@ -0,0 +1,54 @@
+import { CircularProgress, Typography } from "@mui/material";
+import { useCallback, useEffect, useState } from "react";
+import { getAllHomes, getMultipleUserData } from "../firebase";
+import DataTable from "./DataTable";
+
+function Leaderboard() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<[string, number[]][]>([]);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    const homes = await getAllHomes();
+    const data: [string, number[]][] = [];
+    for (const home of homes) {
+      if (home.users && home.users.length > 0) {
+        const array = await getMultipleUserData(home.users);
+        console.log(array);
+        const dataArray = array
+          .filter(
+            (data) => data.devices?.length && data.devices[0].power?.length
+          )
+          .map((data) =>
+            data.devices!.reduce(
+              (power, device) => power.map((p, i) => p + device.power![i]),
+              data.devices![0].power!.map(() => 0)
+            )
+          );
+        const sumArray = dataArray.reduce((power, user) =>
+          power.map((p, i) => p + user[i])
+        );
+        data.push([home.name, sumArray]);
+      }
+    }
+    setData(data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return !loading ? (
+    <>
+      <Typography variant="h5" color="white" p={2}>
+        Leaderboard
+      </Typography>
+      <DataTable title="Home" data={data} />
+    </>
+  ) : (
+    <CircularProgress />
+  );
+}
+
+export default Leaderboard;
diff --git a/website/src/components/MyHome.tsx b/website/src/components/MyHome.tsx
new file mode 100644
index 0000000..9742af9
--- /dev/null
+++ b/website/src/components/MyHome.tsx
@@ -0,0 +1,66 @@
+import { CircularProgress, Typography } from "@mui/material";
+import { UserData } from "../types";
+import { useCallback, useEffect, useState } from "react";
+import { getHome, getMultipleUserData } from "../firebase";
+import DataTable from "./DataTable";
+
+interface IProps {
+  userData: UserData;
+}
+
+function MyHome(props: IProps) {
+  const [loading, setLoading] = useState(true);
+  const [name, setName] = useState("");
+  const [data, setData] = useState<[string, number[]][]>([]);
+
+  const loadData = useCallback(async () => {
+    if (props.userData.home) {
+      setLoading(true);
+      const home = await getHome(props.userData.home);
+      const userDatas = await getMultipleUserData(home.users ?? []);
+      const data = userDatas
+        .filter(
+          (userData) =>
+            userData.devices?.length && userData.devices[0].power?.length
+        )
+        .map((userData) => {
+          const power = userData.devices!.reduce(
+            (power, device) => power.map((p, i) => p + device.power![i]),
+            userData.devices![0].power!.map(() => 0)
+          );
+          return [userData.name, power] as [string, number[]];
+        });
+      setName(home.name);
+      setData(data);
+      setLoading(false);
+    }
+  }, [props.userData.home]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  return props.userData.home ? (
+    !loading ? (
+      <>
+        <Typography variant="h5" p={2}>
+          {name}
+        </Typography>
+        <DataTable title="Name" data={data} />
+      </>
+    ) : (
+      <CircularProgress />
+    )
+  ) : (
+    <>
+      <Typography variant="h5" p={2}>
+        No Home
+      </Typography>
+      <Typography px={2} py={1}>
+        Join a home to see how you stack up against your housemates!
+      </Typography>
+    </>
+  );
+}
+
+export default MyHome;
diff --git a/website/src/components/UserHome.tsx b/website/src/components/UserHome.tsx
index d43981d..d809a39 100644
--- a/website/src/components/UserHome.tsx
+++ b/website/src/components/UserHome.tsx
@@ -3,6 +3,8 @@ import { Box, Button, Card, Grid, Typography } from "@mui/material";
 import { auth } from "../firebase";
 import { UserData } from "../types";
 import Devices from "./Devices";
+import MyHome from "./MyHome";
+import Leaderboard from "./Leaderboard";
 
 interface IProps {
   userData: UserData;
@@ -27,13 +29,17 @@ function UserHome(props: IProps) {
             elevation={8}
             style={{
               height: "100%",
-              backgroundColor: "#253544",
+              backgroundColor: "whitesmoke",
               borderRadius: 10,
             }}
           >
-            <Typography variant="h5" color="white" p={2}>
+<<<<<<< Updated upstream
+            <Typography variant="h5" p={2}>
               Leaderboard
             </Typography>
+=======
+            <Leaderboard />
+>>>>>>> Stashed changes
           </Card>
         </Grid>
         <Grid item p={1.5} xs={4}>
@@ -41,13 +47,11 @@ function UserHome(props: IProps) {
             elevation={8}
             style={{
               height: "100%",
-              backgroundColor: "#253544",
+              backgroundColor: "whitesmoke",
               borderRadius: 10,
             }}
           >
-            <Typography variant="h5" color="white" p={2}>
-              My Home
-            </Typography>
+            <MyHome {...props} />
           </Card>
         </Grid>
         <Grid item p={1.5} xs={4}>
@@ -55,7 +59,7 @@ function UserHome(props: IProps) {
             elevation={8}
             style={{
               height: "100%",
-              backgroundColor: "#253544",
+              backgroundColor: "whitesmoke",
               borderRadius: 10,
             }}
           >
diff --git a/website/src/firebase.ts b/website/src/firebase.ts
index 1b71e30..5a15587 100644
--- a/website/src/firebase.ts
+++ b/website/src/firebase.ts
@@ -1,7 +1,17 @@
 import { initializeApp } from "firebase/app";
-import { GithubAuthProvider, getAuth } from "firebase/auth";
-import { doc, getDoc, getFirestore, setDoc } from "firebase/firestore";
-import { UserData } from "./types";
+import { GithubAuthProvider, User, getAuth } from "firebase/auth";
+import {
+  collection,
+  doc,
+  documentId,
+  getDoc,
+  getDocs,
+  getFirestore,
+  query,
+  setDoc,
+  where,
+} from "firebase/firestore";
+import { Home, UserData } from "./types";
 
 const firebaseConfig = {
   apiKey: "AIzaSyAEZWnInWLWU5yqG7Y1NyKkQSon_RRxWNY",
@@ -19,13 +29,33 @@ const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
 export const db = getFirestore(app);
 
-export async function getUserData(uid: string) {
-  const docRef = doc(db, "users", uid);
+export async function getMultipleUserData(uids: string[]): Promise<UserData[]> {
+  const q = query(collection(db, "users"), where(documentId(), "in", uids));
+  const querySnap = await getDocs(q);
+  return querySnap.docs.map((doc) => doc.data() as UserData);
+}
+
+export async function getCurrentUserData(user: User): Promise<UserData> {
+  const docRef = doc(db, "users", user.uid);
   const docSnap = await getDoc(docRef);
   if (!docSnap.exists()) {
     await setDoc(docRef, {});
-    return {};
+    return {
+      name: user.displayName ?? "Anonymous",
+      pfp: "https://m.media-amazon.com/images/I/612-e1vHBAL._AC_SL1145_.jpg",
+    };
   }
 
   return docSnap.data() as UserData;
 }
+
+export async function getAllHomes(): Promise<Home[]> {
+  const querySnap = await getDocs(collection(db, "homes"));
+  return querySnap.docs.map((doc) => doc.data() as Home);
+}
+
+export async function getHome(id: string): Promise<Home> {
+  const docRef = doc(db, "homes", id);
+  const docSnap = await getDoc(docRef);
+  return docSnap.data() as Home;
+}
diff --git a/website/src/main.tsx b/website/src/main.tsx
index 9938ae0..dde2471 100644
--- a/website/src/main.tsx
+++ b/website/src/main.tsx
@@ -4,7 +4,7 @@ import App from "./App.tsx";
 import "./index.css";
 import { ThemeProvider, createTheme } from "@mui/material";
 
-const theme = createTheme({ typography: { fontFamily: "Jost" } });
+const theme = createTheme({ typography: { fontFamily: "Gabarito" } });
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/website/src/types.ts b/website/src/types.ts
index 005f83f..3a0ee5f 100644
--- a/website/src/types.ts
+++ b/website/src/types.ts
@@ -1,11 +1,18 @@
 export interface UserData {
   friends?: string[];
-  household?: string;
-  pfp?: string;
+  home?: string;
+  pfp: string;
+  name: string;
   devices?: Device[];
 }
 
 export interface Device {
   name: string;
-  power: number[];
+  power?: number[];
+}
+
+export interface Home {
+  name: string;
+  pfp: string;
+  users?: string[];
 }