diff --git a/.changeset/lemon-lamps-chew.md b/.changeset/lemon-lamps-chew.md
new file mode 100644
index 0000000000..9adbf1d57b
--- /dev/null
+++ b/.changeset/lemon-lamps-chew.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): `Callout` visual changes
diff --git a/packages/fuselage/src/components/Callout/Callout.spec.tsx b/packages/fuselage/src/components/Callout/Callout.spec.tsx
index 9f7936fe0f..1833d692c7 100644
--- a/packages/fuselage/src/components/Callout/Callout.spec.tsx
+++ b/packages/fuselage/src/components/Callout/Callout.spec.tsx
@@ -1,47 +1,31 @@
 import { composeStories } from '@storybook/testing-react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { Callout } from './Callout';
 import * as stories from './Callout.stories';
 
-const { Default, WithDescriptionOnly, Info, Success, Warning, Danger } =
-  composeStories(stories);
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
-describe('[Callout Component]', () => {
-  describe('Storybook', () => {
-    it.each([
-      ['Default', Default],
-      ['WithDescriptionOnly', WithDescriptionOnly],
-      ['Info', Info],
-      ['Success', Success],
-      ['Warning', Warning],
-      ['Danger', Danger],
-    ])('renders %p story without crashing', (_storyName, Story) => {
-      render(<Story />);
-    });
+describe('[CheckBox Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
 
-    it.each([
-      ['.rcx-callout--type-info', 'info', Info],
-      ['.rcx-callout--type-success', 'success', Success],
-      ['.rcx-callout--type-warning', 'warning', Warning],
-      ['.rcx-callout--type-danger', 'danger', Danger],
-    ])(
-      'should have class %p when type is %p',
-      (className, _typeName, Story) => {
-        const { container } = render(<Story />);
-        expect(container.querySelector(className)).toBeInTheDocument();
-      }
-    );
-  });
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
 
-  it('should show title when this property is passed', () => {
-    render(<Callout title='test-title' />);
-    screen.getByText('test-title');
-  });
-
-  it('should display children', () => {
-    render(<Callout>Children</Callout>);
-    screen.getByText('Children');
-  });
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss
index 5b28183ca9..3e3f750480 100644
--- a/packages/fuselage/src/components/Callout/Callout.styles.scss
+++ b/packages/fuselage/src/components/Callout/Callout.styles.scss
@@ -2,76 +2,96 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
+$callout-default-color: theme(
+  'callout-default-color',
+  colors.font(secondary-info)
+);
+$callout-info-color: theme('callout-info-color', colors.status-font(on-info));
+$callout-success-color: theme(
+  'callout-success-color',
+  colors.status-font(on-success)
+);
+$callout-warning-color: theme(
+  'callout-warning-color',
+  colors.status-font(on-warning)
+);
+$callout-danger-color: theme(
+  'callout-danger-color',
+  colors.status-font(on-danger)
+);
+$callout-text-color: theme('callout-text-color', colors.font(pure-black));
+
 .rcx-callout {
   display: flex;
 
-  padding-block: lengths.padding(8);
-  padding-inline: lengths.padding(16);
+  padding: lengths.padding(12);
+
+  color: $callout-text-color;
 
-  color: theme('callout-color', colors.font(default));
+  border-width: lengths.border-width(default);
+  border-style: solid;
+  border-color: $callout-default-color;
 
   border-radius: theme('callout-border-radius', lengths.border-radius(medium));
 
-  background-color: theme('callout-background-color', colors.surface(tint));
+  &--info {
+    border-color: $callout-info-color;
 
-  &--type-info {
-    color: theme('callout-color-info', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-info',
-      colors.status-background(info)
-    );
+    .rcx-callout__icon {
+      color: $callout-info-color;
+    }
   }
 
-  &--type-success {
-    color: theme('callout-color-success', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-success',
-      colors.status-background(success)
-    );
+  &--success {
+    border-color: $callout-success-color;
+
+    .rcx-callout__icon {
+      color: $callout-success-color;
+    }
   }
 
-  &--type-warning {
-    color: theme('callout-color-warning', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-warning',
-      colors.status-background(warning)
-    );
+  &--warning {
+    border-color: $callout-warning-color;
+
+    .rcx-callout__icon {
+      color: $callout-warning-color;
+    }
   }
 
-  &--type-danger {
-    color: theme('callout-color-danger', colors.font(pure-black));
-    background-color: theme(
-      'callout-background-color-danger',
-      colors.status-background(danger)
-    );
+  &--danger {
+    border-color: $callout-danger-color;
+
+    .rcx-callout__icon {
+      color: $callout-danger-color;
+    }
   }
-}
 
-.rcx-callout__wrapper {
-  display: flex;
+  &__wrapper {
+    display: flex;
 
-  overflow: hidden;
-  flex-flow: column nowrap;
-  flex: 1 1 0;
+    overflow: hidden;
+    flex-flow: column nowrap;
+    flex: 1 1 0;
 
-  margin-inline-start: lengths.margin(12);
+    margin-inline-start: lengths.margin(12);
 
-  @include typography.use-font-scale(c1);
+    @include typography.use-font-scale(c1);
 
-  > :nth-child(2) {
-    margin-block-start: lengths.margin(4);
+    > :nth-child(2) {
+      margin-block-start: lengths.margin(4);
+    }
   }
-}
 
-.rcx-callout__title {
-  white-space: nowrap;
+  &__title {
+    white-space: nowrap;
 
-  @include typography.use-font-scale(p2b);
-  @include typography.use-text-ellipsis;
-}
+    @include typography.use-font-scale(p2b);
+    @include typography.use-text-ellipsis;
+  }
 
-.rcx-callout__children {
-  display: block;
+  &__content {
+    display: block;
 
-  @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(p2);
+  }
 }
diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx
index bdfa90310b..76cb3207df 100644
--- a/packages/fuselage/src/components/Callout/Callout.tsx
+++ b/packages/fuselage/src/components/Callout/Callout.tsx
@@ -16,6 +16,7 @@ export const Callout = ({
   title,
   children,
   icon,
+  className,
   ...props
 }: CalloutProps) => {
   const defaultIcon =
@@ -26,15 +27,23 @@ export const Callout = ({
     'info-circled';
 
   return (
-    <Box is='section' rcx-callout rcx-callout--type={type} {...props}>
-      <Icon name={icon || defaultIcon} size='x20' />
+    <Box
+      is='section'
+      className={[
+        `rcx-callout ${type && `rcx-callout--${type}`} ${className || ''}`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...props}
+    >
+      <Icon
+        className='rcx-callout__icon'
+        name={icon || defaultIcon}
+        size='x20'
+      />
       <Box rcx-callout__wrapper>
-        {title && (
-          <Box is='h1' rcx-callout__title>
-            {title}
-          </Box>
-        )}
-        {children && <Box rcx-callout__children>{children}</Box>}
+        {title && <Box rcx-callout__title>{title}</Box>}
+        {children && <Box rcx-callout__content>{children}</Box>}
       </Box>
     </Box>
   );
diff --git a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap
new file mode 100644
index 0000000000..c181237a3e
--- /dev/null
+++ b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout undefined "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-hash rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__title"
+        >
+          This is a message with custom icon
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders Danger without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--danger "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-ban rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__title"
+        >
+          This is a danger message
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout undefined "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__title"
+        >
+          This is a generic title
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders Info without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--info "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__title"
+        >
+          This is a info message
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders Success without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--success "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-checkmark-circled rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__title"
+        >
+          This is a success message
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders Warning without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--warning "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-warning rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__title"
+        >
+          This is a warning message
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;
+
+exports[`[CheckBox Rendering] renders WithDescriptionOnly without crashing 1`] = `
+<body>
+  <div>
+    <section
+      class="rcx-box rcx-box--full  rcx-callout undefined "
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon  rcx-callout__icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+      <div
+        class="rcx-box rcx-box--full rcx-callout__wrapper"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-callout__content"
+        >
+          This is a generic description.
+        </div>
+      </div>
+    </section>
+  </div>
+</body>
+`;