diff --git a/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json b/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json
index a7cc252c1a6..6541753d86b 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/remixUiTabs.json
@@ -1,12 +1,13 @@
 {
   "remixUiTabs.tooltipText1": "Run script (CTRL + SHIFT + S)",
   "remixUiTabs.tooltipText2": "Compile CTRL + S",
-  "remixUiTabs.tooltipText3": "Select .sol or .yul file to compile or a .ts or .js file and run it",
-  "remixUiTabs.tooltipText4": "Select .sol file to use AI tools [BETA]",
+  "remixUiTabs.tooltipText3": "Select .sol or .yul file to compile OR a .ts or .js file to run",
+  "remixUiTabs.tooltipText4": "To explain a contract, choose a .sol file",
   "remixUiTabs.tooltipText5": "Explain the contract(s) in current file [BETA]",
   "remixUiTabs.tooltipText6": "Enable Remix AI Copilot [BETA]",
   "remixUiTabs.tooltipText7": "Disable Remix AI Copilot [BETA]",
-  "remixUiTabs.tooltipText8": "Remix AI Tools Documentation [BETA]",
+  "remixUiTabs.tooltipText8": "Remix AI Tools Documentation",
+  "remixUiTabs.tooltipTextDisabledCopilot": "To use Remix AI Copilot, choose a .sol file",
   "remixUiTabs.zoomOut": "Zoom out",
   "remixUiTabs.zoomIn": "Zoom in"
 }
diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
index a4afd0b1527..9bc6e94b476 100644
--- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
+++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
@@ -1,5 +1,7 @@
 import { ViewPlugin } from '@remixproject/engine-web'
 import React, {useState, useRef, useReducer, useEffect, useCallback} from 'react' // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'
+const _paq = (window._paq = window._paq || [])
 
 import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
 import { labels, textDark, textSecondary } from './constants'
@@ -450,9 +452,23 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const copilotSettings = () => (
     <div className="border-top">
       <div className="card-body pt-3 pb-2">
-        <h6 className="card-title">
+        <h6 className="card-title d-inline">
           <FormattedMessage id="settings.copilot" />
         </h6>
+        <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-aiDocumentation" tooltipText={<FormattedMessage id="remixUiTabs.tooltipText8" />}>
+          <span
+            data-id="remix_ai_docs"
+            id="remix_ai_docs"
+            className="btn pl-2 pr-0 py-0 d-inline ai-docs"
+            role='link'
+            onClick={()=>{
+              window.open("https://remix-ide.readthedocs.io/en/latest/ai.html")
+              _paq.push(['trackEvent', 'ai', 'solcoder', 'documentation'])
+            }}
+          >
+            <i aria-hidden="true" className="fas fa-book"></i>
+          </span>
+        </CustomTooltip>
 
         <div className="pt-2 mb-0">
           <div className="text-secondary mb-0 h6">
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index 1a7d1d32da4..561d49f2de9 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -185,7 +185,7 @@ export const TabsUI = (props: TabsUIProps) => {
           >
             <button
               data-id="play-editor"
-              className="btn text-success py-0"
+              className="btn text-success pr-0 py-0 d-flex"
               disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol' || tabsState.currentExt === 'circom' || tabsState.currentExt === 'vy')}
               onClick={async () => {
                 const path = active().substr(active().indexOf('/') + 1, active().length)
@@ -205,111 +205,81 @@ export const TabsUI = (props: TabsUIProps) => {
                 }
               }}
             >
-              <i className="fad fa-play"></i>
+              <i className="fas fa-play"></i>
             </button>
           </CustomTooltip>
-          <CustomTooltip
-            placement="bottom"
-            tooltipId="overlay-tooltip-explaination"
-            tooltipText={
-              <span>
-                {tabsState.currentExt === 'sol'? (
-                  <FormattedMessage id="remixUiTabs.tooltipText5" />
-                ) : (
-                  <FormattedMessage id="remixUiTabs.tooltipText4" />
-                )}
-              </span>
-            }
-          >
-            <button
-              data-id="explain-editor"
-              id='explain_btn'
-              className='btn py-0 text-ai px-0 d-flex'
-              disabled={!(tabsState.currentExt === 'sol') || explaining}
-              onClick={async () => {
-                const path = active().substr(active().indexOf('/') + 1, active().length)
-                const content = await props.plugin.call('fileManager', 'readFile', path)
-                if (tabsState.currentExt === 'sol') {
-                  setExplaining(true)
-                  await props.plugin.call('solcoder', 'code_explaining', content)
-                  setExplaining(false)
-                  _paq.push(['trackEvent', 'ai', 'solcoder', 'explain_file'])
-                }
-              }}
-            >
-              <i className={`fa-solid fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
-              <span
-                className="position-relative text-ai text-sm pl-1"
-                style={{ fontSize: "x-small", alignSelf: "end" }}
-              >
-                AI
-              </span>
-            </button>
-          </CustomTooltip>
-          <CustomTooltip
-            placement="bottom"
-            tooltipId="overlay-tooltip-copilot"
-            tooltipText={
-              <span>
-                { tabsState.currentExt === 'sol'? (
-                  !ai_switch ? (
-                    <FormattedMessage id="remixUiTabs.tooltipText6" />
-                  ) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
-                ) : (
-                  <FormattedMessage id="remixUiTabs.tooltipText4" />
-                )}
-              </span>
-            }
-          >
-            <button
-              data-id="remix_ai_switch"
-              id='remix_ai_switch'
-              className="btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
-              disabled={!(tabsState.currentExt === 'sol' )}
-              onClick={async () => {
-                await props.plugin.call('settings', 'updateCopilotChoice', !ai_switch)
-                setAI_switch(!ai_switch)
-                ai_switch ? _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_disabled'])
-              }}
+          <div className= "d-flex border-left ml-2 align-items-center" style={{ height: "3em" }}>
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-explaination"
+              tooltipText={
+                <span>
+                  {tabsState.currentExt === 'sol'? (
+                    <FormattedMessage id="remixUiTabs.tooltipText5" />
+                  ) : (
+                    <FormattedMessage id="remixUiTabs.tooltipText4" />
+                  )}
+                </span>
+              }
             >
-              <i
-                className={ai_switch ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off"}
-              ></i>
-              <span
-                className="position-relative text-ai text-sm pl-1"
-                style={{ fontSize: "x-small", alignSelf: "end" }}
+              <button
+                data-id="explain-editor"
+                id='explain_btn'
+                className='btn text-ai pl-2 pr-0 py-0 d-flex'
+                disabled={!(tabsState.currentExt === 'sol') || explaining}
+                onClick={async () => {
+                  const path = active().substr(active().indexOf('/') + 1, active().length)
+                  const content = await props.plugin.call('fileManager', 'readFile', path)
+                  if (tabsState.currentExt === 'sol') {
+                    setExplaining(true)
+                    await props.plugin.call('solcoder', 'code_explaining', content)
+                    setExplaining(false)
+                    _paq.push(['trackEvent', 'ai', 'solcoder', 'explain_file'])
+                  }
+                }}
               >
-                AI
-              </span>
-            </button>
-          </CustomTooltip>
-          <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-aiDocumentation" tooltipText={<FormattedMessage id="remixUiTabs.tooltipText8" />}>
-            <span
-              data-id="remix_ai_docs"
-              id="remix_ai_docs"
-              className="btn pl-2 pr-0 py-0 d-flex ai-docs"
-              role='link'
-              onClick={()=>{
-                window.open("https://remix-ide.readthedocs.io/en/latest/ai.html")
-                _paq.push(['trackEvent', 'ai', 'solcoder', 'documentation'])
-              }}
+                <i className={`fas fa-user-robot ${explaining ? 'loadingExplanation' : ''}`}></i>
+              </button>
+            </CustomTooltip>
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-copilot"
+              tooltipText={
+                <span>
+                  { tabsState.currentExt === 'sol'? (
+                    !ai_switch ? (
+                      <FormattedMessage id="remixUiTabs.tooltipText6" />
+                    ) : (<FormattedMessage id="remixUiTabs.tooltipText7" />)
+                  ) : (
+                    <FormattedMessage id="remixUiTabs.tooltipTextDisabledCopilot" />
+                  )}
+                </span>
+              }
             >
-              <i className="fa-solid fa-book text-ai"></i>
-              <span
-                className="position-relative text-ai text-sm pl-1"
-                style={{ fontSize: "x-small", alignSelf: "end" }}
+              <button
+                data-id="remix_ai_switch"
+                id='remix_ai_switch'
+                className="btn ai-switch text-ai pl-2 pr-0 py-0 d-flex"
+                disabled={!(tabsState.currentExt === 'sol' )}
+                onClick={async () => {
+                  await props.plugin.call('settings', 'updateCopilotChoice', !ai_switch)
+                  setAI_switch(!ai_switch)
+                  ai_switch ? _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_enabled']) : _paq.push(['trackEvent', 'ai', 'solcoder', 'copilot_disabled'])
+                }}
               >
-                AI
-              </span>
-            </span>
-          </CustomTooltip>
+                <i className={ai_switch ? "fas fa-toggle-on fa-lg" : "fas fa-toggle-off fa-lg"}></i>
+              </button>
+            </CustomTooltip>
+          </div>
 
-          <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-zoom-out" tooltipText={<FormattedMessage id="remixUiTabs.zoomOut" />}>
-            <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
-          </CustomTooltip>
-          <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-run-zoom-in" tooltipText={<FormattedMessage id="remixUiTabs.zoomIn" />}>
-            <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
-          </CustomTooltip>
+          <div className= "d-flex border-left ml-2 align-items-center" style={{ height: "3em" }}>
+            <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-zoom-out" tooltipText={<FormattedMessage id="remixUiTabs.zoomOut" />}>
+              <span data-id="tabProxyZoomOut" className="btn fas fa-search-minus text-dark pl-2 pr-0 py-0 d-flex" onClick={() => props.onZoomOut()}></span>
+            </CustomTooltip>
+            <CustomTooltip placement="bottom" tooltipId="overlay-tooltip-run-zoom-in" tooltipText={<FormattedMessage id="remixUiTabs.zoomIn" />}>
+              <span data-id="tabProxyZoomIn" className="btn fas fa-search-plus text-dark pl-2 pr-0 py-0 d-flex" onClick={() => props.onZoomIn()}></span>
+            </CustomTooltip>
+          </div>
         </div>
         <Tabs
           className="tab-scroll"