diff --git a/projects/frontend/apps/experiment-portal/src/App.scss b/projects/frontend/apps/experiment-portal/src/App.scss
index 73272bed..38755ed3 100644
--- a/projects/frontend/apps/experiment-portal/src/App.scss
+++ b/projects/frontend/apps/experiment-portal/src/App.scss
@@ -46,7 +46,7 @@
   min-height: 40px;
   padding: 0 18px;
   border: 1px solid var(--border-soft);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-pill);
   background: #fff;
   color: var(--text);
   font-size: 0.875rem;
diff --git a/projects/frontend/apps/experiment-portal/src/components/common/LiveSwitch.scss b/projects/frontend/apps/experiment-portal/src/components/common/LiveSwitch.scss
new file mode 100644
index 00000000..8f1f877e
--- /dev/null
+++ b/projects/frontend/apps/experiment-portal/src/components/common/LiveSwitch.scss
@@ -0,0 +1,76 @@
+@import '../../styles/colors';
+
+.liveswitch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 12px;
+  border-radius: var(--radius-pill);
+  border: 1px solid $input-border;
+  background: #fff;
+  user-select: none;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease;
+  flex: 0 0 auto;
+  white-space: nowrap;
+
+  &:hover { border-color: $outline-muted; }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+    border-color: $primary;
+  }
+}
+
+.liveswitch__track {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  border-radius: 999px;
+  background: $input-border;
+  transition: background 0.2s ease;
+  flex: none;
+}
+
+.liveswitch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
+  transition: transform 0.2s ease;
+}
+
+.liveswitch--on .liveswitch__track { background: $primary; }
+.liveswitch--on .liveswitch__thumb { transform: translateX(14px); }
+
+.liveswitch__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: $input-border;
+  flex: none;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.liveswitch--on .liveswitch__dot {
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+  animation: live-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes live-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
+  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.06); }
+}
+
+.liveswitch__label {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: $text;
+}
diff --git a/projects/frontend/apps/experiment-portal/src/components/common/LiveSwitch.tsx b/projects/frontend/apps/experiment-portal/src/components/common/LiveSwitch.tsx
new file mode 100644
index 00000000..5c66036d
--- /dev/null
+++ b/projects/frontend/apps/experiment-portal/src/components/common/LiveSwitch.tsx
@@ -0,0 +1,35 @@
+import './LiveSwitch.scss'
+
+interface LiveSwitchProps {
+  live: boolean
+  onChange: (live: boolean) => void
+  labelOn?: string
+  labelOff?: string
+}
+
+function LiveSwitch({ live, onChange, labelOn = 'Live', labelOff = 'History' }: LiveSwitchProps) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      onChange(!live)
+    }
+  }
+  return (
+    <div
+      className={`liveswitch${live ? ' liveswitch--on' : ''}`}
+      role="switch"
+      aria-checked={live}
+      tabIndex={0}
+      onClick={() => onChange(!live)}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="liveswitch__track">
+        <div className="liveswitch__thumb" />
+      </div>
+      <span className="liveswitch__dot" />
+      <span className="liveswitch__label">{live ? labelOn : labelOff}</span>
+    </div>
+  )
+}
+
+export default LiveSwitch
diff --git a/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.scss b/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.scss
index 0429382c..0fbf27f4 100644
--- a/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.scss
+++ b/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.scss
@@ -165,3 +165,110 @@
   padding-bottom: 9px;
   font-size: 0.88rem;
 }
+
+// ── Pill variant (B1 capsule style) ──
+.md-select--pill .md-select__label {
+  display: none;
+}
+
+.md-select--pill .md-select__control {
+  min-height: 40px;
+  border-radius: var(--radius-pill);
+  border-color: $input-border;
+  background: #fff;
+}
+
+.md-select--pill .md-select__control:hover {
+  border-color: $outline-muted;
+  background: #f8fafc;
+}
+
+.md-select--pill .md-select__control--open {
+  border-color: $primary;
+  box-shadow: var(--focus-ring);
+  background: #fff;
+}
+
+.md-select--pill .md-select__control--disabled {
+  opacity: 0.62;
+  background: $surface-variant;
+}
+
+.md-select--pill .md-select__trigger {
+  position: relative;
+  min-height: 40px;
+  padding: 0 28px 0 12px;
+  font-size: 0.85rem;
+  border-radius: var(--radius-pill);
+  gap: 6px;
+}
+
+.md-select--pill.md-select--has-icon .md-select__trigger {
+  padding-left: 10px;
+}
+
+.md-select__pill-icon {
+  color: $text-secondary;
+  flex: none;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s ease;
+}
+
+.md-select--pill .md-select__control--open .md-select__pill-icon {
+  color: $primary;
+}
+
+.md-select--pill .md-select__icon {
+  right: 10px;
+  width: 14px;
+  height: 14px;
+  color: $text-secondary;
+  transition: transform 0.2s ease, color 0.15s ease;
+}
+
+.md-select--pill .md-select__control--open .md-select__icon {
+  color: $primary;
+}
+
+.md-select__float-label {
+  position: absolute;
+  left: 36px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.85rem;
+  color: $text-secondary;
+  pointer-events: none;
+  background: #fff;
+  padding: 0 3px;
+  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, left 0.15s ease, transform 0.15s ease;
+  white-space: nowrap;
+}
+
+.md-select--pill:not(.md-select--has-icon) .md-select__float-label {
+  left: 12px;
+}
+
+.md-select__float-label.is-floating {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.63rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: $primary;
+  left: 10px;
+}
+
+.md-select--pill .md-select__control--open .md-select__float-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.63rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: $primary;
+  left: 10px;
+}
+
+.md-select--pill .md-select__value {
+  font-size: 0.85rem;
+}
diff --git a/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.tsx b/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.tsx
index 1de64d98..d607ccfe 100644
--- a/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.tsx
+++ b/projects/frontend/apps/experiment-portal/src/components/common/MaterialSelect.tsx
@@ -27,6 +27,8 @@ type MaterialSelectProps = {
     multiple?: boolean
     size?: number
     placeholder?: string
+    icon?: ReactNode
+    variant?: 'default' | 'pill'
 }
 
 function MaterialSelect({
@@ -43,6 +45,8 @@ function MaterialSelect({
     multiple = false,
     size,
     placeholder = '',
+    icon,
+    variant = 'default',
 }: MaterialSelectProps) {
     const [isOpen, setIsOpen] = useState(false)
     const menuRef = useRef<HTMLDivElement | null>(null)
@@ -202,9 +206,19 @@ function MaterialSelect({
             setIsOpen(false)
         }
     }
+    const isPill = variant === 'pill'
+    const rootClass = [
+        'md-select',
+        isPill ? 'md-select--pill' : '',
+        isPill && icon ? 'md-select--has-icon' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ')
+
     return (
-        <div className={`md-select ${className}`.trim()}>
-            {label && (
+        <div className={rootClass}>
+            {label && !isPill && (
                 <label className="md-select__label" htmlFor={id}>
                     {label}
                 </label>
@@ -233,17 +247,30 @@ function MaterialSelect({
                             id={id}
                             ref={triggerRef}
                             type="button"
-                            className="md-select__trigger"
+                            className={`md-select__trigger${isPill ? ' md-select__trigger--pill' : ''}`}
                             onClick={toggleMenu}
                             onKeyDown={handleTriggerKeyDown}
                             disabled={isDisabled}
                             aria-haspopup="listbox"
                             aria-expanded={isOpen}
                             aria-controls={listboxId}
+                            aria-label={isPill && label ? label : undefined}
                         >
+                            {isPill && icon && (
+                                <span className="md-select__pill-icon">{icon}</span>
+                            )}
                             <span className={`md-select__value${selectedValue ? '' : ' is-placeholder'}`}>
-                                {selectedLabel || placeholder}
+                                {isPill ? (selectedValue ? selectedLabel : '') : (selectedLabel || placeholder)}
                             </span>
+                            {isPill && label && (
+                                <span
+                                    className={`md-select__float-label${
+                                        selectedValue || isOpen ? ' is-floating' : ''
+                                    }`}
+                                >
+                                    {label}
+                                </span>
+                            )}
                             <svg
                                 className="md-select__icon"
                                 viewBox="0 0 24 24"
diff --git a/projects/frontend/apps/experiment-portal/src/components/common/index.ts b/projects/frontend/apps/experiment-portal/src/components/common/index.ts
index 48c1b95a..2feb58ac 100644
--- a/projects/frontend/apps/experiment-portal/src/components/common/index.ts
+++ b/projects/frontend/apps/experiment-portal/src/components/common/index.ts
@@ -1,3 +1,4 @@
+export { default as LiveSwitch } from './LiveSwitch'
 export { default as StatusBadge } from './StatusBadge'
 export { default as ConnectionStatusIndicator } from './ConnectionStatusIndicator'
 export { default as Loading } from './Loading'
diff --git a/projects/frontend/apps/experiment-portal/src/pages/AuditLog.scss b/projects/frontend/apps/experiment-portal/src/pages/AuditLog.scss
index 7f21bbda..732a92e5 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/AuditLog.scss
+++ b/projects/frontend/apps/experiment-portal/src/pages/AuditLog.scss
@@ -17,53 +17,40 @@
   }
 }
 
-.audit-log-filters {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px;
+.audit-filter-capsule {
+  flex-wrap: wrap;
 
-  &__fields {
+  &__date-range {
     display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-
-    .form-group {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      min-width: 160px;
-      flex: 1 1 160px;
-
-      label {
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: var(--color-text-secondary, #888);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-
-      input {
-        padding: 6px 10px;
-        border: 1px solid var(--outline);
-        border-radius: var(--radius-sm);
-        background: #fff;
-        color: var(--text);
-        font-size: 0.875rem;
-
-        &:focus {
-          outline: none;
-          border-color: var(--primary);
-          box-shadow: var(--focus-ring);
-        }
+    align-items: center;
+    gap: 6px;
+    height: 40px;
+    padding: 0 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: var(--radius-pill);
+    background: #fff;
+    flex: 0 0 auto;
+
+    input[type='date'] {
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: 0.82rem;
+      color: var(--text);
+      width: 120px;
+      cursor: pointer;
+
+      &::-webkit-calendar-picker-indicator {
+        opacity: 0.5;
+        cursor: pointer;
       }
     }
   }
 
-  &__actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
+  &__date-sep {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    flex: none;
   }
 }
 
diff --git a/projects/frontend/apps/experiment-portal/src/pages/AuditLog.tsx b/projects/frontend/apps/experiment-portal/src/pages/AuditLog.tsx
index 04f92376..9c5b0a4c 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/AuditLog.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/AuditLog.tsx
@@ -5,7 +5,7 @@ import { format } from 'date-fns'
 import { auditApi } from '../api/audit'
 import type { AuditEntry } from '../types/permissions'
 import { usePermissions } from '../hooks/usePermissions'
-import { Loading, Error as ErrorComponent, EmptyState, Pagination } from '../components/common'
+import { Loading, Error as ErrorComponent, EmptyState, Pagination, MaterialSelect } from '../components/common'
 import Modal from '../components/Modal'
 import { notifyError } from '../utils/notify'
 import './AuditLog.scss'
@@ -96,65 +96,62 @@ function AuditLog() {
     <div className="audit-log-page">
       <h2 className="audit-log-page__title">Аудит-лог</h2>
 
-      <div className="audit-log-filters card">
-        <div className="audit-log-filters__fields">
-          <div className="form-group">
-            <label htmlFor="al-actor-id">Пользователь (ID)</label>
-            <input
-              id="al-actor-id"
-              type="text"
-              placeholder="UUID пользователя"
-              value={draftActorId}
-              onChange={(e) => setDraftActorId(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="al-action">Действие</label>
-            <input
-              id="al-action"
-              type="text"
-              placeholder="user.login, experiment.create"
-              value={draftAction}
-              onChange={(e) => setDraftAction(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="al-scope-type">Тип области</label>
-            <input
-              id="al-scope-type"
-              type="text"
-              placeholder="project, experiment"
-              value={draftScopeType}
-              onChange={(e) => setDraftScopeType(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="al-from">С</label>
-            <input
-              id="al-from"
-              type="date"
-              value={draftFrom}
-              onChange={(e) => setDraftFrom(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="al-to">По</label>
-            <input
-              id="al-to"
-              type="date"
-              value={draftTo}
-              onChange={(e) => setDraftTo(e.target.value)}
-            />
-          </div>
+      <div className="filter-capsule audit-filter-capsule">
+        <div className="filter-capsule__search filter-capsule__search--constrained">
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none"><path d="M3 6h14M3 10h9M3 14h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
+          <input
+            type="text"
+            placeholder="Действие (user.login...)"
+            value={draftAction}
+            onChange={(e) => setDraftAction(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleApply()}
+            aria-label="Фильтр по действию"
+          />
         </div>
-        <div className="audit-log-filters__actions">
-          <button className="btn btn-primary btn-sm" onClick={handleApply}>
-            Применить
-          </button>
-          <button className="btn btn-secondary btn-sm" onClick={handleReset}>
-            Сбросить
-          </button>
+        <div className="filter-capsule__search filter-capsule__search--constrained">
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke="currentColor" strokeWidth="1.5"/><path d="M4 16.5c.9-2.6 3.2-4 6-4s5.1 1.4 6 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
+          <input
+            type="text"
+            placeholder="UUID пользователя"
+            value={draftActorId}
+            onChange={(e) => setDraftActorId(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleApply()}
+            aria-label="Фильтр по пользователю"
+          />
+        </div>
+        <MaterialSelect
+          id="al-scope-type"
+          label="Область"
+          value={draftScopeType}
+          onChange={(v) => setDraftScopeType(v)}
+          variant="pill"
+          icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.4"/><rect x="11" y="3" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.4"/><rect x="3" y="11" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.4"/><rect x="11" y="11" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.4"/></svg>}
+        >
+          <option value="">Все</option>
+          <option value="system">Система</option>
+          <option value="project">Проект</option>
+        </MaterialSelect>
+        <div className="audit-filter-capsule__date-range">
+          <input
+            type="date"
+            value={draftFrom}
+            onChange={(e) => setDraftFrom(e.target.value)}
+            aria-label="Дата с"
+          />
+          <span className="audit-filter-capsule__date-sep">—</span>
+          <input
+            type="date"
+            value={draftTo}
+            onChange={(e) => setDraftTo(e.target.value)}
+            aria-label="Дата по"
+          />
         </div>
+        <button className="btn btn-primary btn-sm filter-capsule__btn" onClick={handleApply}>
+          Применить
+        </button>
+        <button className="btn btn-secondary btn-sm filter-capsule__btn" onClick={handleReset}>
+          Сбросить
+        </button>
       </div>
 
       {isLoading && <Loading message="Загрузка аудит-лога..." />}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.scss b/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.scss
index 637cc6d1..77245e36 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.scss
+++ b/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.scss
@@ -109,6 +109,17 @@
   color: var(--primary-hover);
 }
 
+.experiments-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.experiments-filter-row .experiments-filter-actions {
+  flex: 0 0 auto;
+}
+
 @media (max-width: 720px) {
   .filter-panel__header,
   .experiments-filter-actions,
@@ -117,4 +128,17 @@
     flex-direction: column;
     align-items: stretch;
   }
+
+  .experiments-filter-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .experiments-filter-row .filter-capsule {
+    flex-wrap: wrap;
+    border-radius: 18px;
+    padding: 8px;
+  }
+  .experiments-filter-row .filter-capsule > * {
+    flex: 1 1 45%;
+  }
 }
diff --git a/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.tsx b/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.tsx
index f6c314fc..c020ff7c 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/ExperimentsList.tsx
@@ -114,80 +114,39 @@ function ExperimentsList() {
 
       {!isBusy && !error && (
         <>
-          <div className="filters card filter-panel">
-            <div className="filter-panel__header">
-              <div>
-                <div className="filter-panel__title">Command Filters</div>
-                <p className="filter-panel__subtitle">
-                  Отберите нужный проект, статус или найдите эксперимент по названию и описанию.
-                </p>
-              </div>
-              <div className="experiments-filter-actions">
-                <button
-                  type="button"
-                  className="btn btn-secondary btn-sm"
-                  disabled={exporting || !projectId}
-                  onClick={() => handleExport('csv')}
-                >
-                  {exporting ? 'Экспорт...' : 'CSV'}
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-secondary btn-sm"
-                  disabled={exporting || !projectId}
-                  onClick={() => handleExport('json')}
-                >
-                  JSON
-                </button>
-              </div>
-            </div>
-
-            <div className="filters-grid">
-              <div className="form-group search-field">
-                <label htmlFor="experiment_search">Поиск</label>
-                <span className="search-field__icon" aria-hidden="true">
-                  / /
-                </span>
+          <div className="experiments-filter-row">
+            <div className="filter-capsule">
+              <div className="filter-capsule__search filter-capsule__search--constrained">
+                <svg width="15" height="15" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="5.5" stroke="currentColor" strokeWidth="1.6"/><path d="m13.5 13.5 3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                 <input
-                  id="experiment_search"
                   type="text"
                   placeholder="Название, описание..."
                   value={searchQuery}
-                  onChange={(e) => {
-                    setSearchQuery(e.target.value)
-                    setPage(1)
-                  }}
+                  onChange={(e) => { setSearchQuery(e.target.value); setPage(1) }}
                   disabled={isBusy}
                 />
               </div>
-
               <MaterialSelect
                 id="experiment_project_id"
                 label="Проект"
                 value={projectId}
-                onChange={(id) => {
-                  setProjectId(id)
-                  setActiveProjectId(id)
-                  setPage(1)
-                }}
+                onChange={(id) => { setProjectId(id); setActiveProjectId(id); setPage(1) }}
                 disabled={isBusy}
+                variant="pill"
+                icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M2.5 6.5A1.5 1.5 0 0 1 4 5h3.3a1.5 1.5 0 0 1 1.06.44l.94.94a1.5 1.5 0 0 0 1.06.44H16a1.5 1.5 0 0 1 1.5 1.5v6A1.5 1.5 0 0 1 16 15.82H4A1.5 1.5 0 0 1 2.5 14.3V6.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>}
               >
                 {projectsData?.projects?.map((project) => (
-                  <option key={project.id} value={project.id}>
-                    {project.name}
-                  </option>
+                  <option key={project.id} value={project.id}>{project.name}</option>
                 ))}
               </MaterialSelect>
-
               <MaterialSelect
                 id="experiment_status"
                 label="Статус"
                 value={status}
-                onChange={(value) => {
-                  setStatus(value)
-                  setPage(1)
-                }}
+                onChange={(value) => { setStatus(value); setPage(1) }}
                 disabled={isBusy}
+                variant="pill"
+                icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M10.5 3h5v5l-6.5 6.5a1.5 1.5 0 0 1-2.1 0l-2.9-2.9a1.5 1.5 0 0 1 0-2.1L10.5 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><circle cx="12.5" cy="6.5" r=".9" fill="currentColor"/></svg>}
               >
                 <option value="">Все</option>
                 <option value="created">Создан</option>
@@ -197,6 +156,14 @@ function ExperimentsList() {
                 <option value="archived">Архивирован</option>
               </MaterialSelect>
             </div>
+            <div className="experiments-filter-actions">
+              <button type="button" className="btn btn-secondary btn-sm" disabled={exporting || !projectId} onClick={() => handleExport('csv')}>
+                {exporting ? 'Экспорт...' : 'CSV'}
+              </button>
+              <button type="button" className="btn btn-secondary btn-sm" disabled={exporting || !projectId} onClick={() => handleExport('json')}>
+                JSON
+              </button>
+            </div>
           </div>
 
           {data && (
diff --git a/projects/frontend/apps/experiment-portal/src/pages/Login.scss b/projects/frontend/apps/experiment-portal/src/pages/Login.scss
index 5c365eff..57948e33 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/Login.scss
+++ b/projects/frontend/apps/experiment-portal/src/pages/Login.scss
@@ -16,3 +16,7 @@
   color: var(--text-secondary);
   font-size: 0.9rem;
 }
+
+.login-input-field input {
+  min-height: unset;
+}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/Login.tsx b/projects/frontend/apps/experiment-portal/src/pages/Login.tsx
index fdaf2631..5e39e548 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/Login.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/Login.tsx
@@ -102,30 +102,36 @@ function Login() {
           <form onSubmit={handleSubmit} className="login-form auth-form">
             <div className="form-group">
               <label htmlFor="username">Имя пользователя</label>
-              <input
-                id="username"
-                type="text"
-                value={formData.username}
-                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
-                required
-                autoComplete="username"
-                placeholder="Введите имя пользователя"
-                disabled={loginMutation.isPending}
-              />
+              <div className="login-input-field">
+                <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke="currentColor" strokeWidth="1.5"/><path d="M4 16.5c.9-2.6 3.2-4 6-4s5.1 1.4 6 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
+                <input
+                  id="username"
+                  type="text"
+                  value={formData.username}
+                  onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                  required
+                  autoComplete="username"
+                  placeholder="Введите имя пользователя"
+                  disabled={loginMutation.isPending}
+                />
+              </div>
             </div>
 
             <div className="form-group">
               <label htmlFor="password">Пароль</label>
-              <input
-                id="password"
-                type="password"
-                value={formData.password}
-                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                required
-                autoComplete="current-password"
-                placeholder="Введите пароль"
-                disabled={loginMutation.isPending}
-              />
+              <div className="login-input-field">
+                <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><rect x="4" y="9" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="1.5"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9" stroke="currentColor" strokeWidth="1.5"/></svg>
+                <input
+                  id="password"
+                  type="password"
+                  value={formData.password}
+                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                  required
+                  autoComplete="current-password"
+                  placeholder="Введите пароль"
+                  disabled={loginMutation.isPending}
+                />
+              </div>
             </div>
 
             <button
diff --git a/projects/frontend/apps/experiment-portal/src/pages/ProjectsList.tsx b/projects/frontend/apps/experiment-portal/src/pages/ProjectsList.tsx
index ab7e22f7..37560860 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/ProjectsList.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/ProjectsList.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import { useQuery } from '@tanstack/react-query'
 import { projectsApi } from '../api/client'
 import { authApi } from '../api/auth'
-import { Loading, Error, EmptyState, FloatingActionButton } from '../components/common'
+import { Loading, Error, EmptyState, FloatingActionButton, MaterialSelect } from '../components/common'
 import ProjectModal from '../components/ProjectModal'
 import ProjectMembersModal from '../components/ProjectMembersModal'
 import './ProjectsList.scss'
@@ -85,26 +85,29 @@ function ProjectsList() {
 
   return (
     <div className="projects-list">
-      <div className="projects-filters" style={{ display: 'flex', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
-        <input
-          type="text"
-          value={searchInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          placeholder="Поиск проектов..."
-          style={{ flex: '1 1 200px', minWidth: 160 }}
-          aria-label="Поиск проектов"
-        />
-        <select
+      <div className="filter-capsule projects-filter-capsule">
+        <div className="filter-capsule__search">
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="5.5" stroke="currentColor" strokeWidth="1.6"/><path d="m13.5 13.5 3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
+          <input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="Поиск проектов..."
+            aria-label="Поиск проектов"
+          />
+        </div>
+        <MaterialSelect
+          id="projects_role_filter"
+          label="Роль"
           value={roleFilter}
-          onChange={(e) => setRoleFilter(e.target.value)}
-          aria-label="Фильтр по роли"
+          onChange={(v) => setRoleFilter(v)}
+          variant="pill"
+          icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke="currentColor" strokeWidth="1.5"/><path d="M4 16.5c.9-2.6 3.2-4 6-4s5.1 1.4 6 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>}
         >
           {ROLE_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
-        </select>
+        </MaterialSelect>
       </div>
 
       {isLoading && <Loading message="Загрузка проектов..." />}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/Scripts.tsx b/projects/frontend/apps/experiment-portal/src/pages/Scripts.tsx
index 8f0512bc..82e551a5 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/Scripts.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/Scripts.tsx
@@ -5,7 +5,7 @@ import { scriptsApi } from '../api/scripts'
 import type { Script, ScriptExecution, ExecutionStatus, ScriptType } from '../types/scripts'
 import { usePermissions } from '../hooks/usePermissions'
 import PermissionGate from '../components/PermissionGate'
-import { Loading, Error as ErrorComponent, EmptyState } from '../components/common'
+import { Loading, Error as ErrorComponent, EmptyState, MaterialSelect, LiveSwitch } from '../components/common'
 import Modal from '../components/Modal'
 import { notifySuccess, notifyError } from '../utils/notify'
 import './Scripts.scss'
@@ -698,40 +698,31 @@ function RegistryTab({ onScriptExecuted: _onScriptExecuted }: RegistryTabProps)
 
   return (
     <>
-      <div className="scripts-filters card">
-        <div className="scripts-filters__fields">
-          <div className="form-group">
-            <label htmlFor="sf-filter-service">Сервис</label>
-            <input
-              id="sf-filter-service"
-              type="text"
-              placeholder="experiment-service"
-              value={filterService}
-              onChange={(e) => setFilterService(e.target.value)}
-            />
-          </div>
-          <div className="form-group form-group--checkbox">
-            <label htmlFor="sf-filter-active">
-              <input
-                id="sf-filter-active"
-                type="checkbox"
-                checked={filterActive === true}
-                onChange={(e) => setFilterActive(e.target.checked ? true : undefined)}
-              />
-              Только активные
-            </label>
-          </div>
-        </div>
-        <div className="scripts-filters__actions">
-          <PermissionGate permission="scripts.manage" system>
-            <button
-              className="btn btn-primary btn-sm"
-              onClick={() => setEditingScript(null)}
-            >
-              Создать скрипт
-            </button>
-          </PermissionGate>
+      <div className="filter-capsule scripts-filter-capsule">
+        <div className="filter-capsule__search filter-capsule__search--constrained">
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="2" rx="1" fill="currentColor"/><rect x="3" y="9" width="10" height="2" rx="1" fill="currentColor"/><rect x="3" y="14" width="7" height="2" rx="1" fill="currentColor"/></svg>
+          <input
+            type="text"
+            placeholder="Сервис..."
+            value={filterService}
+            onChange={(e) => setFilterService(e.target.value)}
+            aria-label="Фильтр по сервису"
+          />
         </div>
+        <LiveSwitch
+          live={filterActive === true}
+          onChange={(on) => setFilterActive(on ? true : undefined)}
+          labelOn="Активные"
+          labelOff="Все"
+        />
+        <PermissionGate permission="scripts.manage" system>
+          <button
+            className="btn btn-primary btn-sm filter-capsule__btn"
+            onClick={() => setEditingScript(null)}
+          >
+            + Создать
+          </button>
+        </PermissionGate>
       </div>
 
       {isLoading && <Loading message="Загрузка скриптов..." />}
@@ -900,35 +891,31 @@ function ExecutionsTab({ onTabChange: _onTabChange }: ExecutionsTabProps) {
 
   return (
     <>
-      <div className="scripts-filters card">
-        <div className="scripts-filters__fields">
-          <div className="form-group">
-            <label htmlFor="exec-filter-status">Статус</label>
-            <select
-              id="exec-filter-status"
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
-            >
-              <option value="">Все</option>
-              <option value="pending">Ожидание</option>
-              <option value="running">Выполняется</option>
-              <option value="completed">Завершён</option>
-              <option value="failed">Ошибка</option>
-              <option value="cancelled">Отменён</option>
-              <option value="timeout">Таймаут</option>
-            </select>
-          </div>
-        </div>
-        <div className="scripts-filters__actions">
-          <PermissionGate permission="scripts.execute" system>
-            <button
-              className="btn btn-primary btn-sm"
-              onClick={() => setShowExecuteModal(true)}
-            >
-              Запустить скрипт
-            </button>
-          </PermissionGate>
-        </div>
+      <div className="filter-capsule scripts-filter-capsule">
+        <MaterialSelect
+          id="exec-filter-status"
+          label="Статус"
+          value={statusFilter}
+          onChange={(v) => setStatusFilter(v)}
+          variant="pill"
+          icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="2" fill="currentColor"/><circle cx="10" cy="10" r="5" stroke="currentColor" strokeWidth="1.4"/><circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.2" opacity=".5"/></svg>}
+        >
+          <option value="">Все</option>
+          <option value="pending">Ожидание</option>
+          <option value="running">Выполняется</option>
+          <option value="completed">Завершён</option>
+          <option value="failed">Ошибка</option>
+          <option value="cancelled">Отменён</option>
+          <option value="timeout">Таймаут</option>
+        </MaterialSelect>
+        <PermissionGate permission="scripts.execute" system>
+          <button
+            className="btn btn-primary btn-sm filter-capsule__btn"
+            onClick={() => setShowExecuteModal(true)}
+          >
+            + Запустить
+          </button>
+        </PermissionGate>
       </div>
 
       {exLoading && <Loading message="Загрузка выполнений..." />}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/SensorMonitor.tsx b/projects/frontend/apps/experiment-portal/src/pages/SensorMonitor.tsx
index 96efe5a3..eceb72f5 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/SensorMonitor.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/SensorMonitor.tsx
@@ -82,44 +82,33 @@ function SensorMonitor() {
         <>
           {statusSummary && <SensorStatusSummaryBar summary={statusSummary} />}
 
-          <div className="card filter-panel">
-            <div className="filter-panel__header">
-              <div>
-                <div className="filter-panel__title">Фильтры монитора</div>
-                <p className="filter-panel__subtitle">
-                  Выберите проект и отфильтруйте датчики по статусу подключения.
-                </p>
-              </div>
-            </div>
-            <div className="filters-grid sensor-monitor__filters-grid">
-              <MaterialSelect
-                id="monitor_project_id"
-                label="Проект"
-                value={projectId}
-                onChange={(id) => setProjectId(id)}
-                disabled={projectsLoading}
-              >
-                <option value="">Все проекты</option>
-                {projectsData?.projects.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {p.name}
-                  </option>
-                ))}
-              </MaterialSelect>
-
-              <MaterialSelect
-                id="monitor_connection_status"
-                label="Подключение"
-                value={connectionFilter}
-                onChange={setConnectionFilter}
-              >
-                {CONNECTION_STATUS_OPTIONS.map((opt) => (
-                  <option key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </option>
-                ))}
-              </MaterialSelect>
-            </div>
+          <div className="filter-capsule">
+            <MaterialSelect
+              id="monitor_project_id"
+              label="Проект"
+              value={projectId}
+              onChange={(id) => setProjectId(id)}
+              disabled={projectsLoading}
+              variant="pill"
+              icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M2.5 6.5A1.5 1.5 0 0 1 4 5h3.3a1.5 1.5 0 0 1 1.06.44l.94.94a1.5 1.5 0 0 0 1.06.44H16a1.5 1.5 0 0 1 1.5 1.5v6A1.5 1.5 0 0 1 16 15.82H4A1.5 1.5 0 0 1 2.5 14.3V6.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>}
+            >
+              <option value="">Все проекты</option>
+              {projectsData?.projects.map((p) => (
+                <option key={p.id} value={p.id}>{p.name}</option>
+              ))}
+            </MaterialSelect>
+            <MaterialSelect
+              id="monitor_connection_status"
+              label="Подключение"
+              value={connectionFilter}
+              onChange={setConnectionFilter}
+              variant="pill"
+              icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="2" fill="currentColor"/><circle cx="10" cy="10" r="5" stroke="currentColor" strokeWidth="1.4"/><circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.2" opacity=".5"/></svg>}
+            >
+              {CONNECTION_STATUS_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </MaterialSelect>
           </div>
 
           {filteredSensors.length === 0 && (
diff --git a/projects/frontend/apps/experiment-portal/src/pages/SensorsList.scss b/projects/frontend/apps/experiment-portal/src/pages/SensorsList.scss
index f63b051e..a37e5d2a 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/SensorsList.scss
+++ b/projects/frontend/apps/experiment-portal/src/pages/SensorsList.scss
@@ -1,4 +1,5 @@
 @import '../styles/components';
+@import '../styles/colors';
 
 .sensors-list {
   display: flex;
@@ -139,3 +140,13 @@
     grid-column: span 12;
   }
 }
+
+.sensors-filter-capsule {
+  flex-wrap: wrap;
+
+  @media (max-width: 900px) {
+    border-radius: 18px;
+    padding: 8px;
+    > * { flex: 1 1 45%; }
+  }
+}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/SensorsList.tsx b/projects/frontend/apps/experiment-portal/src/pages/SensorsList.tsx
index 67817491..163e8292 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/SensorsList.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/SensorsList.tsx
@@ -25,6 +25,7 @@ function SensorsList() {
   const navigate = useNavigate()
   const [projectId, setProjectId] = useState<string>('')
   const [status, setStatus] = useState<string>('')
+  const [searchQuery, setSearchQuery] = useState<string>('')
   const [page, setPage] = useState(1)
   const [selectedSensorId, setSelectedSensorId] = useState<string | null>(null)
   const pageSize = 20
@@ -53,6 +54,10 @@ function SensorsList() {
     refetchInterval: 30_000,
   })
 
+  const filteredSensors = data?.sensors?.filter(s =>
+    !searchQuery || s.name.toLowerCase().includes(searchQuery.toLowerCase())
+  ) ?? []
+
   const formatLastHeartbeat = (heartbeat?: string | null) => {
     if (!heartbeat) return 'Никогда'
 
@@ -93,58 +98,51 @@ function SensorsList() {
         <>
           {statusSummary && <SensorStatusSummaryBar summary={statusSummary} />}
 
-          <div className="filters card filter-panel">
-            <div className="filter-panel__header">
-              <div>
-                <div className="filter-panel__title">Fleet Filters</div>
-                <p className="filter-panel__subtitle">
-                  Переключайтесь между проектами и быстро отсекайте устройства по рабочему статусу.
-                </p>
-              </div>
-            </div>
-
-            <div className="filters-grid sensors-filters-grid">
-              <MaterialSelect
-                id="sensor_project_id"
-                label="Проект"
-                value={projectId}
-                onChange={(id) => {
-                  setProjectId(id)
-                  setActiveProjectId(id)
-                  setPage(1)
-                }}
-                disabled={projectsLoading || isLoading}
-              >
-                <option value="">Все проекты</option>
-                {projectsData?.projects.map((project) => (
-                  <option key={project.id} value={project.id}>
-                    {project.name}
-                  </option>
-                ))}
-              </MaterialSelect>
-              <MaterialSelect
-                id="sensor_status"
-                label="Статус"
-                value={status}
-                onChange={(value) => {
-                  setStatus(value)
-                  setPage(1)
-                }}
-                disabled={isLoading}
-              >
-                <option value="">Все</option>
-                <option value="registering">Регистрация</option>
-                <option value="active">Активен</option>
-                <option value="inactive">Неактивен</option>
-                <option value="archived">Архивирован</option>
-              </MaterialSelect>
+          <div className="filter-capsule sensors-filter-capsule">
+            <div className="filter-capsule__search filter-capsule__search--constrained">
+              <svg width="15" height="15" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="5.5" stroke="currentColor" strokeWidth="1.6"/><path d="m13.5 13.5 3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
+              <input
+                type="text"
+                placeholder="ID или имя сенсора"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
             </div>
+            <MaterialSelect
+              id="sensor_project_id"
+              label="Проект"
+              value={projectId}
+              onChange={(id) => { setProjectId(id); setActiveProjectId(id); setPage(1) }}
+              disabled={projectsLoading || isLoading}
+              variant="pill"
+              icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M2.5 6.5A1.5 1.5 0 0 1 4 5h3.3a1.5 1.5 0 0 1 1.06.44l.94.94a1.5 1.5 0 0 0 1.06.44H16a1.5 1.5 0 0 1 1.5 1.5v6A1.5 1.5 0 0 1 16 15.82H4A1.5 1.5 0 0 1 2.5 14.3V6.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>}
+            >
+              <option value="">Все проекты</option>
+              {projectsData?.projects.map((project) => (
+                <option key={project.id} value={project.id}>{project.name}</option>
+              ))}
+            </MaterialSelect>
+            <MaterialSelect
+              id="sensor_status"
+              label="Статус"
+              value={status}
+              onChange={(value) => { setStatus(value); setPage(1) }}
+              disabled={isLoading}
+              variant="pill"
+              icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="2" fill="currentColor"/><circle cx="10" cy="10" r="5" stroke="currentColor" strokeWidth="1.4"/><circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.2" opacity=".5"/></svg>}
+            >
+              <option value="">Все</option>
+              <option value="registering">Регистрация</option>
+              <option value="active">Активен</option>
+              <option value="inactive">Неактивен</option>
+              <option value="archived">Архивирован</option>
+            </MaterialSelect>
           </div>
 
           {data && (
             <>
               <div className="sensors-grid">
-                {data.sensors.map((sensor: Sensor) => (
+                {filteredSensors.map((sensor: Sensor) => (
                   <div
                     key={sensor.id}
                     className="sensor-card card"
@@ -215,7 +213,7 @@ function SensorsList() {
                 ))}
               </div>
 
-              {data.sensors.length === 0 && <EmptyState message="Датчики не найдены" />}
+              {filteredSensors.length === 0 && <EmptyState message="Датчики не найдены" />}
 
               <Pagination
                 currentPage={page}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.scss b/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.scss
index 4508f323..b9590585 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.scss
+++ b/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.scss
@@ -38,7 +38,7 @@
 
 .telemetry-view__filters-topbar {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 12px;
   align-items: start;
 }
@@ -646,3 +646,11 @@
     width: 100%;
   }
 }
+
+.signal-route-capsule {
+  margin-bottom: 4px;
+}
+
+.signal-route-capsule .md-select {
+  min-width: 140px;
+}
diff --git a/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.tsx b/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.tsx
index 7d14a60f..57be324c 100644
--- a/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.tsx
+++ b/projects/frontend/apps/experiment-portal/src/pages/TelemetryViewer.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import Plotly from 'plotly.js-dist-min'
 import { captureSessionsApi, experimentsApi, projectsApi, runsApi, sensorsApi, telemetryApi } from '../api/client'
-import { EmptyState, Error as ErrorComponent, FloatingActionButton, Loading, MaterialSelect } from '../components/common'
+import { EmptyState, Error as ErrorComponent, FloatingActionButton, LiveSwitch, Loading, MaterialSelect } from '../components/common'
 import TelemetryPanel from '../components/TelemetryPanel'
 import TelemetryExportModal from '../components/TelemetryExportModal'
 import CaptureSessionTimeline from '../components/CaptureSessionTimeline'
@@ -976,21 +976,6 @@ function TelemetryViewer() {
                                     </p>
                                 </div>
 
-                                <div className="telemetry-view__menu">
-                                    <div className="telemetry-view__menu-item">
-                                        <span className="telemetry-view__menu-label">Mode</span>
-                                        <span className="telemetry-view__menu-value">{telemetryModeLabel}</span>
-                                    </div>
-                                    <div className="telemetry-view__menu-item">
-                                        <span className="telemetry-view__menu-label">Project</span>
-                                        <span className="telemetry-view__menu-value">{selectedProjectName}</span>
-                                    </div>
-                                    <div className="telemetry-view__menu-item">
-                                        <span className="telemetry-view__menu-label">Run</span>
-                                        <span className="telemetry-view__menu-value">{selectedRunName}</span>
-                                    </div>
-                                </div>
-
                                 <button
                                     type="button"
                                     className="telemetry-view__collapse"
@@ -1001,35 +986,11 @@ function TelemetryViewer() {
                                 </button>
                             </div>
 
-                            <div
-                                className={`telemetry-view__filters-body${filtersOpen ? ' telemetry-view__filters-body--open' : ''}`}
-                                aria-hidden={!filtersOpen}
-                            >
-                                <div className="telemetry-view__grid">
-                                <div className="form-group telemetry-view__mode">
-                                    <label>Режим</label>
-                                    <div className="telemetry-view__mode-toggle">
-                                        <label>
-                                            <input
-                                                type="radio"
-                                                name="telemetry-view-mode"
-                                                checked={viewMode === 'live'}
-                                                onChange={() => setViewMode('live')}
-                                            />
-                                            live
-                                        </label>
-                                        <label>
-                                            <input
-                                                type="radio"
-                                                name="telemetry-view-mode"
-                                                checked={viewMode === 'history'}
-                                                onChange={() => setViewMode('history')}
-                                            />
-                                            history
-                                        </label>
-                                    </div>
-                                </div>
-
+                            <div className="filter-capsule signal-route-capsule">
+                                <LiveSwitch
+                                    live={viewMode === 'live'}
+                                    onChange={(live) => setViewMode(live ? 'live' : 'history')}
+                                />
                                 <MaterialSelect
                                     id="telemetry_project_id"
                                     label="Проект"
@@ -1042,6 +1003,8 @@ function TelemetryViewer() {
                                         setRunId('')
                                     }}
                                     disabled={projectsLoading}
+                                    variant="pill"
+                                    icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M2.5 6.5A1.5 1.5 0 0 1 4 5h3.3a1.5 1.5 0 0 1 1.06.44l.94.94a1.5 1.5 0 0 0 1.06.44H16a1.5 1.5 0 0 1 1.5 1.5v6A1.5 1.5 0 0 1 16 15.82H4A1.5 1.5 0 0 1 2.5 14.3V6.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>}
                                 >
                                     {projectsData?.projects.map((project) => (
                                         <option key={project.id} value={project.id}>
@@ -1049,7 +1012,6 @@ function TelemetryViewer() {
                                         </option>
                                     ))}
                                 </MaterialSelect>
-
                                 <MaterialSelect
                                     id="telemetry_experiment_id"
                                     label="Эксперимент"
@@ -1060,6 +1022,8 @@ function TelemetryViewer() {
                                         setRunId('')
                                     }}
                                     disabled={!projectId || experimentsLoading || projectsLoading}
+                                    variant="pill"
+                                    icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M8 2.5h4M8.5 2.5v5.2L4.4 14.3a1.6 1.6 0 0 0 1.36 2.42h8.48a1.6 1.6 0 0 0 1.36-2.42L11.5 7.7V2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M6.3 11.2h7.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>}
                                 >
                                     {experiments.map((experiment) => (
                                         <option key={experiment.id} value={experiment.id}>
@@ -1067,7 +1031,6 @@ function TelemetryViewer() {
                                         </option>
                                     ))}
                                 </MaterialSelect>
-
                                 <MaterialSelect
                                     id="telemetry_run_id"
                                     label="Пуск"
@@ -1075,6 +1038,8 @@ function TelemetryViewer() {
                                     onChange={setRunId}
                                     placeholder="Выберите пуск"
                                     disabled={!experimentId || runsLoading || experimentsLoading || projectsLoading}
+                                    variant="pill"
+                                    icon={<svg width="14" height="14" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.25" stroke="currentColor" strokeWidth="1.5"/><path d="M8.4 7.6v4.8l4-2.4-4-2.4Z" fill="currentColor"/></svg>}
                                 >
                                     {runs.map((run) => (
                                         <option key={run.id} value={run.id}>
@@ -1082,7 +1047,13 @@ function TelemetryViewer() {
                                         </option>
                                     ))}
                                 </MaterialSelect>
+                            </div>
 
+                            <div
+                                className={`telemetry-view__filters-body${filtersOpen ? ' telemetry-view__filters-body--open' : ''}`}
+                                aria-hidden={!filtersOpen}
+                            >
+                                <div className="telemetry-view__grid">
                                 {canManageCaptureSession && (
                                     <div className="telemetry-view__capture-actions form-group">
                                         <label className="telemetry-view__capture-actions-label">
diff --git a/projects/frontend/apps/experiment-portal/src/styles/components.scss b/projects/frontend/apps/experiment-portal/src/styles/components.scss
index a796bb40..cf501dc1 100644
--- a/projects/frontend/apps/experiment-portal/src/styles/components.scss
+++ b/projects/frontend/apps/experiment-portal/src/styles/components.scss
@@ -131,3 +131,125 @@
     text-align: left;
   }
 }
+
+// ── Filter Capsule (B1 pill toolbar) ──
+.filter-capsule {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  background: #fff;
+  border: 1px solid var(--outline);
+  border-radius: var(--radius-pill);
+  box-shadow: var(--elevation-1);
+  width: 100%;
+}
+
+.filter-capsule > .md-select {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.filter-capsule > .liveswitch {
+  flex: 0 0 auto;
+}
+
+.filter-capsule__search {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 12px;
+  border: 1px solid $input-border;
+  border-radius: var(--radius-pill);
+  background: #fff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+
+  &:hover { border-color: $outline-muted; background: #f8fafc; }
+  &:focus-within { border-color: $primary; box-shadow: var(--focus-ring); background: #fff; }
+
+  svg { color: $text-secondary; flex: none; }
+
+  input {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.87rem;
+    color: $text;
+    flex: 1;
+    min-width: 0;
+    font-family: inherit;
+
+    &::placeholder { color: $text-hint; }
+  }
+}
+
+.filter-capsule__search--constrained {
+  max-width: 340px;
+}
+
+.filter-capsule .filter-capsule__btn {
+  flex: 0 0 auto;
+}
+
+// Status chips (Sensors health quick filter)
+.filter-capsule__chips {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  background: #fff;
+  border: 1px solid var(--outline);
+  border-radius: var(--radius-pill);
+  flex: 0 0 auto;
+}
+
+.filter-capsule__chip {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: var(--radius-pill);
+  border: none;
+  background: transparent;
+  color: $text-secondary;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover { background: $surface-variant; color: $text; }
+  &.is-active { background: $primary; color: #fff; }
+}
+
+// Login pill input (taller, with icon)
+.login-input-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 52px;
+  padding: 0 16px;
+  border: 1px solid $input-border;
+  border-radius: 14px;
+  background: #fff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover { border-color: $outline-muted; }
+  &:focus-within { border-color: $primary; box-shadow: var(--focus-ring); }
+
+  svg { color: $text-secondary; flex: none; }
+
+  input {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.95rem;
+    color: $text;
+    flex: 1;
+    min-width: 0;
+    font-family: inherit;
+    height: 100%;
+
+    &::placeholder { color: $text-hint; }
+  }
+}