diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..5fa9a86
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+LOCAL_PORT=3000
diff --git a/.gitignore b/.gitignore
index a547bf3..50c8dda 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..b33c93e
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:alpine AS build
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD [ "nginx", "-g", "daemon off;" ]
diff --git a/README.md b/README.md
index cd9c894..0ee9ffc 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # BCDigital Code Challenge
 
-My submission to the code challenge from [BCDigial](https://www.bc-digital.ca/)
+My submission to the code challenge from [BCDigital](https://www.bc-digital.ca/)
 
 Landing page for hypthetical client **Great Music LLM**'s event and employee management software
 
@@ -12,3 +12,4 @@ Landing page for hypthetical client **Great Music LLM**'s event and employee man
 - [`prettier`](https://prettier.io/) code formatting
 - [`eslint`](https://eslint.org/) code linting
 - [`husky`](https://typicode.github.io/husky/) and [`lint-staged`](https://github.com/lint-staged/lint-staged) pre-commit hooks for testing/formatting/linting
+- [Docker](https://www.docker.com/) containerization
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..85a4bf4
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,6 @@
+services:
+  nginx:
+    build: .
+    ports:
+      - "${LOCAL_PORT}:80"
+    restart: always
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..0e1f6e8
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,7 @@
+server {
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+}
diff --git a/src/components/ui/dot-pattern.tsx b/src/components/ui/dot-pattern.tsx
index d904872..a217a9b 100644
--- a/src/components/ui/dot-pattern.tsx
+++ b/src/components/ui/dot-pattern.tsx
@@ -122,7 +122,7 @@ export function DotPattern({
           <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
         </radialGradient>
       </defs>
-      {dots.map((dot, index) => (
+      {dots.map((dot) => (
         <motion.circle
           key={`${dot.x}-${dot.y}`}
           cx={dot.x}
diff --git a/src/components/ui/marquee.tsx b/src/components/ui/marquee.tsx
index 0bd11ec..88cd8bb 100644
--- a/src/components/ui/marquee.tsx
+++ b/src/components/ui/marquee.tsx
@@ -46,7 +46,7 @@ export function Marquee({
     <div
       {...props}
       className={cn(
-        "group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
         {
           "flex-row": !vertical,
           "flex-col": vertical,
@@ -59,11 +59,11 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+            className={cn("flex shrink-0 justify-around gap-(--gap)", {
               "animate-marquee flex-row": !vertical,
               "animate-marquee-vertical flex-col": vertical,
-              "group-hover:[animation-play-state:paused]": pauseOnHover,
-              "[animation-direction:reverse]": reverse,
+              "group-hover:paused": pauseOnHover,
+              "direction-[reverse]": reverse,
             })}
           >
             {children}