diff --git a/packages/site-home/lib/main.css b/packages/site-home/lib/main.css
index 35fb20478..18ae1a663 100644
--- a/packages/site-home/lib/main.css
+++ b/packages/site-home/lib/main.css
@@ -6,15 +6,24 @@
   flex-direction: column;
   overflow: hidden;
   padding-bottom: 140px;
-  padding-top: var(--base-size-112);
+  padding-top: var(--base-size-64);
+
+  @media (--size-viewport-width-large) {
+    padding-top: var(--base-size-112);
+  }
 }
 
 .home__hero {
   margin-left: auto;
   margin-right: auto;
   max-width: var(--temp-home-breakpoint-xlarge);
+  padding-inline: var(--base-size-24);
   text-align: center;
   width: 100%;
+
+  @media (--size-viewport-width-medium) {
+    padding-inline: var(--base-size-32);
+  }
 }
 
 .home__hero h1 {
@@ -27,7 +36,9 @@
 }
 
 .home__hero + .home__part {
-  margin-top: 100px;
+  @media (--size-viewport-width-large) {
+    margin-top: 100px;
+  }
 }
 
 .home__part {
@@ -37,7 +48,7 @@
   justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 32px;
+  margin-top: var(--base-size-32);
   max-width: var(--temp-home-breakpoint-xlarge);
   width: 100%;
 
@@ -53,10 +64,13 @@
 }
 
 .home__part::after {
-  content: "";
   display: block;
   grid-column: 1;
   grid-row: 3;
+
+  @media (--size-viewport-width-large) {
+    content: "";
+  }
 }
 
 .home__part_reverse {
@@ -288,14 +302,37 @@
 
 /* Integration with @onlyoffice/site-search */
 
-.home__hero search-container {
-  display: block;
+.home__hero .search {
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--base-size-48);
 }
 
-.home__hero .search {
+.home__hero .search .text-input {
+  --text-input-size-is-default: var(--false);
+  --text-input-size-is-small: var(--false);
+  --text-input-size-is-medium: var(--false);
+  --text-input-size-is-large: var(--true);
+  --text-input-size-is-xlarge: var(--false);
+
+  font-size: var(--text-body-font-size-medium);
+  line-height: var(--text-body-line-height-medium);
   max-width: 736px;
   width: 100%;
+
+  @media (--size-viewport-width-large) {
+    --text-input-size-is-default: var(--false);
+    --text-input-size-is-small: var(--false);
+    --text-input-size-is-medium: var(--false);
+    --text-input-size-is-large: var(--false);
+    --text-input-size-is-xlarge: var(--true);
+
+    font-size: var(--text-body-font-size-large);
+    line-height: var(--text-body-line-height-large);
+  }
+}
+
+.home__hero .search .text-input svg {
+  width: 1.25em;
+  height: 1.25em;
 }
diff --git a/packages/site-home/lib/main.story.tsx b/packages/site-home/lib/main.story.tsx
index f0275b82e..0788d80b9 100644
--- a/packages/site-home/lib/main.story.tsx
+++ b/packages/site-home/lib/main.story.tsx
@@ -13,7 +13,7 @@ export function Default(): JSX.Element {
   return <Home>
     <HomeHero>
       <h1>Welcome to ONLYOFFICE API</h1>
-      <SearchStory size="large" />
+      <SearchStory />
     </HomeHero>
     <HomePart>
       <HomeIn>
diff --git a/packages/site-page/lib/main.css b/packages/site-page/lib/main.css
index 64ff55f33..0423f47ef 100644
--- a/packages/site-page/lib/main.css
+++ b/packages/site-page/lib/main.css
@@ -17,11 +17,14 @@
   grid-template-rows: min-content 1fr min-content;
   min-height: 100vh;
 
-  @media (--size-viewport-width-large) {
-    --temp-page-header-height: 72px;
+  @media (--size-viewport-width-medium) {
     --page-header-logo-padding-inline: var(--base-size-32);
     --page-header-menu-padding-inline: var(--base-size-40);
   }
+
+  @media (--size-viewport-width-large) {
+    --temp-page-header-height: 72px;
+  }
 }
 
 .page__header {
@@ -29,7 +32,6 @@
   border-bottom-color: var(--color-page-header-default-border);
   border-bottom-style: solid;
   border-bottom-width: var(--page-header-border-width);
-  color: var(--color-page-header-default-foreground);
   position: sticky;
   top: 0;
   z-index: 2;
diff --git a/packages/site-search/lib/main.css b/packages/site-search/lib/main.css
index 05e4c93e3..83bc8597f 100644
--- a/packages/site-search/lib/main.css
+++ b/packages/site-search/lib/main.css
@@ -1,56 +1,23 @@
 .search {
-  align-items: center;
-  background-color: var(--color-background-default);
-  border-color: var(--color-control-default-border-rest);
-  border-radius: var(--size-border-radius-small);
-  border-style: solid;
-  border-width: var(--size-border-width-thin);
-  column-gap: var(--size-control-gap-medium);
-  display: inline-grid;
-  font-size: var(--text-body-font-size-small);
-  grid-template-columns: min-content 1fr;
-  line-height: var(--text-body-line-height-small);
-  min-width: 264px;
-  padding-block: var(--size-control-padding-block-medium);
-  padding-inline: var(--size-control-padding-inline-medium);
-  text-align: start;
+  display: block;
 }
 
-.search_large {
+/* .search_large {
   font-size: 16px;
   padding: 20px 22px;
-}
+} */
 
-search-container[filled] .search {
-  grid-template-columns: min-content 1fr min-content;
-}
-
-search-container[focused] .search {
-  border-color: transparent;
-  outline-color: var(--color-focus-default-outline);
-  outline-offset: calc(var(--size-border-width-thin) * -1);
-  outline-style: solid;
-  outline-width: var(--side-outline-width-default);
+.search .text-input {
+  background-color: var(--color-background-default);
+  /* font-size: var(--text-body-font-size-small); */
+  /* line-height: var(--text-body-line-height-small); */
 }
 
-.search__glass {
+/* .search .text-input__leading {
   color: var(--color-foreground-muted);
-  display: block;
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.search__placeholder {
-  grid-column: 2;
-  grid-row: 1;
-}
+} */
 
-search-container[filled] .search__placeholder,
-search-container[focused] .search__placeholder {
-  display: none;
-}
-
-.search__placeholder kbd {
+.search .text-input__placeholder kbd {
   border-color: var(--color-control-default-border-rest);
   border-radius: var(--size-border-radius-small);
   border-style: solid;
@@ -59,40 +26,11 @@ search-container[focused] .search__placeholder {
   padding: 0.2em;
 }
 
-.search input[name="q"] {
-  appearance: textfield;
-  background-color: transparent;
-  border: none;
-  grid-column: 2;
-  grid-row: 1;
-  min-width: 0;
-  padding: 0;
-}
-
-.search input[name="q"]:focus {
-  outline: none;
-}
-
-.search input[name="q"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-
-.search__clear {
-  background-color: transparent;
-  border: none;
-  color: var(--color-foreground-muted);
-  cursor: pointer;
+.search .text-input__trailing button {
   display: none;
-  grid-column: 3;
-  grid-row: 1;
-  padding: 0;
-}
-
-search-container[filled] .search__clear {
-  display: block;
 }
 
-.search__clear svg {
+.search .text-input[state-filled] .text-input__trailing button,
+.search .text-input:state(filled) .text-input__trailing button {
   display: block;
-  pointer-events: none;
 }
diff --git a/packages/site-search/lib/main.tsx b/packages/site-search/lib/main.tsx
index a36ec9ada..e3e4c124d 100644
--- a/packages/site-search/lib/main.tsx
+++ b/packages/site-search/lib/main.tsx
@@ -2,12 +2,19 @@ import {type PagefindSearchOptions} from "@onlyoffice/pagefind-types"
 import {type ChildrenIncludable} from "@onlyoffice/preact-types"
 import {useSlots} from "@onlyoffice/preact-slots"
 import {CancelIcon, MagnifyingGlassIcon} from "@onlyoffice/ui-icons/poor/24.tsx"
-import {Template} from "@onlyoffice/ui-kit"
+import {
+  Template,
+  TextInput,
+  TextInputAction,
+  TextInputControl,
+  TextInputLeading,
+  TextInputPlaceholder,
+  TextInputTrailing,
+} from "@onlyoffice/ui-kit"
 import {type JSX, h} from "preact"
 
 export interface SearchContainerProperties extends ChildrenIncludable {
   "search-options"?: PagefindSearchOptions
-  "size"?: "default" | "large"
 }
 
 export function SearchContainer(p: SearchContainerProperties): JSX.Element {
@@ -15,7 +22,7 @@ export function SearchContainer(p: SearchContainerProperties): JSX.Element {
     placeholder: SearchPlaceholder,
     field: SearchField,
     clear: SearchClear,
-    template: SearchTemplate
+    template: SearchTemplate,
   })
 
   const o: Record<string, string> = {}
@@ -23,28 +30,30 @@ export function SearchContainer(p: SearchContainerProperties): JSX.Element {
     o["search-options"] = JSON.stringify(p["search-options"])
   }
 
-  return <search-container {...o}>
-    <form class={cls()} id="search" action="https://duckduckgo.com/" method="get">
-      <MagnifyingGlassIcon class="search__glass" width={18} height={18} />
-      {slots.placeholder}
-      {slots.field}
-      <input name="sites" aria-hidden="true" hidden />
-      {slots.clear}
+  return <search-container class="search" {...o}>
+    <form id="search" action="https://duckduckgo.com/" method="get">
+      <TextInput>
+        <TextInputLeading>
+          <MagnifyingGlassIcon class="search__glass" />
+        </TextInputLeading>
+        <TextInputPlaceholder>
+          {slots.placeholder}
+        </TextInputPlaceholder>
+        <TextInputControl>
+          {slots.field}
+        </TextInputControl>
+        <TextInputTrailing>
+          <TextInputAction>
+            {slots.clear}
+          </TextInputAction>
+        </TextInputTrailing>
+      </TextInput>
     </form>
-    {slots.template}
   </search-container>
-
-  function cls(): string {
-    let s = "search"
-    if (p.size === "large") {
-      s += " search_large"
-    }
-    return s
-  }
 }
 
 export function SearchPlaceholder({children}: ChildrenIncludable): JSX.Element {
-  return <span class="search__placeholder">{children}</span>
+  return children
 }
 
 export interface SearchFieldProperties {
@@ -60,7 +69,7 @@ export interface SearchClearProperties {
 }
 
 export function SearchClear({label}: SearchClearProperties): JSX.Element {
-  return <button class="search__clear" type="button" value="clear" aria-label={label}>
+  return <button type="button" value="clear" aria-label={label}>
     <CancelIcon width={16} height={16} />
   </button>
 }
diff --git a/packages/ui-kit/lib/client.ts b/packages/ui-kit/lib/client.ts
index 4c70a8029..39332da0d 100644
--- a/packages/ui-kit/lib/client.ts
+++ b/packages/ui-kit/lib/client.ts
@@ -1,3 +1,4 @@
+import "@onlyoffice/ui-text-input/client.ts"
 import "@onlyoffice/ui-code-listing/client.ts"
 import "@onlyoffice/ui-select/client.ts"
 import "@onlyoffice/ui-content/client.ts"
diff --git a/packages/ui-kit/lib/main.css b/packages/ui-kit/lib/main.css
index ba84ba813..7955d15e3 100644
--- a/packages/ui-kit/lib/main.css
+++ b/packages/ui-kit/lib/main.css
@@ -2,6 +2,7 @@
 @import "../node_modules/@onlyoffice/ui-primitives/dist/main.css";
 
 @import "../node_modules/@onlyoffice/ui-sr-only/lib/main.css";
+@import "../node_modules/@onlyoffice/ui-text-input/lib/main.css";
 @import "../node_modules/@onlyoffice/ui-form-control/lib/main.css";
 @import "../node_modules/@onlyoffice/ui-select/lib/main.css";
 @import "../node_modules/@onlyoffice/ui-button/lib/main.css";
diff --git a/packages/ui-kit/lib/main.ts b/packages/ui-kit/lib/main.ts
index 1315b0cfa..55e9ecd72 100644
--- a/packages/ui-kit/lib/main.ts
+++ b/packages/ui-kit/lib/main.ts
@@ -11,3 +11,4 @@ export * from "@onlyoffice/ui-logos"
 export * from "@onlyoffice/ui-select"
 export * from "@onlyoffice/ui-sr-only"
 export * from "@onlyoffice/ui-template"
+export * from "@onlyoffice/ui-text-input"
diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
index a4cd10b4b..b295ab868 100644
--- a/packages/ui-kit/package.json
+++ b/packages/ui-kit/package.json
@@ -28,6 +28,7 @@
     "@onlyoffice/ui-select": "workspace:^",
     "@onlyoffice/ui-sr-only": "workspace:^",
     "@onlyoffice/ui-template": "workspace:^",
+    "@onlyoffice/ui-text-input": "workspace:^",
     "preact": "^10.22.0",
     "typescript": "^5.4.5"
   }
diff --git a/packages/ui-primitives/lib/main.css b/packages/ui-primitives/lib/main.css
index b457b06c8..ac829fd7f 100644
--- a/packages/ui-primitives/lib/main.css
+++ b/packages/ui-primitives/lib/main.css
@@ -143,12 +143,18 @@
   /* prefix: size, variant: control, property: padding-block */
   --size-control-padding-block-small: var(--base-size-4);
   --size-control-padding-block-medium: var(--base-size-8);
+  --size-control-padding-block-large: var(--base-size-12);
+  --size-control-padding-block-xlarge: var(--base-size-16);
 
   /* prefix: size, variant: control, property: padding-inline */
   --size-control-padding-inline-small: var(--base-size-12);
   --size-control-padding-inline-medium: var(--base-size-12);
+  --size-control-padding-inline-large: var(--base-size-16);
+  --size-control-padding-inline-xlarge: var(--base-size-20);
 
   /* prefix: size, variant: control, property: gap */
   --size-control-gap-small: var(--base-size-4);
   --size-control-gap-medium: var(--base-size-8);
+  --size-control-gap-large: var(--base-size-12);
+  --size-control-gap-xlarge: var(--base-size-16);
 }
diff --git a/packages/ui-text-input/index.d.ts b/packages/ui-text-input/index.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/packages/ui-text-input/index.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/ui-text-input/lib/client.ts b/packages/ui-text-input/lib/client.ts
new file mode 100644
index 000000000..ace59b0e6
--- /dev/null
+++ b/packages/ui-text-input/lib/client.ts
@@ -0,0 +1,4 @@
+import {define} from "./client/define.ts"
+export * from "./client/element.ts"
+
+define()
diff --git a/packages/ui-text-input/lib/client/define.ts b/packages/ui-text-input/lib/client/define.ts
new file mode 100644
index 000000000..5ff21a341
--- /dev/null
+++ b/packages/ui-text-input/lib/client/define.ts
@@ -0,0 +1,27 @@
+import {TextInputContainer} from "./element.ts"
+
+declare global {
+  interface Window {
+    TextInputContainer: typeof TextInputContainer
+  }
+
+  interface HTMLElementTagNameMap {
+    "text-input-container": TextInputContainer
+  }
+
+  namespace preact {
+    namespace JSX {
+      interface IntrinsicElements {
+        "text-input-container": HTMLAttributes<TextInputContainer>
+      }
+    }
+  }
+}
+
+export function define(): void {
+  if (window.customElements.get(TextInputContainer.tagName)) {
+    return
+  }
+  window.TextInputContainer = TextInputContainer
+  window.customElements.define(TextInputContainer.tagName, TextInputContainer)
+}
diff --git a/packages/ui-text-input/lib/client/element.ts b/packages/ui-text-input/lib/client/element.ts
new file mode 100644
index 000000000..1de626707
--- /dev/null
+++ b/packages/ui-text-input/lib/client/element.ts
@@ -0,0 +1,192 @@
+export class TextInputContainer extends HTMLElement {
+  static get tagName(): string {
+    return "text-input-container"
+  }
+
+  get focused(): boolean {
+    return this.#hasState("focused")
+  }
+
+  set focused(s: boolean) {
+    this.#changeState("focused", s)
+  }
+
+  get filled(): boolean {
+    return this.#hasState("filled")
+  }
+
+  set filled(s: boolean) {
+    this.#changeState("filled", s)
+  }
+
+  get controlElement(): HTMLElement | null {
+    const c = this.controlContainer
+    if (!c) {
+      return null
+    }
+    return c.querySelector("input")
+  }
+
+  get controlContainer(): HTMLElement | null {
+    return this.querySelector("[data-text-input-control-container]")
+  }
+
+  connectedCallback(): void {
+    this.#attach()
+    this.#setup()
+    this.#listen()
+    // this.#observe()
+  }
+
+  static formAssociated = true
+  #internals: ElementInternals | null = null
+
+  #attach(): void {
+    if (this.attachInternals) {
+      this.#internals = this.attachInternals()
+    }
+  }
+
+  #setup(): void {
+    this.#setupControl()
+    this.#setupState()
+  }
+
+  #setupControl(): void {
+    const f = filler.bind(this)
+
+    const c = this.controlElement
+    if (!c) {
+      return
+    }
+
+    const v = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")
+    if (!v) {
+      return
+    }
+
+    const s = v.set
+    if (!s) {
+      return
+    }
+
+    Object.defineProperty(c, "value", {
+      ...v,
+      set(v) {
+        f(v)
+        s.call(this, v)
+      },
+    })
+
+    function filler(this: TextInputContainer, v: unknown): void {
+      if (!v) {
+        this.filled = false
+        return
+      }
+      this.filled = true
+    }
+  }
+
+  #setupState(): void {
+    if (this.#internals && CSS.supports("selector(:state(_))")) {
+      this.#hasState = this.#hasModernState
+      this.#changeState = this.#changeModernState
+      return
+    }
+    this.#hasState = this.#hasFallbackState
+    this.#changeState = this.#changeFallbackState
+  }
+
+  #listen(): void {
+    this.addEventListener("focusin", this)
+    this.addEventListener("focusout", this)
+    this.addEventListener("input", this)
+  }
+
+  // // eslint-disable-next-line no-unused-private-class-members
+  // #observer: MutationObserver | null = null
+
+  // #observe(): void {
+  //   const o = new MutationObserver(this.#observerCallback.bind(this))
+  //   o.observe(this, {attributes: true, characterData: true, childList: true, subtree: true})
+  //   this.#observer = o
+  // }
+
+  // #observerCallback(ms: MutationRecord[], o: MutationObserver): void {}
+
+  handleEvent(e: Event): void {
+    if (
+      e.type === "focusin" &&
+      e.target &&
+      e.target === this.controlElement
+    ) {
+      e.preventDefault()
+      this.focused = true
+      return
+    }
+
+    if (
+      e.type === "focusout" &&
+      e.target &&
+      e.target === this.controlElement
+    ) {
+      e.preventDefault()
+      this.focused = false
+      return
+    }
+
+    if (
+      e.type === "input" &&
+      e.target instanceof HTMLInputElement &&
+      e.target === this.controlElement
+    ) {
+      e.preventDefault()
+      if (!e.target.value) {
+        this.filled = false
+      } else {
+        this.filled = true
+      }
+      return
+    }
+  }
+
+  #hasState: (k: string) => boolean = () => false
+
+  #hasFallbackState(k: string): boolean {
+    const s = this.getAttribute(`state-${k}`)
+    if (s === null) {
+      return false
+    }
+    return true
+  }
+
+  #hasModernState(k: string): boolean {
+    const t = this.#internals
+    if (!t) {
+      return false
+    }
+    return t.states.has(k)
+  }
+
+  #changeState: (k: string, v: boolean) => void = () => void 0
+
+  #changeFallbackState(k: string, v: boolean): void {
+    if (!v) {
+      this.removeAttribute(`state-${k}`)
+      return
+    }
+    this.setAttribute(`state-${k}`, "")
+  }
+
+  #changeModernState(k: string, v: boolean): void {
+    const t = this.#internals
+    if (!t) {
+      return
+    }
+    if (!v) {
+      t.states.delete(k)
+      return
+    }
+    t.states.add(k)
+  }
+}
diff --git a/packages/ui-text-input/lib/main.css b/packages/ui-text-input/lib/main.css
new file mode 100644
index 000000000..515fb4938
--- /dev/null
+++ b/packages/ui-text-input/lib/main.css
@@ -0,0 +1,222 @@
+.text-input {
+  --true: initial;
+  --false: ;
+
+  --text-input-size-is-xlarge: var(--false);
+  --text-input-column-gap-xlarge: var(--size-control-gap-xlarge);
+  --text-input-computed-column-gap-xlarge: var(--text-input-size-is-xlarge, var(--text-input-column-gap-xlarge));
+  --text-input-padding-block-xlarge: var(--size-control-padding-block-xlarge);
+  --text-input-computed-padding-block-xlarge: var(--text-input-size-is-xlarge, var(--text-input-padding-block-xlarge));
+  --text-input-padding-inline-xlarge: var(--size-control-padding-inline-xlarge);
+  --text-input-computed-padding-inline-xlarge: var(--text-input-size-is-xlarge, var(--text-input-padding-inline-xlarge));
+
+  --text-input-size-is-large: var(--false);
+  --text-input-column-gap-large: var(--size-control-gap-large);
+  --text-input-computed-column-gap-large: var(--text-input-size-is-large, var(--text-input-column-gap-large));
+  --text-input-padding-block-large: var(--size-control-padding-block-large);
+  --text-input-computed-padding-block-large: var(--text-input-size-is-large, var(--text-input-padding-block-large));
+  --text-input-padding-inline-large: var(--size-control-padding-inline-large);
+  --text-input-computed-padding-inline-large: var(--text-input-size-is-large, var(--text-input-padding-inline-large));
+
+  --text-input-size-is-medium: var(--false);
+  --text-input-column-gap-medium: var(--size-control-gap-medium);
+  --text-input-computed-column-gap-medium: var(--text-input-size-is-medium, var(--text-input-column-gap-medium));
+  --text-input-padding-block-medium: var(--size-control-padding-block-medium);
+  --text-input-computed-padding-block-medium: var(--text-input-size-is-medium, var(--text-input-padding-block-medium));
+  --text-input-padding-inline-medium: var(--size-control-padding-inline-medium);
+  --text-input-computed-padding-inline-medium: var(--text-input-size-is-medium, var(--text-input-padding-inline-medium));
+
+  --text-input-size-is-small: var(--false);
+  --text-input-column-gap-small: var(--size-control-gap-small);
+  --text-input-computed-column-gap-small: var(--text-input-size-is-small, var(--text-input-column-gap-small));
+  --text-input-padding-block-small: var(--size-control-padding-block-small);
+  --text-input-computed-padding-block-small: var(--text-input-size-is-small, var(--text-input-padding-block-small));
+  --text-input-padding-inline-small: var(--size-control-padding-inline-small);
+  --text-input-computed-padding-inline-small: var(--text-input-size-is-small, var(--text-input-padding-inline-small));
+
+  --text-input-size-is-default: var(--true);
+  --text-input-column-gap-default: var(--text-input-column-gap-medium);
+  --text-input-computed-column-gap-default: var(--text-input-size-is-default, var(--text-input-column-gap-default));
+  --text-input-padding-block-default: var(--text-input-padding-block-medium);
+  --text-input-computed-padding-block-default: var(--text-input-size-is-default, var(--text-input-padding-block-default));
+  --text-input-padding-inline-default: var(--text-input-padding-inline-medium);
+  --text-input-computed-padding-inline-default: var(--text-input-size-is-default, var(--text-input-padding-inline-default));
+
+  --text-input-computed-column-gap-current:
+    var(--text-input-computed-column-gap-xlarge)
+    var(--text-input-computed-column-gap-large)
+    var(--text-input-computed-column-gap-medium)
+    var(--text-input-computed-column-gap-small)
+    var(--text-input-computed-column-gap-default);
+  --text-input-computed-padding-block-current:
+    var(--text-input-computed-padding-block-xlarge)
+    var(--text-input-computed-padding-block-large)
+    var(--text-input-computed-padding-block-medium)
+    var(--text-input-computed-padding-block-small)
+    var(--text-input-computed-padding-block-default);
+  --text-input-computed-padding-inline-current:
+    var(--text-input-computed-padding-inline-xlarge)
+    var(--text-input-computed-padding-inline-large)
+    var(--text-input-computed-padding-inline-medium)
+    var(--text-input-computed-padding-inline-small)
+    var(--text-input-computed-padding-inline-default);
+
+  align-items: center;
+  background-color: var(--color-control-default-background-rest);
+  border-color: var(--color-control-default-border-rest);
+  border-radius: var(--size-border-radius-small);
+  border-style: solid;
+  border-width: var(--size-border-width-thin);
+  color: var(--color-control-default-foreground-rest);
+  display: inline-grid;
+  font-size: var(--text-body-font-size-small);
+  grid-template-columns: auto 1fr auto;
+  line-height: var(--text-body-line-height-small);
+  min-width: 264px;
+  padding-block: var(--text-input-computed-padding-block-current);
+  padding-inline: var(--text-input-computed-padding-inline-current);
+  text-align: start;
+}
+
+.text-input:hover {
+  background-color: var(--color-control-default-background-hover);
+  border-color: var(--color-control-default-border-hover);
+  color: var(--color-control-default-foreground-hover);
+}
+
+.text-input[state-focused],
+.text-input:state(focused) {
+  background-color: var(--color-control-default-background-active);
+  border-color: transparent;
+  color: var(--color-control-default-foreground-active);
+  outline-color: var(--color-focus-default-outline);
+  outline-offset: calc(var(--size-border-width-thin) * -1);
+  outline-style: solid;
+  outline-width: var(--side-outline-width-default);
+}
+
+.text-input[state-focused] .text-input__placeholder,
+.text-input:state(focused) .text-input__placeholder {
+  display: none;
+}
+
+.text-input[state-filled] .text-input__placeholder,
+.text-input:state(filled) .text-input__placeholder {
+  display: none;
+}
+
+.text-input[state-filled] .text-input__control,
+.text-input:state(filled) .text-input__control {
+  color: var(--color-control-default-foreground-active);
+}
+
+.text-input_size_default {
+  --text-input-size-is-default: var(--true);
+  --text-input-size-is-small: var(--false);
+  --text-input-size-is-medium: var(--false);
+  --text-input-size-is-large: var(--false);
+  --text-input-size-is-xlarge: var(--false);
+}
+
+.text-input_size_small {
+  --text-input-size-is-default: var(--false);
+  --text-input-size-is-small: var(--true);
+  --text-input-size-is-medium: var(--false);
+  --text-input-size-is-large: var(--false);
+  --text-input-size-is-xlarge: var(--false);
+}
+
+.text-input_size_medium {
+  --text-input-size-is-default: var(--false);
+  --text-input-size-is-small: var(--false);
+  --text-input-size-is-medium: var(--true);
+  --text-input-size-is-large: var(--false);
+  --text-input-size-is-xlarge: var(--false);
+}
+
+.text-input_size_large {
+  --text-input-size-is-default: var(--false);
+  --text-input-size-is-small: var(--false);
+  --text-input-size-is-medium: var(--false);
+  --text-input-size-is-large: var(--true);
+  --text-input-size-is-xlarge: var(--false);
+}
+
+.text-input_size_xlarge {
+  --text-input-size-is-default: var(--false);
+  --text-input-size-is-small: var(--false);
+  --text-input-size-is-medium: var(--false);
+  --text-input-size-is-large: var(--false);
+  --text-input-size-is-xlarge: var(--true);
+}
+
+.text-input__leading {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.text-input__leading ~ .text-input__placeholder,
+.text-input__leading ~ .text-input__control {
+  margin-inline-start: var(--text-input-computed-column-gap-current);
+}
+
+.text-input__leading svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+.text-input__placeholder {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.text-input__control {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.text-input__control input {
+  appearance: textfield;
+  background-color: transparent;
+  border: none;
+  min-width: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.text-input__control input:focus {
+  outline: none;
+}
+
+.text-input__control input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.text-input__placeholder ~ .text-input__trailing,
+.text-input__control ~ .text-input__trailing {
+  margin-inline-start: var(--text-input-computed-column-gap-current);
+}
+
+.text-input__trailing {
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.text-input__trailing svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+.text-input__action button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: block;
+  padding: 0;
+}
+
+.text-input__action svg {
+  pointer-events: none;
+}
diff --git a/packages/ui-text-input/lib/main.story.tsx b/packages/ui-text-input/lib/main.story.tsx
new file mode 100644
index 000000000..59c62758d
--- /dev/null
+++ b/packages/ui-text-input/lib/main.story.tsx
@@ -0,0 +1,53 @@
+import {CancelIcon, MagnifyingGlassIcon} from "@onlyoffice/ui-icons/poor/24.tsx"
+import {type Meta} from "@storybook/preact"
+import {type JSX, h} from "preact"
+import {
+  TextInput,
+  TextInputAction,
+  TextInputControl,
+  TextInputLeading,
+  TextInputPlaceholder,
+  type TextInputProperties,
+  TextInputTrailing,
+} from "./main.tsx"
+
+export default {
+  title: "UI/Text Input",
+} satisfies Meta
+
+export function Default(): JSX.Element {
+  const sizes: TextInputProperties["size"][] =
+    ["small", "medium", "large", "xlarge", "default", undefined]
+
+  return <div style={{
+    display: "inline-flex",
+    flexDirection: "column",
+    rowGap: "var(--base-size-12)",
+  }}>
+    {sizes.map((size) => <div style={{
+      alignItems: "center",
+      columnGap: "var(--base-size-12)",
+      display: "inline-flex",
+    }}>
+      <TextInput size={size}>
+        <TextInputLeading>
+          <MagnifyingGlassIcon />
+        </TextInputLeading>
+        <TextInputPlaceholder>
+          placeholder
+        </TextInputPlaceholder>
+        <TextInputControl>
+          <input type="text" />
+        </TextInputControl>
+        <TextInputTrailing>
+          <TextInputAction>
+            <button type="button">
+              <CancelIcon />
+            </button>
+          </TextInputAction>
+        </TextInputTrailing>
+      </TextInput>
+      <span>size: {String(size)}</span>
+    </div>)}
+  </div>
+}
diff --git a/packages/ui-text-input/lib/main.tsx b/packages/ui-text-input/lib/main.tsx
new file mode 100644
index 000000000..1d91cad07
--- /dev/null
+++ b/packages/ui-text-input/lib/main.tsx
@@ -0,0 +1,34 @@
+import {type ChildrenIncludable} from "@onlyoffice/preact-types"
+import {type JSX, h} from "preact"
+
+export interface TextInputProperties extends ChildrenIncludable {
+  size?: "small" | "medium" | "large" | "xlarge" | "default"
+}
+
+export function TextInput(p: TextInputProperties): JSX.Element {
+  let c = "text-input"
+  if (p.size !== undefined) {
+    c += ` text-input_size_${p.size}`
+  }
+  return <text-input-container class={c}>{p.children}</text-input-container>
+}
+
+export function TextInputLeading(p: ChildrenIncludable): JSX.Element {
+  return <div class="text-input__leading">{p.children}</div>
+}
+
+export function TextInputPlaceholder(p: ChildrenIncludable): JSX.Element {
+  return <div class="text-input__placeholder">{p.children}</div>
+}
+
+export function TextInputControl(p: ChildrenIncludable): JSX.Element {
+  return <div class="text-input__control" data-text-input-control-container>{p.children}</div>
+}
+
+export function TextInputTrailing(p: ChildrenIncludable): JSX.Element {
+  return <div class="text-input__trailing">{p.children}</div>
+}
+
+export function TextInputAction(p: ChildrenIncludable): JSX.Element {
+  return <div class="text-input__action">{p.children}</div>
+}
diff --git a/packages/ui-text-input/package.json b/packages/ui-text-input/package.json
new file mode 100644
index 000000000..94c4d8eab
--- /dev/null
+++ b/packages/ui-text-input/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@onlyoffice/ui-text-input",
+  "private": true,
+  "type": "module",
+  "main": "lib/main.tsx",
+  "exports": {
+    ".": "./lib/main.tsx",
+    "./client.ts": "./lib/client.ts",
+    "./client/define.ts": "./lib/client/define.ts",
+    "./client/element.ts": "./lib/client/element.ts",
+    "./main.css": "./lib/main.css"
+  },
+  "scripts": {
+    "test:types": "tsc",
+    "test": "pnpm test:types"
+  },
+  "dependencies": {
+    "@onlyoffice/preact-types": "workspace:^",
+    "preact": "^10.22.0",
+    "preact-render-to-string": "^6.4.1",
+    "typescript": "^5.4.5"
+  },
+  "devDependencies": {
+    "@onlyoffice/ui-icons": "workspace:^",
+    "@storybook/preact": "^8.0.0",
+    "vite": "^5.1.6"
+  }
+}
diff --git a/packages/ui-text-input/tsconfig.json b/packages/ui-text-input/tsconfig.json
new file mode 100644
index 000000000..4385e0695
--- /dev/null
+++ b/packages/ui-text-input/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  },
+  "include": ["lib", "index.d.ts"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db45ef845..d2a6da197 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2418,6 +2418,9 @@ importers:
       '@onlyoffice/ui-template':
         specifier: workspace:^
         version: link:../ui-template
+      '@onlyoffice/ui-text-input':
+        specifier: workspace:^
+        version: link:../ui-text-input
       preact:
         specifier: ^10.22.0
         version: 10.22.0
@@ -2528,6 +2531,31 @@ importers:
         specifier: ^5.1.6
         version: 5.1.6(@types/node@20.12.12)(lightningcss@1.24.1)(terser@5.31.0)
 
+  packages/ui-text-input:
+    dependencies:
+      '@onlyoffice/preact-types':
+        specifier: workspace:^
+        version: link:../preact-types
+      preact:
+        specifier: ^10.22.0
+        version: 10.22.0
+      preact-render-to-string:
+        specifier: ^6.4.1
+        version: 6.4.1(preact@10.22.0)
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+    devDependencies:
+      '@onlyoffice/ui-icons':
+        specifier: workspace:^
+        version: link:../ui-icons
+      '@storybook/preact':
+        specifier: ^8.0.0
+        version: 8.0.0(preact@10.22.0)
+      vite:
+        specifier: ^5.1.6
+        version: 5.1.6(@types/node@20.12.12)(lightningcss@1.24.1)(terser@5.31.0)
+
   packages/utility-types:
     dependencies:
       typescript:
@@ -2818,6 +2846,12 @@ importers:
       '@storybook/preact-vite':
         specifier: ^8.0.0
         version: 8.0.0(preact@10.22.0)(typescript@5.4.5)(vite@5.1.6(@types/node@20.12.12)(lightningcss@1.24.1)(terser@5.31.0))
+      browserslist:
+        specifier: ^4.23.2
+        version: 4.23.2
+      lightningcss:
+        specifier: ^1.23.0
+        version: 1.24.1
       preact:
         specifier: ^10.22.0
         version: 10.22.0
@@ -5510,11 +5544,6 @@ packages:
   browserify-zlib@0.1.4:
     resolution: {integrity: sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==}
 
-  browserslist@4.23.0:
-    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.23.2:
     resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -5568,9 +5597,6 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
-  caniuse-lite@1.0.30001597:
-    resolution: {integrity: sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==}
-
   caniuse-lite@1.0.30001643:
     resolution: {integrity: sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==}
 
@@ -6048,9 +6074,6 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.4.703:
-    resolution: {integrity: sha512-094ZZC4nHXPKl/OwPinSMtLN9+hoFkdfQGKnvXbY+3WEAYtVDpz9UhJIViiY6Zb8agvqxiaJzNG9M+pRZWvSZw==}
-
   electron-to-chromium@1.5.1:
     resolution: {integrity: sha512-FKbOCOQ5QRB3VlIbl1LZQefWIYwszlBloaXcY2rbfpu9ioJnNh3TK03YtIDKDo3WKBi8u+YV4+Fn2CkEozgf4w==}
 
@@ -9009,12 +9032,6 @@ packages:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
 
-  update-browserslist-db@1.0.13:
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   update-browserslist-db@1.1.0:
     resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
     hasBin: true
@@ -9459,7 +9476,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.23.5
       '@babel/helper-validator-option': 7.23.5
-      browserslist: 4.23.0
+      browserslist: 4.23.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -9467,7 +9484,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.24.7
       '@babel/helper-validator-option': 7.24.7
-      browserslist: 4.23.0
+      browserslist: 4.23.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -12478,13 +12495,6 @@ snapshots:
     dependencies:
       pako: 0.2.9
 
-  browserslist@4.23.0:
-    dependencies:
-      caniuse-lite: 1.0.30001597
-      electron-to-chromium: 1.4.703
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.23.0)
-
   browserslist@4.23.2:
     dependencies:
       caniuse-lite: 1.0.30001643
@@ -12545,8 +12555,6 @@ snapshots:
 
   camelcase@6.3.0: {}
 
-  caniuse-lite@1.0.30001597: {}
-
   caniuse-lite@1.0.30001643: {}
 
   catharsis@0.9.0:
@@ -12769,7 +12777,7 @@ snapshots:
 
   core-js-compat@3.36.0:
     dependencies:
-      browserslist: 4.23.0
+      browserslist: 4.23.2
 
   core-util-is@1.0.3: {}
 
@@ -13018,8 +13026,6 @@ snapshots:
     dependencies:
       jake: 10.8.7
 
-  electron-to-chromium@1.4.703: {}
-
   electron-to-chromium@1.5.1: {}
 
   emoji-regex@8.0.0: {}
@@ -16783,12 +16789,6 @@ snapshots:
 
   untildify@4.0.0: {}
 
-  update-browserslist-db@1.0.13(browserslist@4.23.0):
-    dependencies:
-      browserslist: 4.23.0
-      escalade: 3.1.2
-      picocolors: 1.0.0
-
   update-browserslist-db@1.1.0(browserslist@4.23.2):
     dependencies:
       browserslist: 4.23.2
diff --git a/site/assets/main.ts b/site/assets/main.ts
index 4fa7b8ed1..f1b688433 100644
--- a/site/assets/main.ts
+++ b/site/assets/main.ts
@@ -13,6 +13,7 @@ import "@onlyoffice/ui-kit/client.ts"
 import "@onlyoffice/site-kit/client.ts"
 import "../components/tree/tree.client.ts"
 import "../components/document-builder-container/element.ts"
+import "../internal/global-navigation-container.ts"
 import {Client} from "@onlyoffice/server-client"
 
 function main(): void {
diff --git a/site/internal/global-navigation-container.ts b/site/internal/global-navigation-container.ts
index e69de29bb..ffedd518b 100644
--- a/site/internal/global-navigation-container.ts
+++ b/site/internal/global-navigation-container.ts
@@ -0,0 +1,62 @@
+declare global {
+  interface Window {
+    GlobalNavigationContainer: typeof GlobalNavigationContainer
+  }
+
+  interface HTMLElementTagNameMap {
+    "global-navigation-container": GlobalNavigationContainer
+  }
+
+  namespace preact {
+    namespace JSX {
+      interface IntrinsicElements {
+        "global-navigation-container": HTMLAttributes<GlobalNavigationContainer>
+      }
+    }
+  }
+}
+
+function define(): void {
+  if (window.customElements.get(GlobalNavigationContainer.tagName)) {
+    return
+  }
+  window.GlobalNavigationContainer = GlobalNavigationContainer
+  window.customElements.define(GlobalNavigationContainer.tagName, GlobalNavigationContainer)
+}
+
+class GlobalNavigationContainer extends HTMLElement {
+  static get tagName(): string {
+    return "global-navigation-container"
+  }
+
+  get #expanded(): boolean {
+    return this.hasAttribute("expanded")
+  }
+
+  set #expanded(v: boolean) {
+    if (v) {
+      this.setAttribute("expanded", "")
+    } else {
+      this.removeAttribute("expanded")
+    }
+  }
+
+  get #button(): HTMLButtonElement | null {
+    return this.querySelector("button")
+  }
+
+  connectedCallback(): void {
+    this.addEventListener("click", this)
+  }
+
+  handleEvent(e: Event): void {
+    if (e.type === "click" && e.target === this.#button) {
+      this.#expanded = !this.#expanded
+      return
+    }
+
+    throw new Error(`Unhandled event type: ${e.type}`)
+  }
+}
+
+define()
diff --git a/site/internal/global-navigation.css b/site/internal/global-navigation.css
index b8b087fed..96a33d753 100644
--- a/site/internal/global-navigation.css
+++ b/site/internal/global-navigation.css
@@ -1,38 +1,117 @@
 .global-navigation {
-  display: block;
+  align-items: center;
+  display: flex;
   height: 100%;
+
+  @media (--size-viewport-width-medium) {
+    display: block;
+  }
+}
+
+.global-navigation[expanded] .global-navigation__toggle svg:first-of-type {
+  display: none;
+}
+
+.global-navigation[expanded] .global-navigation__toggle svg:last-of-type {
+  display: block;
+}
+
+.global-navigation[expanded] .global-navigation__nav {
+  display: block;
+}
+
+.global-navigation__toggle {
+  background-color: transparent;
+  border: none;
+  color: var(--base-color-white);
+  cursor: pointer;
+  display: block;
+  padding: 0;
+
+  @media (--size-viewport-width-medium) {
+    display: none;
+  }
+}
+
+.global-navigation__toggle svg {
+  display: block;
+  pointer-events: none;
+}
+
+.global-navigation__toggle svg:last-of-type {
+  display: none;
+}
+
+.global-navigation__nav {
+  background-color: var(--color-background-default);
+  box-shadow: var(--temp-color-shadow-default-small);
+  display: none;
+  left: 0;
+  max-height: calc(100vh - var(--temp-page-header-height));
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: var(--temp-page-header-height);
+
+  @media (--size-viewport-width-medium) {
+    background-color: transparent;
+    box-shadow: none;
+    display: block;
+    height: inherit;
+    overflow: unset;
+    position: static;
+  }
 }
 
 .global-navigation__menu {
-  display: flex;
-  height: inherit;
   list-style: none;
-  margin-bottom: 0;
-  margin-top: 0;
+  margin-block: 0;
+  padding-block: var(--base-size-20);
   padding-inline-start: 0;
+
+  @media (--size-viewport-width-medium) {
+    display: flex;
+    height: inherit;
+    padding-block: 0;
+  }
 }
 
 .global-navigation__menu-item {
-  align-items: center;
-  display: flex;
-  padding-left: var(--base-size-36);
-  padding-right: var(--base-size-36);
-  position: relative;
+  margin-top: var(--base-size-20);
+  padding-inline: var(--base-size-24);
+
+  @media (--size-viewport-width-medium) {
+    align-items: center;
+    display: flex;
+    margin-top: 0;
+    padding-inline: var(--base-size-36);
+    position: relative;
+  }
 
   @media (--size-viewport-width-large) {
-    padding-left: var(--base-size-48);
-    padding-right: var(--base-size-48);
+    padding-inline: var(--base-size-48);
   }
 }
 
+.global-navigation__menu-item:first-of-type {
+  margin-top: 0;
+}
+
 .global-navigation__menu-link {
-  color: inherit;
+  color: var(--color-foreground-default);
+  display: block;
   font-size: var(--text-body-font-size-small);
   font-weight: var(--base-text-font-weight-semi-bold);
   letter-spacing: var(--base-text-letter-spacing-0-04);
   line-height: var(--text-body-line-height-small);
   text-decoration: none;
   text-transform: uppercase;
+  white-space: nowrap;
+  width: min-content;
+
+  @media (--size-viewport-width-medium) {
+    color: var(--color-page-header-default-foreground);
+  }
 }
 
 .global-navigation__menu-link:focus,
@@ -41,10 +120,13 @@
 }
 
 .global-navigation__menu-link::before {
-  content: "";
   display: block;
   inset: 0;
   position: absolute;
+
+  @media (--size-viewport-width-medium) {
+    content: "";
+  }
 }
 
 .global-navigation__menu-link_active {
@@ -52,31 +134,36 @@
 }
 
 .global-navigation__submenu {
-  background-color: var(--color-background-default);
-  border-bottom-left-radius: var(--size-border-radius-large);
-  border-bottom-right-radius: var(--size-border-radius-large);
-  border-color: var(--color-border-muted);
-  border-style: solid;
-  border-width: var(--size-border-width-thin);
-  box-shadow: var(--temp-color-shadow-default-small);
-  display: none;
-  left: 50%;
   list-style: none;
   margin-bottom: 0;
-  margin-top: 0;
-  max-width: 300px;
-  min-width: 256px;
-  padding: var(--base-size-32);
-  position: absolute;
-  top: calc(100% + var(--size-border-width-thin));
-  transform: translateX(-50%);
-  width: max-content;
+  margin-top: var(--base-size-20);
+  padding-inline-start: 0;
+
+  @media (--size-viewport-width-medium) {
+    background-color: var(--color-background-default);
+    border-bottom-left-radius: var(--size-border-radius-large);
+    border-bottom-right-radius: var(--size-border-radius-large);
+    border-color: var(--color-border-muted);
+    border-style: solid;
+    border-width: var(--size-border-width-thin);
+    box-shadow: var(--temp-color-shadow-default-small);
+    display: none;
+    left: 50%;
+    margin-top: 0;
+    max-width: 300px;
+    min-width: 256px;
+    padding-inline-start: var(--base-size-32);
+    padding: var(--base-size-32);
+    position: absolute;
+    top: calc(100% + var(--size-border-width-thin));
+    transform: translateX(-50%);
+    width: max-content;
+  }
 }
 
 .global-navigation__submenu::before,
 .global-navigation__submenu::after {
   background-color: var(--color-border-accent-emphasis);
-  content: "";
   display: block;
   height: var(--size-border-width-thin);
   left: 50%;
@@ -86,12 +173,28 @@
   width: 0;
 }
 
+.global-navigation__submenu::before {
+  /* https://github.com/parcel-bundler/lightningcss/issues/781/ */
+  @media (--size-viewport-width-medium) {
+    content: "";
+  }
+}
+
+.global-navigation__submenu::after {
+  /* https://github.com/parcel-bundler/lightningcss/issues/781/ */
+  @media (--size-viewport-width-medium) {
+    content: "";
+  }
+}
+
 .global-navigation__submenu-item {
   align-items: center;
   column-gap: var(--base-size-12);
   display: flex;
   margin-top: var(--base-size-16);
   position: relative;
+  white-space: nowrap;
+  width: min-content;
 }
 
 .global-navigation__submenu-item:first-of-type {
@@ -100,10 +203,16 @@
 
 .global-navigation__submenu-link {
   color: var(--color-foreground-default);
-  font-size: var(--text-body-font-size-large);
-  font-weight: var(--base-text-font-weight-semi-bold);
-  line-height: var(--text-body-line-height-large);
+  font-size: var(--text-body-font-size-small);
+  font-weight: var(--base-text-font-weight-small);
+  line-height: var(--text-body-line-height-small);
   text-decoration: none;
+
+  @media (--size-viewport-width-medium) {
+    font-size: var(--text-body-font-size-large);
+    font-weight: var(--base-text-font-weight-semi-bold);
+    line-height: var(--text-body-line-height-large);
+  }
 }
 
 .global-navigation__submenu-link:focus-visible,
diff --git a/site/internal/global-navigation.tsx b/site/internal/global-navigation.tsx
index 2dea94eb0..7ec9cd8a5 100644
--- a/site/internal/global-navigation.tsx
+++ b/site/internal/global-navigation.tsx
@@ -5,6 +5,7 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
 
 import {Sitemap} from "@onlyoffice/eleventy-sitemap"
+import {CloseIcon, MenuIcon} from "@onlyoffice/ui-icons/poor/24.tsx"
 import {type JSX, h} from "preact"
 import {Icon} from "./icon.tsx"
 import {Link} from "./link.tsx"
@@ -67,47 +68,53 @@ export function GlobalNavigation(p: GlobalNavigationProperties): JSX.Element {
     throw new Error("Root page not found")
   }
 
-  return <nav class="global-navigation" aria-label="Global Navigation">
-    <ul class="global-navigation__menu">
-      {e.children.map((id) => {
-        const e = s.find(id, "id")
-        if (!e) {
-          throw new Error(`Entity not found: ${id}`)
-        }
-        if (e.type !== "page") {
-          throw new Error(`Entity is not a page: ${id}`)
-        }
-
-        let c = "global-navigation__menu-link"
-        if (p.current.startsWith(e.url)) {
-          c += " global-navigation__menu-link_active"
-        }
-
-        return <li class="global-navigation__menu-item">
-          <a class={c} href={e.url}>{e.title}</a>
-          <ul class="global-navigation__submenu">
-            {e.children.map((id) => {
-              const e = s.find(id, "id")
-              if (!e) {
-                throw new Error(`Entity not found: ${id}`)
-              }
-              if (e.type !== "page") {
-                throw new Error(`Entity is not a page: ${id}`)
-              }
-
-              const n = e.data.globalNavigation
-              if (!n) {
-                throw new Error(`Global navigation data not found: ${id}`)
-              }
-
-              return <li class="global-navigation__submenu-item">
-                <Icon src="rich24" name={n.icon} height={24} width={24} />
-                <Link class="global-navigation__submenu-link" href={n.path}>{n.title}</Link>
-              </li>
-            })}
-          </ul>
-        </li>
-      })}
-    </ul>
-  </nav>
+  return <global-navigation-container class="global-navigation">
+    <button class="global-navigation__toggle" type="button">
+      <MenuIcon width={24} height={24} />
+      <CloseIcon width={24} height={24} />
+    </button>
+    <nav class="global-navigation__nav" aria-label="Global Navigation">
+      <ul class="global-navigation__menu">
+        {e.children.map((id) => {
+          const e = s.find(id, "id")
+          if (!e) {
+            throw new Error(`Entity not found: ${id}`)
+          }
+          if (e.type !== "page") {
+            throw new Error(`Entity is not a page: ${id}`)
+          }
+
+          let c = "global-navigation__menu-link"
+          if (p.current.startsWith(e.url)) {
+            c += " global-navigation__menu-link_active"
+          }
+
+          return <li class="global-navigation__menu-item">
+            <a class={c} href={e.url}>{e.title}</a>
+            <ul class="global-navigation__submenu">
+              {e.children.map((id) => {
+                const e = s.find(id, "id")
+                if (!e) {
+                  throw new Error(`Entity not found: ${id}`)
+                }
+                if (e.type !== "page") {
+                  throw new Error(`Entity is not a page: ${id}`)
+                }
+
+                const n = e.data.globalNavigation
+                if (!n) {
+                  throw new Error(`Global navigation data not found: ${id}`)
+                }
+
+                return <li class="global-navigation__submenu-item">
+                  <Icon src="rich24" name={n.icon} height={24} width={24} />
+                  <Link class="global-navigation__submenu-link" href={n.path}>{n.title}</Link>
+                </li>
+              })}
+            </ul>
+          </li>
+        })}
+      </ul>
+    </nav>
+  </global-navigation-container>
 }
diff --git a/storybook/lib/main.tsx b/storybook/lib/main.tsx
index 4ff723384..a61993fc4 100644
--- a/storybook/lib/main.tsx
+++ b/storybook/lib/main.tsx
@@ -1,4 +1,6 @@
 import {type StorybookConfig} from "@storybook/preact-vite"
+import browserslist from "browserslist"
+import {browserslistToTargets} from "lightningcss"
 import {Fragment, h} from "preact"
 import {renderToString} from "preact-render-to-string"
 
@@ -25,5 +27,22 @@ export default {
         "OpenSans-Bold.woff2",
       ].map((f) => <link rel="preload" href={`/${f}`} crossorigin="" as="font" type="font/woff2" />)}
     </>)
-  }
+  },
+  async viteFinal(d) {
+    const {defineConfig, mergeConfig} = await import("vite")
+    const l = browserslist("> 0.2%")
+    const t = browserslistToTargets(l)
+    const c = defineConfig({
+      css: {
+        transformer: "lightningcss",
+        lightningcss: {
+          drafts: {
+            customMedia: true,
+          },
+          targets: t,
+        },
+      },
+    })
+    return mergeConfig(d, c)
+  },
 } satisfies StorybookConfig
diff --git a/storybook/package.json b/storybook/package.json
index 34e40e6d5..d9faf8c4a 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -15,6 +15,8 @@
     "@storybook/blocks": "^8.0.0",
     "@storybook/preact": "^8.0.0",
     "@storybook/preact-vite": "^8.0.0",
+    "browserslist": "^4.23.2",
+    "lightningcss": "^1.23.0",
     "preact": "^10.22.0",
     "preact-render-to-string": "^6.4.1",
     "react": "^18.2.0",