diff --git a/public/bg.webp b/public/bg.webp
new file mode 100644
index 00000000..a303f73a
Binary files /dev/null and b/public/bg.webp differ
diff --git a/src/App.svelte b/src/App.svelte
index fa68739e..19e816bb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -16,9 +16,9 @@
     let gridOpen = false
 
     DataBase.subscribe(db => {
-        if(db.didFirstSetup !== didFirstSetup){
-            didFirstSetup = db.didFirstSetup || false
-        }
+        // if(db.didFirstSetup !== didFirstSetup){
+        //     didFirstSetup = db.didFirstSetup || false
+        // }
     })
 
 </script>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 02a0cea5..50c81ee3 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -110,7 +110,13 @@ export const languageEnglish = {
         themeDescWifuCut: "Suitable for mobile",
         themeDescClassic: "Suitable for All devices",
         texttheme: "Select your text color",
-        inputName: "Lastly, Input your Nickname."
+        inputName: "Lastly, Input your Nickname.",
+        welcome: "Welcome to RisuAI! Here, I will guide you to setup. First, What may I call you?",
+        welcome2: "Hello {username}! before we start, I will ask you some questions. You can change these settings later in settings.\n\nFirst select the AI provider.",
+        openAIProvider: "OpenAI GPT is a high quality AI model, but it is paid and filtered.",
+        openrouterProvider: "Openrouter has a lot of models, some of them unfiltered and some of them free, but it is not as good as OpenAI.",
+        hordeProvider: "Horde is a free provider, but the response time is long and the quality is low.",
+        setProviderLater: "There are other providers, but you can set it later in settings. select this if you want to set it later.",
     },
     confirm: "Confirm",
     goback: "Go Back",
diff --git a/src/lib/Others/WelcomeRisu.svelte b/src/lib/Others/WelcomeRisu.svelte
index 902a5b96..2b076100 100644
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -1,192 +1,192 @@
-<script>
+<script lang="ts">
 
-    import { ArrowBigLeftIcon } from "lucide-svelte";
+    import { ArrowBigLeftIcon, Send } from "lucide-svelte";
     import { changeLanguage, language } from "src/lang";
     import { addDefaultCharacters } from "src/ts/characters";
     import { DataBase } from "src/ts/storage/database";
     import { sleep } from "src/ts/util";
     import TextInput from "../UI/GUI/TextInput.svelte";
-  import Button from "../UI/GUI/Button.svelte";
+    import Chat from "../ChatScreens/Chat.svelte";
 
     let step = 0
-    let provider = 0
+    let provider = ''
+    let input = ''
+
+    if(step === 0){
+        const browserLang = navigator.language
+        const browserLangShort = browserLang.split('-')[0]
+        const usableLangs = ['de', 'en', 'ko', 'cn']
+        if(usableLangs.includes(browserLangShort)){
+            changeLanguage(browserLangShort)
+            $DataBase.language = browserLangShort
+            step = 1
+        }
+    }
+    let start = false
+
+    function send(){
+        switch(step){
+            case 1:{
+                if(input.length > 0){
+                    $DataBase.username = input
+                    step = 2
+                }
+                break
+            }
+            case 2:{
+                if(['openai','openrouter','horde','later'].includes(input.toLocaleLowerCase())){
+                    provider = input.toLocaleLowerCase()
+                    step = 3
+                }
+                break
+            }
+        }
+    }
 </script>
 
-<div class="w-full h-full flex justify-center welcome-bg text-textcolor">
-    <article class="w-full overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-auto">
-        <div class="w-full justify-center flex mt-8">
-            <img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm  mb-0">
-        </div>
-        <!-- <div class="w-full items-center flex flex-col justify-center mb-8">
-            <button class=" border border-selected rounded-md px-4 py-2 text-lg hover:border-neutral-200 transition">Get Started</button>
-        </div> -->
-        <div class="w-full flex-col bg-darkbg flex-grow mt-5 prose prose-invert max-w-full p-5 rounded-t-lg overflow-x-hidden">
-            {#if step === 0}
-                <h2>Choose the language</h2>
-                <div class="flex flex-col items-start ml-2">
-                    <button class="hover:text-green-500 transition-colors" on:click={() => {
-                        changeLanguage('de')
-                        $DataBase.language='de'
-                        step = 1
-                    }}>• Deutsch</button>
-                    <button class="hover:text-green-500 transition-colors" on:click={() => {
-                        changeLanguage('en')
-                        $DataBase.language='en'
-                        step = 1
-                    }}>• English</button>
-                    <button class="hover:text-green-500 transition-colors" on:click={() => {
-                        changeLanguage('ko')
-                        $DataBase.language='ko'
-                        step = 1
-                    }}>• 한국어</button>
-                    <button class="hover:text-green-500 transition-colors" on:click={() => {
-                        changeLanguage('cn')
-                        $DataBase.language='cn'
-                        step = 1
-                    }}>• 中文</button>
-                </div>
+<div class="w-full h-full flex justify-center welcome-bg text-textcolor relative bg-gray-900">
+    <div class="w-2xl overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-hidden" class:justify-center={!start}>
+        {#if !start}
+            <div class="w-full justify-center flex mt-8 logo-animation" on:animationend={() => {
+                start = true
+            }}>
+                <img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm  mb-0">
+            </div>
+        {:else}
+            <div class="relative w-full flex-col bg-darkbg flex-grow mt-5 max-w-full p-5 rounded-t-lg overflow-x-hidden flex border-gray-800 border chat-animation overflow-y-auto">
+                {#if step === 0}
+                    <h2 class="animate-bounce">Choose your language</h2>
+                    <div class="flex flex-col items-start ml-2">
+                        <button class="hover:text-green-500 transition-colors" on:click={() => {
+                            changeLanguage('de')
+                            $DataBase.language='de'
+                            step = 1
+                        }}>• Deutsch</button>
+                        <button class="hover:text-green-500 transition-colors" on:click={() => {
+                            changeLanguage('en')
+                            $DataBase.language='en'
+                            step = 1
+                        }}>• English</button>
+                        <button class="hover:text-green-500 transition-colors" on:click={() => {
+                            changeLanguage('ko')
+                            $DataBase.language='ko'
+                            step = 1
+                        }}>• 한국어</button>
+                        <button class="hover:text-green-500 transition-colors" on:click={() => {
+                            changeLanguage('cn')
+                            $DataBase.language='cn'
+                            step = 1
+                        }}>• 中文</button>
+                    </div>
 
-            {:else if step === 1}
-                <h2>{language.setup.chooseProvider}</h2>
-                <div class="flex flex-col items-start ml-2">
-                    <button class="hover:text-green-500 transition-colors" on:click={() => {
-                        provider = 1
-                        step += 1
-                    }}>• {language.setup.openaikey}</button>
-                    <button class="hover:text-green-500 transition-colors"on:click={() => {
-                        provider = 2
-                        step += 1
-                    }}>• {language.setup.openaiProxy}</button>
-                    <button class="hover:text-green-500 transition-colors" on:click={() => {
-                        provider = 3
-                        step += 1
-                    }}>• {language.setup.setupmodelself}</button>
-                </div>
-            {:else if step === 2}
-                {#if provider === 1}
-                    <h2>{language.setup.openaikey}</h2>
-                    <div class="w-full ml-2">
-                        <span class="mb-2">API key</span>
-                        <TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
-                    </div>
-                    <span class="text-textcolor2">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
-                    <div class="flex flex-col items-start ml-2 mt-6">
-                        <button class="hover:text-green-500 transition-colors" on:click={() => {
-                            provider = 1
-                            step += 1
-                        }}>• {language.confirm}</button>
-                    </div>
-                {:else if provider === 2}
-                    <h2>{language.setup.openaiProxy}</h2>
-                    <div class="w-full ml-2">
-                        <span class="mb-2">OpenAI Reverse Proxy URL</span>
-                        <TextInput bind:value={$DataBase.forceReplaceUrl} placeholder="https://..." autocomplete="off"/>
-                    </div>
-                    <div class="w-full ml-2 mt-4">
-                        <span class="mb-2">API key (Used for passwords)</span>
-                        <TextInput bind:value={$DataBase.proxyKey} placeholder="Optional" autocomplete="off"/>
-                    </div>
-                    <div class="flex flex-col items-start ml-2 mt-6">
-                        <button class="hover:text-green-500 transition-colors" on:click={() => {
-                            provider = 1
-                            step += 1
-                        }}>• {language.confirm}</button>
-                    </div>
                 {:else}
-                    <h2>{language.setup.setupmodelself}</h2>
-                    <div class="w-full ml-2">
-                        <span>{language.setup.setupSelfHelp}</span>
-                    </div>
-                    <div class="flex flex-col items-start ml-2 mt-6">
-                        <button class="hover:text-green-500 transition-colors" on:click={() => {
-                            provider = 1
-                            step += 1
-                        }}>• {language.confirm}</button>
+                    <Chat name="Risu" message={language.setup.welcome} isLastMemory={false} />
+                    {#if step >= 2}
+                        <Chat name={$DataBase.username} message={$DataBase.username} isLastMemory={false} />
+                        <Chat name="Risu" message={language.setup.welcome2.replace('{username}', $DataBase.username)} isLastMemory={false} />
+                    {/if}
+                    {#if step === 2}
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                            <button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                                provider = 'openai'
+                                step = 3
+                            }}>
+                                <h1 class="text-2xl font-bold text-start">OpenAI</h1>
+                                <span class="mt-2 text-textcolor2 text-start">{language.setup.openAIProvider}</span>
+                            </button>
+                            <button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                                provider = 'openrouter'
+                                step = 3
+                            }}>
+                                <h1 class="text-2xl font-bold text-start">OpenRouter</h1>
+                                <span class="mt-2 text-textcolor2 text-start">{language.setup.openrouterProvider}</span>
+                            </button>
+                            <button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                                provider = 'horde'
+                                step = 3
+                            }}>
+                                <h1 class="text-2xl font-bold text-start">Horde</h1>
+                                <span class="mt-2 text-textcolor2 text-start">{language.setup.hordeProvider}</span>
+                            </button>
+                            <button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                                provider = 'later'
+                                step = 3
+                            }}>
+                                <h1 class="text-2xl font-bold text-start">Setup Later</h1>
+                                <span class="mt-2 text-textcolor2 text-start">{language.setup.setProviderLater}</span>
+                            </button>
+                        </div>
+                    {/if}
+                    {#if step === 3}
+                        <Chat name={$DataBase.username} message={provider} isLastMemory={false} />
+                        <Chat name="Risu" message={language.setup.welcome2.replace('{username}', $DataBase.username)} isLastMemory={false} />
+
+                    {/if}
+                    <div class="flex items-end mb-2 w-full mt-auto ">
+                        <input class="flex-grow text-textcolor p-2 min-w-0 bg-transparent input-text text-xl ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
+                            bind:value={input}
+                            on:keydown={(e) => {
+                                if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey) && !e.isComposing){
+                                    e.preventDefault()
+                                }
+                            }}
+                            style:height={'44px'}
+                        />
+                        <div on:click={send}
+                            class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
+                            <Send />
+                        </div>
                     </div>
                 {/if}
-            {:else if step === 3}
-                <h2>{language.setup.theme}</h2>
-                <div class="flex flex-col items-start ml-2">
-                    <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                        $DataBase.theme = ''
-                        step += 1
-                    }}><span>• Standard Risu ({language.setup.themeDescClassic})</span>
-                    <img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
-                    <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                        $DataBase.theme = 'waifu'
-                        step += 1
-                    }}><span>• Waifulike ({language.setup.themeDescWifulike})</span>
-                    <img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
-                    <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                        $DataBase.theme = 'waifuMobile'
-                        step += 1
-                    }}><span>• WaifuCut ({language.setup.themeDescWifuCut})</span>
-                    <img class="w-3/4 mt-2" src="/ss4.webp" alt="example"></button>
-                </div>
-            {:else if step === 4}
-                <h2>{language.setup.texttheme}</h2>
-                <div class="flex flex-col items-start ml-2">
-                    <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                        $DataBase.textTheme = 'standard'
-                        step += 1
-                    }}><span>• {language.classicRisu}</span>
-                        <div class="border-borderc py-2 px-8 not-prose">
-                            <p class="mt-2 mb-0 classic p-0"> Normal Text</p>
-                            <p class="mt-2 mb-0 classic-italic italic p-0">Italic Text</p>
-                            <p class="mt-2 mb-0 classic font-bold p-0">Bold Text</p>
+            </div>
+        {/if}
 
-                        </div>
-                    </button>
-                </div>
-                <div class="flex flex-col items-start ml-2 mt-2 mb-2">
-                    <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                        $DataBase.textTheme = 'highcontrast'
-                        step += 1
-                    }}><span>• {language.highcontrast}</span>
-                        <div class="border-borderc p-2 py-2 px-8  not-prose">
-                            <p class="mt-2 mb-0 classic p-0" style="color:#f8f8f2"> Normal Text</p>
-                            <p class="mt-2 mb-0 classic-italic italic p-0" style="color:#F1FA8C">Italic Text</p>
-                            <p class="mt-2 mb-0 classic font-bold p-0" style="color:#FFB86C">Bold Text</p>
-
-                        </div>
-                    </button>
-                </div>
-            {:else if step === 5}
-                <h2 class="mb-2">{language.setup.inputName}</h2>
-                <div class="w-full ml-2">
-                    <TextInput bind:value={$DataBase.username} />
-                </div>
-                <div class="flex flex-col items-start ml-2 mt-6">
-                    <button class="hover:text-green-500 transition-colors" on:click={async () => {
-                        $DataBase.forceReplaceUrl2 = $DataBase.forceReplaceUrl
-                        await addDefaultCharacters()
-                        $DataBase.didFirstSetup = true
-                        await sleep(2000)
-                        location.reload()
-                    }}>• {language.confirm}</button>
-                </div>
-            {/if}
-
-
-            {#if step > 0}
-
-                <button class="hover:text-green-500 transition-colors ml-2" on:click={() => {
-                    step = step - 1
-                }}>• Go Back</button>
-            {/if}
-        </div>
-
-    </article>
+    </div>
 </div>
 <style>
-    .classic{
-        color: #fafafa;
-    }
-    .classic-italic{
-        color: #8C8D93;
-    }
     .welcome-bg{
-        background-image: url("/public/welcome/welcomebg.png");
         background-size: cover;
+        position: relative;
     }
+
+    @keyframes darkness {
+        from {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0.2;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    .logo-animation{
+        animation: logo-animation 3s ease-in-out;
+        opacity: 0;
+    }
+    @keyframes logo-animation {
+        from {
+            opacity: 0;
+        }
+        80% {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    .chat-animation{
+        animation: chat-animation 3s ease-in-out;
+    }
+    @keyframes chat-animation {
+        from {
+            top: 100vh;
+        }
+        to {
+            top: 0;
+        }
+    }
+
 </style>
\ No newline at end of file