diff --git a/.vscode/settings.json b/.vscode/settings.json
index 80336f9..0eb8fc3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,6 +10,7 @@
         "npmlist",
         "Parens",
         "postbody",
+        "previewable",
         "tsbuildinfo",
         "vbscript"
     ],
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..8b0a938
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,34 @@
+## Chores
+
+-   **release:**
+    -   0.1.2 ([768f840f](https://github.com/shu-vro/CrudMan/commit/768f840f60b4d96de5bfbb23061a9dcb102f266a))
+    -   0.1.1 ([9ad5a29d](https://github.com/shu-vro/CrudMan/commit/9ad5a29d4f1d622067761085a8ad36cfabb46e6b))
+
+### v0.1.1
+
+## What's Changed
+
+-   Fixed #12 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/13
+-   Issue fixer#14 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/15
+-   Issue fixer#14 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/16
+-   Merge by @shu-vro in https://github.com/shu-vro/CrudMan/pull/17
+-   Merge pull request #17 from shu-vro/main by @shu-vro in https://github.com/shu-vro/CrudMan/pull/18
+-   Updated `authslide` pane view by @shu-vro in https://github.com/shu-vro/CrudMan/pull/19
+-   Merging changes to issueixer#14 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/20
+-   fixed #21 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/22
+-   Issue Fixed #14. by @shu-vro in https://github.com/shu-vro/CrudMan/pull/24
+
+**Full Changelog**: https://github.com/shu-vro/CrudMan/compare/v0.1.0...v0.1.1
+
+### v0.1.0 (2022-07-18)
+
+## What's Changed
+
+-   Create CODE_OF_CONDUCT.md by @shu-vro in https://github.com/shu-vro/CrudMan/pull/6
+-   Create LICENSE by @shu-vro in https://github.com/shu-vro/CrudMan/pull/10
+
+## New Contributors
+
+-   @shu-vro made their first contribution in https://github.com/shu-vro/CrudMan/pull/6
+
+**Full Changelog**: https://github.com/shu-vro/CrudMan/commits/v0.1.0
diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index c4d02d9..e5bcd8f 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -2,7 +2,12 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import styles from "@styles/Checkbox.module.scss";
 
-export default function Checkbox({ label = "", ...rest }) {
+export default function Checkbox({
+    label = "",
+    type = "checkbox",
+    Ref = null,
+    ...rest
+}) {
     const [id, setId] = useState(v4());
     useEffect(() => {
         setId(prev => prev);
@@ -11,7 +16,7 @@ export default function Checkbox({ label = "", ...rest }) {
     return (
         <>
             <label className={styles.checkbox} htmlFor={id}>
-                <input id={id} {...rest} />
+                <input id={id} {...rest} type={type} ref={Ref} />
                 <svg viewBox="0 0 21 21">
                     <path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
                 </svg>
diff --git a/components/Config/AuthSlide/APIKeySlide.tsx b/components/Config/AuthSlide/APIKeySlide.tsx
index ba0806c..f3f8393 100644
--- a/components/Config/AuthSlide/APIKeySlide.tsx
+++ b/components/Config/AuthSlide/APIKeySlide.tsx
@@ -1,17 +1,25 @@
 import { useEffect, useRef, useState } from "react";
 import { InputAuth } from ".";
 import { useAuth } from "@utils/Auth";
-import { useParams } from "@utils/Params";
 import { useHistorySaver } from "@utils/HistorySaver";
 import Checkbox from "components/Checkbox";
+import { defineTooltip } from "@utils/utils";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
 
 export default function APIKeySlide() {
     const formRef = useRef(null);
     const includeRef = useRef(null);
     const { setObject } = useAuth();
-    const { setObject: setParams } = useParams();
     const [defaultValue, setDefaultValue] = useState([]);
     const historySaver = useHistorySaver();
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     useEffect(() => {
         if (historySaver.defaultObject.authMethod !== "APIKey") return;
@@ -40,54 +48,45 @@ export default function APIKeySlide() {
         );
     }, [historySaver.defaultObject]);
 
-    useEffect(() => {
-        let methodFromAuthSlide: string = "APIKey";
-        const form: HTMLFormElement = formRef.current;
-
-        form.addEventListener("input", e => {
-            e.preventDefault();
-            let formData = new FormData(form);
-            let key = formData.get("api_access_key").toString();
-            let checkbox = formData.get("api_access_checkbox");
-            let value = formData.get("api_access_value");
-            if (key === "")
-                return setObject({
-                    headers: {},
-                    params: {},
-                    setObject,
-                    methodFromAuthSlide: "",
-                });
-            if (checkbox === "on") {
-                setObject(prev => {
-                    return {
-                        ...prev,
+    return (
+        <form
+            className="slide authSlide APIKey"
+            ref={formRef}
+            onInput={() => {
+                let methodFromAuthSlide: string = "APIKey";
+                let formData = new FormData(formRef.current);
+                let key = formData.get("api_access_key").toString();
+                let checkbox = formData.get("api_access_checkbox");
+                let value = formData.get("api_access_value").toString();
+                if (key === "")
+                    return setObject({
                         headers: {},
-                        params: { [key]: value },
-                        setObject,
-                        methodFromAuthSlide,
-                    };
-                });
-            } else {
-                setObject(prev => {
-                    return {
-                        ...prev,
-                        headers: { [key]: value },
                         params: {},
                         setObject,
-                        methodFromAuthSlide,
-                    };
-                });
-            }
-        });
-    }, [setObject, setParams]);
-
-    const a = useAuth();
-    useEffect(() => {
-        console.log(a);
-    }, [a]);
-
-    return (
-        <form className="slide authSlide APIKey" ref={formRef}>
+                        methodFromAuthSlide: "",
+                    });
+                if (checkbox === "on") {
+                    setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: {},
+                            params: { [key]: value },
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                } else {
+                    setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: { [key]: value },
+                            params: {},
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                }
+            }}>
             <h3>Basic Authentication</h3>
             {/* <label>Include in Query</label> */}
             <Checkbox
@@ -95,17 +94,31 @@ export default function APIKeySlide() {
                 type="checkbox"
                 name="api_access_checkbox"
                 value="on"
-                ref={includeRef}
+                Ref={includeRef}
             />
             <InputAuth
                 FieldName="Key"
                 name="api_access_key"
                 defaultValue={defaultValue?.[0]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                }}
             />
             <InputAuth
                 FieldName="Value"
                 name="api_access_value"
                 defaultValue={defaultValue?.[1]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
         </form>
     );
diff --git a/components/Config/AuthSlide/AuthSlide.tsx b/components/Config/AuthSlide/AuthSlide.tsx
index 1cadaab..0698eea 100644
--- a/components/Config/AuthSlide/AuthSlide.tsx
+++ b/components/Config/AuthSlide/AuthSlide.tsx
@@ -13,7 +13,13 @@ export default function AuthSlide() {
     const auth = useAuth();
     const selectRef = useRef(null);
     const historySaver = useHistorySaver();
-    let lists = ["None", "Basic", "Bearer", "APIKey", "OAuth2"];
+    let lists = [
+        "None",
+        "Basic",
+        "Bearer",
+        "APIKey",
+        // "OAuth2"
+    ];
     const [component, setComponent] = useState(null);
 
     useEffect(() => {
@@ -32,6 +38,12 @@ export default function AuthSlide() {
                 })
             );
         }, 100);
+        auth.setObject(prev => ({
+            ...prev,
+            headers: historySaver.defaultObject.auth.headers,
+            params: historySaver.defaultObject.auth.params,
+            methodFromAuthSlide: historySaver.defaultObject.authMethod,
+        }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [historySaver.defaultObject]);
 
@@ -42,9 +54,11 @@ export default function AuthSlide() {
             setComponent(<BearerSlide />);
         } else if (e.target.value === "APIKey") {
             setComponent(<APIKeySlide />);
-        } else if (e.target.value === "OAuth2") {
-            setComponent(<OAuth2Slide />);
-        } else {
+        }
+        //  else if (e.target.value === "OAuth2") {
+        //     setComponent(<OAuth2Slide />);
+        // }
+        else {
             setComponent(<NoneSlide />);
             auth.setObject(prev => ({
                 ...prev,
diff --git a/components/Config/AuthSlide/BasicSlide.tsx b/components/Config/AuthSlide/BasicSlide.tsx
index 2933e56..cd456d6 100644
--- a/components/Config/AuthSlide/BasicSlide.tsx
+++ b/components/Config/AuthSlide/BasicSlide.tsx
@@ -1,13 +1,24 @@
 import { useEffect, useRef, useState } from "react";
+import Mustache from "mustache";
 import { InputAuth } from ".";
 import { useAuth } from "@utils/Auth";
 import { useHistorySaver } from "@utils/HistorySaver";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
+import { defineTooltip } from "@utils/utils";
 
 export default function BasicSlide() {
     const formRef = useRef(null);
     const { setObject } = useAuth();
     const [defaultValue, setDefaultValue] = useState([]);
     const historySaver = useHistorySaver();
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     useEffect(() => {
         if (historySaver.defaultObject.authMethod !== "basic") return;
@@ -32,54 +43,68 @@ export default function BasicSlide() {
         );
     }, [historySaver.defaultObject]);
 
-    useEffect(() => {
-        let methodFromAuthSlide: string = "basic";
-        let form: HTMLFormElement = formRef.current;
-        form.addEventListener("input", e => {
-            e.preventDefault();
-            let formData = new FormData(form);
-            let username = formData.get("basic_username");
-            let password = formData.get("basic_password");
-            if (username === "")
-                return setObject(prev => {
+    return (
+        <form
+            className="slide authSlide Basic"
+            ref={formRef}
+            onInput={() => {
+                let methodFromAuthSlide: string = "basic";
+                let formData = new FormData(formRef.current);
+                let username = formData.get("basic_username");
+                let password = formData.get("basic_password");
+                try {
+                    username = Mustache.render(username, environment.variables);
+                    password = Mustache.render(password, environment.variables);
+                } catch (error) {}
+
+                if (username === "")
+                    return setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: {},
+                            params: {},
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                let Authorization = `${methodFromAuthSlide} ${Buffer.from(
+                    `${username}:${password}`
+                ).toString("base64")}`;
+                setObject(prev => {
                     return {
                         ...prev,
-                        headers: {},
-                        params: {},
+                        headers: { Authorization },
                         setObject,
                         methodFromAuthSlide,
                     };
                 });
-            let Authorization = `${methodFromAuthSlide} ${Buffer.from(
-                `${username}:${password}`
-            ).toString("base64")}`;
-            // setObject({ Authorization, setObject, methodFromAuthSlide });
-            setObject(prev => {
-                return {
-                    ...prev,
-                    headers: { Authorization },
-                    setObject,
-                    methodFromAuthSlide,
-                };
-            });
-        });
-    }, [setObject]);
-
-    return (
-        <form className="slide authSlide Basic" ref={formRef}>
+            }}>
             <h3>Basic Authentication</h3>
             <InputAuth
                 FieldName="Username"
                 name="basic_username"
                 autoComplete="username"
                 defaultValue={defaultValue?.[0]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                }}
             />
             <InputAuth
                 FieldName="Password"
-                type="password"
                 name="basic_password"
                 autoComplete="current-password"
                 defaultValue={defaultValue?.[1]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
         </form>
     );
diff --git a/components/Config/AuthSlide/BearerSlide.tsx b/components/Config/AuthSlide/BearerSlide.tsx
index 26376c3..fd8f016 100644
--- a/components/Config/AuthSlide/BearerSlide.tsx
+++ b/components/Config/AuthSlide/BearerSlide.tsx
@@ -1,12 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 import { useAuth } from "@utils/Auth";
 import { useHistorySaver } from "@utils/HistorySaver";
+import { defineTooltip } from "@utils/utils";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
 
 export default function BearerSlide() {
     const formRef = useRef(null);
     const { setObject } = useAuth();
     const historySaver = useHistorySaver();
     const [defaultValue, setDefaultValue] = useState("");
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     useEffect(() => {
         if (historySaver.defaultObject.authMethod !== "bearer") return;
@@ -28,45 +37,49 @@ export default function BearerSlide() {
         );
     }, [historySaver.defaultObject]);
 
-    useEffect(() => {
-        let methodFromAuthSlide: string = "bearer";
-        const form: HTMLFormElement = formRef.current;
-        form.addEventListener("input", e => {
-            e.preventDefault();
-            let formData = new FormData(form);
-            let token = formData.get("bearer_token");
-            if (token === "")
-                return setObject(prev => {
+    return (
+        <form
+            className="slide authSlide Bearer"
+            ref={formRef}
+            onInput={() => {
+                let methodFromAuthSlide: string = "bearer";
+                let formData = new FormData(formRef.current);
+                let token = formData.get("bearer_token");
+                if (token === "")
+                    return setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: {},
+                            params: {},
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                let Authorization = `${methodFromAuthSlide} ${token}`;
+                setObject(prev => {
                     return {
                         ...prev,
-                        headers: {},
+                        headers: { Authorization },
                         params: {},
                         setObject,
                         methodFromAuthSlide,
                     };
                 });
-            let Authorization = `${methodFromAuthSlide} ${token}`;
-            setObject(prev => {
-                return {
-                    ...prev,
-                    headers: { Authorization },
-                    params: {},
-                    setObject,
-                    methodFromAuthSlide,
-                };
-            });
-        });
-    }, [setObject]);
-
-    return (
-        <form className="slide authSlide Bearer" ref={formRef}>
+            }}>
             <h3>Bearer Token</h3>
             <textarea
                 name="bearer_token"
                 id="bearer_token"
                 cols={40}
                 rows={10}
-                defaultValue={defaultValue}></textarea>
+                defaultValue={defaultValue}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                }}></textarea>
         </form>
     );
 }
diff --git a/components/Config/BodySlide/BodySlide.tsx b/components/Config/BodySlide/BodySlide.tsx
index a0f368f..2bf90a5 100644
--- a/components/Config/BodySlide/BodySlide.tsx
+++ b/components/Config/BodySlide/BodySlide.tsx
@@ -3,52 +3,56 @@ import { usePostBody } from "@utils/Body";
 import { useHistorySaver } from "@utils/HistorySaver";
 import MonacoCodeEditor from "components/Editors/MonacoCodeEditor";
 import AceCodeEditor from "components/Editors/AceCodeEditor";
-import useRecognizeMobile from "hooks/useRecognizeMobile";
+import useDeviceType from "hooks/useDeviceType";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
+import { defineTooltip } from "@utils/utils";
 
 export default function BodySlide() {
     const historySaver = useHistorySaver();
     const [annotations, setAnnotations] = useState([]);
     const [valid, setValid] = useState(true);
-    const isMobile = useRecognizeMobile();
+    const isMobile = useDeviceType();
     let postBody = usePostBody();
+    const environment = useEnvironment();
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
     const [postBodyCopy, setPostBodyCopy] = useState(
-        JSON.stringify(postBody.object, null, 4)
+        JSON.stringify(postBody.object, null, 2)
     );
 
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
+
     useEffect(() => {
         setPostBodyCopy(
-            JSON.stringify(historySaver.defaultObject.body, null, 4)
+            JSON.stringify(historySaver.defaultObject.body, null, 2)
         );
         postBody.setObject(historySaver.defaultObject.body);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [historySaver.defaultObject]);
 
     return (
-        <div className="slide Body">
+        <div
+            className="slide Body"
+            data-html={true}
+            data-place="top"
+            data-tip={tooltipTextForField}>
             <h2>
                 Json Content{" "}
                 <span className={`dot ${valid ? "" : "red"}`}></span>
             </h2>
-            {isMobile !== "mobile" ? (
-                <MonacoCodeEditor
-                    value={postBodyCopy}
-                    onChange={e => {
-                        setPostBodyCopy(e);
-                        try {
-                            postBody.setObject(JSON.parse(e));
-                        } catch (error) {}
-                    }}
-                    onValidate={e => {
-                        if (e.length > 0) setValid(false);
-                        else setValid(true);
-                    }}
-                />
-            ) : (
+            {isMobile === "mobile" ? (
                 <AceCodeEditor
                     value={postBodyCopy}
                     annotations={annotations}
                     onChange={(value, event) => {
                         const { row, column } = event.start;
+                        defineTooltip(
+                            value,
+                            environment,
+                            setTooltipTextForField
+                        );
                         setPostBodyCopy(value);
                         try {
                             let result = JSON.parse(value);
@@ -74,6 +78,25 @@ export default function BodySlide() {
                         }
                     }}
                 />
+            ) : (
+                <MonacoCodeEditor
+                    value={postBodyCopy}
+                    onChange={value => {
+                        defineTooltip(
+                            value,
+                            environment,
+                            setTooltipTextForField
+                        );
+                        setPostBodyCopy(value);
+                        try {
+                            postBody.setObject(JSON.parse(value));
+                        } catch (error) {}
+                    }}
+                    onValidate={e => {
+                        if (e.length > 0) setValid(false);
+                        else setValid(true);
+                    }}
+                />
             )}
         </div>
     );
diff --git a/components/Config/HeaderSlide/HeaderInput.tsx b/components/Config/HeaderSlide/HeaderInput.tsx
index 7ad30d0..46df37c 100644
--- a/components/Config/HeaderSlide/HeaderInput.tsx
+++ b/components/Config/HeaderSlide/HeaderInput.tsx
@@ -1,7 +1,11 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import SelectHeaderButton from "./SelectHeaderButton";
 import allHeaders from "@utils/data.json";
 import Checkbox from "components/Checkbox";
+import { FiDelete } from "react-icons/fi";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
+import { defineTooltip } from "@utils/utils";
 
 export default function HeaderInput({
     formRef,
@@ -14,6 +18,13 @@ export default function HeaderInput({
     const [key, setKey] = useState("");
     const inputPlaceRef = useRef(null);
     const [hasInput, setHasInput] = useState(defaultChecked);
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     return (
         <div className="input-place" ref={inputPlaceRef}>
@@ -28,9 +39,14 @@ export default function HeaderInput({
                 allHeaders={allHeaders}
                 placeholder={placeHolderNames[0]}
                 defaultValue={defaultValue?.[0]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
                 onInput={e => {
-                    setKey((e.target as HTMLInputElement).value);
-                    if ((e.target as HTMLInputElement).value !== "") {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                    setKey(value);
+                    if (value !== "") {
                         setHasInput(true);
                         setTimeout(() => {
                             formRef.current?.dispatchEvent(
@@ -56,6 +72,13 @@ export default function HeaderInput({
                 name={key}
                 placeholder={placeHolderNames[1]}
                 defaultValue={defaultValue?.[1]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
             <button
                 type="button"
@@ -69,7 +92,7 @@ export default function HeaderInput({
                         );
                     }, 100);
                 }}>
-                &times;
+                <FiDelete />
             </button>
         </div>
     );
diff --git a/components/Config/HeaderSlide/HeaderSlide.tsx b/components/Config/HeaderSlide/HeaderSlide.tsx
index 73d7fee..266a8fa 100644
--- a/components/Config/HeaderSlide/HeaderSlide.tsx
+++ b/components/Config/HeaderSlide/HeaderSlide.tsx
@@ -32,37 +32,6 @@ export default function QuerySlide() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props]);
 
-    useEffect(() => {
-        /**
-         * @type {HTMLFormElement}
-         */
-        let form = formRef.current;
-        form.addEventListener("input", () => {
-            let inputPlace = form.querySelectorAll(".input-place");
-            setProps({});
-            for (let i = 0; i < inputPlace.length; i++) {
-                const place = inputPlace[i];
-                let isChecked =
-                    place.childNodes[0].querySelector("input").checked;
-                if (isChecked !== true) continue;
-                let key = place.childNodes[1].querySelector("input").value;
-                let value = place.childNodes[2].value;
-                if (!isNaN(Number(value))) {
-                    value = Number(value);
-                } else if (value === "true") {
-                    value = true;
-                } else if (value === "false") {
-                    value = false;
-                }
-                let o = {
-                    [key]: value,
-                };
-                setProps(prop => ({ ...prop, ...o }));
-            }
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     useEffect(() => {
         let entries = Object.entries(historySaver.defaultObject.headers);
         setFields([]);
@@ -94,7 +63,32 @@ export default function QuerySlide() {
             <form
                 className="slide Header"
                 id="config-header-slide"
-                ref={formRef}>
+                ref={formRef}
+                onInput={() => {
+                    let inputPlace =
+                        formRef.current.querySelectorAll(".input-place");
+                    setProps({});
+                    for (let i = 0; i < inputPlace.length; i++) {
+                        const place = inputPlace[i];
+                        let isChecked =
+                            place.childNodes[0].querySelector("input").checked;
+                        if (isChecked !== true) continue;
+                        let key =
+                            place.childNodes[1].querySelector("input").value;
+                        let value = place.childNodes[2].value;
+                        if (!isNaN(Number(value))) {
+                            value = Number(value);
+                        } else if (value === "true") {
+                            value = true;
+                        } else if (value === "false") {
+                            value = false;
+                        }
+                        let o = {
+                            [key]: value,
+                        };
+                        setProps(prop => ({ ...prop, ...o }));
+                    }
+                }}>
                 <h2>HTTP Headers</h2>
                 {fields.map(field => (
                     <HeaderInput
diff --git a/components/Config/QuerySlide/GraphQlEditor.tsx b/components/Config/QuerySlide/GraphQlEditor.tsx
index 5a59043..ec5b9ef 100644
--- a/components/Config/QuerySlide/GraphQlEditor.tsx
+++ b/components/Config/QuerySlide/GraphQlEditor.tsx
@@ -1,34 +1,34 @@
 import { useParams } from "@utils/Params";
 import AceCodeEditor from "components/Editors/AceCodeEditor";
 import MonacoCodeEditor from "components/Editors/MonacoCodeEditor";
-import useRecognizeMobile from "hooks/useRecognizeMobile";
+import useDeviceType from "hooks/useDeviceType";
 import { useState } from "react";
 
 export default function GraphQlEditor() {
     const param = useParams();
     const [value, setValue] = useState(``);
-    const isMobile = useRecognizeMobile();
+    const isMobile = useDeviceType();
 
     return (
         <>
             <h2>GraphQl Query</h2>
-            {isMobile !== "mobile" ? (
-                <MonacoCodeEditor
-                    language="graphql"
+            {isMobile === "mobile" ? (
+                <AceCodeEditor
+                    value={value}
+                    mode="puppet"
                     onChange={value => {
                         setValue(value);
                         param.setObject(prev => ({ query: value }));
                     }}
-                    value={value}
                 />
             ) : (
-                <AceCodeEditor
-                    value={value}
-                    mode="puppet"
+                <MonacoCodeEditor
+                    language="graphql"
                     onChange={value => {
                         setValue(value);
                         param.setObject(prev => ({ query: value }));
                     }}
+                    value={value}
                 />
             )}
         </>
diff --git a/components/Config/QuerySlide/InputPlace.tsx b/components/Config/QuerySlide/InputPlace.tsx
index f53e269..3cfb0a7 100644
--- a/components/Config/QuerySlide/InputPlace.tsx
+++ b/components/Config/QuerySlide/InputPlace.tsx
@@ -1,5 +1,10 @@
+import { useEnvironment } from "@utils/Env";
+import { defineTooltip } from "@utils/utils";
 import Checkbox from "components/Checkbox";
+import { useEffect } from "react";
 import { useState, useRef } from "react";
+import { FiDelete } from "react-icons/fi";
+import ReactTooltip from "react-tooltip";
 
 export default function InputPlace({
     keyName,
@@ -12,6 +17,13 @@ export default function InputPlace({
     const [key, setKey] = useState("");
     const [hasInput, setHasInput] = useState(defaultChecked);
     const inputPlaceRef = useRef(null);
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     return (
         <div className="input-place" ref={inputPlaceRef}>
@@ -25,9 +37,14 @@ export default function InputPlace({
             <input
                 type="text"
                 placeholder={placeHolderNames[0]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
                 onInput={e => {
-                    setKey((e.target as HTMLInputElement).value);
-                    if ((e.target as HTMLInputElement).value !== "") {
+                    let value = (e.target as HTMLInputElement).value;
+                    setKey(value);
+                    defineTooltip(value, environment, setTooltipTextForField);
+                    if (value !== "") {
                         setHasInput(true);
                         setTimeout(() => {
                             formRef.current?.dispatchEvent(
@@ -56,6 +73,13 @@ export default function InputPlace({
                 name={key}
                 placeholder={placeHolderNames[1]}
                 defaultValue={defaultValue?.[1]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
             <button
                 type="button"
@@ -69,7 +93,7 @@ export default function InputPlace({
                         );
                     }, 100);
                 }}>
-                &times;
+                <FiDelete />
             </button>
         </div>
     );
diff --git a/components/Config/QuerySlide/QuerySlide.tsx b/components/Config/QuerySlide/QuerySlide.tsx
index 0794e1a..6eb58e5 100644
--- a/components/Config/QuerySlide/QuerySlide.tsx
+++ b/components/Config/QuerySlide/QuerySlide.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { v4 } from "uuid";
 import { useHistorySaver } from "@utils/HistorySaver";
+import { useEnvironment } from "@utils/Env";
 import { useParams } from "@utils/Params";
 import { useUrlData } from "@utils/UrlData";
 import InputPlace from "./InputPlace";
@@ -12,6 +13,7 @@ export default function QuerySlide() {
     let param = useParams();
     let urlData = useUrlData();
     let historySaver = useHistorySaver();
+    let environment = useEnvironment();
     const [props, setProps] = useState({});
     const [graphqlEnabled, setGraphqlEnabled] = useState(false);
 
@@ -32,9 +34,9 @@ export default function QuerySlide() {
         setFields(prev => prev.filter(field => field.id !== keyName));
     }
 
-    /*
-    These lines should be in historySaver file, but due to bugs, we are migrating these codes in here!
-    */
+    /**
+     * These lines should be in `historySaver` and `environment` file, but due to bugs, we are migrating these codes in here!
+     */
     useEffect(() => {
         if (!localStorage.getItem("history")) {
             localStorage.setItem("history", JSON.stringify([]));
@@ -43,16 +45,34 @@ export default function QuerySlide() {
         historySaver.setObject(
             JSON.parse(localStorage.getItem("history") || "[]")
         );
+        if (!localStorage.getItem("env")) {
+            localStorage.setItem("env", JSON.stringify([]));
+            return;
+        }
+        environment.setObject(JSON.parse(localStorage.getItem("env") || "[]"));
+        environment.setDefaultObject([
+            JSON.parse(localStorage.getItem("env"))?.[0],
+        ]);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
-        historySaver.object.length > 0 &&
-            localStorage.setItem(
-                "history",
-                JSON.stringify(historySaver.object)
-            );
+        localStorage.setItem("history", JSON.stringify(historySaver.object));
     }, [historySaver.object]);
+    useEffect(() => {
+        localStorage.setItem("env", JSON.stringify(environment.object));
+    }, [environment.object]);
+    useEffect(() => {
+        let envVars = {};
+        environment.defaultObject.forEach(env => {
+            env.variables.forEach(variable => {
+                envVars[variable.key] = variable.value;
+            });
+        });
+        environment.setVariables(envVars);
+        console.log(environment.defaultObject);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [environment.defaultObject]);
 
     function setParamsFollowingObject(object: object) {
         let entries = Object.entries(object);
diff --git a/components/Config/TestSlide/TestInput.tsx b/components/Config/TestSlide/TestInput.tsx
index 9ac5ef2..b00c118 100644
--- a/components/Config/TestSlide/TestInput.tsx
+++ b/components/Config/TestSlide/TestInput.tsx
@@ -4,6 +4,10 @@ import SelectButtonValue from "./SelectButtonValue";
 import mimes from "@utils/mime.json";
 import statuses from "@utils/status.json";
 import Checkbox from "components/Checkbox";
+import { FiDelete } from "react-icons/fi";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
+import { defineTooltip } from "@utils/utils";
 
 export default function TestInput({
     formRef,
@@ -16,6 +20,13 @@ export default function TestInput({
     const inputPlaceRef = useRef(null);
     const [sectionValueParent, setSectionValueParent] = useState("");
     const [allHeaders, setAllHeaders] = useState([]);
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     useEffect(() => {
         if (sectionValueParent === "") {
@@ -43,12 +54,19 @@ export default function TestInput({
             <SelectButton
                 setSectionValueParent={setSectionValueParent}
                 defaultValue={entry.key}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
                 optionDefaultValue={
                     entry.section === "" ? entry.key : entry.section
                 }
                 isInputDisabled={
                     !["Headers", "Json-Query"].includes(entry.section)
                 }
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                }}
             />
             <select name="operation" defaultValue={entry.operation}>
                 <option value="equals to">Equal</option>
@@ -66,6 +84,13 @@ export default function TestInput({
                 allProps={allHeaders}
                 placeholder={placeHolderNames[1]}
                 defaultValue={entry.value}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
             <button
                 type="button"
@@ -79,7 +104,7 @@ export default function TestInput({
                         );
                     }, 200);
                 }}>
-                &times;
+                <FiDelete />
             </button>
         </div>
     );
diff --git a/components/Config/TestSlide/TestSlide.tsx b/components/Config/TestSlide/TestSlide.tsx
index 7ddff6d..f614a66 100644
--- a/components/Config/TestSlide/TestSlide.tsx
+++ b/components/Config/TestSlide/TestSlide.tsx
@@ -10,6 +10,7 @@ export default function TestSlide() {
     const historySaver = useHistorySaver();
     let setObject = test.setObject;
     const [props, setProps] = useState([]);
+
     type FieldsType = Array<{
         id: string;
         entry?: {
@@ -30,59 +31,10 @@ export default function TestSlide() {
         setFields(prev => prev.filter(field => field.id !== keyName));
     }
 
-    // useEffect(() => {
-    //     console.log(test);
-    // }, [test]);
-
     useEffect(() => {
         setObject({ props, setObject });
     }, [props, setObject]);
 
-    useEffect(() => {
-        /**
-         * @type {HTMLFormElement}
-         */
-        let form = formRef.current;
-        form.addEventListener("input", () => {
-            let inputPlaces = form.querySelectorAll(".input-place");
-            setProps([]);
-
-            for (let i = 0; i < inputPlaces.length; i++) {
-                const place = inputPlaces[i];
-                let isPresent =
-                    place.childNodes[0].querySelector("input").checked;
-
-                if (!isPresent) continue;
-
-                let section = place.childNodes[1].querySelector("select").value;
-                let key = place.childNodes[1].querySelector("input").value;
-                let operation = place.childNodes[2].value;
-                let value = place.childNodes[3].querySelector(
-                    ".select-container input"
-                ).value;
-
-                if (!isNaN(value)) {
-                    value = Number(value);
-                } else if (value === "true") {
-                    value = true;
-                } else if (value === "false") {
-                    value = false;
-                }
-
-                let o = {
-                    section,
-                    key,
-                    operation,
-                    value,
-                };
-                setProps(prop => {
-                    return [...prop, o];
-                });
-            }
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     useEffect(() => {
         let entries = Object.keys(historySaver.defaultObject.tests);
         setFields([]);
@@ -113,7 +65,50 @@ export default function TestSlide() {
 
     return (
         <>
-            <form className="slide Test" id="config-test-slide" ref={formRef}>
+            <form
+                className="slide Test"
+                id="config-test-slide"
+                ref={formRef}
+                onInput={() => {
+                    let inputPlaces =
+                        formRef.current.querySelectorAll(".input-place");
+                    setProps([]);
+
+                    for (let i = 0; i < inputPlaces.length; i++) {
+                        const place = inputPlaces[i];
+                        let isPresent =
+                            place.childNodes[0].querySelector("input").checked;
+
+                        if (!isPresent) continue;
+
+                        let section =
+                            place.childNodes[1].querySelector("select").value;
+                        let key =
+                            place.childNodes[1].querySelector("input").value;
+                        let operation = place.childNodes[2].value;
+                        let value = place.childNodes[3].querySelector(
+                            ".select-container input"
+                        ).value;
+
+                        if (!isNaN(value)) {
+                            value = Number(value);
+                        } else if (value === "true") {
+                            value = true;
+                        } else if (value === "false") {
+                            value = false;
+                        }
+
+                        let o = {
+                            section,
+                            key,
+                            operation,
+                            value,
+                        };
+                        setProps(prop => {
+                            return [...prop, o];
+                        });
+                    }
+                }}>
                 <h2>Test Api</h2>
                 {fields.map(field => (
                     <TestInput
diff --git a/components/Config/UrlInput.tsx b/components/Config/UrlInput.tsx
index c6e0fcf..68d7c53 100644
--- a/components/Config/UrlInput.tsx
+++ b/components/Config/UrlInput.tsx
@@ -1,6 +1,7 @@
-import { FormEvent, useEffect, useRef, useState } from "react";
-import styles from "@styles/App.module.scss";
+import { useEffect, useRef, useState } from "react";
 import axios from "axios";
+import Mustache from "mustache";
+import styles from "@styles/App.module.scss";
 import { useApiData } from "@utils/ApiData";
 import { useHeaders } from "@utils/Headers";
 import { useAuth } from "@utils/Auth";
@@ -9,6 +10,8 @@ import { usePostBody } from "@utils/Body";
 import { useUrlData } from "@utils/UrlData";
 import { useHistorySaver } from "@utils/HistorySaver";
 import { useTest } from "@utils/Test";
+import { useEnvironment } from "@utils/Env";
+import { defineTooltip } from "@utils/utils";
 
 export default function UrlInput() {
     let { setObject } = useApiData();
@@ -17,11 +20,14 @@ export default function UrlInput() {
     let { object: postBodyObject } = usePostBody();
     let urlData = useUrlData();
     let auth = useAuth();
+    const environment = useEnvironment();
     let { setObject: setHistory } = useHistorySaver();
     let { props: testProps } = useTest();
     const formRef = useRef(null);
     const cancelControllerSource = useRef<any>();
     const [processing, setProcessing] = useState(false);
+    const [tooltipText, setTooltipText] = useState("");
+
     useEffect(() => {
         handleInput();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -33,7 +39,13 @@ export default function UrlInput() {
         let { baseURL, method } = Object.fromEntries(formData.entries());
         let url = (baseURL as string).split("?");
         let baseURLCopy = url[0];
-        let urlParams = Object.fromEntries(new URLSearchParams(url[1]));
+        let up = url[1];
+        try {
+            Mustache.tags = ["<<", ">>"];
+            up = Mustache.render(url[1], environment.variables);
+        } catch (error) {}
+        let urlParams = Object.fromEntries(new URLSearchParams(up));
+        defineTooltip(baseURL.toString(), environment, setTooltipText);
         urlData.setObject({
             urlParams,
             baseURL: baseURLCopy,
@@ -49,16 +61,44 @@ export default function UrlInput() {
         let formData = new FormData(form);
         let entries = Object.fromEntries(formData.entries());
         setObject(prev => ({ ...prev, isFinished: false }));
+        let baseURL_with_env_vars = entries.baseURL.toString();
+        let paramsObjectCopy = { ...paramsObject, ...auth.params };
+        let headersObjectCopy = { ...headersObject, ...auth.headers };
+        let postBodyObjectCopy = { ...postBodyObject };
+        try {
+            baseURL_with_env_vars = Mustache.render(
+                baseURL_with_env_vars,
+                environment.variables
+            );
+            paramsObjectCopy = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(paramsObjectCopy),
+                    environment.variables
+                )
+            );
+            headersObjectCopy = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(headersObjectCopy),
+                    environment.variables
+                )
+            );
+            postBodyObjectCopy = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(postBodyObjectCopy),
+                    environment.variables
+                )
+            );
+        } catch (error) {}
 
         try {
             cancelControllerSource.current = axios.CancelToken.source();
             let { data: res } = await axios.get("/api/headerParser", {
                 cancelToken: cancelControllerSource.current.token,
                 params: {
-                    params: { ...paramsObject, ...auth.params },
-                    headers: { ...headersObject, ...auth.headers },
-                    body: postBodyObject,
-                    url: entries.baseURL,
+                    params: paramsObjectCopy,
+                    headers: headersObjectCopy,
+                    body: postBodyObjectCopy,
+                    url: baseURL_with_env_vars,
                     method: entries.method,
                 },
             });
@@ -123,7 +163,10 @@ export default function UrlInput() {
             onSubmit={handleSubmit}
             ref={formRef}
             autoComplete="on"
-            onChange={handleInput}>
+            onInput={handleInput}
+            data-html={true}
+            data-place="bottom"
+            data-tip={tooltipText}>
             <select
                 name="method"
                 value={urlData.object.method}
diff --git a/components/Editors/AceCodeEditor.tsx b/components/Editors/AceCodeEditor.tsx
index 3d28578..99f455c 100644
--- a/components/Editors/AceCodeEditor.tsx
+++ b/components/Editors/AceCodeEditor.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-// import { IAceEditorProps } from "react-ace";
+import { IAceEditorProps } from "react-ace";
 import dynamic from "next/dynamic";
 import { useTheme } from "@utils/Theme";
 import Loader from "components/Results/Loader";
@@ -31,14 +31,14 @@ const AceEditor = dynamic(
     }
 );
 
-export default function AceCodeEditor({ value, ...rest }) {
+export default function AceCodeEditor({ value, ...rest }: IAceEditorProps) {
     const { value: theme } = useTheme();
     return (
         <AceEditor
             placeholder="Type code."
             mode="json"
             theme={theme === "dark" ? "dracula" : "xcode"}
-            fontSize={13}
+            fontSize={14}
             width="100%"
             height="calc(100% - 100px)"
             showPrintMargin={true}
@@ -48,7 +48,7 @@ export default function AceCodeEditor({ value, ...rest }) {
             setOptions={{
                 showLineNumbers: true,
                 useWorker: false,
-                tabSize: 4,
+                tabSize: 2,
                 enableBasicAutocompletion: true,
                 enableLiveAutocompletion: true,
                 enableSnippets: true,
diff --git a/components/Editors/MonacoCodeEditor.tsx b/components/Editors/MonacoCodeEditor.tsx
index b33eeee..be109e7 100644
--- a/components/Editors/MonacoCodeEditor.tsx
+++ b/components/Editors/MonacoCodeEditor.tsx
@@ -15,9 +15,9 @@ export default function MonacoCodeEditor({ value, readOnly = false, ...rest }) {
             options={{
                 minimap: { enabled: true, scale: 1, showSlider: "always" },
                 wordWrap: "on",
-                tabSize: 4,
+                tabSize: 2,
                 contextmenu: true,
-                fontSize: 13,
+                fontSize: 14,
                 readOnly,
             }}
             value={value}
diff --git a/components/Nav/ButtonSvg.tsx b/components/Nav/ButtonSvg.tsx
index e3ca2df..dce5266 100644
--- a/components/Nav/ButtonSvg.tsx
+++ b/components/Nav/ButtonSvg.tsx
@@ -18,158 +18,3 @@ export function LogoSvg(rest: React.SVGProps<SVGSVGElement>) {
         </svg>
     );
 }
-
-export function InstallSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={25}
-            {...rest}
-            viewBox="0 0 610 512">
-            {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M191 135c-9.375 9.375-9.375 24.56 0 33.94l80 80c9.375 9.375 24.56 9.375 33.94 0l80-80c9.375-9.375 9.375-24.56 0-33.94s-24.56-9.375-33.94 0L312 174.1V24C312 10.75 301.3 0 288 0S264 10.75 264 24v150.1L224.1 135C220.3 130.3 214.2 128 208 128S195.7 130.3 191 135zM528 0H352v64h160v224H64V64h160V0H48C21.5 0 0 21.5 0 48v320C0 394.5 21.5 416 48 416h192L224 464H152C138.8 464 128 474.8 128 488S138.8 512 152 512h272c13.25 0 24-10.75 24-24s-10.75-24-24-24H352L336 416h192c26.5 0 48-21.5 48-48v-320C576 21.5 554.5 0 528 0z" />
-        </svg>
-    );
-}
-export function MoonSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={25}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z" />
-        </svg>
-    );
-}
-
-export function SunSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={25}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M120.2 154.2c4.672 4.688 10.83 7.031 16.97 7.031S149.5 158.9 154.2 154.2c9.375-9.375 9.375-24.56 0-33.93L108.9 74.97c-9.344-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94L120.2 154.2zM256 112c13.25 0 24-10.75 24-24v-64C280 10.75 269.3 0 256 0S232 10.75 232 24v64C232 101.3 242.8 112 256 112zM112 256c0-13.25-10.75-24-24-24h-64C10.75 232 0 242.8 0 256s10.75 24 24 24h64C101.3 280 112 269.3 112 256zM374.8 161.2c6.141 0 12.3-2.344 16.97-7.031l45.25-45.28c9.375-9.375 9.375-24.56 0-33.94s-24.59-9.375-33.94 0l-45.25 45.28c-9.375 9.375-9.375 24.56 0 33.93C362.5 158.9 368.7 161.2 374.8 161.2zM256 400c-13.25 0-24 10.75-24 24v64C232 501.3 242.8 512 256 512s24-10.75 24-24v-64C280 410.8 269.3 400 256 400zM120.2 357.8l-45.25 45.28c-9.375 9.375-9.375 24.56 0 33.94c4.688 4.688 10.83 7.031 16.97 7.031s12.3-2.344 16.97-7.031l45.25-45.28c9.375-9.375 9.375-24.56 0-33.93S129.6 348.4 120.2 357.8zM488 232h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64C501.3 280 512 269.3 512 256S501.3 232 488 232zM391.8 357.8c-9.344-9.375-24.56-9.372-33.94 .0031s-9.375 24.56 0 33.93l45.25 45.28c4.672 4.688 10.83 7.031 16.97 7.031s12.28-2.344 16.97-7.031c9.375-9.375 9.375-24.56 0-33.94L391.8 357.8zM256 144C194.1 144 144 194.1 144 256c0 61.86 50.14 112 112 112s112-50.14 112-112C368 194.1 317.9 144 256 144z" />
-        </svg>
-    );
-}
-export function BarSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={25}
-            {...rest}
-            viewBox="0 0 512 512">
-            <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM64 256C64 238.3 78.33 224 96 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H96C78.33 288 64 273.7 64 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z" />
-        </svg>
-    );
-}
-export function OrientationSvg(rest: React.SVGProps<SVGSVGElement>) {
-    const css = `.fa-secondary {opacity:.4}`;
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={25}
-            {...rest}
-            viewBox="0 0 512 512">
-            <defs>
-                <style>{css}</style>
-            </defs>
-            <path
-                className="fa-primary"
-                d="M0 112C0 85.49 21.49 64 48 64H320V224H48C21.49 224 0 202.5 0 176V112zM0 336C0 309.5 21.49 288 48 288H192V448H48C21.49 448 0 426.5 0 400V336z"
-            />
-            <path
-                className="fa-secondary"
-                d="M320 160H448V128H320V64H464C490.5 64 512 85.49 512 112V176C512 202.5 490.5 224 464 224H320V160zM192 384H448V352H192V288H464C490.5 288 512 309.5 512 336V400C512 426.5 490.5 448 464 448H192V384z"
-            />
-        </svg>
-    );
-}
-
-export function CopySvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={15}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M0 224C0 188.7 28.65 160 64 160H128V288C128 341 170.1 384 224 384H352V448C352 483.3 323.3 512 288 512H64C28.65 512 0 483.3 0 448V224zM224 352C188.7 352 160 323.3 160 288V64C160 28.65 188.7 0 224 0H448C483.3 0 512 28.65 512 64V288C512 323.3 483.3 352 448 352H224z" />
-        </svg>
-    );
-}
-export function HistorySvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={15}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C201.7 512 151.2 495 109.7 466.1C95.2 455.1 91.64 436 101.8 421.5C111.9 407 131.8 403.5 146.3 413.6C177.4 435.3 215.2 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64C202.1 64 155 85.46 120.2 120.2L151 151C166.1 166.1 155.4 192 134.1 192H24C10.75 192 0 181.3 0 168V57.94C0 36.56 25.85 25.85 40.97 40.97L74.98 74.98C121.3 28.69 185.3 0 255.1 0L256 0zM256 128C269.3 128 280 138.7 280 152V246.1L344.1 311C354.3 320.4 354.3 335.6 344.1 344.1C335.6 354.3 320.4 354.3 311 344.1L239 272.1C234.5 268.5 232 262.4 232 256V152C232 138.7 242.7 128 256 128V128z" />
-        </svg>
-    );
-}
-export function EnvironmentSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={15}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
-        </svg>
-    );
-}
-export function CorrectSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={15}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z" />
-        </svg>
-    );
-}
-export function DownloadSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={15}
-            {...rest}
-            viewBox="0 0 512 512">
-            {/* Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-            <path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z" />
-        </svg>
-    );
-}
-export function PreviewSvg(rest: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="var(--general-text-color)"
-            width={16}
-            {...rest}
-            viewBox="0 0 555 512">
-            {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.  */}
-            <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z" />
-        </svg>
-    );
-}
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index 57c27c9..1a57654 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -1,14 +1,12 @@
 import styles from "@styles/App.module.scss";
+import SideStyles from "@styles/Sidebar.module.scss";
 import { useTheme } from "@utils/Theme";
 import { useState, useEffect } from "react";
-import {
-    BarSvg,
-    InstallSvg,
-    LogoSvg,
-    MoonSvg,
-    OrientationSvg,
-    SunSvg,
-} from "./ButtonSvg";
+import { LogoSvg } from "./ButtonSvg";
+import { FaBars } from "react-icons/fa";
+import { BsWindowSidebar, BsMoonStars } from "react-icons/bs";
+import { FiSun } from "react-icons/fi";
+import { GoDesktopDownload } from "react-icons/go";
 
 export default function Nav({ setVertical, setToggleVertical }) {
     let themeManager = useTheme();
@@ -43,7 +41,7 @@ export default function Nav({ setVertical, setToggleVertical }) {
                             }
                         }
                     }}>
-                    {deferredPrompt && <InstallSvg />}
+                    {deferredPrompt && <GoDesktopDownload />}
                 </button>
                 <button
                     type="button"
@@ -71,7 +69,11 @@ export default function Nav({ setVertical, setToggleVertical }) {
                             );
                         }
                     }}>
-                    {themeManager.value === "light" ? <MoonSvg /> : <SunSvg />}
+                    {themeManager.value === "light" ? (
+                        <BsMoonStars />
+                    ) : (
+                        <FiSun />
+                    )}
                 </button>
                 <button
                     type="button"
@@ -81,16 +83,21 @@ export default function Nav({ setVertical, setToggleVertical }) {
                         setToggleVertical(prev => !prev);
                         setVertical(prev => (prev.state > 786 ? 785 : 787));
                     }}>
-                    <OrientationSvg />
+                    <BsWindowSidebar />
                 </button>
                 <button
                     type="button"
                     onClick={() => {
                         document
-                            .querySelector(`.${styles.sidebar}`)
+                            .querySelector(`.${SideStyles.sidebar}`)
                             .classList.remove("inactive");
+
+                        document.querySelector(
+                            `.${SideStyles.overlay}`
+                            // @ts-ignore
+                        ).style.display = "block";
                     }}>
-                    <BarSvg />
+                    <FaBars />
                 </button>
             </div>
         </nav>
diff --git a/components/Results/CodeSlide/CodeBody.tsx b/components/Results/CodeSlide/CodeBody.tsx
index 4c84f15..7a53cee 100644
--- a/components/Results/CodeSlide/CodeBody.tsx
+++ b/components/Results/CodeSlide/CodeBody.tsx
@@ -1,7 +1,5 @@
-import dynamic from "next/dynamic";
-
 import { useState, useEffect } from "react";
-import { useTheme } from "@utils/Theme";
+import Mustache from "mustache";
 import { useCode } from "@utils/Code";
 import { useParams } from "@utils/Params";
 import { useHeaders } from "@utils/Headers";
@@ -9,15 +7,18 @@ import { useAuth } from "@utils/Auth";
 import { useUrlData } from "@utils/UrlData";
 import { usePostBody } from "@utils/Body";
 import MonacoCodeEditor from "components/Editors/MonacoCodeEditor";
+import AceCodeEditor from "components/Editors/AceCodeEditor";
+import useDeviceType from "hooks/useDeviceType";
+import { useEnvironment } from "@utils/Env";
 
 export default function CodeBody() {
     const { selectCode, setObject } = useCode();
-    const { value: theme } = useTheme();
-    let { object: headers } = useHeaders();
+    const { object: headers } = useHeaders();
     const { object: queryParams } = useParams();
     let auth = useAuth();
-    let { object: urlData } = useUrlData();
-    let { object: body } = usePostBody();
+    const environment = useEnvironment();
+    const { object: urlData } = useUrlData();
+    const { object: body } = usePostBody();
     const [config, setConfig] = useState({
         boilerplate: "",
         mode: "",
@@ -33,28 +34,57 @@ export default function CodeBody() {
         delete copyBody["setObject"];
         let authHeaders = auth.headers;
         let copyHeaders = { ...headers, ...authHeaders };
+        let queryParamsCopy = { ...queryParams, ...auth.params };
         delete copyHeaders["setObject"];
+        let _url_with_env_vars = urlData?.url;
+        let _baseurl_with_env_vars = urlData?.url;
+        try {
+            copyHeaders = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(copyHeaders),
+                    environment.variables
+                )
+            );
+            copyBody = JSON.parse(
+                Mustache.render(JSON.stringify(copyBody), environment.variables)
+            );
+            queryParamsCopy = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(queryParamsCopy),
+                    environment.variables
+                )
+            );
+            _url_with_env_vars = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(_url_with_env_vars),
+                    environment.variables
+                )
+            );
+            _baseurl_with_env_vars = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(_baseurl_with_env_vars),
+                    environment.variables
+                )
+            );
+        } catch (error) {}
 
         let urlRegex =
             /(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/gi;
-        let urlArray = urlData?.url.split(urlRegex); // 4, 5 and 6 has desired output
+        let urlArray = _url_with_env_vars.split(urlRegex); // 4, 5 and 6 has desired output
+        try {
+            urlArray = Mustache.render(
+                urlData?.url,
+                environment.variables
+            ).split(urlRegex);
+        } catch (error) {}
         let searchParams = new URLSearchParams(urlArray?.[6]);
-        for (const key in queryParams) {
-            searchParams.append(key, queryParams[key]);
-        }
-        for (const key in auth.params) {
-            if (Object.prototype.hasOwnProperty.call(auth.params, key)) {
-                const value = auth.params[key];
-                searchParams.append(key, value);
-            }
+        for (const key in queryParamsCopy) {
+            searchParams.append(key, queryParamsCopy[key]);
         }
-        // let url = `${urlArray?.[1]}//${urlArray?.[4]}${
-        //     urlArray?.[5]
-        // }?${searchParams.toString()}`;
-        let url = `${urlData.baseURL}?${searchParams.toString()}`;
+        let url = `${_baseurl_with_env_vars}?${searchParams.toString()}`;
 
-        let copyBodyString = JSON.stringify(copyBody, null, 4);
-        let copyHeaderString = JSON.stringify(copyHeaders, null, 4);
+        let copyBodyString = JSON.stringify(copyBody, null, 2);
+        let copyHeaderString = JSON.stringify(copyHeaders, null, 2);
         let methodString = urlData.method.toUpperCase();
         if (selectCode === "C# HttpClient") {
             let headerString = Object.entries(copyHeaders)
@@ -106,7 +136,7 @@ let bodyContent = JSON.stringify(${copyBodyString});
 let reqOptions = {
     method: '${urlData.method}',
     url: '${url}',
-    headers: headerList,
+    headers: headersList,
     data: bodyContent,
 }
 
@@ -130,20 +160,17 @@ fetch("${url}", {
 })`;
             setConfig({ mode: "javascript", boilerplate });
         } else if (selectCode === "Python Http.client") {
-            let urlRegex =
-                /(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/gi;
-            let urlArray = url.split(urlRegex); // 4, 5 and 6 has desired output
             let boilerplate = `import http.client
 import json
 
-conn = http.client.HTTPSConnection("${urlArray?.[4]}")
+conn = http.client.HTTPSConnection("${urlArray?.[4] ? urlArray?.[4] : ""}")
 
 headersList = ${copyHeaderString.replaceAll("true", "True")}
 
 payload = json.dumps(${copyBodyString.replaceAll("true", "True")})
 
-conn.request("${methodString}", "${urlArray?.[5]}${
-                urlArray?.[6]
+conn.request("${methodString}", "${urlArray?.[5] ? urlArray?.[5] : ""}${
+                urlArray?.[6] ? urlArray?.[6] : ""
             }", payload, headersList)
 response = conn.getresponse()
 result = response.read()
@@ -201,12 +228,26 @@ $response | ConvertTo-Json`;
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectCode, headers, body, urlData, auth, queryParams]);
+    const isMobile = useDeviceType();
 
     return (
-        <MonacoCodeEditor
-            value={config.boilerplate}
-            readOnly={true}
-            language={config.mode}
-        />
+        // <MonacoCodeEditor
+        //     value={config.boilerplate}
+        //     readOnly={true}
+        //     language={config.mode}
+        // />
+        isMobile === "mobile" ? (
+            <AceCodeEditor
+                mode={config.mode}
+                readOnly
+                value={config.boilerplate}
+            />
+        ) : (
+            <MonacoCodeEditor
+                value={config.boilerplate}
+                readOnly
+                language={config.mode}
+            />
+        )
     );
 }
diff --git a/components/Results/CopyButton.tsx b/components/Results/CopyButton.tsx
index defcf20..0c35e62 100644
--- a/components/Results/CopyButton.tsx
+++ b/components/Results/CopyButton.tsx
@@ -1,5 +1,6 @@
-import { CopySvg, CorrectSvg } from "components/Nav/ButtonSvg";
 import { useState } from "react";
+import { IoCopyOutline } from "react-icons/io5";
+import { TiTick } from "react-icons/ti";
 
 export default function CopyButton({ data }) {
     const [copied, setCopied] = useState(false);
@@ -22,7 +23,7 @@ export default function CopyButton({ data }) {
                     );
                 }
             }}>
-            {copied ? <CorrectSvg /> : <CopySvg />}
+            {copied ? <TiTick /> : <IoCopyOutline />}
         </button>
     );
 }
diff --git a/components/Results/Response/Response.tsx b/components/Results/Response/Response.tsx
index c144d13..5f3231a 100644
--- a/components/Results/Response/Response.tsx
+++ b/components/Results/Response/Response.tsx
@@ -1,19 +1,44 @@
+/* eslint-disable @next/next/no-img-element */
 import Loader from "../Loader";
-import { DownloadSvg, PreviewSvg } from "components/Nav/ButtonSvg";
 import { v4 } from "uuid";
 import MonacoCodeEditor from "components/Editors/MonacoCodeEditor";
 import CopyButton from "../CopyButton";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "@styles/App.module.scss";
-import { extractFileNameFromContentType } from "@utils/utils";
+import {
+    extractFileNameAndTypeFromContentType,
+    extractContentType,
+} from "@utils/utils";
+import { ImDownload } from "react-icons/im";
+import { IoEyeOutline } from "react-icons/io5";
+import fileExtensions from "@utils/fileExtensions.json";
+import useDeviceType from "hooks/useDeviceType";
+import AceCodeEditor from "components/Editors/AceCodeEditor";
 
-export default function Response({ data, contentType, isFinished }) {
-    let lang = extractFileNameFromContentType(contentType);
+export default function Response({
+    data,
+    contentType,
+    isFinished,
+    arrayBuffer,
+}) {
+    const [lang, setLang] = useState(
+        extractFileNameAndTypeFromContentType(contentType)[1]
+    );
+    const [preview, setPreview] = useState(false);
+    const [mimetype, setMimetype] = useState(".json");
     const [openPreview, setOpenPreview] = useState(false);
-    let preview = false;
+    const [component, setComponent] = useState<React.ReactElement>();
+    const isMobile = useDeviceType();
 
-    if (lang === "html") {
-        preview = true;
+    function downloadFile() {
+        var dataStr = `data:${extractContentType(
+            contentType
+        )};base64,${Buffer.from(arrayBuffer).toString("base64")}`;
+        var dlAnchorElem = document.createElement("a");
+        dlAnchorElem.setAttribute("href", dataStr);
+        dlAnchorElem.setAttribute("download", `${v4()}${mimetype}`);
+        dlAnchorElem.click();
+        dlAnchorElem.remove();
     }
 
     useEffect(() => {
@@ -22,12 +47,81 @@ export default function Response({ data, contentType, isFinished }) {
         }
     }, [isFinished]);
 
+    useEffect(() => {
+        // Setting mime type
+        let endLoop = false;
+
+        for (let i = 0; i < fileExtensions.length; i++) {
+            const ext = fileExtensions[i];
+            for (let i = 0; i < ext.contentType.length; i++) {
+                const ct = ext.contentType[i];
+
+                if (extractContentType(contentType) === ct) {
+                    setMimetype(ext.label);
+                    endLoop = true;
+                    break;
+                }
+            }
+            if (endLoop) break;
+        }
+
+        // Getting source and checking if it is a previewable file or not
+        setLang(extractFileNameAndTypeFromContentType(contentType)[1]);
+        if (!arrayBuffer) return;
+        let _temp_lang_type =
+            extractFileNameAndTypeFromContentType(contentType)[0].toLowerCase();
+
+        let source = `data:${extractContentType(
+            contentType
+        )};base64,${Buffer.from(arrayBuffer).toString("base64")}`;
+        if (extractFileNameAndTypeFromContentType(contentType)[1] === "html") {
+            setPreview(true);
+            setComponent(
+                <>
+                    <iframe
+                        sandbox=" allow-scripts"
+                        className={styles.previewPanel}
+                        src="about:blank"
+                        srcDoc={data}></iframe>
+                </>
+            );
+        } else if (_temp_lang_type === "image") {
+            setPreview(true);
+            setComponent(
+                <>
+                    <img src={source} alt="Preview" />
+                </>
+            );
+        } else if (_temp_lang_type === "video") {
+            setPreview(true);
+            setComponent(
+                <>
+                    <video src={source}></video>
+                </>
+            );
+        }
+        // else if (_temp_lang_type === "application") {
+        //     setPreview(true);
+        //     setComponent(
+        //         <>
+        //             <iframe
+        //                 className={styles.previewPanel}
+        //                 src={source}></iframe>
+        //         </>
+        //     );
+        // }
+        else {
+            setPreview(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+
     return (
         <div className="slide Response slide-selected">
             {!isFinished && <Loader />}
             <div className="slide-options">
                 <h2>
-                    Response <div className="name">{lang}</div>
+                    Response <div className="name">{mimetype}</div>
                 </h2>
                 <div className="slide-option-buttons">
                     {preview && (
@@ -38,7 +132,7 @@ export default function Response({ data, contentType, isFinished }) {
                             onClick={() => {
                                 setOpenPreview(!openPreview);
                             }}>
-                            <PreviewSvg />
+                            <IoEyeOutline />
                         </button>
                     )}
                     <CopyButton data={data} />
@@ -46,29 +140,15 @@ export default function Response({ data, contentType, isFinished }) {
                         type="button"
                         data-tip="Download Response"
                         data-place="left"
-                        onClick={() => {
-                            var dataStr =
-                                "data:text/plain;charset=utf-8," +
-                                encodeURIComponent(data);
-                            var dlAnchorElem = document.createElement("a");
-                            dlAnchorElem.setAttribute("href", dataStr);
-                            dlAnchorElem.setAttribute(
-                                "download",
-                                `${v4()}.txt`
-                            );
-                            dlAnchorElem.click();
-                            dlAnchorElem.remove();
-                        }}>
-                        <DownloadSvg />
+                        onClick={downloadFile}>
+                        <ImDownload />
                     </button>
                 </div>
             </div>
             {openPreview && isFinished ? (
-                <iframe
-                    sandbox=" allow-scripts"
-                    className={styles.previewPanel}
-                    src="about:blank"
-                    srcDoc={data}></iframe>
+                component
+            ) : isMobile === "mobile" ? (
+                <AceCodeEditor mode={lang} readOnly value={data} />
             ) : (
                 <MonacoCodeEditor value={data} readOnly language={lang} />
             )}
diff --git a/components/Results/Results.tsx b/components/Results/Results.tsx
index 25042f4..95d3db2 100644
--- a/components/Results/Results.tsx
+++ b/components/Results/Results.tsx
@@ -45,10 +45,11 @@ export default function Results() {
                     data={`${
                         typeof apiData?.data !== "object"
                             ? apiData?.data || JSON.stringify({})
-                            : JSON.stringify(apiData?.data || {}, null, 4)
+                            : JSON.stringify(apiData?.data || {}, null, 2)
                     }`}
                     isFinished={apiData?.isFinished}
                     contentType={apiData?.headers?.[`content-type`]}
+                    arrayBuffer={apiData?.arrayBuffer}
                 />
                 <Headers headers={apiData?.headers || {}} />
                 <div className="slide Cookies">
diff --git a/components/Results/Table/Table.tsx b/components/Results/Table/Table.tsx
index f4bf99c..7b13460 100644
--- a/components/Results/Table/Table.tsx
+++ b/components/Results/Table/Table.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import styles from "@styles/App.module.scss";
+import styles from "@styles/Table.module.scss";
 import TableCell from "./TableCell";
 
 export default function Table({ content, header = [], testing = false }) {
@@ -21,8 +21,6 @@ export default function Table({ content, header = [], testing = false }) {
                                 testing={testing}
                                 keyName={key}
                                 value={value}
-                                i={i}
-                                arrayLength={object2Array.length - 1}
                             />
                         );
                     })}
diff --git a/components/Results/Table/TableCell.tsx b/components/Results/Table/TableCell.tsx
index 4b4f859..cea5e07 100644
--- a/components/Results/Table/TableCell.tsx
+++ b/components/Results/Table/TableCell.tsx
@@ -1,13 +1,12 @@
-import Tooltip from "components/Tooltip";
+import { useEffect } from "react";
+import ReactTooltip from "react-tooltip";
 import CopyButton from "../CopyButton";
 
-export default function TableCell({
-    testing = false,
-    keyName,
-    value,
-    i,
-    arrayLength,
-}) {
+export default function TableCell({ testing = false, keyName, value }) {
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
+
     return (
         <tr>
             <td>{keyName}</td>
@@ -27,7 +26,6 @@ export default function TableCell({
                 <td>
                     {value}
                     <CopyButton data={value} />
-                    {i === arrayLength && <Tooltip />}
                 </td>
             )}
         </tr>
diff --git a/components/Results/TestResults/TestResults.tsx b/components/Results/TestResults/TestResults.tsx
index 2bee65e..5da28c0 100644
--- a/components/Results/TestResults/TestResults.tsx
+++ b/components/Results/TestResults/TestResults.tsx
@@ -1,19 +1,33 @@
 import { useEffect, useState } from "react";
+import Mustache from "mustache";
 import Table from "../Table/Table";
 import { useTest } from "@utils/Test";
 import { useApiData } from "@utils/ApiData";
+import { useEnvironment } from "@utils/Env";
 import { stringToRegex, checkRegexKeyInResponse } from "@utils/utils";
 
 export default function TestResults() {
     const [tests, setTests] = useState({});
     let { props } = useTest();
     let { object: apiData } = useApiData();
+    const environment = useEnvironment();
 
     useEffect(() => {
+        if (!apiData.isFinished) return;
         let headers = apiData?.headers || {};
         setTests({});
 
-        props.forEach(prop => {
+        let propsCopy = [...props];
+        try {
+            propsCopy = JSON.parse(
+                Mustache.render(
+                    JSON.stringify(propsCopy),
+                    environment.variables
+                )
+            );
+        } catch (error) {}
+
+        propsCopy.forEach(prop => {
             let propName = prop.key.toLowerCase();
             let section = prop.section;
             let operation = prop.operation;
diff --git a/components/Sidebar/EnvironmentList.tsx b/components/Sidebar/EnvironmentList.tsx
new file mode 100644
index 0000000..223a94e
--- /dev/null
+++ b/components/Sidebar/EnvironmentList.tsx
@@ -0,0 +1,114 @@
+import { EnvironmentType } from "@utils/Env";
+import styles from "@styles/Sidebar.module.scss";
+import ModalStyles from "@styles/ModalForms.module.scss";
+import { useState } from "react";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { FiEdit } from "react-icons/fi";
+import { BsLayers } from "react-icons/bs";
+import { BiDotsVerticalRounded } from "react-icons/bi";
+import { MdOutlineCancel } from "react-icons/md";
+import { useEnvironment } from "@utils/Env";
+import NewEnvForm from "./NewEnvForm";
+
+export default function EnvironmentList({ env }: { env: EnvironmentType }) {
+    const prefix = "new_env_";
+    const [activateOptions, setActivateOptions] = useState(false);
+    const environment = useEnvironment();
+
+    function removeEnv() {
+        const filtered = environment.object.filter(
+            ({ name }) => name !== env.name
+        );
+        environment.setObject(filtered);
+        if (
+            environment.defaultObject.findIndex(
+                ({ name }) => name === env.name
+            ) > -1
+        ) {
+            const globalEnv = environment.defaultObject.find(
+                ({ name }) => name === "global"
+            );
+            environment.setDefaultObject([globalEnv]);
+        }
+    }
+
+    function editEnv() {
+        document
+            .getElementById(prefix + env.name)
+            ?.classList.add(ModalStyles.active);
+    }
+
+    function isSelected(envName: String) {
+        return environment.defaultObject.some(({ name }) => name === envName);
+    }
+
+    function selectEnv() {
+        if (env.name !== "global") {
+            const select = document.getElementById(
+                styles.select_button
+            ) as HTMLSelectElement;
+            let index = environment.object.findIndex(
+                ({ name }) => name === env.name
+            );
+            select.selectedIndex = index;
+            environment.setDefaultObject([
+                environment.object.find(({ name }) => name === "global"),
+                env,
+            ]);
+        }
+    }
+    return (
+        <li>
+            <span className={styles.iconSvg}>
+                <BsLayers />
+            </span>
+            <h4
+                style={{
+                    margin: `5px 0 10px`,
+                }}
+                onClick={selectEnv}>
+                {env.name}
+            </h4>
+            <span
+                className={styles.iconSvg}
+                onClick={() => {
+                    setActivateOptions(!activateOptions);
+                }}>
+                <div
+                    className={`${styles.moreOptions} ${
+                        activateOptions ? styles.activate : ""
+                    }`}>
+                    <button
+                        className={styles.moreOptionsButton}
+                        type="button"
+                        onClick={editEnv}>
+                        <FiEdit />
+                        <span>Edit</span>
+                    </button>
+                    {env.name !== "global" && (
+                        <button
+                            className={styles.moreOptionsButton}
+                            type="button"
+                            onClick={removeEnv}>
+                            <RiDeleteBin5Line />
+                            <span>Remove</span>
+                        </button>
+                    )}
+                    <button className={styles.moreOptionsButton} type="button">
+                        <MdOutlineCancel />
+                        <span>Cancel</span>
+                    </button>
+                </div>
+                <BiDotsVerticalRounded
+                    data-tip="More Options"
+                    data-place="left"
+                />
+            </span>
+            <NewEnvForm
+                id={prefix + env.name}
+                defaultEnv={env}
+                isSelected={isSelected(env.name)}
+            />
+        </li>
+    );
+}
diff --git a/components/Sidebar/Environments.tsx b/components/Sidebar/Environments.tsx
new file mode 100644
index 0000000..27c2b57
--- /dev/null
+++ b/components/Sidebar/Environments.tsx
@@ -0,0 +1,117 @@
+import { useRef, useEffect } from "react";
+import { useEnvironment } from "@utils/Env";
+import EnvironmentList from "./EnvironmentList";
+import styles from "@styles/Sidebar.module.scss";
+import ModalStyles from "@styles/ModalForms.module.scss";
+import { v4 } from "uuid";
+import { TbPackgeExport } from "react-icons/tb";
+import { AiOutlinePlus } from "react-icons/ai";
+import NewEnvForm from "./NewEnvForm";
+import ReactTooltip from "react-tooltip";
+
+export default function Environments() {
+    const listRequestRef = useRef(null);
+    const selectEnvRef = useRef(null);
+    const environment = useEnvironment();
+
+    function handleSearch(e: React.FormEvent<HTMLInputElement>) {
+        let listRequests: HTMLLIElement = listRequestRef.current;
+        let value = (e.target as HTMLInputElement).value.toUpperCase();
+
+        let li = listRequests.querySelectorAll("li");
+
+        for (let i = 0; i < li.length; i++) {
+            const l = li[i].textContent.toUpperCase();
+            if (l.includes(value)) li[i].style.display = "flex";
+            else li[i].style.display = "none";
+        }
+    }
+
+    function createNewEnv() {
+        document
+            .getElementById("newEnvForm")
+            ?.classList.add(ModalStyles.active);
+    }
+
+    function selectEnv() {
+        let element: HTMLSelectElement = selectEnvRef.current;
+        let index = element.selectedIndex;
+        environment.setDefaultObject([
+            environment.object.find(({ name }) => name === "global"),
+            environment.object[index],
+        ]);
+    }
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
+
+    return (
+        <div className={styles.sidebar_environments}>
+            <div className={styles.inputAndButton}>
+                <input
+                    type="search"
+                    onInput={handleSearch}
+                    placeholder="Search"
+                />
+            </div>
+            <select
+                name="envSelect"
+                ref={selectEnvRef}
+                className="select-transparent"
+                id={styles.select_button}
+                onChange={selectEnv}>
+                <option value="" defaultChecked hidden>
+                    Select Environment
+                </option>
+                {environment.object.map(env => {
+                    if (env.name === "global") {
+                        return;
+                    }
+                    return (
+                        <option value={env.name} key={env.name}>
+                            {env.name}
+                        </option>
+                    );
+                })}
+            </select>
+            <div className={styles.helperButtons} onClick={createNewEnv}>
+                <span className={styles.iconSvg}>
+                    <AiOutlinePlus />
+                </span>
+                <h4
+                    style={{
+                        margin: `5px 0 10px`,
+                    }}>
+                    New
+                </h4>
+                <button
+                    type="button"
+                    className={styles.iconSvg}
+                    data-tip="Export to file"
+                    data-place="left"
+                    onClick={e => {
+                        e.stopPropagation();
+                        var dataStr =
+                            "data:text/json;charset=utf-8," +
+                            encodeURIComponent(
+                                JSON.stringify(environment.object, null, 4)
+                            );
+                        var dlAnchorElem = document.createElement("a");
+                        dlAnchorElem.setAttribute("href", dataStr);
+                        dlAnchorElem.setAttribute("download", `${v4()}.json`);
+                        dlAnchorElem.click();
+                        dlAnchorElem.remove();
+                    }}>
+                    <TbPackgeExport />
+                </button>
+            </div>
+            <ul className={styles.list_requests} ref={listRequestRef}>
+                {environment.object.map(env => (
+                    <EnvironmentList key={env.name} env={env} />
+                ))}
+            </ul>
+            <NewEnvForm id="newEnvForm" defaultEnv={null} />
+        </div>
+    );
+}
diff --git a/components/Sidebar/Histories.tsx b/components/Sidebar/Histories.tsx
index 9548bad..ece9144 100644
--- a/components/Sidebar/Histories.tsx
+++ b/components/Sidebar/Histories.tsx
@@ -1,11 +1,13 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useHistorySaver } from "@utils/HistorySaver";
 import RequestList from "./RequestList";
-import styles from "@styles/App.module.scss";
+import styles from "@styles/Sidebar.module.scss";
+import { FiDelete } from "react-icons/fi";
+import ReactTooltip from "react-tooltip";
 
 export default function Histories() {
     const listRequestRef = useRef(null);
-    const history = useHistorySaver();
+    const historySaver = useHistorySaver();
 
     function handleSearch(e: React.FormEvent<HTMLInputElement>) {
         let listRequests: HTMLLIElement = listRequestRef.current;
@@ -20,11 +22,28 @@ export default function Histories() {
         }
     }
 
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
+
     return (
         <div className={styles.sidebar_histories}>
-            <input type="search" onInput={handleSearch} placeholder="Search" />
+            <div className={styles.inputAndButton}>
+                <input
+                    type="search"
+                    onInput={handleSearch}
+                    placeholder="Search"
+                />
+                <button
+                    type="button"
+                    onClick={() => {
+                        historySaver.setObject([]);
+                    }}>
+                    <FiDelete data-tip="Clear All" data-place="left" />
+                </button>
+            </div>
             <ul className={styles.list_requests} ref={listRequestRef}>
-                {history.object
+                {historySaver.object
                     .slice()
                     .reverse()
                     .map(h => (
diff --git a/components/Sidebar/NewEnvForm.tsx b/components/Sidebar/NewEnvForm.tsx
new file mode 100644
index 0000000..3223861
--- /dev/null
+++ b/components/Sidebar/NewEnvForm.tsx
@@ -0,0 +1,198 @@
+import styles from "@styles/ModalForms.module.scss";
+import { EnvironmentType, useEnvironment } from "@utils/Env";
+import { useEffect, useRef, useState } from "react";
+import { AiOutlinePlus } from "react-icons/ai";
+import { FiDelete } from "react-icons/fi";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { v4 } from "uuid";
+
+export default function NewEnvForm({
+    defaultEnv,
+    id,
+    isSelected,
+    ...rest
+}: {
+    defaultEnv: EnvironmentType | null;
+    id: string;
+    isSelected?: Boolean;
+    [x: string]: any;
+}) {
+    const formRef = useRef(null);
+    const labelRef = useRef(null);
+    const environment = useEnvironment();
+    type FieldsType = Array<{
+        id: string;
+        entry?: [string?, any?];
+        defaultChecked?: boolean;
+    }>;
+    const [fields, setFields] = useState<FieldsType>([]);
+    const [notice, setNotice] = useState("");
+
+    useEffect(() => {
+        if (fields.length === 0)
+            setNotice("Please click + sign to add new Environment variable");
+        else setNotice("");
+    }, [fields]);
+
+    useEffect(() => {
+        if (defaultEnv) {
+            let newFields = [];
+            defaultEnv.variables.forEach(variable => {
+                newFields.push({
+                    id: v4(),
+                    entry: [variable.key, variable.value],
+                });
+            });
+            setFields(newFields);
+        }
+    }, [defaultEnv]);
+
+    function addField() {
+        setFields([...fields, { id: v4(), entry: [] }]);
+    }
+
+    function removeAllField() {
+        setFields([{ id: v4(), entry: ["", ""] }]);
+    }
+
+    function removeField(keyName: string) {
+        setFields(prev => prev.filter(field => field.id !== keyName));
+    }
+
+    function cancelEnv() {
+        document.getElementById(id)?.classList.remove(styles.active);
+    }
+
+    function saveEnv() {
+        const name = labelRef.current.value;
+        let nameExists = environment.object.findIndex(v => {
+            return v.name === name;
+        });
+        if (nameExists > -1 && !defaultEnv) {
+            setNotice("Label name exists!");
+            setTimeout(() => {
+                setNotice("");
+            }, 2000);
+            return;
+        }
+        const form = formRef.current;
+        let variables = [];
+        const arrayEl = form.querySelectorAll(`.${styles.input__place}`);
+        if (arrayEl.length <= 1) {
+            setNotice("Provide at least one variable");
+            setTimeout(() => {
+                setNotice("");
+            }, 2000);
+            return;
+        }
+        arrayEl.forEach((f: HTMLDivElement, index: Number) => {
+            if (index === 0) return;
+            const key = (f.childNodes[0] as HTMLInputElement).value;
+            const value = (f.childNodes[1] as HTMLInputElement).value;
+            variables.push({ key, value });
+        });
+        let newEnv = {
+            name,
+            variables,
+        };
+        if (defaultEnv) {
+            environment.setObject(prev => {
+                prev[nameExists] = newEnv;
+                let newArray = [...prev];
+                return newArray;
+            });
+            if (isSelected && defaultEnv.name !== "global") {
+                environment.setDefaultObject([
+                    environment.object.find(({ name }) => name === "global"),
+                    newEnv,
+                ]);
+            } else if (isSelected) {
+                environment.setDefaultObject(prev => {
+                    prev[0] = newEnv;
+                    let newArray = [...prev];
+                    return newArray;
+                });
+            }
+        } else {
+            environment.setObject([...environment.object, newEnv]);
+        }
+        cancelEnv();
+    }
+    return (
+        <>
+            <div className={styles.newEnvForm} id={id} {...rest}>
+                <div className={styles.layer}></div>
+                <form className={`slide ${styles.form}`} ref={formRef}>
+                    <h2>New Environment</h2>
+                    <div className={`input-place ${styles.input__place}`}>
+                        <label htmlFor={`${id}__label`}>Label</label>
+                        <input
+                            type="text"
+                            id={`${id}__label`}
+                            required
+                            ref={labelRef}
+                            defaultValue={defaultEnv?.name}
+                            readOnly={defaultEnv ? true : false}
+                        />
+                    </div>
+
+                    <div className={styles.variable__list}>
+                        <h3>Variable List</h3>
+                        <div className={styles.button__list}>
+                            <button type="button" onClick={addField}>
+                                <AiOutlinePlus />
+                            </button>
+                            <button type="button" onClick={removeAllField}>
+                                <RiDeleteBin5Line />
+                            </button>
+                        </div>
+                    </div>
+
+                    {fields.map(field => (
+                        <Input
+                            key={field.id}
+                            keyName={field.id}
+                            removeField={removeField}
+                            entry={[field.entry[0], field.entry[1]]}
+                        />
+                    ))}
+                    <h2 className={styles.notice}>{notice}</h2>
+                    <div className={styles.env_form_footer}>
+                        <button type="button" onClick={saveEnv}>
+                            Save
+                        </button>
+                        <button type="button" onClick={cancelEnv}>
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </>
+    );
+}
+
+function Input({ keyName, entry = ["", ""], removeField }) {
+    return (
+        <>
+            <div className={`input-place ${styles.input__place}`}>
+                <input
+                    type="text"
+                    placeholder="Variable"
+                    defaultValue={entry?.[0]}
+                />
+                <input
+                    type="text"
+                    placeholder="Value"
+                    defaultValue={entry?.[1]}
+                />
+                <button
+                    type="button"
+                    onClick={() => {
+                        removeField(keyName);
+                    }}>
+                    <FiDelete />
+                </button>
+            </div>
+        </>
+    );
+}
diff --git a/components/Sidebar/RequestList.tsx b/components/Sidebar/RequestList.tsx
index 8b2843d..6b5b4f8 100644
--- a/components/Sidebar/RequestList.tsx
+++ b/components/Sidebar/RequestList.tsx
@@ -1,6 +1,8 @@
-import { useUrlData } from "../../utils/UrlData";
-import { useHistorySaver } from "../../utils/HistorySaver";
-import { HistoryType } from "../../utils/HistorySaver";
+import { useUrlData } from "@utils/UrlData";
+import { useHistorySaver } from "@utils/HistorySaver";
+import { HistoryType } from "@utils/HistorySaver";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import styles from "@styles/Sidebar.module.scss";
 
 export default function RequestList({ history }: { history: HistoryType }) {
     const urlData = useUrlData();
@@ -32,6 +34,7 @@ export default function RequestList({ history }: { history: HistoryType }) {
             </span>
             <h4 data-tip={history.time}>{history.url}</h4>
             <button
+                className={styles.removeButton}
                 type="button"
                 data-tip="Delete"
                 data-place="left"
@@ -39,7 +42,7 @@ export default function RequestList({ history }: { history: HistoryType }) {
                     e.stopPropagation();
                     handleRemove(history.time);
                 }}>
-                &times;
+                <RiDeleteBin5Line />
             </button>
         </li>
     );
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index 7e273e8..4606dde 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -1,32 +1,62 @@
-import React, { useRef } from "react";
-import styles from "@styles/App.module.scss";
+import { useRef, useState } from "react";
+import styles from "@styles/Sidebar.module.scss";
 import Histories from "./Histories";
-import { HistorySvg, EnvironmentSvg } from "components/Nav/ButtonSvg";
-import { useTheme } from "@utils/Theme";
+import Environments from "./Environments";
+import { FaLeaf, FaTimes } from "react-icons/fa";
+import { AiOutlineHistory } from "react-icons/ai";
 
 export default function Sidebar() {
     const sidebarRef = useRef(null);
-    const { value: theme } = useTheme();
+    const overlayRef = useRef(null);
+    const [component, setComponent] = useState(<Histories />);
+    function closeSidebar() {
+        sidebarRef.current.classList.add("inactive");
+        if (
+            document
+                .querySelector(`.${styles.sidebar}`)
+                .classList.contains("inactive")
+        ) {
+            overlayRef.current.style.display = "none";
+        } else {
+            overlayRef.current.style.display = "block";
+        }
+    }
+
     return (
         <div className={`${styles.sidebar} inactive`} ref={sidebarRef}>
+            <div
+                className={styles.overlay}
+                style={{ display: "none" }}
+                onClick={() => {
+                    closeSidebar();
+                }}
+                ref={overlayRef}></div>
             <button
                 type="button"
                 className={styles.closeButton}
-                onClick={() => {
-                    sidebarRef.current.classList.add("inactive");
-                }}>
-                &times;
+                onClick={closeSidebar}>
+                <FaTimes />
             </button>
             <div className={styles.sidebar_flex}>
                 <div className={styles.sidebar_buttons}>
-                    <span data-tip="History" data-place="left">
-                        <HistorySvg />
+                    <span
+                        data-tip="History"
+                        data-place="left"
+                        onClick={() => {
+                            setComponent(<Histories />);
+                        }}>
+                        <AiOutlineHistory />
                     </span>
-                    <span data-tip="Environment" data-place="left">
-                        <EnvironmentSvg />
+                    <span
+                        data-tip="Environment"
+                        data-place="left"
+                        onClick={() => {
+                            setComponent(<Environments />);
+                        }}>
+                        <FaLeaf />
                     </span>
                 </div>
-                <Histories />
+                {component}
             </div>
         </div>
     );
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
index 07534ad..15b68f2 100644
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -15,8 +15,7 @@ export default function Tooltip() {
             {ready && (
                 <ReactTooltip
                     place="bottom"
-                    effect="float"
-                    className="zmore"
+                    effect="solid"
                     type={theme === "dark" ? "light" : "dark"}
                 />
             )}
diff --git a/components/Wrapper.tsx b/components/Wrapper.tsx
index e2930e3..67fa3a1 100644
--- a/components/Wrapper.tsx
+++ b/components/Wrapper.tsx
@@ -9,6 +9,7 @@ import {
     TestContext,
     ThemeContext,
     UrlDataContext,
+    EnvironmentContext,
 } from "@utils/utils";
 import React from "react";
 
@@ -24,7 +25,9 @@ export default function Wrapper({ children }) {
                                     <CodeContext>
                                         <AuthContext>
                                             <HistoryContext>
-                                                {children}
+                                                <EnvironmentContext>
+                                                    {children}
+                                                </EnvironmentContext>
                                             </HistoryContext>
                                         </AuthContext>
                                     </CodeContext>
diff --git a/hooks/useRecognizeMobile.tsx b/hooks/useDeviceType.tsx
similarity index 83%
rename from hooks/useRecognizeMobile.tsx
rename to hooks/useDeviceType.tsx
index a24bd6a..6b0c898 100644
--- a/hooks/useRecognizeMobile.tsx
+++ b/hooks/useDeviceType.tsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 
 type deviceType = "mobile" | "desktop";
-export default function useRecognizeMobile(): deviceType {
-    const [device, setDevice] = useState<deviceType>("desktop");
+export default function useDeviceType(): deviceType {
+    const [device, setDevice] = useState<deviceType>("mobile");
     function _deviceType(): deviceType {
         const ua = navigator.userAgent;
         if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
diff --git a/next.config.js b/next.config.js
index 1bb1bca..25eb392 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,7 +8,7 @@ const withPWA = require("next-pwa");
 module.exports = withPWA({
     pwa: {
         dest: "public",
-        // disable: process.env.NODE_ENV === "development",
+        disable: process.env.NODE_ENV === "development",
     },
     autoPrefixer: {},
     nextConfig,
diff --git a/package-lock.json b/package-lock.json
index e404d15..5d8a2b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,14 @@
                 "@monaco-editor/react": "^4.4.5",
                 "ace-builds": "^1.7.1",
                 "axios": "^0.27.2",
+                "mustache": "^4.2.0",
                 "next": "12.1.5",
                 "next-pwa": "^5.5.4",
                 "numeral": "^2.0.6",
                 "react": "18.1.0",
                 "react-ace": "^10.1.0",
                 "react-dom": "18.1.0",
+                "react-icons": "^4.4.0",
                 "react-tooltip": "^4.2.21",
                 "uuid": "^8.3.2"
             },
@@ -26,6 +28,7 @@
                 "@types/uuid": "^8.3.4",
                 "eslint": "8.14.0",
                 "eslint-config-next": "12.1.5",
+                "generate-changelog": "^1.8.0",
                 "prettier": "^2.7.1",
                 "sass": "^1.53.0"
             }
@@ -2775,6 +2778,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/bluebird": {
+            "version": "3.7.2",
+            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+            "dev": true
+        },
         "node_modules/brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4043,6 +4052,21 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/generate-changelog": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/generate-changelog/-/generate-changelog-1.8.0.tgz",
+            "integrity": "sha512-msgpxeB75Ziyg3wGsZuPNl7c5RxChMKmYcAX5obnhUow90dBZW3nLic6nxGtst7Bpx453oS6zAIHcX7F3QVasw==",
+            "dev": true,
+            "dependencies": {
+                "bluebird": "^3.0.6",
+                "commander": "^2.9.0",
+                "github-url-from-git": "^1.4.0"
+            },
+            "bin": {
+                "changelog": "bin/generate",
+                "generate-changelog": "bin/generate"
+            }
+        },
         "node_modules/gensync": {
             "version": "1.0.0-beta.2",
             "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -4084,6 +4108,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/github-url-from-git": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/github-url-from-git/-/github-url-from-git-1.5.0.tgz",
+            "integrity": "sha512-WWOec4aRI7YAykQ9+BHmzjyNlkfJFG8QLXnDTsLz/kZefq7qkzdfo4p6fkYYMIq1aj+gZcQs/1HQhQh3DPPxlQ==",
+            "dev": true
+        },
         "node_modules/glob": {
             "version": "7.1.7",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -4917,6 +4947,14 @@
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
             "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
+        "node_modules/mustache": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+            "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+            "bin": {
+                "mustache": "bin/mustache"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -5505,6 +5543,14 @@
                 "react": "^18.1.0"
             }
         },
+        "node_modules/react-icons": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+            "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8779,6 +8825,12 @@
             "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
             "devOptional": true
         },
+        "bluebird": {
+            "version": "3.7.2",
+            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+            "dev": true
+        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -9734,6 +9786,17 @@
             "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
             "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
         },
+        "generate-changelog": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/generate-changelog/-/generate-changelog-1.8.0.tgz",
+            "integrity": "sha512-msgpxeB75Ziyg3wGsZuPNl7c5RxChMKmYcAX5obnhUow90dBZW3nLic6nxGtst7Bpx453oS6zAIHcX7F3QVasw==",
+            "dev": true,
+            "requires": {
+                "bluebird": "^3.0.6",
+                "commander": "^2.9.0",
+                "github-url-from-git": "^1.4.0"
+            }
+        },
         "gensync": {
             "version": "1.0.0-beta.2",
             "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9763,6 +9826,12 @@
                 "get-intrinsic": "^1.1.1"
             }
         },
+        "github-url-from-git": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/github-url-from-git/-/github-url-from-git-1.5.0.tgz",
+            "integrity": "sha512-WWOec4aRI7YAykQ9+BHmzjyNlkfJFG8QLXnDTsLz/kZefq7qkzdfo4p6fkYYMIq1aj+gZcQs/1HQhQh3DPPxlQ==",
+            "dev": true
+        },
         "glob": {
             "version": "7.1.7",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -10364,6 +10433,11 @@
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
             "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
+        "mustache": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+            "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ=="
+        },
         "nanoid": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -10759,6 +10833,12 @@
                 "scheduler": "^0.22.0"
             }
         },
+        "react-icons": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+            "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+            "requires": {}
+        },
         "react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 2847b5d..263b56d 100644
--- a/package.json
+++ b/package.json
@@ -2,24 +2,32 @@
     "name": "crudman-next",
     "version": "0.1.0",
     "private": true,
+    "homepage": "https://crudman.netlify.app/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shu-vro/CrudMan.git"
+    },
     "scripts": {
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
         "lint": "next lint",
         "tsc": "clear && tsc",
-        "prettify": "prettier --config .prettierrc --ignore-path .prettierignore ./"
+        "prettify": "prettier --config .prettierrc --ignore-path .prettierignore ./",
+        "changelog": "changelog generate"
     },
     "dependencies": {
         "@monaco-editor/react": "^4.4.5",
         "ace-builds": "^1.7.1",
         "axios": "^0.27.2",
+        "mustache": "^4.2.0",
         "next": "12.1.5",
         "next-pwa": "^5.5.4",
         "numeral": "^2.0.6",
         "react": "18.1.0",
         "react-ace": "^10.1.0",
         "react-dom": "18.1.0",
+        "react-icons": "^4.4.0",
         "react-tooltip": "^4.2.21",
         "uuid": "^8.3.2"
     },
@@ -29,6 +37,7 @@
         "@types/uuid": "^8.3.4",
         "eslint": "8.14.0",
         "eslint-config-next": "12.1.5",
+        "generate-changelog": "^1.8.0",
         "prettier": "^2.7.1",
         "sass": "^1.53.0"
     }
diff --git a/pages/api/headerParser.ts b/pages/api/headerParser.ts
index ac15e4f..07132e7 100644
--- a/pages/api/headerParser.ts
+++ b/pages/api/headerParser.ts
@@ -16,7 +16,7 @@ export default async function handler(req, res: NextApiResponse) {
         method,
     }: queryType = req.query;
 
-    console.log("processing...");
+    process.env.NODE_ENV === "development" && console.log("processing...");
     let start = Date.now();
     try {
         if (
@@ -47,6 +47,7 @@ export default async function handler(req, res: NextApiResponse) {
                 headers,
                 params,
                 data,
+                responseType: "arraybuffer",
             });
         } else {
             response = await axios({
@@ -54,18 +55,20 @@ export default async function handler(req, res: NextApiResponse) {
                 baseURL: url,
                 headers,
                 params,
+                responseType: "arraybuffer",
             });
         }
         let elapsedTime = Date.now() - start;
         res.status(200).json({
-            data: response.data,
+            data: new TextDecoder("utf-8").decode(response.data),
+            arrayBuffer: response.data,
             headers: response.headers,
             status: response.status,
             statusText: response.statusText,
             size: JSON.stringify(response.data || {}, null, 0).length,
             elapsedTime,
         });
-        console.log("sent!");
+        process.env.NODE_ENV === "development" && console.log("sent!");
     } catch (error) {
         let elapsedTime = Date.now() - start;
         if (error.response) {
@@ -85,6 +88,6 @@ export default async function handler(req, res: NextApiResponse) {
                 elapsedTime,
             });
         }
-        console.log("error!");
+        process.env.NODE_ENV === "development" && console.log("error!");
     }
 }
diff --git a/public/manifest.json b/public/manifest.json
index 9279eaa..7d506a5 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -22,7 +22,7 @@
     "screenshots": [
         {
             "src": "screenshots/mobile.png",
-            "sizes": "414x896",
+            "sizes": "348x753",
             "type": "image/png"
         },
         {
diff --git a/public/screenshots/laptop.png b/public/screenshots/laptop.png
index 282e960..a1b054c 100644
Binary files a/public/screenshots/laptop.png and b/public/screenshots/laptop.png differ
diff --git a/public/screenshots/mobile.png b/public/screenshots/mobile.png
index e513af6..418cee6 100644
Binary files a/public/screenshots/mobile.png and b/public/screenshots/mobile.png differ
diff --git a/styles/App.module.scss b/styles/App.module.scss
index 9a7e040..383942c 100644
--- a/styles/App.module.scss
+++ b/styles/App.module.scss
@@ -49,12 +49,10 @@ $container-height: calc(100vh - $height - 1px);
     .button_section {
         @include space-between();
         button {
-            font-size: 40px;
+            font-size: 25px;
             padding: 0;
             background: transparent;
             color: inherit;
-            border: none;
-            outline: none;
             margin-right: 30px;
             cursor: pointer;
         }
@@ -104,8 +102,7 @@ $container-height: calc(100vh - $height - 1px);
 
     & > input {
         background: var(--input-bg);
-        font-family: "Montserrat", "Gill Sans", "Gill Sans MT", Calibri,
-            "Trebuchet MS", sans-serif;
+        font-family: inherit;
         color: var(--theme);
         outline: none;
         border: none;
@@ -116,11 +113,8 @@ $container-height: calc(100vh - $height - 1px);
     & > button {
         background: var(--blue-color);
         color: var(--theme);
-        border: none;
-        outline: none;
         font-size: 14px;
         font-weight: bold;
-        cursor: pointer;
         padding: 0 10px;
         transition: 0.25s;
 
@@ -185,14 +179,11 @@ $container-height: calc(100vh - $height - 1px);
             button {
                 background: none;
                 color: inherit;
-                border: none;
                 border-bottom: 1px solid var(--thin-border-color);
-                outline: none;
                 padding: 10px;
                 padding-bottom: 5px;
                 font-size: 14px;
                 font-weight: bold;
-                cursor: pointer;
                 user-select: none;
 
                 @media screen and (max-width: 481px) {
@@ -205,46 +196,6 @@ $container-height: calc(100vh - $height - 1px);
     }
 }
 
-.table {
-    width: 90%;
-    margin: 0 auto;
-
-    td {
-        position: relative;
-        width: 50%;
-        padding: 5px 20px;
-        word-break: break-word;
-        overflow-x: hidden;
-
-        span:nth-child(1) {
-            padding: 5px 10px;
-            border-radius: 5px;
-            color: white;
-            font-size: 13px;
-        }
-
-        button {
-            position: absolute;
-            height: 19px;
-            top: 50%;
-            right: -25px;
-            transform: translateY(-50%);
-            outline: none;
-            background: none;
-            border: none;
-            color: inherit;
-            cursor: pointer;
-            transition: right 0.15s ease;
-        }
-
-        &:hover {
-            button {
-                right: 0px;
-            }
-        }
-    }
-}
-
 .loader {
     position: absolute;
     $b: 5px;
@@ -278,145 +229,6 @@ $container-height: calc(100vh - $height - 1px);
     }
 }
 
-.sidebar {
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: min(350px, 100%);
-    background: var(--navbar-color);
-    z-index: 100;
-    font-size: 13px;
-    overflow-x: hidden;
-    transition: right 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    &[class~="inactive"] {
-        right: calc(min(350px, 100%) * -1);
-    }
-
-    button.closeButton {
-        transform: "none";
-        font-size: 50px;
-        display: block;
-        margin-left: auto;
-        padding: 0;
-        background: transparent;
-        color: inherit;
-        border: none;
-        outline: none;
-        margin-right: 25px;
-        height: $height;
-        cursor: pointer;
-    }
-
-    input[type="search"] {
-        background: transparent;
-        width: 100%;
-        font-family: inherit;
-        outline: none;
-        border: none;
-        border-top: 1px solid var(--thin-border-color);
-        border-bottom: 1px solid var(--thin-border-color);
-        color: inherit;
-        padding: 5px 10px;
-    }
-
-    .sidebar_flex {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        width: 100%;
-        height: $container-height;
-        flex-direction: row;
-        border-left: 1px solid var(--thin-border-color);
-        $left: 40px;
-
-        .sidebar_buttons {
-            width: 40px;
-
-            span {
-                position: relative;
-                color: var(--general-text-color);
-                padding: 10px 5px;
-                -webkit-border-radius: 5px;
-                -moz-border-radius: 5px;
-                border-radius: 5px;
-                border: none;
-                border-top: 1px solid;
-                border-bottom: 1px solid;
-                border-color: var(--thin-border-color);
-                outline: none;
-                display: block;
-                margin: 10px auto;
-                cursor: pointer;
-                text-align: center;
-            }
-        }
-
-        .sidebar_histories {
-            width: calc(100% - $left);
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
-            border-left: 1px solid var(--thin-border-color);
-            ul.list_requests {
-                position: relative;
-                width: 100%;
-                padding: 0;
-
-                li {
-                    position: relative;
-                    list-style: none;
-                    @include space-between();
-                    flex-direction: row;
-                    cursor: pointer;
-
-                    span[class$="requestMethod"] {
-                        color: #6cff6c;
-                        font-weight: bold;
-
-                        &[class*="error"] {
-                            color: red;
-                        }
-                    }
-                    h4 {
-                        width: 80%;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        display: inline-block;
-                        margin: 0;
-                        resize: none;
-                    }
-
-                    button {
-                        border: 2px solid red;
-                        background: transparent;
-                        outline: none;
-                        font-size: 20px;
-                        position: relative;
-                        right: -50px;
-                        color: inherit;
-                        transition: right 0.2s ease-in-out;
-                        cursor: pointer;
-                        color: red;
-                        border-radius: 100px;
-                    }
-
-                    &:hover {
-                        h4 {
-                            color: var(--theme);
-                        }
-                        button {
-                            right: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
 .previewPanel {
     width: 100%;
     border: none;
diff --git a/styles/ModalForms.module.scss b/styles/ModalForms.module.scss
new file mode 100644
index 0000000..3ae2d09
--- /dev/null
+++ b/styles/ModalForms.module.scss
@@ -0,0 +1,121 @@
+@mixin fixed_position {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+$w: min(480px, 100%);
+
+.newEnvForm {
+    @include fixed_position();
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    user-select: none;
+    pointer-events: none;
+    z-index: -10000;
+    transition: 0.2s ease, z-index 0s;
+
+    &.active {
+        opacity: 1;
+        user-select: auto;
+        pointer-events: all;
+        z-index: 2;
+
+        .form {
+            transform: translateY(0);
+        }
+    }
+
+    .layer {
+        @include fixed_position();
+        background: var(--input-bg);
+        opacity: 0.5;
+        z-index: -1;
+    }
+
+    .form {
+        position: relative !important;
+        width: $w;
+        max-height: 420px;
+        height: initial;
+        background: var(--slide-bg-color);
+        border-radius: 10px;
+        transform: translateY(100px);
+        transition: 0.2s ease;
+
+        .input__place {
+            justify-content: center;
+            width: 90%;
+            margin: auto;
+            padding: 0;
+            border-radius: 5px;
+            border: 1px solid var(--thin-border-color);
+
+            &:hover {
+                background: none;
+            }
+
+            label {
+                width: 75px;
+                font-size: 1.1rem;
+            }
+            input {
+                border: none;
+                height: 35px;
+                width: calc($w - 10rem);
+
+                &:nth-child(2) {
+                    border-left: 2px solid var(--thin-border-color);
+                }
+
+                &:focus {
+                    border: none;
+                    border-left: 2px solid var(--thin-border-color);
+                }
+            }
+        }
+
+        .variable__list {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-direction: row;
+            h3 {
+                margin-left: 30px;
+            }
+            .button__list {
+                & > * {
+                    font-size: 20px;
+                    display: inline-block;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        .notice {
+            text-align: center;
+            opacity: 0.5;
+        }
+
+        .env_form_footer {
+            margin: 20px;
+            button {
+                display: inline-block;
+                font-size: 1.2rem;
+                border-radius: 5px;
+                padding: 5px 10px;
+
+                &:nth-child(1) {
+                    background: var(--blue-color);
+                }
+
+                &:nth-child(2) {
+                    background: var(--slide-bg-color);
+                }
+            }
+        }
+    }
+}
diff --git a/styles/Sidebar.module.scss b/styles/Sidebar.module.scss
new file mode 100644
index 0000000..9334075
--- /dev/null
+++ b/styles/Sidebar.module.scss
@@ -0,0 +1,225 @@
+@import "./App.module.scss";
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: min(350px, 100%);
+    background: var(--navbar-color);
+    z-index: 100;
+    font-size: 13px;
+    overflow-x: hidden;
+    transition: right 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
+
+    & > .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        display: block;
+    }
+
+    &[class~="inactive"] {
+        right: calc(min(350px, 100%) * -1);
+    }
+
+    button.closeButton {
+        transform: "none";
+        font-size: 30px;
+        display: block;
+        margin-left: auto;
+        padding: 0;
+        background: transparent;
+        color: inherit;
+        margin-right: 25px;
+        height: $height;
+    }
+
+    .inputAndButton {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 1px solid var(--thin-border-color);
+        border-bottom: 1px solid var(--thin-border-color);
+
+        input[type="search"] {
+            background: transparent;
+            width: 100%;
+            font-family: inherit;
+            outline: none;
+            border: none;
+            color: inherit;
+            padding: 5px 10px;
+        }
+
+        button {
+            color: red;
+            font-size: 18px;
+        }
+    }
+
+    .sidebar_flex {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        width: 100%;
+        height: $container-height;
+        flex-direction: row;
+        border-left: 1px solid var(--thin-border-color);
+        $left: 40px;
+
+        .sidebar_buttons {
+            width: 40px;
+
+            span {
+                position: relative;
+                color: var(--general-text-color);
+                padding: 10px 5px;
+                -webkit-border-radius: 5px;
+                -moz-border-radius: 5px;
+                border-radius: 5px;
+                border: none;
+                border-top: 1px solid;
+                border-bottom: 1px solid;
+                border-color: var(--thin-border-color);
+                outline: none;
+                display: block;
+                margin: 10px auto;
+                cursor: pointer;
+                font-size: 18px;
+                text-align: center;
+
+                &:hover {
+                    color: var(--theme);
+                }
+            }
+        }
+
+        .sidebar_histories,
+        .sidebar_environments {
+            width: calc(100% - $left);
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+            border-left: 1px solid var(--thin-border-color);
+
+            ul.list_requests {
+                position: relative;
+                width: 100%;
+                padding: 0;
+            }
+
+            li,
+            .helperButtons {
+                position: relative;
+                list-style: none;
+                @include space-between();
+                flex-direction: row;
+                cursor: pointer;
+                margin-bottom: 5px;
+
+                .iconSvg {
+                    color: inherit;
+                    font-size: 18px;
+                    margin: 0 15px;
+                }
+
+                .moreOptions {
+                    position: absolute;
+                    bottom: 0px;
+                    right: 10px;
+                    cursor: pointer;
+                    background: var(--slide-bg-color);
+                    color: var(--general-text-color);
+                    font-size: 20px;
+                    border-radius: 5px;
+                    border: 1px solid;
+                    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
+                    border-color: var(--thin-border-color);
+                    outline: none;
+                    text-align: center;
+                    opacity: 0;
+                    user-select: none;
+                    pointer-events: none;
+                    transition: 0.25s ease;
+
+                    &.activate {
+                        opacity: 1;
+                        user-select: auto;
+                        pointer-events: all;
+                        bottom: 25px;
+                    }
+
+                    .moreOptionsButton {
+                        display: block;
+                        padding: 5px 10px;
+                        color: inherit;
+                        width: 100%;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        z-index: 2;
+                        transition: 0.2s ease;
+
+                        &:hover {
+                            color: var(--blue-color);
+                        }
+
+                        &:nth-child(1) {
+                            border-bottom: 1px solid var(--thin-border-color);
+                        }
+
+                        span {
+                            margin-left: 10px;
+                        }
+                    }
+                }
+
+                span[class$="requestMethod"] {
+                    color: var(--green);
+                    font-weight: bold;
+
+                    &[class*="error"] {
+                        color: red;
+                    }
+                }
+                h4 {
+                    width: 80%;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: inline-block;
+                    margin: 0;
+                    resize: none;
+                }
+
+                .removeButton {
+                    font-size: 20px;
+                    position: relative;
+                    right: -50px;
+                    color: inherit;
+                    transition: right 0.2s ease-in-out;
+                    border-radius: 100px;
+                    color: red;
+                }
+
+                &:hover {
+                    h4 {
+                        color: var(--theme);
+                    }
+                    button {
+                        right: 0;
+                    }
+                }
+            }
+            #select_button {
+                width: 100%;
+                background: var(--navbar-color);
+                text-align: center;
+            }
+        }
+    }
+}
diff --git a/styles/Table.module.scss b/styles/Table.module.scss
new file mode 100644
index 0000000..88de688
--- /dev/null
+++ b/styles/Table.module.scss
@@ -0,0 +1,36 @@
+.table {
+    width: 90%;
+    margin: 0 auto;
+
+    td {
+        position: relative;
+        width: 50%;
+        padding: 5px 20px;
+        word-break: break-word;
+        overflow-x: hidden;
+
+        span:nth-child(1) {
+            padding: 5px 10px;
+            border-radius: 5px;
+            color: white;
+            font-size: 13px;
+        }
+
+        button {
+            position: absolute;
+            height: 19px;
+            top: 50%;
+            right: -25px;
+            transform: translateY(-50%);
+            background: none;
+            color: inherit;
+            transition: right 0.15s ease;
+        }
+
+        &:hover {
+            button {
+                right: 0px;
+            }
+        }
+    }
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 2b79a7b..f647d3b 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+// @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
 @import "./App.module.scss";
 
 html {
@@ -9,8 +10,8 @@ body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: "Montserrat", "Gill Sans", "Gill Sans MT", Calibri,
-        "Trebuchet MS", sans-serif;
+    font-family: "Montserrat", sans-serif;
+    // font-family: "Fira Code", sans-serif;
 
     --navbar-color: #151619;
     --background-color: #1a1b1e;
@@ -104,14 +105,10 @@ li.selected button {
         flex-direction: row;
 
         button {
-            background: transparent;
             font-size: 20px;
             margin: 0;
             padding: 0 5px;
-            cursor: pointer;
             color: var(--button-text-color);
-            border: none;
-            outline: none;
         }
     }
 
@@ -159,14 +156,10 @@ li.selected button {
         }
 
         button {
-            background: transparent;
             font-size: 20px;
             margin: 0;
             padding: 0 5px;
-            cursor: pointer;
-            color: var(--button-text-color);
-            border: none;
-            outline: none;
+            color: red;
         }
 
         select {
@@ -359,12 +352,31 @@ h6 {
     user-select: none;
 }
 
-.zmore {
-    z-index: 100000 !important;
+button {
+    background: none;
+    outline: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
 }
 
+svg {
+    outline: none;
+}
+
+pre {
+    margin: 0;
+    font-family: inherit;
+}
+
+// Editor
 .transparent-editor .monaco-editor,
 .transparent-editor .monaco-editor-background,
 .transparent-editor .monaco-editor .margin {
     background: transparent !important;
 }
+
+// Toooltip
+.__react_component_tooltip {
+    font-weight: 600 !important;
+}
diff --git a/utils/ApiData.tsx b/utils/ApiData.tsx
index 0ab7694..650681f 100644
--- a/utils/ApiData.tsx
+++ b/utils/ApiData.tsx
@@ -10,6 +10,7 @@ interface ObjectType {
     statusText?: string;
     size?: number;
     isFinished?: boolean;
+    arrayBuffer?: ArrayBuffer;
 }
 interface normalParams {
     object?: ObjectType;
diff --git a/utils/Env.tsx b/utils/Env.tsx
new file mode 100644
index 0000000..29e4b6f
--- /dev/null
+++ b/utils/Env.tsx
@@ -0,0 +1,63 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+const Context = createContext({});
+
+export type EnvironmentType = {
+    name: string;
+    variables: Array<{
+        key: string;
+        value: string;
+    }>;
+};
+type ArrayEnvironmentType = Array<EnvironmentType>;
+export type Environments = {
+    object?: ArrayEnvironmentType;
+    setObject?: React.Dispatch<React.SetStateAction<ArrayEnvironmentType>>;
+    defaultObject?: ArrayEnvironmentType;
+    setDefaultObject?: React.Dispatch<
+        React.SetStateAction<ArrayEnvironmentType>
+    >;
+    variables?: Object;
+    setVariables?: React.Dispatch<React.SetStateAction<Object>>;
+};
+
+/**
+ * More at components/Config/QuerySlide/QuerySlide.tsx:40
+ * @returns object with history, setHistory, defaultHistory, setDefaultHistory
+ */
+export function useEnvironment() {
+    const historySaver: Environments = useContext(Context);
+
+    return historySaver;
+}
+
+export function EnvironmentContext({ children }) {
+    const defaultEnv = {
+        name: "global",
+        variables: [
+            {
+                key: "Variable",
+                value: "Value",
+            },
+        ],
+    };
+    const [object, setObject] = useState<ArrayEnvironmentType>([defaultEnv]);
+    const [defaultObject, setDefaultObject] = useState<ArrayEnvironmentType>(
+        []
+    );
+    const [variables, setVariables] = useState({});
+
+    return (
+        <Context.Provider
+            value={{
+                object,
+                setObject,
+                defaultObject,
+                setDefaultObject,
+                variables,
+                setVariables,
+            }}>
+            {children}
+        </Context.Provider>
+    );
+}
diff --git a/utils/HistorySaver.tsx b/utils/HistorySaver.tsx
index e3d20a3..24ed3fc 100644
--- a/utils/HistorySaver.tsx
+++ b/utils/HistorySaver.tsx
@@ -30,6 +30,10 @@ type normalParams = {
     setDefaultObject?: React.Dispatch<React.SetStateAction<HistoryType>>;
 };
 
+/**
+ * More at components/Config/QuerySlide/QuerySlide.tsx:40
+ * @returns object with history, setHistory, defaultHistory, setDefaultHistory
+ */
 export function useHistorySaver() {
     const historySaver: normalParams = useContext(Context);
     // useEffect(() => {
diff --git a/utils/fileExtensions.json b/utils/fileExtensions.json
new file mode 100644
index 0000000..dabfe26
--- /dev/null
+++ b/utils/fileExtensions.json
@@ -0,0 +1,120 @@
+[
+    { "label": ".aac", "contentType": ["audio/aac"] },
+    { "label": ".abw", "contentType": ["application/x-abiword"] },
+    { "label": ".arc", "contentType": ["application/x-freearc"] },
+    { "label": ".avif", "contentType": ["image/avif"] },
+    { "label": ".avi", "contentType": ["video/x-msvideo"] },
+    { "label": ".azw", "contentType": ["application/vnd.amazon.ebook"] },
+    { "label": ".bin", "contentType": ["application/octet-stream"] },
+    { "label": ".bmp", "contentType": ["image/bmp"] },
+    { "label": ".bz", "contentType": ["application/x-bzip"] },
+    { "label": ".bz2", "contentType": ["application/x-bzip2"] },
+    { "label": ".cda", "contentType": ["application/x-cdf"] },
+    { "label": ".csh", "contentType": ["application/x-csh"] },
+    { "label": ".css", "contentType": ["text/css"] },
+    { "label": ".csv", "contentType": ["text/csv"] },
+    { "label": ".doc", "contentType": ["application/msword"] },
+    {
+        "label": ".docx",
+        "contentType": [
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+        ]
+    },
+    { "label": ".eot", "contentType": ["application/vnd.ms-fontobject"] },
+    { "label": ".epub", "contentType": ["application/epub+zip"] },
+    { "label": ".gz", "contentType": ["application/gzip"] },
+    { "label": ".gif", "contentType": ["image/gif"] },
+    { "label": ".html", "contentType": ["text/html"] },
+    {
+        "label": ".ico",
+        "contentType": ["image/vnd.microsoft.icon", "image/x-icon"]
+    },
+    { "label": ".ics", "contentType": ["text/calendar"] },
+    { "label": ".jar", "contentType": ["application/java-archive"] },
+    { "label": ".jpeg", "contentType": ["image/jpeg"] },
+    {
+        "label": ".js",
+        "contentType": ["text/javascript", "application/javascript"]
+    },
+    { "label": ".json", "contentType": ["application/json"] },
+    { "label": ".jsonld", "contentType": ["application/ld+json"] },
+    { "label": ".mid", "contentType": ["audio/midi", "audio/x-midi"] },
+    {
+        "label": ".mjs",
+        "contentType": ["text/javascript", "application/javascript"]
+    },
+    { "label": ".mp3", "contentType": ["audio/mpeg"] },
+    { "label": ".mp4", "contentType": ["video/mp4"] },
+    { "label": ".mpeg", "contentType": ["video/mpeg"] },
+    {
+        "label": ".mpkg",
+        "contentType": ["application/vnd.apple.installer+xml"]
+    },
+    {
+        "label": ".odp",
+        "contentType": ["application/vnd.oasis.opendocument.presentation"]
+    },
+    {
+        "label": ".ods",
+        "contentType": ["application/vnd.oasis.opendocument.spreadsheet"]
+    },
+    {
+        "label": ".odt",
+        "contentType": ["application/vnd.oasis.opendocument.text"]
+    },
+    { "label": ".oga", "contentType": ["audio/ogg"] },
+    { "label": ".ogv", "contentType": ["video/ogg"] },
+    { "label": ".ogx", "contentType": ["application/ogg"] },
+    { "label": ".opus", "contentType": ["audio/opus"] },
+    { "label": ".otf", "contentType": ["font/otf"] },
+    { "label": ".png", "contentType": ["image/png"] },
+    { "label": ".pdf", "contentType": ["application/pdf"] },
+    { "label": ".php", "contentType": ["application/x-httpd-php"] },
+    { "label": ".ppt", "contentType": ["application/vnd.ms-powerpoint"] },
+    {
+        "label": ".pptx",
+        "contentType": [
+            "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+        ]
+    },
+    { "label": ".rar", "contentType": ["application/vnd.rar"] },
+    { "label": ".rtf", "contentType": ["application/rtf"] },
+    { "label": ".sh", "contentType": ["application/x-sh"] },
+    { "label": ".svg", "contentType": ["image/svg+xml"] },
+    { "label": ".swf", "contentType": ["application/x-shockwave-flash"] },
+    { "label": ".tar", "contentType": ["application/x-tar"] },
+    { "label": ".tif", "contentType": ["image/tiff"] },
+    { "label": ".ts", "contentType": ["video/mp2t"] },
+    { "label": ".ttf", "contentType": ["font/ttf"] },
+    { "label": ".txt", "contentType": ["text/plain"] },
+    { "label": ".vsd", "contentType": ["application/vnd.visio"] },
+    { "label": ".wav", "contentType": ["audio/wav"] },
+    { "label": ".weba", "contentType": ["audio/webm"] },
+    { "label": ".webm", "contentType": ["video/webm"] },
+    { "label": ".webp", "contentType": ["image/webp"] },
+    { "label": ".woff", "contentType": ["font/woff"] },
+    { "label": ".woff2", "contentType": ["font/woff2"] },
+    { "label": ".xhtml", "contentType": ["application/xhtml+xml"] },
+    { "label": ".xls", "contentType": ["application/vnd.ms-excel"] },
+    {
+        "label": ".xlsx",
+        "contentType": [
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        ]
+    },
+    {
+        "label": ".xml",
+        "contentType": [
+            "application/xml",
+            "text/xml",
+            ".xml",
+            "application/atom+xml",
+            "application/xml"
+        ]
+    },
+    { "label": ".xul", "contentType": ["application/vnd.mozilla.xul+xml"] },
+    { "label": ".zip", "contentType": ["application/zip"] },
+    { "label": ".3gp", "contentType": ["video/3gpp", "audio/3gpp"] },
+    { "label": ".3g2", "contentType": ["video/3gpp2", "audio/3gpp2"] },
+    { "label": ".7z", "contentType": ["application/x-7z-compressed"] }
+]
diff --git a/utils/mime.json b/utils/mime.json
index d8395b3..6bbcbfb 100644
--- a/utils/mime.json
+++ b/utils/mime.json
@@ -74,7 +74,7 @@
     },
     {
         "label": "image/jpeg",
-        "description": "Mime type for extension: \n.jpeg .jpg\n"
+        "description": "Mime type for extension: .jpeg or .jpg"
     },
     {
         "label": "text/javascript",
@@ -90,7 +90,7 @@
     },
     {
         "label": "audio/midi",
-        "description": "Mime type for extension: \n.mid .midi\n"
+        "description": "Mime type for extension: .mid .midi"
     },
     {
         "label": "text/javascript",
diff --git a/utils/utils.ts b/utils/utils.ts
index 6ff7fe5..64e4828 100644
--- a/utils/utils.ts
+++ b/utils/utils.ts
@@ -1,3 +1,6 @@
+import Mustache from "mustache";
+import { Environments } from "./Env";
+
 export function stringToRegex(s: string): RegExp {
     var m = [];
     return (m = s.match(/^([\/~@;%#'])(.*?)\1([gimsuy]*)$/))
@@ -28,15 +31,77 @@ export function checkRegexKeyInResponse(o: any[] | object, r: RegExp) {
         .filter(el => el)
         .some(el => el);
 }
-export function extractFileNameFromContentType(contentType) {
+
+/**
+ *
+ * @param contentType Content-Type header
+ * @returns {Array} file category and type
+ */
+export function extractFileNameAndTypeFromContentType(
+    contentType
+): [String, String] {
     if (contentType) {
         const contentTypeParts = contentType.split(";");
-        const fileName = contentTypeParts[0].split("/")[1];
+        const fileName = contentTypeParts[0].split("/");
         return fileName;
     }
+    return ["", ""];
+}
+
+export function extractContentType(contentType) {
+    if (contentType) {
+        const contentTypeParts = contentType.split(";");
+        return contentTypeParts[0];
+    }
     return "";
 }
 
+export function defineTooltip(
+    text: String,
+    environment: Environments,
+    setTooltipText: React.Dispatch<React.SetStateAction<String>>
+) {
+    let matchedVars = text.match(/<<(\w*)>>/g);
+
+    if (matchedVars) {
+        let obj = {
+            vars: [],
+            join: function () {
+                return `${this.envName}.${this.variable} = ${this.value}`;
+            },
+        };
+        matchedVars.forEach(match => {
+            let variable = match.replace(/<<|>>/g, "");
+            let envName = "";
+            environment.defaultObject.forEach(env => {
+                env.variables.forEach(v => {
+                    if (v.key === variable) {
+                        envName = env.name;
+                    }
+                });
+            });
+            if (environment.variables[variable]) {
+                obj.vars.push({
+                    envName,
+                    variable,
+                    value: environment.variables[variable],
+                });
+            }
+        });
+        let rendered = Mustache.render(
+            `<pre>Used environment variables:
+    <<#vars>>
+    &DoubleLongRightArrow; <<&join>>
+    <</vars>>
+</pre>`,
+            obj
+        );
+        setTooltipText(rendered);
+    } else {
+        setTooltipText("");
+    }
+}
+
 export { ApiDataContext } from "./ApiData";
 export { ThemeContext } from "./Theme";
 export { UrlDataContext } from "./UrlData";
@@ -47,3 +112,4 @@ export { CodeContext } from "./Code";
 export { PostBodyContext } from "./Body";
 export { AuthContext } from "./Auth";
 export { TestContext } from "./Test";
+export { EnvironmentContext } from "./Env";