diff --git a/calculator/App.js b/calculator/App.js
index 8a778e0..65b95ec 100644
--- a/calculator/App.js
+++ b/calculator/App.js
@@ -1,51 +1,151 @@
-import { StatusBar } from 'expo-status-bar';
-import * as React from 'react';
-import { Pressable, StyleSheet, Text, View, Vibration } from 'react-native';
-import Button from './components/Button';
-import { ScrollView } from 'react-native';
+import * as React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "./components/Button";
+import { ScrollView } from "react-native";
 
+/**
+ * Main component of the calculator app.
+ * @returns {JSX.Element} The rendered component.
+ */
 export default function App() {
   const [display, setDisplay] = React.useState("0");
   const [last, setLast] = React.useState("");
 
-
+  const equalsHandler = () => {
+    try {
+      setLast(display);
+      setDisplay(eval(display.replace("%", " * 0.01")));
+    } catch {
+      setDisplay(display);
+    }
+  };
 
   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" }]}>
+      <View style={[styles.textHolder]}>
+        <Text style={[styles.lastText]}>{last}</Text>
+        <ScrollView style={[styles.sideScroll]} horizontal>
+          <Text style={[styles.resultText]} numberOfLines={1}>
+            {display}
+          </Text>
+        </ScrollView>
+      </View>
+
+      <View style={[styles.gridContainer]}>
+        <View style={[styles.row]}>
           <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 + "/")} />
+          <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 style={[styles.row]}>
+          <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 style={[styles.row]}>
+          <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 style={[styles.row]}>
+          <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={[styles.row]}>
+          <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={() => {
+              equalsHandler();
+            }}
+          />
         </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>
   );
@@ -54,8 +154,41 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#18171E',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#18171E",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  gridContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+  },
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "85%",
+    alignSelf: "center",
+  },
+  sideScroll: {
+    alignSelf: "flex-end",
+  },
+  resultText: {
+    color: "#fff",
+    fontSize: 60,
+    alignSelf: "flex-end",
+    height: 70,
+    textAlign: "right",
+  },
+  lastText: {
+    color: "rgba(255, 255, 255, 0.6)",
+    fontSize: 40,
+    alignSelf: "flex-end",
+    marginBottom: 20,
+  },
+  textHolder: {
+    width: "85%",
+    marginBottom: 30,
   },
 });
diff --git a/calculator/app.json b/calculator/app.json
index 39566e6..30b1f2c 100644
--- a/calculator/app.json
+++ b/calculator/app.json
@@ -4,12 +4,12 @@
     "slug": "calculator",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "icon": "./assets/logo.png",
+    "userInterfaceStyle": "dark",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/logo.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#18171E"
     },
     "assetBundlePatterns": [
       "**/*"
@@ -19,12 +19,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "foregroundImage": "./assets/logo.png",
+        "backgroundColor": "#18171E"
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/logo.png"
     }
   }
 }
diff --git a/calculator/assets/adaptive-icon.png b/calculator/assets/adaptive-icon.png
deleted file mode 100644
index 03d6f6b..0000000
Binary files a/calculator/assets/adaptive-icon.png and /dev/null differ
diff --git a/calculator/assets/delete-left-solid.png b/calculator/assets/delete-left-solid.png
deleted file mode 100644
index 36df619..0000000
Binary files a/calculator/assets/delete-left-solid.png and /dev/null differ
diff --git a/calculator/assets/delete-left-solid.svg b/calculator/assets/delete-left-solid.svg
deleted file mode 100644
index fe9c569..0000000
--- a/calculator/assets/delete-left-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M576 128c0-35.3-28.7-64-64-64H205.3c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7H512c35.3 0 64-28.7 64-64V128zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>
\ No newline at end of file
diff --git a/calculator/assets/logo.png b/calculator/assets/logo.png
new file mode 100644
index 0000000..d61b8b7
Binary files /dev/null and b/calculator/assets/logo.png differ
diff --git a/calculator/components/Button.js b/calculator/components/Button.js
index 6ac6edd..69e0f32 100644
--- a/calculator/components/Button.js
+++ b/calculator/components/Button.js
@@ -1,54 +1,101 @@
-import { Pressable, StyleSheet, Text, View, Image, Vibration, Platform } from 'react-native';
-import Icon from 'react-native-vector-icons/dist/FontAwesome';
-import * as Haptics from 'expo-haptics';
+import { Pressable, StyleSheet, Text, Image } from "react-native";
+import * as Haptics from "expo-haptics";
 
+/**
+ * Represents a button component.
+ * @param {Object} props - The props for the button component.
+ * @param {string} props.text - The text to be displayed on the button.
+ * @param {function} props.pressHandler - The function to be called when the button is pressed.
+ * @param {string} props.type - The type of the button.
+ * @returns {JSX.Element} The button component.
+ */
 export default function Button({ text, pressHandler, type }) {
-    const ONE_SECOND_IN_MS = 1000;
+  if (text === "back") {
+    return (
+      <Pressable
+        onPress={() => {
+          pressHandler();
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }}
+        style={[styles.button, styles.button3]}
+      >
+        <Image
+          source={require("../assets/delete-left-white.png")}
+          style={[styles.imageStyle]}
+        />
+      </Pressable>
+    );
+  }
 
-  const PATTERN = [
-    1 * ONE_SECOND_IN_MS,
-    2 * ONE_SECOND_IN_MS,
-    3 * ONE_SECOND_IN_MS,
-  ];
+  if (type === "t1") {
+    return (
+      <Pressable
+        onPress={() => {
+          pressHandler();
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }}
+        style={[styles.button]}
+      >
+        <Text style={[styles.text]}>{text}</Text>
+      </Pressable>
+    );
+  }
 
-  const PATTERN_DESC =
-    Platform.OS === 'android'
-      ? 'wait 1s, vibrate 2s, wait 3s'
-      : 'wait 1s, vibrate, wait 2s, vibrate, wait 3s';
+  if (type === "t2") {
+    return (
+      <Pressable
+        onPress={() => {
+          pressHandler();
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }}
+        style={[styles.button, styles.button2]}
+      >
+        <Text style={[styles.text]}>{text}</Text>
+      </Pressable>
+    );
+  }
 
-
-
-    if (text === "back") {
-        return <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} 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();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button]}><Text style={[styles.text]}>{text}</Text></Pressable>
-        );
-    }
-
-    if (type === "t2") {
-        return <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button, {backgroundColor: "#4D5CFB"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
-    }
-
-    if (type === "t3") {
-        return (
-            <Pressable onPress={() => {pressHandler();Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
-        );
-    }
+  if (type === "t3") {
+    return (
+      <Pressable
+        onPress={() => {
+          pressHandler();
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }}
+        style={[styles.button, styles.button3]}
+      >
+        <Text style={[styles.text]}>{text}</Text>
+      </Pressable>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    button: {
-        width: 75, height: 75, padding: 10, backgroundColor: "#4E505F", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", borderRadius: 20
-    },
-    text: {
-        color: "#fff",
-        display: "flex",
-        fontSize: 25,
-        fontWeight: "600"
-    }
-
-});
\ No newline at end of file
+  button: {
+    width: 75,
+    height: 75,
+    padding: 10,
+    backgroundColor: "#4E505F",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 20,
+  },
+  text: {
+    color: "#fff",
+    display: "flex",
+    fontSize: 25,
+    fontWeight: "600",
+  },
+  button2: {
+    backgroundColor: "#4D5CFB",
+  },
+  button3: {
+    backgroundColor: "#2F2F39",
+  },
+  imageStyle: {
+    width: 30,
+    height: 30,
+  },
+});