diff --git a/public/icons/external-link.svg b/public/icons/external-link.svg
new file mode 100644
index 0000000..aca4a4a
--- /dev/null
+++ b/public/icons/external-link.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M16.5 6.5v-5m0 0h-5m5 0L9.833 8.167m-2.5-5H5.5c-1.4 0-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C1.5 5.066 1.5 5.767 1.5 7.167V12.5c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092C3.4 16.5 4.1 16.5 5.5 16.5h5.333c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092c.272-.535.272-1.235.272-2.635v-1.833"
+        stroke="#7B818A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/public/models/mistral.webp b/public/models/mistral.webp
new file mode 100644
index 0000000..b353391
Binary files /dev/null and b/public/models/mistral.webp differ
diff --git a/src/components/Cards/ModelCard/ModelCard.mdx b/src/components/Cards/ModelCard/ModelCard.mdx
new file mode 100644
index 0000000..f59af58
--- /dev/null
+++ b/src/components/Cards/ModelCard/ModelCard.mdx
@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as ModelCardStories from './ModelCard.stories';
+
+<Meta of={ModelCardStories} />
+
+# Model Card
+
+<Canvas of={ModelCardStories.Default} />
+
+### Props Table
+
+<ArgTypes />
\ No newline at end of file
diff --git a/src/components/Cards/ModelCard/ModelCard.stories.tsx b/src/components/Cards/ModelCard/ModelCard.stories.tsx
new file mode 100644
index 0000000..db0b03e
--- /dev/null
+++ b/src/components/Cards/ModelCard/ModelCard.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ModelCard from ".";
+
+const meta: Meta<typeof ModelCard> = {
+  title: "Components/Model Card",
+  component: ModelCard,
+  decorators: [
+    (Story) => (
+      <main className="container">
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModelCard>;
+
+export const Default: Story = {
+  args: {
+    icon: "/models/mistral.webp",
+    modelAuthor: "mistralai",
+    modelName: "Mistral-7B-v0.1",
+    externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+  },
+};
diff --git a/src/components/Cards/ModelCard/ModelCard.tsx b/src/components/Cards/ModelCard/ModelCard.tsx
new file mode 100644
index 0000000..01fd19d
--- /dev/null
+++ b/src/components/Cards/ModelCard/ModelCard.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react";
+
+interface ModelCardProps {
+  /** Image url for model icon */
+  icon: string;
+  /** Model modelAuthor */
+  modelAuthor: string;
+  /** Model name */
+  modelName: string;
+  /** External link to model */
+  externalLink?: string;
+}
+
+const ModelCard: FC<ModelCardProps> = ({
+  icon,
+  modelAuthor,
+  modelName,
+  externalLink,
+}) => (
+  <div className="card model-card">
+    <div className="info">
+      <img className="icon" src={icon} alt={`${modelAuthor} icon`} />
+      <p>
+        <span>{modelAuthor}</span>/<span>{modelName}</span>
+      </p>
+    </div>
+    {externalLink && (
+      <a href={externalLink} target="_blank">
+        <img src="/icons/external-link.svg" alt="Follow link" />
+      </a>
+    )}
+  </div>
+);
+
+export default ModelCard;
diff --git a/src/components/Cards/ModelCard/index.ts b/src/components/Cards/ModelCard/index.ts
new file mode 100644
index 0000000..35b9014
--- /dev/null
+++ b/src/components/Cards/ModelCard/index.ts
@@ -0,0 +1,2 @@
+import ModelCard from "./ModelCard";
+export default ModelCard;
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index d7f21c3..1b94b8a 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof Select>;
 
 export const Default: Story = {
   args: {
-    listTitle: "Year",
+    label: "Year",
     listItems: [
       {
         value: "2024",
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index d9b6c9c..46359b7 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -10,17 +10,21 @@ import {
 } from "react-aria-components";
 
 interface listItem {
+  /** List item value (used for key) */
   value: string;
+  /** List item label */
   label: string;
 }
 interface SelectProps {
-  listTitle?: string;
+  /** Select field label */
+  label?: string;
+  /** Select field list items */
   listItems: listItem[];
 }
 
-const Select: FC<SelectProps> = ({ listTitle, listItems }) => (
+const Select: FC<SelectProps> = ({ label, listItems }) => (
   <ReactAriaSelect className="select" defaultSelectedKey={"2024"}>
-    {listTitle && <Label>{listTitle}</Label>}
+    {label && <Label>{label}</Label>}
     <Button>
       <SelectValue />
       <span aria-hidden="true" className="icon">
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
new file mode 100644
index 0000000..42e4ac4
--- /dev/null
+++ b/src/styles/components/cards.css
@@ -0,0 +1,38 @@
+.card {
+  @apply justify-between max-w-[700px] bg-gray-50 border border-gray-300 rounded px-6 py-4 dark:bg-gray-900 dark:border-gray-600;
+  &,
+  .info {
+    @apply flex items-center;
+  }
+  .info {
+    @apply gap-3;
+  }
+  &.model-card {
+    .icon {
+      @apply h-7 w-7 rounded-full border border-gray-300 p-[3px] dark:border-gray-600;
+    }
+    p {
+      @apply flex;
+    }
+    p > span {
+      &:first-child {
+        @apply text-gray-600 font-medium dark:text-gray-300 mr-1;
+      }
+      &:last-child {
+        @apply text-black-600 font-semibold dark:text-gray-100 ml-1;
+      }
+    }
+  }
+  a {
+    @apply m-[-14px] p-[14px];
+    img {
+      @apply transition-filter dark:invert-100 brightness-0 contrast-[25%];
+    }
+    &:hover,
+    &:focus-visible {
+      img {
+        @apply brightness-0 contrast-100;
+      }
+    }
+  }
+}
diff --git a/src/styles/main.css b/src/styles/main.css
index 8dd03e5..0417e8b 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,4 +1,5 @@
 @import "./global.css";
+@import "./components/cards.css";
 @import "./components/chat.css";
 @import "./components/footer.css";
 @import "./components/header.css";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f7e87eb..5d01ac1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -67,6 +67,7 @@ const theme: Config = {
         "font-size": "font-size",
         spacing: "margin, padding, gap",
         sizing: "height, width",
+        filter: "filter",
       },
       invert: {
         "77": ".77",