diff --git a/README.md b/README.md
index 33af93b..2764daa 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,14 @@
 
 ⭐️ Welcome to Extension | OS: AI at Your Fingertips, Anytime, Anywhere.
 
+## **Tired of the endless back-and-forth with ChatGPT, Claude, and other AI tools just to repeat the same task over and over?**
+
+You're not alone! I felt the same frustration, so I built a solution: **Extension | OS**—an open-source browser extension that makes AI accessible directly where you need it.
+
+Imagine this: you create a prompt like "Fix the grammar for this text," right-click, and job done—no more switching tabs, no more wasted time.
+
+![](./assets/showcase/demo.gif)
+
 > Imagine a world where every user has access to powerful models (LLMs and more) directly within their web browser. By integrating AI into everyday internet browsing, we can revolutionise the way people interact with information online, providing them with instant, intelligent assistance tailored to their needs.
 
 ## Pre-release on Google Chrome Store
@@ -104,9 +112,9 @@ Move it somewhere else ASAP:
 -  [ ] **Prompt Factory**: Add the option to select which LLM to use for each prompt.
 -  [ ] Remove all the silly comments, maybe one day....
 
-# Presentation Video
+# Youtube Video From the Hackathon
 
-[![Video Title](https://img.youtube.com/vi/dM1BOxVoebg/0.jpg)](https://www.youtube.com/watch?v=dM1BOxVoebg)
+[![Extesion | OS - San Francisco Presso](https://img.youtube.com/vi/dM1BOxVoebg/0.jpg)](https://www.youtube.com/watch?v=dM1BOxVoebg)
 
 ## Footage
 
@@ -135,6 +143,12 @@ Move it somewhere else ASAP:
 
 # Changelog
 
+### 0.0.20
+
+-  SelectionMenu: Now accessible on Reddit as well! (Consider prefixing all Tailwind classes for consistency)
+-  PromptSelector: Resolved all React warnings for a smoother experience
+-  Verified that pre-selection functions correctly (Thanks to E2E testing) 
+
 ### 0.0.19
 
 -  Added more instruction for ollama
diff --git a/assets/presentation.png b/assets/presentation.png
index 3910186..a62e456 100644
Binary files a/assets/presentation.png and b/assets/presentation.png differ
diff --git a/assets/showcase/demo.gif b/assets/showcase/demo.gif
new file mode 100644
index 0000000..19ec1a4
Binary files /dev/null and b/assets/showcase/demo.gif differ
diff --git a/background/init.ts b/background/init.ts
index dad1f6b..2c7d780 100644
--- a/background/init.ts
+++ b/background/init.ts
@@ -15,6 +15,11 @@ export interface IContextConfigItems {
 export async function initializeStorage() {
    //   https://unicode-table.com/
 
+   if (process.env.NODE_ENV === "development") {
+      //Useful to test a fresh-install
+      // storage.removeAll();
+   }
+
    const initState = await storage.get("contextMenuItems");
 
    if (initState) {
diff --git a/components/blocks/LabelWithTooltip.tsx b/components/blocks/LabelWithTooltip.tsx
index e874e0b..12a7bfb 100644
--- a/components/blocks/LabelWithTooltip.tsx
+++ b/components/blocks/LabelWithTooltip.tsx
@@ -10,13 +10,14 @@ interface LabelWithTooltipProps {
     labelText: string
     tooltipText: string
     sheetIncluded?: boolean
+    onClick?: () => void
 }
 
-export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText, sheetIncluded = false }: LabelWithTooltipProps) {
+export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText, sheetIncluded = false, onClick }: LabelWithTooltipProps) {
     return (
         <TooltipProvider delayDuration={200}>
             <Tooltip>
-                <TooltipTrigger className="flex flex-row gap-1 items-center">
+                <TooltipTrigger onClick={onClick ? onClick : undefined} className="flex flex-row gap-1 items-center">
 
                     <Label
                         className="text-sm text-gray-200"
diff --git a/contents/SelectionMenu.tsx b/contents/SelectionMenu.tsx
index da9a06b..c973000 100644
--- a/contents/SelectionMenu.tsx
+++ b/contents/SelectionMenu.tsx
@@ -169,7 +169,7 @@ const SelectionMenu = () => {
     return (
         <>
             {config.selectionMenu.display && menuPosition.x !== 0 && menuPosition.y !== 0 && ( // Check if .x and .y are not equal to 0
-                <div id="extension-os-selection-menu">
+                <div id="extension-os-selection-menu" className="w-max">
                     <Command className="rounded-2xl shadow-lg p-0 bg-[#161616] border border-[#505050] dark:border-[#fff] translate-x-1 translate-y-1" style={{
                         position: "relative",
                         top: `${menuPosition.y}px`,
@@ -182,7 +182,7 @@ const SelectionMenu = () => {
                             <CommandEmpty>No results found.</CommandEmpty>
                             <CommandGroup >
                                 {menuItems.map((item) => (
-                                    <CommandItem className="cursor-pointer opacity-50 hover:opacity-100 hover:bg-[#505050] font-bold m-1 rounded-[5px] py-1 text-[0.9rem]" key={item.id} value={item.title} onSelect={() => handleMenuItemClick(item)}>
+                                    <CommandItem className="cursor-pointer opacity-50 hover:opacity-100 hover:bg-[#505050] font-bold m-1 rounded-[5px] py-1 text-[16px]" key={item.id} value={item.title} onSelect={() => handleMenuItemClick(item)}>
                                         <span className="text-white">{item.title}</span>
                                     </CommandItem>
                                 ))}
diff --git a/globals.css b/globals.css
index 7e2c476..70ed573 100644
--- a/globals.css
+++ b/globals.css
@@ -1,3 +1,5 @@
+@import "plasmo-overlay.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/options/LlmSettings.tsx b/options/LlmSettings.tsx
index 403dbe5..64f591a 100644
--- a/options/LlmSettings.tsx
+++ b/options/LlmSettings.tsx
@@ -168,8 +168,10 @@ export const providersData = {
 }
 
 
+
+
 export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
-    const [llmModel, setLlmModel] = useStorage("llmModel", "")
+    const [llmModel, setLlmModel] = useStorage("llmModel", "llama-3.1-70b-versatile")
     const [llmProvider, setLlmProvider] = useStorage("llmProvider", "extension | OS")
     const [llmKeys, setLlmKeys] = useStorage("llmKeys", {})
 
@@ -178,24 +180,29 @@ export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
     //To auto-assign a model when the provider is changed.
     useEffect(() => {
         if (!hasRun.current) {
-            hasRun.current = true; // Set to true after the first run
+            /* Plasmo storage is undefined here, it will read only the default value! */
+            hasRun.current = true;
             return; // Skip the first cycle, so plasmo loads the useStorage correctly...
         }
 
         if (llmProvider) {
-            const selectedProvider = providersData.providers.find(
-                (provider) => provider.name === llmProvider
-            )
+            validateAndSetModel(llmProvider);
+        }
+    }, [llmProvider])
 
-            const isModelValid = selectedProvider?.models.includes(llmModel)
+    const validateAndSetModel = (providerName) => {
+        const selectedProvider = providersData.providers.find(
+            (provider) => provider.name === providerName
+        )
 
-            //We need to ensure the selectedProvider is valid
-            //E.g. We do change a name in the config -> From OpenAI to ClosedAI (pun intended..)
-            if (!isModelValid && selectedProvider) {
-                setLlmModel(selectedProvider.models[0])
-            }
+        const isModelValid = selectedProvider?.models.includes(llmModel)
+
+        // We need to ensure the selectedProvider is valid
+        // E.g. We do change a name in the config -> From OpenAI to ClosedAI (pun intended..)
+        if (!isModelValid && selectedProvider) {
+            setLlmModel(selectedProvider.models[0])
         }
-    }, [llmProvider])
+    }
 
     const handleKeyChange = (provider, key) => {
         setLlmKeys((prevKeys) => ({ ...prevKeys, [provider]: key }))
diff --git a/options/OptionsPromptFactory.tsx b/options/OptionsPromptFactory.tsx
index d225e81..26753c6 100644
--- a/options/OptionsPromptFactory.tsx
+++ b/options/OptionsPromptFactory.tsx
@@ -44,6 +44,8 @@ import { AutosizeTextarea } from "~components/shadcnui-expansions/AutosizeTextar
 
 export default function OptionsPromptFactory() {
     const [contextMenuItems, setContextMenuItems] = useState<IContextConfigItems[]>([]);
+    const [openFunctionalitySheet, setOpenFunctionalitySheet] = useState(false);
+    const [openContextSheet, setOpenContextSheet] = useState(false)
 
     useEffect(() => {
         async function getStorage() {
@@ -105,118 +107,114 @@ export default function OptionsPromptFactory() {
                 </CardHeader>
                 <CardContent>
                     {contextMenuItems ? (
-                        <div>
-                            {/* We exclude the separrator and the configuration button as it's not essential for the user to see at this stage */}
-                            {Object.keys(contextMenuItems).filter(key => !contextMenuItems[key].id.startsWith("separator") && contextMenuItems[key].id !== "configuration").map((key) => {
-                                return (
-                                    <div
-                                        key={key}
-                                        className="p-4 pt-6 mb-20 border-t-8 border-l-8 border-2 rounded-lg shadow-lg"
-                                    >
-                                        <div className="flex flex-row justify-between gap-4 px-4">
-                                            <div className="flex flex-col gap-1 w-3/4">
-                                                <LabelWithTooltip keyTooltip={key} labelText="Display Name" tooltipText="The name displayed in the menu visualised when the user clicks the right-click" />
-                                                <Input
-                                                    id={`title-${key}`}
-                                                    className="text-lg font-semibold mb-2"
-                                                    value={contextMenuItems[key].title}
-                                                    onChange={(e) => {
-                                                        handleChange(
-                                                            contextMenuItems[key].id,
-                                                            "title",
-                                                            e.target.value
-                                                        );
-                                                    }}
-                                                />
-                                            </div>
-                                            <div className="flex flex-col gap-1 w-1/4">
-                                                <Label
-                                                    className="text-sm text-gray-600"
-                                                    htmlFor={`context-${key}`}
-                                                >
-                                                    <Sheet>
-
-                                                        <SheetTrigger><LabelWithTooltip keyTooltip={key} labelText="Context" tooltipText="The context in which the item should display. Click for more info" sheetIncluded={true} /></SheetTrigger>
-                                                        <HelpSheetContext />
-                                                    </Sheet>
-
-                                                </Label>
-
-
-                                                <Select
-                                                    value={contextMenuItems[key].contexts.join(", ")}
-                                                    onValueChange={(value) =>
-                                                        handleChange(
-                                                            contextMenuItems[key].id,
-                                                            "contexts",
-                                                            value.split(", ")
-                                                        )
-                                                    }
-                                                >
-                                                    <SelectTrigger className="w-full">
-                                                        <SelectValue placeholder="Select contexts" />
-                                                    </SelectTrigger>
-                                                    <SelectContent>
-                                                        {chromeContextsParameters.map(({ key, display }) => (
-                                                            <SelectItem
-                                                                key={key}
-                                                                value={key}
-                                                            >
-                                                                {display}
-                                                            </SelectItem>
-                                                        ))}
-                                                    </SelectContent>
-                                                </Select>
-                                            </div>
-                                        </div>
+                        <>
+                            <div>
+                                {/* We exclude the separrator and the configuration button as it's not essential for the user to see at this stage */}
+                                {Object.keys(contextMenuItems).filter(key => !contextMenuItems[key].id.startsWith("separator") && contextMenuItems[key].id !== "configuration").map((key) => {
+                                    return (
+                                        <div
+                                            key={key}
+                                            className="p-4 pt-6 mb-20 border-t-8 border-l-8 border-2 rounded-lg shadow-lg"
+                                        >
+                                            <div className="flex flex-row justify-between gap-4 px-4">
+                                                <div className="flex flex-col gap-1 w-3/4">
+                                                    <LabelWithTooltip keyTooltip={key} labelText="Display Name" tooltipText="The name displayed in the menu visualised when the user clicks the right-click" />
+                                                    <Input
+                                                        id={`title-${key}`}
+                                                        className="text-lg font-semibold mb-2"
+                                                        value={contextMenuItems[key].title}
+                                                        onChange={(e) => {
+                                                            handleChange(
+                                                                contextMenuItems[key].id,
+                                                                "title",
+                                                                e.target.value
+                                                            );
+                                                        }}
+                                                    />
+                                                </div>
+                                                <div className="flex flex-col gap-1 w-1/4">
+                                                    <Label
+                                                        className="text-sm text-gray-600"
+                                                        htmlFor={`context-${key}`}
+                                                    >
+                                                        <LabelWithTooltip onClick={() => setOpenContextSheet(true)} keyTooltip={key} labelText="Context" tooltipText="The context in which the item should display. Click for more info" sheetIncluded={true} />
 
-                                        <div className="flex flex-col gap-5 pt-4 px-4 rounded-lg shadow-inner mb-4">
-                                            <div className="text-sm text-white">
-                                                <LabelWithTooltip keyTooltip={key} labelText="Prompt" tooltipText="The prompt for the GPT" />
-
-                                                <AutosizeTextarea
-                                                    id={`prompt-${key}`}
-                                                    className="mt-1 p-2 border rounded-md"
-                                                    value={contextMenuItems[key].prompt}
-                                                    onChange={(e) =>
-                                                        handleChange(
-                                                            contextMenuItems[key].id,
-                                                            "prompt",
-                                                            e.target.value
-                                                        )
-                                                    }
-                                                    placeholder="Enter your prompt here"
-                                                />
+
+                                                    </Label>
+
+
+                                                    <Select
+                                                        value={contextMenuItems[key].contexts.join(", ")}
+                                                        onValueChange={(value) =>
+                                                            handleChange(
+                                                                contextMenuItems[key].id,
+                                                                "contexts",
+                                                                value.split(", ")
+                                                            )
+                                                        }
+                                                    >
+                                                        <SelectTrigger className="w-full">
+                                                            <SelectValue placeholder="Select contexts" />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            {chromeContextsParameters.map(({ key, display }) => (
+                                                                <SelectItem
+                                                                    key={key}
+                                                                    value={key}
+                                                                >
+                                                                    {display}
+                                                                </SelectItem>
+                                                            ))}
+                                                        </SelectContent>
+                                                    </Select>
+                                                </div>
                                             </div>
-                                            <div className="flex flex-row gap-4 justify-between">
-                                                <div className="text-sm text-white w-full">
-                                                    <div className="flex flex-col gap-1 ">
-
-                                                        <Sheet>
-                                                            <SheetTrigger> <LabelWithTooltip keyTooltip={key} labelText="Functionality" tooltipText="The functionality after the prompt is executed. Click for more info" sheetIncluded={true} /></SheetTrigger>
-                                                            <HelpSheetFunctionality />
-                                                        </Sheet>
-
-                                                        <Select
-                                                            value={contextMenuItems[key].functionType}
-                                                            onValueChange={(value) =>
-                                                                handleChange(contextMenuItems[key].id, "functionType", value)
-                                                            }
-                                                        >
-                                                            <SelectTrigger className="w-full">
-                                                                <SelectValue placeholder="Select function type" />
-                                                            </SelectTrigger>
-                                                            <SelectContent>
-                                                                {functionalityParameters.map(({ key, display }) => (
-                                                                    <SelectItem key={key} value={key}>
-                                                                        {display}
-                                                                    </SelectItem>
-                                                                ))}
-                                                            </SelectContent>
-                                                        </Select>
-                                                    </div>
+
+                                            <div className="flex flex-col gap-5 pt-4 px-4 rounded-lg shadow-inner mb-4">
+                                                <div className="text-sm text-white">
+                                                    <LabelWithTooltip keyTooltip={key} labelText="Prompt" tooltipText="The prompt for the GPT" />
+
+                                                    <AutosizeTextarea
+                                                        id={`prompt-${key}`}
+                                                        className="mt-1 p-2 border rounded-md"
+                                                        value={contextMenuItems[key].prompt}
+                                                        onChange={(e) =>
+                                                            handleChange(
+                                                                contextMenuItems[key].id,
+                                                                "prompt",
+                                                                e.target.value
+                                                            )
+                                                        }
+                                                        placeholder="Enter your prompt here"
+                                                    />
                                                 </div>
-                                                {/* <div className="text-sm text-gray-600 w-1/2">
+                                                <div className="flex flex-row gap-4 justify-between">
+                                                    <div className="text-sm text-white w-full">
+                                                        <div className="flex flex-col gap-1 ">
+
+                                                            <LabelWithTooltip onClick={() => setOpenFunctionalitySheet(true)} keyTooltip={key} labelText="Functionality" tooltipText="The functionality after the prompt is executed. Click for more info" sheetIncluded={true} />
+
+
+                                                            <Select
+                                                                value={contextMenuItems[key].functionType}
+                                                                onValueChange={(value) =>
+                                                                    handleChange(contextMenuItems[key].id, "functionType", value)
+                                                                }
+                                                            >
+                                                                <SelectTrigger className="w-full">
+                                                                    <SelectValue placeholder="Select function type" />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {functionalityParameters.map(({ key, display }) => (
+                                                                        <SelectItem key={key} value={key}>
+                                                                            {display}
+                                                                        </SelectItem>
+                                                                    ))}
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </div>
+                                                    </div>
+                                                    {/* <div className="text-sm text-gray-600 w-1/2">
                                                     <div className="flex flex-col gap-1">
                                                         <LabelWithTooltip keyTooltip={key} labelText="ID" tooltipText="Unique Identification used internally" />
                                                         <p className="p-2 h-10 border rounded-md bg-white">
@@ -225,26 +223,34 @@ export default function OptionsPromptFactory() {
                                                     </div>
                                                 </div> */}
 
-                                                <div className="text-sm text-gray-600 pt-[1.85rem]">
-                                                    <Button className="w-[155px] bg-gradient-to-r from-violet-500 to-orange-500 text-white" onClick={() => handleSave()}>
-                                                        Save All
-                                                    </Button>
+                                                    <div className="text-sm text-gray-600 pt-[1.85rem]">
+                                                        <Button className="w-[155px] bg-gradient-to-r from-violet-500 to-orange-500 text-white" onClick={() => handleSave()}>
+                                                            Save All
+                                                        </Button>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                            {contextMenuItems[key].functionType === "callVoice-ExternalNumber" && (
-                                                <>
-                                                    <VapiSpecificConfiguration contextMenuItems={contextMenuItems[key]} handleChange={handleChange} />
-                                                </>
-                                            )}
+                                                {contextMenuItems[key].functionType === "callVoice-ExternalNumber" && (
+                                                    <>
+                                                        <VapiSpecificConfiguration contextMenuItems={contextMenuItems[key]} handleChange={handleChange} />
+                                                    </>
+                                                )}
 
 
 
+                                            </div>
                                         </div>
-                                    </div>
 
-                                );
-                            })}
-                        </div >
+                                    );
+                                })}
+                            </div >
+                            {/* Need to stay here to respect ARIA and the REACT Warnings. */}
+                            <Sheet open={openContextSheet} onOpenChange={setOpenContextSheet}>
+                                <HelpSheetContext />
+                            </Sheet>
+                            <Sheet open={openFunctionalitySheet} onOpenChange={setOpenFunctionalitySheet}>
+                                <HelpSheetFunctionality />
+                            </Sheet>
+                        </>
                     ) : (
                         <p>Loading...</p>
                     )}
diff --git a/options/promptFactory/HelpSheetContext.tsx b/options/promptFactory/HelpSheetContext.tsx
index 21585f7..41f7e6a 100644
--- a/options/promptFactory/HelpSheetContext.tsx
+++ b/options/promptFactory/HelpSheetContext.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/components/ui/sheet"
 import { ScrollArea } from "~components/ui/scroll-area";
 import { chromeContextsParameters } from "./parameters/chromeContextParameters";
+import React from "react";
 
 
 export default function HelpSheetContext() {
@@ -14,17 +15,15 @@ export default function HelpSheetContext() {
             <SheetHeader>
                 <SheetTitle>Context Explaination</SheetTitle>
                 <SheetDescription>
-                    <ScrollArea className="h-[100vh] pr-4">
-                        <div className="flex flex-col">
-                            {chromeContextsParameters.map((context) => (
-                                <>
-                                    <span className="bg-gray-800 rounded-lg p-2 w-fit text-white font-mono mb-2">{context.key.charAt(0).toUpperCase() + context.key.slice(1)}</span>
-                                    <span className="mb-5">{context.description.charAt(0).toUpperCase() + context.description.slice(1)}</span>
-                                </>
-                            ))}
-                        </div>
-                        <div className="mb-20"></div>
-                    </ScrollArea>
+                    <span className="flex flex-col">
+                        {chromeContextsParameters.map((context, index) => (
+                            <React.Fragment key={index}>
+                                <span className="bg-gray-800 rounded-lg p-2 w-fit text-white font-mono mb-2">{context.key.charAt(0).toUpperCase() + context.key.slice(1)}</span>
+                                <span className="mb-5">{context.description.charAt(0).toUpperCase() + context.description.slice(1)}</span>
+                            </React.Fragment>
+                        ))}
+                    </span>
+                    <span className="mb-20"></span>
                 </SheetDescription>
             </SheetHeader>
         </SheetContent>
diff --git a/options/promptFactory/HelpSheetFunctionality.tsx b/options/promptFactory/HelpSheetFunctionality.tsx
index f1acf67..166bb8b 100644
--- a/options/promptFactory/HelpSheetFunctionality.tsx
+++ b/options/promptFactory/HelpSheetFunctionality.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/components/ui/sheet"
 import { ScrollArea } from "~components/ui/scroll-area";
 import { functionalityParameters } from "./parameters/functionalityParameters";
+import React from "react";
 
 
 
@@ -15,17 +16,15 @@ export default function HelpSheetFunctionality() {
             <SheetHeader>
                 <SheetTitle>Functionality Explaination</SheetTitle>
                 <SheetDescription>
-                    <ScrollArea className="h-[100vh] pr-4">
-                        <div className="flex flex-col">
-                            {functionalityParameters.map((context) => (
-                                <>
-                                    <span className="bg-gray-800 rounded-lg p-2 w-fit text-white font-mono mb-2">{`${context.display.charAt(0).toUpperCase() + context.display.slice(1)}`}</span>
-                                    <span className="mb-5">{context.description.charAt(0).toUpperCase() + context.description.slice(1)}</span>
-                                </>
-                            ))}
-                        </div>
-                        <div className="mb-20"></div>
-                    </ScrollArea>
+                    <span className="flex flex-col">
+                        {functionalityParameters.map((context, index) => (
+                            <React.Fragment key={index}>
+                                <span className="bg-gray-800 rounded-lg p-2 w-fit text-white font-mono mb-2">{`${context.display.charAt(0).toUpperCase() + context.display.slice(1)}`}</span>
+                                <span className="mb-5">{context.description.charAt(0).toUpperCase() + context.description.slice(1)}</span>
+                            </React.Fragment>
+                        ))}
+                    </span>
+                    <span className="mb-20"></span>
                 </SheetDescription>
             </SheetHeader>
         </SheetContent>
diff --git a/package.json b/package.json
index 275a541..28013dc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
    "name": "extension-os",
    "displayName": "Extension-OS: Your AI Partner",
-   "version": "0.0.19",
+   "version": "0.0.20",
    "description": "AI at Your Fingertips, Anytime, Anywhere.",
    "author": "acubeddu87@gmail.com",
    "scripts": {
diff --git a/plasmo-overlay.css b/plasmo-overlay.css
index 32b9b99..ede32bb 100644
--- a/plasmo-overlay.css
+++ b/plasmo-overlay.css
@@ -16,3 +16,7 @@
    margin-top: 10px;
    color: black;
 }
+
+plasmo-csui {
+   visibility: visible !important;
+}
diff --git a/tests/llmSettings.spec.ts b/tests/llmSettings.spec.ts
index 932356c..2e27134 100644
--- a/tests/llmSettings.spec.ts
+++ b/tests/llmSettings.spec.ts
@@ -1,37 +1,44 @@
 import { test, expect } from "./fixtures";
 
+test("To have the default pre-selected", async ({ page }) => {
+   await page.waitForTimeout(300);
+   const pageTitle = await page.title();
+   await expect(pageTitle).toBe("Extension-OS: Your AI Partner");
+   await expect(page.locator("#llm-provider > span")).toHaveText(
+      "Extension | OS"
+   );
+
+   await expect(page.locator("#llm-model > span")).toHaveText(
+      "llama-3.1-70b-versatile"
+   );
+});
+
 test("be able to change provider and get the default selected", async ({
    page,
 }) => {
-   await page.waitForTimeout(1000);
+   await page.waitForTimeout(300);
    const pageTitle = await page.title();
    await expect(pageTitle).toBe("Extension-OS: Your AI Partner");
    await page.click("#llm-provider");
    await page.click('div[role="option"] >> text="Openai"');
-   const valueOne = await expect(page.locator("#llm-model > span")).toHaveText(
-      "gpt-4"
-   );
+   await expect(page.locator("#llm-model > span")).toHaveText("gpt-4");
 
    await page.click("#llm-provider");
    await page.click('div[role="option"] >> text="Together"');
    await expect(page.locator("#llm-model > span")).toHaveText(
       "Austism/chronos-hermes-13b"
    );
-
-   await page.waitForTimeout(1000);
 });
 
 test("be able to change provider and model and to save it", async ({
    page,
 }) => {
-   await page.waitForTimeout(1000);
+   await page.waitForTimeout(300);
    const pageTitle = await page.title();
    await expect(pageTitle).toBe("Extension-OS: Your AI Partner");
    await page.click("#llm-provider");
    await page.click('div[role="option"] >> text="Openai"');
-   const valueOne = await expect(page.locator("#llm-model > span")).toHaveText(
-      "gpt-4"
-   );
+   await expect(page.locator("#llm-model > span")).toHaveText("gpt-4");
 
    await page.click("#llm-provider");
    await page.click('div[role="option"] >> text="Together"');
@@ -45,6 +52,4 @@ test("be able to change provider and model and to save it", async ({
 
    await page.reload();
    await expect(page.locator("#llm-model > span")).toHaveText("Qwen/Qwen2-72B");
-
-   await page.waitForTimeout(1000);
 });