diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e7d4879..60592d4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -15,7 +15,7 @@ const Link: FC<LinkProps> = ({ to, children }) => (
 );
 
 const Header: FC = () => (
-  <header className="flex p-4 items-center">
+  <header className="hidden md:flex p-4 items-center w-full overflow-hidden">
     <h1
       className={
         "text-3xl font-bold text-yellow-800 bg-yellow-300 shadow " +
diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx
index 9fd0f17..9ce7617 100644
--- a/src/containers/Footer.tsx
+++ b/src/containers/Footer.tsx
@@ -11,7 +11,7 @@ const Footer: FC = () => {
   const socket = useSelector(selectSocket);
 
   return (
-    <footer className="flex items-center justify-center">
+    <footer className="hidden md:flex items-center justify-center">
       <SocketStatusPane socket={socket} />
       <LoginStatusPane login={login} />
     </footer>