diff --git a/.github/workflows/dockerBuildAndDeploy.yaml b/.github/workflows/dockerBuildAndDeploy.yaml
new file mode 100644
index 00000000..9897c924
--- /dev/null
+++ b/.github/workflows/dockerBuildAndDeploy.yaml
@@ -0,0 +1,41 @@
+name: Create and publish the Docker image
+on:
+  push:
+    branches: ['main']
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Build and push client Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./client
+          push: true
+          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:client
+          labels: ${{ steps.meta.outputs.labels }}
+      - name: Build and push server Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./server
+          push: true
+          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:server
+          labels: ${{ steps.meta.outputs.labels }}
diff --git a/client/Dockerfile b/client/Dockerfile
new file mode 100644
index 00000000..a7fddb87
--- /dev/null
+++ b/client/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:19.6.0
+LABEL org.opencontainers.image.source=https://github.com/rosewang01/dockerize-boilerplate
+LABEL org.opencontainers.image.description="Boilerplate Client Side Container"
+LABEL org.opencontainers.image.licenses=MIT
+WORKDIR /
+COPY ./package.json /package.json
+COPY ./public /public
+COPY ./src /src
+RUN yarn config set network-timeout 600000 -g
+RUN yarn install
+EXPOSE 3000
+CMD ["yarn","client"]
\ No newline at end of file
diff --git a/client/Dockerfile.reactUI b/client/Dockerfile.reactUI
deleted file mode 100644
index 7688f3bb..00000000
--- a/client/Dockerfile.reactUI
+++ /dev/null
@@ -1,9 +0,0 @@
-FROM node:19.6.0
-WORKDIR /
-COPY ./package.json /package.json
-COPY ./public /public
-COPY ./src /src
-RUN yarn config set network-timeout 600000 -g
-RUN yarn install
-EXPOSE 3000
-CMD ["yarn","client"]
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 762df8d7..24f29391 100644
--- a/client/package.json
+++ b/client/package.json
@@ -37,6 +37,7 @@
     "@mui/system": "^5.5.2",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^1.1.2",
+    "cross-env": "^7.0.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -50,6 +51,7 @@
     "web-vitals": "^3.0.3"
   },
   "devDependencies": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -59,7 +61,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/styled-components": "^5.1.23",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
     "eslint": "^8.8.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript-prettier": "^5.0.0",
diff --git a/docker-compose.yml b/docker-compose.yml
index 3f1901d4..8b3fc516 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,13 +2,13 @@ services:
   reactfrontend:
     build:
       context: ./client
-      dockerfile: Dockerfile.reactUI
+      dockerfile: Dockerfile
     ports:
       - "3000:3000"
   nodebackend:
     build:
       context: ./server
-      dockerfile: Dockerfile.node
+      dockerfile: Dockerfile
     ports:
       - "4000:4000"
     env_file: ./server/.env
\ No newline at end of file
diff --git a/server/Dockerfile b/server/Dockerfile
new file mode 100644
index 00000000..296e59be
--- /dev/null
+++ b/server/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:20.0.0
+LABEL org.opencontainers.image.source=https://github.com/rosewang01/dockerize-boilerplate
+LABEL org.opencontainers.image.description="Boilerplate Server Side Container"
+LABEL org.opencontainers.image.licenses=MIT
+WORKDIR /
+COPY ./package.json ./package.json
+COPY ./src ./src
+RUN yarn install
+EXPOSE 4000
+CMD ["yarn", "server"]
\ No newline at end of file
diff --git a/server/Dockerfile.node b/server/Dockerfile.node
deleted file mode 100644
index 44ab6701..00000000
--- a/server/Dockerfile.node
+++ /dev/null
@@ -1,7 +0,0 @@
-FROM node:20.0.0
-WORKDIR /
-COPY ./package.json ./package.json
-COPY ./src ./src
-RUN yarn install
-EXPOSE 4000
-CMD ["yarn", "server"]
\ No newline at end of file
diff --git a/server/package.json b/server/package.json
index f2fc3b40..415ea012 100644
--- a/server/package.json
+++ b/server/package.json
@@ -19,6 +19,7 @@
     "connect-mongo": "^4.6.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
+    "cross-env": "^7.0.3",
     "dotenv": "^16.0.1",
     "express": "^4.17.2",
     "express-flash": "^0.0.2",
diff --git a/yarn.lock b/yarn.lock
index 95800fbe..72eff89d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1043,6 +1043,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.23.9":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz"
@@ -1218,7 +1225,7 @@
     source-map "^0.5.7"
     stylis "4.0.13"
 
-"@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3":
+"@emotion/cache@^11.10.0":
   version "11.10.3"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz"
   integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==
@@ -1900,14 +1907,14 @@
     "@mui/utils" "^5.10.6"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.10.8":
-  version "5.10.8"
-  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.8.tgz"
-  integrity sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw==
+"@mui/styled-engine@^5.10.8", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
+  version "6.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-6.0.0-alpha.18.tgz#4a6c4bb6bf5c701680703ef0bc8c3b85ea79d87a"
+  integrity sha512-W3mqR1K01rPL0BVNTgGpIYxdbQ/nTAlwYaohRdmX7FZvbm1yKw9F90OIGxM503dfRMVBi6a/neYPgIUebcGsHw==
   dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@emotion/cache" "^11.10.3"
-    csstype "^3.1.1"
+    "@babel/runtime" "^7.23.9"
+    csstype "^3.1.3"
+    hoist-non-react-statics "^3.3.2"
     prop-types "^15.8.1"
 
 "@mui/system@^5.10.8", "@mui/system@^5.5.1", "@mui/system@^5.5.2":
@@ -4213,7 +4220,7 @@ create-require@^1.1.0:
 
 cross-env@^7.0.3:
   version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
   integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
   dependencies:
     cross-spawn "^7.0.1"
@@ -4441,6 +4448,11 @@ csstype@^3.0.2, csstype@^3.1.1:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -9555,6 +9567,11 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz"
@@ -10358,10 +10375,10 @@ style-loader@^3.3.1:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
-styled-components@^5.3.3, styled-components@^5.3.5:
-  version "5.3.6"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz"
-  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+styled-components@^5, styled-components@^5.3.3, styled-components@^5.3.5:
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
+  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"