diff --git a/xroom-dashboard/package-lock.json b/xroom-dashboard/package-lock.json
index 9e83a75..5cefbee 100644
--- a/xroom-dashboard/package-lock.json
+++ b/xroom-dashboard/package-lock.json
@@ -14,6 +14,7 @@
         "axios": "^1.8.4",
         "core-js": "^3.8.3",
         "moment-jalaali": "^0.10.4",
+        "swiper": "^11.2.8",
         "video.js": "^7.21.7",
         "vue": "^3.2.13",
         "vue-pdf-embed": "^2.1.2",
@@ -14211,6 +14212,25 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz",
+      "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.9.0",
       "resolved": "https://registry.npmmirror.com/table/-/table-6.9.0.tgz",
diff --git a/xroom-dashboard/package.json b/xroom-dashboard/package.json
index 35ceabe..634dc0c 100644
--- a/xroom-dashboard/package.json
+++ b/xroom-dashboard/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.8.4",
     "core-js": "^3.8.3",
     "moment-jalaali": "^0.10.4",
+    "swiper": "^11.2.8",
     "video.js": "^7.21.7",
     "vue": "^3.2.13",
     "vue-pdf-embed": "^2.1.2",
diff --git a/xroom-dashboard/src/assets/img/img.jpg b/xroom-dashboard/src/assets/img/img.jpg
new file mode 100644
index 0000000..6d58816
Binary files /dev/null and b/xroom-dashboard/src/assets/img/img.jpg differ
diff --git a/xroom-dashboard/src/assets/img/img2.jpg b/xroom-dashboard/src/assets/img/img2.jpg
new file mode 100644
index 0000000..0dcdfe5
Binary files /dev/null and b/xroom-dashboard/src/assets/img/img2.jpg differ
diff --git a/xroom-dashboard/src/assets/img/img3.jpg b/xroom-dashboard/src/assets/img/img3.jpg
new file mode 100644
index 0000000..909d626
Binary files /dev/null and b/xroom-dashboard/src/assets/img/img3.jpg differ
diff --git a/xroom-dashboard/src/assets/img/img4.jpg b/xroom-dashboard/src/assets/img/img4.jpg
new file mode 100644
index 0000000..e677081
Binary files /dev/null and b/xroom-dashboard/src/assets/img/img4.jpg differ
diff --git a/xroom-dashboard/src/components/CreateSpaceModal.vue b/xroom-dashboard/src/components/CreateSpaceModal.vue
new file mode 100644
index 0000000..17911e7
--- /dev/null
+++ b/xroom-dashboard/src/components/CreateSpaceModal.vue
@@ -0,0 +1,281 @@
+<template>
+  <div v-if="isVisible" class="modal-overlay" @click="$emit('close')">
+    <div class="modal-content" @click.stop>
+      <div class="popUp-header">
+        <h2>ایجاد جلسه جدید</h2>
+        <button @click="$emit('close')">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="35"
+            height="35"
+            viewBox="0 0 32 32"
+            fill="none"
+          >
+            <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="#101010" />
+            <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#E2DEE9" />
+            <path
+              d="M21 11L11 21"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M11 11L21 21"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="popUp-title">
+        <h2>اضافه کردن فضای جدید</h2>
+        <span>برای ایجاد فضای جدید فرم زیر را تکمیل نمایید.</span>
+      </div>
+      <div class="popUp-objects">
+        <form @submit.prevent="handleSubmit">
+          <div class="form-group">
+            <label for="spaceName">نام:</label>
+            <input
+              id="spaceName"
+              v-model="form.name"
+              type="text"
+              required
+              placeholder="نام فضا را وارد کنید"
+            />
+          </div>
+          <div class="form-group">
+            <label for="spaceCapacity">ظرفیت:</label>
+            <input
+              id="spaceCapacity"
+              v-model.number="form.capacity"
+              type="number"
+              required
+              placeholder="ظرفیت (تعداد کاربر)"
+            />
+          </div>
+          <div class="form-group">
+            <label for="spaceType">امکانات فضای مد نظر:</label>
+            <textarea
+              id="spaceType"
+              v-model="form.features"
+              required
+              placeholder="امکانات فضا را وارد کنید"
+            ></textarea>
+          </div>
+        </form>
+      </div>
+      <div class="form-actions">
+        <button type="button" class="cancel-btn" @click="$emit('close')">بازگشت</button>
+        <button type="submit" class="submit-btn" @click="handleSubmit">تایید</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CreateSpaceModal',
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      form: {
+        name: '',
+        capacity: null,
+        features: '',
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      if (this.form.name && this.form.capacity && this.form.features) {
+        console.log('داده‌های فرم:', {
+          name: this.form.name,
+          capacity: this.form.capacity,
+          features: this.form.features,
+        });
+        this.form = {
+          name: '',
+          capacity: null,
+          features: '',
+        };
+        this.$emit('close');
+      }
+    },
+  },
+};
+</script>
+
+
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: #F7F5FA;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 700px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  direction: rtl;
+  border-radius: 20px;
+  padding-bottom: 1.5rem;
+  height: max-content;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+
+.modal-content::-webkit-scrollbar {
+  display: none;
+}
+.popUp-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #101010;
+    color: #fff;
+    width: 100%;
+    padding: 20px 26px;
+    margin-bottom: 1.5rem;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.popUp-header h2 {
+  font-size: 22px;
+}
+
+.popUp-header button {
+    background-color: #101010;
+    border: none;
+    cursor: pointer;
+}
+
+.popUp-title {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 20px;
+    padding-right: 50px;
+}
+
+.popUp-title h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #101010;
+} 
+
+.popUp-title span {
+    font-size: 16px;
+    font-weight: 500;
+    color: #4F5A69;
+    margin-top: 1rem;
+}
+
+.popUp-objects {
+    margin-top: 1rem !important;
+    padding: 20px;
+    background-color: #FFFFFF;
+    border-radius: 16px;
+    width: 100%;
+    max-width: 620px;
+    display: block;
+    margin: auto;
+}
+
+.form-group {
+  margin-bottom: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  width: 50%;
+  font-size: 16px;
+}
+
+.form-group input {
+  height: 45px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem
+}
+
+.form-group textarea {
+  height: 140px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem;
+  resize: none;
+}
+
+.form-group input:focus {
+    outline: none;
+}
+
+.form-group textarea:focus {
+    outline: none;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  padding-bottom: 0;
+  width: 100%;
+  max-width: 620px;
+  margin: auto;
+}
+
+.submit-btn,
+.cancel-btn {
+  text-align: center;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  height: 50px;
+  width: 47%;
+}
+
+.submit-btn {
+  background-color: #3A57E8;
+  color: white;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.cancel-btn {
+  background-color: #EBEEFD;
+  color: #101010;
+  font-weight: 500;
+  font-size: 18px;
+}
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/RoomSelectionModal.vue b/xroom-dashboard/src/components/RoomSelectionModal.vue
index 50cc7ac..6ead44e 100644
--- a/xroom-dashboard/src/components/RoomSelectionModal.vue
+++ b/xroom-dashboard/src/components/RoomSelectionModal.vue
@@ -352,7 +352,7 @@ export default {
       rooms: [
         {
           id: 1,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 1',
           capacity: 33,
           type: 'فضا تیم',
@@ -360,7 +360,7 @@ export default {
         },
         {
           id: 2,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 2',
           capacity: 24,
           type: 'آموزشی',
@@ -368,7 +368,7 @@ export default {
         },
         {
           id: 3,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 3',
           capacity: 60,
           type: 'جلسه تیمی',
@@ -376,7 +376,7 @@ export default {
         },
         {
           id: 4,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 4',
           capacity: 33,
           type: 'فضا تیم',
@@ -384,7 +384,7 @@ export default {
         },
         {
           id: 5,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 5',
           capacity: 24,
           type: 'آموزشی',
@@ -392,7 +392,7 @@ export default {
         },
         {
           id: 6,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 6',
           capacity: 60,
           type: 'جلسه تیمی',
@@ -400,7 +400,7 @@ export default {
         },
         {
           id: 7,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 7',
           capacity: 33,
           type: 'فضا تیم',
@@ -408,7 +408,7 @@ export default {
         },
         {
           id: 8,
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           name: 'Interview room 8',
           capacity: 24,
           type: 'آموزشی',
@@ -463,7 +463,7 @@ export default {
     createTemporaryRoom() {
       const newRoom = {
         id: this.rooms.length + this.Temporaryrooms.length + 1,
-        image: this.newTempRoom.image || require('@/assets/img/img.png'),
+        image: this.newTempRoom.image || require('@/assets/img/img.jpg'),
         name: this.newTempRoom.name,
         capacity: this.newTempRoom.capacity,
         type: this.newTempRoom.type,
@@ -720,4 +720,9 @@ export default {
     display: block;
     margin-right: auto;
 }
+
+.room-image {
+  border-radius: 10px;
+}
+
 </style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/SidebarMenu.vue b/xroom-dashboard/src/components/SidebarMenu.vue
index 950beca..2cc3732 100644
--- a/xroom-dashboard/src/components/SidebarMenu.vue
+++ b/xroom-dashboard/src/components/SidebarMenu.vue
@@ -39,7 +39,7 @@
         <div class="text-wrapper">داشبورد</div>
       </router-link>
 
-      <router-link to="/spaces" class="nav-button" :class="{ active: isActive('/spaces') }">
+      <router-link to="/dashboard/spaces" class="nav-button" :class="{ active: isActive('/dashboard/spaces') }">
         <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-4.svg" />
         <div class="text-wrapper">فضاها</div>
       </router-link>
diff --git a/xroom-dashboard/src/pages/dashboard/Meeting.vue b/xroom-dashboard/src/pages/dashboard/Meeting.vue
index 7c4f391..f98e2e2 100644
--- a/xroom-dashboard/src/pages/dashboard/Meeting.vue
+++ b/xroom-dashboard/src/pages/dashboard/Meeting.vue
@@ -158,7 +158,7 @@ export default {
           id: 1,
           title: 'Interview room',
           date: '2025-05-25T10:00:00',
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           type: 'فضا تیم',
           maxCapacity: 33,
         },
@@ -166,7 +166,7 @@ export default {
           id: 2,
           title: 'جلسه بررسی پیشرفت',
           date: '2025-05-18T14:00:00',
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           type: 'مدیریتی',
           maxCapacity: 8,
         },
@@ -174,7 +174,7 @@ export default {
           id: 3,
           title: 'جلسه تیم فنی',
           date: '2025-06-01T09:00:00',
-          image: require('@/assets/img/img.png'),
+          image: require('@/assets/img/img.jpg'),
           type: 'فنی',
           maxCapacity: 12,
         },
@@ -330,11 +330,9 @@ export default {
         color: #FFFFFF;
         font-size: 15px;
         font-weight: 500;
-        height: 38px;
-        width: 51px;
         border-radius: 8px;
         border: none;
-        padding: 7px 10px;
+        padding: 7px 12px;
         cursor: pointer;
         margin-left: 1rem;
     }
@@ -344,8 +342,6 @@ export default {
         background-color: #FFFFFF;
         font-size: 15px;
         font-weight: 500;
-        height: 38px;
-        width: 51px;
         border-radius: 8px;
         border: none;
         padding: 7px 10px;
@@ -376,16 +372,16 @@ export default {
     }
 
     .create-meet {
-    width: 191px;
-    height: 46px;
-    padding: 12px 24px 12px 24px;
-    background-color: #3A57E8;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #FFFFFF;
-    border: none;
-    cursor: pointer;
+        padding: 12px 24px 12px 24px;
+        background-color: #3A57E8;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #FFFFFF;
+        border: none;
+        cursor: pointer;
+        width: max-content;
+      
     }
 
     .meetings-list {
@@ -428,6 +424,10 @@ export default {
         align-items: center;
     }
 
+    .meeting-image {
+      border-radius: 10px;
+    }
+
 
 
 </style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/Spaces.vue b/xroom-dashboard/src/pages/dashboard/Spaces.vue
new file mode 100644
index 0000000..2dd84eb
--- /dev/null
+++ b/xroom-dashboard/src/pages/dashboard/Spaces.vue
@@ -0,0 +1,457 @@
+<template>
+  <SidebarMenu />
+
+  <div class="dashboard-page">
+    <div class="content">
+      <!-- Top Header -->
+      <AppHeader pageTitle="فضاها" />
+
+      <!-- Description -->
+      <div class="section-description">
+        <div class="section-title">مدیریت فضای مجازی</div>
+        <p class="title-description">
+          با همکاران خود در یک فضای مجازی ملاقات کنید. در این صفحه می‌توانید فضای اطراف خود را مشاهده و مدیریت کنید.
+        </p>
+      </div>
+
+      <!-- Page Objects -->
+      <div>
+        <!-- Sharing Filter -->
+        <div class="filter-section">
+          <div class="sharing-filters">
+            <span style="font-size: 17px; font-weight: 600;">فیلتر اشتراک‌گذاری</span>
+            <div class="filter-buttons">
+              <button
+                v-for="filter in sharingFilters"
+                :key="filter.value"
+                :class="activeSharingFilter === filter.value ? 'active-filter' : 'disable-filter'"
+                @click="setActiveSharingFilter(filter.value)"
+              >
+                {{ filter.label }}
+              </button>
+            </div>
+          </div>
+          <div class="space-type-filter">
+            <span style="font-size: 17px; font-weight: 600;">فیلتر نوع فضا</span>
+            <div class="filter-buttons">
+              <button
+                v-for="filter in spaceTypeFilters"
+                :key="filter.value"
+                :class="activeSpaceTypeFilter === filter.value ? 'active-filter' : 'disable-filter'"
+                @click="setActiveSpaceTypeFilter(filter.value)"
+              >
+                {{ filter.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Add Space Button -->
+        <button class="add-space" @click="openCreateSpaceModal">
+          + <span style="margin-right: 0.5rem;">اضافه کردن فضای اختصاصی</span>
+        </button>
+
+        <!-- Create Space Modal -->
+        <CreateSpaceModal
+          :isVisible="isCreateSpaceModalVisible"
+          @close="closeCreateSpaceModal"
+        />
+
+        <!-- Spaces -->
+        <div v-if="filteredSpaces.length > 0">
+          <swiper
+            :slidesPerView="3.6"
+            :spaceBetween="30"
+            :pagination="{ clickable: false }"
+            :modules="modules"
+            class="mySwiper"
+          >
+            <swiper-slide v-for="(space, index) in filteredSpaces" :key="index" class="card">
+              <img :src="space.image" alt="تصویر فضا" />
+              <div class="card-texts">
+                <h2>{{ space.name }}</h2>
+                <p class="space-capacity">
+                    <span style="margin-left: 4px;">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="17"
+                        viewBox="0 0 16 17"
+                        fill="none"
+                    >
+                        <g clip-path="url(#clip0_622_1334)">
+                        <path
+                            d="M3.33203 5.16667C3.33203 5.87391 3.61298 6.55219 4.11308 7.05228C4.61318 7.55238 5.29145 7.83333 5.9987 7.83333C6.70594 7.83333 7.38422 7.55238 7.88432 7.05228C8.38441 6.55219 8.66536 5.87391 8.66536 5.16667C8.66536 4.45942 8.38441 3.78115 7.88432 3.28105C7.38422 2.78095 6.70594 2.5 5.9987 2.5C5.29145 2.5 4.61318 2.78095 4.11308 3.28105C3.61298 3.78115 3.33203 4.45942 3.33203 5.16667Z"
+                            stroke="#718096"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                        <path
+                            d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5"
+                            stroke="#718096"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                        <path
+                            d="M10.668 2.58667C11.2416 2.73354 11.75 3.06714 12.1131 3.53488C12.4761 4.00262 12.6732 5.17 12.6732 5.17C12.6732 5.76212 12.4761 6.33739 12.1131 6.80513C11.75 7.27287 11.2416 7.60647 10.668 7.75334"
+                            stroke="#718096"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                        <path
+                            d="M14 14.5V13.1666C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0786 12.5699 10.7471 12 10.6"
+                            stroke="#718096"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                        </g>
+                        <defs>
+                        <clipPath id="clip0_622_1334">
+                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+                        </clipPath>
+                        </defs>
+                    </svg>
+                    </span>
+                    حداکثر: {{ space.capacity }} کاربر
+                </p>
+                <p class="space-type">
+                    <span style="margin-left: 4px;">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="17"
+                            viewBox="0 0 16 17"
+                            fill="none"
+                        >
+                            <path
+                            d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                            <path
+                            d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                            <path
+                            d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                            <path
+                            d="M6.66797 4.5H9.33464"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                            <path
+                            d="M6.66797 7.16663H9.33464"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                            <path
+                            d="M6.66797 9.83337H9.33464"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                            <path
+                            d="M6.66797 12.5H9.33464"
+                            stroke="#3A57E8"
+                            stroke-width="1.25"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    {{ space.type }}
+                </p>
+              </div>
+            </swiper-slide>
+          </swiper>
+        </div>
+        <div v-else class="no-spaces-message">
+          <p>هیچ فضایی با فیلترهای انتخاب‌شده یافت نشد.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SidebarMenu from '@/components/SidebarMenu.vue';
+import AppHeader from '@/components/Header.vue';
+import CreateSpaceModal from '@/components/CreateSpaceModal.vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import { Pagination } from 'swiper/modules';
+
+export default {
+  name: 'DashboardPage',
+  components: {
+    SidebarMenu,
+    AppHeader,
+    CreateSpaceModal,
+    Swiper,
+    SwiperSlide,
+  },
+  data() {
+    return {
+      modules: [Pagination],
+      isCreateSpaceModalVisible: false,
+      sharingFilters: [
+        { label: 'همه', value: 'all' },
+        { label: 'تیم', value: 'team' },
+        { label: 'حریم خصوصی', value: 'private' },
+      ],
+      spaceTypeFilters: [
+        { label: 'فضاها', value: 'spaces' },
+        { label: 'قالب‌ها', value: 'templates' },
+        { label: 'همه', value: 'all' },
+      ],
+      activeSharingFilter: 'all',
+      activeSpaceTypeFilter: 'spaces',
+      spaces: [
+        {
+          name: 'فضای تیمی ۱',
+          image: require('@/assets/img/img.jpg'),
+          capacity: 33,
+          type: 'فضا تیم',
+          sharing: 'team',
+          spaceType: 'spaces',
+        },
+        {
+          name: 'فضای تیمی ۲',
+          image: require('@/assets/img/img2.jpg'),
+          capacity: 33,
+          type: 'فضا تیم',
+          sharing: 'team',
+          spaceType: 'spaces',
+        },
+        {
+          name: 'فضای خصوصی ۱',
+          image: require('@/assets/img/img3.jpg'),
+          capacity: 33,
+          type: 'فضا خصوصی',
+          sharing: 'private',
+          spaceType: 'spaces',
+        },
+        {
+          name: 'قالب ۱',
+          image: require('@/assets/img/img4.jpg'),
+          capacity: 33,
+          type: 'قالب',
+          sharing: 'team',
+          spaceType: 'templates',
+        },
+        {
+          name: 'فضای تیمی ۳',
+          image: require('@/assets/img/img.jpg'),
+          capacity: 33,
+          type: 'فضا تیم',
+          sharing: 'team',
+          spaceType: 'spaces',
+        },
+      ],
+    };
+  },
+  computed: {
+    filteredSpaces() {
+      return this.spaces.filter((space) => {
+        const matchesSharing =
+          this.activeSharingFilter === 'all' || space.sharing === this.activeSharingFilter;
+        const matchesSpaceType =
+          this.activeSpaceTypeFilter === 'all' || space.spaceType === this.activeSpaceTypeFilter;
+        return matchesSharing && matchesSpaceType;
+      });
+    },
+  },
+  methods: {
+    setActiveSharingFilter(value) {
+      this.activeSharingFilter = value;
+    },
+    setActiveSpaceTypeFilter(value) {
+      this.activeSpaceTypeFilter = value;
+    },
+    openCreateSpaceModal() {
+      this.isCreateSpaceModalVisible = true;
+    },
+    closeCreateSpaceModal() {
+      this.isCreateSpaceModalVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+.dashboard-page {
+    margin-right: 360px;
+    padding: 20px;
+    direction: rtl;
+    font-family: IRANSansXFaNum, sans-serif;
+  }
+.content {
+    background-color: #f8f9fa;
+    border-radius: 20px;
+    padding: 35px 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.section-title {
+    font-size: 17px;
+    font-weight: 600;
+}
+
+.title-description {
+    font-size: 15px;
+    font-weight: 500;
+    margin-top: 1.5rem;
+    color: #4F5A69;
+}
+
+.filter-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2.5rem;
+    padding: 24px 16px;
+    border-radius: 10px;
+    background-color: #FFFFFF;
+}
+
+.sharing-filters {
+    max-width: 79%;
+    width: 100%;
+    margin-left: 1.5rem;
+}
+
+.space-type-filter {
+    max-width: 21%;
+    width: 100%;
+}
+
+.active-filter {
+    background-color: #3A57E8;
+    color: #FFFFFF;
+    font-size: 15px;
+    font-weight: 500;
+    border-radius: 8px;
+    border: none;
+    padding: 7px 12px;
+    cursor: pointer;
+    margin-left: 1rem;
+}
+
+.disable-filter {
+    color: #3A57E8;
+    background-color: #FFFFFF;
+    font-size: 15px;
+    font-weight: 500;
+    border-radius: 8px;
+    border: none;
+    padding: 7px 10px;
+    cursor: pointer;
+    margin-left: 1rem;
+}
+    
+.filter-buttons {
+    margin-top: 1rem;
+}
+
+
+.add-space {
+    display: block;
+    padding: 12px 24px 12px 24px;
+    background-color: #3A57E8;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #FFFFFF;
+    border: none;
+    cursor: pointer;
+    width: max-content;
+    margin: auto;
+}
+
+.mySwiper {
+    margin-top: 2.5rem;
+}
+
+.card {
+    max-width: 250px !important;
+    width: 100% !important;
+    height: 335px;
+    border: 1px solid #B8C0CB;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+}
+
+.card img {
+    max-width: 235px;
+    width: 100%;
+    max-height: 205px;
+    height: 100%;
+    border-radius: 14px;
+    border: none;
+    margin-top: 0.4rem;
+}
+
+.card-texts {
+    width: 100%;
+    margin-top: 1rem;
+    padding-right: 1rem;
+    display: grid;
+    gap: 1rem;
+}
+
+.space-name {
+    font-size: 17px;
+    font-weight: 600;
+    color: #444D5A;
+}
+
+.space-capacity {
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    font-weight: 500;
+    color: #718096;
+}
+
+.space-type {
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    font-weight: 500;
+    color: #3A57E8;
+}
+
+.no-spaces-message {
+    font-size: 18px;
+    font-weight: 500;
+    color: #101010;
+    margin-top: 4rem;
+    text-align: center;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/router/index.js b/xroom-dashboard/src/router/index.js
index fe9cc29..6e4ac9e 100644
--- a/xroom-dashboard/src/router/index.js
+++ b/xroom-dashboard/src/router/index.js
@@ -7,6 +7,7 @@ import DashboardPage from '../pages/dashboard/index.vue'
 import FilesPage from '@/pages/dashboard/files.vue';
 import TeamsPage from '@/pages/dashboard/team.vue';
 import DownloadPage  from '@/pages/dashboard/Download.vue';
+import spacesPage from '@/pages/dashboard/Spaces.vue';
 import MeetingPage from '@/pages/dashboard/Meeting.vue';
 import axios from '@/axios';
 
@@ -49,6 +50,12 @@ const routes = [
     component: DownloadPage,
     meta: { requiresAuth: true }
   },
+  {
+    path: '/dashboard/spaces',
+    name: 'spaces',
+    component: spacesPage,
+    meta: { requiresAuth: true }
+  },
   {
     path: '/dashboard/meetings',
     name: 'meetings',