diff --git a/frontend/src/canvas/CanvasContainer.js b/frontend/src/canvas/CanvasContainer.js
index a5ecca6a..4274c917 100644
--- a/frontend/src/canvas/CanvasContainer.js
+++ b/frontend/src/canvas/CanvasContainer.js
@@ -5,8 +5,7 @@ import { devnetMode } from '../utils/Consts.js';
 import CanvasContainerItem from './CanvasContainerItem.js';
 
 const CanvasContainer = (props) => {
-  const GRID_SIZE = 6; // 6x6 grid
-  const CENTER_POS = Math.floor(GRID_SIZE / 2);
+  const GRID_SIZE = Math.ceil(Math.sqrt(props.worlds?.length || 1));
 
   // Calculate minimum scale based on grid size and viewport
   const calculateMinScale = () => {
@@ -575,7 +574,7 @@ const CanvasContainer = (props) => {
         className='CanvasContainer__grid'
         style={{
           display: 'grid',
-          // gridTemplateColumns: `repeat(${GRID_SIZE}, ${props.width}px)`,
+          gridTemplateColumns: `repeat(${GRID_SIZE}, ${props.width}px)`,
           gridGap: '20px',
           position: 'absolute',
           top: '50%',
@@ -584,18 +583,12 @@ const CanvasContainer = (props) => {
           transformOrigin: 'center'
         }}
       >
-        {/* {Array.from({ length: GRID_SIZE * GRID_SIZE }, (_, index) => { */}
-        {Array.from({ length: 1 }, (_, index) => {
-          const row = Math.floor(index / GRID_SIZE);
-          const col = index % GRID_SIZE;
-          const isCenter = row === CENTER_POS && col === CENTER_POS;
-          const worldId = isCenter
-            ? props.openedWorldId
-            : `world-${row}-${col}`;
+        {props.worlds?.map((world) => {
+          const isCenter = world.worldId === props.openedWorldId;
 
           return (
             <div
-              key={`grid-${row}-${col}`}
+              key={`grid-${world.worldId}`}
               style={{
                 position: 'relative',
                 width: `${props.width}px`,
@@ -604,11 +597,13 @@ const CanvasContainer = (props) => {
                 cursor: 'pointer',
                 opacity: isCenter ? 1 : 0.7
               }}
-              onMouseEnter={() => setHoveredWorld(worldId)}
+              onMouseEnter={() => setHoveredWorld(world.worldId)}
               onMouseLeave={() => setHoveredWorld(null)}
               onClick={() => {
                 if (!isCenter) {
-                  console.log(`Clicked world at position ${row},${col}`);
+                  props.setOpenedWorldId(world.worldId);
+                  // Update URL
+                  window.history.pushState({}, '', `/worlds/${world.worldId}`);
                 }
               }}
             >
@@ -623,8 +618,9 @@ const CanvasContainer = (props) => {
                 selectedBackgroundColor={selectedBackgroundColor}
                 {...props}
                 pixelClicked={isCenter ? pixelClicked : () => {}}
-                openedWorldId={worldId}
-                showTitle={hoveredWorld === worldId}
+                openedWorldId={world.worldId}
+                showTitle={hoveredWorld === world.worldId}
+                worldName={world.name}
               />
             </div>
           );