diff --git a/.gitignore b/.gitignore
index 4beb836..0a92755 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ dist
 .env
 
 out
+package-lock.json 
\ No newline at end of file
diff --git a/src/HelloWorld/Arc.jsx b/src/HelloWorld/Arc.jsx
index 0bbd147..ae24e75 100644
--- a/src/HelloWorld/Arc.jsx
+++ b/src/HelloWorld/Arc.jsx
@@ -6,16 +6,21 @@ const getCircumferenceOfArc = (rx, ry) => {
 	return Math.PI * 2 * Math.sqrt((rx * rx + ry * ry) / 2);
 };
 
-const rx = 135;
-const ry = 300;
-const cx = 960;
-const cy = 540;
-const arcLength = getCircumferenceOfArc(rx, ry);
-const strokeWidth = 30;
+const rxRatio = 135 / 1920; // Ratio of rx to width
+const ryRatio = 300 / 1080; // Ratio of ry to height
+const strokeWidthRatio = 30 / 1920; // Ratio of strokeWidth to width
 
 export const Arc = ({progress, rotation, rotateProgress}) => {
 	const {width, height} = useVideoConfig();
 
+
+	const cx = width / 2; // Center X coordinate
+	const cy = height / 2; // Center Y coordinate
+	const rx = width * rxRatio;
+	const ry = height * ryRatio;
+	const strokeWidth = width * strokeWidthRatio;
+	const arcLength = getCircumferenceOfArc(rx, ry);
+
 	// Each svg Id must be unique to not conflict with each other
 	const [gradientId] = useState(() => String(random(null)));
 
diff --git a/src/Root.jsx b/src/Root.jsx
index d07ea2b..579124f 100644
--- a/src/Root.jsx
+++ b/src/Root.jsx
@@ -29,8 +29,8 @@ export const RemotionRoot = () => {
 				component={Logo}
 				durationInFrames={150}
 				fps={30}
-				width={1920}
-				height={1080}
+				width={3840}
+				height={2160}
 			/>
 		</>
 	);