diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cbb41ab
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "AlignmentSearch",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/web/src/components/about.tsx b/web/src/components/about.tsx
new file mode 100644
index 0000000..d83df48
--- /dev/null
+++ b/web/src/components/about.tsx
@@ -0,0 +1,65 @@
+
+import React, { useState } from "react";
+
+const Footer: React.FC = () => {
+  const [isContentVisible, setIsContentVisible] = useState(false);
+
+  const toggleContentVisibility = () => {
+    setIsContentVisible(!isContentVisible);
+  };
+
+  return (
+    <footer>
+
+      <button
+        className="text-gray-500 hover:text-gray-700 hover:underline"
+        onClick={toggleContentVisibility}      >
+        {isContentVisible ? "hide about" : "about this conversational agent"} 
+      </button>
+
+      {isContentVisible && (
+        <div className="text-gray-500">
+          <p>
+            This site has been created by McGill students Henri Lemoine, Fraser
+            Lee, and Thomas Lemoine as an attempt to create a "conversational
+            FAQ" that can answer questions about AI alignment. When asked a
+            question, we
+          </p>
+          <ol>
+            <li>Embed the question into a low dimensional semantic space</li>
+            <li>
+              Pull the semantically closest passages out of a massive alignment
+              dataset
+            </li>
+            <li>
+              Instruct an LLM to construct a response while citing these
+              passages
+            </li>
+            <li>
+              Display this response in conversational flow with inline
+              citations
+            </li>
+          </ol>
+          <p>
+            We've created this as an attempt on the{" "}
+            <a href="https://www.lesswrong.com/posts/SLRLuiuDykfTdmesK/speed-running-everyone-through-the-bad-alignement-bingo">
+              $5k bounty for a LW conversational agent
+            </a>
+            .
+          </p>
+          <p>
+            We hope that it can be a useful tool for the community, and we're
+            eager to hear feedback and suggestions. For a technical report on
+            our implementation, see our{" "}
+            <a href="https://www.lesswrong.com/posts/bGn9ZjeuJCg7HkKBj/introducing-alignmentsearch-an-ai-alignment-informed">
+              LessWrong post
+            </a>
+            .
+          </p>
+        </div>
+      )}
+    </footer>
+  );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
new file mode 100644
index 0000000..0e53931
--- /dev/null
+++ b/web/src/components/header.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import Link from "next/link";
+import About from "./about";
+
+const Header: React.FC<{ page: "index" | "semantic" }> = ({ page }) => {
+    const sidebar = page === "index" ? (
+        <span className="flex flex-col flex-1 justify-start text-right mt-4">
+            <p className="my-0">Conversational Agent</p>
+            <Link href="/semantic">Semantic Search</Link>
+        </span>
+    ) : (
+        <span className="flex flex-col flex-1 justify-start text-right">
+            <Link href="/">Conversational Agent</Link>
+            <p className="my-0">Semantic Search</p>
+        </span>
+
+    );
+
+    return (<div className="my-20">
+
+        <div className="flex">
+            <h1 className="flex-1 text-4xl"> Alignment Search </h1>
+            {sidebar}
+        </div>
+        <About />
+
+    </div>);
+};
+
+export default Header;
diff --git a/web/src/searchbox.tsx b/web/src/components/searchbox.tsx
similarity index 80%
rename from web/src/searchbox.tsx
rename to web/src/components/searchbox.tsx
index d21dedd..21d7c69 100644
--- a/web/src/searchbox.tsx
+++ b/web/src/components/searchbox.tsx
@@ -25,10 +25,11 @@ const SearchBox: React.FC<{search: (
         <form className="flex mb-2" onSubmit={async (e) => {
             e.preventDefault();
             search(query, setQuery, setLoading);
-        }}>
+        }}
+        >
 
             <TextareaAutosize
-                className="border border-gray-300 px-1 flex-1 resize-none"
+                className="py-3 border border-gray-400 rounded  shadow px-1 flex-1 resize-none"
                 ref={inputRef}
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
@@ -41,11 +42,13 @@ const SearchBox: React.FC<{search: (
                         if (query.trim() !== "") search(query, setQuery, setLoading);
                     }
                 }}
+                placeholder="What is AI Alignment?"
             />
-            <button className="ml-2" type="submit" disabled={loading}>
-                {loading ? "Loading..." : "Search"}
+            <button className="ml-2 w-40 bg-white hover:bg-gray-100 border rounded shadow border-gray-400" type="submit" disabled={loading}>
+                {loading ? "Loading..." : " 🔎 Search"}
             </button>
         </form>
+        
     </>);
 };
 
diff --git a/web/src/header.tsx b/web/src/header.tsx
deleted file mode 100644
index 901bf62..0000000
--- a/web/src/header.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import Link from "next/link";
-
-const Header: React.FC<{page: "index" | "semantic"}> = ({page}) => {
-    const sidebar = page === "index" ? (
-        <span className="flex flex-col font-semibold flex-1 justify-start text-right">
-            <p className="my-0">Conversational Agent</p>
-            <Link href="/semantic">Semantic Search</Link>
-        </span>
-    ) : (
-        <span className="flex flex-col font-semibold flex-1 justify-start text-right">
-            <Link href="/">Conversational Agent</Link>
-            <p className="my-0">Semantic Search</p>
-        </span>
-    );
-        
-    return (<>
-                <div className="flex my-4">
-                    <h1 className="flex-1 my-0">AlignmentSearch</h1>
-                    {sidebar}
-                </div>
-                <p>
-                    This site has been created by McGill students Henri Lemoine, Fraser Lee, and Thomas Lemoine
-                    as an attempt to create a "conversational FAQ" that can answer questions about AI alignment.
-                    When asked a question, we
-                </p>
-                <ol>
-                    <li>Embed the question into a low dimensional semantic space</li>
-                    <li>Pull the semantically closest passages out of a massive alignment dataset</li>
-                    <li>Instruct an LLM to construct a response while citing these passages</li>
-                    <li>Display this response in conversational flow with inline citations</li>
-                </ol>
-                <p>
-                    We've created this as an attempt on the <a href="https://www.lesswrong.com/posts/SLRLuiuDykfTdmesK/speed-running-everyone-through-the-bad-alignement-bingo">$5k bounty for a LW conversational agent</a>.
-                </p>
-                <p>
-                    We hope that it can be a useful tool for the community, and we're eager to hear feedback and suggestions.
-                    For a technical report on our implemention, see our <a href="https://www.lesswrong.com/posts/bGn9ZjeuJCg7HkKBj/introducing-alignmentsearch-an-ai-alignment-informed">LessWrong post</a>.
-                </p>
-            </>);
-};
-
-export default Header;
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index 6f6e397..12d2dae 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -5,8 +5,8 @@ import React from "react";
 import { type NextPage } from "next";
 import { useState } from "react";
 
-import Header from "../header";
-import SearchBox from "../searchbox";
+import Header from "../components/header";
+import SearchBox from "../components/searchbox";
 
 type Citation = {
     title: string;
diff --git a/web/src/pages/semantic.tsx b/web/src/pages/semantic.tsx
index dc49649..beb63af 100644
--- a/web/src/pages/semantic.tsx
+++ b/web/src/pages/semantic.tsx
@@ -3,8 +3,8 @@ const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:3000";
 import { type NextPage } from "next";
 import React from "react";
 import Head from "next/head";
-import Header from "../header";
-import SearchBox from "../searchbox";
+import Header from "../components/header";
+import SearchBox from "../components/searchbox";
 import { useState } from "react";
 
 const Semantic: NextPage = () => {
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index f304db2..e6fa162 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+body{
+  @apply min-h-screen; /* full height of viewport */
+  font-family: warnock-pro, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;  
+}
+
 h1 {
   @apply text-4xl font-bold my-4;
 }
@@ -27,12 +32,6 @@ p {
   @apply my-2;
 }
 
-button {
-  @apply bg-white hover:bg-gray-300 px-0.5 py-0 w-fit h-fit;
-  @apply border border-gray-300;
-  @apply text-gray-700;
-}
-
 ol {
   @apply list-decimal;
 }