make this ui more beautifull "<template>
  <v-locale-provider rtl>
    <v-layout class="rounded-md" >
      <!-- Joined System Bar -->
      <v-system-bar
        window
        color="#05042D"
        v-if="IsJoind"
        class="d-flex align-center justify-space-between shadow"
      >
        <div class="ms-5">
          <span class="text-subtitle-1 text-white" style="font-family: 'Tanha', sans-serif;">اتاق : {{ roomId }}</span>
        </div>
        <div class="me-1">
          <span class="ms-3 text-white" dir="ltr" style="font-family: 'Segoe UI', sans-serif;">
            {{ time }}
          </span>
          <v-icon icon="mdi-logout" class="ms-3 text-white" @click="this.$refs.webrtc.leave()"></v-icon>
          <v-icon icon="mdi-chat" class="ms-3 text-white" @click="this.$refs.webrtc.chatsideBar = !this.$refs.webrtc.chatsideBar"></v-icon>
          <v-icon icon="mdi-cog" class="ms-3 text-white" @click="this.$refs.webrtc.logDialog = true"></v-icon>
        </div>
      </v-system-bar>

      <!-- App Bar for Not Joined State -->
      <v-app-bar v-if="!IsJoind" color="#070534" flat>
        <v-app-bar-title dir="rtl" class="text-white">مانا ویو</v-app-bar-title>
        <v-spacer></v-spacer>
        <v-app-bar-title dir="ltr" class="mr-3">
          <v-img :width="150" src="/src/assets/logo-home.png"></v-img>
        </v-app-bar-title>
      </v-app-bar>

      <!-- Main Content -->
      <v-main class="d-flex align-center justify-center my-5">
        <v-card v-if="!IsJoind" color='#070534' width="420" class="elevation-3">
          <v-card class="align-center justify-center elevation-5 mx-auto" width="400" color="#070534">
            <template v-slot:title>
              <div class="d-flex align-center justify-center mb-3">
                <v-img aspect-ratio="4/3" cover src="/src/assets/soft-logo-self.png" width="150"></v-img>
              </div>
              <div class="d-flex align-center justify-center mb-3">
                <span style="text-shadow: #444 1px 1px 5px; color: #FFF; font-size: smaller;">
                  ManaView Video Conference
                </span>
              </div>
            </template>
            <div v-show="AllowedFlag.status">
              <v-label class="ms-3 text-white">نام :</v-label>
              <v-card-actions>
                <v-text-field v-model="MyName" label="نام" variant="outlined" hide-details solo-inverted></v-text-field>
              </v-card-actions>
              <v-label class="ms-3 text-white">اتاق :</v-label>
              <v-card-actions>
                <v-select
                  hide-details
                  v-model="roomId"
                  :item-title="item => `${item.RoomID} - افراد حاضر: ${item.pplCount}`"
                  item-value="RoomID"
                  :items="ServerRooms"
                  label="اتاق های موجود"
                  solo-inverted
                ></v-select>
              </v-card-actions>
              <v-card-actions>
                <v-btn
                  color="orange darken-1"
                  @click="onJoin"
                  variant="elevated"
                  size="large"
                  width="100%"
                  :disabled="roomId === ''"
                >
                  <span style="color: #000; font-weight: bold;">ورود</span>
                </v-btn>
              </v-card-actions>
            </div>
            <div v-show="!AllowedFlag.status" class="text-center text-white mt-4">
              <v-label style="font-family: 'Tanha', sans-serif;" class="text-h4">ورود مجاز نیست</v-label>
              <v-label style="font-family: 'Tanha', sans-serif;" class="text-h7">
                لطفا با واحد نرم افزار تماس بگیرید
              </v-label>
              <v-spacer></v-spacer>
              <v-label style="font-family: 'Tanha', sans-serif;" class="text-h6">IP Address : {{ AllowedFlag.ip }}</v-label>
            </div>
          </v-card>
        </v-card>

        <!-- Vue WebRTC for when joined -->
        <v-row v-show="IsJoind" style="height: 100vh !important; padding-top: 1%">
          <vue-webrtc
            ref="webrtc"
            :roomId="roomId"
            :MyName="MyName"
            :enableLogs="true"
            :socketURL="surl"
            :peerOptions="stunServers"
            v-on:IsJoined="IsjoinedEvent"
            v-on:IsLeave="IsLeaveEvent"
            v-on:joined-room="logEvent"
            v-on:left-room="logEvent"
            v-on:opened-room="logEvent"
            v-on:share-started="logEvent"
            v-on:share-stopped="logEvent"
            @error="onError"
          />
        </v-row>

        <!-- Help Dialog -->
        <v-dialog v-model="helpDlg" transition="dialog-bottom-transition" width="500">
          <v-card prepend-icon="mdi-help" title="آموزش تنظیمات" class="pa-3">
            <v-label>۱.لینک زیر را توسط مرورگر خود باز کنید</v-label>
            <v-text-field
              variant="outlined"
              color="primary"
              label="لینک شماره ۱"
              dir="ltr"
              v-model="insecTxt"
              hide-details
              readonly
            />
            <v-label>۲.طبق عکس زیر لینک دوم را در داخل کادر وارد کنید و دکمه Disable را به Enable تغییر دهید.</v-label>
            <v-img src="./assets/insecure.png" width="300" class="my-2" style="border: 1px solid #ddd;" />
            <v-text-field
              id="currentlocation"
              variant="outlined"
              dir="ltr"
              label="لینک شماره ۲"
              v-model="currentlocation"
              hide-details
              readonly
            />
            <v-label>۳.بر روی دکمه Relunch کلیک کنید</v-label>
            <template v-slot:actions>
              <v-btn class="ms-auto" text="بستن" @click="helpDlg = false"></v-btn>
            </template>
          </v-card>
        </v-dialog>
      </v-main>
    </v-layout>
    <footerCMP></footerCMP>
  </v-locale-provider>
</template>
"