diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 4d6f23f..8b9b167 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -35,43 +35,8 @@ jobs:
       - name: Lint
         run: yarn run lint
 
-      - name: Build website
-        run: yarn run export
-        env:
-          NODE_ENV: production
-
-      - uses: actions/upload-artifact@v3
-        with:
-          name: output
-          path: out
-
-  pages:
-    runs-on: ubuntu-latest
-    needs: test
-    steps:
-      - name: Setup
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: "16.x"
-          cache: "yarn"
-
-      - name: Install npm dependencies
-        run: yarn install
-
-      - name: Build website
-        run: yarn run export
-        env:
-          NODE_ENV: production
-
-      - name: Deploy to pages
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./out
-          cname: materialtube.guusvanmeerveld.dev
+      - name: Build
+        run: yarn run build
 
   docker:
     runs-on: ubuntu-latest
diff --git a/Dockerfile b/Dockerfile
index f3ea2f8..8a39276 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,7 @@
 FROM node:16-alpine AS deps
 
 WORKDIR /app
-
 COPY package.json yarn.lock ./
-
 RUN yarn install --frozen-lockfile
 
 
@@ -12,15 +10,32 @@ FROM node:16-alpine AS builder
 WORKDIR /app
 
 COPY . .
+
 COPY --from=deps /app/node_modules ./node_modules
 
 ENV NEXT_TELEMETRY_DISABLED 1;
-ENV NODE_ENV "production"
 
-RUN yarn export
+RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+
+
+FROM node:16-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/next-i18next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
 
-FROM nginx:alpine AS runner
+USER nextjs
 
-COPY --from=builder /app/out /usr/share/nginx/html
+EXPOSE 3000
 
-EXPOSE 80
\ No newline at end of file
+CMD ["yarn", "start"]
diff --git a/docker-compose.yml b/docker-compose.yml
index 2e4f7b3..18a333f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,4 +5,4 @@ services:
     build: .
     container_name: material-tube
     ports:
-      - 3000:80
+      - 3000:3000
diff --git a/package.json b/package.json
index c30f987..7d6741a 100644
--- a/package.json
+++ b/package.json
@@ -6,14 +6,11 @@
 	"repository": {
 		"url": "https://github.com/Guusvanmeerveld/MaterialTube"
 	},
-	"cacheDirectories": [
-		".next/cache"
-	],
+	"cacheDirectories": [".next/cache"],
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-		"export": "next build && next export",
 		"lint": "next lint",
 		"prettify": "prettier src --write"
 	},
diff --git a/src/components/Player/Time.tsx b/src/components/Player/Time.tsx
index 963b6de..cc64917 100644
--- a/src/components/Player/Time.tsx
+++ b/src/components/Player/Time.tsx
@@ -16,7 +16,10 @@ const Time: FC<{
 	const progress = useVideoState((state) => state.progress);
 
 	return (
-		<Typography variant="subtitle1" color={theme.palette.text.secondary}>
+		<Typography
+			variant="subtitle1"
+			color={theme.palette.text.secondary}
+		>
 			{formatTime(Math.round(progress))}
 			<> / </>
 			{formatTime(duration)}
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
index 71ae2ff..5a88e5c 100644
--- a/src/components/Player/index.tsx
+++ b/src/components/Player/index.tsx
@@ -18,7 +18,7 @@ const Player: FC<{
 	captions: Caption[];
 	length: number;
 	videoId: string;
-	sx: SxProps;
+	sx?: SxProps;
 }> = ({ formats, length: duration, sx }) => {
 	const [settings] = useSettings();
 
@@ -40,7 +40,9 @@ const Player: FC<{
 	const pausedBy = useVideoState((state) => state.pausedBy);
 
 	const videoStream = formats.find(
-		(format) => format.qualityLabel == "2160p" || format.qualityLabel == "1080p"
+		(format) =>
+			format.qualityLabel == "2160p" ||
+			format.qualityLabel == "1080p"
 	)?.url;
 
 	const audioStream = formats.find((format) =>
@@ -78,7 +80,8 @@ const Player: FC<{
 		const handleFinishedWaiting = (e: Event) => {
 			setWaiting(false);
 
-			if (pausedBy == PausedBy.Player) setPlaying(VideoStatus.Playing);
+			if (pausedBy == PausedBy.Player)
+				setPlaying(VideoStatus.Playing);
 		};
 
 		const onTimeUpdate = () => {
@@ -105,13 +108,19 @@ const Player: FC<{
 			audio.srcObject = null;
 
 			video.removeEventListener("waiting", handleWaiting);
-			video.removeEventListener("canplaythrough", handleFinishedWaiting);
+			video.removeEventListener(
+				"canplaythrough",
+				handleFinishedWaiting
+			);
 			video.removeEventListener("error", handleError);
 			video.removeEventListener("pause", handlePause);
 			video.removeEventListener("timeupdate", onTimeUpdate);
 
 			audio.removeEventListener("waiting", handleWaiting);
-			audio.removeEventListener("canplaythrough", handleFinishedWaiting);
+			audio.removeEventListener(
+				"canplaythrough",
+				handleFinishedWaiting
+			);
 			audio.removeEventListener("pause", handlePause);
 		};
 
@@ -119,18 +128,22 @@ const Player: FC<{
 	}, []);
 
 	useEffect(() => {
-		setPlaying(settings.autoPlay ? VideoStatus.Playing : VideoStatus.Paused);
+		setPlaying(
+			settings.autoPlay
+				? VideoStatus.Playing
+				: VideoStatus.Paused
+		);
 	}, [setPlaying, settings.autoPlay]);
 
 	useEffect(() => {
 		if (!videoRef.current || !audioRef.current) return;
 
-		if (playing == VideoStatus.Paused) {
-			videoRef.current.pause();
-			audioRef.current.pause();
-		} else {
+		if (playing == VideoStatus.Playing && !error && !waiting) {
 			videoRef.current.play();
 			audioRef.current.play();
+		} else {
+			videoRef.current.pause();
+			audioRef.current.pause();
 		}
 	}, [error, playing, waiting]);
 
@@ -172,7 +185,8 @@ const Player: FC<{
 				src={videoStream}
 				ref={videoRef}
 				style={{
-					height: "100%"
+					height: "100%",
+					width: "100%"
 				}}
 				autoPlay={playing == VideoStatus.Playing}
 			>
diff --git a/src/components/Video/Inline.tsx b/src/components/Video/Inline.tsx
index 2644d0b..6fc591a 100644
--- a/src/components/Video/Inline.tsx
+++ b/src/components/Video/Inline.tsx
@@ -60,7 +60,12 @@ const Video: FC<{ video: VideoModel }> = ({ video }) => {
 				</Grid>
 
 				<Grid item md={8} sx={{ padding: 3, width: "100%" }}>
-					<Link href={{ pathname: "/watch", query: { v: video.id } }}>
+					<Link
+						href={{
+							pathname: "/watch",
+							query: { v: video.id }
+						}}
+					>
 						<a>
 							<Tooltip title={video.title}>
 								<Typography gutterBottom noWrap variant="h5">
@@ -99,16 +104,29 @@ const Video: FC<{ video: VideoModel }> = ({ video }) => {
 					</Typography>
 					<Link
 						passHref
-						href={{ pathname: "/channel", query: { c: video.author.id } }}
+						href={{
+							pathname: "/channel",
+							query: {
+								c: video.author.id
+							}
+						}}
 					>
 						<a>
-							<Box ref={ref} sx={{ display: "flex", alignItems: "center" }}>
+							<Box
+								ref={ref}
+								sx={{
+									display: "flex",
+									alignItems: "center"
+								}}
+							>
 								{isLoading && <CircularProgress />}
 								{!isLoading && (
 									<Avatar src={authorThumbnail} alt={video.author.name} />
 								)}
 								<Typography
-									sx={{ ml: 2 }}
+									sx={{
+										ml: 2
+									}}
 									variant="subtitle1"
 									color={theme.palette.text.secondary}
 								>
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index bb8bc74..1a44ab3 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -15,9 +15,12 @@ const NotFound: NextPage = () => {
 			/>
 			<Layout>
 				<Box sx={{ mt: 5, textAlign: "center" }}>
-					<Typography variant="h3">Page not found</Typography>
+					<Typography variant="h3">
+						Page not found
+					</Typography>
 					<Typography variant="h4">
-						The page may have been moved or deleted.
+						The page may have been moved or
+						deleted.
 					</Typography>
 				</Box>
 			</Layout>
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 1d8fade..e4129a8 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -61,18 +61,35 @@ const InfoModal: FC<{
 				<Typography id="modal-modal-title" variant="h4">
 					Stats for {settings.invidiousServer}
 				</Typography>
-				<Typography id="modal-modal-description" sx={{ mt: 2 }}>
+				<Typography
+					id="modal-modal-description"
+					sx={{ mt: 2 }}
+				>
 					Version: {data.version} <br /> <br />
-					Software name: {data.software.name} <br />
-					Software version: {data.software.version} <br />
-					Software branch: {data.software.branch} <br /> <br />
-					Is accepting registrations: {data.openRegistrations ? "Yes" : "No"}
+					Software name: {data.software.name}{" "}
+					<br />
+					Software version:{" "}
+					{data.software.version} <br />
+					Software branch: {
+						data.software.branch
+					}{" "}
+					<br /> <br />
+					Is accepting registrations:{" "}
+					{data.openRegistrations ? "Yes" : "No"}
 					<br /> <br />
-					Total users: {data.usage.users.total} <br />
-					Active in the past half year: {data.usage.users.activeHalfyear}
+					Total users: {
+						data.usage.users.total
+					}{" "}
+					<br />
+					Active in the past half year:{" "}
+					{data.usage.users.activeHalfyear}
 					<br />
-					Active in the past month: {data.usage.users.activeMonth} <br /> <br />
-					Stats updated at: {lastUpdated.toLocaleDateString()} -{" "}
+					Active in the past month:{" "}
+					{
+						data.usage.users.activeMonth
+					} <br /> <br />
+					Stats updated at:{" "}
+					{lastUpdated.toLocaleDateString()} -{" "}
 					{lastUpdated.toLocaleTimeString()}
 				</Typography>
 			</ModalBox>
@@ -92,7 +109,13 @@ const Setting: FC<{ title: string; description?: string }> = ({
 			<Box sx={{ flexGrow: 1 }}>
 				<Typography variant="h5">{title}</Typography>
 				{description && (
-					<Typography variant="subtitle1" color={theme.palette.text.secondary}>
+					<Typography
+						variant="subtitle1"
+						color={
+							theme.palette.text
+								.secondary
+						}
+					>
 						{description}
 					</Typography>
 				)}
@@ -127,10 +150,13 @@ const Settings: NextPage = () => {
 	const invidiousServerResponse = useMutation<Stats, unknown, string>(
 		"invidiousInstance",
 		(server) =>
-			axios.get(`https://${server}/api/v1/stats`).then((res) => res.data)
+			axios
+				.get(`https://${server}/api/v1/stats`)
+				.then((res) => res.data)
 	);
 
-	const allowsRegistrations = invidiousServerResponse.data?.openRegistrations;
+	const allowsRegistrations =
+		invidiousServerResponse.data?.openRegistrations;
 
 	return (
 		<>
@@ -146,7 +172,9 @@ const Settings: NextPage = () => {
 
 					<Divider sx={{ mb: 4 }} />
 
-					<Typography variant="h4">Theme</Typography>
+					<Typography variant="h4">
+						Theme
+					</Typography>
 
 					<Setting
 						title="General Theme"
@@ -157,58 +185,129 @@ const Settings: NextPage = () => {
 							color="primary"
 							aria-label="outlined default button group"
 						>
-							<Button onClick={() => setSetting("theme", "light")}>
+							<Button
+								onClick={() =>
+									setSetting(
+										"theme",
+										"light"
+									)
+								}
+							>
 								Light
 							</Button>
-							<Button onClick={() => setSetting("theme")}>System</Button>
-							<Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
+							<Button
+								onClick={() =>
+									setSetting(
+										"theme"
+									)
+								}
+							>
+								System
+							</Button>
+							<Button
+								onClick={() =>
+									setSetting(
+										"theme",
+										"dark"
+									)
+								}
+							>
+								Dark
+							</Button>
 						</ButtonGroup>
 					</Setting>
 
 					<Setting title="Primary Color">
-						<ColorBox marginRight={1} color={settings.primaryColor} />
+						<ColorBox
+							marginRight={1}
+							color={
+								settings.primaryColor
+							}
+						/>
 						<Button
-							onClick={() => setPrimaryColorModal(true)}
+							onClick={() =>
+								setPrimaryColorModal(
+									true
+								)
+							}
 							variant="contained"
 						>
 							Pick Color
 						</Button>
 						<MaterialColorPicker
-							setState={setPrimaryColorModal}
-							isOpen={primaryColorModalIsOpen}
-							setColor={(color) => setSetting("primaryColor", color)}
-							selectedColor={settings.primaryColor}
+							setState={
+								setPrimaryColorModal
+							}
+							isOpen={
+								primaryColorModalIsOpen
+							}
+							setColor={(color) =>
+								setSetting(
+									"primaryColor",
+									color
+								)
+							}
+							selectedColor={
+								settings.primaryColor
+							}
 						/>
 					</Setting>
 
 					<Setting title="Accent Color">
-						<ColorBox marginRight={1} color={settings.accentColor} />
+						<ColorBox
+							marginRight={1}
+							color={
+								settings.accentColor
+							}
+						/>
 						<Button
-							onClick={() => setAccentColorModal(true)}
+							onClick={() =>
+								setAccentColorModal(
+									true
+								)
+							}
 							variant="contained"
 						>
 							Pick Color
 						</Button>
 						<MaterialColorPicker
-							setState={setAccentColorModal}
-							isOpen={accentColorModalIsOpen}
-							setColor={(color) => setSetting("accentColor", color)}
-							selectedColor={settings.accentColor}
+							setState={
+								setAccentColorModal
+							}
+							isOpen={
+								accentColorModalIsOpen
+							}
+							setColor={(color) =>
+								setSetting(
+									"accentColor",
+									color
+								)
+							}
+							selectedColor={
+								settings.accentColor
+							}
 						/>
 					</Setting>
 
 					<Divider sx={{ my: 4 }} />
 
-					<Typography variant="h4">Player</Typography>
+					<Typography variant="h4">
+						Player
+					</Typography>
 
 					<Divider sx={{ my: 4 }} />
 
-					<Typography variant="h4">Data</Typography>
+					<Typography variant="h4">
+						Data
+					</Typography>
 
 					<Setting
 						title="Invidious Server"
 						description={`Where to fetch data from ${
-							settings.storageType == "invidious" ? "and login into" : ""
+							settings.storageType ==
+							"invidious"
+								? "and login into"
+								: ""
 						}`}
 					>
 						<Box sx={{ mr: 2 }}>
@@ -218,10 +317,15 @@ const Settings: NextPage = () => {
 									<Refresh
 										sx={{
 											cursor: "pointer",
-											color: theme.palette.text.secondary
+											color: theme
+												.palette
+												.text
+												.secondary
 										}}
 										onClick={() =>
-											invidiousServerResponse.mutate(settings.invidiousServer)
+											invidiousServerResponse.mutate(
+												settings.invidiousServer
+											)
 										}
 									/>
 								)}
@@ -229,50 +333,111 @@ const Settings: NextPage = () => {
 								!invidiousServerResponse.isLoading && (
 									<>
 										<Done
-											onClick={() => setModalState(true)}
-											sx={{ color: green[800], cursor: "pointer" }}
+											onClick={() =>
+												setModalState(
+													true
+												)
+											}
+											sx={{
+												color: green[800],
+												cursor: "pointer"
+											}}
 										/>
 										<InfoModal
-											modalIsOpen={modalIsOpen}
-											setModalState={setModalState}
-											data={invidiousServerResponse.data!}
+											modalIsOpen={
+												modalIsOpen
+											}
+											setModalState={
+												setModalState
+											}
+											data={
+												invidiousServerResponse.data!
+											}
 										/>
 									</>
 								)}
 
 							{invidiousServerResponse.error && (
-								<Error sx={{ color: red[800] }} />
+								<Error
+									sx={{
+										color: red[800]
+									}}
+								/>
+							)}
+							{invidiousServerResponse.isLoading && (
+								<CircularProgress />
 							)}
-							{invidiousServerResponse.isLoading && <CircularProgress />}
 						</Box>
-						<FormControl sx={{ minWidth: 200 }}>
-							<InputLabel id="server-select-label">Server</InputLabel>
+						<FormControl
+							sx={{ minWidth: 200 }}
+						>
+							<InputLabel id="server-select-label">
+								Server
+							</InputLabel>
 							<Select
 								labelId="server-select-label"
 								id="server-select"
-								value={settings.invidiousServer}
+								value={
+									settings.invidiousServer
+								}
 								label="Server"
-								onChange={(e) => {
-									const server = e.target.value;
-
-									invidiousServerResponse.mutate(server);
-
-									setSetting("invidiousServer", server);
+								onChange={(
+									e
+								) => {
+									const server =
+										e
+											.target
+											.value;
+
+									invidiousServerResponse.mutate(
+										server
+									);
+
+									setSetting(
+										"invidiousServer",
+										server
+									);
+								}}
+								MenuProps={{
+									sx: {
+										maxHeight: 300
+									}
 								}}
-								MenuProps={{ sx: { maxHeight: 300 } }}
 							>
 								{instances.data &&
 									instances.data
 										.filter(
-											([, server]) =>
-												server.type != ServerInstanceType.Onion &&
-												server.api == true
+											([
+												,
+												server
+											]) =>
+												server.type !=
+													ServerInstanceType.Onion &&
+												server.api ==
+													true
 										)
-										.map(([uri, server]) => (
-											<MenuItem key={uri} value={uri}>
-												{server.flag} {uri}
-											</MenuItem>
-										))}
+										.map(
+											([
+												uri,
+												server
+											]) => (
+												<MenuItem
+													key={
+														uri
+													}
+													value={
+														uri
+													}
+												>
+													{
+														server.flag
+													}{" "}
+													{
+														uri
+													}
+												</MenuItem>
+											)
+										)}
 							</Select>
 						</FormControl>
 					</Setting>
@@ -281,22 +446,43 @@ const Settings: NextPage = () => {
 						title="Data Storage Location"
 						description="Where your personal data will be stored"
 					>
-						<FormControl sx={{ minWidth: 200 }}>
-							<InputLabel id="location-select-label">Location</InputLabel>
+						<FormControl
+							sx={{ minWidth: 200 }}
+						>
+							<InputLabel id="location-select-label">
+								Location
+							</InputLabel>
 							<Select
 								labelId="location-select-label"
 								id="location-select"
-								value={settings.storageType}
+								value={
+									settings.storageType
+								}
 								label="Location"
-								onChange={(e) => {
-									const location = e.target.value;
-
-									setSetting("storageType", location);
+								onChange={(
+									e
+								) => {
+									const location =
+										e
+											.target
+											.value;
+
+									setSetting(
+										"storageType",
+										location
+									);
+								}}
+								MenuProps={{
+									sx: {
+										maxHeight: 300
+									}
 								}}
-								MenuProps={{ sx: { maxHeight: 300 } }}
 							>
 								{[
-									{ name: "Locally", value: StorageType.Local },
+									{
+										name: "Locally",
+										value: StorageType.Local
+									},
 									{
 										name: "Invidious server using auth",
 										value: StorageType.Invidious
@@ -305,43 +491,69 @@ const Settings: NextPage = () => {
 										name: `A custom ${process.env.NEXT_PUBLIC_APP_NAME} auth server`,
 										value: StorageType.RemoteServer
 									}
-								].map((location, i) => (
-									<MenuItem key={i} value={location.value}>
-										{location.name}
-									</MenuItem>
-								))}
+								].map(
+									(
+										location,
+										i
+									) => (
+										<MenuItem
+											key={
+												i
+											}
+											value={
+												location.value
+											}
+										>
+											{
+												location.name
+											}
+										</MenuItem>
+									)
+								)}
 							</Select>
 						</FormControl>
 					</Setting>
 
-					{settings.storageType != StorageType.Local && (
+					{settings.storageType !=
+						StorageType.Local && (
 						<>
-							{settings.storageType == "invidious" && allowsRegistrations && (
-								<Setting
-									title="Username"
-									description="The username for your Invidious account"
-								>
-									<TextField label="Username" color="primary" />
-								</Setting>
-							)}
+							{settings.storageType ==
+								"invidious" &&
+								allowsRegistrations && (
+									<Setting
+										title="Username"
+										description="The username for your Invidious account"
+									>
+										<TextField
+											label="Username"
+											color="primary"
+										/>
+									</Setting>
+								)}
 
-							{settings.storageType == StorageType.RemoteServer && (
+							{settings.storageType ==
+								StorageType.RemoteServer && (
 								<Setting
 									title="Server address"
 									description={`The address for your ${process.env.NEXT_PUBLIC_APP_NAME} auth server`}
 								>
-									<TextField label="Server adress" color="primary" />
+									<TextField
+										label="Server adress"
+										color="primary"
+									/>
 								</Setting>
 							)}
 
 							<Setting
 								title={
-									settings.storageType == StorageType.Invidious
+									settings.storageType ==
+									StorageType.Invidious
 										? "Password"
 										: "Passphrase"
 								}
 								description={
-									settings.storageType == StorageType.Invidious
+									settings.storageType ==
+									StorageType.Invidious
 										? "The password for your invidious account"
 										: "The passphrase for your account"
 								}
@@ -349,7 +561,8 @@ const Settings: NextPage = () => {
 								<TextField
 									type="password"
 									label={
-										settings.storageType == StorageType.Invidious
+										settings.storageType ==
+										StorageType.Invidious
 											? "Password"
 											: "Passphrase"
 									}
diff --git a/src/pages/watch.module.css b/src/pages/watch.module.css
new file mode 100644
index 0000000..92d2740
--- /dev/null
+++ b/src/pages/watch.module.css
@@ -0,0 +1,3 @@
+.description a {
+    color: #566fff;
+}
\ No newline at end of file
diff --git a/src/pages/watch.tsx b/src/pages/watch.tsx
index 15c0b75..ad7d8a0 100644
--- a/src/pages/watch.tsx
+++ b/src/pages/watch.tsx
@@ -1,29 +1,41 @@
 import NotFound from "./404";
 
-import { NextPage } from "next";
+import { GetStaticProps, NextPage } from "next";
 import { NextSeo } from "next-seo";
+import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { useQuery } from "react-query";
 
 import axios, { AxiosError } from "axios";
 
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
+import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+
+import Share from "@mui/icons-material/Share";
+
+import { abbreviateNumber } from "@src/utils";
 
 import { Error } from "@interfaces/api";
 import VideoAPI from "@interfaces/api/video";
 
-import { videoToVideo } from "@utils/conversions";
 import useSettings from "@utils/hooks/useSettings";
 
 import Layout from "@components/Layout";
 import Loading from "@components/Loading";
 import Player from "@components/Player";
 
+import styles from "./watch.module.css";
+
 const Watch: NextPage = () => {
 	const { query, isReady } = useRouter();
 
+	const theme = useTheme();
+
 	const videoId = query["v"];
 
 	const [settings] = useSettings();
@@ -59,7 +71,6 @@ const Watch: NextPage = () => {
 	return (
 		<>
 			<NextSeo title={data ? data.title : "Not Found"} />
-
 			<Layout>
 				{data && (
 					<>
@@ -69,10 +80,79 @@ const Watch: NextPage = () => {
 							captions={data.captions}
 							length={data.lengthSeconds}
 							videoId={data.videoId}
-							sx={{ height: "75vh", margin: "auto", mt: 2 }}
+							sx={{
+								height: "75vh",
+								margin: "auto",
+								mt: 2
+							}}
 						/>
-						<Container sx={{ pt: 2 }}>
-							<Typography variant="h4">{data.title}</Typography>
+						<Container sx={{ mt: 2 }}>
+							<Box
+								sx={{
+									display: "flex",
+									alignItems: "center"
+								}}
+							>
+								<Box
+									sx={{
+										flex: 1
+									}}
+								>
+									<Typography variant="h4">{data.title}</Typography>
+									<Typography
+										variant="subtitle1"
+										color={theme.palette.text.secondary}
+										sx={{
+											mt: 1
+										}}
+									>
+										{abbreviateNumber(data.viewCount)} Views •{" "}
+										{new Date(data.published * 1000).toLocaleDateString()}
+									</Typography>
+								</Box>
+								<Share />
+							</Box>
+
+							<Divider sx={{ my: 2 }} />
+
+							<Link
+								href={{
+									pathname: `/channel`,
+									query: {
+										c: data.authorId
+									}
+								}}
+							>
+								<a>
+									<Box
+										sx={{
+											display: "flex",
+											alignItems: "center",
+											mb: 2
+										}}
+									>
+										<Avatar
+											src={
+												data?.authorThumbnails.find(
+													(thumbnail) => thumbnail.width == 100
+												)?.url
+											}
+											alt={data.author}
+											sx={{
+												mr: 2
+											}}
+										/>
+										<Typography variant="h6">{data.author}</Typography>
+									</Box>
+								</a>
+							</Link>
+
+							<Typography
+								className={styles.description}
+								dangerouslySetInnerHTML={{
+									__html: data.descriptionHtml.replaceAll("\n", "<br>")
+								}}
+							></Typography>
 						</Container>
 					</>
 				)}