diff --git a/src/api/issue/mockIssueDetails.tsx b/src/api/issue/mockIssueDetails.tsx
new file mode 100644
index 0000000..62a5b85
--- /dev/null
+++ b/src/api/issue/mockIssueDetails.tsx
@@ -0,0 +1,18 @@
+import { mockIssues } from "../../mockData/mockIssues";
+
+function sleep(ms = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+const mockIssueDetails = mockIssues[0];
+
+const MockIssueDetailsAPI = {
+  getData: async function (url: string) {
+    await sleep();
+    return { data: mockIssueDetails };
+  },
+};
+
+export default MockIssueDetailsAPI;
diff --git a/src/mockData/mockIssues.tsx b/src/mockData/mockIssues.tsx
index fabb307..9664253 100644
--- a/src/mockData/mockIssues.tsx
+++ b/src/mockData/mockIssues.tsx
@@ -8,6 +8,7 @@ export const mockIssues = [
     statusId: 1,
     id: 0,
     isActive: true,
+    assignUserId: "Han Solo",
   },
   {
     alias: "mock issue 2",
diff --git a/src/views/Board/Board.tsx b/src/views/Board/Board.tsx
index 75411ac..71a6d4a 100644
--- a/src/views/Board/Board.tsx
+++ b/src/views/Board/Board.tsx
@@ -53,6 +53,7 @@ export const Board = () => {
   const [isSuccess, setIsSuccess] = useState(false);
 
   const { boardId, projectName, projectId, board } = useParams();
+  const [state, setState] = useState({});
 
   useEffect(() => {
     async function fetchStatus() {
@@ -63,6 +64,9 @@ export const Board = () => {
     }
     fetchStatus();
     fetchIssues();
+    return () => {
+      setState({});
+    };
   }, [isSuccess]);
 
   const fetchIssues = useCallback(async () => {
diff --git a/src/views/IssueDetails/IssueDetails.tsx b/src/views/IssueDetails/IssueDetails.tsx
index 79fc188..8afb008 100644
--- a/src/views/IssueDetails/IssueDetails.tsx
+++ b/src/views/IssueDetails/IssueDetails.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import Grid from "@mui/material/Grid";
@@ -15,21 +15,61 @@ import {
   TextNormal,
   TextOutlined,
 } from "./IssueDetails.style";
+import { useParams } from "react-router-dom";
+import { API_ISSUE } from "../../api/contsans";
+
+let FetchDataAPI: any;
+
+async function importApiModule() {
+  if (localStorage["USE_MOCK"] === "true") {
+    const module = await import("../../api/issue/mockIssueDetails");
+    FetchDataAPI = module.default;
+    console.log(FetchDataAPI);
+  } else {
+    const module = await import("../../api/requestsApi");
+    FetchDataAPI = module.default;
+  }
+}
 
 export const IssueDetails = () => {
   const { t } = useTranslation();
+
   const issueStatus = [t("ToDo"), t("InProgress"), t("Done")];
   const [status, setStatus] = useState<string>(t("ToDo"));
 
-  const handleSelect = (e: any) => {
+  const { issueId, projectName } = useParams();
+  const [issueTitle, setIssueTitle] = useState("");
+  const [issueDescription, setIssueDescription] = useState("");
+  const [assigneeName, setAssigneeName] = useState("");
+  const reporterName = "Joe Doe";
+  const linkedIssues = "Apples & Oranges";
+  const [state, setState] = useState({});
+
+  function handleSelect(e: any) {
     setStatus(e.target.value);
-  };
+  }
+
+  const fetchIssueDetails = useCallback(async () => {
+    await importApiModule();
+    FetchDataAPI.getData(API_ISSUE.concat(issueId!)).then((res: any) => {
+      setIssueTitle(res.data.name);
+      setIssueDescription(res.data.description);
+      setAssigneeName(res.data.assignUserId);
+    });
+  }, []);
+
+  useEffect(() => {
+    fetchIssueDetails();
+    return () => {
+      setState({});
+    };
+  }, []);
 
   return (
     <StyledPageWrapper>
       <PageHeader
         returnLink='Return to Awesome project'
-        pageTitle='The Best Issue'
+        pageTitle={issueTitle}
         interactiveElement={
           <Select
             options={issueStatus}
@@ -42,20 +82,14 @@ export const IssueDetails = () => {
         <Grid container spacing={4}>
           <Grid item xs={8}>
             <Section>
-              <IssueTitle>{t("dialogCreateProjectTitle")}</IssueTitle>
+              <IssueTitle>{projectName}</IssueTitle>
               <Box>
                 <Label>{t("labelDescription")}</Label>
-                <TextNormal>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
-                  iusto nostrum voluptatibus fugiat ducimus delectus officia
-                  aspernatur adipisci quibusdam consectetur, facere aut!
-                  Aspernatur quaerat dolorem repellat tempora possimus quas
-                  soluta!
-                </TextNormal>
+                <TextNormal>{issueDescription}</TextNormal>
               </Box>
               <Box>
                 <Label>{t("labelLinkedIssues")}</Label>
-                <TextOutlined>Apples & Oranges</TextOutlined>
+                <TextOutlined>{linkedIssues}</TextOutlined>
               </Box>
             </Section>
           </Grid>
@@ -63,11 +97,11 @@ export const IssueDetails = () => {
             <Section>
               <Box>
                 <Label>{t("labelAssignee")}</Label>
-                <TextOutlined>Han Solo</TextOutlined>
+                <TextOutlined>{assigneeName}</TextOutlined>
               </Box>
               <Box>
                 <Label>{t("labelReporter")}</Label>
-                <TextOutlined>Joe Doe</TextOutlined>
+                <TextOutlined>{reporterName}</TextOutlined>
               </Box>
             </Section>
           </Grid>