diff --git a/package-lock.json b/package-lock.json
index 0d335d24c..665ea1ec9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "kore-board",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "packages": {
@@ -25538,6 +25538,15 @@
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
       "dev": true
     },
+    "ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "dev": true,
+      "requires": {
+        "entities": "^2.2.0"
+      }
+    },
     "ansi-wrap": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
@@ -27520,17 +27529,6 @@
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
       "dev": true
     },
-    "clipboard": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "dev": true,
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -28812,12 +28810,6 @@
       "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
       "dev": true
     },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
-      "dev": true
-    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -31274,15 +31266,6 @@
         "sparkles": "^1.0.0"
       }
     },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "dev": true,
-      "requires": {
-        "delegate": "^3.1.2"
-      }
-    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -37267,12 +37250,6 @@
       "integrity": "sha512-1j2RlmUNADEprCkzDaeo8w2tdum/mvQWAKdRaS2raud7IOnPaDbLSFKhcY5xXPbAFYWk4ZQ0BUnfmg0ZUcI+Pg==",
       "dev": true
     },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
-      "dev": true
-    },
     "select2": {
       "version": "4.0.13",
       "resolved": "https://registry.npmjs.org/select2/-/select2-4.0.13.tgz",
@@ -37780,6 +37757,12 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "splitpanes": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
+      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw==",
+      "dev": true
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -38547,12 +38530,6 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-      "dev": true
-    },
     "tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
diff --git a/package.json b/package.json
index afa0fddd6..58f0f5d1b 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,8 @@
     "xterm": "^4.12.0",
     "xterm-addon-fit": "^0.5.0",
     "xterm-addon-web-links": "^0.4.0",
+    "splitpanes": "^2.3.8",
+    "ansi-to-html": "^0.7.2",
     "jsonpath": "^1.1.1"
   },
   "engines": {
@@ -63,4 +65,4 @@
     "npm": ">=6.0.0"
   },
   "dependencies": {}
-}
\ No newline at end of file
+}
diff --git a/src/app/backend/model/node.go b/src/app/backend/model/node.go
index b5719a23e..c9779b23f 100644
--- a/src/app/backend/model/node.go
+++ b/src/app/backend/model/node.go
@@ -7,6 +7,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"strings"
+	"time"
 
 	"github.com/kore3lab/dashboard/pkg/config"
 	"github.com/kore3lab/dashboard/pkg/lang"
@@ -76,14 +77,17 @@ func GetNodeListWithUsage(cluster string) (interface{}, error) {
 		return nil, err
 	}
 
+	//timeout 5s
+	timeout := int64(5)
+
 	// node-list
-	nodeList, err := apiClient.CoreV1().Nodes().List(context.TODO(), metaV1.ListOptions{})
+	nodeList, err := apiClient.CoreV1().Nodes().List(context.TODO(), metaV1.ListOptions{TimeoutSeconds: &timeout})
 	if err != nil {
 		return nil, err
 	}
 
 	// self.Workloads.Pods (노드별 파드 수 & running 파드 수)
-	podList, err := apiClient.CoreV1().Pods("").List(context.TODO(), metaV1.ListOptions{})
+	podList, err := apiClient.CoreV1().Pods("").List(context.TODO(), metaV1.ListOptions{TimeoutSeconds: &timeout})
 	if err != nil {
 		return nil, err
 	}
@@ -96,12 +100,13 @@ func GetNodeListWithUsage(cluster string) (interface{}, error) {
 
 	nodes := map[string]*NodeWithMetrics{}
 	summary := NodeMetricsUsage{}
+	d := time.Duration(timeout) * time.Second
+	nodeSummary := ProxyNodeSummary{}
 
 	for _, m := range nodeList.Items {
 
 		// node summary for storage used percentage (/api/v1/nodes/<node name>/proxy/stats/summary)
-		nodeSummary := ProxyNodeSummary{}
-		request := apiClient.CoreV1().RESTClient().Get().Resource("nodes").Name(m.Name).SubResource("proxy").Suffix("stats/summary")
+		request := apiClient.CoreV1().RESTClient().Get().Resource("nodes").Name(m.Name).SubResource("proxy").Suffix("stats/summary").Timeout(d)
 		responseRawArrayOfBytes, err := request.DoRaw(context.Background())
 		if err != nil {
 			log.Warnf("Unable to get %s/proxy/stats/summary (cause=%v)", m, err)
diff --git a/src/app/backend/pkg/app/ack.go b/src/app/backend/pkg/app/ack.go
index ae9da1082..a168170ca 100644
--- a/src/app/backend/pkg/app/ack.go
+++ b/src/app/backend/pkg/app/ack.go
@@ -6,6 +6,7 @@ import (
 	"fmt"
 	log "github.com/sirupsen/logrus"
 	"net/http"
+	"net/url"
 
 	"github.com/astaxie/beego/validation"
 	"github.com/gin-gonic/gin"
@@ -82,3 +83,17 @@ func (g *Gin) ValidateUrl(params []string) error {
 	return nil
 
 }
+
+// parse querystrings
+func (g *Gin) ParseQuery() (url.Values, error) {
+
+	u, err := url.Parse(g.C.Request.RequestURI)
+	if err != nil {
+		return nil, err
+	}
+	query, err := url.ParseQuery(u.RawQuery)
+	if err != nil {
+		return nil, err
+	}
+	return query, nil
+}
diff --git a/src/app/backend/router/apis/raw.go b/src/app/backend/router/apis/raw.go
index 8d539410f..16a88973d 100644
--- a/src/app/backend/router/apis/raw.go
+++ b/src/app/backend/router/apis/raw.go
@@ -7,13 +7,18 @@ package apis
 */
 
 import (
+	"context"
+	"io"
 	"net/http"
-	"net/url"
+	"strconv"
 	"strings"
+	"time"
 
 	"github.com/gin-gonic/gin"
 	"github.com/kore3lab/dashboard/pkg/app"
 	"github.com/kore3lab/dashboard/pkg/config"
+	log "github.com/sirupsen/logrus"
+	coreV1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/types"
 )
@@ -113,8 +118,7 @@ func GetRaw(c *gin.Context) {
 	var err error
 
 	ListOptions := v1.ListOptions{}
-	u, _ := url.Parse(c.Request.RequestURI)
-	query, _ := url.ParseQuery(u.RawQuery)
+	query, _ := g.ParseQuery()
 
 	err = v1.Convert_url_Values_To_v1_ListOptions(&query, &ListOptions, nil)
 	if err != nil {
@@ -202,3 +206,113 @@ func PatchRaw(c *gin.Context) {
 	g.Send(http.StatusOK, r)
 
 }
+
+// Get Pod logs
+func GetPodLogs(c *gin.Context) {
+	g := app.Gin{C: c}
+
+	var err error
+
+	// url parameter validation
+	v := []string{"NAMESPACE", "NAME"}
+	if err := g.ValidateUrl(v); err != nil {
+		g.SendMessage(http.StatusBadRequest, err.Error(), err)
+		return
+	}
+
+	// instancing dynamic client
+	client, err := config.Cluster.Client(g.C.Param("CLUSTER"))
+	if err != nil {
+		g.SendMessage(http.StatusBadRequest, err.Error(), err)
+		return
+	}
+
+	apiClient, err := client.NewKubernetesClient()
+	if err != nil {
+		g.SendMessage(http.StatusBadRequest, err.Error(), err)
+		return
+	}
+
+	//  log options (with querystring)
+	options := coreV1.PodLogOptions{}
+	var limitLines = int64(300)
+	query, err := g.ParseQuery()
+	if err == nil {
+		if len(query) > 0 {
+			if query["tailLines"] != nil {
+				var num1, err1 = strconv.Atoi(query["tailLines"][0])
+				if err1 != nil {
+					g.SendMessage(http.StatusBadRequest, err.Error(), err)
+					return
+				}
+				limitLines = int64(num1)
+			}
+			options.TailLines = &limitLines
+
+			if query["sinceTime"] != nil {
+				var timestamp v1.Time
+				timestamp.UnmarshalQueryParameter(query["sinceTime"][0])
+				options.SinceTime =  &timestamp
+			}
+
+			if query["container"] != nil {
+				options.Container = query["container"][0]
+			}
+			if query["follow"] != nil {
+				options.Follow, _ = strconv.ParseBool(query["follow"][0])
+			}
+			if query["previous"] != nil {
+				options.Previous, _ = strconv.ParseBool(query["previous"][0])
+			}
+			if query["timestamps"] != nil {
+				options.Timestamps, _ = strconv.ParseBool(query["timestamps"][0])
+			}
+		}
+	}
+
+	// get a log stream
+	req := apiClient.CoreV1().Pods(g.C.Param("NAMESPACE")).GetLogs(g.C.Param("NAME"), &options)
+	stream, err := req.Stream(context.TODO())
+	if err != nil {
+		g.SendMessage(http.StatusBadRequest, err.Error(), err)
+		return
+	}
+	defer stream.Close()
+
+	// read a stream go-routine
+	chanStream := make(chan []byte, 10)
+	go func() {
+		defer close(chanStream)
+
+		for {
+			buf := make([]byte, 4096)
+			numBytes, err := stream.Read(buf)
+
+			if err != nil {
+				if err != io.EOF {
+					log.Infof("finished log streaming (cause=%s)", err.Error())
+					return
+				} else {
+					if options.Follow == false {
+						log.Debug("log stream is EOF")
+						break
+					} else {
+						time.Sleep(time.Second * 1)
+					}
+				}
+			} else {
+				chanStream <- buf[:numBytes]
+			}
+		}
+	}()
+
+	// write stream to client
+	g.C.Stream(func(w io.Writer) bool {
+		if data, ok := <-chanStream; ok {
+			w.Write(data)
+			return true
+		}
+		return false
+	})
+
+}
diff --git a/src/app/backend/router/router.go b/src/app/backend/router/router.go
index ba67d2030..43382a25d 100644
--- a/src/app/backend/router/router.go
+++ b/src/app/backend/router/router.go
@@ -98,6 +98,7 @@ func CreateUrlMappings() {
 		rawAPI.GET("/:A/:B/:RESOURCE/:NAME", apis.GetRaw)       // "/namespaces/:NAMESPACE/:RESOURCE/:NAME" > namespaced core apiGroup - get
 		rawAPI.DELETE("/:A/:B/:RESOURCE/:NAME", apis.DeleteRaw) // "/namespaces/:NAMESPACE/:RESOURCE/:NAME" > namespaced core apiGroup - delete
 		rawAPI.PATCH("/:A/:B/:RESOURCE/:NAME", apis.PatchRaw)   // "/namespaces/:NAMESPACE/:RESOURCE/:NAME" > namespaced core apiGroup - patch
+		rawAPI.GET("/:A/:B/:RESOURCE/:NAME/log", apis.GetPodLogs) // "/namespaces/:NAMESPACE/pods/:NAME/log"  > get a pod logs
 	}
 
 	// RAW-API Grouped
diff --git a/src/app/frontend/assets/css/app.css b/src/app/frontend/assets/css/app.css
index dc0ef4160..0fe652a46 100644
--- a/src/app/frontend/assets/css/app.css
+++ b/src/app/frontend/assets/css/app.css
@@ -1,68 +1,76 @@
-/* layout */
-.main-sidebar, .main-sidebar::before { width: 17rem;}
-.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar::before { margin-left: -17rem; }
-.sidebar {margin-left: 3.7rem; padding: 0; padding-left: .1rem;}
-.sidebar::-webkit-scrollbar{ display:none;}
-.brand-link { margin-left: 3.7rem;}
-.layout-fixed .brand-link { width: 13.2rem;}
-.main-footer {padding: .5rem 1rem; height: 2.5rem}
-aside a.brand-link img {width: 1.7em; height:1.7em;}
-#aside-contexts {width:3.7rem; position:absolute;min-height:100vh; padding: 1.5rem .3rem; }
-#aside-contexts > div { margin: .5rem .2rem;}
-#aside-contexts button.active { border-color: #fd7e14; background-color: rgb(255, 193, 7)}
-#aside-contexts p { font-size:x-small; margin: 0;}
-body:not(.layout-top-nav) .content-wrapper {margin-left:0}
-.wrapper .content-wrapper { min-height: calc(100vh - calc(3.5rem + 1px) - calc(2.5rem + 1px));}
-.content-header { padding: .5rem .5rem .2rem .5rem;}
-label:not(.form-check-label):not(.custom-file-label) {font-weight: 400;}
-.brand-link .brand-image {margin-left: .5rem}
-
-@media (max-width: 992px) {
-	body:not(.sidebar-open) .main-sidebar, .main-sidebar::before { margin-left: -17rem;}
-}
-@media (min-width: 1024px) {
-	body:not(.sidebar-mini-md) .content-wrapper, body:not(.sidebar-mini-md) .main-footer, body:not(.sidebar-mini-md) .main-header {
-		margin-left: 17rem;
-	}
-	.sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .main-header {
-		margin-left: 7.4rem !important;
-	}
-	.sidebar-mini.sidebar-collapse .main-sidebar, .sidebar-mini.sidebar-collapse .main-sidebar::before {
-		width: 7.4rem;
-	}
+/* layout - default */
+:root {
+  --layout-header-height: 3.5rem;
+  --layout-footer-height: 2.5rem;
+  --layout-aside-width: 17rem;
+  --layout-aside-width-md: 7.4rem;
+  --bg-color: #f4f6f9;
+  --border-color: #e9ecef;
 }
-
-/* custom  */
-.lh-vh-50 {line-height: 50vh;} .lh-vh-100 {line-height: 100vh;}
-.h-chart { height: 14em;}
-.cursor {cursor:pointer}
-.label {
-	display: inline-grid;
-	border:1px #73b5fc solid;
-	background-color: #eff6fd;
-	padding: 1px 4px;
-	line-height: 1.3rem;
-	border-radius: .25em!important;
-	margin: .1em .2em .1em 0em;
-	color: #0363ca;
+/* layout - default */
+body.sidebar-mini {overflow:hidden;}
+body.sidebar-mini .main-sidebar { width: var(--layout-aside-width);}
+body.sidebar-mini .main-header { position: fixed; top:0; width:100%; }
+body.sidebar-mini .main-footer { margin:0; padding: .5rem 1rem .5rem calc(var(--layout-aside-width) + 1rem); min-height: var(--layout-footer-height); position: fixed; bottom:0;  width:100%; z-index: 10}
+body.sidebar-mini .main-body { padding: var(--layout-header-height) 0rem var(--layout-footer-height) var(--layout-aside-width) }
+/* layout - sidebar > brand */
+body.sidebar-mini .main-sidebar .brand-link { margin-left: 3.7rem; width: 13.2rem;}
+body.sidebar-mini .main-sidebar .brand-link img.brand-image {width: 1.7em; height:1.7em;margin-left: .5rem}
+/* layout - sidebar > contexts */
+body.sidebar-mini .main-sidebar .aside-contexts {width:3.7rem; position:absolute;min-height:100vh; padding: 1.5rem .3rem; }
+body.sidebar-mini .main-sidebar .aside-contexts > div { margin: .5rem .2rem;}
+body.sidebar-mini .main-sidebar .aside-contexts button.current { border-color: #fd7e14; background-color: rgb(255, 193, 7)}
+body.sidebar-mini .main-sidebar .aside-contexts p { font-size:x-small; margin: 0;}
+/* layout - sidebar > menu */
+body.sidebar-mini .main-sidebar .aside-menus {margin-left: 3.7rem; padding: 0; padding-left: .1rem;}
+body.sidebar-mini .main-sidebar .aside-menus::-webkit-scrollbar{ display:none;}
+/* layout - body > splitpanes */
+body.sidebar-mini .main-body .splitpanes__pane.body-pane { overflow-y: auto; background-color: var(--bg-color); }
+body.sidebar-mini .main-body:not(.terminal-closed) .splitpanes__splitter { background-color:transparent; height:.3rem; border-top: .1rem solid #343a40; background-color: var(--bg-color)}
+body.sidebar-mini .main-body.terminal-closed  .splitpanes__splitter { display: none; }
+body.sidebar-mini .main-body .splitpanes__pane.terminal-pane > i { float:right; line-height:1.6rem; padding: .2rem .5rem .2rem .5rem; border-left: 1px dashed #ccc; background-color:#fff; }
+/* layout - body > list-page > header */
+body.sidebar-mini .main-body .content-header { padding: .5rem .5rem .2rem .5rem;}
+body.sidebar-mini .main-body .content-wrapper { margin-left: 0!important; min-height: 100% !important;}
+/* layout - sidebar @media style
+	min-width: 992px (992px 이상)
+		default sidebar : visible 상태, class = body:not(.sidebar-collapse))
+		햄버거 메뉴 click : sidebar 축소, class =  body.sidebar-collapse)
+		sidebar width : 17rem
+	max-width: 992px (992px 미만)
+		default sidebar : hidden 상태, class = body.sidebar-closed
+		햄버거 메뉴 click : sidebar 오픈, class = body.sidebar-open
+*/
+@media (min-width: 992px) {
+	body.sidebar-mini:not(.sidebar-collapse) .main-header {padding-left: var(--layout-aside-width);  margin-left: 0 ;}
+	body.sidebar-mini:not(.sidebar-collapse) .main-body { padding-left: var(--layout-aside-width); }
+	body.sidebar-mini.sidebar-collapse .main-header { padding-left: var(--layout-aside-width-md); margin-left: 0rem !important; }
+	body.sidebar-mini.sidebar-collapse .main-sidebar {width: var(--layout-aside-width-md) }
+	body.sidebar-mini.sidebar-collapse .main-body { padding-left: var(--layout-aside-width-md); }
+	body.sidebar-mini.sidebar-collapse .main-footer { margin-left: 0!important; padding-left: calc(var(--layout-aside-width-md) + 1rem); }
 }
-.border-box {
-	display: inline-grid;
-    border: 1px #6c757d dotted;
-	line-height: 1.3rem;
-    padding: 0 .4em;
-    border-radius: .25em!important;
-    margin: .1em .2em .1em 0em;
-    color: #6c757d;
-}
-.border-box.background {
-	background-color: #f3f4f5;
+@media (max-width: 992px) {
+	body.sidebar-mini .main-body { padding-left: 0 }
+	body.sidebar-mini:not(.sidebar-open) .main-sidebar { margin-left: calc(var(--layout-aside-width) * -1) }
+	body.sidebar-mini .main-footer { padding-left: 1rem; }
 }
-
-/* table of viewpage*/
+/* override */
+body.sidebar-mini .main-body label:not(.form-check-label):not(.custom-file-label) {font-weight: 400;} 
+/* override > vue-boostrap  */
+table.b-table > tbody > .table-active, .table.b-table > tbody > .table-active > th, .table.b-table > tbody > .table-active > td {background-color: rgba(0, 0, 0, 0.03);}
+table.b-table tr:focus { outline: none; }
+table.b-table.table-sm {margin: 0;}
+table.b-table.table-sm tbody > tr {line-height: 1rem; margin-bottom: 0;}
 table.b-table.subset th {font-weight:400; padding: .3rem}
 table.b-table.subset td {font-weight:350; padding: .3rem}
-
+/* custom  */
+.lh-vh-50 {line-height: 50vh;}
+.lh-vh-100 {line-height: 100vh;}
+.h-chart { height: 14em;}
+.cursor {cursor:pointer}
+.label {display: inline-grid;border:1px #73b5fc solid;background-color: #eff6fd;padding: 1px 4px;line-height: 1.3rem;border-radius: .25em!important;margin: .1em .2em .1em 0em;color: #0363ca;}
+.border-box {display: inline-grid;border: 1px #6c757d dotted;line-height: 1.3rem;padding: 0 .4em;border-radius: .25em!important;margin: .1em .2em .1em 0em;color: #6c757d;}
+.border-box.background {background-color: #f3f4f5;}
 /* custom > view */
 section.content-view {font-size: .95rem;}
 section.content-view .card-primary > .card-header {font-size: 1.1rem; line-height: 1.1rem;}
@@ -77,10 +85,3 @@ section.content-view .card-body.group > ul { padding: 0; margin:0; list-style: n
 section.content-view .card-body.group > ul > li { margin-top: .5em }
 section.content-view .card-body.group > ul > li .title { margin: .3rem .3rem; font-weight:400; font-size:1rem }
 section.content-view .card-body.group > ul > li > dl { border: 1px solid #dee2e6!important; margin: 0 0;}
-
-
-/* custom -vue-boostrap  */
-table.b-table > tbody > .table-active, .table.b-table > tbody > .table-active > th, .table.b-table > tbody > .table-active > td {background-color: rgba(0, 0, 0, 0.03);}
-table.b-table tr:focus { outline: none; }
-table.b-table.table-sm {margin: 0;}
-table.b-table.table-sm tbody > tr {line-height: 1rem; margin-bottom: 0;}
diff --git a/src/app/frontend/components/terminal/terminal-logs.vue b/src/app/frontend/components/terminal/terminal-logs.vue
new file mode 100644
index 000000000..08c2bff3d
--- /dev/null
+++ b/src/app/frontend/components/terminal/terminal-logs.vue
@@ -0,0 +1,160 @@
+<template>
+<div>
+	<div class="header-wrapper">
+		<ul>
+			<li><label>Namespace</label><span>{{ value.metadata.namespace }}</span></li>
+			<li><label>Pod</label><span>{{ value.metadata.name }}</span></li>
+			<li><label>Containers</label><b-form-select size="sm" :options="value.containers" :value="value.container" @input="onChangeContainer"></b-form-select></li>
+			<li>
+				<div class="input-group input-group-sm">
+					<b-form-input id="txtKeyword" v-model="searchVal" @keydown="onSearchDown" class="form-control float-right" placeholder="Search"></b-form-input>
+					<div class="input-group-append"><button @click="onSearchDown" class="btn btn-default"><i class="fas fa-search"></i></button></div>
+				</div>
+			</li>
+		</ul>
+	</div>
+	<div v-if="logs.length > 0" class="body-wrapper" @scroll="handleScroll">
+		<p v-for="d in logs" :key="d.index" class="logs" v-html="d.replace(/^\d+.*?\s/gm, '')"></p>
+	</div>
+	<div v-else class="body-wrapper d-flex align-items-center justify-content-center">
+		There are no logs available for container
+	</div>
+</div>
+</template>
+<style>
+div.terminal-content .body-wrapper p.logs {margin-bottom:0; font-size: .825rem;}
+mark{background-color: #3593f8;}
+</style>
+<script>
+import AnsiConverter from "ansi-to-html"
+const ansi = new AnsiConverter();
+
+const TAIL_LINES = 300;
+export default {
+	props: {
+		value: {
+			type: Object,
+			default: function () {
+				return {
+					metadata: { namespace: "", name: ""} ,
+					container: "",
+					containers: []
+				}
+			}
+		},
+	},
+	data() {
+		return {
+			logs: [],
+			searchVal: "",
+			matchVal: "",
+			lastTimestamp:"",
+			offsetFlag: false,
+			logInterval : ''
+		}
+	},
+	mounted() {
+		this.baseURL = this.getApiUrl("", "pods", this.value.metadata.namespace, this.value.metadata.name) + "/log";
+		this.watchLogs();
+	},
+	methods: {
+		intervalLogData(callback){
+			const tic = () => {
+				this.logInterval = setTimeout(() => {
+					callback();
+					tic();
+				}, 10000)
+			}
+			tic();
+		},
+		setLogsData(respData){
+			const wrapEl = this.$el.querySelector("div.body-wrapper");
+			const isScrollMove = (wrapEl.scrollTop >= wrapEl.scrollHeight - wrapEl.clientHeight);
+			const data = ansi.toHtml(respData).split("\n").filter(d => d.length > 0);
+			let list = [];
+			if(this.lastTimestamp){
+				for(let i=data.length-1; i >= 0; i--) {
+					if(data[i].indexOf(this.lastTimestamp) !== -1) break;
+					list.push(data[i]);
+				}
+				list.reverse();
+			}else{
+				list = data;
+			}
+			this.logs = [...new Set(this.logs.concat(list))];
+			this.lastTimestamp = this.logs[this.logs.length - 1]?.match(/^\d+\S+/gm);
+			if (isScrollMove) this.$nextTick(() => { wrapEl.scrollTop = wrapEl.scrollHeight; this.offsetFlag = false; this.wordMark()});	// fix scroll position
+		},
+		loadMore(){
+			this.$axios.get(`${this.baseURL}?follow=0&timestamps=1&container=${this.value.container}&tailLines=${this.logs.length + TAIL_LINES}&sinceTime=${this.lastTimestamp}`)
+				.then((resp) => { this.setLogsData(resp.data); })
+				.catch(e => { this.msghttp(e);});
+		},
+		watchLogs(){
+			this.logs = [];
+			this.$axios.get(`${this.baseURL}?follow=0&timestamps=1&container=${this.value.container}&tailLines=${TAIL_LINES}`)
+				.then((resp) => {
+					this.setLogsData(resp.data);
+					this.intervalLogData(this.loadMore);
+				})
+				.catch(e => { this.msghttp(e);});
+		},
+		onSearchDown(e){
+			if(e.key === 'Escape' || e.key === 'Backspace'){
+				let list = [];
+				if(e.key === 'Escape') this.searchVal = '';
+				this.logs.forEach( item => { list.push(item.replace(/<(\/mark|mark)([^>]*)>/gi,"")) })
+				this.logs = list;
+				this.matchVal = "";
+			}
+			else if(e.key === 'Enter' || e.type === "click") {
+				if(e.isComposing) return;
+				this.offsetFlag = true;
+				this.wordMark(true);
+			}
+		},
+		wordMark(search){
+			if(search){
+				this.matchVal = this.searchVal.trim();
+			}
+			if(this.matchVal !== ""){
+				let list = [];
+				this.logs.forEach( item => { list.push(item.replace(/<(\/mark|mark)([^>]*)>/gi,"")) })
+				list.forEach((item, index) => {
+					const startIndex = item.toUpperCase().indexOf(this.matchVal.toUpperCase());
+					if (startIndex !== -1) {
+						let re1 = new RegExp(this.matchVal, "gi");
+						const word = item.slice(startIndex, startIndex+this.matchVal.length)
+						list[index] = item.replace(re1, `<mark>${word}</mark>`);
+						if(this.offsetFlag){
+							this.$el.querySelectorAll("p.logs")[index].scrollIntoView();
+							this.offsetFlag = false;
+						}
+					}
+				})
+				this.logs = list;
+			}
+		},
+		onChangeContainer(value) {
+			clearTimeout(this.logInterval);
+			this.value.container = value;
+			this.watchLogs();
+		},
+		handleScroll(evt){
+			if(evt.target.scrollTop === 0){
+				const h = evt.target.scrollHeight
+				this.$axios.get(`${this.baseURL}?follow=0&timestamps=1&container=${this.value.container}&tailLines=${this.logs.length + TAIL_LINES}`)
+					.then((resp) => {
+						this.logs = ansi.toHtml(resp.data).split("\n").filter(d => d.length > 0);
+						this.lastTimestamp = this.logs[this.logs.length - 1]?.match(/^\d+\S+/gm);
+						this.$nextTick(()=>{ evt.target.scrollTop = evt.target.scrollHeight-h; this.offsetFlag = false; this.wordMark()});	// fix scroll position
+					})
+					.catch(e => { this.msghttp(e);});
+			}
+		}
+	},
+	beforeDestroy(){
+		clearTimeout(this.logInterval);
+	},
+}
+</script>
\ No newline at end of file
diff --git a/src/app/frontend/layouts/components/aside.vue b/src/app/frontend/layouts/components/aside.vue
index 3c774a91f..888cd4408 100644
--- a/src/app/frontend/layouts/components/aside.vue
+++ b/src/app/frontend/layouts/components/aside.vue
@@ -1,7 +1,7 @@
 <template>
-	<aside class="main-sidebar sidebar-dark-primary elevation-4">
+	<aside class="sidebar-dark-primary elevation-4">
 
-		<c-context />
+		<c-context class="aside-contexts"/>
 
 		<nuxt-link to="/" class="brand-link align-bottom">
 			<img src="/favicon.svg" class="brand-image">
@@ -9,7 +9,7 @@
 		</nuxt-link>
 
 		<!-- Sidebar -->
-		<div class="sidebar">
+		<div class="aside-menus">
 			<!-- Sidebar Menu -->
 			<nav class="mt-2">
 				<ul class="nav nav-pills nav-sidebar flex-column nav-child-indent nav-compact" data-widget="treeview" role="menu" data-accordion="false">
diff --git a/src/app/frontend/layouts/components/context.vue b/src/app/frontend/layouts/components/context.vue
index 8a8d40237..890d310a5 100644
--- a/src/app/frontend/layouts/components/context.vue
+++ b/src/app/frontend/layouts/components/context.vue
@@ -1,10 +1,10 @@
 <template>
-	<div id="aside-contexts" class="sidebar-contexts d-flex flex-column sidebar-dark-primary border-right border-secondary">
+	<div class="d-flex flex-column sidebar-dark-primary border-right border-secondary">
 		<div v-for="(ctx, index) in contexts()" :key="ctx" :value="ctx">
 			<b-overlay :show="showOverlay===ctx" rounded="sm">
 				<b-overlay :show="showErrorOverlay===ctx" rounded="sm" variant="white">
-				<template #overlay><b-icon icon="exclamation-circle-fill" font-scale="2" variant="danger"></b-icon></template>
-				<b-button v-bind:id="'btn_aside_cluster_' + ctx" @click="onContextSelected(ctx)" v-bind:class="{active: ctx===currentContext()}" :value="ctx" class="w-100 text-uppercase">{{ ctx.substring(0,1) }}</b-button>
+					<template #overlay><b-icon icon="exclamation-circle-fill" font-scale="2" variant="danger"></b-icon></template>
+					<b-button v-bind:id="'btn_aside_cluster_' + ctx" @click="onContextSelected(ctx)" v-bind:class="{current: ctx===currentContext()}" :value="ctx" class="w-100 text-uppercase" variant="secondary">{{ ctx.substring(0,1) }}</b-button>
 				</b-overlay>
 			</b-overlay>
 			<p class="text-center text-white text-truncate">{{ctx}}</p>
diff --git a/src/app/frontend/layouts/components/footer.vue b/src/app/frontend/layouts/components/footer.vue
index e9ff17525..10cc275b0 100644
--- a/src/app/frontend/layouts/components/footer.vue
+++ b/src/app/frontend/layouts/components/footer.vue
@@ -1,11 +1,14 @@
 <template>
-	<footer class="main-footer" style="">
+<footer>
 		<div class="float-left pr-2 text-sm">{{ statusbar().kubernetesVersion }}</div>
 		<div class="float-left pl-2 pr-2 mr-1 text-sm">{{ statusbar().platform }}</div>
-		<div class="float-left  text-sm"></div>
+		<div class="float-left  text-sm">
+	</div>
+	<div class= "margin-right">
 		<a href="https://github.com/kore3lab/dashboard" target="_blank"><b-icon class="float-right" icon="github" font-scale="1.25"></b-icon></a>
 		<div class="float-right text-sm mr-2">
-			<b>Version</b> {{$config.version}}
+		<b>Version</b> {{$config.version}}
 		</div>
-	</footer>
+	</div>
+</footer>
 </template>
diff --git a/src/app/frontend/layouts/components/log.vue b/src/app/frontend/layouts/components/log.vue
new file mode 100644
index 000000000..44a77af64
--- /dev/null
+++ b/src/app/frontend/layouts/components/log.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="main-log " v-if="tabs.length > 0">
+    <section class="content margin-right">
+      <div class="card card-secondary card-outline">
+        <b-tabs card grow v-model="active_tab" ref="tabs">
+          <!-- Render Tabs, supply a unique `key` to each tab -->
+          <b-tab v-for="val in tabs" :key="val.index" class="text-truncate m-n2">
+            <template #title>
+              {{val.podName}}
+              <button type="button" class="btn btn-tool" @click="closeTab(val.containerName, val.podName)" ><i class="fas fa-times"></i></button>
+            </template>
+            <div class="row mb-1" role="group" >
+              <div class="col-xs-1 "> &nbsp; Namespace : </div>
+              <div class="col-sm-2 text-truncate float-left"><h5><span class="badge badge-light">{{val.namespace}}</span></h5></div>
+              <div class="col-xs-1  float-left"> &nbsp; Pod : </div>
+              <div class="col-sm-4 text-truncate float-left max-width:10px;"><h5><span class="badge badge-light">{{val.podName}}</span></h5></div>
+              <div class="col-xs-1  float-left"> &nbsp; Container : </div>
+              <div class="col-sm-2 float-left"><b-form-select v-model="val.containerName" :options="val.containerList" size="sm" @input="getContainerName(val.containerName, val.index);"></b-form-select></div>
+              <br/>
+            </div>
+            <div class="overflow-auto bg-black px-2 " style="height:15rem;" v-bind:id="val.podName + '_' + val.index" @scroll="handleScroll">
+              <div class="d-flex align-items-center justify-content-center" style="height:15rem;" v-if="val.data === '' ">
+                <span>
+                  There are no logs available for container
+                </span>
+              </div>
+              <div v-else class="row" v-for="d in val.data">
+                <span class="text-white"> &nbsp; {{d.replace(/^\d+.*?\s/gm, "")}} </span>
+              </div>
+            </div>
+          </b-tab>
+        </b-tabs>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      tabs: [],
+      active_tab: 0,
+      tabCounter: 0,
+      tailLines: 300,
+      baseUrl: ''
+    }
+  },
+  created() {
+    this.$nuxt.$on('log-data-created', (metadata, containerName, containerList) => {
+      if (metadata.name) {
+        if (this.tabs.length < 10) {
+          this.contentPadding('25rem');
+
+          let flag = true;
+          this.tabs.forEach((tabs, index) => {
+            if (tabs.containerName === containerName && tabs.podName === metadata.name) {
+              flag = false;
+              this.active_tab = index;
+            }
+          })
+          if (flag) {
+            this.tabs.push({
+              index: this.tabCounter,
+              containerName: containerName,
+              podName: metadata.name,
+              namespace: metadata.namespace,
+              response: {},
+              data: '',
+              firstTimestamp: '',
+              containerList: containerList
+            })
+            this.tabCounter++;
+
+            setTimeout(() => {
+              this.active_tab = this.tabs[this.tabs.length - 1].index;
+            }, 100)
+
+            this.getLogData(metadata.namespace, metadata.name, containerName, '');
+          }
+        }
+      }
+    });
+  },
+  methods: {
+    getContainerName(containerName, idx){
+      this.tabs.forEach((item, index) => {
+        if(item.index == idx){
+          if (item.response.hasOwnProperty("read")) {
+            item.response.read.cancel();
+          }
+          item.data = ''
+          this.getLogData(item.namespace, item.podName, item.containerName, index);
+        }
+      })
+    },
+    getLogData(namespace, podName, containerName, index){
+      this.baseUrl = `${this.$config.nodeEnv}` === "development" ? `${location.protocol}//${location.hostname}:${this.$config.backendPort}` : `${location.host}`;
+      fetch(this.baseUrl + this.getApiUrl("", "pods", namespace, podName, "follow=1&container=" + containerName + "&tailLines=" + this.tailLines, true)).then(response => {
+        const reader = response.body.getReader();
+        const Vue = this;
+        let buffer = '';
+        let tabIndex = this.tabs.length-1;
+        if(index !== ''){
+          tabIndex = index;
+        }
+        this.tabs[tabIndex].response = {containerName: containerName, podName: podName, read: reader};
+        return reader.read().then(function process(result) {
+          if (result.done) {
+            return;
+          }
+          buffer = new TextDecoder().decode(result.value, {stream: true});
+
+          Vue.tabs.forEach(tabs => {
+            if (tabs.containerName === containerName && tabs.podName === podName) {
+              const logData = buffer.replace(/\[(?:\d{1}|\d{2})m/gi, '').split("\n");
+
+              tabs.data = tabs.data.length === 0 ? logData.filter(item => item.length > 0) : tabs.data.concat(logData).filter(item => item.length > 0);
+
+              setTimeout(() => {
+                const logDiv = Vue.$refs.tabs.$refs.content;
+                for (let i = 0; i < logDiv.children.length; i++) {
+                  const logId = logDiv.children[i].children[1].id;
+                  const divInfo = logId.split("_");
+                  if(divInfo[1] == tabs.index){
+                    logDiv.children[i].children[1].scrollTop = logDiv.children[i].children[1].scrollHeight;
+                  }
+                }
+              });
+            }
+          })
+          return reader.read().then(process);
+        })
+      })
+    },
+    handleScroll(evt){
+      if(evt.target.scrollTop === 0){
+        const logDivId = evt.target.id;
+        const divInfo = logDivId.split("_");
+        this.tabs.forEach((item, index) => {
+          if(divInfo[1] == item.index && item.data !== ''){
+            item.firstTimestamp = this.getTimestamps(item.data[0]);
+            let tailLine = item.data.length + this.tailLines;
+            this.$axios.get(this.getApiUrl("", "pods", item.namespace, item.podName, "follow=0&container=" + item.containerName + "&tailLines=" + tailLine , true))
+                .then((resp) => {
+                  this.items = [];
+                  const prevData = resp.data.split(item.firstTimestamp);
+                  const logData = prevData[0].replace(/\[(?:\d{1}|\d{2})m/gi, '').split("\n");
+                  this.tabs[index].data = logData.concat(item.data).filter(item => item.length > 0);
+                })
+                .catch(e => { this.msghttp(e);});
+          }
+        });
+      }
+    },
+    getTimestamps(logs) {
+      return logs.match(/^\d+\S+/gm);
+    },
+    closeTab(containerName, podName) {
+      this.tabs.forEach((item, index) => {
+        if (item.containerName === containerName && item.podName === podName) {
+          if (item.response.hasOwnProperty("read")) {
+            item.response.read.cancel();
+          }
+          this.tabs.splice(index, 1);
+        }
+      })
+      if(this.tabs.length === 0){
+        this.contentPadding('2rem');
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/app/frontend/layouts/components/navbar.vue b/src/app/frontend/layouts/components/navbar.vue
index af66c39ff..974c1e483 100644
--- a/src/app/frontend/layouts/components/navbar.vue
+++ b/src/app/frontend/layouts/components/navbar.vue
@@ -1,11 +1,11 @@
 <template>
 	<!-- Navbar -->
-	<nav class="main-header navbar navbar-expand navbar-white navbar-light">
+	<nav class="navbar navbar-expand navbar-white navbar-light">
 		<ul class="navbar-nav">
 			<li class="nav-item"><a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a></li>
 			<li class="nav-item pt-1"><span class="text-lg text-muted">{{this.currentContext()}}</span></li>
 		</ul>
-		<ul class="navbar-nav ml-auto">
+		<ul class="navbar-nav ml-auto margin-right">
 			<li v-if="currentContext()" class="nav-item"><nuxt-link :to="{path: '/terminal', query: {termtype: 'cluster', cluster: this.currentContext()}}" target="_blank" class="nav-link"><b-icon icon="terminal-fill" font-scale="1.2"></b-icon></nuxt-link></li>
 			<li class="nav-item"><a class="nav-link" data-widget="fullscreen" href="#" role="button"><i class="fas fa-expand-arrows-alt"></i></a></li>
 			<!--<li class="nav-item"><a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i class="fas fa-th-large"></i></a></li>-->
@@ -23,4 +23,3 @@ export default {
 	}
 }
 </script>
-
diff --git a/src/app/frontend/layouts/components/terminal.vue b/src/app/frontend/layouts/components/terminal.vue
new file mode 100644
index 000000000..0ba69a1cc
--- /dev/null
+++ b/src/app/frontend/layouts/components/terminal.vue
@@ -0,0 +1,93 @@
+<template>
+<div class="h-100">
+	<b-tabs ref="tabs" v-model="current_tab" @changed="current_tab = (Object.keys(tabs).length -1)" @activate-tab="onActivateTab" class="h-100" content-class="terminal-content-class" nav-class="terminal-nav-class" nav-wrapper-class="terminal-nav-wrapper-class" active-tab-class="terminal-active-tab-class" active-nav-item-class="terminal-active-nav-item-class text-bold">
+		<b-tab v-for="(d, k) in  tabs" :key="k" title-item-class="terminal-title-item-class" title-link-class="terminal-title-link-class text-sm">
+			<template #title>
+				<i class="fas fa-file-alt mr-1"></i>{{ d.title }}<i class="fas cursor fa-times ml-1 text-secondary" @click="onTerminalCloseClick(k)"></i>
+			</template>
+			<c-terminal-logs v-if="d.type=='logs'" v-model="tabs[k]" class="terminal-content"/>
+			<div v-else-if="d.type=='shell'"></div>
+			<div v-else-if="d.type=='cluster'"></div>
+		</b-tab>
+	</b-tabs>
+</div>
+</template>
+<style>
+/* terminal) b-tabs classes */
+div.terminal-nav-wrapper-class { padding-right: 2.5rem; border-bottom: 1px solid #ccc; background-color:var(--bg-color)}
+	ul.terminal-nav-class { height:2rem; border-bottom: 0; flex-wrap: nowrap; white-space: nowrap; overflow: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
+	ul.terminal-nav-class::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
+		li.terminal-title-item-class { background-color: transparent; }
+			a.terminal-active-nav-item-class { border:0!important; border-bottom: .3rem solid #3593f8!important; font-weight: 500; }
+			a.terminal-title-link-class { line-height: 1.7rem; padding: 0 .5em 0 .5em; color:#999; }
+			a.terminal-title-link-class:not(.active):hover { border-color: #fff!important; }
+div.terminal-content-class { height: 100%; margin-top: -2rem; padding-top:2rem }	/* content */
+	div.terminal-active-tab-class { height: 100%; }
+/* terminal) custom  */
+div.terminal-content { height:100%;margin-top:-1.8rem; padding-top:1.8rem; }
+div.terminal-content .header-wrapper { height:2rem;  }
+div.terminal-content .body-wrapper { height:100%; padding: .2rem .5rem; color:#fff; background-color: #000; overflow: auto; scrollbar-color: auto;}
+div.terminal-content .header-wrapper ul {display:flex; line-height:1.9rem; font-size: .875rem; margin:0; padding: 0; list-style: none; }
+div.terminal-content .header-wrapper ul li { padding-left: 1rem; }
+div.terminal-content .header-wrapper label { height:1.9rem; margin:0; padding-right:.5rem; font-weight: 700!important;}
+div.terminal-content .header-wrapper ul li select { height: 1.6rem; width: 10rem; margin-left: .5rem; padding-top:0; padding-bottom:0;margin-top: -.1rem}
+div.terminal-content .header-wrapper ul li .input-group-sm { height:1.85rem; margin:0; line-height: 1.8rem; }
+div.terminal-content .header-wrapper ul li .input-group-sm input { height: 1.7rem; margin-top:.1rem; }
+div.terminal-content .header-wrapper ul li .input-group-sm button { height: 1.7rem; margin-top:.1rem; padding: .2rem .3rem; }
+</style>
+
+<script>
+import VueTerminalLogsView	from "~/components/terminal/terminal-logs.vue";
+
+export default {
+	components: {
+		"c-terminal-logs": { extends: VueTerminalLogsView },
+	},
+	data() {
+		return {
+			tabs : {},
+			current_tab: 0,
+		}
+	},
+	created() {
+		this.$nuxt.$on("open-terminal", (title, type, param) => {
+			const key = `${title}-${type}`;
+			if(!this.tabs[key]) {
+				// logs				: { title: "", type: "logs", metadata: {namespace:"", name:""}, container:"", containers: ["",""] }
+				// shell(pod)		: { title: "", type: "shell", metadata: {namespace:"", name:""}, container:"", containers: ["",""] }
+				// shell(cluster)	: { title: "", type: "cluster", cluster: "apps-06" }
+				if (type == "logs") this.$set(this.tabs, key, { title: title, type: "logs", metadata: param.metadata, container: param.container, containers: param.containers } );
+				if (type == "shell") this.$set(this.tabs, key, { title: title, type: "shell", metadata: param.metadata, container: param.container, containers: param.containers } );
+				if (type == "cluster") this.$set(this.tabs, key, { title: title, type: "cluster", cluster: param } );
+				this.$emit("opened", key, Object.keys(this.tabs).length);
+			} else{
+        if (type === "logs") this.$set(this.tabs, key, { title: title, type: "logs", metadata: param.metadata, container: param.container, containers: param.containers } );
+        this.current_tab = Object.keys(this.tabs).findIndex((v) => v === key);
+      }
+		});
+	},
+	methods: {
+		onActivateTab(idx, prevIdx, ev) {
+			const ul = ev.vueTarget.$el.querySelector("ul");
+			const el = ul.querySelector(`li:nth-child(${idx+1})`);
+
+			let x1 = el.offsetLeft - ul.offsetLeft - ul.scrollLeft;
+			let x2 = el.offsetLeft + el.offsetWidth - ul.offsetLeft;
+			let x3 = ul.scrollLeft + ul.offsetWidth;
+
+			if (x1 < 0) {
+				ul.scrollLeft += (x1-100);		// hidden left (move to right)
+			}  else if( x2 > x3 ) {
+				ul.scrollLeft += x2 - x3 + 100;	// hidden right (move to left)
+			}
+		},
+		onTerminalCloseClick(k) {
+			this.$delete(this.tabs, k);
+			this.$emit("closed", k, Object.keys(this.tabs).length);
+		},
+	},
+	beforeDestroy(){
+		this.$nuxt.$off("open-terminal");
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/app/frontend/layouts/default.vue b/src/app/frontend/layouts/default.vue
index 1a8339738..d767736a8 100644
--- a/src/app/frontend/layouts/default.vue
+++ b/src/app/frontend/layouts/default.vue
@@ -1,21 +1,86 @@
 <template>
 	<div class="wrapper toggled">
-		<c-navbar />
-		<c-aside />
-		<nuxt />
-		<c-footer />
+		<c-navbar class="main-header"/>
+		<c-aside class="main-sidebar"/>
+		<c-splitpanes class="main-body vh-100" :class="{'terminal-closed': !isTerminal }" horizontal>
+			<c-pane class="body-pane" :size="100-paneSize">
+				<nuxt/>
+			</c-pane>
+			<c-pane v-show="isTerminal" class="terminal-pane" :size="paneSize">
+				<i @click="isMinimize = !isMinimize" v-bind:class="{'fa-angle-up':isMinimize, 'fa-angle-down':!isMinimize }" class="fas cursor text-secondary"></i>
+				<c-terminal @opened="onTerminalOpened" @closed="onTerminalClosed" />
+			</c-pane>
+		</c-splitpanes>
+		<c-footer class="main-footer"/>
 	</div>
 </template>
 <script>
-import Aside	from "./components/aside.vue"
-import Navbar	from "./components/navbar.vue"
-import Footer	from "./components/footer.vue"
+import Aside				from "./components/aside.vue"
+import Navbar				from "./components/navbar.vue"
+import Terminal				from "./components/terminal.vue"
+import Footer				from "./components/footer.vue"
+import {Splitpanes,Pane}	from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
 
+const TERMINAL_HEIGHT=35
 export default {
+	data() {
+		return {
+			isTerminal: false,
+			isMinimize: false,
+			paneSize: 0,
+			beforePaneSize: 0
+		}
+	},
 	components: {
 		"c-aside": Aside,
 		"c-navbar": Navbar,
-		"c-footer": Footer
+		"c-terminal" : Terminal,
+		"c-footer": Footer,
+		"c-splitpanes": Splitpanes,
+		"c-pane": Pane
+	},
+	computed: {
+	},
+	watch: {
+		isMinimize(newVal) {
+			if(newVal) {
+				let pEl = document.querySelector(".main-body.splitpanes");			// outer pane
+				let hEl = document.querySelector(".main-body .splitpanes__pane");	// body pane
+				let nEl = document.querySelector(".terminal-nav-wrapper-class");	// terminal pane's nav-header
+
+				if (pEl && hEl && nEl) {
+					this.beforePaneSize = (1 - hEl.clientHeight / pEl.clientHeight)*100;
+					this.paneSize = nEl.clientHeight / pEl.clientHeight * 100;
+				}
+			} else {
+				this.paneSize = this.beforePaneSize;
+			}
+		}
+	},
+	created() {
+	},
+	methods: {
+		onTerminalOpened(key, len) {
+			if(!this.isTerminal) {
+				this.paneSize = TERMINAL_HEIGHT;
+				this.isTerminal = true;
+				this.isMinimize = false;
+			}
+		},
+		onTerminalClosed(key, len) {
+			if(len == 0) {
+				this.paneSize = 0;
+				this.isTerminal = false;
+				if(this.isMinimize) {
+					this.beforePaneSize = 0;
+					this.isMinimize = false;
+				}
+				
+			}
+		}
+	},
+	beforeDestroy(){
 	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/app/frontend/layouts/error.vue b/src/app/frontend/layouts/error.vue
new file mode 100644
index 000000000..e0c2a7fb6
--- /dev/null
+++ b/src/app/frontend/layouts/error.vue
@@ -0,0 +1,24 @@
+<template>
+<div class="content-wrapper">
+	<section class="content-header">&nbsp;</section>
+	<section class="content">
+		<div class="error-page">
+			<h2 class="headline" v-bind:class="{'text-danger': error.statusCode!=404,'text-warning': error.statusCode==404 }">{{error.statusCode}}</h2>
+			<div class="error-content">
+				<h3 v-if="error.statusCode == 404"><i class="fas fa-exclamation-triangle text-warning" ></i> Page not found</h3>
+				<h3 v-else><i class="fas fa-exclamation-triangle text-danger" ></i> An error occurred.</h3>
+				<p v-if="error.statusCode == 404">We could not find the page you were looking for. you may <nuxt-link to="/">return to dashboard</nuxt-link>.</p>
+				<p v-else>Sorry, we had some technical problems during your last operation. you may <nuxt-link to="/">return to dashboard</nuxt-link>.</p>
+				<a v-if="error.statusCode != 404" v-b-toggle href="#message" @click.prevent>show detail</a>
+				<b-collapse v-if="error.statusCode" id="message" class="text-secondary">{{error.message}}</b-collapse>
+			</div>
+		</div>
+	</section>
+</div>
+</template>
+<script>
+export default {
+	props: ["error"],
+	layout: "default"
+}
+</script>
\ No newline at end of file
diff --git a/src/app/frontend/pages/administrator/clusterrole.list.vue b/src/app/frontend/pages/administrator/clusterrole.list.vue
index f97c1c8eb..82b0582eb 100644
--- a/src/app/frontend/pages/administrator/clusterrole.list.vue
+++ b/src/app/frontend/pages/administrator/clusterrole.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/administrator/clusterrolebinding.list.vue b/src/app/frontend/pages/administrator/clusterrolebinding.list.vue
index 502d454c2..67c23fefd 100644
--- a/src/app/frontend/pages/administrator/clusterrolebinding.list.vue
+++ b/src/app/frontend/pages/administrator/clusterrolebinding.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/administrator/role.list.vue b/src/app/frontend/pages/administrator/role.list.vue
index a4e5d86f4..8a18824c5 100644
--- a/src/app/frontend/pages/administrator/role.list.vue
+++ b/src/app/frontend/pages/administrator/role.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/administrator/rolebinding.list.vue b/src/app/frontend/pages/administrator/rolebinding.list.vue
index cabb496ff..ca8f7945d 100644
--- a/src/app/frontend/pages/administrator/rolebinding.list.vue
+++ b/src/app/frontend/pages/administrator/rolebinding.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/administrator/serviceaccount.list.vue b/src/app/frontend/pages/administrator/serviceaccount.list.vue
index 7dcc73139..165767c28 100644
--- a/src/app/frontend/pages/administrator/serviceaccount.list.vue
+++ b/src/app/frontend/pages/administrator/serviceaccount.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/cluster/event.list.vue b/src/app/frontend/pages/cluster/event.list.vue
index 1b394b0e0..6e284d9fa 100644
--- a/src/app/frontend/pages/cluster/event.list.vue
+++ b/src/app/frontend/pages/cluster/event.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/cluster/namespace.list.vue b/src/app/frontend/pages/cluster/namespace.list.vue
index ff9d7f2c3..160c07d50 100644
--- a/src/app/frontend/pages/cluster/namespace.list.vue
+++ b/src/app/frontend/pages/cluster/namespace.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Cluster"></c-navigator>
diff --git a/src/app/frontend/pages/cluster/node.list.vue b/src/app/frontend/pages/cluster/node.list.vue
index 0ceeb30f7..a02b31c70 100644
--- a/src/app/frontend/pages/cluster/node.list.vue
+++ b/src/app/frontend/pages/cluster/node.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Cluster"></c-navigator>
diff --git a/src/app/frontend/pages/configuration/configmap.list.vue b/src/app/frontend/pages/configuration/configmap.list.vue
index 4df5a1004..6ad317906 100644
--- a/src/app/frontend/pages/configuration/configmap.list.vue
+++ b/src/app/frontend/pages/configuration/configmap.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Configuration"></c-navigator>
diff --git a/src/app/frontend/pages/configuration/hpa.list.vue b/src/app/frontend/pages/configuration/hpa.list.vue
index b350ea423..8b314c4ed 100644
--- a/src/app/frontend/pages/configuration/hpa.list.vue
+++ b/src/app/frontend/pages/configuration/hpa.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Configuration"></c-navigator>
diff --git a/src/app/frontend/pages/configuration/limitrange.list.vue b/src/app/frontend/pages/configuration/limitrange.list.vue
index 895d0782d..63297b84d 100644
--- a/src/app/frontend/pages/configuration/limitrange.list.vue
+++ b/src/app/frontend/pages/configuration/limitrange.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Configuration"></c-navigator>
diff --git a/src/app/frontend/pages/configuration/poddisruptionbudget.list.vue b/src/app/frontend/pages/configuration/poddisruptionbudget.list.vue
index 6f59c4d7a..ac34f9175 100644
--- a/src/app/frontend/pages/configuration/poddisruptionbudget.list.vue
+++ b/src/app/frontend/pages/configuration/poddisruptionbudget.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Configuration"></c-navigator>
diff --git a/src/app/frontend/pages/configuration/resourcequota.list.vue b/src/app/frontend/pages/configuration/resourcequota.list.vue
index 99c855c74..4b443d27b 100644
--- a/src/app/frontend/pages/configuration/resourcequota.list.vue
+++ b/src/app/frontend/pages/configuration/resourcequota.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Administrator"></c-navigator>
diff --git a/src/app/frontend/pages/configuration/secret.list.vue b/src/app/frontend/pages/configuration/secret.list.vue
index 4f782788a..b93821cb1 100644
--- a/src/app/frontend/pages/configuration/secret.list.vue
+++ b/src/app/frontend/pages/configuration/secret.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Configuration"></c-navigator>
diff --git a/src/app/frontend/pages/customresource/customresource.list.vue b/src/app/frontend/pages/customresource/customresource.list.vue
index b74677f2c..02f46e778 100644
--- a/src/app/frontend/pages/customresource/customresource.list.vue
+++ b/src/app/frontend/pages/customresource/customresource.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator :group="'Custom Resource / '+ apiQuery.group"></c-navigator>
diff --git a/src/app/frontend/pages/customresource/customresourcedefinitions.list.vue b/src/app/frontend/pages/customresource/customresourcedefinitions.list.vue
index 893efc8a9..8b4be7428 100644
--- a/src/app/frontend/pages/customresource/customresourcedefinitions.list.vue
+++ b/src/app/frontend/pages/customresource/customresourcedefinitions.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Custom Resource"></c-navigator>
diff --git a/src/app/frontend/pages/networking/endpoint.list.vue b/src/app/frontend/pages/networking/endpoint.list.vue
index bc0c89e15..265d16030 100644
--- a/src/app/frontend/pages/networking/endpoint.list.vue
+++ b/src/app/frontend/pages/networking/endpoint.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Networking"></c-navigator>
diff --git a/src/app/frontend/pages/networking/ingress.list.vue b/src/app/frontend/pages/networking/ingress.list.vue
index 13c2e192c..4da7491f3 100644
--- a/src/app/frontend/pages/networking/ingress.list.vue
+++ b/src/app/frontend/pages/networking/ingress.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Networking"></c-navigator>
diff --git a/src/app/frontend/pages/networking/networkpolicy.list.vue b/src/app/frontend/pages/networking/networkpolicy.list.vue
index dc65ff4a6..622fd0736 100644
--- a/src/app/frontend/pages/networking/networkpolicy.list.vue
+++ b/src/app/frontend/pages/networking/networkpolicy.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Networking"></c-navigator>
diff --git a/src/app/frontend/pages/networking/service.list.vue b/src/app/frontend/pages/networking/service.list.vue
index 11717419f..47a286cd4 100644
--- a/src/app/frontend/pages/networking/service.list.vue
+++ b/src/app/frontend/pages/networking/service.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Networking"></c-navigator>
@@ -148,7 +148,7 @@ export default {
 								type: el.spec.type,
 								clusterIP: el.spec.clusterIP,
 								ports: el.spec.ports,
-								externalIPs: el.spec.externalIPs,
+								externalIPs: el.spec.externalIPs || el.spec.externalName,
 								selector: el.spec.selector,
 								creationTimestamp: el.metadata.creationTimestamp,
 								status: el.status
@@ -178,7 +178,7 @@ export default {
 			if (item.type == "LoadBalancer") {
 				return item.status.loadBalancer.ingress? [item.status.loadBalancer] : ["-"];
 			} else if(item.type == "ExternalName") {
-				return [el.spec.externalName];
+				return [externalIPs];
 			} else {
 				return (externalIPs? externalIPs : ["-"])
 			}
diff --git a/src/app/frontend/pages/storage/pv.list.vue b/src/app/frontend/pages/storage/pv.list.vue
index 236dd0028..57d3695e2 100644
--- a/src/app/frontend/pages/storage/pv.list.vue
+++ b/src/app/frontend/pages/storage/pv.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Storage"></c-navigator>
diff --git a/src/app/frontend/pages/storage/pvc.list.vue b/src/app/frontend/pages/storage/pvc.list.vue
index d36756d1e..80030037c 100644
--- a/src/app/frontend/pages/storage/pvc.list.vue
+++ b/src/app/frontend/pages/storage/pvc.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Storage"></c-navigator>
diff --git a/src/app/frontend/pages/storage/storageclass.list.vue b/src/app/frontend/pages/storage/storageclass.list.vue
index 9ed188e76..f316af490 100644
--- a/src/app/frontend/pages/storage/storageclass.list.vue
+++ b/src/app/frontend/pages/storage/storageclass.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Storage"></c-navigator>
diff --git a/src/app/frontend/pages/view.vue b/src/app/frontend/pages/view.vue
index 6dc50098f..e18905662 100644
--- a/src/app/frontend/pages/view.vue
+++ b/src/app/frontend/pages/view.vue
@@ -6,11 +6,12 @@
 				<h3 class="card-title">{{ title }} / {{ (name && name.length >60) ? name.substring(0,60)+'...' : name }}</h3>
 				<div class="card-tools">
 					<span v-show="!errorcheck">
-						<button type="button" class="btn btn-tool" @click="onSync()"><i class="fas fa-sync-alt"></i></button>
-						<button type="button" class="btn btn-tool" v-show="isJSON && component"  @click="isJSON=false"><i class="fas fa-list-alt"></i></button>
+ 						<button v-if="navigateStack.length>0" type="button" class="btn btn-tool" @click="onNavigateBack"><i class="fa fa-arrow-left"></i></button>
+ 						<button type="button" class="btn btn-tool" @click="onSync()" v-b-tooltip.hover title="Reload"><i class="fas fa-sync-alt"></i></button>
+						<button type="button" class="btn btn-tool" v-show="isJSON && component"  @click="isJSON=false"><i><del>JSON</del></i></button>
 						<button type="button" class="btn btn-tool" v-show="!isJSON && component" @click="isJSON=true;isYaml=false"><i>JSON</i></button>
-						<button type="button" class="btn btn-tool" @click="isYaml=true"><i class="fas fa-edit"></i></button>
-						<button type="button" class="btn btn-tool" @click="deleteOverlay.visible = true"><i class="fas fa-trash"></i></button>
+						<button type="button" class="btn btn-tool" @click="isYaml=true" v-b-tooltip.hover title="Edit"><i class="fas fa-edit"></i></button>
+						<button type="button" class="btn btn-tool" @click="deleteOverlay.visible = true" v-b-tooltip.hover title="Delete"><i class="fas fa-trash"></i></button>
 					</span>
 					<button type="button" class="btn btn-tool" @click="$emit('close')"><i class="fas fa-times"></i></button>
 				</div>
@@ -25,7 +26,7 @@
 					<!-- 1.1 meta data -->
 					<c-metadata v-show="isJSON" v-model="raw.metadata" dtCols="2" ddCols="10"></c-metadata>
 					<!-- 1.2  view -->
-					<component :is="component" v-if="component" v-show="!isJSON" v-model="value" @navigate="navigate"/>
+					<component :is="component" v-if="component" v-show="!isJSON" v-model="value" @navigate="onNavigate"/>
 					<!-- 1.3 json-tree -->
 					<div class="row" v-show="isJSON && title !== 'StorageClass'">
 						<div class="col-md-12">
@@ -82,6 +83,26 @@ import VueMetadataView	from "@/components/view/metadataView.vue";
 import VueAceEditor 		from "@/components/aceeditor"
 import VueJsonTree 			from "@/components/jsontree"
 
+function NavigateStack() {
+	this.stack = [];
+	this.position = -1;
+	this.init = () => {
+		this.stack = [];
+		this.position = -1;
+	}
+	this.push = (loc) => {
+		this.stack.push(Object.assign({}, loc));
+		this.position = this.stack.length -1;
+	}
+	this.go = (back, callback) => {
+		const pos = (this.stack.length-1) + back;
+		if(pos >= 0) {
+			callback( this.stack[pos] )
+			this.stack = this.stack.splice(0, pos+1);
+		}
+	}
+}
+
 export default {
 	props:["value"],
 	components: {
@@ -92,6 +113,8 @@ export default {
 	data() {
 		return {
 			component: null,
+			title: "",
+			name: "",
 			src: "",
 			url: "",
 			origin: { metadata: {}, spec: {} },
@@ -104,11 +127,10 @@ export default {
 				processing : false,
 				timer: null
 			},
-			localSrc: "",
+			navigateStack: [],
 			errorcheck: false,
 			errorMessage: "",
 			errorM: [],
-			isCreated: false,
 			delay: 0,
 			disabled: false,
 			selfLink: "",
@@ -118,12 +140,6 @@ export default {
 		loader() {
 			if (!this.src) return null;
 			return () => import(`@/pages/${this.src}`)
-		},
-		title() {
-			return this.value.title;
-		},
-		name() {
-			return this.value.name;
 		}
 	},
 	watch: {
@@ -136,45 +152,52 @@ export default {
 			}
 		},
 		value(newVal) {
-			this.src = newVal.src;
-			this.url = newVal.url;
-			document.getElementsByClassName(`b-sidebar-body`)[0].scrollTop = 0
+			this.navigateStack = [];
+			this.navigate(newVal);
 		},
-		src(newVal) {
-			if(newVal !== this.localSrc) {
-				this.component = null;
-				this.isJSON = true;
+		url(newVal) {
+			if(!newVal) return;
+			this.onSync();
+		},
+	},
+	mounted() {
+		this.$emit("close");
+	},
+	methods: {
+		// 보기 페이지 이동
+		navigate(loc) {
+			if (this.src != loc.src) {
+				this.src = loc.src;
 				if(this.loader) {
 					this.loader()
 						.then(() => {
 							this.component = () => this.loader();
 							this.isJSON = false;
+							if(this.url != loc.url) this.url = loc.url;
 						})
 						.catch((ex) => {
 							console.error(ex)
 						})
 				}
-				this.localSrc = newVal;
+			} else if(this.url != loc.url) {
+				this.url = loc.url;
 			}
+
+			if(this.name != loc.name) this.name = loc.name;
+			if(this.title != loc.title) this.title = loc.title;
 		},
-		url(newVal) {
-			if(!newVal) return;
-			this.onSync();
+		// component 페이지 이동 이벤트 처리
+		onNavigate(loc) {
+			this.navigateStack.push( { src : this.src, url : this.url, title: this.title, name : this.name } );
+			this.navigate(loc);
 		},
-	},
-	mounted() {
-		this.$emit("close");
-	},
-	beforeUpdate() {
-		let el = document.getElementsByTagName("body")
-		el[0].style.removeProperty('height')
-	},
-	methods: {
-		navigate(loc) {
-			this.value.name = loc.name;
-			this.value.title = loc.title;
-			this.src = loc.src;
-			this.url = loc.url;
+		// 뒤로 버튼
+		onNavigateBack() {
+			const pos = (this.navigateStack.length-1);
+			if(pos >= 0) {
+				this.navigate( this.navigateStack[pos] );
+				this.navigateStack = this.navigateStack.splice(0, pos);
+			}
 		},
 		// 조회
 		onSync() {
@@ -201,6 +224,7 @@ export default {
 					let c = this.getResource(this.raw)
 					this.selfLink = this.getApiUrl(c.group, c.resource, this.raw.metadata.namespace, c.name);
 					this.$nuxt.$emit("view-data-read-completed", this.raw);
+					if(this.$el && this.$el.parentElement) this.$el.parentElement.scrollTop = 0;
 				})
 				.catch(e => {
 					this.isError(e);
@@ -289,11 +313,5 @@ export default {
 
 </script>
 <style scoped>
-.floating {
-	position: fixed;
-	margin: 0 auto;
-	left: 0;
-	right: 0;
-	top: 5%;
-}
+.floating { position: fixed; margin: 0 auto; left: 0; right: 0; top: 5%;}
 </style>
diff --git a/src/app/frontend/pages/workload/daemonset.list.vue b/src/app/frontend/pages/workload/daemonset.list.vue
index 70f414ffb..769d0c28e 100644
--- a/src/app/frontend/pages/workload/daemonset.list.vue
+++ b/src/app/frontend/pages/workload/daemonset.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Workload"></c-navigator>
diff --git a/src/app/frontend/pages/workload/deployment.list.vue b/src/app/frontend/pages/workload/deployment.list.vue
index 747c58e6b..86d62cbd5 100644
--- a/src/app/frontend/pages/workload/deployment.list.vue
+++ b/src/app/frontend/pages/workload/deployment.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Workload"></c-navigator>
diff --git a/src/app/frontend/pages/workload/job.list.vue b/src/app/frontend/pages/workload/job.list.vue
index 0c6b9dcc8..baf240a13 100644
--- a/src/app/frontend/pages/workload/job.list.vue
+++ b/src/app/frontend/pages/workload/job.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Workload"></c-navigator>
diff --git a/src/app/frontend/pages/workload/pod.list.vue b/src/app/frontend/pages/workload/pod.list.vue
index e66559ae2..9fe37c342 100644
--- a/src/app/frontend/pages/workload/pod.list.vue
+++ b/src/app/frontend/pages/workload/pod.list.vue
@@ -63,6 +63,29 @@
 									<template v-slot:cell(node)="data">
 										<a href="#" @click="viewModel=getViewLink('','nodes', '',  data.value); isShowSidebar=true;">{{ data.value }}</a>
 									</template>
+									<template v-slot:head(menu)="data">
+										<div class="text-center">
+											<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+										</div>
+									</template>
+									<template v-slot:cell(menu)="data">
+										<div class="text-center">
+											<b-dropdown dropdown no-caret variant="link" size="xs" class="m-n2">
+												<template #button-content>
+													<b-button class="btn btn-tool" variant="link" @click="onClickInitMenu(data.value.status)">
+														<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+													</b-button>
+												</template>
+												<b-dropdown-item v-for="(item,index) in menu" v-if="item.type === 'log' || item.visible" :key="index" @mouseover.native="toggleSubMenu($event, index)" @mouseout.native="toggleSubMenu($event, index)" @click="onClickShowLogs(data.value, item.name, item.type)">
+													<b-icon v-bind:icon="item.icon" class="mr-2"></b-icon><span>{{item.title}} <b-icon-caret-right-fill :scale="0.6" v-if="item.children"></b-icon-caret-right-fill></span>
+													<div v-if="item.children" class="dropdown-sub-menu" v-show="item.showSubMenu">
+														<b-dropdown-item dropleft v-for="(d,index) in item.children" v-if="item.title==='log' || d.visible" :key="index" @click="onClickShowLogs(data.value, d.name, item.title)"> <span class="badge badge-success"> {{""}}</span><span class="pl-1 text-xs">{{d.title}}</span>
+														</b-dropdown-item>
+													</div>
+												</b-dropdown-item>
+											</b-dropdown>
+										</div>
+									</template>
 								</b-table>
 							</div>
 							<b-pagination v-model="currentPage" :per-page="itemsPerPage" :total-rows="totalItems" size="sm" align="center"></b-pagination>
@@ -76,6 +99,10 @@
 		</b-sidebar>
 	</div>
 </template>
+<style>
+div .dropdown-sub-menu{ position: absolute; white-space: nowrap; min-width: 8rem; right: 100%; left: auto; transform : translate(0, -60%); background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem;}
+.dropdown-menu {min-width:5rem !important;}
+</style>
 <script>
 import VueNavigator			from "@/components/navigator"
 import VueColumsSelector	from "@/components/columnsSelector"
@@ -87,6 +114,7 @@ export default {
 		"c-colums-selector": { extends: VueColumsSelector},
 		"c-view": { extends: VueView }
 	},
+
 	data() {
 		return {
 			selectedNamespace: "",
@@ -116,7 +144,8 @@ export default {
 				{ key: "node", label: "Node", sortable: true },
 				{ key: "qos", label: "QoS", sortable: true  },
 				{ key: "creationTimestamp", label: "Age", sortable: true, formatter: this.getElapsedTime },
-				{ key: "status", label: "Status", sortable: true, formatter: this.formatStatus }
+				{ key: "status", label: "Status", sortable: true, formatter: this.formatStatus },
+				{ key: "menu", label: "" }
 			],
 			isBusy: true,
 			origin: [],
@@ -129,11 +158,12 @@ export default {
 			totalItems: 0,
 			isShowSidebar: false,
 			viewModel:{},
+			menu: [{title:"terminal", icon:"terminal-fill", type:'terminal', visible:true},{title:'log', icon:"card-text", type:'log', visible:true}]
 		}
 	},
 	watch: {
 		itemsPerPage(n) {
-			this.$storage.global.set("itemsPerPage",n)	// save to localstorage 
+			this.$storage.global.set("itemsPerPage",n)	// save to localstorage
 		}
 	},
 	layout: "default",
@@ -145,6 +175,40 @@ export default {
 		if(this.currentContext()) this.$nuxt.$emit("navbar-context-selected");
 	},
 	methods: {
+		onClickInitMenu(status){
+			const menu = [{title:"terminal", icon:"terminal-fill", type:'terminal', visible:true},{title:'log', icon:"card-text", type:'log', visible:true}]
+			if(status.containerStatuses && status.containerStatuses.length > 1){
+				const list = [];
+				status.containerStatuses.forEach(item =>{list.push({ title: item.name, name: item.name, visible: item.ready})})
+				let menuList = [];
+				this.menu.forEach(item => {
+					menuList.push({ title: item.title, icon: item.icon, showSubMenu : false, visible: true, children : list})
+				})
+				this.menu = menuList;
+			}else{
+				menu.forEach((item, index) => {
+					menu[index].name = status.containerStatuses[0].name;
+					menu[index].visible = status.containerStatuses[0].ready;
+				})
+				this.menu = menu;
+			}
+		},
+		toggleSubMenu (e, index){
+			if(this.menu[index].children) this.menu[index].showSubMenu = e.type === 'mouseover';
+		},
+		onClickShowLogs(data, name, type) {
+			if(name !== undefined){
+				let containerList = []
+				data.status.containerStatuses.forEach(item =>{
+					containerList.push(item.name);
+				})
+				if(type === 'log') {this.$nuxt.$emit("open-terminal", data.metadata.name, "logs", { metadata: data.metadata, container:name, containers:containerList });}
+				else {
+					let route = this.$router.resolve({path: "/terminal", query: {termtype: 'container',pod: data.metadata.name, namespace: data.metadata.namespace, cluster: this.currentContext(), container:name}})
+					window.open(route.href);
+				}
+			}
+		},
 		onRowSelected(items) {
 			this.isShowSidebar = (items && items.length > 0)
 			if (this.isShowSidebar) this.viewModel = this.getViewLink("", "pods", items[0].namespace, items[0].name)
@@ -154,9 +218,9 @@ export default {
 			let selectedStatus = this.selectedStatus;
 			this.items = this.origin.filter(el => {
 				if(selectedStatus.includes("etc")) {
-					return (selectedStatus.length === 0) || selectedStatus.includes(el.status.value) || !(this.allStatus.includes(el.status.value));
+					return (selectedStatus.length === 0) || selectedStatus.includes(el.status) || !(this.allStatus.includes(el.status));
 				}
-				return (selectedStatus.length === 0) || selectedStatus.includes(el.status.value);
+				return (selectedStatus.length === 0) || selectedStatus.includes(el.status);
 			});
 			this.totalItems = this.items.length;
 			this.currentPage = 1
@@ -175,11 +239,12 @@ export default {
 							containers: el.status,
 							restartCount: el.status.containerStatuses ? el.status.containerStatuses.map(x => x.restartCount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) : 0,
 							controller: el.metadata.ownerReferences?el.metadata.ownerReferences[0]:null,
-							status: el.status,
+							status: el.status.phase,
 							creationTimestamp: el.metadata.creationTimestamp,
 							deletionTimestamp: el.metadata.deletionTimestamp,
 							node: el.spec.nodeName,
-							qos: el.status.qosClass
+							qos: el.status.qosClass,
+							menu: el,
 						});
 					});
 					this.origin = this.items;
@@ -197,14 +262,14 @@ export default {
 			let status = { running:0, pending:0, failed:0, terminating:0, crashLoopBackOff:0, imagePullBackOff:0, completed:0, containerCreating:0, etc:0 }
 
 			filteredItems.forEach(el=> {
-				if(el.status.value === "Running") status.running++;
-				else if(el.status.value === "Pending") status.pending++;
-				else if(el.status.value === "Terminating") status.terminating++;
-				else if(el.status.value === "CrashLoopBackOff") status.crashLoopBackOff++;
-				else if(el.status.value === "ImagePullBackOff") status.imagePullBackOff++;
-				else if(el.status.value === "Completed") status.completed++;
-				else if(el.status.value === "Failed") status.failed++;
-				else if(el.status.value === "ContainerCreating") status.containerCreating++;
+				if(el.status === "Running") status.running++;
+				else if(el.status === "Pending") status.pending++;
+				else if(el.status === "Terminating") status.terminating++;
+				else if(el.status === "CrashLoopBackOff") status.crashLoopBackOff++;
+				else if(el.status === "ImagePullBackOff") status.imagePullBackOff++;
+				else if(el.status === "Completed") status.completed++;
+				else if(el.status === "Failed") status.failed++;
+				else if(el.status === "ContainerCreating") status.containerCreating++;
 				else status.etc++;
 			});
 
@@ -222,7 +287,7 @@ export default {
 			this.currentPage = 1
 		},
 		formatStatus(status, key, item)  {
-			return this.toPodStatus(item.deletionTimestamp, status);
+			return this.toPodStatus(item.deletionTimestamp, item.containers);
 		},
 		formatContainers(status, key, item) {
 			let list = []
@@ -244,7 +309,7 @@ export default {
 		}
 	},
 	beforeDestroy(){
-		this.$nuxt.$off('navbar-context-selected')
+		this.$nuxt.$off('navbar-context-selected');
 	}
 }
 </script>
diff --git a/src/app/frontend/pages/workload/pod.view.vue b/src/app/frontend/pages/workload/pod.view.vue
index 11d489722..ed51701b0 100644
--- a/src/app/frontend/pages/workload/pod.view.vue
+++ b/src/app/frontend/pages/workload/pod.view.vue
@@ -42,9 +42,9 @@
 				<div class="card-body group">
 					<ul>
 						<li v-for="(val, idx) in initContainers" v-bind:key="idx">
-							<div class="title"><span v-bind:class=" {'badge-success': (val.status.value=='running' || val.status.value=='complete' || val.status.value=='ready'), 'badge-danger':val.status.value=='failed', 'badge-secondary':(val.status.value=='unknown' || val.status.value=='terminated'),'badge-warning':(val.status.value=='pending' || val.status.value=='waiting')}" class="badge mr-1">&nbsp;</span>{{ val.name }}</div>
+							<div class="title"><span v-bind:class=" {'badge-success': (val.status.value ==='running' || val.status.value ==='complete' || val.status.value ==='ready'), 'badge-danger':val.status.value ==='failed', 'badge-secondary':(val.status.value ==='unknown' || val.status.value ==='terminated'),'badge-warning':(val.status.value ==='pending' || val.status.value ==='waiting')}" class="badge mr-1">&nbsp;</span>{{ val.name }}</div>
 							<dl class="row">
-								<dt v-if="val.status.value" class="col-sm-2">Status</dt><dd v-if="val.status.value" class="col-sm-10" v-bind:class="{'text-success': (val.status.value =='running' || val.status.value=='complete' || val.status.value=='ready'), 'text-danger':val.status.value=='failed', 'text-warning': (val.status.value=='pending' || val.status.value=='waiting'),'text-secondary' :(val.status.value=='unknown' || val.status.value=='terminated')}" > {{ val.status.value }}{{ (val.status.ready)? `, ${val.status.ready}` : '' }} {{ (val.status.reason.reason) ? `- ${val.status.reason.reason} (exit code: ${val.status.reason.exitCode})` :''}}</dd>
+								<dt v-if="val.status.value" class="col-sm-2">Status</dt><dd v-if="val.status.value" class="col-sm-10" v-bind:class="{'text-success': (val.status.value ==='running' || val.status.value ==='complete' || val.status.value ==='ready'), 'text-danger':val.status.value ==='failed', 'text-warning': (val.status.value ==='pending' || val.status.value ==='waiting'),'text-secondary' :(val.status.value ==='unknown' || val.status.value ==='terminated')}" > {{ val.status.value }}{{ (val.status.ready)? `, ${val.status.ready}` : '' }} {{ (val.status.reason.reason) ? `- ${val.status.reason.reason} (exit code: ${val.status.reason.exitCode})` :''}}</dd>
 								<dt v-if="val.lastState" class="col-sm-2">Last Status</dt>
 								<dd v-if="val.lastState" class="col-sm-10">
 									<ul class="list-unstyled mb-0">
@@ -69,7 +69,7 @@
 								<dt class="col-sm-2">Mounts</dt>
 								<dd class="col-sm-10">
 									<ul v-for="(m, idx) in val.mounts" v-bind:key="idx" class="list-unstyled mb-0">
-										<li style="font-weight-bold">{{ m.mountPath }}</li>
+										<li class="font-weight-bold">{{ m.mountPath }}</li>
 										<li>from {{ m.name }}({{m.readOnly ? "ro" : "rw"}})</li>
 									</ul>
 								</dd>
@@ -91,15 +91,15 @@
 					<ul>
 						<li v-for="(val, idx) in containers" v-bind:key="idx">
 							<div class="title">
-								<span v-bind:class=" {'badge-success': (val.status.value=='running' || val.status.value=='complete' || val.status.value=='ready'), 'badge-danger':val.status.value=='failed', 'badge-secondary':(val.status.value=='unknown' || val.status.value=='terminated'),'badge-warning':(val.status.value=='pending' || val.status.value=='waiting')}" class="badge mr-1">&nbsp;</span>{{ val.name }}
-								<span v-if="val.status.value === 'running'">
-									<nuxt-link :to="{path: '/terminal', query: {termtype: 'container',pod: metadata.name, namespace: metadata.namespace, cluster: currentContext(),container:val.name}}" target="_blank">
-										<button id="terminal" class="btn btn-tool" ><i class="fas fa-terminal" style="color:black"></i></button>
-									</nuxt-link>
-								</span>
+                				<span v-bind:class=" {'badge-success': (val.status.value ==='running' || val.status.value ==='complete' || val.status.value ==='ready'), 'badge-danger':val.status.value==='failed', 'badge-secondary':(val.status.value ==='unknown' || val.status.value==='terminated'),'badge-warning':(val.status.value ==='pending' || val.status.value ==='waiting')}" class="badge mr-1">&nbsp;</span><span class="pr-3">{{ val.name }}</span>
+								<span v-if="val.status.value === 'running'"/>
+								<nuxt-link  v-if="val.status.value === 'running'" :to="{path: '/terminal', query: {termtype: 'container',pod: metadata.name, namespace: metadata.namespace, cluster: currentContext(),container:val.name}}" target="_blank">
+									<button id="terminal" class="btn pl-0 pr-0 text-sm" v-b-tooltip.hover title="Shell"><b-icon icon="terminal-fill"></b-icon></button>
+								</nuxt-link>
+								<button class="btn pl-0 text-sm" @click="onClickShowLogs(val.name)" v-b-tooltip.hover title="Logs"><b-icon icon="card-text"></b-icon></button>
 							</div>
 							<dl class="row">
-								<dt v-if="val.status.value" class="col-sm-2">Status</dt><dd v-if="val.status.value" class="col-sm-10" v-bind:class="{'text-success': (val.status.value =='running' || val.status.value=='complete' || val.status.value=='ready'), 'text-danger':val.status.value=='failed', 'text-warning': (val.status.value=='pending' || val.status.value=='waiting'),'text-secondary' :(val.status.value=='unknown' || val.status.value=='terminated')}" > {{ val.status.value }}{{ (val.status.ready)? `, ${val.status.ready}` : '' }} {{ (val.status.reason.reason) ? `- ${val.status.reason.reason} (exit code: ${val.status.reason.exitCode})` :''}}</dd>
+								<dt v-if="val.status.value" class="col-sm-2">Status</dt><dd v-if="val.status.value" class="col-sm-10" v-bind:class="{'text-success': (val.status.value ==='running' || val.status.value ==='complete' || val.status.value==='ready'), 'text-danger':val.status.value ==='failed', 'text-warning': (val.status.value ==='pending' || val.status.value ==='waiting'),'text-secondary' :(val.status.value ==='unknown' || val.status.value ==='terminated')}" > {{ val.status.value }}{{ (val.status.ready)? `, ${val.status.ready}` : '' }} {{ (val.status.reason.reason) ? `- ${val.status.reason.reason} (exit code: ${val.status.reason.exitCode})` :''}}</dd>
 								<dt v-if="val.lastState" class="col-sm-2">Last Status</dt>
 								<dd v-if="val.lastState" class="col-sm-10">
 									<ul class="list-unstyled mb-0">
@@ -234,10 +234,17 @@ export default {
 					}
 				})
 			}
-
 		});
 	},
 	methods: {
+		onClickShowLogs(name) {
+			let containerList = []
+			this.containers.forEach(item =>{
+				containerList.push(item.name);
+			})
+			this.$nuxt.$emit("open-terminal", this.metadata.name, "logs", { metadata: this.metadata, container:name, containers:containerList });
+			this.$parent.$parent.$emit('close')
+		},
 		getContainers(d, type) {
 			let specCons = []
 			let statusCon = type ?  d.status.initContainerStatuses : d.status.containerStatuses;
diff --git a/src/app/frontend/pages/workload/replicaset.list.vue b/src/app/frontend/pages/workload/replicaset.list.vue
index 702226b38..ee119591c 100644
--- a/src/app/frontend/pages/workload/replicaset.list.vue
+++ b/src/app/frontend/pages/workload/replicaset.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Workload"></c-navigator>
diff --git a/src/app/frontend/pages/workload/statefulset.list.vue b/src/app/frontend/pages/workload/statefulset.list.vue
index 7aad8443a..67e3234f9 100644
--- a/src/app/frontend/pages/workload/statefulset.list.vue
+++ b/src/app/frontend/pages/workload/statefulset.list.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-wrapper">
+  <div class="content-wrapper">
 		<section class="content-header">
 			<div class="container-fluid">
 				<c-navigator group="Workload"></c-navigator>
diff --git a/src/app/frontend/plugins/adminLte/css/alt/adminlte.core.css b/src/app/frontend/plugins/adminLte/css/alt/adminlte.core.css
index 83fa6566b..4806679c6 100644
--- a/src/app/frontend/plugins/adminLte/css/alt/adminlte.core.css
+++ b/src/app/frontend/plugins/adminLte/css/alt/adminlte.core.css
@@ -3907,7 +3907,6 @@ input[type="button"].btn-block {
 }
 
 .nav-tabs .nav-link {
-  border: 1px solid transparent;
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
 }
@@ -3926,7 +3925,6 @@ input[type="button"].btn-block {
 .nav-tabs .nav-item.show .nav-link {
   color: #495057;
   background-color: #ffffff;
-  border-color: #dee2e6 #dee2e6 #ffffff;
 }
 
 .nav-tabs .dropdown-menu {
diff --git a/src/app/frontend/plugins/adminLte/js/adminlte.js b/src/app/frontend/plugins/adminLte/js/adminlte.js
index 65f07cf53..0ff9203eb 100644
--- a/src/app/frontend/plugins/adminLte/js/adminlte.js
+++ b/src/app/frontend/plugins/adminLte/js/adminlte.js
@@ -1603,6 +1603,7 @@
   var SELECTOR_CONTROL_SIDEBAR_CONTENT = '.control-sidebar-content';
   var SELECTOR_CONTROL_SIDEBAR_BTN = '[data-widget="control-sidebar"]';
   var SELECTOR_FOOTER = '.main-footer';
+  var SELECTOR_LOG = '.main-log';
   var SELECTOR_PUSHMENU_BTN = '[data-widget="pushmenu"]';
   var SELECTOR_LOGIN_BOX = '.login-box';
   var SELECTOR_REGISTER_BOX = '.register-box';
@@ -1650,6 +1651,7 @@
         window: $__default['default'](window).height(),
         header: $__default['default'](SELECTOR_HEADER).length > 0 ? $__default['default'](SELECTOR_HEADER).outerHeight() : 0,
         footer: $__default['default'](SELECTOR_FOOTER).length > 0 ? $__default['default'](SELECTOR_FOOTER).outerHeight() : 0,
+        log: $__default['default'](SELECTOR_LOG).length > 0 ? $__default['default'](SELECTOR_LOG).outerHeight() : 0,
         sidebar: $__default['default'](SELECTOR_SIDEBAR$1).length > 0 ? $__default['default'](SELECTOR_SIDEBAR$1).height() : 0,
         controlSidebar: controlSidebar
       };
@@ -1668,13 +1670,13 @@
         if (max === heights.controlSidebar) {
           $contentSelector.css(this._config.panelAutoHeightMode, max + offset);
         } else if (max === heights.window) {
-          $contentSelector.css(this._config.panelAutoHeightMode, max + offset - heights.header - heights.footer);
+          $contentSelector.css(this._config.panelAutoHeightMode, max + offset - heights.header - heights.log - heights.footer);
         } else {
           $contentSelector.css(this._config.panelAutoHeightMode, max + offset - heights.header);
         }
 
         if (this._isFooterFixed()) {
-          $contentSelector.css(this._config.panelAutoHeightMode, parseFloat($contentSelector.css(this._config.panelAutoHeightMode)) + heights.footer);
+          $contentSelector.css(this._config.panelAutoHeightMode, parseFloat($contentSelector.css(this._config.panelAutoHeightMode)) + heights.log + heights.footer);
         }
       }
 
diff --git a/src/app/frontend/plugins/mixin-common-methods.js b/src/app/frontend/plugins/mixin-common-methods.js
index 7a9164809..e2d5c743a 100644
--- a/src/app/frontend/plugins/mixin-common-methods.js
+++ b/src/app/frontend/plugins/mixin-common-methods.js
@@ -160,7 +160,7 @@ Vue.mixin({
 			}
 		},
 		getApiUrl(group, rscName, namespace, name, query) {
-			if(!namespace) namespace = ''
+			if(!namespace) namespace = '';
 			let resource = this.resources()[group][rscName];
 			if (resource) {
 				let url
@@ -169,7 +169,7 @@ Vue.mixin({
 				}else {
 					url = `/raw/clusters/${this.currentContext()}/${group ? "apis" : "api"}/${resource.groupVersion}/${resource.name}`;
 				}
-				return name ? `${url}/${name}${query ? '?' + query : ''}` : url+ (query ? '?' + query : '');
+				return name ? `${url}/${name}${query ? '?' + query : ''}` : url + (query ? '?' + query : '');
 			} else {
 				return "#";
 			}
@@ -203,6 +203,6 @@ Vue.mixin({
 			if(_ === "") this.$store.commit("setStatusbar", _);
 			if (_) this.$store.commit("setStatusbar", _);
 			else return this.$store.getters["getStatusbar"];
-		},
+		}
 	},
 });
\ No newline at end of file
diff --git a/src/app/frontend/store/index.js b/src/app/frontend/store/index.js
index 8483ece67..8759c1669 100644
--- a/src/app/frontend/store/index.js
+++ b/src/app/frontend/store/index.js
@@ -28,7 +28,7 @@ export const mutations = {
 	},
 	setStatusbar(state, statusbar) {
 		state.statusbar = statusbar;
-	},
+	}
 };
 export const getters = {
 	getCurrentContext(state) {
@@ -48,5 +48,5 @@ export const getters = {
 	},
 	getStatusbar(state) {
 		return state.statusbar;
-	},
+	}
 };