diff --git a/src/components/inputer.vue b/src/components/inputer.vue
index b7bd01e..504d260 100644
--- a/src/components/inputer.vue
+++ b/src/components/inputer.vue
@@ -1,14 +1,29 @@
 <template>
-	<div>
-		<textarea id="inputer" :value='rawTxt' @input='inputting' @scroll='syncStroll' @drop.stop.prevent='dragging' autofocus></textarea>
+	<div class="inputer-container" :class="{'fullscreen': fullscreen, 'preview': preview}">
+		<div class="inputer-content">
+			<textarea id="inputer" :value='rawTxt' @input='inputting' @scroll='syncStroll' @drop.stop.prevent='dragging' autofocus>
+			</textarea>
+			<line-number/>
+		</div>
 	</div>
 </template>
 
 <script>
+	import lineNumber from './lineNumber.vue';
+
 	export default {
+		components:{
+			lineNumber
+		},
 		computed: {
 			rawTxt () {
 				return this.$store.getters.articleRaw
+			},
+			fullscreen() {
+				return this.$store.state.fullscreen;
+			},
+			preview() {
+				return this.$store.state.preview;
 			}
 		},
 		methods: {
@@ -18,14 +33,18 @@
 			},
 			syncStroll (e) {
 				let outputer = document.querySelector('.outputer')
+				let lineContainer = document.querySelector('.line-container')
+				console.log(e.target.scrollTop);
 				outputer.scrollTop = e.target.scrollTop
+				console.log(lineContainer.style.top );
+				lineContainer.style.top = -e.target.scrollTop + 'px';
 			},
 			dragging (e) {
 				let self = this
-	      let dt = e.dataTransfer;
-	      let files = dt.files;
-	      let fileReader = new FileReader();
-	      fileReader.readAsText(files[0], 'UTF-8');
+	      		let dt = e.dataTransfer;
+	      		let files = dt.files;
+	      		let fileReader = new FileReader();
+	      ileReader.readAsText(files[0], 'UTF-8');
 	      fileReader.onloadend = function (e) {
 	        let value = e.target.result
 	        self.$store.dispatch('textInput', value)
@@ -37,25 +56,40 @@
 </script>
 
 <style scoped lang="less">
-	div {
+    div.inputer-container.fullscreen{
+    	width:100%;
+    }
+	div.inputer-container.preview{
+    	display:none;
+    }
+	div.inputer-container {
+		position:relative;
 		width: 50%;
 		height: 100%;
 		margin-right: 10px;
-		textarea {
-			box-sizing: border-box;
-			height: 100%;
-			width: 100%;
-	    vertical-align: top;
-	    padding: 15px;
-	    resize: none;
-	    border: none;
-	    background-color: #f5f5f5;
-	    outline: none;
-	    font-family: inherit;
-	    font-size: 18px;
-	    color: #616161;
-	    box-shadow: 4px 5px 3px #aaa;
-	    transition: all ease .3s;
+		overflow:hidden;
+		div.inputer-content{
+			margin-left:45px;
+			height:100%;
+			textarea {
+				position:relative;
+				z-index:99999;
+				box-sizing: border-box;
+				height: 100%;
+				width: 100%;
+	    		vertical-align: top;
+	    		padding: 15px 15px 15px 10px;
+	    		resize: none;
+	    		border: none;
+	    		background-color: #f5f5f5;
+	    		outline: none;
+	    		font-family: inherit;
+	    		font-size: 18px;
+	    		color: #616161;
+	    		box-shadow: 4px 5px 3px #aaa;
+	    		transition: all ease .3s;
+	    		line-height:26px;
+			}
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/components/lineNumber.vue b/src/components/lineNumber.vue
new file mode 100644
index 0000000..9bb55ec
--- /dev/null
+++ b/src/components/lineNumber.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="line-container">
+		<ul>
+			<li v-for="(line, index) in lineArr" class="line-item">
+				<span class="line-number">{{index + 1}}</span>
+				<pre class="line-content">{{line === '' ? ' ' : line}}</pre>
+			</li>
+		</ul>
+	</div>
+</template>
+
+
+<script>
+	export default{
+		name: 'lineNumber',
+		computed: {
+			lineArr: function() {
+				return this.$store.getters.articleLineRaw
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	div.line-container{
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		min-height:100%;
+		width: 100%;
+		margin:0;
+		padding-top:15px;
+		background:#cecece;
+		.line-bar{
+			position: absolute;
+
+		}
+		.line-content{
+			visibility: hidden;
+		}
+		ul{
+			height: 100%;
+    		padding: 0;
+    		margin-top: 0;
+			li{
+				list-style:none;
+				position:relative;
+				.line-number{
+					position: absolute;
+    				font-size: 14px;
+    				width: 35px;
+    				padding:0 5px;
+    				line-height:26px;
+    				text-align:right;
+    				overflow: hidden;
+    				color:#777;
+				}
+				.line-content{
+					font-size: 18px;
+    				line-height: 26px;
+    				margin: 0 17px 0 55px;
+    				padding: 0;
+    				display: inline-block;
+    				word-wrap: break-word;
+    				white-space: pre-wrap;
+    				word-break: normal;
+    				border: none;
+    				border-radius: 0;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/components/navBar.vue b/src/components/navBar.vue
index d4c2f3a..49dd950 100644
--- a/src/components/navBar.vue
+++ b/src/components/navBar.vue
@@ -1,19 +1,81 @@
 <template>
 	<nav>
 		<ul>
-			<li><button @click='showMenu'><i class="fa fa-bars"></i></button></li>
-			<li><button @click='insert("**Bold**")'><i class="fa fa-bold"></i></button></li>
-			<li><button @click='insert("*Italic*")'><i class="fa fa-italic"></i></button></li>
-			<li><button @click='insert("[Link](http://example.com/)")'><i class="fa fa-link"></i></button></li>
-			<li><button @click='insert("\n> ")'><i class="fa fa-quote-left"></i></button></li>
-			<li><button @click='insert("`code`")'><i class="fa fa-code"></i></button></li>
-			<li><button @click='insert("![Img](http://example.com/)")'><i class="fa fa-picture-o"></i></button></li>
-			<li><button @click='insert("\n- ")'><i class="fa fa-list-ul"></i></button></li>
-			<li><button @click='insert("\n# ")'><i class="fa fa-header"></i></button></li>
-			<li><button @click='insert("\n\n---\n\n")'><i class="fa fa-underline"></i></button></li>
-			<li><button @click='insert("\n\n| title | title | title |\n| --- | --- | --- |\n| item | item | item |")'><i class="fa fa-th"></i></button></li>
-			<li><button @click='redirect("https://github.com/jrainlau/markcook")'><i class="fa fa-github"></i></button></li>
-			<li><button @click='redirect("https://github.com/jrainlau/markcook/issues")'><i class="fa fa-question"></i></button></li>
+			<li>
+				<button title="Menu" @click='showMenu'>
+					<i class="fa fa-bars"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Bold" @click='insert("**Bold**")'>
+					<i class="fa fa-bold"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Italic" @click='insert("*Italic*")'>
+					<i class="fa fa-italic"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Link" @click='insert("[Link](http://example.com/)")'>
+					<i class="fa fa-link"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Quote" @click='insert("\n> ")'>
+					<i class="fa fa-quote-left"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Code" @click='insert("`code`")'>
+					<i class="fa fa-code"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Image" @click='insert("![Img](http://example.com/)")'>
+					<i class="fa fa-picture-o"></i>
+				</button>
+			</li>
+			<li>
+				<button title="List" @click='insert("\n- ")'>
+					<i class="fa fa-list-ul"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Headline" @click='insert("\n# ")'>
+					<i class="fa fa-header"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Underline" @click='insert("\n\n---\n\n")'>
+					<i class="fa fa-underline"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Table" @click='insert("\n\n| title | title | title |\n| --- | --- | --- |\n| item | item | item |")'>
+					<i class="fa fa-th"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Fullscreen" @click='showFullscreen' :class="{'active': fullscreen}">
+					<i class="fa fa-arrows-alt"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Preview" @click='showPreview' :class="{'active': preview}">
+					<i class="fa fa-columns"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Github" @click='redirect("https://github.com/jrainlau/markcook")'>
+					<i class="fa fa-github"></i>
+				</button>
+			</li>
+			<li>
+				<button title="Question" @click='redirect("https://github.com/jrainlau/markcook/issues")'>
+					<i class="fa fa-question"></i>
+				</button>
+			</li>
 		</ul>
 	</nav>
 </template>
@@ -35,6 +97,14 @@
 	}
 
 	export default {
+		computed: {
+			fullscreen() {
+        		return this.$store.state.fullscreen;
+      		},
+      		preview() {
+        		return this.$store.state.preview;
+      		}
+		},
 		methods: {
 			showMenu () {
 				this.$store.dispatch('showMenu')
@@ -44,7 +114,7 @@
 				let startPosition = inputer.selectionStart
 				let endPosition = inputer.selectionEnd
 				let oldContent = inputer.value
-				
+
 				inputer.focus()
 
 				let newContent = ''
@@ -100,6 +170,12 @@
 			},
 			redirect (url) {
 				window.open(url, '_blank')
+			},
+			showFullscreen(){
+				this.$store.commit('FULLSCREEN')
+			},
+			showPreview(){
+				this.$store.commit('PREVIEW')
 			}
 		}
 	}
@@ -135,6 +211,9 @@
 					background: none;
 					outline: none;
 					transition: all ease .3s;
+					&.active{
+						background: #00796B;
+					}
 					&:hover {
 						background: #00897B;
 					}
diff --git a/src/components/outputer.vue b/src/components/outputer.vue
index 760a481..3dc8f85 100644
--- a/src/components/outputer.vue
+++ b/src/components/outputer.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="outputer" v-html='ripeTxt'></div>
+	<div class="outputer" v-html='ripeTxt' :class="{'fullscreen': fullscreen, 'preview': preview}"></div>
 </template>
 
 <script>
@@ -12,6 +12,12 @@
     computed: {
       ripeTxt () {
         return this.$store.getters.articleMd
+      },
+      fullscreen() {
+        return this.$store.state.fullscreen;
+      },
+      preview() {
+        return this.$store.state.preview;
       }
     }
   }
@@ -35,4 +41,13 @@
     overflow-y: scroll;
     word-wrap: break-word;
 	}
+
+  div.outputer.fullscreen{
+      display:none
+  }
+
+  div.outputer.preview{
+      width:100%;
+      max-width:1200px;
+  }
 </style>
\ No newline at end of file
diff --git a/vuex/store.js b/vuex/store.js
index 2b1d06d..efc4aeb 100644
--- a/vuex/store.js
+++ b/vuex/store.js
@@ -31,6 +31,8 @@ const saveID = (state) => {
 export default new Vuex.Store({
 	state: {
 		showMenu: true,
+		fullscreen: false,
+		preview: false,
 		articleList: [
 			{
 				id: createID(),
@@ -75,7 +77,7 @@ export default new Vuex.Store({
 			for (let i = 0, len = state.articleList.length; i < len; i++) {
 				state.articleList[i].current = false
 			}
-			
+
 			let newOne = {
 				id: createID(),
 				content: 'Untitled\n---',
@@ -118,6 +120,18 @@ export default new Vuex.Store({
 				state.articleList = articleArr
 				state.articleList[0].current = true
 			}
+		},
+		FULLSCREEN(state) {
+			state.fullscreen = !state.fullscreen;
+			if(state.fullscreen && state.preview) {
+				state.preview = !state.preview
+			}
+		},
+		PREVIEW(state){
+			state.preview = !state.preview;
+			if(state.fullscreen && state.preview) {
+				state.fullscreen = !state.fullscreen;
+			}
 		}
 	},
 	actions: {
@@ -162,6 +176,9 @@ export default new Vuex.Store({
 		},
 		articleList: state => {
 			return state.articleList
+		},
+		articleLineRaw: (state, getters) => {
+			return getters.articleRaw.split('\n')
 		}
 	}
 })
\ No newline at end of file