diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts
new file mode 100644
index 000000000..8ee0e3212
--- /dev/null
+++ b/ui/demo-pwa/src/page-card.ts
@@ -0,0 +1,65 @@
+import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
+
+import '@alwatr/ui-kit/card/card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-card': AlwatrPageCard;
+  }
+}
+
+/**
+ * Alwatr Demo Home Page
+ */
+@customElement('alwatr-page-card')
+export class AlwatrPageCard extends AlwatrSmartElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      padding: var(--sys-spacing-track);
+      box-sizing: border-box;
+      height: 100%;
+      gap: var(--sys-spacing-track);
+    }
+
+    alwatr-card {
+      flex-grow: 1;
+      display: flex;
+      align-items: flex-end;
+      width: 25%;
+      user-select: none;
+    }
+
+    input {
+      padding: var(--sys-spacing-track);
+      color: inherit;
+      background-color: transparent;
+      border: 0;
+      border-bottom: 1px solid transparent;
+    }
+
+    input:focus {
+      border-bottom-color: currentColor;
+      outline: 0;
+    }
+  `;
+
+  override render(): unknown {
+    super.render();
+    return html`
+      <alwatr-card type="elevated"><input type="text" value="elevated"/></alwatr-card>
+      <alwatr-card type="elevated"><input type="text" value="elevated"/></alwatr-card>
+      <alwatr-card type="elevated" disabled><input type="text" value="elevated" disabled/></alwatr-card>
+      <alwatr-card type="filled"><input type="text" value="filled"/></alwatr-card>
+      <alwatr-card type="filled"><input type="text" value="filled"/></alwatr-card>
+      <alwatr-card type="filled" disabled><input type="text" value="filled" disabled/></alwatr-card>
+      <alwatr-card type="outlined"><input type="text" value="outlined"/></alwatr-card>
+      <alwatr-card type="outlined"><input type="text" value="outlined"/></alwatr-card>
+      <alwatr-card type="outlined" disabled><input type="text" value="outlined" disabled/></alwatr-card>
+      <alwatr-card type="outlined"><input type="text" value="outlined"/></alwatr-card>
+      <alwatr-card type="elevated"><input type="text" value="elevated"/></alwatr-card>
+      <alwatr-card type="filled"><input type="text" value="filled"/></alwatr-card>
+    `;
+  }
+}
diff --git a/ui/demo-pwa/src/pwa-root.ts b/ui/demo-pwa/src/pwa-root.ts
index 218bc89a3..10bfa48c9 100644
--- a/ui/demo-pwa/src/pwa-root.ts
+++ b/ui/demo-pwa/src/pwa-root.ts
@@ -1,7 +1,7 @@
-import {AlwatrRootElement, html} from '@alwatr/element';
-import {customElement} from 'lit/decorators.js';
+import {AlwatrRootElement, html, customElement} from '@alwatr/element';
 
 import './page-chat.js';
+import './page-card.js';
 
 import type {RoutesConfig} from '@alwatr/router';
 
@@ -22,6 +22,9 @@ export class AlwatrPwaRoot extends AlwatrRootElement {
       home: {
         render: () => html`<alwatr-page-chat></alwatr-page-chat>`,
       },
+      card: {
+        render: () => html`<alwatr-page-card></alwatr-page-card>`,
+      },
     },
   };
 }
diff --git a/ui/demo-pwa/style/tokens/elevation.css b/ui/demo-pwa/style/tokens/elevation.css
index 39eea3796..2006641f8 100644
--- a/ui/demo-pwa/style/tokens/elevation.css
+++ b/ui/demo-pwa/style/tokens/elevation.css
@@ -1,127 +1,127 @@
 :root {
   --elevation-0:
-    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
-    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
-    0px 0px 0px 0px rgba(0, 0, 0, 0.12)
+    0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-1:
-    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+    0px 2px 1px -1px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 1px 1px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 1px 3px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-2:
-    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 5px 0px rgba(0, 0, 0, 0.12)
+    0px 3px 1px -2px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 2px 2px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 1px 5px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-3:
-    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 8px 0px rgba(0, 0, 0, 0.12)
+    0px 3px 3px -2px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 3px 4px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 1px 8px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-4:
-    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+    0px 2px 4px -1px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 4px 5px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 1px 10px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-5:
-    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 14px 0px rgba(0, 0, 0, 0.12)
+    0px 3px 5px -1px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 5px 8px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 1px 14px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-6:
-    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 18px 0px rgba(0, 0, 0, 0.12)
+    0px 3px 5px -1px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 6px 10px 0px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 1px 18px 0px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-7:
-    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
-    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
-    0px 2px 16px 1px rgba(0, 0, 0, 0.12)
+    0px 4px 5px -2px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 7px 10px 1px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 2px 16px 1px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-8:
-    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0px 3px 14px 2px rgba(0, 0, 0, 0.12)
+    0px 5px 5px -3px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 8px 10px 1px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 3px 14px 2px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-9:
-    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
-    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
-    0px 3px 16px 2px rgba(0, 0, 0, 0.12)
+    0px 5px 6px -3px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 9px 12px 1px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 3px 16px 2px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-10:
-    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
-    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
-    0px 4px 18px 3px rgba(0, 0, 0, 0.12)
+    0px 6px 6px -3px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 10px 14px 1px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 4px 18px 3px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-11:
-    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
-    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
-    0px 4px 20px 3px rgba(0, 0, 0, 0.12)
+    0px 6px 7px -4px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 11px 15px 1px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 4px 20px 3px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-12:
-    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
-    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
-    0px 5px 22px 4px rgba(0, 0, 0, 0.12)
+    0px 7px 8px -4px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 12px 17px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 5px 22px 4px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-13:
-    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
-    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
-    0px 5px 24px 4px rgba(0, 0, 0, 0.12)
+    0px 7px 8px -4px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 13px 19px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 5px 24px 4px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-14:
-    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
-    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
-    0px 5px 26px 4px rgba(0, 0, 0, 0.12)
+    0px 7px 9px -4px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 14px 21px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 5px 26px 4px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-15:
-    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
-    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
-    0px 6px 28px 5px rgba(0, 0, 0, 0.12)
+    0px 8px 9px -5px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 15px 22px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 6px 28px 5px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-16:
-    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
-    0px 6px 30px 5px rgba(0, 0, 0, 0.12)
+    0px 8px 10px -5px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 16px 24px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 6px 30px 5px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-17:
-    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
-    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
-    0px 6px 32px 5px rgba(0, 0, 0, 0.12)
+    0px 8px 11px -5px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 17px 26px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 6px 32px 5px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-18:
-    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
-    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
-    0px 7px 34px 6px rgba(0, 0, 0, 0.12)
+    0px 9px 11px -5px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 18px 28px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 7px 34px 6px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-19:
-    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
-    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
-    0px 7px 36px 6px rgba(0, 0, 0, 0.12)
+    0px 9px 12px -6px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 19px 29px 2px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 7px 36px 6px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-20:
-    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
-    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
-    0px 8px 38px 7px rgba(0, 0, 0, 0.12)
+    0px 10px 13px -6px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 20px 31px 3px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 8px 38px 7px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-21:
-    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
-    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
-    0px 8px 40px 7px rgba(0, 0, 0, 0.12)
+    0px 10px 13px -6px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 21px 33px 3px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 8px 40px 7px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-22:
-    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
-    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
-    0px 8px 42px 7px rgba(0, 0, 0, 0.12)
+    0px 10px 14px -6px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 22px 35px 3px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 8px 42px 7px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-23:
-    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
-    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
-    0px 9px 44px 8px rgba(0, 0, 0, 0.12)
+    0px 11px 14px -7px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 23px 36px 3px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 9px 44px 8px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
   --elevation-24:
-    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
-    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
-    0px 9px 46px 8px rgba(0, 0, 0, 0.12)
+    0px 11px 15px -7px hsla(var(--sys-color-shadow-hsl), 0.2),
+    0px 24px 38px 3px hsla(var(--sys-color-shadow-hsl), 0.14),
+    0px 9px 46px 8px hsla(var(--sys-color-shadow-hsl), 0.12)
   ;
 }
diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css
index 56914eb5d..bebc7124c 100644
--- a/ui/demo-pwa/style/tokens/palette.css
+++ b/ui/demo-pwa/style/tokens/palette.css
@@ -1,8 +1,9 @@
 :root {
-  --ref-palette-primary-hue: 207;
-  --ref-palette-secondary-hue: calc(var(--ref-palette-primary-hue) + 12);
-  --ref-palette-tertiary-hue: calc(var(--ref-palette-primary-hue) + 70);
-  --ref-palette-neutral-hue: calc(var(--ref-palette-primary-hue) + 20);
+  --ref-palette-primary-hue: 256;
+  --ref-palette-secondary-hue: 260; /* calc(var(--ref-palette-primary-hue) + 12); */
+  --ref-palette-tertiary-hue: 340; /* calc(var(--ref-palette-primary-hue) + 70); */
+  --ref-palette-neutral-hue: 342; /* calc(var(--ref-palette-primary-hue) + 20); */
+  --ref-palette-neutral-variant-hue: 270; /* calc(var(--ref-palette-primary-hue) + 20); */
   --ref-palette-error-hue: 356;
 
   /* primary */
@@ -78,22 +79,22 @@
   --ref-palette-neutral100: var(--ref-palette-neutral-hue), 100%, 100%;
 
   /* neutral-variant */
-  --ref-palette-neutral-variant0: var(--ref-palette-neutral-hue), 0%, 0%;
-  --ref-palette-neutral-variant10: var(--ref-palette-neutral-hue), 17%, 11%;
-  --ref-palette-neutral-variant20: var(--ref-palette-neutral-hue), 11%, 20%;
-  --ref-palette-neutral-variant25: var(--ref-palette-neutral-hue), 9%, 24%;
-  --ref-palette-neutral-variant30: var(--ref-palette-neutral-hue), 8%, 28%;
-  --ref-palette-neutral-variant35: var(--ref-palette-neutral-hue), 7%, 33%;
-  --ref-palette-neutral-variant40: var(--ref-palette-neutral-hue), 6%, 38%;
-  --ref-palette-neutral-variant50: var(--ref-palette-neutral-hue), 5%, 48%;
-  --ref-palette-neutral-variant60: var(--ref-palette-neutral-hue), 5.6%, 58%;
-  --ref-palette-neutral-variant70: var(--ref-palette-neutral-hue), 7.4%, 68%;
-  --ref-palette-neutral-variant80: var(--ref-palette-neutral-hue), 11.1%, 79%;
-  --ref-palette-neutral-variant90: var(--ref-palette-neutral-hue), 23.1%, 90%;
-  --ref-palette-neutral-variant95: var(--ref-palette-neutral-hue), 54.5%, 95%;
-  --ref-palette-neutral-variant98: var(--ref-palette-neutral-hue), 100%, 98%;
-  --ref-palette-neutral-variant99: var(--ref-palette-neutral-hue), 100%, 99%;
-  --ref-palette-neutral-variant100: var(--ref-palette-neutral-hue), 100%, 100%;
+  --ref-palette-neutral-variant0: var(--ref-palette-neutral-variant-hue), 0%, 0%;
+  --ref-palette-neutral-variant10: var(--ref-palette-neutral-variant-hue), 17%, 11%;
+  --ref-palette-neutral-variant20: var(--ref-palette-neutral-variant-hue), 11%, 20%;
+  --ref-palette-neutral-variant25: var(--ref-palette-neutral-variant-hue), 9%, 24%;
+  --ref-palette-neutral-variant30: var(--ref-palette-neutral-variant-hue), 8%, 28%;
+  --ref-palette-neutral-variant35: var(--ref-palette-neutral-variant-hue), 7%, 33%;
+  --ref-palette-neutral-variant40: var(--ref-palette-neutral-variant-hue), 6%, 38%;
+  --ref-palette-neutral-variant50: var(--ref-palette-neutral-variant-hue), 5%, 48%;
+  --ref-palette-neutral-variant60: var(--ref-palette-neutral-variant-hue), 5.6%, 58%;
+  --ref-palette-neutral-variant70: var(--ref-palette-neutral-variant-hue), 7.4%, 68%;
+  --ref-palette-neutral-variant80: var(--ref-palette-neutral-variant-hue), 11.1%, 79%;
+  --ref-palette-neutral-variant90: var(--ref-palette-neutral-variant-hue), 23.1%, 90%;
+  --ref-palette-neutral-variant95: var(--ref-palette-neutral-variant-hue), 54.5%, 95%;
+  --ref-palette-neutral-variant98: var(--ref-palette-neutral-variant-hue), 100%, 98%;
+  --ref-palette-neutral-variant99: var(--ref-palette-neutral-variant-hue), 100%, 99%;
+  --ref-palette-neutral-variant100: var(--ref-palette-neutral-variant-hue), 100%, 100%;
 
   /* error */
   --ref-palette-error0: var(--ref-palette-error-hue), 0%, 0%;
@@ -131,8 +132,8 @@
   --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary90);
   --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary10);
 
-  /* --sys-color-background-hsl: var(--ref-palette-neutral99); */
-  --sys-color-background-hsl: var(--ref-palette-neutral95);
+  --sys-color-background-hsl: var(--ref-palette-neutral98);
+  /* --sys-color-background-hsl: var(--ref-palette-neutral95); */
   --sys-color-on-background-hsl: var(--ref-palette-neutral10);
 
   --sys-color-surface-hsl: var(--ref-palette-neutral99);
@@ -217,8 +218,8 @@
     --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary30);
     --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary90);
 
-    /* --sys-color-background-hsl: var(--ref-palette-neutral10); */
-    --sys-color-background-hsl: var(--ref-palette-neutral20);
+    --sys-color-background-hsl: var(--ref-palette-neutral10);
+    /* --sys-color-background-hsl: var(--ref-palette-neutral20); */
     --sys-color-on-background-hsl: var(--ref-palette-neutral90);
 
     --sys-color-surface-hsl: var(--ref-palette-neutral10);
diff --git a/ui/demo-pwa/web-dev-server.config.js b/ui/demo-pwa/web-dev-server.config.js
index 037818a25..e8bd8ec0c 100644
--- a/ui/demo-pwa/web-dev-server.config.js
+++ b/ui/demo-pwa/web-dev-server.config.js
@@ -1,9 +1,11 @@
+import {existsSync} from 'node:fs';
+
 // https://modern-web.dev/docs/dev-server/cli-and-configuration/#configuration-file
-export default {
+const config = {
   port: 8080,
   open: true,
   watch: true,
-  // appIndex: 'index.html',
+  appIndex: 'index.html',
   nodeResolve: {
     exportConditions: ['development']
   },
@@ -13,5 +15,17 @@ export default {
   // debug: false,
   preserveSymlinks: true,
   plugins: [],
-  middleware: [],
+  middleware: [(context, next) => {
+    // if file not found, return app index.html
+    if (!(
+      context.url === '/' ||
+      context.url.startsWith('/__w') ||
+      existsSync(config.rootDir + context.url)
+    )) {
+      context.url = config.appIndex;
+    }
+    return next();
+  }],
 };
+
+export default config;
diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts
new file mode 100644
index 000000000..71025a33f
--- /dev/null
+++ b/ui/ui-kit/src/card/card.ts
@@ -0,0 +1,70 @@
+import {AlwatrDummyElement, css, customElement, html} from '@alwatr/element';
+
+import {focusRingStyle} from '../style/helper/focus-ring.js';
+
+import type {CSSResultGroup} from '@alwatr/element';
+
+export type CardType = 'elevated' | 'filled' | 'outlined';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-card': AlwatrCard;
+  }
+}
+
+/**
+ * Alwatr Card Base Element
+ *
+ * @attr {elevated|filled|outlined} type
+ * @attr {boolean} disabled
+ */
+@customElement('alwatr-card')
+export class AlwatrCard extends AlwatrDummyElement {
+  static override styles: CSSResultGroup = [
+    focusRingStyle,
+    css`
+      :host /* filled */ {
+        --_color-hsl: var(--sys-color-on-surface-variant-hsl);
+        display: block;
+        padding: calc(2 * var(--sys-spacing-track));
+        border-radius: var(--sys-radius-medium);
+        box-shadow: var(--elevation-0);
+        background-color: var(--sys-color-surface-variant);
+        transition: box-shadow var(--sys-motion-duration-small-out) var(--sys-motion-easing-linear);
+      }
+
+      :host(:hover:not(:active)) {
+        box-shadow: var(--elevation-1);
+      }
+
+      :host([type='elevated']) {
+        --_color-hsl: var(--sys-color-on-surface-hsl);
+        box-shadow: var(--elevation-1);
+        background-color: var(--sys-color-surface);
+      }
+
+      :host([type='elevated']:hover:not(:active)) {
+        box-shadow: var(--elevation-2);
+      }
+
+      :host([type='elevated']:active) {
+        box-shadow: var(--elevation-1);
+      }
+
+      :host([type='outlined']) {
+        --_color-hsl: var(--sys-color-on-surface-hsl);
+        background-color: var(--sys-color-surface);
+        border: 1px solid var(--sys-color-outline);
+      }
+
+      :host([type='outlined'][disabled]) {
+        opacity: 0.12;
+      }
+    `,
+  ];
+
+  override render(): unknown {
+    super.render();
+    return html`<slot></slot>`;
+  }
+}
diff --git a/ui/ui-kit/src/chat/chat.ts b/ui/ui-kit/src/chat/chat.ts
index aab77a865..9014699dd 100644
--- a/ui/ui-kit/src/chat/chat.ts
+++ b/ui/ui-kit/src/chat/chat.ts
@@ -122,8 +122,8 @@ export class AlwatrChat extends AlwatrSmartElement {
 
     alwatr-chat-list {
       height: 100%;
-      color: var(--sys-color-on-secondary-container);
-      background-color: var(--sys-color-secondary-container);
+      color: var(--sys-color-on-surface-variant);
+      background-color: var(--sys-color-surface-variant);
       padding-bottom: calc(12 * var(--sys-spacing-track));
     }
 
diff --git a/ui/ui-kit/src/style/helper/focus-ring.ts b/ui/ui-kit/src/style/helper/focus-ring.ts
index 174e54cf0..25557ff19 100644
--- a/ui/ui-kit/src/style/helper/focus-ring.ts
+++ b/ui/ui-kit/src/style/helper/focus-ring.ts
@@ -3,6 +3,7 @@ import {css} from '@alwatr/element';
 export const focusRingStyle = css`
   :host {
     color: hsl(var(--_color-hsl, 0, 100%, 50%));
+    outline: 0;
   }
 
   :host(:hover) {
@@ -19,10 +20,17 @@ export const focusRingStyle = css`
     );
   }
 
-  :host(:focus) {
+  :host(:focus),
+  :host(:focus-within) {
     background-image: linear-gradient(
       hsla(var(--_color-hsl), var(--sys-opacity-focus)),
       hsla(var(--_color-hsl), var(--sys-opacity-focus))
     );
   }
+
+  :host([disabled]) {
+    opacity: 0.38;
+    pointer-events: none;
+    box-shadow: var(--elevation-0) !important;
+  }
 `;