diff --git a/public/extension/chart-dark.png b/public/extension/chart-dark.png
new file mode 100644
index 00000000..4dfe8a08
Binary files /dev/null and b/public/extension/chart-dark.png differ
diff --git a/public/extension/chart-light.png b/public/extension/chart-light.png
new file mode 100644
index 00000000..b9a368b7
Binary files /dev/null and b/public/extension/chart-light.png differ
diff --git a/public/extension/definition-dark.png b/public/extension/definition-dark.png
new file mode 100644
index 00000000..642e4468
Binary files /dev/null and b/public/extension/definition-dark.png differ
diff --git a/public/extension/definition-light.png b/public/extension/definition-light.png
new file mode 100644
index 00000000..65be8505
Binary files /dev/null and b/public/extension/definition-light.png differ
diff --git a/public/extension/term-dark.png b/public/extension/term-dark.png
new file mode 100644
index 00000000..3a1c3739
Binary files /dev/null and b/public/extension/term-dark.png differ
diff --git a/public/extension/term-light.png b/public/extension/term-light.png
new file mode 100644
index 00000000..72106aad
Binary files /dev/null and b/public/extension/term-light.png differ
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 80ba03b7..16e202f3 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import Link from "next/link";
 
 interface SidebarMenuItemProps {
@@ -17,6 +18,7 @@ export function SidebarMenuItem({
   onClick,
   icon: IconComponent,
   href,
+  selected,
 }: SidebarMenuItemProps) {
   const className =
     "flex p-2 pl-4 text-xs hover:cursor-pointer hover:bg-secondary";
@@ -49,7 +51,10 @@ export function SidebarMenuItem({
   }
 
   return (
-    <button className={className} onClick={onClick}>
+    <button
+      className={cn(className, selected ? "bg-selected" : "")}
+      onClick={onClick}
+    >
       {body}
     </button>
   );
diff --git a/src/extensions/data-catalog/data-catalog-entry-modal.tsx b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
new file mode 100644
index 00000000..7e63027b
--- /dev/null
+++ b/src/extensions/data-catalog/data-catalog-entry-modal.tsx
@@ -0,0 +1,172 @@
+import { ToolbarFiller } from "@/components/gui/toolbar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { LucideLoader } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import DataCatalogDriver, { DataCatalogTermDefinition } from "./driver";
+
+interface Props {
+  driver?: DataCatalogDriver;
+  open: boolean;
+  onSuccess: () => void;
+  onClose: (open: boolean) => void;
+  selectedTermDefinition?: DataCatalogTermDefinition;
+}
+
+export function DataCatalogEntryModal({
+  open,
+  onClose,
+  driver,
+  onSuccess,
+  selectedTermDefinition,
+}: Props) {
+  const [deleting, setDeleting] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState<DataCatalogTermDefinition>({
+    id: "",
+    name: "",
+    otherName: "",
+    definition: "",
+  });
+
+  const clear = useCallback(() => {
+    setLoading(false);
+    setDeleting(false);
+    onClose(false);
+    setFormData({
+      id: "",
+      name: "",
+      otherName: "",
+      definition: "",
+    });
+  }, [onClose]);
+
+  useEffect(() => {
+    if (selectedTermDefinition) {
+      setFormData(selectedTermDefinition);
+    } else {
+      clear();
+    }
+  }, [selectedTermDefinition, clear]);
+
+  const saveTermDefinition = useCallback(() => {
+    setLoading(true);
+    const data = {
+      ...formData,
+      id: selectedTermDefinition?.id || String(Date.now() * 1000), // Use existing ID if editing
+    };
+
+    driver
+      ?.updateTermDefinition(data)
+      .then(() => onSuccess())
+      .finally(() => clear());
+  }, [formData, driver, onSuccess, clear, selectedTermDefinition]);
+
+  function onDelete() {
+    if (!selectedTermDefinition) return;
+
+    setDeleting(true);
+    driver
+      ?.deleteTermDefinition(selectedTermDefinition.id)
+      .then(() => onSuccess())
+      .finally(() => clear());
+  }
+
+  const onChangeValue = useCallback(
+    (value: string, key: keyof DataCatalogTermDefinition) => {
+      setFormData((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    },
+    []
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>
+            {selectedTermDefinition ? "Edit Term" : "Add Term"}
+          </DialogTitle>
+          <DialogDescription>
+            {selectedTermDefinition
+              ? "Modify the existing term definition."
+              : "Add terms to your Data Dictionary to help your team and AI understand important business terminology."}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="items-center gap-4">
+            <Label className="text-right text-xs">
+              Dictionary Term <span className="text-red-400">*</span>
+            </Label>
+            <Input
+              value={formData.name}
+              placeholder="Add a name"
+              className="col-span-3"
+              onChange={(e) => onChangeValue(e.currentTarget.value, "name")}
+            />
+          </div>
+          <div className="items-center gap-4">
+            <Label className="text-right text-xs">Other Names</Label>
+            <Input
+              value={formData.otherName}
+              className="col-span-3"
+              placeholder="Add other names"
+              onChange={(e) =>
+                onChangeValue(e.currentTarget.value, "otherName")
+              }
+            />
+          </div>
+          <div className="items-center gap-4">
+            <Label className="text-right text-xs">
+              Definition <span className="text-red-400">*</span>
+            </Label>
+            <Textarea
+              rows={4}
+              value={formData.definition}
+              className="col-span-3"
+              placeholder="Add a definition"
+              onChange={(e) =>
+                onChangeValue(e.currentTarget.value, "definition")
+              }
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            disabled={loading || !formData.name || !formData.definition}
+            onClick={saveTermDefinition}
+            type="submit"
+          >
+            {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
+            {selectedTermDefinition ? "Save Change" : "Add Entry"}
+          </Button>
+          {selectedTermDefinition && (
+            <Button
+              disabled={deleting}
+              onClick={onDelete}
+              variant="destructive"
+            >
+              {deleting && (
+                <LucideLoader className="mr-1 h-4 w-4 animate-spin" />
+              )}
+              Delete
+            </Button>
+          )}
+          <ToolbarFiller />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/extensions/data-catalog/data-catalog-tab.tsx b/src/extensions/data-catalog/data-catalog-tab.tsx
new file mode 100644
index 00000000..36c2b925
--- /dev/null
+++ b/src/extensions/data-catalog/data-catalog-tab.tsx
@@ -0,0 +1,89 @@
+import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
+import { Button } from "@/components/ui/button";
+import { useConfig } from "@/context/config-provider";
+import { useState } from "react";
+import DataCatalogExtension from ".";
+import { DataCatalogEntryModal } from "./data-catalog-entry-modal";
+import { DataCatalogTermDefinition } from "./driver";
+import EmptyTermDefinition from "./empty-definition";
+import TermDefinitionList from "./term-definition-list";
+
+export default function DataCatalogTab() {
+  const { extensions } = useConfig();
+  const dataCatalogExtension =
+    extensions.getExtension<DataCatalogExtension>("data-catalog");
+  const driver = dataCatalogExtension?.driver;
+
+  const [open, setOpen] = useState(false);
+
+  const [dataCatalog, setDataCatalog] = useState<DataCatalogTermDefinition[]>(
+    () => {
+      return driver?.getTermDefinitions() || [];
+    }
+  );
+
+  const [selectedTermDefinition, setSeletedTermDefinition] =
+    useState<DataCatalogTermDefinition>();
+
+  function onSuccess() {
+    setDataCatalog(driver?.getTermDefinitions() || []);
+  }
+
+  function onOpenModal() {
+    setOpen(true);
+    setSeletedTermDefinition(undefined);
+  }
+
+  if (!driver) {
+    return <div>Missing driver</div>;
+  }
+
+  return (
+    <div className="flex h-full flex-1 flex-col">
+      <div className="border-b p-1">
+        <Toolbar>
+          <div>Data Catalog</div>
+          <ToolbarFiller />
+          <Button size="sm" onClick={onOpenModal}>
+            Add Entry
+          </Button>
+          <DataCatalogEntryModal
+            selectedTermDefinition={selectedTermDefinition}
+            open={open}
+            onClose={setOpen}
+            driver={driver}
+            onSuccess={onSuccess}
+          />
+        </Toolbar>
+      </div>
+      <div className="flex-1 gap-5 overflow-scroll p-10 pb-0">
+        <div className="w-[450px]">
+          <div className="text-3xl font-bold">
+            {dataCatalog?.length === 0
+              ? "Get started with Data Catalog"
+              : "Definitions"}
+          </div>
+          <div className="text-sm">
+            {dataCatalog?.length === 0
+              ? " Provide explanations for terminology in your schema. EZQL will use this to make running queries more efficient and accurate."
+              : "Defined terms to be used in your product."}
+          </div>
+        </div>
+        {dataCatalog?.length === 0 ? (
+          <EmptyTermDefinition />
+        ) : (
+          <TermDefinitionList
+            data={dataCatalog}
+            onSelect={(item) => {
+              setSeletedTermDefinition(item);
+              setOpen(true);
+            }}
+          />
+        )}
+        <Button className="mt-10 mb-10" onClick={onOpenModal}>
+          {dataCatalog?.length === 0 ? "Create your first entry" : "Add Entry"}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/extensions/data-catalog/driver-inmemory.ts b/src/extensions/data-catalog/driver-inmemory.ts
index 23d156e6..137b8e3e 100644
--- a/src/extensions/data-catalog/driver-inmemory.ts
+++ b/src/extensions/data-catalog/driver-inmemory.ts
@@ -4,6 +4,7 @@ import DataCatalogDriver, {
   DataCatalogModelTable,
   DataCatalogModelTableInput,
   DataCatalogSchemas,
+  DataCatalogTermDefinition,
 } from "./driver";
 
 interface DataCatalogInmemoryDriverOptions {
@@ -11,23 +12,36 @@ interface DataCatalogInmemoryDriverOptions {
 }
 
 export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
-  protected schemas: DataCatalogSchemas;
+  private schemas: DataCatalogSchemas;
   protected options: DataCatalogInmemoryDriverOptions;
+  private dataCatalog: DataCatalogTermDefinition[];
 
   constructor(
     schemas: DataCatalogSchemas,
+    dataCatalog: DataCatalogTermDefinition[],
     options: DataCatalogInmemoryDriverOptions
   ) {
     this.schemas = schemas;
     this.options = options;
+    this.dataCatalog = dataCatalog;
   }
 
-  async load(): Promise<DataCatalogSchemas> {
+  private async delay() {
     if (this.options.delay) {
       await new Promise((resolve) => setTimeout(resolve, this.options.delay));
     }
+  }
+
+  async load(): Promise<{
+    schemas: DataCatalogSchemas;
+    dataCatalog: DataCatalogTermDefinition[];
+  }> {
+    await this.delay();
 
-    return this.schemas;
+    return {
+      schemas: this.schemas,
+      dataCatalog: this.dataCatalog,
+    };
   }
 
   async updateColumn(
@@ -36,9 +50,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     columnName: string,
     data: DataCatalogModelColumnInput
   ): Promise<DataCatalogModelColumn> {
-    if (this.options.delay) {
-      await new Promise((resolve) => setTimeout(resolve, this.options.delay));
-    }
+    await this.delay();
 
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
@@ -79,9 +91,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     tableName: string,
     data: DataCatalogModelTableInput
   ): Promise<DataCatalogModelTable> {
-    if (this.options.delay) {
-      await new Promise((resolve) => setTimeout(resolve, this.options.delay));
-    }
+    await this.delay();
 
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
@@ -113,7 +123,6 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     columnName: string
   ): DataCatalogModelColumn | undefined {
     const normalizedColumnName = columnName.toLowerCase();
-
     const table = this.getTable(schemaName, tableName);
     return table?.columns[normalizedColumnName];
   }
@@ -130,7 +139,6 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     }
 
     const schemas = this.schemas[normalizedSchemaName];
-
     if (!schemas[normalizedTableName]) {
       return;
     }
@@ -138,4 +146,45 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     const table = schemas[normalizedTableName];
     return table;
   }
+
+  getTermDefinitions(): DataCatalogTermDefinition[] {
+    if (!this.dataCatalog) {
+      return [];
+    }
+    return this.dataCatalog;
+  }
+
+  async updateTermDefinition(
+    data: DataCatalogTermDefinition
+  ): Promise<DataCatalogTermDefinition | undefined> {
+    await this.delay();
+
+    if (!this.dataCatalog) {
+      this.dataCatalog = [];
+    }
+
+    const dataCatalog = this.dataCatalog;
+
+    const existingIndex = dataCatalog.findIndex((term) => term.id === data.id);
+
+    if (existingIndex !== -1) {
+      dataCatalog[existingIndex] = { ...dataCatalog[existingIndex], ...data };
+    } else {
+      dataCatalog.unshift(data);
+    }
+
+    return data;
+  }
+
+  async deleteTermDefinition(id: string): Promise<boolean> {
+    await this.delay();
+    if (!this.dataCatalog) return false;
+
+    const dataCatalog = this.dataCatalog;
+    const initialLength = dataCatalog.length;
+
+    this.dataCatalog = dataCatalog.filter((term) => term.id !== id);
+
+    return dataCatalog.length < initialLength;
+  }
 }
diff --git a/src/extensions/data-catalog/driver.tsx b/src/extensions/data-catalog/driver.tsx
index e0c1631e..eb171c3f 100644
--- a/src/extensions/data-catalog/driver.tsx
+++ b/src/extensions/data-catalog/driver.tsx
@@ -15,7 +15,11 @@ export interface DataCatalogModelColumn extends DataCatalogModelColumnInput {
 export interface DataCatalogModelTableInput {
   definition: string;
 }
-
+export interface DataCatalogTermDefinition extends DataCatalogModelTableInput {
+  id: string;
+  name: string;
+  otherName?: string;
+}
 export interface DataCatalogModelTable extends DataCatalogModelTableInput {
   schemaName: string;
   tableName: string;
@@ -28,7 +32,10 @@ export type DataCatalogSchemas = Record<
 >;
 
 export default abstract class DataCatalogDriver {
-  abstract load(): Promise<DataCatalogSchemas>;
+  abstract load(): Promise<{
+    schemas: DataCatalogSchemas;
+    dataCatalog: DataCatalogTermDefinition[];
+  }>;
 
   abstract updateColumn(
     schemaName: string,
@@ -53,4 +60,12 @@ export default abstract class DataCatalogDriver {
     schemaName: string,
     tableName: string
   ): DataCatalogModelTable | undefined;
+
+  abstract updateTermDefinition(
+    data: DataCatalogTermDefinition
+  ): Promise<DataCatalogTermDefinition | undefined>;
+
+  abstract getTermDefinitions(): DataCatalogTermDefinition[] | undefined;
+
+  abstract deleteTermDefinition(id: string): Promise<boolean>;
 }
diff --git a/src/extensions/data-catalog/empty-definition.tsx b/src/extensions/data-catalog/empty-definition.tsx
new file mode 100644
index 00000000..8f168c44
--- /dev/null
+++ b/src/extensions/data-catalog/empty-definition.tsx
@@ -0,0 +1,59 @@
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import { useMemo } from "react";
+
+export default function EmptyTermDefinition() {
+  const { resolvedTheme } = useTheme();
+  const EmptyTerm = useMemo(() => {
+    return [
+      {
+        src: `/extension/term-${resolvedTheme}.png`,
+        title: "Create a term",
+        describtion:
+          "Start by adding a term or acronym your organization regularly uses.",
+      },
+      {
+        src: `/extension/definition-${resolvedTheme}.png`,
+        title: "Add a definition",
+        describtion:
+          "Give your term context and define it using plaintext or SQL.",
+      },
+      {
+        src: `/extension/chart-${resolvedTheme}.png`,
+        title: "Reference your entry",
+        describtion:
+          "Now, your entry can be referenced while chatting with EZQL.",
+      },
+    ];
+  }, [resolvedTheme]);
+
+  return (
+    <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
+      {EmptyTerm.map((item, index) => {
+        return (
+          <div key={index}>
+            <div className="dark:bg-primary-foreground bg-accent relative mt-10 mb-10 h-[280px] flex-1 items-center justify-center rounded-md border p-[10px] pb-0">
+              <div className="relative h-full w-full overflow-hidden rounded-md">
+                <Image
+                  src={item.src}
+                  alt={item.title}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </div>
+            <div className="flex gap-2 text-xl font-semibold">
+              <div className="bg-accent h-[32px] w-[32px] rounded text-center dark:bg-neutral-900">
+                {index + 1}
+              </div>
+              {item.title}
+            </div>
+            <div className="mt-1 ml-10 text-sm font-normal">
+              {item.describtion}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/extensions/data-catalog/index.tsx b/src/extensions/data-catalog/index.tsx
index 0029a451..92051854 100644
--- a/src/extensions/data-catalog/index.tsx
+++ b/src/extensions/data-catalog/index.tsx
@@ -2,11 +2,22 @@ import { StudioExtension } from "@/core/extension-base";
 import { StudioExtensionContext } from "@/core/extension-manager";
 import { createTabExtension } from "@/core/extension-tab";
 import { Book } from "@phosphor-icons/react";
+import DataCatalogTab from "./data-catalog-tab";
 import DataCatalogModelTab from "./data-model-tab";
 import DataCatalogDriver from "./driver";
 import DataCatalogSidebar from "./sidebar";
 import DataCatalogResultHeader from "./table-result-header";
 
+export const dataCatalogTab = createTabExtension({
+  key: () => "data-catalog",
+  name: "Data Catalog",
+  generate: () => ({
+    icon: Book,
+    title: "Data Catalog",
+    component: <DataCatalogTab />,
+  }),
+});
+
 export const dataCatalogModelTab = createTabExtension({
   key: () => "data-catalog-model",
   name: "Data Model",
diff --git a/src/extensions/data-catalog/sidebar.tsx b/src/extensions/data-catalog/sidebar.tsx
index f7182144..cbd67233 100644
--- a/src/extensions/data-catalog/sidebar.tsx
+++ b/src/extensions/data-catalog/sidebar.tsx
@@ -1,11 +1,16 @@
 import { SidebarMenuHeader, SidebarMenuItem } from "@/components/sidebar-menu";
 import { Database } from "@phosphor-icons/react";
-import { dataCatalogModelTab } from ".";
+import { dataCatalogModelTab, dataCatalogTab } from ".";
 
 export default function DataCatalogSidebar() {
   return (
     <div className="flex flex-1 flex-col">
       <SidebarMenuHeader text="Data Catalog" />
+      <SidebarMenuItem
+        text="Data Catalog"
+        onClick={() => dataCatalogTab.open({})}
+        icon={Database}
+      />
       <SidebarMenuItem
         text="Data Model"
         onClick={() => dataCatalogModelTab.open({})}
diff --git a/src/extensions/data-catalog/term-definition-list.tsx b/src/extensions/data-catalog/term-definition-list.tsx
new file mode 100644
index 00000000..4b1bd4b9
--- /dev/null
+++ b/src/extensions/data-catalog/term-definition-list.tsx
@@ -0,0 +1,34 @@
+import { Edit3 } from "lucide-react";
+import { DataCatalogTermDefinition } from "./driver";
+
+interface Props {
+  onSelect: (item: DataCatalogTermDefinition) => void;
+  data: DataCatalogTermDefinition[];
+}
+export default function TermDefinitionList({ data, onSelect }: Props) {
+  return (
+    <div className="mt-10">
+      {data?.map((item) => {
+        return (
+          <div
+            onClick={() => onSelect(item)}
+            key={item.id}
+            className="bg-accent mt-3 flex rounded-xl border p-5 hover:bg-gray-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          >
+            <div className="gap-5">
+              <div className="text-lg font-bold">{item.name}</div>
+              <div>{item.definition}</div>
+              {item.otherName && (
+                <div className="mt-3 text-sm">
+                  Also known as: {item.otherName}
+                </div>
+              )}
+            </div>
+            <div className="flex-1" />
+            <Edit3 size={18} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}