diff --git a/src/pages/index.js b/src/pages/index.js
index 4c95d95..fe41454 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,6 +4,8 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 
 import styles from "./index.module.css";
+import Link from "@docusaurus/Link";
+import Head from "@docusaurus/Head";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -12,6 +14,14 @@ function HomepageHeader() {
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link className="button button--secondary button--lg" to="/java">
+            <i class="fa-brands fa-java"></i> Java
+          </Link>
+          <Link className="button button--secondary button--lg" to="/robot">
+            <i class="fa-solid fa-robot"></i> Robot
+          </Link>
+        </div>
       </div>
     </header>
   );
@@ -21,6 +31,12 @@ export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout title={`${siteConfig.title}`} description="Documentation PLS 5618">
+      <Head>
+        <script
+          src="https://kit.fontawesome.com/9e215b042a.js"
+          crossorigin="anonymous"
+        ></script>
+      </Head>
       <HomepageHeader />
       <main></main>
     </Layout>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..de8e181 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -20,4 +20,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
 }
