diff --git a/src/TrackUnit.ts b/src/TrackUnit.ts
index 2f755ca..0d7e716 100644
--- a/src/TrackUnit.ts
+++ b/src/TrackUnit.ts
@@ -8,6 +8,13 @@ export const enum TrackUnitType {
     GhostNoteAccent="tut-3",
 }
 
+export type TrackUnitStickingType = 
+    | "none"
+    | "lh" 
+    | "rh" 
+    | "lf" 
+    | "rf";
+
 export const enum TrackUnitEvent {
     Toggle="tue-0",
     On="tue-1",
@@ -15,7 +22,6 @@ export const enum TrackUnitEvent {
     TypeChange="tue-3",
 }
 
-
 export default class TrackUnit implements IPublisher<TrackUnitEvent> {
     private static readonly TypeRotation = [
         TrackUnitType.Normal,
@@ -26,6 +32,7 @@ export default class TrackUnit implements IPublisher<TrackUnitEvent> {
     private publisher: Publisher<TrackUnitEvent, TrackUnit> = new Publisher<TrackUnitEvent, TrackUnit>(this);
     private on = false;
     private typeIndex = 0;
+    private stickingType: TrackUnitStickingType = "none";
     private parent: Track;
 
     constructor(options: {
@@ -65,6 +72,17 @@ export default class TrackUnit implements IPublisher<TrackUnitEvent> {
         this.parent.alertDeepChange();
     }
 
+    setStickingType(type: TrackUnitStickingType) {
+        console.log('set stickin');
+        this.stickingType = type;
+        this.publisher.notifySubs(TrackUnitEvent.TypeChange);
+        this.parent.alertDeepChange();
+    }
+
+    getStickingType() {
+        return this.stickingType;
+    }
+
     getType(): TrackUnitType {
         return TrackUnit.TypeRotation[this.typeIndex];
     }
@@ -86,5 +104,6 @@ export default class TrackUnit implements IPublisher<TrackUnitEvent> {
     mimic(trackUnit: TrackUnit): void {
         this.setOn(trackUnit.isOn());
         this.setType(trackUnit.getType());
+        this.setStickingType(trackUnit.getStickingType());
     }
 }
diff --git a/src/ui/Beat/BeatView.tsx b/src/ui/Beat/BeatView.tsx
index 8063407..74ec447 100644
--- a/src/ui/Beat/BeatView.tsx
+++ b/src/ui/Beat/BeatView.tsx
@@ -3,8 +3,10 @@ import Beat, { BeatEvents } from "@/Beat";
 import TrackView from "@/ui/Track/TrackView";
 import "./Beat.css";
 import EditableTextFieldView from "@/ui/Widgets/EditableTextFIeld/EditableTextFieldView";
+import AppState from "@/AppState";
 
 export type BeatUINodeOptions = RungOptions & {
+    state: AppState,
     beat: Beat,
     orientation?: "horizontal" | "vertical",
 };
@@ -21,9 +23,11 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
     private titles: HTMLHeadingElement[] = [];
     private currentOrientation: "vertical" | "horizontal";
     private subscription: ISubscription;
+    private state: AppState;
 
     constructor(options: BeatUINodeOptions) {
         super(options);
+        this.state = options.state;
         this.beat = options.beat;
         this.currentOrientation = options.orientation ?? "horizontal";
         this.subscription = this.beat.addSubscriber(this, EventTypeSubscriptions);
@@ -53,7 +57,7 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
                 }
                 this.trackViews[i].setTrack(track);
             } else {
-                this.trackViews.push(new TrackView({ track: this.beat.getTrackByIndex(i) }));
+                this.trackViews.push(new TrackView({ state: this.state, track: this.beat.getTrackByIndex(i) }));
                 this.titles.push(this.trackViews[i].getTitleNode());
                 this.titles[this.titles.length - 1].classList.add("beat-track-title");
             }
@@ -106,4 +110,4 @@ export default class BeatView extends Rung<HTMLElement> implements ISubscriber<E
             </div>
         </div> as HTMLDivElement;
     }
-}
\ No newline at end of file
+}
diff --git a/src/ui/Root/Root.css b/src/ui/Root/Root.css
index d4b8f05..bea8250 100644
--- a/src/ui/Root/Root.css
+++ b/src/ui/Root/Root.css
@@ -138,6 +138,23 @@
     transition: background-color 200ms;
 }
 
+.root-toolbox { 
+    display: flex;
+}
+
+.root-toolbox .toolbox-button {
+    padding: 1em;
+    cursor: pointer;
+    color: black;
+    background-color: var(--color-ui-neutral-dark);
+}
+.root-toolbox .toolbox-button:hover {
+    background-color: var(--color-ui-neutral-dark-hover);
+}
+.root-toolbox .toolbox-button.active {
+    background-color: var(--color-ui-neutral-dark-active);
+}
+
 @media screen and (max-width: 900px) {
     .sidebar-visible .root-sidebar {
         left: 0;
diff --git a/src/ui/Root/RootView.tsx b/src/ui/Root/RootView.tsx
index ba5f8cc..712fcf5 100644
--- a/src/ui/Root/RootView.tsx
+++ b/src/ui/Root/RootView.tsx
@@ -4,7 +4,9 @@ import "./Root.css";
 import BeatSettingsView from "@/ui/BeatSettings/BeatSettingsView";
 import IconView from "@/ui/Widgets/Icon/IconView";
 import BeatStore from "@/BeatStore";
-import { Capsule, h, frag, Rung, RungOptions, ICapsule } from "@djledda/ladder";
+import { Capsule, h, frag, Rung, RungOptions, ICapsule, ISubscriber } from "@djledda/ladder";
+import AppState  from "@/AppState";
+import ToolboxView from "./ToolboxView";
 
 export type RootUINodeOptions = RungOptions & {
     title: string,
@@ -22,6 +24,8 @@ export default class RootView extends Rung<HTMLDivElement> {
     private showHideSidebarButton = Capsule.new<HTMLDivElement | null>(null);
     private sidebarActive = true;
     private sidebarLeftTabs = Capsule.new<HTMLDivElement | null>(null);
+    private state = new AppState();
+    private toolboxView: ToolboxView;
 
     constructor(options: RootUINodeOptions) {
         super(options);
@@ -29,6 +33,7 @@ export default class RootView extends Rung<HTMLDivElement> {
             loadFromLocalStorage: true,
             autoSave: true,
         });
+        this.toolboxView = new ToolboxView({ state: this.state });
         this.activeBeat = this.beatStore.getActiveBeat();
         this.activeBeat.watch((newVal) => {
             this.beatSettingsView.setBeat(newVal);
@@ -36,6 +41,7 @@ export default class RootView extends Rung<HTMLDivElement> {
         });
         this.currentOrientation = this.beatStore.getSavedOrientation() ?? options.orientation ?? "horizontal";
         this.beatView = new BeatView({
+            state: this.state,
             beat: this.activeBeat.val,
             orientation: this.currentOrientation,
         });
@@ -169,12 +175,14 @@ export default class RootView extends Rung<HTMLDivElement> {
         </div> as HTMLElement;
     };
 
+
     build() {
         return (
             <div classes={["root", "sidebar-visible"]}>
                 <this.Sidebar/>
                 <div className={"root-beat-stage-container"}>
                     <div className={"root-beat-stage"}>
+                        {this.toolboxView}
                         {this.beatView}
                     </div>
                 </div>
diff --git a/src/ui/Track/TrackView.tsx b/src/ui/Track/TrackView.tsx
index b478912..03f6506 100644
--- a/src/ui/Track/TrackView.tsx
+++ b/src/ui/Track/TrackView.tsx
@@ -2,8 +2,10 @@ import Track, { TrackEvents } from "@/Track";
 import TrackUnitView from "@/ui/TrackUnit/TrackUnitView";
 import "./Track.css";
 import { Capsule, h, ISubscriber, ISubscription, Rung, RungOptions } from "@djledda/ladder";
+import AppState from "@/AppState";
 
 export type TrackUINodeOptions = RungOptions & {
+    state: AppState,
     track: Track,
 };
 
@@ -24,11 +26,13 @@ export default class TrackView extends Rung implements ISubscriber<EventTypeSubs
     private trackUnitViewBlock: HTMLElement | null = null;
     private lastHoveredTrackUnitView: TrackUnitView | null = null;
     private sub: ISubscription | null = null;
+    private state: AppState;
     static deselectingUnits = false;
     static selectingUnits = false;
 
     constructor(options: TrackUINodeOptions) {
         super(options);
+        this.state = options.state;
         this.title = <h3></h3> as HTMLHeadingElement;
         this.setTrack(options.track);
     }
@@ -89,16 +93,24 @@ export default class TrackView extends Rung implements ISubscriber<EventTypeSubs
             TrackView.selectingUnits = true;
         } else if (button === 2) {
             TrackView.deselectingUnits = true;
-            this.track.getUnitByIndex(index)?.setOn(false);
         }
     }
 
     private onTrackUnitViewHover(trackUnitView: TrackUnitView) {
         this.lastHoveredTrackUnitView = trackUnitView;
         if (TrackView.selectingUnits) {
-            this.lastHoveredTrackUnitView.turnOn();
+            if (this.state.selectedTool === 'sticking') {
+                this.lastHoveredTrackUnitView.setStickingType(this.state.activeStickingType);
+            } else if (this.state.selectedTool === 'track-unit-type') {
+                this.lastHoveredTrackUnitView.turnOn();
+                this.lastHoveredTrackUnitView.setType(this.state.activeTrackUnitType);
+            }
         } else if (TrackView.deselectingUnits) {
-            this.lastHoveredTrackUnitView.turnOff();
+            if (this.state.selectedTool === 'sticking') {
+                this.lastHoveredTrackUnitView.setStickingType("none");
+            } else if (this.state.selectedTool === 'track-unit-type') {
+                this.lastHoveredTrackUnitView.turnOff();
+            }
         }
     }
 
diff --git a/src/ui/TrackUnit/TrackUnit.css b/src/ui/TrackUnit/TrackUnit.css
index 455917e..e62b536 100644
--- a/src/ui/TrackUnit/TrackUnit.css
+++ b/src/ui/TrackUnit/TrackUnit.css
@@ -39,4 +39,17 @@
 
 .track-unit.track-unit-on.track-unit-ghost {
     opacity: 60%;
-}
\ No newline at end of file
+}
+
+.track-unit.track-unit-on.track-unit-lh {
+    content: 'hello';
+}
+.track-unit.track-unit-on.track-unit-lf {
+    content: 'world';
+}
+.track-unit.track-unit-on.track-unit-rh {
+    content: 'world2';
+}
+.track-unit.track-unit-on.track-unit-rf {
+    content: 'world';
+}
diff --git a/src/ui/TrackUnit/TrackUnitView.tsx b/src/ui/TrackUnit/TrackUnitView.tsx
index c212d39..dca1e3b 100644
--- a/src/ui/TrackUnit/TrackUnitView.tsx
+++ b/src/ui/TrackUnit/TrackUnitView.tsx
@@ -1,4 +1,4 @@
-import TrackUnit, { TrackUnitEvent, TrackUnitType } from "@/TrackUnit";
+import TrackUnit, { TrackUnitEvent, TrackUnitStickingType, TrackUnitType } from "@/TrackUnit";
 import "./TrackUnit.css";
 import { h, IPublisher, ISubscriber, ISubscription, Publisher, Rung, RungOptions } from "@djledda/ladder";
 
@@ -57,8 +57,7 @@ export default class TrackUnitView extends Rung<HTMLElement> implements ISubscri
     private handleMouseDown(ev: MouseEvent): void {
         if (ev.button === 1) {
             this.trackUnit.rotateType();
-        } else if (ev.button === 0) {
-            this.toggle();
+        } else {
             this.rotationTimeout = this.rotationTimeout || setTimeout(() => {
                 this.trackUnit.rotateType();
                 this.blockNextMouseUp = true;
@@ -103,6 +102,14 @@ export default class TrackUnitView extends Rung<HTMLElement> implements ISubscri
         this.trackUnit.toggle();
     }
 
+    setStickingType(type: TrackUnitStickingType): void {
+        this.trackUnit.setStickingType(type);
+    }
+
+    setType(type: TrackUnitType): void {
+        this.trackUnit.setType(type);
+    }
+
     turnOn(): void {
         this.trackUnit.setOn(true);
     }
@@ -120,24 +127,39 @@ export default class TrackUnitView extends Rung<HTMLElement> implements ISubscri
             this.render().classList.remove("track-unit-on");
             break;
         case TrackUnitEvent.TypeChange:
-            switch (this.trackUnit.getType()) {
-            case TrackUnitType.Normal:
-                this.render().classList.remove("track-unit-ghost");
-                this.render().classList.remove("track-unit-accent");
-                break;
-            case TrackUnitType.GhostNote:
-                this.render().classList.add("track-unit-ghost");
-                this.render().classList.remove("track-unit-accent");
-                break;
-            case TrackUnitType.Accent:
-                this.render().classList.remove("track-unit-ghost");
-                this.render().classList.add("track-unit-accent");
-                break;
-            case TrackUnitType.GhostNoteAccent:
-                this.render().classList.add("track-unit-ghost");
-                this.render().classList.add("track-unit-accent");
-                break;
-            }
+            this.syncTrackUnitType();
+            this.syncStickingType(this.trackUnit.getStickingType());
+        }
+    }
+
+    private syncStickingType(type: TrackUnitStickingType) {
+        const node = this.render();
+        node.classList.remove("track-unit-lh");
+        node.classList.remove("track-unit-rh");
+        node.classList.remove("track-unit-lf");
+        node.classList.remove("track-unit-rf");
+        if (type !== "none") {
+            node.classList.add(`track-unit-${ type }`);
+        }
+    }
+
+    private syncTrackUnitType() {
+        switch (this.trackUnit.getType()) {
+        case TrackUnitType.Normal:
+            this.render().classList.remove("track-unit-ghost");
+            this.render().classList.remove("track-unit-accent");
+            break;
+        case TrackUnitType.GhostNote:
+            this.render().classList.add("track-unit-ghost");
+            this.render().classList.remove("track-unit-accent");
+            break;
+        case TrackUnitType.Accent:
+            this.render().classList.remove("track-unit-ghost");
+            this.render().classList.add("track-unit-accent");
+            break;
+        case TrackUnitType.GhostNoteAccent:
+            this.render().classList.add("track-unit-ghost");
+            this.render().classList.add("track-unit-accent");
             break;
         }
     }