diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..86ce605
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,35 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Create .env file
+        run: |
+          echo "GIPHY_API_KEY=${{ secrets.GIPHY_API_KEY }}" > .env
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+        env:
+          GIPHY_API_KEY: ${{ secrets.GIPHY_API_KEY }}
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..466fa3c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.env
+.env.local
+.env.*.local
diff --git a/index.html b/index.html
index fa6c9fd..7edb840 100644
--- a/index.html
+++ b/index.html
@@ -167,6 +167,6 @@ <h3>Statistics</h3>
     </div>
     <button id="browse-toggle" aria-label="Browse GIFs" aria-pressed="false">Browse GIFs</button>
     <a href="https://jayrich.dev" target="_blank" rel="noopener" id="credits">jayrich.dev</a>
-    <script src="main.js" type="module" defer></script>
+    <script src="dist/bundle.js" defer></script>
 </body>
 </html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6487661
--- /dev/null
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ascii-gif-converter",
+  "version": "1.0.0",
+  "description": "Convert GIFs to ASCII art animations",
+  "main": "main.js",
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "dev": "webpack serve --mode development --open"
+  },
+  "dependencies": {
+    "dotenv": "^16.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "babel-loader": "^9.1.2",
+    "dotenv-webpack": "^8.0.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  }
+}
diff --git a/src/js/gifBrowser.js b/src/js/gifBrowser.js
index b96258e..8b22fd8 100644
--- a/src/js/gifBrowser.js
+++ b/src/js/gifBrowser.js
@@ -89,7 +89,10 @@ export class GifBrowser {
   }
 
   buildEndpoint(offset) {
-    const GIPHY_API_KEY = atob("anVBZ0RSNXhpZGU1SHR4eXRQZzRjS1hNZWhIZ2JGTGc=")
+    const GIPHY_API_KEY = process.env.GIPHY_API_KEY || ''
+    if (!GIPHY_API_KEY) {
+      throw new Error('GIPHY_API_KEY environment variable is not set')
+    }
     const baseUrl = "https://api.giphy.com/v1/gifs"
     const params = new URLSearchParams({
       api_key: GIPHY_API_KEY,
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..bfe0753
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,38 @@
+const path = require('path');
+const webpack = require('webpack');
+const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  entry: './main.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new Dotenv(),
+    new webpack.DefinePlugin({
+      'process.env.GIPHY_API_KEY': JSON.stringify(process.env.GIPHY_API_KEY)
+    })
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, '/')
+    },
+    compress: true,
+    port: 3000
+  }
+};