diff --git a/src/audio/audio.libraryItem.ts b/src/audio/audio.libraryItem.ts
index 1dd1c1f..f4b9366 100644
--- a/src/audio/audio.libraryItem.ts
+++ b/src/audio/audio.libraryItem.ts
@@ -56,7 +56,7 @@ export class AudioLibraryItem extends LibraryItem<AudioLibraryItemState> {
                 return false;
             }
             if (!this.name) {
-                this.name = dialogResult.filePaths![0];
+                this.name = dialogResult.filePaths![0].replace(/^.*[\\/]/, "");
             }
             this.path = dialogResult.filePaths![0];
             await this.loadAudio();
diff --git a/src/graph/nodes/effects/SplitNode.ts b/src/graph/nodes/effects/SplitNode.ts
new file mode 100644
index 0000000..ae50a6c
--- /dev/null
+++ b/src/graph/nodes/effects/SplitNode.ts
@@ -0,0 +1,30 @@
+import { defineDynamicNode } from "baklavajs";
+import { ColorArrayInterface, IntegerInterface } from "../../interfaces";
+import { LmsCalculationContext } from "../../types";
+import { Color } from "../../colors";
+import { scaleColorArray } from "@/utils";
+
+export const SplitNode = defineDynamicNode({
+    type: "Split",
+    inputs: {
+        splitInto: () => new IntegerInterface("Split Into", 2, 1, 10),
+        colors: () => new ColorArrayInterface("Colors", []),
+    },
+    onUpdate: ({ splitInto }) => {
+        const outputs: Record<string, () => ColorArrayInterface> = {};
+        for (let i = 1; i <= splitInto; i++) {
+            outputs[`output${i}`] = () => new ColorArrayInterface(`Output ${i}`, []);
+        }
+
+        return { outputs };
+    },
+    calculate: ({ colors, splitInto }, ctx: LmsCalculationContext) => {
+        const result: Record<string, Color[]> = {};
+        for (let i = 1; i <= splitInto; i++) {
+            // slice the input array into splitInto parts
+            const output = colors.slice((i - 1) * (colors.length / splitInto), i * (colors.length / splitInto));
+            result[`output${i}`] = scaleColorArray(output, ctx.globalValues.resolution);
+        }
+        return result;
+    },
+});
diff --git a/src/graph/nodes/effects/index.ts b/src/graph/nodes/effects/index.ts
index 00bcd9b..5e580df 100644
--- a/src/graph/nodes/effects/index.ts
+++ b/src/graph/nodes/effects/index.ts
@@ -1,3 +1,4 @@
 export * from "./AfterglowNode";
 export * from "./MirrorNode";
 export * from "./RotateNode";
+export * from "./SplitNode";
diff --git a/src/graph/options/ColorPicker.vue b/src/graph/options/ColorPicker.vue
index 34fa154..d2470bb 100644
--- a/src/graph/options/ColorPicker.vue
+++ b/src/graph/options/ColorPicker.vue
@@ -38,6 +38,7 @@ onClickOutside(el, () => {
 .color-picker {
     height: 100%;
     border-radius: 3px;
+    cursor: pointer;
 }
 
 .color-picker-overlay {
@@ -45,5 +46,10 @@ onClickOutside(el, () => {
     left: 100%;
     top: 0%;
     z-index: 100;
+    transform: scale(1);
+}
+
+:deep(.vc-input__input) {
+    background-color: white;
 }
 </style>