diff --git a/frontend/src/components/TOC/TOC.module.css b/frontend/src/components/TOC/TOC.module.css
index a37c680..b03a3b1 100644
--- a/frontend/src/components/TOC/TOC.module.css
+++ b/frontend/src/components/TOC/TOC.module.css
@@ -1,16 +1,15 @@
 .toc {
   font-size: 0.8rem;
-  min-width: 25vw;
-  flex: 1 auto;
+  flex: 1 0 25vw;
 
   &.hidden {
-    flex: 0 0;
-    min-width: 0;
+    display: none;
   }
 
+  transition: flex-basis 0.1s ease-in-out;
+
   overflow-y: scroll;
   overflow-x: wrap;
-  height: 100vh;
 
   .tocDivision {
     margin-block: 0.5rem;
diff --git a/frontend/src/components/TOC/TOC.tsx b/frontend/src/components/TOC/TOC.tsx
index 92037de..f7e1a41 100644
--- a/frontend/src/components/TOC/TOC.tsx
+++ b/frontend/src/components/TOC/TOC.tsx
@@ -55,15 +55,17 @@ function TOC({ toc }: TOCProps) {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
-    <nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
+    <>
       <button
         onClick={() => setIsVisible(!isVisible)}
         className={styles.toggleButton}
       >
         {isVisible ? "<" : ">"}
       </button>
-      {toc.map((division) => renderDivision(division))}
-    </nav>
+      <nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
+        {toc.map((division) => renderDivision(division))}
+      </nav>
+    </>
   );
 }
 export default TOC;