diff --git a/README.md b/README.md
index 5bc8304..a0f1668 100644
--- a/README.md
+++ b/README.md
@@ -59,3 +59,42 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+**Rendering strategies**
+
+- Login - Static
+- Timeline - Static && Client Side
+- Profile - Client Side
+- Detail - Server side
+
+**Features**
+
+Mobile first design 
+
+Error handling
+
+- Client Side - with error modal, retry option, where retry is possible
+- Server Side - with custom error page
+
+Timeline Page 
+
+- State management: X-state
+- Preserves scrolled down position on page re-entry
+- Background polling for new posts, refresh button
+- Infinity scrolling
+- User data cache (limit the number of requests)
+
+Profile Page
+
+- State management: X-state
+- 3 possible states: new user (suggested users and posts), other user (only posts), loggedInUser (posts and liked posts)
+- Infinity scrolling
+- User data cache (limit the number of requests)
+
+Detail Page
+
+- State management: useReducer
+- Can be shared (by copying and pasting the url in a different window)
+
+
+
diff --git a/next.config.js b/next.config.js
index 1c9a073..f3dd6b9 100644
--- a/next.config.js
+++ b/next.config.js
@@ -15,6 +15,10 @@ module.exports = withPWA({
         hostname: 'storage.googleapis.com',
         pathname: '/qwacker-api-prod-data/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'cdn.pixabay.com',
+      },
     ],
   },
   i18n: {
diff --git a/package-lock.json b/package-lock.json
index f3c6db5..697bba3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "cas-fee-adv-qwacker-tpl",
       "version": "0.0.0-development",
       "dependencies": {
-        "@smartive-education/design-system-component-z-index-at": "1.4.22",
+        "@smartive-education/design-system-component-z-index-at": "1.4.31",
         "@types/node": "18.11.9",
         "@types/react": "18.0.25",
         "@types/react-dom": "18.0.8",
@@ -2649,9 +2649,9 @@
       }
     },
     "node_modules/@smartive-education/design-system-component-z-index-at": {
-      "version": "1.4.22",
-      "resolved": "https://npm.pkg.github.com/download/@smartive-education/design-system-component-z-index-at/1.4.22/cc45d2fcb7ce14e647972a86b69c65747843c459",
-      "integrity": "sha512-GBTW15fmSkKAiU6B7OBwh9EY745JAhOhvtGZBEc10avwmjhiyTUazzcNdsS0iplmkUMyVjPA5PDn2Q7prZHzbw==",
+      "version": "1.4.31",
+      "resolved": "https://npm.pkg.github.com/download/@smartive-education/design-system-component-z-index-at/1.4.31/8e97f7cf384063d868240f37d9e06e2f56bf13ae",
+      "integrity": "sha512-ZAiKMyW7Jk4WEG2MnjRhWQLuOp8W767pgzwhiPv28MQQTrkq9gWq5gfai/mx5tynZewIkJ4L0cNcVSvl38prng==",
       "dependencies": {
         "tailwindcss": "^3.2.4"
       },
@@ -13178,9 +13178,9 @@
       }
     },
     "@smartive-education/design-system-component-z-index-at": {
-      "version": "1.4.22",
-      "resolved": "https://npm.pkg.github.com/download/@smartive-education/design-system-component-z-index-at/1.4.22/cc45d2fcb7ce14e647972a86b69c65747843c459",
-      "integrity": "sha512-GBTW15fmSkKAiU6B7OBwh9EY745JAhOhvtGZBEc10avwmjhiyTUazzcNdsS0iplmkUMyVjPA5PDn2Q7prZHzbw==",
+      "version": "1.4.31",
+      "resolved": "https://npm.pkg.github.com/download/@smartive-education/design-system-component-z-index-at/1.4.31/8e97f7cf384063d868240f37d9e06e2f56bf13ae",
+      "integrity": "sha512-ZAiKMyW7Jk4WEG2MnjRhWQLuOp8W767pgzwhiPv28MQQTrkq9gWq5gfai/mx5tynZewIkJ4L0cNcVSvl38prng==",
       "requires": {
         "tailwindcss": "^3.2.4"
       }
diff --git a/package.json b/package.json
index e5de632..6236a44 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "cruiser": "npx depcruise --config .dependency-cruiser.js . --exclude \"^.next\""
   },
   "dependencies": {
-    "@smartive-education/design-system-component-z-index-at": "1.4.22",
+    "@smartive-education/design-system-component-z-index-at": "1.4.31",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index 522c2cf..29c7b7c 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -2,6 +2,7 @@ import {
   Button,
   LandingPage,
 } from '@smartive-education/design-system-component-z-index-at';
+import { GetStaticProps } from 'next';
 import { signIn, useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -34,3 +35,9 @@ export default function LoginPage() {
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps<{}> = async () => {
+  return {
+    props: {},
+  };
+};
\ No newline at end of file
diff --git a/pages/error/index.tsx b/pages/error/index.tsx
index 80d5386..be5db36 100644
--- a/pages/error/index.tsx
+++ b/pages/error/index.tsx
@@ -17,7 +17,7 @@ export default function ErrorPage() {
           Oops. Das hätte nicht passieren dürfen!
         </Typography>
         <div className="w-[80vh] my-4">
-          <CardWrapper titel="Was wollen sie jetzt tun?" src={errorPicture} />
+          <CardWrapper titel="Was willst du jetzt machen?" src={errorPicture} />
         </div>
         <div className="my-4">
           <Button
diff --git a/pages/profile/[id].tsx b/pages/profile/[id].tsx
index af45514..ef66dd7 100644
--- a/pages/profile/[id].tsx
+++ b/pages/profile/[id].tsx
@@ -26,6 +26,7 @@ import {
   noMumblesPicture,
 } from '../../models/constants';
 import { profileMachine } from '../../state/profile-machine';
+import Image from 'next/image';
 
 export default function ProfilePage() {
   const { data: session } = useSession();
@@ -155,24 +156,32 @@ export default function ProfilePage() {
         />
       </Modal>
       {!profileState.context.user ? (
-        <>
-          <div className="my-4 md:h-[35rem]">
-            <Skeleton isProfile={true} />
-          </div>
-        </>
+        <div className="mt-4 mb-4 md:mb-16">
+          <Skeleton isProfile={true} />
+        </div>
       ) : (
         <div className="my-4">
           <ProfileCard
             name={`${profileState.context.user?.firstName} ${profileState.context.user?.lastName}`}
             userName={profileState.context.user?.userName || ''}
-            profileImage={profileState.context.background}
             profilePicture={
               profileState.context.user?.avatarUrl || defaultProfilePicture
             }
             location="Rapperswil"
             calendarText="Mitglied seit 6 Monaten"
             profileText={profileState.context.bio}
-          />
+          >
+            <Image
+              src={profileState.context.background}
+              alt="Profile Background"
+              fill
+              priority={true}
+              sizes="(min-width: 60rem) 40vw,
+                        (min-width: 30rem) 50vw,
+                        100vw"
+              className="object-cover"
+            />
+          </ProfileCard>
         </div>
       )}
       {profileState.context.isNewUserProfile && (