diff --git a/autogpt_platform/frontend/src/components/DataTable.tsx b/autogpt_platform/frontend/src/components/DataTable.tsx
index 6ab4a42e9b..aba62af6c2 100644
--- a/autogpt_platform/frontend/src/components/DataTable.tsx
+++ b/autogpt_platform/frontend/src/components/DataTable.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { beautifyString } from "@/lib/utils";
 import { Button } from "./ui/button";
 import {
@@ -10,6 +11,7 @@ import {
 } from "./ui/table";
 import { Clipboard } from "lucide-react";
 import { useToast } from "./ui/use-toast";
+import { ContentRenderer } from "./ui/render";
 
 type DataTableProps = {
   title?: string;
@@ -72,17 +74,15 @@ export default function DataTable({
                   >
                     <Clipboard size={18} />
                   </Button>
-                  {value
-                    .map((i) => {
-                      const text =
-                        typeof i === "object"
-                          ? JSON.stringify(i, null, 2)
-                          : String(i);
-                      return truncateLongData && text.length > maxChars
-                        ? text.slice(0, maxChars) + "..."
-                        : text;
-                    })
-                    .join(", ")}
+                  {value.map((item, index) => (
+                    <React.Fragment key={index}>
+                      <ContentRenderer
+                        value={item}
+                        truncateLongData={truncateLongData}
+                      />
+                      {index < value.length - 1 && ", "}
+                    </React.Fragment>
+                  ))}
                 </div>
               </TableCell>
             </TableRow>
diff --git a/autogpt_platform/frontend/src/components/ui/render.tsx b/autogpt_platform/frontend/src/components/ui/render.tsx
new file mode 100644
index 0000000000..b6147130d2
--- /dev/null
+++ b/autogpt_platform/frontend/src/components/ui/render.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+
+const getYouTubeVideoId = (url: string) => {
+  const regExp =
+    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = url.match(regExp);
+  return match && match[7].length === 11 ? match[7] : null;
+};
+
+const isValidVideoUrl = (url: string): boolean => {
+  const videoExtensions = /\.(mp4|webm|ogg)$/i;
+  const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
+  return videoExtensions.test(url) || youtubeRegex.test(url);
+};
+
+const isValidImageUrl = (url: string): boolean => {
+  const imageExtensions = /\.(jpeg|jpg|gif|png|svg|webp)$/i;
+  return imageExtensions.test(url);
+};
+
+const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
+  const videoId = getYouTubeVideoId(videoUrl);
+  return (
+    <div className="w-full p-2">
+      {videoId ? (
+        <iframe
+          width="100%"
+          height="315"
+          src={`https://www.youtube.com/embed/${videoId}`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
+      ) : (
+        <video controls width="100%" height="315">
+          <source src={videoUrl} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      )}
+    </div>
+  );
+};
+
+const ImageRenderer: React.FC<{ imageUrl: string }> = ({ imageUrl }) => (
+  <div className="w-full p-2">
+    <img
+      src={imageUrl}
+      alt="Image"
+      className="h-auto max-w-full"
+      width="100%"
+      height="auto"
+    />
+  </div>
+);
+
+const TextRenderer: React.FC<{ value: any; truncateLongData?: boolean }> = ({
+  value,
+  truncateLongData,
+}) => {
+  const maxChars = 100;
+  const text =
+    typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+  return truncateLongData && text.length > maxChars
+    ? text.slice(0, maxChars) + "..."
+    : text;
+};
+
+export const ContentRenderer: React.FC<{
+  value: any;
+  truncateLongData?: boolean;
+}> = ({ value, truncateLongData }) => {
+  if (typeof value === "string") {
+    if (isValidVideoUrl(value)) {
+      return <VideoRenderer videoUrl={value} />;
+    } else if (isValidImageUrl(value)) {
+      return <ImageRenderer imageUrl={value} />;
+    }
+  }
+  return <TextRenderer value={value} truncateLongData={truncateLongData} />;
+};
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index a397a00b65..28dc686c43 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -1,6 +1,8 @@
 site_name: AutoGPT Documentation
 site_url: https://docs.agpt.co/
 repo_url: https://github.com/Significant-Gravitas/AutoGPT
+repo_name: AutoGPT
+edit_uri: edit/master/docs/content
 docs_dir: content
 nav:
   - Home: index.md
@@ -10,7 +12,7 @@ nav:
     - Setup: server/setup.md
     - Advanced Setup: server/advanced_setup.md
     - Using Ollama: server/ollama.md
-    - Using D-ID: serveer/d_id.md
+    - Using D-ID: server/d_id.md
 
   - AutoGPT Agent:
       - Introduction: AutoGPT/index.md
@@ -69,14 +71,27 @@ nav:
 theme:
   name: material
   custom_dir: overrides
+  language: en
   icon:
+    repo: fontawesome/brands/github
     logo: material/book-open-variant
-  favicon: favicon.png
+    edit: material/pencil
+    view: material/eye
+  favicon: assets/favicon.png
   features:
     - navigation.sections
-    - toc.follow
+    - navigation.footer
     - navigation.top
+    - navigation.tracking
+    - navigation.tabs
+    # - navigation.path
+    - toc.follow
+    - toc.integrate
+    - content.action.edit
+    - content.action.view
     - content.code.copy
+    - content.code.annotate
+    - content.tabs.link
   palette:
     # Palette toggle for light mode
     - media: "(prefers-color-scheme: light)"
@@ -137,6 +152,20 @@ markdown_extensions:
 plugins:
   - table-reader
   - search
+  - git-revision-date-localized:
+      enable_creation_date: true
+
+
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/Significant-Gravitas/AutoGPT
+    - icon: fontawesome/brands/x-twitter
+      link: https://x.com/Auto_GPT
+    - icon: fontawesome/brands/instagram
+      link: https://www.instagram.com/autogpt/
+    - icon: fontawesome/brands/discord
+      link: https://discord.gg/autogpt
 
 extra_javascript:
   - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
diff --git a/docs/favicon.png b/docs/overrides/assets/favicon.png
similarity index 100%
rename from docs/favicon.png
rename to docs/overrides/assets/favicon.png
diff --git a/docs/requirements.txt b/docs/requirements.txt
index 074e062b04..73c7682333 100644
--- a/docs/requirements.txt
+++ b/docs/requirements.txt
@@ -2,3 +2,4 @@ mkdocs
 mkdocs-material
 mkdocs-table-reader-plugin
 pymdown-extensions
+mkdocs-git-revision-date-localized-plugin