8 files changed, 53 insertions, 15 deletions
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index faa5999..a13dbbb 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -42,6 +42,7 @@ export default async function Read({ params }) {
 								width={800}
 								height={1000}
 								priority
+								quality={100}
 								unoptimized
 							/>
 							<p>{index + 1}</p>
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index b827249..a699557 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -1,5 +1,5 @@
 .MangaInfoContainer {
-	margin: 70px auto;
+	margin: 68px auto;
 }
 
 .MangaHero {
@@ -45,6 +45,10 @@
 	margin-top: -10px;
 }
 
+.MangaReleaseYear {
+	margin-top: 10px;
+}
+
 .GenreContainer {
 	margin-top: 5px;
 	display: flex;
@@ -55,6 +59,10 @@
 	color: var(--neon-green);
 }
 
+.GenreContainer {
+	margin-top: 10px;
+}
+
 .genres {
 	display: flex;
 	align-items: center;
@@ -71,7 +79,7 @@
 
 .MangaRatings {
 	display: flex;
-	margin: 5px 0px 10px 0px;
+	margin-top: 10px;
 	/* justify-content: center; */
 }
 
@@ -81,10 +89,21 @@
 	color: var(--light-green);
 }
 
+.CharactersContainer {
+	max-width: 98%;
+	margin: 20px auto;
+}
+
+.CharactersContainer h2 {
+	color: gray;
+	font-family: "Poppins", serif;
+}
+
 .Character {
 	display: flex;
 	flex-direction: row;
 	overflow-x: auto;
+	margin-top: -10px;
 }
 
 .Character::-webkit-scrollbar {
@@ -132,7 +151,7 @@
 }
 
 .ChapterContainer {
-	width: 50%;
+	width: 50dvw;
 	text-align: center;
 	height: 300px;
 	overflow-y: auto;
@@ -140,6 +159,7 @@
 
 .ChapterContainer::-webkit-scrollbar {
 	width: 5px;
+	height: 0px;
 }
 
 .ChapterContainer::-webkit-scrollbar-thumb {
@@ -148,7 +168,7 @@
 }
 
 .ChapterContainer button {
-	width: 130px;
+	width: 8dvw;
 	height: auto;
 	padding: 10px;
 	margin: 5px;
@@ -159,7 +179,7 @@
 	color: white;
 	background-color: #3d3d3d;
 	cursor: pointer;
-	transition: background-color 0.2s linear;
+	transition: background-color 100ms ease-in-out;
 }
 
 .ChapterContainer button p {
@@ -169,7 +189,7 @@
 
 .ChapterContainer button:hover {
 	background-color: #1f1f1f;
-	transition: background-color 0.2s linear
+	transition: background-color 50ms ease-in
 }
 
 .ChapterContainer button:focus {
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index c8eb389..13715b9 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -96,6 +96,7 @@ export default async function MangaInfo({ params }) {
 					</div>
 
 					<div className={styles.CharactersContainer}>
+						<h2>Characters</h2>
 						<div className={styles.Character}>
 							{data.characters &&
 								data.characters.map((item, index) => (
diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx
index 2db1634..bd69c6a 100644
--- a/src/app/manga/[title]/page.jsx
+++ b/src/app/manga/[title]/page.jsx
@@ -38,9 +38,8 @@ export default async function MangaInfo({ params }) {
 									/>
 									<div className={styles.MangaInfo}>
 										<p className={styles.MangaTitle}>
-											{item.title["romaji"]},{" "}
-											{item.title["english"]},{" "}
-											{item.title["native"]}
+											{item.title["english"] ||
+												item.title["romaji"]}
 										</p>
 										<p className={styles.MangaDescription}>
 											{desc.includes &&
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index 97a4dba..c832d85 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -11,7 +11,7 @@
 .SearchedFor {
 	color: white;
 	text-align: center;
-	font-family: "Kanit";
+	font-family: "Poppins";
 	font-size: 26px;
 }
 
@@ -64,4 +64,4 @@
 	.Main {
 		max-width: 100%;
 	}
-}
+}
+\ No newline at end of file
diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js
index ef8ef2e..916caca 100644
--- a/src/app/manga/cacher.js
+++ b/src/app/manga/cacher.js
@@ -4,7 +4,7 @@
 export default async function PreFetchChaterLinks(data) {
 	try {
 		const fetchPromises = data.map(async (element) => {
-			const link = `https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`;
+			const link = `https://consumet-jade.vercel.app/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`;
 			await fetch(link, { cache: "force-cache" });
 		});
 
diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
index dab15a3..e88b6ea 100644
--- a/src/app/manga/manga.module.css
+++ b/src/app/manga/manga.module.css
@@ -4,14 +4,19 @@
 	align-items: center;
 	justify-content: center;
 	height: 100dvh;
+	width: 100dvw;
+}
+
+.MangaSVG {
+	height: auto;
+	width: auto;
 }
 
 .SearchBar {
 	display: flex;
 	align-items: center;
-	border-radius: 10px;
 	background: #1f1f1f;
-	margin-top: -10px;
+	margin-top: 10px;
 	border-style: dotted;
 	border-color: rgb(63, 63, 63);
 	border-width: 2px;
@@ -27,4 +32,10 @@
 	color: white;
 	font-family: "Kanit";
 	font-size: 16px;
+}
+
+@media screen and (max-width: 768px) {
+	.MangaSVG {
+		width: 100%;
+	}
 }
 \ No newline at end of file
diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx
index 3757f90..8f4db8c 100644
--- a/src/app/manga/page.jsx
+++ b/src/app/manga/page.jsx
@@ -5,7 +5,13 @@ import SearchBar from "./searchBar";
 export default async function Manga() {
 	return (
 		<div className={styles.Main}>
-			<Image src="/manga.svg" width={480} height={240} className={styles.MangaSVG} />
+			<Image
+				src="/manga.svg"
+				width={480}
+				height={200}
+				className={styles.MangaSVG}
+				alt="Manga SVG"
+			/>
 			<SearchBar />
 		</div>
 	);