diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 717cbde..fec13ab 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,6 +19,8 @@ import EditEscapeRoom from './pages/EditEscapeRoom'
 import EscapeRoomDetails from './pages/EscapeRoomDetails'
 
 import Girls from './pages/Girls';
+import CreateGirl from './pages/CreateGirl';
+import EditGirl from './pages/EditGirl';
 
 import UnderConstruction from './pages/UnderConstruction'
 import UserProfileView from './pages/UserProfieView'
@@ -79,6 +81,8 @@ function App() {
           <Route path="/escape-rooms/:escapeRoomId" element={<ProtectedRoute><EscapeRoomDetails /></ProtectedRoute>} />
           <Route path="/computer-club" element={<ProtectedRoute><UnderConstruction /></ProtectedRoute>} />
           <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="/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/Girl.jsx b/frontend/src/components/Girl.jsx
index 2226df8..08a28f4 100644
--- a/frontend/src/components/Girl.jsx
+++ b/frontend/src/components/Girl.jsx
@@ -2,7 +2,7 @@ import { useNavigate, Link } from "react-router-dom"
 
 import api from "../api"
 
-export default function Girl({ girl }) {
+export default function Girl({ girl, onDeleteGirl }) {
     const navigate = useNavigate();
     const onDelete = async (id) => {
 
@@ -10,7 +10,9 @@ export default function Girl({ girl }) {
             .then(response => {
                 if (response.status === 204) {
                     console.log("Girl deleted successfully!");
-                    navigate('/girls/', { replace: true });
+                    console.log(id);
+                    onDeleteGirl(id);
+                    // navigate('/girls/', { replace: true });
                 } else {
                     console.log("Girl was not deleted!");
                 }
diff --git a/frontend/src/components/Service.jsx b/frontend/src/components/Service.jsx
index 079e075..7334ef5 100644
--- a/frontend/src/components/Service.jsx
+++ b/frontend/src/components/Service.jsx
@@ -1,7 +1,7 @@
 import api from '../api';
 import { useNavigate } from "react-router-dom";
 
-export default function Service({ service }) {
+export default function Service({ service, onDeleteService }) {
 
     const navigate = useNavigate();
 
@@ -10,8 +10,7 @@ export default function Service({ service }) {
           .then((res) => {
             if (res.status === 204) {
               console.log("Service deleted successfully!");
-            //   This app should have been SPA, but in some cases it's easier to reload pages
-            navigate('/services/', { replace: true });
+              onDeleteService(id);
             } else {
               console.log("Service was not deleted!");
             }
diff --git a/frontend/src/pages/CreateGirl.jsx b/frontend/src/pages/CreateGirl.jsx
new file mode 100644
index 0000000..ea2d9a3
--- /dev/null
+++ b/frontend/src/pages/CreateGirl.jsx
@@ -0,0 +1,138 @@
+import { useNavigate } from 'react-router-dom';
+import api from '../api';
+import { useState } from 'react';
+
+export default function CreateGirl() {
+    const [image, setImage] = useState("");
+    const [name, setName] = useState("");
+    const [bio, setBio] = useState("");    
+    const [age, setAge] = useState("");
+    const [height, setHeight] = useState("");
+    const [skinColor, setSkinColor] = useState("");
+    const [hairColor, setHairColor] = useState("");
+    const [eyeColor, setEyeColor] = useState("");    
+    const navigate = useNavigate();
+  
+    const createEvent = async (e) => {
+      e.preventDefault();    
+      api.post("/api/girls/create/", { image, name, bio, age, skin_color: skinColor, hair_color: hairColor, eye_color: eyeColor, height })
+        .then((res) => {
+          if (res.status === 201) {
+            console.log("Girl addes successfully!");
+            navigate('/strip-club/');
+  
+          } else {
+            console.log("Girl was not added!");
+          }
+  
+        })
+        .catch((error) => console.error(`Error: ${error}`));
+  
+    }
+
+    return (
+        <div>
+            <h2 className="crud-title">Create Girl</h2>
+            <form className="form-container" onSubmit={createEvent}>
+                <label htmlFor="imageUrl">Image URL:</label>
+                <input
+                    className="form-input"
+                    type="text"
+                    id="imageUrl"
+                    name="imageUrl"
+                    required
+                    onChange={(e) => setImage(e.target.value)}
+                    value={image}
+                />
+                {/^https?:\/\/\S+$/.test(image) ? '' : <small className="error">Enter a valid web address. It should start with http:// or https://</small>}
+                <label htmlFor="name">Name:</label>
+                <input
+                    className="form-input"
+                    type="text"
+                    id="name"
+                    name="name"
+                    required
+                    onChange={(e) => setName(e.target.value)}
+                    value={name}
+                />
+                {(name) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="description">Bio:</label>
+                <textarea
+                    className="form-input"
+                    id="bio"
+                    name="bio"
+                    required
+                    onChange={(e) => setBio(e.target.value)}
+                    value={bio}
+                />
+                {(bio) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="age">Age:</label>
+                <input
+                    type="number"
+                    className="form-input"
+                    id="age"
+                    name="age"
+                    required
+                    onChange={(e) => setAge(e.target.value)}
+                    value={age}
+                    min="18"
+                    max="70"
+                />
+                {/* if (age < 18) {
+                    <small className="error">The minimum age is 18</small>
+                } else if (age > 70) {
+                    <small className="error">The maximum age is 70</small>
+                } else {
+                    null
+                } */}
+                {(age) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="height">Height:</label>
+                <input
+                    type="number"
+                    className="form-input"
+                    id="height"
+                    name="height"
+                    required
+                    onChange={(e) => setHeight(e.target.value)}
+                    value={height}
+                />
+                {(height) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="skinColor">Skin Color:</label>
+                <input
+                    type="text"
+                    className="form-input"
+                    id="skinColor"
+                    name="skinColor"
+                    required
+                    onChange={(e) => setSkinColor(e.target.value)}
+                    value={skinColor}
+                />
+                {(skinColor) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="hairColor">Hair Color:</label>
+                <input
+                    type="text"
+                    className="form-input"
+                    id="hairColor"
+                    name="hairColor"
+                    required
+                    onChange={(e) => setHairColor(e.target.value)}
+                    value={hairColor}
+                />
+                {(hairColor) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="eyeColor">Eye Color:</label>
+                <input
+                    type="text"
+                    className="form-input"
+                    id="eyeColor"
+                    name="eyeColor"
+                    required
+                    onChange={(e) => setEyeColor(e.target.value)}
+                    value={eyeColor}
+                />
+                {(eyeColor) ? null : <small className="error">This field is required</small>}
+
+                <input type="submit" value="Submit" />
+            </form>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/EditGirl.jsx b/frontend/src/pages/EditGirl.jsx
new file mode 100644
index 0000000..c6745cb
--- /dev/null
+++ b/frontend/src/pages/EditGirl.jsx
@@ -0,0 +1,167 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import api from '../api';
+import { useState, useEffect } from 'react';
+
+
+export default function EditEscapeRoom() {
+    const { girlId } = useParams();
+    const [girls, setGirls] = useState([]);
+
+    const [image, setImage] = useState("");
+    const [name, setName] = useState("");
+    const [bio, setBio] = useState("");    
+    const [age, setAge] = useState("");
+    const [height, setHeight] = useState("");
+    const [skinColor, setSkinColor] = useState("");
+    const [hairColor, setHairColor] = useState("");
+    const [eyeColor, setEyeColor] = useState("");  
+    const navigate = useNavigate();
+
+    const getGirls = async () => {
+        api.get("/api/girls/")
+        .then((response) => {
+            setGirls(response.data);
+        })
+        .catch((error) => console.error(`Error: ${error}`));;
+    }
+
+    useEffect(() => {
+        getGirls();
+    }, []);
+
+    useEffect(() => {
+        const girlToUpdate = girls.find(girl => girl.id == girlId);
+        if (girlToUpdate) {
+            setImage(girlToUpdate.image);
+            setName(girlToUpdate.name);
+            setBio(girlToUpdate.bio);
+            setAge(girlToUpdate.age);
+            setHeight(girlToUpdate.height);
+            setSkinColor(girlToUpdate.skin_color);
+            setHairColor(girlToUpdate.hair_color);
+            setEyeColor(girlToUpdate.eye_color);            
+        }
+    }, [girls, girlId]);
+
+    const editGirl = async (e) => {
+        e.preventDefault();
+        const requestData = { image, name, bio, age, skin_color: skinColor, hair_color: hairColor, eye_color: eyeColor, height };
+        console.log("Request Data:", requestData);
+        api.put(`/api/girls/${girlId}/`, requestData)
+            .then((res) => {
+                if (res.status === 200) {
+                    console.log("Girl updated successfully!");
+                    navigate('/strip-club/');
+                } else {
+                    console.log("Girl was not updated!");
+                }
+            })
+            .catch((error) => console.error(`Error: ${error}`));
+    }
+
+    return (
+        <div>
+            <h2 className="crud-title">Edit Girl</h2>
+            <form className="form-container" onSubmit={editGirl}>
+                <label htmlFor="imageUrl">Image URL:</label>
+                <input
+                    className="form-input"
+                    type="text"
+                    id="imageUrl"
+                    name="imageUrl"
+                    required
+                    onChange={(e) => setImage(e.target.value)}
+                    value={image}
+                />
+                {/^https?:\/\/\S+$/.test(image) ? '' : <small className="error">Enter a valid web address. It should start with http:// or https://</small>}
+                <label htmlFor="name">Name:</label>
+                <input
+                    className="form-input"
+                    type="text"
+                    id="name"
+                    name="name"
+                    required
+                    onChange={(e) => setName(e.target.value)}
+                    value={name}
+                />
+                {(name) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="description">Bio:</label>
+                <textarea
+                    className="form-input"
+                    id="bio"
+                    name="bio"
+                    required
+                    onChange={(e) => setBio(e.target.value)}
+                    value={bio}
+                />
+                {(bio) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="age">Age:</label>
+                <input
+                    type="number"
+                    className="form-input"
+                    id="age"
+                    name="age"
+                    required
+                    onChange={(e) => setAge(e.target.value)}
+                    value={age}
+                    min="18"
+                    max="70"
+                />
+                {/* if (age < 18) {
+                    <small className="error">The minimum age is 18</small>
+                } else if (age > 70) {
+                    <small className="error">The maximum age is 70</small>
+                } else {
+                    null
+                } */}
+                {(age) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="height">Height:</label>
+                <input
+                    type="number"
+                    className="form-input"
+                    id="height"
+                    name="height"
+                    required
+                    onChange={(e) => setHeight(e.target.value)}
+                    value={height}
+                />
+                {(height) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="skinColor">Skin Color:</label>
+                <input
+                    type="text"
+                    className="form-input"
+                    id="skinColor"
+                    name="skinColor"
+                    required
+                    onChange={(e) => setSkinColor(e.target.value)}
+                    value={skinColor}
+                />
+                {(skinColor) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="hairColor">Hair Color:</label>
+                <input
+                    type="text"
+                    className="form-input"
+                    id="hairColor"
+                    name="hairColor"
+                    required
+                    onChange={(e) => setHairColor(e.target.value)}
+                    value={hairColor}
+                />
+                {(hairColor) ? null : <small className="error">This field is required</small>}
+                <label htmlFor="eyeColor">Eye Color:</label>
+                <input
+                    type="text"
+                    className="form-input"
+                    id="eyeColor"
+                    name="eyeColor"
+                    required
+                    onChange={(e) => setEyeColor(e.target.value)}
+                    value={eyeColor}
+                />
+                {(eyeColor) ? null : <small className="error">This field is required</small>}
+
+                <input type="submit" value="Submit" />
+            </form>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Girls.jsx b/frontend/src/pages/Girls.jsx
index af1ea6c..42cca42 100644
--- a/frontend/src/pages/Girls.jsx
+++ b/frontend/src/pages/Girls.jsx
@@ -13,7 +13,7 @@ export default function Girls() {
 
     useEffect(() => {
         getGirls();
-    }, [Girls]);
+    }, []);
 
     const getGirls = async () => {
         api.get("/api/girls/")
@@ -35,6 +35,10 @@ export default function Girls() {
         setDisplayedGirls(Girls.slice(startIndex, endIndex));
     }, [Girls, searchParams]);
 
+    const handleDelete = (id) => {
+        setGirls(prevGirls => prevGirls.filter(girl => girl.id !== id));
+    }
+
 
     return (
         <section className="girls" id="girls">
@@ -43,7 +47,7 @@ export default function Girls() {
                     <h2 className="section-title">Girls</h2>
                 </div>
                 <div className="center-xs girls-container">
-                    {displayedGirls.map((girl, index) => <Girl key={index} girl={girl} />)}
+                    {displayedGirls.map((girl, index) => <Girl key={index} girl={girl} onDeleteGirl={handleDelete} />)}
                 </div>
                 {
                     localStorage.getItem('admin') === 'true' && (
@@ -54,7 +58,7 @@ export default function Girls() {
                 }
             </div>
             <div className="pagination-wrapper">
-                {pages.map((page, index) => <Link key={index} to={`/girls?page=${page}`}>{page}</Link>)}
+                {pages.map((page, index) => <Link key={index} to={`/strip-club?page=${page}`}>{page}</Link>)}
             </div>
         </section>
 
diff --git a/frontend/src/pages/Services.jsx b/frontend/src/pages/Services.jsx
index 843f6d6..4994267 100644
--- a/frontend/src/pages/Services.jsx
+++ b/frontend/src/pages/Services.jsx
@@ -8,7 +8,7 @@ export default function Services() {
 
     useEffect(() => {
         getServices();
-    }, [services]);
+    }, []);
 
     const getServices = async () => {
         api.get("/api/services/", { headers: { 
@@ -20,6 +20,10 @@ export default function Services() {
         .catch((error) => console.error(`Error: ${error}`));;
     }
 
+    const handleDelete = (id) => {
+        setServices(prevServices => prevServices.filter(service => service.pk !== id));
+    }
+
 
     return (
         <section className="services" id="services">
@@ -28,7 +32,7 @@ export default function Services() {
                     <h2 className="section-title">Services</h2>
                 </div>
                 <div className="center-xs services-container">
-                    {services.map((service, index) => <Service key={index} service={service} />) }
+                    {services.map((service, index) => <Service key={index} service={service} onDeleteService={handleDelete}/>) }
                 </div>
                 {
                     localStorage.getItem('admin') === 'true' && (