diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts
new file mode 100644
index 0000000000..bd53713166
--- /dev/null
+++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton'
+
+export const CopilotWrapper = styled(FlexGroup)`
+  user-select: none;
+`
+
+export const CopilotIconButton = styled(IconButton)<
+  { isOpen: boolean } & IconButtonProps
+>`
+  padding: ${({ theme }) => theme.core.space.space200};
+
+  // TODO: Remove this once size property is enabled for IconButton
+  svg {
+    width: 21px;
+    height: 21px;
+    color: ${({ theme }) => theme.semantic.color.text.attention600};
+  }
+
+  ${({ isOpen, theme }) =>
+    isOpen
+      ? `background-color: ${theme.semantic.color.background.primary200};`
+      : ''}
+`
diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx
index 566bee3bd0..fec74accf7 100644
--- a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx
+++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx
@@ -1,6 +1,4 @@
 import React from 'react'
-import cx from 'classnames'
-
 import { useDispatch, useSelector } from 'react-redux'
 import {
   sidePanelsSelector,
@@ -10,34 +8,32 @@ import {
 import { RiTooltip } from 'uiSrc/components'
 import { CopilotIcon } from 'uiSrc/components/base/icons'
 import { SidePanels } from 'uiSrc/slices/interfaces/insights'
-import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
-import styles from './styles.module.scss'
+import { CopilotWrapper, CopilotIconButton } from './CopilotTrigger.styles'
 
 const CopilotTrigger = () => {
   const { openedPanel } = useSelector(sidePanelsSelector)
-
   const dispatch = useDispatch()
 
   const handleClickTrigger = () => {
     dispatch(toggleSidePanel(SidePanels.AiAssistant))
   }
 
+  const isCopilotOpen = openedPanel === SidePanels.AiAssistant
+
   return (
-    <div
-      className={cx(styles.container, {
-        [styles.isOpen]: openedPanel === SidePanels.AiAssistant,
-      })}
-    >
+    <CopilotWrapper align="center" justify="end">
       <RiTooltip content="Redis Copilot">
-        <EmptyButton
-          className={styles.btn}
+        <CopilotIconButton
+          size="S"
           role="button"
           icon={CopilotIcon}
           onClick={handleClickTrigger}
           data-testid="copilot-trigger"
+          isOpen={isCopilotOpen}
+          aria-label="Copilot-trigger"
         />
       </RiTooltip>
-    </div>
+    </CopilotWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss b/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss
deleted file mode 100644
index e3f7ba2bf1..0000000000
--- a/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  user-select: none;
-
-  &.isOpen {
-    .btn {
-      outline: 0 !important;
-      border-color: var(--euiColorPrimary) !important;
-      background-color: var(--insightsTriggerBgColor) !important;
-      border-radius: 4px;
-    }
-  }
-
-  .btn {
-    display: flex;
-    align-items: center;
-    color: var(--recommendationColor);
-    background: transparent !important;
-    border-color: transparent !important;
-    position: relative;
-    height: 36px !important;
-    width: 36px !important;
-    min-width: 36px !important;
-    box-shadow: none !important;
-
-    :global(.euiButton__text) {
-      display: none;
-    }
-
-    svg {
-      width: 21px;
-      height: 21px;
-      color: var(--triggerIconActiveColor) !important;
-    }
-  }
-}
diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.styles.ts
similarity index 60%
rename from redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts
rename to redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.styles.ts
index 9de8a0a1b7..cb5d0ba7e3 100644
--- a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts
+++ b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.styles.ts
@@ -1,16 +1,16 @@
-import styled, { css } from "styled-components"
+import styled from 'styled-components'
 
-import { IconButton } from "uiSrc/components/base/forms/buttons"
-import { IconButtonProps } from "uiSrc/components/base/forms/buttons/IconButton"
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton'
 
 export const BulbWrapper = styled.div`
   position: relative;
 `
 
 export const BulbHighlighting = styled.span`
-  // TODO: Using the background color from the previous value until there is an appropriate color 
+  // TODO: Using the background color from the previous value until there is an appropriate color
   // from the pallete to use for both light and dark themes.
-  background-color: #ffaf2b;
+  background-color: ${({ theme }) => theme.semantic.color.text.attention600};
   position: absolute;
   left: 5px;
   top: 5px;
@@ -31,10 +31,8 @@ export const BulbIconButton = styled(IconButton)<
     height: 21px;
   }
 
-  ${({ isOpen }) =>
-    isOpen &&
-    css`
-      background-color: ${({ theme }) =>
-        theme.semantic.color.background.primary200} !important;
-    `}
+  ${({ isOpen, theme }) =>
+    isOpen
+      ? `background-color: ${theme.semantic.color.background.primary200} !important;`
+      : ''}
 `
diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx
index 2530803b04..bdcfac1bbd 100644
--- a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx
+++ b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx
@@ -29,7 +29,7 @@ import {
   BulbHighlighting,
   BulbIconButton,
   BulbWrapper,
-} from './insights-trigger.styles'
+} from './InsightsTrigger.styles'
 
 export interface Props {
   source?: string