diff --git a/package.json b/package.json
index 5b6490c..3e1e49f 100644
--- a/package.json
+++ b/package.json
@@ -1,81 +1,81 @@
-{
-	"name": "webpage",
-	"version": "5.1.0",
-	"description": "My personal webpage source >:3",
-	"author": {
-		"email": "demirci.baris38@gmail.com",
-		"name": "Barış DEMİRCİ",
-		"url": "https://barbarbar338.fly.dev"
-	},
-	"license": "GPL-3.0",
-	"scripts": {
-		"dev": "next dev",
-		"build": "echo Disabled for Heroku buildpacks.",
-		"build:prod": "next build",
-		"postbuild:prod": "next-sitemap --config sitemap.config.js",
-		"start": "next start --port 8080",
-		"lint": "next lint",
-		"format": "prettier --write .",
-		"format:watch": "onchange . -- prettier --write {{changed}}",
-		"deploy": "npm run build && flyctl deploy",
-		"update": "taze -w && yarn"
-	},
-	"dependencies": {
-		"@apollo/client": "^3.6.9",
-		"@giscus/react": "^2.2.0",
-		"@tailwindcss/line-clamp": "^0.4.2",
-		"@tailwindcss/typography": "^0.5.7",
-		"axios": "^0.27.2",
-		"calculate-readtime": "^0.0.3",
-		"classnames": "^2.3.2",
-		"graphql": "^16.6.0",
-		"highlight.js": "^11.6.0",
-		"moment": "^2.29.4",
-		"next": "^12.3.1",
-		"next-seo": "^5.5.0",
-		"next-themes": "^0.2.1",
-		"nextjs-progressbar": "^0.0.14",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-folder-tree": "^5.0.3",
-		"react-icons": "^4.4.0",
-		"react-simple-tetris": "^0.3.1",
-		"react-toastify": "^9.0.8",
-		"react-use": "^17.4.0",
-		"react-use-lanyard": "^0.1.3"
-	},
-	"devDependencies": {
-		"@types/node": "^18.7.18",
-		"@types/react": "^18.0.21",
-		"@typescript-eslint/eslint-plugin": "^5.38.0",
-		"@typescript-eslint/parser": "^5.38.0",
-		"autoprefixer": "^10.4.12",
-		"css-loader": "^6.7.1",
-		"eslint": "^8.23.1",
-		"eslint-config-next": "^12.3.1",
-		"eslint-plugin-react": "^7.31.8",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"next-sitemap": "^3.1.22",
-		"onchange": "^7.1.0",
-		"postcss": "^8.4.16",
-		"prettier": "^2.7.1",
-		"prettier-plugin-tailwindcss": "^0.1.13",
-		"sass": "^1.55.0",
-		"tailwindcss": "^3.1.8",
-		"taze": "^0.8.1",
-		"typescript": "^4.8.3",
-		"yarn": "^1.22.19"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	}
-}
+{
+	"name": "webpage",
+	"version": "5.1.0",
+	"description": "My personal webpage source >:3",
+	"author": {
+		"email": "demirci.baris38@gmail.com",
+		"name": "Barış DEMİRCİ",
+		"url": "https://barbarbar338.fly.dev"
+	},
+	"license": "GPL-3.0",
+	"scripts": {
+		"dev": "next dev",
+		"build": "echo Disabled for Heroku buildpacks.",
+		"build:prod": "next build",
+		"postbuild:prod": "next-sitemap --config sitemap.config.js",
+		"start": "next start --port 8080",
+		"lint": "next lint",
+		"format": "prettier --write .",
+		"format:watch": "onchange . -- prettier --write {{changed}}",
+		"deploy": "npm run build && flyctl deploy",
+		"update": "taze major -w && yarn"
+	},
+	"dependencies": {
+		"@apollo/client": "^3.6.10",
+		"@giscus/react": "^2.2.0",
+		"@tailwindcss/line-clamp": "^0.4.2",
+		"@tailwindcss/typography": "^0.5.7",
+		"axios": "^0.27.2",
+		"calculate-readtime": "^0.0.3",
+		"classnames": "^2.3.2",
+		"graphql": "^16.6.0",
+		"highlight.js": "^11.6.0",
+		"moment": "^2.29.4",
+		"next": "^12.3.1",
+		"next-seo": "^5.5.0",
+		"next-themes": "^0.2.1",
+		"nextjs-progressbar": "^0.0.14",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-folder-tree": "^5.0.3",
+		"react-icons": "^4.4.0",
+		"react-simple-tetris": "^0.3.1",
+		"react-toastify": "^9.0.8",
+		"react-use": "^17.4.0",
+		"react-use-lanyard": "^0.1.3"
+	},
+	"devDependencies": {
+		"@types/node": "^18.7.23",
+		"@types/react": "^18.0.21",
+		"@typescript-eslint/eslint-plugin": "^5.38.1",
+		"@typescript-eslint/parser": "^5.38.1",
+		"autoprefixer": "^10.4.12",
+		"css-loader": "^6.7.1",
+		"eslint": "^8.24.0",
+		"eslint-config-next": "^12.3.1",
+		"eslint-plugin-react": "^7.31.8",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"next-sitemap": "^3.1.23",
+		"onchange": "^7.1.0",
+		"postcss": "^8.4.17",
+		"prettier": "^2.7.1",
+		"prettier-plugin-tailwindcss": "^0.1.13",
+		"sass": "^1.55.0",
+		"tailwindcss": "^3.1.8",
+		"taze": "^0.8.2",
+		"typescript": "^4.8.4",
+		"yarn": "^1.22.19"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}
diff --git a/pages/git/[repo]/browse/[...file].tsx b/pages/git/[repo]/browse/[...file].tsx
index 40724d6..56f4c68 100644
--- a/pages/git/[repo]/browse/[...file].tsx
+++ b/pages/git/[repo]/browse/[...file].tsx
@@ -2,6 +2,8 @@ import type { GetServerSideProps, NextPage } from "next";
 import { Layout } from "@components/Layout";
 import { getFileContent, getRepo, IRepo } from "@libs/rest";
 import { GitLayout } from "@components/Git/Layout";
+import { createRef, useEffect } from "react";
+import hljs from "highlight.js";
 
 export interface IBrowsePage {
 	repo: IRepo;
@@ -9,12 +11,17 @@ export interface IBrowsePage {
 }
 
 const BrowsePage: NextPage<IBrowsePage> = ({ repo, file }) => {
+	const ref = createRef<HTMLDivElement>();
+	useEffect(() => {
+		const content = ref.current.innerHTML;
+		const highlighted = hljs.highlightAuto(content).value;
+		ref.current.innerHTML = `<pre>${highlighted}</pre>`;
+	}, [ref]);
+
 	return (
 		<Layout title={`${repo.repo} - ${repo.branch}`}>
 			<GitLayout repo={repo}>
-				<pre>
-					<code>{Buffer.from(file).toString()}</code>
-				</pre>
+				<div ref={ref}>{Buffer.from(file).toString()}</div>
 			</GitLayout>
 		</Layout>
 	);