diff --git a/server/ui/.gitignore b/server/ui/.gitignore
index 94eab2d..07d46bc 100644
--- a/server/ui/.gitignore
+++ b/server/ui/.gitignore
@@ -25,6 +25,5 @@ node_modules
 *~
 test/data/result.json
 
-
 package-lock.json
 *.orig
diff --git a/server/ui/src/Main.css b/server/ui/src/Main.css
index c88addd..85653a9 100644
--- a/server/ui/src/Main.css
+++ b/server/ui/src/Main.css
@@ -1,18 +1,60 @@
-.table-fixed {
-    table-layout: fixed;
+/* globally disable dotted outlines on anchors */
+a:focus {
+  outline: none;
+}
+
+a::-moz-focus-inner {
+  border: 0;
 }
 
 .search-name-col {
-    width: 50%;
+  width: 50%;
 }
 
 .search-name-cell {
-    word-wrap: break-word;
+  word-wrap: break-word;
 }
 
+.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;
+}
+
+.table thead th {
+  border: 0px;
+}
+
+.table tr td {
+  vertical-align: middle !important;
+}
+
+/* Colors */
 .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;
-}
\ No newline at end of file
+  background-color: #673ab7;
+}
+
+.table-hover-purple tbody tr:hover {
+  background-color: rgba(103, 58, 183, 0.2) !important;
+}
+
+/* Bootstrap 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 2904f74..bcf03b7 100644
--- a/server/ui/src/components/home.tsx
+++ b/server/ui/src/components/home.tsx
@@ -13,16 +13,13 @@ 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 38e3200..6b9e0e0 100644
--- a/server/ui/src/components/navbar.tsx
+++ b/server/ui/src/components/navbar.tsx
@@ -23,37 +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">
-        <a class="navbar-brand" href="#">
+      <nav class="navbar navbar-dark navbar-purple p-1 shadow">
+        <a class="navbar-brand mx-1" href="#">
           <i class="fas fa-fw fa-database mr-1"></i>
           Torrents.csv
         </a>
-        <ul class="navbar-nav ml-auto">
-          <li class="nav-item">
-            <a class="nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
-          </li>
-        </ul>
-        <div class="col-12 col-sm-6">
-          {this.searchForm()}
+        <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()}
       </nav>
     );
   }
 
-  // TODO
-  // https://www.codeply.com/go/xBVaM3q5X4/bootstrap-4-navbar-search-full-width
   searchForm() {
     return (
-      <form class="my-2 my-lg-0 d-inline w-100" onSubmit={linkEvent(this, this.search)}>
-        <div class="input-group">
-          <input value={this.state.searchParams.q} onInput={linkEvent(this, this.searchChange)} type="text" class="form-control" placeholder="Search..." />
-          <button type="submit" class="btn btn-light border border-left-0 border-radius-left-0">
+      <form class="col-12 col-sm-6 m-0 px-1" onSubmit={linkEvent(this, this.search)}>
+        <div class="input-group w-100">
+          <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-light bg-white 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 257324a..3a0a4b7 100644
--- a/server/ui/src/components/search.tsx
+++ b/server/ui/src/components/search.tsx
@@ -76,32 +76,35 @@ export class Search extends Component<any, State> {
   render() {
     return (
       <div>
-        <div className={this.state.results.torrents[0] ? "container-fluid" : "container"}>
-          <div class="row mt-2">
-            <div class="col-12">
-              {
-                this.state.searching ?
-                  this.spinner()
-                  :
-                  this.state.results.torrents[0] ? this.table() : this.noResults()
-              }
-            </div>
-          </div>
-        </div>
+        {
+          this.state.searching ?
+            this.spinner() : this.state.results.torrents[0] ?
+              this.table() : this.noResults()
+        }
+      </div>
+    );
+  }
+
+  spinner() {
+    return (
+      <div class="text-center m-5 p-5">
+        <i class="fas fa-spinner fa-spin fa-5x"></i>
       </div>
     );
   }
 
   noResults() {
     return (
-      <h1>No Results</h1>
+      <div class="text-center m-5 p-5">
+        <h1>No Results</h1>
+      </div>
     )
   }
 
   table() {
     return (
       <div>
-        <table class="table table-fixed table-hover table-sm table-striped">
+        <table class="table table-fixed table-hover table-sm table-striped table-hover-purple table-padding">
           <thead>
             <tr>
               <th class="search-name-col">Name</th>
@@ -117,16 +120,25 @@ export class Search extends Component<any, State> {
               <tr>
                 <td class="search-name-cell">{torrent.name}</td>
                 <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
-                <td class="text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
-                <td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
-                <td class="text-right text-muted d-none d-md-table-cell" data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`} data-balloon-pos="down">
+                <td class="text-right text-success"><i class="fas fa-fw fa-arrow-up d-none d-sm-inline mr-1"></i>{torrent.seeders}</td>
+                <td class="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="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)}>
+                  <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}`}>
+                  <a class="btn btn-sm no-outline p-1 d-none d-sm-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>
@@ -139,29 +151,21 @@ export class Search extends Component<any, State> {
     );
   }
 
-  spinner() {
-    return (
-      <div class="text-center">
-        <i class="fas fa-spinner fa-spin fa-5x"></i>
-      </div>
-    );
-  }
-
   paginator() {
     return (
       <nav>
-        <ul class="pagination">
+        <ul class="pagination justify-content-center">
           <li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
             <button class="page-link"
-              onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}
-            >
-              Previous</button>
+              onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
+              Previous
+            </button>
           </li>
           <li class="page-item">
             <button class="page-link"
               onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
               Next
-							</button>
+						</button>
           </li>
         </ul>
       </nav>
@@ -169,10 +173,8 @@ export class Search extends Component<any, State> {
   }
 
   switchPage(a: { i: Search, nextPage: boolean }, event) {
-
     let newSearch = a.i.state.searchParams;
     newSearch.page += (a.nextPage) ? 1 : -1;
     a.i.props.history.push(`/search/${newSearch.q}/${newSearch.page}`);
   }
-
-}
\ No newline at end of file
+}
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..2c169cb 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="mt-3 p-0">
           <Switch>
             <Route exact path="/" component={Home} />
             <Route path={`/search/:q/:page`} component={Search} />
diff --git a/server/ui/yarn.lock b/server/ui/yarn.lock
index 5796cbe..0e86505 100644
--- a/server/ui/yarn.lock
+++ b/server/ui/yarn.lock
@@ -36,9 +36,9 @@ ajax-request@^1.2.0:
     utils-extend "^1.0.7"
 
 ajv@^6.5.5:
-  version "6.5.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.5.tgz#cf97cdade71c6399a92c6d6c4177381291b781a1"
-  integrity sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.6.1.tgz#6360f5ed0d80f232cc2b294c362d5dc2e538dd61"
+  integrity sha512-ZoJjft5B+EJBjUyu9C9Hc0OZyPZSSlOF+plzouTrg6UlA8f+e/n8NIgBFG/9tppJtpPWfthHakK7juJdNDODww==
   dependencies:
     fast-deep-equal "^2.0.1"
     fast-json-stable-stringify "^2.0.0"
@@ -1662,12 +1662,12 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
     js-tokens "^3.0.0 || ^4.0.0"
 
 lru-cache@^4.0.1:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.4.tgz#51cc46e8e6d9530771c857e24ccc720ecdbcc031"
-  integrity sha512-EPstzZ23znHUVLKj+lcXO1KvZkrlw+ZirdwvOmnAnA/1PB4ggyXJ77LRkCqkff+ShQ+cqoxCxLQOh4cKITO5iA==
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
   dependencies:
     pseudomap "^1.0.2"
-    yallist "^3.0.2"
+    yallist "^2.1.2"
 
 map-cache@^0.2.2:
   version "0.2.2"
@@ -3153,6 +3153,11 @@ y18n@^3.2.1:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
   integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
 
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
+
 yallist@^3.0.0, yallist@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"