diff --git a/library/package.json b/library/package.json
index e75cc64..4fbc15a 100644
--- a/library/package.json
+++ b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pheralb/toast",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "author": "@pheralb_",
   "keywords": [
     "react",
diff --git a/library/src/components/toast-functions.ts b/library/src/components/toast-functions.ts
index a8886a1..6774aaf 100644
--- a/library/src/components/toast-functions.ts
+++ b/library/src/components/toast-functions.ts
@@ -1,20 +1,33 @@
-import { ToastPropsWithVariant } from '../types/toast.types';
+import type { ToastPropsWithVariant } from '../types/toast.types';
 import { openToast } from './toaster';
 
-export const toast = {
+interface ToastFunctions {
+  default: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  success: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  error: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  warning: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+  info: (data: ToastPropsWithVariant) => ToastPropsWithVariant;
+}
+
+export const toast: ToastFunctions = {
   default: (data: ToastPropsWithVariant) => {
     openToast({ ...data });
+    return data;
   },
   success: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'success' });
+    return data;
   },
   error: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'error' });
+    return data;
   },
   warning: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'warning' });
+    return data;
   },
   info: (data: ToastPropsWithVariant) => {
     openToast({ ...data, variant: 'info' });
+    return data;
   },
 };
diff --git a/library/src/components/toaster.tsx b/library/src/components/toaster.tsx
index d9ff1cf..a978be1 100644
--- a/library/src/components/toaster.tsx
+++ b/library/src/components/toaster.tsx
@@ -86,4 +86,6 @@ export const Toaster = ({
   );
 };
 
-export const openToast = (data: ToastPropsWithVariant) => openToastGlobal(data);
+export const openToast = (data: ToastPropsWithVariant): void => {
+  openToastGlobal(data);
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5117168..aaff837 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9341,7 +9341,7 @@ snapshots:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -9381,16 +9381,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.5.2)
-      eslint: 8.57.0
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
diff --git a/website/app/root.tsx b/website/app/root.tsx
index 705d808..0a8fd63 100644
--- a/website/app/root.tsx
+++ b/website/app/root.tsx
@@ -1,19 +1,17 @@
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  MetaFunction,
+import {
+  type LinksFunction,
+  type LoaderFunctionArgs,
+  type MetaFunction,
 } from '@vercel/remix';
+import type { ReactNode } from 'react';
 
 import {
-  isRouteErrorResponse,
-  Link,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useLoaderData,
-  useRouteError,
 } from '@remix-run/react';
 import { getLatestVersion } from 'fast-npm-meta';
 import { eslogan, siteTitle, siteUrl, siteUrlImages } from './globals';
@@ -31,10 +29,10 @@ import { proseClasses } from './ui/prose';
 import { Toaster } from '@pheralb/toast';
 import {
   PreventFlashOnWrongTheme,
+  Theme,
   ThemeProvider,
   useTheme,
 } from 'remix-themes';
-import { themeSessionResolver } from './sessions.server';
 
 // MDX Components:
 import { MDXProvider } from '@mdx-js/react';
@@ -42,10 +40,7 @@ import { mdxComponents } from './components/mdx';
 
 // Stores:
 import { useDocsStore } from './store';
-
-// Other:
-import { Logo } from './components/icons';
-import { buttonVariants } from './ui/button';
+import { themeSessionResolver } from './sessions.server';
 
 // Links:
 export const links: LinksFunction = () => [
@@ -97,6 +92,7 @@ export const meta: MetaFunction = ({ matches }) => {
   ];
 };
 
+// Get theme from loader:
 export async function loader({ request }: LoaderFunctionArgs) {
   const { getTheme } = await themeSessionResolver(request);
   const metadata = await getLatestVersion('@pheralb/toast');
@@ -106,21 +102,18 @@ export async function loader({ request }: LoaderFunctionArgs) {
   };
 }
 
-export default function AppWithProviders() {
-  const data = useLoaderData<typeof loader>();
-  return (
-    <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
-      <App />
-    </ThemeProvider>
-  );
-}
-
-function App() {
+// App global layout:
+function Layout({ children }: { children: ReactNode }) {
   const data = useLoaderData<typeof loader>();
   const [theme] = useTheme();
   const { toastPosition, toastTheme } = useDocsStore();
   return (
-    <html lang="en" className={cn(theme, 'scroll-smooth focus:scroll-auto')}>
+    <html
+      lang="en"
+      data-theme={theme}
+      className={cn(theme ?? '', 'scroll-smooth focus:scroll-auto')}
+      style={{ colorScheme: theme ?? '' }}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -149,10 +142,11 @@ function App() {
         <meta name="twitter:title" content={siteTitle} />
         {/* App Meta Function */}
         <Meta />
-        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
+        <PreventFlashOnWrongTheme ssrTheme={Boolean(data?.theme)} />
         <Links />
       </head>
       <body
+        suppressHydrationWarning
         className={cn(
           'font-sans antialiased',
           'bg-neutral-50 dark:bg-neutral-900',
@@ -171,7 +165,7 @@ function App() {
                 proseClasses,
               )}
             >
-              <Outlet />
+              {children}
             </article>
           </MDXProvider>
         </main>
@@ -187,35 +181,39 @@ function App() {
   );
 }
 
+// App with providers:
+function AppWithProviders({ children }: { children: ReactNode }) {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <ThemeProvider
+      specifiedTheme={data?.theme as Theme}
+      themeAction="/action/set-theme"
+    >
+      <Layout>{children}</Layout>
+    </ThemeProvider>
+  );
+}
+
+export default function App() {
+  return (
+    <AppWithProviders>
+      <Outlet />
+    </AppWithProviders>
+  );
+}
+
 export function ErrorBoundary() {
-  const error = useRouteError();
   return (
-    <html lang="en" className="dark">
-      <head>
-        <title>Oops! - @pheralb/toast</title>
-        <Meta />
-        <Links />
-      </head>
-      <body className="flex h-screen flex-col items-center justify-center space-y-4 bg-neutral-900 font-sans text-white">
-        <Logo className="h-12 w-12" />
-        <h1 className="text-2xl font-medium tracking-tight">
-          {isRouteErrorResponse(error)
-            ? `${error.status} ${error.statusText}`
-            : error instanceof Error
-              ? error.message
-              : 'Unknown Error'}
-        </h1>
-        <Link
-          to="/"
-          className={buttonVariants({
-            variant: 'outline',
-          })}
-        >
-          Go back home
-        </Link>
-        <p className="font-mono text-sm">@pheralb/toast</p>
-        <Scripts />
-      </body>
-    </html>
+    <AppWithProviders>
+      <h2>Error</h2>
+    </AppWithProviders>
+  );
+}
+
+export function HydrateFallback() {
+  return (
+    <AppWithProviders>
+      <h1>Loading...</h1>
+    </AppWithProviders>
   );
 }
diff --git a/website/app/routes/action.set-theme.ts b/website/app/routes/action.set-theme.ts
index 631edb9..f1d6b64 100644
--- a/website/app/routes/action.set-theme.ts
+++ b/website/app/routes/action.set-theme.ts
@@ -1,4 +1,5 @@
+import { unstable_defineAction as defineAction } from '@vercel/remix';
 import { createThemeAction } from 'remix-themes';
 import { themeSessionResolver } from '@/sessions.server';
 
-export const action = createThemeAction(themeSessionResolver);
+export const action = defineAction(createThemeAction(themeSessionResolver));