diff --git a/package-lock.json b/package-lock.json
index 3371e39..a7042e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
 			},
 			"devDependencies": {
 				"@tauri-apps/cli": "^1.5.1",
+				"@types/uuid": "^9.0.5",
 				"dotenv": "^16.3.1",
 				"prettier": "^3.0.3",
 				"prettier-plugin-astro": "^0.12.0",
@@ -2187,6 +2188,12 @@
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
 			"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w=="
 		},
+		"node_modules/@types/uuid": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
+			"integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ==",
+			"dev": true
+		},
 		"node_modules/@types/web-bluetooth": {
 			"version": "0.0.17",
 			"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
diff --git a/package.json b/package.json
index 127de6c..f54e113 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
 	},
 	"devDependencies": {
 		"@tauri-apps/cli": "^1.5.1",
+		"@types/uuid": "^9.0.5",
 		"dotenv": "^16.3.1",
 		"prettier": "^3.0.3",
 		"prettier-plugin-astro": "^0.12.0",
diff --git a/src/components/ToastContainer.vue b/src/components/ToastContainer.vue
new file mode 100644
index 0000000..2cec858
--- /dev/null
+++ b/src/components/ToastContainer.vue
@@ -0,0 +1,15 @@
+<template>
+	<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
+		<BaseToast v-for="toast in toasts" :key="(toast as Toast).id" :toast="toast as Toast">{{
+			toast?.message
+		}}</BaseToast>
+	</div>
+</template>
+
+<script setup lang="ts">
+import BaseToast from '@components/base/toast.vue';
+import { toastsStore, type Toast } from '@stores/toasts';
+import { useStore } from '@nanostores/vue';
+
+const toasts = useStore(toastsStore);
+</script>
diff --git a/src/components/base/toast.vue b/src/components/base/toast.vue
index f14b56a..b895561 100644
--- a/src/components/base/toast.vue
+++ b/src/components/base/toast.vue
@@ -1,101 +1,111 @@
 <template>
 	<div
 		v-if="showToast"
-		class="mb-4 flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
+		class="mb-4 flex w-full max-w-xs flex-col items-center rounded-lg bg-white text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
 		role="alert"
+		@mouseenter="isMouseOver = true"
+		@mouseleave="isMouseOver = false"
 	>
-		<div
-			v-if="props.type === ToastType.Success"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+		<div class="flex w-full p-4">
+			<div
+				v-if="props.toast.type === ToastType.Success"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
-				/>
-			</svg>
-			<span class="sr-only">Check icon</span>
-		</div>
-		<div
-			v-else-if="props.type === ToastType.Danger"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+					/>
+				</svg>
+				<span class="sr-only">Check icon</span>
+			</div>
+			<div
+				v-else-if="props.toast.type === ToastType.Danger"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
-				/>
-			</svg>
-			<span class="sr-only">Error icon</span>
-		</div>
-		<div
-			v-else-if="props.type === ToastType.Warning"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
+					/>
+				</svg>
+				<span class="sr-only">Error icon</span>
+			</div>
+			<div
+				v-else-if="props.toast.type === ToastType.Warning"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
-				/>
-			</svg>
-			<span class="sr-only">Warning icon</span>
-		</div>
-		<div
-			v-else-if="props.type === ToastType.Info"
-			class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-500 dark:bg-blue-700 dark:text-blue-200"
-		>
-			<svg
-				class="h-5 w-5"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 20 20"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+					/>
+				</svg>
+				<span class="sr-only">Warning icon</span>
+			</div>
+			<div
+				v-else-if="props.toast.type === ToastType.Info"
+				class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-500 dark:bg-blue-700 dark:text-blue-200"
 			>
-				<path
-					d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
-				/>
-			</svg>
-			<span class="sr-only">Info icon</span>
-		</div>
-		<div class="ml-3 text-sm font-normal"><slot /></div>
-		<button
-			type="button"
-			class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
-			aria-label="Close"
-			@click="showToast = false"
-		>
-			<span class="sr-only">Close</span>
-			<svg
-				class="h-3 w-3"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 14 14"
+				<svg
+					class="h-5 w-5"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+				>
+					<path
+						d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+					/>
+				</svg>
+				<span class="sr-only">Info icon</span>
+			</div>
+			<div class="ml-3 text-sm font-normal"><slot /></div>
+			<button
+				type="button"
+				class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+				aria-label="Close"
+				@click="closeToast()"
 			>
-				<path
-					stroke="currentColor"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-				/>
-			</svg>
-		</button>
+				<span class="sr-only">Close</span>
+				<svg
+					class="h-3 w-3"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 14 14"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div v-if="showToast" class="h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+			<div
+				class="h-2.5 rounded-full bg-gray-300 dark:bg-gray-600"
+				:style="{ width: value + '%' }"
+			></div>
+		</div>
 	</div>
 </template>
 
@@ -110,12 +120,32 @@ export enum ToastType {
 
 <script setup lang="ts">
 import { ref, type PropType } from 'vue';
+import { removeToast, type Toast } from '@stores/toasts';
 
 const showToast = ref(true);
 
+const isMouseOver = ref(false);
+
+const value = ref(100);
+const timer = setInterval(() => {
+	if (isMouseOver.value) return;
+
+	value.value -= 0.2;
+	if (value.value < 0) {
+		value.value = 100;
+		clearInterval(timer);
+		closeToast();
+	}
+}, 10);
+
+function closeToast() {
+	showToast.value = false;
+	removeToast(props.toast);
+}
+
 const props = defineProps({
-	type: {
-		type: String as PropType<ToastType>,
+	toast: {
+		type: Object as PropType<Toast>,
 		required: true,
 	},
 });
diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue
index c8c3bd7..f4f989f 100644
--- a/src/components/item/Browser.vue
+++ b/src/components/item/Browser.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="relative h-full w-full px-4 pt-6" v-on:contextmenu.capture="openContextMenu">
 		<!-- Files & Folders -->
-		<NoFiles v-if="hasItemsLoaded && !Object.values(items).length" :modelValue="modelValue" />
+		<NoFiles
+			v-if="hasItemsLoaded && !Object.values(items).length"
+			:modelValue="modelValue"
+			:user="user"
+		/>
 		<template v-else-if="items">
 			<div class="flex flex-wrap gap-3">
 				<!-- prettier-ignore-attribute -->
@@ -61,11 +65,6 @@
 	<!-- Modals -->
 	<CreateFolderModal ref="createFolderModal" :parentFolder="props.modelValue" />
 	<CreateDocsModal ref="createDocsModal" :parentFolder="props.modelValue" />
-
-	<!-- Toasts -->
-	<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
-		<BaseToast v-for="toast in toasts" :type="toast.type">{{ toast.message }}</BaseToast>
-	</div>
 </template>
 
 <script setup lang="ts">
@@ -79,11 +78,12 @@ import { fetchFromApi } from '@lib/helpers';
 // Stores
 import { useStore } from '@nanostores/vue';
 import { addItem, removeItem, itemsStore } from '@stores/items';
+import { addToast } from '@stores/toasts';
 import { isModalOpen } from '@stores/modal';
 
 // Components
 import ContextMenu from '@components/base/contextMenu.vue';
-import BaseToast, { ToastType } from '@components/base/toast.vue';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	modelValue: {
@@ -107,9 +107,6 @@ function openContextMenu(e: MouseEvent) {
 	fileBrowserContextMenu?.value?.openMenu(e);
 }
 
-// TODO: Fix toasts
-const toasts = ref<{ message: string; type: ToastType }[]>([]);
-
 /**
  * Items
  */
@@ -206,8 +203,8 @@ async function uploadFiles(e: Event) {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
 		} catch (error) {
-			toasts.value.push({
-				message: `Failed to upload file ${file.name}`,
+			addToast({
+				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
 				type: ToastType.Danger,
 			});
 		}
@@ -246,11 +243,9 @@ channel.bind('update', async (data: ItemType) => {
 
 	const isNew = items.value[item.id] === undefined;
 	const isOwner = item.ownerId === props.user.id;
-
-	if (isNew && isOwner) {
-		// TODO: Fix toasts
-		toasts.value.push({
-			message: `${item.name} has been created`,
+	if (isNew && isOwner && item instanceof FileClass) {
+		addToast({
+			message: item.name + ' ' + t('fileBrowser.file.toast.create.success'),
 			type: ToastType.Success,
 		});
 	}
diff --git a/src/components/item/ShareItemModal.vue b/src/components/item/ShareItemModal.vue
index d649624..82d5009 100644
--- a/src/components/item/ShareItemModal.vue
+++ b/src/components/item/ShareItemModal.vue
@@ -97,6 +97,8 @@ import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { ItemClass } from '@lib/items/items';
 import { fetchFromApi, getInitialsByName, getUserColorByInitials } from '@lib/helpers';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	item: {
@@ -205,8 +207,16 @@ async function shareFile() {
 
 		getItem();
 
-		// TODO: Show success toast
-	} catch (e) {}
+		addToast({
+			message: t('shareItemModal.toast.create.success'),
+			type: ToastType.Success,
+		});
+	} catch (e) {
+		addToast({
+			message: t('shareItemModal.toast.create.failed'),
+			type: ToastType.Danger,
+		});
+	}
 }
 
 async function deleteSharing(sharingId: number | undefined) {
@@ -235,8 +245,16 @@ async function deleteSharing(sharingId: number | undefined) {
 
 		getItem().catch(() => close());
 
-		// TODO: Show success toast
-	} catch (e) {}
+		addToast({
+			message: t('shareItemModal.toast.delete.success'),
+			type: ToastType.Success,
+		});
+	} catch (e) {
+		addToast({
+			message: t('shareItemModal.toast.delete.failed'),
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/docs/CreateModal.vue b/src/components/item/docs/CreateModal.vue
index 7cd32c0..1a11c5e 100644
--- a/src/components/item/docs/CreateModal.vue
+++ b/src/components/item/docs/CreateModal.vue
@@ -28,7 +28,9 @@ import BaseInput from '@components/base/input.vue';
 import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
 import { v4 as uuid } from 'uuid';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	parentFolder: {
@@ -61,10 +63,18 @@ async function createDocs() {
 
 		addItem(createdDocs);
 
-		// TODO: Show success toast
+		addToast({
+			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.create.success'),
+			type: ToastType.Success,
+		});
 
 		close();
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			message: t('fileBrowser.docs.toast.create.failed') + ' ' + docs.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/docs/Docs.vue b/src/components/item/docs/Docs.vue
index c1560ad..3479952 100644
--- a/src/components/item/docs/Docs.vue
+++ b/src/components/item/docs/Docs.vue
@@ -111,6 +111,8 @@ import { removeItem } from '@stores/items';
 import { DocsClass } from '@lib/items/docs';
 import CreateShortcutModal from '../CreateShortcutModal.vue';
 import { url } from '@lib/helpers';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const docsContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -129,11 +131,17 @@ async function deleteDocs() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			message: props.modelValue.name + ' ' + t('fileBrowser.docs.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			message: t('fileBrowser.docs.toast.delete.success') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/components/item/docs/EditModal.vue b/src/components/item/docs/EditModal.vue
index 01cf80c..76f9f9d 100644
--- a/src/components/item/docs/EditModal.vue
+++ b/src/components/item/docs/EditModal.vue
@@ -27,6 +27,8 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { DocsClass } from '@lib/items/docs';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	docs: {
@@ -61,11 +63,18 @@ async function updateFile() {
 
 		updateItem(updatedDocs);
 
-		// TODO: Show success toast
+		addToast({
+			message: docs.value.name + ' ' + t('fileBrowser.docs.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
 	} catch (e) {
 		console.error('Error: ' + e);
+		addToast({
+			message: t('fileBrowser.docs.toast.update.success') + ' ' + docs.value.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/components/item/file/EditModal.vue b/src/components/item/file/EditModal.vue
index 3464af7..f931323 100644
--- a/src/components/item/file/EditModal.vue
+++ b/src/components/item/file/EditModal.vue
@@ -27,6 +27,8 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
 import type { FileClass } from '@lib/items/files';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	file: {
@@ -63,10 +65,18 @@ async function updateFile() {
 
 		updateItem(updatedFile);
 
-		// TODO: Show success toast
+		addToast({
+			message: file.value.name + ' ' + t('fileBrowser.file.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			message: t('fileBrowser.file.toast.update.failed') + ' ' + file.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/file/File.vue b/src/components/item/file/File.vue
index 1f0bddb..2441df2 100644
--- a/src/components/item/file/File.vue
+++ b/src/components/item/file/File.vue
@@ -104,9 +104,11 @@ import { t } from '@lib/i18n';
 
 // Components
 import ContextMenu from '@components/base/contextMenu.vue';
+import { ToastType } from '@components/base/toast.vue';
 
 // Stores
 import { removeItem } from '@stores/items';
+import { addToast } from '@stores/toasts';
 
 // File
 import { FileClass } from '@lib/items/files';
@@ -153,11 +155,17 @@ async function deleteFile() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			message: props.modelValue.name + ' ' + t('fileBrowser.file.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			message: t('fileBrowser.file.toast.delete.failed') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/components/item/file/NoFiles.vue b/src/components/item/file/NoFiles.vue
index 1948350..8dcd48f 100644
--- a/src/components/item/file/NoFiles.vue
+++ b/src/components/item/file/NoFiles.vue
@@ -36,12 +36,19 @@
 import { FileClass } from '@lib/items/files';
 import type { FolderType } from '@lib/items/folders';
 import { ref, type PropType } from 'vue';
+import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	modelValue: {
 		type: Object as PropType<FolderType | undefined>,
 		required: true,
 	},
+	user: {
+		type: Object as PropType<User>,
+		required: true,
+	},
 });
 
 const fileInput = ref<HTMLInputElement>();
@@ -55,15 +62,11 @@ async function uploadFiles(e: Event) {
 	Array.from(fileInput.files).forEach(async (file) => {
 		try {
 			await FileClass.create(file, props.modelValue ?? null);
-
-			// TODO: replace waiting 1 second with websocket
-			setTimeout(async () => {
-				window.location.reload();
-
-				// TODO: Toast
-			}, 1000);
 		} catch (error) {
-			// TODO: Toast
+			addToast({
+				message: t('fileBrowser.file.toast.create.failed') + ' ' + file.name,
+				type: ToastType.Danger,
+			});
 		}
 	});
 }
diff --git a/src/components/item/folder/CreateModal.vue b/src/components/item/folder/CreateModal.vue
index 35afc3d..f936e0b 100644
--- a/src/components/item/folder/CreateModal.vue
+++ b/src/components/item/folder/CreateModal.vue
@@ -52,6 +52,8 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	parentFolder: {
@@ -99,10 +101,18 @@ async function createFolder() {
 
 		addItem(createdFolder);
 
-		// TODO: Show success toast
+		addToast({
+			message: folder.value.name + ' ' + t('fileBrowser.folder.toast.create.success'),
+			type: ToastType.Success,
+		});
 
 		close();
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			message: t('fileBrowser.folder.toast.failed.success') + ' ' + folder.value.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/folder/EditModal.vue b/src/components/item/folder/EditModal.vue
index 567e8f9..27614ab 100644
--- a/src/components/item/folder/EditModal.vue
+++ b/src/components/item/folder/EditModal.vue
@@ -52,6 +52,8 @@ import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
 import ErrorAlert, { type ErrorObject } from '@components/base/errorAlert.vue';
 import { t } from '@lib/i18n';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const props = defineProps({
 	folder: {
@@ -101,10 +103,18 @@ async function updateFolder() {
 
 		updateItem(updatedFolder);
 
-		// TODO: Show success toast
+		addToast({
+			message: props.folder.name + ' ' + t('fileBrowser.folder.toast.update.success'),
+			type: ToastType.Success,
+		});
 
 		close(false);
-	} catch (e) {}
+	} catch (e) {
+		addToast({
+			message: t('fileBrowser.folder.toast.update.failed') + ' ' + props.folder.name,
+			type: ToastType.Danger,
+		});
+	}
 }
 
 function open() {
diff --git a/src/components/item/folder/Folder.vue b/src/components/item/folder/Folder.vue
index 4008fd5..375b7dc 100644
--- a/src/components/item/folder/Folder.vue
+++ b/src/components/item/folder/Folder.vue
@@ -116,6 +116,8 @@ import ShareItemModal from '../ShareItemModal.vue';
 import CreateShortcutModal from '../CreateShortcutModal.vue';
 import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
+import { addToast } from '@stores/toasts';
+import { ToastType } from '@components/base/toast.vue';
 
 const folderContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -145,11 +147,17 @@ async function deleteFolder() {
 
 		removeItem(props.modelValue);
 
-		// TODO: Show success toast
+		addToast({
+			message: props.modelValue.name + ' ' + t('fileBrowser.folder.toast.delete.success'),
+			type: ToastType.Success,
+		});
 	} catch (e) {
 		console.error('Error: ' + e);
 
-		// TODO: Show error toast
+		addToast({
+			message: t('fileBrowser.folder.toast.delete.failed') + ' ' + props.modelValue.name,
+			type: ToastType.Danger,
+		});
 	}
 }
 
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 7ac2914..90bb607 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -58,6 +58,20 @@ export default {
 				download: 'Download',
 				confirmDelete: 'Er du sikker på, at du vil slette denne fil?',
 			},
+			toast: {
+				create: {
+					success: 'er blevet uploaded',
+					failed: 'Fejl i upload af',
+				},
+				update: {
+					success: 'er blevet opdateret',
+					failed: 'Fejl under opdatering af',
+				},
+				delete: {
+					success: 'er blevet slettet',
+					failed: 'Fejl i sletning af',
+				},
+			},
 		},
 		folder: {
 			create: {
@@ -100,6 +114,20 @@ export default {
 				pink: 'Pink',
 				rose: 'Rose',
 			},
+			toast: {
+				create: {
+					success: 'er blevet oprettet',
+					failed: 'Fejl i opretning af',
+				},
+				update: {
+					success: 'er blevet opdateret',
+					failed: 'Fejl under opdatering af',
+				},
+				delete: {
+					success: 'er blevet slettet',
+					failed: 'Fejl i sletning af',
+				},
+			},
 		},
 		docs: {
 			create: {
@@ -120,6 +148,20 @@ export default {
 				openInNewTab: 'Åben i nyt faneblad',
 				confirmDelete: 'Er du sikker på, at du vil slette denne Docs?',
 			},
+			toast: {
+				create: {
+					success: 'er blevet oprettet',
+					failed: 'Fejl i opretning af',
+				},
+				update: {
+					success: 'er blevet opdateret',
+					failed: 'Fejl under opdatering af',
+				},
+				delete: {
+					success: 'er blevet slettet',
+					failed: 'Fejl i sletning af',
+				},
+			},
 		},
 		shortcut: {
 			link: {
@@ -159,5 +201,15 @@ export default {
 		addPeople: 'Tilføj personer',
 		owner: 'Ejer',
 		confirm: 'Bekræft',
+		toast: {
+			create: {
+				success: 'Adgang er blevet givet',
+				failed: 'Fejlede i at give adgang',
+			},
+			delete: {
+				success: 'Adgangen er blevet fjernet',
+				failed: 'Fejlede i at fjerne adgangen',
+			},
+		},
 	},
 };
diff --git a/src/lang/en.ts b/src/lang/en.ts
index c8d5630..1daa4b9 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -58,6 +58,20 @@ export default {
 				download: 'Download',
 				confirmDelete: 'Are you sure you want to delete this file?',
 			},
+			toast: {
+				create: {
+					success: 'has been uploaded',
+					failed: 'Failed to upload file',
+				},
+				update: {
+					success: 'has been updated',
+					failed: 'Failed to update',
+				},
+				delete: {
+					success: 'has been deleted',
+					failed: 'Failed to delete',
+				},
+			},
 		},
 		folder: {
 			create: {
@@ -100,6 +114,20 @@ export default {
 				pink: 'Pink',
 				rose: 'Rose',
 			},
+			toast: {
+				create: {
+					success: 'has been created',
+					failed: 'Failed to create',
+				},
+				update: {
+					success: 'has been updated',
+					failed: 'Failed to update',
+				},
+				delete: {
+					success: 'has been deleted',
+					failed: 'Failed to delete',
+				},
+			},
 		},
 		docs: {
 			create: {
@@ -120,6 +148,20 @@ export default {
 				openInNewTab: 'Open in new tab',
 				confirmDelete: 'Are you sure you want to delete this docs?',
 			},
+			toast: {
+				create: {
+					success: 'has been created',
+					failed: 'Failed to create',
+				},
+				update: {
+					success: 'has been updated',
+					failed: 'Failed to update',
+				},
+				delete: {
+					success: 'has been deleted',
+					failed: 'Failed to delete',
+				},
+			},
 		},
 		shortcut: {
 			link: {
@@ -159,5 +201,15 @@ export default {
 		addPeople: 'Add people',
 		owner: 'Owner',
 		confirm: 'Confirm',
+		toast: {
+			create: {
+				success: 'Access has been given',
+				failed: 'Failed to give access',
+			},
+			delete: {
+				success: 'Access has been removed',
+				failed: 'Failed to remove access',
+			},
+		},
 	},
 };
diff --git a/src/layouts/LayoutSidebar.astro b/src/layouts/LayoutSidebar.astro
index cee6d39..55277be 100644
--- a/src/layouts/LayoutSidebar.astro
+++ b/src/layouts/LayoutSidebar.astro
@@ -3,6 +3,7 @@ import FooterSidebar from './FooterSidebar.astro';
 import LayoutCommon from './LayoutCommon.astro';
 import NavBarSidebar from './NavBarSidebar.astro';
 import SideBar from './SideBar.astro';
+import ToastContainer from '@components/ToastContainer.vue';
 ---
 
 <LayoutCommon>
@@ -15,6 +16,7 @@ import SideBar from './SideBar.astro';
 			id="main-content"
 			class="relative h-full min-h-screen w-full overflow-y-auto bg-gray-50 pt-0 dark:bg-gray-900 lg:ml-64"
 		>
+			<ToastContainer client:only />
 			<slot />
 
 			<FooterSidebar />
diff --git a/src/layouts/SideBar.astro b/src/layouts/SideBar.astro
index 831ecc9..703283d 100644
--- a/src/layouts/SideBar.astro
+++ b/src/layouts/SideBar.astro
@@ -5,7 +5,6 @@ import { t } from '@lib/i18n';
 const currentPath = Astro.url.pathname;
 ---
 
-<!-- TODO: Dynamic dropdowns -->
 <aside
 	id="sidebar"
 	class="fixed left-0 top-0 z-20 hidden h-full w-64 flex-shrink-0 flex-col pt-16 font-normal transition-width duration-75 lg:flex"
diff --git a/src/stores/toasts.ts b/src/stores/toasts.ts
new file mode 100644
index 0000000..3fb9591
--- /dev/null
+++ b/src/stores/toasts.ts
@@ -0,0 +1,20 @@
+import type { ToastType } from '@components/base/toast.vue';
+import { map } from 'nanostores';
+export type Toast = { id: string; message: string; type: ToastType };
+export type AddToast = Omit<Toast, 'id'>;
+export const toastsStore = map<Record<string, Toast | undefined>>({});
+import { v4 as uuid } from 'uuid';
+
+export function addToast(input: AddToast): Toast {
+	const toast: Toast = {
+		id: uuid(),
+		...input,
+	};
+	toastsStore.setKey(toast.id, toast);
+
+	return toast;
+}
+
+export function removeToast(toast: Toast) {
+	toastsStore.setKey(toast.id, undefined);
+}