diff --git a/public/assets/premium-divider.svg b/public/assets/premium-divider.svg
index c6d2487..a1f2d25 100644
--- a/public/assets/premium-divider.svg
+++ b/public/assets/premium-divider.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#fff"><path d="M0 0v80l227.5 18c12.1 1 22.5-8.6 22.5-20.7s10.4-21.8 22.5-20.8l205 16.3c12.1 1 22.5-8.6 22.5-20.8s10.4-21.7 22.5-20.8l205 16.3c12.1 1 22.5-8.6 22.5-20.8S760.4 5 772.5 6L1000 24V0H0Z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#fff"><path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path><path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path><path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path></svg>
\ No newline at end of file
diff --git a/public/sitemap.txt b/public/sitemap.txt
index 9394c72..c704bee 100644
--- a/public/sitemap.txt
+++ b/public/sitemap.txt
@@ -9,3 +9,4 @@ https://jsoncrack.com/widget
 https://jsoncrack.com/legal/terms
 https://jsoncrack.com/legal/privacy
 https://jsoncrack.com/affiliates
+https://jsoncrack.com/premium
diff --git a/src/containers/Landing/HeroSection.tsx b/src/containers/Landing/HeroSection.tsx
index 2919863..f2a67c1 100644
--- a/src/containers/Landing/HeroSection.tsx
+++ b/src/containers/Landing/HeroSection.tsx
@@ -3,8 +3,7 @@ import { Manrope } from "next/font/google";
 import Link from "next/link";
 import { Stack, Flex, Badge, Button, Text } from "@mantine/core";
 import styled from "styled-components";
-import { IoSparkles } from "react-icons/io5";
-import { MdChevronRight } from "react-icons/md";
+import { FaArrowRightLong } from "react-icons/fa6";
 
 const manrope = Manrope({
   subsets: ["latin-ext"],
@@ -119,18 +118,6 @@ export const HeroSection = () => {
     <StyledHeroSection>
       <StyledHeroSectionBody>
         <Stack flex="1" miw={250} mx="auto" align="center">
-          <Badge
-            size="lg"
-            fw={500}
-            lts={0.5}
-            variant="light"
-            color="red"
-            leftSection={<IoSparkles />}
-            tt="none"
-            visibleFrom="xs"
-          >
-            Start in 30 seconds — no registration, no payment.
-          </Badge>
           <StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
           <StyledHeroText>
             The best JSON viewer tool to <strong>visualize</strong>, <strong>format</strong> and{" "}
@@ -159,27 +146,26 @@ export const HeroSection = () => {
               color="orange"
               href="/#pricing"
               size="lg"
-              radius="sm"
-              fw={500}
+              radius="xl"
+              px="xl"
               fz="md"
-              rightSection={<MdChevronRight size={30} />}
+              rightSection={<FaArrowRightLong />}
               mt="lg"
             >
-              Start using free
+              Start for free
             </Button>
             <Button
               component={Link}
-              color="dark"
+              variant="light"
+              color="orange"
               prefetch={false}
               href="/premium"
               size="lg"
-              radius="sm"
-              fw={500}
+              radius="xl"
               fz="md"
               mt="lg"
-              leftSection={<IoSparkles />}
             >
-              Explore Premium
+              Get Premium
             </Button>
           </Flex>
           <Text c="gray.6" size="xs" mt="-10">
diff --git a/src/containers/Landing/PremiumVsFree.tsx b/src/containers/Landing/PremiumVsFree.tsx
index 7fed88b..f57533f 100644
--- a/src/containers/Landing/PremiumVsFree.tsx
+++ b/src/containers/Landing/PremiumVsFree.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import Link from "next/link";
-import { Title, Overlay, Image, Container, Flex, Box, List, Button } from "@mantine/core";
+import { Title, Overlay, Image, Container, Flex, Box, List, Button, Paper } from "@mantine/core";
 import styled from "styled-components";
 import { ReactCompareSlider, ReactCompareSliderHandle } from "react-compare-slider";
+import { FaArrowRightLong } from "react-icons/fa6";
 
 const StyledImageWrapper = styled.div`
   flex: 2;
-  max-width: 1400px;
   width: 100%;
   filter: drop-shadow(0px -4px 10px rgba(70, 70, 70, 0.25));
 `;
@@ -29,110 +29,115 @@ export const PremiumVsFree = () => {
   };
 
   return (
-    <Container id="premium" component="section" w={{ base: "100%", xs: "80%" }} fluid my={120}>
-      <Title
-        pos="relative"
-        c="black"
-        order={2}
-        fz={{
-          base: 24,
-          xs: 30,
-          sm: 36,
-        }}
-        fw={600}
-        mb={20}
-      >
-        Premium vs Free
-        <Box pos="absolute" mt="-8px" maw="150px" w="100%">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418 125" fill="#000">
-            <path d="M1412.29 72.17c-11.04-5.78-20.07-14.33-85.46-25.24-22.37-3.63-44.69-7.56-67.07-11.04-167.11-22.06-181.65-21.24-304.94-30.56C888.78 1.39 822.57 1.1 756.44 0c-46.63-.11-93.27 1.56-139.89 2.5C365.5 13.55 452.86 7.68 277.94 23.15 202.57 33.32 127.38 45.01 52.07 55.69c-11.23 2.41-22.63 4.17-33.71 7.22C6.1 66.33 5.64 66.19 3.89 67.79c-7.99 5.78-2.98 20.14 8.72 17.5 33.99-9.47 32.28-8.57 178.06-29.66 4.26 4.48 7.29 3.38 18.42 3.11 13.19-.32 26.38-.53 39.56-1.12 53.51-3.81 106.88-9.62 160.36-13.95 18.41-1.3 36.8-3.12 55.21-4.7 23.21-1.16 46.43-2.29 69.65-3.4 120.28-2.16 85.46-3.13 234.65-1.52 23.42.99 1.57-.18 125.72 6.9 96.61 8.88 200.92 27.94 295.42 46.12 40.87 7.91 116.67 23.2 156.31 36.78 3.81 1.05 8.28-.27 10.51-3.58 3.17-3.72 2.66-9.7-.78-13.13-3.25-3.12-8.14-3.44-12.18-5.08-17.89-5.85-44.19-12.09-63.67-16.56l26.16 3.28c23.02 3.13 46.28 3.92 69.34 6.75 10.8.96 25.43 1.81 34.34-4.39 2.26-1.54 4.86-2.75 6.21-5.27 2.76-4.59 1.13-11.06-3.59-13.68ZM925.4 23.77c37.64 1.4 153.99 10.85 196.64 14.94 45.95 5.51 91.89 11.03 137.76 17.19 24.25 4.77 74.13 11.21 101.72 18.14-11.87-1.15-23.77-1.97-35.65-3.06-133.46-15.9-266.8-33.02-400.47-47.21Z"></path>
-          </svg>
-        </Box>
-      </Title>
-      <Flex
-        gap="xl"
-        direction={{
-          base: "column",
-          md: "row",
-        }}
-      >
-        <Box flex="1.3">
-          We developed an entirely new version of JSON Crack, packed with numerous features and
-          enhancements.
-          <List mt="md" visibleFrom="xs">
-            <List.Item>Supports larger data (~4 MB)</List.Item>
-            <List.Item>Customizable color options</List.Item>
-            <List.Item>Data comparison feature</List.Item>
-            <List.Item>Focus to node from editor cursor</List.Item>
-            <List.Item>Edit directly on graphs</List.Item>
-            <List.Item>AI-powered assistant</List.Item>
-            <List.Item>Beautiful UI and very smooth navigation</List.Item>
-          </List>
-          <Button
-            component={Link}
-            href="/premium"
-            display="block"
-            w="fit-content"
-            miw={200}
-            variant="filled"
-            color="orange"
-            mt="md"
-            size="lg"
-          >
-            See all features
-          </Button>
-        </Box>
+    <Container size="lg" id="premium" component="section" my={120}>
+      <Paper radius="lg" bg="dark" p="xl">
+        <Title
+          pos="relative"
+          c="white"
+          order={2}
+          fz={{
+            base: 24,
+            xs: 30,
+            sm: 36,
+          }}
+          fw={600}
+          mb={20}
+        >
+          Explore Premium.
+          <Box pos="absolute" mt="-8px" maw="150px" w="100%">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418 125" fill="#ffbb55">
+              <path d="M1412.29 72.17c-11.04-5.78-20.07-14.33-85.46-25.24-22.37-3.63-44.69-7.56-67.07-11.04-167.11-22.06-181.65-21.24-304.94-30.56C888.78 1.39 822.57 1.1 756.44 0c-46.63-.11-93.27 1.56-139.89 2.5C365.5 13.55 452.86 7.68 277.94 23.15 202.57 33.32 127.38 45.01 52.07 55.69c-11.23 2.41-22.63 4.17-33.71 7.22C6.1 66.33 5.64 66.19 3.89 67.79c-7.99 5.78-2.98 20.14 8.72 17.5 33.99-9.47 32.28-8.57 178.06-29.66 4.26 4.48 7.29 3.38 18.42 3.11 13.19-.32 26.38-.53 39.56-1.12 53.51-3.81 106.88-9.62 160.36-13.95 18.41-1.3 36.8-3.12 55.21-4.7 23.21-1.16 46.43-2.29 69.65-3.4 120.28-2.16 85.46-3.13 234.65-1.52 23.42.99 1.57-.18 125.72 6.9 96.61 8.88 200.92 27.94 295.42 46.12 40.87 7.91 116.67 23.2 156.31 36.78 3.81 1.05 8.28-.27 10.51-3.58 3.17-3.72 2.66-9.7-.78-13.13-3.25-3.12-8.14-3.44-12.18-5.08-17.89-5.85-44.19-12.09-63.67-16.56l26.16 3.28c23.02 3.13 46.28 3.92 69.34 6.75 10.8.96 25.43 1.81 34.34-4.39 2.26-1.54 4.86-2.75 6.21-5.27 2.76-4.59 1.13-11.06-3.59-13.68ZM925.4 23.77c37.64 1.4 153.99 10.85 196.64 14.94 45.95 5.51 91.89 11.03 137.76 17.19 24.25 4.77 74.13 11.21 101.72 18.14-11.87-1.15-23.77-1.97-35.65-3.06-133.46-15.9-266.8-33.02-400.47-47.21Z"></path>
+            </svg>
+          </Box>
+        </Title>
+        <Flex
+          gap="lg"
+          direction={{
+            base: "column",
+            md: "row",
+          }}
+        >
+          <Box flex="1.3">
+            <List mt="md" fz="lg" visibleFrom="xs" c="gray.3">
+              <List.Item>Refined user interface</List.Item>
+              <List.Item>Supports larger data (~4 MB)</List.Item>
+              <List.Item>Customizable color options</List.Item>
+              <List.Item>Compare data on graphs</List.Item>
+              <List.Item>Edit directly on graphs</List.Item>
+              <List.Item>AI-powered assistant</List.Item>
+              <List.Item>Everything is faster.</List.Item>
+            </List>
+            <Button
+              component={Link}
+              href="/premium"
+              prefetch={false}
+              display="block"
+              w="fit-content"
+              miw={200}
+              variant="filled"
+              color="orange"
+              mt="lg"
+              size="lg"
+              rightSection={<FaArrowRightLong />}
+              radius="xl"
+              fw={500}
+              fz="md"
+            >
+              See all features
+            </Button>
+          </Box>
 
-        <StyledImageWrapper>
-          <ReactCompareSlider
-            onPointerDown={() => setLabelOpacity(0)}
-            onPointerUp={() => setLabelOpacity(1)}
-            style={{
-              borderRadius: 10,
-              overflow: "hidden",
-              border: "1px solid #c1c1c1",
-              outline: "1px solid #c1c1c1",
-              outlineOffset: "6px",
-            }}
-            itemOne={<Image loading="lazy" src="./assets/preview/1.webp" alt="Pro" />}
-            itemTwo={
-              <>
-                <Overlay color="#000" backgroundOpacity={0.1} />
-                <Image loading="lazy" src="./assets/preview/free.webp" alt="Free" />
-              </>
-            }
-            handle={
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  height: "100%",
-                }}
-              >
-                <ReactCompareSliderHandle />
+          <StyledImageWrapper>
+            <ReactCompareSlider
+              onPointerDown={() => setLabelOpacity(0)}
+              onPointerUp={() => setLabelOpacity(1)}
+              style={{
+                borderRadius: 10,
+                overflow: "hidden",
+                border: "1px solid #c1c1c1",
+                outline: "1px solid #c1c1c1",
+                outlineOffset: "6px",
+              }}
+              itemOne={<Image loading="lazy" src="./assets/preview/1.webp" alt="Pro" />}
+              itemTwo={
+                <>
+                  <Overlay color="#000" backgroundOpacity={0.1} />
+                  <Image loading="lazy" src="./assets/preview/free.webp" alt="Free" />
+                </>
+              }
+              handle={
                 <div
                   style={{
-                    ...labelStyle,
-                    translate: "-100% 0",
-                    left: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    height: "100%",
                   }}
                 >
-                  Premium
+                  <ReactCompareSliderHandle />
+                  <div
+                    style={{
+                      ...labelStyle,
+                      translate: "-100% 0",
+                      left: 0,
+                    }}
+                  >
+                    Premium
+                  </div>
+                  <div
+                    style={{
+                      ...labelStyle,
+                      translate: "100% 0",
+                      right: 0,
+                    }}
+                  >
+                    Free
+                  </div>
                 </div>
-                <div
-                  style={{
-                    ...labelStyle,
-                    translate: "100% 0",
-                    right: 0,
-                  }}
-                >
-                  Free
-                </div>
-              </div>
-            }
-          />
-        </StyledImageWrapper>
-      </Flex>
+              }
+            />
+          </StyledImageWrapper>
+        </Flex>
+      </Paper>
     </Container>
   );
 };
diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx
index e092298..06d6efa 100644
--- a/src/layout/Navbar.tsx
+++ b/src/layout/Navbar.tsx
@@ -48,7 +48,7 @@ export const Navbar = () => {
   return (
     <StyledNavbarWrapper className="navbar">
       <Alert variant="filled" color="orange.4" fw={500} ta="center" p="6" mt="-1rem">
-        <Link href="/#buyonce">
+        <Link href="/#pricing">
           <ThemeIcon size="sm" variant="transparent" color="black" mr={2}>
             <FaGift size="12" />
           </ThemeIcon>
@@ -62,19 +62,6 @@ export const Navbar = () => {
       <StyledNavbar>
         <Left>
           <JSONCrackLogo />
-          <Button
-            component={Link}
-            prefetch={false}
-            href="/#pricing"
-            variant="subtle"
-            color="black"
-            radius="sm"
-            size="sm"
-            ml={50}
-            fw={500}
-          >
-            Pricing
-          </Button>
           <Button
             component="a"
             href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
@@ -84,9 +71,35 @@ export const Navbar = () => {
             radius="sm"
             size="sm"
             fw={500}
+            ml={50}
           >
             VS Code
           </Button>
+          <Button
+            component={Link}
+            prefetch={false}
+            href="/premium"
+            variant="subtle"
+            color="black"
+            radius="sm"
+            size="sm"
+            fw={500}
+          >
+            Premium
+          </Button>
+          <Button
+            component={Link}
+            prefetch={false}
+            href="/#pricing"
+            variant="subtle"
+            color="black"
+            radius="sm"
+            size="sm"
+            fw={500}
+          >
+            Pricing
+          </Button>
+
           <Button
             component={Link}
             prefetch={false}
@@ -121,7 +134,7 @@ export const Navbar = () => {
             visibleFrom="sm"
             size="md"
           >
-            Sign in
+            Log in
           </Button>
           <Button
             component="a"
diff --git a/src/modules/GraphView/NotSupported.tsx b/src/modules/GraphView/NotSupported.tsx
index 45f3d3b..3b18bb2 100644
--- a/src/modules/GraphView/NotSupported.tsx
+++ b/src/modules/GraphView/NotSupported.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "next/link";
 import { Button, Title } from "@mantine/core";
 import styled from "styled-components";
 import { MdChevronRight } from "react-icons/md";
@@ -167,7 +166,7 @@ export const NotSupported = () => {
         </StyledInfo>
 
         <Button
-          component={Link}
+          component="a"
           href="/premium"
           target="_blank"
           mt="lg"
diff --git a/src/pages/affiliates.tsx b/src/pages/affiliates.tsx
index 8e90a40..e81aa77 100644
--- a/src/pages/affiliates.tsx
+++ b/src/pages/affiliates.tsx
@@ -23,7 +23,7 @@ const Affiliate = () => {
   return (
     <>
       <Head>
-        <title>JSON Crack Affiliate Program</title>
+        <title>Affiliate Program - JSON Crack</title>
         <link rel="canonical" href="https://jsoncrack.com/affiliates" />
         <meta
           name="description"
diff --git a/src/pages/premium.tsx b/src/pages/premium.tsx
index 49f7b2f..8aad37a 100644
--- a/src/pages/premium.tsx
+++ b/src/pages/premium.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Head from "next/head";
 import {
   Container,
   Box,
@@ -67,292 +68,311 @@ const Premium = () => {
   };
 
   return (
-    <Layout>
-      <Container
-        pos="relative"
-        pt={100}
-        pb={200}
-        fluid
-        style={{
-          background:
-            "linear-gradient(165deg, #000000, #010101, #080808, #171717, #272727, #383838, #4a4a4a, #5d5d5d)",
-        }}
-      >
-        <Box mx="auto" maw={600}>
-          <Title
-            order={1}
-            c="white"
-            fz={{
-              base: 38,
-              xs: 50,
-            }}
-          >
-            More than just a JSON Viewer.
-          </Title>
-          <Text
-            c="gray.3"
-            mt={32}
-            fz={{
-              base: 16,
-              xs: 20,
-            }}
-          >
-            Rebuilt from the ground up — now faster, more powerful, and more visually stunning.
-          </Text>
-          <Button
-            component="a"
-            href="#pricing"
-            mt="lg"
-            variant="white"
-            color="gray"
-            radius="md"
-            size="lg"
-            rightSection={<MdChevronRight size={30} />}
-          >
-            Get it now
-          </Button>
-          <Image
-            pos="absolute"
-            bottom={-1}
-            left={0}
-            src="./assets/premium-divider.svg"
-            width="100%"
-            alt="divider"
-            style={{
-              transform: "scaleY(-1) scaleX(-1)",
-            }}
-          />
-        </Box>
-      </Container>
-      <PremiumPreview />
-      <Container fluid bg="dark" my={120} py={40}>
-        <Container size="xl">
+    <>
+      <Head>
+        <title>Premium - JSON Crack</title>
+        <link rel="canonical" href="https://jsoncrack.com/premium" />
+        <meta
+          name="description"
+          content="Rebuilt from the ground up — now faster, more powerful, and more visually stunning."
+        />
+        <meta
+          property="og:description"
+          content="Rebuilt from the ground up — now faster, more powerful, and more visually stunning."
+        />
+        <meta
+          name="twitter:description"
+          content="Rebuilt from the ground up — now faster, more powerful, and more visually stunning."
+        />
+      </Head>
+      <Layout>
+        <Container
+          pos="relative"
+          pt={100}
+          pb={200}
+          fluid
+          style={{
+            background:
+              "linear-gradient(165deg, #000000, #010101, #080808, #171717, #272727, #383838, #4a4a4a, #5d5d5d)",
+          }}
+        >
+          <Box mx="auto" maw={600}>
+            <Title
+              order={1}
+              c="white"
+              fz={{
+                base: 38,
+                xs: 50,
+              }}
+            >
+              More than just a JSON Viewer.
+            </Title>
+            <Text
+              c="gray.3"
+              mt={32}
+              fz={{
+                base: 16,
+                xs: 20,
+              }}
+            >
+              Rebuilt from the ground up — now faster, more powerful, and more visually stunning.
+            </Text>
+            <Button
+              component="a"
+              href="#pricing"
+              mt="lg"
+              variant="white"
+              color="gray"
+              radius="md"
+              size="lg"
+              rightSection={<MdChevronRight size={30} />}
+            >
+              Get it now
+            </Button>
+            <Image
+              pos="absolute"
+              bottom={-1}
+              left={0}
+              src="./assets/premium-divider.svg"
+              width="100%"
+              alt="divider"
+              style={{
+                transform: "scaleY(-1) scaleX(-1)",
+              }}
+            />
+          </Box>
+        </Container>
+        <PremiumPreview />
+        <Container fluid bg="dark" my={120} py={40}>
+          <Container size="xl">
+            <Title
+              fz={{
+                base: 28,
+                xs: 36,
+              }}
+              order={2}
+              c="white"
+            >
+              Built for everyone.
+            </Title>
+            <Text c="gray.3" fz="xl" mb={40}>
+              Zero technical knowledge required.
+            </Text>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                xs: 2,
+                md: 4,
+              }}
+              spacing="xl"
+            >
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="blue.3">
+                    <Text fz="sm" fw={500}>
+                      4 MB
+                    </Text>
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Larger Data
+                  </Title>
+                  <Text c="gray.3">From 300KB to ~4MB upgraded data size.</Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="violet.1">
+                    <MdOutlinePhotoSizeSelectSmall size="30" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Compact Design
+                  </Title>
+                  <Text c="gray.3">
+                    50% less graph size. Get rid of the redundant data and nodes, focus on
+                    what&apos;s important.
+                  </Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="green.3">
+                    <MdSpeed size="30" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Faster
+                  </Title>
+                  <Text c="gray.3">
+                    Load data faster. Navigate faster. Search faster. Everything is faster than
+                    ever.
+                  </Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="orange.2">
+                    <MdCompare size="30" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Compare
+                  </Title>
+                  <Text c="gray.3">
+                    Compare two data, highlight the differences directly on the graphs.
+                  </Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="violet.3">
+                    <IoSparkles size="22" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Edit Directly
+                  </Title>
+                  <Text c="gray.3">
+                    Modify your data directly on the graph. No more switching between the editor and
+                    the graph.
+                  </Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="yellow.2">
+                    <MdPalette size="30" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Customize
+                  </Title>
+                  <Text c="gray.3">
+                    Customize the graph&apos;s colors to align with your brand or personal
+                    preferences.
+                  </Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="grape.2">
+                    <GrMultiple size="22" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    Tabs
+                  </Title>
+                  <Text c="gray.3">
+                    Open multiple tabs, navigate between them easily. Save up to 200 documents to
+                    the cloud.
+                  </Text>
+                </Flex>
+              </Paper>
+              <Paper bg="gray.8" p="lg" radius="md">
+                <Flex gap="sm" align="center" justify="center" direction="column">
+                  <ThemeIcon radius="xl" size="xl" variant="light" color="gray.1">
+                    <RiRobot2Line size="22" />
+                  </ThemeIcon>
+                  <Title ta="center" c="white" order={3}>
+                    AI-Powered
+                  </Title>
+                  <Text c="gray.3">
+                    Ask it to translate your fields, filter out by age or name includes, and more.
+                  </Text>
+                </Flex>
+              </Paper>
+            </SimpleGrid>
+          </Container>
+        </Container>
+        <Container pt="xl" component="section" id="pricing" size="xl">
           <Title
+            maw={800}
+            fw={500}
+            mx="auto"
+            ta="center"
+            c="dark"
             fz={{
               base: 28,
-              xs: 36,
+              xs: 40,
             }}
             order={2}
-            c="white"
           >
-            Built for everyone.
+            Keep your expectations high.
           </Title>
-          <Text c="gray.3" fz="xl" mb={40}>
-            Zero technical knowledge required.
-          </Text>
-          <SimpleGrid
-            cols={{
-              base: 1,
-              xs: 2,
-              md: 4,
-            }}
-            spacing="xl"
-          >
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="blue.3">
-                  <Text fz="sm" fw={500}>
-                    4 MB
-                  </Text>
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Larger Data
-                </Title>
-                <Text c="gray.3">From 300KB to ~4MB upgraded data size.</Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="violet.1">
-                  <MdOutlinePhotoSizeSelectSmall size="30" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Compact Design
-                </Title>
-                <Text c="gray.3">
-                  50% less graph size. Get rid of the redundant data and nodes, focus on what&apos;s
-                  important.
-                </Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="green.3">
-                  <MdSpeed size="30" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Faster
-                </Title>
-                <Text c="gray.3">
-                  Load data faster. Navigate faster. Search faster. Everything is faster than ever.
-                </Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="orange.2">
-                  <MdCompare size="30" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Compare
-                </Title>
-                <Text c="gray.3">
-                  Compare two data, highlight the differences directly on the graphs.
-                </Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="violet.3">
-                  <IoSparkles size="22" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Edit Directly
-                </Title>
-                <Text c="gray.3">
-                  Modify your data directly on the graph. No more switching between the editor and
-                  the graph.
-                </Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="yellow.2">
-                  <MdPalette size="30" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Customize
-                </Title>
-                <Text c="gray.3">
-                  Customize the graph&apos;s colors to align with your brand or personal
-                  preferences.
-                </Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="grape.2">
-                  <GrMultiple size="22" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  Tabs
-                </Title>
-                <Text c="gray.3">
-                  Open multiple tabs, navigate between them easily. Save up to 200 documents to the
-                  cloud.
-                </Text>
-              </Flex>
-            </Paper>
-            <Paper bg="gray.8" p="lg" radius="md">
-              <Flex gap="sm" align="center" justify="center" direction="column">
-                <ThemeIcon radius="xl" size="xl" variant="light" color="gray.1">
-                  <RiRobot2Line size="22" />
-                </ThemeIcon>
-                <Title ta="center" c="white" order={3}>
-                  AI-Powered
-                </Title>
-                <Text c="gray.3">
-                  Ask it to translate your fields, filter out by age or name includes, and more.
-                </Text>
-              </Flex>
-            </Paper>
-          </SimpleGrid>
+          <Radio.Group maw={600} mx="auto" mt="xl" value={plan} onChange={setPlan}>
+            <Stack>
+              <StyledRadioCard value="monthly" radius="lg" px="xl" py="md">
+                <Group align="center" justify="space-between">
+                  <Flex align="center" gap="xs">
+                    <Text fz="xl" c="gray.7" fw={600}>
+                      Monthly
+                    </Text>
+                  </Flex>
+                  <Flex fw={500} align="baseline" fz="sm" c="gray.5">
+                    <Text fw={600} fz="xl" c="gray.7">
+                      ${PRICING.MONTHLY}
+                    </Text>
+                    /month
+                  </Flex>
+                </Group>
+              </StyledRadioCard>
+              <StyledRadioCard value="annual" radius="lg" px="xl" py="md">
+                <Group align="center" justify="space-between">
+                  <Flex align="center" gap="xs">
+                    <Text fz="xl" c="gray.7" fw={600}>
+                      Yearly
+                    </Text>
+                  </Flex>
+                  <Flex fw={500} align="baseline" fz="sm" c="gray.5">
+                    <Text fw={600} fz="xl" c="gray.7">
+                      ${PRICING.ANNUAL * 12}
+                    </Text>
+                    /year
+                  </Flex>
+                </Group>
+              </StyledRadioCard>
+              <StyledRadioCard value="ltd" radius="lg" px="xl" py="md">
+                <Group align="center" justify="space-between">
+                  <Flex align="center" gap="xs">
+                    <Text fz="xl" c="gray.7" fw={600}>
+                      Lifetime
+                    </Text>
+                    <Badge
+                      variant="light"
+                      size="sm"
+                      radius="lg"
+                      color="red"
+                      leftSection={<MdOutlineTimer size="12" />}
+                    >
+                      Limited
+                    </Badge>
+                  </Flex>
+                  <Flex fw={500} align="baseline" fz="sm" c="gray.5">
+                    <Text fw={600} fz="xl" c="gray.7">
+                      ${PRICING.LTD}
+                    </Text>
+                    /lifetime
+                  </Flex>
+                </Group>
+              </StyledRadioCard>
+            </Stack>
+            <Button
+              component="a"
+              href={getUpgradeLink()}
+              target="_blank"
+              color="dark"
+              fullWidth
+              mt="xl"
+              size="xl"
+              radius="md"
+              leftSection={<MdRocketLaunch />}
+            >
+              Upgrade
+            </Button>
+          </Radio.Group>
+          <Flex pt="sm" c="dimmed" justify="center" align="center" gap={4}>
+            <AiOutlineInfoCircle />
+            <Text size="xs">
+              Payment email must be matching with the account registered to the JSON Crack.
+            </Text>
+          </Flex>
         </Container>
-      </Container>
-      <Container pt="xl" component="section" id="pricing" size="xl">
-        <Title
-          maw={800}
-          fw={500}
-          mx="auto"
-          ta="center"
-          c="dark"
-          fz={{
-            base: 28,
-            xs: 40,
-          }}
-          order={2}
-        >
-          Keep your expectations high.
-        </Title>
-        <Radio.Group maw={600} mx="auto" mt="xl" value={plan} onChange={setPlan}>
-          <Stack>
-            <StyledRadioCard value="monthly" radius="lg" px="xl" py="md">
-              <Group align="center" justify="space-between">
-                <Flex align="center" gap="xs">
-                  <Text fz="xl" c="gray.7" fw={600}>
-                    Monthly
-                  </Text>
-                </Flex>
-                <Flex fw={500} align="baseline" fz="sm" c="gray.5">
-                  <Text fw={600} fz="xl" c="gray.7">
-                    ${PRICING.MONTHLY}
-                  </Text>
-                  /month
-                </Flex>
-              </Group>
-            </StyledRadioCard>
-            <StyledRadioCard value="annual" radius="lg" px="xl" py="md">
-              <Group align="center" justify="space-between">
-                <Flex align="center" gap="xs">
-                  <Text fz="xl" c="gray.7" fw={600}>
-                    Yearly
-                  </Text>
-                </Flex>
-                <Flex fw={500} align="baseline" fz="sm" c="gray.5">
-                  <Text fw={600} fz="xl" c="gray.7">
-                    ${PRICING.ANNUAL * 12}
-                  </Text>
-                  /year
-                </Flex>
-              </Group>
-            </StyledRadioCard>
-            <StyledRadioCard value="ltd" radius="lg" px="xl" py="md">
-              <Group align="center" justify="space-between">
-                <Flex align="center" gap="xs">
-                  <Text fz="xl" c="gray.7" fw={600}>
-                    Lifetime
-                  </Text>
-                  <Badge
-                    variant="light"
-                    size="sm"
-                    radius="lg"
-                    color="red"
-                    leftSection={<MdOutlineTimer size="12" />}
-                  >
-                    Limited
-                  </Badge>
-                </Flex>
-                <Flex fw={500} align="baseline" fz="sm" c="gray.5">
-                  <Text fw={600} fz="xl" c="gray.7">
-                    ${PRICING.LTD}
-                  </Text>
-                  /lifetime
-                </Flex>
-              </Group>
-            </StyledRadioCard>
-          </Stack>
-          <Button
-            component="a"
-            href={getUpgradeLink()}
-            target="_blank"
-            color="dark"
-            fullWidth
-            mt="xl"
-            size="xl"
-            radius="md"
-            leftSection={<MdRocketLaunch />}
-          >
-            Upgrade
-          </Button>
-        </Radio.Group>
-        <Flex pt="sm" c="dimmed" justify="center" align="center" gap={4}>
-          <AiOutlineInfoCircle />
-          <Text size="xs">
-            Payment email must be matching with the account registered to the JSON Crack.
-          </Text>
-        </Flex>
-      </Container>
-    </Layout>
+      </Layout>
+    </>
   );
 };
 
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index 2fd018f..a93e088 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -18,8 +18,8 @@ import {
 } from "@mantine/core";
 import styled from "styled-components";
 import { AiOutlineInfoCircle } from "react-icons/ai";
-import { FaCheck, FaXmark } from "react-icons/fa6";
-import { VscArrowRight, VscLinkExternal } from "react-icons/vsc";
+import { FaArrowRightLong, FaCheck, FaXmark } from "react-icons/fa6";
+import { VscLinkExternal } from "react-icons/vsc";
 import Layout from "src/layout/Layout";
 import { gaEvent } from "src/lib/utils/gaEvent";
 
@@ -41,7 +41,7 @@ export const purchaseLinks = {
 const StyledPaper = styled(Paper)<PaperProps & any>`
   padding: 1.5em;
   width: 350px;
-  border-radius: 4px;
+  border-radius: 8px;
   border: 2px solid #e9e9e9;
   background: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -63,7 +63,6 @@ export const PricingCards = () => {
           w={200}
           radius="md"
           styles={{ label: { color: "black" } }}
-          mb="xl"
         />
       </Center>
       <Flex
@@ -78,6 +77,43 @@ export const PricingCards = () => {
         }}
         mx="auto"
       >
+        <Box w="100%">
+          <StyledPaper
+            withBorder
+            p="sm"
+            w="100%"
+            style={{ borderColor: "orange" }}
+            visibleFrom="sm"
+          >
+            <Flex gap="xs" align="end">
+              <Stack gap="xs">
+                <Text fz="md" fw={500}>
+                  Buy once,
+                  <Text ml={4} component="span" inherit c="orange">
+                    use forever
+                  </Text>
+                  !
+                </Text>
+                <Text fz="sm" maw={400}>
+                  Gain lifetime access to JSON Crack, enjoy all the advantages of our Premium plan
+                  with this one-time deal.
+                </Text>
+              </Stack>
+              <Button
+                component="a"
+                href={purchaseLinks.ltd}
+                target="_blank"
+                fw={400}
+                fz="sm"
+                size="md"
+                color="orange"
+                rightSection={<FaArrowRightLong />}
+              >
+                Get Lifetime Access for ${PRICING.LTD}
+              </Button>
+            </Flex>
+          </StyledPaper>
+        </Box>
         <StyledPaper>
           <Flex justify="space-between">
             <Stack gap="0">
@@ -123,13 +159,13 @@ export const PricingCards = () => {
             radius="md"
             fullWidth
             my="md"
-            rightSection={<VscArrowRight />}
+            rightSection={<FaArrowRightLong />}
           >
             Get Started
           </Button>
-          <Text mt="xs" fz="xs" c="dimmed">
-            Remake version with advanced features, better performance and smooth user interface.
-          </Text>
+          <Anchor component={Link} href="/premium" mt="xs" fz="xs" td="underline" c="dimmed">
+            Click here to see all features
+          </Anchor>
           <Flex direction="column" justify="space-between">
             <List
               spacing="sm"
@@ -240,7 +276,7 @@ export const PricingCards = () => {
             color="dark"
             fullWidth
             my="md"
-            rightSection={<VscArrowRight />}
+            rightSection={<FaArrowRightLong />}
           >
             Start Free
           </Button>
@@ -341,36 +377,6 @@ export const PricingCards = () => {
           </Flex>
         </StyledPaper>
       </Flex>
-      <Box id="buyonce" pt="lg">
-        <StyledPaper w="100%" style={{ borderColor: "orange" }} visibleFrom="sm">
-          <Stack px="xl">
-            <Text fz="h2" fw={500} ta="center">
-              Buy once,
-              <Text ml={4} component="span" inherit c="orange">
-                use forever
-              </Text>
-              !
-            </Text>
-            <Text>
-              Gain lifetime access to JSON Crack, enjoy all the advantages of our Premium plan with
-              this one-time deal.
-            </Text>
-            <Button
-              component="a"
-              href={purchaseLinks.ltd}
-              target="_blank"
-              w="fit-content"
-              mx="auto"
-              fw={500}
-              size="md"
-              color="orange"
-              rightSection={<VscArrowRight />}
-            >
-              Get Lifetime Access for ${PRICING.LTD}
-            </Button>
-          </Stack>
-        </StyledPaper>
-      </Box>
     </Stack>
   );
 };