diff --git a/package.json b/package.json
index 7ce6fa5..330154b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@blueprintjs/core": "^4.9.3",
     "@blueprintjs/datetime2": "^0.5.5",
     "@blueprintjs/icons": "^4.4.1",
+    "@blueprintjs/popover2": "^1.12.0",
     "@notionhq/client": "^2.1.1",
     "@tauri-apps/api": "^1.0.2",
     "react": "^18.2.0",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 461a545..11bd4f9 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -6,7 +6,7 @@
     "distDir": "../dist"
   },
   "package": {
-    "productName": "daily-notion",
+    "productName": "Daily Notion",
     "version": "../package.json"
   },
   "tauri": {
@@ -26,7 +26,8 @@
     "bundle": {
       "active": true,
       "category": "Productivity",
-      "copyright": "Copyright (c) 2022 hi_go",
+      "publisher": "hi_go",
+      "copyright": "Copyright (c) 2023 hi_go",
       "deb": {
         "depends": []
       },
@@ -47,7 +48,7 @@
         "signingIdentity": null
       },
       "resources": [],
-      "shortDescription": "",
+      "shortDescription": "A simple daily notes application using Notion API.",
       "targets": "all",
       "windows": {
         "certificateThumbprint": null,
@@ -65,9 +66,11 @@
       {
         "fullscreen": false,
         "height": 600,
+        "minHeight": 300,
         "resizable": true,
         "title": "Daily Notion",
-        "width": 800
+        "width": 800,
+        "minWidth": 400
       }
     ]
   }
diff --git a/src/App.css b/src/App.css
index 5b713f6..08923e6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,4 +5,10 @@ div#root,
 .Notepad {
   height: 100%;
   box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+.App{
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+}
diff --git a/src/App.tsx b/src/App.tsx
index e755871..72d55e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import { format } from "date-fns";
 
 import { Navigation } from './Components/Navigation';
 import { Notepad } from './Components/Notepad';
+import { Classes } from '@blueprintjs/core';
 
 export class App extends React.Component<any, { dateStr: string, syncStatus: SyncStatus }> {
   constructor(props: any) {
@@ -21,7 +22,7 @@ export class App extends React.Component<any, { dateStr: string, syncStatus: Syn
 
   render() {
     return (
-      <div className="App">
+      <div className={"App"}>
         <Navigation onDateChange={this.handleDateChange} syncStatus={this.state.syncStatus}/>
         <Notepad dateStr={this.state.dateStr} onChangeStatus={this.handleSyncStatusChange}/>
       </div>
diff --git a/src/Auth.tsx b/src/Auth.tsx
new file mode 100644
index 0000000..5751383
--- /dev/null
+++ b/src/Auth.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { AuthInput } from "./Components/AuthInput";
+import { Navigation } from "./Components/Navigation";
+
+export class Auth extends React.Component<any, {
+    isAuthSucceeded: boolean,
+}> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            isAuthSucceeded: false,
+        };
+    }
+
+    render() {
+        if(this.state.isAuthSucceeded){
+                return(<Navigate to="/"/>);
+        }
+
+        return (
+            <div className={"Auth"}>
+                <Navigation 
+                onDateChange={()=>{}}
+                syncStatus="OK"
+                />
+                <AuthInput
+                    token={localStorage.getItem('token') ?? ''}
+                    dbId={localStorage.getItem('dbId') ?? ''}
+                    onClosed={() => {
+                        this.setState({isAuthSucceeded:true});
+                    }} />
+            </div>
+        );
+    }
+}  
\ No newline at end of file
diff --git a/src/Components/DateSelector.tsx b/src/Components/DateSelector.tsx
index 99e344e..12b421f 100644
--- a/src/Components/DateSelector.tsx
+++ b/src/Components/DateSelector.tsx
@@ -2,6 +2,10 @@ import { AnchorButton, NavbarGroup } from "@blueprintjs/core";
 import { DateInput2 } from "@blueprintjs/datetime2";
 import { format, parse } from "date-fns";
 import React from "react";
+import "@blueprintjs/datetime2/lib/css/blueprint-datetime2.css";
+import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
+import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
+import "@blueprintjs/select/lib/css/blueprint-select.css";
 
 export class DateSelector extends React.Component<
     { onDateChange: (dateValue: Date) => void },
diff --git a/src/Components/MainMenu.tsx b/src/Components/MainMenu.tsx
new file mode 100644
index 0000000..4989fd9
--- /dev/null
+++ b/src/Components/MainMenu.tsx
@@ -0,0 +1,46 @@
+import { AnchorButton, Menu, MenuDivider, MenuItem, Position } from "@blueprintjs/core";
+import { MenuItem2, PlacementOptions, Popover2 } from "@blueprintjs/popover2";
+import React from "react";
+import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
+
+export class MainMenu extends React.Component<
+    {
+    }, {
+    }> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+        };
+    }
+
+    render() {
+        return (
+            <Popover2
+                content={this.getContent()}
+                placement={"bottom"}
+                interactionKind="click"
+                modifiers= {{
+                    arrow: { enabled: true },
+                    flip: { enabled: true },
+                    preventOverflow: { enabled: true },
+                }}
+            >
+                <AnchorButton icon='menu' />
+            </Popover2>
+        );
+    }
+
+    getContent() {
+        return (
+            <Menu>
+                <MenuItem2 icon="cog" text="Settings">
+                    <MenuItem2 icon="key" text={"Authentication"} href="/auth"/>
+                    <MenuItem2 icon="settings" text={"Preferenses"} href="/preferenses" disabled/>
+                </MenuItem2>
+                <MenuItem2 icon="blank" text="About" href="/about" disabled/>
+                <MenuDivider />
+                <MenuItem2 icon="small-cross" text="Exit" onClick={()=>{window.close()}}/>
+            </Menu>
+        );
+    }
+}  
\ No newline at end of file
diff --git a/src/Components/Navigation.tsx b/src/Components/Navigation.tsx
index 293b3a0..f6512a9 100644
--- a/src/Components/Navigation.tsx
+++ b/src/Components/Navigation.tsx
@@ -11,39 +11,64 @@ import {
 } from "@blueprintjs/core";
 import { DateSelector } from "./DateSelector";
 import { SyncStatus } from "../App";
+import { MainMenu } from "./MainMenu";
 
-export class Navigation extends React.Component<{ onDateChange: (dateValue: Date) => void , syncStatus: SyncStatus}> {
+export class Navigation extends React.Component<
+  {
+    onDateChange: (dateValue: Date) => void,
+    syncStatus: SyncStatus
+  },
+  {
+    isMenuOpen: boolean,
+  }> {
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      isMenuOpen: false,
+    };
+  }
   render() {
-    let icon : IconName = 'updated';
-    let intent : Intent = 'success';
+    let icon: IconName = 'updated';
+    let intent: Intent = 'success';
     let loading = true;
-    if(this.props.syncStatus === 'Uploading' || this.props.syncStatus === 'Downloading'){
+    if (this.props.syncStatus === 'Uploading' || this.props.syncStatus === 'Downloading') {
       loading = true;
       intent = 'none';
-    }else if(this.props.syncStatus === 'OK'){
+    } else if (this.props.syncStatus === 'OK') {
       loading = false;
       icon = 'updated';
       intent = 'success';
-    }else{
+    } else {
       loading = true;
       icon = 'error';
       intent = 'danger';
     }
     return (
-      <Navbar className={Classes.DARK}>
-        <NavbarGroup align={Alignment.LEFT}>
-          <AnchorButton icon='menu' />
-          <NavbarDivider />
-          <DateSelector onDateChange={this.handleDateChange}/>
-        </NavbarGroup>
-        <NavbarGroup align={Alignment.RIGHT}>
-          <AnchorButton minimal icon= {icon} loading={loading} intent={intent}/>
-        </NavbarGroup>
-      </Navbar>
+      <div id="navigation">
+        <Navbar className={Classes.DARK}>
+          <NavbarGroup align={Alignment.LEFT}>
+            <MainMenu />
+            <NavbarDivider />
+            <DateSelector onDateChange={this.handleDateChange} />
+          </NavbarGroup>
+          <NavbarGroup align={Alignment.RIGHT}>
+            <AnchorButton minimal icon={icon} loading={loading} intent={intent} />
+          </NavbarGroup>
+        </Navbar>
+      </div>
     );
   }
 
   handleDateChange = (dateValue: Date) => {
     this.props.onDateChange(dateValue);
   }
+
+  handleClickMenuButton = () => {
+    if(this.state.isMenuOpen){
+      this.setState({isMenuOpen:false});
+    }else{
+      this.setState({isMenuOpen:true});
+    }
+  }
 };
diff --git a/src/Components/Notepad.css b/src/Components/Notepad.css
new file mode 100644
index 0000000..571c329
--- /dev/null
+++ b/src/Components/Notepad.css
@@ -0,0 +1,5 @@
+#notepadText{
+    flex-grow: 100;
+    flex-shrink: 100;
+    resize: none;
+}
\ No newline at end of file
diff --git a/src/Components/Notepad.tsx b/src/Components/Notepad.tsx
index 15e1ca0..854cfe9 100644
--- a/src/Components/Notepad.tsx
+++ b/src/Components/Notepad.tsx
@@ -1,9 +1,9 @@
 import { TextArea, NonIdealState, Spinner } from "@blueprintjs/core";
 import React from "react";
+import { Navigate } from "react-router-dom";
 import { SyncStatus } from "../App";
 import { NotionHandler } from "../Data/NotionHandler";
-import { AuthInput } from "./AuthInput";
-
+import './Notepad.css';
 export class Notepad extends React.Component<{
     dateStr: string,
     onChangeStatus: (syncStatus: SyncStatus) => void,
@@ -38,27 +38,17 @@ export class Notepad extends React.Component<{
                 />);
         }
 
-        if (!this.state.isConnectivityVerified) {
-            return (
-                <AuthInput
-                    token={localStorage.getItem('token') ?? ''}
-                    dbId={localStorage.getItem('dbId') ?? ''}
-                    onClosed={() => {
-                        this.setState({ isConnectivityVerified: true });
-                        this.notionHandler = new NotionHandler(localStorage.getItem('token') ?? '', localStorage.getItem('dbId') ?? '');
-                        this.loadFromNotion(this.props.dateStr);
-                    }}
-                />
-            );
+        if(!this.state.isConnectivityVerified){
+            return(<Navigate to="/auth"/>);
         }
 
         return (
             <TextArea
+                id="notepadText"
                 fill
                 placeholder='Enter some text here...'
                 onChange={this.handleChange}
                 className={'mainText'}
-                style={{ height: "100%" }}
                 value={this.state.text}
             />
         );
diff --git a/src/main.tsx b/src/main.tsx
index f0be86b..292b224 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { Classes } from "@blueprintjs/core";
 import ReactDOM from "react-dom/client";
 import {
   createBrowserRouter,
@@ -6,17 +6,22 @@ import {
 } from "react-router-dom";
 
 import { App } from "./App";
+import { Auth } from "./Auth";
 import "./style.css";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <App  className={Classes.DARK}/>,
+  },
+  {
+    path: "/auth",
+    element: <Auth  className={Classes.DARK}/>,
   },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
+  //<React.StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  //</React.StrictMode>
 );