diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 0000000..53cef09
--- /dev/null
+++ b/src/components/Button.astro
@@ -0,0 +1,36 @@
+---
+interface Props {
+  value: string;
+  as?: 'a'|'input';
+  href?: string;
+}
+
+const { as = 'a', value, href } = Astro.props;
+---
+{as === 'a' ? (
+  <a href={href} class="button" role="button">{value}</button>
+) : (
+  <input type="submit" value={value} class="button" role="button" />
+)}
+<style>
+.button {
+    text-decoration: none;
+    display: inline-block;
+    outline: 0;
+    border: 0;
+    cursor: pointer;
+    background: rgb(var(--accent-light));
+    color: #ffffff;
+    border-radius: 8px;
+    padding: 14px 24px 16px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1;
+    transition:
+      transform 200ms,
+      background 200ms;
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..c0192e0
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,44 @@
+---
+import { GithubIcon } from "./GithubIcon";
+---
+
+<footer>
+  <p>
+    Made with ❤️ by{" "}
+    <a href="https://www.samcarton.com" target="_blank"> Sam Carton </a>
+  </p>
+  <div class="links-flex">
+    <a href="/">Home</a>
+    <p>|</p>
+    <a href="/licenses">Licenses</a>
+    <p>|</p>
+    <a href="https://github.com/samcarton/yt-cruise-control" target="_blank"
+      ><GithubIcon /></a
+    >
+  </div>
+</footer>
+<style>
+  a {
+    color: rgb(var(--accent));
+  }
+
+  .links-flex {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  footer {
+    margin: 4rem 0 1rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+    p {
+      margin: 0;
+    }
+  }
+</style>
diff --git a/src/components/GaugeIcon.module.css b/src/components/GaugeIcon.module.css
new file mode 100644
index 0000000..51df517
--- /dev/null
+++ b/src/components/GaugeIcon.module.css
@@ -0,0 +1,4 @@
+.gauge {
+  color: currentColor;
+  stroke-width: 2;
+}
diff --git a/src/components/GaugeIcon.tsx b/src/components/GaugeIcon.tsx
new file mode 100644
index 0000000..a6cf7c4
--- /dev/null
+++ b/src/components/GaugeIcon.tsx
@@ -0,0 +1,21 @@
+import classes from "./GaugeIcon.module.css";
+
+export const GaugeIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={classes.gauge}
+    >
+      <path d="m12 14 4-4" />
+      <path d="M3.34 19a10 10 0 1 1 17.32 0" />
+    </svg>
+  );
+};
diff --git a/src/components/GithubIcon.module.css b/src/components/GithubIcon.module.css
new file mode 100644
index 0000000..fde0a89
--- /dev/null
+++ b/src/components/GithubIcon.module.css
@@ -0,0 +1,4 @@
+.github {
+  color: currentColor;
+  stroke-width: 2;
+}
diff --git a/src/components/GithubIcon.tsx b/src/components/GithubIcon.tsx
new file mode 100644
index 0000000..7fbff0b
--- /dev/null
+++ b/src/components/GithubIcon.tsx
@@ -0,0 +1,20 @@
+import classes from "./GaugeIcon.module.css";
+export const GithubIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={classes.github}
+    >
+      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+      <path d="M9 18c-4.51 2-5-2-7-2" />
+    </svg>
+  );
+};
diff --git a/src/components/SmallHeader.astro b/src/components/SmallHeader.astro
new file mode 100644
index 0000000..684eb7c
--- /dev/null
+++ b/src/components/SmallHeader.astro
@@ -0,0 +1,24 @@
+---
+import { GaugeIcon } from "./GaugeIcon";
+---
+<header><GaugeIcon/><h1>Cruise <span class="text-gradient">CONTROL</span></h1></header> 
+<style>
+    header{
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: left;
+  }
+  .text-gradient {
+    background-image: var(--accent-gradient-short);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/VideoPlayer.module.css b/src/components/VideoPlayer.module.css
index 64118a3..eccb012 100644
--- a/src/components/VideoPlayer.module.css
+++ b/src/components/VideoPlayer.module.css
@@ -25,8 +25,9 @@
   background: transparent;
   cursor: pointer;
 
-  width: calc(100% - 1rem);
-  margin: 0;
+  /* width: calc(100% - 2.25rem); */
+  width: 100%;
+  margin: 1rem 0 0 0;
 
   /* Removes default focus */
   &:focus {
@@ -63,7 +64,7 @@
   /******** Firefox styles ********/
   /* slider track */
   &::-moz-range-track {
-    background-color: rgb(var(--accent-dark));
+    background-color: rgb(var(--accent-dark), 25%);
     border-radius: 0.5rem;
     height: 0.5rem;
   }
@@ -74,9 +75,10 @@
     border-radius: 0; /*Removes default border-radius that FF applies*/
 
     /*custom styles*/
-    background-color: rgb(var(--accent-dark));
+    background: var(--accent-gradient);
     height: 2rem;
-    width: 1rem;
+    width: 2rem;
+    border-radius: 50%;
   }
 
   &:focus::-moz-range-thumb {
@@ -92,7 +94,10 @@
   justify-content: space-between;
   width: 100%;
 
-  option {
+  & div {
     padding: 0;
+    flex: 1;
+    text-align: center;
+    min-width: 0;
   }
 }
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 23a5c41..418a341 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -34,6 +34,16 @@ const tryGetVideoUrl = (urlInput: string | null) => {
     return urlInput;
   }
 
+  if (urlInput.startsWith("https://youtu.be")) {
+    // regex to extract the video ID from: https://youtu.be/sjgtpKxhZa4?si=lhbg5O4yeHiABClV
+    const videoId = urlInput.match(
+      /(?:\?v=|&v=|youtu\.be\/)(.*?)(?:\?|$)/,
+    )?.[1];
+    if (videoId) {
+      urlInput = videoId;
+    }
+  }
+
   const fallback = new URL("https://www.youtube.com/watch");
   fallback.searchParams.set("v", urlInput);
   return fallback.href;
@@ -72,14 +82,19 @@ export const VideoPlayer = () => {
         onChange={handleSpeedChange}
         value={speed}
       />
-      <datalist id="markers" className={classes.rangeLabels}>
-        <option value="0.5" label="50%"></option>
-        <option value="0.60" label="60%"></option>
-        <option value="0.70" label="70%"></option>
-        <option value="0.80" label="80%"></option>
-        <option value="0.90" label="90%"></option>
-        <option value="1" label="100%"></option>
-      </datalist>
+      <div className={classes.rangeLabels}>
+        <div>50%</div>
+        <div></div>
+        <div>60%</div>
+        <div></div>
+        <div>70%</div>
+        <div></div>
+        <div>80%</div>
+        <div></div>
+        <div>90%</div>
+        <div></div>
+        <div>100%</div>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5bde07d..1e2e289 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import Button from "../components/Button.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <Layout title="Cruise CONTROL">
@@ -22,8 +24,9 @@ import Layout from "../layouts/Layout.astro";
         placeholder="Enter URL or Video ID"
         required
       />
-      <input type="submit" value="Let's Cruise" class="button" role="button" />
+      <Button as="input" value="Let's Cruise" />
     </form>
+    <Footer />
   </main>
 
   <script>
@@ -35,7 +38,7 @@ import Layout from "../layouts/Layout.astro";
         (event.target as HTMLInputElement).focus?.();
         (event.target as HTMLInputElement).classList.add("required");
       },
-      true
+      true,
     );
     form?.addEventListener("submit", function (event) {
       if (!this.checkValidity()) {
@@ -114,24 +117,5 @@ import Layout from "../layouts/Layout.astro";
         border-color: rgb(var(--color-invalid));
       }
     }
-    .button {
-      display: inline-block;
-      outline: 0;
-      border: 0;
-      cursor: pointer;
-      background: rgb(var(--accent-light));
-      color: #ffffff;
-      border-radius: 8px;
-      padding: 14px 24px 16px;
-      font-size: 18px;
-      font-weight: 700;
-      line-height: 1;
-      transition:
-        transform 200ms,
-        background 200ms;
-      &:hover {
-        transform: translateY(-2px);
-      }
-    }
   </style>
 </Layout>
diff --git a/src/pages/licenses.astro b/src/pages/licenses.astro
new file mode 100644
index 0000000..563341c
--- /dev/null
+++ b/src/pages/licenses.astro
@@ -0,0 +1,77 @@
+---
+import Footer from "../components/Footer.astro";
+import SmallHeader from "../components/SmallHeader.astro";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Cruise CONTROL - Licenses">
+  <main>
+    <SmallHeader />
+    <h2>Licenses</h2>
+    <p>
+      Cruise CONTROL is an MIT Licensed open-source project. You can find the
+      source code on{" "}
+      <a href="https://github.com/samcarton/yt-cruise-control" target="_blank"
+        >GitHub</a
+      >.
+    </p>
+    <p>MIT License</p><p>Copyright (c) 2024 Sam Carton</p><p>
+      Permission is hereby granted, free of charge, to any person obtaining a
+      copy of this software and associated documentation files (the "Software"),
+      to deal in the Software without restriction, including without limitation
+      the rights to use, copy, modify, merge, publish, distribute, sublicense,
+      and/or sell copies of the Software, and to permit persons to whom the
+      Software is furnished to do so, subject to the following conditions:
+    </p><p>
+      The above copyright notice and this permission notice shall be included in
+      all copies or substantial portions of the Software.
+    </p><p>
+      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+      THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+      FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+      DEALINGS IN THE SOFTWARE.
+    </p>
+
+    <h3>Dependencies</h3>
+    <h4>Lucide</h4>
+    <a href="https://lucide.dev/license" target="_blank">Lucide License</a>
+    <p>ISC License</p>
+    <p>
+      Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as
+      part of Feather (MIT). All other copyright (c) for Lucide are held by
+      Lucide Contributors 2022.
+    </p><p>
+      Permission to use, copy, modify, and/or distribute this software for any
+      purpose with or without fee is hereby granted, provided that the above
+      copyright notice and this permission notice appear in all copies.
+    </p><p>
+      THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+      WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+      MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+      ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+      WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+      ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+      IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+    </p>
+
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  main {
+    margin: auto;
+    padding: 0 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: white;
+    font-size: 16px;
+    line-height: 1.6;
+  }
+  a {
+    color: rgb(var(--accent));
+  }
+</style>
diff --git a/src/pages/play.astro b/src/pages/play.astro
index 2a52db1..e26cec5 100644
--- a/src/pages/play.astro
+++ b/src/pages/play.astro
@@ -1,44 +1,38 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import { VideoPlayer } from "../components/VideoPlayer";
+import Button from "../components/Button.astro";
+import SmallHeader from "../components/SmallHeader.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <Layout title="Cruisin">
   <main>
-    <h2>Cruise <span class="text-gradient">CONTROL</span></h2>
+    <SmallHeader />
     <VideoPlayer client:only="react" />
     <div class="instructions">
-      <p>☝️ Adjust playback speed using the slider above.</p><p>
+      <p>☝️ Adjust playback speed using the slider above.</p>
+      <p>
         🔖 Bookmark this page to come back to the same video at the same speed.
       </p>
     </div>
+    <div class="new-cruise">
+      <Button value="New Cruise" href="/" />
+    </div>
+    <Footer />
   </main>
 </Layout>
 
 <style>
   main {
     margin: auto;
-    padding: 0.5rem 1rem;
+    padding: 0 1rem;
     width: 800px;
     max-width: calc(100% - 2rem);
     color: white;
     font-size: 16px;
     line-height: 1.6;
   }
-  h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    margin-bottom: 1em;
-  }
-  .text-gradient {
-    background-image: var(--accent-gradient-short);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-  }
   .instructions {
     margin-block: 2rem;
     border: 1px solid rgb(var(--accent-light));
@@ -52,10 +46,8 @@ import { VideoPlayer } from "../components/VideoPlayer";
   .instructions strong {
     color: rgb(var(--accent-light));
   }
-  .link-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-    gap: 2rem;
-    padding: 0;
+  .new-cruise {
+    display: flex;
+    justify-content: center;
   }
 </style>