diff --git a/apps/engine/public/img/discord.svg b/apps/engine/public/img/discord.svg
new file mode 100644
index 00000000..7f9a31f0
--- /dev/null
+++ b/apps/engine/public/img/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
\ No newline at end of file
diff --git a/apps/engine/src/app/(home)/layout.tsx b/apps/engine/src/app/(home)/layout.tsx
index e16d24a3..5d77bdaa 100644
--- a/apps/engine/src/app/(home)/layout.tsx
+++ b/apps/engine/src/app/(home)/layout.tsx
@@ -13,7 +13,7 @@ export default function Layout({
   return (
     <>
       <div className="landing-bg" />
-      <header className="sticky top-0 w-full flex justify-center">
+      <header className="sticky top-0 w-full flex justify-center z-10">
         <HomeNavigation />
       </header>
       <main className="flex min-h-screen w-full flex-col items-center py-2">
diff --git a/apps/engine/src/components/banners/community-banner/community-banner.tsx b/apps/engine/src/components/banners/community-banner/community-banner.tsx
index 5447340f..435dbd67 100644
--- a/apps/engine/src/components/banners/community-banner/community-banner.tsx
+++ b/apps/engine/src/components/banners/community-banner/community-banner.tsx
@@ -1,7 +1,6 @@
 import { Icons, Text } from '@ds-project/components';
 import Link from 'next/link';
 import Image from 'next/image';
-import discordIcon from './discord-icon.png';
 import { Button } from '@/components/button';
 import { config } from '@/config';
 
@@ -9,7 +8,7 @@ export function CommunityBanner() {
   return (
     <article
       id="community"
-      className="relative overflow-hidden flex flex-col gap-4 border border-zinc-600 rounded-md p-10 bg-zinc-900 text-zinc-50"
+      className="w-full relative overflow-hidden flex flex-col gap-4 border border-zinc-600 rounded-md p-10 bg-zinc-900 text-zinc-50"
     >
       <header>
         <Text size="lg">
@@ -29,9 +28,11 @@ export function CommunityBanner() {
         </Button>
       </div>
       <Image
-        src={discordIcon}
+        src="/img/discord.svg"
         alt=""
-        className="object-cover absolute size-64 -right-0 -top-10"
+        width={128}
+        height={97}
+        className="absolute -right-14 -bottom-12 size-80 opacity-35"
       />
     </article>
   );
diff --git a/apps/engine/src/components/banners/community-banner/discord-icon.png b/apps/engine/src/components/banners/community-banner/discord-icon.png
deleted file mode 100644
index b5e59902..00000000
Binary files a/apps/engine/src/components/banners/community-banner/discord-icon.png and /dev/null differ
diff --git a/apps/engine/src/components/banners/vision-banner/_assets/community.png b/apps/engine/src/components/banners/vision-banner/_assets/community.png
new file mode 100644
index 00000000..4d197929
Binary files /dev/null and b/apps/engine/src/components/banners/vision-banner/_assets/community.png differ
diff --git a/apps/engine/src/components/banners/vision-banner/_assets/design-tokens.png b/apps/engine/src/components/banners/vision-banner/_assets/design-tokens.png
new file mode 100644
index 00000000..531fe8c4
Binary files /dev/null and b/apps/engine/src/components/banners/vision-banner/_assets/design-tokens.png differ
diff --git a/apps/engine/src/components/banners/vision-banner/_assets/integrations.png b/apps/engine/src/components/banners/vision-banner/_assets/integrations.png
new file mode 100644
index 00000000..faf56451
Binary files /dev/null and b/apps/engine/src/components/banners/vision-banner/_assets/integrations.png differ
diff --git a/apps/engine/src/components/banners/vision-banner/_components/card.tsx b/apps/engine/src/components/banners/vision-banner/_components/card.tsx
index d5f3ebac..cb000727 100644
--- a/apps/engine/src/components/banners/vision-banner/_components/card.tsx
+++ b/apps/engine/src/components/banners/vision-banner/_components/card.tsx
@@ -1,13 +1,26 @@
-import { Text } from '@ds-project/components';
+import { AspectRatio, Text } from '@ds-project/components';
+import Image from 'next/image';
+import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 
 interface CardProps {
   title: string;
   description: string;
+  coverImage: StaticImport;
 }
-export function Card({ description, title }: CardProps) {
+export function Card({ description, title, coverImage }: CardProps) {
   return (
     <div className="h-full p-4 rounded-md border bg-white border-zinc-300 flex gap-4 flex-col">
-      <div className="w-full h-44 bg-zinc-800 rounded-md"></div>
+      <AspectRatio
+        ratio={16 / 9}
+        className="w-full h-44 rounded-md overflow-hidden"
+      >
+        <Image
+          src={coverImage}
+          fill
+          alt="json file representing the design tokens"
+        />
+      </AspectRatio>
+
       <Text size="base" weight="medium" leading="tight">
         <h2>{title}</h2>
       </Text>
diff --git a/apps/engine/src/components/banners/vision-banner/vision-banner.tsx b/apps/engine/src/components/banners/vision-banner/vision-banner.tsx
index ce5802fc..d5d48cbd 100644
--- a/apps/engine/src/components/banners/vision-banner/vision-banner.tsx
+++ b/apps/engine/src/components/banners/vision-banner/vision-banner.tsx
@@ -2,21 +2,28 @@ import { Text } from '@ds-project/components';
 import { Card } from './_components/card';
 import { Pill } from '@/components/pill';
 
+import designTokensCover from './_assets/design-tokens.png';
+import integrationsCover from './_assets/integrations.png';
+import communityCover from './_assets/community.png';
+
 const cards = [
   {
     title: 'Design Tokens',
     description:
       'Synchronise, store and release design tokens directly from your design tool to your repositories.',
+    coverImage: designTokensCover,
   },
   {
     title: 'Integrations',
     description:
       'Seamlessly integrate your design system ecosystem so the tools work for you. And not the other way around.',
+    coverImage: integrationsCover,
   },
   {
     title: 'Community Driven',
     description:
       'Open-source solution, fostering collaboration and shared value.\nJoin our community.',
+    coverImage: communityCover,
   },
 ];
 
diff --git a/apps/engine/src/components/footer/_components/link.tsx b/apps/engine/src/components/footer/_components/link.tsx
new file mode 100644
index 00000000..fea838d7
--- /dev/null
+++ b/apps/engine/src/components/footer/_components/link.tsx
@@ -0,0 +1,15 @@
+import type NextLink from 'next/link';
+import { Link as StyledLink } from '../../link';
+import type { ComponentProps } from 'react';
+
+type LinkProps = ComponentProps<typeof NextLink>;
+export function Link({ children, ...props }: LinkProps) {
+  return (
+    <StyledLink
+      className="text-zinc-600 hover:text-zinc-400 no-underline"
+      {...props}
+    >
+      {children}
+    </StyledLink>
+  );
+}
diff --git a/apps/engine/src/components/footer/footer.tsx b/apps/engine/src/components/footer/footer.tsx
index 70694b02..327c827c 100644
--- a/apps/engine/src/components/footer/footer.tsx
+++ b/apps/engine/src/components/footer/footer.tsx
@@ -1,37 +1,46 @@
-import { Icons, Text } from '@ds-project/components';
-import Link from 'next/link';
+import { DSProIcon, Icons, Text } from '@ds-project/components';
 import { Button } from '../button';
 import { CommunityBanner } from '../banners/community-banner';
 import { config } from '@/config';
+import { Link } from './_components/link';
 
 export function Footer() {
   return (
     <footer className="flex w-full">
-      <div className="flex w-full bg-gray-950 py-16 rounded-t-xl justify-center">
+      <div className="flex w-full bg-zinc-950 py-16 rounded-t-xl justify-center">
         <div className="w-full max-w-screen-lg flex flex-col gap-6 mx-4">
-          <CommunityBanner />
-          <div className="flex gap-2">
-            <Button asChild mode="dark" size="icon">
-              <Link href={config.discordInviteUrl}>
-                <Icons.DiscordLogoIcon />
-              </Link>
-            </Button>
-            <Button asChild mode="dark" size="icon">
-              <Link href="https://www.linkedin.com/company/design-system-project">
-                <Icons.LinkedInLogoIcon />
-              </Link>
-            </Button>
+          <div className="flex w-full justify-between items-start gap-24">
+            <div>
+              <DSProIcon width={72} height={72} className="text-white" />
+              <div className="flex gap-2">
+                <Button asChild mode="dark" size="icon">
+                  <Link href={config.githubUrl}>
+                    <Icons.GitHubLogoIcon />
+                  </Link>
+                </Button>
+                <Button asChild mode="dark" size="icon">
+                  <Link href={config.discordInviteUrl}>
+                    <Icons.DiscordLogoIcon />
+                  </Link>
+                </Button>
+                <Button asChild mode="dark" size="icon">
+                  <Link href={config.linkedinUrl}>
+                    <Icons.LinkedInLogoIcon />
+                  </Link>
+                </Button>
+              </div>
+            </div>
+            <CommunityBanner />
           </div>
-          <hr className="border-t-gray-600" />
-          <div className="flex justify-between">
-            <Text className="text-gray-600">
-              <p>Design System Project</p>
+          <hr className="border-t-zinc-600" />
+          <div className="flex justify-between text-zinc-600">
+            <Text size="sm">
+              <p>© {new Date().getFullYear()} DS Pro</p>
             </Text>
-            <Link href="mailto:tomas@getds.pro">
-              <Text className="text-gray-600">
-                <p>tomas@getds.pro</p>
-              </Text>
-            </Link>
+            {/* <Link href="/terms">Terms of Service</Link>
+            <Link href="/privacy">Privacy</Link>
+            <Link href="/accessibility">Accessibility</Link> */}
+            <Link href="mailto:tomas@getds.pro">tomas@getds.pro</Link>
           </div>
         </div>
       </div>
diff --git a/apps/engine/src/components/hero/frame-image.png b/apps/engine/src/components/hero/frame-image.png
new file mode 100644
index 00000000..5024d1d1
Binary files /dev/null and b/apps/engine/src/components/hero/frame-image.png differ
diff --git a/apps/engine/src/components/hero/frame.svg b/apps/engine/src/components/hero/frame.svg
index 0cba54e9..55ce98b1 100644
--- a/apps/engine/src/components/hero/frame.svg
+++ b/apps/engine/src/components/hero/frame.svg
@@ -1,9 +1,3 @@
 <svg width="660" height="588" viewBox="0 0 660 588" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M94 283C107.255 283 118 272.255 118 259V24C118 10.7452 128.745 0 142 0H636C649.255 0 660 10.7452 660 24V564C660 577.255 649.255 588 636 588H24C10.7452 588 0 577.255 0 564V307C0 293.745 10.7452 283 24 283H94Z" fill="url(#paint0_linear_2549_4)"/>
-<defs>
-<linearGradient id="paint0_linear_2549_4" x1="118" y1="271.5" x2="649.5" y2="588" gradientUnits="userSpaceOnUse">
-<stop stop-color="#404040"/>
-<stop offset="1" stop-color="#0F0F0F"/>
-</linearGradient>
-</defs>
+<path d="M659.5 24V564C659.5 576.979 648.979 587.5 636 587.5H24C11.0213 587.5 0.5 576.979 0.5 564V307C0.5 294.021 11.0213 283.5 24 283.5H94C107.531 283.5 118.5 272.531 118.5 259V24C118.5 11.0213 129.021 0.5 142 0.5H636C648.979 0.5 659.5 11.0213 659.5 24Z" stroke="black"/>
 </svg>
diff --git a/apps/engine/src/components/hero/hero.tsx b/apps/engine/src/components/hero/hero.tsx
index eeb4fdc5..abc9cf45 100644
--- a/apps/engine/src/components/hero/hero.tsx
+++ b/apps/engine/src/components/hero/hero.tsx
@@ -1,9 +1,9 @@
 import { FigmaLogo, GithubLogo, Icons, Text } from '@ds-project/components';
 import { Button } from '../button';
 import Image from 'next/image';
-import frame from './frame.svg';
 import { Pill } from '../pill';
 import Link from 'next/link';
+import frameImage from './frame-image.png';
 
 const compatibleWith = [
   {
@@ -73,9 +73,14 @@ export function Hero() {
           </ul>
         </div>
       </div>
-      <div className="w-7/12 md:w-full">
-        <Image src={frame} alt="" />
+      <div className="w-7/12 md:w-full overflow-hidden rounded-md">
+        <Image src={frameImage} alt="" />
       </div>
+      <svg className="absolute w-0 h-0">
+        <clipPath id="frame-path" clipPathUnits="objectBoundingBox">
+          <path d="M1,0.041 V0.961 C1,0.983,0.985,1,0.965,1 H0.036 C0.017,1,0.001,0.983,0.001,0.961 V0.523 C0.001,0.501,0.017,0.483,0.036,0.483 H0.143 C0.163,0.483,0.18,0.464,0.18,0.441 V0.041 C0.18,0.019,0.196,0.001,0.215,0.001 H0.965 C0.985,0.001,1,0.019,1,0.041"></path>
+        </clipPath>
+      </svg>
     </section>
   );
 }
diff --git a/apps/engine/src/components/index.ts b/apps/engine/src/components/index.ts
index 82942a3d..b92a241d 100644
--- a/apps/engine/src/components/index.ts
+++ b/apps/engine/src/components/index.ts
@@ -8,6 +8,7 @@ export * from './integration-card';
 export * from './integration-logo';
 export * from './integration-settings';
 export * from './json-block';
+export * from './link';
 export * from './main-content';
 export * from './support-button';
 export * from './tooltip-info';
diff --git a/apps/engine/src/components/link/index.ts b/apps/engine/src/components/link/index.ts
new file mode 100644
index 00000000..e33728e0
--- /dev/null
+++ b/apps/engine/src/components/link/index.ts
@@ -0,0 +1 @@
+export * from './link';
diff --git a/apps/engine/src/components/link/link.tsx b/apps/engine/src/components/link/link.tsx
new file mode 100644
index 00000000..2f57fd0b
--- /dev/null
+++ b/apps/engine/src/components/link/link.tsx
@@ -0,0 +1,12 @@
+import NextLink from 'next/link';
+import { Link as StyledLink } from '@ds-project/components';
+import type { ComponentProps } from 'react';
+
+type LinkProps = ComponentProps<typeof NextLink>;
+export function Link({ children, ...props }: LinkProps) {
+  return (
+    <StyledLink asChild>
+      <NextLink {...props}>{children}</NextLink>
+    </StyledLink>
+  );
+}
diff --git a/apps/engine/src/config.ts b/apps/engine/src/config.ts
index 6d2b4dbf..f436bbf5 100644
--- a/apps/engine/src/config.ts
+++ b/apps/engine/src/config.ts
@@ -30,5 +30,6 @@ export const config = {
   figmaWidgetUrl: 'https://www.figma.com/community/widget/1415369860836124974',
   feedbackUrl: 'https://ds-project.supahub.com',
   githubUrl: 'https://github.com/Design-System-Pro',
+  linkedinUrl: 'https://www.linkedin.com/company/design-system-pro',
   supportEmail: 'tomas@getds.pro',
 } as const;
diff --git a/apps/engine/globals.d.ts b/apps/engine/src/globals.d.ts
similarity index 100%
rename from apps/engine/globals.d.ts
rename to apps/engine/src/globals.d.ts
diff --git a/apps/engine/tsconfig.json b/apps/engine/tsconfig.json
index b4b90fd8..57ecad48 100644
--- a/apps/engine/tsconfig.json
+++ b/apps/engine/tsconfig.json
@@ -23,7 +23,7 @@
     }
   },
   "include": [
-    "globals.d.ts",
+    "src/globals.d.ts",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
diff --git a/packages/components/src/icons/ds-icon.tsx b/packages/components/src/icons/ds-icon.tsx
new file mode 100644
index 00000000..aff05e4d
--- /dev/null
+++ b/packages/components/src/icons/ds-icon.tsx
@@ -0,0 +1,33 @@
+import type { IconProps } from '@radix-ui/react-icons/dist/types';
+import * as React from 'react';
+
+export const DSIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="512"
+        height="512"
+        viewBox="0 0 512 512"
+        fill="none"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill="currentColor"
+          d="M375.251 171.237c10.845 3.697 21.443 8.38 31.794 14.048l20.334-41.036c-10.845-7.148-23.168-13.31-36.97-18.485-13.556-5.176-31.301-7.764-53.237-7.764-16.76.739-31.548 4.56-44.364 11.461-6.351 3.297-12.006 7.2-16.965 11.708 5.641 4.579 11.217 9.806 15.841 15.211 7.15 8.2 13.244 16.963 18.266 26.278 1.644-4.033 4.31-7.347 7.998-9.942 6.654-4.683 15.774-7.025 27.358-7.025 9.365 0 19.347 1.849 29.945 5.546ZM308.063 195.97a23.045 23.045 0 0 0 2.375 8.443c-2.554-3.53-4.813-7.216-6.982-10.754-1.8-2.937-3.537-5.772-5.329-8.331-2.737-3.91-8.403-11.967-11.458-16.041l-.096.053a137.371 137.371 0 0 0-4.138-4.972c-4.146-4.851-9.661-10.053-14.88-14.286a73.31 73.31 0 0 0-4.692 6.736c-6.901 11.584-10.352 25.263-10.352 41.037 0 13.063 2.341 24.154 7.024 33.273 4.93 8.873 11.214 16.39 18.855 22.552a145.012 145.012 0 0 0 25.139 15.157c8.873 4.19 17.5 7.887 25.879 11.091 7.148 2.711 13.679 5.916 19.595 9.613 6.161 3.697 10.967 7.763 14.418 12.2 3.697 4.436 5.545 9.365 5.545 14.788 0 7.886-2.218 14.048-6.654 18.485-4.19 4.436-9.612 7.64-16.267 9.612-6.408 1.725-12.816 2.588-19.224 2.588-6.409 0-13.433-.986-21.073-2.958-.801-.206-1.601-.421-2.401-.644-5.514 7.796-12.212 15.469-19.285 21.987l-.048.044-.049.044a143.697 143.697 0 0 1-19.263 14.636c1.23.563 2.466 1.111 3.706 1.642 10.352 4.19 20.826 7.394 31.425 9.613 10.844 1.971 21.442 2.957 31.794 2.957 20.21 0 37.216-3.574 51.018-10.721 13.802-7.394 24.277-17.006 31.425-28.837 7.147-11.83 10.721-24.646 10.721-38.448 0-13.063-1.849-24.031-5.546-32.904-3.697-9.119-8.626-16.636-14.788-22.551-6.161-6.162-13.185-11.215-21.072-15.158-7.641-4.19-15.405-7.764-23.291-10.721a284.893 284.893 0 0 1-25.14-10.722c-7.887-3.943-14.418-8.379-19.594-13.309-4.364-4.582-6.796-9.647-7.297-15.194Z"
+        />
+        <path
+          fill="currentColor"
+          d="M251.869 373.755a131.796 131.796 0 0 0 23.911-17.143c5.458-5.03 10.802-11.156 15.262-17.064a151.759 151.759 0 0 1-8.216-3.425c-7.394-3.697-14.295-7.887-20.703-12.57l-23.661 41.776a176.433 176.433 0 0 0 13.407 8.426Z"
+        />
+        <path
+          fill="currentColor"
+          d="M85 119.48v272.099h94.643c18.485 0 35.984-2.957 52.497-8.873 16.514-6.161 31.055-14.911 43.625-26.248 12.57-11.584 22.428-25.386 29.576-41.407 3.982-8.761 6.892-18.095 8.73-28.001a404.851 404.851 0 0 1-15.746-7.039 157.175 157.175 0 0 1-27.254-16.432l-.172-.128-.167-.135a87.022 87.022 0 0 1-9.762-9.197c-.085-4.993-.413-9.713-.984-14.159.66 5.188.991 10.748.991 16.679 0 13.556-2.218 25.632-6.655 36.23-4.19 10.352-10.351 18.978-18.485 25.879-7.887 6.902-17.375 12.201-28.466 15.898-11.091 3.45-23.415 5.175-36.97 5.175h-31.795V170.869h43.625c6.162 0 13.679 1.232 22.552 3.697 8.872 2.218 17.499 6.408 25.879 12.569 8.626 6.162 15.773 14.912 21.442 26.249 1.967 3.688 3.607 7.743 4.92 12.167a55.367 55.367 0 0 0 2.525 5.7c4.929 8.872 11.214 16.39 18.855 22.551a145.017 145.017 0 0 0 25.139 15.158 400.583 400.583 0 0 0 12.254 5.541c.423-4.609.635-9.331.635-14.165 0-17.006-2.711-33.889-8.134-50.649-5.422-16.76-14.048-31.917-25.879-45.473-11.583-13.556-26.988-24.4-46.212-32.533-19.224-8.134-42.515-12.201-69.873-12.201H85Z"
+        />
+      </svg>
+    );
+  }
+);
+
+DSIcon.displayName = 'DSIcon';
diff --git a/packages/components/src/icons/ds-pro-icon.tsx b/packages/components/src/icons/ds-pro-icon.tsx
new file mode 100644
index 00000000..b4540b62
--- /dev/null
+++ b/packages/components/src/icons/ds-pro-icon.tsx
@@ -0,0 +1,33 @@
+import type { IconProps } from '@radix-ui/react-icons/dist/types';
+import * as React from 'react';
+
+export const DSProIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 527 279"
+        width="527"
+        height="279"
+        fill="none"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill="currentColor"
+          d="M290.251 53.237c10.845 3.697 21.443 8.38 31.794 14.048l20.334-41.036c-10.845-7.148-23.168-13.31-36.97-18.485C291.853 2.588 274.108 0 252.172 0c-16.76.74-31.548 4.56-44.364 11.46-6.351 3.298-12.006 7.201-16.965 11.71 5.641 4.578 11.217 9.805 15.841 15.21 7.15 8.2 13.244 16.963 18.266 26.278 1.644-4.033 4.31-7.347 7.998-9.943 6.654-4.682 15.774-7.024 27.358-7.024 9.365 0 19.347 1.849 29.945 5.546ZM223.063 77.97a23.046 23.046 0 0 0 2.375 8.443c-2.554-3.53-4.813-7.216-6.982-10.754-1.8-2.937-3.537-5.772-5.329-8.331-2.737-3.91-8.403-11.967-11.458-16.041l-.096.053a137.8 137.8 0 0 0-4.138-4.972c-4.146-4.85-9.661-10.053-14.88-14.286a73.286 73.286 0 0 0-4.692 6.736c-6.901 11.584-10.352 25.263-10.352 41.037 0 13.063 2.341 24.154 7.024 33.273 4.93 8.873 11.214 16.39 18.855 22.552a145.012 145.012 0 0 0 25.139 15.157c8.873 4.19 17.5 7.887 25.879 11.091 7.148 2.711 13.679 5.916 19.595 9.613 6.161 3.697 10.967 7.763 14.418 12.2 3.697 4.436 5.545 9.365 5.545 14.788 0 7.886-2.218 14.048-6.654 18.485-4.19 4.436-9.612 7.64-16.267 9.612-6.408 1.725-12.816 2.588-19.224 2.588-6.409 0-13.433-.986-21.073-2.958-.801-.206-1.601-.421-2.401-.644-5.514 7.796-12.212 15.469-19.285 21.987l-.048.044-.049.044a143.697 143.697 0 0 1-19.263 14.636c1.23.563 2.466 1.111 3.706 1.642 10.352 4.19 20.826 7.394 31.425 9.613 10.844 1.971 21.442 2.957 31.794 2.957 20.21 0 37.216-3.574 51.018-10.721 13.802-7.394 24.277-17.006 31.425-28.837 7.147-11.83 10.721-24.646 10.721-38.448 0-13.063-1.849-24.031-5.546-32.904-3.697-9.119-8.626-16.636-14.788-22.551-6.161-6.162-13.185-11.215-21.072-15.158-7.641-4.19-15.405-7.764-23.291-10.721a284.893 284.893 0 0 1-25.14-10.722c-7.887-3.943-14.418-8.38-19.594-13.309-4.364-4.582-6.796-9.647-7.297-15.194Z"
+        />
+        <path
+          fill="currentColor"
+          d="M166.869 255.755a131.796 131.796 0 0 0 23.911-17.143c5.458-5.03 10.802-11.156 15.262-17.064a151.759 151.759 0 0 1-8.216-3.425c-7.394-3.697-14.295-7.887-20.703-12.57l-23.661 41.776a176.433 176.433 0 0 0 13.407 8.426Z"
+        />
+        <path
+          fill="currentColor"
+          d="M0 1.48V273.58h94.643c18.485 0 35.984-2.957 52.497-8.873 16.514-6.161 31.055-14.911 43.625-26.248 12.57-11.584 22.428-25.386 29.576-41.407 3.982-8.761 6.892-18.095 8.73-28.001a404.851 404.851 0 0 1-15.746-7.039 157.175 157.175 0 0 1-27.254-16.432l-.172-.128-.167-.135a87.022 87.022 0 0 1-9.762-9.197c-.085-4.993-.413-9.713-.984-14.159.66 5.188.991 10.748.991 16.679 0 13.556-2.218 25.632-6.655 36.23-4.19 10.352-10.351 18.978-18.485 25.879-7.887 6.902-17.375 12.201-28.466 15.898-11.091 3.45-23.415 5.175-36.97 5.175H53.606V52.869h43.625c6.162 0 13.679 1.232 22.552 3.697 8.872 2.218 17.499 6.408 25.879 12.57 8.626 6.161 15.773 14.91 21.442 26.248 1.967 3.688 3.607 7.743 4.92 12.167a55.367 55.367 0 0 0 2.525 5.7c4.929 8.872 11.214 16.39 18.855 22.551a145.017 145.017 0 0 0 25.139 15.158 400.583 400.583 0 0 0 12.254 5.541c.423-4.609.635-9.331.635-14.165 0-17.006-2.711-33.889-8.134-50.649-5.422-16.76-14.048-31.917-25.879-45.473-11.583-13.556-26.988-24.4-46.212-32.533-19.224-8.134-42.515-12.2-69.873-12.2H0ZM356.177 271.942c-2.391 0-4.443-.845-6.158-2.536-1.69-1.714-2.535-3.767-2.535-6.157 0-2.367.845-4.395 2.535-6.086 1.715-1.69 3.767-2.535 6.158-2.535 2.318 0 4.346.845 6.085 2.535 1.739 1.691 2.608 3.719 2.608 6.086 0 1.593-.41 3.054-1.232 4.382a9.36 9.36 0 0 1-3.151 3.152c-1.304.772-2.741 1.159-4.31 1.159Zm17.571-.942v-74.182h29.267c5.627 0 10.42 1.075 14.38 3.224 3.961 2.125 6.979 5.083 9.056 8.874 2.101 3.767 3.151 8.114 3.151 13.04 0 4.926-1.062 9.273-3.187 13.04-2.125 3.767-5.204 6.701-9.237 8.802-4.009 2.1-8.862 3.151-14.561 3.151h-18.654V234.38h16.118c3.019 0 5.506-.519 7.462-1.558 1.98-1.062 3.453-2.523 4.419-4.382.99-1.884 1.485-4.045 1.485-6.484 0-2.463-.495-4.612-1.485-6.447-.966-1.86-2.439-3.297-4.419-4.311-1.98-1.038-4.491-1.557-7.534-1.557h-10.577V271h-15.684Zm61.672 0v-55.636h14.959v9.707h.58c1.014-3.453 2.716-6.061 5.107-7.824 2.39-1.787 5.143-2.68 8.258-2.68.773 0 1.606.048 2.5.145.893.096 1.678.229 2.354.398v13.692c-.724-.217-1.726-.411-3.006-.58a27.01 27.01 0 0 0-3.514-.253c-2.27 0-4.298.495-6.085 1.485a10.937 10.937 0 0 0-4.202 4.057c-1.014 1.738-1.521 3.743-1.521 6.012V271h-15.43Zm60.204 1.087c-5.627 0-10.492-1.196-14.597-3.586-4.081-2.415-7.233-5.772-9.454-10.07-2.222-4.322-3.333-9.333-3.333-15.032 0-5.747 1.111-10.77 3.333-15.068 2.221-4.322 5.373-7.679 9.454-10.07 4.105-2.414 8.97-3.622 14.597-3.622 5.626 0 10.48 1.208 14.561 3.622 4.105 2.391 7.268 5.748 9.49 10.07 2.222 4.298 3.332 9.321 3.332 15.068 0 5.699-1.11 10.71-3.332 15.032-2.222 4.298-5.385 7.655-9.49 10.07-4.081 2.39-8.935 3.586-14.561 3.586Zm.072-11.953c2.56 0 4.697-.725 6.411-2.174 1.715-1.473 3.007-3.477 3.876-6.013.894-2.535 1.34-5.421 1.34-8.657 0-3.235-.446-6.121-1.34-8.656-.869-2.536-2.161-4.54-3.876-6.013-1.714-1.473-3.851-2.21-6.411-2.21-2.584 0-4.757.737-6.52 2.21-1.738 1.473-3.054 3.477-3.948 6.013-.869 2.535-1.304 5.421-1.304 8.656 0 3.236.435 6.122 1.304 8.657.894 2.536 2.21 4.54 3.948 6.013 1.763 1.449 3.936 2.174 6.52 2.174Z"
+        />
+      </svg>
+    );
+  }
+);
+
+DSProIcon.displayName = 'DSProIcon';
diff --git a/packages/components/src/icons/index.ts b/packages/components/src/icons/index.ts
index 6d6c7eb1..92632765 100644
--- a/packages/components/src/icons/index.ts
+++ b/packages/components/src/icons/index.ts
@@ -1,8 +1,9 @@
-import * as Icons from '@radix-ui/react-icons';
-import * as LucideIcons from 'lucide-react';
+export * from './ds-icon';
 export * from './ds-logo';
+export * from './ds-pro-icon';
 export * from './figma-logo';
 export * from './github-logo';
 export * from './penpot-logo';
-
+import * as Icons from '@radix-ui/react-icons';
+import * as LucideIcons from 'lucide-react';
 export { Icons, LucideIcons };
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index e357e6f0..c4555ac1 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -15,6 +15,7 @@ export * from './icons';
 export * from './input-otp';
 export * from './input';
 export * from './label';
+export * from './link';
 export * from './menubar';
 export * from './navigation-menu';
 export * from './popover';
diff --git a/packages/components/src/link/index.ts b/packages/components/src/link/index.ts
new file mode 100644
index 00000000..e33728e0
--- /dev/null
+++ b/packages/components/src/link/index.ts
@@ -0,0 +1 @@
+export * from './link';
diff --git a/packages/components/src/link/link.tsx b/packages/components/src/link/link.tsx
new file mode 100644
index 00000000..24ba8c71
--- /dev/null
+++ b/packages/components/src/link/link.tsx
@@ -0,0 +1,27 @@
+import { cn } from '@/utils';
+import { Slot } from '@radix-ui/react-slot';
+import type { AnchorHTMLAttributes, DetailedHTMLProps } from 'react';
+
+interface LinkProps
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+export function Link({ className, asChild, children, ...props }: LinkProps) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      className={cn(
+        'ds-text-[currentColor] ds-underline ds-underline-offset-2 ds-fluid-text-sm',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx
index 18fb1301..fb6973ca 100644
--- a/packages/components/src/text/text.tsx
+++ b/packages/components/src/text/text.tsx
@@ -58,6 +58,9 @@ const textVariations = cva('', {
       muted: 'ds-text-muted-foreground',
     },
   },
+  defaultVariants: {
+    size: 'base',
+  },
 });
 
 type TextProps = VariantProps<typeof textVariations> & {