diff --git a/src/lib/AddOverlay.svelte b/src/lib/AddOverlay.svelte
index ae090ca..bad11d4 100644
--- a/src/lib/AddOverlay.svelte
+++ b/src/lib/AddOverlay.svelte
@@ -13,6 +13,7 @@
   } from '@svelte-put/cloudflare-turnstile';
   import { PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY } from '$env/static/public';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+  import './toast.css'; 
 
   let momentDescription = '';
   let captchaToken = '';
@@ -31,7 +32,9 @@
       'Your story was successfully submitted. It will appear publicly on the map once it has been approved by our moderators.',
       {
         theme: {
-          '--toastBarHeight': 0
+          '--toastBackground': 'black',
+          '--toastBarHeight': 0,
+          '--toastColor': 'var(--color-pink)',
         },
 
         duration: 5000
diff --git a/src/lib/DonatePopup.svelte b/src/lib/DonatePopup.svelte
index 032fadf..3ac4d8b 100644
--- a/src/lib/DonatePopup.svelte
+++ b/src/lib/DonatePopup.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
+  import './toast.css'; 
 
   const showToast = writable(true);
 
@@ -24,62 +25,4 @@
       ></button>
     </div>
   </div>
-{/if}
-
-<style>
-  .toast-container {
-    position: fixed;
-    bottom: 0px;
-    left: 9px;
-    right: 70px;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    pointer-events: none;
-    z-index: 9999;
-  }
-  .toast {
-    width: fit-content;
-    min-height: 3.5rem;
-    margin-bottom: 0.5rem;
-    padding: 0;
-    background: black;
-    color: #fff;
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    border: 1px solid var(--color-pink);
-    border-radius: 0.125rem;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    pointer-events: all;
-    cursor: pointer;
-    z-index: 999;
-    position: relative;
-  }
-  .toast-message {
-    padding: 0.75rem 3rem 0.75rem 0.5rem;
-    flex: 1;
-  }
-  .toast-message a {
-    color: var(--color-pink);
-    text-decoration: unset;
-  }
-  .toast-message a span {
-    text-decoration: underline;
-  }
-  .toast-close {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    background: none;
-    border: none;
-    color: var(--color-pink);
-    cursor: pointer;
-    font: 1rem sans-serif;
-  }
-  .toast-close::after {
-    content: '✕';
-  }
-</style>
+{/if}
\ No newline at end of file
diff --git a/src/lib/toast.css b/src/lib/toast.css
new file mode 100644
index 0000000..61fc8b9
--- /dev/null
+++ b/src/lib/toast.css
@@ -0,0 +1,62 @@
+.toast-container {
+    position: fixed;
+    bottom: 0px;
+    left: 9px;
+    right: 70px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    pointer-events: none;
+    z-index: 9999;
+  }
+  
+  .toast {
+    width: fit-content;
+    min-height: 3.5rem;
+    margin-bottom: 0.5rem;
+    padding: 0;
+    background: black;
+    color: var(--color-pink);
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid var(--color-pink);
+    border-radius: 0.125rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: all;
+    cursor: pointer;
+    z-index: 999;
+    position: relative;
+  }
+  
+  .toast-message {
+    padding: 0.75rem 3rem 0.75rem 0.5rem;
+    flex: 1;
+  }
+  
+  .toast-message a {
+    color: var(--color-pink);
+    text-decoration: unset;
+  }
+  
+  .toast-message a span {
+    text-decoration: underline;
+  }
+  
+  .toast-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: none;
+    border: none;
+    color: var(--color-pink);
+    cursor: pointer;
+    font: 1rem sans-serif;
+  }
+  
+  .toast-close::after {
+    content: '✕';
+  }
+  
\ No newline at end of file