diff --git a/src/components/DateAndPlace.scss b/src/components/DateAndPlace.scss
new file mode 100644
index 0000000..fd61ae8
--- /dev/null
+++ b/src/components/DateAndPlace.scss
@@ -0,0 +1,19 @@
+@import '../colors.scss';
+
+.dateAndPlace {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: calc(10px + 2vmin);
+
+  h2 {
+    font-family: 'Montserrat-Medium';
+    font-size: 1.4rem;
+    color: $brown-text !important;
+    margin-bottom: -0.7rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    color: $brown-text !important;
+  }
+}
diff --git a/src/components/DateAndPlace.tsx b/src/components/DateAndPlace.tsx
new file mode 100644
index 0000000..0d9f041
--- /dev/null
+++ b/src/components/DateAndPlace.tsx
@@ -0,0 +1,17 @@
+import './DateAndPlace.scss';
+
+import { FormattedMessage } from 'react-intl';
+
+export const DateAndPlace = () => {
+  return (
+    <div className='dateAndPlace'>
+      <h2>
+        <FormattedMessage id='common.datetime' />
+      </h2>
+
+      <h3>
+        <FormattedMessage id='common.place' />
+      </h3>
+    </div>
+  );
+};