diff --git a/src/pages/Member.svelte b/src/pages/Member.svelte
index 05acd80e..1cb8edb2 100644
--- a/src/pages/Member.svelte
+++ b/src/pages/Member.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody } from "sveltestrap";
+    import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
     import Body from '../lib/member/Body.svelte';
-    import { useParams } from 'svelte-navigator';
+    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;
@@ -14,12 +19,24 @@
     let err = "";
     let groupErr = "";
     let member: Member;
-    let groups: Group[];
-    let systemGroups: Group[];
+    let groups: Group[] = [];
+    let systemGroups: Group[] = [];
+    let isMainDash = false;
+    let isDeleted = false;
+
     const isPage = true;
     export let isPublic = true;
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
 
+    let currentPage = 1;
+    let itemsPerPage = 10;
+
+    $: indexOfLastItem = currentPage * itemsPerPage;
+    $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
+    $: pageAmount = Math.ceil(groups.length / itemsPerPage);
+
+    $: slicedGroups = groups.slice(indexOfFirstItem, indexOfLastItem);
+
     onMount(() => {
         fetchMember();
     });
@@ -61,6 +78,11 @@
       await new Promise(resolve => setTimeout(resolve, 500));
       fetchGroups();
     }
+
+    function updateDelete() {
+        isDeleted = true;
+    }
+
 </script>
 
 {#if settings && settings.appearance.color_background}
@@ -72,30 +94,64 @@
 <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 err}
                 <Alert color="danger">{err}</Alert>
             {:else if loading}
                 <Spinner/>
             {:else if member && member.id}
-                <Card class="mb-3">
+                <Card class="mb-4">
                     <CardHeader>
                         <CardsHeader bind:item={member}>
                             <FaAddressCard slot="icon" />
                         </CardsHeader>
                     </CardHeader>
                     <CardBody>
-                        <Body on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
+                        <Body on:deletion={updateDelete} on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
                     </CardBody>
                 </Card>
             {/if}
             {#if groupLoading}
-                fetching groups...
+                <Alert color="primary"><Spinner size="sm" /> Fetching groups...</Alert>
             {:else if groupErr}
                 <Alert color="danger">{groupErr}</Alert>
             {:else if groups && groups.length > 0}
-                {#each groups as group}
-                    {group.name} ({group.id})<br/>
-                {/each}
+            <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 />
+            <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 isMainDash={isMainDash} bind:group bind:isPublic={isPublic}/>
+                </AccordionItem>
+                {:else}
+                <AccordionItem>
+                    <CardsHeader bind:item={group} slot="header">
+                        <FaLock slot="icon" />
+                    </CardsHeader>
+                    <GroupBody isMainDash={isMainDash} bind:group bind:isPublic={isPublic}/>
+                </AccordionItem>
+                {/if}
+            {/each}
+            </Accordion>
+            <ListPagination bind:currentPage bind:pageAmount />
+            {/if}
             {/if}
         </Col>
     </Row>
