diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index fbd7c8d4..4477203b 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
     import { getCustomBackground, getEmotion } from "../../ts/util";
     import { DataBase } from "../../ts/storage/database";
-    import { CharEmotion, CurrentCharacter, selectedCharID } from "../../ts/stores";
+    import { CharEmotion, CurrentCharacter, ShowVN, selectedCharID } from "../../ts/stores";
     import ResizeBox from './ResizeBox.svelte'
     import DefaultChatScreen from "./DefaultChatScreen.svelte";
     import defaultWallpaper from '../../etc/bg.jpg'
     import ChatList from "../Others/ChatList.svelte";
     import TransitionImage from "./TransitionImage.svelte";
-  import BackgroundDom from "./BackgroundDom.svelte";
-  import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
+    import BackgroundDom from "./BackgroundDom.svelte";
+    import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
+    import VisualNovelMain from "../VisualNovel/VisualNovelMain.svelte";
     let openChatList = false
 
     const wallPaper = `background: url(${defaultWallpaper})`
@@ -19,7 +20,6 @@
         +   ($DataBase.textScreenBorder ? `border: 0.3rem solid ${$DataBase.textScreenBorder};` : '')
     let bgImg= ''
     let lastBg = ''
-
     $: (async () =>{
         if($DataBase.customBackground !== lastBg){
             lastBg = $DataBase.customBackground
@@ -27,7 +27,10 @@
         }
     })()
 </script>
-{#if $DataBase.theme === ''}
+
+{#if $ShowVN}
+    <VisualNovelMain />
+{:else if $DataBase.theme === ''}
     <div class="flex-grow h-full min-w-0 relative justify-center flex">
         <SideBarArrow />
         <BackgroundDom />
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index 0f7fbcab..51d05dfe 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -314,15 +314,18 @@
             <OptionInput value="none">{language.none}</OptionInput>
             <OptionInput value="emotion">{language.emotionImage}</OptionInput>
             <OptionInput value="imggen">{language.imageGeneration}</OptionInput>
+            {#if $DataBase.tpo}
+                <OptionInput value="vn">VN test</OptionInput>
+            {/if}
         </SelectInput>
     {:else}
-    <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
-        <OptionInput value="none">{language.none}</OptionInput>
-        <OptionInput value="single">{language.singleView}</OptionInput>
-        <OptionInput value="multiple">{language.SpacedView}</OptionInput>
-        <OptionInput value="emp">{language.emphasizedView}</OptionInput>
+        <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
+            <OptionInput value="none">{language.none}</OptionInput>
+            <OptionInput value="single">{language.singleView}</OptionInput>
+            <OptionInput value="multiple">{language.SpacedView}</OptionInput>
+            <OptionInput value="emp">{language.emphasizedView}</OptionInput>
 
-    </SelectInput>
+        </SelectInput>
     {/if}
 
     {#if currentChar.data.viewScreen === 'emotion'}
diff --git a/src/lib/VisualNovel/VisualNovelChat.svelte b/src/lib/VisualNovel/VisualNovelChat.svelte
new file mode 100644
index 00000000..7fc0a7ba
--- /dev/null
+++ b/src/lib/VisualNovel/VisualNovelChat.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { CurrentCharacter } from "src/ts/stores";
+
+    
+</script>
+
+<div class="w-full flex justify-center absolute bottom-5">
+    <div class="w-3xl max-w-full flex flex-col">
+
+        <div class="bg-slate-700 h-12 rounded-lg border-slate-500 border-1 w-40 mb-2 bg-opacity-90 text-center flex items-center justify-center">
+            <span class="font-bold p-2">{$CurrentCharacter.name}</span>
+        </div>
+        <div class="bg-slate-700 h-40 rounded-lg border-slate-500 border-1 w-full bg-opacity-90 text-justify p-4">
+            Test
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/VisualNovel/VisualNovelMain.svelte b/src/lib/VisualNovel/VisualNovelMain.svelte
new file mode 100644
index 00000000..f718f398
--- /dev/null
+++ b/src/lib/VisualNovel/VisualNovelMain.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { getCustomBackground, getEmotion } from "../../ts/util";
+    import { DataBase } from "../../ts/storage/database";
+    import BackgroundDom from "../ChatScreens/BackgroundDom.svelte";
+    import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
+    import defaultWallpaper from '../../etc/bg.jpg'
+    import VisualNovelChat from "./VisualNovelChat.svelte";
+
+    const wallPaper = `background: url(${defaultWallpaper})`
+
+    let bgImg= ''
+    let lastBg = ''
+    $: (async () =>{
+        if($DataBase.customBackground !== lastBg){
+            lastBg = $DataBase.customBackground
+            bgImg = await getCustomBackground($DataBase.customBackground)
+        }
+    })()
+</script>
+<div class="flex-grow h-full min-w-0 relative justify-center flex">
+    <SideBarArrow />
+    <BackgroundDom />
+    <div style={wallPaper} class="h-full w-full">
+        <VisualNovelChat />
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 630fc817..886fac74 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -549,7 +549,7 @@ export interface character{
     notes:string
     chats:Chat[]
     chatPage: number
-    viewScreen: 'emotion'|'none'|'imggen',
+    viewScreen: 'emotion'|'none'|'imggen'|'vn',
     bias: [string, number][]
     emotionImages: [string, string][]
     globalLore: loreBook[]
diff --git a/src/ts/stores.ts b/src/ts/stores.ts
index 55ca50b1..6140b1a5 100644
--- a/src/ts/stores.ts
+++ b/src/ts/stores.ts
@@ -36,6 +36,7 @@ export const CurrentChat = writable(cloneDeep(currentChat))
 export const CurrentUsername = writable(db.username)
 export const CurrentUserIcon = writable(db.userIcon)
 export const CurrentShowMemoryLimit = writable(db.showMemoryLimit)
+export const ShowVN = writable(false)
 
 function createSimpleCharacter(char:character|groupChat){
     if((!char) || char.type === 'group'){
@@ -56,6 +57,7 @@ function createSimpleCharacter(char:character|groupChat){
 
 
 function updateCurrentCharacter(){
+    
     const db = get(DataBase)
     if(!db.characters){
         CurrentCharacter.set(null)
@@ -69,6 +71,8 @@ function updateCurrentCharacter(){
     if(isEqual(gotCharacter, currentChar)){
         return
     }
+    ShowVN.set(currentChar?.viewScreen === 'vn')   
+
     console.log("Character updated")
     CurrentCharacter.set(cloneDeep(currentChar))
     const simp = createSimpleCharacter(currentChar)
@@ -107,7 +111,8 @@ DataBase.subscribe((data) => {
     }
 })
 
-selectedCharID.subscribe((id) => {  
+selectedCharID.subscribe((id) => {
+
     updateCurrentCharacter()
 })