diff --git a/src/app/features/dashboard_Id/components/EditColumnModal.tsx b/src/app/features/dashboard_Id/components/EditColumnModal.tsx
index 02bca26..9c8c98d 100644
--- a/src/app/features/dashboard_Id/components/EditColumnModal.tsx
+++ b/src/app/features/dashboard_Id/components/EditColumnModal.tsx
@@ -158,7 +158,7 @@ export default function EditColumnModal() {
             <button
               type="button"
               onClick={handleDeleteClick}
-              className="BG-white Border-btn Text-gray h-54 w-144 rounded-8 px-16 py-10 text-16 font-medium"
+              className="BG-white Border-btn Text-gray h-54 w-256 rounded-8 px-16 py-10 text-16 font-medium"
             >
               삭제
             </button>
@@ -167,7 +167,7 @@ export default function EditColumnModal() {
             <button
               type="submit"
               disabled={isUpdateDisabled}
-              className={`BG-violet h-54 w-144 rounded-8 px-16 py-10 text-16 font-medium text-white transition-opacity ${
+              className={`BG-violet h-54 w-256 rounded-8 px-16 py-10 text-16 font-medium text-white transition-opacity ${
                 isUpdateDisabled
                   ? 'cursor-not-allowed opacity-50'
                   : 'hover:opacity-90'
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
index 9a75959..97d8173 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
@@ -52,34 +52,74 @@ export default function InvitedDashboardRow({
   const handleReject = () => handleInvitationResponse(false)
 
   return (
-    <div className="grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
-      {/* 대시보드 이름 */}
-      <span className="Text-black text-16">
-        {invitation.dashboard.title || '제목 없음'}
-      </span>
-
-      {/* 초대자 */}
-      <span className="Text-black text-center text-16">
-        {invitation.inviter.nickname || invitation.inviter.email}
-      </span>
-
-      {/* 수락/거절 버튼들 */}
-      <div className="flex items-center justify-center gap-10">
-        <button
-          onClick={handleAccept}
-          disabled={isProcessing}
-          className="BG-blue flex h-32 w-70 items-center justify-center rounded-8 text-14 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {isProcessing ? '처리 중' : '수락'}
-        </button>
-        <button
-          onClick={handleReject}
-          disabled={isProcessing}
-          className="BG-white Border-blue Text-blue flex h-32 w-70 items-center justify-center rounded-8 border text-14 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {isProcessing ? '처리 중' : '거절'}
-        </button>
+    <>
+      {/* 데스크톱/태블릿 테이블 레이아웃 */}
+      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
+        {/* 대시보드 이름 */}
+        <span className="Text-black text-16">
+          {invitation.dashboard.title || '제목 없음'}
+        </span>
+
+        {/* 초대자 */}
+        <span className="Text-black text-center text-16">
+          {invitation.inviter.nickname || invitation.inviter.email}
+        </span>
+
+        {/* 수락/거절 버튼들 */}
+        <div className="flex items-center justify-center gap-10">
+          <button
+            onClick={handleAccept}
+            disabled={isProcessing}
+            className="BG-blue tablet:w-72 tablet:h-30 tablet:text-12 flex h-32 w-70 items-center justify-center rounded-8 text-14 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '수락'}
+          </button>
+          <button
+            onClick={handleReject}
+            disabled={isProcessing}
+            className="BG-white Border-blue Text-blue tablet:w-72 tablet:h-30 tablet:text-12 flex h-32 w-70 items-center justify-center rounded-8 border text-14 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '거절'}
+          </button>
+        </div>
+      </div>
+
+      {/* 모바일 카드 레이아웃 */}
+      <div className="mobile:block mb-12 hidden rounded-8 p-16">
+        {/* 이름 */}
+        <div className="mb-8 flex items-center gap-8">
+          <span className="Text-gray-light text-14 font-medium">이름</span>
+          <span className="Text-black text-14">
+            {invitation.dashboard.title || '제목 없음'}
+          </span>
+        </div>
+
+        {/* 초대자 */}
+        <div className="mb-12 flex items-center gap-8">
+          <span className="Text-gray-light text-14 font-medium">초대자</span>
+          <span className="Text-black text-14">
+            {invitation.inviter.nickname || invitation.inviter.email}
+          </span>
+        </div>
+
+        {/* 버튼들 */}
+        <div className="flex gap-8">
+          <button
+            onClick={handleAccept}
+            disabled={isProcessing}
+            className="BG-blue flex h-32 w-109 items-center justify-center rounded-8 text-12 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '수락'}
+          </button>
+          <button
+            onClick={handleReject}
+            disabled={isProcessing}
+            className="BG-white Border-blue Text-blue flex h-32 w-109 items-center justify-center rounded-8 border text-12 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '거절'}
+          </button>
+        </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
index 36539ca..1638477 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
@@ -50,10 +50,10 @@ export default function InvitedDashboardTable() {
     return (
       <div className="space-y-24">
         {/* 검색창 스켈레톤 */}
-        <div className="h-40 animate-pulse rounded-8 bg-gray-200" />
+        <div className="mobile:h-36 h-40 animate-pulse rounded-8 bg-gray-200" />
 
         {/* 테이블 헤더 */}
-        <div className="grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+        <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
           <span className="text-16 font-medium text-gray-400">이름</span>
           <span className="text-center text-16 font-medium text-gray-400">
             초대자
@@ -67,7 +67,7 @@ export default function InvitedDashboardTable() {
         {Array.from({ length: 3 }).map((_, index) => (
           <div
             key={index}
-            className="grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
+            className="mobile:rounded-8 mobile:bg-gray-50 mobile:p-16 mobile:mb-12 grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
           >
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
@@ -82,10 +82,10 @@ export default function InvitedDashboardTable() {
   if (isError) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <p className="text-16 font-medium text-red-500">
+        <p className="mobile:text-12 text-16 font-medium text-red-500">
           초대받은 대시보드를 불러오는 중 오류가 발생했습니다.
         </p>
-        <p className="mt-8 text-14 text-gray-500">
+        <p className="mobile:text-10 mt-8 text-14 text-gray-500">
           {error?.message || '다시 시도해주세요.'}
         </p>
       </div>
@@ -96,7 +96,7 @@ export default function InvitedDashboardTable() {
   if (allInvitations.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <div className="relative mb-24 h-100 w-100">
+        <div className="mobile:size-60 relative mb-24 h-100 w-100">
           <Image
             src="/images/unsubscribe.svg"
             alt="초대받은 대시보드 없음"
@@ -104,7 +104,7 @@ export default function InvitedDashboardTable() {
             className="object-contain"
           />
         </div>
-        <p className="Text-gray-light text-16 font-medium">
+        <p className="Text-gray-light mobile:text-12 text-16 font-medium">
           아직 초대받은 대시보드가 없어요.
         </p>
       </div>
@@ -117,8 +117,8 @@ export default function InvitedDashboardTable() {
       {/* 검색창 */}
       <SearchInput value={searchQuery} onChange={setSearchQuery} />
 
-      {/* 테이블 헤더 */}
-      <div className="grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+      {/* 테이블 헤더 - 모바일에서 숨김 */}
+      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
         <span className="Text-gray-light text-16 font-normal">이름</span>
         <span className="Text-gray-light text-center text-16 font-normal">
           초대자
@@ -129,11 +129,11 @@ export default function InvitedDashboardTable() {
       </div>
 
       {/* 테이블 바디 */}
-      <div className="space-y-0">
+      <div className="mobile:space-y-0">
         {searchQuery.trim() && filteredInvitations.length === 0 ? (
           // 검색 결과 없음
           <div className="flex flex-col items-center justify-center py-60">
-            <p className="Text-gray-light text-16 font-medium">
+            <p className="Text-gray-light mobile:text-12 text-16 font-medium">
               `{searchQuery}`에 대한 검색 결과가 없습니다.
             </p>
           </div>
@@ -155,7 +155,7 @@ export default function InvitedDashboardTable() {
       {/* 더 이상 데이터가 없을 때 */}
       {!hasNextPage && allInvitations.length > 0 && (
         <div className="py-20 text-center">
-          <p className="Text-gray-light text-14 font-normal">
+          <p className="Text-gray-light mobile:text-10 text-14 font-normal">
             모든 초대를 확인했습니다.
           </p>
         </div>
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx b/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
index fd88d38..57027dc 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
@@ -14,13 +14,13 @@ export default function SearchInput({
   placeholder = '검색',
 }: SearchInputProps) {
   return (
-    <div className="relative h-40 w-960">
+    <div className="mobile:h-36 relative h-40 w-full">
       <input
         type="text"
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="Border-btn h-40 w-full rounded-8 border pl-40 pr-12 text-14 placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+        className="Border-btn mobile:h-36 mobile:text-14 mobile:placeholder:text-14 h-40 w-full rounded-8 border pl-40 pr-12 text-14 placeholder-gray-400 focus:border-blue-500 focus:outline-none"
       />
       <div className="absolute left-16 top-1/2 -translate-y-1/2 transform">
         <Image
diff --git a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
index 805d188..ed1e7cc 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
@@ -14,7 +14,7 @@ export default function AddDashboardCard() {
   return (
     <button
       onClick={handleClick}
-      className="BG-white Border-btn hover:BG-gray group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn BG-Input-hovered tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <span className="Text-black text-16 font-medium">새로운 대시보드</span>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
index 0d3b984..30b3012 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
@@ -19,7 +19,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
   return (
     <div
       onClick={handleClick}
-      className="BG-white Border-btn hover:BG-gray group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn BG-Input-hovered tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-12">
@@ -30,7 +30,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
           />
 
           {/* 대시보드 제목 */}
-          <h3 className="Text-black max-w-200 truncate text-16 font-medium">
+          <h3 className="Text-black tablet:max-w-140 mobile:max-w-160 mobile:text-14 max-w-200 truncate text-16 font-medium">
             {dashboard.title}
           </h3>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
index 72d167a..d6c9ad0 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
@@ -22,7 +22,7 @@ export default function MyDashboardGrid() {
   if (isLoading) {
     return (
       <section className="mb-40">
-        <div className="flex max-w-[1020px] flex-wrap gap-12">
+        <div className="tablet:grid tablet:grid-cols-2 tablet:gap-12 tablet:max-w-[520px] mobile:flex mobile:flex-col mobile:gap-12 mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
           {/* 새 대시보드 추가 버튼은 항상 표시 */}
           <AddDashboardCard />
 
@@ -30,7 +30,7 @@ export default function MyDashboardGrid() {
           {Array.from({ length: 5 }).map((_, index) => (
             <div
               key={index}
-              className="h-70 w-332 animate-pulse rounded-8 bg-gray-200"
+              className="tablet:h-68 tablet:w-247 mobile:h-58 mobile:w-260 h-70 w-332 animate-pulse rounded-8 bg-gray-200"
             />
           ))}
         </div>
@@ -61,7 +61,7 @@ export default function MyDashboardGrid() {
 
   return (
     <section className="mb-40">
-      <div className="flex max-w-[1020px] flex-wrap gap-12">
+      <div className="tablet:grid tablet:grid-cols-2 tablet:gap-12 tablet:max-w-[520px] mobile:flex mobile:flex-col mobile:gap-12 mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
         {/* 새 대시보드 추가 카드는 항상 첫 번째 고정 */}
         <AddDashboardCard />
 
@@ -76,7 +76,7 @@ export default function MyDashboardGrid() {
 
       {/* 페이지네이션 */}
       {totalPages > 1 && (
-        <div className="mt-24 flex max-w-[1020px] items-center justify-end gap-12">
+        <div className="tablet:max-w-[520px] mobile:max-w-[260px] mt-24 flex max-w-[1020px] items-center justify-end gap-12">
           <span className="Text-black text-14 font-normal">
             {currentPage} 페이지 중 {totalPages}
           </span>
diff --git a/src/app/mydashboard/page.tsx b/src/app/mydashboard/page.tsx
index b572f56..0311ade 100644
--- a/src/app/mydashboard/page.tsx
+++ b/src/app/mydashboard/page.tsx
@@ -13,17 +13,17 @@ export default function MyDashboardPage() {
       <Sidebar />
 
       {/* 메인 */}
-      <div className="BG-gray ml-300 flex-1">
+      <div className="BG-gray tablet:ml-160 mobile:ml-67 ml-300 flex-1">
         {/* 헤더 */}
         <Header />
 
         {/* 페이지 콘텐츠 */}
-        <main className="p-40">
+        <main className="tablet:p-24 mobile:p-16 p-40">
           <MyDashboardGrid />
 
           {/* 초대받은 대시보드 섹션 */}
-          <section className="BG-white w-1022 rounded-16 p-40 pb-120 pt-24">
-            <h2 className="Text-black mb-64 text-24 font-bold">
+          <section className="BG-white tablet:w-504 mobile:w-260 tablet:p-24 mobile:p-16 w-1022 rounded-16 p-40 pb-120 pt-24">
+            <h2 className="Text-black tablet:text-20 mobile:text-20 mb-64 text-24 font-bold">
               초대받은 대시보드
             </h2>
 
diff --git a/src/app/shared/components/common/modal/CreateDashboardModal.tsx b/src/app/shared/components/common/modal/CreateDashboardModal.tsx
index 7e26ccc..798a75c 100644
--- a/src/app/shared/components/common/modal/CreateDashboardModal.tsx
+++ b/src/app/shared/components/common/modal/CreateDashboardModal.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useModalStore } from '@store/useModalStore'
+import { useQueryClient } from '@tanstack/react-query'
 import React, { useEffect } from 'react'
 
 import { useDashboardForm } from '@/app/shared/hooks/useDashboardForm'
@@ -8,6 +9,7 @@ import { useDashboardForm } from '@/app/shared/hooks/useDashboardForm'
 import DashboardForm from '../../dashboard/DashboardForm'
 
 export default function CreateDashboardModal() {
+  const queryClient = useQueryClient()
   const { modalType, closeModal } = useModalStore()
   const isModalOpen = modalType === 'createDashboard'
 
@@ -29,6 +31,24 @@ export default function CreateDashboardModal() {
 
   if (!isModalOpen) return null
 
+  // 쿼리 무효화 포함한 제출 핸들러
+  const handleSubmitWithInvalidation = async (
+    e: React.FormEvent<HTMLFormElement>,
+  ) => {
+    // 원래 handleSubmit 실행
+    await handleSubmit(e)
+
+    // 사이드바 무한스크롤 쿼리 무효화
+    queryClient.invalidateQueries({
+      queryKey: ['dashboards', 'infinite'],
+    })
+
+    // 내 대시보드 페이지 쿼리 무효화
+    queryClient.invalidateQueries({
+      queryKey: ['myDashboards'],
+    })
+  }
+
   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       closeModal()
@@ -47,7 +67,7 @@ export default function CreateDashboardModal() {
           onChange={handleChange}
           onColorSelect={handleColorSelect}
           onSubmit={(e) => {
-            handleSubmit(e)
+            handleSubmitWithInvalidation(e)
             closeModal()
           }}
           isSubmitting={isSubmitting}
diff --git a/src/app/shared/components/common/sidebar/DashboardItem.tsx b/src/app/shared/components/common/sidebar/DashboardItem.tsx
index 25e10d8..42a788c 100644
--- a/src/app/shared/components/common/sidebar/DashboardItem.tsx
+++ b/src/app/shared/components/common/sidebar/DashboardItem.tsx
@@ -18,22 +18,22 @@ export default function DashboardItem({
       type="button"
       aria-current={isActive ? 'page' : undefined}
       onClick={handleClick}
-      className={`Text-black flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors hover:bg-gray-50 ${
+      className={`Text-black tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 mobile:justify-center mobile:px-4 mobile:py-6 BG-Input-hovered flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors ${
         isActive ? 'BG-currentDashboard font-medium' : ''
       }`}
     >
       {/* 컬러 도트 */}
       <div
-        className="size-8 flex-shrink-0 rounded-full"
+        className="tablet:size-6 mobile:size-12 size-8 flex-shrink-0 rounded-full"
         style={{ backgroundColor: dashboard.color }}
       />
 
       {/* 대시보드 제목 */}
-      <span className="flex-1 truncate">{dashboard.title}</span>
+      <span className="mobile:hidden flex-1 truncate">{dashboard.title}</span>
 
       {/* 내가 만든 대시보드에 왕관 아이콘 */}
       {dashboard.createdByMe && (
-        <div className="relative h-12 w-14 flex-shrink-0">
+        <div className="tablet:h-10 tablet:w-12 mobile:hidden relative h-12 w-14 flex-shrink-0">
           <Image
             src="/images/crown.png"
             alt="내가 만든 대시보드"
diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index 00737f3..6d2dd8e 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -1,13 +1,14 @@
-// components/common/sidebar/Sidebar.tsx
 'use client'
 
-import { useDashboard } from '@hooks/useDashboard'
+import { useContainerInfiniteScroll } from '@hooks/useContainerInfiniteScroll'
 import { useModalStore } from '@store/useModalStore'
 import { useSelectedDashboardStore } from '@store/useSelectedDashboardStore'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
+import { useMemo } from 'react'
 
+import { useDashboardsInfinite } from '@/app/shared/hooks/useDashboardInfinite'
 import { Dashboard } from '@/types/dashboard'
 
 import CreateDashboardButton from './CreateDashboardButton'
@@ -17,29 +18,59 @@ export default function Sidebar(): JSX.Element {
   const pathname = usePathname()
   const router = useRouter()
   const { openModal } = useModalStore()
-  const { data: dashboards = [], isLoading, error } = useDashboard()
   const { setSelectedDashboard } = useSelectedDashboardStore()
 
+  // 무한스크롤 데이터 관리
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useDashboardsInfinite(25)
+
+  // 컨테이너 스크롤 감지
+  const containerRef = useContainerInfiniteScroll(
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  )
+
+  // 모든 대시보드 데이터 병합
+  const allDashboards = useMemo(() => {
+    return data?.pages.flatMap((page) => page.dashboards) || []
+  }, [data])
+
   const handleDashboardClick = (dashboard: Dashboard) => {
-    setSelectedDashboard(dashboard) // 선택한 대시보드를 전역 상태에 저장
+    setSelectedDashboard(dashboard)
     router.push(`/dashboard/${dashboard.id}`)
   }
 
-  // 에러 타입 타입 불일치(jsx로 렌더링할 수 없음) 방지를 위한 string 처리
+  // 에러 타입 처리
   const errorMessage =
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section fixed left-0 top-0 h-screen w-300 overflow-y-auto">
+    <aside className="BG-white Border-section tablet:w-160 mobile:w-67 fixed left-0 top-0 flex h-full w-300 flex-col">
       {/* 로고 섹션 */}
-      <div className="flex h-70 items-center px-20">
+      <div className="tablet:px-12 mobile:px-8 mobile:justify-center flex h-70 flex-shrink-0 items-center px-20">
         <Link href="/" className="flex items-center gap-8">
-          <div className="relative h-35 w-150">
+          <div className="tablet:h-30 tablet:w-120 mobile:size-24 relative h-35 w-150">
+            {/* 데스크톱 & 태블릿: 전체 로고 */}
             <Image
               src="/images/logo-light2.svg"
               alt="Coplan logo"
               fill
-              className="object-contain"
+              className="mobile:hidden object-contain"
+              priority
+            />
+            {/* 모바일: 아이콘만 */}
+            <Image
+              src="/images/logo-icon-light.svg"
+              alt="Coplan"
+              fill
+              className="mobile:block hidden object-contain"
               priority
             />
           </div>
@@ -47,35 +78,79 @@ export default function Sidebar(): JSX.Element {
       </div>
 
       {/* 대시보드 섹션 */}
-      <div className="px-20 py-24">
-        <div className="mb-24 flex items-center justify-between">
-          <h2 className="Text-gray text-12 font-semibold">Dash Boards</h2>
+      <div className="tablet:px-12 mobile:px-8 tablet:py-16 mobile:py-12 flex min-h-0 flex-1 flex-col px-20 py-24">
+        {/* 헤더 */}
+        <div className="tablet:mb-16 mobile:hidden mb-24 flex flex-shrink-0 items-center justify-between">
+          <h2 className="Text-gray tablet:text-10 text-12 font-semibold">
+            Dash Boards
+          </h2>
+          <CreateDashboardButton onClick={() => openModal('createDashboard')} />
+        </div>
+
+        {/* 모바일 전용 + 버튼 */}
+        <div className="mobile:flex mb-12 hidden flex-shrink-0 justify-center">
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
-        <div className="space-y-8">
+        {/* 스크롤 가능한 대시보드 목록 컨테이너 */}
+        <div
+          ref={containerRef}
+          className="tablet:space-y-6 mobile:space-y-4 flex-1 space-y-8 overflow-y-auto"
+          style={{ minHeight: '200px' }}
+        >
           {isLoading ? (
-            <div className="flex items-center justify-center py-20">
-              <div className="Text-gray text-14">로딩중...</div>
+            <div className="tablet:py-12 mobile:py-8 flex items-center justify-center py-20">
+              <div className="Text-gray tablet:text-12 mobile:hidden text-14">
+                로딩중...
+              </div>
+              {/* 모바일: 로딩 스피너만 */}
+              <div className="mobile:block hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" />
             </div>
           ) : error ? (
-            <div className="flex items-center justify-center py-20">
+            <div className="tablet:py-12 mobile:py-8 flex items-center justify-center py-20">
               <div className="Text-red text-14">{errorMessage}</div>
             </div>
-          ) : dashboards.length === 0 ? (
-            <div className="flex items-center justify-start py-20">
-              <div className="Text-gray text-14">대시보드가 없습니다.</div>
-            </div>
-          ) : (
-            dashboards.map((dashboard) => (
-              <DashboardItem
-                key={`sidebar-${dashboard.id}`}
-                dashboard={dashboard}
-                isActive={pathname === `/dashboard/${dashboard.id}`}
-                onClick={() => handleDashboardClick(dashboard)}
-              />
-            ))
-          )}
+          ) : allDashboards.length > 0 ? (
+            <>
+              {/* 대시보드 목록 */}
+              {allDashboards.map((dashboard) => (
+                <DashboardItem
+                  key={`sidebar-${dashboard.id}`}
+                  dashboard={dashboard}
+                  isActive={pathname === `/dashboard/${dashboard.id}`}
+                  onClick={() => handleDashboardClick(dashboard)}
+                />
+              ))}
+
+              {/* 추가 로딩 중일 때 스켈레톤 */}
+              {isFetchingNextPage && (
+                <div className="tablet:space-y-6 mobile:space-y-4 space-y-8">
+                  {Array.from({ length: 3 }).map((_, index) => (
+                    <div
+                      key={`skeleton-${index}`}
+                      className="tablet:gap-8 mobile:gap-0 mobile:justify-center tablet:p-8 mobile:p-4 flex items-center gap-12 rounded-6 p-12"
+                    >
+                      {/* 색상 원 스켈레톤 */}
+                      <div className="tablet:size-6 mobile:size-12 size-8 animate-pulse rounded-full bg-gray-200" />
+                      {/* 제목 스켈레톤 - 모바일에서 숨김 */}
+                      <div className="tablet:h-14 mobile:hidden h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* 더 이상 데이터가 없을 때 */}
+              {!hasNextPage && allDashboards.length > 0 && (
+                <div className="tablet:py-8 mobile:py-4 py-12 text-center">
+                  <p className="Text-gray tablet:text-10 mobile:hidden text-12">
+                    모든 대시보드를 확인했습니다.
+                  </p>
+                  {/* 모바일: 완료 아이콘만 */}
+                  <div className="mobile:block Text-gray hidden text-12">✓</div>
+                </div>
+              )}
+            </>
+          ) : null}
         </div>
       </div>
     </aside>
diff --git a/src/app/shared/hooks/useContainerInfiniteScroll.ts b/src/app/shared/hooks/useContainerInfiniteScroll.ts
new file mode 100644
index 0000000..e796b21
--- /dev/null
+++ b/src/app/shared/hooks/useContainerInfiniteScroll.ts
@@ -0,0 +1,47 @@
+'use client'
+
+import { useCallback, useEffect, useRef } from 'react'
+
+/**
+ * 컨테이너 내부 무한스크롤 훅 (사이드바용)
+ * window 스크롤과 독립적으로 작동하여 기존 무한스크롤과 충돌하지 않게 사용하기 위함
+ *
+ * @param fetchNextPage - 다음 페이지를 가져오는 함수
+ * @param hasNextPage - 다음 페이지가 있는지 여부
+ * @param isFetchingNextPage - 다음 페이지를 가져오는 중인지 여부
+ * @param threshold - 스크롤 트리거
+ */
+export const useContainerInfiniteScroll = (
+  fetchNextPage: () => void,
+  hasNextPage: boolean,
+  isFetchingNextPage: boolean,
+  threshold: number = 0.8,
+) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const { scrollTop, scrollHeight, clientHeight } = container
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight
+
+    // 임계값에 도달하면 다음 페이지 로드
+    if (scrollPercentage >= threshold && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage()
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, threshold])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    container.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
+  return containerRef
+}
diff --git a/src/app/shared/hooks/useDashboardInfinite.ts b/src/app/shared/hooks/useDashboardInfinite.ts
new file mode 100644
index 0000000..488bcf1
--- /dev/null
+++ b/src/app/shared/hooks/useDashboardInfinite.ts
@@ -0,0 +1,46 @@
+'use client'
+
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import api from '@/app/shared/lib/axios'
+import { DashboardListResponse } from '@/app/shared/types/dashboard'
+
+/**
+ * 사이드바용 대시보드 목록 무한스크롤 훅 (pagination 방식)
+ * @param size - 한번에 가져올 대시보드 개수 (기본값: 10)
+ */
+export const useDashboardsInfinite = (size: number = 10) => {
+  return useInfiniteQuery({
+    queryKey: ['dashboards', 'infinite', 'pagination', size],
+    queryFn: async ({ pageParam }: { pageParam: number }) => {
+      if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+        throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+      }
+
+      const params = new URLSearchParams({
+        navigationMethod: 'pagination',
+        size: size.toString(),
+        page: pageParam.toString(),
+      })
+
+      const res = await api.get<DashboardListResponse>(
+        `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards?${params.toString()}`,
+      )
+
+      return res.data
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, allPages) => {
+      const currentPage = allPages.length
+      const totalPages = Math.ceil(lastPage.totalCount / size)
+
+      if (currentPage < totalPages && lastPage.dashboards.length > 0) {
+        return currentPage + 1
+      }
+
+      return null
+    },
+    staleTime: 1000 * 60,
+    gcTime: 1000 * 60 * 5,
+  })
+}