diff --git a/src/components/HomepageContribute/index.tsx b/src/components/HomepageContribute/index.tsx
index 7603b18be..d00746ef1 100644
--- a/src/components/HomepageContribute/index.tsx
+++ b/src/components/HomepageContribute/index.tsx
@@ -1,35 +1,27 @@
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function HomepageContribute(): JSX.Element {
-    return (
-      // <section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
-          <div className={clsx("row row--no-gutters", styles.item)}>
-            <div className={clsx("col col--12", styles.item__inner)}>
-              <div>
-                <h1 className="margin-bottom--md">Contribute</h1>
-                <p className="margin-bottom--md">
-                  Share with our vibrant community all that cool staff you've built with Open Telekom Cloud.
-                </p>
-                <a href="/docs/features/version-and-publish" className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }} >
-                  Join us on GitHub
-                </a>
-                {/* <a href="/docs/features/version-and-publish" className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }}>
-                  Join us on Medium
-                </a> */}
-              </div>
-            </div>
-            {/* <div
-              className="col col--6"
-              aria-hidden="true"
-              style={{
-                backgroundImage: "url('./img/factory-inside.svg')",
-                backgroundSize: "cover",
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "right",
-              }}
-            ></div> */}
-          </div>
-        // </section>
-    );
-  }
\ No newline at end of file
+
+  return (
+    // <section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
+    <div className={clsx("row row--no-gutters", styles.item)}>
+      <div className={clsx("col col--12", styles.item__inner)}>
+        <div>
+          <h1 className="margin-bottom--md">Contribute</h1>
+          <p className="margin-bottom--md">
+            Share with our vibrant community all that cool staff you've built with Open Telekom Cloud.
+          </p>
+          <a href={useBaseUrl("/docs/features/version-and-publish")} className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }} >
+            Join us on GitHub
+          </a>
+          <a href={useBaseUrl("/docs/features/version-and-publish")} className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }}>
+            Join us on Medium
+          </a>
+        </div>
+      </div>
+    </div>
+    // </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeaturedServices/index.tsx b/src/components/HomepageFeaturedServices/index.tsx
index d87da593e..3404ff6ec 100644
--- a/src/components/HomepageFeaturedServices/index.tsx
+++ b/src/components/HomepageFeaturedServices/index.tsx
@@ -2,46 +2,47 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 import FeaturedServices from '../ServiceCallouts/FeaturedServices';
 import NewServices from '../ServiceCallouts/NewServices';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function HomepageFeaturedServices(): JSX.Element {
-    return (
+  return (
     <section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
-        <div className={clsx("row row--no-gutters", styles.item)}>
-          <div className={clsx("col col--4", styles.item__inner)}>
-            <div>
-              <h1 className={clsx("margin-bottom--md", styles.item__title)}>
-                Explore our Featured Services
-              </h1>
-              <p className="margin-bottom--md">
-                Check out our collection of technical solutions, best practices and cool tips for the most popular services of Open Telekom Cloud.
-              </p>
-              <a className="button button--secondary" href="/docs/best-practices">
-                Explore our Best Practices
-              </a>
-            </div>
+      <div className={clsx("row row--no-gutters", styles.item)}>
+        <div className={clsx("col col--4", styles.item__inner)}>
+          <div>
+            <h1 className={clsx("margin-bottom--md", styles.item__title)}>
+              Explore our Featured Services
+            </h1>
+            <p className="margin-bottom--md">
+              Check out our collection of technical solutions, best practices and cool tips for the most popular services of Open Telekom Cloud.
+            </p>
+            <a className="button button--secondary" href={useBaseUrl("/docs/best-practices")}>
+              Explore our Best Practices
+            </a>
           </div>
-          <div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
-            <FeaturedServices />
-          </div>
-          {/* <scale-divider></scale-divider> */}
-          <div className={clsx("col col--4", styles.item__inner)}>
-            <div>
-              <h1 className={clsx("margin-bottom--md", styles.item__title)}>
-                What's new?
-              </h1>
-              <p className="margin-bottom--md">
-                Explore the technical documentation of our brand new services in Help Center.
-              </p>
-              <a className="button button--secondary" href="https://www.open-telekom-cloud.com/en/products-services/roadmap" target="_blank">
-                Check the Portfolio Roadmap
-              </a>
-            </div>
-          </div>
-          <div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
-            <NewServices />
+        </div>
+        <div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
+          <FeaturedServices />
+        </div>
+        {/* <scale-divider></scale-divider> */}
+        <div className={clsx("col col--4", styles.item__inner)}>
+          <div>
+            <h1 className={clsx("margin-bottom--md", styles.item__title)}>
+              What's new?
+            </h1>
+            <p className="margin-bottom--md">
+              Explore the technical documentation of our brand new services in Help Center.
+            </p>
+            <a className="button button--secondary" href="https://www.open-telekom-cloud.com/en/products-services/roadmap" target="_blank">
+              Check the Portfolio Roadmap
+            </a>
           </div>
-          
         </div>
-    </section>
-    );
-  }
\ No newline at end of file
+        <div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
+          <NewServices />
+        </div>
+
+      </div>
+    </section >
+  );
+}
\ No newline at end of file
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index b3f16504d..492d6b81a 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import BestPracticesSvg from '@site/static/img/best-practices.svg';
 import BlueprintsSvg from '@site/static/img/blueprints.svg';
@@ -33,7 +34,7 @@ const FeatureList: FeatureItem[] = [
       <>
         Discover tailored out-of-the-box solutions and
         practical implementations for a range of scenarios. Explore real-world examples demonstrating the versatility and optimal
-        application and infrastructure design using Open Telekom Cloud. 
+        application and infrastructure design using Open Telekom Cloud.
       </>
     ),
     link: '/docs/blueprints'
@@ -51,10 +52,10 @@ const FeatureList: FeatureItem[] = [
   // },
 ];
 
-function Feature({title, Svg, description, link}: FeatureItem) {
+function Feature({ title, Svg, description, link }: FeatureItem) {
   return (
     <div className={clsx('col col--6')}>
-        <scale-card to={link} class="scale-telekom-feature-card">
+        <scale-card to={useBaseUrl(link)} class="scale-telekom-feature-card">
           <div style={{margin: '-24px'}}>
             <div className="text--center">
               <Svg className={styles.featureSvg} role="img" />
@@ -68,9 +69,9 @@ function Feature({title, Svg, description, link}: FeatureItem) {
               {/* <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>
+      </scale-card>
     </div>
     );
 }
diff --git a/src/components/HomepageNewServices/index.tsx b/src/components/HomepageNewServices/index.tsx
index 4b62c673b..54be2af58 100644
--- a/src/components/HomepageNewServices/index.tsx
+++ b/src/components/HomepageNewServices/index.tsx
@@ -1,28 +1,29 @@
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import NewServices from '../ServiceCallouts/NewServices';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function HomepageNewServices(): JSX.Element {
-    return (
+  return (
     <section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
-        <div className={clsx("row row--no-gutters", styles.item)}>
-          <div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
-            <NewServices />
-          </div>
-          <div className={clsx("col col--4", styles.item__inner)}>
-            <div>
-              <h1 className={clsx("margin-bottom--md", styles.item__title)}>
-                Meet the New Comers
-              </h1>
-              <p className="margin-bottom--md">
-                Explore the new services added in Open Telekom Cloud portfolio.
-              </p>
-              <a className="button button--secondary" href="/docs/best-practices">
-                Check the Roadmap Portfolio
-              </a>
-            </div>
+      <div className={clsx("row row--no-gutters", styles.item)}>
+        <div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
+          <NewServices />
+        </div>
+        <div className={clsx("col col--4", styles.item__inner)}>
+          <div>
+            <h1 className={clsx("margin-bottom--md", styles.item__title)}>
+              Meet the New Comers
+            </h1>
+            <p className="margin-bottom--md">
+              Explore the new services added in Open Telekom Cloud portfolio.
+            </p>
+            <a className="button button--secondary" href={useBaseUrl("/docs/best-practices")}>
+              Check the Roadmap Portfolio
+            </a>
           </div>
         </div>
-      </section>
-    );
-  }
\ No newline at end of file
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ServiceCallouts/callout.tsx b/src/components/ServiceCallouts/callout.tsx
index c11974754..12ec7b56c 100644
--- a/src/components/ServiceCallouts/callout.tsx
+++ b/src/components/ServiceCallouts/callout.tsx
@@ -1,18 +1,20 @@
 import clsx from "clsx";
 import styles from "./styles.modules.css";
 import { ComponentType, SVGProps } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 
 export interface Callout {
   title: string;
   text?: string;
   link: string;
+
   // icon: (props: React.ComponentProps<"svg">) => JSX.Element;
   icon: ComponentType<SVGProps<SVGSVGElement>>;
 }
-
 function Callout(props: Callout): JSX.Element {
   return (
-    <a href={props.link} className={styles.callout__link}>
+    <a href={useBaseUrl(props.link)} className={styles.callout__link}>
       <div className={clsx("card", styles.callout, styles.callout__shadow)} style={{marginBottom: '30px'}}>
         <div className="card__header">
           <h3 style={{ fontWeight: 'bold', fontSize: 'medium', alignItems: 'center', display: 'flex', marginBottom: '0'}}>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a91563724..20f410720 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,6 +4,7 @@ import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 // import Heading from '@theme/Heading';
 // import { useThemeConfig } from '@docusaurus/theme-common';
+// import useBaseUrl from '@docusaurus/useBaseUrl';
 
 // import styles from './index.module.css';
 import HomepageFeaturedServices from '../components/HomepageFeaturedServices';
@@ -22,7 +23,7 @@ import HomepageContribute from '../components/HomepageContribute';
 //         </Heading>
 //         <p className="hero__subtitle">Open Telekom Cloud {siteConfig.tagline}</p>
 //         <div className={styles.buttons}>
-//           <scale-button href="/docs/blueprints" variant={buttonVariant}>
+//           <scale-button href={useBaseUrl("/docs/blueprints")} variant={buttonVariant}>
 //             Get Started <scale-icon-navigation-right></scale-icon-navigation-right>
 //           </scale-button>
 //         </div>