diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e9936d85..36f7df283 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -210,31 +210,31 @@
     :root {
         /** Neutral **/
 
-        --color-neutral-0-new:   0    0% 100%;   /* #ffffff */
-        --color-neutral-5-new:   240 11%  98%;   /* #FAFAFB */
-        --color-neutral-10-new:  240  9%  94%;   /* #EDEDF0 */
-        --color-neutral-15-new:  240  4%  85%;   /* #D8D8DB */
-        --color-neutral-20-new:  240  3%  77%;   /* #C3C3C6 */
-        
-        --color-neutral-50-new:  240  2%  52%;   /* #818186 */
-        --color-neutral-60-new:  240  2%  43%;   /* #6C6C71 */
-        --color-neutral-70-new:  240  3%  35%;   /* #56565C */
-        
-        --color-neutral-80-new:  240  4%  27%;   /* #414146 */
-        --color-neutral-85-new:  240  4%  18%;   /* #2D2D31 */
-        --color-neutral-90-new:  240  7%  12%;   /* #1D1D21 */
-        --color-neutral-100-new: 240  6%  10%;   /* #19191C */
+        --color-neutral-0-new: 0 0% 100%; /* #ffffff */
+        --color-neutral-5-new: 240 11% 98%; /* #FAFAFB */
+        --color-neutral-10-new: 240 9% 94%; /* #EDEDF0 */
+        --color-neutral-15-new: 240 4% 85%; /* #D8D8DB */
+        --color-neutral-20-new: 240 3% 77%; /* #C3C3C6 */
 
-        --color-neutral-0:   var(--color-neutral-0-new);
-        --color-neutral-5:   var(--color-neutral-5-new);
-        --color-neutral-10:  var(--color-neutral-10-new);
-        --color-neutral-30:  var(--color-neutral-15-new);
-        --color-neutral-50:  var(--color-neutral-20-new);
-        
-        --color-neutral-70:  var(--color-neutral-50-new);
+        --color-neutral-50-new: 240 2% 52%; /* #818186 */
+        --color-neutral-60-new: 240 2% 43%; /* #6C6C71 */
+        --color-neutral-70-new: 240 3% 35%; /* #56565C */
+
+        --color-neutral-80-new: 240 4% 27%; /* #414146 */
+        --color-neutral-85-new: 240 4% 18%; /* #2D2D31 */
+        --color-neutral-90-new: 240 7% 12%; /* #1D1D21 */
+        --color-neutral-100-new: 240 6% 10%; /* #19191C */
+
+        --color-neutral-0: var(--color-neutral-0-new);
+        --color-neutral-5: var(--color-neutral-5-new);
+        --color-neutral-10: var(--color-neutral-10-new);
+        --color-neutral-30: var(--color-neutral-15-new);
+        --color-neutral-50: var(--color-neutral-20-new);
+
+        --color-neutral-70: var(--color-neutral-50-new);
         --color-neutral-100: var(--color-neutral-60-new);
         --color-neutral-120: var(--color-neutral-70-new);
-        
+
         --color-neutral-150: var(--color-neutral-80-new);
         --color-neutral-200: var(--color-neutral-85-new);
         --color-neutral-300: var(--color-neutral-90-new);
@@ -246,11 +246,11 @@
         // --color-neutral-10:  240  9%  94%;   /* #EDEDF0 */
         // --color-neutral-15:  240  4%  85%;   /* #D8D8DB */
         // --color-neutral-20:  240  3%  77%;   /* #C3C3C6 */
-        
+
         // --color-neutral-50:  240  2%  52%;   /* #818186 */
         // --color-neutral-60:  240  2%  43%;   /* #6C6C71 */
         // --color-neutral-70:  240  3%  35%;   /* #56565C */
-        
+
         // --color-neutral-80:  240  4%  27%;   /* #414146 */
         // --color-neutral-85:  240  4%  18%;   /* #2D2D31 */
         // --color-neutral-90:  240  7%  12%;   /* #1D1D21 */
diff --git a/src/routes/console/project-[project]/overview/intro-dark.png b/src/routes/console/project-[project]/overview/intro-dark.png
new file mode 100644
index 000000000..4e5bd12ac
Binary files /dev/null and b/src/routes/console/project-[project]/overview/intro-dark.png differ
diff --git a/src/routes/console/project-[project]/overview/intro-dark.svg b/src/routes/console/project-[project]/overview/intro-dark.svg
deleted file mode 100644
index 30629f75e..000000000
--- a/src/routes/console/project-[project]/overview/intro-dark.svg
+++ /dev/null
@@ -1,264 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 424.4 191.1" style="enable-background:new 0 0 424.4 191.1;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-	.st1{fill:url(#SVGID_00000142885517343536665010000014201853629063367808_);}
-	.st2{fill:#1F202E;fill-opacity:0.25;}
-	.st3{fill:url(#SVGID_00000015321750630219403960000008935308037696241071_);}
-	.st4{fill:url(#SVGID_00000104699251513228500350000001254837238495643043_);}
-	.st5{fill:#14141F;fill-opacity:0.24;}
-	.st6{fill:#20202F;fill-opacity:0.26;}
-	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#14141F;fill-opacity:0.26;}
-	.st8{opacity:0.8;}
-	.st9{fill:#C00D53;}
-	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000069381323521629319590000011098246531548226487_);}
-	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000074413441820536526900000012778315149397095304_);}
-	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#252736;}
-	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000121278480221221543010000005768761693135342004_);}
-	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#6B7284;}
-	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#6A7183;}
-	.st16{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000091728598835065986980000000329787063612547752_);}
-	.st17{fill:#232634;}
-	.st18{fill:url(#SVGID_00000178179481832286420410000003347931513612733588_);}
-	.st19{fill:url(#SVGID_00000066511038083839903610000009096097230288899261_);}
-	.st20{fill:url(#SVGID_00000030475345589648125490000010305871866420153517_);}
-	.st21{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000069364483919980655510000000374149805581267596_);}
-	.st22{fill:#FFFFFF;}
-	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000098188206123596186020000014780826931092904332_);}
-	.st24{fill:#72798A;}
-	.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#737A8B;}
-	.st26{fill:#212331;}
-	.st27{fill:#A3A8BD;fill-opacity:0.44;}
-	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000147909540178171813720000014468453641682545306_);}
-	.st29{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000000190969851564865220000012329315323325246606_);}
-	.st30{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000159463521060491178850000003744963206558716816_);}
-	.st31{fill:url(#SVGID_00000029022640935143671830000001107380081357136546_);}
-	.st32{fill:url(#SVGID_00000011743617506039840450000005445008086251978155_);}
-	.st33{fill:url(#SVGID_00000176738020288317272010000007311834162452667796_);}
-	.st34{fill:url(#SVGID_00000109714025646878893640000006129900393855983010_);}
-	.st35{fill:url(#SVGID_00000080923722808042938030000012569415380901445778_);}
-	.st36{fill:url(#SVGID_00000101061571767078578760000005053774929722226056_);}
-	.st37{fill:#252736;}
-	.st38{fill:url(#SVGID_00000071560665801589357040000014811445969369430713_);}
-	.st39{fill:#878E9F;}
-	.st40{fill:#C4295C;}
-	.st41{fill:#A2144F;}
-	.st42{fill:#616B7C;}
-</style>
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="244.831" y1="141.2354" x2="139.063" y2="-67.7646" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#4F5769"/>
-	<stop  offset="1" style="stop-color:#282A3B"/>
-</linearGradient>
-<path class="st0" d="M5.9,133.3L101.8,14l106.4,0l89.6,79.7l110.8,5.4l-72.3,92h-149l-80-56.7L5.9,133.3z"/>
-<linearGradient id="SVGID_00000158736875229733007750000014631219022261061290_" gradientUnits="userSpaceOnUse" x1="449.6474" y1="343.8356" x2="157.4224" y2="17.1056" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#373B4D"/>
-	<stop  offset="1" style="stop-color:#35394C"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000158736875229733007750000014631219022261061290_);" d="M112.8,132.8l95.7-119.2l86.3,77.1
-	l-74.5,100.4h-12.3h-20L112.8,132.8z"/>
-<path class="st2" d="M137.2,36.4c-11.2-8.9-41.9-0.6-56.7,4.7l21.5-27.5h105.2l31.5,27.5c-9.3,2.1-21.6,11.3-46.1,15.8
-	C170.5,60.9,151.2,47.5,137.2,36.4z"/>
-<g>
-	
-		<linearGradient id="SVGID_00000142872493212902564800000004993749228445041855_" gradientUnits="userSpaceOnUse" x1="-24.6018" y1="196.3491" x2="-24.6018" y2="148.1309" gradientTransform="matrix(0.9774 0.2273 0.1613 -0.9948 228.3344 235.4618)">
-		<stop  offset="0" style="stop-color:#252736"/>
-		<stop  offset="1" style="stop-color:#212432"/>
-	</linearGradient>
-	<path style="fill:url(#SVGID_00000142872493212902564800000004993749228445041855_);" d="M239.9,10.6c9.9,2.3,16.2,14.9,14.1,28.2
-		S242,60.8,232.1,58.5S215.9,43.6,218,30.4C220.2,17.1,229.9,8.3,239.9,10.6z"/>
-</g>
-<linearGradient id="SVGID_00000124131868460139146580000010721796754471463861_" gradientUnits="userSpaceOnUse" x1="-22.9408" y1="189.9565" x2="-9.5556" y2="138.443" gradientTransform="matrix(0.9774 0.2273 0.1613 -0.9948 230.6934 234.912)">
-	<stop  offset="0" style="stop-color:#464C5B"/>
-	<stop  offset="1" style="stop-color:#3E4453"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000124131868460139146580000010721796754471463861_);" d="M242.2,10c8.9,2.1,14.4,14.5,12.2,27.7
-	c-2.1,13.2-11.1,22.3-20,20.2c-8.9-2.1-14.4-14.5-12.2-27.7S233.3,7.9,242.2,10z"/>
-<g>
-	<path shape-rendering="crispEdges" class="st5" d="M28.9,105.1c0,0-13.9,17.4-22.1,28.5l102.2,1.2l79.3,56.9
-		c-67.3-53.5-56.1-74.9-74.7-83.6c-18.6-8.7-30.8,10.5-51.7,0C51.9,103,51.5,77.8,28.9,105.1z"/>
-</g>
-<path class="st6" d="M333.6,121.4c-5.1-10.3,2.1-21.5,6.4-25.8l68.9,3.5l-45.7,60.5c0.2-3.1-0.1-10.9-2.9-17
-	C356.7,134.9,340,134.3,333.6,121.4z"/>
-<path class="st7" d="M113.8,83.6c0,0,2.3-1.5,2.3-1.5l1.2-8.5c0.4,0.1,1,0.3,1.6,0.5c6.8,2,13.9,4.9,18.4,10.4l0,0
-	c3.8,4.7,6.4,9.5,8.5,13.9c0.5,1.1,1,2.1,1.5,3.1c1.5,3.2,2.8,5.9,4.5,8.5c2,3.2,4.2,6.9,7.4,8.8c3.2,1.9,7.7,3.6,14.5,4.2
-	c15.5,1.5,24.9-7.6,36.4-17.6l0.3-0.3c11.1-9.7,24.4-21.2,45.9-18.8c14.5,1.6,24,7.4,30.3,15.1c6.1,7.4,8.8,16,10.6,22.2
-	c0.7,2.6,1.4,5.9,2,9c0.2,0.9,0.3,1.8,0.5,2.7c0.8,4.2,1.8,8.3,3.2,12.2c2.8,7.6,7.1,13.6,15.5,16c15.8,4.6,55.2-23,61.5-25.7
-	l-11,13.8c-5.8,7-34.5,29.9-54,24.2c-13.7-4-20.4-14.1-24-23.9c-1.8-4.9-2.9-9.8-3.7-14.1c-0.2-1.2-0.4-2.2-0.6-3.3
-	c-0.6-3-1-5.4-1.6-7.4c-1.7-6-3.8-13.5-8.1-18.7c-4.1-4.9-10.5-9.3-21.9-10.5c-15.5-1.7-24.9,7.3-36.4,17.2
-	c-0.2,0.2-0.4,0.3-0.6,0.5c-11,9.6-24.2,21-45.4,19c-8.3-0.8-14.7-2.8-19.9-6c-5.2-3.2-8.8-7.4-11.5-11.7c-2.1-3.3-3.8-6.9-5.4-10.2
-	c-0.4-0.9-0.8-1.7-1.2-2.6c-2-4.1-4.1-7.9-6.9-11.4c-2.3-2.8-4.6-5.1-6.6-6.7c-1-0.8-1.9-1.4-2.5-1.8
-	C117.7,83.8,113.9,83.6,113.8,83.6z"/>
-<g class="st8">
-	<g>
-		<path class="st9" d="M113,82.4c0.9,1.2,3.9,2.3,4.2,2.2c0.2,0.1,0.8,0.1,1.5-0.6c0.9-0.9,12-19.8,16.4-29.2
-			c4.4-9.3,3.8-13.4,3.2-18.7c-0.6-5.2-6.2-12-10.6-13.1c-4.4-1.2,6.2,16.1-4.1,24.3c-10.3,8.2-25-1.5-24.1,3.7
-			C100.5,56.3,111.8,80.9,113,82.4z"/>
-	</g>
-	
-		<linearGradient id="SVGID_00000095319538511799997670000010828145058603694266_" gradientUnits="userSpaceOnUse" x1="192.7159" y1="53.6944" x2="91.9038" y2="160.3544" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-		<stop  offset="0" style="stop-color:#DA1A5B"/>
-		<stop  offset="1" style="stop-color:#F02E65"/>
-	</linearGradient>
-	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000095319538511799997670000010828145058603694266_);" d="
-		M113.7,82.8c-0.3,0.1-1.1,0-2.1-1.2c-1.2-1.5-14.7-27.1-15.6-32.4c-0.9-5.2-2.6-15.4,6.8-24.6c7-6.9,17-4.6,21.4-3.4
-		c4.4,1.2,10,7.9,10.6,13.1c0,0.1,0,0.2,0,0.4c0.6,5.1,1,9.2-3.3,18.3c-4.4,9.3-15.6,28.3-16.4,29.2
-		C114.4,82.9,113.9,82.9,113.7,82.8z M113.9,50.9c5.4,0,9.8-5,9.8-11.1s-4.4-11.1-9.8-11.1c-5.4,0-9.8,5-9.8,11.1
-		S108.5,50.9,113.9,50.9z"/>
-	<path class="st9" d="M105,44.6c1.9,5.3,6.2,6.2,8.9,6.2c-4-3.1-5.1-5.4-5.8-7.5c-0.6-1.8-0.9-3.6,0-8c0.4-2.2,3-6.1,4.4-6.7
-		c-1.3,0.1-4.9,1.2-6.7,4C103.7,36.2,103.3,39.8,105,44.6z"/>
-</g>
-<linearGradient id="SVGID_00000013190673004317531570000009135951069778102698_" gradientUnits="userSpaceOnUse" x1="238.8301" y1="144.0437" x2="232.3811" y2="139.5186" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#242735"/>
-	<stop  offset="1" style="stop-color:#252736"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000013190673004317531570000009135951069778102698_);" d="
-	M232.9,44.4l-1.1-10.3l3.2-0.4l4.6,14.8l-2.9,1.3L232.9,44.4z"/>
-<path class="st12" d="M231.8,34.1l2.8-1.3l2.9,0.7l6.6,4.1l-2.8,1.3l-8.9,0.9L231.8,34.1z"/>
-<linearGradient id="SVGID_00000155133873949132804050000008545361950813754251_" gradientUnits="userSpaceOnUse" x1="242.106" y1="158.2374" x2="232.154" y2="151.2538" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#222534"/>
-	<stop  offset="1" style="stop-color:#252736"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000155133873949132804050000008545361950813754251_);" d="
-	M230.9,25.2l0.6,5.8l13.9-1.4l2.8-1.3l-6.6-4.2l-7.8-0.3L230.9,25.2z"/>
-<path class="st14" d="M235.8,43.1l-1.1-10.3l3.2-0.4l1.7,16.1L235.8,43.1z"/>
-<path class="st15" d="M234.6,32.8l5.7-0.6l3.8,5.4l-8.9,0.9L234.6,32.8z"/>
-<linearGradient id="SVGID_00000165214235479653008570000014422174056093356472_" gradientUnits="userSpaceOnUse" x1="244.8016" y1="159.7769" x2="234.8506" y2="152.7933" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#6D7486"/>
-	<stop  offset="1" style="stop-color:#61697B"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000165214235479653008570000014422174056093356472_);" d="
-	M233.7,23.9l0.6,5.8l13.9-1.4l-3.8-5.5L233.7,23.9z"/>
-<g>
-	<ellipse class="st17" cx="43.3" cy="77.6" rx="19.5" ry="22"/>
-</g>
-<linearGradient id="SVGID_00000081635111000780607750000016427041494248675217_" gradientUnits="userSpaceOnUse" x1="71.587" y1="138.3428" x2="28.5871" y2="95.3428" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#535A6A"/>
-	<stop  offset="1" style="stop-color:#353947"/>
-</linearGradient>
-<ellipse style="fill:url(#SVGID_00000081635111000780607750000016427041494248675217_);" cx="39.3" cy="77.1" rx="19.5" ry="21.5"/>
-<linearGradient id="SVGID_00000144319357159291417670000015825048474101387414_" gradientUnits="userSpaceOnUse" x1="226.7439" y1="48.1652" x2="242.0419" y2="7.0902" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#252736"/>
-	<stop  offset="1" style="stop-color:#202230"/>
-</linearGradient>
-<ellipse style="fill:url(#SVGID_00000144319357159291417670000015825048474101387414_);" cx="235.3" cy="158.1" rx="18.5" ry="20.5"/>
-<g>
-	
-		<linearGradient id="SVGID_00000099641561758305425560000006258368169424830379_" gradientUnits="userSpaceOnUse" x1="226.1708" y1="50.9241" x2="265.9688" y2="-33.5749" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-		<stop  offset="0" style="stop-color:#555C6D"/>
-		<stop  offset="1" style="stop-color:#343947"/>
-	</linearGradient>
-	
-		<ellipse style="fill:url(#SVGID_00000099641561758305425560000006258368169424830379_);" cx="238.3" cy="158.1" rx="17.5" ry="20.5"/>
-</g>
-<linearGradient id="SVGID_00000134942220632718391400000012995103895491178902_" gradientUnits="userSpaceOnUse" x1="244.0473" y1="22.5866" x2="228.2992" y2="24.5776" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#2F3342"/>
-	<stop  offset="1" style="stop-color:#252736"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000134942220632718391400000012995103895491178902_);" d="
-	M239.6,164.3l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1l-0.1,0c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
-	c0,0,0-0.1,0-0.1l10.4-2.7c0,0,0,0.1,0,0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9l-0.1,0l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5
-	c-0.6,0.2-1.2-0.2-1.3-0.9L239.6,164.3z M231.4,158.6c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2
-	c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L231.4,158.6z M245.4,154.9c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5
-	l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L245.4,154.9z M235.8,150.1c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7
-	c-0.3-2.4-2.5-3.9-5.1-3.5L235.8,150.1z"/>
-<path class="st22" d="M234.2,152.8c0,0.3-0.2,0.7-0.5,0.8s-0.6-0.1-0.7-0.5l0,0c0-0.3,0.2-0.7,0.5-0.8
-	C233.8,152.3,234.1,152.5,234.2,152.8L234.2,152.8z M238.6,151.7c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5v0
-	c0-0.3,0.2-0.7,0.5-0.8C238.3,151.1,238.6,151.4,238.6,151.7L238.6,151.7z"/>
-<linearGradient id="SVGID_00000134940010252349478240000002397122030648918431_" gradientUnits="userSpaceOnUse" x1="230.3355" y1="31.5806" x2="244.6265" y2="17.3906" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#878E9F"/>
-	<stop  offset="1" style="stop-color:#61687A"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000134940010252349478240000002397122030648918431_);" d="
-	M239.4,163.2l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1l-0.1,0c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
-	c0,0,0-0.1,0-0.1l10.4-2.7c0,0,0,0.1,0,0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9l-0.1,0l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5
-	c-0.6,0.2-1.2-0.2-1.3-0.9L239.4,163.2z M231.1,157.5c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2
-	c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L231.1,157.5z M245.2,153.8c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5
-	l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L245.2,153.8z M235.6,149c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7
-	c-0.3-2.4-2.6-3.9-5.1-3.5L235.6,149z"/>
-<path class="st24" d="M231.4,149.9l1.5,1.9L231.4,149.9z M240.9,147.4l-0.9,2.5L240.9,147.4z"/>
-<path class="st25" d="M231.1,149.5c0.2-0.2,0.6-0.2,0.7,0l1.5,1.9c0.1,0.2,0.1,0.5-0.2,0.6s-0.6,0.2-0.7,0l-1.5-1.9
-	C230.8,150,230.9,149.7,231.1,149.5z M241,146.9c0.3,0,0.4,0.3,0.3,0.5l-0.9,2.5c-0.1,0.2-0.4,0.4-0.7,0.4c-0.3,0-0.4-0.3-0.3-0.5
-	l0.9-2.5C240.5,147.1,240.8,146.9,241,146.9z"/>
-<path class="st26" d="M234.9,151.8c0,0.3-0.2,0.7-0.5,0.8s-0.6-0.1-0.7-0.5v0c0-0.3,0.2-0.7,0.5-0.8
-	C234.6,151.2,234.9,151.4,234.9,151.8L234.9,151.8z M239.3,150.6c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5l0,0
-	c0-0.3,0.2-0.7,0.5-0.8C239,150.1,239.3,150.3,239.3,150.6L239.3,150.6z"/>
-<g>
-	<path class="st27" d="M33.2,71.1l2.6,0.5l-3.1,3.5l3.1,4.8l-2.5-0.5l-3.1-4.7L33.2,71.1z"/>
-</g>
-<g>
-	<path class="st27" d="M47.9,74l-2.6-0.5l3.1,4.7l-3.1,3.6l2.5,0.5l3.1-3.5L47.9,74z"/>
-</g>
-<g>
-	<path class="st27" d="M41.7,65.8l1.9,0.4l-3.8,20.5l-1.9-0.4L41.7,65.8z"/>
-</g>
-<linearGradient id="SVGID_00000005956640909351551830000012926937636429069237_" gradientUnits="userSpaceOnUse" x1="34.8775" y1="120.8174" x2="28.9219" y2="87.5084" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#2E3141"/>
-	<stop  offset="1" style="stop-color:#282A3B"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000005956640909351551830000012926937636429069237_);" d="
-	M34.9,72l-2.6-0.5l-3,3.6l3.1,4.7l0.7,0.1l-2,0.2l2.4,0.5l1.4-0.3l0,0l0,0l0,0l0,0l-3.1-4.8L34.9,72z"/>
-<linearGradient id="SVGID_00000023266905135775645910000004109233400584778915_" gradientUnits="userSpaceOnUse" x1="49.8204" y1="109.523" x2="38.5096" y2="97.0479" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#353A48"/>
-	<stop  offset="1" style="stop-color:#232634"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000023266905135775645910000004109233400584778915_);" d="
-	M44.4,73.8l2.6,0.5l3,4.8l-3.1,3.5l-2.5-0.5l3.1-3.6L44.4,73.8z M43.1,82.5l2.5,0.5l1.3-0.3l-1-0.2L43.1,82.5z"/>
-<linearGradient id="SVGID_00000093177584693944561140000000539913441972535681_" gradientUnits="userSpaceOnUse" x1="44.4648" y1="115.4688" x2="27.977" y2="83.8658" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#2B2E3F"/>
-	<stop  offset="1" style="stop-color:#282A3B"/>
-</linearGradient>
-<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000093177584693944561140000000539913441972535681_);" d="
-	M42.7,66.6l-1.9-0.4L37,86.7l1.9,0.4L42.7,66.6z M35.6,87l2-0.2l1.2,0.2l-1.2,0.3L35.6,87z"/>
-<linearGradient id="SVGID_00000105418779091039622690000013356290385376551095_" gradientUnits="userSpaceOnUse" x1="31.3573" y1="107.3014" x2="27.4778" y2="108.8817" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#686F82"/>
-	<stop  offset="1" style="stop-color:#5C6476"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000105418779091039622690000013356290385376551095_);" d="M31,71.8l2.6,0.5l-3.1,3.5l3.1,4.8
-	l-2.5-0.5L28,75.5L31,71.8z"/>
-<linearGradient id="SVGID_00000029764923180034765200000006898552117800737972_" gradientUnits="userSpaceOnUse" x1="46.3486" y1="101.283" x2="44.4889" y2="104.8996" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#5C6476"/>
-	<stop  offset="1" style="stop-color:#7B8295"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000029764923180034765200000006898552117800737972_);" d="M45.7,74.7l-2.6-0.5l3.1,4.7l-3.1,3.6
-	l2.5,0.5l3.1-3.5L45.7,74.7z"/>
-<linearGradient id="SVGID_00000167396542097071636550000008197070836259756179_" gradientUnits="userSpaceOnUse" x1="49.1157" y1="106.0228" x2="29.5259" y2="106.3822" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0.2302" style="stop-color:#7B8195"/>
-	<stop  offset="1" style="stop-color:#4F5769"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000167396542097071636550000008197070836259756179_);" d="M39.4,66.5l1.9,0.4l-3.8,20.5L35.6,87
-	L39.4,66.5z"/>
-<linearGradient id="SVGID_00000101067962669616497940000013994520637891310218_" gradientUnits="userSpaceOnUse" x1="31.9666" y1="112.4903" x2="34.6551" y2="109.1623" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#A3A8BD"/>
-	<stop  offset="1" style="stop-color:#282A3B"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000101067962669616497940000013994520637891310218_);" d="M32.3,71.5L31,71.8l2.6,0.5l1.3-0.3
-	L32.3,71.5z"/>
-<linearGradient id="SVGID_00000178166427605302853390000012720813208423930754_" gradientUnits="userSpaceOnUse" x1="38.82" y1="118.36" x2="42.514" y2="115.4948" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#A3A8BD"/>
-	<stop  offset="1" style="stop-color:#5A6274"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000178166427605302853390000012720813208423930754_);" d="M40.8,66.2l-1.3,0.3l1.9,0.4l1.3-0.3
-	L40.8,66.2z"/>
-<linearGradient id="SVGID_00000115487732379793972330000008250218682802136497_" gradientUnits="userSpaceOnUse" x1="41.1603" y1="111.9492" x2="47.2883" y2="107.2078" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
-	<stop  offset="0" style="stop-color:#A3A8BD"/>
-	<stop  offset="1" style="stop-color:#6D7487"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000115487732379793972330000008250218682802136497_);" d="M44.4,73.8l-1.3,0.3l2.6,0.5l1.3-0.3
-	L44.4,73.8z"/>
-<g>
-	
-		<ellipse transform="matrix(0.1771 -0.9842 0.9842 0.1771 195.9967 482.8482)" class="st37" cx="386.8" cy="124.2" rx="27.6" ry="29.7"/>
-</g>
-<linearGradient id="SVGID_00000072264236368894608570000004484140370334352012_" gradientUnits="userSpaceOnUse" x1="-68.8286" y1="231.0642" x2="-0.6727" y2="282.4253" gradientTransform="matrix(0.3485 -0.9373 -0.9454 -0.3258 639.7332 159.8793)">
-	<stop  offset="0" style="stop-color:#404756"/>
-	<stop  offset="1" style="stop-color:#6C7285"/>
-</linearGradient>
-<path style="fill:url(#SVGID_00000072264236368894608570000004484140370334352012_);" d="M360.1,109.7c5.3-14.3,22.2-21.6,37.7-16.3
-	s23.7,21.3,18.4,35.6c-5.3,14.3-22.2,21.6-37.7,16.3S354.8,124.1,360.1,109.7z"/>
-<path class="st39" d="M378.8,126.9l-7.5-23.8l23.8,7l8.8,26.4L378.8,126.9z"/>
-<path class="st40" d="M378.8,127.3l-8-24.7l24,7.5l-9.9,8.6L378.8,127.3z"/>
-<path class="st41" d="M378.8,127.3l-8-24.7l14.1,16.1L378.8,127.3z"/>
-<path class="st42" d="M378.8,127.3l25.2,9.3l-19.3-18.1L378.8,127.3z"/>
-</svg>
diff --git a/src/routes/console/project-[project]/overview/intro-light.png b/src/routes/console/project-[project]/overview/intro-light.png
new file mode 100644
index 000000000..35cd38043
Binary files /dev/null and b/src/routes/console/project-[project]/overview/intro-light.png differ
diff --git a/src/routes/console/project-[project]/overview/intro-light.svg b/src/routes/console/project-[project]/overview/intro-light.svg
deleted file mode 100644
index a69e4e954..000000000
--- a/src/routes/console/project-[project]/overview/intro-light.svg
+++ /dev/null
@@ -1,259 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 424.1 190.8" style="enable-background:new 0 0 424.1 190.8;" xml:space="preserve">
-<style type="text/css">
-	.st0{clip-path:url(#SVGID_00000021805632377186583740000011731992574237057451_);}
-	.st1{fill:#C4C6D7;fill-opacity:0.13;}
-	.st2{fill:url(#SVGID_00000160899217040623734610000012475498666032569535_);}
-	.st3{fill:url(#SVGID_00000165937116837111335010000002168296177881715893_);}
-	.st4{fill:url(#SVGID_00000018918107990092482040000013252589092973039528_);}
-	.st5{fill:#EFF0F5;}
-	.st6{fill:#C4C6D7;fill-opacity:0.1;}
-	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#C4C6D7;fill-opacity:0.24;}
-	.st8{opacity:0.8;}
-	.st9{fill:#F02E65;}
-	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000167371531459048999190000011249690870566165131_);}
-	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000129189707251269225150000005643527147027450300_);}
-	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000110441753684435544470000002509435895197784990_);}
-	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000040543275171738859230000011080850046303292574_);}
-	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#C4C6D7;}
-	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#C5C7D8;}
-	.st16{fill:#E1E2EB;}
-	.st17{fill:#F7F7FD;}
-	.st18{fill:url(#SVGID_00000014616156117666285330000017681245174404887476_);}
-	.st19{fill:url(#SVGID_00000049915430414130331190000010213430985914623119_);}
-	.st20{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000150061310937551999490000005118680971835354005_);}
-	.st21{fill:#FFFFFF;}
-	.st22{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000153685637016501534810000007342960322620315286_);}
-	.st23{fill:#C4C6D7;}
-	.st24{fill:none;stroke:#C4C6D7;stroke-linecap:round;stroke-linejoin:round;}
-	.st25{fill:#A3A8BD;fill-opacity:0.44;}
-	.st26{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000122713569741792111270000013894495698271964855_);}
-	.st27{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000058547726287328230310000017868126435458607280_);}
-	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000168812222206957706450000006078852729696268212_);}
-	.st29{fill:url(#SVGID_00000155113799803772021930000015866631640545841041_);}
-	.st30{fill:url(#SVGID_00000088848469795268600710000008867049092415817861_);}
-	.st31{fill:url(#SVGID_00000075876533340810585590000003382599365659021220_);}
-	.st32{fill:url(#SVGID_00000072984218318522218100000000103455013259610791_);}
-	.st33{fill:url(#SVGID_00000029037054272536630930000012467091695488964254_);}
-	.st34{fill:url(#SVGID_00000031182715734895419450000013181737395988048028_);}
-	.st35{fill:#E5E6EF;}
-	.st36{fill:url(#SVGID_00000088130410630487144420000007429096236737403268_);}
-	.st37{fill:#DCDEE9;}
-	.st38{fill:#F02E65;fill-opacity:0.5;}
-</style>
-<g>
-	<defs>
-		<rect id="SVGID_1_" x="-0.5" y="-0.1" width="424.1" height="190.8"/>
-	</defs>
-	<clipPath id="SVGID_00000036962071336252325100000015735855463922640033_">
-		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
-	</clipPath>
-	<g style="clip-path:url(#SVGID_00000036962071336252325100000015735855463922640033_);">
-		<path class="st1" d="M134.2,36.2c-11.2-8.9-43.6-0.6-58.4,4.7l18.1-27.5h110.4l31.6,27.5c-9.3,2.1-21.6,11.3-46.1,15.8
-			C167.5,60.7,148.3,47.3,134.2,36.2z"/>
-		
-			<linearGradient id="SVGID_00000120531480136468366030000010422245260786763652_" gradientUnits="userSpaceOnUse" x1="222.7078" y1="192.5487" x2="188.0658" y2="6.4369" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#F2F2F8"/>
-			<stop  offset="1" style="stop-color:#F2F2F8;stop-opacity:0.5"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000120531480136468366030000010422245260786763652_);" d="M2.9,133.1L98.8,13.8h106.4l89.6,79.7
-			l110.8,5.4l-72.3,92h-149l-80-56.7L2.9,133.1z"/>
-		
-			<linearGradient id="SVGID_00000014601897631993702440000001613442895209435323_" gradientUnits="userSpaceOnUse" x1="233.0974" y1="175.2321" x2="222.1132" y2="127.9958" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#D5D7E3"/>
-			<stop  offset="1" style="stop-color:#DADBE6"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000014601897631993702440000001613442895209435323_);" d="M236.9,10.4c9.9,2.3,16.2,14.9,14.1,28.2
-			s-11.9,22.1-21.8,19.8c-9.9-2.3-16.2-14.9-14.1-28.2C217.2,16.9,227,8.1,236.9,10.4z"/>
-		
-			<linearGradient id="SVGID_00000063635011906143689870000000275410262821832626_" gradientUnits="userSpaceOnUse" x1="214.2627" y1="197.0107" x2="277.3987" y2="133.6245" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#E6E7F0"/>
-			<stop  offset="1" style="stop-color:#FAFAFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000063635011906143689870000000275410262821832626_);" d="M239.2,9.8c8.9,2.1,14.4,14.5,12.2,27.7
-			c-2.2,13.2-11.1,22.3-20,20.2c-8.9-2.1-14.4-14.5-12.2-27.7S230.3,7.7,239.2,9.8z"/>
-		<path class="st5" d="M25.9,104.9c0,0-13.9,17.4-22.1,28.5l102.2,1.2l78.5,54.3c-67.3-53.5-55.3-72.3-73.9-81
-			c-18.6-8.7-30.8,10.5-51.7,0C48.9,102.8,48.5,77.6,25.9,104.9z"/>
-		<path class="st6" d="M330.6,121.2c-5.1-10.3,2.1-21.5,6.4-25.8l68.9,3.5l-45.7,60.5c0.2-3.1-0.1-10.9-2.9-17
-			C353.8,134.7,337,134.2,330.6,121.2z"/>
-		<path class="st7" d="M110.9,83.4l2.3-1.5l1.2-8.5c0.4,0.1,1,0.3,1.6,0.5c6.8,2,13.9,4.9,18.4,10.4c3.8,4.7,6.4,9.5,8.5,13.9
-			c0.5,1.1,1,2.1,1.5,3.1c1.5,3.2,2.8,5.9,4.5,8.5c2,3.2,4.2,6.9,7.4,8.8c3.2,1.9,7.7,3.6,14.5,4.2c15.5,1.5,24.9-7.6,36.4-17.6
-			l0.3-0.3c11.1-9.7,24.4-21.2,45.9-18.8c14.5,1.6,24,7.4,30.3,15.1c6.1,7.4,8.8,16,10.6,22.2c0.7,2.6,1.4,5.9,2,9
-			c0.2,0.9,0.3,1.8,0.5,2.7c0.8,4.2,1.8,8.3,3.2,12.2c2.8,7.6,7.1,13.6,15.5,16c15.8,4.6,55.2-23,61.5-25.7l-11,13.8
-			c-5.8,7-34.5,29.9-54,24.2c-13.7-4-20.4-14.1-24-23.9c-1.8-4.9-2.9-9.8-3.7-14.1c-0.2-1.2-0.4-2.2-0.6-3.3c-0.6-3-1-5.4-1.6-7.4
-			c-1.7-6-3.8-13.5-8.1-18.7c-4.1-4.9-10.5-9.3-21.9-10.5c-15.5-1.7-24.9,7.3-36.4,17.2c-0.2,0.2-0.4,0.3-0.6,0.5
-			c-11,9.6-24.2,21-45.4,19c-8.3-0.8-14.7-2.8-19.9-6c-5.2-3.2-8.8-7.4-11.5-11.7c-2.1-3.3-3.8-6.9-5.4-10.2
-			c-0.4-0.9-0.8-1.7-1.2-2.6c-2-4.1-4.1-7.9-6.9-11.4c-2.3-2.8-4.6-5.1-6.6-6.7c-1-0.8-1.9-1.4-2.5-1.8
-			C114.7,83.6,110.9,83.4,110.9,83.4z"/>
-		<g class="st8">
-			<path class="st9" d="M110,82.2c0.9,1.2,3.9,2.3,4.2,2.2c0.2,0.1,0.8,0.1,1.5-0.6c0.9-0.9,12-19.8,16.4-29.2
-				c4.4-9.3,3.8-13.4,3.2-18.7c-0.6-5.2-6.2-12-10.6-13.1c-4.4-1.2,6.2,16.1-4.1,24.3s-25-1.5-24.1,3.7
-				C97.5,56.1,108.9,80.7,110,82.2z"/>
-			
-				<linearGradient id="SVGID_00000041983407352360849690000014411068895137063583_" gradientUnits="userSpaceOnUse" x1="189.766" y1="80.2983" x2="88.9538" y2="186.9586" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-				<stop  offset="0" style="stop-color:#F02E65"/>
-				<stop  offset="1" style="stop-color:#F291AE"/>
-			</linearGradient>
-			<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000041983407352360849690000014411068895137063583_);" d="
-				M110.7,82.6c-0.3,0.1-1.1,0-2.1-1.2C107.4,79.9,93.9,54.3,93,49c-0.9-5.3-2.6-15.4,6.8-24.6c7-6.9,17-4.6,21.4-3.4
-				c4.4,1.2,10,7.9,10.6,13.1c0,0.1,0,0.2,0,0.4c0.6,5.1,1,9.2-3.3,18.3c-4.4,9.3-15.6,28.3-16.4,29.2
-				C111.4,82.7,110.9,82.7,110.7,82.6z M110.9,50.7c5.4,0,9.8-5,9.8-11.1s-4.4-11.1-9.8-11.1s-9.8,5-9.8,11.1S105.5,50.7,110.9,50.7
-				z"/>
-			<path class="st9" d="M102,44.4c1.9,5.3,6.2,6.2,8.9,6.2c-4-3.1-5.1-5.4-5.8-7.5c-0.6-1.8-0.9-3.6,0-8c0.4-2.2,3-6.1,4.4-6.7
-				c-1.3,0.1-4.9,1.2-6.7,4C100.7,36,100.3,39.6,102,44.4z"/>
-		</g>
-		
-			<linearGradient id="SVGID_00000047770167322269114000000006427443012937318574_" gradientUnits="userSpaceOnUse" x1="235.8584" y1="170.6884" x2="229.4094" y2="166.1626" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#E8E8F1"/>
-			<stop  offset="1" style="stop-color:#C4C6D7"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000047770167322269114000000006427443012937318574_);" d="
-			M229.9,44.2l-1.1-10.3l3.2-0.4l4.6,14.8l-2.9,1.3L229.9,44.2z"/>
-		
-			<linearGradient id="SVGID_00000073701026715854532600000016529582597290795680_" gradientUnits="userSpaceOnUse" x1="235.8108" y1="174.526" x2="229.4188" y2="170.0405" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#E8E8F1"/>
-			<stop  offset="1" style="stop-color:#C4C6D7"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000073701026715854532600000016529582597290795680_);" d="
-			M228.8,33.9l2.8-1.3l2.9,0.7l6.6,4.1l-2.8,1.3l-8.9,0.9L228.8,33.9z"/>
-		
-			<linearGradient id="SVGID_00000036224557440401591050000006020178233110649512_" gradientUnits="userSpaceOnUse" x1="239.1553" y1="184.8503" x2="229.2043" y2="177.8667" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#E8E8F1"/>
-			<stop  offset="1" style="stop-color:#C4C6D7"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000036224557440401591050000006020178233110649512_);" d="
-			M227.9,25l0.6,5.8l13.9-1.4l2.8-1.3l-6.6-4.2l-7.8-0.3L227.9,25z"/>
-		<path class="st14" d="M232.8,42.9l-1.1-10.3l3.2-0.4l1.7,16.1L232.8,42.9z"/>
-		<path class="st15" d="M231.7,32.6l5.7-0.6l3.8,5.4l-8.9,0.9L231.7,32.6z"/>
-		<path class="st15" d="M230.8,23.7l0.6,5.8l13.9-1.4l-3.8-5.5L230.8,23.7z"/>
-		<path class="st16" d="M40.4,99.4c10.8,0,19.5-9.8,19.5-22s-8.7-22-19.5-22c-10.8,0-19.5,9.8-19.5,22S29.7,99.4,40.4,99.4z"/>
-		<path class="st17" d="M36.4,98.4c10.8,0,19.5-9.6,19.5-21.5s-8.7-21.5-19.5-21.5c-10.8,0-19.5,9.6-19.5,21.5S25.7,98.4,36.4,98.4z
-			"/>
-		
-			<linearGradient id="SVGID_00000090292124887545916010000003054529199096651392_" gradientUnits="userSpaceOnUse" x1="223.1171" y1="105.2476" x2="233.191" y2="31.5836" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#D5D7E3"/>
-			<stop  offset="1" style="stop-color:#ECEEF8"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000090292124887545916010000003054529199096651392_);" d="M230.4,178.4c10.2,0,18.5-9.2,18.5-20.5
-			s-8.3-20.5-18.5-20.5c-10.2,0-18.5,9.2-18.5,20.5S220.2,178.4,230.4,178.4z"/>
-		
-			<linearGradient id="SVGID_00000111167967411611742080000010383734263537612986_" gradientUnits="userSpaceOnUse" x1="202.3134" y1="123.8137" x2="262.4785" y2="-7.1604" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#E6E7F0"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000111167967411611742080000010383734263537612986_);" d="M235.4,178.4c9.7,0,17.5-9.2,17.5-20.5
-			s-7.8-20.5-17.5-20.5c-9.7,0-17.5,9.2-17.5,20.5S225.8,178.4,235.4,178.4z"/>
-		
-			<linearGradient id="SVGID_00000039842361181573650650000016717646815770968453_" gradientUnits="userSpaceOnUse" x1="241.1087" y1="49.2552" x2="225.3607" y2="51.2462" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#E8E8F1"/>
-			<stop  offset="1" style="stop-color:#C4C6D7"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000039842361181573650650000016717646815770968453_);" d="
-			M236.6,164.1l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1h-0.1c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
-			v-0.1l10.4-2.7v0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9h-0.1l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9L236.6,164.1z
-			 M228.4,158.4c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9s1.1-0.8,1-1.5L228.4,158.4z
-			 M242.4,154.7c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9s1.1-0.8,1-1.5L242.4,154.7z
-			 M232.8,149.9c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7c-0.3-2.4-2.5-3.9-5.1-3.5L232.8,149.9z"/>
-		<path class="st21" d="M231.2,152.6c0,0.3-0.2,0.7-0.5,0.8s-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
-			C230.9,152.1,231.2,152.3,231.2,152.6z M235.6,151.5c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
-			C235.3,151,235.6,151.2,235.6,151.5z"/>
-		
-			<linearGradient id="SVGID_00000132047320660920396990000008116030610979388070_" gradientUnits="userSpaceOnUse" x1="229.8114" y1="58.9299" x2="245.6875" y2="32.0059" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#C4C6D7"/>
-			<stop  offset="1" style="stop-color:#C4C6D7"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000132047320660920396990000008116030610979388070_);" d="
-			M236.4,163l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1h-0.1c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
-			v-0.1l10.4-2.7v0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9h-0.1l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5s-1.2-0.2-1.3-0.9L236.4,163z
-			 M228.1,157.3c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5
-			L228.1,157.3z M242.2,153.6c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9
-			c0.6-0.2,1.1-0.8,1-1.5L242.2,153.6z M232.6,148.8c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7c-0.3-2.4-2.6-3.9-5.1-3.5L232.6,148.8z"/>
-		<path class="st23" d="M228.4,149.7l1.5,1.9L228.4,149.7z M237.9,147.2l-0.9,2.5L237.9,147.2z"/>
-		<path class="st24" d="M228.4,149.7l1.5,1.9 M237.9,147.2l-0.9,2.5"/>
-		<path class="st21" d="M231.9,151.6c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
-			C231.6,151,231.9,151.2,231.9,151.6z M236.3,150.4c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
-			C236,149.9,236.3,150.1,236.3,150.4z"/>
-		<path class="st25" d="M30.3,70.9l2.6,0.5l-3.1,3.5l3.1,4.8l-2.5-0.5l-3.1-4.7L30.3,70.9z"/>
-		<path class="st25" d="M44.9,73.8l-2.6-0.5l3.1,4.7l-3.1,3.6l2.5,0.5l3.1-3.5L44.9,73.8z"/>
-		<path class="st25" d="M38.7,65.6l1.9,0.4l-3.8,20.5l-1.9-0.4L38.7,65.6z"/>
-		
-			<linearGradient id="SVGID_00000162311568297408065920000015641952244260549309_" gradientUnits="userSpaceOnUse" x1="31.4826" y1="138.162" x2="28.2267" y2="129.7374" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#A3A8BD"/>
-			<stop  offset="1" style="stop-color:#C4C6D7"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000162311568297408065920000015641952244260549309_);" d="
-			M31.9,71.8l-2.6-0.5l-3,3.6l3.1,4.7l0.7,0.1l-2,0.2l2.4,0.5l1.4-0.3l-3.1-4.8L31.9,71.8z"/>
-		
-			<linearGradient id="SVGID_00000000922909364608009210000006839748742282430905_" gradientUnits="userSpaceOnUse" x1="46.8573" y1="136.1461" x2="35.5465" y2="123.6711" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#C4C6D7"/>
-			<stop  offset="1" style="stop-color:#A3A8BD"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000000922909364608009210000006839748742282430905_);" d="
-			M41.4,73.6l2.6,0.5l3,4.8l-3.1,3.5l-2.5-0.5l3.1-3.6L41.4,73.6z M40.1,82.3l2.5,0.5l1.3-0.3l-1-0.2H40.1z"/>
-		
-			<linearGradient id="SVGID_00000002352446127904352350000000406116734864036743_" gradientUnits="userSpaceOnUse" x1="41.5413" y1="142.0648" x2="25.0535" y2="110.4618" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#C4C6D7"/>
-			<stop  offset="1" style="stop-color:#A3A8BD"/>
-		</linearGradient>
-		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000002352446127904352350000000406116734864036743_);" d="
-			M39.7,66.4L37.8,66L34,86.5l1.9,0.4L39.7,66.4z M32.7,86.8l2-0.2l1.2,0.2l-1.2,0.3L32.7,86.8z"/>
-		
-			<linearGradient id="SVGID_00000147930224128362316950000016462697264583626373_" gradientUnits="userSpaceOnUse" x1="28.4247" y1="133.9432" x2="24.5452" y2="135.5235" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#C4C6D7"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000147930224128362316950000016462697264583626373_);" d="M28,71.6l2.6,0.5l-3.1,3.6l3.1,4.8
-			L28.1,80L25,75.3L28,71.6z"/>
-		
-			<linearGradient id="SVGID_00000132084040323080864270000007235383945633433482_" gradientUnits="userSpaceOnUse" x1="46.0117" y1="127.8771" x2="31.797" y2="138.2089" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#A3A8BD"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000132084040323080864270000007235383945633433482_);" d="M42.7,74.5L40.1,74l3.1,4.7l-3.1,3.6
-			l2.5,0.5l3.1-3.5L42.7,74.5z"/>
-		
-			<linearGradient id="SVGID_00000183953686507929609820000004907616558297372844_" gradientUnits="userSpaceOnUse" x1="38.512" y1="131.649" x2="28.883" y2="135.6073" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#C4C6D7"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000183953686507929609820000004907616558297372844_);" d="M36.5,66.3l1.9,0.4l-3.8,20.5l-1.9-0.4
-			L36.5,66.3z"/>
-		
-			<linearGradient id="SVGID_00000062908688815126735820000003382563083365322155_" gradientUnits="userSpaceOnUse" x1="29.082" y1="139.148" x2="31.7705" y2="135.82" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#A3A8BD"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000062908688815126735820000003382563083365322155_);" d="M29.4,71.3l-1.3,0.3l2.6,0.5l1.3-0.3
-			L29.4,71.3z"/>
-		
-			<linearGradient id="SVGID_00000112612499809665390110000012375988160051438726_" gradientUnits="userSpaceOnUse" x1="37.4168" y1="144.2006" x2="39.2324" y2="141.8137" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#A3A8BD"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000112612499809665390110000012375988160051438726_);" d="M37.8,66l-1.3,0.3l1.9,0.4l1.3-0.3
-			L37.8,66z"/>
-		
-			<linearGradient id="SVGID_00000083066911523164798880000010443932817195736479_" gradientUnits="userSpaceOnUse" x1="41.2906" y1="136.3787" x2="44.0442" y2="133.6968" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#A3A8BD"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000083066911523164798880000010443932817195736479_);" d="M41.4,73.6l-1.3,0.3l2.6,0.5l1.3-0.3
-			L41.4,73.6z"/>
-		<path class="st35" d="M413,129.2c2.7-15-8.2-29.5-24.3-32.4c-16.1-2.9-31.4,6.9-34.1,21.9c-2.7,15,8.2,29.5,24.3,32.4
-			C395,154,410.3,144.2,413,129.2z"/>
-		
-			<linearGradient id="SVGID_00000008139052301016845560000008229210164744449954_" gradientUnits="userSpaceOnUse" x1="459.4391" y1="100.9133" x2="299.8311" y2="78.4213" gradientTransform="matrix(1 0 0 -1 0 209.6)">
-			<stop  offset="0" style="stop-color:#F3F3FA"/>
-			<stop  offset="1" style="stop-color:#FFFFFF"/>
-		</linearGradient>
-		<path style="fill:url(#SVGID_00000008139052301016845560000008229210164744449954_);" d="M357.1,109.5
-			c5.3-14.3,22.2-21.6,37.7-16.3c15.5,5.3,23.7,21.3,18.4,35.6c-5.3,14.3-22.2,21.6-37.7,16.3S351.8,123.9,357.1,109.5z"/>
-		<path class="st37" d="M375.8,126.7l-8.1-24.2l24.4,7.3l8.8,26.4L375.8,126.7z"/>
-		<path class="st38" d="M375.8,127.1l-8.2-24.4l24.2,7.2l-9.9,8.6L375.8,127.1z"/>
-		<path class="st38" d="M375.8,127.1l-8.2-24.4l14.3,15.8L375.8,127.1z"/>
-		<path class="st23" d="M375.8,127.1l25.2,9.3l-19.3-18.1L375.8,127.1z"/>
-	</g>
-</g>
-</svg>
diff --git a/src/routes/console/project-[project]/overview/onboard.svelte b/src/routes/console/project-[project]/overview/onboard.svelte
index acd426a25..c127ef6ae 100644
--- a/src/routes/console/project-[project]/overview/onboard.svelte
+++ b/src/routes/console/project-[project]/overview/onboard.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { addPlatform, Platform } from './platforms/+page.svelte';
-    import OnboardDarkIntro from './intro-dark.svg';
+    import OnboardDarkIntro from './intro-dark.png';
     import OnboardDark1 from './onboard-1-dark.svg';
     import OnboardDark2 from './onboard-2-dark.svg';
-    import OnboardLightIntro from './intro-light.svg';
+    import OnboardLightIntro from './intro-light.png';
     import OnboardLight1 from './onboard-1-light.svg';
     import OnboardLight2 from './onboard-2-light.svg';
     import { app } from '$lib/stores/app';
@@ -45,16 +45,13 @@
 </script>
 
 <div class="card">
-    <header class="card-header common-section grid-1-2">
+    <header class="card-header common-section grid-1-2" style:--url={`url(${onBoardIntro})`}>
         <div class="grid-1-2-col-1">
             <h2 class="heading-level-5">Getting started guide</h2>
             <p class="u-line-height-1-5 u-margin-block-start-12">
                 Here are some next steps to start building
             </p>
         </div>
-        <div class="grid-1-2-col-2 u-flex u-main-end u-cross-end is-not-mobile">
-            <img src={onBoardIntro} alt="" class="card-header-image" />
-        </div>
     </header>
 
     <section class="common-section card-separator grid-1-2">
@@ -164,7 +161,28 @@
 
 <img src={onBoardImage2} class="common-section" alt="statistics" />
 
-<style>
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    .card-header {
+        background: transparent;
+    }
+
+    @media #{$break2open} {
+        .card-header {
+            background: var(--url);
+            background-repeat: no-repeat;
+            background-position: top right;
+        }
+    }
+    :global(.theme-dark) .card-header {
+        background-color: #18181b;
+    }
+
+    :global(.theme-light) .card-header {
+        background-color: #fbfbfc;
+    }
+
     .onboard-cover {
         height: 342px;
         background: none;