diff --git a/components/options.html b/components/options.html
new file mode 100644
index 0000000..62b02e8
--- /dev/null
+++ b/components/options.html
@@ -0,0 +1,17 @@
+<div id='options-container'>
+        <label for="refresh-frequency">Refresh every</label>
+        <input class="ask-option" type="text" id="refresh-frequency" name="refresh-frequency">
+        <p>seconds</p>
+        <br>
+        <label for="alert-frequency">Alert with</label>
+        <select class="ask-option" id="alert-sound" name="alert-sound">
+            <option dataVal = "1">Alert One</option>
+            <option dataVal = "2">Alert Two</option>
+            <option dataVal = "3">Alert Three</option>
+            <option dataVal = "4">Alert Four</option>
+        </select>
+        <p>every </p>
+        <input class="ask-option" type="text" id="alert-frequency" name="alert-frequency">
+        <p>seconds </p>
+</div>
+    
\ No newline at end of file
diff --git a/components/toolbar.html b/components/toolbar.html
new file mode 100644
index 0000000..94697dd
--- /dev/null
+++ b/components/toolbar.html
@@ -0,0 +1,6 @@
+<div id='ask-assist'>
+    <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
+    <p id="settings-button" >⚙</p>
+    <div class='cusBut' id='start-timer'>AskAssist</div>
+    <div class='cusBut' id='stop-timer'>Stop Watching</div>
+</div>
\ No newline at end of file
diff --git a/script_background.js b/script_background.js
index 524f746..33b558f 100644
--- a/script_background.js
+++ b/script_background.js
@@ -7,20 +7,14 @@ let timer = setInterval(()=>{
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse)=>{
     console.log(request);
+
     flag = request.message.flag;
-    console.log(flag)
     switch (flag) {
         case "alert":
             handleAlert(request);
             sendResponse("alerted")
         case "get":
-            const file = chrome.runtime.getURL('./toolbar.html');
-            fetch(file)
-            .then((res) => {
-                return res.text()
-            }).then((html) => {
-                sendResponse(html)
-            })
+            handleGet(request, sender, sendResponse);
     } 
     return true  
 })
@@ -35,7 +29,32 @@ function handleAlert({message}){
     ){alert.play()}   
 }
 
-function handleGet({message}, sendResponse){
-    console.log('handling get');
- 
+function handleGet(request, sender, sendResponse){
+    let options = request.message.options
+    let files = [];
+    let components = [];
+    // Convert Filenames to extension URLs
+    options.forEach(function(u,i){
+        options[i].path = chrome.runtime.getURL(options[i].path)
+    })
+    // Fetch files
+    console.log('fetching files...')
+    options.forEach(({path}, i) => {
+        files.push(
+            fetch(path).catch(console.log(path, 'notfound'))
+        )
+        console.log('Files:',files);
+    });
+    // When all files are fetched, convert them to text
+    Promise.all(files).then(function(results){
+        console.log('building components...')
+        results.forEach(function(file, i){
+            components[i]=file.text();
+            console.log('Components:',components)    
+        })
+        Promise.all(components).then(function(results){
+            console.log('response', results)
+            sendResponse(results);
+        })
+    })
 }
\ No newline at end of file
diff --git a/script_foreground.js b/script_foreground.js
index 43ee4c5..1c82968 100644
--- a/script_foreground.js
+++ b/script_foreground.js
@@ -1,31 +1,29 @@
-let config = {
-    speed: 5000,
-    alert: {
-        sound:1,
-        frequency:1
-    }
+let options = {
+    "alert-frequency": 10,
+    "alert-sound": 1,
+    "refresh-frequency": 2
 };
 
 function appendTool(html){
     // fetch the plugin HTML from the background script...
-    chrome.runtime.sendMessage({message:{flag:"get", option:"toolbar.html"}}, function(res){
+    chrome.runtime.sendMessage({message:{flag:"get", options:[{name:'toolbar', path:"./abccomponents/toolbar.html"}, {name:'options', path:"./components/options.html"}]}}, function(res){
         //... and append it
-        document.querySelector('.p-ia__view_header__spacer').innerHTML = res;
+        console.log(res[0]);
+        console.log(res[1]);
+        document.querySelector('.p-ia__view_header__spacer').innerHTML = res[0];
+
         //... and it's event listeners
-        var start = document.querySelector('#start-timer');
-        var stop = document.querySelector('#stop-timer');
         document.querySelector('#start-timer').addEventListener('click', function(){
             start.style.display = 'none';
             stop.style.display = 'inline-block';
-            console.log('clicking Refresh every '+config.speed+' milliseconds');
             timer = setInterval(function(){
                 var refresh_btn = document.querySelectorAll('[data-qa-action-id="refresh-queue"]')[0];
                 if(refresh_btn){refresh_btn.click()};
                 if(newQuestion()){
-                    //chrome.runtime.sendMessage({message:{flag:"alert", option:config.alert}});
-                    config.watch = false;
+                    chrome.runtime.sendMessage({message:{flag:"alert", option:options["alert-sound"]}});
                 };
-            }, config.speed);
+                console.log(options["refresh-frequency"]*1000)
+            }, options["refresh-frequency"]*1000);
             return timer;
         });
         document.querySelector('#stop-timer').addEventListener('click', function(){
@@ -40,6 +38,15 @@ function appendTool(html){
                 document.querySelector('#options-container').style.display="none"
             }
         });
+        document.querySelectorAll('.ask-option').forEach(function(el){
+            el.addEventListener('change', function(e){
+                options[e.target.id]=e.target.value;
+                console.log(options);
+            })
+        })
+        var start = document.querySelector('#start-timer');
+        var stop = document.querySelector('#stop-timer');
+        document.querySelector('#options-container').style.display="none"
     })
 }
 
@@ -52,4 +59,10 @@ function newQuestion(){
     } 
 }
 
+
+function handleInput(e){
+    console.log("handling input")
+    console.log(e.target.value);
+}
+
 window.addEventListener('load', appendTool);
diff --git a/styles.css b/styles.css
index 062d64c..bac3b68 100644
--- a/styles.css
+++ b/styles.css
@@ -77,6 +77,11 @@
 #options-container>input{
     width: 40px;
 }
+#options-container>p{
+    display: inline;
+    padding: 0;
+    margin: 0;
+}
 
 @keyframes rotation {
     from {
diff --git a/toolbar.html b/toolbar.html
deleted file mode 100644
index f14f20e..0000000
--- a/toolbar.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<div id='ask-assist'>
-    <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
-    <div id='options-container'>
-            <label for="refresh-frequency">Refresh (in seconds):</label>
-            <input type="text" id="refresh-frequency" name="refresh-frequency">
-            <label for="alert-frequency">Alert:</label>
-            <input type="text" id="alert-frequency" name="alert-frequency">
-            <select type="text" id="alert-sound" name="alert-sound">
-                <option>Alert One</option>
-                <option>Alert Two</option>
-                <option>Alert Three</option>
-                <option>Alert Four</option>
-            </select>
-    </div>
-    <p id="settings-button" >⚙</p>
-    <div class='cusBut' id='start-timer'>AskAssist</div>
-    <div class='cusBut' id='stop-timer'>Stop Watching</div>
-</div>
\ No newline at end of file