diff --git a/src/components/svgs/lines/styles/bjsubway-dotted.tsx b/src/components/svgs/lines/styles/bjsubway-dotted.tsx
index ee3bc1cb9..fc9ebae1a 100644
--- a/src/components/svgs/lines/styles/bjsubway-dotted.tsx
+++ b/src/components/svgs/lines/styles/bjsubway-dotted.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -26,7 +27,7 @@ const BjsubwayDotted = (props: LineStyleComponentProps<BjsubwayDottedAttributes>
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeDasharray="2 2" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeDasharray="2 2" />
             <path d={path} fill="none" stroke={bgColor} strokeWidth="3.4" />
         </g>
     );
diff --git a/src/components/svgs/lines/styles/bjsubway-single-color.tsx b/src/components/svgs/lines/styles/bjsubway-single-color.tsx
index 8790892bd..44c052da2 100644
--- a/src/components/svgs/lines/styles/bjsubway-single-color.tsx
+++ b/src/components/svgs/lines/styles/bjsubway-single-color.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,8 +24,8 @@ const BjsubwaySingleColor = (props: LineStyleComponentProps<BjsubwaySingleColorA
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke="white" strokeWidth="6" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
+            <path d={path} fill="none" stroke="white" strokeWidth={LINE_WIDTH * 1.2} strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/bjsubway-tram.tsx b/src/components/svgs/lines/styles/bjsubway-tram.tsx
index d69f3d71f..a0f535332 100644
--- a/src/components/svgs/lines/styles/bjsubway-tram.tsx
+++ b/src/components/svgs/lines/styles/bjsubway-tram.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,8 +24,8 @@ const BjsubwayTram = (props: LineStyleComponentProps<BjsubwayTramAttributes>) =>
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" />
-            <path d={path} fill="none" stroke="white" strokeWidth="1.67" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} />
+            <path d={path} fill="none" stroke="white" strokeWidth={LINE_WIDTH / 3} />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/chengdurt-outside-fare-gates.tsx b/src/components/svgs/lines/styles/chengdurt-outside-fare-gates.tsx
index 54edc11bb..a1463adc6 100644
--- a/src/components/svgs/lines/styles/chengdurt-outside-fare-gates.tsx
+++ b/src/components/svgs/lines/styles/chengdurt-outside-fare-gates.tsx
@@ -2,7 +2,13 @@ import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const ChengduRTOutsideFareGates = (props: LineStyleComponentProps<ChengduRTOutsideFareGatesAttributes>) => {
     const { id, path, newLine, handlePointerDown } = props;
@@ -18,8 +24,8 @@ const ChengduRTOutsideFareGates = (props: LineStyleComponentProps<ChengduRTOutsi
             d={path}
             fill="none"
             stroke="#b4b4b5"
-            strokeWidth="5"
-            strokeDasharray="6 5"
+            strokeWidth={LINE_WIDTH}
+            strokeDasharray={`${LINE_WIDTH + 1} ${LINE_WIDTH}`}
             cursor="pointer"
             onPointerDown={newLine ? undefined : onPointerDown}
             pointerEvents={newLine ? 'none' : undefined}
diff --git a/src/components/svgs/lines/styles/china-railway.tsx b/src/components/svgs/lines/styles/china-railway.tsx
index ed35f0607..3ff783fda 100644
--- a/src/components/svgs/lines/styles/china-railway.tsx
+++ b/src/components/svgs/lines/styles/china-railway.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,8 +24,8 @@ const ChinaRailway = (props: LineStyleComponentProps<ChinaRailwayAttributes>) =>
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={color[3]} strokeWidth="4.67" strokeDasharray="17.5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[3]} strokeWidth={LINE_WIDTH - 0.33} strokeDasharray="17.5" />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/dual-color.tsx b/src/components/svgs/lines/styles/dual-color.tsx
index d56d1d3d3..82c21170d 100644
--- a/src/components/svgs/lines/styles/dual-color.tsx
+++ b/src/components/svgs/lines/styles/dual-color.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { MdOutlineSwapVert } from 'react-icons/md';
 import { AttrsProps, CityCode, Theme } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -40,8 +41,8 @@ const DualColor = (props: LineStyleComponentProps<DualColorAttributes>) => {
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={pathA} fill="none" stroke={colorA[2]} strokeWidth="2.5" strokeLinecap="round" />
-            <path d={pathB} fill="none" stroke={colorB[2]} strokeWidth="2.5" strokeLinecap="round" />
+            <path d={pathA} fill="none" stroke={colorA[2]} strokeWidth={LINE_WIDTH / 2} strokeLinecap="round" />
+            <path d={pathB} fill="none" stroke={colorB[2]} strokeWidth={LINE_WIDTH / 2} strokeLinecap="round" />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/guangdong-intercity-railway.tsx b/src/components/svgs/lines/styles/guangdong-intercity-railway.tsx
index 4ce344e8b..d04df25ee 100644
--- a/src/components/svgs/lines/styles/guangdong-intercity-railway.tsx
+++ b/src/components/svgs/lines/styles/guangdong-intercity-railway.tsx
@@ -1,7 +1,13 @@
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import React from 'react';
 import { CityCode } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 import { ColorAttribute } from '../../../panels/details/color-field';
 
 const GuangdongIntercityRailway = (props: LineStyleComponentProps<GuangdongIntercityRailwayAttributes>) => {
@@ -16,8 +22,8 @@ const GuangdongIntercityRailway = (props: LineStyleComponentProps<GuangdongInter
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={color[3]} strokeWidth="2.5" strokeDasharray="7.5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[3]} strokeWidth={LINE_WIDTH / 2} strokeDasharray="7.5" />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/jr-east-single-color-pattern.tsx b/src/components/svgs/lines/styles/jr-east-single-color-pattern.tsx
index eed4afc3c..de27700f1 100644
--- a/src/components/svgs/lines/styles/jr-east-single-color-pattern.tsx
+++ b/src/components/svgs/lines/styles/jr-east-single-color-pattern.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -12,8 +13,6 @@ import {
 } from '../../../../constants/lines';
 import { makeShortPathOutline } from '../../../../util/bezier-parallel';
 import { ColorAttribute, ColorField } from '../../../panels/details/color-field';
-
-const LINE_WIDTH = 5;
 const PATTERN_LEN = LINE_WIDTH * Math.SQRT1_2;
 const PATTERN_WIDTH = 0.25;
 const PATTERN_CLIP_PATH_D = ((PATTERN_LEN * Math.SQRT2 - PATTERN_WIDTH) / 2) * Math.SQRT2;
diff --git a/src/components/svgs/lines/styles/jr-east-single-color.tsx b/src/components/svgs/lines/styles/jr-east-single-color.tsx
index 43d4d2cc8..b2d1e6633 100644
--- a/src/components/svgs/lines/styles/jr-east-single-color.tsx
+++ b/src/components/svgs/lines/styles/jr-east-single-color.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,8 +24,8 @@ const JREastSingleColor = (props: LineStyleComponentProps<JREastSingleColorAttri
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke="black" strokeWidth="5.1" />
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="4.9" />
+            <path d={path} fill="none" stroke="black" strokeWidth={LINE_WIDTH + 0.1} />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH - 0.1} />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/london-DART.tsx b/src/components/svgs/lines/styles/london-DART.tsx
index 4d1f8e042..3e93131d7 100644
--- a/src/components/svgs/lines/styles/london-DART.tsx
+++ b/src/components/svgs/lines/styles/london-DART.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -24,7 +25,7 @@ const LondonLutonAirportDART = (props: LineStyleComponentProps<LondonLutonAirpor
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" strokeLinecap="round" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
             <path
                 d={path}
                 fill="none"
diff --git a/src/components/svgs/lines/styles/london-ifs-could-cable-car.tsx b/src/components/svgs/lines/styles/london-ifs-could-cable-car.tsx
index 4b9fe162a..7f3e1148b 100644
--- a/src/components/svgs/lines/styles/london-ifs-could-cable-car.tsx
+++ b/src/components/svgs/lines/styles/london-ifs-could-cable-car.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -24,9 +25,9 @@ const LondonIFSCloudCableCar = (props: LineStyleComponentProps<LondonIFSCloudCab
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" />
-            <path d={path} fill="none" stroke="white" strokeWidth="3" />
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="1" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} />
+            <path d={path} fill="none" stroke="white" strokeWidth={(LINE_WIDTH / 5) * 3} />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH / 5} />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/london-rail.tsx b/src/components/svgs/lines/styles/london-rail.tsx
index 807430337..483382121 100644
--- a/src/components/svgs/lines/styles/london-rail.tsx
+++ b/src/components/svgs/lines/styles/london-rail.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode, Theme } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,14 +28,32 @@ const LondonRail = (props: LineStyleComponentProps<LondonRailAttributes>) => {
 
     return !limitedService ? (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={colorForeground[2]} strokeWidth="2" strokeDasharray="7 3" />
+            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path
+                d={path}
+                fill="none"
+                stroke={colorForeground[2]}
+                strokeWidth={(LINE_WIDTH / 5) * 2}
+                strokeDasharray="7 3"
+            />
         </g>
     ) : (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth="5" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={colorForeground[2]} strokeWidth="4.25" strokeLinecap="round" />
-            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth="2" strokeDasharray="7 3" />
+            <path d={path} fill="none" stroke={colorBackground[2]} strokeWidth={LINE_WIDTH} strokeLinecap="round" />
+            <path
+                d={path}
+                fill="none"
+                stroke={colorForeground[2]}
+                strokeWidth={(LINE_WIDTH / 5) * 4.25}
+                strokeLinecap="round"
+            />
+            <path
+                d={path}
+                fill="none"
+                stroke={colorBackground[2]}
+                strokeWidth={(LINE_WIDTH / 5) * 2}
+                strokeDasharray="7 3"
+            />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/london-sandwich.tsx b/src/components/svgs/lines/styles/london-sandwich.tsx
index 91c39e4fd..1ce205adf 100644
--- a/src/components/svgs/lines/styles/london-sandwich.tsx
+++ b/src/components/svgs/lines/styles/london-sandwich.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -23,7 +24,7 @@ const LondonSandwichPre = (props: LineStyleComponentProps<LondonSandwichAttribut
 
     return (
         <g id={`${id}.pre`} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke={color[2]} strokeWidth="5" />
+            <path d={path} fill="none" stroke={color[2]} strokeWidth={LINE_WIDTH} />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/london-tube-10-min-walk.tsx b/src/components/svgs/lines/styles/london-tube-10-min-walk.tsx
index a95a2bdb6..21cc405ff 100644
--- a/src/components/svgs/lines/styles/london-tube-10-min-walk.tsx
+++ b/src/components/svgs/lines/styles/london-tube-10-min-walk.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const LondonTube10MinWalk = (props: LineStyleComponentProps<LondonTube10MinWalkAttributes>) => {
     const { id, path, handlePointerDown } = props;
@@ -14,8 +20,8 @@ const LondonTube10MinWalk = (props: LineStyleComponentProps<LondonTube10MinWalkA
             d={path}
             fill="none"
             stroke="black"
-            strokeWidth="5"
-            strokeDasharray="5 2.5"
+            strokeWidth={LINE_WIDTH}
+            strokeDasharray={`${LINE_WIDTH} ${LINE_WIDTH / 2}`}
             cursor="pointer"
             onPointerDown={onPointerDown}
         />
diff --git a/src/components/svgs/lines/styles/london-tube-internal-int.tsx b/src/components/svgs/lines/styles/london-tube-internal-int.tsx
index 1ff576adb..2f67da240 100644
--- a/src/components/svgs/lines/styles/london-tube-internal-int.tsx
+++ b/src/components/svgs/lines/styles/london-tube-internal-int.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const LondonTubeInternalIntPre = (props: LineStyleComponentProps<LondonTubeInternalIntAttributes>) => {
     const { id, path, handlePointerDown } = props;
@@ -26,7 +32,7 @@ const LondonTubeInternalInt = (props: LineStyleComponentProps<LondonTubeInternal
 
     return (
         <g id={id} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
+            <path d={path} fill="none" stroke="white" strokeWidth={LINE_WIDTH / 2} strokeLinecap="round" />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/london-tube-terminal.tsx b/src/components/svgs/lines/styles/london-tube-terminal.tsx
index d8d27bb1a..9d90db40f 100644
--- a/src/components/svgs/lines/styles/london-tube-terminal.tsx
+++ b/src/components/svgs/lines/styles/london-tube-terminal.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,7 +28,7 @@ const LondonTubeTerminal = (props: LineStyleComponentProps<LondonTubeTerminalAtt
             d={path}
             fill="none"
             stroke={color[2]}
-            strokeWidth="5"
+            strokeWidth={LINE_WIDTH}
             cursor="pointer"
             onPointerDown={onPointerDown}
         />
diff --git a/src/components/svgs/lines/styles/mrt-sentosa-express.tsx b/src/components/svgs/lines/styles/mrt-sentosa-express.tsx
index 8505b14fc..a23183c73 100644
--- a/src/components/svgs/lines/styles/mrt-sentosa-express.tsx
+++ b/src/components/svgs/lines/styles/mrt-sentosa-express.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { AttrsProps } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const MRTSentosaExpress = (props: LineStyleComponentProps<MRTSentosaExpressAttributes>) => {
     const { id, path, handlePointerDown } = props;
@@ -16,8 +22,8 @@ const MRTSentosaExpress = (props: LineStyleComponentProps<MRTSentosaExpressAttri
             d={path}
             fill="none"
             stroke="black"
-            strokeWidth="5"
-            strokeDasharray="0 10 10 10"
+            strokeWidth={LINE_WIDTH}
+            strokeDasharray={`0 ${LINE_WIDTH * 2} ${LINE_WIDTH * 2} ${LINE_WIDTH * 2}`}
             strokeLinecap="round"
             cursor="pointer"
             onPointerDown={onPointerDown}
diff --git a/src/components/svgs/lines/styles/mrt-tape-out.tsx b/src/components/svgs/lines/styles/mrt-tape-out.tsx
index 5c0c908f9..4862d637d 100644
--- a/src/components/svgs/lines/styles/mrt-tape-out.tsx
+++ b/src/components/svgs/lines/styles/mrt-tape-out.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { MdOutlineSwapVert } from 'react-icons/md';
 import { AttrsProps, CityCode, Theme } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -41,39 +42,45 @@ const MRTTapeOut = (props: LineStyleComponentProps<MRTTapeOutAttributes>) => {
             <defs>
                 <marker
                     id={`slantSeparator45${colorB[2]}A`}
-                    markerWidth="5"
-                    markerHeight="5"
-                    refX="2.5"
-                    refY="2.5"
+                    markerWidth={LINE_WIDTH}
+                    markerHeight={LINE_WIDTH}
+                    refX={LINE_WIDTH / 2}
+                    refY={LINE_WIDTH / 2}
                     orient="auto-start-reverse"
                     markerUnits="userSpaceOnUse"
                 >
-                    <polygon points="0,5 2.5,5 2.5,2.5" fill={colorB[2]} />
+                    <polygon
+                        points={`0,${LINE_WIDTH} ${LINE_WIDTH / 2},${LINE_WIDTH} ${LINE_WIDTH / 2},${LINE_WIDTH / 2}`}
+                        fill={colorB[2]}
+                    />
                 </marker>
                 <marker
                     id={`slantSeparator45${colorA[2]}B`}
-                    markerWidth="5"
-                    markerHeight="5"
-                    refX="2.5"
-                    refY="2.5"
+                    markerWidth={LINE_WIDTH}
+                    markerHeight={LINE_WIDTH}
+                    refX={LINE_WIDTH / 2}
+                    refY={LINE_WIDTH / 2}
                     orient="auto-start-reverse"
                     markerUnits="userSpaceOnUse"
                 >
-                    <polygon points="0,5 2.5,5 2.5,2.5" fill={colorA[2]} />
+                    <polygon
+                        points={`0,${LINE_WIDTH} ${LINE_WIDTH / 2},${LINE_WIDTH} ${LINE_WIDTH / 2},${LINE_WIDTH / 2}`}
+                        fill={colorA[2]}
+                    />
                 </marker>
             </defs>
             <path
                 d={pathA}
                 fill="none"
                 stroke={colorA[2]}
-                strokeWidth="5"
+                strokeWidth={LINE_WIDTH}
                 marker-end={`url(#slantSeparator45${colorB[2]}A)`}
             />
             <path
                 d={pathB}
                 fill="none"
                 stroke={colorB[2]}
-                strokeWidth="5"
+                strokeWidth={LINE_WIDTH}
                 marker-start={`url(#slantSeparator45${colorA[2]}B)`}
             />
         </g>
diff --git a/src/components/svgs/lines/styles/mrt-under-construction.tsx b/src/components/svgs/lines/styles/mrt-under-construction.tsx
index 8ee119ed8..7146b2c5a 100644
--- a/src/components/svgs/lines/styles/mrt-under-construction.tsx
+++ b/src/components/svgs/lines/styles/mrt-under-construction.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,7 +28,7 @@ const MRTUnderConstruction = (props: LineStyleComponentProps<MRTUnderConstructio
             d={path}
             fill="none"
             stroke={color[2]}
-            strokeWidth="5"
+            strokeWidth={LINE_WIDTH}
             strokeDasharray="0 10"
             strokeLinecap="round"
             cursor="pointer"
diff --git a/src/components/svgs/lines/styles/mtr-light-rail.tsx b/src/components/svgs/lines/styles/mtr-light-rail.tsx
index 43d28e368..616223213 100644
--- a/src/components/svgs/lines/styles/mtr-light-rail.tsx
+++ b/src/components/svgs/lines/styles/mtr-light-rail.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,7 +28,7 @@ const MTRLightRail = (props: LineStyleComponentProps<MTRLightRailAttributes>) =>
             d={path}
             fill="none"
             stroke={color[2]}
-            strokeWidth="2.5"
+            strokeWidth={LINE_WIDTH / 2}
             strokeLinecap="round"
             cursor="pointer"
             onPointerDown={onPointerDown}
diff --git a/src/components/svgs/lines/styles/mtr-race-day.tsx b/src/components/svgs/lines/styles/mtr-race-day.tsx
index e5f9a6666..7afc20247 100644
--- a/src/components/svgs/lines/styles/mtr-race-day.tsx
+++ b/src/components/svgs/lines/styles/mtr-race-day.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,9 +28,9 @@ const MTRRaceDays = (props: LineStyleComponentProps<MTRRaceDaysAttributes>) => {
             d={path}
             fill="none"
             stroke={color[2]}
-            strokeWidth="5"
+            strokeWidth={LINE_WIDTH}
             strokeLinecap="butt"
-            strokeDasharray="5 2.5"
+            strokeDasharray={`${LINE_WIDTH} ${LINE_WIDTH / 2}`}
             cursor="pointer"
             onPointerDown={onPointerDown}
         />
diff --git a/src/components/svgs/lines/styles/shanghai-suburban-railway.tsx b/src/components/svgs/lines/styles/shanghai-suburban-railway.tsx
index 652bf9d64..c37f68afa 100644
--- a/src/components/svgs/lines/styles/shanghai-suburban-railway.tsx
+++ b/src/components/svgs/lines/styles/shanghai-suburban-railway.tsx
@@ -2,7 +2,13 @@ import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps } from '../../../../constants/constants';
-import { LinePathAttributes, LinePathType, LineStyle, LineStyleComponentProps } from '../../../../constants/lines';
+import {
+    LINE_WIDTH,
+    LinePathAttributes,
+    LinePathType,
+    LineStyle,
+    LineStyleComponentProps,
+} from '../../../../constants/lines';
 
 const ShanghaiSuburbanRailwayPre = (props: LineStyleComponentProps<ShanghaiSuburbanRailwayAttributes>) => {
     const { id, path, styleAttrs, handlePointerDown } = props;
@@ -17,7 +23,7 @@ const ShanghaiSuburbanRailwayPre = (props: LineStyleComponentProps<ShanghaiSubur
 
     return (
         <g id={`${id}.pre`} onPointerDown={onPointerDown} cursor="pointer">
-            <path d={path} fill="none" stroke="#898989" strokeWidth="5" strokeLinecap={outStrokeLinecap} />
+            <path d={path} fill="none" stroke="#898989" strokeWidth={LINE_WIDTH} strokeLinecap={outStrokeLinecap} />
         </g>
     );
 };
diff --git a/src/components/svgs/lines/styles/single-color.tsx b/src/components/svgs/lines/styles/single-color.tsx
index 401cf2f45..5a0e4ea75 100644
--- a/src/components/svgs/lines/styles/single-color.tsx
+++ b/src/components/svgs/lines/styles/single-color.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
+    LINE_WIDTH,
     LinePathAttributes,
     LinePathType,
     LineStyle,
@@ -27,7 +28,7 @@ const SingleColor = (props: LineStyleComponentProps<SingleColorAttributes>) => {
             d={path}
             fill="none"
             stroke={color[2]}
-            strokeWidth="5"
+            strokeWidth={LINE_WIDTH}
             strokeLinecap="round"
             cursor="pointer"
             onPointerDown={newLine ? undefined : onPointerDown}
diff --git a/src/constants/lines.ts b/src/constants/lines.ts
index 6f7a44ee5..5f292b27e 100644
--- a/src/constants/lines.ts
+++ b/src/constants/lines.ts
@@ -124,6 +124,8 @@ export interface ExternalLineStyleAttributes {
 
 /* ----- Below are core types for all lines, DO NOT TOUCH. ----- */
 
+export const LINE_WIDTH = 5;
+
 export type Path = `M${string}`;
 
 export interface LineWrapperComponentProps {