diff --git a/__mocks__/handlers/boardHandlers.ts b/__mocks__/handlers/boardHandlers.ts
index 5007c0a..24ef140 100644
--- a/__mocks__/handlers/boardHandlers.ts
+++ b/__mocks__/handlers/boardHandlers.ts
@@ -47,17 +47,17 @@ const boardsInfo: BoardsInfo = {
     myMatchId: 0,
     channelBoardLoadDtoList: [
       {
-        boardId: 'aaa',
+        boardId: 111,
         boardTitle: '공지사항',
         boardIndex: 0,
       },
       {
-        boardId: 'bbb',
+        boardId: 222,
         boardTitle: '게임 룰',
         boardIndex: 1,
       },
       {
-        boardId: 'ccc',
+        boardId: 333,
         boardTitle: '커뮤니티',
         boardIndex: 2,
       },
@@ -68,17 +68,17 @@ const boardsInfo: BoardsInfo = {
     myMatchId: 1,
     channelBoardLoadDtoList: [
       {
-        boardId: 'bbb',
+        boardId: 222,
         boardTitle: '리그 공지사항',
         boardIndex: 0,
       },
       {
-        boardId: 'ccc',
+        boardId: 333,
         boardTitle: '참여자 규칙',
         boardIndex: 1,
       },
       {
-        boardId: 'ddd',
+        boardId: 444,
         boardTitle: '참여하기',
         boardIndex: 2,
       },
@@ -89,17 +89,17 @@ const boardsInfo: BoardsInfo = {
     myMatchId: 2,
     channelBoardLoadDtoList: [
       {
-        boardId: 'eee',
+        boardId: 333,
         boardTitle: '리그 공지사항',
         boardIndex: 0,
       },
       {
-        boardId: 'fff',
+        boardId: 444,
         boardTitle: '참여자 규칙',
         boardIndex: 1,
       },
       {
-        boardId: 'ggg',
+        boardId: 555,
         boardTitle: '참여하기',
         boardIndex: 2,
       },
diff --git a/src/@types/board.ts b/src/@types/board.ts
index d1cf010..bcdf1e3 100644
--- a/src/@types/board.ts
+++ b/src/@types/board.ts
@@ -8,7 +8,7 @@ export interface BoardInfo {
 }
 
 export interface Channels {
-  boardId: string;
+  boardId: number;
   boardTitle: string;
   boardIndex: number;
 }
diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx
index d948dca..0e7d4b6 100644
--- a/src/components/Sidebar/BoardBar/BoardBody.tsx
+++ b/src/components/Sidebar/BoardBar/BoardBody.tsx
@@ -83,13 +83,13 @@ const BoardBody = ({ channelLink }: Props) => {
     if (boards === undefined) return;
     const res = await postData(channelLink);
     const newBoard: Channels = {
-      boardId: res.boardId.toString(),
+      boardId: res.boardId,
       boardTitle: res.boardTitle,
       boardIndex: res.boardIndex,
     };
     setBoards((prevBoards) => [...prevBoards, newBoard]);
-    selectBoardId(newBoard.boardId);
-    handleBoard(channelLink, newBoard.boardId, res.boardTitle);
+    selectBoardId(newBoard.boardId.toString());
+    handleBoard(channelLink, newBoard.boardId.toString(), res.boardTitle);
   };
 
   const postCustomBoard = async (customedBoards: Channels[]) => {
@@ -97,7 +97,7 @@ const BoardBody = ({ channelLink }: Props) => {
       method: 'post',
       url: `/api/channel/${channelLink}/order`,
       data: {
-        channelBoardLoadDtoList: boards,
+        channelBoardLoadDtoList: customedBoards,
       },
     });
 
@@ -116,8 +116,9 @@ const BoardBody = ({ channelLink }: Props) => {
     const newBoards = [...boards];
     const [removed] = newBoards.splice(source.index, 1);
     newBoards.splice(destination.index, 0, removed);
+    console.log(newBoards);
     for (let i = 0; i < newBoards.length; i++) {
-      newBoards[i].boardIndex = i;
+      newBoards[i].boardIndex = i + 1;
     }
     postCustomBoard(newBoards);
   };
@@ -135,11 +136,17 @@ const BoardBody = ({ channelLink }: Props) => {
 
     if (isSuccess) {
       const tmpBoards = data.channelBoardLoadDtoList;
-      selectBoardId(tmpBoards[0].boardId);
-      handleBoard(channelLink, tmpBoards[0].boardId, tmpBoards[0].boardTitle);
+      selectBoardId(tmpBoards[0].boardId.toString());
+      handleBoard(channelLink, tmpBoards[0].boardId.toString(), tmpBoards[0].boardTitle);
     }
   }, [channelLink, isSuccess]);
 
+  useEffect(() => {
+    if (!boards.length || !data?.channelBoardLoadDtoList) return;
+    if (JSON.stringify(boards) === JSON.stringify(data.channelBoardLoadDtoList)) return;
+    setBoards(data.channelBoardLoadDtoList);
+  }, [data?.channelBoardLoadDtoList]);
+  
   useEffect(() => {
     setBoards((prevBoards) => {
       return prevBoards.map((board) => {
@@ -182,7 +189,7 @@ const BoardBody = ({ channelLink }: Props) => {
                 </div>
               )}
               <div>
-                <Title>보드 목록</Title>
+                <Title>대회 관리</Title>
                 {channelPermission === 0 && (
                   <Wrapper
                     isSelected={selected === 'admin'}
@@ -203,10 +210,15 @@ const BoardBody = ({ channelLink }: Props) => {
                   대진표
                   <Icon kind='lock' color='#637083' size='1.5rem' />
                 </Wrapper>
+                <Title>공지사항</Title>
                 {boards &&
                   boards.map((board, index) =>
                     channelPermission === 0 ? (
-                      <Draggable key={board.boardId} draggableId={board.boardId} index={index}>
+                      <Draggable
+                        key={board.boardId}
+                        draggableId={board.boardId.toString()}
+                        index={index}
+                      >
                         {(provided) => (
                           <Wrapper
                             ref={provided.innerRef}
@@ -215,7 +227,7 @@ const BoardBody = ({ channelLink }: Props) => {
                             data-id={board.boardId}
                             data-board-title={board.boardTitle}
                             onClick={onClickBoard}
-                            isSelected={board.boardId === selected}
+                            isSelected={board.boardId.toString() === selected}
                           >
                             {board.boardTitle}
                             <Icon kind='lock' color='#637083' size='1.5rem' />
@@ -264,11 +276,13 @@ const Wrapper = styled.li<{ isSelected: boolean }>`
   align-items: center;
   cursor: pointer;
   &:hover {
-    background-color: #39587e;
+    background: linear-gradient(90deg, rgba(211, 250, 255, 0.3) 0%, rgba(211, 250, 255, 0) 128.25%);
   }
   color: white;
 
-  ${({ isSelected }) => isSelected && `background-color: #39587E`};
+  ${({ isSelected }) =>
+    isSelected &&
+    `background: linear-gradient(90deg, rgba(211, 250, 255, 0.30) 0%, rgba(211, 250, 255, 0.00) 128.25%)`};
 `;
 
 const CurrentRound = styled.div`