diff --git a/README.md b/README.md
index 9126919..70e679b 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <p align="center">
   <picture>
     <source srcset="./static/pypi-light.svg" media="(prefers-color-scheme: light)">
-    <img alt="deptry logo" width="420" height="200" src="./static/pypi.svg">
+    <img alt="pypi-scout logo" width="420" height="200" src="./static/pypi.svg">
   </picture>
 </p>
 PyPI Scout helps you find PyPI packages through natural language prompts using Large Language Models (LLM's).
diff --git a/frontend/app/components/InfoBox.tsx b/frontend/app/components/InfoBox.tsx
index a6cf415..f41bf90 100644
--- a/frontend/app/components/InfoBox.tsx
+++ b/frontend/app/components/InfoBox.tsx
@@ -8,15 +8,15 @@ const InfoBox: React.FC<InfoBoxProps> = ({ infoBoxVisible }) => {
   if (!infoBoxVisible) return null;
 
   return (
-    <div className="w-3/5 bg-white p-6 rounded-lg shadow-lg mt-4">
+    <div className="w-3/5 bg-gray-800 p-6 rounded-lg shadow-lg mt-4 text-white">
       <h2 className="text-2xl font-bold mb-2">How does this work?</h2>
-      <p className="text-gray-700">
+      <p className="text-gray-300">
         This application allows you to search for Python packages on PyPI using
         natural language. An example query would be &quot;a package that creates
         plots and beautiful visualizations&quot;.
       </p>
       <br />
-      <p className="text-gray-700">
+      <p className="text-gray-300">
         Once you click search, your query will be matched against the summary
         and the first part of the description of all PyPI packages with more
         than 50 weekly downloads. The results are then scored based on their
diff --git a/frontend/app/components/SearchResultsTable.tsx b/frontend/app/components/SearchResultsTable.tsx
index ce3adb6..4e866c3 100644
--- a/frontend/app/components/SearchResultsTable.tsx
+++ b/frontend/app/components/SearchResultsTable.tsx
@@ -27,11 +27,11 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
 
   return (
     <div className="overflow-x-auto w-full">
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
+      <table className="min-w-full divide-y divide-gray-700">
+        <thead className="bg-gray-800">
           <tr>
             <th
-              className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer whitespace-nowrap"
+              className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider cursor-pointer whitespace-nowrap"
               onClick={() => onSort("name")}
             >
               <div className="flex items-center">
@@ -39,7 +39,7 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
               </div>
             </th>
             <th
-              className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer whitespace-nowrap"
+              className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider cursor-pointer whitespace-nowrap"
               onClick={() => onSort("similarity")}
             >
               <div className="flex items-center">
@@ -48,7 +48,7 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
               </div>
             </th>
             <th
-              className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer whitespace-nowrap"
+              className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider cursor-pointer whitespace-nowrap"
               onClick={() => onSort("weekly_downloads")}
             >
               <div className="flex items-center">
@@ -58,25 +58,27 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
                 </span>
               </div>
             </th>
-            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider">
               Summary
             </th>
-            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider">
               Link
             </th>
           </tr>
         </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
+        <tbody className="bg-gray-800 divide-y divide-gray-700">
           {results.map((result, index) => (
-            <tr key={index} className="hover:bg-gray-100">
-              <td className="px-4 py-2 whitespace-nowrap">{result.name}</td>
-              <td className="px-4 py-2 whitespace-nowrap">
+            <tr key={index} className="hover:bg-gray-700">
+              <td className="px-4 py-2 whitespace-nowrap text-gray-200">
+                {result.name}
+              </td>
+              <td className="px-4 py-2 whitespace-nowrap text-gray-200">
                 {result.similarity.toFixed(3)}
               </td>
-              <td className="px-4 py-2 whitespace-nowrap">
+              <td className="px-4 py-2 whitespace-nowrap text-gray-200">
                 {result.weekly_downloads.toLocaleString()}
               </td>
-              <td className="px-4 py-2 whitespace-normal break-words">
+              <td className="px-4 py-2 whitespace-normal break-words text-gray-200">
                 {result.summary}
               </td>
               <td className="px-4 py-2 whitespace-nowrap">
@@ -84,7 +86,7 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
                   href={`https://pypi.org/project/${result.name}/`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-blue-500 hover:underline flex items-center"
+                  className="text-blue-400 hover:underline flex items-center"
                 >
                   <FaExternalLinkAlt className="mr-1" />
                   PyPI
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 875c01e..3216bc2 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -6,13 +6,16 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+  --dark-bg-start-rgb: 10, 10, 35; /* Very dark blue almost grey */
+  --dark-bg-end-rgb: 25, 25, 50; /* Dark blue */
+  --dark-foreground-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --foreground-rgb: var(--dark-foreground-rgb);
+    --background-start-rgb: var(--dark-bg-start-rgb);
+    --background-end-rgb: var(--dark-bg-end-rgb);
   }
 }
 
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 7ff6fbc..c3ce2cc 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -31,22 +31,29 @@ export default function Home() {
   };
 
   return (
-    <main className="flex flex-col items-center justify-start min-h-screen p-4 space-y-4 bg-gray-100">
-      <header className="w-full text-center mb-4">
-        <h1 className="text-4xl font-bold p-2 mt-4">✨PyPI Scout</h1>
-        <p className="text-lg text-gray-600">
+    <main className="flex flex-col items-center justify-start min-h-screen p-4 space-y-4 bg-gray-900">
+      <header className="w-full flex flex-col items-center text-center mb-4">
+        <picture>
+          <img
+            alt="pypi-scout logo"
+            width="420"
+            height="220"
+            src="./pypi.svg"
+          ></img>
+        </picture>
+        <p className="text-lg text-gray-300 mt-2">
           Enter your query to search for Python packages
         </p>
       </header>
-      <div className="flex flex-col items-center space-y-4 w-3/5 bg-white p-6 rounded-lg shadow-lg">
+      <div className="flex flex-col items-center space-y-4 w-3/5 bg-gray-800 p-6 rounded-lg shadow-lg">
         <textarea
-          className="w-full h-24 p-2 border rounded resize-none overflow-auto focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full h-24 p-2 border border-gray-700 rounded resize-none overflow-auto focus:outline-none focus:ring-2 focus:ring-blue-700 bg-gray-700 text-white"
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Enter your query here..."
         ></textarea>
         <button
-          className="w-[250px] p-2 border rounded bg-blue-500 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-[250px] p-2 border border-gray-700 rounded bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700"
           onClick={() =>
             handleSearch(
               text,
@@ -68,7 +75,7 @@ export default function Home() {
 
       <div className="w-full flex justify-center mt-6">
         <button
-          className="w-[250px] p-2 border rounded bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"
+          className="w-[250px] p-2 border border-gray-700 rounded bg-gray-600 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700"
           onClick={() => setInfoBoxVisible(!infoBoxVisible)}
         >
           {infoBoxVisible ? "Hide Info" : "How does this work?"}
@@ -79,7 +86,7 @@ export default function Home() {
 
       {results.length > 0 && (
         <div className="w-full flex justify-center mt-6">
-          <div className="w-11/12 bg-white p-6 rounded-lg shadow-lg flex flex-col items-center">
+          <div className="w-11/12 bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
             <SearchResultsTable
               results={results}
               sortField={sortField}
diff --git a/static/pypi.svg b/frontend/public/pypi.svg
similarity index 100%
rename from static/pypi.svg
rename to frontend/public/pypi.svg
diff --git a/static/demo.gif b/static/demo.gif
index 4deda2a..f6af526 100644
Binary files a/static/demo.gif and b/static/demo.gif differ
diff --git a/static/pypi-scout.mp4 b/static/pypi-scout.mp4
index 0a9b03a..bbf1096 100644
Binary files a/static/pypi-scout.mp4 and b/static/pypi-scout.mp4 differ