diff --git a/src/components/space-list/SpaceList.vue b/src/components/space-list/SpaceList.vue
index c92d679..e2ba9b5 100644
--- a/src/components/space-list/SpaceList.vue
+++ b/src/components/space-list/SpaceList.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import {computed, onMounted, ref} from "vue";
 import type {Space} from "@/models/space";
-import {Vue3PullToRefresh} from "@amirafa/vue3-pull-to-refresh";
+// import {Vue3PullToRefresh} from "@amirafa/vue3-pull-to-refresh";
 // import {spaceService} from "@/services/space-service";
 
 // PrimeVue Toast
+import {InputText} from "primevue";
+import {Button} from "primevue";
 import Toast from "primevue/toast"; // <— правильный импорт компонента
 import {useToast} from "primevue/usetoast";
-import {useSpaceStore} from "@/stores/spaceStore"; // нужен ToastService в main.ts
+import {useSpaceStore} from "@/stores/spaceStore";
+import {spaceService} from "@/services/space-service"; // нужен ToastService в main.ts
 const toast = useToast();
 const spaceStore = useSpaceStore();
 const emits = defineEmits(["space-selected"])
-
+const newSpaceName = ref<string>("")
 const spaces = ref<Space[]>([]);
 const spaceId = computed(() => {
  return  spaceStore.selectedSpaceId
@@ -35,6 +38,10 @@ const fetchData = async () => {
   }
 };
 
+const createSpace = async () => {
+  await spaceService.createSpace(newSpaceName.value)
+  await fetchData()
+}
 const selectSpace =  (space: Space) => {
   spaceStore.setSpace(space.id, space.name);
   emits('space-selected', space);
@@ -48,19 +55,14 @@ onMounted(fetchData);
 
 <template>
   <Toast/>
-  <Vue3PullToRefresh
-      :distance="50"
-      :duration="2000"
-      :size="32"
-      noreload
-      :options="{ color: '#111', bgColor: '#fff' }"
-      @onrefresh="
-            () => {
-            }
-        "
-  />
-  <div class="flex space-list flex w-full flex-col justify-center gap-2 p-2">
+  <div class="flex space-list  w-full flex-col items-center justify-center gap-2 p-2">
     <!-- твой контент -->
+    <div  v-if="spaces.length==0" class="card gap-4 !w-fit">
+      <span>Enter your first space name</span>
+      <InputText type="text" v-model="newSpaceName"></InputText>
+      <Button @click="createSpace">Create</Button>
+    </div>
+    <div v-else class="!w-full">
     <span class="font-bold">Selected space: {{spaceName}}</span>
     <div v-for="space in spaces" :key="space.id" class="w-full h-full " @click="selectSpace(space)" >
       <div class="flex w-full flex-col justify-start  rounded-2xl p-2  bg-gray-50 gap-2" :class="spaceId === space.id ? '!bg-green-50' : 'bg-gray-50'">
@@ -72,6 +74,7 @@ onMounted(fetchData);
         </div>
       </div>
     </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/services/space-service.ts b/src/services/space-service.ts
index eb86ed3..937f797 100644
--- a/src/services/space-service.ts
+++ b/src/services/space-service.ts
@@ -85,6 +85,16 @@ async function setSetting(key: SettingType, value: any): Promise<void> {
     console.debug(`Setting ${key} is ${JSON.stringify(value)}`);
 }
 
+async function createSpace(spaceName: string): Promise<number> {
+    try {
+        let response = await api.post(`/spaces`, {name: spaceName});
+        return response.data;
+    } catch (error) {
+        console.error(error);
+        throw error;
+    }
+}
+
 export const spaceService = {
-    fetchSpaces, fetchSpace, getSetting, getSettings, setSetting
+    fetchSpaces, fetchSpace, getSetting, getSettings, setSetting, createSpace
 };
\ No newline at end of file