diff --git a/src/components/DoomCanvas/DoomCanvas.tsx b/src/components/DoomCanvas/DoomCanvas.tsx
index a703e395..4be165c2 100644
--- a/src/components/DoomCanvas/DoomCanvas.tsx
+++ b/src/components/DoomCanvas/DoomCanvas.tsx
@@ -136,11 +136,12 @@ const DoomCanvas: React.FC = () => {
 
   return (
     <>
-      <Card className="h-[40rem] relative">
+      <Card className="relative">
         <canvas
           id="canvas"
           ref={canvasRef}
-          className={cx("w-full h-full", { "opacity-0": isLoading || isError })}
+          className={cx("w-full", { "opacity-0": isLoading || isError })}
+          style={{ aspectRatio: "1028/805" }}
         />
         {(isLoading || isError) && (
           <div className="absolute inset-0 flex items-center justify-center text-yellow-400 text-4xl text-center px-4 w-4/5 mx-auto">
diff --git a/src/index.css b/src/index.css
index 45c7ad2b..a48156e4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -75,6 +75,7 @@
   height: 19px;
   transform-origin: right center;
   transform: rotate(0deg);
+  transition: 0.3s;
 }
 
 .speedometer-tick::before {