diff --git a/src/app/components/mdx-renderer.tsx b/src/app/components/mdx-renderer.tsx
index 5c14c74..2f31e1f 100644
--- a/src/app/components/mdx-renderer.tsx
+++ b/src/app/components/mdx-renderer.tsx
@@ -1,6 +1,7 @@
 import { CodeHighlighter } from "@/app/components/code-highlighter";
 import { Separator } from "@/app/components/ui/separator";
 import Link from "next/link";
+import { ReactElement } from "react";
 
 /**
  * Create a heading component.
@@ -8,7 +9,7 @@ import Link from "next/link";
  * @param level The level of the heading.
  * @param props The props to pass to the heading.
  */
-export function formatHeading(level: number, props: any) {
+export function formatHeading(level: number, props: any): ReactElement {
   const Tag = `h${level}`;
   const paddingBottom = level > 1 ? "pt-6" : "";
   const textSize = 4 - level;
@@ -26,7 +27,7 @@ export function formatHeading(level: number, props: any) {
  *
  * @param props The props to pass to the code block.
  */
-export function formatCode(props: any) {
+export function formatCode(props: any): ReactElement {
   if (!props.className) {
     return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
   }
@@ -46,7 +47,7 @@ export function formatCode(props: any) {
  *
  * @param props The props to pass to the list.
  */
-export function formatList(props: any) {
+export function formatList(props: any): ReactElement {
   return <ul className="list-disc pl-4 ml-2 pt-2">{props.children}</ul>;
 }
 
@@ -55,7 +56,7 @@ export function formatList(props: any) {
  *
  * @param props The props to pass to the link.
  */
-export function formatLink(props: any) {
+export function formatLink(props: any): ReactElement {
   return (
     <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
       {props.children}