diff --git a/client/.storybook/main.ts b/client/.storybook/main.ts
index e71f57d..4f7eebf 100644
--- a/client/.storybook/main.ts
+++ b/client/.storybook/main.ts
@@ -33,6 +33,23 @@ const config: StorybookConfig = {
       "@": path.resolve(__dirname, "../src"),
       "~": path.resolve(__dirname, "../src"),
     };
+    const imageRule = config.module?.rules?.find(rule => {
+      const test = (rule as { test: RegExp }).test
+
+      if (!test) {
+        return false
+      }
+
+      return test.test('.svg')
+    }) as { [key: string]: any }
+
+    imageRule.exclude = /\.svg$/
+
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack']
+    })
+
     return config;
   },
 };
diff --git a/client/next.config.js b/client/next.config.js
index 8fb416f..3804803 100644
--- a/client/next.config.js
+++ b/client/next.config.js
@@ -1,6 +1,31 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'standalone'
+  output: 'standalone',
+  webpack(config, { isServer }) {
+    // @ts-ignore - rules is a private property that is not typed
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+  
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      }
+    );
+  
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+  
+    return config;
+  },
 }
 
 //For PWA
diff --git a/client/package-lock.json b/client/package-lock.json
index 0fbbd46..73d26ca 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.14.15",
         "@mui/material": "^5.14.15",
+        "@tanstack/react-query": "^5.8.1",
         "axios": "^1.6.0",
         "framer-motion": "^10.16.4",
         "next": "14.0.0",
@@ -27,6 +28,7 @@
         "@storybook/nextjs": "7.5.2",
         "@storybook/react": "^7.5.2",
         "@storybook/testing-library": "0.2.2",
+        "@svgr/webpack": "^8.1.0",
         "@testing-library/jest-dom": "6.1.2",
         "@testing-library/react": "14.0.0",
         "@testing-library/user-event": "14.4.3",
@@ -40,7 +42,7 @@
         "eslint-plugin-storybook": "^0.6.15",
         "jest": "29.6.4",
         "jest-environment-jsdom": "29.6.4",
-        "msw": "^2.0.3",
+        "msw": "^2.0.4",
         "next-pwa": "^5.6.0",
         "postcss": "^8",
         "storybook": "7.5.2",
@@ -1647,6 +1649,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-constant-elements": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.22.5.tgz",
+      "integrity": "sha512-BF5SXoO+nX3h5OhlN78XbbDrBOffv+AxPP2ENaJOVqjWCgBDeOY3WcaUcddutGSfoap+5NEQ/q/4I3WZIvgkXA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-react-display-name": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
@@ -3637,18 +3654,18 @@
       }
     },
     "node_modules/@mswjs/cookies": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-1.0.0.tgz",
-      "integrity": "sha512-TdXoBdI+h/EDTsVLCX/34s4+9U0sWi92qFnIGUEikpMCSKLhBeujovyYVSoORNbYgsBH5ga7/tfxyWcEZAxiYA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-1.1.0.tgz",
+      "integrity": "sha512-0ZcCVQxifZmhwNBoQIrystCb+2sWBY2Zw8lpfJBPCHGCA/HWqehITeCRVIv4VMy8MPlaHo2w2pTHFV2pFfqKPw==",
       "dev": true,
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.25.8.tgz",
-      "integrity": "sha512-d++BpUPAnuPYkvdrqjNpFRmWb1CMEohcVb/wiOQa80giAJZZn34sUzeuaztRmP1Z0NGyIQGJYPeMJoUc3ksDpw==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.25.10.tgz",
+      "integrity": "sha512-5/HOSUmD/GgR8pV4ID7QbpXJZ9HP5x1hItdwT+SFeWfYzg9l/81zrggV9mDWD3w97AiU+0gfrpZHy2LJUFlFSg==",
       "dev": true,
       "dependencies": {
         "@open-draft/deferred-promise": "^2.2.0",
@@ -6561,6 +6578,363 @@
         "string.prototype.matchall": "^4.0.6"
       }
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/@svgr/core/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@svgr/core/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
+      "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
+      "dev": true,
+      "dependencies": {
+        "cosmiconfig": "^8.1.3",
+        "deepmerge": "^4.3.1",
+        "svgo": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@svgr/plugin-svgo/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@svgr/webpack": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz",
+      "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@svgr/core": "8.1.0",
+        "@svgr/plugin-jsx": "8.1.0",
+        "@svgr/plugin-svgo": "8.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.3.95",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.95.tgz",
@@ -6779,6 +7153,40 @@
       "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
       "dev": true
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.8.1.tgz",
+      "integrity": "sha512-Y0enatz2zQXBAsd7XmajlCs+WaitdR7dIFkqz9Xd7HL4KV04JOigWVreYseTmNH7YFSBSC/BJ9uuNp1MAf+GfA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.8.1.tgz",
+      "integrity": "sha512-YMagxS8iNPOLg0pK6WOjdSDlAvWKOf69udLOwQrBVmkC2SRLNLko7elo5Ro3ptlJkXvTVHidxC/h5KGi5bH1XQ==",
+      "dependencies": {
+        "@tanstack/query-core": "5.8.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -6892,6 +7300,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.3.tgz",
@@ -10322,6 +10739,19 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -10352,6 +10782,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -12649,19 +13112,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/formdata-node": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
-      "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
-      "dev": true,
-      "dependencies": {
-        "node-domexception": "1.0.0",
-        "web-streams-polyfill": "4.0.0-beta.3"
-      },
-      "engines": {
-        "node": ">= 12.20"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -16127,6 +16577,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -16375,24 +16831,23 @@
       "dev": true
     },
     "node_modules/msw": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-2.0.3.tgz",
-      "integrity": "sha512-PFIo99h862DiVazndQmko1vJFNNhog0CYajK6N12ESzeLURYJlUglv9ObzWmRCAN3DRVuq7BUeI+eBgRk7oYaQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.0.4.tgz",
+      "integrity": "sha512-mYDt0cFUYHofXwLSRl5bbPQ7Tl0GmbH+GWE0HdxwzTHMUh5YCWs1n5FvHmVrNIJSylB9ZIKEjq1BK9MfKgEpgg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@bundled-es-modules/cookie": "^2.0.0",
         "@bundled-es-modules/js-levenshtein": "^2.0.1",
         "@bundled-es-modules/statuses": "^1.0.1",
-        "@mswjs/cookies": "^1.0.0",
-        "@mswjs/interceptors": "^0.25.1",
+        "@mswjs/cookies": "^1.1.0",
+        "@mswjs/interceptors": "^0.25.10",
         "@open-draft/until": "^2.1.0",
         "@types/cookie": "^0.4.1",
         "@types/js-levenshtein": "^1.1.1",
         "@types/statuses": "^2.0.1",
         "chalk": "^4.1.2",
         "chokidar": "^3.4.2",
-        "formdata-node": "4.4.1",
         "graphql": "^16.8.1",
         "headers-polyfill": "^4.0.1",
         "inquirer": "^8.2.0",
@@ -16626,25 +17081,6 @@
         "node": ">= 0.10.5"
       }
     },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -19428,6 +19864,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -20024,6 +20470,104 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
+    "node_modules/svgo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.2.1",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/swc-loader": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz",
@@ -21339,15 +21883,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
-      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
-      "dev": true,
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index 0efacb8..6341c78 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.15",
     "@mui/material": "^5.14.15",
+    "@tanstack/react-query": "^5.8.1",
     "axios": "^1.6.0",
     "framer-motion": "^10.16.4",
     "next": "14.0.0",
@@ -32,6 +33,7 @@
     "@storybook/nextjs": "7.5.2",
     "@storybook/react": "^7.5.2",
     "@storybook/testing-library": "0.2.2",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "6.1.2",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
@@ -45,7 +47,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "jest": "29.6.4",
     "jest-environment-jsdom": "29.6.4",
-    "msw": "^2.0.3",
+    "msw": "^2.0.4",
     "next-pwa": "^5.6.0",
     "postcss": "^8",
     "storybook": "7.5.2",
diff --git a/client/src/assets/icons/BeverageIcon.svg b/client/src/assets/icons/BeverageIcon.svg
index ed895d5..65babb4 100644
--- a/client/src/assets/icons/BeverageIcon.svg
+++ b/client/src/assets/icons/BeverageIcon.svg
@@ -1,10 +1,10 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <mask id="mask0_33_2116" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
-    <rect width="32" height="32" fill="#D9D9D9" />
+    <rect width="32" height="32" fill="currentColor" />
   </mask>
   <g mask="url(#mask0_33_2116)">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M16 6L2 11L8.36364 13.2727L16 16L23.6364 13.2727L30 11L16 6ZM8.36364 14.6028V23.5C8.36364 24.8807 11.7826 26 16 26C20.2174 26 23.6364 24.8807 23.6364 23.5V14.6028L16 17.3301L8.36364 14.6028ZM16 23.5C16.7029 23.5 17.2727 22.9404 17.2727 22.25C17.2727 21.5596 16 19.75 16 19.75C16 19.75 14.7273 21.5596 14.7273 22.25C14.7273 22.9404 15.2971 23.5 16 23.5Z"
-      fill="#D9D9D9" />
+      fill="currentColor" />
   </g>
 </svg>
\ No newline at end of file
diff --git a/client/src/assets/icons/HomeIcon.svg b/client/src/assets/icons/HomeIcon.svg
index bd37f36..654fcd2 100644
--- a/client/src/assets/icons/HomeIcon.svg
+++ b/client/src/assets/icons/HomeIcon.svg
@@ -1,10 +1,10 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <mask id="mask0_33_2119" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
-    <rect width="32" height="32" fill="#D9D9D9" />
+    <rect width="32" height="32" fill="currentColor" />
   </mask>
   <g mask="url(#mask0_33_2119)">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M14.5858 4.58579L4.58579 14.5858C4.21071 14.9609 4 15.4696 4 16V25.1716C4 26.2761 4.89543 27.1716 6 27.1716H13V21.1716C13 20.6193 13.4477 20.1716 14 20.1716H18C18.5523 20.1716 19 20.6193 19 21.1716V27.1716H26C27.1046 27.1716 28 26.2761 28 25.1716V16C28 15.4696 27.7893 14.9609 27.4142 14.5858L17.4142 4.58579C16.6332 3.80474 15.3668 3.80474 14.5858 4.58579Z"
-      fill="#D9D9D9" />
+      fill="currentColor" />
   </g>
 </svg>
\ No newline at end of file
diff --git a/client/src/assets/icons/MyIcon.svg b/client/src/assets/icons/MyIcon.svg
index 20bdd51..71f86cd 100644
--- a/client/src/assets/icons/MyIcon.svg
+++ b/client/src/assets/icons/MyIcon.svg
@@ -1,10 +1,10 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <mask id="mask0_33_2115" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
-    <rect width="32" height="32" fill="#D9D9D9" />
+    <rect width="32" height="32" fill="currentColor" />
   </mask>
   <g mask="url(#mask0_33_2115)">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M16 14.6667C18.9455 14.6667 21.3333 12.2789 21.3333 9.33333C21.3333 6.38781 18.9455 4 16 4C13.0545 4 10.6667 6.38781 10.6667 9.33333C10.6667 12.2789 13.0545 14.6667 16 14.6667ZM16 28C22.6274 28 28 25.3137 28 22C28 18.6863 22.6274 16 16 16C9.37258 16 4 18.6863 4 22C4 25.3137 9.37258 28 16 28Z"
-      fill="#D9D9D9" />
+      fill="currentColor" />
   </g>
 </svg>
\ No newline at end of file
diff --git a/client/src/assets/icons/PostIcon.svg b/client/src/assets/icons/PostIcon.svg
index 3e5a016..ee866d3 100644
--- a/client/src/assets/icons/PostIcon.svg
+++ b/client/src/assets/icons/PostIcon.svg
@@ -1,10 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <mask id="mask0_33_2117" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
-    <rect width="32" height="32" fill="#D9D9D9" />
-  </mask>
-  <g mask="url(#mask0_33_2117)">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-      d="M26.3107 22.1427C26.1776 22.3657 26.1258 22.6292 26.1768 22.8838L26.7058 25.5291C26.8458 26.2288 26.2288 26.8458 25.5291 26.7058L22.8838 26.1768C22.6292 26.1258 22.3657 26.1776 22.1427 26.3107C20.3458 27.3836 18.2449 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16C28 18.2449 27.3836 20.3458 26.3107 22.1427ZM20 14V10H12V14C12 16.0969 13.6135 17.8169 15.6667 17.9863V20.486C15.1663 20.5279 14.672 20.664 14.2111 20.8944L12.5052 21.7474C12.3793 21.8103 12.4241 22 12.5648 22H19.4352C19.5759 22 19.6207 21.8103 19.4948 21.7474L17.7889 20.8944C17.328 20.664 16.8337 20.5279 16.3333 20.486V17.9863C18.3865 17.8169 20 16.0969 20 14Z"
-      fill="#D9D9D9" />
-  </g>
-</svg>
\ No newline at end of file
+<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3862 32.0094C39.2499 32.2304 39.1988 32.4942 39.2498 32.7489L40.4558 38.7791C40.5958 39.4789 39.9789 40.0958 39.2791 39.9558L33.2489 38.7498C32.9942 38.6988 32.7304 38.7499 32.5094 38.8862C29.3083 40.8608 25.5372 42 21.5 42C9.90202 42 0.5 32.598 0.5 21C0.5 9.40202 9.90202 0 21.5 0C33.098 0 42.5 9.40202 42.5 21C42.5 25.0372 41.3608 28.8083 39.3862 32.0094ZM28.5 17.5V10.5H14.5V17.5C14.5 21.1696 17.3236 24.1796 20.9167 24.476V28.8506C20.0411 28.9237 19.1761 29.162 18.3695 29.5652L15.3841 31.058C15.1638 31.1681 15.2422 31.5 15.4884 31.5H27.5116C27.7578 31.5 27.8362 31.1681 27.6159 31.058L24.6305 29.5652C23.8239 29.162 22.9589 28.9237 22.0833 28.8506V24.476C25.6764 24.1796 28.5 21.1696 28.5 17.5Z" fill="currentColor"/>
+</svg>
diff --git a/client/src/assets/icons/SearchIcon.svg b/client/src/assets/icons/SearchIcon.svg
index 793e58a..8392110 100644
--- a/client/src/assets/icons/SearchIcon.svg
+++ b/client/src/assets/icons/SearchIcon.svg
@@ -1,10 +1,10 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <mask id="mask0_33_2118" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
-    <rect width="32" height="32" fill="#D9D9D9" />
+    <rect width="32" height="32" fill="currentColor" />
   </mask>
   <g mask="url(#mask0_33_2118)">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M22.2858 14.2857C22.2858 18.7039 18.704 22.2857 14.2857 22.2857C9.86745 22.2857 6.28572 18.7039 6.28572 14.2857C6.28572 9.86742 9.86745 6.28571 14.2857 6.28571C18.704 6.28571 22.2858 9.86742 22.2858 14.2857ZM20.7059 22.3221C18.9463 23.7297 16.7143 24.5714 14.2857 24.5714C8.60508 24.5714 4 19.9663 4 14.2857C4 8.60506 8.60508 4 14.2857 4C19.9664 4 24.5715 8.60506 24.5715 14.2857C24.5715 16.7143 23.7298 18.9463 22.3222 20.7059L27.6653 26.049C28.1116 26.4953 28.1116 27.2189 27.6653 27.6652C27.219 28.1116 26.4954 28.1116 26.049 27.6652L20.7059 22.3221Z"
-      fill="#D9D9D9" />
+      fill="currentColor" />
   </g>
 </svg>
\ No newline at end of file
diff --git a/client/src/components/NavigationBar.tsx b/client/src/components/NavigationBar.tsx
index 03524fa..b966057 100644
--- a/client/src/components/NavigationBar.tsx
+++ b/client/src/components/NavigationBar.tsx
@@ -1,4 +1,4 @@
-// FIXME "use client";
+"use client";
 import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material";
 
 import HomeIcon from "~/assets/icons/HomeIcon.svg";
@@ -6,54 +6,70 @@ import SearchIcon from "~/assets/icons/SearchIcon.svg";
 import PostIcon from "~/assets/icons/PostIcon.svg";
 import BeverageIcon from "~/assets/icons/BeverageIcon.svg";
 import MyIcon from "~/assets/icons/MyIcon.svg";
-import HOME, { MY_PROFILE, WIKI } from "@/const/clientPath";
+import HOME, { MY_PROFILE, SEARCH, WIKI } from "@/const/clientPath";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const NavbarData = [
   {
-    iconComponent: <img src={HomeIcon.src} />,
+    iconComponent: <HomeIcon />,
     label: "홈",
     href: HOME,
   },
   {
-    iconComponent: <img src={SearchIcon.src} />,
+    iconComponent: <SearchIcon />,
     label: "검색",
+    href:SEARCH
   },
   {
-    iconComponent: <img src={PostIcon.src} />,
-    label: "올리기",
+    iconComponent: <PostIcon />,
   },
   {
-    iconComponent: <img src={BeverageIcon.src} />,
+    iconComponent: <BeverageIcon />,
     label: "술과사전",
     href: WIKI,
   },
   {
-    iconComponent: <img src={MyIcon.src} />,
+    iconComponent: <MyIcon />,
     label: "내 정보",
     href: MY_PROFILE,
   },
 ];
 
 const NavigationBar = () => {
-  // FIXME const path = usePathname();
+  const path = usePathname();
   return (
     <Paper
-      sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}
-      elevation={3}
+      sx={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderRadius: 0,
+      }}
+      elevation={0}
     >
       <BottomNavigation
-      // FIXME value={path}
+        value={path}
+        showLabels
+        sx={{
+          borderRadius: "12px 12px 0 0",
+          border: "1px solid",
+          borderBottom:'none',
+          borderColor: "gray.secondary",
+          boxSizing: "border-box",
+        }}
       >
-        {NavbarData.map((buttonData) => {
+        {NavbarData.map(({ label, href, iconComponent, ...others }) => {
           return (
             <BottomNavigationAction
-              icon={buttonData.iconComponent as any}
-              key={buttonData.label}
-              component={buttonData.href ? Link : "button"}
-              href={buttonData.href}
-              // FIXME value={buttonData.href}
-              // FIXME label={buttonData.label}
+              icon={iconComponent as any}
+              key={String(label)}
+              component={href ? Link : "button"}
+              href={href}
+              value={href}
+              label={label}
+              {...others}
             />
           );
         })}
diff --git a/client/src/const/theme.ts b/client/src/const/theme.ts
index 8fac763..418512c 100644
--- a/client/src/const/theme.ts
+++ b/client/src/const/theme.ts
@@ -68,6 +68,10 @@ const theme = createTheme({
       disabled: "#B8B8B8",
     },
     divider: "#CDD4D4",
+    gray: {
+      primary: "#F5F5F5",
+      secondary: "#E6E6E6",
+    },
     background: {
       default: "#F5F5F5",
       paper: "#fefefe",
@@ -92,9 +96,9 @@ const theme = createTheme({
     MuiButtonBase: {
       styleOverrides: { root: { gap: 4 } },
     },
-    MuiSvgIcon:{
-      styleOverrides:{root:{color:'#8A8A8A'}}
-    }
+    MuiSvgIcon: {
+      styleOverrides: { root: { color: "#8A8A8A" } },
+    },
   },
 });
 
@@ -111,6 +115,13 @@ declare module "@mui/material/styles" {
     caption1?: React.CSSProperties;
     caption2?: React.CSSProperties;
   }
+  interface Palette {
+    gray: { primary: string; secondary: string };
+  }
+
+  interface PaletteOptions {
+    gray?: { primary: string; secondary: string };
+  }
 }
 
 // Update the Typography's variant prop options