diff --git a/.gitignore b/.gitignore
index 82c1a0b..870089d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 node_modules
 dist
 coverege
-.theia
\ No newline at end of file
+idea
\ No newline at end of file
diff --git a/src/modules/core/components/Canvas.tsx b/src/modules/core/components/Canvas.tsx
index f6fb956..3ed4daf 100644
--- a/src/modules/core/components/Canvas.tsx
+++ b/src/modules/core/components/Canvas.tsx
@@ -1,9 +1,8 @@
 import React, { Component, createRef, Ref, RefObject } from 'react'
-import FluidCanvas, { MouseEventInfo } from './FluidCanvas'
+import FluidCanvas from './FluidCanvas'
 import loop from 'mainloop.js'
 import { Gate } from '../../simulation/classes/Gate'
 import { SimulationRenderer } from '../../simulationRenderer/classes/SimulationRenderer'
-import { Subject } from 'rxjs'
 import { renderSimulation } from '../../simulationRenderer/helpers/renderSimulation'
 import { updateSimulation } from '../../simulationRenderer/helpers/updateSimulation'
 
diff --git a/src/modules/saving/helpers/getState.ts b/src/modules/saving/helpers/getState.ts
new file mode 100644
index 0000000..83550a5
--- /dev/null
+++ b/src/modules/saving/helpers/getState.ts
@@ -0,0 +1,49 @@
+import { SimulationRenderer } from '../../simulationRenderer/classes/SimulationRenderer'
+import { Gate } from '../../simulation/classes/Gate'
+import {
+    GateState,
+    TransformState,
+    RendererState,
+    CameraState,
+    SimulationState
+} from '../types/SimulationSave'
+import { Transform } from '../../../common/math/classes/Transform'
+import { Camera } from '../../simulationRenderer/classes/Camera'
+import { Simulation } from '../../simulation/classes/Simulation'
+
+export const getTransformState = (transform: Transform): TransformState => {
+    return {
+        position: transform.position,
+        rotation: transform.rotation,
+        scale: transform.scale
+    }
+}
+
+export const getCameraState = (camera: Camera): CameraState => {
+    return {
+        transform: getTransformState(camera.transform)
+    }
+}
+
+export const getSimulationState = (simulation: Simulation): SimulationState => {
+    return {
+        gates: Array.from(simulation.gates).map(getGateState)
+    }
+}
+
+export const getGateState = (gate: Gate): GateState => {
+    return {
+        id: gate.id,
+        template: gate.template.metadata.name,
+        transform: getTransformState(gate.transform)
+    }
+}
+
+export const getRendererState = (
+    renderer: SimulationRenderer
+): RendererState => {
+    return {
+        camera: getCameraState(renderer.camera),
+        simulation: getSimulationState(renderer.simulation)
+    }
+}
diff --git a/src/modules/saving/types/SimulationSave.ts b/src/modules/saving/types/SimulationSave.ts
new file mode 100644
index 0000000..cfa9ef9
--- /dev/null
+++ b/src/modules/saving/types/SimulationSave.ts
@@ -0,0 +1,26 @@
+import { vector2 } from '../../../common/math/classes/Transform'
+
+export interface TransformState {
+    position: vector2
+    scale: vector2
+    rotation: number
+}
+
+export interface GateState {
+    transform: TransformState
+    id: number
+    template: string
+}
+
+export interface CameraState {
+    transform: TransformState
+}
+
+export interface SimulationState {
+    gates: GateState[]
+}
+
+export interface RendererState {
+    simulation: SimulationState
+    camera: CameraState
+}
diff --git a/src/modules/simulation/constants.ts b/src/modules/simulation/constants.ts
index 4dcf074..6e928a2 100644
--- a/src/modules/simulation/constants.ts
+++ b/src/modules/simulation/constants.ts
@@ -1,6 +1,9 @@
 import { GateTemplate } from './types/GateTemplate'
 
 export const DefaultGateTemplate: GateTemplate = {
+    metadata: {
+        name: 'Default template'
+    },
     material: {
         type: 'color',
         value: 'blue'
diff --git a/src/modules/simulation/types/GateTemplate.ts b/src/modules/simulation/types/GateTemplate.ts
index b4132c1..6716f7b 100644
--- a/src/modules/simulation/types/GateTemplate.ts
+++ b/src/modules/simulation/types/GateTemplate.ts
@@ -20,4 +20,7 @@ export interface GateTemplate {
         inputs: PinCount
         outputs: PinCount
     }
+    metadata: {
+        name: string
+    }
 }
diff --git a/src/modules/simulationRenderer/classes/SimulationRenderer.ts b/src/modules/simulationRenderer/classes/SimulationRenderer.ts
index ca91092..00a80aa 100644
--- a/src/modules/simulationRenderer/classes/SimulationRenderer.ts
+++ b/src/modules/simulationRenderer/classes/SimulationRenderer.ts
@@ -13,6 +13,7 @@ import merge from 'deepmerge'
 import { getPinPosition } from '../helpers/pinPosition'
 import { pointInCircle } from '../../../common/math/helpers/pointInCircle'
 import { SelectedPins } from '../types/SelectedPins'
+import { getRendererState } from '../../saving/helpers/getState'
 
 export class SimulationRenderer {
     public mouseDownOutput = new Subject<MouseEventInfo>()
@@ -91,23 +92,24 @@ export class SimulationRenderer {
                             this.options.gates.pinRadius
                         )
                     ) {
-                        if (
-                            (pin.value.type & 0b10) >> 1 &&
-                            this.selectedPins.start === null
-                        ) {
+                        if ((pin.value.type & 0b10) >> 1) {
                             this.selectedPins.start = {
                                 wrapper: pin,
                                 transform
                             }
-                        } else if (
-                            pin.value.type & 1 &&
-                            this.selectedPins.end === null
-                        ) {
+                        } else if (pin.value.type & 1) {
                             this.selectedPins.end = {
                                 wrapper: pin,
                                 transform
                             }
                         }
+
+                        if (this.selectedPins.start && this.selectedPins.end) {
+                            console.log('Connecting!')
+                            console.log(getRendererState(this))
+                            this.selectedPins.start = null
+                            this.selectedPins.end = null
+                        }
                     }
                 }
             }
diff --git a/src/modules/simulationRenderer/constants.ts b/src/modules/simulationRenderer/constants.ts
index 563a4c0..7098fa4 100644
--- a/src/modules/simulationRenderer/constants.ts
+++ b/src/modules/simulationRenderer/constants.ts
@@ -9,5 +9,8 @@ export const defaultSimulationRendererOptions: SimulationRendererOptions = {
         pinRadius: 10,
         pinStrokeColor: '#888888',
         pinStrokeWidth: 3
+    },
+    wires: {
+        temporaryWireColor: `rgba(128,128,128,0.5)`
     }
 }
diff --git a/src/modules/simulationRenderer/helpers/renderClickedPins.ts b/src/modules/simulationRenderer/helpers/renderClickedPins.ts
index d6a3648..67df5f3 100644
--- a/src/modules/simulationRenderer/helpers/renderClickedPins.ts
+++ b/src/modules/simulationRenderer/helpers/renderClickedPins.ts
@@ -17,7 +17,7 @@ export const renderClickedPins = (
     if (pin) {
         const position = getPinPosition(renderer, pin.transform, pin.wrapper)
 
-        ctx.strokeStyle = 'yellow'
+        ctx.strokeStyle = renderer.options.wires.temporaryWireColor
         ctx.lineWidth = renderer.options.gates.pinRadius * 2
         ctx.lineCap = 'round'
 
diff --git a/src/modules/simulationRenderer/types/SimulationRendererOptions.ts b/src/modules/simulationRenderer/types/SimulationRendererOptions.ts
index bf471b8..e013453 100644
--- a/src/modules/simulationRenderer/types/SimulationRendererOptions.ts
+++ b/src/modules/simulationRenderer/types/SimulationRendererOptions.ts
@@ -8,4 +8,7 @@ export interface SimulationRendererOptions {
         pinStrokeColor: string
         pinStrokeWidth: number
     }
+    wires: {
+        temporaryWireColor: string
+    }
 }