diff --git a/app/globals.css b/app/globals.css
index 875c01e..bd6213e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
+@tailwind utilities;
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 73ddc4a..52de684 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
-import Weather from '../components/Weather'
+import LocationSearch from '@/components/LocationSearch';
+import WeatherNow from '../components/WeatherNow'
 
 const location = {
   latitude: '55.645519',
@@ -8,8 +9,11 @@ const location = {
 export default function Home() {
   return (
     <main>
-      <h1>The weather in Sluseholmen for the next 3 days</h1>
-      <Weather location={location}/>
+      <div className='block mx-auto max-w-4xl'>
+        <LocationSearch />
+        <h1>The weather in Sluseholmen for the next 3 days</h1>
+        <WeatherNow location={location}/>
+      </div>
     </main>
   );
 }
\ No newline at end of file
diff --git a/components/LocationSearch.tsx b/components/LocationSearch.tsx
new file mode 100644
index 0000000..33fbda2
--- /dev/null
+++ b/components/LocationSearch.tsx
@@ -0,0 +1,7 @@
+
+export default async function LocationSearch() {
+
+  return (
+    <h1>yes yes yes</h1>
+  );
+}
diff --git a/components/Temperature.tsx b/components/Temperature.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/WeatherNow.tsx b/components/WeatherNow.tsx
new file mode 100644
index 0000000..ef11ea1
--- /dev/null
+++ b/components/WeatherNow.tsx
@@ -0,0 +1,81 @@
+import { error } from "console";
+
+interface Forecast {
+  coord: {
+    lon: number;
+    lat: number;
+  };
+  weather: {
+    id: number;
+    main: string;
+    description: string;
+    icon: string;
+  }[];
+  base: string;
+  main: {
+    temp: number;
+    feels_like: number;
+    temp_min: number;
+    temp_max: number;
+    pressure: number;
+    humidity: number;
+    sea_level: number;
+    grnd_level: number;
+  };
+  visibility: number;
+  wind: {
+    speed: number;
+    deg: number;
+    gust: number;
+  };
+  rain: {
+    onehour: number;
+  };
+  clouds: {
+    all: number;
+  };
+  dt: number;
+  sys: {
+    type: number;
+    id: number;
+    country: string;
+    sunrise: number;
+    sunset: number;
+  };
+  timezone: number;
+  id: number;
+  name: string;
+  cod: number;
+}
+
+interface LocationType {
+  latitude: string;
+  longtitude: string;
+}
+
+async function getForecast(location: LocationType): Promise<Forecast> {
+
+  const { latitude, longtitude } = location;
+  const appId = "546911d860cb81f16585f7973b394b70";
+  const res = await fetch(
+    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`
+  );
+  if (!res.ok) {
+    throw new Error(`This is not great ${error}`);
+  }
+  return res.json();
+}
+
+export default async function WeatherNow(props: { location: LocationType }) {
+  const kelvin = 273.15;
+  const location = props.location;
+  const weather = await getForecast(location);
+  const temp = weather.main.temp - kelvin;
+  return (
+    <main>
+      <h1>Forecast</h1>
+      <p>{temp}</p>
+      <p></p>
+    </main>
+  );
+}