diff --git a/api/src/offers.ts b/api/src/offers.ts
index 0c50026..4639f9e 100644
--- a/api/src/offers.ts
+++ b/api/src/offers.ts
@@ -134,8 +134,7 @@ export default function createOffers(log: Log, pg: Pg) {
     async function samples() {
        const user = await pg.userFindEmail('ntr@mnml.gg');
        const offerGroups = await userOffers(user);
-       const i = Math.floor(Math.random() * offerGroups.length / 2);
-       return offerGroups[i];
+       return offerGroups.slice(0, 1);
     }
 
     return {
diff --git a/api/src/rpc.ts b/api/src/rpc.ts
index 3bb4d5a..a8b9490 100644
--- a/api/src/rpc.ts
+++ b/api/src/rpc.ts
@@ -112,18 +112,21 @@ export default function createRpc(log: Log, pg: Pg, ws, discogs: Discogs, offers
         throw new Error(`Invalid parameters for message type ${msgType}: ${JSON.stringify(message)}`);
     }
 
+    async function anonConnection() {
+        const samples = await offers.samples();
+        const sampleMsg: OfferSamplesMessage = [RpcMessageType.OfferSamples, samples];
+        send(sampleMsg);
+    }
+
     async function onConnection() {
+        if (!user) return anonConnection();
+
         const userMsg: UserMessage = [RpcMessageType.User, user];
         send(userMsg);
 
         const wants = await pg.userWants(user);
         const wantsMsg: WantsMessage = [RpcMessageType.Wants, wants];
         send(wantsMsg);
-
-        const samples = await offers.samples();
-        const sampleMsg: OfferSamplesMessage = [RpcMessageType.OfferSamples, samples];
-        // console.log(samples);
-        send(sampleMsg);
     }
 
     function send(msg: RpcMessage) {
diff --git a/client/src/routes/login.tsx b/client/src/routes/login.tsx
index 0dca412..2b0aa41 100644
--- a/client/src/routes/login.tsx
+++ b/client/src/routes/login.tsx
@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import http from './../http';
 import { State, userState } from './../store';
 import Swirl from './../components/swirl';
+import OfferGroup from './../components/offer.group';
 
 const Login = ({ mode }) => {
     const dispatch = useDispatch()
@@ -94,14 +95,20 @@ const Login = ({ mode }) => {
 };
 
 function LoginPage({ mode }) {
+    const offers = useSelector((state: State) => state.offers);
+
     return (
         <div class="landing">
             <Login mode={mode} />
-            <Swirl />
-            <div class='words'>
-                <p>Mates Crates is a record importing service.</p>
-                <p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>
-                <p>Based in Preston.</p>
+            <div class='offers'>
+               {offers.map(OfferGroup)}
+               <div>
+                <Swirl />
+                <div class='words'>
+                    <p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>
+                    <p>Based in Preston.</p>
+                </div>
+                </div>
             </div>
         </div>
     )
diff --git a/client/src/store.tsx b/client/src/store.tsx
index 053f377..a25dd5d 100644
--- a/client/src/store.tsx
+++ b/client/src/store.tsx
@@ -11,7 +11,7 @@ export const userState = createSlice({
 
 export const offersState = createSlice({
   name: 'offers',
-  initialState: null,
+  initialState: [],
   reducers: {
     set: (state, action) => action.payload
   },
diff --git a/client/src/style/index.less b/client/src/style/index.less
index 33e679b..e2056c5 100644
--- a/client/src/style/index.less
+++ b/client/src/style/index.less
@@ -217,6 +217,7 @@ button, [type=submit] {
     grid-gap: calc(var(--spacing-double) * 2);
     grid-template-areas:
         "login swirl"
+        "login sample"
         "login words";
 
     .login {
@@ -227,8 +228,8 @@ button, [type=submit] {
     }
 
     .swirl {
-        grid-area: swirl;
-        height: 15rem;
+        // grid-area: swirl;
+        height: 5rem;
     }
 
     .words {
@@ -344,8 +345,6 @@ article {
 }
 
 form {
-    margin-bottom: var(--spacing);
-
     label, input {
         display: block;
     }
@@ -365,7 +364,6 @@ form {
         text-transform: uppercase;
         margin-bottom: var(--spacing-half);
     }
-
 }
 
 a {
diff --git a/client/src/ws.ts b/client/src/ws.ts
index 69fbe68..e9b6ad1 100644
--- a/client/src/ws.ts
+++ b/client/src/ws.ts
@@ -84,6 +84,7 @@ export default function createSocket(dispatch) {
         Offers: onOffers,
         User: onUser,
 
+        OfferSamples: onOffers,
         AcpOffers: onAcpOffers,
 
         Pong: onPong,