diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
new file mode 100644
index 0000000..4c63633
--- /dev/null
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { Token } from '@/lib/apis'
+import { formatDate } from '@/utils/date'
+import AIcon from '@/components/UI/AIcon.vue'
+import EmoineIcon from '@/components/UI/EmoineIcon.vue'
+import MenuModal from '@/components/UI/MenuModal.vue'
+import { MenuItem } from '@/components/UI/MenuModal.vue'
+import { useMenuModal } from '@/composables/useMenuModal'
+
+defineProps<{
+  token: Token
+}>()
+
+const menuItems: MenuItem[] = [
+  {
+    key: 'delete',
+    label: 'Delete',
+    icon: 'ph:trash',
+    onClick: async () => {
+      try {
+        //todo: deleteのAPIが生えてない
+        console.log('delete')
+      } catch {
+        console.error('error')
+      }
+    }
+  }
+]
+
+const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <emoine-icon />
+    <div :class="[$style.containerBase, $style.leftContainer]">
+      <p :class="$style.userId">{{ token.username }}</p>
+      <p :class="$style.description">{{ token.description }}</p>
+    </div>
+    <div :class="[$style.containerBase, $style.middleContainer]">
+      <p :class="$style.expireDate">
+        {{ formatDate(new Date(token.expireAt)) }}
+      </p>
+    </div>
+    <div :class="[$style.containerBase, $style.rightContainer]">
+      <button
+        ref="itemButtonRef"
+        :class="$style.dotsButton"
+        @click="toggleMenuModal"
+      >
+        <a-icon name="ph:dots-three-light" :size="32" />
+      </button>
+    </div>
+    <menu-modal v-if="isMenuModalOpen" :menu-items="menuItems" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  height: 3.75rem;
+  padding: 8px;
+  position: relative;
+}
+.containerBase {
+  display: flex;
+  align-items: center;
+  height: 70%;
+}
+.leftContainer {
+  flex-grow: 1;
+  border-right: 1px solid $color-secondary;
+  padding-right: 20px;
+}
+.userId {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-left: 20px;
+  color: $text-primary;
+}
+.description {
+  font-size: 1.25rem;
+  margin-left: 20px;
+  color: $text-secondary;
+}
+.middleContainer {
+  border-right: 1px solid $color-secondary;
+  padding: 0 1.25rem;
+  width: 8.75rem;
+}
+.expireDate {
+  color: $color-secondary;
+}
+.rightContainer {
+  padding: 0 1.25rem;
+  width: 5rem;
+}
+.dotsButton {
+  border-radius: 50%;
+  padding: 0.5rem;
+  &:hover {
+    background-color: $background-secondary;
+  }
+}
+</style>
diff --git a/src/components/EventDetail/EventTokenNew.vue b/src/components/EventDetail/EventTokenNew.vue
new file mode 100644
index 0000000..ffce44b
--- /dev/null
+++ b/src/components/EventDetail/EventTokenNew.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import BaseButton from '@/components/UI/BaseButton.vue'
+import BaseInput from '@/components/UI/BaseInput.vue'
+import BaseDateInput from '@/components/UI/BaseDateInput.vue'
+import AIcon from '@/components/UI/AIcon.vue'
+import { ref } from 'vue'
+import apis from '@/lib/apis'
+import { useRoute } from 'vue-router'
+import { getMeetingId } from '@/lib/parsePathParams'
+import EmoineIcon from '@/components/UI/EmoineIcon.vue'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const route = useRoute()
+const meetingId = getMeetingId(route.params.id)
+
+const userName = ref('')
+const description = ref('')
+const expireDate = ref('')
+
+const handleAddToken = async () => {
+  // todo: error handling
+  await apis.createToken({
+    username: userName.value,
+    meetingId: meetingId,
+    expireAt: expireDate.value + ':00Z', // fixme: https://github.com/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
+    description: description.value
+  })
+  userName.value = ''
+  description.value = ''
+  expireDate.value = ''
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <emoine-icon />
+    <div :class="$style.formContainer">
+      <base-input v-model="userName" placeholder="ユーザー名を入力" />
+      <base-input
+        v-model="description"
+        placeholder="説明文を入力"
+        :class="$style.description"
+      />
+      <base-date-input v-model="expireDate" />
+    </div>
+    <div :class="$style.buttonContainer">
+      <base-button type="primary" @click="handleAddToken">保存</base-button>
+      <base-button type="secondary" @click="emit('close')">
+        <a-icon name="basil:cross-solid" />
+      </base-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 3.75rem;
+  padding: 8px;
+}
+.formContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-grow: 1;
+  border-right: 1px solid $color-secondary;
+  height: 70%;
+  padding-right: 20px;
+  margin-left: 1.25rem;
+}
+.description {
+  flex-grow: 1;
+}
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+  height: 70%;
+}
+</style>
diff --git a/src/components/EventDetail/EventTokens.vue b/src/components/EventDetail/EventTokens.vue
new file mode 100644
index 0000000..c98ed58
--- /dev/null
+++ b/src/components/EventDetail/EventTokens.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { Token } from '@/lib/apis'
+import EventTokenItem from './EventTokenItem.vue'
+import AIcon from '@/components/UI/AIcon.vue'
+import { ref } from 'vue'
+import EventTokenNew from './EventTokenNew.vue'
+
+defineProps<{
+  tokens: Token[]
+}>()
+
+const isNewTokenOpen = ref(false)
+const toggleNewToken = () => {
+  isNewTokenOpen.value = !isNewTokenOpen.value
+}
+</script>
+
+<template>
+  <div>
+    <h2 :class="$style.heading">
+      <a-icon name="tabler:certificate" :size="56" color="#ff007f" />
+      <p>Tokens</p>
+    </h2>
+    <ul :class="$style.tokenList">
+      <li
+        v-for="token in tokens"
+        :key="token.token"
+        :class="$style.tokenListItem"
+      >
+        <event-token-item :token="token" />
+      </li>
+      <li :class="$style.newTokenButtonContainer">
+        <button
+          v-if="!isNewTokenOpen"
+          :class="$style.newTokenButton"
+          @click="toggleNewToken"
+        >
+          <a-icon name="mdi:plus-circle-outline" />
+          新しいトークンを追加
+        </button>
+        <event-token-new v-else @close="toggleNewToken" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tokenList {
+  list-style: none;
+  background-color: white;
+}
+.heading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.tokenListItem {
+  padding: 0.25rem 0;
+  margin-top: 1rem;
+  &:not(:last-child) {
+    border-bottom: 1px solid $background-secondary;
+  }
+}
+.newTokenButtonContainer {
+  display: flex;
+  justify-content: center;
+  padding: 4px 0px;
+}
+.newTokenButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 12px;
+  font-weight: bold;
+  color: $color-secondary;
+  text-decoration: none;
+  &:hover {
+    color: $color-primary;
+    background-color: $background-secondary;
+  }
+}
+.paginationBarContainer {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/UI/BaseButton.vue b/src/components/UI/BaseButton.vue
index dac64b9..76cda20 100644
--- a/src/components/UI/BaseButton.vue
+++ b/src/components/UI/BaseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ButtonType = 'primary'
+type ButtonType = 'primary' | 'secondary'
 const props = withDefaults(
   defineProps<{
     type?: ButtonType
@@ -17,13 +17,28 @@ const props = withDefaults(
 
 <style lang="scss" module>
 .button {
-  color: white;
-  background-color: $color-primary;
+  display: flex;
+  align-items: center;
   border-radius: 0.25rem;
   padding: 0.5rem;
   height: 1.875rem;
   font-size: 0.75rem;
 
+  &[data-type='primary'] {
+    color: white;
+    background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.1) 100%
+      ),
+      #ff007f;
+  }
+  &[data-type='secondary'] {
+    color: $color-secondary;
+    background-color: white;
+    border: 1px solid $color-secondary;
+  }
+
   &:hover {
     opacity: 0.7;
     transition: all 0.2s ease-in-out;
diff --git a/src/components/UI/BaseDateInput.vue b/src/components/UI/BaseDateInput.vue
new file mode 100644
index 0000000..ca631f9
--- /dev/null
+++ b/src/components/UI/BaseDateInput.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: string): void
+}>()
+
+const handleInput = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <input
+      :class="$style.input"
+      :data-is-blank="props.modelValue === ''"
+      type="datetime-local"
+      :value="props.modelValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid $color-secondary;
+  border-radius: 0.25rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  &:focus-within {
+    border-color: black;
+  }
+}
+.input {
+  &[data-is-blank='true'] {
+    color: $color-secondary;
+  }
+}
+</style>
diff --git a/src/components/UI/BaseInput.vue b/src/components/UI/BaseInput.vue
index 228ed5e..d02c920 100644
--- a/src/components/UI/BaseInput.vue
+++ b/src/components/UI/BaseInput.vue
@@ -33,5 +33,13 @@ const value = computed({
   border-radius: 0.25rem;
   height: 2.5rem;
   font-size: 0.875rem;
+  border: 1px solid $color-secondary;
+
+  &::placeholder {
+    color: $text-secondary;
+  }
+  &:focus {
+    border-color: black;
+  }
 }
 </style>
diff --git a/src/components/UI/DateChip.vue b/src/components/UI/DateChip.vue
index 18b2dff..01b5376 100644
--- a/src/components/UI/DateChip.vue
+++ b/src/components/UI/DateChip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getDateDiffText } from '@/utils/dateFormat'
+import { getDateDiffText } from '@/utils/date'
 
 type LiveStatus = 'isPlanned' | 'isStreaming' | 'isArchived'
 
diff --git a/src/components/UI/EmoineIcon.vue b/src/components/UI/EmoineIcon.vue
new file mode 100644
index 0000000..26d3a9b
--- /dev/null
+++ b/src/components/UI/EmoineIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      id="69b9c233-a578-4f3f-927b-d302c9c42dec 1"
+      width="46"
+      height="46"
+      rx="23"
+      fill="#AAAAAA"
+    />
+    <path
+      id="Subtract"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M32.7921 27.023C33.8164 26.219 35 25.29 35 23C35 16.3726 29.6274 11 23 11C19.2302 11 13.0571 13.4 13.0571 13.4C13.0571 13.4 11 20.1424 11 23C11 29.6274 16.3726 35 23 35C25.0833 35 27.0426 34.4691 28.75 33.5353C30.5538 32.1183 30.7068 31.3287 30.9053 30.3046C31.0094 29.7674 31.126 29.1657 31.5 28.375C31.7542 27.8377 32.2509 27.4478 32.7921 27.023ZM27.5 20.5454C27.5 17.587 25.0167 15.25 22.0289 15.25C19.5266 15.25 18.5 18.0678 18.5 20.5454C18.5 22.2262 19.9875 22.1267 21.6706 22.0141C22.1081 21.9849 22.5588 21.9547 23 21.9547C23.7352 21.9547 24.4047 22.0484 24.9893 22.1302C26.5444 22.3479 27.5 22.4817 27.5 20.5454Z"
+      fill="#F6F6F6"
+    />
+  </svg>
+</template>
diff --git a/src/components/UI/MenuModal.vue b/src/components/UI/MenuModal.vue
new file mode 100644
index 0000000..4fdbdc1
--- /dev/null
+++ b/src/components/UI/MenuModal.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import AIcon from '@/components/UI/AIcon.vue'
+
+export interface MenuItem {
+  key: string
+  label: string
+  icon: string
+  onClick: () => void
+}
+
+defineProps<{
+  menuItems: MenuItem[]
+}>()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <ul :class="$style.menuItemList">
+      <li v-for="item in menuItems" :key="item.key" :class="$style.menuItem">
+        <button :class="$style.itemButton" @click="item.onClick">
+          <a-icon :name="item.icon" :size="24" />
+          {{ item.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  background-color: white;
+  position: absolute;
+  bottom: -1rem;
+  right: 3rem;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+}
+.menuItemList {
+  list-style: none;
+}
+.itemButton {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.5rem;
+  &:hover {
+    background-color: $background-secondary;
+  }
+}
+</style>
diff --git a/src/composables/useMenuModal.ts b/src/composables/useMenuModal.ts
new file mode 100644
index 0000000..74375ec
--- /dev/null
+++ b/src/composables/useMenuModal.ts
@@ -0,0 +1,25 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export const useMenuModal = () => {
+  const isMenuModalOpen = ref(false)
+  const toggleMenuModal = () => {
+    isMenuModalOpen.value = !isMenuModalOpen.value
+  }
+
+  const itemButtonRef = ref<HTMLButtonElement | undefined>()
+  const handleClick = (e: MouseEvent) => {
+    if (!itemButtonRef.value) return
+    if (!itemButtonRef.value.contains(e.target as Node)) {
+      isMenuModalOpen.value = false
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('click', handleClick)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClick)
+  })
+
+  return [isMenuModalOpen, toggleMenuModal, itemButtonRef] as const
+}
diff --git a/src/lib/parsePathParams.ts b/src/lib/parsePathParams.ts
new file mode 100644
index 0000000..e99f1f2
--- /dev/null
+++ b/src/lib/parsePathParams.ts
@@ -0,0 +1,6 @@
+export const getMeetingId = (v: string | string[]) => {
+  if (Array.isArray(v)) {
+    v = v[0]
+  }
+  return v
+}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 35a0162..339bc7a 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -5,3 +5,4 @@ $background-primary: #f6f6f6;
 $background-secondary: #dfdede;
 
 $text-primary: #141414;
+$text-secondary: #bbbbbb;
diff --git a/src/utils/dateFormat.ts b/src/utils/date.ts
similarity index 82%
rename from src/utils/dateFormat.ts
rename to src/utils/date.ts
index 2e2704f..d3d4428 100644
--- a/src/utils/dateFormat.ts
+++ b/src/utils/date.ts
@@ -11,3 +11,7 @@ export function getDateDiffText(date: Date): string {
     return `${nowDate.diff(pastDate, 'day')}日前`
   return `${nowDate.diff(pastDate, 'hour')}時間前`
 }
+
+export const formatDate = (date: Date): string => {
+  return dayjs(date).format('YYYY/MM/DD')
+}