diff --git a/packages/vuerd-app/src/components/Icon.vue b/packages/vuerd-app/src/components/Icon.vue
index 2e42091c..b342e7a5 100644
--- a/packages/vuerd-app/src/components/Icon.vue
+++ b/packages/vuerd-app/src/components/Icon.vue
@@ -49,6 +49,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .svg-icon {
+  display: inline-flex;
   transition: fill 0.15s;
 }
 </style>
diff --git a/packages/vuerd-app/src/components/Sash.vue b/packages/vuerd-app/src/components/Sash.vue
index d35c456e..0ac1008e 100644
--- a/packages/vuerd-app/src/components/Sash.vue
+++ b/packages/vuerd-app/src/components/Sash.vue
@@ -1,4 +1,4 @@
-<script lang="tsx">
+<script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { globalEvent, Move } from '@/helpers/event.helper';
 
@@ -29,7 +29,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const classMap = computed(() => ({
-      sash: true,
       vertical: props.vertical,
       horizontal: props.horizontal,
     }));
@@ -51,6 +50,11 @@ export default defineComponent({
       left: `${centerLeft.value}px`,
     }));
 
+    const lineStyleMap = computed(() => ({
+      top: `${Math.abs(centerTop.value)}px`,
+      left: `${Math.abs(centerLeft.value)}px`,
+    }));
+
     const onMousedown = (event: MouseEvent) => {
       emit('mousedownSash', event);
       globalEvent.drag$.subscribe(move => {
@@ -59,17 +63,22 @@ export default defineComponent({
       });
     };
 
-    return () => (
-      <div
-        class={classMap.value}
-        style={styleMap.value}
-        onMousedown={onMousedown}
-      />
-    );
+    return {
+      classMap,
+      styleMap,
+      lineStyleMap,
+      onMousedown,
+    };
   },
 });
 </script>
 
+<template lang="pug">
+.sash(:class="classMap" :style="styleMap" @mousedown="onMousedown")
+  .line-container(:class="classMap")
+    .line(:class="classMap" :style="lineStyleMap")
+</template>
+
 <style scoped lang="scss">
 $size-sash: 5px;
 
@@ -88,5 +97,41 @@ $size-sash: 5px;
     height: $size-sash;
     cursor: ns-resize;
   }
+
+  .line-container {
+    position: relative;
+    pointer-events: none;
+
+    &.vertical {
+      height: 100%;
+    }
+
+    &.horizontal {
+      width: 100%;
+    }
+
+    .line {
+      position: absolute;
+      background-color: var(--sash-background);
+
+      &.vertical {
+        width: 1px;
+        height: 100%;
+      }
+
+      &.horizontal {
+        width: 100%;
+        height: 1px;
+      }
+    }
+  }
+
+  &:hover {
+    background-color: var(--sash-foreground);
+
+    .line {
+      background-color: var(--sash-foreground);
+    }
+  }
 }
 </style>
diff --git a/packages/vuerd-app/src/components/editor/Editor.vue b/packages/vuerd-app/src/components/editor/Editor.vue
index 2f606e80..e9dff548 100644
--- a/packages/vuerd-app/src/components/editor/Editor.vue
+++ b/packages/vuerd-app/src/components/editor/Editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, computed, watch, onMounted } from 'vue';
+import { defineComponent, computed, watch, onMounted, ref } from 'vue';
 import { useViewportStore } from '@/store/ui/viewport.store';
 import { useViewStore, ViewNode } from '@/store/view';
 import SplitView from '@/components/editor/SplitView.vue';
@@ -8,6 +8,10 @@ import {
   resetHeightRatio,
   resetSize,
 } from '@/store/view/helper';
+import { Bus, eventBus } from '@/helpers/eventBus.helper';
+import { useUnsubscribe } from '@/hooks/useUnsubscribe';
+import { fromEvent, Subscription } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 
 export default defineComponent({
   components: {
@@ -22,17 +26,41 @@ export default defineComponent({
   setup(props) {
     const [viewState] = useViewStore();
     const [viewportState] = useViewportStore();
+    const { push } = useUnsubscribe();
+    const elRef = ref<HTMLElement | null>(null);
+
+    const dragover$ = fromEvent<DragEvent>(window, 'dragover');
+    let subDragover: Subscription | null | undefined = null;
+
     const styleMap = computed(() => ({
       width: `${props.width}px`,
       height: `${viewportState.height}px`,
     }));
 
     const onDragover = (event: DragEvent) => {
-      if (event.dataTransfer) {
-        event.dataTransfer.dropEffect = 'move';
+      event.dataTransfer && (event.dataTransfer.dropEffect = 'move');
+    };
+
+    const onDragoverTrack = (event: MouseEvent) => {
+      if (!elRef.value) return;
+      const { x, y, width, height } = elRef.value.getBoundingClientRect();
+      const clientX = event.clientX - x;
+      const clientY = event.clientY - y;
+      if (clientX < 0 || clientY < 0 || clientX > width || clientY > height) {
+        eventBus.emit(Bus.EditorViewer.dropViewEnd);
       }
     };
 
+    const onEditorDragstart = () => {
+      subDragover = dragover$
+        .pipe(throttleTime(100))
+        .subscribe(onDragoverTrack);
+    };
+
+    const onEditorDragend = () => {
+      subDragover?.unsubscribe();
+    };
+
     watch(
       () => props.width,
       width => {
@@ -49,6 +77,11 @@ export default defineComponent({
       }
     );
 
+    push(
+      eventBus.on(Bus.Editor.dragstart).subscribe(onEditorDragstart),
+      eventBus.on(Bus.Editor.dragend).subscribe(onEditorDragend)
+    );
+
     onMounted(() => {
       viewState.root.width = props.width;
       viewState.root.height = viewportState.height;
@@ -57,6 +90,7 @@ export default defineComponent({
 
     return {
       root: viewState.root as ViewNode,
+      elRef,
       styleMap,
       onDragover,
     };
@@ -65,7 +99,12 @@ export default defineComponent({
 </script>
 
 <template lang="pug">
-.editor(:style="styleMap" @dragover.prevent="onDragover" @drop.prevent)
+.editor(
+  :style="styleMap"
+  ref="elRef"
+  @dragover.prevent="onDragover"
+  @drop.prevent
+)
   SplitView(:node="root")
 </template>
 
diff --git a/packages/vuerd-app/src/components/editor/SplitView.vue b/packages/vuerd-app/src/components/editor/SplitView.vue
index 4d992ace..7b5dc8de 100644
--- a/packages/vuerd-app/src/components/editor/SplitView.vue
+++ b/packages/vuerd-app/src/components/editor/SplitView.vue
@@ -28,10 +28,9 @@ export default defineComponent({
     let lastClientX = 0;
     let lastClientY = 0;
 
-    const getClassMap = (node: ViewNode, index: number) => ({
+    const getClassMap = (node: ViewNode) => ({
       vertical: node.vertical,
       horizontal: node.horizontal,
-      left: node.vertical && index,
     });
 
     const getStyleMap = (node: ViewNode) => ({
@@ -124,14 +123,12 @@ export default defineComponent({
 
       if (props.node.vertical) {
         if (movementX < 0) {
-          // left
           moveWidth(
             event,
             props.node.children[index - 1],
             props.node.children[index]
           );
         } else {
-          // right
           moveWidth(
             event,
             props.node.children[index],
@@ -140,14 +137,12 @@ export default defineComponent({
         }
       } else if (props.node.horizontal) {
         if (movementY < 0) {
-          // top
           moveHeight(
             event,
             props.node.children[index - 1],
             props.node.children[index]
           );
         } else {
-          // bottom
           moveHeight(
             event,
             props.node.children[index],
@@ -168,11 +163,10 @@ export default defineComponent({
 </script>
 
 <template lang="pug">
-.split-view(:class="getClassMap(node, 0)" :style="getStyleMap(node)")
+.split-view(:class="getClassMap(node)" :style="getStyleMap(node)")
   .view(
     v-for="(childNode, index) in node.children"
     :key="childNode.id"
-    :class="getClassMap(childNode, index)"
     :style="getStyleMap(childNode)"
   )
     Sash(
@@ -200,14 +194,6 @@ export default defineComponent({
 
   .view {
     position: relative;
-
-    &.left {
-      border-left: var(--sash-background) solid 1px;
-    }
-
-    &.top {
-      border-top: var(--sash-background) solid 1px;
-    }
   }
 }
 </style>
diff --git a/packages/vuerd-app/src/components/editor/ViewerTab.vue b/packages/vuerd-app/src/components/editor/ViewerTab.vue
index 2c2d9777..1b762f81 100644
--- a/packages/vuerd-app/src/components/editor/ViewerTab.vue
+++ b/packages/vuerd-app/src/components/editor/ViewerTab.vue
@@ -42,9 +42,9 @@ export default defineComponent({
       height: `${SIZE_VIEW_TAB_HEIGHT}px`,
     }));
 
-    let draggableListener: Subscription[] = [];
+    const draggable$: Subject<DragEvent> = new Subject();
     let dragenter$: Observable<DragEvent> | null = null;
-    let draggable$: Subject<DragEvent> = new Subject();
+    let draggableListener: Subscription[] = [];
     let subDragenter: Subscription | null | undefined = null;
     let subDraggable: Subscription | null | undefined = null;
 
@@ -89,7 +89,7 @@ export default defineComponent({
       viewActions.tabDraggableStart(tab);
       emit('dragstart', event);
       eventBus.emit(Bus.EditorTab.draggableStart);
-      eventBus.emit(Bus.TreeNode.draggableStart);
+      eventBus.emit(Bus.OpenFile.draggableStart);
       eventBus.emit(Bus.Editor.dragstart);
       event.dataTransfer && event.dataTransfer.setData('text/plain', tab.id);
     };
@@ -97,7 +97,7 @@ export default defineComponent({
     const onDragend = () => {
       eventBus.emit(Bus.EditorViewer.dropEnd, viewState.draggableTab);
       eventBus.emit(Bus.EditorTab.draggableEnd);
-      eventBus.emit(Bus.TreeNode.draggableEnd);
+      eventBus.emit(Bus.OpenFile.draggableEnd);
       eventBus.emit(Bus.Editor.dragend);
       viewActions.tabDraggableEnd();
     };
@@ -242,7 +242,7 @@ export default defineComponent({
 
       .name {
         padding-right: 7px;
-        font-size: 0.875rem;
+        @apply text-sm;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/vuerd-app/src/components/sidebar/Sidebar.vue b/packages/vuerd-app/src/components/sidebar/Sidebar.vue
index c5fca31e..4e946df7 100644
--- a/packages/vuerd-app/src/components/sidebar/Sidebar.vue
+++ b/packages/vuerd-app/src/components/sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Explorer from '@/components/sidebar/Explorer.vue';
+import Explorer from '@/components/sidebar/explorer/Explorer.vue';
 
 export default defineComponent({
   components: {
diff --git a/packages/vuerd-app/src/components/sidebar/Explorer.vue b/packages/vuerd-app/src/components/sidebar/explorer/Explorer.vue
similarity index 92%
rename from packages/vuerd-app/src/components/sidebar/Explorer.vue
rename to packages/vuerd-app/src/components/sidebar/explorer/Explorer.vue
index a6d8e6d5..055368b4 100644
--- a/packages/vuerd-app/src/components/sidebar/Explorer.vue
+++ b/packages/vuerd-app/src/components/sidebar/explorer/Explorer.vue
@@ -2,18 +2,20 @@
 import { defineComponent, toRefs } from 'vue';
 
 import Title from '@/components/sidebar/Title.vue';
-import TreeNode from '@/components/sidebar/TreeNode.vue';
+import TreeNode from '@/components/sidebar/explorer/TreeNode.vue';
 import { useTreeStore } from '@/store/tree';
 import { fromEvent } from 'rxjs';
 import { useUnsubscribe } from '@/hooks/useUnsubscribe';
 import { useExplorerKeymap } from '@/hooks/useExplorerKeymap';
 import Contextmenu from '@/components/Contextmenu.vue';
 import { useExplorerContextmenu } from '@/hooks/useExplorerContextmenu';
+import OpenFile from '@/components/sidebar/explorer/OpenFile.vue';
 
 export default defineComponent({
   components: {
     Title,
     TreeNode,
+    OpenFile,
     Contextmenu,
   },
   setup() {
@@ -57,6 +59,7 @@ export default defineComponent({
 .explorer(:class="{focus}" @mousedown="onFocusin" @contextmenu="onContextmenu")
   Title(label="Explorer")
   Title(label="Open Files")
+  OpenFile
   Title(label="Workspace")
   TreeNode(:node="root")
 
diff --git a/packages/vuerd-app/src/components/sidebar/explorer/OpenFile.vue b/packages/vuerd-app/src/components/sidebar/explorer/OpenFile.vue
new file mode 100644
index 00000000..9994f8ba
--- /dev/null
+++ b/packages/vuerd-app/src/components/sidebar/explorer/OpenFile.vue
@@ -0,0 +1,215 @@
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue';
+import Icon from '@/components/Icon.vue';
+import { useViewStore, Tab, ViewNode } from '@/store/view';
+import { tabGroups } from '@/store/view/helper';
+import { fromEvent, Subscription, Subject } from 'rxjs';
+import { throttleTime, debounceTime } from 'rxjs/operators';
+import { eventBus, Bus } from '@/helpers/eventBus.helper';
+import { getData, findParentLiByElement } from '@/helpers';
+import { useUnsubscribe } from '@/hooks/useUnsubscribe';
+
+export default defineComponent({
+  components: {
+    Icon,
+  },
+  setup() {
+    const [viewState, viewActions] = useViewStore();
+    const { push } = useUnsubscribe();
+    const elRef = ref<HTMLElement | null>(null);
+    const groups = computed(() => tabGroups(viewState.root));
+
+    const draggable$: Subject<DragEvent> = new Subject();
+    let draggableListener: Subscription[] = [];
+
+    const getClassMap = (group: ViewNode, tab: Tab) => ({
+      draggable:
+        viewState.draggableTab &&
+        viewState.draggableTab.viewNode?.id === group.id &&
+        viewState.draggableTab.id === tab.id,
+      active: tab.active,
+    });
+
+    const onActive = (view: ViewNode, tab?: Tab) => {
+      viewActions.tabActive({ view, tab });
+    };
+
+    const onClose = (view: ViewNode, tab: Tab) => {
+      viewActions.tabClose({ view, tab });
+    };
+
+    const onMousedown = () => {
+      const selection = window.getSelection();
+      selection && selection.removeAllRanges();
+    };
+
+    const onDragoverGroup = (event: DragEvent) => {
+      draggable$.next(event);
+    };
+
+    const onDraggableStart = () => {
+      if (!elRef.value) return;
+
+      const list = elRef.value.querySelectorAll('.draggable');
+      list.forEach((li: Element) => {
+        draggableListener.push(
+          fromEvent<DragEvent>(li as HTMLElement, 'dragover')
+            .pipe(throttleTime(300))
+            .subscribe(onDragoverGroup)
+        );
+      });
+    };
+
+    const onDraggableEnd = () => {
+      draggableListener.forEach((draggable: Subscription) =>
+        draggable.unsubscribe()
+      );
+      draggableListener = [];
+    };
+
+    const onDragover = (event: DragEvent) => {
+      const li = findParentLiByElement(event.target as HTMLElement);
+      if (li && li.dataset.id && li.dataset.viewId && viewState.draggableTab) {
+        const view = getData(groups.value, li.dataset.viewId);
+        if (!view) return;
+
+        const tab = getData(view.tabs, li.dataset.id);
+        if (!tab) return;
+
+        viewActions.tabMove({ view, tab });
+      }
+    };
+
+    const onDragstart = (event: DragEvent, view: ViewNode, tab: Tab) => {
+      tab.viewNode = view;
+      viewActions.tabDraggableStart(tab);
+      onDraggableStart();
+      eventBus.emit(Bus.EditorTab.draggableStart);
+      eventBus.emit(Bus.EditorViewer.dropStart);
+      eventBus.emit(Bus.Editor.dragstart);
+      event.dataTransfer && event.dataTransfer.setData('text/plain', tab.id);
+    };
+
+    const onDragend = () => {
+      eventBus.emit(Bus.EditorViewer.dropEnd, viewState.draggableTab);
+      eventBus.emit(Bus.EditorTab.draggableEnd);
+      eventBus.emit(Bus.Editor.dragend);
+      onDraggableEnd();
+      viewActions.tabDraggableEnd();
+    };
+
+    push(
+      eventBus.on(Bus.OpenFile.draggableStart).subscribe(onDraggableStart),
+      eventBus.on(Bus.OpenFile.draggableEnd).subscribe(onDraggableEnd),
+      draggable$.pipe(debounceTime(50)).subscribe(onDragover)
+    );
+
+    return {
+      groups,
+      getClassMap,
+      onActive,
+      onClose,
+      onMousedown,
+      onDragstart,
+      onDragend,
+    };
+  },
+});
+</script>
+
+<template lang="pug">
+.open-file.scrollbar
+  ul(v-for="(group, i) in groups" :key="group.id")
+    li
+      span.arrow(v-if="groups.length !== 1")
+        .none-arrow
+      span.group-title(v-if="groups.length !== 1") Group {{i + 1}}
+      transition-group(name="tab" tag="ul")
+        li.draggable(
+          v-for="tab in group.tabs"
+          :key="tab.id"
+          :data-id="tab.id"
+          :data-view-id="group.id"
+        )
+          span.arrow(@click.stop="onClose(group, tab)")
+            Icon(:size="12" prefix="mdi" name="close")
+          span.node(
+            :class="getClassMap(group, tab)"
+            draggable="true"
+            @click="onActive(group, tab)"
+            @mousedown="onMousedown"
+            @dragstart="onDragstart($event, group, tab)"
+            @dragend="onDragend"
+          )
+            span.name {{tab.name}}
+</template>
+
+<style scoped lang="scss">
+.open-file {
+  overflow-y: auto;
+  max-height: 300px;
+  margin-left: 6px;
+
+  ul {
+    position: relative;
+    z-index: 200;
+
+    li {
+      padding-left: 10px;
+      white-space: nowrap;
+      overflow: hidden;
+
+      .arrow {
+        cursor: pointer;
+        padding: 0 2px;
+
+        .none-arrow {
+          display: inline-block;
+          width: 5px;
+          height: 15px;
+        }
+      }
+
+      .group-title {
+        @apply text-sm;
+      }
+
+      .node {
+        @apply h-6;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+
+        &.draggable {
+          opacity: 0.5;
+        }
+
+        &.active {
+          color: var(--font-foreground);
+        }
+
+        .name {
+          @apply text-sm;
+        }
+      }
+    }
+  }
+}
+
+/* animation */
+.tab-move {
+  transition: transform 0.3s;
+}
+
+.tab-enter,
+.tab-leave-to {
+  display: none;
+}
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+</style>
diff --git a/packages/vuerd-app/src/components/sidebar/TreeNode.vue b/packages/vuerd-app/src/components/sidebar/explorer/TreeNode.vue
similarity index 96%
rename from packages/vuerd-app/src/components/sidebar/TreeNode.vue
rename to packages/vuerd-app/src/components/sidebar/explorer/TreeNode.vue
index 1dd5e6a4..95fddeba 100644
--- a/packages/vuerd-app/src/components/sidebar/TreeNode.vue
+++ b/packages/vuerd-app/src/components/sidebar/explorer/TreeNode.vue
@@ -12,8 +12,10 @@ import Icon from '@/components/Icon.vue';
 import { validFileName } from '@/helpers';
 import { useViewStore } from '@/store/view';
 
+const defaultPaddingLeft = 6;
 const paddingLeft = 10;
-const getPaddingLeft = (depth: number) => depth * paddingLeft;
+const getPaddingLeft = (depth: number) =>
+  depth * paddingLeft + defaultPaddingLeft;
 const foldTypes = [TreeNodeType.root, TreeNodeType.folder];
 
 export default defineComponent({
diff --git a/packages/vuerd-app/src/config/vuerd.config.ts b/packages/vuerd-app/src/config/vuerd.config.ts
index 3f1aaf74..399f9a65 100644
--- a/packages/vuerd-app/src/config/vuerd.config.ts
+++ b/packages/vuerd-app/src/config/vuerd.config.ts
@@ -1,4 +1,5 @@
 import 'vuerd';
+import 'vuerd/theme/one-dark-pro.css';
 
 import { generateTemplatePanel } from '@vuerd/plugin-generate-template';
 import { extension } from 'vuerd';
diff --git a/packages/vuerd-app/src/helpers/eventBus.helper.ts b/packages/vuerd-app/src/helpers/eventBus.helper.ts
index c71a29bb..d84ebd18 100644
--- a/packages/vuerd-app/src/helpers/eventBus.helper.ts
+++ b/packages/vuerd-app/src/helpers/eventBus.helper.ts
@@ -51,9 +51,15 @@ enum TreeNode {
   draggableEnd = 'TreeNode.draggableEnd',
 }
 
+enum OpenFile {
+  draggableStart = 'OpenFile.draggableStart',
+  draggableEnd = 'OpenFile.draggableEnd',
+}
+
 export const Bus = {
   EditorTab,
   EditorViewer,
   Editor,
   TreeNode,
+  OpenFile,
 };
diff --git a/packages/vuerd-app/src/store/ui/theme.store.ts b/packages/vuerd-app/src/store/ui/theme.store.ts
index cafa5a03..3402a996 100644
--- a/packages/vuerd-app/src/store/ui/theme.store.ts
+++ b/packages/vuerd-app/src/store/ui/theme.store.ts
@@ -59,6 +59,7 @@ export const state = reactive<Theme>({
   },
   sash: {
     background: 'black',
+    foreground: 'rgba(90, 99, 117)',
   },
   drop: {
     background: '#9DA5B4',