diff --git a/.github/workflows/docs.workflow.yml b/.github/workflows/docs.workflow.yml
new file mode 100644
index 0000000..06929bb
--- /dev/null
+++ b/.github/workflows/docs.workflow.yml
@@ -0,0 +1,22 @@
+name: Documentation
+
+on:
+  # Trigger the workflow on push,
+  # but only for the main and develop branches
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Upload Documentation to Wiki
+        uses: SwiftDocOrg/github-wiki-publish-action@rsync
+        with:
+          path: "doc/"
+        env:
+          GH_PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
diff --git a/doc/Home.md b/doc/Home.md
new file mode 100644
index 0000000..4cca365
--- /dev/null
+++ b/doc/Home.md
@@ -0,0 +1,36 @@
+# How the angular-component-extractor works
+
+When the extension is triggered, then it first reads the currently selected content of the html file.
+After ensuring that all requirements for a successful execution are met (see `Startup Requirements`), the following steps are processed:
+
+1. Extract interpolation
+2. Create one `update change` for each interpolation which adds a `@Input` to the new component ts
+3. Create one `replace change` for the new component html, which inserts the selection
+4. Provide the replacement for the selected html
+5. Apply changes
+
+![General workflow of the extension](./images/general-flow.png)
+
+# Startup Requirements
+
+- Angular Language Service is available
+- The selected range has no errors (Diagnostic messages)
+
+# Architecture goal
+
+The goal of the application architecture is to be decoupled it from vscode whenever possible. 
+Hence, the `VSCodeAbstraction` namespace  was created to decouple it via interfaces. 
+This approach allows us to test the code without actually starting vscode.
+The actual logic is within the `src/angular` directory while the others contain either cross functional or vscode dependent code.
+
+# Concept behind `Changes`
+
+The idea behind `Changes` (`src/types/index.ts > Changes`) is to define what needs to be done in order to extract the component, but without actually doing it.
+This enables us to test it freely without mocking anything, as we only need to provide the selection, directory and component name to get changes.
+
+But there are changes which are dynamic. For example when extending the generated component ts with the `@Input` properties. Thats why there are two types of changes. 
+
+1. update file changes
+2. replace file changes
+
+As the names imply, one changes the content of a file, while the other replaces it.
diff --git a/doc/images/general-flow.png b/doc/images/general-flow.png
new file mode 100644
index 0000000..f69dbb2
Binary files /dev/null and b/doc/images/general-flow.png differ