diff --git a/src/utils/const.ts b/src/utils/const.ts
index 2296406176f..9852ac9b1d6 100644
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -129,3 +129,10 @@ export const NEED_FIX_MAP = false;
 export const MAIN_COLOR = nike;
 export const PROVINCE_FILL_COLOR = '#47b8e0';
 export const COUNTRY_FILL_COLOR = dark_vanilla;
+
+export const RUN_COLOR = MAIN_COLOR;
+export const RUN_TRAIL_COLOR = 'rgb(255,153,51)';
+export const CYCLING_COLOR = 'rgb(51,255,87)';
+export const HIKING_COLOR = 'rgb(151,51,255)';
+export const WALKING_COLOR = HIKING_COLOR;
+export const SWIMMING_COLOR = 'rgb(255,51,51)';
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ea3818b480d..d2e09962b93 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -4,7 +4,7 @@ import { WebMercatorViewport } from 'viewport-mercator-project';
 import { chinaGeojson, RPGeometry } from '@/static/run_countries';
 import worldGeoJson from '@surbowl/world-geo-json-zh/world.zh.json';
 import { chinaCities } from '@/static/city';
-import { MAIN_COLOR, MUNICIPALITY_CITIES_ARR, NEED_FIX_MAP, RUN_TITLES, ACTIVITY_TYPES, RICH_TITLE } from './const';
+import { MAIN_COLOR, MUNICIPALITY_CITIES_ARR, NEED_FIX_MAP, RUN_TITLES, ACTIVITY_TYPES, RICH_TITLE, CYCLING_COLOR, HIKING_COLOR, WALKING_COLOR, SWIMMING_COLOR, RUN_COLOR, RUN_TRAIL_COLOR } from './const';
 import { FeatureCollection, LineString } from 'geojson';
 
 export type Coordinate = [number, number];
@@ -210,15 +210,38 @@ const pathForRun = (run: Activity): Coordinate[] => {
   }
 };
 
+const colorForRun = (run: Activity): string => {
+  switch (run.type) {
+    case 'Run':{
+      if (run.subtype === 'trail') {
+        return RUN_TRAIL_COLOR;
+      } else if (run.subtype === 'generic') {
+        return RUN_COLOR;
+      }
+      return RUN_COLOR;
+    }
+    case 'cycling':
+      return CYCLING_COLOR;
+    case 'hiking':
+      return HIKING_COLOR;
+    case 'walking':
+      return WALKING_COLOR;
+    case 'swimming':
+      return SWIMMING_COLOR;
+    default:
+      return MAIN_COLOR;
+  }
+}
+
 const geoJsonForRuns = (runs: Activity[]): FeatureCollection<LineString> => ({
   type: 'FeatureCollection',
   features: runs.map((run) => {
     const points = pathForRun(run);
-
+    const color = colorForRun(run);
     return {
       type: 'Feature',
       properties: {
-        color: MAIN_COLOR,
+        color: color,
       },
       geometry: {
         type: 'LineString',