diff --git a/dev/src/App.tsx b/dev/src/App.tsx
index c2d724c..79d9461 100644
--- a/dev/src/App.tsx
+++ b/dev/src/App.tsx
@@ -4,63 +4,85 @@ import toast, { Toaster } from '../../src';
 const makePromise = (): Promise<string> => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      const toss = Math.random()
-      if (toss > 0.5) resolve('Successful!')
-      reject('Something went wrong!')
-    }, 2000)
-  })
-}
+      const toss = Math.random();
+      if (toss > 0.5) resolve('Successful!');
+      reject('Something went wrong!');
+    }, 2000);
+  });
+};
 
 const App: Component = () => {
   const popBlank = () => toast('Blank Toast');
   const popSuccess = () => toast.success('Success!', { duration: Infinity });
   const popError = () => toast.error('Error!', { duration: Infinity });
   const popLoading = () => toast.loading('Loading...');
-  const popPromise = () => toast.promise(makePromise(), {
-    loading: <span class="promise-txt">Loading Promise</span>,
-    success: msg => <span class="promise-txt">{msg}</span>,
-    error: err => <span class="promise-txt">{err}</span>
-  });
-  const popCustom = () => toast.success('Add Custom Styles', {
-    iconTheme: {
-      primary: '#ea580c',
-      secondary: '#ffedd5'
-    },
-    className: "border-2 border-orange-800",
-    style: {
-      color: '#c2410c',
-      background: '#ffedd5'
-    },
-    duration: Infinity
-  });
-  const popTimer = () => toast.custom((t) => {
-    const [life, setLife] = createSignal(100)
-    
-    createEffect(() => {
-      if (t.paused) return; 
-      const interval = setInterval(() => {
-        console.log(t.paused)
-        setLife(l => l - 0.5)
-      }, 10)
+  const popPromise = () =>
+    toast.promise(makePromise(), {
+      loading: <span class="promise-txt">Loading Promise</span>,
+      success: (msg) => <span class="promise-txt">{msg}</span>,
+      error: (err) => <span class="promise-txt">{err}</span>,
+    });
+  const popCustom = () =>
+    toast.success('Add Custom Styles', {
+      iconTheme: {
+        primary: '#ea580c',
+        secondary: '#ffedd5',
+      },
+      className: 'border-2 border-orange-800',
+      style: {
+        color: '#c2410c',
+        background: '#ffedd5',
+      },
+      duration: Infinity,
+    });
+  const popTimer = () =>
+    toast.custom(
+      (t) => {
+        const [life, setLife] = createSignal(100);
 
-      onCleanup(() => clearInterval(interval))
-    })
+        createEffect(() => {
+          if (t.paused) return;
+          const interval = setInterval(() => {
+            console.log(t.paused);
+            setLife((l) => l - 0.5);
+          }, 10);
 
-    return (
-      <div class="bg-pink-100 shadow-md px-4 py-3 rounded overflow-hidden relative text-pink-700">
-        <div style={{width: `${life()}%`}} class="bg-pink-200 h-full absolute top-0 left-0" ></div>
-        <span class="relative" >Timer In The Background</span>
-      </div>
-    )
-  }, {
-    duration: 2000,
-    unmountDelay: 1000
-  });
+          onCleanup(() => clearInterval(interval));
+        });
+
+        return (
+          <div class="bg-pink-100 shadow-md px-4 py-3 rounded overflow-hidden relative text-pink-700">
+            <div style={{ width: `${life()}%` }} class="bg-pink-200 h-full absolute top-0 left-0"></div>
+            <span class="relative">Timer In The Background</span>
+          </div>
+        );
+      },
+      {
+        duration: 2000,
+        unmountDelay: 1000,
+      }
+    );
+
+  const [toggle, setToggle] = createSignal(false);
 
   const closeAll = () => toast.dismiss();
   return (
     <div class="px-6">
-      <Toaster position="top-center" />
+      <Toaster
+        position="top-center"
+        toastOptions={{
+          iconTheme: toggle()
+            ? {
+                primary: '#ea580c',
+                secondary: '#ffedd5',
+              }
+            : {
+                primary: '#5858ff',
+                secondary: '#ffedd5',
+              },
+        }}
+      />
+      <button onClick={() => setToggle((t) => !t)}>Toggle Theme</button>
       <h1>Solid Toast Examples</h1>
       <div
         style={{
@@ -70,15 +92,30 @@ const App: Component = () => {
           gap: '0.5rem',
         }}
       >
-        <button class={"blank"}   onClick={popBlank}>Blank Toast</button>
-        <button class={"success"} onClick={popSuccess}>Success Toast</button>
-        <button class={"error"}   onClick={popError}>Error Toast</button>
-        <button class={"loading"} onClick={popLoading}>Loading Toast</button>
-        <button class={"promise"} onClick={popPromise}>Promise Toast</button>
-        <button class={"custom"} onClick={popCustom}>Custom Styles</button>
-        <button class={"timer"}   onClick={popTimer}>Toast Timer</button>
-        <button class={"close"}   onClick={closeAll}>Close all toasts</button>
-        
+        <button class={'blank'} onClick={popBlank}>
+          Blank Toast
+        </button>
+        <button class={'success'} onClick={popSuccess}>
+          Success Toast
+        </button>
+        <button class={'error'} onClick={popError}>
+          Error Toast
+        </button>
+        <button class={'loading'} onClick={popLoading}>
+          Loading Toast
+        </button>
+        <button class={'promise'} onClick={popPromise}>
+          Promise Toast
+        </button>
+        <button class={'custom'} onClick={popCustom}>
+          Custom Styles
+        </button>
+        <button class={'timer'} onClick={popTimer}>
+          Toast Timer
+        </button>
+        <button class={'close'} onClick={closeAll}>
+          Close all toasts
+        </button>
       </div>
     </div>
   );
diff --git a/src/components/ToastBar.tsx b/src/components/ToastBar.tsx
index 0be57c0..76935ae 100644
--- a/src/components/ToastBar.tsx
+++ b/src/components/ToastBar.tsx
@@ -18,7 +18,7 @@ export const ToastBar: Component<ToastBarProps> = (props) => {
         {
           duration: 350,
           fill: 'forwards',
-          easing: 'cubic-bezier(.21,1.02,.73,1)'
+          easing: 'cubic-bezier(.21,1.02,.73,1)',
         }
       );
     } else {
@@ -30,7 +30,7 @@ export const ToastBar: Component<ToastBarProps> = (props) => {
         {
           duration: 400,
           fill: 'forwards',
-          easing: 'cubic-bezier(.06,.71,.55,1)'
+          easing: 'cubic-bezier(.06,.71,.55,1)',
         }
       );
     }
diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
index 472dc8b..f9fecd2 100644
--- a/src/components/ToastContainer.tsx
+++ b/src/components/ToastContainer.tsx
@@ -1,7 +1,7 @@
 import { createMemo, onMount, Component } from 'solid-js';
 import { ToastContainerProps } from '../';
 import { defaultToastOptions, dispatch } from '../core';
-import { ActionType, resolveValue } from '../types';
+import { resolveValue } from '../types';
 import { getToastWrapperStyles, getWrapperYAxisOffset, updateToastHeight } from '../util';
 import { ToastBar } from './ToastBar';
 
@@ -30,13 +30,13 @@ export const ToastContainer: Component<ToastContainerProps> = (props) => {
       class={props.toast.visible ? 'sldt-active' : ''}
       onMouseEnter={() =>
         dispatch({
-          type: ActionType.START_PAUSE,
+          type: 'start_pause',
           time: Date.now(),
         })
       }
       onMouseLeave={() =>
         dispatch({
-          type: ActionType.END_PAUSE,
+          type: 'end_pause',
           time: Date.now(),
         })
       }
diff --git a/src/core/store.ts b/src/core/store.ts
index 5632dfd..aed175b 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -1,6 +1,12 @@
-import { State, Action, ActionType, Toast } from '../types';
+import { State, Toast, Action, ToastOptions } from '../types';
 import { createStore, produce as p } from 'solid-js/store';
 
+const [initOptions, setInitOptions] = createStore<{
+  options: ToastOptions[];
+}>({
+  options: [],
+});
+
 const [store, setStore] = createStore<State>({
   toasts: [],
   pausedAt: undefined,
@@ -18,7 +24,7 @@ export const createTimers = () => {
     if (durationLeft <= 0) {
       if (toast.visible) {
         dispatch({
-          type: ActionType.DISMISS_TOAST,
+          type: 'dismiss',
           toastId: toast.id,
         });
       }
@@ -27,7 +33,7 @@ export const createTimers = () => {
 
     return setTimeout(() => {
       dispatch({
-        type: ActionType.DISMISS_TOAST,
+        type: 'dismiss',
         toastId: toast.id,
       });
     }, durationLeft);
@@ -44,7 +50,7 @@ const scheduleRemoval = (toastId: string, unmountDelay: number) => {
   const timeout = setTimeout(() => {
     removalQueue.delete(toastId);
     dispatch({
-      type: ActionType.REMOVE_TOAST,
+      type: 'remove',
       toastId,
     });
   }, unmountDelay);
@@ -60,13 +66,13 @@ const unscheduleRemoval = (toastId: string) => {
 
 export const dispatch = (action: Action) => {
   switch (action.type) {
-    case ActionType.ADD_TOAST:
+    case 'add':
       setStore('toasts', (t) => {
         const toasts = t as Toast[];
         return [action.toast, ...toasts];
       });
       break;
-    case ActionType.DISMISS_TOAST:
+    case 'dismiss':
       const { toastId } = action;
       const toasts = store.toasts;
 
@@ -90,7 +96,7 @@ export const dispatch = (action: Action) => {
       }
 
       break;
-    case ActionType.REMOVE_TOAST:
+    case 'remove':
       if (!action.toastId) {
         setStore('toasts', []);
         break;
@@ -100,7 +106,7 @@ export const dispatch = (action: Action) => {
         return toasts.filter((t) => t.id !== action.toastId);
       });
       break;
-    case ActionType.UPDATE_TOAST:
+    case 'update':
       if (action.toast.id) {
         unscheduleRemoval(action.toast.id);
       }
@@ -117,20 +123,22 @@ export const dispatch = (action: Action) => {
         }
       );
       break;
-    case ActionType.UPSERT_TOAST:
+    case 'upsert':
       store.toasts.find((t) => t.id === action.toast.id)
-        ? dispatch({ type: ActionType.UPDATE_TOAST, toast: action.toast })
-        : dispatch({ type: ActionType.ADD_TOAST, toast: action.toast });
+        ? dispatch({ type: 'update', toast: action.toast })
+        : dispatch({ type: 'add', toast: action.toast });
       break;
-    case ActionType.START_PAUSE:
-      setStore(p((s) => {
-        s.pausedAt = Date.now();
-        s.toasts.forEach((t) => {
-          t.paused = true;
-        });
-      }));
+    case 'start_pause':
+      setStore(
+        p((s) => {
+          s.pausedAt = Date.now();
+          s.toasts.forEach((t) => {
+            t.paused = true;
+          });
+        })
+      );
       break;
-    case ActionType.END_PAUSE:
+    case 'end_pause':
       const pauseInterval = action.time - (store.pausedAt || 0);
       setStore(
         p((s) => {
@@ -145,4 +153,5 @@ export const dispatch = (action: Action) => {
   }
 };
 
-export { store };
+export const initOptionsDispatch = (action: Action) => {};
+export { store, initOptions };
diff --git a/src/core/toast.ts b/src/core/toast.ts
index 02b3eaa..54297ef 100644
--- a/src/core/toast.ts
+++ b/src/core/toast.ts
@@ -1,5 +1,5 @@
-import { createRoot, createSignal, untrack } from 'solid-js';
-import { ToasterProps, Message, ToastType, ToastOptions, Toast, ToastHandler, ActionType } from '../types';
+import { createRoot, createSignal } from 'solid-js';
+import { ToasterProps, Message, ToastType, ToastOptions, Toast, ToastHandler } from '../types';
 import { defaultToasterOptions, defaultToastOptions, defaultTimeouts } from './defaults';
 import { generateID } from '../util';
 import { dispatch, store } from './store';
@@ -35,13 +35,12 @@ const createToastCreator =
     return createRoot(() => {
       const existingToast = store.toasts.find((t) => t.id === options.id) as Toast;
       const toast = createToast(message, type, { ...existingToast, duration: undefined, ...options });
-      dispatch({ type: ActionType.UPSERT_TOAST, toast });
+      dispatch({ type: 'upsert', toast });
       return toast.id;
     });
   };
 
 const toast = (message: Message, opts?: ToastOptions) => createToastCreator('blank')(message, opts);
-const test = untrack(() => toast);
 
 toast.error = createToastCreator('error');
 toast.success = createToastCreator('success');
@@ -50,7 +49,7 @@ toast.custom = createToastCreator('custom');
 
 toast.dismiss = (toastId?: string) => {
   dispatch({
-    type: ActionType.DISMISS_TOAST,
+    type: 'dismiss',
     toastId,
   });
 };
@@ -86,7 +85,7 @@ toast.promise = <T>(
 
 toast.remove = (toastId?: string) => {
   dispatch({
-    type: ActionType.REMOVE_TOAST,
+    type: 'remove',
     toastId,
   });
 };
diff --git a/src/types/store.ts b/src/types/store.ts
index f511350..31c9c0f 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -1,42 +1,32 @@
-import { Toast } from './';
-
-export enum ActionType {
-  ADD_TOAST,
-  UPDATE_TOAST,
-  UPSERT_TOAST,
-  DISMISS_TOAST,
-  REMOVE_TOAST,
-  START_PAUSE,
-  END_PAUSE,
-}
+import { Toast, ToastOptions } from './';
 
 export type Action =
   | {
-      type: ActionType.ADD_TOAST;
+      type: 'add';
       toast: Toast;
     }
   | {
-      type: ActionType.UPSERT_TOAST;
+      type: 'upsert';
       toast: Toast;
     }
   | {
-      type: ActionType.UPDATE_TOAST;
+      type: 'update';
       toast: Partial<Toast>;
     }
   | {
-      type: ActionType.DISMISS_TOAST;
+      type: 'dismiss';
       toastId?: string;
     }
   | {
-      type: ActionType.REMOVE_TOAST;
+      type: 'remove';
       toastId?: string;
     }
   | {
-      type: ActionType.START_PAUSE;
+      type: 'start_pause';
       time: number;
     }
   | {
-      type: ActionType.END_PAUSE;
+      type: 'end_pause';
       time: number;
     };
 
@@ -44,3 +34,7 @@ export interface State {
   toasts: Toast[];
   pausedAt: number | undefined;
 }
+
+export interface InitOptions {
+  options: ToastOptions[];
+}
diff --git a/src/types/toast.ts b/src/types/toast.ts
index 69ec6e0..6d9751c 100644
--- a/src/types/toast.ts
+++ b/src/types/toast.ts
@@ -21,30 +21,27 @@ export interface IconTheme {
 }
 
 export interface Toast {
-  type: ToastType;
   id: string;
-  message: ValueOrFunction<Renderable, Toast>;
   icon?: Renderable;
   duration?: number;
-  pauseDuration: number;
-  paused: boolean;
-  position?: ToastPosition;
-
+  message: ValueOrFunction<Renderable, Toast>;
   ariaProps: {
     role: 'status' | 'alert';
     'aria-live': 'assertive' | 'off' | 'polite';
   };
-
-  style?: JSX.CSSProperties;
   className?: string;
-
+  style?: JSX.CSSProperties;
+  position?: ToastPosition;
+  unmountDelay: number;
   iconTheme?: IconTheme;
 
+  pauseDuration: number;
+  paused: boolean;
+  type: ToastType;
   createdAt: number;
   updatedAt?: number;
   visible: boolean;
   height?: number;
-  unmountDelay: number;
 }
 
 export type ToastOptions = Partial<