diff --git a/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx b/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
index 53c957a..debd965 100644
--- a/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
+++ b/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
@@ -4,6 +4,12 @@ import { getPayload } from 'payload';
 import config from '@/payload.config';
 import { getArticleLayout, ArticleLayouts } from '@/components/Article/Layouts';
 import { LexicalNode } from '@/components/Article/RichTextParser';
+import OpinionHeader from '@/components/Opinion/OpinionHeader';
+import { OpinionArticleHeader } from '@/components/Opinion/OpinionArticleHeader';
+import OpinionScrollBar from '@/components/Opinion/OpinionScrollBar';
+import { OpinionArticleFooter } from '@/components/Opinion/OpinionArticleFooter';
+import { ArticleContent, ArticleFooter } from '@/components/Article';
+import { deriveSlug } from '@/utils/deriveSlug';
 
 export const revalidate = 60;
 
@@ -17,10 +23,11 @@ type Args = {
 };
 
 export default async function ArticlePage({ params }: Args) {
-  const { slug } = await params;
+  const { section, slug } = await params;
   const payload = await getPayload({ config });
 
-  const result = await payload.find({
+  // Try finding by slug first
+  let result = await payload.find({
     collection: 'articles',
     where: {
       slug: {
@@ -30,6 +37,31 @@ export default async function ArticlePage({ params }: Args) {
     limit: 1,
   });
 
+  // If no result, try matching by title (for articles without saved slugs)
+  if (result.docs.length === 0) {
+    const allInSection = await payload.find({
+      collection: 'articles',
+      where: {
+        section: { equals: section },
+      },
+      limit: 200,
+    });
+
+    const match = allInSection.docs.find((doc) => {
+      return deriveSlug(doc.title) === slug;
+    });
+
+    if (match) {
+      // Save the slug so future lookups work directly
+      await payload.update({
+        collection: 'articles',
+        id: match.id,
+        data: { slug },
+      });
+      result = { ...result, docs: [match] };
+    }
+  }
+
   const article = result.docs[0];
 
   if (!article) {
@@ -59,6 +91,24 @@ export default async function ArticlePage({ params }: Args) {
       }
   }
 
+  // Opinion articles get their own custom layout
+  if (section === 'opinion' && layoutType !== 'photofeature') {
+    return (
+      <main className="min-h-screen bg-white pb-20 pt-[58px] font-[family-name:var(--font-raleway)]">
+        <OpinionHeader />
+        <OpinionScrollBar title={article.title} />
+        <article className="container mx-auto px-4 md:px-6 mt-8 md:mt-12">
+          <OpinionArticleHeader article={article} />
+          <div className="max-w-[600px] mx-auto [--foreground-muted:#000000]">
+            <ArticleContent content={article.content} />
+            <ArticleFooter />
+          </div>
+        </article>
+        <OpinionArticleFooter />
+      </main>
+    );
+  }
+
   return <LayoutComponent article={article} content={cleanContent} />;
 }
 
@@ -82,7 +132,7 @@ export async function generateStaticParams() {
       const date = new Date(dateStr);
       const year = date.getFullYear().toString();
       const month = String(date.getMonth() + 1).padStart(2, '0');
-      
+
       return {
         section: doc.section,
         year,
@@ -90,4 +140,4 @@ export async function generateStaticParams() {
         slug: doc.slug as string,
       };
     });
-}
\ No newline at end of file
+}
diff --git a/app/(frontend)/layout.tsx b/app/(frontend)/layout.tsx
index b1eb422..c64823a 100644
--- a/app/(frontend)/layout.tsx
+++ b/app/(frontend)/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Cinzel } from "next/font/google";
+import { Geist, Geist_Mono, Cinzel, Raleway } from "next/font/google";
 import "./globals.css";
 import ThemeProvider from "@/components/ThemeProvider";
 import { cookies } from "next/headers";
@@ -22,6 +22,11 @@ const cinzel = Cinzel({
   subsets: ["latin"],
 });
 
+const raleway = Raleway({
+  variable: "--font-raleway",
+  subsets: ["latin"],
+});
+
 export const metadata: Metadata = {
   title: "The Polytechnic",
   description: "Serving Rensselaer Since 1885",
@@ -55,7 +60,7 @@ export default async function RootLayout({
   return (
     <html lang="en" className={isDarkMode ? "dark" : ""}>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${cinzel.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${cinzel.variable} ${raleway.variable} antialiased`}
       >
         {/* START TEMPORARY OVERLAY: Remove this component when alpha is over */}
         {/* <AlphaOverlay /> */}
diff --git a/app/(frontend)/opinion/page.tsx b/app/(frontend)/opinion/page.tsx
new file mode 100644
index 0000000..7b44313
--- /dev/null
+++ b/app/(frontend)/opinion/page.tsx
@@ -0,0 +1,162 @@
+import React, { Suspense } from 'react';
+import { getPayload } from 'payload';
+import config from '@/payload.config';
+import OpinionHeader from '@/components/Opinion/OpinionHeader';
+import { OpinionSubnav } from '@/components/Opinion/OpinionSubnav';
+import { OpinionArticleGrid } from '@/components/Opinion/OpinionArticleGrid';
+import { OpinionArticle, ColumnistAuthor } from '@/components/Opinion/types';
+import { getArticleUrl } from '@/utils/getArticleUrl';
+import { Article as PayloadArticle, Media } from '@/payload-types';
+
+export const revalidate = 60;
+
+type Props = {
+  searchParams: Promise<{ category?: string }>;
+};
+
+const formatOpinionArticle = (article: PayloadArticle): OpinionArticle | null => {
+  if (!article || typeof article === 'number') return null;
+
+  const authors = article.authors
+    ?.map((author) => {
+      if (typeof author === 'number') return null;
+      return `${author.firstName} ${author.lastName}`;
+    })
+    .filter(Boolean)
+    .join(' AND ') || null;
+
+  const date = article.publishedDate ? new Date(article.publishedDate) : null;
+  let dateString: string | null = null;
+
+  if (date) {
+    const diffMins = Math.floor((Date.now() - date.getTime()) / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMins < 60)
+      dateString = `${diffMins} MINUTE${diffMins !== 1 ? 'S' : ''} AGO`;
+    else if (diffHours < 24)
+      dateString = `${diffHours} HOUR${diffHours !== 1 ? 'S' : ''} AGO`;
+    else if (diffDays < 7)
+      dateString = `${diffDays} DAY${diffDays !== 1 ? 'S' : ''} AGO`;
+  }
+
+  // Get first author's headshot for columnist info
+  let authorHeadshot: string | null = null;
+  let authorId: number | null = null;
+
+  if (article.authors && article.authors.length > 0) {
+    const firstAuthor = article.authors[0];
+    if (typeof firstAuthor !== 'number') {
+      authorId = firstAuthor.id;
+      if (firstAuthor.headshot && typeof firstAuthor.headshot === 'object') {
+        authorHeadshot = (firstAuthor.headshot as Media).url || null;
+      }
+    }
+  }
+
+  return {
+    id: article.id,
+    slug: article.slug || article.title.toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, ''),
+    title: article.title,
+    excerpt: article.subdeck || '',
+    author: authors,
+    authorId,
+    authorHeadshot,
+    date: dateString,
+    publishedDate: article.publishedDate,
+    createdAt: article.createdAt,
+    image: (article.featuredImage as Media)?.url || null,
+    section: article.section,
+    opinionType: article.opinionType || null,
+  };
+};
+
+export default async function OpinionPage({ searchParams }: Props) {
+  const { category } = await searchParams;
+  const payload = await getPayload({ config });
+
+  // Fetch all published opinion articles
+  const result = await payload.find({
+    collection: 'articles',
+    where: {
+      section: {
+        equals: 'opinion',
+      },
+    },
+    sort: '-publishedDate',
+    limit: 100,
+    depth: 2,
+  });
+
+  const articles = result.docs
+    .map(formatOpinionArticle)
+    .filter((a): a is OpinionArticle => a !== null);
+
+  // Derive columnists from articles with opinionType === 'column'
+  const columnistArticles = articles.filter(
+    (a) => a.opinionType === 'column'
+  );
+  const columnistMap = new Map<number, ColumnistAuthor>();
+
+  columnistArticles.forEach((article) => {
+    const originalArticle = result.docs.find((doc) => doc.id === article.id);
+    if (originalArticle && originalArticle.authors) {
+      originalArticle.authors.forEach((author) => {
+        if (typeof author === 'number') return;
+
+        if (!columnistMap.has(author.id)) {
+          columnistMap.set(author.id, {
+            id: author.id,
+            firstName: author.firstName,
+            lastName: author.lastName,
+            headshot: (author.headshot as Media)?.url || null,
+            latestArticleUrl: getArticleUrl({
+              section: originalArticle.section,
+              slug: originalArticle.slug || '#',
+              publishedDate: originalArticle.publishedDate,
+              createdAt: originalArticle.createdAt,
+            }),
+          });
+        }
+      });
+    }
+  });
+
+  const columnists = Array.from(columnistMap.values()).sort((a, b) =>
+    `${a.firstName} ${a.lastName}`.localeCompare(
+      `${b.firstName} ${b.lastName}`
+    )
+  );
+
+  // Filter articles by category
+  const filtered =
+    category && category !== 'all'
+      ? articles.filter((a) => a.opinionType === category)
+      : articles;
+
+  return (
+    <main className="min-h-screen bg-white pt-[58px]">
+      <OpinionHeader />
+
+      {/* Opinion masthead */}
+      <div className="max-w-[1280px] mx-auto px-4 md:px-6 mt-6 md:mt-8 mb-2">
+        <h1 className="text-4xl md:text-5xl font-normal tracking-tight text-gray-900">
+          Opinion
+        </h1>
+      </div>
+
+      {/* Subheader nav with dropdowns */}
+      <Suspense
+        fallback={<div className="h-[49px] border-b border-black bg-white" />}
+      >
+        <OpinionSubnav activeCategory={category || 'all'} columnists={columnists} />
+      </Suspense>
+
+      {/* Article grid */}
+      <div className="max-w-[1280px] mx-auto px-4 md:px-6 py-12">
+        <OpinionArticleGrid articles={filtered} activeCategory={category || 'all'} />
+      </div>
+    </main>
+  );
+}
diff --git a/collections/Articles.ts b/collections/Articles.ts
index 95da813..b0c7664 100644
--- a/collections/Articles.ts
+++ b/collections/Articles.ts
@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+import { deriveSlug } from '../utils/deriveSlug'
 
 const Articles: CollectionConfig = {
   slug: 'articles',
@@ -32,6 +33,11 @@ const Articles: CollectionConfig = {
   hooks: {
     beforeChange: [
       ({ data, originalDoc }) => {
+        // Auto-generate slug from title if not provided
+        if (!data.slug && data.title) {
+          data.slug = deriveSlug(data.title)
+        }
+
         // LOGIC: If transitioning to 'published' via Payload's internal _status, set the publishedDate
         const isNowPublished = data._status === 'published'
         const wasPublished = originalDoc?._status === 'published'
@@ -56,7 +62,7 @@ const Articles: CollectionConfig = {
       type: 'textarea',
     },
     {
-      name: 'section', 
+      name: 'section',
       type: 'select',
       options: [
         { label: 'News', value: 'news' },
@@ -67,6 +73,26 @@ const Articles: CollectionConfig = {
       ],
       required: true,
     },
+    {
+      name: 'opinionType',
+      type: 'select',
+      options: [
+        { label: 'Op-Ed', value: 'opinion' },
+        { label: 'Column', value: 'column' },
+        { label: 'Staff Editorial', value: 'staff-editorial' },
+        { label: 'Editorial Notebook', value: 'editorial-notebook' },
+        { label: 'Endorsement', value: 'endorsement' },
+        { label: 'Top Hat', value: 'top-hat' },
+        { label: 'Candidate Profile', value: 'candidate-profile' },
+        { label: 'Letter to the Editor', value: 'letter-to-the-editor' },
+        { label: "The Poly's Recommendations", value: 'polys-recommendations' },
+        { label: 'Other', value: 'other' },
+      ],
+      admin: {
+        condition: (data) => data?.section === 'opinion',
+        description: 'Categorizes opinion articles. Only visible when section is Opinion.',
+      },
+    },
     {
       name: 'authors',
       type: 'relationship',
@@ -94,6 +120,13 @@ const Articles: CollectionConfig = {
       type: 'upload',
       relationTo: 'media',
     },
+    {
+      name: 'imageCaption',
+      type: 'text',
+      admin: {
+        description: 'Caption for the featured image (e.g. "Illustration by The Polytechnic")',
+      },
+    },
     {
       name: 'content',
       type: 'richText',
diff --git a/collections/Users.ts b/collections/Users.ts
index d142a30..0af265f 100644
--- a/collections/Users.ts
+++ b/collections/Users.ts
@@ -72,9 +72,16 @@ export const Users: CollectionConfig = {
       type: 'upload',
       relationTo: 'media',
     },
+    {
+      name: 'oneLiner',
+      type: 'text',
+      admin: {
+        description: 'A short one-line description (e.g. "is a senior studying computer science")',
+      },
+    },
     {
       name: 'bio',
-      type: 'richText', 
+      type: 'richText',
     },
     {
       name: 'positions',
diff --git a/components/Header.tsx b/components/Header.tsx
index 3908929..3d96e3f 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import Image from "next/image";
 import Link from "next/link";
+import Image from "next/image";
 import { ChevronDown, Menu, ChevronRight, Search } from "lucide-react";
 
 export default function Header() {
@@ -34,9 +34,9 @@ export default function Header() {
           ================================================================== */}
       <header className="lg:hidden sticky top-0 z-50 bg-header-nav border-b border-header-border mb-6">
         <div className="flex items-center justify-between px-3 h-[70px] sm:h-[90px] bg-header-nav relative z-[70]">
-          
+
           <div className="flex-shrink-0 min-w-[44px] z-20">
-            <button 
+            <button
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               className="p-2 -ml-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-full transition-colors"
             >
@@ -67,7 +67,7 @@ export default function Header() {
             <span className="text-xs font-bold tracking-wide whitespace-nowrap text-header-nav-text">18° F</span>
           </div>
         </div>
-        
+
         {!isMobileMenuOpen && (
           <div className="bg-header-nav pb-1 -mt-2 text-center relative z-40">
              <span className="text-[11px] sm:text-sm font-bold text-header-nav-text tracking-wide">
@@ -80,8 +80,8 @@ export default function Header() {
           <div className="fixed inset-0 top-[70px] sm:top-[90px] z-[60] bg-header-nav overflow-y-auto flex flex-col">
             <nav className="flex flex-col p-6 gap-0">
               {navItems.map((item) => (
-                <Link 
-                  key={item} 
+                <Link
+                  key={item}
                   href={item === 'Staff' ? '/staff' : `/${item.toLowerCase()}`}
                   className="flex items-center justify-between text-2xl font-extrabold py-4 border-b border-border-main text-left text-header-nav-text hover:text-accent transition-all group"
                   onClick={() => setIsMobileMenuOpen(false)}
@@ -98,20 +98,20 @@ export default function Header() {
           DESKTOP HEADER
           ================================================================== */}
       <header className="hidden lg:block mb-4">
-        
+
         {/* TOP LOGO ROW */}
         <div className="bg-header-nav pt-2 pb-5">
           <div className="max-w-[1280px] mx-auto px-4 md:px-6 xl:px-[30px] relative">
-            
+
             <div className="relative flex items-center justify-between h-[100px]">
-              
+
               {/* Left Column (Search + Weather) */}
-              <div className="relative z-10 flex flex-col items-start justify-between h-full pointer-events-auto w-[250px] py-2"> 
+              <div className="relative z-10 flex flex-col items-start justify-between h-full pointer-events-auto w-[250px] py-2">
                 {/* Search Icon at Top Left */}
                 <div>
                    <Search className="w-4 h-4 text-header-nav-text cursor-pointer hover:text-header-nav-text/80 transition-colors" />
                 </div>
-                
+
                 {/* Weather Block */}
                 <div className="-mt-6">
                   <div className="flex items-center gap-2">
@@ -127,13 +127,13 @@ export default function Header() {
               {/* CENTER LOGO */}
               <div className="absolute left-[50%] top-[50%] mt-3 -translate-x-1/2 -translate-y-1/2 h-full w-full max-w-[650px] pointer-events-none">
                 <div className="relative w-full h-full">
-                  <Image 
-                    src="/logo.svg" 
-                    alt="The Polytechnic" 
-                    fill 
+                  <Image
+                    src="/logo.svg"
+                    alt="The Polytechnic"
+                    fill
                     style={{ filter: 'var(--header-logo-invert)' }}
-                    className="object-contain" 
-                    priority 
+                    className="object-contain"
+                    priority
                   />
                 </div>
               </div>
@@ -152,8 +152,8 @@ export default function Header() {
             <div className="flex justify-center border-b-[4px] border-double border-header-nav-text -mx-[2.5px]">
               <nav className="flex flex-wrap items-center py-2 gap-8">
                 {desktopNavItems.map((item, index) => (
-                <Link 
-                  key={`${item}-${index}`} 
+                <Link
+                  key={`${item}-${index}`}
                   href={item === 'Staff' ? '/staff' : `/${item.toLowerCase()}`}
                   className="flex items-center gap-1 text-[16px] font-bold text-header-nav-text hover:text-accent transition-colors uppercase"
                 >
@@ -167,4 +167,4 @@ export default function Header() {
       </header>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/components/Opinion/OpinionArticleFooter.tsx b/components/Opinion/OpinionArticleFooter.tsx
new file mode 100644
index 0000000..b5bc489
--- /dev/null
+++ b/components/Opinion/OpinionArticleFooter.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import Link from 'next/link';
+
+type FooterArticle = {
+  title: string;
+  image?: string | null;
+  url: string;
+  label?: string;
+};
+
+const moreInOpinion: FooterArticle[] = [
+  {
+    title: 'RPI Must Do More to Support Student Mental Health',
+    image: '/placeholder.jpg',
+    url: '#',
+    label: 'Op-Ed',
+  },
+  {
+    title: 'The Case for Open-Source Research at Universities',
+    image: '/placeholder.jpg',
+    url: '#',
+    label: 'Staff Editorial',
+  },
+  {
+    title: 'Why Greek Life Still Matters on Campus',
+    image: '/placeholder.jpg',
+    url: '#',
+    label: 'Column',
+  },
+  {
+    title: 'A Letter to the Class of 2029',
+    image: '/placeholder.jpg',
+    url: '#',
+    label: 'Letter to the Editor',
+  },
+  {
+    title: 'Stop Cutting the Arts — They Make Engineers Better',
+    image: '/placeholder.jpg',
+    url: '#',
+    label: 'Endorsement',
+  },
+  {
+    title: 'The Dining Hall Deserves a Reckoning',
+    image: '/placeholder.jpg',
+    url: '#',
+    label: 'Top Hat',
+  },
+];
+
+const trendingArticles: FooterArticle[] = [
+  { title: 'Student Senate Passes Resolution on Campus Safety Lighting', url: '#' },
+  { title: 'Men\'s Hockey Advances to ECAC Quarterfinals', url: '#' },
+  { title: 'Spring Career Fair Draws Record Number of Employers', url: '#' },
+  { title: 'New Maker Space Opens in the Jonsson Engineering Center', url: '#' },
+  { title: 'Faculty Vote to Revise General Education Requirements', url: '#' },
+  { title: 'Club Sports Funding Faces Cuts in New Budget Proposal', url: '#' },
+  { title: 'A Look Inside the Renovation of the Rensselaer Union', url: '#' },
+  { title: 'Campus Shuttle Routes to Change Starting Next Semester', url: '#' },
+];
+
+export const OpinionArticleFooter: React.FC = () => {
+  return (
+    <div className="w-full max-w-[1200px] mx-auto px-4 md:px-6 mt-16 mb-8">
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-0 lg:gap-10">
+        {/* Left: More in Opinion */}
+        <div>
+          <div className="border-t-2 border-gray-300" />
+          <h2 className="text-[17px] font-bold mt-4 mb-6">More in Opinion</h2>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-5 gap-y-8">
+            {moreInOpinion.map((article, idx) => (
+              <Link key={idx} href={article.url} className="group flex flex-col">
+                {article.image && (
+                  <div className="relative aspect-[3/2] w-full overflow-hidden bg-gray-100 mb-2">
+                    <div className="w-full h-full bg-gray-200" />
+                  </div>
+                )}
+                {article.label && (
+                  <span className="text-[11px] text-gray-500 mb-1">
+                    {article.label}
+                  </span>
+                )}
+                <h3 className="text-[15px] font-semibold leading-snug text-gray-900 group-hover:text-gray-600 transition-colors">
+                  {article.title}
+                </h3>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Right: Trending in The Polytechnic */}
+        <div className="mt-10 lg:mt-0">
+          <div className="border-t-2 border-gray-300" />
+          <h2 className="text-[17px] font-bold mt-4 mb-4">Trending in The Polytechnic</h2>
+
+          <div className="flex flex-col">
+            {trendingArticles.map((article, idx) => (
+              <Link
+                key={idx}
+                href={article.url}
+                className="group py-3 border-b border-gray-200 last:border-b-0"
+              >
+                <h3 className="text-[15px] font-semibold leading-snug text-gray-900 group-hover:text-gray-600 transition-colors">
+                  {article.title}
+                </h3>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/Opinion/OpinionArticleGrid.tsx b/components/Opinion/OpinionArticleGrid.tsx
new file mode 100644
index 0000000..70f422c
--- /dev/null
+++ b/components/Opinion/OpinionArticleGrid.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import Link from 'next/link';
+import { OpinionArticle } from './types';
+import { OpinionPageArticleCard } from './OpinionPageArticleCard';
+
+export const OpinionArticleGrid = ({
+  articles,
+  activeCategory,
+}: {
+  articles: OpinionArticle[];
+  activeCategory: string;
+}) => {
+  if (articles.length === 0) {
+    return (
+      <div className="py-12 text-center">
+        <p className="text-gray-500">
+          No articles found in this category.
+        </p>
+      </div>
+    );
+  }
+
+  // Split articles into rows: 1 lead, 3 medium, 5 compact, then repeat
+  const leadArticle = articles[0];
+  const threeRow = articles.slice(1, 4);
+  const fiveRow = articles.slice(4, 9);
+  const remaining = articles.slice(9);
+
+  return (
+    <div>
+      {/* ===== LEAD ARTICLE (1 up) ===== */}
+      <div className="pb-8">
+        <OpinionPageArticleCard article={leadArticle} variant="lead" />
+      </div>
+
+      {/* Faint divider */}
+      <div className="border-t border-gray-200" />
+
+      {/* ===== THREE ROW ===== */}
+      {threeRow.length > 0 && (
+        <div className="py-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-0">
+            {threeRow.map((article, idx) => (
+              <div
+                key={article.id}
+                className={`px-0 sm:px-5 ${
+                  idx === 0 ? 'sm:pl-0' : ''
+                } ${
+                  idx === threeRow.length - 1 ? 'sm:pr-0' : ''
+                } ${
+                  idx < threeRow.length - 1 ? 'sm:border-r border-gray-200' : ''
+                } ${
+                  idx > 0 ? 'mt-6 sm:mt-0' : ''
+                }`}
+              >
+                <OpinionPageArticleCard article={article} variant="medium" />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Faint divider */}
+      {fiveRow.length > 0 && <div className="border-t border-gray-200" />}
+
+      {/* ===== FIVE ROW ===== */}
+      {fiveRow.length > 0 && (
+        <div className="py-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-0">
+            {fiveRow.map((article, idx) => (
+              <div
+                key={article.id}
+                className={`px-0 lg:px-4 ${
+                  idx === 0 ? 'lg:pl-0' : ''
+                } ${
+                  idx === fiveRow.length - 1 ? 'lg:pr-0' : ''
+                } ${
+                  idx < fiveRow.length - 1 ? 'lg:border-r border-gray-200' : ''
+                } ${
+                  idx > 0 ? 'mt-6 lg:mt-0' : ''
+                }`}
+              >
+                <OpinionPageArticleCard article={article} variant="compact" />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* ===== REMAINING ARTICLES (repeat pattern) ===== */}
+      {remaining.length > 0 && (
+        <>
+          <div className="border-t border-gray-200" />
+          <div className="py-8">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-0">
+              {remaining.map((article, idx) => (
+                <div
+                  key={article.id}
+                  className={`px-0 sm:px-5 ${
+                    idx === 0 ? 'sm:pl-0' : ''
+                  } ${
+                    (idx + 1) % 3 === 0 || idx === remaining.length - 1 ? 'sm:pr-0' : ''
+                  } ${
+                    (idx + 1) % 3 !== 0 && idx < remaining.length - 1 ? 'sm:border-r border-gray-200' : ''
+                  } ${
+                    idx >= 3 ? 'mt-8 sm:mt-6 lg:mt-8 pt-6 lg:pt-8 border-t border-gray-200 sm:border-t-0 lg:border-t' : ''
+                  } ${
+                    idx > 0 && idx < 3 ? 'mt-6 sm:mt-0' : ''
+                  }`}
+                >
+                  <OpinionPageArticleCard article={article} variant="medium" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Sidebar boxes */}
+      <div className="border-t border-gray-200 pt-8 mt-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="border border-gray-200 p-6">
+            <h3 className="text-lg font-bold text-gray-900 mb-3">
+              What should The Polytechnic write about?
+            </h3>
+            <p className="text-[14px] text-gray-600 mb-4">
+              Help us prioritize topics for future opinion pieces.
+            </p>
+            <button className="w-full bg-[#D6001C] text-white font-bold py-2.5 px-4 hover:bg-[#a00014] transition-colors text-[14px]">
+              Submit a Suggestion
+            </button>
+          </div>
+          <div className="border-l-4 border-[#D6001C] pl-5 flex items-center">
+            <p className="text-[15px] text-gray-700">
+              Interested in submitting an op-ed?{' '}
+              <Link href="#" className="text-[#D6001C] font-semibold hover:underline">
+                Learn More
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/Opinion/OpinionArticleHeader.tsx b/components/Opinion/OpinionArticleHeader.tsx
new file mode 100644
index 0000000..53b7909
--- /dev/null
+++ b/components/Opinion/OpinionArticleHeader.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import Image from 'next/image';
+import { Article, Media, User } from '@/payload-types';
+
+const opinionTypeLabels: Record<string, string> = {
+  opinion: 'Op-Ed',
+  column: 'Column',
+  'staff-editorial': 'Staff Editorial',
+  'editorial-notebook': 'Editorial Notebook',
+  endorsement: 'Endorsement',
+  'top-hat': 'Top Hat',
+  'candidate-profile': 'Candidate Profile',
+  'letter-to-the-editor': 'Letter to the Editor',
+  'polys-recommendations': "The Poly's Recommendations",
+  other: 'Other',
+};
+
+type Props = {
+  article: Article;
+};
+
+export const OpinionArticleHeader: React.FC<Props> = ({ article }) => {
+  const featuredImage = article.featuredImage as Media | null;
+  const typeLabel = opinionTypeLabels[article.opinionType || 'opinion'] || 'Op-Ed';
+
+  return (
+    <div className="flex flex-col items-center mb-8">
+      {/* Kicker + Opinion Type */}
+      <div className="flex flex-col items-center gap-1 mb-4">
+        <span className="text-[#D6001C] font-bold uppercase text-sm tracking-widest">
+          Opinion
+        </span>
+        <span className="font-bold uppercase text-sm tracking-wide text-gray-900">
+          {typeLabel}
+        </span>
+      </div>
+
+      {/* Faint divider line */}
+      <div className="w-8 border-t border-gray-300 mb-6" />
+
+      {/* Title */}
+      <h1 className="font-medium text-[28px] md:text-[40px] lg:text-[48px] text-gray-900 leading-[1.1] text-center max-w-[600px] mx-auto px-4 mb-4">
+        {article.title}
+      </h1>
+
+      {/* Date */}
+      <div className="text-black text-[13px] mb-8">
+        {article.publishedDate
+          ? new Date(article.publishedDate).toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+              year: 'numeric',
+            })
+          : ''}
+      </div>
+
+      {/* Featured Image + Caption */}
+      {featuredImage?.url && (
+        <div className="w-full max-w-[780px] mx-auto mb-8">
+          <div className="relative w-full bg-gray-100 overflow-hidden">
+            <Image
+              src={featuredImage.url}
+              alt={featuredImage.alt || article.title}
+              width={featuredImage.width || 1200}
+              height={featuredImage.height || 800}
+              className="w-full h-auto"
+              priority
+            />
+          </div>
+          <p className="text-xs text-gray-500 mt-2 text-left">
+            {article.imageCaption || 'Illustration by The Polytechnic'}
+          </p>
+        </div>
+      )}
+
+      {/* Author byline */}
+      <div className="max-w-[600px] w-full mx-auto">
+        <hr className="border-gray-300 mb-4" />
+        <div className="font-bold text-gray-700 text-[15px]">
+          By {article.authors && article.authors.length > 0 ? (
+            article.authors.map((author, index) => {
+              const user = author as User;
+              return (
+                <React.Fragment key={user.id}>
+                  {index > 0 && index === article.authors!.length - 1 ? ' and ' : index > 0 ? ', ' : ''}
+                  {user.firstName} {user.lastName}
+                </React.Fragment>
+              );
+            })
+          ) : (
+            'The Poly Staff'
+          )}
+        </div>
+        {article.authors && article.authors.length > 0 && (
+          <p className="text-gray-500 text-[14px] mt-1">
+            {article.authors.map((author, index) => {
+              const user = author as User;
+              const oneLiner = (user as any).oneLiner || `is a contributor to The Polytechnic`;
+              return (
+                <React.Fragment key={user.id}>
+                  {index > 0 && '. '}
+                  {user.firstName} {user.lastName} {oneLiner}
+                </React.Fragment>
+              );
+            })}.
+          </p>
+        )}
+        <hr className="border-gray-300 mt-4" />
+      </div>
+    </div>
+  );
+};
diff --git a/components/Opinion/OpinionHeader.tsx b/components/Opinion/OpinionHeader.tsx
new file mode 100644
index 0000000..1b51346
--- /dev/null
+++ b/components/Opinion/OpinionHeader.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Menu, X, Search, ChevronRight } from 'lucide-react';
+
+const navItems = ['News', 'Features', 'Opinion', 'Sports', 'Editorial', 'Checkmate', 'Archives', 'About'];
+
+export default function OpinionHeader() {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200">
+      <div className="relative flex items-center h-[58px] px-4 md:px-6">
+        {/* Left: Hamburger menu */}
+        <button
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          className="p-2 hover:bg-gray-100 rounded transition-colors"
+        >
+          {isMobileMenuOpen ? (
+            <X className="w-5 h-5 text-black" />
+          ) : (
+            <Menu className="w-5 h-5 text-black" />
+          )}
+        </button>
+
+        {/* Center: Logo (absolutely centered) */}
+        <Link href="/" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="relative h-[34px] w-[220px] md:h-[38px] md:w-[250px]">
+            <Image
+              src="/logo.svg"
+              alt="The Polytechnic"
+              fill
+              className="object-contain"
+              priority
+            />
+          </div>
+        </Link>
+
+        {/* Right: Search */}
+        <button className="ml-auto p-2 hover:bg-gray-100 rounded transition-colors">
+          <Search className="w-5 h-5 text-black" />
+        </button>
+      </div>
+
+      {/* Sidebar menu */}
+      {isMobileMenuOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-[70] bg-black/30"
+            onClick={() => setIsMobileMenuOpen(false)}
+          />
+          <div className="fixed top-0 left-0 bottom-0 z-[80] w-[230px] bg-white shadow-lg border-r border-gray-200 overflow-y-auto">
+            {/* Close button */}
+            <div className="flex items-center h-[58px] px-4">
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="p-2 hover:bg-gray-100 rounded transition-colors"
+              >
+                <X className="w-5 h-5 text-black" />
+              </button>
+            </div>
+
+            <nav className="flex flex-col px-6">
+              {/* Home with site logo */}
+              <Link
+                href="/"
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="flex items-center justify-between text-lg font-bold py-3 text-left text-black hover:text-[#D6001C] transition-all group"
+              >
+                Home
+                <div className="relative h-[28px] w-[28px] mr-[-6px]">
+                  <Image
+                    src="/static-app-icon.svg"
+                    alt="The Polytechnic"
+                    fill
+                    className="object-contain"
+                  />
+                </div>
+              </Link>
+
+              {navItems.map((item) => {
+                if (item === 'Opinion') {
+                  return (
+                    <Link
+                      key={item}
+                      href="/opinion"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className="flex items-center justify-between text-lg font-bold py-3 text-left text-black hover:text-[#D6001C] transition-all group"
+                    >
+                      {item} <ChevronRight className="w-5 h-5 text-black group-hover:text-[#D6001C]" />
+                    </Link>
+                  );
+                }
+                return (
+                  <button key={item} className="flex items-center justify-between text-lg font-bold py-3 text-left text-black hover:text-[#D6001C] transition-all group">
+                    {item} <ChevronRight className="w-5 h-5 text-black group-hover:text-[#D6001C]" />
+                  </button>
+                );
+              })}
+            </nav>
+          </div>
+        </>
+      )}
+    </header>
+  );
+}
diff --git a/components/Opinion/OpinionPageArticleCard.tsx b/components/Opinion/OpinionPageArticleCard.tsx
new file mode 100644
index 0000000..b4332d5
--- /dev/null
+++ b/components/Opinion/OpinionPageArticleCard.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { OpinionArticle } from './types';
+import { getArticleUrl } from '@/utils/getArticleUrl';
+
+const opinionTypeLabels: Record<string, string> = {
+  opinion: 'Op-Ed',
+  column: 'Column',
+  'staff-editorial': 'Staff Editorial',
+  'editorial-notebook': 'Editorial Notebook',
+  endorsement: 'Endorsement',
+  'top-hat': 'Top Hat',
+  'candidate-profile': 'Candidate Profile',
+  'letter-to-the-editor': 'Letter to the Editor',
+  'polys-recommendations': "The Poly's Recommendations",
+  other: 'Other',
+};
+
+export const OpinionPageArticleCard = ({
+  article,
+  variant = 'compact',
+}: {
+  article: OpinionArticle;
+  variant?: 'lead' | 'medium' | 'compact';
+}) => {
+  const url = getArticleUrl(article);
+  const typeLabel = opinionTypeLabels[article.opinionType || 'opinion'] || 'Opinion';
+
+  // Lead variant: text on left, large image on right (NYT hero style)
+  if (variant === 'lead') {
+    return (
+      <Link href={url} className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10 cursor-pointer group">
+        {/* Left: text content */}
+        <div className="flex flex-col justify-center order-2 md:order-1">
+          <span className="text-[11px] font-bold uppercase tracking-widest text-gray-500 mb-2">
+            {typeLabel}
+          </span>
+          <h2 className="font-bold text-gray-900 text-2xl md:text-[28px] leading-tight mb-3 group-hover:text-gray-600 transition-colors">
+            {article.title}
+          </h2>
+          {article.excerpt && (
+            <p className="text-gray-600 text-[16px] leading-relaxed mb-3">
+              {article.excerpt}
+            </p>
+          )}
+          {article.author && (
+            <p className="text-[13px] text-gray-500">
+              By {article.author}
+            </p>
+          )}
+        </div>
+        {/* Right: image */}
+        {article.image && (
+          <div className="relative aspect-[4/3] w-full overflow-hidden bg-gray-100 order-1 md:order-2">
+            <Image
+              src={article.image}
+              alt={article.title}
+              fill
+              className="object-cover group-hover:brightness-95 transition-all"
+            />
+          </div>
+        )}
+      </Link>
+    );
+  }
+
+  // Medium variant: image on top, text below (NYT 3-column row)
+  if (variant === 'medium') {
+    return (
+      <Link href={url} className="flex flex-col cursor-pointer group">
+        {article.image && (
+          <div className="relative aspect-[3/2] w-full overflow-hidden bg-gray-100 mb-3">
+            <Image
+              src={article.image}
+              alt={article.title}
+              fill
+              className="object-cover group-hover:brightness-95 transition-all"
+            />
+          </div>
+        )}
+        <span className="text-[11px] font-bold uppercase tracking-widest text-gray-500 mb-1.5">
+          {typeLabel}
+        </span>
+        <h3 className="font-bold text-gray-900 text-[17px] leading-snug mb-1.5 group-hover:text-gray-600 transition-colors">
+          {article.title}
+        </h3>
+        {article.excerpt && (
+          <p className="text-gray-600 text-[14px] leading-snug mb-2 line-clamp-3">
+            {article.excerpt}
+          </p>
+        )}
+        {article.author && (
+          <p className="text-[12px] text-gray-500">
+            By {article.author}
+          </p>
+        )}
+      </Link>
+    );
+  }
+
+  // Compact variant: small text-only card (NYT 5-column row)
+  return (
+    <Link href={url} className="flex flex-col cursor-pointer group">
+      {article.image && (
+        <div className="relative aspect-[3/2] w-full overflow-hidden bg-gray-100 mb-2">
+          <Image
+            src={article.image}
+            alt={article.title}
+            fill
+            className="object-cover group-hover:brightness-95 transition-all"
+          />
+        </div>
+      )}
+      <span className="text-[10px] font-bold uppercase tracking-widest text-gray-500 mb-1">
+        {typeLabel}
+      </span>
+      <h3 className="font-bold text-gray-900 text-[15px] leading-snug mb-1 group-hover:text-gray-600 transition-colors line-clamp-3">
+        {article.title}
+      </h3>
+      {article.author && (
+        <p className="text-[11px] text-gray-500">
+          By {article.author}
+        </p>
+      )}
+    </Link>
+  );
+};
diff --git a/components/Opinion/OpinionScrollBar.tsx b/components/Opinion/OpinionScrollBar.tsx
new file mode 100644
index 0000000..2a91cb2
--- /dev/null
+++ b/components/Opinion/OpinionScrollBar.tsx
@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+
+type Props = {
+  title: string;
+};
+
+const shareOptions = [
+  { label: 'Copy link', icon: 'link' },
+  { label: 'Email', icon: 'email' },
+  { label: 'Facebook', icon: 'facebook' },
+  { label: 'X', icon: 'x' },
+  { label: 'LinkedIn', icon: 'linkedin' },
+  { label: 'WhatsApp', icon: 'whatsapp' },
+  { label: 'Reddit', icon: 'reddit' },
+];
+
+function ShareIcon({ type, className }: { type: string; className?: string }) {
+  const cls = className || 'w-5 h-5';
+  switch (type) {
+    case 'link':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+        </svg>
+      );
+    case 'email':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="2" y="4" width="20" height="16" rx="2" />
+          <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+        </svg>
+      );
+    case 'facebook':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="currentColor">
+          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+        </svg>
+      );
+    case 'bluesky':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.785 2.627 3.6 3.513 6.182 3.204-4.344.522-8.143 2.07-3.2 7.227C8.32 25.39 10.93 19.285 12 16.57c1.07 2.716 3.357 8.456 8.394 4.108 4.943-5.157 1.144-6.705-3.2-7.227 2.582.31 5.397-.577 6.182-3.204.246-.828.624-5.788.624-6.479 0-.688-.139-1.86-.902-2.203-.659-.3-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" />
+        </svg>
+      );
+    case 'x':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+        </svg>
+      );
+    case 'linkedin':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="currentColor">
+          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+        </svg>
+      );
+    case 'whatsapp':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="currentColor">
+          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+        </svg>
+      );
+    case 'reddit':
+      return (
+        <svg className={cls} viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+export default function OpinionScrollBar({ title }: Props) {
+  const [visible, setVisible] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setVisible(window.scrollY > 200);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setShareOpen(false);
+      }
+    };
+    if (shareOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [shareOpen]);
+
+  const handleShare = (type: string) => {
+    const url = window.location.href;
+    const text = title;
+
+    switch (type) {
+      case 'link':
+        navigator.clipboard.writeText(url);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+        return;
+      case 'email':
+        window.open(`mailto:?subject=${encodeURIComponent(text)}&body=${encodeURIComponent(url)}`);
+        break;
+      case 'facebook':
+        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`);
+        break;
+      case 'bluesky':
+        window.open(`https://bsky.app/intent/compose?text=${encodeURIComponent(text + ' ' + url)}`);
+        break;
+      case 'x':
+        window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`);
+        break;
+      case 'linkedin':
+        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`);
+        break;
+      case 'whatsapp':
+        window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`);
+        break;
+      case 'reddit':
+        window.open(`https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(text)}`);
+        break;
+    }
+    setShareOpen(false);
+  };
+
+  return (
+    <div
+      className={`fixed top-0 left-0 right-0 z-[51] bg-white border-b border-gray-200 transition-opacity duration-500 ${
+        visible ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      }`}
+    >
+      <div className="relative flex items-center h-[58px] px-4 md:px-6">
+        {/* Left: Logo */}
+        <Link href="/" className="shrink-0">
+          <div className="relative h-[24px] w-[160px] md:h-[28px] md:w-[180px]">
+            <Image
+              src="/logo.svg"
+              alt="The Polytechnic"
+              fill
+              className="object-contain object-left"
+            />
+          </div>
+        </Link>
+
+        {/* Center: OPINION | Title (absolutely centered) */}
+        <div className="hidden md:flex items-center gap-2 text-[13px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[50%]">
+          <span className="font-bold uppercase tracking-wide text-gray-900 shrink-0">Opinion</span>
+          <span className="text-gray-300 shrink-0">|</span>
+          <span className="text-gray-600 truncate">{title}</span>
+        </div>
+
+        {/* Right: Share button + dropdown */}
+        <div className="ml-auto relative" ref={dropdownRef}>
+          <button
+            onClick={() => setShareOpen(!shareOpen)}
+            className="p-2 hover:bg-gray-100 rounded transition-colors shrink-0"
+          >
+            <svg className="w-[16px] h-[16px]" viewBox="0 0 122.88 98.86" fill="#4b5563">
+              <path fillRule="evenodd" clipRule="evenodd" d="M122.88,49.43L73.95,98.86V74.23C43.01,67.82,18.56,74.89,0,98.42c3.22-48.4,36.29-71.76,73.95-73.31l0-25.11L122.88,49.43L122.88,49.43z" />
+            </svg>
+          </button>
+
+          {shareOpen && (
+            <div className="absolute right-0 top-full mt-3 w-[220px] bg-white border border-gray-200 shadow-lg rounded-md z-[100]">
+              {/* Arrow pointing up toward button */}
+              <div className="absolute -top-[9px] right-[12px] w-4 h-4 bg-white border-l border-t border-gray-200 rotate-45" />
+              <div className="relative bg-white rounded-md overflow-hidden">
+                <div className="px-4 pt-4 pb-2">
+                  <h3 className="font-bold text-[15px] text-black">Share options</h3>
+                </div>
+                <div className="flex flex-col pb-1">
+                  {shareOptions.map((opt, i) => (
+                    <div key={opt.icon}>
+                      {i > 0 && <div className="mx-4 border-t border-gray-200" />}
+                      <button
+                        onClick={() => handleShare(opt.icon)}
+                        className="flex items-center gap-3 px-4 py-2.5 text-[15px] text-black hover:bg-gray-100 transition-colors text-left w-full"
+                      >
+                        <ShareIcon type={opt.icon} className="w-5 h-5 shrink-0" />
+                        {opt.icon === 'link' && copied ? 'Copied!' : opt.label}
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Opinion/OpinionSubnav.tsx b/components/Opinion/OpinionSubnav.tsx
new file mode 100644
index 0000000..b615792
--- /dev/null
+++ b/components/Opinion/OpinionSubnav.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ChevronDown } from 'lucide-react';
+import { ColumnistAuthor } from './types';
+
+const tabs = [
+  { label: 'Columns', value: 'column', isDropdown: true },
+  { label: 'Op-Eds', value: 'opinion', isDropdown: false },
+  { label: 'Staff Editorials', value: 'staff-editorial', isDropdown: false },
+  { label: 'Editorial Notebook', value: 'editorial-notebook', isDropdown: false },
+  { label: 'Letters', value: 'letter-to-the-editor', isDropdown: false },
+  { label: 'More', value: 'all-more', isDropdown: true },
+];
+
+const moreOptions = [
+  { label: 'Endorsement', value: 'endorsement' },
+  { label: 'Top Hat', value: 'top-hat' },
+  { label: 'Candidate Profile', value: 'candidate-profile' },
+  { label: "The Poly's Recommendations", value: 'polys-recommendations' },
+  { label: 'Other', value: 'other' },
+];
+
+export const OpinionSubnav = ({
+  activeCategory,
+  columnists,
+}: {
+  activeCategory: string;
+  columnists: ColumnistAuthor[];
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [columnistsOpen, setColumnistsOpen] = useState(false);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const columnistsDropdownRef = useRef<HTMLDivElement>(null);
+  const moreDropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        columnistsDropdownRef.current &&
+        !columnistsDropdownRef.current.contains(e.target as Node)
+      ) {
+        setColumnistsOpen(false);
+      }
+      if (
+        moreDropdownRef.current &&
+        !moreDropdownRef.current.contains(e.target as Node)
+      ) {
+        setMoreOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const pushCategory = (category: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('category', category);
+    router.push(`/opinion?${params.toString()}`);
+    setColumnistsOpen(false);
+    setMoreOpen(false);
+  };
+
+  const tabClass = (isActive: boolean) =>
+    `text-[13px] font-medium uppercase tracking-wide whitespace-nowrap transition-colors flex items-center gap-1.5 ${
+      isActive ? 'text-[#D6001C]' : 'text-black hover:text-[#D6001C]'
+    }`;
+
+  const divider = (
+    <span className="text-gray-300 select-none" aria-hidden>|</span>
+  );
+
+  return (
+    <nav className="bg-white">
+      <div className="max-w-[1280px] mx-auto px-4 md:px-6">
+        <div className="py-2 flex items-center gap-4 overflow-x-auto border-t border-b border-black">
+        {/* Columnists dropdown */}
+        <div ref={columnistsDropdownRef} className="relative flex items-center gap-4">
+          <button
+            onClick={() => setColumnistsOpen(!columnistsOpen)}
+            className={tabClass(activeCategory === 'column')}
+          >
+            Columns
+            <ChevronDown className="w-3.5 h-3.5" />
+          </button>
+
+          {columnistsOpen && (
+            <div className="absolute top-full left-0 mt-3 bg-white border border-gray-200 shadow-lg z-50 min-w-[240px]">
+              {columnists.length > 0 ? (
+                columnists.map((columnist) => (
+                  <button
+                    key={columnist.id}
+                    onClick={() => {
+                      router.push(
+                        `/opinion?category=column#columnist-${columnist.id}`
+                      );
+                      setColumnistsOpen(false);
+                    }}
+                    className="w-full text-left px-4 py-3 text-[14px] text-black hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors"
+                  >
+                    {columnist.firstName} {columnist.lastName}
+                  </button>
+                ))
+              ) : (
+                <div className="px-4 py-3 text-[14px] text-gray-500">
+                  No columnists yet
+                </div>
+              )}
+            </div>
+          )}
+          {divider}
+        </div>
+
+        {/* Regular tabs with pipe dividers */}
+        {tabs
+          .filter((tab) => !tab.isDropdown)
+          .map((tab, idx, arr) => (
+            <React.Fragment key={tab.value}>
+              <button
+                onClick={() => pushCategory(tab.value)}
+                className={tabClass(activeCategory === tab.value)}
+              >
+                {tab.label}
+              </button>
+              {idx < arr.length - 1 && divider}
+            </React.Fragment>
+          ))}
+
+        {/* More dropdown */}
+        {divider}
+        <div ref={moreDropdownRef} className="relative">
+          <button
+            onClick={() => setMoreOpen(!moreOpen)}
+            className={tabClass(activeCategory === 'all-more')}
+          >
+            More
+            <ChevronDown className="w-3.5 h-3.5" />
+          </button>
+
+          {moreOpen && (
+            <div className="absolute top-full right-0 mt-3 bg-white border border-gray-200 shadow-lg z-50 min-w-[200px]">
+              {moreOptions.map((option) => (
+                <button
+                  key={option.label}
+                  onClick={() => pushCategory(option.value)}
+                  className="w-full text-left px-4 py-3 text-[14px] text-black hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors"
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/components/Opinion/types.ts b/components/Opinion/types.ts
new file mode 100644
index 0000000..8d42377
--- /dev/null
+++ b/components/Opinion/types.ts
@@ -0,0 +1,23 @@
+export interface OpinionArticle {
+  id: number | string;
+  slug: string;
+  title: string;
+  excerpt: string;
+  author: string | null;
+  authorId: number | null;
+  authorHeadshot: string | null;
+  date: string | null;
+  publishedDate: string | null;
+  createdAt: string;
+  image: string | null;
+  section: string;
+  opinionType: string | null;
+}
+
+export interface ColumnistAuthor {
+  id: number;
+  firstName: string;
+  lastName: string;
+  headshot: string | null;
+  latestArticleUrl: string | null;
+}
diff --git a/migrations/20260220_160000_add_opinion_type.json b/migrations/20260220_160000_add_opinion_type.json
new file mode 100644
index 0000000..d343ded
--- /dev/null
+++ b/migrations/20260220_160000_add_opinion_type.json
@@ -0,0 +1,24 @@
+{
+  "version": "5.4.14",
+  "dialect": "postgres",
+  "tables": {
+    "articles": {
+      "columns": [
+        {
+          "name": "opinion_type",
+          "type": "text",
+          "notNull": false
+        }
+      ]
+    },
+    "_articles_v": {
+      "columns": [
+        {
+          "name": "version_opinion_type",
+          "type": "text",
+          "notNull": false
+        }
+      ]
+    }
+  }
+}
diff --git a/migrations/20260220_160000_add_opinion_type.ts b/migrations/20260220_160000_add_opinion_type.ts
new file mode 100644
index 0000000..525f9b7
--- /dev/null
+++ b/migrations/20260220_160000_add_opinion_type.ts
@@ -0,0 +1,29 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+    CREATE TYPE "public"."opinion_type_enum" AS ENUM('opinion', 'columnist', 'staff-editorial', 'editorial-notebook', 'special-edition', 'more');
+
+    ALTER TABLE "articles" ADD COLUMN "opinion_type" "opinion_type_enum";
+
+    ALTER TABLE "_articles_v" ADD COLUMN "version_opinion_type" "opinion_type_enum";
+
+    CREATE INDEX "articles_opinion_type_idx" ON "articles" USING btree ("opinion_type");
+
+    CREATE INDEX "_articles_v_version_opinion_type_idx" ON "_articles_v" USING btree ("version_opinion_type");
+  `)
+}
+
+export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+    DROP INDEX IF EXISTS "_articles_v_version_opinion_type_idx";
+
+    DROP INDEX IF EXISTS "articles_opinion_type_idx";
+
+    ALTER TABLE "_articles_v" DROP COLUMN IF EXISTS "version_opinion_type";
+
+    ALTER TABLE "articles" DROP COLUMN IF EXISTS "opinion_type";
+
+    DROP TYPE IF EXISTS "public"."opinion_type_enum";
+  `)
+}
diff --git a/migrations/20260225_update_opinion_types.ts b/migrations/20260225_update_opinion_types.ts
new file mode 100644
index 0000000..e9a6ed0
--- /dev/null
+++ b/migrations/20260225_update_opinion_types.ts
@@ -0,0 +1,85 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  // The original migration created a custom enum "opinion_type_enum".
+  // Payload expects enums named "enum_articles_opinion_type" and "enum__articles_v_version_opinion_type".
+  // We need to: 1) create the new enums with all values, 2) migrate columns, 3) drop old enum.
+
+  // Step 1: Create the Payload-standard enum types with all new values
+  await db.execute(sql`
+    CREATE TYPE "public"."enum_articles_opinion_type" AS ENUM(
+      'opinion', 'column', 'staff-editorial', 'editorial-notebook',
+      'endorsement', 'top-hat', 'candidate-profile', 'letter-to-the-editor',
+      'polys-recommendations', 'other'
+    );
+  `)
+
+  await db.execute(sql`
+    CREATE TYPE "public"."enum__articles_v_version_opinion_type" AS ENUM(
+      'opinion', 'column', 'staff-editorial', 'editorial-notebook',
+      'endorsement', 'top-hat', 'candidate-profile', 'letter-to-the-editor',
+      'polys-recommendations', 'other'
+    );
+  `)
+
+  // Step 2: Migrate old values before changing the column type
+  await db.execute(sql`
+    UPDATE "articles" SET "opinion_type" = 'column' WHERE "opinion_type" = 'columnist';
+    UPDATE "articles" SET "opinion_type" = 'other' WHERE "opinion_type" IN ('more', 'special-edition');
+  `)
+
+  await db.execute(sql`
+    UPDATE "_articles_v" SET "version_opinion_type" = 'column' WHERE "version_opinion_type" = 'columnist';
+    UPDATE "_articles_v" SET "version_opinion_type" = 'other' WHERE "version_opinion_type" IN ('more', 'special-edition');
+  `)
+
+  // Step 3: Alter columns to use the new enum types
+  await db.execute(sql`
+    ALTER TABLE "articles"
+      ALTER COLUMN "opinion_type" SET DATA TYPE "public"."enum_articles_opinion_type"
+      USING "opinion_type"::text::"public"."enum_articles_opinion_type";
+  `)
+
+  await db.execute(sql`
+    ALTER TABLE "_articles_v"
+      ALTER COLUMN "version_opinion_type" SET DATA TYPE "public"."enum__articles_v_version_opinion_type"
+      USING "version_opinion_type"::text::"public"."enum__articles_v_version_opinion_type";
+  `)
+
+  // Step 4: Drop the old custom enum
+  await db.execute(sql`
+    DROP TYPE IF EXISTS "public"."opinion_type_enum";
+  `)
+}
+
+export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+  // Recreate old enum
+  await db.execute(sql`
+    CREATE TYPE "public"."opinion_type_enum" AS ENUM('opinion', 'columnist', 'staff-editorial', 'editorial-notebook', 'special-edition', 'more');
+  `)
+
+  // Revert data
+  await db.execute(sql`
+    UPDATE "articles" SET "opinion_type" = 'columnist' WHERE "opinion_type" = 'column';
+    UPDATE "articles" SET "opinion_type" = 'more' WHERE "opinion_type" = 'other';
+    UPDATE "_articles_v" SET "version_opinion_type" = 'columnist' WHERE "version_opinion_type" = 'column';
+    UPDATE "_articles_v" SET "version_opinion_type" = 'more' WHERE "version_opinion_type" = 'other';
+  `)
+
+  // Revert columns to old enum
+  await db.execute(sql`
+    ALTER TABLE "articles"
+      ALTER COLUMN "opinion_type" SET DATA TYPE "public"."opinion_type_enum"
+      USING "opinion_type"::text::"public"."opinion_type_enum";
+
+    ALTER TABLE "_articles_v"
+      ALTER COLUMN "version_opinion_type" SET DATA TYPE "public"."opinion_type_enum"
+      USING "version_opinion_type"::text::"public"."opinion_type_enum";
+  `)
+
+  // Drop new enums
+  await db.execute(sql`
+    DROP TYPE IF EXISTS "public"."enum__articles_v_version_opinion_type";
+    DROP TYPE IF EXISTS "public"."enum_articles_opinion_type";
+  `)
+}
diff --git a/migrations/index.ts b/migrations/index.ts
index f022449..31e49f6 100644
--- a/migrations/index.ts
+++ b/migrations/index.ts
@@ -1,6 +1,8 @@
 import * as migration_20260211_224237_initial_baseline from './20260211_224237_initial_baseline';
 import * as migration_20260213_223303_remove_copy_workflow from './20260213_223303_remove_copy_workflow';
 import * as migration_20260217_015404_add_photographer_to_media from './20260217_015404_add_photographer_to_media';
+import * as migration_20260220_160000_add_opinion_type from './20260220_160000_add_opinion_type';
+import * as migration_20260225_update_opinion_types from './20260225_update_opinion_types';
 
 export const migrations = [
   {
@@ -18,4 +20,14 @@ export const migrations = [
     down: migration_20260217_015404_add_photographer_to_media.down,
     name: '20260217_015404_add_photographer_to_media'
   },
+  {
+    up: migration_20260220_160000_add_opinion_type.up,
+    down: migration_20260220_160000_add_opinion_type.down,
+    name: '20260220_160000_add_opinion_type'
+  },
+  {
+    up: migration_20260225_update_opinion_types.up,
+    down: migration_20260225_update_opinion_types.down,
+    name: '20260225_update_opinion_types'
+  },
 ];
diff --git a/payload-types.ts b/payload-types.ts
index e1bffe8..809233f 100644
--- a/payload-types.ts
+++ b/payload-types.ts
@@ -130,6 +130,10 @@ export interface User {
   lastName: string;
   roles?: ('admin' | 'eic' | 'editor' | 'writer')[] | null;
   headshot?: (number | null) | Media;
+  /**
+   * A short one-line description (e.g. "is a senior studying computer science")
+   */
+  oneLiner?: string | null;
   bio?: {
     root: {
       type: string;
@@ -213,9 +217,30 @@ export interface Article {
   kicker?: string | null;
   subdeck?: string | null;
   section: 'news' | 'sports' | 'features' | 'editorial' | 'opinion';
+  /**
+   * Categorizes opinion articles. Only visible when section is Opinion.
+   */
+  opinionType?:
+    | (
+        | 'opinion'
+        | 'column'
+        | 'staff-editorial'
+        | 'editorial-notebook'
+        | 'endorsement'
+        | 'top-hat'
+        | 'candidate-profile'
+        | 'letter-to-the-editor'
+        | 'polys-recommendations'
+        | 'other'
+      )
+    | null;
   authors: (number | User)[];
   publishedDate?: string | null;
   featuredImage?: (number | null) | Media;
+  /**
+   * Caption for the featured image (e.g. "Illustration by The Polytechnic")
+   */
+  imageCaption?: string | null;
   content?: {
     root: {
       type: string;
@@ -350,6 +375,7 @@ export interface UsersSelect<T extends boolean = true> {
   lastName?: T;
   roles?: T;
   headshot?: T;
+  oneLiner?: T;
   bio?: T;
   positions?:
     | T
@@ -405,9 +431,11 @@ export interface ArticlesSelect<T extends boolean = true> {
   kicker?: T;
   subdeck?: T;
   section?: T;
+  opinionType?: T;
   authors?: T;
   publishedDate?: T;
   featuredImage?: T;
+  imageCaption?: T;
   content?: T;
   slug?: T;
   updatedAt?: T;
diff --git a/utils/deriveSlug.ts b/utils/deriveSlug.ts
new file mode 100644
index 0000000..b18ff0d
--- /dev/null
+++ b/utils/deriveSlug.ts
@@ -0,0 +1,8 @@
+export const deriveSlug = (title: string): string => {
+  return title
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
diff --git a/utils/getArticleUrl.ts b/utils/getArticleUrl.ts
index 78edd2a..f4223a5 100644
--- a/utils/getArticleUrl.ts
+++ b/utils/getArticleUrl.ts
@@ -1,5 +1,8 @@
+import { deriveSlug } from './deriveSlug';
+
 type ArticleLike = {
   section: string;
+  title?: string;
   slug?: string | null;
   publishedDate?: string | null;
   createdAt?: string;
@@ -11,7 +14,7 @@ export const getArticleUrl = (article: ArticleLike) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const section = article.section;
-  const slug = article.slug;
-  
+  const slug = article.slug || (article.title ? deriveSlug(article.title) : 'untitled');
+
   return `/${section}/${year}/${month}/${slug}`;
 }