diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index b0dbc6d8..e753bad0 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -76,12 +76,12 @@ const config: Config = {
     // image: "img/docusaurus-social-card.jpg",
     navbar: {
       title: "Grats",
-      /*
-        logo: {
-          alt: "Grats Logo",
-          src: "img/logo.svg",
-        },
-        */
+      logo: {
+        alt: "Grats",
+        src: "img/logo.svg",
+        target: "_self",
+        style: {},
+      },
       items: [
         {
           type: "docSidebar",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index bc2276e1..a5d63980 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -15,6 +15,7 @@
   --ifm-color-primary-lightest: #5fa6e1;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --text-shadow-glow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -27,6 +28,8 @@
   --ifm-color-primary-lighter: #f051b4;
   --ifm-color-primary-lightest: #f36fbd;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --text-shadow-glow: 0 0 5px rgba(255, 255, 255, 0.15),
+    0 0 3px rgba(255, 255, 255, 0.1);
 }
 
 .cm-editor {
@@ -41,3 +44,10 @@
 .code-trimmed-line {
   display: none;
 }
+
+iframe[src*="youtube"] {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  padding-bottom: 10px;
+}
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 8fd958ff..3b0ed05f 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -12,6 +12,10 @@
   background: linear-gradient(165deg, #3178c6, #e10098);
 }
 
+.titleShadow {
+  text-shadow: var(--text-shadow-glow);
+}
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 9e7437cb..e49ad6da 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -7,14 +7,19 @@ import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 
 import styles from "./index.module.css";
+import { GratsLogo } from "./logo";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className={clsx("hero__title", styles.titleShadow)}>
+          {siteConfig.title}
+        </h1>
+        <p className={clsx("hero__subtitle", styles.titleShadow)}>
+          {siteConfig.tagline}
+        </p>
         <div style={{ display: "flex", justifyContent: "center", gap: "2em" }}>
           <div className={styles.buttons}>
             <Link
diff --git a/website/src/pages/logo.tsx b/website/src/pages/logo.tsx
new file mode 100644
index 00000000..f7390ff1
--- /dev/null
+++ b/website/src/pages/logo.tsx
@@ -0,0 +1,196 @@
+import { Line } from "@codemirror/state";
+import { off } from "process";
+
+const TS_BLUE = "#3178C6";
+const TS_MID = "#235A97";
+const TS_LIGHT = "#358EF1";
+const TS_DARK = "#00273F";
+const GRAPHQL_RHODAMINE = "#E10098";
+const GRAPHQL_MID = "rgb(196 56 150)";
+
+const OFFSET = 20;
+
+function calculateHexagonPoints(): { x: number; y: number }[] {
+  const width = 100;
+  const height = 100;
+
+  const centerX = width / 2;
+  const centerY = height / 2;
+
+  const radius = height / 2;
+
+  const points: { x: number; y: number }[] = [];
+
+  // Calculate the angle offset (30 degrees in radians)
+  const angleOffset = Math.PI / 6;
+
+  // Calculate the points of the hexagon
+  for (let i = 0; i < 6; i++) {
+    const angle = (i * Math.PI) / 3 + angleOffset;
+    const x = centerX + radius * Math.cos(angle);
+    const y = centerY + radius * Math.sin(angle);
+    points.push({ x, y });
+  }
+
+  return points;
+}
+
+function offset(pos) {
+  return { x: pos.x + OFFSET, y: pos.y + OFFSET };
+}
+
+export function GratsLogo({ opacity = 1 }) {
+  // Compute points of the hexagon with points
+  // at the middle top and bottom
+  const points = calculateHexagonPoints().map(offset);
+  const lowerRight = points[0];
+  const bottom = points[1];
+  const lowerLeft = points[2];
+  const upperLeft = points[3];
+  const top = points[4];
+  const upperRight = points[5];
+  const center = offset({ x: 50, y: 50 });
+
+  const tsLinesColor = GRAPHQL_MID;
+  const gqlColor = GRAPHQL_RHODAMINE;
+
+  const gqlWidth = 8;
+  const tsWidth = 12;
+
+  const showGradient = true;
+  const gradient180 = "grad180";
+  const gradient0 = "grad0";
+  const gradient45 = "grad45";
+  return (
+    <svg
+      width={100 + OFFSET * 2}
+      height={100 + OFFSET * 2}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <LinearGradient
+          angle={120}
+          startColor={TS_LIGHT}
+          endColor={TS_LIGHT}
+          id={gradient45}
+        />
+        <LinearGradient
+          angle={45}
+          startColor={TS_BLUE}
+          endColor={TS_BLUE}
+          id={gradient180}
+        />
+        <LinearGradient
+          angle={180}
+          startColor={TS_LIGHT}
+          endColor={TS_LIGHT}
+          id={gradient0}
+        />
+      </defs>
+      {showGradient && (
+        <>
+          <Polygon
+            opacity={opacity}
+            fill={`url(#${gradient180})`}
+            points={[upperLeft, center, bottom, lowerLeft]}
+          />
+          <Polygon
+            opacity={opacity}
+            fill={`url(#${gradient45})`}
+            points={[upperLeft, top, upperRight, center]}
+          />
+          <Polygon
+            opacity={opacity}
+            fill={`url(#${gradient0})`}
+            points={[upperRight, lowerRight, bottom, center]}
+          />
+        </>
+      )}
+
+      {false && (
+        <>
+          <Polyline
+            points={[upperRight, top]}
+            stroke={gqlColor}
+            strokeWidth={gqlWidth}
+            fill="none"
+          />
+          <Polyline
+            points={[center, upperLeft]}
+            stroke={gqlColor}
+            strokeWidth={gqlWidth}
+            fill="none"
+          />
+          <Polyline
+            points={[center, bottom]}
+            stroke={gqlColor}
+            strokeWidth={gqlWidth}
+            fill="none"
+          />
+        </>
+      )}
+      <>
+        {/* Draw the TS color */}
+        <Dot center={center} r={tsWidth} fill={tsLinesColor} />
+        <Dot center={top} r={tsWidth} fill={tsLinesColor} />
+        <Polyline
+          points={[
+            center,
+            upperRight,
+            lowerRight,
+            bottom,
+            lowerLeft,
+            upperLeft,
+            top,
+          ]}
+          stroke={tsLinesColor}
+          strokeWidth={tsWidth}
+          fill="none"
+        />
+      </>
+    </svg>
+  );
+}
+
+function Dot({ center, ...rest }) {
+  return <circle cx={center.x} cy={center.y} {...rest} />;
+}
+
+function Polyline({ points, ...rest }) {
+  return (
+    <polyline
+      points={points.map((pos) => `${pos.x}, ${pos.y}`).join(" ")}
+      {...rest}
+    />
+  );
+}
+
+function Polygon({ points, ...rest }) {
+  return (
+    <polygon
+      points={points.map((pos) => `${pos.x}, ${pos.y}`).join(" ")}
+      {...rest}
+    />
+  );
+}
+
+const calculateGradientDirection = (angle) => {
+  const rad = (angle * Math.PI) / 180;
+  const x1 = 50 + Math.cos(rad) * 50;
+  const y1 = 50 - Math.sin(rad) * 50;
+  const x2 = 50 - Math.cos(rad) * 50;
+  const y2 = 50 + Math.sin(rad) * 50;
+
+  return { x1: `${x1}%`, y1: `${y1}%`, x2: `${x2}%`, y2: `${y2}%` };
+};
+
+function LinearGradient({ angle, startColor, endColor, id }) {
+  const { x1, y1, x2, y2 } = calculateGradientDirection(angle);
+
+  return (
+    <linearGradient id={id} x1={x1} y1={y1} x2={x2} y2={y2}>
+      <stop offset="0%" style={{ stopColor: startColor, stopOpacity: 1 }} />
+      <stop offset="100%" style={{ stopColor: endColor, stopOpacity: 1 }} />
+    </linearGradient>
+  );
+}
diff --git a/website/static/img/favicon.ico b/website/static/img/favicon.ico
index ce0bfd1c..da5a1c7f 100644
Binary files a/website/static/img/favicon.ico and b/website/static/img/favicon.ico differ
diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg
new file mode 100644
index 00000000..25ae418f
--- /dev/null
+++ b/website/static/img/logo.svg
@@ -0,0 +1,22 @@
+<svg width="140" height="140" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad45" x1="25.00000000000001%" y1="6.698729810778062%" x2="74.99999999999999%" y2="93.30127018922194%">
+      <stop offset="0%" style="stop-color: rgb(53, 142, 241); stop-opacity: 1;"></stop>
+      <stop offset="100%" style="stop-color: rgb(53, 142, 241); stop-opacity: 1;"></stop>
+    </linearGradient>
+    <linearGradient id="grad180" x1="85.35533905932738%" y1="14.64466094067263%" x2="14.644660940672622%" y2="85.35533905932738%">
+      <stop offset="0%" style="stop-color: rgb(49, 120, 198); stop-opacity: 1;"></stop>
+      <stop offset="100%" style="stop-color: rgb(49, 120, 198); stop-opacity: 1;"></stop>
+    </linearGradient>
+    <linearGradient id="grad0" x1="0%" y1="49.99999999999999%" x2="100%" y2="50.00000000000001%">
+      <stop offset="0%" style="stop-color: rgb(53, 142, 241); stop-opacity: 1;"></stop>
+      <stop offset="100%" style="stop-color: rgb(53, 142, 241); stop-opacity: 1;"></stop>
+    </linearGradient>
+  </defs>
+  <polygon points="26.69872981077806, 45.000000000000014 70, 70 70, 120 26.698729810778076, 95.00000000000001" opacity="1" fill="url(#grad180)"></polygon>
+  <polygon points="26.69872981077806, 45.000000000000014 70, 20 113.30127018922194, 45.000000000000014 70, 70" opacity="1" fill="url(#grad45)"></polygon>
+  <polygon points="113.30127018922194, 45.000000000000014 113.30127018922194, 95 70, 120 70, 70" opacity="1" fill="url(#grad0)"></polygon>
+  <circle cx="70" cy="70" r="12" fill="rgb(196 56 150)"></circle>
+  <circle cx="70" cy="20" r="12" fill="rgb(196 56 150)"></circle>
+  <polyline points="70, 70 113.30127018922194, 45.000000000000014 113.30127018922194, 95 70, 120 26.698729810778076, 95.00000000000001 26.69872981077806, 45.000000000000014 70, 20" stroke="rgb(196 56 150)" stroke-width="12" fill="none"></polyline>
+</svg>
\ No newline at end of file