diff --git a/src/editor/components/settings.tsx b/src/editor/components/settings.tsx
index d423e37a99c50a8567b742af62c5b5eb6f77b44b..c57a8f0acb00f94095be63e88032d05e7de989e4 100644
--- a/src/editor/components/settings.tsx
+++ b/src/editor/components/settings.tsx
@@ -1,28 +1,24 @@
 import React from "react";
+import { EditorSettings } from "../editor";
 
 interface SettingsProps {
-    labelVisibility: boolean; // TODO: Refactor to one settings object
-    onLabelVisibilityChange: (state: boolean) => void;
-
-    connectOnDrag: boolean;
-    onConnectOnDragChange: (state: boolean) => void;
+    settings: EditorSettings;
+    onSettingsChange: (settings: EditorSettings) => void;
 }
 
-function Settings({
-    labelVisibility,
-    onLabelVisibilityChange,
-    connectOnDrag,
-    onConnectOnDragChange,
-}: SettingsProps) {
+function Settings({ settings, onSettingsChange }: SettingsProps) {
     return (
         <div className={"SettingsMenu"}>
             <h3>Settings</h3>
             <input
                 id="node-label-visibility"
                 type={"checkbox"}
-                checked={labelVisibility}
+                checked={settings.visibleLabels}
                 onChange={(event) => {
-                    onLabelVisibilityChange(event.target.checked);
+                    onSettingsChange({
+                        ...settings,
+                        visibleLabels: event.target.checked,
+                    });
                 }}
             />
             <label htmlFor="node-label-visibility">Node labels</label>
@@ -30,9 +26,12 @@ function Settings({
             <input
                 id="connect-on-drag"
                 type={"checkbox"}
-                checked={connectOnDrag}
+                checked={settings.connectOnDrag}
                 onChange={(event) => {
-                    onConnectOnDragChange(event.target.checked);
+                    onSettingsChange({
+                        ...settings,
+                        connectOnDrag: event.target.checked,
+                    });
                 }}
             />
             <label htmlFor="connect-on-drag">Connect nodes when dragged</label>
diff --git a/src/editor/components/sidepanel.tsx b/src/editor/components/sidepanel.tsx
index 23ca313f8bdc8071c56da0b46077bdd77fd35c48..072735a1c7f798f3af069c5e1685213b74eb79b6 100644
--- a/src/editor/components/sidepanel.tsx
+++ b/src/editor/components/sidepanel.tsx
@@ -11,30 +11,26 @@ import { Checkpoint } from "../../common/history";
 import { Node } from "../../common/graph/node";
 import { NodeType } from "../../common/graph/nodetype";
 import { SimGraphData } from "../../common/graph/graph";
-import { NodeDataChangeRequest } from "../editor";
+import { EditorSettings, NodeDataChangeRequest } from "../editor";
 
 interface SidepanelProps {
     graph: DynamicGraph;
     onCheckpointLoad: { (checkpoint: Checkpoint<SimGraphData>): void };
     onNodeTypeSelect: (type: NodeType) => void;
-    onConnectOnDragChange: (connectOnDrag: boolean) => void;
-    onLabelVisibilityChange: (state: boolean) => void;
+    onSettingsChange: (settings: EditorSettings) => void;
     onNodeDataChange: { (requests: NodeDataChangeRequest[]): void };
     selectedNodes: Node[];
-    visibleLabels: boolean;
-    connectOnDrag: boolean;
+    settings: EditorSettings;
 }
 
 function Sidepanel({
     graph,
     onCheckpointLoad,
     onNodeTypeSelect,
-    onConnectOnDragChange,
-    onLabelVisibilityChange,
+    onSettingsChange,
     onNodeDataChange,
     selectedNodes,
-    visibleLabels,
-    connectOnDrag,
+    settings,
 }: SidepanelProps) {
     return (
         <div className={"editor-sidepanel"}>
@@ -57,15 +53,10 @@ function Sidepanel({
                 onSelectAll={onNodeTypeSelect}
             />
             <hr />
-            <Settings
-                labelVisibility={visibleLabels}
-                onLabelVisibilityChange={onLabelVisibilityChange}
-                connectOnDrag={connectOnDrag}
-                onConnectOnDragChange={onConnectOnDragChange}
-            />
+            <Settings settings={settings} onSettingsChange={onSettingsChange} />
             <hr />
 
-            <Instructions connectOnDragEnabled={connectOnDrag} />
+            <Instructions connectOnDragEnabled={settings.connectOnDrag} />
         </div>
     );
 }
diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
index d83243927c1dcfe0fb29518494b43dea35ad17dd..5b65cd29417a25b059d12c3085312c54d140b650 100644
--- a/src/editor/editor.tsx
+++ b/src/editor/editor.tsx
@@ -19,12 +19,7 @@ export interface NodeDataChangeRequest extends NodeProperties {
     type: NodeType;
 }
 
-type stateTypes = {
-    /**
-     * Graph structure holding the basic information.
-     */
-    graph: DynamicGraph;
-
+export interface EditorSettings {
     /**
      * Should labels on nodes be rendered, or none at all.
      */
@@ -34,6 +29,15 @@ type stateTypes = {
      * Should feature be enabled, that nodes get connected with a link of dragged close enough to each other?
      */
     connectOnDrag: boolean;
+}
+
+type stateTypes = {
+    /**
+     * Graph structure holding the basic information.
+     */
+    graph: DynamicGraph;
+
+    settings: EditorSettings;
 
     /**
      * Current width of graph object. Used to specifically adjust and correct the graph size.
@@ -88,8 +92,10 @@ export class Editor extends React.PureComponent<any, stateTypes> {
         // Set as new state
         this.state = {
             graph: undefined,
-            visibleLabels: true,
-            connectOnDrag: false,
+            settings: {
+                visibleLabels: true,
+                connectOnDrag: false,
+            },
             graphWidth: 1000,
             selectedNodes: [],
             keys: {},
@@ -280,19 +286,11 @@ export class Editor extends React.PureComponent<any, stateTypes> {
                                 });
                             }}
                             onNodeTypeSelect={this.handleNodeTypeSelect}
-                            onConnectOnDragChange={(connectOnDrag) =>
-                                this.setState({
-                                    connectOnDrag: connectOnDrag,
-                                })
-                            }
-                            onLabelVisibilityChange={(visible) =>
-                                this.setState({
-                                    visibleLabels: visible,
-                                })
+                            onSettingsChange={(settings) =>
+                                this.setState({ settings: settings })
                             }
                             selectedNodes={this.state.selectedNodes}
-                            visibleLabels={this.state.visibleLabels}
-                            connectOnDrag={this.state.connectOnDrag}
+                            settings={this.state.settings}
                             onNodeDataChange={this.handleNodeDataChange}
                         />
                     </div>