diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..27b63cd
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "scss/srht"]
+	path = scss/srht
+	url = https://git.sr.ht/~sircmpwn/srht
diff --git a/scss/base.scss b/scss/base.scss
deleted file mode 100644
index 468b1c6..0000000
--- a/scss/base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "bootstrap";
-$fa-font-path: "../node_modules/font-awesome/fonts/";
-@import "font-awesome";
diff --git a/scss/main.scss b/scss/main.scss
new file mode 100644
index 0000000..32b72ec
--- /dev/null
+++ b/scss/main.scss
@@ -0,0 +1,37 @@
+@import "base";
+
+.table {
+  tbody td {
+    border: none;
+  }
+}
+
+.torrent {
+  &.paused {
+    color: $gray-dark;
+    background: $gray-lighter;
+  }
+
+  &.idle {
+    color: $gray-dark;
+  }
+
+  &.error {
+    background-color: $brand-danger;
+    color: $white;
+    a {
+      color: $white;
+      text-decoration: underline;
+    }
+  }
+
+  &.seeding {
+    background-image: linear-gradient(to right, lighten($brand-info, 20), $brand-info);
+  }
+
+  &.leeching {
+    background-image: linear-gradient(to right, lighten($brand-success, 20), $brand-success);
+  }
+
+  background-repeat: no-repeat;
+}
diff --git a/scss/srht b/scss/srht
new file mode 160000
index 0000000..1cea294
--- /dev/null
+++ b/scss/srht
@@ -0,0 +1 @@
+Subproject commit 1cea2941056108fe5fb17626ad9a45f4276c83eb
diff --git a/src/index.js b/src/index.js
index 07c8669..5204d12 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,13 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 
 import store from './store';
-import scss from '../scss/base.scss';
+import scss from '../scss/main.scss';
 import { ws_init } from './socket';
 import { filter_subscribe } from './actions/filter_subscribe';
 
+import Nav from './ui/navigation';
+import Main from './ui/main';
+
 ws_init(() => {
   store.dispatch(filter_subscribe());
   store.dispatch(filter_subscribe('server'));
@@ -14,9 +17,12 @@ ws_init(() => {
 
 render(
   <Provider store={store}>
-    <h1>
-      Hello world!
-    </h1>
+    <div>
+      <Nav />
+      <div className="container">
+        <Main />
+      </div>
+    </div>
   </Provider>,
   document.getElementById('root')
 );
diff --git a/src/ui/main.js b/src/ui/main.js
new file mode 100644
index 0000000..1c14dd8
--- /dev/null
+++ b/src/ui/main.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import TorrentTable from './torrent_table';
+
+export default class Main extends Component {
+  render() {
+    return (
+      <div className="row">
+        <div className="col-md-4">
+          <h3>Filter</h3>
+          <p>TODO</p>
+        </div>
+        <div className="col-md-8">
+          <h3>Torrents</h3>
+          <TorrentTable />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/ui/navigation.js b/src/ui/navigation.js
new file mode 100644
index 0000000..f6af0ca
--- /dev/null
+++ b/src/ui/navigation.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function render(props) {
+  return <nav className="navbar navbar-light navbar-toggleable-xl">
+    <span className="navbar-brand">receptor</span>
+    <div className="navbar-collapse collapse">
+      <ul className="navbar-nav mr-auto">
+        <li className="nav-item">
+          <a className="nav-link" href="#">all</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">leeching</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">seeding</a>
+        </li>
+      </ul>
+    </div>
+  </nav>;
+}
diff --git a/src/ui/torrent_table.js b/src/ui/torrent_table.js
new file mode 100644
index 0000000..85f9d07
--- /dev/null
+++ b/src/ui/torrent_table.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class TorrentTable extends Component {
+  render() {
+    const { torrents } = this.props;
+    return (
+      <table className="table">
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>up</th>
+            <th>down</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.values(torrents).map(t =>
+            <tr
+              key={t.id}
+              className={`torrent ${"seeding" || t.status}`}
+              style={{
+                backgroundSize: `${t.progress * 100}% 100%`
+              }}
+            >
+              <td>
+                <a href="#">
+                  {t.name}
+                </a>
+              </td>
+              <td>{t.rate_up}</td>
+              <td>{t.rate_down}</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default connect(state => ({ torrents: state.torrents }))(TorrentTable);
diff --git a/webpack.config.js b/webpack.config.js
index 12abb6e..7767de6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,10 +28,10 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               includePaths: [
-                path.resolve(__dirname, './node_modules/bootstrap/scss/'),
-                path.resolve(__dirname, './node_modules/font-awesome/scss/')
+                path.resolve(__dirname, './node_modules'),
+                path.resolve(__dirname, './scss/srht/srht/scss'),
               ]
-            }
+            },
           }
         ],
       }