diff --git a/src/components/ui/Snackbar.vue b/src/components/ui/Snackbar.vue
new file mode 100644
index 0000000..9eb3fad
--- /dev/null
+++ b/src/components/ui/Snackbar.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { useSnackbar } from '@/composables/useSnackbar';
+
+const { visible, color, title, message } = useSnackbar();
+</script>
+
+<template>
+  <v-snackbar v-model="visible" :color="color" vertical>
+    <h6 class="text-h6 mb-1">{{ title }}</h6>
+    <p class="text-body-1">{{ message }}</p>
+  </v-snackbar>
+</template>
diff --git a/src/composables/useSnackbar.ts b/src/composables/useSnackbar.ts
new file mode 100644
index 0000000..3019189
--- /dev/null
+++ b/src/composables/useSnackbar.ts
@@ -0,0 +1,22 @@
+import { reactive, toRefs } from 'vue';
+
+interface Snackbar {
+  visible: boolean;
+  color: '' | 'error' | 'success';
+  title: string;
+  message: string;
+}
+
+const snackbar = reactive<Snackbar>({
+  color: '',
+  title: '',
+  message: '',
+  visible: false
+});
+
+export function useSnackbar() {
+  const showSnackbar = (options: Omit<Snackbar, 'visible'>) =>
+    Object.assign(snackbar, { ...options, visible: true });
+
+  return { ...toRefs(snackbar), showSnackbar };
+}