diff --git a/dashboard/.gitignore b/dashboard/.gitignore
new file mode 100644
index 00000000..763301fc
--- /dev/null
+++ b/dashboard/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
\ No newline at end of file
diff --git a/dashboard/README.md b/dashboard/README.md
new file mode 100644
index 00000000..278cb1af
--- /dev/null
+++ b/dashboard/README.md
@@ -0,0 +1,12 @@
+# PluralKit Dashboard
+
+This project is built using [Vite](https://vitejs.dev/), using the svelte-ts template.
+
+Some of the other stuff used to get this working:
+* sveltestrap (https://sveltestrap.js.org/)
+* svelte-navigator (https://github.com/mefechoel/svelte-navigator)
+* svelte-toggle (https://github.com/metonym/svelte-toggle)
+* svelecte (https://mskocik.github.io/svelecte/)
+* svelte-icons (https://github.com/Introvertuous/svelte-icons)
+* discord-markdown (https://github.com/brussell98/discord-markdown)
+* moment (https://momentjs.com/)
diff --git a/dashboard/index.html b/dashboard/index.html
new file mode 100644
index 00000000..585ad3f4
--- /dev/null
+++ b/dashboard/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./myriad.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pk-webs | home</title>
+    <link rel="stylesheet" href="/styles/generic.scss" />
+    <link rel="stylesheet" href="/styles/dark.scss" />
+    <link rel="stylesheet" href="/styles/light.scss" />
+    <script defer data-domain="pk-webs-beta.spectralitree.com" src="https://plausible.pluralkit.me/js/plausible.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/dashboard/package.json b/dashboard/package.json
new file mode 100644
index 00000000..aac54545
--- /dev/null
+++ b/dashboard/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "pk-webs-2",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
+    "@tsconfig/svelte": "^2.0.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.7",
+    "svelte-preprocess": "^4.10.1",
+    "svelte-toggle": "^3.1.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.0"
+  },
+  "dependencies": {
+    "@sentry/browser": "^6.19.5",
+    "@sentry/tracing": "^6.19.5",
+    "@types/twemoji": "^12.1.2",
+    "axios": "^0.24.0",
+    "discord-markdown": "^2.5.1",
+    "gh-pages": "^3.2.3",
+    "moment": "^2.29.1",
+    "sass": "^1.47.0",
+    "svelecte": "^3.4.5",
+    "svelte-autosize": "^1.0.1",
+    "svelte-icons": "^2.1.0",
+    "svelte-navigator": "^3.1.5",
+    "sveltestrap": "^5.6.3",
+    "twemoji": "^13.1.0"
+  }
+}
diff --git a/dashboard/public/myriad.png b/dashboard/public/myriad.png
new file mode 100644
index 00000000..3e04b9b3
Binary files /dev/null and b/dashboard/public/myriad.png differ
diff --git a/dashboard/src/App.svelte b/dashboard/src/App.svelte
new file mode 100644
index 00000000..dec70ef5
--- /dev/null
+++ b/dashboard/src/App.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { Router, Route } from "svelte-navigator";
+  import Navigation from "./lib/Navigation.svelte";
+  import Dash from "./pages/Dash.svelte";
+  import Home from "./pages/Home.svelte";
+  import Settings from './pages/Settings.svelte';
+  import Footer from './lib/Footer.svelte';
+  import Public from "./pages/Public.svelte";
+  import Main from "./pages/profiles/Main.svelte";
+  import Status from './pages/status.svelte';
+  import Member from './pages/Member.svelte';
+  import Group from './pages/Group.svelte';
+  import PageNotFound from './pages/PageNotFound.svelte';
+  import { Alert } from 'sveltestrap';
+import DiscordLogin from "./pages/DiscordLogin.svelte";
+  import { onMount } from 'svelte';
+import BulkGroupPrivacy from "./pages/BulkGroupPrivacy.svelte";
+import BulkMemberPrivacy from "./pages/BulkMemberPrivacy.svelte";
+  
+  // theme cdns (I might make some myself too)
+  let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
+  let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
+
+  let styleSrc = dark;
+
+  // if there's a style already set, retrieve it
+  let style = localStorage.getItem("pk-style") && localStorage.getItem("pk-style");
+
+  // this automatically applies the style every time it is updated
+  $: setStyle(style);
+
+  // not sure if there's a better way to handle this
+  function setStyle(style) {
+    switch (style) {
+      case "light": document.getElementById("app").className = "light";
+      styleSrc = light;
+      localStorage.setItem("pk-style", "light");
+      break;
+      case "dark": document.getElementById("app").className = "dark";
+      styleSrc = dark;
+      localStorage.setItem("pk-style", "dark");
+      break;
+      default: document.getElementById("app").className = "dark";
+      styleSrc = dark;
+      localStorage.setItem("pk-style", "dark");
+    };
+  };
+
+  let falseBool = false;
+
+  onMount(() => {
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    if (settings && settings.accessibility && settings.accessibility.opendyslexic === true) {
+      document.getElementById("app").classList.add("dyslexic");
+    }
+  });
+
+</script>
+
+<svelte:head>
+  <link rel="stylesheet" href={styleSrc}>
+</svelte:head>
+
+<Router>
+  <Navigation bind:style={style}/>
+    <Route path="/"><Home /></Route>
+    <Route path="/login/discord"><DiscordLogin /></Route>
+    <Route path="dash"><Dash /></Route>
+    <Route path="dash/m/:id"><Member isPublic={falseBool}/></Route>
+    <Route path = "dash/g/:id"><Group isPublic={falseBool}/></Route>
+    <Route path="dash/bulk-member-privacy"><BulkMemberPrivacy/></Route>
+    <Route path="dash/bulk-group-privacy"><BulkGroupPrivacy/></Route>
+    <Route path="settings"><Settings /></Route>
+    <Route path="profile"><Public /></Route>
+    <Route path = "profile/s/:id"><Main /></Route>
+    <Route path = "s">
+      <Alert color="danger">Please provide a system ID in the URL.</Alert>
+    </Route>
+    <Route path = "profile/m/:id"><Member/></Route>
+    <Route path = "profile/m">
+      <Alert color="danger">Please provide a member ID in the URL.</Alert>
+    </Route>
+    <Route path = "profile/g/:id"><Group/></Route>
+    <Route path = "profile/g">
+      <Alert color="danger">Please provide a group ID in the URL.</Alert>
+    </Route>
+    <Route path="status"><Status /></Route>
+    <Route component={PageNotFound}/>
+  <Footer />
+</Router>
\ No newline at end of file
diff --git a/dashboard/src/api/errors.ts b/dashboard/src/api/errors.ts
new file mode 100644
index 00000000..c6b4ff70
--- /dev/null
+++ b/dashboard/src/api/errors.ts
@@ -0,0 +1,28 @@
+enum ErrorType {
+    Unknown = 0,
+    InvalidToken = 401,
+    NotFound = 404,
+    InternalServerError = 500,
+}
+
+interface ApiError {
+    code: number,
+    type: ErrorType,
+    message?: string,
+    data?: any,
+}
+
+export function parse(code: number, data?: any): ApiError {
+    var type = ErrorType[ErrorType[code]] ?? ErrorType.Unknown;
+    if (code >= 500) type = ErrorType.InternalServerError;
+
+    var err: ApiError = { code, type };
+
+    if (data) {
+        var d = data;
+        err.message = d.message;
+        err.data = d;
+    }
+
+    return err;
+}
diff --git a/dashboard/src/api/index.ts b/dashboard/src/api/index.ts
new file mode 100644
index 00000000..260bb0b2
--- /dev/null
+++ b/dashboard/src/api/index.ts
@@ -0,0 +1,58 @@
+import axios from 'axios';
+import * as Sentry from '@sentry/browser';
+
+const baseUrl = () => localStorage.isBeta ? "https://api.beta.pluralkit.me" : "https://api.pluralkit.me";
+
+const methods = ['get', 'post', 'delete', 'patch', 'put'];
+const noop = () => {};
+
+const scheduled = [];
+const runAPI = () => {
+    if (scheduled.length == 0) return;
+    const {axiosData, res, rej} = scheduled.shift();
+    axios(axiosData)
+        .then((resp) => res(parseData(resp.status, resp.data)))
+        .catch((err) => {
+            Sentry.captureException("Fetch error", err);
+            rej(err);
+        });
+}
+
+setInterval(runAPI, 500);
+
+export default function() {
+    const route = [];
+    const handler = {
+        get(_, name) {
+            if (route.length == 0 && name != "private")
+                route.push("v2");
+            if (methods.includes(name)) {
+                return ({ data = undefined, auth = true, token = null, query = null } = {}) => new Promise((res, rej) => scheduled.push({ res, rej, axiosData: {
+                    url: baseUrl() + "/" + route.join("/") + (query ? `?${Object.keys(query).map(x => `${x}=${query[x]}`).join("&")}` : ""),
+                    method: name,
+                    headers: {
+                        authorization: token ?? (auth ? localStorage.getItem("pk-token") : undefined),
+                        "content-type": name == "get" ? undefined : "application/json"
+                    },
+                    data: !!data ? JSON.stringify(data) : undefined,
+                    validateStatus: () => true,
+                }}));
+            }
+            route.push(name);
+            return new Proxy(noop, handler);
+        },
+        apply(target, _, args) {
+            route.push(...args.filter(x => x != null));
+            return new Proxy(noop, handler);
+        }
+    }
+    return new Proxy(noop, handler);
+}
+
+import * as errors from './errors';
+
+function parseData(code: number, data: any) {
+    if (code == 200) return data;
+    if (code == 204) return;
+    throw errors.parse(code, data);
+}
\ No newline at end of file
diff --git a/dashboard/src/api/types.ts b/dashboard/src/api/types.ts
new file mode 100644
index 00000000..3aaea446
--- /dev/null
+++ b/dashboard/src/api/types.ts
@@ -0,0 +1,88 @@
+interface SystemPrivacy {
+    description_privacy?: string,
+    member_list_privacy?: string,
+    front_privacy?: string,
+    front_history_privacy?: string,
+    group_list_privacy?: string
+}
+
+export interface System {
+    id?: string;
+    uuid?: string;
+    name?: string;
+    description?: string;
+    tag?: string;
+    avatar_url?: string;
+    banner?: string;
+    timezone?: string;
+    created?: string;
+    privacy?: SystemPrivacy;
+    color?: string;
+}
+
+export interface Config {
+    timezone: string;
+    pings_enabled: boolean;
+    member_default_private?: boolean;
+    group_default_private?: boolean;
+    show_private_info?: boolean;
+    member_limit: number;
+    group_limit: number;
+    description_templates: string[];
+}
+
+export interface MemberPrivacy {
+    visibility?: string,
+    description_privacy?: string,
+    name_privacy?: string,
+    birthday_privacy?: string,
+    pronoun_privacy?: string,
+    avatar_privacy?: string,
+    metadata_privacy?: string
+}
+
+interface proxytag {
+    prefix?: string,
+    suffix?: string
+}
+
+export interface Member {
+    id?: string;
+    uuid?: string;
+    name?: string;
+    display_name?: string;
+    color?: string;
+    birthday?: string;
+    pronouns?: string;
+    avatar_url?: string;
+    banner?: string;
+    description?: string;
+    created?: string;
+    keep_proxy?: boolean
+    system?: string;
+    proxy_tags?: Array<proxytag>;
+    privacy?: MemberPrivacy
+}
+
+export interface GroupPrivacy {
+    description_privacy?: string,
+    icon_privacy?: string,
+    list_privacy?: string,
+    visibility?: string,
+    name_privacy?: string,
+    metadata_privacy?: string
+}
+
+export interface Group {
+    id?: string;
+    uuid?: string;
+    name?: string;
+    display_name?: string;
+    description?: string;
+    icon?: string;
+    banner?: string;
+    color?: string;
+    privacy?: GroupPrivacy;
+    created?: string;
+    members?: string[];
+}
\ No newline at end of file
diff --git a/dashboard/src/assets/default_avatar.png b/dashboard/src/assets/default_avatar.png
new file mode 100644
index 00000000..753346aa
Binary files /dev/null and b/dashboard/src/assets/default_avatar.png differ
diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
new file mode 100644
index 00000000..dd10cc5e
--- /dev/null
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
+    import default_avatar from '../assets/default_avatar.png';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';  
+
+    export let item: any;
+
+    let htmlName: string;
+    let nameElement: any; 
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    $: if (item.name) htmlName = toHTML(item.name);
+        else htmlName = "";
+
+    $: if (settings && settings.appearance.twemoji) {
+        if (nameElement) twemoji.parse(nameElement);
+    }
+
+    $: icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
+
+    let avatarOpen = false;
+    const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
+    
+    export let loading: boolean = false;
+</script>
+
+    <CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle w-100">
+        <div>
+            <div class="icon d-inline-block">
+                <slot name="icon" />
+            </div>
+            <span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
+        </div>
+        <div>
+        {#if loading}
+        <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
+        {/if}
+        {#if item && (item.avatar_url || item.icon)}
+        <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt="Icon" />
+        {:else}
+        <img class="rounded-circle avatar" src={default_avatar} alt="avatar (default)" />
+        {/if}
+        </div>
+        <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
+            <div slot="external" on:click={toggleAvatarModal} style="height: 100%;  max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                <Image style="display: block; margin: auto;" src={icon_url} thumbnail alt="Your system avatar" />
+            </div>
+        </Modal>
+    </CardTitle>
\ No newline at end of file
diff --git a/dashboard/src/lib/Footer.svelte b/dashboard/src/lib/Footer.svelte
new file mode 100644
index 00000000..c1b62aaf
--- /dev/null
+++ b/dashboard/src/lib/Footer.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import {Navbar, Nav, NavItem, NavLink} from 'sveltestrap';
+</script>
+
+    <Navbar color="light" light class="footer">
+        <Nav>
+            <NavItem>
+                <NavLink href="https://pluralkit.me/">pluralkit.me</NavLink>
+            </NavItem>
+        </Nav>
+    </Navbar>
\ No newline at end of file
diff --git a/dashboard/src/lib/ListPagination.svelte b/dashboard/src/lib/ListPagination.svelte
new file mode 100644
index 00000000..65392242
--- /dev/null
+++ b/dashboard/src/lib/ListPagination.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+import { Pagination, PaginationItem, PaginationLink } from "sveltestrap";
+
+export let currentPage: number;
+export let pageAmount: number;
+export let smallPages: boolean = false;
+
+</script>
+{#if pageAmount > 1}
+<Pagination size={smallPages ? "sm" : ""} class="mx-auto" arialabel="member list page navigation">
+    {#if currentPage !== 1}
+    <PaginationItem>
+        <PaginationLink href="#" previous on:click={(e) => {e.preventDefault(); currentPage -= 1}}></PaginationLink>
+    </PaginationItem>
+    {:else}
+    <PaginationItem disabled>
+        <PaginationLink previous></PaginationLink>
+    </PaginationItem>
+    {/if}
+    {#if currentPage > 2}
+    <PaginationItem>
+        <PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = 1}}>1</PaginationLink>
+    </PaginationItem>
+    {/if}
+    {#if currentPage === 4}
+        <PaginationItem>
+            <PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = 2}}>2</PaginationLink>
+        </PaginationItem>
+    {/if}
+    {#if currentPage > 4}
+    <PaginationItem disabled>
+        <PaginationLink>...</PaginationLink>
+    </PaginationItem>
+    {/if}
+    {#if currentPage > 1}
+        <PaginationItem>
+            <PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage -= 1}}>{currentPage - 1}</PaginationLink>
+        </PaginationItem>
+    {/if}
+        <PaginationItem active>
+            <PaginationLink href="#">{currentPage}</PaginationLink>
+        </PaginationItem>
+    {#if currentPage < pageAmount}
+        <PaginationItem>
+            <PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage += 1}}>{currentPage + 1}</PaginationLink>
+        </PaginationItem>
+    {/if}
+    {#if currentPage < pageAmount - 3}
+        <PaginationItem disabled>
+            <PaginationLink>...</PaginationLink>
+        </PaginationItem>
+    {/if}
+    {#if currentPage === pageAmount - 3}
+        <PaginationItem>
+            <PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = pageAmount - 1}}>{pageAmount - 1}</PaginationLink>
+        </PaginationItem>
+    {/if}
+    {#if currentPage < pageAmount - 1}
+        <PaginationItem>
+            <PaginationLink href="#" on:click={(e) => { e.preventDefault(); currentPage = pageAmount}}>{pageAmount}</PaginationLink>
+        </PaginationItem>
+    {/if}
+    {#if currentPage !== pageAmount}
+        <PaginationItem>
+            <PaginationLink href="#" next on:click={(e) => {e.preventDefault(); currentPage += 1}}></PaginationLink>
+        </PaginationItem>
+    {:else}
+        <PaginationItem disabled>
+            <PaginationLink next></PaginationLink>
+        </PaginationItem>
+    {/if}
+</Pagination>
+{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/Navigation.svelte b/dashboard/src/lib/Navigation.svelte
new file mode 100644
index 00000000..3765552d
--- /dev/null
+++ b/dashboard/src/lib/Navigation.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+    import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Button} from 'sveltestrap';
+    import { loggedIn } from '../stores';
+    import { Link, navigate } from 'svelte-navigator';
+import { get } from 'svelte/store';
+
+    export let style: string;
+
+    let isOpen = false;
+    const toggle = () => (isOpen = !isOpen);
+
+    let loggedIn_value: boolean;
+
+    loggedIn.subscribe(value => {
+		loggedIn_value = value;
+	});
+    
+    function logout() {
+        localStorage.removeItem("pk-token");
+        localStorage.removeItem("pk-user");
+        loggedIn.update(() => false);
+        navigate("/");
+    }
+
+</script>
+    <Navbar color="light" light expand="lg" class="mb-4">
+        <NavbarBrand>pk-webs</NavbarBrand>
+        <NavbarToggler on:click={toggle}></NavbarToggler>
+        <Collapse {isOpen} navbar expand="lg">
+            <Nav class="ms-auto" navbar>
+                <Dropdown nav inNavbar>
+                    <DropdownToggle color="transparent" tag="span" class="nav-link">Styles</DropdownToggle>
+                    <DropdownMenu end>
+                        <DropdownItem on:click={() => style = "light"}>Light</DropdownItem>
+                        <DropdownItem on:click={() => style = "dark"}>Dark</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+                {#if loggedIn_value || localStorage.getItem("pk-token")}
+                <Dropdown nav inNavbar>
+                    <DropdownToggle color="transparent" tag="span" class="nav-link">Dash</DropdownToggle>
+                    <DropdownMenu end>
+                        <Link style="text-decoration: none;" to="/dash?tab=system"><DropdownItem>System</DropdownItem></Link>
+                        <Link style="text-decoration: none;" to="/dash?tab=members"><DropdownItem>Members</DropdownItem></Link>
+                        <Link style="text-decoration: none;" to="/dash?tab=groups"><DropdownItem>Groups</DropdownItem></Link>
+                        <DropdownItem divider />
+                        <DropdownItem on:click={logout}>Log out</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+                {/if}
+                <NavItem>
+                    <NavLink href="/settings">Settings</NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink href="/profile">Public</NavLink>
+                </NavItem>
+            </Nav>
+        </Collapse>
+    </Navbar>
\ No newline at end of file
diff --git a/dashboard/src/lib/group/Body.svelte b/dashboard/src/lib/group/Body.svelte
new file mode 100644
index 00000000..ef1792fb
--- /dev/null
+++ b/dashboard/src/lib/group/Body.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, ModalFooter, Spinner } from 'sveltestrap';
+    import moment from 'moment';
+    import { toHTML } from 'discord-markdown';
+    import Edit from './Edit.svelte';
+    import twemoji from 'twemoji';
+    import Privacy from './Privacy.svelte';
+    import MemberEdit from './MemberEdit.svelte';
+    import { Link } from 'svelte-navigator';
+
+    import { Member, Group } from '../../api/types';
+   
+    export let group: Group;
+    let editMode: boolean = false;
+    let memberMode: boolean = false;
+    export let isPublic: boolean;
+    export let members: Member[] = [];
+    export let isMainDash = true;
+    export let isPage = false;
+
+    let htmlDescription: string;
+    $: if (group.description) { 
+        htmlDescription = toHTML(group.description, {embed: true});
+    } else {
+        htmlDescription = "(no description)";
+    }
+    let htmlDisplayName: string;
+    $: if (group.display_name) htmlDisplayName = toHTML(group.display_name)
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    let descriptionElement: any;
+    let displayNameElement: any;
+
+    $: if (settings && settings.appearance.twemoji) {
+        if (descriptionElement) twemoji.parse(descriptionElement);
+        if (displayNameElement) twemoji.parse(displayNameElement);
+    };
+
+    let created = moment(group.created).format("MMM D, YYYY");
+
+    let bannerOpen = false;
+    const toggleBannerModal = () => (bannerOpen = !bannerOpen);
+
+    let privacyOpen = false;
+    const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
+
+</script>
+
+<CardBody style="border-left: 4px solid #{settings && settings.appearance.color_background ? isPage ? "" : group.color : group.color }; margin: -1rem -1.25rem">
+{#if !editMode && !memberMode}
+<Row>
+    {#if group.id}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>ID:</b> {group.id}
+    </Col>
+    {/if}
+    {#if group.name}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Name:</b> {group.name}
+    </Col>
+    {/if}
+    {#if group.display_name}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Display Name:</b> <span bind:this={displayNameElement}>{@html htmlDisplayName}</span>
+    </Col>
+    {/if}
+    {#if group.created && !isPublic}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Created:</b> {created}
+    </Col>
+    {/if}
+    {#if group.color}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Color:</b> {group.color}
+    </Col>
+    {/if}
+    {#if group.banner}
+    <Col xs={12} lg={3} class="mb-2">
+        <b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>View</Button>
+        <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
+            <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                <Image style="display: block; margin: auto;" src={group.banner} thumbnail alt="Your system banner" />
+            </div>
+        </Modal>
+    </Col>
+    {/if}
+    {#if group.privacy}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
+        <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
+            <ModalHeader toggle={togglePrivacyModal}>
+               Edit privacy
+            </ModalHeader>
+                <ModalBody>
+                    <Privacy on:update bind:group bind:privacyOpen={privacyOpen}/>
+                </ModalBody>
+        </Modal>
+    </Col>
+    {/if}
+</Row>
+<div class="my-2 description" bind:this={descriptionElement}>
+    <b>Description:</b><br />
+    {@html htmlDescription && htmlDescription}
+</div>
+{#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
+<img src={group.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+{/if}
+{#if !isPublic}
+<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> 
+{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>{/if}
+{/if}
+{#if !isPage}
+    <Link to={isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View page</Button></Link>
+    {:else if !isPublic}
+    <Link to="/dash?tab=groups"><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View system</Button></Link>
+    {/if}
+{:else if editMode}
+<Edit on:deletion on:update bind:group bind:editMode />
+{:else if memberMode}
+    <MemberEdit on:updateMembers bind:group bind:memberMode bind:members />
+{/if}
+</CardBody>
\ No newline at end of file
diff --git a/dashboard/src/lib/group/Edit.svelte b/dashboard/src/lib/group/Edit.svelte
new file mode 100644
index 00000000..e25a1be3
--- /dev/null
+++ b/dashboard/src/lib/group/Edit.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+    import { Group } from '../../api/types';
+    import api from '../../api';
+    import autosize from 'svelte-autosize';
+
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
+    let loading: boolean = false;
+    export let group: Group;
+    export let editMode: boolean;
+
+    let err: string[] = [];
+
+    let input: Group = {...group};
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', group);
+    }
+
+    function deletion() {
+        dispatch('deletion', group.id);
+    }
+
+    async function submit() {
+        let data = input;
+        err = [];
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().groups(group.id).patch({data});
+            group = {...group, ...res};
+            err = [];
+            update();
+            editMode = false;
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+
+    let deleteOpen: boolean = false;
+    const toggleDeleteModal = () => deleteOpen = !deleteOpen;
+
+    let deleteInput: string;
+    let deleteErr: string;
+
+    async function submitDelete() {
+        deleteErr = null;
+
+        if (!deleteInput) {
+            deleteErr = "Please type out the group ID.";
+            return;
+        }
+
+        if (deleteInput.trim().toLowerCase() !== group.id) {
+            deleteErr = "This group's ID does not match the provided ID.";
+            return;
+        }
+        loading = true;
+        try {
+            await api().groups(group.id).delete();
+            deleteErr = null;
+            toggleDeleteModal();
+            loading = false;
+            deletion();
+        } catch (error) {
+            console.log(error);
+            deleteErr = error.message;
+            loading = false;
+        }
+    }
+</script>
+
+{#each err as error}
+    <Alert color="danger">{@html error}</Alert>
+{/each}
+<Row>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Name:</Label>
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={group.name} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Display name:</Label>
+        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Color:</Label>
+        <Input bind:value={input.color} type="text" placeholder={group.color}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Icon url:</Label>
+        <Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Banner url:</Label>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={group.banner}/>
+    </Col>
+</Row>
+<div class="my-2">
+    <b>Description:</b><br />
+    {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    {/if}
+    {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    {/if}
+    {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    {/if}
+    <br>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/>
+</div>
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
+{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>Delete</Button>{/if}
+<Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
+    <ModalHeader toggle={toggleDeleteModal}>
+        Delete member
+     </ModalHeader>
+         <ModalBody>
+             {#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
+             <Label>If you're sure you want to delete this group, type out the group ID (<code>{group.id}</code>) below.</Label>
+             <Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={group.id}></Input>
+            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
+            {:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+            {/if}
+        </ModalBody>
+</Modal>
\ No newline at end of file
diff --git a/dashboard/src/lib/group/List.svelte b/dashboard/src/lib/group/List.svelte
new file mode 100644
index 00000000..61084441
--- /dev/null
+++ b/dashboard/src/lib/group/List.svelte
@@ -0,0 +1,367 @@
+<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">
+                        <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">
+                        <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">
+                        <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">
+                        <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">
+                        <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"}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+         | <span style="cursor: pointer" id="g-exclude" on:click={() => memberSearchMode = "exclude"}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+         | <span style="cursor: pointer" id="g-match" on:click={() => memberSearchMode = "match"}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+         | <span style="cursor: pointer" id="g-none" on:click={() => memberSearchMode = "none"}>{@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}>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}>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/group/MemberEdit.svelte b/dashboard/src/lib/group/MemberEdit.svelte
new file mode 100644
index 00000000..95b31533
--- /dev/null
+++ b/dashboard/src/lib/group/MemberEdit.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+    import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+    import ListPagination from "../ListPagination.svelte";
+    import twemoji from "twemoji";
+    import FaUserPlus from 'svelte-icons/fa/FaUserPlus.svelte'
+    import FaUserFriends from 'svelte-icons/fa/FaUserFriends.svelte'
+    import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte'
+    import Svelecte, { addFormatter } from 'svelecte';
+
+    import { Group, Member } from '../../api/types';
+    import api from '../../api';
+
+    let loading: boolean = false;
+    let err: string;
+    export let group: Group;
+    export let memberMode: boolean = true;
+    export let members: Member[];
+
+    let membersInGroup: Member[];
+    let membersNotInGroup: Member[];
+    let membersInGroupSelection: any[];
+    let membersNotInGroupSelection: any[];
+
+    let membersToBeAdded: any[];
+    let membersToBeRemoved: any[];
+
+    let currentPage: number = 1;
+
+    let smallPages = true;
+
+    $: if (group.members) {
+        membersInGroup = members.filter(member => group.members.includes(member.uuid));
+        membersInGroup = membersInGroup.sort((a, b) => a.name.localeCompare(b.name));
+
+        membersNotInGroup = members.filter(member => !group.members.includes(member.uuid));
+        membersNotInGroup = membersNotInGroup.sort((a, b) => a.name.localeCompare(b.name));
+
+        membersInGroupSelection = membersInGroup.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));
+        membersNotInGroupSelection = membersNotInGroup.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));
+    }
+
+    $: indexOfLastItem = currentPage * 10;
+    $: indexOfFirstItem = indexOfLastItem - 10;
+    $: pageAmount = Math.ceil(membersInGroup && membersInGroup.length / 10);
+
+    $: finalMemberList = membersInGroup && membersInGroup.slice(indexOfFirstItem, indexOfLastItem);
+
+    let settings = JSON.parse(localStorage.getItem('pk-settings'));
+    let listGroupElements: any[] = [];
+    $: if (settings && settings.appearance.twemoji) {
+        if (listGroupElements && listGroupElements.length > 0) {
+            listGroupElements.forEach(element => element && twemoji.parse(element));
+        };
+    }
+
+function memberListRenderer(item: any) {
+    return `${item.name} (<code>${item.shortid}</code>)`;
+  }
+
+  addFormatter({
+    'member-list': memberListRenderer
+  });
+
+  const dispatch = createEventDispatcher();
+
+  function update() {
+      dispatch("updateMembers", group)
+  }
+    
+    async function submitAdd() {
+        let data = membersToBeAdded;
+        try {
+            loading = true;
+            await api().groups(group.id).members.add.post({data});
+            data.forEach(member => group.members.push(member));
+            update();
+            err = null;
+            membersToBeAdded = [];
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function submitRemove() {
+        let data = membersToBeRemoved;
+        try {
+            loading = true;
+            await api().groups(group.id).members.remove.post({data});
+            group.members = group.members.filter(m => !data.includes(m));
+            update();
+            err = null;
+            membersToBeRemoved = [];
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+</script>
+{#if err}
+    <Alert color="danger">{err}</Alert>
+{/if}
+<Row>
+    <Col xs={12} lg={6} class="text-center mb-3">
+        <h5><div class="icon d-inline-block">
+            <FaUserFriends />
+        </div>Current Members</h5>
+        <ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
+        {#if finalMemberList && finalMemberList.length > 0}
+        <ListGroup>
+            {#each finalMemberList as member, index (member.id)}
+            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{member.name}</b> (<code>{member.id}</code>)</span> <span>{member.display_name ? `${member.display_name}` : ""}</span></span></ListGroupItem>
+            {/each}
+        </ListGroup>
+        {:else}
+        <p>There are no members in this group yet.</p>
+        <p>You can add some in this menu!</p>
+        {/if}
+    </Col>
+    <Col xs={12} lg={6} class="text-center mb-3">
+        <h5><div class="icon d-inline-block">
+            <FaUserPlus />
+        </div>Add Members</h5>
+        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple/>
+        {#if !loading && membersToBeAdded && membersToBeAdded.length > 0}
+        <Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
+        {/if}
+        <hr/>
+        <h5><div class="icon d-inline-block">
+            <FaUserMinus />
+        </div>Remove Members</h5>
+        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeRemoved} options={membersInGroupSelection} multiple/>
+        {#if !loading && membersToBeRemoved && membersToBeRemoved.length > 0}
+        <Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
+        {/if}
+    </Col>
+</Row>
+<Button style="flex: 0" color="secondary" on:click={() => memberMode = false}>Back</Button>
\ No newline at end of file
diff --git a/dashboard/src/lib/group/NewGroup.svelte b/dashboard/src/lib/group/NewGroup.svelte
new file mode 100644
index 00000000..7a9134e7
--- /dev/null
+++ b/dashboard/src/lib/group/NewGroup.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+    import { Row, Col, Input, Button, Label, Alert, Spinner, Accordion, AccordionItem, CardTitle } from 'sveltestrap';
+    import { Group } from '../../api/types';
+    import api from '../../api';
+    import autosize from 'svelte-autosize';
+    import { createEventDispatcher } from 'svelte';
+    import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
+
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
+    let loading: boolean = false;
+    let err: string[] = [];
+    let message: string;
+    let privacyMode = false;
+
+    let defaultGroup: Group = {
+        privacy: {
+            description_privacy: "public",
+            metadata_privacy: "public",
+            list_privacy: "public",
+            icon_privacy: "public",
+            name_privacy: "public",
+            visibility: "public"
+        }
+    }
+
+    const dispatch = createEventDispatcher();
+
+    function create() {
+        dispatch('create', input);
+    }
+
+    let input: Group = defaultGroup;
+
+    async function submit() {
+        let data = input;
+        message = "";
+        err = [];
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().groups().post({data});
+            input = res;
+            err = [];
+            create();
+            message = `Group ${data.name} successfully created!`
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+
+</script>
+
+<Accordion class="mb-3">
+    <AccordionItem>
+        <CardTitle slot="header" style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex align-middle w-100 p-2">
+            <div class="icon d-inline-block">
+                <FaPlus/>
+            </div>
+            <span style="vertical-align: middle;">Add new Group</span>
+        </CardTitle>
+        {#if message}
+            <Alert color="success">{@html message}</Alert>
+        {/if}
+        {#each err as error}
+            <Alert color="danger">{@html error}</Alert>
+        {/each}
+        <Row>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Name:</Label>
+                <Input bind:value={input.name} maxlength={100} type="text" />
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Display name:</Label>
+                <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text"/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Color:</Label>
+                <Input bind:value={input.color} type="text"/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Icon url:</Label>
+                <Input bind:value={input.icon} maxlength={256} type="url"/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Banner url:</Label>
+                <Input bind:value={input.banner} maxlength={256} type="url"/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Privacy:</Label>
+                <Button class="w-100" color="secondary" on:click={() => privacyMode = !privacyMode}>Toggle privacy</Button>
+            </Col>
+        </Row>
+        {#if privacyMode}
+        <hr />
+        <Row>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Description:</Label>
+                <Input type="select" bind:value={input.privacy.description_privacy}>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Name:</Label>
+                <Input type="select" bind:value={input.privacy.name_privacy}>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Member list:</Label>
+                <Input type="select" bind:value={input.privacy.list_privacy}>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Icon:</Label>
+                <Input type="select" bind:value={input.privacy.icon_privacy}>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Visibility:</Label>
+                <Input type="select" bind:value={input.privacy.visibility}>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Metadata:</Label>
+                <Input type="select" bind:value={input.privacy.metadata_privacy}>
+                    <option>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+        </Row>
+        <hr />
+        {/if}
+        <div class="my-2">
+            <b>Description:</b><br />
+            {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+            {/if}
+            {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+            {/if}
+            {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+            {/if}
+            <br>
+            <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize />
+        </div>
+        {#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
+        {:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
+        {:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button>{/if}
+    </AccordionItem>
+</Accordion>
\ No newline at end of file
diff --git a/dashboard/src/lib/group/Privacy.svelte b/dashboard/src/lib/group/Privacy.svelte
new file mode 100644
index 00000000..2e727571
--- /dev/null
+++ b/dashboard/src/lib/group/Privacy.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
+
+    import { Group } from '../../api/types';
+    import api from '../../api';
+
+    export let privacyOpen: boolean;
+    export let group: Group;
+    const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
+    
+    let err: string;
+    let loading = false;
+
+    let allPrivacy: string;
+
+    $: { changePrivacy(allPrivacy)}
+
+    function changePrivacy(value: string) {
+        if (value) {
+        input.privacy.description_privacy = value;
+        input.privacy.list_privacy = value;
+        input.privacy.visibility = value;
+        input.privacy.icon_privacy = value;
+        input.privacy.name_privacy = value;
+        input.privacy.metadata_privacy = value;
+        }
+    }
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', group);
+    }
+
+    let input: Group = {privacy: group.privacy};
+
+    async function submit() {
+        let data = input;
+        err = null;
+
+        loading = true;
+        try {
+            let res = await api().groups(group.id).patch({data});
+            group = {...group, ...res};
+            update();
+            loading = false;
+            togglePrivacyModal();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            err = err;
+            loading = false;
+        }
+    }
+</script>
+
+
+    {#if err}
+    <Alert color="danger">{err}</Alert>
+    {/if}
+    <Label><b>Set all to:</b></Label>
+    <Input type="select" bind:value={allPrivacy}>
+        <option>public</option>
+        <option>private</option>
+    </Input>
+    <hr />
+    <Row>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Description:</Label>
+            <Input type="select" bind:value={input.privacy.description_privacy}>
+                <option default={group.privacy.description_privacy === "public"}>public</option>
+                <option default={group.privacy.description_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Name:</Label>
+            <Input type="select" bind:value={input.privacy.name_privacy}>
+                <option default={group.privacy.name_privacy === "public"}>public</option>
+                <option default={group.privacy.name_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Member list:</Label>
+            <Input type="select" bind:value={input.privacy.list_privacy}>
+                <option default={group.privacy.list_privacy === "public"}>public</option>
+                <option default={group.privacy.list_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Icon:</Label>
+            <Input type="select" bind:value={input.privacy.icon_privacy}>
+                <option default={group.privacy.icon_privacy === "public"}>public</option>
+                <option default={group.privacy.icon_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Visibility:</Label>
+            <Input type="select" bind:value={input.privacy.visibility}>
+                <option default={group.privacy.visibility === "public"}>public</option>
+                <option default={group.privacy.visibility === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Metadata:</Label>
+            <Input type="select" bind:value={input.privacy.metadata_privacy}>
+                <option default={group.privacy.metadata_privacy === "public"}>public</option>
+                <option default={group.privacy.metadata_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+    </Row>
+    {#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
+    {:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+    {/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/member/Body.svelte b/dashboard/src/lib/member/Body.svelte
new file mode 100644
index 00000000..7cc38b70
--- /dev/null
+++ b/dashboard/src/lib/member/Body.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody } from 'sveltestrap';
+    import moment from 'moment';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';
+
+    import GroupEdit from './GroupEdit.svelte';
+    import Edit from './Edit.svelte';
+    import Privacy from './Privacy.svelte';
+    import ProxyTags from './ProxyTags.svelte';
+
+    import { Member, Group } from '../../api/types';
+    import { Link } from 'svelte-navigator';
+
+    export let groups: Group[] = [];
+    export let member: Member;
+    export let isPublic: boolean = false;
+    export let isPage: boolean = false;
+    export let isMainDash = true;
+
+    let editMode: boolean = false;
+    let groupMode: boolean = false;
+
+    let htmlDescription: string;
+    $: if (member.description) { 
+        htmlDescription = toHTML(member.description, {embed: true});
+    } else {
+        htmlDescription = "(no description)";
+    }
+
+    let htmlPronouns: string;
+    $: if (member.pronouns) { 
+        htmlPronouns = toHTML(member.pronouns, {embed: true});
+    }
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    let descriptionElement: any;
+    let displayNameElement: any;
+    let pronounElement: any;
+
+    $: if (settings && settings.appearance.twemoji) {
+        if (descriptionElement) twemoji.parse(descriptionElement);
+        if (displayNameElement) twemoji.parse(displayNameElement);
+        if (pronounElement) twemoji.parse(pronounElement);
+    };
+
+    let bannerOpen = false;
+    const toggleBannerModal = () => (bannerOpen = !bannerOpen);
+
+    let privacyOpen = false;
+    const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
+
+    let proxyOpen = false;
+    const toggleProxyModal = () => (proxyOpen = !proxyOpen);
+
+    let created = moment(member.created).format("MMM D, YYYY");
+    let birthday: string;
+    $: {member.birthday; 
+        if (member.birthday) birthday = moment(member.birthday, "YYYY-MM-DD").format("MMM D, YYYY");
+    }
+
+    $: trimmedBirthday = birthday && birthday.endsWith(', 0004') ? trimmedBirthday = birthday.replace(', 0004', '') : birthday; 
+    
+</script>
+
+<CardBody style="border-left: 4px solid #{settings && settings.appearance.color_background ? isPage ? "" : member.color : member.color }; margin: -1rem -1.25rem">
+    {#if !editMode && !groupMode}
+    <Row>
+        {#if member.id}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>ID:</b> {member.id}
+        </Col>
+        {/if}
+        {#if member.name}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Name:</b> {member.name}
+        </Col>
+        {/if}
+        {#if member.display_name}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Display Name:</b> <span bind:this={displayNameElement}>{member.display_name}</span>
+        </Col>
+        {/if}
+        {#if member.pronouns}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Pronouns:</b> <span bind:this={pronounElement}>{@html htmlPronouns}</span>
+        </Col>
+        {/if}
+        {#if member.birthday}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Birthday:</b> {trimmedBirthday}
+        </Col>
+        {/if}
+        {#if member.created}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Created:</b> {created}
+        </Col>
+        {/if}
+        {#if member.color}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Color:</b> {member.color}
+        </Col>
+        {/if}
+        {#if member.banner}
+        <Col xs={12} lg={3} class="mb-2">
+            <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal}>View</Button>
+            <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
+                <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                    <Image style="display: block; margin: auto;" src={member.banner} thumbnail alt="Your system banner" />
+                </div>
+            </Modal>
+        </Col>
+        {/if}
+        {#if member.privacy && !isPublic}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
+            <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
+                <ModalHeader toggle={togglePrivacyModal}>
+                    Edit privacy
+                </ModalHeader>
+                    <ModalBody>
+                        <Privacy on:update bind:member bind:privacyOpen/>
+                    </ModalBody>
+            </Modal>
+        </Col>
+        {/if}
+        {#if member.proxy_tags && !isPublic}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Proxy Tags:</b> <Button size="sm" color="secondary" on:click={toggleProxyModal}>Edit</Button>
+            <Modal size="lg" isOpen={proxyOpen} toggle={toggleProxyModal}>
+                <ModalHeader toggle={toggleProxyModal}>
+                    Edit proxy tags
+                </ModalHeader>
+                    <ModalBody>
+                        <ProxyTags on:update bind:member bind:proxyOpen/>
+                    </ModalBody>
+            </Modal>
+        </Col>
+        {/if}
+    </Row>
+    <div class="my-2 mb-3 description" bind:this={descriptionElement}>
+        <b>Description:</b><br />
+        {@html htmlDescription && htmlDescription}
+    </div>
+    {#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
+    <img src={member.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
+    {/if}
+    {#if !isPublic}
+    <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+    {#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => groupMode = true}>Groups</Button>{/if}
+    {/if}
+    {#if !isPage}
+    <Link to={isPublic ? `/profile/m/${member.id}` : `/dash/m/${member.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View page</Button></Link>
+    {:else}
+    <Link to={isPublic ? `/profile/s/${member.system}?tab=members` : "/dash?tab=members"}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View system</Button></Link>
+    {/if}
+    {:else if editMode}
+        <Edit on:deletion on:update bind:member bind:editMode />
+    {:else if groupMode}
+        <GroupEdit on:updateGroups bind:member bind:groups bind:groupMode />
+    {/if}
+    </CardBody>
\ No newline at end of file
diff --git a/dashboard/src/lib/member/Edit.svelte b/dashboard/src/lib/member/Edit.svelte
new file mode 100644
index 00000000..849db6b9
--- /dev/null
+++ b/dashboard/src/lib/member/Edit.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+    import autosize from 'svelte-autosize';
+    import moment from 'moment';
+
+    import { Member } from '../../api/types'
+    import api from '../../api';
+
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
+    let loading: boolean = false;
+    export let member: Member;
+    export let editMode: boolean;
+
+    let err: string[] = [];
+
+    let input: Member = {...member};
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', member);
+    }
+
+    function deletion() {
+        dispatch('deletion', member.id);
+    }
+
+    async function submit() {
+        let data = input;
+        err = [];
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        if (data.birthday) {
+            if (!moment(data.birthday, 'YYYY-MM-DD').isValid()) {
+                if (moment(data.birthday, 'MM-DD').isValid()) {
+                    data.birthday = '0004-' + data.birthday;
+                } else {
+                    err.push(`${data.birthday} is not a valid date, please use the following format: YYYY-MM-DD. (example: 2019-07-21)`);
+                }
+            }
+            if (data.birthday.includes('/')) {
+                data.birthday.replace('/', '-');
+            }
+        }
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().members(member.id).patch({data});
+            member = res;
+            err = [];
+            update();
+            editMode = false;
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+
+    let deleteOpen: boolean = false;
+    const toggleDeleteModal = () => deleteOpen = !deleteOpen;
+
+    let deleteInput: string;
+    let deleteErr: string;
+
+    async function submitDelete() {
+        deleteErr = null;
+
+        if (!deleteInput) {
+            deleteErr = "Please type out the member ID.";
+            return;
+        }
+
+        if (deleteInput.trim().toLowerCase() !== member.id) {
+            deleteErr = "This member's ID does not match the provided ID.";
+            return;
+        }
+        loading = true;
+        try {
+            await api().members(member.id).delete();
+            deleteErr = null;
+            toggleDeleteModal();
+            loading = false;
+            deletion();
+        } catch (error) {
+            console.log(error);
+            deleteErr = error.message;
+            loading = false;
+        }
+    }
+</script>
+
+{#each err as error}
+    <Alert color="danger">{@html error}</Alert>
+{/each}
+<Row>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Name:</Label>
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={member.name} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Display name:</Label>
+        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={member.display_name} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Pronouns:</Label>
+        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Birthday:</Label>
+        <Input bind:value={input.birthday} maxlength={100} type="text" placeholder={member.birthday} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Color:</Label>
+        <Input bind:value={input.color} type="text" placeholder={member.color}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Avatar url:</Label>
+        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Banner url:</Label>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner}/>
+    </Col>
+</Row>
+<div class="my-2">
+    <b>Description:</b><br />
+    {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    {/if}
+    {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    {/if}
+    {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    {/if}
+    <br>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description}/>
+</div>
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
+{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>Delete</Button>{/if}
+<Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
+    <ModalHeader toggle={toggleDeleteModal}>
+        Delete member
+     </ModalHeader>
+         <ModalBody>
+             {#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
+             <Label>If you're sure you want to delete this member, type out the member ID (<code>{member.id}</code>) below.</Label>
+             <Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={member.id}></Input>
+            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
+            {:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+            {/if}
+        </ModalBody>
+</Modal>
\ No newline at end of file
diff --git a/dashboard/src/lib/member/GroupEdit.svelte b/dashboard/src/lib/member/GroupEdit.svelte
new file mode 100644
index 00000000..a4bd8aa5
--- /dev/null
+++ b/dashboard/src/lib/member/GroupEdit.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+    import ListPagination from "../ListPagination.svelte";
+    import twemoji from "twemoji";
+    import Svelecte, { addFormatter } from 'svelecte';
+    import { toHTML } from 'discord-markdown';
+
+    import FaFolderOpen from 'svelte-icons/fa/FaFolderOpen.svelte'
+    import FaFolderPlus from 'svelte-icons/fa/FaFolderPlus.svelte'
+    import FaFolderMinus from 'svelte-icons/fa/FaFolderMinus.svelte'
+
+    import { Member, Group } from '../../api/types';
+    import api from '../../api';
+
+    export let member: Member;
+    export let groups: Group[] = [];
+    let loading: boolean = false;
+    let err: string;
+    export let groupMode: boolean = true;
+
+    let groupsWithMember: Group[];
+    let groupsWithoutMember: Group[];
+    let groupsWithMemberSelection: any[];
+    let groupsWithoutMemberSelection: any[];
+
+    let groupsToBeAdded: any[];
+    let groupsToBeRemoved: any[];
+
+    let currentPage = 1;
+    let smallPages = true;
+
+    $: if (groups) {
+        groupsWithMember = groups.filter(group => group.members && group.members.includes(member.uuid));
+        groupsWithMember.sort((a, b) => a.name.localeCompare(b.name));
+
+        groupsWithoutMember = groups.filter(group => group.members && !group.members.includes(member.uuid));
+        groupsWithoutMember.sort((a, b) => a.name.localeCompare(b.name));
+
+        groupsWithMemberSelection = groupsWithMember.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));
+        groupsWithoutMemberSelection = groupsWithoutMember.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));
+    }
+
+    $: indexOfLastItem = currentPage * 10;
+    $: indexOfFirstItem = indexOfLastItem - 10;
+    $: pageAmount = Math.ceil(groupsWithMember && groupsWithMember.length / 10);
+
+    $: finalGroupsList = groupsWithMember && groupsWithMember.slice(indexOfFirstItem, indexOfLastItem);
+
+    let settings = JSON.parse(localStorage.getItem('pk-settings'));
+    let listGroupElements: any[] = [];
+    $: if (settings && settings.appearance.twemoji) {
+        if (listGroupElements && listGroupElements.length > 0) {
+            listGroupElements.forEach(element => element && twemoji.parse(element));
+        };
+    }
+
+    function groupListRenderer(item: any) {
+        return `${item.name} (<code>${item.shortid}</code>)`;
+    }
+
+    addFormatter({
+        'member-list': groupListRenderer
+    });
+
+    const dispatch = createEventDispatcher();
+
+    function updateGroups() {
+        dispatch("updateGroups", groups);
+    }
+
+    async function submitAdd() {
+        let data = groupsToBeAdded;
+        try {
+            loading = true;
+            await api().members(member.id).groups.add.post({data});
+            groups.forEach(group =>  data.includes(group.uuid) && group.members.push(member.uuid));
+            updateGroups();
+            err = null;
+            groupsToBeAdded = [];
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function submitRemove() {
+        let data = groupsToBeRemoved;
+        try {
+            loading = true;
+            await api().members(member.id).groups.remove.post({data});
+            groups.forEach(group => {if (data.includes(group.uuid)) group.members = group.members.filter(m => m !== member.uuid)});
+            updateGroups();
+            err = null;
+            groupsToBeRemoved = [];
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+</script>
+{#if err}
+    <Alert color="danger">{err}</Alert>
+{/if}
+<Row>
+    <Col xs={12} lg={6} class="text-center mb-3">
+        <h5><div class="icon d-inline-block">
+            <FaFolderOpen />
+        </div>Current Groups</h5>
+        <ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
+        {#if finalGroupsList && finalGroupsList.length > 0}
+        <ListGroup>
+            {#each finalGroupsList as group, index (group.id)}
+            <ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{group.name}</b> (<code>{group.id}</code>)</span> <span>{@html group.display_name ? `${toHTML(group.display_name)}` : ""}</span></span></ListGroupItem>
+            {/each}
+        </ListGroup>
+        {:else}
+        <p>This member is inside no groups.</p>
+        <p>You can add groups in this menu!</p>
+        {/if}
+    </Col>
+    <Col xs={12} lg={6} class="text-center mb-3">
+        <h5><div class="icon d-inline-block">
+            <FaFolderPlus />
+        </div>Add to Groups</h5>
+        <Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeAdded} options={groupsWithoutMemberSelection} multiple/>
+        {#if !loading && groupsToBeAdded && groupsToBeAdded.length > 0}
+        <Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
+        {/if}
+        <hr/>
+        <h5><div class="icon d-inline-block">
+            <FaFolderMinus />
+        </div>Remove from Groups</h5>
+        <Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeRemoved} options={groupsWithMemberSelection} multiple/>
+        {#if !loading && groupsToBeRemoved && groupsToBeRemoved.length > 0}
+        <Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
+        {/if}
+    </Col>
+</Row>
+<Button style="flex: 0" color="secondary" on:click={() => groupMode = false}>Back</Button>
\ No newline at end of file
diff --git a/dashboard/src/lib/member/List.svelte b/dashboard/src/lib/member/List.svelte
new file mode 100644
index 00000000..77ce167c
--- /dev/null
+++ b/dashboard/src/lib/member/List.svelte
@@ -0,0 +1,366 @@
+<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">
+                        <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">
+                        <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">
+                        <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">
+                        <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">
+                        <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"}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+         | <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+         | <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+         | <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"}>{@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}>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}>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/lib/member/NewMember.svelte b/dashboard/src/lib/member/NewMember.svelte
new file mode 100644
index 00000000..ec351bb4
--- /dev/null
+++ b/dashboard/src/lib/member/NewMember.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+    import { Accordion, AccordionItem, Row, Col, Input, Button, Label, Alert, Spinner, CardTitle, InputGroup } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+    import autosize from 'svelte-autosize';
+    import moment from 'moment';
+    import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
+    import { Member } from '../../api/types';
+    import api from '../../api';
+
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
+    let err: string[] = [];
+    let message: string;
+    let loading: boolean = false;
+    let privacyMode: boolean = false;
+    let proxyTagMode: boolean = false;
+
+    let defaultMember = {
+        privacy: {
+            visibility: "public",
+            metadata_privacy: "public",
+            description_privacy: "public",
+            pronoun_privacy: "public",
+            birthday_privacy: "public",
+            name_privacy: "public",
+            avatar_privacy: "public"
+        },
+        proxy_tags: [
+            {
+                prefix: "",
+                suffix: ""
+            }
+        ]
+    };
+
+    let input: Member = defaultMember;
+
+    const dispatch = createEventDispatcher();
+
+    function create() {
+        dispatch('create', input);
+    }
+
+    async function submit() {
+        let data = input;
+        message = "";
+        err = [];
+
+        if (input.proxy_tags.some(tag => tag.prefix && tag.suffix && tag.prefix.length + tag.suffix.length + 4 > 100)) {
+            err.push("One of your proxy tags is too long (prefix + 'text' + suffix must be shorter than 100 characters). Please shorten this tag, or remove it.");
+        }
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        if (data.birthday) {
+            if (!moment(data.birthday, 'YYYY-MM-DD').isValid()) {
+                if (moment(data.birthday, 'MM-DD').isValid()) {
+                    data.birthday = '0004-' + data.birthday;
+                } else {
+                    err.push(`${data.birthday} is not a valid date, please use the following format: YYYY-MM-DD. (example: 2019-07-21)`);
+                }
+            }
+            if (data.birthday.includes('/')) {
+                data.birthday.replace('/', '-');
+            }
+        }
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().members().post({data});
+            input = res;
+            err = [];
+            create();
+            input = defaultMember;
+            message = `Member ${data.name} successfully created!`
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+
+</script>
+
+<Accordion class="mb-3">
+    <AccordionItem>
+        <CardTitle slot="header" style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex align-middle w-100 p-2">
+            <div class="icon d-inline-block">
+                <FaPlus/>
+            </div>
+            <span style="vertical-align: middle;">Add new Member</span>
+        </CardTitle>
+        {#if message}
+            <Alert color="success">{@html message}</Alert>
+        {/if}
+        {#each err as error}
+            <Alert color="danger">{@html error}</Alert>
+        {/each}
+        <Row>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Name:</Label>
+                <Input bind:value={input.name} maxlength={100} type="text" placeholder={input.name} />
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Display name:</Label>
+                <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={input.display_name} />
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Pronouns:</Label>
+                <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={input.pronouns} />
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Birthday:</Label>
+                <Input bind:value={input.birthday} maxlength={100} type="text" placeholder={input.birthday} />
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Color:</Label>
+                <Input bind:value={input.color} type="text" placeholder={input.color}/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Avatar url:</Label>
+                <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={input.avatar_url}/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Banner url:</Label>
+                <Input bind:value={input.banner} maxlength={256} type="url" placeholder={input.banner}/>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Privacy:</Label>
+                <Button class="w-100" color="secondary" on:click={() => privacyMode = !privacyMode}>Toggle privacy</Button>
+            </Col>
+            <Col xs={12} lg={4} class="mb-2">
+                <Label>Proxy tags:</Label>
+                <Button class="w-100" color="secondary" on:click={() => proxyTagMode = !proxyTagMode}>Toggle proxy tags</Button>
+            </Col>
+        </Row>
+        {#if privacyMode}
+        <hr/>
+        <b>Privacy:</b>
+        <Row>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Description:</Label>
+                <Input type="select" bind:value={input.privacy.description_privacy}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Name:</Label>
+                <Input type="select" bind:value={input.privacy.name_privacy}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Avatar:</Label>
+                <Input type="select" bind:value={input.privacy.avatar_privacy}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Birthday:</Label>
+                <Input type="select" bind:value={input.privacy.birthday_privacy}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Pronouns:</Label>
+                <Input type="select" bind:value={input.privacy.pronoun_privacy}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Visibility:</Label>
+                <Input type="select" bind:value={input.privacy.visibility}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <Label>Metadata:</Label>
+                <Input type="select" bind:value={input.privacy.metadata_privacy}>
+                    <option default>public</option>
+                    <option>private</option>
+                </Input>
+            </Col>
+        </Row>
+        {/if}
+        {#if proxyTagMode}
+        <hr/>
+        <b>Proxy tags:</b>
+        <Row class="mb-2">
+            {#each input.proxy_tags as proxyTag, index (index)}
+            <Col xs={12} lg={4} class="mb-2">
+                <InputGroup>
+                    <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
+                    <Input disabled value="text"/>
+                    <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
+                </InputGroup>
+            </Col>
+            {/each}
+            <Col xs={12} lg={4} class="mb-2">
+                <Button class="w-100" color="secondary" on:click={() => {input.proxy_tags.push({prefix: "", suffix: ""}); input.proxy_tags = input.proxy_tags;}}>New</Button>
+            </Col>
+        </Row>
+        {/if}
+        <hr/>
+        <div class="my-2">
+            <b>Description:</b><br />
+            {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+            {/if}
+            {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+            {/if}
+            {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+            <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+            {/if}
+            <br>
+            <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={input.description}/>
+        </div>
+        {#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
+        {:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
+        {:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button>{/if}
+    </AccordionItem>
+</Accordion>
\ No newline at end of file
diff --git a/dashboard/src/lib/member/Privacy.svelte b/dashboard/src/lib/member/Privacy.svelte
new file mode 100644
index 00000000..4014c092
--- /dev/null
+++ b/dashboard/src/lib/member/Privacy.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import { Col, Row, Input, Label, Button, Alert, Spinner } from "sveltestrap";
+
+    import { Member } from '../../api/types';
+    import api from '../../api';
+
+    let loading: boolean;
+    export let privacyOpen: boolean;
+    export let member: Member;
+    const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
+    
+    let err: string;
+
+    let allPrivacy: string;
+
+    $: { changePrivacy(allPrivacy)}
+
+    function changePrivacy(value: string) {
+        if (value) {
+        input.privacy.description_privacy = value;
+        input.privacy.name_privacy = value;
+        input.privacy.avatar_privacy = value;
+        input.privacy.birthday_privacy = value;
+        input.privacy.pronoun_privacy = value;
+        input.privacy.visibility = value;
+        input.privacy.metadata_privacy = value;
+        }
+    }
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', member);
+    }
+
+    let input: Member = {privacy: member.privacy};
+
+    async function submit() {
+        let data = input;
+        err = null;
+
+        loading = true;
+        try {
+            let res = await api().members(member.id).patch({data});
+            member = res;
+            update();
+            loading = false;
+            togglePrivacyModal();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            err = err;
+            loading = false;
+        }
+    }
+</script>
+
+
+    {#if err}
+    <Alert color="danger">{err}</Alert>
+    {/if}
+    <Label><b>Set all to:</b></Label>
+    <Input type="select" bind:value={allPrivacy}>
+        <option>public</option>
+        <option>private</option>
+    </Input>
+    <hr />
+    <Row>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Description:</Label>
+            <Input type="select" bind:value={input.privacy.description_privacy}>
+                <option default={member.privacy.description_privacy === "public"}>public</option>
+                <option default={member.privacy.description_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Name:</Label>
+            <Input type="select" bind:value={input.privacy.name_privacy}>
+                <option default={member.privacy.name_privacy === "public"}>public</option>
+                <option default={member.privacy.name_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Avatar:</Label>
+            <Input type="select" bind:value={input.privacy.avatar_privacy}>
+                <option default={member.privacy.avatar_privacy === "public"}>public</option>
+                <option default={member.privacy.avatar_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Birthday:</Label>
+            <Input type="select" bind:value={input.privacy.birthday_privacy}>
+                <option default={member.privacy.birthday_privacy === "public"}>public</option>
+                <option default={member.privacy.birthday_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Pronouns:</Label>
+            <Input type="select" bind:value={input.privacy.pronoun_privacy}>
+                <option default={member.privacy.pronoun_privacy === "public"}>public</option>
+                <option default={member.privacy.pronoun_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Visibility:</Label>
+            <Input type="select" bind:value={input.privacy.visibility}>
+                <option default={member.privacy.visibility === "public"}>public</option>
+                <option default={member.privacy.visibility === "private"}>private</option>
+            </Input>
+        </Col>
+        <Col xs={12} lg={6} class="mb-3">
+            <Label>Metadata:</Label>
+            <Input type="select" bind:value={input.privacy.metadata_privacy}>
+                <option default={member.privacy.metadata_privacy === "public"}>public</option>
+                <option default={member.privacy.metadata_privacy === "private"}>private</option>
+            </Input>
+        </Col>
+    </Row>
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
+{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/member/ProxyTags.svelte b/dashboard/src/lib/member/ProxyTags.svelte
new file mode 100644
index 00000000..57f6040f
--- /dev/null
+++ b/dashboard/src/lib/member/ProxyTags.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import { Col, Row, Input, Label, Button, Alert, Spinner, InputGroup } from "sveltestrap";
+
+    import { Member } from '../../api/types';
+    import api from '../../api';
+
+    let loading: boolean;
+    export let proxyOpen: boolean;
+    export let member: Member;
+    const toggleProxyModal = () => (proxyOpen = !proxyOpen);
+
+    let err: string;
+
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', member);
+    }
+
+    let input = member.proxy_tags;
+
+    async function submit() {
+        err = null;
+        if (input.some(tag => tag.prefix && tag.suffix && tag.prefix.length + tag.suffix.length + 4 > 100)) {
+            err = "One of your proxy tags is too long (prefix + 'text' + suffix must be shorter than 100 characters). Please shorten this tag, or remove it."
+            return;
+        }
+
+        let data: Member = {proxy_tags: input};
+        loading = true;
+
+        try {
+            let res = await api().members(member.id).patch({data});
+            member = res;
+            err = null;
+            update();
+            loading = false;
+            toggleProxyModal();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+</script>
+
+{#if err}
+<Alert color="danger">{err}</Alert>
+{/if}
+<Row class="mb-2">
+    {#each input as proxyTag, index (index)}
+    <Col xs={12} lg={6} class="mb-2">
+        <InputGroup>
+            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
+            <Input disabled value="text"/>
+            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
+        </InputGroup>
+    </Col>
+    {/each}
+    <Col xs={12} lg={6} class="mb-2">
+        <Button class="w-100" color="secondary" on:click={() => {input.push({prefix: "", suffix: ""}); input = input;}}>New</Button>
+    </Col>
+</Row>
+{#if !loading}<Button style="flex 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={toggleProxyModal}>Back</Button>
+{:else}<Button style="flex 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/shard.svelte b/dashboard/src/lib/shard.svelte
new file mode 100644
index 00000000..6acb9f36
--- /dev/null
+++ b/dashboard/src/lib/shard.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	export let hover;
+
+	export let shard = {
+		id: 1,
+		status: "",
+		ping:0,
+		disconnection_count:0,
+		last_connection:0,
+		last_heartbeat:0.
+	};
+	
+	let color = "background-color: #fff";
+
+	// shard is down
+	// todo: check if last heartbeat is really recent, since database up/down status can get out of sync
+	if (shard.status != "up") color = "background-color: #000;";
+	// shard latency is < 250ms: OK!
+	else if (shard.ping < 300) color = "background-color: #00cc00;";
+	// shard latency is 250ms < ping < 600ms: slow, but OK
+	else if (shard.ping < 600) color = "background-color: #da9317;";
+	// shard latency is >600ms, this might be problematic
+	else color = "background-color: #cc0000;"
+</script>
+
+<div class="wrapper">
+	<div
+		on:click={() => hover = (hover != shard.id) ? shard.id : null}
+		class="shard" id={shard.id.toString()}
+		style={color}
+	>{ shard.id }</div>
+	{#if hover == shard.id}
+		<div class="more-info">
+			<br>
+			<h3>Shard { shard.id }</h3>
+			<br>
+			<span>Status: <b>{ shard.status }</b></span><br>
+			<span>Latency: { shard.ping }ms</span><br>
+			<span>Disconnection count: { shard.disconnection_count }</span><br>
+			<span>Last connection: { shard.last_connection }</span><br>
+			<span>Last heartbeat: { shard.last_heartbeat }</span><br>
+			<br>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wrapper {
+		height: 55px;
+		width: 55px;
+		display: block;
+		float: left;
+	}
+	.shard:hover {
+		cursor: pointer;
+	}
+	.shard {
+		color: #fff;
+		display: block;
+		float: left;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+		z-index: 1;
+		height: 50px;
+		width: 50px;
+		margin-right: 5px;
+		margin-bottom: 5px;
+		border-radius: 2px;
+		-webkit-touch-callout: none; /* iOS Safari */
+		  -webkit-user-select: none; /* Safari */
+		   -khtml-user-select: none; /* Konqueror HTML */
+			 -moz-user-select: none; /* Old versions of Firefox */
+			  -ms-user-select: none; /* Internet Explorer/Edge */
+				  user-select: none; /* Non-prefixed version, currently
+										supported by Chrome, Edge, Opera and Firefox */
+	}
+	.more-info {
+		/* display: none; */
+		position: absolute;
+		margin-top: 3em;
+		will-change: transform;
+		min-height: 150px;
+		width: 200px;
+		z-index: 2;
+		border-radius: 5px;
+		background-color: #333;
+		color: #fff;
+		opacity: 95%;
+		text-align: center;
+	}
+</style>
+	
\ No newline at end of file
diff --git a/dashboard/src/lib/system/Body.svelte b/dashboard/src/lib/system/Body.svelte
new file mode 100644
index 00000000..de56b309
--- /dev/null
+++ b/dashboard/src/lib/system/Body.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { Row, Col, Modal, Image, Button } from 'sveltestrap';
+    import moment from 'moment';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';
+
+    import { System } from '../../api/types';
+   
+    export let user: System;
+    export let editMode: boolean;
+    export let isPublic: boolean;
+
+    let htmlDescription: string;
+    let htmlName: string;
+    if (user.description) { 
+        htmlDescription = toHTML(user.description, {embed: true});
+    } else {
+        htmlDescription = "(no description)";
+    }
+
+    if (user.name) {
+        htmlName = toHTML(user.name);
+    }
+
+    let created = moment(user.created).format("MMM D, YYYY");
+
+    let bannerOpen = false;
+    const toggleBannerModal = () => (bannerOpen = !bannerOpen);
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    let descriptionElement: any;
+    let nameElement: any;
+    let tagElement: any;
+
+    $: if (settings && settings.appearance.twemoji) {
+        if (descriptionElement) twemoji.parse(descriptionElement);
+        if (nameElement) twemoji.parse(nameElement);
+        if (tagElement) twemoji.parse(tagElement);
+    }
+
+</script>
+
+<Row>
+    {#if user.id}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>ID:</b> {user.id}
+    </Col>
+    {/if}
+    {#if user.name}
+    <Col xs={12} lg={4} class="mb-2">
+        <span  bind:this={nameElement}><b>Name:</b> {@html htmlName}</span>
+    </Col>
+    {/if}
+    {#if user.tag}
+    <Col xs={12} lg={4} class="mb-2">
+        <span bind:this={tagElement}><b>Tag:</b> {user.tag}</span>
+    </Col>
+    {/if}
+    {#if user.created && !isPublic}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Created:</b> {created}
+    </Col>
+    {/if}
+    {#if user.timezone && !isPublic}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Timezone:</b> {user.timezone}
+    </Col>
+    {/if}
+    {#if user.color}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Color:</b> {user.color}
+    </Col>
+    {/if}
+    {#if user.banner}
+    <Col xs={12} lg={3} class="mb-2">
+        <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal}>View</Button>
+        <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
+            <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                <Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="Your system banner" />
+            </div>
+        </Modal>
+    </Col>
+    {/if}
+</Row>
+<div class="my-2 description" bind:this={descriptionElement}>
+    <b>Description:</b><br />
+    {@html htmlDescription}
+</div>
+{#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
+<img src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+{/if}
+{#if !isPublic}
+<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/system/Edit.svelte b/dashboard/src/lib/system/Edit.svelte
new file mode 100644
index 00000000..406d1057
--- /dev/null
+++ b/dashboard/src/lib/system/Edit.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
+    import autosize from 'svelte-autosize';
+    // import moment from 'moment-timezone';
+    import { currentUser } from '../../stores';
+
+    const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
+
+    import { System } from '../../api/types';
+    import api from '../../api';
+
+    export let editMode: boolean;
+    export let user: System;
+    export let loading: boolean;
+
+    let err: string[] = [];
+
+    let input: System = {...user};
+    
+    async function submit() {
+        let data = input;
+        err = [];
+
+        if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
+            err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
+        } else if (data.color) {
+            if (data.color.startsWith("#")) {
+                data.color = input.color.slice(1, input.color.length);
+            }
+        }
+
+        /* if (data.timezone && !moment.tz.zone(data.timezone)) {
+            err.push(`"${data.timezone}" is not a valid timezone, check out <a target="_blank" style="color: var(--bs-body-color);" href="https://xske.github.io/tz/">this site</a> to see your current timezone!`);
+        } */
+
+        err = err;
+        if (err.length > 0) return;
+
+        loading = true;
+        try {
+            let res = await api().systems("@me").patch({data});
+            user = res;
+            currentUser.update(() => res);
+            err = [];
+            editMode = false;
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err.push(error.message);
+            err = err;
+            loading = false;
+        }
+    }
+</script>
+
+{#each err as error}
+    <Alert color="danger">{@html error}</Alert>
+{/each}
+<Row>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Name:</Label>
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={user.name} />
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Tag:</Label>
+        <Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} />
+    </Col>
+    <!-- <Col xs={12} lg={4} class="mb-2">
+        <Label>Timezone:</Label>
+        <Input bind:value={input.timezone} type="text" placeholder={user.timezone} />
+    </Col> -->
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Color:</Label>
+        <Input bind:value={input.color} type="text" placeholder={user.color}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Avatar url:</Label>
+        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={user.avatar_url}/>
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Banner url:</Label>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={user.banner}/>
+    </Col>
+</Row>
+<div class="my-2">
+    <b>Description:</b><br />
+    {#if descriptions.length > 0 && descriptions[0].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    {/if}
+    {#if descriptions.length > 1 && descriptions[1].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    {/if}
+    {#if descriptions.length > 2 && descriptions[2].trim() != ""}
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    {/if}
+    <br>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}/>
+</div>
+<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false}>Back</Button>
\ No newline at end of file
diff --git a/dashboard/src/lib/system/Main.svelte b/dashboard/src/lib/system/Main.svelte
new file mode 100644
index 00000000..7b4f351b
--- /dev/null
+++ b/dashboard/src/lib/system/Main.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Card, CardBody, CardHeader } from 'sveltestrap';
+    import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
+    import CardsHeader from '../CardsHeader.svelte';
+    import Body from './Body.svelte';
+    import Privacy from './Privacy.svelte';
+    import Edit from './Edit.svelte';
+
+    import { System } from '../../api/types';
+
+    export let user: System;
+    export let isPublic = true;
+    let loading = false;
+
+    let editMode = false;
+</script>
+
+<Card class="mb-4">
+    <CardHeader>
+        <CardsHeader bind:item={user} bind:loading>
+            <FaAddressCard slot="icon" />
+        </CardsHeader>
+    </CardHeader>
+    <CardBody style="border-left: 4px solid #{user.color}">
+        {#if !editMode}
+        <Body bind:user bind:editMode bind:isPublic/>
+        {:else}
+        <Edit bind:user bind:editMode bind:loading />
+        {/if}
+    </CardBody>
+</Card>
+
+{#if !isPublic}
+    <Privacy bind:user />
+{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/system/Privacy.svelte b/dashboard/src/lib/system/Privacy.svelte
new file mode 100644
index 00000000..35d0193a
--- /dev/null
+++ b/dashboard/src/lib/system/Privacy.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, CardTitle, Row, Col, Button, Spinner } from 'sveltestrap';
+    import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+    import PrivacyEdit from './PrivacyEdit.svelte';
+
+    import { System } from '../../api/types';
+
+    export let user: System;
+    let editMode = false;
+
+    let loading: boolean;
+</script>
+
+<Card class="mb-4">
+    <CardHeader>
+        <CardTitle style="margin-top: 8px; outline: none;">
+            <div class="icon d-inline-block">
+                <FaUserLock />
+            </div> System privacy
+            {#if loading}<div class="d-inline-block mr-5" style="float: right;"><Spinner color="primary" /></div>{/if}
+        </CardTitle>
+    </CardHeader>
+    <CardBody style="border-left: 4px solid #{user.color}">
+        {#if editMode}
+        <PrivacyEdit bind:loading bind:user={user} bind:editMode/>
+        {:else}
+        <Row>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Description:</b> {user.privacy.description_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Member list:</b> {user.privacy.member_list_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Group list:</b> {user.privacy.group_list_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Current front:</b> {user.privacy.front_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Front history:</b> {user.privacy.front_history_privacy}
+            </Col>
+        </Row>
+        <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+        <Button style="flex: 0" color="secondary" on:click={() => window.location.href = window.location.origin+"/dash/bulk-member-privacy"}>Bulk member privacy</Button>
+        <Button style="flex: 0" color="secondary" on:click={() => window.location.href = window.location.origin+"/dash/bulk-group-privacy"}>Bulk group privacy</Button>
+        {/if}
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/dashboard/src/lib/system/PrivacyEdit.svelte b/dashboard/src/lib/system/PrivacyEdit.svelte
new file mode 100644
index 00000000..9459075d
--- /dev/null
+++ b/dashboard/src/lib/system/PrivacyEdit.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { Input, Row, Col, Button, Label, Alert } from 'sveltestrap';
+    import { currentUser } from '../../stores';
+
+    import { System } from '../../api/types';
+    import api from '../../api';
+
+    export let loading = false;
+    export let user: System;
+    export let editMode: boolean;
+
+    let err: string;
+
+    let input: System = {privacy: user.privacy};
+
+    async function submit() {
+        let data = input;
+        err = null;
+
+        loading = true;
+        try {
+            let res = await api().systems("@me").patch({data});
+            user = res;
+            currentUser.update(() => res);
+            editMode = false;
+            loading = false;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            err = err;
+            loading = false;
+        }
+    }
+
+    let allPrivacy: string;
+
+    $: { changePrivacy(allPrivacy)}
+
+    function changePrivacy(value: string) {
+        if (value) {
+        input.privacy.description_privacy = value;
+        input.privacy.member_list_privacy = value;
+        input.privacy.group_list_privacy = value;
+        input.privacy.front_privacy = value;
+        input.privacy.front_history_privacy = value;
+        }
+    }
+</script>
+
+{#if err}
+    <Alert color="danger">{err}</Alert>
+{/if}
+<Label><b>Set all to:</b></Label>
+<Input type="select" bind:value={allPrivacy}>
+    <option>public</option>
+    <option>private</option>
+</Input>
+<hr />
+<Row>
+    <Col xs={12} lg={4} class="mb-3">
+        <Label>Description:</Label>
+        <Input type="select" bind:value={input.privacy.description_privacy}>
+            <option default={user.privacy.description_privacy === "public"}>public</option>
+            <option default={user.privacy.description_privacy === "private"}>private</option>
+        </Input>
+    </Col>
+    <Col xs={12} lg={4} class="mb-3">
+        <Label>Member list:</Label>
+        <Input type="select" bind:value={input.privacy.member_list_privacy}>
+            <option default={user.privacy.member_list_privacy === "public"}>public</option>
+            <option default={user.privacy.member_list_privacy === "private"}>private</option>
+        </Input>
+    </Col>
+    <Col xs={12} lg={4} class="mb-3">
+        <Label>Group list:</Label>
+        <Input type="select" bind:value={input.privacy.group_list_privacy}>
+            <option default={user.privacy.group_list_privacy === "public"}>public</option>
+            <option default={user.privacy.group_list_privacy === "private"}>private</option>
+        </Input>
+    </Col>
+    <Col xs={12} lg={4} class="mb-3">
+        <Label>Current front:</Label>
+        <Input type="select" bind:value={input.privacy.front_privacy}>
+            <option default={user.privacy.front_privacy === "public"}>public</option>
+            <option default={user.privacy.front_privacy === "private"}>private</option>
+        </Input>
+    </Col>
+    <Col xs={12} lg={4} class="mb-3">
+        <Label>Front history:</Label>
+        <Input type="select" bind:value={input.privacy.front_history_privacy}>
+            <option default={user.privacy.front_history_privacy === "public"}>public</option>
+            <option default={user.privacy.front_history_privacy === "private"}>private</option>
+        </Input>
+    </Col>
+</Row>
+<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
\ No newline at end of file
diff --git a/dashboard/src/main.ts b/dashboard/src/main.ts
new file mode 100644
index 00000000..e2e5253c
--- /dev/null
+++ b/dashboard/src/main.ts
@@ -0,0 +1,23 @@
+import * as Sentry from "@sentry/browser";
+import { Integrations } from "@sentry/tracing";
+
+Sentry.init({
+  dsn: "https://58109fec589f4c2bbfa190329acf679a@sentry.pluralkit.me/4",
+  integrations: [new Integrations.BrowserTracing()],
+
+  enabled: !window.location.origin.includes("localhost"),
+  debug: false,
+  release: "dev",
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+});
+
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app
diff --git a/dashboard/src/pages/BulkGroupPrivacy.svelte b/dashboard/src/pages/BulkGroupPrivacy.svelte
new file mode 100644
index 00000000..11c60479
--- /dev/null
+++ b/dashboard/src/pages/BulkGroupPrivacy.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Alert, Label, Input, Button, Spinner } from 'sveltestrap';
+    import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+
+	import api from '../api';
+    import { GroupPrivacy, System } from '../api/types';
+	const user: System = JSON.parse(localStorage.getItem("pk-user"));
+
+	// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+
+	let loading = false;
+	let err = "";
+	let success = false;
+
+	// kinda hacked together from typescript's Required<T> type
+	const privacy: { [P in keyof GroupPrivacy]-?: string; } = {
+		description_privacy:  "no change",
+		name_privacy: "no change",
+		list_privacy: "no change",
+		icon_privacy: "no change",
+		visibility: "no change",
+		metadata_privacy: "no change",
+	};
+
+	const privacyNames: { [P in keyof GroupPrivacy]-?: string; } = {
+		name_privacy: "Name",
+		description_privacy:  "Description",
+		icon_privacy: "Icon",
+		list_privacy: "Member list",
+		metadata_privacy: "Metadata",
+		visibility: "Visbility",
+	};
+
+	async function submit() {
+		success = false;
+		loading = true;
+		const dataArray = Object.entries(privacy).filter(([, value]) => value === "no change" ? false : true);
+		const data = Object.fromEntries(dataArray);
+		try {
+			await api().private.bulk_privacy.group.post({ data });
+			success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
+
+	function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+			<Card class="mb-4">
+				<CardHeader>
+					<CardTitle style="margin-top: 8px; outline: none;">
+						<div class="icon d-inline-block">
+							<FaUserLock />
+						</div> Bulk group privacy
+					</CardTitle>
+				</CardHeader>
+				<CardBody style="border-left: 4px solid #{user.color}">
+					{#if err}
+					<Alert color="danger">{err}</Alert>
+					{/if}
+					{#if success}
+					<Alert color="success">Group privacy updated!</Alert>
+					{/if}
+					<Label><b>Set all to:</b></Label>
+					<Input type="select" on:change={(e) => changeAll(e)}>
+						<option>no change</option>
+						<option>public</option>
+						<option>private</option>
+					</Input>
+					<hr/>
+					<Row>
+						{#each Object.keys(privacy) as x}
+						<Col xs={12} lg={6} class="mb-3">
+							<Label>{privacyNames[x]}:</Label>
+							<Input type="select" bind:value={privacy[x]}>
+								<option default>no change</option>
+								<option>public</option>
+								<option>private</option>
+							</Input>
+						</Col>
+						{/each}
+					</Row>
+
+					<Button color="primary" on:click={submit} bind:disabled={loading}>
+						{#if loading}
+						<Spinner />
+						{:else}
+						Submit
+						{/if}
+					</Button>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+</Container>
\ No newline at end of file
diff --git a/dashboard/src/pages/BulkMemberPrivacy.svelte b/dashboard/src/pages/BulkMemberPrivacy.svelte
new file mode 100644
index 00000000..d962d339
--- /dev/null
+++ b/dashboard/src/pages/BulkMemberPrivacy.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Label, Input, Button, Spinner, Alert } from 'sveltestrap';
+    import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
+
+	import api from '../api';
+    import { MemberPrivacy, System } from '../api/types';
+import Member from './Member.svelte';
+	const user: System = JSON.parse(localStorage.getItem("pk-user"));
+
+	// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
+
+	let loading = false;
+	let err = "";
+	let success = false;
+
+	const privacy: { [P in keyof MemberPrivacy]-?: string; } = {
+		description_privacy: "no change",
+		name_privacy: "no change",
+		avatar_privacy: "no change",
+		birthday_privacy: "no change",
+		pronoun_privacy: "no change",
+		visibility: "no change",
+		metadata_privacy: "no change",
+	};
+
+	const privacyNames: { [P in keyof MemberPrivacy]-?: string; } = {
+		avatar_privacy: "Avatar",
+		birthday_privacy: "Birthday",
+		description_privacy: "Description",
+		metadata_privacy: "Metadata",
+		name_privacy: "Name",
+		pronoun_privacy: "Pronouns",
+		visibility: "Visibility",
+	};
+
+	async function submit() {
+		success = false;
+		loading = true;
+		const dataArray = Object.entries(privacy).filter(([, value]) => value === "no change" ? false : true);
+		const data = Object.fromEntries(dataArray);
+		try {
+			await api().private.bulk_privacy.member.post({ data });
+			success = true;
+		} catch (error) {
+			console.log(error);
+			err = error.message;
+		}
+		loading = false;
+	}
+	
+	function changeAll(e: Event) {
+		const target = e.target as HTMLInputElement;
+		Object.keys(privacy).forEach(x => privacy[x] = target.value);
+	}
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+			<Card class="mb-4">
+				<CardHeader>
+					<CardTitle style="margin-top: 8px; outline: none;">
+						<div class="icon d-inline-block">
+							<FaUserLock />
+						</div> Bulk member privacy
+					</CardTitle>
+				</CardHeader>
+				<CardBody style="border-left: 4px solid #{user.color}">
+					{#if err}
+					<Alert color="danger">{err}</Alert>
+					{/if}
+					{#if success}
+					<Alert color="success">Member privacy updated!</Alert>
+					{/if}
+					<Label><b>Set all to:</b></Label>
+					<Input type="select" on:change={(e) => changeAll(e)}>
+						<option>no change</option>
+						<option>public</option>
+						<option>private</option>
+					</Input>
+					<hr/>
+					<Row>
+						{#each Object.keys(privacy) as x}
+						<Col xs={12} lg={6} class="mb-3">
+							<Label>{privacyNames[x]}:</Label>
+							<Input type="select" bind:value={privacy[x]}>
+								<option default>no change</option>
+								<option>public</option>
+								<option>private</option>
+							</Input>
+						</Col>
+						{/each}
+					</Row>
+
+					<Button color="primary" on:click={submit} bind:disabled={loading}>
+						{#if loading}
+						<Spinner />
+						{:else}
+						Submit
+						{/if}
+					</Button>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+</Container>
\ No newline at end of file
diff --git a/dashboard/src/pages/Dash.svelte b/dashboard/src/pages/Dash.svelte
new file mode 100644
index 00000000..eccb8c20
--- /dev/null
+++ b/dashboard/src/pages/Dash.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane } from 'sveltestrap';
+    import { navigate, useLocation } from "svelte-navigator";
+    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 { 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);
+    let tabPane: string;
+    if (params) {
+        tabPane = params.get("tab");
+    }
+    
+    if (!tabPane) {
+        tabPane = "system";
+    }
+
+    // subscribe to the cached user in the store
+    let current;
+    currentUser.subscribe(value => {
+        current = value;
+    });
+    
+    // if there is no cached user, get the user from localstorage
+    let user: System = current ?? JSON.parse(localStorage.getItem("pk-user"));
+    // since the user in localstorage can be outdated, fetch the user from the api again
+    if (!current) {
+        login(localStorage.getItem("pk-token"));
+    }
+
+    // if there's no user, and there's no token, assume the login failed and send us back to the homepage.
+    if (!localStorage.getItem("pk-token") && !user) {
+        navigate("/");
+    }
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    // just the login function
+    async function login(token: string) {
+        try {
+            if (!token) {
+                throw new Error("Token cannot be empty.")
+            }
+            const res: System = await api().systems("@me").get({ token });
+            localStorage.setItem("pk-token", token);
+            localStorage.setItem("pk-user", JSON.stringify(res));
+            loggedIn.update(() => true);
+            currentUser.update(() => res);
+            user = res;
+        } catch (error) {
+            console.log(error);
+            localStorage.removeItem("pk-token");
+            localStorage.removeItem("pk-user");
+            currentUser.update(() => null);
+            navigate("/");
+        }
+    }
+    
+    // some values that get passed from the member to the group components and vice versa
+    let members = [];
+    let groups = [];
+
+</script>
+
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && ((settings && settings.appearance.banner_top) || !settings)}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <TabContent class="mt-3">
+                <TabPane tabId="system" tab="System" active={tabPane === "system"}>
+                        <SystemMain bind:user={user} bind:isPublic />
+                </TabPane>
+                <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
+                        <MemberList bind:groups={groups} bind:list={members} bind:isPublic />
+                </TabPane>
+                <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
+                    <GroupList bind:members={members} bind:list={groups} bind:isPublic />
+            </TabPane> 
+            </TabContent>
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>pk-webs | dash</title>
+</svelte:head>
\ No newline at end of file
diff --git a/dashboard/src/pages/DiscordLogin.svelte b/dashboard/src/pages/DiscordLogin.svelte
new file mode 100644
index 00000000..16d348ae
--- /dev/null
+++ b/dashboard/src/pages/DiscordLogin.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Container, Row, Col } from 'sveltestrap';
+    import { onMount } from 'svelte';
+
+    import api from '../api';
+
+    let text = "Loading...";
+    
+    onMount(async () =>
+    {
+        const params = new URLSearchParams(window.location.search);
+        const paramkeys = [...params.keys()];
+        if (paramkeys.includes("code"))
+        {
+            const res = await api().private.discord.callback.post({ data: { code: params.get("code"), redirect_domain: window.location.origin } });
+            localStorage.setItem("pk-token", res.token);
+            localStorage.setItem("pk-user", JSON.stringify(res.system));
+            localStorage.setItem("pk-config", JSON.stringify(res.config));
+            window.location.href = window.location.origin;
+        }
+        else
+        {
+            text = "Error: " + params.get("error_description");
+        }
+    });
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+                {text}
+        </Col>
+    </Row>
+</Container>
\ No newline at end of file
diff --git a/dashboard/src/pages/Group.svelte b/dashboard/src/pages/Group.svelte
new file mode 100644
index 00000000..c098fbd1
--- /dev/null
+++ b/dashboard/src/pages/Group.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
+    import Body from '../lib/group/Body.svelte';
+    import MemberBody from '../lib/member/Body.svelte';
+    import { useParams, Link } from 'svelte-navigator';
+    import { onMount } from 'svelte';
+    import api from "../api";
+    import { Member, Group } from "../api/types";
+    import CardsHeader from "../lib/CardsHeader.svelte";
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
+    import FaList from 'svelte-icons/fa/FaList.svelte';
+    import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
+    import ListPagination from '../lib/ListPagination.svelte';
+    import FaLock from 'svelte-icons/fa/FaLock.svelte'
+
+    let loading = true;
+    let memberLoading = false;
+    let params = useParams();
+    let err = "";
+    let memberErr = "";
+    let group: Group;
+    let members: Member[] = [];
+    let systemMembers: Group[] = [];
+    let isMainDash = false;
+    let isDeleted = false;
+    let notOwnSystem = false;
+
+    const isPage = true;
+    export let isPublic = true;
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let currentPage = 1;
+    let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(members.length / itemsPerPage);
+
+    $: orderedMembers = members.sort((a, b) => a.name.localeCompare(b.name));
+    $: slicedMembers = orderedMembers.slice(indexOfFirstItem, indexOfLastItem);
+
+    onMount(() => {
+        fetchGroup();
+    });
+
+    async function fetchGroup() {
+        try {
+            group = await api().groups($params.id).get({auth: !isPublic});
+            if (!isPublic && !group.privacy) {
+                notOwnSystem = true;
+                throw new Error("Group is not from own system.");
+            }
+            err = "";
+            loading = false;
+            memberLoading = true;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            fetchMembers();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function fetchMembers() {
+        try {
+            members = await api().groups($params.id).members().get({auth: !isPublic});
+            group.members = members.map(function(member) {return member.uuid});
+            if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemMembers = await api().systems("@me").members.get({ auth: true });
+            }
+            memberErr = "";
+            memberLoading = false;
+        } catch (error) {
+            console.log(error);
+            memberErr = error.message;
+            memberLoading = false;
+        }
+    }
+
+    async function updateMembers() {
+      memberLoading = true;
+      await new Promise(resolve => setTimeout(resolve, 500));
+      fetchMembers();
+    }
+
+    function updateDelete() {
+        isDeleted = true;
+    }
+    
+    function updateMemberList(event: any) {
+        members = members.map(member => member.id !== event.detail.id ? member : event.detail);
+        systemMembers = systemMembers.map(member => member.id !== event.detail.id ? member : event.detail);
+    }
+
+    function deleteMemberFromList(event: any) {
+        members = members.filter(member => member.id !== event.detail);
+        systemMembers = systemMembers.filter(member => member.id !== event.detail);
+  }
+</script>
+
+{#if settings && settings.appearance.color_background && !notOwnSystem}
+    <div class="background" style="background-color: {group && `#${group.color}`}"></div>
+{/if}
+{#if group && group.banner && settings && settings.appearance.banner_top && !notOwnSystem}
+<div class="banner" style="background-image: url({group.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            {#if isDeleted}
+                <Alert color="success">Group has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
+            {:else}
+            {#if isPublic}
+                <Alert color="info">You are currently <b>viewing</b> a group.</Alert>
+            {/if}
+            {#if notOwnSystem}
+                <Alert color="danger">This group does not belong to your system, did you mean to look up <Link to={`/profile/g/${group.id}`}>it's public page</Link>?</Alert>
+            {:else if err}
+                <Alert color="danger">{@html err}</Alert>
+            {:else if loading}
+                <Spinner/>
+            {:else if group && group.id}
+                <Card class="mb-4">
+                    <CardHeader>
+                        <CardsHeader bind:item={group}>
+                            <FaUsers slot="icon" />
+                        </CardsHeader>
+                    </CardHeader>
+                    <CardBody>
+                        <Body on:deletion={updateDelete} on:updateMembers={updateMembers} bind:members={systemMembers} bind:group={group} isPage={isPage} isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+            {/if}
+            {#if memberLoading}
+                <Alert color="primary"><Spinner size="sm" /> Fetching members...</Alert>
+            {:else if memberErr}
+                <Alert color="danger">{memberErr}</Alert>
+            {:else if members && members.length > 0}
+            <Card class="mb-2">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaList />
+                        </div> Group list
+                    </CardTitle>
+                </CardHeader>
+            </Card>
+            <ListPagination bind:currentPage bind:pageAmount />
+            {#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
+            <Accordion class="mb-3" stayOpen>
+            {#each slicedMembers as member, index (member.id)}
+            {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
+                <AccordionItem>
+                    <CardsHeader bind:item={member} slot="header">
+                        <FaUserCircle slot="icon" />
+                    </CardsHeader>
+                    <MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
+                </AccordionItem>
+                {:else}
+                <AccordionItem>
+                    <CardsHeader bind:item={member} slot="header">
+                        <FaLock slot="icon" />
+                    </CardsHeader>
+                    <MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
+                </AccordionItem>
+                {/if}
+            {/each}
+            </Accordion>
+            {:else if settings.accessibility.expandedcards}
+            {#each slicedMembers 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>
+                        <MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+                {:else}
+                <Card class="mb-3">
+                    <CardHeader>
+                        <CardsHeader bind:item={member}>
+                            <FaLock slot="icon" />
+                        </CardsHeader>
+                    </CardHeader>
+                    <CardBody>
+                        <MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+                {/if}
+            {/each}
+            {:else}
+            <div class="my-3">
+            {#each slicedMembers as member, index (member.id)}
+                {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
+                <Card>
+                    <Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/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={!isPublic ? `/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}
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<style>
+    .background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        flex: 1;
+        min-height: 100%;
+        z-index: -30;
+    }
+</style>
+
diff --git a/dashboard/src/pages/Home.svelte b/dashboard/src/pages/Home.svelte
new file mode 100644
index 00000000..436f7e23
--- /dev/null
+++ b/dashboard/src/pages/Home.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Container, Card, CardHeader, CardBody, CardTitle, Col, Row, Spinner, Input, Button, Label, Alert } from 'sveltestrap';
+    import FaLockOpen from 'svelte-icons/fa/FaLockOpen.svelte';
+    import { loggedIn, currentUser } from '../stores';
+    import { Link } from 'svelte-navigator';
+    import twemoji from 'twemoji';
+    import { toHTML } from 'discord-markdown';
+
+    import { System } from '../api/types';
+    import api from '../api';
+
+    let loading = false;
+    let err: string;
+    let token: string;
+
+    let isLoggedIn: boolean;
+    let user;
+
+    loggedIn.subscribe(value => {
+		isLoggedIn = value;
+	});
+
+    currentUser.subscribe(value => {
+        user = value;
+    })
+
+    onMount(() => { 
+        if (localStorage.getItem("pk-token")) {
+            login(localStorage.getItem("pk-token"));
+        }
+    });
+
+    async function login(token: string) {
+        loading = true;
+        try {
+            if (!token) {
+                throw new Error("Token cannot be empty.")
+            }
+            const res: System = await api().systems("@me").get({ token });
+            localStorage.setItem("pk-token", token);
+            localStorage.setItem("pk-user", JSON.stringify(res));
+            const settings = await api().systems("@me").settings.get({ token });
+            localStorage.setItem("pk-config", JSON.stringify(settings));
+            err = null;
+            loggedIn.update(() => true);
+            currentUser.update(() => res);
+        } catch (error) {
+            console.log(error);
+            localStorage.removeItem("pk-token");
+            localStorage.removeItem("pk-user");
+            currentUser.update(() => null);
+            err = error.message;
+        }
+        loading = false;
+    }
+
+
+    function logout() {
+        token = null;
+        localStorage.removeItem("pk-token");
+        localStorage.removeItem("pk-user");
+        loggedIn.update(() => false);
+        currentUser.update(() => null);
+    }
+
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+    let welcomeElement: any;
+    let htmlName: string;
+    $: if (user && user.name) {
+        htmlName = toHTML(user.name);
+    }
+    $: if (settings && settings.appearance.twemoji) {
+        if (welcomeElement) twemoji.parse(welcomeElement);
+    }
+
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            {#if err}
+                <Alert color="danger" >{err}</Alert>
+            {/if}
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaLockOpen />
+                        </div>Log in {#if loading} <div style="float: right"><Spinner color="primary" /></div> {/if}
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    {#if loading}
+                        verifying login...
+                    {:else if isLoggedIn}
+                        {#if user && user.name}
+                            <p bind:this={welcomeElement}>Welcome, <b>{@html htmlName}</b>!</p>
+                        {:else}
+                            <p>Welcome!</p>
+                        {/if}
+                        <Link to="/dash"><Button style="float: left;" color='primary'>Go to dash</Button></Link><Button style="float: right;" color='danger' on:click={logout}>Log out</Button>
+                    {:else}
+                        <Row>
+                            <Label>Enter your token here. You can get this by using <b>pk;token</b></Label>
+                            <Col xs={12} md={10}>
+                                <Input class="mb-2 mb-md-0" type="text" bind:value={token}/>
+                            </Col>
+                            <Col xs={12} md={2}>
+                                <Button style="width: 100%" color="primary" on:click={() => login(token)}>Submit</Button>
+                            </Col>
+                        </Row>
+                        <br>
+                        <Row>
+                            <Label>Or, you can</Label>
+                            <Col xs={12}>
+                                <Button color="dark" on:click={() => window.location.href = `https://discord.com/api/oauth2/authorize?client_id=${localStorage.isBeta ? "912009351160541225" : "466378653216014359"}&redirect_uri=${encodeURIComponent(window.location.origin + "/login/discord")}&response_type=code&scope=guilds%20identify`}>
+                                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M19.54 0c1.356 0 2.46 1.104 2.46 2.472v21.528l-2.58-2.28-1.452-1.344-1.536-1.428.636 2.22h-13.608c-1.356 0-2.46-1.104-2.46-2.472v-16.224c0-1.368 1.104-2.472 2.46-2.472h16.08zm-4.632 15.672c2.652-.084 3.672-1.824 3.672-1.824 0-3.864-1.728-6.996-1.728-6.996-1.728-1.296-3.372-1.26-3.372-1.26l-.168.192c2.04.624 2.988 1.524 2.988 1.524-1.248-.684-2.472-1.02-3.612-1.152-.864-.096-1.692-.072-2.424.024l-.204.024c-.42.036-1.44.192-2.724.756-.444.204-.708.348-.708.348s.996-.948 3.156-1.572l-.12-.144s-1.644-.036-3.372 1.26c0 0-1.728 3.132-1.728 6.996 0 0 1.008 1.74 3.66 1.824 0 0 .444-.54.804-.996-1.524-.456-2.1-1.416-2.1-1.416l.336.204.048.036.047.027.014.006.047.027c.3.168.6.3.876.408.492.192 1.08.384 1.764.516.9.168 1.956.228 3.108.012.564-.096 1.14-.264 1.74-.516.42-.156.888-.384 1.38-.708 0 0-.6.984-2.172 1.428.36.456.792.972.792.972zm-5.58-5.604c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332.012-.732-.54-1.332-1.224-1.332zm4.38 0c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332 0-.732-.54-1.332-1.224-1.332z"/>
+                                    </svg>
+                                    Login with Discord
+                                </Button>
+                            </Col>
+                        </Row>
+                    {/if}
+                </CardBody>
+            </Card>
+            {#if isLoggedIn}
+            <Card class="mb-4">
+                <CardBody>
+                    Some cool stuff will go here.
+                </CardBody>
+            </Card>
+            {/if}
+        </Col>
+    </Row>
+</Container>
\ No newline at end of file
diff --git a/dashboard/src/pages/Member.svelte b/dashboard/src/pages/Member.svelte
new file mode 100644
index 00000000..61ee3e1f
--- /dev/null
+++ b/dashboard/src/pages/Member.svelte
@@ -0,0 +1,243 @@
+<script lang="ts">
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
+    import Body from '../lib/member/Body.svelte';
+    import GroupBody from '../lib/group/Body.svelte';
+    import { useParams, Link } from 'svelte-navigator';
+    import { onMount } from 'svelte';
+    import api from "../api";
+    import { Member, Group } from "../api/types";
+    import CardsHeader from "../lib/CardsHeader.svelte";
+    import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
+    import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
+    import FaLock from 'svelte-icons/fa/FaLock.svelte'
+    import FaList from 'svelte-icons/fa/FaList.svelte'
+    import ListPagination from '../lib/ListPagination.svelte';
+
+    let loading = true;
+    let groupLoading = false;
+    let params = useParams();
+    let err = "";
+    let groupErr = "";
+    let member: Member;
+    let groups: Group[] = [];
+    let systemGroups: Group[] = [];
+    let systemMembers: Member[] = [];
+    let isMainDash = false;
+    let isDeleted = false;
+    let notOwnSystem = false;
+
+    const isPage = true;
+    export let isPublic = true;
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let currentPage = 1;
+    let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(groups.length / itemsPerPage);
+
+    $: orderedGroups = groups.sort((a, b) => a.name.localeCompare(b.name));
+    $: slicedGroups = orderedGroups.slice(indexOfFirstItem, indexOfLastItem);
+
+    onMount(() => {
+        fetchMember();
+    });
+
+    async function fetchMember() {
+        try {
+            member = await api().members($params.id).get({auth: !isPublic});
+            if (!isPublic && !member.privacy) {
+                notOwnSystem = true;
+                throw new Error("Member is not from own system.");
+            }
+            err = "";
+            loading = false;
+            groupLoading = true;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            fetchGroups();
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+            loading = false;
+        }
+    }
+
+    async function fetchGroups() {
+        try {
+            groups = await api().members($params.id).groups().get({auth: !isPublic, query: { with_members: !isPublic } });
+            if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemGroups = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
+            }
+            groupErr = "";
+            groupLoading = false;
+            // we can't use with_members from a group list from a member endpoint yet, but I'm leaving this in in case we do
+            // (this is needed for editing a group member list from the member page)
+            /* if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemMembers = await api().systems("@me").members.get({auth: true});
+            } */
+        } catch (error) {
+            console.log(error);
+            groupErr = error.message;
+            groupLoading = false;
+        }
+    }
+
+    async function updateGroups() {
+      groupLoading = true;
+      await new Promise(resolve => setTimeout(resolve, 500));
+      fetchGroups();
+    }
+
+    function updateDelete() {
+        isDeleted = true;
+    }
+    
+    function updateGroupList(event: any) {
+        groups = groups.map(group => group.id !== event.detail.id ? group : event.detail);
+        systemGroups = systemGroups.map(group => group.id !== event.detail.id ? group : event.detail);
+    }
+
+    function deleteGroupFromList(event: any) {
+        groups = groups.filter(group => group.id !== event.detail);
+        systemGroups = systemGroups.filter(group => group.id !== event.detail);
+  }
+</script>
+
+{#if settings && settings.appearance.color_background && !notOwnSystem}
+    <div class="background" style="background-color: {member && `#${member.color}`}"></div>
+{/if}
+{#if member && member.banner && settings && settings.appearance.banner_top && !notOwnSystem}
+<div class="banner" style="background-image: url({member.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            {#if isDeleted}
+                <Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
+            {:else}
+            {#if isPublic}
+                <Alert color="info">You are currently <b>viewing</b> a member.</Alert>
+            {/if}
+            {#if notOwnSystem}
+                <Alert color="danger">This member does not belong to your system, did you mean to look up <Link to={`/profile/m/${member.id}`}>their public page</Link>?</Alert>
+            {:else if err}
+                <Alert color="danger">{@html err}</Alert>
+            {:else if loading}
+                <Spinner/>
+            {:else if member && member.id}
+                <Card class="mb-4">
+                    <CardHeader>
+                        <CardsHeader bind:item={member}>
+                            <FaAddressCard slot="icon" />
+                        </CardsHeader>
+                    </CardHeader>
+                    <CardBody>
+                        <Body on:deletion={updateDelete} on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+            {/if}
+            {#if groupLoading}
+                <Alert color="primary"><Spinner size="sm" /> Fetching groups...</Alert>
+            {:else if groupErr}
+                <Alert color="danger">{groupErr}</Alert>
+            {:else if groups && groups.length > 0}
+            <Card class="mb-2">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaList />
+                        </div> Member groups
+                    </CardTitle>
+                </CardHeader>
+            </Card>
+            <ListPagination bind:currentPage bind:pageAmount />
+            {#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
+            <Accordion class="mb-3" stayOpen>
+            {#each slicedGroups as group, index (group.id)}
+            {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
+                <AccordionItem>
+                    <CardsHeader bind:item={group} slot="header">
+                        <FaUsers slot="icon" />
+                    </CardsHeader>
+                    <GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
+                </AccordionItem>
+                {:else}
+                <AccordionItem>
+                    <CardsHeader bind:item={group} slot="header">
+                        <FaLock slot="icon" />
+                    </CardsHeader>
+                    <GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
+                </AccordionItem>
+                {/if}
+            {/each}
+            </Accordion>
+            {:else if settings.accessibility.expandedcards}
+            {#each slicedGroups as group, index (group.id)}
+                {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
+                <Card class="mb-3">
+                    <CardHeader>
+                        <CardsHeader bind:item={group} >
+                            <FaUsers slot="icon" />
+                        </CardsHeader>
+                    </CardHeader>
+                    <CardBody>
+                        <GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+                {:else}
+                <Card class="mb-3">
+                    <CardHeader>
+                        <CardsHeader bind:item={group} >
+                            <FaLock slot="icon" />
+                        </CardsHeader>
+                    </CardHeader>
+                    <CardBody>
+                        <GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
+                    </CardBody>
+                </Card>
+                {/if}
+            {/each}
+            {:else}
+            <div class="my-3">
+            {#each slicedGroups 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}>
+                            <FaUsers slot="icon" />
+                        </CardsHeader>
+                    </Link>
+                </Card>
+                {/if}
+            {/each}
+            </div>
+            {/if}
+            <ListPagination bind:currentPage bind:pageAmount />
+            {/if}
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<style>
+    .background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        flex: 1;
+        min-height: 100%;
+        z-index: -30;
+    }
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/PageNotFound.svelte b/dashboard/src/pages/PageNotFound.svelte
new file mode 100644
index 00000000..75f60d1e
--- /dev/null
+++ b/dashboard/src/pages/PageNotFound.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Container, Card, CardHeader, CardBody, Row, Col, CardTitle } from 'sveltestrap';
+    import { Link } from 'svelte-navigator';
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card>
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">404. Page not found</CardTitle>
+                </CardHeader>
+                <CardBody>
+                    Looks like this page doesn't exist. <Link to="/">Go home</Link>?
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>
diff --git a/dashboard/src/pages/Public.svelte b/dashboard/src/pages/Public.svelte
new file mode 100644
index 00000000..29a58aad
--- /dev/null
+++ b/dashboard/src/pages/Public.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
+    import { Link, navigate } from 'svelte-navigator';
+    import FaRocket from 'svelte-icons/fa/FaRocket.svelte';
+    import FaStar from 'svelte-icons/fa/FaStar.svelte'
+    import FaMoon from 'svelte-icons/fa/FaMoon.svelte'
+
+    let sysInput: string = "";
+    let memberInput: string = "";
+    let groupInput: string = "";
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={12}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaRocket />
+                        </div>System Profile
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    Submit a <b>system ID</b> to view that system's profile.
+                    <Row>
+                        <Col xs={12} lg={9} class="my-2">
+                            <Input on:keyup={(event) => {if (event.key === "Enter" && sysInput !== "") navigate(`/profile/s/${sysInput.toLowerCase().trim()}`)}} bind:value={sysInput} />
+                        </Col>
+                        <Col xs={12} lg={3} class="my-2 d-flex">
+                            {#if sysInput !== ""}
+                            <Link style="text-decoration: none; flex: 1 0 auto" to="/profile/s/{sysInput.toLowerCase().trim()}"><Button class="w-100" color="primary">View</Button></Link>
+                            {:else}
+                                <Button class="w-100" disabled color="primary">View</Button>
+                            {/if}
+                        </Col>
+                    </Row>
+                </CardBody>
+            </Card>
+
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaStar />
+                        </div>Member Card
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    Submit a <b>member ID</b> to view that member's profile.
+                    <Row>
+                        <Col xs={12} lg={9} class="my-2">
+                            <Input on:keyup={(event) => {if (event.key === "Enter" && memberInput !== "") navigate(`/profile/m/${memberInput.toLowerCase().trim()}`)}} bind:value={memberInput} />
+                        </Col>
+                        <Col xs={12} lg={3} class="my-2 d-flex">
+                            {#if memberInput !== ""}
+                            <Link style="text-decoration: none; flex: 1 0 auto" to="/profile/m/{memberInput.toLowerCase().trim()}"><Button class="w-100" color="primary">View</Button></Link>
+                            {:else}
+                                <Button class="w-100" disabled color="primary">View</Button>
+                            {/if}
+                        </Col>
+                    </Row>
+                </CardBody>
+            </Card>
+
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaMoon />
+                        </div>Group Card
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    Submit a <b>group ID</b> to view that group's profile.
+                    <Row>
+                        <Col xs={12} lg={9} class="my-2">
+                            <Input on:keyup={(event) => {if (event.key === "Enter" && groupInput !== "") navigate(`/profile/g/${groupInput.toLowerCase().trim()}`)}} bind:value={groupInput} />
+                        </Col>
+                        <Col xs={12} lg={3} class="my-2 d-flex">
+                            {#if groupInput !== ""}
+                            <Link style="text-decoration: none; flex: 1 0 auto" to="/profile/g/{groupInput.toLowerCase().trim()}"><Button class="w-100" color="primary">View</Button></Link>
+                            {:else}
+                                <Button class="w-100" disabled color="primary">View</Button>
+                            {/if}
+                        </Col>
+                    </Row>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>
\ No newline at end of file
diff --git a/dashboard/src/pages/Settings.svelte b/dashboard/src/pages/Settings.svelte
new file mode 100644
index 00000000..dd55f159
--- /dev/null
+++ b/dashboard/src/pages/Settings.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip, Button } from 'sveltestrap';
+    import Toggle from 'svelte-toggle';
+    import autosize from 'svelte-autosize';
+    import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
+    import { Config } from '../api/types';
+    import api from '../api';
+
+    let savedSettings = JSON.parse(localStorage.getItem("pk-settings"));
+    let apiConfig: Config = JSON.parse(localStorage.getItem("pk-config"));
+
+    let settings = {
+        appearance: {
+            banner_top: false,
+            banner_bottom: true,
+            gradient_background: false,
+            color_background: false,
+            twemoji: false
+        },
+        accessibility: {
+            opendyslexic: false,
+            pagelinks: false,
+            expandedcards: false
+        }
+    };
+
+    if (savedSettings) {
+        settings = {...settings, ...savedSettings}
+    };
+
+    let descriptions = apiConfig.description_templates;
+
+    async function saveDescriptionTemplates() {
+        const res = await api().systems("@me").settings.patch({ data: { description_templates: descriptions } });
+        localStorage.setItem("pk-config", JSON.stringify(res));
+    }
+
+    function toggleOpenDyslexic() {
+        if (settings.accessibility.opendyslexic) document.getElementById("app").classList.add("dyslexic");
+        else document.getElementById("app").classList.remove("dyslexic");
+    }
+
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaCogs />
+                        </div>Personal settings
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <p>These settings are saved in your localstorage. This means that you have to reapply these every time you visit in a different browser, or clear your browser's cookies.</p>
+                    <h4>Appearance</h4>
+                    <hr/>
+                    <Row class="mb-3">
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-bannertop" placement="bottom">If enabled, shows banners from the top of the system, member and group pages.</Tooltip>
+                        </Col>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-bannerbottom" placement="bottom">If enabled, shows banners at the bottom of the system, member and group cards.</Tooltip>
+                        </Col>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-twemoji">Use twemoji?</span> <Toggle hideLabel style="display: inline" label="Convert to twemoji" toggled={settings.appearance.twemoji} on:toggle={() => {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-twemoji" placement="bottom">If enabled, converts all emojis into twemoji.</Tooltip>
+                        </Col>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-colorbackground">Colored background?</span> <Toggle hideLabel style="display: inline" label="Member color as background" toggled={settings.appearance.color_background} on:toggle={() => {settings.appearance.color_background = !settings.appearance.color_background; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                                <Tooltip target="s-colorbackground" placement="bottom">If enabled, turns the background on member pages into the member's color.</Tooltip>
+                        </Col>
+                    </Row>
+                    <h4>Accessibility</h4>
+                    <hr/>
+                    <Row>
+                        <!-- <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-opendyslexic">Use the opendyslexic font?</span> <Toggle hideLabel style="display: inline" label="Use the opendyslexic font" toggled={settings.accessibility.opendyslexic} on:toggle={() => {settings.accessibility.opendyslexic = !settings.accessibility.opendyslexic; localStorage.setItem("pk-settings", JSON.stringify(settings)); toggleOpenDyslexic();}}/>
+                            <Tooltip target="s-opendyslexic" placement="bottom">If enabled, uses the opendyslexic font as it's main font.</Tooltip>
+                        </Col> -->
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-expandedcards">Expand cards by default?</span> <Toggle hideLabel style="display: inline" label="Expand cards by default" toggled={settings.accessibility.expandedcards} on:toggle={() => {settings.accessibility.expandedcards = !settings.accessibility.expandedcards; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-expandedcards" placement="bottom">If enabled, lists will be expanded by default (overrides page links).</Tooltip>
+                        </Col>
+                        <Col xs={12} lg={4} class="mb-2">
+                            <span id="s-pagelinks">Use page links instead of cards?</span> <Toggle hideLabel style="display: inline" label="Use page links" toggled={settings.accessibility.pagelinks} on:toggle={() => {settings.accessibility.pagelinks= !settings.accessibility.pagelinks; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-pagelinks" placement="bottom">If enabled, the list items will not expand, but instead link to the corresponding page.</Tooltip>
+                        </Col>
+                    </Row>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaCogs />
+                        </div>Templates
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
+                    <b>Template 1</b>
+                    <textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autosize placeholder={descriptions[0]}/>
+                    <br>
+                    <b>Template 2</b>
+                    <textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autosize placeholder={descriptions[1]}/>
+                    <br>
+                    <b>Template 3</b>
+                    <textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autosize placeholder={descriptions[2]}/>
+                    <br>
+                    <Button on:click={saveDescriptionTemplates}>Save</Button>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>pk-webs | settings</title>
+</svelte:head>
+
+<style>
+    textarea {
+        resize: none;
+    }
+</style>
\ No newline at end of file
diff --git a/dashboard/src/pages/profiles/Main.svelte b/dashboard/src/pages/profiles/Main.svelte
new file mode 100644
index 00000000..e030c3c6
--- /dev/null
+++ b/dashboard/src/pages/profiles/Main.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
+    import { useParams, useLocation } from "svelte-navigator";
+    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 { System } from '../../api/types';
+    import api from '../../api';
+
+    let user: System = {};
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let members = [];
+    let groups = [];
+
+    let params = useParams();
+    $: id = $params.id;
+    
+    let location = useLocation();
+    let urlParams = $location.search && new URLSearchParams($location.search);
+    let tabPane: string;
+    if (urlParams) {
+        tabPane = urlParams.get("tab");
+    }
+    
+    if (!tabPane) {
+        tabPane = "system";
+    }
+    
+    let err: string;
+    
+    let title = "system"
+
+    onMount(() => {
+        getSystem();
+    })
+
+    async function getSystem() {
+        try {
+            let res: System = await api().systems(id).get();
+            user = res;
+            title = user.name ? user.name : "system";
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+    }
+
+</script>
+
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && ((settings && settings.appearance.banner_top) || !settings)}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            {#if !user.id && !err}
+            <div class="mx-auto text-center">
+                <Spinner class="d-inline-block" />
+            </div>
+            {:else if err}
+                <Alert color="danger">{err}</Alert>
+            {:else}
+            <Alert color="info">You are currently <b>viewing</b> a system.</Alert>
+            <TabContent class="mt-3">
+                <TabPane tabId="system" tab="System" active={tabPane === "system"}>
+                        <SystemMain bind:user isPublic={true} />
+                </TabPane>
+                <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
+                        <MemberList bind:list={members} isPublic={true} />
+                </TabPane>
+                <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
+                    <GroupList bind:members={members} bind:list={groups} isPublic={true}/>
+            </TabPane> 
+            </TabContent>
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>pk-webs | {title}</title>
+</svelte:head>
\ No newline at end of file
diff --git a/dashboard/src/pages/status.svelte b/dashboard/src/pages/status.svelte
new file mode 100644
index 00000000..4c254c03
--- /dev/null
+++ b/dashboard/src/pages/status.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
+    import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
+    import ShardItem from '../lib/shard.svelte';
+
+    import api from '../api';
+
+    let hover = null;
+
+    let message = "Loading...";
+    let shards = [];
+    let clusters = {};
+    let pingAverage = "";
+    let currentCommitMsg = "";
+
+    let foundShard = {
+        id: 1,
+        status: 1,
+        ping:"",
+        disconnection_count:0,
+        last_connection:0,
+        last_heartbeat:0.
+    };
+    foundShard = null;
+
+    let findShardInput = "";
+    let valid = false;
+
+    const get = async () => {
+        const pkdata = await api().private.meta.get();
+        let data = pkdata.shards.sort((x, y) => (x.id > y.id) ? 1 : -1);
+        let pings = 0;
+        data = data.map(shard => {
+            pings += shard.ping;
+            shard.last_connection = new Date(Number(shard.last_connection) * 1000).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift()
+            shard.last_heartbeat = new Date(Number(shard.last_heartbeat) * 1000).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift()
+            return shard;
+        });
+
+        currentCommitMsg = `Current Git commit: <a href="https://github.com/xSke/PluralKit/commit/${pkdata.version}">${pkdata.version.slice(0,7)}</a>`;
+
+        if (data[0].cluster_id === 0) {
+            let clusterData = {};
+            data.forEach(shard => {
+                if (clusterData[shard.cluster_id] === undefined) clusterData[shard.cluster_id] = [];
+                clusterData[shard.cluster_id].push(shard);
+            });
+            clusters = clusterData;
+        }
+
+        shards = data;
+        pingAverage = Math.trunc(pings / shards.length).toString();
+
+        message = "";
+    };
+
+    get();
+    setTimeout(get, 30 * 1000);
+
+    // javascript wants everything to be BigInts
+    const getShardID = (guild_id: string, num_shards: number) => guild_id == "" ? -1 : (BigInt(guild_id) >> BigInt(22)) % BigInt(num_shards);
+    
+    let shardInfoMsg = "";
+
+    let shardInfoHandler = (_: Event) => {
+        if (findShardInput == "" || !findShardInput) {
+            valid = false;
+            foundShard = null;
+            shardInfoMsg = "";
+            return;
+        };
+        var match = findShardInput.match(/https:\/\/[\w+]?discord[app]?.com\/channels\/(\d+)\/\d+\/\d+/);
+        if (match != null) {
+            console.log("match", match)
+            foundShard = shards[Number(getShardID(match[1], shards.length))];
+            valid = true;
+            shardInfoMsg = "";
+            return;
+        }
+        try {
+            var shard = getShardID(findShardInput, shards.length);
+            if (shard == -1) {
+                valid = false;
+                foundShard == null;
+                shardInfoMsg = "Invalid server ID";
+                return;
+            }
+            foundShard = shards[Number(shard)];
+            valid = true;
+            shardInfoMsg = "";
+        } catch(e) {
+            valid = false;
+            shardInfoMsg = "Invalid server ID";
+        }
+    };
+    
+</script>
+
+<Container fluid>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <Card class="mb-4">
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaInfoCircle />
+                        </div>
+                        Bot status
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <span>{@html currentCommitMsg}</span>
+                    <br>
+                    <noscript>Please enable JavaScript to view this page!</noscript>
+
+                    { shards.length } shards ({ shards.filter(x => x.status == "up").length } up) <br>
+                    Average latency: { pingAverage }ms
+                    <br><br>
+                    All times in UTC. More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a>
+                    <br><br>
+                    <details>
+                        <summary><b>Find my shard</b></summary>
+                        <br>
+                        Enter a server ID or a message link to find the shard currently assigned to your server:
+                        <br>
+                        <input bind:value={findShardInput} on:input={shardInfoHandler} />
+                        <br><br>
+                        <span>{ shardInfoMsg }</span>
+                        {#if valid}
+                            <h3>Your shard is: Shard { foundShard.id }</h3>
+                            <br>
+                            <span>Status: <b>{ foundShard.status }</b></span><br>
+                            <span>Latency: { foundShard.ping }ms</span><br>
+                            <span>Disconnection count: { foundShard.disconnection_count }</span><br>
+                            <span>Last connection: { foundShard.last_connection }</span><br>
+                            <span>Last heartbeat: { foundShard.last_heartbeat }</span><br>
+                        {/if}
+                    </details>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+    {#if Object.keys(clusters).length == 0 && shards.length > 0}
+        <Row>
+            <Col class="mx-auto" xs={12} lg={11} xl={10}>
+                <Card class="mb-4">
+                    <CardBody>
+                        <span>{ message }</span>
+                        {#each shards as shard}
+                            <ShardItem shard={shard} bind:hover={hover} />
+                        {/each}
+                    </CardBody>
+                </Card>
+            </Col>
+        </Row>
+    {/if}
+    {#each Object.keys(clusters) as key}
+        <Row>
+            <Col class="mx-auto" xs={12} lg={11} xl={10}>
+                <Card class="mb-4">
+                    <CardBody>
+                        <CardTitle style="margin-top: 8px; outline: none;">
+                            Cluster {key}
+                        </CardTitle>
+                        <br>
+                        {#each clusters[key] as shard}
+                            <ShardItem shard={shard} bind:hover={hover} />
+                        {/each}
+                    </CardBody>
+                </Card>
+            </Col>
+        </Row>
+    {/each}
+</Container>
\ No newline at end of file
diff --git a/dashboard/src/stores.ts b/dashboard/src/stores.ts
new file mode 100644
index 00000000..7f8bf749
--- /dev/null
+++ b/dashboard/src/stores.ts
@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store';
+
+export const loggedIn = writable(false);
+
+/* export const user = writable({
+    id: null,
+    uuid: null,
+    name: null,
+    description: null,
+    tag: null,
+    avatar_url: null,
+    banner: null,
+    timezone: null,
+    created: null,
+    color: null,
+    privacy: {
+        description_privacy: null,
+        member_list_privacy: null,
+        front_privacy: null,
+        front_history_privacy: null,
+        group_list_privacy: null
+    }
+}); */
+
+export const currentUser = writable(null);
\ No newline at end of file
diff --git a/dashboard/src/vite-env.d.ts b/dashboard/src/vite-env.d.ts
new file mode 100644
index 00000000..4078e747
--- /dev/null
+++ b/dashboard/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/dashboard/style.css b/dashboard/style.css
new file mode 100644
index 00000000..09e4bd3b
--- /dev/null
+++ b/dashboard/style.css
@@ -0,0 +1,135 @@
+#app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.icon {
+    height: 1.5em;
+    width: 1.5em;
+    margin-right: 0.5em;
+}
+
+.avatar {
+    height: 2.5em;
+    width: 2.5em;
+}
+
+.modal-content {
+    border: none !important;
+}
+
+.modal {
+    display: flex;
+}
+
+.banner {
+    z-index: -200;
+    width: 100%;
+    height: 40vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: cover;
+}
+
+blockquote {
+    padding-left: 0.5em;
+    margin: 0.25em 0 0.25em 0 !important;
+    border-left: 4px solid rgba(128, 128, 128, 0.3);
+}
+
+.nav-tabs * .nav-link {
+    background-color: var(--bs-body-bg) !important;
+    border-color: rgba(128, 128, 128, 0.3) !important;
+    border-bottom-color: transparent !important;
+}
+
+.nav-tabs {
+    gap: 0.25em;
+}
+
+.nav-tabs {
+    border-bottom: none !important;
+}
+
+.container {
+    flex: 1 0 auto !important;
+}
+
+.accordion-button::after {
+    display: none;
+}
+
+.pagination {
+    justify-content: center !important;
+}
+
+.page-link {
+    z-index: initial !important;
+}
+
+.svelecte-control .sv-control {
+    border-color: rgba(128, 128, 128, 0.3) !important;
+}
+
+.svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
+    color: var(--bs-body-color) !important;
+    background-color: var(--bs-body-bg) !important;
+}
+
+.sv-item-btn {
+    background-color: var(--bs-light) !important;
+}
+
+.sv-item {
+    cursor: pointer !important;
+}
+
+.d-spoiler {
+    color: var(--bs-dark);
+    background-color: var(--bs-dark);
+    border-radius: 2px;
+    transition-delay: 6000s;
+}
+
+.d-spoiler::selection {
+    color: var(--bs-dark);
+    background-color: transparent;
+}
+
+.d-spoiler:active {
+    background-color: rgba(128, 128, 128, 0.3);
+    color: var(--bs-body-color);
+    transition-delay: 0s;
+}
+
+.d-emoji {
+    height: 1.125em;
+    width: auto;
+    margin: 0 .05em 0 .1em;
+    vertical-align: -0.1125em;
+}
+
+code {
+    color: var(--bs-body-color) !important;
+}
+
+.description a {
+    text-decoration: none;
+    color: #457ead !important;
+    font-weight: bold;
+}
+
+@media (min-width: 768px) {
+    .banner {
+        height: 50vh;
+    }
+}
+
+img.emoji {
+    height: 1.125em;
+    width: auto;
+    margin: 0 .05em 0 .1em;
+    vertical-align: -0.1125em;
+ }
\ No newline at end of file
diff --git a/dashboard/styles/dark.scss b/dashboard/styles/dark.scss
new file mode 100644
index 00000000..57ccc1c0
--- /dev/null
+++ b/dashboard/styles/dark.scss
@@ -0,0 +1,23 @@
+.dark {
+    .navbar.bg-light {
+        background-color: var(--bs-body-bg) !important;
+    }
+    
+    .footer.bg-light {
+        background-color: var(--bs-dark) !important;
+    }
+    
+    > * {
+        .description a {
+            color: #159bd4 !important;
+        }
+    }
+
+    > * {
+        .nav-item {
+            .btn.btn-transparent {
+                color: rgba(250,250,250,.55);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/dashboard/styles/generic.scss b/dashboard/styles/generic.scss
new file mode 100644
index 00000000..14308b52
--- /dev/null
+++ b/dashboard/styles/generic.scss
@@ -0,0 +1,161 @@
+/*
+This stylesheet should be used globally regardless of theming
+
+some specific rules are meant to be overwritten by the individual themes
+*/
+@import url('http://fonts.cdnfonts.com/css/open-dyslexic');
+
+// some variables
+$breakpoint-xs: 0px;
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
+
+$gray-transparent: rgba(128, 128, 128, 0.3);
+
+// general elements
+#app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+blockquote {
+    padding-left: 0.5em;
+    margin: 0.25em 0 0.25em 0 !important;
+    border-left: 4px solid $gray-transparent; // overwrite this in the individual styles
+}
+
+code {
+    color: var(--bs-body-color) !important; // overwrite
+}
+
+.dyslexic {
+    font-family: 'Open-Dyslexic', sans-serif;
+}
+
+// pk-webs specific elements
+.icon {
+    height: 1.5em;
+    width: 1.5em;
+    margin-right: 0.5em;
+}
+
+.avatar {
+    height: 2.5em;
+    width: 2.5em;
+}
+
+.modal-content {
+    border: none !important;
+}
+
+.banner {
+    z-index: -20;
+    width: 100%;
+    height: 40vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: cover;
+}
+
+@media (min-width: $breakpoint-md) {
+    .banner {
+        height: 50vh;
+    }
+}
+
+.description a {
+    text-decoration: none;
+}
+
+// bootstrap elements
+.container {
+    flex: 1 0 auto !important;
+}
+
+.nav-tabs * .nav-link {
+    background-color: var(--bs-body-bg) !important;
+    border-color: $gray-transparent !important; // overwrite
+    border-bottom: none !important
+}
+
+.nav-tabs {
+    gap: 0.25em;
+}
+
+.nav-tabs {
+    border-bottom: none !important;
+}
+
+.accordion-button::after {
+    display: none;
+}
+
+.pagination {
+    justify-content: center !important;
+}
+
+.page-link {
+    z-index: initial !important;
+}
+
+// svelecte styling
+.svelecte-control .sv-control {
+    border-color: $gray-transparent !important; // overwrite
+}
+
+.svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
+    color: var(--bs-body-color) !important; //this can also be optionally overwritten
+    background-color: var(--bs-body-bg) !important;
+}
+
+.sv-dropdown {
+    position: static !important;
+    border: 1px solid rgba(128, 128, 128, 0.3) !important;
+}
+
+.sv-item-btn {
+    background-color: var(--bs-light) !important;
+}
+
+.sv-item {
+    cursor: pointer !important;
+}
+
+// discord markdown styling
+.d-spoiler {
+    color: var(--bs-dark); //overwrite
+    background-color: var(--bs-dark); //overwrite
+    border-radius: 2px;
+    transition-delay: 6000s;
+}
+
+.d-spoiler::selection {
+    color: var(--bs-dark); //overwrite
+    background-color: transparent;
+}
+
+.d-spoiler:active {
+    background-color: $gray-transparent; // overwrite
+    color: var(--bs-body-color); //overwrite
+    transition-delay: 0s;
+}
+
+.d-emoji {
+    height: 1.125em;
+    width: auto;
+    margin: 0 .05em 0 .1em;
+    vertical-align: -0.1125em;
+}
+
+//twemoji
+img.emoji {
+    height: 1.125em;
+    width: auto;
+    margin: 0 .05em 0 .1em;
+    vertical-align: -0.1125em;
+ }
\ No newline at end of file
diff --git a/dashboard/styles/light.scss b/dashboard/styles/light.scss
new file mode 100644
index 00000000..c11845e3
--- /dev/null
+++ b/dashboard/styles/light.scss
@@ -0,0 +1,17 @@
+.light > * {
+    .footer.bg-light {
+        background-color: var(--bs-light) !important;
+    }
+    
+    .description a {
+        color: var(--bs-primary) !important;
+    }
+
+    > * {
+        .nav-item {
+            .btn.btn-transparent {
+                color: rgba(0,0,0,.55);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/dashboard/svelte.config.js b/dashboard/svelte.config.js
new file mode 100644
index 00000000..3630bb39
--- /dev/null
+++ b/dashboard/svelte.config.js
@@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
new file mode 100644
index 00000000..cd89cf4a
--- /dev/null
+++ b/dashboard/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "importsNotUsedAsValues": "remove"
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/dashboard/vite.config.js b/dashboard/vite.config.js
new file mode 100644
index 00000000..8f84f8b2
--- /dev/null
+++ b/dashboard/vite.config.js
@@ -0,0 +1,18 @@
+import resolve from 'path';
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  optimizeDeps: { exclude: ["svelte-navigator"] },
+  build: {
+    rollupOptions: {
+      input: {
+        main: 'index.html',
+        404: '404.html'
+      },
+    },
+    outDir: "docs"
+  }
+})
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
new file mode 100644
index 00000000..60141f29
--- /dev/null
+++ b/dashboard/yarn.lock
@@ -0,0 +1,1188 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@popperjs/core@^2.9.2":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
+  integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
+
+"@rollup/pluginutils@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@sentry/browser@^6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.19.5.tgz#77d4c860ab86f89a41d4b15a8eafb42417c47888"
+  integrity sha512-dmk15tTm9J+6v/N8nSoc7dUnpS/EJdwfOd3YSRk2iaJLJkWvJ7ELRe5SnH4MnK89Qpw7FKC5OjB977TeK11QAA==
+  dependencies:
+    "@sentry/core" "6.19.5"
+    "@sentry/types" "6.19.5"
+    "@sentry/utils" "6.19.5"
+    tslib "^1.9.3"
+
+"@sentry/core@6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.19.5.tgz#b8e0d54a22f588f8cbe2740913b8d06ec76fb1bb"
+  integrity sha512-PSrJYdhti5IWBo+1hLn4olRPQXJxsnkrB5X7Wk2peEYKGk6Vx98B9h7lQ4Tgsg9sUUOH4HsmNwU2kZKtMRVB5Q==
+  dependencies:
+    "@sentry/hub" "6.19.5"
+    "@sentry/minimal" "6.19.5"
+    "@sentry/types" "6.19.5"
+    "@sentry/utils" "6.19.5"
+    tslib "^1.9.3"
+
+"@sentry/hub@6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.19.5.tgz#978849b003ff130225540355fddfdc3feb4fc7a8"
+  integrity sha512-aMpsQFOcsdkfjbruIretxetmU+XbQNrheaFHJSOt1hB4LZr1fU4M29wKkK5Hj5ELiaNcC23u+0G7y5Nizwzsnw==
+  dependencies:
+    "@sentry/types" "6.19.5"
+    "@sentry/utils" "6.19.5"
+    tslib "^1.9.3"
+
+"@sentry/minimal@6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.19.5.tgz#a1b08eadde9e77e063346d5f3170a58aa1da0916"
+  integrity sha512-zcYGEuqPbLo1gHeYHalna7rNPZIA6+U9dPCDgQpM2GgIGhAxJxvyx57ducatxRQgdPtljn5/VPDxdACiwoc+Jg==
+  dependencies:
+    "@sentry/hub" "6.19.5"
+    "@sentry/types" "6.19.5"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.19.5.tgz#dfce99842768ff7bde73d1368a848b72e83a734b"
+  integrity sha512-8jozVkPMj3I7emgmKWCRr0DvblZHwJ2SS5qCAA5gmKo6uNTVwwe6Sh1ovETJ/rrZ72YGfpeC/yYBcNpst8I+iQ==
+  dependencies:
+    "@sentry/hub" "6.19.5"
+    "@sentry/minimal" "6.19.5"
+    "@sentry/types" "6.19.5"
+    "@sentry/utils" "6.19.5"
+    tslib "^1.9.3"
+
+"@sentry/types@6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.5.tgz#628e76351209a5e4fcaa94bcbe56fe788d65ea15"
+  integrity sha512-G5bGj0ZXRPDrEAxuNO6Jyeq/OG6v9msoE9C/xy1r6JMvVTxX000TmLGKjK1NqqrBbVWdcyFbT3jhJgae0uyBVA==
+
+"@sentry/utils@6.19.5":
+  version "6.19.5"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.19.5.tgz#507312fff2f7332debc8e54240e3b5c6d94db768"
+  integrity sha512-VuNraZZzEu/qVI11CMiRcSa+JVNwOuUe4HfZrDmnJbfrTpbQgjAdScnekEHLaGILGm8lQ8M2qeOxqfNF6kRn9w==
+  dependencies:
+    "@sentry/types" "6.19.5"
+    tslib "^1.9.3"
+
+"@sveltejs/vite-plugin-svelte@^1.0.0-next.30":
+  version "1.0.0-next.31"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.31.tgz#5d0d5445ed85a1af613224eacff78c69f14c7fad"
+  integrity sha512-8K3DcGP1V+XBv389u32S6wt8xiun6hHd5wn28AKLSoNTIhOmJOA2RJUJzp0seTRI86Shme4lzHI2Fgq4qz1wXQ==
+  dependencies:
+    "@rollup/pluginutils" "^4.1.1"
+    debug "^4.3.3"
+    kleur "^4.1.4"
+    magic-string "^0.25.7"
+    require-relative "^0.8.7"
+    svelte-hmr "^0.14.7"
+
+"@tsconfig/svelte@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-2.0.1.tgz#0e8d7caa693e9b2afce5e622c0475bb0fd89c12c"
+  integrity sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==
+
+"@types/node@*":
+  version "16.11.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.12.tgz#ac7fb693ac587ee182c3780c26eb65546a1a3c10"
+  integrity sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw==
+
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/pug@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.5.tgz#69bc700934dd473c7ab97270bd2dbacefe562231"
+  integrity sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==
+
+"@types/react@>=16.0.0":
+  version "17.0.37"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
+  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/sass@^1.16.0":
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.43.1.tgz#86bb0168e9e881d7dade6eba16c9ed6d25dc2f68"
+  integrity sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==
+  dependencies:
+    "@types/node" "*"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/twemoji@^12.1.2":
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/@types/twemoji/-/twemoji-12.1.2.tgz#52578fd22665311e6a78d04f800275449d51c97e"
+  integrity sha512-3eMyKenMi0R1CeKzBYtk/Z2JIHsTMQrIrTah0q54o45pHTpWVNofU2oHx0jS8tqsDRhis2TbB6238WP9oh2l2w==
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
+
+async@^2.6.1:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  dependencies:
+    lodash "^4.17.14"
+
+autosize@*:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/autosize/-/autosize-5.0.1.tgz#ed269b0fa9b7eb47627048a1bb3299e99e003a0f"
+  integrity sha512-UIWUlE4TOVPNNj2jjrU39wI4hEYbneUypEqcyRmRFIx5CC2gNdg3rQr+Zh7/3h6egbBvm33TDQjNQKtj9Tk1HA==
+
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^3.0.1, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+buffer-crc32@^0.2.5:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+commander@^2.18.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+csstype@^3.0.2:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
+debug@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
+dedent-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305"
+  integrity sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU=
+
+detect-indent@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
+  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
+
+discord-markdown@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/discord-markdown/-/discord-markdown-2.5.1.tgz#d18773c6e3cff8df90f305654ecbbc5e38c507eb"
+  integrity sha512-SGNlL1Y8NYjY2MA5Vj1SI5+Ue5GUW2HkkDAq5jPQ6fI5j/rwOB814lFNhfs2AJMT72Jij8usTEqWZfdU8C3uag==
+  dependencies:
+    highlight.js "^11.2.0"
+    simple-markdown "^0.7.3"
+
+email-addresses@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
+  integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==
+
+es6-promise@^3.1.2:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+  integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
+
+esbuild-android-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
+  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
+
+esbuild-darwin-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
+  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
+
+esbuild-darwin-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
+  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
+
+esbuild-freebsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
+  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
+
+esbuild-freebsd-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
+  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
+
+esbuild-linux-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
+  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
+
+esbuild-linux-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
+  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
+
+esbuild-linux-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
+  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
+
+esbuild-linux-arm@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
+  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
+
+esbuild-linux-mips64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
+  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
+
+esbuild-linux-ppc64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
+  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
+
+esbuild-netbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
+  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
+
+esbuild-openbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
+  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
+
+esbuild-sunos-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
+  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
+
+esbuild-windows-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
+  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
+
+esbuild-windows-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
+  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
+
+esbuild-windows-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
+  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
+
+esbuild@^0.13.12:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
+  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
+  optionalDependencies:
+    esbuild-android-arm64 "0.13.15"
+    esbuild-darwin-64 "0.13.15"
+    esbuild-darwin-arm64 "0.13.15"
+    esbuild-freebsd-64 "0.13.15"
+    esbuild-freebsd-arm64 "0.13.15"
+    esbuild-linux-32 "0.13.15"
+    esbuild-linux-64 "0.13.15"
+    esbuild-linux-arm "0.13.15"
+    esbuild-linux-arm64 "0.13.15"
+    esbuild-linux-mips64le "0.13.15"
+    esbuild-linux-ppc64le "0.13.15"
+    esbuild-netbsd-64 "0.13.15"
+    esbuild-openbsd-64 "0.13.15"
+    esbuild-sunos-64 "0.13.15"
+    esbuild-windows-32 "0.13.15"
+    esbuild-windows-64 "0.13.15"
+    esbuild-windows-arm64 "0.13.15"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+estree-walker@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+fast-glob@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
+  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+filename-reserved-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz#abf73dfab735d045440abfea2d91f389ebbfa229"
+  integrity sha1-q/c9+rc10EVECr/qLZHzieu/oik=
+
+filenamify@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-4.3.0.tgz#62391cb58f02b09971c9d4f9d63b3cf9aba03106"
+  integrity sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==
+  dependencies:
+    filename-reserved-regex "^2.0.0"
+    strip-outer "^1.0.1"
+    trim-repeated "^1.0.0"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-cache-dir@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+follow-redirects@^1.14.4:
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
+  integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==
+
+fs-extra@^8.0.1, fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+gh-pages@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-3.2.3.tgz#897e5f15e111f42af57d21d430b83e5cdf29472c"
+  integrity sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==
+  dependencies:
+    async "^2.6.1"
+    commander "^2.18.0"
+    email-addresses "^3.0.1"
+    filenamify "^4.3.0"
+    find-cache-dir "^3.3.1"
+    fs-extra "^8.1.0"
+    globby "^6.1.0"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.3, glob@^7.1.3:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+highlight.js@^11.2.0:
+  version "11.3.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.1.tgz#813078ef3aa519c61700f84fe9047231c5dc3291"
+  integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==
+
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
+import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-core-module@^2.2.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
+  integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
+  dependencies:
+    has "^1.0.3"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922"
+  integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==
+  dependencies:
+    universalify "^0.1.2"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+kleur@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d"
+  integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash@^4.17.14:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
+make-dir@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mkdirp@^0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoid@^3.1.30:
+  version "3.1.30"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
+  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+object-assign@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+pascal-case@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+
+pkg-dir@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+postcss@^8.3.11:
+  version "8.4.4"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.4.tgz#d53d4ec6a75fd62557a66bb41978bf47ff0c2869"
+  integrity sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==
+  dependencies:
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.1"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+require-relative@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^2.5.2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+rollup@^2.59.0:
+  version "2.61.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.61.0.tgz#ccd927bcd6cc0c78a4689c918627a717977208f4"
+  integrity sha512-teQ+T1mUYbyvGyUavCodiyA9hD4DxwYZJwr/qehZGhs1Z49vsmzelMVYMxGU4ZhGRKxYPupHuz5yzm/wj7VpWA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+sade@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
+  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
+  dependencies:
+    mri "^1.1.0"
+
+sander@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
+  integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0=
+  dependencies:
+    es6-promise "^3.1.2"
+    graceful-fs "^4.1.3"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.2"
+
+sass@^1.47.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.0.tgz#65ec1b1d9a6bc1bae8d2c9d4b392c13f5d32c078"
+  integrity sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+semver@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+simple-markdown@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/simple-markdown/-/simple-markdown-0.7.3.tgz#e32150b2ec6f8287197d09869fd928747a9c5640"
+  integrity sha512-uGXIc13NGpqfPeFJIt/7SHHxd6HekEJYtsdoCM06mEBPL9fQH/pSD7LRM6PZ7CKchpSvxKL4tvwMamqAaNDAyg==
+  dependencies:
+    "@types/react" ">=16.0.0"
+
+sorcery@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"
+  integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=
+  dependencies:
+    buffer-crc32 "^0.2.5"
+    minimist "^1.2.0"
+    sander "^0.5.0"
+    sourcemap-codec "^1.3.0"
+
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
+  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
+
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
+sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+strip-outer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
+  integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+svelecte@^3.4.5:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/svelecte/-/svelecte-3.5.2.tgz#b0148f076c2ad9cc3f58a5593e27b044f9fd7497"
+  integrity sha512-hOAiwDf5YER6xA2MuBPfeV7MHOgCWgQPNESCXI1Oxz9PiuLeOWxum4L/pQfyH1CF0LIAhCgJZmnQgaqyEWkqdQ==
+  dependencies:
+    svelte-tiny-virtual-list "^1.1.7"
+
+svelte-autosize@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/svelte-autosize/-/svelte-autosize-1.0.1.tgz#2121b2373ab89191a58aaa9a3aec957ca475e812"
+  integrity sha512-HBk7Xrt5bS0rpp5zSUZvuXNKc0UhAxvJGLNy1eTHMDK/KkHb0UsgWpbyn60jW3tE2ZfuXfLttnHvvb1H4zZZ0Q==
+  dependencies:
+    autosize "*"
+
+svelte-check@^2.2.7:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.2.10.tgz#ca2e4fde2d077e703792d8301a643c36375f646c"
+  integrity sha512-UVLd/N7hUIG2v6dytofsw8MxYn2iS2hpNSglsGz9Z9b8ZfbJ5jayl4Mm1SXhNwiFs5aklG90zSBJtd7NTK8dTg==
+  dependencies:
+    chalk "^4.0.0"
+    chokidar "^3.4.1"
+    fast-glob "^3.2.7"
+    import-fresh "^3.2.1"
+    minimist "^1.2.5"
+    sade "^1.7.4"
+    source-map "^0.7.3"
+    svelte-preprocess "^4.0.0"
+    typescript "*"
+
+svelte-hmr@^0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.7.tgz#7fa8261c7b225d9409f0a86f3b9ea5c3ca6f6607"
+  integrity sha512-pDrzgcWSoMaK6AJkBWkmgIsecW0GChxYZSZieIYfCP0v2oPyx2CYU/zm7TBIcjLVUPP714WxmViE9Thht4etog==
+
+svelte-icons@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-icons/-/svelte-icons-2.1.0.tgz#6f2ec72f1d5c8b2de1a4b8a822c95bcb2f701aca"
+  integrity sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg==
+
+svelte-navigator@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/svelte-navigator/-/svelte-navigator-3.1.5.tgz#f79d78b2c2c5ad907d8b1d3748d3fbe12c32195c"
+  integrity sha512-CGTaexasSLpUaTSN2AlYqii0JeisIgg7uZbm8XCLKlpM9Qv3IltlJ7Nvh90Xw9ND97KqtGOjNJ3LNwMN1ABV0w==
+  dependencies:
+    svelte2tsx "^0.1.151"
+
+svelte-preprocess@^4.0.0:
+  version "4.9.8"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da"
+  integrity sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    magic-string "^0.25.7"
+    sorcery "^0.10.0"
+    strip-indent "^3.0.0"
+
+svelte-preprocess@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz#5f435e8aaa82976165bc8f5fa690e2e5ba084760"
+  integrity sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    magic-string "^0.25.7"
+    sorcery "^0.10.0"
+    strip-indent "^3.0.0"
+
+svelte-tiny-virtual-list@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"
+  integrity sha512-8314cmLXOVqIQwSc3NFu8yGU7BdHEJeixrwFirmnMoWl6YNcCq5jVjCKjE3tDNJfUenz1LN5M5YshPt6GcPuww==
+
+svelte-toggle@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-toggle/-/svelte-toggle-3.1.0.tgz#bce1efb71fb96ab3921374023c95ffd3ad5cbf3d"
+  integrity sha512-2gzDDMDhM+ImDaLEZVlnlHVY1340Y368tT4Qk5IwLnCeRJ4zV3cVwliVGacoHy7iCDukcGXzKwDzG/hTTcaljg==
+
+svelte2tsx@^0.1.151:
+  version "0.1.193"
+  resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.1.193.tgz#16fe594898ef455e4f715ac317d219c9c757656b"
+  integrity sha512-vzy4YQNYDnoqp2iZPnJy7kpPAY6y121L0HKrSBjU/IWW7DQ6T7RMJed2VVHFmVYm0zAGYMDl9urPc6R4DDUyhg==
+  dependencies:
+    dedent-js "^1.0.1"
+    pascal-case "^3.1.1"
+
+svelte@^3.44.0:
+  version "3.44.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.44.2.tgz#3e69be2598308dfc8354ba584cec54e648a50f7f"
+  integrity sha512-jrZhZtmH3ZMweXg1Q15onb8QlWD+a5T5Oca4C1jYvSURp2oD35h4A5TV6t6MEa93K4LlX6BkafZPdQoFjw/ylA==
+
+sveltestrap@^5.6.3:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/sveltestrap/-/sveltestrap-5.6.3.tgz#afb81b00d0b378719988e5339f92254dce41194f"
+  integrity sha512-/geTKJbPmJGzwHFKYC3NkUNDk/GKxrppgdSxcg58w/qcxs0S6RiN4PaQ1tgBKsdSrZDfbHfkFF+dybHAyUlV0A==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+trim-repeated@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
+  integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
+tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.3, tslib@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
+twemoji-parser@13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.1.0.tgz#65e7e449c59258791b22ac0b37077349127e3ea4"
+  integrity sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg==
+
+twemoji@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.1.0.tgz#65bb71e966dae56f0d42c30176f04cbdae109913"
+  integrity sha512-e3fZRl2S9UQQdBFLYXtTBT6o4vidJMnpWUAhJA+yLGR+kaUTZAt3PixC0cGvvxWSuq2MSz/o0rJraOXrWw/4Ew==
+  dependencies:
+    fs-extra "^8.0.1"
+    jsonfile "^5.0.0"
+    twemoji-parser "13.1.0"
+    universalify "^0.1.2"
+
+typescript@*, typescript@^4.4.4:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
+  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
+
+universalify@^0.1.0, universalify@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+vite@^2.7.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.1.tgz#be50ad13214290ecbebbe5ad389ed423cb5f137e"
+  integrity sha512-TDXXhcu5lyQ6uosK4ZWaOyB4VzOiizk0biitRzDzaEtgSUi8rVYPc4k1xgOjLSf0OuceDJmojFKXHOX9DB1WuQ==
+  dependencies:
+    esbuild "^0.13.12"
+    postcss "^8.3.11"
+    resolve "^1.20.0"
+    rollup "^2.59.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
