diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
index e9d5ca0c..e4d19ddf 100644
--- a/.github/workflows/firebase-hosting-merge.yml
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -16,6 +16,6 @@ jobs:
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_THE_HANDSOMEST_NERD }}'
           channelId: live
-          projectId: chowworks-website
+          projectId: the-handsomest-nerd-internal
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
index 5ff1da7b..16c653fc 100644
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -14,4 +14,4 @@ jobs:
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
-          projectId: chowworks-website
+          projectId: the-handsomest-nerd-internal
diff --git a/functions/package.json b/functions/package.json
index 58813022..56e3d5e3 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "functions",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "scripts": {
     "lint": "eslint --ext .js,.ts .",
     "build": "tsc",
diff --git a/package-lock.json b/package-lock.json
index 688fbefa..590ab2fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "chowworks-website",
-  "version": "0.3.1",
+  "name": "the-handsomestnerd-internal",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "chowworks-website",
-      "version": "0.3.1",
+      "name": "the-handsomestnerd-internal",
+      "version": "0.4.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@emotion/react": "^11.11.1",
@@ -26,7 +26,6 @@
         "firebase": "^9.14.0",
         "framer-motion": "^10.16.5",
         "ga-gtag": "^1.1.5",
-        "google-map-react": "^2.2.1",
         "material-ui-popup-state": "^5.0.9",
         "moment": "^2.29.4",
         "msw": "^0.47.4",
@@ -74,7 +73,6 @@
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.5.1",
         "@types/aos": "^3.0.4",
-        "@types/google-map-react": "^2.1.10",
         "@types/jest": "^29.5.5",
         "@types/react": "^18.0.22",
         "@types/react-dom": "^18.0.7",
@@ -5037,11 +5035,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "node_modules/@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
     "node_modules/@mdx-js/react": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
@@ -12437,15 +12430,6 @@
       "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
       "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw=="
     },
-    "node_modules/@types/google-map-react": {
-      "version": "2.1.10",
-      "resolved": "https://registry.npmjs.org/@types/google-map-react/-/google-map-react-2.1.10.tgz",
-      "integrity": "sha512-8/0UllZS7tF08WNBRPQlSJCkETvz3e3sZoPxzDaWkj2iV5dmFSnOKXVtoeKo8dLZSe+RkLn479t1wj6nXmLLSA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/google.maps": {
       "version": "3.53.5",
       "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.53.5.tgz",
@@ -19168,24 +19152,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/google-map-react": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.1.tgz",
-      "integrity": "sha512-Dg8aexf5rNSmywj0XKQ5m4RNzVcWwKEM2BGDj5aPChD0um8ZRjB5Upcb/yg/i0oG1aES29asQ5+6BHVgrK5xGA==",
-      "dependencies": {
-        "@googlemaps/js-api-loader": "^1.13.8",
-        "@mapbox/point-geometry": "^0.1.0",
-        "eventemitter3": "^4.0.4",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -34992,11 +34958,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
     "@mdx-js/react": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
@@ -39979,15 +39940,6 @@
       "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
       "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw=="
     },
-    "@types/google-map-react": {
-      "version": "2.1.10",
-      "resolved": "https://registry.npmjs.org/@types/google-map-react/-/google-map-react-2.1.10.tgz",
-      "integrity": "sha512-8/0UllZS7tF08WNBRPQlSJCkETvz3e3sZoPxzDaWkj2iV5dmFSnOKXVtoeKo8dLZSe+RkLn479t1wj6nXmLLSA==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/google.maps": {
       "version": "3.53.5",
       "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.53.5.tgz",
@@ -44949,17 +44901,6 @@
         "slash": "^3.0.0"
       }
     },
-    "google-map-react": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.1.tgz",
-      "integrity": "sha512-Dg8aexf5rNSmywj0XKQ5m4RNzVcWwKEM2BGDj5aPChD0um8ZRjB5Upcb/yg/i0oG1aES29asQ5+6BHVgrK5xGA==",
-      "requires": {
-        "@googlemaps/js-api-loader": "^1.13.8",
-        "@mapbox/point-geometry": "^0.1.0",
-        "eventemitter3": "^4.0.4",
-        "prop-types": "^15.7.2"
-      }
-    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
diff --git a/package.json b/package.json
index ac6b47ba..4e4d4591 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "the-handsomestnerd-internal",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "GPL-3.0-or-later",
   "private": true,
   "dependencies": {
@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.18",
     "@mui/styles": "^5.14.18",
+    "@react-google-maps/api": "^2.19.2",
     "@storybook/addon-mdx-gfm": "^7.4.6",
     "@storybook/react-webpack5": "^7.4.6",
     "@tanstack/react-query": "^4.36.1",
diff --git a/sanityIo/package-lock.json b/sanityIo/package-lock.json
index d8971282..7e10afd1 100644
--- a/sanityIo/package-lock.json
+++ b/sanityIo/package-lock.json
@@ -1,16 +1,16 @@
 {
-  "name": "chow-works-sanity",
-  "version": "0.3.1",
+  "name": "the-handsomest-nerd-sanity",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "chow-works-sanity",
-      "version": "0.3.1",
+      "name": "the-handsomest-nerd-sanity",
+      "version": "0.4.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@sanity/block-content-to-react": "^3.0.0",
-        "@sanity/cli": "^3.19.1",
+        "@sanity/cli": "^3.20.2",
         "@sanity/code-input": "^2.30.0",
         "@sanity/components": "^2.14.0",
         "@sanity/vision": "^3.16.7",
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz",
-      "integrity": "sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -193,9 +193,9 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz",
-      "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
@@ -241,9 +241,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -257,9 +257,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -302,9 +302,9 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
-      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
       },
@@ -411,11 +411,11 @@
       "license": "MIT"
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz",
+      "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
@@ -1020,6 +1020,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
@@ -1477,9 +1488,9 @@
       }
     },
     "node_modules/@sanity/cli": {
-      "version": "3.19.1",
-      "resolved": "https://registry.npmjs.org/@sanity/cli/-/cli-3.19.1.tgz",
-      "integrity": "sha512-4kjZzCgrXGhUD09AU/cj3gHQ/h30VJ4FZ+y9B7M8YNE/5GQL+S00mtt93J57AWARwuMpqXgVnCO3HINMvHthwQ==",
+      "version": "3.20.2",
+      "resolved": "https://registry.npmjs.org/@sanity/cli/-/cli-3.20.2.tgz",
+      "integrity": "sha512-Xd61aTqzSZbGTpxkXznhb7+h9p3lWWoPmfwpDM2DxDNkjCYrGl+G5r8dLFTJ+W3FXD7zOd4jedqlVgpE5bu1gQ==",
       "dependencies": {
         "@babel/traverse": "^7.19.0",
         "chalk": "^4.1.2",
@@ -4110,9 +4121,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.11",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.11.tgz",
-      "integrity": "sha512-xn1UXOKUz7DjdGlg9RrUr0GGiWzI97UQJnugHtH0OLDfJB7jMgoIkYvRIEO1l9EeEERVqeqLYOcFBW9ldjypbQ==",
+      "version": "4.22.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
       "funding": [
         {
           "type": "opencollective",
@@ -4128,9 +4139,9 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001538",
-        "electron-to-chromium": "^1.4.526",
-        "node-releases": "^2.0.13",
+        "caniuse-lite": "^1.0.30001565",
+        "electron-to-chromium": "^1.4.601",
+        "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
       "bin": {
@@ -4193,9 +4204,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001539",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz",
-      "integrity": "sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA==",
+      "version": "1.0.30001566",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz",
+      "integrity": "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4375,6 +4386,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/compress-commons": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
@@ -4827,9 +4845,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.528",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.528.tgz",
-      "integrity": "sha512-UdREXMXzLkREF4jA8t89FQjA8WHI6ssP38PMY4/4KhXFQbtImnghh4GkCgrtiZwLKUKVD2iTVXvDVQjfomEQuA=="
+      "version": "1.4.601",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz",
+      "integrity": "sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA=="
     },
     "node_modules/element-resize-detector": {
       "version": "1.2.4",
@@ -4975,15 +4993,6 @@
         "source-map": "~0.6.1"
       }
     },
-    "node_modules/escodegen/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -5307,9 +5316,12 @@
       "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -5541,10 +5553,9 @@
       "integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
     },
     "node_modules/graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
-      "license": "ISC"
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/groq-js": {
       "version": "0.2.0",
@@ -6516,9 +6527,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
@@ -6573,9 +6584,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -8737,6 +8748,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -8745,6 +8765,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -8991,6 +9022,25 @@
         "node": ">= 6"
       }
     },
+    "node_modules/terser": {
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
+      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -10021,9 +10071,9 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz",
-      "integrity": "sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw=="
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw=="
     },
     "@babel/core": {
       "version": "7.23.0",
@@ -10124,9 +10174,9 @@
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz",
-      "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
       "requires": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
@@ -10157,9 +10207,9 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ=="
     },
     "@babel/helper-validator-identifier": {
       "version": "7.22.20",
@@ -10167,9 +10217,9 @@
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
     },
     "@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA=="
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw=="
     },
     "@babel/helpers": {
       "version": "7.23.1",
@@ -10197,9 +10247,9 @@
       "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
-      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.22.5"
       }
@@ -10271,11 +10321,11 @@
       }
     },
     "@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz",
+      "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
       "requires": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       }
@@ -10636,6 +10686,17 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
     },
+    "@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
@@ -11028,9 +11089,9 @@
       }
     },
     "@sanity/cli": {
-      "version": "3.19.1",
-      "resolved": "https://registry.npmjs.org/@sanity/cli/-/cli-3.19.1.tgz",
-      "integrity": "sha512-4kjZzCgrXGhUD09AU/cj3gHQ/h30VJ4FZ+y9B7M8YNE/5GQL+S00mtt93J57AWARwuMpqXgVnCO3HINMvHthwQ==",
+      "version": "3.20.2",
+      "resolved": "https://registry.npmjs.org/@sanity/cli/-/cli-3.20.2.tgz",
+      "integrity": "sha512-Xd61aTqzSZbGTpxkXznhb7+h9p3lWWoPmfwpDM2DxDNkjCYrGl+G5r8dLFTJ+W3FXD7zOd4jedqlVgpE5bu1gQ==",
       "requires": {
         "@babel/traverse": "^7.19.0",
         "chalk": "^4.1.2",
@@ -13217,13 +13278,13 @@
       }
     },
     "browserslist": {
-      "version": "4.21.11",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.11.tgz",
-      "integrity": "sha512-xn1UXOKUz7DjdGlg9RrUr0GGiWzI97UQJnugHtH0OLDfJB7jMgoIkYvRIEO1l9EeEERVqeqLYOcFBW9ldjypbQ==",
+      "version": "4.22.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
       "requires": {
-        "caniuse-lite": "^1.0.30001538",
-        "electron-to-chromium": "^1.4.526",
-        "node-releases": "^2.0.13",
+        "caniuse-lite": "^1.0.30001565",
+        "electron-to-chromium": "^1.4.601",
+        "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       }
     },
@@ -13257,9 +13318,9 @@
       "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001539",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz",
-      "integrity": "sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA=="
+      "version": "1.0.30001566",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz",
+      "integrity": "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA=="
     },
     "capture-stack-trace": {
       "version": "1.0.1",
@@ -13384,6 +13445,13 @@
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
       "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
     },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "optional": true,
+      "peer": true
+    },
     "compress-commons": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
@@ -13749,9 +13817,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.528",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.528.tgz",
-      "integrity": "sha512-UdREXMXzLkREF4jA8t89FQjA8WHI6ssP38PMY4/4KhXFQbtImnghh4GkCgrtiZwLKUKVD2iTVXvDVQjfomEQuA=="
+      "version": "1.4.601",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz",
+      "integrity": "sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA=="
     },
     "element-resize-detector": {
       "version": "1.2.4",
@@ -13858,14 +13926,6 @@
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
         "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
-        }
       }
     },
     "esprima": {
@@ -14111,9 +14171,9 @@
       }
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "gensync": {
       "version": "1.0.0-beta.2",
@@ -14279,9 +14339,9 @@
       "integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
     },
     "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "groq-js": {
       "version": "0.2.0",
@@ -14994,9 +15054,9 @@
       "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
     },
     "node-releases": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "normalize-package-data": {
       "version": "2.5.0",
@@ -15040,9 +15100,9 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
     },
     "observable-callback": {
       "version": "1.0.3",
@@ -16660,11 +16720,28 @@
         }
       }
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -16867,6 +16944,19 @@
         }
       }
     },
+    "terser": {
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
+      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      }
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
diff --git a/sanityIo/package.json b/sanityIo/package.json
index f3181380..965ee0dd 100644
--- a/sanityIo/package.json
+++ b/sanityIo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "the-handsomest-nerd-sanity",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Sanity CMS for React Website Builder",
   "main": "package.json",
   "author": "theHandsomestNerd <hello@thehandsomestnerd.com>",
@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/cli": "^3.19.1",
+    "@sanity/cli": "^3.20.2",
     "@sanity/code-input": "^2.30.0",
     "@sanity/components": "^2.14.0",
     "@sanity/vision": "^3.16.7",
diff --git a/sanityIo/sanity.json b/sanityIo/sanity.json
new file mode 100644
index 00000000..fb018c4c
--- /dev/null
+++ b/sanityIo/sanity.json
@@ -0,0 +1,65 @@
+{
+  "root": true,
+  "api": {
+    "projectId": "e5l5k4i5",
+    "dataset": "production"
+  },
+  "project": {
+    "name": "The handsomest Nerd Website"
+  },
+  "__experimental_spaces": [
+    {
+      "name": "production",
+      "title": "Production",
+      "api": {
+        "projectId": "e5l5k4i5",
+        "dataset": "production"
+      }
+    },
+    {
+      "name": "development",
+      "title": "Development",
+      "default": true,
+      "api": {
+        "projectId": "e5l5k4i5",
+        "dataset": "development"
+      }
+    }
+  ],
+  "plugins": [
+    "@sanity/base",
+    "@sanity/components",
+    "@sanity/default-layout",
+    "@sanity/default-login",
+    "@sanity/desk-tool",
+    "color-list",
+    "@sanity/code-input",
+    "json-input",
+    "media"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "@sanity/vision"
+      ]
+    }
+  },
+  "parts": [
+    {
+      "name": "part:@sanity/base/schema",
+      "path": "./schemas/schema"
+    },
+    {
+      "name": "part:@sanity/desk-tool/structure",
+      "path": "./parts/deskStructure.js"
+    },
+    {
+      "implements": "part:@sanity/form-builder/input/image/asset-sources",
+      "path": "./parts/assetSources.js"
+    },
+    {
+      "implements": "part:@sanity/form-builder/input/file/asset-sources",
+      "path": "./parts/assetSources.js"
+    }
+  ]
+}
diff --git a/sanityIo/schemas/mui/MuiColorPalatte.js b/sanityIo/schemas/mui/MuiColorPalatte.js
index 38bbdc82..7a642547 100644
--- a/sanityIo/schemas/mui/MuiColorPalatte.js
+++ b/sanityIo/schemas/mui/MuiColorPalatte.js
@@ -20,6 +20,7 @@
 //     {value: "DARK_GRAY", title: "Dark Gray"},
 //     {value: "LIGHTER_GRAY", title: "Lighter Gray"},
 // ]
+
 import {ColorListing} from "./ColorListing";
 
 export default {
diff --git a/sanityIo/schemas/sections/web-dev/FooterSection.js b/sanityIo/schemas/sections/web-dev/FooterSection.js
index b515c20a..880f5c3b 100644
--- a/sanityIo/schemas/sections/web-dev/FooterSection.js
+++ b/sanityIo/schemas/sections/web-dev/FooterSection.js
@@ -10,6 +10,11 @@ export default {
             title: 'Name',
             type: 'string',
         },
+        {
+            name: 'topPadding',
+            title: 'Top Padding',
+            type: 'string',
+        },
         {
             name: 'backgroundImgSrc',
             title: 'Background Image',
@@ -18,6 +23,7 @@ export default {
                 hotspot: true,
             },
         },
+
         {
             name: 'backgroundColor',
             title: 'Background Color',
diff --git a/sanityIo/yarn.lock b/sanityIo/yarn.lock
index 6445f203..aef86b8a 100644
--- a/sanityIo/yarn.lock
+++ b/sanityIo/yarn.lock
@@ -19,9 +19,9 @@
     "chalk" "^2.4.2"
 
 "@babel/compat-data@^7.22.9":
-  "integrity" "sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw=="
-  "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz"
-  "version" "7.22.20"
+  "integrity" "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw=="
+  "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz"
+  "version" "7.23.5"
 
 "@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.22.20":
   "integrity" "sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ=="
@@ -100,9 +100,9 @@
     "@babel/types" "^7.22.15"
 
 "@babel/helper-module-transforms@^7.23.0":
-  "integrity" "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz"
-  "version" "7.23.0"
+  "integrity" "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz"
+  "version" "7.23.3"
   dependencies:
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-module-imports" "^7.22.15"
@@ -129,10 +129,10 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-string-parser@^7.22.5":
-  "integrity" "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz"
-  "version" "7.22.5"
+"@babel/helper-string-parser@^7.23.4":
+  "integrity" "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz"
+  "version" "7.23.4"
 
 "@babel/helper-validator-identifier@^7.22.20":
   "integrity" "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
@@ -140,9 +140,9 @@
   "version" "7.22.20"
 
 "@babel/helper-validator-option@^7.22.15":
-  "integrity" "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA=="
-  "resolved" "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz"
-  "version" "7.22.15"
+  "integrity" "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw=="
+  "resolved" "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz"
+  "version" "7.23.5"
 
 "@babel/helpers@^7.23.0":
   "integrity" "sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA=="
@@ -168,9 +168,9 @@
   "version" "7.23.0"
 
 "@babel/plugin-syntax-jsx@^7.22.5":
-  "integrity" "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg=="
-  "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz"
-  "version" "7.22.5"
+  "integrity" "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg=="
+  "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz"
+  "version" "7.23.3"
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -221,11 +221,11 @@
     "globals" "^11.1.0"
 
 "@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
-  "integrity" "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg=="
-  "resolved" "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz"
-  "version" "7.23.0"
+  "integrity" "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w=="
+  "resolved" "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz"
+  "version" "7.23.5"
   dependencies:
-    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-string-parser" "^7.23.4"
     "@babel/helper-validator-identifier" "^7.22.20"
     "to-fast-properties" "^2.0.0"
 
@@ -450,6 +450,14 @@
   "resolved" "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
   "version" "1.1.2"
 
+"@jridgewell/source-map@^0.3.3":
+  "integrity" "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ=="
+  "resolved" "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz"
+  "version" "0.3.5"
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
   "integrity" "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
   "resolved" "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
@@ -791,10 +799,10 @@
     "get-random-values-esm" "^1.0.0"
     "lodash" "^4.17.21"
 
-"@sanity/cli@^3.19.1":
-  "integrity" "sha512-4kjZzCgrXGhUD09AU/cj3gHQ/h30VJ4FZ+y9B7M8YNE/5GQL+S00mtt93J57AWARwuMpqXgVnCO3HINMvHthwQ=="
-  "resolved" "https://registry.npmjs.org/@sanity/cli/-/cli-3.19.1.tgz"
-  "version" "3.19.1"
+"@sanity/cli@^3.20.2":
+  "integrity" "sha512-Xd61aTqzSZbGTpxkXznhb7+h9p3lWWoPmfwpDM2DxDNkjCYrGl+G5r8dLFTJ+W3FXD7zOd4jedqlVgpE5bu1gQ=="
+  "resolved" "https://registry.npmjs.org/@sanity/cli/-/cli-3.20.2.tgz"
+  "version" "3.20.2"
   dependencies:
     "@babel/traverse" "^7.19.0"
     "chalk" "^4.1.2"
@@ -1857,7 +1865,7 @@
   "resolved" "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
   "version" "8.2.0"
 
-"acorn@^8.1.0", "acorn@^8.8.1":
+"acorn@^8.1.0", "acorn@^8.8.1", "acorn@^8.8.2":
   "integrity" "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
   "resolved" "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz"
   "version" "8.10.0"
@@ -2073,13 +2081,13 @@
     "pako" "~0.2.0"
 
 "browserslist@^4.21.9", "browserslist@>= 4.21.0":
-  "integrity" "sha512-xn1UXOKUz7DjdGlg9RrUr0GGiWzI97UQJnugHtH0OLDfJB7jMgoIkYvRIEO1l9EeEERVqeqLYOcFBW9ldjypbQ=="
-  "resolved" "https://registry.npmjs.org/browserslist/-/browserslist-4.21.11.tgz"
-  "version" "4.21.11"
+  "integrity" "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A=="
+  "resolved" "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz"
+  "version" "4.22.2"
   dependencies:
-    "caniuse-lite" "^1.0.30001538"
-    "electron-to-chromium" "^1.4.526"
-    "node-releases" "^2.0.13"
+    "caniuse-lite" "^1.0.30001565"
+    "electron-to-chromium" "^1.4.601"
+    "node-releases" "^2.0.14"
     "update-browserslist-db" "^1.0.13"
 
 "buffer-crc32@^0.2.1", "buffer-crc32@^0.2.13":
@@ -2110,10 +2118,10 @@
   "resolved" "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz"
   "version" "1.0.1"
 
-"caniuse-lite@^1.0.30001538":
-  "integrity" "sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA=="
-  "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz"
-  "version" "1.0.30001539"
+"caniuse-lite@^1.0.30001565":
+  "integrity" "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA=="
+  "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz"
+  "version" "1.0.30001566"
 
 "capture-stack-trace@^1.0.0":
   "integrity" "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw=="
@@ -2252,6 +2260,11 @@
   "resolved" "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz"
   "version" "1.0.8"
 
+"commander@^2.20.0":
+  "integrity" "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+  "resolved" "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  "version" "2.20.3"
+
 "compress-commons@^4.1.2":
   "integrity" "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg=="
   "resolved" "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz"
@@ -2607,10 +2620,10 @@
     "readable-stream" "^3.1.1"
     "stream-shift" "^1.0.0"
 
-"electron-to-chromium@^1.4.526":
-  "integrity" "sha512-UdREXMXzLkREF4jA8t89FQjA8WHI6ssP38PMY4/4KhXFQbtImnghh4GkCgrtiZwLKUKVD2iTVXvDVQjfomEQuA=="
-  "resolved" "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.528.tgz"
-  "version" "1.4.528"
+"electron-to-chromium@^1.4.601":
+  "integrity" "sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA=="
+  "resolved" "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz"
+  "version" "1.4.601"
 
 "element-resize-detector@^1.1.14":
   "integrity" "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg=="
@@ -2972,9 +2985,9 @@
     "xregexp" "2.0.0"
 
 "function-bind@^1.1.1":
-  "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-  "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
-  "version" "1.1.1"
+  "integrity" "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+  "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  "version" "1.1.2"
 
 "gensync@^1.0.0-beta.2":
   "integrity" "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
@@ -3111,9 +3124,9 @@
   "version" "1.0.9"
 
 "graceful-fs@^4.1.2", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0":
-  "integrity" "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
-  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz"
-  "version" "4.2.8"
+  "integrity" "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  "version" "4.2.11"
 
 "groq-js@^0.2.0":
   "integrity" "sha512-qJeuEgziddryH1ClsJvMoZM9aXNQbBViNZZrJwhHKr2wU8HGGM7uNWNVFglWXMX60MMaa2SClX3UohP76Ut68g=="
@@ -3855,10 +3868,10 @@
   "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
   "version" "3.3.6"
 
-"node-releases@^2.0.13":
-  "integrity" "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
-  "resolved" "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz"
-  "version" "2.0.13"
+"node-releases@^2.0.14":
+  "integrity" "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+  "resolved" "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz"
+  "version" "2.0.14"
 
 "normalize-package-data@^2.5.0":
   "integrity" "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA=="
@@ -3898,9 +3911,9 @@
   "version" "2.0.0"
 
 "object-inspect@^1.6.0":
-  "integrity" "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
-  "resolved" "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
-  "version" "1.12.2"
+  "integrity" "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
+  "resolved" "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz"
+  "version" "1.13.1"
 
 "observable-callback@^1.0.1", "observable-callback@^1.0.2":
   "integrity" "sha512-VlS275UyPnwdMtzxDgr/lCiOUyq9uXNll3vdwzDcJ6PB/LuO7gLmxAQopcCA3JoFwwujBwyA7/tP5TXZwWSXew=="
@@ -5078,7 +5091,15 @@
   "resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   "version" "1.0.2"
 
-"source-map@~0.6.1":
+"source-map-support@~0.5.20":
+  "integrity" "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="
+  "resolved" "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
+  "version" "0.5.21"
+  dependencies:
+    "buffer-from" "^1.0.0"
+    "source-map" "^0.6.0"
+
+"source-map@^0.6.0", "source-map@~0.6.1":
   "integrity" "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
   "resolved" "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   "version" "0.6.1"
@@ -5287,6 +5308,16 @@
     "inherits" "^2.0.3"
     "readable-stream" "^3.1.1"
 
+"terser@^5.4.0":
+  "integrity" "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw=="
+  "resolved" "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz"
+  "version" "5.24.0"
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    "acorn" "^8.8.2"
+    "commander" "^2.20.0"
+    "source-map-support" "~0.5.20"
+
 "through2@^2.0.3", "through2@~2.0.3":
   "integrity" "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ=="
   "resolved" "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"
diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts
index 36a622d9..ebcb2f87 100644
--- a/src/components/BlockContentTypes.ts
+++ b/src/components/BlockContentTypes.ts
@@ -618,6 +618,7 @@ export type FooterSectionType = {
     backgroundImgSrc?: SanityImageAsset
     backgroundColor?: string
     isSocialMediaBlock: boolean
+    topPadding?: string
     footerMenuRef: SanityMenuContainer
 }
 
diff --git a/src/components/BusinessCard.tsx b/src/components/BusinessCard.tsx
index 29ec3e01..02a8762f 100644
--- a/src/components/BusinessCard.tsx
+++ b/src/components/BusinessCard.tsx
@@ -1,7 +1,18 @@
 import React, {FunctionComponent, useContext, useState} from 'react'
 import {Theme, ThemeProvider} from "@mui/material/styles";
 import makeStyles from '@mui/styles/makeStyles';
-import {Avatar, Button, Divider, Drawer, Grid, List, ListItem, Typography, useTheme,} from '@mui/material';
+import {
+    Avatar,
+    Button,
+    Divider,
+    Drawer,
+    Grid,
+    List,
+    ListItem,
+    Typography,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
 import createStyles from '@mui/styles/createStyles';
 import {Close, FileCopy} from "@mui/icons-material";
 import SocialMediaBlock from "./templates/my-digital-resume/social-media-block/SocialMediaBlock";
@@ -94,7 +105,6 @@ const BusinessCard: FunctionComponent<MainMenuProps> = ({anchor, homePage}) => {
     // }, [qrCodeContext.qr_code_value])
 
     const list = (anchor: MainMenuAnchorType) => (
-        <ThemeProvider theme={theme}>
             <Grid xs={12} md={6} container item
                   role="presentation"
                 // onClick={toggleDrawer(anchor, false)}
@@ -117,7 +127,7 @@ const BusinessCard: FunctionComponent<MainMenuProps> = ({anchor, homePage}) => {
                             height: "max-content",
                             padding: theme.spacing(2, 3)
                         }}>
-                            <SocialMediaBlock spacing={1} bgColor color='secondary' {...homePage.businessContact}/>
+                            <SocialMediaBlock  isCentered spacing={1} iconColor='white' bgColor theBackgroundColor={theme.palette.primary.main}  {...homePage.businessContact}/>
                         </Grid>
                     </Grid>
                 </Grid>
@@ -307,27 +317,18 @@ const BusinessCard: FunctionComponent<MainMenuProps> = ({anchor, homePage}) => {
 
                 {/*})}*/}
             </Grid>
-        </ThemeProvider>
     );
 
+
     return (
-            <ThemeProvider theme={theme
-}><Grid item container>
+            <Grid item container>
                 <Grid item container justifyContent='flex-end' style={{padding: theme
-.spacing(2, 3)}}>
+.spacing(3, 3)}}>
 
                     <Button variant='contained' color='primary' onClick={toggleDrawer(anchor, true)}>
-                        <Grid container spacing={2} alignItems='center'>
-                            <Grid item>
-                                <Avatar style={{backgroundColor: "whitesmoke"}}
-                                        src={urlFor(homePage.headerContent.content[0].headerMenuRef.logoImageSrc ?? "").url() ?? ""}/>
-
-                            </Grid>
-                            <Grid item>
-                                <Typography color='secondary' variant='button'>Contact Info</Typography>
+                        <Avatar style={{backgroundColor: "whitesmoke"}}
+                                src={urlFor(homePage.headerContent.content[0].headerMenuRef.logoImageSrc ?? "").url() ?? ""}/>
 
-                            </Grid>
-                        </Grid>
                     </Button>
                 </Grid>
 
@@ -341,10 +342,8 @@ const BusinessCard: FunctionComponent<MainMenuProps> = ({anchor, homePage}) => {
 
                               position: "absolute",
                               zIndex: 1000,
-                              paddingLeft: theme
-.spacing(4),
-                              paddingRight: theme
-.spacing(6),
+                              paddingLeft: theme.spacing(4),
+                              paddingRight: theme.spacing(6),
                           }}>
 
                         {/*<Grid item xs={3}>*/}
@@ -358,7 +357,7 @@ const BusinessCard: FunctionComponent<MainMenuProps> = ({anchor, homePage}) => {
                         {list(anchor)}
                     </Grid>
                 </Drawer>
-            </Grid></ThemeProvider>
+            </Grid>
     );
 }
 
diff --git a/src/components/FooterBlockContentLayoutContainer.tsx b/src/components/FooterBlockContentLayoutContainer.tsx
index 2c636815..e851791d 100644
--- a/src/components/FooterBlockContentLayoutContainer.tsx
+++ b/src/components/FooterBlockContentLayoutContainer.tsx
@@ -86,6 +86,7 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                                 <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
                                 </Link>
                                 <Footer
+                                    topPadding={footer.topPadding}
                                     backgroundColor={footer.backgroundColor}
                                     backgroundImgSrc={footer.backgroundImgSrc}
                                     isSocialMediaBlock={footer.isSocialMediaBlock}
diff --git a/src/components/block-content-ui/cmsClient.ts b/src/components/block-content-ui/cmsClient.ts
index 7f56d7a7..93e35bd8 100644
--- a/src/components/block-content-ui/cmsClient.ts
+++ b/src/components/block-content-ui/cmsClient.ts
@@ -7,7 +7,7 @@ import {
     SanityRef, SanityTransformHwHomePage
 } from '../../common/sanityIo/Types'
 
-import {ThwServiceItemType, WhySwitchSectionType} from "../BlockContentTypes";
+import {ResumeSkill, ThwServiceItemType, WhySwitchSectionType} from "../BlockContentTypes";
 import GroqQueries from "../../common/sanityIo/groqQueries";
 import groqQueries from "../../common/sanityIo/groqQueries";
 import {SanityHomePage} from "./static-pages/cmsStaticPagesClient";
@@ -483,16 +483,35 @@ const fullTextSearch = (textToSearch: string): Promise<any> => {
                 contentWelcomeMessage,
                 contentSummaryTitle,
                 contentSummaryTexts,
-                videoUrl
-            ] match '*${textToSearch}*']`,
+                videoUrl,
+                
+            ] match '*${textToSearch}*']{
+                ..., 
+                "skillsUsed" : skillsUsed[]->,
+            }`,
             // {searchText: textToSearch}
         ).then((data: any) => {
             console.log("data from fulltext search", data)
             return data
         })
 }
+const skillReferenceSearch = (skill: ResumeSkill): Promise<any> => {
+    return sanityClient
+        .fetch(
+            `*[references($searchText)]{
+                ..., 
+                "skillsHighlighted": skillsHighlighted[]->,
+                "skillsUsed" : skillsUsed[]->,
+            }`,
+            {searchText: skill._id}
+        ).then((data: any) => {
+            console.log("data from skillReference search", data)
+            return data
+        })
+}
 
 export default {
+    skillReferenceSearch,
     fetchRef,
     fetchRefs,
     fetchLandingPage,
diff --git a/src/components/templates/mackenzies-mind/footer/Footer.tsx b/src/components/templates/mackenzies-mind/footer/Footer.tsx
index 7d33419e..66497515 100644
--- a/src/components/templates/mackenzies-mind/footer/Footer.tsx
+++ b/src/components/templates/mackenzies-mind/footer/Footer.tsx
@@ -48,6 +48,7 @@ interface IProps {
     isSocialMediaBlock?: boolean
     backgroundImgSrc?: SanityImageAsset
     backgroundColor?:string
+    topPadding?: string
 }
 
 const Footer: FunctionComponent<IProps> = (props: IProps) => {
@@ -69,7 +70,7 @@ const Footer: FunctionComponent<IProps> = (props: IProps) => {
             <Grid container className={classes.root}  sx={{
                     backgroundImage: `url(${urlFor(props.backgroundImgSrc ?? "").url()})`,
                     backgroundSize: "cover",}}>
-            <Grid container justifyContent="flex-start" sx={{paddingTop: mdDown ? 0 : "56px"}}>
+            <Grid container justifyContent="flex-start" sx={{paddingTop: mdDown ? 0 : (props.topPadding ?? "0px")}}>
                 <Grid item xs={12}>
                     {props.pageFooter && <FooterMenuContainer
                         isSocialMediaBlock={props.isSocialMediaBlock}
diff --git a/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx b/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
index 34126c18..f5d93231 100644
--- a/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
+++ b/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
@@ -23,16 +23,15 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
     const theme = useTheme()
 
     const pageContext = useContext(PageContext)
-    const customizedThemeContext = useTheme()
     const useStyles = makeStyles(({
         root: {
-            color: customizedThemeContext.palette.text.secondary,
+            color: theme.palette.text.secondary,
         }
     }))
-    const classes = useStyles(customizedThemeContext)
+    const classes = useStyles(theme)
 
-    const mdDown = useMediaQuery(customizedThemeContext.breakpoints.down('md'))
-    const mdUp = useMediaQuery(customizedThemeContext.breakpoints.up('md'))
+    const mdDown = useMediaQuery(theme.breakpoints.down('md'))
+    const mdUp = useMediaQuery(theme.breakpoints.up('md'))
     return (
         <Grid container item className={classes.root}
 
@@ -42,15 +41,15 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
                       paddingLeft: "16px",
                       paddingTop: "16px",
                       paddingBottom: "16px",
-                      borderLeft: `4px solid ${customizedThemeContext.palette.primary.main}`,
+                      borderLeft: `4px solid ${theme.palette.primary.main}`,
                       backgroundColor: COLORS.TRANSPARENTERWHITE,
-                      borderRight: `4px solid ${customizedThemeContext.palette.primary.main}`,
-                  } : {}}
+                      borderRight: `4px solid ${theme.palette.primary.main}`,
+                  } : {                      }}
             >
                 {
                     props.pageFooterMenu?.subMenus?.map((menuGroup: any, index: number) => {
                         return (
-                            <Grid key={index} item xs={12} container justifyContent={mdUp?'flex-start':'center'}>
+                            <Grid key={index} item xs={6} sm={12} md={6} container justifyContent={mdUp?'flex-start':'center'}>
                                 <Grid item><FooterMenuGroup menuGroup={menuGroup}/></Grid>
                             </Grid>
                         )
@@ -109,7 +108,7 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
                 <Grid container item xs={12} md={12} sx={{
                     paddingTop: "4px !important",
                     marginTop: mdDown ? 4 : 0,
-                    borderTop: "1px solid " + theme.palette.primary.main
+                    borderTop: props.isSocialMediaBlock?"1px solid " + theme.palette.primary.main:"0px solid transparent"
                 }}>
                     {mdDown &&
                         props.isSocialMediaBlock &&
diff --git a/src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx b/src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx
index 48106c52..7fadab35 100644
--- a/src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx
+++ b/src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx
@@ -21,6 +21,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
 interface IProps {
     isAppBar?: boolean,
     children: any
+    isEnhanced?: boolean
 }
 
 const AppBarWrapper: FunctionComponent<PropsWithChildren<IProps>> = (props: IProps) => {
@@ -33,7 +34,7 @@ const AppBarWrapper: FunctionComponent<PropsWithChildren<IProps>> = (props: IPro
 
     return (
         props.isAppBar ? <AppBar style={{
-            backgroundColor: `${props.isAppBar ? "black" : "white"}`,
+            backgroundColor: `${props.isAppBar && props.isEnhanced ? "black" : "white"}`,
         }} className={classes.root}>
             {props.children}
         </AppBar> : <>{props.children}</>
diff --git a/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx b/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
index 3449144c..9e25b781 100644
--- a/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
+++ b/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
@@ -92,7 +92,7 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
                         borderRadius: 4,
                         backgroundColor: "black"
                     }}>
-                        <Header isSearch={props.pageHeader.isSearch} pageHeader={props.pageHeader.headerMenuRef}/>
+                        <Header isSearch={props.pageHeader.isSearch} pageHeader={props.pageHeader.headerMenuRef} isEnhanced={true}/>
                     </Grid>
                 </Grid></Grid>
             : <></>
diff --git a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx
index 7cc92f3c..2db23102 100644
--- a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx
+++ b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx
@@ -10,9 +10,14 @@ import {Theme} from "@mui/material/styles";
 import {
     AnimatedAboutUsSectionType,
     HeroAnimatedContentSectionType,
+    ResumeExperience,
+    ResumeSkill,
     SanityHeroContentSlide,
     ServiceItemNoRefType
 } from "../../../BlockContentTypes";
+import ResumeExperienceItem from "../../my-digital-resume/resume-experience-section/ResumeExperienceItem";
+import {COLORS} from "../../../../theme/common/ColorPalette";
+import ResumeSkillReferences from "../../my-digital-resume/resume-skills-section/ResumeSkillReferences";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     endAdornedInput: {
@@ -42,6 +47,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 interface IProps {
+    searchText?:string
 }
 
 const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
@@ -62,7 +68,7 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
     }
 
     return (<Grid container item>
-        <Grid container>
+        <Grid container item>
 
             <TextField fullWidth
                        key={'full-text-search-field'}
@@ -88,13 +94,14 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                            ,
                        }}/>
         </Grid>
-        {<Grid container>
+        {<Grid container item style={{overflow: "scroll", height: "800px"}} alignContent='flex-start'
+               alignItems='flex-start'>
             <Grid item>
 
                 {results?.length && <Typography
                     color='textSecondary'>{results?.length} {(results?.length ?? 1) > 1 ? "results" : "result"}</Typography>}
             </Grid>
-            <Grid item container sx={{paddingX: "16px"}}>
+            <Grid item container sx={{paddingX: "16px",}}>
                 {results?.map((theResult: any) => {
                     switch (theResult?._type) {
                         case "ServiceItem":
@@ -117,7 +124,7 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                                     Show:</Typography></Grid>
                                 <Grid item sx={{paddingLeft: "16px"}} container>
                                     {/*<Grid container item><Typography color='textSecondary'*/}
-                                    {/*                                 fontWeight={'bold'}>{convertedAnimatedServicesSection.title}</Typography></Grid>*/}
+                                    {/*                                 fontWeight={'bold'}>{convertedResumeSkill.title}</Typography></Grid>*/}
                                     {convertedAnimatedHeroSection.contentSlides.map((slide: SanityHeroContentSlide) => {
                                         return <Grid container item sx={{
                                             borderLeft: "1px solid whitesmoke",
@@ -149,7 +156,7 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                                     <Grid container item><Typography
                                         color='textSecondary'>{convertedAnimatedServicesSection.contentPreTitle}-{convertedAnimatedServicesSection.contentTitle}</Typography></Grid>
                                     {/*<Grid container item><Typography color='textSecondary'*/}
-                                    {/*                                 fontWeight={'bold'}>{convertedAnimatedServicesSection.title}</Typography></Grid>*/}
+                                    {/*                                 fontWeight={'bold'}>{convertedResumeSkill.title}</Typography></Grid>*/}
                                     {convertedAnimatedServicesSection.contentTexts.map((textContent: string) => {
                                         return <Grid container item sx={{
                                             borderLeft: "1px solid whitesmoke",
@@ -164,16 +171,41 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                                     })}
                                 </Grid>
                             </Grid>
+                        case "ResumeExperience":
+                            const convertedResumeExperience: ResumeExperience = theResult;
+
+                            console.log(convertedResumeExperience)
+                            return <Grid container sx={{
+                                marginBottom: "16px",
+                                backgroundColor: COLORS.LIGHTGRAY,
+                                padding: "16px"
+                            }}>
+                                <Grid container>
+                                    <Typography variant='h6' gutterBottom color='primary'>My Experience</Typography>
+                                </Grid>
+                                <ResumeExperienceItem experience={convertedResumeExperience}/>
+                            </Grid>
+                        case "ResumeSkill":
+                            const convertedResumeSkill: ResumeSkill = theResult;
+
+                            console.log(convertedResumeSkill)
+                            return <Grid container sx={{
+                                marginBottom: "16px",
+                                backgroundColor: COLORS.LIGHTGRAY,
+                                padding: "16px"
+                            }}>
+                                <Grid container>
+                                    <Typography variant='h6' gutterBottom color='primary'>My Skill
+                                        - {convertedResumeSkill.title}</Typography>
+                                </Grid>
+                                <ResumeSkillReferences skill={convertedResumeSkill}/>
+                            </Grid>
                         default:
                             return <Grid container sx={{marginBottom: "16px"}}><Typography
                                 color='textSecondary'>{theResult?._type}</Typography></Grid>
                     }
-
                 })}
-
-
             </Grid>
-
         </Grid>}
     </Grid>)
 }
diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx
index 7e0c04f0..92f7e8f3 100644
--- a/src/components/templates/mackenzies-mind/header/Header.tsx
+++ b/src/components/templates/mackenzies-mind/header/Header.tsx
@@ -7,69 +7,92 @@ import {SanityMenuContainer} from "../../../../common/sanityIo/Types";
 import {Close, Search} from "@mui/icons-material";
 import FullTextSearch from "./FullTextSearch";
 import AppBarWrapper from './AppBarWrapper';
+import {COLORS} from "../../../../theme/common/ColorPalette";
+
+
+import makeStyles from "@mui/styles/makeStyles";
+import {Theme} from "@mui/material/styles";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    hover:{
+        "&:hover": {
+            backgroundColor: "lightgray !important",
+            color: "#383838"
+        }
+    },
+    hoverSearch:{
+        "&:hover": {
+            color: theme.palette.primary.main
+        }
+    }
+}))
 
 export type HeaderProps = {
     pageHeader?: SanityMenuContainer
     isAppBar?: boolean
     isSearch?: boolean
     updateIsLoading?: (value: boolean) => void
+    isEnhanced?: boolean
 }
 
 const Header: FunctionComponent<HeaderProps> = (props) => {
+    const classes = useStyles()
     const customizedTheme = useTheme()
 
     const mdDown = useMediaQuery(customizedTheme.breakpoints.down('md'))
     const [isSearchOpen, setIsSearchOpen] = React.useState<boolean>(false)
 
-    return (<AppBarWrapper isAppBar={props.isAppBar}>
+    return (<AppBarWrapper isAppBar={props.isAppBar} isEnhanced={props.isEnhanced}>
             {props.pageHeader?.title ?
                 <Grid item container
-                      alignContent='center' alignItems='center' style={{height:"100%",paddingLeft:"8px"}}>
-                    <Grid container item xs={4} sm={3} md={3} >
+                      alignContent='center' alignItems='center' style={{height: "100%", paddingLeft: "8px"}}>
+                    <Grid container item xs={4} sm={3} md={3}>
                         <Logo noWrap logoText={props.pageHeader?.logoText}
-                                         logoAccentText={props.pageHeader?.logoAccentText}/>
+                              logoAccentText={props.pageHeader?.logoAccentText}/>
                     </Grid>
-                    <Grid item container xs={8} sm={9} md={9} justifyContent='flex-end' >
+                    <Grid item container xs={8} sm={9} md={9} justifyContent='flex-end'>
 
-                            {
-                                !mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
-                                                 alignItems='center'
-                                                 alignContent='center'
-                                                 sx={{
-                                                     height: "100%",
-                                                     paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
-                                                 }}>
-                                    <FilteredMenuItems
-                                        // bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
-                                        subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
-                                        includeMenuItems={!mdDown}
-                                        includeMenuGroups={!mdDown}/>
+                        {
+                            !mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
+                                             alignItems='center'
+                                             alignContent='center'
+                                             sx={{
+                                                 height: "100%",
+                                                 paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
+                                             }}>
+                                <FilteredMenuItems
+                                    // bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
+                                    subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
+                                    includeMenuItems={!mdDown}
+                                    includeMenuGroups={!mdDown}/>
 
-                                </Grid>
-                            }
-                            {
-                                mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
-                                    {props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
-                                </Grid>
-                            }
+                            </Grid>
+                        }
+                        {
+                            mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
+                                {props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
+                            </Grid>
+                        }
                         {props.isSearch && <Grid container item maxWidth={96}
-        // style={{backgroundColor: "blue"}}
-                                                  justifyContent='flex-end'
+                            // style={{backgroundColor: "blue"}}
+                                                 justifyContent='flex-end'
                                                  alignContent='center' alignItems='center'>
                             <Grid item><Box sx={{
                                 // maxWidth: "64px",
-                                paddingLeft:"16px",
-                                paddingRight: mdDown?"16px":"8px",
+                                paddingLeft: "16px",
+                                paddingRight: mdDown ? "16px" : "8px",
                                 borderLeft: `1px solid ${customizedTheme.palette.primary.main}`
-                            }}><IconButton color='secondary' sx={{
-                                // marginLeft: "32px",
-                                // marginRight: "32px",
-                                backgroundColor: customizedTheme.palette.primary.main
                             }}>
-                                <Search color='secondary' fontSize='large' onClick={() => {
-                                    setIsSearchOpen((state) => !state)
-                                }}/>
-                            </IconButton></Box></Grid>
+                                <IconButton color='secondary' sx={{
+                                    // marginLeft: "32px",
+                                    // marginRight: "32px",
+                                    color: customizedTheme.palette.text.secondary,
+                                    backgroundColor: customizedTheme.palette.primary.main
+                                }} className={classes.hoverSearch}>
+                                    <Search color='inherit' fontSize='large' onClick={() => {
+                                        setIsSearchOpen((state) => !state)
+                                    }}/>
+                                </IconButton></Box></Grid>
                         </Grid>}
                     </Grid>
                 </Grid>
@@ -78,13 +101,22 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
             <Modal open={isSearchOpen}>
                 <Grid container style={{height: "100%"}}>
                     <Grid container item justifyContent='flex-end'>
-                        <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
-                               onClick={() => {
-                                   setIsSearchOpen(false)
-                               }}/>
+                        <IconButton sx={{
+                            marginTop: "4px",
+                            marginRight: "4px",
+                            width: "64px",
+                            height: "64px",
+                            backgroundColor: COLORS.WHITESMOKE
+                        }} onClick={() => {
+                            setIsSearchOpen(false)
+                        }} className={classes.hover}>
+
+                            <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
+                            />
+                        </IconButton>
                     </Grid>
-                    <Grid container justifyContent='center' alignContent='center' alignItems='center' paddingX={'32px'}
-                          style={{height: "100%"}}>
+                    <Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start'
+                          alignItems='flex-start'>
                         <FullTextSearch/>
                     </Grid>
                 </Grid>
diff --git a/src/components/templates/mackenzies-mind/header/MainMenu.tsx b/src/components/templates/mackenzies-mind/header/MainMenu.tsx
index 6d66ee8e..42d95131 100644
--- a/src/components/templates/mackenzies-mind/header/MainMenu.tsx
+++ b/src/components/templates/mackenzies-mind/header/MainMenu.tsx
@@ -61,7 +61,7 @@ const MainMenu: FunctionComponent<MainMenuProps> = ({menu, anchor}) => {
                     default:
                         const menuItem: SanityMenuItem = subMenu
                         return <List style={{padding: 0}} key={menuItem.displayText}>
-                            <ListItem href={menuItem.url ?? ""} className={classes.listItem} button>
+                            <ListItem className={classes.listItem}>
                                 <Button variant='text' href={menuItem.isModalButton ? undefined : menuItem.url}
                                         onClick={menuItem.isModalButton ? () => {
                                             // console.log()
@@ -70,13 +70,11 @@ const MainMenu: FunctionComponent<MainMenuProps> = ({menu, anchor}) => {
                                             }
                                         } : undefined}
                                         style={{
-                                            paddingTop: theme.spacing(2.25),
-                                            paddingLeft: theme.spacing(2),
-                                            paddingBottom: theme.spacing(2.25),
+                                            padding: theme.spacing(2.25, 2),
                                             height: "100%",
-                                            margin: 0
                                         }} fullWidth>
-                                    <ListItemText secondary={<Typography color={'primary'}>{menuItem.displayText}</Typography>}/>
+                                    <ListItemText
+                                        secondary={<Typography color={'primary'}>{menuItem.displayText}</Typography>}/>
                                 </Button>
 
                             </ListItem>
@@ -98,22 +96,25 @@ const MainMenu: FunctionComponent<MainMenuProps> = ({menu, anchor}) => {
             <Drawer anchor={anchor} open={isDrawerOpen}
                     onClose={toggleDrawer(anchor, false)}
             >
-                <Grid container alignItems='center' justifyContent='space-between'
+                <Grid container alignItems='center'
                       style={{
                           paddingLeft: theme.spacing(4),
-                          paddingRight: theme.spacing(6),
+                          // paddingRight: theme.spacing(6),
                       }}>
-
-                    <Grid item xs={3}>
-
-                        <Logo logoImageSrc={menu.logoImageSrc} logoText={'Chow Works'}/>
+                    <Grid item xs={10}  >
+                        <Logo logoImageSrc={menu.logoImageSrc} logoText={menu.logoText} logoAccentText={"."}/>
+                    </Grid>
+                    <Grid item xs={2} container justifyContent='flex-end' >
+                        <Button onClick={() => {
+                            setIsDrawerOpen(false)
+                        }}>
+                            <Close color='primary' fontSize='large'/>
+                        </Button>
                     </Grid>
-                    <Grid item xs={1}><Button onClick={() => {
-                        setIsDrawerOpen(false)
-                    }}><Close color='primary' fontSize='large'/></Button></Grid>
                 </Grid>
                 {list(anchor)}
-            </Drawer></Grid>
+            </Drawer>
+        </Grid>
     )
 }
 
diff --git a/src/components/templates/my-digital-resume/ResumeContactUsSection.tsx b/src/components/templates/my-digital-resume/ResumeContactUsSection.tsx
index ecaff571..034c1b0d 100644
--- a/src/components/templates/my-digital-resume/ResumeContactUsSection.tsx
+++ b/src/components/templates/my-digital-resume/ResumeContactUsSection.tsx
@@ -11,7 +11,7 @@ import leadClient from "../transform-hw/pages/under-construction-page/leadClient
 import SnackbarContext from "../../modal-context/SnackbarContext";
 import {Theme} from "@mui/material/styles";
 import withStyles from "@mui/styles/withStyles";
-import {Grid, TextField, Typography, useTheme} from "@mui/material";
+import {Grid, TextField, Typography, useMediaQuery, useTheme} from "@mui/material";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -172,14 +172,15 @@ const ResumeContactUsSection: FunctionComponent<ContactUsProps> = (props) => {
     }
 
     const theme = useTheme()
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
+
 
     return (
         <Grid
             container
             item
-            style={{
-                padding: theme.spacing(4)
-            }}
+            style={{padding: theme.spacing(4,smDown?1:4)}}
+
             className={globalClasses.resumeSection}
         >
             <Grid container item spacing={3}>
@@ -272,16 +273,18 @@ const ResumeContactUsSection: FunctionComponent<ContactUsProps> = (props) => {
                                 }}
                             />
                         </Grid>
-                        <Grid container item justifyContent='flex-end' style={{marginTop: theme.spacing(1)}}>
+                    </Grid>
+                        <Grid container item justifyContent='flex-end' style={{paddingRight:"16px"}}>
                             <LoadingButton
                                 width={200}
                                 isLoading={isLoading || isRefetching}
                                 disabled={!!(data || isError || (email && (email.length > 0) && !isEmail(email)))}
                                 clickHandler={createLead}
-                                color="primary" variant="contained"><Typography>Send
-                                Message</Typography></LoadingButton>
+                                color="primary" variant="contained">
+                                <Typography>Send
+                                Message</Typography>
+                            </LoadingButton>
                         </Grid>
-                    </Grid>
 
 
                 </Grid>
diff --git a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx
index 7cc1b197..c5b626ac 100644
--- a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx
@@ -21,7 +21,7 @@ const ResumeBioSection: FunctionComponent<IProps> = (props: IProps) => {
     const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}} justifyContent='center'
+        <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}} justifyContent='center'
               className={classes.resumeSection} spacing={3}>
             <Grid item xs={12} style={{paddingTop: "64px"}}>
                 <BusinessCardSubmitEmail
@@ -54,14 +54,15 @@ const ResumeBioSection: FunctionComponent<IProps> = (props: IProps) => {
                     <Grid item xs={9}><Typography gutterBottom
                                                   variant='body1'>{props.homePage.businessContact?.email}</Typography></Grid>
                 </Grid>
-                <Grid container item xs={11} sm={12}>
-                    <Grid item xs={3}><Typography gutterBottom variant='body1'
-                                                  style={{textTransform: "uppercase"}}>MAIL</Typography></Grid>
-                    <Grid item xs={9}><Typography noWrap gutterBottom
-                                                  variant='body1'>{props.homePage.businessContact?.address}</Typography></Grid>
-                </Grid>
-                <Grid container item xs={11} sm={12}>
+                {/*<Grid container item xs={11} sm={12}>*/}
+                {/*    <Grid item xs={3}><Typography gutterBottom variant='body1'*/}
+                {/*                                  style={{textTransform: "uppercase"}}>MAIL</Typography></Grid>*/}
+                {/*    <Grid item xs={9}><Typography noWrap gutterBottom*/}
+                {/*                                  variant='body1'>{props.homePage.businessContact?.address}</Typography></Grid>*/}
+                {/*</Grid>*/}
+                <Grid container item xs={11} sm={12} justifyContent={'center'}>
                     <SocialMediaBlock
+                        isCentered={true}
                         facebook={props.homePage.businessContact?.facebook}
                         twitter={props.homePage.businessContact?.twitter}
                         instagram={props.homePage.businessContact?.instagram}
@@ -70,13 +71,15 @@ const ResumeBioSection: FunctionComponent<IProps> = (props: IProps) => {
                     />
                 </Grid>
             </Grid>
-            <Grid data-testid='bio-image' container item md={6} style={{
-                backgroundImage: `url(${urlFor(props.sectionData.mainImage ?? "").url()})`,
-                backgroundSize: "cover",
-                backgroundPosition: "top right",
-                backgroundRepeat: "no-repeat",
-                minHeight: "350px"
-            }}>
+            <Grid item container md={6}>
+                <Grid data-testid='bio-image' container item style={{
+                    backgroundImage: `url(${urlFor(props.sectionData.mainImage ?? "").url()})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "top right",
+                    backgroundRepeat: "no-repeat",
+                    minHeight: "350px"
+                }}>
+                </Grid>
             </Grid>
             <Grid container item xs={12} sm={10} spacing={1} style={{marginTop: theme.spacing(2)}}>
                 <Grid item container>
diff --git a/src/components/templates/my-digital-resume/resume-education-section/ResumeEducationSection.tsx b/src/components/templates/my-digital-resume/resume-education-section/ResumeEducationSection.tsx
index 98752c1a..752d6e1a 100644
--- a/src/components/templates/my-digital-resume/resume-education-section/ResumeEducationSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-education-section/ResumeEducationSection.tsx
@@ -15,9 +15,10 @@ const ResumeEducationSection: FunctionComponent<IProps> = (props: IProps) => {
 
 
     const xsOnly = useMediaQuery(theme.breakpoints.only('xs'))
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}} className={globalClasses.resumeSection}>
+        <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}} className={globalClasses.resumeSection}>
             <Grid
                 container item spacing={3}>
                 <Grid item container md={4} alignContent='flex-start' spacing={1}>
@@ -61,11 +62,11 @@ const ResumeEducationSection: FunctionComponent<IProps> = (props: IProps) => {
                                         <Typography display='inline'
                                                     variant='body1'
                                         >{experience.dateStart?.toString().replaceAll('-', '.')}</Typography>
-                                        <Typography display='inline'
+                                        {experience.dateEnd?<Typography display='inline'
                                                     variant='body1'
                                                     style={{
                                                         margin: theme.spacing(0, 1)
-                                                    }}>—</Typography>
+                                                    }}>—</Typography>:<></>}
                                         <Typography display='inline'
                                                     variant='body1'
                                         >{experience.dateEnd?.toString().replaceAll('-', '.')}</Typography>
diff --git a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
new file mode 100644
index 00000000..84072abd
--- /dev/null
+++ b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
@@ -0,0 +1,81 @@
+import React, {FunctionComponent} from 'react'
+
+import makeStyles from "@mui/styles/makeStyles";
+import { Theme} from "@mui/material/styles";
+import {Chip, Grid, Typography, useTheme} from "@mui/material";
+import {COLORS} from "../../../../theme/common/ColorPalette";
+import {ResumeExperience} from "../../../BlockContentTypes";
+import dateUtils from "../../../../utils/dateUtils";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+    },
+}))
+
+interface IProps {
+experience: ResumeExperience
+}
+
+const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
+
+    const theme = useTheme()
+
+    return (<Grid item container alignContent='flex-start'
+                  role={'experiencedivider'}
+                  // style={{
+                  //     borderBottom: `1px solid ${index2 >= (props.sectionData.experiences?.length ?? 0) - 1 ? "transparent" : COLORS.LIGHTGRAY}`,
+                  //     // padding: theme.spacing(1.75, 0)
+                  // }}
+                  xs={12}>
+        <Grid container item role={'experienceheader'} alignContent='center' alignItems='center'>
+            <Grid item xs={12} md={4}>
+                <Typography display='inline'
+                            variant='body2'>{props.experience.companyName}</Typography>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4} container sx={{paddingTop: "4px", paddingBottom: "4px"}}>
+                <Typography variant='subtitle1'>{props.experience.companySubtitle}</Typography>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4} >
+                <Typography
+                            variant='body1'>{props.experience.title}</Typography>
+            </Grid>
+        </Grid>
+        <Grid container item>
+
+
+            <Grid item sm={4}>
+                <Typography display='inline'
+                            variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateStart as string))}</Typography>
+
+                {/*</Grid>*/}
+                {/*<Grid item xs={1} container justifyContent='center'>*/}
+                <Typography display='inline'
+                            variant='body1' style={{margin: theme.spacing(0, 1)}}>—</Typography>
+
+                {/*</Grid>*/}
+                {/*<Grid item xs={2} container>*/}
+                <Typography display='inline'
+                            variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateEnd as string))}</Typography>
+
+            </Grid>
+
+        </Grid>
+        <Grid container item>
+            <Typography
+                variant='body1' gutterBottom>{props.experience.description}</Typography>
+        </Grid>
+        <Grid container item spacing={1}
+              style={{overflowX: "scroll", paddingBottom: theme.spacing(1)}} wrap='nowrap'>
+            {
+                props.experience.skillsUsed?.map((skill, index) => {
+                    // console.log(skill)
+                    return <Grid item key={index}><Chip role={'experienceskill'} size='small'
+                                                        color='primary'
+                                                        label={skill.title}/></Grid>
+                })
+            }
+        </Grid>
+    </Grid>)
+}
+
+export default ResumeExperienceItem
\ No newline at end of file
diff --git a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx
index f134009e..31d642a2 100644
--- a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx
@@ -3,6 +3,7 @@ import {Chip, Grid, Typography, useMediaQuery, useTheme} from '@mui/material'
 import {ResumeExperience, ResumeExperienceSectionType} from "../../../BlockContentTypes";
 import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles";
 import {COLORS} from "../../../../theme/common/ColorPalette";
+import ResumeExperienceItem from "./ResumeExperienceItem";
 
 interface IProps {
     sectionData: ResumeExperienceSectionType
@@ -12,15 +13,14 @@ const ResumeExperienceSection: FunctionComponent<IProps> = (props: IProps) => {
     const classes = useThwCommonStyles()
     const theme = useTheme()
 
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     const xsOnly = useMediaQuery(theme.breakpoints.only('xs'))
     return (
         <Grid
             container
             item
-            style={{
-                padding: theme.spacing(4)
-            }}
+            style={{padding: theme.spacing(4,smDown?1:4)}}
             className={classes.resumeSection}
         >
             <Grid container item spacing={3}>
@@ -34,63 +34,7 @@ const ResumeExperienceSection: FunctionComponent<IProps> = (props: IProps) => {
                 <Grid item container md={8} spacing={2} justifyContent={xsOnly ? 'center' : 'flex-start'}>
                     {
                         props.sectionData.experiences?.map((experience: ResumeExperience, index2: number) => {
-                            return <Grid key={index2} item container alignContent='flex-start'
-                                         role={'experiencedivider'}
-                                         style={{
-                                             borderBottom: `1px solid ${index2 >= (props.sectionData.experiences?.length ?? 0) - 1 ? "transparent" : COLORS.LIGHTGRAY}`,
-                                             // padding: theme.spacing(1.75, 0)
-                                         }} xs={12}>
-                                <Grid container item role={'experienceheader'}>
-                                    <Grid item xs={12} md={4}>
-                                        <Typography display='inline'
-                                                    variant='body2'>{experience.companyName}</Typography>
-                                    </Grid>
-                                    <Grid item xs={6} md={4}>
-
-                                        <Typography display='inline'
-                                                    variant='body1'>{experience.title}</Typography>
-                                    </Grid>
-                                    <Grid item xs={6} md={4}>
-
-                                        <Typography display='inline'
-                                                    variant='subtitle1'>{experience.companySubtitle}</Typography>
-                                    </Grid>
-                                </Grid>
-                                <Grid container item>
-
-
-                                    <Grid item sm={4}>
-                                        <Typography display='inline'
-                                                    variant='body1'>{experience.dateStart?.toString().replaceAll('-', '.')}</Typography>
-
-                                        {/*</Grid>*/}
-                                        {/*<Grid item xs={1} container justifyContent='center'>*/}
-                                        <Typography display='inline'
-                                                    variant='body1' style={{margin: theme.spacing(0, 1)}}>—</Typography>
-
-                                        {/*</Grid>*/}
-                                        {/*<Grid item xs={2} container>*/}
-                                        <Typography display='inline'
-                                                    variant='body1'>{experience.dateEnd?.toString().replaceAll('-', '.')}</Typography>
-
-                                    </Grid>
-
-                                </Grid>
-                                <Grid container item>
-                                    <Typography
-                                        variant='body1' gutterBottom>{experience.description}</Typography>
-                                </Grid>
-                                <Grid container item spacing={1}
-                                      style={{overflowX: "scroll", paddingBottom: theme.spacing(1)}} wrap='nowrap'>
-                                    {
-                                        experience.skillsUsed?.map((skill, index) => {
-                                            return <Grid item key={index}><Chip role={'experienceskill'} size='small'
-                                                                                color='primary'
-                                                                                label={skill.title}/></Grid>
-                                        })
-                                    }
-                                </Grid>
-                            </Grid>
+                            return <ResumeExperienceItem experience={experience} />
                         })
                     }
                 </Grid>
diff --git a/src/components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx b/src/components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx
index 40efd8c5..e0f3616e 100644
--- a/src/components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx
@@ -12,19 +12,17 @@ interface IProps {
 
 const ResumeFeedbackSection: FunctionComponent<IProps> = (props: IProps) => {
     const globalClasses = useThwCommonStyles()
-    // const theme = useTheme()
+    const theme = useTheme()
 
     const customizedThemeContext = useTheme()
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     const xsOnly = useMediaQuery(customizedThemeContext.breakpoints.only('xs'))
     return (
         <Grid
             container
             item
-            style={{
-                padding: customizedThemeContext
-                    .spacing(4)
-            }}
+            style={{padding: theme.spacing(4,smDown?1:4)}}
             className={globalClasses.resumeSection}
         >
             <Grid container item spacing={3}>
diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx
new file mode 100644
index 00000000..f347fca6
--- /dev/null
+++ b/src/components/templates/my-digital-resume/resume-portfolio-section/PortfolioItemModal.tsx
@@ -0,0 +1,98 @@
+import React, {FunctionComponent} from 'react'
+
+import makeStyles from "@mui/styles/makeStyles";
+import {Theme} from "@mui/material/styles";
+import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useTheme} from "@mui/material";
+import {Close} from "@mui/icons-material";
+import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
+import {ResumePortfolioItem} from "../../../BlockContentTypes";
+import {COLORS} from "../../../../theme/common/ColorPalette";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    hover: {
+        "&:hover":{
+            backgroundColor: "whitesmoke"
+        }
+    }
+}))
+
+interface IProps {
+    currentItem?: ResumePortfolioItem,
+    isOpen?: boolean
+    setIsOpen: (open: boolean) => void
+}
+
+const PortfolioItemModal: FunctionComponent<IProps> = (props: IProps) => {
+    const theme = useTheme()
+    const classes = useStyles()
+
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false)
+
+    const setOpenWrapper = (theValue:boolean)=>{
+        setIsOpen(theValue)
+        // props.setIsOpen(theValue)
+    }
+
+    React.useEffect(() => {
+        // if (props.isOpen) {
+            setIsOpen(!!props.isOpen)
+        // }
+    }, [props.isOpen])
+
+    return (<Modal open={isOpen} onClick={() => setIsOpen(false)} sx={{paddingBottom: 4, overflow:"scroll"}}>
+        <Grid container item justifyContent='center' alignContent='center' alignItems='center'
+              style={{ position: "relative"}}>
+
+            <IconButton
+                className={classes.hover}
+                style={{position: "absolute", top: 0, right: 0,
+                    width: "64px",
+                    height: "64px",
+                    backgroundColor: "white"}}
+                onClick={() => setIsOpen(false)}
+                size="large"><Close fontSize={'large'}/></IconButton>
+            <Grid container sm={8} item style={{
+                backgroundColor: "white",
+                padding: theme.spacing(4),
+                minHeight: "600px",
+                // overflowY: "scroll",
+                maxWidth: "100%"
+            }} spacing={2}>
+                <Grid item container><Typography variant='h3'>{props.currentItem?.detailTitle}</Typography>
+                </Grid>
+                <Grid item container><Typography
+                    variant='body1'>{props.currentItem?.detailDescription}</Typography></Grid>
+                <Grid item container spacing={1}>
+                    {props.currentItem?.skillsHighlighted?.map((skill, index) => (<Grid item key={index}>
+                        <Chip color='primary' label={skill.title}/>
+                    </Grid>))}
+                </Grid>
+                <Grid item container>{props.currentItem?.inceptionDate?.toString()}</Grid>
+                <Grid item container justifyContent='center'>
+                    <Grid item container justifyContent='center'>
+                        {props.currentItem?.imageGallery?.map((image) => (
+                            <Grid item container xs={11} justifyContent='center'>
+                                <Grid item>
+                                    <img alt={'imageGalleryEntry'} src={urlFor(image ?? "").url() ?? ""}
+                                         width={"100%"}/>
+                                </Grid>
+                            </Grid>))}
+                    </Grid>
+                </Grid>
+                <Grid item container justifyContent='center'>
+                    <ButtonGroup fullWidth style={{marginTop: theme.spacing(4)}}>
+                        <Button variant='contained' color="primary" href={props.currentItem?.linkToProd}>
+                            Go to this Project
+                        </Button>
+                        <Button variant='contained' color='secondary' onClick={() => setOpenWrapper(false)}>
+                            Back to Resume
+                        </Button>
+                    </ButtonGroup>
+                </Grid>
+            </Grid>
+        </Grid>
+    </Modal>)
+}
+
+export default PortfolioItemModal
\ No newline at end of file
diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx
new file mode 100644
index 00000000..34a02770
--- /dev/null
+++ b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx
@@ -0,0 +1,73 @@
+import React, {FunctionComponent} from 'react'
+
+import makeStyles from "@mui/styles/makeStyles";
+import { Theme} from "@mui/material/styles";
+import {Button, Card, Grid, Typography, useTheme} from "@mui/material";
+import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
+import dateUtils from "../../../../utils/dateUtils";
+import {ResumePortfolioItem} from "../../../BlockContentTypes";
+import PortfolioItemModal from "./PortfolioItemModal";
+import {COLORS} from "../../../../theme/common/ColorPalette";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+    },
+}))
+
+interface IProps {
+    portfolioItem?: ResumePortfolioItem
+}
+
+const ResumePortfolioEntry: FunctionComponent<IProps> = (props:IProps) => {
+    const classes = useStyles()
+    const theme = useTheme()
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false)
+
+    const [currentItem, setCurrentItem] = React.useState<ResumePortfolioItem>()
+
+    return (<Grid
+                  role='portfoliobutton'
+                  // style={{backgroundColor: index2 % 2 === 1 ? "whitesmoke" : "white"}}
+                  container item xs={12} sm={6} lg={4} xl={4} alignContent='flex-start'
+                  justifyContent='center'>
+        <Card elevation={0} sx={{width:"100%",border: `1px solid ${COLORS.GRAY}`}}>
+            <Button fullWidth sx={{padding:0}} onClick={(e) => {
+            setCurrentItem(props.portfolioItem)
+            setIsOpen(true)
+        }}>
+            <Grid item container justifyContent='center' alignContent={'space-between'} direction='column'>
+                <Grid container item justifyContent='center' xs={2}>
+                    <Grid item xs={12}
+                          style={{
+                              backgroundImage: `url(${urlFor(props.portfolioItem?.coverImage ?? "").url() ?? ""})`,
+                              backgroundSize: "cover",
+                              backgroundPosition: "top center",
+                              backgroundRepeat: "no-repeat",
+                              width: "100%",
+                              minHeight: "200px",
+
+                          }}
+                    >
+                    </Grid>
+                </Grid>
+                <Grid container item alignContent='center' alignItems='center' xs={10}>
+                    <Grid container item justifyContent='center'
+                      style={{marginTop: theme.spacing(2)}}>
+                    <Typography display='inline'
+                                variant='body1'
+                                color={'textPrimary'}
+                    >{dateUtils.MonthYear(props.portfolioItem?.inceptionDate)}</Typography>
+                </Grid>
+                <Grid container item justifyContent='center' alignContent={'center'}>
+                    <Typography style={{minHeight: "60px"}}
+                                variant='body2'>{props.portfolioItem?.title}</Typography>
+                </Grid>
+                </Grid>
+            </Grid>
+        </Button>
+        <PortfolioItemModal currentItem={currentItem} isOpen={isOpen} setIsOpen={(val)=>{setIsOpen(val)}}/>
+    </Card></Grid>)
+}
+
+export default ResumePortfolioEntry
\ No newline at end of file
diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx
index ce0cf3b3..9e95255e 100644
--- a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx
@@ -1,10 +1,12 @@
 import React, {FunctionComponent} from 'react'
-import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useTheme} from '@mui/material'
+import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useMediaQuery, useTheme} from '@mui/material'
 import {ResumePortfolioItem, ResumePortfolioSectionType} from "../../../BlockContentTypes";
 import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles";
 import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
 import {Close} from "@mui/icons-material";
 import dateUtils from "../../../../utils/dateUtils";
+import ResumePortfolioEntry from "./ResumePortfolioEntry";
+import PortfolioItemModal from "./PortfolioItemModal";
 
 interface IProps {
     sectionData: ResumePortfolioSectionType
@@ -14,17 +16,20 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
     const globalClasses = useThwCommonStyles()
     const theme = useTheme()
 
-    const [isOpen, setIsOpen] = React.useState<boolean>(false)
-    const [currentItem, setCurrentItem] = React.useState<ResumePortfolioItem>()
+    // const [isOpen, setIsOpen] = React.useState<boolean>(false)
+    // const [currentItem, setCurrentItem] = React.useState<ResumePortfolioItem>()
 
-    const sendToModal = (portfolioItem: ResumePortfolioItem) => {
-        setCurrentItem(portfolioItem)
+    // const sendToModal = (portfolioItem?: ResumePortfolioItem) => {
+    //     console.log("The current Item", portfolioItem)
+    //     setCurrentItem(portfolioItem)
+    //
+    //     setIsOpen(true)
+    // }
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
-        setIsOpen(true)
-    }
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}}
+        <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}}
               className={globalClasses.resumeSection} justifyContent={'center'}>
             <Grid
                 container item spacing={3} justifyContent='center'>
@@ -43,95 +48,15 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                     <Grid item container>
                         <Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
                 </Grid>
-                <Grid item container justifyContent={'center'} xs={10} justifySelf={'center'}>
+                <Grid item container justifyContent={'center'} xs={11} justifySelf={'center'} spacing={1}>
                     {
                         props.sectionData.portfolioEntries?.map((portfolioItem: ResumePortfolioItem, index2: number) => {
-                            return <Grid key={index2}
-                                         role='portfoliobutton'
-                                         style={{backgroundColor: index2 % 2 === 1 ? "whitesmoke" : "white"}}
-                                         container item xs={6} sm={4} lg={4} xl={4} alignContent='flex-start'
-                                         justifyContent='center'>
-                                <Button fullWidth onClick={(e) => sendToModal(portfolioItem)}>
-                                    <Grid item container>
-                                        <Grid container item spacing={2} justifyContent='center'>
-                                            <Grid item xs={11} sm={11} container justifyContent='center'
-                                                  style={{
-                                                      backgroundImage: `url(${urlFor(portfolioItem?.coverImage ?? "").url() ?? ""})`,
-                                                      backgroundSize: "cover",
-                                                      backgroundPosition: "top center",
-                                                      backgroundRepeat: "no-repeat",
-                                                      width: "100%",
-                                                      minHeight: "200px"
-                                                  }}
-                                            >
-                                            </Grid>
-                                        </Grid>
-                                        <Grid container item justifyContent='center'
-                                              style={{marginTop: theme.spacing(2)}}>
-                                            <Typography display='inline'
-                                                        variant='body1'
-                                            >{dateUtils.MonthYear(portfolioItem?.inceptionDate)}</Typography>
-                                        </Grid>
-                                        <Grid container item justifyContent='center' alignContent={'center'}>
-                                            <Typography style={{minHeight: "60px"}}
-                                                        variant='body2'>{portfolioItem?.title}</Typography>
-                                        </Grid>
-                                    </Grid>
-                                </Button>
-                            </Grid>
+                            return <ResumePortfolioEntry portfolioItem={portfolioItem} key={index2}/>
                         })
                     }
                 </Grid>
             </Grid>
-            <Modal open={isOpen}>
-                <Grid container item justifyContent='center' alignContent='center' alignItems='center'
-                      style={{width: "100vw", height: "100vh", position: "relative"}}>
-                    <IconButton
-                        color='secondary'
-                        style={{position: "absolute", top: 0, right: 0}}
-                        onClick={() => setIsOpen(false)}
-                        size="large"><Close fontSize={'large'}/></IconButton>
-                    <Grid container sm={8} item style={{
-                        backgroundColor: "white",
-                        padding: theme.spacing(4),
-                        maxHeight: "800px",
-                        overflowY: "scroll",
-                        maxWidth: "100%"
-                    }} spacing={2}>
-                        <Grid item container><Typography variant='h3'>{currentItem?.detailTitle}</Typography>
-                        </Grid>
-                        <Grid item container><Typography
-                            variant='body1'>{currentItem?.detailDescription}</Typography></Grid>
-                        <Grid item container spacing={1}>
-                            {currentItem?.skillsHighlighted?.map((skill) => (<Grid item>
-                                <Chip color='primary' label={skill.title}/>
-                            </Grid>))}
-                        </Grid>
-                        <Grid item container>{currentItem?.inceptionDate?.toString()}</Grid>
-                        <Grid item container justifyContent='center'>
-                            <Grid item container justifyContent='center'>
-                                {currentItem?.imageGallery?.map((image) => (
-                                    <Grid item container xs={11} justifyContent='center'>
-                                        <Grid item>
-                                            <img alt={'imageGalleryEntry'} src={urlFor(image ?? "").url() ?? ""}
-                                                 width={"100%"}/>
-                                        </Grid>
-                                    </Grid>))}
-                            </Grid>
-                        </Grid>
-                        <Grid item container justifyContent='center'>
-                            <ButtonGroup fullWidth style={{marginTop: theme.spacing(4)}}>
-                                <Button variant='contained' color="primary" href={currentItem?.linkToProd}>
-                                    Go to this Project
-                                </Button>
-                                <Button variant='contained' color='secondary' onClick={() => setIsOpen(false)}>
-                                    Back to Resume
-                                </Button>
-                            </ButtonGroup>
-                        </Grid>
-                    </Grid>
-                </Grid>
-            </Modal>
+            {/*<PortfolioItemModal currentItem={currentItem} isOpen={isOpen} setIsOpen={(value)=>{setIsOpen(value)}}/>*/}
         </Grid>
     );
 }
diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx
new file mode 100644
index 00000000..240d931f
--- /dev/null
+++ b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillReferences.tsx
@@ -0,0 +1,64 @@
+import React, {FunctionComponent} from 'react'
+
+import makeStyles from "@mui/styles/makeStyles";
+import {Theme} from "@mui/material/styles";
+import {Grid, Typography} from "@mui/material";
+import {ResumeSkill} from "../../../BlockContentTypes";
+import cmsClient from "../../../block-content-ui/cmsClient";
+import ResumeExperienceItem from "../resume-experience-section/ResumeExperienceItem";
+import {ResumePortfolioItem} from "../../../BlockContentTypes";
+import ResumePortfolioEntry from "../resume-portfolio-section/ResumePortfolioEntry";
+import PortfolioItemModal from "../resume-portfolio-section/PortfolioItemModal";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+    },
+}))
+
+interface IProps {
+    skill?: ResumeSkill
+}
+
+const ResumeSkillReferences: FunctionComponent<IProps> = (props:IProps) => {
+    const classes = useStyles()
+
+    const [referenceResults, setReferenceResults] = React.useState<[]>()
+
+    const searchCMS = async () => {
+        console.log("about to search full text")
+        if (props.skill) {
+            const cmsResponse = await cmsClient.skillReferenceSearch(props.skill)
+            console.log("results", cmsResponse)
+            setReferenceResults(cmsResponse)
+        }
+    }
+
+    React.useEffect(()=>{
+        // find the rerences of this skill
+        searchCMS().then()
+
+    }, [])
+    
+    const [currentItem, setCurrentItem] = React.useState<ResumePortfolioItem>()
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false)
+    return (<Grid container item spacing={2}>
+        {
+            referenceResults?.map((searchResult:any)=>{
+                 switch (searchResult?._type) {
+                     case "ResumeExperience":
+                         return <ResumeExperienceItem experience={searchResult} />
+                     case "ResumePortfolioItem":
+                         return <ResumePortfolioEntry portfolioItem={searchResult}/>
+                     case "ResumeSkillSection":
+                         return <></>
+                     default:
+                         return <Grid item container><Typography>{searchResult._type}</Typography></Grid>
+                 }
+            })
+        }
+
+    </Grid>)
+}
+
+export default ResumeSkillReferences
\ No newline at end of file
diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx
new file mode 100644
index 00000000..96683420
--- /dev/null
+++ b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillSetItem.tsx
@@ -0,0 +1,45 @@
+import React, {FunctionComponent} from 'react'
+
+import makeStyles from "@mui/styles/makeStyles";
+import { Theme} from "@mui/material/styles";
+import {Grid, Typography} from "@mui/material";
+import {COLORS} from "../../../../theme/common/ColorPalette";
+import {ResumeSkillSet} from "../../../BlockContentTypes";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+    },
+}))
+
+interface IProps {
+    skillset: ResumeSkillSet
+}
+
+const ResumeSkillSetItem: FunctionComponent<IProps> = (props:IProps) => {
+    const classes = useStyles()
+
+    React.useEffect(()=>{
+    }, [])
+
+    return (<Grid item container xs={11} sm={6} md={6} alignContent='flex-start'
+                  role='skilldivider'
+                  style={{
+                      // borderBottom: `1px solid ${index2 >= (props.sectionData?.skillsets?.length ?? 0) - 2 ? 'transparent' : COLORS.LIGHTGRAY}`
+                  }}>
+        <Grid container item>
+            <Typography display='inline'
+                        role='skillheader'
+                        variant='body2'>{props.skillset.title}</Typography>
+        </Grid>
+        <Grid container item>
+            {
+                props.skillset.skills?.map((skill, index) => {
+                    return <Typography role='subskill' key={index} display='inline'
+                                       variant='body1'>{skill.title}{index !== (props.skillset.skills?.length ?? 0) - 1 ? ',' : ''}&nbsp;</Typography>
+                })
+            }
+        </Grid>
+    </Grid>)
+}
+
+export default ResumeSkillSetItem
\ No newline at end of file
diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx
index 2d4fe12d..e949eaa1 100644
--- a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx
@@ -1,11 +1,12 @@
 import React, {FunctionComponent, useContext} from 'react'
 import {Theme, ThemeProvider, useTheme} from "@mui/material/styles";
 import makeStyles from '@mui/styles/makeStyles';
-import {Grid, Typography} from '@mui/material'
+import {Grid, Typography, useMediaQuery} from '@mui/material'
 import {ResumeSkillSectionType, ResumeSkillSet} from "../../../BlockContentTypes";
 import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles";
 import {COLORS} from "../../../../theme/common/ColorPalette";
 import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext";
+import ResumeSkillSetItem from "./ResumeSkillSetItem";
 
 
 export const useStyles = makeStyles((theme: Theme) => ({
@@ -19,47 +20,28 @@ interface IProps {
 const ResumeSkillsSection: FunctionComponent<IProps> = (props: IProps) => {
     // const classes = useStyles()
     const globalClasses = useThwCommonStyles()
+    const theme = useTheme()
 
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
-    const theme = useTheme()
     return (
             <Grid
                 container
                 item
-                style={{
-                    padding: theme.spacing(4)
-                }}
+                style={{padding: theme.spacing(4,smDown?1:4)}}
                 className={globalClasses.resumeSection}
             >
                 <Grid container item spacing={3}>
                     <Grid item container md={4} alignContent='flex-start' spacing={1}>
-                        <Grid item container><Typography component='div' variant='h6'>{props.sectionData.title}</Typography><Typography variant='h6'
+                        <Grid item container><Typography component='div' variant='h6'>{props.sectionData?.title}</Typography><Typography variant='h6'
                                                                                                  color='primary'
                                                                                                  display='inline'>.</Typography></Grid>
-                        <Grid item><Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
+                        <Grid item><Typography variant='body1'>{props.sectionData?.introduction}</Typography></Grid>
                     </Grid>
                     <Grid item container md={8} spacing={2} justifyContent='space-between'>
                         {
-                            props.sectionData.skillsets?.map((skillset: ResumeSkillSet, index2: number) => {
-                                return <Grid key={index2} item container xs={11} sm={6} md={6} alignContent='flex-start'
-                                             role='skilldivider'
-                                             style={{
-                                                 borderBottom: `1px solid ${index2 >= (props.sectionData.skillsets?.length ?? 0) - 2 ? 'transparent' : COLORS.LIGHTGRAY}`
-                                             }}>
-                                    <Grid container item>
-                                        <Typography display='inline'
-                                                    role='skillheader'
-                                                    variant='body2'>{skillset.title}</Typography>
-                                    </Grid>
-                                    <Grid container item>
-                                        {
-                                            skillset.skills?.map((skill, index) => {
-                                                return <Typography role='subskill' key={index} display='inline'
-                                                                   variant='body1'>{skill.title}{index !== (skillset.skills?.length ?? 0) - 1 ? ',' : ''}&nbsp;</Typography>
-                                            })
-                                        }
-                                    </Grid>
-                                </Grid>
+                            props.sectionData?.skillsets?.map((skillset: ResumeSkillSet, index2: number) => {
+                                return <ResumeSkillSetItem skillset={skillset} />
                             })
                         }
                     </Grid>
diff --git a/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx b/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
index b0fc9174..cff89c58 100644
--- a/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
+++ b/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent, useContext} from 'react'
 import makeStyles from '@mui/styles/makeStyles';
-import {Grid, IconButton, PropTypes, ThemeProvider} from '@mui/material';
+import {Grid, IconButton, PropTypes, ThemeProvider, useTheme} from '@mui/material';
 import {Facebook, GitHub, Instagram, LinkedIn, Twitter} from "@mui/icons-material";
 import clsx from "clsx";
 import {GridSpacing} from "@mui/material/Grid/Grid";
@@ -16,67 +16,78 @@ interface IProps {
     instagram?: string
     linkedIn?: string
     github?: string
+    isCentered?: boolean
     color?: PropTypes.Color
     bgColor?: boolean
     theBackgroundColor?: string
     iconColor?: string
     spacing?: GridSpacing
+    size?:any
 }
 
 const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
     const customizedThemeContext = useContext(CustomizedThemeContext)
-     const useStyles = makeStyles(({
-        buttonBackground: {
-            backgroundColor: props.bgColor ? props.theBackgroundColor:customizedThemeContext.customizedTheme.palette.primary.main,
-            borderRadius: 40,
-            // padding: customizedThemeContext.customizedTheme.spacing(1),
-            color: props.iconColor ?? customizedThemeContext.customizedTheme.palette.primary.main
-        },
-    }))
-    const classes = useStyles()
+    const theme = useTheme()
+
+
     return (
-            <Grid data-testid='social-media-block' item xs={12} container alignItems='center' justifyContent='flex-end'
-                  spacing={props.spacing ? props.spacing : 0} wrap={'nowrap'} >
+            <Grid data-testid='social-media-block' item xs={12} container alignItems='center' justifyContent={props.isCentered?'center':'flex-end'}
+                  spacing={props.spacing ? props.spacing : 0} wrap={'nowrap'}>
                 {props.facebook && <Grid item>
-                    <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
+                            sx={{
+                                    borderRadius: 40,
+                                    padding: theme.spacing(2),
+                                    backgroundColor: props.bgColor ? props.theBackgroundColor:'transparent',
+                                    color: `${props.iconColor ?? theme.palette.primary.main} !important`,
 
-                            color={'inherit'}
+                                }}
                             href={`https://facebook.com/${props.facebook}`}
-                            size="small"><Facebook/></IconButton>
-                    </Grid>
+                            size={props.size?props.size:"small"}><Facebook color={'inherit'}/></IconButton>
                 </Grid>}
                 {props.twitter && <Grid item>
-                    <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={'inherit'}
+                            sx={{
+                                    backgroundColor: props.bgColor ? props.theBackgroundColor:'transparent',
+                                    borderRadius: 40,
+                                    padding: theme.spacing(2),
+                                    color: `${props.iconColor ?? theme.palette.primary.main} !important`
+                                }}
                             href={`https://twitter.com/${props.twitter}`}
-                            size="small"><Twitter/></IconButton>
-                    </Grid>
+                            size={props.size?props.size:"small"}><Twitter  color={'inherit'}/></IconButton>
                 </Grid>}
                 {props.instagram && <Grid item>
-                    <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={'inherit'}
+                            sx={{
+                                    backgroundColor: props.bgColor ? props.theBackgroundColor:'transparent',
+                                    borderRadius: 40,
+                                    padding: theme.spacing(2),
+                                    color: `${props.iconColor ?? theme.palette.primary.main} !important`
+                                }}
                             href={`https://instagram.com/${props.instagram}`}
-                            size="small"><Instagram/></IconButton>
-                    </Grid>
+                            size={props.size?props.size:"small"}><Instagram  color={'inherit'}/></IconButton>
                 </Grid>}
                 {props.linkedIn && <Grid item>
-                    <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={'inherit'}
+                             sx={{
+                                    backgroundColor: props.bgColor ? props.theBackgroundColor:'transparent',
+                                    borderRadius: 40,
+                                    padding: theme.spacing(2),
+                                    color: `${props.iconColor ?? theme.palette.primary.main} !important`
+                                }}
                             href={`https://linkedIn.com/in/${props.linkedIn}`}
-                            size="small"><LinkedIn/></IconButton>
-                    </Grid>
+                            size={props.size?props.size:"small"}><LinkedIn color={'inherit'}/></IconButton>
                 </Grid>}
                 {props.github && <Grid item>
-                    <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={'inherit'}
+                             sx={{
+                                    backgroundColor: props.bgColor ? props.theBackgroundColor:'transparent',
+                                    borderRadius: 40,
+                                    padding: theme.spacing(2),
+                                    color: `${props.iconColor ?? theme.palette.primary.main} !important`
+                                }}
                             href={`https://github.com/${props.github}`}
-                            size="small"><GitHub/></IconButton>
-                    </Grid>
+                            size={props.size?props.size:"small"}><GitHub color={'inherit'}/></IconButton>
                 </Grid>}
             </Grid>