diff --git a/components/paths/PathsPageContent.tsx b/components/paths/PathsPageContent.tsx
index 9acc5658..0b331128 100644
--- a/components/paths/PathsPageContent.tsx
+++ b/components/paths/PathsPageContent.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { GetContentPageQuery } from 'common/__generated__/graphql';
 import StreamField from 'components/paths/StreamField';
-import { Container } from 'reactstrap';
 import styled, { css } from 'styled-components';
 
 import { ActionListPage } from '@/app/[domain]/[lang]/[plan]/(with-layout-elements)/actions/ActionListPage';
@@ -62,14 +61,12 @@ const PathsPageContent = ({
       {isCategoryPage && (
         <ContentArea>
           <MainContent>
-            <Container>
-              <CategoryPageHeaderBlock
-                page={page}
-                title={page.title}
-                lead="Category page header title"
-              />
-              {page.body && <StreamField page={page} blocks={page.body} />}
-            </Container>
+            <CategoryPageHeaderBlock
+              page={page}
+              title={page.title}
+              lead="Category page header title"
+            />
+            {page.body && <StreamField page={page} blocks={page.body} />}
           </MainContent>
         </ContentArea>
       )}
diff --git a/components/paths/StreamField.tsx b/components/paths/StreamField.tsx
index 77966efc..6038526e 100644
--- a/components/paths/StreamField.tsx
+++ b/components/paths/StreamField.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 
-import { ColProps } from 'reactstrap';
+import { Col, ColProps, Container, Row } from 'reactstrap';
 
 import type { StreamFieldFragmentFragment } from '@/common/__generated__/graphql';
 import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 import { ErrorPage } from '@/components/common/ErrorPage';
+import RichText from '@/components/common/RichText';
 import ActionCategoryFilterCardsBlock from '@/components/contentblocks/ActionCategoryFilterCardsBlock';
 import ActionListBlock from '@/components/contentblocks/ActionListBlock';
 import IndicatorGroupBlock from '@/components/contentblocks/IndicatorGroupBlock';
+import QuestionAnswerBlock from '@/components/contentblocks/QuestionAnswerBlock';
 import CategoryListBlock from '@/components/paths/contentblocks/CategoryListBlock';
 import CategoryTypeListBlock from '@/components/paths/contentblocks/CategoryTypeListBlock';
 import PathsOutcomeBlock from '@/components/paths/contentblocks/PathsOutcomeBlock';
@@ -116,8 +118,39 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
         </div>
       );
     }
-    case 'RichTextBlock':
-    case 'QuestionAnswerBlock':
+    case 'RichTextBlock': {
+      const { value } = block;
+      const COLLAPSIBLE_BREAKPOINT = 1200;
+      const isCollapsible =
+        page.__typename === 'CategoryPage' &&
+        value.length > COLLAPSIBLE_BREAKPOINT;
+      return (
+        <Container id={id}>
+          <Row>
+            <Col
+              xl={{ size: 6, offset: 3 }}
+              lg={{ size: 8, offset: 2 }}
+              md={{ size: 10, offset: 1 }}
+              className="my-4"
+            >
+              <RichText html={value} isCollapsible={isCollapsible} />
+            </Col>
+          </Row>
+        </Container>
+      );
+    }
+    case 'QuestionAnswerBlock': {
+      const { heading, questions } = block;
+
+      return (
+        <QuestionAnswerBlock
+          id={id}
+          heading={heading || ''}
+          questions={questions || []}
+          hasSidebar={false}
+        />
+      );
+    }
     case 'CharBlock':
     case 'FrontPageHeroBlock':
     case 'LargeImageBlock':
diff --git a/components/paths/contentblocks/CategoryListBlock.tsx b/components/paths/contentblocks/CategoryListBlock.tsx
index 090fb2ab..b6d52f2c 100644
--- a/components/paths/contentblocks/CategoryListBlock.tsx
+++ b/components/paths/contentblocks/CategoryListBlock.tsx
@@ -135,56 +135,54 @@ const CategoryList = (props) => {
 
   //console.log('categoryData', categoryData);
   return (
-    <Container>
-      <Row>
-        {categories
-          ?.filter((cat) => cat?.categoryPage?.live)
-          .map(
-            (cat) =>
-              cat.categoryPage && (
-                <Col
-                  tag="li"
-                  xs="12"
-                  sm="6"
-                  lg="4"
-                  key={cat.id}
-                  className="mb-5 d-flex align-items-stretch"
-                >
-                  <Link href={cat.categoryPage.urlPath} legacyBehavior>
-                    <a className="card-wrapper">
-                      <Card
-                        colorEffect={cat.color ?? undefined}
-                        altText={cat.image?.altText}
-                      >
-                        <div>
-                          <CardHeader className="card-title">
-                            {!cat?.type.hideCategoryIdentifiers && (
-                              <Identifier>{cat.identifier}. </Identifier>
-                            )}
-                            {cat.name}
-                          </CardHeader>
-                          {cat.leadParagraph && <p>{cat.leadParagraph}</p>}
-                          {cat.pathsAction && (
-                            <div>
-                              {yearRange ? (
-                                beautifyValue(
-                                  cat.pathsAction.getYearlyImpact(yearRange[1])
-                                )
-                              ) : (
-                                <span>---</span>
-                              )}
-                              {cat.pathsAction.getUnit()}
-                            </div>
+    <Row>
+      {categories
+        ?.filter((cat) => cat?.categoryPage?.live)
+        .map(
+          (cat) =>
+            cat.categoryPage && (
+              <Col
+                tag="li"
+                xs="12"
+                sm="6"
+                lg="4"
+                key={cat.id}
+                className="mb-5 d-flex align-items-stretch"
+              >
+                <Link href={cat.categoryPage.urlPath} legacyBehavior>
+                  <a className="card-wrapper">
+                    <Card
+                      colorEffect={cat.color ?? undefined}
+                      altText={cat.image?.altText}
+                    >
+                      <div>
+                        <CardHeader className="card-title">
+                          {!cat?.type.hideCategoryIdentifiers && (
+                            <Identifier>{cat.identifier}. </Identifier>
                           )}
-                        </div>
-                      </Card>
-                    </a>
-                  </Link>
-                </Col>
-              )
-          )}
-      </Row>
-    </Container>
+                          {cat.name}
+                        </CardHeader>
+                        {cat.leadParagraph && <p>{cat.leadParagraph}</p>}
+                        {cat.pathsAction && (
+                          <div>
+                            {yearRange ? (
+                              beautifyValue(
+                                cat.pathsAction.getYearlyImpact(yearRange[1])
+                              )
+                            ) : (
+                              <span>---</span>
+                            )}
+                            {cat.pathsAction.getUnit()}
+                          </div>
+                        )}
+                      </div>
+                    </Card>
+                  </a>
+                </Link>
+              </Col>
+            )
+        )}
+    </Row>
   );
 };
 
@@ -201,10 +199,12 @@ const CategoryListBlock = (props: CategoryListBlockProps) => {
   //console.log('CategoryListBlock', props);
   return (
     <CategoryListSection id={id}>
-      {heading && <h4>{heading}</h4>}
-      <Suspense fallback={<div>Loading...</div>}>
-        <CategoryList categories={categories} />
-      </Suspense>
+      <Container>
+        {heading && <h4>{heading}</h4>}
+        <Suspense fallback={<div>Loading...</div>}>
+          <CategoryList categories={categories} />
+        </Suspense>
+      </Container>
     </CategoryListSection>
   );
 };
diff --git a/components/paths/contentblocks/CategoryPageHeaderBlock.tsx b/components/paths/contentblocks/CategoryPageHeaderBlock.tsx
index a7f48964..aeb4a70c 100644
--- a/components/paths/contentblocks/CategoryPageHeaderBlock.tsx
+++ b/components/paths/contentblocks/CategoryPageHeaderBlock.tsx
@@ -6,6 +6,7 @@ import { CategoryPage } from 'components/common/CategoryPageStreamField';
 import { usePaths } from 'context/paths/paths';
 import { usePlan } from 'context/plan';
 import { useTranslations } from 'next-intl';
+import { Container } from 'reactstrap';
 import styled, { useTheme } from 'styled-components';
 
 import { gql } from '@apollo/client';
@@ -30,6 +31,11 @@ export const GET_CATEGORY_ATTRIBUTE_TYPES = gql`
   }
 `;
 
+const Background = styled.div`
+  padding: 4rem 0 2em;
+  background-color: ${(props) => props.theme.brandDark};
+`;
+
 const PathsActionImpact = styled.div`
   display: flex;
   margin-right: 1rem;
@@ -92,57 +98,61 @@ function CategoryPageHeaderBlock(props: Props) {
     level && !theme.settings.categories.categoryPageHideCategoryLabel;
 
   return (
-    <CategoryHeader>
-      <Breadcrumbs
-        breadcrumbs={[
-          {
-            id: '1',
-            name: 'Massnahmenpakete',
-            url: '/',
-          },
-          {
-            id: '2',
-            name: 'Pakete',
-            url: '/categories/',
-          },
-          {
-            id: '3',
-            name: title,
-            url: `/categories/${identifier}/`,
-          },
-        ]}
-      />
-      <h1>
-        {identifier && <Identifier>{identifier}.</Identifier>} {title}
-      </h1>
-      {hasPaths && (
-        <PathsActionImpact>
-          <div>
-            <h4>Emissions (2022)</h4>
-            <div>
-              <div>
-                Direct emissions<h5>XXX</h5>
-              </div>
-              <div>
-                Indirect emissions<h5>XXX</h5>
-              </div>
-            </div>
-          </div>
-          <div>
-            <h4>Emissions target (2024)</h4>
-            <div>
+    <Background>
+      <Container>
+        <CategoryHeader>
+          <Breadcrumbs
+            breadcrumbs={[
+              {
+                id: '1',
+                name: 'Massnahmenpakete',
+                url: '/',
+              },
+              {
+                id: '2',
+                name: 'Pakete',
+                url: '/categories/',
+              },
+              {
+                id: '3',
+                name: title,
+                url: `/categories/${identifier}/`,
+              },
+            ]}
+          />
+          <h1>
+            {identifier && <Identifier>{identifier}.</Identifier>} {title}
+          </h1>
+          {hasPaths && (
+            <PathsActionImpact>
               <div>
-                Direct emissions<h5>XXX</h5>
+                <h4>Emissions (2022)</h4>
+                <div>
+                  <div>
+                    Direct emissions<h5>XXX</h5>
+                  </div>
+                  <div>
+                    Indirect emissions<h5>XXX</h5>
+                  </div>
+                </div>
               </div>
               <div>
-                Indirect emissions<h5>XXX</h5>
+                <h4>Emissions target (2024)</h4>
+                <div>
+                  <div>
+                    Direct emissions<h5>XXX</h5>
+                  </div>
+                  <div>
+                    Indirect emissions<h5>XXX</h5>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </PathsActionImpact>
-      )}
-      {lead && <p>{lead}</p>}
-    </CategoryHeader>
+            </PathsActionImpact>
+          )}
+          {lead && <p>{lead}</p>}
+        </CategoryHeader>
+      </Container>
+    </Background>
   );
 }
 
diff --git a/components/paths/contentblocks/CategoryTypeListBlock.tsx b/components/paths/contentblocks/CategoryTypeListBlock.tsx
index df02e2c1..2882c478 100644
--- a/components/paths/contentblocks/CategoryTypeListBlock.tsx
+++ b/components/paths/contentblocks/CategoryTypeListBlock.tsx
@@ -5,8 +5,9 @@ import { MultiUseImageFragmentFragment } from 'common/__generated__/graphql';
 import { CommonContentBlockProps } from 'common/blocks.types';
 import { useTranslations } from 'next-intl';
 import { readableColor } from 'polished';
+import ContentLoader from 'react-content-loader';
 import { Col, Container, FormGroup, Input, Label, Row } from 'reactstrap';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { getDeepParents } from '@/common/categories';
 import { usePaths } from '@/context/paths/paths';
@@ -48,28 +49,49 @@ const GET_CATEGORIES_FOR_CATEGORY_TYPE_LIST = gql`
   ${RECURSIVE_CATEGORY_FRAGMENT}
 `;
 
-const GroupHeader = styled.h4`
-  border-left: 6px solid ${(props) => props.$color};
-  margin-bottom: 24px;
+const CategoryListContentLoader = (props) => {
+  const theme = useTheme();
+  return (
+    <ContentLoader
+      speed={1}
+      viewBox="0 0 600 80"
+      backgroundColor={theme.graphColors.grey010}
+      foregroundColor={theme.graphColors.grey030}
+      style={{ width: '100%' }}
+      {...props}
+    >
+      <rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
+      <rect x="5" y="2" rx="3" ry="3" width="180" height="69" />
+      <rect x="211" y="1" rx="3" ry="3" width="180" height="69" />
+      <rect x="413" y="0" rx="3" ry="3" width="180" height="69" />
+    </ContentLoader>
+  );
+};
+
+const HeaderSection = styled.div`
+  padding: 4rem 0;
+  margin-bottom: 2rem;
+  background-color: ${(props) => props.theme.brandDark};
+  color: ${(props) => props.theme.themeColors.white};
 `;
 
-const CategoryListSection = styled.div`
-  background-color: ${({ theme }) => getBackgroundColor(theme)};
-  padding: ${(props) =>
-    `${props.theme.spaces.s400} 0 ${props.theme.spaces.s100} 0`};
-  color: ${({ theme }) => getColor(theme)};
-
-  h2 {
-    font-size: ${(props) => props.theme.fontSizeLg};
-    color: ${({ theme }) => getColor(theme, theme.headingsColor)};
-  }
+const StyledTitle = styled.h1`
+  margin-bottom: 2rem;
+  font-size: ${(props) => props.theme.fontSizeLg};
+  color: inherit;
 
   @media (min-width: ${(props) => props.theme.breakpointMd}) {
-    h2 {
-      font-size: ${(props) => props.theme.fontSizeXl};
-    }
+    font-size: ${(props) => props.theme.fontSizeXl};
   }
+`;
 
+const GroupHeader = styled.h4`
+  border-left: 6px solid ${(props) => props.$color};
+  margin-bottom: 24px;
+`;
+
+const CategoryListSection = styled.div`
+  padding-bottom: 6rem;
   a.card-wrapper {
     display: flex;
     width: 100%;
@@ -180,25 +202,31 @@ const CategoryList = (props) => {
 
   return (
     <>
-      <FormGroup>
-        <Label for="sort">{t('actions-sort-by')}</Label>
-        <Input
-          id="sort"
-          name="select"
-          type="select"
-          onChange={(e) => handleChangeSort(e.target.value as SortActionsBy)}
-          value={sortBy.key}
-        >
-          {sortOptions.map(
-            (sortOption) =>
-              !sortOption.isHidden && (
-                <option key={sortOption.key} value={sortOption.key}>
-                  {sortOption.label}
-                </option>
-              )
-          )}
-        </Input>
-      </FormGroup>
+      <Row>
+        <Col xs={{ size: 6, offset: 6 }} md={{ size: 2, offset: 10 }}>
+          <FormGroup>
+            <Label for="sort">{t('actions-sort-by')}</Label>
+            <Input
+              id="sort"
+              name="select"
+              type="select"
+              onChange={(e) =>
+                handleChangeSort(e.target.value as SortActionsBy)
+              }
+              value={sortBy.key}
+            >
+              {sortOptions.map(
+                (sortOption) =>
+                  !sortOption.isHidden && (
+                    <option key={sortOption.key} value={sortOption.key}>
+                      {sortOption.label}
+                    </option>
+                  )
+              )}
+            </Input>
+          </FormGroup>
+        </Col>
+      </Row>
       {groups?.map((group) => (
         <Row key={group?.id}>
           {group?.id !== 'all' && (
@@ -285,26 +313,31 @@ const CategoryTypeListBlock = (props: CategoryTypeListBlockProps) => {
     }
   );
 
-  if (loading) {
-    return <div>Loading...</div>; // Or any loading indicator you prefer
-  }
   if (error) {
     return <div>Error: {error.message}</div>;
   }
 
-  const categories = data.planCategories.filter(
-    (cat) => cat.level.id === listByLevel
-  );
+  const categories = data
+    ? data.planCategories.filter((cat) => cat.level.id === listByLevel)
+    : [];
+  const groups = getParentCategoriesOfLevel(categories, groupByLevel);
   return (
     <CategoryListSection id={id}>
+      <HeaderSection>
+        <Container>
+          <Row>
+            <Col className="mb-4">
+              {heading && <StyledTitle>{heading}</StyledTitle>}
+            </Col>
+          </Row>
+        </Container>
+      </HeaderSection>
       <Container>
-        <Row>
-          <Col className="mb-4">{heading && <h2>{heading}</h2>}</Col>
-        </Row>
-        <CategoryList
-          categories={categories}
-          groups={getParentCategoriesOfLevel(categories, groupByLevel)}
-        />
+        {loading ? (
+          <CategoryListContentLoader />
+        ) : (
+          <CategoryList categories={categories} groups={groups} />
+        )}
       </Container>
     </CategoryListSection>
   );