diff --git a/src/app/roof2/page.jsx b/src/app/roof2/page.jsx
index 81eaaec4..8c83730e 100644
--- a/src/app/roof2/page.jsx
+++ b/src/app/roof2/page.jsx
@@ -15,8 +15,7 @@ export default function Roof2Page() {
 
   return (
     <>
-      <Hero title="Drawing on canvas 2D Roof" />
-      <div className="flex flex-col justify-center my-8">
+      <div className="flex flex-col justify-center my-8 pt-20">
         <Roof2 />
       </div>
     </>
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 1f81ee41..708b58f0 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -418,7 +418,7 @@ export default function Roof2() {
           </div>
         </>
       )}
-      <div className="flex justify-center my-8">
+      <div className="flex justify-start my-8 mx-2 w-full">
         <canvas id="canvas" style={{ border: '1px solid black' }} />
       </div>
     </>