diff --git a/pages/_app.tsx b/pages/_app.tsx
index 56c04d9..d48b350 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,15 +1,31 @@
 import type { AppProps } from "next/app";
-import React from "react";
-import { ThemeProvider } from "styled-components";
+import { useRouter } from "next/router";
+import React, { useMemo } from "react";
+import { DefaultTheme, ThemeProvider } from "styled-components";
 import ErrorBoundary from "../components/error-boundary";
 import { PageBackground } from "../styles/background";
 
 import { GlobalStyle } from "../styles/global";
-import { defaultTheme } from "../styles/theme";
+
+const homePageTheme: DefaultTheme = {
+  bgColor: "rgba(18, 18, 18, 1)",
+  bgGridColor: "rgba(51, 51, 51, 1)",
+};
+
+const defaultPageTheme: DefaultTheme = {
+  bgColor: "rgba(18, 18, 18, 0.8)",
+  bgGridColor: "rgba(51, 51, 51, 0.3)",
+};
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  const pageTheme = useMemo(() => {
+    return router.pathname === "/" ? homePageTheme : defaultPageTheme;
+  }, [router.pathname]);
+
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={pageTheme}>
       <React.Fragment>
         <GlobalStyle />
         <ErrorBoundary>
diff --git a/pages/index.tsx b/pages/index.tsx
index 1aaa042..72b3a8c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,7 +2,7 @@
 import Image from "next/image";
 
 // Styles
-import styled, { Theme, ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import color from "../styles/color";
 
 // Components
@@ -19,13 +19,6 @@ import { SELECTED_WALLET_KEY } from "../constants/wallet";
 import { replaceToInstallPage } from "../utils/url";
 import { REFERRAL_KEY } from "../constants/icns";
 
-import { PageBackground } from "../styles/background";
-
-const theme: Theme = {
-  bgColor: "rgba(18, 18, 18, 1)",
-  bgGridColor: "rgba(51, 51, 51, 1)",
-};
-
 export default function Home() {
   const [isModalOpen, setModalOpen] = useState(false);
 
@@ -49,71 +42,67 @@ export default function Home() {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      <PageBackground>
-        <Container>
-          <Logo />
+    <Container>
+      <Logo />
 
-          <MainContainer>
-            <MainTitleContainer>
-              <MainTitleImageBackground>
-                <MainTitleImageContainer>
-                  <Image
-                    src={MainTitle}
-                    fill={true}
-                    sizes="60rem"
-                    alt="Main Title"
-                    priority
-                  />
-                </MainTitleImageContainer>
-              </MainTitleImageBackground>
+      <MainContainer>
+        <MainTitleContainer>
+          <MainTitleImageBackground>
+            <MainTitleImageContainer>
+              <Image
+                src={MainTitle}
+                fill={true}
+                sizes="60rem"
+                alt="Main Title"
+                priority
+              />
+            </MainTitleImageContainer>
+          </MainTitleImageBackground>
 
-              <ConnectButtonContainer>
-                <PrimaryButton onClick={onClickConnectWalletButton}>
-                  Connect Wallet
-                </PrimaryButton>
-              </ConnectButtonContainer>
-              <SubContainer>
-                <CheckContainer>
-                  <CheckIconContainer>
-                    <Image
-                      src={CheckIcon}
-                      fill={true}
-                      sizes="1.6rem"
-                      alt="Check Icon"
-                    />
-                  </CheckIconContainer>
-                  You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText>{" "}
-                  user. if not, you can install&nbsp;
-                  <InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk>
-                </CheckContainer>
-                <CheckContainer>
-                  <CheckIconContainer>
-                    <Image
-                      src={CheckIcon}
-                      fill={true}
-                      sizes="1.6rem"
-                      alt="Check Icon"
-                    />
-                  </CheckIconContainer>
-                  <CheckBoldText>Osmo&nbsp;</CheckBoldText> is required for this
-                  transaction
-                </CheckContainer>
-              </SubContainer>
-            </MainTitleContainer>
+          <ConnectButtonContainer>
+            <PrimaryButton onClick={onClickConnectWalletButton}>
+              Connect Wallet
+            </PrimaryButton>
+          </ConnectButtonContainer>
+          <SubContainer>
+            <CheckContainer>
+              <CheckIconContainer>
+                <Image
+                  src={CheckIcon}
+                  fill={true}
+                  sizes="1.6rem"
+                  alt="Check Icon"
+                />
+              </CheckIconContainer>
+              You are a <CheckBoldText>&nbsp;keplr&nbsp;</CheckBoldText> user.
+              if not, you can install&nbsp;
+              <InstallLInk onClick={replaceToInstallPage}>HERE</InstallLInk>
+            </CheckContainer>
+            <CheckContainer>
+              <CheckIconContainer>
+                <Image
+                  src={CheckIcon}
+                  fill={true}
+                  sizes="1.6rem"
+                  alt="Check Icon"
+                />
+              </CheckIconContainer>
+              <CheckBoldText>Osmo&nbsp;</CheckBoldText> is required for this
+              transaction
+            </CheckContainer>
+          </SubContainer>
+        </MainTitleContainer>
 
-            <MainLogoContainer>
-              <Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
-            </MainLogoContainer>
-          </MainContainer>
+        <MainLogoContainer>
+          <Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
+        </MainLogoContainer>
+      </MainContainer>
 
-          <ConnectWalletModal
-            isModalOpen={isModalOpen}
-            onCloseModal={() => setModalOpen(false)}
-          />
-        </Container>
-      </PageBackground>
-    </ThemeProvider>
+      <ConnectWalletModal
+        isModalOpen={isModalOpen}
+        onCloseModal={() => setModalOpen(false)}
+      />
+    </Container>
   );
 }
 
diff --git a/styles/background.ts b/styles/background.ts
deleted file mode 100644
index cb5fbf4..0000000
--- a/styles/background.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const PageBackground = styled.div`
-    background-color: ${({ theme }) => theme.bgColor};
-
-    background-size: 5rem 5rem;
-    background-position: top left;
-    background-repeat: repeat;
-    background-image: linear-gradient(
-            ${({ theme }) => theme.bgGridColor} 0.1rem,
-            transparent 0.1rem
-    ),
-    linear-gradient(90deg, ${({ theme }) =>
-      theme.bgGridColor} 0.1rem, transparent 0.1rem);
-  }
-`;
diff --git a/styles/global.ts b/styles/global.ts
index 9838d8b..594ce2b 100644
--- a/styles/global.ts
+++ b/styles/global.ts
@@ -1,4 +1,5 @@
 import { createGlobalStyle } from "styled-components";
+import color from "./color";
 
 export const GlobalStyle = createGlobalStyle`
   html, body {
@@ -7,6 +8,19 @@ export const GlobalStyle = createGlobalStyle`
 
     font-family: 'Inter', sans-serif;
     font-size: 16px;
+
+    background-color: ${({ theme }) => theme.bgColor ?? color.black};
+
+    background-size: 5rem 5rem;
+    background-position: top left;
+    background-repeat: repeat;
+    background-image: linear-gradient(
+            ${({ theme }) => theme.bgGridColor ?? color.grey[600]} 0.1rem,
+            transparent 0.1rem
+    ),
+    linear-gradient(90deg, ${({ theme }) =>
+      theme.bgGridColor ?? color.grey[600]} 0.1rem, transparent 0.1rem);
+  }
   }
 
   * {
diff --git a/styles/styled.d.ts b/styles/styled.d.ts
index 77cc5d2..2adcac9 100644
--- a/styles/styled.d.ts
+++ b/styles/styled.d.ts
@@ -1,7 +1,7 @@
 import "styled-components";
 
 declare module "styled-components" {
-  export interface Theme {
+  export interface DefaultTheme {
     bgColor: string;
     bgGridColor: string;
   }
diff --git a/styles/theme.ts b/styles/theme.ts
deleted file mode 100644
index f4ebbc1..0000000
--- a/styles/theme.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Theme } from "styled-components";
-
-export const defaultTheme: Theme = {
-  bgColor: "rgba(18, 18, 18, 0.8)",
-  bgGridColor: "rgba(51, 51, 51, 0.3)",
-};