diff --git a/apps/www/src/routes/pricing/index.tsx b/apps/www/src/routes/pricing/index.tsx
index f88bee7..aa97f07 100644
--- a/apps/www/src/routes/pricing/index.tsx
+++ b/apps/www/src/routes/pricing/index.tsx
@@ -1,4 +1,4 @@
-import { component$, useSignal } from "@builder.io/qwik";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import { TitleSection, MotionComponent, transition } from "@nestri/ui/react";
 import { NavBar, Footer, Book } from "@nestri/ui"
 import { cn } from "@nestri/ui/design";
@@ -65,6 +65,26 @@ export default component$(() => {
     const audioUrl = new URL('./cash.mp3', import.meta.url).href
     const audio = useSignal<HTMLAudioElement | undefined>()
 
+    const buttonRef = useSignal<HTMLButtonElement | undefined>()
+    const bookRef = useSignal<HTMLButtonElement | undefined>()
+
+    useVisibleTask$(() => {
+        buttonRef.value?.addEventListener("mouseenter", () => {
+            bookRef.value?.classList.add('flip')
+        })
+        buttonRef.value?.addEventListener("mouseleave", () => {
+            bookRef.value?.classList.remove('flip')
+        })
+        return () => {
+            buttonRef.value?.removeEventListener("mouseenter", () => {
+                bookRef.value?.classList.add('flip')
+            })
+            buttonRef.value?.removeEventListener("mouseleave", () => {
+                bookRef.value?.classList.remove('flip')
+            })
+        }
+    })
+
     return (
         <>
             <NavBar />
@@ -97,7 +117,7 @@ export default component$(() => {
                                     <div class="flex flex-col w-full">
                                         <p class="text-[4rem] leading-[1] font-medium font-title"> Free </p>
                                         {/**FIXME: Add the link to the docs here */}
-                                        <button class="h-[154px] w-full flex items-start pt-4 justify-center overflow-hidden">
+                                        <button ref={v => bookRef.value = v} class="h-[154px] w-full flex items-start pt-4 justify-center overflow-hidden">
                                             <Book textColor="#FFF"
                                                 bgColor="#FF4F01"
                                                 title="Getting started with Nestri" class="shadow-lg shadow-gray-900 dark:shadow-gray-300" />
@@ -193,11 +213,12 @@ export default component$(() => {
                                             </div>
                                         </div>
                                     </div>
-                                    <button class="bg-white group my-4 max-w-full dark:bg-black text-gray-900/70 hover:ring-primary-500 rounded-lg outline-none dark:text-gray-100/70 ring-2 text-sm h-max ring-gray-300 dark:ring-gray-700 py-2 px-4 flex items-center hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-200 focus:bg-primary-100 dark:focus:bg-primary-900 focus:text-primary-500 focus:ring-primary-500 font-title font-bold justify-between">
-                                        <p class="overflow-hidden overflow-ellipsis max-w-[210px] text-left whitespace-nowrap font-mono">curl -fsSL https://nestri.io/install | bash</p>
-                                        <div class="ml-auto flex items-center">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="group-focus:hidden size-6 flex-shrink-0" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593s1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.6 3.6 0 0 0 15.24 2" /><path fill="currentColor" d="M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847S21 8.671 21 11.397v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936z" /></svg>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="group-focus:block hidden text-green-500 size-6 flex-shrink-0" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" /></svg>
+                                    <button ref={v => buttonRef.value = v} class="my-4 bg-white dark:bg-black focus:ring-primary-500 hover:ring-primary-500 ring-gray-500 rounded-lg outline-none dark:text-gray-100/70 ring-2 text-sm h-max py-2 px-4 flex items-center transition-all duration-200 focus:bg-primary-100 focus:dark:bg-primary-900 focus:text-primary-500 text-gray-500 font-title font-bold justify-between">
+                                        Read the Docs
+                                        <div class="size-5 relative">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
+                                                <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
+                                            </svg>
                                         </div>
                                     </button>
                                 </div>
diff --git a/packages/ui/src/react/hero-section.tsx b/packages/ui/src/react/hero-section.tsx
index e872baa..8fce901 100644
--- a/packages/ui/src/react/hero-section.tsx
+++ b/packages/ui/src/react/hero-section.tsx
@@ -89,7 +89,7 @@ export function ReactHeroSection({ children }: Props) {
                             viewport={{ once: true }}
                             className="dark:text-gray-50/70 text-gray-950/70 text-lg font-normal tracking-tight sm:text-xl"
                         >
-                            Nestri is a cloud gaming platform that lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by hosting your own server.
+                            Nestri is an open-source cloud gaming platform that lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by hosting on your own server.
                         </motion.p>
                         <motion.div
                             initial={{