diff --git a/src/assets/images/lichess-logo.svg b/src/assets/images/lichess-logo.svg
new file mode 100644
index 0000000..ceeee62
--- /dev/null
+++ b/src/assets/images/lichess-logo.svg
@@ -0,0 +1,7 @@
+<svg
+    viewBox="0 0 50 50"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <path d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z" />
+  </svg>
\ No newline at end of file
diff --git a/src/components/LichessButton.tsx b/src/components/LichessButton.tsx
new file mode 100644
index 0000000..fe72432
--- /dev/null
+++ b/src/components/LichessButton.tsx
@@ -0,0 +1,27 @@
+interface IProps {
+	onClickHandler: () => void;
+}
+
+const LichessButton = ({ onClickHandler }: IProps) => {
+	return (
+		<button
+			className="text-(--accent) border rounded-xl px-6 py-3 cursor-pointer flex items-center gap-2 p-2 hover:bg-(--accent) hover:text-(--header-bg) transition-colors duration-300 ease-in-out"
+			onClick={onClickHandler}
+			type="button"
+		>
+			<div className="w-6 h-6">
+				<svg
+					viewBox="0 0 50 50"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+				>
+					<path d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z" />
+				</svg>
+			</div>
+
+			<p>Log into Lichess.org</p>
+		</button>
+	);
+};
+
+export default LichessButton;
diff --git a/src/pages/Chessboard.container.tsx b/src/pages/Chessboard.container.tsx
new file mode 100644
index 0000000..794d059
--- /dev/null
+++ b/src/pages/Chessboard.container.tsx
@@ -0,0 +1,7 @@
+import Chessboard from "#/pages/Chessboard.tsx";
+
+const ChessboardContainer = () => {
+	return <Chessboard />;
+};
+
+export default ChessboardContainer;
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
new file mode 100644
index 0000000..072a83b
--- /dev/null
+++ b/src/pages/Chessboard.tsx
@@ -0,0 +1,13 @@
+import LichessButton from "#/components/LichessButton.tsx";
+import Section from "#/components/Section.tsx";
+
+const Chessboard = () => (
+	<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
+		<Section title="Convert PGN to PDF">
+			<LichessButton /> or{" "}
+			<input type="file" id="file-input" className="file-input max-w-xs" />
+		</Section>
+	</main>
+);
+
+export default Chessboard;
diff --git a/src/pages/contact.tsx b/src/pages/Contact.tsx
similarity index 100%
rename from src/pages/contact.tsx
rename to src/pages/Contact.tsx
diff --git a/src/pages/chessboard.tsx b/src/pages/chessboard.tsx
deleted file mode 100644
index 3ba6b3d..0000000
--- a/src/pages/chessboard.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Section from "#/components/Section.tsx";
-
-const Chessboard = () => (
-	<Section title="Convert PGN to PDF">
-		<p>section content</p>
-	</Section>
-);
-
-export default Chessboard;
diff --git a/src/routes/chessboard.tsx b/src/routes/chessboard.tsx
index 97b3945..f6675f2 100644
--- a/src/routes/chessboard.tsx
+++ b/src/routes/chessboard.tsx
@@ -1,10 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Chessboard from "#/pages/chessboard.tsx";
+import ChessboardContainer from "#/pages/Chessboard.container.tsx";
 
 export const Route = createFileRoute("/chessboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <Chessboard />;
+	return <ChessboardContainer />;
 }
diff --git a/src/routes/contact.tsx b/src/routes/contact.tsx
index 133dfac..9093ab5 100644
--- a/src/routes/contact.tsx
+++ b/src/routes/contact.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Contact from "#/pages/contact.tsx";
+import Contact from "#/pages/Contact.tsx";
 
 export const Route = createFileRoute("/contact")({
 	component: RouteComponent,
diff --git a/src/styles.css b/src/styles.css
index d261c3e..f88ea38 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "./styles/_accordion.css";
+@import "./styles/_file-input.css";
 
 @plugin "@tailwindcss/typography";
 
diff --git a/src/styles/_file-input.css b/src/styles/_file-input.css
new file mode 100644
index 0000000..6d97b83
--- /dev/null
+++ b/src/styles/_file-input.css
@@ -0,0 +1,22 @@
+.file-input {
+	height: 3rem;
+	padding-inline-end: 1rem;
+	font-size: 0.875rem;
+	line-height: 2;
+	border-width: 1px;
+	border-color: var(--accent);
+	border-radius: 0.5rem;
+	background-color: var(--header-bg);
+	flex-shrink: 1;
+}
+
+.file-input::file-selector-button {
+	color: var(--header-bg);
+	font-weight: 600;
+	text-transform: uppercase;
+	text-align: center;
+	background-color: var(--accent);
+	cursor: pointer;
+	height: 100%;
+	padding: 0 1rem;
+}