diff --git a/ui/demo-pwa/esbuild.mjs b/ui/demo-pwa/esbuild.mjs
index 8fb338c6f..59454c10e 100755
--- a/ui/demo-pwa/esbuild.mjs
+++ b/ui/demo-pwa/esbuild.mjs
@@ -128,7 +128,8 @@ if (debugMode) {
 
 /*
   TODO:
-  - Assets hash
+  - Workbox and sw
+  - Res (all assets) hash
   - PostCSS css file
   - lit css loader
   - PostCSS lit internal styles
diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts
index cb4b8d3fb..219bce4b6 100644
--- a/ui/demo-pwa/src/page-card.ts
+++ b/ui/demo-pwa/src/page-card.ts
@@ -1,6 +1,7 @@
 import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
 
 import '@alwatr/ui-kit/card/card.js';
+import '@alwatr/ui-kit/card/icon-box.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,6 +9,8 @@ declare global {
   }
 }
 
+const loremText = `مداد رنگی ها مشغول بودند به جز مداد سفید، هیهم باشیم شاید فردا ما هم در کنار هم نباشیم…`;
+
 /**
  * Alwatr Demo Home Page
  */
@@ -21,14 +24,20 @@ export class AlwatrPageCard extends AlwatrSmartElement {
       box-sizing: border-box;
       height: 100%;
       gap: var(--sys-spacing-track);
+      overflow-y: scroll;
     }
 
-    alwatr-card {
+    alwatr-card,
+    alwatr-icon-box {
       flex-grow: 1;
-      display: flex;
-      align-items: flex-end;
       width: 25%;
       user-select: none;
+      min-height: 15rem;
+    }
+
+    alwatr-card {
+      display: flex;
+      align-items: flex-end;
     }
 
     input {
@@ -48,15 +57,28 @@ export class AlwatrPageCard extends AlwatrSmartElement {
   override render(): unknown {
     super.render();
     return html`
+      <alwatr-icon-box
+        .content=${{icon: 'gift-outline', headline: 'قرعه کشی', description: loremText}}
+      ></alwatr-icon-box>
+      <alwatr-icon-box
+        .content=${{icon: 'download-outline', headline: 'کاتالوگ', description: loremText}}
+      ></alwatr-icon-box>
+      <alwatr-icon-box
+        .content=${{icon: 'earth-outline', headline: 'وب‌سایت', description: loremText, href: '/'}}
+      ></alwatr-icon-box>
+
       <alwatr-card stated elevated><input type="text" value="elevated" /></alwatr-card>
       <alwatr-card stated elevated><input type="text" value="elevated" /></alwatr-card>
       <alwatr-card stated elevated disabled><input type="text" value="elevated" disabled /></alwatr-card>
+
       <alwatr-card stated elevated="2"><input type="text" value="elevated 2" /></alwatr-card>
       <alwatr-card stated elevated="3"><input type="text" value="elevated 3" /></alwatr-card>
       <alwatr-card stated elevated="4"><input type="text" value="elevated 4" /></alwatr-card>
+
       <alwatr-card stated filled><input type="text" value="filled" /></alwatr-card>
       <alwatr-card stated elevated filled><input type="text" value="filled" /></alwatr-card>
       <alwatr-card stated filled disabled><input type="text" value="filled" disabled /></alwatr-card>
+
       <alwatr-card stated outlined><input type="text" value="outlined" /></alwatr-card>
       <alwatr-card stated outlined><input type="text" value="outlined" /></alwatr-card>
       <alwatr-card stated outlined disabled><input type="text" value="outlined" disabled /></alwatr-card>
diff --git a/ui/element/src/surface-element.ts b/ui/element/src/surface-element.ts
index 7489d95f7..11da2d338 100644
--- a/ui/element/src/surface-element.ts
+++ b/ui/element/src/surface-element.ts
@@ -46,7 +46,7 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
         );
       background-repeat: no-repeat;
       outline: 0;
-      border-radius: var(--sys-radius-small);
+      border-radius: var(--sys-radius-medium);
       overflow: hidden;
       overflow: clip;
     }
diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts
index 07c38e4e3..7e038380f 100644
--- a/ui/ui-kit/src/card/card.ts
+++ b/ui/ui-kit/src/card/card.ts
@@ -23,7 +23,7 @@ export class AlwatrCard extends AlwatrSurfaceElement {
   ];
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`<slot></slot>`;
   }
 }
diff --git a/ui/ui-kit/src/card/icon-box.ts b/ui/ui-kit/src/card/icon-box.ts
new file mode 100644
index 000000000..695e8ea7b
--- /dev/null
+++ b/ui/ui-kit/src/card/icon-box.ts
@@ -0,0 +1,105 @@
+import {css, customElement, html, property, nothing, ifDefined} from '@alwatr/element';
+
+import '@alwatr/icon';
+
+import {AlwatrCard} from './card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-icon-box': AlwatrIconBox;
+  }
+}
+
+export type IconBoxContent = {
+  icon: string;
+  headline: string;
+  description: string;
+  href?: string;
+  flipRtl?: boolean;
+}
+
+/**
+ * Alwatr standard icon button element.
+ */
+@customElement('alwatr-icon-box')
+export class AlwatrIconBox extends AlwatrCard {
+  static override styles = [
+    AlwatrCard.styles,
+    css`
+      :host {
+        display: block;
+        padding: 0;
+        transition-property: color, background-color;
+        transition-duration: var(--sys-motion-duration-small);
+        transition-timing-function: var(--sys-motion-easing-linear);
+      }
+      :host(:hover) {
+        --_surface-color-on: var(--sys-color-on-primary-hsl);
+        --_surface-color-bg: var(--sys-color-primary-hsl);
+      }
+
+      a {
+        display: block;
+        padding: calc(2 * var(--sys-spacing-track));
+        border-radius: inherit;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .headline {
+        font-family: var(--sys-typescale-display-small-font-family-name);
+        font-weight: var(--sys-typescale-display-small-font-weight);
+        font-size: var(--sys-typescale-display-small-font-size);
+        letter-spacing: var(--sys-typescale-display-small-letter-spacing);
+        line-height: var(--sys-typescale-display-small-line-height);
+      }
+
+      .headline alwatr-icon {
+        display: block;
+        margin-bottom: var(--sys-spacing-track);
+        font-size: 2em;
+        color: var(--sys-color-primary);
+        transition: color var(--sys-motion-duration-small) var(--sys-motion-easing-linear);
+      }
+      :host(:hover) .headline alwatr-icon {
+        color: var(--sys-color-on-primary);
+      }
+
+      .description {
+        font-family: var(--sys-typescale-body-medium-font-family-name);
+        font-weight: var(--sys-typescale-body-medium-font-weight);
+        font-size: var(--sys-typescale-body-medium-font-size);
+        letter-spacing: var(--sys-typescale-body-medium-letter-spacing);
+        line-height: var(--sys-typescale-body-medium-line-height);
+        margin-top: calc(2 * var(--sys-spacing-track));
+      }
+
+      .description:empty {
+        display: none;
+      }
+    `,
+  ];
+
+  @property({type: Object})
+    content?: IconBoxContent;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('stated', '');
+    this.setAttribute('elevated', '3');
+  }
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+    if (this.content == null) return nothing;
+    return html`
+      <a href=${ifDefined(this.content?.href)}>
+        <div class="headline">
+          <alwatr-icon .name=${this.content.icon} ?flip-rtl=${this.content.flipRtl}></alwatr-icon>
+          ${this.content.headline}
+        </div>
+        <div class="description">${this.content.description}</div>
+      </a>
+    `;
+  }
+}
diff --git a/ui/ui-kit/style/token/motion.css b/ui/ui-kit/style/token/motion.css
index fb1e2100b..bbd787994 100644
--- a/ui/ui-kit/style/token/motion.css
+++ b/ui/ui-kit/style/token/motion.css
@@ -2,12 +2,12 @@
   --ref-motion-duration-frame: 16.66666666666666667ms;
 
   --sys-motion-duration-none: calc(2 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-small-in: calc(8 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-small: calc(8 * var(--ref-motion-duration-frame));
   --sys-motion-duration-small-out: calc(6 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-medium-in: calc(16 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-medium: calc(16 * var(--ref-motion-duration-frame));
   --sys-motion-duration-medium-out: calc(12 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-large-in: calc(18 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-large-out: calc(16 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-large: calc(18 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-large-out: var(--sys-motion-duration-medium);
 
   --sys-motion-easing-linear: cubic-bezier(0.4, 0, 0.6, 1);
   --sys-motion-easing-incoming: cubic-bezier(0, 0, 0.2, 1);