diff --git a/src/views/VoucherCreate.vue b/src/views/VoucherCreate.vue
index 86187dff3fd61cec216cce7e3cf041f81d7d79db..b1284e4b74d87805f84163cc630e71505804c245 100644
--- a/src/views/VoucherCreate.vue
+++ b/src/views/VoucherCreate.vue
@@ -1,54 +1,46 @@
 <template>
   <div class="voucher-create">
-    <v-card
-      :loading="isProcessing"
-    >
-      <v-card-title>프로그램 등록</v-card-title>
-      <v-card-text>
-        <v-alert
-          v-if="error.isError"
-          dense
-          text
-          type="error"
-        >
-          {{ error.message }}
-        </v-alert>
-        <program-field
-          :program.sync="voucher.program"
-        ></program-field>
-        <v-text-field
-          label="이용횟수"
-          v-model="voucher.quantity"
-        ></v-text-field>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn
-          color="error"
-          outlined
-          @click="cancel"
-        >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
-          취소
-        </v-btn>
-        <v-btn
-          color="primary"
-          outlined
-          @click="createVoucher"
-        >
-          <v-icon
-            left
-          >
-            mdi-content-save
-          </v-icon>
-          저장
-        </v-btn>
-      </v-card-actions>
-    </v-card>
+    <v-row>
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
+          <v-card-title>이용권 등록</v-card-title>
+          <v-card-text>
+            <v-alert
+              v-if="error.isError"
+              dense
+              text
+              type="error"
+            >
+              {{ error.message }}
+            </v-alert>
+            <program-field :program.sync="voucher.program"></program-field>
+            <v-text-field
+              label="이용횟수"
+              v-model="voucher.quantity"
+            ></v-text-field>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+              color="error"
+              outlined
+              @click="cancel"
+            >
+              <v-icon left>mdi-delete</v-icon>
+              취소
+            </v-btn>
+            <v-btn
+              color="primary"
+              outlined
+              @click="createVoucher"
+            >
+              <v-icon left>mdi-content-save</v-icon>
+              저장
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
diff --git a/src/views/VoucherDetail.vue b/src/views/VoucherDetail.vue
index 46310ace1baf44d5abeca90a57958cf4b895cc4f..f9e83ad94c872acb69a16524093035a43652a716 100644
--- a/src/views/VoucherDetail.vue
+++ b/src/views/VoucherDetail.vue
@@ -1,73 +1,69 @@
 <template>
   <div class="voucher-detail">
-    <v-card
-      :loading="isProcessing"
-    >
-      <v-card-title>이용권 정보</v-card-title>
-      <v-card-text>
-        <v-alert
-          v-if="error.isError"
-          dense
-          text
-          type="error"
-        >
-          {{ error.message }}
-        </v-alert>
-        <v-text-field
-          label="등록번호"
-          readonly
-          v-model="id"
-        ></v-text-field>
-        <program-field
-          :program.sync="voucher.program"
-        ></program-field>
-        <v-text-field
-          label="이용횟수"
-          v-model="voucher.quantity"
-        ></v-text-field>
-        <v-text-field
-          label="등록 시각"
-          readonly
-          v-model="voucher.createdAt"
-        ></v-text-field>
-        <v-text-field
-          label="최종 수정 시각"
-          readonly
-          v-model="voucher.updatedAt"
-        ></v-text-field>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn
-          color="error"
-          outlined
-          @click="deleteVoucher(id)"
-        >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
-          삭제
-        </v-btn>
-        <v-btn
-          color="primary"
-          outlined
-          @click="updateVoucher(id)"
-        >
-          <v-icon
-            left
-          >
-            mdi-content-save
-          </v-icon>
-          저장
-        </v-btn>
-      </v-card-actions>
-    </v-card>
+    <v-row>
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
+          <v-card-title>이용권 정보</v-card-title>
+          <v-card-text>
+            <v-alert
+              v-if="error.isError"
+              dense
+              text
+              type="error"
+            >
+              {{ error.message }}
+            </v-alert>
+            <v-text-field
+              label="등록번호"
+              readonly
+              v-model="id"
+            ></v-text-field>
+            <program-field
+              :program.sync="voucher.program"
+            ></program-field>
+            <v-text-field
+              label="이용횟수"
+              v-model="voucher.quantity"
+            ></v-text-field>
+            <v-text-field
+              label="등록 시각"
+              readonly
+              v-model="voucher.createdAt"
+            ></v-text-field>
+            <v-text-field
+              label="최종 수정 시각"
+              readonly
+              v-model="voucher.updatedAt"
+            ></v-text-field>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+              color="error"
+              outlined
+              @click="deleteVoucher(id)"
+            >
+              <v-icon left>mdi-delete</v-icon>
+              삭제
+            </v-btn>
+            <v-btn
+              color="primary"
+              outlined
+              @click="updateVoucher(id)"
+            >
+              <v-icon left>mdi-content-save</v-icon>
+              저장
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+
 import APISetting from '@/settings/api';
 import ProgramField from '@/components/ProgramField.vue';
 
@@ -89,6 +85,8 @@ export default {
         title: '',
       },
       quantity: '',
+      createdAt: '',
+      updatedAt: '',
     },
   }),
 
@@ -121,7 +119,10 @@ export default {
           const [json, res] = values;
           if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
           if (res.status !== 200) throw new Error(json.message);
-          this.voucher = json.voucher;
+          const { voucher } = json;
+          voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          voucher.updatedAt = moment(voucher.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.voucher = voucher;
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -146,7 +147,10 @@ export default {
           const [json, res] = values;
           if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
           if (res.status !== 200) throw new Error(json.message);
-          this.voucher = json.voucher;
+          const { voucher } = json;
+          voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          voucher.updatedAt = moment(voucher.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.voucher = voucher;
         })
         .catch((e) => {
           this.error.message = e.message;
diff --git a/src/views/VoucherList.vue b/src/views/VoucherList.vue
index 22196e6feff1ba435a5c23b449db8519b28368bb..8e756beb994e6aa960db9615c278010b965db83a 100644
--- a/src/views/VoucherList.vue
+++ b/src/views/VoucherList.vue
@@ -1,78 +1,78 @@
 <template>
   <div class="voucher-list">
-    <v-card>
-      <v-card-title>이용권 목록</v-card-title>
-      <v-card-text>
-        <v-row
-          justify="end"
-        >
-          <v-col
-            align-self="center"
-            cols="12"
-            sm="8"
-            md="9"
-            lg="9"
-            xl="10"
-          >
-            <v-btn
-              color="success"
-              outlined
-              @click="createVoucher"
-            >
-              <v-icon
-                left
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-card-title>이용권 목록</v-card-title>
+          <v-card-text>
+            <v-row>
+              <v-col
+                align-self="center"
+                cols="12"
+                sm="8"
+                md="9"
+                lg="9"
+                xl="10"
               >
-                mdi-plus
-              </v-icon>
-              새 이용권 등록
-            </v-btn>
-          </v-col>
-          <v-col
-            cols="12"
-            sm="4"
-            md="3"
-            lg="3"
-            xl="2"
-          >
-            <v-text-field
-              append-icon="mdi-magnify"
-              clearable
-              label="이용권 검색"
-              v-model="voucherList.searchKeyword"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-data-table
-          :headers="voucherList.headers"
-          item-key="id"
-          :items="voucherList.data"
-          :loading="isProcessing"
-          loading-text="데이터를 불러오는 중입니다."
-          :search="voucherList.searchKeyword"
-          no-results-text="일치하는 이용권을 찾지 못했습니다."
-        >
-          <template v-slot:item.action="{ item }">
-            <v-icon
-              small
-              class="mr-2"
-              @click="editVoucher(item.id)"
-            >
-              mdi-pencil
-            </v-icon>
-            <v-icon
-              small
-              @click="deleteVoucher(item.id)"
+                <v-btn
+                  color="success"
+                  outlined
+                  @click="createVoucher"
+                >
+                  <v-icon left>mdi-plus</v-icon>
+                  새 이용권 등록
+                </v-btn>
+              </v-col>
+              <v-col
+                cols="12"
+                sm="4"
+                md="3"
+                lg="3"
+                xl="2"
+              >
+                <v-text-field
+                  append-icon="mdi-magnify"
+                  clearable
+                  label="이용권 검색"
+                  v-model="voucherList.searchKeyword"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-data-table
+              :headers="voucherList.headers"
+              item-key="id"
+              :items="voucherList.data"
+              :loading="isProcessing"
+              loading-text="데이터를 불러오는 중입니다."
+              :search="voucherList.searchKeyword"
+              no-results-text="일치하는 이용권을 찾지 못했습니다."
             >
-              mdi-delete
-            </v-icon>
-          </template>
-        </v-data-table>
-      </v-card-text>
-    </v-card>
+              <template v-slot:item.action="{ item }">
+                <v-icon
+                  small
+                  class="mr-2"
+                  @click="editVoucher(item.id)"
+                >
+                  mdi-pencil
+                </v-icon>
+                <v-icon
+                  small
+                  @click="deleteVoucher(item.id)"
+                >
+                  mdi-delete
+                </v-icon>
+              </template>
+            </v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+
 import APISetting from '@/settings/api';
 
 export default {
@@ -98,6 +98,10 @@ export default {
           text: '이용횟수',
           value: 'quantity',
         },
+        {
+          text: '등록 시각',
+          value: 'createdAt',
+        },
         {
           text: '',
           value: 'action',
@@ -122,6 +126,10 @@ export default {
         })
         .then((json) => {
           this.voucherList.data = json.vouchers;
+          this.voucherList.data.forEach((voucher) => {
+            // eslint-disable-next-line no-param-reassign
+            voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          });
         })
         .catch((e) => {
           this.error.message = e.message;