diff --git a/packages/frontend/src/components/HighScoreTable.tsx b/packages/frontend/src/components/HighScoreTable.tsx
index be4cfb250..d55a76aaa 100644
--- a/packages/frontend/src/components/HighScoreTable.tsx
+++ b/packages/frontend/src/components/HighScoreTable.tsx
@@ -1,14 +1,17 @@
 import { FC, memo } from 'react';
 import { useHighScore } from '../hooks/useHighScore';
+import { Spinner } from './Spinner';
 import { Table } from './Table';
 
 type HighScoreProps = {
   seasonId: string;
 };
-
 export const HighScoreTable: FC<HighScoreProps> = memo((props) => {
   const { seasonId } = props;
 
+  if (!seasonId) {
+    return <Spinner />;
+  }
   const highscore = useHighScore(seasonId);
   return (
     <Table
diff --git a/packages/frontend/src/components/SideMenu/SideMenu.tsx b/packages/frontend/src/components/SideMenu/SideMenu.tsx
index 18ee10474..ce08fcad2 100644
--- a/packages/frontend/src/components/SideMenu/SideMenu.tsx
+++ b/packages/frontend/src/components/SideMenu/SideMenu.tsx
@@ -1,6 +1,6 @@
 import { BotGameObjectProperties } from '@etimo/diamonds2-types';
 import React, { FC, memo, useState } from 'react';
-import { useCurrentSeason } from '../../hooks/useCurrentSeason';
+import useFetch from '../../hooks/useFetch';
 import { BoardPicker } from '../BoardPicker';
 import { HighScoreTable } from '../HighScoreTable';
 import { PlayerTable } from '../PlayerTable';
@@ -15,11 +15,10 @@ type SideMenuProps = {
 
 export const SideMenu: FC<SideMenuProps> = memo((props) => {
   const { boardId, onBoardChange, bots } = props;
-  const currentSeason = useCurrentSeason();
+  const { response: currentSeason } = useFetch('api/seasons/current', '0');
+  const offSeasonId = '00000000-0000-0000-0000-000000000000';
 
-  const [seasonId, setSeasonId] = useState<string>(
-    '00000000-0000-0000-0000-000000000000',
-  );
+  const [seasonId, setSeasonId] = useState<string>(offSeasonId);
   const [rulesVisible, setRulesVisible] = useState<boolean>(false);
 
   const onSeasonChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -30,6 +29,8 @@ export const SideMenu: FC<SideMenuProps> = memo((props) => {
     setRulesVisible(false);
   };
 
+  const selectedSeasonId = seasonId !== '0' ? seasonId : currentSeason.id;
+
   return (
     <div className="border border-gray-200 dark:border-slate-400 rounded-lg overflow-y-auto flex flex-col p-4">
       <div className="mb-6">
@@ -41,10 +42,7 @@ export const SideMenu: FC<SideMenuProps> = memo((props) => {
       </div>
 
       <div className="my-6">
-        <SeasonPicker
-          seasonId={seasonId != '0' ? seasonId : currentSeason.id}
-          onChange={onSeasonChange}
-        />
+        <SeasonPicker seasonId={selectedSeasonId} onChange={onSeasonChange} />
 
         <div className="mt-2">
           <button
@@ -57,15 +55,13 @@ export const SideMenu: FC<SideMenuProps> = memo((props) => {
       </div>
 
       <div>
-        <HighScoreTable
-          seasonId={seasonId != '0' ? seasonId : currentSeason.id}
-        />
+        <HighScoreTable seasonId={selectedSeasonId} />
       </div>
 
       <Rules
         onClose={closeRules}
         visible={rulesVisible}
-        seasonId={seasonId != '0' ? seasonId : currentSeason.id}
+        seasonId={selectedSeasonId}
       />
     </div>
   );
diff --git a/packages/frontend/src/components/Teams.tsx b/packages/frontend/src/components/Teams.tsx
index f66f1019a..8644f1f08 100644
--- a/packages/frontend/src/components/Teams.tsx
+++ b/packages/frontend/src/components/Teams.tsx
@@ -1,4 +1,4 @@
-import { ISeasonDto } from '@etimo/diamonds2-types';
+import { ITeamDto } from '@etimo/diamonds2-types';
 import useFetch from '../hooks/useFetch';
 import useTeams from '../hooks/useTeams';
 import { HighScoreTable } from './HighScoreTable';
@@ -6,10 +6,9 @@ import { MovingBot } from './MovingBot';
 import { Table } from './Table';
 
 export const Teams = () => {
-  const teams = useTeams();
-  const { response: currentSeason } = useFetch('api/seasons/current', '0') as {
-    response: ISeasonDto;
-  };
+  const teams: ITeamDto[] = useTeams();
+  const { response: currentSeason } = useFetch('api/seasons/current', '0');
+  const offSeasonId = '00000000-0000-0000-0000-000000000000';
 
   return (
     <>
@@ -28,7 +27,7 @@ export const Teams = () => {
               })}
             />
           </div>
-          <HighScoreTable seasonId={currentSeason.id} />
+          <HighScoreTable seasonId={currentSeason.id ?? offSeasonId} />
         </div>
       </div>
       <div className="mt-20">
diff --git a/packages/frontend/src/components/gameObject/SparklesComponent.tsx b/packages/frontend/src/components/gameObject/SparklesComponent.tsx
index 2d3df4082..bcedee8cc 100644
--- a/packages/frontend/src/components/gameObject/SparklesComponent.tsx
+++ b/packages/frontend/src/components/gameObject/SparklesComponent.tsx
@@ -9,7 +9,7 @@ export const SparklesComponent: FC = () => {
             <path
               id="large"
               d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z"
-              fill="white"
+              fill="#badbff"
             ></path>
           </g>
           <g className="large-2" transform="rotate(45)">
diff --git a/packages/frontend/src/hooks/useCurrentSeason.ts b/packages/frontend/src/hooks/useCurrentSeason.ts
deleted file mode 100644
index 6a0e26082..000000000
--- a/packages/frontend/src/hooks/useCurrentSeason.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ISeasonDto } from '@etimo/diamonds2-types';
-import { useEffect, useState } from 'react';
-import useFetch from './useFetch';
-
-export const useCurrentSeason = (): ISeasonDto => {
-  const {
-    response: fetchedCurrentSeason,
-    error,
-    isLoading,
-  } = useFetch(`api/seasons/current`, '0');
-  const [currentSeason, setCurrentSeason] = useState<ISeasonDto>({
-    id: '0',
-    name: '',
-    startDate: new Date(),
-    endDate: new Date(),
-  });
-
-  useEffect(() => {
-    setCurrentSeason(fetchedCurrentSeason);
-  }, [fetchedCurrentSeason]);
-
-  return currentSeason;
-};
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 48b26b261..4f891354d 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -88,11 +88,6 @@
   animation-timing-function: linear;
 }
 
-/* .sparkles {
-  transform: translate(-50%, -50%);
-  width: 70%;
-} */
-
 img.diamond {
   max-width: 100%; /* Ensure the image fits within its container */
   height: auto;
@@ -107,12 +102,7 @@ img.diamond {
   width: 100%; /* Set the width to 100% to match the image width */
   height: 100%; /* Set the height to 100% to match the image height */
   pointer-events: none; /* Allow mouse events to pass through the sparkles */
-  z-index: 1; /* Ensure the sparkles appear above the image */
-}
-
-.star {
-  text-shadow: 0 0 white, -115px -75px white;
-  animation: shine 1.8s alternate linear infinite;
+  z-index: 2; /* Ensure the sparkles appear above the image */
 }
 
 svg#one {