diff --git a/dashboard/src/lib/group/List.svelte b/dashboard/src/lib/group/List.svelte
deleted file mode 100644
index 1b16e6d5..00000000
--- a/dashboard/src/lib/group/List.svelte
+++ /dev/null
@@ -1,367 +0,0 @@
-<script lang="ts">
-    import { Link } from 'svelte-navigator';
-    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Label, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
-    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
-    import { onMount } from 'svelte';
-    import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
-    import { useParams } from 'svelte-navigator';
-    import CardsHeader from '../CardsHeader.svelte';
-    import ListPagination from '../ListPagination.svelte';
-    import Body from './Body.svelte';
-    import Svelecte, { addFormatter } from 'svelecte';
-    import FaLock from 'svelte-icons/fa/FaLock.svelte';
-    import NewGroup from './NewGroup.svelte';
-
-    import { Member, Group } from '../../api/types';
-    import api from '../../api';
-
-    export let isPublic: boolean;
-
-    export let list: Group[];
-    export let members: Member[];
-
-    $: memberlist = members && members.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
-
-    let token = localStorage.getItem("pk-token");
-    let listLoading = true;
-    let err: string;
-
-    let settings = JSON.parse(localStorage.getItem("pk-settings"));
-
-    let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
-    $: itemsPerPage = parseInt(itemsPerPageValue);
-
-    let searchBy = "name";
-    let sortBy = "name";
-    let sortOrder = "ascending";
-    let privacyFilter = "all";
-    let memberSearchMode = "include";
-    let selectedMembers = [];
-
-    let currentPage = 1;
-
-    let params = useParams();
-    $: id = $params.id;
-
-    onMount(() => {
-        if (token || isPublic) fetchGroups();
-    });
-
-
-    async function fetchGroups() {
-        err = "";
-        listLoading = true;
-        try {
-            const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic, query: { with_members: !isPublic } });
-            list = res;
-            listLoading = false;
-        } catch (error) {
-            console.log(error);
-            err = error.message;
-            listLoading = false;
-        }
-    }
-
-    let searchValue: string;
-
-    $: {searchValue; privacyFilter; currentPage = 1};
-
-    $: searchedList = list.filter((item) => {
-        if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
-        
-        switch (searchBy) {
-            case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            case "display name": if (!searchValue) {
-                if (!item.display_name) return true;
-                else return false;
-            }
-            if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            case "description": if (!searchValue) {
-                if (!item.description) return true;
-                else return false;
-            }
-            else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-        }
-
-        return false;
-    })
-
-    $: filteredList = searchedList.filter((item) => {
-        if (privacyFilter === "all") return true;
-        if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
-        if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
-        return false;
-    });
-    
-    let sortedList = [];
-
-    $: if (filteredList) {
-        switch (sortBy) {
-            case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
-            break;
-            case "display name": sortedList = filteredList.sort((a, b) => {
-                if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
-                else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
-                else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
-                else return a.name.localeCompare(b.name);
-            });
-            break;
-            case "creation date": sortedList = filteredList.sort((a, b) => {
-                if (a.created && b.created) return a.created.localeCompare(b.created);
-            });
-            break;
-            case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
-            break;
-            default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
-            break;
-        }
-    }
-
-    let memberFilteredList = [];
-    $: memberFilteredList = sortedList.filter((item: Group) => {
-        if (memberSearchMode === "none") {
-            if (item.members && item.members.length > 0) return false;
-        }
-
-        if (selectedMembers.length < 1) return true;
-
-        switch (memberSearchMode) {
-            case "include": if (item.members && selectedMembers.some(value => item.members.includes(value))) return true;
-            break;
-            case "exclude": if (item.members && selectedMembers.every(value => !item.members.includes(value))) return true;
-            break;
-            case "match": if (item.members && selectedMembers.every(value => item.members.includes(value))) return true;
-            break;
-            default: return true;
-        }
-
-        return false;
-    });
-
-    let finalList = [];
-    $:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
-
-    $: finalList = finalList;
-
-    $: indexOfLastItem = currentPage * itemsPerPage;
-    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
-    $: pageAmount = Math.ceil(finalList.length / itemsPerPage);
-
-    let slicedList = [];
-    $: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
-
-    function memberListRenderer(item: any) {
-    return `${item.name} (<code>${item.shortid}</code>)`;
-  }
-
-  addFormatter({
-    'member-list': memberListRenderer
-  });
-
-  function updateList(event: any) {
-      list = list.map(group => group.id !== event.detail.id ? group : event.detail)
-  }
-
-  function updateDelete(event: any) {
-      list = list.filter(group => group.id !== event.detail);
-  }
-
-  function addGroupToList(event: any) {
-      // reference types my beloathed
-      // the stringify/parse sequence is here so that a previous added group doesn't get overwritten
-      let group = JSON.parse(JSON.stringify(event.detail));
-      group.members = [];
-      list.push(group);
-      list = list;
-  }
-</script>
-
-<Card class="mb-3">
-    <CardHeader>
-        <CardTitle>
-            <CardTitle style="margin-top: 8px; outline: none;">
-                <div class="icon d-inline-block">
-                    <FaSearch />
-                </div> Search groups
-            </CardTitle>
-        </CardTitle>
-    </CardHeader>
-    <CardBody>
-        <Row>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Page length</InputGroupText>
-                    <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
-                        <option>10</option>
-                        <option>25</option>
-                        <option>50</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Search by</InputGroupText>
-                    <Input bind:value={searchBy} type="select" aria-label="search by">
-                        <option>name</option>
-                        <option>display name</option>
-                        <option>description</option>
-                        <option>ID</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Sort by</InputGroupText>
-                    <Input bind:value={sortBy} type="select" aria-label="sort by">
-                        <option>name</option>
-                        <option>display name</option>
-                        {#if !isPublic}<option>creation date</option>{/if}
-                        <option>ID</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Sort order</InputGroupText>
-                    <Input bind:value={sortOrder} type="select" aria-label="sort order">
-                        <option>ascending</option>
-                        <option>descending</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            {#if !isPublic}
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Only show</InputGroupText>
-                    <Input bind:value={privacyFilter} type="select" aria-label="only show">
-                        <option>all</option>
-                        <option>public</option>
-                        <option>private</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            {/if}
-        </Row>
-        {#if !isPublic}
-        <hr/>
-        <Label>Filter groups by member</Label>
-        <Svelecte renderer="member-list" bind:value={selectedMembers} disableHighlight options={memberlist} multiple style="margin-bottom: 0.5rem">
-        </Svelecte>
-        <span style="cursor: pointer" id="g-include" on:click={() => memberSearchMode = "include"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "include" : ""} tabindex={0}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
-         | <span style="cursor: pointer" id="g-exclude" on:click={() => memberSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "exclude" : ""} tabindex={0}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
-         | <span style="cursor: pointer" id="g-match" on:click={() => memberSearchMode = "match"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "match" : ""} tabindex={0}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
-         | <span style="cursor: pointer" id="g-none" on:click={() => memberSearchMode = "none"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "none" : ""} tabindex={0}>{@html memberSearchMode === "none" ? "<b>none</b>" : "none"}</span>
-        <Tooltip placement="bottom" target="g-include">Includes every group with any of the members.</Tooltip>
-        <Tooltip placement="bottom" target="g-exclude">Excludes every group with any of the members, opposite of include.</Tooltip>
-        <Tooltip placement="bottom" target="g-match">Only includes groups which have all the members selected.</Tooltip>
-        <Tooltip placement="bottom" target="g-none">Only includes groups that have no members.</Tooltip>
-        {/if}
-    </CardBody>
-</Card>
-
-
-{#if listLoading && !err}
-    <div class="mx-auto text-center">
-        <Spinner class="d-inline-block" />
-    </div>
-{:else if err}
-<Row>
-    <Col xs={12} lg={10}>
-        <Alert color="danger">{err}</Alert>
-    </Col>
-    <Col xs={12} lg={2}>
-        <Button class="w-100 mb-3" color="primary" on:click={fetchGroups} aria-label="refresh group list">Refresh</Button>
-    </Col>
-</Row>
-{:else}
-
-<Row>
-    <Col xs={12} lg={10} class="mb-2 mb-lg-0">
-        <Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
-    </Col>
-    <Col xs={12} lg={2}>
-        <Button class="w-100 mb-3" color="primary" on:click={fetchGroups} aria-label="refresh group list">Refresh</Button>
-    </Col>
-</Row>
-<ListPagination bind:currentPage bind:pageAmount />
-{#if !isPublic}
-<NewGroup on:create={addGroupToList} />
-{/if}
-{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
-<Accordion class="my-3" stayOpen>
-    {#each slicedList as group, index (group.id)}
-        {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
-        <AccordionItem>
-            <CardsHeader bind:item={group} slot="header">
-                <FaUsers slot="icon" />
-            </CardsHeader>
-            <Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} bind:members bind:group bind:isPublic={isPublic}/>
-        </AccordionItem>
-        {:else}
-        <AccordionItem>
-            <CardsHeader bind:item={group} slot="header">
-                <FaLock slot="icon" />
-            </CardsHeader>
-            <Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} bind:members bind:group bind:isPublic={isPublic}/>
-        </AccordionItem>
-        {/if}
-    {/each}
-</Accordion>
-{:else if settings.accessibility.expandedcards}
-    {#each slicedList as group, index (group.id)}
-    {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
-    <Card class="mb-3">
-        <CardHeader>
-            <CardsHeader item={group}>
-                <FaUsers slot="icon" />
-            </CardsHeader>
-        </CardHeader>
-        <CardBody>
-            <Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} isPublic={isPublic} bind:members bind:group />
-        </CardBody>
-    </Card>
-    {:else}
-    <Card class="mb-3">
-        <CardHeader>
-            <CardsHeader item={group}>
-                <FaLock slot="icon" />
-            </CardsHeader>
-        </CardHeader>
-        <CardBody>
-            <Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} isPublic={isPublic} bind:group bind:members />
-        </CardBody>
-    </Card>
-    {/if}
-    {/each}
-{:else}
-    <div class="my-3">
-    {#each slicedList as group, index (group.id)}
-    {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
-    <Card>
-        <Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
-            <CardsHeader bind:item={group}>
-                <FaUsers slot="icon" />
-            </CardsHeader>
-        </Link>
-    </Card>
-    {:else}
-    <Card>
-        <Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
-            <CardsHeader bind:item={group}>
-                <FaLock slot="icon" />
-            </CardsHeader>
-        </Link>
-    </Card>
-    {/if}
-    {/each}
-    </div>
-{/if}
-<ListPagination bind:currentPage bind:pageAmount />
-{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/list/List.svelte b/dashboard/src/lib/list/List.svelte
new file mode 100644
index 00000000..111073cf
--- /dev/null
+++ b/dashboard/src/lib/list/List.svelte
@@ -0,0 +1,232 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
+    import { onMount } from 'svelte';
+    import { Link, useParams } from 'svelte-navigator';
+
+    import FaLock from 'svelte-icons/fa/FaLock.svelte';
+    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
+
+    import MemberBody from '../member/Body.svelte';
+    import GroupBody from '../group/Body.svelte';
+    import NewMember from '../member/NewMember.svelte';
+    import NewGroup from '../group/NewGroup.svelte';
+    import CardsHeader from '../CardsHeader.svelte';
+    import ListPagination from '../ListPagination.svelte';
+    import ListControl from './ListControl.svelte';
+    import ListSearch from './ListSearch.svelte';
+
+    import { Member, Group } from '../../api/types';
+    import api from '../../api';
+
+    export let members: Member[] = [];
+    export let groups: Group[] = [];
+
+    let list: Member[] | Group[] = [];
+    let processedList: Member[] | Group[] = [];
+
+    $: groupList = groups && groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+    $: memberList = members && members.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+
+    let token = localStorage.getItem("pk-token");
+    let listLoading = true;
+    let err: string;
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    
+    let pageAmount: number;
+    let currentPage: number = 1;
+
+    let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
+    $: itemsPerPage = parseInt(itemsPerPageValue);
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(processedList.length / itemsPerPage);
+
+    $: slicedList = processedList.slice(indexOfFirstItem, indexOfLastItem);
+
+    export let isPublic: boolean;
+    export let isMainDash = true;
+    export let itemType: string;
+
+    let searchValue: string = "";
+    let searchBy: string = ""; 
+
+    let params = useParams();
+    $: id = $params.id;
+
+    onMount(() => {
+        if (token || isPublic) fetchList();
+    });
+
+    async function fetchList() {
+        err = "";
+        listLoading = true;
+        try {
+            if (itemType === "member") { 
+                const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
+                members = res;
+                list = res;
+            }
+            else if (itemType === "group") {
+                const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic, query: { with_members: !isPublic } });
+                groups = res;
+                list = res;
+            }
+            else throw new Error(`Unknown list type ${itemType}`);
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+        listLoading = false;
+    }
+
+    function addItemToList(event: any) {
+        if (itemType === "member") {
+            members.push(event.detail);
+            members = members;
+        } else if (itemType === "group") {
+            
+        }
+
+
+        list.push(event.detail);
+        list = list;
+    }
+
+    /* function updateList(event: any) {
+        list = list.map(member => member.id !== event.detail.id ? member : event.detail);
+    } */
+
+    /* function updateGroups(event: any) {
+        groups = event.detail;
+    } */
+
+    function updateDelete(event: any) {
+        list = (list as any[]).filter(item => item.id !== event.detail);
+    }
+
+    function getItemLink(item: Member | Group): string {
+        let url: string;
+
+        if (isMainDash) url = "/dash/";
+        else url = "/profile/";
+        
+        if (itemType === "member") url += "m/";
+        else if (itemType === "group") url += "g/";
+
+        url += item.id;
+
+        return url;
+    }
+
+</script>
+
+<ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue />
+
+{#if listLoading && !err}
+    <div class="mx-auto text-center">
+        <Spinner class="d-inline-block" />
+    </div>
+{:else if err}
+<Row>
+    <Col xs={12} lg={10}>
+        <Alert color="danger">{err}</Alert>
+    </Col>
+    <Col xs={12} lg={2}>
+        <Button class="w-100 mb-3" color="primary" on:click={fetchList} aria-label="refresh member list">Refresh</Button>
+    </Col>
+</Row>
+{:else}
+<ListSearch bind:searchBy bind:searchValue on:refresh={fetchList} />
+
+<ListPagination bind:currentPage bind:pageAmount />
+{/if}
+
+{#if !err && !isPublic}
+    {#if itemType === "member"}
+    <NewMember on:create={addItemToList} />
+    {:else if itemType === "group"}
+    <NewGroup on:create={addItemToList} />
+    {/if}
+{/if}
+
+{#if !listLoading && !err}
+{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
+<Accordion class="my-3" stayOpen>
+    {#each slicedList as item, index}
+    <AccordionItem>
+        <CardsHeader {item} slot="header">
+            <div slot="icon">
+                {#if isPublic || item.privacy.visibility === "public"}
+                {#if itemType === "member"}
+                <FaUserCircle />
+                {:else if itemType === "group"}
+                <FaUsers />
+                {/if}
+                {:else}
+                <FaLock />
+                {/if}
+            </div>
+        </CardsHeader>
+        {#if itemType === "member"}
+        <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
+        {:else if itemType === "group"}
+        <GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
+        {/if}
+    </AccordionItem>
+    {/each}
+</Accordion>
+{:else if settings.accessibility.expandedcards}
+    {#each slicedList as item, index}
+    <Card class="mb-3">
+        <CardHeader>
+            <CardsHeader {item} slot="header">
+                <div slot="icon">
+                    {#if isPublic || item.privacy.visibility === "public"}
+                    {#if itemType === "member"}
+                    <FaUserCircle />
+                    {:else if itemType === "group"}
+                    <FaUsers />
+                    {/if}
+                    {:else}
+                    <FaLock />
+                    {/if}
+                </div>
+            </CardsHeader>
+        </CardHeader>
+        <CardBody>
+            {#if itemType === "member"}
+            <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
+            {:else if itemType === "group"}
+            <GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
+            {/if}
+        </CardBody>
+    </Card>
+    {/each}
+{:else}
+    <div class="my-3">
+    {#each slicedList as item, index}
+    <Card>
+        <Link class="accordion-button collapsed" style="text-decoration: none;" to={getItemLink(item)}>
+            <CardsHeader {item} slot="header">
+                <div slot="icon">
+                    {#if isPublic || item.privacy.visibility === "public"}
+                    {#if itemType === "member"}
+                    <FaUserCircle />
+                    {:else if itemType === "group"}
+                    <FaUsers />
+                    {/if}
+                    {:else}
+                    <FaLock />
+                    {/if}
+                </div>
+            </CardsHeader>
+        </Link>
+    </Card>
+    {/each}
+    </div>
+{/if}
+<ListPagination bind:currentPage {pageAmount} />
+{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/list/ListControl.svelte b/dashboard/src/lib/list/ListControl.svelte
new file mode 100644
index 00000000..626b4e74
--- /dev/null
+++ b/dashboard/src/lib/list/ListControl.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
+import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
+import Svelecte, { addFormatter } from 'svelecte';
+import { Member, Group } from '../../api/types';
+
+export let list: Member[] | Group[] = [];
+
+export let itemType: string;
+export let memberList: any = [];
+export let groups: Group[] = [];
+export let groupList: any = [];
+
+export let searchBy = "name";
+export let searchValue: string;
+export let itemsPerPageValue: string;
+
+let sortBy = "name";
+let sortOrder = "ascending";
+let privacyFilter = "all";
+let groupSearchMode = "include";
+let selectedGroups = [];
+
+export let currentPage = 1;
+export let isPublic: boolean;
+
+$: {searchValue; privacyFilter; currentPage = 1};
+
+// converting list to any[] avoids a "this expression is not calleable" error
+$: searchedList = (list as any[]).filter((item: Member | Group) => {
+    if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
+    
+    switch (searchBy) {
+        case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        case "display name": if (!searchValue) {
+            if (!item.display_name) return true;
+            else return false;
+        }
+        if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        case "description": if (!searchValue) {
+            if (!item.description) return true;
+            else return false;
+        }
+        else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+        default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
+        break;
+    }
+
+    return false;
+})
+
+$: filteredList = searchedList.filter((item) => {
+    if (privacyFilter === "all") return true;
+    if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
+    if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
+    return false;
+});
+
+let sortedList = [];
+
+$: if (filteredList) {
+    switch (sortBy) {
+        case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+        case "display name": sortedList = filteredList.sort((a, b) => {
+            if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
+            else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
+            else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
+            else return a.name.localeCompare(b.name);
+        });
+        break;
+        case "creation date": sortedList = filteredList.sort((a, b) => {
+            if (a.created && b.created) return a.created.localeCompare(b.created);
+        });
+        break;
+        case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
+        break;
+        default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+    }
+}
+
+let memberFilteredList = [];
+$: memberFilteredList = sortedList.filter((item: Member | Group): boolean => { 
+    if (itemType === "member") {
+        if (groupSearchMode === "none") {
+            if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
+        }
+
+        if (selectedGroups.length < 1) return true;
+
+        switch (groupSearchMode) {
+            case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
+            break;
+            case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
+            break;
+            case "match": if (selectedGroups.every(group => group.members && group.members.includes(item.uuid))) return true;
+            break;
+            default: return true;
+        }
+    } else if (itemType === "group") {
+        let group = (item as Group);
+
+        if (groupSearchMode === "none") {
+            if (group.members && group.members.length > 0) return false;
+        }
+
+        if (selectedGroups.length < 1) return true;
+
+        switch (groupSearchMode) {
+            case "include": if (group.members && selectedGroups.some(member => group.members.includes(member.id))) return true;
+            break;
+            case "exclude": if (group.members && selectedGroups.every(member => !group.members.includes(member.id))) return true;
+            break;
+            case "match": if (group.members && selectedGroups.every(member => group.members.includes(member.id))) return true;
+            break;
+            default: return true;
+        }
+    }
+    return false;
+})
+
+export let finalList = [];
+$:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
+
+function groupListRenderer(item: any) {
+return `${item.name} (<code>${item.shortid}</code>)`;
+}
+
+addFormatter({
+    'group-list': groupListRenderer
+});
+
+function memberListRenderer(item: any) {
+    return `${item.name} (<code>${item.shortid}</code>)`;
+}
+
+addFormatter({
+    'member-list': memberListRenderer
+});
+</script>
+
+<Card class="mb-3">
+<CardHeader>
+    <CardTitle>
+        <CardTitle style="margin-top: 8px; outline: none;">
+            <div class="icon d-inline-block">
+                <FaSearch />
+            </div> Search {itemType === "member" ? "members" : "groups"}
+        </CardTitle>
+    </CardTitle>
+</CardHeader>
+<CardBody>
+    <Row>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Page length</InputGroupText>
+                <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
+                    <option>10</option>
+                    <option>25</option>
+                    <option>50</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Search by</InputGroupText>
+                <Input bind:value={searchBy} type="select" aria-label="search by">
+                    <option>name</option>
+                    <option>display name</option>
+                    <option>description</option>
+                    <option>ID</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Sort by</InputGroupText>
+                <Input bind:value={sortBy} type="select" aria-label="sort by">
+                    <option>name</option>
+                    <option>display name</option>
+                    {#if !isPublic}<option>creation date</option>{/if}
+                    <option>ID</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Sort order</InputGroupText>
+                <Input bind:value={sortOrder} type="select" aria-label="sort order">
+                    <option>ascending</option>
+                    <option>descending</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        {#if !isPublic}
+        <Col xs={12} lg={3} class="mb-2">
+            <InputGroup>
+                <InputGroupText>Only show</InputGroupText>
+                <Input bind:value={privacyFilter} type="select" aria-label="only show">
+                    <option>all</option>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </InputGroup>
+        </Col>
+        {/if}
+    </Row>
+    {#if !isPublic}
+    <hr/>
+    <Label>Filter {itemType === "member" ? "member" : "group"} by {itemType === "member" ? "group" : "member"}</Label>
+    {#if itemType === "member"}
+    <Svelecte disableHighlight renderer="group-list" valueAsObject bind:value={selectedGroups} options={groupList} multiple style="margin-bottom: 0.5rem" />
+    {:else if itemType === "group"}
+    <Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={memberList} multiple style="margin-bottom: 0.5rem" />
+    {/if}
+
+    <span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+     | <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+     | <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+     | <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
+    <Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
+    <Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
+    <Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
+    <Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
+    {/if}
+</CardBody>
+</Card>
\ No newline at end of file
diff --git a/dashboard/src/lib/list/ListSearch.svelte b/dashboard/src/lib/list/ListSearch.svelte
new file mode 100644
index 00000000..8b8e7562
--- /dev/null
+++ b/dashboard/src/lib/list/ListSearch.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte";
+import { Button, Col, Input, Row } from "sveltestrap";
+
+export let searchValue: string;
+export let searchBy: string;
+
+const dispatch = createEventDispatcher();
+
+function update() {
+    dispatch("refresh");
+}
+
+</script>
+
+<Row>
+    <Col xs={12} lg={10}>
+        <Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
+    </Col>
+    <Col xs={12} lg={2} class="mb-3 mb-lg-0">
+        <Button class="w-100 mb-3" color="primary" on:click={() => update()} aria-label="refresh member list">Refresh</Button>
+    </Col>
+</Row>
\ No newline at end of file
diff --git a/dashboard/src/lib/member/List.svelte b/dashboard/src/lib/member/List.svelte
deleted file mode 100644
index 33efa25a..00000000
--- a/dashboard/src/lib/member/List.svelte
+++ /dev/null
@@ -1,366 +0,0 @@
-<script lang="ts">
-    import { Link } from 'svelte-navigator';
-    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
-    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
-    import { onMount } from 'svelte';
-    import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
-    import { useParams } from 'svelte-navigator';
-    import CardsHeader from '../CardsHeader.svelte';
-    import ListPagination from '../ListPagination.svelte';
-    import Svelecte, { addFormatter } from 'svelecte';
-    import FaLock from 'svelte-icons/fa/FaLock.svelte';
-    import Body from './Body.svelte';
-    import NewMember from './NewMember.svelte';
-
-    import { Member, Group } from '../../api/types';
-    import api from '../../api';
-
-    export let isPublic: boolean;
-
-    export let list: Member[] = [];
-    export let groups: Group[] = [];
-    export let isMainDash = true;
-
-    $: grouplist = groups && groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
-
-    let token = localStorage.getItem("pk-token");
-    let listLoading = true;
-    let err: string;
-
-    let settings = JSON.parse(localStorage.getItem("pk-settings"));
-
-    let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
-    $: itemsPerPage = parseInt(itemsPerPageValue);
-
-    let searchBy = "name";
-    let sortBy = "name";
-    let sortOrder = "ascending";
-    let privacyFilter = "all";
-    let groupSearchMode = "include";
-    let selectedGroups = [];
-
-    let currentPage = 1;
-
-    let params = useParams();
-    $: id = $params.id;
-
-    onMount(() => {
-        if (token || isPublic) fetchMembers();
-    });
-
-    async function fetchMembers() {
-        err = "";
-        listLoading = true;
-        try {
-            const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
-            list = res;
-            listLoading = false;
-        } catch (error) {
-            console.log(error);
-            err = error.message;
-            listLoading = false;
-        }
-    }
-
-    let searchValue: string;
-
-    $: {searchValue; privacyFilter; currentPage = 1};
-
-    $: searchedList = list.filter((item) => {
-        if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
-        
-        switch (searchBy) {
-            case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            case "display name": if (!searchValue) {
-                if (!item.display_name) return true;
-                else return false;
-            }
-            if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            case "description": if (!searchValue) {
-                if (!item.description) return true;
-                else return false;
-            }
-            else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-            default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
-            break;
-        }
-
-        return false;
-    })
-
-    $: filteredList = searchedList.filter((item) => {
-        if (privacyFilter === "all") return true;
-        if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
-        if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
-        return false;
-    });
-    
-    let sortedList = [];
-
-    $: if (filteredList) {
-        switch (sortBy) {
-            case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
-            break;
-            case "display name": sortedList = filteredList.sort((a, b) => {
-                if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
-                else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
-                else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
-                else return a.name.localeCompare(b.name);
-            });
-            break;
-            case "creation date": sortedList = filteredList.sort((a, b) => {
-                if (a.created && b.created) return a.created.localeCompare(b.created);
-            });
-            break;
-            case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
-            break;
-            default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
-            break;
-        }
-    }
-
-    let memberFilteredList = [];
-    $: memberFilteredList = sortedList.filter((item: Member) => {      
-        if (groupSearchMode === "none") {
-            if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
-        }
-
-        if (selectedGroups.length < 1) return true;
-
-        switch (groupSearchMode) {
-            case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
-            break;
-            case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
-            break;
-            case "match": if (selectedGroups.every(group => group.members && group.members.includes(item.uuid))) return true;
-            break;
-            default: return true;
-        }
-
-        return false;
-    })
-
-    let finalList = [];
-    $:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
-
-    $: finalList = finalList;
-
-    $: indexOfLastItem = currentPage * itemsPerPage;
-    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
-    $: pageAmount = Math.ceil(finalList.length / itemsPerPage);
-
-    $: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
-
-    function groupListRenderer(item: any) {
-    return `${item.name} (<code>${item.shortid}</code>)`;
-  }
-
-  addFormatter({
-    'member-list': groupListRenderer
-  });
-
-  function updateList(event: any) {
-      list = list.map(member => member.id !== event.detail.id ? member : event.detail);
-  }
-  
-  function updateGroups(event: any) {
-      groups = event.detail;
-  }
-
-  function updateDelete(event: any) {
-      list = list.filter(member => member.id !== event.detail);
-  }
-
-  function addMemberToList(event: any) {
-      list.push(event.detail);
-      list = list;
-  }
-</script>
-
-<Card class="mb-3">
-    <CardHeader>
-        <CardTitle>
-            <CardTitle style="margin-top: 8px; outline: none;">
-                <div class="icon d-inline-block">
-                    <FaSearch />
-                </div> Search members
-            </CardTitle>
-        </CardTitle>
-    </CardHeader>
-    <CardBody>
-        <Row>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Page length</InputGroupText>
-                    <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
-                        <option>10</option>
-                        <option>25</option>
-                        <option>50</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Search by</InputGroupText>
-                    <Input bind:value={searchBy} type="select" aria-label="search by">
-                        <option>name</option>
-                        <option>display name</option>
-                        <option>description</option>
-                        <option>ID</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Sort by</InputGroupText>
-                    <Input bind:value={sortBy} type="select" aria-label="sort by">
-                        <option>name</option>
-                        <option>display name</option>
-                        {#if !isPublic}<option>creation date</option>{/if}
-                        <option>ID</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Sort order</InputGroupText>
-                    <Input bind:value={sortOrder} type="select" aria-label="sort order">
-                        <option>ascending</option>
-                        <option>descending</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            {#if !isPublic}
-            <Col xs={12} lg={3} class="mb-2">
-                <InputGroup>
-                    <InputGroupText>Only show</InputGroupText>
-                    <Input bind:value={privacyFilter} type="select" aria-label="only show">
-                        <option>all</option>
-                        <option>public</option>
-                        <option>private</option>
-                    </Input>
-                </InputGroup>
-            </Col>
-            {/if}
-        </Row>
-        {#if !isPublic}
-        <hr/>
-        <Label>Filter members by group</Label>
-        <Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={grouplist} multiple style="margin-bottom: 0.5rem">
-        </Svelecte>
-        <span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
-         | <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
-         | <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
-         | <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
-        <Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
-        <Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
-        <Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
-        <Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
-        {/if}
-    </CardBody>
-</Card>
-
-
-{#if listLoading && !err}
-    <div class="mx-auto text-center">
-        <Spinner class="d-inline-block" />
-    </div>
-{:else if err}
-<Row>
-    <Col xs={12} lg={10}>
-        <Alert color="danger">{err}</Alert>
-    </Col>
-    <Col xs={12} lg={2}>
-        <Button class="w-100 mb-3" color="primary" on:click={fetchMembers} aria-label="refresh member list">Refresh</Button>
-    </Col>
-</Row>
-{:else}
-
-<Row>
-    <Col xs={12} lg={10}>
-        <Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
-    </Col>
-    <Col xs={12} lg={2} class="mb-3 mb-lg-0">
-        <Button class="w-100 mb-3" color="primary" on:click={fetchMembers} aria-label="refresh member list">Refresh</Button>
-    </Col>
-</Row>
-<ListPagination bind:currentPage bind:pageAmount />
-{#if !isPublic}
-<NewMember on:create={addMemberToList} />
-{/if}
-{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
-<Accordion class="my-3" stayOpen>
-    {#each slicedList as member, index (member.id)}
-            {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
-            <AccordionItem>
-                <CardsHeader bind:item={member} slot="header">
-                    <FaUserCircle slot="icon" />
-                </CardsHeader>
-                <Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
-            </AccordionItem>
-            {:else}
-            <AccordionItem>
-                <CardsHeader bind:item={member} slot="header">
-                    <FaLock slot="icon" />
-                </CardsHeader>
-                <Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
-            </AccordionItem>
-            {/if}
-    {/each}
-</Accordion>
-{:else if settings.accessibility.expandedcards}
-    {#each slicedList as member, index (member.id)}
-    {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
-    <Card class="mb-3">
-        <CardHeader>
-            <CardsHeader bind:item={member}>
-                <FaUserCircle slot="icon" />
-            </CardsHeader>
-        </CardHeader>
-        <CardBody>
-            <Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
-        </CardBody>
-    </Card>
-    {:else}
-    <Card class="mb-3">
-        <CardHeader>
-            <CardsHeader bind:item={member}>
-                <FaLock slot="icon" />
-            </CardsHeader>
-        </CardHeader>
-        <CardBody>
-            <Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
-        </CardBody>
-    </Card>
-    {/if}
-    {/each}
-{:else}
-    <div class="my-3">
-    {#each slicedList as member, index (member.id)}
-    {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
-    <Card>
-        <Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
-            <CardsHeader bind:item={member}>
-                <FaUserCircle slot="icon" />
-            </CardsHeader>
-        </Link>
-    </Card>
-    {:else}
-    <Card>
-        <Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
-            <CardsHeader bind:item={member}>
-                <FaLock slot="icon" />
-            </CardsHeader>
-        </Link>
-    </Card>
-    {/if}
-    {/each}
-    </div>
-{/if}
-<ListPagination bind:currentPage bind:pageAmount />
-{/if}
\ No newline at end of file
diff --git a/dashboard/src/pages/Dash.svelte b/dashboard/src/pages/Dash.svelte
index dec5190b..cbf09b83 100644
--- a/dashboard/src/pages/Dash.svelte
+++ b/dashboard/src/pages/Dash.svelte
@@ -4,14 +4,11 @@
     import { currentUser, loggedIn } from '../stores';
     
     import SystemMain from '../lib/system/Main.svelte';
-    import MemberList from '../lib/member/List.svelte';
-    import GroupList from '../lib/group/List.svelte';
+    import List from '../lib/list/List.svelte';
 
     import { System } from '../api/types';
     import api from '../api';
 
-    let isPublic = false;
-
     // get the state from the navigator so that we know which tab to start on
     let location = useLocation();
     let params = $location.search && new URLSearchParams($location.search);
@@ -82,13 +79,13 @@
             <h2 class="visually-hidden">Viewing your own system</h2>
             <TabContent class="mt-3">
                 <TabPane tabId="system" tab="System" active={tabPane === "system"}>
-                        <SystemMain bind:user={user} bind:isPublic />
+                        <SystemMain bind:user={user} isPublic={false} />
                 </TabPane>
                 <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
-                        <MemberList bind:groups={groups} bind:list={members} bind:isPublic />
+                        <List bind:groups={groups} bind:members={members} isPublic={false} itemType={"member"}/>
                 </TabPane>
                 <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
-                    <GroupList bind:members={members} bind:list={groups} bind:isPublic />
+                    <List bind:members={members} bind:groups={groups} isPublic={false} itemType={"group"}/>
             </TabPane> 
             </TabContent>
         </Col>
diff --git a/dashboard/src/pages/profiles/Main.svelte b/dashboard/src/pages/profiles/Main.svelte
index c394c2b9..d6e48f48 100644
--- a/dashboard/src/pages/profiles/Main.svelte
+++ b/dashboard/src/pages/profiles/Main.svelte
@@ -4,8 +4,7 @@
     import { onMount } from 'svelte';
     
     import SystemMain from '../../lib/system/Main.svelte';
-    import MemberList from '../../lib/member/List.svelte';
-    import GroupList from '../../lib/group/List.svelte';
+    import List from '../../lib/list/List.svelte';
 
     import { System } from '../../api/types';
     import api from '../../api';
@@ -72,10 +71,10 @@
                         <SystemMain bind:user isPublic={true} />
                 </TabPane>
                 <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
-                        <MemberList bind:list={members} isPublic={true} />
+                        <List members={members} groups={groups} isPublic={true} itemType={"member"} />
                 </TabPane>
                 <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
-                    <GroupList bind:members={members} bind:list={groups} isPublic={true}/>
+                    <List members={members} groups={groups} isPublic={true} itemType={"group"} />
             </TabPane> 
             </TabContent>
             {/if}