diff --git a/library/src/components/CollapseButton.tsx b/library/src/components/CollapseButton.tsx
index bea5a7a00..19e76b135 100644
--- a/library/src/components/CollapseButton.tsx
+++ b/library/src/components/CollapseButton.tsx
@@ -33,7 +33,7 @@ export const CollapseButton: React.FunctionComponent<Props> = ({
 }) => (
   <button
     {...rest}
-    className={`focus:outline-none ${rest.className}`}
+    className={`focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2${rest.className}`}
     type="button"
   >
     <div className="inline-block">{children}</div>
diff --git a/library/src/containers/Messages/MessageExample.tsx b/library/src/containers/Messages/MessageExample.tsx
index d2fcb7c63..3c2ee5025 100644
--- a/library/src/containers/Messages/MessageExample.tsx
+++ b/library/src/containers/Messages/MessageExample.tsx
@@ -70,7 +70,7 @@ export const Example: React.FunctionComponent<ExampleProps> = ({
             className: 'fill-current text-gray-200',
           }}
         >
-          <span className="inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-none">
+          <span className="inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2">
             {type}
           </span>
         </CollapseButton>
diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
index 26dc958d7..b96d4972d 100644
--- a/library/src/containers/Operations/Operation.tsx
+++ b/library/src/containers/Operations/Operation.tsx
@@ -300,7 +300,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                       onClick={() => setShowChannel((prev) => !prev)}
                       expanded={showChannel}
                     >
-                      <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-none">
+                      <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2">
                         View channel details
                       </span>
                     </CollapseButton>
@@ -324,7 +324,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                   onClick={() => setShowMessages((prev) => !prev)}
                   expanded={showMessages}
                 >
-                  <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-none">
+                  <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2">
                     Expected Reply{' '}
                     {replyMessages.length > 1 ? 'Messages' : 'Message'}
                   </span>