diff --git a/client/package-lock.json b/client/package-lock.json
index 01a6d716..d5cfe40a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -27,6 +27,7 @@
         "@graphql-codegen/client-preset": "^1.1.4",
         "@rollup/plugin-alias": "^3.1.9",
         "@rushstack/eslint-patch": "^1.1.4",
+        "@savvywombat/tailwindcss-grid-areas": "^3.0.0",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/typography": "^0.5.4",
         "@testing-library/vue": "^6.6.1",
@@ -2765,6 +2766,21 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "node_modules/@savvywombat/tailwindcss-grid-areas": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.0.0.tgz",
+      "integrity": "sha512-2Bc/7y2Vd0zm16AKX/gyaj+2zPV1VkD9w1YYgC1A9NpN9ybJLQTbS1SBXmiGfyDwN5XaaO1cFJsCzwkljUN6oQ==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=14.18.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0.1"
+      }
+    },
     "node_modules/@sentry/browser": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.20.0.tgz",
@@ -13751,6 +13767,15 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "@savvywombat/tailwindcss-grid-areas": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.0.0.tgz",
+      "integrity": "sha512-2Bc/7y2Vd0zm16AKX/gyaj+2zPV1VkD9w1YYgC1A9NpN9ybJLQTbS1SBXmiGfyDwN5XaaO1cFJsCzwkljUN6oQ==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "@sentry/browser": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.20.0.tgz",
diff --git a/client/package.json b/client/package.json
index 1f06d7f5..a28c1afd 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,6 +34,7 @@
     "@graphql-codegen/client-preset": "^1.1.4",
     "@rollup/plugin-alias": "^3.1.9",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@savvywombat/tailwindcss-grid-areas": "^3.0.0",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.4",
     "@testing-library/vue": "^6.6.1",
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index aa718168..77f2c93e 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -37,6 +37,18 @@ module.exports = {
       borderColor: (theme) => ({
         DEFAULT: theme("colors.gray.500"),
       }),
+      gridTemplateAreas: {
+        "horizontal-bar-chart": [
+          "y-axis . left-chart . right-chart .",
+          "y-axis . left-label . right-label .",
+        ],
+      },
+      gridTemplateColumns: {
+        "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
+      },
+      gridTemplateRows: {
+        "horizontal-bar-chart": "200px 40px",
+      },
     },
     colors: colors,
   },
@@ -53,5 +65,6 @@ module.exports = {
     require("@tailwindcss/typography"),
     require("@tailwindcss/forms"),
     require("@headlessui/tailwindcss"),
+    require("@savvywombat/tailwindcss-grid-areas"),
   ],
 };