diff --git a/src/components/DiscordButton/styles.tsx b/src/components/DiscordButton/styles.tsx
index cc90516..9b8e16e 100644
--- a/src/components/DiscordButton/styles.tsx
+++ b/src/components/DiscordButton/styles.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import DiscordLogo from "../../images/discord-logo.svg"
+import DiscordLogo from "../../images/discord-logo"
 
 export const DiscordButtonWrapper = styled.a`
   display: inline-flex;
diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx
index d7ed677..216b01f 100644
--- a/src/components/HeaderBarebone/styles.tsx
+++ b/src/components/HeaderBarebone/styles.tsx
@@ -2,7 +2,7 @@ import { transparentize, darken } from "polished"
 import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
 import { WavesTop, WavesBottom } from "../Waves"
-import Circles from "../../images/circles.svg"
+import Circles from "../../images/circles"
 
 const height = 250
 
diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx
index 75342e5..e3ef734 100644
--- a/src/components/Home/styles.tsx
+++ b/src/components/Home/styles.tsx
@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import Particles from "react-particles-js"
 import styled, { css } from "styled-components"
 import { fontFamily } from "../../design/typography"
-import TPHLogo from "../../images/tph-logo.svg"
+import TPHLogo from "../../images/tph-logo"
 
 export const HomeWrapper = styled.header`
   display: flex;
diff --git a/src/components/HomePartner/styles.tsx b/src/components/HomePartner/styles.tsx
index 40ae506..af9314b 100644
--- a/src/components/HomePartner/styles.tsx
+++ b/src/components/HomePartner/styles.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import JetBrainsLogo from "../../images/jetbrains-logo.svg"
+import JetBrainsLogo from "../../images/jetbrains-logo"
 
 export const HomePartnerWrapper = styled.div`
   margin-top: 32px;
diff --git a/src/components/MobileHeader/styles.tsx b/src/components/MobileHeader/styles.tsx
index 099e11e..3c3bc06 100644
--- a/src/components/MobileHeader/styles.tsx
+++ b/src/components/MobileHeader/styles.tsx
@@ -1,7 +1,7 @@
 import { transparentize } from "polished"
 import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
-import Logo from "../../images/tph-logo.svg"
+import Logo from "../../images/tph-logo"
 
 export const MobileHeaderWrapper = styled.div`
   z-index: 50;
diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx
index 5a7c0e9..76a60a6 100644
--- a/src/components/Sidebar/styles.tsx
+++ b/src/components/Sidebar/styles.tsx
@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import styled, { css } from "styled-components"
 import { transparentize } from "polished"
 import { fontFamily } from "../../design/typography"
-import TPHLogo from "../../images/tph-logo.svg"
+import TPHLogo from "../../images/tph-logo"
 
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;
diff --git a/src/components/Waves/styles.tsx b/src/components/Waves/styles.tsx
index 7fdc515..e48260b 100644
--- a/src/components/Waves/styles.tsx
+++ b/src/components/Waves/styles.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components"
-import WavesBottom from "../../images/waves-bot.svg"
-import WavesTop from "../../images/waves-top.svg"
+import WavesBottom from "../../images/waves-bot"
+import WavesTop from "../../images/waves-top"
 
 const waves = css`
   display: block;
diff --git a/src/images/circles.svg b/src/images/circles.svg
deleted file mode 100644
index 05b1199..0000000
--- a/src/images/circles.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg fill="none" viewBox="0 0 1340 635">
-  <path fill="#EEF2F5" fill-opacity=".5" d="M863 120.73a32.79 32.79 0 110-65.58 32.79 32.79 0 010 65.58zM1188.94 493.27a64.09 64.09 0 110-128.18 64.09 64.09 0 010 128.18zM44.71 310.02a44.72 44.72 0 110-89.43 44.72 44.72 0 010 89.43zM393.49 634.95a44.72 44.72 0 110-89.43 44.72 44.72 0 010 89.43zM1328.03 23.85a11.93 11.93 0 110-23.85 11.93 11.93 0 010 23.85zM1211.77 253.38a11.92 11.92 0 110-23.84 11.92 11.92 0 010 23.84zM292.14 132.66a11.92 11.92 0 110-23.85 11.92 11.92 0 010 23.84zM70.05 478.45a11.92 11.92 0 110-23.85 11.92 11.92 0 010 23.85zM45.46 607.02a19.38 19.38 0 1119.38-33.57 19.38 19.38 0 01-19.38 33.57zM534.34 273.14a19.38 19.38 0 1119.38-33.56 19.38 19.38 0 01-19.38 33.56zM857.03 493.35a13.41 13.41 0 110-26.83 13.41 13.41 0 010 26.83z"/>
-</svg>
\ No newline at end of file
diff --git a/src/images/circles.tsx b/src/images/circles.tsx
new file mode 100644
index 0000000..024ad16
--- /dev/null
+++ b/src/images/circles.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+
+const Circles: React.FC = (props) => {
+  return (
+    <svg fill="none" viewBox="0 0 1340 635" {...props}>
+      <path
+        fill="#EEF2F5"
+        fillOpacity=".5"
+        d="M863 120.73a32.79 32.79 0 110-65.58 32.79 32.79 0 010 65.58zM1188.94 493.27a64.09 64.09 0 110-128.18 64.09 64.09 0 010 128.18zM44.71 310.02a44.72 44.72 0 110-89.43 44.72 44.72 0 010 89.43zM393.49 634.95a44.72 44.72 0 110-89.43 44.72 44.72 0 010 89.43zM1328.03 23.85a11.93 11.93 0 110-23.85 11.93 11.93 0 010 23.85zM1211.77 253.38a11.92 11.92 0 110-23.84 11.92 11.92 0 010 23.84zM292.14 132.66a11.92 11.92 0 110-23.85 11.92 11.92 0 010 23.84zM70.05 478.45a11.92 11.92 0 110-23.85 11.92 11.92 0 010 23.85zM45.46 607.02a19.38 19.38 0 1119.38-33.57 19.38 19.38 0 01-19.38 33.57zM534.34 273.14a19.38 19.38 0 1119.38-33.56 19.38 19.38 0 01-19.38 33.56zM857.03 493.35a13.41 13.41 0 110-26.83 13.41 13.41 0 010 26.83z"
+      />
+    </svg>
+  )
+}
+
+export default Circles
diff --git a/src/images/discord-logo.svg b/src/images/discord-logo.svg
deleted file mode 100644
index 4913c64..0000000
--- a/src/images/discord-logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg fill="none" viewBox="0 0 43 48">
-  <path fill="#fff" fill-rule="evenodd" d="M15.17 21.01c0-1.19 1.04-2.17 2.34-2.17 1.3 0 2.36.98 2.34 2.17 0 1.2-1.03 2.18-2.34 2.18-1.28 0-2.34-.98-2.34-2.18zm8.37 0c0-1.19 1.03-2.17 2.34-2.17 1.3 0 2.34.98 2.34 2.17 0 1.2-1.03 2.18-2.34 2.18-1.28 0-2.34-.98-2.34-2.18z" clip-rule="evenodd"/>
-  <path fill="#fff" fill-rule="evenodd" d="M5.6 0h32.2c2.71 0 4.92 2.2 4.92 4.93v42.9l-5.16-4.55-2.9-2.68-3.08-2.84 1.27 4.42H5.6a4.92 4.92 0 01-4.92-4.92V4.93A4.92 4.92 0 015.6 0zm21.33 29.3c.72.9 1.59 1.93 1.59 1.93 5.3-.17 7.35-3.63 7.35-3.63 0-7.7-3.46-13.95-3.46-13.95-3.46-2.58-6.75-2.5-6.75-2.5l-.34.38c4.08 1.24 5.98 3.03 5.98 3.03a19.64 19.64 0 00-12.49-2.2 18.1 18.1 0 00-6.87 2.2s2-1.89 6.32-3.13l-.24-.29s-3.29-.07-6.75 2.51c0 0-3.46 6.25-3.46 13.95 0 0 2.02 3.46 7.33 3.63 0 0 .89-1.08 1.6-1.98-3.04-.91-4.2-2.83-4.2-2.83a10 10 0 00.78.48c.03.03.07.04.1.06l.11.06a20.23 20.23 0 005.28 1.84 16.9 16.9 0 009.7-1c.85-.31 1.78-.77 2.77-1.41 0 0-1.2 1.96-4.35 2.84z" clip-rule="evenodd"/>
-</svg>
\ No newline at end of file
diff --git a/src/images/discord-logo.tsx b/src/images/discord-logo.tsx
new file mode 100644
index 0000000..819ece6
--- /dev/null
+++ b/src/images/discord-logo.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+
+const DiscordLogo: React.FC = (props) => {
+  return (
+    <svg fill="none" viewBox="0 0 43 48" {...props}>
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M15.17 21.01c0-1.19 1.04-2.17 2.34-2.17 1.3 0 2.36.98 2.34 2.17 0 1.2-1.03 2.18-2.34 2.18-1.28 0-2.34-.98-2.34-2.18zm8.37 0c0-1.19 1.03-2.17 2.34-2.17 1.3 0 2.34.98 2.34 2.17 0 1.2-1.03 2.18-2.34 2.18-1.28 0-2.34-.98-2.34-2.18z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M5.6 0h32.2c2.71 0 4.92 2.2 4.92 4.93v42.9l-5.16-4.55-2.9-2.68-3.08-2.84 1.27 4.42H5.6a4.92 4.92 0 01-4.92-4.92V4.93A4.92 4.92 0 015.6 0zm21.33 29.3c.72.9 1.59 1.93 1.59 1.93 5.3-.17 7.35-3.63 7.35-3.63 0-7.7-3.46-13.95-3.46-13.95-3.46-2.58-6.75-2.5-6.75-2.5l-.34.38c4.08 1.24 5.98 3.03 5.98 3.03a19.64 19.64 0 00-12.49-2.2 18.1 18.1 0 00-6.87 2.2s2-1.89 6.32-3.13l-.24-.29s-3.29-.07-6.75 2.51c0 0-3.46 6.25-3.46 13.95 0 0 2.02 3.46 7.33 3.63 0 0 .89-1.08 1.6-1.98-3.04-.91-4.2-2.83-4.2-2.83a10 10 0 00.78.48c.03.03.07.04.1.06l.11.06a20.23 20.23 0 005.28 1.84 16.9 16.9 0 009.7-1c.85-.31 1.78-.77 2.77-1.41 0 0-1.2 1.96-4.35 2.84z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default DiscordLogo
diff --git a/src/images/jetbrains-logo.svg b/src/images/jetbrains-logo.svg
deleted file mode 100644
index 5d2bffb..0000000
--- a/src/images/jetbrains-logo.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg fill="none" viewBox="0 0 121 131">
-  <path fill="url(#jetbrains1)" d="M118.62 71.8a4.68 4.68 0 00-6.2-7l-83.8 45.9a10.07 10.07 0 00-1.1 18c3.4 2 7.5 1.8 10.7-.2.2-.2.5-.3.7-.5l78-54.8c.4-.3 1.5-1.1 1.7-1.4z"/>
-  <path fill="url(#jetbrains2)" d="M118.82 65.1L55.02 2.5A7.7 7.7 0 1043.72 13c.4.4.8.7 1.2 1l67.4 57.7c.8.7 1.8 1.2 3 1.3 2.6.1 4.7-1.8 4.9-4.4a5 5 0 00-1.4-3.5z"/>
-  <path fill="url(#jetbrains3)" d="M57.12 59.5c-.1 0-39.4-31-40.2-31.5l-1.8-.9a11.18 11.18 0 00-9.8 20c.7.4 1.3.7 2 .9.4.2 45.4 18.8 45.4 18.8a4.3 4.3 0 004.4-7.3z"/>
-  <path fill="url(#jetbrains4)" d="M49.32 0c-1.7 0-3.3.6-4.6 1.5L4.92 28.3c-.1.1-.2.1-.2.2h-.1A11.14 11.14 0 007.32 48c3.6 1.4 7.5.7 10.4-1.4.7-.5 1.3-1 1.8-1.6l34.6-31.2c1.8-1.4 3-3.6 3-6.1 0-4.2-3.5-7.7-7.8-7.7z"/>
-  <path fill="#000" d="M85.62 37.4h-51v51h51v-51z"/>
-  <path fill="#fff" d="M58.12 78.8h-19.1V82h19.1v-3.2zM38.82 50.8l1.5-1.4c.4.5.8.8 1.3.8.6 0 .9-.4.9-1.2v-5.3h2.3V49c0 1-.3 1.8-.8 2.3-.5.5-1.3.8-2.3.8-1.5.1-2.3-.5-2.9-1.3zM45.32 43.8h6.7v1.9h-4.4V47h4v1.8h-4v1.3h4.5v2h-6.7l-.1-8.3zM55.02 45.8h-2.5v-2h7.3v2h-2.5v6.3h-2.3v-6.3zM39.02 54h4.3c1 0 1.8.3 2.3.7.3.3.5.8.5 1.4 0 1-.5 1.5-1.3 1.9 1 .3 1.6.9 1.6 2 0 1.4-1.2 2.3-3.1 2.3h-4.3V54zm4.8 2.6c0-.5-.4-.7-1-.7h-1.5v1.5h1.4c.7-.1 1.1-.3 1.1-.8zm-.8 2.4h-1.8v1.5h1.8c.7 0 1.1-.3 1.1-.8s-.4-.7-1.1-.7zM46.82 54h3.9c1.3 0 2.1.3 2.7.9.5.5.7 1.1.7 1.9 0 1.3-.7 2.1-1.7 2.6l2 2.9h-2.6l-1.7-2.5h-1v2.5h-2.3V54zm3.8 4c.8 0 1.2-.4 1.2-1 0-.7-.5-1-1.2-1h-1.5v2h1.5z"/>
-  <path fill="#fff" d="M56.82 54h2.2l3.5 8.4h-2.5l-.6-1.5h-3.2l-.6 1.5h-2.4l3.6-8.4zm2 5l-.9-2.3-.9 2.3h1.8zM62.82 54h2.3v8.3h-2.3V54zM65.72 54h2.1l3.4 4.4V54h2.3v8.3h-2l-3.5-4.5v4.6h-2.3V54zM73.72 61.1l1.3-1.5c.8.7 1.7 1 2.7 1 .6 0 1-.2 1-.6 0-.4-.3-.5-1.4-.8-1.8-.4-3.1-.9-3.1-2.6 0-1.5 1.2-2.7 3.2-2.7 1.4 0 2.5.4 3.4 1.1l-1.2 1.6c-.8-.5-1.6-.8-2.3-.8-.6 0-.8.2-.8.5 0 .4.3.5 1.4.8 1.9.4 3.1 1 3.1 2.6 0 1.7-1.3 2.7-3.4 2.7-1.5.1-2.9-.4-3.9-1.3z"/>
-  <defs>
-    <linearGradient id="jetbrains1" x1="31.86" x2="110.26" y1="120.56" y2="73.24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FCEE39"/>
-      <stop offset="1" stop-color="#F37B3D"/>
-    </linearGradient>
-    <linearGradient id="jetbrains2" x1="48.38" x2="119.94" y1="6.91" y2="69.55" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#EF5A6B"/>
-      <stop offset=".57" stop-color="#F26F4E"/>
-      <stop offset="1" stop-color="#F37B3D"/>
-    </linearGradient>
-    <linearGradient id="jetbrains3" x1="52.97" x2="10.56" y1="63.64" y2="37.16" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#7C59A4"/>
-      <stop offset=".39" stop-color="#AF4C92"/>
-      <stop offset=".77" stop-color="#DC4183"/>
-      <stop offset=".96" stop-color="#ED3D7D"/>
-    </linearGradient>
-    <linearGradient id="jetbrains4" x1="52.2" x2="10.79" y1="3.7" y2="37.9" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#EF5A6B"/>
-      <stop offset=".36" stop-color="#EE4E72"/>
-      <stop offset="1" stop-color="#ED3D7D"/>
-    </linearGradient>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/src/images/jetbrains-logo.tsx b/src/images/jetbrains-logo.tsx
new file mode 100644
index 0000000..2a8b620
--- /dev/null
+++ b/src/images/jetbrains-logo.tsx
@@ -0,0 +1,85 @@
+import React from "react"
+
+const JetbrainsLogo: React.FC = (props) => {
+  return (
+    <svg fill="none" viewBox="0 0 121 131" {...props}>
+      <path
+        fill="url(#jetbrains1)"
+        d="M118.62 71.8a4.68 4.68 0 00-6.2-7l-83.8 45.9a10.07 10.07 0 00-1.1 18c3.4 2 7.5 1.8 10.7-.2.2-.2.5-.3.7-.5l78-54.8c.4-.3 1.5-1.1 1.7-1.4z"
+      />
+      <path
+        fill="url(#jetbrains2)"
+        d="M118.82 65.1L55.02 2.5A7.7 7.7 0 1043.72 13c.4.4.8.7 1.2 1l67.4 57.7c.8.7 1.8 1.2 3 1.3 2.6.1 4.7-1.8 4.9-4.4a5 5 0 00-1.4-3.5z"
+      />
+      <path
+        fill="url(#jetbrains3)"
+        d="M57.12 59.5c-.1 0-39.4-31-40.2-31.5l-1.8-.9a11.18 11.18 0 00-9.8 20c.7.4 1.3.7 2 .9.4.2 45.4 18.8 45.4 18.8a4.3 4.3 0 004.4-7.3z"
+      />
+      <path
+        fill="url(#jetbrains4)"
+        d="M49.32 0c-1.7 0-3.3.6-4.6 1.5L4.92 28.3c-.1.1-.2.1-.2.2h-.1A11.14 11.14 0 007.32 48c3.6 1.4 7.5.7 10.4-1.4.7-.5 1.3-1 1.8-1.6l34.6-31.2c1.8-1.4 3-3.6 3-6.1 0-4.2-3.5-7.7-7.8-7.7z"
+      />
+      <path fill="#000" d="M85.62 37.4h-51v51h51v-51z" />
+      <path
+        fill="#fff"
+        d="M58.12 78.8h-19.1V82h19.1v-3.2zM38.82 50.8l1.5-1.4c.4.5.8.8 1.3.8.6 0 .9-.4.9-1.2v-5.3h2.3V49c0 1-.3 1.8-.8 2.3-.5.5-1.3.8-2.3.8-1.5.1-2.3-.5-2.9-1.3zM45.32 43.8h6.7v1.9h-4.4V47h4v1.8h-4v1.3h4.5v2h-6.7l-.1-8.3zM55.02 45.8h-2.5v-2h7.3v2h-2.5v6.3h-2.3v-6.3zM39.02 54h4.3c1 0 1.8.3 2.3.7.3.3.5.8.5 1.4 0 1-.5 1.5-1.3 1.9 1 .3 1.6.9 1.6 2 0 1.4-1.2 2.3-3.1 2.3h-4.3V54zm4.8 2.6c0-.5-.4-.7-1-.7h-1.5v1.5h1.4c.7-.1 1.1-.3 1.1-.8zm-.8 2.4h-1.8v1.5h1.8c.7 0 1.1-.3 1.1-.8s-.4-.7-1.1-.7zM46.82 54h3.9c1.3 0 2.1.3 2.7.9.5.5.7 1.1.7 1.9 0 1.3-.7 2.1-1.7 2.6l2 2.9h-2.6l-1.7-2.5h-1v2.5h-2.3V54zm3.8 4c.8 0 1.2-.4 1.2-1 0-.7-.5-1-1.2-1h-1.5v2h1.5z"
+      />
+      <path
+        fill="#fff"
+        d="M56.82 54h2.2l3.5 8.4h-2.5l-.6-1.5h-3.2l-.6 1.5h-2.4l3.6-8.4zm2 5l-.9-2.3-.9 2.3h1.8zM62.82 54h2.3v8.3h-2.3V54zM65.72 54h2.1l3.4 4.4V54h2.3v8.3h-2l-3.5-4.5v4.6h-2.3V54zM73.72 61.1l1.3-1.5c.8.7 1.7 1 2.7 1 .6 0 1-.2 1-.6 0-.4-.3-.5-1.4-.8-1.8-.4-3.1-.9-3.1-2.6 0-1.5 1.2-2.7 3.2-2.7 1.4 0 2.5.4 3.4 1.1l-1.2 1.6c-.8-.5-1.6-.8-2.3-.8-.6 0-.8.2-.8.5 0 .4.3.5 1.4.8 1.9.4 3.1 1 3.1 2.6 0 1.7-1.3 2.7-3.4 2.7-1.5.1-2.9-.4-3.9-1.3z"
+      />
+      <defs>
+        <linearGradient
+          id="jetbrains1"
+          x1="31.86"
+          x2="110.26"
+          y1="120.56"
+          y2="73.24"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FCEE39" />
+          <stop offset="1" stopColor="#F37B3D" />
+        </linearGradient>
+        <linearGradient
+          id="jetbrains2"
+          x1="48.38"
+          x2="119.94"
+          y1="6.91"
+          y2="69.55"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EF5A6B" />
+          <stop offset=".57" stopColor="#F26F4E" />
+          <stop offset="1" stopColor="#F37B3D" />
+        </linearGradient>
+        <linearGradient
+          id="jetbrains3"
+          x1="52.97"
+          x2="10.56"
+          y1="63.64"
+          y2="37.16"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7C59A4" />
+          <stop offset=".39" stopColor="#AF4C92" />
+          <stop offset=".77" stopColor="#DC4183" />
+          <stop offset=".96" stopColor="#ED3D7D" />
+        </linearGradient>
+        <linearGradient
+          id="jetbrains4"
+          x1="52.2"
+          x2="10.79"
+          y1="3.7"
+          y2="37.9"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EF5A6B" />
+          <stop offset=".36" stopColor="#EE4E72" />
+          <stop offset="1" stopColor="#ED3D7D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default JetbrainsLogo
diff --git a/src/images/tph-logo.svg b/src/images/tph-logo.svg
deleted file mode 100644
index fa57c74..0000000
--- a/src/images/tph-logo.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg fill="none" viewBox="0 0 473 573">
-  <path fill="url(#logo_gradient)" d="M.9 46.76c60.76.25 121.5 1.8 182.26 1.22 44.73-.43 89.03 21.05 116.19 56.6 22.74 28.63 33.14 65.93 31 102.24 1.96 63.88-43.05 125.73-104.83 142.8-18.36 5.67-37.66 5.85-56.7 6.5-12.38.07-23.4 9.97-24.33 22.34-1.9 28.84 0 57.83-.93 86.7-3.27 43.2-32.86 82.86-73.1 98.76-22.1 9.65-46.57 9.04-70.17 8.68C.07 542.29.6 512 0 481.73c15.35-1.82 34.15 2.44 45.74-10.58 9.68-10.36 5.6-25.36 6.85-38.06 2.54-28.94-3.41-59.11 7.17-86.95A131.4 131.4 0 0179.5 310.3c-14.35-19.65-24.07-43.04-25.11-67.54-.72-26.26-.79-52.52-2.48-78.74-.35-12.09-10.5-23.17-22.6-24.29-9.64-1.18-19.37-.93-29.01-1.32.35-30.57-.87-61.16.6-91.65zm143.01 98.93c1.22 28.7 2.66 57.47.72 86.16-1.61 16.93 10.51 33.22 27.01 37.02 32.1 8.8 66.4-15.92 72.75-47.63 7.9-32.36-16-67.59-48.43-73.72-15.65-2.75-31.6-1.62-48.52-1.76l-3.52-.07z"/>
-  <path fill="#EEF2F5" d="M372.19 0a100.5 100.5 0 110 201h-61.7a38.81 38.81 0 01-38.8-38.8v-61.7A100.5 100.5 0 01372.19 0z"/>
-  <path fill="#141414" d="M355.55 111.97h-49.61a9.2 9.2 0 000 18.4h49.61a9.2 9.2 0 000-18.4zm26.96 33.28h-76.57a9.2 9.2 0 000 18.4h76.57a9.2 9.2 0 000-18.4z"/>
-  <defs>
-    <linearGradient id="logo_gradient" x1="250.28" x2="-161.47" y1="79.37" y2="376.5" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#9423FC"/>
-      <stop offset=".51" stop-color="#FF70A5"/>
-      <stop offset="1" stop-color="#FEAF6D"/>
-    </linearGradient>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/src/images/tph-logo.tsx b/src/images/tph-logo.tsx
new file mode 100644
index 0000000..5ac4ba6
--- /dev/null
+++ b/src/images/tph-logo.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+
+const TPHLogo: React.FC = (props) => {
+  return (
+    <svg fill="none" viewBox="0 0 473 573" {...props}>
+      <path
+        fill="url(#logo_gradient)"
+        d="M.9 46.76c60.76.25 121.5 1.8 182.26 1.22 44.73-.43 89.03 21.05 116.19 56.6 22.74 28.63 33.14 65.93 31 102.24 1.96 63.88-43.05 125.73-104.83 142.8-18.36 5.67-37.66 5.85-56.7 6.5-12.38.07-23.4 9.97-24.33 22.34-1.9 28.84 0 57.83-.93 86.7-3.27 43.2-32.86 82.86-73.1 98.76-22.1 9.65-46.57 9.04-70.17 8.68C.07 542.29.6 512 0 481.73c15.35-1.82 34.15 2.44 45.74-10.58 9.68-10.36 5.6-25.36 6.85-38.06 2.54-28.94-3.41-59.11 7.17-86.95A131.4 131.4 0 0179.5 310.3c-14.35-19.65-24.07-43.04-25.11-67.54-.72-26.26-.79-52.52-2.48-78.74-.35-12.09-10.5-23.17-22.6-24.29-9.64-1.18-19.37-.93-29.01-1.32.35-30.57-.87-61.16.6-91.65zm143.01 98.93c1.22 28.7 2.66 57.47.72 86.16-1.61 16.93 10.51 33.22 27.01 37.02 32.1 8.8 66.4-15.92 72.75-47.63 7.9-32.36-16-67.59-48.43-73.72-15.65-2.75-31.6-1.62-48.52-1.76l-3.52-.07z"
+      />
+      <path
+        fill="#EEF2F5"
+        d="M372.19 0a100.5 100.5 0 110 201h-61.7a38.81 38.81 0 01-38.8-38.8v-61.7A100.5 100.5 0 01372.19 0z"
+      />
+      <path
+        fill="#141414"
+        d="M355.55 111.97h-49.61a9.2 9.2 0 000 18.4h49.61a9.2 9.2 0 000-18.4zm26.96 33.28h-76.57a9.2 9.2 0 000 18.4h76.57a9.2 9.2 0 000-18.4z"
+      />
+      <defs>
+        <linearGradient
+          id="logo_gradient"
+          x1="250.28"
+          x2="-161.47"
+          y1="79.37"
+          y2="376.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9423FC" />
+          <stop offset=".51" stopColor="#FF70A5" />
+          <stop offset="1" stopColor="#FEAF6D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default TPHLogo
diff --git a/src/images/waves-bot.svg b/src/images/waves-bot.svg
deleted file mode 100644
index 15c054c..0000000
--- a/src/images/waves-bot.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg fill="none" preserveAspectRatio="xMaxYMax slice" viewBox="0 0 1825 862">
-  <g mask="url(#bot_mask)">
-    <path fill="url(#bot_gradient1)" d="M-339.72 271.98S-38.1 54.63 236.91 121.17c275 66.53 328.23 416.94 550.01 483.48 221.78 66.53 550.01-190.73 754.05-235.09 204.04-44.35 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.76 88.71 567.76s-891.56 137.5-993.58 128.63c-102.01-8.87-1042.36-128.63-1042.36-128.63l-541.14-146.37 57.66-638.73z" opacity=".64"/>
-    <path fill="url(#bot_gradient2)" d="M-339.72 313.71S-38.1 96.37 236.91 162.91c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.58 128.64c-102.01-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z" opacity=".18"/>
-    <path fill="url(#bot_gradient3)" d="M-556.34 194.47S-254.72-22.87 20.3 43.67c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.02-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.57 128.64C867.49 1099.34-72.86 979.57-72.86 979.57L-614 833.2l57.66-638.73z" opacity=".18"/>
-    <path fill="url(#bot_gradient4)" d="M-323.82 379.3S-22.2 161.94 252.8 228.47c275 66.54 328.23 416.95 550.01 483.48 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.94 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.64c-102.02-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z" opacity=".91"/>
-    <path fill="url(#bot_gradient5)" d="M-494.73 403.14S-193.11 185.8 81.9 252.34c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.93 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.63C929.1 1308.01-11.25 1188.24-11.25 1188.24l-541.14-146.37 57.66-638.73z"/>
-  </g>
-  <defs>
-    <linearGradient id="bot_gradient1" x1="1872.87" x2="573.95" y1="602.05" y2="-141.38" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#9423FC"/>
-      <stop offset=".51" stop-color="#FF70A5"/>
-      <stop offset="1" stop-color="#FEAF6D"/>
-    </linearGradient>
-    <linearGradient id="bot_gradient2" x1="1872.87" x2="573.95" y1="643.79" y2="-99.64" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#9423FC"/>
-      <stop offset=".51" stop-color="#FF70A5"/>
-      <stop offset="1" stop-color="#FEAF6D"/>
-    </linearGradient>
-    <linearGradient id="bot_gradient3" x1="1574.79" x2="448.43" y1="459.89" y2="-207.89" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#9423FC"/>
-      <stop offset=".51" stop-color="#FF70A5"/>
-      <stop offset="1" stop-color="#FEAF6D"/>
-    </linearGradient>
-    <linearGradient id="bot_gradient4" x1="1993.87" x2="1553.41" y1="1147.96" y2="-218.23" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#9423FC"/>
-      <stop offset=".51" stop-color="#FF70A5"/>
-      <stop offset="1" stop-color="#FEAF6D"/>
-    </linearGradient>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/src/images/waves-bot.tsx b/src/images/waves-bot.tsx
new file mode 100644
index 0000000..ca01f4e
--- /dev/null
+++ b/src/images/waves-bot.tsx
@@ -0,0 +1,91 @@
+import React from "react"
+
+const WavesBot: React.FC = (props) => {
+  return (
+    <svg
+      fill="none"
+      preserveAspectRatio="xMaxYMax slice"
+      viewBox="0 0 1825 862"
+      {...props}
+    >
+      <g mask="url(#bot_mask)">
+        <path
+          fill="url(#bot_gradient1)"
+          d="M-339.72 271.98S-38.1 54.63 236.91 121.17c275 66.53 328.23 416.94 550.01 483.48 221.78 66.53 550.01-190.73 754.05-235.09 204.04-44.35 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.76 88.71 567.76s-891.56 137.5-993.58 128.63c-102.01-8.87-1042.36-128.63-1042.36-128.63l-541.14-146.37 57.66-638.73z"
+          opacity=".64"
+        />
+        <path
+          fill="url(#bot_gradient2)"
+          d="M-339.72 313.71S-38.1 96.37 236.91 162.91c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.58 128.64c-102.01-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z"
+          opacity=".18"
+        />
+        <path
+          fill="url(#bot_gradient3)"
+          d="M-556.34 194.47S-254.72-22.87 20.3 43.67c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.02-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.57 128.64C867.49 1099.34-72.86 979.57-72.86 979.57L-614 833.2l57.66-638.73z"
+          opacity=".18"
+        />
+        <path
+          fill="url(#bot_gradient4)"
+          d="M-323.82 379.3S-22.2 161.94 252.8 228.47c275 66.54 328.23 416.95 550.01 483.48 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.94 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.64c-102.02-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z"
+          opacity=".91"
+        />
+        <path
+          fill="url(#bot_gradient5)"
+          d="M-494.73 403.14S-193.11 185.8 81.9 252.34c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.93 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.63C929.1 1308.01-11.25 1188.24-11.25 1188.24l-541.14-146.37 57.66-638.73z"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="bot_gradient1"
+          x1="1872.87"
+          x2="573.95"
+          y1="602.05"
+          y2="-141.38"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9423FC" />
+          <stop offset=".51" stopColor="#FF70A5" />
+          <stop offset="1" stopColor="#FEAF6D" />
+        </linearGradient>
+        <linearGradient
+          id="bot_gradient2"
+          x1="1872.87"
+          x2="573.95"
+          y1="643.79"
+          y2="-99.64"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9423FC" />
+          <stop offset=".51" stopColor="#FF70A5" />
+          <stop offset="1" stopColor="#FEAF6D" />
+        </linearGradient>
+        <linearGradient
+          id="bot_gradient3"
+          x1="1574.79"
+          x2="448.43"
+          y1="459.89"
+          y2="-207.89"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9423FC" />
+          <stop offset=".51" stopColor="#FF70A5" />
+          <stop offset="1" stopColor="#FEAF6D" />
+        </linearGradient>
+        <linearGradient
+          id="bot_gradient4"
+          x1="1993.87"
+          x2="1553.41"
+          y1="1147.96"
+          y2="-218.23"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9423FC" />
+          <stop offset=".51" stopColor="#FF70A5" />
+          <stop offset="1" stopColor="#FEAF6D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default WavesBot
diff --git a/src/images/waves-top.svg b/src/images/waves-top.svg
deleted file mode 100644
index d91ab5f..0000000
--- a/src/images/waves-top.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg fill="none" viewBox="0 0 1825 859" width="1825" height="859" preserveAspectRatio="xMaxYMin meet">
-  <mask id="top_mask" width="1825" height="859" x="0" y="0" maskUnits="userSpaceOnUse">
-    <path fill="#C4C4C4" d="M0 0h1825v859H0z"/>
-  </mask>
-  <g mask="url(#top_mask)">
-    <path fill="url(#top_gradient1)" d="M2615.01 917.26s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8L2863.39 241l-248.38 676.26z"/>
-    <path fill="url(#top_gradient2)" d="M2615.01 879.5s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84S1117.14-595.12 1225.25-555.8c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z"/>
-    <path fill="url(#top_gradient3)" d="M2615.01 897.39s-390.49 148.08-669.53-4.12c-279.03-152.2-234.85-547.88-456.12-684.6-221.28-136.7-652.27 46.95-886.56 35.72C368.5 233.16 269.08 180.7 40.86-45.56c-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z" opacity=".68"/>
-    <path fill="url(#top_gradient4)" d="M1826.79 455.45s-182.14 69.07-312.28-1.92c-130.15-70.98-109.54-255.54-212.75-319.3-103.2-63.76-304.22 21.9-413.5 16.66-109.27-5.24-155.65-29.7-262.09-135.24-106.44-105.54 32.14-299.36 32.14-299.36s469.85 51.38 520.27 69.71c50.43 18.34 567.42 50.5 567.42 50.5l337.5 96-256.71 522.95z" opacity=".39"/>
-  </g>
-  <defs>
-    <linearGradient id="top_gradient1" x1="310.32" x2="945.33" y1="-84.55" y2="1544.99" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#345EFE"/>
-      <stop offset=".51" stop-color="#03B8FF"/>
-      <stop offset="1" stop-color="#00FCFF"/>
-    </linearGradient>
-    <linearGradient id="top_gradient2" x1="500.6" x2="1128.26" y1="11.42" y2="1481.54" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#345EFE"/>
-      <stop offset=".51" stop-color="#03B8FF"/>
-      <stop offset="1" stop-color="#00FCFF"/>
-    </linearGradient>
-    <linearGradient id="top_gradient3" x1="310.32" x2="945.33" y1="-104.42" y2="1525.11" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#345EFE"/>
-      <stop offset=".51" stop-color="#03B8FF"/>
-      <stop offset="1" stop-color="#00FCFF"/>
-    </linearGradient>
-    <linearGradient id="top_gradient4" x1="930.96" x2="1210.61" y1="106.95" y2="718.31" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#345EFE"/>
-      <stop offset=".51" stop-color="#03B8FF"/>
-      <stop offset="1" stop-color="#00FCFF"/>
-    </linearGradient>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/src/images/waves-top.tsx b/src/images/waves-top.tsx
new file mode 100644
index 0000000..d2fc4db
--- /dev/null
+++ b/src/images/waves-top.tsx
@@ -0,0 +1,97 @@
+import React from "react"
+
+const WavesTop: React.FC = (props) => {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 1825 859"
+      width="1825"
+      height="859"
+      preserveAspectRatio="xMaxYMin meet"
+      {...props}
+    >
+      <mask
+        id="top_mask"
+        width="1825"
+        height="859"
+        x="0"
+        y="0"
+        maskUnits="userSpaceOnUse"
+      >
+        <path fill="#C4C4C4" d="M0 0h1825v859H0z" />
+      </mask>
+      <g mask="url(#top_mask)">
+        <path
+          fill="url(#top_gradient1)"
+          d="M2615.01 917.26s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8L2863.39 241l-248.38 676.26z"
+        />
+        <path
+          fill="url(#top_gradient2)"
+          d="M2615.01 879.5s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84S1117.14-595.12 1225.25-555.8c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z"
+        />
+        <path
+          fill="url(#top_gradient3)"
+          d="M2615.01 897.39s-390.49 148.08-669.53-4.12c-279.03-152.2-234.85-547.88-456.12-684.6-221.28-136.7-652.27 46.95-886.56 35.72C368.5 233.16 269.08 180.7 40.86-45.56c-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z"
+          opacity=".68"
+        />
+        <path
+          fill="url(#top_gradient4)"
+          d="M1826.79 455.45s-182.14 69.07-312.28-1.92c-130.15-70.98-109.54-255.54-212.75-319.3-103.2-63.76-304.22 21.9-413.5 16.66-109.27-5.24-155.65-29.7-262.09-135.24-106.44-105.54 32.14-299.36 32.14-299.36s469.85 51.38 520.27 69.71c50.43 18.34 567.42 50.5 567.42 50.5l337.5 96-256.71 522.95z"
+          opacity=".39"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="top_gradient1"
+          x1="310.32"
+          x2="945.33"
+          y1="-84.55"
+          y2="1544.99"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#345EFE" />
+          <stop offset=".51" stopColor="#03B8FF" />
+          <stop offset="1" stopColor="#00FCFF" />
+        </linearGradient>
+        <linearGradient
+          id="top_gradient2"
+          x1="500.6"
+          x2="1128.26"
+          y1="11.42"
+          y2="1481.54"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#345EFE" />
+          <stop offset=".51" stopColor="#03B8FF" />
+          <stop offset="1" stopColor="#00FCFF" />
+        </linearGradient>
+        <linearGradient
+          id="top_gradient3"
+          x1="310.32"
+          x2="945.33"
+          y1="-104.42"
+          y2="1525.11"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#345EFE" />
+          <stop offset=".51" stopColor="#03B8FF" />
+          <stop offset="1" stopColor="#00FCFF" />
+        </linearGradient>
+        <linearGradient
+          id="top_gradient4"
+          x1="930.96"
+          x2="1210.61"
+          y1="106.95"
+          y2="718.31"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#345EFE" />
+          <stop offset=".51" stopColor="#03B8FF" />
+          <stop offset="1" stopColor="#00FCFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default WavesTop