diff --git a/src/App.tsx b/src/App.tsx
index 62028370..6c12f81c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,35 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { SettingsProvider } from './context/SettingsContext';
+import { useSettings } from './hooks/useSettings';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import './styles/app.scss';
+
+function AppShell() {
+  const { settings } = useSettings();
 
-function App() {
   return (
-    <SettingsProvider>
-      <div>
-        <h1>Angular2 HN – React Migration</h1>
-        <p>Migration scaffold is ready.</p>
+    <div className={settings.theme}>
+      <div className="body-cover"></div>
+      <div className="wrapper">
+        <Header />
+        <Routes>
+          <Route path="/" element={<Navigate to="/news/1" replace />} />
+          <Route path="/:feed/:page" element={<div>Feed placeholder</div>} />
+        </Routes>
+        <Footer />
       </div>
-    </SettingsProvider>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <SettingsProvider>
+        <AppShell />
+      </SettingsProvider>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
new file mode 100644
index 00000000..c918349c
--- /dev/null
+++ b/src/components/Footer.scss
@@ -0,0 +1,23 @@
+@import "../styles/media";
+@import "../styles/theme_variables";
+
+#footer {
+  position: relative;
+  padding: 10px;
+  height: 60px;
+  letter-spacing: 0.7px;
+  text-align: center;
+
+  a {
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 00000000..f1136e4a
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,14 @@
+import './Footer.scss';
+
+export function Footer() {
+  return (
+    <div id="footer">
+      <p>
+        Show this project some {'❤'} on{' '}
+        <a href="https://github.com/hdjirdeh/angular2-hn" target="_blank" rel="noopener noreferrer">
+          GitHub
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/Header.scss b/src/components/Header.scss
new file mode 100644
index 00000000..10a9be64
--- /dev/null
+++ b/src/components/Header.scss
@@ -0,0 +1,149 @@
+@import "../styles/media";
+@import "../styles/theme_variables";
+
+#header {
+  color: #fff;
+  padding: 6px 0;
+  line-height: 18px;
+  vertical-align: middle;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  @media #{$mobile-only} {
+    height: 50px;
+    position: fixed;
+    top: 0;
+  }
+
+  a {
+    display: inline;
+  }
+}
+
+.home-link {
+  width: 50px;
+  height: 66px;
+}
+
+.logo-inner {
+  width: 32px;
+  position: absolute;
+  left: 17px;
+  top: 18px;
+  z-index: -1;
+  height: 32px;
+  border-radius: 50%;
+
+  @media #{$mobile-only} {
+    left: 16px;
+    top: 12px;
+  }
+}
+
+.logo {
+  width: 50px;
+  padding: 3px 8px 0;
+
+  @media #{$mobile-only} {
+    width: 45px;
+    padding: 0 0 0 10px;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  font-size: 16px;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.name {
+  margin-right: 30px;
+  margin-bottom: 2px;
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}
+
+.header-text {
+  position: absolute;
+  width: inherit;
+  height: 20px;
+  left: 10px;
+  top: 27px;
+  z-index: -1;
+
+  @media #{$mobile-only} {
+    top: 22px;
+  }
+}
+
+.left {
+  position: absolute;
+  left: 60px;
+  font-size: 16px;
+
+  @media #{$mobile-only} {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.header-nav {
+  display: inline-block;
+  margin-left: 20px;
+
+  @media #{$mobile-only} {
+    margin-left: 60px;
+  }
+
+  a {
+    color: hsla(0, 0%, 100%, .9);
+    text-decoration: none;
+    margin: 0 5px;
+    letter-spacing: 1.8px;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .active {
+    color: #fff;
+  }
+}
+
+.info {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  height: 100%;
+
+  @media #{$mobile-only} {
+    right: 10px;
+  }
+
+  img {
+    opacity: 0.8;
+    width: 25px;
+    margin-top: 21.5px;
+    display: block;
+
+    &:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
+
+    @media #{$mobile-only} {
+      margin-top: 15px;
+    }
+  }
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 00000000..3d8411f7
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,43 @@
+import { Link, NavLink } from 'react-router-dom';
+import { useSettings } from '../hooks/useSettings';
+import { Settings } from './Settings';
+import './Header.scss';
+
+export function Header() {
+  const { settings, toggleSettings } = useSettings();
+
+  const scrollTop = () => window.scrollTo(0, 0);
+
+  return (
+    <header>
+      <div id="header">
+        <Link className="home-link" to="/news/1" onClick={scrollTop}>
+          <div className="logo-inner"></div>
+          <img className="logo" src="/assets/images/logo.svg" alt="Logo" />
+        </Link>
+        <div className="header-text">
+          <div className="left">
+            <span className="header-nav">
+              <NavLink to="/newest/1" onClick={scrollTop}>new</NavLink>
+                {' | '}
+              <NavLink to="/show/1" onClick={scrollTop}>show</NavLink>
+                {' | '}
+              <NavLink to="/ask/1" onClick={scrollTop}>ask</NavLink>
+                {' | '}
+              <NavLink to="/jobs/1" onClick={scrollTop}>jobs</NavLink>
+            </span>
+          </div>
+        </div>
+        <div className="info">
+          <img
+            className="settings"
+            src="/assets/images/cog.svg"
+            alt="Settings"
+            onClick={toggleSettings}
+          />
+        </div>
+      </div>
+      {settings.showSettings && <Settings />}
+    </header>
+  );
+}
diff --git a/src/components/Settings.scss b/src/components/Settings.scss
new file mode 100644
index 00000000..40ddc751
--- /dev/null
+++ b/src/components/Settings.scss
@@ -0,0 +1,81 @@
+@import "../styles/media";
+@import "../styles/theme_variables";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  opacity: 1;
+  z-index: 1;
+}
+
+.popup {
+  margin: 70px auto;
+  padding: 30px;
+  border-radius: 5px;
+  width: 30%;
+  position: relative;
+
+  h1 {
+    margin-top: 0;
+    margin-bottom: 0px;
+    color: #fff;
+    text-align: center;
+    letter-spacing: 1px;
+  }
+
+  h2 {
+    padding-top: 10px;
+  }
+
+  hr {
+    width: 40%;
+    margin-bottom: 20px;
+  }
+
+  .close {
+    position: absolute;
+    top: 12px;
+    right: 20px;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.8);
+
+    &:hover {
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    max-height: 30%;
+    color: #fff;
+    letter-spacing: 1px;
+    overflow: auto;
+  }
+
+  input[type=number] {
+    display: block;
+    width: 80%;
+    height: 20px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    padding: 2px;
+  }
+}
+
+.control-section {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid white;
+}
+
+@media screen and (max-width: 700px) {
+  .box, .popup {
+    width: 70%;
+  }
+}
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
new file mode 100644
index 00000000..f21b9d4e
--- /dev/null
+++ b/src/components/Settings.tsx
@@ -0,0 +1,98 @@
+import { useSettings } from '../hooks/useSettings';
+import './Settings.scss';
+
+export function Settings() {
+  const { settings, toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing } =
+    useSettings();
+
+  return (
+    <div className="overlay">
+      <div className="popup">
+        <h1>Settings</h1>
+        <hr />
+        <span className="close" onClick={toggleSettings}>
+          &times;
+        </span>
+        <div className="content">
+          <div className="control-section">
+            <h2>Links</h2>
+            <label>
+              <input
+                type="checkbox"
+                checked={settings.openLinkInNewTab}
+                onChange={toggleOpenLinksInNewTab}
+              />
+              {' '}Open links in a new tab
+            </label>
+          </div>
+          <div className="theme-controls">
+            <div className="control-section">
+              <h2>Select a theme</h2>
+              <div>
+                <label>
+                  <input
+                    name="theme"
+                    type="radio"
+                    value="default"
+                    checked={settings.theme === 'default'}
+                    onChange={() => setTheme('default')}
+                  />
+                  {' '}Default
+                </label>
+              </div>
+              <div>
+                <label>
+                  <input
+                    name="theme"
+                    type="radio"
+                    value="night"
+                    checked={settings.theme === 'night'}
+                    onChange={() => setTheme('night')}
+                  />
+                  {' '}Night
+                </label>
+              </div>
+              <div>
+                <label>
+                  <input
+                    name="theme"
+                    type="radio"
+                    value="amoledblack"
+                    checked={settings.theme === 'amoledblack'}
+                    onChange={() => setTheme('amoledblack')}
+                  />
+                  {' '}Black (AMOLED)
+                </label>
+              </div>
+            </div>
+            <div className="control-section">
+              <h2>Change Font</h2>
+              <div>
+                <label>
+                  Font size:
+                  <input
+                    min={1}
+                    value={settings.titleFontSize}
+                    type="number"
+                    onChange={(e) => setFont(e.target.value)}
+                  />
+                </label>
+              </div>
+              <div>
+                <label>
+                  List spacing:
+                  <input
+                    min={0}
+                    value={settings.listSpacing}
+                    type="number"
+                    onChange={(e) => setSpacing(e.target.value)}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles/_media.scss b/src/styles/_media.scss
new file mode 100644
index 00000000..b04b71a9
--- /dev/null
+++ b/src/styles/_media.scss
@@ -0,0 +1,3 @@
+$mobile-only: "only screen and (max-width : 768px)";
+$laptop-only: "only screen and (min-width : 769px)";
+$tablet-only: "only screen and (max-width : 1024px)";
diff --git a/src/styles/_theme_variables.scss b/src/styles/_theme_variables.scss
new file mode 100644
index 00000000..41dae5ee
--- /dev/null
+++ b/src/styles/_theme_variables.scss
@@ -0,0 +1,37 @@
+$skull-size: 200px;
+
+// -------------------------------------------------------------------------------------------
+// Theme Engine
+// -------------------------------------------------------------------------------------------
+
+// Day theme colors
+$theme-day-body-background-color: #fff;
+$theme-day-wrapper-background-color: #f5f5f5;
+$theme-day-wrapper-mobile-background-color: #fff;
+$theme-day-text-color: #000;
+$theme-day-subtext-color: #696969;
+$theme-day-secondary-color: #b92b27;
+$theme-day-header-background-color: $theme-day-secondary-color;
+$theme-day-logo-inner: #fff;
+
+// Day theme extras
+$theme-day-border: 2px solid #b92b27;
+
+// Night theme colors
+$theme-night-body-background-color: #37474F;
+$theme-night-wrapper-background-color: #263238;
+$theme-night-wrapper-mobile-background-color: $theme-night-wrapper-background-color;
+$theme-night-text-color: rgba(255, 255, 255, 0.7);
+$theme-night-subtext-color: #999;
+$theme-night-secondary-color: #00c0ff;
+$theme-night-header-background-color: #263238;
+$theme-night-logo-inner: $theme-night-header-background-color;
+
+// Night theme extras
+$theme-night-border: 2px solid #00c0ff;
+
+// Black theme colors
+$theme-amoledblack-body-background-color: #000;
+$theme-amoledblack-text-color: rgba(255, 255, 255, 0.75);
+$theme-amoledblack-subtext-color: rgba(255, 255, 255, 0.5);
+$theme-amoledblack-secondary-color: rgba(255, 255, 255, 0.6);
diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss
new file mode 100644
index 00000000..77d2db49
--- /dev/null
+++ b/src/styles/_themes.scss
@@ -0,0 +1,245 @@
+@import "./media";
+@import "./theme_variables";
+
+/* ----------------------------------
+
+  Want a new theme? Add your new theme variables here!
+
+---------------------------------- */
+
+@mixin theme(
+  $name,
+  $body-background-color,
+  $wrapper-background-color,
+  $wrapper-mobile-background-color,
+  $wrapper-color,
+  $item-a-color,
+  $item-a-visited-color,
+  $header-background-color,
+  $subtext-color,
+  $secondary-link-color,
+  $logo-inner-color,
+  $border
+) {
+  .#{$name} {
+    .body-cover {
+      background: $body-background-color;
+
+      @media #{$mobile-only} {
+       background: $wrapper-mobile-background-color;
+      }
+    }
+
+    .wrapper {
+      background: $wrapper-background-color;
+      color: $wrapper-color;
+
+      @media #{$mobile-only} {
+       background: $wrapper-mobile-background-color;
+      }
+
+      a {
+        color: $item-a-color;
+
+        &:visited {
+            color: $item-a-visited-color;
+        }
+      }
+
+      #header {
+        background: $header-background-color;
+        border-bottom: $border;
+      }
+
+      .logo-inner {
+        background: $logo-inner-color;
+      }
+
+      .nav {
+        a {
+          color: $secondary-link-color;
+
+          @media #{$mobile-only} {
+            color: $secondary-link-color;
+          }
+        }
+      }
+
+      #footer {
+        border-top: $border;
+
+        a {
+          color: $secondary-link-color;
+        }
+      }
+
+      .subtext, .subtext-palm, .subtext-laptop, .domain, .meta, .deleted-meta{
+        color: $subtext-color;
+
+        a {
+          color: $secondary-link-color;
+        }
+      }
+
+      .popup {
+        background: $header-background-color;
+      }
+
+      .item-header {
+        border-bottom: $border;
+
+        @media #{$mobile-only} {
+          background: $wrapper-mobile-background-color;
+        }
+      }
+
+      .pollContent {
+        .pollBar {
+          background: $secondary-link-color;
+        }
+      }
+
+      .loader {
+        color: $secondary-link-color;
+        background: $secondary-link-color;
+
+        &:before, &:after {
+          background: $secondary-link-color;
+        }
+      }
+
+      .job-header {
+        @media #{$mobile-only} {
+          border-bottom: $border;
+        }
+      }
+
+      .back-button {
+        @media #{$mobile-only} {
+          border-top: .3rem solid $secondary-link-color;
+          border-right: .3rem solid $secondary-link-color;
+        }
+      }
+
+      .error-section {
+        .skull {
+          .head {
+            background-color: $secondary-link-color;
+
+            &:before, &:after {
+              background-color: $wrapper-background-color;
+
+              @media #{$mobile-only} {
+                background-color: $wrapper-mobile-background-color;
+              }
+            }
+
+            .crack {
+              background-color: $wrapper-background-color;
+
+              @media #{$mobile-only} {
+                background-color: $wrapper-mobile-background-color;
+              }
+
+              &:before {
+                border-top: calc($skull-size / 8) solid $wrapper-background-color;
+
+                @media #{$mobile-only} {
+                  border-top: calc($skull-size / 8) solid $wrapper-mobile-background-color;
+                }
+              }
+            }
+          }
+
+          .mouth {
+            background-color: $secondary-link-color;
+
+            &:before {
+              background-color: $wrapper-background-color;
+
+              @media #{$mobile-only} {
+                background-color: $wrapper-mobile-background-color;
+              }
+            }
+          }
+
+          .teeth {
+            background-color: $wrapper-background-color;
+
+            @media #{$mobile-only} {
+              background-color: $wrapper-mobile-background-color;
+            }
+
+            &:before, &:after {
+              background-color: $wrapper-background-color;
+
+              @media #{$mobile-only} {
+                background-color: $wrapper-mobile-background-color;
+              }
+            }
+          }
+        }
+      }
+
+      .main-details {
+        .name {
+          color: $secondary-link-color;
+        }
+        .right {
+          color: $secondary-link-color;
+        }
+      }
+    }
+  }
+}
+
+@include theme(
+  default,
+  $theme-day-body-background-color,
+  $theme-day-wrapper-background-color,
+  $theme-day-wrapper-mobile-background-color,
+  $theme-day-text-color,
+  $theme-day-text-color,
+  $theme-day-subtext-color,
+  $theme-day-header-background-color,
+  $theme-day-subtext-color,
+  $theme-day-secondary-color,
+  $theme-day-logo-inner,
+  $theme-day-border
+);
+
+@include theme(
+  night,
+  $theme-night-body-background-color,
+  $theme-night-wrapper-background-color,
+  $theme-night-wrapper-mobile-background-color,
+  $theme-night-text-color,
+  $theme-night-text-color,
+  $theme-night-subtext-color,
+  $theme-night-header-background-color,
+  $theme-night-subtext-color,
+  $theme-night-secondary-color,
+  $theme-night-logo-inner,
+  $theme-night-border
+);
+
+@include theme(
+  amoledblack,
+  $theme-amoledblack-body-background-color,
+  $theme-amoledblack-body-background-color,
+  $theme-amoledblack-body-background-color,
+  $theme-amoledblack-text-color,
+  $theme-amoledblack-text-color,
+  darken($theme-amoledblack-text-color, 33%),
+  $theme-amoledblack-body-background-color,
+  $theme-amoledblack-subtext-color,
+  $theme-amoledblack-secondary-color,
+  $theme-amoledblack-body-background-color,
+  $theme-amoledblack-secondary-color
+);
+
+/* ----------------------------------
+
+  Include your new theme here as well as the settings component
+
+---------------------------------- */
diff --git a/src/styles/app.scss b/src/styles/app.scss
new file mode 100644
index 00000000..5cd0300a
--- /dev/null
+++ b/src/styles/app.scss
@@ -0,0 +1,25 @@
+@import "./media";
+@import "./theme_variables";
+@import "./themes";
+
+.body-cover {
+  width: 100%;
+  z-index: 0;
+  position: fixed;
+  height: 100%;
+}
+
+.wrapper {
+  position: relative;
+  width: 85%;
+  min-height: 80px;
+  margin: 0 auto;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-size: 15px;
+  height: 100%;
+  line-height: 1.3;
+
+  @media #{$mobile-only} {
+    width: 100%;
+  }
+}