diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1ed4df6..a998251 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -26,6 +26,8 @@ export default defineNuxtConfig({
 	},
 
 	runtimeConfig: {
+		twitchAppClientId: '',
+		twitchAppClientSecret: '',
 		public: {
 			version,
 			userAgent: `${name}/${version} (${author.email})`,
@@ -39,9 +41,11 @@ export default defineNuxtConfig({
 		'@pinia-plugin-persistedstate/nuxt',
 		'@nuxtjs/i18n',
 		'@nuxtjs/seo',
+		'@nuxt/image',
 	],
 
 	srcDir: 'src',
+	serverDir: 'server',
 
 	components: [
 		{
@@ -75,4 +79,5 @@ export default defineNuxtConfig({
 	},
 
 	devtools: { enabled: true },
+	compatibilityDate: '2024-07-03',
 });
diff --git a/package-lock.json b/package-lock.json
index 3b15aad..4b343dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
 				"pinia": "^2.1.7"
 			},
 			"devDependencies": {
+				"@nuxt/image": "^1.7.0",
 				"@nuxtjs/i18n": "^8.3.1",
 				"@nuxtjs/seo": "^2.0.0-rc.11",
 				"@pinia-plugin-persistedstate/nuxt": "^1.2.1",
@@ -1614,6 +1615,17 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/@fastify/accept-negotiator": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-1.1.0.tgz",
+			"integrity": "sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/@fastify/busboy": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
@@ -2855,6 +2867,31 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@nuxt/image": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@nuxt/image/-/image-1.7.0.tgz",
+			"integrity": "sha512-zSj32bLgbV9AvLkLX0pF52J5KBfSyj0eSIdpXCtTJATSZlqgcJigoCvmabC1nbcMIp0SZ29Bu9+acQpGTQKz+g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nuxt/kit": "^3.11.2",
+				"consola": "^3.2.3",
+				"defu": "^6.1.4",
+				"h3": "^1.11.1",
+				"image-meta": "^0.2.0",
+				"node-fetch-native": "^1.6.4",
+				"ohash": "^1.1.3",
+				"pathe": "^1.1.2",
+				"std-env": "^3.7.0",
+				"ufo": "^1.5.3"
+			},
+			"engines": {
+				"node": "^14.16.0 || >=16.11.0"
+			},
+			"optionalDependencies": {
+				"ipx": "^2.1.0"
+			}
+		},
 		"node_modules/@nuxt/kit": {
 			"version": "3.12.3",
 			"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.12.3.tgz",
@@ -6721,6 +6758,49 @@
 			"license": "Apache-2.0",
 			"optional": true
 		},
+		"node_modules/bare-fs": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.1.tgz",
+			"integrity": "sha512-W/Hfxc/6VehXlsgFtbB5B4xFcsCl+pAh30cYhoFyXErf6oGrwjh8SwiPAdHgpmWonKuYpZgGywN0SXt7dgsADA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"dependencies": {
+				"bare-events": "^2.0.0",
+				"bare-path": "^2.0.0",
+				"bare-stream": "^2.0.0"
+			}
+		},
+		"node_modules/bare-os": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.0.tgz",
+			"integrity": "sha512-v8DTT08AS/G0F9xrhyLtepoo9EJBJ85FRSMbu1pQUlAf6A8T0tEEQGMVObWeqpjhSPXsE0VGlluFBJu2fdoTNg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true
+		},
+		"node_modules/bare-path": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
+			"integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"dependencies": {
+				"bare-os": "^2.1.0"
+			}
+		},
+		"node_modules/bare-stream": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.1.3.tgz",
+			"integrity": "sha512-tiDAH9H/kP+tvNO5sczyn9ZAA7utrSMobyDchsnyyXBuUe2FSQWbxhtuHB8jwpHYYevVo2UJpcmvvjrbHboUUQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"dependencies": {
+				"streamx": "^2.18.0"
+			}
+		},
 		"node_modules/base64-js": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -6774,6 +6854,61 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/bl": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+			"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"buffer": "^5.5.0",
+				"inherits": "^2.0.4",
+				"readable-stream": "^3.4.0"
+			}
+		},
+		"node_modules/bl/node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
+			}
+		},
+		"node_modules/bl/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/boolbase": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -7442,6 +7577,21 @@
 				"@codemirror/view": "^6.17.1"
 			}
 		},
+		"node_modules/color": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+			"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"color-convert": "^2.0.1",
+				"color-string": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=12.5.0"
+			}
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7460,6 +7610,18 @@
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"license": "MIT"
 		},
+		"node_modules/color-string": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+			"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"color-name": "^1.0.0",
+				"simple-swizzle": "^0.2.2"
+			}
+		},
 		"node_modules/color-support": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -7829,6 +7991,14 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/cssfilter": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+			"integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/cssnano": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.0.3.tgz",
@@ -7990,12 +8160,40 @@
 				}
 			}
 		},
+		"node_modules/decompress-response": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+			"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"mimic-response": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/deep-equal": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
 			"integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==",
 			"license": "MIT"
 		},
+		"node_modules/deep-extend": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -8280,6 +8478,17 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/end-of-stream": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+			"integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"once": "^1.4.0"
+			}
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.17.0",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
@@ -8580,6 +8789,17 @@
 				"url": "https://github.com/sindresorhus/execa?sponsor=1"
 			}
 		},
+		"node_modules/expand-template": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+			"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+			"dev": true,
+			"license": "(MIT OR WTFPL)",
+			"optional": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/externality": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/externality/-/externality-1.0.2.tgz",
@@ -8795,6 +9015,14 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/fs-constants": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+			"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/fs-extra": {
 			"version": "11.2.0",
 			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -8987,6 +9215,14 @@
 				"git-up": "^7.0.0"
 			}
 		},
+		"node_modules/github-from-package": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+			"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/glob": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
@@ -9475,6 +9711,35 @@
 				"url": "https://opencollective.com/ioredis"
 			}
 		},
+		"node_modules/ipx": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/ipx/-/ipx-2.1.0.tgz",
+			"integrity": "sha512-AVnPGXJ8L41vjd11Z4akIF2yd14636Klxul3tBySxHA6PKfCOQPxBDkCFK5zcWh0z/keR6toh1eg8qzdBVUgdA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@fastify/accept-negotiator": "^1.1.0",
+				"citty": "^0.1.5",
+				"consola": "^3.2.3",
+				"defu": "^6.1.4",
+				"destr": "^2.0.2",
+				"etag": "^1.8.1",
+				"h3": "^1.10.0",
+				"image-meta": "^0.2.0",
+				"listhen": "^1.5.6",
+				"ofetch": "^1.3.3",
+				"pathe": "^1.1.2",
+				"sharp": "^0.32.6",
+				"svgo": "^3.2.0",
+				"ufo": "^1.3.2",
+				"unstorage": "^1.10.1",
+				"xss": "^1.0.14"
+			},
+			"bin": {
+				"ipx": "bin/ipx.mjs"
+			}
+		},
 		"node_modules/ircv3": {
 			"version": "0.33.0",
 			"resolved": "https://registry.npmjs.org/ircv3/-/ircv3-0.33.0.tgz",
@@ -9502,6 +9767,14 @@
 				"url": "https://github.com/sponsors/brc-dd"
 			}
 		},
+		"node_modules/is-arrayish": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+			"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -10661,6 +10934,20 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/mimic-response": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+			"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/mini-svg-data-uri": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -10751,6 +11038,14 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/mkdirp-classic": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/mlly": {
 			"version": "1.7.1",
 			"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
@@ -10824,6 +11119,14 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/napi-build-utils": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+			"integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/natural-compare-lite": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
@@ -11384,6 +11687,20 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/node-abi": {
+			"version": "3.65.0",
+			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.65.0.tgz",
+			"integrity": "sha512-ThjYBfoDNr08AWx6hGaRbfPwxKV9kVzAzOzlLKbk2CuqXE2xnCh+cbAGnwM3t8Lq4v9rUB7VfondlkBckcJrVA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/node-addon-api": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.0.tgz",
@@ -13527,6 +13844,90 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"license": "MIT"
 		},
+		"node_modules/prebuild-install": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
+			"integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^2.0.0",
+				"expand-template": "^2.0.3",
+				"github-from-package": "0.0.0",
+				"minimist": "^1.2.3",
+				"mkdirp-classic": "^0.5.3",
+				"napi-build-utils": "^1.0.1",
+				"node-abi": "^3.3.0",
+				"pump": "^3.0.0",
+				"rc": "^1.2.7",
+				"simple-get": "^4.0.0",
+				"tar-fs": "^2.0.0",
+				"tunnel-agent": "^0.6.0"
+			},
+			"bin": {
+				"prebuild-install": "bin.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/prebuild-install/node_modules/chownr": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+			"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+			"dev": true,
+			"license": "ISC",
+			"optional": true
+		},
+		"node_modules/prebuild-install/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/prebuild-install/node_modules/tar-fs": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+			"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"chownr": "^1.1.1",
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^2.1.4"
+			}
+		},
+		"node_modules/prebuild-install/node_modules/tar-stream": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+			"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"bl": "^4.0.3",
+				"end-of-stream": "^1.4.1",
+				"fs-constants": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/pretty-bytes": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@@ -13619,6 +14020,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/pump": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+			"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -13692,6 +14105,31 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/rc": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+			"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+			"dev": true,
+			"license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+			"optional": true,
+			"dependencies": {
+				"deep-extend": "^0.6.0",
+				"ini": "~1.3.0",
+				"minimist": "^1.2.0",
+				"strip-json-comments": "~2.0.1"
+			},
+			"bin": {
+				"rc": "cli.js"
+			}
+		},
+		"node_modules/rc/node_modules/ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+			"dev": true,
+			"license": "ISC",
+			"optional": true
+		},
 		"node_modules/rc9": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
@@ -14448,6 +14886,39 @@
 			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
 			"license": "ISC"
 		},
+		"node_modules/sharp": {
+			"version": "0.32.6",
+			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+			"integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"dependencies": {
+				"color": "^4.2.3",
+				"detect-libc": "^2.0.2",
+				"node-addon-api": "^6.1.0",
+				"prebuild-install": "^7.1.1",
+				"semver": "^7.5.4",
+				"simple-get": "^4.0.1",
+				"tar-fs": "^3.0.4",
+				"tunnel-agent": "^0.6.0"
+			},
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/sharp/node_modules/node-addon-api": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+			"integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -14502,6 +14973,55 @@
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
 			"license": "ISC"
 		},
+		"node_modules/simple-concat": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+			"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT",
+			"optional": true
+		},
+		"node_modules/simple-get": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+			"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"decompress-response": "^6.0.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
+			}
+		},
 		"node_modules/simple-git": {
 			"version": "3.25.0",
 			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.25.0.tgz",
@@ -14518,6 +15038,17 @@
 				"url": "https://github.com/steveukx/git-js?sponsor=1"
 			}
 		},
+		"node_modules/simple-swizzle": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+			"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"is-arrayish": "^0.3.1"
+			}
+		},
 		"node_modules/sirv": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
@@ -14754,6 +15285,17 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/strip-json-comments": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/strip-literal": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
@@ -15219,6 +15761,22 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/tar-fs": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+			"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			},
+			"optionalDependencies": {
+				"bare-fs": "^2.1.1",
+				"bare-path": "^2.1.0"
+			}
+		},
 		"node_modules/tar-stream": {
 			"version": "3.1.7",
 			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
@@ -15432,6 +15990,20 @@
 				"node": ">=0.6.x"
 			}
 		},
+		"node_modules/tunnel-agent": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+			"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"dependencies": {
+				"safe-buffer": "^5.0.1"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/type-fest": {
 			"version": "3.13.1",
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
@@ -17078,6 +17650,32 @@
 				}
 			}
 		},
+		"node_modules/xss": {
+			"version": "1.0.15",
+			"resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
+			"integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"commander": "^2.20.3",
+				"cssfilter": "0.0.10"
+			},
+			"bin": {
+				"xss": "bin/xss"
+			},
+			"engines": {
+				"node": ">= 0.10.0"
+			}
+		},
+		"node_modules/xss/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/y18n": {
 			"version": "5.0.8",
 			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 82c7884..afac873 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
 		"postinstall": "nuxt prepare"
 	},
 	"devDependencies": {
+		"@nuxt/image": "^1.7.0",
 		"@nuxtjs/i18n": "^8.3.1",
 		"@nuxtjs/seo": "^2.0.0-rc.11",
 		"@pinia-plugin-persistedstate/nuxt": "^1.2.1",
diff --git a/server/api/v1/twitch/badges.get.ts b/server/api/v1/twitch/badges.get.ts
new file mode 100644
index 0000000..5951046
--- /dev/null
+++ b/server/api/v1/twitch/badges.get.ts
@@ -0,0 +1,58 @@
+import type {
+	ApiClient,
+	HelixChatBadgeSet,
+	HelixChatBadgeVersion,
+} from '@twurple/api';
+
+export default defineEventHandler(async (event) => {
+	// get query params
+	const { id, name } = getQuery(event);
+
+	// get twitch api (twurple) client
+	const twitchAPI: ApiClient = event.context.twitchAPI;
+
+	// failed to connect
+	if (!twitchAPI)
+		throw createError({
+			statusCode: 500,
+			statusMessage: 'Internal Server Error',
+			data: 'Unable to reach Twitch API.',
+		});
+
+	// init user data
+	let user;
+	let badgeData: HelixChatBadgeSet[];
+
+	// ID provided
+	if (id) user = await twitchAPI.users.getUserById(Number(id));
+	// only name provided
+	else if (name) user = await twitchAPI.users.getUserByName(name as string);
+
+	// channel badges
+	if (user) badgeData = await twitchAPI.chat.getChannelBadges(user.id);
+	// global badges
+	else badgeData = await twitchAPI.chat.getGlobalBadges();
+
+	// format data
+	let badges: IChatBadgeList = {};
+	badgeData.forEach((badgeSet: HelixChatBadgeSet, index: number) => {
+		// init badge
+		badges[badgeSet.id] = {};
+
+		// collect all badge versions
+		badgeSet.versions.forEach((badgeVersion: HelixChatBadgeVersion) => {
+			badges[badgeSet.id][badgeVersion.id] = {
+				title: badgeVersion.title,
+				description: badgeVersion.description,
+				url: badgeVersion.getImageUrl(1),
+				previewUrl: badgeVersion.getImageUrl(4),
+				clickAction: badgeVersion.clickAction,
+				clickUrl: badgeVersion.clickUrl,
+			};
+		});
+	});
+
+	// badge data retrieved
+	if (badges) return { data: badges };
+	else return { data: null };
+});
diff --git a/server/api/v1/twitch/stream.get.ts b/server/api/v1/twitch/stream.get.ts
new file mode 100644
index 0000000..bad21a7
--- /dev/null
+++ b/server/api/v1/twitch/stream.get.ts
@@ -0,0 +1,54 @@
+import type { ApiClient } from '@twurple/api';
+
+export default defineEventHandler(async (event) => {
+	// get query params
+	const { id } = getQuery(event);
+
+	// get twitch api (twurple) client
+	const twitchAPI: ApiClient = event.context.twitchAPI;
+
+	// failed to connect
+	if (!twitchAPI)
+		throw createError({
+			statusCode: 500,
+			statusMessage: 'Internal Server Error',
+			data: 'Unable to reach Twitch API.',
+		});
+
+	// get user
+	let user = await twitchAPI.users.getUserById(Number(id));
+
+	// no user found
+	if (!user)
+		throw createError({
+			statusCode: 400,
+			statusMessage: 'Bad Request',
+			data: 'Specified user does not seem to exist.',
+		});
+
+	// get stream
+	let stream = await user?.getStream();
+
+	// stream data retrieved
+	if (stream)
+		return {
+			data: {
+				id: stream.id,
+				gameId: stream.gameId,
+				gameName: stream.gameName,
+				isMature: stream.isMature,
+				language: stream.language,
+				startDate: stream.startDate,
+				tags: stream.tags,
+				thumbnailUrl: stream.thumbnailUrl,
+				title: stream.title,
+				type: stream.type,
+				userDisplayName: stream.userDisplayName,
+				userId: stream.userId,
+				userName: stream.userName,
+				viewers: stream.viewers,
+			},
+		};
+	// not live
+	else return { data: null };
+});
diff --git a/server/api/v1/twitch/user.get.ts b/server/api/v1/twitch/user.get.ts
new file mode 100644
index 0000000..14ab043
--- /dev/null
+++ b/server/api/v1/twitch/user.get.ts
@@ -0,0 +1,55 @@
+import type { ApiClient } from '@twurple/api';
+
+export default defineEventHandler(async (event) => {
+	// get query params
+	const { id, name } = getQuery(event);
+
+	// get twitch api (twurple) client
+	const twitchAPI: ApiClient = event.context.twitchAPI;
+
+	// failed to connect
+	if (!twitchAPI)
+		throw createError({
+			statusCode: 500,
+			statusMessage: 'Internal Server Error',
+			data: 'Unable to reach Twitch API.',
+		});
+
+	// init user data
+	let user;
+
+	// ID provided
+	if (id) user = await twitchAPI.users.getUserById(Number(id));
+	// only name provided
+	else if (name) user = await twitchAPI.users.getUserByName(name as string);
+	// error
+	else
+		throw createError({
+			statusCode: 400,
+			statusMessage: 'Bad Request',
+			data: 'Missing "id" or "name" query parameters.',
+		});
+
+	// user data retrieved
+	if (user)
+		return {
+			data: {
+				id: user.id,
+				broadcasterType: user.broadcasterType,
+				creationDate: user.creationDate,
+				description: user.description,
+				displayName: user.displayName,
+				name: user.name,
+				offlinePlaceholderUrl: user.offlinePlaceholderUrl,
+				profilePictureUrl: user.profilePictureUrl,
+				type: user.type,
+			},
+		};
+	// user not found
+	else
+		throw createError({
+			statusCode: 400,
+			statusMessage: 'Bad Request',
+			data: 'Specified user does not seem to exist.',
+		});
+});
diff --git a/server/middleware/twurple.ts b/server/middleware/twurple.ts
new file mode 100644
index 0000000..8f234f9
--- /dev/null
+++ b/server/middleware/twurple.ts
@@ -0,0 +1,18 @@
+import { AppTokenAuthProvider } from '@twurple/auth';
+import { ApiClient } from '@twurple/api';
+
+// get twitch app client ID and secret
+const { twitchAppClientId, twitchAppClientSecret } = useRuntimeConfig();
+
+// init twurple client
+const twurpleAuthProvider = new AppTokenAuthProvider(
+	twitchAppClientId,
+	twitchAppClientSecret
+);
+const twurpleClient = new ApiClient({ authProvider: twurpleAuthProvider });
+
+// provide twitch api (twurple) client to server routes
+export default defineEventHandler((event) => {
+	// attach the client to the event context
+	event.context.twitchAPI = twurpleClient;
+});
diff --git a/server/tsconfig.json b/server/tsconfig.json
new file mode 100644
index 0000000..d1dabed
--- /dev/null
+++ b/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+	"extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/src/app.config.ts b/src/app.config.ts
index 808d6af..f6c2a42 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -35,8 +35,7 @@ export default defineAppConfig({
 			variant: {
 				inverse:
 					'text-white dark:text-black ring-0 bg-gray-900 hover:bg-gray-800 dark:bg-gray-100 dark:hover:bg-gray-50',
-				hidden:
-					'hidden',
+				hidden: 'hidden',
 			},
 			square: {
 				lg: 'p-2',
@@ -55,4 +54,5 @@ export default defineAppConfig({
 
 	// settings
 	sidebarSlideDuration: '500',
+	maxChatMessages: 400,
 });
diff --git a/src/app.vue b/src/app.vue
index 6faa335..abcc749 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -21,6 +21,7 @@ const preventContextMenu = (event: MouseEvent) => event.preventDefault();
 
 <template>
 	<div class="h-screen">
+		<NuxtLoadingIndicator />
 		<NuxtLayout>
 			<NuxtPage />
 		</NuxtLayout>
@@ -75,9 +76,12 @@ const preventContextMenu = (event: MouseEvent) => event.preventDefault();
 
 /* layer priorities */
 .overlay-layer {
-	@apply z-30;
+	@apply z-40;
 }
 .sidebar-layer {
+	@apply z-30;
+}
+.content-layer {
 	@apply z-20;
 }
 .header-layer {
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index 60a372a..c8d081d 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -4,14 +4,15 @@
 		"toggle_button": "Toggle Sidebar",
 		"channel": {
 			"dropdown": {
+				"visit_stream": "View Stream",
 				"pin": "Pin Channel",
 				"unpin": "Unpin Channel",
-				"delete": "Remove Channel"
+				"remove": "Remove Channel"
 			}
 		},
 		"add_channel_button": "Add Channel",
 		"account": {
-			"button": "Account Settings",
+			"button": "Not Logged In",
 			"dropdown": {
 				"settings": "Settings",
 				"sign_in": "Sign In",
@@ -71,5 +72,8 @@
 				"add": "Add Channel"
 			}
 		}
+	},
+	"indicator": {
+		"live": "LIVE"
 	}
 }
diff --git a/src/components/badges/ChatBadge.vue b/src/components/badges/ChatBadge.vue
new file mode 100644
index 0000000..f0f3b91
--- /dev/null
+++ b/src/components/badges/ChatBadge.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// properties
+const props = defineProps<{
+	title: string;
+	url: string;
+	previewUrl: string;
+}>();
+</script>
+
+<template>
+	<!-- Hover Tooltip -->
+	<UTooltip
+		:openDelay="800"
+		:popper="{ placement: 'right' }"
+		:ui="{
+			width: 'w-24',
+			background: 'opacity-100',
+			base: 'h-fit',
+		}"
+	>
+		<!-- Badge -->
+		<NuxtImg :src="props.url" class="inline pr-2" />
+
+		<!-- Custom Tooltip Content -->
+		<template #text>
+			<div
+				class="flex flex-col items-center justify-center text-center gap-y-2 p-2"
+			>
+				<NuxtImg :src="props.previewUrl" />
+				<p class="text-balance text-xs">{{ title }}</p>
+			</div>
+		</template>
+	</UTooltip>
+</template>
diff --git a/src/components/badges/LiveBadge.vue b/src/components/badges/LiveBadge.vue
new file mode 100644
index 0000000..8add006
--- /dev/null
+++ b/src/components/badges/LiveBadge.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// localization
+const localize = useI18n().t;
+</script>
+
+<template>
+	<span
+		class="rounded-[0.2rem] px-[3px] text-xs bg-live text-white font-bold text-center"
+	>
+		{{ localize('indicator.live') }}
+	</span>
+</template>
diff --git a/src/components/buttons/AccountButton.vue b/src/components/buttons/AccountButton.vue
index 64235a4..cdea5b2 100644
--- a/src/components/buttons/AccountButton.vue
+++ b/src/components/buttons/AccountButton.vue
@@ -31,14 +31,14 @@ const dropdownContentAuth = [
 const dropdownContentAnon = [
 	[
 		{
-			label: localize('sidebar.account.dropdown.settings'),
-			icon: 'i-heroicons-cog-8-tooth',
+			label: localize('sidebar.account.dropdown.sign_in'),
+			icon: 'i-heroicons-arrow-left-on-rectangle',
 		},
 	],
 	[
 		{
-			label: localize('sidebar.account.dropdown.sign_in'),
-			icon: 'i-heroicons-arrow-left-on-rectangle',
+			label: localize('sidebar.account.dropdown.settings'),
+			icon: 'i-heroicons-cog-8-tooth',
 		},
 	],
 ];
@@ -62,7 +62,7 @@ const dropdownContentAnon = [
 		:popper="{ placement: 'right' }"
 		show
 	>
-		<!-- Account Settings Button Trigger -->
+		<!-- Button Trigger -->
 		<Button :label="localize('sidebar.account.button')" variant="hidden">
 			<template #content>
 				<!-- Avatar Icon -->
diff --git a/src/components/buttons/ChannelButton.vue b/src/components/buttons/ChannelButton.vue
new file mode 100644
index 0000000..fd977c3
--- /dev/null
+++ b/src/components/buttons/ChannelButton.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+// localization
+const localize = useI18n().t;
+
+// properties
+const props = defineProps<{
+	channel: {
+		name: string;
+		avatarURL: string;
+		live: boolean;
+		platform: {
+			twitch?: string;
+		};
+	};
+}>();
+
+// dropdown contents
+const dropdownContentAnon = [
+	[
+		{
+			label: localize('sidebar.channel.dropdown.visit_stream'),
+			icon: 'i-ic-outline-ondemand-video',
+			to: 'https://www.twitch.tv/' + props.channel.name,
+			noRel: true,
+			target: '_blank',
+		},
+	],
+	[
+		{
+			label: localize('sidebar.channel.dropdown.pin'),
+			icon: 'i-ic-round-push-pin',
+		},
+	],
+	[
+		{
+			label: localize('sidebar.channel.dropdown.remove'),
+			icon: 'i-ic-baseline-remove-circle',
+		},
+	],
+];
+
+// state
+const dropdownOpen = ref(false);
+</script>
+
+<template>
+	<!-- Account Settings Dropdown -->
+	<UDropdown
+		:items="dropdownContentAnon"
+		:ui="{
+			container: 'pl-2',
+			background: 'bg-secondary-color',
+			ring: '',
+			divide: '',
+			item: {
+				active: 'bg-primary-color',
+				disabled: 'cursor-text select-text',
+			},
+			padding: 'p-1',
+		}"
+		:popper="{ placement: 'right' }"
+		show
+		v-model:open="dropdownOpen"
+	>
+		<!-- Button Trigger -->
+		<Button
+			:label="props.channel.name"
+			variant="hidden"
+			:to="'/channel/twitch/' + props.channel.platform.twitch"
+			@click.right="
+				() => {
+					dropdownOpen = true;
+				}
+			"
+		>
+			<template #content>
+				<!-- Avatar Icon -->
+				<UAvatar
+					:src="props.channel.avatarURL"
+					:ui="{
+						rounded: 'rounded-3xl',
+						wrapper:
+							'relative inline-flex items-center justify-center flex-shrink-0',
+						size: {
+							sm: 'h-9 w-9 text-base',
+						},
+					}"
+					:class="
+						'hover:scale-[1.1] duration-100 ' +
+						(props.channel.live
+							? 'ring-2 ring-live ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-900'
+							: 'ring-0')
+					"
+				/>
+			</template>
+
+			<template #tooltip>
+				<div class="flex gap-x-2">
+					{{ props.channel.name }}
+					<LiveBadge v-if="props.channel.live" />
+				</div>
+			</template>
+		</Button>
+
+		<!-- Dropdown Items -->
+		<template #item="{ item }">
+			<UIcon :name="item.icon" class="h-5 w-5" />
+			<span class="truncate">{{ item.label }}</span>
+		</template>
+	</UDropdown>
+</template>
diff --git a/src/components/containers/ChatContainer.vue b/src/components/containers/ChatContainer.vue
new file mode 100644
index 0000000..5163f78
--- /dev/null
+++ b/src/components/containers/ChatContainer.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+// localization
+const localize = useI18n().t;
+
+// get state
+import useStore from '~/store';
+const store = useStore();
+
+// properties
+const props = defineProps<{
+	user: ITwitchUser;
+}>();
+
+// emits
+const emit = defineEmits(['onChatConnection', 'onChatDisconnection']);
+
+// chat container reference and state
+const chatRef: Ref<HTMLElement | null> = ref(null);
+const isChatAnchored: Ref<boolean> = ref(true);
+
+// methods
+const scrollToBottom = () => {
+	// scroll to bottom of chat smoothly
+	chatRef.value?.scrollTo({
+		top: chatRef.value?.scrollHeight,
+		left: 0,
+		behavior: 'smooth',
+	});
+
+	// anchor the chat
+	isChatAnchored.value = true;
+};
+const checkSnappedToBottomOfChat = () => {
+	// if currently at the bottom of the chat, snap to it
+	if (chatRef.value) {
+		isChatAnchored.value =
+			chatRef.value.scrollHeight - chatRef.value.clientHeight <=
+			chatRef.value.scrollTop + 100;
+	}
+};
+const disconnectTwitchChatClient = () => {
+	// remove listeners
+	twitchChatClient.removeListener(onConnect);
+	twitchChatClient.removeListener(onDisconnect);
+	twitchChatClient.removeListener(onMessage);
+
+	// disconnect client
+	twitchChatClient.quit();
+};
+
+// messages
+import { ChatClient, type ChatMessage } from '@twurple/chat';
+import type { Listener } from '@d-fischer/typed-event-emitter';
+const messages: Ref<{ meta: ChatMessage; content: string }[]> = ref([]);
+const maxChatMessages = ref(useAppConfig().maxChatMessages);
+let twitchChatClient: ChatClient,
+	onConnect: Listener,
+	onDisconnect: Listener,
+	onMessage: Listener;
+let badges: Ref<IChatBadgeList> = ref(store.globalBadges);
+
+// events
+const onChatScroll = () => {
+	checkSnappedToBottomOfChat();
+};
+onBeforeRouteLeave(() => {
+	disconnectTwitchChatClient();
+});
+onBeforeRouteUpdate(() => {
+	disconnectTwitchChatClient();
+});
+onMounted(() => {
+	// connect anonymously to twitch chat
+	twitchChatClient = new ChatClient({ channels: [props.user.name] });
+	twitchChatClient.connect();
+
+	// connect event
+	onConnect = twitchChatClient.onConnect(() => {
+		emit('onChatConnection');
+	});
+
+	// disconnect event
+	onDisconnect = twitchChatClient.onDisconnect(() =>
+		emit('onChatDisconnection')
+	);
+
+	// message event
+	onMessage = twitchChatClient.onMessage(
+		async (
+			_channel: string,
+			_user: string,
+			text: string,
+			msg: ChatMessage
+		) => {
+			// // max messages (remove oldest message)
+			// if (messages.value.length >= maxChatMessages.value)
+			// 	messages.value.shift();
+
+			// add new message to list
+			messages.value.push({ meta: msg, content: text });
+
+			// scroll to bottom
+			if (isChatAnchored.value === true) {
+				await nextTick();
+				scrollToBottom();
+			}
+		}
+	);
+
+	// get stream data (async)
+	$fetch('/api/v1/twitch/stream', {
+		params: {
+			id: props.user.id,
+		},
+	}).then((response) => {
+		// store stream data
+		// if (response.data) stream.value = response.data;
+	});
+
+	// get channel badge data (async)
+	$fetch('/api/v1/twitch/badges', {
+		params: {
+			id: props.user.id,
+		},
+	}).then((response) => {
+		// merge and overwrite badge data
+		badges.value = {
+			...badges.value,
+			...(response.data as IChatBadgeList),
+		};
+	});
+});
+</script>
+
+<template>
+	<!-- Chat -->
+	<div
+		class="w-full h-full flex flex-col overflow-y-scroll"
+		ref="chatRef"
+		@scroll="onChatScroll"
+	>
+		<!-- Spacer -->
+		<span class="h-full" />
+
+		<!-- Messages -->
+		<template v-for="(message, index) of messages">
+			<MessageContainer
+				v-if="index >= Math.max(messages.length - maxChatMessages, 0)"
+				:key="index"
+				:message="message"
+				:index="index"
+				:badgeList="badges"
+			/>
+		</template>
+	</div>
+
+	<!-- Chat Overlay -->
+	<div
+		class="absolute w-full h-full bottom-0 overlay-layer pointer-events-none"
+	>
+		<!-- Buttons -->
+		<div class="w-full h-full flex justify-end items-end pr-5 pb-5">
+			<!-- Scroll to Bottom -->
+			<Button
+				v-if="!isChatAnchored"
+				:label="localize('chat.overlay.scroll_to_bottom_button')"
+				@click="scrollToBottom"
+				icon="i-material-symbols-arrow-circle-down-outline"
+				class="opacity-50 pointer-events-auto"
+				size="xl"
+			/>
+		</div>
+	</div>
+</template>
diff --git a/src/components/containers/MessageContainer.vue b/src/components/containers/MessageContainer.vue
new file mode 100644
index 0000000..139bf1a
--- /dev/null
+++ b/src/components/containers/MessageContainer.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// types
+import type { ChatMessage } from '@twurple/chat';
+
+// get properties
+const props = defineProps<{
+	message: {
+		meta: ChatMessage;
+		content: string;
+	};
+	index: number;
+	badgeList: IChatBadgeList;
+}>();
+
+// format badges
+let badges: { [key: string]: number } = {};
+if (props.message.meta.tags.get('badges'))
+	(props.message.meta.tags.get('badges') as string)
+		.split(',')
+		.forEach((value) => {
+			const badgeDataSplit = value.split('/') as string[];
+			if (props.badgeList[badgeDataSplit[0]][badgeDataSplit[1]])
+				badges[badgeDataSplit[0]] = Number(badgeDataSplit[1]);
+		});
+
+// get URLs in message
+// let urls: string[] = [];
+// let message = URI.withinString(props.message.content, (url) => {
+// 	// save link
+// 	urls.push(url);
+
+// 	// remove link from message content
+// 	return '';
+// });
+let message = props.message.content;
+</script>
+
+<template>
+	<div
+		:class="[
+			// first message: highlight background
+			props.message.meta.tags.get('first-msg') == '1'
+				? 'bg-yellow-50 dark:bg-stone-700'
+				: // alternate colors for each row/message
+				index % 2 === 0
+				? 'bg-secondary-color'
+				: '', // empty/transparent (inherit background)
+			'pl-5',
+		]"
+	>
+		<a href="#" @click.prevent="console.log(props.message.meta.tags)">
+			<!-- Badges -->
+			<ChatBadge
+				v-if="badges"
+				v-for="(version, id) in badges"
+				:title="props.badgeList[id][version].title"
+				:url="props.badgeList[id][version].url"
+				:preview-url="props.badgeList[id][version].previewUrl"
+				class="inline"
+			/>
+
+			<!-- Name -->
+			<p
+				:style="{
+					color: props.message.meta.tags.get('color')
+						? props.message.meta.tags.get('color')
+						: '#b9b9b9',
+				}"
+				class="dark:mix-blend-plus-lighter inline"
+			>
+				{{ props.message.meta.tags.get('display-name') }}:
+			</p>
+
+			<!-- Message Content -->
+			<p class="inline">
+				{{ message }}
+				<!-- <template v-for="url of urls">
+					<NuxtLink :href="url" target="_blank">
+						<div
+							class="w-[200px] h-[20px] bg-blue-600 bg-opacity-35 rounded flex items-center overflow-hidden pl-3"
+						>
+							<p class="text-nowrap whitespace-nowrap">
+								<Icon
+									name="material-symbols:link-rounded"
+									class="w-[20px] h-[20px] text-white"
+								/>
+								{{ url }}
+							</p>
+						</div>
+					</NuxtLink>
+				</template> -->
+			</p>
+		</a>
+		<!-- <div v-if="urls.length > 0" class="my-2">
+			<iframe
+				width="300"
+				height="80"
+				class="rounded bg-black"
+				style="background: none transparent"
+				frameborder="0"
+				allowtransparency="true"
+				allow="encrypted-media;"
+				src="https://open.spotify.com/embed?uri=https://open.spotify.com/track/0YkwVgruz0osdpSrm1vywm?si=da1783e36234479c"
+			/>
+		</div> -->
+	</div>
+</template>
diff --git a/src/components/nav/Sidebar.vue b/src/components/nav/Sidebar.vue
index 79832f2..1565e63 100644
--- a/src/components/nav/Sidebar.vue
+++ b/src/components/nav/Sidebar.vue
@@ -13,14 +13,14 @@ const sidebarSlideDuration = ref(useAppConfig().sidebarSlideDuration);
 		<!-- Sidebar Container -->
 		<aside
 			:class="[
-				'w-10 h-full py-7 flex flex-col items-center bg-secondary-color sidebar-slide-transition sidebar-layer shadow-md',
+				'w-10 h-full py-4 flex flex-col items-center bg-secondary-color sidebar-slide-transition sidebar-layer shadow-md',
 				// slide to left (off screen) when not expanded
 				!store.settings.isSidebarExpanded ? 'sidebar-offset' : '',
 			]"
 		>
 			<!-- Saved Channels -->
 			<div
-				class="grow w-full pt-3 flex overflow-y-scroll scrollbar-hidden justify-center"
+				class="grow w-full flex overflow-y-scroll scrollbar-hidden justify-center"
 			>
 				<slot name="channels" />
 			</div>
diff --git a/src/error.vue b/src/error.vue
index 13b5c60..34ae3eb 100644
--- a/src/error.vue
+++ b/src/error.vue
@@ -1,4 +1,31 @@
 <script setup lang="ts">
-clearError({ redirect: '/' });
+import type { NuxtError } from '#app';
+
+// get error
+const props = defineProps({
+	error: Object as () => NuxtError,
+});
+
+// get url
+const url = (props.error as any).url as string;
+
+// redirect to index if not api route
+if (!(url && url.startsWith('/api/'))) clearError({ redirect: '/' });
 </script>
-<template></template>
+
+<template>
+	<!-- Full Width/Height, Centered Left/Center -->
+	<div
+		class="h-screen w-screen flex flex-col justify-center items-left gap-y-10 p-8"
+	>
+		<!-- Code, Message, Data -->
+		<div class="flex flex-col gap-y-4">
+			<h1 class="text-8xl">{{ props.error?.statusCode }}</h1>
+			<h2 class="text-4xl">{{ props.error?.statusMessage }}</h2>
+			<p>{{ props.error?.data }}</p>
+		</div>
+
+		<!-- Raw -->
+		<p class="opacity-90">{{ JSON.stringify(props.error, null, 4) }}</p>
+	</div>
+</template>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 89c735e..403d9b9 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -47,17 +47,24 @@ const sidebarToggleButtonStyle = computed(() => {
 	<!-- prevent page from expanding past size of screen -->
 	<div class="static h-full flex flex-row overflow-hidden">
 		<!-- Sidebar -->
-		<Sidebar>
+		<Sidebar :open="store.settings.isSidebarExpanded">
 			<!-- Channels -->
 			<template #channels>
 				<ul>
 					<!-- Channel Buttons -->
-					<!-- <li
-						v-for="(channel, _index) in store.user.channels"
-						class="flex justify-center mb-3"
-					>
-						<ChannelButton :providedChannel="channel" />
-					</li> -->
+					<li class="flex justify-center mb-3">
+						<ChannelButton
+							:channel="{
+								name: 'pokelawls',
+								avatarURL:
+									'https://cdn.7tv.app/pp/611ea25d3990c04e921506f7/743b9aca64cc46b49b16bb2c0a1c5f44',
+								live: false,
+								platform: {
+									twitch: 'pokelawls',
+								},
+							}"
+						/>
+					</li>
 
 					<!-- Add Channel Button -->
 					<li class="flex justify-center">
@@ -125,10 +132,8 @@ const sidebarToggleButtonStyle = computed(() => {
 		</Sidebar>
 
 		<!-- Current View (Page) -->
-		<KeepAlive>
-			<div class="static h-full w-fit grow scrollbar-hidden">
-				<slot />
-			</div>
-		</KeepAlive>
+		<div class="static h-full w-fit grow scrollbar-hidden">
+			<slot />
+		</div>
 	</div>
 </template>
diff --git a/src/pages/channel.vue b/src/pages/channel.vue
index 1eb570a..e01ce3f 100644
--- a/src/pages/channel.vue
+++ b/src/pages/channel.vue
@@ -5,12 +5,7 @@ const localize = useI18n().t;
 // get route params
 const params = useRoute().params;
 
-// set title
-useHead({
-	title: params.name ? `${params.name}` : '',
-});
-
-// route param validation
+// route validation
 definePageMeta({
 	validate: async (route) => {
 		return (
@@ -27,143 +22,53 @@ definePageMeta({
 	},
 });
 
-// chat container reference
-const chatRef: Ref<HTMLElement | null> = ref(null);
-
-// snapped to bottom of chat container
-const isSnappedToBottomOfChat: Ref<boolean> = ref(true);
-
-// messages
-const messages: Ref<{ meta: ChatMessage; content: string }[]> = ref([]);
-
-// methods
-const scrollToBottom = () => {
-	// scroll to bottom of chat smoothly
-	chatRef.value?.scrollTo({
-		top: chatRef.value?.scrollHeight,
-		left: 0,
-		behavior: 'smooth',
-	});
-
-	// set as snapped
-	isSnappedToBottomOfChat.value = true;
-};
-const checkSnappedToBottomOfChat = () => {
-	// if currently at the bottom of the chat, snap to it
-	if (chatRef.value) {
-		isSnappedToBottomOfChat.value =
-			chatRef.value?.scrollHeight - chatRef.value?.clientHeight <=
-			chatRef.value?.scrollTop + 100;
-	}
-};
-const disconnectTwitchChatClient = () => {
-	// remove listeners
-	twitchChatClient.removeListener(onConnect);
-	twitchChatClient.removeListener(onDisconnect);
-	twitchChatClient.removeListener(onMessage);
-
-	// disconnect client
-	twitchChatClient.quit();
+// page title
+const title = ref();
+useHead({
+	title,
+});
+const updatePageTitle = () => {
+	// update title
+	title.value = (stream.value ? '🔴 ' : '') + user.value?.displayName;
 };
 
-// connected to twitch chat
+// state of twitch chat connection
 const connectionState: Ref<
 	'loading' | 'connected' | 'not found' | 'disconnected'
 > = ref('loading');
 
-// twurple twitch chat
-import { ChatClient, ChatMessage } from '@twurple/chat';
-import type { Listener } from '@d-fischer/typed-event-emitter';
-let twitchChatClient: ChatClient,
-	onConnect: Listener,
-	onDisconnect: Listener,
-	onMessage: Listener;
-
-// run when page loads
-onMounted(async () => {
-	// connect anonymously to twitch chat
-	twitchChatClient = new ChatClient({ channels: [`${params.name}`] });
-	twitchChatClient.connect();
-
-	// connect event
-	onConnect = twitchChatClient.onConnect(() => {
-		const validateChannel = () =>
-			setTimeout(() => {
-				// check if queried channel exists in the current channels
-				if (
-					twitchChatClient.currentChannels.includes(
-						`#${params.name}`.toLowerCase()
-					)
-				)
-					// valid twitch channel
-					connectionState.value = 'connected';
-				else {
-					// not found (yet?)
-					connectionState.value = 'not found';
+// init twitch channel data
+let user: Ref<ITwitchUser | null> = ref(null);
+let stream: Ref<ITwitchStream | null> = ref(null);
+watch(stream, updatePageTitle);
 
-					// try again...
-					validateChannel();
-				}
-			}, 300);
-		validateChannel();
-	});
-
-	// disconnect event
-	onDisconnect = twitchChatClient.onDisconnect(() => {
-		connectionState.value = 'disconnected';
-	});
-
-	// message event
-	onMessage = twitchChatClient.onMessage(
-		async (
-			_channel: string,
-			_user: string,
-			text: string,
-			msg: ChatMessage
-		) => {
-			// check scroll state
-			checkSnappedToBottomOfChat();
+// fetch twitch channel user/stream data async
+$fetch('/api/v1/twitch/user', {
+	params: {
+		name: params.name,
+	},
+}).then((response) => {
+	// user does not exist
+	if (!response.data) {
+		// set state
+		connectionState.value = 'not found';
+	}
 
-			// add new message to list
-			messages.value.push({ meta: msg, content: text });
+	// user found
+	else {
+		// store user data
+		user.value = response.data;
 
-			// scroll to bottom
-			if (isSnappedToBottomOfChat.value === true) {
-				await nextTick();
-				scrollToBottom();
-			}
-		}
-	);
+		// set title
+		updatePageTitle();
+	}
 });
-
-// disconnect chat client
-onBeforeUnmount(disconnectTwitchChatClient);
-// onBeforeRouteLeave(disconnectTwitchChatClient);
-// onDeactivated(disconnectTwitchChatClient);
 </script>
 
 <template>
-	<!-- Loading -->
-	<div v-if="connectionState === 'loading'" class="h-full w-full flex">
-		<!-- Spinner -->
-		<div
-			ref="container"
-			role="status"
-			class="grow px-5 py-5 flex full-center"
-		>
-			<Icon
-				name="svg-spinners:ring-resize"
-				class="w-8 h-8 text-primary"
-				aria-hidden="true"
-				viewBox="0 0 100 101"
-				fill="none"
-			/>
-		</div>
-	</div>
-
 	<!-- No Channel Found -->
 	<EmptyView
-		v-else-if="connectionState === 'not found'"
+		v-if="connectionState === 'not found'"
 		icon="tabler:search-off"
 		:header="localize('view.channel.no_channel_found.header')"
 		:description="
@@ -185,81 +90,58 @@ onBeforeUnmount(disconnectTwitchChatClient);
 	<div v-else class="w-full h-full flex flex-col flex-nowrap">
 		<!-- Header -->
 		<div
-			class="w-full h-8 flex items-center px-2 header-layer flex-shrink-0"
+			class="w-full h-8 flex items-center px-2 mb-3 header-layer flex-shrink-0"
 		>
 			<!-- Text -->
-			<span class="pl-5 select-none">
+			<span class="pl-5 select-none items-center">
 				<!-- Channel Name -->
-				{{ params.name }}
-			</span>
-		</div>
+				{{ user ? user.displayName : params.name }}
 
-		<!-- Chat -->
-		<div class="w-full h-full relative overflow-hidden">
-			<div
-				class="w-full h-full flex flex-col overflow-y-scroll"
-				ref="chatRef"
-				@scroll="checkSnappedToBottomOfChat"
-			>
-				<!-- Spacer -->
-				<span class="h-full" />
+				<!-- Live -->
+				<span v-if="stream">
+					<!-- Live Indicator -->
+					<LiveBadge />
 
-				<!-- Messages -->
-				<span v-for="(message, index) of messages">
-					<div
-						:class="[
-							// first message: highlight background
-							message.meta.tags.get('first-msg') == '1'
-								? 'bg-yellow-50 dark:bg-stone-700'
-								: // alternate colors for each row/message
-								index % 2 === 0
-								? 'bg-secondary-color'
-								: '', // empty/transparent (inherit background)
-							'pl-5',
-						]"
-					>
-						<a
-							href="#"
-							@click.prevent="console.log(message.meta.tags)"
-						>
-							<span
-								:class="[
-									'text-[' +
-										message.meta.tags.get('color') +
-										']',
-								]"
-							>
-								{{ message.meta.tags.get('display-name') }}:
-							</span>
-							<span>
-								{{ message.content }}
-							</span>
-						</a>
-					</div>
+					<!-- Stream Title -->
+					<span v-if="stream.title && stream.title !== '󠀀'">
+						- {{ stream.title }}
+					</span>
 				</span>
-			</div>
+			</span>
+		</div>
 
-			<!-- Chat Overlay -->
+		<!-- Loading -->
+		<div v-if="connectionState === 'loading'" class="h-full w-full flex">
+			<!-- Spinner -->
 			<div
-				class="absolute w-full h-full bottom-0 overlay-layer pointer-events-none"
+				ref="container"
+				role="status"
+				class="grow px-5 py-5 flex full-center"
 			>
-				<!-- Buttons -->
-				<div class="w-full h-full flex justify-end items-end pr-5 pb-5">
-					<!-- Scroll to Bottom -->
-					<Button
-						v-if="!isSnappedToBottomOfChat"
-						:label="
-							localize('chat.overlay.scroll_to_bottom_button')
-						"
-						@click="scrollToBottom"
-						icon="i-material-symbols-arrow-circle-down-outline"
-						class="opacity-50 pointer-events-auto"
-						size="xl"
-					/>
-				</div>
+				<Icon
+					name="svg-spinners:ring-resize"
+					class="w-8 h-8 text-primary"
+					aria-hidden="true"
+					viewBox="0 0 100 101"
+					fill="none"
+				/>
 			</div>
 		</div>
 
+		<!-- Content -->
+		<div
+			v-if="user"
+			v-show="connectionState === 'connected'"
+			class="w-full h-full relative overflow-hidden content-layer"
+		>
+			<!-- Chat -->
+			<ChatContainer
+				:user="user"
+				@on-chat-connection="connectionState = 'connected'"
+				@on-chat-disconnection="connectionState = 'disconnected'"
+			/>
+		</div>
+
 		<!-- Footer -->
 		<div class="w-full h-16 flex-shrink-0" />
 	</div>
diff --git a/src/server/tsconfig.json b/src/server/tsconfig.json
deleted file mode 100644
index 54e8380..0000000
--- a/src/server/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"extends": "../../.nuxt/tsconfig.server.json"
-}
diff --git a/src/store/index.ts b/src/store/index.ts
index cdf21e2..6bc9cf3 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,18 +21,24 @@ export default defineStore(
 		// values
 		const version: Ref<string> = ref(useRuntimeConfig().public.version);
 		const settings: Ref<ISettings> = ref(defaults.defaultSettings);
+		const globalBadges: Ref<IChatBadgeList> = ref({});
 
-		// methods
+		// get global badge data (async)
+		useFetch('/api/v1/twitch/badges').then((response) => {
+			// store badge data
+			globalBadges.value = response.data.value?.data as IChatBadgeList;
+		});
 
 		// return public references
 		return {
 			// values
 			version,
 			settings,
-
-			// methods
+			globalBadges,
 		};
 	},
+
+	// persist storage between instances
 	{
 		persist: {
 			storage: persistedState.localStorage,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 51ccada..4132554 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,5 +1,60 @@
-/** Local Settings */
-interface ISettings {
-	/** Current state of Sidebar visibility */
-	isSidebarExpanded: boolean;
-}
\ No newline at end of file
+import {
+	type HelixBroadcasterType,
+	type HelixStreamType,
+	type HelixUserType,
+} from '@twurple/api';
+
+declare global {
+	// Local Settings
+	interface ISettings {
+		// Current state of Sidebar visibility
+		isSidebarExpanded: boolean;
+	}
+
+	// Chat Badge List
+	interface IChatBadgeList {
+		// badge name
+		[key: string]: {
+			// badge version
+			[key: string]: {
+				title: string;
+				description: string;
+				url: string;
+				previewUrl: string;
+				clickAction: string | null;
+				clickUrl: string | null;
+			};
+		};
+	}
+
+	// Twitch User
+	interface ITwitchUser {
+		type: HelixUserType;
+		id: string;
+		name: string;
+		displayName: string;
+		broadcasterType: HelixBroadcasterType;
+		creationDate: string;
+		description: string;
+		offlinePlaceholderUrl: string;
+		profilePictureUrl: string;
+	}
+
+	// Twitch Stream
+	interface ITwitchStream {
+		id: string;
+		type: HelixStreamType;
+		title: string;
+		gameId: string;
+		gameName: string;
+		isMature: boolean;
+		language: string;
+		startDate: string;
+		tags: string[];
+		thumbnailUrl: string;
+		userDisplayName: string;
+		userId: string;
+		userName: string;
+		viewers: number;
+	}
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b5242e4..f17c5a3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -24,6 +24,9 @@ export default {
 				'kick-background': '#53FC18',
 				'kick-icon': '#000000',
 
+				// other
+				live: '#FF0000',
+
 				// primary
 				shark: {
 					'50': '#f6f6f6',