diff --git a/index.html b/index.html
index f539f2e..311051a 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,7 @@
     <link rel="manifest" href="src/index.webmanifest" />
     
     <script src="https://polyfill.web-cell.dev/feature/PWAManifest.js"></script>
-    <link
-        rel="stylesheet"
-        href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-    />
+
     <script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
     <script src="https://polyfill.web-cell.dev/feature/WebComponents.js"></script>
     <script src="https://polyfill.web-cell.dev/feature/ElementInternals.js"></script>
diff --git a/src/App.tsx b/src/App.tsx
index f86373a..45a0589 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,9 +24,11 @@ export class GitHubApp extends HTMLElement {
         return (
             <>
                 <NavBar />
-                <div className="container" id="PageBox">
-                    <CellRouter routes={this.routes} />
-                </div>
+                <main className="grid" id="PageBox">
+                    <div className="s12">
+                        <CellRouter routes={this.routes} />
+                    </div>
+                </main>
             </>
         );
     }
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index ccc8379..4d98d83 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,7 +1,8 @@
 import { FC } from 'web-cell';
 
 export const Loading: FC = () => (
-    <div className="text-center">
-        <div className="spinner">加载中...</div>
+    <div className="center-align">
+        <progress className="circle"></progress>
+        <p>加载中...</p>
     </div>
 );
\ No newline at end of file
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 8ff7a1f..79ef94b 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -66,54 +66,43 @@ export class NavBar extends HTMLElement {
 
     render() {
         return (
-            <nav className={`navbar navbar-fixed-top ${this.dark ? 'navbar-inverse' : ''}`}>
-                <div className="container">
-                    <div className="navbar-header">
-                        <button
-                            type="button"
-                            className="navbar-toggle collapsed"
-                            data-toggle="collapse"
-                            data-target="#Main_Nav"
-                            aria-expanded="false"
-                        >
-                            <span className="sr-only">Toggle navigation</span>
-                            <span className="icon-bar"></span>
-                            <span className="icon-bar"></span>
-                            <span className="icon-bar"></span>
-                        </button>
-                        <a className="navbar-brand" href="#/" title="返回首页">
-                            {this.title}
-                        </a>
-                    </div>
-
-                    <div className="collapse navbar-collapse" id="Main_Nav">
-                        <form className="navbar-form navbar-left" id="search-form">
-                            <div className="form-group">
-                                <input
-                                    type="search"
-                                    className="form-control"
-                                    name="keyword"
-                                    required
-                                    placeholder="定位：用户 ID、仓库全名"
-                                />
-                            </div>
-                        </form>
-
-                        <ul className="nav navbar-nav">
-                            {this.channels.map(({ title, name, URL, target }, index) => (
-                                <li role={URL ? '' : 'separator'} className={URL ? '' : 'divider'}>
-                                    <a
-                                        target={target || ''}
-                                        href={URL}
-                                        title={name}
-                                        data-autofocus={index === 0 ? 'true' : undefined}
-                                    >
-                                        {title}
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
+            <nav className="top">
+                <h5>
+                    <a href="#/" title="返回首页">
+                        {this.title}
+                    </a>
+                </h5>
+                <div className="max">
+                    <form id="search-form">
+                        <div className="field border">
+                            <input
+                                type="search"
+                                name="keyword"
+                                required
+                                placeholder="定位：用户 ID、仓库全名"
+                            />
+                        </div>
+                    </form>
+                    <a>
+                        <i>menu</i>
+                    </a>
+                    <nav className="drawer">
+                        {this.channels.map(({ title, name, URL, target }, index) => (
+                            <a
+                                key={title}
+                                target={target || ''}
+                                href={URL}
+                                title={name}
+                                data-autofocus={index === 0 ? 'true' : undefined}
+                            >
+                                <i>link</i>
+                                <div>
+                                    <div>{title}</div>
+                                    {name && <div>{name}</div>}
+                                </div>
+                            </a>
+                        ))}
+                    </nav>
                 </div>
             </nav>
         );
diff --git a/src/main.tsx b/src/main.tsx
index d46e641..4cba856 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import { auto } from 'browser-unhandled-rejection';
 import { DOMRenderer } from 'dom-renderer';
 import { configure } from 'mobx';
 import { documentReady, serviceWorkerUpdate } from 'web-utility';
+import 'beercss';
 
 import { GitHubApp } from './App';
 import { renderMode } from './utility';
diff --git a/src/page/Gists.tsx b/src/page/Gists.tsx
index 7b81177..fcdb8e4 100644
--- a/src/page/Gists.tsx
+++ b/src/page/Gists.tsx
@@ -29,22 +29,24 @@ export default class GistsPage extends HTMLElement {
         if (downloading) return <Loading />;
 
         return (
-            <div className="row">
-                <div className="col-md-12">
+            <div className="grid">
+                <div className="s12">
                     <h2>GitHub Gists (G 锦)</h2>
-                    <table className="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th>序号</th>
-                                <th>标题</th>
-                                <th>创建时间</th>
-                                <th>更新时间</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {gists.map(this.renderGistRow)}
-                        </tbody>
-                    </table>
+                    <div className="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>序号</th>
+                                    <th>标题</th>
+                                    <th>创建时间</th>
+                                    <th>更新时间</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {gists.map(this.renderGistRow)}
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         );
diff --git a/src/page/Home.tsx b/src/page/Home.tsx
index 235fef9..29e0251 100644
--- a/src/page/Home.tsx
+++ b/src/page/Home.tsx
@@ -1,15 +1,15 @@
 export function HomePage() {
   return (
-    <div className="row">
-      <div className="col-md-12">
-        <div className="jumbotron">
+    <div className="grid">
+      <div className="s12">
+        <div className="large-space center-align">
           <h1>GitHub 中文版</h1>
-          <p>基于 WebCell v3 重写的现代化 GitHub 浏览器</p>
-          <p>
-            <a className="btn btn-primary btn-lg" href="#/events" role="button">查看 G 流</a>
-            <a className="btn btn-success btn-lg" href="#/repos" role="button">浏览 G 仓</a>
-            <a className="btn btn-info btn-lg" href="#/users" role="button">发现 G 友</a>
-          </p>
+          <p className="large-text">基于 WebCell v3 重写的现代化 GitHub 浏览器</p>
+          <div className="space">
+            <a className="button large fill" href="#/events" role="button">查看 G 流</a>
+            <a className="button large fill" href="#/repos" role="button">浏览 G 仓</a>
+            <a className="button large fill" href="#/users" role="button">发现 G 友</a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/page/User.tsx b/src/page/User.tsx
index 804d353..e768db6 100644
--- a/src/page/User.tsx
+++ b/src/page/User.tsx
@@ -22,44 +22,44 @@ export default class UserPage extends HTMLElement {
         if (!user) return <div>用户不存在</div>;
 
         return (
-            <div className="row">
-                <div className="col-md-4">
-                    <div className="panel panel-default">
-                        <div className="panel-body text-center">
+            <div className="grid">
+                <div className="s12 m4">
+                    <article className="card">
+                        <div className="center-align">
                             <img
                                 src={user.avatar_url}
-                                className="img-circle"
+                                className="circle"
                                 width={150}
                                 height={150}
                                 alt={user.login}
                             />
-                            <h3>{user.name || user.login}</h3>
-                            <p className="text-muted">@{user.login}</p>
+                            <h4>{user.name || user.login}</h4>
+                            <p className="secondary-text">@{user.login}</p>
                             {user.bio && <p>{user.bio}</p>}
-                            <div className="row">
-                                <div className="col-xs-4">
+                            <div className="grid no-space">
+                                <div className="s4">
                                     <strong>{user.public_repos}</strong>
                                     <br />
                                     <small>仓库</small>
                                 </div>
-                                <div className="col-xs-4">
+                                <div className="s4">
                                     <strong>{user.followers}</strong>
                                     <br />
                                     <small>关注者</small>
                                 </div>
-                                <div className="col-xs-4">
+                                <div className="s4">
                                     <strong>{user.following}</strong>
                                     <br />
                                     <small>关注</small>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </article>
                 </div>
-                <div className="col-md-8">
-                    <h3>用户信息</h3>
-                    <div className="panel panel-default">
-                        <div className="panel-body">
+                <div className="s12 m8">
+                    <h4>用户信息</h4>
+                    <article className="card">
+                        <div>
                             {user.company && (
                                 <p>
                                     <strong>公司:</strong> {user.company}
@@ -77,7 +77,7 @@ export default class UserPage extends HTMLElement {
                                 </a>
                             </p>
                         </div>
-                    </div>
+                    </article>
                 </div>
             </div>
         );
diff --git a/src/page/Users.tsx b/src/page/Users.tsx
index 5284fbc..23957dc 100644
--- a/src/page/Users.tsx
+++ b/src/page/Users.tsx
@@ -12,24 +12,24 @@ export default class UsersPage extends HTMLElement {
     }
 
     renderUserCard = ({ avatar_url, login, id }: User) => (
-        <div key={id} className="col-md-4 col-sm-6">
-            <div className="panel panel-default">
-                <div className="panel-body text-center">
+        <div key={id} className="s12 m6 l4">
+            <article className="card">
+                <div className="center-align">
                     <img
                         src={avatar_url}
-                        className="img-circle"
+                        className="circle"
                         width={64}
                         height={64}
                         alt={login}
                     />
-                    <h4>
+                    <h5>
                         <a href={`#/users/${login}`}>{login}</a>
-                    </h4>
+                    </h5>
                     <p>
                         <small>ID: {id}</small>
                     </p>
                 </div>
-            </div>
+            </article>
         </div>
     );
 
@@ -39,10 +39,10 @@ export default class UsersPage extends HTMLElement {
         if (downloading > 0) return <Loading />;
 
         return (
-            <div className="row">
-                <div className="col-md-12">
+            <div className="grid">
+                <div className="s12">
                     <h2>GitHub 用户 (G 友)</h2>
-                    <div className="row">
+                    <div className="grid">
                         {users.map(this.renderUserCard)}
                     </div>
                 </div>