diff --git a/.changeset/tiny-monkeys-invite.md b/.changeset/tiny-monkeys-invite.md
new file mode 100644
index 0000000000..47e75126bc
--- /dev/null
+++ b/.changeset/tiny-monkeys-invite.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor components `Toaster` and `Notification` to use vanilla extract instead of Emotion
diff --git a/packages/ui/src/components/Notification/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Notification/__tests__/__snapshots__/index.test.tsx.snap
index e774954ff5..924aad00dd 100644
--- a/packages/ui/src/components/Notification/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Notification/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,28 +12,7 @@ exports[`toaster > renders correctly with close button 1`] = `
 
 exports[`toaster > renders correctly with close button 2`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border-radius: 0.25rem;
-}
-
-.emotion-0.Toastify__toast {
-  background-color: #ffffff;
-  color: #3f4250;
-  padding: 1rem;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0.Toastify__toast-container {
-  width: 19.5rem;
-}
-
-.emotion-0 .Toastify__toast-body {
-  margin: 0;
-  padding: 0;
-  display: none;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <section
@@ -45,11 +24,11 @@ exports[`toaster > renders correctly with close button 2`] = `
       id="notification"
     >
       <div
-        class="Toastify__toast-container Toastify__toast-container--top-right"
+        class="Toastify__toast-container Toastify__toast-container--top-right styles__1h24h1e0"
         tabindex="-1"
       >
         <div
-          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default emotion-0 Toastify--animate Toastify__slide-enter--top-right"
+          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify--animate Toastify__slide-enter--top-right"
           data-in="true"
           id="1"
           role="alert"
@@ -120,28 +99,7 @@ exports[`toaster > renders correctly with custom close button 1`] = `
 
 exports[`toaster > renders correctly with custom close button 2`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border-radius: 0.25rem;
-}
-
-.emotion-0.Toastify__toast {
-  background-color: #ffffff;
-  color: #3f4250;
-  padding: 1rem;
-  box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
-}
-
-.emotion-0.Toastify__toast-container {
-  width: 19.5rem;
-}
-
-.emotion-0 .Toastify__toast-body {
-  margin: 0;
-  padding: 0;
-  display: none;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <section
@@ -153,11 +111,11 @@ exports[`toaster > renders correctly with custom close button 2`] = `
       id="notification"
     >
       <div
-        class="Toastify__toast-container Toastify__toast-container--top-right"
+        class="Toastify__toast-container Toastify__toast-container--top-right styles__1h24h1e0"
         tabindex="-1"
       >
         <div
-          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default emotion-0 Toastify--animate Toastify__slide-enter--top-right"
+          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify--animate Toastify__slide-enter--top-right"
           data-in="true"
           id="2"
           role="alert"
diff --git a/packages/ui/src/components/Notification/index.tsx b/packages/ui/src/components/Notification/index.tsx
index 3ebb7e5b7a..26ec32d0c7 100644
--- a/packages/ui/src/components/Notification/index.tsx
+++ b/packages/ui/src/components/Notification/index.tsx
@@ -1,7 +1,5 @@
 'use client'
 
-import type { Theme } from '@emotion/react'
-import { ClassNames, css, Global, useTheme } from '@emotion/react'
 import { CloseIcon } from '@ultraviolet/icons'
 import type { ReactNode } from 'react'
 import type {
@@ -17,12 +15,7 @@ import {
 import { Button } from '../Button'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
-
-const PREFIX = '.Toastify'
-
-type StylesProps = {
-  theme: Theme
-}
+import { notification as notificationStyle } from './styles.css'
 
 type CloseButtonProps = {
   closeToast: (event: React.MouseEvent<HTMLElement>) => void
@@ -31,36 +24,6 @@ type CloseButtonProps = {
   theme: ThemeToastify
 }
 
-const toaster = css`
-  ${PREFIX} {
-    z-index: 1;
-    position: fixed;
-  }
-`
-
-const styles = {
-  toast: ({ theme }: StylesProps) => css`
-    border-radius: ${theme.radii.default};
-
-    &${PREFIX}__toast {
-      background-color: ${theme.colors.other.elevation.background.raised};
-      color: ${theme.colors.neutral.text};
-      padding: ${theme.space['2']};
-      box-shadow: ${theme.shadows.raised[0]}, ${theme.shadows.raised[1]};
-    }
-
-    &${PREFIX}__toast-container {
-      width: 19.5rem;
-    }
-
-    ${PREFIX}__toast-body {
-      margin: 0;
-      padding: 0;
-      display: none;
-    }
-  `,
-}
-
 const closeButton = (props: CloseButtonProps) => (
   <Button
     aria-label="close"
@@ -132,31 +95,18 @@ export const NotificationContainer = ({
   'data-testid': dataTestId,
   className,
   containerId = 'notification',
-}: NotificationContainerProps) => {
-  const theme = useTheme()
-
-  return (
-    <ClassNames>
-      {/* eslint-disable-next-line @typescript-eslint/unbound-method */}
-      {({ css: localCss }) => (
-        <>
-          <Global styles={[toaster]} />
-          <BaseToastContainer
-            autoClose={autoClose}
-            className={className}
-            containerId={containerId}
-            data-testid={dataTestId}
-            draggable={false}
-            hideProgressBar
-            icon={false}
-            limit={limit}
-            newestOnTop={newestOnTop}
-            position={position}
-            toastClassName={localCss(styles.toast({ theme }))}
-            transition={Slide}
-          />
-        </>
-      )}
-    </ClassNames>
-  )
-}
+}: NotificationContainerProps) => (
+  <BaseToastContainer
+    autoClose={autoClose}
+    className={`${className ? `${className} ` : ''}${notificationStyle}`}
+    containerId={containerId}
+    data-testid={dataTestId}
+    draggable={false}
+    hideProgressBar
+    icon={false}
+    limit={limit}
+    newestOnTop={newestOnTop}
+    position={position}
+    transition={Slide}
+  />
+)
diff --git a/packages/ui/src/components/Notification/styles.css.ts b/packages/ui/src/components/Notification/styles.css.ts
new file mode 100644
index 0000000000..54d213d4ed
--- /dev/null
+++ b/packages/ui/src/components/Notification/styles.css.ts
@@ -0,0 +1,31 @@
+import { theme } from '@ultraviolet/themes'
+import { globalStyle, style } from '@vanilla-extract/css'
+
+const PREFIX = '.Toastify'
+
+export const notification = style({
+  borderRadius: theme.radii.default,
+})
+
+globalStyle(`${PREFIX}`, {
+  backgroundColor: theme.colors.other.elevation.background.raised,
+  zIndex: 1,
+  position: 'fixed',
+})
+
+globalStyle(`${notification} ${PREFIX}__toast`, {
+  backgroundColor: theme.colors.other.elevation.background.raised,
+  color: theme.colors.neutral.text,
+  padding: theme.space[2],
+  boxShadow: `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`,
+})
+
+globalStyle(`${notification} ${PREFIX}__toast-container`, {
+  width: '19.5rem',
+})
+
+globalStyle(`${notification} ${PREFIX}__toast-body`, {
+  margin: 0,
+  padding: 0,
+  display: 'none',
+})
diff --git a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
index 157bbdc32a..5dfbec47d8 100644
--- a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
@@ -76,52 +76,7 @@ exports[`toaster > renders correctly with all kind of toast 3`] = `
 
 exports[`toaster > renders correctly with all kind of toast 4`] = `
 <DocumentFragment>
-  .emotion-0 {
-  border-radius: 0.25rem;
-  min-height: 3.5rem;
-}
-
-.emotion-0 .Toastify__toast-container {
-  width: 21.5rem;
-}
-
-.emotion-0 .Toastify__toast-body {
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0.Toastify__toast--success {
-  background-color: #151a2d;
-  color: #ffffff;
-  padding: 1rem;
-}
-
-.emotion-0.Toastify__toast--error {
-  background-color: #e51963;
-  color: #ffffff;
-  padding: 1rem;
-}
-
-.emotion-0.Toastify__toast--warning {
-  background-color: #fbc600;
-  color: #222638;
-  padding: 1rem;
-}
-
-.emotion-1 {
-  background: none;
-  margin: auto;
-  margin-left: 0.5rem;
-}
-
-.emotion-1:hover,
-.emotion-1:active {
-  background: none;
-  box-shadow: none;
-  border: none;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <section
@@ -133,12 +88,12 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
       id="toaster"
     >
       <div
-        class="Toastify__toast-container Toastify__toast-container--top-right"
+        class="Toastify__toast-container Toastify__toast-container--top-right styles__11f0u3o0"
         data-stacked="true"
         tabindex="-1"
       >
         <div
-          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--success emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
+          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--success Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
           data-collapsed="true"
           data-in="true"
           data-pos="top"
@@ -159,7 +114,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
           </div>
           <button
             aria-label="close"
-            class="emotion-1 emotion-2 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_success__e1wcoeb styles_undefined_compound_4__e1wcoep"
+            class="styles__11f0u3o1 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_success__e1wcoeb styles_undefined_compound_4__e1wcoep"
             type="button"
           >
             <svg
@@ -188,7 +143,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
           </div>
         </div>
         <div
-          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--error emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
+          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--error Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
           data-collapsed="true"
           data-in="true"
           data-pos="top"
@@ -209,7 +164,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
           </div>
           <button
             aria-label="close"
-            class="emotion-1 emotion-2 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
+            class="styles__11f0u3o1 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
             type="button"
           >
             <svg
@@ -238,7 +193,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
           </div>
         </div>
         <div
-          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--warning emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
+          class="Toastify__toast Toastify__toast-theme--light Toastify__toast--warning Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
           data-in="true"
           data-pos="top"
           id="warning"
@@ -258,7 +213,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
           </div>
           <button
             aria-label="close"
-            class="emotion-1 emotion-2 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_warning__e1wcoec styles_undefined_compound_5__e1wcoeq"
+            class="styles__11f0u3o1 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_warning__e1wcoec styles_undefined_compound_5__e1wcoeq"
             type="button"
           >
             <svg
diff --git a/packages/ui/src/components/Toaster/index.tsx b/packages/ui/src/components/Toaster/index.tsx
index d05dbb8bad..8ffd5cabf6 100644
--- a/packages/ui/src/components/Toaster/index.tsx
+++ b/packages/ui/src/components/Toaster/index.tsx
@@ -1,8 +1,5 @@
 'use client'
 
-import type { Theme } from '@emotion/react'
-import { ClassNames, css, useTheme } from '@emotion/react'
-import styled from '@emotion/styled'
 import { CloseIcon } from '@ultraviolet/icons'
 import type { ReactNode } from 'react'
 import type { ToastOptions } from 'react-toastify'
@@ -17,74 +14,28 @@ import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { ToastButton } from './components/Button'
 import { ToastLink } from './components/Link'
+import { closeButtonToaster, toaster } from './styles.css'
 
-const PREFIX = '.Toastify'
 const AUTOCLOSE_DELAY = 6000 // Delay to close the toast in ms
 type SENTIMENT = (typeof SENTIMENTS)[number]
 
-const styles = {
-  toast: (theme: Theme) => css`
-    border-radius: ${theme.radii.default};
-    min-height: ${theme.sizing['700']};
-
-    ${PREFIX}__toast-container {
-      width: 21.5rem;
-    }
-
-    ${PREFIX}__toast-body {
-      margin: 0;
-      padding: 0;
-    }
-
-    &${PREFIX}__toast--success {
-      background-color: ${theme.colors.neutral.backgroundStronger};
-      color: ${theme.colors.neutral.textStronger};
-      padding: ${theme.space['2']};
-    }
-
-    &${PREFIX}__toast--error {
-      background-color: ${theme.colors.danger.backgroundStrong};
-      color: ${theme.colors.neutral.textStronger};
-      padding: ${theme.space['2']};
-    }
-
-    &${PREFIX}__toast--warning {
-      background-color: ${theme.colors.warning.backgroundStrong};
-      color: ${theme.colors.warning.textStrong};
-      padding: ${theme.space['2']};
-    }
-  `,
-}
-
 type CloseButtonProps = {
   closeToast?: () => void
   sentiment: SENTIMENT
 }
-
-const StyledButton = styled(Button)`
-  background: none;
-  margin: auto;
-  margin-left: ${({ theme }) => theme.space['1']};
-  &:hover,
-  &:active {
-    background: none;
-    box-shadow: none;
-    border: none;
-  }
-`
-
 const CloseButton = ({
   closeToast,
   sentiment = 'success',
 }: CloseButtonProps) => (
-  <StyledButton
+  <Button
     aria-label="close"
+    className={closeButtonToaster}
     onClick={closeToast}
     sentiment={sentiment}
     size="xsmall"
   >
     <CloseIcon />
-  </StyledButton>
+  </Button>
 )
 
 type ContentProps = {
@@ -181,34 +132,24 @@ export const ToastContainer = ({
   className,
   autoClose,
   containerId = 'toaster',
-}: ToastContainerProps) => {
-  const theme = useTheme()
-
-  return (
-    <ClassNames>
-      {/* eslint-disable-next-line @typescript-eslint/unbound-method */}
-      {({ css: localCss }) => (
-        <BaseToastContainer
-          autoClose={autoClose ?? AUTOCLOSE_DELAY}
-          className={className}
-          containerId={containerId}
-          data-testid={dataTestId}
-          draggable={false}
-          hideProgressBar
-          icon={false}
-          limit={limit}
-          newestOnTop={newestOnTop}
-          pauseOnFocusLoss={false}
-          pauseOnHover={false}
-          position={position}
-          stacked
-          toastClassName={localCss(styles.toast(theme))}
-          transition={Slide}
-        />
-      )}
-    </ClassNames>
-  )
-}
+}: ToastContainerProps) => (
+  <BaseToastContainer
+    autoClose={autoClose ?? AUTOCLOSE_DELAY}
+    className={`${className ? `${className} ` : ''}${toaster}`}
+    containerId={containerId}
+    data-testid={dataTestId}
+    draggable={false}
+    hideProgressBar
+    icon={false}
+    limit={limit}
+    newestOnTop={newestOnTop}
+    pauseOnFocusLoss={false}
+    pauseOnHover={false}
+    position={position}
+    stacked
+    transition={Slide}
+  />
+)
 
 export const Toast = {
   Button: ToastButton,
diff --git a/packages/ui/src/components/Toaster/styles.css.ts b/packages/ui/src/components/Toaster/styles.css.ts
new file mode 100644
index 0000000000..c723fa275b
--- /dev/null
+++ b/packages/ui/src/components/Toaster/styles.css.ts
@@ -0,0 +1,49 @@
+import { theme } from '@ultraviolet/themes'
+import { globalStyle, style } from '@vanilla-extract/css'
+
+const PREFIX = '.Toastify'
+
+export const toaster = style({
+  borderRadius: theme.radii.default,
+  minHeight: theme.sizing[700],
+})
+
+globalStyle(`${toaster} ${PREFIX}__toast-container`, {
+  width: '21.5rem',
+})
+
+globalStyle(`${toaster} ${PREFIX}__toast-body`, {
+  margin: 0,
+  padding: 0,
+})
+
+globalStyle(`${toaster} ${PREFIX}__toast--success`, {
+  backgroundColor: theme.colors.neutral.backgroundStronger,
+  color: theme.colors.neutral.textStronger,
+  padding: theme.space[2],
+})
+
+globalStyle(`${toaster} ${PREFIX}__toast--error`, {
+  backgroundColor: theme.colors.danger.backgroundStrong,
+  color: theme.colors.neutral.textStronger,
+  padding: theme.space[2],
+})
+
+globalStyle(`${toaster} ${PREFIX}__toast--warning`, {
+  backgroundColor: theme.colors.warning.backgroundStrong,
+  color: theme.colors.warning.textStrong,
+  padding: theme.space[2],
+})
+
+export const closeButtonToaster = style({
+  background: 'none',
+  margin: 'auto',
+  marginLeft: theme.space[1],
+  selectors: {
+    '&:hover, &:active': {
+      background: 'none',
+      boxShadow: 'none',
+      border: 'none',
+    },
+  },
+})