diff --git a/src/Components/CanvasArea/CanvasArea.css b/src/Components/CanvasArea/CanvasArea.css
index e32e075..e69882a 100644
--- a/src/Components/CanvasArea/CanvasArea.css
+++ b/src/Components/CanvasArea/CanvasArea.css
@@ -10,4 +10,12 @@
     height: 600px;
     
     border: 1px solid;
-  }
\ No newline at end of file
+  }
+
+  .canvas-area .image-node {
+      max-width: 150px;
+  }
+  
+  .canvas-area .text-node {
+    font-size: 2em;
+}
\ No newline at end of file
diff --git a/src/Components/CanvasArea/CanvasArea.tsx b/src/Components/CanvasArea/CanvasArea.tsx
index 4b33d38..550fafa 100644
--- a/src/Components/CanvasArea/CanvasArea.tsx
+++ b/src/Components/CanvasArea/CanvasArea.tsx
@@ -32,7 +32,9 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
             const tmpTextNode = this.props.nodes.text[nodeId];
             return (
                 <DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}>
-                    {tmpTextNode.value}
+                    <div className="text-node">
+                        {tmpTextNode.value}
+                    </div>
                 </DraggableNode>
             );
         });
@@ -43,7 +45,7 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
             const tmpImageNode = this.props.nodes.image[nodeId];
             return (
                 <DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}>
-                    <img draggable={false} src={tmpImageNode.url} style={{ maxWidth: '500px' }} />
+                    <img className="image-node" draggable={false} src={tmpImageNode.url} />
                 </DraggableNode>
             );
         });