diff --git a/frontend/src/lib/api.js b/frontend/src/lib/api.js
index ef18fd4..e3d9c37 100644
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -65,15 +65,44 @@ async function request(endpoint, token, options = {}) {
 }
 
 export function createProject(token, { name, city_input }) {
+    if (!name.trim() || !city_input.trim()) {
+        console.error("Field cannot be empty")
+        return
+    }
     return request("/projects", token, {
         method: "POST",
         body: JSON.stringify({ name, city_input })
     })
 }
 
-export function updateProject(token, projectId, updates) {
-    return request(`/projects/${projectId}`, token, {
+export function updateResource(token, endpoint, updates) {
+    if (!updates || typeof updates !== "object" || Object.keys(updates).length === 0) {
+        console.error("No updates provided")
+        return
+    }
+
+    return request(endpoint, token, {
         method: "PATCH",
         body: JSON.stringify(updates)
     })
+}
+
+export function updateResourceField(token, endpoint, field, value, options = {}) {
+    const { trim = false, normalize = (currentValue) => currentValue } = options
+
+    if (value === null || value === undefined) {
+        return
+    }
+
+    let normalizedValue = normalize(value)
+
+    if (trim && typeof normalizedValue === "string") {
+        normalizedValue = normalizedValue.trim()
+    }
+
+    return updateResource(token, endpoint, { [field]: normalizedValue })
+}
+
+export function updateProject(token, projectId, updates) {
+    return updateResource(token, `/projects/${projectId}`, updates)
 }
\ No newline at end of file
diff --git a/frontend/src/screens/CreateScenario.jsx b/frontend/src/screens/CreateScenario.jsx
index ef8dd69..4235fdf 100644
--- a/frontend/src/screens/CreateScenario.jsx
+++ b/frontend/src/screens/CreateScenario.jsx
@@ -37,6 +37,19 @@ export default function CreateScenario() {
     const { token } = useContext(AuthContext)
     const { data: project, loading: loading, error: error } = useApi(`/api/projects/${projectId}`)
 
+    const [scenarioName, setScenarioName] = useState("Scenario Name")
+
+    async function handleNameSubmit(e) {
+        e?.preventDefault?.()
+
+        try {
+            await updateResourceField(token, `/projects/${projectId}/scenarios/${scenarioId}`, "name", scenarioName, { trim: true })
+        } catch (error) {
+            console.error("Error updating scenario name:", error)
+        }
+        console.log("Scenario name updated:", scenarioName)
+    }
+
     if (loading) return <p>Loading...</p>
     if (error) return <p>Something went wrong.</p>
 
@@ -62,9 +75,9 @@ export default function CreateScenario() {
                 </Breadcrumb>
                 <div className="flex justify-between items-center">
                     <form>
-                        <input id="projectName"
-                            value="Scenario Name"
-                            // onChange={(e) => setProjectName(e.target.value)}
+                        <input id="scenarioName"
+                            value={scenarioName}
+                            onChange={(e) => setScenarioName(e.target.value)}
                         />
                     </form>
                     <Link key={project.id} to={`/projects/${project.id}`}>
@@ -76,17 +89,9 @@ export default function CreateScenario() {
                 <div className="flex gap-4">
                     <FieldGroup>
                         <h3>System configuration</h3>
-                        {/* <form>
-                            <label htmlFor="amount">Module amount</label>
-                            <input id="amount"
-                                value="aAaaa"
-                                // onChange={(e) => setProjectLocation(e.target.value)}
-                            />
-                        </form> */}
-
                         <Field>
                             <FieldLabel htmlFor="amount">Module amount</FieldLabel>
-                            <Input id="amount" type="number" placeholder="e.g. 30" />
+                            <Input id="amount" type="number" placeholder="e.g. 100" />
                             <FieldDescription>
                                 Quantity of modules in the system
                             </FieldDescription>
@@ -99,10 +104,10 @@ export default function CreateScenario() {
                             </FieldDescription>
                         </Field>
                         <Field>
-                            <FieldLabel htmlFor="orientation">Orientation</FieldLabel>
+                            <FieldLabel htmlFor="orientation">Azimuth</FieldLabel>
                             <Input id="orientation" type="number" placeholder="e.g. 0" min="0" max="360"/>
                             <FieldDescription>
-                                The angle relative to the South, in degrees. South orientation is 0°
+                                Orientation relative to the South, in degrees. South orientation is 0°
                             </FieldDescription>
                         </Field>
                     </FieldGroup>
@@ -125,12 +130,6 @@ export default function CreateScenario() {
                         </Field>
                         <Table>
                             <TableCaption>Selected solar module</TableCaption>
-                            {/* <TableHeader>
-                                <TableRow>
-                                <TableHead className="text-right">Technology</TableHead>
-                                <TableHead className="text-left">Nominal power</TableHead>
-                                </TableRow>
-                            </TableHeader> */}
                             <TableBody>
                                 <TableRow key="0">
                                     <TableCell className="font-semibold">Technology</TableCell>
diff --git a/frontend/src/screens/Project.jsx b/frontend/src/screens/Project.jsx
index 02c79a9..845f724 100644
--- a/frontend/src/screens/Project.jsx
+++ b/frontend/src/screens/Project.jsx
@@ -14,20 +14,23 @@ import Header from "../components/Header";
 import ScenarioCard from "../components/ScenarioCard";
 
 import { AuthContext } from "../lib/AuthContext"
-import { useApi } from "../lib/api"
+import { useApi, updateResourceField } from "../lib/api"
 
 
 const Project = () => {
     const { projectId, scenarioId } = useParams();
     const { token } = useContext(AuthContext)
-    const { data: project, loading: projLoading, error: projError } = useApi(`/api/projects/${params.projectId}`)
-    const { data: scenarios, loading: scenLoading, error: scenError } = useApi(`/api/projects/${params.projectId}/scenarios`)
+    const { data: project, loading: projLoading, error: projError } = useApi(`/api/projects/${projectId}`)
+    const { data: scenarios, loading: scenLoading, error: scenError } = useApi(`/api/projects/${projectId}/scenarios`)
     
     const [projectName, setProjectName] = useState("")
     const [projectLocation, setProjectLocation] = useState("")
 
     useEffect(() => {
-        if (project) setProjectName(project.name)
+        if (project) {
+            setProjectName(project.name ?? "")
+            setProjectLocation(project.location ?? "")
+        }
     }, [project])
 
     useEffect(() => {
@@ -40,53 +43,23 @@ const Project = () => {
     async function handleNameSubmit(e) {
         e.preventDefault()
 
-        if (!projectName.trim()) {
-            console.error("Project name cannot be empty")
-            return
-        }
-
         try {
-            const response = await fetch(`/api/projects/${params.projectId}`, {
-                method: "PATCH",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${token}`
-                },
-                body: JSON.stringify({ name: projectName.trim() })
-            })
-
-            if (!response.ok) {
-                console.error("Failed to update project name")
-            }
+            await updateResourceField(token, `/projects/${projectId}`, "name", projectName, { trim: true })
         } catch (error) {
             console.error("Error updating project name:", error)
         }
+        console.log("Project name updated:", projectName)
     }
 
-        async function handleLocationSubmit(e) {
+    async function handleLocationSubmit(e) {
         e.preventDefault()
 
-        if (!projectLocation.trim()) {
-            console.error("Project location cannot be empty")
-            return
-        }
-
         try {
-            const response = await fetch(`/api/projects/${params.projectId}`, {
-                method: "PATCH",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${token}`
-                },
-                body: JSON.stringify({ location: projectLocation.trim() })
-            })
-
-            if (!response.ok) {
-                console.error("Failed to update project location")
-            }
+            await updateResourceField(token, `/projects/${projectId}`, "location", projectLocation, { trim: true })
         } catch (error) {
             console.error("Error updating project location:", error)
         }
+        console.log("Location updated:", projectLocation)
     }
 
     return (
diff --git a/frontend/src/screens/Scenario.jsx b/frontend/src/screens/Scenario.jsx
index f7266de..47c1dbd 100644
--- a/frontend/src/screens/Scenario.jsx
+++ b/frontend/src/screens/Scenario.jsx
@@ -1,3 +1,198 @@
+import { useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router"
+
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import Header from "../components/Header";
+import { Input } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+import { AuthContext } from "../lib/AuthContext"
+import { useApi, updateResourceField } from "../lib/api"
+
 export default function Scenario() {
-    return <h1>Scenario Screen</h1>;
-}
+    const { projectId, scenarioId } = useParams();
+    const { token } = useContext(AuthContext)
+    const { data: project, loading: projLoading, error: projError } = useApi(`/api/projects/${projectId}`)
+    const { data: scenario, loading: scenLoading, error: scenError } = useApi(`/api/projects/${projectId}/scenarios/${scenarioId}`)
+    
+    const [scenarioName, setScenarioName] = useState("")
+    const [moduleAmount, setModuleAmount] = useState("")
+    const [tilt, setTilt] = useState("")
+    const [orientation, setOrientation] = useState("")
+    const [manufacturer, setManufacturer] = useState("")
+    const [model, setModel] = useState("")
+
+    useEffect(() => {
+        if (scenario) {
+            setScenarioName(scenario.name ?? "")
+            setModuleAmount(scenario.module_amount ?? "")
+            setTilt(scenario.tilt ?? "")
+            setOrientation(scenario.azimuth ?? "")
+            setManufacturer(scenario.manufacturer ?? "")
+            setModel(scenario.model ?? "")
+        }
+    }, [scenario])
+
+    async function handleNameSubmit(e) {
+        e?.preventDefault?.()
+
+        try {
+            await updateResourceField(token, `/projects/${projectId}/scenarios/${scenarioId}`, "name", scenarioName, { trim: true })
+        } catch (error) {
+            console.error("Error updating scenario name:", error)
+        }
+        console.log("Scenario name updated:", scenarioName)
+    }
+
+    async function handleScenarioFieldUpdate(field, value, options = {}) {
+        try {
+            await updateResourceField(token, `/projects/${projectId}/scenarios/${scenarioId}`, field, value, options)
+        } catch (error) {
+            console.error(`Error updating scenario ${field}:`, error)
+        }
+    }
+
+    if (projLoading || scenLoading) return <p>Loading...</p>
+    if (projError || scenError) return <p>Something went wrong.</p>
+
+    return (
+    <>
+        <Header />
+        <main className="p-8">
+            <header className="flex-col mb-8">
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        <BreadcrumbItem>
+                        <BreadcrumbLink href="/projects">Your projects</BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                        <BreadcrumbLink href={`/projects/${project.id}`}>{project.name}</BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                        <BreadcrumbPage>{scenario.name}</BreadcrumbPage>
+                        </BreadcrumbItem>
+                    </BreadcrumbList>
+                </Breadcrumb>
+                <div className="flex justify-between items-center">
+                    <form onSubmit={handleNameSubmit}>
+                        <input id="scenarioName"
+                            value={scenarioName}
+                            onBlur={() => handleNameSubmit()}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    handleNameSubmit(e)
+                                }
+                            }}
+                            onChange={(e) => setScenarioName(e.target.value)}
+                        />
+                    </form>
+                    <Link key={project.id} to={`/projects/${project.id}`}>
+                        <Button>View report</Button>    
+                    </Link>
+                </div>
+            </header>
+            <div className="main-content">
+                <div className="flex gap-4">
+                    <FieldGroup>
+                        <h3>System configuration</h3>
+                        <Field>
+                            <FieldLabel htmlFor="amount">Module amount</FieldLabel>
+                            <Input id="amount" type="number" value={moduleAmount}
+                            onBlur={() => handleScenarioFieldUpdate("module_amount", Number(moduleAmount))}
+                            onChange={(e) => setModuleAmount(e.target.value)} />
+                            <FieldDescription>
+                                Quantity of modules in the system
+                            </FieldDescription>
+                        </Field>
+                        <Field>
+                            <FieldLabel htmlFor="tilt">Tilt</FieldLabel>
+                            <Input id="tilt" type="number" value={tilt} 
+                            onBlur={() => handleScenarioFieldUpdate("tilt", Number(tilt))}
+                            onChange={(e) => setTilt(e.target.value)} 
+                            placeholder="e.g. 30" min="0" max="360"/>
+                            <FieldDescription>
+                                The angle towards the Sun, in degrees (between 0° and 360°)
+                            </FieldDescription>
+                        </Field>
+                        <Field>
+                            <FieldLabel htmlFor="orientation">Azimuth</FieldLabel>
+                            <Input id="orientation" type="number" value={orientation}
+                            onBlur={() => handleScenarioFieldUpdate("azimuth", Number(orientation))}
+                            onChange={(e) => setOrientation(e.target.value)} placeholder="e.g. 0" min="0" max="360"/>
+                            <FieldDescription>
+                                Orientation relative to the South, in degrees. South orientation is 0°
+                            </FieldDescription>
+                        </Field>
+                    </FieldGroup>
+                    <div className="module w-full">
+                        <FieldGroup>
+                        <h3>Solar module</h3>
+                        <Field>
+                            <FieldLabel htmlFor="manufacturer">Manufacturer</FieldLabel>
+                            <Input id="manufacturer" type="text" placeholder="e.g. 30"/>
+                            <FieldDescription>
+                                The company that produced the solar module
+                            </FieldDescription>
+                        </Field>
+                        <Field>
+                            <FieldLabel htmlFor="model">Model</FieldLabel>
+                            <Input id="model" type="text" placeholder="e.g. 0"/>
+                            <FieldDescription>
+                                The model name of the solar module
+                            </FieldDescription>
+                        </Field>
+                        <Table>
+                            <TableCaption>Selected solar module</TableCaption>
+                            <TableBody>
+                                <TableRow key="0">
+                                    <TableCell className="font-semibold">Technology</TableCell>
+                                    <TableCell>Mono c-Si</TableCell>
+                                </TableRow>
+                                <TableRow key="1">
+                                    <TableCell className="font-semibold">Nominal power</TableCell>
+                                    <TableCell>400 Wp</TableCell>
+                                </TableRow>
+                                <TableRow key="2">
+                                    <TableCell className="font-semibold">Area</TableCell>
+                                    <TableCell>1.6 m²</TableCell>
+                                </TableRow>
+                                <TableRow key="3">
+                                    <TableCell className="font-semibold">Temperature coefficient</TableCell>
+                                    <TableCell>-0.48%/°C</TableCell>
+                                </TableRow>
+
+                            </TableBody>
+                        </Table>
+                        </FieldGroup>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </>
+   )
+}
\ No newline at end of file