diff --git a/src/app/forgot-password/ResetPassword.tsx b/src/app/forgot-password/ResetPassword.tsx
new file mode 100644
index 00000000000..709ec3a3a10
--- /dev/null
+++ b/src/app/forgot-password/ResetPassword.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { Paper, Stack, PasswordInput, Group, Button, Text } from "@mantine/core";
+import toast from "react-hot-toast";
+import { supabase } from "src/lib/api/supabase";
+
+export function ResetPassword() {
+  const [loading, setLoading] = React.useState(false);
+  const [password, setPassword] = React.useState("");
+  const [password2, setPassword2] = React.useState("");
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    try {
+      e.preventDefault();
+      setLoading(true);
+
+      if (password !== password2) throw new Error("Passwords do not match");
+
+      const { error } = await supabase.auth.updateUser({ password });
+      if (error) throw new Error(error.message);
+
+      toast.success("Successfully updated password!");
+      setTimeout(() => window.location.assign("/sign-in"), 2000);
+    } catch (error) {
+      if (error instanceof Error) toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Paper mx="auto" mt={70} maw={400} p="lg" withBorder>
+      <Text size="lg" w={500} mb="lg">
+        Create New Password
+      </Text>
+
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <PasswordInput
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+            label="New Password"
+            radius="sm"
+            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
+            style={{ color: "black" }}
+          />
+          <PasswordInput
+            value={password2}
+            onChange={e => setPassword2(e.target.value)}
+            required
+            label="Validate Password"
+            radius="sm"
+            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
+            style={{ color: "black" }}
+          />
+        </Stack>
+
+        <Group justify="apart" mt="xl">
+          <Button color="dark" type="submit" radius="sm" loading={loading} fullWidth>
+            Reset Password
+          </Button>
+        </Group>
+      </form>
+    </Paper>
+  );
+}
diff --git a/src/app/forgot-password/page.tsx b/src/app/forgot-password/page.tsx
index 7356dbfc542..9b65d59e18c 100644
--- a/src/app/forgot-password/page.tsx
+++ b/src/app/forgot-password/page.tsx
@@ -4,72 +4,11 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { Button, Group, Paper, Stack, TextInput, Text, Anchor, PasswordInput } from "@mantine/core";
+import { Button, Group, Paper, Stack, TextInput, Text, Anchor } from "@mantine/core";
 import { toast } from "react-hot-toast";
 import Layout from "src/layout/Layout";
 import { supabase } from "src/lib/api/supabase";
-
-function ResetPassword() {
-  const [loading, setLoading] = React.useState(false);
-  const [password, setPassword] = React.useState("");
-  const [password2, setPassword2] = React.useState("");
-
-  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    try {
-      e.preventDefault();
-      setLoading(true);
-
-      if (password !== password2) throw new Error("Passwords do not match");
-
-      const { error } = await supabase.auth.updateUser({ password });
-      if (error) throw new Error(error.message);
-
-      toast.success("Successfully updated password!");
-      setTimeout(() => window.location.assign("/sign-in"), 2000);
-    } catch (error) {
-      if (error instanceof Error) toast.error(error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Paper mx="auto" mt={70} maw={400} p="lg" withBorder>
-      <Text size="lg" w={500} mb="lg">
-        Create New Password
-      </Text>
-
-      <form onSubmit={onSubmit}>
-        <Stack>
-          <PasswordInput
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            required
-            label="New Password"
-            radius="sm"
-            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
-            style={{ color: "black" }}
-          />
-          <PasswordInput
-            value={password2}
-            onChange={e => setPassword2(e.target.value)}
-            required
-            label="Validate Password"
-            radius="sm"
-            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
-            style={{ color: "black" }}
-          />
-        </Stack>
-
-        <Group justify="apart" mt="xl">
-          <Button color="dark" type="submit" radius="sm" loading={loading} fullWidth>
-            Reset Password
-          </Button>
-        </Group>
-      </form>
-    </Paper>
-  );
-}
+import { ResetPassword } from "./ResetPassword";
 
 export default function Page() {
   const query = useSearchParams();
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5fd67ac8d04..f5465338da6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -84,67 +84,63 @@ const StyledHeroTitle = styled.h1`
   }
 `;
 
-const HeroSection = () => (
-  <StyledHeroSection id="hero-section">
-    <StyledHeroSectionBody>
-      <Stack w="100%" mx="auto" align="center">
-        <StyledHeroTitle>
-          Understand your{" "}
-          <StyledHighlightedText>
-            <Typewriter
-              words={["JSON", "YAML", "XML", "TOML", "CSV"]}
-              typeSpeed={100}
-              deleteSpeed={60}
-              delaySpeed={2000}
-              loop
-            />
-          </StyledHighlightedText>
-          <br />
-          better by visualizing
-        </StyledHeroTitle>
-
-        <StyledHeroText>
-          Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for data
-          representation and exploration.
-        </StyledHeroText>
-        <Group gap="xl">
-          <Button
-            color="gray.2"
-            c="indigo"
-            component={Link}
-            href="/editor"
-            fw="bold"
-            rightSection={<FaChevronRight />}
-            size="xl"
-            visibleFrom="md"
-          >
-            GO TO EDITOR
-          </Button>
-          <Button
-            color="gray.2"
-            c="indigo"
-            component={Link}
-            href="/editor"
-            fw="bold"
-            rightSection={<FaChevronRight />}
-            size="md"
-            hiddenFrom="md"
-          >
-            GO TO EDITOR
-          </Button>
-        </Group>
-      </Stack>
-    </StyledHeroSectionBody>
-  </StyledHeroSection>
-);
-
 export default function Page() {
   return (
     <Layout>
       <Head>
         <title>JSON Crack | Visualize Instantly Into Graphs</title>
       </Head>
-      <HeroSection />
+      <StyledHeroSection id="hero-section">
+        <StyledHeroSectionBody>
+          <Stack w="100%" mx="auto" align="center">
+            <StyledHeroTitle>
+              Understand your{" "}
+              <StyledHighlightedText>
+                <Typewriter
+                  words={["JSON", "YAML", "XML", "TOML", "CSV"]}
+                  typeSpeed={100}
+                  deleteSpeed={60}
+                  delaySpeed={2000}
+                  loop
+                />
+              </StyledHighlightedText>
+              <br />
+              better by visualizing
+            </StyledHeroTitle>
+
+            <StyledHeroText>
+              Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for
+              data representation and exploration.
+            </StyledHeroText>
+            <Group gap="xl">
+              <Button
+                color="gray.2"
+                c="indigo"
+                component={Link}
+                href="/editor"
+                fw="bold"
+                rightSection={<FaChevronRight />}
+                size="xl"
+                visibleFrom="md"
+              >
+                GO TO EDITOR
+              </Button>
+              <Button
+                color="gray.2"
+                c="indigo"
+                component={Link}
+                href="/editor"
+                fw="bold"
+                rightSection={<FaChevronRight />}
+                size="md"
+                hiddenFrom="md"
+              >
+                GO TO EDITOR
+              </Button>
+            </Group>
+          </Stack>
+        </StyledHeroSectionBody>
+      </StyledHeroSection>
     </Layout>
   );
 }
diff --git a/src/app/sign-in/AuthenticationForm.tsx b/src/app/sign-in/AuthenticationForm.tsx
new file mode 100644
index 00000000000..78be01cc74b
--- /dev/null
+++ b/src/app/sign-in/AuthenticationForm.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+import Link from "next/link";
+import {
+  Anchor,
+  Button,
+  Divider,
+  Paper,
+  PaperProps,
+  PasswordInput,
+  Stack,
+  TextInput,
+} from "@mantine/core";
+import { toast } from "react-hot-toast";
+import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai";
+import { supabase } from "src/lib/api/supabase";
+import useUser from "src/store/useUser";
+
+export function AuthenticationForm(props: PaperProps) {
+  const setSession = useUser(state => state.setSession);
+  const [loading, setLoading] = React.useState(false);
+  const [userData, setUserData] = React.useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+
+    supabase.auth
+      .signInWithPassword({
+        email: userData.email,
+        password: userData.password,
+      })
+      .then(({ data, error }) => {
+        if (error) return toast.error(error.message);
+        setSession(data.session);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const handleLoginClick = (provider: "github" | "google") => {
+    supabase.auth.signInWithOAuth({
+      provider,
+      options: { redirectTo: "https://jsoncrack.com/editor" },
+    });
+  };
+
+  return (
+    <Paper {...props}>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <TextInput
+            name="email"
+            required
+            label="Email"
+            placeholder="hello@jsoncrack.com"
+            value={userData.email}
+            onChange={event => setUserData(d => ({ ...d, email: event.target.value }))}
+            radius="sm"
+            style={{ color: "black" }}
+          />
+
+          <PasswordInput
+            name="password"
+            required
+            label="Password"
+            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
+            value={userData.password}
+            onChange={event => setUserData(d => ({ ...d, password: event.target.value }))}
+            radius="sm"
+            style={{ color: "black" }}
+          />
+
+          <Button color="dark" type="submit" radius="sm" loading={loading}>
+            Sign in
+          </Button>
+
+          <Stack gap="sm" mx="auto" align="center">
+            <Anchor component={Link} prefetch={false} href="/forgot-password" c="dark" size="xs">
+              Forgot your password?
+            </Anchor>
+          </Stack>
+        </Stack>
+      </form>
+
+      <Divider my="lg" />
+
+      <Stack mb="md" mt="md">
+        <Button
+          radius="sm"
+          leftSection={<AiOutlineGoogle size="20" />}
+          onClick={() => handleLoginClick("google")}
+          color="red"
+          variant="outline"
+        >
+          Sign in with Google
+        </Button>
+        <Button
+          radius="sm"
+          leftSection={<AiOutlineGithub size="20" />}
+          onClick={() => handleLoginClick("github")}
+          color="dark"
+          variant="outline"
+        >
+          Sign in with GitHub
+        </Button>
+      </Stack>
+    </Paper>
+  );
+}
diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
index f3f4c6be9b6..5223c584eff 100644
--- a/src/app/sign-in/page.tsx
+++ b/src/app/sign-in/page.tsx
@@ -4,120 +4,11 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import {
-  TextInput,
-  PasswordInput,
-  Paper,
-  PaperProps,
-  Button,
-  Divider,
-  Anchor,
-  Stack,
-  Center,
-} from "@mantine/core";
+import { Paper, Anchor, Center } from "@mantine/core";
 import { useSession } from "@supabase/auth-helpers-react";
-import { toast } from "react-hot-toast";
-import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai";
 import Layout from "src/layout/Layout";
-import { supabase } from "src/lib/api/supabase";
 import { isIframe } from "src/lib/utils/widget";
-import useUser from "src/store/useUser";
-
-function AuthenticationForm(props: PaperProps) {
-  const setSession = useUser(state => state.setSession);
-  const [loading, setLoading] = React.useState(false);
-  const [userData, setUserData] = React.useState({
-    name: "",
-    email: "",
-    password: "",
-  });
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setLoading(true);
-
-    supabase.auth
-      .signInWithPassword({
-        email: userData.email,
-        password: userData.password,
-      })
-      .then(({ data, error }) => {
-        if (error) return toast.error(error.message);
-        setSession(data.session);
-      })
-      .finally(() => setLoading(false));
-  };
-
-  const handleLoginClick = (provider: "github" | "google") => {
-    supabase.auth.signInWithOAuth({
-      provider,
-      options: { redirectTo: "https://jsoncrack.com/editor" },
-    });
-  };
-
-  return (
-    <Paper {...props}>
-      <form onSubmit={onSubmit}>
-        <Stack>
-          <TextInput
-            name="email"
-            required
-            label="Email"
-            placeholder="hello@jsoncrack.com"
-            value={userData.email}
-            onChange={event => setUserData(d => ({ ...d, email: event.target.value }))}
-            radius="sm"
-            style={{ color: "black" }}
-          />
-
-          <PasswordInput
-            name="password"
-            required
-            label="Password"
-            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
-            value={userData.password}
-            onChange={event => setUserData(d => ({ ...d, password: event.target.value }))}
-            radius="sm"
-            style={{ color: "black" }}
-          />
-
-          <Button color="dark" type="submit" radius="sm" loading={loading}>
-            Sign in
-          </Button>
-
-          <Stack gap="sm" mx="auto" align="center">
-            <Anchor component={Link} prefetch={false} href="/forgot-password" c="dark" size="xs">
-              Forgot your password?
-            </Anchor>
-          </Stack>
-        </Stack>
-      </form>
-
-      <Divider my="lg" />
-
-      <Stack mb="md" mt="md">
-        <Button
-          radius="sm"
-          leftSection={<AiOutlineGoogle size="20" />}
-          onClick={() => handleLoginClick("google")}
-          color="red"
-          variant="outline"
-        >
-          Sign in with Google
-        </Button>
-        <Button
-          radius="sm"
-          leftSection={<AiOutlineGithub size="20" />}
-          onClick={() => handleLoginClick("github")}
-          color="dark"
-          variant="outline"
-        >
-          Sign in with GitHub
-        </Button>
-      </Stack>
-    </Paper>
-  );
-}
+import { AuthenticationForm } from "./AuthenticationForm";
 
 export default function Page() {
   const { push } = useRouter();
diff --git a/src/lib/utils/json/jsonAdapter.ts b/src/lib/utils/json/jsonAdapter.ts
index 2b928ac042f..fc1443aa4d1 100644
--- a/src/lib/utils/json/jsonAdapter.ts
+++ b/src/lib/utils/json/jsonAdapter.ts
@@ -1,8 +1,3 @@
-import { load, dump } from "js-yaml";
-import { csv2json, json2csv } from "json-2-csv";
-import { parse } from "jsonc-parser";
-import jxon from "jxon";
-import toml from "toml";
 import { FileFormat } from "src/enums/file.enum";
 
 const keyExists = (obj: object, key: string) => {
@@ -33,6 +28,12 @@ const keyExists = (obj: object, key: string) => {
 
 const contentToJson = async (value: string, format = FileFormat.JSON): Promise<object> => {
   try {
+    const jxon = await import("jxon");
+    const { parse } = await import("jsonc-parser");
+    const { load } = await import("js-yaml");
+    const { csv2json } = await import("json-2-csv");
+    const toml = await import("toml");
+
     let json: object = {};
 
     if (format === FileFormat.JSON) json = parse(value);
@@ -52,6 +53,10 @@ const contentToJson = async (value: string, format = FileFormat.JSON): Promise<o
 
 const jsonToContent = async (json: string, format: FileFormat): Promise<string> => {
   try {
+    const { dump } = await import("js-yaml");
+    const { parse } = await import("jsonc-parser");
+    const { json2csv } = await import("json-2-csv");
+
     let contents = json;
 
     if (!json) return json;