diff --git a/app/API/problem.ts b/app/API/problem.ts
index 2ffabac..8a7931d 100644
--- a/app/API/problem.ts
+++ b/app/API/problem.ts
@@ -14,7 +14,7 @@ export async function postSolveProblem(
   token: string
 ) {
   const fileUploadResponse = await uploadFile(file, token);
-  if (fileUploadResponse.status !== 201) {
+  if (fileUploadResponse.status !== 200) {
     return { status: fileUploadResponse.status };
   }
   const file_path = (fileUploadResponse as SuccessUploadFileResponse).data.path;
diff --git a/app/css/global.css b/app/css/global.css
index 07c20f8..703ba50 100644
--- a/app/css/global.css
+++ b/app/css/global.css
@@ -7,3 +7,7 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+button {
+  cursor: pointer;
+}
diff --git a/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx b/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx
index a92ef50..40d058f 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx
+++ b/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx
@@ -38,21 +38,26 @@ const SubmitModal = ({ isOpen, onClose }: Props) => {
           textList={["C", "Java", "Python", "Text"]}
           onChange={setLanguage as (value: string) => void}
         />
-        <span className={inputStyle.title}>코드로 작성하여 제출</span>
-        <CodeBlock
-          height={500}
-          language={language}
-          value={code}
-          onChange={setCode}
-        />
-        <MultipleFileInput
-          title="파일로 제출"
-          name="files"
-          onFileUpload={async (files) => {
-            setFileList(files);
-          }}
-          description="main이 있는 파일을 첫번째 파일로 제출해 주세요."
-        />
+
+        <div className={styles.flex}>
+          <MultipleFileInput
+            title="파일로 제출"
+            name="files"
+            onFileUpload={async (files) => {
+              setFileList(files);
+            }}
+          />
+          <div>
+            <span className={inputStyle.title}>코드로 작성하여 제출</span>
+            <CodeBlock
+              height={500}
+              language={language}
+              value={code}
+              onChange={setCode}
+            />
+          </div>
+        </div>
+
         <button className={formStyles["primary-button"]} type="submit">
           제출
         </button>
diff --git a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css
index 68c4a7c..4976ca8 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css
+++ b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css
@@ -3,3 +3,141 @@
   flex-direction: column;
   gap: 16px;
 }
+
+.aside {
+  display: flex;
+}
+
+.problem-meta {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.pdf-top {
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-row {
+  display: flex;
+  color: #101828;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  border: 1px solid #eaecf0;
+}
+
+.table-row > div {
+  width: 140px;
+  height: 160px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-row > div:not(:last-child) {
+  border-right: 1px solid #eaecf0;
+}
+
+.table-title {
+  color: #101828;
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.top-right {
+  display: flex;
+  gap: 40px;
+}
+
+.table-col {
+  color: #101828;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  border: 1px solid #eaecf0;
+}
+
+.table-col > div {
+  width: 200px;
+  height: 72px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-col > div:not(:last-child) {
+  border-bottom: 1px solid #eaecf0;
+}
+
+.submit-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.submit-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 138px;
+  height: 68px;
+  color: #101828;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  border: 1px solid #eaecf0;
+  background: none;
+}
+
+.problem-edit {
+  position: absolute;
+  display: flex;
+  gap: 20px;
+  right: 0;
+}
+
+.pdf {
+  width: 1130px;
+  height: 1460px;
+}
+
+.problem-title {
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.delete-button {
+  width: 146px;
+  height: 45px;
+  background-color: #da1e28;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.edit-button {
+  width: 146px;
+  height: 45px;
+  background-color: #0880ae;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.flex {
+  display: flex;
+  gap: 50px;
+}
diff --git a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx
index 267bf96..89b14dd 100644
--- a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx
+++ b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx
@@ -1,5 +1,83 @@
+import { useNavigate, useParams } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { getProblemWithProblemId } from "~/API/lecture";
+import { useAuth } from "~/contexts/AuthContext";
+import {
+  SimpleProblemDetail,
+  SuccessProblemDetailResponse,
+  isSuccessResponse,
+} from "~/types/APIResponse";
+import { STATIC_SERVER_URL } from "~/util/constant";
+import styles from "./index.module.css";
+import SubmitModal from "./SubmitModal";
+
 const LabDetail = () => {
-  return <div>labdetail</div>;
+  const navigate = useNavigate();
+  const auth = useAuth();
+  const { labId } = useParams();
+
+  const [problemDetail, setProblemDetail] = useState<SimpleProblemDetail>();
+  const [loading, setLoading] = useState(true);
+  const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false);
+  useEffect(() => {
+    async function getData() {
+      const response = await getProblemWithProblemId(
+        parseInt(labId!),
+        auth.token
+      );
+      if (isSuccessResponse(response)) {
+        setProblemDetail((response as SuccessProblemDetailResponse).data);
+        setLoading(false);
+      } else {
+        toast.error("잘못된 접근입니다");
+        navigate("/");
+      }
+    }
+    getData();
+  }, []);
+  return loading ? null : (
+    <div>
+      <div className={styles["problem-meta"]}>
+        <div className={styles["table-row"]}>
+          <div className={styles["table-title"]}>마감 시간</div>
+          <div>01/01 08:00</div>
+          <div className={styles["table-title"]}>남은 시간</div>
+          <div>1일 8시간 30분</div>
+        </div>
+        <div className={styles["top-right"]}>
+          <div className={styles["table-col"]}>
+            <div className={styles["table-title"]}>문제 점수</div>
+            <div>0/0</div>
+          </div>
+          <div className={styles["submit-buttons"]}>
+            <button className={styles["submit-button"]}>채점 기록</button>
+            <button
+              className={styles["submit-button"]}
+              onClick={() => setIsSubmitModalOpen(true)}
+            >
+              정답 제출
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className={styles["pdf-top"]}>
+        <h1 className={styles["problem-title"]}>{problemDetail!.title}</h1>
+        <div className={styles["problem-edit"]}>
+          <button className={styles["delete-button"]}>문제 삭제하기</button>
+          <button className={styles["edit-button"]}>문제 수정하기</button>
+        </div>
+      </div>
+      <object
+        data={`${STATIC_SERVER_URL}/${problemDetail!.file_path}`}
+        className={styles.pdf}
+      ></object>
+      <SubmitModal
+        isOpen={isSubmitModalOpen}
+        onClose={() => setIsSubmitModalOpen(false)}
+      />
+    </div>
+  );
 };
 
 export default LabDetail;