diff --git a/docs/src/content/mitmweb-intercept-requests.md b/docs/src/content/mitmweb-intercept-requests.md
new file mode 100644
index 000000000..8114e248f
--- /dev/null
+++ b/docs/src/content/mitmweb-intercept-requests.md
@@ -0,0 +1,47 @@
+---
+title: "Intercept Requests"
+layout: single
+menu:
+ mitmweb:
+ weight: 2
+---
+
+# Intercept Reqeusts
+
+You can intercept HTTP communications using mitmproxy filter expression. The intercepted communications can be modified and resumed.
+The intercepted communications is displayed in orange in the flow table like the following.
+
+{{< figure src="/screenshots/intercepted-flow.png" >}}
+
+## how to set a filter in mitmweb
+
+There are 2 ways to set a filter in mitmweb.
+
+{{< figure src="/screenshots/start-menu2.png" >}}
+
+First, you can specify a filter by entering it in the input field of the start menu.
+
+{{< figure src="/screenshots/quick-actions-menu.png" >}}
+
+Second, you can specify the interception filter from the quick action menu in the flow table.
+
+## how to modify intercepted flows in mitmweb
+
+{{< figure src="/screenshots/pre-edit.png" >}}
+
+When you click a row in the flow table, flow view corresponding to the flow appears. You can edit HTTP headers and content by pressing the pensil button in the upper right of the flow view.
+
+{{< figure src="/screenshots/post-edit.png" >}}
+
+When you finish modifying the flow, press the check button in the same place as the pensil button was. The change will be applied to the flow.
+
+
+## how to resume intercepted flows in mitmweb
+
+{{< figure src="/screenshots/resume-flow.png" >}}
+
+There are two ways to resume intercepted flows.
+
+The first one is select the intercepted flow in the flow table and move to the flow section in main menu. Then, press the resume button in the menu.
+
+The other one is press the green arrow button in the right side of the flow row in the flow table. This method is convenient because it allows you to resume the intercepted flow with one click!
\ No newline at end of file
diff --git a/docs/src/content/mitmweb-ui.md b/docs/src/content/mitmweb-ui.md
new file mode 100644
index 000000000..e60b23e10
--- /dev/null
+++ b/docs/src/content/mitmweb-ui.md
@@ -0,0 +1,60 @@
+---
+title: "User Interface"
+layout: single
+menu:
+ mitmweb:
+ weight: 1
+---
+
+# Overview
+The following image shows the overall picture of mitmweb. Each component is described below.
+
+{{< figure src="/screenshots/mitmweb-overview.png" >}}
+
+## main menu
+The main menu is the area at the top of the screen, and has four sections (mitmproxy, Start, Options, Flow).
+
+### mitmproxy menu
+{{< figure src="/screenshots/mitmweb-dropdown.png" >}}
+
+You can save the flows and open the saved flows. You can also clear all the flows in the flow table.
+
+### start menu
+{{< figure src="/screenshots/start-menu1.png" >}}
+{{< figure src="/screenshots/start-menu2.png" >}}
+
+You can search, highlight and filter flows using filter expressions in mitmproxy. All intercepted flows are resumed by pressing "Resume All" button.
+
+### options menu
+{{< figure src="/screenshots/options-menu.png" >}}
+
+You can edit all available options in mitmweb by pressing the "Edit Options" button.
+
+### flow menu
+{{< figure src="/screenshots/main-menu.png" >}}
+
+You can replay, duplicate, revert and delete the selected flow using the buttons. If the selected flow is intercepted, you can also resume or abort it.
+
+## flow table
+{{< figure src="/screenshots/flow-table.png" >}}
+
+You can view all HTTP traffic going through mitmweb here. When you hover your mouse over each line, a quick-actions menu appears in the right side. The quick-actions menu have some useful functionalities, where you can copy the flow as various formats and make an interception rule related to the flow.
+
+## flow view
+{{< figure src="/screenshots/flow-view.png" >}}
+
+When you click a row of the flow table, the flow view for the selected flow appears. The flow view has three sections (Request, Response, Details).
+
+### Request section
+This section shows you HTTP request headers and content. You can edit HTTP headers and content by clicking the pencil button in the upper right of the image.
+
+### Response section
+This section shows you HTTP response headers and content. You can edit HTTP headers and content by clicking the pencil button in the upper right of the image.
+
+### Details section
+This section shows you TLS connection info and timestamps.
+
+## command bar
+{{< figure src="/screenshots/command-bar.png" >}}
+
+You can use powerful mitmproxy commands here. The input field has autocompletion functionality. If you press Tab, the input field is autocompleted from the available commands. The popup shows you the command description, arguments, and its return value.
\ No newline at end of file
diff --git a/docs/src/layouts/partials/sidebar.html b/docs/src/layouts/partials/sidebar.html
index e8b39a4ab..99c3d510e 100644
--- a/docs/src/layouts/partials/sidebar.html
+++ b/docs/src/layouts/partials/sidebar.html
@@ -22,4 +22,7 @@
{{ partial "sidemenu" (dict "ctx" . "menuname" "tutes") }}
+
+
+ {{ partial "sidemenu" (dict "ctx" . "menuname" "mitmweb") }}
diff --git a/docs/src/static/screenshots/command-bar.png b/docs/src/static/screenshots/command-bar.png
new file mode 100644
index 000000000..100980da9
Binary files /dev/null and b/docs/src/static/screenshots/command-bar.png differ
diff --git a/docs/src/static/screenshots/flow-table.png b/docs/src/static/screenshots/flow-table.png
new file mode 100644
index 000000000..0e0a3267f
Binary files /dev/null and b/docs/src/static/screenshots/flow-table.png differ
diff --git a/docs/src/static/screenshots/flow-view.png b/docs/src/static/screenshots/flow-view.png
new file mode 100644
index 000000000..1edaa24f8
Binary files /dev/null and b/docs/src/static/screenshots/flow-view.png differ
diff --git a/docs/src/static/screenshots/intercepted-flow.png b/docs/src/static/screenshots/intercepted-flow.png
new file mode 100644
index 000000000..5d9553e19
Binary files /dev/null and b/docs/src/static/screenshots/intercepted-flow.png differ
diff --git a/docs/src/static/screenshots/main-menu.png b/docs/src/static/screenshots/main-menu.png
new file mode 100644
index 000000000..8151f53c5
Binary files /dev/null and b/docs/src/static/screenshots/main-menu.png differ
diff --git a/docs/src/static/screenshots/mitmweb-dropdown.png b/docs/src/static/screenshots/mitmweb-dropdown.png
new file mode 100644
index 000000000..67f524aa2
Binary files /dev/null and b/docs/src/static/screenshots/mitmweb-dropdown.png differ
diff --git a/docs/src/static/screenshots/mitmweb-overview.png b/docs/src/static/screenshots/mitmweb-overview.png
new file mode 100644
index 000000000..54fef0dee
Binary files /dev/null and b/docs/src/static/screenshots/mitmweb-overview.png differ
diff --git a/docs/src/static/screenshots/options-menu.png b/docs/src/static/screenshots/options-menu.png
new file mode 100644
index 000000000..75a9a85df
Binary files /dev/null and b/docs/src/static/screenshots/options-menu.png differ
diff --git a/docs/src/static/screenshots/post-edit.png b/docs/src/static/screenshots/post-edit.png
new file mode 100644
index 000000000..682f5daaa
Binary files /dev/null and b/docs/src/static/screenshots/post-edit.png differ
diff --git a/docs/src/static/screenshots/pre-edit.png b/docs/src/static/screenshots/pre-edit.png
new file mode 100644
index 000000000..6d93f0e16
Binary files /dev/null and b/docs/src/static/screenshots/pre-edit.png differ
diff --git a/docs/src/static/screenshots/quick-actions-menu.png b/docs/src/static/screenshots/quick-actions-menu.png
new file mode 100644
index 000000000..a6536ff0c
Binary files /dev/null and b/docs/src/static/screenshots/quick-actions-menu.png differ
diff --git a/docs/src/static/screenshots/resume-flow.png b/docs/src/static/screenshots/resume-flow.png
new file mode 100644
index 000000000..316c9aa2f
Binary files /dev/null and b/docs/src/static/screenshots/resume-flow.png differ
diff --git a/docs/src/static/screenshots/start-menu1.png b/docs/src/static/screenshots/start-menu1.png
new file mode 100644
index 000000000..f8f2fb526
Binary files /dev/null and b/docs/src/static/screenshots/start-menu1.png differ
diff --git a/docs/src/static/screenshots/start-menu2.png b/docs/src/static/screenshots/start-menu2.png
new file mode 100644
index 000000000..95c6db4ec
Binary files /dev/null and b/docs/src/static/screenshots/start-menu2.png differ