diff --git a/app/page.tsx b/app/page.tsx
index feec620..47cdb98 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,9 @@
 import Soundboard from '@/components/Soundboard';
 import { Metadata } from 'next';
+import { Rubik } from 'next/font/google';
+const rubik = Rubik({
+  subsets: ['latin'],
+})
 
 export const metadata: Metadata = {
   title: "Doyle Gammill Soundboard",
@@ -15,7 +19,7 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center px-4 py-16 gap-16">
+    <div className={`flex flex-col items-center justify-center px-4 py-16 gap-16 ${rubik.className}`}>
       <h1 className="text-4xl font-bold text-center">Doyle Gammill Soundboard</h1>
       <Soundboard/>
     </div>