diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
index b72227c..8b56157 100644
--- a/frontend/components/Hero.tsx
+++ b/frontend/components/Hero.tsx
@@ -1,38 +1,53 @@
-"use client"
-import { useRouter } from "next/navigation"
-import { Feature } from "./Feature"
-import { PrimaryButton } from "./buttons/PrimaryButton"
-import { SecondaryButton } from "./buttons/SecondaryButton"
+"use client";
+import { useRouter } from "next/navigation";
+import { Feature } from "./Feature";
+import { PrimaryButton } from "./buttons/PrimaryButton";
+import { SecondaryButton } from "./buttons/SecondaryButton";
 
 export const Hero = () => {
-    const router = useRouter();
-    return <div>
-        <div className="flex justify-center">
-            <div className="text-5xl font-bold font-semibold text-center pt-8 max-w-xl">
-                Automate as fast as you can type    
-            </div>
+  const router = useRouter();
+  return (
+    <div>
+      <div className="flex justify-center">
+        <div className="text-5xl font-bold font-semibold text-center pt-8 max-w-xl">
+          Automate as fast as you can type
         </div>
-        <div className="flex justify-center pt-2">
-            <div className="text-xl font-bold font-normal text-center pt-8 max-w-2xl">
-                AI gives you automation superpowers, and Zapier puts them to work. Pairing AI and Zapier helps you turn ideas into workflows and bots that work for you.
-            </div>
+      </div>
+      <div className="flex justify-center pt-2">
+        <div className="text-xl font-bold font-normal text-center pt-8 max-w-2xl">
+          AI gives you automation superpowers, and Zapier puts them to work.
+          Pairing AI and Zapier helps you turn ideas into workflows and bots
+          that work for you.
         </div>
+      </div>
 
-        <div className="flex justify-center pt-4">
-            <div className="flex">
-                <PrimaryButton onClick={() => {
-                    router.push("/signup")
-                }} size="big">Get Started free</PrimaryButton>
-                <div className="pl-4">
-                    <SecondaryButton  onClick={() => {}} size="big">Contact Sales</SecondaryButton>
-                </div>
+      <div className="flex justify-center pt-4">
+        <div className="flex">
+          <div>
+            <PrimaryButton
+              onClick={() => {
+                router.push("/signup");
+              }}
+              size="big"
+            >
+              Get Started free
+            </PrimaryButton>
+          </div>
+          <div className="pl-4">
+            <div>
+              <SecondaryButton onClick={() => {}} size="big">
+                Contact Sales
+              </SecondaryButton>
             </div>
+          </div>
         </div>
+      </div>
 
-        <div className="flex justify-center pt-4">
-            <Feature title={"Free Forever"} subtitle={"for core features"} />
-            <Feature title={"More apps"} subtitle={"than any other platforms"} />
-            <Feature title={"Cutting Edge"} subtitle={"AI Features"} />
-        </div>
+      <div className="flex justify-center pt-4">
+        <Feature title={"Free Forever"} subtitle={"for core features"} />
+        <Feature title={"More apps"} subtitle={"than any other platforms"} />
+        <Feature title={"Cutting Edge"} subtitle={"AI Features"} />
+      </div>
     </div>
-}
\ No newline at end of file
+  );
+};
diff --git a/frontend/components/buttons/PrimaryButton.tsx b/frontend/components/buttons/PrimaryButton.tsx
index 48efaab..e85ba6d 100644
--- a/frontend/components/buttons/PrimaryButton.tsx
+++ b/frontend/components/buttons/PrimaryButton.tsx
@@ -1,11 +1,23 @@
-import { ReactNode } from "react"
+import { ReactNode } from "react";
 
-export const PrimaryButton = ({ children, onClick, size = "small" }: {
-    children: ReactNode,
-    onClick: () => void,
-    size?: "big" | "small"
+export const PrimaryButton = ({
+  children,
+  onClick,
+  size = "small",
+}: {
+  children: ReactNode;
+  onClick: () => void;
+  size?: "big" | "small";
 }) => {
-    return <div onClick={onClick} className={`${size === "small" ? "text-sm" : "text-xl"} ${size === "small" ? "px-8 py-2" : "px-10 py-4"} cursor-pointer hover:shadow-md bg-amber-700 text-white rounded-full text-center flex justify-center flex-col`}>
-        {children}
+  return (
+    <div
+      onClick={onClick}
+      className={`${
+        size === "small" ? "text-sm px-8 py-2" : "text-xl px-14 py-3"
+      } 
+    cursor-pointer hover:shadow-md bg-amber-700 text-white rounded-full text-center flex justify-center flex-col`}
+    >
+      {children}
     </div>
-}
\ No newline at end of file
+  );
+};
diff --git a/frontend/components/buttons/SecondaryButton.tsx b/frontend/components/buttons/SecondaryButton.tsx
index 04f3e7a..4e7e6d9 100644
--- a/frontend/components/buttons/SecondaryButton.tsx
+++ b/frontend/components/buttons/SecondaryButton.tsx
@@ -1,11 +1,22 @@
-import { ReactNode } from "react"
+import { ReactNode } from "react";
 
-export const SecondaryButton = ({ children, onClick, size = "small" }: {
-    children: ReactNode,
-    onClick: () => void,
-    size?: "big" | "small"
+export const SecondaryButton = ({
+  children,
+  onClick,
+  size = "small",
+}: {
+  children: ReactNode;
+  onClick: () => void;
+  size?: "big" | "small";
 }) => {
-    return <div onClick={onClick} className={`${size === "small" ? "text-sm" : "text-xl"} ${size === "small" ? "px-8 pt-2" : "px-10 py-4"} cursor-pointer hover:shadow-md border text-black border-black rounded-full`}>
-        {children}
+  return (
+    <div
+      onClick={onClick}
+      className={`${
+        size === "small" ? "text-sm px-8 py-2" : "text-xl px-14 py-3"
+      } cursor-pointer hover:shadow-md border text-black border-black rounded-full`}
+    >
+      {children}
     </div>
-}
\ No newline at end of file
+  );
+};