diff --git a/.changeset/strange-otters-heal.md b/.changeset/strange-otters-heal.md
new file mode 100644
index 000000000..06b3f61d9
--- /dev/null
+++ b/.changeset/strange-otters-heal.md
@@ -0,0 +1,5 @@
+---
+'@codeimage/ui': minor
+---
+
+refactor snackbar with solid-toast
diff --git a/apps/codeimage/src/components/Toolbar/ExportButton.tsx b/apps/codeimage/src/components/Toolbar/ExportButton.tsx
index d39c4fa4f..544b52849 100644
--- a/apps/codeimage/src/components/Toolbar/ExportButton.tsx
+++ b/apps/codeimage/src/components/Toolbar/ExportButton.tsx
@@ -15,7 +15,7 @@ import {
   SegmentedField,
   SegmentedFieldItem,
   TextField,
-  useSnackbarStore,
+  toast,
   VStack,
 } from '@codeimage/ui';
 import {useModality} from '@core/hooks/isMobile';
@@ -25,7 +25,14 @@ import {
   createOverlayTriggerState,
   OverlayContainer,
 } from '@solid-aria/overlays';
-import {Component, createEffect, createSignal, onMount, Show} from 'solid-js';
+import {
+  Component,
+  createEffect,
+  createSignal,
+  onMount,
+  Show,
+  untrack,
+} from 'solid-js';
 import {
   ExportExtension,
   ExportMode,
@@ -43,7 +50,6 @@ interface ExportButtonProps {
 
 export const ExportButton: Component<ExportButtonProps> = props => {
   let openButtonRef: HTMLButtonElement | undefined;
-  const snackbarStore = useSnackbarStore();
   const [t] = useI18n<AppLocaleEntries>();
   const modality = useModality();
   const overlayState = createOverlayTriggerState({});
@@ -62,12 +68,16 @@ export const ExportButton: Component<ExportButtonProps> = props => {
 
   createEffect(() => {
     if (data.error) {
-      snackbarStore.create({
-        closeable: true,
-        message: () => {
-          const [t] = useI18n<AppLocaleEntries>();
-          return <>{t('export.genericSaveError')}</>;
-        },
+      untrack(() => {
+        toast.error(
+          () => {
+            const [t] = useI18n<AppLocaleEntries>();
+            return <>{t('export.genericSaveError')}</>;
+          },
+          {
+            position: 'bottom-center',
+          },
+        );
       });
     }
   });
diff --git a/apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx b/apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx
index 48978b1ea..348815e39 100644
--- a/apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx
+++ b/apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx
@@ -1,6 +1,6 @@
 import {useI18n} from '@codeimage/locale';
-import {Button, useSnackbarStore} from '@codeimage/ui';
-import {Component, createEffect} from 'solid-js';
+import {Button, toast} from '@codeimage/ui';
+import {Component, createEffect, untrack} from 'solid-js';
 import {
   ExportExtension,
   ExportMode,
@@ -15,7 +15,6 @@ interface ExportButtonProps {
 }
 
 export const ExportInNewTabButton: Component<ExportButtonProps> = props => {
-  const snackbarStore = useSnackbarStore();
   const [t] = useI18n<AppLocaleEntries>();
 
   const [data, notify] = useExportImage();
@@ -39,12 +38,16 @@ export const ExportInNewTabButton: Component<ExportButtonProps> = props => {
 
   createEffect(() => {
     if (data.error) {
-      snackbarStore.create({
-        closeable: true,
-        message: () => {
-          const [t] = useI18n<AppLocaleEntries>();
-          return <>{t('export.genericSaveError')}</>;
-        },
+      untrack(() => {
+        toast.error(
+          () => {
+            const [t] = useI18n<AppLocaleEntries>();
+            return <>{t('export.genericSaveError')}</>;
+          },
+          {
+            position: 'bottom-center',
+          },
+        );
       });
     }
   });
diff --git a/apps/codeimage/src/core/hooks/async-action.ts b/apps/codeimage/src/core/hooks/async-action.ts
index a810f53fe..acd6e3f08 100644
--- a/apps/codeimage/src/core/hooks/async-action.ts
+++ b/apps/codeimage/src/core/hooks/async-action.ts
@@ -1,22 +1,21 @@
 import {
+  Accessor,
   createResource,
   createSignal,
-  from,
   mergeProps,
   Resource,
 } from 'solid-js';
-import {Observable, Subject} from 'rxjs';
 import {ResourceActions} from 'solid-js/types/reactive/signal';
 
 interface AsyncResourceActions<T, R> extends ResourceActions<R | undefined> {
-  notify: (value: T) => void;
+  notify: (value?: T) => void;
 }
 
-export function useAsyncAction<T, R>(
+export function createAsyncAction<T, R>(
   fetcher: (ref: T) => Promise<R>,
-  notifier?: Subject<T>,
+  notifier?: Accessor<T>,
 ): [Resource<R | undefined>, AsyncResourceActions<T, R | undefined>] {
-  const [internalNotifier, setNotifier] = createSignal<T | undefined>(
+  const [internalNotifier, setNotifier] = createSignal<T | symbol | undefined>(
     undefined,
     {
       equals: false,
@@ -24,13 +23,12 @@ export function useAsyncAction<T, R>(
   );
 
   const [resource, _resourceActions] = createResource(
-    (notifier instanceof Observable ? from(notifier) : notifier) ||
-      internalNotifier,
-    fetcher,
+    notifier || internalNotifier,
+    async args => fetcher(args as T),
   );
 
-  const notify = (value: T) => {
-    return setNotifier(() => value);
+  const notify = (value?: T) => {
+    return setNotifier(() => value ?? Symbol());
   };
 
   const resourceActions = mergeProps(
diff --git a/apps/codeimage/src/hooks/use-export-image.ts b/apps/codeimage/src/hooks/use-export-image.ts
index 2704784df..f98c51bb2 100644
--- a/apps/codeimage/src/hooks/use-export-image.ts
+++ b/apps/codeimage/src/hooks/use-export-image.ts
@@ -7,7 +7,7 @@ import {
   toSvg,
 } from '@codeimage/dom-export';
 import {EXPORT_EXCLUDE} from '@core/directives/exportExclude';
-import {useAsyncAction} from '@core/hooks/async-action';
+import {createAsyncAction} from '@core/hooks/async-action';
 import {useWebshare} from '@core/hooks/use-webshare';
 import {isIOS} from '@solid-primitives/platform';
 import download from 'downloadjs';
@@ -43,11 +43,13 @@ export function useExportImage(): [
   Resource<Blob | string | undefined>,
   (data: ExportImagePayload) => void,
 ] {
-  const [data, {notify}] = useAsyncAction(async (ref: ExportImagePayload) => {
-    // @bad Find another way to prevent flickering
-    await new Promise(r => setTimeout(r, 50));
-    return exportImage(ref);
-  });
+  const [data, {notify}] = createAsyncAction(
+    async (ref: ExportImagePayload) => {
+      // @bad Find another way to prevent flickering
+      await new Promise(r => setTimeout(r, 50));
+      return exportImage(ref);
+    },
+  );
 
   return [data, notify];
 }
diff --git a/apps/codeimage/src/i18n/dashboard.ts b/apps/codeimage/src/i18n/dashboard.ts
index 42fbf5e64..e422bbf90 100644
--- a/apps/codeimage/src/i18n/dashboard.ts
+++ b/apps/codeimage/src/i18n/dashboard.ts
@@ -3,6 +3,11 @@ export const dashboard = {
     dashboard: {
       myProjects: 'I miei progetti',
       new: 'Nuovo',
+      errorCreatingProject: 'Si è verificato un errore!',
+      projectCreateSuccess: 'Progetto creato con successo',
+      projectCloneSuccess: 'Progetto {{name}} clonato con successo',
+      projectDeleteSuccess: 'Il progetto {{name}} è stato eliminato',
+      projectDeleteError: 'Impossibile eliminare il progetto {{name}}',
       deleteProject: {
         dropdownLabel: 'Rimuovi',
         confirmTitle: 'Rimuovi progetto',
@@ -39,6 +44,11 @@ export const dashboard = {
     dashboard: {
       myProjects: 'My projects',
       new: 'New',
+      errorCreatingProject: 'An error occurred!',
+      projectCreateSuccess: 'Project created successfully',
+      projectCloneSuccess: 'Project {{name}} cloned successfully',
+      projectDeleteSuccess: 'Project {{name}} has been deleted',
+      projectDeleteError: 'Cannot delete project {{name}}',
       empty: {
         title: 'No projects yet',
         description:
@@ -74,6 +84,10 @@ export const dashboard = {
     dashboard: {
       myProjects: 'My projects',
       new: 'New',
+      errorCreatingProject: 'An error occurred!',
+      projectCloneSuccess: 'Project {{name}} cloned successfully',
+      projectDeleteSuccess: 'Project {{name}} has been deleted',
+      projectDeleteError: 'Cannot delete project {{name}}',
       created: 'Created',
       updated: 'Updated',
       empty: {
@@ -111,6 +125,10 @@ export const dashboard = {
       new: 'New',
       created: 'Created',
       updated: 'Updated',
+      errorCreatingProject: 'An error occurred!',
+      projectCloneSuccess: 'Project {{name}} cloned successfully',
+      projectDeleteSuccess: 'Project {{name}} has been deleted',
+      projectDeleteError: 'Cannot delete project {{name}}',
       empty: {
         title: 'No projects yet',
         description:
diff --git a/apps/codeimage/src/index.tsx b/apps/codeimage/src/index.tsx
index 5c9f1ab31..c9056ae0e 100644
--- a/apps/codeimage/src/index.tsx
+++ b/apps/codeimage/src/index.tsx
@@ -2,11 +2,16 @@ import {createI18nContext, I18nContext, useI18n} from '@codeimage/locale';
 import {getAuth0State} from '@codeimage/store/auth/auth0';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {uiStore} from '@codeimage/store/ui';
-import {backgroundColorVar, CodeImageThemeProvider} from '@codeimage/ui';
+import {
+  backgroundColorVar,
+  CodeImageThemeProvider,
+  SnackbarHost,
+} from '@codeimage/ui';
+import {ThemeProviderProps} from '@codeimage/ui/src';
 import {enableUmami} from '@core/constants/umami';
 import {OverlayProvider} from '@solid-aria/overlays';
-import {setElementVars} from '@vanilla-extract/dynamic';
 import {Router, useRoutes} from '@solidjs/router';
+import {setElementVars} from '@vanilla-extract/dynamic';
 import {
   Component,
   createEffect,
@@ -41,7 +46,7 @@ function lazyWithNoLauncher(cp: () => Promise<{default: Component<any>}>) {
   });
 }
 
-const theme: Parameters<typeof CodeImageThemeProvider>[0]['theme'] = {
+const tokens: ThemeProviderProps['tokens'] = {
   text: {
     weight: 'medium',
   },
@@ -116,7 +121,6 @@ export function Bootstrap() {
       if (scheme) {
         const color = theme === 'dark' ? darkGrayScale.gray1 : '#FFFFFF';
         scheme.setAttribute('content', color);
-        document.body.setAttribute('data-codeimage-theme', theme);
         setElementVars(document.body, {
           [backgroundColorVar]: color,
         });
@@ -126,15 +130,16 @@ export function Bootstrap() {
 
   return (
     <Scaffold>
-      <OverlayProvider>
-        <Router>
-          <CodeImageThemeProvider theme={theme}>
+      <CodeImageThemeProvider tokens={tokens} theme={uiStore.themeMode}>
+        <SnackbarHost />
+        <OverlayProvider>
+          <Router>
             <Suspense>
               <Routes />
             </Suspense>
-          </CodeImageThemeProvider>
-        </Router>
-      </OverlayProvider>
+          </Router>
+        </OverlayProvider>
+      </CodeImageThemeProvider>
       <SidebarPopoverHost />
     </Scaffold>
   );
diff --git a/apps/codeimage/src/pages/Dashboard/components/CreateNewProjectButton/CreateNewProjectButton.tsx b/apps/codeimage/src/pages/Dashboard/components/CreateNewProjectButton/CreateNewProjectButton.tsx
index 07b0de003..b05bfbfbc 100644
--- a/apps/codeimage/src/pages/Dashboard/components/CreateNewProjectButton/CreateNewProjectButton.tsx
+++ b/apps/codeimage/src/pages/Dashboard/components/CreateNewProjectButton/CreateNewProjectButton.tsx
@@ -1,6 +1,6 @@
 import {useI18n} from '@codeimage/locale';
-import {Box, Button, Loading} from '@codeimage/ui';
-import {useAsyncAction} from '@core/hooks/async-action';
+import {Box, Button, Loading, toast} from '@codeimage/ui';
+import {createAsyncAction} from '@core/hooks/async-action';
 import {useNavigate} from '@solidjs/router';
 import {Show} from 'solid-js';
 import {PlusIcon} from '../../../../components/Icons/PlusIcon';
@@ -11,16 +11,31 @@ export function CreateNewProjectButton() {
   const navigate = useNavigate();
   const dashboard = getDashboardState()!;
   const [t] = useI18n<AppLocaleEntries>();
-  const [data, {notify}] = useAsyncAction(createNew);
+  const [data, {notify}] = createAsyncAction(createNew);
 
   async function createNew() {
-    const result = await dashboard?.createNewProject();
-    if (!result) return;
-    navigate(`/${result.id}`);
+    try {
+      const result = await dashboard?.createNewProject();
+      if (!result) return;
+      toast.success(t('dashboard.projectCreateSuccess'), {
+        position: 'bottom-center',
+        duration: 100000,
+      });
+      navigate(`/${result.id}`);
+    } catch (e) {
+      toast.error(t('dashboard.errorCreatingProject'));
+    }
   }
 
   return (
-    <Button theme="primary" variant="solid" onClick={() => notify(0)}>
+    <Button
+      theme="primary"
+      variant="solid"
+      onClick={() => {
+        notify();
+        console.log('notify');
+      }}
+    >
       <Show when={data.loading} fallback={<PlusIcon size={'sm'} />}>
         <Loading size={'sm'} />
       </Show>
diff --git a/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx b/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx
index fcc1f0a6f..1ab4d480f 100644
--- a/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx
+++ b/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx
@@ -10,6 +10,7 @@ import {
   IconButton,
   MenuButton,
   Text,
+  toast,
 } from '@codeimage/ui';
 import {highlight as _highlight} from '@core/directives/highlight';
 import {formatDistanceToNow} from '@core/helpers/date';
@@ -59,6 +60,38 @@ export function ProjectItem(props: VoidProps<ProjectItemProps>) {
     );
   };
 
+  async function clone() {
+    try {
+      const result = await dashboard.cloneProject(props.item);
+      if (!result) throw new Error('Error');
+      toast.success(
+        t('dashboard.projectCloneSuccess', {name: props.item.name}),
+        {
+          position: 'bottom-center',
+        },
+      );
+      navigate(`/${result.id}`);
+    } catch (e) {
+      toast.error(t('dashboard.errorCreatingProject'));
+    }
+  }
+
+  async function deleteConfirm() {
+    const oldData = dashboard.data.latest ?? [];
+    try {
+      await dashboard?.deleteProject(props.item.id);
+      toast.success(
+        t('dashboard.projectCloneSuccess', {name: props.item.name}),
+        {
+          position: 'bottom-center',
+        },
+      );
+    } catch (e) {
+      toast.error(t('dashboard.errorCreatingProject'));
+      dashboard.mutateData(oldData);
+    }
+  }
+
   return (
     <li class={styles.item}>
       <Link class={styles.itemLink} href={`/${props.item.id}`} />
@@ -85,7 +118,7 @@ export function ProjectItem(props: VoidProps<ProjectItemProps>) {
                   title: t('dashboard.deleteProject.confirmTitle'),
                   message: t('dashboard.deleteProject.confirmMessage'),
                   onConfirm: () => {
-                    dashboard?.deleteProject(props.item.id);
+                    deleteConfirm();
                     state.close();
                   },
                   actionType: 'danger' as const,
@@ -107,9 +140,7 @@ export function ProjectItem(props: VoidProps<ProjectItemProps>) {
                 }));
               }
               if (action === 'clone') {
-                dashboard
-                  .cloneProject(props.item)
-                  ?.then(result => navigate(`/${result.id}`));
+                clone();
               }
             }}
           >
diff --git a/apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.tsx b/apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.tsx
index 2ecd29744..013e81938 100644
--- a/apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.tsx
+++ b/apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.tsx
@@ -42,7 +42,7 @@ export function ProjectList() {
           fallback={() => <ProjectEmptyListMessage />}
         >
           <ul class={styles.gridList}>
-            <For each={dashboard.filteredData()}>
+            <For each={dashboard.filteredData().splice(0, 20)}>
               {item => <ProjectItem item={item} />}
             </For>
           </ul>
diff --git a/apps/codeimage/src/pages/Editor/components/EditorReadOnlyBanner.tsx b/apps/codeimage/src/pages/Editor/components/EditorReadOnlyBanner.tsx
index 4aefbaf44..ac70c024b 100644
--- a/apps/codeimage/src/pages/Editor/components/EditorReadOnlyBanner.tsx
+++ b/apps/codeimage/src/pages/Editor/components/EditorReadOnlyBanner.tsx
@@ -1,6 +1,6 @@
 import {useI18n} from '@codeimage/locale';
 import {Box, Button, Text} from '@codeimage/ui';
-import {useAsyncAction} from '@core/hooks/async-action';
+import {createAsyncAction} from '@core/hooks/async-action';
 import {VoidProps} from 'solid-js';
 import {HintIcon} from '../../../components/Icons/Hint';
 import {AppLocaleEntries} from '../../../i18n';
@@ -13,7 +13,7 @@ interface EditorReadOnlyBannerProps {
 export function EditorReadOnlyBanner(
   props: VoidProps<EditorReadOnlyBannerProps>,
 ) {
-  const [cloneAction, {notify: onClone}] = useAsyncAction(() =>
+  const [cloneAction, {notify: onClone}] = createAsyncAction(() =>
     props.onClone(),
   );
 
diff --git a/apps/codeimage/src/state/effects/onCopyToClipboard.tsx b/apps/codeimage/src/state/effects/onCopyToClipboard.tsx
index 5d0dcb0dc..fcc3bd39f 100644
--- a/apps/codeimage/src/state/effects/onCopyToClipboard.tsx
+++ b/apps/codeimage/src/state/effects/onCopyToClipboard.tsx
@@ -1,9 +1,8 @@
 import {useI18n} from '@codeimage/locale';
-import {Box, HStack, useSnackbarStore} from '@codeimage/ui';
-import {InvertedThemeWrapper} from '@ui/InvertedThemeWrapper/InvertedThemeWrapper';
+import {getInvertedThemeMode} from '@codeimage/store/ui';
+import {toast} from '@codeimage/ui';
 import {
   catchError,
-  delay,
   EMPTY,
   exhaustMap,
   from,
@@ -12,7 +11,6 @@ import {
   tap,
 } from 'rxjs';
 import {createRoot, getOwner, runWithOwner} from 'solid-js';
-import {CheckCircle} from '../../components/Icons/CheckCircle';
 import {
   ExportExtension,
   exportImage,
@@ -57,10 +55,9 @@ createRoot(() => {
                 ),
               ]),
             ).pipe(
-              catchError(() => EMPTY),
               tap(() => runWithOwner(owner, openSnackbar)),
+              catchError(() => EMPTY),
               tap(() => umami.trackEvent('true', `copy-to-clipboard`)),
-              delay(1000),
             );
           }),
         );
@@ -70,21 +67,14 @@ createRoot(() => {
 });
 
 function openSnackbar(): void {
-  const snackbarStore = useSnackbarStore();
-  const snackbar = snackbarStore.create({
-    closeable: true,
-    wrapper: InvertedThemeWrapper,
-    message: () => {
+  toast.success(
+    () => {
       const [t] = useI18n<AppLocaleEntries>();
-      return (
-        <HStack alignItems={'center'} spacing={'2'}>
-          <Box color={'primary'} display={'flex'} alignItems={'center'}>
-            <CheckCircle />
-          </Box>
-          {t('canvas.copiedToClipboard')}
-        </HStack>
-      );
+      return t('canvas.copiedToClipboard');
+    },
+    {
+      position: 'bottom-center',
+      theme: getInvertedThemeMode(),
     },
-  });
-  setTimeout(() => snackbarStore.remove(snackbar), 2500);
+  );
 }
diff --git a/apps/codeimage/src/state/ui.ts b/apps/codeimage/src/state/ui.ts
index 9ea4131f8..88cbd6fcc 100644
--- a/apps/codeimage/src/state/ui.ts
+++ b/apps/codeimage/src/state/ui.ts
@@ -16,6 +16,10 @@ export const [uiStore, setUiStore] = createPluggableStore(
   withLocalStorage({name: '@store/ui'}),
 );
 
+export function getInvertedThemeMode() {
+  return uiStore.themeMode === 'light' ? 'dark' : 'light';
+}
+
 export function setLocale(locale: string): void {
   setUiStore('locale', () => locale);
 }
diff --git a/apps/codeimage/src/theme/dark-theme.css.ts b/apps/codeimage/src/theme/dark-theme.css.ts
index 3a67e54fa..bfc2c9c70 100644
--- a/apps/codeimage/src/theme/dark-theme.css.ts
+++ b/apps/codeimage/src/theme/dark-theme.css.ts
@@ -89,7 +89,7 @@ createGlobalTheme('[data-codeimage-theme="dark"]', themeColors, {
   },
 
   snackbar: {
-    backgroundColor: '#1a1a1a',
+    backgroundColor: darkGrayScale.gray5,
     textColor: themeVars.backgroundColor.white,
   },
 
diff --git a/apps/codeimage/src/ui/InvertedThemeWrapper/InvertedThemeWrapper.tsx b/apps/codeimage/src/ui/InvertedThemeWrapper/InvertedThemeWrapper.tsx
deleted file mode 100644
index 848695756..000000000
--- a/apps/codeimage/src/ui/InvertedThemeWrapper/InvertedThemeWrapper.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {uiStore} from '@codeimage/store/ui';
-import {ParentProps} from 'solid-js';
-
-export function InvertedThemeWrapper(props: ParentProps) {
-  const mode = uiStore.themeMode;
-  return (
-    <div data-codeimage-theme={mode === 'light' ? 'dark' : 'light'}>
-      {props.children}
-    </div>
-  );
-}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4aecb54c6..eb5ce7d46 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -73,6 +73,7 @@
     "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "solid-headless": "^0.11.1",
+    "solid-toast": "^0.3.4",
     "solid-use": "^0.5.0"
   },
   "devDependencies": {
diff --git a/packages/ui/src/lib/primitives/Button/Button.tsx b/packages/ui/src/lib/primitives/Button/Button.tsx
index b0d2a9d23..fae3412d3 100644
--- a/packages/ui/src/lib/primitives/Button/Button.tsx
+++ b/packages/ui/src/lib/primitives/Button/Button.tsx
@@ -1,7 +1,6 @@
 import {elements} from '@solid-primitives/refs';
 import clsx from 'clsx';
-import {Button as ShButton} from 'solid-headless';
-import {ButtonProps as ShButtonProps} from 'solid-headless/dist/types/components/Button';
+import {Button as ShButton, ButtonProps as ShButtonProps} from 'solid-headless';
 import {ValidConstructor} from 'solid-headless/dist/types/utils/dynamic-prop';
 import {children, JSXElement, ParentProps, Show} from 'solid-js';
 import {omitProps} from 'solid-use';
diff --git a/packages/ui/src/lib/primitives/Snackbar/Snackbar.css.ts b/packages/ui/src/lib/primitives/Snackbar/Snackbar.css.ts
index 7a9d7360c..e251cb078 100644
--- a/packages/ui/src/lib/primitives/Snackbar/Snackbar.css.ts
+++ b/packages/ui/src/lib/primitives/Snackbar/Snackbar.css.ts
@@ -5,10 +5,10 @@ export const snackbar = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  backgroundColor: themeVars.dynamicColors.snackbar.backgroundColor,
-  color: themeVars.dynamicColors.snackbar.textColor,
-  borderRadius: themeVars.borderRadius.xl,
-  padding: themeVars.spacing['3'],
+  backgroundColor: `${themeVars.dynamicColors.snackbar.backgroundColor}!important`,
+  color: `${themeVars.dynamicColors.snackbar.textColor}!important`,
+  borderRadius: `${themeVars.borderRadius.xl}!important`,
+  padding: `${themeVars.spacing['3']}!important`,
 });
 
 export const hostWrapper = style({
diff --git a/packages/ui/src/lib/primitives/Snackbar/Snackbar.tsx b/packages/ui/src/lib/primitives/Snackbar/Snackbar.tsx
index ad0678209..ef395d243 100644
--- a/packages/ui/src/lib/primitives/Snackbar/Snackbar.tsx
+++ b/packages/ui/src/lib/primitives/Snackbar/Snackbar.tsx
@@ -1,18 +1,16 @@
 import clsx from 'clsx';
-import {createSignal, JSX, Show} from 'solid-js';
 import {Toast} from 'solid-headless';
-import {SnackbarData} from './SnackbarHost';
-import * as styles from './Snackbar.css';
+import {createSignal, JSX, Show} from 'solid-js';
 import {Dynamic} from 'solid-js/web';
-import {FadeInOutWithScaleTransition} from '../Transition';
 import {Box} from '../Box';
-import {Text} from '../Text';
 import {Button} from '../Button';
 import {SvgIcon} from '../Icon';
-import {useSnackbarStore} from './snackbar.store';
+import {Text} from '../Text';
+import {FadeInOutWithScaleTransition} from '../Transition';
+import * as styles from './Snackbar.css';
+import {SnackbarData, toast} from './SnackbarHost';
 
 export function SnackBar(props: SnackbarData & {id: string}): JSX.Element {
-  const store = useSnackbarStore();
   const [isOpen, setIsOpen] = createSignal(true);
 
   function dismiss() {
@@ -22,7 +20,7 @@ export function SnackBar(props: SnackbarData & {id: string}): JSX.Element {
   return (
     <FadeInOutWithScaleTransition
       show={isOpen()}
-      afterLeave={() => store.remove(props.id)}
+      afterLeave={() => toast.remove(props.id)}
     >
       <Box as={props.wrapper ?? 'div'}>
         <Toast class={clsx(styles.snackbar)}>
diff --git a/packages/ui/src/lib/primitives/Snackbar/SnackbarHost.tsx b/packages/ui/src/lib/primitives/Snackbar/SnackbarHost.tsx
index c0f0b8e8e..4e94085ac 100644
--- a/packages/ui/src/lib/primitives/Snackbar/SnackbarHost.tsx
+++ b/packages/ui/src/lib/primitives/Snackbar/SnackbarHost.tsx
@@ -1,10 +1,7 @@
-import {Toaster, Transition} from 'solid-headless';
-import {Component, createMemo, For} from 'solid-js';
-import {SnackBar} from './Snackbar';
+import {Component} from 'solid-js';
+import {toast as $toast, Toaster as ToasterV2, ToastHandler} from 'solid-toast';
+import {AugmentedToastHandler, createPatch} from './patch-solid-toast';
 import * as styles from './Snackbar.css';
-import {host} from './Snackbar.css';
-import {PortalHostContext} from '../PortalHost';
-import {useSnackbar} from './snackbar.store';
 
 export interface SnackbarData {
   message: string | Component;
@@ -13,43 +10,30 @@ export interface SnackbarData {
   wrapper?: Component;
 }
 
-export const SnackbarHost = () => {
-  const [_snackbars, store] = useSnackbar();
-  const snackbars = createMemo(_snackbars);
-
-  function clearNotifications() {
-    store.clear();
-  }
+let toast: {
+  success: AugmentedToastHandler;
+  error: AugmentedToastHandler;
+  custom: typeof $toast['custom'];
+  default: ToastHandler;
+  remove: typeof $toast['remove'];
+};
 
+export function SnackbarHost() {
+  toast = {
+    success: createPatch($toast, 'success'),
+    error: createPatch($toast, 'error'),
+    custom: $toast.custom,
+    default: $toast,
+    remove: $toast.remove,
+  };
   return (
-    <PortalHostContext>
-      <Toaster class={styles.hostWrapper}>
-        <Transition
-          show={snackbars().length > 0}
-          class="relative transition"
-          enter="ease-out duration-300"
-          enterFrom="opacity-0 scale-50 translate-y-full"
-          enterTo="opacity-100 scale-100 translate-y-0"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100 scale-100 translate-y-0"
-          leaveTo="opacity-0 scale-50 translate-y-full"
-          afterLeave={clearNotifications}
-        >
-          <div class={host}>
-            <For each={snackbars()}>
-              {item => (
-                <SnackBar
-                  id={item.id}
-                  message={item.data.message}
-                  closeable={item.data.closeable}
-                  actions={item.data.actions}
-                  wrapper={item.data.wrapper}
-                />
-              )}
-            </For>
-          </div>
-        </Transition>
-      </Toaster>
-    </PortalHostContext>
+    <ToasterV2
+      toastOptions={{
+        className: styles.snackbar,
+        style: {},
+      }}
+    />
   );
-};
+}
+
+export {toast};
diff --git a/packages/ui/src/lib/primitives/Snackbar/index.ts b/packages/ui/src/lib/primitives/Snackbar/index.ts
index 6fcfb8ec4..f13368054 100644
--- a/packages/ui/src/lib/primitives/Snackbar/index.ts
+++ b/packages/ui/src/lib/primitives/Snackbar/index.ts
@@ -1,3 +1,2 @@
 export * from './Snackbar';
 export * from './SnackbarHost';
-export * from './snackbar.store';
diff --git a/packages/ui/src/lib/primitives/Snackbar/patch-solid-toast.ts b/packages/ui/src/lib/primitives/Snackbar/patch-solid-toast.ts
new file mode 100644
index 000000000..21351b5fb
--- /dev/null
+++ b/packages/ui/src/lib/primitives/Snackbar/patch-solid-toast.ts
@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import {createUniqueId} from 'solid-js';
+import {Message, toast, ToastHandler, ToastOptions} from 'solid-toast';
+import * as styles from './Snackbar.css';
+
+interface AugmentedOptions extends ToastOptions {
+  theme: string;
+}
+
+export type AugmentedToastHandler = (
+  message: Message,
+  options: AugmentedOptions,
+) => string;
+
+export function createPatch(_toast: typeof toast, key: keyof typeof toast) {
+  const old = _toast[key] as ToastHandler;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (toast as any)[key] = (message: Message, options: AugmentedOptions) => {
+    if (options?.theme) {
+      const id = createUniqueId();
+      options.id = id;
+      options.className = clsx(options.className, options.id);
+      queueMicrotask(() => {
+        document
+          .querySelector(`.${id}`)
+          ?.setAttribute('data-codeimage-theme', options.theme);
+      });
+    }
+    if (options?.className) {
+      options.className = clsx(options.className, styles.snackbar);
+    }
+
+    return old(message, options);
+  };
+
+  return toast[key] as AugmentedToastHandler;
+}
diff --git a/packages/ui/src/lib/primitives/Snackbar/snackbar.store.ts b/packages/ui/src/lib/primitives/Snackbar/snackbar.store.ts
deleted file mode 100644
index 4e5e7a008..000000000
--- a/packages/ui/src/lib/primitives/Snackbar/snackbar.store.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {ToastData, ToasterStore, useToaster} from 'solid-headless';
-import {SnackbarData} from './SnackbarHost';
-import {Accessor} from 'solid-js';
-
-const snackbarStore = new ToasterStore<SnackbarData>();
-
-export function useSnackbarStore() {
-  return snackbarStore;
-}
-
-export function useSnackbar(): [
-  snackbars: Accessor<readonly ToastData<SnackbarData>[]>,
-  store: ToasterStore<SnackbarData>,
-] {
-  const store = useSnackbarStore();
-  const snackbars = useToaster(store);
-  return [snackbars, snackbarStore];
-}
diff --git a/packages/ui/src/lib/primitives/Text/Text.tsx b/packages/ui/src/lib/primitives/Text/Text.tsx
index 13301d41f..ff7308b39 100644
--- a/packages/ui/src/lib/primitives/Text/Text.tsx
+++ b/packages/ui/src/lib/primitives/Text/Text.tsx
@@ -25,7 +25,7 @@ export type TextProps<T extends ValidConstructor = 'span'> = {
 export function Text<T extends ValidConstructor = 'span'>(
   props: ParentProps<TextProps<T>>,
 ): JSXElement {
-  const baseTheme = useTheme().text;
+  const baseTheme = useTheme().tokens.text;
   const defaultProps = {weight: baseTheme.weight, size: baseTheme.size};
   const propsWithDefault = mergeProps(defaultProps, props);
 
diff --git a/packages/ui/src/lib/primitives/index.ts b/packages/ui/src/lib/primitives/index.ts
index 302f16974..2dacf3d35 100644
--- a/packages/ui/src/lib/primitives/index.ts
+++ b/packages/ui/src/lib/primitives/index.ts
@@ -55,13 +55,7 @@ export {SvgIcon, type SvgIconProps, RemoteSvgIcon} from './Icon';
 
 export {PortalHost, PortalHostContext} from './PortalHost';
 
-export {
-  useSnackbar,
-  useSnackbarStore,
-  SnackBar,
-  SnackbarHost,
-  type SnackbarData,
-} from './Snackbar';
+export {SnackBar, SnackbarHost, toast, type SnackbarData} from './Snackbar';
 
 export {
   Loading,
diff --git a/packages/ui/src/lib/tokens/tokens.tsx b/packages/ui/src/lib/tokens/tokens.tsx
index 432cff11a..69fb70362 100644
--- a/packages/ui/src/lib/tokens/tokens.tsx
+++ b/packages/ui/src/lib/tokens/tokens.tsx
@@ -1,4 +1,10 @@
-import {createContext, PropsWithChildren, useContext} from 'solid-js';
+import {
+  Accessor,
+  createContext,
+  createEffect,
+  ParentProps,
+  useContext,
+} from 'solid-js';
 import * as styles from '../primitives/Text/Text.css';
 
 export interface TextThemeTokens {
@@ -10,24 +16,46 @@ interface BaseThemeTokens {
   text: TextThemeTokens;
 }
 
-const ThemeTokensContext = createContext<BaseThemeTokens>();
+interface ThemeContext {
+  tokens: BaseThemeTokens;
+  theme: Accessor<string>;
+}
+
+const ThemeTokensContext = createContext<ThemeContext>();
+
+export interface ThemeProviderProps {
+  tokens: Partial<BaseThemeTokens>;
+  theme?: string;
+}
 
-export function CodeImageThemeProvider(
-  props: PropsWithChildren<{theme: Partial<BaseThemeTokens>}>,
-) {
-  const componentsTheme: BaseThemeTokens = {
+export function CodeImageThemeProvider(props: ParentProps<ThemeProviderProps>) {
+  const tokens: BaseThemeTokens = {
     // eslint-disable-next-line solid/reactivity
-    text: props.theme.text ?? {},
+    text: props.tokens.text ?? {},
   };
 
+  const theme = () => props.theme ?? 'dark';
+
+  createEffect(() => {
+    document.documentElement.setAttribute(
+      'data-codeimage-theme',
+      props.theme ?? 'dark',
+    );
+  });
+
   return (
-    <ThemeTokensContext.Provider value={componentsTheme}>
+    <ThemeTokensContext.Provider
+      value={{
+        theme,
+        tokens,
+      }}
+    >
       {props.children}
     </ThemeTokensContext.Provider>
   );
 }
 
-export function useTheme(): BaseThemeTokens {
+export function useTheme(): ThemeContext {
   const context = useContext(ThemeTokensContext);
   if (!context) {
     throw new Error('CodeImage theme provider is not registered');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e19247d1..036fc6cbc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -493,6 +493,7 @@ importers:
       rollup-preset-solid: ^1.4.0
       solid-headless: ^0.11.1
       solid-js: ^1.5.1
+      solid-toast: ^0.3.4
       solid-use: ^0.5.0
       tiny-glob: ^0.2.9
       typescript: ^4.8.2
@@ -528,6 +529,7 @@ importers:
       clsx: 1.2.1
       csstype: 3.1.0
       solid-headless: 0.11.1_solid-js@1.5.1
+      solid-toast: 0.3.4_solid-js@1.5.1
       solid-use: 0.5.0_solid-js@1.5.1
     devDependencies:
       '@types/node': 18.7.13
@@ -9727,6 +9729,14 @@ packages:
       solid-js: 1.5.1
     dev: true
 
+  /solid-toast/0.3.4_solid-js@1.5.1:
+    resolution: {integrity: sha512-f4eXJPTlcPPNYW8hgN6NslvA8tqGF07TLX2smX0lDbVbsY7vrbwFIM2rUNbhPpFz5gzVOit0iDfFSYpXUZfJeg==}
+    peerDependencies:
+      solid-js: ^1.4.2
+    dependencies:
+      solid-js: 1.5.1
+    dev: false
+
   /solid-use/0.4.3_solid-js@1.5.1:
     resolution: {integrity: sha512-ap+PoOTIc6nOa3KbSpCX35kOs08PJZ7EPhjXMpyhJmQXa78fETaBTU0R4Ki+UDkbWGMNCEPXfD7GnsS25mYGJw==}
     engines: {node: '>=10'}