diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js
deleted file mode 100644
index 805a6ff..0000000
--- a/src/pages/LandingPage.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { FlexColumn } from '../utils/containers';
-import Motivation from '../components/content_sections/Motivation';
-import Csi from '../components/content_sections/Csi';
-import Commercial from '../components/content_sections/Commercial';
-import Hero from '../components/content_sections/Hero';
-import Partnerships from '../components/content_sections/Partnerships';
-import styled from 'styled-components';
-
-const LandingPageStyle = styled(FlexColumn)`
-  justify-content: flex-start;
-  width: 100%;
-  min-height: 100vh;
-  padding: 90px 0 32px;
-
-  .main-container {
-    max-width: 452px;
-    gap: 48px;
-    width: 80%;
-  }
-
-  @media (min-width: ${({ theme }) => theme.overMobile}) {
-    padding: 172px 0 124px;
-
-    .main-container {
-      max-width: none;
-      gap: 124px;
-    }
-  }
-`;
-
-const LandingPage = (props) => {
-  return (
-    <LandingPageStyle as="main">
-      <FlexColumn className="main-container">
-        <Hero popUpMessageHandler={props.popUpMessageHandler} />
-        <Motivation />
-        <Csi />
-        <Commercial />
-        <Partnerships />
-      </FlexColumn>
-    </LandingPageStyle>
-  );
-};
-
-export default LandingPage;
diff --git a/src/pages/LandingPage/LandingPage.js b/src/pages/LandingPage/LandingPage.js
new file mode 100644
index 0000000..f2fd469
--- /dev/null
+++ b/src/pages/LandingPage/LandingPage.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { FlexColumn } from '../../utils/containers';
+import Motivation from '../../components/content_sections/Motivation';
+import Csi from '../../components/content_sections/Csi';
+import Commercial from '../../components/content_sections/Commercial';
+import Hero from '../../components/content_sections/Hero';
+import Partnerships from '../../components/content_sections/Partnerships';
+import LandingPageStyle from './LandingPageStyle';
+
+const LandingPage = (props) => {
+  return (
+    <LandingPageStyle as="main">
+      <FlexColumn className="LandingPageStyle__main-container">
+        <Hero popUpMessageHandler={props.popUpMessageHandler} />
+        <Motivation />
+        <Csi />
+        <Commercial />
+        <Partnerships />
+      </FlexColumn>
+    </LandingPageStyle>
+  );
+};
+
+export default LandingPage;
diff --git a/src/pages/LandingPage/LandingPageStyle.js b/src/pages/LandingPage/LandingPageStyle.js
new file mode 100644
index 0000000..6768752
--- /dev/null
+++ b/src/pages/LandingPage/LandingPageStyle.js
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../utils/containers';
+
+const LandingPageStyle = styled(FlexColumn)`
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 100vh;
+  padding: 90px 0 32px;
+
+  .LandingPageStyle__main-container {
+    max-width: 452px;
+    gap: 48px;
+    width: 80%;
+  }
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
+    padding: 172px 0 124px;
+
+    .LandingPageStyle__main-container {
+      max-width: none;
+      gap: 124px;
+    }
+  }
+`;
+
+export default LandingPageStyle;
diff --git a/src/pages/LandingPage/index.js b/src/pages/LandingPage/index.js
new file mode 100644
index 0000000..1505ef7
--- /dev/null
+++ b/src/pages/LandingPage/index.js
@@ -0,0 +1 @@
+export { default } from './LandingPage';