diff --git a/components/bff/code/Code.js b/components/bff/code/Code.js
index a6f0a03947e..3bb17d5f7a1 100644
--- a/components/bff/code/Code.js
+++ b/components/bff/code/Code.js
@@ -49,7 +49,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-support' className='section'>
+                                <h2 id='simplify-back-end-development-with-native-rest-features' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -57,7 +57,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-support')}
+                                        onClick={(e) => props.getLink(e.target, 'simplify-back-end-development-with-native-rest-features')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -115,7 +115,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-business-apps' className='section'>
+                                <h2 id='streamline-back-end-data-handling' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -123,7 +123,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-business-apps')}
+                                        onClick={(e) => props.getLink(e.target, 'streamline-back-end-data-handling')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -180,7 +180,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-business-apps' className='section'>
+                                <h2 id='validate-payload-constraints-in-web-back-ends' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -188,7 +188,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-business-apps')}
+                                        onClick={(e) => props.getLink(e.target, 'validate-payload-constraints-in-web-back-ends')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -245,7 +245,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-transform' className='section'>
+                                <h2 id='efficiently-expose-complex-data-with-graphql' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -253,7 +253,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-transform')}
+                                        onClick={(e) => props.getLink(e.target, 'efficiently-expose-complex-data-with-graphql')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -311,7 +311,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='powerful-data-mapping' className='section'>
+                                <h2 id='expose-real-time-data-to-front-ends-via-websockets' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -319,7 +319,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'powerful-data-mapping')}
+                                        onClick={(e) => props.getLink(e.target, 'expose-real-time-data-to-front-ends-via-websockets')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -377,7 +377,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='ballerina-is-serverAuth' className='section'>
+                                <h2 id='simplify-user-authentications-and-authorizations' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -385,7 +385,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'ballerina-is-serverAuth')}
+                                        onClick={(e) => props.getLink(e.target, 'simplify-user-authentications-and-authorizations')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -443,7 +443,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='security' className='section'>
+                                <h2 id='comprehensive-security-for-web-back-ends' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -451,7 +451,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'security')}
+                                        onClick={(e) => props.getLink(e.target, 'comprehensive-security-for-web-back-ends')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -508,7 +508,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='custom-rest' className='section'>
+                                <h2 id='securely-interact-with-internal-external-services' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -516,7 +516,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'custom-rest')}
+                                        onClick={(e) => props.getLink(e.target, 'securely-interact-with-internal-external-services')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -573,7 +573,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='apis-are-new-dll' className='section'>
+                                <h2 id='automate-data-access-with-ballerina' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -581,7 +581,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'apis-are-new-dll')}
+                                        onClick={(e) => props.getLink(e.target, 'automate-data-access-with-ballerina')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -635,7 +635,7 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='apis-are-new-dll' className='section'>
+                                <h2 id='develop-flexible-scalable-back-ends' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
@@ -643,7 +643,7 @@ export default function UseCases(props) {
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'apis-are-new-dll')}
+                                        onClick={(e) => props.getLink(e.target, 'develop-flexible-scalable-back-ends')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
diff --git a/components/bff/code/bff-bbe/client-auth.md b/components/bff/code/bff-bbe/client-auth.md
index bf6af66f628..bee10c74983 100644
--- a/components/bff/code/bff-bbe/client-auth.md
+++ b/components/bff/code/bff-bbe/client-auth.md
@@ -1,7 +1,7 @@
 ---
 title: 'Securely interact with internal/external services'
 description: Ballerina back-ends can securely call services with the necessary security features such as client-side OAuth2, mutual TLS, and JWT-encapsulated user data.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/microservices'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/securely_consume_services_from_backends'
 ---
 ```
 service /logistics on new http:Listener(9090) {
diff --git a/components/bff/code/bff-bbe/constraint-validation.md b/components/bff/code/bff-bbe/constraint-validation.md
index 9f9383b3ff1..c05f637b881 100644
--- a/components/bff/code/bff-bbe/constraint-validation.md
+++ b/components/bff/code/bff-bbe/constraint-validation.md
@@ -1,7 +1,7 @@
 ---
 title: 'Validate payload constraints in web back-ends'
 description: Ballerina's inherent JSON capabilities enable the direct mapping of JSON data into Ballerina records, incorporating functionalities such as constraint validations.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/constraint_validation'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/validate_payloads_constraints_in_web_backends'
 ---
 ```
 type Order record {|
diff --git a/components/bff/code/bff-bbe/graphql.md b/components/bff/code/bff-bbe/graphql.md
index d8f6a8c8f7e..83e4b0c9c9a 100644
--- a/components/bff/code/bff-bbe/graphql.md
+++ b/components/bff/code/bff-bbe/graphql.md
@@ -1,7 +1,7 @@
 ---
 title: 'Efficiently expose complex data with GraphQL'
 description: With Ballerina's built-in GraphQL functionality, developers can simply expose Ballerina records via GraphQL services, facilitating querying and selectively fetching complex data structures.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/graphql'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/expose_complex_data_with_graphql'
 ---
 ```
 type Order record {|
diff --git a/components/bff/code/bff-bbe/json-support.md b/components/bff/code/bff-bbe/json-support.md
index 51226d0efdb..9038a72359a 100644
--- a/components/bff/code/bff-bbe/json-support.md
+++ b/components/bff/code/bff-bbe/json-support.md
@@ -1,7 +1,7 @@
 ---
 title: 'Streamline back-end data handling'
 description: Ballerina has built-in support for multi-part payloads, constraint validations, transformations, and, enrichments for working with complex payloads.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/payload_support'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/handle-mulipart-form-data'
 ---
 ```
 service /crm on new http:Listener(9090) {
diff --git a/components/bff/code/bff-bbe/persist.md b/components/bff/code/bff-bbe/persist.md
index e53ae07af81..e957e0b82d9 100644
--- a/components/bff/code/bff-bbe/persist.md
+++ b/components/bff/code/bff-bbe/persist.md
@@ -1,7 +1,7 @@
 ---
 title: 'Automate data access with Ballerina'
 description: Ballerina's persistence features offer a straightforward way to create a data access layer for any complex application by providing a simplified interface for CRUD operations.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/persists'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/persistently-store-data-using-Ballerina'
 ---
 ```
 Client dbClient = check new ();
diff --git a/components/bff/code/bff-bbe/rest-support.md b/components/bff/code/bff-bbe/rest-support.md
index 349a3ddcd48..f3102935016 100644
--- a/components/bff/code/bff-bbe/rest-support.md
+++ b/components/bff/code/bff-bbe/rest-support.md
@@ -1,7 +1,7 @@
 ---
 title: 'Simplify back-end development with native REST features'
 description: Ballerina provides REST features like path/query parameters, HTTP headers, status codes, and complex JSON structures as first-class citizens within the language itself.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/rest'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/restful-order-service'
 ---
 ```
 service /sales on new http:Listener(9090) {
diff --git a/components/bff/code/bff-bbe/security.md b/components/bff/code/bff-bbe/security.md
index 446f84cd7a2..142a771ea80 100644
--- a/components/bff/code/bff-bbe/security.md
+++ b/components/bff/code/bff-bbe/security.md
@@ -1,7 +1,7 @@
 ---
 title: "Comprehensive security for web back-ends"
 description: Ballerina-based back-ends can simplify securing sensitive data during transit, validating server identity, managing CORS, and enforcing message type restrictions via annotations.
-url: 'hhttps://github.com/SasinduDilshara/BFF-Samples/tree/dev/comprehensive_security'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/comprehensive-security-for-web-backends'
 ---
 ```
 @http:ServiceConfig {
diff --git a/components/bff/code/bff-bbe/server-auth.md b/components/bff/code/bff-bbe/server-auth.md
index 33a06388a21..8efa058717d 100644
--- a/components/bff/code/bff-bbe/server-auth.md
+++ b/components/bff/code/bff-bbe/server-auth.md
@@ -1,7 +1,7 @@
 ---
 title: 'Simplify user authentications and authorizations'
 description: Ballerina apps can be seamlessly integrated with any OAuth2-compatible identity provider using a simple set of annotations. 
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/rest_with_asgardeo'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/connect_with_asgardeo_for_building_secure_services'
 ---
 ```
 @http:ServiceConfig {
diff --git a/components/bff/code/bff-bbe/websockets.md b/components/bff/code/bff-bbe/websockets.md
index de4a3b9b0b6..0f86f4337e4 100644
--- a/components/bff/code/bff-bbe/websockets.md
+++ b/components/bff/code/bff-bbe/websockets.md
@@ -1,7 +1,7 @@
 ---
 title: 'Expose real-time data to front-ends via webSockets'
 description: Ballerina allows real-time data to be streamed just by implementing a service. This comes with enterprise-ready security features like TLS, mutual TLS, and OAuth2.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/websocket'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/exposing-realtime-data-using-websockets'
 ---
 ```
 service /logistics on new websocket:Listener(9091) {
diff --git a/pages/usecases/bff/index.js b/pages/usecases/bff/index.js
index da7d87e672f..0628e8ef22f 100644
--- a/pages/usecases/bff/index.js
+++ b/pages/usecases/bff/index.js
@@ -104,11 +104,11 @@ export default function Integrations({ samples }) {
           content="ballerina, learn, documentation, docs, programming language"
         />
         <link rel="shortcut icon" href="/img/favicon.ico" />
-        <title>Ballerina for implementing backends for modern front-ends</title>
+        <title>Ballerina for implementing backends for modern front-ends - The Ballerina programming language</title>
 
         {/* FB */}
         <meta property="og:type" content="article" />
-        <meta property="og:title" content="Ballerina - Ballerina for B2B integrations" />
+        <meta property="og:title" content="Ballerina for BFF - The Ballerina programming language" />
         <meta
           property="og:description"
           content="Write code with bff-friendly abstractions."
@@ -116,14 +116,14 @@ export default function Integrations({ samples }) {
         <meta
           property="og:image"
           itemProp="image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
         />
 
         {/* LINKED IN */}
-        <meta property="og:title" content="Ballerina - Ballerina for B2B integrations" />
+        <meta property="og:title" content="Ballerina for BFF - The Ballerina programming language" />
         <meta
           property="og:image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
         />
         <meta
           property="og:description"
@@ -135,7 +135,7 @@ export default function Integrations({ samples }) {
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:site" content="@ballerinalang" />
         <meta name="twitter:creator" content="@ballerinalang" />
-        <meta name="twitter:title" content="Ballerina for B2B integrations" />
+        <meta name="twitter:title" content="Ballerina for BFF - The Ballerina programming language" />
         <meta name="twitter:card" content="summary_large_image" />
         <meta
           property="twitter:description"
@@ -143,7 +143,7 @@ export default function Integrations({ samples }) {
         />
         <meta
           name="twitter:image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
         />
         <meta
           property="twitter:text:description"
@@ -151,7 +151,7 @@ export default function Integrations({ samples }) {
         />
         <meta
           property="twitter:image"
-          content="https://ballerina.io/images/edi-intro.png"
+          content="https://ballerina.io/images/ballerina-generic-social-media-image-2023.png"
         />
       </Head>
 
diff --git a/public/images/bff-intro.png b/public/images/bff-intro.png
index 92a20b11e34..a718babe113 100644
Binary files a/public/images/bff-intro.png and b/public/images/bff-intro.png differ