diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
index 50fca4d096..49bd6357ca 100644
--- a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
+++ b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx
@@ -11,6 +11,8 @@ import Flex from "../../Flex/Flex";
 import AttentionBoxLink from "../AttentionBoxLink/AttentionBoxLink";
 import { TipCheckYourself } from "./AttentionBox.stories.helpers";
 import * as AttentionBoxStories from "./AttentionBox.stories";
+import { Heading } from "../../Heading";
+import Text from "../../Text/Text";
 
 <Meta of={AttentionBoxStories} />
 
@@ -76,11 +78,12 @@ There are five types of attention boxes: Primary, success, danger, warning and d
     {
       positive: {
         component: (
-          <AttentionBox
-            title="Attention box title"
-            text="Studies show that 100% of people who celebrate birthdays, will eventually die."
-            className="monday-storybook-attention-box_box"
-          />
+          <div style={{width: "340px"}}>
+              <AttentionBox
+                title="Attention box title"
+                text="Studies show that 100% of people who celebrate birthdays, will eventually die."
+              />
+          </div>
         ),
         description: "Provide a short and brief title, and explanation related to the title."
       },
@@ -93,10 +96,10 @@ There are five types of attention boxes: Primary, success, danger, warning and d
       positive: {
         component: (
           <div>
-            <span className="monday-storybook-attention-box_title">Inbox</span>
-            <span className="monday-storybook-attention-box_text">Catch up on updates from all your boards.</span>
-            <AttentionBox className="monday-storybook-attention-box_att-box" compact icon={Info}>
-              <Flex style={{ width: "100%" }} justify="space-between">
+            <Heading type="h2" weight="bold">Inbox</Heading>
+            <Text style={{ margin: "0 0 10px" }}>Catch up on updates from all your boards.</Text>
+            <AttentionBox compact icon={Info}>
+              <Flex style={{ width: "400px" }} justify="space-between">
                 Get your monday.com notifications <AttentionBoxLink href="" text="Learn more" />
               </Flex>
             </AttentionBox>
@@ -108,10 +111,10 @@ There are five types of attention boxes: Primary, success, danger, warning and d
       negative: {
         component: (
           <div>
-            <span className="monday-storybook-attention-box_title">Inbox</span>
-            <span className="monday-storybook-attention-box_text">Catch up on updates from all your boards.</span>
-            <AttentionBox compact className="monday-storybook-attention-box_att-box" icon={Info}>
-              <Flex style={{ width: "100%" }} justify="space-between">
+            <Heading type="h2" weight="bold">Inbox</Heading>
+            <Text style={{ margin: "0 0 10px" }}>Catch up on updates from all your boards.</Text>
+            <AttentionBox compact icon={Info}>
+              <Flex style={{ width: "400px" }} justify="space-between">
                 7 days left on your free trial <AttentionBoxLink href="" text="Learn more" />
               </Flex>
             </AttentionBox>
diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.scss b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.scss
deleted file mode 100644
index 34486bae04..0000000000
--- a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@import "../../../styles/typography";
-
-.monday-storybook-attention-box {
-  &--fixed-width {
-    width: 350px;
-  }
-
-  &_column-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: 15px;
-  }
-
-  &_title {
-    font-style: normal;
-    font-weight: bold;
-    font-size: 24px;
-    line-height: 28px;
-    display: block;
-  }
-
-  &_text {
-    font-size: 14px;
-    line-height: 22px;
-    margin: 4px 0 10px;
-  }
-
-  &_row-wrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 52px;
-    align-content: flex-start;
-  }
-
-  &_inline-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  &_wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &_search-bar {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-    padding: 16px;
-    width: 380px;
-  }
-
-  &_box {
-    width: 340px;
-  }
-
-  &_dismissable {
-    width: 274px;
-  }
-
-  &_search {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 18px;
-  }
-
-  &_lable {
-    font-size: 14px;
-    padding-left: 5px;
-    margin-top: 4px;
-  }
-
-  &_inline-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-  }
-
-  &_name {
-    font-size: 14px;
-
-    span {
-      color: var(--sb-secondary-text-color);
-    }
-  }
-
-  &_icon {
-    margin: 0 5px 0 8px;
-  }
-
-  &_info {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &_att-box {
-    width: 430px;
-    margin-top: 10px;
-  }
-}
diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
index 3c113254c4..b5fecc1ff1 100644
--- a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
+++ b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx
@@ -11,8 +11,9 @@ import Avatar from "../../Avatar/Avatar";
 import person from "./assets/person.png";
 import Flex from "../../Flex/Flex";
 import AttentionBoxLink from "../AttentionBoxLink/AttentionBoxLink";
-import "./AttentionBox.stories.scss";
 import Button from "../../Button/Button";
+import Text from "../../Text/Text";
+import { Heading } from "../../Heading";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: AttentionBox,
@@ -40,15 +41,16 @@ export default {
 };
 
 export const Overview = {
-  render: attentionBoxTemplate.bind({}),
+  render: () => (
+    <div style={{ width: "340px" }}>
+      {attentionBoxTemplate({
+        onClose: () => {},
+        title: "Attention box title",
+        text: "Studies show that 100% of people who celebrate birthdays, will eventually die."
+      })}
+    </div>
+  ),
   name: "Overview",
-
-  args: {
-    onClose: () => {},
-    title: "Attention box title",
-    text: "Studies show that 100% of people who celebrate birthdays, will eventually die.",
-    className: "monday-storybook-attention-box_box"
-  },
   parameters: {
     docs: {
       liveEdit: {
@@ -60,49 +62,54 @@ export const Overview = {
 
 export const States = {
   render: () => (
-    <Flex direction="column" gap="small">
+    <Flex direction="column" gap="small" align="start">
       <StoryDescription description="Primary">
-        <AttentionBox
-          title="Enabling SSO Login"
-          text="Will cause all your team lose access to the account until using the correct SSO source."
-          className="monday-storybook-attention-box_box"
-          icon={Info}
-        />
+        <div style={{ width: "340px" }}>
+          <AttentionBox
+            title="Enabling SSO Login"
+            text="Will cause all your team lose access to the account until using the correct SSO source."
+            icon={Info}
+          />
+        </div>
       </StoryDescription>
       <StoryDescription description="Success">
-        <AttentionBox
-          title="You're doing great"
-          text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
-          type="success"
-          className="monday-storybook-attention-box_box"
-          icon={ThumbsUp}
-        />
+        <div style={{ width: "340px" }}>
+          <AttentionBox
+            title="You're doing great"
+            text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+            type="success"
+            icon={ThumbsUp}
+          />
+        </div>
       </StoryDescription>
       <StoryDescription description="Danger">
-        <AttentionBox
-          title="Account low on free space"
-          text="Your account is out of free space, free some space to prevent data loss."
-          type="danger"
-          className="monday-storybook-attention-box_box"
-        />
+        <div style={{ width: "340px" }}>
+          <AttentionBox
+            title="Account low on free space"
+            text="Your account is out of free space, free some space to prevent data loss."
+            type="danger"
+          />
+        </div>
       </StoryDescription>
       <StoryDescription description="Warning">
-        <AttentionBox
-          title="Account low on free space"
-          text="Your account is out of free space, free some space to prevent data loss."
-          type="warning"
-          className="monday-storybook-attention-box_box"
-          icon={Info}
-        />
+        <div style={{ width: "340px" }}>
+          <AttentionBox
+            title="Account low on free space"
+            text="Your account is out of free space, free some space to prevent data loss."
+            type="warning"
+            icon={Info}
+          />
+        </div>
       </StoryDescription>
       <StoryDescription description="Dark">
-        <AttentionBox
-          title="What a great idea!"
-          text="You can also make this list sortable by tagging the items with tags column"
-          type="dark"
-          className="monday-storybook-attention-box_box"
-          icon={Favorite}
-        />
+        <div style={{ width: "340px" }}>
+          <AttentionBox
+            title="What a great idea!"
+            text="You can also make this list sortable by tagging the items with tags column"
+            type="dark"
+            icon={Favorite}
+          />
+        </div>
       </StoryDescription>
     </Flex>
   ),
@@ -116,17 +123,14 @@ export const States = {
 };
 
 export const AttentionBoxWithLink = {
-  render: () => {
-    return (
-      /** Classname for setting a constant width to the attention box */
-      <AttentionBox compact className="monday-storybook-attention-box--fixed-width">
-        <Flex justify="space-between" gap="xs">
-          Get your monday.com notifications
-          <AttentionBoxLink href="" text="Learn more" />
-        </Flex>
-      </AttentionBox>
-    );
-  }
+  render: () => (
+    <AttentionBox compact>
+      <Flex justify="space-between" gap="xs">
+        Get your monday.com notifications
+        <AttentionBoxLink href="" text="Learn more" />
+      </Flex>
+    </AttentionBox>
+  )
 };
 
 export const Dismissable = {
@@ -134,30 +138,30 @@ export const Dismissable = {
     const mockOnClose = useCallback(() => null, []);
 
     return (
-      <div className="monday-storybook-attention-box_row-wrapper">
-        <AttentionBox
-          title="Regular attention box"
-          text="Dismissable attention box with two lines of content."
-          onClose={mockOnClose}
-          className="monday-storybook-attention-box_dismissable"
-          icon={Info}
-        />
-        <AttentionBox
-          text="Attention box in compact mode"
-          onClose={mockOnClose}
-          compact
-          className="monday-storybook-attention-box_dismissable"
-        />
-      </div>
+      <Flex gap="large" align="start">
+        <div style={{ width: "274px" }}>
+          <AttentionBox
+            title="Regular attention box"
+            text="Dismissable attention box with two lines of content."
+            onClose={mockOnClose}
+            icon={Info}
+          />
+        </div>
+        <div style={{ width: "274px" }}>
+          <AttentionBox text="Attention box in compact mode" onClose={mockOnClose} compact />
+        </div>
+      </Flex>
     );
   }
 };
 
 export const NaturalAttentionBox = {
   render: () => (
-    <div className="monday-storybook-attention-box_wrapper">
-      <span className="monday-storybook-attention-box_title">Cross-Account Copier</span>
-      <span className="monday-storybook-attention-box_text">Copy boards and dashboards to another account</span>
+    <Flex direction="column" align="start">
+      <Heading type="h2" weight="bold">
+        Cross-Account Copier
+      </Heading>
+      <Text style={{ margin: "4px 0 10px" }}>Copy boards and dashboards to another account</Text>
       <AttentionBox
         compact
         withIconWithoutHeader
@@ -165,7 +169,7 @@ export const NaturalAttentionBox = {
         text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
         type="dark"
       />
-    </div>
+    </Flex>
   )
 };
 
@@ -174,22 +178,25 @@ export const AttentionBoxInsideADialogCombobox = {
     const mockOnClose = useCallback(() => null, []);
 
     return (
-      <DialogContentContainer className="monday-storybook-attention-box_search-bar">
-        <Search placeholder="Search by name, role, team, or email" />
-        <div className="monday-storybook-attention-box_lable">Suggested people</div>
-        <div className="monday-storybook-attention-box_search">
-          <div className="monday-storybook-attention-box_inline-container">
-            <Avatar size="medium" src={person} type="img" />
-            <span className="monday-storybook-attention-box_name">
-              May Kishon <span>(UX/UI Product Designer)</span>
-            </span>
-          </div>
-          <div className="monday-storybook-attention-box_inline-container">
-            <Icon iconSize="24" icon={Invite} className="monday-storybook-attention-box_icon" />
-            <span className="monday-storybook-attention-box_name">Invite new board member by email</span>
-          </div>
-          <AttentionBox text="Hold ⌘ to select more than one person or team" compact onClose={mockOnClose} />
-        </div>
+      <DialogContentContainer style={{ width: "380px", padding: "var(--spacing-medium)" }}>
+        <Flex direction="column" gap="medium" align="initial">
+          <Search placeholder="Search by name, role, team, or email" />
+          <Text style={{ paddingInlineStart: "5px", marginTop: "4px" }}>Suggested people</Text>
+          <Flex direction="column" gap="medium" align="start">
+            <Flex gap="small">
+              <Avatar size="medium" src={person} type="img" />
+              <Flex gap="xs">
+                <Text>May Kishon </Text>
+                <Text color="secondary">(UX/UI Product Designer)</Text>
+              </Flex>
+            </Flex>
+            <Flex gap="small">
+              <Icon iconSize="24" icon={Invite} />
+              <Text>Invite new board member by email</Text>
+            </Flex>
+            <AttentionBox text="Hold ⌘ to select more than one person or team" compact onClose={mockOnClose} />
+          </Flex>
+        </Flex>
       </DialogContentContainer>
     );
   },