diff --git a/src/app/graphqlOperations/fragments/engagement.graphql b/src/app/graphqlOperations/fragments/engagement.graphql
index ba879ab..6f96b75 100644
--- a/src/app/graphqlOperations/fragments/engagement.graphql
+++ b/src/app/graphqlOperations/fragments/engagement.graphql
@@ -3,8 +3,10 @@ fragment EngagementFieldsForBikePage on Engagement {
     engagementType {
         ...EngagementTypeFields
     }
-    from
-    to
+    dateRange {
+        from
+        to
+    }
     participant {
         ...ParticipantFieldsForBikePage
     }
diff --git a/src/app/pages/table-overview/table-overview.component.html b/src/app/pages/table-overview/table-overview.component.html
index 31235fc..f400e59 100644
--- a/src/app/pages/table-overview/table-overview.component.html
+++ b/src/app/pages/table-overview/table-overview.component.html
@@ -2,25 +2,25 @@
 <div class="grid-list-spacer">
 <div class="big-list">
 <mat-grid-list class="big-list" cols="2" rowHeight="3:1">
-    <mat-grid-tile routerLink = "/table/bikes">Lastenräder</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/participants">Beteiligte</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/lendingStations">Ausleihstationen</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/lendingStations">Tabelle 4</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Lastenräder</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/participants">Beteiligte</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/lendingStations">Standorte</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/lendingStations">Tabelle 4</mat-grid-tile>
   </mat-grid-list>
   <div>
-  <mat-grid-list cols="4" rowHeight="30px">
-    <mat-grid-tile routerLink = "/table/equipmentTypes">Equipmenttypen</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/equipment">Equipment</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 8</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 9</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 10</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 11</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 12</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 13</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 14</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 15</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 16</mat-grid-tile>
-    <mat-grid-tile routerLink = "/table/bikes">Tabelle 17</mat-grid-tile>
+  <mat-grid-list cols="4" rowHeight="30px"  >
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/equipmentTypes">Equipmenttypen</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/equipment">Equipment</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/timeFrames">Zeitscheiben</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 9</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 10</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 11</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 12</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 13</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 14</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 15</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 16</mat-grid-tile>
+    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Tabelle 17</mat-grid-tile>
   </mat-grid-list>
 </div>
 
diff --git a/src/app/pages/table-overview/table-overview.component.scss b/src/app/pages/table-overview/table-overview.component.scss
index c42a930..76d2043 100644
--- a/src/app/pages/table-overview/table-overview.component.scss
+++ b/src/app/pages/table-overview/table-overview.component.scss
@@ -1,12 +1,12 @@
 mat-grid-tile {
-    background: gray;
-    cursor: pointer;
-  }
+  cursor: pointer;
+  background: grey;
+}
 
-.grid-list-spacer{
+.grid-list-spacer {
   margin: 15px;
 }
 
-.big-list{
+.big-list {
   margin-bottom: 30px;
-}
\ No newline at end of file
+}
diff --git a/src/generated/graphql.schema.json b/src/generated/graphql.schema.json
index 29fd6be..66a4b45 100644
--- a/src/generated/graphql.schema.json
+++ b/src/generated/graphql.schema.json
@@ -153,13 +153,9 @@
             "description": null,
             "args": [],
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Int",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "Int",
+              "ofType": null
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -169,13 +165,9 @@
             "description": "Safety is a custom type, that stores information about security features.\nTODO: Should this be called Security?",
             "args": [],
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "Security",
-                "ofType": null
-              }
+              "kind": "OBJECT",
+              "name": "Security",
+              "ofType": null
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -630,13 +622,9 @@
             "name": "modelName",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -644,13 +632,9 @@
             "name": "numberOfWheels",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Int",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "Int",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -658,13 +642,9 @@
             "name": "forCargo",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Boolean",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "Boolean",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -672,13 +652,9 @@
             "name": "forChildren",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Boolean",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "Boolean",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -686,13 +662,9 @@
             "name": "numberOfChildren",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Int",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "Int",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -700,13 +672,9 @@
             "name": "security",
             "description": "Safety is a custom type, that stores information about security features.",
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "INPUT_OBJECT",
-                "name": "SecurityCreateInput",
-                "ofType": null
-              }
+              "kind": "INPUT_OBJECT",
+              "name": "SecurityCreateInput",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -2085,13 +2053,9 @@
             "description": null,
             "args": [],
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -2160,13 +2124,9 @@
             "name": "frameNumber",
             "description": null,
             "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              }
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
             },
             "defaultValue": null
           },
@@ -3666,33 +3626,21 @@
             "deprecationReason": null
           },
           {
-            "name": "from",
+            "name": "dateRange",
             "description": null,
             "args": [],
             "type": {
               "kind": "NON_NULL",
               "name": null,
               "ofType": {
-                "kind": "SCALAR",
-                "name": "Date",
+                "kind": "OBJECT",
+                "name": "DateRange",
                 "ofType": null
               }
             },
             "isDeprecated": false,
             "deprecationReason": null
           },
-          {
-            "name": "to",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "SCALAR",
-              "name": "Date",
-              "ofType": null
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
           {
             "name": "participant",
             "description": null,
@@ -3808,21 +3756,11 @@
             "defaultValue": null
           },
           {
-            "name": "from",
-            "description": "will use CURRENT_DATE if not set",
-            "type": {
-              "kind": "SCALAR",
-              "name": "Date",
-              "ofType": null
-            },
-            "defaultValue": null
-          },
-          {
-            "name": "to",
-            "description": "will use infinit if not set",
+            "name": "dateRange",
+            "description": null,
             "type": {
-              "kind": "SCALAR",
-              "name": "Date",
+              "kind": "INPUT_OBJECT",
+              "name": "DateRangeInput",
               "ofType": null
             },
             "defaultValue": null
@@ -3891,21 +3829,11 @@
             "defaultValue": null
           },
           {
-            "name": "from",
-            "description": null,
-            "type": {
-              "kind": "SCALAR",
-              "name": "Date",
-              "ofType": null
-            },
-            "defaultValue": null
-          },
-          {
-            "name": "to",
+            "name": "dateRange",
             "description": null,
             "type": {
-              "kind": "SCALAR",
-              "name": "Date",
+              "kind": "INPUT_OBJECT",
+              "name": "DateRangeInput",
               "ofType": null
             },
             "defaultValue": null
diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts
index d6a4957..75bd538 100644
--- a/src/generated/graphql.ts
+++ b/src/generated/graphql.ts
@@ -43,12 +43,12 @@ export type CargoBike = {
   numberOfWheels?: Maybe<Scalars['Int']>;
   forCargo?: Maybe<Scalars['Boolean']>;
   forChildren?: Maybe<Scalars['Boolean']>;
-  numberOfChildren: Scalars['Int'];
+  numberOfChildren?: Maybe<Scalars['Int']>;
   /**
    * Safety is a custom type, that stores information about security features.
    * TODO: Should this be called Security?
    */
-  security: Security;
+  security?: Maybe<Security>;
   /** Does not refer to an extra table in the database. */
   technicalEquipment?: Maybe<TechnicalEquipment>;
   /** Does not refer to an extra table in the database. */
@@ -113,13 +113,13 @@ export type CargoBikeCreateInput = {
   group: Group;
   name: Scalars['String'];
   state?: Maybe<BikeState>;
-  modelName: Scalars['String'];
-  numberOfWheels: Scalars['Int'];
-  forCargo: Scalars['Boolean'];
-  forChildren: Scalars['Boolean'];
-  numberOfChildren: Scalars['Int'];
+  modelName?: Maybe<Scalars['String']>;
+  numberOfWheels?: Maybe<Scalars['Int']>;
+  forCargo?: Maybe<Scalars['Boolean']>;
+  forChildren?: Maybe<Scalars['Boolean']>;
+  numberOfChildren?: Maybe<Scalars['Int']>;
   /** Safety is a custom type, that stores information about security features. */
-  security: SecurityCreateInput;
+  security?: Maybe<SecurityCreateInput>;
   /** Does not refer to an extra table in the database. */
   technicalEquipment?: Maybe<TechnicalEquipmentCreateInput>;
   /** Does not refer to an extra table in the database. */
@@ -356,7 +356,7 @@ export type TechnicalEquipmentUpdateInput = {
  */
 export type Security = {
   __typename?: 'Security';
-  frameNumber: Scalars['String'];
+  frameNumber?: Maybe<Scalars['String']>;
   keyNumberFrameLock?: Maybe<Scalars['String']>;
   keyNumberAXAChain?: Maybe<Scalars['String']>;
   policeCoding?: Maybe<Scalars['String']>;
@@ -364,7 +364,7 @@ export type Security = {
 };
 
 export type SecurityCreateInput = {
-  frameNumber: Scalars['String'];
+  frameNumber?: Maybe<Scalars['String']>;
   keyNumberFrameLock?: Maybe<Scalars['String']>;
   keyNumberAXAChain?: Maybe<Scalars['String']>;
   policeCoding?: Maybe<Scalars['String']>;
@@ -547,8 +547,7 @@ export type Engagement = {
   __typename?: 'Engagement';
   id: Scalars['ID'];
   engagementType: EngagementType;
-  from: Scalars['Date'];
-  to?: Maybe<Scalars['Date']>;
+  dateRange: DateRange;
   participant: Participant;
   cargoBike: CargoBike;
   isLocked: Scalars['Boolean'];
@@ -560,10 +559,7 @@ export type Engagement = {
 
 export type EngagementCreateInput = {
   engagementTypeId: Scalars['ID'];
-  /** will use CURRENT_DATE if not set */
-  from?: Maybe<Scalars['Date']>;
-  /** will use infinit if not set */
-  to?: Maybe<Scalars['Date']>;
+  dateRange?: Maybe<DateRangeInput>;
   participantId: Scalars['ID'];
   cargoBikeId: Scalars['ID'];
 };
@@ -571,8 +567,7 @@ export type EngagementCreateInput = {
 export type EngagementUpdateInput = {
   id: Scalars['ID'];
   engagementTypeId?: Maybe<Scalars['ID']>;
-  from?: Maybe<Scalars['Date']>;
-  to?: Maybe<Scalars['Date']>;
+  dateRange?: Maybe<DateRangeInput>;
   participantId?: Maybe<Scalars['ID']>;
   cargoBikeId?: Maybe<Scalars['ID']>;
   keepLock?: Maybe<Scalars['Boolean']>;
@@ -1961,7 +1956,7 @@ export type DeleteEquipmentTypeMutation = { __typename?: 'Mutation', deleteEquip
 
 export type AddressFieldsFragment = { __typename?: 'Address', street: string, number: string, zip: string };
 
-export type CargoBikeFieldsForTableFragment = { __typename?: 'CargoBike', id: string, group?: Maybe<Group>, name: string, modelName?: Maybe<string>, numberOfChildren: number, numberOfWheels?: Maybe<number>, forCargo?: Maybe<boolean>, forChildren?: Maybe<boolean>, stickerBikeNameState?: Maybe<StickerBikeNameState>, note?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, insuranceData?: Maybe<{ __typename?: 'InsuranceData', billing?: Maybe<string>, hasFixedRate?: Maybe<boolean>, name?: Maybe<string>, benefactor?: Maybe<string>, noPnP?: Maybe<string>, maintenanceResponsible?: Maybe<string>, maintenanceBenefactor?: Maybe<string>, maintenanceAgreement?: Maybe<string>, fixedRate?: Maybe<number>, projectAllowance?: Maybe<any>, notes?: Maybe<string> }>, dimensionsAndLoad?: Maybe<{ __typename?: 'DimensionsAndLoad', bikeLength?: Maybe<number>, bikeWeight?: Maybe<number>, bikeHeight?: Maybe<number>, bikeWidth?: Maybe<number>, hasCoverBox?: Maybe<boolean>, lockable?: Maybe<boolean>, maxWeightBox?: Maybe<number>, maxWeightLuggageRack?: Maybe<number>, maxWeightTotal?: Maybe<number>, boxHeightRange?: Maybe<{ __typename?: 'NumRange', max?: Maybe<number>, min?: Maybe<number> }>, boxLengthRange?: Maybe<{ __typename?: 'NumRange', min?: Maybe<number>, max?: Maybe<number> }>, boxWidthRange?: Maybe<{ __typename?: 'NumRange', min?: Maybe<number>, max?: Maybe<number> }> }>, security: { __typename?: 'Security', frameNumber: string, adfcCoding?: Maybe<string>, keyNumberAXAChain?: Maybe<string>, keyNumberFrameLock?: Maybe<string>, policeCoding?: Maybe<string> }, technicalEquipment?: Maybe<{ __typename?: 'TechnicalEquipment', bicycleShift?: Maybe<string>, isEBike?: Maybe<boolean>, hasLightSystem?: Maybe<boolean>, specialFeatures?: Maybe<string> }>, taxes?: Maybe<{ __typename?: 'Taxes', costCenter?: Maybe<string>, organisationArea?: Maybe<OrganisationArea> }>, provider?: Maybe<(
+export type CargoBikeFieldsForTableFragment = { __typename?: 'CargoBike', id: string, group?: Maybe<Group>, name: string, modelName?: Maybe<string>, numberOfChildren?: Maybe<number>, numberOfWheels?: Maybe<number>, forCargo?: Maybe<boolean>, forChildren?: Maybe<boolean>, stickerBikeNameState?: Maybe<StickerBikeNameState>, note?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, insuranceData?: Maybe<{ __typename?: 'InsuranceData', billing?: Maybe<string>, hasFixedRate?: Maybe<boolean>, name?: Maybe<string>, benefactor?: Maybe<string>, noPnP?: Maybe<string>, maintenanceResponsible?: Maybe<string>, maintenanceBenefactor?: Maybe<string>, maintenanceAgreement?: Maybe<string>, fixedRate?: Maybe<number>, projectAllowance?: Maybe<any>, notes?: Maybe<string> }>, dimensionsAndLoad?: Maybe<{ __typename?: 'DimensionsAndLoad', bikeLength?: Maybe<number>, bikeWeight?: Maybe<number>, bikeHeight?: Maybe<number>, bikeWidth?: Maybe<number>, hasCoverBox?: Maybe<boolean>, lockable?: Maybe<boolean>, maxWeightBox?: Maybe<number>, maxWeightLuggageRack?: Maybe<number>, maxWeightTotal?: Maybe<number>, boxHeightRange?: Maybe<{ __typename?: 'NumRange', max?: Maybe<number>, min?: Maybe<number> }>, boxLengthRange?: Maybe<{ __typename?: 'NumRange', min?: Maybe<number>, max?: Maybe<number> }>, boxWidthRange?: Maybe<{ __typename?: 'NumRange', min?: Maybe<number>, max?: Maybe<number> }> }>, security?: Maybe<{ __typename?: 'Security', frameNumber?: Maybe<string>, adfcCoding?: Maybe<string>, keyNumberAXAChain?: Maybe<string>, keyNumberFrameLock?: Maybe<string>, policeCoding?: Maybe<string> }>, technicalEquipment?: Maybe<{ __typename?: 'TechnicalEquipment', bicycleShift?: Maybe<string>, isEBike?: Maybe<boolean>, hasLightSystem?: Maybe<boolean>, specialFeatures?: Maybe<string> }>, taxes?: Maybe<{ __typename?: 'Taxes', costCenter?: Maybe<string>, organisationArea?: Maybe<OrganisationArea> }>, provider?: Maybe<(
     { __typename?: 'Provider' }
     & ProviderFieldsGeneralFragment
   )>, lendingStation?: Maybe<(
@@ -2007,10 +2002,10 @@ export type ContactInformationFieldsFragment = { __typename?: 'ContactInformatio
     & PersonFieldsFragment
   ) };
 
-export type EngagementFieldsForBikePageFragment = { __typename?: 'Engagement', id: string, from: any, to?: Maybe<any>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, engagementType: (
+export type EngagementFieldsForBikePageFragment = { __typename?: 'Engagement', id: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, engagementType: (
     { __typename?: 'EngagementType' }
     & EngagementTypeFieldsFragment
-  ), participant: (
+  ), dateRange: { __typename?: 'DateRange', from: any, to?: Maybe<any> }, participant: (
     { __typename?: 'Participant' }
     & ParticipantFieldsForBikePageFragment
   ) };
@@ -2373,8 +2368,10 @@ export const EngagementFieldsForBikePageFragmentDoc = gql`
   engagementType {
     ...EngagementTypeFields
   }
-  from
-  to
+  dateRange {
+    from
+    to
+  }
   participant {
     ...ParticipantFieldsForBikePage
   }