diff --git a/app/components/AuthButton.tsx b/app/components/AuthButton.tsx
new file mode 100644
index 0000000..b13a76f
--- /dev/null
+++ b/app/components/AuthButton.tsx
@@ -0,0 +1,26 @@
+import { Link as RemixLink, useRouteLoaderData } from "@remix-run/react";
+import { PiUserCircle, PiUserCircleFill } from "react-icons/pi";
+import { User } from "~/types/User";
+
+export function AuthButton() {
+    const user = useRouteLoaderData<User|null>("root");
+
+    let authImage:JSX.Element = <PiUserCircle title={"Not logged in"} />;
+    if (user) {
+        if (user.avatar) {
+            authImage = <img src={user.avatar} alt={user.displayName} className="rounded-circle" style={{"width": "1.75rem", "height": "1.75rem"}} />
+        } else {
+            authImage = <PiUserCircleFill title={user.displayName} />;
+        }
+    }
+
+    console.log('authbutton', JSON.stringify(user));
+    return (
+        <>
+            <RemixLink className="d-none d-sm-inline text-dark" to="/auth/" style={{ "fontSize": "1.75rem" }}>
+                { authImage }
+            </RemixLink>
+        </>
+    )
+}
+
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index a936900..cdd55f9 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,10 +1,10 @@
 import { ColorSchemeToggle } from "~/components/ColorSchemeToggle";
 
 const links = [
-    { link: 'https://github.com/regexplanet/regex-zone/issues', label: 'Feedback' },
+    //{ link: 'https://github.com/regexplanet/regex-zone/issues', label: 'Feedback' },
     { link: 'https://github.com/regexplanet/regex-zone?tab=readme-ov-file#credits', label: 'Credits'},
     { link: 'https://github.com/regexplanet/regex-zone', label: 'Source' },
-    { link: 'https://github.com/regexplanet/regex-zone?tab=readme-ov-file#other-libraries-of-regex-patterns', label: 'Alternatives' },
+    //{ link: 'https://github.com/regexplanet/regex-zone?tab=readme-ov-file#other-libraries-of-regex-patterns', label: 'Alternatives' },
 ];
 
 export function Footer() {
@@ -15,7 +15,7 @@ export function Footer() {
                 {link.label}
             </a>);
             if (index < links.length - 1) {
-                initial.push(<span className="mx-1" key="key{{index}}">|</span>);
+                initial.push(<span className="mx-1" key={`key${index}`}>|</span>);
             }
         }
     );
@@ -27,7 +27,7 @@ export function Footer() {
                 { initial }
             </small>
             
-            <ColorSchemeToggle />
+            <ColorSchemeToggle key="cst"/>
             </footer>
         </>
     )
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 823f9bf..3377879 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -2,7 +2,8 @@ import { PiBlueprint, PiBlueprintBold, PiLink, PiMagnifyingGlass, PiMagnifyingGl
 import { Link as RemixLink } from "@remix-run/react";
 
 import RegexZoneSvg from './RegexZoneSvg';
-import { NavbarLink, NavbarLinkItem } from '~/components/NavbarLink';
+import { NavbarLink, NavbarLinkItem } from './NavbarLink';
+import { AuthButton } from './AuthButton';
 
 const links:NavbarLinkItem[] = [
     { link: '/patterns/', label: 'Patterns', icon: <PiBlueprint />, icon_bold: <PiBlueprintBold /> },
@@ -19,14 +20,15 @@ export function Navbar() {
     return (
         <>
             <nav className="navbar navbar-expand bg-body-tertiary border-bottom">
-                <div className="container-lg">
-                    <RemixLink className="navbar-brand fs-4 fw-bold" to="/">
+                <div className="container-lg d-flex">
+                    <RemixLink className="navbar-brand fs-4 fw-bold flex-grow-1" to="/">
                         <RegexZoneSvg height={'2rem'} className="pe-2 d-none d-md-inline" />
                         Regex Zone
                     </RemixLink>
-                    <ul className="navbar-nav">
+                    <ul className="navbar-nav mt-1">
                     {items}
                     </ul>
+                    <AuthButton />
                 </div>
             </nav>
         </>
diff --git a/app/root.tsx b/app/root.tsx
index 67c2bdb..a0c9f14 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,6 +9,13 @@ import {
 } from "@remix-run/react";
 import { Navbar } from "~/components/Navbar";
 import { Footer } from "~/components/Footer";
+import { LoaderFunctionArgs } from "@remix-run/node";
+
+import { authenticator } from "~/services/auth.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return await authenticator.isAuthenticated(request);
+}
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -16,12 +23,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link 
-          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
-          rel="stylesheet" 
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
-          crossOrigin="anonymous" 
-          />
+        <link
+          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+          crossOrigin="anonymous"
+        />
         <Meta />
         <Links />
         <style>{`
@@ -35,7 +42,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <body>
         <Navbar />
         <div className="container-lg">
-        {children}
+          {children}
         </div>
         <Footer />
         <ScrollRestoration />
@@ -46,21 +53,23 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet />;
+  return (
+      <Outlet />
+  );
 }
 
 export function ErrorBoundary() {
   const error = useRouteError();
   return (
     <>
-        <h1 className="py-2">Error</h1>
-        <div>
-          {isRouteErrorResponse(error)
-            ? `${error.status} ${error.statusText}`
-            : error instanceof Error
-              ? error.message
-              : "Unknown Error"}
-        </div>
+      <h1 className="py-2">Error</h1>
+      <div>
+        {isRouteErrorResponse(error)
+          ? `${error.status} ${error.statusText}`
+          : error instanceof Error
+            ? error.message
+            : "Unknown Error"}
+      </div>
     </>
   );
 }
diff --git a/app/routes/auth._index.tsx b/app/routes/auth._index.tsx
new file mode 100644
index 0000000..35b465a
--- /dev/null
+++ b/app/routes/auth._index.tsx
@@ -0,0 +1,63 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { Link as RemixLink, useLoaderData } from "@remix-run/react";
+import { authenticator } from "~/services/auth.server";
+import { cookieStorage } from "~/services/session.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+    //console.log('in loader', (await cookieStorage.getSession(request.headers.get("Cookie"))).get("user"))
+    const session = await cookieStorage.getSession(request.headers.get("Cookie"));
+    const sessionUser = session.get("user");
+    const authUser = await authenticator.isAuthenticated(request);
+    return {
+        //
+        user: sessionUser,
+        sessionUser,
+        authUser,
+        session: (await cookieStorage.getSession(request.headers.get("Cookie")))
+    };
+}
+
+function LoginSection() {
+    return (
+        <>
+            <p>You are not logged in!</p>
+            <RemixLink className="btn btn-primary" to="login.html">Login</RemixLink>
+        </>
+    )
+}
+
+function LogoutSection({ user }: { user: any }) {
+    return (
+        <>
+            <p>You are logged in as <span className="border rounded bg-body-tertiary text-body-secondary p-2">{user.displayName} ({user.providerName}@{user.provider})</span></p>
+            <p>Your email is <span className="border rounded bg-body-tertiary text-body-secondary p-2">{user.email}</span></p>
+            <p>Your profile image is <img className="px-2" src={user.avatar} alt={user.displayName} style={{"height":"2em"}} /></p>
+            <form action="/auth/logout.html" method="post">
+                <input type="submit" className="btn btn-primary" value="Logout" />
+            </form>
+        </>
+    )
+}
+
+export default function AuthIndex() {
+    const data = useLoaderData<typeof loader>();
+
+    return (
+        <>
+            <h1 className="py-2">Authentication</h1>
+            { data.user ? <LogoutSection user={data.user} /> : <LoginSection/> }
+            <details className="pt-3">
+                <summary>Raw Auth User Data</summary>
+                <pre>{JSON.stringify(data.user, null, 4)}</pre>
+            </details>
+            <details className="">
+                <summary>Raw Session User Data</summary>
+                <pre>{JSON.stringify(data.user, null, 4)}</pre>
+            </details>
+            <details>
+                <summary>Raw Session Data</summary>
+                <pre>{JSON.stringify(data.session, null, 4)}</pre>
+            </details>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/app/routes/auth.github.callback.tsx b/app/routes/auth.github.callback.tsx
new file mode 100644
index 0000000..92c515d
--- /dev/null
+++ b/app/routes/auth.github.callback.tsx
@@ -0,0 +1,22 @@
+import { redirect, type LoaderFunctionArgs } from "@remix-run/node";
+import { authenticator } from "~/services/auth.server";
+import { cookieStorage } from "~/services/session.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const user = await authenticator.authenticate("github", request);
+
+  console.log('user in callback', JSON.stringify(user));
+  if (user != null) {
+    const session = await cookieStorage.getSession(request.headers.get("Cookie"));
+    session.set("user", user);
+    return redirect('/auth/', { headers: { "Set-Cookie": await cookieStorage.commitSession(session) }});
+  }
+  return redirect("/auth/");
+
+  /*
+  return authenticator.authenticate("github", request, {
+    successRedirect: "/auth/sucess.html",
+    failureRedirect: "/auth/failure.html",
+  });
+  */
+}
\ No newline at end of file
diff --git a/app/routes/auth.github.tsx b/app/routes/auth.github.tsx
new file mode 100644
index 0000000..d0e9802
--- /dev/null
+++ b/app/routes/auth.github.tsx
@@ -0,0 +1,14 @@
+import type { ActionFunctionArgs } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
+import { authenticator } from "~/services/auth.server";
+
+export async function loader() {
+  return redirect("/auth/");
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  return authenticator.authenticate("github", request, {
+    successRedirect: "/auth/",
+    failureRedirect: "/auth/",
+  });
+}
\ No newline at end of file
diff --git a/app/routes/auth.login[.]html.tsx b/app/routes/auth.login[.]html.tsx
new file mode 100644
index 0000000..55a4055
--- /dev/null
+++ b/app/routes/auth.login[.]html.tsx
@@ -0,0 +1,22 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { Link as RemixLink, useLoaderData } from "@remix-run/react";
+import { PiGithubLogoBold } from "react-icons/pi";
+import { authenticator } from "~/services/auth.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+    return await authenticator.isAuthenticated(request);
+}
+
+export default function AuthIndex() {
+    const data = useLoaderData<typeof loader>();
+
+    return (
+        <>
+            <h1 className="py-2">Login</h1>
+            { data ? <div className="alert alert-warning">It looks like you are already logged in! <RemixLink className="alert-link" to="/auth/">View my user info</RemixLink></div> : <></> }
+            <form action="/auth/github" method="post">
+                <button type="submit" className="btn btn-primary">Login with Github</button>
+            </form>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/app/routes/auth.logout[.]html.tsx b/app/routes/auth.logout[.]html.tsx
new file mode 100644
index 0000000..5e0df03
--- /dev/null
+++ b/app/routes/auth.logout[.]html.tsx
@@ -0,0 +1,57 @@
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { Link as RemixLink, useLoaderData } from "@remix-run/react";
+import { cookieStorage } from "~/services/session.server";
+import { authenticator } from "~/services/auth.server";
+
+type AlertMessage = {
+  alert: string;
+  text: string;
+};
+
+export async function loader({request}: LoaderFunctionArgs): Promise<AlertMessage | null> {
+  const session = await cookieStorage.getSession(request.headers.get("Cookie"));
+
+  const message = session.get("logout") as AlertMessage;
+
+  console.log('logout message', JSON.stringify(message));
+  //return logout(request);  logouts need to be POSTs
+  return null;
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+
+  // don't pass request.headers.get("cookie") here
+  let session = await cookieStorage.getSession(request.headers.get("Cookie"));
+
+  const user = session.get("user");
+  session = await cookieStorage.getSession();   // create empty session for flash msg
+  let message:AlertMessage;
+  if (user) {
+    message = { alert: "success", text: "You have been logged out" };
+  } else {
+    message = { alert: "error", text: "You were not logged in"};
+  }
+  session.flash("logout", message);
+
+  await authenticator.logout(request, {
+    redirectTo: "/auth/logout.html",
+    headers: { "Set-Cookie": await cookieStorage.commitSession(session) },
+  });
+}
+
+export default function AuthLogout() {
+  const data = useLoaderData<typeof loader>();
+
+  const message = data || { alert: "info", text: "You are logged out!" };
+
+  return (
+    <>
+      <h1 className="py-2">Logout</h1>
+      <p>{message.text}</p>
+      <p>
+        <RemixLink className="btn btn-primary mx-2" to="/auth/">Login</RemixLink>
+        <RemixLink className="btn btn-primary mx-2" to="/">Home</RemixLink>
+      </p>
+    </>
+  );
+}
diff --git a/app/services/AuthContext.ts b/app/services/AuthContext.ts
new file mode 100644
index 0000000..ffffef4
--- /dev/null
+++ b/app/services/AuthContext.ts
@@ -0,0 +1,18 @@
+import { createContext } from "react";
+import { User } from "~/types/User";
+
+
+export const AnonymousUser:User = {
+    email: "",
+    avatar: "",
+    displayName: "Anonymous",
+    provider: "anonymous",
+    providerName: "anonymous",
+    id: "anonymous:anonymous",
+    isAnonymous: true,
+
+}
+
+const AuthContext = createContext<User>(AnonymousUser);
+
+export { AuthContext }
\ No newline at end of file
diff --git a/app/services/auth.server.ts b/app/services/auth.server.ts
new file mode 100644
index 0000000..dfcde25
--- /dev/null
+++ b/app/services/auth.server.ts
@@ -0,0 +1,37 @@
+import { Authenticator } from "remix-auth";
+import { cookieStorage } from "~/services/session.server";
+import { GitHubStrategy } from "remix-auth-github";
+import { processOrThrow } from "~/util/processOrThrow.server";
+import { User } from "~/types/User";
+
+
+
+const authenticator = new Authenticator<User>(cookieStorage, {
+    sessionErrorKey: "authError",
+    throwOnError: true,
+});
+
+const gitHubStrategy = new GitHubStrategy<User>(
+  {
+    clientID: processOrThrow("GITHUB_CLIENT_ID"),
+    clientSecret: processOrThrow("GITHUB_CLIENT_SECRET"),
+    callbackURL: `${processOrThrow("ORIGIN")}/auth/github/callback`,
+  },
+  async (loginData): Promise<User> => {
+    // Get the user data from your DB or API using the tokens and profile
+    console.log("loginData", loginData);
+    //return User.findOrCreate({ email: loginData.profile.emails[0].value });
+    return {
+      displayName: loginData.profile.name.givenName,
+      email: loginData.profile.emails[0].value,
+      avatar: loginData.profile.photos[0].value,
+      provider: "github",
+      providerName: loginData.profile.displayName,
+      id: `github:${loginData.profile.id}`,
+    };
+  }
+);
+
+authenticator.use(gitHubStrategy);
+
+export { authenticator }
\ No newline at end of file
diff --git a/app/services/session.server.ts b/app/services/session.server.ts
new file mode 100644
index 0000000..178f35f
--- /dev/null
+++ b/app/services/session.server.ts
@@ -0,0 +1,19 @@
+import { createCookieSessionStorage } from "@remix-run/node";
+import { processOrThrow } from "~/util/processOrThrow.server";
+
+// export the whole sessionStorage object
+const cookieStorage = createCookieSessionStorage({
+  cookie: {
+    name: "_jsessionid", // use any name you want here
+    sameSite: "lax", // this helps with CSRF
+    path: "/", // remember to add this so the cookie will work in all routes
+    httpOnly: true, // for security reasons, make this cookie http only
+    secrets: [processOrThrow("COOKIE_SECRET")], // replace this with an actual secret
+    secure: process.env.NODE_ENV === "production", // enable this in prod only
+  },
+});
+
+// you can also export the methods individually for your own usage
+const { getSession, commitSession, destroySession } = cookieStorage;
+
+export { getSession, commitSession, destroySession, cookieStorage };
\ No newline at end of file
diff --git a/app/types/User.ts b/app/types/User.ts
new file mode 100644
index 0000000..89083e3
--- /dev/null
+++ b/app/types/User.ts
@@ -0,0 +1,9 @@
+export type User = {
+  email: string;
+  avatar?: string;
+  displayName: string;
+  provider: string;
+  providerName: string;
+  id: string;
+  isAnonymous?: boolean;
+};
diff --git a/app/util/processOrThrow.server.ts b/app/util/processOrThrow.server.ts
new file mode 100644
index 0000000..7407f59
--- /dev/null
+++ b/app/util/processOrThrow.server.ts
@@ -0,0 +1,16 @@
+
+
+function processOrThrow(envvar:string): string {
+
+    const retVal = process.env[envvar];
+
+    if (!retVal) {
+        throw new Error(`Environment variable ${envvar} is not set`);
+    }
+
+    return retVal;
+}
+
+export {
+    processOrThrow
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c3ce6e9..1d20463 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,9 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
-        "react-markdown": "^9.0.1"
+        "react-markdown": "^9.0.1",
+        "remix-auth": "^3.7.0",
+        "remix-auth-github": "^1.7.0"
       },
       "devDependencies": {
         "@remix-run/dev": "^2.9.2",
@@ -10957,6 +10959,55 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remix-auth": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/remix-auth/-/remix-auth-3.7.0.tgz",
+      "integrity": "sha512-2QVjp2nJVaYxuFBecMQwzixCO7CLSssttLBU5eVlNcNlVeNMmY1g7OkmZ1Ogw9sBcoMXZ18J7xXSK0AISVFcfQ==",
+      "dependencies": {
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "@remix-run/react": "^1.0.0 || ^2.0.0",
+        "@remix-run/server-runtime": "^1.0.0 || ^2.0.0"
+      }
+    },
+    "node_modules/remix-auth-github": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/remix-auth-github/-/remix-auth-github-1.7.0.tgz",
+      "integrity": "sha512-xuy/DW44y/eWU+vUsf9NlQUtLhayMZEJszgaVr1txwjA0OzpPee5qNxPQ9RBg8WdnY3pMWck5m070MW5Jt7nxg==",
+      "dependencies": {
+        "remix-auth-oauth2": "^1.11.2"
+      },
+      "peerDependencies": {
+        "@remix-run/server-runtime": "^1.0.0 || ^2.0.0",
+        "remix-auth": "^3.4.0"
+      }
+    },
+    "node_modules/remix-auth-oauth2": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/remix-auth-oauth2/-/remix-auth-oauth2-1.11.2.tgz",
+      "integrity": "sha512-5ORP+LMi5CVCA/Wb8Z+FCAJ73Uiy4uyjEzhlVwNBfdAkPOnfxzoi+q/pY/CrueYv3OniCXRM35ZYqkVi3G1UPw==",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "uuid": "^9.0.1"
+      },
+      "peerDependencies": {
+        "@remix-run/server-runtime": "^1.0.0 || ^2.0.0",
+        "remix-auth": "^3.6.0"
+      }
+    },
+    "node_modules/remix-auth-oauth2/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
@@ -12459,6 +12510,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/uvu": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
diff --git a/package.json b/package.json
index 1e68216..ed52169 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "remix-auth": "^3.7.0",
+    "remix-auth-github": "^1.7.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.9.2",
diff --git a/public/images/icon512.png b/public/images/icon512.png
new file mode 100644
index 0000000..8383088
Binary files /dev/null and b/public/images/icon512.png differ