diff --git a/package.json b/package.json
index 758a54c..1a2bf43 100644
--- a/package.json
+++ b/package.json
@@ -35,17 +35,18 @@
 		"prettier-plugin-svelte": "^3.0.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwindcss": "3.3.6",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
-		"vitest": "^0.32.2",
-		"tailwindcss": "3.3.6",
-		"vite-plugin-tailwind-purgecss": "0.1.4"
+		"vite-plugin-tailwind-purgecss": "0.1.4",
+		"vitest": "^0.32.2"
 	},
 	"type": "module",
 	"dependencies": {
 		"@floating-ui/dom": "1.5.3",
 		"@iconify/svelte": "^3.1.4",
+		"svelte-emoji-selector": "^1.0.1",
 		"svelte-i18n": "^4.0.0",
 		"svelte-local-storage-store": "^0.6.4",
 		"universal-cookie": "^6.1.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec07bd6..6e0ae41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -11,6 +11,9 @@ dependencies:
   '@iconify/svelte':
     specifier: ^3.1.4
     version: 3.1.4(svelte@4.2.8)
+  svelte-emoji-selector:
+    specifier: ^1.0.1
+    version: 1.0.1
   svelte-i18n:
     specifier: ^4.0.0
     version: 4.0.0(svelte@4.2.8)
@@ -609,6 +612,28 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@fortawesome/fontawesome-common-types@0.2.36:
+    resolution: {integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+
+  /@fortawesome/free-regular-svg-icons@5.15.4:
+    resolution: {integrity: sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 0.2.36
+    dev: false
+
+  /@fortawesome/free-solid-svg-icons@5.15.4:
+    resolution: {integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 0.2.36
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -1660,6 +1685,10 @@ packages:
       type: 2.7.2
     dev: false
 
+  /fa-svelte@3.1.0:
+    resolution: {integrity: sha512-RqBOWwt7sc+ta9GFjbu5GOwKFRzn3rMPPSqvSGpIwsfVnpMjiI5ttv84lwNsCMEYI6/lu/iH21HUcE3TLz8RGQ==}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -2321,6 +2350,11 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /popper.js@1.16.1:
+    resolution: {integrity: sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==}
+    deprecated: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
+    dev: false
+
   /postcss-import@15.1.0(postcss@8.4.32):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -2704,6 +2738,22 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-click-outside@1.0.0:
+    resolution: {integrity: sha512-TVDn5Vd8L0WI0Y9BFh/2I7judkIqYCbFKkGwGl/f8D0inwBFNyU0weKhrbJY4VQtYnWriq0NPl+mIYGisgALbw==}
+    dev: false
+
+  /svelte-emoji-selector@1.0.1:
+    resolution: {integrity: sha512-gGjDydt+79YQIdUyz/r1sHSkjLko2rb9qHNiBveC5RSl6rJ0mob4T5DrADRArjQ/HA8kNfEJFyqbnLoA+dyLqA==}
+    deprecated: This package is no longer supported
+    dependencies:
+      '@fortawesome/free-regular-svg-icons': 5.15.4
+      '@fortawesome/free-solid-svg-icons': 5.15.4
+      fa-svelte: 3.1.0
+      popper.js: 1.16.1
+      svelte-click-outside: 1.0.0
+      svelte-tabs: 1.1.0
+    dev: false
+
   /svelte-eslint-parser@0.33.1(svelte@4.2.8):
     resolution: {integrity: sha512-vo7xPGTlKBGdLH8T5L64FipvTrqv3OQRx9d2z5X05KKZDlF4rQk8KViZO4flKERY+5BiVdOh7zZ7JGJWo5P0uA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2804,6 +2854,10 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /svelte-tabs@1.1.0:
+    resolution: {integrity: sha512-bCynxgET2uvqpB6xf/dVyqHjzmumRURQyh2QqXlrki8NxzO7h2WghF8qgpb5qeB5NTX1bMU+9Q5Hf5ey2WLaMg==}
+    dev: false
+
   /svelte@4.2.8:
     resolution: {integrity: sha512-hU6dh1MPl8gh6klQZwK/n73GiAHiR95IkFsesLPbMeEZi36ydaXL/ZAb4g9sayT0MXzpxyZjR28yderJHxcmYA==}
     engines: {node: '>=16'}
diff --git a/src/components/ModalCreatePost.svelte b/src/components/ModalCreatePost.svelte
index 449bf1e..b6b9362 100644
--- a/src/components/ModalCreatePost.svelte
+++ b/src/components/ModalCreatePost.svelte
@@ -1,19 +1,104 @@
 <script lang="ts">
-	import { Modal, getModalStore } from "@skeletonlabs/skeleton";
+	import { serverURL, token } from '$lib/Store';
+	import Icon from '@iconify/svelte';
+	import { FileDropzone, getModalStore } from '@skeletonlabs/skeleton';
+	import { get } from 'svelte/store';
+	import { getToastStore } from '@skeletonlabs/skeleton';
+	import { createToast } from '$lib/Toasts';
+	import { t } from '../i18n';
 
-    const modalStore = getModalStore();
+	const toastStore = getToastStore();
+	const modalStore = getModalStore();
+	let textClick: boolean = true;
+	let imageClick: boolean = false;
 
-    function closeModal(){
-        modalStore.close();
-    };
+	let text: string = '';
+
+	function closeModal() {
+		modalStore.close();
+	}
+
+	function clickText() {
+		if (!textClick) {
+			textClick = true;
+		}
+		imageClick = false;
+	}
+
+	function clickImage() {
+		if (!imageClick) {
+			imageClick = true;
+		}
+		textClick = false;
+	}
+
+	async function sendPost() {
+		const url = get(serverURL) + '/posts';
+		const response = await fetch(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: 'Bearer ' + get(token)
+			},
+			body: JSON.stringify({
+				content: text
+			})
+		});
+		if (response.status == 201) {
+			modalStore.close();
+		} else {
+			toastStore.trigger(createToast('We were running into a problem! Sorry', 'error'));
+		}
+	}
 </script>
 
 {#if $modalStore[0]}
-<div>
-    <header>Write Post</header>
-    <div class="flex flex-row">
-    <button type="button" class="btn variant-filled-secondary" on:click={closeModal}>Close</button>
-    <button type="button" class="btn variant-filled-primary">Post</button>
-</div>
-</div>
-{/if}
\ No newline at end of file
+	<div class="card w-[40vw]">
+		<header class="card-header flex justify-center items-center">
+			<div class="w-min flex justify-center outline-none border-none">
+				<button class="p-2" on:click={clickText}>{$t('modalCreatePost.header.Text')}</button>
+				<button class="p-2" on:click={clickImage}>{$t('modalCreatePost.header.Image')}</button>
+			</div>
+		</header>
+		{#if textClick == true}
+			<section>
+				<label class="label p-3">
+					<textarea
+						class="textarea resize-none"
+						rows="4"
+						bind:value={text}
+						placeholder={text === '' ? $t('modalCreatePost.textInput.Placeholder') : ''}
+						maxlength="256"
+					/>
+				</label>
+			</section>
+		{/if}
+		{#if imageClick == true}
+			<section class="p-3 flex flex-col">
+				<FileDropzone name="files" accept="image/*">
+					<svelte:fragment slot="message">
+						<div class="flex flex-col items-center">
+							<Icon class="w-12 h-12" icon="line-md:upload-loop"></Icon>
+							<p>{$t('modalCreatePost.fileInput.Message')}</p>
+						</div>
+					</svelte:fragment>
+				</FileDropzone>
+				<label class="label p-3">
+					<textarea
+						class="textarea h-auto resize-none"
+						placeholder={$t('modalCreatePost.textInputImage.Placeholder')}
+						maxlength="256"
+					/>
+				</label>
+			</section>
+		{/if}
+		<footer class="card-footer flex flex-row justify-end">
+			<button type="button" class="btn variant-filled-secondary mx-1" on:click={closeModal}
+				>{$t('modalCreatePost.button.close')}</button
+			>
+			<button type="button" class="btn variant-filled-primary mx-1" on:click={sendPost}
+				>{$t('modalCreatePost.button.post')}</button
+			>
+		</footer>
+	</div>
+{/if}
diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index a3dbf9a..078a36d 100644
--- a/src/components/navbar.svelte
+++ b/src/components/navbar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AppBar, getModalStore, Modal, type ModalSettings } from '@skeletonlabs/skeleton';
+	import { AppBar, getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import Icon from '@iconify/svelte';
 	import { get } from 'svelte/store';
 	import { token } from '$lib/Store';
@@ -7,10 +7,10 @@
 
 	const modalStore = getModalStore();
 
-	const modal: ModalSettings ={
+	const modal: ModalSettings = {
 		type: 'component',
-		component: 'modalCreatePost',
-	}; 
+		component: 'modalCreatePost'
+	};
 
 	function handleLogout() {
 		token.set('');
@@ -20,6 +20,7 @@
 		modalStore.trigger(modal);
 	}
 </script>
+
 <AppBar>
 	<svelte:fragment slot="lead">
 		<div style="gap: 1rem; display: flex; align-items: center;">
@@ -52,4 +53,3 @@
 		</div>
 	</svelte:fragment>
 </AppBar>
-
diff --git a/src/lib/Store.ts b/src/lib/Store.ts
index b660dc8..4e8d3d2 100644
--- a/src/lib/Store.ts
+++ b/src/lib/Store.ts
@@ -9,4 +9,4 @@ export const registerUsername = writable('');
 export const serverURL = writable('http://192.168.0.126:3000/api');
 
 export const token = persisted('token', '');
-export const refreshToken = persisted('refreshToken', '');
\ No newline at end of file
+export const refreshToken = persisted('refreshToken', '');
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2a28807..92dc3c4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -12,12 +12,11 @@
 	import ModalCreatePost from '../components/ModalCreatePost.svelte';
 	initializeStores();
 	const modalRegistry: Record<string, ModalComponent> = {
-		modalCreatePost: {ref: ModalCreatePost}
-	}
-
+		modalCreatePost: { ref: ModalCreatePost }
+	};
 </script>
 
-<Modal components={modalRegistry}/>
+<Modal components={modalRegistry} />
 <AppShell>
 	<svelte:fragment slot="header"><Navbar /></svelte:fragment>
 	<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2f9450e..d9add8f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,17 +2,14 @@
 	import { get } from 'svelte/store';
 	import Login from '../components/Login.svelte';
 	import { token } from '$lib/Store';
-	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 
 	const loginToken = get(token);
 </script>
 
 <main class="">
 	<div class="grid grid-cols-6 grid-flow-col gap-4 grid-end-auto">
-		<div class="col-span-1">
-		</div>
-		<div class="card col-span-4">
-		</div>
+		<div class="col-span-1"></div>
+		<div class="card col-span-4"></div>
 		<div class="grid grid-rows-6 grid-flow-col gap-4">
 			<div class="card row-start-1">
 				{#if loginToken == ''}<Login />{/if}
diff --git a/src/translation.js b/src/translation.js
index 938f014..a93e639 100644
--- a/src/translation.js
+++ b/src/translation.js
@@ -47,7 +47,14 @@ export default {
 		'register.button.cancel': 'Cancel',
 		'register.button.register': 'Register',
 		'post.postComment.placeholder': 'Leave a comment!',
-		'post.comments.header': 'Comments'
+		'post.comments.header': 'Comments',
+		'modalCreatePost.header.Text': 'Text',
+		'modalCreatePost.header.Image': 'Image',
+		'modalCreatePost.textInput.Placeholder': 'Write your post here',
+		'modalCreatePost.fileInput.Message': 'Upload image or drag-and-drop',
+		'modalCreatePost.textInputImage.Placeholder': 'Write your optional text here...',
+		'modalCreatePost.button.close': 'Close',
+		'modalCreatePost.button.post': 'Post'
 	},
 	de: {
 		'imprint.frontend.header': 'Impressum Frontend',
@@ -97,6 +104,13 @@ export default {
 		'register.button.cancel': 'Abbrechen',
 		'register.button.register': 'Registrieren',
 		'post.postComment.placeholder': 'Schreib einen Kommentar!',
-		'post.comments.header': 'Kommentare'
+		'post.comments.header': 'Kommentare',
+		'modalCreatePost.header.Text': 'Text',
+		'modalCreatePost.header.Image': 'Bild',
+		'modalCreatePost.textInput.Placeholder': 'Schreibe deinen Beitrag hier',
+		'modalCreatePost.fileInput.Message': 'Lade ein Bild hoch oder drag-and-drop',
+		'modalCreatePost.textInputImage.Placeholder': 'Schreibe deinen optionalen Text hier...',
+		'modalCreatePost.button.close': 'Schließen',
+		'modalCreatePost.button.post': 'Posten'
 	}
 };