diff --git a/__tests__/index.test.js b/__tests__/index.test.js
index ac56131..d5b82ee 100644
--- a/__tests__/index.test.js
+++ b/__tests__/index.test.js
@@ -22,10 +22,12 @@ describe('Layout component', () => {
 
 // Mock the fetchInterviews function from your data fetching module
 jest.mock('../src/data/fetchInterviewData', () => ({
-  fetchInterviews: jest.fn(() => Promise.resolve({
-    interviewsByTopic: {
-      'Topic1': [{ id: 1, name: 'Interview 1' }],
-      'Topic2': [{ id: 2, name: 'Interview 2' }]
-    }
-  }))
+  fetchInterviews: jest.fn(() =>
+    Promise.resolve({
+      interviewsByTopic: {
+        Topic1: [{ id: 1, name: 'Interview 1' }],
+        Topic2: [{ id: 2, name: 'Interview 2' }],
+      },
+    })
+  ),
 }));
diff --git a/public/logo-short.png b/public/logo-short.png
new file mode 100644
index 0000000..d108fe5
Binary files /dev/null and b/public/logo-short.png differ
diff --git a/src/app/components/NavigationBar.tsx b/src/app/components/NavigationBar.tsx
index eab7580..246f28b 100644
--- a/src/app/components/NavigationBar.tsx
+++ b/src/app/components/NavigationBar.tsx
@@ -10,12 +10,10 @@ export default function NavigationBar() {
     >
       <div className="container">
         <Link href="/" className="navbar-brand d-flex align-items-center">
-          <img
-            src="/lit_logo_light.png"
-            alt="Logo"
-            className="logo-image me-2"
-          />
-          <span className="logo-text">Court Forms Online</span>
+          <img src="/logo-short.png" alt="Logo" className="logo-image me-2" />
+          <span id="nav-header-text" className="logo-text">
+            Court Forms Online
+          </span>
         </Link>
         <button
           className="navbar-toggler"
diff --git a/src/app/components/ShowAllToggle.tsx b/src/app/components/ShowAllToggle.tsx
new file mode 100644
index 0000000..d818adc
--- /dev/null
+++ b/src/app/components/ShowAllToggle.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useState } from 'react';
+
+const ShowAllToggle = () => {
+  const [showAll, setShowAll] = useState(false);
+
+  const handleToggle = () => {
+    const topics = document.querySelectorAll(
+      '.topic-card-parent'
+    ) as NodeListOf<HTMLElement>;
+    setShowAll(!showAll);
+    topics.forEach((topic, index) => {
+      if (index > 8) {
+        if (topic.style.display === 'none' || !topic.style.display) {
+          topic.style.display = 'block';
+        } else {
+          topic.style.display = 'none';
+        }
+      }
+    });
+  };
+
+  return (
+    <button className={'show-all-toggle'} onClick={handleToggle}>
+      {showAll ? 'Hide extra categories' : 'Show all categories'}
+    </button>
+  );
+};
+
+export default ShowAllToggle;
diff --git a/src/app/components/TopicCard.tsx b/src/app/components/TopicCard.tsx
index a9b579d..7e49165 100644
--- a/src/app/components/TopicCard.tsx
+++ b/src/app/components/TopicCard.tsx
@@ -1,12 +1,17 @@
+'use client';
 import Link from 'next/link';
+import { useState } from 'react';
 
 interface TopicCardProps {
   topic: {
     name: string;
     long_name: string;
     icon: string;
+    codes: any[];
   };
   interviews: any[];
+  index: number;
+  serverUrl: string;
 }
 
 interface IconProps {
@@ -15,22 +20,47 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const FontAwesomeIcon = ({ iconName, className = '' }: IconProps) => {
-  return <i className={`fas fa-${iconName} ${className}`}></i>;
+const FontAwesomeIcon = ({
+  iconName,
+  className = '',
+  style = {},
+}: IconProps) => {
+  return <i className={`fas fa-${iconName} ${className}`} style={style}></i>;
 };
 
-const TopicCard = ({ topic, interviews }: TopicCardProps) => {
-  // Display the first 3 interviews, and show a final tag with how many remaining interviews are not shown
-  const displayInterviews = interviews.slice(0, 3);
-  const extraCount = interviews.length > 3 ? interviews.length - 3 : 0;
+const TopicCard = ({ topic, interviews, index, serverUrl }: TopicCardProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const visibilityClass = index > 8 ? 'hidden' : '';
+
+  const displayInterviews = isExpanded
+    ? interviews.slice(0, Math.min(10, interviews.length))
+    : interviews.slice(0, 3);
+  const remainingCount = interviews.length > 10 ? interviews.length - 10 : 0;
+
+  const toggleExpand = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleNavigation = (url) => {
+    window.location.href = url;
+  };
 
   return (
-    <div className="col-lg-4">
+    <div
+      className={`col-lg-4 topic-card-parent ${visibilityClass}`}
+      key={topic.codes[0]}
+    >
       <Link
         href={`/${topic.name.toLowerCase()}`}
         className="text-decoration-none text-dark"
       >
-        <div className="card m-1 topic-card h-100">
+        <div
+          className="card topic-card m-1 h-100"
+          onClick={(e) => e.preventDefault()}
+        >
           <div className="card-header d-flex align-items-center">
             <div
               style={{ minWidth: '40px', minHeight: '40px' }}
@@ -41,12 +71,33 @@ const TopicCard = ({ topic, interviews }: TopicCardProps) => {
             <h5 className="card-title ms-3">{topic.long_name}</h5>
           </div>
           <div className="card-body">
-            {displayInterviews.map((interview, index) => (
-              <span key={index} className="form-tag">
-                {interview.metadata.title}
-              </span>
-            ))}
-            {extraCount > 0 && <span className="form-tag">+{extraCount}</span>}
+            <div
+              className="tag-container"
+              style={{ maxHeight: isExpanded ? '800px' : '200px' }}
+            >
+              {displayInterviews.map((interview, index) => (
+                <span
+                  key={index}
+                  className="form-tag text-decoration-none"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleNavigation(serverUrl + interview.link);
+                  }}
+                >
+                  {interview.metadata.title}
+                </span>
+              ))}
+            </div>
+            {interviews.length > 3 && (
+              <div className="show-container">
+                <div className="show-more" onClick={toggleExpand}>
+                  {isExpanded ? 'Show Less' : 'Show More'}
+                  <i
+                    className={`fas fa-chevron-${isExpanded ? 'up' : 'down'}`}
+                  ></i>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </Link>
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 21e6ada..30d6dc8 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 910f72a..eebb154 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,9 +1,9 @@
 /*********************** Suffolk-added styles **********************/
 
 #hero-section {
-  background-color: #c3ecf3;
-  padding-top: 10em;
-  padding-bottom: 10em;
+  background-color: #fbfafe;
+  padding-top: 7em;
+  padding-bottom: 7em;
 }
 
 #hero-section h1 {
@@ -16,14 +16,20 @@
 
 #how-it-works-section {
   padding: 5em 0 5em 0;
+  background-color: #3e7d9a54;
 }
 
-/*footer {
-  background-color: #3e7d9a;
-}*/
+footer {
+  background-color: #fbfafe;
+}
+
+.card-container {
+  margin-bottom: 1.5em;
+  padding-top: 1.5em;
+}
 
 #topics {
-  background-color: #c3ecf3;
+  background-color: #fbfafe;
   padding: 1em;
   padding-top: 5em;
   padding-bottom: 2em;
@@ -31,33 +37,45 @@
 
 #topics .card-header {
   background-color: #fff;
+  margin-bottom: 0;
 }
 
 #topics .card-body {
   background-color: #fff;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 1em;
 }
 
 #topics .card-header {
+  padding: 1em;
   border-bottom: none;
 }
 
+.tag-container {
+  overflow: hidden;
+  transition: max-height 0.4s ease-in-out;
+}
+
 .form-tag {
   transition: all 0.05s ease-in-out;
   padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #c3ecf3;
+  border-radius: 7px;
+  background-color: #3e7d9a2d;
   color: black;
   display: inline-block;
   margin-right: 10px;
   font-size: 14px;
   margin-bottom: 10px;
   border-style: solid;
-  border-width: 1px;
-  border-color: #c3ecf3;
+  border-color: #cbcdd4;
+  box-shadow: rgba(119, 119, 119, 0.16) 0px 1px 4px;
 }
 
 .form-tag:hover {
-  border-color: rgba(1, 65, 255, 0.3);
+  border-color: rgb(62, 125, 154);
 }
 
 .topic-card {
@@ -70,21 +88,73 @@
 }
 
 .topic-card .fa-icon {
-  color: #c69931;
+  font-size: 1.3em;
+  color: #fdb714;
 }
 
 .topic-card .icon-container {
-  background-color: #2e4d82;
+  background-color: #162a47;
   padding: 0.2em;
 }
 
 .topic-card .card-title {
-  font-size: 1em;
+  font-size: 1.3em;
+  color: #002e60;
+  margin-bottom: 0px;
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: block;
+}
+
+.show-more {
+  cursor: pointer;
+  color: #162a47;
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  border: none;
+  margin-top: 10px;
+  align-self: flex-end;
+  padding: 0.5em;
+}
+
+.show-all-toggle {
+  cursor: pointer;
+  font-size: 1.2em;
+  border: none;
+  background: none;
+  margin-top: 10px;
+}
+
+.show-more i {
+  margin-left: 5px;
+}
+
+#nav-header-text {
   color: #002e60;
+  align-self: end;
+  margin-bottom: -5px;
+}
+
+.show-container {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
 }
 
 .courtformsonline-navbar {
-  background-color: #002e60;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    #fbfafe 30%,
+    rgba(0, 28, 96, 1) 30%,
+    rgba(0, 46, 96, 1) 30%
+  );
   height: 70px;
 }
 
@@ -101,6 +171,10 @@
   max-height: 70px;
 }
 
+.show-all-categories {
+  margin-top: 10em;
+}
+
 @font-face {
   font-family: 'Inter';
   src: url('/fonts/Inter-Bold.ttf') format('truetype');
@@ -129,3 +203,15 @@ h5 {
 body {
   font-family: 'Inter';
 }
+
+@media (max-width: 990px) {
+  .courtformsonline-navbar {
+    background: rgb(2, 0, 36);
+    background: linear-gradient(
+      90deg,
+      #fbfafe 75%,
+      rgba(0, 28, 96, 1) 75%,
+      rgba(0, 46, 96, 1) 75%
+    );
+  }
+}
diff --git a/src/app/hello.tsx b/src/app/hello.tsx
deleted file mode 100644
index c60cea3..0000000
--- a/src/app/hello.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// `app/page.tsx` is the UI for the `/` URL
-export default function Page() {
-  return <h1>Hello, Home page!</h1>;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e6147e0..b977af3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,11 +21,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className={`body-container ${inter.className}`}>
-      <NavigationBar />
-      {children}
-      <Footer />
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="body-container">
+          <NavigationBar />
+
+          {children}
+        </div>
+        <Footer />
+      </body>
       <Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" />
-    </div>
+    </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e5d4d97..9ac97ae 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,31 @@
-import Link from 'next/link';
 import HeroSection from './components/HeroSection';
 import HowItWorksSection from './components/HowItWorksSection';
 import { fetchInterviews } from '../data/fetchInterviewData';
 import TopicCard from './components/TopicCard';
 import { legalTopics } from '../config/topics.config';
+import ShowAllToggle from './components/ShowAllToggle';
+import { formSources } from '../config/formSources.config';
 
 export default async function TopicsPage() {
   const interviewsResult = await fetchInterviews();
   const { interviewsByTopic } = interviewsResult;
 
+  // Modify this to account for various jurisdictions
+  const serverKey = 'suffolkListLab';
+  const server = formSources.docassembleServers.find(
+    (server) => server.key === serverKey
+  );
+  const url = server ? server.url : 'https://apps.suffolklitlab.org';
+
+  const filteredTopics = legalTopics
+    .sort((a, b) => b.priority - a.priority)
+    .filter(
+      (topic, index) =>
+        topic.always_visible ||
+        (interviewsByTopic[topic.name] &&
+          interviewsByTopic[topic.name].length > 0)
+    );
+
   return (
     <div>
       <HeroSection />
@@ -16,24 +33,18 @@ export default async function TopicsPage() {
       <section id="topics">
         <div className="container">
           <h2>Browse court forms by category</h2>
-          <div className="row row-cols-1 row-cols-md-3 g-5">
-            {legalTopics
-              .sort((a, b) => b.priority - a.priority)
-              .filter(
-                (topic) =>
-                  topic.always_visible ||
-                  (interviewsByTopic[topic.name] &&
-                    interviewsByTopic[topic.name].length > 0)
-              )
-              .map((topic) => (
-                <TopicCard
-                  key={topic.codes[0]}
-                  topic={topic}
-                  interviews={interviewsByTopic[topic.name] || []}
-                />
-              ))}
+          <div className="row row-cols-1 row-cols-md-3 g-5 card-container">
+            {filteredTopics.map((topic, index) => (
+              <TopicCard
+                key={topic.codes[0]}
+                topic={topic}
+                interviews={interviewsByTopic[topic.name] || []}
+                index={index}
+                serverUrl={url}
+              />
+            ))}
           </div>
-          <Link href="#">Show all categories</Link>
+          {filteredTopics.length > 9 && <ShowAllToggle />}
         </div>
       </section>
     </div>