diff --git a/src/components/Label/Label.css b/src/components/Label/Label.css
deleted file mode 100644
index f52ed4a3..00000000
--- a/src/components/Label/Label.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.label {
-  white-space: nowrap;
-  display: inline-block;
-  margin: 2px;
-  color: #eee;
-}
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 9d66b372..b9cd380c 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,17 +1,16 @@
+import { type ReactNode, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { contrast, hslColorToCss, hslToHex } from "./color-utils";
-import "./Label.css";
-import { useMemo } from "react";
 
 export function Label({
   label,
-  icon = "",
+  endSlot,
   className = "",
   variant = "filled",
   showTooltip = false,
 }: {
   label: string;
-  icon?: string;
+  endSlot?: ReactNode;
   className?: string;
   variant?: "filled" | "outlined";
   showTooltip?: boolean;
@@ -22,29 +21,34 @@ export function Label({
 
   const style = useMemo(
     () => ({
-      backgroundColor: variant === "filled" ? mainColor.hex : hslColorToCss(dimmedMainColor.hsl),
-      color: variant === "filled" ? contrastMainColor : mainColor.hex,
+      "--dark-bg-color": hslColorToCss(variant === "filled" ? mainColor.hsl : dimmedMainColor.dark),
+      "--light-bg-color": hslColorToCss(variant === "filled" ? mainColor.hsl : dimmedMainColor.light),
+      "--dark-text-color": variant === "filled" ? contrastMainColor : mainColor.hex,
+      "--light-text-color": variant === "filled" ? contrastMainColor : "#000000",
       border: variant === "filled" ? "1px solid transparent" : `1px solid ${mainColor.hex}`,
     }),
-    [dimmedMainColor, contrastMainColor, variant, mainColor],
+    [contrastMainColor, variant, mainColor, dimmedMainColor],
   );
 
   return (
     <span
       style={style}
-      className={twMerge("label truncate rounded-xl px-2.5 py-0.5", className)}
+      className={twMerge(
+        "label inline-flex items-center min-w-0 max-w-full rounded-xl px-2.5 py-0.5 bg-[var(--light-bg-color)] dark:bg-[var(--dark-bg-color)] text-[var(--light-text-color)] dark:text-[var(--dark-text-color)]",
+        className,
+      )}
       title={showTooltip ? label : undefined}
     >
-      {icon} {label}
+      <span className="truncate">{label}</span>
+      {endSlot}
     </span>
   );
 }
 
 function dimColor(mainColor: { hsl: [number, number, number] }) {
-  const newDimmedSaturation = mainColor.hsl[1] * 0.75;
-  const newDimmedLightness = mainColor.hsl[2] / 5;
-  const newHsl = [mainColor.hsl[0], newDimmedSaturation, newDimmedLightness] as [number, number, number];
-  return { hsl: newHsl };
+  const darkColor = [mainColor.hsl[0], mainColor.hsl[1] * 0.75, mainColor.hsl[2] / 5] as [number, number, number];
+  const lightColor = [mainColor.hsl[0], 80, 90] as [number, number, number];
+  return { dark: darkColor, light: lightColor };
 }
 
 function bestTextColor(bgHex: string) {
diff --git a/src/components/NoteManager/NoteManager.css b/src/components/NoteManager/NoteManager.css
index f9c51c89..4c3a15d8 100644
--- a/src/components/NoteManager/NoteManager.css
+++ b/src/components/NoteManager/NoteManager.css
@@ -24,19 +24,6 @@
 }
 
 
-.note-manager .new-note button {
-  width: 100%;
-}
-
-.note-manager textarea,
-.note-manager input {
-  padding: 1rem;
-  resize: vertical;
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: 6px;
-}
-
 .note-manager .validation-message {
   padding-bottom: 10px;
   color: #f22;
diff --git a/src/components/NoteManager/NoteManager.tsx b/src/components/NoteManager/NoteManager.tsx
index e60599cc..fb95a95f 100644
--- a/src/components/NoteManager/NoteManager.tsx
+++ b/src/components/NoteManager/NoteManager.tsx
@@ -1,5 +1,6 @@
 import { memo, useCallback, useContext, useEffect, useState } from "react";
 import "./NoteManager.css";
+import { Button, Textarea } from "@fluffylabs/shared-ui";
 import { twMerge } from "tailwind-merge";
 import { validateMath } from "../../utils/validateMath";
 import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
@@ -75,8 +76,8 @@ function Notes() {
 
   return (
     <div className="note-manager flex flex-col gap-2.5" style={{ opacity: notesReady ? 1.0 : 0.3 }}>
-      <div className="new-note">
-        <textarea
+      <div className="flex flex-col p-2 gap-2">
+        <Textarea
           disabled={selectedBlocks.length === 0}
           className={noteContentError ? "error" : ""}
           autoFocus
@@ -86,9 +87,9 @@ function Notes() {
         />
 
         {noteContentError ? <div className="validation-message">{noteContentError}</div> : null}
-        <button disabled={noteContent.length < 1} onClick={handleAddNoteClick} className="default-button">
+        <Button disabled={noteContent.length < 1} onClick={handleAddNoteClick} variant="secondary">
           Add
-        </button>
+        </Button>
       </div>
 
       <MemoizedNotesList
diff --git a/src/components/NoteManager/components/Note.css b/src/components/NoteManager/components/Note.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/NoteManager/components/Note.tsx b/src/components/NoteManager/components/Note.tsx
index eeee8424..94860d5b 100644
--- a/src/components/NoteManager/components/Note.tsx
+++ b/src/components/NoteManager/components/Note.tsx
@@ -1,14 +1,13 @@
+import { Button, cn } from "@fluffylabs/shared-ui";
 import { type ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { validateMath } from "../../../utils/validateMath";
+import { useLocationContext } from "../../LocationProvider/LocationProvider";
 import type { INotesContext } from "../../NotesProvider/NotesProvider";
 import { type IDecoratedNote, NoteSource } from "../../NotesProvider/types/DecoratedNote";
 import type { IStorageNote } from "../../NotesProvider/types/StorageNote";
-import { NoteLabels } from "./NoteLabels";
-import { NoteLink } from "./NoteLink";
-import "./Note.css";
-import { Button, cn } from "@fluffylabs/shared-ui";
-import { useLocationContext } from "../../LocationProvider/LocationProvider";
 import { NoteLayout } from "./NoteLayout";
+import { NoteLink } from "./NoteLink";
+import { TinyIconButton } from "./SiimpleComponents";
 
 export type NotesItem = {
   location: string; // serialized InDocSelection
@@ -55,12 +54,13 @@ export function Note({ note, active = false, onEditNote, onDeleteNote }: NotePro
     setNoteContentError("");
   }, [note, isEditable]);
 
-  const handleNoteContentChange = useCallback(
-    (ev: ChangeEvent<HTMLTextAreaElement>) => {
-      setNoteDirty({ ...noteDirty, content: ev.currentTarget.value });
-    },
-    [noteDirty],
-  );
+  const handleNoteLabelsChange = useCallback((labels: string[]) => {
+    setNoteDirty((prevNoteDirty) => ({ ...prevNoteDirty, labels }));
+  }, []);
+
+  const handleNoteContentChange = useCallback((ev: ChangeEvent<HTMLTextAreaElement>) => {
+    setNoteDirty((prev) => ({ ...prev, content: ev.currentTarget.value }));
+  }, []);
 
   const handleDeleteClick = useCallback(() => {
     onDeleteNote(note);
@@ -128,6 +128,7 @@ export function Note({ note, active = false, onEditNote, onDeleteNote }: NotePro
       isEditing,
       noteDirty,
       handleNoteContentChange,
+      handleNoteLabelsChange,
     }),
     [
       note,
@@ -139,6 +140,7 @@ export function Note({ note, active = false, onEditNote, onDeleteNote }: NotePro
       isEditing,
       noteDirty,
       handleNoteContentChange,
+      handleNoteLabelsChange,
     ],
   );
 
@@ -166,20 +168,11 @@ export function Note({ note, active = false, onEditNote, onDeleteNote }: NotePro
         {active && !isEditing && (
           <>
             <NoteLayout.SelectedText />
-            <NoteLabels note={note} />
             <NoteLayout.Text />
+            <NoteLayout.Labels />
             {isEditable && (
               <div className="flex flex-1 justify-end">
-                <Button
-                  variant="ghost"
-                  intent="neutralStrong"
-                  className="p-2 h-6 -top-0.5 relative"
-                  data-testid={"edit-button"}
-                  onClick={handleEditClick}
-                  aria-label="Edit note"
-                >
-                  ✏️
-                </Button>
+                <TinyIconButton data-testid={"edit-button"} onClick={handleEditClick} aria-label="Edit note" icon="✏️" />
               </div>
             )}
           </>
@@ -188,9 +181,9 @@ export function Note({ note, active = false, onEditNote, onDeleteNote }: NotePro
           <>
             <>
               <NoteLayout.SelectedText />
-              <NoteLabels note={note} />
               <NoteLayout.TextArea className={noteContentError ? "error" : ""} />
               {noteContentError ? <div className="validation-message">{noteContentError}</div> : null}
+              <NoteLayout.Labels />
               <div className="actions gap-2">
                 <Button variant="ghost" intent="destructive" size="sm" onClick={handleDeleteClick}>
                   Delete
diff --git a/src/components/NoteManager/components/NoteContext.tsx b/src/components/NoteManager/components/NoteContext.tsx
index b71aef02..d0f1c950 100644
--- a/src/components/NoteManager/components/NoteContext.tsx
+++ b/src/components/NoteManager/components/NoteContext.tsx
@@ -1,6 +1,7 @@
 import { type ChangeEvent, createContext, useContext } from "react";
 import type { INotesContext } from "../../NotesProvider/NotesProvider";
 import type { IDecoratedNote } from "../../NotesProvider/types/DecoratedNote";
+import type { IStorageNote } from "../../NotesProvider/types/StorageNote";
 
 export const noteContext = createContext<{
   note: IDecoratedNote;
@@ -9,7 +10,8 @@ export const noteContext = createContext<{
   handleSaveClick: () => void;
   handleCancelClick: () => void;
   handleNoteContentChange: (ev: ChangeEvent<HTMLTextAreaElement>) => void;
-  noteDirty: { content: string };
+  handleNoteLabelsChange: (labels: string[]) => void;
+  noteDirty: IStorageNote;
   onEditNote: INotesContext["handleUpdateNote"];
   isEditing: boolean;
 } | null>(null);
diff --git a/src/components/NoteManager/components/NoteLabels.tsx b/src/components/NoteManager/components/NoteLabels.tsx
index 275ef5d6..b48f9d91 100644
--- a/src/components/NoteManager/components/NoteLabels.tsx
+++ b/src/components/NoteManager/components/NoteLabels.tsx
@@ -1,50 +1,223 @@
-import { type ChangeEventHandler, useCallback, useState } from "react";
+import { type Input, Popover, PopoverContent, cn } from "@fluffylabs/shared-ui";
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { CircleX } from "lucide-react";
+import { type ComponentProps, useContext, useMemo, useRef, useState } from "react";
 import { Label } from "../../Label/Label";
+import { type INotesContext, NotesContext } from "../../NotesProvider/NotesProvider";
 import { prefixLabel } from "../../NotesProvider/hooks/useLabels";
-import type { IDecoratedNote } from "../../NotesProvider/types/DecoratedNote";
+import { useNoteContext } from "./NoteContext";
+import { NoteSimpleInput, TinyIconButton } from "./SiimpleComponents";
 
-type NoteLabelsProps = {
-  note: IDecoratedNote;
-};
+export function NoteLabels() {
+  const { note, isEditing, noteDirty, handleNoteLabelsChange } = useNoteContext();
+
+  const labels = isEditing ? noteDirty.labels : note.original.labels;
 
-export function NoteLabels({ note }: { note: IDecoratedNote }) {
   return (
-    <div className="labels">
-      {note.original.labels.map((label) => (
-        <Label key={label} label={prefixLabel(note.source, label)} variant="outlined" />
+    <div className="labels items-start justify-start flex gap-x-1 gap-y-1 flex-wrap">
+      {labels.map((label) => (
+        <Label
+          key={label}
+          label={prefixLabel(note.source, label)}
+          variant="outlined"
+          className="flex gap-1"
+          endSlot={
+            isEditing && (
+              <TinyIconButton
+                icon={<CircleX style={{ zoom: 0.5 }} />}
+                aria-label="remove"
+                className="p-0.5 h-4 relative top-0 hover:text-destructive"
+                onClick={() => handleNoteLabelsChange([...noteDirty.labels.filter((l) => l !== label)])}
+              />
+            )
+          }
+        />
       ))}
+      {isEditing && <NoteLabelsEdit />}
     </div>
   );
 }
 
-type NoteLabelsEditProps = NoteLabelsProps & {
-  onNewLabels: (labels: string[]) => void;
-};
+function NoteLabelsEdit() {
+  const { noteDirty, handleNoteLabelsChange } = useNoteContext();
+  const { labels } = useContext(NotesContext) as INotesContext;
+  const [currentInput, setCurrentInput] = useState("");
 
-const SEPARATOR = ",";
-const JOINER = ", ";
-
-export function NoteLabelsEdit({ note, onNewLabels }: NoteLabelsEditProps) {
-  const labels = note.original.labels.join(JOINER);
-  const [currentInput, setCurrentInput] = useState(labels);
-
-  const updateLabels = useCallback<ChangeEventHandler<HTMLInputElement>>(
-    (e) => {
-      const labels = e.target.value;
-      setCurrentInput(labels);
-      const newLabels = labels.split(SEPARATOR).map((l) => l.trim());
-      onNewLabels(newLabels);
-    },
-    [onNewLabels],
+  const visibleLabels = useMemo(
+    () =>
+      labels
+        .filter((label) => label.prefixedLabel === "local")
+        .flatMap((label) => label.children.map((child) => child.prefixedLabel))
+        .filter((label) => !noteDirty.labels.some((dirtyLabel) => `local/${dirtyLabel}` === label))
+        .filter((label) => label.toLocaleLowerCase().includes(currentInput.toLocaleLowerCase())),
+    [currentInput, noteDirty.labels, labels],
   );
 
+  const handleSelectLabel = (value: string) => {
+    const isValid = value !== "";
+
+    if (!isValid) {
+      return;
+    }
+
+    if (value) {
+      const newUniqueLabels = new Set(noteDirty.labels);
+      newUniqueLabels.add(value);
+      handleNoteLabelsChange(Array.from(newUniqueLabels));
+      setCurrentInput("");
+    }
+  };
+
+  const handleBackspace = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.currentTarget.value !== "") {
+      return;
+    }
+
+    const withRemovedLastItem = noteDirty.labels.slice(0, -1);
+    handleNoteLabelsChange(withRemovedLastItem);
+    requestAnimationFrame(() => {
+      setCurrentInput(noteDirty.labels.at(-1) || "");
+    });
+  };
+
   return (
-    <input
-      className="labels-edit"
-      onChange={updateLabels}
-      placeholder="comma (,) - separated labels"
-      type="text"
+    <NoteInputWithDropdown
+      visibleLabels={visibleLabels}
+      onSelectLabel={handleSelectLabel}
+      onDoubleBackspace={handleBackspace}
       value={currentInput}
+      onChange={(e) => setCurrentInput(e.currentTarget.value)}
     />
   );
 }
+
+type NoteInputProps = ComponentProps<typeof Input> & {
+  onSelectLabel?: (value: string) => void;
+  onDoubleBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  visibleLabels: string[];
+};
+
+const NoteInputWithDropdown = (props: NoteInputProps) => {
+  const { onKeyDown, onSelectLabel, onDoubleBackspace, visibleLabels, className, ...restOfProps } = props;
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isInBackspace, setIsInBackspace] = useState(false);
+  const inBackspaceTimeoutRef = useRef<NodeJS.Timeout>(undefined);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      if (open && visibleLabels[selectedIndex]) {
+        handleItemSelect(visibleLabels[selectedIndex]);
+        event.preventDefault();
+      } else if (event.currentTarget.value.trim()) {
+        onSelectLabel?.(event.currentTarget.value);
+        event.currentTarget.value = "";
+        restOfProps.onChange?.({ currentTarget: { value: "" } } as React.ChangeEvent<HTMLInputElement>);
+      }
+    } else if (event.key === "Backspace") {
+      if (isInBackspace) {
+        onDoubleBackspace?.(event);
+        clearTimeout(inBackspaceTimeoutRef.current);
+        setIsInBackspace(false);
+      } else if (inputRef.current?.value.length === 0) {
+        setIsInBackspace(true);
+        inBackspaceTimeoutRef.current = setTimeout(() => setIsInBackspace(false), 1500);
+      }
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+      } else {
+        setSelectedIndex((prev) => (prev + 1) % visibleLabels.length);
+      }
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (open) {
+        setSelectedIndex((prev) => (prev - 1 + visibleLabels.length) % visibleLabels.length);
+      }
+    }
+
+    onKeyDown?.(event);
+  };
+
+  const handleInputFocus = () => {
+    setOpen(true);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    restOfProps.onChange?.(e);
+    setOpen(true);
+    setSelectedIndex(0);
+  };
+
+  const handleItemSelect = (value: string) => {
+    if (inputRef.current) {
+      onSelectLabel?.(value.replace("local/", ""));
+      inputRef.current.value = "";
+      restOfProps.onChange?.({ currentTarget: { value: "" } } as React.ChangeEvent<HTMLInputElement>);
+      inputRef.current.focus();
+    }
+  };
+
+  return (
+    <Popover open={open && visibleLabels.length > 0} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <NoteSimpleInput
+          ref={inputRef}
+          {...restOfProps}
+          intent={isInBackspace ? "warning" : "neutral"}
+          className={cn(
+            "inline max-w-38 px-2 py-1 ml-[2px] mt-0.5 ring-0 text-xs",
+            isInBackspace && "dark:placeholder:text-warning placeholder:text-warning-foreground",
+            className,
+          )}
+          placeholder={isInBackspace ? "Backspace to remove" : "Add label"}
+          onKeyDown={handleKeyDown}
+          onFocus={handleInputFocus}
+          onChange={handleInputChange}
+          onClick={() => setOpen(true)}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        className="min-w-[100px] max-w-[300px] w-auto p-0"
+        align="end"
+        sideOffset={5}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+        }}
+        onInteractOutside={(e) => {
+          const target = e.target as HTMLElement;
+          if (target === inputRef.current) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <div className="max-h-[200px] overflow-auto">
+          {visibleLabels.map((item, index) => (
+            // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard events are indirectly handled via input;
+            <div
+              key={item}
+              className={`px-2 py-1.5 text-sm cursor-pointer transition-colors ${
+                index === selectedIndex
+                  ? "bg-accent text-accent-foreground"
+                  : "hover:bg-accent hover:text-accent-foreground"
+              }`}
+              onClick={() => handleItemSelect(item)}
+              onMouseEnter={() => setSelectedIndex(index)}
+              role="option"
+              aria-selected={index === selectedIndex}
+            >
+              <Label label={item} variant="outlined" />
+            </div>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/src/components/NoteManager/components/NoteLayout.tsx b/src/components/NoteManager/components/NoteLayout.tsx
index 0a50985f..6c6958a9 100644
--- a/src/components/NoteManager/components/NoteLayout.tsx
+++ b/src/components/NoteManager/components/NoteLayout.tsx
@@ -1,9 +1,11 @@
-import { Textarea, cn } from "@fluffylabs/shared-ui";
+import type { Textarea } from "@fluffylabs/shared-ui";
 import { type ComponentProps, useContext, useRef } from "react";
 import { NoteContent } from "../../NoteContent/NoteContent";
 import { type ISelectionContext, SelectionContext } from "../../SelectionProvider/SelectionProvider";
 import { noteContext, useNoteContext } from "./NoteContext";
+import { NoteLabels } from "./NoteLabels";
 import { NoteLink } from "./NoteLink";
+import { NoteSimpleTextarea } from "./SiimpleComponents";
 
 export const NoteText = () => {
   const { note } = useNoteContext();
@@ -33,7 +35,6 @@ export const SelectedText = () => {
 };
 
 export const NoteTextArea = (props: ComponentProps<typeof Textarea>) => {
-  const { className, ...restOfProps } = props;
   const { handleSaveClick, handleCancelClick, noteDirty, handleNoteContentChange } = useNoteContext();
   const ref = useRef<HTMLTextAreaElement>(null);
 
@@ -50,14 +51,13 @@ export const NoteTextArea = (props: ComponentProps<typeof Textarea>) => {
   };
 
   return (
-    <Textarea
-      {...restOfProps}
+    <NoteSimpleTextarea
+      {...props}
       ref={ref}
       autoFocus
       onKeyDown={handleKeyDown}
       value={noteDirty.content}
       onChange={handleNoteContentChange}
-      className={cn("dark:border-[#728D8D] dark:bg-[#475959] bg-[#eef4f4] border-[#a7bbbb]", className)}
     />
   );
 };
@@ -67,4 +67,5 @@ export const NoteLayout = {
   Text: NoteText,
   TextArea: NoteTextArea,
   SelectedText: SelectedText,
+  Labels: NoteLabels,
 };
diff --git a/src/components/NoteManager/components/SiimpleComponents/Input.tsx b/src/components/NoteManager/components/SiimpleComponents/Input.tsx
new file mode 100644
index 00000000..4a823721
--- /dev/null
+++ b/src/components/NoteManager/components/SiimpleComponents/Input.tsx
@@ -0,0 +1,10 @@
+import { Input } from "@fluffylabs/shared-ui";
+import { cn } from "@fluffylabs/shared-ui";
+import type { ComponentProps } from "react";
+import { inputClassNames } from "./common";
+
+export const NoteSimpleInput = (props: ComponentProps<typeof Input>) => {
+  const { className, ...restOfProps } = props;
+
+  return <Input {...restOfProps} className={cn(inputClassNames, className)} />;
+};
diff --git a/src/components/NoteManager/components/SiimpleComponents/Textarea.tsx b/src/components/NoteManager/components/SiimpleComponents/Textarea.tsx
new file mode 100644
index 00000000..c0c2b739
--- /dev/null
+++ b/src/components/NoteManager/components/SiimpleComponents/Textarea.tsx
@@ -0,0 +1,10 @@
+import { Textarea } from "@fluffylabs/shared-ui";
+import { cn } from "@fluffylabs/shared-ui";
+import type { ComponentProps } from "react";
+import { inputClassNames } from "./common";
+
+export const NoteSimpleTextarea = (props: ComponentProps<typeof Textarea>) => {
+  const { className, ...restOfProps } = props;
+
+  return <Textarea {...restOfProps} className={cn(inputClassNames, className)} />;
+};
diff --git a/src/components/NoteManager/components/SiimpleComponents/TinyIconButton.tsx b/src/components/NoteManager/components/SiimpleComponents/TinyIconButton.tsx
new file mode 100644
index 00000000..12d99f50
--- /dev/null
+++ b/src/components/NoteManager/components/SiimpleComponents/TinyIconButton.tsx
@@ -0,0 +1,25 @@
+import { Button, cn } from "@fluffylabs/shared-ui";
+import type { ComponentProps } from "react";
+
+export const TinyIconButton = (
+  props: {
+    icon: React.ReactNode;
+    "aria-label": string;
+    "data-testid"?: string;
+  } & ComponentProps<typeof Button>,
+) => {
+  const { icon, "aria-label": ariaLabel, "data-testid": dataTestId, className, ...restOfProps } = props;
+
+  return (
+    <Button
+      variant="ghost"
+      intent="neutralMedium"
+      className={cn("p-2 h-6 -top-0.5 relative", className)}
+      data-testid={dataTestId}
+      aria-label={ariaLabel}
+      {...restOfProps}
+    >
+      {icon}
+    </Button>
+  );
+};
diff --git a/src/components/NoteManager/components/SiimpleComponents/common.ts b/src/components/NoteManager/components/SiimpleComponents/common.ts
new file mode 100644
index 00000000..b8cce7b7
--- /dev/null
+++ b/src/components/NoteManager/components/SiimpleComponents/common.ts
@@ -0,0 +1 @@
+export const inputClassNames = "dark:border-[#728D8D] dark:bg-[#475959] bg-[#eef4f4] border-[#a7bbbb]";
diff --git a/src/components/NoteManager/components/SiimpleComponents/index.ts b/src/components/NoteManager/components/SiimpleComponents/index.ts
new file mode 100644
index 00000000..e4786239
--- /dev/null
+++ b/src/components/NoteManager/components/SiimpleComponents/index.ts
@@ -0,0 +1,3 @@
+export { NoteSimpleInput } from "./Input";
+export { NoteSimpleTextarea } from "./Textarea";
+export { TinyIconButton } from "./TinyIconButton";
diff --git a/src/components/PdfViewer/NoteRenderer/components/HighlightNote/HighlightNote.tsx b/src/components/PdfViewer/NoteRenderer/components/HighlightNote/HighlightNote.tsx
index 8f060621..48521eb1 100644
--- a/src/components/PdfViewer/NoteRenderer/components/HighlightNote/HighlightNote.tsx
+++ b/src/components/PdfViewer/NoteRenderer/components/HighlightNote/HighlightNote.tsx
@@ -2,7 +2,6 @@ import "./HighlightNote.css";
 import { Fragment, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { CodeSyncContext, type ICodeSyncContext } from "../../../../CodeSyncProvider/CodeSyncProvider";
 import { NoteContent } from "../../../../NoteContent/NoteContent";
-import { NoteLabels } from "../../../../NoteManager/components/NoteLabels";
 import type { IDecoratedNote } from "../../../../NotesProvider/types/DecoratedNote";
 import { Highlighter } from "../../../Highlighter/Highlighter";
 
@@ -109,7 +108,7 @@ export function HighlightNote({ notes, pageOffset, isInViewport, isPinnedByDefau
         </a>
         {notes.map((note) => (
           <Fragment key={note.key}>
-            <NoteLabels note={note} />
+            {/*<NoteLabels note={note} />*/}
             {note.original.author}
             <NoteContent content={note.original.content} />
             <br />
diff --git a/src/components/RemoteSources/components/RemoteSource.tsx b/src/components/RemoteSources/components/RemoteSource.tsx
index d15d6d63..c7592974 100644
--- a/src/components/RemoteSources/components/RemoteSource.tsx
+++ b/src/components/RemoteSources/components/RemoteSource.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@fluffylabs/shared-ui";
+import { Button, Checkbox, Input } from "@fluffylabs/shared-ui";
 import "./RemoteSource.css";
 import { useCallback, useState } from "react";
 import { NEW_REMOTE_SOURCE_ID } from "../../NotesProvider/consts/remoteSources";
@@ -40,20 +40,23 @@ export function RemoteSource({ source, onChange }: RemoteSourceProps) {
     onChange(source, true);
   }, [source, onChange]);
 
-  const toggleEnabled = useCallback(() => {
-    if (!source) {
-      console.error("Toggling a non-existing remote source.");
-      return;
-    }
-    onChange({ ...source, isEnabled: !isEnabled });
-  }, [onChange, source, isEnabled]);
+  const toggleEnabled = useCallback(
+    (checked: boolean) => {
+      if (!source) {
+        console.error("Toggling a non-existing remote source.");
+        return;
+      }
+      onChange({ ...source, isEnabled: checked });
+    },
+    [onChange, source],
+  );
 
   if (isEditing) {
     return (
       <div className="remote-source">
-        <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Source Name" />
+        <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Source Name" />
         <br />
-        <input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="Source URL" />
+        <Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="Source URL" />
         <br />
         <Versions isEditing={isEditing} versions={versions} onChange={setVersions} />
         <br />
@@ -72,7 +75,7 @@ export function RemoteSource({ source, onChange }: RemoteSourceProps) {
   return (
     <div className="remote-source">
       <label style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-        <input type="checkbox" checked={isEnabled} onChange={toggleEnabled} />
+        <Checkbox checked={isEnabled} onCheckedChange={toggleEnabled} />
         <strong>{name}</strong>
       </label>
       {id > 0 ? (
diff --git a/src/components/RemoteSources/components/Versions.tsx b/src/components/RemoteSources/components/Versions.tsx
index c2caccd8..c3cbc315 100644
--- a/src/components/RemoteSources/components/Versions.tsx
+++ b/src/components/RemoteSources/components/Versions.tsx
@@ -1,3 +1,4 @@
+import { Checkbox } from "@fluffylabs/shared-ui";
 import { useContext, useMemo } from "react";
 import { type IMetadataContext, MetadataContext } from "../../MetadataProvider/MetadataProvider";
 
@@ -24,8 +25,7 @@ export function Versions({ isEditing = false, versions, onChange }: VersionsProp
   if (isEditing) {
     const allVersionsOption = (
       <label>
-        <input type="checkbox" checked={isAllVersions} onChange={() => onChange?.(isAllVersions ? [] : null)} /> all
-        versions
+        <Checkbox checked={isAllVersions} onCheckedChange={() => onChange?.(isAllVersions ? [] : null)} /> all versions
       </label>
     );
 
@@ -38,11 +38,10 @@ export function Versions({ isEditing = false, versions, onChange }: VersionsProp
         {allVersionsOption}
         {allVersions.map((v) => (
           <label key={v.hash}>
-            <input
-              type="checkbox"
+            <Checkbox
               checked={names.includes(v.name || "")}
-              onChange={(e) => {
-                if (e.target.checked) {
+              onCheckedChange={(checked) => {
+                if (checked) {
                   onChange?.([...versions, v.hash]);
                 } else {
                   onChange?.(versions.filter((x) => x !== v.hash));
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index d0989610..067da24b 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -4,6 +4,7 @@ import { type ILocationContext, LocationContext } from "../LocationProvider/Loca
 import { type IPdfContext, PdfContext } from "../PdfProvider/PdfProvider";
 
 import "./Search.css";
+import { Input } from "@fluffylabs/shared-ui";
 import { twMerge } from "tailwind-merge";
 import { useTabsContext } from "../Tabs/Tabs";
 
@@ -45,7 +46,7 @@ export function Search({
 
   return (
     <div className={twMerge("search-wrapper w-full", className)}>
-      <input
+      <Input
         ref={inputRef}
         autoFocus
         type="text"
diff --git a/src/index.css b/src/index.css
index 8b79fc7f..19ae134b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -72,13 +72,3 @@ h1 {
 .default-button.toggled {
   border-color: #fff874;
 }
-
-input {
-  border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
-  border-width: 1px;
-  background-color: field;
-  padding: 1px 0px;
-  padding-block: 1px;
-  padding-inline: 2px;
-  border-radius: 4px;
-}
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-dark-mode-linux.png
index 66342c1e..2cff626b 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-light-mode-linux.png
index 81365241..b1ba3a30 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-activation-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-dark-mode-linux.png
index c706d9a0..d77608c8 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-light-mode-linux.png
index ee4107df..8c59f0cd 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-after-note-edit-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-dark-mode-linux.png
index e9375692..ea60255b 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-light-mode-linux.png
index 8c076ca4..d5d955de 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/notes-tab-initial-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-dark-mode-linux.png
index ff2f1274..4a1ae3f5 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-light-mode-linux.png
index 2a0beab2..77063746 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-initial-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-dark-mode-linux.png
index e1108500..2a1e422a 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-light-mode-linux.png
index 8b502118..f3d77797 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-query-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-dark-mode-linux.png
index b067e050..8e673d10 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-light-mode-linux.png
index bf3c418f..79846a7c 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/search-with-results-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-dark-mode-linux.png
index ad3558f5..feba863a 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-light-mode-linux.png
index 1abfb392..2191dcfe 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-more-settings-clicked-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-dark-mode-linux.png
index 073c4196..fef4b267 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-light-mode-linux.png
index 490a43df..760f2947 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-dropdown-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-dark-mode-linux.png
index 76d3528d..e4a8180e 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-light-mode-linux.png
index f5d9f9e0..67535e11 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-off-light-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-dark-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-dark-mode-linux.png
index 3b90c03a..0a55a9ae 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-dark-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-dark-mode-linux.png differ
diff --git a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-light-mode-linux.png b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-light-mode-linux.png
index bb07a828..071a5889 100644
Binary files a/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-light-mode-linux.png and b/tools/snapshot-tests/tests/basic-snapshots.spec.ts-snapshots/topbar-notes-selected-on-light-mode-linux.png differ