diff --git a/components/Nav.js b/components/Nav.js
index 2069bb2..51fc9dc 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -40,11 +40,15 @@ const Nav = (props) => {
       )}
 
       <Link href='/pricing'>
-        <a className='nav-btn'>Pricing</a>
+        <a className='nav-btn' id='pricingLink'>
+          Pricing
+        </a>
       </Link>
 
       <Link href='/contact'>
-        <a className='nav-btn'>Contact Us</a>
+        <a className='nav-btn' id='contactLink'>
+          Contact Us
+        </a>
       </Link>
 
       {props.user ? (
@@ -55,7 +59,9 @@ const Nav = (props) => {
         </button>
       ) : (
         <Link href='/auth'>
-          <a className='btn btn-primary btn-sm rounded-3xl font-body normal-case font-normal'>Login</a>
+          <a className='btn btn-primary btn-sm rounded-3xl font-body normal-case font-normal'>
+            Login
+          </a>
         </Link>
       )}
     </div>
@@ -72,7 +78,7 @@ const Nav = (props) => {
         <div className='hidden lg:flex text-center ml-auto'>{NavMenu}</div>
       </div>
       <div className='flex-none'>
-        <div className='dropdown dropdown-end'>
+        <div className='dropdown dropdown-end' data-cy="dropdown">
           <div tabIndex='0' className='m-1 cursor-pointer lg:hidden'>
             <Menu />
           </div>
diff --git a/components/Pricing.js b/components/Pricing.js
index 605dd59..c052ecb 100644
--- a/components/Pricing.js
+++ b/components/Pricing.js
@@ -119,8 +119,8 @@ const Pricing = () => {
           </div>
         </div>
       )}
-      <div className='max-w-4xl mx-auto md:flex space-x-4 text-base-100'>
-        <div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
+      <div className='max-w-4xl mx-auto md:flex space-x-4'>
+        <div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
           <div className='w-full flex-grow'>
             <h2 className='text-center font-bold uppercase mb-4'>Personal</h2>
             <h3 className='text-center font-bold text-4xl mb-5'>
@@ -159,7 +159,7 @@ const Pricing = () => {
             </button>
           </div>
         </div>
-        <div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
+        <div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
           <div className='w-full flex-grow'>
             <h2 className='text-center font-bold uppercase mb-4'>Team</h2>
             <h3 className='text-center font-bold text-4xl mb-5'>
@@ -208,7 +208,7 @@ const Pricing = () => {
             </button>
           </div>
         </div>
-        <div className='w-full md:w-1/3 md:max-w-none bg-base-content px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
+        <div className='w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col'>
           <div className='w-full flex-grow'>
             <h2 className='text-center font-bold uppercase mb-4'>Pro</h2>
             <h3 className='text-center font-bold text-4xl mb-5'>
diff --git a/cypress.json b/cypress.json
index 2e10227..0db2347 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,3 +1,5 @@
 {
-    "baseUrl": "http://localhost:3000"
+    "baseUrl": "http://localhost:3000",
+    "viewportWidth": 1280,
+    "viewportHeight": 800
 }
\ No newline at end of file
diff --git a/cypress/integration/basic.spec.js b/cypress/integration/basic.spec.js
index 4c728c5..4ba32da 100644
--- a/cypress/integration/basic.spec.js
+++ b/cypress/integration/basic.spec.js
@@ -1,9 +1,33 @@
-describe('Homepage Test', () => {
-    it('Visits the homepage', () => {
-      cy.visit('')
-    })
-    it('Visits the pricing page', () => {
-        cy.visit('/pricing')
-    })
-  })
-  
\ No newline at end of file
+describe("Basic Test", () => {
+  context("Desktop resolution", () => {
+    // run these tests as if in a desktop
+    // browser with a 720p monitor
+
+    it("Visits the homepage and nav links", () => {
+      cy.viewport(1280, 720);
+      cy.visit("");
+
+      cy.get("nav").contains("Pricing").click();
+      cy.url().should("include", "/pricing");
+
+      cy.get("nav").contains("Contact").click();
+      cy.url().should("include", "/contact");
+    });
+  });
+
+  context("Mobile resolution", () => {
+    // run these tests as if in a desktop
+    // browser with a 720p monitor
+
+    it("Visits the homepage and nav links", () => {
+      cy.viewport(680, 720);
+      cy.visit("");
+      cy.get("[data-cy=dropdown]").click();
+      cy.get("[data-cy=dropdown]").contains("Pricing").click();
+      cy.url().should("include", "/pricing");
+      cy.get("[data-cy=dropdown]").click();
+      cy.get("[data-cy=dropdown]").contains("Contact").click();
+      cy.url().should("include", "/contact");
+    });
+  });
+});