diff --git a/src/components/ControlPanel/lineLog/components/image-item.vue b/src/components/ControlPanel/lineLog/components/image-item.vue
new file mode 100644
index 0000000..6b55d78
--- /dev/null
+++ b/src/components/ControlPanel/lineLog/components/image-item.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <sui-image :src="'https://bot.trj.tw/image/line_log_image/' + image" class="img-item"/>
+  </div>
+</template>
+
+<style lang="less" scope>
+.img-item {
+  width: 250px;
+}
+</style>
+
+<script>
+export default {
+  props: ['image']
+}
+</script>
diff --git a/src/components/ControlPanel/lineLog/components/message-item.vue b/src/components/ControlPanel/lineLog/components/message-item.vue
new file mode 100644
index 0000000..839700a
--- /dev/null
+++ b/src/components/ControlPanel/lineLog/components/message-item.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <TextItem v-if="type === 'text'" :message="msg" />
+    <ImageItem v-if="type === 'image'" :image="msg" />
+  </div>
+</template>
+
+<script>
+import TextItem from './text-item.vue'
+import ImageItem from './image-item.vue'
+export default {
+  props: ['type', 'msg'],
+  components: {
+    TextItem,
+    ImageItem
+  },
+  data () {
+    return {}
+  }
+}
+</script>
diff --git a/src/components/ControlPanel/lineLog/components/text-item.vue b/src/components/ControlPanel/lineLog/components/text-item.vue
new file mode 100644
index 0000000..bef79a2
--- /dev/null
+++ b/src/components/ControlPanel/lineLog/components/text-item.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script>
+export default {
+  props: ['message']
+}
+</script>
diff --git a/src/components/ControlPanel/lineLog/index.vue b/src/components/ControlPanel/lineLog/index.vue
index 8c81567..5c24e3e 100644
--- a/src/components/ControlPanel/lineLog/index.vue
+++ b/src/components/ControlPanel/lineLog/index.vue
@@ -1,16 +1,39 @@
 <template>
   <sui-container>
-    <div>test </div>
+    <sui-segment>
+      <sui-list divided>
+        <sui-list-item v-for="it in list" :key="it.id">
+          <sui-list-header>{{ it.user_name }}</sui-list-header>
+          <MessageItem :type="it.type" :msg="it.message" />
+        </sui-list-item>
+      </sui-list>
+    </sui-segment>
   </sui-container>
 </template>
 
 <script>
+import MessageItem from './components/message-item.vue'
+import axios from 'axios'
 
 export default {
   name: 'LineLog',
-  data () {
-    return {}
+  components: {
+    MessageItem
   },
-  mounted () {}
+  data () {
+    return {
+      list: []
+    }
+  },
+  mounted () {
+    let self = this
+    axios({
+      method: 'get',
+      url: 'https://bot.trj.tw/api/line/logs?max=100',
+      withCredentials: true
+    }).then(res => res.data).then(data => {
+      self.list = data.list
+    }).catch(err => console.log(err))
+  }
 }
 </script>