diff --git a/src/components/Events/EventList.vue b/src/components/Events/EventList.vue
new file mode 100644
index 0000000..389f3f7
--- /dev/null
+++ b/src/components/Events/EventList.vue
@@ -0,0 +1,32 @@
+<template>
+  <section :class="$style.container">
+    <event-list-item v-for="event in events" :key="event.id" :event="event" />
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Event } from '/@/lib/apis'
+import EventListItem from './EventListItem.vue'
+
+export default defineComponent({
+  name: 'EventList',
+  components: {
+    EventListItem
+  },
+  props: {
+    events: {
+      type: Array as PropType<Event[]>,
+      default: []
+    }
+  }
+})
+</script>
+
+<style lang="scss" module>
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+  gap: 2rem;
+}
+</style>
diff --git a/src/components/Events/EventListItem.vue b/src/components/Events/EventListItem.vue
new file mode 100644
index 0000000..ea3cc06
--- /dev/null
+++ b/src/components/Events/EventListItem.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <router-link :class="$style.link" :to="`/events/${event.id}`">
+      <span :class="$style.name">{{ event.name }}</span>
+      <span :class="$style.date">({{ date }})</span>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { Event } from '/@/lib/apis'
+import { getFullDayString } from '/@/lib/date'
+
+export default defineComponent({
+  name: 'EventListItem',
+  props: {
+    event: {
+      type: Object as PropType<Event>,
+      required: true
+    }
+  },
+  setup(props) {
+    const date = computed(() =>
+      getFullDayString(new Date(props.event.duration.since))
+    )
+    return { date }
+  }
+})
+</script>
+
+<style lang="scss" module>
+.link {
+  text-decoration: none;
+}
+.name {
+  color: $color-text;
+  font-size: 3rem;
+}
+.date {
+  color: $color-text;
+  font-size: 1.5rem;
+  margin: 0 0.5em;
+}
+</style>
diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 0000000..bd4015f
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,15 @@
+export const getTimeString = (date: Date): string =>
+  date.getHours().toString().padStart(2, '0') +
+  ':' +
+  date.getMinutes().toString().padStart(2, '0')
+
+export const getDayString = (date: Date): string =>
+  (date.getMonth() + 1).toString().padStart(2, '0') +
+  '/' +
+  date.getDate().toString().padStart(2, '0')
+
+export const getFullDayString = (date: Date): string =>
+  date.getFullYear() + '/' + getDayString(date)
+
+export const getFullDayWithTimeString = (date: Date): string =>
+  getFullDayString(date) + ' ' + getTimeString(date)
diff --git a/src/pages/Events.vue b/src/pages/Events.vue
index db7a7c0..e49cd05 100644
--- a/src/pages/Events.vue
+++ b/src/pages/Events.vue
@@ -1,11 +1,41 @@
 <template>
-  <div>Events</div>
+  <page-container>
+    <page-title :class="$style.title">イベント一覧</page-title>
+    <event-list v-if="fetcherState === 'loaded'" :events="events" />
+    <p v-else>{{ fetcherState }}</p>
+  </page-container>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
+import { useStore } from '/@/store'
+import useFetcher from '/@/use/fetcher'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import PageTitle from '/@/components/Layout/PageTitle.vue'
+import EventList from '/@/components/Events/EventList.vue'
 
 export default defineComponent({
-  name: 'Events'
+  name: 'Events',
+  components: {
+    PageContainer,
+    PageTitle,
+    EventList
+  },
+  setup() {
+    const store = useStore()
+
+    const events = computed(() => store.state.events)
+    const { fetcherState } = useFetcher(events, () =>
+      store.dispatch.fetchEvents()
+    )
+
+    return { events, fetcherState }
+  }
 })
 </script>
+
+<style lang="scss" module>
+.title {
+  margin: 4rem 0;
+}
+</style>
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 8daf120..28edc87 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -1,6 +1,6 @@
 import { defineActions } from 'direct-vuex'
 import { rootActionContext } from '.'
-import apis, { Group } from '/@/lib/apis'
+import apis, { Group, Event } from '/@/lib/apis'
 
 export const actions = defineActions({
   async fetchGroups(context): Promise<Group[]> {
@@ -13,5 +13,16 @@ export const actions = defineActions({
     const res = await apis.getGroups()
     commit.setGroups(res.data)
     return res.data
+  },
+  async fetchEvents(context): Promise<Event[]> {
+    const { state, commit } = rootActionContext(context)
+
+    if (state.events !== null) {
+      return state.events
+    }
+
+    const res = await apis.getEvents()
+    commit.setEvents(res.data)
+    return res.data
   }
 })
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 91eef68..3aa705d 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -1,9 +1,12 @@
 import { defineMutations } from 'direct-vuex'
 import { S } from './state'
-import { Group } from '/@/lib/apis'
+import { Group, Event } from '/@/lib/apis'
 
 export const mutations = defineMutations<S>()({
   setGroups(state: S, groups: Group[]) {
     state.groups = groups
+  },
+  setEvents(state: S, events: Event[]) {
+    state.events = events
   }
 })
diff --git a/src/store/state.ts b/src/store/state.ts
index eb7b80a..b03bbe5 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -1,9 +1,11 @@
-import { Group } from '/@/lib/apis'
+import { Group, Event } from '/@/lib/apis'
 
 export interface S {
   groups: Group[] | null
+  events: Event[] | null
 }
 
 export const state: S = {
-  groups: null
+  groups: null,
+  events: null
 }