diff --git a/frontend/src/components/countdown-button/countdown-button.tsx b/frontend/src/components/countdown-button/countdown-button.tsx
index 02b829d25..176d9e68c 100644
--- a/frontend/src/components/countdown-button/countdown-button.tsx
+++ b/frontend/src/components/countdown-button/countdown-button.tsx
@@ -7,9 +7,13 @@ interface Props extends ButtonProps {
 
 export const CountdownButton = ({ seconds, children, ...props }: Props) => {
   const [secondsLeft, setSecondsLeft] = useState(seconds);
-  const [isExpired, setIsExpired] = useState(false);
+  const [isExpired, setIsExpired] = useState(seconds <= 0);
 
   useEffect(() => {
+    if (seconds <= 0) {
+      return;
+    }
+
     const interval = setInterval(() => {
       setSecondsLeft((value) => {
         if (value === 1) {
@@ -22,7 +26,7 @@ export const CountdownButton = ({ seconds, children, ...props }: Props) => {
     }, 1_000);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [seconds]);
 
   return (
     <Button {...props} disabled={isExpired}>
diff --git a/frontend/src/components/oppgavestyring/toasts.tsx b/frontend/src/components/oppgavestyring/toasts.tsx
index ce04d95f1..a97f794c7 100644
--- a/frontend/src/components/oppgavestyring/toasts.tsx
+++ b/frontend/src/components/oppgavestyring/toasts.tsx
@@ -2,7 +2,7 @@ import { Button } from '@navikt/ds-react';
 import { styled } from 'styled-components';
 import { CountdownButton } from '@app/components/countdown-button/countdown-button';
 import { OnChange } from '@app/components/oppgavestyring/types';
-import { toast } from '../toast/store';
+import { toast } from '@app/components/toast/store';
 
 interface ToastProps {
   testId: string;
@@ -14,15 +14,33 @@ interface ToastProps {
   name: string;
 }
 
-export const successToast = (props: ToastProps) => toast.success(<Tildelt {...props} />);
+interface CountdownToastProps extends ToastProps {
+  timestamp: number;
+}
+
+export const successToast = (props: CountdownToastProps) => toast.success(<Tildelt {...props} />);
 
-const Tildelt = ({ oppgaveId, testId, fromNavIdent, toNavIdent, label, name, onChange }: ToastProps) => (
+const Tildelt = ({
+  oppgaveId,
+  testId,
+  fromNavIdent,
+  toNavIdent,
+  label,
+  name,
+  onChange,
+  timestamp,
+}: CountdownToastProps) => (
   <div data-testid={testId} data-oppgaveid={oppgaveId}>
     <span>
       {label} {name}.
     </span>
     <ButtonRow>
-      <CountdownButton size="small" variant="tertiary" onClick={() => onChange(fromNavIdent, toNavIdent)} seconds={10}>
+      <CountdownButton
+        size="small"
+        variant="tertiary"
+        onClick={() => onChange(fromNavIdent, toNavIdent)}
+        seconds={Math.floor((timestamp + 10_000 - Date.now()) / 1_000)}
+      >
         Angre
       </CountdownButton>
     </ButtonRow>
diff --git a/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx b/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx
index 0e796c745..c9cd52f29 100644
--- a/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx
+++ b/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx
@@ -1,3 +1,4 @@
+import { parseISO } from 'date-fns';
 import { useCallback } from 'react';
 import { getFixedCacheKey } from '@app/components/behandling/behandlingsdialog/medunderskriver/helpers';
 import { errorToast, successToast } from '@app/components/oppgavestyring/toasts';
@@ -32,7 +33,8 @@ export const useSetMedunderskriver = (
           : `satt til ${formatEmployeeNameAndIdFallback(toMedunderskriver, 'ingen')}`;
 
       try {
-        await setMedunderskriver({ oppgaveId, employee: toMedunderskriver });
+        const { modified } = await setMedunderskriver({ oppgaveId, employee: toMedunderskriver }).unwrap();
+        const timestamp = parseISO(modified).getTime();
 
         successToast({
           testId: 'oppgave-set-medunderskriver-success-toast',
@@ -42,6 +44,7 @@ export const useSetMedunderskriver = (
           toNavIdent,
           onChange,
           name,
+          timestamp,
         });
       } catch {
         errorToast({
diff --git a/frontend/src/components/oppgavestyring/use-set-rol.tsx b/frontend/src/components/oppgavestyring/use-set-rol.tsx
index 1652c980e..62577cc04 100644
--- a/frontend/src/components/oppgavestyring/use-set-rol.tsx
+++ b/frontend/src/components/oppgavestyring/use-set-rol.tsx
@@ -1,3 +1,4 @@
+import { parseISO } from 'date-fns';
 import { useCallback } from 'react';
 import { getFixedCacheKey } from '@app/components/behandling/behandlingsdialog/medunderskriver/helpers';
 import { errorToast, successToast } from '@app/components/oppgavestyring/toasts';
@@ -19,7 +20,8 @@ export const useSetRol = (oppgaveId: string, rol: INavEmployee[] = EMPTY_MEDUNDE
       const name = toROL === null ? 'fjernet' : `satt til ${formatEmployeeNameAndIdFallback(toROL, 'felles kø')}`;
 
       try {
-        await setRol({ oppgaveId, employee: toROL });
+        const { modified } = await setRol({ oppgaveId, employee: toROL }).unwrap();
+        const timestamp = parseISO(modified).getTime();
 
         successToast({
           testId: 'oppgave-set-rol-success-toast',
@@ -29,6 +31,7 @@ export const useSetRol = (oppgaveId: string, rol: INavEmployee[] = EMPTY_MEDUNDE
           toNavIdent,
           onChange,
           name,
+          timestamp,
         });
       } catch {
         errorToast({
diff --git a/frontend/src/components/oppgavestyring/use-tildel.tsx b/frontend/src/components/oppgavestyring/use-tildel.tsx
index a2f2c3800..0c6fa93d8 100644
--- a/frontend/src/components/oppgavestyring/use-tildel.tsx
+++ b/frontend/src/components/oppgavestyring/use-tildel.tsx
@@ -1,8 +1,11 @@
 import { Button } from '@navikt/ds-react';
+import { parseISO } from 'date-fns';
 import { useContext, useState } from 'react';
 import { StaticDataContext } from '@app/components/app/static-data-context';
+import { OpenOppgavebehandling } from '@app/components/common-table-components/open';
 import { CountdownButton } from '@app/components/countdown-button/countdown-button';
 import { ActionToast } from '@app/components/toast/action-toast';
+import { toast } from '@app/components/toast/store';
 import { formatEmployeeNameAndId, formatEmployeeNameAndIdFallback } from '@app/domain/employee-name';
 import { useHasRole } from '@app/hooks/use-has-role';
 import {
@@ -17,8 +20,6 @@ import { INavEmployee, Role } from '@app/types/bruker';
 import { SaksTypeEnum } from '@app/types/kodeverk';
 import { ISakenGjelderResponse, ISaksbehandlerResponse } from '@app/types/oppgavebehandling/response';
 import { FradelReason, FradelWithHjemler, FradelWithoutHjemler, ITildelingResponse } from '@app/types/oppgaver';
-import { OpenOppgavebehandling } from '../common-table-components/open';
-import { toast } from '../toast/store';
 
 interface Props {
   oppgaveId: string;
@@ -29,6 +30,10 @@ interface Props {
   sakenGjelder: ISakenGjelderResponse['sakenGjelder'];
 }
 
+interface TildeltProps extends Props {
+  timestamp: number;
+}
+
 type UseTildel = [(employee: INavEmployee) => Promise<boolean>, { isLoading: boolean }];
 type UseFradel = [(params: FradelWithHjemler | FradelWithoutHjemler) => Promise<boolean>, { isLoading: boolean }];
 
@@ -43,8 +48,9 @@ export const useTildel = (oppgaveId: string, oppgaveType: SaksTypeEnum, ytelseId
 
     try {
       const { saksbehandler: fromSaksbehandler } = await getSaksbehandler(oppgaveId, true).unwrap();
-      const { saksbehandler: toSaksbehandler } = await tildel({ oppgaveId, employee }).unwrap();
+      const { saksbehandler: toSaksbehandler, modified } = await tildel({ oppgaveId, employee }).unwrap();
       const sakenGjelder = await getSakenGjelder(oppgaveId, true).unwrap();
+      const timestamp = parseISO(modified).getTime();
       createTildeltToast({
         toSaksbehandler,
         fromSaksbehandler,
@@ -52,6 +58,7 @@ export const useTildel = (oppgaveId: string, oppgaveType: SaksTypeEnum, ytelseId
         oppgaveId,
         oppgaveType,
         ytelseId,
+        timestamp,
       });
 
       return true;
@@ -82,14 +89,7 @@ export const useFradel = (oppgaveId: string, oppgaveType: SaksTypeEnum, ytelseId
         getSakenGjelder(oppgaveId, true).unwrap(),
       ]);
       await fradel({ oppgaveId, ...params }).unwrap();
-      createFradeltToast({
-        toSaksbehandler: null,
-        fromSaksbehandler,
-        sakenGjelder,
-        oppgaveId,
-        oppgaveType,
-        ytelseId,
-      });
+      createFradeltToast({ toSaksbehandler: null, fromSaksbehandler, sakenGjelder, oppgaveId, oppgaveType, ytelseId });
 
       return true;
     } catch {
@@ -104,7 +104,15 @@ export const useFradel = (oppgaveId: string, oppgaveType: SaksTypeEnum, ytelseId
   return [fradelSaksbehandler, { isLoading }];
 };
 
-const Tildelt = ({ oppgaveId, oppgaveType, ytelseId, sakenGjelder, toSaksbehandler, fromSaksbehandler }: Props) => {
+const Tildelt = ({
+  oppgaveId,
+  oppgaveType,
+  ytelseId,
+  sakenGjelder,
+  toSaksbehandler,
+  fromSaksbehandler,
+  timestamp,
+}: TildeltProps) => {
   const { user } = useContext(StaticDataContext);
   const sakenGjelderText = `${sakenGjelder.name ?? 'Navn mangler'} (${sakenGjelder.id})`;
   const toSaksbehandlerText = formatEmployeeNameAndIdFallback(toSaksbehandler, 'ukjent saksbehandler');
@@ -116,7 +124,7 @@ const Tildelt = ({ oppgaveId, oppgaveType, ytelseId, sakenGjelder, toSaksbehandl
   const secondary =
     fromSaksbehandler !== null || canDeassignOthers ? (
       <CountdownButton
-        seconds={10}
+        seconds={Math.floor((timestamp + 10_000 - Date.now()) / 1_000)}
         variant="tertiary"
         size="small"
         onClick={() => {
@@ -177,7 +185,7 @@ const Fradelt = ({ oppgaveId, sakenGjelder, fromSaksbehandler, oppgaveType, ytel
   );
 };
 
-const createTildeltToast = (props: Props) => {
+const createTildeltToast = (props: TildeltProps) => {
   if (props.fromSaksbehandler?.navIdent !== props.toSaksbehandler?.navIdent) {
     toast.success(<Tildelt {...props} />);
   }
diff --git a/frontend/src/components/toast/action-toast.tsx b/frontend/src/components/toast/action-toast.tsx
index e1b7c66ec..7cd0a15ee 100644
--- a/frontend/src/components/toast/action-toast.tsx
+++ b/frontend/src/components/toast/action-toast.tsx
@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { sendCloseEvent } from '@app/components/toast/toast/helpers';
 
 interface Props {
   children: React.ReactNode;
@@ -12,7 +13,7 @@ interface Props {
 export const ActionToast = ({ children, primary, secondary, attrs }: Props) => (
   <div {...attrs}>
     <span>{children}</span>
-    <ButtonRow>
+    <ButtonRow onClick={({ target }) => sendCloseEvent(target)}>
       {secondary}
       {primary}
     </ButtonRow>
diff --git a/frontend/src/components/toast/constants.ts b/frontend/src/components/toast/constants.ts
index e50421e85..97f913af5 100644
--- a/frontend/src/components/toast/constants.ts
+++ b/frontend/src/components/toast/constants.ts
@@ -1,2 +1 @@
-export const SLIDE_DURATION = 150;
-export const TOAST_TIMEOUT = 20_000;
+export const TOAST_DEFAULT_TIMEOUT = 20_000;
diff --git a/frontend/src/components/toast/store.ts b/frontend/src/components/toast/store.ts
index 876ff49b1..19c63c202 100644
--- a/frontend/src/components/toast/store.ts
+++ b/frontend/src/components/toast/store.ts
@@ -1,17 +1,5 @@
-import { TOAST_TIMEOUT } from './constants';
-import { NewMessage, ToastType } from './types';
-
-type ListenerFn = (messages: Message[]) => void;
-
-type CloseFn = () => void;
-
-export interface Message extends NewMessage {
-  id: string;
-  createdAt: number;
-  expiresAt: number;
-  close: () => void;
-  setExpiresAt: (ms: number) => void;
-}
+import { TOAST_DEFAULT_TIMEOUT } from '@app/components/toast/constants';
+import { CloseFn, ListenerFn, Message, TimedMessage, ToastType, UntimedMessage } from '@app/components/toast/types';
 
 class Store {
   private messages: Message[] = [];
@@ -21,42 +9,50 @@ class Store {
     if (!this.listeners.includes(listener)) {
       this.listeners.push(listener);
     }
+
     listener(this.messages);
+
+    return () => this.unsubscribe(listener);
   }
 
   public unsubscribe(listener: ListenerFn) {
     this.listeners = this.listeners.filter((l) => l !== listener);
   }
 
-  public success = (message: React.ReactNode, timeout?: number) => this.addMessage(ToastType.SUCCESS, message, timeout);
-  public error = (message: React.ReactNode, timeout?: number) => this.addMessage(ToastType.ERROR, message, timeout);
-  public warning = (message: React.ReactNode, timeout?: number) => this.addMessage(ToastType.WARNING, message, timeout);
-  public info = (message: React.ReactNode, timeout?: number) => this.addMessage(ToastType.INFO, message, timeout);
+  public success = (content: React.ReactNode, timeout?: number) => this.addMessage(ToastType.SUCCESS, content, timeout);
+  public error = (content: React.ReactNode, timeout?: number) => this.addMessage(ToastType.ERROR, content, timeout);
+  public warning = (content: React.ReactNode, timeout?: number) => this.addMessage(ToastType.WARNING, content, timeout);
+  public info = (content: React.ReactNode, timeout?: number) => this.addMessage(ToastType.INFO, content, timeout);
 
   private notify() {
     this.listeners.forEach((listener) => listener(this.messages));
   }
 
-  private addMessage(type: ToastType, message: React.ReactNode, timeout: number = TOAST_TIMEOUT): CloseFn {
+  private addMessage(type: ToastType, content: React.ReactNode, timeout = TOAST_DEFAULT_TIMEOUT): CloseFn {
     const createdAt = Date.now();
-    const expiresAt = createdAt + timeout;
     const id = crypto.randomUUID();
-
-    const setExpiresAt = (ms: number) => this.setExpiresAt(id, ms);
-
     const close: CloseFn = () => this.removeMessage(id);
 
     this.messages = [
       ...this.messages,
-      {
-        type,
-        message,
-        id,
-        createdAt,
-        expiresAt,
-        close,
-        setExpiresAt,
-      },
+      Number.isFinite(timeout)
+        ? ({
+            type,
+            content,
+            id,
+            createdAt,
+            close,
+            expiresAt: createdAt + timeout,
+            setExpiresAt: (ms: number) => this.setExpiresAt(id, ms),
+            timeout,
+          } satisfies TimedMessage)
+        : ({
+            type,
+            content,
+            id,
+            createdAt,
+            close,
+          } satisfies UntimedMessage),
     ];
 
     this.notify();
diff --git a/frontend/src/components/toast/toast.tsx b/frontend/src/components/toast/toast.tsx
deleted file mode 100644
index 64efb9f4b..000000000
--- a/frontend/src/components/toast/toast.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { XMarkIcon } from '@navikt/aksel-icons';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import {
-  CheckmarkCircleFillIconColored,
-  ExclamationmarkTriangleFillIconColored,
-  InformationSquareFillIconColored,
-  XMarkOctagonFillIconColored,
-} from '@app/components/colored-icons/colored-icons';
-import {
-  BaseToastStyle,
-  Container,
-  Content,
-  StyledCloseButton,
-  TimedToastStyle,
-} from '@app/components/toast/styled-components';
-import { SLIDE_DURATION, TOAST_TIMEOUT } from './constants';
-import { Message } from './store';
-import { ToastType } from './types';
-
-export const CLOSE_TOAST_EVENT_TYPE = 'close-toast';
-
-export const Toast = memo(
-  ({ type, expiresAt, close, message, id, ...rest }: Message) => {
-    const ref = useRef<HTMLDivElement>(null);
-
-    const slideOut = useCallback(() => {
-      if (ref.current === null) {
-        return close();
-      }
-
-      const anim = ref.current.animate(SLIDE_OUT_KEYFRAMES, SLIDE_OUT_OPTIONS);
-
-      anim.addEventListener('finish', close);
-    }, [close]);
-
-    useEffect(() => {
-      const element = ref.current;
-
-      if (element === null) {
-        return;
-      }
-
-      element.addEventListener(CLOSE_TOAST_EVENT_TYPE, slideOut);
-
-      return () => element.removeEventListener(CLOSE_TOAST_EVENT_TYPE, slideOut);
-    }, [slideOut]);
-
-    if (expiresAt !== Infinity) {
-      return (
-        <TimedToast
-          type={type}
-          expiresAt={expiresAt}
-          close={close}
-          message={message}
-          id={id}
-          key={id}
-          ref={ref}
-          {...rest}
-        />
-      );
-    }
-
-    return (
-      <BaseToastStyle $type={type} ref={ref} key={id}>
-        <StyledCloseButton variant="tertiary" size="xsmall" onClick={slideOut} icon={<XMarkIcon aria-hidden />} />
-        <Container>
-          <Icon type={type} />
-          <Content>{message}</Content>
-        </Container>
-      </BaseToastStyle>
-    );
-  },
-  (prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.expiresAt === nextProps.expiresAt,
-);
-
-Toast.displayName = 'Toast';
-
-const TimedToast = forwardRef<HTMLDivElement, Message>(
-  ({ type, message, close, setExpiresAt, expiresAt, id }, forwardedRef) => {
-    const ref = useRef<HTMLDivElement>(null);
-
-    useImperativeHandle(forwardedRef, () => ref.current!);
-
-    const [remaining, setRemaining] = useState<number | null>(null);
-    const mouse = useRef<MouseEvent | null>(null);
-
-    const onMouseLeave = useCallback(() => {
-      setExpiresAt(Date.now() + (remaining === null || remaining === Infinity ? TOAST_TIMEOUT : remaining));
-      setRemaining(null);
-    }, [remaining, setExpiresAt]);
-
-    const onMouseEnter = useCallback(() => {
-      setRemaining(expiresAt - Date.now());
-      setExpiresAt(Infinity);
-    }, [expiresAt, setExpiresAt]);
-
-    useEffect(() => {
-      const listener = (e: MouseEvent) => {
-        mouse.current = e;
-      };
-
-      window.addEventListener('mousemove', listener);
-
-      return () => window.removeEventListener('mousemove', listener);
-    }, []);
-
-    useEffect(() => {
-      if (mouse.current === null) {
-        return;
-      }
-
-      const { target } = mouse.current;
-
-      if (
-        expiresAt === Infinity &&
-        ref.current !== null &&
-        target instanceof window.Node &&
-        ref.current !== target &&
-        !ref.current.contains(target)
-      ) {
-        onMouseLeave();
-      }
-    }, [expiresAt, onMouseLeave, ref]);
-
-    const slideOut = useCallback(() => {
-      if (ref.current === null) {
-        return close();
-      }
-
-      const anim = ref.current.animate(SLIDE_OUT_KEYFRAMES, SLIDE_OUT_OPTIONS);
-
-      anim.addEventListener('finish', close);
-    }, [close]);
-
-    useEffect(() => {
-      if (expiresAt === Infinity) {
-        return;
-      }
-
-      const timeout = expiresAt - Date.now() - SLIDE_DURATION;
-      const timer = setTimeout(slideOut, timeout);
-
-      return () => clearTimeout(timer);
-    }, [expiresAt, slideOut]);
-
-    const paused = remaining !== null;
-
-    return (
-      <TimedToastStyle
-        $type={type}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        $paused={paused}
-        $timeout={expiresAt - Date.now()}
-        ref={ref}
-        key={id}
-      >
-        <StyledCloseButton variant="tertiary" size="xsmall" onClick={slideOut} icon={<XMarkIcon aria-hidden />} />
-        <Container>
-          <Icon type={type} />
-          <Content>{message}</Content>
-        </Container>
-      </TimedToastStyle>
-    );
-  },
-);
-
-TimedToast.displayName = 'TimedToast';
-
-const SLIDE_OUT_KEYFRAMES: Keyframe[] = [
-  { transform: 'translateX(0%)' },
-  { transform: 'translateX(calc(100% + 8px))' },
-];
-
-const SLIDE_OUT_OPTIONS: KeyframeAnimationOptions = {
-  duration: SLIDE_DURATION,
-  easing: 'ease-in-out',
-  fill: 'forwards',
-};
-
-interface IconProps {
-  type: ToastType;
-}
-
-const Icon = ({ type }: IconProps) => {
-  switch (type) {
-    case ToastType.SUCCESS:
-      return <CheckmarkCircleFillIconColored aria-hidden />;
-    case ToastType.ERROR:
-      return <XMarkOctagonFillIconColored aria-hidden />;
-    case ToastType.INFO:
-      return <InformationSquareFillIconColored aria-hidden />;
-    case ToastType.WARNING:
-      return <ExclamationmarkTriangleFillIconColored aria-hidden />;
-  }
-};
diff --git a/frontend/src/components/toast/toast/animations.ts b/frontend/src/components/toast/toast/animations.ts
new file mode 100644
index 000000000..38fcd0574
--- /dev/null
+++ b/frontend/src/components/toast/toast/animations.ts
@@ -0,0 +1,34 @@
+import { keyframes } from 'styled-components';
+
+export const SLIDE_DURATION = 150;
+
+export const SLIDE_OUT_KEYFRAMES: Keyframe[] = [
+  { transform: 'translateX(0%)' },
+  { transform: 'translateX(calc(100% + 8px))' },
+];
+
+export const SLIDE_OUT_OPTIONS: KeyframeAnimationOptions = {
+  duration: SLIDE_DURATION,
+  easing: 'ease-in-out',
+  fill: 'forwards',
+};
+
+export const SCALE_X = keyframes`
+  from {
+    transform: scaleX(100%);
+  }
+
+  to {
+    transform: scaleX(0%);
+  }
+`;
+
+export const SLIDE_IN = keyframes`
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+`;
diff --git a/frontend/src/components/toast/toast/constants.ts b/frontend/src/components/toast/toast/constants.ts
new file mode 100644
index 000000000..436442f97
--- /dev/null
+++ b/frontend/src/components/toast/toast/constants.ts
@@ -0,0 +1 @@
+export const CLOSE_TOAST_EVENT_TYPE = 'close-toast';
diff --git a/frontend/src/components/toast/toast/helpers.ts b/frontend/src/components/toast/toast/helpers.ts
new file mode 100644
index 000000000..9721b3a19
--- /dev/null
+++ b/frontend/src/components/toast/toast/helpers.ts
@@ -0,0 +1,7 @@
+import { CLOSE_TOAST_EVENT_TYPE } from '@app/components/toast/toast/constants';
+import { Message, TimedMessage } from '@app/components/toast/types';
+
+export const sendCloseEvent = (target: EventTarget) =>
+  target.dispatchEvent(new Event(CLOSE_TOAST_EVENT_TYPE, { bubbles: true }));
+
+export const isTimedToast = (message: Message): message is TimedMessage => Object.hasOwn(message, 'timeout');
diff --git a/frontend/src/components/toast/toast/icon.tsx b/frontend/src/components/toast/toast/icon.tsx
new file mode 100644
index 000000000..2eb8da382
--- /dev/null
+++ b/frontend/src/components/toast/toast/icon.tsx
@@ -0,0 +1,24 @@
+import {
+  CheckmarkCircleFillIconColored,
+  ExclamationmarkTriangleFillIconColored,
+  InformationSquareFillIconColored,
+  XMarkOctagonFillIconColored,
+} from '@app/components/colored-icons/colored-icons';
+import { ToastType } from '@app/components/toast/types';
+
+interface IconProps {
+  type: ToastType;
+}
+
+export const Icon = ({ type }: IconProps) => {
+  switch (type) {
+    case ToastType.SUCCESS:
+      return <CheckmarkCircleFillIconColored aria-hidden />;
+    case ToastType.ERROR:
+      return <XMarkOctagonFillIconColored aria-hidden />;
+    case ToastType.INFO:
+      return <InformationSquareFillIconColored aria-hidden />;
+    case ToastType.WARNING:
+      return <ExclamationmarkTriangleFillIconColored aria-hidden />;
+  }
+};
diff --git a/frontend/src/components/toast/styled-components.ts b/frontend/src/components/toast/toast/styled-components.ts
similarity index 74%
rename from frontend/src/components/toast/styled-components.ts
rename to frontend/src/components/toast/toast/styled-components.ts
index 780c4c3ec..a1fb41c31 100644
--- a/frontend/src/components/toast/styled-components.ts
+++ b/frontend/src/components/toast/toast/styled-components.ts
@@ -1,6 +1,6 @@
 import { Button } from '@navikt/ds-react';
-import { keyframes, styled } from 'styled-components';
-import { SLIDE_DURATION } from '@app/components/toast/constants';
+import { styled } from 'styled-components';
+import { SCALE_X, SLIDE_DURATION, SLIDE_IN } from '@app/components/toast/toast/animations';
 import { ToastType } from '@app/components/toast/types';
 
 export const Container = styled.div`
@@ -25,26 +25,6 @@ export const StyledCloseButton = styled(Button)`
   color: black;
 `;
 
-const scaleX = keyframes`
-  from {
-    transform: scaleX(100%);
-  }
-
-  to {
-    transform: scaleX(0%);
-  }
-`;
-
-const slideIn = keyframes`
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0%);
-  }
-`;
-
 interface BaseToastProps {
   $type: ToastType;
 }
@@ -59,21 +39,21 @@ export const BaseToastStyle = styled.section<BaseToastProps>`
   width: 300px;
   padding: var(--a-spacing-4);
   border: 1px solid ${({ $type }) => getColor($type)};
-`;
 
-interface TimedToastProps {
-  $paused: boolean;
-  $timeout: number;
-}
-
-export const TimedToastStyle = styled(BaseToastStyle)<TimedToastProps>`
-  animation-name: ${slideIn};
+  animation-name: ${SLIDE_IN};
   animation-duration: ${SLIDE_DURATION}ms;
   animation-timing-function: ease-in-out;
   animation-delay: 0ms;
-  animation-play-state: 'running';
+  animation-play-state: running;
   animation-fill-mode: forwards;
+`;
 
+interface TimedToastProps {
+  /** Animation duration */
+  $duration: number;
+}
+
+export const TimedToastStyle = styled(BaseToastStyle)<TimedToastProps>`
   &::after {
     content: '';
     position: absolute;
@@ -83,13 +63,20 @@ export const TimedToastStyle = styled(BaseToastStyle)<TimedToastProps>`
     height: 4px;
     background-color: ${({ $type }) => getColor($type)};
     transform-origin: left;
-    animation-play-state: ${({ $paused }) => ($paused ? 'paused' : 'running')};
-    animation-name: ${scaleX};
-    animation-duration: ${({ $timeout }) => $timeout - SLIDE_DURATION}ms;
+
+    animation-name: ${SCALE_X};
+    animation-play-state: running;
+    animation-duration: ${({ $duration }) => $duration - SLIDE_DURATION}ms;
     animation-timing-function: linear;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
   }
+
+  &:hover {
+    &::after {
+      animation-play-state: paused;
+    }
+  }
 `;
 
 const getSubtleColor = (type: ToastType) => `var(--a-surface-${typeToCss(type)}-subtle)`;
diff --git a/frontend/src/components/toast/toast/timed.tsx b/frontend/src/components/toast/toast/timed.tsx
new file mode 100644
index 000000000..b0b992d97
--- /dev/null
+++ b/frontend/src/components/toast/toast/timed.tsx
@@ -0,0 +1,68 @@
+import { XMarkIcon } from '@navikt/aksel-icons';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { SCALE_X } from '@app/components/toast/toast/animations';
+import { Icon } from '@app/components/toast/toast/icon';
+import { Container, Content, StyledCloseButton, TimedToastStyle } from '@app/components/toast/toast/styled-components';
+import { TimedMessage } from '@app/components/toast/types';
+import { useAnimationsEnabled } from '@app/hooks/use-animations-enabled';
+
+interface Props extends TimedMessage {
+  slideOut: () => void;
+}
+
+export const TimedToast = forwardRef<HTMLDivElement, Props>(
+  ({ type, content, slideOut, expiresAt, id }, forwardedRef) => {
+    const ref = useRef<HTMLDivElement>(null);
+    useImperativeHandle(forwardedRef, () => ref.current!);
+    const animationsEnabled = useAnimationsEnabled();
+    const duration = useMemo(() => expiresAt - Date.now(), [expiresAt]);
+
+    useEffect(() => {
+      if (animationsEnabled) {
+        return;
+      }
+
+      const t = setTimeout(slideOut, duration);
+
+      return () => clearTimeout(t);
+    }, [animationsEnabled, slideOut, duration]);
+
+    useEffect(() => {
+      if (!animationsEnabled) {
+        return;
+      }
+
+      const element = ref.current;
+
+      if (element === null) {
+        return;
+      }
+
+      const listener = (event: AnimationEvent) => {
+        if (event.animationName !== SCALE_X.name) {
+          return;
+        }
+
+        slideOut();
+      };
+
+      element.addEventListener('animationend', listener);
+
+      return () => {
+        element.removeEventListener('animationend', listener);
+      };
+    }, [animationsEnabled, slideOut]);
+
+    return (
+      <TimedToastStyle $type={type} ref={ref} key={id} $duration={duration}>
+        <StyledCloseButton variant="tertiary" size="xsmall" onClick={slideOut} icon={<XMarkIcon aria-hidden />} />
+        <Container>
+          <Icon type={type} />
+          <Content>{content}</Content>
+        </Container>
+      </TimedToastStyle>
+    );
+  },
+);
+
+TimedToast.displayName = 'TimedToast';
diff --git a/frontend/src/components/toast/toast/toast.tsx b/frontend/src/components/toast/toast/toast.tsx
new file mode 100644
index 000000000..d02eb7146
--- /dev/null
+++ b/frontend/src/components/toast/toast/toast.tsx
@@ -0,0 +1,67 @@
+import { XMarkIcon } from '@navikt/aksel-icons';
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { SLIDE_OUT_KEYFRAMES, SLIDE_OUT_OPTIONS } from '@app/components/toast/toast/animations';
+import { CLOSE_TOAST_EVENT_TYPE } from '@app/components/toast/toast/constants';
+import { isTimedToast } from '@app/components/toast/toast/helpers';
+import { Icon } from '@app/components/toast/toast/icon';
+import { BaseToastStyle, Container, Content, StyledCloseButton } from '@app/components/toast/toast/styled-components';
+import { TimedToast } from '@app/components/toast/toast/timed';
+import { Message } from '@app/components/toast/types';
+import { useAnimationsEnabled } from '@app/hooks/use-animations-enabled';
+
+export const Toast = memo(
+  (message: Message) => {
+    const { id, type, close, content } = message;
+    const ref = useRef<HTMLDivElement>(null);
+    const animationsEnabled = useAnimationsEnabled();
+
+    const slideOut = useCallback(() => {
+      if (!animationsEnabled || ref.current === null) {
+        return close();
+      }
+
+      const anim = ref.current.animate(SLIDE_OUT_KEYFRAMES, SLIDE_OUT_OPTIONS);
+
+      anim.addEventListener('finish', close);
+    }, [animationsEnabled, close]);
+
+    useEffect(() => {
+      const element = ref.current;
+
+      if (element === null) {
+        return;
+      }
+
+      element.addEventListener(CLOSE_TOAST_EVENT_TYPE, slideOut);
+
+      return () => element.removeEventListener(CLOSE_TOAST_EVENT_TYPE, slideOut);
+    }, [slideOut]);
+
+    if (isTimedToast(message)) {
+      return <TimedToast {...message} key={id} ref={ref} slideOut={slideOut} />;
+    }
+
+    return (
+      <BaseToastStyle $type={type} ref={ref} key={id}>
+        <StyledCloseButton variant="tertiary" size="xsmall" onClick={slideOut} icon={<XMarkIcon aria-hidden />} />
+        <Container>
+          <Icon type={type} />
+          <Content>{content}</Content>
+        </Container>
+      </BaseToastStyle>
+    );
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.id !== nextProps.id) {
+      return false;
+    }
+
+    if ('expiresAt' in prevProps && 'expiresAt' in nextProps) {
+      return prevProps.expiresAt === nextProps.expiresAt;
+    }
+
+    return true;
+  },
+);
+
+Toast.displayName = 'Toast';
diff --git a/frontend/src/components/toast/toasts.tsx b/frontend/src/components/toast/toasts.tsx
index f7dacdea9..526e7c816 100644
--- a/frontend/src/components/toast/toasts.tsx
+++ b/frontend/src/components/toast/toasts.tsx
@@ -1,18 +1,15 @@
 import { useEffect, useRef, useState } from 'react';
 import { styled } from 'styled-components';
-import { Message, toast } from './store';
-import { Toast } from './toast';
+import { toast } from '@app/components/toast/store';
+import { Toast } from '@app/components/toast/toast/toast';
+import { Message } from '@app/components/toast/types';
 
 export const Toasts = () => {
   const [toasts, setToasts] = useState<Message[]>([]);
   const ref = useRef<HTMLDivElement>(null);
   const previousLength = useRef(0);
 
-  useEffect(() => {
-    toast.subscribe(setToasts);
-
-    return () => toast.unsubscribe(setToasts);
-  }, []);
+  useEffect(() => toast.subscribe(setToasts), []);
 
   useEffect(() => {
     if (toasts.length > previousLength.current) {
diff --git a/frontend/src/components/toast/types.ts b/frontend/src/components/toast/types.ts
index 97818ef1b..1934b85bc 100644
--- a/frontend/src/components/toast/types.ts
+++ b/frontend/src/components/toast/types.ts
@@ -5,7 +5,23 @@ export enum ToastType {
   WARNING = 'warning',
 }
 
-export interface NewMessage {
-  message: React.ReactNode;
+export type ListenerFn = (messages: Message[]) => void;
+
+export type CloseFn = () => void;
+
+export interface UntimedMessage {
+  id: string;
+  createdAt: number;
+  content: React.ReactNode;
   type: ToastType;
+  close: () => void;
 }
+
+export interface TimedMessage extends UntimedMessage {
+  expiresAt: number;
+  setExpiresAt: (ms: number) => void;
+  /** Total timeout from createdAt in milliseconds */
+  timeout: number;
+}
+
+export type Message = UntimedMessage | TimedMessage;
diff --git a/frontend/src/components/version-checker/toast.tsx b/frontend/src/components/version-checker/toast.tsx
index 36125435c..9e4562a45 100644
--- a/frontend/src/components/version-checker/toast.tsx
+++ b/frontend/src/components/version-checker/toast.tsx
@@ -1,6 +1,6 @@
 import { CogRotationIcon } from '@navikt/aksel-icons';
 import { BodyShort, Button } from '@navikt/ds-react';
-import { CLOSE_TOAST_EVENT_TYPE } from '@app/components/toast/toast';
+import { sendCloseEvent } from '@app/components/toast/toast/helpers';
 import { pushEvent } from '@app/observability';
 
 interface Props {
@@ -18,7 +18,7 @@ export const VersionToast = ({ isRequired = false }: Props) => (
         size="small"
         onClick={(e) => {
           pushEvent('close_update_toast', 'update', { required: isRequired ? 'true' : 'false' });
-          e.target.dispatchEvent(new Event(CLOSE_TOAST_EVENT_TYPE, { bubbles: true }));
+          sendCloseEvent(e.target);
         }}
       >
         Ignorer
diff --git a/frontend/src/hooks/use-animations-enabled.ts b/frontend/src/hooks/use-animations-enabled.ts
new file mode 100644
index 000000000..d3b9632bc
--- /dev/null
+++ b/frontend/src/hooks/use-animations-enabled.ts
@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+
+export const useAnimationsEnabled = () =>
+  useMemo(() => !window.matchMedia('(prefers-reduced-motion: reduce)').matches, []);