diff --git a/packages/app/src/components/Layout/topBar/index.jsx b/packages/app/src/components/Layout/topBar/index.jsx
index ff1d9a5a..a91a8332 100644
--- a/packages/app/src/components/Layout/topBar/index.jsx
+++ b/packages/app/src/components/Layout/topBar/index.jsx
@@ -2,32 +2,11 @@ import React from "react"
 import classnames from "classnames"
 import { Motion, spring } from "react-motion"
 
+import useLayoutInterface from "hooks/useLayoutInterface"
+import useDefaultVisibility from "hooks/useDefaultVisibility"
+
 import "./index.less"
 
-const useLayoutInterface = (namespace, ctx) => {
-    React.useEffect(() => {
-        if (app.layout["namespace"] === "object") {
-            throw new Error(`Layout namespace [${namespace}] already exists`)
-        }
-
-        app.layout[namespace] = ctx
-    }, [])
-
-    return app.layout[namespace]
-}
-
-const useDefaultVisibility = (defaultValue) => {
-    const [visible, setVisible] = React.useState(defaultValue ?? false)
-
-    React.useEffect(() => {
-        setTimeout(() => {
-            setVisible(true)
-        }, 10)
-    }, [])
-
-    return [visible, setVisible]
-}
-
 export const UseTopBar = (props) => {
     app.layout.top_bar.render(
         <React.Fragment>
@@ -124,8 +103,6 @@ export default (props) => {
 
     const heightValue = visible ? Number(app.cores.style.defaultVar("top-bar-height").replace("px", "")) : 0
 
-    console.log(render)
-
     return <Motion style={{
         y: spring(visible ? 0 : 300,),
         height: spring(heightValue,),
diff --git a/packages/app/src/components/Layout/topBar/index.less b/packages/app/src/components/Layout/topBar/index.less
index 9ca9ba14..5e44d3d0 100644
--- a/packages/app/src/components/Layout/topBar/index.less
+++ b/packages/app/src/components/Layout/topBar/index.less
@@ -8,9 +8,6 @@
     width: 100%;
     height: calc(@top_bar_height + @top_bar_padding * 2);
     min-height: calc(@top_bar_height + @top_bar_padding * 2);
-
-    //height: 0;
-    //min-height: 0;
 }
 
 .top-bar_wrapper {
@@ -44,7 +41,7 @@
 
     padding: 10px;
 
-    box-shadow: @card-shadow-top;
+    box-shadow: @card-shadow;
 
     transition: all 150ms ease-in-out;
 
diff --git a/packages/app/src/hooks/useDefaultVisibility/index.js b/packages/app/src/hooks/useDefaultVisibility/index.js
new file mode 100644
index 00000000..3f28f6ae
--- /dev/null
+++ b/packages/app/src/hooks/useDefaultVisibility/index.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export default (defaultValue) => {
+    const [visible, setVisible] = React.useState(defaultValue ?? false)
+
+    React.useEffect(() => {
+        setTimeout(() => {
+            setVisible(true)
+        }, 10)
+    }, [])
+
+    return [visible, setVisible]
+}
\ No newline at end of file
diff --git a/packages/app/src/hooks/useLayoutInterface/index.js b/packages/app/src/hooks/useLayoutInterface/index.js
new file mode 100644
index 00000000..d7948a96
--- /dev/null
+++ b/packages/app/src/hooks/useLayoutInterface/index.js
@@ -0,0 +1,13 @@
+import React from "react"
+
+export default (namespace, ctx) => {
+    React.useEffect(() => {
+        if (app.layout["namespace"] === "object") {
+            throw new Error(`Layout namespace [${namespace}] already exists`)
+        }
+
+        app.layout[namespace] = ctx
+    }, [])
+
+    return app.layout[namespace]
+}
\ No newline at end of file