diff --git a/.gitignore b/.gitignore
index 4505dc2..b62c4c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@
 __notes__
 *.env
 UnbinderSandbox
+package-lock.json
 
 # Files for/generated by Docker Compose
 secrets
@@ -44,8 +45,8 @@ bld/
 
 # Visual Studio 2015/2017 cache/options directory
 .vs/
-# Uncomment if you have tasks that create the project's static files in wwwroot
-wwwroot/
+wwwroot/lib/
+wwwroot/js/
 
 # Visual Studio 2017 auto generated files
 Generated\ Files/
@@ -370,3 +371,5 @@ MigrationBackup/
 
 # Fody - auto-generated XML schema
 FodyWeavers.xsd
+/Unbinder/wwwroot/lib
+/Unbinder/wwwroot/js
diff --git a/Unbinder/.dockerignore b/Unbinder/.dockerignore
index 114f161..5fa34c3 100644
--- a/Unbinder/.dockerignore
+++ b/Unbinder/.dockerignore
@@ -1 +1,3 @@
-__notes__
\ No newline at end of file
+__notes__
+db_data
+.eslintrc.js
diff --git a/Unbinder/.eslintrc.js b/Unbinder/.eslintrc.js
new file mode 100644
index 0000000..59f25f9
--- /dev/null
+++ b/Unbinder/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    'semistandard'
+  ]
+};
diff --git a/Unbinder/Controllers/Api/IngredientApiController.cs b/Unbinder/Controllers/Api/IngredientApiController.cs
new file mode 100644
index 0000000..9e901a6
--- /dev/null
+++ b/Unbinder/Controllers/Api/IngredientApiController.cs
@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Mvc;
+using Unbinder.Repositories;
+
+namespace Unbinder.Controllers.Api
+{
+    [ApiController]
+    public class IngredientApiController(IIngredientRepository repository) : ControllerBase
+    {
+        private readonly IIngredientRepository _repository = repository;
+
+        [HttpGet]
+        [Route("/api/ingredients")]
+        public IActionResult GetAll()
+        {
+            var result = _repository.GetAll;
+            return result == null ? NotFound() : Ok(result);
+        }
+    }
+}
\ No newline at end of file
diff --git a/Unbinder/Program.cs b/Unbinder/Program.cs
index 121d6c9..3a3f289 100644
--- a/Unbinder/Program.cs
+++ b/Unbinder/Program.cs
@@ -32,6 +32,7 @@ builder.Services.AddDbContext<UnbinderDbContext>(options =>
 
 // configure MVC
 builder.Services.AddControllersWithViews();
+builder.Services.AddControllers(); // map additional controllers for exposed REST API routes
 builder.Services.AddRazorPages();
 
 builder.Services.AddCors(options =>
diff --git a/Unbinder/Unbinder.csproj b/Unbinder/Unbinder.csproj
index ea96bf1..82a9c69 100644
--- a/Unbinder/Unbinder.csproj
+++ b/Unbinder/Unbinder.csproj
@@ -21,12 +21,15 @@
     <PackageReference Include="Microsoft.Identity.Web" Version="2.15.3" />
     <PackageReference Include="Microsoft.Identity.Web.UI" Version="2.15.3" />
     <PackageReference Include="Microsoft.SqlServer.Server" Version="1.0.0" />
+    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.3.2">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
   </ItemGroup>
 
   <ItemGroup>
     <Folder Include="DB\SQL\" />
     <Folder Include="secrets\" />
-    <Folder Include="TagHelpers\" />
     <Folder Include="__notes__\" />
   </ItemGroup>
 
diff --git a/Unbinder/Views/Recipe/Create.cshtml b/Unbinder/Views/Recipe/Create.cshtml
index 655e544..40fa6af 100644
--- a/Unbinder/Views/Recipe/Create.cshtml
+++ b/Unbinder/Views/Recipe/Create.cshtml
@@ -28,6 +28,12 @@
             <textarea class="w-5/6 text-black" asp-for="RecipeText"></textarea>
         </div>
 
+        <div id="ingredient-section">
+            <option id="ingredient-selector"></option>
+        </div>
+
         <button type="submit">Publish Recipe</button>
     </div>
-</form>
\ No newline at end of file
+</form>
+
+<script src="~/js/createRecipe.js"></script>
\ No newline at end of file
diff --git a/Unbinder/Views/Recipe/Search.cshtml b/Unbinder/Views/Recipe/Search.cshtml
index 7211df1..ebfe937 100644
--- a/Unbinder/Views/Recipe/Search.cshtml
+++ b/Unbinder/Views/Recipe/Search.cshtml
@@ -33,12 +33,12 @@
         message.innerHTML = query ? `Viewing ${@Model.ToArray().Length} results for: ${query}` : "Enter a new search term below:";
 
         // handle search updates on client side
-        searchButton.onclick = async () => {
-            const newResult = await fetch(`/api/recipe/search?q=${textField.value}`);
+        searchButton.onclick = () => {
+            // const newResult = await fetch(`/api/recipe/search?q=${textField.value}`);
 
-            console.log(newResult);
+            // console.log(newResult);
 
-            const newResultJson = await newResult.json();
+            // const newResultJson = await newResult.json();
             window.location.search = `?q=${textField.value}`;
         }
     });
diff --git a/Unbinder/Views/Shared/_Layout.cshtml b/Unbinder/Views/Shared/_Layout.cshtml
index 3d2d6a7..a7f6b71 100644
--- a/Unbinder/Views/Shared/_Layout.cshtml
+++ b/Unbinder/Views/Shared/_Layout.cshtml
@@ -2,8 +2,10 @@
     <head>
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
+        <script type="text/javascript">var exports = {};</script>
         <script src="~/js/site.js"></script>
         <script src="https://cdn.tailwindcss.com"></script>
+        <script src="~/lib/pdf.js/pdf.min.mjs"></script>
         <link href="~/css/site.css" rel="stylesheet" />
         <base href="/" />
     </head>
diff --git a/Unbinder/libman.json b/Unbinder/libman.json
index ceee271..7911521 100644
--- a/Unbinder/libman.json
+++ b/Unbinder/libman.json
@@ -1,5 +1,10 @@
 {
   "version": "1.0",
   "defaultProvider": "cdnjs",
-  "libraries": []
+  "libraries": [
+    {
+      "library": "pdf.js@4.0.269",
+      "destination": "wwwroot/lib/pdf.js/"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/Unbinder/package.json b/Unbinder/package.json
new file mode 100644
index 0000000..6d8f0d4
--- /dev/null
+++ b/Unbinder/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "unbinder",
+  "version": "1.0.0",
+  "description": "",
+  "main": "wwwroot/js/index.js",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Mikayla Dobson",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "^8.55.0",
+    "eslint-config-semistandard": "^17.0.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "typescript": "^5.3.2"
+  }
+}
diff --git a/Unbinder/tsconfig.json b/Unbinder/tsconfig.json
new file mode 100644
index 0000000..147ce57
--- /dev/null
+++ b/Unbinder/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "noEmitOnError": true,
+    "removeComments": false,
+    "sourceMap": true,
+    "lib": ["ES2015", "DOM"],
+    "module": "CommonJS",
+    "target": "ES5",
+    "moduleResolution": "Node",
+    "outDir": "wwwroot/js"
+  },
+  "include": [
+    "wwwroot/ts/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "wwwroot/js"
+  ]
+}
diff --git a/Unbinder/wwwroot/css/site.css b/Unbinder/wwwroot/css/site.css
new file mode 100644
index 0000000..f27e5ad
--- /dev/null
+++ b/Unbinder/wwwroot/css/site.css
@@ -0,0 +1,18 @@
+html {
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: 60px;
+}
\ No newline at end of file
diff --git a/Unbinder/wwwroot/favicon.ico b/Unbinder/wwwroot/favicon.ico
new file mode 100644
index 0000000..63e859b
Binary files /dev/null and b/Unbinder/wwwroot/favicon.ico differ
diff --git a/Unbinder/wwwroot/ts/createRecipe.ts b/Unbinder/wwwroot/ts/createRecipe.ts
new file mode 100644
index 0000000..8c850e9
--- /dev/null
+++ b/Unbinder/wwwroot/ts/createRecipe.ts
@@ -0,0 +1,18 @@
+export async function getAllIngredients () {
+  const ingredients = await fetch('/api/ingredients');
+  return await ingredients.json();
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  const ingredients = await getAllIngredients();
+  console.log({ ingredients });
+
+  const dropdown = document.getElementById('ingredient-selector');
+
+  ingredients.forEach(ingredient => {
+    const option = document.createElement('option');
+    option.value = ingredient.id;
+    option.innerText = ingredient.name;
+    dropdown.appendChild(option);
+  });
+});
diff --git a/Unbinder/wwwroot/ts/index.ts b/Unbinder/wwwroot/ts/index.ts
new file mode 100644
index 0000000..e69de29