diff --git a/package.json b/package.json
index efdb5a7..292601c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-toaster",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "",
   "main": "tp-toaster.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "@tp/helpers": "^1.2.1",
     "@tp/tp-icon": "^1.0.1",
     "@tp/tp-media-query": "^1.0.0",
+    "@tp/tp-timeout-strip": "^1.0.0",
     "lit": "^2.2.0"
   }
 }
diff --git a/tp-toast.js b/tp-toast.js
index 2dc0c30..02e47d1 100644
--- a/tp-toast.js
+++ b/tp-toast.js
@@ -3,6 +3,7 @@
 Copyright (c) 2023 EDV Wasmeier
 */
 
+import '@tp/tp-timeout-strip/tp-timeout-strip.js';
 import { EventHelpers } from '@tp/helpers/event-helpers.js';
 import { LitElement, html, css, svg } from 'lit';
 
@@ -11,13 +12,10 @@ class TpToast extends EventHelpers(LitElement) {
     return [
       css`
         :host {
-          --tp-toast-info-icon-color: #fff;
-          --tp-toast-success-icon-color: #fff;
-          --tp-toast-error-icon-color: #fff;
-          --tp-toast-warning-icon-color: #fff;
+          display: inline-block;
+          position: relative;
           transition: transform 0.5s, opacity 0.3s;
           will-change: transform, opacity;
-          display: inline-block;
           border-radius: 2px;
           background: #FAFAFA;
           font-size: 0.8em;
@@ -27,41 +25,31 @@ class TpToast extends EventHelpers(LitElement) {
                     0 1px 8px 0 rgba(0, 0, 0, 0.12),
                     0 3px 3px -2px rgba(0, 0, 0, 0.4);
         }
+        
+        tp-timeout-strip {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          pointer-events: none;
+        }
 
         .wrap {
           display: flex;
           flex-direction: row;
+          gap: 10px;
         }
 
         .icon {
-          padding: 10px;
-          border-right: 1px #fff;
-          color: #ffffff;
+          padding: 10px 0 10px 10px;
           display: flex;
           flex-direction: row;
           align-items: center;
           justify-content: center;
         }
 
-        :host([type="info"]) .icon {
-          background: #039BE5;
-        }
-
-        :host([type="success"]) .icon {
-          background: #558B2F;
-          color: #fff;
-        }
-
-        :host([type="warning"]) .icon {
-          background: #FFCA28;
-        }
-
-        :host([type="error"]) .icon {
-          background: #B71C1C;
-        }
-
         .content {
-          padding: 10px 10px 10px 10px;
+          padding: 10px 0;
           line-height: 24px;
         }
 
@@ -85,18 +73,19 @@ class TpToast extends EventHelpers(LitElement) {
 
     return html`
       <div class="wrap">
-        <div class="icon">
-          <tp-icon .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
+        <div class="icon" part="type-icon-wrap">
+          <tp-icon part="type-icon" .icon=${icon || TpToast[this.type + 'Icon']}></tp-icon>
         </div>
-        <div class="content">
+        <div class="content" part="content">
           <slot></slot>
         </div>
         ${!sticky ? html`
-          <div class="dismiss">
-            <tp-icon .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
+          <div class="dismiss" part="dismiss-icon-wrap">
+            <tp-icon part="dismiss-icon" .icon=${dismissIcon || TpToast.defaultDismissIcon} @click=${this.dismiss}></tp-icon>
           </div>
         ` : null}
       </div>
+      <tp-timeout-strip exportparts="strip: inner-strip" part="timeout-strip"></tp-timeout-strip>
     `;
   }
 
@@ -108,7 +97,7 @@ class TpToast extends EventHelpers(LitElement) {
       /**
       * Configures what kind of toast this is.
       * Comes with the variants `info`, `warning`, `error`, `success`.
-      * Each type comes with a pre-defined icon, but via the `icon` property a custom icon can also be used.
+      * Each type comes with a pre-defined icon. To use a custom icon use the `icon` property.
       */
       type: { type: String, reflect: true },
 
@@ -138,23 +127,23 @@ class TpToast extends EventHelpers(LitElement) {
   }
 
   static get defaultDismissIcon() {
-    return svg`<path fill="var(--tp-toast-dismiss-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />`;
   }
 
   static get infoIcon() {
-    return svg`<path fill="var(--tp-toast-info-icon-color)" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
   }
 
   static get successIcon() {
-    return svg`<path fill="var(--tp-toast-success-icon-color)" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />`;
   }
 
   static get errorIcon() {
-    return svg`<path fill="var(--tp-toast-error-icon-color)" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />`;
   }
 
   static get warningIcon() {
-    return svg`<path fill="var(--tp-toast-warning-icon-color)" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />`;
+    return svg`<path fill="var(--tp-icon-color)" d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />`;
   }
 
   connectedCallback() {
@@ -183,6 +172,7 @@ class TpToast extends EventHelpers(LitElement) {
    */
   activateDelay() {
     if (this.delay > 0) {
+      this.shadowRoot.querySelector('tp-timeout-strip').show(this.delay);
       this.stopDelay();
       this._delayJob = setTimeout(this.dismiss, this.delay);
     }