diff --git a/README.md b/README.md
index 826e2c7..1b4a4e4 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,50 @@
-# Env Setup
-- Setup the emscripten sdk environment
- Follow DoDown and Install steps https://emscripten.org/docs/getting_started/downloads.html
-- Clone the repo using git clone --recurse-submodules https://github.com/rlottie/rlottie.github.io.git command
+
-# Build
- - cd rlottie
- - ./wasm_build.sh {emscripten_sdk_path}
- - cp builddir_wasm/src/rlottie-wasm.* ../
- - NOTE : to get a callstack modify build.sh file by passing the build flag -s assertions=1
+## Introduction
+PrettyView is the most convenient lottie web player. It is created to help communication between designers and developers. Not only does PrettyView helps designers and developers to check if the animation is rendered well on the website, but PrettyView also allows to customize animation layers.
-# test
- run ./test.sh in command prompt.
+- **Simple Customization**: In the left panel, users can access each layer by keypath. In the right panel, you can easily adjust properties such as color, opacity, and position, and find out the immediate changes.
+
+## Features
+- [x] Change layer color
+- [x] Change layer opacity
+- [x] Change layer position
+- [x] Canvas shape, rotation
+- [x] Keypath search
+- [ ] Multi view
+- [ ] Play speed, type, direction
+- [ ] Transforms
+
+
+
+## Getting Started
+### Env Setup
+
+- Setup the emscripten sdk environment. Follow Down and Install steps [emscripten](https://emscripten.org/docs/getting_started/downloads.html)
+- Clone the repo
+```bash
+$ git clone --recurse-submodules https://github.com/rlottie/rlottie.github.io.git
+```
+
+### Build
+```bash
+$ cd rlottie
+$ ./wasm_build.sh {absolute_emsdk_folder_path}
+$ cp builddir_wasm/src/rlottie-wasm.* ../
+```
+- NOTE : to get a callstack modify build.sh file by passing the build flag -s assertions=1
+
+
+### test
+```bash
+$ run ./test.sh
+```
+
+
+
+## License
+
+No License
+
+**But [gif.js](https://github.com/jnordberg/gif.js) has MIT License**
diff --git a/components/leftPanel.vue b/components/leftPanel.vue
new file mode 100644
index 0000000..8297340
--- /dev/null
+++ b/components/leftPanel.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+ Anubis.json
+
+
+
+
+
+
+
Keypath
+
+
+
+
+
+ Please type in keypath and press enter
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/navbar.vue b/components/navbar.vue
new file mode 100644
index 0000000..93c5a34
--- /dev/null
+++ b/components/navbar.vue
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Import New Lottie File
+
+
+
+
+
+ mdi-paperclip
+ Upload Lottie File
+
+
+
or
+
+
+
+ Import
+
+
+
+
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/property.vue b/components/property.vue
new file mode 100644
index 0000000..2d21980
--- /dev/null
+++ b/components/property.vue
@@ -0,0 +1,266 @@
+
+
+
Property
+
+
+
+
+ Keypath
+
+
+ {{ keypath }}
+
+
+
+
+
+
+
+
Color
+
+
+
+
+
+ {{ color }}
+
+
+
+
+
+
+
+
+
+
Opacity
+
+
+
+
+
+ Number should be between 0 and 100
+
+
+
+
+
+
+
+
+
+
+
Stroke Width
+
+
+
+
+
+ Number should be greater than or equal to 0
+
+
+
+
+
+
+
+
+
+
+
Position
+
+
+
+
+
+ X axis and Y axis directions are relative concepts that can differ depending on the file
+
+