diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml
index 38de3d3..1a4dc23 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yaml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yaml
@@ -5,7 +5,7 @@ labels: '버그'
 body:
 - type: textarea
   attributes:
-    label: 어떤 기능에 버그가 있나요?
+    label: 어떤 기능의 어떤 부분에 버그가 있나요?
 - type: dropdown
   attributes:
     label: 버그가 일어나는 화면
@@ -14,6 +14,8 @@ body:
     options:
       - '급식 화면'
       - '학교 선택 화면'
+      - '재료 검색 화면'
+      - '재료 정보 화면'
       - '기타'
 - type: textarea
   attributes:
diff --git a/.github/ISSUE_TEMPLATE/design-improvement.yaml b/.github/ISSUE_TEMPLATE/design-improvement.yaml
index 651fe67..90f1f98 100644
--- a/.github/ISSUE_TEMPLATE/design-improvement.yaml
+++ b/.github/ISSUE_TEMPLATE/design-improvement.yaml
@@ -14,6 +14,8 @@ body:
     options:
       - '급식 화면'
       - '학교 선택 화면'
+      - '재료 검색 화면'
+      - '재료 정보 화면'
       - '기타'
 - type: textarea
   attributes:
diff --git a/.github/ISSUE_TEMPLATE/feature-improvement.yaml b/.github/ISSUE_TEMPLATE/feature-improvement.yaml
index 7eb394e..eb0118f 100644
--- a/.github/ISSUE_TEMPLATE/feature-improvement.yaml
+++ b/.github/ISSUE_TEMPLATE/feature-improvement.yaml
@@ -14,6 +14,8 @@ body:
     options:
       - '급식 화면'
       - '학교 선택 화면'
+      - '재료 검색 화면'
+      - '재료 정보 화면'
       - '기타'
 - type: textarea
   attributes:
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yaml b/.github/ISSUE_TEMPLATE/feature-request.yaml
index c989da6..1f605bb 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.yaml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yaml
@@ -15,6 +15,8 @@ body:
     options:
       - '급식 화면'
       - '학교 선택 화면'
+      - '재료 검색 화면'
+      - '재료 정보 화면'
       - '기타'
 - type: textarea
   attributes:
diff --git a/package-lock.json b/package-lock.json
index 35792d3..ee4e6fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "todayschoolmeal",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "todayschoolmeal",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "dependencies": {
+        "@supabase/supabase-js": "^2.21.0",
         "@vercel/analytics": "^1.0.0",
         "lucide-svelte": "^0.171.0"
       },
@@ -539,6 +540,61 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.1.tgz",
+      "integrity": "sha512-bIR1Puae6W+1/MzPfYBWOG/SCWGo4B5CB7c0ZZksvliNEAzhxNBJ0UFKYINcGdGtxG8ZC+1xr3utWpNZNwnoRw==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "node_modules/@supabase/gotrue-js": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.24.0.tgz",
+      "integrity": "sha512-ZsH4K5cbMTjfMytXaDYVYs9l9igmlZFxiwXn7J2IP/CklWR5qmLCma+dvat5rccPLITVkN6oAZbKxDzW+pEgCg==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.6.0.tgz",
+      "integrity": "sha512-HCphMC6KjtoaGcowSlkKRVKBOlNpmKWE2CwoumMwwsfhnRxplIy1zBiIYIL3zIYo/Bm20H/1C6enqjBeTvSwXg==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
+      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
+      "dependencies": {
+        "@types/phoenix": "^1.5.4",
+        "@types/websocket": "^1.0.3",
+        "websocket": "^1.0.34"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
+      "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.21.0.tgz",
+      "integrity": "sha512-FW3ZzBoc4orSgfX0dXrmJoXAcI/hiekmqXTkN64vjtUF2Urp3UjyAf71UTtV9Jl6ejHoe3K++e0+Rg9zKUJh5w==",
+      "dependencies": {
+        "@supabase/functions-js": "^2.1.0",
+        "@supabase/gotrue-js": "^2.23.0",
+        "@supabase/postgrest-js": "^1.1.1",
+        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/storage-js": "^2.5.1",
+        "cross-fetch": "^3.1.5"
+      }
+    },
     "node_modules/@sveltejs/adapter-auto": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.0.0.tgz",
@@ -628,6 +684,16 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "18.16.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
+      "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q=="
+    },
+    "node_modules/@types/phoenix": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
+      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA=="
+    },
     "node_modules/@types/pug": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -640,6 +706,14 @@
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "node_modules/@types/websocket": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
+      "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.56.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.56.0.tgz",
@@ -1070,6 +1144,18 @@
         "node": "*"
       }
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
+      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1204,6 +1290,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "dependencies": {
+        "node-fetch": "2.6.7"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1230,6 +1324,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dependencies": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1345,12 +1448,45 @@
       "integrity": "sha512-zx8hqumOqltKsv/MF50yvdAlPF9S/4PXbyfzJS6ZGhbddGkRegdwImmfSVqCkEziYzrIGZ/TlrzBND4FysfkDg==",
       "dev": true
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
     "node_modules/es6-promise": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
       "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
       "dev": true
     },
+    "node_modules/es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dependencies": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.12.tgz",
@@ -1615,6 +1751,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
+    "node_modules/ext/node_modules/type": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2003,6 +2152,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2269,6 +2423,40 @@
       "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "dev": true
     },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
@@ -3239,6 +3427,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -3266,6 +3459,11 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3290,6 +3488,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz",
@@ -3350,6 +3556,18 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3419,6 +3637,49 @@
         }
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3458,6 +3719,14 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -3756,6 +4025,61 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@supabase/functions-js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.1.tgz",
+      "integrity": "sha512-bIR1Puae6W+1/MzPfYBWOG/SCWGo4B5CB7c0ZZksvliNEAzhxNBJ0UFKYINcGdGtxG8ZC+1xr3utWpNZNwnoRw==",
+      "requires": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "@supabase/gotrue-js": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.24.0.tgz",
+      "integrity": "sha512-ZsH4K5cbMTjfMytXaDYVYs9l9igmlZFxiwXn7J2IP/CklWR5qmLCma+dvat5rccPLITVkN6oAZbKxDzW+pEgCg==",
+      "requires": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "@supabase/postgrest-js": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.6.0.tgz",
+      "integrity": "sha512-HCphMC6KjtoaGcowSlkKRVKBOlNpmKWE2CwoumMwwsfhnRxplIy1zBiIYIL3zIYo/Bm20H/1C6enqjBeTvSwXg==",
+      "requires": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "@supabase/realtime-js": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
+      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
+      "requires": {
+        "@types/phoenix": "^1.5.4",
+        "@types/websocket": "^1.0.3",
+        "websocket": "^1.0.34"
+      }
+    },
+    "@supabase/storage-js": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
+      "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
+      "requires": {
+        "cross-fetch": "^3.1.5"
+      }
+    },
+    "@supabase/supabase-js": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.21.0.tgz",
+      "integrity": "sha512-FW3ZzBoc4orSgfX0dXrmJoXAcI/hiekmqXTkN64vjtUF2Urp3UjyAf71UTtV9Jl6ejHoe3K++e0+Rg9zKUJh5w==",
+      "requires": {
+        "@supabase/functions-js": "^2.1.0",
+        "@supabase/gotrue-js": "^2.23.0",
+        "@supabase/postgrest-js": "^1.1.1",
+        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/storage-js": "^2.5.1",
+        "cross-fetch": "^3.1.5"
+      }
+    },
     "@sveltejs/adapter-auto": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.0.0.tgz",
@@ -3823,6 +4147,16 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/node": {
+      "version": "18.16.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
+      "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q=="
+    },
+    "@types/phoenix": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
+      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA=="
+    },
     "@types/pug": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -3835,6 +4169,14 @@
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "@types/websocket": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
+      "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.56.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.56.0.tgz",
@@ -4096,6 +4438,14 @@
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
       "dev": true
     },
+    "bufferutil": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
+      "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -4187,6 +4537,14 @@
       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
       "dev": true
     },
+    "cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "requires": {
+        "node-fetch": "2.6.7"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4204,6 +4562,15 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4290,12 +4657,41 @@
       "integrity": "sha512-zx8hqumOqltKsv/MF50yvdAlPF9S/4PXbyfzJS6ZGhbddGkRegdwImmfSVqCkEziYzrIGZ/TlrzBND4FysfkDg==",
       "dev": true
     },
+    "es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "requires": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
     "es6-promise": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
       "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
       "dev": true
     },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "esbuild": {
       "version": "0.17.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.12.tgz",
@@ -4497,6 +4893,21 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "requires": {
+        "type": "^2.7.2"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.7.2",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+        }
+      }
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4791,6 +5202,11 @@
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "dev": true
     },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4988,6 +5404,24 @@
       "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "dev": true
     },
+    "next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+    },
+    "node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      }
+    },
+    "node-gyp-build": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ=="
+    },
     "node-releases": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
@@ -5561,6 +5995,11 @@
       "integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==",
       "dev": true
     },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -5584,6 +6023,11 @@
         }
       }
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5599,6 +6043,14 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "typescript": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz",
@@ -5633,6 +6085,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "requires": {
+        "node-gyp-build": "^4.3.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5659,6 +6119,48 @@
       "dev": true,
       "requires": {}
     },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "requires": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5686,6 +6188,11 @@
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
       "dev": true
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug=="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 3897704..8034b6f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "todayschoolmeal",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "vite dev --host",
@@ -33,6 +33,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@supabase/supabase-js": "^2.21.0",
     "@vercel/analytics": "^1.0.0",
     "lucide-svelte": "^0.171.0"
   }
diff --git a/src/app.html b/src/app.html
index e4ee3f7..02b1e82 100644
--- a/src/app.html
+++ b/src/app.html
@@ -45,8 +45,21 @@
 
     <title>오늘뭐먹지</title>
     %sveltekit.head%
+
+    <style>
+      body > div {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+      @supports (height: 100dvh) {
+        body > div {
+          min-height: 100dvh;
+        }
+      }
+    </style>
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
   <body data-sveltekit-preload-data="hover">
-    <div style="min-height: 100vh; display: flex; flex-direction: column">%sveltekit.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 26d5fa2..bb2e78b 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -52,70 +52,76 @@
 </div>
 {#if openDatepicker}
   <div
-    class="absolute top-0 left-0 h-screen w-screen bg-black/30"
+    class="absolute top-0 left-0 z-50 h-screen w-screen bg-black/30"
     transition:fade={{ duration: 200 }}
     on:click={() => (openDatepicker = false)}
     on:keypress={(e) => {
       if (e.key === 'Escape') openDatepicker = false
     }}
   />
-  <div
-    class="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 transform flex-col gap-3 rounded-2xl bg-white h-[453px] w-[384px]"
-    transition:slide={{ duration: 200 }}
-  >
-    <div class="flex items-center px-4 pt-4">
-      <button class="month-arrow-button" on:click={() => (month -= 1)}>
-        <ChevronLeft class="h-7 w-7" />
-      </button>
-      <div class="flex-grow text-center text-lg font-semibold">{year}년 {month}월</div>
-      <button class="month-arrow-button" on:click={() => (month += 1)}>
-        <ChevronRight class="h-7 w-7" />
-      </button>
-    </div>
-    <ul class="grid grow grid-cols-7 grid-rows-[auto_1fr_1fr_1fr_1fr_1fr] gap-3 px-4 text-center">
-      {#each ['일', '월', '화', '수', '목', '금', '토'] as day}
-        <li class="h-3 cursor-default bg-transparent text-sm text-neutral-400 hover:bg-transparent">
-          {day}
-        </li>
-      {/each}
-      {#each Array(placeholderDays == 7 ? 0 : placeholderDays).fill(0) as _}
-        <li class="placeholder" />
-      {/each}
-      {#each daysInMonth as day}
-        <li
-          class:active={year === date.getFullYear() &&
-            month === date.getMonth() + 1 &&
-            day === date.getDate()}
-          class:today={day === today.getDate() &&
-            month === today.getMonth() + 1 &&
-            year === today.getFullYear()}
-        >
-          <button
-            on:click={() => {
-              const newDate = new Date(date)
-              newDate.setMonth(month - 1)
-              newDate.setDate(day)
-              updateDate(newDate)
-            }}>{day}</button
-          >
-        </li>
-      {/each}
-    </ul>
-    <div class="footer">
-      <button
-        on:click={() => {
-          updateDate(new Date())
-        }}
+  <div class="absolute top-0 left-0 flex h-screen w-screen items-center justify-center">
+    <div
+      class="z-[60] flex flex-col gap-3 rounded-2xl bg-white"
+      transition:slide={{ duration: 200 }}
+    >
+      <div class="flex items-center px-4 pt-4">
+        <button class="month-arrow-button" on:click={() => (month -= 1)}>
+          <ChevronLeft class="h-7 w-7" />
+        </button>
+        <div class="flex-grow text-center text-lg font-semibold">{year}년 {month}월</div>
+        <button class="month-arrow-button" on:click={() => (month += 1)}>
+          <ChevronRight class="h-7 w-7" />
+        </button>
+      </div>
+      <ul
+        class="grid grow grid-cols-7 grid-rows-[auto_1fr_1fr_1fr_1fr_1fr] gap-x-2 gap-y-3 px-4 text-center"
       >
-        오늘
-      </button>
-      <button
-        on:click={() => {
-          openDatepicker = false
-        }}
-      >
-        확인
-      </button>
+        {#each ['일', '월', '화', '수', '목', '금', '토'] as day}
+          <li
+            class="h-3 cursor-default bg-transparent text-sm text-neutral-400 hover:bg-transparent"
+          >
+            {day}
+          </li>
+        {/each}
+        {#each Array(placeholderDays == 7 ? 0 : placeholderDays).fill(0) as _}
+          <li class="placeholder" />
+        {/each}
+        {#each daysInMonth as day}
+          <li
+            class:active={year === date.getFullYear() &&
+              month === date.getMonth() + 1 &&
+              day === date.getDate()}
+            class:today={day === today.getDate() &&
+              month === today.getMonth() + 1 &&
+              year === today.getFullYear()}
+          >
+            <button
+              on:click={() => {
+                const newDate = new Date(date)
+                newDate.setMonth(month - 1)
+                newDate.setDate(day)
+                updateDate(newDate)
+              }}>{day}</button
+            >
+          </li>
+        {/each}
+      </ul>
+      <div class="footer">
+        <button
+          on:click={() => {
+            updateDate(new Date())
+          }}
+        >
+          오늘
+        </button>
+        <button
+          on:click={() => {
+            openDatepicker = false
+          }}
+        >
+          확인
+        </button>
+      </div>
     </div>
   </div>
 {/if}
diff --git a/src/components/MealList.svelte b/src/components/MealList.svelte
index b35f7c7..bca948c 100644
--- a/src/components/MealList.svelte
+++ b/src/components/MealList.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+  import { createClient } from '@supabase/supabase-js'
+
+  const supabaseUrl = 'https://ojeqqmhebtcdwpenevaf.supabase.co'
+  const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
+  const supabase = createClient(supabaseUrl, supabaseKey)
+
   import { onMount } from 'svelte'
   import { selectedCity, selectedSchool } from '../stores'
 
@@ -6,8 +12,7 @@
   import SimpleInfo from './SimpleInfo.svelte'
   import Vegetable from './Vegetable.svelte'
 
-  import vegetableData from '../vegetableData'
-  import { replaceWithExcepts } from '../replaceWithExcepts'
+  import { getMeal, parseMeal } from '../fetchMeal'
 
   export let date: Date
 
@@ -26,39 +31,6 @@
 
   $: isSchoolSelected = schoolCode && cityCode
 
-  function parseMeal(mealString: string): Menu[] {
-    const regex = /(.*) \((.*)\)/
-    const meal = mealString.split('<br/>').map((menu) => {
-      const match = menu.match(regex)
-      let stringMenuName = match?.[1] || menu
-      const numString = match?.[2] || ' '
-      const allergies = numString
-        .split('.')
-        .map((n: string) => parseInt(n))
-        .filter(function (el) {
-          return !!el
-        })
-
-      vegetableData.forEach((vegetable, i) => {
-        stringMenuName = replaceWithExcepts(
-          stringMenuName,
-          vegetable.name,
-          vegetable.exceptions || [],
-          `[${vegetable.name}|${i}]`
-        )
-      })
-      const menuName = stringMenuName
-        .split(/(\[[ㄱ-힣]+\|\d+\])/g)
-        .filter((token) => !!token)
-        .map((token) => {
-          const match = token.match(/\[([ㄱ-힣]+)\|(\d+)\]/)
-          return match ? { string: match[1], infoIndex: parseInt(match[2]) } : { string: token }
-        })
-      return { name: menuName, allergies }
-    })
-    return meal
-  }
-
   interface MenuToken {
     string: string
     infoIndex?: number
@@ -72,28 +44,30 @@
   let error: boolean = false
   let errorCode: number = 0
   let meal: Menu[] = []
-  function updateMeal() {
+  async function updateMeal() {
     if (!schoolCode || !cityCode) return
-    fetch(
-      `https://open.neis.go.kr/hub/mealServiceDietInfo?KEY=${
-        import.meta.env.VITE_NEIS_API_KEY
-      }&Type=json&ATPT_OFCDC_SC_CODE=${cityCode}&SD_SCHUL_CODE=${schoolCode}&MLSV_YMD=${formattedDate}`
-    )
-      .then((res) => res.json())
-      .then((res) => {
-        if (!res.mealServiceDietInfo) {
-          error = true
-          errorCode = parseInt(res.RESULT.CODE.replace(/[^0-9]/g, ''))
-          return
-        }
-        meal = parseMeal(res.mealServiceDietInfo[1].row[0].DDISH_NM)
-        error = false
-        errorCode = 0
-      })
-      .catch(() => {
-        error = true
-        errorCode = -1
-      })
+    let res = await getMeal(cityCode, schoolCode, formattedDate)
+    let parsedMeal = parseMeal(res.body)
+    meal = parsedMeal
+    error = res.error
+    errorCode = res.errorCode
+  }
+
+  async function canBeStarred(menu: MenuToken[]): Promise<number> {
+    let name = menu.map((token) => token.string).join('')
+    const { data } = await supabase
+      .from('menus')
+      .select('name, total_survey, total_votes')
+      .eq('name', name)
+    const total_survey = data?.[0].total_survey
+    const total_votes = data?.[0].total_votes
+    if (data?.length == 0 || total_votes < 10) return 0
+    const ratio = total_votes == 0 ? 0 : total_votes / total_survey
+    if (ratio >= 0.9) return 4
+    else if (ratio >= 0.7) return 3
+    else if (ratio >= 0.5) return 2
+    else if (ratio >= 0.3) return 1
+    else return 0
   }
 
   onMount(() => {
@@ -124,6 +98,21 @@
               <span>{token.string}</span>
             {/if}
           {/each}
+          {#await canBeStarred(menu.name) then canBeStarred}
+            {#if canBeStarred}
+              <span class="ml-2">
+                {#if canBeStarred == 1}
+                  ⭐️
+                {:else if canBeStarred == 2}
+                  🌟
+                {:else if canBeStarred == 3}
+                  💫
+                {:else if canBeStarred == 4}
+                  🌠
+                {/if}
+              </span>
+            {/if}
+          {/await}
         </li>
       {/each}
     </ul>
diff --git a/src/components/MenuSurvey.svelte b/src/components/MenuSurvey.svelte
new file mode 100644
index 0000000..c4b0445
--- /dev/null
+++ b/src/components/MenuSurvey.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { createClient } from '@supabase/supabase-js'
+
+  const supabaseUrl = 'https://ojeqqmhebtcdwpenevaf.supabase.co'
+  const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
+  const supabase = createClient(supabaseUrl, supabaseKey)
+
+  import { fade, fly } from 'svelte/transition'
+  import { selectedCity, selectedSchool } from '../stores'
+
+  import { getMeal, removeAllergyInfo } from '../fetchMeal'
+
+  let schoolCode: number
+  selectedSchool.subscribe((value) => {
+    schoolCode = value
+  })
+  let cityCode: string
+  selectedCity.subscribe((value) => {
+    cityCode = value
+  })
+
+  let yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  let formattedDate = `${yesterday.getFullYear()}${String(yesterday.getMonth() + 1).padStart(
+    2,
+    '0'
+  )}${String(yesterday.getDate()).padStart(2, '0')}`
+
+  interface SurveyMenuToken {
+    name: string
+    voted: boolean
+  }
+
+  let meal: SurveyMenuToken[] = []
+  let error = false
+
+  async function fetchYesterdayMeal() {
+    if (!schoolCode || !cityCode) return
+    let mealResponse = await getMeal(cityCode, schoolCode, formattedDate)
+    if (mealResponse.error) {
+      error = true
+      return
+    }
+    meal = removeAllergyInfo(mealResponse.body).map((menu) => {
+      return {
+        name: menu,
+        voted: false
+      }
+    })
+  }
+  if (typeof window !== 'undefined' && localStorage.getItem('lastSurveyDate') != formattedDate) {
+    fetchYesterdayMeal()
+  }
+
+  function submitSurvey() {
+    meal.forEach(async (menu) => {
+      const { data } = await supabase
+        .from('menus')
+        .select('name, total_survey, total_votes')
+        .eq('name', menu.name)
+      if (data?.length === 0) {
+        await supabase
+          .from('menus')
+          .insert([{ name: menu.name, total_survey: 1, total_votes: menu.voted ? 1 : 0 }])
+      } else {
+        await supabase
+          .from('menus')
+          .update({
+            total_survey: data?.[0].total_survey + 1,
+            total_votes: menu.voted ? data?.[0].total_votes + 1 : data?.[0].total_votes
+          })
+          .eq('name', menu.name)
+      }
+    })
+    localStorage.setItem('lastSurveyDate', formattedDate)
+    showSurvey = false
+  }
+
+  let showSurvey = false
+
+  setTimeout(() => {
+    showSurvey = true
+  }, 2000)
+</script>
+
+{#if meal && !error && meal.length > 0 && showSurvey}
+  <div
+    class="absolute top-0 left-0 z-50 h-screen w-screen bg-black/30"
+    transition:fade={{ duration: 200 }}
+  >
+    <div class="absolute bottom-0 left-0 right-0 p-5">
+      <div
+        class="mx-auto flex w-full max-w-lg flex-col gap-5 rounded-xl bg-white p-5 shadow-lg"
+        transition:fly={{ y: 100 }}
+      >
+        <h1 class="text-center text-2xl font-semibold">
+          어제 급식 중 만족스러웠던 메뉴를 골라주세요.
+        </h1>
+        <ul class="grid grid-cols-2 gap-1">
+          {#each meal as menu, i}
+            <li>
+              <label
+                for="checkbox{i}"
+                class="flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-lg p-1 text-center text-xl transition duration-150"
+                class:bg-green-500={menu.voted}
+                class:text-white={menu.voted}
+                class:shadow-lg={menu.voted}
+              >
+                <input type="checkbox" id="checkbox{i}" class="hidden" bind:checked={menu.voted} />
+                <span>{menu.name}</span>
+              </label>
+            </li>
+          {/each}
+        </ul>
+        {#if !meal.some((menu) => menu.voted)}
+          <button
+            class="w-full rounded-xl py-3 text-xl text-neutral-400 hover:bg-neutral-100 hover:text-neutral-500"
+            on:click={() => {
+              localStorage.setItem('lastSurveyDate', formattedDate)
+              showSurvey = false
+            }}
+          >
+            무시하기
+          </button>
+        {:else}
+          <button
+            class="w-full rounded-xl bg-green-500 py-3 text-xl font-medium text-white hover:bg-green-600"
+            on:click={submitSurvey}
+          >
+            완료
+          </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/fetchMeal.ts b/src/fetchMeal.ts
new file mode 100644
index 0000000..c39b6d9
--- /dev/null
+++ b/src/fetchMeal.ts
@@ -0,0 +1,79 @@
+import { replaceWithExcepts } from './replaceWithExcepts'
+import vegetableData from './vegetableData'
+
+interface MenuToken {
+  string: string
+  infoIndex?: number
+}
+
+interface Menu {
+  name: MenuToken[]
+  allergies: number[]
+}
+
+interface Response {
+  body: string[]
+  error: boolean
+  errorCode: number
+}
+
+export function parseMeal(rawMeal: string[]): Menu[] {
+  const regex = /(.*) \((.*)\)/
+  const meal = rawMeal.map((menu) => {
+    const match = menu.match(regex)
+    let stringMenuName = match?.[1] || menu
+    const numString = match?.[2] || ' '
+    const allergies = numString
+      .split('.')
+      .map((n: string) => parseInt(n))
+      .filter(function (el) {
+        return !!el
+      })
+
+    vegetableData.forEach((vegetable, i) => {
+      stringMenuName = replaceWithExcepts(
+        stringMenuName,
+        vegetable.name,
+        vegetable.exceptions || [],
+        `[${vegetable.name}|${i}]`
+      )
+    })
+    const menuName = stringMenuName
+      .split(/(\[[ㄱ-힣]+\|\d+\])/g)
+      .filter((token) => !!token)
+      .map((token) => {
+        const match = token.match(/\[([ㄱ-힣]+)\|(\d+)\]/)
+        return match ? { string: match[1], infoIndex: parseInt(match[2]) } : { string: token }
+      })
+    return { name: menuName, allergies }
+  })
+  return meal
+}
+
+export function removeAllergyInfo(meal: string[]) {
+  return meal.map((menu) => menu.replace(/ +\([0-9. ]+\)/g, ''))
+}
+
+export async function getMeal(cityCode: string, schoolCode: number, date: string): Promise<Response> {
+  let meal: string[] = []
+  let error = false
+  let errorCode = 0
+  const res = await fetch(
+    `https://open.neis.go.kr/hub/mealServiceDietInfo?KEY=${
+      import.meta.env.VITE_NEIS_API_KEY
+    }&Type=json&ATPT_OFCDC_SC_CODE=${cityCode}&SD_SCHUL_CODE=${schoolCode}&MLSV_YMD=${date}`
+  )
+  const json = await res.json()
+
+  if (json.mealServiceDietInfo) {
+    meal = removeAllergyInfo(json.mealServiceDietInfo[1].row[0].DDISH_NM.split('<br/>'))
+    error = false
+    errorCode = 0
+  } else {
+    error = true
+    errorCode = parseInt(json.RESULT.CODE.replace(/[^0-9]/g, ''))
+  }
+
+  return { body: meal, error, errorCode }
+}
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 58d55fe..f26d379 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
   import MenuBar from '../components/MenuBar.svelte'
   import MealList from '../components/MealList.svelte'
   import DatePicker from '../components/DatePicker.svelte'
+  import MenuSurvey from '../components/MenuSurvey.svelte'
 
   let date: Date = new Date()
 
@@ -43,3 +44,4 @@
     date = newDate
   }}
 />
+<MenuSurvey />
diff --git a/src/routes/school-selection/+page.svelte b/src/routes/school-selection/+page.svelte
index d05977b..35db766 100644
--- a/src/routes/school-selection/+page.svelte
+++ b/src/routes/school-selection/+page.svelte
@@ -96,13 +96,13 @@
     {/if}
   </div>
   {#if searchedSchools.length}
-    <ul class="flex grow flex-col items-start gap-4 md:grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+    <ul class="flex flex-col items-start gap-4 md:grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
       {#each searchedSchools as school}
-        <li class="flex w-full flex-col items-start rounded-lg bg-white overflow-clip h-full">
+        <li class="flex w-full flex-col items-start rounded-lg bg-white overflow-clip">
           <span class="mx-5 mt-4 text-sm font-medium text-neutral-400">
             {school.ORG_RDNMA}
           </span>
-          <h2 class="mx-5 text-2xl font-semibold">{school.SCHUL_NM}</h2>
+          <h2 class="px-5 text-2xl font-semibold truncate max-w-full">{school.SCHUL_NM}</h2>
           <div class="grow"></div>
           <a
             href="/"