diff --git a/jam-ui/src/components/client/JKSessionChatButton.js b/jam-ui/src/components/client/JKSessionChatButton.js
index adbcf01ec..dc786de58 100644
--- a/jam-ui/src/components/client/JKSessionChatButton.js
+++ b/jam-ui/src/components/client/JKSessionChatButton.js
@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Button } from 'reactstrap';
 import {
   openChatWindow,
   setActiveChannel,
@@ -38,29 +39,30 @@ const JKSessionChatButton = ({ sessionId }) => {
 
   return (
     <div style={{ position: 'relative', display: 'inline-block' }}>
-      <img
-        src={chatIcon}
-        alt="Chat"
+      <Button
+        className='btn-custom-outline'
+        outline
+        size="md"
         onClick={handleClick}
-        role="button"
-        tabIndex={0}
         aria-label={`Open chat${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`}
         aria-pressed={isWindowOpen}
-        style={{
-          cursor: 'pointer',
-          width: '24px',
-          height: '24px',
-          opacity: isWindowOpen ? 0.6 : 1
-        }}
         title="Open session chat"
-      />
+        style={{ opacity: isWindowOpen ? 0.6 : 1 }}
+      >
+        <img
+          src={chatIcon}
+          alt="Chat"
+          style={{ width: '16px', height: '16px', marginRight: '0.2rem' }}
+        />
+        Chat
+      </Button>
       {unreadCount > 0 && (
         <div
           style={{
             position: 'absolute',
-            top: '-6px',
-            right: '-6px',
-            backgroundColor: '#dc3545', // Bootstrap danger red
+            top: '-8px',
+            right: '-8px',
+            backgroundColor: '#dc3545',
             color: 'white',
             borderRadius: '10px',
             padding: '2px 6px',
@@ -69,7 +71,8 @@ const JKSessionChatButton = ({ sessionId }) => {
             lineHeight: '1',
             minWidth: '18px',
             textAlign: 'center',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.3)'
+            boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+            zIndex: 1
           }}
         >
           {getBadgeText()}