diff --git a/chart-gen.js b/chart-gen.js
index 0fc4cda..6c2cd1d 100644
--- a/chart-gen.js
+++ b/chart-gen.js
@@ -1,9 +1,3 @@
-// clear output
-function clearStatsOutput() {
-  const stats = document.getElementById("stats-div");
-  stats.innerHTML = `<span class="loading loading-infinity loading-lg text-warning"></span>`;
-}
-
 // find variable frequencies
 function extractFrequency(rooms, category) {
   const frequency = rooms.reduce((acc, curr) => {
@@ -15,7 +9,7 @@ function extractFrequency(rooms, category) {
 }
 
 // find sqft bin frequencies
-function Frequency(rooms, category) {
+function sqftFrequency(rooms, category) {
   const frequency = rooms.reduce((acc, curr) => {
     acc[curr[category]] = (acc[curr[category]] || 0) + 1;
     return acc;
@@ -27,16 +21,16 @@ function Frequency(rooms, category) {
 // generate charts
 function stats(rooms) {
   document.getElementById("stats-div").innerHTML =
-    `<div class="chart-container"><p class="text-xl font-semibold chart-title">Colleges</p><canvas id="college-chart"></canvas></div>
+    `<div class="chart-container"><p class="text-xl font-semibold font-mono text-center">Colleges</p><canvas id="college-chart"></canvas></div>
     <br />
     <br />
-    <div class="chart-container"><p class="text-xl font-semibold chart-title">Buildings</p><canvas id="building-chart"></canvas></div>
+    <div class="chart-container"><p class="text-xl font-semibold font-mono text-center">Buildings</p><canvas id="building-chart"></canvas></div>
     <br />
     <br />
-    <div class="chart-container"><p class="text-xl font-semibold chart-title">Room Types</p><canvas id="type-chart"></canvas></div>
+    <div class="chart-container"><p class="text-xl font-semibold font-mono text-center">Room Types</p><canvas id="type-chart"></canvas></div>
     <br />
     <br />
-    <div class="chart-container"><p class="text-xl font-semibold chart-title">Sq. Ft.</p><canvas id="sqft-cjart"></canvas></div>`;
+    <div class="chart-container"><p class="text-xl font-semibold font-mono text-center">Sq. Ft.</p><canvas id="sqft-cjart"></canvas></div>`;
 
   const collegeFrequency = extractFrequency(rooms, "college");
   const buildingFrequency = extractFrequency(rooms, "building");
diff --git a/file-parse.js b/file-parse.js
new file mode 100644
index 0000000..f4cf42c
--- /dev/null
+++ b/file-parse.js
@@ -0,0 +1,113 @@
+// upload file handler
+export function parseFile(event) {
+  return new Promise((resolve, reject) => {
+    // set the worker
+    pdfjsLib.GlobalWorkerOptions.workerSrc =
+      "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.5.136/pdf.worker.min.mjs";
+
+    // get file
+    const file = event.target.files[0];
+
+    // verify that file is pdf
+    if (file.type !== "application/pdf") {
+      alert("Please upload a PDF file.");
+      reject("File is not a PDF.");
+      return;
+    }
+
+    // clear output
+    clearTableOutput();
+    clearStatsOutput();
+
+    // new file reader
+    const reader = new FileReader();
+
+    // when file successfully read
+    reader.onload = function (event) {
+      // store raw binary data of file
+      const typedarray = new Uint8Array(event.target.result);
+
+      // get pdf from raw binary data
+      pdfjsLib.getDocument(typedarray).promise.then(function (pdf) {
+        // initializes array to hold promises for each page
+        const pagesPromises = [];
+
+        // extract room + room infos
+        const rooms = [];
+        let roomsInfoList = [];
+
+        // don't remove if
+        // not whitespace and not any of following:
+        // 'College'
+        // 'Building'
+        // 'Room'
+        // 'Type'
+        // 'Sq. Ft.'
+        // 'Updated'
+        function noRemove(item) {
+          return (
+            !/^\s*$/.test(item.str) &&
+            item.str !== "College" &&
+            item.str !== "Building" &&
+            item.str !== "Room" &&
+            item.str !== "Type" &&
+            item.str !== "Sq. Ft." &&
+            !item.str.includes("Updated") &&
+            item.str !== "Dorm" &&
+            item.str !== "Sq Foot" &&
+            !item.str.includes("you")
+          );
+        }
+
+        // iterate through each page
+        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+          // keep track of promises for each page (when each page gets retrieved)
+          pagesPromises.push(
+            pdf.getPage(pageNum).then(function (page) {
+              // get text content of each page
+              return page.getTextContent().then(function (textContent) {
+                // extract relevant room info
+                const roomsInPage = textContent.items
+                  .filter(noRemove)
+                  .map((item) => item.str)
+                  .filter((item) => item !== "");
+
+                // organize room info
+                let room = {};
+                for (let i = 0; i < roomsInPage.length; i++) {
+                  if (i % 5 === 0) {
+                    room = {};
+                    rooms.push(room);
+                    room["college"] = roomsInPage[i];
+                  } else if (i % 5 === 1) {
+                    room["building"] = roomsInPage[i];
+                  } else if (i % 5 === 2) {
+                    room["room"] = roomsInPage[i];
+                  } else if (i % 5 === 3) {
+                    room["type"] = roomsInPage[i];
+                  } else {
+                    room["sqft"] = roomsInPage[i];
+                  }
+                }
+                roomsInfoList = roomsInfoList.concat(roomsInPage);
+              });
+            }),
+          );
+        }
+
+        // when all pages processed
+        Promise.all(pagesPromises)
+          .then(function () {
+            console.log("All pages processed");
+            resolve(rooms);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    };
+
+    // read file to trigger load even when read complete
+    reader.readAsArrayBuffer(file);
+  });
+}
diff --git a/index.html b/index.html
index b079ce1..4ccdba8 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,20 @@
   </head>
 
   <body class="flex flex-col min-h-screen">
+    <dialog open>
+      <p class="font-mono">
+        Upload the latest Available Room List pdf.
+        <br />
+        Then click on the left table column titles to sort.
+        <br />
+        Search on the right to filter.
+      </p>
+      <br />
+      <form class="text-center" method="dialog">
+        <button class="font-mono">Ok</button>
+      </form>
+    </dialog>
+
     <header>
       <div class="navbar bg-base-100">
         <div class="navbar-start"></div>
@@ -116,8 +130,16 @@
             class="flex w-full flex-col border-opacity-50"
           >
             <div class="card rounded-box grid h-20 place-items-center">
+              <div class="label">
+                <span class="label-text">Search to filter</span>
+              </div>
               <label class="input input-bordered flex items-center gap-2">
-                <input type="text" class="grow" placeholder="Search" />
+                <input
+                  id="search-query"
+                  type="text"
+                  class="grow"
+                  placeholder="Search"
+                />
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 16 16"
@@ -160,9 +182,12 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.5.136/pdf.min.mjs"
     ></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="looks.js"></script>
+    <script type="module" src="file-parse.js"></script>
     <script src="table-gen.js"></script>
+    <script src="sort.js"></script>
     <script src="chart-gen.js"></script>
-    <script src="search.js"></script>
+    <script type="module" src="search.js"></script>
     <script type="module" src="script.js"></script>
   </body>
 </html>
diff --git a/looks.js b/looks.js
new file mode 100644
index 0000000..f0d982f
--- /dev/null
+++ b/looks.js
@@ -0,0 +1,46 @@
+function dialog() {
+  // brief instructions
+  const dialog = document.querySelector("dialog");
+  const closeButton = document.querySelector("dialog button");
+
+  // "Close" button closes the dialog
+  closeButton.addEventListener("click", () => {
+    dialog.close();
+  });
+
+  // hide output initially output initially
+  document.getElementById("output").style.display = "none";
+}
+
+// remove site banner
+function fadeBanner() {
+  let banner = document.getElementById("banner");
+  if (banner) {
+    banner.classList.add("opacity-0");
+    setTimeout(function () {
+      banner.remove();
+    }, 500);
+  }
+}
+
+// clear output
+function clearTableOutput() {
+  const table = document.getElementById("table-div");
+  table.innerHTML = `<span class="loading loading-infinity loading-lg text-warning"></span>`;
+}
+
+// clear output
+function clearStatsOutput() {
+  const stats = document.getElementById("stats-div");
+  stats.innerHTML = `<span class="loading loading-infinity loading-lg text-warning"></span>`;
+}
+
+// remove space evenly for main justify-evenly
+function removeSpacing() {
+  document.getElementsByTagName("main")[0].classList.remove("justify-evenly");
+}
+
+// show table etc
+function showOutput() {
+  document.getElementById("output").style.display = "flex";
+}
diff --git a/package-lock.json b/package-lock.json
index 3360744..ba24de0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,9 @@
   "requires": true,
   "packages": {
     "": {
+      "dependencies": {
+        "fuse.js": "^7.0.0"
+      },
       "devDependencies": {
         "daisyui": "^4.12.2",
         "tailwindcss": "^3.4.3"
@@ -473,6 +476,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/glob": {
       "version": "10.3.15",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
diff --git a/package.json b/package.json
index 5922f7d..6ca84f1 100644
--- a/package.json
+++ b/package.json
@@ -2,5 +2,8 @@
   "devDependencies": {
     "daisyui": "^4.12.2",
     "tailwindcss": "^3.4.3"
+  },
+  "dependencies": {
+    "fuse.js": "^7.0.0"
   }
 }
diff --git a/script.js b/script.js
index 3fa1758..40a7a86 100644
--- a/script.js
+++ b/script.js
@@ -1,116 +1,31 @@
-// hide output initially output initially
-document.getElementById("output").style.display = "none";
+import { parseFile } from "./file-parse.js";
 
-// set the worker
-pdfjsLib.GlobalWorkerOptions.workerSrc =
-  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.5.136/pdf.worker.min.mjs";
+// show dialog
+dialog();
 
-// upload file handler
+// run everything when file uploaded
 document
   .getElementById("file-input")
   .addEventListener("change", function (event) {
-    // get file
-    const file = event.target.files[0];
-
-    // verify that file is pdf
-    if (file.type !== "application/pdf") {
-      alert("Please upload a PDF file.");
-      return;
-    }
-
-    // clear output
-    clearTableOutput();
-    clearStatsOutput();
-
-    // new file reader
-    const reader = new FileReader();
-
-    // when file successfully read
-    reader.onload = function (event) {
-      // store raw binary data of file
-      const typedarray = new Uint8Array(event.target.result);
-
-      // get pdf from raw binary data
-      pdfjsLib.getDocument(typedarray).promise.then(function (pdf) {
-        // initializes array to hold promises for each page
-        const pagesPromises = [];
-
-        // extract room + room infos
-        const rooms = [];
-        let roomsInfoList = [];
-
-        // don't remove if
-        // not whitespace and not any of following:
-        // 'College'
-        // 'Building'
-        // 'Room'
-        // 'Type'
-        // 'Sq. Ft.'
-        // 'Updated'
-        function noRemove(item) {
-          return (
-            !/^\s*$/.test(item.str) &&
-            item.str !== "College" &&
-            item.str !== "Building" &&
-            item.str !== "Room" &&
-            item.str !== "Type" &&
-            item.str !== "Sq. Ft." &&
-            !item.str.includes("Updated") &&
-            item.str !== "Dorm" &&
-            item.str !== "Sq Foot" &&
-            !item.str.includes("you")
-          );
-        }
-
-        // iterate through each page
-        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
-          // keep track of promises for each page (when each page gets retrieved)
-          pagesPromises.push(
-            pdf.getPage(pageNum).then(function (page) {
-              // get text content of each page
-              return page.getTextContent().then(function (textContent) {
-                // extract relevant room info
-                const roomsInPage = textContent.items
-                  .filter(noRemove)
-                  .map((item) => item.str)
-                  .filter((item) => item !== "");
-
-                // organize room info
-                let room = {};
-                for (let i = 0; i < roomsInPage.length; i++) {
-                  if (i % 5 === 0) {
-                    room = {};
-                    rooms.push(room);
-                    room["college"] = roomsInPage[i];
-                  } else if (i % 5 === 1) {
-                    room["building"] = roomsInPage[i];
-                  } else if (i % 5 === 2) {
-                    room["room"] = roomsInPage[i];
-                  } else if (i % 5 === 3) {
-                    room["type"] = roomsInPage[i];
-                  } else {
-                    room["sqft"] = roomsInPage[i];
-                  }
-                }
-                roomsInfoList = roomsInfoList.concat(roomsInPage);
-              });
-            }),
-          );
-        }
-
-        // when all pages processed
-        Promise.all(pagesPromises).then(function () {
-          console.log("All pages processed");
-          console.log(rooms);
-          fadeBanner();
-          removeSpacing();
-          tablulate(rooms);
-          stats(rooms);
-          showOutput();
-        });
+    parseFile(event)
+      .then((rooms) => {
+        console.log(rooms);
+        fadeBanner();
+        removeSpacing();
+        tablulate(rooms);
+        stats(rooms);
+        showOutput();
+      })
+      .catch((error) => {
+        console.error(error);
       });
-    };
-
-    // read file to trigger load even when read complete
-    reader.readAsArrayBuffer(file);
   });
+
+// handle
+/*document.getElementById("").addEventListener("input", (event) => {
+  // show all rooms when empty query
+  if (event.target.value === "") {
+    tablulate(rooms);
+  } else {
+  }
+});*/
diff --git a/search.js b/search.js
index 1ad0d92..4f7e458 100644
--- a/search.js
+++ b/search.js
@@ -1,12 +1,12 @@
-function divide() {}
+import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs";
 
-function search(rooms, query) {
-  const options = {
-    includeScore: true,
-    shouldSort: true,
-    keys: ["last_name", "first_name"],
-  };
+const options = {
+  includeScore: true,
+  shouldSort: true,
+  keys: ["last_name", "first_name"],
+};
 
+function search(rooms, query) {
   const fuse = new Fuse(rooms, options);
 
   console.log(fuse.search(searchPattern));
diff --git a/sort.js b/sort.js
new file mode 100644
index 0000000..ee495bb
--- /dev/null
+++ b/sort.js
@@ -0,0 +1,42 @@
+// higher-order function to create a comparison function
+function createCompareFunction(category, reverse) {
+  return function (a, b) {
+    const valueA = a[category];
+    const valueB = b[category];
+
+    // try to parse values as numbers
+    const numA = parseFloat(valueA);
+    const numB = parseFloat(valueB);
+
+    if (!isNaN(numA) && !isNaN(numB)) {
+      return reverse ? numB - numA : numA - numB;
+    }
+
+    // compare as strings
+    return reverse
+      ? valueB.localeCompare(valueA)
+      : valueA.localeCompare(valueB);
+  };
+}
+
+// sort rooms
+function sortTable(rooms, category, sorted) {
+  const compareFunction = createCompareFunction(category, sorted);
+  rooms.sort(compareFunction);
+
+  // re-render table
+  clearTableOutput();
+  tablulate(rooms);
+}
+
+function addSortFunction(rooms) {
+  // add sort capability on click
+  const tableHeadings = document.getElementsByTagName("th");
+
+  Array.from(tableHeadings).forEach((item) => {
+    item.addEventListener("click", () => {
+      sorted = !sorted;
+      sortTable(rooms, item.innerText, sorted);
+    });
+  });
+}
diff --git a/style.css b/style.css
index f7177f1..ff2b0ba 100644
--- a/style.css
+++ b/style.css
@@ -1562,6 +1562,20 @@ html {
   --tw-text-opacity: 0.2;
 }
 
+.label-text {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+}
+
+.label-text-alt {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+}
+
 .input input {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -2159,6 +2173,13 @@ html {
   width: 100%;
 }
 
+dialog {
+  margin-top: 40vh;
+  border: solid black;
+  border-radius: 12px;
+  padding: 10px;
+}
+
 .will-fade {
   transition: opacity 0.5s ease;
   /* Apply transition for opacity */
@@ -2177,10 +2198,6 @@ html {
   height: 100%;
 }
 
-.chart-title {
-  text-align: center;
-}
-
 .chart-container {
   width: 35vw;
 }
diff --git a/table-gen.js b/table-gen.js
index 716c16e..79b7cba 100644
--- a/table-gen.js
+++ b/table-gen.js
@@ -1,64 +1,6 @@
 // allow for sorting reverse
 let sorted = false;
 
-// remove site banner
-function fadeBanner() {
-  let banner = document.getElementById("banner");
-  if (banner) {
-    banner.classList.add("opacity-0");
-    setTimeout(function () {
-      banner.remove();
-    }, 500);
-  }
-}
-
-// clear output
-function clearTableOutput() {
-  const table = document.getElementById("table-div");
-  table.innerHTML = `<span class="loading loading-infinity loading-lg text-warning"></span>`;
-}
-
-// remove space evenly for main justify-evenly
-function removeSpacing() {
-  document.getElementsByTagName("main")[0].classList.remove("justify-evenly");
-}
-
-// show table etc
-function showOutput() {
-  document.getElementById("output").style.display = "flex";
-}
-
-// higher-order function to create a comparison function
-function createCompareFunction(category, reverse) {
-  return function (a, b) {
-    const valueA = a[category];
-    const valueB = b[category];
-
-    // try to parse values as numbers
-    const numA = parseFloat(valueA);
-    const numB = parseFloat(valueB);
-
-    if (!isNaN(numA) && !isNaN(numB)) {
-      return reverse ? numB - numA : numA - numB;
-    }
-
-    // compare as strings
-    return reverse
-      ? valueB.localeCompare(valueA)
-      : valueA.localeCompare(valueB);
-  };
-}
-
-// sort rooms
-function sortTable(rooms, category, sorted) {
-  const compareFunction = createCompareFunction(category, sorted);
-  rooms.sort(compareFunction);
-
-  // re-render table
-  clearTableOutput();
-  tablulate(rooms);
-}
-
 // display room info as table
 function tablulate(rooms) {
   document.getElementById("table-div").innerHTML = `<div id="table"></div>`;
@@ -93,14 +35,5 @@ function tablulate(rooms) {
   </div>`;
   table.innerHTML = html;
 
-  // add sort capability on click
-  const tableHeadings = document.getElementsByTagName("th");
-
-  Array.from(tableHeadings).map((item) => {
-    item.addEventListener("click", () => {
-      sorted = !sorted;
-      console.log(sorted);
-      sortTable(rooms, item.innerText, sorted);
-    });
-  });
+  addSortFunction(rooms);
 }
diff --git a/tailwind-input.css b/tailwind-input.css
index 735ad8f..4de1a48 100644
--- a/tailwind-input.css
+++ b/tailwind-input.css
@@ -7,6 +7,13 @@ html {
   width: 100%;
 }
 
+dialog {
+  margin-top: 40vh;
+  border: solid black;
+  border-radius: 12px;
+  padding: 10px;
+}
+
 .will-fade {
   transition: opacity 0.5s ease;
   /* Apply transition for opacity */
@@ -25,10 +32,6 @@ html {
   height: 100%;
 }
 
-.chart-title {
-  text-align: center;
-}
-
 .chart-container {
   width: 35vw;
 }
\ No newline at end of file