diff --git a/grafana-plugin/src/models/cloud/cloud.ts b/grafana-plugin/src/models/cloud/cloud.ts
index d5c40049..f8e09e71 100644
--- a/grafana-plugin/src/models/cloud/cloud.ts
+++ b/grafana-plugin/src/models/cloud/cloud.ts
@@ -56,4 +56,22 @@ export class CloudStore extends BaseStore {
         this.searchResult.results.map((cloud_user_id: Cloud['id']) => this.items?.[cloud_user_id]),
     };
   }
+
+  async syncCloudUsers() {
+    return await makeRequest(`${this.path}sync_with_cloud`, { method: 'POST' });
+  }
+
+  async getCloudConnectionStatus() {
+    return await makeRequest(`/cloud_connection/`, { method: 'GET' });
+  }
+
+  @action
+  async connectToCloud(token: string) {
+    return await makeRequest(`/live_settings/`, { method: 'PUT', params: { token } });
+  }
+
+  @action
+  async disconnectToCloud() {
+    return await makeRequest(`/live_settings/`, { method: 'DELETE' });
+  }
 }
diff --git a/grafana-plugin/src/pages/cloud/CloudPage.module.css b/grafana-plugin/src/pages/cloud/CloudPage.module.css
index 387b4c57..9597b6ab 100644
--- a/grafana-plugin/src/pages/cloud/CloudPage.module.css
+++ b/grafana-plugin/src/pages/cloud/CloudPage.module.css
@@ -19,6 +19,10 @@
   width: 100%;
 }
 
+.cloud-page-title {
+  margin-top: 24px;
+}
+
 .cloud-oncall-name {
   color: #f55f3e;
 }
diff --git a/grafana-plugin/src/pages/cloud/CloudPage.tsx b/grafana-plugin/src/pages/cloud/CloudPage.tsx
index e92d849f..21be94f3 100644
--- a/grafana-plugin/src/pages/cloud/CloudPage.tsx
+++ b/grafana-plugin/src/pages/cloud/CloudPage.tsx
@@ -50,12 +50,13 @@ const CloudPage = (props: CloudPageProps) => {
   const disconnectCloudOncall = () => {
     console.log('disconnected');
     setCloudIsConnected(false);
+    store.cloudStore.disconnectToCloud();
   };
 
   const connectToCloud = () => {
-    console.log('CONNECT TO CLOUD');
     setCloudIsConnected(true);
     setShowConfirmationModal(false);
+    store.cloudStore.connectToCloud(cloudApiKey);
   };
 
   const syncUsers = () => {
@@ -146,7 +147,7 @@ const CloudPage = (props: CloudPageProps) => {
   return (
     <div className={cx('root')}>
       <VerticalGroup spacing="lg">
-        <Text.Title level={3}>
+        <Text.Title level={3} className={cx('cloud-page-title')}>
           Connect Open Source OnCall and <Text className={cx('cloud-oncall-name')}>Cloud OnCall</Text>
         </Text.Title>
         <Block withBackground bordered className={cx('info-block')}>