diff --git a/modules/frontend/src/api/core/OpenAPI.ts b/modules/frontend/src/api/core/OpenAPI.ts
index 6ce873e..185e5c3 100644
--- a/modules/frontend/src/api/core/OpenAPI.ts
+++ b/modules/frontend/src/api/core/OpenAPI.ts
@@ -20,7 +20,7 @@ export type OpenAPIConfig = {
 };
 
 export const OpenAPI: OpenAPIConfig = {
-    BASE: 'http://10.1.0.65:8081/api/v1',
+    BASE: '/api/v1',
     VERSION: '1.0.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
diff --git a/modules/frontend/src/pages/TitlesPage/TitlesPage.module.css b/modules/frontend/src/pages/TitlesPage/TitlesPage.module.css
deleted file mode 100644
index f1d8c73..0000000
--- a/modules/frontend/src/pages/TitlesPage/TitlesPage.module.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "tailwindcss";
diff --git a/modules/frontend/src/pages/TitlesPage/TitlesPage.tsx b/modules/frontend/src/pages/TitlesPage/TitlesPage.tsx
index 0fec3c8..c9911b9 100644
--- a/modules/frontend/src/pages/TitlesPage/TitlesPage.tsx
+++ b/modules/frontend/src/pages/TitlesPage/TitlesPage.tsx
@@ -7,6 +7,7 @@ import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
 import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
 import type { CursorObj, Title, TitleSort } from "../../api";
 import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
+import { Link } from "react-router-dom";
 
 const PAGE_SIZE = 10;
 
@@ -135,11 +136,11 @@ const handleLoadMore = async () => {
             hasMore={!!cursor || nextPage.length > 1}
             loadingMore={loadingMore}
             onLoadMore={handleLoadMore}
-            renderItem={(title, layout) =>
-              layout === "square"
-                ? <TitleCardSquare title={title} />
-                : <TitleCardHorizontal title={title} />
-            }
+            renderItem={(title, layout) => (
+              <Link to={`/titles/${title.id}`} key={title.id} className="block">
+                {layout === "square" ? <TitleCardSquare title={title} /> : <TitleCardHorizontal title={title} />}
+              </Link>
+            )}
           />
 
           {!cursor && nextPage.length == 0 && (
diff --git a/modules/frontend/src/pages/UserPage/UserPage.tsx b/modules/frontend/src/pages/UserPage/UserPage.tsx
index 5fbd6b8..494ba99 100644
--- a/modules/frontend/src/pages/UserPage/UserPage.tsx
+++ b/modules/frontend/src/pages/UserPage/UserPage.tsx
@@ -9,6 +9,7 @@ import { ListView } from "../../components/ListView/ListView";
 import { UserTitleCardSquare } from "../../components/cards/UserTitleCardSquare";
 import { UserTitleCardHorizontal } from "../../components/cards/UserTitleCardHorizontal";
 import type { User, UserTitle, CursorObj, TitleSort } from "../../api";
+import { Link } from "react-router-dom";
 
 const PAGE_SIZE = 10;
 
@@ -129,8 +130,6 @@ export default function UserPage({ userId }: UserPageProps) {
     setLoadingMore(false);
   };
 
-  // const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
-
   return (
     <div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
 
@@ -166,9 +165,11 @@ export default function UserPage({ userId }: UserPageProps) {
             hasMore={!!cursor || nextPage.length > 1}
             loadingMore={loadingMore}
             onLoadMore={handleLoadMore}
-            renderItem={(title, layout) =>
-              layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />
-            }
+            renderItem={(title, layout) => (
+              <Link to={`/titles/${title.title?.id}`} key={title.title?.id} className="block">
+                {layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />}
+              </Link>
+            )}
           />
 
           {!cursor && nextPage.length === 0 && (