diff --git a/package.json b/package.json
index 17ccb9f7..d895be2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tea",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "private": true,
   "description": "tea gui app",
   "author": "tea.xyz",
diff --git a/svelte/src/components/package-banner/package-banner.svelte b/svelte/src/components/package-banner/package-banner.svelte
index 7651c821..0673b707 100644
--- a/svelte/src/components/package-banner/package-banner.svelte
+++ b/svelte/src/components/package-banner/package-banner.svelte
@@ -95,7 +95,7 @@
       {/if}
       <InstallResultOverlay {pkg} />
     </figure>
-    <article class="w-2/3 p-4 pt-8">
+    <article class="w-2/3 p-6">
       <div class="align-center flex items-center gap-2">
         <h3 data-testid="package-banner-header" class="text-primary text-3xl">
           {getPackageName(pkg)}
@@ -117,7 +117,7 @@
         <span>{pkg.maintainer}</span>
       {/if}
       <p class="mt-4 text-sm">{pkg.description}</p>
-      <menu class="mt-4 flex h-10 gap-4 text-xs">
+      <menu class="mt-4 flex h-fit flex-wrap gap-4 text-xs">
         <div class="w-fit min-w-[160px]">
           <PackageVersionSelector
             buttonSize="large"
diff --git a/svelte/src/components/package-page/package-page.svelte b/svelte/src/components/package-page/package-page.svelte
new file mode 100644
index 00000000..c7304fdc
--- /dev/null
+++ b/svelte/src/components/package-page/package-page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Markdown from "$components/markdown/markdown.svelte";
+  import PackageBanner from "$components/package-banner/package-banner.svelte";
+  import PackageMetas from "$components/package-metas/package-metas.svelte";
+  import useDefaultBrowser from "$libs/utils/use-default-browser";
+  import type { GUIPackage } from "$libs/types";
+
+  export let pkg: GUIPackage;
+
+  $: readme = pkg?.readme || ({ data: "", type: "md" } as { data: string; type: "md" | "rst" });
+</script>
+
+<div class="w-3/4 pr-4">
+  <PackageBanner on:openterminal {pkg} />
+  <hr class="border-top border-gray" />
+  <Markdown source={readme} hook={useDefaultBrowser} />
+</div>
+<div class="w-1/4">
+  {#if pkg}
+    <PackageMetas {pkg} />
+  {/if}
+</div>
diff --git a/svelte/src/components/tabs/tab.svelte b/svelte/src/components/tabs/tab.svelte
new file mode 100644
index 00000000..8fe665ad
--- /dev/null
+++ b/svelte/src/components/tabs/tab.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { t } from "$libs/translations";
+
+  export let isActive: boolean;
+  export let onClick: () => void;
+  export let label: string;
+  export let hidden = false;
+</script>
+
+<button class="tabborder w-20 border-x" class:activetab={isActive} class:hidden on:click={onClick}
+  >{$t(label)}</button
+>
+
+<style>
+  .tabborder {
+    border-image: linear-gradient(to bottom, rgba(148, 148, 148, 0%), rgba(148, 148, 148, 100%)) 1;
+  }
+
+  .activetab {
+    color: #00ffd0;
+    background: linear-gradient(180deg, rgba(77, 77, 77, 0.7) 0%, rgba(77, 77, 77, 0.35) 100%);
+    border-image: linear-gradient(to bottom, rgba(0, 255, 208, 0%), rgba(0, 255, 208, 100%)) 1;
+  }
+</style>
diff --git a/svelte/src/components/tabs/tabs.svelte b/svelte/src/components/tabs/tabs.svelte
deleted file mode 100644
index 43e5b973..00000000
--- a/svelte/src/components/tabs/tabs.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import type { Tab, TabId } from "$libs/types";
-  import { tabStore } from "$libs/stores";
-  import Button from "../button/button.svelte";
-
-  const { activeTab, setActiveTab } = tabStore;
-
-  let clazz = "";
-  export { clazz as class };
-  export let tabs: Tab[] = [];
-
-  const getActiveTabId = (tabId: TabId, tabs: Tab[]) => {
-    if (
-      !tabId ||
-      !tabs
-        .filter((t) => !t.hidden)
-        .map((t) => t.id)
-        .includes(tabId)
-    ) {
-      // If the tabId is not provided, invalid or the tab is hidden, use the first tab
-      return tabs[0]?.id;
-    }
-    return tabId;
-  };
-
-  $: activeTabId = getActiveTabId($activeTab, tabs);
-</script>
-
-<section class="relative h-auto {clazz}">
-  <menu class="flex gap-1">
-    {#each tabs as tab}
-      <div
-        class="border-gray text-white"
-        class:border-b={tab.id === activeTabId}
-        class:hidden={!!tab.hidden}
-      >
-        <Button onClick={() => setActiveTab(tab.id)}>
-          <span class:text-white={tab.id === activeTabId}>{tab.label}</span>
-        </Button>
-      </div>
-    {/each}
-  </menu>
-
-  {#each tabs as tab}
-    <div class:hidden={tab.id !== activeTabId}>
-      <svelte:component this={tab.component} {...tab.props} />
-    </div>
-  {/each}
-</section>
diff --git a/svelte/src/components/terminal/terminal.svelte b/svelte/src/components/terminal/terminal.svelte
index 7805d166..90bbaf1f 100644
--- a/svelte/src/components/terminal/terminal.svelte
+++ b/svelte/src/components/terminal/terminal.svelte
@@ -42,12 +42,25 @@
       fitAddon.fit();
     });
 
+    // Detect when the containing div is resized and resize the terminal
     const resizeObserver = new ResizeObserver((entries) => {
       fitAddon.fit();
     });
     resizeObserver.observe(terminalDiv);
 
-    return () => resizeObserver.unobserve(terminalDiv);
+    // Detect when the terminal div becomes visible on the screen and resize the terminal
+    var visibilityObserver = new IntersectionObserver((entries, observer) => {
+      // resize the terminal, but only after a delay allowing it to fully render or else the fitAddon will get the wrong size
+      setTimeout(() => {
+        fitAddon.fit();
+      }, 10);
+    });
+    visibilityObserver.observe(terminalDiv);
+
+    return () => {
+      resizeObserver.unobserve(terminalDiv);
+      visibilityObserver.unobserve(terminalDiv);
+    };
   });
 
   onDestroy(() => {
@@ -57,9 +70,9 @@
   });
 </script>
 
-<!-- This div has a very specific size of 571 pixels, the terminal component has breakpoints for showing a line 
-    and the spacing can get weird so this is as close to the breakpoint as possible with no left over space 
-    if some future traveler wants a different size, make sure to take these breakpoints into account -->
-<div class="border-gray mt-4 h-[571px] rounded-[5px] border p-1">
-  <div bind:this={terminalDiv} id="terminal" class="h-full w-full" />
+<!-- FIXME: find a better way to make this div resize.  Main container is height:auto so h-full doesn't work well -->
+<div class="h-[80vh] w-full">
+  <div class="border-gray h-full w-full rounded-[5px] border bg-[#000000] p-1">
+    <div bind:this={terminalDiv} id="terminal" class="h-full w-full" />
+  </div>
 </div>
diff --git a/svelte/src/components/web-ui/web-ui.svelte b/svelte/src/components/web-ui/web-ui.svelte
index 1c24c75b..261caaca 100644
--- a/svelte/src/components/web-ui/web-ui.svelte
+++ b/svelte/src/components/web-ui/web-ui.svelte
@@ -4,17 +4,10 @@
 </script>
 
 {#if pty && pty.guiURL}
-  <div class="border-gray mt-4 rounded-[5px] border p-1">
-    <iframe
-      id="terminal"
-      title="{pty.project} web UI"
-      src={pty.guiURL}
-      style="height: 100vh; width: 100%"
-    />
+  <!-- FIXME: find a better way to make this div resize.  Main container is height:auto so h-full doesn't work well -->
+  <div class="h-[80vh] w-full">
+    <div class="border-gray mb-4 h-full w-full rounded-[5px] border p-1">
+      <iframe id="terminal" title="{pty.project} web UI" src={pty.guiURL} class="h-full w-full" />
+    </div>
   </div>
 {/if}
-
-<!--
-  ^^I cannot tell you why this styling is even needed
-  FIXME: you fix this thanks
--->
diff --git a/svelte/src/libs/stores.ts b/svelte/src/libs/stores.ts
index 8560b628..6fdbd41f 100644
--- a/svelte/src/libs/stores.ts
+++ b/svelte/src/libs/stores.ts
@@ -13,7 +13,6 @@ import initAppUpdateStore from "./stores/update";
 import { trackSearch } from "./analytics";
 import initScrollStore from "./stores/scroll";
 import ptysStore from "./stores/ptys";
-import initTabStore from "./stores/tabs";
 
 export const featuredPackages = writable<Package[]>([]);
 export const ptys = ptysStore;
@@ -145,5 +144,3 @@ export const notificationStore = initNotificationStore();
 export const appUpdateStore = initAppUpdateStore();
 
 export const scrollStore = initScrollStore();
-
-export const tabStore = initTabStore();
diff --git a/svelte/src/libs/stores/tabs.ts b/svelte/src/libs/stores/tabs.ts
deleted file mode 100644
index ab1fb78b..00000000
--- a/svelte/src/libs/stores/tabs.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { TabId } from "$libs/types";
-import { writable } from "svelte/store";
-
-export default function initTabStore() {
-  const activeTab = writable<TabId>();
-
-  return {
-    activeTab,
-    setActiveTab: (id: TabId) => {
-      activeTab.set(id);
-    }
-  };
-}
diff --git a/svelte/src/libs/translations/languages/de.json b/svelte/src/libs/translations/languages/de.json
index 7411fa7a..b99c45b7 100644
--- a/svelte/src/libs/translations/languages/de.json
+++ b/svelte/src/libs/translations/languages/de.json
@@ -55,8 +55,7 @@
       "view-on-github": "AUF GITHUB ANSEHEN"
     },
     "tabs": {
-      "details": "Details",
-      "versions": "Versionen",
+      "details": "pkg",
       "cli": "cli",
       "gui": "gui"
     },
diff --git a/svelte/src/libs/translations/languages/en.json b/svelte/src/libs/translations/languages/en.json
index 89e11df7..249d59f6 100644
--- a/svelte/src/libs/translations/languages/en.json
+++ b/svelte/src/libs/translations/languages/en.json
@@ -55,8 +55,7 @@
       "view-on-github": "VIEW ON GITHUB"
     },
     "tabs": {
-      "details": "details",
-      "versions": "versions",
+      "details": "pkg",
       "cli": "cli",
       "gui": "gui"
     },
diff --git a/svelte/src/libs/translations/languages/ru.json b/svelte/src/libs/translations/languages/ru.json
index 54b575a8..81f83990 100644
--- a/svelte/src/libs/translations/languages/ru.json
+++ b/svelte/src/libs/translations/languages/ru.json
@@ -55,8 +55,7 @@
       "view-on-github": "ПОСМОТРЕТЬ НА GITHUB"
     },
     "tabs": {
-      "details": "подробности",
-      "versions": "версии",
+      "details": "pkg",
       "cli": "cli",
       "gui": "gui"
     },
diff --git a/svelte/src/libs/types.ts b/svelte/src/libs/types.ts
index e0e335b6..65cac9d9 100644
--- a/svelte/src/libs/types.ts
+++ b/svelte/src/libs/types.ts
@@ -72,27 +72,6 @@ export type Bottle = {
   updated_at?: Date | string;
 };
 
-export type TabId = "details" | "versions" | "cli" | "gui";
-
-export type Tab = {
-  id: TabId;
-  label: string;
-  hidden?: boolean;
-  props?: {
-    [key: string]:
-      | string
-      | Date
-      | number
-      | Record<string, unknown>
-      | Array<string>
-      | Array<number>
-      | Array<Date>
-      | Array<Record<string, unknown>>
-      | Package;
-  };
-  component: ComponentType;
-};
-
 export type Snippet = {
   snippet_id: string;
   created_at: Date | string;
diff --git a/svelte/src/routes/packages/[slug]/+page.svelte b/svelte/src/routes/packages/[slug]/+page.svelte
index 3272dabe..5c3bb3aa 100644
--- a/svelte/src/routes/packages/[slug]/+page.svelte
+++ b/svelte/src/routes/packages/[slug]/+page.svelte
@@ -1,19 +1,10 @@
 <script lang="ts">
   import "$appcss";
   import { t } from "$libs/translations";
-  import SkeletonLoader from "$components/skeleton-loader/skeleton-loader.svelte";
   import { page } from "$app/stores";
-  import PackageBanner from "$components/package-banner/package-banner.svelte";
-  import Tabs from "$components/tabs/tabs.svelte";
-  import type { Tab } from "$libs/types";
-  import Bottles from "$components/bottles/bottles.svelte";
-  import PackageMetas from "$components/package-metas/package-metas.svelte";
-  import Markdown from "$components/markdown/markdown.svelte";
   import Preloader from "$components/preloader/preloader.svelte";
-  import useDefaultBrowser from "$libs/utils/use-default-browser";
   import Terminal from "$components/terminal/terminal.svelte";
   import WebUI from "$components/web-ui/web-ui.svelte";
-  import { tabStore } from "$libs/stores";
 
   /** @type {import('./$types').PageData} */
   export let data: { slug: string; content: string; title: string };
@@ -23,47 +14,17 @@
   import NotificationBar from "$components/notification-bar/notification-bar.svelte";
   import { trackViewPackagePage } from "$libs/analytics";
   import type { TeaSubprocess } from "$libs/stores/ptys";
+  import PackagePage from "$components/package-page/package-page.svelte";
+  import type { GUIPackage } from "$libs/types";
+  import Tab from "$components/tabs/tab.svelte";
 
   const { packageList } = packagesStore;
-  const { setActiveTab } = tabStore;
 
-  $: pkg = $packageList.find((p) => p.slug === data?.slug);
-  $: bottles = pkg?.bottles || [];
-  $: versions = [...new Set(bottles.map((b) => b.version))];
-  $: readme = pkg?.readme || { data: "", type: "md" };
+  $: pkg = $packageList.find((p: GUIPackage) => p.slug === data?.slug);
 
   $: pty = undefined as TeaSubprocess | undefined;
 
-  $: tabs = [
-    readme?.data !== "" && {
-      id: "details",
-      label: $t("tabs.details"),
-      component: Markdown,
-      props: { source: readme, hook: useDefaultBrowser }
-    },
-    bottles?.length && {
-      id: "versions",
-      label: `${$t("tabs.versions")} (${versions.length || 0})`,
-      component: Bottles,
-      props: {
-        bottles
-      }
-    },
-    {
-      id: "cli",
-      label: $t("tabs.cli"),
-      component: Terminal,
-      props: { project: pkg?.full_name },
-      hidden: !pty
-    },
-    {
-      id: "gui",
-      label: $t("tabs.gui"),
-      component: WebUI,
-      props: { pty },
-      hidden: !pty?.guiURL
-    }
-  ].filter((t) => t && t?.label) as unknown as Tab[];
+  $: activeTab = "details" as "details" | "cli" | "gui";
 
   const url = $page.url;
 
@@ -72,11 +33,11 @@
   onMount(() => {
     packagesStore.syncPackageData(pkg);
     if (pty && pty.guiURL) {
-      setActiveTab("gui");
+      activeTab = "gui";
     } else if (pty && pty.output.length) {
-      setActiveTab("cli");
+      activeTab = "cli";
     } else {
-      setActiveTab(tabs[0]?.id);
+      activeTab = "details";
     }
   });
 
@@ -92,7 +53,7 @@
       unsubscribePty = ptys.subscribeToSubprocess(pkg?.full_name, (newPty) => {
         // if the gui url has just appeared, switch to the gui tab
         if (!pty?.guiURL && newPty?.guiURL) {
-          setActiveTab("gui");
+          activeTab = "gui";
         }
         // we need to copy this because we're looking for the delta of guiURL
         pty = { ...newPty };
@@ -101,40 +62,54 @@
   }
 </script>
 
-<header class="text-gray mx-16 mb-4 border border-x-0 border-t-0 py-5">
-  <a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a>
-  ›
-  <a class="hover:text-white hover:opacity-80" href="/?tab={tab || 'discover'}"
-    >{tab ? $t(`tags.${tab}`).toLowerCase() : "discover"}</a
+<div class="h-full w-full">
+  <header
+    class="text-gray mb-4 flex h-[52px] items-center justify-between border border-x-0 border-t-0 px-16"
   >
-  ›
-  <span class="text-white">{pkg?.full_name}</span>
-</header>
-<div class="mx-16 mb-4">
-  <NotificationBar />
-</div>
-{#if pkg}
-  <div class="px-16">
-    <section>
-      <PackageBanner {pkg} on:openterminal={() => setActiveTab("cli")} />
-    </section>
+    <div>
+      <a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a>
+      ›
+      <a class="hover:text-white hover:opacity-80" href="/?tab={tab || 'discover'}"
+        >{tab ? $t(`tags.${tab}`).toLowerCase() : "discover"}</a
+      >
+      ›
+      <span class="text-white">{pkg?.full_name}</span>
+    </div>
 
-    <section class="mt-8 flex gap-8">
-      <div class="w-2/3">
-        {#if tabs.length === 0}
-          <div class="flex w-full justify-center py-10">
-            <SkeletonLoader />
-          </div>
-        {/if}
-        <Tabs {tabs} />
-      </div>
-      <div class="w-1/3">
-        {#if pkg}
-          <PackageMetas {pkg} />
-        {/if}
-      </div>
-    </section>
+    <div class="flex h-full">
+      <Tab
+        label="tabs.details"
+        isActive={activeTab === "details"}
+        onClick={() => (activeTab = "details")}
+      />
+      <Tab
+        label="tabs.cli"
+        isActive={activeTab === "cli"}
+        onClick={() => (activeTab = "cli")}
+        hidden={!pty}
+      />
+      <Tab
+        label="tabs.gui"
+        isActive={activeTab === "gui"}
+        onClick={() => (activeTab = "gui")}
+        hidden={!pty?.guiURL}
+      />
+    </div>
+  </header>
+  <div class="mx-16 mb-4">
+    <NotificationBar />
   </div>
-{:else}
-  <Preloader />
-{/if}
+  {#if pkg}
+    <div class="flex px-16" class:hidden={activeTab !== "details"}>
+      <PackagePage on:openterminal={() => (activeTab = "cli")} {pkg} />
+    </div>
+    <div class="flex h-full px-16" class:hidden={activeTab !== "cli"}>
+      <Terminal project={pkg?.full_name} />
+    </div>
+    <div class="flex h-full px-16" class:hidden={activeTab !== "gui"}>
+      <WebUI {pty} />
+    </div>
+  {:else}
+    <Preloader />
+  {/if}
+</div>