diff --git a/package.json b/package.json
index 55dfdd0..4439176 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "code-to-img",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "author": {
     "name": "Rohidul Islam",
@@ -66,6 +66,7 @@
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.0",
+    "@types/gtag.js": "^0.0.11",
     "@types/node": "^17.0.32",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index ae7be6f..86692de 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,28 +1,10 @@
 import { AppProps } from "next/app";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
 import Header from "../src/components/Header";
 import SEO from "../src/components/SEO";
 import { EditorProvider } from "../src/contexts/EditorContext";
 import "../styles/global.css";
-import * as gtag from "../src/lib/gtag";
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-  const router = useRouter();
-
-  useEffect(() => {
-    const handleRouteChange = (url: string) => {
-      gtag.pageview(url);
-    };
-
-    router.events.on("routeChangeComplete", handleRouteChange);
-    router.events.on("hashChangeComplete", handleRouteChange);
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-      router.events.off("hashChangeComplete", handleRouteChange);
-    };
-  }, [router]);
-
   return (
     <EditorProvider>
       <SEO />
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 3770e0a..b023ecd 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,6 +1,6 @@
 import { Head, Html, Main, NextScript } from "next/document";
 import Script from "next/script";
-import * as gtag from "../src/lib/gtag";
+import { GA_TRACKING_ID } from "../src/lib/gtag";
 
 const MyDocument = () => {
   return (
@@ -8,20 +8,21 @@ const MyDocument = () => {
       <Head>
         <Script
           strategy="beforeInteractive"
-          src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
-        />
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+        ></Script>
         <Script
-          id="gtag-init"
+          id="google-analytics"
           strategy="lazyOnload"
           dangerouslySetInnerHTML={{
             __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${gtag.GA_TRACKING_ID}', {
-              page_path: window.location.pathname,
-            });
-          `,
+                  window.dataLayer = window.dataLayer || [];
+                  function gtag(){dataLayer.push(arguments);}
+                  gtag('js', new Date());
+                  gtag('config', '${GA_TRACKING_ID}', {
+                    page_path: window.location.pathname,
+                  });
+                `,
           }}
         />
       </Head>
diff --git a/pages/api/hash-object.ts b/pages/api/hash-object.ts
deleted file mode 100644
index ca6856a..0000000
--- a/pages/api/hash-object.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import * as jwt from "jsonwebtoken";
-
-export default async function hanlde(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const key = process.env.SECRET_KEY;
-  if (req.method === "POST") {
-    const token = await jwt.sign(req.body, key);
-    res.json({ token });
-    return;
-  }
-
-  if (req.method === "GET") {
-    const { token } = req.query;
-    const data = await jwt.verify(token, key);
-    res.json(data);
-  }
-}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 24170e8..3be4a51 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,7 +14,7 @@ const Header = () => {
             />
             <p>
               <span className="font-bold text-xl text-white">CodeToImg</span>
-              <span className="text-xs ml-1">v1.2.0</span>
+              <span className="text-xs ml-1">v1.3.0</span>
             </p>
           </a>
         </Link>
diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
index 5e34847..dea5e9f 100644
--- a/src/components/Preview.tsx
+++ b/src/components/Preview.tsx
@@ -7,6 +7,7 @@ import { getExtentions } from "./Editor/get-extentions";
 import { darkTheme, lightTheme } from "./Editor/themes";
 import { useAtom } from "jotai";
 import { appStateAtom } from "../stores/appState";
+import { exportSettingsAtom } from "../stores/exportSettings";
 
 const Preview = () => {
   const [appState] = useAtom(appStateAtom);
@@ -14,7 +15,7 @@ const Preview = () => {
 
   return (
     <div
-      className={`w-full overflow-x-auto my-8 px-4 ${
+      className={`w-full overflow-x-auto my-8 px-4 mb-40 ${
         appState.darkMode ? "dark" : ""
       }`}
     >
@@ -199,9 +200,9 @@ const TitleField = () => {
 };
 
 const WatterMark = () => {
-  const [appState] = useAtom(appStateAtom);
+  const [exportSettings] = useAtom(exportSettingsAtom);
 
-  if (!appState.showWaterMark) return null;
+  if (!exportSettings.showWaterMark) return null;
   return (
     <div className="absolute left-4 bottom-2 mix-blend-overlay opacity-50 text-white">
       codetoimg.com
diff --git a/src/components/ToolBar.tsx b/src/components/ToolBar.tsx
index 84db19b..97a5abb 100644
--- a/src/components/ToolBar.tsx
+++ b/src/components/ToolBar.tsx
@@ -6,9 +6,12 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Select from "@radix-ui/react-select";
 import { useAtom } from "jotai";
 import { appStateAtom } from "../stores/appState";
+import { exportSettingsAtom } from "../stores/exportSettings";
 
 const ToolBar = () => {
   const [appState, setAppState] = useAtom(appStateAtom);
+  const [exportSettings, setExportSettings] = useAtom(exportSettingsAtom);
+
   const { onExport, onCopyAsLink, onCopyAsImage, onReset } = useEditor();
 
   return (
@@ -130,33 +133,33 @@ const ToolBar = () => {
             <SelectItem
               label="Format"
               options={["png", "jpeg", "svg"]}
-              value={appState.renderFormat}
+              value={exportSettings.renderFormat}
               onChange={(value) => {
-                setAppState({
-                  ...appState,
+                setExportSettings({
+                  ...exportSettings,
                   renderFormat: value,
                 });
               }}
             />
             <SelectItem
-              disabled={appState.renderFormat === "svg"}
+              disabled={exportSettings.renderFormat === "svg"}
               label="Scale"
               options={["1x", "2x", "3x"]}
-              value={appState.renderScale}
+              value={exportSettings.renderScale}
               onChange={(value) => {
-                setAppState({
-                  ...appState,
+                setExportSettings({
+                  ...exportSettings,
                   renderScale: value,
                 });
               }}
             />
             <SwitchItem
               label="Show Watermark"
-              value={appState.showWaterMark}
+              value={exportSettings.showWaterMark}
               onChange={() =>
-                setAppState({
-                  ...appState,
-                  showWaterMark: !appState.showWaterMark,
+                setExportSettings({
+                  ...exportSettings,
+                  showWaterMark: !exportSettings.showWaterMark,
                 })
               }
             />
diff --git a/src/contexts/EditorContext.tsx b/src/contexts/EditorContext.tsx
index 9fbb368..4ca766a 100644
--- a/src/contexts/EditorContext.tsx
+++ b/src/contexts/EditorContext.tsx
@@ -9,10 +9,11 @@ import {
 } from "react";
 import { toPng, toJpeg, toSvg, toBlob } from "html-to-image";
 import { Options } from "html-to-image/lib/types";
-import axios from "axios";
 import { useRouter } from "next/router";
 import { useAtom } from "jotai";
 import { AppState, appStateAtom, initAppState } from "../stores/appState";
+import { exportSettingsAtom } from "../stores/exportSettings";
+import * as gtag from "../lib/gtag";
 
 export type EditorContextType = {
   canvasRef: React.RefObject<HTMLDivElement>;
@@ -25,39 +26,72 @@ export type EditorContextType = {
 export const EditorContext = createContext<EditorContextType | null>(null);
 
 export const EditorProvider = ({ children }: { children: ReactNode }) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [settings, setSettings] = useAtom(appStateAtom);
+  const [exportSettings] = useAtom(exportSettingsAtom);
+
   const router = useRouter();
 
   const getSettings = useCallback(async () => {
-    const { token } = router.query;
-    if (token) {
-      setIsLoading(true);
-      const { data } = await axios.get(`/api/hash-object?token=${token}`);
-      setSettings(data);
-      setIsLoading(false);
-      router.push("/");
-    }
-  }, [router, setSettings]);
+    let decodedQuery: any = Object.fromEntries(
+      new URLSearchParams(location.search)
+    );
+    Object.keys(decodedQuery).map((key) => {
+      switch (decodedQuery[key]) {
+        case "true":
+          decodedQuery[key] = true;
+          break;
+
+        case "false":
+          decodedQuery[key] = false;
+          break;
+
+        default:
+          break;
+      }
+    });
+
+    setSettings({
+      ...initAppState,
+      ...decodedQuery,
+    });
+
+    setIsLoading(false);
+  }, [setSettings]);
 
   useEffect(() => {
     getSettings();
   }, [getSettings]);
 
+  useEffect(() => {
+    if (isLoading) return;
+    router.replace({
+      query: settings,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings, isLoading]);
+
   const canvasRef = useRef<HTMLDivElement>(null);
 
-  const getConvertOptions = (settings: AppState) => {
-    const scale =
-      settings.renderScale === "3x" ? 3 : settings.renderScale === "2x" ? 2 : 1;
-    console.log(scale);
-
-    const options: Options = {
-      canvasWidth: canvasRef.current.clientWidth * scale,
-      canvasHeight: canvasRef.current.clientHeight * scale,
-      quality: 0.95,
-    };
-    return options;
-  };
+  const getConvertOptions = useCallback(
+    (settings: AppState) => {
+      const scale =
+        exportSettings.renderScale === "3x"
+          ? 3
+          : exportSettings.renderScale === "2x"
+          ? 2
+          : 1;
+      console.log(scale);
+
+      const options: Options = {
+        canvasWidth: canvasRef.current.clientWidth * scale,
+        canvasHeight: canvasRef.current.clientHeight * scale,
+        quality: 0.95,
+      };
+      return options;
+    },
+    [exportSettings.renderScale]
+  );
 
   const onExport: EditorContextType["onExport"] = useCallback(async () => {
     if (!canvasRef.current) return;
@@ -66,12 +100,9 @@ export const EditorProvider = ({ children }: { children: ReactNode }) => {
 
     var imgUrl: string | null = null;
 
-    const fileExtension = `.${settings.renderFormat.toLowerCase()}`;
+    const fileExtension = `.${exportSettings.renderFormat.toLowerCase()}`;
 
     switch (fileExtension) {
-      case ".png":
-        imgUrl = await toPng(canvasRef.current, options);
-        break;
       case ".jpeg":
         imgUrl = await toJpeg(canvasRef.current, options);
         break;
@@ -84,20 +115,28 @@ export const EditorProvider = ({ children }: { children: ReactNode }) => {
     }
 
     if (!imgUrl) return;
-
+    const filename = `${settings.filename || "Untitled"}${fileExtension}`;
     const link = document.createElement("a");
-    link.download = `${settings.filename || "Untitled"}${fileExtension}`;
+    link.download = filename;
     link.href = imgUrl;
     link.click();
-  }, [settings, canvasRef]);
+
+    gtag.event({
+      action: "image_export",
+      category: "export",
+      label: location.href,
+    });
+  }, [getConvertOptions, settings, exportSettings.renderFormat]);
 
   const onCopyAsLink: EditorContextType["onCopyAsLink"] =
     useCallback(async () => {
-      const origin = window.location.origin;
-      const { data } = await axios.post(`/api/hash-object`, settings);
-      const link = `${origin}?token=${data.token}`;
-      window.navigator.clipboard.writeText(link);
-    }, [settings]);
+      window.navigator.clipboard.writeText(location.href);
+      gtag.event({
+        action: "copy_link",
+        category: "export",
+        label: location.href,
+      });
+    }, []);
 
   const onCopyAsImage: EditorContextType["onCopyAsImage"] =
     useCallback(async () => {
@@ -108,10 +147,19 @@ export const EditorProvider = ({ children }: { children: ReactNode }) => {
         new ClipboardItem({ "image/png": blog }),
       ]);
       console.log("Copied");
-    }, [settings]);
+      gtag.event({
+        action: "copy_image",
+        category: "export",
+        label: location.href,
+      });
+    }, [getConvertOptions, settings]);
 
   const onReset = () => {
     setSettings(initAppState);
+    gtag.event({
+      action: "reset",
+      category: "reset",
+    });
   };
   if (isLoading) return null;
 
diff --git a/src/lib/gtag.ts b/src/lib/gtag.ts
index 464f64e..69c5341 100644
--- a/src/lib/gtag.ts
+++ b/src/lib/gtag.ts
@@ -1,19 +1,29 @@
-export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+export const GA_TRACKING_ID = "G-DPNQZEQHZ6";
+
+const isProd = process.env.NODE_ENV === "production";
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
-export const pageview = (url: any) => {
-  if (typeof window === "undefined") return;
-  (window as any).gtag("config", GA_TRACKING_ID, {
+export const pageview = (url: string): void => {
+  if (!isProd) return;
+  gtag("config", GA_TRACKING_ID, {
     page_path: url,
   });
 };
 
+type GTagEvent = {
+  action: string;
+  category?: string;
+  label?: string;
+  value?: number;
+};
+
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
-export const event = ({ action, category, label, value }) => {
-  if (typeof window === "undefined") return;
-  (window as any).gtag("event", action, {
+export const event = (gTagEvent: GTagEvent): void => {
+  if (!isProd) return;
+  const { action, category, label, value } = gTagEvent;
+  gtag("event", action, {
     event_category: category,
     event_label: label,
-    value: value,
+    value,
   });
 };
diff --git a/src/stores/appState.ts b/src/stores/appState.ts
index e43211e..e2f61f3 100644
--- a/src/stores/appState.ts
+++ b/src/stores/appState.ts
@@ -9,7 +9,6 @@ export type AppState = {
   dropShadow: boolean;
   showTitle: boolean;
   bgBlur: boolean;
-  showWaterMark: boolean;
   fontSize: string;
   padding: string;
   language: string;
@@ -17,8 +16,6 @@ export type AppState = {
   backgroundImage?: string;
   backgroundThumb?: string;
   showLineNumber: boolean;
-  renderScale: string;
-  renderFormat: string;
 };
 
 const DEFAULT_JS_VALUE = `function hello() {
@@ -33,7 +30,6 @@ export const initAppState: AppState = {
   dropShadow: true,
   showTitle: false,
   showLineNumber: true,
-  showWaterMark: true,
   bgBlur: true,
   fontSize: "16px",
   language: "javascript",
@@ -43,8 +39,6 @@ export const initAppState: AppState = {
   backgroundImage: gradients[0].gradient,
   backgroundThumb: gradients[0].gradient,
   backgroundColor: gradients[0].color,
-  renderScale: "1x",
-  renderFormat: "png",
 };
 
 export const appStateAtom = atom<AppState>(initAppState);
diff --git a/src/stores/exportSettings.ts b/src/stores/exportSettings.ts
new file mode 100644
index 0000000..f7be732
--- /dev/null
+++ b/src/stores/exportSettings.ts
@@ -0,0 +1,14 @@
+import { atom } from "jotai";
+
+export type ExprotSettings = {
+  showWaterMark: boolean;
+  renderScale: string;
+  renderFormat: string;
+};
+
+export const initExportSettings: ExprotSettings = {
+  showWaterMark: true,
+  renderScale: "1x",
+  renderFormat: "png",
+};
+export const exportSettingsAtom = atom<ExprotSettings>(initExportSettings);
diff --git a/yarn.lock b/yarn.lock
index 8a8085a..69774b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1129,6 +1129,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/gtag.js@^0.0.11":
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.11.tgz#0c384ea32e4e40043a2dca82db79b5e48d681ad5"
+  integrity sha512-rUuSDedDjcuUpoc2zf6eX6zRrxqALNgwrmMBfVFopkLH7YGM52C7tt6j9GsYIvaxn+ioVRpOKoHnN1DXzHEqIg==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
