diff --git a/lib/atomic/organizations/partner.ex b/lib/atomic/organizations/partner.ex
index 1da52391..17a96514 100644
--- a/lib/atomic/organizations/partner.ex
+++ b/lib/atomic/organizations/partner.ex
@@ -27,6 +27,8 @@ defmodule Atomic.Organizations.Partner do
     field :description, :string
     field :notes, :string
 
+    field :banner, Atomic.Uploaders.Banner.Type
+
     field :benefits, :string
     field :archived, :boolean, default: false
     field :image, Uploaders.PartnerImage.Type
diff --git a/lib/atomic_web/live/partner_live/components/partner_card.ex b/lib/atomic_web/live/partner_live/components/partner_card.ex
new file mode 100644
index 00000000..c02d2212
--- /dev/null
+++ b/lib/atomic_web/live/partner_live/components/partner_card.ex
@@ -0,0 +1,49 @@
+defmodule AtomicWeb.PartnerLive.Components.PartnerCard do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  import AtomicWeb.Components.{Avatar, Gradient}
+
+  attr :partner, :map, required: true
+
+  def partner_card(assigns) do
+    ~H"""
+    <li class="grid h-full w-full rounded-lg border border-zinc-200 hover:bg-zinc-50">
+      <div class="h-12 w-full">
+        <div class="h-full w-full">
+          <.gradient seed={@partner.id} class="rounded-t-lg" />
+        </div>
+      </div>
+
+      <div class="grid w-full">
+        <div class="flex flex-grow px-6">
+          <div class="relative bottom-6 flex">
+            <.avatar color={:light_zinc} class="" name={@partner.name} src={Uploaders.PartnerImage.url({@partner.image, @partner}, :original)} type={:company} size={:xl} />
+          </div>
+          <div class="mt-5 px-4">
+            <div class="group relative">
+              <p class="text-md line-clamp-1 text-lg font-semibold leading-6 text-zinc-900">{@partner.name}</p>
+              <div class="absolute top-full left-14 mt-2 hidden w-max rounded bg-gray-500 p-1 text-sm text-white opacity-100 transition-opacity duration-300 group-hover:block">{@partner.name}</div>
+              <div class="absolute top-full left-16 mt-1 hidden border-r-4 border-b-4 border-l-4 border-r-transparent border-b-gray-500 border-l-transparent group-hover:block"></div>
+            </div>
+            <%= if @partner.location do %>
+              <div class="z-1 flex items-center gap-x-1 leading-6">
+                <.icon name="hero-map-pin" class="h-6 w-6 text-zinc-400" />
+                <p class="text-center text-sm text-blue-400">{@partner.location.name}</p>
+              </div>
+            <% end %>
+          </div>
+        </div>
+        <ul class="flex list-none flex-col gap-2 px-10 pb-10">
+          <%= Enum.map(String.split(@partner.benefits, "\n"), fn phrase -> %>
+            <li class="flex items-start justify-start gap-1 text-sm leading-5 text-zinc-500">
+              <.icon name="hero-check" class="h-4 w-4 shrink-0" />
+              <span class="line-clamp-1">{phrase}</span>
+            </li>
+          <% end) %>
+        </ul>
+      </div>
+    </li>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index b2384695..e9d2250c 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -4,6 +4,7 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
   alias Atomic.Partners
   alias AtomicWeb.Components.ImageUploader
   import AtomicWeb.Components.Forms
+  import ImageUploader
 
   @impl true
   def render(assigns) do
@@ -38,7 +39,7 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
             <p class="atomic-form-help-text pb-4">{gettext("The image of the partner (960x960px for best display)")}</p>
           </div>
           <div>
-            <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
+            <.image_uploader id="uploader" upload={@uploads.image} class="h-32 w-full border border-zinc-300 shadow-sm xl:h-64" image_class="h-32 w-full object-cover xl:h-64" />
           </div>
         </div>
         <h2 class="mt-8 mb-2 w-full border-b pb-2 text-lg font-semibold text-zinc-900">{gettext("Internal")}</h2>
diff --git a/lib/atomic_web/live/partner_live/index.ex b/lib/atomic_web/live/partner_live/index.ex
index ec73fc5e..d5c0afb4 100644
--- a/lib/atomic_web/live/partner_live/index.ex
+++ b/lib/atomic_web/live/partner_live/index.ex
@@ -1,7 +1,8 @@
 defmodule AtomicWeb.PartnerLive.Index do
+  import AtomicWeb.PartnerLive.Components.PartnerCard
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Button, Empty, Pagination, Tabs}
+  import AtomicWeb.Components.{Button, Empty, Pagination, Tabs}
   import AtomicWeb.LiveHelpers
 
   alias Atomic.Accounts
diff --git a/lib/atomic_web/live/partner_live/index.html.heex b/lib/atomic_web/live/partner_live/index.html.heex
index b7d477c6..8c87de07 100644
--- a/lib/atomic_web/live/partner_live/index.html.heex
+++ b/lib/atomic_web/live/partner_live/index.html.heex
@@ -1,4 +1,4 @@
-<.page title="Partners">
+<.page title={"#{@organization.name} Partners"}>
   <:actions>
     <%= if not @empty? and @has_permissions? do %>
       <.button navigate={~p"/organizations/#{@current_organization}/partners/new"} icon="hero-plus">
@@ -8,9 +8,9 @@
   </:actions>
   <!-- Tabs -->
   <div class="pt-4">
-    <div class="flex flex-col-reverse border-b border-zinc-200 xl:flex-row">
-      <div class="flex w-full items-center justify-between">
-        <.tabs class="px-4 sm:px-6 lg:px-8">
+    <div class="flex flex-col border-b border-zinc-200">
+      <div class="flex w-full flex-wrap items-center justify-between gap-2">
+        <.tabs class="overflow-auto px-4 sm:px-6 lg:px-8">
           <.link patch="?tab=all" replace={false}>
             <.tab active={@current_tab == "all"}>
               {gettext("Current Partners")}
@@ -29,42 +29,18 @@
   </div>
   <!-- Partners index -->
   <%= if @empty? and @has_permissions? do %>
-    <div class="mt-32">
+    <div class="mt-16 text-center sm:mt-32">
       <.empty_state url={~p"/organizations/#{@organization}/partners/new"} placeholder="partner" />
     </div>
   <% else %>
-    <ul role="list" class="">
+    <ul role="list" class="mx-4 my-4 grid gap-x-4 gap-y-4 lg:grid-cols-2">
       <%= for partner <- @partners do %>
-        <.link navigate={~p"/organizations/#{@organization}/partners/#{partner}"} class="block hover:bg-zinc-50">
-          <li class="flex flex-col justify-between gap-x-6 border-b border-zinc-200 px-4 py-5 md:flex-row">
-            <div class="flex w-full flex-col gap-x-4 md:flex-row">
-              <div class="flex-shrink-0">
-                <.avatar color={:light_zinc} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:sm} />
-              </div>
-              <div class="flex-grow">
-                <p class="text-md font-semibold leading-6 text-zinc-900">{partner.name}</p>
-                <%= if partner.location do %>
-                  <div class="z-1 flex flex-row items-center gap-x-1 text-sm leading-6">
-                    <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
-                    <p class="text-blue-500">{partner.location.name}</p>
-                  </div>
-                <% end %>
-                <p class="mt-1 overflow-hidden truncate overflow-ellipsis whitespace-normal text-xs leading-5 text-zinc-500">
-                  <%= Enum.map(String.split(partner.benefits, "\n"), fn phrase -> %>
-                    <%= if String.length(phrase) < 150 do %>
-                      {phrase}<br />
-                    <% else %>
-                      {String.slice(phrase, 0..150) <> "..."} <br />
-                    <% end %>
-                  <% end) %>
-                </p>
-              </div>
-            </div>
-          </li>
+        <.link navigate={~p"/organizations/#{partner.organization_id}/partners/#{partner.id}"} class="block hover:bg-zinc-50">
+          <.partner_card partner={partner} />
         </.link>
       <% end %>
     </ul>
 
-    <.pagination items={@partners} meta={@meta} params={@params} class="mt-2 flex w-full items-center justify-between" />
+    <.pagination items={@partners} meta={@meta} params={@params} class="mt-2 flex w-full flex-wrap items-center justify-between" />
   <% end %>
 </.page>
diff --git a/lib/atomic_web/live/partner_live/show.ex b/lib/atomic_web/live/partner_live/show.ex
index 522d1feb..c3a73453 100644
--- a/lib/atomic_web/live/partner_live/show.ex
+++ b/lib/atomic_web/live/partner_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.PartnerLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Socials}
+  import AtomicWeb.Components.{Avatar, Tabs, Gradient}
   import AtomicWeb.LiveHelpers
 
   alias Atomic.Accounts
@@ -14,7 +14,7 @@ defmodule AtomicWeb.PartnerLive.Show do
   end
 
   @impl true
-  def handle_params(%{"organization_id" => organization_id, "id" => id}, _, socket) do
+  def handle_params(%{"organization_id" => organization_id, "id" => id} = params, _, socket) do
     organization = Organizations.get_organization!(organization_id)
     partner = Partners.get_partner!(id)
 
@@ -23,6 +23,7 @@ defmodule AtomicWeb.PartnerLive.Show do
      |> assign(:page_title, partner.name)
      |> assign_page_metadata(:partner)
      |> assign(:current_page, :partners)
+     |> assign(:current_tab, current_tab(socket, params))
      |> assign(:organization, organization)
      |> assign(:partner, partner)
      |> assign(
@@ -32,6 +33,9 @@ defmodule AtomicWeb.PartnerLive.Show do
      |> assign(:has_permissions?, has_permissions?(socket, organization_id))}
   end
 
+  defp current_tab(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
+  defp current_tab(_socket, _params), do: "benefits"
+
   defp has_permissions?(socket, _organization_id) when not socket.assigns.is_authenticated?,
     do: false
 
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index 5833bb63..0286e3f3 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -1,108 +1,143 @@
-<.page title="Partners">
-  <:actions>
-    <%= if @has_permissions? do %>
-      <div class="lg:border-primary-500 lg:block">
-        <.button navigate={~p"/organizations/#{@organization}/partners/#{@partner}/edit"} icon="hero-pencil">
-          {gettext("Edit Partner")}
-        </.button>
-      </div>
-    <% end %>
-  </:actions>
-  <div class="border-t-100 min-h-fit max-w-5xl select-none sm:mx-6 sm:px-0 lg:mx-0 lg:px-8">
-    <div class="mt-6 flex flex-col gap-2 sm:justify-center">
-      <div class="flex flex-row">
+<!--Header-->
+<div class="h-24 w-full select-none lg:h-32">
+  <%= if @partner.banner do %>
+    <img class="h-32 w-full object-cover" src={Uploaders.Banner.url({@partner.banner, @partner}, :original)} />
+  <% else %>
+    <.gradient seed={@partner.id} class="object-cover" />
+  <% end %>
+</div>
+<.page title="">
+  <!--Body-->
+  <div class="border-t-100 min-h-fit max-w-5xl select-none px-4 sm:px-6 lg:px-8">
+    <div class="mt-2 flex flex-col gap-2 sm:justify-center">
+      <div class="relative mb-4 flex flex-col gap-x-4 gap-y-4 sm:flex-row">
         <div class="flex flex-col items-center px-2 lg:justify-none">
-          <.avatar color={:light_zinc} name={@partner.name} src={Uploaders.PartnerImage.url({@partner.image, @partner}, :original)} type={:company} size={:xl} />
+          <.avatar class="size-28" color={:light_zinc} name={@partner.name} src={Uploaders.PartnerImage.url({@partner.image, @partner}, :original)} type={:company} size={:xl} />
         </div>
-        <div>
-          <div class="flex items-center justify-between">
-            <h1 class="text-wrap ml-2 flex-1 select-none truncate pr-4 text-xl font-bold text-zinc-900 sm:text-2xl">
+        <div class="flex w-full flex-col gap-5">
+          <div class="flex w-full items-start">
+            <p class="text-wrap flex flex-1 items-center truncate text-center text-2xl font-bold text-gray-900 sm:text-left lg:py-1">
               {@partner.name}
-            </h1>
-          </div>
-          <%= if @partner.location do %>
-            <!-- Location -->
-            <div class="text-md flex flex-row items-center gap-x-1 leading-6">
-              <.icon name="hero-map-pin" class="h-5 w-5 text-zinc-400" />
-              <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}>
-                {@partner.location.name}
-              </.link>
-            </div>
-          <% end %>
+            </p>
 
-          <%= if @partner.socials do %>
-            <!-- Socials and Website -->
-            <div class="mt-2 flex flex-wrap items-center gap-x-4">
-              <!-- Website -->
-              <%= if @partner.socials.website do %>
-                <div class="flex flex-row items-center gap-x-1">
-                  <.icon name="hero-globe-alt" class="h-5 w-5 text-zinc-400" />
-                  <.link class="text-blue-500" href={@partner.socials.website}>Website</.link>
+            <%= if @has_permissions? do %>
+              <div>
+                <.button navigate={~p"/organizations/#{@partner.organization_id}/partners/#{@partner.id}/edit"} icon="hero-pencil">
+                  <span class="hidden lg:block">
+                    {gettext("Edit Partner")}
+                  </span>
+                </.button>
+              </div>
+            <% end %>
+          </div>
+          <div class="grid h-fit w-auto gap-y-2 lg:w-full">
+            <div class="my-0 grid gap-y-2">
+              <%= if @partner.location do %>
+                <div class="flex items-center">
+                  <.icon name="hero-map-pin" class="h-5 w-5 text-zinc-400" />
+                  <.link class="text-sm text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}>{@partner.location.name}</.link>
                 </div>
               <% end %>
-              <!-- Socials -->
               <%= if @partner.socials do %>
-                <.socials entity={@partner.socials} />
+                <div class="flex flex-wrap gap-2">
+                  <%= if @partner.socials.website do %>
+                    <div class="flex items-center gap-x-1">
+                      <.icon name="hero-globe-alt" class="h-5 w-5 text-zinc-400" />
+                      <.link class="text-sm text-blue-500" href={@partner.socials.website}>Website</.link>
+                    </div>
+                  <% end %>
+                  <%= if @partner.socials.instagram do %>
+                    <div class="flex items-center gap-x-1">
+                      <img src="/images/instagram.svg" class="h-5 w-5" alt="Instagram" />
+                      <.link class="text-sm text-blue-500" href={"https://instagram.com/" <> @partner.socials.instagram}>Instagram</.link>
+                    </div>
+                  <% end %>
+                  <%= if @partner.socials.facebook do %>
+                    <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
+                      <img src="/images/facebook.svg" class="h-5 w-5" alt="Facebook" />
+                      <.link class="text-sm text-blue-500" href={"https://facebook.com/" <> @partner.socials.facebook}>Facebook</.link>
+                    </div>
+                  <% end %>
+                  <%= if @partner.socials.x do %>
+                    <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
+                      <img src="/images/x.svg" class="h-5 w-5" alt="X" />
+                      <.link class="text-sm text-blue-500" href={"https://x.com/" <> @partner.socials.x}>X</.link>
+                    </div>
+                  <% end %>
+                </div>
               <% end %>
             </div>
-          <% end %>
-        </div>
-      </div>
-      <div>
-        <div class="mt-1 px-2 py-4 text-zinc-800">
-          <div class="flex flex-row items-center gap-x-2">
-            <.icon name="hero-clock" class="size-5 mb-2" />
-            <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-zinc-900">Overview</h2>
           </div>
-          <span class="py-4">
-            <%= Enum.map(String.split(@partner.description, "\n"), fn phrase -> %>
-              {phrase}
-            <% end) %>
-          </span>
         </div>
-        <div class="px-2 py-4 text-zinc-800">
-          <div class="flex flex-row items-center gap-x-2 text-zinc-800">
-            <.icon name="hero-signal" class="size-5 mb-2" />
-            <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-zinc-900">Benefits</h2>
-          </div>
-          <span>
-            <%= Enum.map(String.split(@partner.benefits, "\n"), fn phrase -> %>
+      </div>
+      <!--Tabs-->
+      <.tabs class="scrollbar-hide mt-2 flex overflow-auto px-4">
+        <.link patch="?tab=benefits" replace={false}>
+          <.tab id="benefits-tab" active={@current_tab == "benefits"}>
+            <.icon name="hero-signal" class="size-5 mr-2" />
+            {gettext("Benefits")}
+          </.tab>
+        </.link>
+        <.link patch="?tab=about" replace={false}>
+          <.tab id="about-tab" active={@current_tab == "about"}>
+            <.icon name="hero-information-circle" class="size-5 mr-2" />
+            {gettext("About")}
+          </.tab>
+        </.link>
+      </.tabs>
+      <!-- Content -->
+      <div class="mt-4">
+        <%= if @current_tab == "benefits" do %>
+          <div class="px-2 py-4 text-zinc-800">
+            <%= for phrase <- String.split(@partner.benefits, "\n") do %>
               <%= if String.length(phrase) < 300 do %>
                 {phrase}
               <% else %>
                 {String.slice(phrase, 0..300)}
               <% end %>
-            <% end) %>
-          </span>
-        </div>
-        <%= if @partners do %>
-          <div class="flex flex-col gap-x-2 text-zinc-800">
-            <div class="flex flex-row items-center gap-x-2 px-2">
-              <.icon name="hero-star" class="size-5 mb-2" />
-              <h2 class="mb-2 flex-1 select-none truncate py-2 text-lg font-semibold text-zinc-900">Related Partners</h2>
-            </div>
-            <div class="sm:grid sm:grid-cols-2 sm:gap-px">
-              <%= for partner <- @partners |> Enum.filter(fn partner -> partner.id != @partner.id end) do %>
-                <div class="group relative m-2 rounded-lg border border-zinc-200 bg-white p-4 hover:bg-zinc-50">
-                  <.link href={~p"/organizations/#{@organization}/partners/#{@partner}"}>
-                    <div class="flex flex-row items-center space-x-2">
-                      <.avatar color={:light_zinc} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:xs} />
-                      <h1 class="text-lg font-semibold text-zinc-800">{partner.name}</h1>
-                    </div>
-                    <%= if partner.location do %>
-                      <div class="flex flex-row items-center gap-x-1">
-                        <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
-                        <span class="text-blue-500">{partner.location.name}</span>
-                      </div>
-                    <% end %>
-                    <span class="text-md text-zinc-500">{partner.description}</span>
-                  </.link>
-                </div>
-              <% end %>
-            </div>
+            <% end %>
+          </div>
+        <% end %>
+
+        <%= if @current_tab == "about" do %>
+          <div class="px-2 py-4 text-zinc-800">
+            <%= for phrase <- String.split(@partner.description, "\n") do %>
+              {phrase}
+            <% end %>
           </div>
         <% end %>
       </div>
     </div>
   </div>
+  <%= if @partners do %>
+    <div class="mt-4 flex flex-col gap-x-2 text-zinc-800">
+      <div class="flex flex-row items-center gap-x-2 px-4 sm:px-6 lg:px-8">
+        <.icon name="hero-star" class="mb-2 h-5 w-5" />
+        <h2 class="mb-2 flex-1 select-none truncate py-2 text-lg font-semibold text-gray-900">Related Partners</h2>
+      </div>
+      <div class="grid gap-4 px-4 lg:grid-cols-2 lg:px-6">
+        <%= for partner <- @partners |> Enum.filter(fn partner -> partner.id != @partner.id end) do %>
+          <.link href={~p"/organizations/#{partner.organization_id}/partners/#{partner.id}"}>
+            <li class="flex h-full flex-row justify-between gap-x-4 rounded-lg border border-zinc-200 px-4 py-5 hover:bg-zinc-50 md:flex-row">
+              <div class="flex-shrink-0">
+                <.avatar class="size-10" color={:light_zinc} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:xs} />
+              </div>
+              <div class="flex-grow flex-col gap-y-5">
+                <h1 class="text-lg font-semibold text-zinc-800">{partner.name}</h1>
+                <%= if partner.location do %>
+                  <div class="flex flex-row items-center gap-x-1">
+                    <.icon name="hero-map-pin" class="my-1 h-4 w-4 text-zinc-400" />
+                    <span class="text-xs text-blue-500">{partner.location.name}</span>
+                  </div>
+                <% end %>
+                <p class="mt-1 overflow-hidden truncate overflow-ellipsis whitespace-normal text-xs leading-5 text-zinc-500">
+                  <span class="text-md text-sm text-zinc-500">{partner.description}</span>
+                </p>
+              </div>
+            </li>
+          </.link>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
 </.page>
diff --git a/priv/repo/migrations/20221123000537_create_partners.exs b/priv/repo/migrations/20221123000537_create_partners.exs
index 68470bf5..242660aa 100644
--- a/priv/repo/migrations/20221123000537_create_partners.exs
+++ b/priv/repo/migrations/20221123000537_create_partners.exs
@@ -16,6 +16,8 @@ defmodule Atomic.Repo.Migrations.CreatePartners do
       add :location, :map
       add :socials, :map
 
+      add :banner, :string
+
       add :organization_id, references(:organizations, on_delete: :delete_all, type: :binary_id)
 
       timestamps()