diff --git a/components/atoms/SessionArchivedHeader.vue b/components/atoms/SessionArchivedHeader.vue
new file mode 100644
index 00000000..1b8ee8e2
--- /dev/null
+++ b/components/atoms/SessionArchivedHeader.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="session-archived-header">
+    このセッションはアーカイブ済みです
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'SessionArchivedHeader'
+})
+export default class extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.session-archived-header {
+  padding: 4px;
+  background-color: #424242;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+}
+</style>
diff --git a/components/molecules/TrackList.vue b/components/molecules/TrackList.vue
index 6f97efa6..46d72e3b 100644
--- a/components/molecules/TrackList.vue
+++ b/components/molecules/TrackList.vue
@@ -71,7 +71,9 @@ export default class extends Vue {
   background-color: $bg-color;
 }
 #windowWrapper {
-  min-height: calc(100vh - 56px);
+  // 56px: Toolbar
+  // 12px: 再生中の曲の上margin
+  min-height: calc(100vh - 56px - 12px);
 }
 
 .v-subheader {
diff --git a/components/organisms/BottomController.vue b/components/organisms/BottomController.vue
index 88dc19cb..be42a9a3 100644
--- a/components/organisms/BottomController.vue
+++ b/components/organisms/BottomController.vue
@@ -2,7 +2,12 @@
   <div class="bottom-controller-wrapper">
     <div v-if="showController" class="bottom-controller elevation-5">
       <v-layout align-center justify-space-around>
-        <v-btn icon large @click="openDeviceSelectDialog">
+        <v-btn
+          icon
+          large
+          :disabled="isSessionArchived || !canControlPlayback"
+          @click="openDeviceSelectDialog"
+        >
           <v-icon>devices</v-icon>
         </v-btn>
         <v-btn icon :disabled="!canControlPlayback" @click="togglePlayback">
@@ -11,11 +16,15 @@
           </v-icon>
           <v-icon v-else color="accent" x-large>pause</v-icon>
         </v-btn>
-        <nuxt-link :to="searchPageUrl">
-          <v-btn icon large>
-            <v-icon>playlist_add</v-icon>
-          </v-btn>
-        </nuxt-link>
+        <v-btn
+          icon
+          large
+          nuxt
+          :to="searchPageUrl"
+          :disabled="isSessionArchived"
+        >
+          <v-icon>playlist_add</v-icon>
+        </v-btn>
       </v-layout>
     </div>
   </div>
@@ -36,7 +45,10 @@ import ActiveDeviceNotFoundDialog from '@/components/organisms/ActiveDeviceNotFo
   },
   computed: {
     ...mapState('pages/sessions/detail', ['session']),
-    ...mapGetters('pages/sessions/detail', ['canControlPlayback'])
+    ...mapGetters('pages/sessions/detail', [
+      'canControlPlayback',
+      'isSessionArchived'
+    ])
   }
 })
 export default class extends Vue {
diff --git a/components/organisms/TrackListContainer.vue b/components/organisms/TrackListContainer.vue
index 6bda1218..44f0d6e5 100644
--- a/components/organisms/TrackListContainer.vue
+++ b/components/organisms/TrackListContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="track-list-container-root">
+  <div>
     <template v-if="queue.tracks.length > 0">
       <track-list :queue="queue" :playback="playback" class="track-list" />
     </template>
@@ -44,9 +44,6 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-#track-list-container-root {
-  padding-top: 56px;
-}
 .track-list {
   padding-bottom: calc(6vmin + 56px);
   background-color: $bg-color;
diff --git a/pages/sessions/_id/index.vue b/pages/sessions/_id/index.vue
index 6a86fb20..4c342627 100644
--- a/pages/sessions/_id/index.vue
+++ b/pages/sessions/_id/index.vue
@@ -8,6 +8,10 @@
       />
 
       <div class="list-container">
+        <session-archived-header
+          v-if="isSessionArchived"
+          class="archived-header"
+        />
         <track-list-container />
       </div>
 
@@ -46,9 +50,11 @@ import BottomController from '@/components/organisms/BottomController.vue'
 import InterruptDetectedDialog from '@/components/organisms/InterruptDetectedDialog.vue'
 import { Device } from '@/api/v3/types'
 import ActiveDeviceNotFoundDialog from '@/components/organisms/ActiveDeviceNotFoundDialog.vue'
+import SessionArchivedHeader from '@/components/atoms/SessionArchivedHeader.vue'
 
 @Component({
   components: {
+    SessionArchivedHeader,
     ActiveDeviceNotFoundDialog,
     DeviceSelectDialog,
     TrackListContainer,
@@ -59,7 +65,7 @@ import ActiveDeviceNotFoundDialog from '@/components/organisms/ActiveDeviceNotFo
   },
   computed: {
     ...mapState('pages/sessions/detail', ['isInterruptDetectedDialogOpen']),
-    ...mapGetters('pages/sessions/detail', ['sessionName'])
+    ...mapGetters('pages/sessions/detail', ['sessionName', 'isSessionArchived'])
   },
   methods: {
     ...mapActions('pages/sessions/detail', [
@@ -180,4 +186,16 @@ export default class extends Vue {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.list-container {
+  padding-top: 56px;
+  position: relative;
+}
+
+.archived-header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+</style>
diff --git a/store/pages/sessions/detail.ts b/store/pages/sessions/detail.ts
index 43204392..64479f0a 100644
--- a/store/pages/sessions/detail.ts
+++ b/store/pages/sessions/detail.ts
@@ -44,11 +44,16 @@ export const getters = {
     return state.session.creator.id === rootState.user.me?.id
   },
   canControlPlayback(state: State, getters): boolean {
+    if (getters.isSessionArchived) return false
     return (
       getters.isMyOwnSession ||
       // eslint-disable-next-line camelcase
       (state.session?.allow_to_control_by_others ?? false)
     )
+  },
+  isSessionArchived(state: State): boolean {
+    if (!state.session) return false
+    return state.session.playback.state.type === 'ARCHIVED'
   }
 }