diff --git a/components/Header.tsx b/components/Header.tsx
index 4d74ae0..a5a3654 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -106,7 +106,7 @@ export default function Header({ route, user, enabledApps }: Data) {
           <div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
             <div class='flex h-16 items-center justify-between'>
               <div class='flex items-center'>
-                <div class='flex-shrink-0'>
+                <div class='shrink'>
                   <a href='/'>
                     <img class='h-12 w-12 drop-shadow-md' src='/images/logomark.svg' alt='a stylized blue cloud' />
                   </a>
diff --git a/components/calendar/AddEventModal.tsx b/components/calendar/AddEventModal.tsx
index 124c990..97206d4 100644
--- a/components/calendar/AddEventModal.tsx
+++ b/components/calendar/AddEventModal.tsx
@@ -52,7 +52,7 @@ export default function AddEventModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/calendar/ImportEventsModal.tsx b/components/calendar/ImportEventsModal.tsx
index 2f5b90e..7ae833b 100644
--- a/components/calendar/ImportEventsModal.tsx
+++ b/components/calendar/ImportEventsModal.tsx
@@ -26,7 +26,7 @@ export default function ImportEventsModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/calendar/MainCalendar.tsx b/components/calendar/MainCalendar.tsx
index 7bb7daa..38b4fa7 100644
--- a/components/calendar/MainCalendar.tsx
+++ b/components/calendar/MainCalendar.tsx
@@ -449,7 +449,7 @@ export default function MainCalendar(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isViewOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
@@ -510,7 +510,7 @@ export default function MainCalendar(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isImportExportOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/calendar/SearchEvents.tsx b/components/calendar/SearchEvents.tsx
index cbc2f45..d7d8daa 100644
--- a/components/calendar/SearchEvents.tsx
+++ b/components/calendar/SearchEvents.tsx
@@ -110,7 +110,7 @@ export default function SearchEvents({ calendars, onClickOpenEvent }: SearchEven
         ? (
           <section class='relative inline-block text-left ml-2 text-xs'>
             <section
-              class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none`}
+              class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none`}
               role='menu'
               aria-orientation='vertical'
               aria-labelledby='view-button'
diff --git a/components/calendar/ViewEventModal.tsx b/components/calendar/ViewEventModal.tsx
index b876174..c9ec4d0 100644
--- a/components/calendar/ViewEventModal.tsx
+++ b/components/calendar/ViewEventModal.tsx
@@ -33,7 +33,7 @@ export default function ViewEventModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/expenses/BudgetModal.tsx b/components/expenses/BudgetModal.tsx
index 12da81d..985283b 100644
--- a/components/expenses/BudgetModal.tsx
+++ b/components/expenses/BudgetModal.tsx
@@ -41,7 +41,7 @@ export default function BudgetModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/expenses/ExpenseModal.tsx b/components/expenses/ExpenseModal.tsx
index ca35c0d..913e47f 100644
--- a/components/expenses/ExpenseModal.tsx
+++ b/components/expenses/ExpenseModal.tsx
@@ -98,7 +98,7 @@ export default function ExpenseModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/expenses/ListBudgets.tsx b/components/expenses/ListBudgets.tsx
index 3f6a647..c26eac1 100644
--- a/components/expenses/ListBudgets.tsx
+++ b/components/expenses/ListBudgets.tsx
@@ -91,7 +91,7 @@ export default function ListBudgets(
           <section class='w-full flex flex-wrap gap-4 justify-center items-center'>
             {view.value === 'list'
               ? [totalBudget, ...budgets].map((budget) => {
-                let backgroundColorClass = 'bg-green-600';
+                let backgroundColorClass = 'bg-emerald-600';
                 let usedValuePercentage = Math.ceil(100 * budget.extra.usedValue / budget.value);
 
                 if (usedValuePercentage >= 100) {
diff --git a/components/expenses/MainExpenses.tsx b/components/expenses/MainExpenses.tsx
index 1562ef1..72a5727 100644
--- a/components/expenses/MainExpenses.tsx
+++ b/components/expenses/MainExpenses.tsx
@@ -729,7 +729,7 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !areNewOptionsOption.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/files/CreateDirectoryModal.tsx b/components/files/CreateDirectoryModal.tsx
index 6d0eeee..c47bbaf 100644
--- a/components/files/CreateDirectoryModal.tsx
+++ b/components/files/CreateDirectoryModal.tsx
@@ -14,7 +14,7 @@ export default function CreateDirectoryModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/files/CreateShareModal.tsx b/components/files/CreateShareModal.tsx
index 50c6344..47debf2 100644
--- a/components/files/CreateShareModal.tsx
+++ b/components/files/CreateShareModal.tsx
@@ -16,7 +16,7 @@ export default function CreateShareModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/files/MainFiles.tsx b/components/files/MainFiles.tsx
index 5f04749..f8b8531 100644
--- a/components/files/MainFiles.tsx
+++ b/components/files/MainFiles.tsx
@@ -734,7 +734,7 @@ export default function MainFiles(
                   </div>
 
                   <div
-                    class={`absolute left-0 z-10 mt-2 w-44 origin-top-left rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+                    class={`absolute left-0 z-10 mt-2 w-44 origin-top-left rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                       !areBulkOptionsOpen.value ? 'hidden' : ''
                     }`}
                     role='menu'
@@ -785,7 +785,7 @@ export default function MainFiles(
                 </div>
 
                 <div
-                  class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+                  class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                     !areNewOptionsOpen.value ? 'hidden' : ''
                   }`}
                   role='menu'
diff --git a/components/files/ManageShareModal.tsx b/components/files/ManageShareModal.tsx
index 9e67e49..9b57d22 100644
--- a/components/files/ManageShareModal.tsx
+++ b/components/files/ManageShareModal.tsx
@@ -62,7 +62,7 @@ export default function ManageShareModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/files/MoveDirectoryOrFileModal.tsx b/components/files/MoveDirectoryOrFileModal.tsx
index 4afdbce..c60c0dc 100644
--- a/components/files/MoveDirectoryOrFileModal.tsx
+++ b/components/files/MoveDirectoryOrFileModal.tsx
@@ -78,7 +78,7 @@ export default function MoveDirectoryOrFileModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/files/RenameDirectoryOrFileModal.tsx b/components/files/RenameDirectoryOrFileModal.tsx
index e9282a3..19ec22e 100644
--- a/components/files/RenameDirectoryOrFileModal.tsx
+++ b/components/files/RenameDirectoryOrFileModal.tsx
@@ -21,7 +21,7 @@ export default function RenameDirectoryOrFileModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/files/SearchFiles.tsx b/components/files/SearchFiles.tsx
index e5fa110..8242bfd 100644
--- a/components/files/SearchFiles.tsx
+++ b/components/files/SearchFiles.tsx
@@ -112,7 +112,7 @@ export default function SearchFiles({}: SearchFilesProps) {
         ? (
           <section class='relative inline-block text-left ml-2 text-sm'>
             <section
-              class={`absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-slate-600 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none overflow-y-scroll max-h-[80%] min-h-56`}
+              class={`absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-slate-600 shadow-lg ring-1 ring-black/15 focus:outline-none overflow-y-scroll max-h-[80%] min-h-56`}
               role='menu'
               aria-orientation='vertical'
               aria-labelledby='view-button'
diff --git a/components/notes/CreateNoteModal.tsx b/components/notes/CreateNoteModal.tsx
index c1e4139..da9cc77 100644
--- a/components/notes/CreateNoteModal.tsx
+++ b/components/notes/CreateNoteModal.tsx
@@ -14,7 +14,7 @@ export default function CreateNoteModal(
   return (
     <>
       <section
-        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/components/notes/MainNotes.tsx b/components/notes/MainNotes.tsx
index 1637104..f9e8e4a 100644
--- a/components/notes/MainNotes.tsx
+++ b/components/notes/MainNotes.tsx
@@ -250,7 +250,7 @@ export default function MainNotes({ initialDirectories, initialFiles, initialPat
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !areNewOptionsOption.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/photos/MainPhotos.tsx b/components/photos/MainPhotos.tsx
index 1c88493..22be68e 100644
--- a/components/photos/MainPhotos.tsx
+++ b/components/photos/MainPhotos.tsx
@@ -166,7 +166,7 @@ export default function MainPhotos({ initialDirectories, initialFiles, initialPa
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !areNewOptionsOption.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/docker-compose.yml b/docker-compose.yml
index 4f12775..c0741ab 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,6 @@
 services:
   website:
-    image: ghcr.io/bewcloud/bewcloud:v3.0.2
+    image: ghcr.io/bewcloud/bewcloud:v3.0.0
     restart: always
     ports:
       - 127.0.0.1:8000:8000
diff --git a/islands/auth/MultiFactorAuthSettings.tsx b/islands/auth/MultiFactorAuthSettings.tsx
index 67336da..9f22dce 100644
--- a/islands/auth/MultiFactorAuthSettings.tsx
+++ b/islands/auth/MultiFactorAuthSettings.tsx
@@ -535,7 +535,7 @@ export default function MultiFactorAuthSettings({ methods }: MultiFactorAuthSett
                             method.type === 'totp' && typeof method.backupCodesCount !== 'undefined' ? 'mb-2' : ''
                           }`}
                         >
-                          <span class='inline-block w-3 h-3 bg-green-500 rounded-full mr-2'></span>
+                          <span class='inline-block w-3 h-3 bg-emerald-500 rounded-full mr-2'></span>
                           <span class='font-medium'>{method.name}</span>
                         </section>
                         {method.type === 'totp' && typeof method.backupCodesCount !== 'undefined'
diff --git a/islands/calendar/Calendars.tsx b/islands/calendar/Calendars.tsx
index c383f79..f5762fc 100644
--- a/islands/calendar/Calendars.tsx
+++ b/islands/calendar/Calendars.tsx
@@ -241,9 +241,7 @@ export default function Calendars({ initialCalendars }: CalendarsProps) {
       </section>
 
       <section
-        class={`fixed ${
-          openCalendar.value ? 'block' : 'hidden'
-        } z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+        class={`fixed ${openCalendar.value ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900/60`}
       >
       </section>
 
diff --git a/islands/contacts/Contacts.tsx b/islands/contacts/Contacts.tsx
index 0dca3e7..d606496 100644
--- a/islands/contacts/Contacts.tsx
+++ b/islands/contacts/Contacts.tsx
@@ -359,7 +359,7 @@ export default function Contacts(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-slate-600 rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-slate-600 rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isAddressBooksDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
@@ -424,7 +424,7 @@ export default function Contacts(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/islands/dashboard/Links.tsx b/islands/dashboard/Links.tsx
index 93a558f..4c18774 100644
--- a/islands/dashboard/Links.tsx
+++ b/islands/dashboard/Links.tsx
@@ -179,7 +179,7 @@ export default function Links({ initialLinks }: LinksProps) {
 
         <span
           class={`flex justify-end items-center text-sm mt-1 mx-2 ${
-            hasSaved.value ? 'text-green-600' : 'text-slate-100'
+            hasSaved.value ? 'text-emerald-600' : 'text-slate-100'
           }`}
         >
           {isSaving.value
diff --git a/islands/dashboard/Notes.tsx b/islands/dashboard/Notes.tsx
index bfad74f..8b79ca9 100644
--- a/islands/dashboard/Notes.tsx
+++ b/islands/dashboard/Notes.tsx
@@ -79,7 +79,7 @@ export default function Notes({ initialNotes }: NotesProps) {
 
       <span
         class={`flex justify-end items-center text-sm mt-1 mx-2 ${
-          hasSaved.value ? 'text-green-600' : 'text-slate-100'
+          hasSaved.value ? 'text-emerald-600' : 'text-slate-100'
         }`}
       >
         {isSaving.value
diff --git a/islands/news/Articles.tsx b/islands/news/Articles.tsx
index f667a2d..8317aad 100644
--- a/islands/news/Articles.tsx
+++ b/islands/news/Articles.tsx
@@ -178,7 +178,7 @@ export default function Articles({ initialArticles }: ArticlesProps) {
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isFilterDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/islands/news/Feeds.tsx b/islands/news/Feeds.tsx
index 3fa6702..4f71fc0 100644
--- a/islands/news/Feeds.tsx
+++ b/islands/news/Feeds.tsx
@@ -257,7 +257,7 @@ export default function Feeds({ initialFeeds }: FeedsProps) {
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/islands/notes/Note.tsx b/islands/notes/Note.tsx
index 52ef7ca..439f3fd 100644
--- a/islands/notes/Note.tsx
+++ b/islands/notes/Note.tsx
@@ -90,7 +90,7 @@ export default function Note({ fileName, currentPath, contents }: NoteProps) {
 
       <span
         class={`flex justify-end items-center text-sm mt-1 mx-auto max-w-7xl ${
-          hasSaved.value ? 'text-green-600' : 'text-slate-100'
+          hasSaved.value ? 'text-emerald-600' : 'text-slate-100'
         }`}
       >
         {isSaving.value
diff --git a/lib/utils/calendar.ts b/lib/utils/calendar.ts
index a81901a..7241d5e 100644
--- a/lib/utils/calendar.ts
+++ b/lib/utils/calendar.ts
@@ -6,10 +6,10 @@ export const CALENDAR_COLOR_OPTIONS = [
   'bg-orange-700',
   'bg-orange-950',
   'bg-amber-700',
-  'bg-yellow-800',
+  'bg-amber-800',
   'bg-lime-700',
   'bg-lime-950',
-  'bg-green-700',
+  'bg-emerald-700',
   'bg-emerald-800',
   'bg-teal-700',
   'bg-cyan-700',
@@ -17,7 +17,7 @@ export const CALENDAR_COLOR_OPTIONS = [
   'bg-blue-900',
   'bg-indigo-700',
   'bg-violet-700',
-  'bg-purple-800',
+  'bg-violet-800',
   'bg-fuchsia-700',
   'bg-pink-800',
   'bg-rose-700',
diff --git a/lib/utils/calendar_test.ts b/lib/utils/calendar_test.ts
index d0f8128..c17e0a1 100644
--- a/lib/utils/calendar_test.ts
+++ b/lib/utils/calendar_test.ts
@@ -21,9 +21,9 @@ import {
 Deno.test('that getColorAsHex works', () => {
   const tests: { input: string; expected: string | undefined }[] = [
     { input: 'bg-red-700', expected: '#B51E1F' },
-    { input: 'bg-green-700', expected: '#148041' },
+    { input: 'bg-emerald-700', expected: '#148041' },
     { input: 'bg-blue-900', expected: '#1E3A89' },
-    { input: 'bg-purple-800', expected: '#6923A9' },
+    { input: 'bg-violet-800', expected: '#6923A9' },
     { input: 'bg-gray-700', expected: '#384354' },
     { input: 'invalid-color', expected: '#384354' },
   ];
diff --git a/static/styles.css b/static/styles.css
index ea8e55e..662cd1a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -58,7 +58,7 @@ form {
 }
 
 .notification-success {
-  @apply bg-green-600 rounded text-white px-6 py-8 shadow-md mt-2 mb-6 w-full hover:shadow-lg;
+  @apply bg-emerald-600 rounded text-white px-6 py-8 shadow-md mt-2 mb-6 w-full hover:shadow-lg;
 }
 
 .notification-success h3 {