diff --git a/tfweb/src/lib/i18n/locales/en.json b/tfweb/src/lib/i18n/locales/en.json
index f648fad..74927f3 100644
--- a/tfweb/src/lib/i18n/locales/en.json
+++ b/tfweb/src/lib/i18n/locales/en.json
@@ -79,6 +79,9 @@
     "create": "Add",
     "explain": "Roles control how hosts, lighthouses, and relays communicate through firewall rules.",
     "noroles": "You don't have any roles. You'll need to add at least one before you can add any hosts.",
+    "name": "Name",
+    "rules": "Rule count",
+    "description": "Description",
     "add": {
       "any": "Any",
       "name": "Role name",
@@ -118,7 +121,9 @@
       "2fa": "2-Factor Authentication",
       "networkcreate": "Create Network",
       "hosts": "Hosts",
-      "roles": "Roles"
+      "roles": "Roles",
+      "lighthouses": "Lighthouses",
+      "relays": "Relays"
     }
   }
 }
diff --git a/tfweb/src/routes/roles/+page.svelte b/tfweb/src/routes/roles/+page.svelte
index 063f42b..93cb92c 100644
--- a/tfweb/src/routes/roles/+page.svelte
+++ b/tfweb/src/routes/roles/+page.svelte
@@ -92,6 +92,20 @@
 
     {#if (roles.data.length === 0)}
         <p>{$t("roles.noroles")}</p>
-
+    {:else}
+        <table>
+            <tr>
+                <th>{$t("roles.name")}</th>
+                <th>{$t("roles.rules")}</th>
+                <th>{$t("roles.description")}</th>
+            </tr>
+            {#each roles.data as role}
+                <tr>
+                    <td>{role.name}</td>
+                    <td>{role.firewallRules.length}</td>
+                    <td>{role.description}</td>
+                </tr>
+            {/each}
+        </table>
     {/if}
 </LoadingWrapper>
diff --git a/tfweb/src/routes/roles/add/+page.svelte b/tfweb/src/routes/roles/add/+page.svelte
index 9766224..9354afc 100644
--- a/tfweb/src/routes/roles/add/+page.svelte
+++ b/tfweb/src/routes/roles/add/+page.svelte
@@ -6,7 +6,8 @@
     import {Logger, logSetup} from "$lib/logger";
     import type {APIError} from "$lib/auth.ts";
     import {PUBLIC_BASE_URL} from "$env/static/public";
-    import {Configuration, NetworksApi, RolesApi} from "$lib/api";
+    import {Configuration, NetworksApi, RolesApi, FirewallRuleProtocolEnum} from "$lib/api";
+    import type {FirewallRule} from "$lib/api";
     import AdminBar from "$components/AdminBar.svelte";
 
     let loading = true;
@@ -221,8 +222,75 @@
         editingExistingTheRule = null;
     }
 
-    async function roleAdd() {
+    function convertRule(rule: Rule): FirewallRule {
+        let protocol;
+        if (rule.protocol == RuleProtocol.ANY) {
+            protocol = FirewallRuleProtocolEnum.Any;
+        } else if (rule.protocol == RuleProtocol.TCP) {
+            protocol = FirewallRuleProtocolEnum.Tcp;
+        } else if (rule.protocol == RuleProtocol.UDP) {
+            protocol = FirewallRuleProtocolEnum.Udp;
+        } else if (rule.protocol == RuleProtocol.ICMP) {
+            protocol = FirewallRuleProtocolEnum.Icmp;
+        }
 
+        let allowedRole = undefined;
+
+        if (rule.allowedRole == null) {
+            allowedRole = undefined;
+        } else {
+            allowedRole = rule.allowedRole;
+        }
+
+        let portRange;
+
+        if (typeof rule.portRange === "number") {
+            portRange = {
+                from: rule.portRange,
+                to: rule.portRange
+            }
+        } else if (rule.portRange === null) {
+            portRange = undefined;
+        } else {
+            portRange = {
+                from: rule.portRange[0],
+                to: rule.portRange[1]
+            }
+        }
+
+        return {
+            protocol: protocol,
+            description: rule.description,
+            allowedRoleID: allowedRole,
+            portRange: portRange
+        };
+    }
+
+    async function roleAdd() {
+        const configuration = new Configuration({
+            basePath: PUBLIC_BASE_URL,
+            accessToken: window.localStorage.getItem("session") + " " + window.localStorage.getItem("mfa")
+        });
+
+        const rolesApi = new RolesApi(configuration);
+
+        let apirules = [];
+
+        for (let i = 0; i < rules.length; i++) {
+            apirules.push(convertRule(rules[i]));
+        }
+
+        await rolesApi.roleCreate(
+            {
+                roleCreateRequest: {
+                    name: roleName,
+                    description: roleDescription,
+                    firewallRules: apirules
+                }
+            }
+        );
+
+        window.location.href = "/roles"
     }
 </script>