diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..026ee38
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,6 @@
+services:
+  app:
+    build: ./web/.
+    container_name: potion.frontend
+    ports:
+      - "3002:3002" # host:container
diff --git a/web/Dockerfile b/web/Dockerfile
new file mode 100644
index 0000000..00400f9
--- /dev/null
+++ b/web/Dockerfile
@@ -0,0 +1,22 @@
+# Build stage
+FROM node:18-alpine AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Runtime stage
+FROM node:18-alpine
+WORKDIR /app
+
+# Install static file server
+RUN npm install -g serve
+
+# Copy build output only
+COPY --from=build /app/dist ./dist
+
+EXPOSE 3002
+CMD ["serve", "-s", "dist", "-l", "3002"]
diff --git a/web/src/components/inputs/RecipeSearchBar.tsx b/web/src/components/inputs/RecipeSearchBar.tsx
index 4392fae..f387064 100644
--- a/web/src/components/inputs/RecipeSearchBar.tsx
+++ b/web/src/components/inputs/RecipeSearchBar.tsx
@@ -1,4 +1,4 @@
-import { use, useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { use, useEffect, useState, type ChangeEvent, type Dispatch, type FormEvent, type SetStateAction } from "react";
 import type { SearchFilters } from "../../types/search";
 import FilterButton from "../buttons/FilterButton";
 import RecipeSearchFilterDropdown from "./RecipeSearchFilterDropdown";
@@ -14,11 +14,11 @@ interface RecipeSearchBarProps {
   redirect: boolean;
   searchOnLoad: boolean;
   favorites: boolean;
-  setRecipes: React.Dispatch<React.SetStateAction<Recipe[]>> | null;
+  setRecipes: Dispatch<SetStateAction<Recipe[]>> | null;
 
   // Loading is optional
   loading?: boolean;
-  setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+  setLoading?: Dispatch<SetStateAction<boolean>>;
 };
 
 export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, setRecipes, loading, setLoading }: RecipeSearchBarProps) {
diff --git a/web/src/components/inputs/RecipeSearchFilterDropdown.tsx b/web/src/components/inputs/RecipeSearchFilterDropdown.tsx
index 6422eed..a3a59bf 100644
--- a/web/src/components/inputs/RecipeSearchFilterDropdown.tsx
+++ b/web/src/components/inputs/RecipeSearchFilterDropdown.tsx
@@ -4,7 +4,7 @@ import DropdownButton from "../buttons/DropdownButton";
 
 interface RecipeSearchFilterDropdownProps {
   filters: SearchFilters;
-  setFilters: React.Dispatch<React.SetStateAction<SearchFilters>>;
+  setFilters: (filters: SearchFilters) => void;
   display: boolean;
 };
 
diff --git a/web/src/components/items/IngredientList.tsx b/web/src/components/items/IngredientList.tsx
index 6e9c337..e01eba7 100644
--- a/web/src/components/items/IngredientList.tsx
+++ b/web/src/components/items/IngredientList.tsx
@@ -24,7 +24,7 @@ export default function IngredientList({ ingredients }: IngredientListProps) {
                   ></path>
                 </svg>
               </span>
-              <span className="font-semibold mr-2">{ingredient.Quantity}: </span> {ingredient.Name}
+              <span className="font-semibold mr-2">{ingredient.Amount}: </span> {ingredient.Name}
             </li>
           ))}
         </ul>
diff --git a/web/src/context/ProtectedRoute.tsx b/web/src/context/ProtectedRoute.tsx
deleted file mode 100644
index a4f9c23..0000000
--- a/web/src/context/ProtectedRoute.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export function ProtectedRoute
diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
index 19d088f..b2b8401 100644
--- a/web/src/pages/Login.tsx
+++ b/web/src/pages/Login.tsx
@@ -6,7 +6,7 @@ import { useSearchParams } from "react-router-dom";
 
 export default function LoginPage() {
   const [error, setError] = useState<string>("");
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, ] = useSearchParams();
 
   const clickHandler = async (): Promise<void> => {
     const result: string | ApiError = await GetGoogleAuthUrl();