diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
new file mode 100644
index 0000000..f97b093
--- /dev/null
+++ b/src/components/banner/Banner.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image'
+
+import { BannerView } from './BannerView'
+
+interface BannerInterface {
+  title: string,
+  subtitle: string,
+  imgSource: string
+}
+
+export default function Banner({ title, subtitle, imgSource }: BannerInterface) {
+  return (
+    <BannerView>
+      {/* <Image src={imgSource} width={1458} height={302} layout='intrinsic' /> */}
+      <Image src={imgSource} layout='fill' />
+      <div className='gradient' />
+      <div className='text'>
+        <h1>{title}</h1>
+        <p>{subtitle}</p>
+      </div>
+    </BannerView>
+  )
+}
diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts
new file mode 100644
index 0000000..6054c72
--- /dev/null
+++ b/src/components/banner/BannerView.ts
@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+export const BannerView = styled.div`
+  position: relative;
+  width: 100%;
+  height: 19rem;
+
+  .gradient {
+    position: absolute;
+    width: 100%;
+    height: 19rem;
+
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(7, 23, 100, 0.6);
+    opacity: 0.9;
+
+    z-index: 1;
+  }
+
+  .text {
+    position: relative;
+    margin: 82px 0 0 20px;
+
+    font-family: 'Poppins';
+    font-style: normal;
+
+    color: white;
+
+    z-index: 2;
+  }
+`