diff --git a/components/ChatView/Header.tsx b/components/ChatView/Header.tsx
index a1d1606..0c30cb2 100644
--- a/components/ChatView/Header.tsx
+++ b/components/ChatView/Header.tsx
@@ -24,16 +24,16 @@ const Header = () => {
           </Menu.Button>
           <Menu.Items className="absolute left-0 top-full mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 outline-none p-1 space-y-1">
             <Menu.Item>
-              <Link className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100" href="/">
-                <Icon.Io.IoMdHome className="text-gray-600 w-5 h-auto mr-1" />
-                Home
+              <Link className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100" href="/about">
+                <Icon.Io.IoMdInformationCircleOutline className="text-gray-600 w-5 h-auto mr-1" />
+                About
               </Link>
             </Menu.Item>
             <Menu.Item>
               <a
+                className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100"
                 href="https://github.com/bytebase/sqlchat"
                 target="_blank"
-                className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100"
               >
                 <Icon.Io.IoLogoGithub className="text-gray-600 w-5 h-auto mr-1" /> GitHub
               </a>
diff --git a/components/ChatView/index.tsx b/components/ChatView/index.tsx
index 79e4932..72aafd3 100644
--- a/components/ChatView/index.tsx
+++ b/components/ChatView/index.tsx
@@ -70,10 +70,7 @@ const ChatView = () => {
   };
 
   return (
-    <main
-      ref={chatViewRef}
-      className="relative sm:border sm:rounded-lg sm:shadow w-full mx-auto h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white"
-    >
+    <main ref={chatViewRef} className="relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white">
       <Header />
       <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
         {messageList.length === 0 ? <></> : messageList.map((message) => <MessageView key={message.id} message={message} />)}
diff --git a/pages/about.tsx b/pages/about.tsx
new file mode 100644
index 0000000..4e04899
--- /dev/null
+++ b/pages/about.tsx
@@ -0,0 +1,34 @@
+import { NextPage } from "next";
+import Head from "next/head";
+import Link from "next/link";
+import React from "react";
+import Icon from "../components/Icon";
+
+const HomePage: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>SQL Chat</title>
+        <meta name="description" content="" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className="w-full h-full flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center justify-center px-4 py-16">
+          <h1 className="text-5xl font-extrabold text-gray-800 sm:text-6xl">SQL Chat</h1>
+          <div className="grid grid-cols-1 mt-8">
+            <Link
+              className="flex max-w-xs flex-row justify-center items-center rounded-xl bg-indigo-600 p-4 px-6 text-white shadow-lg hover:opacity-80"
+              href="/chat"
+            >
+              <Icon.Io.IoIosChatbubbles className="w-6 h-auto mr-2" />
+              <span className="text-xl font-medium">Chat →</span>
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default HomePage;
diff --git a/pages/chat.tsx b/pages/chat.tsx
deleted file mode 100644
index 8e7f8a9..0000000
--- a/pages/chat.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NextPage } from "next";
-import Head from "next/head";
-import React from "react";
-import ChatView from "../components/ChatView";
-
-const ChatPage: NextPage = () => {
-  return (
-    <div>
-      <Head>
-        <title>SQL Chat</title>
-        <meta name="description" content="" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className="w-full h-full flex flex-col justify-center items-center bg-gray-100">
-        <div className="w-full h-full md:w-4/5 md:max-w-4xl md:h-5/6">
-          <ChatView />
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default ChatPage;
diff --git a/pages/index.tsx b/pages/index.tsx
index 4e04899..8a3b151 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,34 +1,22 @@
 import { NextPage } from "next";
 import Head from "next/head";
-import Link from "next/link";
 import React from "react";
-import Icon from "../components/Icon";
+import ChatView from "../components/ChatView";
 
-const HomePage: NextPage = () => {
+const ChatPage: NextPage = () => {
   return (
-    <>
+    <div>
       <Head>
         <title>SQL Chat</title>
         <meta name="description" content="" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="w-full h-full flex flex-col items-center justify-center">
-        <div className="flex flex-col items-center justify-center px-4 py-16">
-          <h1 className="text-5xl font-extrabold text-gray-800 sm:text-6xl">SQL Chat</h1>
-          <div className="grid grid-cols-1 mt-8">
-            <Link
-              className="flex max-w-xs flex-row justify-center items-center rounded-xl bg-indigo-600 p-4 px-6 text-white shadow-lg hover:opacity-80"
-              href="/chat"
-            >
-              <Icon.Io.IoIosChatbubbles className="w-6 h-auto mr-2" />
-              <span className="text-xl font-medium">Chat →</span>
-            </Link>
-          </div>
-        </div>
+      <main className="w-full h-full flex flex-col justify-center items-center bg-gray-100">
+        <ChatView />
       </main>
-    </>
+    </div>
   );
 };
 
-export default HomePage;
+export default ChatPage;
