diff --git a/src/App.js b/src/App.js
index da2f33d..7462941 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,8 @@ import Shop from "./routes/shop/shop.component";
 import Checkout from "./routes/checkout/checkout.component";
 import Spinner from "./components/spinner/spinner.component";
 
+import { GlobalStyle } from "./global.styles";
+
 // import Home from "./routes/home/home.component";
 // import Authentication from "./routes/authentication/authentication.component";
 
@@ -29,6 +31,7 @@ const App = () => {
   //fallback is the component to be rendered while the lazy component is loading
   return (
     <Suspense fallback={<Spinner />}>
+      <GlobalStyle />
       <Routes>
         <Route path="/" element={<Navigation />}>
           <Route index element={<Home />} />
diff --git a/src/components/directory-item/directory-item.styles.tsx b/src/components/directory-item/directory-item.styles.tsx
index 9ff7946..c33adb1 100644
--- a/src/components/directory-item/directory-item.styles.tsx
+++ b/src/components/directory-item/directory-item.styles.tsx
@@ -70,4 +70,8 @@ export const DirectoryItemContainer = styled.div`
       opacity: 0.9;
     }
   }
+
+  @media screen and (max-width: 800px) {
+    height: 200px;
+  }
 `;
\ No newline at end of file
diff --git a/src/global.styles.js b/src/global.styles.js
new file mode 100644
index 0000000..57daf4d
--- /dev/null
+++ b/src/global.styles.js
@@ -0,0 +1,25 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+    body {
+        margin: 0;
+        padding: 20px 40px;
+        font-family: 'Saira Condensed', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+            monospace;
+    }
+
+    a {
+        text-decoration: none;
+        color: black;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+`;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f4adb93..51a6e09 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,7 +9,6 @@ import { Elements } from '@stripe/react-stripe-js';
 import { store, persistor } from './store/store';
 import { stripePromise } from './utils/stripe/stripe.utils';
 
-import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
diff --git a/src/index.scss b/src/index.scss
deleted file mode 100644
index acda2cb..0000000
--- a/src/index.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-body {
-  margin: 0;
-  padding: 20px 40px;
-  font-family: 'Saira Condensed', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-a {
-  text-decoration: none;
-  color: black;
-}
-
-* {
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/src/routes/navigation/navigation.styles.tsx b/src/routes/navigation/navigation.styles.tsx
index 4214366..f20852d 100644
--- a/src/routes/navigation/navigation.styles.tsx
+++ b/src/routes/navigation/navigation.styles.tsx
@@ -7,12 +7,23 @@ export const NavigationContainer = styled.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: 25px;
+
+@media screen and (max-width: 800px) {
+    height: 200px;
+    padding: 10px 20px;
+    margin-bottom: 20px;
+  }
 `;
 
 export const LogoContainer = styled(Link)`
     height: 100 %;
     width: 70px;
     padding: 25px;
+
+    @media screen and (max-width: 800px) {
+        height: 50px;
+        padding: 0px;
+    }
 `;
 
 export const NavLinks = styled.div`
@@ -21,6 +32,10 @@ export const NavLinks = styled.div`
     display: flex;
     align - items: center;
     justify - content: flex - end;
+
+    @media screen and (max-width: 800px) {
+        width: 80%;
+    }
 `;
 
 export const NavLink = styled(Link)`