diff --git a/frontend/src/components/catalogs/CatalogActors.jsx b/frontend/src/components/catalogs/CatalogActors.jsx
new file mode 100644
index 0000000..6cc0434
--- /dev/null
+++ b/frontend/src/components/catalogs/CatalogActors.jsx
@@ -0,0 +1,51 @@
+import Catalog from "../common/Catalog";
+import { useEffect, useState } from "react";
+
+import DataService from "../../services/DataService";
+
+let headers = [
+  {label: "name", text: "Имя"},
+  {label: "surname", text: "Фамилия"}
+]
+
+export default function CatalogActors() {
+  const url = "/actors";
+
+  const [data, setData] = useState({
+    name: "",
+    surname: ""
+  });
+
+  const [actors, setActors] = useState([]);
+
+  function handleFormChange(e) {
+    setData({ ...data, [e.target.id]: e.target.value })
+  }
+
+  function onAdd() {
+    setData({name: "", genre: actors[0]});
+  }
+
+  
+  function onChange(data) {
+    setData(data);
+  }
+
+  function validate(data) {
+    if(data.name === "") return false;
+    return true;
+  }
+
+  return (
+    <Catalog url={url} headers={headers} data={data} onAdd={onAdd} onChange={onChange} validate={validate}>
+      <div className="mb-3">
+          <label htmlFor="name" className="form-label">Имя</label>
+          <input type="text" value={data.name} id="name" className="form-control" required autoComplete="off"
+              onChange={handleFormChange}/>
+          <label htmlFor="surname" className="form-label">Фамилия</label>
+          <input type="text" value={data.surname} id="surname" className="form-control" required autoComplete="off"
+                  onChange={handleFormChange}/>
+      </div>
+    </Catalog>
+  )
+}
\ No newline at end of file