diff --git a/code/game/jobs/access.dm b/code/game/jobs/access.dm
index d5a59a36872..48ac91c72fa 100644
--- a/code/game/jobs/access.dm
+++ b/code/game/jobs/access.dm
@@ -510,3 +510,26 @@ proc/get_all_job_icons() //For all existing HUD icons
 		return rankName
 
 	return "Unknown" //Return unknown if none of the above apply
+
+proc/get_accesslist_static_data(num_min_region = REGION_GENERAL, num_max_region = REGION_COMMAND)
+	var/list/retval
+	for(var/i in num_min_region to num_max_region)
+		var/list/accesses = list()
+		var/list/available_accesses
+		if(i == REGION_CENTCOMM) // Override necessary, because get_region_accesses(REGION_CENTCOM) returns BOTH CC and crew accesses.
+			available_accesses = get_all_centcom_access()
+		else
+			available_accesses = get_region_accesses(i)
+		for(var/access in available_accesses)
+			var/access_desc = (i == REGION_CENTCOMM) ? get_centcom_access_desc(access) : get_access_desc(access)
+			if (access_desc)
+				accesses += list(list(
+					"desc" = replacetext(access_desc, "&nbsp", " "),
+					"ref" = access,
+				))
+		retval += list(list(
+			"name" = get_region_accesses_name(i),
+			"regid" = i,
+			"accesses" = accesses
+		))
+	return retval
diff --git a/tgui/packages/tgui/interfaces/common/AccessList.js b/tgui/packages/tgui/interfaces/common/AccessList.js
new file mode 100644
index 00000000000..1a077027dc3
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/common/AccessList.js
@@ -0,0 +1,132 @@
+import { sortBy } from 'common/collections';
+import { Fragment } from 'inferno';
+import { useLocalState } from '../../backend';
+import { Button, Flex, Grid, Section, Tabs } from '../../components';
+
+const diffMap = {
+  0: {
+    icon: 'times-circle',
+    color: 'bad',
+  },
+  1: {
+    icon: 'stop-circle',
+    color: null,
+  },
+  2: {
+    icon: 'check-circle',
+    color: 'good',
+  },
+};
+
+export const AccessList = (props, context) => {
+  const {
+    accesses = [],
+    selectedList = [],
+    accessMod,
+    grantAll,
+    denyAll,
+    grantDep,
+    denyDep,
+  } = props;
+  const [
+    selectedAccessName,
+    setSelectedAccessName,
+  ] = useLocalState(context, 'accessName', accesses[0]?.name);
+  const selectedAccess = accesses
+    .find(access => access.name === selectedAccessName);
+  const selectedAccessEntries = sortBy(
+    entry => entry.desc,
+  )(selectedAccess?.accesses || []);
+
+  const checkAccessIcon = accesses => {
+    let oneAccess = false;
+    let oneInaccess = false;
+    for (let element of accesses) {
+      if (selectedList.includes(element.ref)) {
+        oneAccess = true;
+      }
+      else {
+        oneInaccess = true;
+      }
+    }
+    if (!oneAccess && oneInaccess) {
+      return 0;
+    }
+    else if (oneAccess && oneInaccess) {
+      return 1;
+    }
+    else {
+      return 2;
+    }
+  };
+
+  return (
+    <Section
+      title="Access"
+      buttons={(
+        <Fragment>
+          <Button
+            icon="check-double"
+            content="Select All"
+            color="good"
+            onClick={() => grantAll()} />
+          <Button
+            icon="undo"
+            content="Deselect All"
+            color="bad"
+            onClick={() => denyAll()} />
+        </Fragment>
+      )}>
+      <Flex>
+        <Flex.Item>
+          <Tabs vertical>
+            {accesses.map(access => {
+              const entries = access.accesses || [];
+              const icon = diffMap[checkAccessIcon(entries)].icon;
+              const color = diffMap[checkAccessIcon(entries)].color;
+              return (
+                <Tabs.Tab
+                  key={access.name}
+                  altSelection
+                  color={color}
+                  icon={icon}
+                  selected={access.name === selectedAccessName}
+                  onClick={() => setSelectedAccessName(access.name)}>
+                  {access.name}
+                </Tabs.Tab>
+              );
+            })}
+          </Tabs>
+        </Flex.Item>
+        <Flex.Item grow={1}>
+          <Grid>
+            <Grid.Column mr={0}>
+              <Button
+                fluid
+                icon="check"
+                content="Select All In Region"
+                color="good"
+                onClick={() => grantDep(selectedAccess.regid)} />
+            </Grid.Column>
+            <Grid.Column ml={0}>
+              <Button
+                fluid
+                icon="times"
+                content="Deselect All In Region"
+                color="bad"
+                onClick={() => denyDep(selectedAccess.regid)} />
+            </Grid.Column>
+          </Grid>
+          {selectedAccessEntries.map(entry => (
+            <Button.Checkbox
+              fluid
+              key={entry.desc}
+              content={entry.desc}
+              checked={selectedList.includes(entry.ref)}
+              onClick={() => accessMod(entry.ref)} />
+          ))}
+        </Flex.Item>
+      </Flex>
+    </Section>
+  );
+};