diff --git a/src/app/components/services.tsx b/src/app/components/services.tsx
index 31aba5e..22722d0 100644
--- a/src/app/components/services.tsx
+++ b/src/app/components/services.tsx
@@ -7,7 +7,7 @@ interface Service {
 
 function Services() {
   return (
-    <div className="space-y-2">
+    <div className="space-y-1">
       {services.map((service: Service) => {
         const Icon = service.icon;
         return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7de931c..182399a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,12 @@
 import type { Metadata } from "next"
-import { Almendra } from "next/font/google"
+import { Ubuntu } from "next/font/google"
 import "./globals.css"
 
-const almendra = Almendra({
+const ubuntu = Ubuntu({
   subsets: ["latin"],
-  weight: ["400", "700"],
+  variable: "--font-ubuntu",
+  display: "swap",
+  weight: ["400", "500", "700"],
 })
 
 export const metadata: Metadata = {
@@ -20,7 +22,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${almendra.className} antialiased`}
+        className={`${ubuntu.className} antialiased`}
       >
         {children}
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6a487f9..b52ae07 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
         <p className="text-2xl mt-1">My name is <span className="text-slate-500">{process.env.NEXT_PUBLIC_SERVER_NAME}</span>, and I&apos;m a server.</p>
       </div>
       <div className="w-full max-w-md text-center my-10">
-        <h1 className="text-3xl font-bold mb-4">I am the backbone for</h1>
+        <h1 className="text-3xl font-bold mb-2">I am the backbone for</h1>
         <Services />
       </div>
     </div>
