diff --git a/src/components/HourlyWeather.vue b/src/components/HourlyWeather.vue
index 4421f13..13d1ac9 100644
--- a/src/components/HourlyWeather.vue
+++ b/src/components/HourlyWeather.vue
@@ -1,8 +1,48 @@
-<template></template>
+<template>
+  <div class="hourly-weather">
+    <div class="container">
+      <div
+        class="hourly-temp"
+        v-for="(time, index) in filteredList"
+        :key="index"
+      >
+        <HourlyTemp :time="time" />
+      </div>
+    </div>
+  </div>
+</template>
 
 <script>
-export default {};
+import HourlyTemp from "./HourlyTemp";
+export default {
+  name: "HourlyWeather",
+  props: ["forecast"],
+  components: {
+    HourlyTemp,
+  },
+  computed: {
+    filteredList() {
+      return this.forecast.hourly.slice(1, 25);
+    },
+  },
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
+.hourly-weather {
+  padding: 30px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
+
+  .container {
+    display: flex;
+    max-width: 100vw;
+    overflow: scroll;
+    padding: 0;
+    margin: 0 20px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
 </style>
\ No newline at end of file