diff --git a/src/lib/System/System.svelte b/src/lib/System/System.svelte
new file mode 100644
index 00000000..cd511a01
--- /dev/null
+++ b/src/lib/System/System.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Card, CardBody } from 'sveltestrap';
+    import CardsHeader from '../CardsHeader.svelte';
+    import SystemBody from './SystemBody.svelte';
+
+    export let user;
+    let editMode = false;
+
+</script>
+
+<Card>
+    <CardsHeader bind:item={user}/>
+    <CardBody style="border-left: 4px solid #{user.color}">
+        {#if !editMode}
+        <SystemBody bind:user={user} bind:editMode={editMode}/>
+        {:else}
+        hehe
+        {/if}
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/lib/System/SystemBody.svelte b/src/lib/System/SystemBody.svelte
new file mode 100644
index 00000000..3413d511
--- /dev/null
+++ b/src/lib/System/SystemBody.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Row, Col, Modal, Image, Button } from 'sveltestrap';
+   
+    export let user;
+    export let editMode: boolean;
+
+    $: htmlDescription = toHTML(user.description, {embed: true});
+    import { toHTML } from 'discord-markdown';
+
+    let bannerOpen = false;
+    const toggleBannerModal = () => (bannerOpen = !bannerOpen);
+</script>
+
+<Row>
+    <Col xs={12} lg={4} class="mb-2">
+        <b>ID:</b> {user.id}
+    </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Name:</b> {user.name}
+    </Col>
+    {#if user.tag}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Tag:</b> {user.tag}
+    </Col>
+    {/if}
+    <Col xs={12} lg={4} class="mb-2">
+        <b>Timezone:</b> {user.timezone}
+    </Col>
+    {#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="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={user.banner} thumbnail alt="Your system banner" />
+            </div>
+        </Modal>
+    </Col>
+    {/if}
+    <div class="mt-2">
+        <b>Description:</b><br />
+        {@html htmlDescription}
+    </div>
+</Row>
\ No newline at end of file
diff --git a/src/lib/cards/System.svelte b/src/lib/cards/System.svelte
deleted file mode 100644
index deeadf92..00000000
--- a/src/lib/cards/System.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { Modal, Card, CardHeader, CardBody, CardTitle, Image, ModalHeader, Col, Row, Button } from 'sveltestrap';
-    import CardsHeader from '../CardsHeader.svelte';
-    import { toHTML } from 'discord-markdown';
-
-    export let user;
-    $: htmlDescription = toHTML(user.description, {embed: true});
-
-    let bannerOpen = false;
-    const toggleBannerModal = () => (bannerOpen = !bannerOpen);
-</script>
-
-<Card>
-    <CardsHeader bind:item={user}/>
-    <CardBody style="border-left: 4px solid #{user.color}">
-        <Row>
-            <Col xs={12} lg={4} class="mb-2">
-                <b>ID:</b> {user.id}
-            </Col>
-            <Col xs={12} lg={4} class="mb-2">
-                <b>Name:</b> {user.name}
-            </Col>
-            {#if user.tag}
-            <Col xs={12} lg={4} class="mb-2">
-                <b>Tag:</b> {user.tag}
-            </Col>
-            {/if}
-            <Col xs={12} lg={4} class="mb-2">
-                <b>Timezone:</b> {user.timezone}
-            </Col>
-            {#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="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={user.banner} thumbnail alt="Your system banner" />
-                    </div>
-                </Modal>
-            </Col>
-            {/if}
-            <div class="mt-2">
-                <b>Description:</b><br />
-                {@html htmlDescription}
-            </div>
-        </Row>
-    </CardBody>
-</Card>
\ No newline at end of file