diff --git a/server/ui/src/Main.css b/server/ui/src/Main.css
index dbd98fb..ca460f1 100644
--- a/server/ui/src/Main.css
+++ b/server/ui/src/Main.css
@@ -1,24 +1,38 @@
-.table-fixed {
-    table-layout: fixed;
+html,
+body {
+  /* assumes we won't target screens with a width smaller than 320px */
+  min-width: 320px;
 }
 
-.search-name-col {
-    width: 50%;
-}
+/* globally disable dotted outlines on anchors */
+a:focus { outline: none; }
+a::-moz-focus-inner { border: 0; }
 
-.search-name-cell {
-    word-wrap: break-word;
-}
+.search-name-col { width: 50%; }
+.search-name-cell { word-wrap: break-word; }
 
-.navbar-purple {
-    background-color: #673ab7;
-    -webkit-box-shadow: 0 8px 6px -6px #999;
-    -moz-box-shadow: 0 8px 6px -6px #999;
-    box-shadow: 0 8px 6px -6px #999;
+.table-fixed { table-layout: fixed; }
+
+/* add padding to first and last cell */
+.table-padding th:first-child,
+.table-padding td:first-child { padding-left: 1em !important; }
+.table-padding th:last-child,
+.table-padding td:last-child { padding-right: 1em !important; }
+
+/* Colors */
+.navbar-purple { background-color: #673ab7; }
+.table-hover-purple tbody tr:hover { background-color: rgba(103, 58, 183, 0.2) !important; }
+
+/* Boostrap fixes */
+.rounded-right {
+  /* disable radius on left when using on right side */
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .no-outline,
 .no-outline:focus {
+  /* disable colored outline on btn or input */
   box-shadow: none !important;
   outline: none !important;
 }
diff --git a/server/ui/src/components/home.tsx b/server/ui/src/components/home.tsx
index 366530b..bcf03b7 100644
--- a/server/ui/src/components/home.tsx
+++ b/server/ui/src/components/home.tsx
@@ -13,14 +13,12 @@ export class Home extends Component<any, any> {
 
   onboard() {
     return (
-      <div>
-        <br />
+      <p class="text-justify">
         <a href={repoUrl}>Torrents.csv</a> is a <i>collaborative</i> git repository of torrents, consisting of a single, searchable <code>torrents.csv</code> file. Its initially populated with a January 2017 backup of the pirate bay, and new torrents are periodically added from various torrents sites. It comes with a self-hostable webserver, a command line search, and a folder scanner to add torrents.<br /><br />
         <a href={repoUrl}>Torrents.csv</a> will only store torrents with at least one seeder to keep the file small, will be periodically purged of non-seeded torrents, and sorted by seeders descending.<br /><br />
         To request more torrents, or add your own, go <a href={repoUrl}>here</a>.<br /><br />
         Made with <a href="https://www.rust-lang.org">Rust</a>, <a href="https://github.com/BurntSushi/ripgrep">ripgrep</a>, <a href="https://actix.rs/">Actix</a>, <a href="https://www.infernojs.org">Inferno</a>, and <a href="https://www.typescriptlang.org/">Typescript</a>.
-
-      </div>
+      </p>
     );
   }
 
diff --git a/server/ui/src/components/navbar.tsx b/server/ui/src/components/navbar.tsx
index f4a63a7..6f55bd0 100644
--- a/server/ui/src/components/navbar.tsx
+++ b/server/ui/src/components/navbar.tsx
@@ -23,35 +23,33 @@ export class Navbar extends Component<any, State> {
 
   render() {
     return (
-      <div>{this.navbar()}</div>
+      <div class="sticky-top">{this.navbar()}</div>
     )
   }
 
   navbar() {
     return (
-      <nav class="navbar navbar-dark navbar-purple py-1 mb-3">
+      <nav class="navbar navbar-dark navbar-purple p-2 p-sm-1 shadow">
         <a class="navbar-brand mx-1" href="#">
-          <i class="fas fa-fw fa-database mr-1"></i>
+          <i class="fas fa-fw fa-database mr-2"></i>
           Torrents.csv
         </a>
+        <div class="navbar-nav ml-auto mr-2">
+          <a class="nav-item nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
+        </div>
         {this.searchForm()}
-        <ul class="navbar-nav mx-1">
-          <li class="nav-item">
-            <a class="nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
-          </li>
-        </ul>
       </nav>
     );
   }
 
   searchForm() {
     return (
-      <form class="form-inline col-7 col-sm-8 col-xl-10 mx-1 my-0" onSubmit={linkEvent(this, this.search)}>
+      <form class="form-inline col-12 col-sm-8 col-md-9 col-xl-10 mx-0 mx-sm-1 my-1 my-sm-0 p-0" onSubmit={linkEvent(this, this.search)}>
         <div class="input-group w-100">
-          <input class="form-control border-0 rounded-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
+          <input class="form-control border-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
                  value={this.state.searchParams.q}
                  onInput={linkEvent(this, this.searchChange)}></input>
-          <button class="btn btn-secondary border-0 rounded-0 no-outline" type="submit">
+          <button class="btn btn-secondary border-0 rounded-right no-outline" type="submit">
             <i className="fas fa-fw fa-search"></i>
           </button>
         </div>
diff --git a/server/ui/src/components/search.tsx b/server/ui/src/components/search.tsx
index 578448a..783f4e2 100644
--- a/server/ui/src/components/search.tsx
+++ b/server/ui/src/components/search.tsx
@@ -68,22 +68,19 @@ export class Search extends Component<any, State> {
 
   fetchData(searchParams: SearchParams): Promise<Results> {
     let q = encodeURI(searchParams.q);
-    // Ability to have more rows per page ?
-    return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}`)
+    return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}&size=20`)
       .then(data => data.text())
       .then(csv => convertCsvToJson(csv));
   }
 
   render() {
     return (
-      <div className="container-fluid">
-        {
+      <div>{
           this.state.searching ?
             this.spinner()
             :
             this.state.results.torrents[0] ? this.table() : this.noResults()
-        }
-      </div>
+        }</div>
     );
   }
 
@@ -106,35 +103,42 @@ export class Search extends Component<any, State> {
   table() {
     return (
       <div>
-        <table class="table table-fixed table-sm table-hover border">
+        <table class="table table-fixed table-hover table-sm table-striped table-hover-purple table-padding">
           <thead>
             <tr>
-              <th class="align-middle search-name-col">Name</th>
-              <th class="align-middle text-right">Size</th>
-              <th class="align-middle text-right">Seeds</th>
-              <th class="align-middle text-right d-none d-md-table-cell">Leeches</th>
-              <th class="align-middle text-right d-none d-md-table-cell">Created</th>
-              <th></th>
+              <th class="border-0 align-middle search-name-col">Name</th>
+              <th class="border-0 align-middle text-right">Size</th>
+              <th class="border-0 align-middle text-right"><i class="fas fa-fw fa-arrow-up text-success d-inline d-md-none"></i><span class="d-none d-md-inline">Seeds</span></th>
+              <th class="border-0 align-middle text-right d-none d-md-table-cell">Leeches</th>
+              <th class="border-0 align-middle text-right d-none d-md-table-cell">Created</th>
+              <th class="border-0"></th>
             </tr>
           </thead>
           <tbody>
             {this.state.results.torrents.map(torrent => (
-              <tr class="clickable-row">
-                <td class="align-middle search-name-cell"><pre class="mx-1 my-0 text-truncate">{torrent.name}</pre></td>
+              <tr>
+                <td class="align-middle search-name-cell">{torrent.name}</td>
                 <td class="align-middle text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
-                <td class="align-middle text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
-                <td class="align-middle text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
+                <td class="align-middle text-right text-success"><i class="fas fa-fw fa-arrow-up d-none d-md-inline mr-1"></i>{torrent.seeders}</td>
+                <td class="align-middle text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down mr-1"></i>{torrent.leechers}</td>
                 <td class="align-middle text-right text-muted d-none d-md-table-cell"
                     data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
                     data-balloon-pos="down">
                       {moment(torrent.created_unix * 1000).fromNow()}
                 </td>
-                <td class="text-right">
-                  <a data-balloon="Magnet link" data-balloon-pos="left" class="btn btn-sm" href={magnetLink(torrent.infohash, torrent.name)}>
-                    <i class="fas fa-fw fa-magnet"></i>
+                <td class="align-middle text-center">
+                  <a class="btn btn-sm no-outline p-1"
+                     href={magnetLink(torrent.infohash, torrent.name)}
+                     data-balloon="Magnet link"
+                     data-balloon-pos="left">
+                       <i class="fas fa-fw fa-magnet"></i>
                   </a>
-                  <a data-balloon="Report Torrent" data-balloon-pos="left" class="btn btn-sm d-none d-md-inline" href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[assignee_id]=&issue[milestone_id]=&issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}>
-                    <i class="fas fa-fw fa-flag"></i>
+                  <a class="btn btn-sm no-outline p-1 d-none d-md-inline"
+                     href={`https://gitlab.com/dessalines/torrents.csv/issues/new?issue[title]=Report%20Torrent%20infohash%20${torrent.infohash}`}
+                     target="_blank"
+                     data-balloon="Report Torrent"
+                     data-balloon-pos="left">
+                      <i class="fas fa-fw fa-flag"></i>
                   </a>
                 </td>
               </tr>
@@ -151,13 +155,13 @@ export class Search extends Component<any, State> {
       <nav>
         <ul class="pagination justify-content-center">
           <li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
-            <button class="page-link rounded-0"
+            <button class="page-link"
               onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
                 Previous
             </button>
           </li>
           <li class="page-item">
-            <button class="page-link rounded-0"
+            <button class="page-link"
               onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
                 Next
 						</button>
diff --git a/server/ui/src/index.html b/server/ui/src/index.html
index 63cf7fc..5b33daf 100644
--- a/server/ui/src/index.html
+++ b/server/ui/src/index.html
@@ -8,10 +8,8 @@
 	<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
 
 	<title>Torrents.csv</title>
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
-	 crossorigin="anonymous">
-	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
-	 crossorigin="anonymous">
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
 </head>
 
diff --git a/server/ui/src/index.tsx b/server/ui/src/index.tsx
index aca82f8..608988a 100644
--- a/server/ui/src/index.tsx
+++ b/server/ui/src/index.tsx
@@ -13,8 +13,8 @@ class Index extends Component<any, any> {
   render() {
     return (
       <HashRouter>
-        <div>
-          <Navbar />
+        <Navbar />
+        <div class="container-fluid mt-3 p-0">
           <Switch>
             <Route exact path="/" component={Home} />
             <Route path={`/search/:q/:page`} component={Search} />