diff --git a/src/app/pages/component-viewer/token-table.scss b/src/app/pages/component-viewer/token-table.scss
index 0defe3e7..088b21c7 100644
--- a/src/app/pages/component-viewer/token-table.scss
+++ b/src/app/pages/component-viewer/token-table.scss
@@ -10,7 +10,7 @@ thead {
   position: sticky;
   top: 0;
   left: 0;
-  background: #fdfbff;
+  background: var(--mat-sys-surface);
   z-index: 1;
 }
 
@@ -19,10 +19,8 @@ thead {
   align-items: center;
   margin: 24px 0;
   width: 100%;
-}
-
-.filters mat-form-field {
-  margin-right: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
 }
 
 .name-field {
diff --git a/src/app/pages/component-viewer/token-table.ts b/src/app/pages/component-viewer/token-table.ts
index 1e3b4d90..7001074a 100644
--- a/src/app/pages/component-viewer/token-table.ts
+++ b/src/app/pages/component-viewer/token-table.ts
@@ -38,11 +38,11 @@ export class TokenTable {
   protected typeFilter = signal<TokenType | null>(null);
   protected types: TokenType[] = ['base', 'color', 'typography', 'density'];
   protected filteredTokens = computed(() => {
-    const name = this.nameFilter().trim();
+    const name = this.nameFilter().trim().toLowerCase();
     const typeFilter = this.typeFilter();
 
     return this.tokens().filter(token =>
-      (!name || token.overridesName.includes(name)) &&
+      (!name || token.overridesName.toLowerCase().includes(name)) &&
       (!typeFilter || token.type === typeFilter));
   });