diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.styles.ts b/x-pack/platform/packages/shared/ai-assistant/icon/avatar.styles.ts
deleted file mode 100644
index 3b9d0b40ef274..0000000000000
--- a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.styles.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
-
-export const useStyles = () => {
-  const {
-    euiTheme: { border, size },
-  } = useEuiTheme();
-
-  const root = css`
-    border: ${border.thin};
-    padding: ${size.xs};
-  `;
-
-  return { root };
-};
diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx b/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx
index 40142b8b30fa8..ce539979f202c 100644
--- a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx
+++ b/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import { EuiAvatar, EuiAvatarProps } from '@elastic/eui';
 
 import { AssistantIcon } from './icon';
-import { useStyles } from './avatar.styles';
 
 /**
  * Avatar component for the AI Assistant.
@@ -23,11 +22,9 @@ export type AssistantAvatarProps = Omit<
  * A `EuiAvatar` component customized for the AI Assistant.
  */
 export const AssistantAvatar = ({
-  css,
   color = 'plain',
   size = 'm',
   ...props
 }: AssistantAvatarProps) => {
-  const { root } = useStyles();
-  return <EuiAvatar {...{ ...props, color, size }} css={[root, css]} iconType={AssistantIcon} />;
+  return <EuiAvatar {...{ ...props, color, size }} iconType={AssistantIcon} />;
 };
diff --git a/x-pack/platform/plugins/shared/integration_assistant/public/components/create_integration/create_integration_assistant/header/header.tsx b/x-pack/platform/plugins/shared/integration_assistant/public/components/create_integration/create_integration_assistant/header/header.tsx
index 0989a772aa971..609226c48c8dd 100644
--- a/x-pack/platform/plugins/shared/integration_assistant/public/components/create_integration/create_integration_assistant/header/header.tsx
+++ b/x-pack/platform/plugins/shared/integration_assistant/public/components/create_integration/create_integration_assistant/header/header.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { AssistantAvatar } from '@kbn/ai-assistant-icon';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
@@ -14,6 +14,14 @@ import { useActions } from '../state';
 import { Steps } from './steps';
 import * as i18n from './translations';
 
+const useAvatarCss = () => {
+  const { euiTheme } = useEuiTheme();
+  return css`
+    border: 1px solid ${euiTheme.colors.lightShade};
+    padding: ${euiTheme.size.xs};
+  `;
+};
+
 const contentCss = css`
   width: 100%;
   max-width: 730px;
@@ -25,6 +33,7 @@ interface HeaderProps {
 }
 export const Header = React.memo<HeaderProps>(({ currentStep, isGenerating }) => {
   const { setStep } = useActions();
+  const avatarCss = useAvatarCss();
 
   return (
     <KibanaPageTemplate.Header>
@@ -40,7 +49,7 @@ export const Header = React.memo<HeaderProps>(({ currentStep, isGenerating }) =>
                 justifyContent="center"
               >
                 <EuiFlexItem grow={false}>
-                  <AssistantAvatar name={i18n.ASSISTANT_AVATAR} />
+                  <AssistantAvatar css={avatarCss} name={i18n.ASSISTANT_AVATAR} />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiText>