diff --git a/packages/asc-web-common/components/Article/styled-article.js b/packages/asc-web-common/components/Article/styled-article.js
index b3cd2822b3..831909966b 100644
--- a/packages/asc-web-common/components/Article/styled-article.js
+++ b/packages/asc-web-common/components/Article/styled-article.js
@@ -87,7 +87,7 @@ const StyledArticle = styled.article`
       padding: 0 20px;
 
       @media ${tablet} {
-        height: calc(100% - 120px);
+        height: calc(100% - 150px);
         padding: 0 8px;
       }
 
@@ -156,13 +156,13 @@ const StyledHeading = styled.div`
 
   @media ${tablet} {
     display: ${(props) => (props.showText ? "block" : "none")};
-    margin-left: ${(props) => props.showText && "12px"};
+    margin-left: 9px;
   }
 
   ${isTablet &&
   css`
     display: ${(props) => (props.showText ? "block" : "none")};
-    margin-left: ${(props) => props.showText && "12px"};
+    margin-left: 1px !important;
   `}
 
   @media ${mobile} {
@@ -256,68 +256,19 @@ const StyledCrossIcon = styled(CrossIcon)`
 StyledCrossIcon.defaultProps = { theme: Base };
 
 const StyledArticleProfile = styled.div`
-  position: fixed;
-  z-index: 301;
-  bottom: 0;
-  padding: 16px 0;
+  padding: 16px 20px;
+  height: 40px !important;
   display: flex;
   align-items: center;
-  width: ${(props) =>
-    !props.tablet
-      ? "211px"
-      : props.tablet && props.showText
-      ? "211px"
-      : "44px"};
-
-  ${(props) =>
-    props.tablet &&
-    css`
-      padding: 14px 6px;
-      justify-content: ${(props) => !props.showText && "center"};
-    `}
-
-  padding-left: 20px;
-  margin-left: -20px;
-  padding-right: 20px;
-  margin-right: -20px;
-
-  @media ${tablet} {
-    padding-left: 8px;
-    margin-left: -8px;
-    padding-right: 8px;
-    margin-right: -8px;
-
-    ${(props) =>
-      props.showText &&
-      css`
-        padding-left: 24px;
-        margin-left: -24px;
-        padding-right: 24px;
-        margin-right: -24px;
-      `}
-  }
-
-  ${(props) =>
-    props.tablet &&
-    css`
-      padding-left: 8px;
-      margin-left: -8px;
-      padding-right: 8px;
-      margin-right: -8px;
-
-      ${(props) =>
-        props.showText &&
-        css`
-          padding-left: 24px;
-          margin-left: -24px;
-          padding-right: 24px;
-          margin-right: -24px;
-        `}
-    `}
+  justify-content: center;
 
   border-top: ${(props) => props.theme.catalog.profile.borderTop};
   background-color: ${(props) => props.theme.catalog.profile.background};
 
+  @media ${tablet} {
+    padding: 16px 14px;
+  }
+
   .option-button {
     margin-left: auto;
     height: 32px;
@@ -344,7 +295,15 @@ const StyledUserName = styled.div`
   max-width: 131px;
   min-width: 131px;
   padding-left: 12px;
-  padding-right: 4px;
+`;
+
+const StyledProfileWrapper = styled.div`
+  z-index: 301;
+  min-width: ${(props) => (props.showText ? "243px" : "60px")};
+  max-width: ${(props) => (props.showText ? "243px" : "60px")};
+  position: fixed;
+  bottom: 0;
+  left: 0;
 `;
 
 export {
@@ -358,4 +317,5 @@ export {
   StyledCrossIcon,
   StyledArticleProfile,
   StyledUserName,
+  StyledProfileWrapper,
 };
diff --git a/packages/asc-web-common/components/Article/sub-components/article-profile.js b/packages/asc-web-common/components/Article/sub-components/article-profile.js
index 5ef0cf6498..6e905ff750 100644
--- a/packages/asc-web-common/components/Article/sub-components/article-profile.js
+++ b/packages/asc-web-common/components/Article/sub-components/article-profile.js
@@ -8,7 +8,11 @@ import ContextMenuButton from "@appserver/components/context-menu-button";
 import ContextMenu from "@appserver/components/context-menu";
 import { isTablet as isTabletUtils } from "@appserver/components/utils/device";
 import { isTablet, isMobileOnly } from "react-device-detect";
-import { StyledArticleProfile, StyledUserName } from "../styled-article";
+import {
+  StyledArticleProfile,
+  StyledUserName,
+  StyledProfileWrapper,
+} from "../styled-article";
 
 const ArticleProfile = (props) => {
   const { user, showText, getUserRole, getActions } = props;
@@ -38,52 +42,53 @@ const ArticleProfile = (props) => {
   const username = user.displayName.split(" ");
 
   return (
-    <StyledArticleProfile showText={showText} tablet={isTabletView}>
-      <div ref={ref}>
-        <Avatar
-          size={avatarSize}
-          role={userRole}
-          source={user.avatar}
-          userName={user.displayName}
-          onClick={onAvatarClick}
-        />
-        <ContextMenu
-          model={model}
-          containerRef={ref}
-          ref={menuRef}
-          onHide={onHide}
-          scaled={false}
-          leftOffset={-50}
-        />
-      </div>
-      {(!isTabletView || showText) && (
-        <>
-          <StyledUserName length={user.displayName.length}>
-            <Text fontWeight={600} noSelect truncate>
-              {username[0]}
-              &nbsp;
-            </Text>
-            <Text fontWeight={600} noSelect truncate>
-              {username[1]}
-            </Text>
-          </StyledUserName>
-
-          <ContextMenuButton
-            className="option-button"
-            iconClassName="option-button-icon"
-            zIndex={402}
-            directionX="left"
-            directionY="top"
-            iconName="/static/images/vertical-dots.react.svg"
-            size={32}
-            isFill
-            getData={() => getActions(t)}
-            isDisabled={false}
-            usePortal={true}
+    <StyledProfileWrapper showText={showText}>
+      <StyledArticleProfile showText={showText} tablet={isTabletView}>
+        <div ref={ref}>
+          <Avatar
+            size={avatarSize}
+            role={userRole}
+            source={user.avatar}
+            userName={user.displayName}
+            onClick={onAvatarClick}
           />
-        </>
-      )}
-    </StyledArticleProfile>
+          <ContextMenu
+            model={model}
+            containerRef={ref}
+            ref={menuRef}
+            onHide={onHide}
+            scaled={false}
+            leftOffset={-50}
+          />
+        </div>
+        {(!isTabletView || showText) && (
+          <>
+            <StyledUserName length={user.displayName.length}>
+              <Text fontWeight={600} noSelect truncate>
+                {username[0]}
+                &nbsp;
+              </Text>
+              <Text fontWeight={600} noSelect truncate>
+                {username[1]}
+              </Text>
+            </StyledUserName>
+            <ContextMenuButton
+              className="option-button"
+              iconClassName="option-button-icon"
+              zIndex={402}
+              directionX="left"
+              directionY="top"
+              iconName="/static/images/vertical-dots.react.svg"
+              size={32}
+              isFill
+              getData={() => getActions(t)}
+              isDisabled={false}
+              usePortal={true}
+            />
+          </>
+        )}
+      </StyledArticleProfile>
+    </StyledProfileWrapper>
   );
 };