diff --git a/web/components/page.tsx b/web/components/page.tsx
index 5e150ba3..f72db80e 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -3,7 +3,6 @@ import { ReactNode } from 'react'
 import { BottomNavBar } from './nav/bottom-nav-bar'
 import Sidebar from './nav/sidebar'
 import { Toaster } from 'react-hot-toast'
-import { ScrollToTopButton } from './scroll-to-top-button'
 
 export function Page(props: {
   rightSidebar?: ReactNode
@@ -54,7 +53,6 @@ export function Page(props: {
           </div>
         </aside>
       </div>
-      <ScrollToTopButton className="inset-left-[90%] inset-right-0 fixed bottom-8" />
       <BottomNavBar />
     </>
   )
diff --git a/web/components/scroll-to-top-button.tsx b/web/components/scroll-to-top-button.tsx
index 22661229..ffe001f3 100644
--- a/web/components/scroll-to-top-button.tsx
+++ b/web/components/scroll-to-top-button.tsx
@@ -1,7 +1,8 @@
-import { ArrowCircleUpIcon } from '@heroicons/react/solid'
+import { ArrowCircleUpIcon, ArrowUpIcon } from '@heroicons/react/solid'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 import { Button } from './button'
+import { Row } from './layout/row'
 
 export function ScrollToTopButton(props: { className?: string }) {
   const { className } = props
@@ -9,7 +10,7 @@ export function ScrollToTopButton(props: { className?: string }) {
 
   useEffect(() => {
     window.addEventListener('scroll', () => {
-      if (window.scrollY > 400) {
+      if (window.scrollY > 500) {
         console.log('button commence')
         setVisible(true)
       } else {
@@ -28,12 +29,16 @@ export function ScrollToTopButton(props: { className?: string }) {
   return (
     <button
       className={clsx(
-        'border-5 h-14 w-14 border border-yellow-400 bg-green-400',
+        'border-greyscale-2 bg-greyscale-1 rounded-full border py-2 px-4 text-sm',
         visible ? 'inline' : 'hidden',
         className
       )}
+      onClick={scrollToTop}
     >
-      <ArrowCircleUpIcon onClick={scrollToTop} />
+      <Row className="text-greyscale-6 gap-1 align-middle">
+        <ArrowUpIcon className="text-greyscale-4 h-5 w-5" />
+        Scroll to top
+      </Row>
     </button>
   )
 }
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index b65f22ff..6dacdde2 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -48,6 +48,7 @@ import BetButton from 'web/components/bet-button'
 import { BetsSummary } from 'web/components/bet-summary'
 import { listAllComments } from 'web/lib/firebase/comments'
 import { ContractComment } from 'common/comment'
+import { ScrollToTopButton } from 'web/components/scroll-to-top-button'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -274,23 +275,9 @@ export function ContractPageContent(
           userBets={userBets}
           comments={comments}
         />
-
-        {!user ? (
-          <Col className="mt-4 max-w-sm items-center xl:hidden">
-            <BetSignUpPrompt />
-            <PlayMoneyDisclaimer />
-          </Col>
-        ) : (
-          outcomeType === 'BINARY' &&
-          allowTrade && (
-            <BetButton
-              contract={contract as CPMMBinaryContract}
-              className="mb-2 !mt-0 xl:hidden"
-            />
-          )
-        )}
       </Col>
       <RecommendedContractsWidget contract={contract} />
+      <ScrollToTopButton className="fixed bottom-16 right-2 z-20 lg:bottom-2 xl:hidden" />
     </Page>
   )
 }