diff --git a/.expo/README.md b/.expo/README.md
new file mode 100644
index 0000000..fd146b4
--- /dev/null
+++ b/.expo/README.md
@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
diff --git a/.expo/settings.json b/.expo/settings.json
new file mode 100644
index 0000000..92bc513
--- /dev/null
+++ b/.expo/settings.json
@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}
diff --git a/calculator/App.js b/calculator/App.js
index 3bea9ee..8a778e0 100644
--- a/calculator/App.js
+++ b/calculator/App.js
@@ -1,17 +1,51 @@
 import { StatusBar } from 'expo-status-bar';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View, Vibration } from 'react-native';
 import Button from './components/Button';
+import { ScrollView } from 'react-native';
 
 export default function App() {
-  return (
-    <View style={styles.container}>
+  const [display, setDisplay] = React.useState("0");
+  const [last, setLast] = React.useState("");
+
 
-      <Text>6,291 / 5</Text>
-      <Text>1,5258.2</Text>
 
-      <View>
-        <Button />
-        
+  return (
+    <View style={styles.container}>
+      <View style={[{width: "85%", marginBottom: 30}]}>
+      <Text style={[{color: "rgba(255, 255, 255, 0.6)", fontSize: 40, alignSelf: "flex-end", marginBottom: 20}]}>{last}</Text>
+      <ScrollView style={[{alignSelf: "flex-end" }]} horizontal><Text style={[{color: "#fff", fontSize: 60, alignSelf: "flex-end", height: 70, textAlign: "right"}]} numberOfLines={1}>{display}</Text></ScrollView></View> 
+      <View style={[{ display: "flex", flexDirection: "column", gap: 20 }]}>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t1" text="C" pressHandler={() => setDisplay("")} />
+          <Button type="t1" text="+ / -" pressHandler={() => {display.startsWith("-") ? setDisplay(display.slice(1)) : setDisplay("-" + display)}} />
+          <Button type="t1" text="%" pressHandler={() => setDisplay(display + "%")}/>
+          <Button type="t2" text="/" pressHandler={() => setDisplay(display + "/")} />
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="7" pressHandler={() => setDisplay(display + "7")} />
+          <Button type="t3" text="8" pressHandler={() => setDisplay(display + "8")} />
+          <Button type="t3" text="9" pressHandler={() => setDisplay(display + "9")} />
+          <Button type="t2" text="*" pressHandler={() => setDisplay(display + "*")}/>
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="4" pressHandler={() => setDisplay(display + "4")}/>
+          <Button type="t3" text="5" pressHandler={() => setDisplay(display + "5")}/>
+          <Button type="t3" text="6" pressHandler={() => setDisplay(display + "6")}/>
+          <Button type="t2" text="-" pressHandler={() => setDisplay(display + "-")}/>
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="1" pressHandler={() => setDisplay(display + "1")}/>
+          <Button type="t3" text="2" pressHandler={() => setDisplay(display + "2")}/>
+          <Button type="t3" text="3" pressHandler={() => setDisplay(display + "3")}/>
+          <Button type="t2" text="+" pressHandler={() => setDisplay(display + "+")}/>
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="." pressHandler={() => setDisplay(display + ".")}/>
+          <Button type="t3" text="0" pressHandler={() => setDisplay(display + "0")}/>
+          <Button type="t3" text="back" pressHandler={() => setDisplay(display.substring(0, display.length -1))} />
+          <Button type="t2" text="=" pressHandler={() => {try {setLast(display);setDisplay(eval(display.replace("%", " * 0.01"))) } catch {setDisplay(display)}}} />
+        </View> 
       </View>
     </View>
   );
@@ -20,7 +54,7 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#18171E',
     alignItems: 'center',
     justifyContent: 'center',
   },
diff --git a/calculator/components/Button.js b/calculator/components/Button.js
index e59917d..f9b7d44 100644
--- a/calculator/components/Button.js
+++ b/calculator/components/Button.js
@@ -1,19 +1,53 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View, Image, Vibration, Platform } from 'react-native';
+import Icon from 'react-native-vector-icons/dist/FontAwesome';
 
-export default function Button({ text, pressHandler }) {
+export default function Button({ text, pressHandler, type }) {
+    const ONE_SECOND_IN_MS = 1000;
 
-    return (
-        <Pressable onPress={() => pressHandler()} style={[styles.button]}><Text style={[styles.text]}>C</Text></Pressable>
-    );
+  const PATTERN = [
+    1 * ONE_SECOND_IN_MS,
+    2 * ONE_SECOND_IN_MS,
+    3 * ONE_SECOND_IN_MS,
+  ];
+
+  const PATTERN_DESC =
+    Platform.OS === 'android'
+      ? 'wait 1s, vibrate 2s, wait 3s'
+      : 'wait 1s, vibrate, wait 2s, vibrate, wait 3s';
+
+
+
+    if (text == "back") {
+        return <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Image source={require("../assets/delete-left-white.png")} style={[{width: 30, height: 30, color: "#fff"}]} /></Pressable>
+    }
+
+
+    if (type == "t1") {
+        return (
+            <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button]}><Text style={[styles.text]}>{text}</Text></Pressable>
+        );
+    }
+
+    if (type == "t2") {
+        return <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#4D5CFB"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
+    }
+
+    if (type == "t3") {
+        return (
+            <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
+        );
+    }
 }
 
 const styles = StyleSheet.create({
     button: {
-        width: 50, height: 50, padding: 10, backgroundColor: "#4E505F", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", borderRadius: 15
+        width: 75, height: 75, padding: 10, backgroundColor: "#4E505F", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", borderRadius: 20
     },
     text: {
         color: "#fff",
-        display: "flex"
+        display: "flex",
+        fontSize: 25,
+        fontWeight: "600"
     }
 
 });
\ No newline at end of file
diff --git a/calculator/package-lock.json b/calculator/package-lock.json
index 0e4a549..fcb5e39 100644
--- a/calculator/package-lock.json
+++ b/calculator/package-lock.json
@@ -11,7 +11,8 @@
         "expo": "~50.0.14",
         "expo-status-bar": "~1.11.1",
         "react": "18.2.0",
-        "react-native": "0.73.6"
+        "react-native": "0.73.6",
+        "react-native-vector-icons": "^10.0.3"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0"
@@ -12094,6 +12095,67 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.3.tgz",
+      "integrity": "sha512-ZgVlV5AdQgnPHHvBEihGf2xwyziT1acpXV1U+WfCgCv3lcEeCRsmwAsBU+kUSNsU+8TcWVsX04kdI6qUaS8D7w==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native/node_modules/@react-native/codegen": {
       "version": "0.73.3",
       "resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.73.3.tgz",
diff --git a/calculator/package.json b/calculator/package.json
index 6aff403..d907a94 100644
--- a/calculator/package.json
+++ b/calculator/package.json
@@ -12,7 +12,8 @@
     "expo": "~50.0.14",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.6"
+    "react-native": "0.73.6",
+    "react-native-vector-icons": "^10.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 589410c..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "demo-workshop-taschenrechner",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}
diff --git a/tunnel/.expo/README.md b/tunnel/.expo/README.md
new file mode 100644
index 0000000..fd146b4
--- /dev/null
+++ b/tunnel/.expo/README.md
@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
diff --git a/tunnel/.expo/settings.json b/tunnel/.expo/settings.json
new file mode 100644
index 0000000..92bc513
--- /dev/null
+++ b/tunnel/.expo/settings.json
@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}