diff --git a/lib/objects/cloud_service_api.dart b/lib/objects/cloud_service_api.dart
index 952341e..f016c06 100644
--- a/lib/objects/cloud_service_api.dart
+++ b/lib/objects/cloud_service_api.dart
@@ -1,6 +1,5 @@
 import 'dart:convert';
 import 'dart:developer';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:fluttertoast/fluttertoast.dart';
@@ -24,6 +23,7 @@ class CloudServiceAPI {
   static String _password = "";
   static late Map<String, String> _headers;
   static bool _initState = false;
+  static List<dynamic> devices = List<dynamic>.empty(growable: true);
 
   CloudServiceAPI() {
     if (!_initState) {
@@ -44,6 +44,7 @@ class CloudServiceAPI {
       'accept': 'application/json',
     };
     log("init Config $_headers");
+    await updateDeviceList();
   }
 
   Future<void> reloadConfig() async {
@@ -64,7 +65,6 @@ class CloudServiceAPI {
     List<DeviceModel> remoteObjectsList = remoteObjectsMap.toList();
     return remoteObjectsList;
   }
-
   Future<DeviceInfoModel> getDeviceInfo(String deviceID) async {
     Uri url = Uri.https(_address, '/api/devices/$deviceID');
     Response response = await get(url, headers: _headers);
@@ -72,6 +72,15 @@ class CloudServiceAPI {
     DeviceInfoModel deviceInfoModel = DeviceInfoModel.fromJson(jsonObject);
     return deviceInfoModel;
   }
+  Future updateDeviceList() async {
+    devices = await getDevices();
+    debugPrint("devices: ${devices.elementAt(0)}");
+  }
+  Future<Map<String, dynamic>> getDeviceInfo(deviceID) async {
+    Uri url = Uri.https(address, '/api/devices/$deviceID');
+    Response r = await get(url, headers: headers);
+    return json.decode(r.body) as Map<String, dynamic>;
+  }
 
   Future<Map<String, dynamic>> getInformation() async {
     Uri url = Uri.https(_address, '/api/app');
@@ -148,4 +157,7 @@ class CloudServiceAPI {
     _password = input;
     reloadConfig();
   }
+  List<dynamic> getLoadedDevices(){
+    return devices;
+  }
 }
diff --git a/lib/screens/cloud_service_ui.dart b/lib/screens/cloud_service_ui.dart
index 36b7c9a..02f03aa 100644
--- a/lib/screens/cloud_service_ui.dart
+++ b/lib/screens/cloud_service_ui.dart
@@ -25,7 +25,19 @@ class CloudService extends StatefulWidget {
 class _CloudService extends State<CloudService> {
   late final Map<String, dynamic> credentials;
   CloudServiceAPI cloudServiceAPI = CloudServiceAPI();
-  static SharedPreferences? preferencesInstance;
+  int _selectedIndex = 0;
+
+  void _onItemTapped(int index){
+    setState(() {
+      _selectedIndex = index;
+      if(_selectedIndex == 0){
+        cloudServiceAPI.updateDeviceList();
+      }
+      if(_selectedIndex == 1){
+        // implementation missing
+      }
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -33,27 +45,44 @@ class _CloudService extends State<CloudService> {
       appBar: AppBar(
         title: const Text("Cloud Service"),
       ),
-      body: Center(
-        child: TextButton(
-          onPressed: () async {
-            // List<BluetoothObjectRemote> respond1 = await cloudServiceAPI.getDevices();
-            // debugPrint('Devices: ${respond1[0].toString()}');
-            // debugPrint('Devices: ${respond1[0].toString()}');
-
-            //dynamic respond2 = await cloudServiceAPI.getInformation();
-            //debugPrint('Information: ${respond2.toString()}');
-
-            // dynamic respond3 = await cloudServiceAPI.createDevice('1', 'asdas', 'sdwe1');
-            // debugPrint('CreateDevice: ${respond3.toString()}');*/
-
-            //dynamic respond4 = await cloudServiceAPI.getDeviceInfo("PFC200V3-430EB3");
-            //debugPrint('Information: ${respond4.toString()}');
-
-            //bool respond5 = await cloudServiceAPI.createDevice("PFC200V3-430EB2", "60987668030DF277AD7706D7C1FA683F37230D202A80EE5135B05EF928E3BF88", "");
-            //debugPrint('Information: ${respond5.toString()}');
-          },
-          child: const Text("Example"),
-        ),
+      body: Column(
+        children: <Widget>[
+          Expanded(child: ListView.separated(
+            itemCount: cloudServiceAPI.getLoadedDevices().length,
+            itemBuilder: (BuildContext context, int index) {
+              return Container(
+                height: 100,
+                color: Colors.lightBlueAccent[100],
+                child: Center(child: Text("Id: ${cloudServiceAPI.getLoadedDevices()[index]['id']} \n"
+                    "endpoint: ${cloudServiceAPI.getLoadedDevices()[index]['endpoint']} \n"
+                    "status: ${cloudServiceAPI.getLoadedDevices()[index]['endpoint']} \n"
+                    "connectionState: ${cloudServiceAPI.getLoadedDevices()[index]['connectionState']} \n"
+                    "lastActivityTime: ${cloudServiceAPI.getLoadedDevices()[index]['lastActivityTime']}"),),
+              );
+            }, separatorBuilder: (BuildContext context, int index) => const Divider(
+            thickness: 0,
+            indent: 0,
+            height: 5,
+            color: Colors.white,
+          ),)
+          )
+        ],
+      ),
+      bottomNavigationBar: BottomNavigationBar(
+        type: BottomNavigationBarType.fixed,
+        items: const<BottomNavigationBarItem>[
+          BottomNavigationBarItem(
+            icon: Icon(Icons.refresh),
+            label: 'Reload',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.search),
+            label: 'Search',
+          ),
+        ],
+        currentIndex: _selectedIndex,
+        selectedItemColor: Colors.lightBlueAccent,
+        onTap: _onItemTapped,
       ),
       drawer: const Sidebar(),
     );