diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx
index 2360e675..8feb4a41 100644
--- a/web/components/feed-create.tsx
+++ b/web/components/feed-create.tsx
@@ -1,11 +1,43 @@
 import { useUser } from '../hooks/use-user'
 import { AvatarWithIcon } from './contract-feed'
-import { Col } from './layout/col'
 import { Title } from './title'
 import Textarea from 'react-expanding-textarea'
 import { useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
+import { firebaseLogin } from '../lib/firebase/users'
+import { useHotContracts } from '../hooks/use-contracts'
+import { ContractsGrid } from './contracts-list'
+
+export function FeedPromo() {
+  // TODO: Encode in statc props
+  const hotContracts = useHotContracts()
+
+  return (
+    <div className="w-full">
+      <Title text="Bet on the future and win" className="!mb-2 text-black" />
+      <div className="text-gray-500 mb-4">
+        <button
+          className="bg-gradient-to-r gradient-to-r from-teal-500 to-green-500 text-transparent bg-clip-text hover:underline hover:decoration-gray-300 hover:decoration-2"
+          onClick={firebaseLogin}
+        >
+          Sign up for free
+        </button>{' '}
+        and trade in any prediction market. Our hottest markets today:
+      </div>
+
+      <ContractsGrid
+        contracts={hotContracts?.slice(0, 2) || []}
+        showHotVolume
+      />
+
+      <Spacer h={4} />
+      <div className="text-gray-800 text-lg mb-0 mt-2">
+        Recent community activity
+      </div>
+    </div>
+  )
+}
 
 export default function FeedCreate() {
   const user = useUser()
@@ -13,7 +45,7 @@ export default function FeedCreate() {
 
   if (!user) {
     // TODO: Improve logged-out experience
-    return <Title text="Sign in to start trading!" />
+    return <FeedPromo />
   }
 
   const placeholders = [
@@ -30,41 +62,39 @@ export default function FeedCreate() {
   const placeholder = placeholders[daysSinceEpoch % placeholders.length]
 
   return (
-    <Col className="items-center">
-      <div className="w-full max-w-3xl bg-indigo-50 rounded-md p-4">
-        <div className="relative flex items-start space-x-3">
-          <AvatarWithIcon
-            username={user.username}
-            avatarUrl={user.avatarUrl || ''}
+    <div className="w-full bg-indigo-50 rounded-md p-4">
+      <div className="relative flex items-start space-x-3">
+        <AvatarWithIcon
+          username={user.username}
+          avatarUrl={user.avatarUrl || ''}
+        />
+        <div className="min-w-0 flex-1">
+          {/* TODO: Show focus, for accessibility */}
+          <div>
+            <p className="my-0.5 text-sm">Ask a question... </p>
+          </div>
+          <Textarea
+            className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent"
+            placeholder={`e.g. ${placeholder}`}
+            value={question}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setQuestion(e.target.value || '')}
           />
-          <div className="min-w-0 flex-1">
-            {/* TODO: Show focus, for accessibility */}
-            <div>
-              <p className="my-0.5 text-sm">Ask a question... </p>
-            </div>
-            <Textarea
-              className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent"
-              placeholder={`e.g. ${placeholder}`}
-              value={question}
-              onClick={(e) => e.stopPropagation()}
-              onChange={(e) => setQuestion(e.target.value || '')}
-            />
-            <Spacer h={4} />
-          </div>
+          <Spacer h={4} />
         </div>
-        {/* Hide component instead of deleting, so edits to NewContract don't get lost */}
-        <div className={question ? '' : 'hidden'}>
-          <NewContract question={question} />
-        </div>
-        {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
-        {!question && (
-          <div className="flex justify-end">
-            <button className="btn" disabled>
-              Create Market
-            </button>
-          </div>
-        )}
       </div>
-    </Col>
+      {/* Hide component instead of deleting, so edits to NewContract don't get lost */}
+      <div className={question ? '' : 'hidden'}>
+        <NewContract question={question} />
+      </div>
+      {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
+      {!question && (
+        <div className="flex justify-end">
+          <button className="btn" disabled>
+            Create Market
+          </button>
+        </div>
+      )}
+    </div>
   )
 }
diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx
index 7f62230a..246864b1 100644
--- a/web/components/nav-bar.tsx
+++ b/web/components/nav-bar.tsx
@@ -70,15 +70,12 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
 
       {user === null ? (
         <>
-          <div
-            className={clsx(
-              'text-base font-medium cursor-pointer whitespace-nowrap',
-              themeClasses
-            )}
+          <button
+            className="btn border-none normal-case text-base font-medium px-6 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
             onClick={firebaseLogin}
           >
             Sign in
-          </div>
+          </button>
         </>
       ) : (
         <>
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index b49679b8..3443cd6d 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -11,6 +11,7 @@ import {
 import { Bet, listAllBets } from '../lib/firebase/bets'
 import FeedCreate from '../components/feed-create'
 import { Spacer } from '../components/layout/spacer'
+import { Col } from '../components/layout/col'
 
 export async function getStaticProps() {
   const [contracts, recentComments] = await Promise.all([
@@ -46,13 +47,17 @@ const Home = (props: {
 
   return (
     <Page>
-      <FeedCreate />
-      <Spacer h={5} />
-      <ActivityFeed
-        contracts={activeContracts}
-        contractBets={activeContractBets}
-        contractComments={activeContractComments}
-      />
+      <Col className="items-center">
+        <Col className="max-w-3xl">
+          <FeedCreate />
+          <Spacer h={4} />
+          <ActivityFeed
+            contracts={activeContracts}
+            contractBets={activeContractBets}
+            contractComments={activeContractComments}
+          />
+        </Col>
+      </Col>
     </Page>
   )
 }