diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..1b8ac88
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..df4a14d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "odin-restaurant-page",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.prod.js",
+    "dev": "webpack serve --open --config webpack.dev.js"
+  },
+  "keywords": [],
+  "author": "Taran Raj <https://github.com/taranraj123>",
+  "license": "ISC",
+  "description": "The Odin Project's Restaurant Page Task",
+  "devDependencies": {
+    "@eslint/js": "^9.10.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "globals": "^15.9.0",
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "prettier": "3.3.3",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
+    "webpack-merge": "^6.0.1"
+  }
+}
diff --git a/webpack.common.js b/webpack.common.js
new file mode 100644
index 0000000..664f563
--- /dev/null
+++ b/webpack.common.js
@@ -0,0 +1,36 @@
+// webpack.config.js
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "dist"),
+    clean: true,
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/template.html",
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: "asset/resource",
+      },
+    ],
+  },
+};
diff --git a/webpack.dev.js b/webpack.dev.js
new file mode 100644
index 0000000..75e093c
--- /dev/null
+++ b/webpack.dev.js
@@ -0,0 +1,18 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "inline-source-map",
+  devServer: {
+    watchFiles: [
+      "./src/template.html",
+      "./src/styles.css",
+      "./src/header/header.css",
+      "./src/home/home.css",
+      "./src/about/about.css",
+      "./src/menu/menu.css",
+    ],
+    static: "./dist",
+  },
+});
diff --git a/webpack.prod.js b/webpack.prod.js
new file mode 100644
index 0000000..80ceacd
--- /dev/null
+++ b/webpack.prod.js
@@ -0,0 +1,6 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "production",
+});