diff --git a/html/dashboard/css/index.css b/html/dashboard/css/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/html/dashboard/files.html b/html/dashboard/files.html
index 8701ed4..b4dddd9 100644
--- a/html/dashboard/files.html
+++ b/html/dashboard/files.html
@@ -1,7 +1,7 @@
 {{define "all"}}
 {{template "header" .}}
-<link rel="stylesheet" href="/css/index.css" />
-<script src="/js/index.js"></script>
+<!-- <link rel="stylesheet" href="/css/index.css" />
+<script src="/js/index.js"></script> -->
 {{template "aside" .}}
 <script>aside.active_files();</script>
 <div class="content-wrapper">
@@ -19,6 +19,7 @@
     <!-- header -->
     <section class="content">
         <div class="container-fluid">
+            暂未实现
         </div>
         <!-- container -->
     </section>
diff --git a/html/dashboard/index.html b/html/dashboard/index.html
index 14da4d3..008c83c 100644
--- a/html/dashboard/index.html
+++ b/html/dashboard/index.html
@@ -1,6 +1,5 @@
 {{define "all"}}
 {{template "header" .}}
-<link rel="stylesheet" href="/css/index.css" />
 <script src="/js/index.js"></script>
 {{template "aside" .}}
 <script>aside.active_dashboard();</script>
diff --git a/html/dashboard/js/index.js b/html/dashboard/js/index.js
index 1e9f126..df975f3 100644
--- a/html/dashboard/js/index.js
+++ b/html/dashboard/js/index.js
@@ -31,10 +31,15 @@ var page = {
                     recv_packet += link.recv_packet;
                 });
                 var op = '';
-                if (tunnel.type == 'reverse') {
+                switch (tunnel.type) {
+                case 'reverse':
                     op = `
                     <a href="http://${location.hostname}:${tunnel.port}" target="_blank">http</a>
-                    <a href="https://${location.hostname}:${tunnel.port}" target="_blank">https</a>`
+                    <a href="https://${location.hostname}:${tunnel.port}" target="_blank">https</a>`;
+                    break;
+                case 'shell':
+                    op = `<a href="http://${location.host}/terminal.html?name=${tunnel.name}">连接</a>`;
+                    break;
                 }
                 var str = `
                 <tr>
diff --git a/html/dashboard/js/terminal.js b/html/dashboard/js/terminal.js
new file mode 100644
index 0000000..2db0985
--- /dev/null
+++ b/html/dashboard/js/terminal.js
@@ -0,0 +1,47 @@
+var page = {
+    init: function() {
+        page.load();
+        $('#connect').click(page.connect);
+    },
+    load: function() {
+        $.get('/api/tunnels', function(ret) {
+            $('#terms').empty();
+            $.each(ret, function(_, tunnel) {
+                if (tunnel.type != 'shell') {
+                    return;
+                }
+                $('#terms').append($(`<option value="${tunnel.port}">${tunnel.name}</option>`));
+            });
+        });
+    },
+    connect: function() {
+        $('#tabs>.nav-item>.active').removeClass('active');
+        $('#tab-content>.active').removeClass('show').removeClass('active');
+        var idx = page.idx;
+        var str = `
+        <li class="nav-item">
+            <button class="nav-link active" type="button">
+                shell - [${$('#terms option:selected').text()}]
+            </button>
+        </li>`;
+        var obj = $(str);
+        obj.click(function() {
+            var $this = $(this);
+            $('#tabs>.nav-item>.active').removeClass('active');
+            $this.find('button').addClass('active');
+            $('#tab-content>.active').removeClass('show').removeClass('active');
+            $('#tab-'+idx).addClass('show').addClass('active');
+        });
+        $('#tabs').append(obj);
+        var str = `
+        <div class="tab-pane fade show active" id="tab-${idx}">
+            <iframe src="http://${location.hostname}:${$('#terms').val()}"
+                    style="width:100%;min-height:500px"></iframe>
+        </div>`;
+        var obj = $(str);
+        $('#tab-content').append(obj);
+        page.idx++;
+    },
+    idx: 0
+};
+$(document).ready(page.init);
\ No newline at end of file
diff --git a/html/dashboard/terminal.html b/html/dashboard/terminal.html
index 04bc265..572ea74 100644
--- a/html/dashboard/terminal.html
+++ b/html/dashboard/terminal.html
@@ -1,7 +1,6 @@
 {{define "all"}}
 {{template "header" .}}
-<link rel="stylesheet" href="/css/index.css" />
-<script src="/js/index.js"></script>
+<script src="/js/terminal.js"></script>
 {{template "aside" .}}
 <script>aside.active_terminal();</script>
 <div class="content-wrapper">
@@ -19,6 +18,20 @@
     <!-- header -->
     <section class="content">
         <div class="container-fluid">
+            <div class="row"><div class="col-12">
+                <div class="input-group mb-3">
+                    <select id="terms" class="form-select"></select>
+                    <div class="input-group-append">
+                        <button id="connect" class="btn btn-primary" type="button">连接</button>
+                    </div>
+                </div>
+            </div></div>
+            <!-- header -->
+            <div class="row"><div class="col-12">
+                <ul class="nav nav-tabs" id="tabs"></ul>
+                <div class="tab-content" id="tab-content"></div>
+            </div></div>
+            <!-- body -->
         </div>
         <!-- container -->
     </section>