diff --git a/astro.config.mjs b/astro.config.mjs
index fca267b..ccc3308 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,6 +6,7 @@ import sitemap from '@astrojs/sitemap';
 
 // https://astro.build/config
 export default defineConfig({
+  output: "hybrid",
   site: 'https://cyrilsebek.cz',
   integrations: [tailwind(), mdx(), sitemap()],
   i18n: {
diff --git a/src/components/About.astro b/src/components/About.astro
index 54d867c..508f808 100644
--- a/src/components/About.astro
+++ b/src/components/About.astro
@@ -7,7 +7,9 @@ const { title, description } = dictionary[Astro.currentLocale];
 ---
 <SinglePage>
    <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
-     <AboutModule row="0" image="/temp.jpg"/>
-     <AboutModule row="1" image="/temp.jpg" flipped />
-     <AboutModule row="2" image="/temp.jpg" alt="image"/>
+      <AboutModule row="0" image="/temp.jpg">
+        <h1 class="text-accent">Lorem</h1>
+      </AboutModule>
+      <AboutModule row="1" image="/temp.jpg" flipped />
+      <AboutModule row="2" image="/temp.jpg" alt="image"/>
 </SinglePage>
diff --git a/src/components/AboutModule.astro b/src/components/AboutModule.astro
index bc9fecf..020e18c 100644
--- a/src/components/AboutModule.astro
+++ b/src/components/AboutModule.astro
@@ -1,4 +1,4 @@
----
+    ---
 const { row, flipped, image, alt } = Astro.props;
 ---
 
@@ -7,19 +7,15 @@ const { row, flipped, image, alt } = Astro.props;
         {
             flipped ? (
                 <>
-                    <div class="bg-red-500 rounded-lg col-start-0 col-span-2 ">
+                    <div class="bg-accentRed rounded-lg col-start-0 col-span-2 ">
                         <slot />
                     </div>
-                    <div class="bg-yellow-500 h-full rounded-lg col-start-3 pb-50">
-                        <img src={image} alt={alt} class="object-cover h-full w-full rounded-lg"/>
-                    </div>
+                    <div class={`h-full rounded-lg col-start-3 bg-[url('${image}')] bg-no-repeat bg-cover`} />
                 </>
             ) : (
                 <>
-                    <div class="h-full rounded-lg col-start-0">
-                        <img src={image} alt={alt} class="object-cover  rounded-lg"/>
-                    </div>
-                    <div class="bg-red-500 rounded-lg col-start-2 col-span-2">
+                    <div class={`h-full rounded-lg col-start-0 bg-[url('${image}')] bg-no-repeat bg-cover`} />
+                    <div class="bg-accentRed rounded-lg col-start-2 col-span-2">
                         <slot />
                     </div>
                 </>
diff --git a/src/style/index.css b/src/style/index.css
index d0a8d67..d2dc29a 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -12,6 +12,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-primary: 54deg, 100%, 50%;
         --color-secondary: 237deg, 100%, 93%;
         --color-accent: 262deg, 73%, 47%;
+        --color-accent-red: 0deg, 84%, 60%;
     }
 
     @media (prefers-color-scheme: dark) {
@@ -21,6 +22,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
             --color-primary: 262deg, 77%, 44%;
             --color-secondary: 273deg, 100%, 20%;
             --color-accent: 54deg, 100%, 50%;
+            --color-accent-red: 0deg, 84%, 60%;
         }
     }
 
@@ -30,6 +32,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-primary: 262deg, 77%, 44%;
         --color-secondary: 273deg, 100%, 20%;
         --color-accent: 54deg, 100%, 50%;
+        --color-accent-red: 0deg, 84%, 60%;
     }
 
     :root[data-theme="light"] {
@@ -38,5 +41,6 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-primary: 54deg, 100%, 50%;
         --color-secondary: 237deg, 100%, 93%;
         --color-accent: 262deg, 73%, 47%;
+        --color-accent-red: 0deg, 84%, 60%;
     }
 }
\ No newline at end of file
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 8793f2a..5a7a011 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -18,6 +18,7 @@ export default {
 				primary: withOpacity('--color-primary'),
 				secondary: withOpacity('--color-secondary'),
 				accent: withOpacity('--color-accent'),
+				accentRed: withOpacity('--color-accent-red'),
 			},
 		},
 	},