diff --git a/vite/src/pipedal/AppThemed.tsx b/vite/src/pipedal/AppThemed.tsx
index 4deab00..f4f483f 100644
--- a/vite/src/pipedal/AppThemed.tsx
+++ b/vite/src/pipedal/AppThemed.tsx
@@ -1031,6 +1031,7 @@ export
                         <RenameDialog
                             open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
                             defaultName={this.model_.banks.get().getSelectedEntryName()}
+                            title="Bank Name"
                             acceptActionName={this.state.renameBankDialogOpen ? "Rename" : "Save as"}
                             onClose={() => {
                                 this.setState({
diff --git a/vite/src/pipedal/BankDialog.tsx b/vite/src/pipedal/BankDialog.tsx
index cfea2be..4080a42 100644
--- a/vite/src/pipedal/BankDialog.tsx
+++ b/vite/src/pipedal/BankDialog.tsx
@@ -458,7 +458,7 @@ const BankDialog = withStyles(
 
                                             <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center" }}>
                                                 <Button color="inherit" onClick={(e) => this.handleCopy()}>
-                                                    Copy
+                                                    Save as
                                                 </Button>
                                                 <Button color="inherit" onClick={() => this.handleRenameClick()}>
                                                     Rename
@@ -466,6 +466,7 @@ const BankDialog = withStyles(
                                                 <RenameDialog
                                                     open={this.state.filenameDialogOpen}
                                                     defaultName={this.getSelectedName()}
+                                                    title={this.state.filenameSaveAs ? "Save Bank As" : "Bank Name"}
                                                     acceptActionName={this.state.filenameSaveAs ? "SAVE AS" : "RENAME"}
                                                     onClose={() => { this.setState({ filenameDialogOpen: false }) }}
                                                     onOk={(text: string) => {
diff --git a/vite/src/pipedal/FilePropertyDialog.tsx b/vite/src/pipedal/FilePropertyDialog.tsx
index f6afd42..b85106d 100644
--- a/vite/src/pipedal/FilePropertyDialog.tsx
+++ b/vite/src/pipedal/FilePropertyDialog.tsx
@@ -1599,6 +1599,7 @@ export default withStyles(
                                 <RenameDialog open={this.state.newFolderDialogOpen} defaultName=""
                                     onOk={(newName) => { this.setState({ newFolderDialogOpen: false }); this.onExecuteNewFolder(newName) }}
                                     onClose={() => { this.setState({ newFolderDialogOpen: false }); }}
+                                    title="New folder"
                                     acceptActionName="OK"
                                 />
                             )
@@ -1606,6 +1607,7 @@ export default withStyles(
                         {
                             this.state.renameDialogOpen && (
                                 <RenameDialog open={this.state.renameDialogOpen} defaultName={this.renameDefaultName()}
+                                    title="Rename" 
                                     onOk={(newName) => { this.setState({ renameDialogOpen: false }); this.onExecuteRename(newName) }}
                                     onClose={() => { this.setState({ renameDialogOpen: false }); }}
                                     acceptActionName="OK"
diff --git a/vite/src/pipedal/MainPage.tsx b/vite/src/pipedal/MainPage.tsx
index 23b9a78..85ca9e8 100644
--- a/vite/src/pipedal/MainPage.tsx
+++ b/vite/src/pipedal/MainPage.tsx
@@ -19,10 +19,12 @@
 
 import { SyntheticEvent } from 'react';
 import { Theme } from '@mui/material/styles';
-import WithStyles, {withTheme} from './WithStyles';
+import WithStyles, { withTheme } from './WithStyles';
 import { withStyles } from "tss-react/mui";
 import IconButtonEx from './IconButtonEx';
 import ButtonEx from './ButtonEx';
+import ButtonBase from '@mui/material/ButtonBase';
+import RenameDialog from './RenameDialog';
 
 import ToolTipEx from './ToolTipEx';
 import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
@@ -46,16 +48,16 @@ import PluginInfoDialog from './PluginInfoDialog';
 import { GetControlView } from './ControlViewFactory';
 import MidiBindingsDialog from './MidiBindingsDialog';
 import PluginPresetSelector from './PluginPresetSelector';
-import OldDeleteIcon  from "./svg/old_delete_outline_24dp.svg?react";
-import MidiIcon  from "./svg/ic_midi.svg?react";
+import OldDeleteIcon from "./svg/old_delete_outline_24dp.svg?react";
+import MidiIcon from "./svg/ic_midi.svg?react";
 import { isDarkMode } from './DarkMode';
-import Snapshot0Icon  from "./svg/snapshot_0.svg?react";
-import Snapshot1Icon  from "./svg/snapshot_1.svg?react";
-import Snapshot2Icon  from "./svg/snapshot_2.svg?react";
-import Snapshot3Icon  from "./svg/snapshot_3.svg?react";
-import Snapshot4Icon  from "./svg/snapshot_4.svg?react";
-import Snapshot5Icon  from "./svg/snapshot_5.svg?react";
-import Snapshot6Icon  from "./svg/snapshot_6.svg?react";
+import Snapshot0Icon from "./svg/snapshot_0.svg?react";
+import Snapshot1Icon from "./svg/snapshot_1.svg?react";
+import Snapshot2Icon from "./svg/snapshot_2.svg?react";
+import Snapshot3Icon from "./svg/snapshot_3.svg?react";
+import Snapshot4Icon from "./svg/snapshot_4.svg?react";
+import Snapshot5Icon from "./svg/snapshot_5.svg?react";
+import Snapshot6Icon from "./svg/snapshot_6.svg?react";
 
 import SnapshotDialog from './SnapshotDialog';
 import { css } from '@emotion/react';
@@ -69,39 +71,40 @@ const HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK = 500;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // const HORIZONTAL_LAYOUT_MQ = "@media (max-height: " + HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK + "px)";
 
-const styles = ({ palette }: Theme) => { return {
-    frame: css({
-        position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
-        justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
-    }),
-    pedalboardScroll: css({
-        position: "relative", width: "100%",
-        flex: "0 0 auto", overflow: "auto", maxHeight: 220
-    }),
-    pedalboardScrollSmall: css({
-        position: "relative", width: "100%",
-        flex: "1 1 1px", overflow: "auto"
-    }),
-    separator: css({
-        width: "100%", height: "1px", background: "#888", opacity: "0.5",
-        flex: "0 0 1px"
-    }),
+const styles = ({ palette }: Theme) => {
+    return {
+        frame: css({
+            position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
+            justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
+        }),
+        pedalboardScroll: css({
+            position: "relative", width: "100%",
+            flex: "0 0 auto", overflow: "auto", maxHeight: 220
+        }),
+        pedalboardScrollSmall: css({
+            position: "relative", width: "100%",
+            flex: "1 1 1px", overflow: "auto"
+        }),
+        separator: css({
+            width: "100%", height: "1px", background: "#888", opacity: "0.5",
+            flex: "0 0 1px"
+        }),
 
-    controlToolBar: css({
-        flex: "0 0 auto", width: "100%", height: 48
-    }),
-    splitControlBar: css({
-        flex: "0 0 64px", width: "100%", paddingLeft: 24, paddingRight: 16, paddingBottom: 16
-    }),
-    controlContent: css({
-        flex: "1 1 auto", width: "100%", overflowY: "hidden", minHeight: 300
-    }),
-    controlContentSmall: css({
-        flex: "0 0 162px", width: "100%", height: 162, overflowY: "hidden",
-    }),
-    title: css({ fontSize: "1.1em", fontWeight: 700, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }),
-    author: css({ fontWeight: 500, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 })
-}
+        controlToolBar: css({
+            flex: "0 0 auto", width: "100%", height: 48
+        }),
+        splitControlBar: css({
+            flex: "0 0 64px", width: "100%", paddingLeft: 24, paddingRight: 16, paddingBottom: 16
+        }),
+        controlContent: css({
+            flex: "1 1 auto", width: "100%", overflowY: "hidden", minHeight: 300
+        }),
+        controlContentSmall: css({
+            flex: "0 0 162px", width: "100%", height: 162, overflowY: "hidden",
+        }),
+        title: css({ fontSize: "1.1rem", fontWeight: 700, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }),
+        author: css({ fontWeight: 500, fontSize: "0.8rem", marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 })
+    }
 };
 
 
@@ -124,529 +127,574 @@ interface MainState {
     horizontalScrollLayout: boolean;
     showMidiBindingsDialog: boolean;
     screenHeight: number;
+    displayNameDialogOpen: boolean;
+
 
 }
 
 
 export const MainPage =
     withTheme(
-    withStyles(
-        class extends ResizeResponsiveComponent<MainProps, MainState> {
-            model: PiPedalModel;
+        withStyles(
+            class extends ResizeResponsiveComponent<MainProps, MainState> {
+                model: PiPedalModel;
 
-            getSplitToolbar() {
-                return this.windowSize.width < SPLIT_CONTROLBAR_THRESHHOLD;
-            }
-            getDisplayAuthor()
-            {
-                if (this.getSplitToolbar())
-                {
-                    return this.windowSize.width >= DISPLAY_AUTHOR_SPLIT_THRESHOLD;
-                } else {
-                    return this.windowSize.width >=  DISPLAY_AUTHOR_THRESHHOLD;
+                getSplitToolbar() {
+                    return this.windowSize.width < SPLIT_CONTROLBAR_THRESHHOLD;
                 }
-            }
-            constructor(props: MainProps) {
-                super(props);
-                this.model = PiPedalModelFactory.getInstance();
-                let pedalboard = this.model.pedalboard.get();
-                let selectedPedal = pedalboard.getFirstSelectableItem();
-
-                this.state = {
-                    selectedPedal: selectedPedal,
-                    selectedSnapshot: -1,
-                    loadDialogOpen: false,
-                    snapshotDialogOpen: false,
-                    pedalboard: pedalboard,
-                    addMenuAnchorEl: null,
-                    splitControlBar: this.getSplitToolbar(),
-                    displayAuthor: this.getDisplayAuthor(),
-                    horizontalScrollLayout: this.windowSize.height < HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK,
-                    showMidiBindingsDialog: false,
-                    screenHeight: this.windowSize.height
-
-
-                };
-                this.onSelectionChanged = this.onSelectionChanged.bind(this);
-                this.onPedalDoubleClick = this.onPedalDoubleClick.bind(this);
-                this.onLoadClick = this.onLoadClick.bind(this);
-                this.onLoadOk = this.onLoadOk.bind(this);
-                this.onLoadCancel = this.onLoadCancel.bind(this);
-                this.onPedalboardChanged = this.onPedalboardChanged.bind(this);
-                this.onSelectedSnapshotChanged = this.onSelectedSnapshotChanged.bind(this);
-                this.handleEnableCurrentItemChanged = this.handleEnableCurrentItemChanged.bind(this);
-            }
-
-            onInsertPedal(instanceId: number) {
-                this.setAddMenuAnchorEl(null);
-                let newId = this.model.addPedalboardItem(instanceId, false);
-                this.setSelection(newId);
-            }
-            onAppendPedal(instanceId: number) {
-                this.setAddMenuAnchorEl(null);
-                let newId = this.model.addPedalboardItem(instanceId, true);
-
-                this.setSelection(newId);
-
-            }
-            onInsertSplit(instanceId: number) {
-                this.setAddMenuAnchorEl(null);
-                let newId = this.model.addPedalboardSplitItem(instanceId, false);
-                this.setSelection(newId);
-
-            }
-            onAppendSplit(instanceId: number) {
-                this.setAddMenuAnchorEl(null);
-                let newId = this.model.addPedalboardSplitItem(instanceId, true);
-                this.setSelection(newId);
-
-            }
-            setAddMenuAnchorEl(value: HTMLElement | null) {
-                this.setState({ addMenuAnchorEl: value });
-            }
-            onAddClick(e: SyntheticEvent) {
-                this.setAddMenuAnchorEl(e.currentTarget as HTMLElement);
-            }
-
-            handleMidiBindingsDialogClose() {
-                this.setState({ showMidiBindingsDialog: false })
-            }
-            handleAddClose(): void {
-                this.setAddMenuAnchorEl(null);
-            }
-
-            handleMidiConfiguration(instanceId: number): void {
-                this.setState({ showMidiBindingsDialog: true });
-            }
-            handleEnableCurrentItemChanged(event: any): void {
-                let newValue = event.target.checked;
-                let item = this.getSelectedPedalboardItem();
-                if (item != null) {
-                    this.model.setPedalboardItemEnabled(item.getInstanceId(), newValue);
-
-                }
-            }
-            handleSelectPluginPreset(instanceId: number, presetInstanceId: number) {
-                this.model.loadPluginPreset(instanceId, presetInstanceId);
-            }
-            onPedalboardChanged(value: Pedalboard) {
-                let selectedItem = -1;
-                if (this.state.selectedPedal === Pedalboard.START_CONTROL || this.state.selectedPedal === Pedalboard.END_CONTROL) {
-                    selectedItem = this.state.selectedPedal;
-                } else if (value.hasItem(this.state.selectedPedal)) {
-                    selectedItem = this.state.selectedPedal;
-                } else {
-                    selectedItem = value.getFirstSelectableItem();
-                }
-                this.setState({
-                    pedalboard: value,
-                    selectedPedal: selectedItem,
-                    selectedSnapshot: value.selectedSnapshot
-                });
-            }
-            onSelectedSnapshotChanged(selectedSnapshot: number) {
-                this.setState({
-                    selectedSnapshot: selectedSnapshot
-                });
-
-            }
-            onDeletePedal(instanceId: number): void {
-                let result = this.model.deletePedalboardPedal(instanceId);
-                if (result != null) {
-                    this.setState({ selectedPedal: result });
-                }
-            }
-
-            componentDidMount() {
-                super.componentDidMount();
-                this.model.pedalboard.addOnChangedHandler(this.onPedalboardChanged);
-                this.model.selectedSnapshot.addOnChangedHandler(this.onSelectedSnapshotChanged);
-            }
-            componentWillUnmount() {
-                this.model.selectedSnapshot.removeOnChangedHandler(this.onSelectedSnapshotChanged);
-                this.model.pedalboard.removeOnChangedHandler(this.onPedalboardChanged);
-                super.componentWillUnmount();
-            }
-            updateResponsive() {
-                this.setState({
-                    splitControlBar: this.getSplitToolbar(),
-                    displayAuthor: this.getDisplayAuthor(),
-                    horizontalScrollLayout: this.windowSize.height < HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK,
-                    screenHeight: this.windowSize.height
-                });
-            }
-            onWindowSizeChanged(width: number, height: number): void {
-                super.onWindowSizeChanged(width, height);
-                this.updateResponsive();
-            }
-
-
-            setSelection(selectedId_: number): void {
-                this.setState({ selectedPedal: selectedId_ });
-            }
-
-            onSelectionChanged(selectedId: number): void {
-                this.setSelection(selectedId);
-            }
-            onPedalDoubleClick(selectedId: number): void {
-                this.setSelection(selectedId);
-                let item = this.getPedalboardItem(selectedId);
-                if (item != null) {
-                    if (item.isStart() || item.isEnd())
-                    {
-                        // do nothing.
-                    } else if (item.isSplit()) {
-                        let split = item as PedalboardSplitItem;
-                        if (split.getSplitType() === SplitType.Ab) {
-                            let cv = split.getToggleAbControlValue();
-                            if (split.instanceId === undefined) throw new PiPedalStateError("Split without valid id.");
-                            this.model.setPedalboardControl(split.instanceId, cv.key, cv.value);
-                        }
+                getDisplayAuthor() {
+                    if (this.getSplitToolbar()) {
+                        return this.windowSize.width >= DISPLAY_AUTHOR_SPLIT_THRESHOLD;
                     } else {
-                        this.setState({ loadDialogOpen: true });
+                        return this.windowSize.width >= DISPLAY_AUTHOR_THRESHHOLD;
                     }
                 }
-            }
-            onLoadCancel(): void {
-                this.setState({ loadDialogOpen: false });
-            }
-            onLoadOk(selectedUri: string): void {
-                this.setState({ loadDialogOpen: false });
-                let itemId = this.state.selectedPedal;
-                let newSelectedItem = this.model.loadPedalboardPlugin(itemId, selectedUri);
-                this.setState({ selectedPedal: newSelectedItem });
-            }
-            onSnapshotDialogOk(): void {
-                this.setState({ snapshotDialogOpen: false });
-            }
+                constructor(props: MainProps) {
+                    super(props);
+                    this.model = PiPedalModelFactory.getInstance();
+                    let pedalboard = this.model.pedalboard.get();
+                    let selectedPedal = pedalboard.getFirstSelectableItem();
 
-            onLoadClick(e: SyntheticEvent) {
-                this.setState({ loadDialogOpen: true });
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            onSnapshotClick() {
-                this.setState({ snapshotDialogOpen: true });
-            }
+                    this.state = {
+                        selectedPedal: selectedPedal,
+                        selectedSnapshot: -1,
+                        loadDialogOpen: false,
+                        snapshotDialogOpen: false,
+                        displayNameDialogOpen: false,
+                        pedalboard: pedalboard,
+                        addMenuAnchorEl: null,
+                        splitControlBar: this.getSplitToolbar(),
+                        displayAuthor: this.getDisplayAuthor(),
+                        horizontalScrollLayout: this.windowSize.height < HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK,
+                        showMidiBindingsDialog: false,
+                        screenHeight: this.windowSize.height
 
-            getPedalboardItem(selectedId?: number): PedalboardItem | null {
-                if (selectedId === undefined) return null;
 
-                let pedalboard = this.model.pedalboard.get();
-                if (!pedalboard) return null;
-
-                if (selectedId === Pedalboard.START_CONTROL) // synthetic input volume item.
-                {
-                    return pedalboard.makeStartItem();
-                } else if (selectedId === Pedalboard.END_CONTROL) // synthetic output volume.
-                {
-                    return pedalboard.makeEndItem();
+                    };
+                    this.onSelectionChanged = this.onSelectionChanged.bind(this);
+                    this.onPedalDoubleClick = this.onPedalDoubleClick.bind(this);
+                    this.onLoadClick = this.onLoadClick.bind(this);
+                    this.onLoadOk = this.onLoadOk.bind(this);
+                    this.onLoadCancel = this.onLoadCancel.bind(this);
+                    this.onPedalboardChanged = this.onPedalboardChanged.bind(this);
+                    this.onSelectedSnapshotChanged = this.onSelectedSnapshotChanged.bind(this);
+                    this.handleEnableCurrentItemChanged = this.handleEnableCurrentItemChanged.bind(this);
                 }
 
-                let it = pedalboard.itemsGenerator();
-                if (!selectedId) return null;
-                while (true) {
-                    let v = it.next();
-                    if (v.done) break;
-                    let item = v.value;
-                    if (item.instanceId === selectedId) {
-                        return item;
-                    }
+                handleEditPluginDisplayName() {
+                    this.setState({ displayNameDialogOpen: true });
+                }
+                onInsertPedal(instanceId: number) {
+                    this.setAddMenuAnchorEl(null);
+                    let newId = this.model.addPedalboardItem(instanceId, false);
+                    this.setSelection(newId);
+                }
+                onAppendPedal(instanceId: number) {
+                    this.setAddMenuAnchorEl(null);
+                    let newId = this.model.addPedalboardItem(instanceId, true);
+
+                    this.setSelection(newId);
 
                 }
-                return null;
+                onInsertSplit(instanceId: number) {
+                    this.setAddMenuAnchorEl(null);
+                    let newId = this.model.addPedalboardSplitItem(instanceId, false);
+                    this.setSelection(newId);
 
-            }
+                }
+                onAppendSplit(instanceId: number) {
+                    this.setAddMenuAnchorEl(null);
+                    let newId = this.model.addPedalboardSplitItem(instanceId, true);
+                    this.setSelection(newId);
+
+                }
+                setAddMenuAnchorEl(value: HTMLElement | null) {
+                    this.setState({ addMenuAnchorEl: value });
+                }
+                onAddClick(e: SyntheticEvent) {
+                    this.setAddMenuAnchorEl(e.currentTarget as HTMLElement);
+                }
+
+                handleMidiBindingsDialogClose() {
+                    this.setState({ showMidiBindingsDialog: false })
+                }
+                handleAddClose(): void {
+                    this.setAddMenuAnchorEl(null);
+                }
+
+                handleMidiConfiguration(instanceId: number): void {
+                    this.setState({ showMidiBindingsDialog: true });
+                }
+                handleEnableCurrentItemChanged(event: any): void {
+                    let newValue = event.target.checked;
+                    let item = this.getSelectedPedalboardItem();
+                    if (item != null) {
+                        this.model.setPedalboardItemEnabled(item.getInstanceId(), newValue);
 
-            onPedalboardPropertyChanged(instanceId: number, key: string, value: number) {
-                this.model.setPedalboardControl(instanceId, key, value);
-            }
-            getSelectedPedalboardItem(): PedalboardItem | null {
-                return this.getPedalboardItem(this.state.selectedPedal);
-            }
-            getSelectedUri(): string {
-                let pedalboardItem = this.getSelectedPedalboardItem();
-                if (pedalboardItem === null) return "";
-                return pedalboardItem.uri;
-            }
-            titleBar(pedalboardItem: PedalboardItem | null): React.ReactNode {
-                let title = "";
-                let author = "";
-                let infoPluginUri = "";
-                let presetsUri = "";
-                let missing = false;
-                if (pedalboardItem) {
-                    if (pedalboardItem.isEmpty()) {
-                        title = "";
-                    } else if (pedalboardItem.isSplit()) {
-                        title = "Split";
-                    } else if (pedalboardItem.isSyntheticItem()) {
-                        title = pedalboardItem.pluginName ?? "#error";
-                        author = "";
-                        presetsUri = "";
-                        infoPluginUri = "";
-                    }
-                    else {
-                        let uiPlugin = this.model.getUiPlugin(pedalboardItem.uri);
-                        if (!uiPlugin) {
-                            missing = true;
-                            title = pedalboardItem?.pluginName ?? "Missing plugin";
-                        } else {
-                            title = uiPlugin.name;
-                            author = uiPlugin.author_name;
-                            presetsUri = uiPlugin.uri;
-                            // if (uiPlugin.description.length > 20) {
-                            // }
-                            infoPluginUri = uiPlugin.uri;
-                        }
                     }
                 }
-                const classes = withStyles.getClasses(this.props);
-                if (missing) {
-                    return (
-                        <div style={{
-                            flex: "1 0 auto", overflow: "hidden", marginRight: 8, minWidth: 0,
-                            display: "flex", flexDirection: "row", height: 48, flexWrap: "nowrap",
-                            alignItems: "center"
-                        }}>
-                            <div style={{ flex: "0 1 auto", minWidth: 0 }}>
-                                <span style={{ color: isDarkMode() ? "#F02020" : "#800000" }}>
-                                    <span className={classes.title}>{title}</span>
-                                </span>
-                            </div>
-                        </div>
-                    );
-
-                } else {
-                    return (
-                        <div style={{
-                            flex: "1 1 auto", minWidth: 0, overflow: "hidden", marginRight: 8,
-                            display: "flex", flexDirection: "row", height: 48, flexWrap: "nowrap",
-                            alignItems: "center"
-                        }}>
-                            <div style={{ flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
-                                <span className={classes.title}>{title}</span>
-                                {this.state.displayAuthor&&(
-                                    <span className={classes.author}>{author}</span>
-                                )}
-                            </div>
-                            <div style={{ flex: "0 0 auto", verticalAlign: "center" }}>
-                                <PluginInfoDialog plugin_uri={infoPluginUri} />
-                            </div>
-                            <div style={{ flex: "0 0 auto" }}>
-                                <PluginPresetSelector pluginUri={presetsUri} instanceId={pedalboardItem?.instanceId ?? 0}
-                                />
-                            </div>
-                        </div>
-                    );
+                handleSelectPluginPreset(instanceId: number, presetInstanceId: number) {
+                    this.model.loadPluginPreset(instanceId, presetInstanceId);
                 }
-            }
-
-            snapshotIcon(theme: Theme, snapshotNumber: number) {
-                switch (snapshotNumber + 1) {
-                    case 0:
-                    default:
-                        return (<Snapshot0Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                    case 1:
-                        return (<Snapshot1Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                    case 2:
-                        return (<Snapshot2Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                    case 3:
-                        return (<Snapshot3Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                    case 4:
-                        return (<Snapshot4Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                    case 5:
-                        return (<Snapshot5Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                    case 6:
-                        return (<Snapshot6Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
-                }
-            }
-
-            render() {
-                const classes = withStyles.getClasses(this.props);
-                let pedalboard = this.model.pedalboard.get();
-                let pedalboardItem = this.getSelectedPedalboardItem();
-                let uiPlugin = null;
-                let bypassVisible = false;
-                let bypassChecked = false;
-                let canDelete = false;
-                let canInsert = false;
-                let canAppend = false;
-                let canLoad = true;
-                let instanceId = -1;
-                let missing = false;
-                let pluginUri = "#error";
-
-                if (pedalboardItem) {
-                    canDelete = pedalboard.canDeleteItem(pedalboardItem.instanceId);
-                    instanceId = pedalboardItem.instanceId;
-                    if (pedalboardItem.isEmpty()) {
-                        canInsert = true;
-                        canAppend = true;
-
-                    } else if (pedalboardItem.isStart()) {
-                        canAppend = true;
-                        canDelete = false;
-                        canLoad = false;
-                    } else if (pedalboardItem.isEnd()) {
-                        canInsert = true;
-                        canDelete = false;
-                        canLoad = false;
-                    } else if (pedalboardItem.isSplit()) {
-                        canInsert = true;
-                        canAppend = true;
-                        canLoad = false;
+                onPedalboardChanged(value: Pedalboard) {
+                    let selectedItem = -1;
+                    if (this.state.selectedPedal === Pedalboard.START_CONTROL || this.state.selectedPedal === Pedalboard.END_CONTROL) {
+                        selectedItem = this.state.selectedPedal;
+                    } else if (value.hasItem(this.state.selectedPedal)) {
+                        selectedItem = this.state.selectedPedal;
                     } else {
-                        pluginUri = pedalboardItem.uri;
-                        uiPlugin = this.model.getUiPlugin(pluginUri);
-                        canInsert = true;
-                        canAppend = true;
-                        if (uiPlugin) {
-                            bypassVisible = true;
-                            bypassChecked = pedalboardItem.isEnabled;
-                        } else {
-                            missing = true;
-                        }
+                        selectedItem = value.getFirstSelectableItem();
+                    }
+                    this.setState({
+                        pedalboard: value,
+                        selectedPedal: selectedItem,
+                        selectedSnapshot: value.selectedSnapshot
+                    });
+                }
+                onSelectedSnapshotChanged(selectedSnapshot: number) {
+                    this.setState({
+                        selectedSnapshot: selectedSnapshot
+                    });
+
+                }
+                onDeletePedal(instanceId: number): void {
+                    let result = this.model.deletePedalboardPedal(instanceId);
+                    if (result != null) {
+                        this.setState({ selectedPedal: result });
                     }
                 }
-                let horizontalScrollLayout = this.state.horizontalScrollLayout;
 
-                return (
-                    <div className={classes.frame}>
-                        <div id="pedalboardScroll" className={horizontalScrollLayout ? classes.pedalboardScrollSmall : classes.pedalboardScroll}
-                            style={{ maxHeight: horizontalScrollLayout ? undefined : this.state.screenHeight / 2 }}>
-                            <PedalboardView key={pluginUri} selectedId={this.state.selectedPedal}
-                                enableStructureEditing={this.props.enableStructureEditing}
-                                onSelectionChanged={this.onSelectionChanged}
-                                onDoubleClick={this.onPedalDoubleClick}
-                                hasTinyToolBar={this.props.hasTinyToolBar}
-                            />
-                        </div>
-                        <div className={classes.separator} />
-                        <div className={classes.controlToolBar}>
-                            <div style={{
-                                display: "flex", flexFlow: "row nowrap", alignItems: "center", justifyContent: "center", minWidth: 0,
-                                width: "100%", height: 48, paddingLeft: 16, paddingRight: 16
-                            }} >
-                                <div style={{ flex: "0 0 auto", width: this.state.splitControlBar? undefined:  80 }} >
-                                    <div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar? undefined:  80 }} >
-                                        <ToolTipEx title="Bypass" 
-                                        >
-                                            <Switch color="secondary" checked={bypassChecked} onChange={this.handleEnableCurrentItemChanged} />
-                                        </ToolTipEx>
-                                    </div>
-                                </div>
-                                {
-                                    (!this.state.splitControlBar || !this.props.enableStructureEditing) && this.titleBar(pedalboardItem)
-                                }
-                                <div style={{ flex: "1 1 1px" }}>
+                componentDidMount() {
+                    super.componentDidMount();
+                    this.model.pedalboard.addOnChangedHandler(this.onPedalboardChanged);
+                    this.model.selectedSnapshot.addOnChangedHandler(this.onSelectedSnapshotChanged);
+                }
+                componentWillUnmount() {
+                    this.model.selectedSnapshot.removeOnChangedHandler(this.onSelectedSnapshotChanged);
+                    this.model.pedalboard.removeOnChangedHandler(this.onPedalboardChanged);
+                    super.componentWillUnmount();
+                }
+                updateResponsive() {
+                    this.setState({
+                        splitControlBar: this.getSplitToolbar(),
+                        displayAuthor: this.getDisplayAuthor(),
+                        horizontalScrollLayout: this.windowSize.height < HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK,
+                        screenHeight: this.windowSize.height
+                    });
+                }
+                onWindowSizeChanged(width: number, height: number): void {
+                    super.onWindowSizeChanged(width, height);
+                    this.updateResponsive();
+                }
 
-                                </div>
-                                {this.props.enableStructureEditing && (
-                                    <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap",alignItems: "center" }}>
-                                        <div style={{ flex: "0 0 auto", display: (canInsert || canAppend) ? "block" : "none", paddingRight: 8 }}>
-                                            <IconButtonEx tooltip="Add pedal slot" onClick={(e) => { this.onAddClick(e) }} size="large">
-                                                <AddIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
-                                            </IconButtonEx>
-                                            <Menu
-                                                id="add-menu"
-                                                anchorEl={this.state.addMenuAnchorEl}
-                                                keepMounted
-                                                open={Boolean(this.state.addMenuAnchorEl)}
-                                                onClose={() => this.handleAddClose()}
-                                                TransitionComponent={Fade}
-                                            >
-                                                {canInsert && (<MenuItem onClick={() => this.onInsertPedal(instanceId)}>Insert pedal</MenuItem>)}
-                                                {canAppend && (<MenuItem onClick={() => this.onAppendPedal(instanceId)}>Append pedal</MenuItem>)}
-                                                <Divider />
-                                                {canInsert && (<MenuItem onClick={() => this.onInsertSplit(instanceId)}>Insert split</MenuItem>)}
-                                                {canAppend && (<MenuItem onClick={() => this.onAppendSplit(instanceId)}>Append split</MenuItem>)}
-                                            </Menu>
-                                        </div>
-                                        <div style={{ flex: "0 0 auto", display: canDelete ? "block" : "none", paddingRight: 8 }}>
-                                            <IconButtonEx tooltip="Delete pedal"
-                                                onClick={() => { this.onDeletePedal(pedalboardItem?.instanceId ?? -1) }}
-                                                size="large">
-                                                <OldDeleteIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
-                                            </IconButtonEx>
-                                        </div>
-                                        <div style={{ flex: "0 0 auto" }}>
-                                            <ButtonEx
-                                                variant="contained"
-                                                color="primary"
-                                                size="small"
-                                                tooltip="Load plugin"
-                                                onClick={this.onLoadClick}
-                                                disabled={this.state.selectedPedal === -1 || (!canLoad) || (this.getSelectedPedalboardItem()?.isSplit() ?? true)}
-                                                startIcon={<InputIcon />}
-                                                style={{
-                                                    textTransform: "none",
-                                                    background: (isDarkMode() ? "#6750A4" : undefined)
-                                                }}
-                                            >
-                                                Load
-                                            </ButtonEx>
-                                        </div>
-                                        <div style={{ flex: "0 0 auto" }}>
-                                            <IconButtonEx tooltip="MIDI bindings"
-                                                onClick={(e) => { this.handleMidiConfiguration(instanceId); }}
-                                                size="large">
-                                                <MidiIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
-                                            </IconButtonEx>
-                                        </div>
-                                        <div style={{ flex: "0 0 auto" }}>
-                                            <IconButtonEx tooltip="Snapshots"
-                                                onClick={(e) => { this.setState({ snapshotDialogOpen: true }); }}
-                                                size="large">
-                                                {this.snapshotIcon(this.props.theme, this.state.selectedSnapshot)}
-                                            </IconButtonEx>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                        {
-                            this.state.splitControlBar && this.props.enableStructureEditing && (
-                                <div className={classes.splitControlBar}>
-                                    {
-                                        this.titleBar(pedalboardItem)
-                                    }
-                                </div>
-                            )
-                        }
-                        <div id="mainPageControls" className={horizontalScrollLayout ? classes.controlContentSmall : classes.controlContent}>
-                            {
-                                missing ? (
-                                    <div style={{ marginLeft: 40, marginTop: 20 }}>
-                                        <Typography variant="body1" paragraph={true}>Error: Plugin is not installed.</Typography>
-                                        <Typography variant="body2" paragraph={true}>{pluginUri}</Typography>
-                                    </div>
 
-                                ) :
-                                    (
-                                        GetControlView(pedalboardItem)
-                                    )
+                setSelection(selectedId_: number): void {
+                    this.setState({ selectedPedal: selectedId_ });
+                }
+
+                onSelectionChanged(selectedId: number): void {
+                    this.setSelection(selectedId);
+                }
+                onPedalDoubleClick(selectedId: number): void {
+                    this.setSelection(selectedId);
+                    let item = this.getPedalboardItem(selectedId);
+                    if (item != null) {
+                        if (item.isStart() || item.isEnd()) {
+                            // do nothing.
+                        } else if (item.isSplit()) {
+                            let split = item as PedalboardSplitItem;
+                            if (split.getSplitType() === SplitType.Ab) {
+                                let cv = split.getToggleAbControlValue();
+                                if (split.instanceId === undefined) throw new PiPedalStateError("Split without valid id.");
+                                this.model.setPedalboardControl(split.instanceId, cv.key, cv.value);
                             }
-                        </div>
-                        <MidiBindingsDialog open={this.state.showMidiBindingsDialog}
-                            onClose={() => this.setState({ showMidiBindingsDialog: false })}
-                        />
-                        {
-                            (this.state.loadDialogOpen) && (
-                                <LoadPluginDialog open={this.state.loadDialogOpen} uri={this.getSelectedUri()}
-                                    onOk={this.onLoadOk} onCancel={this.onLoadCancel}
-                                />
-
-                            )
+                        } else {
+                            this.setState({ loadDialogOpen: true });
                         }
-                        {(this.state.snapshotDialogOpen) && (
-                            <SnapshotDialog open={this.state.snapshotDialogOpen} onOk={() => this.onSnapshotDialogOk()} />
-                        )}
-                    </div>
-                );
-            }
-        },
-        styles
-    ));
+                    }
+                }
+                onLoadCancel(): void {
+                    this.setState({ loadDialogOpen: false });
+                }
+                onLoadOk(selectedUri: string): void {
+                    this.setState({ loadDialogOpen: false });
+                    let itemId = this.state.selectedPedal;
+                    let newSelectedItem = this.model.loadPedalboardPlugin(itemId, selectedUri);
+                    this.setState({ selectedPedal: newSelectedItem });
+                }
+                onSnapshotDialogOk(): void {
+                    this.setState({ snapshotDialogOpen: false });
+                }
+
+                onLoadClick(e: SyntheticEvent) {
+                    this.setState({ loadDialogOpen: true });
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                onSnapshotClick() {
+                    this.setState({ snapshotDialogOpen: true });
+                }
+
+                getPedalboardItem(selectedId?: number): PedalboardItem | null {
+                    if (selectedId === undefined) return null;
+
+                    let pedalboard = this.model.pedalboard.get();
+                    if (!pedalboard) return null;
+
+                    if (selectedId === Pedalboard.START_CONTROL) // synthetic input volume item.
+                    {
+                        return pedalboard.makeStartItem();
+                    } else if (selectedId === Pedalboard.END_CONTROL) // synthetic output volume.
+                    {
+                        return pedalboard.makeEndItem();
+                    }
+
+                    let it = pedalboard.itemsGenerator();
+                    if (!selectedId) return null;
+                    while (true) {
+                        let v = it.next();
+                        if (v.done) break;
+                        let item = v.value;
+                        if (item.instanceId === selectedId) {
+                            return item;
+                        }
+
+                    }
+                    return null;
+
+                }
+
+                onPedalboardPropertyChanged(instanceId: number, key: string, value: number) {
+                    this.model.setPedalboardControl(instanceId, key, value);
+                }
+                getSelectedPedalboardItem(): PedalboardItem | null {
+                    return this.getPedalboardItem(this.state.selectedPedal);
+                }
+                getSelectedUri(): string {
+                    let pedalboardItem = this.getSelectedPedalboardItem();
+                    if (pedalboardItem === null) return "";
+                    return pedalboardItem.uri;
+                }
+                titleBar(pedalboardItem: PedalboardItem | null): React.ReactNode {
+                    let title = "";
+                    let author = "";
+                    let infoPluginUri = "";
+                    let presetsUri = "";
+                    let missing = false;
+                    let canEditTitle = false;
+                    if (pedalboardItem) {
+                        if (pedalboardItem.isEmpty()) {
+                            title = "";
+                        } else if (pedalboardItem.isSplit()) {
+                            title = "Split";
+                        } else if (pedalboardItem.isSyntheticItem()) {
+                            title = pedalboardItem.pluginName ?? "#error";
+                            author = "";
+                            presetsUri = "";
+                            infoPluginUri = "";
+                        }
+                        else {
+                            let uiPlugin = this.model.getUiPlugin(pedalboardItem.uri);
+                            if (!uiPlugin) {
+                                missing = true;
+                                title = pedalboardItem?.pluginName ?? "Missing plugin";
+                            } else {
+                                canEditTitle = this.props.enableStructureEditing;
+                                if (pedalboardItem.title !== "") {
+                                    title = pedalboardItem.title;
+                                    author = "";
+                                } else {
+                                    title = uiPlugin.name;
+                                    author = uiPlugin.author_name;
+                                }
+                                presetsUri = uiPlugin.uri;
+                                // if (uiPlugin.description.length > 20) {
+                                // }
+                                infoPluginUri = uiPlugin.uri;
+                            }
+                        }
+                    }
+                    const classes = withStyles.getClasses(this.props);
+                    if (missing) {
+                        return (
+                            <div style={{
+                                flex: "1 0 auto", overflow: "hidden", marginRight: 8, minWidth: 0,
+                                display: "flex", flexDirection: "row", height: 48, flexWrap: "nowrap",
+                                alignItems: "center"
+                            }}>
+                                <div style={{ flex: "0 1 auto", minWidth: 0 }}>
+                                    <span style={{ color: isDarkMode() ? "#F02020" : "#800000" }}>
+                                        <span className={classes.title}>{title}</span>
+                                    </span>
+                                </div>
+                            </div>
+                        );
+
+                    } else {
+                        return (
+                            <div style={{
+                                flex: "1 1 auto", minWidth: 0, overflow: "hidden",
+                                display: "flex", flexDirection: "row", height: 48, flexWrap: "nowrap",
+                                alignItems: "center"
+                            }}>
+                                <div style={{ position: "relative", flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
+                                    {canEditTitle ? (
+                                        <ButtonBase
+                                            style={{ borderRadius: "6px", width: "100%", paddingLeft: 8, paddingRight: 8, height: 48, textTransform: "none" }}
+                                            onClick={()=> {
+                                                this.handleEditPluginDisplayName();
+                                            }}
+                                        >
+                                            <span>
+                                                <span className={classes.title}>{title}</span>
+                                                {this.state.displayAuthor && (
+                                                    <span className={classes.author}>{author}</span>
+                                                )}
+                                            </span>
+                                        </ButtonBase>)
+                                        : (
+                                            <div style={{ flex: "0 1 auto", paddingLeft: 8, paddingRight: 8,minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
+                                                <span className={classes.title}>{title}</span>
+                                                {this.state.displayAuthor && (
+                                                    <span className={classes.author}>{author}</span>
+                                                )}
+                                            </div>
+
+                                        )}
+                                </div>
+                                <div style={{ flex: "0 0 auto", verticalAlign: "center" }}>
+                                    <PluginInfoDialog plugin_uri={infoPluginUri} />
+                                </div>
+                                <div style={{ flex: "0 0 auto" }}>
+                                    <PluginPresetSelector pluginUri={presetsUri} instanceId={pedalboardItem?.instanceId ?? 0}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    }
+                }
+
+                snapshotIcon(theme: Theme, snapshotNumber: number) {
+                    switch (snapshotNumber + 1) {
+                        case 0:
+                        default:
+                            return (<Snapshot0Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                        case 1:
+                            return (<Snapshot1Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                        case 2:
+                            return (<Snapshot2Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                        case 3:
+                            return (<Snapshot3Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                        case 4:
+                            return (<Snapshot4Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                        case 5:
+                            return (<Snapshot5Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                        case 6:
+                            return (<Snapshot6Icon style={{ height: 24, width: 24, fill: theme.palette.text.primary, opacity: 0.6 }} />);
+                    }
+                }
+
+                render() {
+                    const classes = withStyles.getClasses(this.props);
+                    let pedalboard = this.model.pedalboard.get();
+                    let pedalboardItem = this.getSelectedPedalboardItem();
+                    let uiPlugin = null;
+                    let bypassVisible = false;
+                    let bypassChecked = false;
+                    let canDelete = false;
+                    let canInsert = false;
+                    let canAppend = false;
+                    let canLoad = true;
+                    let instanceId = -1;
+                    let missing = false;
+                    let pluginUri = "#error";
+
+                    if (pedalboardItem) {
+                        canDelete = pedalboard.canDeleteItem(pedalboardItem.instanceId);
+                        instanceId = pedalboardItem.instanceId;
+                        if (pedalboardItem.isEmpty()) {
+                            canInsert = true;
+                            canAppend = true;
+
+                        } else if (pedalboardItem.isStart()) {
+                            canAppend = true;
+                            canDelete = false;
+                            canLoad = false;
+                        } else if (pedalboardItem.isEnd()) {
+                            canInsert = true;
+                            canDelete = false;
+                            canLoad = false;
+                        } else if (pedalboardItem.isSplit()) {
+                            canInsert = true;
+                            canAppend = true;
+                            canLoad = false;
+                        } else {
+                            pluginUri = pedalboardItem.uri;
+                            uiPlugin = this.model.getUiPlugin(pluginUri);
+                            canInsert = true;
+                            canAppend = true;
+                            if (uiPlugin) {
+                                bypassVisible = true;
+                                bypassChecked = pedalboardItem.isEnabled;
+                            } else {
+                                missing = true;
+                            }
+                        }
+                    }
+                    let horizontalScrollLayout = this.state.horizontalScrollLayout;
+
+                    return (
+                        <div className={classes.frame}>
+                            <div id="pedalboardScroll" className={horizontalScrollLayout ? classes.pedalboardScrollSmall : classes.pedalboardScroll}
+                                style={{ maxHeight: horizontalScrollLayout ? undefined : this.state.screenHeight / 2 }}>
+                                <PedalboardView key={pluginUri} selectedId={this.state.selectedPedal}
+                                    enableStructureEditing={this.props.enableStructureEditing}
+                                    onSelectionChanged={this.onSelectionChanged}
+                                    onDoubleClick={this.onPedalDoubleClick}
+                                    hasTinyToolBar={this.props.hasTinyToolBar}
+                                />
+                            </div>
+                            <div className={classes.separator} />
+                            <div className={classes.controlToolBar}>
+                                <div style={{
+                                    display: "flex", flexFlow: "row nowrap", alignItems: "center", justifyContent: "center", minWidth: 0,
+                                    width: "100%", height: 48, paddingLeft: 16, paddingRight: 16
+                                }} >
+                                    <div style={{ flex: "0 0 auto", width: this.state.splitControlBar ? undefined : 60 }} >
+                                        <div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar ? undefined : 60 }} >
+                                            <ToolTipEx title="Bypass"
+                                            >
+                                                <Switch color="secondary" checked={bypassChecked} onChange={this.handleEnableCurrentItemChanged} />
+                                            </ToolTipEx>
+                                        </div>
+                                    </div>
+                                    {
+                                        (!this.state.splitControlBar || !this.props.enableStructureEditing)
+                                        && this.titleBar(pedalboardItem)
+                                    }
+                                    <div style={{ flex: "1 1 1px" }}>
+
+                                    </div>
+                                    {this.props.enableStructureEditing && (
+                                        <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center" }}>
+                                            <div style={{ flex: "0 0 auto", display: (canInsert || canAppend) ? "block" : "none", paddingRight: 8 }}>
+                                                <IconButtonEx tooltip="Add pedal slot" onClick={(e) => { this.onAddClick(e) }} size="large">
+                                                    <AddIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
+                                                </IconButtonEx>
+                                                <Menu
+                                                    id="add-menu"
+                                                    anchorEl={this.state.addMenuAnchorEl}
+                                                    keepMounted
+                                                    open={Boolean(this.state.addMenuAnchorEl)}
+                                                    onClose={() => this.handleAddClose()}
+                                                    TransitionComponent={Fade}
+                                                >
+                                                    {canInsert && (<MenuItem onClick={() => this.onInsertPedal(instanceId)}>Insert pedal</MenuItem>)}
+                                                    {canAppend && (<MenuItem onClick={() => this.onAppendPedal(instanceId)}>Append pedal</MenuItem>)}
+                                                    <Divider />
+                                                    {canInsert && (<MenuItem onClick={() => this.onInsertSplit(instanceId)}>Insert split</MenuItem>)}
+                                                    {canAppend && (<MenuItem onClick={() => this.onAppendSplit(instanceId)}>Append split</MenuItem>)}
+                                                </Menu>
+                                            </div>
+                                            <div style={{ flex: "0 0 auto", display: canDelete ? "block" : "none", paddingRight: 8 }}>
+                                                <IconButtonEx tooltip="Delete pedal"
+                                                    onClick={() => { this.onDeletePedal(pedalboardItem?.instanceId ?? -1) }}
+                                                    size="large">
+                                                    <OldDeleteIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
+                                                </IconButtonEx>
+                                            </div>
+                                            <div style={{ flex: "0 0 auto" }}>
+                                                <ButtonEx
+                                                    variant="contained"
+                                                    color="primary"
+                                                    size="small"
+                                                    tooltip="Load plugin"
+                                                    onClick={this.onLoadClick}
+                                                    disabled={this.state.selectedPedal === -1 || (!canLoad) || (this.getSelectedPedalboardItem()?.isSplit() ?? true)}
+                                                    startIcon={<InputIcon />}
+                                                    style={{
+                                                        textTransform: "none",
+                                                        background: (isDarkMode() ? "#6750A4" : undefined)
+                                                    }}
+                                                >
+                                                    Load
+                                                </ButtonEx>
+                                            </div>
+                                            <div style={{ flex: "0 0 auto" }}>
+                                                <IconButtonEx tooltip="MIDI bindings"
+                                                    onClick={(e) => { this.handleMidiConfiguration(instanceId); }}
+                                                    size="large">
+                                                    <MidiIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
+                                                </IconButtonEx>
+                                            </div>
+                                            <div style={{ flex: "0 0 auto" }}>
+                                                <IconButtonEx tooltip="Snapshots"
+                                                    onClick={(e) => { this.setState({ snapshotDialogOpen: true }); }}
+                                                    size="large">
+                                                    {this.snapshotIcon(this.props.theme, this.state.selectedSnapshot)}
+                                                </IconButtonEx>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                            {
+                                this.state.splitControlBar && this.props.enableStructureEditing && (
+                                    <div className={classes.splitControlBar}>
+                                        {
+                                            this.titleBar(pedalboardItem)
+                                        }
+                                    </div>
+                                )
+                            }
+                            <div id="mainPageControls" className={horizontalScrollLayout ? classes.controlContentSmall : classes.controlContent}>
+                                {
+                                    missing ? (
+                                        <div style={{ marginLeft: 40, marginTop: 20 }}>
+                                            <Typography variant="body1" paragraph={true}>Error: Plugin is not installed.</Typography>
+                                            <Typography variant="body2" paragraph={true}>{pluginUri}</Typography>
+                                        </div>
+
+                                    ) :
+                                        (
+                                            GetControlView(pedalboardItem)
+                                        )
+                                }
+                            </div>
+                            <MidiBindingsDialog open={this.state.showMidiBindingsDialog}
+                                onClose={() => this.setState({ showMidiBindingsDialog: false })}
+                            />
+                            {
+                                (this.state.loadDialogOpen) && (
+                                    <LoadPluginDialog open={this.state.loadDialogOpen} uri={this.getSelectedUri()}
+                                        onOk={this.onLoadOk} onCancel={this.onLoadCancel}
+                                    />
+
+                                )
+                            }
+                            {(this.state.snapshotDialogOpen) && (
+                                <SnapshotDialog open={this.state.snapshotDialogOpen} onOk={() => this.onSnapshotDialogOk()} />
+                            )}
+                            {(this.state.displayNameDialogOpen) && (
+                                <RenameDialog open={this.state.displayNameDialogOpen}
+                                    allowEmpty={true}
+                                    defaultName={pedalboardItem?.title ?? ""}
+                                    title="Plugin Display Name"
+                                    acceptActionName="OK"
+                                    onClose={() => this.setState({ displayNameDialogOpen: false })}
+                                    onOk={(newName: string) => {
+                                        if (pedalboardItem) {
+                                            this.model.setPedalboardItemTitle(pedalboardItem.instanceId, newName);
+                                        }
+                                        this.setState({ displayNameDialogOpen: false });
+                                    }}
+                                />
+                            )}  
+                        </div>
+                    );
+                }
+            },
+            styles
+        ));
 
 export default MainPage
\ No newline at end of file
diff --git a/vite/src/pipedal/Pedalboard.tsx b/vite/src/pipedal/Pedalboard.tsx
index ce7ad12..c18a2cc 100644
--- a/vite/src/pipedal/Pedalboard.tsx
+++ b/vite/src/pipedal/Pedalboard.tsx
@@ -61,6 +61,7 @@ export class ControlValue implements Deserializable<ControlValue> {
 export class PedalboardItem implements Deserializable<PedalboardItem> {
     deserializePedalboardItem(input: any): PedalboardItem {
         this.instanceId = input.instanceId ?? -1;
+        this.title = input.title ?? "";
         this.uri = input.uri;
         this.pluginName = input.pluginName;
         this.isEnabled = input.isEnabled;
@@ -199,6 +200,7 @@ export class PedalboardItem implements Deserializable<PedalboardItem> {
     static EmptyArray: PedalboardItem[] = [];
 
     instanceId: number = -1;
+    title: string = "";
     isEnabled: boolean = false;
     uri: string = "";
     pluginName?: string;
diff --git a/vite/src/pipedal/PedalboardView.tsx b/vite/src/pipedal/PedalboardView.tsx
index c1fa5fe..ffd73f1 100644
--- a/vite/src/pipedal/PedalboardView.tsx
+++ b/vite/src/pipedal/PedalboardView.tsx
@@ -329,6 +329,9 @@ class PedalLayout {
                 this.pluginType = uiPlugin.plugin_type;
                 this.iconUrl = SelectIconUri(uiPlugin.plugin_type);
                 this.name = uiPlugin.label;
+                if (pedalItem.title !== "") {
+                    this.name = pedalItem.title;
+                }
                 this.numberOfInputs = Math.min(uiPlugin.audio_inputs, 2);
                 this.numberOfOutputs = Math.min(uiPlugin.audio_outputs, 2);
             } else {
diff --git a/vite/src/pipedal/PiPedalModel.tsx b/vite/src/pipedal/PiPedalModel.tsx
index 735fa1a..09fa78f 100644
--- a/vite/src/pipedal/PiPedalModel.tsx
+++ b/vite/src/pipedal/PiPedalModel.tsx
@@ -3153,7 +3153,22 @@ export class PiPedalModel //implements PiPedalModel
             30 * 1000);
 
     }
-
+    setPedalboardItemTitle(instanceId: number, title: string): void {
+        let pedalboard = this.pedalboard.get();
+        if (!pedalboard) {
+            throw new PiPedalStateError("Pedalboard not loaded.");
+        }
+        let newPedalboard = pedalboard.clone();
+        this.updateVst3State(newPedalboard);
+        let item = newPedalboard.getItem(instanceId);
+        if (item.title === title) {
+            return;
+        }
+        item.title = title;
+        this.pedalboard.set(newPedalboard);
+        // notify the server.
+        // xxx;
+    }
 };
 
 let instance: PiPedalModel | undefined = undefined;
diff --git a/vite/src/pipedal/PluginPresetSelector.tsx b/vite/src/pipedal/PluginPresetSelector.tsx
index 9f41d78..d3036a3 100644
--- a/vite/src/pipedal/PluginPresetSelector.tsx
+++ b/vite/src/pipedal/PluginPresetSelector.tsx
@@ -335,6 +335,7 @@ const PluginPresetSelector =
                             isEditDialog={this.state.showEditPresetsDialog} 
                             onDialogClose={() => this.handleDialogClose()} />
                         <RenameDialog open={this.state.renameDialogOpen}
+                            title="Rename"
                             defaultName={this.state.renameDialogDefaultName}
                             acceptActionName={this.state.renameDialogActionName}
                             onClose={() => this.handleRenameDialogClose()}
diff --git a/vite/src/pipedal/PluginPresetsDialog.tsx b/vite/src/pipedal/PluginPresetsDialog.tsx
index 6a19c0f..27d848c 100644
--- a/vite/src/pipedal/PluginPresetsDialog.tsx
+++ b/vite/src/pipedal/PluginPresetsDialog.tsx
@@ -413,6 +413,7 @@ const PluginPresetsDialog = withStyles(
                                                     Rename
                                                 </Button>
                                                 <RenameDialog
+                                                    title="Rename"
                                                     open={this.state.renameOpen}
                                                     defaultName={this.getSelectedName()}
                                                     acceptActionName={"Rename"}
diff --git a/vite/src/pipedal/PresetDialog.tsx b/vite/src/pipedal/PresetDialog.tsx
index e61e410..935ce03 100644
--- a/vite/src/pipedal/PresetDialog.tsx
+++ b/vite/src/pipedal/PresetDialog.tsx
@@ -395,6 +395,7 @@ const PresetDialog = withStyles(
                                                     Rename
                                                 </Button>
                                                 <RenameDialog
+                                                    title="Rename"
                                                     open={this.state.renameOpen}
                                                     defaultName={this.getSelectedName()}
                                                     acceptActionName={"Rename"}
diff --git a/vite/src/pipedal/PresetSelector.tsx b/vite/src/pipedal/PresetSelector.tsx
index b5e3614..5491519 100644
--- a/vite/src/pipedal/PresetSelector.tsx
+++ b/vite/src/pipedal/PresetSelector.tsx
@@ -50,6 +50,7 @@ interface PresetSelectorState {
     presetsMenuAnchorRef: HTMLElement | null;
 
     renameDialogOpen: boolean;
+    renameDialogTitle: string;
     renameDialogDefaultName: string;
     renameDialogActionName: string;
     renameDialogOnOk?: (name: string) => void;
@@ -95,6 +96,7 @@ const PresetSelector =
                     showEditPresetsDialog: false,
                     presetsMenuAnchorRef: null,
                     renameDialogOpen: false,
+                    renameDialogTitle: "",
                     renameDialogDefaultName: "",
                     renameDialogActionName: "",
                     renameDialogOnOk: undefined,
@@ -144,7 +146,7 @@ const PresetSelector =
                 if (item == null) return;
                 let name = item.name;
 
-                this.renameDialogOpen(name, "Save As")
+                this.renameDialogOpen(name, "Save Preset As", "OK")
                     .then((newName) => {
                         return this.model.saveCurrentPresetAs(newName);
                     })
@@ -167,7 +169,7 @@ const PresetSelector =
                 if (item == null) return;
                 let name = item.name;
 
-                this.renameDialogOpen(name, "Rename")
+                this.renameDialogOpen(name, "Rename Preset", "OK")
                     .then((newName) => {
                         if (newName === name) return;
                         return this.model.renamePresetItem(this.model.presets.get().selectedInstanceId, newName);
@@ -196,12 +198,13 @@ const PresetSelector =
             showError(error: string) {
                 this.model.showAlert(error);
             }
-            renameDialogOpen(defaultText: string, acceptButtonText: string): Promise<string> {
+            renameDialogOpen(defaultText: string, title: string,acceptButtonText: string): Promise<string> {
                 let result = new Promise<string>(
                     (resolve, reject) => {
                         this.setState(
                             {
                                 renameDialogOpen: true,
+                                renameDialogTitle: title,
                                 renameDialogDefaultName: defaultText,
                                 renameDialogActionName: acceptButtonText,
                                 renameDialogOnOk: (name) => {
@@ -365,6 +368,7 @@ const PresetSelector =
                         </div>
                         <PresetDialog show={this.state.showPresetsDialog} isEditDialog={this.state.showEditPresetsDialog} onDialogClose={() => this.handleDialogClose()} />
                         <RenameDialog open={this.state.renameDialogOpen}
+                            title={this.state.renameDialogTitle}
                             defaultName={this.state.renameDialogDefaultName}
                             acceptActionName={this.state.renameDialogActionName}
                             onClose={() => this.handleRenameDialogClose()}
diff --git a/vite/src/pipedal/RenameDialog.tsx b/vite/src/pipedal/RenameDialog.tsx
index c795c60..e802165 100644
--- a/vite/src/pipedal/RenameDialog.tsx
+++ b/vite/src/pipedal/RenameDialog.tsx
@@ -20,6 +20,7 @@
 import React from 'react';
 import Button from '@mui/material/Button';
 import DialogEx from './DialogEx';
+import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import { nullCast } from './Utility';
@@ -33,6 +34,9 @@ export interface RenameDialogProps {
     open: boolean,
     defaultName: string,
     acceptActionName: string,
+    title: string,
+    allowEmpty?: boolean,
+    label?: string,
     onOk: (text: string) => void,
     onClose: () => void
 };
@@ -102,7 +106,7 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
                 model.showAlert(e.toString());
                 return;
             }
-            if (text.length === 0) return;
+            if (text.length === 0 && props.allowEmpty !== true) return;
             onOk(text);
         }
         const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
@@ -119,20 +123,23 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
                 style={{userSelect: "none"}}
                 onEnterKey={()=>{}}
                 >
-                <DialogContent style={{minHeight: 96}}>
+                    <DialogTitle>
+                        {props.title ?? "Rename"}
+                    </DialogTitle>
+
+                <DialogContent >
                     <TextField
                     
                         onKeyDown={handleKeyDown}
-                        margin="dense"
-                        variant="outlined"
+                        variant="standard"
                         slotProps={{
                             input: {
                                 style: { scrollMargin: 24 }
                             }
                         }}
                         id="name"
-                        label="Name"
                         type="text"
+                        label={props.label ?? "Name"}
                         fullWidth
                         defaultValue={defaultName}
                         inputRef={this.refText}