diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index 0f2b5db6..814943d7 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -4,7 +4,7 @@
 export default function About() {
   return (
     //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
-    <div className="mx-36 grid min-h-screen">
+    <div className="mx-5 grid min-h-screen md:mx-36">
       <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
         <p className="text-3xl">About DocsGPT 🦖</p>
         <p className="mt-4">
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b0c6cb2d..2cbe582d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,7 +6,10 @@ import { useState } from 'react';
 import { ActiveState } from './models/misc';
 
 export default function App() {
-  const [navState, setNavState] = useState<ActiveState>('ACTIVE');
+  //TODO : below media query is disjoint from tailwind. Please wire it together.
+  const [navState, setNavState] = useState<ActiveState>(
+    window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
+  );
 
   return (
     <div className="min-h-full min-w-full">