diff --git a/owner-vue/package.json b/owner-vue/package.json
index 6033c79..2b4a234 100644
--- a/owner-vue/package.json
+++ b/owner-vue/package.json
@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 8080",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "service": "node service.js"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@mdi/js": "^6.5.95",
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
+    "moment": "^2.29.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
@@ -26,8 +26,6 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "font-awesome": "^4.7.0",
-    "gulp": "^3.9.1",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
     "vue-cli-plugin-vuetify": "~2.4.2",
diff --git a/owner-vue/src/api/order.js b/owner-vue/src/api/order.js
new file mode 100644
index 0000000..fb44238
--- /dev/null
+++ b/owner-vue/src/api/order.js
@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export default {
+    requestPrevOrder(startDate, endDate, page) {
+        const options = {
+            params: {
+                startDate: startDate,
+                endDate: endDate,
+                page: page
+            }
+        }
+        return axios.get("http://localhost:8001/order-service/prevOrder", options);
+    },
+    requestOrder(orderDate, lastOrderId) {
+        const options = {
+            params: {
+                orderDate: orderDate,
+                lastOrderId: lastOrderId
+            }
+        }
+        return axios.get("http://localhost:8001/order-service/orderMain", options);
+    }
+}
\ No newline at end of file
diff --git a/owner-vue/src/components/DatePicker.vue b/owner-vue/src/components/DatePicker.vue
new file mode 100644
index 0000000..669644e
--- /dev/null
+++ b/owner-vue/src/components/DatePicker.vue
@@ -0,0 +1,55 @@
+<template>
+  <v-menu
+      v-model="isPop"
+      :close-on-content-click="false"
+      :nudge-right="40"
+      transition="scale-transition"
+      offset-y
+      min-width="auto"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-text-field
+          v-model="value"
+          :label="label"
+          prepend-icon="mdi-calendar"
+          readonly
+          v-bind="attrs"
+          v-on="on"
+      ></v-text-field>
+    </template>
+    <v-date-picker
+        v-model="value"
+        @input="input">
+    </v-date-picker>
+  </v-menu>
+</template>
+
+<script>
+const moment = require('moment');
+
+export default {
+  name: "DatePicker",
+  props: {
+    'label': String
+  },
+  data: function() {
+    return {
+      isPop: false,
+      value: moment().format('YYYY-MM-DD')
+    }
+  },
+  created: function() {
+    this.$emit('inputDate', this.value);
+  },
+  methods: {
+    input: function() {
+      this.isPop = false;
+      this.$emit('inputDate', this.value);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/owner-vue/src/components/OrderCard.vue b/owner-vue/src/components/OrderCard.vue
new file mode 100644
index 0000000..5b63bc4
--- /dev/null
+++ b/owner-vue/src/components/OrderCard.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-card>
+    <v-toolbar elevation="1" dense>
+      <v-toolbar-title>{{ userName }}</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn outlined color="grey grey lighten-1" small>상세보기</v-btn>
+    </v-toolbar>
+    <v-card-title>{{ itemNames.join(", ") }}</v-card-title>
+    <v-card-subtitle></v-card-subtitle>
+    <v-card-text>{{ orderTime }}</v-card-text>
+    <v-card-actions>
+      <v-btn v-if="orderStatus === 'PENDING'"
+          block depressed color="primary">
+        주문 대기
+      </v-btn>
+      <v-btn v-else-if="orderStatus === 'PLACED'"
+             block depressed color="primary">
+        주문 수령
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "OrderCard",
+  data: function() {
+    return {
+
+    };
+  },
+  props: {
+    orderId: Number,
+    userName: Number,
+    itemNames: [],
+    orderTime: String,
+    orderStatus: String
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/owner-vue/src/router/index.js b/owner-vue/src/router/index.js
index e7f6764..12f7d17 100644
--- a/owner-vue/src/router/index.js
+++ b/owner-vue/src/router/index.js
@@ -19,6 +19,16 @@ const routes = [
     name: 'menu',
     component: () => import('./../views/Menu')
   },
+  {
+    path: '/prev-order',
+    name: 'prev-order',
+    component: () => import('./../views/PrevOrder')
+  },
+  {
+    path: '/order',
+    name: 'order',
+    component: () => import('./../views/Order.vue')
+  }
 ]
 
 const router = new VueRouter({
diff --git a/owner-vue/src/views/Order.vue b/owner-vue/src/views/Order.vue
new file mode 100644
index 0000000..303a431
--- /dev/null
+++ b/owner-vue/src/views/Order.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="dashboard">
+    <v-subheader class="py-0 d-flex justify-space-between rounded-lg">
+      <h3>주문</h3>
+      <v-btn color="success" @click="search">
+        검색
+      </v-btn>
+    </v-subheader>
+    <br>
+
+    <v-row>
+      <date-picker :label=" '주문일' " @inputDate="inputDate"></date-picker>
+    </v-row>
+
+    <v-row>
+      <v-col v-for="card in cards" cols="4" :key="card.orderId">
+        <order-card
+            :order-id="card.orderId"
+            :userName="card.userName"
+            :itemNames="card.itemNames"
+            :orderTime="card.orderTime"
+            :orderStatus="card.orderStatus"
+        >
+        </order-card>
+      </v-col>
+    </v-row>
+
+    <br><br><br>
+    <v-row justify="center" v-if="showButton">
+      <v-btn rounded outlined color="primary"
+             @click="more">더보기</v-btn>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import OrderApi from '../api/order.js';
+
+import OrderCard from '../components/OrderCard.vue'
+import DatePicker from "@/components/DatePicker";
+
+export default {
+  name: "Order",
+  components: {
+    OrderCard,
+    DatePicker
+  },
+  mounted() {
+    this.search();
+  },
+  data: () => {
+    return {
+      date: '',
+      cards: [],
+      lastOrderId: null,
+      showButton: false
+    }
+  },
+  methods: {
+    search: function() {
+      this.cards = [];
+      this.lastOrderId = null;
+      OrderApi.requestOrder(this.date, this.lastOrderId)
+        .then( (response) => {
+          this.renderCard(response.data);
+        })
+        .catch( (error) => {
+          console.log(error);
+        })
+    },
+    renderCard: function (json) {
+      const orders = json.data;
+      const size = orders.length;
+
+      if (size === 0) {
+        alert("검색 데이터가 없습니다.");
+        this.showButton = false;
+      } else {
+        this.showButton = true;
+      }
+
+      orders.forEach( (order, index) => {
+        if (index === (size - 1)) {
+          this.lastOrderId = order.orderId;
+        }
+
+        let orderItemNames = []
+        order.orderItemResponses.forEach( (orderItem) => {
+          orderItemNames.push(orderItem.itemId);
+        })
+
+        this.cards.push({
+          orderId: order.orderId,
+          userName: order.orderId,
+          itemNames: orderItemNames,
+          orderTime: order.orderTime,
+          orderStatus: order.orderStatus
+        })
+      });
+    },
+    inputDate: function(value) {
+      this.date = value;
+    },
+    more: function() {
+      OrderApi.requestOrder(this.date, this.lastOrderId)
+          .then( (response) => {
+            this.renderCard(response.data);
+          })
+          .catch( (error) => {
+            console.log(error);
+          })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/owner-vue/src/views/PrevOrder.vue b/owner-vue/src/views/PrevOrder.vue
new file mode 100644
index 0000000..be67d30
--- /dev/null
+++ b/owner-vue/src/views/PrevOrder.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="dashboard">
+    <v-subheader class="py-0 d-flex justify-space-between rounded-lg">
+      <h3>지난 주문</h3>
+      <v-btn color="success" v-on:click="search">
+        검색
+      </v-btn>
+    </v-subheader>
+    <br>
+
+    <v-row>
+      <date-picker :label=" '시작일' " @inputDate="inputStartDate"></date-picker>
+      <date-picker :label=" '종료일' " @inputDate="inputEndDate"></date-picker>
+    </v-row>
+
+    <v-row>
+      <div class="subtitle-1">{{startDate}} ~ {{endDate}} 내역</div>
+    </v-row>
+    <br>
+
+    <v-data-table
+        :headers="headers"
+        :items="orders"
+        :items-per-page="itemsPerPage"
+        hide-default-footer
+        class="elevation-1"
+    >
+    </v-data-table>
+    <div class="text-center pt-2">
+      <v-pagination
+          v-model="page"
+          :length="pageCount"
+          :total-visible="totalVisible"
+      ></v-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import orderApi from '../api/order.js';
+
+import DatePicker from "@/components/DatePicker";
+
+const moment = require('moment');
+
+export default {
+  name: "PrevOrder",
+  components: {
+    'date-picker': DatePicker
+  },
+  mounted: function() {
+    orderApi.requestPrevOrder(this.startDate, this.endDate, this.page - 1)
+        .then( (response) => {
+          this.renderList(response.data);
+        })
+        .catch( (error) => {
+          console.log(error);
+        });
+  },
+  watch: {
+    "page": function (newPage) {
+      orderApi.requestPrevOrder(this.startDate, this.endDate, newPage - 1)
+          .then( (response) => {
+            this.renderList(response.data);
+          })
+          .catch( (error) => {
+            console.log(error);
+            console.log(error.response.data);
+          });
+    }
+  },
+  data: function() {
+    return {
+      // date
+      startDate: '',
+      endDate: '',
+
+      // pagination
+      page: 1,
+      pageCount: 1,
+      itemsPerPage: 10,
+      totalVisible: 10,
+
+      // data table
+      headers: [
+        {
+          text: '주문번호',
+          align: 'start',
+          sortable: false,
+          value: 'orderId',
+        },
+        { text: '주문상태', value: 'orderStatus' },
+        { text: '주문시간', value: 'orderTime' },
+        { text: '주문상품', value: 'orderItemNames' },
+        { text: '결제금액', value: 'orderPrice' },
+        { text: '닉네임', value: 'userName' },
+      ],
+      orders: [],
+    }
+  },
+
+  methods: {
+    search: function() {
+      if(!this.checkDate()) return;
+
+      orderApi.requestPrevOrder(this.startDate, this.endDate, this.page - 1)
+          .then( (response) => {
+            this.renderList(response.data);
+          })
+          .catch( (error) => {
+            console.log(error);
+          });
+    },
+    renderList: function(json) {
+      const orders = json.data.orders;
+
+      this.orders = [];
+      orders.forEach(order => {
+        let orderItemNames = [];
+        order.orderItems.forEach(orderItem => {
+          orderItemNames.push(orderItem.orderItemId);
+        })
+
+        this.orders.push({
+          orderId: order.orderId,
+          orderStatus: order.orderStatus,
+          orderTime: order.orderTime,
+          orderItemNames: orderItemNames.join(", "),
+          orderPrice: order.orderPrice,
+          userName: order.userName
+        });
+      })
+
+      // pagination setting
+      const page = json.data.page;
+      this.page = page.startPage + 1;
+      this.pageCount = page.totalPage;
+    },
+    checkDate: function() {
+      if (!this.startDate || !this.endDate) {
+        alert("시작일과 종료일을 입력해주세요.");
+        return false;
+      }
+
+      if (moment(this.startDate).isAfter(this.endDate)) {
+        alert("시작일은 종료일보다 클 수 없습니다.");
+        return false;
+      }
+
+      return true;
+    },
+    inputStartDate: function(value) {
+      this.startDate = value;
+    },
+    inputEndDate: function(value) {
+      this.endDate = value;
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file