diff --git a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx
index 73b0453c0..aa23ce6d0 100644
--- a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx
+++ b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx
@@ -1,12 +1,15 @@
-import type { DealTicketContainerProps } from '@vegaprotocol/deal-ticket';
+import { useParams } from 'react-router-dom';
 import {
   DealTicketManager,
   DealTicketContainer as Container,
 } from '@vegaprotocol/deal-ticket';
 import { DealTicketSteps } from './deal-ticket-steps';
 
-export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
-  return (
+const tempEmptyText = <p>Please select a market from the markets page</p>;
+
+export const DealTicketContainer = () => {
+  const { marketId } = useParams<{ marketId: string }>();
+  return marketId ? (
     <Container marketId={marketId}>
       {(data) => (
         <DealTicketManager market={data.market}>
@@ -14,5 +17,7 @@ export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
         </DealTicketManager>
       )}
     </Container>
+  ) : (
+    tempEmptyText
   );
 };
diff --git a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx
index 1f102cabe..7a00b91dd 100644
--- a/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx
+++ b/apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-steps.tsx
@@ -70,7 +70,7 @@ export const DealTicketSteps = ({ market }: DealTicketMarketProps) => {
     {
       label: 'Select Asset',
       description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
-      component: <div />,
+      component: <h1 className="font-bold mb-16">{market.name}</h1>,
     },
     {
       label: 'Select Order Type',
diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx
index 82641266b..850f718a1 100644
--- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx
@@ -5,6 +5,13 @@ import { MarketState } from '@vegaprotocol/types';
 import SimpleMarketList from './simple-market-list';
 import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
 
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigate,
+}));
+
 jest.mock('./data-provider', () => jest.fn());
 
 jest.mock('@vegaprotocol/react-helpers', () => ({
diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx
index 74d715352..8077c99c8 100644
--- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, Lozenge, Splash } from '@vegaprotocol/ui-toolkit';
@@ -9,6 +10,7 @@ import DataProvider from './data-provider';
 import { MARKET_STATUS } from './constants';
 
 const SimpleMarketList = () => {
+  const navigate = useNavigate();
   const variables = useMemo(
     () => ({
       CandleInterval: 'I1H',
@@ -21,10 +23,13 @@ const SimpleMarketList = () => {
     undefined, // @TODO - if we need a live update in the future
     variables
   );
-  const onClick = useCallback((marketId) => {
-    // @TODO - let's try to have navigation first
-    console.log('trigger market', marketId);
-  }, []);
+  const onClick = useCallback(
+    (marketId) => {
+      navigate(`/trading/${marketId}`);
+    },
+    [navigate]
+  );
+
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
       {data && data.length > 0 ? (
diff --git a/apps/simple-trading-app/src/app/routes/router-config.tsx b/apps/simple-trading-app/src/app/routes/router-config.tsx
index fba2f22f7..29c7b8b20 100644
--- a/apps/simple-trading-app/src/app/routes/router-config.tsx
+++ b/apps/simple-trading-app/src/app/routes/router-config.tsx
@@ -28,13 +28,13 @@ export const routerConfig = [
     path: ROUTES.TRADING,
     name: 'Trading',
     text: t('Trading'),
-    element: (
-      <DealTicketContainer
-        marketId={
-          '41013c28d53a72225c07cf2660cdd415d9dd0e9317ec4574e77592332db35596'
-        }
-      />
-    ),
+    element: <DealTicketContainer />,
+    children: [
+      {
+        path: ':marketId',
+        element: <DealTicketContainer />,
+      },
+    ],
   },
   {
     path: ROUTES.LIQUIDITY,
diff --git a/apps/trading-e2e/src/support/mocks/generate-deal-ticket-query.ts b/apps/trading-e2e/src/support/mocks/generate-deal-ticket-query.ts
index 961d17d0f..b7ff0b6c9 100644
--- a/apps/trading-e2e/src/support/mocks/generate-deal-ticket-query.ts
+++ b/apps/trading-e2e/src/support/mocks/generate-deal-ticket-query.ts
@@ -9,6 +9,7 @@ export const generateDealTicketQuery = (
   const defaultResult: DealTicketQuery = {
     market: {
       id: 'market-id',
+      name: 'ETHBTC Quarterly (30 Jun 2022)',
       decimalPlaces: 2,
       positionDecimalPlaces: 1,
       state: MarketState.Active,
diff --git a/libs/deal-ticket/src/__generated__/DealTicketQuery.ts b/libs/deal-ticket/src/__generated__/DealTicketQuery.ts
index efb10e5c5..5bb0c3d36 100644
--- a/libs/deal-ticket/src/__generated__/DealTicketQuery.ts
+++ b/libs/deal-ticket/src/__generated__/DealTicketQuery.ts
@@ -55,6 +55,10 @@ export interface DealTicketQuery_market {
    * Market ID
    */
   id: string;
+  /**
+   * Market full name
+   */
+  name: string;
   /**
    * decimalPlaces indicates the number of decimal places that an integer must be shifted by in order to get a correct
    * number denominated in the currency of the Market. (uint64)
diff --git a/libs/deal-ticket/src/components/deal-ticket-container.tsx b/libs/deal-ticket/src/components/deal-ticket-container.tsx
index 4f3c0f6e1..03d7bfc9a 100644
--- a/libs/deal-ticket/src/components/deal-ticket-container.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket-container.tsx
@@ -1,5 +1,5 @@
-import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { gql, useQuery } from '@apollo/client';
+import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { DealTicketManager } from './deal-ticket-manager';
 import type {
   DealTicketQuery,
@@ -11,6 +11,7 @@ const DEAL_TICKET_QUERY = gql`
   query DealTicketQuery($marketId: ID!) {
     market(id: $marketId) {
       id
+      name
       decimalPlaces
       positionDecimalPlaces
       state