diff --git a/frontend/public/styles/theme.css b/frontend/public/styles/theme.css
index 380412f..bcbb9fc 100644
--- a/frontend/public/styles/theme.css
+++ b/frontend/public/styles/theme.css
@@ -342,7 +342,7 @@ hr {
 }
 
 
-.icon.event-details-img {
+.icon.event-details-img{
 	width: 40%;
 	height: 16rem;
 	border-radius: 10px;
@@ -350,12 +350,19 @@ hr {
 	filter: drop-shadow(0px 0px 9px rgb(128, 20, 20));
 }
 
+.icon.girl-details-img {
+	width: 50%;
+	border-radius: 10px;
+	margin-top: 1rem;
+	filter: drop-shadow(0px 0px 9px rgb(128, 20, 20));
+}
+
 .icon.event-img:hover, .icon.service-img:hover {
 	filter: saturate(2) drop-shadow(0px 0px 9px red);
 	cursor: pointer;
 }
 
-.icon.event-details-img:hover {
+.icon.event-details-img:hover, .icon.girl-details-img:hover {
 	filter: saturate(2) drop-shadow(0px 0px 9px red);
 }
 
@@ -459,7 +466,7 @@ button, .button, .service > a.button {
 	font-size: 0.8rem;	
 }
 
-.event-details {
+.event-details, .girl-details {
 	flex-direction: column;
 	align-items: center;
 }
@@ -657,11 +664,11 @@ footer li a{
 		display: none;
 	}
 
-	.icon.event-details-img {
+	.icon.event-details-img, .icon.girl-details-img {
 		width: 100%;
 	}
 
-	.event-details {
+	.event-details , .girl-details{
 		width: 90%;
 		margin: 0 auto;
 	}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fec13ab..57fe5e5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -21,6 +21,7 @@ import EscapeRoomDetails from './pages/EscapeRoomDetails'
 import Girls from './pages/Girls';
 import CreateGirl from './pages/CreateGirl';
 import EditGirl from './pages/EditGirl';
+import GirlDetails from './pages/GirlDetails';
 
 import UnderConstruction from './pages/UnderConstruction'
 import UserProfileView from './pages/UserProfieView'
@@ -83,6 +84,7 @@ function App() {
           <Route path="/strip-club" element={<ProtectedRoute><Girls /></ProtectedRoute>} />
           <Route path="/girls/create" element={<ProtectedRoute><CreateGirl /></ProtectedRoute>} />
           <Route path="/girls/edit/:girlId" element={<ProtectedRoute><EditGirl /></ProtectedRoute>} />
+          <Route path="/girls/:girlId" element={<ProtectedRoute><GirlDetails /></ProtectedRoute>} />
           <Route path="/marketplace" element={<ProtectedRoute><UnderConstruction /></ProtectedRoute>} />
           <Route path="/bet-zone" element={<ProtectedRoute><BetZone /></ProtectedRoute>} />
           <Route path="/user-profile" element={<ProtectedRoute><UserProfileView /></ProtectedRoute>} />
diff --git a/frontend/src/components/RegisterForm.jsx b/frontend/src/components/RegisterForm.jsx
index 535fda8..0488456 100644
--- a/frontend/src/components/RegisterForm.jsx
+++ b/frontend/src/components/RegisterForm.jsx
@@ -3,6 +3,7 @@ import api from "../api";
 import { useNavigate } from "react-router-dom";
 import { ACCESS_TOKEN, REFRESH_TOKEN, ADMIN } from "../constants";
 import LoadingIndicator from "./LoadingIndicator";
+import { validate, changeInput } from "../helpers";
 
 
 export default function RegisterForm({ route, method }) {
@@ -14,30 +15,6 @@ export default function RegisterForm({ route, method }) {
     const navigate = useNavigate();
     const name = (method === 'login') ? 'Enter the realms of Club Doom' : 'Register';
 
-    function changeInput(e) {
-        e.target.setCustomValidity('');
-        const nextElement = e.target.nextElementSibling;
-        if (nextElement && nextElement.classList.contains('error-message')) {
-            nextElement.remove();
-        }
-    }
-
-    function createErrorMesage(target, message) {
-        const errorMessage = document.createElement('p');
-        errorMessage.classList.add('error-message');
-        errorMessage.textContent = message;
-        target.insertAdjacentElement('afterend', errorMessage);
-    }
-
-    function validate(e, message) {
-        const nextElement = e.target.nextElementSibling;
-        if (nextElement && nextElement.classList.contains('error-message')) {
-            nextElement.remove();
-        }
-        e.target.setCustomValidity(' ');
-        createErrorMesage(e.target, message);
-    }
-
     const handleSubmit = async (e) => {
         e.preventDefault();
         setLoading(true);
diff --git a/frontend/src/pages/BetZone.jsx b/frontend/src/pages/BetZone.jsx
index 5e8c938..fb2325b 100644
--- a/frontend/src/pages/BetZone.jsx
+++ b/frontend/src/pages/BetZone.jsx
@@ -1,3 +1,5 @@
+import {Link} from "react-router-dom";
+
 export default function BetZone() {
     return (
         <section className="bet-zone" id="bet-zone">
@@ -40,6 +42,7 @@ export default function BetZone() {
                         <p>The reels are spinning… Will you hit the jackpot?</p>
                     </div>
                 </div>
+                <Link to={`/services/`} className="service button margin-center">Back</Link>
             </div>
         </section>
     )
diff --git a/frontend/src/pages/GirlDetails.jsx b/frontend/src/pages/GirlDetails.jsx
new file mode 100644
index 0000000..967e71e
--- /dev/null
+++ b/frontend/src/pages/GirlDetails.jsx
@@ -0,0 +1,41 @@
+import { Link, useParams } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import api from '../api';
+
+export default function GirlDetails() {
+    const girlId = useParams().girlId;
+    let [girls, setGirls] = useState([]);
+    let [currentGirl, setCurrentGirl] = useState({});
+
+    useEffect(() => {
+        getGirls();
+    }, []);
+
+    useEffect(() => {
+        const girlToUpdate = girls.find(girl => girl.id == girlId);
+        if (girlToUpdate) {
+            setCurrentGirl(girlToUpdate);
+        }
+    }, [girls, girlId]);
+
+    const getGirls = async () => {
+        api.get("/api/girls/", { headers: { 
+            'ngrok-skip-browser-warning': 'true' }
+         })
+            .then((response) => setGirls(response.data))
+            .catch((error) => console.error(`Error: ${error}`));
+    }
+
+    return (
+        <div className="container">
+            <div className="girl-details flex margin-top">
+                <h1>{currentGirl.name}</h1>
+                <img src={currentGirl.image} className="icon girl-details-img" /><br />
+                <p>{currentGirl.bio}</p>
+                <p>Age: {currentGirl.age}</p>
+                <p>Height: {currentGirl.height}</p>
+            </div>
+            <Link to={`/strip-club/`} className="service button margin-center">Back</Link>
+        </div>
+    )
+}
\ No newline at end of file