diff --git a/src/main/frontend/app/app.css b/src/main/frontend/app/app.css
index 39c7b627..3f141b35 100644
--- a/src/main/frontend/app/app.css
+++ b/src/main/frontend/app/app.css
@@ -182,7 +182,8 @@ body {
 }
 
 .monaco-editor .hunk-glyph-unchecked,
-.monaco-editor .hunk-glyph-checked {
+.monaco-editor .hunk-glyph-checked,
+.monaco-editor .hunk-glyph-hit-area {
   cursor: pointer !important;
   display: flex !important;
   align-items: center;
@@ -195,27 +196,25 @@ body {
   display: block;
   width: 14px;
   height: 14px;
-  border-radius: 3px;
-  margin-left: 6px;
-  margin-top: 2px;
-  border: 1.5px solid #6b7280;
-  background: transparent;
-  box-sizing: border-box;
+  margin-left: 5px;
+  background-size: 14px 14px;
+  background-repeat: no-repeat;
 }
 
-.monaco-editor .hunk-glyph-checked::after {
-  border-color: #22c55e;
-  background: #22c55e;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.5L5.5 9.5L10.5 4.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-size: 14px 14px;
+.monaco-editor .hunk-glyph-unchecked::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='%239ca3af' stroke-width='1.5'/%3E%3C/svg%3E");
 }
 
 .monaco-editor .hunk-glyph-unchecked:hover::after {
-  border-color: #22c55e;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='%23fdc300' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+.monaco-editor .hunk-glyph-checked::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='%23fdc300' stroke='%23fdc300' stroke-width='1.5'/%3E%3Cpath d='M4.5 8L7 10.5L11.5 5.5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
 .monaco-editor .hunk-line-selected {
-  background: rgba(34, 197, 94, 0.08) !important;
+  background: color-mix(in srgb, var(--color-brand) 10%, transparent) !important;
 }
 
 .monaco-flow-attribute {
@@ -233,6 +232,38 @@ body {
   color: #808080 !important;
 }
 
+.react-flow__panel.react-flow__controls {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  fill: var(--color-foreground);
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button:hover {
+  background-color: var(--color-hover);
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button svg {
+  fill: var(--color-foreground);
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.react-flow__attribution {
+  background: transparent !important;
+}
+
 :root {
   /* Allotment Styling */
   --focus-border: var(--color-brand);
@@ -251,3 +282,26 @@ body {
   line-height: 1.4;
   white-space: nowrap;
 }
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-foreground-muted);
+}
diff --git a/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx
index dbf8bbe8..bf1bc07b 100644
--- a/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx
+++ b/src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx
@@ -16,7 +16,7 @@ export default function GenerateButton({
 
   return (
     <Button
-      className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900 transition hover:brightness-110"
+      className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900"
       onClick={async () => {
         highlightUnset()
         if (!project) {
diff --git a/src/main/frontend/app/components/datamapper/basic-components/import-button.tsx b/src/main/frontend/app/components/datamapper/basic-components/import-button.tsx
index 5ead40c9..a514931d 100644
--- a/src/main/frontend/app/components/datamapper/basic-components/import-button.tsx
+++ b/src/main/frontend/app/components/datamapper/basic-components/import-button.tsx
@@ -19,7 +19,7 @@ function ImportButton({ fileType, importFunc, file, setFile }: ImportButtonPrope
       <label
         htmlFor={inputId}
         className={clsx(
-          'w-full cursor-pointer rounded-lg border px-3 py-3 text-center text-sm font-medium transition-colors',
+          'w-full cursor-pointer rounded-lg border px-3 py-3 text-center text-sm font-medium',
           file && 'border-green-600 bg-green-600 text-white hover:bg-green-500',
           !file && 'border-border bg-backdrop text-foreground hover:bg-hover active:bg-selected',
         )}
diff --git a/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx b/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx
index 7fd4c754..94612f64 100644
--- a/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx
+++ b/src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx
@@ -228,7 +228,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
       {/* Target → Output */}
       <div className="mb-4 grid shrink-0 grid-cols-[1fr_auto_1fr] items-end gap-4">
         <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-sm font-semibold">Output</label>
+          <label className="text-foreground-muted text-sm font-semibold">Output</label>
           <Dropdown
             className="max-w-50"
             value={output}
@@ -242,7 +242,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
         <div className="flex items-center justify-center pb-2 text-2xl">→</div>
 
         <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-sm font-semibold">Target</label>
+          <label className="text-foreground-muted text-sm font-semibold">Target</label>
 
           <Dropdown
             className="max-w-50"
diff --git a/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx
index a1cb5fd1..e4a4cf05 100644
--- a/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx
+++ b/src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx
@@ -64,7 +64,7 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }:
                 height: 10,
                 top: '20px',
               }} //Can't set this with tailwind for some reason
-              className={`${variant == 'source' ? '' : 'translate-x-1.25'} relative transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
+              className={`${variant == 'source' ? '' : 'translate-x-1.25'} relative ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
             />
             <Handle
               key={variant === 'source' ? 'target' : 'source'}
diff --git a/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx b/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx
index 6a09b2c4..3f18f896 100644
--- a/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx
+++ b/src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx
@@ -99,7 +99,7 @@ function OneEdgeNode({ id, data, variant = 'source', onEdit, onDelete, onHighlig
           width: 10,
           height: 10,
         }} //Can't set this with tailwind for some reason
-        className={`${variant == 'target' ? 'translate-x-1.25' : '-translate-x-2.5'} transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
+        className={`${variant == 'target' ? 'translate-x-1.25' : '-translate-x-2.5'} ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
       />
 
       {/* Hidden opposite handle */}
diff --git a/src/main/frontend/app/components/directory-picker/directory-picker.tsx b/src/main/frontend/app/components/directory-picker/directory-picker.tsx
index e67ad15b..9f0fea3b 100644
--- a/src/main/frontend/app/components/directory-picker/directory-picker.tsx
+++ b/src/main/frontend/app/components/directory-picker/directory-picker.tsx
@@ -6,6 +6,7 @@ import type { FilesystemEntry } from '~/types/filesystem.types'
 import { ApiError } from '~/utils/api'
 import { useDirectoryWatcher } from '~/hooks/use-file-watcher'
 import Button from '../inputs/button'
+import CloseButton from '../inputs/close-button'
 
 interface DirectoryPickerProperties {
   isOpen: boolean
@@ -92,12 +93,7 @@ export default function DirectoryPicker({
       <div className="bg-background border-border flex h-[450px] w-1/3 min-w-[500px] flex-col rounded-lg border shadow-lg">
         <div className="border-border flex items-center justify-between border-b px-4 py-3">
           <h3 className="text-sm font-semibold">Select Directory</h3>
-          <Button
-            onClick={onCancel}
-            className="text-foreground-muted hover:text-foreground cursor-pointer text-lg leading-none"
-          >
-            &times;
-          </Button>
+          <CloseButton onClick={onCancel} />
         </div>
 
         <div className="border-border flex items-center gap-2 border-b px-4 py-2">
diff --git a/src/main/frontend/app/components/file-structure/confirm-delete-dialog.tsx b/src/main/frontend/app/components/file-structure/confirm-delete-dialog.tsx
index d68d1aba..bcd2e6e4 100644
--- a/src/main/frontend/app/components/file-structure/confirm-delete-dialog.tsx
+++ b/src/main/frontend/app/components/file-structure/confirm-delete-dialog.tsx
@@ -38,7 +38,7 @@ export default function ConfirmDeleteDialog({ name, isFolder, onConfirm, onCance
           <Button onClick={onCancel} className="px-3 py-1 text-sm">
             Cancel
           </Button>
-          <Button onClick={onConfirm} className="bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700">
+          <Button variant="destructive" onClick={onConfirm} className="px-3 py-1 text-sm">
             Delete
           </Button>
         </div>
diff --git a/src/main/frontend/app/components/file-structure/editor-file-structure.tsx b/src/main/frontend/app/components/file-structure/editor-file-structure.tsx
index 68ea702d..ef30d1d8 100644
--- a/src/main/frontend/app/components/file-structure/editor-file-structure.tsx
+++ b/src/main/frontend/app/components/file-structure/editor-file-structure.tsx
@@ -15,6 +15,7 @@ import { useShortcut } from '~/hooks/use-shortcut'
 import { useFileWatcher } from '~/hooks/use-file-watcher'
 import { getAncestorIds, isVisibleInTree, selectAndReveal, toTreeItemId } from './tree-utilities'
 import type { ContextMenuState } from './use-file-tree-context-menu'
+import IconButton from '~/components/inputs/icon-button'
 
 import {
   Tree,
@@ -31,6 +32,7 @@ import { useTreeStore } from '~/stores/tree-store'
 import EditorFilesDataProvider, { type FileNode } from './editor-data-provider'
 import { useFileTreeContextMenu } from './use-file-tree-context-menu'
 import FileTreeDialogs from './file-tree-dialogs'
+import TreeActionButton from '../inputs/tree-action-button'
 
 const TREE_ID = 'editor-files-tree'
 
@@ -319,19 +321,19 @@ export default function EditorFileStructure() {
   const renderItemArrow = ({ item, context }: { item: TreeItem; context: TreeItemRenderContext }) => {
     if (!item.isFolder) return null
 
-    const Icon = context.isExpanded ? AltArrowDownIcon : AltArrowRightIcon
-
-    const handleClick = (event: React.MouseEvent) => {
-      event.stopPropagation()
-      context.toggleExpandedState()
-    }
+    const ArrowIcon = context.isExpanded ? AltArrowDownIcon : AltArrowRightIcon
 
     return (
-      <Icon
-        onClick={handleClick}
+      <div
+        className="rct-tree-item-arrow-isFolder rct-tree-item-arrow"
+        onClick={(mouseEvent) => {
+          mouseEvent.stopPropagation()
+          context.toggleExpandedState()
+        }}
         onContextMenu={(mouseEvent) => editorContextMenu.openContextMenu(mouseEvent, item.index)}
-        className="rct-tree-item-arrow-isFolder rct-tree-item-arrow fill-foreground"
-      />
+      >
+        <ArrowIcon className="fill-foreground" />
+      </div>
     )
   }
 
@@ -344,7 +346,7 @@ export default function EditorFileStructure() {
     item: TreeItem
     context: TreeItemRenderContext
   }) => {
-    const Icon = item.isFolder ? (context.isExpanded ? FolderOpenIcon : FolderIcon) : CodeIcon
+    const ItemIcon = item.isFolder ? (context.isExpanded ? FolderOpenIcon : FolderIcon) : CodeIcon
     const isRoot = (item.data as { projectRoot?: boolean }).projectRoot ?? false
 
     const searchLower = searchTerm.toLowerCase()
@@ -353,16 +355,16 @@ export default function EditorFileStructure() {
     let highlightedTitle: JSX.Element | string = title
 
     if (searchTerm && titleLower.includes(searchLower)) {
-      const parts = title.split(new RegExp(`(${searchTerm})`, 'gi'))
+      const titleParts = title.split(new RegExp(`(${searchTerm})`, 'gi'))
       highlightedTitle = (
         <>
-          {parts.map((part, i) =>
+          {titleParts.map((part, partIndex) =>
             part.toLowerCase() === searchLower ? (
-              <mark key={i} className="text-foreground bg-foreground-active rounded-sm">
+              <mark key={partIndex} className="text-foreground bg-foreground-active rounded-sm">
                 {part}
               </mark>
             ) : (
-              <span key={i}>{part}</span>
+              <span key={partIndex}>{part}</span>
             ),
           )}
         </>
@@ -371,14 +373,12 @@ export default function EditorFileStructure() {
 
     const isHighlighted = highlightedItemId === item.index
 
-    const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
-
     return (
       <div
         className="group/row flex h-full w-full items-center"
-        onContextMenu={(e) => editorContextMenu.openContextMenu(e, item.index)}
+        onContextMenu={(mouseEvent) => editorContextMenu.openContextMenu(mouseEvent, item.index)}
       >
-        {Icon && <Icon className="fill-foreground w-4 flex-shrink-0" />}
+        {ItemIcon && <ItemIcon className="fill-foreground w-4 flex-shrink-0" />}
         <span
           className={`ml-1 min-w-0 flex-1 overflow-hidden text-nowrap text-ellipsis ${
             isHighlighted ? 'outline-foreground-active rounded-sm px-1 outline-2' : ''
@@ -388,72 +388,36 @@ export default function EditorFileStructure() {
         </span>
         <div className="ml-1 hidden items-center gap-0.5 group-hover/row:flex">
           {item.isFolder && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New File"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleNewFile)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleNewFile)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleNewFile)}
             >
-              <CodeFileIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+              <CodeFileIcon className="fill-foreground-muted group-hover:fill-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {item.isFolder && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Folder"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleNewFolder)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleNewFolder)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleNewFolder)}
             >
-              <FolderIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+              <FolderIcon className="fill-foreground-muted group-hover:fill-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Rename"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleRename)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleRename)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleRename)}
             >
-              <Pen className="stroke-foreground h-3.5 w-3.5" />
-            </div>
+              <Pen className="text-foreground-muted group-hover:text-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Delete"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleDelete)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleDelete)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleDelete)}
             >
-              <TrashBinIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+              <TrashBinIcon className="text-foreground-muted group-hover:text-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
         </div>
       </div>
@@ -462,35 +426,27 @@ export default function EditorFileStructure() {
 
   if (!dataProvider) return <LoadingSpinner message="Loading files..." className="p-8" />
 
-  const toolbarBtnClass = 'cursor-pointer rounded p-1 hover:bg-hover text-foreground'
-
   return (
     <>
       <div className="border-border flex items-center justify-between border-b px-2 py-1">
         <span className="text-foreground/50 text-xs font-semibold tracking-wider uppercase">Explorer</span>
         <div className="flex items-center gap-0.5">
-          <button
-            className={`${toolbarBtnClass} ${!activeTabFilePath || isActiveItemVisible ? 'cursor-not-allowed opacity-40' : ''}`}
+          <IconButton
             title="Open File Tree to Active Tab"
             disabled={!activeTabFilePath || isActiveItemVisible}
             onClick={() => void revealActiveFile()}
           >
-            <ListDown className="fill-foreground h-5 w-5" />
-          </button>
-          <button
-            className={toolbarBtnClass}
-            title="New File"
-            onClick={() => triggerExplorerAction(editorContextMenu.handleNewFile, false)}
-          >
-            <CodeFileIcon className="fill-foreground h-4 w-4" />
-          </button>
-          <button
-            className={toolbarBtnClass}
+            <ListDown className="fill-foreground-muted group-hover:fill-foreground h-5 w-5" />
+          </IconButton>
+          <IconButton title="New File" onClick={() => triggerExplorerAction(editorContextMenu.handleNewFile, false)}>
+            <CodeFileIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+          </IconButton>
+          <IconButton
             title="New Folder"
             onClick={() => triggerExplorerAction(editorContextMenu.handleNewFolder, false)}
           >
-            <FolderIcon className="fill-foreground h-4 w-4" />
-          </button>
+            <FolderIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+          </IconButton>
         </div>
       </div>
       <div className="mt-2">
@@ -498,8 +454,8 @@ export default function EditorFileStructure() {
       </div>
       <div
         className="h-full overflow-auto pr-2"
-        onContextMenu={(e) => {
-          void editorContextMenu.openContextMenu(e, 'root')
+        onContextMenu={(mouseEvent) => {
+          void editorContextMenu.openContextMenu(mouseEvent, 'root')
         }}
       >
         <UncontrolledTreeEnvironment
diff --git a/src/main/frontend/app/components/file-structure/inline-rename-input.tsx b/src/main/frontend/app/components/file-structure/inline-rename-input.tsx
index 3493140c..2b841b88 100644
--- a/src/main/frontend/app/components/file-structure/inline-rename-input.tsx
+++ b/src/main/frontend/app/components/file-structure/inline-rename-input.tsx
@@ -1,4 +1,5 @@
 import type { TreeItemIndex } from 'react-complex-tree'
+import Input from '~/components/inputs/input'
 
 interface InlineRenameInputProps {
   icon: React.ComponentType<{ className?: string }>
@@ -20,16 +21,17 @@ export default function InlineRenameInput({
   return (
     <div className="flex items-center" onContextMenu={(e) => e.preventDefault()}>
       <Icon className="fill-foreground w-4 flex-shrink-0" />
-      <input
+      <Input
         autoFocus
-        className="bg-background border-border text-foreground ml-1 rounded-sm border px-1 text-sm focus:outline-none"
+        wrapperClassName="ml-1"
+        inputClassName="py-0.5 text-sm"
         value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault()
+        onChange={(changeEvent) => onChange(changeEvent.target.value)}
+        onKeyDown={(keyboardEvent) => {
+          if (keyboardEvent.key === 'Enter') {
+            keyboardEvent.preventDefault()
             void onSubmit(itemIndex, value)
-          } else if (e.key === 'Escape') {
+          } else if (keyboardEvent.key === 'Escape') {
             onCancel()
           }
         }}
diff --git a/src/main/frontend/app/components/file-structure/studio-file-structure.tsx b/src/main/frontend/app/components/file-structure/studio-file-structure.tsx
index 332d3f7f..96d79565 100644
--- a/src/main/frontend/app/components/file-structure/studio-file-structure.tsx
+++ b/src/main/frontend/app/components/file-structure/studio-file-structure.tsx
@@ -1,4 +1,5 @@
 import React, { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import IconButton from '~/components/inputs/icon-button'
 import { getListenerIcon } from './tree-utilities'
 import useTabStore from '~/stores/tab-store'
 import Search from '~/components/search/search'
@@ -26,7 +27,7 @@ import {
   type TreeItemIndex,
   UncontrolledTreeEnvironment,
 } from 'react-complex-tree'
-import FilesDataProvider, {
+import StudioFilesDataProvider, {
   type StudioItemData,
   type StudioFolderData,
 } from '~/components/file-structure/studio-files-data-provider'
@@ -34,10 +35,11 @@ import { useProjectStore } from '~/stores/project-store'
 import { useTreeStore } from '~/stores/tree-store'
 import { useStudioContextMenu, detectItemType, getItemName, resolveItemPaths } from './use-studio-context-menu'
 import StudioFileTreeDialogs from './studio-file-tree-dialogs'
+import TreeActionButton from '../inputs/tree-action-button'
 
 const TREE_ID = 'studio-files-tree'
 
-function studioTabItemId(activeTab: string, dataProvider: FilesDataProvider): string | null {
+function studioTabItemId(activeTab: string, dataProvider: StudioFilesDataProvider): string | null {
   const firstSep = activeTab.indexOf('::')
   if (firstSep === -1) return null
   const configPath = activeTab.slice(0, firstSep)
@@ -74,7 +76,7 @@ export default function StudioFileStructure() {
 
   const tree = useRef<TreeRef>(null)
 
-  const [dataProvider, setDataProvider] = useState<FilesDataProvider | null>(null)
+  const [dataProvider, setDataProvider] = useState<StudioFilesDataProvider | null>(null)
   const [providerLoading, setProviderLoading] = useState(false)
   const [selectedItemId, setSelectedItemId] = useState<TreeItemIndex | null>(null)
   const setTabData = useTabStore((state) => state.setTabData)
@@ -185,7 +187,7 @@ export default function StudioFileStructure() {
     const initProvider = async () => {
       setProviderLoading(true)
 
-      const provider = new FilesDataProvider(project.name)
+      const provider = new StudioFilesDataProvider(project.name)
       await provider.init(expandedItemsRef.current)
 
       if (isMounted) {
@@ -345,19 +347,19 @@ export default function StudioFileStructure() {
   const renderItemArrow = ({ item, context }: { item: TreeItem<StudioItemData>; context: TreeItemRenderContext }) => {
     if (!item.isFolder) return null
 
-    const Icon = context.isExpanded ? AltArrowDownIcon : AltArrowRightIcon
-
-    const handleArrowClick = (event: React.MouseEvent) => {
-      event.stopPropagation()
-      context.toggleExpandedState()
-    }
+    const ArrowIcon = context.isExpanded ? AltArrowDownIcon : AltArrowRightIcon
 
     return (
-      <Icon
-        onClick={handleArrowClick}
-        onContextMenu={(mouseEvent: React.MouseEvent) => studioContextMenu.openContextMenu(mouseEvent, item.index)}
-        className="rct-tree-item-arrow-isFolder rct-tree-item-arrow fill-foreground"
-      />
+      <div
+        className="rct-tree-item-arrow-isFolder rct-tree-item-arrow"
+        onClick={(mouseEvent) => {
+          mouseEvent.stopPropagation()
+          context.toggleExpandedState()
+        }}
+        onContextMenu={(mouseEvent) => studioContextMenu.openContextMenu(mouseEvent, item.index)}
+      >
+        <ArrowIcon className="fill-foreground" />
+      </div>
     )
   }
 
@@ -375,21 +377,20 @@ export default function StudioFileStructure() {
         ? (item.data as { listenerName: string | null }).listenerName
         : null
 
-    const isObject = typeof item.data === 'object'
-
-    const pathEndsWithXmlExtension = (item.data as Partial<StudioFolderData>).path?.endsWith('.xml') ?? false
+    const isDataObject = typeof item.data === 'object'
+    const pathEndsWithXml = (item.data as Partial<StudioFolderData>).path?.endsWith('.xml') ?? false
 
     const isRoot = typeof item.data === 'string'
-    const isConfigFile = item.isFolder && isObject && item.data !== null && pathEndsWithXmlExtension
+    const isConfigFile = item.isFolder && isDataObject && item.data !== null && pathEndsWithXml
     const isPlainFolder = item.isFolder && !isConfigFile && !isRoot
 
-    let Icon
+    let ItemIcon
     if (isConfigFile) {
-      Icon = SettingsIcon
+      ItemIcon = SettingsIcon
     } else if (item.isFolder) {
-      Icon = context.isExpanded ? FolderOpenIcon : FolderIcon
+      ItemIcon = context.isExpanded ? FolderOpenIcon : FolderIcon
     } else {
-      Icon = getListenerIcon(listenerType)
+      ItemIcon = getListenerIcon(listenerType)
     }
 
     const searchLower = searchTerm.toLowerCase()
@@ -398,31 +399,30 @@ export default function StudioFileStructure() {
     let highlightedTitle: JSX.Element | string = title
 
     if (searchTerm && titleLower.includes(searchLower)) {
-      const parts = title.split(new RegExp(`(${searchTerm})`, 'gi'))
+      const titleParts = title.split(new RegExp(`(${searchTerm})`, 'gi'))
       highlightedTitle = (
         <>
-          {parts.map((part, index) =>
+          {titleParts.map((part, partIndex) =>
             part.toLowerCase() === searchLower ? (
-              <mark key={`mark-${index}`} className="text-foreground bg-foreground-active rounded-sm">
+              <mark key={`mark-${partIndex}`} className="text-foreground bg-foreground-active rounded-sm">
                 {part}
               </mark>
             ) : (
-              <span key={`span-${index}`}>{part}</span>
+              <span key={`span-${partIndex}`}>{part}</span>
             ),
           )}
         </>
       )
     }
 
-    const isHighlighted = highlightedItemId == item.index
-    const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
+    const isHighlighted = highlightedItemId === item.index
 
     return (
       <div
         className="group/row flex h-full w-full items-center"
         onContextMenu={(mouseEvent) => studioContextMenu.openContextMenu(mouseEvent, item.index)}
       >
-        <Icon className="fill-foreground w-4 flex-shrink-0" />
+        <ItemIcon className="fill-foreground w-4 flex-shrink-0" />
         <span
           className={`font-inter ml-1 min-w-0 flex-1 overflow-hidden text-nowrap text-ellipsis ${
             isHighlighted ? 'outline-foreground-active rounded-sm px-1 outline' : ''
@@ -432,129 +432,79 @@ export default function StudioFileStructure() {
         </span>
         <div className="ml-1 hidden items-center gap-0.5 group-hover/row:flex">
           {(isRoot || isPlainFolder) && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Configuration File"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)}
             >
-              <SettingsIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+              <SettingsIcon className="fill-foreground-muted group-hover:fill-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {(isRoot || isPlainFolder) && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Folder"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleNewFolder)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewFolder)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewFolder)}
             >
-              <FolderIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+              <FolderIcon className="fill-foreground-muted group-hover:fill-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {isConfigFile && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Adapter"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleNewAdapter)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewAdapter)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewAdapter)}
             >
-              <CodeIcon className="fill-foreground h-4 w-4" />
-            </div>
+              <CodeIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Rename"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleRename)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleRename)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleRename)}
             >
-              <Pen className="stroke-foreground h-3.5 w-3.5" />
-            </div>
+              <Pen className="text-foreground-muted group-hover:text-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Delete"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleDelete)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleDelete)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleDelete)}
             >
-              <TrashBinIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+              <TrashBinIcon className="text-foreground-muted group-hover:text-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
         </div>
       </div>
     )
   }
 
-  if (!project) return <p className="text-muted-foreground p-4 text-sm">No Project Selected</p>
+  if (!project) return <p className="text-foreground-muted p-4 text-sm">No Project Selected</p>
   if (providerLoading) return <LoadingSpinner message="Loading configurations..." className="p-8" />
   if (!dataProvider)
-    return <p className="text-muted-foreground p-4 text-sm">No configurations found in src/main/configurations</p>
-
-  const toolbarBtnClass = 'cursor-pointer rounded p-1 hover:bg-hover text-foreground'
+    return <p className="text-foreground-muted p-4 text-sm">No configurations found in src/main/configurations</p>
 
   return (
     <>
       <div className="border-border flex items-center justify-between border-b px-2 py-1">
         <span className="text-foreground/50 text-xs font-semibold tracking-wider uppercase">Explorer</span>
         <div className="flex items-center gap-0.5">
-          <button
-            className={`${toolbarBtnClass} ${!activeTab || isActiveItemVisible ? 'cursor-not-allowed opacity-40' : ''}`}
+          <IconButton
             title="Open File Tree to Active Tab"
             disabled={!activeTab || isActiveItemVisible}
             onClick={() => void revealActiveTab()}
           >
-            <ListDown className="fill-foreground h-5 w-5" />
-          </button>
-          <button
-            className={toolbarBtnClass}
+            <ListDown className="fill-foreground-muted group-hover:fill-foreground h-5 w-5" />
+          </IconButton>
+          <IconButton
             title="New Configuration File"
             onClick={() => triggerExplorerAction(studioContextMenu.handleNewConfiguration, false)}
           >
-            <SettingsIcon className="fill-foreground h-4 w-4" />
-          </button>
-          <button
-            className={toolbarBtnClass}
+            <SettingsIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+          </IconButton>
+          <IconButton
             title="New Folder"
             onClick={() => triggerExplorerAction(studioContextMenu.handleNewFolder, false)}
           >
-            <FolderIcon className="fill-foreground h-4 w-4" />
-          </button>
+            <FolderIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+          </IconButton>
         </div>
       </div>
       <div className="mt-2">
@@ -562,8 +512,8 @@ export default function StudioFileStructure() {
       </div>
       <div
         className="h-full overflow-auto pr-2"
-        onContextMenu={(e) => {
-          void studioContextMenu.openContextMenu(e, 'root')
+        onContextMenu={(mouseEvent) => {
+          void studioContextMenu.openContextMenu(mouseEvent, 'root')
         }}
       >
         <UncontrolledTreeEnvironment
diff --git a/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts b/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts
index f581e5a5..ada6acc4 100644
--- a/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts
+++ b/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts
@@ -21,7 +21,7 @@ function isFolderData(data: StudioItemData): data is StudioFolderData {
   return typeof data === 'object' && 'path' in data
 }
 
-export default class FilesDataProvider extends BaseFilesDataProvider<StudioItemData> {
+export default class StudioFilesDataProvider extends BaseFilesDataProvider<StudioItemData> {
   private readonly projectName: string
   private rootPath = ''
 
diff --git a/src/main/frontend/app/components/flow/add-subcomponent-modal.tsx b/src/main/frontend/app/components/flow/add-subcomponent-modal.tsx
index 4d10574a..5c96b1ed 100644
--- a/src/main/frontend/app/components/flow/add-subcomponent-modal.tsx
+++ b/src/main/frontend/app/components/flow/add-subcomponent-modal.tsx
@@ -1,5 +1,6 @@
 import { createPortal } from 'react-dom'
 import Button from '../inputs/button'
+import Search from '~/components/search/search'
 import type { ElementDetails } from '@frankframework/doc-library-core'
 import { useMemo, useState, type ChangeEvent } from 'react'
 
@@ -80,13 +81,7 @@ export default function AddSubcomponentModal({
         <h2 className="mb-4 text-lg font-bold">Add Subcomponent</h2>
 
         {/* Paragraph / content */}
-        <input
-          type="text"
-          placeholder="Search elements..."
-          value={search}
-          onChange={handleOnChange}
-          className="border-border focus:ring-foreground-active mb-3 w-full rounded border px-3 py-2 focus:ring focus:outline-none"
-        />
+        <Search placeholder="Search elements..." value={search} onChange={handleOnChange} />
         <div className="border-border bg-background mb-3 w-full flex-1 overflow-hidden rounded border">
           <ul className="h-full overflow-y-auto">
             {filteredChildren.length > 0 ? (
@@ -99,7 +94,7 @@ export default function AddSubcomponentModal({
                     onClick={() => setSelectedElement(child)}
                     onDoubleClick={handleAddChild}
                     className={`cursor-pointer px-3 py-2 ${
-                      isSelected ? 'bg-foreground-active text-background' : 'hover:bg-foreground-active/10'
+                      isSelected ? 'bg-foreground-active text-background' : 'hover:bg-hover'
                     }`}
                   >
                     {child.name}
@@ -107,7 +102,7 @@ export default function AddSubcomponentModal({
                 )
               })
             ) : (
-              <li className="text-muted-foreground px-3 py-2">No results found</li>
+              <li className="text-foreground-muted px-3 py-2">No results found</li>
             )}
           </ul>
         </div>
diff --git a/src/main/frontend/app/components/flow/canvas-context-menu.tsx b/src/main/frontend/app/components/flow/canvas-context-menu.tsx
index 0892cd54..312c0a6c 100644
--- a/src/main/frontend/app/components/flow/canvas-context-menu.tsx
+++ b/src/main/frontend/app/components/flow/canvas-context-menu.tsx
@@ -46,7 +46,7 @@ export default function CanvasContextMenu({
 
   const itemClass = 'flex items-center justify-between gap-6 px-3 py-1.5 text-sm whitespace-nowrap'
   const enabledClass = `${itemClass} cursor-pointer hover:bg-hover text-foreground`
-  const disabledClass = `${itemClass} cursor-default text-muted-foreground opacity-50`
+  const disabledClass = `${itemClass} cursor-default text-foreground-muted opacity-50`
 
   function menuItem(label: string, onClick: () => void, enabled: boolean, shortcutId?: string) {
     return (
@@ -62,7 +62,7 @@ export default function CanvasContextMenu({
         }
       >
         <span>{label}</span>
-        {shortcutId && <span className="text-muted-foreground ml-4 text-xs">{formatShortcut(shortcutId)}</span>}
+        {shortcutId && <span className="text-foreground-muted ml-4 text-xs">{formatShortcut(shortcutId)}</span>}
       </div>
     )
   }
diff --git a/src/main/frontend/app/components/flow/create-node-modal.tsx b/src/main/frontend/app/components/flow/create-node-modal.tsx
index 9ffe6de0..6043b8e2 100644
--- a/src/main/frontend/app/components/flow/create-node-modal.tsx
+++ b/src/main/frontend/app/components/flow/create-node-modal.tsx
@@ -3,6 +3,8 @@ import useFlowStore from '~/stores/flow-store'
 import useNodeContextStore from '~/stores/node-context-store'
 import { useFFDoc } from '@frankframework/doc-library-react'
 import Button from '../inputs/button'
+import CloseButton from '../inputs/close-button'
+import Search from '~/components/search/search'
 import type { Elements, FFDocJson } from '@frankframework/doc-library-core'
 
 interface CreateNodeModalProperties {
@@ -117,18 +119,17 @@ function CreateNodeModal({
 
   return (
     <div className="bg-background/50 absolute inset-0 z-50 flex items-center justify-center">
-      <div className="bg-background border-border relative h-[400px] w-[600px] rounded-lg border p-6 shadow-lg">
-        <h2 className="mb-4 text-lg font-semibold">Add Node</h2>
-        <p className="mb-4">Select the element to be added from the list below.</p>
-        <input
-          type="text"
+      <div className="bg-background border-border relative w-[600px] rounded-lg border p-6 shadow-lg">
+        <h2 className="text-lg font-semibold">Add Node</h2>
+        <p className="my-4">Select the element to be added from the list below.</p>
+        <Search
           placeholder="Search elements..."
+          className="mb-4 px-0"
           value={search}
           onChange={(event) => handleOnChange(event)}
-          className="border-border focus:ring-foreground-active mb-3 w-full rounded border px-3 py-2 focus:ring focus:outline-none"
         />
-        <div className="border-border bg-background mb-2 w-full rounded border">
-          <ul className="max-h-[150px] overflow-y-auto">
+        <div className="border-border bg-background w-full rounded border">
+          <ul className="max-h-[300px] overflow-y-auto">
             {filteredElements.length > 0 ? (
               filteredElements.map((element) => {
                 const isSelected = selectedElement === element.name
@@ -139,7 +140,7 @@ function CreateNodeModal({
                     onClick={() => setSelectedElement(element.name)}
                     onDoubleClick={handleCreateNode}
                     className={`cursor-pointer px-3 py-2 ${
-                      isSelected ? 'bg-foreground-active text-background' : 'hover:bg-foreground-active/10'
+                      isSelected ? 'bg-foreground-active text-background' : 'hover:bg-hover'
                     }`}
                   >
                     {element.name}
@@ -147,15 +148,15 @@ function CreateNodeModal({
                 )
               })
             ) : (
-              <li className="text-muted-foreground px-3 py-2">No results found</li>
+              <li className="text-foreground-muted px-3 py-2">No results found</li>
             )}
           </ul>
         </div>
 
-        <Button onClick={onClose} className="absolute top-3 right-3">
-          Close
+        <CloseButton onClick={onClose} className="absolute top-3 right-3" />
+        <Button onClick={handleCreateNode} className="mt-4">
+          Create Node
         </Button>
-        <Button onClick={handleCreateNode}>Create Node</Button>
       </div>
     </div>
   )
diff --git a/src/main/frontend/app/components/git/diff-tab-view.tsx b/src/main/frontend/app/components/git/diff-tab-view.tsx
index 17f6834b..642ced2d 100644
--- a/src/main/frontend/app/components/git/diff-tab-view.tsx
+++ b/src/main/frontend/app/components/git/diff-tab-view.tsx
@@ -5,6 +5,7 @@ import { useTheme } from '~/hooks/use-theme'
 import { useGitStore } from '~/stores/git-store'
 import type { DiffTabData } from '~/stores/editor-tab-store'
 import type { GitHunk } from '~/types/git.types'
+import Checkbox from '~/components/inputs/checkbox'
 
 type CodeEditor = ReturnType<MonacoDiffEditor['getModifiedEditor']>
 
@@ -29,6 +30,7 @@ function applyHunkDecorations(
     const startLine = hunk.newStart
     const endLine = hunk.newStart + hunk.newCount - 1
 
+    // Visible checkbox on the first line of the hunk
     decorations.push({
       range: new monaco.Range(startLine, 1, startLine, 1),
       options: {
@@ -37,6 +39,15 @@ function applyHunkDecorations(
       },
     })
 
+    for (let line = startLine + 1; line <= endLine; line++) {
+      decorations.push({
+        range: new monaco.Range(line, 1, line, 1),
+        options: {
+          glyphMarginClassName: 'hunk-glyph-hit-area',
+        },
+      })
+    }
+
     if (isSelected) {
       decorations.push({
         range: new monaco.Range(startLine, 1, endLine, 1),
@@ -127,11 +138,30 @@ export default function DiffTabView({ diffData }: DiffTabViewProps) {
     setEditorReady(true)
   }, [])
 
+  const selectableHunks = hunks.filter((hunk) => hunk.newCount > 0)
+  const allSelected = selectableHunks.length > 0 && selectableHunks.every((hunk) => selectedHunks.has(hunk.index))
+  const someSelected = selectableHunks.some((hunk) => selectedHunks.has(hunk.index))
+
+  const handleToggleAllHunks = () => {
+    for (const hunk of selectableHunks) {
+      const isSelected = selectedHunks.has(hunk.index)
+      if (allSelected ? isSelected : !isSelected) {
+        toggleFileHunk(filePath, hunk.index)
+      }
+    }
+  }
+
   const language = getLanguage(filePath)
 
   return (
     <>
-      <div className="border-b-border bg-background flex h-12 items-center border-b px-4">
+      <div className="border-b-border bg-background flex h-12 items-center gap-3 border-b px-4">
+        <Checkbox
+          checked={allSelected}
+          indeterminate={!allSelected && someSelected}
+          onChange={handleToggleAllHunks}
+          title={allSelected ? 'Deselect all chunks' : 'Select all chunks'}
+        />
         <span className="text-sm font-medium">{filePath}</span>
       </div>
       <div className="min-h-0 flex-1">
diff --git a/src/main/frontend/app/components/git/git-changes.tsx b/src/main/frontend/app/components/git/git-changes.tsx
index 67d13752..994a16fe 100644
--- a/src/main/frontend/app/components/git/git-changes.tsx
+++ b/src/main/frontend/app/components/git/git-changes.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import clsx from 'clsx'
 import type { GitStatus, FileHunkState } from '~/types/git.types'
+import Checkbox from '~/components/inputs/checkbox'
 
 interface GitChangesProps {
   status: GitStatus | null
@@ -18,38 +19,6 @@ const variantConfig: Record<SectionVariant, { accent: string; badge: string; bad
   conflicts: { accent: 'border-l-red-500', badge: 'bg-red-500/15 text-red-400', badgeLabel: 'C' },
 }
 
-function IndeterminateCheckbox({
-  checked,
-  indeterminate,
-  onChange,
-  title,
-}: {
-  checked: boolean
-  indeterminate: boolean
-  onChange: () => void
-  title: string
-}) {
-  const ref = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.indeterminate = indeterminate
-    }
-  }, [indeterminate])
-
-  return (
-    <input
-      ref={ref}
-      type="checkbox"
-      checked={checked}
-      onChange={onChange}
-      className="h-3 w-3 flex-shrink-0 cursor-pointer accent-green-500"
-      title={title}
-      onClick={(e) => e.stopPropagation()}
-    />
-  )
-}
-
 function FileSection({
   title,
   files,
@@ -80,7 +49,7 @@ function FileSection({
       >
         <span className="w-3 text-[10px]">{collapsed ? '▸' : '▾'}</span>
         <span className="flex-1">{title}</span>
-        <span className="bg-foreground-active text-muted-foreground rounded-full px-1.5 py-0.5 text-[10px] leading-none font-medium">
+        <span className="bg-foreground-active text-foreground-muted rounded-full px-1.5 py-0.5 text-[10px] leading-none font-medium">
           {files.length}
         </span>
       </button>
@@ -107,19 +76,18 @@ function FileSection({
               <div
                 key={file}
                 className={clsx(
-                  'group flex items-center gap-2 rounded-r px-3 py-1 text-xs hover:cursor-pointer',
+                  'group mx-2 flex items-center gap-2 rounded px-3 py-1 text-xs hover:cursor-pointer',
                   selectedFile === file ? 'bg-selected' : 'hover:bg-hover',
                 )}
                 onClick={() => onSelectFile(file)}
               >
-                <div onClick={(e) => e.stopPropagation()}>
-                  <IndeterminateCheckbox
-                    checked={checkboxChecked}
-                    indeterminate={checkboxIndeterminate}
-                    onChange={() => onToggleFile(file)}
-                    title={checkboxChecked ? 'Deselect all chunks' : 'Select all chunks'}
-                  />
-                </div>
+                <Checkbox
+                  checked={checkboxChecked}
+                  indeterminate={checkboxIndeterminate}
+                  onChange={() => onToggleFile(file)}
+                  title={checkboxChecked ? 'Deselect all chunks' : 'Select all chunks'}
+                  onClick={(mouseEvent) => mouseEvent.stopPropagation()}
+                />
                 <span
                   className={clsx(
                     'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-[10px] font-bold',
@@ -130,7 +98,7 @@ function FileSection({
                 </span>
                 <span className="text-foreground min-w-0 flex-1 truncate" title={file}>
                   {fileName}
-                  {dirPath && <span className="text-muted-foreground ml-1.5 text-[10px]">{dirPath}</span>}
+                  {dirPath && <span className="text-foreground-muted ml-1.5 text-[10px]">{dirPath}</span>}
                 </span>
               </div>
             )
diff --git a/src/main/frontend/app/components/git/git-commit-box.tsx b/src/main/frontend/app/components/git/git-commit-box.tsx
index 51bd7c28..f8f45ba3 100644
--- a/src/main/frontend/app/components/git/git-commit-box.tsx
+++ b/src/main/frontend/app/components/git/git-commit-box.tsx
@@ -1,3 +1,5 @@
+import Button from '~/components/inputs/button'
+
 interface GitCommitBoxProps {
   commitMessage: string
   onMessageChange: (message: string) => void
@@ -19,24 +21,25 @@ export default function GitCommitBox({
     <div className="border-t-border border-t p-2">
       <textarea
         value={commitMessage}
-        onChange={(e) => onMessageChange(e.target.value)}
+        onChange={(event) => onMessageChange(event.target.value)}
         placeholder="Commit message..."
-        className="border-border bg-background text-foreground placeholder:text-muted-foreground w-full resize-none rounded border p-2.5 text-xs focus:outline-none"
+        className="border-border bg-background text-foreground placeholder:text-foreground-muted w-full resize-none rounded border p-2.5 text-xs focus:outline-none"
         rows={4}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-            e.preventDefault()
+        onKeyDown={(keyboardEvent) => {
+          if (keyboardEvent.key === 'Enter' && (keyboardEvent.ctrlKey || keyboardEvent.metaKey)) {
+            keyboardEvent.preventDefault()
             if (canCommit) onCommit()
           }
         }}
       />
-      <button
+      <Button
+        variant="primary"
         onClick={onCommit}
         disabled={!canCommit}
-        className="bg-brand hover:bg-brand/90 mt-1.5 w-full cursor-pointer rounded px-2 py-1.5 text-xs font-medium text-white disabled:opacity-50"
+        className="mt-1.5 w-full rounded px-2 py-1.5 text-xs"
       >
         {isLoading ? 'Committing...' : 'Commit'}
-      </button>
+      </Button>
     </div>
   )
 }
diff --git a/src/main/frontend/app/components/git/git-panel.tsx b/src/main/frontend/app/components/git/git-panel.tsx
index 60f60286..ddd3f683 100644
--- a/src/main/frontend/app/components/git/git-panel.tsx
+++ b/src/main/frontend/app/components/git/git-panel.tsx
@@ -41,14 +41,19 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
     setToken,
   } = useGitStore()
 
-  const refreshStatus = useCallback(async () => {
-    try {
-      const newStatus = await fetchGitStatus(projectName)
-      setStatus(newStatus)
-    } catch (error) {
-      logApiError('Failed to fetch git status', error as Error)
-    }
-  }, [projectName, setStatus])
+  const refreshStatus = useCallback(
+    async (showToast = false) => {
+      try {
+        const newStatus = await fetchGitStatus(projectName)
+        setStatus(newStatus)
+        if (showToast) showInfoToast('Status refreshed')
+      } catch (error) {
+        logApiError('Failed to fetch git status', error as Error)
+        if (showToast) showErrorToast('Failed to refresh status')
+      }
+    },
+    [projectName, setStatus],
+  )
 
   useEffect(() => {
     refreshStatus()
@@ -176,7 +181,7 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
     <div className="flex h-full flex-col overflow-hidden">
       <GitToolbar
         status={status}
-        onRefresh={refreshStatus}
+        onRefresh={() => void refreshStatus(true)}
         onPush={handlePush}
         onPull={handlePull}
         token={token}
diff --git a/src/main/frontend/app/components/git/git-toolbar.tsx b/src/main/frontend/app/components/git/git-toolbar.tsx
index d2c292b6..2d0e51b3 100644
--- a/src/main/frontend/app/components/git/git-toolbar.tsx
+++ b/src/main/frontend/app/components/git/git-toolbar.tsx
@@ -1,7 +1,13 @@
 import { useState } from 'react'
 import clsx from 'clsx'
 import type { GitStatus } from '~/types/git.types'
-import Button from '~/components/inputs/button'
+import IconButton from '~/components/inputs/icon-button'
+import IconLabelButton from '~/components/inputs/icon-label-button'
+import Input from '~/components/inputs/input'
+import RefreshIcon from '/icons/solar/Refresh.svg?react'
+import AltArrowDownIcon from '/icons/solar/Alt Arrow Down.svg?react'
+import AltArrowUpIcon from '/icons/solar/Alt Arrow Up.svg?react'
+import KeyIcon from '/icons/solar/Key.svg?react'
 
 interface GitToolbarProps {
   status: GitStatus | null
@@ -62,49 +68,49 @@ export default function GitToolbar({
             </span>
           )}
         </div>
-        <Button onClick={onRefresh} className="px-2 py-1 text-xs" title="Refresh status">
-          ↻
-        </Button>
+        <IconButton onClick={onRefresh} title="Refresh status">
+          <RefreshIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+        </IconButton>
       </div>
+
       {status?.hasRemote && (
-        <div className="flex gap-1.5 px-2 pb-2">
-          <Button
+        <div className="flex items-center gap-1.5 px-2 pb-2">
+          <IconLabelButton
+            icon={<AltArrowDownIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />}
+            label={isPulling ? '...' : 'Pull'}
             onClick={handlePull}
-            disabled={isPulling}
-            className="flex-1 py-1.5 text-xs disabled:opacity-50"
-            title="Pull"
-          >
-            {isPulling ? '...' : '↓ Pull'}
-          </Button>
-          <Button
+            className={clsx('flex-1 justify-center', isPulling && 'cursor-not-allowed opacity-50')}
+          />
+          <IconLabelButton
+            icon={<AltArrowUpIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />}
+            label={isPushing ? '...' : 'Push'}
             onClick={handlePush}
-            disabled={isPushing || (status?.ahead ?? 0) === 0}
-            className="flex-1 py-1.5 text-xs disabled:opacity-50"
-            title={status.ahead === 0 ? 'Nothing to push' : 'Push'}
-          >
-            {isPushing ? '...' : '↑ Push'}
-          </Button>
+            className={clsx(
+              'flex-1 justify-center',
+              (isPushing || (status?.ahead ?? 0) === 0) && 'cursor-not-allowed opacity-50',
+            )}
+          />
           {!status?.isLocal && (
-            <Button
+            <IconButton
               onClick={() => setShowToken(!showToken)}
-              className={clsx('px-2 py-1.5 text-xs', showToken && 'bg-selected')}
               title="Authentication token for private repos"
+              className={clsx(showToken && 'bg-selected')}
             >
-              🔑
-            </Button>
+              <KeyIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+            </IconButton>
           )}
         </div>
       )}
+
       {showToken && !status?.isLocal && (
         <div className="border-t-border border-t px-2 py-1.5">
-          <input
+          <Input
             type="password"
             value={token}
-            onChange={(e) => onTokenChange(e.target.value)}
+            onChange={(event) => onTokenChange(event.target.value)}
             placeholder={
               hasStoredToken ? 'Using saved token (override here)' : 'Personal access token (for private repos)'
             }
-            className="border-border bg-background text-foreground placeholder:text-muted-foreground w-full rounded border px-2 py-1 text-xs focus:outline-none"
           />
         </div>
       )}
diff --git a/src/main/frontend/app/components/inputs/button.tsx b/src/main/frontend/app/components/inputs/button.tsx
index b193d0f1..07b46be9 100644
--- a/src/main/frontend/app/components/inputs/button.tsx
+++ b/src/main/frontend/app/components/inputs/button.tsx
@@ -1,22 +1,31 @@
 import React from 'react'
 import clsx from 'clsx'
 
+type ButtonVariant = 'default' | 'ghost' | 'primary' | 'destructive'
+
+export function buttonClasses(variant: ButtonVariant = 'default', disabled?: boolean, className?: string) {
+  return clsx(
+    'rounded-md px-4 py-2',
+    variant === 'default' && 'text-foreground border-border bg-backdrop border',
+    variant === 'ghost' && 'text-foreground border border-transparent bg-transparent',
+    variant === 'primary' && 'bg-brand font-medium text-white',
+    variant === 'destructive' && 'bg-red-600 font-medium text-white',
+    !disabled && (variant === 'default' || variant === 'ghost') && 'hover:bg-hover active:bg-selected cursor-pointer',
+    !disabled && variant === 'primary' && 'hover:opacity-90 cursor-pointer',
+    !disabled && variant === 'destructive' && 'hover:bg-red-700 cursor-pointer',
+    disabled && 'cursor-not-allowed opacity-50',
+    className,
+  )
+}
+
 export default function Button({
   children,
   className,
+  variant = 'default',
   ...properties
-}: React.PropsWithChildren<Readonly<React.ButtonHTMLAttributes<HTMLButtonElement>>>) {
+}: React.PropsWithChildren<Readonly<React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant }>>) {
   return (
-    <button
-      className={clsx(
-        'border-border text-foreground bg-backdrop rounded-md border px-4 py-2',
-        !properties.disabled && 'hover:bg-hover hover:text-foreground-active active:bg-selected hover:cursor-pointer',
-        properties.disabled && 'text-foreground-muted',
-
-        className,
-      )}
-      {...properties}
-    >
+    <button className={buttonClasses(variant, properties.disabled, className)} {...properties}>
       {children}
     </button>
   )
diff --git a/src/main/frontend/app/components/inputs/checkbox.tsx b/src/main/frontend/app/components/inputs/checkbox.tsx
index 73764917..09c30693 100644
--- a/src/main/frontend/app/components/inputs/checkbox.tsx
+++ b/src/main/frontend/app/components/inputs/checkbox.tsx
@@ -1,49 +1,64 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 import CheckSquareIcon from '/icons/custom/Check.svg?react'
 
 export type CheckboxProperties = {
   checked?: boolean
+  indeterminate?: boolean
   disabled?: boolean
   onChange?: (checked: boolean) => void
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'disabled' | 'onChange' | 'checked'>
 
 export default function Checkbox({
   checked = false,
+  indeterminate = false,
   disabled = false,
   onChange,
   className,
   ...properties
 }: CheckboxProperties) {
   const [isChecked, setIsChecked] = useState(checked)
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     setIsChecked(checked)
   }, [checked])
 
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate
+    }
+  }, [indeterminate])
+
+  const isActive = isChecked || indeterminate
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!disabled) {
-      const newIsChecked = event.target.checked
-      onChange?.(newIsChecked)
-      setIsChecked(newIsChecked)
+      const newChecked = event.target.checked
+      onChange?.(newChecked)
+      setIsChecked(newChecked)
     }
   }
 
   return (
-    <div className={clsx('relative flex aspect-square h-6 items-center', disabled && 'opacity-50', className)}>
+    <div className={clsx('relative flex aspect-square h-4 items-center', disabled && 'opacity-50', className)}>
       <input
+        ref={inputRef}
         type="checkbox"
         checked={isChecked}
         disabled={disabled}
         onChange={handleChange}
         className={clsx(
-          'peer border-border h-full w-full appearance-none rounded-md border',
-          isChecked ? 'border-brand bg-brand' : 'border-border hover:bg-hover bg-backdrop',
+          'peer border-border h-full w-full appearance-none rounded border',
+          isActive ? 'border-brand bg-brand' : 'bg-backdrop',
           disabled ? 'cursor-not-allowed' : 'cursor-pointer',
         )}
         {...properties}
       />
       <CheckSquareIcon className="fill-background pointer-events-none absolute left-0 h-full w-full opacity-0 peer-checked:opacity-100" />
+      {indeterminate && !isChecked && (
+        <div className="bg-background pointer-events-none absolute top-1/2 left-1/2 h-0.5 w-1/2 -translate-x-1/2 -translate-y-1/2 rounded" />
+      )}
     </div>
   )
 }
diff --git a/src/main/frontend/app/components/inputs/close-button.tsx b/src/main/frontend/app/components/inputs/close-button.tsx
new file mode 100644
index 00000000..808c6cee
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/close-button.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import CloseIcon from '/icons/custom/Close.svg?react'
+import IconButton from '~/components/inputs/icon-button'
+
+interface CloseButtonProps {
+  onClick?: (event: React.MouseEvent) => void
+  className?: string
+}
+
+export default function CloseButton({ onClick, className }: Readonly<CloseButtonProps>) {
+  return (
+    <IconButton onClick={onClick} className={className}>
+      <CloseIcon className="fill-foreground-muted group-hover:fill-foreground h-4 w-4" />
+    </IconButton>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/dropdown.tsx b/src/main/frontend/app/components/inputs/dropdown.tsx
index 20aead4c..8cb911a0 100644
--- a/src/main/frontend/app/components/inputs/dropdown.tsx
+++ b/src/main/frontend/app/components/inputs/dropdown.tsx
@@ -39,7 +39,8 @@ export default function Dropdown({
   }, [optionsArray, selectedValue])
 
   const getSelectedLabel = () => {
-    return selectedValue ? options[selectedValue] : placeholder
+    if (selectedValue !== undefined && selectedValue in options) return options[selectedValue]
+    return placeholder
   }
 
   const toggleDropdown = useCallback(() => {
@@ -184,7 +185,9 @@ export default function Dropdown({
             isOpen ? 'bg-selected' : 'hover:bg-hover',
           )}
         >
-          <span className={clsx('text-foreground flex-1 truncate sm:text-sm', !selectedValue && 'text-gray-400')}>
+          <span
+            className={clsx('text-foreground flex-1 truncate sm:text-sm', !selectedValue && 'text-foreground-muted')}
+          >
             {getSelectedLabel()}
           </span>
           <AltArrowDownIcon className={clsx('fill-foreground h-4 w-4', isOpen && 'rotate-180')} />
diff --git a/src/main/frontend/app/components/inputs/icon-button.tsx b/src/main/frontend/app/components/inputs/icon-button.tsx
new file mode 100644
index 00000000..df1f77dd
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/icon-button.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import clsx from 'clsx'
+
+interface IconButtonProps {
+  title?: string
+  onClick?: (event: React.MouseEvent) => void
+  onContextMenu?: (event: React.MouseEvent) => void
+  className?: string
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+export default function IconButton({
+  title,
+  onClick,
+  onContextMenu,
+  className,
+  disabled = false,
+  children,
+}: Readonly<IconButtonProps>) {
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      className={clsx(
+        'icon-button group flex-shrink-0 cursor-pointer rounded p-0.5',
+        disabled ? 'cursor-not-allowed opacity-40' : 'hover:bg-hover',
+        className,
+      )}
+      title={title}
+      onClick={(mouseEvent) => {
+        mouseEvent.stopPropagation()
+        if (!disabled) onClick?.(mouseEvent)
+      }}
+      onKeyDown={(keyboardEvent) => {
+        if (!disabled && keyboardEvent.key === 'Enter') {
+          onClick?.(keyboardEvent as unknown as React.MouseEvent)
+        }
+      }}
+      onContextMenu={onContextMenu}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/icon-label-button.tsx b/src/main/frontend/app/components/inputs/icon-label-button.tsx
new file mode 100644
index 00000000..fea20856
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/icon-label-button.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import clsx from 'clsx'
+
+interface IconLabelButtonProps {
+  icon: React.ReactNode
+  label: string
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  className?: string
+}
+
+export default function IconLabelButton({ icon, label, onClick, className }: Readonly<IconLabelButtonProps>) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={clsx(
+        'text-foreground hover:bg-hover flex shrink-0 cursor-pointer items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium',
+        className,
+      )}
+    >
+      {icon}
+      <span className="whitespace-nowrap">{label}</span>
+    </button>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/input.tsx b/src/main/frontend/app/components/inputs/input.tsx
index 6b43e651..09ae36a7 100644
--- a/src/main/frontend/app/components/inputs/input.tsx
+++ b/src/main/frontend/app/components/inputs/input.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export type InputProperties = {
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   value?: string
   placeholder?: string
   wrapperClassName?: string
diff --git a/src/main/frontend/app/components/inputs/kebab-menu.tsx b/src/main/frontend/app/components/inputs/kebab-menu.tsx
new file mode 100644
index 00000000..828f6843
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/kebab-menu.tsx
@@ -0,0 +1,97 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import clsx from 'clsx'
+import KebabIcon from '/icons/solar/Kebab Vertical.svg?react'
+
+export interface KebabMenuItem {
+  label: string
+  icon?: ReactNode
+  onClick: () => void
+  className?: string
+}
+
+interface KebabMenuProperties {
+  items: KebabMenuItem[]
+  triggerClassName?: string
+}
+
+export default function KebabMenu({ items, triggerClassName }: Readonly<KebabMenuProperties>) {
+  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!menuPosition) return
+
+    const handleMouseDown = (event: MouseEvent) => {
+      const clickedTrigger = triggerRef.current?.contains(event.target as Node)
+      const clickedMenu = menuRef.current?.contains(event.target as Node)
+      if (!clickedTrigger && !clickedMenu) setMenuPosition(null)
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setMenuPosition(null)
+    }
+
+    document.addEventListener('mousedown', handleMouseDown)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [menuPosition])
+
+  const openMenu = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (menuPosition) {
+      setMenuPosition(null)
+      return
+    }
+    const rect = triggerRef.current?.getBoundingClientRect()
+    if (rect) setMenuPosition({ x: rect.right, y: rect.bottom })
+  }
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        onClick={openMenu}
+        className={clsx(
+          'icon-button text-foreground-muted hover:bg-hover hover:text-foreground cursor-pointer rounded p-1',
+          triggerClassName,
+        )}
+        aria-label="More options"
+      >
+        <KebabIcon className="h-4 w-4 fill-current" />
+      </button>
+
+      {menuPosition &&
+        createPortal(
+          <div
+            ref={menuRef}
+            className="bg-background border-border fixed z-50 min-w-max rounded-md border p-1 shadow-md"
+            style={{ top: menuPosition.y, right: `calc(100vw - ${menuPosition.x}px)` }}
+          >
+            {items.map((item) => (
+              <button
+                key={item.label}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  item.onClick()
+                  setMenuPosition(null)
+                }}
+                className={clsx(
+                  'text-foreground hover:bg-hover flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-sm whitespace-nowrap',
+                  item.className,
+                )}
+              >
+                {item.icon}
+                {item.label}
+              </button>
+            ))}
+          </div>,
+          document.body,
+        )}
+    </>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/link-button.tsx b/src/main/frontend/app/components/inputs/link-button.tsx
new file mode 100644
index 00000000..c439da1a
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/link-button.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { buttonClasses } from './button'
+
+type ButtonVariant = 'default' | 'ghost'
+
+export default function LinkButton({
+  children,
+  className,
+  variant = 'default',
+  ...properties
+}: React.PropsWithChildren<Readonly<React.AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: ButtonVariant }>>) {
+  return (
+    <a className={buttonClasses(variant, false, className)} {...properties}>
+      {children}
+    </a>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/segmented-button.tsx b/src/main/frontend/app/components/inputs/segmented-button.tsx
new file mode 100644
index 00000000..0761383c
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/segmented-button.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import clsx from 'clsx'
+
+interface SegmentedButtonProperties extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isActive?: boolean
+}
+
+export default function SegmentedButton({
+  isActive = false,
+  className,
+  children,
+  ...properties
+}: Readonly<SegmentedButtonProperties>) {
+  return (
+    <button
+      className={clsx(
+        'text-foreground cursor-pointer px-3 py-1 text-sm',
+        isActive ? 'bg-selected font-medium' : 'text-foreground-muted hover:bg-hover active:bg-selected',
+        className,
+      )}
+      {...properties}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/switch-toggle.tsx b/src/main/frontend/app/components/inputs/switch-toggle.tsx
index b8a9b07b..c0c3d177 100644
--- a/src/main/frontend/app/components/inputs/switch-toggle.tsx
+++ b/src/main/frontend/app/components/inputs/switch-toggle.tsx
@@ -49,7 +49,7 @@ export default function SwitchToggle({
       >
         <span
           className={clsx(
-            'bg-background absolute h-5 w-5 rounded-full shadow transition-transform duration-200 ease-in-out',
+            'bg-background absolute h-5 w-5 rounded-full shadow',
             selected === options[0] ? 'translate-x-0' : 'translate-x-6',
           )}
         />
diff --git a/src/main/frontend/app/components/inputs/toggle.tsx b/src/main/frontend/app/components/inputs/toggle.tsx
index 7922a8e3..a81365e7 100644
--- a/src/main/frontend/app/components/inputs/toggle.tsx
+++ b/src/main/frontend/app/components/inputs/toggle.tsx
@@ -20,58 +20,40 @@ export default function Toggle({
     setIsChecked(checked)
   }, [checked])
 
-  const toggle = () => {
-    if (disabled) return
-
-    const next = !isChecked
-    setIsChecked(next)
-    onChange(next)
-  }
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (disabled) return
-
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      toggle()
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!disabled) {
+      const newIsChecked = event.target.checked
+      setIsChecked(newIsChecked)
+      onChange?.(newIsChecked)
     }
   }
 
   return (
-    <div className="group inline-flex items-center">
+    <div className="group flex items-center gap-2">
       <label
         className={clsx(
-          'relative inline-block h-6 w-12',
-          disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+          'relative inline-block h-6 w-12 cursor-pointer',
+          disabled && 'cursor-not-allowed opacity-50',
           className,
         )}
       >
         <input
           type="checkbox"
           checked={isChecked}
-          onChange={toggle}
-          onKeyDown={handleKeyDown}
+          onChange={handleChange}
           disabled={disabled}
-          className="peer sr-only"
+          className="absolute h-0 w-0 opacity-0"
           {...properties}
         />
-
-        <span
-          className={clsx(
-            'absolute inset-0 rounded-full transition-colors duration-200 ease-in-out',
-            isChecked ? 'bg-brand' : 'bg-border',
-            'peer-focus-visible:ring-brand peer-focus-visible:ring-offset-background peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2',
-          )}
-        />
-
-        <span
-          className={clsx(
-            'bg-backdrop absolute top-1/2 h-5 w-5 rounded-full shadow-md',
-            'transition-transform duration-200 ease-in-out',
-            'group-hover:bg-hover',
-            isChecked ? 'translate-x-6 -translate-y-1/2' : 'translate-x-1 -translate-y-1/2',
-          )}
-        />
+        <span className={clsx('absolute inset-0 rounded-full', isChecked ? 'bg-brand' : 'bg-border')}>
+          <span
+            className={clsx(
+              'bg-background group-hover:bg-hover absolute top-[50%] h-5 w-5 -translate-y-1/2 transform rounded-full',
+              'bg-backdrop group-hover:bg-hover absolute top-[50%] h-5 w-5 -translate-y-1/2 transform rounded-full',
+              isChecked ? 'right-0.5' : 'left-0.5',
+            )}
+          />
+        </span>
       </label>
     </div>
   )
diff --git a/src/main/frontend/app/components/inputs/tree-action-button.tsx b/src/main/frontend/app/components/inputs/tree-action-button.tsx
new file mode 100644
index 00000000..e743eb7c
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/tree-action-button.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import IconButton from '~/components/inputs/icon-button'
+
+interface TreeActionButtonProps {
+  title: string
+  onAction: () => void
+  children: React.ReactNode
+}
+
+export default function TreeActionButton({ title, onAction, children }: TreeActionButtonProps) {
+  return (
+    <IconButton title={title} onClick={() => onAction()}>
+      {children}
+    </IconButton>
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/validatedInput.tsx b/src/main/frontend/app/components/inputs/validatedInput.tsx
index 2b070950..c4fa778a 100644
--- a/src/main/frontend/app/components/inputs/validatedInput.tsx
+++ b/src/main/frontend/app/components/inputs/validatedInput.tsx
@@ -54,7 +54,7 @@ export default function ValidatedInput({
     setInputValue(newValue)
     validateInput(newValue)
 
-    onChange(event)
+    onChange?.(event)
   }
 
   return (
diff --git a/src/main/frontend/app/components/loading-spinner.tsx b/src/main/frontend/app/components/loading-spinner.tsx
index 66ef4dd8..08cf75b6 100644
--- a/src/main/frontend/app/components/loading-spinner.tsx
+++ b/src/main/frontend/app/components/loading-spinner.tsx
@@ -16,7 +16,7 @@ export default function LoadingSpinner({ size = 'md', message, className }: Read
   return (
     <div className={clsx('flex flex-col items-center justify-center gap-3', className)}>
       <div className={clsx('border-border border-t-brand animate-spin rounded-full', sizeClasses[size])} />
-      {message && <p className="text-muted-foreground text-sm">{message}</p>}
+      {message && <p className="text-foreground-muted text-sm">{message}</p>}
     </div>
   )
 }
diff --git a/src/main/frontend/app/components/navbar/navbar-link.tsx b/src/main/frontend/app/components/navbar/navbar-link.tsx
index 3d23718c..b1a57736 100644
--- a/src/main/frontend/app/components/navbar/navbar-link.tsx
+++ b/src/main/frontend/app/components/navbar/navbar-link.tsx
@@ -12,28 +12,27 @@ export default function NavbarLink({ route, label, Icon }: Readonly<NavbarLinkPr
   const navigate = useNavigationStore((state) => state.navigate)
   const isActive = currentRoute === route
 
-  const handleClick = () => {
-    navigate(route)
-  }
-
   return (
     <li className="m-0 list-none p-0">
       <button
         type="button"
-        onClick={handleClick}
-        className="group hover:bg-hover relative flex w-full flex-col items-center p-4 text-center hover:cursor-pointer"
+        onClick={() => navigate(route)}
+        className="group relative flex w-full cursor-pointer flex-col items-center py-1"
       >
         <div
           className={clsx('absolute top-1/2 left-1 h-10/12 w-[2px] -translate-y-1/2 rounded', isActive && 'bg-brand')}
         />
-        {Icon && (
-          <Icon className={clsx('group-hover:fill-brand h-8 w-auto', isActive ? 'fill-brand' : 'fill-foreground')} />
-        )}
-        <span
-          className={clsx(
-            'absolute top-1/2 left-full z-10 ml-2 hidden -translate-y-1/2 rounded bg-neutral-950 px-2 py-1 text-sm whitespace-nowrap text-white shadow-md group-hover:block',
+        <div className="hover:bg-hover rounded p-2">
+          {Icon && (
+            <Icon
+              className={clsx(
+                'h-8 w-auto',
+                isActive ? 'fill-brand' : 'fill-foreground-muted group-hover:fill-foreground',
+              )}
+            />
           )}
-        >
+        </div>
+        <span className="bg-backdrop text-foreground border-border absolute top-1/2 left-full z-10 ml-2 hidden -translate-y-1/2 rounded border px-2 py-1 text-sm whitespace-nowrap shadow-md group-hover:block">
           {label}
         </span>
       </button>
diff --git a/src/main/frontend/app/components/save-status-indicator.tsx b/src/main/frontend/app/components/save-status-indicator.tsx
index 53daacc2..275e4e92 100644
--- a/src/main/frontend/app/components/save-status-indicator.tsx
+++ b/src/main/frontend/app/components/save-status-indicator.tsx
@@ -23,7 +23,7 @@ export function SaveStatusIndicator() {
   if (saveStatus === 'saving') {
     return (
       <span className="text-foreground-muted inline-flex items-center gap-1.5 text-xs">
-        <CloudIcon className="animate-pulse" />
+        <CloudIcon />
         Saving...
       </span>
     )
diff --git a/src/main/frontend/app/components/search/search.tsx b/src/main/frontend/app/components/search/search.tsx
index e44233ef..f5477f2e 100644
--- a/src/main/frontend/app/components/search/search.tsx
+++ b/src/main/frontend/app/components/search/search.tsx
@@ -7,6 +7,8 @@ interface SearchProperties {
   type?: string
   placeholder?: string
   value?: string
+  className?: string
+  inputClassName?: string
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
 }
@@ -16,26 +18,30 @@ export default function Search({
   type = 'search',
   placeholder = 'Search',
   value,
+  className,
+  inputClassName,
   onChange,
   onKeyDown,
 }: Readonly<SearchProperties>) {
   const generatedId = useId()
   const inputId = id ?? generatedId
   return (
-    <div className="relative px-4">
-      <label htmlFor={inputId} className="absolute top-1/2 left-6 -translate-y-1/2">
-        <MagnifierIcon className="fill-foreground-muted h-auto w-4" />
-      </label>
-      <Input
-        id={inputId}
-        type={type}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        wrapperClassName="rounded-full"
-        inputClassName="rounded-full pl-7"
-      />
+    <div className={className ?? 'px-4'}>
+      <div className="relative">
+        <label htmlFor={inputId} className="absolute top-1/2 left-3 -translate-y-1/2">
+          <MagnifierIcon className="fill-foreground-muted h-auto w-4" />
+        </label>
+        <Input
+          id={inputId}
+          type={type}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          wrapperClassName="rounded-full"
+          inputClassName={`rounded-full pl-8 ${inputClassName ?? 'py-2'}`}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx b/src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx
index 7792cef0..5baaab32 100644
--- a/src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx
+++ b/src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx
@@ -3,6 +3,7 @@ import { SidebarSide, useSidebarStore } from '~/components/sidebars-layout/sideb
 import clsx from 'clsx'
 import { useContext } from 'react'
 import { SidebarContext } from '~/components/sidebars-layout/sidebar-layout'
+import IconButton from '~/components/inputs/icon-button'
 
 export interface SidebarsCloseProperties {
   side: SidebarSide
@@ -21,9 +22,8 @@ export default function SidebarClose({ side }: Readonly<SidebarsCloseProperties>
   }
 
   return (
-    <SidebarIcon
-      onClick={toggleVisible}
-      className={clsx('fill-foreground hover:fill-brand cursor-pointer', isLeft && 'rotate-180')}
-    ></SidebarIcon>
+    <IconButton onClick={toggleVisible} title={isLeft ? 'Collapse left sidebar' : 'Collapse right sidebar'}>
+      <SidebarIcon className={clsx('fill-foreground-muted group-hover:fill-foreground', isLeft && 'rotate-180')} />
+    </IconButton>
   )
 }
diff --git a/src/main/frontend/app/components/sidebars-layout/sidebar-layout.tsx b/src/main/frontend/app/components/sidebars-layout/sidebar-layout.tsx
index 40f773b5..d2abccde 100644
--- a/src/main/frontend/app/components/sidebars-layout/sidebar-layout.tsx
+++ b/src/main/frontend/app/components/sidebars-layout/sidebar-layout.tsx
@@ -27,7 +27,7 @@ export default function SidebarLayout({ children, name }: Readonly<SidebarLayout
           maxSize={500}
           preferredSize={300}
           visible={visible[SidebarSide.LEFT]}
-          className="flex h-full flex-col"
+          className="bg-background flex h-full flex-col"
         >
           {childrenArray[SidebarSide.LEFT]}
         </Allotment.Pane>
@@ -41,7 +41,7 @@ export default function SidebarLayout({ children, name }: Readonly<SidebarLayout
             maxSize={1000}
             preferredSize={500}
             visible={visible[SidebarSide.RIGHT]}
-            className="flex h-full flex-col"
+            className="bg-background flex h-full flex-col"
           >
             {childrenArray[SidebarSide.RIGHT]}
           </Allotment.Pane>
diff --git a/src/main/frontend/app/components/tabs/tab.tsx b/src/main/frontend/app/components/tabs/tab.tsx
index 5a87057d..ed8f8a52 100644
--- a/src/main/frontend/app/components/tabs/tab.tsx
+++ b/src/main/frontend/app/components/tabs/tab.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
-import CloseIcon from '/icons/custom/Close.svg?react'
+import CloseButton from '~/components/inputs/close-button'
 import CodeIcon from '/icons/solar/Code.svg?react'
 import type { TabData } from '~/stores/tab-store'
 
@@ -32,13 +32,7 @@ export default function Tab({ name, configurationPath, icon, isSelected, onSelec
     >
       <Icon className={'fill-foreground-muted h-4 w-auto'} />
       {name}
-      <CloseIcon
-        className={clsx(
-          'hover:fill-foreground h-5 w-auto hover:cursor-pointer',
-          isSelected ? 'fill-foreground-muted' : 'group-hover:fill-foreground-muted',
-        )}
-        onClick={handleClose}
-      />
+      <CloseButton className={clsx(isSelected ? '' : 'opacity-0 group-hover:opacity-100')} onClick={handleClose} />
     </li>
   )
 }
diff --git a/src/main/frontend/app/components/tabs/tabs.tsx b/src/main/frontend/app/components/tabs/tabs.tsx
index 398ccfa7..d22dddeb 100644
--- a/src/main/frontend/app/components/tabs/tabs.tsx
+++ b/src/main/frontend/app/components/tabs/tabs.tsx
@@ -52,16 +52,18 @@ export function TabsView<T extends string>({ tabs, activeTab, onSelectTab, onClo
     <div className="relative flex h-12">
       <div
         ref={shadowLeftReference}
-        className="absolute top-0 bottom-0 left-0 z-10 w-2 bg-gradient-to-r from-black/15 to-transparent opacity-0"
+        className="from-foreground/20 absolute top-0 bottom-0 left-0 z-10 w-2 bg-gradient-to-r to-transparent opacity-0"
       />
       <div
         ref={shadowRightReference}
-        className="absolute top-0 right-0 bottom-0 z-10 w-2 bg-gradient-to-l from-black/15 to-transparent opacity-0"
+        className="from-foreground/20 absolute top-0 right-0 bottom-0 z-10 w-2 bg-gradient-to-l to-transparent opacity-0"
       />
 
       <ul
         ref={tabsListReference}
-        className="m-0 flex rotate-x-180 flex-nowrap overflow-x-auto p-0 whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        style={{ scrollbarWidth: 'none' }}
+        className="m-0 flex rotate-x-180 flex-nowrap overflow-x-auto p-0 whitespace-nowrap [&::-webkit-scrollbar]:hidden"
+        onScroll={calculateScrollShadows}
       >
         {entries.map(([key, tab]) => (
           <Tab
diff --git a/src/main/frontend/app/components/toast.tsx b/src/main/frontend/app/components/toast.tsx
index 9a0623a2..bcee8475 100644
--- a/src/main/frontend/app/components/toast.tsx
+++ b/src/main/frontend/app/components/toast.tsx
@@ -10,8 +10,7 @@ interface ToastOptions {
   duration?: number
 }
 
-const toastBaseCard =
-  'shadow-lg rounded-lg p-4 w-80 max-w-full text-white flex items-start gap-3 transform transition-all duration-300 ease-in-out'
+const toastBaseCard = 'shadow-lg rounded-lg p-4 w-80 max-w-full text-white flex items-start gap-3'
 const defaultStyle = 'items-end justify-end pointer-events-none'
 const toastStyles = {
   ERROR: {
diff --git a/src/main/frontend/app/root.tsx b/src/main/frontend/app/root.tsx
index 7e78d2b1..2f3cb373 100644
--- a/src/main/frontend/app/root.tsx
+++ b/src/main/frontend/app/root.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
 import { useTheme } from '~/hooks/use-theme'
+import { useProjectStore } from '~/stores/project-store'
 import type { Route } from './+types/root'
 import 'allotment/dist/style.css'
 import './app.css'
@@ -33,6 +34,16 @@ export const links: Route.LinksFunction = () => [
   { rel: 'manifest', href: '/favicons/site.webmanifest' },
 ]
 
+function TitleSync() {
+  const project = useProjectStore((state) => state.project)
+
+  useEffect(() => {
+    document.title = project ? `FF! Flow | ${project.name}` : 'FF! Flow'
+  }, [project])
+
+  return null
+}
+
 function ThemeProvider({ children }: { children: React.ReactNode }) {
   const theme = useTheme()
 
@@ -40,7 +51,12 @@ function ThemeProvider({ children }: { children: React.ReactNode }) {
     document.documentElement.dataset.theme = theme
   }, [theme])
 
-  return <>{children}</>
+  return (
+    <>
+      <TitleSync />
+      {children}
+    </>
+  )
 }
 
 export function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
@@ -97,8 +113,6 @@ export function ErrorBoundary({ error }: Readonly<Route.ErrorBoundaryProps>) {
 
 export function HydrateFallback() {
   return (
-    <div className="flex h-screen w-full animate-pulse items-center justify-center text-slate-400">
-      Initializing Flow...
-    </div>
+    <div className="text-foreground-muted flex h-screen w-full items-center justify-center">Initializing Flow...</div>
   )
 }
diff --git a/src/main/frontend/app/routes/configurations/add-configuration-modal.tsx b/src/main/frontend/app/routes/configurations/add-configuration-modal.tsx
index 3dc3c26e..630bcc2f 100644
--- a/src/main/frontend/app/routes/configurations/add-configuration-modal.tsx
+++ b/src/main/frontend/app/routes/configurations/add-configuration-modal.tsx
@@ -3,6 +3,8 @@ import { createConfigurationFile } from '~/services/configuration-file-service'
 import { useProjectStore } from '~/stores/project-store'
 import type { ConfigurationProject } from '~/types/project.types'
 import Button from '~/components/inputs/button'
+import CloseButton from '~/components/inputs/close-button'
+import Input from '~/components/inputs/input'
 import DirectoryPicker from '~/components/directory-picker/directory-picker'
 import { fetchProject } from '~/services/project-service'
 
@@ -102,7 +104,7 @@ export default function AddConfigurationModal({
           </label>
           <div className="ml-2 flex w-full items-center">
             <label
-              className="border-border bg-background w-full rounded border px-2 py-1 text-sm transition"
+              className="border-border bg-background w-full rounded border px-2 py-1 text-sm"
               aria-label="folder location"
               onDoubleClick={() => setIsOpenPickerOpen(true)}
             >
@@ -119,11 +121,10 @@ export default function AddConfigurationModal({
             Filename
           </label>
           <div className="ml-2 flex w-full items-center">
-            <input
+            <Input
               id="configuration-filename-input"
               value={filename}
               onChange={(event) => setFilename(event.target.value)}
-              className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"
               placeholder="Choose a filename"
               aria-label="configuration filename"
             />
@@ -135,9 +136,7 @@ export default function AddConfigurationModal({
             {loading ? 'Adding...' : `Add ${displayFilename || 'configuration file'} to ${currentConfiguration.name}`}
           </Button>
 
-          <Button onClick={handleClose} className="absolute top-3 right-3">
-            Close
-          </Button>
+          <CloseButton onClick={handleClose} className="absolute top-3 right-3" />
         </div>
 
         {error && <p className="mt-4 text-sm text-red-500">{error}</p>}
diff --git a/src/main/frontend/app/routes/configurations/add-configuration-tile.tsx b/src/main/frontend/app/routes/configurations/add-configuration-tile.tsx
index e08029c7..58068abc 100644
--- a/src/main/frontend/app/routes/configurations/add-configuration-tile.tsx
+++ b/src/main/frontend/app/routes/configurations/add-configuration-tile.tsx
@@ -5,7 +5,7 @@ interface AddConfigurationTileProertiess {
 export default function AddConfigurationTile({ onClick }: Readonly<AddConfigurationTileProertiess>) {
   return (
     <div
-      className="border-border hover:bg-backdrop hover:text-foreground-active relative m-2 h-50 w-40 cursor-pointer rounded border p-4"
+      className="border-border hover:bg-hover text-foreground-muted hover:text-foreground relative m-2 h-50 w-40 cursor-pointer rounded border p-4"
       onClick={onClick}
       title="New Configuration"
     >
diff --git a/src/main/frontend/app/routes/configurations/configuration-file-tile.tsx b/src/main/frontend/app/routes/configurations/configuration-file-tile.tsx
index cfc4ae0b..baef494e 100644
--- a/src/main/frontend/app/routes/configurations/configuration-file-tile.tsx
+++ b/src/main/frontend/app/routes/configurations/configuration-file-tile.tsx
@@ -2,7 +2,8 @@ import RulerCrossPenIcon from '/icons/solar/Ruler Cross Pen.svg?react'
 import TrashBinIcon from '/icons/solar/Trash Bin.svg?react'
 import CodeIcon from '/icons/solar/Code.svg?react'
 import { openInStudio, openInEditor } from '~/actions/navigationActions'
-import Button from '~/components/inputs/button'
+import IconButton from '~/components/inputs/icon-button'
+import IconLabelButton from '~/components/inputs/icon-label-button'
 import ConfirmDeleteDialog from '~/components/file-structure/confirm-delete-dialog'
 import { useState } from 'react'
 
@@ -28,7 +29,6 @@ export default function ConfigurationFileTile({
   const handleOpenInEditor = () => {
     const fileName = relativePath.split(/[/\\]/).pop()
     if (!fileName) return
-
     openInEditor(fileName, filepath)
   }
 
@@ -38,25 +38,21 @@ export default function ConfigurationFileTile({
   }
 
   return (
-    <div className="border-border bg-background relative flex h-75 w-100 flex-col rounded border p-4 shadow-sm">
-      {/* Header */}
-      <div className="text-foreground text-md mb-3 truncate font-semibold" title={relativePath}>
-        {relativePath}
+    <div className="border-border bg-background flex h-75 w-100 flex-col gap-3 rounded border p-4 shadow-sm">
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-foreground min-w-0 flex-1 truncate font-semibold" title={relativePath}>
+          {relativePath}
+        </p>
+        <IconButton title="Delete configuration" onClick={() => setShowDeleteDialog(true)}>
+          <TrashBinIcon className="text-foreground-muted group-hover:text-foreground h-4 w-4" />
+        </IconButton>
       </div>
 
-      <Button
-        onClick={() => setShowDeleteDialog(true)}
-        className="text-foreground-muted hover:text-error absolute top-3 right-3 transition hover:cursor-pointer"
-      >
-        <TrashBinIcon className="h-4 w-4 fill-current" />
-      </Button>
-
-      {/* Adapter list */}
       {adapterNames.length > 0 ? (
-        <>
-          <h1 className="text-foreground mb-2 text-xs">
-            Adapter{adapterNames.length == 1 ? '' : 's'} within this file
-          </h1>
+        <div className="flex min-h-0 flex-1 flex-col gap-2">
+          <p className="text-foreground-muted text-xs font-semibold tracking-wider uppercase">
+            {adapterNames.length === 1 ? 'Adapter' : 'Adapters'}
+          </p>
           <div className="border-border flex-1 overflow-y-auto rounded border p-2 shadow-inner">
             <ul className="space-y-2">
               {adapterNames.map((name, index) => (
@@ -69,18 +65,19 @@ export default function ConfigurationFileTile({
               ))}
             </ul>
           </div>
-        </>
+        </div>
       ) : (
-        <div className="text-muted-foreground flex-1 text-xs italic">No adapters found</div>
+        <div className="text-foreground-muted flex-1 text-sm italic">No adapters found</div>
       )}
 
-      {/* Bottom action */}
-      <div className="border-border mt-3 flex justify-center border-t">
-        <Button className="mt-3 flex items-center gap-1" onClick={handleOpenInEditor}>
-          <CodeIcon className="h-4 w-4 fill-current" />
-          <span className="whitespace-nowrap">Open in Editor</span>
-        </Button>
+      <div className="border-border flex justify-center border-t pt-4">
+        <IconLabelButton
+          icon={<CodeIcon className="h-4 w-4 fill-current" />}
+          label="Open in Editor"
+          onClick={handleOpenInEditor}
+        />
       </div>
+
       {showDeleteDialog && (
         <ConfirmDeleteDialog
           name={relativePath.split(/[/\\]/).pop() ?? relativePath}
@@ -93,28 +90,23 @@ export default function ConfigurationFileTile({
   )
 }
 
-interface AdapterListItemProps {
+interface AdapterListItemProperties {
   name: string
   adapterPosition: number
   onOpenInStudio: (name: string, adapterPosition: number) => void
 }
 
-function AdapterListItem({ name, adapterPosition, onOpenInStudio }: AdapterListItemProps) {
+function AdapterListItem({ name, adapterPosition, onOpenInStudio }: Readonly<AdapterListItemProperties>) {
   return (
-    <li className="border-border bg-background flex items-center rounded border px-2 py-1 shadow-sm">
-      {/* Adapter name – 2/3 */}
-      <span className="text-foreground border-border w-2/3 truncate border-r text-xs" title={name}>
+    <li className="border-border bg-background flex items-center justify-between gap-3 rounded border px-3 py-2 shadow-sm">
+      <span className="text-foreground min-w-0 flex-1 truncate text-sm" title={name}>
         {name}
       </span>
-
-      {/* Button – 1/3 */}
-      <button
-        className="bg-primary text-primary-foreground hover:text-foreground-active ml-2 flex w-1/3 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-medium transition hover:cursor-pointer"
+      <IconLabelButton
+        icon={<RulerCrossPenIcon className="h-4 w-4 fill-current" />}
+        label="Open in Studio"
         onClick={() => onOpenInStudio(name, adapterPosition)}
-      >
-        <RulerCrossPenIcon className="h-4 w-4 fill-current" />
-        <span className="whitespace-normal">Open in Studio</span>
-      </button>
+      />
     </li>
   )
 }
diff --git a/src/main/frontend/app/routes/configurations/configuration-overview.tsx b/src/main/frontend/app/routes/configurations/configuration-overview.tsx
index a16831ed..b415534c 100644
--- a/src/main/frontend/app/routes/configurations/configuration-overview.tsx
+++ b/src/main/frontend/app/routes/configurations/configuration-overview.tsx
@@ -159,7 +159,7 @@ export default function ConfigurationOverview() {
   if (!currentConfigurationProject) {
     return (
       <div className="bg-backdrop flex h-full w-full flex-col items-center justify-center p-6">
-        <div className="text-muted-foreground mb-4">No project selected.</div>
+        <div className="text-foreground-muted mb-4">No project selected.</div>
         <Button onClick={() => navigate('/')} className="bg-background">
           Select configuration
         </Button>
@@ -177,12 +177,12 @@ export default function ConfigurationOverview() {
 
   return (
     <div className="bg-background flex h-full w-full flex-col p-6">
-      <div className="hover:text-foreground-active flex w-fit hover:cursor-pointer" onClick={() => navigate('/')}>
-        <ArrowLeftIcon className="mb-4 h-6 w-auto fill-current hover:cursor-pointer" />
+      <div className="hover:bg-hover flex w-fit rounded px-4 py-2 hover:cursor-pointer" onClick={() => navigate('/')}>
+        <ArrowLeftIcon className="h-6 w-auto fill-current hover:cursor-pointer" />
         <p>Switch configuration</p>
       </div>
 
-      <h1 className="ml-2 text-2xl font-bold">Configuration Overview</h1>
+      <h1 className="mt-4 ml-2 text-2xl font-bold">Configuration Overview</h1>
       <div className="mb-4 flex items-center justify-between">
         <p className="ml-2">
           Configuration files within <span className="font-bold">{currentConfigurationProject.name}</span>
diff --git a/src/main/frontend/app/routes/datamapper/initialize.tsx b/src/main/frontend/app/routes/datamapper/initialize.tsx
index 7df1f53a..23c57856 100644
--- a/src/main/frontend/app/routes/datamapper/initialize.tsx
+++ b/src/main/frontend/app/routes/datamapper/initialize.tsx
@@ -67,7 +67,7 @@ function Initialize({ config, configDispatch, confirmed, setRoute }: InitializeP
       {/* Confirm Button */}
       <div className="flex justify-center" hidden={confirmed}>
         <Button
-          className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900 transition hover:brightness-110"
+          className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900"
           disabled={confirmed || !config.formatTypes.target || !config.formatTypes.source}
           onClick={() => {
             configConfirmDispatched()
diff --git a/src/main/frontend/app/routes/editor/editor.tsx b/src/main/frontend/app/routes/editor/editor.tsx
index b1656bb6..aff5ca8f 100644
--- a/src/main/frontend/app/routes/editor/editor.tsx
+++ b/src/main/frontend/app/routes/editor/editor.tsx
@@ -4,7 +4,6 @@ type ITextModel = Monaco['editor']['ITextModel']
 type FindMatch = Monaco['editor']['FindMatch']
 type IModelDeltaDecoration = Monaco['editor']['IModelDeltaDecoration']
 type IEditorDecorationsCollection = Monaco['editor']['IEditorDecorationsCollection']
-import clsx from 'clsx'
 import XsdFeatures from 'monaco-xsd-code-completion/esm/XsdFeatures'
 import 'monaco-xsd-code-completion/src/style.css'
 import XsdManager from 'monaco-xsd-code-completion/esm/XsdManager'
@@ -16,6 +15,7 @@ import EditorFileStructure from '~/components/file-structure/editor-file-structu
 import DiffTabView from '~/components/git/diff-tab-view'
 import GitPanel from '~/components/git/git-panel'
 import Button from '~/components/inputs/button'
+import SegmentedButton from '~/components/inputs/segmented-button'
 import SidebarContentClose from '~/components/sidebars-layout/sidebar-content-close'
 import SidebarHeader from '~/components/sidebars-layout/sidebar-header'
 import SidebarLayout from '~/components/sidebars-layout/sidebar-layout'
@@ -763,29 +763,17 @@ export default function CodeEditor() {
         <div className="flex h-12 items-center justify-between pr-4">
           <SidebarHeader side={SidebarSide.LEFT} title="Files" />
           {isGitRepo && (
-            <div className="border-border ml-auto flex overflow-hidden rounded border text-sm">
-              <button
-                onClick={() => setLeftTab('files')}
-                className={clsx(
-                  'cursor-pointer px-3 py-1 transition-colors',
-                  leftTab === 'files'
-                    ? 'bg-selected text-foreground font-medium'
-                    : 'hover:bg-foreground-active text-muted-foreground',
-                )}
-              >
+            <div className="border-border ml-auto flex overflow-hidden rounded border">
+              <SegmentedButton isActive={leftTab === 'files'} onClick={() => setLeftTab('files')}>
                 Files
-              </button>
-              <button
+              </SegmentedButton>
+              <SegmentedButton
+                isActive={leftTab === 'git'}
                 onClick={() => setLeftTab('git')}
-                className={clsx(
-                  'border-border cursor-pointer border-l px-3 py-1 transition-colors',
-                  leftTab === 'git'
-                    ? 'bg-selected text-foreground font-medium'
-                    : 'hover:bg-foreground-active text-muted-foreground',
-                )}
+                className="border-border border-l"
               >
                 Git
-              </button>
+              </SegmentedButton>
             </div>
           )}
         </div>
diff --git a/src/main/frontend/app/routes/help/help-image.tsx b/src/main/frontend/app/routes/help/help-image.tsx
index 8221f92e..ed7ff2f0 100644
--- a/src/main/frontend/app/routes/help/help-image.tsx
+++ b/src/main/frontend/app/routes/help/help-image.tsx
@@ -11,7 +11,7 @@ export const HelpImage: React.FC<HelpImageProps> = ({ src, alt = '', caption, wi
   return (
     <div className="my-6">
       <img src={src} alt={alt} style={{ width }} className="rounded-md border shadow-md" />
-      {caption && <p className="text-muted-foreground mt-2 text-sm">{caption}</p>}
+      {caption && <p className="text-foreground-muted mt-2 text-sm">{caption}</p>}
     </div>
   )
 }
diff --git a/src/main/frontend/app/routes/help/help.tsx b/src/main/frontend/app/routes/help/help.tsx
index 5bdde542..cb9ed502 100644
--- a/src/main/frontend/app/routes/help/help.tsx
+++ b/src/main/frontend/app/routes/help/help.tsx
@@ -32,7 +32,7 @@ export default function Help() {
             </div>
           </div>
         </div>
-        <div className="markdown-body h-full overflow-auto p-6">
+        <div className="markdown-body text-foreground h-full overflow-auto p-6">
           <div className="border-border bg-background rounded-md border p-6">
             {(MarkdownContent && <MarkdownContent />) || (
               <div>
diff --git a/src/main/frontend/app/routes/help/keybinds-table.tsx b/src/main/frontend/app/routes/help/keybinds-table.tsx
index bf3d48ea..9d24390f 100644
--- a/src/main/frontend/app/routes/help/keybinds-table.tsx
+++ b/src/main/frontend/app/routes/help/keybinds-table.tsx
@@ -6,7 +6,7 @@ import {
   type Platform,
   type ShortcutDefinition,
 } from '~/stores/shortcut-store'
-import SwitchToggle from '~/components/inputs/switch-toggle'
+import RadioList from '~/components/inputs/radio-list'
 
 const SCOPE_PREFIXES = [
   { prefix: 'studio-explorer.', scope: 'studio-file-explorer' },
@@ -62,15 +62,6 @@ export function KeybindsTable() {
 
   return (
     <div className="p-4">
-      <div className="mb-5 flex flex-col items-center">
-        <span className="mb-1 text-sm font-medium">Platform</span>
-        <SwitchToggle
-          options={['PC', 'Mac']}
-          value={platform === 'pc' ? 'PC' : 'Mac'}
-          onChange={(value) => setPlatform(value === 'PC' ? 'pc' : 'mac')}
-        />
-      </div>
-
       <div className="grid items-start gap-6 md:grid-cols-2">
         {[...grouped.entries()].map(([scope, defs]) => (
           <div key={scope} className="border-border overflow-hidden rounded-md border">
@@ -91,6 +82,15 @@ export function KeybindsTable() {
           </div>
         ))}
       </div>
+
+      <div className="mt-10 flex flex-col">
+        <span className="text-foreground-muted mb-2 text-sm font-semibold tracking-wider uppercase">Platform</span>
+        <RadioList
+          options={{ pc: 'PC', mac: 'Mac' }}
+          value={platform}
+          onChange={(value) => setPlatform(value as Platform)}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/main/frontend/app/routes/projectlanding/action-button.tsx b/src/main/frontend/app/routes/projectlanding/action-button.tsx
index c180e190..1da10bd3 100644
--- a/src/main/frontend/app/routes/projectlanding/action-button.tsx
+++ b/src/main/frontend/app/routes/projectlanding/action-button.tsx
@@ -4,11 +4,16 @@ import Button from '~/components/inputs/button'
 interface ActionButtonProperties {
   onClick?: React.MouseEventHandler<HTMLButtonElement>
   label: string
+  className?: string
 }
 
-export default function ActionButton({ onClick, label }: Readonly<ActionButtonProperties>) {
+export default function ActionButton({ onClick, label, className }: Readonly<ActionButtonProperties>) {
   return (
-    <Button className="justify-left flex border-none text-sm whitespace-nowrap" onClick={onClick}>
+    <Button
+      variant="ghost"
+      className={`w-full justify-start !rounded px-3 py-1 text-sm whitespace-nowrap ${className ?? ''}`}
+      onClick={onClick}
+    >
       {label}
     </Button>
   )
diff --git a/src/main/frontend/app/routes/projectlanding/clone-configuration-modal.tsx b/src/main/frontend/app/routes/projectlanding/clone-configuration-modal.tsx
index 48744d7f..15480621 100644
--- a/src/main/frontend/app/routes/projectlanding/clone-configuration-modal.tsx
+++ b/src/main/frontend/app/routes/projectlanding/clone-configuration-modal.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react'
 import DirectoryPicker from '~/components/directory-picker/directory-picker'
 import Button from '~/components/inputs/button'
+import CloseButton from '~/components/inputs/close-button'
+import Input from '~/components/inputs/input'
 import { filesystemService } from '~/services/filesystem-service'
 
 interface CloneProjectModalProperties {
@@ -80,15 +82,14 @@ export default function CloneConfigurationModal({
           <div className="mb-4">
             <label className="mb-1 block text-sm font-medium">Clone into</label>
             <div className="flex items-center gap-2">
-              <input
+              <Input
                 value={location || (isLocal ? '' : 'Workspace root')}
                 readOnly
-                className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"
                 placeholder={isLocal ? 'Select a parent directory...' : 'Workspace root (or browse for subfolder)'}
                 onDoubleClick={() => setShowPicker(true)}
               />
 
-              <Button onClick={() => setShowPicker(true)} className="h-8 text-sm">
+              <Button onClick={() => setShowPicker(true)} className="text-sm">
                 Browse...
               </Button>
             </div>
@@ -96,10 +97,9 @@ export default function CloneConfigurationModal({
 
           <div className="mb-4">
             <label className="mb-1 block text-sm font-medium">Repository URL</label>
-            <input
+            <Input
               value={repoUrl}
               onChange={(event) => setRepoUrl(event.target.value)}
-              className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"
               placeholder="https://github.com/user/repo.git"
               aria-label="repository url"
             />
@@ -108,11 +108,10 @@ export default function CloneConfigurationModal({
           {!isLocal && (
             <div className="mb-4">
               <label className="mb-1 block text-sm font-medium">Access Token</label>
-              <input
+              <Input
                 type="password"
                 value={token}
                 onChange={(event) => setToken(event.target.value)}
-                className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"
                 placeholder="Personal access token for private repos"
                 aria-label="access token"
               />
@@ -137,9 +136,7 @@ export default function CloneConfigurationModal({
               Clone
             </Button>
 
-            <Button onClick={handleClose} className="absolute top-3 right-3">
-              Close
-            </Button>
+            <CloseButton onClick={handleClose} className="absolute top-3 right-3" />
           </div>
         </div>
       </div>
diff --git a/src/main/frontend/app/routes/projectlanding/configuration-row.tsx b/src/main/frontend/app/routes/projectlanding/configuration-row.tsx
index edc91ed2..aa0e9fc9 100644
--- a/src/main/frontend/app/routes/projectlanding/configuration-row.tsx
+++ b/src/main/frontend/app/routes/projectlanding/configuration-row.tsx
@@ -1,6 +1,7 @@
-import CloseSquareIcon from 'icons/solar/Close Square.svg?react'
 import ArchiveIcon from '/icons/solar/Archive.svg?react'
+import TrashBinIcon from '/icons/solar/Trash Bin.svg?react'
 import type { RecentConfigurationProject } from '~/types/project.types'
+import KebabMenu, { type KebabMenuItem } from '~/components/inputs/kebab-menu'
 
 interface ConfigurationRowProperties {
   project: RecentConfigurationProject
@@ -17,9 +18,26 @@ export default function ConfigurationRow({
   onRemove,
   onExport,
 }: Readonly<ConfigurationRowProperties>) {
+  const menuItems: KebabMenuItem[] = [
+    ...(isLocal
+      ? []
+      : [
+          {
+            label: 'Export as .zip',
+            icon: <ArchiveIcon className="h-4 w-4 fill-current" />,
+            onClick: onExport,
+          },
+        ]),
+    {
+      label: 'Remove from recent',
+      icon: <TrashBinIcon className="h-4 w-4 fill-current" />,
+      onClick: onRemove,
+    },
+  ]
+
   return (
     <div
-      className="hover:bg-backdrop mb-2 flex w-full cursor-pointer items-center justify-between rounded px-3 py-1"
+      className="hover:bg-hover mb-2 flex w-full cursor-pointer items-center justify-between rounded px-3 py-1 has-[.icon-button:hover]:bg-transparent"
       onClick={onClick}
     >
       <div className="flex flex-col">
@@ -27,32 +45,7 @@ export default function ConfigurationRow({
         <p className="text-foreground-muted text-xs">{project.rootPath}</p>
       </div>
 
-      <div className="flex items-center gap-1">
-        {!isLocal && (
-          <button
-            onClick={(event) => {
-              event.stopPropagation()
-              onExport()
-            }}
-            className="text-foreground-muted cursor-pointer rounded p-2 transition-colors hover:text-blue-500"
-            aria-label="Export configuration as zip"
-            title="Export as .zip"
-          >
-            <ArchiveIcon className="h-4 w-4" />
-          </button>
-        )}
-
-        <button
-          onClick={(event) => {
-            event.stopPropagation()
-            onRemove()
-          }}
-          className="text-foreground-muted cursor-pointer rounded p-2 transition-colors hover:text-red-500"
-          aria-label="Remove from recent configurations"
-        >
-          <CloseSquareIcon className="h-4 w-4" />
-        </button>
-      </div>
+      <KebabMenu items={menuItems} />
     </div>
   )
 }
diff --git a/src/main/frontend/app/routes/projectlanding/new-configuration-modal.tsx b/src/main/frontend/app/routes/projectlanding/new-configuration-modal.tsx
index f6f070cd..5ebf17f5 100644
--- a/src/main/frontend/app/routes/projectlanding/new-configuration-modal.tsx
+++ b/src/main/frontend/app/routes/projectlanding/new-configuration-modal.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react'
 import DirectoryPicker from '~/components/directory-picker/directory-picker'
 import Button from '~/components/inputs/button'
+import CloseButton from '~/components/inputs/close-button'
+import Input from '~/components/inputs/input'
 import { filesystemService } from '~/services/filesystem-service'
 
 interface NewProjectModalProperties {
@@ -64,15 +66,14 @@ export default function NewConfigurationModal({
           <div className="mb-4">
             <label className="mb-1 block text-sm font-medium">Location</label>
             <div className="flex items-center gap-2">
-              <input
+              <Input
                 value={location || (isLocal ? '' : 'Workspace root')}
                 readOnly
-                className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"
                 placeholder={isLocal ? 'Select a parent directory...' : 'Workspace root (or browse for subfolder)'}
                 onDoubleClick={() => setShowPicker(true)}
               />
 
-              <Button onClick={() => setShowPicker(true)} className="h-8 text-sm">
+              <Button onClick={() => setShowPicker(true)} className="text-sm">
                 Browse...
               </Button>
             </div>
@@ -80,10 +81,9 @@ export default function NewConfigurationModal({
 
           <div className="mb-4">
             <label className="mb-1 block text-sm font-medium">Configuration Name</label>
-            <input
+            <Input
               value={name}
               onChange={(event) => setName(event.target.value)}
-              className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active w-full rounded border px-2 py-1 text-sm transition focus:ring-2 focus:outline-none"
               placeholder="Enter configuration name"
             />
           </div>
@@ -104,9 +104,7 @@ export default function NewConfigurationModal({
               Create Configuration
             </Button>
 
-            <Button onClick={handleClose} className="absolute top-3 right-3">
-              Close
-            </Button>
+            <CloseButton onClick={handleClose} className="absolute top-3 right-3" />
           </div>
         </div>
       </div>
diff --git a/src/main/frontend/app/routes/projectlanding/project-landing.tsx b/src/main/frontend/app/routes/projectlanding/project-landing.tsx
index 70ca29a1..c9929ad2 100644
--- a/src/main/frontend/app/routes/projectlanding/project-landing.tsx
+++ b/src/main/frontend/app/routes/projectlanding/project-landing.tsx
@@ -1,12 +1,12 @@
-import { useEffect, useState, useCallback, useRef } from 'react'
+import React, { useEffect, useState, useCallback, useRef } from 'react'
 import { useNavigate } from 'react-router'
 import FfIcon from '/icons/custom/ff!-icon.svg?react'
-import ArchiveIcon from '/icons/solar/Archive.svg?react'
+import LibraryIcon from '/icons/solar/Library.svg?react'
 import { fetchInstanceConfigurations, type FFConfiguration } from '~/services/frank-framework-service'
 import { useProjectStore } from '~/stores/project-store'
 import { ApiError } from '~/utils/api'
 import { logApiError } from '~/utils/logger'
-import {getParentPath, normalizePath} from '~/utils/path-utils'
+import { getParentPath, normalizePath } from '~/utils/path-utils'
 
 import ConfigurationRow from './configuration-row'
 import Search from '~/components/search/search'
@@ -193,10 +193,10 @@ export default function ProjectLanding() {
   if (isLoading || isOpeningProject) return <LoadingState />
 
   return (
-    <div className="bg-backdrop flex min-h-screen w-full flex-col items-center pt-20">
+    <div className="bg-backdrop flex min-h-screen w-full flex-col items-center justify-center pt-8 pb-48">
       <Header />
 
-      <main className="border-border bg-background flex min-h-100 w-2/5 flex-col rounded border shadow">
+      <main className="border-border bg-background flex min-h-100 w-full max-w-5xl flex-col rounded border shadow lg:w-3/4">
         <Toolbar onSearchChange={setSearchTerm} />
 
         <div className="flex flex-1 overflow-hidden">
@@ -218,15 +218,15 @@ export default function ProjectLanding() {
             isDiscovering={isDiscovering}
           />
         </div>
-
-        {!isLocalEnvironment && (
-          <div className="border-border border-t bg-amber-50 px-4 py-2 text-xs text-amber-600">
-            Cloud workspace projects are automatically removed after 24 hours of inactivity. After you are done please
-            use the Export functionality in the landing page to download a backup of your project.
-          </div>
-        )}
       </main>
 
+      {!isLocalEnvironment && (
+        <div className="border-border bg-warning/10 text-warning mt-3 w-full max-w-5xl rounded border px-4 py-2 text-xs lg:w-3/4">
+          Cloud workspace projects are automatically removed after 24 hours of inactivity. After you are done please use
+          the Export functionality in the landing page to download a backup of your project.
+        </div>
+      )}
+
       <NewConfigurationModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -264,9 +264,11 @@ export default function ProjectLanding() {
 }
 
 const Header = () => (
-  <header className="mb-6 flex w-2/5 items-center gap-3">
-    <FfIcon className="h-12 w-auto" />
-    <h1 className="text-lg font-semibold text-slate-800">Flow</h1>
+  <header className="mb-4 flex w-full max-w-5xl lg:w-3/4">
+    <div className="flex w-1/4 min-w-50 items-center gap-3 px-4">
+      <FfIcon className="h-10 w-auto" />
+      <h1 className="dark:text-foreground text-lg font-semibold text-black">Flow</h1>
+    </div>
   </header>
 )
 
@@ -283,11 +285,15 @@ const Sidebar = ({
   onCloneClick: () => void
   onImportClick: () => void
 }) => (
-  <nav className="border-border flex w-1/4 min-w-50 flex-col gap-3 border-r p-4">
-    <ActionButton label={isLocal ? 'Open Local Folder' : 'Open Workspace Configuration'} onClick={onOpenClick} />
-    <ActionButton label="Clone Repository" onClick={onCloneClick} />
-    <ActionButton label="New Configuration" onClick={onNewClick} />
-    {!isLocal && <ActionButton label="Import Configuration Folder" onClick={onImportClick} />}
+  <nav className="border-border flex w-1/4 min-w-50 flex-col border-r p-3">
+    <ActionButton
+      label={isLocal ? 'Open Local Folder' : 'Open Workspace Configuration'}
+      onClick={onOpenClick}
+      className="text-start"
+    />
+    <ActionButton label="Clone Repository" onClick={onCloneClick} className="text-start" />
+    <ActionButton label="New Configuration" onClick={onNewClick} className="text-start" />
+    {!isLocal && <ActionButton label="Import Configuration Folder" onClick={onImportClick} className="text-start" />}
   </nav>
 )
 
@@ -313,7 +319,7 @@ const ProjectList = ({
   <section className="h-full flex-1 overflow-y-auto p-4">
     {frameworkConfigurations.length > 0 && (
       <div className="mb-4">
-        <p className="mb-2 text-xs font-semibold tracking-wider text-slate-500 uppercase">Remote</p>
+        <p className="text-foreground mb-2 text-xs font-semibold tracking-wider uppercase">Remote</p>
         {frameworkConfigurations.map((configuration) => (
           <div
             key={configuration.name}
@@ -329,14 +335,13 @@ const ProjectList = ({
       </div>
     )}
     {isDiscovering && frameworkConfigurations.length === 0 && (
-      <p className="mb-2 text-xs text-slate-400 italic">Scanning for remote instances...</p>
+      <p className="text-foreground-muted mb-2 text-xs italic">Scanning for remote instances...</p>
     )}
     {projects.length === 0 && frameworkConfigurations.length === 0 && !isDiscovering && (
-      <p className="text-muted-foreground mt-10 text-center text-sm italic">No configurations found</p>
+      <p className="text-foreground-muted mt-10 text-center text-sm italic">No configurations found</p>
     )}
     {projects.length > 0 && (
       <>
-        <p className="mb-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">Recent</p>
         {projects.map((project) => (
           <ConfigurationRow
             key={project.rootPath}
@@ -353,18 +358,23 @@ const ProjectList = ({
 )
 
 const Toolbar = ({ onSearchChange }: { onSearchChange: (value: string) => void }) => (
-  <div className="border-border flex h-12 border-b">
-    <div className="border-border flex w-1/4 min-w-50 items-center border-r px-4 text-xs font-bold tracking-wider text-slate-500 uppercase">
-      <ArchiveIcon className="mr-2 h-4 w-4" /> Recent
+  <div className="border-border flex h-11 border-b">
+    <div className="border-border text-foreground flex w-1/4 min-w-50 items-center border-r px-4 text-xs font-bold tracking-wider uppercase">
+      <LibraryIcon className="fill-foreground h-5 w-5" />
+      <p className="ms-3 align-middle text-sm font-medium normal-case">Configurations</p>
     </div>
-    <div className="flex flex-1 items-center px-4">
-      <Search onChange={(event) => onSearchChange(event.target.value)} />
+    <div className="flex flex-1 items-center justify-center px-4">
+      <Search
+        className="w-full"
+        inputClassName="py-1"
+        onChange={(changeEvent) => onSearchChange(changeEvent.target.value)}
+      />
     </div>
   </div>
 )
 
 const LoadingState = () => (
-  <div className="flex h-screen w-full animate-pulse items-center justify-center text-slate-400">
+  <div className="text-foreground-muted flex h-screen w-full items-center justify-center">
     Initializing workspace...
   </div>
 )
diff --git a/src/main/frontend/app/routes/settings/pages/general-settings.tsx b/src/main/frontend/app/routes/settings/pages/general-settings.tsx
index d9ac5924..45370cd4 100644
--- a/src/main/frontend/app/routes/settings/pages/general-settings.tsx
+++ b/src/main/frontend/app/routes/settings/pages/general-settings.tsx
@@ -9,65 +9,61 @@ export default function GeneralSettings() {
 
   return (
     <div className="space-y-3 p-6">
-      <div className="border-border bg-background space-y-6 rounded-md border p-6">
-        <p>Customize the application to your liking</p>
+      <div className="border-border bg-background space-y-2 rounded-md border p-4">
+        <p className="font-medium">Theme</p>
+        <RadioList
+          options={{
+            light: { Light: 'Light themed' },
+            dark: { Dark: 'Dark themed' },
+            system: { System: 'Use the same theme as your system' },
+          }}
+          value={general.theme}
+          onChange={(theme) => setGeneralSettings({ theme: theme as GeneralSettingsType['theme'] })}
+        />
+      </div>
 
-        <div className="border-border space-y-2 rounded-md border p-4">
-          <p className="font-medium">Theme</p>
-          <RadioList
-            options={{
-              light: { Light: 'Light themed' },
-              dark: { Dark: 'Dark themed' },
-              system: { System: 'Use the same theme as your system' },
+      <div className="border-border bg-background space-y-4 rounded-md border p-4">
+        <p className="font-medium">Autosave</p>
+        <InputWithLabel
+          inputSide="right"
+          grow
+          htmlFor="enable-autosave"
+          label="Enable Autosave"
+          description="Automatically save changes after a period of inactivity"
+        >
+          <Toggle
+            id="enable-autosave"
+            checked={general.autoSave.enabled}
+            onChange={(checked) => setGeneralSettings({ autoSave: { ...general.autoSave, enabled: checked } })}
+          />
+        </InputWithLabel>
+        <InputWithLabel
+          inputSide="right"
+          grow
+          htmlFor="autosave-delay"
+          label="Autosave Delay"
+          description="Saves after this many milliseconds of inactivity"
+        >
+          <ValidatedInput
+            id="autosave-delay"
+            value={general.autoSave.delayMs.toString()}
+            disabled={!general.autoSave.enabled}
+            patterns={{
+              'Must be a positive whole number': /^[1-9]\d*$/,
+            }}
+            onChange={(event) => {
+              const value = event.target.value
+              if (/^[1-9]\d*$/.test(value)) {
+                setGeneralSettings({
+                  autoSave: {
+                    ...general.autoSave,
+                    delayMs: Number.parseInt(value, 10),
+                  },
+                })
+              }
             }}
-            value={general.theme}
-            onChange={(theme) => setGeneralSettings({ theme: theme as GeneralSettingsType['theme'] })}
           />
-        </div>
-
-        <div className="border-border space-y-4 rounded-md border p-4">
-          <p className="font-medium">Autosave</p>
-          <InputWithLabel
-            inputSide="right"
-            grow
-            htmlFor="enable-autosave"
-            label="Enable Autosave"
-            description="Automatically save changes after a period of inactivity"
-          >
-            <Toggle
-              id="enable-autosave"
-              checked={general.autoSave.enabled}
-              onChange={(checked) => setGeneralSettings({ autoSave: { ...general.autoSave, enabled: checked } })}
-            />
-          </InputWithLabel>
-          <InputWithLabel
-            inputSide="right"
-            grow
-            htmlFor="autosave-delay"
-            label="Autosave Delay"
-            description="Saves after this many milliseconds of inactivity"
-          >
-            <ValidatedInput
-              id="autosave-delay"
-              value={general.autoSave.delayMs.toString()}
-              disabled={!general.autoSave.enabled}
-              patterns={{
-                'Must be a positive whole number': /^[1-9]\d*$/,
-              }}
-              onChange={(event) => {
-                const value = event.target.value
-                if (/^[1-9]\d*$/.test(value)) {
-                  setGeneralSettings({
-                    autoSave: {
-                      ...general.autoSave,
-                      delayMs: Number.parseInt(value, 10),
-                    },
-                  })
-                }
-              }}
-            />
-          </InputWithLabel>
-        </div>
+        </InputWithLabel>
       </div>
     </div>
   )
diff --git a/src/main/frontend/app/routes/settings/pages/project-settings.tsx b/src/main/frontend/app/routes/settings/pages/project-settings.tsx
index 9ea99e9d..df75c1ce 100644
--- a/src/main/frontend/app/routes/settings/pages/project-settings.tsx
+++ b/src/main/frontend/app/routes/settings/pages/project-settings.tsx
@@ -49,7 +49,7 @@ export default function ProjectSettings() {
         </>
       ) : (
         // No project loaded
-        <div className="border-border bg-background text-muted-foreground flex h-64 items-center justify-center rounded-md border p-6 text-center text-sm">
+        <div className="border-border bg-background text-foreground-muted flex h-64 items-center justify-center rounded-md border p-6 text-center text-sm">
           Load a project in the&nbsp;
           <Link to="/" className="font-medium text-blue-600 hover:underline">
             Project Overview
diff --git a/src/main/frontend/app/routes/studio/canvas/flow.tsx b/src/main/frontend/app/routes/studio/canvas/flow.tsx
index 01967f94..acacd697 100644
--- a/src/main/frontend/app/routes/studio/canvas/flow.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -257,7 +257,6 @@ function FlowCanvas({ onOpenInEditor }: { onOpenInEditor: () => void }) {
   }, [])
 
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect } = useFlowStore(useShallow(selector))
-  const project = useProjectStore.getState().project
 
   const saveFlow = useCallback(async () => {
     const { nodes: flowNodes, edges: flowEdges, viewport: flowViewport } = useFlowStore.getState()
@@ -1517,7 +1516,7 @@ function FlowCanvas({ onOpenInEditor }: { onOpenInEditor: () => void }) {
           deleteKeyCode={null}
           minZoom={0.2}
         >
-          <Controls position="top-left" style={{ color: '#000' }}>
+          <Controls position="top-left">
             <ControlButton onClick={handleAutoLayout} title="Auto layout">
               <svg
                 viewBox="0 0 24 24"
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/deprecated-popover.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/deprecated-popover.tsx
index e82a6e11..8400f6c0 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/deprecated-popover.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/deprecated-popover.tsx
@@ -40,7 +40,7 @@ export function DeprecatedPopover({
         )}
 
         {deprecated.description && (
-          <li className="text-muted-foreground border-border rounded-md border p-2 pt-1">{deprecated.description}</li>
+          <li className="text-foreground-muted border-border rounded-md border p-2 pt-1">{deprecated.description}</li>
         )}
       </ul>
     </div>,
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu-item.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu-item.tsx
index 1b96ff12..8855f5f2 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu-item.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu-item.tsx
@@ -13,7 +13,7 @@ export default function HandleMenuItem({
 }: Readonly<HandleMenuItemProperties>) {
   return (
     <li
-      className={`hover:bg-border border-border flex h-10 cursor-pointer items-center justify-between p-2 ${
+      className={`hover:bg-hover border-border flex h-10 cursor-pointer items-center justify-between p-2 ${
         isLast ? '' : 'border-b'
       }`}
       onClick={onClick}
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx
index fc9ce871..defea305 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/handle-menu.tsx
@@ -57,14 +57,16 @@ export default function HandleMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="nodrag bg-background border-border absolute border shadow-md"
+      className="nodrag bg-background border-border absolute rounded border shadow-md"
       style={{
         left: `${position.x + 10}px`, // offset to the right of cursor
         top: `${position.y - 5}px`,
       }}
     >
       <div className="w-70">
-        <div className="border-border bg-muted h-10 border-b px-3 py-1 font-bold">{title}</div>
+        <div className="border-border text-foreground-muted flex h-10 items-center border-b px-3 py-1 text-xs font-semibold tracking-wide uppercase">
+          {title}
+        </div>
         <ul className="w-full">
           {handleTypes.map((type, index) => (
             <HandleMenuItem
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/missing-requirements.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/missing-requirements.tsx
index 89df861f..20c9a84c 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/components/missing-requirements.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/components/missing-requirements.tsx
@@ -59,7 +59,7 @@ export default function MissingRequirements({ missingChildren, isFulfilled }: Mi
                 {values.join(', ')}
               </div>
 
-              {expanded && <span className="hover:text-foreground-active ml-2 text-xs italic">(show less)</span>}
+              {expanded && <span className="hover:text-foreground ml-2 text-xs italic">(show less)</span>}
             </li>
           )
         })}
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
index 4350317e..d7b12694 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -476,8 +476,10 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
               : `var(${colorVariable})`,
           }}
         >
-          <h1 className="font-bold">{properties.data.subtype}</h1>
-          <p className="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{properties.data.name}</p>
+          <h1 className="text-foreground font-bold">{properties.data.subtype}</h1>
+          <p className="text-foreground overflow-hidden text-sm text-ellipsis whitespace-nowrap">
+            {properties.data.name}
+          </p>
           {isDeprecated && frankElement?.deprecated && (
             <>
               <div
@@ -501,8 +503,8 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
         {properties.data.attributes &&
           Object.entries(properties.data.attributes).map(([key, value]) => (
             <div key={key} className="my-1 w-full max-w-full px-1">
-              <p className="text-gray-1000 overflow-hidden text-sm font-bold text-ellipsis whitespace-nowrap">{key}</p>
-              <p className="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{value}</p>
+              <p className="text-foreground overflow-hidden text-sm font-bold text-ellipsis whitespace-nowrap">{key}</p>
+              <p className="text-foreground overflow-hidden text-sm text-ellipsis whitespace-nowrap">{value}</p>
             </div>
           ))}
         {(properties.data.children.length > 0 || dragOver || canDropDraggedElement) && (
@@ -556,7 +558,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
 
         {possibleChildren.length > 0 && (
           <div
-            className="hover:text-foreground-active text-foreground/30 flex cursor-pointer gap-1 self-start p-1"
+            className="hover:text-foreground text-foreground-muted flex cursor-pointer gap-1 self-start p-1"
             onClick={() => setIsModalOpen(true)}
           >
             <div className="bg-foreground/30 border-border h-4 w-4 justify-center rounded-full border text-center text-[8px] font-bold">
diff --git a/src/main/frontend/app/routes/studio/context/context-input-field.tsx b/src/main/frontend/app/routes/studio/context/context-input-field.tsx
index 6bc4da7b..0dad93c6 100644
--- a/src/main/frontend/app/routes/studio/context/context-input-field.tsx
+++ b/src/main/frontend/app/routes/studio/context/context-input-field.tsx
@@ -1,7 +1,8 @@
-// ContextInputField.tsx
 import React from 'react'
+import Dropdown from '~/components/inputs/dropdown'
 import Toggle from '~/components/inputs/toggle'
 import ValidatedInput from '~/components/inputs/validatedInput'
+import Input from '~/components/inputs/input'
 
 interface ContextInputFieldProperties {
   id: string
@@ -23,20 +24,14 @@ export default function ContextInputField({
   // Render enum dropdown
   if (enumOptions) {
     return (
-      <select
+      <Dropdown
         id={id}
         value={value}
-        onChange={(event) => onChange(event.currentTarget.value)}
-        onKeyDown={onKeyDown}
-        className="border-border bg-background focus:border-foreground-active focus:ring-foreground-active mt-1 w-full rounded-md border px-3 py-2 shadow-sm sm:text-sm"
-      >
-        <option value="">Select option…</option>
-        {Object.keys(enumOptions).map((optKey) => (
-          <option key={optKey} value={optKey}>
-            {optKey}
-          </option>
-        ))}
-      </select>
+        onChange={onChange}
+        options={Object.fromEntries(Object.keys(enumOptions).map((key) => [key, key]))}
+        placeholder="Select option…"
+        className="mt-1"
+      />
     )
   }
 
@@ -67,13 +62,13 @@ export default function ContextInputField({
 
   // Default text input
   return (
-    <input
+    <Input
       id={id}
       type="text"
       value={value}
       onChange={(event) => onChange(event.currentTarget.value)}
       onKeyDown={onKeyDown}
-      className="border-border focus:border-foreground-active mt-1 w-full rounded-md border px-3 py-2 shadow-sm focus:ring-0 focus:outline-none sm:text-sm"
+      wrapperClassName="mt-1"
     />
   )
 }
diff --git a/src/main/frontend/app/routes/studio/context/context-input.tsx b/src/main/frontend/app/routes/studio/context/context-input.tsx
index 012a2f9d..07274eff 100644
--- a/src/main/frontend/app/routes/studio/context/context-input.tsx
+++ b/src/main/frontend/app/routes/studio/context/context-input.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import HelpIcon from '/icons/solar/Help.svg?react'
 import DangerTriangle from '/icons/solar/Danger Triangle.svg?react'
 import { useJavadocTransform } from '@frankframework/doc-library-react'
@@ -37,7 +38,7 @@ export default function ContextInput({
     <div className="group font-small text-foreground relative block text-sm">
       <div className="flex items-center gap-2">
         {required && <span className="text-red-500">*</span>}
-        <label htmlFor={id} className={`${deprecated ? 'text-muted-foreground line-through' : 'text-foreground'}`}>
+        <label htmlFor={id} className={`${deprecated ? 'text-foreground-muted line-through' : 'text-foreground'}`}>
           {label}
         </label>
         {deprecated && <DeprecatedIcon deprecated={deprecated} />}
@@ -57,28 +58,43 @@ export default function ContextInput({
 }
 
 function DescriptionHelpIcon({ description, elements }: Readonly<{ description: string; elements: Elements | null }>) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null)
   const [show, setShow] = useState(false)
   const transformed = useJavadocTransform(description, elements)
 
+  const handleMouseEnter = () => {
+    if (ref.current) {
+      setAnchorRect(ref.current.getBoundingClientRect())
+      setShow(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setShow(false)
+  }
+
   return (
-    <div className="relative inline-block px-2">
-      <button
-        type="button"
-        tabIndex={-1}
-        onClick={() => setShow((previous) => !previous)}
-        className="text-blue-500 hover:text-blue-700 focus:outline-none"
-        title="Show help"
+    <>
+      <div
+        ref={ref}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className="inline-flex cursor-pointer"
       >
-        <HelpIcon className="h-auto w-[12px] fill-current" />
-      </button>
-
-      {show && (
-        <div
-          className="bg-background border-border absolute top-0 left-6 z-20 mt-0 w-84 rounded-md border px-3 py-2 text-sm shadow-lg"
-          dangerouslySetInnerHTML={transformed}
-        />
-      )}
-    </div>
+        <HelpIcon className="h-auto w-4 fill-current text-blue-500" />
+      </div>
+      {show &&
+        anchorRect &&
+        createPortal(
+          <div
+            className="bg-background text-foreground border-border fixed z-[9999] w-84 rounded-md border px-3 py-2 text-sm shadow-lg"
+            style={{ top: anchorRect.top, left: anchorRect.right + 4 }}
+            dangerouslySetInnerHTML={transformed}
+          />,
+          document.body,
+        )}
+    </>
   )
 }
 
diff --git a/src/main/frontend/app/routes/studio/context/deprecated-list-popover.tsx b/src/main/frontend/app/routes/studio/context/deprecated-list-popover.tsx
index a055ba7e..f5c0b437 100644
--- a/src/main/frontend/app/routes/studio/context/deprecated-list-popover.tsx
+++ b/src/main/frontend/app/routes/studio/context/deprecated-list-popover.tsx
@@ -9,7 +9,7 @@ export interface DeprecatedInfo {
 export function DeprecatedListPopover({ deprecated, anchorRect }: { deprecated: DeprecatedInfo; anchorRect: DOMRect }) {
   return createPortal(
     <div
-      className="bg-background text-foreground fixed z-[9999] w-64 rounded-md border border-red-400 p-3 text-xs shadow-lg transition-all"
+      className="bg-background text-foreground fixed z-[9999] w-64 rounded-md border border-red-400 p-3 text-xs shadow-lg"
       style={{
         top: anchorRect.top + anchorRect.height / 2,
         left: anchorRect.left - 260,
@@ -32,7 +32,7 @@ export function DeprecatedListPopover({ deprecated, anchorRect }: { deprecated:
         )}
 
         {deprecated.description && (
-          <li className="text-muted-foreground border-border rounded-md border p-2">{deprecated.description}</li>
+          <li className="text-foreground-muted border-border rounded-md border p-2">{deprecated.description}</li>
         )}
       </ul>
     </div>,
diff --git a/src/main/frontend/app/routes/studio/context/element-hover-card.tsx b/src/main/frontend/app/routes/studio/context/element-hover-card.tsx
index 54e2ee2c..33f33a2b 100644
--- a/src/main/frontend/app/routes/studio/context/element-hover-card.tsx
+++ b/src/main/frontend/app/routes/studio/context/element-hover-card.tsx
@@ -3,6 +3,7 @@ import { useFFDoc, useJavadocTransform } from '@frankframework/doc-library-react
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useShortcut } from '~/hooks/use-shortcut'
+import LinkButton from '~/components/inputs/link-button'
 import { frankdocChipStyle, getFirstLabelGroup } from '~/utils/flow-utils'
 import ExternalLinkIcon from '../../../../icons/solar/External Link.svg?react'
 
@@ -83,15 +84,15 @@ export default function ElementHoverCard({ anchorRect, element, onUnlock, onEnte
             </p>
             <h2 className="text-base leading-snug font-semibold">{element.name}</h2>
           </div>
-          <a
+          <LinkButton
             href={frankdocUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="border-border bg-backdrop hover:border-foreground-active hover:text-foreground-active flex shrink-0 flex-col items-center justify-center gap-1 self-stretch rounded border px-3 text-xs transition-colors"
+            className="flex shrink-0 flex-col items-center justify-center gap-1 self-stretch px-3 text-xs"
           >
             <ExternalLinkIcon className="mt-1 h-3.5 w-3.5" />
             <span>FrankDoc</span>
-          </a>
+          </LinkButton>
         </div>
 
         {/* Labels / tags — Angular-style key:value chips */}
diff --git a/src/main/frontend/app/routes/studio/context/group-context.tsx b/src/main/frontend/app/routes/studio/context/group-context.tsx
index df80766e..86757346 100644
--- a/src/main/frontend/app/routes/studio/context/group-context.tsx
+++ b/src/main/frontend/app/routes/studio/context/group-context.tsx
@@ -2,6 +2,7 @@ import useFlowStore, { isGroupNode } from '~/stores/flow-store'
 import { GROUP_COLORS, GROUP_DEFAULT_COLOR } from '~/routes/studio/canvas/nodetypes/group-node'
 import { ALL_SHORTCUTS, formatShortcutParts, useShortcutStore } from '~/stores/shortcut-store'
 import Button from '~/components/inputs/button'
+import Input from '~/components/inputs/input'
 
 export default function GroupContext({ nodeId }: Readonly<{ nodeId: string }>) {
   const node = useFlowStore((state) => state.nodes.find((node) => node.id === nodeId))
@@ -38,11 +39,9 @@ export default function GroupContext({ nodeId }: Readonly<{ nodeId: string }>) {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex flex-col gap-1">
           <label className="text-foreground-muted text-xs font-semibold tracking-wide uppercase">Name</label>
-          <input
-            type="text"
+          <Input
             value={label}
             onChange={(changeEvent) => useFlowStore.getState().setGroupnodeLabel(nodeId, changeEvent.target.value)}
-            className="border-border bg-background text-foreground focus:ring-ring w-full rounded border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
           />
         </div>
 
@@ -67,7 +66,7 @@ export default function GroupContext({ nodeId }: Readonly<{ nodeId: string }>) {
                 key={value}
                 title={colorLabel}
                 onClick={() => useFlowStore.getState().setGroupnodeColor(nodeId, value)}
-                className="h-7 w-7 rounded-full border-2 transition-transform hover:scale-110"
+                className="h-7 w-7 rounded-full border-2"
                 style={{
                   background: value,
                   borderColor: color === value ? '#3b82f6' : 'transparent',
diff --git a/src/main/frontend/app/routes/studio/context/sorted-elements.tsx b/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
index ca20219d..debd2a48 100644
--- a/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
+++ b/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
@@ -76,7 +76,7 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
     <div key={type} className="mb-2">
       <Button
         onClick={toggleExpansion}
-        className="text-foreground-muted hover:text-foreground-active hover:bg-hover flex w-full cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent px-3 py-3 text-left text-sm font-semibold capitalize transition-colors"
+        className="text-foreground-muted hover:text-foreground hover:bg-hover flex w-full cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent px-3 py-3 text-left text-sm font-semibold capitalize"
         style={{ borderLeft: `3px solid var(--palette-${type.toLowerCase()})` }}
       >
         {shouldExpand ? (
@@ -96,7 +96,7 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
             return (
               <li
                 key={value.name}
-                className="text-foreground hover:bg-hover group mb-1 flex cursor-move items-center justify-between rounded-sm py-3 pr-3 pl-3 text-sm transition-colors"
+                className="text-foreground dark:text-foreground-muted hover:text-foreground hover:bg-hover group mb-1 flex cursor-move items-center justify-between rounded-sm py-3 pr-3 pl-3 text-sm"
                 style={{ borderLeft: `3px solid var(--type-${elementType})` }}
                 draggable
                 onDragStart={(event) => {
@@ -125,7 +125,7 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
 
                 {value.deprecated && (
                   <div
-                    className="ml-2 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
+                    className="ml-2 shrink-0 opacity-60 group-hover:opacity-100"
                     onMouseEnter={(event) => {
                       const rect = event.currentTarget.getBoundingClientRect()
                       setDeprecatedRect(rect)
diff --git a/src/main/frontend/app/routes/studio/context/sticky-note-context.tsx b/src/main/frontend/app/routes/studio/context/sticky-note-context.tsx
index 742a1ddd..40deb1ba 100644
--- a/src/main/frontend/app/routes/studio/context/sticky-note-context.tsx
+++ b/src/main/frontend/app/routes/studio/context/sticky-note-context.tsx
@@ -1,6 +1,7 @@
 import useFlowStore, { isFrankNode, isStickyNote } from '~/stores/flow-store'
 import { STICKY_NOTE_COLORS } from '~/routes/studio/canvas/nodetypes/sticky-note'
 import { useShallow } from 'zustand/react/shallow'
+import Dropdown from '~/components/inputs/dropdown'
 
 export default function StickyNoteContext({ nodeId }: Readonly<{ nodeId: string }>) {
   const node = useFlowStore((flowState) => flowState.nodes.find((node) => node.id === nodeId))
@@ -32,7 +33,7 @@ export default function StickyNoteContext({ nodeId }: Readonly<{ nodeId: string
               key={value}
               title={label}
               onClick={() => useFlowStore.getState().setStickyColor(nodeId, value)}
-              className="h-7 w-7 rounded-full border-2 transition-transform hover:scale-110"
+              className="h-7 w-7 rounded-full border-2"
               style={{
                 background: value,
                 borderColor: color === value ? '#3b82f6' : 'transparent',
@@ -46,20 +47,14 @@ export default function StickyNoteContext({ nodeId }: Readonly<{ nodeId: string
 
       <div className="flex flex-col gap-1">
         <label className="text-foreground-muted text-xs font-semibold tracking-wide uppercase">Attach to node</label>
-        <select
+        <Dropdown
           value={attachedToNodeId ?? ''}
-          onChange={(changeEvent) =>
-            useFlowStore.getState().setStickyAttachment(nodeId, changeEvent.target.value || null)
-          }
-          className="border-border bg-background text-foreground focus:ring-ring w-full rounded border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
-        >
-          <option value="">None</option>
-          {frankNodes.map((node) => (
-            <option key={node.id} value={node.id}>
-              {node.data.name}
-            </option>
-          ))}
-        </select>
+          onChange={(value) => useFlowStore.getState().setStickyAttachment(nodeId, value || null)}
+          options={{
+            '': 'None',
+            ...Object.fromEntries(frankNodes.map((node) => [node.id, node.data.name])),
+          }}
+        />
       </div>
     </div>
   )
diff --git a/src/main/frontend/app/stores/flow-store.ts b/src/main/frontend/app/stores/flow-store.ts
index f96370fa..bcef36e7 100644
--- a/src/main/frontend/app/stores/flow-store.ts
+++ b/src/main/frontend/app/stores/flow-store.ts
@@ -254,7 +254,7 @@ const useFlowStore = create<FlowState>()(
       if (wouldCreateDuplicateForward(edges, connection.source, connection.target, label)) return
 
       get().saveToHistory()
-      set({ edges: addEdge({ ...connection, type: 'frankEdge', data: { label } }, get().edges) })
+      set({ edges: addEdge({ ...connection, type: 'frankEdge', animated: true, data: { label } }, get().edges) })
     },
     onReconnect: (oldEdge, newConnection) => {
       const { nodes, edges } = get()
diff --git a/src/main/frontend/app/stores/shortcut-store.ts b/src/main/frontend/app/stores/shortcut-store.ts
index f6b1a0e2..f3603028 100644
--- a/src/main/frontend/app/stores/shortcut-store.ts
+++ b/src/main/frontend/app/stores/shortcut-store.ts
@@ -59,6 +59,7 @@ function detectPlatform(): Platform {
   if (typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent)) {
     return 'mac'
   }
+
   return 'pc'
 }
 
diff --git a/src/main/frontend/icons/custom/Check.svg b/src/main/frontend/icons/custom/Check.svg
index 7e0bf37c..fb8891dd 100644
--- a/src/main/frontend/icons/custom/Check.svg
+++ b/src/main/frontend/icons/custom/Check.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="5 7 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M16.0303 10.0303C16.3232 9.73744 16.3232 9.26256 16.0303 8.96967C15.7374 8.67678 15.2626 8.67678 14.9697 8.96967L10.5 13.4393L9.03033 11.9697C8.73744 11.6768 8.26256 11.6768 7.96967 11.9697C7.67678 12.2626 7.67678 12.7374 7.96967 13.0303L9.96967 15.0303C10.2626 15.3232 10.7374 15.3232 11.0303 15.0303L16.0303 10.0303Z"/>
 </svg>
diff --git a/src/main/frontend/icons/solar/Key.svg b/src/main/frontend/icons/solar/Key.svg
new file mode 100644
index 00000000..cca50f38
--- /dev/null
+++ b/src/main/frontend/icons/solar/Key.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6809 5.34814C14.0521 5.34814 12.7265 6.66395 12.7265 8.29353C12.7265 9.92311 14.0521 11.2389 15.6809 11.2389C17.3097 11.2389 18.6353 9.92311 18.6353 8.29353C18.6353 6.66395 17.3097 5.34814 15.6809 5.34814ZM14.2265 8.29353C14.2265 7.49816 14.8748 6.84814 15.6809 6.84814C16.487 6.84814 17.1353 7.49816 17.1353 8.29353C17.1353 9.0889 16.487 9.73891 15.6809 9.73891C14.8748 9.73891 14.2265 9.0889 14.2265 8.29353Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.52998 20.8783C9.86298 20.414 9.97017 19.9429 9.96222 19.5233C10.3544 19.6387 10.7424 19.6533 11.1141 19.5828C11.8825 19.437 12.4511 18.9512 12.7527 18.5507L12.758 18.5437L12.7631 18.5366C13.2883 17.8043 13.2872 17.0543 13.1586 16.5164C13.0956 16.2528 13.0021 16.0361 12.9245 15.8846C12.8853 15.8081 12.849 15.746 12.8207 15.7005C12.8132 15.6885 12.8063 15.6775 12.7999 15.6677C12.7112 15.5021 12.6111 15.3719 12.5269 15.2737L12.5359 15.2647L13.0001 14.8024C13.3817 14.9849 13.7957 15.0999 14.1583 15.1749C14.744 15.2962 15.3171 15.3369 15.6807 15.3369C19.582 15.3369 22.75 12.1863 22.75 8.29344C22.75 4.40056 19.582 1.25 15.6807 1.25C11.7794 1.25 8.61144 4.40056 8.61144 8.29344C8.61144 9.2105 8.82018 9.99588 9.02588 10.549C9.07825 10.6898 9.13081 10.8166 9.18035 10.9279L1.92511 18.1535C1.66869 18.4089 1.36789 18.853 1.27697 19.4092C1.17837 20.0124 1.34031 20.6829 1.92511 21.2654L2.80687 22.1435C2.82046 22.1571 2.83457 22.1701 2.84916 22.1825C3.10385 22.3999 3.53164 22.6513 4.04572 22.7273C4.59712 22.8088 5.23527 22.6818 5.77579 22.1435L6.34232 21.5793C6.87523 21.8849 7.43853 21.9545 7.95941 21.8548C8.63497 21.7254 9.19686 21.321 9.51964 20.8924L9.5249 20.8854L9.52998 20.8783ZM10.1114 8.29344C10.1114 5.23477 12.602 2.75 15.6807 2.75C18.7594 2.75 21.25 5.23477 21.25 8.29344C21.25 11.3521 18.7594 13.8369 15.6807 13.8369C15.4075 13.8369 14.9372 13.8044 14.4623 13.7061C13.9654 13.6032 13.5752 13.4504 13.3674 13.2779C13.0699 13.031 12.6332 13.0508 12.3592 13.3237L11.4774 14.2019C11.2757 14.4028 11.0818 14.6305 10.9794 14.8933C10.8499 15.2261 10.8912 15.5463 11.0394 15.8121C11.1273 15.9697 11.2689 16.1202 11.3278 16.183L11.3476 16.2042C11.4173 16.2811 11.4555 16.3314 11.4834 16.387L11.5098 16.4397L11.54 16.4817L11.5468 16.4924C11.5558 16.507 11.5712 16.533 11.5895 16.5685C11.6267 16.6412 11.6709 16.7445 11.6997 16.8652C11.7544 17.0937 11.7538 17.3656 11.5494 17.6551C11.4087 17.8384 11.1424 18.0506 10.8345 18.1091C10.5769 18.1579 10.1571 18.1261 9.59673 17.5681C9.30409 17.2766 8.83089 17.2766 8.53825 17.5681L8.24433 17.8608C7.96748 18.1365 7.94891 18.5782 8.20054 18.8761C8.22363 18.9062 8.24339 18.9336 8.2668 18.9704C8.31483 19.0461 8.37128 19.1508 8.41138 19.2706C8.48694 19.4963 8.49882 19.7374 8.31639 19.9966C8.19643 20.1519 7.95303 20.3287 7.67726 20.3815C7.4429 20.4264 7.14284 20.3931 6.8045 20.0562C6.51186 19.7647 6.03866 19.7647 5.74602 20.0562L4.7173 21.0807C4.55241 21.2449 4.4068 21.2643 4.26505 21.2434C4.09729 21.2186 3.93333 21.1293 3.84077 21.0562L2.9836 20.2025C2.74543 19.9653 2.73591 19.7821 2.75733 19.6511C2.78643 19.4731 2.89711 19.3025 2.9836 19.2163L10.6279 11.6033C10.8747 11.3575 10.9185 10.9735 10.7333 10.6784L10.7311 10.6748C10.7284 10.6703 10.7232 10.6615 10.7158 10.6487C10.7012 10.6231 10.6781 10.5814 10.6494 10.5251C10.5918 10.4123 10.5122 10.2423 10.4318 10.0262C10.2701 9.59135 10.1114 8.98632 10.1114 8.29344Z"/>
+</svg>
diff --git a/src/main/frontend/icons/solar/Library.svg b/src/main/frontend/icons/solar/Library.svg
new file mode 100644
index 00000000..de7ab003
--- /dev/null
+++ b/src/main/frontend/icons/solar/Library.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" color="currentColor" fill="none" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 18C8.25 17.5858 8.58579 17.25 9 17.25H15C15.4142 17.25 15.75 17.5858 15.75 18C15.75 18.4142 15.4142 18.75 15 18.75H9C8.58579 18.75 8.25 18.4142 8.25 18Z" fill="currentColor"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.69935 1.25001H15.3004C15.5203 1.24995 15.6888 1.2499 15.8362 1.26571C17.1903 1.41104 18.2268 2.52307 18.2897 3.87013C19.4805 4.22571 20.3289 5.3275 20.3443 6.59118C20.9453 6.77151 21.4637 7.05595 21.888 7.51432C22.54 8.21857 22.7421 9.08649 22.7498 10.1003C22.7572 11.075 22.5835 12.3067 22.3678 13.8363L21.9288 16.9499C21.7602 18.146 21.6232 19.1176 21.4101 19.879C21.1871 20.6756 20.8585 21.331 20.25 21.8349C19.6463 22.3347 18.9301 22.5502 18.0835 22.6518C17.265 22.75 16.2353 22.75 14.9532 22.75H9.04687C7.76478 22.75 6.73501 22.75 5.91647 22.6518C5.06993 22.5502 4.35372 22.3347 3.75003 21.8349C3.14152 21.331 2.81286 20.6756 2.58989 19.879C2.37676 19.1176 2.23979 18.146 2.07118 16.9499L1.63219 13.8363C1.41651 12.3067 1.24283 11.075 1.25023 10.1003C1.25792 9.08649 1.45997 8.21857 2.11196 7.51432C2.53621 7.05606 3.05445 6.77164 3.65528 6.5913C3.67058 5.3275 4.51917 4.22559 5.71005 3.87007C5.77295 2.52304 6.80943 1.41104 8.16359 1.26571C8.31094 1.2499 8.4795 1.24995 8.69935 1.25001ZM5.18902 6.32785C6.11481 6.24999 7.24973 6.25 8.61594 6.25001H15.384C16.75 6.25 17.8848 6.24999 18.8105 6.32781C18.6734 5.72018 18.1306 5.25001 17.4617 5.25001H6.53787C5.86896 5.25001 5.32618 5.72019 5.18902 6.32785ZM15.6761 2.75715C16.2263 2.8162 16.6611 3.22633 16.7677 3.75001H7.2321C7.33862 3.22633 7.77344 2.8162 8.32365 2.75715C8.37993 2.75111 8.46013 2.75001 8.74099 2.75001H15.2588C15.5396 2.75001 15.6198 2.75111 15.6761 2.75715ZM3.21267 8.53336C3.51557 8.20618 3.97106 7.98917 4.85612 7.87145C5.75726 7.75159 6.96357 7.75001 8.67239 7.75001H15.3276C17.0364 7.75001 18.2427 7.75159 19.1439 7.87145C20.0289 7.98917 20.4844 8.20618 20.7873 8.53336C21.0832 8.85293 21.2436 9.28782 21.2498 10.1117C21.2563 10.9618 21.1002 12.0828 20.8738 13.6883L20.4509 16.6883C20.2731 17.9491 20.1486 18.821 19.9656 19.4747C19.7894 20.1042 19.582 20.4405 19.2934 20.6795C18.9999 20.9225 18.6058 21.0784 17.9048 21.1625C17.1861 21.2488 16.2465 21.25 14.9046 21.25H9.09536C7.75347 21.25 6.81393 21.2488 6.09519 21.1625C5.39417 21.0784 5.00014 20.9225 4.70664 20.6795C4.41795 20.4405 4.21058 20.1042 4.03437 19.4747C3.8514 18.821 3.7269 17.9491 3.54913 16.6883L3.12616 13.6883C2.89981 12.0828 2.74373 10.9618 2.75018 10.1117C2.75644 9.28782 2.91681 8.85293 3.21267 8.53336Z" fill="currentColor"></path>
+</svg>
diff --git a/src/main/frontend/icons/solar/Pen.svg b/src/main/frontend/icons/solar/Pen.svg
index 42c3852a..9d59282a 100644
--- a/src/main/frontend/icons/solar/Pen.svg
+++ b/src/main/frontend/icons/solar/Pen.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="#000000" fill="none" viewBox="0 0 24 24"><path d="M22 10.5V12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M16.652 3.45506L17.3009 2.80624C18.3759 1.73125 20.1188 1.73125 21.1938 2.80624C22.2687 3.88124 22.2687 5.62415 21.1938 6.69914L20.5449 7.34795M16.652 3.45506C16.652 3.45506 16.7331 4.83379 17.9497 6.05032C19.1662 7.26685 20.5449 7.34795 20.5449 7.34795M16.652 3.45506L10.6872 9.41993C10.2832 9.82394 10.0812 10.0259 9.90743 10.2487C9.70249 10.5114 9.52679 10.7957 9.38344 11.0965C9.26191 11.3515 9.17157 11.6225 8.99089 12.1646L8.41242 13.9M20.5449 7.34795L14.5801 13.3128C14.1761 13.7168 13.9741 13.9188 13.7513 14.0926C13.4886 14.2975 13.2043 14.4732 12.9035 14.6166C12.6485 14.7381 12.3775 14.8284 11.8354 15.0091L10.1 15.5876M10.1 15.5876L8.97709 15.9619C8.71035 16.0508 8.41626 15.9814 8.21744 15.7826C8.01862 15.5837 7.9492 15.2897 8.03811 15.0229L8.41242 13.9M10.1 15.5876L8.41242 13.9" stroke="currentColor" stroke-width="1.5"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" color="currentColor" fill="none" viewBox="0 0 24 24">
+  <path d="M11.9426 1.25L13.5 1.25C13.9142 1.25 14.25 1.58579 14.25 2C14.25 2.41421 13.9142 2.75 13.5 2.75H12C9.62177 2.75 7.91356 2.75159 6.61358 2.92637C5.33517 3.09825 4.56445 3.42514 3.9948 3.9948C3.42514 4.56445 3.09825 5.33517 2.92637 6.61358C2.75159 7.91356 2.75 9.62177 2.75 12C2.75 14.3782 2.75159 16.0864 2.92637 17.3864C3.09825 18.6648 3.42514 19.4355 3.9948 20.0052C4.56445 20.5749 5.33517 20.9018 6.61358 21.0736C7.91356 21.2484 9.62177 21.25 12 21.25C14.3782 21.25 16.0864 21.2484 17.3864 21.0736C18.6648 20.9018 19.4355 20.5749 20.0052 20.0052C20.5749 19.4355 20.9018 18.6648 21.0736 17.3864C21.2484 16.0864 21.25 14.3782 21.25 12V10.5C21.25 10.0858 21.5858 9.75 22 9.75C22.4142 9.75 22.75 10.0858 22.75 10.5V12.0574C22.75 14.3658 22.75 16.1748 22.5603 17.5863C22.366 19.031 21.9607 20.1711 21.0659 21.0659C20.1711 21.9607 19.031 22.366 17.5863 22.5603C16.1748 22.75 14.3658 22.75 12.0574 22.75H11.9426C9.63423 22.75 7.82519 22.75 6.41371 22.5603C4.96897 22.366 3.82895 21.9607 2.93414 21.0659C2.03933 20.1711 1.63399 19.031 1.43975 17.5863C1.24998 16.1748 1.24999 14.3658 1.25 12.0574V11.9426C1.24999 9.63423 1.24998 7.82519 1.43975 6.41371C1.63399 4.96897 2.03933 3.82895 2.93414 2.93414C3.82895 2.03933 4.96897 1.63399 6.41371 1.43975C7.82519 1.24998 9.63423 1.24999 11.9426 1.25ZM16.7705 2.27592C18.1384 0.908029 20.3562 0.908029 21.7241 2.27592C23.092 3.6438 23.092 5.86158 21.7241 7.22947L15.076 13.8776C14.7047 14.2489 14.4721 14.4815 14.2126 14.684C13.9069 14.9224 13.5761 15.1268 13.2261 15.2936C12.929 15.4352 12.6169 15.5392 12.1188 15.7052L9.21426 16.6734C8.67801 16.8521 8.0868 16.7126 7.68711 16.3129C7.28742 15.9132 7.14785 15.322 7.3266 14.7857L8.29477 11.8812C8.46079 11.3831 8.56479 11.071 8.7064 10.7739C8.87319 10.4239 9.07761 10.0931 9.31605 9.78742C9.51849 9.52787 9.7511 9.29529 10.1224 8.924L16.7705 2.27592ZM20.6634 3.33658C19.8813 2.55448 18.6133 2.55448 17.8312 3.33658L17.4546 3.7132C17.4773 3.80906 17.509 3.92327 17.5532 4.05066C17.6965 4.46372 17.9677 5.00771 18.48 5.51999C18.9923 6.03227 19.5363 6.30346 19.9493 6.44677C20.0767 6.49097 20.1909 6.52273 20.2868 6.54543L20.6634 6.16881C21.4455 5.38671 21.4455 4.11867 20.6634 3.33658ZM19.1051 7.72709C18.5892 7.50519 17.9882 7.14946 17.4193 6.58065C16.8505 6.01185 16.4948 5.41082 16.2729 4.89486L11.2175 9.95026C10.801 10.3668 10.6376 10.532 10.4988 10.7099C10.3274 10.9297 10.1804 11.1676 10.0605 11.4192C9.96337 11.623 9.88868 11.8429 9.7024 12.4017L9.27051 13.6974L10.3026 14.7295L11.5983 14.2976C12.1571 14.1113 12.377 14.0366 12.5808 13.9395C12.8324 13.8196 13.0703 13.6726 13.2901 13.5012C13.468 13.3624 13.6332 13.199 14.0497 12.7825L19.1051 7.72709Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
+</svg>
diff --git a/src/main/frontend/icons/solar/Refresh.svg b/src/main/frontend/icons/solar/Refresh.svg
new file mode 100644
index 00000000..f83c7c60
--- /dev/null
+++ b/src/main/frontend/icons/solar/Refresh.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.93077 11.2003C3.00244 6.23968 7.07619 2.25 12.0789 2.25C15.3873 2.25 18.287 3.99427 19.8934 6.60721C20.1103 6.96007 20.0001 7.42199 19.6473 7.63892C19.2944 7.85585 18.8325 7.74565 18.6156 7.39279C17.2727 5.20845 14.8484 3.75 12.0789 3.75C7.8945 3.75 4.50372 7.0777 4.431 11.1982L4.83138 10.8009C5.12542 10.5092 5.60029 10.511 5.89203 10.8051C6.18377 11.0991 6.18191 11.574 5.88787 11.8657L4.20805 13.5324C3.91565 13.8225 3.44398 13.8225 3.15157 13.5324L1.47176 11.8657C1.17772 11.574 1.17585 11.0991 1.46759 10.8051C1.75933 10.5111 2.2342 10.5092 2.52824 10.8009L2.93077 11.2003ZM19.7864 10.4666C20.0786 10.1778 20.5487 10.1778 20.8409 10.4666L22.5271 12.1333C22.8217 12.4244 22.8245 12.8993 22.5333 13.1939C22.2421 13.4885 21.7673 13.4913 21.4727 13.2001L21.0628 12.7949C20.9934 17.7604 16.9017 21.75 11.8825 21.75C8.56379 21.75 5.65381 20.007 4.0412 17.3939C3.82366 17.0414 3.93307 16.5793 4.28557 16.3618C4.63806 16.1442 5.10016 16.2536 5.31769 16.6061C6.6656 18.7903 9.09999 20.25 11.8825 20.25C16.0887 20.25 19.4922 16.9171 19.5625 12.7969L19.1546 13.2001C18.86 13.4913 18.3852 13.4885 18.094 13.1939C17.8028 12.8993 17.8056 12.4244 18.1002 12.1333L19.7864 10.4666Z"/>
+</svg>
diff --git a/src/main/frontend/styles/editor-files.css b/src/main/frontend/styles/editor-files.css
index c4cd3dda..105c4fe0 100644
--- a/src/main/frontend/styles/editor-files.css
+++ b/src/main/frontend/styles/editor-files.css
@@ -1,5 +1,26 @@
 @import "react-complex-tree/lib/style-modern.css";
 
+.rct-tree-item-title-container:has(.rct-tree-item-arrow:hover) .rct-tree-item-button {
+  background-color: transparent;
+}
+
+.rct-tree-item-button:has(.icon-button:hover) {
+  background-color: transparent;
+}
+
+.rct-tree-item-button {
+  transition: none;
+}
+
+.rct-tree-item-arrow {
+  align-items: center;
+}
+
+.rct-tree-item-arrow svg {
+  width: 14px;
+  height: 14px;
+}
+
 :root {
   --rct-color-tree-bg: transparent;
   --rct-item-height: 28px;
diff --git a/src/main/frontend/styles/markdown.css b/src/main/frontend/styles/markdown.css
index 78282176..ddcfdab1 100644
--- a/src/main/frontend/styles/markdown.css
+++ b/src/main/frontend/styles/markdown.css
@@ -118,7 +118,7 @@
   }
 
   h6 {
-    color: #777777;
+    color: var(--color-foreground-muted);
     font-size: 14px;
   }
 
@@ -135,7 +135,7 @@
 
   hr {
     border: 0 none;
-    color: #cccccc;
+    color: var(--color-border);
     height: 4px;
     padding: 0;
   }
@@ -246,9 +246,9 @@
   }
 
   blockquote {
-    border-left: 4px solid #dddddd;
+    border-left: 4px solid var(--color-border);
     padding: 0 15px;
-    color: #777777;
+    color: var(--color-foreground-muted);
   }
 
   blockquote > :first-child {
@@ -411,8 +411,8 @@
   }
 
   .highlight pre {
-    background-color: #f8f8f8;
-    border: 1px solid #cccccc;
+    background-color: var(--color-backdrop);
+    border: 1px solid var(--color-border);
     font-size: 13px;
     line-height: 19px;
     overflow: auto;
@@ -421,8 +421,8 @@
   }
 
   pre {
-    background-color: #f8f8f8;
-    border: 1px solid #cccccc;
+    background-color: var(--color-backdrop);
+    border: 1px solid var(--color-border);
     font-size: 13px;
     line-height: 19px;
     overflow: auto;