diff --git a/src/groups/GroupsList.tsx b/src/groups/GroupsList.tsx
new file mode 100644
index 0000000000..352a0ccbfd
--- /dev/null
+++ b/src/groups/GroupsList.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableVariant,
+} from "@patternfly/react-table";
+import { GroupRepresentation } from "./models/groups";
+import { useTranslation } from "react-i18next";
+
+type GroupsListProps = {
+  list: GroupRepresentation[];
+};
+
+export const GroupsList = ({ list }: GroupsListProps) => {
+  const { t } = useTranslation("group");
+  const columns: (keyof GroupRepresentation)[] = ["name"];
+
+  const data = list.map((c) => {
+    return { cells: columns.map((col) => c[col]) };
+  });
+
+  console.log(list);
+  return (
+    <Table
+      aria-label="Simple Table"
+      variant={TableVariant.compact}
+      cells={[{ title: t("Name") }]}
+      rows={data}
+    >
+      <TableHeader />
+      <TableBody />
+    </Table>
+  );
+};
diff --git a/src/groups/GroupsSection.tsx b/src/groups/GroupsSection.tsx
index 93c4a78237..1f9f895419 100644
--- a/src/groups/GroupsSection.tsx
+++ b/src/groups/GroupsSection.tsx
@@ -1,5 +1,53 @@
-import React from "react";
+import React, { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { Button } from "@patternfly/react-core";
+
+import { HttpClientContext } from "../http-service/HttpClientContext";
+import { GroupsList } from "./GroupsList";
+import { DataLoader } from "../components/data-loader/DataLoader";
+import { GroupRepresentation } from "./models/groups";
+import { TableToolbar } from "../components/table-toolbar/TableToolbar";
 
 export const GroupsSection = () => {
-  return <>The Groups Page</>;
+  const { t } = useTranslation("groups");
+  const history = useHistory();
+  const httpClient = useContext(HttpClientContext)!;
+  const [max, setMax] = useState(10);
+  const [first, setFirst] = useState(0);
+
+  const loader = async () => {
+    return await httpClient
+      .doGet("/admin/realms/master/groups", { params: { first, max } })
+      .then((r) => r.data as GroupRepresentation[]);
+  };
+
+  return (
+    <>
+      <DataLoader loader={loader}>
+        {(groups) => (
+          <TableToolbar
+            count={groups!.length}
+            first={first}
+            max={max}
+            onNextClick={setFirst}
+            onPreviousClick={setFirst}
+            onPerPageSelect={(f, m) => {
+              setFirst(f);
+              setMax(m);
+            }}
+            toolbarItem={
+              <>
+                <Button onClick={() => history.push("/add-group")}>
+                  {t("Create group")}
+                </Button>
+              </>
+            }
+          >
+            <GroupsList list={groups} />
+          </TableToolbar>
+        )}
+      </DataLoader>
+    </>
+  );
 };
diff --git a/src/groups/models/groups.tsx b/src/groups/models/groups.tsx
new file mode 100644
index 0000000000..63127542b5
--- /dev/null
+++ b/src/groups/models/groups.tsx
@@ -0,0 +1,10 @@
+export interface GroupRepresentation {
+  id?: string;
+  name?: string;
+  path?: string;
+  attributes?: { [index: string]: string[] };
+  realmRoles?: string[];
+  clientRoles?: { [index: string]: string[] };
+  subGroups?: GroupRepresentation[];
+  access?: { [index: string]: boolean };
+}