diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index 62ed82a6e6cf0170d15c4d3c66e15da3a619fff9..408368a08ddfeebd051bcf9658b43229e1834738 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -1,7 +1,7 @@
 
-@import 'variables';
 @import 'bootstrap/scss/bootstrap';
 @import 'react-toastify/dist/ReactToastify';
+@import 'variables';
 
 @import 'helpers';
 @import 'rooms';
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index aa2820b0cd1d9a46a58af7d07a54b00c078bd5fb..9eed694092d07048ff75f599c3b18c024a0ce146 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -24,3 +24,8 @@ $column-md-width: 150px;
 $column-lg-width: 325px;
 
 $input-max-width: 300px;
+
+:root {
+  --toastify-color-error: #dc3545;
+  --toastify-font-family: "Inter";
+}
diff --git a/app/javascript/App.jsx b/app/javascript/App.jsx
index 73bcead8cecffbe829525cd2031442b22e6accc9..0d1fed99c1bab8c55c42040dc87dc96e433c5ef5 100644
--- a/app/javascript/App.jsx
+++ b/app/javascript/App.jsx
@@ -29,6 +29,7 @@ export default function App() {
 
   document.documentElement.style.setProperty('--brand-color', brandColors.PrimaryColor);
   document.documentElement.style.setProperty('--brand-color-light', brandColors.PrimaryColorLight);
+  document.documentElement.style.setProperty('--toastify-color-success', brandColors.PrimaryColor);
 
   return (
     <>
@@ -39,6 +40,7 @@ export default function App() {
       <ToastContainer
         position="bottom-right"
         newestOnTop
+        autoClose={3000}
       />
       <Footer />
     </>