diff --git a/docs/build/apps/example-application-tutorial/anchor-integration/sep10.mdx b/docs/build/apps/example-application-tutorial/anchor-integration/sep10.mdx
index ebe458603a..35c628cb00 100644
--- a/docs/build/apps/example-application-tutorial/anchor-integration/sep10.mdx
+++ b/docs/build/apps/example-application-tutorial/anchor-integration/sep10.mdx
@@ -3,8 +3,6 @@ title: "SEP-10: Stellar Web Authentication"
 sidebar_position: 20
 ---
 
-import auth_valid from "/assets/basic-pay/auth_valid.png";
-
 Similar to the SEP-1 information, both SEP-6 and SEP-24 protocols make use of SEP-10 for authentication with the user. The user must prove they own the account before they can withdraw or deposit any assets as part of SEP-10: Stellar Web Authentication.
 
 Since we have the `stellar.toml` file information already, we can use that to display some interactive elements to the user.
@@ -318,4 +316,8 @@ export const webAuthStore = createWebAuthStore();
 
 Now that we have successfully authenticated our user with an asset anchor, we can display and process the various transfer capabilities of the anchor in question. We'll begin with SEP-6, since that will lay the groundwork for SEP-24 to follow.
 
-<img src={auth_valid} width="70%" />
+<img
+  src="/assets/basic-pay/auth_valid.png"
+  width="70%"
+  alt="SEP-10 authenticated state"
+/>
diff --git a/docs/build/apps/example-application-tutorial/anchor-integration/sep24.mdx b/docs/build/apps/example-application-tutorial/anchor-integration/sep24.mdx
index cfc84aff3f..b5a261eab6 100644
--- a/docs/build/apps/example-application-tutorial/anchor-integration/sep24.mdx
+++ b/docs/build/apps/example-application-tutorial/anchor-integration/sep24.mdx
@@ -3,8 +3,6 @@ title: "SEP-24: Hosted Deposit and Withdrawal"
 sidebar_position: 40
 ---
 
-import sep24_transfers from "/assets/basic-pay/sep24_transfers.png";
-
 SEP-24 provides a standard way for wallets and anchors to interact by having the user open a webview hosted by an anchor to collect and handle KYC information. In this integration, a user's KYC information is gathered and handled entirely by the anchor. For the most part, after the anchor's webview has opened, BasicPay will have little knowledge about what's going on.
 
 :::info
@@ -31,7 +29,11 @@ export async function getTransferServerSep24(domain) {
 
 Our application will request the `/info` endpoint from the anchor's transfer server to understand the supported transfer methods (deposit, withdraw) and available endpoints, as well as additional features that may be available during transfers.
 
-<img src={sep24_transfers} width="70%" />
+<img
+  src="/assets/basic-pay/sep24_transfers.png"
+  width="70%"
+  alt="SEP-24 Transfers"
+/>
 
 ```js title=/src/lib/stellar/sep24.js
 // Fetches and returns basic information about what the SEP-24 transfer server supports.
diff --git a/docs/data/analytics/hubble/analyst-guide/creating-visualizations.mdx b/docs/data/analytics/hubble/analyst-guide/creating-visualizations.mdx
index c043e10740..a50046ffb9 100644
--- a/docs/data/analytics/hubble/analyst-guide/creating-visualizations.mdx
+++ b/docs/data/analytics/hubble/analyst-guide/creating-visualizations.mdx
@@ -3,31 +3,11 @@ title: "Creating Visualizations"
 sidebar_position: 40
 ---
 
-import hubble_visualization_demo from "/img/hubble/hubble_visualizatoin_demo.gif";
-import create_data_source from "/img/hubble/create-data-source.png";
-import bq_connector from "/img/hubble/bq-connector.png";
-import add_contract_data from "/img/hubble/add-contract-data.png";
-import create_report from "/img/hubble/create-report.png";
-import select_data_sources from "/img/hubble/select-data-sources.png";
-import add_pie_chart from "/img/hubble/add-pie-chart.png";
-import pie_contract_data from "/img/hubble/pie-contract-data.png";
-import pie_config from "/img/hubble/pie-config.png";
-import pie_chart_durability from "/img/hubble/pie_chart_durability.png";
-import click_add_data from "/img/hubble/click_add_data.png";
-import add_custom_query from "/img/hubble/add-custom-query.png";
-import add_column_chart from "/img/hubble/add-column-chart.png";
-import column_chart_config from "/img/hubble/column-chart-config.png";
-import expired_entry_column_chart from "/img/hubble/expired-entry-column-chart.png";
-import add_quick_filter from "/img/hubble/add-quick-filter.png";
-import filter_contract from "/img/hubble/filter-contract.png";
-import persistent_only from "/img/hubble/persistent-only.png";
-import filtered_report from "/img/hubble/filtered-report.png";
-
 This page will show how you can create visualizations with Hubble and [Google Looker Studio](https://cloud.google.com/looker-studio?hl=en).
 
 By the end of the tutorial you will have created two graphs that will help visualize temporary VS persistent contract data entry distribution and expiration.
 
-<img src={hubble_visualization_demo} width="1000" />
+<img src="/img/hubble/hubble_visualization_demo.gif" width="1000" alt="Demo" />
 
 As you can see, persistent contract data entries account for roughly 25% of all contract data entries with the rest being temporary. There are also a lot more expired temporary contract data entries. This is expected because temporay entries cannot be bumped whereas persistent entries can be bumped/restored. For more information, you can read about [State Archival and the Contract Data Lifecycle](../../../../learn/fundamentals/contract-development/storage/state-archival.mdx#contract-data-type-descriptions).
 
@@ -43,52 +23,52 @@ As you can see, persistent contract data entries account for roughly 25% of all
 
 1. Select `Create --> Data source`
 
-<img src={create_data_source} width="200" />
+<img src="/img/hubble/create-data-source.png" width="200" alt="New Source" />
 
 2. Find and select the `BigQuery Google Connector`
 
-<img src={bq_connector} width="300" />
+<img src="/img/hubble/bq-connector.png" width="300" alt="Add BigQuery" />
 
 3. Find the desired tables that you want to connect. For this example you will want to add a data source for:
    1. `crypto-stellar.crypto_stellar.contract_data`
 
-<img src={add_contract_data} width="600" />
+<img src="/img/hubble/add-contract-data.png" width="600" alt="Contract Data" />
 
 ### Create a New Report (Dashboard)
 
 1. Select `Create --> Report`
 
-<img src={create_report} width="200" />
+<img src="/img/hubble/create-report.png" width="200" alt="Create Report" />
 
 2. Add your data sources from above
 
-<img src={select_data_sources} width="300" />
+<img src="/img/hubble/select-data-sources.png" width="300" alt="Get Data" />
 
 3. Insert a `Pie chart`
 
-<img src={add_pie_chart} width="200" />
+<img src="/img/hubble/add-pie-chart.png" width="200" alt="Add A Pie Chart" />
 
 4. Choose `contract_data` as the `Data source`
 
-<img src={pie_contract_data} width="300" />
+<img src="/img/hubble/pie-contract-data.png" width="300" alt="New Source" />
 
 5. Choose `closed_at` as the `Date Range Dimension` and `contract_durability` as the `Dimension`
 
-<img src={pie_config} width="300" />
+<img src="/img/hubble/pie-config.png" width="300" alt="Add Pie Chart" />
 
 6. You should now have a pie chart showing the percentage of Temporary VS Persistent Contract Data Durability
 
-<img src={pie_chart_durability} width="500" />
+<img src="/img/hubble/pie_chart_durability.png" width="500" alt="Results" />
 
 ### Use Custom SQL to Create a Chart
 
 1. In your report, click `Add Data` which will be near the bottom right of your window
 
-<img src={click_add_data} width="500" />
+<img src="/img/hubble/click_add_data.png" width="500" alt="Click Button" />
 
 2. Select `BigQuery` and choose `CUSTOM QUERY` and select your desired `Billing Project` where the query will be charged
 
-<img src={add_custom_query} width="500" />
+<img src="/img/hubble/add-custom-query.png" width="500" alt="Custom Query" />
 
 3. Add the following query and click `Add`
 
@@ -132,7 +112,7 @@ order by 1 desc, 2
 
 4. Insert `Column chart`
 
-<img src={add_column_chart} width="200" />
+<img src="/img/hubble/add-column-chart.png" width="200" alt="Column Chart" />
 
 5. Select the following:
 
@@ -141,26 +121,26 @@ order by 1 desc, 2
 - `contract_durability` as the `Breakdown Dimension`
 - `expired_entry_count` as the `Metric`
 
-<img src={column_chart_config} width="300" />
+<img src="/img/hubble/column-chart-config.png" width="300" alt="Configure" />
 
 6. You should now have a column chart (bar chart) showing the expired Soroban contract entries
 
-<img src={expired_entry_column_chart} width="500" />
+<img src="/img/hubble/expired-entry-column-chart.png" width="500" alt="Chart" />
 
 ### Applying a Global Filter
 
 1. Click `+Add quick filter` to apply a filter throughout the whole report
 
-<img src={add_quick_filter} width="500" />
+<img src="/img/hubble/add-quick-filter.png" width="300" alt="Quick Filter" />
 
 2. Select `contract_durability` to filter by `contract_durability` values
 
-<img src={filter_contract} width="500" />
+<img src="/img/hubble/filter-contract.png" width="500" alt="Durability" />
 
 3. Select only `ContractDataDurabilityPersistent` and click `Apply`
 
-<img src={persistent_only} width="500" />
+<img src="/img/hubble/persistent-only.png" width="500" alt="Persistent" />
 
 4. Your charts should now be filtered and show only `ContractDataDurabilityPersistent` data
 
-<img src={filtered_report} width="500" />
+<img src="/img/hubble/filtered-report.png" width="500" alt="Clean Report" />
diff --git a/static/img/hubble/hubble_visualizatoin_demo.gif b/static/img/hubble/hubble_visualization_demo.gif
similarity index 100%
rename from static/img/hubble/hubble_visualizatoin_demo.gif
rename to static/img/hubble/hubble_visualization_demo.gif