osusach
diff --git a/‎.github/pull_request_template.md
-4 b/‎.github/pull_request_template.md
-4
diff --git a/‎app/(auth-pages)/layout.tsx
-7 b/‎app/(auth-pages)/layout.tsx
-7
diff --git a/‎app/(auth-pages)/sign-in/page.tsx
+23-24 b/‎app/(auth-pages)/sign-in/page.tsx
+23-24
diff --git a/‎app/(onboarding)/get-started/page.tsx
+9-1 b/‎app/(onboarding)/get-started/page.tsx
+9-1
diff --git a/‎app/(onboarding)/layout.tsx
-11 b/‎app/(onboarding)/layout.tsx
-11
diff --git a/‎app/layout.tsx
+11-3 b/‎app/layout.tsx
+11-3
@@ -27,10 +27,6 @@
 <!--
 For pull requests that relate or close an issue, please include them
 below.  We like to follow [Github's guidance on linking issues to pull requests](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
-
-For example having the text: "closes #1234" would connect the current pull
-request to issue 1234.  And when we merge the pull request, Github will
-automatically close the issue.
 -->
 
 - Related Issue #
 
@@ -1,39 +1,38 @@
 "use client";
 
-import Link from "next/link";
+import Image from "next/image";
 
 import { Button } from "@/components/ui/button";
 import { signInWithGoogle } from "@/actions/auth";
 
 export default function Login() {
+  const handleSignIn = async () => {
+    await signInWithGoogle();
+  };
+
   return (
-    <div className={"flex justify-center items-center min-h-screen p-5"}>
+    <>
       <div
         className={
-          "flex flex-col items-center gap-4 max-w-md border border-gray-300 rounded-lg p-5 lg:p-10 text-center"
+          "container relative pt-20 flex flex-col justify-center items-center lg:px-0"
         }
       >
-        <h1 className={"text-2xl font-semibold lg:text-3xl"}>Sign in</h1>
-        <p>Continue with</p>
-        <Button
-          onClick={async () => {
-            await signInWithGoogle();
-          }}
-        >
-          Google
-        </Button>
-        <p className={"text-sm"}>
-          By continuing, you agree to our{" "}
-          <Link className={"underline underline-offset-4"} href={"/legal"}>
-            Terms of Service
-          </Link>{" "}
-          and confirm that you have read our{" "}
-          <Link className={"underline underline-offset-4"} href={"/privacy"}>
-            Privacy Policy
-          </Link>
-          .
-        </p>
+        <div className={"mx-auto flex flex-col w-full space-y-6 sm:w-[350px]"}>
+          <div className={"flex flex-col items-center space-y-2 text-center"}>
+            <Image
+              alt={"ChileBecas logo"}
+              height={100}
+              src={"/logo.svg"}
+              width={100}
+            />
+            <h1 className={"text-2xl font-semibold tracking-tight"}>
+              Iniciar sesión
+            </h1>
+          </div>
+          <p className={"text-center text-muted-foreground"}>Continúa con</p>
+          <Button onClick={handleSignIn}>Google</Button>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import { Onboarding } from "@/components/onboarding";
+import { SignOutButton } from "@/components/buttons";
 import { fetchFormOptions, fetchOnboardingMatch } from "@/lib/data";
 
 export const metadata: Metadata = {
@@ -13,7 +14,14 @@ export default async function GetStartedPage() {
   const { matchResult, onboardingProfile } = await fetchOnboardingMatch();
 
   return (
-    <div>
+    <div className={"h-full min-h-screen py-20 px-2.5 bg-gray-100 md:px-0"}>
+      <section
+        className={
+          "w-full max-w-2xl mx-auto flex flex-row justify-center md:justify-end mb-2.5"
+        }
+      >
+        <SignOutButton />
+      </section>
       <Onboarding
         formOptions={{
           cities,
 
@@ -2,6 +2,7 @@ import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
 
 import { Toaster } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";
 
 import "@/app/globals.css";
 
@@ -25,9 +26,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang={"en"}>
-      <body className={`${GeistSans.className} antialiased`}>
-        {children}
+    <html className={"h-full"} lang={"es"}>
+      <body
+        className={cn(
+          "relative h-full font-sans antialiased",
+          GeistSans.className,
+        )}
+      >
+        <main className={"relative flex flex-col min-h-screen"}>
+          <div className={"flex-grow flex-1"}>{children}</div>
+        </main>
         <Toaster />
       </body>
     </html>