diff --git a/web/components/Icons.tsx b/web/components/Icons.tsx
index 09ce2c6..2215c48 100644
--- a/web/components/Icons.tsx
+++ b/web/components/Icons.tsx
@@ -23,3 +23,428 @@ export const GitHubIcon: FC<Props> = ({ className, ...otherProps }) => {
     </svg>
   )
 }
+
+export const Logo: FC<Props> = ({ className, ...otherProps }) => {
+  return (
+    <svg
+      className={className}
+      {...otherProps}
+      xmlns="http://www.w3.org/2000/svg"
+      width="65"
+      height="65"
+      fill="none"
+      viewBox="0 0 65 65"
+    >
+      <g clipPath="url(#clip0_1_3)">
+        <rect width="65" height="65" fill="#1E2533" />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="8.415"
+          y="40.601"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="-7.215"
+          y="18.459"
+          fill="#E06B45"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x=".74"
+          y="29.573"
+          fill="#E7B24D"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="24.639"
+          y="7.324"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="35.276"
+          height="7.956"
+          x="-15.284"
+          y="-3.81"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="25.746"
+          height="7.956"
+          x="47.658"
+          y="-3.81"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="7.118"
+          y="62.797"
+          fill="#E7B24D"
+          rx="2.701"
+        />
+        <rect
+          width="35.594"
+          height="7.956"
+          x="47.658"
+          y="62.797"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="-7.609"
+          y="40.601"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="50.352"
+          y="40.601"
+          fill="#E7B24D"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="23.411"
+          y="-3.81"
+          fill="#E06B45"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="50.352"
+          y="18.459"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x=".74"
+          y="7.324"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="23.411"
+          y="62.797"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="-17.13"
+          y="62.797"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="40.583"
+          y="7.324"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="50.352"
+          y="29.573"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="14.874"
+          y="51.683"
+          fill="#2E3E5C"
+          rx="2.701"
+        />
+        <rect
+          width="20.83"
+          height="7.956"
+          x="38.853"
+          y="51.683"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="-1.15"
+          y="51.683"
+          fill="#43B1E0"
+          rx="2.701"
+        />
+        <rect
+          width="12.874"
+          height="7.956"
+          x="62.833"
+          y="51.683"
+          fill="#E06B45"
+          rx="2.701"
+        />
+        <path
+          fill="#F6FBFF"
+          d="M17.2924 19.3221V36.3622C17.2924 37.1081 17.8971 37.7128 18.6431 37.7128H23.887C24.633 37.7128 25.2377 37.1081 25.2377 36.3622L25.2377 30.2395C25.2377 29.7277 25.9102 29.5389 26.1766 29.9758L37.0602 47.826C37.3054 48.2282 37.7424 48.4735 38.2134 48.4735H45.1273C46.2076 48.4735 46.8507 47.2683 46.2493 46.3709L27.6167 18.5701C27.366 18.1959 26.9452 17.9714 26.4948 17.9714H18.6431C17.8971 17.9714 17.2924 18.5761 17.2924 19.3221Z"
+        />
+        <path
+          fill="#F6FBFF"
+          d="M39.5502 18.0127H44.8661C45.612 18.0127 46.2167 18.6174 46.2167 19.3633V34.9848C46.2167 35.9914 44.9077 36.3818 44.3563 35.5397L38.6134 26.7695C38.3434 26.3572 38.1996 25.875 38.1996 25.3822V19.3633C38.1996 18.6174 38.8043 18.0127 39.5502 18.0127Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_3">
+          <rect width="65" height="65" fill="#fff" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export const VsCodeIcon: FC<Props> = ({ className, ...otherProps }) => {
+  return (
+    <svg
+      className={className}
+      {...otherProps}
+      xmlns="http://www.w3.org/2000/svg"
+      width="80"
+      height="80"
+      fill="none"
+      viewBox="0 0 100 100"
+    >
+      <mask
+        id="mask0"
+        width="100"
+        height="100"
+        x="0"
+        y="0"
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+      >
+        <path
+          fill="#fff"
+          fillRule="evenodd"
+          d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
+          clipRule="evenodd"
+        />
+      </mask>
+      <g mask="url(#mask0)">
+        <path
+          fill="#0065A9"
+          d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
+        />
+        <g filter="url(#filter0_d)">
+          <path
+            fill="#007ACC"
+            d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
+          />
+        </g>
+        <g filter="url(#filter1_d)">
+          <path
+            fill="#1F9CF0"
+            d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
+          />
+        </g>
+        <g style={{ mixBlendMode: 'overlay' }} opacity=".25">
+          <path
+            fill="url(#paint0_linear)"
+            fillRule="evenodd"
+            d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
+            clipRule="evenodd"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d"
+          width="116.727"
+          height="92.246"
+          x="-8.394"
+          y="15.829"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.167" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+          />
+          <feBlend
+            in2="BackgroundImageFix"
+            mode="overlay"
+            result="effect1_dropShadow"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow"
+            mode="normal"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_d"
+          width="47.917"
+          height="116.151"
+          x="60.417"
+          y="-8.076"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.167" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+          />
+          <feBlend
+            in2="BackgroundImageFix"
+            mode="overlay"
+            result="effect1_dropShadow"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow"
+            mode="normal"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear"
+          x1="49.939"
+          x2="49.939"
+          y1=".258"
+          y2="99.742"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#fff" />
+          <stop offset="1" stopColor="#fff" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export const JetBrainsIcon: FC<Props> = ({ className, ...otherProps }) => {
+  return (
+    <svg
+      className={className}
+      {...otherProps}
+      xmlns="http://www.w3.org/2000/svg"
+      width="80"
+      height="80"
+      viewBox="0 0 180 180"
+    >
+      <linearGradient
+        id="a"
+        x1="32.64"
+        x2="82.77"
+        y1="61.16"
+        y2="85.54"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset=".21" stopColor="#fe2857" />
+        <stop offset="1" stopColor="#293896" />
+      </linearGradient>
+      <linearGradient
+        id="b"
+        x1="17.38"
+        x2="82.95"
+        y1="69.86"
+        y2="21.23"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#fe2857" />
+        <stop offset=".01" stopColor="#fe2857" />
+        <stop offset=".86" stopColor="#ff318c" />
+      </linearGradient>
+      <linearGradient
+        id="c"
+        x1="74.17"
+        x2="160.27"
+        y1="21.58"
+        y2="99.76"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset=".02" stopColor="#ff318c" />
+        <stop offset=".21" stopColor="#fe2857" />
+        <stop offset=".86" stopColor="#fdb60d" />
+      </linearGradient>
+      <linearGradient
+        id="d"
+        x1="155.46"
+        x2="55.07"
+        y1="89.8"
+        y2="158.9"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset=".01" stopColor="#fdb60d" />
+        <stop offset=".86" stopColor="#fcf84a" />
+      </linearGradient>
+      <path
+        fill="url(#a)"
+        d="m81.56 83.71-41.35-35a15 15 0 1 0 -14.47 25.7h.15l.39.12 52.16 15.89a3.53 3.53 0 0 0 1.18.21 3.73 3.73 0 0 0 1.93-6.91z"
+      />
+      <path
+        fill="url(#b)"
+        d="m89.85 25.93a10.89 10.89 0 0 0 -16.85-9.18l-50.5 30.66a15 15 0 1 0 17.9 24l45.27-36.89.36-.3a10.93 10.93 0 0 0 3.82-8.29z"
+      />
+      <path
+        fill="url(#c)"
+        d="m163.29 92-76.62-73.79a10.91 10.91 0 1 0 -14.81 16l.14.12 81.4 68.58a7.36 7.36 0 0 0 12.09-5.65 7.39 7.39 0 0 0 -2.2-5.26z"
+      />
+      <path
+        fill="url(#d)"
+        d="m165.5 97.29a7.35 7.35 0 0 0 -11.67-6l-92.71 45.3a15 15 0 1 0 15.48 25.59l85.73-58.84a7.35 7.35 0 0 0 3.17-6.05z"
+      />
+      <path d="m60 60h60v60h-60z" />
+      <g fill="#fff">
+        <path d="m66.53 108.75h22.5v3.75h-22.5z" />
+        <path d="m65.59 75.47 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.45 1.06-1.32v-5.92h2.58v5.94a3.44 3.44 0 0 1 -.92 2.63 3.52 3.52 0 0 1 -2.57 1 3.84 3.84 0 0 1 -3.29-1.62z" />
+        <path d="m73.53 67.52h7.53v2.19h-5v1.43h4.49v2h-4.45v1.49h5v2.2h-7.6z" />
+        <path d="m84.73 69.79h-2.8v-2.27h8.21v2.27h-2.81v7.09h-2.6z" />
+        <path d="m66.63 80.58h4.42a3.47 3.47 0 0 1 2.55.83 2.09 2.09 0 0 1 .61 1.52 2.18 2.18 0 0 1 -1.45 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.69-1.31 2.69-3.55 2.69h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.25c.78 0 1.24-.27 1.24-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86-.02-.53-.4-.87-1.27-.87z" />
+        <path d="m75.45 80.58h4.15a4.14 4.14 0 0 1 3.05 1 2.92 2.92 0 0 1 .83 2.18 3 3 0 0 1 -1.93 2.89l2.24 3.35h-3l-1.89-2.84h-.87v2.84h-2.6zm4 4.5c.87 0 1.4-.43 1.4-1.12 0-.75-.55-1.13-1.41-1.13h-1.39v2.27z" />
+        <path d="m87.09 80.51h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.74h-2.71zm2.28 5.73-1.05-2.65-1.06 2.65z" />
+        <path d="m94 80.55h2.6v9.37h-2.6z" />
+        <path d="m97.56 80.55h2.44l3.37 5v-5h2.57v9.37h-2.27l-3.53-5.14v5.14h-2.58z" />
+        <path d="m106.37 88.53 1.44-1.73a4.86 4.86 0 0 0 3 1.13c.71 0 1.08-.25 1.08-.65 0-.41-.3-.61-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.38-3 3.63-3a5.88 5.88 0 0 1 3.85 1.25l-1.25 1.78a4.56 4.56 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .43.32.62 1.63.91 2.15.47 3.48 1.17 3.48 2.92 0 1.91-1.51 3-3.78 3a6.56 6.56 0 0 1 -4.4-1.45z" />
+      </g>
+      <path fill="none" d="m0 0h180v180h-180z" />
+    </svg>
+  )
+}
diff --git a/web/components/InstallCard.tsx b/web/components/InstallCard.tsx
index fe7628a..a454ef8 100644
--- a/web/components/InstallCard.tsx
+++ b/web/components/InstallCard.tsx
@@ -2,18 +2,26 @@ import Image from 'next/image'
 import React from 'react'
 
 interface PageProps {
-  image: StaticImageData
+  // image: StaticImageData
+  Icon: any
   name: string
   enabled: boolean
   link: string
 }
 
-export default function InstallCard({ image, name, enabled, link }: PageProps) {
+export default function InstallCard({
+  // image,
+  name,
+  enabled,
+  link,
+  Icon,
+}: PageProps) {
   return (
     <div className="flex w-full flex-col justify-between rounded-lg bg-[#22222E] p-5 transition-all hover:border-2 hover:border-[#24D1DC] md:h-32 md:flex-row md:items-center md:px-10">
       {/* IDE details */}
       <div className="flex items-center">
-        <Image src={image} height={80} width={80} />
+        {/* <Image alt={name} src={image} height={80} width={80} /> */}
+        <Icon height={80} width={80} />
         <div className="ml-8 text-2xl">{name}</div>
       </div>
       {/* Button links */}
diff --git a/web/components/Installation.tsx b/web/components/Installation.tsx
index 9b62ffb..4d37840 100644
--- a/web/components/Installation.tsx
+++ b/web/components/Installation.tsx
@@ -1,9 +1,8 @@
-import React from 'react'
-import vscodelogo from '../public/vscode.svg'
-import jetbrainslogo from '../public/jetbrains.svg'
+import React, { FC } from 'react'
+import { JetBrainsIcon, VsCodeIcon } from './Icons'
 import InstallCard from './InstallCard'
 
-export default function Installation() {
+const Installation: FC = () => {
   return (
     <div className="mb-20 flex flex-col items-center justify-center p-5 lg:h-screen xl:p-0">
       <div className="relative text-5xl font-bold">
@@ -13,13 +12,13 @@ export default function Installation() {
       </div>
       <div className="mt-28 grid w-full max-w-4xl grid-cols-1 gap-10">
         <InstallCard
-          image={vscodelogo}
+          Icon={VsCodeIcon}
           enabled={true}
           link="https://marketplace.visualstudio.com/items?itemName=AvneeshAgarwal.react-nextjs-snippets"
           name="Visual Studio Code"
         />
         <InstallCard
-          image={jetbrainslogo}
+          Icon={JetBrainsIcon}
           enabled={false}
           link="#"
           name="Jetbrains IDE"
@@ -28,3 +27,5 @@ export default function Installation() {
     </div>
   )
 }
+
+export default Installation
diff --git a/web/components/Navbar.tsx b/web/components/Navbar.tsx
index ab480e5..a4e26cc 100644
--- a/web/components/Navbar.tsx
+++ b/web/components/Navbar.tsx
@@ -1,20 +1,14 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
-import { GitHubIcon } from './Icons'
+import { GitHubIcon, Logo } from './Icons'
 
 export default function Navbar() {
   return (
     <div className="absolute top-0 z-20 flex h-20 w-full items-center justify-between p-7 xl:p-0">
       <div className="flex items-center">
         <Link href="/">
-          <Image
-            src="/logo.svg"
-            alt="React and Next.js Snippets Logo"
-            height={48}
-            width={48}
-            className="h-12 w-12 cursor-pointer rounded-md"
-          />
+          <Logo className="h-10 w-10" />
         </Link>
         <span className="ml-5 text-lg font-medium">
           React &amp; Next.js Snippets
diff --git a/web/public/jetbrains.svg b/web/public/jetbrains.svg
deleted file mode 100644
index 90259fd..0000000
--- a/web/public/jetbrains.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="180" viewBox="0 0 180 180"><linearGradient id="a" x1="32.64" x2="82.77" y1="61.16" y2="85.54" gradientUnits="userSpaceOnUse"><stop offset=".21" stop-color="#fe2857"/><stop offset="1" stop-color="#293896"/></linearGradient><linearGradient id="b" x1="17.38" x2="82.95" y1="69.86" y2="21.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe2857"/><stop offset=".01" stop-color="#fe2857"/><stop offset=".86" stop-color="#ff318c"/></linearGradient><linearGradient id="c" x1="74.17" x2="160.27" y1="21.58" y2="99.76" gradientUnits="userSpaceOnUse"><stop offset=".02" stop-color="#ff318c"/><stop offset=".21" stop-color="#fe2857"/><stop offset=".86" stop-color="#fdb60d"/></linearGradient><linearGradient id="d" x1="155.46" x2="55.07" y1="89.8" y2="158.9" gradientUnits="userSpaceOnUse"><stop offset=".01" stop-color="#fdb60d"/><stop offset=".86" stop-color="#fcf84a"/></linearGradient><path fill="url(#a)" d="m81.56 83.71-41.35-35a15 15 0 1 0 -14.47 25.7h.15l.39.12 52.16 15.89a3.53 3.53 0 0 0 1.18.21 3.73 3.73 0 0 0 1.93-6.91z"/><path fill="url(#b)" d="m89.85 25.93a10.89 10.89 0 0 0 -16.85-9.18l-50.5 30.66a15 15 0 1 0 17.9 24l45.27-36.89.36-.3a10.93 10.93 0 0 0 3.82-8.29z"/><path fill="url(#c)" d="m163.29 92-76.62-73.79a10.91 10.91 0 1 0 -14.81 16l.14.12 81.4 68.58a7.36 7.36 0 0 0 12.09-5.65 7.39 7.39 0 0 0 -2.2-5.26z"/><path fill="url(#d)" d="m165.5 97.29a7.35 7.35 0 0 0 -11.67-6l-92.71 45.3a15 15 0 1 0 15.48 25.59l85.73-58.84a7.35 7.35 0 0 0 3.17-6.05z"/><path d="m60 60h60v60h-60z"/><g fill="#fff"><path d="m66.53 108.75h22.5v3.75h-22.5z"/><path d="m65.59 75.47 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.45 1.06-1.32v-5.92h2.58v5.94a3.44 3.44 0 0 1 -.92 2.63 3.52 3.52 0 0 1 -2.57 1 3.84 3.84 0 0 1 -3.29-1.62z"/><path d="m73.53 67.52h7.53v2.19h-5v1.43h4.49v2h-4.45v1.49h5v2.2h-7.6z"/><path d="m84.73 69.79h-2.8v-2.27h8.21v2.27h-2.81v7.09h-2.6z"/><path d="m66.63 80.58h4.42a3.47 3.47 0 0 1 2.55.83 2.09 2.09 0 0 1 .61 1.52 2.18 2.18 0 0 1 -1.45 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.69-1.31 2.69-3.55 2.69h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.25c.78 0 1.24-.27 1.24-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86-.02-.53-.4-.87-1.27-.87z"/><path d="m75.45 80.58h4.15a4.14 4.14 0 0 1 3.05 1 2.92 2.92 0 0 1 .83 2.18 3 3 0 0 1 -1.93 2.89l2.24 3.35h-3l-1.89-2.84h-.87v2.84h-2.6zm4 4.5c.87 0 1.4-.43 1.4-1.12 0-.75-.55-1.13-1.41-1.13h-1.39v2.27z"/><path d="m87.09 80.51h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.74h-2.71zm2.28 5.73-1.05-2.65-1.06 2.65z"/><path d="m94 80.55h2.6v9.37h-2.6z"/><path d="m97.56 80.55h2.44l3.37 5v-5h2.57v9.37h-2.27l-3.53-5.14v5.14h-2.58z"/><path d="m106.37 88.53 1.44-1.73a4.86 4.86 0 0 0 3 1.13c.71 0 1.08-.25 1.08-.65 0-.41-.3-.61-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.38-3 3.63-3a5.88 5.88 0 0 1 3.85 1.25l-1.25 1.78a4.56 4.56 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .43.32.62 1.63.91 2.15.47 3.48 1.17 3.48 2.92 0 1.91-1.51 3-3.78 3a6.56 6.56 0 0 1 -4.4-1.45z"/></g><path fill="none" d="m0 0h180v180h-180z"/></svg>
\ No newline at end of file
diff --git a/web/public/logo.svg b/web/public/logo.svg
index 3a84a79..2217f2a 100644
--- a/web/public/logo.svg
+++ b/web/public/logo.svg
@@ -1 +1,33 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" fill="none" viewBox="0 0 65 65"><g clip-path="url(#clip0_1_3)"><rect width="65" height="65" fill="#1E2533"/><rect width="20.83" height="7.956" x="8.415" y="40.601" fill="#43B1E0" rx="2.701"/><rect width="20.83" height="7.956" x="-7.215" y="18.459" fill="#E06B45" rx="2.701"/><rect width="12.874" height="7.956" x=".74" y="29.573" fill="#E7B24D" rx="2.701"/><rect width="12.874" height="7.956" x="24.639" y="7.324" fill="#2E3E5C" rx="2.701"/><rect width="35.276" height="7.956" x="-15.284" y="-3.81" fill="#2E3E5C" rx="2.701"/><rect width="25.746" height="7.956" x="47.658" y="-3.81" fill="#2E3E5C" rx="2.701"/><rect width="12.874" height="7.956" x="7.118" y="62.797" fill="#E7B24D" rx="2.701"/><rect width="35.594" height="7.956" x="47.658" y="62.797" fill="#43B1E0" rx="2.701"/><rect width="12.874" height="7.956" x="-7.609" y="40.601" fill="#2E3E5C" rx="2.701"/><rect width="12.874" height="7.956" x="50.352" y="40.601" fill="#E7B24D" rx="2.701"/><rect width="20.83" height="7.956" x="23.411" y="-3.81" fill="#E06B45" rx="2.701"/><rect width="12.874" height="7.956" x="50.352" y="18.459" fill="#2E3E5C" rx="2.701"/><rect width="20.83" height="7.956" x=".74" y="7.324" fill="#43B1E0" rx="2.701"/><rect width="20.83" height="7.956" x="23.411" y="62.797" fill="#2E3E5C" rx="2.701"/><rect width="20.83" height="7.956" x="-17.13" y="62.797" fill="#2E3E5C" rx="2.701"/><rect width="20.83" height="7.956" x="40.583" y="7.324" fill="#43B1E0" rx="2.701"/><rect width="20.83" height="7.956" x="50.352" y="29.573" fill="#43B1E0" rx="2.701"/><rect width="20.83" height="7.956" x="14.874" y="51.683" fill="#2E3E5C" rx="2.701"/><rect width="20.83" height="7.956" x="38.853" y="51.683" fill="#43B1E0" rx="2.701"/><rect width="12.874" height="7.956" x="-1.15" y="51.683" fill="#43B1E0" rx="2.701"/><rect width="12.874" height="7.956" x="62.833" y="51.683" fill="#E06B45" rx="2.701"/><path fill="#F6FBFF" d="M17.2924 19.3221V36.3622C17.2924 37.1081 17.8971 37.7128 18.6431 37.7128H23.887C24.633 37.7128 25.2377 37.1081 25.2377 36.3622L25.2377 30.2395C25.2377 29.7277 25.9102 29.5389 26.1766 29.9758L37.0602 47.826C37.3054 48.2282 37.7424 48.4735 38.2134 48.4735H45.1273C46.2076 48.4735 46.8507 47.2683 46.2493 46.3709L27.6167 18.5701C27.366 18.1959 26.9452 17.9714 26.4948 17.9714H18.6431C17.8971 17.9714 17.2924 18.5761 17.2924 19.3221Z"/><path fill="#F6FBFF" d="M39.5502 18.0127H44.8661C45.612 18.0127 46.2167 18.6174 46.2167 19.3633V34.9848C46.2167 35.9914 44.9077 36.3818 44.3563 35.5397L38.6134 26.7695C38.3434 26.3572 38.1996 25.875 38.1996 25.3822V19.3633C38.1996 18.6174 38.8043 18.0127 39.5502 18.0127Z"/></g><defs><clipPath id="clip0_1_3"><rect width="65" height="65" fill="#fff"/></clipPath></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" fill="none" viewBox="0 0 65 65">
+    <g clip-path="url(#clip0_1_3)">
+        <rect width="65" height="65" fill="#1E2533" />
+        <rect width="20.83" height="7.956" x="8.415" y="40.601" fill="#43B1E0" rx="2.701" />
+        <rect width="20.83" height="7.956" x="-7.215" y="18.459" fill="#E06B45" rx="2.701" />
+        <rect width="12.874" height="7.956" x=".74" y="29.573" fill="#E7B24D" rx="2.701" />
+        <rect width="12.874" height="7.956" x="24.639" y="7.324" fill="#2E3E5C" rx="2.701" />
+        <rect width="35.276" height="7.956" x="-15.284" y="-3.81" fill="#2E3E5C" rx="2.701" />
+        <rect width="25.746" height="7.956" x="47.658" y="-3.81" fill="#2E3E5C" rx="2.701" />
+        <rect width="12.874" height="7.956" x="7.118" y="62.797" fill="#E7B24D" rx="2.701" />
+        <rect width="35.594" height="7.956" x="47.658" y="62.797" fill="#43B1E0" rx="2.701" />
+        <rect width="12.874" height="7.956" x="-7.609" y="40.601" fill="#2E3E5C" rx="2.701" />
+        <rect width="12.874" height="7.956" x="50.352" y="40.601" fill="#E7B24D" rx="2.701" />
+        <rect width="20.83" height="7.956" x="23.411" y="-3.81" fill="#E06B45" rx="2.701" />
+        <rect width="12.874" height="7.956" x="50.352" y="18.459" fill="#2E3E5C" rx="2.701" />
+        <rect width="20.83" height="7.956" x=".74" y="7.324" fill="#43B1E0" rx="2.701" />
+        <rect width="20.83" height="7.956" x="23.411" y="62.797" fill="#2E3E5C" rx="2.701" />
+        <rect width="20.83" height="7.956" x="-17.13" y="62.797" fill="#2E3E5C" rx="2.701" />
+        <rect width="20.83" height="7.956" x="40.583" y="7.324" fill="#43B1E0" rx="2.701" />
+        <rect width="20.83" height="7.956" x="50.352" y="29.573" fill="#43B1E0" rx="2.701" />
+        <rect width="20.83" height="7.956" x="14.874" y="51.683" fill="#2E3E5C" rx="2.701" />
+        <rect width="20.83" height="7.956" x="38.853" y="51.683" fill="#43B1E0" rx="2.701" />
+        <rect width="12.874" height="7.956" x="-1.15" y="51.683" fill="#43B1E0" rx="2.701" />
+        <rect width="12.874" height="7.956" x="62.833" y="51.683" fill="#E06B45" rx="2.701" />
+        <path fill="#F6FBFF" d="M17.2924 19.3221V36.3622C17.2924 37.1081 17.8971 37.7128 18.6431 37.7128H23.887C24.633 37.7128 25.2377 37.1081 25.2377 36.3622L25.2377 30.2395C25.2377 29.7277 25.9102 29.5389 26.1766 29.9758L37.0602 47.826C37.3054 48.2282 37.7424 48.4735 38.2134 48.4735H45.1273C46.2076 48.4735 46.8507 47.2683 46.2493 46.3709L27.6167 18.5701C27.366 18.1959 26.9452 17.9714 26.4948 17.9714H18.6431C17.8971 17.9714 17.2924 18.5761 17.2924 19.3221Z" />
+        <path fill="#F6FBFF" d="M39.5502 18.0127H44.8661C45.612 18.0127 46.2167 18.6174 46.2167 19.3633V34.9848C46.2167 35.9914 44.9077 36.3818 44.3563 35.5397L38.6134 26.7695C38.3434 26.3572 38.1996 25.875 38.1996 25.3822V19.3633C38.1996 18.6174 38.8043 18.0127 39.5502 18.0127Z" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1_3">
+            <rect width="65" height="65" fill="#fff" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/web/public/vscode.svg b/web/public/vscode.svg
deleted file mode 100644
index 919c3bc..0000000
--- a/web/public/vscode.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none" viewBox="0 0 100 100"><mask id="mask0" width="100" height="100" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" clip-rule="evenodd"/></mask><g mask="url(#mask0)"><path fill="#0065A9" d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"/><g filter="url(#filter0_d)"><path fill="#007ACC" d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"/></g><g filter="url(#filter1_d)"><path fill="#1F9CF0" d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"/></g><g style="mix-blend-mode:overlay" opacity=".25"><path fill="url(#paint0_linear)" fill-rule="evenodd" d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z" clip-rule="evenodd"/></g></g><defs><filter id="filter0_d" width="116.727" height="92.246" x="-8.394" y="15.829" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.167"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><filter id="filter1_d" width="47.917" height="116.151" x="60.417" y="-8.076" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.167"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><linearGradient id="paint0_linear" x1="49.939" x2="49.939" y1=".258" y2="99.742" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>
\ No newline at end of file