diff --git a/ui/src/clientLibraries/graphics/RubyLogo.tsx b/ui/src/clientLibraries/graphics/RubyLogo.tsx
new file mode 100644
index 0000000000..6bc9ea9f9c
--- /dev/null
+++ b/ui/src/clientLibraries/graphics/RubyLogo.tsx
@@ -0,0 +1,316 @@
+// Libraries
+import React, {SFC} from 'react'
+
+const RubyLogo: SFC = () => {
+  return (
+    <svg
+      width="50%"
+      height="50%"
+      id="ruby_logo"
+      viewBox="0 0 100 100"
+      xmlSpace="preserve"
+    >
+      <style>
+        {`
+          .ruby_st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_1_);}
+          .ruby_st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_2_);}
+          .ruby_st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_3_);}
+          .ruby_st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_4_);}
+          .ruby_st4{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_5_);}
+          .ruby_st5{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_6_);}
+          .ruby_st6{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_7_);}
+          .ruby_st7{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_8_);}
+          .ruby_st8{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+          .ruby_st9{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_9_);}
+          .ruby_st10{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_10_);}
+          .ruby_st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_11_);}
+          .ruby_st12{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_12_);}
+          .ruby_st13{fill-rule:evenodd;clip-rule:evenodd;fill:#AA3E35;}
+          .ruby_st14{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_13_);}
+          .ruby_st15{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_14_);}
+          .ruby_st16{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_15_);}
+          .ruby_st17{fill-rule:evenodd;clip-rule:evenodd;fill:url(#RUBY_SVGID_16_);}
+        `}
+      </style>
+      <linearGradient
+        id="RUBY_SVGID_1_"
+        gradientUnits="userSpaceOnUse"
+        x1="87.8568"
+        y1="108.9284"
+        x2="66.7595"
+        y2="71.6801"
+      >
+        <stop offset="0" style={{stopColor: '#F68F71'}} />
+        <stop offset="0" style={{stopColor: '#F68F71'}} />
+        <stop offset="0.41" style={{stopColor: '#DC5242'}} />
+        <stop offset="0.99" style={{stopColor: '#A72C32'}} />
+        <stop offset="1" style={{stopColor: '#A72C32'}} />
+      </linearGradient>
+      <polygon
+        className="ruby_st0"
+        points="20.4,99.9 94.3,94.8 100,20.3 77.5,66 "
+      />
+      <linearGradient
+        id="RUBY_SVGID_2_"
+        gradientUnits="userSpaceOnUse"
+        x1="98.3669"
+        y1="77.6417"
+        x2="71.1783"
+        y2="59.3965"
+      >
+        <stop offset="0" style={{stopColor: '#9B3F34'}} />
+        <stop offset="0" style={{stopColor: '#9B3F34'}} />
+        <stop offset="0.99" style={{stopColor: '#A23E36'}} />
+        <stop offset="1" style={{stopColor: '#A23E36'}} />
+      </linearGradient>
+      <polygon className="ruby_st1" points="70.8,73.8 94.4,94.8 88.1,50.9 " />
+      <linearGradient
+        id="RUBY_SVGID_3_"
+        gradientUnits="userSpaceOnUse"
+        x1="76.6134"
+        y1="110.0583"
+        x2="49.4248"
+        y2="91.8131"
+      >
+        <stop offset="0" style={{stopColor: '#9B3F34'}} />
+        <stop offset="0" style={{stopColor: '#9B3F34'}} />
+        <stop offset="0.99" style={{stopColor: '#A23E36'}} />
+        <stop offset="1" style={{stopColor: '#A23E36'}} />
+      </linearGradient>
+      <polygon className="ruby_st2" points="20.6,99.8 94.5,94.8 48,91.1 " />
+      <linearGradient
+        id="RUBY_SVGID_4_"
+        gradientUnits="userSpaceOnUse"
+        x1="19.5308"
+        y1="64.4356"
+        x2="23.7457"
+        y2="91.8282"
+      >
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.23" style={{stopColor: '#E28B6F'}} />
+        <stop offset="0.46" style={{stopColor: '#DA6144'}} />
+        <stop offset="0.99" style={{stopColor: '#A60003'}} />
+        <stop offset="1" style={{stopColor: '#A60003'}} />
+      </linearGradient>
+      <polygon className="ruby_st3" points="6.7,67.2 20.7,99.8 32.3,61.7 " />
+      <linearGradient
+        id="RUBY_SVGID_5_"
+        gradientUnits="userSpaceOnUse"
+        x1="48.52"
+        y1="38.856"
+        x2="50.0731"
+        y2="66.8124"
+      >
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.23" style={{stopColor: '#E08A6D'}} />
+        <stop offset="0.56" style={{stopColor: '#C14435'}} />
+        <stop offset="0.99" style={{stopColor: '#B13430'}} />
+        <stop offset="1" style={{stopColor: '#B13430'}} />
+      </linearGradient>
+      <polygon className="ruby_st4" points="29.4,60.7 70.8,73.9 60.1,32 " />
+      <linearGradient
+        id="RUBY_SVGID_6_"
+        gradientUnits="userSpaceOnUse"
+        x1="74.2463"
+        y1="13.0212"
+        x2="78.8952"
+        y2="33.056"
+      >
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.18" style={{stopColor: '#DF8063'}} />
+        <stop offset="0.4" style={{stopColor: '#C94D37'}} />
+        <stop offset="0.99" style={{stopColor: '#B13430'}} />
+        <stop offset="1" style={{stopColor: '#B13430'}} />
+      </linearGradient>
+      <polygon className="ruby_st5" points="60.6,35 97.6,32.6 68.6,9 " />
+      <linearGradient
+        id="RUBY_SVGID_7_"
+        gradientUnits="userSpaceOnUse"
+        x1="60.0495"
+        y1="5.9643"
+        x2="80.0838"
+        y2="-4.0529"
+      >
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.54" style={{stopColor: '#C94838'}} />
+        <stop offset="0.99" style={{stopColor: '#C12D2F'}} />
+        <stop offset="1" style={{stopColor: '#C12D2F'}} />
+      </linearGradient>
+      <polygon className="ruby_st6" points="56.3,0.4 84,0.5 67,9.9 " />
+      <linearGradient
+        id="RUBY_SVGID_8_"
+        gradientUnits="userSpaceOnUse"
+        x1="1.9704"
+        y1="57.4524"
+        x2="3.6193"
+        y2="73.9617"
+      >
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.31" style={{stopColor: '#DA6548'}} />
+        <stop offset="0.99" style={{stopColor: '#C14433'}} />
+        <stop offset="1" style={{stopColor: '#C14433'}} />
+      </linearGradient>
+      <polygon className="ruby_st7" points="1.4,51.4 0,79.9 7.1,66.9 " />
+      <path
+        className="ruby_st8"
+        d="M1,50.9l5.8,16.5L32,61.7L60.8,35l8.1-25.8l-12.8-9L34.4,8.3c-6.9,6.4-20.2,19-20.6,19.2
+	C13.3,27.7,5,43.4,1,50.9z"
+      />
+      <linearGradient
+        id="RUBY_SVGID_9_"
+        gradientUnits="userSpaceOnUse"
+        x1="-9.368"
+        y1="78.4252"
+        x2="68.1438"
+        y2="-1.2786"
+      >
+        <stop offset="0" style={{stopColor: '#BD0012'}} />
+        <stop offset="0" style={{stopColor: '#BD0012'}} />
+        <stop offset="7.000000e-02" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.17" style={{stopColor: '#FFFFFF'}} />
+        <stop offset="0.27" style={{stopColor: '#C95841'}} />
+        <stop offset="0.33" style={{stopColor: '#983734'}} />
+        <stop offset="0.46" style={{stopColor: '#AE4231'}} />
+        <stop offset="0.72" style={{stopColor: '#B93E2F'}} />
+        <stop offset="0.99" style={{stopColor: '#DE4E2B'}} />
+        <stop offset="1" style={{stopColor: '#DE4E2B'}} />
+      </linearGradient>
+      <path
+        className="ruby_st9"
+        d="M21.4,21.4c14.9-14.7,34-23.4,41.4-16c7.3,7.4-0.4,25.4-15.3,40.2S13.6,69.4,6.3,62C-1,54.6,6.5,36.1,21.4,21.4
+	z"
+      />
+      <linearGradient
+        id="RUBY_SVGID_10_"
+        gradientUnits="userSpaceOnUse"
+        x1="50.0059"
+        y1="86.4623"
+        x2="26.6606"
+        y2="80.7005"
+      >
+        <stop offset="0" style={{stopColor: '#9F3633'}} />
+        <stop offset="0" style={{stopColor: '#9F3633'}} />
+        <stop offset="0.54" style={{stopColor: '#A73532'}} />
+        <stop offset="0.99" style={{stopColor: '#B13439'}} />
+        <stop offset="1" style={{stopColor: '#B13439'}} />
+      </linearGradient>
+      <path
+        className="ruby_st10"
+        d="M20.7,99.8l11.5-38.2l38.3,12.3C56.7,86.8,41.3,97.8,20.7,99.8z"
+      />
+      <linearGradient
+        id="RUBY_SVGID_11_"
+        gradientUnits="userSpaceOnUse"
+        x1="90.1051"
+        y1="58.4408"
+        x2="69.3643"
+        y2="39.8514"
+      >
+        <stop offset="0" style={{stopColor: '#923C36'}} />
+        <stop offset="0" style={{stopColor: '#923C36'}} />
+        <stop offset="0.99" style={{stopColor: '#AA3531'}} />
+        <stop offset="1" style={{stopColor: '#AA3531'}} />
+      </linearGradient>
+      <path
+        className="ruby_st11"
+        d="M60.8,34.9l9.8,39c11.6-12.2,22-25.3,27-41.4L60.8,34.9z"
+      />
+      <linearGradient
+        id="RUBY_SVGID_12_"
+        gradientUnits="userSpaceOnUse"
+        x1="97.7252"
+        y1="24.3333"
+        x2="87.3936"
+        y2="13.2881"
+      >
+        <stop offset="0" style={{stopColor: '#8D3E36'}} />
+        <stop offset="0" style={{stopColor: '#8D3E36'}} />
+        <stop offset="0.99" style={{stopColor: '#AA3E37'}} />
+        <stop offset="1" style={{stopColor: '#AA3E37'}} />
+      </linearGradient>
+      <path
+        className="ruby_st12"
+        d="M97.6,32.6c3.9-11.9,4.8-28.9-13.7-32.1L68.7,9L97.6,32.6z"
+      />
+      <path
+        className="ruby_st13"
+        d="M0,79.8c0.5,19.6,14.7,19.9,20.7,20.1L6.8,67.3L0,79.8z"
+      />
+      <radialGradient
+        id="RUBY_SVGID_13_"
+        cx="72.5938"
+        cy="40.2085"
+        r="25.4177"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" style={{stopColor: '#B13430'}} />
+        <stop offset="0" style={{stopColor: '#B13430'}} />
+        <stop offset="0.99" style={{stopColor: '#923834'}} />
+        <stop offset="1" style={{stopColor: '#923834'}} />
+      </radialGradient>
+      <path
+        className="ruby_st14"
+        d="M60.9,35c8.9,5.5,26.8,16.4,27.2,16.6c0.6,0.3,7.7-12.1,9.4-19.1L60.9,35z"
+      />
+      <radialGradient
+        id="RUBY_SVGID_14_"
+        cx="37.3946"
+        cy="73.7016"
+        r="33.7894"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" style={{stopColor: '#AE3531'}} />
+        <stop offset="0" style={{stopColor: '#AE3531'}} />
+        <stop offset="0.99" style={{stopColor: '#953A36'}} />
+        <stop offset="1" style={{stopColor: '#953A36'}} />
+      </radialGradient>
+      <path
+        className="ruby_st15"
+        d="M32.2,61.5l15.4,29.8c9.1-4.9,16.3-11,22.8-17.4L32.2,61.5z"
+      />
+      <linearGradient
+        id="RUBY_SVGID_15_"
+        gradientUnits="userSpaceOnUse"
+        x1="13.4615"
+        y1="99.7397"
+        x2="5.0417"
+        y2="71.1741"
+      >
+        <stop offset="0" style={{stopColor: '#994939'}} />
+        <stop offset="0" style={{stopColor: '#994939'}} />
+        <stop offset="0.43" style={{stopColor: '#AA3A36'}} />
+        <stop offset="0.99" style={{stopColor: '#B83936'}} />
+        <stop offset="1" style={{stopColor: '#B83936'}} />
+      </linearGradient>
+      <path
+        className="ruby_st16"
+        d="M6.7,67.4l-2.2,26c4.1,5.6,9.8,6.1,15.7,5.7C16,88.4,7.4,66.9,6.7,67.4z"
+      />
+      <linearGradient
+        id="RUBY_SVGID_16_"
+        gradientUnits="userSpaceOnUse"
+        x1="78.0512"
+        y1="5.0843"
+        x2="96.9277"
+        y2="13.4167"
+      >
+        <stop offset="0" style={{stopColor: '#B9392F'}} />
+        <stop offset="0" style={{stopColor: '#B9392F'}} />
+        <stop offset="0.44" style={{stopColor: '#A23A36'}} />
+        <stop offset="0.99" style={{stopColor: '#8D463A'}} />
+        <stop offset="1" style={{stopColor: '#8D463A'}} />
+      </linearGradient>
+      <path
+        className="ruby_st17"
+        d="M68.6,9l30.6,4.3C97.6,6.4,92.6,1.9,84,0.5L68.6,9z"
+      />
+    </svg>
+  )
+}
+
+export default RubyLogo