diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a931eb43..c10196d3 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from carbon-components-svelte@0.26.0.
+> 160 components exported from carbon-components-svelte@0.26.0.
 
 ## Components
 
@@ -46,6 +46,11 @@
 - [`FormItem`](#formitem)
 - [`FormLabel`](#formlabel)
 - [`Grid`](#grid)
+- [`Head`](#head)
+- [`HeadAction`](#headaction)
+- [`HeadActions`](#headactions)
+- [`HeadFilters`](#headfilters)
+- [`HeadIdentity`](#headidentity)
 - [`Header`](#header)
 - [`HeaderAction`](#headeraction)
 - [`HeaderActionLink`](#headeractionlink)
@@ -1350,6 +1355,102 @@ None.
 
 None.
 
+## `Head`
+
+### Props
+
+| Prop name     | Kind             | Reactive | Type                                    | Default value              | Description                       |
+| :------------ | :--------------- | :------- | :-------------------------------------- | -------------------------- | --------------------------------- |
+| flexDirection | <code>let</code> | No       | <code>"row" &#124; "row-reverse"</code> | <code>'row'</code>         | Set the flexDirection of the head |
+| margin        | <code>let</code> | No       | <code>string</code>                     | <code>'20px 0 15px'</code> | Set the margin of the head        |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
+## `HeadAction`
+
+### Props
+
+| Prop name   | Kind             | Reactive | Type                                                         | Default value | Description                                           |
+| :---------- | :--------------- | :------- | :----------------------------------------------------------- | ------------- | ----------------------------------------------------- |
+| href        | <code>let</code> | No       | <code>string</code>                                          | --            | Specify the href attribute                            |
+| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --            | Specify the icon from `carbon-icons-svelte` to render |
+| description | <code>let</code> | No       | <code>string</code>                                          | --            | Specify the description                               |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type      | Detail |
+| :--------- | :-------- | :----- |
+| click      | forwarded | --     |
+
+## `HeadActions`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                | Default value       | Description                       |
+| :-------- | :--------------- | :------- | :------------------ | ------------------- | --------------------------------- |
+| width     | <code>let</code> | No       | <code>string</code> | <code>"100%"</code> | Set the width of the head actions |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
+## `HeadFilters`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
+## `HeadIdentity`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                                                | Default value         | Description                    |
+| :-------- | :--------------- | :------- | :-------------------------------------------------- | --------------------- | ------------------------------ |
+| title     | <code>let</code> | No       | <code>string</code>                                 | --                    | Specify the href attribute     |
+| subtitle  | <code>let</code> | No       | <code>string</code>                                 | --                    | Specify the subtitle attribute |
+| imgSrc    | <code>let</code> | No       | <code>string</code>                                 | --                    | Specify the imgSrc attribute   |
+| imgSize   | <code>let</code> | No       | <code>"small" &#124; "normal" &#124; "large"</code> | <code>'normal'</code> | Set the imgSize of the head    |
+| titleSize | <code>let</code> | No       | <code>"small" &#124; "normal" &#124; "large"</code> | <code>'normal'</code> | Set the titleSize of the head  |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+| tabs      | No      | --    | --       |
+
+### Events
+
+None.
+
 ## `Header`
 
 ### Props
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2e1822ad..71d0ff46 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 160,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -4910,6 +4910,157 @@
       ],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "Head",
+      "filePath": "/src/Head/Head.svelte",
+      "props": [
+        {
+          "name": "flexDirection",
+          "kind": "let",
+          "description": "Set the flexDirection of the head",
+          "type": "\"row\" | \"row-reverse\"",
+          "value": "'row'",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "margin",
+          "kind": "let",
+          "description": "Set the margin of the head",
+          "type": "string",
+          "value": "'20px 0 15px'",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
+    {
+      "moduleName": "HeadAction",
+      "filePath": "/src/Head/HeadAction.svelte",
+      "props": [
+        {
+          "name": "href",
+          "kind": "let",
+          "description": "Specify the href attribute",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "description",
+          "kind": "let",
+          "description": "Specify the description",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [],
+      "events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
+      "typedefs": []
+    },
+    {
+      "moduleName": "HeadActions",
+      "filePath": "/src/Head/HeadActions.svelte",
+      "props": [
+        {
+          "name": "width",
+          "kind": "let",
+          "description": "Set the width of the head actions",
+          "type": "string",
+          "value": "\"100%\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
+    {
+      "moduleName": "HeadFilters",
+      "filePath": "/src/Head/HeadFilters.svelte",
+      "props": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
+    {
+      "moduleName": "HeadIdentity",
+      "filePath": "/src/Head/HeadIdentity.svelte",
+      "props": [
+        {
+          "name": "title",
+          "kind": "let",
+          "description": "Specify the href attribute",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "subtitle",
+          "kind": "let",
+          "description": "Specify the subtitle attribute",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "imgSrc",
+          "kind": "let",
+          "description": "Specify the imgSrc attribute",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "imgSize",
+          "kind": "let",
+          "description": "Set the imgSize of the head",
+          "type": "\"small\" | \"normal\" | \"large\"",
+          "value": "'normal'",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "titleSize",
+          "kind": "let",
+          "description": "Set the titleSize of the head",
+          "type": "\"small\" | \"normal\" | \"large\"",
+          "value": "'normal'",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        { "name": "tabs", "default": false, "slot_props": "{}" }
+      ],
+      "events": [],
+      "typedefs": []
+    },
     {
       "moduleName": "IconSkeleton",
       "filePath": "/src/Icon/IconSkeleton.svelte",
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 2726efa3..e795d84b 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -23,10 +23,12 @@
   let innerWidth = 2048;
 
   $: isMobile = innerWidth < 1056;
+  console.log("$layout", $layout);
   $: components = $layout.children.filter(
     (child) => child.title === "components"
   )[0];
   $: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
+  $: avui = $layout.children.filter((child) => child.title === "avui")[0];
 
   $beforeUrlChange(() => {
     if (isMobile) isSideNavOpen = false;
@@ -217,7 +219,19 @@
   <SideNav bind:isOpen="{isSideNavOpen}">
     <SideNavItems>
       <SideNavMenu
-        expanded="{$isActive($url('')) || $isActive($url('/components'))}"
+        expanded="{$isActive($url('')) || $isActive($url('/avui'))}"
+        text="avUI Components"
+      >
+        {#each avui.children as child, i (child.path)}
+          <SideNavMenuItem
+            text="{child.title}"
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          />
+        {/each}
+      </SideNavMenu>
+      <SideNavMenu
+        expanded="{$isActive($url('/components'))}"
         text="Components"
       >
         {#each components.children as child, i (child.path)}
diff --git a/docs/src/pages/avui/Head.svx b/docs/src/pages/avui/Head.svx
new file mode 100644
index 00000000..0f793ad3
--- /dev/null
+++ b/docs/src/pages/avui/Head.svx
@@ -0,0 +1,78 @@
+---
+layout: "avui"
+components: ["Head", "HeadIdentity", "HeadActions", "HeadFilters", "HeadAction"]
+---
+
+<script>
+  import { Head, HeadAction, HeadActions, HeadFilters, HeadIdentity, Select, SelectItem, Search } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+  import CloudUpload32 from "carbon-icons-svelte/lib/CloudUpload32";
+  import Add32 from "carbon-icons-svelte/lib/Add32";
+  import Close32 from "carbon-icons-svelte/lib/Close32";
+</script>
+
+The `Head` component
+
+### Head with identity, filters and actions
+
+<Head>
+  <HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
+  <HeadActions>
+    <HeadFilters>
+      <Select inline selected="All" noLabel={true}>
+        <SelectItem value="All" text="All Statuses" />
+        <SelectItem value="Active" text="Active" />
+        <SelectItem value="Archive" text="Archive" />
+        <SelectItem value="Published" text="Published" />
+      </Select>
+    </HeadFilters>
+    <Search light placeholder="What can we help you find?" />
+    <HeadAction icon={CloudUpload32} description="Upload assets" />
+    <HeadAction href="/#/add" icon={Add32} description="Add Project" />
+  </HeadActions>
+</Head>
+
+<Head>
+  <HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
+  <HeadActions width="unset">
+    <HeadAction href="/#/add" icon={Close32} description="Add Project" />
+  </HeadActions>
+</Head>
+
+### Head with Identity only (title, subtitle and image)
+
+<Head>
+  <HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
+</Head>
+
+### Sizes
+
+Small size:
+
+<Head>
+  <HeadIdentity title="Test title" titleSize="small" imgSrc="https://via.placeholder.com/200x200"  imgSize="small" />
+</Head>
+
+Large size:
+
+<Head>
+  <HeadIdentity title="Test title" titleSize="large" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" imgSize="large" />
+</Head>
+
+### Head without Identity
+
+<Head>
+  <HeadActions>
+    <HeadFilters>
+      <Select inline selected="All" noLabel={true}>
+        <SelectItem value="All" text="All Statuses" />
+        <SelectItem value="Active" text="Active" />
+        <SelectItem value="Archive" text="Archive" />
+        <SelectItem value="Published" text="Published" />
+      </Select>
+    </HeadFilters>
+    <Search light placeholder="What can we help you find?" />
+    <HeadAction icon={CloudUpload32} description="Upload assets" />
+    <HeadAction href="/#/add" icon={Add32} description="Add Project" />
+  </HeadActions>
+</Head>
\ No newline at end of file
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index cad6f06f..2518c62e 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -144,6 +144,7 @@ module.exports = {
       remarkPlugins: [plugin, slug, carbonify],
       layout: {
         recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
+        avui: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
         _: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
       },
     }),
diff --git a/src/Head/Head.svelte b/src/Head/Head.svelte
new file mode 100644
index 00000000..7c28a07a
--- /dev/null
+++ b/src/Head/Head.svelte
@@ -0,0 +1,49 @@
+<script>
+  import Row from "../Grid/Row.svelte";
+  import Column from "../Grid/Column.svelte";
+
+  /**
+   * Set the flexDirection of the head
+   * @type {"row" | "row-reverse"}
+   */
+  export let flexDirection = "row";
+
+  /** Set the margin of the head */
+  export let margin = "20px 0 15px";
+</script>
+
+<style>
+  #header {
+    display: flex;
+    flex-direction: var(--flex-direction);
+    justify-content: space-between;
+    margin: var(--margin);
+  }
+</style>
+
+<svelte:head>
+  <style lang="scss">
+    #header-filters {
+      .bx--select-input__wrapper {
+        margin-right: 10px;
+
+        select.bx--select-input {
+          width: unset;
+          min-width: 95px;
+          max-width: 125px;
+          padding-right: 30px;
+        }
+      }
+    }
+  </style>
+</svelte:head>
+<Row>
+  <Column>
+    <div
+      id="header"
+      style="--flex-direction: {flexDirection}; --margin: {margin}"
+    >
+      <slot />
+    </div>
+  </Column>
+</Row>
diff --git a/src/Head/HeadAction.svelte b/src/Head/HeadAction.svelte
new file mode 100644
index 00000000..7f50290b
--- /dev/null
+++ b/src/Head/HeadAction.svelte
@@ -0,0 +1,33 @@
+<script>
+  import Button from "../Button/Button.svelte";
+
+  /**
+   * Specify the href attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
+  /**
+   * Specify the description
+   * @type {string}
+   */
+  export let description = undefined;
+</script>
+
+<Button
+  class="header-action"
+  href="{href}"
+  icon="{icon}"
+  hasIconOnly
+  iconDescription="{description}"
+  tooltipPosition="bottom"
+  tooltipAlignment="center"
+  kind="secondary"
+  on:click
+/>
diff --git a/src/Head/HeadActions.svelte b/src/Head/HeadActions.svelte
new file mode 100644
index 00000000..553ef20a
--- /dev/null
+++ b/src/Head/HeadActions.svelte
@@ -0,0 +1,25 @@
+<script>
+  /** Set the width of the head actions */
+  export let width = "100%";
+</script>
+
+<style>
+  #header-actions {
+    display: flex;
+    height: 47px;
+    margin: auto 0 0;
+    width: var(--width);
+
+    /* .header-action {
+      margin-right: 3px;
+    }
+
+    :last-child {
+      margin-right: 0px;
+    } */
+  }
+</style>
+
+<div id="header-actions" style="--width: {width}">
+  <slot />
+</div>
diff --git a/src/Head/HeadFilters.svelte b/src/Head/HeadFilters.svelte
new file mode 100644
index 00000000..fdfd30d5
--- /dev/null
+++ b/src/Head/HeadFilters.svelte
@@ -0,0 +1,12 @@
+<style lang="scss">
+  #header-filters {
+    display: flex;
+    margin-top: 5px;
+    margin-right: 50px;
+    font-size: 13px;
+  }
+</style>
+
+<div id="header-filters">
+  <slot />
+</div>
diff --git a/src/Head/HeadIdentity.svelte b/src/Head/HeadIdentity.svelte
new file mode 100644
index 00000000..9e4e5f32
--- /dev/null
+++ b/src/Head/HeadIdentity.svelte
@@ -0,0 +1,123 @@
+<script>
+  /**
+   * Specify the href attribute
+   * @type {string}
+   */
+  export let title = undefined;
+
+  /**
+   * Specify the subtitle attribute
+   * @type {string}
+   */
+  export let subtitle = undefined;
+
+  /**
+   * Specify the imgSrc attribute
+   * @type {string}
+   */
+  export let imgSrc = undefined;
+
+  /**
+   * Set the imgSize of the head
+   * @type {"small" | "normal" | "large"}
+   */
+  export let imgSize = "normal";
+
+  /**
+   * Set the titleSize of the head
+   * @type {"small" | "normal" | "large"}
+   */
+  export let titleSize = "normal";
+
+  let imgSizeValue;
+  let titleSizeValue;
+
+  switch (imgSize) {
+    case "small":
+      imgSizeValue = "0.75";
+      break;
+    case "normal":
+      imgSizeValue = "1";
+      break;
+    case "large":
+      imgSizeValue = "1.5";
+      break;
+  }
+
+  switch (titleSize) {
+    case "small":
+      titleSizeValue = "1rem";
+      break;
+    case "normal":
+      titleSizeValue = "1.5rem";
+      break;
+    case "large":
+      titleSizeValue = "2rem";
+      break;
+  }
+</script>
+
+<style lang="scss">
+  @import "@carbon/type/scss/styles";
+
+  #header-identity {
+    display: flex;
+    width: 100%;
+  }
+
+  #header-identity-img {
+    width: calc(20% * var(--img-size-multiply));
+    min-width: calc(70px * var(--img-size-multiply));
+    max-width: calc(100px * var(--img-size-multiply));
+
+    background-size: cover;
+    background-image: var(--img-src), url("https://via.placeholder.com/200x200");
+    margin-right: 15px;
+  }
+
+  #header-texts {
+    margin: auto 0;
+  }
+
+  h1 {
+    @include carbon--type-style("expressive-heading-06");
+    font-size: var(--title-size);
+    font-weight: bold;
+    letter-spacing: -0.09rem;
+    margin-right: 50px;
+  }
+
+  span#subtitle {
+    @include carbon--type-style("expressive-heading-02");
+    font-weight: 400;
+    display: block;
+  }
+
+  #header-tabs {
+    min-width: 330px;
+  }
+</style>
+
+<div id="header-identity">
+  {#if imgSrc}
+    <div
+      id="header-identity-img"
+      class="bx--aspect-ratio bx--aspect-ratio--1x1"
+      style="{`--img-size-multiply: ${imgSizeValue}; --img-src: url('${imgSrc}')`}"
+    ></div>
+  {/if}
+  {#if title || subtitle}
+    <div id="header-texts">
+      {#if title}
+        <h1 style="{`--title-size: ${titleSizeValue}`}">{title}</h1>
+      {/if}
+      {#if subtitle}<span id="subtitle">{subtitle}</span>{/if}
+      <slot />
+    </div>
+  {/if}
+  {#if $$slots.tabs}
+    <div id="header-tabs">
+      <slot name="tabs" />
+    </div>
+  {/if}
+</div>
diff --git a/src/Head/index.js b/src/Head/index.js
new file mode 100644
index 00000000..4718903f
--- /dev/null
+++ b/src/Head/index.js
@@ -0,0 +1,5 @@
+export { default as Head } from "./Head.svelte";
+export { default as HeadAction } from "./HeadAction.svelte";
+export { default as HeadActions } from "./HeadActions.svelte";
+export { default as HeadFilters } from "./HeadFilters.svelte";
+export { default as HeadIdentity } from "./HeadIdentity.svelte";
diff --git a/src/index.js b/src/index.js
index 522bc154..f2645f0d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -47,6 +47,13 @@ export { FormGroup } from "./FormGroup";
 export { FormItem } from "./FormItem";
 export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
+export {
+  Head,
+  HeadAction,
+  HeadActions,
+  HeadFilters,
+  HeadIdentity,
+} from "./Head";
 export { Icon, IconSkeleton } from "./Icon";
 export { InlineLoading } from "./InlineLoading";
 export { Link } from "./Link";
diff --git a/types/Head/Head.d.ts b/types/Head/Head.d.ts
new file mode 100644
index 00000000..08e24cbf
--- /dev/null
+++ b/types/Head/Head.d.ts
@@ -0,0 +1,24 @@
+/// <reference types="svelte" />
+
+export interface HeadProps {
+  /**
+   * Set the flexDirection of the head
+   * @default 'row'
+   */
+  flexDirection?: "row" | "row-reverse";
+
+  /**
+   * Set the margin of the head
+   * @default '20px 0 15px'
+   */
+  margin?: string;
+}
+
+export default class Head {
+  $$prop_def: HeadProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Head/HeadAction.d.ts b/types/Head/HeadAction.d.ts
new file mode 100644
index 00000000..f3c8a7c9
--- /dev/null
+++ b/types/Head/HeadAction.d.ts
@@ -0,0 +1,26 @@
+/// <reference types="svelte" />
+
+export interface HeadActionProps {
+  /**
+   * Specify the href attribute
+   */
+  href?: string;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Specify the description
+   */
+  description?: string;
+}
+
+export default class HeadAction {
+  $$prop_def: HeadActionProps;
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Head/HeadActions.d.ts b/types/Head/HeadActions.d.ts
new file mode 100644
index 00000000..a58bfe16
--- /dev/null
+++ b/types/Head/HeadActions.d.ts
@@ -0,0 +1,18 @@
+/// <reference types="svelte" />
+
+export interface HeadActionsProps {
+  /**
+   * Set the width of the head actions
+   * @default "100%"
+   */
+  width?: string;
+}
+
+export default class HeadActions {
+  $$prop_def: HeadActionsProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Head/HeadFilters.d.ts b/types/Head/HeadFilters.d.ts
new file mode 100644
index 00000000..499e2af9
--- /dev/null
+++ b/types/Head/HeadFilters.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+
+export interface HeadFiltersProps {}
+
+export default class HeadFilters {
+  $$prop_def: HeadFiltersProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Head/HeadIdentity.d.ts b/types/Head/HeadIdentity.d.ts
new file mode 100644
index 00000000..2f4d2954
--- /dev/null
+++ b/types/Head/HeadIdentity.d.ts
@@ -0,0 +1,40 @@
+/// <reference types="svelte" />
+
+export interface HeadIdentityProps {
+  /**
+   * Specify the href attribute
+   */
+  title?: string;
+
+  /**
+   * Specify the subtitle attribute
+   */
+  subtitle?: string;
+
+  /**
+   * Specify the imgSrc attribute
+   */
+  imgSrc?: string;
+
+  /**
+   * Set the imgSize of the head
+   * @default 'normal'
+   */
+  imgSize?: "small" | "normal" | "large";
+
+  /**
+   * Set the titleSize of the head
+   * @default 'normal'
+   */
+  titleSize?: "small" | "normal" | "large";
+}
+
+export default class HeadIdentity {
+  $$prop_def: HeadIdentityProps;
+  $$slot_def: {
+    default: {};
+    tabs: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 087e3347..8a2bfcf6 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -70,6 +70,11 @@ export { default as FormLabel } from "./FormLabel/FormLabel";
 export { default as Grid } from "./Grid/Grid";
 export { default as Row } from "./Grid/Row";
 export { default as Column } from "./Grid/Column";
+export { default as Head } from "./Head/Head";
+export { default as HeadAction } from "./Head/HeadAction";
+export { default as HeadActions } from "./Head/HeadActions";
+export { default as HeadFilters } from "./Head/HeadFilters";
+export { default as HeadIdentity } from "./Head/HeadIdentity";
 export { default as IconSkeleton } from "./Icon/IconSkeleton";
 export { default as Icon } from "./Icon/Icon";
 export { default as InlineLoading } from "./InlineLoading/InlineLoading";