diff --git a/README.md b/README.md
index 1c80e73..3d17ffb 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,40 @@
 # Socratic Leetcode
 
 This chrome extension helps you to solve leetcode questions on your own by providing insightful questions according to the socratic teaching philosophy
+
+## Installation
+
+1. Download the package `socratic-code.zip` from Releases
+
+2. Extract it
+
+   ```bash
+   # USE unzip
+   unzip socratic-code.zip
+   # OR USING 7z
+   7z x socratic-code.zip
+   ```
+
+3. Open chrome, go to `chrome://extensions/` and enable developer mode
+
+4. Click on Load unpacked and navigate to the `build` folder you just extracted
+
+## Working
+
+The following images represesnt the working of the extension
+
+<p align="center">
+    <img  src="./docs/images/sc.png">
+    <img  src="./docs/images/insights.png">
+</p>
+
+<p align="center">
+    <img  src="./docs/images/browser-sc.png">
+    <img  src="./docs/images/browser-insights.png">
+</p>
+
+## Architecture
+
+<p align="center">
+    <img  src="./docs/images/arch.png">
+</p>
diff --git a/docs/graphviz/architecture.gv b/docs/graphviz/architecture.gv
new file mode 100644
index 0000000..5218782
--- /dev/null
+++ b/docs/graphviz/architecture.gv
@@ -0,0 +1,46 @@
+digraph output_string {
+  bgcolor=transparent;
+  graph [fontsize=26 fontname="HackNerdFont" style=filled color=lightblue];
+  node [fontsize=26 fontname="HackNerdFont" style=filled color=white shape=box];
+  compound=true;
+  rankdir=LR;
+  label = "Architecture";
+
+  subgraph cluster_output {
+
+    subgraph cluster_byte2 {
+      label = "backend";
+      color = lightblue4;
+      subgraph cluster_char3 {
+        label = "Golang";
+        color = lightblue3;
+        API[label="gofiber API"]
+      }
+    }
+    subgraph cluster_byte3 {
+      label = "Google";
+      color = lightblue4;
+      subgraph cluster_char1 {
+        label = "LLM";
+        color = lightblue3;
+        "Google Gemini API"
+      }
+    }
+    subgraph cluster_byte1 {
+      label = "frontend";
+      color = lightblue4;
+      dummy[color=lightblue4 fontcolor=lightblue4]
+      subgraph cluster_char2 {
+        label = "chrome extension";
+        color = lightblue3;
+        "webpage(leetcode)"->"content script"[label="DOM Selector"]
+        "content script"->"bg script"[label="Chrome message API"]
+        "bg script"->"popup"[label="Chrome message API"]
+      }
+    }
+    API->"Google Gemini API"[label="TCP"]
+    "Google Gemini API"->API[label="TCP"]
+    "popup"->API[label="TCP"]
+    API->"popup"[label="TCP"]
+  }
+}
diff --git a/docs/images/arch.png b/docs/images/arch.png
new file mode 100644
index 0000000..120af3d
Binary files /dev/null and b/docs/images/arch.png differ
diff --git a/docs/images/browser-insights.png b/docs/images/browser-insights.png
new file mode 100644
index 0000000..3b4ad50
Binary files /dev/null and b/docs/images/browser-insights.png differ
diff --git a/docs/images/browser-sc.png b/docs/images/browser-sc.png
new file mode 100644
index 0000000..0345df7
Binary files /dev/null and b/docs/images/browser-sc.png differ
diff --git a/docs/images/insights.png b/docs/images/insights.png
new file mode 100644
index 0000000..a3f5115
Binary files /dev/null and b/docs/images/insights.png differ
diff --git a/docs/images/sc.png b/docs/images/sc.png
new file mode 100644
index 0000000..d8fed89
Binary files /dev/null and b/docs/images/sc.png differ