diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index 453c6c172..427d36de1 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { ChakraProvider, Box } from "@chakra-ui/react"
+import { ChakraProvider, Flex } from "@chakra-ui/react"
 import { useDetectThemeMode } from "./hooks"
 import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
@@ -10,10 +10,10 @@ function DApp() {
   useDetectThemeMode()
 
   return (
-    <Box height="100%" p={6}>
+    <Flex p={6} gap={2} direction="column">
       <Navbar />
       <Overview />
-    </Box>
+    </Flex>
   )
 }
 
diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx
index 14a20eae5..c632fb6e5 100644
--- a/dapp/src/components/Navbar/ConnectWallet.tsx
+++ b/dapp/src/components/Navbar/ConnectWallet.tsx
@@ -59,7 +59,7 @@ export default function ConnectWallet() {
   const { btcAccount, ethAccount } = useWalletContext()
 
   return (
-    <HStack spacing="8px">
+    <HStack>
       <HStack mr="16px">
         <Text>Balance</Text>
         <Text as="b">
diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx
index f524f6fe5..24cd41aaf 100644
--- a/dapp/src/components/Navbar/index.tsx
+++ b/dapp/src/components/Navbar/index.tsx
@@ -1,22 +1,22 @@
 import React from "react"
-import { Box, Button, HStack, Icon, Switch } from "@chakra-ui/react"
+import { Button, Flex, Icon, Switch } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
 import { ChevronRight } from "../../static/icons"
 import { USD } from "../../constants"
 
 export default function Navbar() {
   return (
-    <Box mb={4}>
-      <HStack justifyContent="end">
+    <Flex gap={4} direction="column">
+      <Flex justifyContent="end">
         <ConnectWallet />
-      </HStack>
-      <HStack mt={8} justifyContent="space-between">
+      </Flex>
+      <Flex justifyContent="space-between">
         {/* TODO: Handle click actions */}
         <Switch size="sm">Show values in {USD.symbol}</Switch>
         <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
           Read documentation
         </Button>
-      </HStack>
-    </Box>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
index 9e5c4be71..8415c8910 100644
--- a/dapp/src/components/Overview/PositionDetails.tsx
+++ b/dapp/src/components/Overview/PositionDetails.tsx
@@ -3,32 +3,26 @@ import {
   Text,
   Button,
   Box,
-  VStack,
   HStack,
   Tooltip,
   Icon,
   useColorModeValue,
+  Flex,
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
 
 export default function PositionDetails() {
   return (
-    <VStack
-      p="24px"
-      h="100%"
-      justifyContent="space-between"
-      /* Unset alignItems to get a full-width button. */
-      alignItems="unset"
-    >
+    <Flex p="24px" h="100%" direction="column" justifyContent="space-between">
       <Box>
         <Text mb="8px">Your positions</Text>
-        <VStack alignItems="flex-start" gap="0">
+        <Flex direction="column" alignItems="flex-start">
           <HStack>
             <Text>34.75</Text>
             <Text>{BITCOIN.symbol}</Text>
           </HStack>
-          <HStack w="100%" justifyContent="space-between">
+          <Flex w="100%" justifyContent="space-between">
             <HStack>
               <Text>1.245.148,1</Text>
               <Text>{USD.symbol}</Text>
@@ -37,15 +31,14 @@ export default function PositionDetails() {
             <Tooltip label="Template">
               <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
             </Tooltip>
-          </HStack>
-        </VStack>
+          </Flex>
+        </Flex>
       </Box>
-      {/* Unset alignItems to get a full-width button. */}
-      <VStack spacing="16px" alignItems="unset" width="100%">
+      <Flex direction="column" gap={2}>
         {/* TODO: Handle click actions */}
         <Button>Stake</Button>
         <Button variant="outline">Withdraw</Button>
-      </VStack>
-    </VStack>
+      </Flex>
+    </Flex>
   )
 }