diff --git a/package.json b/package.json
index ce8daaa..e31d7b9 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,14 @@
     "babel-core": "^6.26.3",
     "babel-plugin-styled-components": "^2.0.2",
     "bcryptjs": "^2.4.3",
-    "cloudinary-build-url": "^0.2.1",
-    "dotenv": "^10.0.0",
+    "cloudinary-build-url": "^0.2.4",
+    "dotenv": "^14.3.2",
     "escape-html": "^1.0.3",
     "iron-session": "^6.0.5",
     "jsonwebtoken": "^8.5.1",
-    "mongodb": "^4.3.0",
-    "mongoose": "^6.1.5",
-    "next": "^12.0.7",
+    "mongodb": "^4.3.1",
+    "mongoose": "^6.1.8",
+    "next": "^12.0.9",
     "next-with-apollo": "^5.2.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
@@ -31,16 +31,16 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "styled-components": "^5.3.3",
-    "swr": "^0.5.6",
+    "swr": "^1.2.0",
     "waait": "^1.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.7",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.6.0",
+    "eslint": "^8.7.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-wesbos": "^3.0.2",
@@ -51,7 +51,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.5.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "eslintConfig": {
     "extends": [
diff --git a/utils/buildBase64Data.js b/utils/buildBase64Data.js
new file mode 100644
index 0000000..7df5002
--- /dev/null
+++ b/utils/buildBase64Data.js
@@ -0,0 +1,38 @@
+import { getPlaiceholder } from 'plaiceholder';
+import { buildUrl } from 'cloudinary-build-url';
+
+export default async function buildBase64Data(
+  imageName,
+  alt,
+  additionalProps = {}
+) {
+  const folderName = process.env.PUBLIC_FOLDER_NAME;
+  const cloudName = process.env.PUBLIC_CLOUD_NAME;
+  let imagePath;
+
+  if (imageName && alt && additionalProps) {
+    imagePath = buildUrl(`${folderName}/${imageName}`, {
+      cloud: {
+        cloudName,
+      },
+    });
+  }
+
+  if (imagePath) {
+    try {
+      const { base64, img } = await getPlaiceholder(imagePath, { size: 10 });
+      return {
+        imageProps: {
+          ...img,
+          blurDataURL: base64,
+        },
+        alt,
+        ...additionalProps,
+      };
+    } catch (e) {
+      // Error getting plaiceholder
+      // throw new Error('Error creating plaiceholder base64 image');
+    }
+  }
+  return {};
+}