diff --git a/package-lock.json b/package-lock.json
index 85c02d5..a315843 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "vue-expense-tracker",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "vue-toastification": "^2.0.0-rc.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.4.0",
@@ -717,6 +718,14 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 306cf4d..d81ebaf 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",
diff --git a/src/components/AddTransaction.vue b/src/components/AddTransaction.vue
index 8ffb61e..0a2d54b 100644
--- a/src/components/AddTransaction.vue
+++ b/src/components/AddTransaction.vue
@@ -1,17 +1,48 @@
 <template>
   <h3>Add new transaction</h3>
-  <form id="form">
+  <form id="form" @submit.prevent="onSubmit">
     <div class="form-control">
       <label for="text">Text</label>
-      <input type="text" id="text" placeholder="Enter text..." />
+      <input type="text" id="text" placeholder="Enter text..." v-model="text" />
     </div>
     <div class="form-control">
       <label for="amount"
         >Amount <br />
         (negative - expense, positive - income)</label
       >
-      <input type="text" id="amount" placeholder="Enter amount..." />
+      <input
+        type="text"
+        id="amount"
+        placeholder="Enter amount..."
+        v-model="amount"
+      />
     </div>
     <button class="btn">Add transaction</button>
   </form>
 </template>
+
+<script setup>
+import { useToast } from 'vue-toastification';
+import { ref } from 'vue';
+
+const text = ref('');
+const amount = ref('');
+
+// Get toast interface
+const toast = useToast();
+
+const onSubmit = () => {
+  if (!text.value || !amount.value) {
+    // Display a toast error message if either field is empty
+    toast.error('Both fields must be filled.');
+    return;
+  }
+
+  // Proceed with form submission logic here...
+  console.log('Form submitted:', text.value, amount.value);
+
+  // Clear form fields
+  text.value = '';
+  amount.value = '';
+};
+</script>
diff --git a/src/main.js b/src/main.js
index 2b1b536..9d4079a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,9 @@
-import './assets/style.css';
-
 import { createApp } from 'vue';
+import Toast from 'vue-toastification';
+import 'vue-toastification/dist/index.css';
+import './assets/style.css';
 import App from './App.vue';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+app.use(Toast);
+app.mount('#app');