diff --git a/__tests__/devtools/__snapshots__/AtomViewer.test.tsx.snap b/__tests__/devtools/__snapshots__/AtomViewer.test.tsx.snap
index 3925231d..d00e5169 100644
--- a/__tests__/devtools/__snapshots__/AtomViewer.test.tsx.snap
+++ b/__tests__/devtools/__snapshots__/AtomViewer.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`DevTools - AtomViewer Atom details JSON value should display JSON tree
   style=""
 >
   <div
-    class=""
+    class="internal-jotai-devtools-json-tree-wrapper"
     data-testid="json-tree-view-container"
   >
     <ul
@@ -87,7 +87,7 @@ exports[`DevTools - AtomViewer Atom details JSON value should display JSON tree
   style=""
 >
   <div
-    class=""
+    class="internal-jotai-devtools-json-tree-wrapper"
     data-testid="json-tree-view-container"
   >
     <ul
@@ -186,7 +186,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -424,7 +424,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-r16l"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-r16l"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -457,7 +457,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-active="true"
                   data-variant="filled"
@@ -471,7 +471,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         countAtom
                       </p>
@@ -513,7 +513,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -526,7 +526,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -584,10 +584,10 @@ exports[`DevTools - AtomViewer Atom details Raw value should display an error wh
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -774,7 +774,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -1012,7 +1012,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-r1bd"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-r1bd"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -1045,7 +1045,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-active="true"
                   data-variant="filled"
@@ -1059,7 +1059,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         countAtom
                       </p>
@@ -1101,7 +1101,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -1114,7 +1114,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -1172,10 +1172,10 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -1260,7 +1260,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display atom detail
                     Raw value
                   </p>
                   <div
-                    class="m_5cb1b9c8 m_1f5e827e"
+                    class="internal-jotai-devtools-code-syntax-highlighter m_5cb1b9c8 m_1f5e827e"
                     data-testid="atom-parsed-value"
                     dir="ltr"
                   >
@@ -1393,7 +1393,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -1631,7 +1631,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-r1gh"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-r1gh"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -1664,7 +1664,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -1677,7 +1677,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         countAtom
                       </p>
@@ -1718,7 +1718,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-active="true"
                   data-variant="filled"
@@ -1732,7 +1732,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -1791,10 +1791,10 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -1879,7 +1879,7 @@ exports[`DevTools - AtomViewer Atom details Raw value should display the depende
                     Raw value
                   </p>
                   <div
-                    class="m_5cb1b9c8 m_1f5e827e"
+                    class="internal-jotai-devtools-code-syntax-highlighter m_5cb1b9c8 m_1f5e827e"
                     data-testid="atom-parsed-value"
                     dir="ltr"
                   >
@@ -1996,7 +1996,7 @@ exports[`DevTools - AtomViewer List of atoms Search should display an error if n
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -2234,7 +2234,7 @@ exports[`DevTools - AtomViewer List of atoms Search should display an error if n
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-rtr"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-rtr"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -2317,10 +2317,10 @@ exports[`DevTools - AtomViewer List of atoms Search should display an error if n
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -2382,7 +2382,7 @@ exports[`DevTools - AtomViewer List of atoms Search should search for atoms corr
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -2620,7 +2620,7 @@ exports[`DevTools - AtomViewer List of atoms Search should search for atoms corr
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-rpt"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-rpt"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -2653,7 +2653,7 @@ exports[`DevTools - AtomViewer List of atoms Search should search for atoms corr
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -2666,7 +2666,7 @@ exports[`DevTools - AtomViewer List of atoms Search should search for atoms corr
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -2724,10 +2724,10 @@ exports[`DevTools - AtomViewer List of atoms Search should search for atoms corr
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -2789,7 +2789,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -3027,7 +3027,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-rf1"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-rf1"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -3060,7 +3060,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-active="true"
                   data-variant="filled"
@@ -3074,7 +3074,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         countAtom
                       </p>
@@ -3116,7 +3116,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -3129,7 +3129,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -3187,10 +3187,10 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -3275,7 +3275,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should hide private a
                     Raw value
                   </p>
                   <div
-                    class="m_5cb1b9c8 m_1f5e827e"
+                    class="internal-jotai-devtools-code-syntax-highlighter m_5cb1b9c8 m_1f5e827e"
                     data-testid="atom-parsed-value"
                     dir="ltr"
                   >
@@ -3408,7 +3408,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -3646,7 +3646,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-rk5"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-rk5"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -3679,7 +3679,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -3692,7 +3692,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         countAtom
                       </p>
@@ -3733,7 +3733,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -3746,7 +3746,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -3787,7 +3787,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-active="true"
                   data-variant="filled"
@@ -3801,7 +3801,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         privateAtom
                       </p>
@@ -3860,10 +3860,10 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -3967,7 +3967,7 @@ exports[`DevTools - AtomViewer List of atoms private atoms should mark private a
                     Raw value
                   </p>
                   <div
-                    class="m_5cb1b9c8 m_1f5e827e"
+                    class="internal-jotai-devtools-code-syntax-highlighter m_5cb1b9c8 m_1f5e827e"
                     data-testid="atom-parsed-value"
                     dir="ltr"
                   >
@@ -4100,7 +4100,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -4338,7 +4338,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-r43"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-r43"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -4371,7 +4371,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
                 style="overflow: auto;"
               >
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -4384,7 +4384,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         countAtom
                       </p>
@@ -4425,7 +4425,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
                   />
                 </div>
                 <button
-                  class="jotai-devtools-focus m_f0824112 m_87cf2631"
+                  class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
                   color="dark"
                   data-variant="filled"
                   style="--nl-bg: var(--mantine-color-dark-filled); --nl-hover: var(--mantine-color-dark-filled-hover); --nl-color: var(--mantine-color-white);"
@@ -4438,7 +4438,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
                       class="m_1f6ac4c4"
                     >
                       <p
-                        class="jotai-devtools-focus m_b6d8b162"
+                        class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                       >
                         doubleCountAtom
                       </p>
@@ -4496,10 +4496,10 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer with corr
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
@@ -4561,7 +4561,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer without a
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -4799,7 +4799,7 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer without a
             style="flex-basis: 0px; flex-grow: 50; flex-shrink: 1; overflow: auto;"
           >
             <div
-              class="m_8bffd616 __m__-r1f"
+              class="internal-jotai-devtools-atom-viewer-wrapper m_8bffd616 __m__-r1f"
               style="flex-direction: column; padding-top: 0rem; height: 100%;"
             >
               <div
@@ -4882,10 +4882,10 @@ exports[`DevTools - AtomViewer List of atoms should render atom viewer without a
             tabindex="0"
           >
             <div
-              class=""
+              class="internal-jotai-devtools-panel-resize-handle-wrapper"
             >
               <div
-                class=""
+                class="internal-jotai-devtools-panel-resize-handle-content"
                 style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
               />
             </div>
diff --git a/__tests__/devtools/__snapshots__/TimeTravel.test.tsx.snap b/__tests__/devtools/__snapshots__/TimeTravel.test.tsx.snap
index 384ceea7..a55bd4aa 100644
--- a/__tests__/devtools/__snapshots__/TimeTravel.test.tsx.snap
+++ b/__tests__/devtools/__snapshots__/TimeTravel.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`DevTools - TimeTravel Snapshot details diff should display highlighted
   role="tabpanel"
 >
   <div
-    class=""
+    class="internal-jotai-devtools-json-tree-wrapper"
     data-testid="json-tree-view-container"
   >
     <ul
@@ -97,7 +97,7 @@ exports[`DevTools - TimeTravel Snapshot details diff should display highlighted
   role="tabpanel"
 >
   <div
-    class=""
+    class="internal-jotai-devtools-json-tree-wrapper"
     data-testid="json-tree-view-container"
   >
     <ul
@@ -235,7 +235,7 @@ exports[`DevTools - TimeTravel Snapshot details diff should display highlighted
   role="tabpanel"
 >
   <div
-    class=""
+    class="internal-jotai-devtools-json-tree-wrapper"
     data-testid="json-tree-view-container"
   >
     <ul
@@ -392,7 +392,7 @@ exports[`DevTools - TimeTravel Snapshot details diff should display highlighted
   role="tabpanel"
 >
   <div
-    class=""
+    class="internal-jotai-devtools-json-tree-wrapper"
     data-testid="json-tree-view-container"
   >
     <ul
@@ -522,7 +522,7 @@ exports[`DevTools - TimeTravel Snapshot details diff should display highlighted
 
 exports[`DevTools - TimeTravel Snapshot details should display the full state in json tree format when state is selected 1`] = `
 <div
-  class=""
+  class="internal-jotai-devtools-json-tree-wrapper"
   data-testid="json-tree-view-container"
 >
   <ul
@@ -576,16 +576,16 @@ exports[`DevTools - TimeTravel Snapshot details should display the full state in
 
 exports[`DevTools - TimeTravel Snapshot list Search should display an error if no snapshots are found 1`] = `
 <div
-  class="m_8bffd616 __m__-r2dv"
+  class="internal-jotai-devtools-time-travel-wrapper m_8bffd616 __m__-r2dv"
   data-testid="jotai-devtools-time-travel-panel-left-content"
   style="flex-direction: column; padding-top: 0rem; height: 100%;"
 >
   <div
-    class="m_6d731127"
+    class="internal-jotai-devtools-header-wrapper m_6d731127"
     style="--stack-gap: var(--mantine-spacing-sm); --stack-align: stretch; --stack-justify: flex-start;"
   >
     <div
-      class="m_4081bf90"
+      class="internal-jotai-devtools-header-content m_4081bf90"
       style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: wrap;"
     >
       <div
@@ -793,16 +793,16 @@ exports[`DevTools - TimeTravel Snapshot list Search should display an error if n
 
 exports[`DevTools - TimeTravel Snapshot list Search should search for atoms correctly 1`] = `
 <div
-  class="m_8bffd616 __m__-r24d"
+  class="internal-jotai-devtools-time-travel-wrapper m_8bffd616 __m__-r24d"
   data-testid="jotai-devtools-time-travel-panel-left-content"
   style="flex-direction: column; padding-top: 0rem; height: 100%;"
 >
   <div
-    class="m_6d731127"
+    class="internal-jotai-devtools-header-wrapper m_6d731127"
     style="--stack-gap: var(--mantine-spacing-sm); --stack-align: stretch; --stack-justify: flex-start;"
   >
     <div
-      class="m_4081bf90"
+      class="internal-jotai-devtools-header-content m_4081bf90"
       style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: wrap;"
     >
       <div
@@ -970,7 +970,7 @@ exports[`DevTools - TimeTravel Snapshot list Search should search for atoms corr
     style="overflow: auto; margin-top: 10px;"
   >
     <button
-      class="jotai-devtools-focus m_f0824112 m_87cf2631"
+      class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
       color="dark"
       data-testid="jotai-devtools-snapshot-2"
       data-variant="filled"
@@ -984,7 +984,7 @@ exports[`DevTools - TimeTravel Snapshot list Search should search for atoms corr
           class="m_1f6ac4c4"
         >
           <p
-            class="jotai-devtools-focus m_b6d8b162"
+            class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
           >
             2
           </p>
@@ -1030,7 +1030,7 @@ exports[`DevTools - TimeTravel Snapshot list Search should search for atoms corr
 
 exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions should render a snapshot list with initial snapshot details on action with recording on 1`] = `
 <div
-  class="jotai-devtools-shell m_89d60db1"
+  class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
   data-orientation="horizontal"
   data-testid="jotai-devtools-shell"
   data-variant="default"
@@ -1288,16 +1288,16 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
         style="flex-basis: 0px; flex-grow: 45; flex-shrink: 1; overflow: auto;"
       >
         <div
-          class="m_8bffd616 __m__-r34f"
+          class="internal-jotai-devtools-time-travel-wrapper m_8bffd616 __m__-r34f"
           data-testid="jotai-devtools-time-travel-panel-left-content"
           style="flex-direction: column; padding-top: 0rem; height: 100%;"
         >
           <div
-            class="m_6d731127"
+            class="internal-jotai-devtools-header-wrapper m_6d731127"
             style="--stack-gap: var(--mantine-spacing-sm); --stack-align: stretch; --stack-justify: flex-start;"
           >
             <div
-              class="m_4081bf90"
+              class="internal-jotai-devtools-header-content m_4081bf90"
               style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: wrap;"
             >
               <div
@@ -1465,7 +1465,7 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
             style="overflow: auto; margin-top: 10px;"
           >
             <button
-              class="jotai-devtools-focus m_f0824112 m_87cf2631"
+              class="jotai-devtools-focus internal-jotai-devtools-navlink m_f0824112 m_87cf2631"
               color="dark"
               data-testid="jotai-devtools-snapshot-1"
               data-variant="filled"
@@ -1479,7 +1479,7 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
                   class="m_1f6ac4c4"
                 >
                   <p
-                    class="jotai-devtools-focus m_b6d8b162"
+                    class="jotai-devtools-focus internal-jotai-devtools-monospace-font m_b6d8b162"
                   >
                     1
                   </p>
@@ -1537,10 +1537,10 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
         tabindex="0"
       >
         <div
-          class=""
+          class="internal-jotai-devtools-panel-resize-handle-wrapper"
         >
           <div
-            class=""
+            class="internal-jotai-devtools-panel-resize-handle-content"
             style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
           />
         </div>
@@ -1823,7 +1823,7 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
       </div>
     </div>
     <div
-      class=""
+      class="internal-jotai-devtools-playbar-wrapper"
     >
       <button
         class="jotai-devtools-focus jotai-devtools-active m_8d3f4000 m_87cf2631"
@@ -1856,7 +1856,7 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
         </span>
       </button>
       <div
-        class="m_dd36362e"
+        class="internal-jotai-devtools-playbar-root m_dd36362e"
         data-size="xs"
         style="--slider-size: var(--slider-size-xs); --slider-radius: var(--mantine-radius-xl); --slider-thumb-size: calc(var(--slider-size) * 2);"
         tabindex="-1"
@@ -1865,10 +1865,10 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
           class="m_a8645c2"
         >
           <div
-            class="m_c9ade57f"
+            class="internal-jotai-devtools-playbar-track:before m_c9ade57f"
           >
             <div
-              class="m_38aeed47"
+              class="internal-jotai-devtools-playbar-bar m_38aeed47"
               style="--slider-bar-width: calc(0% + var(--slider-size)); --slider-bar-offset: calc(0% - var(--slider-size));"
             />
             <div
@@ -1876,7 +1876,7 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
               aria-valuemax="100"
               aria-valuemin="0"
               aria-valuenow="0"
-              class="jotai-devtools-focus m_c9a9a60a"
+              class="jotai-devtools-focus internal-jotai-devtools-playbar-thumb m_c9a9a60a"
               role="slider"
               style="--slider-thumb-offset: 0%;"
               tabindex="0"
@@ -2012,7 +2012,7 @@ exports[`DevTools - TimeTravel Snapshot list Snapshot history with actions shoul
 
 exports[`DevTools - TimeTravel Snapshot list should render time travel without any errors 1`] = `
 <div
-  class="jotai-devtools-shell m_89d60db1"
+  class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
   data-orientation="horizontal"
   data-testid="jotai-devtools-shell"
   data-variant="default"
@@ -2258,16 +2258,16 @@ exports[`DevTools - TimeTravel Snapshot list should render time travel without a
         style="flex-basis: 0px; flex-grow: 45; flex-shrink: 1; overflow: auto;"
       >
         <div
-          class="m_8bffd616 __m__-r2p"
+          class="internal-jotai-devtools-time-travel-wrapper m_8bffd616 __m__-r2p"
           data-testid="jotai-devtools-time-travel-panel-left-content"
           style="flex-direction: column; padding-top: 0rem; height: 100%;"
         >
           <div
-            class="m_6d731127"
+            class="internal-jotai-devtools-header-wrapper m_6d731127"
             style="--stack-gap: var(--mantine-spacing-sm); --stack-align: stretch; --stack-justify: flex-start;"
           >
             <div
-              class="m_4081bf90"
+              class="internal-jotai-devtools-header-content m_4081bf90"
               style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: wrap;"
             >
               <div
@@ -2453,10 +2453,10 @@ exports[`DevTools - TimeTravel Snapshot list should render time travel without a
         tabindex="0"
       >
         <div
-          class=""
+          class="internal-jotai-devtools-panel-resize-handle-wrapper"
         >
           <div
-            class=""
+            class="internal-jotai-devtools-panel-resize-handle-content"
             style="border-radius: 2rem; vertical-align: middle; height: 20%; min-height: calc(3.125rem * var(--mantine-scale)); max-height: calc(6.25rem * var(--mantine-scale));"
           />
         </div>
@@ -2488,7 +2488,7 @@ exports[`DevTools - TimeTravel Snapshot list should render time travel without a
       </div>
     </div>
     <div
-      class=""
+      class="internal-jotai-devtools-playbar-wrapper"
     >
       <button
         class="jotai-devtools-focus m_8d3f4000 m_87cf2631"
@@ -2523,7 +2523,7 @@ exports[`DevTools - TimeTravel Snapshot list should render time travel without a
         </span>
       </button>
       <div
-        class="m_dd36362e"
+        class="internal-jotai-devtools-playbar-root m_dd36362e"
         data-size="xs"
         style="--slider-size: var(--slider-size-xs); --slider-radius: var(--mantine-radius-xl); --slider-thumb-size: calc(var(--slider-size) * 2);"
         tabindex="-1"
@@ -2533,11 +2533,11 @@ exports[`DevTools - TimeTravel Snapshot list should render time travel without a
           data-disabled="true"
         >
           <div
-            class="m_c9ade57f"
+            class="internal-jotai-devtools-playbar-track:before m_c9ade57f"
             data-disabled="true"
           >
             <div
-              class="m_38aeed47"
+              class="internal-jotai-devtools-playbar-bar m_38aeed47"
               data-disabled="true"
               style="--slider-bar-width: calc(NaN% + var(--slider-size)); --slider-bar-offset: calc(0% - var(--slider-size));"
             />
@@ -2546,7 +2546,7 @@ exports[`DevTools - TimeTravel Snapshot list should render time travel without a
               aria-valuemax="0"
               aria-valuemin="0"
               aria-valuenow="0"
-              class="jotai-devtools-focus m_c9a9a60a"
+              class="jotai-devtools-focus internal-jotai-devtools-playbar-thumb m_c9a9a60a"
               data-disabled="true"
               role="slider"
               style="--slider-thumb-offset: NaN%;"
diff --git a/__tests__/devtools/__snapshots__/basic.test.tsx.snap b/__tests__/devtools/__snapshots__/basic.test.tsx.snap
index 1705e1de..aba2bc24 100644
--- a/__tests__/devtools/__snapshots__/basic.test.tsx.snap
+++ b/__tests__/devtools/__snapshots__/basic.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -195,7 +195,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with m
             with a minimal reproduction and the following error
           </p>
           <div
-            class="m_5cb1b9c8 m_1f5e827e"
+            class="internal-jotai-devtools-code-syntax-highlighter m_5cb1b9c8 m_1f5e827e"
             dir="ltr"
           >
             <button
@@ -291,7 +291,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
 
     </style>
     <div
-      class="jotai-devtools-shell m_89d60db1"
+      class="internal-jotai-devtools-shell jotai-devtools-shell m_89d60db1"
       data-orientation="horizontal"
       data-testid="jotai-devtools-shell"
       data-variant="default"
@@ -470,7 +470,7 @@ exports[`DevTools - basic Error boundary should display an error boundary with s
             with a minimal reproduction and the following error
           </p>
           <div
-            class="m_5cb1b9c8 m_1f5e827e"
+            class="internal-jotai-devtools-code-syntax-highlighter m_5cb1b9c8 m_1f5e827e"
             dir="ltr"
           >
             <button
diff --git a/jest.config.ts b/jest.config.ts
index b97c5005..0ef56e90 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -56,7 +56,6 @@ const config: Config = {
     '@testing-library/jest-dom/extend-expect',
     '<rootDir>/__tests__/setup.ts',
   ],
-  snapshotSerializers: ['@emotion/jest/serializer'],
 };
 
 export default config;
diff --git a/src/DevTools/Extension/Extension.tsx b/src/DevTools/Extension/Extension.tsx
index 6e15f29c..198d7cfc 100644
--- a/src/DevTools/Extension/Extension.tsx
+++ b/src/DevTools/Extension/Extension.tsx
@@ -10,7 +10,7 @@ import { useDevtoolsJotaiStoreOptions } from '../internal-jotai-store';
 import { logo } from './assets/logo';
 import { Shell } from './components/Shell';
 import useSyncSnapshotHistory from './components/Shell/components/TimeTravel/useSyncSnapshotHistory';
-import styles from './ShellTriggerButton.module.css';
+import './ShellTriggerButton.css';
 
 type ShellTriggerButtonProps = {
   position?:
@@ -52,7 +52,7 @@ const ShellTriggerButton = React.forwardRef<
       top={position?.includes('top') ? '0.2rem' : 'unset'}
       bottom={position?.includes('bottom') ? '0.2rem' : 'unset'}
       className={clsx(
-        styles['jotai-devtools-trigger-button'],
+        'internal-jotai-devtools-trigger-button',
         'jotai-devtools-trigger-button',
       )}
     >
diff --git a/src/DevTools/Extension/ShellTriggerButton.css b/src/DevTools/Extension/ShellTriggerButton.css
new file mode 100644
index 00000000..a555de8a
--- /dev/null
+++ b/src/DevTools/Extension/ShellTriggerButton.css
@@ -0,0 +1,5 @@
+.internal-jotai-devtools-trigger-button {
+  img {
+    height: 2rem;
+  }
+}
diff --git a/src/DevTools/Extension/ShellTriggerButton.module.css b/src/DevTools/Extension/ShellTriggerButton.module.css
deleted file mode 100644
index ea602c09..00000000
--- a/src/DevTools/Extension/ShellTriggerButton.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.jotai-devtools-trigger-button {
-  img {
-    height: 2rem;
-  }
-}
diff --git a/src/DevTools/Extension/components/Shell/Shell.module.css b/src/DevTools/Extension/components/Shell/Shell.css
similarity index 93%
rename from src/DevTools/Extension/components/Shell/Shell.module.css
rename to src/DevTools/Extension/components/Shell/Shell.css
index fcf28310..f7611af6 100644
--- a/src/DevTools/Extension/components/Shell/Shell.module.css
+++ b/src/DevTools/Extension/components/Shell/Shell.css
@@ -1,4 +1,4 @@
-.jotai-devtools-shell {
+.internal-jotai-devtools-shell {
   position: fixed;
   width: calc(100% - 1.25rem);
   left: 50%;
diff --git a/src/DevTools/Extension/components/Shell/Shell.tsx b/src/DevTools/Extension/components/Shell/Shell.tsx
index dc09c281..6daa6da7 100644
--- a/src/DevTools/Extension/components/Shell/Shell.tsx
+++ b/src/DevTools/Extension/components/Shell/Shell.tsx
@@ -12,7 +12,7 @@ import { Header } from './components/Header';
 import { ShellResizeBar } from './components/ShellResizeBar';
 import { TabsHeader } from './components/TabsHeader';
 import { TimeTravel } from './components/TimeTravel';
-import styles from './Shell.module.css';
+import './Shell.css';
 
 export const Shell = () => {
   const [selectedShellTab, setSelectedShellTab] = useSelectedShellTab();
@@ -36,7 +36,7 @@ export const Shell = () => {
       h={height}
       mah={shellStyleDefaults.maxHeight}
       ref={shellRef}
-      className={clsx(styles['jotai-devtools-shell'], 'jotai-devtools-shell')}
+      className={clsx('internal-jotai-devtools-shell', 'jotai-devtools-shell')}
       data-testid="jotai-devtools-shell"
       id="jotai-devtools-shell"
       value={selectedShellTab}
diff --git a/src/DevTools/Extension/components/Shell/components/ActionListItem.module.css b/src/DevTools/Extension/components/Shell/components/ActionListItem.css
similarity index 66%
rename from src/DevTools/Extension/components/Shell/components/ActionListItem.module.css
rename to src/DevTools/Extension/components/Shell/components/ActionListItem.css
index aa763144..94151ac6 100644
--- a/src/DevTools/Extension/components/Shell/components/ActionListItem.module.css
+++ b/src/DevTools/Extension/components/Shell/components/ActionListItem.css
@@ -1,8 +1,8 @@
-.jotai-devtools-monospace-font {
+.internal-jotai-devtools-monospace-font {
   font-family: var(--mantine-font-family-monospace);
   font-size: var(--mantine-font-size-sm) !important;
 }
 
-.jotai-devtools-navlink {
+.internal-jotai-devtools-navlink {
   border-radius: var(--mantine-radius-md);
 }
diff --git a/src/DevTools/Extension/components/Shell/components/ActionListItem.tsx b/src/DevTools/Extension/components/Shell/components/ActionListItem.tsx
index 95353f1c..a5363fbc 100644
--- a/src/DevTools/Extension/components/Shell/components/ActionListItem.tsx
+++ b/src/DevTools/Extension/components/Shell/components/ActionListItem.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NavLink, Text } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
 import { useThemeMode } from '../../../../hooks/useThemeMode';
-import style from './ActionListItem.module.css';
+import './ActionListItem.css';
 
 type ActionListItemProps = {
   label?: string | undefined;
@@ -23,14 +23,14 @@ export const ActionListItem = React.memo(
           ref={ref}
           label={React.useMemo(
             () => (
-              <Text className={style['jotai-devtools-monospace-font']}>
+              <Text className={'internal-jotai-devtools-monospace-font'}>
                 {label}
               </Text>
             ),
             [label],
           )}
           variant="filled"
-          className={style['jotai-devtools-navlink']}
+          className="internal-jotai-devtools-navlink"
           active={isActive}
           color={useThemeMode('dark', 'gray')}
           onClick={handleOnClick}
diff --git a/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.module.css b/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.css
similarity index 67%
rename from src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.module.css
rename to src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.css
index d171ed7d..92956fd6 100644
--- a/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.module.css
+++ b/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.css
@@ -1,4 +1,4 @@
-.jotai-devtools-time-travel-wrapper {
+.internal-jotai-devtools-atom-viewer-wrapper {
   background: light-dark(
     var(--mantine-color-gray-2),
     var(--mantine-color-dark-8)
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.tsx b/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.tsx
index d33dbcd0..30ca4a16 100644
--- a/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.tsx
+++ b/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Flex } from '@mantine/core';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 import { PanelResizeHandle } from '../PanelResizeHandle';
-import styles from './AtomViewer.module.css';
+import './AtomViewer.css';
 import { AtomDetail } from './components/AtomDetail';
 import { AtomList } from './components/AtomList';
 
@@ -17,7 +17,7 @@ export const AtomViewer = React.memo(() => {
           pt={0}
           h="100%"
           direction="column"
-          className={styles['jotai-devtools-atom-viewer-wrapper']}
+          className="internal-jotai-devtools-atom-viewer-wrapper"
         >
           <AtomList />
         </Flex>
diff --git a/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.css b/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.css
new file mode 100644
index 00000000..a0f57e63
--- /dev/null
+++ b/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.css
@@ -0,0 +1,3 @@
+.internal-jotai-devtools-code-syntax-highlighter {
+  border-radius: var(--mantine-radius-md);
+}
diff --git a/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.module.css b/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.module.css
deleted file mode 100644
index a2520566..00000000
--- a/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.jotai-devtools-code-syntax-highlighter {
-  border-radius: var(--mantine-radius-md);
-}
diff --git a/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.tsx b/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.tsx
index 57cac480..19fa7aec 100644
--- a/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.tsx
+++ b/src/DevTools/Extension/components/Shell/components/CodeSyntaxHighlighter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CodeHighlight, CodeHighlightProps } from '@mantine/code-highlight';
 import clsx from 'clsx';
-import styles from './CodeSyntaxHighlighter.module.css';
+import './CodeSyntaxHighlighter.css';
 
 export type CodeSyntaxHighlighterProps = Omit<CodeHighlightProps, 'code'> & {
   children: CodeHighlightProps['code'];
@@ -16,7 +16,7 @@ export const CodeSyntaxHighlighter = ({
       {...rest}
       code={children}
       className={clsx(
-        styles['jotai-devtools-code-syntax-highlighter'],
+        'internal-jotai-devtools-code-syntax-highlighter',
         rest.className,
       )}
     />
diff --git a/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.module.css b/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.css
similarity index 76%
rename from src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.module.css
rename to src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.css
index cdf8a80b..2deb535d 100644
--- a/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.module.css
+++ b/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.css
@@ -1,4 +1,4 @@
-.jotai-devtools-json-tree-wrapper {
+.internal-jotai-devtools-json-tree-wrapper {
   font-family: var(--mantine-font-family-monospace);
   font-size: 13px;
   ul:first-of-type {
diff --git a/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.tsx b/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.tsx
index d3592afd..5a967642 100644
--- a/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.tsx
+++ b/src/DevTools/Extension/components/Shell/components/JSONTree/JSONTree.tsx
@@ -3,7 +3,7 @@ import { Box } from '@mantine/core';
 import { JSONTree as ReactJSONTree, ValueRenderer } from 'react-json-tree';
 import { useDevToolsOptionsValue } from '../../../../../atoms/devtools-options';
 import { ErrorSymbol, stringifyAtomValue } from '../../../../../utils/';
-import styles from './JSONTree.module.css';
+import './JSONTree.css';
 import { getItemString } from './utils/get-item-string';
 import { useJSONTreeStyling } from './utils/use-JSON-tree-styling';
 export { getItemStringWithDiffEnabled } from './utils/get-item-string';
@@ -28,7 +28,7 @@ export const JSONTree: typeof ReactJSONTree = (props) => {
 
   return (
     <Box
-      className={styles['jotai-devtools-json-tree-wrapper']}
+      className="internal-jotai-devtools-json-tree-wrapper"
       data-testid="json-tree-view-container"
     >
       <ReactJSONTree
diff --git a/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.css b/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.css
new file mode 100644
index 00000000..f773025b
--- /dev/null
+++ b/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.css
@@ -0,0 +1,22 @@
+.internal-jotai-devtools-panel-resize-handle-wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  .internal-jotai-devtools-panel-resize-handle-content {
+    transition:
+      max-height,
+      min-height,
+      height,
+      0.2s ease-out;
+  }
+}
+
+[data-resize-handle-active]
+  .internal-jotai-devtools-panel-resize-handle-wrapper,
+.internal-jotai-devtools-panel-resize-handle-wrapper:hover {
+  .internal-jotai-devtools-panel-resize-handle-content {
+    height: 90% !important;
+    min-height: 90% !important;
+    max-height: 90% !important;
+  }
+}
diff --git a/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.module.css b/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.module.css
deleted file mode 100644
index 13686901..00000000
--- a/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.jotai-devtools-panel-resize-handle-wrapper {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  .jotai-devtools-panel-resize-handle-content {
-    transition:
-      max-height,
-      min-height,
-      height,
-      0.2s ease-out;
-  }
-}
-
-[data-resize-handle-active] .jotai-devtools-panel-resize-handle-wrapper,
-.jotai-devtools-panel-resize-handle-wrapper:hover {
-  .jotai-devtools-panel-resize-handle-content {
-    height: 90% !important;
-    min-height: 90% !important;
-    max-height: 90% !important;
-  }
-}
diff --git a/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.tsx b/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.tsx
index d3030c5e..e76462b6 100644
--- a/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.tsx
+++ b/src/DevTools/Extension/components/Shell/components/PanelResizeHandle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, MantineStyleProp } from '@mantine/core';
 import { PanelResizeHandle as ReactPanelResizeHandle } from 'react-resizable-panels';
 import { useThemeMode } from '../../../../hooks/useThemeMode';
-import styles from './PanelResizeHandle.module.css';
+import './PanelResizeHandle.css';
 
 const innerContainerStyles: MantineStyleProp = {
   borderRadius: '2rem',
@@ -14,10 +14,10 @@ export const PanelResizeHandle = () => {
     <ReactPanelResizeHandle id="jotai-devtools-panel-resize-handle">
       <Box
         p="5"
-        className={styles['jotai-devtools-panel-resize-handle-wrapper']}
+        className="internal-jotai-devtools-panel-resize-handle-wrapper"
       >
         <Box
-          className={styles['jotai-devtools-panel-resize-handle-content']}
+          className="internal-jotai-devtools-panel-resize-handle-content"
           mah={100}
           mih={50}
           h="20%"
diff --git a/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.module.css b/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.css
similarity index 67%
rename from src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.module.css
rename to src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.css
index 53080002..fd7be86a 100644
--- a/src/DevTools/Extension/components/Shell/components/AtomViewer/AtomViewer.module.css
+++ b/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.css
@@ -1,4 +1,4 @@
-.jotai-devtools-atom-viewer-wrapper {
+.internal-jotai-devtools-time-travel-wrapper {
   background: light-dark(
     var(--mantine-color-gray-2),
     var(--mantine-color-dark-8)
diff --git a/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.tsx b/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.tsx
index 4bc2bf61..1ba13abb 100644
--- a/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.tsx
+++ b/src/DevTools/Extension/components/Shell/components/TimeTravel/TimeTravel.tsx
@@ -5,7 +5,7 @@ import { PanelResizeHandle } from '../PanelResizeHandle';
 import { PlayBar } from './components/PlayBar';
 import { SnapshotDetail } from './components/SnapshotDetail';
 import { SnapshotList } from './components/SnapshotList';
-import styles from './TimeTravel.module.css';
+import './TimeTravel.css';
 const panelStyles = { overflow: 'auto' };
 
 // 56px is the height of the playbar
@@ -30,7 +30,7 @@ export const TimeTravel = React.memo(() => {
             pt={0}
             h="100%"
             direction="column"
-            className={styles['jotai-devtools-time-travel-wrapper']}
+            className="internal-jotai-devtools-time-travel-wrapper"
             data-testid="jotai-devtools-time-travel-panel-left-content"
           >
             <SnapshotList />
diff --git a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.module.css b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.css
similarity index 72%
rename from src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.module.css
rename to src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.css
index bbc74214..0f9b821c 100644
--- a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.module.css
+++ b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.css
@@ -1,4 +1,4 @@
-.jotai-devtools-playbar-wrapper {
+.internal-jotai-devtools-playbar-wrapper {
   height: 56px;
   border-top: 0.09rem solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
@@ -8,29 +8,29 @@
   gap: 12px;
 }
 
-.jotai-devtools-playbar-root {
+.internal-jotai-devtools-playbar-root {
   flex-grow: 1;
 }
 
-.jotai-devtools-playbar-markLabel {
+.internal-jotai-devtools-playbar-markLabel {
   display: none;
 }
 
-.jotai-devtools-playbar-bar {
+.internal-jotai-devtools-playbar-bar {
   background-color: light-dark(
     var(--mantine-color-dark-4),
     var(--mantine-color-gray-6)
   );
 }
 
-.jotai-devtools-playbar-track:before {
+.internal-jotai-devtools-playbar-track:before {
   background-color: light-dark(
     var(--mantine-color-gray-3),
     var(--mantine-color-dark-4)
   );
 }
 
-.jotai-devtools-playbar-mark {
+.internal-jotai-devtools-playbar-mark {
   background-color: light-dark(
     var(--mantine-color-gray-7),
     var(--mantine-color-gray-5)
@@ -38,7 +38,7 @@
   border-width: 0;
 }
 
-.jotai-devtools-playbar-thumb {
+.internal-jotai-devtools-playbar-thumb {
   height: 14px !important;
   width: 14px !important;
   border-width: 3px !important;
diff --git a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.tsx b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.tsx
index e08cd4c4..50ff79bb 100644
--- a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.tsx
+++ b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlayBar.tsx
@@ -13,7 +13,7 @@ import {
   useTimeTravelNavigateActions,
 } from '../atoms';
 import { PlaybackSpeedDropdown } from './PlaybackSpeedDropdown';
-import styles from './PlayBar.module.css';
+import './PlayBar.css';
 
 export const PlayBar = () => {
   const { step, isSlidePossible, max, value } = useSnapshotSliderValue();
@@ -29,7 +29,7 @@ export const PlayBar = () => {
   const isDisabled = !isSlidePossible;
 
   return (
-    <Box className={styles['jotai-devtools-playbar-wrapper']}>
+    <Box className="internal-jotai-devtools-playbar-wrapper">
       <ActionIcon
         variant="filled"
         color={useThemeMode('dark', 'gray')}
@@ -53,12 +53,12 @@ export const PlayBar = () => {
         step={step}
         onChange={handleOnSliderChange}
         classNames={{
-          root: styles['jotai-devtools-playbar-root'],
-          markLabel: styles['jotai-devtools-playbar-markLabel'],
-          bar: styles['jotai-devtools-playbar-bar'],
-          track: styles['jotai-devtools-playbar-track:before'],
-          mark: styles['jotai-devtools-playbar-mark'],
-          thumb: styles['jotai-devtools-playbar-thumb'],
+          root: 'internal-jotai-devtools-playbar-root',
+          markLabel: 'internal-jotai-devtools-playbar-markLabel',
+          bar: 'internal-jotai-devtools-playbar-bar',
+          track: 'internal-jotai-devtools-playbar-track:before',
+          mark: 'internal-jotai-devtools-playbar-mark',
+          thumb: 'internal-jotai-devtools-playbar-thumb',
         }}
       />
       <Group>
diff --git a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.module.css b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.css
similarity index 72%
rename from src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.module.css
rename to src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.css
index 444fce5c..82bd7162 100644
--- a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.module.css
+++ b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.css
@@ -1,10 +1,10 @@
-.jotai-devtools-header-wrapper {
+.internal-jotai-devtools-header-wrapper {
   position: 'sticky';
   top: 0;
   margin-top: var(--mantine-spacing-xs);
 }
 
-.jotai-devtools-header-content {
+.internal-jotai-devtools-header-content {
   border-radius: var(--mantine-radius-md);
   background-color: light-dark(
     var(--mantine-color-white),
diff --git a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.tsx b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.tsx
index 0730e156..f68ca4b3 100644
--- a/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.tsx
+++ b/src/DevTools/Extension/components/Shell/components/TimeTravel/components/SnapshotList/components/Header.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Group, Stack } from '@mantine/core';
 import { ClearHistory } from './ClearHistory';
-import styles from './Header.module.css';
+import './Header.css';
 import { RecordHistory } from './RecordHistory';
 import { SnapshotListNavigation } from './SnapshotListNavigation';
 import { SnapshotSearchInput } from './SnapshotSearchInput';
 
 export const Header = () => {
   return (
-    <Stack className={styles['jotai-devtools-header-wrapper']} gap="sm">
+    <Stack className="internal-jotai-devtools-header-wrapper" gap="sm">
       <Group
-        className={styles['jotai-devtools-header-content']}
+        className="internal-jotai-devtools-header-content"
         justify="space-between"
         p="xs"
       >
diff --git a/tsup.config.ts b/tsup.config.ts
index 74c69393..18092da0 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -25,7 +25,6 @@ const baseConfig: Options = {
   },
   loader: {
     '.woff2': 'dataurl',
-    '.css': 'local-css',
   },
   sourcemap: false,
   // Clean output directory before each build