diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b19da47a..1104238e 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -337,13 +337,13 @@
     "message": "Load Styles",
     "description": "Text for a link that loads styles within the popup"
   },
-  "remoteStyleInstall": {
+  "searchResultInstall": {
     "message": "Install",
-    "description": "Text for a button that installs a remote style"
+    "description": "Text for a button that installs a search result"
   },
-  "remoteStyleInstallTooltip": {
-    "message": "Install this style permanently",
-    "description": "Tooltip for a button that installs a remote style"
+  "searchResultInstallTooltip": {
+    "message": "Install this search result",
+    "description": "Tooltip for a button that installs a search result"
   },
   "findStylesForSite": {
     "message": "Find more styles for this site",
diff --git a/popup.html b/popup.html
index 36bb84ca..6c15f5c7 100644
--- a/popup.html
+++ b/popup.html
@@ -3,7 +3,7 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <link rel="stylesheet" href="popup/popup.css">
-  <link rel="stylesheet" href="popup/remoteStyles.css">
+  <link rel="stylesheet" href="popup/searchResults.css">
 
   <style id="firefox-transitions-bug-suppressor">
     /* restrict to FF */
@@ -90,7 +90,7 @@
         <a class="searchResult-authorLink" target="_blank"></a>
       </div>
       <div class="actions">
-        <button class="remote-style-install" i18n-text="remoteStyleInstall" i18n-title="remoteStyleInstallTooltip"></button>
+        <button class="searchResult-install" i18n-text="searchResultInstall" i18n-title="searchResultInstallTooltip"></button>
       </div>
     </div>
   </template>
@@ -101,7 +101,7 @@
   <script src="js/prefs.js"></script>
   <script src="content/apply.js"></script>
   <script src="popup/popup.js"></script>
-  <script src="popup/remoteStyles.js"></script>
+  <script src="popup/searchResults.js"></script>
 </head>
 
 <body id="stylus-popup">
@@ -128,9 +128,9 @@
         <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
       </div>
     </div>
-    <div id="remote-styles" class="hidden">
+    <div id="searchResults" class="hidden">
       <h3>Search Results for <span id="searchResults-terms">-</span></h3>
-      <div id="searchResults"></div>
+      <div id="searchResults-list"></div>
       <div id="searchResultsNav">
         <button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
         <label>
@@ -143,8 +143,8 @@
     </div>
     <div class="left-gutter"></div>
     <div class="main-controls">
-      <div id="load-remote-styles">
-        <a id="load-remote-styles-link" href="#"
+      <div id="load-search-results">
+        <a id="load-search-results-link" href="#"
            i18n-text="loadStylesForSite"></a>
       </div>
       <div id="find-styles">
diff --git a/popup/remoteStyles.css b/popup/searchResults.css
similarity index 83%
rename from popup/remoteStyles.css
rename to popup/searchResults.css
index a94d8531..27775368 100755
--- a/popup/remoteStyles.css
+++ b/popup/searchResults.css
@@ -3,12 +3,17 @@
   margin-bottom: 5px;
 }
 
-#remote-styles.hidden,
-#load-remote-styles.hidden {
+#searchResults,
+#load-search-results {
+  display: block;
+}
+
+#searchResults.hidden,
+#load-search-results.hidden {
   display: none;
 }
 
-#remote-styles, #searchResults {
+#searchResults, #searchResults-list {
   max-width: 200px;
   overflow: hidden;
 }
@@ -57,6 +62,10 @@
   text-align: center;
 }
 
+.searchResult-install {
+  width: 100%;
+}
+
 #searchResultsNav-prev[disabled],
 #searchResultsNav-next[disabled] {
   cursor: not-allowed;
diff --git a/popup/remoteStyles.js b/popup/searchResults.js
similarity index 59%
rename from popup/remoteStyles.js
rename to popup/searchResults.js
index 24145e4c..ca2c079a 100755
--- a/popup/remoteStyles.js
+++ b/popup/searchResults.js
@@ -4,23 +4,35 @@ let currentPage = 1;
 let hostname;
 
 /**
- * Fetches and parses search results (in JSON) from userstyles.org
- * @return {Object} Search results from userstyles.org
+ * Fetches JSON object from userstyles.org API
+ * @param {string} path Path on userstyles.org (e.g. /api/v1/styles)
  * @param {string} queryParams Query parameters to send in search request.
+ * @return {Object} API response object from userstyles.org
  */
-function fetchSearchResults(queryParams) {
+function fetchUserstylesAPI(path, queryParams) {
   return new Promise(function(resolve, reject) {
     const TIMEOUT = 10000;
     const headers = {
       'Content-type': 'application/json',
       'Accept': '*/*'
     };
-    const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
+    let url = 'https://userstyles.org' + path;
+    if (queryParams) {
+      url += "?" + queryParams;
+    }
     const xhr = new XMLHttpRequest();
     xhr.timeout = TIMEOUT;
-    xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
-      ? resolve(JSON.parse(xhr.responseText))
-      : reject(xhr.status));
+    xhr.onload = () => {
+      if (xhr.status === 200 || url.protocol === 'file:') {
+        try {
+          resolve(JSON.parse(xhr.responseText));
+        } catch (err) {
+          reject("Failed to parse JSON from " + url + "\nJSON Text: " + xhr.responseText);
+        }
+      } else {
+        reject(xhr.status);
+      }
+    };
     xhr.onerror = reject;
     xhr.open('GET', url, true);
     for (const key of Object.keys(headers)) {
@@ -31,13 +43,12 @@ function fetchSearchResults(queryParams) {
 }
 
 /**
- *
+ * Adds an entry to the Search Results DOM
  * @param {Object} searchResult The JSON object from userstyles.org representing a search result.
  */
 function createSearchResultElement(searchResult) {
   /*
-    searchResult format:
-    {
+    searchResult format: {
       id: 100835,
       name: "Reddit Flat Dark",
       screenshot_url: "19339_after.png",
@@ -87,7 +98,29 @@ function createSearchResultElement(searchResult) {
     onclick: handleEvent.openURLandHide
   });
 
-  $('#searchResults').appendChild(entry);
+  // TODO: Total & Weekly Install Counts
+  // TODO: Rating
+
+  const install = $('.searchResult-install', entry);
+  const name = searchResult.name;
+  Object.assign(install, {
+    onclick: (event) => {
+      event.preventDefault();
+      // TODO: Install style
+      fetchUserstylesAPI("/api/v1/styles/" + searchResult.id)
+        .then( styleObject => {
+          console.log("TODO: Install style ID", searchResult.id);
+          console.log("Full styleObject:", styleObject);
+          alert("TODO: Install style ID #" + searchResult.id + " name '" + searchResult.name + "'");
+        })
+        .catch(reason => {
+          throw reason;
+        });
+      return true;
+    }
+  });
+
+  $('#searchResults-list').appendChild(entry);
 }
 
 function updateSearchResultsNav(currentPage, totalPages) {
@@ -106,11 +139,13 @@ function updateSearchResultsNav(currentPage, totalPages) {
     } else {
       $('#searchResultsNav-prev').removeAttribute('disabled');
     }
+
+    // Update current/total counts
     $('#searchResultsNav-currentPage').textContent = currentPage;
     $('#searchResultsNav-totalPages').textContent = totalPages;
 }
 
-function insertRemoteStyles(searchResults) {
+function processSearchResults(searchResults) {
   /*
     searchResults: {
       data: [...],
@@ -125,8 +160,21 @@ function insertRemoteStyles(searchResults) {
   searchResults.data.forEach(createSearchResultElement);
 }
 
-function loadRemoteStyles(event) {
+function loadNextPage(event) {
+  currentPage += 1;
+  loadSearchResults(event);
+}
+
+function loadPrevPage(event) {
+  currentPage = Math.max(1, currentPage - 1);
+  loadSearchResults(event);
+}
+
+function loadSearchResults(event) {
   event.preventDefault();
+  // Clear search results
+  $('#searchResults-list').innerHTML = "";
+  // Find styles for the current active tab
   getActiveTab().then(tab => {
     hostname = new URL(tab.url).hostname;
     const queryParams = [
@@ -135,11 +183,17 @@ function loadRemoteStyles(event) {
       'per_page=3'
     ].join('&');
 
-    $('#searchresults-terms').textContent = hostname;
-    $('#remote-styles').classList.remove("hidden");
-    $('#load-remote-styles').classList.add("hidden");
-    fetchSearchResults(queryParams)
-      .then(insertRemoteStyles)
+    // Hide load button
+    $('#load-search-results').classList.add("hidden");
+
+    // Display results container
+    $('#searchResults').classList.remove("hidden");
+    $('#searchResults-terms').textContent = hostname;
+
+    fetchUserstylesAPI("/api/v1/styles/search", queryParams)
+      .then(code => {
+        processSearchResults(code);
+      })
       .catch(reason => {
         throw reason;
       });
@@ -147,10 +201,8 @@ function loadRemoteStyles(event) {
   return false;
 }
 
-function initRemoteStyles() {
-  $('#load-remote-styles-link').onclick = loadRemoteStyles;
-}
-
 onDOMready().then(() => {
-  initRemoteStyles();
+  $('#load-search-results-link').onclick = loadSearchResults;
+  $('#searchResultsNav-prev').onclick = loadPrevPage;
+  $('#searchResultsNav-next').onclick = loadNextPage;
 });
