diff --git a/package-lock.json b/package-lock.json
index 5d3f961..fa991b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -885,9 +885,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001468",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz",
-      "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==",
+      "version": "1.0.30001469",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
+      "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
       "dev": true,
       "funding": [
         {
@@ -1051,9 +1051,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.333",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
-      "integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==",
+      "version": "1.4.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
+      "integrity": "sha512-laZ1odk+TRen6q0GeyQx/JEkpD3iSZT7ewopCpKqg9bTjP1l8XRfU3Bg20CFjNPZkp5+NDBl3iqd4o/kPO+Vew==",
       "dev": true
     },
     "node_modules/entities": {
@@ -1539,9 +1539,9 @@
       }
     },
     "node_modules/systemjs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.0.tgz",
-      "integrity": "sha512-OMf+kFCYG9fLQerUyw/QVIPfZ+lo579R+usrDzSrZAkvMl6B0tHtc4rUP7DFaPCr7Sy6p5DYD4V9OCF1Sp6+vA==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
+      "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
       "dev": true
     },
     "node_modules/to-fast-properties": {
@@ -2235,9 +2235,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001468",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz",
-      "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==",
+      "version": "1.0.30001469",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
+      "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
       "dev": true
     },
     "chalk": {
@@ -2352,9 +2352,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.333",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz",
-      "integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==",
+      "version": "1.4.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.334.tgz",
+      "integrity": "sha512-laZ1odk+TRen6q0GeyQx/JEkpD3iSZT7ewopCpKqg9bTjP1l8XRfU3Bg20CFjNPZkp5+NDBl3iqd4o/kPO+Vew==",
       "dev": true
     },
     "entities": {
@@ -2688,9 +2688,9 @@
       "dev": true
     },
     "systemjs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.0.tgz",
-      "integrity": "sha512-OMf+kFCYG9fLQerUyw/QVIPfZ+lo579R+usrDzSrZAkvMl6B0tHtc4rUP7DFaPCr7Sy6p5DYD4V9OCF1Sp6+vA==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz",
+      "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
       "dev": true
     },
     "to-fast-properties": {
diff --git a/package.json b/package.json
index fcbbf53..e240d8a 100644
--- a/package.json
+++ b/package.json
@@ -20,4 +20,4 @@
     "vite": "^4.1.4",
     "vite-plugin-monkey": "^3.0.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..148efaa
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Header from './Site/Header';
+import Catalog from './Site/Catalog';
+import ReactDOM  from 'react-dom';
+let App = () => {
+    let currentUrl = window.location.href;
+    let BoardID = currentUrl.split('/')[3];
+    const threadsElement = document.querySelector('#threads.extended-small');
+    if (threadsElement) {
+        ReactDOM.render(<Catalog boardID={BoardID} />, threadsElement);
+    }
+    return (
+        <div>
+            <Header text="Hello, World!" />
+        </div>
+    );
+};
+export default App;
\ No newline at end of file
diff --git a/src/Site/Catalog.css b/src/Site/Catalog.css
index 70b298e..53ec6c2 100644
--- a/src/Site/Catalog.css
+++ b/src/Site/Catalog.css
@@ -19,6 +19,17 @@
     vertical-align: top;
   }
 
-  .Top {
-    top: 0;
+  .Top-Header {
+    position: fixed;
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: '50px'; 
+    background-color: brown;
+    color: 'white';
+    z-index: 1000;
+  }
+  .Top-Header p {
+    color: white;
+    text-align: center;
   }
\ No newline at end of file
diff --git a/src/Site/Catalog.tsx b/src/Site/Catalog.tsx
index 7acc915..7039b73 100644
--- a/src/Site/Catalog.tsx
+++ b/src/Site/Catalog.tsx
@@ -29,10 +29,16 @@ const fetchCatalog = async (boardID: string): Promise<Page[]> => {
   return data;
 };
 // Creates the json index for the catalog.
-const createThreadElement = (thread: Thread, boardID: string) => {
-  const { no, replies, images, com, sub, tim, ext, tn_h, tn_w } = thread;
+const createThreadElement = (thread: Thread, boardID: string,) => {
+  const { no, images, com, sub, tim, ext, tn_h, tn_w } = thread;
   const threadURL = `https://boards.4channel.org/${boardID}/thread/${no}`;
-  const imgSrc = `https://i.4cdn.org/${boardID}/${tim}${ext}`;
+  // if ext is .webm or gif, show the thumbnail instead.
+  let imgSrc;
+  if (ext === '.webm' || ext === '.gif') {
+    imgSrc = `https://i.4cdn.org/${boardID}/${tim}s.jpg`;
+  } else {
+    imgSrc = `https://i.4cdn.org/${boardID}/${tim}${ext}`;
+  }
   const ratio = 150 / Math.max(tn_w, tn_h);
   return (
     <div key={`thread-${no}`} id={`thread-${no}`} className="thread">
@@ -40,7 +46,7 @@ const createThreadElement = (thread: Thread, boardID: string) => {
       <img id={`thumb-${no}`} src={imgSrc} data-height={tn_h} data-width={tn_w} style={{width: `${tn_w * ratio}px`, height: `${tn_h * ratio}px`}} alt={`Thumbnail for thread ${no}`} />
       </a>
       <div id={`meta-${no}`} className="meta" title="(R)eplies / (I)mage Replies">
-        <b>R: {replies} </b>
+        <b>P: {} </b>
         <b>I: {images} </b>
       </div>
       <div className="teaser">
@@ -55,7 +61,6 @@ const createThreadElement = (thread: Thread, boardID: string) => {
 const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
   const [catalog, setCatalog] = useState<Page[]>([]);
   useEffect(() => {
-    
     const fetchCatalogData = async () => {
       const catalogData = await fetchCatalog(boardID);
       setCatalog(catalogData);
@@ -64,13 +69,15 @@ const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
     fetchCatalogData();
   }, [boardID]);
 
+// Renders on document.querySelector('#threads')
   return (
-    <div className="catalog-container">
-      {catalog.map((page) => 
-        page.threads.map((thread) => createThreadElement(thread, boardID)),
-      )}
+    <div id="threads">
+      {catalog.map((page, index) => (
+        <div key={`page-${index}`} id={`page-${index}`} className="page">
+          {page.threads.map((thread) => createThreadElement(thread, boardID))}
+        </div>
+      ))}
     </div>
   );
 };
-
 export default Catalog;
\ No newline at end of file
diff --git a/src/Site/Header.tsx b/src/Site/Header.tsx
index d709b40..2d45100 100644
--- a/src/Site/Header.tsx
+++ b/src/Site/Header.tsx
@@ -5,11 +5,11 @@ interface TopBarProps {
 }
 
 const TopBar: React.FC<TopBarProps> = ({ text }) => {
+  // Make at the top of the page
   return (
-    <div className='Top' style={{ height: '1px', backgroundColor: 'black' }}>
+    <div className='Top-Header'>
       <p>{text}</p>
     </div>
   );
 };
-
 export default TopBar;
diff --git a/src/main.tsx b/src/main.tsx
index 40b73b2..5e2b3ed 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,32 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { render } from 'react-dom';
 
 // Importing components
-import Catalog from './Site/Catalog';
-import Header from './Site/Header';
-
-const root = document.createElement('div');
-root.id = '4chuds';
-document.body.appendChild(root);
-
-let currentUrl = window.location.href;
-let BoardID = currentUrl.split('/')[3];
-
-//if (currentUrl == 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
-  render(
-    <div>
-      <Header text='Hello, World!' />
-      <Catalog boardID={BoardID}/>
-    </div>,
-    document.querySelector('#threads')
-  );
-//}
-
-if (currentUrl === 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
-  render(<Catalog boardID={BoardID} />, document.getElementById('id'));
-}
+import App from './App';
+ReactDOM.createRoot(
+  (() => {
+    const root = document.createElement('div');
+    document.body.append(root);
+    return root;
+  })(),
+).render(
+  <div>
+    <App />
+  </div>,
+);
 
 
-//render(<Header text='Hello, World!' />, document.createElement('div'));
\ No newline at end of file