diff --git a/backend/coreapp/admin.py b/backend/coreapp/admin.py
index b076f08fe..41b24b46e 100644
--- a/backend/coreapp/admin.py
+++ b/backend/coreapp/admin.py
@@ -1,5 +1,6 @@
 from django.contrib import admin
 
+from .models.comment import Comment
 from .models.course import Course, CourseChapter, CourseScenario
 from .models.github import GitHubUser
 from .models.preset import Preset
@@ -26,3 +27,4 @@
 admin.site.register(Course)
 admin.site.register(CourseChapter)
 admin.site.register(CourseScenario)
+admin.site.register(Comment)
diff --git a/backend/coreapp/migrations/0054_comment.py b/backend/coreapp/migrations/0054_comment.py
new file mode 100644
index 000000000..e7fe1b16f
--- /dev/null
+++ b/backend/coreapp/migrations/0054_comment.py
@@ -0,0 +1,48 @@
+# Generated by Django 5.0.3 on 2024-05-08 19:59
+
+import coreapp.models.comment
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("coreapp", "0053_rename_mwcps2_compilers"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="Comment",
+            fields=[
+                (
+                    "slug",
+                    models.SlugField(
+                        default=coreapp.models.comment.gen_comment_id,
+                        primary_key=True,
+                        serialize=False,
+                    ),
+                ),
+                ("text", models.TextField(max_length=5000)),
+                ("creation_time", models.DateTimeField(auto_now_add=True)),
+                (
+                    "owner",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        to="coreapp.profile",
+                    ),
+                ),
+                (
+                    "scratch",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        to="coreapp.scratch",
+                    ),
+                ),
+            ],
+            options={
+                "ordering": ["-creation_time"],
+            },
+        ),
+    ]
diff --git a/backend/coreapp/migrations/0055_alter_comment_options.py b/backend/coreapp/migrations/0055_alter_comment_options.py
new file mode 100644
index 000000000..63b12fb85
--- /dev/null
+++ b/backend/coreapp/migrations/0055_alter_comment_options.py
@@ -0,0 +1,16 @@
+# Generated by Django 5.0.3 on 2024-05-10 21:54
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("coreapp", "0054_comment"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="comment",
+            options={"ordering": ["creation_time"]},
+        ),
+    ]
diff --git a/backend/coreapp/models/comment.py b/backend/coreapp/models/comment.py
new file mode 100644
index 000000000..5b8c6a7b2
--- /dev/null
+++ b/backend/coreapp/models/comment.py
@@ -0,0 +1,26 @@
+from django.db import models
+from django.utils.crypto import get_random_string
+from .profile import Profile
+from .scratch import Scratch
+
+
+def gen_comment_id() -> str:
+    return get_random_string(length=32)
+
+
+class Comment(models.Model):
+    slug = models.SlugField(primary_key=True, default=gen_comment_id)
+    scratch = models.ForeignKey(
+        Scratch, null=True, blank=False, on_delete=models.SET_NULL)
+    owner = models.ForeignKey(
+        Profile, null=True, blank=False, on_delete=models.SET_NULL)
+    text = models.TextField(max_length=5000)
+    creation_time = models.DateTimeField(auto_now_add=True)
+    # TODO: Add replies
+    # TODO: Add last_updated for editing
+
+    class Meta:
+        ordering = ["-creation_time"]
+
+    def __str__(self) -> str:
+        return f'{self.creation_time} - {self.owner} - {self.scratch} -  {self.text[:50]}'
diff --git a/backend/coreapp/serializers.py b/backend/coreapp/serializers.py
index 880588bf8..413f8effe 100644
--- a/backend/coreapp/serializers.py
+++ b/backend/coreapp/serializers.py
@@ -20,6 +20,7 @@
 from .models.profile import Profile
 from .models.project import Project, ProjectMember
 from .models.scratch import Scratch
+from .models.comment import Comment
 
 
 def serialize_profile(request: Request, profile: Profile) -> Dict[str, Any]:
@@ -316,3 +317,28 @@ class ProjectMemberSerializer(serializers.ModelSerializer[ProjectMember]):
     class Meta:
         model = ProjectMember
         fields = ["username"]
+
+
+class CommentSerializer(serializers.ModelSerializer[Comment]):
+    owner = ProfileField(read_only=True)
+
+    class Meta:
+        model = Comment
+        fields = [
+            "slug",
+            "text",
+            "owner",
+            "scratch",
+            "creation_time",
+        ]
+
+    def create(self, validated_data: Any) -> Comment:
+        comment = Comment.objects.create(**validated_data)
+        return comment
+
+    # def validate(self, data: Dict[str, Any]) -> Dict[str, Any]:
+    #     """
+    #     TODO: Validate that the scratch and the user are both valid to allow comment
+    #     creation
+    #     """
+    #     return True
diff --git a/backend/coreapp/tests/test_comment.py b/backend/coreapp/tests/test_comment.py
new file mode 100644
index 000000000..560d6c8fd
--- /dev/null
+++ b/backend/coreapp/tests/test_comment.py
@@ -0,0 +1,4 @@
+from coreapp.tests.common import BaseTestCase
+
+class CommentTest(BaseTestCase):
+    pass
diff --git a/backend/coreapp/urls.py b/backend/coreapp/urls.py
index 6e270e9f5..00a00cc31 100644
--- a/backend/coreapp/urls.py
+++ b/backend/coreapp/urls.py
@@ -9,6 +9,7 @@
     project,
     scratch,
     user,
+    comment,
 )
 
 urlpatterns = [
@@ -24,18 +25,29 @@
     *scratch.router.urls,
     *preset.router.urls,
     *project.router.urls,
+    *comment.router.urls,
     path("user", user.CurrentUser.as_view(), name="current-user"),
     path(
         "user/scratches",
         user.CurrentUserScratchList.as_view(),
         name="current-user-scratches",
     ),
+    path(
+        "user/comments",
+        user.CurrentUserCommentList.as_view(),
+        name="current-user-comments",
+    ),
     path("users/<slug:username>", user.user, name="user-detail"),
     path(
         "users/<slug:username>/scratches",
         user.UserScratchList.as_view(),
         name="user-scratches",
     ),
+    path(
+        "users/<slug:username>/comments",
+        user.UserCommentList.as_view(),
+        name="user-comments",
+    ),
     # TODO: remove
     path("compilers", compiler.CompilerDetail.as_view(), name="compilers"),
     path("libraries", library.LibraryDetail.as_view(), name="libraries"),
diff --git a/backend/coreapp/views/comment.py b/backend/coreapp/views/comment.py
new file mode 100644
index 000000000..95080db46
--- /dev/null
+++ b/backend/coreapp/views/comment.py
@@ -0,0 +1,85 @@
+from typing import Any, Optional
+
+import django_filters
+
+from rest_framework.pagination import CursorPagination
+from rest_framework import mixins, filters, status
+from rest_framework.viewsets import GenericViewSet
+from rest_framework.response import Response
+from rest_framework.request import Request
+from rest_framework.exceptions import APIException
+from rest_framework.routers import DefaultRouter
+
+from ..models.comment import Comment
+from ..models.github import GitHubUser
+from ..models.profile import Profile
+from ..models.scratch import Scratch
+from ..serializers import CommentSerializer
+from django.contrib.auth.models import User
+
+
+class GithubLoginException(APIException):
+    status_code = status.HTTP_403_FORBIDDEN
+    default_detail = "You must be logged in to Github to perform this action."
+
+
+class ScratchSlugException(APIException):
+    status_code = status.HTTP_400_BAD_REQUEST
+    default_detail = "Invalid Scratch Slug"
+
+
+class CommentPagination(CursorPagination):
+    ordering = "-creation_time"
+    page_size = 50
+    page_size_query_param = "page_size"
+
+
+class CommentViewSet(
+    mixins.CreateModelMixin,
+    mixins.DestroyModelMixin,
+    mixins.RetrieveModelMixin,
+    mixins.UpdateModelMixin,
+    mixins.ListModelMixin,
+    GenericViewSet,  # type: ignore
+):
+    queryset = Comment.objects.all()
+    pagination_class = CommentPagination
+    filterset_fields = ["scratch", "slug"]
+    filter_backends = [
+        django_filters.rest_framework.DjangoFilterBackend,
+        filters.SearchFilter,
+    ]
+    search_fields = ["scratch", "owner"]
+    serializer_class = CommentSerializer
+
+    def create(self, request: Request, *args: Any, **kwargs: Any) -> Response:
+        user: Optional[User] = request.profile.user
+
+        if not user:
+            raise GithubLoginException()
+        gh_user: Optional[GitHubUser] = user.github
+        if not gh_user:
+            raise GithubLoginException()
+        profile: Profile = Profile.objects.get(user=request.profile.user)
+        if not profile:
+            raise GithubLoginException()
+        scratch = Scratch.objects.get(slug=request.GET.get('scratch_id'))
+        if not scratch:
+            raise ScratchSlugException()
+
+        serializer = CommentSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+        comment = serializer.save()
+
+        comment.owner = profile
+        comment.scratch = scratch
+        comment.save()
+
+        return Response(
+            CommentSerializer(comment, context={"request": request}).data,
+            status=status.HTTP_201_CREATED,
+        )
+
+
+router = DefaultRouter(trailing_slash=False)
+router.register(r"comment", CommentViewSet)
diff --git a/backend/coreapp/views/user.py b/backend/coreapp/views/user.py
index 5934c9858..8980d49a9 100644
--- a/backend/coreapp/views/user.py
+++ b/backend/coreapp/views/user.py
@@ -10,7 +10,9 @@
 from ..models.github import GitHubUser
 from ..models.profile import Profile
 from ..models.scratch import Scratch
-from ..serializers import TerseScratchSerializer, serialize_profile
+from ..models.comment import Comment
+from ..serializers import TerseScratchSerializer, serialize_profile, CommentSerializer
+from .comment import CommentPagination
 from .scratch import ScratchPagination
 
 
@@ -71,6 +73,30 @@ def get_queryset(self) -> QuerySet[Scratch]:
         return Scratch.objects.filter(owner__user__username=self.kwargs["username"])
 
 
+class CurrentUserCommentList(generics.ListAPIView):  # type: ignore
+    """
+    Gets the current user's comments
+    """
+
+    pagination_class = CommentPagination
+    serializer_class = CommentSerializer
+
+    def get_queryset(self) -> QuerySet[Comment]:
+        return Comment.objects.filter(owner=self.request.profile)
+
+
+class UserCommentList(generics.ListAPIView):  # type: ignore
+    """
+    Gets a user's comments
+    """
+
+    pagination_class = CommentPagination
+    serializer_class = CommentSerializer
+
+    def get_queryset(self) -> QuerySet[Comment]:
+        return Comment.objects.filter(owner__user__username=self.kwargs["username"])
+
+
 @api_view(["GET"])  # type: ignore
 def user(request: Request, username: str) -> Response:
     """
diff --git a/frontend/package.json b/frontend/package.json
index e5717afeb..9d1e43666 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
         "ansi-to-react": "^6.1.6",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
+        "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
         "downshift": "9.0.0",
         "fast-myers-diff": "^3.2.0",
@@ -46,7 +47,6 @@
         "react-contenteditable": "^3.3.7",
         "react-dom": "^18.2.0",
         "react-laag": "^2.0.5",
-        "react-timeago": "^7.2.0",
         "react-virtualized-auto-sizer": "^1.0.24",
         "react-window": "^1.8.10",
         "sass": "^1.72.0",
diff --git a/frontend/src/components/Dropdown.module.scss b/frontend/src/components/Dropdown.module.scss
new file mode 100644
index 000000000..dfa5f4f2a
--- /dev/null
+++ b/frontend/src/components/Dropdown.module.scss
@@ -0,0 +1,54 @@
+
+.options {
+    display: none;
+    color: var(--g1600);
+    background: var(--g200);
+    position: absolute;
+    overflow-y: auto;
+    max-height: 320px;
+    z-index: 20;
+    width: max-content;
+    border-radius: 10px;
+
+    &.open {
+        display: block;
+    }
+
+    &.open:empty {
+        display: none;
+    }
+
+    .option {
+        color: var(--g1600);
+        background: var(--g200);
+        border-radius: 5px;
+        padding-right: 3px;
+        padding-left: 3px;
+        width: 100%;
+    }
+
+    .option:hover {
+        background: var(--g1600);
+        color: var(--g200);
+
+    }
+}
+
+.options::-webkit-scrollbar {
+    width: 6px;
+}
+
+.options::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px var(--g200);
+    border-radius: 10px;
+}
+
+.options::-webkit-scrollbar-thumb {
+    background: var(--g1600);
+    border-radius: 10px;
+}
+
+.options::-webkit-scrollbar-thumb:hover {
+    background: gray;
+}
+
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
new file mode 100644
index 000000000..01e96b12b
--- /dev/null
+++ b/frontend/src/components/Dropdown.tsx
@@ -0,0 +1,62 @@
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react"
+
+import classNames from "classnames"
+
+import styles from "./Dropdown.module.scss"
+
+export type Props = {
+    options: { [key: string]: (event: any) => void }
+    className?: string
+    children: ReactNode
+}
+
+export default function Dropdown({ options, children, className }: Props) {
+    const [isOpen, setIsOpen] = useState(false)
+    const ref = useRef(null)
+
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen)
+    }
+
+    const closeDropdown = useCallback(() => {
+        setIsOpen(false)
+    }, [])
+
+    useEffect(() => {
+        const listener = event => {
+            if (!ref?.current || ref.current.contains(event.target)) {
+                return
+            }
+            closeDropdown()
+        }
+
+        document.addEventListener("mousedown", listener)
+        document.addEventListener("touchstart", listener)
+        return () => {
+            document.removeEventListener("mousedown", listener)
+            document.addEventListener("touchstart", listener)
+        }
+    }, [closeDropdown, ref])
+
+    return (
+        <div ref={ref} className="inline-table">
+            <button className={className} onClick={toggleDropdown}>
+                {children}
+            </button>
+            <div className={classNames(styles.options, { [styles.open]: isOpen })}>
+                {Object.entries(options).map(([value, onChange]) =>
+                    <button
+                        className={styles.option}
+                        onClick={event => {
+                            onChange(event)
+                            closeDropdown()
+                        }}
+                        key={value}
+                    >
+                        {value}
+                    </button>
+                )}
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/components/Scratch/AboutScratch.tsx b/frontend/src/components/Scratch/AboutScratch.tsx
index b318440d2..d37dbce27 100644
--- a/frontend/src/components/Scratch/AboutScratch.tsx
+++ b/frontend/src/components/Scratch/AboutScratch.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link"
 
-import TimeAgo from "react-timeago"
+import { formatDistanceToNowStrict } from "date-fns"
 import useSWR from "swr"
 
 import { Scratch, Preset, get, usePreset } from "@/lib/api"
@@ -78,11 +78,11 @@ export default function AboutScratch({ scratch, setScratch }: Props) {
                 </div>}
                 <div className={styles.horizontalField}>
                     <p className={styles.label}>Created</p>
-                    <TimeAgo date={scratch.creation_time} />
+                    {formatDistanceToNowStrict(scratch.last_updated)} ago
                 </div>
                 <div className={styles.horizontalField}>
                     <p className={styles.label}>Modified</p>
-                    <TimeAgo date={scratch.last_updated} />
+                    {formatDistanceToNowStrict(scratch.last_updated)} ago
                 </div>
             </div>
 
diff --git a/frontend/src/components/Scratch/Comments.module.scss b/frontend/src/components/Scratch/Comments.module.scss
new file mode 100644
index 000000000..6e5563194
--- /dev/null
+++ b/frontend/src/components/Scratch/Comments.module.scss
@@ -0,0 +1,78 @@
+.holder {
+    height: 100%;
+    position: relative;
+}
+
+.inputSection {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: contents;
+
+    form {
+        width: 100%;
+
+        textarea {
+            appearance: none;
+            width: 100%;
+            padding: 8px 10px;
+            height: 33px;
+            color: var(--g1200);
+            background: var(--g200);
+            font: 0.8rem var(--monospace);
+            border: 1px solid var(--g500);
+            border-radius: 4px;
+            bottom: 0;
+            left: 0;
+            padding-right: 2em;
+            outline: none !important;
+            overflow: hidden;
+            resize: none;
+
+            &::-webkit-input-placeholder {
+                color: var(--g700);
+            }
+        }
+    }
+
+    .submit {
+        position: absolute;
+        border: none;
+        transform: translateY(-15%);
+        right: 0;
+        bottom: 0;
+    }
+}
+
+.commentsBody {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.metadata {
+    display: flex;
+    padding-left: 5px;
+    color: var(--g900);
+
+    >span {
+        flex-grow: 1;
+    }
+}
+
+.text {
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+.refresh {
+    position: fixed;
+    z-index: 2;
+}
+
+.counter {
+    float: right;
+    padding-bottom: 4px;
+    font: 0.8rem var(--monospace);
+    color: var(--g1200);
+}
diff --git a/frontend/src/components/Scratch/Comments.tsx b/frontend/src/components/Scratch/Comments.tsx
new file mode 100644
index 000000000..ff72cb4f0
--- /dev/null
+++ b/frontend/src/components/Scratch/Comments.tsx
@@ -0,0 +1,255 @@
+"use client"
+
+import { ChangeEvent, useCallback, useRef, useState } from "react"
+
+import { useRouter } from "next/navigation"
+
+import { ArrowUpIcon, KebabHorizontalIcon, CheckIcon } from "@primer/octicons-react"
+import { formatDistanceToNowStrict } from "date-fns"
+import useSWR, { mutate } from "swr"
+
+import Loading from "@/components/loading.svg"
+import * as api from "@/lib/api"
+import { Comment } from "@/lib/api"
+import { commentUrl } from "@/lib/api/urls"
+
+import AsyncButton from "../AsyncButton"
+import Button from "../Button"
+import Dropdown from "../Dropdown"
+import UserLink from "../user/UserLink"
+
+import styles from "./Comments.module.scss"
+
+const maxTextLength = 5000
+
+async function deleteComment(comment: Comment) {
+    try {
+        await api.delete_(commentUrl(comment), {})
+        alert("Comment deleted")
+    } catch (e) {
+        alert(`Error Deleting Comment: ${e}`)
+    }
+}
+
+function EditComment({ comment, stopEditing, submit }: { comment: any, stopEditing: () => void, submit: (text: string) => Promise<unknown> }) {
+    const [text, setText] = useState(comment.text)
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+    const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto"
+            textareaRef.current.style.height = `${e.target.scrollHeight + 2}px`
+        }
+        setText(e.target.value)
+    }
+
+    return (
+        <div>
+            <div className="flex items-center gap-0.5">
+                <h1><UserLink user={comment.owner} /></h1>
+            </div>
+            <section className={styles.inputSection}>
+                <div className="relative w-full">
+                    <form>
+                        <div className="w-full">
+                            <textarea
+                                ref={textareaRef}
+                                autoComplete="off"
+                                rows={1}
+                                onChange={handleInput}
+                                maxLength={maxTextLength}
+                                defaultValue={comment.text}
+                            />
+                        </div>
+                    </form>
+                    <AsyncButton
+                        className={styles.submit}
+                        onClick={async () => await submit(text)}
+                    ><CheckIcon /></AsyncButton>
+                </div>
+                <div className="flex flex-row-reverse items-center gap-1">
+                    <button className="text-xs" onClick={stopEditing}>Cancel</button>
+                    <div className={styles.counter}>{text.length} / {maxTextLength}</div>
+                </div>
+            </section>
+            <br />
+        </div>
+    )
+}
+
+function CommentItem({ comment, canModify }: { comment: any, canModify?: boolean }) {
+    const router = useRouter()
+    const userIsYou = api.useUserIsYou()
+    const options = {
+        "Edit Comment ✏️": () => {
+            comment.isEditing = true
+            router.refresh()
+        },
+        "Delete Comment🚫": (event: KeyboardEvent) => {
+            if (event.shiftKey || confirm("Are you sure you want to delete this scratch? This action cannot be undone.")) {
+                deleteComment(comment)
+                comment.isDeleted = true
+                router.refresh()
+            }
+        },
+    }
+
+    const submitEdits = async (text: string) => {
+        if (!userIsYou(comment.owner)) {
+            throw new Error("Cannot save scratch which you do not own")
+        }
+        const updatedComment = await api.patch(commentUrl(comment), {
+            slug: comment.slug,
+            owner: comment.owner,
+            text: text,
+            created_on: comment.created_on,
+        })
+
+        await mutate(commentUrl(comment), updatedComment, { revalidate: false })
+        comment.text = text
+        stopEditing()
+    }
+
+    const stopEditing = () => {
+        comment.isEditing = false
+        router.refresh()
+    }
+
+    if (comment.isDeleted) {
+        return
+    }
+
+    if (comment.isEditing) {
+        return <EditComment comment={comment} stopEditing={stopEditing} submit={submitEdits} />
+    }
+
+    return (
+        <div>
+            <div className="flex items-center gap-0.5">
+                <h1><UserLink user={comment.owner} /></h1>
+                <span className={styles.metadata}>{formatDistanceToNowStrict(comment.creation_time)} ago</span>
+                {(canModify || (comment.owner && userIsYou(comment.owner))) &&
+                    <Dropdown options={options}><KebabHorizontalIcon className="pl-1" /></Dropdown>}
+            </div>
+            <p className={styles.text}>{comment.text}</p>
+            <br />
+        </div>
+    )
+}
+
+function CommentList({ results, canModify }: { results: Comment[], canModify?: boolean }) {
+    return (
+        <div className="flex flex-col-reverse">
+            {results.map((comment: Comment) => {
+                return <CommentItem comment={comment} key={comment.slug} canModify={canModify} />
+            })}
+        </div>
+    )
+}
+
+export default function Comments({ scratch, scrollRef }: { scratch: api.TerseScratch, scrollRef: any }) {
+    const userIsYou = api.useUserIsYou()
+    const canModify = (scratch.owner && userIsYou(scratch.owner)) || api.useThisUserIsAdmin()
+
+    const router = useRouter()
+
+    const [needsUpdating, setNeedsUpdating] = useState(false)
+    const [text, setText] = useState("")
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const bottomRef = useRef<HTMLDivElement>(null)
+
+    const { results, isLoading, hasNext, loadNext } = api.usePaginated<api.Comment>(`/comment?scratch=${scratch.slug}&page_size=20`)
+    // Check for new comments
+    const { error } = useSWR(`/comment?scratch=${scratch.slug}&page_size=1`, api.get, {
+        refreshInterval: 30 * 1000, // 30 Seconds
+        onSuccess: newData => {
+            if (results[0]?.slug && newData.results[0]?.slug) {
+                setNeedsUpdating(results[0].slug !== newData.results[0]?.slug)
+            }
+        },
+    })
+
+    const submitAndRefresh = async () => {
+        const response = await api.post(`/comment?scratch_id=${scratch.slug}`, { text: text })
+        if (response) {
+            await api.get(`/comment?slug=${response.slug}`).then(comment => {
+                results.unshift(comment.results[0])
+            })
+            textareaRef.current.style.height = "33px"
+            textareaRef.current.value = ""
+        }
+        router.refresh()
+    }
+
+    const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto"
+            textareaRef.current.style.height = `${e.target.scrollHeight + 2}px`
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+        }
+        setText(e.target.value)
+    }
+
+    function NeedsRefresh({ error }: { error: string }) {
+        const message = error ? error : "Refresh"
+        return (
+            <div className="flex flex-row-reverse">
+                <Button
+                    className={styles.refresh}
+                    danger={true}
+                    onClick={() => {
+                        router.push(`https://decomp.me/scratch/${scratch.slug}`)
+                    }}
+                >{message}</Button>
+            </div>
+        )
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex size-full items-center justify-center">
+                <Loading className="size-8 animate-pulse" />
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.holder}>
+            {(needsUpdating || error) && <NeedsRefresh error={error} />}
+            <section id="comment-section" className={styles.commentsBody}>
+                <div>
+                    <CommentList results={results} canModify={canModify} />
+                </div>
+                {hasNext &&
+                    <div className="flex justify-center">
+                        <AsyncButton onClick={loadNext}>
+                            Show more
+                        </AsyncButton>
+                    </div>
+                }
+            </section>
+            <section ref={bottomRef} className={styles.inputSection}>
+                <div className="relative w-full">
+                    <form>
+                        <div className="w-full">
+                            <textarea
+                                ref={textareaRef}
+                                autoComplete="off"
+                                rows={1}
+                                onChange={handleInput}
+                                maxLength={maxTextLength}
+                                placeholder="Message..."
+                            />
+                        </div>
+                    </form>
+                    <AsyncButton
+                        className={styles.submit}
+                        onClick={async () => await submitAndRefresh()}
+                    ><ArrowUpIcon /></AsyncButton>
+                </div>
+                <div className={styles.counter}>{text.length} / {maxTextLength}</div>
+            </section>
+        </div>
+    )
+}
diff --git a/frontend/src/components/Scratch/CommentsPanel.tsx b/frontend/src/components/Scratch/CommentsPanel.tsx
new file mode 100644
index 000000000..c456ae20c
--- /dev/null
+++ b/frontend/src/components/Scratch/CommentsPanel.tsx
@@ -0,0 +1,24 @@
+import { useRef } from "react"
+
+import dynamic from "next/dynamic"
+
+import Loading from "@/components/loading.svg"
+import { TerseScratch } from "@/lib/api"
+
+type Props = {
+    scratch: TerseScratch
+}
+const Comments = dynamic(() => import("./Comments"), {
+    loading: () => <div className="flex size-full items-center justify-center">
+        <Loading className="size-8 animate-pulse" />
+    </div>,
+})
+
+export default function CommentsPanel({ scratch }: Props) {
+    const scrollRef = useRef<HTMLDivElement>(null)
+    return (
+        <div ref={scrollRef} className="h-full overflow-y-auto overflow-x-hidden px-4">
+            <Comments scratch={scratch} scrollRef={scrollRef} />
+        </div>
+    )
+}
diff --git a/frontend/src/components/Scratch/FamilyPanel.tsx b/frontend/src/components/Scratch/FamilyPanel.tsx
index 3686d6a34..a1ad71fe1 100644
--- a/frontend/src/components/Scratch/FamilyPanel.tsx
+++ b/frontend/src/components/Scratch/FamilyPanel.tsx
@@ -14,7 +14,7 @@ type Props = {
 }
 
 export default function FamilyPanel({ scratch }: Props) {
-    return <div className="h-full p-4 overflow-auto">
+    return <div className="h-full overflow-auto p-4">
         <SortableFamilyList scratch={scratch} />
     </div>
 }
diff --git a/frontend/src/components/Scratch/Scratch.tsx b/frontend/src/components/Scratch/Scratch.tsx
index 2d09c9de5..5ed1a7426 100644
--- a/frontend/src/components/Scratch/Scratch.tsx
+++ b/frontend/src/components/Scratch/Scratch.tsx
@@ -19,6 +19,7 @@ import ScoreBadge, { calculateScorePercent } from "../ScoreBadge"
 import { Tab, TabCloseButton } from "../Tabs"
 
 import AboutScratch from "./AboutScratch"
+import CommentsPanel from "./CommentsPanel"
 import DecompilationPanel from "./DecompilePanel"
 import FamilyPanel from "./FamilyPanel"
 import useLanguageServer from "./hooks/useLanguageServer"
@@ -35,6 +36,7 @@ enum TabId {
     DIFF = "scratch_diff",
     DECOMPILATION = "scratch_decompilation",
     FAMILY = "scratch_family",
+    COMMENTS = "scratch_comments",
 }
 
 const DEFAULT_LAYOUTS: Record<"desktop_2col" | "mobile_2row", Layout> = {
@@ -54,6 +56,7 @@ const DEFAULT_LAYOUTS: Record<"desktop_2col" | "mobile_2row", Layout> = {
                     TabId.SOURCE_CODE,
                     TabId.CONTEXT,
                     TabId.OPTIONS,
+                    TabId.COMMENTS,
                 ],
             },
             {
@@ -296,6 +299,10 @@ export default function Scratch({
             return <Tab key={id} tabKey={id} label="Family">
                 {() => <FamilyPanel scratch={scratch} />}
             </Tab>
+        case TabId.COMMENTS:
+            return <Tab key={id} tabKey={id} label="Comments">
+                {() => <CommentsPanel scratch={scratch} />}
+            </Tab>
         default:
             return <Tab key={id} tabKey={id} label={id} disabled />
         }
diff --git a/frontend/src/components/Scratch/ScratchToolbar.tsx b/frontend/src/components/Scratch/ScratchToolbar.tsx
index 05214a8fe..3d09e7b36 100644
--- a/frontend/src/components/Scratch/ScratchToolbar.tsx
+++ b/frontend/src/components/Scratch/ScratchToolbar.tsx
@@ -4,8 +4,8 @@ import Link from "next/link"
 
 import { DownloadIcon, FileIcon, IterationsIcon, RepoForkedIcon, SyncIcon, TrashIcon, UploadIcon } from "@primer/octicons-react"
 import classNames from "classnames"
+import { formatDistanceToNowStrict } from "date-fns"
 import ContentEditable from "react-contenteditable"
-import TimeAgo from "react-timeago"
 
 import * as api from "@/lib/api"
 import { scratchUrl } from "@/lib/api/urls"
@@ -57,7 +57,7 @@ function EditTimeAgo({ date }: { date: string }) {
         {isActive ? <>
             Active now
         </> : <>
-            <TimeAgo date={date} />
+            {formatDistanceToNowStrict(date)} ago
         </>}
     </span>
 }
diff --git a/frontend/src/components/ScratchList.tsx b/frontend/src/components/ScratchList.tsx
index ffea13bb3..1b7feb0af 100644
--- a/frontend/src/components/ScratchList.tsx
+++ b/frontend/src/components/ScratchList.tsx
@@ -5,7 +5,7 @@ import { ReactNode, useState } from "react"
 import Link from "next/link"
 
 import classNames from "classnames"
-import TimeAgo from "react-timeago"
+import { formatDistanceToNowStrict } from "date-fns"
 
 import * as api from "@/lib/api"
 import { presetUrl, scratchUrl } from "@/lib/api/urls"
@@ -111,7 +111,7 @@ export function ScratchItem({ scratch, children }: { scratch: api.TerseScratch,
                 </div>
                 <div className={styles.metadata}>
                     <span>
-                        {presetOrCompiler} • {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                        {presetOrCompiler} • {matchPercentString} matched • {formatDistanceToNowStrict(scratch.last_updated)} ago
                     </span>
                     <div className={styles.actions}>
                         {children}
@@ -148,7 +148,7 @@ export function ScratchItemNoOwner({ scratch }: { scratch: api.TerseScratch }) {
                 </div>
                 <div className={styles.metadata}>
                     <span>
-                        {presetOrCompiler} • {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                        {presetOrCompiler} • {matchPercentString} matched • {formatDistanceToNowStrict(scratch.last_updated)} ago
                     </span>
                 </div>
             </div>
@@ -186,7 +186,7 @@ export function ScratchItemPlatformList({ scratch }: { scratch: api.TerseScratch
                 </div>
                 <div className={styles.metadata}>
                     <span>
-                        {presetOrCompiler} • {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                        {presetOrCompiler} • {matchPercentString} matched • {formatDistanceToNowStrict(scratch.last_updated)} ago
                     </span>
                 </div>
             </div>
@@ -206,7 +206,7 @@ export function ScratchItemPresetList({ scratch }: { scratch: api.TerseScratch }
                     </Link>
                     <div className={styles.metadata}>
                         <span>
-                            {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                            {matchPercentString} matched • {formatDistanceToNowStrict(scratch.last_updated)} ago
                         </span>
                     </div>
                     <div className={styles.owner}>
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index ebc5e6a3b..d2d424d6e 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -301,6 +301,15 @@ export function usePreset(id: number | undefined): Preset | undefined {
     return data
 }
 
+export function useComments(scratch: Scratch): Comment | undefined {
+    const url = typeof scratch.slug === "string" ? `/comment?scratch=${scratch.slug}` : null
+    const { data } = useSWR(url, get, {
+        refreshInterval: 0,
+        onErrorRetry,
+    })
+    return data
+}
+
 export function usePaginated<T>(url: string, firstPage?: Page<T>): {
     results: T[]
     hasNext: boolean
diff --git a/frontend/src/lib/api/types.ts b/frontend/src/lib/api/types.ts
index 2b36bc7fd..aa2ca7fcd 100644
--- a/frontend/src/lib/api/types.ts
+++ b/frontend/src/lib/api/types.ts
@@ -156,6 +156,13 @@ export interface Platform extends PlatformBase {
     presets: Preset[]
 }
 
+export interface Comment {
+    slug: string
+    text: string
+    owner: User | null
+    creation_time: string
+}
+
 export function isAnonUser(user: User | AnonymousUser): user is AnonymousUser {
     return user.is_anonymous
 }
diff --git a/frontend/src/lib/api/urls.ts b/frontend/src/lib/api/urls.ts
index a73b0fc5b..2103592ff 100644
--- a/frontend/src/lib/api/urls.ts
+++ b/frontend/src/lib/api/urls.ts
@@ -1,4 +1,4 @@
-import { Preset, TerseScratch, User } from "./types"
+import { Comment, Preset, TerseScratch, User } from "./types"
 
 export function userHtmlUrl(user: User): string {
     return `/u/${user.username}`
@@ -32,3 +32,7 @@ export function scratchUrl(scratch: TerseScratch): string {
 export function scratchParentUrl(scratch: TerseScratch): string {
     return `/scratch/${scratch.parent}`
 }
+
+export function commentUrl(comment: Comment): string {
+    return `/comment/${comment.slug}`
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4e39d9d08..db741156f 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2871,6 +2871,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -5509,11 +5514,6 @@ react-laag@^2.0.5:
   dependencies:
     tiny-warning "^1.0.3"
 
-react-timeago@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.2.0.tgz#ae929d7423a63cbc3dc228e49d22fbf586d459ca"
-  integrity sha512-2KsBEEs+qRhKx/kekUVNSTIpop3Jwd7SRBm0R4Eiq3mPeswRGSsftY9FpKsE/lXLdURyQFiHeHFrIUxLYskG5g==
-
 react-virtualized-auto-sizer@^1.0.24:
   version "1.0.24"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.24.tgz#3ebdc92f4b05ad65693b3cc8e7d8dd54924c0227"