diff --git a/src/renderer/components/layout/HeaderLayout.vue b/src/renderer/components/layout/HeaderLayout.vue
index 7b20b9c..4f18006 100644
--- a/src/renderer/components/layout/HeaderLayout.vue
+++ b/src/renderer/components/layout/HeaderLayout.vue
@@ -1,5 +1,45 @@
+<script setup lang="tsx">
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const handleRoute = (path: string): void => {
+	router.push(path)
+}
+
+const isCurrentRoute = (path: string): boolean => {
+	return path === route.path
+}
+</script>
 <template>
 	<v-app-bar color="primary" density="compact">
 		<v-app-bar-title>{{ $route.meta.title }}</v-app-bar-title>
+		<template #append>
+			<v-btn
+				prepend-icon="mdi-home"
+				variant="text"
+				:class="{ active: isCurrentRoute('/') }"
+				@click="handleRoute('/')"
+			>
+				{{ $t('title.main') }}
+			</v-btn>
+			<v-btn
+				prepend-icon="mdi-fit-to-screen-outline"
+				variant="text"
+				:class="{ active: isCurrentRoute('/second') }"
+				@click="handleRoute('/second')"
+			>
+				{{ $t('title.second') }}
+			</v-btn>
+		</template>
 	</v-app-bar>
 </template>
+<style scoped>
+.v-btn {
+	opacity: 0.4;
+}
+.active {
+	opacity: 1 !important;
+}
+</style>
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index 6543f26..d44fcfe 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -1,7 +1,13 @@
 {
 	"desc": {
 		"welcome-title": "Hello Vutron! Everything is ready.",
-		"welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code."
+		"welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
+		"second-desc": "You have moved to the second screen! There is nothing here!"
+	},
+	"title": {
+		"main": "Main Screen",
+		"second": "Second Screen",
+		"error": "Unknown Error"
 	},
 	"menu": {
 		"change-theme": "Change Theme",
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index 1b3ef7e..6a8b274 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -1,7 +1,13 @@
 {
 	"desc": {
 		"welcome-title": "안녕 Vutron! 모든 준비를 마쳤습니다.",
-		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다."
+		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다.",
+		"second-desc": "두번째 화면으로 이동하였습니다! 여기는 아무 것도 없습니다!"
+	},
+	"title": {
+		"main": "메인 화면",
+		"second": "두번째 화면",
+		"error": "에러 발생"
 	},
 	"menu": {
 		"change-theme": "테마 변경",
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index dc6922a..c369732 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -1,5 +1,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router/dist/vue-router.esm-bundler'
-import { MainScreen, ErrorScreen } from '@/renderer/screens'
+import { MainScreen, ErrorScreen, SecondScreen } from '@/renderer/screens'
+
+import i18n from '../plugins/i18n'
+
+const { t } = i18n.global
 
 export default createRouter({
 	history: createWebHashHistory(),
@@ -8,14 +12,21 @@ export default createRouter({
 			path: '/',
 			component: MainScreen,
 			meta: {
-				title: 'Main'
+				title: t('title.main')
+			}
+		},
+		{
+			path: '/second',
+			component: SecondScreen,
+			meta: {
+				title: t('title.second')
 			}
 		},
 		{
 			path: '/error',
 			component: ErrorScreen,
 			meta: {
-				title: 'Unknown error occurred'
+				title: t('title.error')
 			}
 		},
 		{
diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue
index 604464a..0003f2a 100644
--- a/src/renderer/screens/MainScreen.vue
+++ b/src/renderer/screens/MainScreen.vue
@@ -38,10 +38,15 @@ const handleCountIncrease = (): void => {
 <template>
 	<v-container>
 		<v-row no-gutters align="center" class="text-center">
-			<v-col cols="5">
-				<img alt="logo" class="ma-auto h-auto w-75" src="/images/vutron-logo.webp" />
+			<v-col cols="12" md="5">
+				<img
+					alt="logo"
+					draggable="false"
+					class="ma-auto h-auto w-75"
+					src="/images/vutron-logo.webp"
+				/>
 			</v-col>
-			<v-col cols="7">
+			<v-col cols="12" md="7">
 				<h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
 				<p>{{ $t('desc.welcome-desc') }}</p>
 				<v-row class="my-4">
diff --git a/src/renderer/screens/SecondScreen.vue b/src/renderer/screens/SecondScreen.vue
new file mode 100644
index 0000000..0604267
--- /dev/null
+++ b/src/renderer/screens/SecondScreen.vue
@@ -0,0 +1,12 @@
+<script setup lang="tsx"></script>
+
+<template>
+	<v-container>
+		<v-row no-gutters align="center" class="text-center">
+			<v-col cols="12">
+				<v-icon icon="mdi-emoticon-cool-outline" size="250" color="#009f57" />
+			</v-col>
+			<v-col cols="12" class="my-4">{{ $t('desc.second-desc') }}</v-col>
+		</v-row>
+	</v-container>
+</template>
diff --git a/src/renderer/screens/index.ts b/src/renderer/screens/index.ts
index cd65dfd..12d2ceb 100644
--- a/src/renderer/screens/index.ts
+++ b/src/renderer/screens/index.ts
@@ -1,4 +1,5 @@
 import ErrorScreen from '@/renderer/screens/ErrorScreen.vue'
 import MainScreen from '@/renderer/screens/MainScreen.vue'
+import SecondScreen from '@/renderer/screens/SecondScreen.vue'
 
-export { ErrorScreen, MainScreen }
+export { ErrorScreen, MainScreen, SecondScreen }