diff --git a/.gitbook/assets/Group 978.png b/.gitbook/assets/Group 978.png
new file mode 100644
index 00000000..4678af5e
Binary files /dev/null and b/.gitbook/assets/Group 978.png differ
diff --git a/.gitbook/assets/Visual Python_2.2.8.gif b/.gitbook/assets/Visual Python_2.2.8.gif
new file mode 100644
index 00000000..43fb4443
Binary files /dev/null and b/.gitbook/assets/Visual Python_2.2.8.gif differ
diff --git a/.gitbook/assets/VisualPython.gif b/.gitbook/assets/VisualPython.gif
new file mode 100644
index 00000000..a8a3de23
Binary files /dev/null and b/.gitbook/assets/VisualPython.gif differ
diff --git a/.gitbook/assets/VisualPython2.gif b/.gitbook/assets/VisualPython2.gif
new file mode 100644
index 00000000..3332ee96
Binary files /dev/null and b/.gitbook/assets/VisualPython2.gif differ
diff --git a/.gitbook/assets/image (1).png b/.gitbook/assets/image (1).png
new file mode 100644
index 00000000..68b61d76
Binary files /dev/null and b/.gitbook/assets/image (1).png differ
diff --git a/.gitbook/assets/image (10).png b/.gitbook/assets/image (10).png
new file mode 100644
index 00000000..a5f2803c
Binary files /dev/null and b/.gitbook/assets/image (10).png differ
diff --git a/.gitbook/assets/image (11).png b/.gitbook/assets/image (11).png
new file mode 100644
index 00000000..cf965535
Binary files /dev/null and b/.gitbook/assets/image (11).png differ
diff --git a/.gitbook/assets/image (12).png b/.gitbook/assets/image (12).png
new file mode 100644
index 00000000..b568633e
Binary files /dev/null and b/.gitbook/assets/image (12).png differ
diff --git a/.gitbook/assets/image (13).png b/.gitbook/assets/image (13).png
new file mode 100644
index 00000000..d63f0e1d
Binary files /dev/null and b/.gitbook/assets/image (13).png differ
diff --git a/.gitbook/assets/image (14).png b/.gitbook/assets/image (14).png
new file mode 100644
index 00000000..705a349e
Binary files /dev/null and b/.gitbook/assets/image (14).png differ
diff --git a/.gitbook/assets/image (15).png b/.gitbook/assets/image (15).png
new file mode 100644
index 00000000..de21b893
Binary files /dev/null and b/.gitbook/assets/image (15).png differ
diff --git a/.gitbook/assets/image (16).png b/.gitbook/assets/image (16).png
new file mode 100644
index 00000000..7f01d1c5
Binary files /dev/null and b/.gitbook/assets/image (16).png differ
diff --git a/.gitbook/assets/image (2).png b/.gitbook/assets/image (2).png
new file mode 100644
index 00000000..45689c27
Binary files /dev/null and b/.gitbook/assets/image (2).png differ
diff --git a/.gitbook/assets/image (3).png b/.gitbook/assets/image (3).png
new file mode 100644
index 00000000..e9b1b9d3
Binary files /dev/null and b/.gitbook/assets/image (3).png differ
diff --git a/.gitbook/assets/image (4).png b/.gitbook/assets/image (4).png
new file mode 100644
index 00000000..f3756fe4
Binary files /dev/null and b/.gitbook/assets/image (4).png differ
diff --git a/.gitbook/assets/image (5).png b/.gitbook/assets/image (5).png
new file mode 100644
index 00000000..e7a84652
Binary files /dev/null and b/.gitbook/assets/image (5).png differ
diff --git a/.gitbook/assets/image (6).png b/.gitbook/assets/image (6).png
new file mode 100644
index 00000000..be754dcb
Binary files /dev/null and b/.gitbook/assets/image (6).png differ
diff --git a/.gitbook/assets/image (7).png b/.gitbook/assets/image (7).png
new file mode 100644
index 00000000..d002f024
Binary files /dev/null and b/.gitbook/assets/image (7).png differ
diff --git a/.gitbook/assets/image (8).png b/.gitbook/assets/image (8).png
new file mode 100644
index 00000000..455fa31b
Binary files /dev/null and b/.gitbook/assets/image (8).png differ
diff --git a/.gitbook/assets/image (9).png b/.gitbook/assets/image (9).png
new file mode 100644
index 00000000..b7834be5
Binary files /dev/null and b/.gitbook/assets/image (9).png differ
diff --git a/.gitbook/assets/image.png b/.gitbook/assets/image.png
new file mode 100644
index 00000000..3746330d
Binary files /dev/null and b/.gitbook/assets/image.png differ
diff --git a/README.md b/README.md
index 2a6e4dbe..5b3b161b 100644
--- a/README.md
+++ b/README.md
@@ -1,83 +1,16 @@
+# Welcome to Visual Python
-
+**Visual Python** is a GUI-based Python code generator for data science.
+**Visual Python** is an extension to **Jupyter Lab**, **Jupyter Notebook** and **Google Colab**.
-[](https://pypi.python.org/pypi/visualpython/)
-
-[](https://github.com/visualpython/visualpython/blob/main/LICENSE)
-[](https://github.com/visualpython/visualpython/blob/main/CODE_OF_CONDUCT.md)
-[](https://pepy.tech/project/visualpython)
-[](https://github.com/visualpython/visualpython/issues)
+**Visual Python** is an open source project started for students who struggle with coding during Python classes for data science.
-## Introduction
-Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook as an extension.
-Visual Python is an open source project started for students who struggle with coding during Python classes for data science.
+
-
+## Try Visual Python if you would like to
-Try Visual Python if you would like to:
-* manage big data with minimal coding skills.
-* help students / business analysts / researchers to overcome learning barriers for Python.
-* save & reuse repeatedly used codes(snippets).
+* manage big data with minimal coding skills.
+* help students / business analysts / researchers to overcome learning barriers for Python.
+* save & reuse repeatedly used codes(snippets).
-
-
-
-## Getting Started
-
-### 1. Requirements
-
-Visual Python is an extension to Jupyter Notebook, so you must have Jupyter Notebook installed already.
-- Python version 3.x
-- Jupyter notebook environment
-
-### 2. How to Install
-
-**1) Install package from**
-```
-pip install visualpython
-```
-
-**2) Enable the package**
-```
-visualpy install
-```
-
-**3) Activate Visual Python on Jupyter Notebook**
-
-Click orange square button on the right side of the Jupyter Notebook menu bar.
-
-### 3. Package Control Info
-* Usage: visualpy **[option]**
-* Optional arguments:
-
-```
-help - show help menu
-install - install packages
-uninstall - uninstall packages
-upgrade - version upgrade
-version - version check
-```
-
-## Contributing
-If you are interested in contributing to the Visual Python, please see [`CONTRIBUTING.md`](CONTRIBUTING.md).
-All skills from programmers, non-programmers, designers are welcomed.
-
-* Programming Guide: [Developer Documentation](https://bird-energy-733.notion.site/visualpython-docs-85c0274ff7564747bb8e8d77909fc8b7)
-* GUI Design Guide: [Visual Python GUI Kit 1.0](https://www.figma.com/community/file/976035035360380841)
-
-## License
-GNU GPLv3 with Visual Python special exception (See LICENSE file).
-
-## Mission & Vision
-**Mission**
-To support technology and education so that anyone can leverage big data analytics to create a variety of social values.
-
-**Vision**
-To create an environment where everyone can learn and use big data analytics skills easily.
-
-## Support Visual Python
-Love Visual Python?
-Your support will help us continue to actively develop and improve Visual Python.☕
-
-
diff --git a/SUMMARY.md b/SUMMARY.md
new file mode 100644
index 00000000..6a90f534
--- /dev/null
+++ b/SUMMARY.md
@@ -0,0 +1,24 @@
+# Table of contents
+
+## GETTING STARTED
+
+* [Welcome to Visual Python](README.md)
+* [How to install](getting-started/how-to-install.md)
+* [Installing FAQ](getting-started/installing-faq.md)
+
+## TUTORIALS
+
+* [Data Preparation](tutorials/data-preparation.md)
+* [Data Exploration](tutorials/data-exploration.md)
+* [Data Transformation](tutorials/data-transformation/README.md)
+ * [Modify DataFrames](tutorials/data-transformation/modify-dataframes.md)
+ * [Create Subsets](tutorials/data-transformation/create-subsets.md)
+ * [Group & Aggregate DataFrames](tutorials/data-transformation/group-and-aggregate-dataframes.md)
+ * [Combine DataFrames](tutorials/data-transformation/combine-dataframes.md)
+ * [Reshape DataFrames](tutorials/data-transformation/reshape-dataframes.md)
+
+## RESOURCES
+
+* [License](resources/license.md)
+* [Brand Story](resources/brand-story.md)
+* [Community](resources/community.md)
diff --git a/getting-started/how-to-install.md b/getting-started/how-to-install.md
new file mode 100644
index 00000000..4fa4e3b3
--- /dev/null
+++ b/getting-started/how-to-install.md
@@ -0,0 +1,96 @@
+---
+description: This document will show how to install Visual Python.
+---
+
+# How to install
+
+
+
+{% hint style="info" %}
+**Visual Python** is an extension to [Jupyter Lab](https://jupyter.org/), [Jupyter Notebook](https://jupyter.org/) and [Google Colab](https://colab.research.google.com/), so you must have one of these environments installed already.
+
+***
+
+If you prefer a simpler solution, consider [**Visual Python Desktop**](https://visualpython.ai/visualpython-desktop). It will establish an isolated python environment quickly and help you start Visual Python easily.
+{% endhint %}
+
+{% embed url="https://www.youtube.com/watch?v=d-nR-ADpObU" %}
+
+### Pip Installation for Jupyter Lab
+
+**1. Install package from**
+
+```
+pip install jupyterlab-visualpython
+```
+
+**2. Activate Visual Python on Jupyter Lab**
+
+Click orange square button on the right side of the Jupyter Lab side bar.
+
+
+
+### Pip Installation for Jupyter Notebook
+
+**1. Install package from**
+
+```
+pip install visualpython
+```
+
+**2. Enable the package**
+
+```
+visualpy install
+```
+
+**3. Activate Visual Python on Jupyter Notebook**
+
+Click orange square button on the right side of the Jupyter Notebook menu.
+
+**4. Package Control Info**
+
+Version Check
+
+```
+visualpy version
+```
+
+Version Upgrade
+
+```
+visualpy upgrade
+```
+
+ Uninstall
+
+```
+visualpy uninstall
+```
+
+Help Menu
+
+```
+visualpy help
+```
+
+
+
+### Chrome extension Installation for Google Colab
+
+**1. Install package from chrome web store**
+
+{% embed url="https://chrome.google.com/webstore/detail/visual-python-for-colab/ccmkpknjfagaldcgidgcipbpdipfopob" %}
+Visual Python for Colab on chrome web store
+{% endembed %}
+
+**2. Open Google Colab**
+
+{% embed url="https://colab.research.google.com/" %}
+Google Colab Environment
+{% endembed %}
+
+**3. Activate Visual Python on Google Colab**
+
+Click orange square button on the top-right side of the browser.
+
diff --git a/getting-started/installing-faq.md b/getting-started/installing-faq.md
new file mode 100644
index 00000000..1c0c3336
--- /dev/null
+++ b/getting-started/installing-faq.md
@@ -0,0 +1,49 @@
+# Installing FAQ
+
+### Which web browsers does Visual Python support?
+
+{% hint style="info" %}
+Visual Python may work on many up-to-date browsers but it is optimized for Chrome.
+{% endhint %}
+
+### I installed Visual Python, but the orange button does not appear on my Jupyter Notebook.
+
+This can happen if the you're using a Python version is not 3.x.
+
+1. Please upgrade to Python 3.x, or
+2. If you are using multiple versions of Python, specify the pip version as 3 using the following command:
+
+**NOTE:** Please uninstall before reinstalling.
+
+```
+pip uninstall visualpython
+```
+
+```
+visualpy install —pip3
+```
+
+### How can I install Visual Python behind a corporate firewall?
+
+If pip installation gives you SSLError, it can be solved using the following command:
+
+```
+pip install visualpython --trusted-host pypi.org --trusted-host files.pythonhosted.org
+```
+
+To upgrade Visual Python in the same environment, follow the steps below.
+
+**1) Upgrade Visual Python package.**
+
+```
+pip install visualpython --upgrade --trusted-host pypi.org --trusted-host files.pythonhosted.org
+```
+
+**2) Enable the package.**
+
+```
+visualpy install
+```
+
+
+
diff --git a/resources/brand-story.md b/resources/brand-story.md
new file mode 100644
index 00000000..984d74bd
--- /dev/null
+++ b/resources/brand-story.md
@@ -0,0 +1,28 @@
+# Brand Story
+
+**Visual Python** is an open source project started for students who struggle with coding during Python classes for data science.
+
+Just as the sun rises and the vision brighten, Visual Python is designed with the concept of giving hope and bright energy to people who are struggling with coding Python.
+
+Inspired by the rising sun, bright orange and yellow gradation colors are used for the logo.
+
+
+
+
+
+****
+
+**Our Mission**
+
+To support technology and education so that anyone can leverage big data analytics to create a variety of social values.
+
+**Our Vision**
+
+To create an environment where everyone can learn and use big data analytics skills easily.
+
+**Our Core Values**
+
+Clear and Concise / Liberty and Responsibility / Knowledge share
+
+
+
diff --git a/resources/community.md b/resources/community.md
new file mode 100644
index 00000000..c438edd0
--- /dev/null
+++ b/resources/community.md
@@ -0,0 +1,22 @@
+# Community
+
+### **GitHub**
+
+[github.com/visualpython/visualpython](https://github.com/visualpython/visualpython)
+
+Visit our GitHub repository if you are interested in contributing, or to check out the community.
+
+### Buy Visual Python a coffee
+
+[buymeacoffee.com/visualpython](https://www.buymeacoffee.com/visualpython)
+
+Love Visual Python?\
+Your support will help us continue to actively develop and improve Visual Python.☕
+
+\
+
+
+
+
+
+
diff --git a/resources/license.md b/resources/license.md
new file mode 100644
index 00000000..cfd51035
--- /dev/null
+++ b/resources/license.md
@@ -0,0 +1,13 @@
+# License
+
+The Visual Python is licensed under the GNU General Public License version 3.0 with the Visual Python special exception. (See [LICENSE](https://github.com/visualpython/visualpython/blob/main/LICENSE))
+
+We hope to continue to develop and improve Visual Python with open source community to make better software for everyone.
+
+
+
+_hello@visualpython.ai_
+
+
+
+
diff --git a/tutorials/data-exploration.md b/tutorials/data-exploration.md
new file mode 100644
index 00000000..d207c188
--- /dev/null
+++ b/tutorials/data-exploration.md
@@ -0,0 +1,17 @@
+---
+description: This document will show how to do EDA with Visual Python.
+---
+
+# Data Exploration
+
+{% embed url="https://www.youtube.com/watch?v=DMdSJ2XMHKk" %}
+
+### To explore the data
+
+1. Click on the **Profiling** app.
+2. Check the library installation, and import.
+3. Select a DataFrame to explore.
+4. Click **Generate Report**** ****** button.
+
+[Pandas Profiling](https://github.com/ydataai/pandas-profiling) is a great library for quick EDA. This interactive report can be exported to HTML format.
+
diff --git a/tutorials/data-preparation.md b/tutorials/data-preparation.md
new file mode 100644
index 00000000..940c7eb7
--- /dev/null
+++ b/tutorials/data-preparation.md
@@ -0,0 +1,30 @@
+---
+description: >-
+ This document will show how to import Python libraries and read data files
+ with Visual Python.
+---
+
+# Data Preparation
+
+{% embed url="https://www.youtube.com/watch?v=JrtkV_MpS0E" %}
+
+### To import packages/libraries
+
+Before starting, we need to import essential Python libraries.
+
+1. Click on the **Import** app from the menu
+2. Select libraries you need
+3. Click **Run** button to generate code.
+
+Numpy, Pandas, Matplotlib are the most primarily used libraries for data analysis. You can also add other libraries with **+ Module** / **+ Function** buttons.
+
+### To read data from a file
+
+Now, we need a dataset to analyze.
+
+1. Click on the **File** app, to read data files.
+2. Identify the data type: CSV, Excel, JSON, Pickle are supported
+3. Click on the folder icon to open the file explorer.
+4. Use additional options if necessary.
+5. Click **Run** !
+
diff --git a/tutorials/data-transformation/README.md b/tutorials/data-transformation/README.md
new file mode 100644
index 00000000..26786002
--- /dev/null
+++ b/tutorials/data-transformation/README.md
@@ -0,0 +1,2 @@
+# Data Transformation
+
diff --git a/tutorials/data-transformation/combine-dataframes.md b/tutorials/data-transformation/combine-dataframes.md
new file mode 100644
index 00000000..b41024cf
--- /dev/null
+++ b/tutorials/data-transformation/combine-dataframes.md
@@ -0,0 +1,29 @@
+# Combine DataFrames
+
+{% embed url="https://www.youtube.com/watch?v=gbU66-NsTc4" %}
+
+### To combine DataFrames
+
+1. Click on the **Bind** app.
+2. Select combining method:
+
+{% hint style="info" %}
+* **Concat**: to stack up multiple DataFrames along rows or columns.
+* **Merge**: to combine DataFrames based on values in shared columns.
+{% endhint %}
+
+**Concat**
+
+1. Select variables to combine.
+2. Select the axis to concatenate along.
+3. and then **Run** !
+
+.png>)
+
+**Merge**
+
+1. Select Left & Right data to merge.
+2. Select key columns to merge on.
+
+.png>)
+
diff --git a/tutorials/data-transformation/create-subsets.md b/tutorials/data-transformation/create-subsets.md
new file mode 100644
index 00000000..f1d40cea
--- /dev/null
+++ b/tutorials/data-transformation/create-subsets.md
@@ -0,0 +1,42 @@
+# Create Subsets
+
+{% embed url="https://www.youtube.com/watch?v=4wsSjG0u6bk" %}
+
+### To Create Subsets
+
+1. Click on the **Subset** app.
+2. Select a variable(DataFrame or Series) to subset .
+3. Select the method:
+
+{% hint style="info" %}
+* **loc** (location): to select rows/columns by label/index/conditions.
+* **iloc** (integer location): to select rows/columns by number.
+{% endhint %}
+
+**Subset Rows**
+
+1. Select the method from **Row Subset** box on the left.
+2. Select rows/a range of rows, or Specify conditions:
+
+{% hint style="info" %}
+* **Indexing**: to select individual items
+* **Slicing**: to select a sequence of elements
+* **Condition**: to filter data with the condition
+{% endhint %}
+
+.png>)
+
+**Subset Columns**
+
+1. Select the method from **Column Subset** box on the right.
+2. Select columns/a range of columns:
+
+{% hint style="info" %}
+* **Indexing**: to select individual items
+* **Slicing**: to select a sequence of elements
+{% endhint %}
+
+.png>)
+
+and then, **Run** !
+
diff --git a/tutorials/data-transformation/group-and-aggregate-dataframes.md b/tutorials/data-transformation/group-and-aggregate-dataframes.md
new file mode 100644
index 00000000..85b6fbb3
--- /dev/null
+++ b/tutorials/data-transformation/group-and-aggregate-dataframes.md
@@ -0,0 +1,29 @@
+# Group & Aggregate DataFrames
+
+{% embed url="https://www.youtube.com/watch?v=9ZUjyqAGat4" %}
+
+### To Group & Aggregate DataFrame
+
+#### Group DataFrame by the column(s)
+
+1. Click on the **Groupby** app.
+2. Select DataFrame.
+3. Select the column(s) to group by.
+
+.png>)
+
+#### Aggregate DataFrame
+
+1. Select columns to apply aggregation.
+2. Select an aggregation method (ex. count, sum, mean, etc.).
+
+.png>)
+
+{% hint style="info" %}
+Multiple aggregation methods can be applied on different columns using '**Advanced**' function.
+{% endhint %}
+
+.png>)
+
+and then, **Run** !
+
diff --git a/tutorials/data-transformation/modify-dataframes.md b/tutorials/data-transformation/modify-dataframes.md
new file mode 100644
index 00000000..fe6fdb85
--- /dev/null
+++ b/tutorials/data-transformation/modify-dataframes.md
@@ -0,0 +1,52 @@
+---
+description: This document will show how to modify Pandas DataFrames with Visual Python.
+---
+
+# Modify DataFrames
+
+{% embed url="https://www.youtube.com/watch?v=QYVRFpQ8f30" %}
+
+### To Modify Pandas DataFrames
+
+1. Click on the **Frame** app.
+2. Select the DataFrame to modify.
+
+{% hint style="info" %}
+Multiple column/row selection allowed: (Ctrl + Select)
+{% endhint %}
+
+#### **Add a new column**
+
+1. Click on the **Add Column** button or **+** button at the top-right corner of the table.
+2. Name a column & set options.
+3. Click **OK**.
+
+#### **Replace column values**
+
+1. Right-click on the column's header.
+2. Click **Replace**.
+3. Set options, and then click **OK**.
+
+#### **Rename columns**
+
+1. Right-click on the column's header.
+2. Click **Rename**.
+3. Provide new names for all columns.
+4. Click **OK**.
+
+#### Delete columns/rows
+
+1. Right-click on the column/row's header.
+2. Click **Drop - Drop**.
+
+#### Remove missing values
+
+1. Right-click on the column's header.
+2. Click **Drop - Drop NA**.
+
+#### Remove duplicates
+
+1. Right-click on the column's header.
+2. Click **Drop - Drop Duplicates**.
+
+****
diff --git a/tutorials/data-transformation/reshape-dataframes.md b/tutorials/data-transformation/reshape-dataframes.md
new file mode 100644
index 00000000..9ac4a098
--- /dev/null
+++ b/tutorials/data-transformation/reshape-dataframes.md
@@ -0,0 +1,35 @@
+# Reshape DataFrames
+
+{% embed url="https://www.youtube.com/watch?t=13s&v=cjUbH88McTA" %}
+
+### To reshape DataFrames
+
+1. Click on the **Reshape** app.
+2. Select DataFrame to reshape.
+3. Select the method:
+
+{% hint style="info" %}
+* **Pivot**: to transform the data from long to wide.
+* **Melt**: to transform the data from wide to long.
+{% endhint %}
+
+#### **Pivot**
+
+1. Select a column to use to make new DataFrame's index. _If not specified, it uses existing index._
+2. Select a column to use to make new DataFrame's columns.
+3. Select column(s) to use for populating new DataFrame's values. _If not specified, it uses all columns._
+4. and click **Run** !
+
+.png>)
+
+**Melt**
+
+1. Select column(s) to use as identifier variables.
+2. Select column(s) to unpivot. _If not specified, it uses all columns._
+3. Assign to a new variable.
+4. and, click **Run** !
+
+.png>)
+
+****
+