diff --git a/src/main/frontend/app/app.css b/src/main/frontend/app/app.css
index 39c7b627..70b27c44 100644
--- a/src/main/frontend/app/app.css
+++ b/src/main/frontend/app/app.css
@@ -233,6 +233,34 @@ 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;
+}
+
 :root {
   /* Allotment Styling */
   --focus-border: var(--color-brand);
@@ -251,3 +279,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/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/directory-picker/directory-picker.tsx b/src/main/frontend/app/components/directory-picker/directory-picker.tsx
index 32b8c75f..c5f5d55f 100644
--- a/src/main/frontend/app/components/directory-picker/directory-picker.tsx
+++ b/src/main/frontend/app/components/directory-picker/directory-picker.tsx
@@ -5,6 +5,7 @@ import { filesystemService } from '~/services/filesystem-service'
 import type { FilesystemEntry } from '~/types/filesystem.types'
 import { ApiError } from '~/utils/api'
 import Button from '../inputs/button'
+import CloseButton from '../inputs/close-button'
 
 interface DirectoryPickerProperties {
   isOpen: boolean
@@ -89,12 +90,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/editor-file-structure.tsx b/src/main/frontend/app/components/file-structure/editor-file-structure.tsx
index 5ba101f3..dc44985d 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
@@ -30,6 +30,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 './tree-action-button'
 
 const TREE_ID = 'editor-files-tree'
 
@@ -366,8 +367,6 @@ 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"
@@ -383,72 +382,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>
+            </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>
+            </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="fill-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>
+            </TreeActionButton>
           )}
         </div>
       </div>
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..5dd1458f 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,9 +21,10 @@ 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) => {
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 16676ca7..3242d9cd 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
@@ -33,6 +33,7 @@ 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 './tree-action-button'
 
 const TREE_ID = 'studio-files-tree'
 
@@ -410,7 +411,6 @@ export default function StudioFileStructure() {
     }
 
     const isHighlighted = highlightedItemId == item.index
-    const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
 
     return (
       <div
@@ -427,99 +427,54 @@ 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>
+            </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>
+            </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>
+            </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>
+            </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>
+            </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>
+    return <p className="text-foreground-muted p-4 text-sm">No configurations found in src/main/configurations</p>
 
   const toolbarBtnClass = 'cursor-pointer rounded p-1 hover:bg-hover text-foreground'
 
diff --git a/src/main/frontend/app/components/file-structure/tree-action-button.tsx b/src/main/frontend/app/components/file-structure/tree-action-button.tsx
new file mode 100644
index 00000000..5615bed8
--- /dev/null
+++ b/src/main/frontend/app/components/file-structure/tree-action-button.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+interface TreeActionButtonProps {
+  title: string
+  onAction: () => void
+  children: React.ReactNode
+}
+
+export default function TreeActionButton({ title, onAction, children }: TreeActionButtonProps) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="hover:bg-hover flex-shrink-0 cursor-pointer rounded p-0.5"
+      title={title}
+      onClick={(mouseEvent) => {
+        mouseEvent.stopPropagation()
+        onAction()
+      }}
+      onKeyDown={(keyboardEvent) => keyboardEvent.key === 'Enter' && onAction()}
+    >
+      {children}
+    </div>
+  )
+}
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..fd69de47 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 {
@@ -120,13 +122,7 @@ function CreateNodeModal({
       <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"
-          placeholder="Search elements..."
-          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"
-        />
+        <Search placeholder="Search elements..." value={search} onChange={(event) => handleOnChange(event)} />
         <div className="border-border bg-background mb-2 w-full rounded border">
           <ul className="max-h-[150px] overflow-y-auto">
             {filteredElements.length > 0 ? (
@@ -139,7 +135,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,14 +143,12 @@ 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
-        </Button>
+        <CloseButton onClick={onClose} className="absolute top-3 right-3" />
         <Button onClick={handleCreateNode}>Create Node</Button>
       </div>
     </div>
diff --git a/src/main/frontend/app/components/git/git-changes.tsx b/src/main/frontend/app/components/git/git-changes.tsx
index 67d13752..55cea6fa 100644
--- a/src/main/frontend/app/components/git/git-changes.tsx
+++ b/src/main/frontend/app/components/git/git-changes.tsx
@@ -80,7 +80,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>
@@ -130,7 +130,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..f12ef81f 100644
--- a/src/main/frontend/app/components/git/git-commit-box.tsx
+++ b/src/main/frontend/app/components/git/git-commit-box.tsx
@@ -21,7 +21,7 @@ export default function GitCommitBox({
         value={commitMessage}
         onChange={(e) => onMessageChange(e.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)) {
diff --git a/src/main/frontend/app/components/git/git-toolbar.tsx b/src/main/frontend/app/components/git/git-toolbar.tsx
index d2c292b6..2c659423 100644
--- a/src/main/frontend/app/components/git/git-toolbar.tsx
+++ b/src/main/frontend/app/components/git/git-toolbar.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import clsx from 'clsx'
 import type { GitStatus } from '~/types/git.types'
 import Button from '~/components/inputs/button'
+import Input from '~/components/inputs/input'
 
 interface GitToolbarProps {
   status: GitStatus | null
@@ -97,14 +98,13 @@ export default function GitToolbar({
       )}
       {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)}
             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..448bb4cc 100644
--- a/src/main/frontend/app/components/inputs/button.tsx
+++ b/src/main/frontend/app/components/inputs/button.tsx
@@ -1,22 +1,27 @@
 import React from 'react'
 import clsx from 'clsx'
 
+type ButtonVariant = 'default' | 'ghost'
+
+export function buttonClasses(variant: ButtonVariant = 'default', disabled?: boolean, className?: string) {
+  return clsx(
+    'text-foreground rounded-md px-4 py-2 transition-colors',
+    variant === 'default' && 'border-border bg-backdrop border',
+    variant === 'ghost' && 'border border-transparent bg-transparent',
+    !disabled && 'hover:bg-hover active:bg-selected hover:cursor-pointer',
+    disabled && 'text-foreground-muted',
+    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/close-button.tsx b/src/main/frontend/app/components/inputs/close-button.tsx
new file mode 100644
index 00000000..ac448993
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/close-button.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import clsx from 'clsx'
+import CloseIcon from '/icons/custom/Close.svg?react'
+
+interface CloseButtonProps {
+  onClick?: (event: React.MouseEvent) => void
+  className?: string
+}
+
+export default function CloseButton({ onClick, className }: Readonly<CloseButtonProps>) {
+  return (
+    <CloseIcon
+      className={clsx('fill-foreground-muted hover:fill-foreground h-5 w-auto cursor-pointer', className)}
+      onClick={onClick}
+    />
+  )
+}
diff --git a/src/main/frontend/app/components/inputs/dropdown.tsx b/src/main/frontend/app/components/inputs/dropdown.tsx
index 20aead4c..537344c0 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(() => {
@@ -179,12 +180,14 @@ export default function Dropdown({
         <div
           onClick={toggleDropdown}
           className={clsx(
-            'border-border bg-backdrop flex items-center justify-between rounded-md border px-3 py-2',
+            'border-border bg-backdrop flex items-center justify-between rounded-md border px-3 py-2 transition-colors',
             disabled ? 'cursor-not-allowed' : 'cursor-pointer',
             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/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..7f0b5feb
--- /dev/null
+++ b/src/main/frontend/app/components/inputs/kebab-menu.tsx
@@ -0,0 +1,94 @@
+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('text-foreground-muted 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 py-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..59af2185
--- /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 transition-colors',
+        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/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..b76d4e7a 100644
--- a/src/main/frontend/app/components/navbar/navbar-link.tsx
+++ b/src/main/frontend/app/components/navbar/navbar-link.tsx
@@ -27,11 +27,16 @@ export default function NavbarLink({ route, label, Icon }: Readonly<NavbarLinkPr
           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')} />
+          <Icon
+            className={clsx(
+              'h-8 w-auto',
+              isActive ? 'fill-brand' : 'fill-foreground-muted group-hover: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',
+            '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}
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..706fc54f 100644
--- a/src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx
+++ b/src/main/frontend/app/components/sidebars-layout/sidebar-close.tsx
@@ -23,7 +23,7 @@ export default function SidebarClose({ side }: Readonly<SidebarsCloseProperties>
   return (
     <SidebarIcon
       onClick={toggleVisible}
-      className={clsx('fill-foreground hover:fill-brand cursor-pointer', isLeft && 'rotate-180')}
+      className={clsx('fill-foreground-muted hover:fill-foreground cursor-pointer', isLeft && 'rotate-180')}
     ></SidebarIcon>
   )
 }
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 e972eb3b..644e18b1 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/root.tsx b/src/main/frontend/app/root.tsx
index 7e78d2b1..9647b0dd 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,7 +113,7 @@ 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">
+    <div className="text-foreground-muted flex h-screen w-full animate-pulse 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 1668a69b..0ddb180d 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'
 
@@ -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 845ccf07..f0b2b2a1 100644
--- a/src/main/frontend/app/routes/configurations/configuration-file-tile.tsx
+++ b/src/main/frontend/app/routes/configurations/configuration-file-tile.tsx
@@ -71,7 +71,7 @@ export default function ConfigurationFileTile({
           </div>
         </>
       ) : (
-        <div className="text-muted-foreground flex-1 text-xs italic">No adapters found</div>
+        <div className="text-foreground-muted flex-1 text-xs italic">No adapters found</div>
       )}
 
       {/* Bottom action */}
@@ -109,7 +109,7 @@ function AdapterListItem({ name, adapterPosition, onOpenInStudio }: AdapterListI
 
       {/* 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"
+        className="text-foreground hover:bg-hover 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"
         onClick={() => onOpenInStudio(name, adapterPosition)}
       >
         <RulerCrossPenIcon className="h-4 w-4 fill-current" />
diff --git a/src/main/frontend/app/routes/configurations/configuration-overview.tsx b/src/main/frontend/app/routes/configurations/configuration-overview.tsx
index 71fc20aa..f981e077 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 src/main/configurations/
diff --git a/src/main/frontend/app/routes/editor/editor.tsx b/src/main/frontend/app/routes/editor/editor.tsx
index 0c2193c2..5b84637f 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/projectlanding/action-button.tsx b/src/main/frontend/app/routes/projectlanding/action-button.tsx
index c180e190..b39b26c6 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-none 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..2da28637 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,27 @@ 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,
+      className: 'text-red-500',
+    },
+  ]
+
   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"
       onClick={onClick}
     >
       <div className="flex flex-col">
@@ -27,32 +46,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 daa5604f..97e7a4ae 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 626547b3..4be7f610 100644
--- a/src/main/frontend/app/routes/projectlanding/project-landing.tsx
+++ b/src/main/frontend/app/routes/projectlanding/project-landing.tsx
@@ -1,7 +1,7 @@
-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'
 
@@ -188,10 +188,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">
@@ -213,15 +213,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)}
@@ -259,9 +259,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>
 )
 
@@ -278,11 +280,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 py-2">
+    <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>
 )
 
@@ -308,7 +314,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}
@@ -324,14 +330,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}
@@ -348,18 +353,19 @@ const ProjectList = ({
 )
 
 const Toolbar = ({ onSearchChange }: { onSearchChange: (val: 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={(e) => onSearchChange(e.target.value)} />
+    <div className="flex flex-1 items-center justify-center px-4">
+      <Search className="w-full" inputClassName="py-1" onChange={(e) => onSearchChange(e.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 animate-pulse items-center justify-center">
     Initializing workspace...
   </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 39732ce6..3db22c7d 100644
--- a/src/main/frontend/app/routes/studio/canvas/flow.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -1495,7 +1495,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..d5c90cc0 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 transition-colors ${
         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..cf65e176 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
@@ -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..b28633a1 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>
 
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 871e1281..f6f878d2 100644
--- a/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
+++ b/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
@@ -75,7 +75,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 transition-colors"
         style={{ borderLeft: `3px solid var(--palette-${type.toLowerCase()})` }}
       >
         {shouldExpand ? (
@@ -95,7 +95,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 transition-colors"
                 style={{ borderLeft: `3px solid var(--type-${elementType})` }}
                 draggable
                 onDragStart={(event) => {
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..43ab632f 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))
@@ -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/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/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;