diff --git a/whitewash/biome.json b/whitewash/biome.json
index 2fbf5e9..b3da5a9 100644
--- a/whitewash/biome.json
+++ b/whitewash/biome.json
@@ -20,6 +20,9 @@
 			"recommended": true,
 			"suspicious": {
 				"noUnknownAtRules": "off"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "off"
 			}
 		},
 		"domains": {
diff --git a/whitewash/src/app/components/chat/OddyChat.tsx b/whitewash/src/app/components/chat/OddyChat.tsx
index 97a77dc..cb71ac8 100644
--- a/whitewash/src/app/components/chat/OddyChat.tsx
+++ b/whitewash/src/app/components/chat/OddyChat.tsx
@@ -1,55 +1,100 @@
 "use client"
 
-import { useStateArray } from "@/hooks/useStateArray"
+import Image, { type StaticImageData } from "next/image"
+import oddy from "@/assets/images/oddy.png"
+import frog from "@/assets/images/frog.png"
+import prideFrog from "@/assets/images/pride-froggy.png"
+import styles from "../oddy/Oddy.module.css"
 import { useEffect, useRef, useState } from "react"
+import { useStateArray } from "@/hooks/useStateArray"
 
 type ChatMsg = {
 	id: string
-	role: "user" | "oddy"
-	message: string
+	role: "user" | "assistant"
+	content: string
 }
 
-type OddyProps = {
+type OddyChatProps = {
+	isFrog?: boolean
+	isPride?: boolean
 	previousMessages?: ChatMsg[]
 }
 
-export const OddyChat = ({ previousMessages }: OddyProps) => {
+export const OddyChat = ({
+	isFrog = false,
+	isPride = false,
+	previousMessages,
+}: OddyChatProps) => {
+	const [avatar, setAvatar] = useState<StaticImageData>(oddy)
+	const [name, setName] = useState<"Froggy" | "Oddy">(
+		isFrog ? "Froggy" : "Oddy",
+	)
 	previousMessages = previousMessages !== undefined ? [...previousMessages] : []
 
 	const [messages, addMessage] = useStateArray<ChatMsg>(previousMessages)
 	const [input, setInput] = useState("")
-	const [agent, setAgent] = useState<"oddy" | "froggy">("froggy")
-	const [isPride, setIsPride] = useState(false)
 	const ws = useRef<WebSocket | null>(null)
 
+	const messagesEndRef = useRef(null)
+
+	const scrollToBottom = () => {
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+	}
+	useEffect(() => {
+		requestAnimationFrame(() => {
+			messagesEndRef.current?.scrollIntoView({
+				behavior: "smooth",
+				block: "end",
+			})
+		})
+	}, [])
+
+	useEffect(() => {
+		scrollToBottom()
+	}, [scrollToBottom])
+
+	// pick correct avatar on mount or when props change
 	useEffect(() => {
+		if (isFrog) {
+			setAvatar(isPride ? prideFrog : frog)
+			setName("Froggy")
+		} else {
+			setAvatar(oddy)
+			setName("Oddy")
+		}
+	}, [isFrog, isPride])
+
+	// connect websocket
+	useEffect(() => {
+		const agent = isFrog ? "froggy" : "oddy"
 		const url = new URL("ws://localhost:4001")
 		url.searchParams.set("agent", agent)
 		url.searchParams.set("isPride", String(isPride))
+		url.searchParams.set(
+			"prevMessages",
+			JSON.stringify(
+				previousMessages.map((p) => {
+					return { role: p.role, content: p.content }
+				}),
+			),
+		)
 
 		ws.current?.close()
 		ws.current = new WebSocket(url.toString())
 
-		ws.current.onopen = () => {
-			console.log("✅ Connected to WebSocket")
-		}
-
 		ws.current.onmessage = (event) => {
-			if (event.data === "Successfully connected") return
+			if (event.data === "Successfully connected")
+				return () => ws.current?.close()
 			addMessage({
 				id: crypto.randomUUID(),
-				role: "oddy",
-				message: String(event.data),
+				role: "assistant",
+				content: String(event.data),
 			})
+			scrollToBottom()
 		}
 
-		ws.current.onerror = (err) => console.error("❌ WebSocket error:", err)
-		ws.current.onclose = () => console.log("🔌 WebSocket closed")
-
-		return () => {
-			ws.current?.close()
-		}
-	}, [agent, isPride, addMessage])
+		return () => ws.current?.close()
+	}, [isFrog, isPride, addMessage, previousMessages.map, ])
 
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault()
@@ -59,7 +104,7 @@ export const OddyChat = ({ previousMessages }: OddyProps) => {
 		const msg: ChatMsg = {
 			id: crypto.randomUUID(),
 			role: "user",
-			message: trimmed,
+			content: trimmed,
 		}
 		addMessage(msg)
 		ws.current?.send(trimmed)
@@ -67,61 +112,59 @@ export const OddyChat = ({ previousMessages }: OddyProps) => {
 	}
 
 	return (
-		<div className="fixed bottom-6 right-6 z-50 w-[min(90vw,420px)]">
-			<div className="mb-2 flex items-center gap-3">
-				<select
-					className="border rounded px-2 py-1 text-sm"
-					value={agent}
-					onChange={(e) => setAgent(e.target.value as "oddy" | "froggy")}
-				>
-					<option value="oddy">Oddy</option>
-					<option value="froggy">Froggy</option>
-				</select>
-
-				<label className="text-sm flex items-center gap-2">
+		<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 bg-rema-secondary-lightblue rounded-3xl p-5 backdrop-blur">
+			<Image
+				src={avatar}
+				alt={`${name} avatar`}
+				width={80}
+				height={80}
+				className={`rounded-full ${isFrog ? styles.spinSlow : ""}`}
+			/>
+
+			<div className="w-[min(90vw,420px)] flex flex-col items-end">
+				<div className="max-h-[50vh] min-h-100 overflow-auto p-3 space-y-2 w-full bg-white rounded-lg">
+					{previousMessages.length === 0 ? (
+						<p className="max-w-[85%] rounded px-3 py-2 bg-gray-100 text-gray-900 self-start">
+							{!isFrog
+								? "Heisann sveisann, jeg er Odd Reitan, men du kan kalle meg Oddy!"
+								: "Ribbit!"}
+						</p>
+					) : (
+						""
+					)}
+					{messages
+						.filter((v) => v.id !== "0")
+						.map((m) => (
+							<p
+								key={m.id}
+								className={`max-w-[85%] rounded px-3 py-2 ${
+									m.role === "assistant"
+										? "bg-gray-100 text-gray-900 self-start"
+										: "bg-blue-600 text-white self-end ml-auto"
+								}`}
+							>
+								{m.content}
+							</p>
+						))}
+					<div ref={messagesEndRef} />
+				</div>
+
+				<form onSubmit={handleSubmit} className="mt-2 flex gap-2 w-full">
 					<input
-						type="checkbox"
-						checked={isPride}
-						onChange={(e) => setIsPride(e.target.checked)}
+						className="border rounded p-2 flex-1 bg-white border-rema-secondary-darkblue"
+						value={input}
+						onFocus={scrollToBottom}
+						onChange={(e) => setInput(e.target.value)}
+						placeholder="Skriv meldingen din…"
 					/>
-					Pride
-				</label>
-			</div>
-
-			<div className="bg-white/90 backdrop-blur rounded-lg shadow max-h-[50vh] overflow-auto p-3 space-y-2">
-				{messages.map((m) => (
-					<p
-						key={m.id}
-						className={`max-w-[85%] rounded px-3 py-2 ${
-							m.role === "oddy"
-								? "bg-gray-100 text-gray-900 self-start"
-								: "bg-blue-600 text-white self-end ml-auto"
-						}`}
+					<button
+						type="submit"
+						className="bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 transition"
 					>
-						{m.message}
-					</p>
-				))}
-				{messages.length === 0 && (
-					<p className="text-gray-500 text-sm">
-						Si hei til {agent === "froggy" ? "Froggy 🐸" : "Oddy"}…
-					</p>
-				)}
+						Send
+					</button>
+				</form>
 			</div>
-
-			<form onSubmit={handleSubmit} className="mt-2 flex gap-2">
-				<input
-					className="border rounded p-2 flex-1"
-					value={input}
-					onChange={(e) => setInput(e.target.value)}
-					placeholder="Skriv meldingen din…"
-				/>
-				<button
-					type="submit"
-					className="bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 transition"
-				>
-					Send
-				</button>
-			</form>
 		</div>
 	)
 }
diff --git a/whitewash/src/app/components/oddy/Oddy.tsx b/whitewash/src/app/components/oddy/Oddy.tsx
index 54b63de..0414cba 100644
--- a/whitewash/src/app/components/oddy/Oddy.tsx
+++ b/whitewash/src/app/components/oddy/Oddy.tsx
@@ -5,62 +5,52 @@ import oddy from "@/assets/images/oddy.png"
 import frog from "@/assets/images/frog.png"
 import prideFrog from "@/assets/images/pride-froggy.png"
 import styles from "./Oddy.module.css"
-import * as React from "react"
-import Popover from "@mui/material/Popover"
-import Typography from "@mui/material/Typography"
-import { useEffect, useState } from "react"
 
-export const Oddy = ({
-	message = "Hei! Jeg er Oddy, kan jeg hjelpe deg med noe?",
-}: {
+type OddyProps = {
 	message?: string
-}) => {
-	const [isFrog, setIsFrog] = useState(false)
-	const [isPride, setIsPride] = useState(false)
-	const [avatar, setAvatar] = useState<StaticImageData>(oddy)
-	const [name, setName] = useState<"Froggy" | "Oddy">("Oddy")
+	onClick?: () => void
+	isFrog?: boolean
+	isPride?: boolean
+}
 
-	useEffect(() => {
-		const shouldBeFrog = Math.random() < 1 / 20
-		setIsFrog(shouldBeFrog)
-		if (shouldBeFrog) {
-			const shouldBePride = Math.random() < 1 / 10
-			setIsPride(shouldBePride)
-			setAvatar(shouldBePride ? prideFrog : frog)
-			setName("Froggy")
-		}
-	}, [])
+export const Oddy = ({
+	message = "Hei! Jeg er Oddy, kan jeg hjelpe deg med noe?",
+	onClick,
+	isFrog = false,
+	isPride = false,
+}: OddyProps) => {
+	let avatar: StaticImageData
+	let name: "Froggy" | "Oddy"
 
-	const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
-	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorEl(event.currentTarget)
+	if (isFrog) {
+		avatar = isPride ? prideFrog : frog
+		name = "Froggy"
+	} else {
+		avatar = oddy
+		name = "Oddy"
 	}
-	const handleClose = () => setAnchorEl(null)
-	const open = Boolean(anchorEl)
 
 	return (
 		<div
 			id="chat-container"
 			className="flex flex-col items-end gap-3 z-50 fixed bottom-6 right-6"
 		>
+			<button type="button" onClick={onClick} className="cursor-pointer">
+				<Image
+					src={avatar}
+					alt={`${name} avatar`}
+					width={80}
+					height={80}
+					className={`rounded-full ${isFrog ? styles.spinSlow : ""}`}
+				/>
+			</button>
+
 			<button
-				id="open-chat-button"
-				onClick={handleClick}
+				id="oddy_container"
+				className="relative px-4 py-3 rounded-lg cursor-pointer"
 				type="button"
-				className="bg-white rounded text-black p-3 shadow hover:bg-gray-100 transition"
+				onClick={onClick}
 			>
-				Ask {name}
-			</button>
-
-			<Image
-				src={avatar}
-				alt={`${name} avatar`}
-				width={80}
-				height={80}
-				className={`rounded-full ${isFrog ? styles.spinSlow : ""}`}
-			/>
-
-			<div id="oddy_container" className="relative px-4 py-3 rounded-lg">
 				<div className="relative bg-gray-200 px-4 py-3 rounded-lg text-gray-900 shadow">
 					{isFrog
 						? message.replace(
@@ -70,24 +60,7 @@ export const Oddy = ({
 						: message}
 					<div className="absolute top-[-8px] right-4 w-0 h-0 border-l-8 border-r-8 border-b-8 border-transparent border-b-gray-200" />
 				</div>
-			</div>
-
-			<Popover
-				className="mt-6"
-				open={open}
-				onClose={handleClose}
-				anchorEl={anchorEl}
-				anchorOrigin={{
-					vertical: "top",
-					horizontal: "right",
-				}}
-				transformOrigin={{
-					vertical: "bottom",
-					horizontal: "right",
-				}}
-			>
-				<Typography sx={{ p: 2 }}>Bruh momento.</Typography>
-			</Popover>
+			</button>
 		</div>
 	)
 }
diff --git a/whitewash/src/app/page.tsx b/whitewash/src/app/page.tsx
index 9c3920c..ecce954 100644
--- a/whitewash/src/app/page.tsx
+++ b/whitewash/src/app/page.tsx
@@ -1,10 +1,50 @@
+"use client"
+
+import { useEffect, useState } from "react"
 import { Header } from "@/components/header/header"
-import { Oddy } from "@/components/oddy/Oddy"
+import { OddyChat } from "./components/chat/OddyChat"
+import { Oddy } from "./components/oddy/Oddy"
+import Popover from "@mui/material/Popover"
 import banner from "./assets/images/promo-banner.avif"
 import oddyImg from "./assets/images/reitan-i-butikk.png"
 import Image from "next/image"
 
 export default function Home() {
+	const [chattingWithOddy, setChattingWithOddy] = useState(false)
+
+	const [isFrog, setIsFrog] = useState(false)
+	const [isPride, setIsPride] = useState(false)
+
+	useEffect(() => {
+		const shouldBeFrog = Math.random() < 1 / 15
+		const shouldBePride = shouldBeFrog && Math.random() < 1 / 8
+		setIsFrog(shouldBeFrog)
+		setIsPride(shouldBePride)
+	}, [])
+
+	const handleToggleChat = () => setChattingWithOddy((v) => !v)
+
+	const oddyView = chattingWithOddy ? (
+		<Popover
+			className="mt-6"
+			open={true}
+			onClose={() => setChattingWithOddy((v) => !v)}
+			// anchorEl={}
+			anchorOrigin={{
+				vertical: "top",
+				horizontal: "right",
+			}}
+			transformOrigin={{
+				vertical: "bottom",
+				horizontal: "right",
+			}}
+		>
+			<OddyChat isFrog={isFrog} isPride={isPride} />
+		</Popover>
+	) : (
+		<Oddy isFrog={isFrog} isPride={isPride} onClick={handleToggleChat} />
+	)
+
 	return (
 		<div>
 			<Header />
@@ -16,7 +56,7 @@ export default function Home() {
 					src={oddyImg}
 					alt="Oddy our supreme leader"
 					className="rounded-lg"
-				/>
+          />
 				<div className="bg-white rounded-lg flex items-center justify-center p-20">
 					<p className="mt-4 text-center text-lg italic">
 						"Rema‑1000 er som... som... wow! Billige priser, så... så god smak,
@@ -24,8 +64,7 @@ export default function Home() {
 					</p>
 				</div>
 			</div>
-
-			<Oddy />
+      {oddyView}
 		</div>
 	)
 }
diff --git a/whitewash/src/app/search/page.tsx b/whitewash/src/app/search/page.tsx
index bb213b6..fb9dcd4 100644
--- a/whitewash/src/app/search/page.tsx
+++ b/whitewash/src/app/search/page.tsx
@@ -1,10 +1,12 @@
 "use client"
 
+import { OddyChat } from "@/components/chat/OddyChat"
 import { Header } from "@/components/header/header"
 import { Oddy } from "@/components/oddy/Oddy"
-import { useQuery } from "@tanstack/react-query"
 import { Product } from "@/components/shopping-cart/Product"
+import { useQuery } from "@tanstack/react-query"
 import { useSearchParams } from "next/navigation"
+import { useState } from "react"
 
 export type ProductItem = {
 	productId: number
@@ -20,6 +22,7 @@ export type ProductItem = {
 }
 
 export default function SearchPage() {
+	const [chattingWithOddy, setChattingWithOddy] = useState(false)
 	const searchParams = useSearchParams()
 	const search = searchParams.get("a")
 	const url = `http://localhost:4000/api/findProducts?search=`
@@ -33,13 +36,13 @@ export default function SearchPage() {
 		},
 	})
 
+	const oddyMessage = `Jeg har søkt på ${search} på nettsiden din, og fått opp disse resultatene (i json format): ${JSON.stringify(data)}. Gi meg en anbefaling på hva jeg burde kjøpe basert på CO2 fotavtrykket til varene, pris og sunnhet. Til senere svar, vennligst bare referer til disse varene og baser svar på resultatene`
 	const { data: oddyResponse } = useQuery({
 		queryKey: ["Oddy", "oddySearch", JSON.stringify(data)],
 		queryFn: async () => {
 			const url = "http://localhost:4000/api/oddy?inMessage="
 
-			const oddyMessage = `Jeg har søkt på ${search} på nettsiden din, og fått opp disse resultatene (i json format): ${JSON.stringify(data)}. Gi meg en anbefaling på hva jeg burde kjøpe basert på CO2 fotavtrykket til varene, pris og sunnhet`
-			console.log(oddyMessage)
+			// console.log(oddyMessage)
 
 			const res = await fetch(url + oddyMessage)
 
@@ -48,6 +51,33 @@ export default function SearchPage() {
 		enabled: !!data,
 	})
 
+	const handleToggleChat = () => setChattingWithOddy((v) => !v)
+
+	const oddyView = chattingWithOddy ? (
+		<OddyChat
+			previousMessages={
+				oddyResponse
+					? [
+							{
+								id: "0",
+								role: "user",
+								content: oddyMessage,
+							},
+							{
+								id: crypto.randomUUID(),
+								role: "assistant",
+								content: oddyResponse.message,
+							},
+						]
+					: []
+			}
+		/>
+	) : (
+		oddyResponse && (
+			<Oddy message={oddyResponse.message} onClick={handleToggleChat} />
+		)
+	)
+
 	return (
 		<div>
 			<Header />
@@ -67,7 +97,7 @@ export default function SearchPage() {
 						{error ? "En feil oppstod. Vennligst prøv igjen" : ""}
 					</div>
 				)}
-				{oddyResponse && <Oddy message={oddyResponse.message} />}
+				{oddyView}
 			</div>
 		</div>
 	)