diff --git a/ui/src/client/api.ts b/ui/src/client/api.ts
index e3426fd..f61e190 100644
--- a/ui/src/client/api.ts
+++ b/ui/src/client/api.ts
@@ -32,12 +32,12 @@ export class AccuribetAPI {
 
  async getPredictedGames(
    date: string,
-   model: string
+   model_name: string
  ) {
    const res = await this.client.get('/model/history', {
       params: {
         date,
-        model
+        model_name
       }
    })
    return res.data;
diff --git a/ui/src/interface.ts b/ui/src/interface.ts
index de1a079..e2b98da 100644
--- a/ui/src/interface.ts
+++ b/ui/src/interface.ts
@@ -11,6 +11,25 @@ export interface Game {
   odds: Odds[];
 }
 
+export interface HistoryGame {
+  game_id: string;
+  date: string;
+  home_team_name: string;
+  home_team_score: number;
+  away_team_name: string;
+  away_team_score: number;
+  model_name: string;
+  prediction: string;
+  winner: string;
+  confidence: number;
+  prediction_was_correct: boolean;
+}
+
+export interface HistoryDate {
+  model_name: string;
+  dates: string[];
+}
+
 export interface GameWithPrediction extends Game {
   prediction?: Prediction;
 }
diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx
index f38e28b..10f2801 100644
--- a/ui/src/pages/History.tsx
+++ b/ui/src/pages/History.tsx
@@ -1,7 +1,8 @@
-import { AccuribetAPI } from '~/client/api.ts';
-import { createResource, createSignal, For, Match, Show, Switch } from 'solid-js';
-import { AnimationDiv } from '~/components/animated-div.tsx';
-import { Loading } from '~/components/loading.tsx';
+import { AccuribetAPI } from "~/client/api.ts";
+import { createResource, createSignal, For, Match, Show, Switch } from "solid-js";
+import { AnimationDiv } from "~/components/animated-div.tsx";
+import { Loading } from "~/components/loading.tsx";
+import { HistoryDate, HistoryGame } from "~/interface.ts";
 
 async function fetchHistory() {
   const instance = AccuribetAPI.getInstance();
@@ -11,17 +12,48 @@ async function fetchHistory() {
 async function fetchHistoryForModelOnDate(model: string, date: string) {
   const instance = AccuribetAPI.getInstance();
   return await instance.getPredictedGames(date, model);
-
 }
 
-
 export function History() {
+  const [dates] = createResource<HistoryDate[]>(fetchHistory);
+  const [selectedModel, setSelectedModel] = createSignal("");
+  const [selectedDate, setSelectedDate] = createSignal("");
+  const [history, setHistory] = createSignal<HistoryGame[]>([]);
+  const [error, setError] = createSignal("");
+
+  const handleDateChange = (e: Event) => {
+    let target = e.target as HTMLInputElement;
+    setSelectedDate(target.value);
+    setHistory([]);
+
+    updateHistory().then(() => {
+      setError("");
+    });
+  };
+
+  const updateHistory = async () => {
+    const data = await fetchHistoryForModelOnDate(selectedModel(), selectedDate());
 
-  const [dates] = createResource(fetchHistory);
-  const [selectedModel, setSelectedModel] = createSignal('')
-  const [selectedDate, setSelectedDate] = createSignal('')
+    console.log("oldest date", oldestDateForModel());
 
+    if (data) {
+      setHistory(data as HistoryGame[]);
+      console.log(history());
+    } else {
+      setHistory([]);
+      setError("No data found for this model on this date");
+    }
+  };
 
+  const oldestDateForModel = () => {
+    if (!dates.error && dates()) {
+      // @ts-ignore
+      const datesForModel = dates().find(date => date.model_name === selectedModel());
+      if (datesForModel) {
+        return datesForModel.dates[datesForModel.dates.length - 1];
+      }
+    }
+  };
 
   return (
     <AnimationDiv>
@@ -33,32 +65,63 @@ export function History() {
           <h1>Error fetching dates</h1>
         </Match>
         <Match when={dates()}>
-          <AnimationDiv class={'flex flex-col items-center'}>
-            <span class={'text-100 text-2xl'}>
+          <AnimationDiv class={"flex flex-col items-center"}>
+            <span class={"text-100 text-2xl"}>
               I would like to see the history of the
               <select
-                class={'mx-3 bg-primary border-b-100  border-opacity-50 text-100'}
-                onChange={(e) => setSelectedModel(e.currentTarget.value)}
+                class={"mx-3 bg-primary border-b-100  border-opacity-50 text-100"}
+                onChange={e => setSelectedModel(e.currentTarget.value)}
                 disabled={dates.loading}
               >
+                <option disabled selected>
+                  ...
+                </option>
                 <For each={dates()}>
-                  {date => (
-                    <option value={date.model_name}>{date.model_name}</option>
-                  )}
+                  {date => <option value={date.model_name}>{date.model_name}</option>}
                 </For>
-            </select>
+              </select>
               model
             </span>
 
+            <Show when={error()}>
+              <span class={"text-red-500 bg-gray-200 rounded-full font-bold px-3 py-1 mt-2"}>
+                Error! {error()}
+              </span>
+            </Show>
+
             <Show when={selectedModel()}>
               <input
-                type={'date'}
-                class={"appearance-none mb-2 block bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"}
+                type={"date"}
+                class={
+                  "appearance-none mb-2 block bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                }
+                onChange={handleDateChange}
+                max={new Date().toISOString().split("T")[0]}
+                min={oldestDateForModel()}
               />
             </Show>
+
+            <Show when={history()}>
+              <For each={history()}>
+                {game => (
+                  <div
+                    id={game.game_id}
+                    class="flex flex-col mt-2 text-100 font-bold bg-secondary rounded-lg p-4"
+                  >
+                    <span>
+                      {game.home_team_name} vs {game.away_team_name}
+                    </span>
+                    <span>
+                      {game.home_team_score} - {game.away_team_score}
+                    </span>
+                    <span>{game.date}</span>
+                  </div>
+                )}
+              </For>
+            </Show>
           </AnimationDiv>
         </Match>
       </Switch>
     </AnimationDiv>
-  )
+  );
 }