diff --git a/README.md b/README.md
index 12a9eca..2096f9b 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,129 @@
 # page-text-replacer
 
-page-text-replacer base on json template, click in extension and past your json model, example:
+This extension allows you to manipulate the text of web pages through a configuration, where you can specify rules via regex to capture and modify text on the page.
 
-````json
+Rules are applied every 2 seconds
+
+![Running extension](./docs/running.gif)
+
+## How to install?
+
+1. Extract the release you want to install
+
+![Extracting release 1.0.0 with the right mouse button](./docs/1.png)
+
+2.In Chrome, go to Manage extensions
+
+![Opening the Chrome extension manager using the shortcut to the right of the url](./docs/2.png)
+
+3. Enable development mode and click load unpacked compression
+
+![Clicking on development mode and loading the extension](./docs/3.png)
+
+4. Go inside the folder extracted in step 1 and select
+
+![Accessing the folder where the release 1.0.0 was extracted](./docs/4.png)
+
+5. The extension must be loaded
+
+![Verifying that the extension has been loaded](./docs/5.png)
+
+6. Pinned extension
+
+![Clicking to pinned the extension](./docs/6.png)
+
+7. Have fun clicking on the extension and opening the pop-up where you can paste the settings file, create configurations and even enable or disable extension processing
+
+![Clicking on the newly pinned extension](./docs/7.png)
+
+## How create a config?
+
+The rules are defined through a list, which follows the following format:
+
+```ts
 [
   {
-    "regexActiveOnUrl": "github.*gabrielogregorio.*vscode-config",
-    "name": "",
-    "url": "",
-    "querySelectorAllTextContent": "'[class=\"react-directory-truncate\"]'",
-    "replacers": [
+    // for organization
+    name: '',
+    url: '',
+
+    // regex that defines which sites the extension will be active on,
+    // in this case, this rule will be active on the url that contains this pattern
+    regexActiveOnUrl: 'github.*gabrielogregorio',
+
+    // this is the query selector all that the extension should search for, this
+    // is `document.querySelectorAll('query here')`, where the query here is the content below
+    querySelectorAllTextContent: '[itemprop="name codeRepository"]',
+
+    // replacers are the replacement rules that the extension will use, we will see more in the topic below
+    replacers: []
+  }
+];
+```
+
+## Replacers
+
+Replacers are the rules that will be applied to the page, it follows the following format.
+
+> Replacers change the `textContent` of each tag, that is, it is the equivalent of `document.getElementById('#exampleId').textContent`
+
+```ts
+{
+  // In situations where `querySelectorAll TextContent` returns unwanted
+  // content, you can use `regexSearchToApply` to filter only
+  // the desired content
+  // can be empty
+  "regexSearchToApply": "log:",
+
+  // only for organizations
+  "name": "",
+
+  // here is the regex that will be applied to the texts
+  // It is equivalent to `new RegExp(regexGlobalFound, 'g')`
+ "regexGlobalFound": ".*?msg:\\s(.*)",
+
+  // here is the regex that will be applied to replace,
+  // that is, it is the equivalent of
+  // `htmlTag.textContent.replace(regex, replaceBy)`
+  "replaceBy": "$1"
+}
+```
+
+And of course, you can and it is preferable that you use the extension itself to generate your replaces, as shown in the image below:
+
+![Creating a replacer that will have the configuration at the end of this topic](docs/model-config.png)
+
+You paste the target text, create your regex, your replace by and copy the generated settings, this will already return a regex escaped to JSON.
+
+And finally, here is a complete example of the model
+
+```ts
+[
+  {
+    regexActiveOnUrl: 'github.*gabrielogregorio',
+    name: '',
+    url: '',
+    querySelectorAllTextContent: '[itemprop="name codeRepository"]',
+    replacers: [
       {
-        "regexSearchToApply": ".*md|.*json",
-        "regexGlobalFound": "(.*)\\.(.*)",
-        "replaceBy": "$2 $1"
+        regexSearchToApply: '',
+        name: '',
+        regexGlobalFound: '.*?msg:\\s(.*)',
+        replaceBy: '$1'
       }
     ]
   }
-]```
-````
+];
+```
+
+Just paste your configuration
+![Pasting the generated configuration into the Past your config file section of the extension](./docs/past-config.png)
+
+And enable the extension
+
+![Enabling the extension at the top of the extension popup](./docs/enable-extension.png)
+
+
+## For devs
+
+To contribute you can open issues, pull requests, I don't have many rules except that you cannot upload pull requests with .zip or any type of binary, all .zip will be generated only by min (JUST FOR SAFETY), but I fully accept ALL other changes to the code as long as you have eslint, prettier and commitlint configured (or that you follow the standard of these tools) and that all tests and ci are passing. 💛 💙
\ No newline at end of file
diff --git a/docs/1.png b/docs/1.png
new file mode 100644
index 0000000..a089605
Binary files /dev/null and b/docs/1.png differ
diff --git a/docs/2.png b/docs/2.png
new file mode 100644
index 0000000..3812b7f
Binary files /dev/null and b/docs/2.png differ
diff --git a/docs/3.png b/docs/3.png
new file mode 100644
index 0000000..e000574
Binary files /dev/null and b/docs/3.png differ
diff --git a/docs/4.png b/docs/4.png
new file mode 100644
index 0000000..ce36a6b
Binary files /dev/null and b/docs/4.png differ
diff --git a/docs/5.png b/docs/5.png
new file mode 100644
index 0000000..6984c31
Binary files /dev/null and b/docs/5.png differ
diff --git a/docs/6.png b/docs/6.png
new file mode 100644
index 0000000..d235986
Binary files /dev/null and b/docs/6.png differ
diff --git a/docs/7.png b/docs/7.png
new file mode 100644
index 0000000..d99f6e7
Binary files /dev/null and b/docs/7.png differ
diff --git a/docs/enable-extension.png b/docs/enable-extension.png
new file mode 100644
index 0000000..60d4f4b
Binary files /dev/null and b/docs/enable-extension.png differ
diff --git a/docs/model-config.png b/docs/model-config.png
new file mode 100644
index 0000000..b07a58b
Binary files /dev/null and b/docs/model-config.png differ
diff --git a/docs/past-config.png b/docs/past-config.png
new file mode 100644
index 0000000..9cdff79
Binary files /dev/null and b/docs/past-config.png differ
diff --git a/docs/running.gif b/docs/running.gif
new file mode 100644
index 0000000..23d49a1
Binary files /dev/null and b/docs/running.gif differ
diff --git a/public/icon128.png b/public/icon128.png
index 545080a..38a6c2d 100644
Binary files a/public/icon128.png and b/public/icon128.png differ
diff --git a/public/icon16.png b/public/icon16.png
index 24fb50d..90847cb 100644
Binary files a/public/icon16.png and b/public/icon16.png differ
diff --git a/public/icon32.png b/public/icon32.png
index 2d9d6ae..be311ed 100644
Binary files a/public/icon32.png and b/public/icon32.png differ
diff --git a/public/icon48.png b/public/icon48.png
index ff79717..b2310d9 100644
Binary files a/public/icon48.png and b/public/icon48.png differ
diff --git a/public/icon500.png b/public/icon500.png
index de920f2..373adf5 100644
Binary files a/public/icon500.png and b/public/icon500.png differ
diff --git a/public/reference.xcf b/public/reference.xcf
new file mode 100644
index 0000000..99c3ed0
Binary files /dev/null and b/public/reference.xcf differ
diff --git a/release/1.0.0.zip b/release/1.0.0.zip
index 07627ea..cd330da 100644
Binary files a/release/1.0.0.zip and b/release/1.0.0.zip differ
diff --git a/src/poupup/index.ts b/src/poupup/index.ts
index 4ff0ce4..4537e6f 100644
--- a/src/poupup/index.ts
+++ b/src/poupup/index.ts
@@ -51,17 +51,17 @@ const processRegexUpdated = () => {
 
 (function syncLocalStatesOnLocalStorageService() {
   htmlInputText.addEventListener('input', () => {
-    LocalStorageService.save('htmlInputText', removeExtraneousCharacters(htmlInputText.value) || '');
+    LocalStorageService.save(htmlInputText.id, removeExtraneousCharacters(htmlInputText.value) || '');
     processRegexUpdated();
   });
 
   htmlInputRegex.addEventListener('input', () => {
-    LocalStorageService.save('htmlInputRegex', htmlInputRegex.value || '');
+    LocalStorageService.save(htmlInputRegex.id, htmlInputRegex.value || '');
     processRegexUpdated();
   });
 
   htmlInputReplaceBy.addEventListener('input', () => {
-    LocalStorageService.save('htmlInputReplaceBy', htmlInputReplaceBy.value || '');
+    LocalStorageService.save(htmlInputReplaceBy.id, htmlInputReplaceBy.value || '');
     processRegexUpdated();
   });
 
diff --git a/src/services/LogService.ts b/src/services/LogService.ts
index 553771b..a628431 100644
--- a/src/services/LogService.ts
+++ b/src/services/LogService.ts
@@ -25,3 +25,4 @@ export class LogService {
     console.error('[page-text-replacer] ' + message, ...optionalParams);
   }
 }
+