diff --git a/packages/shared/components/article-item/ArticleItem.tsx b/packages/shared/components/article-item/ArticleItem.tsx
index c6f9fec02d..626b153e89 100644
--- a/packages/shared/components/article-item/ArticleItem.tsx
+++ b/packages/shared/components/article-item/ArticleItem.tsx
@@ -26,6 +26,7 @@
 
 import React from "react";
 import { ReactSVG } from "react-svg";
+import { Link } from "react-router-dom";
 
 import { Text } from "../text";
 
@@ -69,6 +70,7 @@ export const ArticleItemPure = (props: ArticleItemProps) => {
     badgeTitle,
     $currentColorScheme,
     title,
+    linkData,
   } = props;
 
   const onClickAction = (e: React.MouseEvent) => {
@@ -105,62 +107,68 @@ export const ArticleItemPure = (props: ArticleItemProps) => {
 
   const renderItem = () => {
     return (
-      <StyledArticleItemTheme
-        className={className}
-        style={style}
-        showText={showText}
-        isEndOfBlock={isEndOfBlock}
-        isActive={isActive}
-        data-testid="article-item"
-        $currentColorScheme={$currentColorScheme}
-        title={tooltipTitle}
+      <Link
+        style={{ textDecoration: "none" }}
+        to={linkData?.path}
+        state={linkData?.state}
       >
-        <StyledArticleItemSibling
-          id={folderId}
+        <StyledArticleItemTheme
+          className={className}
+          style={style}
+          showText={showText}
+          isEndOfBlock={isEndOfBlock}
           isActive={isActive}
-          isDragging={isDragging}
-          isDragActive={isDragActive}
-          onClick={onClickAction}
-          onMouseUp={onMouseUpAction}
-          onMouseDown={onMouseDown}
-        />
-        <StyledArticleItemImg isActive={isActive}>
-          <ReactSVG className="icon" src={icon} />
-          {!showText && (
-            <>
-              {showInitial && (
-                <StyledArticleItemInitialText>
-                  {getInitial(text)}
-                </StyledArticleItemInitialText>
-              )}
-              {showBadge && !iconBadge && (
-                <StyledArticleItemBadgeWrapper
-                  onClick={onClickBadgeAction}
-                  showText={showText}
-                />
-              )}
-            </>
-          )}
-        </StyledArticleItemImg>
-        {showText && (
-          <StyledArticleItemText isActive={isActive} noSelect>
-            {text}
-          </StyledArticleItemText>
-        )}
-        {showBadge && showText && (
-          <StyledArticleItemBadgeWrapper
-            showText={showText}
-            onClick={onClickBadgeAction}
-            title={badgeTitle}
-          >
-            {!iconBadge ? (
-              <Badge className="catalog-item__badge" label={labelBadge} />
-            ) : (
-              <ReactSVG className="catalog-item__icon" src={iconBadge} />
+          data-testid="article-item"
+          $currentColorScheme={$currentColorScheme}
+          title={tooltipTitle}
+        >
+          <StyledArticleItemSibling
+            id={folderId}
+            isActive={isActive}
+            isDragging={isDragging}
+            isDragActive={isDragActive}
+            onClick={onClickAction}
+            onMouseUp={onMouseUpAction}
+            onMouseDown={onMouseDown}
+          />
+          <StyledArticleItemImg isActive={isActive}>
+            <ReactSVG className="icon" src={icon} />
+            {!showText && (
+              <>
+                {showInitial && (
+                  <StyledArticleItemInitialText>
+                    {getInitial(text)}
+                  </StyledArticleItemInitialText>
+                )}
+                {showBadge && !iconBadge && (
+                  <StyledArticleItemBadgeWrapper
+                    onClick={onClickBadgeAction}
+                    showText={showText}
+                  />
+                )}
+              </>
             )}
-          </StyledArticleItemBadgeWrapper>
-        )}
-      </StyledArticleItemTheme>
+          </StyledArticleItemImg>
+          {showText && (
+            <StyledArticleItemText isActive={isActive} noSelect>
+              {text}
+            </StyledArticleItemText>
+          )}
+          {showBadge && showText && (
+            <StyledArticleItemBadgeWrapper
+              showText={showText}
+              onClick={onClickBadgeAction}
+              title={badgeTitle}
+            >
+              {!iconBadge ? (
+                <Badge className="catalog-item__badge" label={labelBadge} />
+              ) : (
+                <ReactSVG className="catalog-item__icon" src={iconBadge} />
+              )}
+            </StyledArticleItemBadgeWrapper>
+          )}
+        </StyledArticleItemTheme>
+      </Link>
     );
   };
 
diff --git a/packages/shared/components/article-item/ArticleItem.types.ts b/packages/shared/components/article-item/ArticleItem.types.ts
index 64a07a4d7e..49bb29583f 100644
--- a/packages/shared/components/article-item/ArticleItem.types.ts
+++ b/packages/shared/components/article-item/ArticleItem.types.ts
@@ -26,6 +26,21 @@
 
 import { TColorScheme } from "../../themes";
 
+export type TArticleLinkDataState =
+  | {
+      title: string;
+      isRoot: boolean;
+      isPublicRoomType: boolean;
+      rootFolderType: number;
+      canCreate: boolean;
+    }
+  | {};
+
+export type TArticleLinkData = {
+  path: string;
+  state: TArticleLinkDataState;
+};
+
 export interface ArticleItemProps {
   /** Accepts className */
   className?: string;
@@ -70,4 +85,5 @@ export interface ArticleItemProps {
   badgeTitle?: string;
   $currentColorScheme?: TColorScheme;
   title?: string;
+  linkData: TArticleLinkData;
 }