diff --git a/components/blocks/Landing/Landing.test.ts b/components/blocks/Landing/Landing.test.ts
index 2cee0574..e76fad18 100644
--- a/components/blocks/Landing/Landing.test.ts
+++ b/components/blocks/Landing/Landing.test.ts
@@ -6,7 +6,7 @@ import LandingLeaderboards from './LandingLeaderboards.vue'
 const mockSuccessGetLeaderboards = vi.fn(() => Promise.resolve({ ok: true }))
 vi.mock('lib/api/Leaderboards', () => ({
   Leaderboards: function Leaderboards() {
-    this.getLeaderboards = mockSuccessGetLeaderboards
+    this.listLeaderboards = mockSuccessGetLeaderboards
   },
 }))
 
diff --git a/components/blocks/Landing/LandingLeaderboards.test.ts b/components/blocks/Landing/LandingLeaderboards.test.ts
index a74e0b38..3228761b 100644
--- a/components/blocks/Landing/LandingLeaderboards.test.ts
+++ b/components/blocks/Landing/LandingLeaderboards.test.ts
@@ -1,5 +1,5 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import Landing from './LandingLeaderboards.vue'
+import LandingLeaderboards from './LandingLeaderboards.vue'
 import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
 
 const games: LeaderboardViewModel[] = [
@@ -7,7 +7,7 @@ const games: LeaderboardViewModel[] = [
     id: 1,
     name: 'Getting Over It With Bennet Foddy',
     slug: 'slug-2',
-    info: null,
+    info: '',
     createdAt: '2024-11-02T22:11:08+0000',
     updatedAt: '2024-11-02T22:11:08+0000',
     deletedAt: null,
@@ -17,7 +17,7 @@ const games: LeaderboardViewModel[] = [
     id: 2,
     name: 'Getting Over It With Bennet Foddy',
     slug: 'slug-2',
-    info: null,
+    info: '',
     createdAt: '2024-11-02T22:11:08+0000',
     updatedAt: '2024-11-02T22:11:08+0000',
     deletedAt: null,
@@ -27,7 +27,7 @@ const games: LeaderboardViewModel[] = [
     id: 3,
     name: 'Getting Over It With Bennet Foddy',
     slug: 'slug-3',
-    info: null,
+    info: '',
     createdAt: '2024-11-02T22:11:08+0000',
     updatedAt: '2024-11-02T22:11:08+0000',
     deletedAt: null,
@@ -36,12 +36,8 @@ const games: LeaderboardViewModel[] = [
 ]
 
 describe('LandingLeaderboards Component', () => {
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
   it('should render without crashing', async () => {
-    const wrapper = await mountSuspended(Landing, {
+    const wrapper = await mountSuspended(LandingLeaderboards, {
       props: {
         leaderboards: games,
       },
diff --git a/components/blocks/Landing/LandingLeaderboards.vue b/components/blocks/Landing/LandingLeaderboards.vue
index d2deb002..1ba7df19 100644
--- a/components/blocks/Landing/LandingLeaderboards.vue
+++ b/components/blocks/Landing/LandingLeaderboards.vue
@@ -20,7 +20,7 @@ defineProps<LandingLeaderboardsProps>()
       class="mb-2 h-full content-center rounded-lg bg-gray-200 p-8 text-blue-500 underline hover:cursor-pointer"
       :to="
         localePath({
-          name: 'board-slug',
+          name: 'game-slug',
           params: { slug: leaderboard.slug },
         })
       "
diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts b/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
deleted file mode 100644
index 5c841c62..00000000
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId } from 'root/testUtils'
-import Desktop from './Desktop.vue'
-
-describe('<Desktop />', () => {
-  async function getDesktopWrapper() {
-    return await mountSuspended(Desktop, {
-      props: {
-        leaderboard: {
-          categories: [{ id: 1, name: 'Any%', slug: 'any' }],
-          id: 1,
-          name: 'Stuck in the Train Simulator 2',
-          slug: 'stuck-in-the-train-sim-2',
-        },
-        todoPlatforms: ['XBox', 'PC'],
-      },
-    })
-  }
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('should render without crashing', async () => {
-    const wrapper = await getDesktopWrapper()
-    expect(wrapper.isVisible()).toBe(true)
-
-    expect(getByTestId(wrapper, 'title').text()).toBe(
-      'Stuck in the Train Simulator 2',
-    )
-    expect(getByTestId(wrapper, 'tag').text()).toBe('Any%')
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue b/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
deleted file mode 100644
index dae18f2d..00000000
--- a/components/blocks/LeaderboardInfo/Desktop/Desktop.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import Dropdown from 'elements/buttons/Dropdown/Dropdown.vue'
-import DropdownItem from 'elements/buttons/Dropdown/DropdownItem.vue'
-import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
-import SocialButtons from 'elements/buttons/SocialButtons/SocialButtons.vue'
-import Tag from 'elements/tags/Tag/Tag.vue'
-import PlatformTags from '../PlatformTags/PlatformTags.vue'
-import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
-
-interface Props extends LeaderboardInfoProps {
-  todoPlatforms: string[]
-}
-
-const emit = defineEmits<{
-  (event: 'follow'): void
-}>()
-
-// TODO: Get actual links tied to the leaderboard
-const socials: Socials[] = [
-  {
-    icon: 'twitch',
-    name: 'Twitch',
-    url: 'https://twitch.tv',
-  },
-  {
-    icon: 'globe',
-    name: 'Site',
-    url: '#',
-  },
-  {
-    icon: 'discord',
-    name: 'Discord',
-    url: 'https://discord.gg',
-  },
-  {
-    icon: 'message',
-    name: 'Message',
-    url: '#',
-  },
-]
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div class="leaderboard-info">
-    <!-- TODO: Do not provide defaults and instead return nothing if on production -->
-    <div class="title" data-testid="title">
-      {{ leaderboard.name || 'Game Name' }}
-    </div>
-    <div class="body">
-      <img
-        src="https://via.placeholder.com/220x220"
-        alt="game-art"
-        class="body__game-art"
-      />
-      <Tag data-testid="tag">{{
-        leaderboard.categories[0]?.name ?? 'TODO'
-      }}</Tag>
-      <span class="body__published-year">YEAR</span>
-      <PlatformTags :tags="todoPlatforms" />
-      <FollowButton
-        class="body__follow"
-        data-testid="body__follow"
-        @follow="emit('follow')"
-      />
-      <div class="body__divider" />
-      <div class="body__internal-link-buttons">
-        <ButtonLink class="body__internal-link-buttons__button" to="#">
-          <i-svg-book />
-          <span>Guides</span>
-        </ButtonLink>
-        <ButtonLink class="body__internal-link-buttons__button" to="#">
-          <i-svg-link />
-          <div>Resources</div>
-        </ButtonLink>
-        <Dropdown class-name="body__internal-link-buttons__button">
-          <DropdownItem>First</DropdownItem>
-          <DropdownItem>Second</DropdownItem>
-          <DropdownItem>Third</DropdownItem>
-        </Dropdown>
-      </div>
-      <SocialButtons :socials="socials" />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.icon {
-  @apply w-2;
-}
-
-.leaderboard-info {
-  @apply h-[fit-content] min-h-[28.125rem] w-[fit-content] relative;
-  @apply flex flex-col items-center;
-  @apply border-gray-300 border rounded;
-
-  & .title {
-    @apply w-full text-center;
-    @apply font-bold text-lg p-3;
-    @apply border-b-gray-200 border-b-2;
-  }
-
-  & .body {
-    @apply m-4;
-    @apply flex flex-col items-center gap-1;
-
-    & .body__game-art {
-      @apply my-1 px-8;
-    }
-
-    & .body__published-year {
-      @apply text-sm;
-    }
-
-    & .body__follow {
-      @apply mt-3;
-    }
-
-    & .body__divider {
-      @apply border-b border-gray-300 w-full my-3;
-    }
-
-    & .body__internal-link-buttons {
-      @apply w-full flex flex-col mb-4 gap-2;
-
-      & .body__internal-link-buttons__button {
-        @apply w-full flex justify-center items-center gap-2 bg-white hover:bg-gray-100;
-        @apply border-gray-200 border-2 rounded;
-      }
-
-      & :deep(.body__internal-link-buttons__button) {
-        @apply w-full bg-white hover:bg-gray-100;
-        @apply border-gray-200 border-2 rounded;
-      }
-    }
-  }
-}
-</style>
-elements/buttons/Dropdown/Dropdown.vueelements/buttons/Dropdown/DropdownItem.vue
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
index 897899e1..bd4bf512 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
@@ -1,47 +1,30 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId } from 'root/testUtils'
 import LeaderboardInfo from './LeaderboardInfo.vue'
+import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
 
-describe('<LeaderboardInfo />', () => {
-  async function getLeaderboardInfoWrapper() {
-    return await mountSuspended(LeaderboardInfo, {
+const game: LeaderboardViewModel = {
+  id: 1,
+  name: 'Getting Over It With Bennet Foddy',
+  slug: 'slug-2',
+  info: 'Something special',
+  createdAt: '2024-11-02T22:11:08+0000',
+  updatedAt: '2024-11-02T22:11:08+0000',
+  deletedAt: null,
+  categories: [],
+}
+
+describe('LeaderboardInfo Component', () => {
+  it('should render without crashing', async () => {
+    const wrapper = await mountSuspended(LeaderboardInfo, {
       props: {
-        leaderboard: {
-          categories: [],
-          id: 1,
-          name: 'Stuck in the Train Simulator 2',
-          slug: 'stuck-in-the-train-sim-2',
-        },
+        leaderboard: game,
       },
     })
-  }
 
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.unstubAllGlobals()
-  })
-
-  it('should render without crashing', async () => {
-    const wrapper = await getLeaderboardInfoWrapper()
     expect(wrapper.isVisible()).toBe(true)
-  })
-
-  it('should render <Desktop /> if device width is large', async () => {
-    vi.stubGlobal('innerWidth', 1980)
-    const wrapper = await getLeaderboardInfoWrapper()
-    expect(wrapper.html()).toContain('Guides')
-  })
 
-  it('should render <Mobile /> if device width is small', async () => {
-    vi.stubGlobal('innerWidth', 600)
-    const wrapper = await getLeaderboardInfoWrapper()
-    expect(wrapper.html()).toContain('Submit Run')
-  })
+    const header = wrapper.get('div#leaderboard-show-header h1')
 
-  // TODO: The follow event doesn't trigger in the test, somehow
-  it.skip('should emit event when the Follow Button is triggered', async () => {
-    const wrapper = await getLeaderboardInfoWrapper()
-    await getByTestId(wrapper, 'child').trigger('follow')
-    expect(wrapper.emitted().follow).toBeTruthy()
+    expect(header.text()).toContain(game.name)
   })
 })
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
index c9395469..c783dd27 100644
--- a/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfo.vue
@@ -1,55 +1,21 @@
-<script setup lang="ts">
-import { useThrottleFn } from '@vueuse/core'
-import resolveConfig from 'tailwindcss/resolveConfig'
-import { ref } from 'vue'
-import tailwindConfig from 'root/tailwind.config'
-import Desktop from './Desktop/Desktop.vue'
-import Mobile from './Mobile/Mobile.vue'
-import type { LeaderboardViewModel } from 'lib/api/data-contracts'
-
-export interface LeaderboardInfoProps {
+<script lang="ts" setup>
+import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
+import LeaderboardInfoAccordion from './LeaderboardInfoAccordion.vue'
+interface LeaderboardInfoProps {
   leaderboard: LeaderboardViewModel
 }
 
-// TODO: Remove this. Get from model instead.
-const todoPlatforms = ['PS4', 'PC', 'XboxSeriesX']
-
-// TODO: Implement listeners
-const emit = defineEmits<{
-  (event: 'follow', leaderboardId: number): void
-}>()
-
-const mobileWidth = parseInt(
-  resolveConfig(tailwindConfig).theme.screens.sm.replace('px', ''),
-  10,
-)
-
-const isMobile = ref(window.innerWidth <= mobileWidth)
-
-function checkIsMobile() {
-  isMobile.value = window.innerWidth <= mobileWidth
-}
-
-window.addEventListener('resize', useThrottleFn(checkIsMobile, 20))
-
 defineProps<LeaderboardInfoProps>()
 </script>
 
 <template>
-  <Mobile
-    v-if="isMobile.valueOf()"
-    data-testid="child"
-    :leaderboard="leaderboard"
-    :todo-platforms="todoPlatforms"
-    @follow="emit('follow', leaderboard.id)"
-  />
-  <Desktop
-    v-else
-    data-testid="child"
-    :leaderboard="leaderboard"
-    :todo-platforms="todoPlatforms"
-    @follow="emit('follow', leaderboard.id)"
-  />
+  <div class="flex w-full flex-col rounded border border-gray-300 p-5">
+    <div id="leaderboard-show-header" class="mb-4 bg-gray-200 p-4">
+      <h1 class="mb-4 text-xl font-bold">{{ leaderboard.name }}</h1>
+      <LeaderboardInfoAccordion
+        v-if="leaderboard?.info"
+        :info="leaderboard.info"
+      />
+    </div>
+  </div>
 </template>
-
-<style lang="postcss" scoped></style>
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.test.ts
new file mode 100644
index 00000000..a36560d8
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.test.ts
@@ -0,0 +1,25 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import LeaderboardInfoAccordion from './LeaderboardInfoAccordion.vue'
+
+const info = 'Some Special Info'
+
+describe('LeaderboardInfoAccordion Component', () => {
+  it('should render without crashing', async () => {
+    const wrapper = await mountSuspended(LeaderboardInfoAccordion, {
+      props: {
+        info: info,
+      },
+    })
+
+    expect(wrapper.isVisible()).toBe(true)
+
+    // click the info button to open the info pane
+    const button = wrapper.get('button#leaderboard-info-button')
+    button.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const infoText = wrapper.get('p#leaderboard-info-text')
+
+    expect(infoText.text()).toContain(info)
+  })
+})
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue
new file mode 100644
index 00000000..aadf926e
--- /dev/null
+++ b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface LeaderboardInfoAccordionProps {
+  info: string
+}
+const enabled = ref(false)
+const toggle = () => {
+  enabled.value = !enabled.value
+}
+
+defineProps<LeaderboardInfoAccordionProps>()
+</script>
+
+<template>
+  <div>
+    <button
+      id="leaderboard-info-button"
+      class="hover:cursor-pointer"
+      @click="toggle"
+      @keypress="toggle"
+    >
+      <span v-if="enabled" class="mr-2">▼</span>
+      <span v-else class="mr-2">▶</span>
+      <span class="text-blue-500 underline">
+        {{ $t('info') }}
+      </span>
+    </button>
+    <p v-if="enabled" id="leaderboard-info-text" class="mt-2 bg-white p-4">
+      {{ info }}
+    </p>
+  </div>
+</template>
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts b/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
deleted file mode 100644
index fce62d74..00000000
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { getByTestId } from 'root/testUtils'
-import Mobile from './Mobile.vue'
-
-describe('<Mobile />', () => {
-  async function getMobileWrapper() {
-    return await mountSuspended(Mobile, {
-      props: {
-        leaderboard: {
-          categories: [{ id: 1, name: 'Any%', slug: 'any' }],
-          id: 1,
-          name: 'Stuck in the Train Simulator 2',
-          slug: 'stuck-in-the-train-sim-2',
-        },
-        todoPlatforms: ['XBox', 'PC'],
-      },
-    })
-  }
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('should render without crashing', async () => {
-    const wrapper = await getMobileWrapper()
-    expect(wrapper.isVisible()).toBe(true)
-
-    expect(getByTestId(wrapper, 'title').text()).toBe(
-      'Stuck in the Train Simulator 2',
-    )
-    expect(getByTestId(wrapper, 'tag').text()).toBe('Any%')
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue b/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
deleted file mode 100644
index 99c16642..00000000
--- a/components/blocks/LeaderboardInfo/Mobile/Mobile.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import ButtonLink from 'elements/buttons/ButtonLink/ButtonLink.vue'
-import FollowButton from 'elements/buttons/FollowButton/FollowButton.vue'
-import Tag from 'elements/tags/Tag/Tag.vue'
-import PlatformTags from '../PlatformTags/PlatformTags.vue'
-import type { LeaderboardInfoProps } from '../LeaderboardInfo.vue'
-
-interface Props extends LeaderboardInfoProps {
-  todoPlatforms: string[]
-}
-
-const emit = defineEmits<{
-  (event: 'follow'): void
-}>()
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div class="leaderboard-info">
-    <!-- TODO: Do not provide defaults and instead return nothing if on production -->
-    <div class="top">
-      <div class="top__title" data-testid="title">
-        {{ leaderboard.name || 'Game Name' }}
-      </div>
-      <div class="top__button-container">
-        <FollowButton
-          class="top__button top__button__follow"
-          data-testid="top__button__follow"
-          @follow="emit('follow')"
-        />
-        <ButtonLink
-          class="top__button top__button__submit"
-          data-testid="top__button__submit"
-          to="#"
-        >
-          <span>Submit Run</span>
-        </ButtonLink>
-      </div>
-    </div>
-    <div class="bottom">
-      <div class="bottom__category-year">
-        <Tag data-testid="tag">{{
-          leaderboard.categories[0]?.name ?? 'TODO'
-        }}</Tag>
-        <span class="bottom__published-year">YEAR</span>
-      </div>
-      <PlatformTags :tags="todoPlatforms" />
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.leaderboard-info {
-  @apply h-[fit-content] w-full relative;
-  @apply flex flex-col gap-2;
-  @apply border-gray-200 border-2 rounded;
-  @apply p-4;
-
-  & .top {
-    @apply flex justify-between items-start;
-  }
-
-  & .top__title {
-    @apply font-bold text-lg;
-  }
-
-  & .top__button-container {
-    @apply flex gap-1;
-  }
-
-  & .top__button__submit {
-    @apply bg-gray-100;
-  }
-
-  & .bottom {
-    @apply flex justify-between items-center;
-  }
-
-  & .bottom__category-year {
-    @apply flex gap-2 items-center text-sm;
-  }
-}
-</style>
diff --git a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
deleted file mode 100644
index 1331bded..00000000
--- a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import PlatformTags from './PlatformTags.vue'
-
-describe('<PlatformTags />', () => {
-  const tags = ['XBox', 'PS4', 'Amiga DS']
-
-  it('should render without crashing', async () => {
-    const wrapper = await mountSuspended(PlatformTags, {
-      props: {
-        tags,
-      },
-    })
-
-    expect(wrapper.isVisible()).toBe(true)
-
-    wrapper
-      .getComponent('div.platform-tags')
-      .findAllComponents('div')
-      .forEach((c, i) => {
-        expect(c.text()).toBe(tags[i])
-      })
-  })
-})
diff --git a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue b/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
deleted file mode 100644
index ae069c42..00000000
--- a/components/blocks/LeaderboardInfo/PlatformTags/PlatformTags.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Tag from 'elements/tags/Tag/Tag.vue'
-interface PlatformTagsProps {
-  tags: string[]
-}
-
-defineProps<PlatformTagsProps>()
-</script>
-
-<template>
-  <div class="platform-tags">
-    <Tag v-for="tag in tags" :key="tag">
-      {{ tag }}
-    </Tag>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.platform-tags {
-  @apply flex flex-row place-content-center gap-1;
-}
-</style>
diff --git a/composables/api/useGetLeaderboardBySlug/index.ts b/composables/api/useGetLeaderboardBySlug/index.ts
index c5f5bc8d..378a8b6c 100644
--- a/composables/api/useGetLeaderboardBySlug/index.ts
+++ b/composables/api/useGetLeaderboardBySlug/index.ts
@@ -18,7 +18,7 @@ export default async function useGetLeaderboardBySlug(
     id: -1,
     name: '',
     slug: '',
-    info: null,
+    info: '',
     createdAt: '',
     updatedAt: null,
     deletedAt: null,
diff --git a/composables/api/useGetLeaderboards/index.ts b/composables/api/useGetLeaderboards/index.ts
index 7eb394e8..932aa509 100644
--- a/composables/api/useGetLeaderboards/index.ts
+++ b/composables/api/useGetLeaderboards/index.ts
@@ -18,7 +18,7 @@ export default async function useGetLeaderboards(
       id: -1,
       name: '',
       slug: '',
-      info: null,
+      info: '',
       createdAt: '',
       updatedAt: null,
       deletedAt: null,
@@ -30,7 +30,7 @@ export default async function useGetLeaderboards(
   })
 
   return await useApi<LeaderboardViewModel[]>(
-    async () => await leaderboardClient.getLeaderboards({}),
+    async () => await leaderboardClient.listLeaderboards({}),
     {
       onError,
       onOkay,
diff --git a/composables/api/useGetLeaderboards/useGetLeaderboards.test.ts b/composables/api/useGetLeaderboards/useGetLeaderboards.test.ts
index 2b4ed631..6571303b 100644
--- a/composables/api/useGetLeaderboards/useGetLeaderboards.test.ts
+++ b/composables/api/useGetLeaderboards/useGetLeaderboards.test.ts
@@ -8,7 +8,7 @@ describe('useGetLeaderboard', () => {
     it('creates a GET request to fetch the a list of leaderboards', async () => {
       vi.mock('lib/api/Leaderboards', () => ({
         Leaderboards: function Leaderboards() {
-          this.getLeaderboards = mockSuccessGetLeaderboards
+          this.listLeaderboards = mockSuccessGetLeaderboards
         },
       }))
 
diff --git a/i18n/en/index.ts b/i18n/en/index.ts
index ee03553b..4e78d8b8 100644
--- a/i18n/en/index.ts
+++ b/i18n/en/index.ts
@@ -12,4 +12,5 @@ export const English = {
     'Something went wrong. Reach out to support if the problem persists.',
   signup: 'Sign Up',
   welcome: 'Welcome',
+  info: 'Info',
 } satisfies LanguageIndexFile
diff --git a/i18n/language.ts b/i18n/language.ts
index bcabde6d..8aef93e2 100644
--- a/i18n/language.ts
+++ b/i18n/language.ts
@@ -8,4 +8,5 @@ export interface LanguageIndexFile {
   confirmationReceived?: string
   confirmationReceivedText?: string
   signup?: string
+  info?: string
 }
diff --git a/pages/board/[slug].vue b/pages/board/[slug].vue
deleted file mode 100644
index 588a1d58..00000000
--- a/pages/board/[slug].vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { useRoute } from '#imports'
-import LeaderboardInfo from 'blocks/LeaderboardInfo/LeaderboardInfo.vue'
-import Loader from 'blocks/Loader/Loader.vue'
-import { useGetLeaderboardBySlug } from '~/composables/api'
-
-const route = useRoute()
-const leaderboardSlug = route.params.slug as string
-const leaderboardDetail = await useGetLeaderboardBySlug(leaderboardSlug)
-</script>
-
-<template>
-  <div>
-    <Loader v-if="leaderboardDetail.loading"></Loader>
-    <LeaderboardInfo
-      v-if="!leaderboardDetail.loading && leaderboardDetail.data != null"
-      :leaderboard="leaderboardDetail.data!"
-      @follow="(id) => console.log(id)"
-    />
-  </div>
-</template>
diff --git a/pages/game/[slug].test.ts b/pages/game/[slug].test.ts
new file mode 100644
index 00000000..945e69b6
--- /dev/null
+++ b/pages/game/[slug].test.ts
@@ -0,0 +1,57 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import useGetLeaderboardBySlug from '~/composables/api/useGetLeaderboardBySlug/index'
+import gamePage from 'pages/game/[slug].vue'
+import { useError } from '#imports'
+import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
+
+const leaderboard: LeaderboardViewModel = {
+  id: 1,
+  name: 'Getting Over It With Bennet Foddy',
+  slug: 'slug-2',
+  info: '',
+  createdAt: '2024-11-02T22:11:08+0000',
+  updatedAt: '2024-11-02T22:11:08+0000',
+  deletedAt: null,
+  categories: [],
+}
+
+vi.mock('composables/api/useGetLeaderboardBySlug')
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('/game/:slug', () => {
+  it('should render without crashing with a valid leaderboard', async () => {
+    vi.mocked(useGetLeaderboardBySlug).mockResolvedValue({
+      error: null,
+      loading: false,
+      data: leaderboard,
+      errors: null,
+    })
+    const wrapper = await mountSuspended(gamePage, {
+      route: '/game/validslug',
+    })
+
+    expect(wrapper.text()).toContain(leaderboard.name)
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('should render 404 if leaderboard status is 404', async () => {
+    vi.mocked(useGetLeaderboardBySlug).mockResolvedValue({
+      error: { status: 404 },
+      loading: false,
+      data: leaderboard,
+      errors: null,
+    })
+
+    const wrapper = await mountSuspended(gamePage, {
+      route: '/game/invalidslug',
+    })
+
+    const error = useError()
+
+    expect(error?.value?.statusCode).toBe(404)
+    expect(wrapper.text()).not.toContain(leaderboard.name)
+  })
+})
diff --git a/pages/game/[slug].vue b/pages/game/[slug].vue
new file mode 100644
index 00000000..aad432f3
--- /dev/null
+++ b/pages/game/[slug].vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useRoute, createError } from '#imports'
+import Loader from 'blocks/Loader/Loader.vue'
+import { useGetLeaderboardBySlug } from '~/composables/api'
+import LeaderboardInfo from '~/components/blocks/LeaderboardInfo/LeaderboardInfo.vue'
+const {
+  params: { slug },
+} = useRoute()
+
+const {
+  loading,
+  error: leaderboardError,
+  data,
+} = await useGetLeaderboardBySlug(slug as string)
+
+if (leaderboardError?.status === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Board Not Found',
+    fatal: true,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <Loader v-if="loading"></Loader>
+    <LeaderboardInfo v-else :leaderboard="data!" />
+  </div>
+</template>