diff --git a/front/src/components/editable-cell/CellEditModeContainer.tsx b/front/src/components/editable-cell/CellEditModeContainer.tsx
index 0d405c752..cc1a44f02 100644
--- a/front/src/components/editable-cell/CellEditModeContainer.tsx
+++ b/front/src/components/editable-cell/CellEditModeContainer.tsx
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import { overlayBackground } from '../../layout/styles/themes';
+
 type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
@@ -12,6 +14,7 @@ export const CellEditModeContainer = styled.div<OwnProps>`
   min-height: 100%;
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(2)};
+  margin-left: -2px;
   position: absolute;
   left: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
@@ -19,10 +22,8 @@ export const CellEditModeContainer = styled.div<OwnProps>`
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
 
-  background: ${(props) => props.theme.primaryBackground};
   border: 1px solid ${(props) => props.theme.primaryBorder};
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
   z-index: 1;
   border-radius: 4px;
-  backdrop-filter: blur(20px);
+  ${overlayBackground}
 `;
diff --git a/front/src/components/editable-cell/EditableCellMenuEditModeContainer.tsx b/front/src/components/editable-cell/EditableCellMenuEditModeContainer.tsx
index 9c3dcfccd..f405767da 100644
--- a/front/src/components/editable-cell/EditableCellMenuEditModeContainer.tsx
+++ b/front/src/components/editable-cell/EditableCellMenuEditModeContainer.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { overlayBackground } from '../../layout/styles/themes';
 
 type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
@@ -13,15 +14,13 @@ export const EditableCellMenuEditModeContainer = styled.div<OwnProps>`
   min-height: 100%;
   position: absolute;
   left: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
+    props.editModeHorizontalAlign === 'right' ? 'auto' : '-1px'};
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
 
-  background: ${(props) => props.theme.primaryBackground};
   border: 1px solid ${(props) => props.theme.primaryBorder};
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
   z-index: 1;
   border-radius: 4px;
-  backdrop-filter: blur(20px);
+  ${overlayBackground}
 `;
diff --git a/front/src/components/editable-cell/EditableChip.tsx b/front/src/components/editable-cell/EditableChip.tsx
index 9addc9419..5cbd0b8a2 100644
--- a/front/src/components/editable-cell/EditableChip.tsx
+++ b/front/src/components/editable-cell/EditableChip.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, ComponentType, useRef, useState } from 'react';
 import { EditableCell } from './EditableCell';
+import { textInputStyle } from '../../layout/styles/themes';
 
 export type EditableChipProps = {
   placeholder?: string;
@@ -14,15 +15,10 @@ export type EditableChipProps = {
 // TODO: refactor
 const StyledInplaceInput = styled.input`
   width: 100%;
-  border: none;
-  outline: none;
   padding-left: ${(props) => props.theme.spacing(1)};
   padding-right: ${(props) => props.theme.spacing(1)};
 
-  &::placeholder {
-    font-weight: 'bold';
-    color: props.theme.text20;
-  }
+  ${textInputStyle}
 `;
 
 const StyledInplaceShow = styled.div`
diff --git a/front/src/components/editable-cell/EditableDate.tsx b/front/src/components/editable-cell/EditableDate.tsx
index e32286e7e..069dafca3 100644
--- a/front/src/components/editable-cell/EditableDate.tsx
+++ b/front/src/components/editable-cell/EditableDate.tsx
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { forwardRef, useState } from 'react';
 import { EditableCell } from './EditableCell';
 import DatePicker from '../form/DatePicker';
-import { modalBackground } from '../../layout/styles/themes';
 import { humanReadableDate } from '../../services/utils';
 
 export type EditableDateProps = {
@@ -28,7 +27,7 @@ const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
   z-index: 1;
   left: -10px;
   top: 10px;
-  ${modalBackground};
+  background: ${(props) => props.theme.secondaryBackground};
 `;
 function EditableDate({
   value,
diff --git a/front/src/components/editable-cell/EditableDoubleText.tsx b/front/src/components/editable-cell/EditableDoubleText.tsx
index e396eeb7e..35e819dbc 100644
--- a/front/src/components/editable-cell/EditableDoubleText.tsx
+++ b/front/src/components/editable-cell/EditableDoubleText.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, ReactElement, useRef, useState } from 'react';
 import { EditableCell } from './EditableCell';
+import { textInputStyle } from '../../layout/styles/themes';
 
 type OwnProps = {
   firstValue: string;
@@ -24,14 +25,9 @@ const StyledContainer = styled.div`
 
 const StyledEditInplaceInput = styled.input`
   width: 45%;
-  border: none;
-  outline: none;
   height: 18px;
 
-  &::placeholder {
-    font-weight: bold;
-    color: ${(props) => props.theme.text20};
-  }
+  ${textInputStyle}
 `;
 
 export function EditableDoubleText({
diff --git a/front/src/components/editable-cell/EditableRelation.tsx b/front/src/components/editable-cell/EditableRelation.tsx
index 94bd45323..ff029cb85 100644
--- a/front/src/components/editable-cell/EditableRelation.tsx
+++ b/front/src/components/editable-cell/EditableRelation.tsx
@@ -12,6 +12,7 @@ import { EditableCellMenu } from './EditableCellMenu';
 import { CellNormalModeContainer } from './CellNormalModeContainer';
 import { useRecoilState } from 'recoil';
 import { isSomeInputInEditModeState } from '../../modules/ui/tables/states/isSomeInputInEditModeState';
+import { textInputStyle } from '../../layout/styles/themes';
 
 const StyledEditModeContainer = styled.div`
   width: 200px;
@@ -23,7 +24,7 @@ const StyledEditModeSelectedContainer = styled.div`
   height: 31px;
   display: flex;
   align-items: center;
-  padding-left: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(1)};
 `;
 
@@ -47,13 +48,8 @@ const StyledEditModeCreateButtonContainer = styled.div`
 
 const StyledEditModeSearchInput = styled.input`
   width: 100%;
-  border: none;
-  outline: none;
 
-  &::placeholder {
-    font-weight: 'bold';
-    color: ${(props) => props.theme.text20};
-  }
+  ${textInputStyle}
 `;
 
 const StyledEditModeResults = styled.div`
diff --git a/front/src/components/editable-cell/EditableText.tsx b/front/src/components/editable-cell/EditableText.tsx
index e1b5d96f1..ec89c0e74 100644
--- a/front/src/components/editable-cell/EditableText.tsx
+++ b/front/src/components/editable-cell/EditableText.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useRef, useState } from 'react';
 import { EditableCell } from './EditableCell';
+import { textInputStyle } from '../../layout/styles/themes';
 
 type OwnProps = {
   placeholder?: string;
@@ -16,14 +17,7 @@ type StyledEditModeProps = {
 // TODO: refactor
 const StyledInplaceInput = styled.input<StyledEditModeProps>`
   width: 100%;
-  border: none;
-  outline: none;
-
-  &::placeholder {
-    font-weight: ${(props) => (props.isEditMode ? 'bold' : 'normal')};
-    color: ${(props) =>
-      props.isEditMode ? props.theme.text20 : 'transparent'};
-  }
+  ${textInputStyle}
 `;
 
 const StyledNoEditText = styled.div`
diff --git a/front/src/components/form/DatePicker.tsx b/front/src/components/form/DatePicker.tsx
index ee45c83be..146d6ad84 100644
--- a/front/src/components/form/DatePicker.tsx
+++ b/front/src/components/form/DatePicker.tsx
@@ -3,6 +3,7 @@ import React, { ReactElement, forwardRef, useState } from 'react';
 import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
 
 import 'react-datepicker/dist/react-datepicker.css';
+import { overlayBackground } from '../../layout/styles/themes';
 
 export type DatePickerProps = {
   isOpen?: boolean;
@@ -85,18 +86,23 @@ const StyledContainer = styled.div`
     width: 50px;
   }
 
+  & .react-datepicker__month-dropdown,
+  & .react-datepicker__year-dropdown {
+    border: ${(props) => props.theme.primaryBorder};
+    ${overlayBackground}
+    overflow-y: scroll;
+    top: ${(props) => props.theme.spacing(2)};
+  }
   & .react-datepicker__month-dropdown {
     left: ${(props) => props.theme.spacing(2)};
-    top: ${(props) => props.theme.spacing(2)};
-    width: calc(80px + ${(props) => props.theme.spacing(6)});
-    border: ${(props) => props.theme.primaryBorder};
+    width: 160px;
+    height: 260px;
   }
 
   & .react-datepicker__year-dropdown {
     left: calc(${(props) => props.theme.spacing(9)} + 80px);
-    top: ${(props) => props.theme.spacing(2)};
-    width: calc(50px + ${(props) => props.theme.spacing(6)});
-    border: ${(props) => props.theme.primaryBorder};
+    width: 100px;
+    height: 260px;
   }
 
   & .react-datepicker__navigation--years {
@@ -110,15 +116,25 @@ const StyledContainer = styled.div`
 
   & .react-datepicker__year-option,
   & .react-datepicker__month-option {
-    line-height: 32px;
     text-align: left;
-    padding-left: ${(props) => props.theme.spacing(2)};
-    width: calc(100% - ${(props) => props.theme.spacing(2)});
-    background-color: ${(props) => props.theme.tertiaryBackground};
+    padding: ${(props) => props.theme.spacing(2)}
+      calc(${(props) => props.theme.spacing(2)} - 2px);
+    width: calc(100% - ${(props) => props.theme.spacing(4)});
+    border-radius: 2px;
+    color: ${(props) => props.theme.text60};
+    cursor: pointer;
+    margin: 2px;
 
     &:hover {
-      color: ${(props) => props.theme.text100};
-      font-weight: bold;
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    &:first-of-type {
+      display: none;
+    }
+
+    &:last-of-type {
+      display: none;
     }
   }
 
@@ -153,15 +169,32 @@ const StyledContainer = styled.div`
     background-color: ${(props) => props.theme.blue};
   }
 
+  & .react-datepicker__navigation--previous,
+  & .react-datepicker__navigation--next {
+    height: 34px;
+    border-radius: 4px;
+    padding-top: 6px;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+  }
   & .react-datepicker__navigation--previous {
-    right: 44px;
-    top: 12px;
+    right: 38px;
+    top: 8px;
     left: auto;
+
+    & > span {
+      margin-left: -6px;
+    }
   }
 
   & .react-datepicker__navigation--next {
     right: 6px;
-    top: 12px;
+    top: 8px;
+
+    & > span {
+      margin-left: 6px;
+    }
   }
 
   & .react-datepicker__navigation-icon::before {
diff --git a/front/src/components/inputs/DoubleTextInput.tsx b/front/src/components/inputs/DoubleTextInput.tsx
index 901a3220f..2d45e4f67 100644
--- a/front/src/components/inputs/DoubleTextInput.tsx
+++ b/front/src/components/inputs/DoubleTextInput.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useRef } from 'react';
+import { textInputStyle } from '../../layout/styles/themes';
 
 type OwnProps = {
   leftValue: string;
@@ -22,14 +23,9 @@ const StyledContainer = styled.div`
 
 const StyledEditInplaceInput = styled.input`
   width: 45%;
-  border: none;
-  outline: none;
   height: 18px;
 
-  &::placeholder {
-    font-weight: bold;
-    color: ${(props) => props.theme.text20};
-  }
+  ${textInputStyle}
 `;
 
 export function DoubleTextInput({
diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx
index fb44bb050..fe439ed69 100644
--- a/front/src/components/table/table-header/DropdownButton.tsx
+++ b/front/src/components/table/table-header/DropdownButton.tsx
@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 import { useRef, ReactNode } from 'react';
 import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
-import { modalBackground } from '../../../layout/styles/themes';
+import {
+  overlayBackground,
+  textInputStyle,
+} from '../../../layout/styles/themes';
 import { FaAngleDown } from 'react-icons/fa';
 
 type OwnProps = {
@@ -52,11 +55,10 @@ const StyledDropdown = styled.ul`
   top: 14px;
   right: 0;
   border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
-  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
   border-radius: var(--wraper-border-radius);
   padding: 0px;
   min-width: 160px;
-  ${modalBackground}
+  ${overlayBackground}
   li {
     &:first-of-type {
       border-top-left-radius: var(--outer-border-radius);
@@ -73,7 +75,7 @@ const StyledDropdown = styled.ul`
 const StyledDropdownItem = styled.li`
   display: flex;
   align-items: center;
-  width: 160px;
+  width: calc(160px - ${(props) => props.theme.spacing(4)});
   padding: ${(props) => props.theme.spacing(2)}
     calc(${(props) => props.theme.spacing(2)} - 2px);
   margin: 2px;
@@ -133,22 +135,17 @@ const StyledSearchField = styled.li`
   input {
     height: 36px;
     width: 100%;
-    border: none;
     padding: 8px;
     box-sizing: border-box;
     font-family: ${(props) => props.theme.fontFamily};
     border-radius: 8px;
 
+    ${textInputStyle}
+
     &:focus {
       outline: 0 none;
     }
   }
-  input::placeholder,
-  input::-webkit-input-placeholder {
-    font-family: ${(props) => props.theme.fontFamily};
-    color: ${(props) => props.theme.text30};
-    font-weight: ${(props) => props.theme.fontWeightBold};
-  }
 `;
 
 function DropdownButton({
diff --git a/front/src/layout/styles/themes.ts b/front/src/layout/styles/themes.ts
index 79b1a383d..d1ba75145 100644
--- a/front/src/layout/styles/themes.ts
+++ b/front/src/layout/styles/themes.ts
@@ -32,7 +32,7 @@ const lightThemeSpecific = {
   purpleBackground: '#e0e0ff',
   yellowBackground: '#fff2e7',
 
-  secondaryBackgroundSmallTransparency: 'rgba(252, 252, 252, 0.97)',
+  secondaryBackgroundTransparent: 'rgba(252, 252, 252, 0.8)',
 
   primaryBorder: 'rgba(0, 0, 0, 0.08)',
   lightBorder: '#f5f5f5',
@@ -69,7 +69,7 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
   purpleBackground: '#1111b7',
   yellowBackground: '#cc660a',
 
-  secondaryBackgroundSmallTransparency: 'rgba(23, 23, 23, 0.97)',
+  secondaryBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 
   clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
   clickableElementBackgroundTransition: 'background 0.1s ease',
@@ -96,9 +96,25 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
   blueLowTransparency: 'rgba(104, 149, 236, 0.32)',
 };
 
-export const modalBackground = (props: any) =>
+export const overlayBackground = (props: any) =>
   css`
-    background: ${props.theme.secondaryBackgroundSmallTransparency};
+    background: ${props.theme.secondaryBackgroundTransparent};
+    backdrop-filter: blur(8px);
+    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
+  `;
+
+export const textInputStyle = (props: any) =>
+  css`
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      font-family: ${props.theme.fontFamily};
+      color: ${props.theme.text30};
+      font-weight: ${props.theme.fontWeightBold};
+    }
   `;
 
 export const lightTheme = { ...commonTheme, ...lightThemeSpecific };
diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx
index 80b9879b6..6a886b14f 100644
--- a/front/src/pages/companies/companies-columns.tsx
+++ b/front/src/pages/companies/companies-columns.tsx
@@ -80,6 +80,7 @@ export const useCompaniesColumns = () => {
         cell: (props) => (
           <EditableText
             content={props.row.original.domainName || ''}
+            placeholder="Domain name"
             changeHandler={(value) => {
               const company = props.row.original;
               company.domainName = value;
@@ -96,6 +97,7 @@ export const useCompaniesColumns = () => {
         cell: (props) => (
           <EditableText
             content={props.row.original.employees?.toString() || ''}
+            placeholder="Employees"
             changeHandler={(value) => {
               const company = props.row.original;
 
@@ -118,6 +120,7 @@ export const useCompaniesColumns = () => {
         cell: (props) => (
           <EditableText
             content={props.row.original.address || ''}
+            placeholder="Address"
             changeHandler={(value) => {
               const company = props.row.original;
               company.address = value;