diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
index d6eaec5ca..da97660e9 100644
--- a/packages/frontend/src/App.svelte
+++ b/packages/frontend/src/App.svelte
@@ -29,6 +29,7 @@ import { Messages } from '@shared/Messages';
 import GPUPromotion from '/@/lib/notification/GPUPromotion.svelte';
 import NewInstructLabSession from '/@/pages/NewInstructLabSession.svelte';
 import LocalServer from './pages/server-information/LocalServer.svelte';
+import AboutInstructLab from './pages/instruct-lab/AboutInstructLab.svelte';
 
 router.mode.hash();
 
@@ -97,6 +98,9 @@ onDestroy(() => {
         </Route>
         {#if experimentalTuning}
           <!-- Tune with InstructLab -->
+          <Route path="/aboutInstructLab">
+            <AboutInstructLab />
+          </Route>
           <Route path="/tune/*" firstmatch>
             <Route path="/start">
               <NewInstructLabSession />
diff --git a/packages/frontend/src/lib/Navigation.svelte b/packages/frontend/src/lib/Navigation.svelte
index dadc505fa..e07236b2c 100644
--- a/packages/frontend/src/lib/Navigation.svelte
+++ b/packages/frontend/src/lib/Navigation.svelte
@@ -11,6 +11,7 @@ import {
   faHouse,
   faGear,
 } from '@fortawesome/free-solid-svg-icons';
+import instructlabIcon from './icons/instructLabIcon.png';
 import { SettingsNavItem } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { configuration } from '../stores/extensionConfiguration';
@@ -81,6 +82,11 @@ onDestroy(() => {
       <div class="pl-3 mt-2 ml-[4px]">
         <span class="text-[color:var(--pd-secondary-nav-header-text)]">TUNING</span>
       </div>
+      <SettingsNavItem
+        icon={instructlabIcon}
+        title="About InstructLab"
+        selected={meta.url.startsWith('/aboutInstructLab')}
+        href="/aboutInstructLab" />
       <SettingsNavItem
         icon={faGaugeHigh}
         title="Tune with InstructLab"
diff --git a/packages/frontend/src/lib/icons/instructLabIcon.png b/packages/frontend/src/lib/icons/instructLabIcon.png
new file mode 100644
index 000000000..7a6ec24ec
Binary files /dev/null and b/packages/frontend/src/lib/icons/instructLabIcon.png differ
diff --git a/packages/frontend/src/lib/images/instructLabTitleImage.png b/packages/frontend/src/lib/images/instructLabTitleImage.png
new file mode 100644
index 000000000..3a5cdc576
Binary files /dev/null and b/packages/frontend/src/lib/images/instructLabTitleImage.png differ
diff --git a/packages/frontend/src/pages/instruct-lab/AboutInstructLab.svelte b/packages/frontend/src/pages/instruct-lab/AboutInstructLab.svelte
new file mode 100644
index 000000000..420845130
--- /dev/null
+++ b/packages/frontend/src/pages/instruct-lab/AboutInstructLab.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import { NavPage, Button, Link } from '@podman-desktop/ui-svelte';
+import { studioClient } from '/@/utils/client';
+import { router } from 'tinro';
+import instructlabTitleImage from '/@/lib/images/instructlabTitleImage.png';
+import AboutInstructLabDiscoverCard from './AboutInstructLabDiscoverCard.svelte';
+import AboutInstructLabExploreCard from './AboutInstructLabExploreCard.svelte';
+
+function start(): void {
+  router.goto('/tune/start');
+}
+
+const instructLabDocumentation = 'https://docs.instructlab.ai/';
+const instructLabHuggingFace = 'https://huggingface.co/instructlab';
+const instructLabSamples = '';
+
+async function openInstructLabDocumentation(): Promise<void> {
+  await studioClient.openURL(instructLabDocumentation);
+}
+
+async function openInstructLabHuggingFace(): Promise<void> {
+  await studioClient.openURL(instructLabHuggingFace);
+}
+
+async function openSamples(): Promise<void> {
+  await studioClient.openURL(instructLabSamples);
+}
+</script>
+
+<NavPage title="About InstructLab" searchEnabled={false}>
+  <div slot="additional-actions">
+    <Button icon={faPlusCircle} on:click={start}>Start Fine Tuning</Button>
+  </div>
+  <div slot="content" class="flex flex-col min-w-full min-h-full">
+    <div class="min-w-full min-h-full flex-1">
+      <div class="text-[var(--pd-details-body-text)] mt-4 px-5 space-y-5" aria-label="inner-content">
+        <div class="flex bg-[var(--pd-content-card-bg)] rounded-md p-5 gap-3 flex-row flex-nowrap items-center">
+          <img
+            src={instructlabTitleImage}
+            class="max-h-[100%] w-auto max-w-[20%] object-contain rounded-md self-start"
+            alt={`InstructLab`} />
+          <div class="flex flex-col flex-1 h-100% self-start gap-4">
+            <div
+              class="text-[var(--pd-content-card-text)] truncate text-ellipsis overflow-hidden whitespace-pre-line flex flex-col gap-4">
+              <div>
+                Here you can create an InstructLab session to improve trained models with specialized knowledge and
+                skill tuning. InstructLab is a model-agnostic open source AI project that facilitates contributions to
+                Large Language Models (LLMs).
+              </div>
+              <div>Start by trying one of our samples or bring your own knowledge and skills files.</div>
+            </div>
+            <div class="flex flex-row justify-start items-center gap-3 mt-2">
+              <Link on:click={openInstructLabDocumentation}>Access InstructLab documentation</Link>
+              <Link on:click={openInstructLabHuggingFace}>View InstructLab on HuggingFace</Link>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-1 flex-col pt-5">
+          <p class="text-xl text-[var(--pd-details-body-text)]">
+            Discover from available <Link on:click={openSamples} class="font-bold">SAMPLES</Link>
+          </p>
+          <div class="flex flex-col pt-5 grow">
+            <div class="grid grid-cols-3 gap-x-2">
+              <AboutInstructLabDiscoverCard title={'asdas'} link={'asd'} image={instructlabTitleImage} desc={'aaaa'} />
+              <AboutInstructLabDiscoverCard title={'asdas'} link={'asd'} image={instructlabTitleImage} desc={'aaaa'} />
+              <AboutInstructLabDiscoverCard title={'asdas'} link={'asd'} image={instructlabTitleImage} desc={'aaaa'} />
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-1 flex-col py-5">
+          <p class="text-xl text-[var(--pd-details-body-text)]">Explore articles and videos</p>
+          <div class="rounded-md mt-5 bg-[var(--pd-content-card-bg)] flex-row flex-nowrap justify-center items-center">
+            <div class="grid grid-cols-3 p-2">
+              <AboutInstructLabExploreCard title={'asdas'} link={'asd'} image={instructlabTitleImage} isVideo={true} />
+              <AboutInstructLabExploreCard title={'asdas'} link={'asd'} image={instructlabTitleImage} />
+              <AboutInstructLabExploreCard title={'asdas'} link={'asd'} image={instructlabTitleImage} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</NavPage>
diff --git a/packages/frontend/src/pages/instruct-lab/AboutInstructLabDiscoverCard.svelte b/packages/frontend/src/pages/instruct-lab/AboutInstructLabDiscoverCard.svelte
new file mode 100644
index 000000000..e27bf65c7
--- /dev/null
+++ b/packages/frontend/src/pages/instruct-lab/AboutInstructLabDiscoverCard.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { Button } from '@podman-desktop/ui-svelte';
+import { studioClient } from '/@/utils/client';
+
+interface Props {
+  title: string;
+  desc: string;
+  link: string;
+  image: string;
+}
+
+let { title, desc, link, image }: Props = $props();
+
+async function openLink(): Promise<void> {
+  await studioClient.openURL(link);
+}
+</script>
+
+<div
+  class="flex flex-col items-center justify-top rounded-md text-white relative bg-cover bg-center h-[300px]"
+  style={`background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 80%), url(${image});`}>
+  <div class="text-lg font-bold mt-2">{title}</div>
+  <div class="text-sm my-2">{desc}</div>
+  <Button on:click={openLink}>Get started</Button>
+</div>
diff --git a/packages/frontend/src/pages/instruct-lab/AboutInstructLabExploreCard.svelte b/packages/frontend/src/pages/instruct-lab/AboutInstructLabExploreCard.svelte
new file mode 100644
index 000000000..a211eb6e1
--- /dev/null
+++ b/packages/frontend/src/pages/instruct-lab/AboutInstructLabExploreCard.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+import { Button } from '@podman-desktop/ui-svelte';
+import { studioClient } from '/@/utils/client';
+
+interface Props {
+  title?: string;
+  link: string;
+  image: string;
+  isVideo?: boolean;
+}
+
+let { title, link, image, isVideo = false }: Props = $props();
+
+async function openLink(): Promise<void> {
+  await studioClient.openURL(link);
+}
+</script>
+
+<div
+  class="flex flex-col gap-4 m-2 bg-[var(--pd-content-card-carousel-card-bg)] hover:bg-[var(--pd-content-card-carousel-card-hover-bg)] rounded-md items-center">
+  <img src={image} class="object-contain rounded-md w-full" alt={`${title} image`} />
+  {#if !isVideo}
+    <div class="text-[var(--pd-content-card-carousel-card-header-text)] text-center font-semibold">{title}</div>
+  {/if}
+  <Button on:click={openLink} class="self-center mb-2">{isVideo ? 'Watch' : 'Read more'}</Button>
+</div>