diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx
index 367178f..64d9502 100644
--- a/src/components/mapCard/MapCard.tsx
+++ b/src/components/mapCard/MapCard.tsx
@@ -1,7 +1,10 @@
 import React from 'react'
 import Image from 'next/image'
 import { MapCardView } from './MapCardView'
+<<<<<<< HEAD
 import Link from 'next/link'
+=======
+>>>>>>> 704a063fab24d25c7fb5ae87eed00d7dfec73306
 
 interface MapCardInterface {
   title: string,
diff --git a/src/styles/layouts/dashboard/DashboardView.js b/src/styles/layouts/dashboard/DashboardView.js
new file mode 100644
index 0000000..7287a9a
--- /dev/null
+++ b/src/styles/layouts/dashboard/DashboardView.js
@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+
+export const DashboardView = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  flex-wrap: wrap;
+
+  flex-direction: column;
+
+  width: 100%;
+
+  .cardsSection {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    width: 100%;
+    height: fit-content;
+
+    margin: 2rem 0 2rem 0;
+
+    background-color: #fff;
+
+    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
+    border-radius: 10px;
+
+    cursor: pointer;
+  }
+
+  .dashboard {
+    display: grid;
+
+    grid-template-columns: 50% 50% 100%;
+    grid-template-rows: 50% 50%;
+
+    gap: 30px;
+
+    width: 99%;
+
+    padding-right: 20px;
+
+    .footerGraph {
+      grid-row-start: 2;
+
+      grid-column-start: 1;
+      grid-column-end: 3;
+    }
+  }
+
+  @media (max-width: 1195px) {
+    width: 100%;
+    padding: 30px;
+    margin: 0;
+
+    .dashboard {
+      display: flex;
+
+      padding: 0;
+      margin: 0;
+
+      justify-content: center;
+      align-items: center;
+
+      flex-wrap: wrap;
+
+      grid-template-columns: 50% 50%;
+
+      grid-auto-rows: 1;
+      grid-auto-columns: 1;
+
+      width: 100%;
+    }
+  }
+`