diff --git a/src/components/githubIcon.svelte b/src/components/icons/githubIcon.svelte
similarity index 100%
rename from src/components/githubIcon.svelte
rename to src/components/icons/githubIcon.svelte
diff --git a/src/components/logo.svelte b/src/components/icons/logo.svelte
similarity index 100%
rename from src/components/logo.svelte
rename to src/components/icons/logo.svelte
diff --git a/src/components/icons/raycastIcon.svelte b/src/components/icons/raycastIcon.svelte
new file mode 100644
index 0000000..199b01a
--- /dev/null
+++ b/src/components/icons/raycastIcon.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let iconSize: number;
+  export let className: string;
+</script>
+
+<svg
+  width={iconSize || 28}
+  height={iconSize || 28}
+  class={className}
+  viewBox="0 0 28 28"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7 18.079V21L0 14L1.46 12.54L7 18.081V18.079ZM9.921 21H7L14 28L15.46 26.54L9.921 21ZM26.535 15.462L27.996 14L13.996 0L12.538 1.466L18.077 7.004H14.73L10.864 3.146L9.404 4.606L11.809 7.01H10.129V17.876H20.994V16.196L23.399 18.6L24.859 17.14L20.994 13.274V9.927L26.535 15.462ZM7.73 6.276L6.265 7.738L7.833 9.304L9.294 7.844L7.73 6.276ZM20.162 18.708L18.702 20.17L20.268 21.738L21.73 20.276L20.162 18.708ZM4.596 9.41L3.134 10.872L7 14.738V11.815L4.596 9.41ZM16.192 21.006H13.268L17.134 24.872L18.596 23.41L16.192 21.006Z"
+    fill="#FF6363"
+  />
+</svg>
diff --git a/src/components/reactIcon.svelte b/src/components/icons/reactIcon.svelte
similarity index 100%
rename from src/components/reactIcon.svelte
rename to src/components/icons/reactIcon.svelte
diff --git a/src/components/xIcon.svelte b/src/components/icons/xIcon.svelte
similarity index 100%
rename from src/components/xIcon.svelte
rename to src/components/icons/xIcon.svelte
diff --git a/src/components/warningNewApi.svelte b/src/components/warningNewApi.svelte
deleted file mode 100644
index c3aba1b..0000000
--- a/src/components/warningNewApi.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { BookIcon, Check, MegaphoneIcon, XIcon } from 'lucide-svelte';
-  import { browser } from '$app/environment';
-  import { buttonStyles } from '@/ui/styles';
-  import { cn } from '@/utils/cn';
-
-  let warning = false;
-  let warningName = 'svgl_warning_api_message';
-  const initialValue = browser ? window.localStorage.getItem(warningName) : true;
-</script>
-
-{#if !warning && !initialValue}
-  <div
-    class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100/60 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300 border-b border-neutral-200 dark:border-neutral-800"
-  >
-    <div class="flex items-center space-x-2">
-      <MegaphoneIcon
-        size={20}
-        strokeWidth={2}
-        class="mr-1 flex-shrink-0 text-rose-600 dark:text-rose-500 animate-pulse -rotate-12"
-      />
-      <p>
-        Starting <strong>August 24th</strong>, the API route <strong>svgl.app/api/*</strong> will no
-        longer be available. There is now a new route: <strong>api.svgl.app</strong>.
-      </p>
-    </div>
-    <div class="flex items-center space-x-2">
-      <a href="/api" class={cn(buttonStyles, 'h-10 text-sm')}>
-        <BookIcon size={14} strokeWidth={2} />
-        <span>Docs</span>
-      </a>
-      <button
-        class={cn(buttonStyles, 'h-10 text-sm')}
-        on:click={() => {
-          localStorage.setItem(warningName, 'true');
-          warning = true;
-        }}
-      >
-        <XIcon size={14} strokeWidth={2} />
-        <span>Close</span>
-      </button>
-    </div>
-  </div>
-{/if}