diff --git a/backend/middleware/auth.js b/backend/middleware/auth.js
index 29452a9..c370b79 100644
--- a/backend/middleware/auth.js
+++ b/backend/middleware/auth.js
@@ -51,67 +51,6 @@ function authMiddleware(sequelize) {
     next();
   }
 
-  /**
-   * Verify user can access project
-   * (have to be called after verifySignedIn() middleware)
-   */
-  async function verifyProjectVisible(req, res, next) {
-    const Project = defineProject(sequelize, DataTypes);
-    const Folder = defineFolder(sequelize, DataTypes);
-    const Member = defineMember(sequelize, DataTypes);
-    Project.hasMany(Member, { foreignKey: 'projectId' });
-
-    let projectId = req.params.projectId || req.query.projectId;
-    const folderId = req.params.folderId || req.query.folderId;
-    if (!projectId && !folderId) {
-      return res.status(400).json({ error: 'projectId or folderId is required' });
-    }
-
-    if (!projectId) {
-      // find project id from folderId
-      const folder = await Folder.findByPk(folderId);
-      if (folder && folder.projectId) {
-        projectId = folder.projectId;
-      } else {
-        return res.status(404).send('failed to find project from folderId');
-      }
-    }
-
-    const project = await Project.findOne({
-      where: { id: projectId },
-      include: [
-        {
-          model: Member,
-          where: { userId: req.userId },
-          required: false,
-        },
-      ],
-    });
-    if (!project) {
-      return res.status(404).send('Project not found');
-    }
-
-    // if project is public, everyone can see
-    if (project.isPublic) {
-      next();
-      return;
-    }
-
-    // if project is private, owner and project member can see
-    if (project.userId === req.userId) {
-      next();
-      return;
-    }
-
-    const member = project.Members && project.Members[0];
-    if (member) {
-      next();
-      return;
-    }
-
-    return res.status(403).json({ error: 'Forbidden' });
-  }
-
   /**
    * Verify user has project
    * (have to be called after verifySignedIn() middleware)
@@ -188,8 +127,9 @@ function authMiddleware(sequelize) {
     const Folder = defineFolder(sequelize, DataTypes);
     const Case = defineCase(sequelize, DataTypes);
     const Member = defineMember(sequelize, DataTypes);
-    Project.hasMany(Member, { foreignKey: 'projectId' });
+    Project.hasMany(Folder, { foreignKey: 'projectId' });
     Folder.hasMany(Case, { foreignKey: 'folderId' });
+    Project.hasMany(Member, { foreignKey: 'projectId' });
 
     let projectId = req.params.projectId || req.query.projectId;
     const folderId = req.params.folderId || req.query.folderId;
@@ -258,7 +198,6 @@ function authMiddleware(sequelize) {
   return {
     verifySignedIn,
     verifyAdmin,
-    verifyProjectVisible,
     verifyProjectOwner,
     verifyProjectManager,
     verifyProjectDeveloper,
diff --git a/backend/middleware/verifyVisible.js b/backend/middleware/verifyVisible.js
new file mode 100644
index 0000000..f1324aa
--- /dev/null
+++ b/backend/middleware/verifyVisible.js
@@ -0,0 +1,134 @@
+const { DataTypes } = require('sequelize');
+const defineMember = require('../models/members');
+const defineProject = require('../models/projects');
+const defineFolder = require('../models/folders');
+const defineCase = require('../models/cases');
+
+function verifyVisibleMiddleware(sequelize) {
+  /**
+   * Verify user can read project by projectId
+   * (have to be called after verifySignedIn() middleware)
+   */
+  async function verifyProjectVisibleFromProjectId(req, res, next) {
+    let projectId = req.params.projectId || req.query.projectId;
+    if (!projectId) {
+      return res.status(400).json({ error: 'projectId is required' });
+    }
+
+    const isVisble = await isVisible(projectId, req.userId);
+    if (isVisble) {
+      next();
+      return;
+    }
+
+    return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  /**
+   * Verify user can read project by folderId
+   * (have to be called after verifySignedIn() middleware)
+   */
+  async function verifyProjectVisibleFromFolderId(req, res, next) {
+    const Folder = defineFolder(sequelize, DataTypes);
+
+    const folderId = req.params.folderId || req.query.folderId;
+    if (!folderId) {
+      return res.status(400).json({ error: 'folderId is required' });
+    }
+
+    // find project id from folderId
+    const folder = await Folder.findByPk(folderId);
+    const projectId = folder && folder.id;
+    if (!projectId) {
+      return res.status(404).send('failed to find projectId');
+    }
+
+    const isVisble = await isVisible(projectId, req.userId);
+    if (isVisble) {
+      next();
+      return;
+    }
+
+    return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  async function verifyProjectVisibleFromCaseId(req, res, next) {
+    const Project = defineProject(sequelize, DataTypes);
+    const Folder = defineFolder(sequelize, DataTypes);
+    const Case = defineCase(sequelize, DataTypes);
+    Project.hasMany(Folder, { foreignKey: 'projectId' });
+    Folder.hasMany(Case, { foreignKey: 'folderId' });
+    Folder.belongsTo(Project, { foreignKey: 'projectId' });
+    Case.belongsTo(Folder, { foreignKey: 'folderId' });
+
+    const caseId = req.params.caseId || req.query.caseId;
+    if (!caseId) {
+      return res.status(400).json({ error: 'caseId is required' });
+    }
+
+    // find project id from caseId
+    const testCase = await Case.findByPk(caseId, {
+      include: {
+        model: Folder,
+        include: Project,
+      },
+    });
+
+    const projectId = testCase && testCase.Folder && testCase.Folder.Project && testCase.Folder.Project.id;
+    if (!projectId) {
+      return res.status(404).send('failed to find projectId');
+    }
+
+    const isVisble = await isVisible(projectId, req.userId);
+    if (isVisble) {
+      next();
+      return;
+    }
+
+    return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  async function isVisible(projectId, userId) {
+    const Project = defineProject(sequelize, DataTypes);
+    const Member = defineMember(sequelize, DataTypes);
+    Project.hasMany(Member, { foreignKey: 'projectId' });
+    const project = await Project.findOne({
+      where: { id: projectId },
+      include: [
+        {
+          model: Member,
+          where: { userId: userId },
+          required: false,
+        },
+      ],
+    });
+    if (!project) {
+      return res.status(404).send('Project not found');
+    }
+
+    // if project is public, everyone can see
+    if (project.isPublic) {
+      return true;
+    }
+
+    // if project is private, owner and project member can see
+    if (project.userId === userId) {
+      return true;
+    }
+
+    const member = project.Members && project.Members[0];
+    if (member) {
+      return true;
+    }
+
+    return false;
+  }
+
+  return {
+    verifyProjectVisibleFromProjectId,
+    verifyProjectVisibleFromFolderId,
+    verifyProjectVisibleFromCaseId,
+  };
+}
+
+module.exports = verifyVisibleMiddleware;
diff --git a/backend/routes/cases/index.js b/backend/routes/cases/index.js
index b89c25e..d2b0666 100644
--- a/backend/routes/cases/index.js
+++ b/backend/routes/cases/index.js
@@ -5,9 +5,10 @@ const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
   const Case = defineCase(sequelize, DataTypes);
-  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
+  const { verifySignedIn } = require('../../middleware/auth')(sequelize);
+  const { verifyProjectVisibleFromFolderId } = require('../../middleware/verifyVisible')(sequelize);
 
-  router.get('/', verifySignedIn, verifyProjectVisible, async (req, res) => {
+  router.get('/', verifySignedIn, verifyProjectVisibleFromFolderId, async (req, res) => {
     const { folderId } = req.query;
 
     if (!folderId) {
diff --git a/backend/routes/cases/show.js b/backend/routes/cases/show.js
index b1e6ff4..4b936ad 100644
--- a/backend/routes/cases/show.js
+++ b/backend/routes/cases/show.js
@@ -13,9 +13,10 @@ module.exports = function (sequelize) {
   Step.belongsToMany(Case, { through: 'caseSteps' });
   Case.belongsToMany(Attachment, { through: 'caseAttachments' });
   Attachment.belongsToMany(Case, { through: 'caseAttachments' });
-  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
+  const { verifySignedIn } = require('../../middleware/auth')(sequelize);
+  const { verifyProjectVisibleFromCaseId } = require('../../middleware/verifyVisible')(sequelize);
 
-  router.get('/:caseId', verifySignedIn, verifyProjectVisible, async (req, res) => {
+  router.get('/:caseId', verifySignedIn, verifyProjectVisibleFromCaseId, async (req, res) => {
     const caseId = req.params.caseId;
 
     if (!caseId) {
diff --git a/backend/routes/folders/index.js b/backend/routes/folders/index.js
index 38eb6f9..2c34bee 100644
--- a/backend/routes/folders/index.js
+++ b/backend/routes/folders/index.js
@@ -4,10 +4,11 @@ const defineFolder = require('../../models/folders');
 const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
-  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
+  const { verifySignedIn } = require('../../middleware/auth')(sequelize);
+  const { verifyProjectVisibleFromProjectId } = require('../../middleware/verifyVisible')(sequelize);
   const Folder = defineFolder(sequelize, DataTypes);
 
-  router.get('/', verifySignedIn, verifyProjectVisible, async (req, res) => {
+  router.get('/', verifySignedIn, verifyProjectVisibleFromProjectId, async (req, res) => {
     const { projectId } = req.query;
 
     if (!projectId) {
diff --git a/backend/routes/home/index.js b/backend/routes/home/index.js
index d44d715..a410a42 100644
--- a/backend/routes/home/index.js
+++ b/backend/routes/home/index.js
@@ -8,7 +8,8 @@ const defineRunCase = require('../../models/runCases');
 const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
-  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
+  const { verifySignedIn } = require('../../middleware/auth')(sequelize);
+  const { verifyProjectVisibleFromProjectId } = require('../../middleware/verifyVisible')(sequelize);
 
   const Project = defineProject(sequelize, DataTypes);
   const Folder = defineFolder(sequelize, DataTypes);
@@ -20,7 +21,7 @@ module.exports = function (sequelize) {
   Project.hasMany(Run, { foreignKey: 'projectId' });
   Run.hasMany(RunCase, { foreignKey: 'runId' });
 
-  router.get('/:projectId', verifySignedIn, verifyProjectVisible, async (req, res) => {
+  router.get('/:projectId', verifySignedIn, verifyProjectVisibleFromProjectId, async (req, res) => {
     const projectId = req.params.projectId;
 
     if (!projectId) {
diff --git a/backend/routes/members/index.js b/backend/routes/members/index.js
index 3316750..902059b 100644
--- a/backend/routes/members/index.js
+++ b/backend/routes/members/index.js
@@ -5,12 +5,13 @@ const defineMember = require('../../models/members');
 const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
-  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
+  const { verifySignedIn } = require('../../middleware/auth')(sequelize);
+  const { verifyProjectVisibleFromProjectId } = require('../../middleware/verifyVisible')(sequelize);
   const User = defineUser(sequelize, DataTypes);
   const Member = defineMember(sequelize, DataTypes);
   Member.belongsTo(User, { foreignKey: 'userId' });
 
-  router.get('/', verifySignedIn, verifyProjectVisible, async (req, res) => {
+  router.get('/', verifySignedIn, verifyProjectVisibleFromProjectId, async (req, res) => {
     const { projectId } = req.query;
 
     if (!projectId) {
diff --git a/backend/routes/projects/show.js b/backend/routes/projects/show.js
index 951cb18..8594577 100644
--- a/backend/routes/projects/show.js
+++ b/backend/routes/projects/show.js
@@ -5,12 +5,13 @@ const defineFolder = require('../../models/folders');
 const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
-  const { verifySignedIn, verifyProjectVisible } = require('../../middleware/auth')(sequelize);
+  const { verifySignedIn } = require('../../middleware/auth')(sequelize);
+  const { verifyProjectVisibleFromProjectId } = require('../../middleware/verifyVisible')(sequelize);
   const Project = defineProject(sequelize, DataTypes);
   const Folder = defineFolder(sequelize, DataTypes);
   Project.hasMany(Folder, { foreignKey: 'projectId' });
 
-  router.get('/:projectId', verifySignedIn, verifyProjectVisible, async (req, res) => {
+  router.get('/:projectId', verifySignedIn, verifyProjectVisibleFromProjectId, async (req, res) => {
     const projectId = req.params.projectId;
     if (!projectId) {
       return res.status(400).json({ error: 'projectId is required' });
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
index 37bbdae..992bcac 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip } from '@nextui-org/react';
 import { useRouter } from '@/src/navigation';
 import { Save, Plus, ArrowLeft, ArrowUpFromLine, Circle } from 'lucide-react';
@@ -10,6 +10,7 @@ import { CaseType, AttachmentType, CaseMessages } from '@/types/case';
 import { fetchCase, updateCase } from '../caseControl';
 import { fetchCreateStep, fetchDeleteStep } from './stepControl';
 import { fetchCreateAttachments, fetchDownloadAttachment, fetchDeleteAttachment } from './attachmentControl';
+import { TokenContext } from '@/utils/TokenProvider';
 
 const defaultTestCase = {
   id: 0,
@@ -23,6 +24,10 @@ const defaultTestCase = {
   preConditions: '',
   expectedResults: '',
   folderId: 0,
+  Steps: [],
+  Attachments: [],
+  isIncluded: false,
+  runStatus: 0,
 };
 
 type Props = {
@@ -34,13 +39,14 @@ type Props = {
 };
 
 export default function CaseEditor({ projectId, folderId, caseId, messages, locale }: Props) {
+  const context = useContext(TokenContext);
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const router = useRouter();
 
   const onPlusClick = async (newStepNo: number) => {
-    const newStep = await fetchCreateStep(newStepNo, caseId);
+    const newStep = await fetchCreateStep(newStepNo, Number(caseId));
     if (newStep) {
       newStep.caseSteps = { stepNo: newStepNo };
       const updatedSteps = testCase.Steps.map((step) => {
@@ -136,8 +142,11 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
 
   useEffect(() => {
     async function fetchDataEffect() {
+      if (!context.isSignedIn()) {
+        return;
+      }
       try {
-        const data = await fetchCase(caseId);
+        const data = await fetchCase(context.token.access_token, Number(caseId));
         setTestCase(data);
       } catch (error: any) {
         console.error('Error in effect:', error.message);
@@ -145,7 +154,7 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
     }
 
     fetchDataEffect();
-  }, []);
+  }, [context]);
 
   return (
     <>
@@ -170,7 +179,7 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
           isLoading={isUpdating}
           onPress={async () => {
             setIsUpdating(true);
-            await updateCase(testCase);
+            await updateCase(context.token.access_token, testCase);
             setIsUpdating(false);
           }}
         >
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/caseControl.ts b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
index a2870e7..6db92cb 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
@@ -96,7 +96,6 @@ async function updateCase(jwt: string, updateCaseData: CaseType) {
   };
 
   const url = `${apiServer}/cases/${updateCaseData.id}`;
-
   try {
     const response = await fetch(url, fetchOptions);
     if (!response.ok) {