diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..2eda0f2
Binary files /dev/null and b/.DS_Store differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f3a1f12
--- /dev/null
+++ b/index.html
@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <!-- Give the page a title -->
+  <title>BTAA GIN Important Documents</title>
+
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <!-- Add a link to normalize.css -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+  <!-- Add fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap" rel="stylesheet"> 
+  <!-- All the CSS code goes inside the style tags below -->
+  <style>
+    body {
+      background: #f5f5f5;
+      font-family: 'Libre Franklin', sans-serif;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    header {
+      width: 100%;
+      min-width: 800px;
+      margin: 0 auto;
+      background: #184c7c;
+      padding: 15px 0 20px;
+      display: flex;
+      justify-content: space-between;
+      /* Push h1 and h2 to the left and right edges */
+      align-items: center;
+      /* Vertically center content */
+      flex-wrap: wrap;
+      /* Allow items to wrap to the next line if needed */
+    }
+
+    .header-elements {
+      width: 80%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between; /* Distribute elements horizontally */
+      align-items: center; /* Vertically center content */
+    }
+
+    h1 {
+      font-family: 'Libre Franklin', sans-serif;
+      /*width: 80%;*/
+      margin: 0 auto;
+      color: whitesmoke;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    /* Ensure that the h2 is left-aligned to the same margin as h1 */
+    h2 {
+      font-family: 'Libre Franklin', sans-serif;
+      /*width: 80%;*/
+      margin: 0 auto;
+      color: whitesmoke;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    h3 {
+      font-family: 'Libre Franklin', sans-serif;
+      color: #375671;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    h5 {
+      font-family: 'Libre Franklin', sans-serif;
+      font-size: 1.5em;
+      color: #375671;
+      width: 80%;
+      margin: 0 auto;
+      margin-top: 50px;
+      margin-bottom: 25px;
+      text-align: center;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    p {
+      font-size: .9em;
+      color: #375671;
+    }
+
+    a,
+    a:visited {
+      color: #003d71;
+    }
+
+    .project {
+      width: 80%;
+      min-width: 800px;
+      height: 100%;
+      margin: 35px auto;
+    }
+
+    .project:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+
+    /* Adjust the dropdown styles */
+    .dropdown {
+      /*width: 80%;*/
+      margin: 0 auto;
+      margin-top: 10px;
+    }
+
+    label {
+      margin: 0;
+      padding: 0;
+      font-family: 'Libre Franklin', sans-serif;
+      color: whitesmoke;
+      font-size: 16px;
+      text-align: right;
+      margin-right: 10px;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    select {
+      width: 70px;
+      padding: 2px;
+      height: auto;
+      margin-right: 0px;
+    }
+
+    .gin-span {
+      padding: 16px 12px;
+      text-decoration: none;
+      font-family: 'Libre Franklin', sans-serif;
+      color: whitesmoke;
+      font-size: 15px;
+      font-weight: normal;
+      font-style: normal; 
+      text-decoration: none;
+    }
+
+    header .logo {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+    }
+
+    header .logo img {
+      height: 60px; /* Adjust the height as needed */
+      max-width: 100%; /* Make sure the image doesn't exceed its container */
+    }
+
+    .gin-link {
+      text-decoration: none; /* Remove underline */
+    }
+
+    hr { 
+      background-color: #375671; 
+      border: none; 
+      height: 1px;
+      width: 5%; 
+      text-align: center; 
+      margin-bottom: 25px;
+    } 
+
+  </style>
+</head>
+
+<body>
+  <header>
+    <div class="header-elements">
+      <div id="title">
+        <h1>Important Documents Locator</h1>
+        <h2>BTAA Geospatial Information Network</h2>
+        <div class="dropdown">
+          <label for="type">Select By Document Type:</label>
+          <select id="type">
+            <!-- Make the default no selection -->
+            <option value="0" selected>Any</option>
+            <option value="Presentation">Presentation</option>
+            <option value="Template">Template</option>
+            <option value="Tutorial">Tutorial</option>
+            <option value="Outreach">Outreach</option>
+            <option value="Report">Report</option>
+            <option value="Information">Information</option>
+            <option value="Other">Other</option>
+          </select>
+        </div>
+      </div>
+      <div class="logo">
+        <a class="gin-link" href="https://gin.btaa.org/" aria-hidden="false" tabindex="0">
+          <div class="logo">
+            <img src="logo/btaa-logo-white.png" role="img" />
+            <span class="gin-span">BTAA-GIN</span>
+          </div>
+        </a>
+      </div>
+    </div>
+  </header>  
+  <h5>Filtered Documents</h5>
+  <hr>
+  <div id="documents"></div>
+  <!-- Papaparse for bringing in Google spreadsheet data -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js "></script>
+  <!-- Add a link to the jQuery JavaScript library so you can leverage ajax methods to load your data -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <!-- Custom JavaScript below -->
+
+  <script>
+    
+    // Define a function to load data from the Google Sheet
+    function loadGoogleSheetData() {
+
+      // Define the Google Sheet URL
+      const gsheet = 'https://docs.google.com/spreadsheets/d/1UVXt7_ZmzTnCeraJKl-0wL4rD1n_dlyMlsNrYzjbW9M/export?format=csv&id=1UVXt7_ZmzTnCeraJKl-0wL4rD1n_dlyMlsNrYzjbW9M&gid=0';
+
+      // Clear the documents div
+      $('#documents').empty();
+
+      Papa.parse(gsheet, {
+        download: true,
+        header: true,
+        complete: function (results) {
+          // Define data
+          let data = results.data;
+
+          // Flag to track if "Static Maps" has been added
+          let staticMapsAdded = false;
+
+          // Loop through data
+          for (let i = 0; i < data.length; i++) {
+            // Define an empty array for the project types
+            let types = [];
+            // Define variables
+            let project = data[i];
+            let title = project.Title;
+            let link = project.Link;
+            let description = project.Description;
+            let utility = project.Utility;
+            let type1 = project.Type_1;
+            let type2 = project.Type_2;
+            let type3 = project.Type_3;
+            // If type1 is not empty, add it to the types array
+            if (type1) {
+              types.push(type1);
+            };
+            // If type2 is not empty, add it to the types array
+            if (type2) {
+              types.push(type2);
+            };
+            // If type3 is not empty, add it to the types array
+            if (type3) {
+              types.push(type3);
+            };
+            // Convert the types array to a string
+            formattedTypes = types.join(', ');
+            // If the type dropdown is set to "Any" or the project type matches the selected type
+            if ($('#type').val() == 0 || types.includes($('#type').val())) {
+              // Create inital HTML elements
+              let projectHTML = '<section class="project"><a target="_blank" href="' + link + '"><h3>' + title + '</h3></a><p><b>Description:</b><br>' + description + '<br><br><b>Utility:</b><br>' + utility + '<br><br><b>Type of Document:</b><br>' + formattedTypes + '</p></section>';
+              // Append HTML elements to documents div
+              $('#documents').append(projectHTML);
+            };
+          };
+
+        }
+      });
+    };
+
+    // Call the function to load data when the page loads
+    $(document).ready(function () {
+      // Set the default type to "Any" in the dropdown
+      $('#type').val(0);
+      // Call the function to load data
+      loadGoogleSheetData();
+    });
+
+    // Add an event listener to the <select> element for future changes
+    let selectElement = document.getElementById("type");
+
+    // Listen for changes
+    selectElement.addEventListener("change", function () {
+      // Get the selected value
+      const selectedValue = $(this).val();
+      // Call the function to load data
+      loadGoogleSheetData();
+    });
+    
+  </script>
+
+</body>
\ No newline at end of file
diff --git a/logo/btaa-logo-white.png b/logo/btaa-logo-white.png
new file mode 100644
index 0000000..e31bf9c
Binary files /dev/null and b/logo/btaa-logo-white.png differ
