diff --git a/src/components/atoms/PageContainer/PageContainer.styles.module.scss b/src/components/atoms/PageContainer/PageContainer.styles.module.scss
new file mode 100644
index 0000000..344e87c
--- /dev/null
+++ b/src/components/atoms/PageContainer/PageContainer.styles.module.scss
@@ -0,0 +1,26 @@
+@import 'src/scss/mixins';
+
+.page-container {
+  display: flex;
+  flex-flow: wrap;
+  position: relative;
+  height: auto;
+  width: 100%;
+  background-image: url('../../../../public/images/common/ellipse-background.png');
+  background-position-x: right;
+  background-position-y: top;
+  background-repeat: no-repeat;
+
+  @include desktop {
+    padding: 0 110px 100px;
+    background-image: none;
+  }
+
+  @include tablet {
+    background-size: 100% 20%;
+  }
+
+  @include mobile {
+    background-size: 100% 20%;
+  }
+}
diff --git a/src/components/atoms/PageContainer/PageContainer.tsx b/src/components/atoms/PageContainer/PageContainer.tsx
new file mode 100644
index 0000000..7a7d999
--- /dev/null
+++ b/src/components/atoms/PageContainer/PageContainer.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import css from './PageContainer.styles.module.scss'
+
+export type PageContainerProps = {
+  className?: string
+  children?: React.ReactNode
+}
+
+export const PageContainer = ({ className, children }: PageContainerProps) => {
+  return <div className={cx(css.pageContainer, className)}>{children}</div>
+}
diff --git a/src/components/atoms/PageContainer/index.ts b/src/components/atoms/PageContainer/index.ts
new file mode 100644
index 0000000..056d4f3
--- /dev/null
+++ b/src/components/atoms/PageContainer/index.ts
@@ -0,0 +1 @@
+export * from './PageContainer'