diff --git a/docs/docs/getting-started/getting-started.md b/docs/docs/getting-started/getting-started.md
index bc2a8531..ebe2b657 100644
--- a/docs/docs/getting-started/getting-started.md
+++ b/docs/docs/getting-started/getting-started.md
@@ -87,7 +87,7 @@ Refer to the following sections for detailed instructions on setting up API keys
 import DocCard from '@site/src/components/global/DocCard';
 import { RiOpenaiFill } from "react-icons/ri";
 import { VscAzure } from "react-icons/vsc";
-import { SiOllama } from "react-icons/si";
+import { SiOllama, SiAnthropic } from "react-icons/si";
 
 <DocCard
 Icon={VscAzure}
@@ -105,6 +105,7 @@ title="OpenAI"
 link="/flock/docs/getting-started/openai"
 />
 <DocCard
+Icon={SiAnthropic}
 title="Anthropic / Claude"
 link="/flock/docs/getting-started/anthropic"
 />
diff --git a/docs/src/components/global/DocCard.tsx b/docs/src/components/global/DocCard.tsx
index 02570da6..f55c2499 100644
--- a/docs/src/components/global/DocCard.tsx
+++ b/docs/src/components/global/DocCard.tsx
@@ -1,14 +1,24 @@
 import React from "react";
 import type { IconType } from "react-icons/lib";
 
-export default function DocCard(props: { Icon: IconType; title: string; link: string }) {
+type DocCardProps = {
+    Icon?: IconType;
+    title: string;
+    link: string;
+};
+
+export default function DocCard(props: DocCardProps) {
     const { Icon, title, link } = props;
 
     return (
         <>
-            <div onClick={() => window.open(link, "_self")}
-                className="my-2 flex gap-2 cursor-pointer rounded-2xl items-center text-lg font-bold border-solid border-[1px] border-[#FF9128] p-4 hover:shadow-[0_0_10px_#FF9128] hover:shadow-orange-500/50 transition-all duration-300 ease-in-out">
-                <Icon className="text-[#FF9128] text-3xl rounded-lg border-solid border-[1px] border-[#FF9128] p-1" />
+            <div
+                onClick={() => window.open(link, "_self")}
+                className="my-2 flex gap-2 cursor-pointer rounded-2xl items-center text-lg font-bold border-solid border-[1px] border-[#FF9128] p-4 hover:shadow-[0_0_10px_#FF9128] hover:shadow-orange-500/50 transition-all duration-300 ease-in-out"
+            >
+                {Icon && (
+                    <Icon className="text-[#FF9128] text-3xl rounded-lg border-solid border-[1px] border-[#FF9128] p-1" />
+                )}
                 {title}
             </div>
         </>