diff --git a/packages/freesewing.dev/components/footer.js b/packages/freesewing.dev/components/footer.js
new file mode 100644
index 00000000000..f04a7cbbb7d
--- /dev/null
+++ b/packages/freesewing.dev/components/footer.js
@@ -0,0 +1,13 @@
+const Footer = ({ app }) => {
+  return (
+      <footer>
+        <div className="theme-gradient h-8 w-full"></div>
+        <div className="p-4 flex flex-row">
+          <p>Some content here</p>
+          <p>Some more content here</p>
+        </div>
+      </footer>
+  )
+}
+
+export default Footer
diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js
index 20bcb86e6a2..51847ee40c2 100644
--- a/packages/freesewing.dev/components/header.js
+++ b/packages/freesewing.dev/components/header.js
@@ -13,22 +13,22 @@ const Header = ({ app }) => {
   return (
       <header className={`
         bg-primary
-        p-4
         block
         sm:hidden
         z-10
+        p-4
       `}>
-          <button
-            className={`
-              btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
-              hover:border hover:bg-transparent hover:border-base-100
-            `}
-            onClick={app.togglePrimaryMenu}>
-              {app.primaryMenu
-                ? <><Left />&nbsp; Hide menu</>
-                : <>Show menu &nbsp;<Right /></>
-              }
-          </button>
+        <button
+          className={`
+            btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
+            hover:border hover:bg-transparent hover:border-base-100
+          `}
+          onClick={app.togglePrimaryMenu}>
+            {app.primaryMenu
+              ? <><Left />&nbsp; Hide menu</>
+              : <>Show menu &nbsp;<Right /></>
+            }
+        </button>
       </header>
   )
 }
diff --git a/packages/freesewing.dev/hooks/useApp.js b/packages/freesewing.dev/hooks/useApp.js
index 3fd010585f7..3c1b00b821b 100644
--- a/packages/freesewing.dev/hooks/useApp.js
+++ b/packages/freesewing.dev/hooks/useApp.js
@@ -22,6 +22,7 @@ function useApp(full = true) {
   const [primaryMenu, setPrimaryMenu] = useState(false)
   const [navigation, setNavigation] = useState(prebuildNavigation[language])
   const [slug, setSlug] = useState('/')
+  const [loading, setLoading] = useState(false)
 
   // State methods
   const togglePrimaryMenu = () => setPrimaryMenu(!primaryMenu)
@@ -56,6 +57,7 @@ function useApp(full = true) {
 
     // State
     language,
+    loading,
     navigation,
     primaryMenu,
     slug,
@@ -63,10 +65,13 @@ function useApp(full = true) {
 
     // State setters
     setLanguage,
+    setLoading,
     setNavigation,
     setPrimaryMenu,
     setSlug,
     setTheme,
+    startLoading: () => setLoading(true),
+    stopLoading: () => setLoading(false),
 
     // State handlers
     togglePrimaryMenu,
diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js
index 11347a13e2a..5d2afbc6591 100644
--- a/packages/freesewing.dev/pages/index.js
+++ b/packages/freesewing.dev/pages/index.js
@@ -8,6 +8,7 @@ export default (props) => {
     <Page app={app} title='FIXME: Create homepage content'>
       <Logo size={200} theme={app.theme}/>
       <button className="btn btn-primary" onClick={app.togglePrimaryMenu}>toggle menu</button>
+      <div className="theme-gradient loading">test</div>
     </Page>
   )
 }
diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js
index 4ef6842b996..ddc8abf3a5e 100644
--- a/packages/freesewing.shared/components/layouts/default.js
+++ b/packages/freesewing.shared/components/layouts/default.js
@@ -7,6 +7,7 @@ import PrimaryNavigation from 'shared/components/navigation/primary'
 import get from 'lodash.get'
 // Site components
 import Header from 'site/components/header'
+import Footer from 'site/components/footer'
 
 const iconSize= 48
 
@@ -61,6 +62,8 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
 const DefaultLayout = ({ app, title=false, children=[]}) => {
 
   const router = useRouter()
+  router?.events?.on('routeChangeStart', () => app.startLoading())
+  router?.events?.on('routeChangeComplete', () => app.stopLoading())
   const slug = router.asPath.slice(1)
   const [leftNav, setLeftNav] = useState(false)
 
@@ -71,9 +74,12 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
     flex flex-col justify-between
     min-h-screen
     bg-base-100
-    lg:py-8
     `} data-theme={app.theme}>
       <Header app={app}/>
+      <div className={`
+        h-1 w-full theme-gradient ${app.loading ? 'loading' : ''}
+        fixed top-0 right-0 z-20
+      `}></div>
       <main className={`
         grow flex flex-row
         sm:py-8
@@ -108,7 +114,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
           {children}
         </section>
       </main>
-      <footer className="bg-primary p-8">footer</footer>
+      <Footer app={app} />
     </div>
   )
 }
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index 823761f710f..c343d5b4da8 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -93,6 +93,24 @@
   svg.freesewing.pattern .fill-current { @apply fs-fill-current }
 }
 
+/* Theme gradient */
+.theme-gradient {
+  background: var(--theme-gradient);
+}
+.theme-gradient.loading {
+  animation-name: MOVE-BG;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@keyframes MOVE-BG {
+   from {
+     background-position-x: 0;
+   }
+   to {
+     background-position-x: -300px;
+   }
+}
 
 /* Style for navigation */
 details { user-select: none; }
diff --git a/packages/freesewing.shared/themes/dark/index.js b/packages/freesewing.shared/themes/dark/index.js
index 741f69a716c..ba098d10d73 100644
--- a/packages/freesewing.shared/themes/dark/index.js
+++ b/packages/freesewing.shared/themes/dark/index.js
@@ -29,6 +29,18 @@ module.exports = {
   'warning': colors.amber['500'],
   'error': colors.red['400'],
 
+  '--theme-gradient': `repeating-linear-gradient(
+    -45deg,
+    ${colors.gray[500]},
+    ${colors.gray[500]} 10px,
+    transparent 10px,
+    transparent 20px,
+    ${colors.violet[500]} 20px,
+    ${colors.violet[500]} 30px,
+    transparent 30px,
+    transparent 40px
+  )`,
+
   '--code-background-color': '#111',
   '--code-border-color': colors.neutral['800'],
   '--code-color': colors.neutral['300'],
diff --git a/packages/freesewing.shared/themes/hax0r/index.js b/packages/freesewing.shared/themes/hax0r/index.js
index 065c380c703..bb0f872dc21 100644
--- a/packages/freesewing.shared/themes/hax0r/index.js
+++ b/packages/freesewing.shared/themes/hax0r/index.js
@@ -30,6 +30,18 @@ module.exports = {
 
   '--rounded-btn': '0',
 
+  '--theme-gradient': `repeating-linear-gradient(
+    -45deg,
+    ${colors.lime[500]},
+    ${colors.lime[500]} 10px,
+    transparent 10px,
+    transparent 20px,
+    ${colors.lime[700]} 20px,
+    ${colors.lime[700]} 30px,
+    transparent 30px,
+    transparent 40px
+  )`,
+
   '--code-background-color': '#002407',
   '--code-border-color': colors.lime['900'],
   '--code-color': colors.lime['600'],
diff --git a/packages/freesewing.shared/themes/lgbtq/index.js b/packages/freesewing.shared/themes/lgbtq/index.js
index 21a19ad1dbf..116ece9779f 100644
--- a/packages/freesewing.shared/themes/lgbtq/index.js
+++ b/packages/freesewing.shared/themes/lgbtq/index.js
@@ -28,6 +28,24 @@ module.exports = {
   'warning': colors.amber['500'],
   'error': colors.red['600'],
 
+  '--theme-gradient': `repeating-linear-gradient(
+    -45deg,
+    ${colors.red[500]},
+    ${colors.red[500]} 20px,
+    ${colors.orange[500]} 20px,
+    ${colors.orange[500]} 40px,
+    ${colors.yellow[500]} 40px,
+    ${colors.yellow[500]} 60px,
+    ${colors.green[500]} 60px,
+    ${colors.green[500]} 80px,
+    ${colors.blue[500]} 80px,
+    ${colors.blue[500]} 100px,
+    ${colors.violet[500]} 100px,
+    ${colors.violet[500]} 120px,
+    transparent 120px,
+    transparent 125px
+  )`,
+
   '--code-background-color': colors.neutral['100'],
   '--code-border-color': colors.neutral['300'],
   '--code-color': colors.neutral['900'],
diff --git a/packages/freesewing.shared/themes/light/index.js b/packages/freesewing.shared/themes/light/index.js
index a20efec367a..e2762681a9c 100644
--- a/packages/freesewing.shared/themes/light/index.js
+++ b/packages/freesewing.shared/themes/light/index.js
@@ -119,6 +119,22 @@ module.exports = {
   // focus ring offset size for button and inputs
   '--focus-ring-offset': '2px',
 
+  /* THEME GRADIENT
+  *
+  * This is used as a border & loading indicator
+  */
+  '--theme-gradient': `repeating-linear-gradient(
+    -45deg,
+    ${colors.sky[400]},
+    ${colors.sky[400]} 10px,
+    transparent 10px,
+    transparent 20px,
+    ${colors.violet[400]} 20px,
+    ${colors.violet[400]} 30px,
+    transparent 30px,
+    transparent 40px
+  )`,
+
   /* CODE HIGHLIGHTING COLORS
   *
   * These are variables to style highlighted code blocks.
@@ -137,7 +153,7 @@ module.exports = {
   '--code-outer-padding': '0 0.5rem',
   '--code-inner-padding': '1rem',
   /*
-    * These variables are used to style the highlighted tokesn themselves
+    * These variables are used to style the highlighted tokens themselves
     */
   '--code-color-keyword': colors.pink['400'],
   '--code-font-weight-keyword': 'bold',
diff --git a/packages/freesewing.shared/themes/trans/index.js b/packages/freesewing.shared/themes/trans/index.js
index 21a19ad1dbf..ea754a72208 100644
--- a/packages/freesewing.shared/themes/trans/index.js
+++ b/packages/freesewing.shared/themes/trans/index.js
@@ -28,6 +28,22 @@ module.exports = {
   'warning': colors.amber['500'],
   'error': colors.red['600'],
 
+  '--theme-gradient': `repeating-linear-gradient(
+    -45deg,
+    #77cbf9,
+    #77cbf9 20px,
+    #ecadb9 20px,
+    #ecadb9 40px,
+    #ffffff 40px,
+    #ffffff 60px,
+    #ecadb9 60px,
+    #ecadb9 80px,
+    #77cbf9 80px,
+    #77cbf9 100px,
+    transparent 100px,
+    transparent 105px
+  )`,
+
   '--code-background-color': colors.neutral['100'],
   '--code-border-color': colors.neutral['300'],
   '--code-color': colors.neutral['900'],