diff --git a/header.png b/header.png
new file mode 100644
index 00000000..f4afe160
Binary files /dev/null and b/header.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..01ca3003
--- /dev/null
+++ b/index.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Custom Search Page</title>
+  <style>
+    /* Reset & Basic Layout */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      color: #333;
+      background-color: #fcfcff;
+    }
+
+    /* HEADER BAR */
+    .header-bar {
+      background-color: #f8f8f8; /* Light gray header background */
+      height: 60px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+    .header-bar img {
+      height: 50px;  /* Keeps header image small */
+      width: auto;
+    }
+
+    /* MAIN CONTENT WRAPPER */
+    .main-content {
+      max-width: 600px;
+      margin: 40px auto;
+      text-align: center;
+    }
+
+    /* MASCOT IMAGE */
+    #mascot-img {
+      max-width: 200px;
+      width: auto;
+      height: auto;
+      margin-bottom: 20px;
+    }
+
+    /* TAGLINE TEXT */
+    #tagline {
+      font-size: 1.1rem;
+      color: #555;
+      margin-bottom: 30px;
+    }
+
+    /* SEARCH FORM LAYOUT */
+    .search-form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    /* SEARCH BAR (Single Rounded Box) */
+    .search-container {
+      display: inline-flex;
+      align-items: center;
+      width: 300px;              /* Adjust width as needed */
+      height: 40px;             /* Adjust height as needed */
+      border: 1px solid #ccc;   /* Thin border around entire box */
+      border-radius: 25px;      /* Large radius for a rounded shape */
+      background-color: #fff;
+      overflow: hidden;         /* Ensures child elements stay clipped to rounded corners */
+      box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle shadow */
+    }
+
+    /* SEARCH TEXT INPUT */
+    .search-container input[type="text"] {
+      flex: 1;                  /* Fills remaining space */
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: 1rem;
+      padding: 0 15px;          /* Some horizontal padding */
+    }
+
+    /* SEARCH BUTTON */
+    .search-container button {
+      border: none;
+      outline: none;
+      background: transparent;
+      cursor: pointer;
+      font-size: 1rem;
+      color: #333;
+      padding: 0 15px;
+      height: 100%;
+      border-left: 1px solid #ccc; /* Subtle divider line between input & button */
+    }
+    .search-container button:hover {
+      background-color: #f7f7f7; /* Slight hover effect */
+    }
+
+    /* RADIO BUTTONS */
+    .radio-options {
+      margin-top: 15px;
+      font-size: 0.9rem;
+      color: #333;
+    }
+    .radio-options input[type="radio"] {
+      transform: scale(0.9);
+      margin-right: 3px;  /* space between circle and label */
+      vertical-align: middle;
+    }
+    .radio-options label {
+      margin-right: 15px;
+      cursor: pointer;
+    }
+
+    /* FOOTER LINKS */
+    .footer {
+      position: fixed;
+      bottom: 10px;
+      width: 100%;
+      text-align: center;
+      font-size: 0.9rem;
+    }
+    .footer a {
+      text-decoration: none;
+      color: #0066cc;
+      margin: 0 5px;
+    }
+    .footer a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- HEADER BAR -->
+  <div class="header-bar">
+    <img src="header.png" alt="Header Image" />
+  </div>
+
+  <!-- MAIN CONTENT -->
+  <div class="main-content">
+    <img id="mascot-img" src="main.png" alt="Mascot Image" />
+
+    <!-- Tagline -->
+    <div id="tagline">a search engine for the rest of us</div>
+
+    <!-- Search Form -->
+    <form class="search-form" action="https://science.tsugutsugugo.com/yacysearch.html?query={}" method="get">
+      <div class="search-container">
+        <input
+          type="text"
+          name="search"
+          placeholder="Search..."
+        />
+        <button type="submit">Search</button>
+      </div>
+    </form>
+
+    <!-- Radio Buttons -->
+    <!-- Should change depending on category -->
+    <div class="radio-options">
+      <input type="radio" name="category" id="science" value="science" checked />
+      <label for="science">Science</label>
+
+      <input type="radio" name="category" id="philosophy" value="philosophy" />
+      <label for="philosophy">Philosophy</label>
+
+      <input type="radio" name="category" id="tech" value="tech" />
+      <label for="tech">Tech</label>
+
+      <input type="radio" name="category" id="discover" value="discover" />
+      <label for="discover">Discover the Web</label>
+    </div>
+  </div>
+
+  <!-- FOOTER -->
+  <div class="footer">
+    <a href="https://git.tsugutsugugo.com/explore/repos">Source</a> | <a href="https://docs.tsugutsugugo.com/">Docs</a>
+  </div>
+
+</body>
+</html>
diff --git a/main.png b/main.png
new file mode 100644
index 00000000..67bf10d5
Binary files /dev/null and b/main.png differ
