diff --git a/src/App.js b/src/App.js
index 6fdd96c..0ac0e05 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
 import { isAuthenticated, isApiKeyEnabled } from 'utilities/authUtilities';
-import { AuthWrapper } from 'utilities/AuthWrapper';
+import { NoAuthWrapper } from 'utilities/NoAuthWrapper';
 
 import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
@@ -20,18 +20,15 @@ function App() {
     <div className="App" data-testid="app-container">
       <Router>
         <Routes>
-          <Route element={<AuthWrapper isLoggedIn={isLoggedIn} hasHeader redirect="/login" />}>
+          <Route element={<NoAuthWrapper hasHeader />}>
             <Route path="/" element={<Navigate to="/home" />} />
             <Route path="/home" element={<HomePage />} />
             <Route path="/explore" element={<ExplorePage />} />
             <Route path="/image/:name" element={<RepoPage />} />
             <Route path="/image/:reponame/tag/:tag" element={<TagPage />} />
             {isApiKeyEnabled() && <Route path="/user/apikey" element={<UserManagementPage />} />}
-            <Route path="*" element={<Navigate to="/home" />} />
-          </Route>
-          <Route element={<AuthWrapper isLoggedIn={!isLoggedIn} redirect="/" />}>
             <Route path="/login" element={<LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />} />
-            <Route path="*" element={<Navigate to="/login" />} />
+            <Route path="*" element={<Navigate to="/home" />} />
           </Route>
         </Routes>
       </Router>
diff --git a/src/utilities/NoAuthWrapper.jsx b/src/utilities/NoAuthWrapper.jsx
new file mode 100644
index 0000000..974e11f
--- /dev/null
+++ b/src/utilities/NoAuthWrapper.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles(() => ({
+  topMargin: {
+    marginTop: '10vh',
+    minHeight: '90vh',
+    height: '100%'
+  }
+}));
+
+const NoAuthWrapper = ({ hasHeader = false }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={hasHeader ? classes.topMargin : null}>
+      <Outlet />
+    </div>
+  );
+};
+
+export { NoAuthWrapper };