diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..2e8445dc75
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/**/node_modules
diff --git a/17-the-wild-oasis/final-1-after-setup/src/ui/FormRowVertical.jsx b/17-the-wild-oasis/final-1-after-setup/src/ui/FormRowVertical.jsx
new file mode 100644
index 0000000000..fd18506f05
--- /dev/null
+++ b/17-the-wild-oasis/final-1-after-setup/src/ui/FormRowVertical.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.2rem 0;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRowVertical({ label, error, children }) {
+  return (
+    <StyledFormRow>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRowVertical;
diff --git a/17-the-wild-oasis/final-2-after-supabase/src/ui/FormRowVertical.jsx b/17-the-wild-oasis/final-2-after-supabase/src/ui/FormRowVertical.jsx
new file mode 100644
index 0000000000..fd18506f05
--- /dev/null
+++ b/17-the-wild-oasis/final-2-after-supabase/src/ui/FormRowVertical.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.2rem 0;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRowVertical({ label, error, children }) {
+  return (
+    <StyledFormRow>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRowVertical;
diff --git a/17-the-wild-oasis/final-3-after-react-query/src/ui/FormRowVertical.jsx b/17-the-wild-oasis/final-3-after-react-query/src/ui/FormRowVertical.jsx
new file mode 100644
index 0000000000..fd18506f05
--- /dev/null
+++ b/17-the-wild-oasis/final-3-after-react-query/src/ui/FormRowVertical.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.2rem 0;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRowVertical({ label, error, children }) {
+  return (
+    <StyledFormRow>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRowVertical;
diff --git a/17-the-wild-oasis/final-4-after-advanced-patterns/src/ui/FormRowVertical.jsx b/17-the-wild-oasis/final-4-after-advanced-patterns/src/ui/FormRowVertical.jsx
new file mode 100644
index 0000000000..fd18506f05
--- /dev/null
+++ b/17-the-wild-oasis/final-4-after-advanced-patterns/src/ui/FormRowVertical.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.2rem 0;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRowVertical({ label, error, children }) {
+  return (
+    <StyledFormRow>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRowVertical;
diff --git a/17-the-wild-oasis/final-5-after-sort-filter-pagination/src/ui/FormRowVertical.jsx b/17-the-wild-oasis/final-5-after-sort-filter-pagination/src/ui/FormRowVertical.jsx
new file mode 100644
index 0000000000..fd18506f05
--- /dev/null
+++ b/17-the-wild-oasis/final-5-after-sort-filter-pagination/src/ui/FormRowVertical.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.2rem 0;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRowVertical({ label, error, children }) {
+  return (
+    <StyledFormRow>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRowVertical;
diff --git a/17-the-wild-oasis/starter/features/settings/UpdateSettingsForm.jsx b/17-the-wild-oasis/starter/features/settings/UpdateSettingsForm.jsx
index d883715799..4fed1525da 100644
--- a/17-the-wild-oasis/starter/features/settings/UpdateSettingsForm.jsx
+++ b/17-the-wild-oasis/starter/features/settings/UpdateSettingsForm.jsx
@@ -1,74 +1,25 @@
-import Spinner from 'ui/Spinner';
-import { useSettings } from 'features/settings/useSettings';
-import { useUpdateSetting } from 'features/settings/useUpdateSetting';
-
 import Form from 'ui/Form';
 import FormRow from 'ui/FormRow';
 import Input from 'ui/Input';
 
 function UpdateSettingsForm() {
-  const {
-    settings: {
-      minBookingLength,
-      maxBookingLength,
-      maxGuestsPerBooking,
-      breakfastPrice,
-    } = {},
-    isLoading,
-  } = useSettings();
-  const { mutate: updateSetting, isLoading: isUpdating } = useUpdateSetting();
-
-  // return <Spinner />;
-  if (isLoading) return <Spinner />;
-
-  function handleBlur(e, field) {
-    const { value } = e.target;
-
-    if (!value) return;
-    updateSetting({ [field]: value });
-  }
-
-  // This time we are using UNCONTROLLED fields, so we will NOT store state
-  return (
-    <Form>
-      <FormRow label='Minimum nights/booking'>
-        <Input
-          type='number'
-          defaultValue={minBookingLength}
-          onBlur={(e) => handleBlur(e, 'minBookingLength')}
-          disabled={isUpdating}
-          id='min-nights'
-        />
-      </FormRow>
-      <FormRow label='Maximum nights/booking'>
-        <Input
-          type='number'
-          defaultValue={maxBookingLength}
-          onBlur={(e) => handleBlur(e, 'maxBookingLength')}
-          disabled={isUpdating}
-          id='max-nights'
-        />
-      </FormRow>
-      <FormRow label='Maximum guests/booking'>
-        <Input
-          type='number'
-          defaultValue={maxGuestsPerBooking}
-          onBlur={(e) => handleBlur(e, 'maxGuestsPerBooking')}
-          disabled={isUpdating}
-          id='max-guests'
-        />
-      </FormRow>
-      <FormRow label='Breakfast price'>
-        <Input
-          type='number'
-          defaultValue={breakfastPrice}
-          onBlur={(e) => handleBlur(e, 'breakfastPrice')}
-          disabled={isUpdating}
-          id='breakfast-price'
-        />
-      </FormRow>
-    </Form>
-  );
+	// This time we are using UNCONTROLLED fields, so we will NOT store state
+	return (
+		<Form>
+			<FormRow label="Minimum nights/booking">
+				<Input type="number" id="min-nights" />
+			</FormRow>
+			<FormRow label="Maximum nights/booking">
+				<Input type="number" id="max-nights" />
+			</FormRow>
+			<FormRow label="Maximum guests/booking">
+				<Input type="number" id="max-guests" />
+			</FormRow>
+			<FormRow label="Breakfast price">
+				<Input type="number" id="breakfast-price" />
+			</FormRow>
+		</Form>
+	);
 }
 
 export default UpdateSettingsForm;
diff --git a/17-the-wild-oasis/starter/ui/FormRowVertical.jsx b/17-the-wild-oasis/starter/ui/FormRowVertical.jsx
new file mode 100644
index 0000000000..fd18506f05
--- /dev/null
+++ b/17-the-wild-oasis/starter/ui/FormRowVertical.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.2rem 0;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRowVertical({ label, error, children }) {
+  return (
+    <StyledFormRow>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRowVertical;