diff --git a/front/.env b/front/.env
index 75ef813..3731c18 100644
--- a/front/.env
+++ b/front/.env
@@ -4,3 +4,7 @@ NEXT_PUBLIC_API_URL=http://localhost:3016
 # GEN AUTH_SECRET: $ openssl rand -base64 32
 NEXTAUTH_SECRET=6lHRWUvCBtqlgTWc6aFn6s6PudYjuN6oUY+RrcEntTU=
 NEXTAUTH_URL=http://localhost:3016
+
+NEXT_PUBLIC_AUTH_URL=http://localhost:3000/api/v1
+NEXT_PUBLIC_BACKEND_URL=http://localhost:3000/api/v1
+
diff --git a/front/src/modules/auth/configs/auth.options.ts b/front/src/modules/auth/configs/auth.options.ts
index cf0033f..2f83847 100644
--- a/front/src/modules/auth/configs/auth.options.ts
+++ b/front/src/modules/auth/configs/auth.options.ts
@@ -17,16 +17,19 @@ export const authOptions: AuthOptions = {
         password: { label: "Password", type: "password" },
       },
       async authorize(credentials, req) {
-        const response = await fetch("http://localhost:3000/auth/login", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
+        const response = await fetch(
+          process.env.NEXT_PUBLIC_AUTH_URL + "/auth/login",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              username: credentials?.username,
+              password: credentials?.password,
+            }),
           },
-          body: JSON.stringify({
-            username: credentials?.username,
-            password: credentials?.password,
-          }),
-        });
+        );
 
         type LoginResponse = {
           access_token: string;
diff --git a/front/src/modules/example/components/example-detail/example-detail.component.tsx b/front/src/modules/example/components/example-detail/example-detail.component.tsx
index 4ae126e..eb7ad3a 100644
--- a/front/src/modules/example/components/example-detail/example-detail.component.tsx
+++ b/front/src/modules/example/components/example-detail/example-detail.component.tsx
@@ -16,7 +16,7 @@ type ExampleDetailType = {
 
 export const ExampleDetail: React.FC<ExampleDetailProps> = ({ exampleId }) => {
   const result = useQuery<ExampleDetailType>({
-    url: `http://localhost:3000/example/${exampleId}`,
+    url: `${process.env.NEXT_PUBLIC_BACKEND_URL}/example/${exampleId}`,
     options: { headers: {} },
     timeout: 4000,
   });
diff --git a/front/src/modules/example/components/example-list/example-list.component.tsx b/front/src/modules/example/components/example-list/example-list.component.tsx
index 48a0acd..8c772c9 100644
--- a/front/src/modules/example/components/example-list/example-list.component.tsx
+++ b/front/src/modules/example/components/example-list/example-list.component.tsx
@@ -6,16 +6,19 @@ import Link from "next/link";
 type ExampleListProps = {};
 
 type ExampleListType = {
-  id: number;
-  name: string;
-  description: string;
-  image: string;
-  created_at: string;
-}[];
+  results: {
+    id: number;
+    name: string;
+    description: string;
+    image: string;
+    created_at: string;
+  }[];
+  count: number;
+};
 
 export const ExampleList: React.FC<ExampleListProps> = ({}) => {
   const result = useQuery<ExampleListType>({
-    url: "http://localhost:3000/example",
+    url: process.env.NEXT_PUBLIC_BACKEND_URL + "/example",
     options: { headers: {} },
     timeout: 4000,
   });
@@ -31,9 +34,9 @@ export const ExampleList: React.FC<ExampleListProps> = ({}) => {
   return (
     <div data-testid="example-list" className={styles.container}>
       <ul>
-        {result.data?.map((example) => {
+        {result.data?.results?.map((example) => {
           return (
-            <Link href={`/examples/${example.id}`}>
+            <Link href={`/examples/${example.id}`} key={example.id}>
               <li key={example.id}>
                 <Image
                   src={example.image}