diff --git a/apps/simple-trading-app-e2e/src/integration/header.test.ts b/apps/simple-trading-app-e2e/src/integration/header.test.ts
new file mode 100644
index 000000000..65243eaab
--- /dev/null
+++ b/apps/simple-trading-app-e2e/src/integration/header.test.ts
@@ -0,0 +1,30 @@
+describe('console lite header', () => {
+  beforeEach(() => {
+    window.localStorage.setItem('theme', 'dark');
+    cy.visit('/');
+  });
+
+  it('logo should linked home', () => {
+    cy.get('span').contains('Markets').click();
+    cy.location('pathname').should('eq', '/markets');
+    cy.getByTestId('header').find('a').click();
+    cy.location('pathname').should('eq', '/');
+  });
+
+  it('theme switcher should switch theme', () => {
+    cy.get('#root').children().eq(0).as('Container');
+    cy.get('@Container').should('have.css', 'background-color', 'rgb(8, 8, 8)');
+    cy.getByTestId('theme-switcher').click();
+    cy.get('@Container').should(
+      'have.css',
+      'background-color',
+      'rgb(255, 255, 255)'
+    );
+  });
+
+  it('wallet connector should open a dialog', () => {
+    cy.get('[role="dialog"]').should('not.exist');
+    cy.getByTestId('connect-vega-wallet').click();
+    cy.get('[role="dialog"]').should('be.visible');
+  });
+});
diff --git a/apps/simple-trading-app/netlify.toml b/apps/simple-trading-app/netlify.toml
new file mode 100644
index 000000000..b87b8d3dd
--- /dev/null
+++ b/apps/simple-trading-app/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/apps/simple-trading-app/project.json b/apps/simple-trading-app/project.json
index 3905d0432..d65b5d432 100644
--- a/apps/simple-trading-app/project.json
+++ b/apps/simple-trading-app/project.json
@@ -68,6 +68,15 @@
         "jestConfig": "apps/simple-trading-app/jest.config.js",
         "passWithNoTests": true
       }
+    },
+    "build-netlify": {
+      "builder": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": [
+          "cp apps/simple-trading-app/netlify.toml netlify.toml",
+          "nx build simple-trading-app"
+        ]
+      }
     }
   },
   "tags": []
diff --git a/apps/simple-trading-app/src/app/app.tsx b/apps/simple-trading-app/src/app/app.tsx
index a4a53f682..daf1e5358 100644
--- a/apps/simple-trading-app/src/app/app.tsx
+++ b/apps/simple-trading-app/src/app/app.tsx
@@ -8,13 +8,11 @@ import {
   VegaManageDialog,
   VegaWalletProvider,
 } from '@vegaprotocol/wallet';
-import { VegaWalletConnectButton } from './components/vega-wallet-connect-button';
-import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { Connectors } from './lib/vega-connectors';
 import '../styles.scss';
 import { AppLoader } from './components/app-loader';
+import Header from './components/header';
 import { Main } from './components/main';
-import { DrawerToggle, DRAWER_TOGGLE_VARIANTS } from './components/drawer';
 import { useLocation } from 'react-router-dom';
 
 function App() {
@@ -39,32 +37,12 @@ function App() {
         <NetworkLoader createClient={createClient}>
           <VegaWalletProvider>
             <AppLoader>
-              <div className="max-h-full min-h-full dark:bg-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
-                <div className="flex items-stretch p-16 bg-black text-white-60">
-                  <div className="flex items-center gap-4 ml-auto mr-8">
-                    <VegaWalletConnectButton
-                      setConnectDialog={(open) =>
-                        setVegaWallet((x) => ({ ...x, connect: open }))
-                      }
-                      setManageDialog={(open) =>
-                        setVegaWallet((x) => ({ ...x, manage: open }))
-                      }
-                    />
-                    <ThemeSwitcher
-                      onToggle={toggleTheme}
-                      className="-my-4"
-                      sunClassName="text-white"
-                    />
-                  </div>
-                  <DrawerToggle
-                    onToggle={onToggle}
-                    variant={DRAWER_TOGGLE_VARIANTS.OPEN}
-                    className="xs:py-32 xs:px-16 xs:text-white xs:hover:text-blue"
-                  />
-                </div>
-
+              <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}
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx
index b689e630e..d9e1ab494 100644
--- a/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx
+++ b/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx
@@ -8,6 +8,6 @@ interface Props {
 }
 
 export const DrawerWrapper = ({ children, className = '' }: Props) => {
-  const classes = classNames('flex dark:bg-black md:flex-row', className);
+  const classes = classNames('flex dark:bg-lite-black md:flex-row', className);
   return <div className={classes}>{children}</div>;
 };
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer.tsx
index 128259e32..ef7fb9015 100644
--- a/apps/simple-trading-app/src/app/components/drawer/drawer.tsx
+++ b/apps/simple-trading-app/src/app/components/drawer/drawer.tsx
@@ -34,11 +34,14 @@ export const NavigationDrawer = ({
 
   const translateClose = rtl ? 'translate-x-full' : '-translate-x-full';
 
-  const innerStyles = classNames('w-3/4 md:w-full bg-white dark:bg-black', {
-    'translate-x-0 transition-transform md:transform-none': isMenuOpen,
-    [`${translateClose} md:transform-none`]: !isMenuOpen,
-    [innerClasses]: innerClasses,
-  });
+  const innerStyles = classNames(
+    'w-3/4 md:w-full bg-white dark:bg-lite-black',
+    {
+      'translate-x-0 transition-transform md:transform-none': isMenuOpen,
+      [`${translateClose} md:transform-none`]: !isMenuOpen,
+      [innerClasses]: innerClasses,
+    }
+  );
 
   return (
     <aside aria-label="Sidebar Navigation Menu" className={outerStyles}>
diff --git a/apps/simple-trading-app/src/app/components/header/comet.tsx b/apps/simple-trading-app/src/app/components/header/comet.tsx
new file mode 100644
index 000000000..7532117c1
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/header/comet.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+const Comet = () => {
+  return (
+    <svg
+      viewBox="0 0 118 82"
+      fill="currentColor"
+      className="max-w-[7.5rem] mx-auto hidden md:block absolute right-[365px] rotate-180"
+    >
+      <g className="fill-white">
+        <path d="M44.3791 67.5864H41.5859V70.3796H44.3791V67.5864Z"></path>
+        <path d="M47.173 64.7932V62H44.3799V64.7932V67.5863H47.173V64.7932Z"></path>
+        <path d="M41.5863 70.3794H36V73.1726H41.5863V70.3794Z"></path>
+        <path d="M44.3791 73.1719H41.5859V75.965H44.3791V73.1719Z"></path>
+        <path d="M47.173 75.9658H44.3799V81.5521H47.173V75.9658Z"></path>
+        <path d="M49.966 73.1719H47.1729V75.965H49.966V73.1719Z"></path>
+        <path d="M55.5521 70.3794H49.9658V73.1726H55.5521V70.3794Z"></path>
+        <path d="M49.966 67.5864H47.1729V70.3796H49.966V67.5864Z"></path>
+        <path d="M57.1876 60.564H54V63.7515H57.1876V60.564Z"></path>
+        <path d="M60.3751 57.3765H57.1875V60.564H60.3751V57.3765Z"></path>
+        <path d="M63.5626 54.1885H60.375V57.3761H63.5626V54.1885Z"></path>
+        <path d="M66.7501 51.001H63.5625V54.1886H66.7501V51.001Z"></path>
+        <path d="M69.9376 47.8135H66.75V51.0011H69.9376V47.8135Z"></path>
+        <path d="M73.1251 44.626H69.9375V47.8136H73.1251V44.626Z"></path>
+        <path d="M76.3126 41.4385H73.125V44.6261H76.3126V41.4385Z"></path>
+        <path d="M79.5001 38.251H76.3125V41.4386H79.5001V38.251Z"></path>
+        <path d="M82.6886 35.0635H79.501V38.2511H82.6886V35.0635Z"></path>
+        <path d="M85.8761 31.876H82.6885V35.0636H85.8761V31.876Z"></path>
+        <path d="M89.0636 28.688H85.876V31.8756H89.0636V28.688Z"></path>
+        <path d="M92.2511 25.5005H89.0635V28.6881H92.2511V25.5005Z"></path>
+        <path d="M95.4386 22.313H92.251V25.5006H95.4386V22.313Z"></path>
+        <path d="M98.6261 19.1255H95.4385V22.3131H98.6261V19.1255Z"></path>
+        <path d="M101.814 15.938H98.626V19.1256H101.814V15.938Z"></path>
+        <path d="M105.001 12.7505H101.813V15.9381H105.001V12.7505Z"></path>
+        <path d="M108.189 9.5625H105.001V12.7501H108.189V9.5625Z"></path>
+        <path d="M111.376 6.375H108.188V9.56258H111.376V6.375Z"></path>
+        <path d="M114.565 3.1875H111.377V6.37508H114.565V3.1875Z"></path>
+        <path d="M117.752 0H114.564V3.18758H117.752V0Z"></path>
+        <path d="M2.79316 20.793H0V23.5861H2.79316V20.793Z"></path>
+        <path d="M5.58612 18H2.79297V20.7932H5.58612V18Z"></path>
+        <path d="M5.58612 23.5859H2.79297V26.3791H5.58612V23.5859Z"></path>
+        <path d="M8.37909 20.793H5.58594V23.5861H8.37909V20.793Z"></path>
+      </g>
+    </svg>
+  );
+};
+
+export default Comet;
diff --git a/apps/simple-trading-app/src/app/components/header/header.tsx b/apps/simple-trading-app/src/app/components/header/header.tsx
new file mode 100644
index 000000000..f97499029
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/header/header.tsx
@@ -0,0 +1,41 @@
+import React 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;
+};
+
+interface Props {
+  setVegaWallet: (func: (wParams: WalletParams) => WalletParams) => void;
+  toggleTheme: () => void;
+}
+const Header = ({ setVegaWallet, toggleTheme }: Props) => {
+  return (
+    <div
+      className="flex items-stretch pr-16 py-16 bg-black text-white-60"
+      data-testid="header"
+    >
+      <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 }))
+          }
+        />
+        <ThemeSwitcher
+          onToggle={toggleTheme}
+          className="-my-4"
+          sunClassName="text-white"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/apps/simple-trading-app/src/app/components/header/index.tsx b/apps/simple-trading-app/src/app/components/header/index.tsx
new file mode 100644
index 000000000..77992c5af
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/header/index.tsx
@@ -0,0 +1 @@
+export { default } from './header';
diff --git a/apps/simple-trading-app/src/app/components/header/logo.tsx b/apps/simple-trading-app/src/app/components/header/logo.tsx
new file mode 100644
index 000000000..8ebefa7bc
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/header/logo.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { t } from '@vegaprotocol/react-helpers';
+import { VLogo } from '@vegaprotocol/ui-toolkit';
+
+const Logo = () => {
+  return (
+    <NavLink
+      className="mx-20 text-white"
+      aria-label={t('Go to home page')}
+      to="/"
+    >
+      <VLogo />
+    </NavLink>
+  );
+};
+
+export default Logo;
diff --git a/apps/simple-trading-app/src/app/components/header/video.tsx b/apps/simple-trading-app/src/app/components/header/video.tsx
new file mode 100644
index 000000000..0aa238ce9
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/header/video.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Video = () => {
+  return (
+    <video
+      width={500}
+      height={100}
+      autoPlay
+      muted
+      loop
+      playsInline
+      className="absolute left-0 top-0 w-full h-full object-cover"
+    >
+      <source
+        src="https://d33wubrfki0l68.cloudfront.net/2500bc5ef1b96927e0220eeb2bef0b22b87bcda1/3e0d3/static/moshed-aa65f0933af9abe9afb5e5663c9b3f68.mp4"
+        type="video/mp4"
+      />
+    </video>
+  );
+};
+
+export default Video;
diff --git a/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx b/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx
index cd4be2d4e..b73ebec87 100644
--- a/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx
+++ b/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx
@@ -1,8 +1,8 @@
 export const LiquidityIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M12.5268 1.46612L12 1.99999L11.4732 1.46612L12 0.946381L12.5268 1.46612ZM12 3.07542C11.8274 3.25709 11.6185 3.48044 11.3826 3.73943C10.6899 4.49987 9.76793 5.56335 8.84782 6.77789C7.92587 7.99485 7.01715 9.34862 6.34179 10.6903C5.66046 12.0439 5.25 13.3205 5.25 14.4C5.25 19.0485 8.47431 22.15 12 22.15C15.5257 22.15 18.75 19.0485 18.75 14.4C18.75 13.3205 18.3395 12.0439 17.6582 10.6903C16.9829 9.34862 16.0741 7.99485 15.1522 6.77789C14.2321 5.56335 13.3101 4.49987 12.6174 3.73943C12.3815 3.48044 12.1726 3.25709 12 3.07542ZM11.4732 1.46612C11.4734 1.46597 11.4732 1.46612 12 1.99999C12.5268 1.46612 12.5266 1.46597 12.5268 1.46612L12.5336 1.47291L12.5512 1.49036C12.5663 1.5055 12.5884 1.52759 12.6169 1.55634C12.6739 1.61384 12.7566 1.698 12.8615 1.80641C13.071 2.02319 13.3692 2.33722 13.7263 2.72931C14.4399 3.51261 15.3929 4.61164 16.3478 5.8721C17.3009 7.13013 18.2671 8.56386 18.998 10.0159C19.723 11.4561 20.25 12.9795 20.25 14.4C20.25 19.7514 16.4743 23.65 12 23.65C7.52569 23.65 3.75 19.7514 3.75 14.4C3.75 12.9795 4.27704 11.4561 5.00196 10.0159C5.73285 8.56386 6.69913 7.13013 7.65218 5.8721C8.60707 4.61164 9.56014 3.51261 10.2737 2.72931C10.6308 2.33722 10.929 2.02319 11.1385 1.80641C11.2434 1.698 11.3261 1.61384 11.3831 1.55634C11.4116 1.52759 11.4337 1.5055 11.4488 1.49036L11.4664 1.47291L11.4712 1.46817L11.4732 1.46612Z"
     />
     <rect x="11.5" y="17.4" width="1" height="1" />
diff --git a/apps/simple-trading-app/src/app/components/icons/market-icon.tsx b/apps/simple-trading-app/src/app/components/icons/market-icon.tsx
index e9e27aec4..a78a3ee8a 100644
--- a/apps/simple-trading-app/src/app/components/icons/market-icon.tsx
+++ b/apps/simple-trading-app/src/app/components/icons/market-icon.tsx
@@ -1,8 +1,8 @@
 export const MarketIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M3.5 2H2V20.5V22H3.5H22V20.5H3.5V2Z"
     />
     <rect x="5" y="15" width="2" height="2" />
diff --git a/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx b/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx
index 91ddcd8c5..782076ba4 100644
--- a/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx
+++ b/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx
@@ -1,8 +1,8 @@
 export const PortfolioIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M8.5 3.5H15.5V6H8.5V3.5ZM7 6V3.5C7 2.67157 7.67157 2 8.5 2H15.5C16.3284 2 17 2.67157 17 3.5V6H20.5C21.3284 6 22 6.67157 22 7.5V20.5C22 21.3284 21.3284 22 20.5 22H3.5C2.67157 22 2 21.3284 2 20.5V7.5C2 6.67157 2.67157 6 3.5 6H7ZM15.5 7.5H8.5H3.5L3.5 20.5H20.5V7.5H15.5Z"
     />
     <rect x="4" y="8" width="2" height="2" />
diff --git a/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx b/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx
index f4938d4f3..8c8c0e083 100644
--- a/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx
+++ b/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx
@@ -1,13 +1,13 @@
 export const TradeIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M19.3254 7.28784L14.8547 2.93099L15.7621 1.99999L21.4056 7.49983L21.8833 7.96534L21.4056 8.43085L15.7621 13.9307L14.8547 12.9997L19.3819 8.58784L1.99999 8.58784L1.99999 7.28784L19.3254 7.28784Z"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M4.55785 16.6429L9.02855 20.9997L8.12124 21.9307L2.47767 16.4309L2 15.9654L2.47767 15.4999L8.12124 10L9.02855 10.931L4.50141 15.3429L21.8833 15.3429V16.6429L4.55785 16.6429Z"
     />
   </>
diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts b/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts
index a346ab7bc..d717883c1 100644
--- a/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts
@@ -73,6 +73,7 @@ export const agGridLightVariables = `
 
 export const agGridDarkVariables = `
   .ag-theme-balham-dark {
+    --ag-background-color: ${theme.colors.lite.black};
     --ag-row-border-color: ${theme.colors.transparent};
     --ag-row-hover-color: ${theme.colors.transparent};
     --ag-font-size: 15px;
diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx
index b6d89c262..37febc99f 100644
--- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import { MockedProvider } from '@apollo/react-testing';
 import SimpleMarketPercentChange from './simple-market-percent-change';
 import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
@@ -50,8 +49,8 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
       </MockedProvider>
     );
     expect(screen.getByText('100.000%')).toBeInTheDocument();
-    expect(screen.getByText('100.000%')).toHaveStyle(
-      `color: ${theme.colors.vega.green}`
+    expect(screen.getByText('100.000%')).toHaveClass(
+      'text-darkerGreen dark:text-lightGreen'
     );
   });
   it('a depreciated one', () => {
@@ -70,8 +69,6 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
       </MockedProvider>
     );
     expect(screen.getByText('-50.000%')).toBeInTheDocument();
-    expect(screen.getByText('-50.000%')).toHaveStyle(
-      `color: ${theme.colors.vega.pink}`
-    );
+    expect(screen.getByText('-50.000%')).toHaveClass('text-vega-pink');
   });
 });
diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx
index 9b0ade0d3..5fe936067 100644
--- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx
+++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { InView } from 'react-intersection-observer';
 import { useSubscription } from '@apollo/client';
-import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
 import type {
   CandleLive,
@@ -37,14 +37,14 @@ const getChange = (
   return ' - ';
 };
 
-const getColor = (change: number | string) => {
+const getClassColor = (change: number | string) => {
   if (parseFloat(change as string) > 0) {
-    return theme.colors.vega.green;
+    return 'text-darkerGreen dark:text-lightGreen';
   }
   if (parseFloat(change as string) < 0) {
-    return theme.colors.vega.pink;
+    return 'text-vega-pink';
   }
-  return theme.colors.black[10];
+  return 'text-black-10';
 };
 
 const SimpleMarketPercentChangeWrapper = (props: Props) => {
@@ -67,16 +67,14 @@ const SimpleMarketPercentChange = ({ candles, marketId, setValue }: Props) => {
       variables: { marketId },
     });
   const change = getChange(candles, close);
-  const color = getColor(change);
+  const colorClasses = getClassColor(change);
   useEffect(() => {
     const value = parseFloat(change);
     setValue(isNaN(value) ? '-' : value);
   }, [setValue, change]);
 
   return (
-    <div className="flex text-center" style={{ color }}>
-      {change}
-    </div>
+    <div className={classNames('flex text-center', colorClasses)}>{change}</div>
   );
 };
 
diff --git a/libs/tailwindcss-config/src/theme-lite.js b/libs/tailwindcss-config/src/theme-lite.js
index 1920a316d..130706c98 100644
--- a/libs/tailwindcss-config/src/theme-lite.js
+++ b/libs/tailwindcss-config/src/theme-lite.js
@@ -8,6 +8,8 @@ module.exports = {
     midGrey: '#828282',
     borderGrey: '#4f4f4f',
     lightGrey: '#F2F2F2',
+    lightGreen: '#00f780',
+    darkerGreen: '#008f4A',
     yellow: '#DFFF0B',
     mint: '#00F780',
     pink: '#FF077F',
@@ -18,6 +20,9 @@ module.exports = {
       'highlight-item-dark': '#fff',
     },
     'dropdown-bg-dark': theme.colors.black['100'],
+    lite: {
+      black: '#080808',
+    },
   },
   fontSize: {
     ...theme.fontSize,
diff --git a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx b/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
index 56c5fbdab..e64076eaa 100644
--- a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
+++ b/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import classNames from 'classnames';
 import { SunIcon, MoonIcon } from './icons';
 
@@ -19,7 +20,12 @@ export const ThemeSwitcher = ({
   );
 
   return (
-    <button type="button" onClick={() => onToggle()} className={className}>
+    <button
+      type="button"
+      onClick={() => onToggle()}
+      className={className}
+      data-testid="theme-switcher"
+    >
       <span className={sunClasses}>
         <SunIcon />
       </span>
diff --git a/libs/ui-toolkit/src/components/vega-logo/vega-logo.spec.tsx b/libs/ui-toolkit/src/components/vega-logo/vega-logo.spec.tsx
index d13fcf2d3..fd1173bee 100644
--- a/libs/ui-toolkit/src/components/vega-logo/vega-logo.spec.tsx
+++ b/libs/ui-toolkit/src/components/vega-logo/vega-logo.spec.tsx
@@ -1,10 +1,15 @@
 import { render } from '@testing-library/react';
 
-import { VegaLogo } from './vega-logo';
+import { VegaLogo, VLogo } from './vega-logo';
 
 describe('Vega logo', () => {
   it('should render successfully', () => {
     const { baseElement } = render(<VegaLogo />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('V version should render successfully', () => {
+    const { baseElement } = render(<VLogo />);
+    expect(baseElement).toBeTruthy();
+  });
 });
diff --git a/libs/ui-toolkit/src/components/vega-logo/vega-logo.stories.tsx b/libs/ui-toolkit/src/components/vega-logo/vega-logo.stories.tsx
index 3e9490025..5ffb2b1e2 100644
--- a/libs/ui-toolkit/src/components/vega-logo/vega-logo.stories.tsx
+++ b/libs/ui-toolkit/src/components/vega-logo/vega-logo.stories.tsx
@@ -1,5 +1,5 @@
 import type { Story, Meta } from '@storybook/react';
-import { VegaLogo } from './vega-logo';
+import { VegaLogo, VLogo } from './vega-logo';
 
 export default {
   component: VegaLogo,
@@ -7,5 +7,7 @@ export default {
 } as Meta;
 
 const Template: Story = () => <VegaLogo />;
+const TemplateVLogo: Story = () => <VLogo />;
 
 export const Default = Template.bind({});
+export const VVersion = TemplateVLogo.bind({});
diff --git a/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx b/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
index 7476cd470..a5fcc62d1 100644
--- a/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
+++ b/libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
@@ -1,4 +1,5 @@
 import { t } from '@vegaprotocol/react-helpers';
+import React from 'react';
 
 export const VegaLogo = () => {
   return (
@@ -16,3 +17,23 @@ export const VegaLogo = () => {
     </svg>
   );
 };
+
+export const VLogo = () => {
+  return (
+    <svg
+      aria-label={t('Vega logo')}
+      width="29"
+      height="34"
+      fill="currentColor"
+      viewBox="0 0 29 34"
+      className="mx-20 my-16"
+    >
+      <path d="M14.5003 29.1426H9.6665V34.0001H14.5003V29.1426Z" />
+      <path d="M19.3343 24.2859H14.5005V29.1434H19.3343V24.2859Z" />
+      <path d="M29.0008 19.4282H24.167V24.2857H29.0008V19.4282Z" />
+      <path d="M24.1673 0H19.3335V19.4283H24.1673V0Z" />
+      <path d="M9.66776 24.2859H4.83398V29.1434H9.66776V24.2859Z" />
+      <path d="M4.83378 0H0V24.2858H4.83378V0Z" />
+    </svg>
+  );
+};