diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx
new file mode 100644
index 0000000..1d858b1
--- /dev/null
+++ b/src/components/mapCard/MapCard.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image'
+import { MapCardView } from './style'
+
+interface MapCardInterface {
+  title: string,
+  subtitle: string,
+  statistic: string,
+  imgSource: string,
+}
+
+export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
+
+  return (
+    <MapCardView>
+      <Image src={imgSource} width={125} height={125} />
+      <div>
+        <h4>{title}</h4>
+        <span>{subtitle}</span>
+        <article>
+          <Image src="/graphLineIcon.svg" width={20} height={20} />
+          <p>{statistic}</p>
+        </article>
+      </div>
+    </MapCardView>
+  )
+}
diff --git a/src/components/mapCard/style.ts b/src/components/mapCard/style.ts
new file mode 100644
index 0000000..d3a58d4
--- /dev/null
+++ b/src/components/mapCard/style.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+export const MapCardView = styled.figure`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: row;
+
+  margin-right: 25px;
+
+  span {
+      margin-bottom: 25px;
+    }
+
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    article {
+      display: flex;
+    }
+  }
+`