diff --git a/package-lock.json b/package-lock.json
index b7afa5e..c7fef47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3789,6 +3789,12 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
       "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
     },
+    "@types/uuid": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
+      "dev": true
+    },
     "@types/vfile": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/vfile/-/vfile-3.0.2.tgz",
@@ -5079,6 +5085,13 @@
         "better-queue-memory": "^1.0.1",
         "node-eta": "^0.9.0",
         "uuid": "^3.0.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        }
       }
     },
     "better-queue-memory": {
@@ -10329,6 +10342,11 @@
             "rimraf": "^3.0.0"
           }
         },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -11624,6 +11642,11 @@
             "proper-lockfile": "^4.1.1",
             "xdg-basedir": "^4.0.0"
           }
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         }
       }
     },
@@ -12047,6 +12070,11 @@
           "version": "0.7.3",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
           "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         }
       }
     },
@@ -19556,6 +19584,11 @@
           "version": "6.5.2",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
           "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         }
       }
     },
@@ -20509,6 +20542,11 @@
             "websocket-driver": ">=0.5.1"
           }
         },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        },
         "websocket-driver": {
           "version": "0.6.5",
           "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
@@ -21490,6 +21528,13 @@
       "requires": {
         "temp-dir": "^1.0.0",
         "uuid": "^3.0.1"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        }
       }
     },
     "term-size": {
@@ -22661,9 +22706,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ=="
     },
     "v8-compile-cache": {
       "version": "1.1.2",
@@ -23108,6 +23153,13 @@
       "requires": {
         "ansi-colors": "^3.0.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        }
       }
     },
     "webpack-merge": {
diff --git a/package.json b/package.json
index bf90d7c..c1c717c 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,8 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-scrollspy": "^3.4.2",
     "styled-components": "^5.1.1",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.3",
+    "uuid": "^8.3.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.15.0",
@@ -77,6 +78,7 @@
     "@types/react-helmet": "^6.0.0",
     "@types/react-scrollspy": "^3.3.2",
     "@types/styled-components": "^5.1.0",
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin-tslint": "^3.8.0",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.10.7",
diff --git a/src/hooks/useId.tsx b/src/hooks/useId.tsx
new file mode 100644
index 0000000..4363056
--- /dev/null
+++ b/src/hooks/useId.tsx
@@ -0,0 +1,14 @@
+import { v4 as uuidV4 } from "uuid"
+import { useState } from "react"
+
+export const useId = () => {
+  // Utilize useState instead of useMemo because React
+  // makes no guarantees that the memo store is durable
+  const [id] = useState(() => {
+    return uuidV4()
+  })
+
+  return id
+}
+
+export default useId
diff --git a/src/images/jetbrains-logo.tsx b/src/images/jetbrains-logo.tsx
index 2a8b620..192944e 100644
--- a/src/images/jetbrains-logo.tsx
+++ b/src/images/jetbrains-logo.tsx
@@ -1,22 +1,25 @@
 import React from "react"
+import useId from "../hooks/useId"
 
 const JetbrainsLogo: React.FC = (props) => {
+  const id = useId()
+
   return (
     <svg fill="none" viewBox="0 0 121 131" {...props}>
       <path
-        fill="url(#jetbrains1)"
+        fill={`url(#jetbrains1-${id})`}
         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)"
+        fill={`url(#jetbrains2-${id})`}
         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)"
+        fill={`url(#jetbrains3-${id})`}
         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)"
+        fill={`url(#jetbrains4-${id})`}
         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" />
@@ -30,7 +33,7 @@ const JetbrainsLogo: React.FC = (props) => {
       />
       <defs>
         <linearGradient
-          id="jetbrains1"
+          id={`jetbrains1-${id}`}
           x1="31.86"
           x2="110.26"
           y1="120.56"
@@ -41,7 +44,7 @@ const JetbrainsLogo: React.FC = (props) => {
           <stop offset="1" stopColor="#F37B3D" />
         </linearGradient>
         <linearGradient
-          id="jetbrains2"
+          id={`jetbrains2-${id}`}
           x1="48.38"
           x2="119.94"
           y1="6.91"
@@ -53,7 +56,7 @@ const JetbrainsLogo: React.FC = (props) => {
           <stop offset="1" stopColor="#F37B3D" />
         </linearGradient>
         <linearGradient
-          id="jetbrains3"
+          id={`jetbrains3-${id}`}
           x1="52.97"
           x2="10.56"
           y1="63.64"
@@ -66,7 +69,7 @@ const JetbrainsLogo: React.FC = (props) => {
           <stop offset=".96" stopColor="#ED3D7D" />
         </linearGradient>
         <linearGradient
-          id="jetbrains4"
+          id={`jetbrains4-${id}`}
           x1="52.2"
           x2="10.79"
           y1="3.7"
diff --git a/src/images/tph-logo.tsx b/src/images/tph-logo.tsx
index 5ac4ba6..b2d8332 100644
--- a/src/images/tph-logo.tsx
+++ b/src/images/tph-logo.tsx
@@ -1,10 +1,13 @@
 import React from "react"
+import useId from "../hooks/useId"
 
 const TPHLogo: React.FC = (props) => {
+  const id = useId()
+
   return (
     <svg fill="none" viewBox="0 0 473 573" {...props}>
       <path
-        fill="url(#logo_gradient)"
+        fill={`url(#logo_gradient-${id})`}
         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
@@ -17,7 +20,7 @@ const TPHLogo: React.FC = (props) => {
       />
       <defs>
         <linearGradient
-          id="logo_gradient"
+          id={`logo_gradient-${id}`}
           x1="250.28"
           x2="-161.47"
           y1="79.37"
diff --git a/src/images/waves-bot.tsx b/src/images/waves-bot.tsx
index ca01f4e..f571db3 100644
--- a/src/images/waves-bot.tsx
+++ b/src/images/waves-bot.tsx
@@ -1,6 +1,9 @@
 import React from "react"
+import useId from "../hooks/useId"
 
 const WavesBot: React.FC = (props) => {
+  const id = useId()
+
   return (
     <svg
       fill="none"
@@ -8,35 +11,35 @@ const WavesBot: React.FC = (props) => {
       viewBox="0 0 1825 862"
       {...props}
     >
-      <g mask="url(#bot_mask)">
+      <g mask={`url(#bot_mask-${id})`}>
         <path
-          fill="url(#bot_gradient1)"
+          fill={`url(#bot_gradient1-${id})`}
           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)"
+          fill={`url(#bot_gradient2-${id})`}
           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)"
+          fill={`url(#bot_gradient3-${id})`}
           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)"
+          fill={`url(#bot_gradient4-${id})`}
           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)"
+          fill={`url(#bot_gradient5-${id})`}
           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"
+          id={`bot_gradient1-${id}`}
           x1="1872.87"
           x2="573.95"
           y1="602.05"
@@ -48,7 +51,7 @@ const WavesBot: React.FC = (props) => {
           <stop offset="1" stopColor="#FEAF6D" />
         </linearGradient>
         <linearGradient
-          id="bot_gradient2"
+          id={`bot_gradient2-${id}`}
           x1="1872.87"
           x2="573.95"
           y1="643.79"
@@ -60,7 +63,7 @@ const WavesBot: React.FC = (props) => {
           <stop offset="1" stopColor="#FEAF6D" />
         </linearGradient>
         <linearGradient
-          id="bot_gradient3"
+          id={`bot_gradient3-${id}`}
           x1="1574.79"
           x2="448.43"
           y1="459.89"
@@ -72,7 +75,7 @@ const WavesBot: React.FC = (props) => {
           <stop offset="1" stopColor="#FEAF6D" />
         </linearGradient>
         <linearGradient
-          id="bot_gradient4"
+          id={`bot_gradient4-${id}`}
           x1="1993.87"
           x2="1553.41"
           y1="1147.96"
diff --git a/src/images/waves-top.tsx b/src/images/waves-top.tsx
index d2fc4db..a0898f4 100644
--- a/src/images/waves-top.tsx
+++ b/src/images/waves-top.tsx
@@ -1,6 +1,9 @@
 import React from "react"
+import useId from "../hooks/useId"
 
 const WavesTop: React.FC = (props) => {
+  const id = useId()
+
   return (
     <svg
       fill="none"
@@ -11,7 +14,7 @@ const WavesTop: React.FC = (props) => {
       {...props}
     >
       <mask
-        id="top_mask"
+        id={`top_mask-${id}`}
         width="1825"
         height="859"
         x="0"
@@ -20,29 +23,29 @@ const WavesTop: React.FC = (props) => {
       >
         <path fill="#C4C4C4" d="M0 0h1825v859H0z" />
       </mask>
-      <g mask="url(#top_mask)">
+      <g mask={`url(#top_mask-${id})`}>
         <path
-          fill="url(#top_gradient1)"
+          fill={`url(#top_gradient1-${id})`}
           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)"
+          fill={`url(#top_gradient2-${id})`}
           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)"
+          fill={`url(#top_gradient3-${id})`}
           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)"
+          fill={`url(#top_gradient4-${id})`}
           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"
+          id={`top_gradient1-${id}`}
           x1="310.32"
           x2="945.33"
           y1="-84.55"
@@ -54,7 +57,7 @@ const WavesTop: React.FC = (props) => {
           <stop offset="1" stopColor="#00FCFF" />
         </linearGradient>
         <linearGradient
-          id="top_gradient2"
+          id={`top_gradient2-${id}`}
           x1="500.6"
           x2="1128.26"
           y1="11.42"
@@ -66,7 +69,7 @@ const WavesTop: React.FC = (props) => {
           <stop offset="1" stopColor="#00FCFF" />
         </linearGradient>
         <linearGradient
-          id="top_gradient3"
+          id={`top_gradient3-${id}`}
           x1="310.32"
           x2="945.33"
           y1="-104.42"
@@ -78,7 +81,7 @@ const WavesTop: React.FC = (props) => {
           <stop offset="1" stopColor="#00FCFF" />
         </linearGradient>
         <linearGradient
-          id="top_gradient4"
+          id={`top_gradient4-${id}`}
           x1="930.96"
           x2="1210.61"
           y1="106.95"