diff --git a/.env.example b/.env.example
index 404f4609..c016cfd5 100644
--- a/.env.example
+++ b/.env.example
@@ -21,3 +21,4 @@ REACT_APP_MAPBOX_ACCESS_TOKEN="defaultMapboxToken"
 REACT_APP_CONTACT_EMAIL=me@example.org
 REACT_APP_MATOMO_TRACKER_URL=https://matomo.example.org/
 REACT_APP_MATOMO_SITE_ID=1234
+REACT_APP_API_BASE_URL=http://localhost:3333/api
diff --git a/apps/frontend/src/components/keplerGl/factories/MapControlFactory.tsx b/apps/frontend/src/components/keplerGl/factories/MapControlFactory.tsx
index c0e43182..8ca2eac2 100644
--- a/apps/frontend/src/components/keplerGl/factories/MapControlFactory.tsx
+++ b/apps/frontend/src/components/keplerGl/factories/MapControlFactory.tsx
@@ -16,7 +16,7 @@ import { useForward } from '../../../hooks';
 import { selectFilters, selectFiltersConfig } from '../../../store/selectors';
 import { FiltersConfigInterface } from '@datatlas/models';
 import { PublishButton } from '../../buttons/PublishButton';
-import { darkTheme } from '../../../style/theme';
+import { lightTheme } from '../../../style/theme';
 
 const StyledMapControl = styled.div<Pick<MapControlProps, 'theme' | 'top'>>`
   right: 0;
@@ -72,7 +72,7 @@ function MapControlFactory(_, Toggle3dButton) {
     const filtersConfig = useSelector<RootState, FiltersConfigInterface>((state) => selectFiltersConfig(state, id));
 
     return (
-      <ThemeProvider theme={darkTheme}>
+      <ThemeProvider theme={lightTheme}>
         <StyledMapControl className="map-control" top={top} role="menubar">
           <MapMenu
             role="toolbar"
diff --git a/apps/frontend/src/components/keplerGl/factories/filter-panel/RangeFilterFactory.tsx b/apps/frontend/src/components/keplerGl/factories/filter-panel/RangeFilterFactory.tsx
index ad5fd094..91f2d412 100644
--- a/apps/frontend/src/components/keplerGl/factories/filter-panel/RangeFilterFactory.tsx
+++ b/apps/frontend/src/components/keplerGl/factories/filter-panel/RangeFilterFactory.tsx
@@ -26,7 +26,7 @@ export function RangeFilterFactory(RangeSlider) {
     );
   })`
     .kg-range-slider .kg-range-slider__plot .histogram-bars rect {
-      fill: rgba(255, 255, 255, 0.5);
+      fill: rgba(0, 0, 0, 0.5);
     }
 
     .kg-range-slider .kg-range-slider__brush .selection {
@@ -35,23 +35,23 @@ export function RangeFilterFactory(RangeSlider) {
     }
 
     .kg-range-slider .kg-range-slider__slider .kg-range-slider {
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: rgba(0, 0, 0, 0.5);
     }
 
     .kg-range-slider .kg-range-slider__slider .kg-range-slider__bar {
-      background-color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(0, 0, 0, 0.9);
     }
 
     .kg-range-slider .kg-range-slider__brush .handle--custom {
-      fill: rgba(255, 255, 255, 0.8);
+      fill: rgba(0, 0, 0, 0.8);
     }
     .kg-range-slider .kg-range-slider__slider .kg-range-slider__handle {
-      background-color: rgba(255, 255, 255, 0.8);
-      border-color: rgba(255, 255, 255, 0.5);
+      background-color: rgba(0, 0, 0, 0.8);
+      border-color: rgba(0, 0, 0, 0.5);
     }
 
     .kg-range-slider .kg-range-slider__slider .kg-range-slider__handle:hover {
-      background-color: rgba(255, 255, 255, 1);
+      background-color: rgba(0, 0, 0, 1);
     }
 
     .kg-range-slider .range-slider__input-group .kg-range-slider__input {
diff --git a/apps/frontend/src/components/keplerGl/factories/map/MapPopoverFactory.tsx b/apps/frontend/src/components/keplerGl/factories/map/MapPopoverFactory.tsx
index f8e1187c..62c7a7a3 100644
--- a/apps/frontend/src/components/keplerGl/factories/map/MapPopoverFactory.tsx
+++ b/apps/frontend/src/components/keplerGl/factories/map/MapPopoverFactory.tsx
@@ -18,7 +18,7 @@ import {
   FloatingContext,
   FloatingFocusManager,
 } from '@floating-ui/react';
-import { darkTheme } from '../../../../style/theme';
+import { lightTheme } from '../../../../style/theme';
 import { LayerHoverInfoProps } from './LayerHoverInfo';
 import { useIsMobile } from '../../../../hooks';
 
@@ -34,12 +34,16 @@ const StyledMapPopover = styled.div`
   z-index: 1000;
 
   &.full-width {
+    width: calc(50% - 26px);
+  }
+
+  &.full-width-mobile {
     width: calc(100% - 26px);
   }
 
   &.expanded {
-    height: 100%;
     max-height: 100%;
+    word-break: break-word;
   }
 `;
 
@@ -73,6 +77,34 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
 
   .map-popover__actions {
     display: ${({ expandable }) => (expandable ? 'flex' : 'none')};
+    .button {
+      background-color: #ff0032;
+      font-size: 16px;
+      border: 1px solid #ff0032;
+      text-transform: none;
+      border-radius: 16px;
+      letter-spacing: 0px;
+      padding: 7px 20px;
+      color: #ffffff;
+      line-height: 19px;
+      font-weight: 600;
+
+      :hover {
+        background-color: #ffffff;
+        border: 1px solid #ff0032;
+        color: #ff0032;
+      }
+
+      :focus {
+        color: #ff0032;
+        background-color: #ffffff;
+      }
+
+      :active {
+        color: #ffffff;
+        background-color: #ff0032;
+      }
+    }
   }
 
   .map-popover__layer-info {
@@ -118,7 +150,7 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
 
     .row:not(.aggregated):nth-child(1) .row__value,
     .row .row__value h3 {
-      font-size: 32px;
+      font-size: 24px;
       text-transform: uppercase;
       padding-bottom: 13px;
       font-weight: 700;
@@ -171,8 +203,6 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
   }
 
   &.expanded {
-    width: 100%;
-    height: 100%;
     max-width: 100%;
     max-height: 100%;
     padding: 32px;
@@ -191,7 +221,12 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
     .map-popover__layer-info {
       .map-popover__topbar {
         display: flex;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(255, 255, 255);
+
+        .button {
+          color: rgb(0, 0, 0);
+          align-items: center;
+        }
       }
 
       .map-popover__content .row.empty {
@@ -282,13 +317,14 @@ function MapPopoverFactory(LayerHoverInfo, CoordinateInfo) {
     }, [layerHoverProp.fieldsToShow, maxTooltipFields]);
 
     return (
-      <ThemeProvider theme={darkTheme}>
+      <ThemeProvider theme={lightTheme}>
         <FloatingFocusManager context={context} modal={frozen}>
           <StyledMapPopover
             className={classNames([
               'map-popover-container',
               expanded && 'expanded',
-              (expanded || isMobile) && 'full-width',
+              expanded && !isMobile && 'full-width',
+              expanded && isMobile && 'full-width-mobile',
             ])}
             ref={refs.setFloating}
             style={floatingStyles}
diff --git a/apps/frontend/src/components/map-menu/DatasetMenu.tsx b/apps/frontend/src/components/map-menu/DatasetMenu.tsx
index 5d44f913..7bf4ac4e 100644
--- a/apps/frontend/src/components/map-menu/DatasetMenu.tsx
+++ b/apps/frontend/src/components/map-menu/DatasetMenu.tsx
@@ -16,7 +16,7 @@ const ToggleVisibilityMenuIcon = styled(({ visible, ...props }) => (
 ))`
   width: 52px;
   padding: 3px 7px 3px 7px;
-  border: 1px solid white;
+  border: 1px solid black;
   border-radius: 17px;
   background-color: ${({ visible }) => (visible ? 'white' : 'black')};
   color: ${({ visible }) => (visible ? 'black' : 'white')};
diff --git a/apps/frontend/src/components/map-menu/MapMenu.tsx b/apps/frontend/src/components/map-menu/MapMenu.tsx
index 3dae8bd6..7589ab9f 100644
--- a/apps/frontend/src/components/map-menu/MapMenu.tsx
+++ b/apps/frontend/src/components/map-menu/MapMenu.tsx
@@ -127,34 +127,37 @@ export const MapMenu = styled(
   }
 
   ${MenuSectionHeading} {
+    background-color: rgb(255, 255, 255);
+    color: rgb(0, 0, 0);
     display: flex;
     padding: 23px 21px 21px 23px;
     h2,
     h3 {
       font-family: 'Roboto', Verdana, 'Helvetica Neue', Helvetica, sans-serif;
-      font-size: 24px;
+      font-size: 16px;
       font-weight: 400;
-      text-transform: capitalize;
+      text-transform: none;
       line-height: 130%;
     }
   }
 
   button${MenuSectionHeading} {
     :hover {
-      color: rgba(255, 255, 255, 0.9);
-      background-color: #202020;
+      color: rgba(0, 0, 0, 0.9);
+      background-color: #bdbdbd;
     }
 
     :active {
-      color: rgba(255, 255, 255, 0.8);
-      background-color: #383838;
+      color: rgba(0, 0, 0, 0.8);
+      background-color: #bdbdbd;
     }
   }
 
   li.map-menu__list-item-container > ${MenuSectionHeading}, li.map-menu__list-item-container > ul > li {
-    background-color: #0c0c0c;
+    background-color: rgb(255, 255, 255);
     border-radius: 7px;
     margin-bottom: 7px;
+    color: rgb(0, 0, 0);
   }
 
   ${MenuSectionHeading}, ${MultiSelectFilterOption} {
@@ -162,7 +165,7 @@ export const MapMenu = styled(
   }
 
   ul .unfolded ${MenuSectionHeading}, ${MultiSelectFilterOption} {
-    border-bottom: 1px solid white;
+    border-bottom: 1px solid black;
   }
 
   ul li ${MenuSectionHeading}:last-child {
diff --git a/apps/frontend/src/components/map-menu/MultiSelectFillter.tsx b/apps/frontend/src/components/map-menu/MultiSelectFillter.tsx
index cb13c04d..e35c3580 100644
--- a/apps/frontend/src/components/map-menu/MultiSelectFillter.tsx
+++ b/apps/frontend/src/components/map-menu/MultiSelectFillter.tsx
@@ -4,7 +4,7 @@ import { grayscale, rgbToHsl, toCss } from '../../utils/color';
 
 export const MultiSelectFilterOption = styled(({ hslCssColor, selected, ...props }) => <button {...props} />)`
   display: inline;
-  color: ${({ selected }) => `rgba(255, 255, 255, ${selected ? 1 : 0.5})`};
+  color: ${({ selected }) => `rgba(0, 0, 0, ${selected ? 1 : 0.5})`};
   background-color: ${({ hslCssColor }) => `hsl(${hslCssColor}, 0.60)`};
   transition: background, color 0.3s ease;
   text-overflow: ellipsis;
@@ -13,12 +13,12 @@ export const MultiSelectFilterOption = styled(({ hslCssColor, selected, ...props
   overflow: hidden;
 
   :hover {
-    color: ${({ selected }) => `rgba(255, 255, 255, ${selected ? 1 : 0.9})`};
+    color: ${({ selected }) => `rgba(0, 0, 0, ${selected ? 1 : 0.9})`};
     background-color: ${({ hslCssColor }) => `hsl(${hslCssColor}, 0.35)`};
   }
 
   :active {
-    color: ${({ selected }) => `rgba(255, 255, 255, ${selected ? 1 : 0.8})`};
+    color: ${({ selected }) => `rgba(0, 0, 0, ${selected ? 1 : 0.8})`};
     background-color: ${({ hslCssColor }) => `hsl(${hslCssColor}, 0.20)`};
   }
 `;
diff --git a/apps/frontend/src/style/theme.ts b/apps/frontend/src/style/theme.ts
index f5bc3695..31748014 100644
--- a/apps/frontend/src/style/theme.ts
+++ b/apps/frontend/src/style/theme.ts
@@ -269,3 +269,12 @@ export const darkTheme = {
   // floatingBtnBorderHover: '',
   // floatingBtnBorder: '',
 };
+
+export const lightTheme = {
+  ...keplerTheme,
+  ...theme,
+  primaryBtnRadius: '7px',
+  primaryBtnBgd: '#07509f',
+  primaryBtnBorder: '#005a9f',
+  primaryBtnBgdHover: '#5AB6EB',
+};