diff --git a/packages/asc-web-components/catalog-item/index.js b/packages/asc-web-components/catalog-item/index.js
index d7e68b481b..20f56a446e 100644
--- a/packages/asc-web-components/catalog-item/index.js
+++ b/packages/asc-web-components/catalog-item/index.js
@@ -3,7 +3,9 @@ import PropTypes from "prop-types";
 
 import { ReactSVG } from "react-svg";
 
-import Badge from "../badge/";
+import Text from "../text";
+
+import Badge from "../badge";
 
 import {
   StyledCatalogItemContainer,
@@ -12,6 +14,7 @@ import {
   StyledCatalogItemBadgeWrapper,
   StyledCatalogItemText,
   StyledCatalogItemInitialText,
+  StyledCatalogItemHeaderContainer,
 } from "./styled-catalog-item";
 
 const getInitial = (text) => text.substring(0, 1).toUpperCase();
@@ -35,6 +38,8 @@ const CatalogItem = (props) => {
     labelBadge,
     iconBadge,
     onClickBadge,
+    isHeader,
+    isFirstHeader,
   } = props;
 
   const onClickAction = () => {
@@ -50,59 +55,76 @@ const CatalogItem = (props) => {
     onDrop && isDragging && onDrop(id, text);
   };
 
-  return (
-    <StyledCatalogItemContainer
-      className={className}
-      id={id}
-      style={style}
-      showText={showText}
-      isEndOfBlock={isEndOfBlock}
-    >
-      <StyledCatalogItemSibling
-        isActive={isActive}
-        isDragging={isDragging}
-        isDragActive={isDragActive}
-        onClick={onClickAction}
-        onMouseUp={onMouseUpAction}
-      ></StyledCatalogItemSibling>
+  const renderHeaderItem = () => {
+    return (
+      <StyledCatalogItemHeaderContainer
+        showText={showText}
+        isFirstHeader={isFirstHeader}
+      >
+        <Text className="catalog-item__header-text" truncate noSelect>
+          {showText ? text : ""}
+        </Text>
+      </StyledCatalogItemHeaderContainer>
+    );
+  };
 
-      <StyledCatalogItemImg>
-        <ReactSVG className="icon" src={icon} />
-        {!showText && (
-          <>
-            {showInitial && (
-              <StyledCatalogItemInitialText>
-                {getInitial(text)}
-              </StyledCatalogItemInitialText>
-            )}
-            {showBadge && !iconBadge && (
-              <StyledCatalogItemBadgeWrapper
-                onClick={onClickBadgeAction}
-                showText={showText}
-              />
-            )}
-          </>
-        )}
-      </StyledCatalogItemImg>
+  const renderItem = () => {
+    return (
+      <StyledCatalogItemContainer
+        className={className}
+        id={id}
+        style={style}
+        showText={showText}
+        isEndOfBlock={isEndOfBlock}
+      >
+        <StyledCatalogItemSibling
+          isActive={isActive}
+          isDragging={isDragging}
+          isDragActive={isDragActive}
+          onClick={onClickAction}
+          onMouseUp={onMouseUpAction}
+        ></StyledCatalogItemSibling>
 
-      {showText && (
-        <StyledCatalogItemText noSelect={true}>{text}</StyledCatalogItemText>
-      )}
-
-      {showBadge && showText && (
-        <StyledCatalogItemBadgeWrapper
-          showText={showText}
-          onClick={onClickBadgeAction}
-        >
-          {!iconBadge ? (
-            <Badge className="catalog-item__badge" label={labelBadge} />
-          ) : (
-            <ReactSVG src={iconBadge} />
+        <StyledCatalogItemImg>
+          <ReactSVG className="icon" src={icon} />
+          {!showText && (
+            <>
+              {showInitial && (
+                <StyledCatalogItemInitialText>
+                  {getInitial(text)}
+                </StyledCatalogItemInitialText>
+              )}
+              {showBadge && !iconBadge && (
+                <StyledCatalogItemBadgeWrapper
+                  onClick={onClickBadgeAction}
+                  showText={showText}
+                />
+              )}
+            </>
           )}
-        </StyledCatalogItemBadgeWrapper>
-      )}
-    </StyledCatalogItemContainer>
-  );
+        </StyledCatalogItemImg>
+
+        {showText && (
+          <StyledCatalogItemText noSelect={true}>{text}</StyledCatalogItemText>
+        )}
+
+        {showBadge && showText && (
+          <StyledCatalogItemBadgeWrapper
+            showText={showText}
+            onClick={onClickBadgeAction}
+          >
+            {!iconBadge ? (
+              <Badge className="catalog-item__badge" label={labelBadge} />
+            ) : (
+              <ReactSVG src={iconBadge} />
+            )}
+          </StyledCatalogItemBadgeWrapper>
+        )}
+      </StyledCatalogItemContainer>
+    );
+  };
+
+  return isHeader ? renderHeaderItem() : renderItem();
 };
 
 CatalogItem.propTypes = {
@@ -140,6 +162,10 @@ CatalogItem.propTypes = {
   iconBadge: PropTypes.string,
   /** Call function when user clicked on catalog item badge */
   onClickBadge: PropTypes.func,
+  /** Call when catalog item show as header */
+  isHeader: PropTypes.bool,
+  /** Disable margin top for catalog item header */
+  isFirstHeader: PropTypes.bool,
 };
 
 CatalogItem.defaultProps = {
@@ -150,6 +176,8 @@ CatalogItem.defaultProps = {
   isEndOfBlock: false,
   isDragging: false,
   isDragActive: false,
+  isHeader: false,
+  isFirstHeader: false,
 };
 
 export default React.memo(CatalogItem);
diff --git a/packages/asc-web-components/catalog-item/styled-catalog-item.js b/packages/asc-web-components/catalog-item/styled-catalog-item.js
index 2421a758c8..47f4c6ff5b 100644
--- a/packages/asc-web-components/catalog-item/styled-catalog-item.js
+++ b/packages/asc-web-components/catalog-item/styled-catalog-item.js
@@ -7,7 +7,6 @@ import { isMobile } from "react-device-detect";
 
 import Text from "@appserver/components/text";
 
-// width, height
 const badgeWithoutText = css`
   position: absolute;
 
@@ -30,6 +29,71 @@ const badgeWithoutText = css`
   margin: 0 !important;
 `;
 
+const StyledCatalogItemHeaderContainer = styled.div`
+  width: 100%;
+
+  height: 24px;
+
+  padding: 8px 12px 4px;
+
+  box-sizing: border-box;
+
+  margin-top: ${(props) => (props.isFirstHeader ? "0" : "8px")};
+
+  .catalog-item__header-text {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 11px;
+    line-height: 12px;
+    color: #a3a9ae;
+  }
+
+  @media ${tablet} {
+    padding: ${(props) => (props.showText ? "0px 12px 12px" : "4px 12px 19px")};
+
+    margin-top: ${(props) => (props.isFirstHeader ? "0" : "16px")};
+
+    ${(props) =>
+      !props.showText &&
+      css`
+        display: flex;
+        justify-content: center;
+
+        .catalog-item__header-text {
+          width: 20px;
+
+          line-height: 1px;
+          height: 1px;
+
+          background: #d0d5da;
+        }
+      `}
+  }
+
+  ${isMobile &&
+  css`
+    padding: ${(props) => (props.showText ? "0px 12px 12px" : "4px 12px 19px")};
+
+    margin-top: ${(props) => (props.isFirstHeader ? "0" : "16px")};
+
+    ${(props) =>
+      !props.showText &&
+      css`
+        display: flex;
+        justify-content: center;
+
+        .catalog-item__header-text {
+          width: 20px;
+
+          line-height: 1px;
+          height: 1px;
+
+          background: #d0d5da;
+        }
+      `}
+  `}
+`;
+
 const StyledCatalogItemBadgeWrapper = styled.div`
   z-index: 3;
 
@@ -322,4 +386,5 @@ export {
   StyledCatalogItemText,
   StyledCatalogItemSibling,
   StyledCatalogItemBadgeWrapper,
+  StyledCatalogItemHeaderContainer,
 };