diff --git a/docs/_snippets/images/openapi1.png b/docs/_snippets/images/openapi1.png
deleted file mode 100644
index 2009f085cc7..00000000000
Binary files a/docs/_snippets/images/openapi1.png and /dev/null differ
diff --git a/docs/cloud/manage/openapi.md b/docs/cloud/manage/openapi.md
index 7ad4606e4d2..b4b134d2168 100644
--- a/docs/cloud/manage/openapi.md
+++ b/docs/cloud/manage/openapi.md
@@ -4,32 +4,39 @@ slug: /cloud/manage/openapi
title: Managing API Keys
---
-ClickHouse Cloud provides an API utilizing OpenAPI that allows you to programmatically manage your account and aspects of your services.
+import image_01 from '@site/static/images/cloud/manage/openapi1.png';
+import image_02 from '@site/static/images/cloud/manage/openapi2.png';
+import image_03 from '@site/static/images/cloud/manage/openapi3.png';
+import image_04 from '@site/static/images/cloud/manage/openapi4.png';
+import image_05 from '@site/static/images/cloud/manage/openapi5.png';
# Managing API Keys
+ClickHouse Cloud provides an API utilizing OpenAPI that allows you to programmatically manage your account and aspects of your services.
+
:::note
This document covers the ClickHouse Cloud API. For database API endpoints, please see [Cloud Endpoints API](//cloud/get-started/query-endpoints.md)
:::
1. You can use the **API Keys** tab on the left menu to create and manage your API keys.
- 
+ 
2. The **API Keys** page will initially display a prompt to create your first API key as shown below. After your first key is created, you can create new keys using the `New API Key` button that appears in the top right corner.
- 
+ 
3. To create an API key, specify the key name, permissions for the key, and expiration time, then click `Generate API Key`.
+
:::note
Permissions align with ClickHouse Cloud [predefined roles](/cloud/security/cloud-access-management#predefined-roles). The developer role has read-only permissions and the admin role has full read and write permissions.
:::
- 
-
+ 
+
4. The next screen will display your Key ID and Key secret. Copy these values and put them somewhere safe, such as a vault. The values will not be displayed after you leave this screen.
- 
+ 
5. The ClickHouse Cloud API uses [HTTP Basic Authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication) to verify the validity of your API keys. Here is an example of how to use your API keys to send requests to the ClickHouse Cloud API using `curl`:
@@ -41,12 +48,12 @@ $ curl --user $KEY_ID:$KEY_SECRET https://api.clickhouse.cloud/v1/organizations
```
6. Returning to the **API Keys** page, you will see the key name, last four characters of the Key ID, permissions, status, expiration date, and creator. You are able to edit the key name, permissions, and expiration from this screen. Keys may also be disabled or deleted form this screen.
-
+
:::note
Deleting an API key is a permanent action. Any services using the key will immediately lose access to ClickHouse Cloud.
:::
- 
+ 
## Endpoints {#endpoints}
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 0f7807f0020..ba2f09cf366 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -475,18 +475,6 @@ prism-code {
}
/* Add a drop shadow to images in the user guides and docs */
-img {
- width: 100%;
- max-width: 1000px;
- /* padding looks bad in dark mode as it adds white space around images that have dark backgrounds */
- /*padding-bottom: 0.2rem;
- padding-top: 0.5rem;*/
- display: block;
- margin-left: auto;
- margin-right: auto;
- background: var(--clickhouse-img-background-color);
- box-shadow: 0px 1px 8px -1px rgba(21, 21, 21, 0.20);
-}
.eighty-percent {
max-width: 80%;
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
index 0f2976815c3..7caa98cdd0f 100644
--- a/src/theme/DocItem/Layout/styles.module.css
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -5,11 +5,25 @@
}
.docItemContainer {
+ max-width: 1000px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding-bottom: 3.5rem;
+
+ img {
+ /* padding looks bad in dark mode as it adds white space around images that have dark backgrounds */
+ /*padding-bottom: 0.2rem;
+ padding-top: 0.5rem;*/
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ background: var(--clickhouse-img-background-color);
+ box-shadow: 0px 1px 8px -1px rgba(21, 21, 21, 0.20);
+ }
}
.docHeaderContainer {
diff --git a/static/images/cloud/manage/openapi1.png b/static/images/cloud/manage/openapi1.png
new file mode 100644
index 00000000000..ab1a8ad7c7d
Binary files /dev/null and b/static/images/cloud/manage/openapi1.png differ
diff --git a/docs/_snippets/images/openapi2.png b/static/images/cloud/manage/openapi2.png
similarity index 100%
rename from docs/_snippets/images/openapi2.png
rename to static/images/cloud/manage/openapi2.png
diff --git a/docs/_snippets/images/openapi3.png b/static/images/cloud/manage/openapi3.png
similarity index 100%
rename from docs/_snippets/images/openapi3.png
rename to static/images/cloud/manage/openapi3.png
diff --git a/docs/_snippets/images/openapi4.png b/static/images/cloud/manage/openapi4.png
similarity index 100%
rename from docs/_snippets/images/openapi4.png
rename to static/images/cloud/manage/openapi4.png
diff --git a/docs/_snippets/images/openapi5.png b/static/images/cloud/manage/openapi5.png
similarity index 100%
rename from docs/_snippets/images/openapi5.png
rename to static/images/cloud/manage/openapi5.png