diff --git a/public/img/flags/stateless.png b/public/img/flags/stateless.png
new file mode 100644
index 0000000..2d004f9
Binary files /dev/null and b/public/img/flags/stateless.png differ
diff --git a/public/img/flags/unknown.png b/public/img/flags/unknown.png
new file mode 100644
index 0000000..c394e5c
Binary files /dev/null and b/public/img/flags/unknown.png differ
diff --git a/public/img/logos/primos.png b/public/img/logos/primos.png
new file mode 100644
index 0000000..726981f
Binary files /dev/null and b/public/img/logos/primos.png differ
diff --git a/public/img/profiles/cbordalo.jpg b/public/img/profiles/cbordalo.jpg
new file mode 100644
index 0000000..75b32ad
Binary files /dev/null and b/public/img/profiles/cbordalo.jpg differ
diff --git a/src/app/author/[author]/AuthorDisplay.tsx b/src/app/author/[author]/AuthorDisplay.tsx
index 47ccd78..f1eb094 100644
--- a/src/app/author/[author]/AuthorDisplay.tsx
+++ b/src/app/author/[author]/AuthorDisplay.tsx
@@ -5,7 +5,6 @@ import { Zilla_Slab } from 'next/font/google'
 import { notFound } from 'next/navigation'
 import DocumentCard from '@/app/components/DocumentCard'
 import findDocumentsByAuthor from './findDocumentsByAuthor'
-import { redirect } from 'next/navigation' // for server side
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -40,13 +39,13 @@ export default function AuthorDisplay({
             </a>
           </div>
         ) : null}
-        <div className='my-4 max-h-12 flex flex-wrap'>
+        <div className='my-4 max-h-12 flex flex-wrap gap-2'>
           {affiliation.map((a: string) => (
             <Link key={a} href={`/affiliation/${a.split('@')[1]}`}>
               <img
                 src={affiliations[a.split('@')[1]].image}
                 alt={affiliations[a.split('@')[1]].name}
-                className='h-12 mr-3 shadow-md shadow-slate-300'
+                className='h-12 shadow-sm shadow-slate-400 rounded-md'
               />
             </Link>
           ))}
diff --git a/src/app/components/DataDisplay.tsx b/src/app/components/DataDisplay.tsx
index 249bd92..0fe0dd7 100644
--- a/src/app/components/DataDisplay.tsx
+++ b/src/app/components/DataDisplay.tsx
@@ -59,9 +59,7 @@ export const Topics = ({
       {showTitle ? <span className='font-bold'>Topics: </span> : null}
       {topics.map((t: string, i) => (
         <Fragment key={t}>
-          <Link href={topicList[t].wiki} target='_blank'>
-            {topicList[t].name}
-          </Link>
+          <Link href={`/topic/${t}`}>{topicList[t].name}</Link>
           {i !== topics.length - 1 ? ', ' : null}
         </Fragment>
       ))}
diff --git a/src/app/components/DataDisplayClient.tsx b/src/app/components/DataDisplayClient.tsx
index 88df604..ee5f914 100644
--- a/src/app/components/DataDisplayClient.tsx
+++ b/src/app/components/DataDisplayClient.tsx
@@ -57,9 +57,7 @@ export const Topics = ({
       {showTitle ? <span className='font-bold'>Topics: </span> : null}
       {topics.map((t: string, i) => (
         <Fragment key={t}>
-          <Link href={topicList[t].wiki} target='_blank'>
-            {topicList[t].name}
-          </Link>
+          <Link href={`/topic/${t}`}>{topicList[t].name}</Link>
           {i !== topics.length - 1 ? ', ' : null}
         </Fragment>
       ))}
diff --git a/src/app/components/DocumentCard.tsx b/src/app/components/DocumentCard.tsx
index f3fa0d0..76f95dc 100644
--- a/src/app/components/DocumentCard.tsx
+++ b/src/app/components/DocumentCard.tsx
@@ -4,6 +4,7 @@ import { Authors, Topics } from './DataDisplay'
 import { ItemBadge, Status } from './Badges'
 import { epoch2datestring } from '@/app/utils/epoch2datestring'
 import Link from 'next/link'
+import cardEffects from '@/app/styles/cardEffects.module.css'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -13,7 +14,7 @@ const DocumentCard = ({ doc, href }: { doc: Document; href: string }) => {
   return (
     <Link href={href} className='no-link-style'>
       <div
-        className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
+        className={`${cardEffects.card} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md`}
         role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
       >
         <h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
diff --git a/src/app/components/News.tsx b/src/app/components/News.tsx
index fab92f0..1c56c26 100644
--- a/src/app/components/News.tsx
+++ b/src/app/components/News.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { Inter, Zilla_Slab } from 'next/font/google'
 
 const zillaSlab = Zilla_Slab({ weight: '600', subsets: ['latin'] })
-const inter = Inter({ weight: '400', subsets: ['latin'] })
+const inter = Inter({ weight: ['400', '500'], subsets: ['latin'] })
 
 export default function News() {
   return (
@@ -12,9 +12,7 @@ export default function News() {
         ' mt-6 bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto shadow-slate-500 shadow-sm'
       }
     >
-      <div
-        className={zillaSlab.className + ' font-serif text-3xl text-slate-200'}
-      >
+      <div className={zillaSlab.className + ' text-3xl text-slate-200'}>
         eeXiv News
       </div>
       <div className='text-lg text-slate-400 mb-4'>
diff --git a/src/app/components/RandomDocs.tsx b/src/app/components/RandomDocs.tsx
index 0f492d9..a6fd968 100644
--- a/src/app/components/RandomDocs.tsx
+++ b/src/app/components/RandomDocs.tsx
@@ -52,7 +52,11 @@ const RandomDocs = (): React.ReactNode[] => {
     return (
       <div key={key}>
         <Link href={`/document/view/${key}`}>{title}</Link>, a {typeString}{' '}
-        about {topicsList[topics[0]]['name']} published on {dateString}
+        about{' '}
+        <Link href={`/topic/${topics[0]}`}>
+          {topicsList[topics[0]]['name']}
+        </Link>{' '}
+        published on {dateString}
         .
         <br />
       </div>
diff --git a/src/app/components/RecentDocuments.tsx b/src/app/components/RecentDocuments.tsx
index d12dabd..bd48b10 100644
--- a/src/app/components/RecentDocuments.tsx
+++ b/src/app/components/RecentDocuments.tsx
@@ -59,7 +59,11 @@ const RecentDocuments = (): React.ReactNode[] => {
     return (
       <div key={key}>
         <Link href={`/document/view/${key}`}>{title}</Link>, a {typeString}{' '}
-        about {topicsList[topics[0]]['name']} published on {dateString}
+        about{' '}
+        <Link href={`/topic/${topics[0]}`}>
+          {topicsList[topics[0]]['name']}
+        </Link>{' '}
+        published on {dateString}
         .
         <br />
       </div>
diff --git a/src/app/db/data.ts b/src/app/db/data.ts
index 482db35..723ce86 100644
--- a/src/app/db/data.ts
+++ b/src/app/db/data.ts
@@ -524,6 +524,16 @@ export const authors: Readonly<{ [key: string]: Author }> = {
     image: '/img/profiles/default.png',
     website: 'https://futureinspireacademy.com',
   },
+  cbordalo: {
+    name: {
+      first: 'Christian',
+      last: 'Bordalo',
+      nickname: 'CB12',
+    },
+    affiliation: ['Wage Slave@primos', 'Student@srvhs'],
+    image: '/img/profiles/cbordalo.jpg',
+    nationality: ['stateless', 'unknown'],
+  },
 }
 
 export interface Affiliation {
@@ -680,7 +690,20 @@ Raid Zero's influence extends beyond the technical achievements in robotics comp
       Future Inspire Academy (FIA) is a non-profit organization that strives to teach students how to apply their coding skills to game development in a fun and efficient way. Our mission is to create a platform to reward members who start their game development journey early. We give members all the resources to learn quickly and reward their efforts with points which can be used to upgrade their game jam prizes. Become a member today and reap all the benefits by joining our Discord Server!
       [linebreak]
       Our organization not only impacts our members from around the world but also our partners as we help promote their business and improve their products. Our new vision has been to help develop companies that would contribute to the future of game development and promote accessibility. Recently, we launched exclusive early access to Rosebud’s game maker platform for all of our members to try. In the future, we plan to host more exclusive events that revolve around our partners. 
-`,
+    `,
+  },
+  primos: {
+    name: `Primo's Pizzeria & Pub`,
+    short: 'Primos',
+    image: '/img/logos/primos.png',
+    description: `
+    Welcoming, family-run restaurant pairs straightforward pizzas, pasta & sandwiches with beers on tap.
+    [linebreak]
+      Service options: Serves happy hour food · Serves vegetarian dishes · Good for watching sports
+      [linebreak]
+      Address: 298 Hartz Ave, Danville, CA 94526
+      [linebreak]
+      Phone: (925) 838-8214`,
   },
 }
 
@@ -735,4 +758,19 @@ export const nationalities: Readonly<{ [key: string]: Nationality }> = {
     demonym: 'Japanese',
     flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png',
   },
+  isr: {
+    name: 'State of Israel',
+    demonym: 'Israeli',
+    flag: 'https://upload.wikimedia.org/wikipedia/commons/5/5c/Israel_flag_300.png?20050629023821',
+  },
+  unknown: {
+    name: 'Undetermined',
+    demonym: 'Undetermined',
+    flag: '/img/flags/unknown.png',
+  },
+  stateless: {
+    name: 'Stateless',
+    demonym: 'Stateless',
+    flag: '/img/flags/stateless.png',
+  },
 }
diff --git a/src/app/document/view/[slug]/DocumentViewer.tsx b/src/app/document/view/[slug]/DocumentViewer.tsx
index c48b39a..4ecb327 100644
--- a/src/app/document/view/[slug]/DocumentViewer.tsx
+++ b/src/app/document/view/[slug]/DocumentViewer.tsx
@@ -36,7 +36,7 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
         className={`
             text-slate-800 text-5xl mb-4
             ${zillaSlab.className}
-            text-wrap
+            text-wrap break-words hyphens-auto
           `}
       >
         {title}
diff --git a/src/app/globals.css b/src/app/globals.css
index 0222888..678f2a8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -13,7 +13,7 @@
 }
 
 a {
-  color: #2563eb; /* Tailwind's blue-600 */
+  @apply text-blue-600;
 }
 
 a:hover {
diff --git a/src/app/help/accessibility/accessibility.module.css b/src/app/help/accessibility/accessibility.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/help/help.module.css b/src/app/help/help.module.css
deleted file mode 100644
index 17ccfdf..0000000
--- a/src/app/help/help.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.content {
-  margin-top: 40px;
-  padding: 35px;
-  border-radius: 15px;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d3d30fd..48a787d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -60,11 +60,12 @@ export default function RootLayout({
             className={`${styles.banner} w-full h-[100px] mb-[50px] shadow-md shadow-slate-400`}
           >
             <div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
-              <h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
-                <Link href='/' className='no-link-style'>
-                  eeXiv
-                </Link>
-              </h1>
+              <Link
+                href='/'
+                className={`${zillaSlab.className} no-link-style ${styles.title} mx-10`}
+              >
+                eeXiv
+              </Link>
               <div className='hidden md:inline'>
                 <SearchBar />
               </div>
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index af4414e..a88aa7d 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -6,6 +6,7 @@ import { Status, ItemBadge } from '@/app/components/Badges'
 import { epoch2datestring } from '../utils/epoch2datestring'
 import searchDocs, { CustomSearchResult } from '@/app/utils/searchDocs'
 import { useSuspenseQuery } from '@tanstack/react-query'
+import cardEffects from '@/app/styles/cardEffects.module.css'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
 
@@ -41,7 +42,7 @@ const SearchResult = ({
 
   return (
     <div
-      className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
+      className={`${cardEffects.card} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer`}
       onClick={handleClick}
       role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
     >
diff --git a/src/app/styles/cardEffects.module.css b/src/app/styles/cardEffects.module.css
new file mode 100644
index 0000000..dba28e2
--- /dev/null
+++ b/src/app/styles/cardEffects.module.css
@@ -0,0 +1,28 @@
+/* creates a 3D card effect using a pseudo element for performance reasons */
+
+.card {
+  @apply shadow-sm shadow-slate-300;
+  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  position: relative;
+}
+.card::after {
+  @apply shadow-lg shadow-slate-500;
+  content: '';
+  z-index: -1;
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.card:hover {
+  transform: scale(1.02, 1.02);
+}
+
+.card:hover::after {
+  opacity: 1;
+}
diff --git a/src/app/topic/[slug]/page.tsx b/src/app/topic/[slug]/page.tsx
new file mode 100644
index 0000000..5cf7449
--- /dev/null
+++ b/src/app/topic/[slug]/page.tsx
@@ -0,0 +1,29 @@
+import { Zilla_Slab } from 'next/font/google'
+import { topics } from '@/app/db/data'
+import { notFound } from 'next/navigation'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+
+export function generateStaticParams() {
+  const topicsList = Object.keys(topics)
+  return topicsList.map((topic) => ({ topic }))
+}
+
+export default function Page({
+  params,
+}: Readonly<{ params: { slug: string } }>) {
+  const topic = topics[params.slug]
+  if (!topic) notFound()
+  const { name, description, wiki } = topic
+
+  return (
+    <div className='flex p-4 lg:p-8 mx-auto bg-slate-200 shadow-slate-300 shadow-sm rounded-md max-w-2xl flex-col gap-4'>
+      <h1 className={`${zillaSlab.className} text-5xl`}>{name}</h1>
+      <p className='text-slate-700 text-lg'>{description}</p>
+      <p>
+        <span className='text-slate-800'>Read more at:</span>{' '}
+        <a href={wiki}>{wiki}</a>
+      </p>
+    </div>
+  )
+}