diff --git a/webui/src/Components/Group.jsx b/webui/src/Components/Group.jsx
new file mode 100644
index 0000000..4b42052
--- /dev/null
+++ b/webui/src/Components/Group.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import {Button, Card, CardFooter, CardHeader} from "reactstrap";
+import useLights from "../Hooks/light";
+
+function Group({id, name, permissions}) {
+ const lights = useLights({groupId: id});
+
+ return (
+
+ {name}
+
+
+ {" "}
+
+ {" "}
+
+
+
+ );
+}
+
+export default Group;
diff --git a/webui/src/Components/Groups.jsx b/webui/src/Components/Groups.jsx
new file mode 100644
index 0000000..54681f0
--- /dev/null
+++ b/webui/src/Components/Groups.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import {Spinner} from "reactstrap";
+import useGroups from "../Hooks/group";
+import Group from "./Group";
+
+function Groups() {
+ const groups = useGroups();
+
+ if (groups === null) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ {groups.map(group => )}
+
+ );
+}
+
+export default Groups;
diff --git a/webui/src/Components/Header.jsx b/webui/src/Components/Header.jsx
index 894d282..322157b 100644
--- a/webui/src/Components/Header.jsx
+++ b/webui/src/Components/Header.jsx
@@ -16,7 +16,13 @@ export default function Header() {
{isLoggedIn && (