diff --git a/frontend/src/components/ErrorToast.vue b/frontend/src/components/CustomToast.vue
similarity index 90%
rename from frontend/src/components/ErrorToast.vue
rename to frontend/src/components/CustomToast.vue
index 348df52b..9ba426e6 100644
--- a/frontend/src/components/ErrorToast.vue
+++ b/frontend/src/components/CustomToast.vue
@@ -21,16 +21,18 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .t-container {
   width: 100%;
+  padding: 5px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .action {
+  text-align: center;
   height: 40px;
-  padding: 5px 10px;
+  padding: 0 10px;
   border-radius: 5px;
   color: white;
   cursor: pointer;
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 0a81f4ae..9308889c 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -1,7 +1,5 @@
 @import "normalize.css/normalize.css";
 @import "vue-toastification/dist/index.css";
-@import "noty/lib/noty.css";
-@import "noty/lib/themes/mint.css";
 @import "./_variables.css";
 @import "./_buttons.css";
 @import "./_inputs.css";
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0ff5ebc6..725abd5e 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,13 +1,14 @@
 import { disableExternal } from "@/utils/constants";
-import { createApp } from "vue";
-import Noty from "noty";
+import { createApp, configureCompat } from "vue";
 import VueLazyload from "vue-lazyload";
 import Toast, { useToast } from "vue-toastification";
 import createPinia from "@/stores";
 import router from "@/router";
-import i18n from "@/i18n";
+import i18n, { rtlLanguages } from "@/i18n";
 import App from "@/App.vue";
-import ErrorToast from "@/components/ErrorToast.vue";
+import CustomToast from "@/components/CustomToast.vue";
+
+configureCompat({ RENDER_FUNCTION: false });
 
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -60,20 +61,26 @@ const toastConfig = {
   hideProgressBar: false,
   closeButton: "button",
   icon: true,
-  // TODO: add RTL support
-  // rtl: false,
 };
 
 app.provide("$showSuccess", (message) => {
   const $toast = useToast();
-  $toast.success(message, { ...toastConfig });
+  $toast.success(
+    {
+      component: CustomToast,
+      props: {
+        message: message,
+      },
+    },
+    { ...toastConfig, rtl: rtlLanguages.includes(i18n.global.locale) }
+  );
 });
 
 app.provide("$showError", (error, displayReport = true) => {
   const $toast = useToast();
   $toast.error(
     {
-      component: ErrorToast,
+      component: CustomToast,
       props: {
         message: error.message || error,
         isReport: !disableExternal && displayReport,
@@ -81,7 +88,11 @@ app.provide("$showError", (error, displayReport = true) => {
         reportText: i18n.global.t("buttons.reportIssue"),
       },
     },
-    { ...toastConfig, timeout: 0 }
+    {
+      ...toastConfig,
+      timeout: 0,
+      rtl: rtlLanguages.includes(i18n.global.locale),
+    }
   );
 });