diff --git a/docs/main.md b/docs/main.md
index 83b52ce..56c62bc 100644
--- a/docs/main.md
+++ b/docs/main.md
@@ -1,124 +1,5 @@
-
+# Table of content:
-## Running the simulator
-
-There are 3 ways to get the simulator up and running:
-
-1. Using [the version hosted on heroku](https://logic-gate-simulator.herokuapp.com/):
-
-This is by far the fastest solution - everything you need to do is open
-[the github-pages url](https://logic-gate-simulator.herokuapp.com/)
-
-2. Using a development server:
-
-First you need to have [node.js & npm](https://nodejs.org/en/download/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed on your machine.
-
-Open a terminal in the desired folder and run:
-
-```sh
-# Clone repo
-git clone https://github.com/Mateiadrielrafael/logicGateSimulator
-
-# Cd into the folder
-cd logicGateSimulator
-
-# install dependencies
-npm install
-
-# run development server
-npm run dev
-```
-
-3. Building the simulation yourself
-
-First, clone the repo and install the dependencies as explained in option 2.
-
-To build the source run:
-
-```sh
-# build program
-npm run build
-```
-
-To then run the simulation, open a server in the dist directory. A simple solution using npm:
-
-```sh
-# instal nano-server globally
-npm i nano-server -g
-
-# change directory
-cd dist
-
-# run server
-nano-server
-
-# linux
-open http://localhost:5000
-
-# Windows
-start http://localhost:5000
-```
-
-## Building a 4 - bit adder:
-
-1. Create a new ic called `half-adder` (`Create simulation` > `Integrated circuit` > `Half adder`)
-
-2. Add the following logic gates (`Logic gates` > the name of the gate):
- - 2 buttons
- - 2 light bulbs
- - a XOR gate
- - an AND gate
-
-> You can get more info about these gates by clicking `Logic gates` > the info icon at the rght of the gate.
-
-3. To move a gate, drag & drop it with the right mouse button. To connect 2 pins, click once on each. Build the following configuration:
-
-![Half adder](./assets/half-adder.png)
-
-3. Create a new ic called `full-adder` (See step 1)
-4. Add the following gates (See step 2):
- - 3 buttons
- - 2 light bulbs
- - 2 half adders
- - an OR gate
-
-5) Build the following configuration (See step 3):
- ![Full adder](./assets/full-adder.png)
-
-6) Create a new project called `4-bit-adder` (`Create simulation` > `Project` > `4-bit-adder`)
-
-7) Add the following components (See step 2):
-
- - 8 button
- - 5 light bulbs
- - 3 full adders
- - 1 half adder
-
-8) Build the following configuration (See step 3):
- ![4-bit-adder](./assets/4-bit-adder.png)
-
-9) Enjoy!
- Congratiulations! You've made your first circuit! With this simulator at your dispossal, the possibilities are endless! Here are a few things you can try and create yourself: - A 4-bit substractor - A counter - Different latches - If you are confident in you skills, you can even make a full 4-bit processor!
-
-## The controls
-
-| Action | Keybinding | Gui |
-| :---------------------------------: | :---------------------: | :--------------------------------------------------------------------------: |
-| Save | `ctrl + s` | `Simulation` > `Save` |
-| Add a gate | - | click `logic-gates` > the gate you want to add |
-| Move a gate | - | drag & drop the gate using the `right mouse button` |
-| Pan | - | click & move & release the background useing the `right mouse button` |
-| Select multiple gates | - | click & move & release using the `left mouse button` |
-| Add to selection | `shift` | select while holding `shift` |
-| Select all gates | `ctrl + a` | `Simulation` > `Select all` |
-| Delete selection | `delete` | `Simulation` > `Delete selection` |
-| Undo _(to last save)_ | `ctrl + z` | `Simulation` > `Undo` |
-| Refresh (reload) simulation | `ctrl + r` | `Simulation` > `Refresh` |
-| Clean (delete unconnected gates) | `ctrl + delete` | `Simulation` > `Clean` |
-| Delete simulation | `ctrl + shift + delete` | `Simulation` > `Delete simulation` |
-| Open simulation | - | `Open simulation` > the simulation you want to open |
-| Create simulation | - | `Create simulation` > `Project` | `Integrated circuit` > type the name of the simulation |
-| Create project | - | `Create simulation` > `Project` > type the name of the simulation |
-| Create integrated circuit | - | `Create simulation` > `Integrated circuit` > type the name of the simulation |
-| Change language | - | Click on the `Language: \` button (bottom of the sidebar) |
-| Get more info about a built in gate | - | `Logic gates` > info |
+- [Running the simulator](./tutorials/running.md)
+- [Controls](./tutorials/controls.md)
+- [Building a 4-bit adder](./tutorials/4-bit-adder.md)
diff --git a/docs/tutorials/4-bit-adder.md b/docs/tutorials/4-bit-adder.md
new file mode 100644
index 0000000..f12240a
--- /dev/null
+++ b/docs/tutorials/4-bit-adder.md
@@ -0,0 +1,44 @@
+
+
+# Building a 4 - bit adder:
+
+0. To save the simulation press `ctrl + s` or click `Simulation` > `Save`. Save your progress after each step.
+
+1. Create a new ic called `half-adder` (`Create simulation` > `Integrated circuit` > `Half adder`)
+
+1. Add the following logic gates (`Logic gates` > the name of the gate):
+ - 2 buttons
+ - 2 light bulbs
+ - a XOR gate
+ - an AND gate
+
+> You can get more info about these gates by clicking `Logic gates` > the info icon at the rght of the gate.
+
+3. To move a gate, drag & drop it with the right mouse button. To connect 2 pins, click once on each. Build the following configuration:
+
+![Half adder](../assets/half-adder.png)
+
+3. Create a new ic called `full-adder` (See step 1)
+4. Add the following gates (See step 2):
+ - 3 buttons
+ - 2 light bulbs
+ - 2 half adders
+ - an OR gate
+
+5) Build the following configuration (See step 3):
+ ![Full adder](../assets/full-adder.png)
+
+6) Create a new project called `4-bit-adder` (`Create simulation` > `Project` > `4-bit-adder`)
+
+7) Add the following components (See step 2):
+
+ - 8 button
+ - 5 light bulbs
+ - 3 full adders
+ - 1 half adder
+
+8) Build the following configuration (See step 3):
+ ![4-bit-adder](../assets/4-bit-adder.png)
+
+9) Enjoy!
+ Congratiulations! You've made your first circuit! With this simulator at your dispossal, the possibilities are endless! Here are a few things you can try and create yourself: - A 4-bit substractor - A counter - Different latches - If you are confident in you skills, you can even make a full 4-bit processor!
diff --git a/docs/tutorials/controls.md b/docs/tutorials/controls.md
new file mode 100644
index 0000000..c8881ba
--- /dev/null
+++ b/docs/tutorials/controls.md
@@ -0,0 +1,24 @@
+
+
+# The controls
+
+| Action | Keybinding | Gui |
+| :---------------------------------: | :---------------------: | :--------------------------------------------------------------------------: |
+| Save | `ctrl + s` | `Simulation` > `Save` |
+| Add a gate | - | click `logic-gates` > the gate you want to add |
+| Move a gate | - | drag & drop the gate using the `right mouse button` |
+| Pan | - | click & move & release the background useing the `right mouse button` |
+| Select multiple gates | - | click & move & release using the `left mouse button` |
+| Add to selection | `shift` | select while holding `shift` |
+| Select all gates | `ctrl + a` | `Simulation` > `Select all` |
+| Delete selection | `delete` | `Simulation` > `Delete selection` |
+| Undo _(to last save)_ | `ctrl + z` | `Simulation` > `Undo` |
+| Refresh (reload) simulation | `ctrl + r` | `Simulation` > `Refresh` |
+| Clean (delete unconnected gates) | `ctrl + delete` | `Simulation` > `Clean` |
+| Delete simulation | `ctrl + shift + delete` | `Simulation` > `Delete simulation` |
+| Open simulation | - | `Open simulation` > the simulation you want to open |
+| Create simulation | - | `Create simulation` > `Project` | `Integrated circuit` > type the name of the simulation |
+| Create project | - | `Create simulation` > `Project` > type the name of the simulation |
+| Create integrated circuit | - | `Create simulation` > `Integrated circuit` > type the name of the simulation |
+| Change language | - | Click on the `Language: \` button (bottom of the sidebar) |
+| Get more info about a built in gate | - | `Logic gates` > info |
diff --git a/docs/tutorials/running.md b/docs/tutorials/running.md
new file mode 100644
index 0000000..1c41379
--- /dev/null
+++ b/docs/tutorials/running.md
@@ -0,0 +1,58 @@
+# Running the simulator
+
+There are 3 ways to get the simulator up and running:
+
+1. Using [the version hosted on heroku](https://logic-gate-simulator.herokuapp.com/):
+
+This is by far the fastest solution - everything you need to do is open
+[the github-pages url](https://logic-gate-simulator.herokuapp.com/)
+
+2. Using a development server:
+
+First you need to have [node.js & npm](https://nodejs.org/en/download/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed on your machine.
+
+Open a terminal in the desired folder and run:
+
+```sh
+# Clone repo
+git clone https://github.com/Mateiadrielrafael/logicGateSimulator
+
+# Cd into the folder
+cd logicGateSimulator
+
+# install dependencies
+npm install
+
+# run development server
+npm run dev
+```
+
+3. Building the simulation yourself
+
+First, clone the repo and install the dependencies as explained in option 2.
+
+To build the source run:
+
+```sh
+# build program
+npm run build
+```
+
+To then run the simulation, open a server in the dist directory. A simple solution using npm:
+
+```sh
+# instal nano-server globally
+npm i nano-server -g
+
+# change directory
+cd dist
+
+# run server
+nano-server
+
+# linux
+open http://localhost:5000
+
+# Windows
+start http://localhost:5000
+```
diff --git a/src/assets/not.svg b/src/assets/not.svg
index bf3fd26..b9c57e5 100644
--- a/src/assets/not.svg
+++ b/src/assets/not.svg
@@ -1,3 +1,15 @@
-