diff --git a/components/DateAndTime.js b/components/DateAndTime.js
index cb98fb3..1bb1d98 100644
--- a/components/DateAndTime.js
+++ b/components/DateAndTime.js
@@ -1,11 +1,16 @@
 import { getWeekDay, getTime, getAMPM } from "../services/utils";
+import styles from "./DateAndTime.module.css";
 
-export const DateAndTime = ({ weatherData, systemUsed }) => (
-  <h2>
-    {`${getWeekDay(weatherData)}, ${getTime(
-      systemUsed,
-      weatherData.dt,
-      weatherData.timezone
-    )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
-  </h2>
-);
+export const DateAndTime = ({ weatherData, systemUsed }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2>
+        {`${getWeekDay(weatherData)}, ${getTime(
+          systemUsed,
+          weatherData.dt,
+          weatherData.timezone
+        )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
+      </h2>
+    </div>
+  );
+};
diff --git a/components/DateAndTime.module.css b/components/DateAndTime.module.css
new file mode 100644
index 0000000..a4de4e0
--- /dev/null
+++ b/components/DateAndTime.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+}