diff --git a/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts b/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts
index 74d29fab0..859922bc7 100644
--- a/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts
+++ b/apps/simple-trading-app-e2e/src/integration/market-trade.test.ts
@@ -7,18 +7,7 @@ import { generateEstimateOrder } from '../support/mocks/generate-estimate-order'
 import { generatePartyBalance } from '../support/mocks/generate-party-balance';
 import { generatePartyMarketData } from '../support/mocks/generate-party-market-data';
 import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
-
-const connectVegaWallet = () => {
-  const form = 'rest-connector-form';
-  const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
-  const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
-
-  cy.getByTestId('connect-vega-wallet').click();
-  cy.getByTestId('connectors-list').find('button').click();
-  cy.getByTestId(form).find('#wallet').click().type(walletName);
-  cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
-  cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
-};
+import { connectVegaWallet } from '../support/connect-wallet';
 
 describe('Market trade', () => {
   let markets;
diff --git a/apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts b/apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts
new file mode 100644
index 000000000..ba80d220b
--- /dev/null
+++ b/apps/simple-trading-app-e2e/src/integration/portfolio-page.test.ts
@@ -0,0 +1,34 @@
+import {
+  connectVegaWallet,
+  disconnectVegaWallet,
+} from '../support/connect-wallet';
+
+describe('Portfolio page', () => {
+  afterEach(() => {
+    disconnectVegaWallet();
+  });
+
+  it('button for wallet connect should work', () => {
+    cy.visit('/');
+    cy.get('[href="/portfolio"]').eq(0).click();
+    cy.getByTestId('connect-vega-wallet-text').should('be.visible');
+    connectVegaWallet();
+    cy.getByTestId('connect-vega-wallet-text').should('not.exist');
+  });
+
+  it('certain tabs should exist', () => {
+    cy.visit('/portfolio');
+    connectVegaWallet();
+    cy.getByTestId('Assets').should('exist');
+    cy.getByTestId('tab-assets').should('exist');
+
+    cy.getByTestId('Positions').click();
+    cy.getByTestId('tab-positions').should('exist');
+
+    cy.getByTestId('Orders').click();
+    cy.getByTestId('tab-orders').should('exist');
+
+    cy.getByTestId('Fills').click();
+    cy.getByTestId('tab-fills').should('exist');
+  });
+});
diff --git a/apps/simple-trading-app-e2e/src/support/connect-wallet.ts b/apps/simple-trading-app-e2e/src/support/connect-wallet.ts
new file mode 100644
index 000000000..473548610
--- /dev/null
+++ b/apps/simple-trading-app-e2e/src/support/connect-wallet.ts
@@ -0,0 +1,16 @@
+export const connectVegaWallet = () => {
+  const form = 'rest-connector-form';
+  const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
+  const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
+
+  cy.getByTestId('connect-vega-wallet').click();
+  cy.getByTestId('connectors-list').find('button').click();
+  cy.getByTestId(form).find('#wallet').click().type(walletName);
+  cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
+  cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
+};
+
+export const disconnectVegaWallet = () => {
+  cy.getByTestId('connect-vega-wallet').click();
+  cy.getByTestId('disconnect').click();
+};
diff --git a/apps/simple-trading-app/src/app/app.tsx b/apps/simple-trading-app/src/app/app.tsx
index daf1e5358..74b0487ac 100644
--- a/apps/simple-trading-app/src/app/app.tsx
+++ b/apps/simple-trading-app/src/app/app.tsx
@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { createClient } from './lib/apollo-client';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
-import { createClient } from './lib/apollo-client';
 import {
   VegaConnectDialog,
   VegaManageDialog,
@@ -13,14 +14,12 @@ import '../styles.scss';
 import { AppLoader } from './components/app-loader';
 import Header from './components/header';
 import { Main } from './components/main';
-import { useLocation } from 'react-router-dom';
+import LocalContext from './context/local-context';
+import useLocalValues from './hooks/use-local-values';
 
 function App() {
+  const localValues = useLocalValues();
   const [theme, toggleTheme] = useThemeSwitcher();
-  const [vegaWallet, setVegaWallet] = useState({
-    connect: false,
-    manage: false,
-  });
 
   const [menuOpen, setMenuOpen] = useState(false);
   const onToggle = () => setMenuOpen(!menuOpen);
@@ -36,28 +35,23 @@ function App() {
       <ThemeContext.Provider value={theme}>
         <NetworkLoader createClient={createClient}>
           <VegaWalletProvider>
-            <AppLoader>
-              <div className="max-h-full min-h-full dark:bg-lite-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
-                <Header
-                  setVegaWallet={setVegaWallet}
-                  toggleTheme={toggleTheme}
-                />
-                <Main isMenuOpen={menuOpen} onToggle={onToggle} />
-                <VegaConnectDialog
-                  connectors={Connectors}
-                  dialogOpen={vegaWallet.connect}
-                  setDialogOpen={(open) =>
-                    setVegaWallet((x) => ({ ...x, connect: open }))
-                  }
-                />
-                <VegaManageDialog
-                  dialogOpen={vegaWallet.manage}
-                  setDialogOpen={(open) =>
-                    setVegaWallet((x) => ({ ...x, manage: open }))
-                  }
-                />
-              </div>
-            </AppLoader>
+            <LocalContext.Provider value={localValues}>
+              <AppLoader>
+                <div className="max-h-full min-h-full dark:bg-lite-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
+                  <Header toggleTheme={toggleTheme} />
+                  <Main isMenuOpen={menuOpen} onToggle={onToggle} />
+                  <VegaConnectDialog
+                    connectors={Connectors}
+                    dialogOpen={localValues.vegaWalletDialog.connect}
+                    setDialogOpen={localValues.vegaWalletDialog.setConnect}
+                  />
+                  <VegaManageDialog
+                    dialogOpen={localValues.vegaWalletDialog.manage}
+                    setDialogOpen={localValues.vegaWalletDialog.setManage}
+                  />
+                </div>
+              </AppLoader>
+            </LocalContext.Provider>
           </VegaWalletProvider>
         </NetworkLoader>
       </ThemeContext.Provider>
diff --git a/apps/simple-trading-app/src/app/components/header/header.tsx b/apps/simple-trading-app/src/app/components/header/header.tsx
index f97499029..8d39b1961 100644
--- a/apps/simple-trading-app/src/app/components/header/header.tsx
+++ b/apps/simple-trading-app/src/app/components/header/header.tsx
@@ -1,18 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import Logo from './logo';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-
-type WalletParams = {
-  connect: boolean;
-  manage: boolean;
-};
+import LocalContext from '../../context/local-context';
 
 interface Props {
-  setVegaWallet: (func: (wParams: WalletParams) => WalletParams) => void;
   toggleTheme: () => void;
 }
-const Header = ({ setVegaWallet, toggleTheme }: Props) => {
+const Header = ({ toggleTheme }: Props) => {
+  const {
+    vegaWalletDialog: { setConnect, setManage },
+  } = useContext(LocalContext);
   return (
     <div
       className="flex items-stretch pr-16 py-16 bg-black text-white-60"
@@ -21,12 +19,8 @@ const Header = ({ setVegaWallet, toggleTheme }: Props) => {
       <Logo />
       <div className="flex items-center gap-4 ml-auto mr-8 relative z-10">
         <VegaWalletConnectButton
-          setConnectDialog={(open) =>
-            setVegaWallet((x) => ({ ...x, connect: open }))
-          }
-          setManageDialog={(open) =>
-            setVegaWallet((x) => ({ ...x, manage: open }))
-          }
+          setConnectDialog={setConnect}
+          setManageDialog={setManage}
         />
         <ThemeSwitcher
           onToggle={toggleTheme}
diff --git a/apps/simple-trading-app/src/app/components/portfolio/portfolio.tsx b/apps/simple-trading-app/src/app/components/portfolio/portfolio.tsx
index ea6424d32..e915a4973 100644
--- a/apps/simple-trading-app/src/app/components/portfolio/portfolio.tsx
+++ b/apps/simple-trading-app/src/app/components/portfolio/portfolio.tsx
@@ -1,13 +1,49 @@
+import { useContext } from 'react';
 import { AccountsContainer } from '@vegaprotocol/accounts';
 import { t } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { Button, Splash, Tabs, Tab } from '@vegaprotocol/ui-toolkit';
+import LocalContext from '../../context/local-context';
+import { OrderListContainer } from '@vegaprotocol/orders';
+import { PositionsContainer } from '@vegaprotocol/positions';
+import { FillsContainer } from '@vegaprotocol/fills';
 
 export const Portfolio = () => {
+  const { keypair } = useVegaWallet();
+  const {
+    vegaWalletDialog: { setConnect },
+  } = useContext(LocalContext);
+  if (!keypair) {
+    return (
+      <Splash>
+        <div className="text-center">
+          <p className="mb-12" data-testid="connect-vega-wallet-text">
+            {t('Connect your Vega wallet')}
+          </p>
+          <Button
+            onClick={() => setConnect(true)}
+            data-testid="vega-wallet-connect"
+          >
+            {t('Connect')}
+          </Button>
+        </div>
+      </Splash>
+    );
+  }
   return (
-    <section>
-      <h2 className="text-lg mb-16">{t('Assets')}</h2>
-      <div className="h-screen">
+    <Tabs>
+      <Tab id="assets" name={t('Assets')}>
         <AccountsContainer />
-      </div>
-    </section>
+      </Tab>
+      <Tab id="positions" name={t('Positions')}>
+        <PositionsContainer />
+      </Tab>
+      <Tab id="orders" name={t('Orders')}>
+        <OrderListContainer />
+      </Tab>
+      <Tab id="fills" name={t('Fills')}>
+        <FillsContainer />
+      </Tab>
+    </Tabs>
   );
 };
diff --git a/apps/simple-trading-app/src/app/context/local-context.ts b/apps/simple-trading-app/src/app/context/local-context.ts
new file mode 100644
index 000000000..53edc95ea
--- /dev/null
+++ b/apps/simple-trading-app/src/app/context/local-context.ts
@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+export interface VegaWalletDialogState {
+  connect: boolean;
+  manage: boolean;
+  setConnect: (isOpen: boolean) => void;
+  setManage: (isOpen: boolean) => void;
+}
+
+export interface LocalValues {
+  vegaWalletDialog: VegaWalletDialogState;
+}
+
+const LocalContext = createContext<LocalValues>({} as LocalValues);
+
+export default LocalContext;
diff --git a/apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts b/apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts
new file mode 100644
index 000000000..53b58f993
--- /dev/null
+++ b/apps/simple-trading-app/src/app/hooks/use-local-values.spec.ts
@@ -0,0 +1,17 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useLocalValues from './use-local-values';
+
+describe('local values hook', () => {
+  it('state of wallet dialog should be properly handled', () => {
+    const { result } = renderHook(() => useLocalValues());
+    expect(result.current.vegaWalletDialog).toBeDefined();
+    expect(result.current.vegaWalletDialog.manage).toBe(false);
+    expect(result.current.vegaWalletDialog.connect).toBe(false);
+    act(() => {
+      result.current.vegaWalletDialog.setConnect(true);
+      result.current.vegaWalletDialog.setManage(true);
+    });
+    expect(result.current.vegaWalletDialog.manage).toBe(true);
+    expect(result.current.vegaWalletDialog.connect).toBe(true);
+  });
+});
diff --git a/apps/simple-trading-app/src/app/hooks/use-local-values.ts b/apps/simple-trading-app/src/app/hooks/use-local-values.ts
new file mode 100644
index 000000000..502ed7877
--- /dev/null
+++ b/apps/simple-trading-app/src/app/hooks/use-local-values.ts
@@ -0,0 +1,15 @@
+import { useMemo, useState } from 'react';
+import type { LocalValues } from '../context/local-context';
+
+const useLocalValues = () => {
+  const [connect, setConnect] = useState<boolean>(false);
+  const [manage, setManage] = useState<boolean>(false);
+  return useMemo<LocalValues>(
+    () => ({
+      vegaWalletDialog: { connect, manage, setConnect, setManage },
+    }),
+    [connect, manage, setConnect, setManage]
+  );
+};
+
+export default useLocalValues;