diff --git a/package-lock.json b/package-lock.json
index 27d0e5b..9374a23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "prisma": "^5.15.0",
         "react": "^18.2.0",
         "react-calendar": "^5.0.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^5.3.0"
       },
       "devDependencies": {
         "@snaplet/copycat": "^5.0.0",
@@ -7474,6 +7475,15 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "license": "MIT"
diff --git a/package.json b/package.json
index 923c645..8e96353 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "prisma": "^5.15.0",
     "react": "^18.2.0",
     "react-calendar": "^5.0.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@snaplet/copycat": "^5.0.0",
diff --git a/public/images/sistema_logo_colour.png b/public/images/sistema_logo_colour.png
new file mode 100755
index 0000000..61ca0fd
Binary files /dev/null and b/public/images/sistema_logo_colour.png differ
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 46475fa..ba91e68 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -1,11 +1,23 @@
 // importing from next-auth/react instead of our root's auth.ts because of Client & Server component issues.
 // https://authjs.dev/getting-started/session-management/login
 import { signIn } from 'next-auth/react';
+import { Button } from '@chakra-ui/react';
+import { FcGoogle } from 'react-icons/fc';
 
-export function SignInButton() {
+export function SignInButton(): JSX.Element {
   return (
-    <button onClick={() => signIn('google', { callbackUrl: `/homepage` })}>
-      Sign In Google
-    </button>
+    <Button
+      variant="outline"
+      borderColor="blue.400"
+      colorScheme="gray"
+      width="275px"
+      height="45px"
+      color="text"
+      fontWeight="bold"
+      leftIcon={<FcGoogle fontSize="18px" />}
+      onClick={() => signIn('google', { callbackUrl: `/homepage` })}
+    >
+      Sign in with Google
+    </Button>
   );
 }
diff --git a/src/components/SistemaLogoColour.tsx b/src/components/SistemaLogoColour.tsx
new file mode 100644
index 0000000..785c6d6
--- /dev/null
+++ b/src/components/SistemaLogoColour.tsx
@@ -0,0 +1,7 @@
+import { Image } from '@chakra-ui/react';
+
+export function SistemaLogoColour() {
+  return (
+    <Image src="/images/sistema_logo_colour.png" alt="Sistema Logo Colour" />
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5df9aa3..f384a24 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,18 +1,19 @@
 import { SignInButton } from '../components/SignInButton';
-import { SignOutButton } from '../components/SignOutButton';
-import { useSession } from 'next-auth/react';
+import { SistemaLogoColour } from '../components/SistemaLogoColour';
+import { Box, Flex, Text } from '@chakra-ui/react';
 
-export default function Index() {
-  const session = useSession();
+export default function Index(): JSX.Element {
   return (
-    <>
+    <Flex direction="column" align="center" justify="center" height="100vh">
+      <Box width="280px" height="auto" mb="5">
+        <SistemaLogoColour />
+      </Box>
+
+      <Text color="text" fontSize="small" mb="3">
+        Only sign in with a Sistema email.
+      </Text>
+
       <SignInButton />
-      <br />
-      <SignOutButton />
-      <br />
-      <pre className="py-6 px-4 whitespace-pre-wrap break-all">
-        {JSON.stringify(session, null, 2)}
-      </pre>
-    </>
+    </Flex>
   );
 }