diff --git a/frontend/components/containers/annotation/GuidelineButton.vue b/frontend/components/containers/annotation/GuidelineButton.vue
index eaa40b43..27c0b260 100644
--- a/frontend/components/containers/annotation/GuidelineButton.vue
+++ b/frontend/components/containers/annotation/GuidelineButton.vue
@@ -1,27 +1,39 @@
 <template>
-  <base-modal
-    text="Show guideline"
-  >
-    <template v-if="currentProject" v-slot="slotProps">
+  <div>
+    <v-btn
+      class="text-capitalize"
+      outlined
+      @click="dialog=true"
+    >
+      Show guideline
+    </v-btn>
+    <base-dialog :dialog="dialog">
       <guideline-card
+        v-if="currentProject"
         :guideline-text="currentProject.guideline"
-        @close="slotProps.close"
+        @close="dialog=false"
       />
-    </template>
-  </base-modal>
+    </base-dialog>
+  </div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import BaseModal from '@/components/molecules/BaseModal'
+import BaseDialog from '@/components/molecules/BaseDialog'
 import GuidelineCard from '@/components/organisms/annotation/GuidelineCard'
 
 export default {
   components: {
-    BaseModal,
+    BaseDialog,
     GuidelineCard
   },
 
+  data() {
+    return {
+      dialog: false
+    }
+  },
+
   computed: {
     ...mapGetters('projects', ['currentProject'])
   },
diff --git a/frontend/components/organisms/annotation/GuidelineCard.vue b/frontend/components/organisms/annotation/GuidelineCard.vue
index ffefffe8..4f3bda5a 100644
--- a/frontend/components/organisms/annotation/GuidelineCard.vue
+++ b/frontend/components/organisms/annotation/GuidelineCard.vue
@@ -1,28 +1,27 @@
 <template>
-  <v-card>
-    <v-card-title
-      class="headline grey lighten-2"
-      primary-title
-    >
-      Annotation Guideline
-    </v-card-title>
-
-    <v-card-text>
+  <base-card
+    title="Annotation Guideline"
+    cancel-text="Close"
+    @cancel="close"
+  >
+    <template #content>
       <viewer
         :value="guidelineText"
       />
-    </v-card-text>
-  </v-card>
+    </template>
+  </base-card>
 </template>
 
 <script>
 import 'tui-editor/dist/tui-editor-contents.css'
 import 'highlight.js/styles/github.css'
 import { Viewer } from '@toast-ui/vue-editor'
+import BaseCard from '@/components/molecules/BaseCard'
 
 export default {
   components: {
-    Viewer
+    Viewer,
+    BaseCard
   },
 
   props: {
@@ -31,6 +30,12 @@ export default {
       default: '',
       required: true
     }
+  },
+
+  methods: {
+    close() {
+      this.$emit('close')
+    }
   }
 }
 </script>