diff --git a/frontend/src/App.js b/frontend/src/App.js
index 1bcb27a..18197b9 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -10,6 +10,7 @@ import MyAccount from './components/Auth/MyAccount';
 import Layout from './components/Auth/Layout';
 import Unauthorized from './components/Auth/Unauthorized';
 import AdminPanel from './components/AdminPanel/AdminPanel';
+import BookTicket from './components/Tickets/BookTicket';
 
 export const ROLES = {
 	Admin: 515,
@@ -39,6 +40,7 @@ function App() {
 				{/* {protected user routes} */}
 				<Route element={<RequireAuth allowedRoles={[ROLES.User]} />}>
 					<Route path="/my-account" element={<MyAccount />} />
+					<Route path="/book-ticket" element={<BookTicket />} />
 				</Route>
 				{/* {protected admin routes} */}
 				<Route element={<RequireAuth allowedRoles={[ROLES.Admin]} />}>
diff --git a/frontend/src/components/Tickets/BookTicket.js b/frontend/src/components/Tickets/BookTicket.js
new file mode 100644
index 0000000..cb1e35e
--- /dev/null
+++ b/frontend/src/components/Tickets/BookTicket.js
@@ -0,0 +1,65 @@
+import { Button } from 'primereact/button';
+import { useState } from 'react';
+
+function BookTicket() {
+	const [count, setCount] = useState(0);
+
+	function handleMinus() {
+		setCount(count - 1);
+	}
+
+	function handlePlus() {
+		setCount(count + 1);
+	}
+
+	return (
+		<>
+			<div className="ticket-outer-container">
+				<div className="ticket-inner-container">
+					<div className="ticket-container">
+						<div>
+							<img
+								className="ticket-poster"
+								src="https://picsum.photos/400/600"
+								alt="movie-poster"></img>
+						</div>
+						<div>
+							<div className="ticket-title">
+								<h2>Book a Ticket</h2>
+							</div>
+							<div className="ticket-details">
+								<h3 className="ticket-movie-title">Movie Title</h3>
+								<div className="ticket-info">
+									<p>Selected screening: Today, 10:00 | SALA 9</p>
+									<p>Selected seat: 16 | 17</p>
+									<p>Your data: name | email@email.com</p>
+									<p>Total amount: 20 PLN</p>
+								</div>
+								<div className="ticket-quantity-container">
+									<Button
+										onClick={handleMinus}
+										type="submit"
+										label="-"
+										className="ticket-quantity-btn"
+									/>
+									<span className="ticket-quantity">{count}</span>
+									<Button
+										onClick={handlePlus}
+										type="submit"
+										label="+"
+										className="ticket-quantity-btn"
+									/>
+								</div>
+								<div className="ticket-btn-submit-container">
+									<Button type="submit" label="Book" className="ticket-btn-submit" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default BookTicket;
diff --git a/frontend/src/components/Tickets/BuyTicket.js b/frontend/src/components/Tickets/BuyTicket.js
new file mode 100644
index 0000000..387eea1
--- /dev/null
+++ b/frontend/src/components/Tickets/BuyTicket.js
@@ -0,0 +1,35 @@
+import { Button } from 'primereact/button';
+
+function BuyTicket() {
+	return (
+		<>
+			<div className="outer-container-but-ticket">
+				<div className="inner-container-but-ticket">
+					<h2 className="buy-ticket-title">Select payment method</h2>
+					<div className="buy-ticket-movie-info">
+						<div>
+							<img src="https://picsum.photos/200/300" alt="movie-poster"></img>
+						</div>
+						<div className="buy-ticket-details">
+							<h3>Movie Title</h3>
+							<p>Selected screening: Today, 10:00 | SALA 9</p>
+							<p>Selected seat: 16 | 17</p>
+							<p>Your data: name | email@email.com</p>
+							<p>Total amount: 20 PLN</p>
+						</div>
+					</div>
+					<div className="buy-ticket-payment-options">
+						<div className="buy-ticket-payment-option">
+							<div className="buy-ticket-payment-option-payu"></div>
+							<div className="buy-ticket-payment-option-blik"></div>
+							<div className="buy-ticket-payment-option-visa"></div>
+						</div>
+					</div>
+					<Button type="submit" label="Buy Ticket" className="buy-ticket-sub-btn" />
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default BuyTicket;
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index f4d1ebd..f5d9de4 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -2,13 +2,14 @@
 
 @import './Auth.css';
 @import url(../styles/CarouselDemo.css);
+@import url(./Tickets.css);
 
 :root {
 	--font-style: 'Roboto', sans-serif;
-	--font-color: #C9356D;
-	--webkit-box-shadow: 0px 0px 5px 0px #C9356D;
-	--moz-box-shadow: 0px 0px 5px 0px #C9356D;
-	--box-shadow: 0px 0px 5px 0px #C9356D;
+	--font-color: #c9356d;
+	--webkit-box-shadow: 0px 0px 5px 0px #c9356d;
+	--moz-box-shadow: 0px 0px 5px 0px #c9356d;
+	--box-shadow: 0px 0px 5px 0px #c9356d;
 }
 
 body {
diff --git a/frontend/src/styles/Auth.css b/frontend/src/styles/Auth.css
index 10d659e..9c22d1e 100644
--- a/frontend/src/styles/Auth.css
+++ b/frontend/src/styles/Auth.css
@@ -36,7 +36,6 @@
 
 .inner-container {
 	display: flex;
-	justify-content: center;
 	flex-direction: column;
 	align-items: center;
 	padding: 100px;
diff --git a/frontend/src/styles/Tickets.css b/frontend/src/styles/Tickets.css
new file mode 100644
index 0000000..a2ae47b
--- /dev/null
+++ b/frontend/src/styles/Tickets.css
@@ -0,0 +1,130 @@
+.ticket-outer-container {
+	display: flex;
+	justify-content: center;
+	margin-top: 20px;
+}
+
+.ticket-inner-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.ticket-title {
+	margin-bottom: 40px;
+	color: var(--font-color);
+	display: flex;
+	justify-content: center;
+}
+
+.ticket-poster {
+	-webkit-box-shadow: var(--webkit-box-shadow);
+	-moz-box-shadow: var(--moz-box-shadow);
+	box-shadow: var(--box-shadow);
+}
+
+.ticket-movie-title {
+	font-size: 1.3rem;
+}
+
+.ticket-info {
+	font-size: 1.2rem;
+}
+
+.ticket-container {
+	margin-top: 10px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 120px;
+}
+
+.ticket-details {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	color: azure;
+}
+
+.ticket-quantity-btn {
+	background: var(--font-color) !important;
+	font-size: 1.5rem !important;
+	border-radius: 15px !important;
+}
+
+.ticket-btn-submit {
+	background: var(--font-color) !important;
+	font-size: 1.2rem !important;
+	border-radius: 15px !important;
+	min-width: 150px !important;
+	min-height: 50px;
+}
+
+.ticket-btn-submit-container {
+	display: flex;
+	justify-content: center;
+}
+
+.ticket-quantity-container {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	align-items: center;
+	justify-items: center;
+	margin-top: 20px;
+	margin-bottom: 40px;
+	padding: 20px 0 20px 0;
+}
+
+.ticket-quantity {
+	font-size: 1.5rem;
+}
+
+.buy-ticket-payment-options {
+	margin-top: 40px;
+}
+
+.buy-ticket-payment-option {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 20px;
+	justify-items: center;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.buy-ticket-payment-option-payu,
+.buy-ticket-payment-option-blik,
+.buy-ticket-payment-option-visa {
+	cursor: pointer;
+}
+
+.buy-ticket-payment-option-payu {
+	width: 100px;
+	height: 100px;
+	background-image: url('https://cdn-icons-png.flaticon.com/512/825/825520.png');
+	background-size: 100px;
+}
+
+.buy-ticket-payment-option-blik {
+	width: 100px;
+	height: 50px;
+	background-image: url('https://iconape.com/wp-content/files/fw/164902/png/blik-logo.png');
+	background-size: 100px;
+}
+
+.buy-ticket-payment-option-visa {
+	width: 120px;
+	height: 120px;
+	background-image: url('https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/visa-512.png');
+	background-size: 120px;
+}
+
+@media only screen and (max-width: 1000px) {
+	.ticket-container {
+		grid-template-columns: 1fr;
+	}
+
+	.outer-container-but-ticket {
+		margin-bottom: 30px;
+	}
+}