3 files changed, 28 insertions, 8 deletions
diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js
index 43b11ac..9d37819 100644
--- a/src/app/info/[id]/page.js
+++ b/src/app/info/[id]/page.js
@@ -27,11 +27,11 @@ export default async function AnimeInfo({params}) {
 					</div>
 				)}
 
-			<div className="buttonContainer">
-				{info && info.episodes.map((item, index) => (
-					<CreateButton key={index} a={item} />
-				))}
-			</div>
+				<div className="buttonContainer">
+					{info && info.episodes.map((item, index) => (
+						<CreateButton key={index} a={item} />
+					))}
+				</div>
 
 			</div>
 		</div>
diff --git a/src/app/info/info.css b/src/app/info/info.css
index 6d6b9b2..cf24758 100644
--- a/src/app/info/info.css
+++ b/src/app/info/info.css
@@ -60,8 +60,24 @@
 	background-color: var(--soft-purple);
 }
 
+.infoPageContainer {
+	display: flex;
+	height: 100dvh;
+	justify-content: center;
+	align-items: center;
+}
+
+.infoPageContainer p {
+	color: white;
+}
+
 @media (prefers-color-scheme: light) {
 	.dramaDescription {
 		color: black;
 	}
+
+	.infoPageContainer p {
+		color: black;
+	}
+	
 }
 \ No newline at end of file
diff --git a/src/app/info/page.js b/src/app/info/page.js
index 6353b1a..1468652 100644
--- a/src/app/info/page.js
+++ b/src/app/info/page.js
@@ -1,7 +1,11 @@
+import './info.css'
+
 export default function Info() {
 	return (
-		<h2>
-			Hello
-		</h2>
+		<div className='infoPageContainer'>
+			<p>
+				This is the anime info page. This page will display information about the queried anime when anime id is passed along the url.
+			</p>
+		</div>
 	)
 }
 \ No newline at end of file