diff --git a/web/components/Image/index.js b/web/components/Image/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f8482dff9f46a618907f4fae2fc1c4c9fa7edc3d
--- /dev/null
+++ b/web/components/Image/index.js
@@ -0,0 +1,36 @@
+import { Box, chakra } from '@chakra-ui/react'
+import NextImage from 'next/image'
+
+const CoverImg = chakra(NextImage, {
+  shouldForwardProp: (prop) =>
+    ['width', 'height', 'src', 'alt', 'quality', 'placeholder', 'blurDataURL', 'loader '].includes(
+      prop,
+    ),
+})
+
+const myLoader = ({ src, width, quality }) => {
+  return `${src}?w=${width}&q=${quality}`
+}
+
+export const Image = (props) => {
+  const { src, alt, ...rest } = props
+  return (
+    <Box pos="relative" cursor="pointer" className="group" {...rest}>
+      <CoverImg
+        w="auto"
+        h="auto"
+        loader={myLoader}
+        width={600}
+        quality={50}
+        height={384}
+        placeholder="blur"
+        src={src}
+        alt={alt}
+        transition="all 0.2s"
+        _groupHover={{
+          transform: 'scale(1.05)',
+        }}
+      />
+    </Box>
+  )
+}
diff --git a/web/components/Layout/Footer.js b/web/components/Layout/Footer.js
index 06b1610a9d42d9d0c8bfbaf018567a949b4fea29..e1d8f3e91bd75d51da9b99c79c5685b49a94c475 100644
--- a/web/components/Layout/Footer.js
+++ b/web/components/Layout/Footer.js
@@ -1,10 +1,11 @@
-import { Button, Container, Flex, Image, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import { Button, Container, Flex, useColorMode, useColorModeValue } from '@chakra-ui/react'
 // import ActiveLink from '../Link/ActiveLink'
 import { MoonIcon, SunIcon } from '@chakra-ui/icons'
 import RenderSections from '../Sections/RenderSection'
 import License from '../License'
 import React from 'react'
 import Publisher from '../Publisher'
+import Image from '../Image'
 
 /* const MenuItem = ({ children }) => (
   <Text
@@ -45,7 +46,7 @@ export default function Footer(props) {
         </Button>
       </Flex>
 
-      <Image src="/img/taakeheimen-footer.svg" alt="" />
+      <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/taakeheimen-footer.svg`} alt="" />
 
       <Container maxW="4xl" p="0" sx={{ perspective: '492px' }}>
         {/* <Flex pb="0">
diff --git a/web/components/Sections/PageHeader.js b/web/components/Sections/PageHeader.js
index 9e8a7ec46d95a755cf5adc0820439cd9d279b534..2a44bb40545124612deef707bd7942113c5c2fd5 100644
--- a/web/components/Sections/PageHeader.js
+++ b/web/components/Sections/PageHeader.js
@@ -13,7 +13,7 @@ export default function PageHeader(props) {
       pb="16"
       mb="8"
       maxW="xl"
-      backgroundImage="url('/img/taakeheimen-border.svg')"
+      backgroundImage={`url('${process.env.NEXT_PUBLIC_BASE_PATH}/img/taakeheimen-border.svg')`}
       backgroundPosition="bottom"
       backgroundRepeat="no-repeat"
     >
diff --git a/web/next.config.js b/web/next.config.js
index c2f5d540944ce80f4b0802a4928bcac2f8208576..f2177e0d86013f7a71fcb957794301298fa88d94 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -2,18 +2,9 @@ module.exports = {
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
-        use: ["@svgr/webpack"],
-    });
+      use: ['@svgr/webpack'],
+    })
     return config
-  }
-  /* basePath: '/exhibition',
-  async redirects() {
-    return [
-      {
-        source: '/exhibition',
-        destination: '/exhibition/chk',
-        permanent: true,
-      },
-    ]
-  }, */
-}
\ No newline at end of file
+  },
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+}