diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..5d10124
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
+const Layout = () => {
+  return (
+    <div className="max-w-5xl mx-auto p-8 h-[100dvh]">
+      <Outlet />
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/main.tsx b/src/main.tsx
index 3cc61bc..e65c67e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,14 +1,29 @@
+import { StyleProvider } from '@ant-design/cssinjs';
 import 'antd/dist/reset.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import Layout from './components/Layout';
 import Home from './pages/Home';
+import Search from './pages/Search';
+import './tailwind.css';
 
-const router = createBrowserRouter([{ path: '/', element: <Home /> }]);
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { path: '/', element: <Home /> },
+      { path: '/search', element: <Search /> },
+    ],
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <StyleProvider hashPriority="high">
+      <RouterProvider router={router} />
+    </StyleProvider>
   </React.StrictMode>,
 );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8ca06e8..4bca63a 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,5 +1,36 @@
+import { Checkbox, Form, Input, List } from 'antd';
+
+const tips = [
+  '全文搜索，模糊搜索，简繁同搜，拼音，同音字。',
+  '有近 11 万篇中文博客文章（包含少量播客），共收录有 1.4K+ 博客。',
+  '搜索结果以匹配度排序，没有时间权重，这样更容易找到真正有价值的文章。',
+  '可以用 ";作者" 来筛选同作者的文章。数据库月度更新，如果你需要实时信息，请使用其他优美的搜索引擎。希望你能在这十几万篇文章里找到有用的东西。',
+  '如需添加收录，给我发消息 TG: @yzqzss / Email: yzqzss@othing.xyz',
+];
+
 const Home = () => {
-  return <div>Home</div>;
+  return (
+    <div className="flex justify-center items-center h-5/6 flex-col gap-3">
+      <Form
+        layout="inline"
+        className="w-full items-center gap-4 justify-center sm:flex-nowrap"
+      >
+        <Input.Search size="large" enterButton placeholder="请输入关键字" />
+        <Checkbox className="sm:w-32">展开全文</Checkbox>
+      </Form>
+      <List
+        dataSource={tips}
+        bordered
+        renderItem={(item) => (
+          <List.Item>
+            <ul>
+              <li>{item}</li>
+            </ul>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
 };
 
 export default Home;
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
new file mode 100644
index 0000000..8cd5c1b
--- /dev/null
+++ b/src/pages/Search.tsx
@@ -0,0 +1,5 @@
+const Search = () => {
+  return <div>Search</div>;
+};
+
+export default Search;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c19676a..ca317f6 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -8,4 +8,5 @@ module.exports = {
   corePlugins: {
     preflight: false,
   },
+  important: true,
 };