diff --git a/studio/package.json b/studio/package.json
index cd4a9be..fff539d 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint --ext .js,.vue ./",
     "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0",
-    "dev": "concurrently \"quasar dev\" \"node connect-ws.js\"",
+    "dev": "quasar dev",
     "build": "quasar build"
   },
   "dependencies": {
diff --git a/studio/quasar.config.js b/studio/quasar.config.js
index 265e339..ab0d9fa 100644
--- a/studio/quasar.config.js
+++ b/studio/quasar.config.js
@@ -19,7 +19,8 @@ module.exports = configure(function (/* ctx */) {
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
     boot: [
-      'ws'
+      'ws',
+      'axios'
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
@@ -102,7 +103,8 @@ module.exports = configure(function (/* ctx */) {
 
       // Quasar plugins
       plugins: [
-        'Notify'
+        'Notify',
+        'Loading'
       ],
     },
 
diff --git a/studio/src/App.vue b/studio/src/App.vue
index e35d950..6aabb00 100644
--- a/studio/src/App.vue
+++ b/studio/src/App.vue
@@ -5,5 +5,8 @@
 <script setup>
 defineOptions({
   name: "App",
+  mounted() {
+    window.zillaApp = this;
+  }
 });
 </script>
diff --git a/studio/src/boot/axios.js b/studio/src/boot/axios.js
new file mode 100644
index 0000000..bb07c3e
--- /dev/null
+++ b/studio/src/boot/axios.js
@@ -0,0 +1,27 @@
+import axios from 'axios';
+import { boot } from 'quasar/wrappers'
+import { hideLoader, showLoader } from 'src/services/loading';
+
+export default boot(({ app }) => {
+    axios.interceptors.request.use(
+        (config) => {
+            showLoader();
+            return config;
+        },
+        (error) => {
+            hideLoader();
+            return Promise.reject(error);
+        }
+    );
+
+    axios.interceptors.response.use(
+        (response) => {
+            hideLoader();
+            return response;
+        },
+        (error) => {
+            hideLoader();
+            return Promise.reject(error);
+        }
+    );
+})
\ No newline at end of file
diff --git a/studio/src/pages/shared/CommonTable.vue b/studio/src/pages/shared/CommonTable.vue
index 2b1c2ec..f3dbdc4 100644
--- a/studio/src/pages/shared/CommonTable.vue
+++ b/studio/src/pages/shared/CommonTable.vue
@@ -32,17 +32,17 @@
           unelevated
           icon="img:icons/trash-white.svg"
           :ripple="false"
-          v-if="showStorage"
+          v-if="showStorage && selectedRows.length > 0"
           color="negative"
           class="rounded-10 text-white text-capitalize self-center btn-add-new"
-          @click="handleClick"
+          @click="handleDelete"
         />
 
         <q-btn
           unelevated
           icon="img:/icons/login.svg"
           :ripple="false"
-          v-if="showStorage"
+          v-if="showStorage && selectedRows.length > 0"
           color="dark"
           class="rounded-10 text-white text-capitalize self-center btn-add-new highlighted-border"
           @click="handleClick"
@@ -52,7 +52,7 @@
           unelevated
           icon="img:/icons/export-bucket.svg"
           :ripple="false"
-          v-if="showStorage"
+          v-if="showStorage && selectedRows.length > 0"
           color="light-green"
           class="rounded-10 text-white text-capitalize self-center btn-add-new"
           @click="handleClick"
@@ -65,7 +65,7 @@
           v-if="showStorage"
           color="dark"
           class="rounded-10 text-white text-capitalize self-center btn-add-new highlighted-border"
-          @click="handleClick"
+          @click="handleAdd"
         />
 
         <q-input
@@ -503,6 +503,12 @@ export default defineComponent({
     handleClick() {
       this.$emit("add-new");
     },
+    handleDelete() {
+      this.$emit("delete-item", this.selectedRows);
+    },
+    handleAdd() {
+      this.$emit("add-item");
+    },
     goToPage(page) {
       if (page >= 1 && page <= this.totalPages) {
         this.pagination.page = page;
diff --git a/studio/src/pages/user_account/FunctionComponent.vue b/studio/src/pages/user_account/FunctionComponent.vue
index d5d31f8..2205e66 100644
--- a/studio/src/pages/user_account/FunctionComponent.vue
+++ b/studio/src/pages/user_account/FunctionComponent.vue
@@ -325,65 +325,9 @@ export default defineComponent({
           field: "type",
           sortable: true,
         },
-        // {
-        //   name: "bodyOrExternalName",
-        //   label: "Body/ External Name",
-        //   align: "center",
-        //   field: "bodyOrExternalName",
-        //   sortable: true,
-        // },
         { name: "actions", label: "Actions", align: "center" },
       ],
-      tableData: [
-        {
-          id: 1,
-          name: "Example Data Table",
-          parameters: "Lorem ipsum",
-          returnType: "Lorem ipsum",
-          language: "PHP",
-          type: "External",
-        },
-        {
-          id: 2,
-          name: "Example Data Table",
-          parameters: "Lorem ipsum",
-          returnType: "Lorem ipsum",
-          language: "JavaScript",
-          type: "Embedded",
-        },
-        {
-          id: 3,
-          name: "Example Data Table",
-          parameters: "Lorem ipsum",
-          returnType: "Lorem ipsum",
-          language: "R",
-          type: "External",
-        },
-        {
-          id: 4,
-          name: "Example Data Table",
-          parameters: "Lorem ipsum",
-          returnType: "Lorem ipsum",
-          language: "PHP",
-          type: "Embedded",
-        },
-        {
-          id: 5,
-          name: "Example Data Table",
-          parameters: "Lorem ipsum",
-          returnType: "Lorem ipsum",
-          language: "SQL",
-          type: "External",
-        },
-        {
-          id: 6,
-          name: "Example Data Table",
-          parameters: "Lorem ipsum",
-          returnType: "Lorem ipsum",
-          language: "Python",
-          type: "Embedded",
-        },
-      ],
+      tableData: [],
       functionTypeRow: [
         { name: "", type: "", defaultValue: "" },
         { name: "", type: "", defaultValue: "" },
@@ -530,19 +474,7 @@ export default defineComponent({
     },
     getFunctionInformations() {
       this.$ws.sendMessage(
-        `SELECT 
-    p.proname as "name",
-    pg_catalog.pg_get_function_arguments(p.oid) as "parameters",
-    pg_catalog.pg_get_function_result(p.oid) as "returnType"
-FROM 
-    pg_catalog.pg_proc p
-    LEFT JOIN pg_catalog.pg_namespace n ON n.oid = p.pronamespace
-WHERE 
-    pg_catalog.pg_function_is_visible(p.oid)
-    AND n.nspname <> 'pg_catalog'
-    AND n.nspname <> 'information_schema'
-ORDER BY p.proname;
-`,
+        `SHOW FUNCTIONS;`,
         "get_function"
       );
     },
@@ -554,7 +486,7 @@ ORDER BY p.proname;
           return defaultValue
             ? `${name} ${type} DEFAULT ${defaultValue}`
             : `${name} ${type}`;
-        })
+        })  
         .join(", ");
 
       return `
diff --git a/studio/src/pages/user_account/StorageComponent.vue b/studio/src/pages/user_account/StorageComponent.vue
index f169a09..3f16587 100644
--- a/studio/src/pages/user_account/StorageComponent.vue
+++ b/studio/src/pages/user_account/StorageComponent.vue
@@ -40,7 +40,12 @@
               </q-input>
             </div>
           </q-card-section>
-          <q-tab v-for="(tab, index) in tabs" :key="tab.name" :name="tab.name">
+          <q-tab
+            @click="getStorageObjects"
+            v-for="(tab, index) in tabs"
+            :key="tab.name"
+            :name="tab.name"
+          >
             <!-- <div class="row q-pl-sm justify-between items-center"> -->
             <!-- Tab name on the left -->
             <span
@@ -62,7 +67,7 @@
                 dense
                 icon="img:/icons/trash.svg"
                 class="q-ml-md"
-                @click="deleteTab(index)"
+                @click="(e) => deleteBucket(e, tab?.name)"
                 size="14px"
               />
             </div>
@@ -124,41 +129,44 @@
               :showAddButton="false"
               :hideBottom="false"
               noDataLabel="No Data"
-              @add-new="openTableDialog"
+              @delete-item="deleteBucketItems"
               @move-row="openMoveDialog"
               @rename-row="openRenameDialog"
+              @delete-row="openBucketObjectDeleteDialog"
+              @add-item="addNewBucketObjectDialog"
               showStorage
               isMultipleChecked
             />
 
-            <template v-if="tab.tableData.length <= 0">
-              <div class="row justify-center q-pt-lg">
-                <div
-                  class="column q-pa-lg bg-custom-primary text-center bucket-file-upload"
-                >
-                  <div class="flex flex-center q-mb-md">
-                    <q-icon
-                      class="fs-60"
-                      name="img:/icons/folder-add-bucket.svg"
-                    />
-                  </div>
-                  <div class="fs-18 text-custom-text-secondary">
-                    Start dropping your files here
-                  </div>
-                  <div class="text-caption text-custom-text-secondary q-my-sm">
-                    OR
-                  </div>
-                  <q-btn
-                    unelevated
-                    label="Upload A File"
-                    icon="add"
-                    :ripple="false"
-                    class="bg-light-green rounded-10 text-white text-capitalize self-center btn-add-new q-mt-sm"
-                    @click="addNewBucketDialog"
+            <div
+              class="row justify-center q-pt-lg"
+              v-if="tab.tableData.length <= 0"
+            >
+              <div
+                class="column q-pa-lg bg-custom-primary text-center bucket-file-upload"
+              >
+                <div class="flex flex-center q-mb-md">
+                  <q-icon
+                    class="fs-60"
+                    name="img:/icons/folder-add-bucket.svg"
                   />
                 </div>
+                <div class="fs-18 text-custom-text-secondary">
+                  Start dropping your files here
+                </div>
+                <div class="text-caption text-custom-text-secondary q-my-sm">
+                  OR
+                </div>
+                <q-btn
+                  unelevated
+                  label="Upload A File"
+                  icon="add"
+                  :ripple="false"
+                  class="bg-light-green rounded-10 text-white text-capitalize self-center btn-add-new q-mt-sm"
+                  @click="addNewBucketObjectDialog"
+                />
               </div>
-            </template>
+            </div>
           </q-tab-panel>
         </q-tab-panels>
       </template>
@@ -272,12 +280,14 @@
           label="Rename"
           unelevated
           color="light-green"
+          @click="updateStorageObject"
           class="rounded-10 text-capitalize min-w-80"
         />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
+  <!-- Add new bucket Dialog -->
   <q-dialog
     v-model="addNewBucket"
     backdrop-filter="blur(4px)"
@@ -305,6 +315,7 @@
         <q-input
           dense
           outlined
+          v-model="newBucketName"
           placeholder="e.g my-bucket"
           class="rounded-10 self-center text-weight-light rounded-input bg-custom-primary"
         />
@@ -322,16 +333,229 @@
           label="Add Now"
           unelevated
           color="light-green"
+          @click="addStorageBuckets"
           class="rounded-10 text-capitalize min-w-80"
         />
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!-- Add new bucket object Dialog -->
+  <q-dialog
+    v-model="addNewBucketObject"
+    backdrop-filter="blur(4px)"
+    class="snippet-dialog"
+  >
+    <q-card class="highlighted-border">
+      <q-card-section class="flex justify-between items-center q-pa-lg">
+        <div class="flex items-center">
+          <q-icon size="sm" name="add" class="filter-custom-dark" />
+          <p class="text-custom-text-secondary fw-600 q-ml-md text-subtitle1">
+            Add New {{ selectedTab }}
+          </p>
+        </div>
+        <q-icon
+          name="close"
+          class="cursor-pointer fs-20"
+          @click="addNewBucketObject = false"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-pb-lg">
+        <p class="text-custom-gray-dark text-weight-light q-pb-sm">
+          Write Bucket Object Name
+        </p>
+        <q-input
+          dense
+          outlined
+          v-model="newObjectBucketName"
+          placeholder="e.g my-bucket"
+          class="rounded-10 self-center text-weight-light rounded-input bg-custom-primary"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="q-pa-md">
+        <q-btn
+          label="Cancel"
+          unelevated
+          color="dark"
+          class="rounded-10 text-capitalize min-w-80 highlighted-border"
+          @click="addNewBucketObject = false"
+        />
+        <q-btn
+          label="Add Now"
+          unelevated
+          color="light-green"
+          class="rounded-10 text-capitalize min-w-80"
+          @click="addStorageObject"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- Delete Bucket Dialog -->
+  <q-dialog
+    v-model="deletedBucket.isDeleted"
+    backdrop-filter="blur(4px)"
+    class="delete-dialog"
+  >
+    <q-card class="highlighted-border">
+      <q-card-section class="flex justify-between items-center q-pa-lg">
+        <div class="flex items-center">
+          <q-icon size="sm" name="img:/icons/trash.svg" />
+          <p class="text-custom-text-secondary fw-600 q-ml-md text-subtitle1">
+            Delete {{ deletedBucket.bucketName }}?
+          </p>
+        </div>
+        <q-icon
+          name="close"
+          class="cursor-pointer fs-20"
+          @click="deletedBucket.isDeleted = false"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section>
+        <p class="text-custom-gray-dark text-weight-light q-pa-sm w-90">
+          Are you sure you want to delete this
+          <span class="fw-600">{{ deletedBucket.bucketName }}</span
+          >? This action is irreversible.
+        </p>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="q-pa-md">
+        <q-btn
+          label="Cancel"
+          unelevated
+          color="dark"
+          class="rounded-10 text-capitalize min-w-80 highlighted-border"
+          @click="deletedBucket.isDeleted = false"
+        />
+        <q-btn
+          label="Delete"
+          unelevated
+          color="negative"
+          class="rounded-10 text-capitalize min-w-80"
+          @click="deleteStorageBuckets"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- Delete Bucket object Dialog -->
+  <q-dialog
+    v-model="isOpenBucketObjectDeleteDialog.isDeleted"
+    backdrop-filter="blur(4px)"
+    class="delete-dialog"
+  >
+    <q-card class="highlighted-border">
+      <q-card-section class="flex justify-between items-center q-pa-lg">
+        <div class="flex items-center">
+          <q-icon size="sm" name="img:/icons/trash.svg" />
+          <p class="text-custom-text-secondary fw-600 q-ml-md text-subtitle1">
+            Delete {{ isOpenBucketObjectDeleteDialog.selectedRow?.name }}?
+          </p>
+        </div>
+        <q-icon
+          name="close"
+          class="cursor-pointer fs-20"
+          @click="isOpenBucketObjectDeleteDialog.isDeleted = false"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section>
+        <p class="text-custom-gray-dark text-weight-light q-pa-sm w-90">
+          Are you sure you want to delete this
+          <span class="fw-600">{{
+            isOpenBucketObjectDeleteDialog.selectedRow?.name
+          }}</span
+          >? This action is irreversible.
+        </p>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="q-pa-md">
+        <q-btn
+          label="Cancel"
+          unelevated
+          color="dark"
+          class="rounded-10 text-capitalize min-w-80 highlighted-border"
+          @click="isOpenBucketObjectDeleteDialog.isDeleted = false"
+        />
+        <q-btn
+          label="Delete"
+          unelevated
+          color="negative"
+          class="rounded-10 text-capitalize min-w-80"
+          @click="deleteStorageObject"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- Delete Bucket multiple object Dialog -->
+  <q-dialog
+    v-model="deleteMultipleSelectedRows.isDeleted"
+    backdrop-filter="blur(4px)"
+    class="delete-dialog"
+  >
+    <q-card class="highlighted-border">
+      <q-card-section class="flex justify-between items-center q-pa-lg">
+        <div class="flex items-center">
+          <q-icon size="sm" name="img:/icons/trash.svg" />
+          <p class="text-custom-text-secondary fw-600 q-ml-md text-subtitle1">
+            Delete Objects?
+          </p>
+        </div>
+        <q-icon
+          name="close"
+          class="cursor-pointer fs-20"
+          @click="deleteMultipleSelectedRows.isDeleted = false"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section>
+        <p class="text-custom-gray-dark text-weight-light q-pa-sm w-90">
+          Are you sure you want to delete this
+          <span class="fw-600">{{
+            deleteMultipleSelectedRows.selectedRows
+              ?.map((row) => row?.name)
+              .join(", ")
+          }}</span
+          >? This action is irreversible.
+        </p>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="q-pa-md">
+        <q-btn
+          label="Cancel"
+          unelevated
+          color="dark"
+          class="rounded-10 text-capitalize min-w-80 highlighted-border"
+          @click="deleteMultipleSelectedRows.isDeleted = false"
+        />
+        <q-btn
+          label="Delete"
+          unelevated
+          color="negative"
+          class="rounded-10 text-capitalize min-w-80"
+          @click="deleteMultipleSelectedRows.isDeleted = false"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 <script>
 import CommonTable from "../shared/CommonTable.vue";
 import { defineComponent } from "vue";
 import { ref } from "vue";
+import {
+  appAddStorageBuckets,
+  appAddStorageObject,
+  appDeleteStorageBuckets,
+  appDeleteStorageObject,
+  appGetStorageBuckets,
+  appGetStorageObjects,
+  appUpdateStorageObject,
+} from "src/services/api";
 
 export default defineComponent({
   name: "StorageComponent",
@@ -340,12 +564,27 @@ export default defineComponent({
   },
   data() {
     return {
+      newObjectBucketName: "",
+      newBucketName: "",
       selectedTab: "initialTab",
       searchLabel: "Bucket",
       isMovingRow: false,
       isRenameRow: false,
       selectedRow: null,
       addNewBucket: false,
+      addNewBucketObject: false,
+      deletedBucket: {
+        isDeleted: false,
+        bucketName: "",
+      },
+      isOpenBucketObjectDeleteDialog: {
+        isDeleted: false,
+        selectedRow: null,
+      },
+      deleteMultipleSelectedRows: {
+        isDeleted: false,
+        selectedRows: [],
+      },
       tableColumns: [
         { name: "name", label: "Name", align: "left", field: "name" },
         {
@@ -377,109 +616,73 @@ export default defineComponent({
         },
         { name: "tabActions", label: "Actions", align: "center" },
       ],
-      tabs: [
-        {
-          name: "Bucket 1",
-          tableData: [
-            {
-              id: 1,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 2,
-              name: "New Folder",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 3,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 4,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 5,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-          ],
-        },
-        {
-          name: "Bucket 2",
-          tableData: [
-            {
-              id: 1,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 2,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 3,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 4,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-            {
-              id: 5,
-              name: "Screenshot 2024-11-11",
-              size: "145.4 KB",
-              tabType: "img/png",
-              createdAt: "10/30/2024, 7:51:16 PM",
-              lastUpdated: "10/30/2024, 7:51:16 PM",
-            },
-          ],
-        },
-        {
-          name: "Bucket 3",
-          tableData: [],
-        },
-      ],
+      tabs: [],
     };
   },
+  mounted() {
+    this.getStorageBuckets();
+  },
   methods: {
-    handleClick() {},
-    openTableDialog() {
-      this.addNewView = !this.addNewView;
+    getStorageBuckets() {
+      appGetStorageBuckets()
+        .then(({ data }) => {
+          this.tabs = data.map((x) => ({
+            name: x,
+            tableData: [],
+          }));
+        });
     },
+    getStorageObjects() {
+      appGetStorageObjects(this.selectedTab)
+        .then(({ data }) => {
+          const tabs = this.tabs.find((x) => x.name == this.selectedTab);
+          if (tabs) {
+            tabs.tableData = data.map((x, i) => ({
+              name: x.name,
+              id: i + 1,
+              tabType: x.type,
+            }));
+          }
+        });
+    },
+    deleteStorageObject() {
+      this.isOpenBucketObjectDeleteDialog.isDeleted = false;
+      appDeleteStorageObject(
+        this.selectedTab,
+        this.isOpenBucketObjectDeleteDialog.selectedRow?.name
+      ).then(({ data }) => {
+        this.getStorageObjects();
+      });
+    },
+    updateStorageObject() {
+      this.isRenameRow = false;
+      appUpdateStorageObject(this.selectedTab, this.selectedRow?.name).then(
+        ({ data }) => {
+          this.getStorageObjects();
+        }
+      );
+    },
+    addStorageObject() {
+      this.addNewBucketObject = false;
+      appAddStorageObject(this.selectedTab, this.newObjectBucketName).then(
+        ({ data }) => {
+          this.getStorageObjects();
+        }
+      );
+    },
+    addStorageBuckets() {
+      this.addNewBucket = false;
+      appAddStorageBuckets(this.newBucketName).then(({ data }) => {
+        this.getStorageBuckets();
+      });
+    },
+    deleteStorageBuckets() {
+      this.deletedBucket.isDeleted = false;
+      appDeleteStorageBuckets(this.deletedBucket.bucketName).then(({ data }) => {
+        this.getStorageBuckets();
+      });
+    },
+    handleClick() {},
     openMoveDialog(row) {
       this.isMovingRow = !this.isMovingRow;
       this.selectedRow = row;
@@ -488,11 +691,26 @@ export default defineComponent({
       this.isRenameRow = !this.isRenameRow;
       this.selectedRow = row;
     },
+    deleteBucketItems(selectedRows) {
+      this.deleteMultipleSelectedRows.isDeleted = true;
+      this.deleteMultipleSelectedRows.selectedRows = selectedRows;
+    },
     editTab(index) {},
-    deleteTab(index) {},
+    deleteBucket(e, bucketName) {
+      e.stopPropagation();
+      this.deletedBucket.isDeleted = true;
+      this.deletedBucket.bucketName = bucketName;
+    },
+    openBucketObjectDeleteDialog(row) {
+      this.isOpenBucketObjectDeleteDialog.isDeleted = true;
+      this.isOpenBucketObjectDeleteDialog.selectedRow = row;
+    },
     addNewBucketDialog() {
       this.addNewBucket = !this.addNewBucket;
     },
+    addNewBucketObjectDialog() {
+      this.addNewBucketObject = !this.addNewBucketObject;
+    },
   },
   setup() {
     return {
diff --git a/studio/src/services/api.js b/studio/src/services/api.js
index 2ac030e..affd6dc 100644
--- a/studio/src/services/api.js
+++ b/studio/src/services/api.js
@@ -89,7 +89,103 @@ const appDeleteSSOProvidersById = id => {
     })
 }
 
+const appGetStorageBuckets = () => {
+    return new Promise((resolve, reject) => {
+        axios.get(`${app.apiEndpoint}/storage/buckets`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appAddStorageBuckets = bucketName => {
+    return new Promise((resolve, reject) => {
+        axios.post(`${app.apiEndpoint}/storage/buckets/${bucketName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appDeleteStorageBuckets = bucketName => {
+    return new Promise((resolve, reject) => {
+        axios.delete(`${app.apiEndpoint}/storage/buckets/${bucketName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appGetStorageObjects = bucketName => {
+    return new Promise((resolve, reject) => {
+        axios.get(`${app.apiEndpoint}/storage/objects/${bucketName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appGetStorageObjectDetail = (bucketName, fileName) => {
+    return new Promise((resolve, reject) => {
+        axios.get(`${app.apiEndpoint}/storage/objects/${bucketName}/${fileName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appAddStorageObject = (bucketName, fileName) => {
+    return new Promise((resolve, reject) => {
+        axios.post(`${app.apiEndpoint}/storage/objects/${bucketName}/${fileName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appUpdateStorageObject = (bucketName, fileName) => {
+    return new Promise((resolve, reject) => {
+        axios.put(`${app.apiEndpoint}/storage/objects/${bucketName}/${fileName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
+const appDeleteStorageObject = (bucketName, fileName) => {
+    return new Promise((resolve, reject) => {
+        axios.delete(`${app.apiEndpoint}/storage/objects/${bucketName}/${fileName}`)
+            .then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+    })
+}
+
 export {
+    appUpdateStorageObject,
+    appDeleteStorageObject,
+    appAddStorageObject,
+    appGetStorageObjects,
+    appGetStorageObjectDetail,
+    appAddStorageBuckets,
+    appDeleteStorageBuckets,
+    appGetStorageBuckets,
     appAddUsers,
     appGetUsers,
     appGetUserById,
diff --git a/studio/src/services/app.js b/studio/src/services/app.js
index ada6318..48948fd 100644
--- a/studio/src/services/app.js
+++ b/studio/src/services/app.js
@@ -1,3 +1,3 @@
 export default {
-    apiEndpoint: 'http://localhost:7184'
+    apiEndpoint: 'http://localhost:7184/v1'
 }
\ No newline at end of file
diff --git a/studio/src/services/loading.js b/studio/src/services/loading.js
new file mode 100644
index 0000000..e500775
--- /dev/null
+++ b/studio/src/services/loading.js
@@ -0,0 +1,20 @@
+
+const showLoader = (message = 'Please wait...') => {
+    if (window.zillaApp) {
+        window.zillaApp.$q.loading.show({
+            message: message,
+            html: true
+        })
+    }
+}
+
+const hideLoader = () => {
+    if (window.zillaApp) {
+        window.zillaApp.$q.loading.hide()
+    }
+}
+
+export {
+    showLoader,
+    hideLoader
+}
\ No newline at end of file
diff --git a/studio/src/services/webSocket.js b/studio/src/services/webSocket.js
index 5a0f966..7d1beca 100644
--- a/studio/src/services/webSocket.js
+++ b/studio/src/services/webSocket.js
@@ -10,7 +10,7 @@ const WebSocketService = {
             return;
         };
 
-        this.ws = new WebSocket('ws://localhost:8080');
+        this.ws = new WebSocket('ws://localhost:7184/pgsql');
 
         this.ws.onopen = () => {
             console.log('WebSocket connection established.');