diff --git a/online-library/src/Choice/Choice.jsx b/online-library/src/Choice/Choice.jsx
new file mode 100644
index 0000000..0b7f512
--- /dev/null
+++ b/online-library/src/Choice/Choice.jsx
@@ -0,0 +1,73 @@
+import CustomList from "./CustomList/CustomList";
+
+function Choice() {
+  const data = [
+    {
+      title: "Книги про психологию",
+      id: "психология",
+      listOfElements: [
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+      ],
+    },
+    {
+      title: "Военные книги",
+      id: "военные",
+      listOfElements: [
+        { title: "etgsfdz" },
+        { title: "fgdsfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+      ],
+    },
+    {
+      title: "Детские книги",
+      id: "детские",
+      listOfElements: [
+        { title: "etgsfdz" },
+        { title: "fgdsfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+      ],
+    },
+    {
+      title: "Научная литература",
+      id: "наука",
+      listOfElements: [
+        { title: "etgsfdz" },
+        { title: "fgdsfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+        { title: "etgsfdz" },
+        { title: "fgdsкукыавчfdz" },
+      ],
+    },
+  ];
+  return (
+    <main className="container">
+      <h1 className="text-center mb-5" style={{ color: "var(--accent)" }}>
+        Книги по тематикам
+      </h1>
+      <div className="row g-4">
+        {data.map((item, index) => (
+          <CustomList
+            key={index}
+            id={item.id}
+            listOfElements={item.listOfElements}
+            title={item.title}
+          />
+        ))}
+      </div>
+    </main>
+  );
+}
+
+export default Choice;