diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index ef042d0a3..b3f16504d 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -2,6 +2,10 @@ import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
+import BestPracticesSvg from '@site/static/img/best-practices.svg';
+import BlueprintsSvg from '@site/static/img/blueprints.svg';
+// import CafSvg from '@site/static/img/caf.svg';
+
 type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
@@ -12,7 +16,7 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
     title: 'Best Practices',
-    Svg: require('@site/static/img/best-practices.svg').default,
+    Svg: BestPracticesSvg,
     description: (
       <>
         Explore the recommended strategies for resource management, such as
@@ -24,7 +28,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Blueprints',
-    Svg: require('@site/static/img/blueprints.svg').default,
+    Svg: BlueprintsSvg,
     description: (
       <>
         Discover tailored out-of-the-box solutions and
@@ -36,7 +40,7 @@ const FeatureList: FeatureItem[] = [
   },
   // {
   //   title: 'Cloud Adoption Framework',
-  //   Svg: require('@site/static/img/caf.svg').default,
+  //   Svg: CafSvg,
   //   description: (
   //     <>
   //       The Cloud Adoption Framework provides a structured approach for organizations to transition their business to 
@@ -47,51 +51,9 @@ const FeatureList: FeatureItem[] = [
   // },
 ];
 
-// function Feature({title, Svg, description, link}: FeatureItem) {
-//   return (
-//     <div className={clsx('col col--4')}>
-//         <scale-card to={link} class="scale-telekom-feature-card">
-//           <div style={{margin: '-24px'}}>
-//             <div className="text--center">
-//               <Svg className={styles.featureSvg} role="img" />
-//             </div>
-//             <div className="text--center padding-horiz--md" style={{margin: '0 0 16px 0'}}> 
-//               {/* <h4 style={{margin: '0px 0 16px 0', font: 'var(--telekom-text-style-heading-4)'}}>{title} </h4> */}
-//               <Heading as="h3" style={{margin: '8px'}}>{title}</Heading>
-//               <span>
-//                 {description}              
-//               </span>
-//               {/* <scale-button style={{margin: '16px'}} icon-position="after">
-//                 Get Started <scale-icon-navigation-right></scale-icon-navigation-right>
-//               </scale-button>  */}
-//             </div>
-//           </div>
-//         </scale-card>
-//     </div>
-//     );
-// }
-
-// export default function HomepageFeatures(): JSX.Element {
-//   return (
-//     <section className={styles.features}>
-//       <div className="container">
-//         <div className="row">
-//           <div className={clsx('col col--2')}></div>
-//           {FeatureList.map((props, idx) => (
-//             <Feature key={idx} {...props} />
-//           ))}
-//           <div className={clsx('col col--2')}></div>
-//         </div>
-//       </div>
-//     </section>
-//   );
-// }
-
-
-
 function Feature({title, Svg, description, link}: FeatureItem) {
   return (
-    <div className={clsx('col col--5')}>
+    <div className={clsx('col col--6')}>
         <scale-card to={link} class="scale-telekom-feature-card">
           <div style={{margin: '-24px'}}>
             <div className="text--center">
@@ -118,11 +80,9 @@ export default function HomepageFeatures(): JSX.Element {
     <section className={styles.features}>
       <div className="container">
         <div className="row">
-          <div className={clsx('col col--1')}></div>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}
-          <div className={clsx('col col--1')}></div>
         </div>
       </div>
     </section>