diff --git a/src/router/routes.js b/src/router/routes.js
index 0548c005d1..faf102ef1c 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -36,6 +36,8 @@ import ServerPowerOperations from '@/views/Operations/ServerPowerOperations';
 import Ldap from '../views/SecurityAndAccess/Ldap/Ldap.vue';
 import EventLogs from '@/views/Logs/EventLogs';
 import FieldCoreOverride from '@/views/ResourceManagement/FieldCoreOverride';
+import ServiceLoginConsoles from '@/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue';
+import ServiceLogin from '@/views/Operations/ServiceLoginConsoles';
 
 const roles = {
   administrator: 'Administrator',
@@ -64,6 +66,15 @@ export const routes = [
     },
     component: HostConsoleConsole,
   },
+  // Needs reimplementation once routes is implemented
+  {
+    path: '/console/service-login-consoles',
+    meta: {
+      requiresAuth: true,
+      title: i18n.global.t('appPageTitle.serviceLogin'),
+    },
+    component: ServiceLoginConsoles,
+  },
   {
     path: '/',
     meta: {
@@ -96,6 +107,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.serverPowerOperations'),
         },
       },
+      {
+        path: '/operations/service-login',
+        name: 'service-login',
+        component: ServiceLogin,
+        meta: {
+          title: i18n.global.t('appPageTitle.serviceLogin'),
+        },
+      },
       {
         path: '/hardware-status/sensors',
         name: 'sensors',
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 6fcff6aa0a..6a6f36421f 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -148,7 +148,7 @@ export const GlobalStore = defineStore('global', {
         })
         .catch((error) => console.log(error));
     },
-    getSystemInfo() {
+    async getSystemInfo() {
       api
         .get('/redfish/v1/Systems/system')
         .then(
diff --git a/src/store/modules/HardwareStatus/ChassisStore.js b/src/store/modules/HardwareStatus/ChassisStore.js
index 8e8e7543b2..b6938af464 100644
--- a/src/store/modules/HardwareStatus/ChassisStore.js
+++ b/src/store/modules/HardwareStatus/ChassisStore.js
@@ -86,7 +86,7 @@ export const ChassisStore = defineStore('chassisStore', {
       return await api
         .get('/redfish/v1/Chassis/chassis')
         .then(({ data: { PowerState = null } }) => {
-          this.PowerState = PowerState;
+          this.powerState = PowerState;
         })
         .catch((error) => console.log(error));
     },
diff --git a/src/views/Operations/ServiceLoginConsoles/ServiceLogin.vue b/src/views/Operations/ServiceLoginConsoles/ServiceLogin.vue
index 10bff9a05f..d493534abf 100644
--- a/src/views/Operations/ServiceLoginConsoles/ServiceLogin.vue
+++ b/src/views/Operations/ServiceLoginConsoles/ServiceLogin.vue
@@ -1,32 +1,32 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.serviceLogin')" />
 
     <page-section class="mb-0">
-      <b-row class="d-flex">
-        <b-col
+      <BRow class="d-flex">
+        <BCol
           sm="6"
           lg="5"
           xl="4"
           class="d-flex flex-column justify-content-end"
         >
-          <b-form id="form-new-dump">
-            <b-form-group
+          <BForm id="form-new-dump">
+            <BFormGroup
               :label="$t('pageServiceLoginConsoles.selectConsoleType')"
               label-for="selectConsoleType"
             >
-              <b-form-select
+              <BFormSelect
                 id="selectConsoleType"
                 v-model="selectConsoleType"
                 :options="consoleTypeOptions"
                 value-field="value"
                 text-field="text"
               >
-              </b-form-select>
-            </b-form-group>
-          </b-form>
-        </b-col>
-      </b-row>
+              </BFormSelect>
+            </BFormGroup>
+          </BForm>
+        </BCol>
+      </BRow>
     </page-section>
 
     <page-section class="mb-0">
@@ -41,35 +41,25 @@
         :console-type="'console1'"
       />
     </page-section>
-  </b-container>
+  </BContainer>
 </template>
 
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-import PageSection from '@/components/Global/PageSection';
-import ServiceLoginConsoles from './ServiceLoginConsoles';
+<script setup>
+import { ref } from 'vue';
+import i18n from '@/i18n';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import ServiceLoginConsoles from './ServiceLoginConsoles.vue';
 
-export default {
-  name: 'ServiceLogin',
-  components: {
-    PageSection,
-    PageTitle,
-    ServiceLoginConsoles,
+const selectConsoleType = ref('bmc-console');
+const consoleTypeOptions = ref([
+  {
+    value: 'bmc-console',
+    text: i18n.global.t('pageServiceLoginConsoles.bmcConsole'),
   },
-  data() {
-    return {
-      selectConsoleType: 'bmc-console',
-      consoleTypeOptions: [
-        {
-          value: 'bmc-console',
-          text: this.$t('pageServiceLoginConsoles.bmcConsole'),
-        },
-        {
-          value: 'hypervisor-console',
-          text: this.$t('pageServiceLoginConsoles.hypervisorConsole'),
-        },
-      ],
-    };
+  {
+    value: 'hypervisor-console',
+    text: i18n.global.t('pageServiceLoginConsoles.hypervisorConsole'),
   },
-};
+]);
 </script>
diff --git a/src/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue b/src/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue
index 9123cff0d6..f0281f3f0d 100644
--- a/src/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue
+++ b/src/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue
@@ -1,12 +1,7 @@
 <template>
   <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'">
-    <b-row class="d-flex">
-      <b-col
-        sm="6"
-        lg="5"
-        xl="4"
-        class="d-flex flex-column justify-content-end"
-      >
+    <BRow class="d-flex">
+      <BCol sm="6" lg="5" xl="4" class="d-flex flex-column justify-content-end">
         <dl class="mb-2" sm="6" md="6">
           <dt class="d-inline font-weight-bold mr-1">
             {{ $t('pageServiceLoginConsoles.status') }}:
@@ -15,176 +10,181 @@
             <status-icon :status="serverStatusIcon" /> {{ connectionStatus }}
           </dd>
         </dl>
-      </b-col>
+      </BCol>
 
-      <b-col
+      <BCol
         v-if="!isFullWindow"
         class="d-flex justify-content-end align-items-end"
       >
-        <b-button variant="link" type="button" @click="openConsoleWindow()">
+        <BButton variant="link" type="button" @click="openConsoleWindow()">
           <icon-launch />
           {{ $t('global.action.openNewTab') }}
-        </b-button>
-      </b-col>
-    </b-row>
+        </BButton>
+      </BCol>
+    </BRow>
     <div id="terminal" ref="panel"></div>
   </div>
 </template>
 
-<script>
+<script setup>
+import {
+  ref,
+  computed,
+  watch,
+  onBeforeMount,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef,
+} from 'vue';
+import eventBus from '@/eventBus';
+import i18n from '@/i18n';
 import { AttachAddon } from 'xterm-addon-attach';
 import { FitAddon } from 'xterm-addon-fit';
 import { Terminal } from 'xterm';
 import { throttle } from 'lodash';
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
-import StatusIcon from '@/components/Global/StatusIcon';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import { GlobalStore, ChassisStore, AuthenticationStore } from '@/store';
 
-export default {
-  name: 'ServiceLoginConsoles',
-  components: {
-    IconLaunch,
-    StatusIcon,
-  },
-  props: {
-    isFullWindow: {
-      type: Boolean,
-      default: true,
-    },
-    consoleType: {
-      type: String,
-      default: sessionStorage.getItem('storedConsoleType'),
-    },
+const props = defineProps({
+  isFullWindow: {
+    type: Boolean,
+    default: true,
   },
-  data() {
-    return {
-      checkingServerStatus: null, // used to prevent extra api calls
-      resizeConsoleWindow: null,
-      ws: null, // websocket object
-      wsConnection: null, // websocket connection status
-    };
+  consoleType: {
+    type: String,
+    default: sessionStorage.getItem('storedConsoleType'),
   },
-  computed: {
-    serverStatus() {
-      let status = false;
-      if (this.consoleType === 'bmc-console') status = this.wsConnection;
-      if (this.consoleType === 'console1') {
-        status = this.powerStatus !== 'Off' && this.wsConnection;
-      }
+});
 
-      return status;
-    },
-    powerStatus() {
-      return this.$store.getters['chassis/powerState'];
-    },
-    serverStatusIcon() {
-      return this.serverStatus ? 'success' : 'danger';
-    },
-    connectionStatus() {
-      return this.serverStatus
-        ? this.$t('global.status.connected')
-        : this.$t('global.status.disconnected');
-    },
-  },
-  watch: {
-    async checkingServerStatus(value) {
-      if (value) {
-        setTimeout(async () => {
-          await this.$store.dispatch('global/getSystemInfo').finally(() => {
-            this.checkingServerStatus = false;
-          });
-        }, 5000); // 5 seconds
-      }
-    },
-  },
-  created() {
-    Promise.all([
-      this.$store.dispatch('global/getSystemInfo'),
-      this.$store.dispatch('chassis/getPowerState'),
-    ]);
-  },
-  mounted() {
-    this.openTerminal();
-    this.$root.$emit('loading-bar-status', true);
-  },
-  beforeDestroy() {
-    this.ws.close();
-    window.removeEventListener('resize', this.resizeConsoleWindow);
-  },
-  methods: {
-    openTerminal(selectedConsole = this.consoleType) {
-      const token = this.$store.getters['authentication/token'];
-      const host = `${window.location.origin.replace(
-        'https://',
-        '',
-      )}${window.location.pathname.replace(/\/$/, '')}`;
-      this.ws = new WebSocket(`wss://${host}/${selectedConsole}`, [token]);
-
-      // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
-
-      const term = new Terminal({
-        fontSize: 15,
-        fontFamily:
-          'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+const chassisStore = ChassisStore();
+const authenticationStore = AuthenticationStore();
+const globalStore = GlobalStore();
+
+const panel = useTemplateRef('panel');
+
+const checkingServerStatus = ref(null); // used to prevent extra api calls
+const resizeConsoleWindow = ref(null);
+const ws = ref(null); // websocket object
+const wsConnection = ref(null); // websocket connection status
+
+onBeforeMount(() => {
+  Promise.all([globalStore.getSystemInfo(), chassisStore.getPowerState()]);
+});
+
+onMounted(() => {
+  openTerminal();
+  eventBus.emit('loading-bar-status', true);
+});
+
+onBeforeUnmount(() => {
+  ws.value.close();
+  window.removeEventListener('resize', resizeConsoleWindow.value);
+});
+
+const serverStatus = computed(() => {
+  let status = false;
+  if (props.consoleType === 'bmc-console') status = wsConnection.value;
+  if (props.consoleType === 'console1') {
+    status = powerStatus.value !== 'Off' && wsConnection.value;
+  }
+
+  return status;
+});
+
+const powerStatus = computed(() => {
+  return chassisStore.powerStateGetter;
+});
+
+const serverStatusIcon = computed(() => {
+  return serverStatus.value ? 'success' : 'danger';
+});
+
+const connectionStatus = computed(() => {
+  return serverStatus.value
+    ? i18n.global.t('global.status.connected')
+    : i18n.global.t('global.status.disconnected');
+});
+
+watch(checkingServerStatus, (value) => {
+  if (value) {
+    setTimeout(async () => {
+      await globalStore.getSystemInfo().finally(() => {
+        checkingServerStatus.value = false;
       });
+    }, 5000); // 5 seconds
+  }
+});
+
+const openTerminal = (selectedConsole = props.consoleType) => {
+  const token = authenticationStore.token;
+  let host = window.location.origin.replace('https://', '');
+  host = host.replace(/\/$/, '');
+  ws.value = new WebSocket(`wss://${host}/${selectedConsole}`, [token]);
+
+  // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
+
+  const term = new Terminal({
+    fontSize: 15,
+    fontFamily:
+      'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+  });
+
+  const attachAddon = new AttachAddon(ws.value);
+  term.loadAddon(attachAddon);
+
+  const fitAddon = new FitAddon();
+  term.loadAddon(fitAddon);
+
+  const SOL_THEME = {
+    background: '#19273c',
+    cursor: 'rgba(83, 146, 255, .5)',
+    scrollbar: 'rgba(83, 146, 255, .5)',
+  };
+  term.setOption('theme', SOL_THEME);
+
+  term.open(panel.value);
+  fitAddon.fit();
+
+  resizeConsoleWindow.value = throttle(() => {
+    fitAddon.fit();
+  }, 1000);
+  window.addEventListener('resize', resizeConsoleWindow.value);
 
-      const attachAddon = new AttachAddon(this.ws);
-      term.loadAddon(attachAddon);
-
-      const fitAddon = new FitAddon();
-      term.loadAddon(fitAddon);
-
-      const SOL_THEME = {
-        background: '#19273c',
-        cursor: 'rgba(83, 146, 255, .5)',
-        scrollbar: 'rgba(83, 146, 255, .5)',
-      };
-      term.setOption('theme', SOL_THEME);
-
-      term.open(this.$refs.panel);
-      fitAddon.fit();
-
-      this.resizeConsoleWindow = throttle(() => {
-        fitAddon.fit();
-      }, 1000);
-      window.addEventListener('resize', this.resizeConsoleWindow);
-
-      try {
-        this.ws.onopen = () => {
-          this.wsConnection = true;
-          console.log(`websocket ${selectedConsole}/ opened`);
-        };
-        this.ws.onclose = (event) => {
-          this.wsConnection = false;
-          console.log(
-            `websocket ${selectedConsole}/ closed.
+  try {
+    ws.value.onopen = () => {
+      wsConnection.value = true;
+      console.log(`websocket ${selectedConsole}/ opened`);
+    };
+    ws.value.onclose = (event) => {
+      wsConnection.value = false;
+      console.log(
+        `websocket ${selectedConsole}/ closed.
             code: ${event.code}
-            reason: ${event.reason}`,
-          );
-        };
-        this.ws.onmessage = () => {
-          if (!this.checkingServerStatus) {
-            this.checkingServerStatus = true;
-          }
-        };
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    openConsoleWindow() {
-      sessionStorage.setItem('storedConsoleType', this.consoleType);
-      window.open(
-        '#/console/service-login-consoles',
-        '_blank',
-        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550',
+            reason: ${event.reason}`
       );
-    },
-  },
+    };
+    ws.value.onmessage = () => {
+      if (!checkingServerStatus.value) {
+        checkingServerStatus.value = true;
+      }
+    };
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const openConsoleWindow = () => {
+  sessionStorage.setItem('storedConsoleType', props.consoleType);
+  window.open(
+    `${window.location.origin}/console/service-login-consoles`,
+    '_blank',
+    'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550'
+  );
 };
 </script>
 
 <style lang="scss" scoped>
-@import '~xterm/css/xterm.css';
-
 #terminal {
   overflow: auto;
 }