diff --git a/docs/api/index.yml b/docs/api/index.yml
index fdfb09c79..973469a20 100644
--- a/docs/api/index.yml
+++ b/docs/api/index.yml
@@ -1,3 +1,3 @@
 expanded: false
 label: 'API'
-order: -1001
+order: -1
diff --git a/docs/changelog.md b/docs/changelog.md
index 26a28b3c2..ae1fa241b 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,7 +1,3 @@
----
-order: -5
----
-
 # Changelog
 
 ## Version 19
diff --git a/docs/utilities/console-commands.md b/docs/console-commands.md
similarity index 96%
rename from docs/utilities/console-commands.md
rename to docs/console-commands.md
index 0384f5d45..9c3b6a0a8 100644
--- a/docs/utilities/console-commands.md
+++ b/docs/console-commands.md
@@ -1,4 +1,4 @@
-# Console Commands
+# Client Console Commands
 
 Console commands are commands that can be ran by opening your client-side `F8` console menu and typing a command.
 
diff --git a/docs/data/index.yml b/docs/data/index.yml
index 42639bf6f..7c56ca50d 100644
--- a/docs/data/index.yml
+++ b/docs/data/index.yml
@@ -1,3 +1,3 @@
 expanded: false
 label: 'Data'
-order: -1002
+order: -1
diff --git a/docs/developing.md b/docs/developing.md
deleted file mode 100644
index 7b606f0f3..000000000
--- a/docs/developing.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Development
-
-When developing there are a handful of useful commands you can use in a `terminal` to help you build your server.
-
-Let's talk about what some of those commands are.
-
-## Development Mode
-
-If you want to work on your code and automatically reconnect ensure you enable `debug` for your `alt:V Client` and then run the following in a `terminal`.
-
-```sh
-pnpm dev
-```
-
-## Webview Development Mode
-
-If you want to focus on your Webview development, you can use the following to open a local server to preview pages.
-
-**Note:** Ensure you restart the server when you create new vue components or new pages.
-
-```sh
-pnpm webview:dev
-```
-
-## Plugins
-
-Plugins should be your #1 way to build new features for your server. Try to build everything you can inside of a plugin.
diff --git a/docs/index.md b/docs/index.md
index 61d42e94e..508f87c79 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,30 +1,20 @@
----
-order: 100
----
-
 # What is Rebar?
 
 Rebar is a plug-and-play base framework for the alternative GTA:V multiplayer client alt:V. Rebar is meant to act as a light framework that provides utility, and a basic standard for building plugins that can be compatible with other plugins.
 
-It's a single resource game mode with the best features from the Athena Framework. It has a heavy focus on simplifying building game modes and lowering the friction of building a server.
+It has a heavy focus on simplifying building game modes and lowering the friction of building a server.
 
 ## Why Rebar?
 
 Rebar is the foundational piece necessary to construct large concrete structures. Think of this framework as achieving the same from a game-mode standpoint.
 
-## What about Athena?
-
-Athena I think has reached a point where I'm no longer interested in providing support for the project. It still works as a decent starting point, but I've added too many features to the point where it lost its way during production. I wanted Athena to be a plugin-based framework, but users kept pushing for more and more.
-
-With that being said, Rebar is an attempt to scavenge the good parts and leave behind the complexities.
-
-## Backward Compatible Plugins?
-
-No. Rebar will have a slightly different API that is similar to Vue Composables.
-
 ## Tech Stack
 
 -   Node.js
 -   TypeScript
 -   MongoDB
 -   Vue
+
+## How do I get started?
+
+Head on over to [Install & Upgrade](./install.md) to learn about the installation process.
diff --git a/docs/install.md b/docs/install.md
index 8ac150953..cbeb0984a 100644
--- a/docs/install.md
+++ b/docs/install.md
@@ -1,8 +1,8 @@
 ---
-order: 99
+order: 1
 ---
 
-# Installation
+# Install & Upgrade
 
 !!!
 Hey listen! When you run Rebar for the first time, you won't be able to spawn.
@@ -71,6 +71,12 @@ pnpm binaries
 pnpm start
 ```
 
+Alternatively, development mode can be started with
+
+```
+pnpm dev
+```
+
 ---
 
 ## 3b. Linux
@@ -80,7 +86,7 @@ Last installation was tested on Ubuntu 22.04+
 ### Install libatomic
 
 ```
-sudo apt-get update 
+sudo apt-get update
 sudo apt-get install libatomic1
 ```
 
@@ -102,10 +108,44 @@ pnpm binaries
 pnpm start:linux
 ```
 
+Alternatively, development mode can be started with
+
+```
+pnpm dev:linux
+```
+
 ---
 
 ## 3c. Docker
 
 Follow all of the instructions above.
 
-Build with `pnpm build:docker` and then run `./altv-server`.
\ No newline at end of file
+Build with `pnpm build:docker` and then run `./altv-server`.
+
+## Upgrading
+
+### Auto Upgrade
+
+If you already have Rebar installed simply run the following command:
+
+```
+pnpm rebar:upgrade
+```
+
+### Manual Upgrade
+
+Download the latest version `Rebar` into another folder.
+
+Copy the folders `src/main`, `webview`, and `docs` folder into the main folder of Rebar.
+
+Copy the file `package.json` to the main folder of Rebar.
+
+Run `pnpm upgrade` and `pnpm install`.
+
+[Click To Download Latest Source Code](https://github.com/Stuyk/rebar-altv/archive/refs/heads/main.zip)
+
+That's it.
+
+## Webview Development
+
+If you need to develop an interface out of game, you can use `pnpm:webview`
diff --git a/docs/plugins/index.yml b/docs/plugins/index.yml
index b8c9e0681..1482b5066 100644
--- a/docs/plugins/index.yml
+++ b/docs/plugins/index.yml
@@ -1,3 +1,3 @@
 expanded: false
 label: 'Plugins'
-order: -1000
+order: -1
diff --git a/docs/plugins/create.md b/docs/plugins/structure.md
similarity index 96%
rename from docs/plugins/create.md
rename to docs/plugins/structure.md
index a1e384957..0a6e9808a 100644
--- a/docs/plugins/create.md
+++ b/docs/plugins/structure.md
@@ -1,4 +1,4 @@
-# Create a Plugin
+# Plugin Structure
 
 If you wish to create plugins then you need to understand the basic structure of a plugin.
 
@@ -13,6 +13,8 @@ If you wish to create plugins then you need to understand the basic structure of
     7. `dependencies`
     8. `shared`
 
+[!embed](https://www.youtube.com/watch?v=_bnf-duy3mI)
+
 ## client
 
 This is where the client-side code belongs. You **cannot use NPM packages** in these files.
@@ -50,18 +52,18 @@ alt.log(t('example.hello-from-server'));
 ## shared
 
 This is where shared code (constants, events) belongs.<br/>
-Code below is just example. In `shared` folder you can store anything you want, that is used by both, clientside and serverside code. 
+Code below is just example. In `shared` folder you can store anything you want, that is used by both, clientside and serverside code.
 
 ```ts
 // shared/events.ts
 export const MyPluginEventNames = {
     ToServer: {
-        FirstToServerEvent: 'myplugin.serverEvent'
+        FirstToServerEvent: 'myplugin.serverEvent',
     },
     ToClient: {
-        FirstToClientEvent: 'myplugin.clientEvent'
-    }
-}
+        FirstToClientEvent: 'myplugin.clientEvent',
+    },
+};
 ```
 
 ## images
diff --git a/docs/static/first-plugin/vscode.png b/docs/static/first-plugin/vscode.png
new file mode 100644
index 000000000..faafac7aa
Binary files /dev/null and b/docs/static/first-plugin/vscode.png differ
diff --git a/docs/static/first-plugin/vscode_cool_plugin.png b/docs/static/first-plugin/vscode_cool_plugin.png
new file mode 100644
index 000000000..8ea3c06f8
Binary files /dev/null and b/docs/static/first-plugin/vscode_cool_plugin.png differ
diff --git a/docs/static/first-plugin/vscode_dev.png b/docs/static/first-plugin/vscode_dev.png
new file mode 100644
index 000000000..071fd38fd
Binary files /dev/null and b/docs/static/first-plugin/vscode_dev.png differ
diff --git a/docs/static/first-plugin/vscode_plugin_folder.png b/docs/static/first-plugin/vscode_plugin_folder.png
new file mode 100644
index 000000000..878dddcf8
Binary files /dev/null and b/docs/static/first-plugin/vscode_plugin_folder.png differ
diff --git a/docs/static/first-plugin/vscode_ts_files.png b/docs/static/first-plugin/vscode_ts_files.png
new file mode 100644
index 000000000..c5b7adad0
Binary files /dev/null and b/docs/static/first-plugin/vscode_ts_files.png differ
diff --git a/docs/tutorials/basic-programming.md b/docs/tutorials/basic-programming.md
new file mode 100644
index 000000000..dc5060417
--- /dev/null
+++ b/docs/tutorials/basic-programming.md
@@ -0,0 +1,72 @@
+---
+order: 99
+---
+
+# Basic Programming
+
+In this framework we use 2 programming languages, and 2 frameworks.
+
+1. TypeScript
+2. HTML
+3. Vue 3
+4. Tailwind CSS
+
+This entire stack is how the entire framework is built, and ran and you'll be using the same stack.
+
+## How to Learn
+
+!!!
+
+Programming is not easy, but starting is easier.
+
+!!!
+
+These are some general tips to learn faster.
+
+1. Learning requires persistent dedication throughout the week. Try to spend 1 or 2 hours learning a concept or building something
+
+2. Learning just before bed helps you retain the information better
+
+3. If you are having fun, keep pushing forward because motivation helps you learn faster
+
+4. If a concept is too hard to learn, step away for a bit and come back
+
+5. If you have headaches, take a day off and come back tomorrow
+
+6. If you are not physically writing code, you are not physically learning anything
+
+## TypeScript Basics
+
+This is an incredibly basic tutorial and should cover a good chunk of what you need.
+
+The only way to learn these programming languages is to mess around with them, try making plugins and doing basic things before building a giant roleplay gamemode. We all started off writing very small programs when we started.
+
+Here's a [direct link](https://learnxinyminutes.com/docs/typescript/) if you don't like embeds.
+
+[!embed height="600px"](https://learnxinyminutes.com/docs/typescript/)
+
+## Vue 3 Basics
+
+While Vue is harder to learn if you're not familiar with any HTML Frameworks, it's well worth the time to speed up development.
+
+Here's an incredibly thorough course that will teach you some stuff.
+
+!!!
+
+Start off at timestamp **1 Hour & 5 Minutes** if you want to learn how to do the vue stuff immediately.
+
+!!!
+
+[!embed](https://www.youtube.com/watch?v=I_xLMmNeLDY)
+
+## Tailwind CSS
+
+This video does a good job of covering how Tailwind Works.
+
+!!!
+
+Start the video at **2 Minutes** to start learning immediately
+
+!!!
+
+[!embed](https://www.youtube.com/watch?v=pB1oed_10IA)
diff --git a/docs/tutorials/index.yml b/docs/tutorials/index.yml
new file mode 100644
index 000000000..b8477f601
--- /dev/null
+++ b/docs/tutorials/index.yml
@@ -0,0 +1,3 @@
+expanded: false
+label: 'Tutorials'
+order: -1
diff --git a/docs/tutorials/your-first-plugin.md b/docs/tutorials/your-first-plugin.md
new file mode 100644
index 000000000..62ca0cdc5
--- /dev/null
+++ b/docs/tutorials/your-first-plugin.md
@@ -0,0 +1,96 @@
+# Your First Plugin
+
+This tutorial is meant to show you how to get an incredibly basic plugin running.
+
+It will not show you how to use the API, or anything else. It's strictly to show you how to setup a plugin.
+
+## Preface
+
+If you are not familiar with programming, please make sure to check out [Basic Programming](./basic-programming.md) before starting.
+
+Even having just a small understanding of programming will help immensely.
+
+## Client Setup
+
+Before starting, make sure you have [alt:V Installed](https://altv.mp) and modify the `altv.toml` to turn `debug` to true.
+
+You can read more about that [here](https://docs.altv.mp/articles/configs/client.html).
+
+## Folder Setup
+
+Open the entire Rebar Folder in VSCode. You should see a file tree on the left with all of your files.
+
+![](../static/first-plugin/vscode.png)
+
+### Accessing Plugin Folder
+
+Navigate based on the following folders:
+
+```
+src/plugins
+```
+
+![](../static/first-plugin/vscode_plugin_folder.png)
+
+### Create a New folder
+
+Create a new folder by right-clicking the `plugins` folder and making one.
+
+Name the folder whatever you want, but it needs to be in English.
+
+For the sake of this tutorial, I named mine `a-cool-plugin`.
+
+### Create 2 New Folders
+
+Create 2 new folders inside of `a-cool-plugin` and name them `server` and `client`.
+
+![](../static/first-plugin/vscode_cool_plugin.png)
+
+### Create 2 New Files
+
+You are going to now create 2 files named `index.ts` inside both `server` and `client`.
+
+![](../static/first-plugin/vscode_ts_files.png)
+
+## Setup TypeScript Files
+
+Now that you have your files created, we need to add some content to both of them.
+
+Make sure to **save your files** after editing them!
+
+`CTRL + S` will save your file.
+
+### server/index.ts
+
+Inside of this file add the following contents.
+
+```ts src/plugins/your-plugin/server/index.ts
+import * as alt from 'alt-server';
+import { useRebar } from '@Server/index.js';
+
+const Rebar = useRebar();
+
+alt.log('Hello from Server!');
+```
+
+### client/index.ts
+
+Inside of this file add the following contents.
+
+```ts src/plugins/your-plugin/server/index.ts
+import * as alt from 'alt-client';
+
+alt.log('Hello from Client!');
+```
+
+## Testing the Plugin
+
+In VSCode at the top, click on `Terminal` and then click `New Terminal`.
+
+Simply run `pnpm dev` to start your server.
+
+You will then see that your plugin has loaded, and you'll have some logs in your server console.
+
+![](../static/first-plugin/vscode_dev.png)
+
+Additionally, you can see the result in your **client console in-game** which can be opened with `F8`.
diff --git a/docs/upgrade.md b/docs/upgrade.md
deleted file mode 100644
index eeb7bab74..000000000
--- a/docs/upgrade.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-order: 99
----
-
-# Upgrading
-
-## Auto Upgrade
-
-If you already have Rebar installed simply run the following command:
-
-```
-pnpm rebar:upgrade
-```
-
-## Manual Upgrade
-
-Download the latest version `Rebar` into another folder.
-
-Copy the folders `src/main`, `webview`, and `docs` folder into the main folder of Rebar.
-
-Copy the file `package.json` to the main folder of Rebar.
-
-Run `pnpm upgrade` and `pnpm install`.
-
-[Click To Download Latest Source Code](https://github.com/Stuyk/rebar-altv/archive/refs/heads/main.zip)
-
-That's it.
diff --git a/docs/utilities/index.yml b/docs/utilities/index.yml
deleted file mode 100644
index 8ef3323bd..000000000
--- a/docs/utilities/index.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-expanded: false
-label: 'Utilities'
-order: -1001
diff --git a/docs/webview/index.yml b/docs/webview/index.yml
index bcc5c321f..487105ad1 100644
--- a/docs/webview/index.yml
+++ b/docs/webview/index.yml
@@ -1,3 +1,3 @@
 expanded: false
 label: 'Webview'
-order: -1000
+order: -1
diff --git a/src/main/server/utility/version.ts b/src/main/server/utility/version.ts
index c69c6da8d..8ccb1c508 100644
--- a/src/main/server/utility/version.ts
+++ b/src/main/server/utility/version.ts
@@ -19,14 +19,14 @@ async function init() {
 
     const data: { version: number } = await req.json();
     if (data.version == packageContent.version || packageContent.version > data.version) {
-       return;
+        return;
     }
 
     alt.setTimeout(() => {
         alt.logWarning(
             `Version ${data.version} of Rebar is now available! You are on version ${packageContent.version}.`,
         );
-        alt.logWarning(`Check https://rebarv.com/upgrade for instructions.`);
+        alt.logWarning(`Check https://rebarv.com/install#auto-upgrade for instructions.`);
     }, 3000);
 }