diff --git a/src/lib/components/tree/ProfileCloudTreeItem.svelte b/src/lib/components/tree/ProfileCloudTreeItem.svelte
index afb4fd4..ae32a49 100644
--- a/src/lib/components/tree/ProfileCloudTreeItem.svelte
+++ b/src/lib/components/tree/ProfileCloudTreeItem.svelte
@@ -97,6 +97,7 @@
 
 <style>
   .button {
+    container-type: inline-size;
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
@@ -207,7 +208,7 @@
     white-space: nowrap;
   }
 
-  @media (max-width: 400px) {
+  @container (max-width: 400px) {
     .modified-date {
       display: none;
     }
diff --git a/src/routes/BrowserLayout.svelte b/src/routes/BrowserLayout.svelte
index 6287051..a6242b3 100644
--- a/src/routes/BrowserLayout.svelte
+++ b/src/routes/BrowserLayout.svelte
@@ -104,6 +104,7 @@
 <style>
   /* Main container */
   #main {
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -137,14 +138,14 @@
     gap: 1rem; /* gap-4 */
   }
 
-  @media (min-width: 768px) {
+  @container (min-width: 768px) {
     /* md:grid-cols-2 */
     .configs-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
 
-  @media (min-width: 1024px) {
+  @container (min-width: 1024px) {
     /* lg:py-8 and lg:grid-cols-3 */
     .configs-grid {
       padding-top: 2rem;