diff --git a/src/lib/member/Body.svelte b/src/lib/member/Body.svelte
new file mode 100644
index 00000000..9d2c26d1
--- /dev/null
+++ b/src/lib/member/Body.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+    import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, Spinner } from 'sveltestrap';
+    import moment from 'moment';
+    import { toHTML } from 'discord-markdown';
+    import twemoji from 'twemoji';
+
+    import type Member from '../../api/member';
+    import type Group from '../../api/group';
+    import GroupEdit from './GroupEdit.svelte';
+
+    export let groups: Group[] = [];
+    export let member: Member;
+    export let loading: boolean;
+    export let isPublic: boolean = false;
+
+    let editMode: boolean = false;
+    let groupMode: boolean = false;
+    let privacyLoading = 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 created = moment(member.created).format("MMM D, YYYY");
+    let birthday: string;
+    if (member.birthday) birthday = moment(member.birthday).format("MMM D, YYYY");
+
+</script>
+
+<CardBody style="border-left: 4px solid #{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> {birthday}
+        </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}
+        <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}>
+                    {#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy
+                </ModalHeader>
+                    <ModalBody>
+                        whoops! this is yet to be added.
+                    </ModalBody>
+            </Modal>
+        </Col>
+        {/if}
+    </Row>
+    <div class="my-2 mb-3 description" bind:this={descriptionElement}>
+        <b>Description:</b><br />
+        {@html 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> <Button style="flex: 0" color="secondary" on:click={() => groupMode = true}>Groups</Button>
+    {/if}
+    {:else if editMode}
+    editing tba o_o
+    {:else if groupMode}
+        <GroupEdit bind:loading bind:member bind:groups bind:groupMode />
+    {/if}
+    </CardBody>
\ No newline at end of file
diff --git a/src/lib/member/GroupEdit.svelte b/src/lib/member/GroupEdit.svelte
new file mode 100644
index 00000000..28d650e3
--- /dev/null
+++ b/src/lib/member/GroupEdit.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import type Group from "../../api/group";
+    import type Member from "../../api/member";
+    import { Row, Col, Button, Alert, ListGroup, ListGroupItem } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+    import PKAPI from '../../api';
+    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'
+
+    export let member: Member;
+    export let groups: Group[] = [];
+    export let loading: boolean = false;
+    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.includes(member.uuid));
+        groupsWithMember.sort((a, b) => a.name.localeCompare(b.name));
+
+        groupsWithoutMember = groups.filter(group => !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.length / 10);
+
+    $: finalGroupsList = 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
+    });
+
+</script>
+
+<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.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/>
+        <p>(this is nonfunctional at the moment)</p>
+        <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/>
+        <p>(this is ALSO nonfunctional)</p>
+    </Col>
+</Row>
+<Button style="flex: 0" color="secondary" on:click={() => groupMode = false}>Back</Button>
\ No newline at end of file
diff --git a/src/lib/member/List.svelte b/src/lib/member/List.svelte
index 10658612..c1960298 100644
--- a/src/lib/member/List.svelte
+++ b/src/lib/member/List.svelte
@@ -11,6 +11,7 @@
     import ListPagination from '../ListPagination.svelte';
     import Svelecte, { addFormatter } from 'svelecte';
     import FaLock from 'svelte-icons/fa/FaLock.svelte';
+    import Body from './Body.svelte';
 
     export let isPublic: boolean;
     let itemLoading: boolean[] = [];
@@ -261,12 +262,14 @@
                 <CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
                     <FaUserCircle slot="icon" />
                 </CardsHeader>
+                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} />
             </AccordionItem>
             {:else}
             <AccordionItem>
                 <CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
                     <FaLock slot="icon" />
                 </CardsHeader>
+                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} />
             </AccordionItem>
             {/if}
     {/each}