diff --git a/src/component/Connection/Nav.tsx b/src/component/Connection/Nav.tsx
index d681455..bd2a023 100644
--- a/src/component/Connection/Nav.tsx
+++ b/src/component/Connection/Nav.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { ReactElement, useContext } from 'react';
-import { Button } from 'antd';
+import { Button, Menu } from 'antd';
 import { ConnectionContext } from '../../Contexts';
 
 export default function Nav(): ReactElement {
@@ -10,30 +10,36 @@ export default function Nav(): ReactElement {
     currentConnectionName,
   } = useContext(ConnectionContext);
 
-  return (
-    <nav className="nav nav-pills flex-column">
-      {connectionNameList.map((connection, i) => (
-        <Button
-          block
-          type={connection === currentConnectionName ? 'primary' : 'link'}
-        >
-          <Link
-            key={i}
-            onClick={() => {
-              setCurrentConnectionName(connection);
-            }}
-            to="/tables"
-          >
-            {/* {connection.config.host &&
-            connection.config.host.substr(0, 1).toUpperCase()} */}
+  if (!connectionNameList.length) {
+    return null;
+  }
+
+  const items = connectionNameList.map((connection) => ({
+    key: connection,
+    label: (
+      <Link
+        onClick={() => {
+          setCurrentConnectionName(connection);
+        }}
+        to="/tables"
+      >
+        {connection}
+      </Link>
+    ),
+  }));
 
-            {connection}
-          </Link>
-        </Button>
-      ))}
-      <Button type="link" block>
+  return (
+    <>
+      <Button style={{ margin: '0 10px' }}>
         <Link to="/connect">new…</Link>
       </Button>
-    </nav>
+
+      <Menu
+        mode="horizontal"
+        selectedKeys={[currentConnectionName]}
+        items={items}
+        style={{ flex: 1, minWidth: 0 }}
+      />
+    </>
   );
 }
diff --git a/src/routes/root.tsx b/src/routes/root.tsx
index d6634b2..aa11260 100644
--- a/src/routes/root.tsx
+++ b/src/routes/root.tsx
@@ -9,6 +9,7 @@ import Debug from '../component/Debug';
 import ThemeSelector from '../component/ThemeSelector';
 import { Layout } from 'antd';
 import { getSetting } from '../theme';
+import ConnectionNav from '../component/Connection/Nav';
 
 const Header = styled(Layout.Header)`
   display: flex;
@@ -32,6 +33,9 @@ export default function Root() {
             <Debug />
             <Header>
               <h2>Tiana Tables</h2>
+
+              <ConnectionNav />
+
               <div>
                 Theme: <ThemeSelector />
               </div>
diff --git a/src/routes/tables.tsx b/src/routes/tables.tsx
index c3a3872..c925790 100644
--- a/src/routes/tables.tsx
+++ b/src/routes/tables.tsx
@@ -3,7 +3,6 @@ import { styled } from 'styled-components';
 import { getSetting } from '../theme';
 import DatabaseSelector from '../component/DatabaseSelector';
 import TableList from '../component/TableList';
-import ConnectionNav from '../component/Connection/Nav';
 
 const ContentDiv = styled.div`
   display: flex;
@@ -14,7 +13,6 @@ const LeftPanelDiv = styled.div`
   min-width: 200px;
   overflow: auto;
   padding: 0 10px;
-  border-left: 1px solid ${(props) => getSetting(props.theme, 'foreground')};
   border-right: 1px solid ${(props) => getSetting(props.theme, 'foreground')};
 `;
 
@@ -27,7 +25,6 @@ const RightPanelDiv = styled.div`
 export function Tables() {
   return (
     <ContentDiv>
-      <ConnectionNav />
       <LeftPanelDiv>
         <DatabaseSelector />
         <TableList />