diff --git a/src/interfaces/entities/Results/index.ts b/src/interfaces/entities/Results/index.ts
index 8fcb5c8..ec16f8c 100644
--- a/src/interfaces/entities/Results/index.ts
+++ b/src/interfaces/entities/Results/index.ts
@@ -7,5 +7,5 @@ export interface IResult extends IBaseEntity {
     name: string;
     userId: string;
     user?: IUser;
-    inputValues: IInputValue[];
+    inputValues?: IInputValue[];
 }
diff --git a/src/interfaces/responses/Result/index.ts b/src/interfaces/responses/Result/index.ts
index 964755f..8b935e0 100644
--- a/src/interfaces/responses/Result/index.ts
+++ b/src/interfaces/responses/Result/index.ts
@@ -14,3 +14,13 @@ export interface IPredict {
     }[];
 }
 export interface IResultPredictResponse extends IBaseResponse<IPredict> {}
+
+export interface IResultPredictByResultIdResponse
+    extends IBaseResponse<{
+        result: IResult;
+        predict: {
+            variableOutputId: number;
+            variableOutputName: string;
+            value: number;
+        }[];
+    }> {}
diff --git a/src/pages/Result/Detail.tsx b/src/pages/Result/Detail.tsx
new file mode 100644
index 0000000..efbdf0d
--- /dev/null
+++ b/src/pages/Result/Detail.tsx
@@ -0,0 +1,77 @@
+import { Breadcrumbs } from "@/common/breadcrumb";
+import LoaderCenter from "@/components/shared/Loader/LoaderCenter";
+import { getDecimalPlace } from "@/helpers/number";
+import { IInputValue } from "@/interfaces/entities/InputValues";
+import MainLayout from "@/layouts/MainLayout";
+import { useResultPredictByresultId } from "@/services/query/Result";
+import { Card, Col, Row, Table } from "antd";
+import { ColumnsType } from "antd/es/table";
+import React from "react";
+import { useParams } from "react-router-dom";
+
+const DetailResultPredict: React.FC = () => {
+    const { id } = useParams();
+    const query = useResultPredictByresultId(id);
+    const columnsResultPredict: ColumnsType = [
+        {
+            title: "Variable Output",
+            dataIndex: "variableOutputName",
+        },
+        {
+            title: "Value",
+            dataIndex: "value",
+            render: (value) => getDecimalPlace(value, 3),
+        },
+    ];
+
+    const columnsVariableInput: ColumnsType<IInputValue> = [
+        {
+            title: "Variable Input",
+            render: (_, record) => record?.variableInput?.name,
+        },
+        {
+            title: "Value",
+            render: (_, record) => record?.value,
+        },
+    ];
+
+    const mainContent = (
+        <Row gutter={20} justify="center">
+            <Col>
+                <Table
+                    pagination={false}
+                    bordered
+                    size="small"
+                    dataSource={query?.data?.data?.result?.inputValues}
+                    columns={columnsVariableInput}
+                />
+            </Col>
+            <Col>
+                <Table
+                    pagination={false}
+                    bordered
+                    size="small"
+                    dataSource={query?.data?.data?.predict}
+                    columns={columnsResultPredict}
+                />
+            </Col>
+        </Row>
+    );
+
+    return (
+        <MainLayout
+            title="Detail Predict"
+            breadcrumbs={Breadcrumbs.Result.Detail(id)}
+        >
+            <Card>
+                {query?.isLoading || query?.isFetching ? (
+                    <LoaderCenter />
+                ) : (
+                    mainContent
+                )}
+            </Card>
+        </MainLayout>
+    );
+};
+
+export default DetailResultPredict;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index f1413f5..4549f7f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -33,6 +33,7 @@ const MatrixCompareEditByInputPage = React.lazy(
 
 const ResultIndexPage = React.lazy(() => import("@/pages/Result"));
 const ResultCreatePage = React.lazy(() => import("@/pages/Result/Create"));
+const ResultDetailPage = React.lazy(() => import("@/pages/Result/Detail"));
 
 export const withSuspense = (component: ReactNode) => {
     return <Suspense fallback={<LoaderFullscreen />}>{component}</Suspense>;
@@ -143,4 +144,12 @@ export const router = createBrowserRouter([
             </PrivateRoute>
         ),
     },
+    {
+        path: Routes.ResultDetail,
+        element: withSuspense(
+            <PrivateRoute>
+                <ResultDetailPage />
+            </PrivateRoute>
+        ),
+    },
 ]);
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 40984e3..3b0ad1e 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -44,4 +44,6 @@ export enum EndpointApi {
     ResultByUserLogin = "/result-by-user-login",
     ResultDetail = "/result/:id",
     ResultPredict = "/predict",
+
+    ResultPredictGetByResultID = "/result-predict/:resultId",
 }
diff --git a/src/services/apis/Result/index.ts b/src/services/apis/Result/index.ts
index 0076d29..7c99f66 100644
--- a/src/services/apis/Result/index.ts
+++ b/src/services/apis/Result/index.ts
@@ -2,6 +2,7 @@ import { AxiosError } from "axios";
 import { axiosAuthInstance } from "..";
 import { EndpointApi } from "@/routes/routes";
 import { IPredictRequest } from "@/interfaces/requests/Result";
+import { parsingRoute } from "@/helpers/route";
 
 export const resultGetByUserLogin = async () => {
     try {
@@ -14,6 +15,28 @@ export const resultGetByUserLogin = async () => {
     }
 };
 
+export const resultGetById = async (id) => {
+    try {
+        const response = await axiosAuthInstance.get(
+            parsingRoute(EndpointApi.ResultDetail, { id })
+        );
+        return response.data;
+    } catch (error) {
+        throw (error as AxiosError).response.data;
+    }
+};
+
+export const resultPredictByResultId = async (resultId) => {
+    try {
+        const response = await axiosAuthInstance.get(
+            parsingRoute(EndpointApi.ResultPredictGetByResultID, { resultId })
+        );
+        return response.data;
+    } catch (error) {
+        throw (error as AxiosError).response.data;
+    }
+};
+
 export const resultPredict = async (payload: IPredictRequest) => {
     try {
         const response = await axiosAuthInstance.post(
diff --git a/src/services/query/Result/index.ts b/src/services/query/Result/index.ts
index a1bdbf7..50e3a05 100644
--- a/src/services/query/Result/index.ts
+++ b/src/services/query/Result/index.ts
@@ -1,6 +1,14 @@
-import { IResultListResponse } from "@/interfaces/responses/Result";
+import {
+    IResultDetailResponse,
+    IResultListResponse,
+    IResultPredictByResultIdResponse,
+} from "@/interfaces/responses/Result";
 import { IBaseResponse } from "@/interfaces/responses/base";
-import { resultGetByUserLogin } from "@/services/apis/Result";
+import {
+    resultGetById,
+    resultGetByUserLogin,
+    resultPredictByResultId,
+} from "@/services/apis/Result";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 
 export const useResultByUserLoginQuery = (
@@ -12,3 +20,30 @@ export const useResultByUserLoginQuery = (
         ...options,
     });
 };
+
+export const useResultByIdQuery = (
+    id,
+    options?: UseQueryOptions<IResultDetailResponse, IBaseResponse<unknown>>
+) => {
+    return useQuery({
+        queryKey: ["result-by-id", id],
+        queryFn: () => resultGetById(id),
+        enabled: !!id,
+        ...options,
+    });
+};
+
+export const useResultPredictByresultId = (
+    id,
+    options?: UseQueryOptions<
+        IResultPredictByResultIdResponse,
+        IBaseResponse<unknown>
+    >
+) => {
+    return useQuery({
+        queryKey: ["result-predict-by-result-id", id],
+        queryFn: () => resultPredictByResultId(id),
+        enabled: !!id,
+        ...options,
+    });
+};