diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index 9b16e96..fbf3556 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased px-4`}
       >
         {children}
       </body>
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index f23cacd..5fcec67 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -13,7 +13,10 @@ const IndexPage = async () => {
     <div className="flex flex-col gap-4 justify-center items-center h-screen">
       <Image className="rounded-full" src="/images/liam_pietralla.jpg" width={200} height={200} alt="Liam Pietralla" />
       <h1 className="text-5xl font-bold">Liam Pietralla</h1>
-      <h2 className="text-xl">Enthusiastic Software Developer & DevOps Engineer</h2>
+      <div className="flex flex-col md:flex-row gap-0 md:gap-[7px]">
+        <h2 className="text-xl text-center">Enthusiastic Software Developer</h2>
+        <h2 className="text-xl text-center mt-[-5px] md:mt-0">& DevOps Engineer</h2>
+      </div>
       <Rule className="w-[300px]" />
       <div className="flex flex-row gap-4">
         {home.mainLinks.map(link => (
