diff --git a/apps/agent/app/package.json b/apps/agent/app/package.json
index 37a20fdc12..f650cac7a1 100644
--- a/apps/agent/app/package.json
+++ b/apps/agent/app/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.6",
-    "@aragon/api-react": "^2.0.0-beta.6",
+    "@aragon/api": "^2.0.0-beta.9",
+    "@aragon/api-react": "^2.0.0-beta.9",
     "@aragon/templates-tokens": "^1.2.0",
-    "@aragon/ui": "^1.0.0",
+    "@aragon/ui": "^1.2.1",
     "@babel/polyfill": "^7.0.0",
     "date-fns": "2.0.0-alpha.22",
     "file-saver": "^2.0.2",
diff --git a/apps/agent/app/src/App.js b/apps/agent/app/src/App.js
index fecc103a43..bac0fdc042 100644
--- a/apps/agent/app/src/App.js
+++ b/apps/agent/app/src/App.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Header, Layout, SyncIndicator, useLayout } from '@aragon/ui'
+import React, { useEffect } from 'react'
+import { Main, Header, SyncIndicator, useLayout } from '@aragon/ui'
 import { useAragonApi } from '@aragon/api-react'
 import InstallFrame from './components/InstallFrame'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
@@ -32,11 +32,12 @@ function App({ api, appState, isSyncing }) {
 }
 
 export default () => {
-  const { api, appState } = useAragonApi()
+  const { api, appState, guiStyle } = useAragonApi()
+  const { appearance } = guiStyle
 
   return (
-    <Layout>
+    <Main theme={appearance} assetsUrl="./aragon-ui">
       <App api={api} appState={appState} isSyncing={appState.isSyncing} />
-    </Layout>
+    </Main>
   )
 }
diff --git a/apps/agent/app/src/components/ComingSoon.js b/apps/agent/app/src/components/ComingSoon.js
index 3e9e67358c..37ff631cf9 100644
--- a/apps/agent/app/src/components/ComingSoon.js
+++ b/apps/agent/app/src/components/ComingSoon.js
@@ -10,6 +10,7 @@ function ComingSoon() {
       css={`
         width: 100%;
         min-height: ${72 * GU}px;
+        text-align: center;
       `}
     >
       <div
@@ -32,6 +33,7 @@ function ComingSoon() {
           color: ${theme.content};
           ${textStyle('title2')};
           margin-bottom: ${2 * GU}px;
+          padding: 0 ${2 * GU}px;
         `}
       >
         Agent transaction list is coming soon!
@@ -42,12 +44,15 @@ function ComingSoon() {
           max-width: ${52 * GU}px;
           color: ${theme.contentSecondary};
           ${textStyle('body2')};
+          padding: 0 ${2 * GU}px;
         `}
       >
         We are currently working on the full version of this app. You’ll soon be
-        able to browse Agent interactions with other Ethereum applications
-        from here.
-        <Link href="https://aragon.org/agent">Learn how you can start using it today</Link>
+        able to browse Agent interactions with other Ethereum applications from
+        here.
+        <Link href="https://aragon.org/agent">
+          Learn how you can start using it today
+        </Link>
       </div>
     </Card>
   )
diff --git a/apps/agent/app/src/index.js b/apps/agent/app/src/index.js
index 58eb098fa2..f9c5a81945 100644
--- a/apps/agent/app/src/index.js
+++ b/apps/agent/app/src/index.js
@@ -3,15 +3,12 @@ import '@babel/polyfill'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { AragonApi } from '@aragon/api-react'
-import { Main } from '@aragon/ui'
 import appStateReducer from './app-state-reducer'
 import App from './App'
 
 ReactDOM.render(
   <AragonApi reducer={appStateReducer}>
-    <Main assetsUrl="./aragon-ui">
-      <App />
-    </Main>
+    <App />
   </AragonApi>,
   document.getElementById('root')
 )
diff --git a/apps/finance/app/package.json b/apps/finance/app/package.json
index f859b2e3fc..245c39ffb3 100644
--- a/apps/finance/app/package.json
+++ b/apps/finance/app/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.6",
-    "@aragon/api-react": "^2.0.0-beta.6",
+    "@aragon/api": "^2.0.0-beta.9",
+    "@aragon/api-react": "^2.0.0-beta.9",
     "@aragon/templates-tokens": "^1.3.0",
-    "@aragon/ui": "^1.0.0",
+    "@aragon/ui": "^1.2.1",
     "@babel/polyfill": "^7.0.0",
     "bn.js": "^4.11.8",
     "core-js": "^2.6.5",
diff --git a/apps/finance/app/src/App.js b/apps/finance/app/src/App.js
index 90225d7944..02a5b310bb 100644
--- a/apps/finance/app/src/App.js
+++ b/apps/finance/app/src/App.js
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import {
   Button,
   Header,
   IconPlus,
+  Main,
   SidePanel,
   SyncIndicator,
   useLayout,
@@ -129,15 +130,18 @@ class App extends React.Component {
 }
 
 export default () => {
-  const { api, appState } = useAragonApi()
+  const { api, appState, guiStyle } = useAragonApi()
   const { layoutName } = useLayout()
+  const { appearance } = guiStyle
 
   return (
-    <App
-      api={api}
-      appState={appState}
-      isSyncing={appState.isSyncing}
-      compactMode={layoutName === 'small'}
-    />
+    <Main theme={appearance} assetsUrl="./aragon-ui">
+      <App
+        api={api}
+        appState={appState}
+        isSyncing={appState.isSyncing}
+        compactMode={layoutName === 'small'}
+      />
+    </Main>
   )
 }
diff --git a/apps/finance/app/src/index.js b/apps/finance/app/src/index.js
index 30ce587aaf..f9c5a81945 100644
--- a/apps/finance/app/src/index.js
+++ b/apps/finance/app/src/index.js
@@ -2,16 +2,13 @@ import '@babel/polyfill'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Main } from '@aragon/ui'
 import { AragonApi } from '@aragon/api-react'
 import appStateReducer from './app-state-reducer'
 import App from './App'
 
 ReactDOM.render(
   <AragonApi reducer={appStateReducer}>
-    <Main assetsUrl="./aragon-ui">
-      <App />
-    </Main>
+    <App />
   </AragonApi>,
   document.getElementById('root')
 )
diff --git a/apps/token-manager/app/package.json b/apps/token-manager/app/package.json
index 80a1fd0fda..39a307e4af 100644
--- a/apps/token-manager/app/package.json
+++ b/apps/token-manager/app/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.6",
-    "@aragon/api-react": "^2.0.0-beta.6",
-    "@aragon/ui": "^1.0.0",
+    "@aragon/api": "^2.0.0-beta.9",
+    "@aragon/api-react": "^2.0.0-beta.9",
+    "@aragon/ui": "^1.2.1",
     "bn.js": "^4.11.6",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
diff --git a/apps/token-manager/app/src/App.js b/apps/token-manager/app/src/App.js
index f8d1aef6ef..de7956a244 100644
--- a/apps/token-manager/app/src/App.js
+++ b/apps/token-manager/app/src/App.js
@@ -6,6 +6,7 @@ import {
   GU,
   Header,
   IconPlus,
+  Main,
   SyncIndicator,
   Tag,
   textStyle,
@@ -199,9 +200,14 @@ class App extends React.PureComponent {
 }
 
 export default () => {
-  const { api, appState } = useAragonApi()
   const theme = useTheme()
+  const { api, appState, guiStyle } = useAragonApi()
   const { layoutName } = useLayout()
+  const { appearance } = guiStyle
 
-  return <App api={api} layoutName={layoutName} theme={theme} {...appState} />
+  return (
+    <Main assetsUrl="./aragon-ui" theme={appearance}>
+      <App api={api} layoutName={layoutName} theme={theme} {...appState} />
+    </Main>
+  )
 }
diff --git a/apps/token-manager/app/src/index.js b/apps/token-manager/app/src/index.js
index 18cf4e1e87..074162ecff 100644
--- a/apps/token-manager/app/src/index.js
+++ b/apps/token-manager/app/src/index.js
@@ -1,15 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { AragonApi } from '@aragon/api-react'
-import { Main } from '@aragon/ui'
 import appStateReducer from './app-state-reducer'
 import App from './App'
 
 ReactDOM.render(
   <AragonApi reducer={appStateReducer}>
-    <Main assetsUrl="./aragon-ui">
-      <App />
-    </Main>
+    <App />
   </AragonApi>,
   document.getElementById('root')
 )
diff --git a/apps/voting/app/package.json b/apps/voting/app/package.json
index 69fe43ab5e..7f98266120 100644
--- a/apps/voting/app/package.json
+++ b/apps/voting/app/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.8",
-    "@aragon/api-react": "^2.0.0-beta.8",
-    "@aragon/ui": "^1.0.0",
+    "@aragon/api": "^2.0.0-beta.9",
+    "@aragon/api-react": "^2.0.0-beta.9",
+    "@aragon/ui": "^1.2.1",
     "bn.js": "^4.11.8",
     "date-fns": "2.0.0-alpha.22",
     "onecolor": "^3.1.0",
diff --git a/apps/voting/app/src/App.js b/apps/voting/app/src/App.js
index c69f1156ed..6cbe2fa052 100644
--- a/apps/voting/app/src/App.js
+++ b/apps/voting/app/src/App.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import {
   Button,
   Header,
@@ -7,6 +7,7 @@ import {
   SyncIndicator,
   useLayout,
 } from '@aragon/ui'
+import { useGuiStyle } from '@aragon/api-react'
 import NewVotePanel from './components/NewVotePanel'
 import useFilterVotes from './hooks/useFilterVotes'
 import useScrollTop from './hooks/useScrollTop'
@@ -23,11 +24,12 @@ const App = React.memo(function App() {
     executionTargets,
     isSyncing,
     newVotePanel,
-    selectedVote,
     selectVote,
+    selectedVote,
     votes,
   } = useAppLogic()
 
+  const { appearance } = useGuiStyle()
   const { layoutName } = useLayout()
   const compactMode = layoutName === 'small'
   const handleBack = useCallback(() => selectVote(-1), [selectVote])
@@ -50,82 +52,87 @@ const App = React.memo(function App() {
   useScrollTop(selectedVote)
 
   return (
-    <React.Fragment>
-      {votes.length === 0 && (
-        <div
-          css={`
-            height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          `}
-        >
-          <NoVotes onNewVote={newVotePanel.requestOpen} isSyncing={isSyncing} />
-        </div>
-      )}
-      {votes.length > 0 && (
-        <React.Fragment>
-          <SyncIndicator visible={isSyncing} />
-          <Header
-            primary="Voting"
-            secondary={
-              !selectedVote && (
-                <Button
-                  mode="strong"
-                  onClick={newVotePanel.requestOpen}
-                  label="New vote"
-                  icon={<IconPlus />}
-                  display={compactMode ? 'icon' : 'label'}
-                />
-              )
-            }
-          />
-          {selectedVote ? (
-            <VoteDetail
-              vote={selectedVote}
-              onBack={handleBack}
-              onVote={actions.vote}
-              onExecute={actions.execute}
+    <Main theme={appearance} assetsUrl="./aragon-ui">
+      <React.Fragment>
+        {votes.length === 0 && (
+          <div
+            css={`
+              height: 100vh;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            `}
+          >
+            <NoVotes
+              onNewVote={newVotePanel.requestOpen}
+              isSyncing={isSyncing}
             />
-          ) : (
-            <Votes
-              votes={votes}
-              selectVote={selectVote}
-              executionTargets={executionTargets}
-              filteredVotes={filteredVotes}
-              voteStatusFilter={voteStatusFilter}
-              handleVoteStatusFilterChange={handleVoteStatusFilterChange}
-              voteOutcomeFilter={voteOutcomeFilter}
-              handleVoteOutcomeFilterChange={handleVoteOutcomeFilterChange}
-              voteTrendFilter={voteTrendFilter}
-              handleVoteTrendFilterChange={handleVoteTrendFilterChange}
-              voteAppFilter={voteAppFilter}
-              handleVoteAppFilterChange={handleVoteAppFilterChange}
-              voteDateRangeFilter={voteDateRangeFilter}
-              handleVoteDateRangeFilterChange={handleVoteDateRangeFilterChange}
-              handleClearFilters={handleClearFilters}
+          </div>
+        )}
+        {votes.length > 0 && (
+          <React.Fragment>
+            <SyncIndicator visible={isSyncing} />
+            <Header
+              primary="Voting"
+              secondary={
+                !selectedVote && (
+                  <Button
+                    mode="strong"
+                    onClick={newVotePanel.requestOpen}
+                    label="New vote"
+                    icon={<IconPlus />}
+                    display={compactMode ? 'icon' : 'label'}
+                  />
+                )
+              }
             />
-          )}
-        </React.Fragment>
-      )}
-      <NewVotePanel
-        onCreateVote={actions.createVote}
-        panelState={newVotePanel}
-      />
-    </React.Fragment>
+            {selectedVote ? (
+              <VoteDetail
+                vote={selectedVote}
+                onBack={handleBack}
+                onVote={actions.vote}
+                onExecute={actions.execute}
+              />
+            ) : (
+              <Votes
+                votes={votes}
+                selectVote={selectVote}
+                executionTargets={executionTargets}
+                filteredVotes={filteredVotes}
+                voteStatusFilter={voteStatusFilter}
+                handleVoteStatusFilterChange={handleVoteStatusFilterChange}
+                voteOutcomeFilter={voteOutcomeFilter}
+                handleVoteOutcomeFilterChange={handleVoteOutcomeFilterChange}
+                voteTrendFilter={voteTrendFilter}
+                handleVoteTrendFilterChange={handleVoteTrendFilterChange}
+                voteAppFilter={voteAppFilter}
+                handleVoteAppFilterChange={handleVoteAppFilterChange}
+                voteDateRangeFilter={voteDateRangeFilter}
+                handleVoteDateRangeFilterChange={
+                  handleVoteDateRangeFilterChange
+                }
+                handleClearFilters={handleClearFilters}
+              />
+            )}
+          </React.Fragment>
+        )}
+        <NewVotePanel
+          onCreateVote={actions.createVote}
+          panelState={newVotePanel}
+        />
+      </React.Fragment>
+    </Main>
   )
 })
 
 export default function Voting() {
   return (
-    <Main assetsUrl="./aragon-ui">
-      <AppLogicProvider>
-        <IdentityProvider>
-          <SettingsProvider>
-            <App />
-          </SettingsProvider>
-        </IdentityProvider>
-      </AppLogicProvider>
-    </Main>
+    <AppLogicProvider>
+      <IdentityProvider>
+        <SettingsProvider>
+          <App />
+        </SettingsProvider>
+      </IdentityProvider>
+    </AppLogicProvider>
   )
 }
diff --git a/apps/voting/app/src/app-logic.js b/apps/voting/app/src/app-logic.js
index 8018e11119..cac1017008 100644
--- a/apps/voting/app/src/app-logic.js
+++ b/apps/voting/app/src/app-logic.js
@@ -104,11 +104,11 @@ export function useAppLogic() {
   return {
     actions,
     executionTargets,
+    isSyncing: isSyncing || !ready,
+    newVotePanel,
     selectVote,
     selectedVote,
     votes,
-    isSyncing: isSyncing || !ready,
-    newVotePanel,
   }
 }