diff --git a/app/page.js b/app/page.js
index c0899a8..9128be2 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,7 +1,9 @@
 import {createDirectus, rest, readItems} from '@directus/sdk'
 import Container from '@mui/material/Container'
+import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import {formatKonstitisyon} from '../lib/format.js'
+import Konstitisyon from '../components/konstitisyon/index.js'
+import Footer from '../components/footer.js'
 
 const apiUrl = process.env.DIRECTUS_API_URL
 const appTitle = process.env.APP_TITLE
@@ -30,22 +32,30 @@ async function getData() {
       throw new Error('No data')
     }
 
-    const konstitisyon = formatKonstitisyon(titres, articles)
-
-    return konstitisyon
+    return {
+      titres,
+      articles
+    }
   } catch {
     throw new Error('Failed to fetch data')
   }
 }
 
 export default async function Page() {
-  const data = await getData()
-
-  console.log('data', data)
+  const {titres, articles} = await getData()
 
   return (
-    <Container maxWidth='sm'>
-      <Typography component='h1' textAlign='center' variant='h3'>{appTitle.toUpperCase()}</Typography>
-    </Container>
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100vh',
+    }}
+    >
+      <Container maxWidth='sm'>
+        <Typography mt={1} component='h1' textAlign='center' variant='h4'>{appTitle.toUpperCase()}</Typography>
+        <Konstitisyon titres={titres} articles={articles} />
+      </Container>
+      <Footer />
+    </Box>
   )
 }