diff --git a/src/components/DialogBox/CombinationalAnalysis.vue b/src/components/DialogBox/CombinationalAnalysis.vue
index e166f2af..76554346 100644
--- a/src/components/DialogBox/CombinationalAnalysis.vue
+++ b/src/components/DialogBox/CombinationalAnalysis.vue
@@ -35,7 +35,7 @@ import Output from '#/simulator/src/modules/Output'
 import AndGate from '#/simulator/src/modules/AndGate'
 import OrGate from '#/simulator/src/modules/OrGate'
 import NotGate from '#/simulator/src/modules/NotGate'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { findDimensions } from '#/simulator/src/canvasApi'
 import { confirmSingleOption } from '../helpers/confirmComponent/ConfirmComponent.vue'
 
diff --git a/src/components/DialogBox/InsertSubcircuit.vue b/src/components/DialogBox/InsertSubcircuit.vue
index f2c1b1a6..c0e35d7e 100644
--- a/src/components/DialogBox/InsertSubcircuit.vue
+++ b/src/components/DialogBox/InsertSubcircuit.vue
@@ -66,7 +66,7 @@ import { onMounted, onUpdated, ref } from '@vue/runtime-core'
 import { useState } from '#/store/SimulatorStore/state'
 import { createNewCircuitScope, scopeList } from '#/simulator/src/circuit'
 import SubCircuit from '#/simulator/src/subcircuit'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 const SimulatorState = useState()
 const flag = ref(true)
 onMounted(() => {
diff --git a/src/components/DialogBox/OpenOffline.vue b/src/components/DialogBox/OpenOffline.vue
index 73c7674b..3fe7063f 100644
--- a/src/components/DialogBox/OpenOffline.vue
+++ b/src/components/DialogBox/OpenOffline.vue
@@ -26,11 +26,12 @@
                             type="radio"
                             name="projectId"
                             :value="projectId"
+                            v-model="selectedProjectId"
                         />
                         {{ projectName }}<span></span>
                         <i
                             class="fa fa-trash deleteOfflineProject"
-                            @click="deleteOfflineProject(projectId)"
+                            @click="deleteOfflineProject(projectId.toString())"
                         ></i>
                     </label>
                     <p v-if="JSON.stringify(projectList) == '{}'">
@@ -64,21 +65,26 @@
 <script lang="ts" setup>
 import load from '#/simulator/src/data/load'
 import { useState } from '#/store/SimulatorStore/state'
-import { onMounted, onUpdated, ref, toRaw } from 'vue'
+import { onMounted, onUpdated, ref, reactive } from '@vue/runtime-core'
 const SimulatorState = useState()
-const projectList = ref({})
+const projectList: {
+    [key: string]: string
+} = reactive({})
+const selectedProjectId = ref<string | null>(null)
+
 onMounted(() => {
     SimulatorState.dialogBox.open_project_dialog = false
 })
 
 onUpdated(() => {
-    var data = localStorage.getItem('projectList')
-    projectList.value = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    projectList.value = data ? JSON.parse(data) : {}
 })
 
-function deleteOfflineProject(id) {
+function deleteOfflineProject(id: string) {
     localStorage.removeItem(id)
-    const temp = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    const temp = data ? JSON.parse(data) : {}
     delete temp[id]
     projectList.value = temp
     localStorage.setItem('projectList', JSON.stringify(temp))
@@ -86,10 +92,12 @@ function deleteOfflineProject(id) {
 
 function openProjectOffline() {
     SimulatorState.dialogBox.open_project_dialog = false
-    let ele = $('input[name=projectId]:checked')
-    if (!ele.val()) return
-    load(JSON.parse(localStorage.getItem(ele.val())))
-    window.projectId = ele.val()
+    if (!selectedProjectId.value) return
+    const projectData = localStorage.getItem(selectedProjectId.value)
+    if (projectData) {
+        load(JSON.parse(projectData))
+        window.projectId = selectedProjectId.value
+    }
 }
 
 function OpenImportProjectDialog() {
diff --git a/src/components/Panels/ElementsPanel/ElementsPanel.vue b/src/components/Panels/ElementsPanel/ElementsPanel.vue
index 564c612f..e9414a1c 100644
--- a/src/components/Panels/ElementsPanel/ElementsPanel.vue
+++ b/src/components/Panels/ElementsPanel/ElementsPanel.vue
@@ -142,7 +142,7 @@
 <script lang="ts" setup>
 import PanelHeader from '../Shared/PanelHeader.vue'
 import { elementHierarchy } from '#/simulator/src/metadata'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { uxvar } from '#/simulator/src/ux'
 import modules from '#/simulator/src/modules'
 import { onBeforeMount, ref } from 'vue'
diff --git a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
index 1fc88e1f..c972457a 100644
--- a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
+++ b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
@@ -96,7 +96,7 @@ import { toggleLayoutMode } from '#/simulator/src/layoutMode'
 //     scopeList,
 // } from '#/simulator/src/circuit'
 // import { showMessage } from '#/simulator/src/utils'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import InputGroups from '#/components/Panels/Shared/InputGroups.vue'
 // import MessageBox from '#/components/MessageBox/messageBox.vue'
 // import { ref, Ref, onMounted, watch } from 'vue'
diff --git a/src/components/Panels/PropertiesPanel/PropertiesPanel.vue b/src/components/Panels/PropertiesPanel/PropertiesPanel.vue
index ab56193a..867720cb 100644
--- a/src/components/Panels/PropertiesPanel/PropertiesPanel.vue
+++ b/src/components/Panels/PropertiesPanel/PropertiesPanel.vue
@@ -12,7 +12,7 @@
 import ModuleProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue'
 import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue'
 import { ref, toRaw, onMounted } from 'vue'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { checkPropertiesUpdate, prevPropertyObjSet } from '#/simulator/src/ux'
 import { layoutModeGet } from '#/simulator/src/layoutMode'
 
diff --git a/src/pages/embed.vue b/src/pages/embed.vue
index 512ba7d6..979f2ad2 100644
--- a/src/pages/embed.vue
+++ b/src/pages/embed.vue
@@ -165,7 +165,7 @@
 <script lang="ts" setup>
 import { ref, onBeforeMount, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import simulationArea, { changeClockTime } from '#/simulator/src/simulationArea'
+import { simulationArea, changeClockTime } from '#/simulator/src/simulationArea'
 import {
     scheduleUpdate,
     updateCanvasSet,
diff --git a/src/simulator/src/Verilog2CV.js b/src/simulator/src/Verilog2CV.js
index 83e7641e..dca56483 100644
--- a/src/simulator/src/Verilog2CV.js
+++ b/src/simulator/src/Verilog2CV.js
@@ -4,7 +4,7 @@ import {
     changeCircuitName,
 } from './circuit'
 import SubCircuit from './subcircuit'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import CodeMirror from 'codemirror/lib/codemirror.js'
 import 'codemirror/lib/codemirror.css'
 
diff --git a/src/simulator/src/backgroundArea.js b/src/simulator/src/backgroundArea.js
deleted file mode 100644
index 49da21aa..00000000
--- a/src/simulator/src/backgroundArea.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { dots } from './canvasApi'
-
-var backgroundArea
-export default backgroundArea = {
-    canvas: document.getElementById('backgroundArea'),
-    setup() {
-        this.canvas = document.getElementById('backgroundArea')
-        this.canvas.width = width
-        this.canvas.height = height
-        this.context = this.canvas.getContext('2d')
-        dots(true, false)
-    },
-    clear() {
-        if (!this.context) return
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-    },
-}
diff --git a/src/simulator/src/backgroundArea.ts b/src/simulator/src/backgroundArea.ts
new file mode 100644
index 00000000..7556b0f8
--- /dev/null
+++ b/src/simulator/src/backgroundArea.ts
@@ -0,0 +1,20 @@
+import { BackgroundArea } from './interface/backgroundArea'
+import { dots } from './canvasApi';
+
+export const backgroundArea: BackgroundArea = {
+    canvas: null,
+    context: null,
+    setup() {
+        this.canvas = document.getElementById('backgroundArea') as HTMLCanvasElement;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.context = this.canvas.getContext('2d');
+        dots(true, false);
+    },
+    clear() {
+        if (!this.context || !this.canvas) {
+            return;
+        }
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+};
diff --git a/src/simulator/src/canvasApi.js b/src/simulator/src/canvasApi.js
index a1835d4a..34e42960 100644
--- a/src/simulator/src/canvasApi.js
+++ b/src/simulator/src/canvasApi.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-import backgroundArea from './backgroundArea'
-import simulationArea from './simulationArea'
+import { backgroundArea } from './backgroundArea'
+import { simulationArea } from './simulationArea'
 import miniMapArea, { removeMiniMap, updatelastMinimapShown } from './minimap'
 import { colors } from './themer/themer'
 import { updateOrder } from './metadata'
@@ -241,7 +241,10 @@ export function moveTo(ctx, x1, y1, xx, yy, dir, bypass = false) {
     xx *= globalScope.scale
     yy *= globalScope.scale
     if (bypass) {
-        ctx.moveTo(xx + globalScope.ox + newX, yy + globalScope.oy + newY)
+        ctx.moveTo(
+            Math.round(xx + globalScope.ox + newX),
+            Math.round(yy + globalScope.oy + newY)
+        )
     } else {
         ctx.moveTo(
             Math.round(xx + globalScope.ox + newX - correction) + correction,
diff --git a/src/simulator/src/circuit.js b/src/simulator/src/circuit.js
index 6469c564..fbe0e619 100644
--- a/src/simulator/src/circuit.js
+++ b/src/simulator/src/circuit.js
@@ -11,7 +11,7 @@
 /* eslint-disable no-alert */
 import CircuitElement from './circuitElement'
 import plotArea from './plotArea'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     stripTags,
     uniq,
diff --git a/src/simulator/src/circuitElement.js b/src/simulator/src/circuitElement.js
index cd368c4d..0ec2601d 100644
--- a/src/simulator/src/circuitElement.js
+++ b/src/simulator/src/circuitElement.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-multi-assign */
 /* eslint-disable no-bitwise */
 import { scheduleUpdate } from './engine'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     fixDirection,
     fillText,
@@ -154,7 +154,7 @@ export default class CircuitElement {
     /**
      * To generate JSON-safe data that can be loaded
      * @memberof CircuitElement
-     * @return {JSON} - the data to be saved
+     * @return {object} - the data to be saved
      */
     saveObject() {
         var data = {
@@ -176,7 +176,7 @@ export default class CircuitElement {
     /**
      * Always overriden
      * @memberof CircuitElement
-     * @return {JSON} - the data to be saved
+     * @return {object} - the data to be saved
      */
     // eslint-disable-next-line class-methods-use-this
     customSave() {
@@ -852,7 +852,8 @@ export default class CircuitElement {
     resolve() {}
 
     /**
-     * Helper Function to process verilog
+     * Helper Function to process Verilog
+     * @return {string}
      */
     processVerilog() {
         // Output count used to sanitize output
@@ -956,8 +957,8 @@ export default class CircuitElement {
     }
 
     /**
-     * Helper Function to generate verilog
-     * @return {JSON}
+     * Helper Function to generate Verilog.
+     * @return {string}
      */
     generateVerilog() {
         // Example: and and_1(_out, _out, _Q[0]);
diff --git a/src/simulator/src/data/load.js b/src/simulator/src/data/load.js
index 5e33fc4c..43dd9bbc 100644
--- a/src/simulator/src/data/load.js
+++ b/src/simulator/src/data/load.js
@@ -8,7 +8,7 @@ import {
     gridUpdateSet,
 } from '../engine'
 import { updateRestrictedElementsInScope } from '../restrictedElementDiv'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 import { loadSubCircuit } from '../subcircuit'
 import { scheduleBackup } from './backupCircuit'
diff --git a/src/simulator/src/data/save.js b/src/simulator/src/data/save.js
index addd1ef2..7e255cca 100644
--- a/src/simulator/src/data/save.js
+++ b/src/simulator/src/data/save.js
@@ -3,8 +3,8 @@ import { resetup } from '../setup'
 import { update } from '../engine'
 import { stripTags, showMessage } from '../utils'
 import { backUp } from './backupCircuit'
-import simulationArea from '../simulationArea'
-import backgroundArea from '../backgroundArea'
+import { simulationArea } from '../simulationArea'
+import { backgroundArea } from '../backgroundArea'
 import { findDimensions } from '../canvasApi'
 import { projectSavedSet } from './project'
 import { colors } from '../themer/themer'
diff --git a/src/simulator/src/embed.js b/src/simulator/src/embed.js
index b17e82ba..f1a103ec 100644
--- a/src/simulator/src/embed.js
+++ b/src/simulator/src/embed.js
@@ -1,7 +1,7 @@
 // /* eslint-disable import/no-cycle */
 // // Helper functions for when circuit is embedded
 // import { scopeList, circuitProperty } from './circuit'
-// import simulationArea from './simulationArea'
+// import { simulationArea } from './simulationArea'
 // import {
 //     scheduleUpdate,
 //     wireToBeCheckedSet,
diff --git a/src/simulator/src/embedListeners.js b/src/simulator/src/embedListeners.js
index c7ba071a..cce262cb 100644
--- a/src/simulator/src/embedListeners.js
+++ b/src/simulator/src/embedListeners.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 // Listeners when circuit is embedded
 // Refer listeners.js
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     scheduleUpdate,
     update,
diff --git a/src/simulator/src/engine.js b/src/simulator/src/engine.js
index fdfbfd64..c90f3fc1 100644
--- a/src/simulator/src/engine.js
+++ b/src/simulator/src/engine.js
@@ -5,7 +5,7 @@
 /* eslint-disable no-bitwise */
 import { layoutModeGet, layoutUpdate } from './layoutMode'
 import plotArea from './plotArea'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { dots, canvasMessage, findDimensions, rect2 } from './canvasApi'
 import { showProperties, prevPropertyObjGet } from './ux'
 import { showError } from './utils'
diff --git a/src/simulator/src/eventQueue.js b/src/simulator/src/eventQueue.js
index 28a6dab0..a99cbfa9 100644
--- a/src/simulator/src/eventQueue.js
+++ b/src/simulator/src/eventQueue.js
@@ -2,7 +2,7 @@
  * Event Queue is simply a priority Queue, basic implementation O(n^2).
  * @category eventQueue
  */
-export default class EventQueue {
+export class EventQueue {
     constructor(size) {
         this.size = size
         this.queue = new Array(size)
diff --git a/src/simulator/src/events.js b/src/simulator/src/events.js
index 8c639a88..1834067b 100644
--- a/src/simulator/src/events.js
+++ b/src/simulator/src/events.js
@@ -11,7 +11,7 @@ import {
 import { backUp } from './data/backupCircuit'
 import { getNextPosition } from './modules'
 import { generateId } from './utils'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { TestbenchData } from './testbench'
 import { moduleList, updateOrder } from './metadata'
 
diff --git a/src/simulator/src/hotkey_binder/model/actions.js b/src/simulator/src/hotkey_binder/model/actions.js
index 9f992f36..42e886a0 100644
--- a/src/simulator/src/hotkey_binder/model/actions.js
+++ b/src/simulator/src/hotkey_binder/model/actions.js
@@ -1,7 +1,7 @@
 import { defaultKeys } from '../defaultKeys'
 import { addShortcut } from './addShortcut'
 import { updateHTML } from '../view/panel.ui'
-import simulationArea from '../../simulationArea'
+import { simulationArea } from '../../simulationArea'
 import {
     scheduleUpdate,
     wireToBeCheckedSet,
diff --git a/src/simulator/src/interface/backgroundArea.ts b/src/simulator/src/interface/backgroundArea.ts
new file mode 100644
index 00000000..e4d08e13
--- /dev/null
+++ b/src/simulator/src/interface/backgroundArea.ts
@@ -0,0 +1,6 @@
+export interface BackgroundArea {
+    canvas: HTMLCanvasElement | null;
+    context: CanvasRenderingContext2D | null;
+    setup(): void;
+    clear(): void;
+}
\ No newline at end of file
diff --git a/src/simulator/src/interface/simulationArea.ts b/src/simulator/src/interface/simulationArea.ts
new file mode 100644
index 00000000..bf153a3f
--- /dev/null
+++ b/src/simulator/src/interface/simulationArea.ts
@@ -0,0 +1,38 @@
+import { EventQueue } from '../eventQueue'
+export interface SimulationArea {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D|null;
+    selected: boolean;
+    hover: boolean;
+    clockState: number;
+    clockEnabled: boolean;
+    // TODO: make this CircuitElement|null once converted to typescript
+    lastSelected: any|null;
+    stack: any[];
+    prevScale: number;
+    oldx: number;
+    oldy: number;
+    objectList: any[];
+    maxHeight: number;
+    maxWidth: number;
+    minHeight: number;
+    minWidth: number;
+    multipleObjectSelections: any[];
+    copyList: any[];
+    shiftDown: boolean;
+    controlDown: boolean;
+    timePeriod: number;
+    mouseX: number;
+    mouseY: number;
+    mouseDownX: number;
+    mouseDownY: number;
+    simulationQueue: EventQueue;
+    clickCount: number;
+    lock: string;
+    mouseDown: boolean;
+    ClockInterval: NodeJS.Timeout|null;
+    timer: () => void;
+    setup: () => void;
+    changeClockTime: (t: number) => void;
+    clear: () => void;
+}
\ No newline at end of file
diff --git a/src/simulator/src/layout/layoutNode.js b/src/simulator/src/layout/layoutNode.js
index ddf199b3..e5eac8dd 100644
--- a/src/simulator/src/layout/layoutNode.js
+++ b/src/simulator/src/layout/layoutNode.js
@@ -1,5 +1,5 @@
 import { drawCircle } from '../canvasApi'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { tempBuffer } from '../layoutMode'
 
 /**
diff --git a/src/simulator/src/layoutMode.js b/src/simulator/src/layoutMode.js
index 20f426fa..65c72e2c 100644
--- a/src/simulator/src/layoutMode.js
+++ b/src/simulator/src/layoutMode.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-continue */
 import { dots, correctWidth, fillText, rect2 } from './canvasApi'
 import LayoutBuffer from './layout/layoutBuffer'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     fillSubcircuitElements,
     prevPropertyObjGet,
diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index fb02b8c7..35e4e512 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -5,7 +5,7 @@ import {
     layoutUpdate,
     // setupLayoutModePanelListeners,
 } from './layoutMode'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     scheduleUpdate,
     update,
diff --git a/src/simulator/src/minimap.js b/src/simulator/src/minimap.js
index 469fd25f..84286984 100644
--- a/src/simulator/src/minimap.js
+++ b/src/simulator/src/minimap.js
@@ -1,4 +1,4 @@
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { colors } from './themer/themer'
 import { layoutModeGet } from './layoutMode'
 import { updateOrder } from './metadata'
diff --git a/src/simulator/src/modules.js b/src/simulator/src/modules.js
index 41bacb6f..f52adb3b 100644
--- a/src/simulator/src/modules.js
+++ b/src/simulator/src/modules.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-cycle */
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 
 export function getNextPosition(x = 0, scope = globalScope) {
     let possibleY = 20
diff --git a/src/simulator/src/modules/ALU.js b/src/simulator/src/modules/ALU.js
index 19cda667..e8b65597 100644
--- a/src/simulator/src/modules/ALU.js
+++ b/src/simulator/src/modules/ALU.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText4 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/Adder.js b/src/simulator/src/modules/Adder.js
index 8f369a9f..205455b1 100644
--- a/src/simulator/src/modules/Adder.js
+++ b/src/simulator/src/modules/Adder.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/AndGate.js b/src/simulator/src/modules/AndGate.js
index 43c3fced..a8a6472a 100644
--- a/src/simulator/src/modules/AndGate.js
+++ b/src/simulator/src/modules/AndGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, arc } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { colors } from '../themer/themer'
diff --git a/src/simulator/src/modules/Arrow.js b/src/simulator/src/modules/Arrow.js
index 6d93a787..f0ec3204 100644
--- a/src/simulator/src/modules/Arrow.js
+++ b/src/simulator/src/modules/Arrow.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/BitSelector.js b/src/simulator/src/modules/BitSelector.js
index 8c91cee4..e5e1a1d6 100644
--- a/src/simulator/src/modules/BitSelector.js
+++ b/src/simulator/src/modules/BitSelector.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, extractBits } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Buffer.js b/src/simulator/src/modules/Buffer.js
index e287a6b2..e3011fa4 100644
--- a/src/simulator/src/modules/Buffer.js
+++ b/src/simulator/src/modules/Buffer.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Button.js b/src/simulator/src/modules/Button.js
index b108afaa..30110f07 100644
--- a/src/simulator/src/modules/Button.js
+++ b/src/simulator/src/modules/Button.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2 } from '../canvasApi'
 
 /**
diff --git a/src/simulator/src/modules/ConstantVal.js b/src/simulator/src/modules/ConstantVal.js
index d5f9028a..78329d56 100644
--- a/src/simulator/src/modules/ConstantVal.js
+++ b/src/simulator/src/modules/ConstantVal.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText, oppositeDirection } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/ControlledInverter.js b/src/simulator/src/modules/ControlledInverter.js
index dd843b75..a5e63d24 100644
--- a/src/simulator/src/modules/ControlledInverter.js
+++ b/src/simulator/src/modules/ControlledInverter.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Counter.js b/src/simulator/src/modules/Counter.js
index 7ffb23fc..10cc041f 100644
--- a/src/simulator/src/modules/Counter.js
+++ b/src/simulator/src/modules/Counter.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { lineTo, moveTo, fillText, correctWidth, rect2 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/Decoder.js b/src/simulator/src/modules/Decoder.js
index aa70719e..d1524e8e 100644
--- a/src/simulator/src/modules/Decoder.js
+++ b/src/simulator/src/modules/Decoder.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Demultiplexer.js b/src/simulator/src/modules/Demultiplexer.js
index feb21cfa..ecca8c6d 100644
--- a/src/simulator/src/modules/Demultiplexer.js
+++ b/src/simulator/src/modules/Demultiplexer.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/DigitalLed.js b/src/simulator/src/modules/DigitalLed.js
index 0a500ac3..9ed1ad7c 100644
--- a/src/simulator/src/modules/DigitalLed.js
+++ b/src/simulator/src/modules/DigitalLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     lineTo,
diff --git a/src/simulator/src/modules/Flag.js b/src/simulator/src/modules/Flag.js
index bb831022..31886de9 100644
--- a/src/simulator/src/modules/Flag.js
+++ b/src/simulator/src/modules/Flag.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText } from '../canvasApi'
 import plotArea from '../plotArea'
 /**
diff --git a/src/simulator/src/modules/Ground.js b/src/simulator/src/modules/Ground.js
index 704e3531..9677f525 100644
--- a/src/simulator/src/modules/Ground.js
+++ b/src/simulator/src/modules/Ground.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/HexDisplay.js b/src/simulator/src/modules/HexDisplay.js
index 77431ea0..b8e06a6a 100644
--- a/src/simulator/src/modules/HexDisplay.js
+++ b/src/simulator/src/modules/HexDisplay.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     lineTo,
diff --git a/src/simulator/src/modules/ImageAnnotation.js b/src/simulator/src/modules/ImageAnnotation.js
index 4273227a..838406d4 100644
--- a/src/simulator/src/modules/ImageAnnotation.js
+++ b/src/simulator/src/modules/ImageAnnotation.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText, drawImage } from '../canvasApi'
 import { colors } from '../themer/themer'
 import { promptFile, showMessage } from '../utils'
diff --git a/src/simulator/src/modules/Input.js b/src/simulator/src/modules/Input.js
index a7569e8c..d6ac8dd2 100644
--- a/src/simulator/src/modules/Input.js
+++ b/src/simulator/src/modules/Input.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, oppositeDirection, fillText } from '../canvasApi'
 import { getNextPosition } from '../modules'
 import { generateId } from '../utils'
diff --git a/src/simulator/src/modules/LSB.js b/src/simulator/src/modules/LSB.js
index 866fc67d..e9f2994b 100644
--- a/src/simulator/src/modules/LSB.js
+++ b/src/simulator/src/modules/LSB.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, dec2bin } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/MSB.js b/src/simulator/src/modules/MSB.js
index 8cbb5bc0..5b915996 100644
--- a/src/simulator/src/modules/MSB.js
+++ b/src/simulator/src/modules/MSB.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, dec2bin } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Multiplexer.js b/src/simulator/src/modules/Multiplexer.js
index 8a389a00..2c358405 100644
--- a/src/simulator/src/modules/Multiplexer.js
+++ b/src/simulator/src/modules/Multiplexer.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/NandGate.js b/src/simulator/src/modules/NandGate.js
index a086fb99..fd829f1a 100644
--- a/src/simulator/src/modules/NandGate.js
+++ b/src/simulator/src/modules/NandGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2, arc } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { gateGenerateVerilog } from '../utils'
diff --git a/src/simulator/src/modules/NorGate.js b/src/simulator/src/modules/NorGate.js
index 44f31244..aa7fde43 100644
--- a/src/simulator/src/modules/NorGate.js
+++ b/src/simulator/src/modules/NorGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { gateGenerateVerilog } from '../utils'
 
 import {
diff --git a/src/simulator/src/modules/NotGate.js b/src/simulator/src/modules/NotGate.js
index e04be86c..506c30f0 100644
--- a/src/simulator/src/modules/NotGate.js
+++ b/src/simulator/src/modules/NotGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/OrGate.js b/src/simulator/src/modules/OrGate.js
index 16835aa2..be5c52b8 100644
--- a/src/simulator/src/modules/OrGate.js
+++ b/src/simulator/src/modules/OrGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, bezierCurveTo, moveTo } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { gateGenerateVerilog } from '../utils'
diff --git a/src/simulator/src/modules/OrGate.ts b/src/simulator/src/modules/OrGate.ts
new file mode 100644
index 00000000..3b73b378
--- /dev/null
+++ b/src/simulator/src/modules/OrGate.ts
@@ -0,0 +1,133 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import { simulationArea } from '../simulationArea';
+import { correctWidth, bezierCurveTo, moveTo } from '../canvasApi';
+import { changeInputSize } from '../modules';
+import { gateGenerateVerilog } from '../utils';
+
+import { colors } from '../themer/themer';
+
+export default class OrGate extends CircuitElement {
+    private inp: Node[];
+    private inputSize: number;
+    private output1: Node;
+
+    constructor(
+        x: number,
+        y: number,
+        scope: any = globalScope,
+        dir: string = 'RIGHT',
+        inputs: number = 2,
+        bitWidth: number = 1
+    ) {
+        super(x, y, scope, dir, bitWidth);
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+        this.inp = [];
+        this.inputSize = inputs;
+        if (inputs % 2 === 1) {
+            for (let i = Math.floor(inputs / 2) - 1; i >= 0; i--) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-10, 0, 0, this);
+            this.inp.push(a);
+            for (let i = 0; i < Math.floor(inputs / 2); i++) {
+                a = new Node(-10, 10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = inputs / 2 - 1; i >= 0; i--) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = 0; i < inputs / 2; i++) {
+                const a = new Node(-10, 10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+        }
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    // Resolve output values based on inp
+    resolve() {
+        let result = this.inp[0].value || 0;
+        if (this.isResolvable() === false) {
+            return;
+        }
+        for (let i = 1; i < this.inputSize; i++) {
+            result |= this.inp[i].value || 0;
+        }
+        this.output1.value = result >>> 0;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    customDraw() {
+        var ctx = simulationArea.context;
+        if (ctx) {
+            ctx.strokeStyle = colors['stroke'];
+            ctx.lineWidth = correctWidth(3);
+
+            const xx = this.x;
+            const yy = this.y;
+            ctx.beginPath();
+            ctx.fillStyle = colors['fill'];
+
+            moveTo(ctx, -10, -20, xx, yy, this.direction, true);
+            bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
+            bezierCurveTo(
+                0 + 15,
+                0 + 10,
+                0,
+                0 + 20,
+                -10,
+                +20,
+                xx,
+                yy,
+                this.direction
+            );
+            bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
+            ctx.closePath();
+            if (
+                (this.hover && !simulationArea.shiftDown) ||
+                simulationArea.lastSelected === this ||
+                simulationArea.multipleObjectSelections.contains(this)
+            ) {
+                ctx.fillStyle = colors['hover_select'];
+            }
+            ctx.fill();
+            ctx.stroke();
+        }
+    }
+
+    customSave(): object {
+        const data = {
+            constructorParamaters: [
+                this.direction,
+                this.inputSize,
+                this.bitWidth,
+            ],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+        };
+        return data;
+    }
+
+    generateVerilog(): string {
+        return gateGenerateVerilog.call(this, '|');
+    }
+}
+
+OrGate.prototype.tooltipText =
+    'Or Gate Tooltip : Implements logical disjunction';
+
+OrGate.prototype.changeInputSize = changeInputSize;
+
+OrGate.prototype.alwaysResolve = true;
+
+OrGate.prototype.verilogType = 'or';
+OrGate.prototype.helplink =
+    'https://docs.circuitverse.org/#/chapter4/4gates?id=or-gate';
+OrGate.prototype.objectType = 'OrGate';
\ No newline at end of file
diff --git a/src/simulator/src/modules/Output.js b/src/simulator/src/modules/Output.js
index 9f028370..775ce0e1 100644
--- a/src/simulator/src/modules/Output.js
+++ b/src/simulator/src/modules/Output.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText, rect2, oppositeDirection } from '../canvasApi'
 import { getNextPosition } from '../modules'
 import { generateId } from '../utils'
diff --git a/src/simulator/src/modules/Power.js b/src/simulator/src/modules/Power.js
index 29228142..dfa4d3c3 100644
--- a/src/simulator/src/modules/Power.js
+++ b/src/simulator/src/modules/Power.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/PriorityEncoder.js b/src/simulator/src/modules/PriorityEncoder.js
index beaa2ab6..245dff9a 100644
--- a/src/simulator/src/modules/PriorityEncoder.js
+++ b/src/simulator/src/modules/PriorityEncoder.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, dec2bin } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/RGBLed.js b/src/simulator/src/modules/RGBLed.js
index 8487f49e..111c7810 100644
--- a/src/simulator/src/modules/RGBLed.js
+++ b/src/simulator/src/modules/RGBLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, arc, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/RGBLedMatrix.js b/src/simulator/src/modules/RGBLedMatrix.js
index 6720511c..4825b0f6 100644
--- a/src/simulator/src/modules/RGBLedMatrix.js
+++ b/src/simulator/src/modules/RGBLedMatrix.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, rotate, lineTo, moveTo } from '../canvasApi'
 
 /**
diff --git a/src/simulator/src/modules/Random.js b/src/simulator/src/modules/Random.js
index 01c9427b..8363d9a1 100644
--- a/src/simulator/src/modules/Random.js
+++ b/src/simulator/src/modules/Random.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText, lineTo, moveTo, correctWidth, rect2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Rectangle.js b/src/simulator/src/modules/Rectangle.js
index 5b589f47..4d509294 100644
--- a/src/simulator/src/modules/Rectangle.js
+++ b/src/simulator/src/modules/Rectangle.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/SevenSegDisplay.js b/src/simulator/src/modules/SevenSegDisplay.js
index da805d40..ecc7ebbc 100644
--- a/src/simulator/src/modules/SevenSegDisplay.js
+++ b/src/simulator/src/modules/SevenSegDisplay.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     colorToRGBA,
     correctWidth,
diff --git a/src/simulator/src/modules/SixteenSegDisplay.js b/src/simulator/src/modules/SixteenSegDisplay.js
index dc9a046b..cf72abdb 100644
--- a/src/simulator/src/modules/SixteenSegDisplay.js
+++ b/src/simulator/src/modules/SixteenSegDisplay.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     colorToRGBA,
     correctWidth,
diff --git a/src/simulator/src/modules/Splitter.js b/src/simulator/src/modules/Splitter.js
index 86c14d36..92b732fb 100644
--- a/src/simulator/src/modules/Splitter.js
+++ b/src/simulator/src/modules/Splitter.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText2 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/SquareRGBLed.js b/src/simulator/src/modules/SquareRGBLed.js
index bd6acd38..84e2c944 100644
--- a/src/simulator/src/modules/SquareRGBLed.js
+++ b/src/simulator/src/modules/SquareRGBLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, rect2 } from '../canvasApi'
 
 /**
diff --git a/src/simulator/src/modules/Stepper.js b/src/simulator/src/modules/Stepper.js
index f591a251..7b0b0cb1 100644
--- a/src/simulator/src/modules/Stepper.js
+++ b/src/simulator/src/modules/Stepper.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Text.js b/src/simulator/src/modules/Text.js
index ca8196be..c51f1354 100644
--- a/src/simulator/src/modules/Text.js
+++ b/src/simulator/src/modules/Text.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { rect2, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/TriState.js b/src/simulator/src/modules/TriState.js
index 4b62a3f8..bb26a8be 100644
--- a/src/simulator/src/modules/TriState.js
+++ b/src/simulator/src/modules/TriState.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Tunnel.js b/src/simulator/src/modules/Tunnel.js
index 798ad1d4..2f672a12 100644
--- a/src/simulator/src/modules/Tunnel.js
+++ b/src/simulator/src/modules/Tunnel.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText } from '../canvasApi'
 import plotArea from '../plotArea'
 import { showError } from '../utils'
diff --git a/src/simulator/src/modules/TwoComplement.js b/src/simulator/src/modules/TwoComplement.js
index 6a9f6a7e..686e0eff 100644
--- a/src/simulator/src/modules/TwoComplement.js
+++ b/src/simulator/src/modules/TwoComplement.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/VariableLed.js b/src/simulator/src/modules/VariableLed.js
index 4c44c9e6..efe9a054 100644
--- a/src/simulator/src/modules/VariableLed.js
+++ b/src/simulator/src/modules/VariableLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     lineTo,
diff --git a/src/simulator/src/modules/XnorGate.js b/src/simulator/src/modules/XnorGate.js
index f4a77077..ec9beff7 100644
--- a/src/simulator/src/modules/XnorGate.js
+++ b/src/simulator/src/modules/XnorGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     bezierCurveTo,
diff --git a/src/simulator/src/modules/XorGate.js b/src/simulator/src/modules/XorGate.js
index be78cfdd..1c9040cf 100644
--- a/src/simulator/src/modules/XorGate.js
+++ b/src/simulator/src/modules/XorGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, bezierCurveTo, moveTo, arc2 } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { gateGenerateVerilog } from '../utils'
diff --git a/src/simulator/src/modules/verilogDivider.js b/src/simulator/src/modules/verilogDivider.js
index 4d740f4e..c3421cc8 100644
--- a/src/simulator/src/modules/verilogDivider.js
+++ b/src/simulator/src/modules/verilogDivider.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogMultiplier.js b/src/simulator/src/modules/verilogMultiplier.js
index c8f49c6d..2e3a41db 100644
--- a/src/simulator/src/modules/verilogMultiplier.js
+++ b/src/simulator/src/modules/verilogMultiplier.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogPower.js b/src/simulator/src/modules/verilogPower.js
index 6ec2e464..10f764fa 100644
--- a/src/simulator/src/modules/verilogPower.js
+++ b/src/simulator/src/modules/verilogPower.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogShiftLeft.js b/src/simulator/src/modules/verilogShiftLeft.js
index 92aca634..012fa63f 100644
--- a/src/simulator/src/modules/verilogShiftLeft.js
+++ b/src/simulator/src/modules/verilogShiftLeft.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogShiftRight.js b/src/simulator/src/modules/verilogShiftRight.js
index 2f2c2634..5aad5c23 100644
--- a/src/simulator/src/modules/verilogShiftRight.js
+++ b/src/simulator/src/modules/verilogShiftRight.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/node.js b/src/simulator/src/node.js
index 80673ba8..03a37efb 100644
--- a/src/simulator/src/node.js
+++ b/src/simulator/src/node.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-cycle */
 import { drawCircle, drawLine, arc } from './canvasApi'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { distance, showError } from './utils'
 import {
     renderCanvas,
diff --git a/src/simulator/src/plotArea.js b/src/simulator/src/plotArea.js
index b0624384..059dde11 100644
--- a/src/simulator/src/plotArea.js
+++ b/src/simulator/src/plotArea.js
@@ -1,4 +1,4 @@
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { convertors } from './utils'
 
 var DPR = window.devicePixelRatio || 1
diff --git a/src/simulator/src/quinMcCluskey.js b/src/simulator/src/quinMcCluskey.ts
similarity index 84%
rename from src/simulator/src/quinMcCluskey.js
rename to src/simulator/src/quinMcCluskey.ts
index f15041db..5983fb47 100644
--- a/src/simulator/src/quinMcCluskey.js
+++ b/src/simulator/src/quinMcCluskey.ts
@@ -1,11 +1,18 @@
 // Algorithm used for Combinational Analysis
 
+type BooleanMinimizeType = {
+    minTerms: number[]
+    dontCares: number[]
+    numVars: number
+    result: string[]
+}
+
 export default function BooleanMinimize(
-    numVarsArg,
-    minTermsArg,
-    dontCaresArg = []
+    numVarsArg: number,
+    minTermsArg: number[],
+    dontCaresArg: number[] = []
 ) {
-    var __result
+    var __result: string[]
 
     Object.defineProperties(this, {
         minTerms: {
@@ -47,7 +54,7 @@ export default function BooleanMinimize(
 }
 
 BooleanMinimize.prototype.solve = function () {
-    function dec_to_binary_string(n) {
+    const dec_to_binary_string = (n: number) => {
         var str = n.toString(2)
 
         while (str.length != this.numVars) {
@@ -57,14 +64,14 @@ BooleanMinimize.prototype.solve = function () {
         return str
     }
 
-    function num_set_bits(s) {
+    const num_set_bits = (s: string) => {
         var ans = 0
         for (let i = 0; i < s.length; ++i) if (s[i] === '1') ans++
         return ans
     }
 
-    function get_prime_implicants(allTerms) {
-        var table = []
+    const get_prime_implicants = (allTerms: string[]) => {
+        var table: Set<string>[] = []
         var primeImplicants = new Set()
         var reduced
 
@@ -115,11 +122,11 @@ BooleanMinimize.prototype.solve = function () {
         return primeImplicants
     }
 
-    function get_essential_prime_implicants(primeImplicants, minTerms) {
+    const get_essential_prime_implicants = (primeImplicants: string[], minTerms: string[]) => {
         var table = [],
             column
 
-        function check_if_similar(minTerm, primeImplicant) {
+        const check_if_similar = (minTerm: string, primeImplicant: string) => {
             for (let i = 0; i < primeImplicant.length; ++i) {
                 if (
                     primeImplicant[i] !== '-' &&
@@ -131,7 +138,7 @@ BooleanMinimize.prototype.solve = function () {
             return true
         }
 
-        function get_complexity(terms) {
+        const get_complexity = (terms: string[]) => {
             var complexity = terms.length
 
             for (let t of terms) {
@@ -146,7 +153,7 @@ BooleanMinimize.prototype.solve = function () {
             return complexity
         }
 
-        function isSubset(sub, sup) {
+        const isSubset = (sub: Set<number>, sup: Set<number>) => {
             for (let i of sub) {
                 if (!sup.has(i)) return false
             }
@@ -166,8 +173,8 @@ BooleanMinimize.prototype.solve = function () {
             table.push(column)
         }
 
-        var possibleSets = [],
-            tempSets
+        let possibleSets: Set<number>[] = [],
+            tempSets: Set<number>[]
 
         for (let i of table[0]) {
             possibleSets.push(new Set([i]))
@@ -216,12 +223,12 @@ BooleanMinimize.prototype.solve = function () {
         return essentialImplicants
     }
 
-    var minTerms = this.minTerms.map(dec_to_binary_string.bind(this))
-    var dontCares = this.dontCares.map(dec_to_binary_string.bind(this))
+    var minTerms: string[] = this.minTerms.map(dec_to_binary_string.bind(this))
+    var dontCares: string[] = this.dontCares.map(dec_to_binary_string.bind(this))
 
     return get_essential_prime_implicants.call(
         this,
-        Array.from(get_prime_implicants.call(this, minTerms.concat(dontCares))),
+        Array.from(get_prime_implicants.call(this, minTerms.concat(dontCares))) as string[],
         minTerms
     )
 }
diff --git a/src/simulator/src/sequential.js b/src/simulator/src/sequential.js
index bd1740de..46dcd693 100644
--- a/src/simulator/src/sequential.js
+++ b/src/simulator/src/sequential.js
@@ -1,5 +1,5 @@
 import { scheduleUpdate, play, updateCanvasSet } from './engine'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 
 /**
  * a global function as a helper for simulationArea.changeClockEnable
@@ -8,18 +8,3 @@ import simulationArea from './simulationArea'
 export function changeClockEnable(val) {
     simulationArea.clockEnabled = val
 }
-
-/**
- * WIP function defined and used
- * @param {number} n
- * @category sequential
- */
-export function runTest(n = 10) {
-    var t = new Date().getTime()
-    for (var i = 0; i < n; i++) {
-        clockTick()
-    }
-    updateCanvasSet(true)
-    play()
-    scheduleUpdate()
-}
diff --git a/src/simulator/src/sequential/Clock.js b/src/simulator/src/sequential/Clock.js
index 76dc11ad..fcfac673 100644
--- a/src/simulator/src/sequential/Clock.js
+++ b/src/simulator/src/sequential/Clock.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 import { colors } from '../themer/themer'
 /**
diff --git a/src/simulator/src/sequential/DflipFlop.js b/src/simulator/src/sequential/DflipFlop.js
index 6fb034dd..f21fe2a1 100644
--- a/src/simulator/src/sequential/DflipFlop.js
+++ b/src/simulator/src/sequential/DflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 import { colors } from '../themer/themer'
 /**
diff --git a/src/simulator/src/sequential/Dlatch.js b/src/simulator/src/sequential/Dlatch.js
index 385ed63f..cc3b7097 100644
--- a/src/simulator/src/sequential/Dlatch.js
+++ b/src/simulator/src/sequential/Dlatch.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/ForceGate.js b/src/simulator/src/sequential/ForceGate.js
index 5da82c6f..332af06c 100644
--- a/src/simulator/src/sequential/ForceGate.js
+++ b/src/simulator/src/sequential/ForceGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText4 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/JKflipFlop.js b/src/simulator/src/sequential/JKflipFlop.js
index ccbff534..4f975c79 100644
--- a/src/simulator/src/sequential/JKflipFlop.js
+++ b/src/simulator/src/sequential/JKflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/Keyboard.js b/src/simulator/src/sequential/Keyboard.js
index c45ba677..a86a1d04 100644
--- a/src/simulator/src/sequential/Keyboard.js
+++ b/src/simulator/src/sequential/Keyboard.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText3 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/RAM.js b/src/simulator/src/sequential/RAM.js
index 41428297..cdaab091 100644
--- a/src/simulator/src/sequential/RAM.js
+++ b/src/simulator/src/sequential/RAM.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText2, fillText4, drawCircle2 } from '../canvasApi'
 import { parseNumber, showMessage } from '../utils'
 /**
diff --git a/src/simulator/src/sequential/Rom.js b/src/simulator/src/sequential/Rom.js
index de1b0884..06083e07 100644
--- a/src/simulator/src/sequential/Rom.js
+++ b/src/simulator/src/sequential/Rom.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText3 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/SRflipFlop.js b/src/simulator/src/sequential/SRflipFlop.js
index 0a7bd94f..9bf50a23 100644
--- a/src/simulator/src/sequential/SRflipFlop.js
+++ b/src/simulator/src/sequential/SRflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/TTY.js b/src/simulator/src/sequential/TTY.js
index f88513e9..44fad1c4 100644
--- a/src/simulator/src/sequential/TTY.js
+++ b/src/simulator/src/sequential/TTY.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText3 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/sequential/TflipFlop.js b/src/simulator/src/sequential/TflipFlop.js
index ca568452..ce1f7be9 100644
--- a/src/simulator/src/sequential/TflipFlop.js
+++ b/src/simulator/src/sequential/TflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/sequential/verilogRAM.js b/src/simulator/src/sequential/verilogRAM.js
index e653675c..c3915d47 100644
--- a/src/simulator/src/sequential/verilogRAM.js
+++ b/src/simulator/src/sequential/verilogRAM.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 /**
  * @class
  * verilogRAM Component.
diff --git a/src/simulator/src/setup.js b/src/simulator/src/setup.js
index 1860b426..3b514d77 100644
--- a/src/simulator/src/setup.js
+++ b/src/simulator/src/setup.js
@@ -2,9 +2,9 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import { generateId, showMessage } from './utils'
-import backgroundArea from './backgroundArea'
+import { backgroundArea } from './backgroundArea'
 import plotArea from './plotArea'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { dots } from './canvasApi'
 import { update, updateSimulationSet, updateCanvasSet } from './engine'
 import { setupUI } from './ux'
diff --git a/src/simulator/src/simulationArea.js b/src/simulator/src/simulationArea.js
deleted file mode 100644
index 3784988a..00000000
--- a/src/simulator/src/simulationArea.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable import/no-cycle */
-import EventQueue from './eventQueue'
-import { clockTick } from './utils'
-
-/**
- * simulation environment object - holds simulation canvas
- * @type {Object} simulationArea
- * @property {HTMLCanvasElement} canvas
- * @property {boolean} selected
- * @property {boolean} hover
- * @property {number} clockState
- * @property {boolean} clockEnabled
- * @property {undefined} lastSelected
- * @property {Array} stack
- * @property {number} prevScale
- * @property {number} oldx
- * @property {number} oldy
- * @property {Array} objectList
- * @property {number} maxHeight
- * @property {number} maxWidth
- * @property {number} minHeight
- * @property {number} minWidth
- * @property {Array} multipleObjectSelections
- * @property {Array} copyList - List of selected elements
- * @property {boolean} shiftDown - shift down or not
- * @property {boolean} controlDown - contol down or not
- * @property {number} timePeriod - time period
- * @property {number} mouseX - mouse x
- * @property {number} mouseY - mouse y
- * @property {number} mouseDownX - mouse click x
- * @property {number} mouseDownY - mouse click y
- * @property {Array} simulationQueue - simulation queue
- * @property {number} clickCount - number of clicks
- * @property {string} lock - locked or unlocked
- * @property {function} timer - timer
- * @property {function} setup - to setup the simulaton area
- * @property {function} changeClockTime - change clock time
- * @property {function} clear - clear the simulation area
- * @category simulationArea
- */
-const simulationArea = {
-    canvas: document.getElementById('simulationArea'),
-    selected: false,
-    hover: false,
-    clockState: 0,
-    clockEnabled: true,
-    lastSelected: undefined,
-    stack: [],
-    prevScale: 0,
-    oldx: 0,
-    oldy: 0,
-    objectList: [],
-    maxHeight: 0,
-    maxWidth: 0,
-    minHeight: 0,
-    minWidth: 0,
-    multipleObjectSelections: [],
-    copyList: [],
-    shiftDown: false,
-    controlDown: false,
-    timePeriod: 500,
-    mouseX: 0,
-    mouseY: 0,
-    mouseDownX: 0,
-    mouseDownY: 0,
-    simulationQueue: undefined,
-    multiAddElement: false,
-
-    clickCount: 0, // double click
-    lock: 'unlocked',
-    timer() {
-        ckickTimer = setTimeout(() => {
-            simulationArea.clickCount = 0
-        }, 600)
-    },
-
-    setup() {
-        this.canvas = document.getElementById('simulationArea')
-        this.canvas.width = width
-        this.canvas.height = height
-        this.simulationQueue = new EventQueue(10000)
-        this.context = this.canvas.getContext('2d')
-        simulationArea.changeClockTime(simulationArea.timePeriod)
-        this.mouseDown = false
-    },
-    changeClockTime(t) {
-        if (t < 50) return
-        clearInterval(simulationArea.ClockInterval)
-        t = t || prompt('Enter Time Period:')
-        simulationArea.timePeriod = t
-        simulationArea.ClockInterval = setInterval(clockTick, t)
-    },
-    clear() {
-        if (!this.context) return
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-    },
-}
-export const { changeClockTime } = simulationArea
-export default simulationArea
diff --git a/src/simulator/src/simulationArea.ts b/src/simulator/src/simulationArea.ts
new file mode 100644
index 00000000..e841e16f
--- /dev/null
+++ b/src/simulator/src/simulationArea.ts
@@ -0,0 +1,69 @@
+import { EventQueue } from './eventQueue'
+import { SimulationArea } from './interface/simulationArea'
+import { clockTick } from './utils'
+
+const simulationArea: SimulationArea = {
+    canvas: document.getElementById('simulationArea') as HTMLCanvasElement,
+    context: null,
+    selected: false,
+    hover: false,
+    clockState: 0,
+    clockEnabled: true,
+    lastSelected: null,
+    stack: [],
+    prevScale: 0,
+    oldx: 0,
+    oldy: 0,
+    objectList: [],
+    maxHeight: 0,
+    maxWidth: 0,
+    minHeight: 0,
+    minWidth: 0,
+    multipleObjectSelections: [],
+    copyList: [],
+    shiftDown: false,
+    controlDown: false,
+    timePeriod: 500,
+    mouseX: 0,
+    mouseY: 0,
+    mouseDownX: 0,
+    mouseDownY: 0,
+    simulationQueue: new EventQueue(10000),
+    clickCount: 0,
+    lock: 'unlocked',
+    mouseDown: false,
+    ClockInterval: null,
+
+    timer() {
+        const clickTimer = setTimeout(() => {
+            simulationArea.clickCount = 0
+        }, 600)
+    },
+    setup() {
+        this.canvas = document.getElementById('simulationArea') as HTMLCanvasElement;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.simulationQueue = new EventQueue(10000);
+        this.context = this.canvas.getContext('2d')!;
+        simulationArea.changeClockTime(simulationArea.timePeriod);
+        this.mouseDown = false;
+    },
+    changeClockTime(t: number) {
+        if (t < 50) {
+            return;
+        }
+        if (simulationArea.ClockInterval != null) {
+            clearInterval(simulationArea.ClockInterval);
+        }
+        simulationArea.timePeriod = t;
+        simulationArea.ClockInterval = setInterval(clockTick, t);
+    },
+    clear() {
+        if (!this.context) {
+            return;
+        }
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+};
+export { simulationArea }
+export const { changeClockTime } = simulationArea
\ No newline at end of file
diff --git a/src/simulator/src/subcircuit.js b/src/simulator/src/subcircuit.js
index 1cbd3052..f4ad994b 100644
--- a/src/simulator/src/subcircuit.js
+++ b/src/simulator/src/subcircuit.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 import Scope, { scopeList, switchCircuit } from './circuit'
 import CircuitElement from './circuitElement'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { scheduleBackup, checkIfBackup } from './data/backupCircuit'
 import {
     scheduleUpdate,
diff --git a/src/simulator/src/testbench/ForceGate.js b/src/simulator/src/testbench/ForceGate.js
index 5da82c6f..332af06c 100644
--- a/src/simulator/src/testbench/ForceGate.js
+++ b/src/simulator/src/testbench/ForceGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText4 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/testbench/testbenchInput.js b/src/simulator/src/testbench/testbenchInput.js
index 5186a065..84d8d21b 100644
--- a/src/simulator/src/testbench/testbenchInput.js
+++ b/src/simulator/src/testbench/testbenchInput.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 import Node, { findNode } from '../node'
 import plotArea from '../plotArea'
diff --git a/src/simulator/src/testbench/testbenchOutput.js b/src/simulator/src/testbench/testbenchOutput.js
index 184467c8..49117626 100644
--- a/src/simulator/src/testbench/testbenchOutput.js
+++ b/src/simulator/src/testbench/testbenchOutput.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText } from '../canvasApi'
 import Node, { findNode } from '../node'
 
diff --git a/src/simulator/src/themer/themer.js b/src/simulator/src/themer/themer.js
index 1f5bcc31..c514f4ff 100644
--- a/src/simulator/src/themer/themer.js
+++ b/src/simulator/src/themer/themer.js
@@ -5,7 +5,7 @@ import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
 
 /**
  * Extracts canvas theme colors from CSS-Variables and returns a JSON Object
- * @returns {object}
+ * @returns {Object.<string, string>}
  */
 const getCanvasColors = () => {
     let colors = {}
diff --git a/src/simulator/src/utils.js b/src/simulator/src/utils.js
index 77c941ac..24ded222 100644
--- a/src/simulator/src/utils.js
+++ b/src/simulator/src/utils.js
@@ -1,4 +1,4 @@
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     scheduleUpdate,
     play,
diff --git a/src/simulator/src/ux.js b/src/simulator/src/ux.js
index 8ec24759..37f8643a 100644
--- a/src/simulator/src/ux.js
+++ b/src/simulator/src/ux.js
@@ -9,7 +9,7 @@ import {
     wireToBeCheckedSet,
     updateCanvasSet
 } from './engine'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import logixFunction from './data'
 import { circuitProperty } from './circuit'
 import { updateRestrictedElementsInScope } from './restrictedElementDiv'
diff --git a/src/simulator/src/wire.js b/src/simulator/src/wire.js
index 026eca83..3fe0bcb1 100644
--- a/src/simulator/src/wire.js
+++ b/src/simulator/src/wire.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-multi-assign */
 // wire object
 import { drawLine } from './canvasApi'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import Node from './node'
 import { updateSimulationSet, forceResetNodesSet } from './engine'
 import { colors } from './themer/themer'
diff --git a/src/styles/css/main.stylesheet.css b/src/styles/css/main.stylesheet.css
index b487179b..e359a041 100644
--- a/src/styles/css/main.stylesheet.css
+++ b/src/styles/css/main.stylesheet.css
@@ -1517,12 +1517,14 @@ input:checked + .slider:before {
 #miniMap {
     position: fixed;
     z-index: 3;
-    bottom: 20px;
-    right: 40px;
+    bottom: -6rem;
+    right: 0.5rem;
     overflow-y: scroll;
     opacity: 0.5;
     overflow: hidden;
     border: none;
+    height: 15rem;
+    width: 18rem;
 }
 
 .disable::after {
@@ -1856,7 +1858,7 @@ canvas {
     margin-bottom: 0.5rem;
 }
 
-/* 
+/*
 .ProseMirror ul {
     list-style-type: disc;
 }