diff --git a/public/logos/yt-logo-red.svg b/public/logos/yt-logo-red.svg
new file mode 100644
index 0000000..c49a5ad
--- /dev/null
+++ b/public/logos/yt-logo-red.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 28.57  20" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+  <svg viewBox="0 0 28.57 20" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" fill="#FF0000"></path>
+      <path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="white"></path>
+    </g>
+  </svg>
+</svg>
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2092cc7..dd61f29 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import '@/styles/tailwind.css'
 import type { Metadata } from 'next'
+import localFont from 'next/font/local'
 
 import { Bricolage_Grotesque } from 'next/font/google'
 
@@ -9,6 +10,33 @@ const bricolage = Bricolage_Grotesque({
   variable: '--font-bricolage',
 })
 
+const switzer = localFont({
+  src: [
+    {
+      path: '../fonts/Switzer-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Switzer-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Switzer-Semibold.woff2',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Switzer-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+  ],
+  variable: '--font-switzer',
+  display: 'swap',
+})
+
 export const metadata: Metadata = {
   title: {
     template: '%s - Open Healthcare Network',
@@ -58,12 +86,8 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className={`${bricolage.variable} antialiased`}>
+    <html lang="en" className={`${bricolage.variable} ${switzer.variable} antialiased`}>
       <head>
-        <link
-          rel="stylesheet"
-          href="https://api.fontshare.com/css?f%5B%5D=switzer@400,500,600,700&amp;display=swap"
-        />
         <link
           rel="alternate"
           type="application/rss+xml"
diff --git a/src/components/youtube-video.tsx b/src/components/youtube-video.tsx
index c9fa087..a6f7c1e 100644
--- a/src/components/youtube-video.tsx
+++ b/src/components/youtube-video.tsx
@@ -1,5 +1,9 @@
 'use client'
 
+import { useState } from 'react'
+import Image from 'next/image'
+import { Button } from './button'
+
 interface YouTubeVideoProps {
   videoId: string
   title: string
@@ -15,18 +19,50 @@ export function YouTubeVideo({
   width = 560,
   height = 315,
 }: YouTubeVideoProps) {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const handleClick = () => {
+    setIsLoaded(true)
+  }
+
   return (
     <div className={`relative w-full ${className}`}>
       <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
-        <iframe
-          src={`https://www.youtube.com/embed/${videoId}`}
-          title={title}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-          className="absolute top-0 left-0 h-full w-full rounded-lg"
-          width={width}
-          height={height}
-        />
+        {!isLoaded ? (
+          <Button
+            variant="secondary"
+            onClick={handleClick}
+            className="absolute top-0 left-0 w-full h-full cursor-pointer rounded-lg overflow-hidden group"
+            aria-label={`Play ${title}`}
+          >
+            <Image
+              src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
+              alt={title}
+              fill
+              className="object-cover"
+            />
+            
+            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+              <Image
+                src="/logos/yt-logo-red.svg"
+                alt="Play"
+                width={80}
+                height={80}
+                className="w-12 h-12 md:w-20 md:h-20 group-hover:scale-110 transition-transform duration-200"
+              />
+            </div>
+          </Button>
+        ) : (
+          <iframe
+            src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
+            title={title}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            className="absolute top-0 left-0 h-full w-full rounded-lg"
+            width={width}
+            height={height}
+          />
+        )}
       </div>
     </div>
   )
diff --git a/src/fonts/Switzer-Bold.woff2 b/src/fonts/Switzer-Bold.woff2
new file mode 100644
index 0000000..f61d433
Binary files /dev/null and b/src/fonts/Switzer-Bold.woff2 differ
diff --git a/src/fonts/Switzer-Medium.woff2 b/src/fonts/Switzer-Medium.woff2
new file mode 100644
index 0000000..c6ccae4
Binary files /dev/null and b/src/fonts/Switzer-Medium.woff2 differ
diff --git a/src/fonts/Switzer-Regular.woff2 b/src/fonts/Switzer-Regular.woff2
new file mode 100644
index 0000000..df335d6
Binary files /dev/null and b/src/fonts/Switzer-Regular.woff2 differ
diff --git a/src/fonts/Switzer-Semibold.woff2 b/src/fonts/Switzer-Semibold.woff2
new file mode 100644
index 0000000..67d8639
Binary files /dev/null and b/src/fonts/Switzer-Semibold.woff2 differ
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index f7ba6b7..57fd4cc 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 @theme {
-  --font-sans: Switzer, system-ui, sans-serif;
+  --font-sans: var(--font-switzer);
   --font-display: var(--font-bricolage);
 
   --radius-4xl: 2rem;
