diff --git a/src/features/app/actions.ts b/src/components/SelectedUseCases.tsx
similarity index 51%
rename from src/features/app/actions.ts
rename to src/components/SelectedUseCases.tsx
index 60102714..b5bf34a2 100644
--- a/src/features/app/actions.ts
+++ b/src/components/SelectedUseCases.tsx
@@ -1,6 +1,6 @@
-/********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+/*********************************************************************************
+ * Copyright (c) 2024 T-Systems International GmbH
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -17,26 +17,26 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
-import { createAsyncThunk } from '@reduxjs/toolkit';
 
-import AppService from '../../services/appService';
+import { Typography } from 'cx-portal-shared-components';
+import { filter, isEmpty } from 'lodash';
 
-const fetchUserPermissions = createAsyncThunk('/user/permissions', async () => {
-  try {
-    const res = await AppService.getInstance().getUserPermissions();
-    return res.data;
-  } catch (error) {
-    console.log('api call error:', error);
-  }
-});
+import { useAppSelector } from '../features/store';
 
-const fetchUseCases = createAsyncThunk('/usecases', async () => {
-  try {
-    const res = await AppService.getInstance().getUseCases();
-    return res.data;
-  } catch (error) {
-    console.log('api call error:', error);
-  }
-});
+function SelectedUseCases() {
+  const { useCases } = useAppSelector(state => state.appSlice);
+  return (
+    <>
+      {!isEmpty(filter(useCases, 'checked')) && (
+        <Typography variant="h4" mb={2} textTransform={'capitalize'}>
+          Selected use cases:{' '}
+          {filter(useCases, 'checked')
+            .map(e => e.title)
+            .join(', ')}
+        </Typography>
+      )}
+    </>
+  );
+}
 
-export { fetchUseCases, fetchUserPermissions };
+export default SelectedUseCases;
diff --git a/src/components/layouts/AppLayout.tsx b/src/components/layouts/AppLayout.tsx
index e1124ad3..69402650 100644
--- a/src/components/layouts/AppLayout.tsx
+++ b/src/components/layouts/AppLayout.tsx
@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2021,2022 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -18,9 +18,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 import { Box } from '@mui/material';
-import { useEffect } from 'react';
 
-import { fetchUserPermissions } from '../../features/app/actions';
+import { useGetPermissionsQuery, useGetUseCasesQuery } from '../../features/app/apiSlice';
 import { setLoggedInUser } from '../../features/app/slice';
 import { useAppDispatch } from '../../features/store';
 import Nav from '../Nav';
@@ -28,12 +27,11 @@ import Sidebar from '../sidebar';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function AppLayout(props: any) {
+  useGetUseCasesQuery({});
+  useGetPermissionsQuery({});
+
   const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(fetchUserPermissions());
-    dispatch(setLoggedInUser(props.loggedUser));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  dispatch(setLoggedInUser(props.loggedUser));
 
   return (
     <Box sx={{ my: 0, mx: 'auto', overflowY: 'auto', overflowX: 'hidden', height: '100vh' }}>
diff --git a/src/features/app/apiSlice.ts b/src/features/app/apiSlice.ts
index 2ca50e38..ebaa7663 100644
--- a/src/features/app/apiSlice.ts
+++ b/src/features/app/apiSlice.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
  *
@@ -21,7 +21,8 @@ import { BaseQueryFn, createApi, FetchArgs, fetchBaseQuery, FetchBaseQueryError
 
 import { apiBaseQuery } from '../../services/RequestService';
 import { setSnackbarMessage } from '../notifiication/slice';
-import { IExtraOptions } from './types';
+import { setPageLoading, setPermissions, setUseCases } from './slice';
+import { IExtraOptions, UseCaseSelectionModel } from './types';
 
 const baseQuery = fetchBaseQuery(apiBaseQuery());
 const baseQueryInterceptor: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, IExtraOptions> = async (
@@ -54,6 +55,41 @@ const baseQueryInterceptor: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQu
 export const apiSlice = createApi({
   reducerPath: 'api',
   baseQuery: baseQueryInterceptor,
-  endpoints: () => ({}),
+  endpoints: builder => ({
+    getUseCases: builder.query({
+      query: () => {
+        return {
+          url: '/usecases',
+        };
+      },
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          dispatch(setPageLoading(true));
+          const data = UseCaseSelectionModel.create((await queryFulfilled).data);
+          dispatch(setUseCases(data));
+        } finally {
+          dispatch(setPageLoading(false));
+        }
+      },
+    }),
+    getPermissions: builder.query({
+      query: () => {
+        return {
+          url: '/user/role/permissions',
+        };
+      },
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          dispatch(setPageLoading(true));
+          const data = (await queryFulfilled).data;
+          dispatch(setPermissions(data));
+        } finally {
+          dispatch(setPageLoading(false));
+        }
+      },
+    }),
+  }),
   tagTypes: ['UploadHistory', 'DeleteContract'],
 });
+
+export const { useGetUseCasesQuery, useGetPermissionsQuery } = apiSlice;
diff --git a/src/features/app/slice.ts b/src/features/app/slice.ts
index a805641f..8a33818f 100644
--- a/src/features/app/slice.ts
+++ b/src/features/app/slice.ts
@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -19,8 +19,8 @@
  ********************************************************************************/
 
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { filter } from 'lodash';
 
-import { fetchUseCases, fetchUserPermissions } from './actions';
 import { IAppSlice, IUser } from './types';
 
 const initialState: IAppSlice = {
@@ -53,27 +53,15 @@ export const appSlice = createSlice({
     setSidebarExpanded: state => {
       state.sidebarExpanded = !state.sidebarExpanded;
     },
-    setSelectedUseCases: (state, action: PayloadAction<string[]>) => {
-      state.selectedUseCases = action.payload;
+    setUseCases: (state, { payload }) => {
+      state.useCases = payload;
+      state.selectedUseCases = filter(payload, 'checked').map(e => e.id);
+    },
+    setPermissions: (state, { payload }) => {
+      state.permissions = payload;
     },
-  },
-  extraReducers: builder => {
-    builder.addCase(fetchUserPermissions.pending, state => {
-      state.pageLoading = true;
-    });
-    builder.addCase(fetchUserPermissions.fulfilled, (state, action) => {
-      state.permissions = action.payload;
-      state.pageLoading = false;
-    });
-    builder.addCase(fetchUseCases.pending, state => {
-      state.pageLoading = true;
-    });
-    builder.addCase(fetchUseCases.fulfilled, (state, action) => {
-      state.useCases = action.payload;
-      state.pageLoading = false;
-    });
   },
 });
 
-export const { setPageLoading, setLoggedInUser, setSelectedUseCases, setSidebarExpanded } = appSlice.actions;
+export const { setPageLoading, setLoggedInUser, setUseCases, setPermissions, setSidebarExpanded } = appSlice.actions;
 export default appSlice.reducer;
diff --git a/src/features/app/types.ts b/src/features/app/types.ts
index 2dd91ae5..8fd281f4 100644
--- a/src/features/app/types.ts
+++ b/src/features/app/types.ts
@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -41,9 +41,18 @@ export interface IAppSlice {
 export interface IUseCase {
   id: string;
   title: string;
+  checked?: boolean;
 }
 export interface IExtraOptions {
   showNotification?: boolean;
   message?: string;
   type?: IAlertColors;
 }
+
+export class UseCaseSelectionModel {
+  static create(useCase: IUseCase[]) {
+    return useCase.map(item => {
+      return { id: item.id, title: item.title, checked: false };
+    });
+  }
+}
diff --git a/src/pages/CreateData.tsx b/src/pages/CreateData.tsx
index 68e84bfc..257c5632 100644
--- a/src/pages/CreateData.tsx
+++ b/src/pages/CreateData.tsx
@@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next';
 
 import DownloadSamples from '../components/DownloadSamples';
 import AddEditPolicy from '../components/policies/AddEditPolicy';
+import SelectedUseCases from '../components/SelectedUseCases';
 import SelectSubmodel from '../components/SelectSubmodel';
 import SubmodelDataTable from '../components/SubmodelDataTable';
 import SubmodelInfo from '../components/SubmodelInfo';
@@ -44,9 +45,10 @@ export default function CreateData() {
 
   return (
     <>
-      <Typography variant="h3" mb={2}>
+      <Typography variant="h3" mb={1}>
         {t('content.provider.heading')}
       </Typography>
+      <SelectedUseCases />
       <Typography variant="body1">{t('content.provider.description_1')}</Typography>
       <Typography variant="body1">{t('content.provider.description_2')}</Typography>
       <ul style={{ margin: 0 }}>
diff --git a/src/pages/Help.tsx b/src/pages/Help.tsx
index 21fb1439..99753bf1 100644
--- a/src/pages/Help.tsx
+++ b/src/pages/Help.tsx
@@ -1,6 +1,6 @@
 /*********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -18,13 +18,16 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import InfoIcon from '@mui/icons-material/Info';
-import { Card, CardContent, Grid } from '@mui/material';
+import { Box, Card, CardContent, Grid } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
-import { Table, Tooltips, Typography } from 'cx-portal-shared-components';
+import { Button, IconButton, Table, Tooltips, Typography } from 'cx-portal-shared-components';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DownloadSamples from '../components/DownloadSamples';
+import SelectedUseCases from '../components/SelectedUseCases';
 import { useGetHelpPageDataQuery } from '../features/provider/submodels/apiSlice';
 import { HelpPageData } from '../features/provider/submodels/types';
 import { useAppSelector } from '../features/store';
@@ -71,43 +74,60 @@ export default function Help() {
   const { t } = useTranslation();
   const { selectedUseCases } = useAppSelector(state => state.appSlice);
   const { isSuccess, data } = useGetHelpPageDataQuery({ usecases: selectedUseCases });
+  const refScrollUp = useRef(null);
+
+  const handleScrollUp = () => {
+    refScrollUp.current.scrollIntoView({ behavior: 'smooth' });
+  };
 
   if (isSuccess) {
     return (
       <>
+        <Box ref={refScrollUp}> </Box>
         <Typography variant="h3" mb={1}>
           {t('pages.help')}
         </Typography>
-        <Typography variant="body1" mb={4}>
+        <SelectedUseCases />
+        <Typography variant="body1" mb={2}>
           {t('content.help.description')}
         </Typography>
+        <Box mb={3} position={'sticky'}>
+          Quick links:
+          {data.map((table: HelpPageData) => (
+            <Button variant="text" size="small" sx={{ mr: 2 }} key={table.id} href={`#${table.id}`}>
+              {table.name}
+            </Button>
+          ))}
+        </Box>
         {data.map((table: HelpPageData) => (
-          <Grid key={table.id} container spacing={4} display={'flex'} alignItems={'center'}>
-            <Grid item xs={8} mb={4}>
-              <Table
-                title={table.name}
-                getRowId={row => row.id}
-                autoHeight
-                hideFooter={true}
-                columns={columns}
-                rows={table.rows}
-                sx={{
-                  '& .MuiDataGrid-cellCheckbox': {
-                    padding: '0 30px',
-                  },
-                  '& h5.MuiTypography-root.MuiTypography-h5 span': {
-                    display: 'none',
-                  },
-                }}
-              />
-            </Grid>
-            <Grid item xs={4} display={'flex'} flexDirection={'column'} alignItems={'center'}>
-              <Typography variant="body1" mb={4}>
-                {table.description}
-              </Typography>
-              <DownloadSamples submodel={table.id} />
+          <section key={table.id} id={table.id}>
+            <Grid key={table.id} container spacing={4} display={'flex'} alignItems={'center'}>
+              <Grid item xs={8} mb={4}>
+                <Table
+                  title={table.name}
+                  getRowId={row => row.id}
+                  autoHeight
+                  hideFooter={true}
+                  columns={columns}
+                  rows={table.rows}
+                  sx={{
+                    '& .MuiDataGrid-cellCheckbox': {
+                      padding: '0 30px',
+                    },
+                    '& h5.MuiTypography-root.MuiTypography-h5 span': {
+                      display: 'none',
+                    },
+                  }}
+                />
+              </Grid>
+              <Grid item xs={4} display={'flex'} flexDirection={'column'} alignItems={'center'}>
+                <Typography variant="body1" mb={4}>
+                  {table.description}
+                </Typography>
+                <DownloadSamples submodel={table.id} />
+              </Grid>
             </Grid>
-          </Grid>
+          </section>
         ))}
         <Card variant="outlined">
           <CardContent>
@@ -119,6 +139,13 @@ export default function Help() {
             </ul>
           </CardContent>
         </Card>
+        <IconButton
+          color="secondary"
+          onClick={() => handleScrollUp()}
+          sx={{ position: 'fixed', bottom: '30px', right: '30px' }}
+        >
+          <ArrowUpwardIcon />
+        </IconButton>
       </>
     );
   } else return null;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8bb898a6..b065c1ca 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -21,49 +21,41 @@
 import '../styles/home.scss';
 
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Avatar, Box, FormControl, Grid, Stack } from '@mui/material';
-import { Button, Tab, TabPanel, Tabs, Typography } from 'cx-portal-shared-components';
-import { SyntheticEvent, useCallback, useEffect, useState } from 'react';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { Avatar, Box, FormControlLabel, Grid } from '@mui/material';
+import { Button, Checkbox, Tab, TabPanel, Tabs, Typography } from 'cx-portal-shared-components';
+import { SyntheticEvent, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import legalNoticeContent from '../assets/about/legal-notice.json';
 import { DataExchangeStepper } from '../components/DataExchangeStepper';
-import { fetchUseCases } from '../features/app/actions';
-import { setSelectedUseCases } from '../features/app/slice';
+import { setUseCases } from '../features/app/slice';
 import { IUseCase } from '../features/app/types';
 import { clearRows, setSelectedSubmodel } from '../features/provider/submodels/slice';
 import { ISubmodelList } from '../features/provider/submodels/types';
 import { removeSelectedFiles, setUploadStatus } from '../features/provider/upload/slice';
 import { useAppDispatch, useAppSelector } from '../features/store';
 import { consumeDataSteps, provideDataSteps } from '../models/Home';
+import { USER_GUIDE_URL } from '../utils/constants';
 import { openInNewTab } from '../utils/utils';
 
 export default function Home() {
   const [activeTab, setActiveTab] = useState(0);
-  const { loggedInUser, useCases, selectedUseCases } = useAppSelector(state => state.appSlice);
+  const { loggedInUser, useCases } = useAppSelector(state => state.appSlice);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  useEffect(() => {
-    dispatch(fetchUseCases());
-  }, [dispatch]);
-
   const handleUseCaseChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+    (usecase: IUseCase) => {
       // Clearing all the ongoing uploads
       dispatch(setSelectedSubmodel({} as ISubmodelList));
       dispatch(setUploadStatus(true));
       dispatch(clearRows());
       dispatch(removeSelectedFiles());
 
-      const { value, checked } = event.target;
-      if (checked) {
-        dispatch(setSelectedUseCases([...selectedUseCases, value]));
-      } else {
-        dispatch(setSelectedUseCases(selectedUseCases.filter((e: string) => e !== value)));
-      }
+      const res = useCases.map(item => (item.id === usecase.id ? { ...item, checked: !item.checked } : item));
+      dispatch(setUseCases(res));
     },
-    [dispatch, selectedUseCases],
+    [dispatch, useCases],
   );
 
   const handleTabChange = (_event: SyntheticEvent, newValue: number) => {
@@ -85,7 +77,7 @@ export default function Home() {
           <Button
             variant="text"
             size="medium"
-            onClick={() => openInNewTab(legalNoticeContent.readmePath)}
+            onClick={() => openInNewTab(USER_GUIDE_URL)}
             endIcon={<ArrowForwardIcon />}
             sx={{
               p: 0,
@@ -102,7 +94,7 @@ export default function Home() {
       </Grid>
       <Grid item xs={6}>
         <Box>
-          <img src="images/sde.png" width={'100%'} />
+          <img src="images/sde.png" width={'100%'} alt="sde" />
         </Box>
       </Grid>
       <Grid item xs={12}>
@@ -112,28 +104,32 @@ export default function Home() {
         <Typography variant="body1" maxWidth={1000}>
           {t('content.home.selectUsecasesSubheader')}
         </Typography>
-        <FormControl component="fieldset" variant="standard">
-          <Stack direction="row" spacing={1} mt={3} sx={{ flexWrap: 'wrap', gap: 1 }}>
+        {useCases && (
+          <Grid container spacing={3} mt={0}>
             {useCases.map((item: IUseCase) => (
-              <Box className="usecase-tile" key={item.id}>
-                <input
-                  type="checkbox"
-                  name={item.title}
-                  value={item.id}
-                  id={item.id}
-                  onChange={handleUseCaseChange}
-                  checked={selectedUseCases.includes(item.id)}
+              <Grid item key={item.id}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={item.checked}
+                      onChange={() => handleUseCaseChange(item)}
+                      sx={{ '&.MuiCheckbox-root': { display: 'none' } }}
+                    />
+                  }
+                  label={
+                    <Box className="usecase-tile-content">
+                      {item.checked && (
+                        <CheckCircleIcon color="primary" sx={{ position: 'absolute', top: 15, right: 15 }} />
+                      )}
+                      <Avatar src={`images/${item.id}.png`} sx={{ width: 60, height: 60 }} />
+                      <Typography variant="subtitle1">{item.title}</Typography>
+                    </Box>
+                  }
                 />
-                <label className="usecase-tile-content" htmlFor={item.id}>
-                  <Stack className="usecase-tile-content-wrapper" spacing={2}>
-                    <Avatar src={`images/${item.id}.png`} sx={{ width: 60, height: 60 }} />
-                    <Typography variant="subtitle1">{item.title}</Typography>
-                  </Stack>
-                </label>
-              </Box>
+              </Grid>
             ))}
-          </Stack>
-        </FormControl>
+          </Grid>
+        )}
       </Grid>
       <Grid item xs={12} my={5}>
         <Typography variant="h4" mb={1}>
diff --git a/src/styles/home.scss b/src/styles/home.scss
index a79edde2..d8fb90d3 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2021,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -21,6 +21,9 @@
 .usecase-tile-content {
   background-color: #f3f3f3;
   display: flex;
+  flex-direction: column;
+  position: relative;
+  row-gap: 20px;
   width: 250px;
   height: 180px;
   border-radius: 16px;
@@ -33,22 +36,7 @@
     box-shadow: -1px 10px 30px 0px #aaa;
   }
 }
-.usecase-tile-content-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.usecase-tile {
-  & input[type='checkbox'] {
-    display: none;
-  }
-  & input[type='checkbox']:checked + .usecase-tile-content {
-    border: 3px solid #0f71cb;
-    & h6 {
-      color: #0f71cb;
-    }
-  }
-}
+
 .video-wrapper {
   display: inline-block;
   position: relative;