diff --git a/scripts/video.ts b/scripts/video.ts
index a0e5bee4..735b6968 100644
--- a/scripts/video.ts
+++ b/scripts/video.ts
@@ -31,7 +31,7 @@ const main = async () => {
   await fs.promises.mkdir(dotLocal, { recursive: true });
   const dstFile = path.resolve(dotLocal, 'demo.webm');
   await fs.promises.copyFile(path.resolve(videosDir, srcFile), dstFile);
-  console.info('Video file copied to doc/demo.webm');
+  console.info('Video file copied to .local/demo.webm');
   await fs.promises.rmdir(videosDir, { recursive: true });
   if (ffmpeg) {
     const src = 'demo.webm';
diff --git a/src/waldiez/components/edges/view.tsx b/src/waldiez/components/edges/view.tsx
index 544c1c0d..c890c7b6 100644
--- a/src/waldiez/components/edges/view.tsx
+++ b/src/waldiez/components/edges/view.tsx
@@ -116,7 +116,7 @@ export const WaldieEdgeView = (props: WaldieEdgeViewProps) => {
               <div className="edge-actions">
                 <div
                   role="button"
-                  className="open-edge-modal"
+                  className="open-edge-modal clickable"
                   data-testid={`open-edge-modal-${id}`}
                   onClick={onOpenModal}
                 >
@@ -125,7 +125,7 @@ export const WaldieEdgeView = (props: WaldieEdgeViewProps) => {
                 <div
                   role="button"
                   onClick={onDelete}
-                  className="delete-edge"
+                  className="delete-edge clickable"
                   data-testid={`delete-edge-${id}`}
                 >
                   <FaTrashAlt />
diff --git a/src/waldiez/components/modal/view.tsx b/src/waldiez/components/modal/view.tsx
index e0dc0562..d2bc97a6 100644
--- a/src/waldiez/components/modal/view.tsx
+++ b/src/waldiez/components/modal/view.tsx
@@ -33,7 +33,7 @@ export const ModalView = (props: ModalViewProps) => {
           <div className="modal-header-actions">
             {hasMaximizeBtn && (
               <div
-                className="modal-fullscreen-btn"
+                className="modal-fullscreen-btn clickable"
                 role="button"
                 title={isFullScreen ? 'Minimize' : 'Maximize'}
                 onClick={onToggleFullScreen}
@@ -43,7 +43,7 @@ export const ModalView = (props: ModalViewProps) => {
             )}
             {hasCloseBtn && (
               <div
-                className="modal-close-btn"
+                className="modal-close-btn clickable"
                 role="button"
                 title="Close"
                 data-testid="modal-close-btn"
diff --git a/src/waldiez/components/nodes/agent/view/body/manager.tsx b/src/waldiez/components/nodes/agent/view/body/manager.tsx
index da63d652..d8599626 100644
--- a/src/waldiez/components/nodes/agent/view/body/manager.tsx
+++ b/src/waldiez/components/nodes/agent/view/body/manager.tsx
@@ -28,9 +28,15 @@ export const WaldieNodeAgentManagerBodyView = (props: WaldieNodeAgentManagerBody
           {groupMembers.map(member => (
             <div key={member.id} className="group-member-entry" data-testid={`group-member-${member.id}`}>
               <div className="group-member-name">{member.data.label}</div>
-              <FaGear role="button" onClick={onOpenMemberModal.bind(null, member)} title="Edit member" />
+              <FaGear
+                role="button"
+                className="clickable"
+                onClick={onOpenMemberModal.bind(null, member)}
+                title="Edit member"
+              />
               <FaMinusCircle
                 role="button"
+                className="clickable"
                 onClick={onRemoveMember.bind(null, member)}
                 data-testid={`group-member-${member.id}-remove`}
                 title="Remove member"
diff --git a/src/waldiez/components/nodes/agent/view/footer.tsx b/src/waldiez/components/nodes/agent/view/footer.tsx
index 9f8d0aed..cb29bf79 100644
--- a/src/waldiez/components/nodes/agent/view/footer.tsx
+++ b/src/waldiez/components/nodes/agent/view/footer.tsx
@@ -15,14 +15,14 @@ export const WaldieNodeAgentFooterView = (props: WaldieNodeAgentFooterViewProps)
           role="button"
           onClick={onDelete}
           title="Delete Agent"
-          className={'delete-agent no-margin no-padding'}
+          className={'delete-agent no-margin no-padding clickable'}
         />
         <div className="date-info">{renderDate(data.updatedAt)}</div>
         <FaCopy
           role="button"
           onClick={onClone}
           title="Clone Agent"
-          className={'clone-agent no-margin no-padding'}
+          className={'clone-agent no-margin no-padding clickable'}
         />
       </div>
     </div>
diff --git a/src/waldiez/components/nodes/agent/view/header.tsx b/src/waldiez/components/nodes/agent/view/header.tsx
index 44f7ad27..a5771654 100644
--- a/src/waldiez/components/nodes/agent/view/header.tsx
+++ b/src/waldiez/components/nodes/agent/view/header.tsx
@@ -16,7 +16,7 @@ export const WaldieNodeAgentHeaderView = (props: WaldieNodeAgentHeaderViewProps)
   return (
     <div className="agent-header">
       <div className="agent-header-left">
-        <FaGear role="button" onClick={onOpenNodeModal} />
+        <FaGear role="button" className="clickable" onClick={onOpenNodeModal} />
         {data.agentType === 'rag_user' && <FaDatabase color={AGENT_COLORS.rag_user} />}
         <div className="agent-label" data-testid={`agent-header-label-${id}`}>
           {data.label}
diff --git a/src/waldiez/components/nodes/model/view.tsx b/src/waldiez/components/nodes/model/view.tsx
index f55e6bc5..fd864fd1 100644
--- a/src/waldiez/components/nodes/model/view.tsx
+++ b/src/waldiez/components/nodes/model/view.tsx
@@ -33,6 +33,7 @@ export const WaldieNodeModelView = (props: WaldieNodeModelViewProps) => {
       <div className="model-header">
         <div
           role="button"
+          className="clickable"
           id={`open-node-modal-${modelId}`}
           data-testid={`open-node-modal-${modelId}`}
           onClick={onOpen}
@@ -53,6 +54,7 @@ export const WaldieNodeModelView = (props: WaldieNodeModelViewProps) => {
       <div className="model-footer" data-testid={`model-footer-${modelId}`}>
         <div
           role="button"
+          className="clickable"
           id={`delete-node-${modelId}`}
           data-testid={`delete-node-${modelId}`}
           onClick={onDelete}
@@ -61,6 +63,7 @@ export const WaldieNodeModelView = (props: WaldieNodeModelViewProps) => {
         </div>
         <div
           role="button"
+          className="clickable"
           id={`clone-node-${modelId}`}
           data-testid={`clone-node-${modelId}`}
           onClick={onClone}
diff --git a/src/waldiez/components/nodes/skill/view.tsx b/src/waldiez/components/nodes/skill/view.tsx
index cd6b29fa..0e8b1929 100644
--- a/src/waldiez/components/nodes/skill/view.tsx
+++ b/src/waldiez/components/nodes/skill/view.tsx
@@ -31,6 +31,7 @@ export const WaldieNodeSkillView = (props: WaldieNodeSkillViewProps) => {
       <div className="skill-header">
         <div
           role="button"
+          className="clickable"
           id={`open-node-modal-${skillId}`}
           data-testid={`open-node-modal-${skillId}`}
           onClick={onOpen}
@@ -50,6 +51,7 @@ export const WaldieNodeSkillView = (props: WaldieNodeSkillViewProps) => {
       <div className="skill-footer" data-testid={`skill-footer-${skillId}`}>
         <div
           role="button"
+          className="clickable"
           id={`delete-node-${skillId}`}
           data-testid={`delete-node-${skillId}`}
           onClick={onDelete}
@@ -58,6 +60,7 @@ export const WaldieNodeSkillView = (props: WaldieNodeSkillViewProps) => {
         </div>
         <div
           role="button"
+          className="clickable"
           id={`clone-node-${skillId}`}
           data-testid={`clone-node-${skillId}`}
           onClick={onClone}
diff --git a/src/waldiez/components/sidebar/view.tsx b/src/waldiez/components/sidebar/view.tsx
index c0223e4d..34f78fef 100644
--- a/src/waldiez/components/sidebar/view.tsx
+++ b/src/waldiez/components/sidebar/view.tsx
@@ -41,22 +41,40 @@ export const SideBarView = (props: SideBarViewProps) => {
         <ul>
           <li
             role="button"
-            className="editor-nav-action"
+            className="editor-nav-action clickable"
             data-testid="edit-flow"
             onClick={onEdit}
             title="Edit flow"
           >
             <FaEdit /> Edit flow
           </li>
-          <li role="button" data-node-type="agent" data-testid="show-agents" onClick={onShowAgents}>
+          <li
+            role="button"
+            className="clickable"
+            data-node-type="agent"
+            data-testid="show-agents"
+            onClick={onShowAgents}
+          >
             <FaRobot />
             Agents
           </li>
-          <li role="button" data-node-type="model" data-testid="show-models" onClick={onShowModels}>
+          <li
+            role="button"
+            className="clickable"
+            data-node-type="model"
+            data-testid="show-models"
+            onClick={onShowModels}
+          >
             <AiFillOpenAI />
             Models
           </li>
-          <li role="button" data-node-type="skill" data-testid="show-skills" onClick={onShowSkills}>
+          <li
+            role="button"
+            className="clickable"
+            data-node-type="skill"
+            data-testid="show-skills"
+            onClick={onShowSkills}
+          >
             <AiFillCode />
             Skills
           </li>
@@ -98,10 +116,22 @@ export const SideBarView = (props: SideBarViewProps) => {
               Import
             </label>
           </li>
-          <li role="button" onClick={onExport} title="Export flow" data-testid={`export-flow-${flowId}`}>
+          <li
+            role="button"
+            className="clickable"
+            onClick={onExport}
+            title="Export flow"
+            data-testid={`export-flow-${flowId}`}
+          >
             <FaFileExport /> Export
           </li>
-          <li role="button" data-testid="theme-toggle" onClick={onThemeToggle} title="Toggle theme">
+          <li
+            role="button"
+            className="clickable"
+            data-testid="theme-toggle"
+            onClick={onThemeToggle}
+            title="Toggle theme"
+          >
             {darkMode ? <FaSun /> : <FaMoon />}
             <div className="clickable">{darkMode ? 'Light' : 'Dark'} mode</div>
           </li>
diff --git a/src/waldiez/styles/base.css b/src/waldiez/styles/base.css
index 9d07e7ee..419a1eab 100644
--- a/src/waldiez/styles/base.css
+++ b/src/waldiez/styles/base.css
@@ -1,7 +1,7 @@
 :root {
-  --user-agent-color: #d86ecc;
-  --assistant-agent-color: #60af43;
-  --group-manager-color: #e97132;
+  --user-agent-color: #bc76f5;
+  --assistant-agent-color: #66bc57;
+  --group-manager-color: #ed8a34;
   --rag-user-color: #e34561;
   --app-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
   --app-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
@@ -27,10 +27,6 @@
   cursor: pointer;
 }
 
-.flow-wrapper *[role='button'] {
-  cursor: pointer;
-}
-
 .flow-wrapper input,
 textarea {
   border-radius: 5px;
diff --git a/src/waldiez/theme.ts b/src/waldiez/theme.ts
index 72a0cb22..c522a171 100644
--- a/src/waldiez/theme.ts
+++ b/src/waldiez/theme.ts
@@ -26,9 +26,9 @@ export const LOGOS = {
 };
 export const AGENT_COLORS = {
   agent: '#005490',
-  assistant: '#8ed973',
-  user: '#d86ecc',
-  manager: '#e97132',
+  assistant: '#66bc57',
+  user: '#bc76f5',
+  manager: '#ed8a34',
   rag_user: '#e34561'
 };
 export const AGENT_ICONS = {
diff --git a/tests/browser/__snapshots__/waldie.test.tsx.snap b/tests/browser/__snapshots__/waldie.test.tsx.snap
index 71c29d5d..8278ab7d 100644
--- a/tests/browser/__snapshots__/waldie.test.tsx.snap
+++ b/tests/browser/__snapshots__/waldie.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`All > should render Waldiez components 1`] = `
             >
               <ul>
                 <li
-                  class="editor-nav-action"
+                  class="editor-nav-action clickable"
                   data-testid="edit-flow"
                   role="button"
                   title="Edit flow"
@@ -65,6 +65,7 @@ exports[`All > should render Waldiez components 1`] = `
                    Edit flow
                 </li>
                 <li
+                  class="clickable"
                   data-node-type="agent"
                   data-testid="show-agents"
                   role="button"
@@ -85,6 +86,7 @@ exports[`All > should render Waldiez components 1`] = `
                   Agents
                 </li>
                 <li
+                  class="clickable"
                   data-node-type="model"
                   data-testid="show-models"
                   role="button"
@@ -107,6 +109,7 @@ exports[`All > should render Waldiez components 1`] = `
                   Models
                 </li>
                 <li
+                  class="clickable"
                   data-node-type="skill"
                   data-testid="show-skills"
                   role="button"
@@ -202,6 +205,7 @@ exports[`All > should render Waldiez components 1`] = `
                   </label>
                 </li>
                 <li
+                  class="clickable"
                   data-testid="export-flow-test-flow"
                   role="button"
                   title="Export flow"
@@ -222,6 +226,7 @@ exports[`All > should render Waldiez components 1`] = `
                    Export
                 </li>
                 <li
+                  class="clickable"
                   data-testid="theme-toggle"
                   role="button"
                   title="Toggle theme"
@@ -529,7 +534,7 @@ exports[`All > should render Waldiez components 1`] = `
           >
             <ul>
               <li
-                class="editor-nav-action"
+                class="editor-nav-action clickable"
                 data-testid="edit-flow"
                 role="button"
                 title="Edit flow"
@@ -550,6 +555,7 @@ exports[`All > should render Waldiez components 1`] = `
                  Edit flow
               </li>
               <li
+                class="clickable"
                 data-node-type="agent"
                 data-testid="show-agents"
                 role="button"
@@ -570,6 +576,7 @@ exports[`All > should render Waldiez components 1`] = `
                 Agents
               </li>
               <li
+                class="clickable"
                 data-node-type="model"
                 data-testid="show-models"
                 role="button"
@@ -592,6 +599,7 @@ exports[`All > should render Waldiez components 1`] = `
                 Models
               </li>
               <li
+                class="clickable"
                 data-node-type="skill"
                 data-testid="show-skills"
                 role="button"
@@ -687,6 +695,7 @@ exports[`All > should render Waldiez components 1`] = `
                 </label>
               </li>
               <li
+                class="clickable"
                 data-testid="export-flow-test-flow"
                 role="button"
                 title="Export flow"
@@ -707,6 +716,7 @@ exports[`All > should render Waldiez components 1`] = `
                  Export
               </li>
               <li
+                class="clickable"
                 data-testid="theme-toggle"
                 role="button"
                 title="Toggle theme"