diff --git a/README.md b/README.md
index 2eb9443b2a6ee05c3f651b0735f4ffa12c0a9297..d310fc7d65afb926bb8bd64d1e6466d279bb2a19 100644
--- a/README.md
+++ b/README.md
@@ -23,5 +23,6 @@ cp ./.env.template.local ./.env.production.local
 - [PM2](https://pm2.keymetrics.io/)
 
 # Roadmap
-- [ ] create forms using rhf
-- [ ] add form validations via zod
\ No newline at end of file
+- [ ] create private routes
+- [ ] fix errors
+- [ ] complete pages incl. password request and RAGChat
\ No newline at end of file
diff --git a/README_tmp.html b/README_tmp.html
index 0c3616ef036c2fdc73250132a7640ede05b0c98a..203124e23f878ba8c6ad08ea76fd122c47f16ddb 100644
--- a/README_tmp.html
+++ b/README_tmp.html
@@ -389,8 +389,9 @@ cp ./.env.template.local ./.env.production.local
 </ul>
 <h1 id="roadmap">Roadmap</h1>
 <ul>
-<li><input type="checkbox" id="checkbox0"><label for="checkbox0">create forms using rhf</label></li>
-<li><input type="checkbox" id="checkbox1"><label for="checkbox1">add form validations via zod</label></li>
+<li><input type="checkbox" id="checkbox0"><label for="checkbox0">create private routes</label></li>
+<li><input type="checkbox" id="checkbox1"><label for="checkbox1">fix errors</label></li>
+<li><input type="checkbox" id="checkbox2"><label for="checkbox2">complete pages incl. password request and RAGChat</label></li>
 </ul>
 
 </body>
diff --git a/src/assets/css/app.min.css b/src/assets/css/app.min.css
index 02cea9f6dde72e5e0c091ce58eb55e880a15c6f3..d65977834cd90051f68432516256f39c961d6f0b 100644
--- a/src/assets/css/app.min.css
+++ b/src/assets/css/app.min.css
@@ -1 +1 @@
-@font-face{font-family:"TheSansUHHSemiLightCaps";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHSemiLightCaps-6948b01b715690a2b9506f63305ee0c3abd9ad2010d89a1202df00d39d100954.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHSemiLightCaps-f2aa5e1a44c9fd5db30254599c5ac8ccc944b711798d961e35924e413d81ad50.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHBold";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBold-6a239f69f764ae41ead96462cb9973fdde7c66739769d13776e0dfb896a96ab5.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBold-026d11467c2214c911121580ced3b1fe4d5ba42da11107194e4c378b02a9b46c.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHBoldCaps";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBoldCaps-f0c825ec667e94a17d4e77b97493a2586655b053421a08418f0a6a75500eb8a9.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBoldCaps-7fd206907219f3ec347a062d4e7decf51dd742c8fad3d1a9c92609f00e059c1e.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHRegular";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-dd85da951afc3550ff98f11056eac2bcbba855c879809fd00caf60929a3cbd4f.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-7af4ba764ea22bd512c10b580f199e97beea980e3bf60090743ee3f5f36c66ce.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHH";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-dd85da951afc3550ff98f11056eac2bcbba855c879809fd00caf60929a3cbd4f.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-7af4ba764ea22bd512c10b580f199e97beea980e3bf60090743ee3f5f36c66ce.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHRegularCaps";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularCaps-7072a6f8ebbb26d334ca7e14826795068429a0072220dac594063678de20e698.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularCaps-fdce39405f802f0295dd3e70bf62fd3cc725a72d0883c39081af20e0cc90e624.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHItalic";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularItalic-d3186420f2bbe557092314ef3043b74e450cf52459bc7ce3f2c73f9194e15a79.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularItalic-62190ab7d86db0f3eab9e0fca925474c5fe192483468a88b2094dd46c3fe93e2.woff) format("woff");font-weight:normal;font-style:normal}@tailwind base;@tailwind components;@tailwind utilities/*# sourceMappingURL=app.min.css.map */
\ No newline at end of file
+@font-face{font-family:"TheSansUHHSemiLightCaps";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHSemiLightCaps-6948b01b715690a2b9506f63305ee0c3abd9ad2010d89a1202df00d39d100954.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHSemiLightCaps-f2aa5e1a44c9fd5db30254599c5ac8ccc944b711798d961e35924e413d81ad50.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHBold";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBold-6a239f69f764ae41ead96462cb9973fdde7c66739769d13776e0dfb896a96ab5.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBold-026d11467c2214c911121580ced3b1fe4d5ba42da11107194e4c378b02a9b46c.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHBoldCaps";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBoldCaps-f0c825ec667e94a17d4e77b97493a2586655b053421a08418f0a6a75500eb8a9.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHBoldCaps-7fd206907219f3ec347a062d4e7decf51dd742c8fad3d1a9c92609f00e059c1e.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHRegular";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-dd85da951afc3550ff98f11056eac2bcbba855c879809fd00caf60929a3cbd4f.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-7af4ba764ea22bd512c10b580f199e97beea980e3bf60090743ee3f5f36c66ce.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHH";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-dd85da951afc3550ff98f11056eac2bcbba855c879809fd00caf60929a3cbd4f.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegular-7af4ba764ea22bd512c10b580f199e97beea980e3bf60090743ee3f5f36c66ce.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHRegularCaps";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularCaps-7072a6f8ebbb26d334ca7e14826795068429a0072220dac594063678de20e698.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularCaps-fdce39405f802f0295dd3e70bf62fd3cc725a72d0883c39081af20e0cc90e624.woff) format("woff");font-weight:normal;font-style:normal}@font-face{font-family:"TheSansUHHItalic";font-display:fallback;src:url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularItalic-d3186420f2bbe557092314ef3043b74e450cf52459bc7ce3f2c73f9194e15a79.woff2) format("woff2"),url(https://assets.rrz.uni-hamburg.de/assets/TheSansUHHRegularItalic-62190ab7d86db0f3eab9e0fca925474c5fe192483468a88b2094dd46c3fe93e2.woff) format("woff");font-weight:normal;font-style:normal}:root{--toastify-color-light: #fff;--toastify-color-dark: #3b515b;--toastify-color-info: #0271bb;--toastify-color-success: #07bc0c;--toastify-color-warning: #f1c40f;--toastify-color-error: #e2001a;--toastify-color-transparent: rgba(255, 255, 255, 0.7);--toastify-icon-color-info: var(--toastify-color-info);--toastify-icon-color-success: var(--toastify-color-success);--toastify-icon-color-warning: var(--toastify-color-warning);--toastify-icon-color-error: var(--toastify-color-error);--toastify-toast-width: 320px;--toastify-toast-background: #fff;--toastify-toast-min-height: 64px;--toastify-toast-max-height: 800px;--toastify-font-family: sans-serif;--toastify-z-index: 9999;--toastify-text-color-light: #757575;--toastify-text-color-dark: #fff;--toastify-text-color-info: #fff;--toastify-text-color-success: #fff;--toastify-text-color-warning: #fff;--toastify-text-color-error: #fff;--toastify-spinner-color: #0271bb;--toastify-spinner-color-empty-area: #fffaf0;--toastify-color-progress-light: linear-gradient(to right, #fff, #3b515b);--toastify-color-progress-dark: rgba(240, 130, 136, 0.5);--toastify-color-progress-info: var(--toastify-color-info);--toastify-color-progress-success: var(--toastify-color-success);--toastify-color-progress-warning: var(--toastify-color-warning);--toastify-color-progress-error: var(--toastify-color-error)}@tailwind base;@tailwind components;@tailwind utilities;@layer base{.conceal{@apply opacity-0 h-0 w-0 p-0 m-0 overflow-hidden}label,details{@apply block w-full pb-1 relative cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-60 lg:min-w-xs lg:w-[calc(1/2*100%-(1*1rem/2))] xl:w-[calc((1/4*100%)-(3*1rem/4))]}img,svg,video,canvas,audio,iframe,embed,object{display:inline;vertical-align:middle}:root{--background: 0 0% 100%;--foreground: 0 0% 3.9%;--card: 0 0% 100%;--card-foreground: 0 0% 3.9%;--popover: 0 0% 100%;--popover-foreground: 0 0% 3.9%;--primary: 204 98% 37%;--primary-foreground: 0 0% 98%;--secondary: 0 0% 96.1%;--secondary-foreground: 0 0% 9%;--muted: 0 0% 96.1%;--muted-foreground: 0 0% 45.1%;--accent: 0 0% 96.1%;--accent-foreground: 0 0% 9%;--destructive: 353 100% 44%;--destructive-foreground: 0 0% 98%;--border: 0 0% 89.8%;--input: 0 0% 89.8%;--ring: 0 0% 3.9%;--radius: 0.5rem}.dark{--background: 0 0% 3.9%;--foreground: 0 0% 98%;--card: 0 0% 3.9%;--card-foreground: 0 0% 98%;--popover: 0 0% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 0 0% 9%;--secondary: 0 0% 14.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 14.9%;--muted-foreground: 0 0% 63.9%;--accent: 0 0% 14.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 0% 83.1%}*{@apply border-border}body{@apply bg-background text-foreground}}/*# sourceMappingURL=app.min.css.map */
\ No newline at end of file
diff --git a/src/assets/css/app.min.css.map b/src/assets/css/app.min.css.map
index 37110f0c8739127386f3f518dc1698460c8574dd..011fe05d0a79052f9c4cd37e713f79cd09f8d5aa 100644
--- a/src/assets/css/app.min.css.map
+++ b/src/assets/css/app.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../sass/partials/_fonts.scss","../sass/tailwind.presets.scss"],"names":[],"mappings":"AAKA,WACE,qCAAA,CACA,qBAAA,CACA,2TACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,4BAAA,CACA,qBAAA,CACA,ySACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,gCAAA,CACA,qBAAA,CACA,iTACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,+BAAA,CACA,qBAAA,CACA,+SACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,wBAAA,CACA,qBAAA,CACA,+SACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,mCAAA,CACA,qBAAA,CACA,uTACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,8BAAA,CACA,qBAAA,CACA,2TACE,CAIF,kBAAA,CACA,iBAAA,CChFF,cAAA,CACA,oBAAA,CACA","file":"app.min.css"}
\ No newline at end of file
+{"version":3,"sources":["../sass/partials/_fonts.scss","../sass/partials/_toastify.scss","../sass/tailwind.presets.scss"],"names":[],"mappings":"AAKA,WACE,qCAAA,CACA,qBAAA,CACA,2TACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,4BAAA,CACA,qBAAA,CACA,ySACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,gCAAA,CACA,qBAAA,CACA,iTACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,+BAAA,CACA,qBAAA,CACA,+SACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,wBAAA,CACA,qBAAA,CACA,+SACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,mCAAA,CACA,qBAAA,CACA,uTACE,CAIF,kBAAA,CACA,iBAAA,CAEF,WACE,8BAAA,CACA,qBAAA,CACA,2TACE,CAIF,kBAAA,CACA,iBAAA,CChFF,MACE,4BAAA,CACA,8BAAA,CACA,8BAAA,CACA,iCAAA,CACA,iCAAA,CACA,+BAAA,CACA,sDAAA,CAEA,sDAAA,CACA,4DAAA,CACA,4DAAA,CACA,wDAAA,CAEA,6BAAA,CACA,iCAAA,CACA,iCAAA,CACA,kCAAA,CACA,kCAAA,CACA,wBAAA,CAEA,oCAAA,CACA,gCAAA,CAGA,gCAAA,CACA,mCAAA,CACA,mCAAA,CACA,iCAAA,CAEA,iCAAA,CACA,4CAAA,CAIA,yEAAA,CAEA,wDAAA,CACA,0DAAA,CACA,gEAAA,CACA,gEAAA,CACA,4DAAA,CCzCF,cAAA,CACA,oBAAA,CACA,mBAAA,CACA,YACE,SACE,gDAAA,CAEF,cAEE,6MAAA,CAEF,+CAQE,cAAA,CACA,qBAAA,CAEF,MACE,uBAAA,CACA,uBAAA,CAEA,iBAAA,CACA,4BAAA,CAEA,oBAAA,CACA,+BAAA,CAGA,sBAAA,CACA,8BAAA,CAEA,uBAAA,CACA,+BAAA,CAEA,mBAAA,CACA,8BAAA,CAEA,oBAAA,CACA,4BAAA,CAEA,2BAAA,CACA,kCAAA,CAEA,oBAAA,CACA,mBAAA,CACA,iBAAA,CAEA,gBAAA,CAGF,MACE,uBAAA,CACA,sBAAA,CAEA,iBAAA,CACA,2BAAA,CAEA,oBAAA,CACA,8BAAA,CAEA,mBAAA,CACA,6BAAA,CAEA,uBAAA,CACA,gCAAA,CAEA,mBAAA,CACA,8BAAA,CAEA,oBAAA,CACA,6BAAA,CAEA,4BAAA,CACA,kCAAA,CAEA,oBAAA,CACA,mBAAA,CACA,kBAAA,CAGF,EACE,oBAAA,CAEF,KACE,oCAAA,CAAA","file":"app.min.css"}
\ No newline at end of file
diff --git a/src/assets/sass/app.scss b/src/assets/sass/app.scss
index b6d886d5d1cac4c1dd6c6bd9e9d3f12be7be5786..1dbc754c079cdf7ac68a870380095b31c9837529 100644
--- a/src/assets/sass/app.scss
+++ b/src/assets/sass/app.scss
@@ -1,2 +1,3 @@
 @import "partials/fonts";
+@import "partials/toastify";
 @import "tailwind.presets.scss";
diff --git a/src/assets/sass/partials/_toastify.scss b/src/assets/sass/partials/_toastify.scss
new file mode 100755
index 0000000000000000000000000000000000000000..3b1afc175554450f80fd451e36aaeba4c95a0a56
--- /dev/null
+++ b/src/assets/sass/partials/_toastify.scss
@@ -0,0 +1,43 @@
+:root {
+  --toastify-color-light: #fff;
+  --toastify-color-dark: #3b515b;
+  --toastify-color-info: #0271bb;
+  --toastify-color-success: #07bc0c;
+  --toastify-color-warning: #f1c40f;
+  --toastify-color-error: #e2001a;
+  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
+
+  --toastify-icon-color-info: var(--toastify-color-info);
+  --toastify-icon-color-success: var(--toastify-color-success);
+  --toastify-icon-color-warning: var(--toastify-color-warning);
+  --toastify-icon-color-error: var(--toastify-color-error);
+
+  --toastify-toast-width: 320px;
+  --toastify-toast-background: #fff;
+  --toastify-toast-min-height: 64px;
+  --toastify-toast-max-height: 800px;
+  --toastify-font-family: sans-serif;
+  --toastify-z-index: 9999;
+
+  --toastify-text-color-light: #757575;
+  --toastify-text-color-dark: #fff;
+
+  //Used only for colored theme
+  --toastify-text-color-info: #fff;
+  --toastify-text-color-success: #fff;
+  --toastify-text-color-warning: #fff;
+  --toastify-text-color-error: #fff;
+
+  --toastify-spinner-color: #0271bb;
+  --toastify-spinner-color-empty-area: #fffaf0;
+
+  // Used when no type is provided
+  // toast("**hello**")
+  --toastify-color-progress-light: linear-gradient(to right, #fff, #3b515b);
+  // Used when no type is provided
+  --toastify-color-progress-dark: rgba(240, 130, 136, 0.5);
+  --toastify-color-progress-info: var(--toastify-color-info);
+  --toastify-color-progress-success: var(--toastify-color-success);
+  --toastify-color-progress-warning: var(--toastify-color-warning);
+  --toastify-color-progress-error: var(--toastify-color-error);
+}
diff --git a/src/layouts/CleanLayout.jsx b/src/layouts/CleanLayout.jsx
index ab0e1eef67a1dad410f929d03605b79102bf5654..6a9403ec808de20980fb911d6f9d117f4dfdeb44 100644
--- a/src/layouts/CleanLayout.jsx
+++ b/src/layouts/CleanLayout.jsx
@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import Header from './partials/Header';
+import { ToastContainer } from 'react-toastify';
+
 
 function CleanLayout() {
   // #################################
@@ -28,6 +30,7 @@ function CleanLayout() {
       <div className="grid grid-cols-1 grid-rows-[auto_1fr] h-full min-w-xs text-UhhGrey">
         <Header layout="clean" />
         <main role="main">
+          <ToastContainer />
           <div className="box-border overflow-x-hidden overflow-y-auto px-4 mt-2 ">
             <div>
               <Outlet />
diff --git a/src/layouts/MainLayout.jsx b/src/layouts/MainLayout.jsx
index c11d12a7f4950315c072db62cb63d272b5e5766c..139c5085658490ad92e66b21cb9cb7fb56ea7ac4 100644
--- a/src/layouts/MainLayout.jsx
+++ b/src/layouts/MainLayout.jsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Header from './partials/Header';
 import Subheader from './partials/subheader/Subheader';
 import Navbar from './partials/navbar/Navbar';
+import { ToastContainer } from 'react-toastify';
 
 
 function MainLayout() {
@@ -36,6 +37,7 @@ function MainLayout() {
       <Header showMobileNav={showMobileNav} toggleMobileNav={toggleMobileNav} />
       <Subheader />
       <main role="main" className="relative row-start-2 col-span-full flex sm:justify-center overflow-y-auto sm:row-start-4">
+        <ToastContainer />
         <div className="box-border px-4 mt-2 container">
           <Outlet />
         </div>
diff --git a/src/main.jsx b/src/main.jsx
index af96ec4542af58c55bdb6dff59bf1ed7fc1051f8..711d0421e4963587b70c423eedbeacce4e4fb069 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
+import "react-toastify/dist/ReactToastify.css";
 import './assets/sass/app.scss';
 
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>,
 );
diff --git a/src/pages/User/Login.jsx b/src/pages/User/Login.jsx
index d0adc6e8324c65c17772f61cc30b0f46a0c4a27e..bfefe512f81cca090e7b5d8e23b359162c509126 100644
--- a/src/pages/User/Login.jsx
+++ b/src/pages/User/Login.jsx
@@ -17,7 +17,7 @@ function Login() {
   // VALIDATION SCHEMA
   // #################################
   const schema = z.object({
-    email: z.string().min(1),
+    email: z.string().email(),
     password: z.string().min(1)
   });
 
@@ -34,13 +34,39 @@ function Login() {
   // ### PREPARE FORM
   const methods = useForm({
     resolver: zodResolver(schema),
-    mode: 'onSubmit',
+    mode: 'onBlur',
     defaultValues: {
       email: '',
       password: ''
     }
   });
 
+  // ### ON LOAD SHOW SOME INFOS
+  useEffect(() => {
+    // DEV TOASTS
+    if (import.meta.env.MODE === 'development') {
+      // Info for DevMode to accept self signed api cert to enable API connection
+      toast.warning(() => (
+        <>
+          <span className="sr-only">Info</span>
+          <p className="font-bold font-UhhSLC">DevMode: Making the API accessible</p>
+          <p>Connect the <a href={`${import.meta.env.VITE_BACKEND_URL}:${import.meta.env.VITE_BACKEND_PORT}`} target="_blank" className="underline">backend</a> & accept the security risk.</p>
+        </>
+      ), {
+        autoClose: false,
+        closeOnClick: false,
+        toastId: 'api-connection-toast',
+      });
+    }
+
+    // dismiss dev toasts if unload
+    return () => {
+      if (import.meta.env.MODE === 'development') {
+        toast.dismiss('api-connection-toast');
+      }
+    };
+  }, []);
+
   // #################################
   // FUNCTIONS
   // #################################