diff --git a/src/layout/Footer/index.tsx b/src/layout/Footer/index.tsx
index 2f2eecd..c3ec835 100644
--- a/src/layout/Footer/index.tsx
+++ b/src/layout/Footer/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
 import dayjs from "dayjs";
 import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
@@ -28,7 +29,7 @@ export const Footer = () => {
             >
               VS Code
             </Anchor>
-            <Anchor fz="sm" c="dark" href="/pricing">
+            <Anchor component={Link} prefetch={false} fz="sm" c="dark" href="/pricing">
               Pricing
             </Anchor>
           </Stack>
@@ -44,10 +45,10 @@ export const Footer = () => {
             >
               Affiliate
             </Anchor>
-            <Anchor fz="sm" c="dark" href="/#faq">
+            <Anchor component={Link} prefetch={false} fz="sm" c="dark" href="/#faq">
               FAQ
             </Anchor>
-            <Anchor fz="sm" c="dark" href="/docs">
+            <Anchor component={Link} prefetch={false} fz="sm" c="dark" href="/docs">
               Docs
             </Anchor>
           </Stack>
@@ -92,12 +93,12 @@ export const Footer = () => {
         <Text fz="sm" c="dimmed">
           © {dayjs().get("year")} JSON Crack
         </Text>
-        <Anchor fz="sm" c="dimmed" href="/legal/terms">
+        <Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/terms">
           <Text fz="sm" c="dimmed">
             Terms
           </Text>
         </Anchor>
-        <Anchor fz="sm" c="dimmed" href="/legal/privacy">
+        <Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/privacy">
           <Text fz="sm" c="dimmed">
             Privacy
           </Text>
diff --git a/src/layout/Layout/index.tsx b/src/layout/Layout/index.tsx
index 295f940..06f6fb4 100644
--- a/src/layout/Layout/index.tsx
+++ b/src/layout/Layout/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useMantineColorScheme } from "@mantine/core";
 import styled, { ThemeProvider } from "styled-components";
 import { lightTheme } from "src/constants/theme";
 import { Footer } from "../Footer";
@@ -10,12 +9,6 @@ const StyledLayoutWrapper = styled.div`
 `;
 
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { setColorScheme } = useMantineColorScheme();
-
-  React.useEffect(() => {
-    setColorScheme("light");
-  }, [setColorScheme]);
-
   return (
     <ThemeProvider theme={lightTheme}>
       <StyledLayoutWrapper>
diff --git a/src/layout/Navbar/index.tsx b/src/layout/Navbar/index.tsx
index 27d74cd..0e5cef4 100644
--- a/src/layout/Navbar/index.tsx
+++ b/src/layout/Navbar/index.tsx
@@ -45,7 +45,7 @@ export const Navbar = () => {
             href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
             target="_blank"
             variant="subtle"
-            color="dark"
+            color="black"
             radius="md"
             visibleFrom="sm"
             size="md"
@@ -57,7 +57,7 @@ export const Navbar = () => {
             component={Link}
             href="/pricing"
             variant="subtle"
-            color="dark"
+            color="black"
             radius="md"
             visibleFrom="sm"
             size="md"
@@ -70,7 +70,7 @@ export const Navbar = () => {
             prefetch={false}
             href="/docs"
             variant="subtle"
-            color="dark"
+            color="black"
             radius="md"
             visibleFrom="sm"
             size="md"
@@ -84,7 +84,7 @@ export const Navbar = () => {
             component="a"
             href="https://app.jsoncrack.com/sign-in"
             variant="subtle"
-            color="dark"
+            color="black"
             radius="xl"
             visibleFrom="sm"
             size="md"
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
index 7624bd0..97c8149 100644
--- a/src/pages/docs.tsx
+++ b/src/pages/docs.tsx
@@ -47,7 +47,7 @@ const Docs = () => {
             Embed
           </Title>
         </Group>
-        <Paper p="md" radius="md" withBorder>
+        <Paper bg="white" c="black" p="md" radius="md" withBorder>
           <Title mb="sm" order={3} c="dark">
             # Fetching from URL
           </Title>
@@ -77,7 +77,7 @@ const Docs = () => {
             </StyledFrame>
           </StyledContentBody>
         </Paper>
-        <Paper p="md" radius="md" withBorder>
+        <Paper bg="white" c="black" p="md" radius="md" withBorder>
           <Title mb="sm" order={3} c="dark">
             # Embed Saved JSON
           </Title>
@@ -98,7 +98,7 @@ const Docs = () => {
             </StyledFrame>
           </StyledContentBody>
         </Paper>
-        <Paper p="md" radius="md" withBorder>
+        <Paper bg="white" c="black" p="md" radius="md" withBorder>
           <Title mb="sm" order={3} c="dark">
             # Communicating with API
           </Title>
@@ -137,7 +137,7 @@ const Docs = () => {
             </StyledFrame>
           </StyledContentBody>
         </Paper>
-        <Paper p="md" radius="md" withBorder>
+        <Paper bg="white" c="black" p="md" radius="md" withBorder>
           <Title order={4}>◼︎ On Page Load</Title>
           <StyledContentBody>
             <Text>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fbd4b2b..80334cd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -380,7 +380,14 @@ export const HomePage = () => {
             <BiChevronDown size={40} />
           </ThemeIcon>
 
-          <Title order={2} fz={{ sm: 36, md: 48 }} fw={600} mt={50} style={{ textAlign: "center" }}>
+          <Title
+            c="dark"
+            order={2}
+            fz={{ sm: 36, md: 48 }}
+            fw={600}
+            mt={50}
+            style={{ textAlign: "center" }}
+          >
             Unlock the Ease of Visualizing Your Data
           </Title>
           <Text c="dark.2" fz={{ base: 12, md: 16 }} style={{ textAlign: "center" }}>
@@ -420,7 +427,7 @@ export const HomePage = () => {
                 >
                   <MdCompare size={28} />
                 </ThemeIcon>
-                <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
+                <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
                   Compare
                 </Title>
                 <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
@@ -466,7 +473,7 @@ export const HomePage = () => {
                 >
                   <MdRebaseEdit size={28} />
                 </ThemeIcon>
-                <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
+                <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
                   Edit
                 </Title>
                 <Text fz={{ sm: 14, md: 16 }} fw={300} lts={0.4} c="dark.5" my={10}>
@@ -512,7 +519,7 @@ export const HomePage = () => {
                 >
                   <MdSearch size={28} />
                 </ThemeIcon>
-                <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
+                <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
                   Search
                 </Title>
                 <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
@@ -559,7 +566,7 @@ export const HomePage = () => {
                 >
                   <MdExtension size={28} />
                 </ThemeIcon>
-                <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
+                <Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
                   Choose Your Format
                 </Title>
                 <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
@@ -572,6 +579,7 @@ export const HomePage = () => {
                       w="100%"
                       mih={{ sm: 10, md: 40 }}
                       variant="light"
+                      c="indigo"
                       color="indigo"
                       radius="sm"
                       size="xl"
@@ -587,6 +595,7 @@ export const HomePage = () => {
                       color="cyan"
                       radius="sm"
                       size="xl"
+                      c="cyan"
                     >
                       YAML
                     </Badge>
@@ -598,6 +607,7 @@ export const HomePage = () => {
                       variant="light"
                       color="grape"
                       radius="sm"
+                      c="grape"
                       size="xl"
                     >
                       CSV
@@ -611,6 +621,7 @@ export const HomePage = () => {
                       color="red"
                       radius="sm"
                       size="xl"
+                      c="red"
                     >
                       XML
                     </Badge>
@@ -625,14 +636,18 @@ export const HomePage = () => {
       <PricingCards />
 
       <Container id="faq" component="section">
-        <Title order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
+        <Title c="dark" order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
           Frequently Asked Questions
         </Title>
-        <Accordion variant="contained" mt={60}>
+        <Accordion bg="white" variant="contained" mt={60}>
           {FAQ.map(({ title, content }) => (
             <Accordion.Item key={title} value={title}>
-              <Accordion.Control bg="white">{title}</Accordion.Control>
-              <Accordion.Panel bg="gray.1">{content}</Accordion.Panel>
+              <Accordion.Control bg="white" c="dark">
+                {title}
+              </Accordion.Control>
+              <Accordion.Panel bg="gray.1" c="dark">
+                {content}
+              </Accordion.Panel>
             </Accordion.Item>
           ))}
         </Accordion>
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index 4fc2703..81a8dce 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -56,7 +56,7 @@ export const PricingCards = () => {
     <Stack component="section" id="pricing" gap="0" align="center">
       <Center my="lg">
         <SegmentedControl
-          color="dark"
+          color="white"
           value={isMonthly ? "Monthly" : "Yearly"}
           onChange={v => setIsMonthly(v === "Monthly")}
           size="md"
@@ -100,7 +100,7 @@ export const PricingCards = () => {
             Sign Up
           </Button>
           <Flex direction="column" justify="space-between" h={250}>
-            <List spacing="xs" size="sm" mt="lg" center icon="✦">
+            <List spacing="xs" size="sm" mt="lg" c="black" center icon="✦">
               <List.Item>
                 <Text c="gray.7" fw={500} fz="sm">
                   Open Source
@@ -175,7 +175,7 @@ export const PricingCards = () => {
             Start 1 Day Free Trial
           </Button>
           <Flex direction="column" justify="space-between" h={250}>
-            <List spacing="xs" size="sm" mt="lg" center icon="✦">
+            <List spacing="xs" size="sm" mt="lg" c="black" center icon="✦">
               <List.Item>
                 <Text c="gray.7" fw={500} fz="sm">
                   Graphs: 5X faster, compact and smooth