diff --git a/src/App.jsx b/src/App.jsx
index f7317d2..f27a3af 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,24 +6,44 @@ export default function App() {
     <div
       style={{
         display: "flex",
+        justifyContent: "center", // Adjusts the children to be centered
+        alignItems: "center", // Centers the children vertically
         position: "relative",
         width: "100vw",
         height: "100vh",
+        padding: "20px", // Adds some padding inside the container
+        gap: "20px" // Reduces space between canvas and iframe
       }}
     >
       {/* Tldraw Component */}
-      <div style={{ width: 500, height: 500, marginRight: '10px' }}>
-        <Tldraw></Tldraw>
+      <div style={{
+        width: "40%",
+        height: "80%",
+        border: "10px solid #ADD8E6", // Light blue border
+        borderRadius: "10px", // Rounded corners
+        overflow: "hidden", // Ensures nothing spills out of the border radius
+      }}>
+        <Tldraw />
       </div>
 
       {/* Iframe Component */}
-      <div style={{ flex: 1 }}>
+      <div style={{
+        width: "40%",
+        height: "80%",
+        border: "10px solid #ADD8E6", // Light blue border
+        borderRadius: "10px", // Rounded corners
+        overflow: "hidden", // Ensures nothing spills out of the border radius
+      }}>
         <iframe
           src="https://jupyterlite.github.io/xeus-python-demo/repl"
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%", border: "none" }} // Removes the default border of iframe
           title="Your Iframe Title"
-        ></iframe>
+        />
       </div>
     </div>
   );
 }
+
+
+
+